/* ============================================================
   نقش‌نامه — پالت رسمی درود «آبی اعتماد» (تم روشن یکپارچه)
   هم‌تراز با بدن‌نامه: primary #1D4ED8 · amber #F59E0B · bg #F4F7FC
   فونت: Vazirmatn (متن) + Lalezar (تیتر)
============================================================ */
:root{
  --bg:#F4F7FC;
  --bg-2:#EAF0FA;
  --panel:#ffffff;
  --panel-2:#F6F8FC;
  --glass:rgba(255,255,255,.9);
  --line:#E3E9F2;
  --line-2:#CBD6E6;
  --tx:#0B1B3A;
  --tx-2:#51618A;
  --tx-3:#8492AC;
  --acc:#1D4ED8;
  --acc-2:#173DB0;
  --acc-tint:#E8EEFF;
  --nav-soft:#E9EFF8;
  --nav-accent:#0948B3;
  --amber:#F59E0B;
  --amber-dark:#B45309;
  --amber-tint:#FEF3E2;
  --on-amber:#101828;
  --danger:#D92D20;
  --ok:#12805C;
  --radius:20px;
  --radius-sm:13px;
  --shadow-lg:0 24px 60px -24px rgba(11,27,58,.22);
  --shadow:0 14px 40px -16px rgba(11,27,58,.16);
  --shadow-sm:0 6px 20px -10px rgba(11,27,58,.14);
  --topbar-h:66px;
  --font-display:'Lalezar','Vazirmatn',sans-serif;
  --ui-scale:1;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{height:100%}
body{
  margin:0;min-height:100%;
  font-family:"Vazirmatn","Segoe UI",Tahoma,sans-serif;
  background:var(--bg);
  color:var(--tx);
  line-height:1.9;
  font-size:calc(15.5px * var(--ui-scale));
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{color:var(--acc);text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(29,78,216,.18)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
.en{direction:ltr;unicode-bidi:isolate;font-family:"Space Grotesk","Vazirmatn",sans-serif;font-weight:500;letter-spacing:.02em}

/* ============ تاپ‌بار (هم‌تراز بدن‌نامه) ============ */
.topbar{
  position:relative;z-index:60;height:var(--topbar-h);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
}
.topbar::after{
  content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg, transparent 8%, var(--amber) 30%, var(--acc) 60%, transparent 92%);
  opacity:.75;pointer-events:none;
}
.topbar-inner{max-width:1500px;margin:0 auto;height:100%;padding:0 22px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;color:var(--tx);font-family:var(--font-display);font-weight:400;font-size:23px}
.brand-mark{width:36px;height:36px;display:grid;place-items:center;filter:drop-shadow(0 2px 6px rgba(29,78,216,.35))}
.brand-mark svg{width:31px;height:31px}
.brand small{color:var(--tx-3);font-family:"Vazirmatn";font-weight:500;font-size:11px;margin-inline-start:2px}

.nav{display:flex;gap:5px;margin-inline-start:14px}
.nav a{
  color:var(--tx-2);padding:7px 16px;border-radius:14px;font-size:14px;font-weight:600;
  border:1px solid transparent;transition:.18s;
}
.nav a:hover{color:var(--nav-accent);background:var(--nav-soft)}
.nav a.active{
  color:var(--nav-accent);background:var(--nav-soft);font-weight:800;
  box-shadow:inset -4px 0 0 0 var(--nav-accent);
}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--tx-2);
  transition:.18s;
}
.icon-btn:hover{color:var(--acc);border-color:var(--acc);transform:translateY(-1px)}
.icon-btn svg{width:19px;height:19px}
.icon-btn[aria-pressed="true"]{background:var(--acc-tint);color:var(--acc-2);border-color:var(--acc)}
.search-pill{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;padding:8px 15px;color:var(--tx-3);
  background:#fff;font-size:13.5px;transition:.18s;
}
.search-pill:hover{border-color:var(--acc);color:var(--tx-2);box-shadow:0 0 0 3px rgba(29,78,216,.08)}
.search-pill kbd{
  font-family:"Space Grotesk",monospace;font-size:10.5px;color:var(--tx-3);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px;background:var(--panel-2);
}
.menu-btn{display:none}

