/* ===========================================================
   andkadastrai.uz — Dashboard (1:1 ds/dashbord.png)
   Vanilla, kutubxonasiz. Tokenlar: Dashboard_TZ.md §3
   =========================================================== */
:root{
  --navy1:#0a2a5c; --navy2:#103a7a; --active:#2563eb; --primary:#2f6fe0;
  --bg:#f4f6fb; --card:#ffffff; --line:#eef1f6;
  --ink:#0f2240; --muted:#64748b; --muted2:#94a3b8;
  --green:#16a34a; --amber:#f59e0b; --red:#dc2626;
  --t-blue:#e8f0fe; --t-green:#e7f7ee; --t-purple:#efeafe; --t-amber:#fef3e2; --t-sky:#e7f1fe; --t-teal:#e2f5f3;
  --radius:16px; --shadow:0 1px 2px rgba(16,34,64,.05); --shadow-h:0 8px 22px rgba(16,34,64,.10);
  --side-w:260px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3{margin:0}
ul{margin:0;padding:0;list-style:none}
svg{display:block}

/* ---------- LOGIN ---------- */
.login-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lg-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05)}
.lg-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,42,92,.92),rgba(16,58,122,.82))}
.login-card{position:relative;width:380px;max-width:92vw;background:rgba(255,255,255,.97);border-radius:20px;padding:34px 30px 28px;box-shadow:0 30px 80px rgba(2,16,43,.45);animation:lgIn .5s ease}
@keyframes lgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lg-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.lg-mono{width:46px;height:46px;flex:0 0 46px}
.lg-titles b{display:block;font-size:15px;color:var(--ink);letter-spacing:.04em}
.lg-titles span{display:block;font-size:11.5px;color:var(--muted)}
.login-card h2{font-size:21px;font-weight:800;color:var(--ink)}
.lg-sub{margin:5px 0 20px;font-size:12.5px;color:var(--muted)}
.lg-field{display:flex;align-items:center;gap:10px;background:#f4f6fb;border:1px solid #e6eaf2;border-radius:12px;padding:0 14px;margin-bottom:12px;transition:.18s}
.lg-field:focus-within{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(47,111,224,.12)}
.lg-ic{width:18px;height:18px;color:var(--muted2);flex:0 0 18px}
.lg-field input{flex:1;border:none;background:none;outline:none;padding:13px 0;font-size:14px;color:var(--ink)}
.login-card button[type=submit]{width:100%;margin-top:8px;padding:13px;border-radius:12px;background:linear-gradient(135deg,var(--active),var(--primary));color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;transition:.18s}
.login-card button[type=submit]:hover{filter:brightness(1.06);box-shadow:0 10px 24px rgba(37,99,235,.35)}
.lg-arr{font-size:18px;line-height:1}
.lg-err{min-height:18px;margin-top:10px;font-size:12.5px;color:var(--red);text-align:center}

/* ---------- APP SHELL ---------- */
#app{display:flex;min-height:100vh}

/* ---------- SIDEBAR ---------- */
.side{position:fixed;top:0;left:0;bottom:0;width:var(--side-w);display:flex;flex-direction:column;background:linear-gradient(180deg,var(--navy1),var(--navy2));color:#fff;z-index:30}
.side-logo{display:flex;align-items:center;gap:12px;padding:20px 20px 18px}
.side-mono{width:42px;height:42px;flex:0 0 42px}
.side-logo-t b{display:block;font-size:18px;font-weight:800;letter-spacing:.04em;line-height:1}
.side-logo-t span{display:block;font-size:10px;letter-spacing:.34em;color:#9fb4d8;margin-top:3px}
.side-nav{flex:1;overflow-y:auto;padding:6px 14px 10px}
.side-nav::-webkit-scrollbar{width:6px}.side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 13px;border-radius:11px;color:#c3d2ea;font-size:13.5px;font-weight:500;text-align:left;margin:2px 0;transition:.16s}
.nav-item .ic{width:19px;height:19px;flex:0 0 19px;opacity:.92}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:var(--active);color:#fff;font-weight:600;box-shadow:0 6px 16px rgba(37,99,235,.4)}
.nav-item .nv-badge{margin-left:auto;font-size:9.5px;font-weight:700;background:var(--amber);color:#3a2400;padding:2px 7px;border-radius:8px;letter-spacing:.02em}
.side-profile{display:flex;align-items:center;gap:11px;margin:10px 14px 16px;padding:11px 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.07);border-radius:13px}
.avatar{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:linear-gradient(135deg,#3b6fe0,#1d4ed8);color:#fff;font-weight:700;font-size:13px}
.avatar.sm{width:34px;height:34px;flex-basis:34px;font-size:12px}
.sp-info{flex:1;min-width:0}
.sp-info b{display:block;font-size:13px;line-height:1.2}
.sp-info span{display:block;font-size:11px;color:#9fb4d8}
.dot-online{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.22);display:inline-block;flex:0 0 8px}

/* ---------- MAIN ---------- */
.main{margin-left:var(--side-w);flex:1;display:flex;flex-direction:column;min-width:0}

/* HEADER */
.top{position:sticky;top:0;z-index:20;height:80px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:18px}
.top-title h1{font-size:27px;font-weight:800;color:var(--ink);line-height:1.05}
.top-title p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.top-tools{display:flex;align-items:center;gap:11px}
.pill{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid #e6eaf2;border-radius:11px;background:#fff;font-size:13px;font-weight:600;color:var(--ink);transition:.16s}
.pill:hover{border-color:#cfd8e8;box-shadow:var(--shadow)}
.pill.lang .flag{width:22px;height:15px;border-radius:3px;background:linear-gradient(180deg,#0099b5 0 33%,#fff 33% 66%,#1eb53a 66% 100%);position:relative;flex:0 0 22px;border:1px solid #e2e8f0}
.chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.55}
.icon-btn{position:relative;width:40px;height:40px;border:1px solid #e6eaf2;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;color:#475569;transition:.16s}
.icon-btn:hover{border-color:#cfd8e8;box-shadow:var(--shadow)}
.icon-btn i{width:19px;height:19px;display:block}
.icon-btn i svg{width:100%;height:100%}
.badge-num{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;border-radius:9px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.top-prof{display:flex;align-items:center;gap:9px;height:44px;padding:0 8px 0 6px;border-radius:12px;transition:.16s}
.top-prof:hover{background:#f4f6fb}
.tp-info{text-align:left;line-height:1.15}
.tp-info b{display:block;font-size:13px;color:var(--ink)}
.tp-info span{display:block;font-size:11px;color:var(--muted)}

/* CONTENT GRID */
.content{padding:24px 28px 22px;display:flex;flex-direction:column;gap:22px}
.row{display:flex;gap:20px}
.row>*{min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.card-head h3{font-size:15.5px;font-weight:700;color:var(--ink)}
.card-head h3 small{font-size:12px;font-weight:500;color:var(--muted)}
.more{font-size:12.5px;font-weight:600;color:var(--primary)}
.more:hover{text-decoration:underline}

/* ROW 1 — stat cards */
.row-stats>*{flex:1}
.stat{display:flex;flex-direction:column}
.stat-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.stat-ttl{font-size:13px;color:var(--muted);font-weight:500}
.stat-num{font-size:29px;font-weight:800;color:var(--ink);margin-top:9px;letter-spacing:-.01em}
.stat-ic{width:48px;height:48px;flex:0 0 48px;border-radius:13px;display:flex;align-items:center;justify-content:center}
.stat-ic svg{width:23px;height:23px}
.stat-foot{margin-top:14px;padding-top:11px;border-top:1px solid #f1f4f9;font-size:12.5px;font-weight:600;color:var(--green);display:flex;align-items:center;gap:5px}
.stat-foot .up{font-size:13px}

/* tints */
.t-blue{background:var(--t-blue);color:#2563eb}
.t-green{background:var(--t-green);color:#16a34a}
.t-purple{background:var(--t-purple);color:#7c3aed}
.t-amber{background:var(--t-amber);color:#ea8a00}
.t-sky{background:var(--t-sky);color:#2f7fe0}
.t-teal{background:var(--t-teal);color:#0d9488}

/* ROW 2 */
.row-mid .c-chart{flex:39}
.row-mid .c-donut{flex:34}
.row-mid .c-ai{flex:51}

/* line chart */
.mini-sel{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid #e6eaf2;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--ink)}
.mini-sel:hover{border-color:#cfd8e8}
.chart-wrap{width:100%}
.chart-wrap svg{width:100%;height:auto}

/* donut */
.donut-wrap{display:flex;align-items:center;gap:16px}
#donutChart{flex:0 0 auto;position:relative}
#donutChart svg{width:160px;height:160px}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-center b{font-size:27px;font-weight:800;color:var(--ink)}
.donut-center span{font-size:11px;color:var(--muted)}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:9px}
.donut-legend li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#334155}
.donut-legend .lg-dot{width:10px;height:10px;border-radius:3px;flex:0 0 10px}
.donut-legend .lg-pct{margin-left:auto;font-weight:700;color:var(--ink)}

/* AI panel */
.c-ai{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a2350,#123a82 60%,#0e2f6b);color:#fff;padding:0;border:none}
.ai-bg{position:absolute;inset:0;opacity:.5}
.ai-inner{position:relative;padding:18px;display:flex;flex-direction:column;height:100%;gap:12px}
.ai-head{display:flex;align-items:center;justify-content:space-between}
.ai-head h3{font-size:16px;font-weight:700;color:#fff}
.online{display:flex;align-items:center;gap:6px;font-size:12px;color:#bfe3c8}
.ai-body{display:flex;gap:14px;align-items:stretch}
.ai-avatar{width:122px;height:150px;flex:0 0 122px;border-radius:14px;overflow:hidden;background:#0c224a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ai-avatar img,.ai-avatar video,.ai-avatar .av-media{width:100%;height:100%;object-fit:cover;display:block}
.ai-avatar svg{width:100%;height:100%;display:block}
.ai-talk{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.ai-bubble{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:13px;border-top-left-radius:4px;padding:12px 14px;font-size:13px;line-height:1.5;color:#eaf1ff}
.ai-wave{flex:1;min-height:48px;display:flex;align-items:center;gap:3px;padding:0 2px}
.ai-wave span{flex:1;border-radius:3px;background:linear-gradient(180deg,#7db4ff,#2f6fe0);animation:wv 1.1s ease-in-out infinite}
@keyframes wv{0%,100%{height:18%}50%{height:90%}}
.ai-rec{display:flex;align-items:center;gap:11px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:9px 12px}
.ai-mic{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:linear-gradient(135deg,#2f6fe0,#1d4ed8);display:flex;align-items:center;justify-content:center;color:#fff}
.ai-mic svg{width:15px;height:15px}
.ai-rec-t{flex:1;font-size:13px;color:#dbe7ff}
.ai-timer{font-size:13px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.ai-stop{width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:var(--red);position:relative}
.ai-stop::after{content:"";position:absolute;inset:9px;background:#fff;border-radius:3px}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px}
.ai-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#eaf1ff;font-size:12px;font-weight:500;padding:7px 12px;border-radius:10px;transition:.15s}
.ai-chip:hover{background:rgba(255,255,255,.2)}

/* ROW 3 */
.row-low .c-recent{flex:27}
.row-low .c-map{flex:33}
.row-low .c-news{flex:31}
.row-low .c-quick{flex:34}

/* recent appeals */
.recent-list li{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid #f3f5f9}
.recent-list li:first-child{border-top:none}
.re-av{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:#eef2f8;color:#64748b;display:flex;align-items:center;justify-content:center}
.re-av svg{width:18px;height:18px}
.re-mid{flex:1;min-width:0}
.re-mid b{display:block;font-size:13px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.re-mid span{display:block;font-size:11.5px;color:var(--muted)}
.re-time{font-size:11.5px;color:var(--muted2);font-variant-numeric:tabular-nums}
.tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:8px;white-space:nowrap}
.tag.g{background:var(--t-green);color:#15803d}
.tag.a{background:var(--t-amber);color:#b45309}
.tag.s{background:#eef2f7;color:#64748b}

/* map */
.map-wrap{width:100%}
.map-wrap svg{width:100%;height:auto}
.dist-cell{stroke:#fff;stroke-width:2;cursor:pointer;transition:.15s}
.dist-cell:hover{filter:brightness(1.06)}
.dist-num{font-size:13px;font-weight:800;fill:#fff;text-anchor:middle;pointer-events:none}
.dist-name{font-size:8.5px;font-weight:600;fill:#fff;text-anchor:middle;pointer-events:none;opacity:.92}
.dist-name.dark{fill:#1e293b;opacity:.85}
.dist-num.dark{fill:#1e293b}

/* news */
.news-list li{display:flex;gap:11px;padding:11px 0;border-top:1px solid #f3f5f9}
.news-list li:first-child{border-top:none}
.nw-thumb{width:62px;height:48px;flex:0 0 62px;border-radius:9px;background-size:cover;background-position:center}
.nw-mid{flex:1;min-width:0}
.nw-mid b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw-meta{display:flex;align-items:center;gap:10px;margin-top:5px;font-size:11px;color:var(--muted)}
.nw-meta .eye{display:flex;align-items:center;gap:4px}
.nw-meta .eye svg{width:13px;height:13px;opacity:.7}

/* quick actions */
.quick-list{display:flex;flex-direction:column;gap:10px}
.quick-list li{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;transition:.15s;cursor:pointer}
.quick-list li:hover{border-color:#cfdaf0;box-shadow:var(--shadow);transform:translateY(-1px)}
.qk-ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.qk-ic svg{width:19px;height:19px}
.qk-mid{flex:1;min-width:0}
.qk-mid b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.qk-mid span{display:block;font-size:11.5px;color:var(--muted)}
.qk-arr{color:var(--muted2);font-size:17px}

/* ROW 4 — system cards */
.row-sys>*{flex:1}
.syscard{display:flex;align-items:center;gap:13px}
.sys-ic{width:46px;height:46px;flex:0 0 46px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.sys-ic svg{width:22px;height:22px}
.sys-mid{min-width:0}
.sys-ttl{font-size:12px;color:var(--muted);font-weight:500}
.sys-val{font-size:21px;font-weight:800;color:var(--ink);margin:2px 0;line-height:1}
.sys-val .ok{color:var(--green)}
.sys-sub{font-size:11px;color:var(--muted2)}

/* footer */
.dash-ftr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px 0;font-size:11.5px;color:var(--muted2);flex-wrap:wrap}
.dash-ftr b{color:var(--muted);font-weight:700}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1280px){
  .row-mid,.row-low{flex-wrap:wrap}
  .row-mid .c-chart{flex:1 1 48%}.row-mid .c-donut{flex:1 1 48%}.row-mid .c-ai{flex:1 1 100%}
  .row-low .c-recent{flex:1 1 48%}.row-low .c-map{flex:1 1 48%}.row-low .c-news{flex:1 1 48%}.row-low .c-quick{flex:1 1 48%}
  .row-stats{flex-wrap:wrap}.row-stats>*{flex:1 1 30%}
  .row-sys{flex-wrap:wrap}.row-sys>*{flex:1 1 30%}
}
@media(max-width:900px){
  :root{--side-w:0px}
  .side{transform:translateX(-100%);transition:.25s}
  .side.open{transform:none}
  .row{flex-wrap:wrap}.row>*{flex:1 1 100%!important}
  .top{padding:0 16px;height:auto;flex-wrap:wrap;gap:10px;padding-top:12px;padding-bottom:12px}
  .content{padding:16px}
}

/* ===========================================================
   SAHIFALAR (router) — panel / jadval / forma / modal / badge
   =========================================================== */
#page{display:flex;flex-direction:column;gap:20px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.panel.center{text-align:center;padding:34px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.panel-head h3{font-size:16px;font-weight:700;color:var(--ink)}
.cnt{display:inline-block;margin-left:6px;font-size:12px;font-weight:700;color:var(--primary);background:var(--t-blue);padding:2px 9px;border-radius:9px}
.muted{color:var(--muted)}
.center{text-align:center}

/* tugmalar */
.btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:1px solid #e6eaf2;border-radius:10px;background:#fff;font-size:13.5px;font-weight:600;color:var(--ink);transition:.15s;white-space:nowrap}
.btn:hover{border-color:#cfd8e8;box-shadow:var(--shadow)}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:8px}
.btn.primary{background:linear-gradient(135deg,var(--active),var(--primary));border-color:transparent;color:#fff}
.btn.primary:hover{filter:brightness(1.07);box-shadow:0 6px 16px rgba(37,99,235,.3)}
.btn.danger{color:#b91c1c;border-color:#f3d3d3;background:#fdf2f2}
.btn.danger:hover{background:#fce4e4;border-color:#e9b8b8}

/* jadval */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11.5px;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.03em;padding:0 12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid #f3f5f9;color:#27384f;vertical-align:middle}
.tbl tbody tr:hover{background:#f9fbfe}
.tbl td b{color:var(--ink)}
.tbl .row-act{text-align:right;white-space:nowrap}
.tbl.kv th{text-transform:none;color:var(--muted);border:none;padding:8px 14px 8px 0;width:140px;vertical-align:top}
.tbl.kv td{border:none;font-weight:600;color:var(--ink)}
.cell-in{width:100%;min-width:120px;border:1px solid #e6eaf2;border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;color:var(--ink)}
.cell-in:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,111,224,.1)}
code{background:#f1f4f9;padding:2px 7px;border-radius:6px;font-size:12px;color:#334155}

/* badge */
.badge{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:8px;white-space:nowrap}
.badge.g{background:var(--t-green);color:#15803d}
.badge.b{background:var(--t-blue);color:#2563eb}
.badge.a{background:var(--t-amber);color:#b45309}
.badge.r{background:#fdeaea;color:#dc2626}
.badge.s{background:#eef2f7;color:#64748b}

/* forma */
.frm{display:flex;flex-direction:column;gap:14px}
.frm-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.frm-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fld{display:flex;flex-direction:column;gap:6px}
.fld>span{font-size:12.5px;font-weight:600;color:var(--muted)}
.fld input,.fld select,.fld textarea,.frm-row input{border:1px solid #e6eaf2;border-radius:10px;padding:11px 13px;font:inherit;font-size:14px;color:var(--ink);background:#fff;width:100%}
.fld textarea{resize:vertical;min-height:72px}
.fld input:focus,.fld select:focus,.fld textarea:focus,.frm-row input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,111,224,.12)}
.chk{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink)}
.chk input{width:16px;height:16px;accent-color:var(--primary)}
h4{font-size:14px;font-weight:700;color:var(--ink)}

/* natija (mulk tekshirish) */
.result{border-radius:12px;padding:16px;border:1px solid var(--line)}
.result.ok{background:#f3fbf6;border-color:#cdeed8}
.result.warn{background:#fef6f6;border-color:#f3d3d3;color:#b91c1c;font-weight:600}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(10,24,48,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;animation:fadeIn .15s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:16px;width:560px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(2,16,43,.4)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-h b{font-size:16px;color:var(--ink)}
.modal-x{font-size:18px;color:var(--muted);width:32px;height:32px;border-radius:8px}
.modal-x:hover{background:#f4f6fb}
.modal-b{padding:20px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.modal-f{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--line)}

/* appeals */
.appeal{display:flex;gap:18px;align-items:flex-start}
.appeal-media{flex:0 0 auto}
.appeal-media video{width:240px;border-radius:12px;background:#000}
.appeal-media img{width:130px;border-radius:12px;display:block}
.appeal-media .nomedia{width:150px;height:100px;border-radius:12px;background:#f1f4f9;display:flex;align-items:center;justify-content:center;color:var(--muted2);font-size:12px}
.appeal-body{flex:1;min-width:0}
.appeal-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.appeal-tags b{font-size:18px;color:var(--ink)}
.appeal-fio{margin-top:8px;font-size:16px;font-weight:700;color:var(--ink)}
.appeal-text{margin-top:8px;color:#27384f}

/* live feed (davomat) */
#liveFeed{display:flex;flex-direction:column}
.live-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid #f3f5f9}
.live-row:first-child{border-top:none}
.live-row .re-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#0f2240;color:#fff;padding:12px 22px;border-radius:11px;font-size:13.5px;font-weight:600;box-shadow:0 12px 32px rgba(2,16,43,.4);z-index:200;animation:fadeIn .2s}

@media(max-width:760px){ .frm-3{grid-template-columns:1fr} .appeal{flex-direction:column} .appeal-media video{width:100%} }

/* read-only belgisi */
.ro-note{font-size:11.5px;font-weight:600;color:var(--muted2);background:#f4f6fb;border:1px solid var(--line);padding:5px 11px;border-radius:8px;white-space:nowrap}

/* yangiliklar grid (read-only) */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.news-card{display:flex;gap:13px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.nw-thumb.big{width:84px;height:64px;flex:0 0 84px;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:24px}
.nw-thumb.big img{width:100%;height:100%;object-fit:cover}
.nw-body{margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.4}

/* AI suhbat */
.chat-panel{display:flex;flex-direction:column;min-height:560px;padding:0;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#0a2350,#123a82);color:#fff}
.chat-ava{position:relative;width:52px;height:52px;flex:0 0 52px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#fff;transition:box-shadow .2s}
.chat-ava svg{width:26px;height:26px}
.chat-ava .ava-idle,.chat-ava .ava-talk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chat-ava .ava-talk{z-index:2}
.chat-ava.speaking{box-shadow:0 0 0 3px rgba(34,197,94,.6)}
.chat-mic{width:46px;height:46px;flex:0 0 46px;border-radius:11px;border:1px solid #e6eaf2;background:#fff;display:flex;align-items:center;justify-content:center;color:#2f6fe0;transition:.15s}
.chat-mic svg{width:21px;height:21px}
.chat-mic:hover{border-color:#cfd8e8;background:#f4f8ff}
.chat-mic.rec{background:#dc2626;border-color:#dc2626;color:#fff;animation:micpulse 1.1s infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}50%{box-shadow:0 0 0 9px rgba(220,38,38,0)}}
.chat-hi b{font-size:15px}
.chat-hi .muted{color:#bcd0f5;font-size:12px}
.chat-head .online{margin-left:auto;color:#bfe3c8;font-size:12px}
.chat-log{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;background:#f7f9fc}
.msg{max-width:75%;padding:11px 15px;border-radius:14px;font-size:14px;line-height:1.55;white-space:normal}
.msg.ai{align-self:flex-start;background:#fff;border:1px solid var(--line);border-top-left-radius:4px;color:var(--ink)}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--active),var(--primary));color:#fff;border-top-right-radius:4px}
.msg .tbl-wrap{margin-top:8px}
.msg.ai .tbl th{color:var(--muted2)}
.typing{letter-spacing:2px;color:var(--muted2);animation:blink 1.1s infinite}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:#fff}
.chat-chips .ai-chip{background:#eef3fb;border:1px solid #dde6f5;color:#2f6fe0}
.chat-chips .ai-chip:hover{background:#e2ebfa}
.chat-in{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line);background:#fff}
.chat-in input{flex:1;border:1px solid #e6eaf2;border-radius:11px;padding:12px 15px;font:inherit;font-size:14px;outline:none}
.chat-in input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,111,224,.12)}
.chat-in .btn svg{width:16px;height:16px}

/* ===========================================================
   AI ADAPTIV SAHNA — savol → "shablon"ga aylanish (reload yo'q)
   =========================================================== */
/* home AI panel ichidagi savol qatori */
.ai-ask{display:flex;align-items:center;gap:9px}
.ai-ask .ask-q{flex:1;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);color:#fff;padding:0 13px;font-size:13.5px;font-family:inherit;outline:none}
.ai-ask .ask-q::placeholder{color:#aebfe0}
.ai-ask .ask-q:focus{border-color:rgba(125,180,255,.6);box-shadow:0 0 0 3px rgba(47,111,224,.22)}
.ai-ask .ask-send{height:40px}

/* sahna konteyneri */
.scene{display:flex;flex-direction:column;gap:18px}
.scene.in{animation:scIn .42s cubic-bezier(.16,1,.3,1)}
@keyframes scIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.scene-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.scene-back{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:13.5px;color:var(--ink);box-shadow:var(--shadow);transition:.15s}
.scene-back:hover{border-color:#cfd8e8;box-shadow:var(--shadow-h);transform:translateX(-2px)}
.scene-h{display:flex;align-items:center;gap:13px}
.scene-ic{width:46px;height:46px;flex:0 0 46px;border-radius:13px;display:flex;align-items:center;justify-content:center}
.scene-ic svg{width:24px;height:24px}
.scene-h h2{font-size:19px;font-weight:800;color:var(--ink)}
.scene-h p{margin:2px 0 0;font-size:13px;color:var(--muted)}

/* AI javob kartasi (ovozli) */
.scene-ai{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a2350,#123a82 60%,#0e2f6b);color:#fff;border:none;padding:0}
.scene-aibg{position:absolute;inset:0;opacity:.5;pointer-events:none}
.scene-ai-in{position:relative;display:flex;gap:16px;padding:18px 18px 8px;align-items:flex-start}
.scene-ava{position:relative;width:64px;height:64px;flex:0 0 64px;border-radius:16px;overflow:hidden;background:#0c224a;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .2s}
.scene-ava svg{width:32px;height:32px}
.scene-ava .ava-idle,.scene-ava .ava-talk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene-ava .ava-talk{z-index:2}
.scene-ava.speaking{box-shadow:0 0 0 3px rgba(34,197,94,.65)}
.scene-talk{flex:1;min-width:0}
.scene-q{font-size:13px;color:#bcd0f5;font-style:italic;margin-bottom:6px}
.scene-answer{font-size:14.5px;line-height:1.55;color:#eaf1ff;word-break:break-word}
.scene-answer .tbl th{color:#bcd0f5;border-color:rgba(255,255,255,.18)}
.scene-answer .tbl td{color:#eaf1ff;border-color:rgba(255,255,255,.1)}
.scene-answer .tbl tbody tr:hover{background:rgba(255,255,255,.05)}
.scene-answer .typing{color:#bcd0f5}
.scene-wave{height:24px;display:flex;align-items:flex-end;gap:3px;margin-top:8px;opacity:.35;transition:opacity .2s}
.scene-wave.on{opacity:1}
.scene-wave span{flex:1;border-radius:3px;background:linear-gradient(180deg,#7db4ff,#2f6fe0);height:16%;animation:wv 1.1s ease-in-out infinite}
.scene-ask{position:relative;display:flex;align-items:center;gap:9px;padding:0 18px 18px}
.scene-ask .ask-q{flex:1;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.24);color:#fff;padding:0 14px;font-size:14px;font-family:inherit;outline:none}
.scene-ask .ask-q::placeholder{color:#aebfe0}
.scene-ask .ask-q:focus{border-color:rgba(125,180,255,.6);box-shadow:0 0 0 3px rgba(47,111,224,.25)}
.scene-ask .ask-send{height:42px}
.ask-mic{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;transition:.15s}
.ask-mic svg{width:18px;height:18px}
.ask-mic:hover{background:rgba(255,255,255,.2)}
.ask-mic.rec{background:var(--red);border-color:transparent;animation:micPulse 1s infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}50%{box-shadow:0 0 0 7px rgba(220,38,38,0)}}

/* sahna tanasi (shablon) */
.scene-body{display:flex;flex-direction:column;gap:18px}
.sc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.sc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sc-grid-map{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.sc-map svg{width:100%;height:auto}
.donut-box{flex:0 0 auto;position:relative}
.donut-box svg{width:160px;height:160px}
.donut-wrap.big{gap:26px}
.sc-news{margin:0}
.sc-sys{display:flex;gap:16px;flex-wrap:wrap}
.sc-sys>*{flex:1 1 180px}
@media(max-width:920px){.sc-grid2,.sc-grid-map{grid-template-columns:1fr}}
@media(max-width:560px){.scene-ai-in{flex-direction:column}.scene-ava{width:54px;height:54px;flex-basis:54px}}

/* avatar speaking (home + scene) */
.ai-avatar{position:relative;transition:box-shadow .2s}
.ai-avatar.speaking{box-shadow:0 0 0 3px rgba(34,197,94,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.ai-avatar .ava-talk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
#aiWave.on span{animation-duration:.8s}

/* avatar ramka ichida bo'sh joy (atrofidan tegmasin) */
.ai-avatar{padding:14px}
.ai-avatar img,.ai-avatar video,.ai-avatar .av-media,.ai-avatar svg{border-radius:10px}
.ai-avatar .ava-talk{inset:14px;width:auto;height:auto;border-radius:10px}
.scene-ava{padding:8px}
.scene-ava .ava-idle,.scene-ava .ava-talk{inset:8px;width:auto;height:auto;border-radius:9px}

/* uyg'oq rejim (wake-word) tugmasi */
.ai-head-r{display:flex;align-items:center;gap:12px}
.wake-btn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:9px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.16);color:#dbe7ff;font-size:12.5px;font-weight:600;transition:.15s}
.wake-btn:hover{background:rgba(0,0,0,.34)}
.wake-btn .wk-dot{width:9px;height:9px;border-radius:50%;background:#94a3b8;flex:0 0 9px}
.wake-btn.on{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.5);color:#d6ffe6}
.wake-btn.on .wk-dot{background:#22c55e;animation:wkPulse 1.1s infinite}
@keyframes wkPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}

/* telefon ovozli pult — QR modal */
.vqr-back{position:fixed;inset:0;background:rgba(8,18,40,.66);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:300;animation:fadeIn .2s;padding:20px}
.vqr{position:relative;background:#fff;border-radius:20px;padding:28px 26px 24px;max-width:380px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(2,16,43,.45)}
.vqr h3{font-size:18px;font-weight:800;color:var(--ink);margin:0 0 8px}
.vqr p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 18px}
.vqr-img{width:240px;height:240px;border-radius:14px;border:1px solid var(--line);background:#fff;display:block;margin:0 auto 14px}
.vqr-url{font-size:11.5px;color:var(--muted2);word-break:break-all;background:#f4f6fb;border-radius:9px;padding:8px 10px}
.vqr-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:9px;background:#f1f4f9;color:var(--muted);font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center}
.vqr-x:hover{background:#e6eaf2}