:root{
  --paper:#F7F3EA;--ink:#1E1A16;--terra:#B4552D;--stone:#8A8578;--teal:#16564E;--gold:#C9A227;
  --card:#FFFDF7;--line:#E3DCCB;--muted:#6B655A;--soft:#EFE9DA;--ok:#2E7D32;--warn:#B26A00;--danger:#B3261E;
  --radius:14px;--shadow:0 2px 10px rgba(30,26,22,.07);
  --font-head:'Marcellus',Georgia,serif;--font-body:'Inter',system-ui,sans-serif;--font-ur:'Noto Nastaliq Urdu',serif;
}
[data-theme="dark"]{--paper:#171310;--ink:#EFE7D6;--card:#211B15;--line:#3A3226;--soft:#26201A;--muted:#B5AB97;--shadow:0 2px 12px rgba(0,0,0,.5)}
[data-a11y="contrast"]{--paper:#FFFFFF;--ink:#000000;--card:#FFFFFF;--line:#000;--muted:#222;--terra:#8B2F0F;--teal:#0A3B35}
[data-a11y="contrast"] *{text-shadow:none!important;box-shadow:none!important}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.65;font-size:16px}
body[data-motion="off"] *{animation:none!important;transition:none!important}
.urdu,.lang-ur{font-family:var(--font-ur);direction:rtl;line-height:2.2}
h1,h2,h3,.head{font-family:var(--font-head);font-weight:400;letter-spacing:.2px;line-height:1.25;margin:0 0 .4em}
h1{font-size:clamp(1.9rem,4.5vw,3.2rem)}h2{font-size:clamp(1.5rem,3vw,2.2rem)}h3{font-size:1.25rem}
a{color:var(--teal)}a:hover{color:var(--terra)}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}.small{font-size:.86rem}.center{text-align:center}
.chip{display:inline-block;padding:3px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-size:.78rem;color:var(--muted);margin:2px 4px 2px 0}
.chip.whs{border-color:#9A7B1A;color:#7A5E10;font-weight:600}
.chip.tent{border-color:var(--stone)}
.chip.legend{border-color:#8B6D1A;background:#FBF3D5;color:#6B5000}
.chip.ok{border-color:var(--ok);color:var(--ok)}
.btn{display:inline-block;padding:11px 22px;border-radius:999px;background:var(--terra);color:#fff!important;text-decoration:none;font-weight:600;border:none;cursor:pointer;font-size:.95rem;transition:transform .15s}
.btn:hover{transform:translateY(-1px);background:#9A4723;color:#fff}
.btn.ghost{background:transparent;color:var(--teal)!important;border:1.5px solid var(--teal)}
.btn.gold{background:var(--gold);color:#231A00}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{font-family:var(--font-head);font-size:2rem;color:var(--terra)}
.stat-row{display:flex;gap:28px;flex-wrap:wrap;margin:18px 0}
.stat-row b{display:block;font-size:.78rem;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.5px}
header.site{position:sticky;top:0;z-index:900;background:var(--paper);border-bottom:2px solid var(--line)}
header.site .bar{display:flex;align-items:center;gap:16px;padding:10px 20px;max-width:1160px;margin:0 auto;flex-wrap:wrap}
.logo{font-family:var(--font-head);font-size:1.3rem;text-decoration:none;color:var(--ink)!important;display:flex;align-items:center;gap:9px}
.logo .seal{width:34px;height:34px;border-radius:50%;background:var(--terra);color:#fff;display:grid;place-items:center;font-size:.95rem}
nav.main{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
nav.main a{padding:7px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:.88rem;font-weight:500}
nav.main a:hover,nav.main a.on{background:var(--soft);color:var(--ink)}
.toolbar{display:flex;gap:8px;align-items:center}
.toolbar button{background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:.82rem;color:var(--ink)}
.hero{position:relative;background:linear-gradient(160deg,#2B1E14 0%,#4A2E1A 55%,#1E1A16 100%);color:#F3EBDB;padding:70px 20px 60px;overflow:hidden}
.hero::after{content:"◈";position:absolute;right:-40px;bottom:-70px;font-size:340px;opacity:.06;color:var(--gold)}
.hero .kicker{color:var(--gold);letter-spacing:2px;text-transform:uppercase;font-size:.8rem;font-weight:600}
.hero h1{color:#FBF4E4;max-width:760px}
.hero p.lead{max-width:640px;font-size:1.08rem;color:#D9CCB4}
.door-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:36px}
.door{display:block;text-decoration:none;background:rgba(251,244,228,.08);border:1.5px solid rgba(251,244,228,.25);border-radius:var(--radius);padding:26px;color:#FBF4E4!important;transition:transform .18s,background .18s}
.door:hover{transform:translateY(-3px);background:rgba(251,244,228,.14)}
.door .big{font-size:1.9rem}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.pill{background:rgba(201,162,39,.15);border:1px solid rgba(201,162,39,.45);color:#EAD48F;padding:5px 14px;border-radius:999px;font-size:.78rem}
.receipt{border-left:4px solid var(--terra);padding:12px 16px;background:var(--card);border-radius:0 10px 10px 0}
.receipt b{color:var(--terra)}
.emoji-h{font-size:1.5rem;margin-right:6px}
.section{padding:56px 0}
.section.alt{background:var(--soft)}
table.plain{width:100%;border-collapse:collapse;font-size:.9rem}
table.plain th{text-align:left;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:2px solid var(--line)}
table.plain td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
#map{height:520px;border-radius:var(--radius);border:2px solid var(--line);z-index:1}
.leaflet-popup-content{font-family:var(--font-body)}
.pop-img{width:180px;border-radius:8px;margin-bottom:6px}
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.filterbar select,.filterbar input{padding:9px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:.9rem}
.site-hero{height:300px;border-radius:var(--radius);background-size:cover;background-position:center;border:2px solid var(--line)}
.poi-num{width:26px;height:26px;border-radius:50%;background:var(--terra);color:#fff;display:inline-grid;place-items:center;font-size:.8rem;font-weight:700;margin-right:8px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}
.tabs button{padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;font-size:.86rem;color:var(--muted)}
.tabs button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.chat-box{height:440px;overflow-y:auto;border:2px solid var(--line);border-radius:var(--radius);background:var(--card);padding:18px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:82%;padding:11px 15px;border-radius:14px;font-size:.93rem;white-space:pre-wrap}
.msg.user{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:var(--soft);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg .src{display:block;margin-top:8px;font-size:.72rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:6px}
.chat-input{display:flex;gap:8px;margin-top:12px}
.chat-input input{flex:1;padding:12px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:.95rem}
.chat-input button{padding:12px 18px;border-radius:12px;border:none;background:var(--terra);color:#fff;cursor:pointer;font-weight:600}
.suggest{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.suggest button{font-size:.78rem;padding:6px 12px;border-radius:999px;border:1px dashed var(--stone);background:transparent;color:var(--muted);cursor:pointer}
.quiz-opt{display:block;width:100%;text-align:left;padding:14px 18px;margin:8px 0;border-radius:12px;border:2px solid var(--line);background:var(--card);cursor:pointer;font-size:.98rem;color:var(--ink)}
.quiz-opt:hover{border-color:var(--teal)}
.quiz-opt.right{border-color:var(--ok);background:#E8F3E9}
.quiz-opt.wrong{border-color:var(--danger);background:#F9E9E8}
.progress{height:8px;background:var(--line);border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;background:var(--gold)}
.gallery{columns:3 260px;column-gap:14px}
.gallery figure{margin:0 0 14px;background:var(--card);border:2px solid var(--line);border-radius:12px;overflow:hidden;break-inside:avoid}
.gallery img{width:100%;display:block}
.gallery figcaption{padding:10px 12px;font-size:.78rem;color:var(--muted)}
.sound-pin{cursor:pointer}
footer.site{background:#14100C;color:#C9BFA8;padding:46px 0 30px;margin-top:60px;font-size:.85rem}
footer.site a{color:#E8D9B0}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
.attribution{border-top:1px solid #3A3226;margin-top:26px;padding-top:16px;font-size:.74rem;color:#8F8672}
.banner{background:var(--gold);color:#231A00;padding:9px 16px;text-align:center;font-size:.86rem;font-weight:600}
.notice{background:#FBF3D5;border:1.5px solid var(--gold);border-radius:10px;padding:14px 16px;font-size:.88rem;margin:14px 0}
.danger-note{background:#F9E9E8;border:1.5px solid var(--danger);border-radius:10px;padding:14px 16px;font-size:.88rem;margin:14px 0}
.lvl{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lvl .step{flex:1;min-width:200px;border-top:3px solid var(--gold);padding-top:10px}
.persona{border-top:3px solid var(--teal)}
.fundtable td:first-child{font-weight:600}
iframe.yt{width:100%;aspect-ratio:16/9;border-radius:12px;border:0}
.player{width:44px;height:44px;border-radius:50%;border:none;background:var(--teal);color:#fff;cursor:pointer;font-size:1.1rem;display:inline-grid;place-items:center}
.sticker-grid img{width:110px;border-radius:12px;border:2px solid var(--line);margin:4px}
.admin-table input,.admin-table textarea,.admin-table select{width:100%;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);margin:3px 0}
.sos{position:fixed;bottom:18px;right:18px;z-index:950;display:flex;flex-direction:column;gap:8px}
.sos a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:1.3rem;background:var(--danger);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.sos a.share{background:var(--teal)}
.badge-ver{color:var(--ok);font-size:.8rem;font-weight:600}
@media(max-width:760px){ nav.main{order:3;width:100%;justify-content:flex-start;overflow-x:auto} .gallery{columns:1} #map{height:380px} }
@media print{header.site,footer.site,.toolbar,.sos,.suggest,nav.main{display:none!important} body{background:#fff;color:#000} .card{box-shadow:none} }

/* ═══ QA FIXES + POLISH ═══ */
/* Focus states for accessibility */
.btn:focus, .quiz-opt:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Better mobile spacing */
@media (max-width: 768px) {
  .section { padding: 36px 0; }
  .wrap { padding: 0 14px; }
  .card { padding: 16px; }
  .stat { font-size: 1.6rem; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.35rem; }
  .filterbar select, .filterbar input { width: 100%; }
  .filterbar { gap: 6px; }
  .chat-box { height: 380px; }
  .door-grid { gap: 14px; }
  .hero { padding: 44px 14px 40px; }
  .hero h1 { font-size: 1.5rem; }
  .hero p.lead { font-size: 0.95rem; }
  .toolbar { width: 100%; justify-content: flex-end; }
  .sticker-grid { gap: 10px; }
  .gallery { columns: 1; }
  table.plain { font-size: 0.8rem; }
  table.plain th, table.plain td { padding: 6px 6px; }
}

/* Smooth scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s; }
.reveal.visible { opacity: 1; transform: none; }

/* Better card hover */
.card { transition: transform .18s ease, box-shadow .18s ease; }
a .card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(30,26,22,.12); }

/* Print optimization */
@media print {
  .sos, .toolbar, nav.main, #privacyBanner { display: none !important; }
  body { font-size: 12pt; line-height: 1.5; }
  .card { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
}

/* Better contrast for muted text */
.muted { opacity: .85; }

/* Animation for loading states */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.loading-pulse { animation: pulse 1.5s ease-in-out infinite; }

/* Better Urdu text rendering */
.urdu, [dir="rtl"] {
  text-align: right;
  font-feature-settings: "kern" 1, "liga" 1;
}
.urdu h1, .urdu h2, .urdu h3 { line-height: 1.8; }

/* Chat improvements */
.chat-box { scroll-behavior: smooth; }
.msg.bot { max-width: 88%; }
.msg .src a { color: var(--teal); text-decoration: underline; font-size: .7rem; }

/* Map improvements */
.leaflet-container { font-family: var(--font-body); }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.leaflet-popup-content { margin: 12px 14px; }

/* Dashboard chart bars */
.progress { border-radius: 99px; }
.progress i { border-radius: 99px; transition: width .6s ease; }

/* Quiz option hover feedback */
.quiz-opt:not(:disabled):hover { background: var(--soft); transform: translateX(4px); }
.quiz-opt { transition: all .15s ease; }

/* Archive card hover */
.archive-entry { transition: transform .18s ease; }
.archive-entry:hover { transform: translateY(-2px); }

/* Filter bar on dark mode */
[data-theme="dark"] .filterbar select,
[data-theme="dark"] .filterbar input { color: var(--ink); background: var(--card); border-color: var(--line); }
[data-theme="dark"] option { background: #211B15; color: #EFE7D6; }

/* Reduce motion for a11y */
body[data-motion="off"] * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }

/* ═══ QA FINAL: Mobile overflow + accessibility fixes ═══ */
table.plain { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
table.plain thead, table.plain tbody { display: table; width: max-content; min-width: 100%; }
canvas { max-width: 100%; height: auto; }
body { overflow-x: hidden; }
.gallery img { width: 100%; height: auto; display: block; object-fit: cover; }
.chat-box { max-width: 100%; word-break: break-word; }
.sticker-grid { max-width: 100%; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.chip.whs { border-color: #9A7B1A; color: #7A5E10; font-weight: 600; }
.chip.legend { border-color: #8B6D1A; background: #FBF3D5; color: #6B5000; }

/* Skip-to-content link */
a[href="#main-content"] { position: absolute; top: -40px; left: 6px; background: var(--terra); color: #fff; padding: 8px 16px; border-radius: 0 0 8px 8px; z-index: 9999; transition: top .2s; font-size: .85rem; text-decoration: none; }
a[href="#main-content"]:focus { top: 0 !important; }