/* ============ صحنه ============ */
.stage{
  position:fixed;inset:var(--topbar-h) 0 0 0;
  display:grid;grid-template-columns:minmax(0,1fr) 384px;
}
.map-wrap{position:relative;overflow:hidden;background:#A9CBE0;isolation:isolate}
#map-svg{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#map-svg.gesturing{cursor:grabbing}
#map-svg.picking-province{cursor:crosshair}

/* فوتر */
.site-footer{
  position:fixed;inset-inline:0;bottom:0;z-index:40;pointer-events:none;
}
.site-footer .sf-inner{
  pointer-events:auto;display:none;justify-content:space-between;align-items:center;gap:12px;
  background:rgba(11,27,58,.88);color:#fff;font-size:12px;backdrop-filter:blur(8px);
  padding:7px 22px;border-radius:16px 16px 0 0;
  margin:0 auto;max-width:min(92%,1100px);transform:translateY(calc(100% - 34px));
  transition:transform .25s ease;
}
.site-footer:hover .sf-inner,.site-footer:focus-within .sf-inner{transform:none}
.site-footer a{color:#c7d6f5}

/* ============ دکمه‌های شیشه‌ای نقشه ============ */
.map-hud{
  position:absolute;bottom:18px;inset-inline-start:14px;z-index:20;
  display:flex;flex-direction:column;gap:8px;
}
.hud-btn{
  width:42px;height:42px;border-radius:13px;border:1px solid var(--line);
  background:rgba(255,255,255,.94);color:var(--tx-2);
  display:grid;place-items:center;transition:.16s;box-shadow:var(--shadow-sm);
  backdrop-filter:blur(6px);
}
.hud-btn:hover{color:var(--acc);border-color:var(--acc)}
.hud-btn:active{transform:scale(.94)}
.hud-btn svg{width:20px;height:20px}

/* تولتیپ */
.tooltip{
  position:absolute;z-index:30;pointer-events:none;
  background:rgba(11,27,58,.94);color:#fff;
  padding:7px 13px;border-radius:11px;font-size:13px;font-weight:600;
  transform:translate(-50%,calc(-100% - 14px));white-space:nowrap;
  box-shadow:var(--shadow);line-height:1.5;
}
.tooltip small{display:block;font-weight:400;color:#B9C6E2;font-size:11.5px}

/* بارگذاری و خطا */
.map-loading,.map-error{
  position:absolute;inset:0;z-index:50;display:grid;place-items:center;
  background:rgba(244,247,252,.72);backdrop-filter:blur(6px);
}
.ml-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:30px 40px;text-align:center;max-width:min(92%,460px);
}
.ml-card p{margin:12px 0 0;color:var(--tx-2);font-weight:600}
.ml-spinner{
  width:38px;height:38px;margin:0 auto;border-radius:50%;
  border:3px solid var(--acc-tint);border-top-color:var(--acc);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.prov-fallback{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:16px;text-align:start}
.prov-fallback button{
  border:1px solid var(--line);background:var(--panel-2);border-radius:10px;
  padding:7px 10px;font-size:13px;font-weight:600;color:var(--tx);
}
.prov-fallback button:hover{border-color:var(--acc);color:var(--acc)}

/* ============ پنل کنار ============ */
.panel{
  position:relative;z-index:25;background:var(--panel);
  border-inline-start:1px solid var(--line);display:flex;flex-direction:column;
  overflow:hidden;
}
.panel-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 0 30px}
.panel-grab{display:none}

.panel-empty{padding:34px 28px;color:var(--tx-2)}
.pe-icon{
  width:52px;height:52px;border-radius:15px;background:var(--acc-tint);color:var(--acc);
  display:grid;place-items:center;margin-bottom:16px;
}
.pe-icon svg{width:27px;height:27px}
.panel-empty h2{font-family:var(--font-display);font-weight:400;color:var(--tx);font-size:24px;margin:0 0 10px}
.panel-empty p{font-size:14px;margin:0 0 18px}
.pe-hint{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--tx-3)}
.pe-hint kbd{
  font-family:"Space Grotesk";border:1px solid var(--line);border-radius:6px;
  padding:2px 7px;background:var(--panel-2);font-size:11px;color:var(--tx-2);
}

.panel-content{padding:24px 26px 30px}
.pc-kicker{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  color:var(--amber-dark);background:var(--amber-tint);border-radius:99px;padding:4px 13px;margin-bottom:8px;
}
.pc-title{font-family:var(--font-display);font-weight:400;font-size:30px;margin:2px 0 2px;line-height:1.4}
.pc-en{color:var(--tx-3);font-size:13px;margin-bottom:14px}
.pc-close{position:absolute;top:10px;inset-inline-start:12px}
.pc-center-chip{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--acc-2);
  background:var(--acc-tint);border-radius:10px;padding:6px 13px;margin-bottom:16px;
}
.pc-center-chip svg{width:14px;height:14px}
.pc-sec{margin-top:18px}
.pc-sec h3{
  font-size:14.5px;font-weight:800;color:var(--tx);margin:0 0 7px;
  display:flex;align-items:center;gap:8px;
}
.pc-sec h3::before{content:"";width:20px;height:3px;border-radius:2px;background:var(--amber)}
.pc-sec p{margin:0;font-size:14px;color:var(--tx-2);line-height:2.05;user-select:text}
.pc-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.pc-fact{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:9px 13px;font-size:12.5px;color:var(--tx-2)}
.pc-fact b{display:block;color:var(--tx);font-size:13.5px;font-weight:800}
.pc-fact small{color:var(--tx-3);font-size:10.5px}
.pc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.pc-chip{
  border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 13px;
  font-size:12.5px;font-weight:700;color:var(--tx-2);transition:.15s;
}
.pc-chip:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-tint)}
.pc-neighbor{display:inline-flex;align-items:center;gap:5px}
.pc-neighbor svg{width:11px;height:11px}
.pc-stats{margin-top:6px}
.pc-stat{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:7px 2px;font-size:13px}
.pc-stat b{color:var(--tx)}
.pc-stat small{display:block;color:var(--tx-3);font-size:10.5px}
.pc-actions{display:flex;gap:9px;margin-top:22px;flex-wrap:wrap}
.btn-primary,.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 20px;
  font-weight:800;font-size:13.5px;transition:.16s;border:none;
}
.btn-primary{background:var(--amber);color:var(--on-amber);box-shadow:0 8px 20px -8px rgba(245,158,11,.6)}
.btn-primary:hover{background:var(--amber-dark);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--acc);border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--acc);box-shadow:0 0 0 3px rgba(29,78,216,.08)}
.btn-primary.sm,.btn-ghost.sm{padding:7px 16px;font-size:12.5px}
.btn-primary:disabled,.btn-ghost:disabled{opacity:.45;cursor:default;transform:none}

