/* ===== Theme tokens ===== */
:root{
  --bg:#0d1117; --card:#111827; --text:#e5e7eb; --muted:#9ca3af;
  --link:#3b82f6; --accent:#10b981; --brand:#10b981;
  --border:#1f2937; --shadow:0 8px 22px rgba(0,0,0,.35);
}

html,body{
  background:var(--bg); color:var(--text);
  font-family:system-ui, Segoe UI, Roboto, Ubuntu, sans-serif;
  margin:0; padding:0;
}
.ah-container{max-width:1100px; margin:0 auto; padding:0 16px;}

/* ===== Top bar ===== */
.ah-top{position:sticky; top:0; z-index:50; background:rgba(13,17,23,.85);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--border);}
.bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0;}
.left{display:flex; align-items:center; gap:10px;}
.right{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);}
.logo{height:44px; width:auto; object-fit:contain; filter:drop-shadow(0 1px 0 rgba(0,0,0,.3));}
.site-title{font-weight:800; letter-spacing:.2px;}
.home-btn{margin-left:12px; color:var(--link); text-decoration:none; font-weight:600;}
.home-btn:hover{opacity:.85;}

/* Date strip + clock icon */
.date-strip{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.92rem; white-space:nowrap;}
.time-ico{display:inline-flex; vertical-align:middle; margin-right:2px; opacity:.9}

/* Lang dropdown */
details.lang{position:relative;}
details.lang>summary{
  list-style:none; cursor:pointer; padding:6px 10px; border:1px solid var(--border);
  border-radius:8px; color:var(--text); background:var(--card);
}
details.lang>summary::-webkit-details-marker{display:none;}
details.lang[open] > summary{border-bottom-left-radius:0; border-bottom-right-radius:0;}
details.lang .menu{
  position:absolute; right:0; top:100%; background:var(--card); border:1px solid var(--border);
  border-top:none; min-width:140px; box-shadow:var(--shadow); border-bottom-left-radius:8px; border-bottom-right-radius:8px;
}
details.lang .menu a{
  display:block; padding:8px 12px; text-decoration:none; color:var(--text);
}
details.lang .menu a:hover{background:#0b1220;}
details.lang .menu a.active{background:#0b1220; color:#93c5fd;}

/* Logout link */
.logout{color:#ef8717; text-decoration:none; font-weight:600;}
.logout:hover{opacity:.85;}

/* Alerts */
.alert{margin:16px auto; padding:12px 14px; border-radius:10px;}
.alert-success{background:#0521ea; color:#a7f3d0; border:1px solid #065f46;}
.alert-danger{background:#3b0d0d; color:#fecaca; border:1px solid #7f1d1d;}

/* Cards / inputs (generic – for login boxes) */
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow);}
.row{display:flex; gap:10px; align-items:center;}
.input{width:100%; padding:10px; border:1px solid #334155; border-radius:10px; background:#0b1220; color:var(--text);}
.btn{display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid var(--border); color:var(--text);}
.btn.primary{background:#2563eb; border-color:#2563eb; cursor:pointer;}
.btn.brand{background:var(--brand); border-color:var(--brand); color:#052e2b;}
.link{color:#93c5fd; text-decoration:none;}
.link:hover{text-decoration:underline;}

/* ===== Captcha (compact + modern) ===== */
.captcha-row{
  display:flex; align-items:center; gap:8px; margin:10px 0;
}
.captcha-label{
  font-size:12px; color:var(--muted); line-height:1;
}
.captcha-box{
  background:#0f172a;
  border:1px solid #334155;
  padding:3px 8px;
  border-radius:6px;
  font-weight:700;
  font-size:12px;
  letter-spacing:1px;
  color:#22d3ee;
  box-shadow:inset 0 0 4px #22d3ee55;
}
.captcha-input{
  width:88px;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid #475569;
  background:#0b1220;
  color:var(--text);
  font-size:12px;
}
.captcha-input::placeholder{color:#94a3b8; font-size:12px;}
@media (max-width:640px){
  .captcha-input{width:76px;}
}

/* Footer */
footer{padding:20px; text-align:center; color:var(--muted); border-top:1px solid var(--border); margin-top:20px;}

/* ===== Responsive ===== */
@media (max-width:640px){
  .logo{height:34px;}
  .site-title{display:none;} /* mobile पर सिर्फ logo */
}

/* ===== RTL tweaks for Urdu ===== */
[dir="rtl"] .left{flex-direction:row-reverse;}
[dir="rtl"] .right{flex-direction:row-reverse;}
[dir="rtl"] .home-btn{margin-left:0; margin-right:12px;}