/* رویداد در پنل */
.pc-event{border:1px solid var(--line);border-radius:13px;padding:12px 15px;margin-top:10px;background:var(--panel-2)}
.pc-event b{font-size:14px}
.pc-event .pc-date{color:var(--amber-dark);font-size:12px;font-weight:700;margin-inline-start:8px}
.pc-event p{margin:5px 0 0;font-size:12.5px;color:var(--tx-2)}
.pc-event small{color:var(--tx-3);font-size:10.5px;display:block;margin-top:6px}

/* ============ پاپ‌آپ‌ها (لایه‌ها/فهرست/جستجو) ============ */
.layers-pop,.index-pop{
  position:fixed;top:calc(var(--topbar-h) + 10px);inset-inline-start:14px;z-index:55;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:16px 18px;min-width:250px;max-width:min(92vw,380px);max-height:min(72vh,560px);overflow:auto;
}
.layers-pop h3,.index-pop h3{font-size:15px;font-weight:900;margin:0 0 12px}
.layer-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 2px;border-bottom:1px dashed var(--line);font-size:13.5px;font-weight:600;color:var(--tx-2);
}
.layer-row:last-child{border-bottom:none}
/* سوییچ */
.switch{position:relative;width:38px;height:22px;flex:none}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch span{
  position:absolute;inset:0;background:var(--line-2);border-radius:99px;transition:.18s;
}
.switch span::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:.18s;
}
.switch input:checked + span{background:var(--acc)}
.switch input:checked + span::after{transform:translateX(-16px)}
.switch input:focus-visible + span{outline:2px solid var(--acc);outline-offset:2px}

.index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
.index-grid button{
  border:1px solid var(--line);background:var(--panel-2);border-radius:10px;
  padding:8px 6px;font-size:12.5px;font-weight:700;color:var(--tx);transition:.15s;
}
.index-grid button:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-tint)}
.index-grid button small{display:block;font-size:10px;color:var(--tx-3);font-weight:500}

.search-pop{
  position:fixed;inset:0;z-index:70;background:rgba(11,27,58,.34);backdrop-filter:blur(3px);
  display:flex;justify-content:center;padding:12vh 18px 0;
}
.sp-box{
  background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);
  width:min(560px,100%);height:fit-content;overflow:hidden;
}
.sp-box input{
  width:100%;border:none;outline:none;font:inherit;font-size:16.5px;font-weight:600;
  padding:18px 22px;border-bottom:1px solid var(--line);color:var(--tx);
  background:transparent;
}
.sp-results{max-height:46vh;overflow-y:auto}
.sp-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:start;
  padding:11px 22px;border:none;background:none;font:inherit;transition:.12s;
}
.sp-item:hover,.sp-item.hl{background:var(--acc-tint)}
.sp-item .sp-kind{
  flex:none;font-size:10.5px;font-weight:800;color:var(--tx-3);
  border:1px solid var(--line);border-radius:7px;padding:2px 8px;min-width:52px;text-align:center;
}
.sp-item b{font-size:14px;color:var(--tx)}
.sp-item small{color:var(--tx-3);font-size:11.5px;margin-inline-start:auto}
.sp-empty{padding:22px;text-align:center;color:var(--tx-3);font-size:13.5px}
.sp-hint{padding:9px 22px;font-size:11px;color:var(--tx-3);border-top:1px solid var(--line)}

/* ============ حالت ارائه ============ */
body.presenting .topbar,body.presenting .site-footer,
body.presenting .map-hud,body.presenting .panel{display:none}
body.presenting .stage{grid-template-columns:1fr}
body.presenting{--ui-scale:1.3}

/* ============ اسکرول‌بار ============ */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(81,97,138,.3);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(81,97,138,.5);background-clip:content-box}

/* ============ موبایل ============ */
@media (max-width: 900px){
  .stage{grid-template-columns:1fr}
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .search-pill span,.search-pill kbd{display:none}
  .search-pill{padding:8px 11px}
  #quality-toggle,#present-toggle{display:none}
  .brand small{display:none}
  .brand{font-size:20px}
  .topbar-inner{padding:0 14px;gap:8px}

  .panel{
    position:absolute;inset-inline:0;bottom:0;top:auto;z-index:35;
    height:62vh;border-radius:20px 20px 0 0;border:1px solid var(--line);border-bottom:none;
    box-shadow:0 -14px 40px -18px rgba(11,27,58,.3);
    transform:translateY(calc(100% - 64px));
    transition:transform .3s cubic-bezier(.3,.9,.3,1);
  }
  .panel.open{transform:none}
  .panel-grab{
    display:grid;place-items:center;width:100%;height:64px;background:none;border:none;padding:0;
  }
  .panel-grab span{
    width:46px;height:5px;border-radius:99px;background:var(--line-2);display:block;
  }
  .panel-body{height:calc(100% - 64px)}
  .panel-empty{padding:22px 22px 40px}
  .panel-content{padding:8px 22px 40px}
  .pc-title{font-size:26px}

  .map-hud{inset-inline-start:10px;bottom:84px}
  .layers-pop,.index-pop{top:auto;bottom:80px;inset-inline:12px;min-width:0}
  body.presenting .panel{display:none}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation-duration:.01s !important}
}