/* ── Dasha Logistics — panel stili ────────────────────────────────────────
   Ýükdaş görnüşi: ak gapdal menýu, açyk çal fon, ak kartlar, indigo aksent.
   Tema: ulgamdan alynýar, ýokardaky düwme bilen el bilen hem çalşylýar. */

/* «Inter» — üýtgeýän agramly (variable) şrift. Aşakdaky kod ýerlerde 550/620/
   650/680/750 ýaly ýumşak (ýüz-lük däl) agramlar ulanýar — olar diňe Inter-iň
   `wght` oky bilen takyk çykýar. Şrift ýüklenmedik bolsa brauzer ätiýaçlyk
   şriftlere (Segoe UI we ş.m.) geçýär — olar bary-ýogy 400/600/700 bilýär,
   şoňa görä agramlar tötänleýin ýaňkalaşyp, käbir setirler ýalňyşlyk bilen
   has galyň/uly bolup görünýär («Baha analitikasy» kartoçkalarynda duýlan
   ýazgy ululyk üýtgeşikligi — şeýdip düzedildi).
   Faýllar `/vendor/inter/`-de (Leaflet ýaly — `vendor_al.py` bilen gaýtadan
   ýüklenip bilner, Google Fonts-a VPN-siz ýetip bolmasa-da işlär). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/vendor/inter/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/vendor/inter/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;    /* türkmen/türk: ç ä ö ü ý ş ňİ ı ... */
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/vendor/inter/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;    /* rus */
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/vendor/inter/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}    /* özbek/gazak kiril giňeltmeleri */

:root {
  --bg:        #eef1f6;
  --panel:     #ffffff;
  --card:      #ffffff;
  --sunk:      #f4f6fa;
  --line:      #e4e8f0;
  --line-soft: #eef1f6;

  --ink:       #0f131c;
  --ink-2:     #3d4657;
  --ink-3:     #6b7688;

  --brand:     #4f56e0;
  --brand-ink: #ffffff;
  --brand-bg:  #eff0fe;
  --link:      #2563eb;
  --green:     #15a34a;
  --amber:     #c2710c;

  --shadow:    0 1px 2px rgba(23,27,38,.05);
  --shadow-md: 0 2px 8px rgba(23,27,38,.07), 0 8px 24px rgba(23,27,38,.05);
  --r:   14px;
  --r-s: 10px;
  /* Sözlük tablary we «panel» bellikleri şu üýtgeýjä daýanýar. Kesgitlenmese
     işjeň tab hiç bir bellik almaýardy — şoňa görä brend reňkine baglandy. */
  --acc: var(--brand);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1017; --panel: #141922; --card: #141922; --sunk: #1b212c;
    --line: #242b38; --line-soft: #1c222d;
    --ink: #f0f3f8; --ink-2: #b6c0cf; --ink-3: #8c98aa;
    --brand: #7c83ff; --brand-ink: #0d1017; --brand-bg: #1c2036;
    --link: #6ea0ff; --green: #43c76f; --amber: #e0a250;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 2px 8px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg: #0d1017; --panel: #141922; --card: #141922; --sunk: #1b212c;
  --line: #242b38; --line-soft: #1c222d;
  --ink: #f0f3f8; --ink-2: #b6c0cf; --ink-3: #8c98aa;
  --brand: #7c83ff; --brand-ink: #0d1017; --brand-bg: #1c2036;
  --link: #6ea0ff; --green: #43c76f; --amber: #e0a250;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* .grid/.tabs display-i basmasyn */
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
svg { flex: none; }

.shell { display: flex; min-height: 100vh; }

/* ── gapdal menýu ──────────────────────────────────────────────────────── */

.side {
  width: 234px; flex: none; background: var(--panel);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; transition: width .18s ease;
}
.logo { display: flex; align-items: center; gap: 10px; padding: 18px 14px 16px 18px;
        border-bottom: 1px solid var(--line-soft); }
.logo .mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
              background: var(--brand); color: var(--brand-ink); flex: none; }
.logo .mark svg { width: 19px; height: 19px; }
.logo b { font-size: 14px; font-weight: 750; letter-spacing: .01em; line-height: 1.1;
          overflow: hidden; white-space: nowrap; }
.logo i { display: block; font-style: normal; font-size: 9.5px; font-weight: 600;
          letter-spacing: .14em; color: var(--ink-3); }
.side-toggle {
  appearance: none; border: 0; background: var(--sunk); color: var(--ink-3); cursor: pointer;
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  margin-left: auto; flex: none; transition: background .14s, color .14s, transform .18s;
}
.side-toggle svg { width: 13px; height: 13px; }
.side-toggle:hover { background: var(--line); color: var(--ink); }
.side.collapsed .side-toggle svg { transform: rotate(180deg); }

/* ── nav skrollasy: köp bölüm bolanda gapdal menýu öz içinde aýlanýar ──── */
.nav {
  padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1;
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
.nav::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

.nav-i {
  appearance: none; border: 0; background: none; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 15px; font-weight: 550; color: var(--ink-2);
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-s);
  transition: background .14s, color .14s; text-align: left; width: 100%;
}
.nav-i svg { width: 18px; height: 18px; opacity: .8; flex: none; }
.nav-i .nav-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-i:hover { background: var(--sunk); color: var(--ink); }
.nav-i[aria-current="true"] { background: var(--brand-bg); color: var(--brand); font-weight: 620; }
.nav-i[aria-current="true"] svg { opacity: 1; }
.nv { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.nav-i[aria-current="true"] .nv { color: var(--brand); }
/* Baglanyşyk üzülen bolsa gapdal menýuda gyzyl — haýsy sahypada bolsaň hem görünýär */
.nav-i.duyduryly { color: #b91c1c; font-weight: 620; }
.nav-i.duyduryly svg { opacity: 1; }
.nav-i.duyduryly::after { content: "!"; margin-left: 4px; font-weight: 800; }
:root[data-theme="dark"] .nav-i.duyduryly { color: #fca5a5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-i.duyduryly { color: #fca5a5; }
}
.nav-sep { height: 1px; background: var(--line-soft); margin: 10px 11px; }

/* ── nav bölümleri: kategoriýa başlyklary, submenu ýaly açylyp-ýapylýar ── */
.nav-grp { display: flex; flex-direction: column; margin-top: 8px; }
.nav-grp-h {
  appearance: none; border: 0; background: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); border-radius: var(--r-s);
  transition: color .14s, background .14s;
}
.nav-grp-h:hover { color: var(--ink-2); background: var(--sunk); }
.nav-grp-h .chev { width: 12px; height: 12px; flex: none; transition: transform .16s; }
.nav-grp-h[aria-expanded="true"] .chev { transform: rotate(90deg); }
.nav-grp-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-sub { display: flex; flex-direction: column; gap: 2px; }
.nav-sub .nav-i { padding-left: 26px; }
.nav-sub .nav-i svg { width: 16px; height: 16px; }

.side-ft { padding: 14px 18px 18px; border-top: 1px solid var(--line-soft);
           display: flex; flex-direction: column; gap: 10px; }
.stat-mini b { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-mini span { font-size: 12.5px; color: var(--ink-3); }
.side-ft small { font-size: 10.5px; color: var(--ink-3); }

/* ── gapdal menýu ýygnalan (rel/icon) görnüşi ────────────────────────────
   Diňe ikonjyklar galýar, ýazgylar ýitýär — ini el bilen 234px ↔ 68px. */
.side.collapsed { width: 68px; }
.side.collapsed .logo { padding: 18px 0; justify-content: center; }
.side.collapsed .logo b, .side.collapsed .logo i { display: none; }
.side.collapsed .side-toggle { margin-left: 0; }
.side.collapsed .nav-t, .side.collapsed .nv,
.side.collapsed .nav-grp-t, .side.collapsed .nav-grp-h .chev {
  display: none;
}
.side.collapsed .nav-i { justify-content: center; padding: 10px; gap: 0; }
.side.collapsed .nav-sub .nav-i { padding-left: 10px; }
/* Ýygnalanda başlyk boş hatar bolup görünmesin — ýerine ýuka aýyryjy çyzyk goýulýar */
.side.collapsed .nav-grp-h { display: none; }
.side.collapsed .nav-grp { border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 8px; }
.side.collapsed .nav-sub { display: flex !important; }
.side.collapsed .side-ft { padding: 14px 6px 18px; align-items: center; }
.side.collapsed .stat-mini { text-align: center; }
.side.collapsed .stat-mini span, .side.collapsed .side-ft small { display: none; }

/* ── ýokarky hatar ─────────────────────────────────────────────────────── */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.head {
  position: sticky; top: 0; z-index: 30; background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 13px 24px;
}
.head h1 { margin: 0; font-size: 22px; font-weight: 680; letter-spacing: -.02em; }
.head-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.live { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green);
       animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
                   70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

.icon-btn {
  appearance: none; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-s); border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  transition: background .14s, color .14s;
}
.icon-btn:hover { background: var(--sunk); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }
.i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: none; }
:root[data-theme="dark"] .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: none; }
  :root:not([data-theme="light"]) .i-moon { display: block; }
}

.btn {
  appearance: none; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  transition: background .14s, border-color .14s, opacity .14s;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { background: var(--sunk); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-go { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-go:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 88%, #000); }

/* ── täzeleme dolandyryşy ──────────────────────────────────────────────── */

.refresh { display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 3px;
           border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.refresh .btn { border: 0; background: none; padding: 6px 12px; border-radius: 999px; }
.refresh .btn:hover { background: var(--sunk); }
.auto { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
        font-size: 13.5px; font-weight: 600; color: var(--ink-3); padding-right: 10px;
        user-select: none; }
.auto input { position: absolute; opacity: 0; width: 0; height: 0; }
.auto .sw { width: 34px; height: 19px; border-radius: 999px; background: var(--line);
            position: relative; transition: background .18s; flex: none; }
.auto .sw::after { content: ""; position: absolute; top: 2.5px; left: 2.5px;
                   width: 14px; height: 14px; border-radius: 50%; background: var(--panel);
                   box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s; }
.auto input:checked + .sw { background: var(--green); }
.auto input:checked + .sw::after { transform: translateX(15px); }
.auto input:checked ~ * , .auto:has(input:checked) { color: var(--ink); }
.auto input:focus-visible + .sw { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.dot.off { background: var(--ink-3); animation: none; }

/* ── bölümler / süzgüçler ──────────────────────────────────────────────── */

.body { padding: 20px 24px 60px; }

/* Tabs + süzgüçler + bar — sahypa aşak skrol edilende ýokarda galýar (`.head`-iň
   aşagynda, JS bilen ölçelen beýikligine görä — .head-iň beýikligi ekran ini
   üýtgände media-sorag bilen üýtgeýär, şoň üçin sabit san ýerine `--head-h`). */
.toolbar-sticky {
  position: sticky; top: var(--head-h, 65px); z-index: 20;
  background: var(--bg); padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
}
/* `.d-head` özi-de sticky (ýokarda) -- `.toolbar-sticky`-iň içinde bolsa
   daşky gaba galdyrylýar, ikisi bilelikde "goşa ýapyşyk" bolup ýalňyş
   orunlaşmaz ýaly. */
.toolbar-sticky .d-head { position: static; background: none; padding: 0; }

.tabs { display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 16px;
        background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }
.tab {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 15.5px; font-weight: 650;
  display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
  background: transparent; color: var(--ink-2); transition: background .16s, color .16s;
}
.tab svg { width: 17px; height: 17px; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); }
.tab .n { font-size: 14px; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.field { position: relative; display: flex; align-items: center; flex: 1 1 190px;
         min-width: 175px; max-width: 260px; }
.field.f-q { flex: 2 1 320px; max-width: none; }
.field.f-q input[type="search"] { padding-right: 40px; }

/* ── AI gözleg (Qwen/Ollama) — erkin dilde ýazylan soragy nireden/nira/kuzow/
   kind süzgüçlerine öwürýär. Diňe gutynyň gapdalyndaky ✦ düwmesine basylanda
   çagyrylýar (her harpda däl — LLM çagyryşy sekunt alýar). */
.ai-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 27px; height: 27px; padding: 0; border: 0; cursor: pointer;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--brand-bg); color: var(--brand); font-size: 14px; line-height: 1;
  transition: background .14s, color .14s, opacity .14s;
}
.ai-btn:hover { background: var(--brand); color: var(--brand-ink); }
.ai-btn:disabled { opacity: .5; cursor: not-allowed; }
.ai-btn.busy { animation: ai-spin 1s linear infinite; }
@keyframes ai-spin { to { transform: translateY(-50%) rotate(360deg); } }
.ai-btn-std { display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-bg); color: var(--brand); border-color: transparent; }
.ai-btn-std:hover { background: var(--brand); color: var(--brand-ink); }
.ai-btn-std.busy svg { animation: ai-spin 1s linear infinite; }
.field > svg { position: absolute; left: 12px; width: 15px; height: 15px;
               color: var(--ink-3); pointer-events: none; }
input[type="search"], select {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-s);
  padding: 11px 13px; transition: border-color .14s, box-shadow .14s;
}
.field > svg ~ input, .field > svg ~ select { padding-left: 35px; }
select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 53%, calc(100% - 11px) 53%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
input:focus-visible, select:focus-visible { outline: 0; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }

/* ── salgy gutusy (nireden / nirä) ─────────────────────────────────────────
   Öň bu meýdanlar açylýan sanawdy — diňe iň köp duş gelýän 80 ýer. Indi ol
   ýazgy meýdany: aşagynda iki katalogdan (kollektor + dasha) gelen teklipler
   çykýar, ýöne islendik söz erkin ýazylyp hem bilner. */
.ac-wrap { position: relative; display: inline-flex; }
.ac-wrap > input { width: 100%; }
/* Katalogdan saýlanan ýer — çep gyrada inçe bellik: indi ähli ýazylyşy tutýar */
input.ac-secildi { border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: inset 3px 0 0 var(--brand); }
.ac-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0; line-height: 1; border: 0; cursor: pointer;
  border-radius: 50%; background: var(--sunk); color: var(--ink-3);
  font-size: 15px; display: flex; align-items: center; justify-content: center; }
.ac-x:hover { background: var(--line); color: var(--ink); }

.ac-pop { position: absolute; z-index: 40; top: calc(100% + 5px); left: 0;
  min-width: 100%; max-width: min(420px, 92vw); max-height: 320px; overflow-y: auto;
  background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--r-s); box-shadow: var(--shadow-md); padding: 4px; }
.ac-pop[hidden] { display: none; }
.ac-i { display: flex; align-items: baseline; gap: 7px; padding: 7px 9px;
  border-radius: 7px; cursor: pointer; font-size: 14px; }
.ac-i:hover, .ac-i.on { background: var(--sunk); }
.ac-at { font-weight: 600; color: var(--ink); white-space: nowrap; }
.ac-doly { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-tag { flex: none; font-size: 10.5px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink-3); background: var(--sunk); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 6px; }
.ac-i:hover .ac-tag, .ac-i.on .ac-tag { background: var(--panel); }
.ac-tag.hz { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.ac-n { flex: none; font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.ac-bos { padding: 10px 9px; font-size: 13px; color: var(--ink-3); }

/* messenger süzgüçleri */
.msgs { display: flex; align-items: center; gap: 5px; padding: 4px 6px;
        background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); }
.mbtn {
  appearance: none; cursor: pointer; border: 0; background: none; padding: 5px 7px;
  border-radius: 8px; display: flex; align-items: center; gap: 5px;
  color: var(--ink-3); transition: background .14s, color .14s;
}
.mbtn svg { width: 17px; height: 17px; }
.mbtn small { font-size: 11px; font-variant-numeric: tabular-nums; }
.mbtn:hover { background: var(--sunk); }
.mbtn[aria-pressed="true"] { background: var(--m-bg, var(--brand-bg)); color: var(--m, var(--brand)); }
/* saýlanan messengerde — kiçijik bellik (birnäçesini bile saýlap bolýar) */
.mbtn .tik { width: 13px; height: 13px; border-radius: 50%; flex: none;
             border: 1.5px solid currentColor; opacity: .35; }
.mbtn[aria-pressed="true"] .tik { opacity: 1; background: currentColor;
  color: var(--m, var(--brand));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 5 5 9-10.5'/%3E%3C/svg%3E") center/13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 5 5 9-10.5'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color: transparent; }

/* tertip saýlaýjy — süzgüçleriň iň sagynda */
.field.f-sort { flex: 0 1 210px; min-width: 190px; margin-left: auto; }
.field.f-sort select { font-size: 14px; font-weight: 600; }

/* «Gözle» düwmesi — söz/nireden/nirä/ulanyjy/telefon meýdanlary diňe şoňa
   basylanda (ýa-da Enter) gözlenýär, ýazylanda özi gözlemeýär. */
.f-search { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
            white-space: nowrap; }
.f-search svg { width: 16px; height: 16px; }
.f-search.busy { opacity: .75; pointer-events: none; }
.f-search.busy svg { animation: f-search-spin .8s linear infinite; }
.f-search.busy .f-search-t::after { content: "…"; }
@keyframes f-search-spin { to { transform: rotate(360deg); } }

/* ── saýlaw hatary ─────────────────────────────────────────────────────── */

.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bar .grow { flex: 1; }
.count { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.count b { color: var(--ink); }
.chk { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
       font-size: 15px; color: var(--ink-2); user-select: none; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; margin: 0; }

/* ── kartlar ───────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); }

.card { position: relative; display: flex; flex-direction: column;
        user-select: none; background: var(--card);
        border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
        transition: box-shadow .16s, border-color .16s; }
.card:hover { box-shadow: var(--shadow-md); }
.card.seen { background: var(--sunk); border-color: var(--line-soft); }
.card.seen .c-route { color: var(--ink-3); }
.card.seen .kv b, .card.seen .c-list span, .card.seen .c-user b { color: var(--ink-2); font-weight: 600; }
.card.seen .kv b.price { color: var(--ink-2); }
.card.seen .msg-tag, .card.seen .tel { opacity: .65; }
.card.seen .stamp { display: inline-flex; }
.stamp { display: none; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 750;
         letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
         border: 1.5px solid var(--line); border-radius: 6px; padding: 3px 8px;
         transform: rotate(-2deg); background: var(--panel); }
.stamp svg { width: 13px; height: 13px; }

.card.sel { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-md); }


.c-sel { flex: none; }

.c-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
         gap: 10px; padding: 13px 16px 0; }
.c-sel { grid-column: 1; }
.c-user { grid-column: 2; display: flex; align-items: center; gap: 7px; min-width: 0;
          font-size: 14.5px; color: var(--ink-2); }
.c-user > svg { width: 16px; height: 16px; color: var(--ink-3); }
.c-user b { font-weight: 650; color: var(--ink); overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.u-tel { font-style: normal; font-family: var(--mono); font-size: 13.5px;
         font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.c-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
          flex-wrap: wrap; padding: 0 16px; margin-top: 6px; }
.c-date { display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
          color: var(--ink-2); background: var(--sunk); padding: 4px 10px;
          border-radius: 999px; font-variant-numeric: tabular-nums; }
.c-date svg { width: 13px; height: 13px; }
.c-chat { max-width: 15rem; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; display: inline-block; cursor: help; }

.msg-tag { display: inline-flex; align-items: center; justify-content: center;
           width: 30px; height: 30px; border-radius: 9px;
           background: var(--m-bg); color: var(--m); }
.msg-tag svg { width: 17px; height: 17px; }
.msg-tag.txt { width: auto; gap: 6px; padding: 5px 11px; font-size: 13px; font-weight: 700; }

/* 1. UGUR — iň esasy */
.c-route { padding: 12px 16px 0; display: flex; align-items: center; gap: 9px;
           flex-wrap: wrap; font-size: 19px; font-weight: 750; color: var(--link);
           letter-spacing: -.015em; line-height: 1.25; }
.c-route svg { width: 18px; height: 18px; color: var(--ink-3); }

/* 2. ÝÜK  3. BAHA — uly, kontrastly */
.c-key { padding: 11px 16px 0; display: flex; flex-direction: column; gap: 7px; }
/* 4. Agram+Göwrüm  5. Kuzow+Ýükleme — bir hatarda ikisi, ýer tygşytlamak üçin */
.kv-row { display: flex; flex-wrap: wrap; gap: 9px 22px; }
.kv-row .kv { flex: 1 1 130px; }
.kv { display: flex; align-items: baseline; gap: 9px; }
.kv u { flex: none; width: 76px; text-decoration: none; font-size: 13.5px;
        font-weight: 600; color: var(--ink-3);
        display: inline-flex; align-items: center; gap: 5px; }
.kv u svg { width: 14px; height: 14px; flex: none; opacity: .7; }
.kv b { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.3;
        word-break: break-word; }
.kv b.price { color: var(--green); }
.kv b.dim { color: var(--ink-3); font-weight: 600; font-size: 15px; }
.kv .cat { font-size: 13px; font-weight: 600; color: var(--brand); margin-left: 2px; }
/* Baha bar, ýöne walýuta habarda ýazylmadyk — ýitirmän, açyk bellik hökmünde */
.kv .no-cur { font-style: normal; font-weight: 600; font-size: 13px;
              color: var(--amber, #d9a441); opacity: .85; }

/* 4+ galan zatlar — yzly-yzyna */
.c-list { padding: 11px 16px 0; display: grid; grid-template-columns: auto 1fr;
          gap: 5px 10px; align-items: baseline; }
.c-list u { text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--ink-3);
            display: inline-flex; align-items: center; gap: 5px; }
.c-list u svg { width: 13px; height: 13px; flex: none; opacity: .7; }
.c-list span { font-size: 14.5px; font-weight: 550; color: var(--ink); word-break: break-word; }

.c-bot { margin-top: auto; border-top: 1px solid var(--line-soft); padding: 12px 16px;
         display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tel { user-select: text; font-family: var(--mono); font-size: 15px; font-weight: 650;
       display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
       border-radius: var(--r-s); border: 1.5px solid var(--line); background: var(--sunk);
       color: var(--ink); cursor: pointer; transition: border-color .14s, color .14s; }
.tel:hover { border-color: var(--brand); color: var(--brand); }
.tel.done { border-color: var(--green); color: var(--green); }
.tel svg { width: 14px; height: 14px; opacity: .6; }
.c-bot .grow { flex: 1; }
.c-hint { font-size: 13px; color: var(--ink-3); }
.card.seen .c-hint { opacity: .7; }
.edit { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
        padding: 8px 13px; border-radius: var(--r-s); border: 1.5px solid var(--line);
        background: var(--panel); color: var(--ink-2); cursor: pointer; transition: all .14s; }
.edit:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-bg); }
.edit svg { width: 15px; height: 15px; }

.src-tag { font-size: 12px; font-weight: 650; padding: 3px 8px; border-radius: 6px;
           background: var(--sunk); color: var(--ink-3); }
.src-tag.ai { background: var(--brand-bg); color: var(--brand); }
.src-tag.manual { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.src-tag.learned { background: color-mix(in srgb, var(--amber) 16%, transparent);
                   color: var(--amber); }

.raw { border-top: 1px solid var(--line-soft); }
.raw summary { list-style: none; cursor: pointer; padding: 10px 16px; font-size: 13.5px;
               color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.raw summary::-webkit-details-marker { display: none; }
.raw summary:hover { color: var(--ink); }
.raw summary svg { width: 13px; height: 13px; transition: transform .16s; }
.raw[open] summary svg { transform: rotate(90deg); }
.raw pre { user-select: text; margin: 0; padding: 0 16px 14px; font: 14px/1.6 var(--mono);
           white-space: pre-wrap; word-break: break-word; color: var(--ink-2);
           max-height: 320px; overflow: auto; }

/* ── redaktirleme penjiresi ────────────────────────────────────────────── */

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 10px; }
.modal[hidden] { display: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(8,11,17,.55); backdrop-filter: blur(3px); }
.modal-box { position: relative; width: min(1360px, 96vw); max-height: 97vh; display: flex;
             flex-direction: column; background: var(--panel); border: 1px solid var(--line);
             border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden; }
.modal-hd { display: flex; align-items: center; gap: 12px; padding: 12px 18px;
            border-bottom: 1px solid var(--line); }
.modal-hd h2 { margin: 0; font-size: 19px; font-weight: 700; flex: 1; }
/* Asyl habar (`.m-src`) indi ÝAPYK -- `#m-src-toggle` bilen açylýar. Ýapyk
   wagty forma tutuş ini alýar (dar ekranda-da skrolsyz sygar ýaly), açylanda
   `.src-open` goşulyp 2 sütüne bölünýär. */
.modal-body { display: grid; grid-template-columns: 1fr; overflow: hidden; min-height: 0; }
.modal-body.src-open { grid-template-columns: minmax(0, 1.8fr) minmax(0, .75fr); }
.m-src { display: none; }
.modal-body.src-open .m-src { display: flex; }
/* Toparlar (Ugur/Ýük/Baha/...) 2 sütünli: sütün 1 ýokardan aşak dolýar
   (1-4-nji topar), sütün 2-de galanlar -- adaty okaýyş tertibi bozulmaýar,
   ýöne beýikligi ~ýarpa düşýär, köplenç skrolsyz sygýar. 3 sütün synanyşyldy --
   her toparyň ini gaty daralyp, meýdanlar has köp hatara bölünip, netijede has
   BEÝIK bolýardy (synag: 935px -> 1026px), şoň üçin 2 sütünde saklanýar. Dar
   ekranda (aşakdaky @media) ýekeje sütüne düşýär. */
.m-form { padding: 10px 16px; overflow: auto; align-content: start;
          display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column;
          grid-template-rows: repeat(4, min-content); gap: 8px 14px; }
.m-src { border-left: 1px solid var(--line); background: var(--sunk);
         padding: 16px 18px; overflow: auto; flex-direction: column; gap: 10px; }
.m-src h3 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .07em; color: var(--ink-3); }
.m-src pre { margin: 0; font: 15px/1.7 var(--mono); white-space: pre-wrap;
             word-break: break-word; color: var(--ink); }
/* Her topar öz gutusynda -- 2 sütünli tertipde "öňki/indiki topar" gapdal-
   gapdala düşýär, şoň üçin öňki border-top aýryjy indi many bermeýär. */
.m-group { background: var(--sunk); border: 1px solid var(--line-soft);
           border-radius: 10px; padding: 6px 9px; }
.m-group-h { margin: 0 0 5px; font-size: 12px; font-weight: 700; text-transform: uppercase;
             letter-spacing: .06em; color: var(--brand); display: flex; align-items: center; gap: 6px; }
.m-group-h svg { width: 13px; height: 13px; flex: none; opacity: .85; }
.m-group-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.m-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px;
                    font-weight: 600; color: var(--ink-2); }
.m-form label.wide { grid-column: 1 / -1; }

.m-form input, .m-form select { font-size: 15px; }
.modal-ft { display: flex; align-items: center; gap: 10px; padding: 10px 18px;
            border-top: 1px solid var(--line); background: var(--sunk); }
.m-note { flex: 1; font-size: 13.5px; color: var(--ink-3); }

/* ── jikme-jik sahypa (Ýükdaş görnüşi) ────────────────────────────────── */

.detail[hidden] { display: none; }
/* Ähli sahypanyň (Hasaplar, Sözlükler, Isleg, Abunalar, Awtopark, Baha,
   Žurnal, Profiller...) sözbaşysy — `.head`-iň aşagynda ýapyşyk galýar,
   sahypa aşak skrol edilende yza-öňe düwmesi/at hemişe görnüp dursun ýaly. */
.d-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
          position: sticky; top: var(--head-h, 65px); z-index: 15; background: var(--bg);
          padding: 6px 0; }
.d-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.d-head .grow { flex: 1; }

.d-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.d-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.d-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }

.d-card { background: var(--card); border: 1px solid var(--line);
          border-radius: var(--r); padding: 20px 22px; box-shadow: var(--shadow); }
.d-card h3 { margin: 0 0 3px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.d-card .sub { margin: 0 0 14px; font-size: 15px; font-weight: 650; color: var(--ink); }
.d-card > p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.d-card pre { margin: 0; font: 15px/1.7 var(--mono); white-space: pre-wrap;
              word-break: break-word; color: var(--ink-2); }

/* ugur — nokatly setir */
.rt { display: grid; grid-template-columns: 22px 1fr; gap: 0 12px; }
.rt + .rt { margin-top: 4px; }
.rt .pt { grid-row: 1 / 3; position: relative; display: grid; place-items: center;
          padding-top: 5px; align-self: start; }
.rt .pt::before { content: ""; width: 13px; height: 13px; border-radius: 50%;
                  border: 3px solid var(--green); background: var(--card); }
.rt.to .pt::before { border: 0; width: 15px; height: 15px; background: #e5484d;
                     clip-path: path("M7.5 0C3.4 0 0 3.4 0 7.5 0 13 7.5 15 7.5 15S15 13 15 7.5C15 3.4 11.6 0 7.5 0Z"); }
.rt.from .pt::after { content: ""; position: absolute; top: 21px; bottom: -14px;
                      width: 2px; background: var(--line); }
.rt u { text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; color: var(--ink-3); }
.rt b { display: block; font-size: 18px; font-weight: 700; margin-top: 2px; }

/* detal setirleri */
.d-list { margin: 0; display: flex; flex-direction: column; }
.d-list > div { display: flex; align-items: center; gap: 16px; padding: 13px 0;
                border-top: 1px solid var(--line-soft); }
.d-list > div:first-child { border-top: 0; }
.d-list dt { flex: 1; font-size: 15px; color: var(--ink-3); }
.d-list dd { margin: 0; font-size: 15.5px; font-weight: 700; text-align: right;
             word-break: break-word; }
.d-list dd.dim { color: var(--ink-3); font-weight: 550; }
.d-list dd.price { color: var(--link); }

/* kontakt paneli */
.d-side .d-card { padding: 18px; }
.d-side h3 { margin-bottom: 14px; }
.c-name { display: block; text-align: center; font-size: 17px; font-weight: 750;
          text-transform: uppercase; letter-spacing: .01em; word-break: break-word; }
.c-plat { display: block; width: fit-content; margin: 7px auto 14px; font-size: 12.5px;
          font-weight: 600; padding: 3px 11px; border-radius: 7px;
          background: var(--sunk); color: var(--ink-3); }
.act { display: flex; align-items: center; justify-content: center; gap: 9px;
       width: 100%; padding: 12px 14px; border-radius: var(--r-s); font-size: 15px;
       font-weight: 650; text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
       transition: filter .14s, background .14s; margin-bottom: 9px; font-family: inherit; }
.act:last-child { margin-bottom: 0; }
.act svg { width: 17px; height: 17px; }
.act-tel { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green);
           font-family: var(--mono); font-weight: 700; }
.act-wa { background: #25D366; color: #062313; }
.act-wa:hover { filter: brightness(1.06); }
/* Telegram habaryna geçiş — telefon ýok bolanda esasy hereket */
.act-tg { background: #229ED9; color: #04202e; }
.act-tg:hover { filter: brightness(1.06); }
.act-call { border-color: var(--green); color: var(--green); background: transparent; }
.act-call:hover { background: color-mix(in srgb, var(--green) 10%, transparent); }
.act-edit { border-color: var(--line); color: var(--ink-2); background: var(--panel); }
.act-edit:hover { background: var(--sunk); color: var(--ink); }

@media (max-width: 1000px) {
  .d-grid { grid-template-columns: 1fr; }
  .d-side { position: static; }
}

/* ── boş / ýüklenýär / toast ───────────────────────────────────────────── */

.empty { padding: 70px 20px; text-align: center; color: var(--ink-3); }
.empty svg { width: 38px; height: 38px; opacity: .35; margin-bottom: 12px; }
.empty p { margin: 0; font-size: 14px; }
.empty small { display: block; margin-top: 5px; opacity: .8; }
.skeleton { height: 216px; border-radius: var(--r); border: 1px solid var(--line-soft);
            background: linear-gradient(100deg, var(--card) 30%, var(--sunk) 50%, var(--card) 70%);
            background-size: 220% 100%; animation: shim 1.4s linear infinite; }
@keyframes shim { to { background-position: -120% 0; } }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
         padding: 10px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 550;
         background: var(--ink); color: var(--bg); box-shadow: var(--shadow-md);
         opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; } /* modaldan (100) ýokary */
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── dar ekran ─────────────────────────────────────────────────────────── */

.only-narrow { display: none; }
@media (max-width: 820px) {
  .modal-body.src-open { grid-template-columns: 1fr; }
  .m-src { border-left: 0; border-top: 1px solid var(--line); max-height: 34vh; }
  .m-form { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
@media (max-width: 900px) {
  .refresh .btn span { display: none; }
  .side { position: fixed; z-index: 60; transform: translateX(-100%);
          transition: transform .2s; box-shadow: var(--shadow-md); }
  .side.open { transform: none; }
  /* Dar ekranda "ýygnalan" (rel) görnüş manysyz — menýu ýa açyk, ýa ýapyk,
     şonuň üçin ol düwme gizlenýär we ini hemişe doly galýar. */
  .only-wide { display: none; }
  .side.collapsed { width: 234px; }
  .side.collapsed .logo { padding: 18px 18px 16px; justify-content: flex-start; }
  .side.collapsed .logo b, .side.collapsed .logo i { display: block; }
  .side.collapsed .nav-t, .side.collapsed .nv,
  .side.collapsed .nav-grp-t, .side.collapsed .nav-grp-h .chev { display: inline; }
  .side.collapsed .nav-grp-h { display: flex; }
  .side.collapsed .nav-grp { border-top: 0; padding-top: 0; margin-top: 8px; }
  .side.collapsed .nav-i { justify-content: flex-start; padding: 10px 12px; gap: 11px; }
  .side.collapsed .nav-sub .nav-i { padding-left: 26px; }
  .side.collapsed .side-ft { padding: 14px 18px 18px; align-items: stretch; }
  .side.collapsed .stat-mini span, .side.collapsed .side-ft small { display: block; }
  .only-narrow { display: grid; }
  .head { padding: 11px 14px; }
  .head h1 { font-size: 17px; }
  .body { padding: 14px 14px 50px; }
  .grid { grid-template-columns: 1fr; }
  /* Dar ekranda süzgüç meýdanlary doly setir bolup üýşýär (8+ hatar) —
     ýapyşyk galsa ekranyň ählisini tutup, düýbünden peýdasyz bolýar. */
  .toolbar-sticky { position: static; border-bottom: 0; padding-bottom: 0; }
  .field, .field.f-q, .field.f-sort { flex: 1 1 100%; margin-left: 0; }
}



/* Kartyň aşagyndaky «Dasha» düwmesi — «Habar» düwmesi bilen deň görnüş.
   Öň ölçeg berilmändigi üçin içindäki SVG ullakan bolup ýaýraýardy. */
.hz-edit{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;
  padding:8px 13px;border-radius:var(--r-s);border:1.5px solid var(--line);
  background:var(--panel);color:var(--ink-2);cursor:pointer;transition:all .14s;
  line-height:1.2;white-space:nowrap}
.hz-edit svg{width:15px;height:15px;flex:none}
.hz-edit:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-bg)}
/* tablisadaky kiçi warýant */
.tbl .mini{display:inline-flex;font-size:11px;font-weight:500;padding:2px 8px;
  border-radius:6px;border-width:1px;white-space:nowrap}
.hz-filter{margin-bottom:4px}
.hz-learn{display:flex;align-items:center;gap:8px;font-size:12px;opacity:.8}
.hz-learn input{width:auto}

/* ── ýagdaý bellikleri ─────────────────────────────────────────────────────── */
.hz-tag{font-size:11px;padding:1px 7px;border-radius:999px;border:1px solid transparent;
  white-space:nowrap}
.hz-ready  {color:#0a7d3f;background:#0a7d3f14;border-color:#0a7d3f33}
.hz-blocked{color:#9a6b00;background:#9a6b0014;border-color:#9a6b0033;cursor:help}
.hz-posted {color:#1358c4;background:#1358c414;border-color:#1358c433}
.hz-error  {color:#b3261e;background:#b3261e14;border-color:#b3261e33;cursor:help}

/* ── habarda → dasha.com.tm gabatlaşma tablisasy ───────────────────────────── */
.c-map{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);
  gap:2px 14px;margin-top:10px;padding:0 16px;font-size:13px;align-items:baseline}
.c-map>u{text-decoration:none;opacity:.55;font-size:12px;white-space:nowrap}
/* Habarda bar, yone dasha.com.tm tarapy bos — duzedilmeli setir */
.c-map>u::before{content:'';display:inline-block;width:11px}
.c-map>u.miss{opacity:.9;font-weight:650;color:#9a6b00}
.c-map>u.miss::before{content:'!';font-weight:800}
.c-map .m-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;opacity:.4;
  padding-bottom:3px;border-bottom:1px solid var(--line,#e3e6ea);margin-bottom:3px}
.c-map .m-raw{overflow-wrap:anywhere}
.c-map .m-hz{overflow-wrap:anywhere;color:var(--go,#0a7d3f)}
.c-map .m-hz.miss{color:#9a6b00}
.hz-id{font-style:normal;font-size:11px;opacity:.35;cursor:help}
.hz-none{color:#9a6b00}
.cak{font-style:normal;font-size:10.5px;color:#9a6b00;background:#9a6b0014;
  border-radius:999px;padding:0 6px;margin-left:4px}

.c-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;padding:0 16px}
.chip{font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--chip,#8ea0b514);
  border:1px solid var(--line,#e3e6ea);overflow-wrap:anywhere}
.chip u{text-decoration:none;opacity:.5;margin-right:5px}
.c-flags{margin-top:10px;padding:0 16px;font-size:12px;line-height:1.4}
/* Nameniň yetmeyandigi — basyp goni duzedip bolyan duyduryş zolagy */
.c-miss{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  font-size:13px;font-weight:600;color:#9a6b00;background:#9a6b0012;
  border:1px solid #9a6b0033;border-radius:var(--r-s,8px);
  padding:8px 11px;cursor:pointer;transition:background .14s,border-color .14s}
.c-miss:hover{background:#9a6b001f;border-color:#9a6b0066}
.c-miss svg{width:15px;height:15px;flex:none}
.c-warn{opacity:.5;margin-top:6px}

/* ── setir (tablisa) görnüşi ───────────────────────────────────────────────── */
.grid.as-table{display:block;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{position:sticky;top:0;z-index:1;background:var(--bg,#fff);text-align:left;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;opacity:.5;
  padding:7px 9px;border-bottom:1px solid var(--line,#e3e6ea);white-space:nowrap}
.tbl td{padding:6px 9px;border-bottom:1px solid var(--line,#e3e6ea1a);vertical-align:middle}
.tbl tr.tr:hover{background:var(--chip,#8ea0b510)}
.tbl tr.sel{background:#1358c40f}
.tbl tr.seen td:not(.t-c){opacity:.55}
.t-c{width:1%;text-align:center}
.t-dim{opacity:.6}
.t-num{text-align:right;white-space:nowrap}
.t-grp{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-ugur{white-space:nowrap;font-weight:600}
.t-ugur i{font-style:normal;opacity:.4;margin:0 5px}
.tbl .mini{font-size:11px;padding:2px 8px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line,#d7dbe0);background:transparent;color:inherit;opacity:.7}
.tbl .mini:hover{opacity:1}

/* ── segment çalyşdyryjy (süzgüç / görnüş) ─────────────────────────────────── */
.seg{display:inline-flex;border:1px solid var(--line,#d7dbe0);border-radius:8px;overflow:hidden}
.seg button{font:inherit;font-size:12px;padding:4px 11px;border:0;cursor:pointer;
  background:transparent;color:inherit;opacity:.65;white-space:nowrap}
.seg button+button{border-left:1px solid var(--line,#d7dbe0)}
.seg button.on{background:var(--chip,#8ea0b51f);opacity:1;font-weight:600}
.seg button b{font-weight:600;opacity:.55;margin-left:4px}

/* ── hasaplar ekrany ───────────────────────────────────────────────────────── */
.accs{padding:16px 20px 40px}
.acc-note{max-width:70ch;font-size:13px;opacity:.6;margin:6px 0 16px;line-height:1.5}
.acc-hint{grid-column:1/-1;font-size:12px;opacity:.6;line-height:1.45;margin:2px 0 0}
.acc-act{white-space:nowrap;display:flex;gap:5px;justify-content:flex-end}
.acc-act .mini{display:inline-flex;font-size:11.5px;font-weight:500;padding:3px 9px;
  border-radius:6px;border:1px solid var(--line);background:transparent;color:inherit;
  cursor:pointer;opacity:.75}
.acc-act .mini:hover{opacity:1;border-color:currentColor}
.acc-err{font-style:normal;margin-left:6px;cursor:help;color:#b3261e;font-weight:700}
/* [hidden] display:grid/flex bilen basylýardy — açyk basýarys */
#grid[hidden], .tabs[hidden], .filters[hidden], .bar[hidden]{display:none !important}
#m-body textarea{width:100%;font:inherit;font-size:13px;font-family:var(--mono,monospace);
  padding:8px 10px;border-radius:8px;border:1.5px solid var(--line);background:var(--sunk);
  color:inherit;resize:vertical}
#m-body input[type=file]{font-size:13px}
.m-src pre, #m-src{white-space:pre-wrap;overflow-wrap:anywhere}

/* «Dasha ýükle» düwmesi — bildirişi platforma iberýär (yşyklandyrylan) */
.hz-push{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:650;
  padding:8px 13px;border-radius:var(--r-s);border:1.5px solid var(--green);
  background:var(--green);color:#fff;cursor:pointer;transition:all .14s;
  line-height:1.2;white-space:nowrap}
.hz-push svg{width:15px;height:15px;flex:none}
.hz-push.go:hover{filter:brightness(1.07)}
.hz-push:disabled{background:var(--sunk);color:var(--ink-3);border-color:var(--line);
  opacity:.55;
  cursor:not-allowed}
.hz-push.posted{background:transparent;color:var(--green);border-color:var(--green);
  cursor:default}
/* jikme-jik sahypada doly ininde */
.d-push .hz-push{width:100%;justify-content:center;padding:11px}
.d-push-why{margin:7px 0 0;text-align:center;font-size:13px;color:var(--ink-3)}

/* ── çözülmedik salgylar ekrany ─────────────────────────────────────────── */
/* Bu dialogda asyl habar sütüni gerek däl — modal bir sütüne geçýär,
   ýogsa saganyň ýarysy boş durýardy we aşakda gorizontal skroll çykýardy. */
.modal.wide-modal .modal-box{width:min(1080px,96vw);max-height:90vh}
.modal.wide-modal .modal-body{display:flex;flex-direction:column;flex:1 1 auto;
  min-height:0;overflow:hidden}
.modal.wide-modal .m-src{display:none}
.modal.wide-modal #m-src-toggle{display:none}
.modal.wide-modal .m-form{flex:1 1 auto;min-height:0;padding:0;overflow:auto;display:block}

.s-load{padding:28px 20px;opacity:.6}

/* ── kartada gör (ugur marşruty) ─────────────────────────────────────── */
.route-sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.route-sum svg{width:16px;height:16px;opacity:.5}
.route-km{font-weight:700;color:var(--brand)}
.route-dur{color:var(--ink-3);font-size:13px}
#route-map{height:min(58vh,520px);width:100%}
.route-tags{padding:12px 20px;border-top:1px solid var(--line)}
.route-tags h4{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink-3)}
.route-tags > div{display:flex;flex-wrap:wrap;gap:6px}
.border-tag,.city-tag{display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:999px;font-size:12.5px;white-space:nowrap}
.border-tag{background:color-mix(in srgb, var(--amber) 16%, transparent);
  color:var(--amber)}
.city-tag{background:var(--sunk);color:var(--ink-2)}
.border-icon{font-size:16px;line-height:22px;text-align:center}
.route-btn{margin-top:14px}
.s-empty{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:48px 20px;text-align:center}
.s-empty svg{width:38px;height:38px;color:var(--green);margin-bottom:4px}
.s-empty b{font-size:17px}
.s-empty span{font-size:13.5px;color:var(--ink-3)}

/* ýokarky hatar — sanaw süýşende ýerinde galýar */
.s-top{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;padding:14px 20px 12px;background:var(--panel);
  border-bottom:1px solid var(--line)}
.s-stat{display:flex;align-items:center;gap:18px}
.s-stat > div{display:flex;flex-direction:column;line-height:1.15}
.s-stat b{font-size:19px;font-weight:750;font-variant-numeric:tabular-nums}
.s-stat span{font-size:11.5px;color:var(--ink-3)}
.s-stat .s-am b{color:var(--amber)}
.s-stat .s-ok b{color:var(--green)}
.s-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 0}

.s-search{position:relative;display:flex;align-items:center;flex:1;min-width:180px}
.s-search svg{position:absolute;left:11px;width:15px;height:15px;color:var(--ink-3);
  pointer-events:none}
.s-search input{width:100%;font:inherit;font-size:14px;color:var(--ink);padding:9px 12px 9px 33px;
  background:var(--sunk);border:1.5px solid var(--line);border-radius:var(--r-s)}
.s-search input:focus-visible{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent)}

.s-sortsel{font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;
  padding:9px 30px 9px 12px;background:var(--sunk);border:1.5px solid var(--line);
  border-radius:var(--r-s);appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 53%,calc(100% - 11px) 53%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.s-wagt{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.s-hint{margin:0;padding:11px 20px 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.s-ai-prog{font-weight:650;color:var(--brand);white-space:nowrap;margin-left:4px}

/* ── setirler ─────────────────────────────────────────────────────────── */
.s-list{display:flex;flex-direction:column;gap:8px;padding:12px 20px 22px}
.s-row{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr) auto;
  gap:16px;align-items:center;padding:11px 13px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-s);transition:border-color .14s}
.s-row:hover{border-color:color-mix(in srgb, var(--brand) 45%, var(--line))}
.s-row[hidden]{display:none}

/* «Salgy däl» — setiriň aşagynda, ähli sütüni tutup. Esasy hereket katalog
   bilen baglamak, bu bolsa seýrek ýagdaý, şoňa görä kiçi we solgun. */
.s-dal{grid-column:1/-1;display:flex;align-items:center;gap:6px;
  margin-top:2px;padding-top:8px;border-top:1px dashed var(--line-soft);
  font-size:12px;color:var(--ink-3)}
.s-dal-b{padding:3px 9px;font-size:12px;cursor:pointer;color:var(--ink-3);
  background:transparent;border:1px solid var(--line);border-radius:6px;
  font-family:inherit;transition:color .14s,border-color .14s}
.s-dal-b:hover:not(:disabled){color:var(--ink);border-color:var(--ink-3)}
.s-dal-b:disabled{opacity:.5;cursor:default}

.s-name{min-width:0;display:flex;flex-direction:column;gap:3px}
.s-name b{font-size:15.5px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.s-n{align-self:flex-start;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb, var(--amber) 15%, transparent);color:var(--amber)}
.s-name u{text-decoration:none;font-size:11.5px;color:var(--ink-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.s-pick{min-width:0;display:flex;flex-direction:column;gap:7px}
/* teklipler — bir basmada saýlanýar, göterim meňzeşligi görkezýär */
.s-chips{display:flex;flex-wrap:wrap;gap:6px}
.s-chips-none{font-size:12px;color:var(--ink-3)}
.s-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;font:inherit;
  font-size:12.5px;padding:4px 10px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--sunk);color:var(--ink-2);
  transition:all .13s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-chip:hover{border-color:var(--brand);color:var(--brand)}
.s-chip i{font-style:normal;font-size:10.5px;font-weight:700;opacity:.6;
  font-variant-numeric:tabular-nums}
.s-chip.on{border-color:var(--brand);background:var(--brand-bg);color:var(--brand);font-weight:650}
.s-chip.on i{opacity:.85}
/* teklibiň güýji: güýçli — ýaşyl bellik, gowşak — kesikli çyzyk */
.s-chip.strong i{color:var(--green);opacity:.9}
.s-chip.weak{border-style:dashed;opacity:.8}
.s-chip.weak i{color:var(--amber);opacity:.9}
.s-chips-t{align-self:center;font-size:11.5px;color:var(--ink-3);margin-right:1px}

.s-combo{display:flex;gap:6px;min-width:0}
.s-combo input{flex:0 0 34%;min-width:96px}
.s-combo select{flex:1;min-width:0}
.s-pick input,.s-pick select{font-size:13.5px;padding:8px 11px;background:var(--panel);
  border:1.5px solid var(--line);border-radius:8px;color:var(--ink)}
.s-pick select{padding-right:30px}

.s-ai-r{font-size:11.5px;line-height:1.35;cursor:help}
.s-ai-r.ok{color:var(--green)}
.s-ai-r.none{color:var(--amber)}

.s-save{white-space:nowrap;align-self:center}

/* baglanan setir — ýaşyl, düwmede näçe bildiriş açylany ýazylýar */
.s-row.done{border-color:var(--green);
  background:color-mix(in srgb, var(--green) 8%, var(--card))}
.s-row.done .s-pick{opacity:.45;pointer-events:none}
.s-row.done .s-n{background:color-mix(in srgb, var(--green) 16%, transparent);color:var(--green)}
.s-row.done .s-save{background:transparent;border-color:var(--green);color:var(--green)}

/* AI hatary */
.s-ai{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.s-ai-note{font-size:12px;color:var(--ink-3);line-height:1.4}

@media (max-width:860px){
  .s-row{grid-template-columns:1fr;gap:10px}
  .s-save{justify-self:stretch;justify-content:center}
  .s-top{gap:10px}
  .s-stat{width:100%;justify-content:space-between}
}

/* düwmedäki sanaw */
.badge{font-style:normal;font-size:11px;font-weight:750;margin-left:6px;padding:1px 6px;
  border-radius:999px;background:#9a6b0022;color:#9a6b00}
/* ── profiller ─────────────────────────────────────────────────────────── */
.profs[hidden], #prof-one[hidden]{display:none !important}
.p-search{flex:0 1 240px}
.p-sort{flex:0 0 165px}
.prof-list{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.pcard{display:flex;flex-direction:column;gap:9px;padding:14px 15px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);cursor:pointer;
  transition:box-shadow .14s,border-color .14s}
.pcard:hover{box-shadow:var(--shadow-md);border-color:var(--brand)}
.pcard .p-top{display:flex;align-items:center;gap:9px;min-width:0}
.p-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-bg);color:var(--brand);font-weight:700;font-size:14px}
.p-name{font-weight:650;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-tag{font-size:11px;font-weight:650;padding:2px 8px;border-radius:999px;
  background:var(--sunk);color:var(--ink-3)}
.p-tels{display:flex;flex-wrap:wrap;gap:5px}
.p-tel{font-family:var(--mono);font-size:12.5px;padding:3px 8px;border-radius:7px;
  background:var(--sunk);color:var(--ink-2);white-space:nowrap}
.p-tel.wa{color:#128c4a;background:rgba(37,211,102,.12)}
.p-nums{display:flex;gap:14px;font-size:12.5px;color:var(--ink-3);margin-top:auto}
.p-nums b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}

/* ýurt — belginiň halkara kodundan; zolakdan basyp filtre öwrülýär */
.yurt-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.yurt-bar:empty,.yurt-bar[hidden]{display:none}
.yurt-c{font:inherit;font-size:12.5px;line-height:1.25;padding:5px 11px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:border-color .14s,background .14s}
.yurt-c:hover{border-color:var(--brand)}
.yurt-c i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.yurt-c[aria-pressed="true"]{background:var(--brand-bg);border-color:var(--brand);
  color:var(--brand);font-weight:650}
.yurt-c[aria-pressed="true"] i{color:var(--brand)}
/* Kartyň ýokarky setirinde at + ýurt + dasha + kategoriýa bolup biler. Sygmasa
   bellikler aşaky setire geçsin — at gysylyp «Им…» bolup galmasyn. */
.pcard .p-top{flex-wrap:wrap;row-gap:5px}
.p-name{flex:1 1 auto;min-width:9ch}
.p-yurt{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;
  font-weight:600;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--ink-2)}
/* dasha.com.tm-de eýýäm hasaby bar bolan adam */
.p-dasha{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:11px;
  font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;
  background:rgba(37,211,102,.14);color:#128c4a}
.p-dasha::before{content:"✓";font-weight:800}
:root[data-theme="dark"] .p-dasha{color:#4ade80;background:rgba(37,211,102,.16)}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-dasha{color:#4ade80;background:rgba(37,211,102,.16)}
}

.pone{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.pone-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pone-hd .p-av{width:44px;height:44px;font-size:17px}
.pone h3{margin:0;font-size:19px;font-weight:680}
.pone-form{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin:4px 0 16px}
.pone-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-3)}
.pone-form input,.pone-form select,.pone-form textarea{font:inherit;font-size:14px;padding:9px 11px;
  border-radius:var(--r-s);border:1.5px solid var(--line);background:var(--sunk);color:inherit}
.pone-sec{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.pone-sec h4{margin:0 0 9px;font-size:13px;font-weight:650;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em}
.tel-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r-s);
  background:var(--sunk);margin-bottom:6px;flex-wrap:wrap}
.tel-row b{font-family:var(--mono);font-size:14px}
.tel-row .mini{margin-left:auto}
.tel-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tel-add input{font:inherit;font-size:14px;padding:9px 11px;border-radius:var(--r-s);
  border:1.5px solid var(--line);background:var(--sunk);color:inherit;flex:1 1 160px}
.mini{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:550;
  padding:4px 10px;border-radius:7px;border:1px solid var(--line);background:transparent;
  color:inherit;cursor:pointer;opacity:.8}
.mini:hover{opacity:1;border-color:currentColor}
.mini.go{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);opacity:1}
.chip-list{display:flex;flex-wrap:wrap;gap:6px}
.chip-list span{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--sunk);
  color:var(--ink-2)}
.chip-list i{font-style:normal;color:var(--ink-3);font-size:11.5px;margin-left:5px}
.pone-ads{margin-top:8px;font-size:13.5px}
.pone-ads .a-row{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-soft);
  align-items:baseline;flex-wrap:wrap}
.pone-ads .a-row time{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  flex:0 0 96px}
.pone-ads .a-row b{font-weight:600}
.pone-ads .a-row em{font-style:normal;color:var(--ink-3);font-size:12.5px}

/* ── meňzeş bildirişler ────────────────────────────────────────────────── */
.chk.grp{white-space:nowrap}
.chk.grp b{font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:600}
.dup{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;
  padding:2px 8px;border-radius:999px;border:1px solid var(--amber);color:var(--amber);
  background:color-mix(in srgb,var(--amber) 12%,transparent);cursor:pointer;line-height:1.5}
.dup:hover{background:color-mix(in srgb,var(--amber) 22%,transparent)}
.dup-box{margin:8px 0 0;padding:9px 11px;border-radius:var(--r-s);background:var(--sunk);
  font-size:13px;border:1px solid var(--line-soft)}
.dup-box .d-row{display:flex;gap:9px;padding:4px 0;align-items:baseline;flex-wrap:wrap}
.dup-box time{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:0 0 92px}
.dup-box .g{color:var(--ink-2)}

/* ── kadalaşdyrylan ýer ady we aralyk ──────────────────────────────────── */
.c-route .km{font-style:normal;font-size:11.5px;font-weight:650;color:var(--ink-3);
  background:var(--sunk);border-radius:999px;padding:2px 9px;margin-left:auto;
  white-space:nowrap;font-variant-numeric:tabular-nums}
/* Gapdal boşluk üstündäki `.c-route` bilen deň bolmaly (16px) — ýogsa
   katalog ady kartyň gyrasyna ýapyşyp dur. */
.c-std{margin:-4px 0 8px;padding:0 16px;font-size:12px;color:var(--ink-3)}
.c-std u{text-decoration:none;opacity:.65;font-size:11px}
.d-card .rt em.std{display:block;font-style:normal;font-size:12px;color:var(--ink-3);
  margin-top:2px}
.t-km{color:var(--ink-3);font-size:12.5px}

/* bir eye + bir ugur + bir gun -> gaytalanmaýar */
.hz-dubl{color:#6b5bd6;background:#6b5bd614;border-color:#6b5bd633}
.hz-push.dubl{opacity:.55}

/* ── baglanyşyk sahypasy (WhatsApp / Telegram QR) ────────────────────────── */

.link-live { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

#link-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.link-card {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  padding: 14px 16px; border-top: 3px solid var(--p, var(--line));
}
.link-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-card header b { font-size: 15px; }
.link-card footer { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.link-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: none; }
.link-dot.ok   { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.link-dot.wait { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.link-dot.bad  { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
.link-dot.off  { background: var(--ink-3); }

.link-state { font-size: 13px; color: var(--ink-2); }
/* ── žurnal ──────────────────────────────────────────────────────────────
   Terminal däl-de sanaw: her setir bir waka. Wagt we görnüş hemişe şol bir
   ýerde dursun diýip grid ulanylýar — göz aşak ýöräninde sütünler bökmeýär. */

.log-f {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 12px 0 10px;
}
.log-f select, .log-f input {
  font: inherit; font-size: 13px; padding: 6px 9px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
/* Umumy stil meýdanlara 100% giňlik berýär — bu ýerde olar bir hatarda
   durmaly, şoň üçin ölçeg mazmun boýunça goýulýar. */
.log-f select { flex: 0 0 auto; width: auto; }
.log-f input { min-width: 180px; flex: 1 1 180px; width: auto; }
.log-jemi { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log-auto { font-size: 12px; color: var(--ink-2); display: flex; gap: 5px; align-items: center; }

.log-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.log-chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: var(--sunk); color: var(--ink-2); border: 1px solid var(--line);
  user-select: none;
}
.log-chip b { font-variant-numeric: tabular-nums; }
.log-chip:hover { border-color: var(--ink-3); }
.log-chip.bad  { background: rgba(239, 68, 68, .12); color: #b91c1c; border-color: transparent; }
.log-chip.warn { background: rgba(245, 158, 11, .14); color: #92400e; border-color: transparent; }
.log-chip.good { background: rgba(16, 185, 129, .13); color: #047857; border-color: transparent; }
:root[data-theme="dark"] .log-chip.bad  { color: #fca5a5; }
:root[data-theme="dark"] .log-chip.warn { color: #fcd34d; }
:root[data-theme="dark"] .log-chip.good { color: #6ee7b7; }

.log-list {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--card);
}
.log-gun {
  padding: 6px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  background: var(--sunk); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1;
}
.log-r {
  display: grid; grid-template-columns: 62px 92px 128px 1fr; gap: 10px;
  padding: 5px 12px; font-size: 12.5px; line-height: 1.45;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.log-r:last-child { border-bottom: 0; }
.log-w { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log-c { color: var(--ink-3); }
.log-g { color: var(--ink-2); font-weight: 600; }
.log-t {
  color: var(--ink); word-break: break-word;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px;
}
/* Näsazlyk setiri çep gyrasyndan bellenýär — sanawda göz derrew tapýar */
.log-r.bad  { background: rgba(239, 68, 68, .07); box-shadow: inset 3px 0 0 #dc2626; }
.log-r.warn { box-shadow: inset 3px 0 0 #f59e0b; }
.log-r.good { box-shadow: inset 3px 0 0 #10b981; }

@media (max-width: 760px) {
  .log-r { grid-template-columns: 58px 1fr; }
  .log-c, .log-g { grid-column: 2; font-size: 11.5px; }
  .log-t { grid-column: 1 / -1; }
}

.link-user  { font-size: 12px; color: var(--ink-3); }
.link-pid   { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.link-err {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  background: rgba(239, 68, 68, .1); color: #b91c1c; line-height: 1.45;
}
:root[data-theme="dark"] .link-err { color: #fca5a5; }

/* Boşluk hasabaty — habar gelmedik aralyklar. Duýduryş däl-de maglumat:
   gijeki arakesme kadaly, iş wagtyndaky boşluk bolsa ünse mätäç. */
.link-gaps { margin: 10px 0 0; font-size: 12.5px; }
.link-gaps > summary {
  cursor: pointer; color: var(--ink-2); padding: 6px 8px; border-radius: 8px;
  background: rgba(245, 158, 11, .12); list-style: none;
}
.link-gaps > summary::-webkit-details-marker { display: none; }
.link-gaps > summary::before { content: "▸ "; color: var(--ink-3); }
.link-gaps[open] > summary::before { content: "▾ "; }
.link-gaps ul { margin: 8px 0 0; padding: 0 0 0 6px; list-style: none; }
.link-gaps li {
  display: flex; gap: 8px; padding: 3px 0; color: var(--ink-2);
  font-variant-numeric: tabular-nums; line-height: 1.4;
}
.link-gaps li b { color: var(--ink); min-width: 66px; }
.link-gaps li.uzyn b { color: #b91c1c; }
:root[data-theme="dark"] .link-gaps li.uzyn b { color: #fca5a5; }
.link-gaps p { margin: 8px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; }

.link-qr { margin-top: 12px; text-align: center; }
/* QR hemişe ak fonda bolmaly — garaňky temada hem telefon okap bilsin */
.link-qr svg {
  width: 280px; max-width: 100%; height: auto; display: block; margin: 0 auto;
  background: #fff; border-radius: 10px; padding: 10px;
}
.link-qr p { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.45; }

.link-keys p { margin: 10px 0 12px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.link-keys label { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.link-keys input {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink); font-family: inherit;
}
.link-keys .btn { margin-top: 4px; }

/* Telegram: haýsy gruppalar ýygnalsyn — atlar panelden girizilýär */
.link-chats { margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.link-chats label { display: block; font-size: 12px; color: var(--ink-3); }
.link-chats label small { color: var(--ink-3); opacity: .8; font-weight: 400; }
.link-chats textarea {
  display: block; width: 100%; margin-top: 6px; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink); font-family: inherit; line-height: 1.5; resize: vertical;
}
.link-chats .hint { margin: 8px 0 10px; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.link-chats .btn:disabled { opacity: .5; cursor: default; }

/* Düzgün faýly üýtgände çykýan duýduryş zolagy */
.duyduryş {
  grid-column: 1 / -1; margin: 0 0 14px; padding: 12px 16px; border-radius: 10px;
  background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35);
  color: #b91c1c; font-size: 13px; line-height: 1.5;
}
.duyduryş b { display: block; margin-bottom: 2px; }
.duyduryş small { display: block; margin-top: 6px; opacity: .75; font-size: 11.5px; }
:root[data-theme="dark"] .duyduryş { color: #fca5a5; }

/* ── çig habarlar sahypasy ───────────────────────────────────────────────── */

.msg-count { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

#msg-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }

.msg-card {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow);
}
.msg-card:hover { box-shadow: var(--shadow-md); }
.msg-card header { display: flex; align-items: center; gap: 9px; }
.msg-card header b { font-size: 15px; font-weight: 700; letter-spacing: -.01em;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-card header .u-tel { font-size: 13.5px; font-style: normal; color: var(--ink-2);
                          font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg-card time { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums;
                 white-space: nowrap; }
.msg-card footer { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.msg-plat { display: inline-flex; width: 26px; height: 26px; flex: none; border-radius: 8px;
            align-items: center; justify-content: center; background: var(--m-bg); color: var(--m); }
.msg-plat svg { width: 16px; height: 16px; }
.msg-chat { font-size: 13px; color: var(--ink-3); overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }

/* Asyl tekst: setir bölünişi we boşluklar hut gelşi ýaly saklanýar.
   Ölçeg okalar ýaly uly — bu sahypanyň esasy mazmuny şu tekst. */
.msg-text {
  margin: 0; padding: 13px 15px; border-radius: var(--r-s); background: var(--sunk);
  border: 1px solid var(--line-soft);
  font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 300px; overflow-y: auto; flex: 1;
}
.msg-text::-webkit-scrollbar { width: 8px; }
.msg-text::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.mtag { font-size: 12.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px;
        background: var(--sunk); color: var(--ink-3); }
.mtag.dup   { background: rgba(245, 158, 11, .15); color: #b45309; }
.mtag.kind  { background: var(--brand-bg); color: var(--brand); }
.mtag.media { background: rgba(34, 197, 94, .14); color: #15803d; }
:root[data-theme="dark"] .mtag.dup { color: #fbbf24; }
:root[data-theme="dark"] .mtag.media { color: #4ade80; }

@media (max-width: 720px) {
  #msg-list { grid-template-columns: 1fr; }
}

/* Doly çykyş — yzyna gaýtaryp bolmaýan hereket, gyzyl bilen bellenýär */
.btn-cyk { border-color: rgba(239, 68, 68, .45); color: #b91c1c; }
.btn-cyk:hover { background: rgba(239, 68, 68, .1); }
:root[data-theme="dark"] .btn-cyk { color: #fca5a5; }
.mtag.hic { background: rgba(107, 118, 136, .15); color: var(--ink-3); }

/* ── sahypa dolandyryşy ─────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
         margin: 18px 0 8px; }
.pg {
  appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  min-width: 38px; padding: 8px 12px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  transition: background .14s, border-color .14s;
}
.pg:hover:not(:disabled) { background: var(--sunk); }
.pg:disabled { opacity: .45; cursor: default; }
.pg.cur { background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
          opacity: 1; }
.pg-dots { color: var(--ink-3); padding: 0 2px; }
.pg-info { margin-left: auto; font-size: 13px; color: var(--ink-3);
           font-variant-numeric: tabular-nums; }
select.mini { width: auto; padding: 6px 26px 6px 10px; font-size: 13.5px;
              background-position: calc(100% - 12px) 53%, calc(100% - 7px) 53%; }

/* Gözlenen söz tekstiň içinde */
.msg-text mark { background: #fde047; color: #1c1917; border-radius: 3px;
                 padding: 0 2px; font-weight: 650; }
:root[data-theme="dark"] .msg-text mark { background: #a16207; color: #fff7ed; }

/* «×N gruppada» — basylýan bellik */
.mtag-btn { appearance: none; border: 0; font: inherit; cursor: pointer; }
.mtag-btn:hover { filter: brightness(1.08); text-decoration: underline; }

/* Açylýan gruppa sanawy — atlar kesilmeýär, iki setire ýazylýar */
.msg-grps { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px;
            border: 1px dashed var(--line); border-radius: var(--r-s);
            background: var(--sunk); max-height: 240px; overflow-y: auto; }
.msg-grps small { color: var(--ink-3); font-size: 13px; }
.grp-setir { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0;
             border-bottom: 1px solid var(--line-soft); }
.grp-setir:last-child { border-bottom: 0; }
.grp-maglumat { min-width: 0; flex: 1; }
.grp-maglumat b { display: block; font-size: 13px; font-weight: 650;
                  line-height: 1.35; overflow-wrap: anywhere; }
.grp-alt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
           margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.grp-alt time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.grp-tel { color: var(--link); text-decoration: none; font-variant-numeric: tabular-nums;
           white-space: nowrap; }
.grp-tel:hover { text-decoration: underline; }
.grp-plat { display: inline-flex; width: 20px; height: 20px; flex: none;
            border-radius: 6px; align-items: center; justify-content: center;
            background: var(--m-bg); color: var(--m); margin-top: 1px; }
.grp-plat svg { width: 12px; height: 12px; }

/* ── sözlükler sahypasy ───────────────────────────────────────────────── */
.dict-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.dict-tabs .dt {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--fg); cursor: pointer; font: inherit;
}
.dict-tabs .dt[aria-current="true"] { background: var(--acc); color: #fff; border-color: var(--acc); }
.dict-tabs .dt .n { opacity: .7; margin-left: 6px; font-size: .85em; }
.dict-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.dict-add input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
                  background: var(--card); color: var(--fg); min-width: 160px; }
.dict-t { width: 100%; border-collapse: collapse; font-size: .93rem; }
.dict-t th, .dict-t td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.dict-t th { font-weight: 600; opacity: .75; }
.dict-t .r { text-align: right; white-space: nowrap; }
.dict-t tr.off { opacity: .45; text-decoration: line-through; }
.dict-t .tag { font-size: .78em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); }
.dict-t .tag.kod { opacity: .7; }
.dict-t .tag.panel { background: var(--acc); color: #fff; border-color: var(--acc); }

/* ── sözlük toparlary (ýer atlary / kuzow) ────────────────────────────── */
.dg { border: 1px solid var(--line); border-radius: 10px; background: var(--card);
      margin-bottom: 8px; }
.dg > summary { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
                cursor: pointer; list-style: none; }
.dg > summary::-webkit-details-marker { display: none; }
.dg > summary::before { content: "▸"; opacity: .5; transition: transform .15s; }
.dg[open] > summary::before { transform: rotate(90deg); }
.dg > summary b { font-size: 1.02em; }
.dg-n { font-size: .82em; opacity: .65; }
.dg-body { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 12px 32px;
           border-top: 1px solid var(--line); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 10px;
        border: 1px solid var(--line); border-radius: 999px; font-size: .9em; }
.chip.panel { border-color: var(--acc); }
.chip.off { opacity: .45; text-decoration: line-through; }
.chip button { border: 0; background: none; color: inherit; cursor: pointer;
               font-size: 1.05em; line-height: 1; padding: 0 3px; opacity: .6; }
.chip button:hover { opacity: 1; }
.chip.add { padding-left: 4px; }
.chip.add input { border: 0; background: none; color: var(--fg); font: inherit;
                  width: 130px; outline: none; padding: 2px 6px; }
.dict-t .tag.ýer { opacity: .8; font-style: italic; }
.dict-t .dim { opacity: .5; font-size: .85em; }
.teklip-bar { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; flex-wrap: wrap; }
.dict-t .sug-g, .dict-t .sug-k { padding: 3px 6px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--card); color: var(--fg); font: inherit; max-width: 140px; }
.dt-sug { border-style: dashed !important; }
.wa-text { width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--fg); font: inherit;
  resize: vertical; }
.wa-note { font-size: 12px; color: var(--ink-3); margin: 6px 0 0; line-height: 1.4; }

/* ── ýük/ulag seljermesi ─────────────────────────────────────────────────
   Çepde habaryň asyl teksti (üýtgedilmän, `pre-wrap`), sagda iki gatlagyň
   jogaby we karar düwmeleri. Tapawutly setirler gyzyl gyra bilen bellenýär —
   sanawda göz olary birinji tapýar. */

.kind-stat { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.kind-stat .ks {
  font-size: 13px; color: var(--ink-2); background: var(--sunk);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
}
.kind-stat .ks b { color: var(--ink); }
.kind-stat .ks.warn b { color: var(--amber); }
.kind-stat .ks.bad  b { color: #d64545; }
.kind-stat .ks.ok   b { color: var(--green); }

.kc {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow);
  transition: opacity .35s ease;
}
.kc.jedel { border-left: 3px solid #d64545; }
.kc.bellendi { opacity: .72; }

.kc-blok {
  font: 14px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word;
  background: var(--sunk); border-radius: var(--r-s); padding: 11px 13px;
  max-height: 260px; overflow: auto;
}
.kc-yan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kc-ugur { font-weight: 650; font-size: 15px; }
.kc-cesme { font-size: 12px; color: var(--ink-3); }
.kc-shaha { font-size: 12px; color: var(--ink-3); margin-top: -3px; }
.kc-sebap {
  font-size: 13px; color: var(--ink-2); border-left: 2px solid var(--line);
  padding-left: 9px; margin-top: -2px;
}
.kc-jog { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
          color: var(--ink-3); margin-top: 4px; }
.kc-jog .kj b { font-size: 14.5px; }
.kynam { font-style: normal; font-size: 12px; color: var(--ink-3); }
.kj.cak { font-size: 11.5px; color: var(--amber); background: rgba(194,113,12,.12);
          border-radius: 6px; padding: 1px 7px; }

.k-yuk  { color: var(--brand); }
.k-ulag { color: var(--green); }
.k-dal  { color: var(--ink-3); }

.kc-dugme { display: flex; gap: 7px; margin-top: 8px; }
.kc-dugme .k-b { flex: 1; justify-content: center; font-weight: 600; }
.kc-dugme .k-yuk  { border-color: var(--brand); color: var(--brand); }
.kc-dugme .k-ulag { border-color: var(--green); color: var(--green); }
.kc-dugme .k-yuk:hover  { background: var(--brand); color: #fff; }
.kc-dugme .k-ulag:hover { background: var(--green); color: #fff; }
.kc-dugme .k-dal { flex: 0 0 auto; }
.kc-adam { display: flex; align-items: center; gap: 9px; margin-top: 8px;
           font-size: 13.5px; color: var(--green); }

@media (max-width: 900px) { .kc { grid-template-columns: 1fr; } }
.dict-t .pet { color: var(--warn, #e0a33e); }
.dict-t .kat { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.dict-t .kat b.ok { color: #4ac97e; }
.dict-t .kat b.pes { color: var(--ink-3); }

/* Birnäçe WhatsApp akkaunty: kartda akkauntyň ady we täze akkaunt goşmak */
.link-hasap { padding: 2px 8px; font-size: 12px; border-radius: 20px;
  background: color-mix(in srgb, var(--p) 16%, transparent); color: var(--p); }
.link-gos { border-style: dashed; }
.link-gos > b { font-size: 14px; }
.link-gos > p { margin: 6px 0 12px; font-size: 12.5px; color: var(--ink-3);
  line-height: 1.5; }
.link-gos-row { display: flex; gap: 8px; align-items: center; }
.link-gos-row input { flex: 1; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink); font-family: inherit; }

/* ── «Adresler» sahypasy ───────────────────────────────────────────────────
   Çepde basgançakly agaç (ýurt → welaýat → şäher), sagda saýlanan adresiň
   kartoçkasy. Agaç uzyn — 1265 ýazgy, şoň üçin diňe açylan şaha çyzylýar. */
.adr-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 0 12px; position: sticky; top: var(--head-h, 65px); z-index: 15;
  background: var(--bg); }
.adr-bar input[type=search] { flex: 1; min-width: 260px; padding: 9px 12px;
  font-size: 13.5px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--panel); color: var(--ink); font-family: inherit; }
.adr-chk { display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.adr-jem { font-size: 12.5px; color: var(--ink-3); margin-left: auto; }

.adr-split { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: 14px; align-items: start; }
.adr-tree, .adr-side { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 8px;
  max-height: calc(100vh - 190px); overflow: auto; }
.adr-side { padding: 16px; }

/* Bir setir — bir adres. `--c` çuňluk: her basgançak 14px içerik girdi. */
.adr-row { display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 8px 5px calc(8px + var(--c, 0) * 14px); border: 0;
  background: none; color: var(--ink); font: inherit; text-align: left;
  border-radius: 8px; cursor: pointer; }
.adr-row:hover { background: var(--sunk); }
.adr-row[aria-current=true] { background: var(--brand-bg); color: var(--brand); }
.adr-ac { flex: 0 0 14px; color: var(--ink-3); font-size: 10px; line-height: 1;
  transition: transform .12s; }
.adr-ac.acyk { transform: rotate(90deg); }
.adr-ac.yok { visibility: hidden; }
.adr-at { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 13.5px; }
.adr-n { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.adr-n b { color: var(--ink-2); font-weight: 600; }
.adr-yok { font-size: 11px; color: var(--amber); }   /* koordinatsyz */

/* Sag kartoçka */
.adr-side h3 { margin: 0 0 2px; font-size: 17px; }
.adr-zynjyr { font-size: 12.5px; color: var(--ink-3); margin: 0 0 12px; }
.adr-zynjyr a { color: var(--link); cursor: pointer; }
.adr-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: 13px; margin: 0 0 14px; }
.adr-kv dt { color: var(--ink-3); }
.adr-kv dd { margin: 0; }
.adr-koord { font-family: var(--mono); font-size: 12.5px; }
.adr-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); margin: 14px 0 6px; }
.adr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adr-chip { font-size: 12px; padding: 2px 8px; border-radius: 20px;
  background: var(--sunk); border: 1px solid var(--line-soft); }
.adr-chip i { font-style: normal; color: var(--ink-3); margin-left: 4px; }
.adr-ugur { display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--line-soft); }
.adr-ugur span { color: var(--ink-3); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.adr-ugur a { color: var(--link); cursor: pointer; }

/* Meňzeşler — jübüt-jübüt, her birinde «birleşdir» düwmesi */
.adr-dupe { border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 10px 12px; margin-bottom: 9px; background: var(--panel); }
.adr-dupe-h { font-size: 12px; color: var(--ink-3); margin-bottom: 7px; }
.adr-dupe-h b { color: var(--amber); }
.adr-dupe-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adr-dupe-r .p { flex: 1; min-width: 190px; font-size: 13px; }
.adr-dupe-r .p small { display: block; color: var(--ink-3); font-size: 11.5px; }
.adr-dupe-r .ok { color: var(--ink-3); }

/* ── «Görnüş sözleri» sahypasy ─────────────────────────────────────────────
   Ýokarda iki guty: çep — korpusyň ýagdaýy (näçesi alamatly, näçesi çakdan),
   sag — synag. Aşagynda toparlar boýunça söz sanawlary. */
.ksz-ust { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 14px; margin-bottom: 16px; align-items: start; }
.ksz-stat, .ksz-synag { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 16px; }
.ksz-synag label { display: block; font-size: 12px; color: var(--ink-3);
  margin-bottom: 6px; }
.ksz-synag textarea { width: 100%; padding: 9px 11px; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg);
  color: var(--ink); font-family: inherit; resize: vertical; }
.ksz-synag-r { display: flex; align-items: center; gap: 10px; margin-top: 9px;
  flex-wrap: wrap; font-size: 13px; }

.ksz-olcheg { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.ksz-olcheg b { font-size: 26px; line-height: 1; }
.ksz-olcheg span { font-size: 12.5px; color: var(--ink-3); }
.ksz-bar { display: flex; height: 9px; border-radius: 20px; overflow: hidden;
  background: var(--sunk); margin-bottom: 10px; }
.ksz-bar i { display: block; }
.ksz-bar i.ok  { background: var(--green); }
.ksz-bar i.cak { background: var(--amber); }
.ksz-shaha { display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 2px 0; }
.ksz-shaha.cak { color: var(--amber); }
.ksz-shaha span { font-variant-numeric: tabular-nums; color: var(--ink-3); }

.ksz-toparlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
  gap: 14px; align-items: start; }
.ksz-t { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 13px 15px; }
.ksz-t h4 { margin: 0 0 2px; font-size: 14.5px; }
.ksz-t p.ac { margin: 0 0 10px; font-size: 12px; color: var(--ink-3);
  line-height: 1.45; }
.ksz-soz { display: flex; align-items: center; gap: 8px; padding: 4px 0;
  border-top: 1px solid var(--line-soft); font-size: 13px; }
.ksz-soz code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.ksz-soz.ochuk code { text-decoration: line-through; color: var(--ink-3); }
.ksz-soz em { font-style: normal; font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.ksz-soz button { border: 0; background: none; cursor: pointer; padding: 2px 5px;
  color: var(--ink-3); font-size: 12px; border-radius: 6px; }
.ksz-soz button:hover { background: var(--sunk); color: var(--ink); }
.ksz-gos { display: flex; gap: 7px; margin-top: 10px; }
.ksz-gos input { flex: 1; min-width: 0; padding: 7px 9px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink); font-family: inherit; }
.ksz-kod { font-size: 11px; color: var(--ink-3); }
@media (max-width: 880px) { .ksz-ust { grid-template-columns: 1fr; } }

/* ── «Gabatlaşma» sahypasy ────────────────────────────────────────────────
   Her setir bir jübüt: çepde ýük, sagda ulag, ortada sebäbi (näçe km, näçe
   sagat tapawut, kuzow gabat geldimi). */
.jbt-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 0 14px; font-size: 13px; position: sticky; top: var(--head-h, 65px);
  z-index: 15; background: var(--bg); }
.jbt-bar label { display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-3); }
.jbt-bar select { padding: 6px 8px; font-size: 13px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--ink);
  font-family: inherit; }
.jbt-stat { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }

.jbt-j { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: stretch; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 12px 14px;
  margin-bottom: 10px; }
.jbt-k { min-width: 0; }
.jbt-k b { display: block; font-size: 14px; margin-bottom: 3px; }
.jbt-k .yer { font-size: 12px; color: var(--ink-3); margin-bottom: 5px; }
.jbt-k .cip { display: flex; flex-wrap: wrap; gap: 5px; }
.jbt-k .cip span { font-size: 11.5px; padding: 1px 7px; border-radius: 20px;
  background: var(--sunk); border: 1px solid var(--line-soft); }
.jbt-k .kim { font-size: 11.5px; color: var(--ink-3); margin-top: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jbt-k.yuk b  { color: var(--brand); }
.jbt-k.ulag b { color: var(--green); }

.jbt-orta { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; min-width: 116px;
  border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  padding: 0 12px; }
.jbt-bal { font-size: 20px; font-weight: 700; line-height: 1; }
.jbt-bal.ok  { color: var(--green); }
.jbt-bal.orta { color: var(--amber); }
.jbt-sebap { font-size: 11px; color: var(--ink-3); text-align: center;
  line-height: 1.4; }
@media (max-width: 820px) {
  .jbt-j { grid-template-columns: 1fr; }
  .jbt-orta { border: 0; border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft); padding: 8px 0;
    flex-direction: row; gap: 10px; }
}

/* Gabatlaşma sahypasynyň süzgüç meýdanlary we asyl habary */
.jbt-bar input[type=search] { width: 150px; padding: 6px 9px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--ink); font-family: inherit; }
.jbt-k .plat { font-size: 10.5px; padding: 1px 6px; border-radius: 20px;
  margin-right: 5px; vertical-align: 1px; }
.jbt-k details.raw { border-top: 1px solid var(--line-soft); margin-top: 7px; }
.jbt-k details.raw summary { padding: 6px 0; font-size: 12px; }
.jbt-k details.raw pre { padding: 0 0 8px; font-size: 12px; line-height: 1.55;
  max-height: 240px; }

/* Toparlanan görnüş: bir ýük — çepde, oňa gabat gelen ulaglar — sagda */
.jbt-t { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr);
  gap: 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 13px 15px;
  margin-bottom: 12px; align-items: start; }
.jbt-yuk { border-right: 1px solid var(--line-soft); padding-right: 14px; }
.jbt-h { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); margin-bottom: 8px; }
.jbt-u { display: grid; grid-template-columns: 34px minmax(0,1fr) 92px; gap: 10px;
  align-items: start; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.jbt-u:first-of-type { border-top: 0; padding-top: 0; }
.jbt-u .jbt-bal { font-size: 15px; }
.jbt-u .jbt-sebap { text-align: right; }
.jbt-galan { font-size: 12px; color: var(--ink-3); padding-top: 8px;
  border-top: 1px solid var(--line-soft); }
@media (max-width: 820px) {
  .jbt-t { grid-template-columns: 1fr; }
  .jbt-yuk { border-right: 0; border-bottom: 1px solid var(--line-soft);
    padding-right: 0; padding-bottom: 10px; }
  .jbt-u { grid-template-columns: 30px minmax(0,1fr); }
  .jbt-u .jbt-sebap { grid-column: 2; text-align: left; }
}

/* Karta ýüklenmedik ýagdaýy — öň bu ýerde diňe boşluk galýardy */
.karta-yok { padding: 18px 20px; border: 1.5px dashed var(--line);
  border-radius: var(--r-s); background: var(--sunk); color: var(--ink-2);
  font-size: 14px; line-height: 1.55; }
.karta-yok b { color: var(--ink); }
.karta-yok p { margin: 8px 0 0; }
.karta-yok code { display: block; margin: 8px 0; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; user-select: all; }
.route-bellik { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.karta-yuk { display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 160px; color: var(--ink-3); font-size: 14px; }

/* ── baha analitikasy ─────────────────────────────────────────────────────── */
/* Ulag eýesi nukdaýnazaryndan: «arzan» — fraht bazardan pes (peýdasyz),
   «gymmat» — bazardan ýokary (peýdaly). */
.bz { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px;
      white-space: nowrap; margin-left: 4px; background: var(--sunk); color: var(--ink-3); }
.bz-arzan  { color: var(--amber); background: rgba(194,113,12,.12); }
.bz-gymmat { color: var(--green); background: rgba(21,163,74,.12); }
.bz-bazar  { color: var(--ink-2); }
.bhs-tbl { overflow-x: auto; }
.bhs-tbl .tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.bhs-tbl th { text-align: left; font-weight: 600; color: var(--ink-3); padding: 6px 10px;
              border-bottom: 1px solid var(--line); white-space: nowrap; }
.bhs-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
.bhs-tbl .t-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── awtopark ─────────────────────────────────────────────────────────────── */
.apk-form { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
            padding: 12px 0 8px; }
.apk-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
                  color: var(--ink-3); }
.apk-form input, .apk-form select { min-width: 120px; padding: 7px 9px; font: inherit;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-s); }
.apk-form .ac-wrap { min-width: 180px; }
.apk-btns { display: flex; gap: 8px; }
.apk-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 16px; }
.apk-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
            padding: 10px 14px; background: var(--card); border: 1px solid var(--line);
            border-radius: var(--r-s); }
.apk-card.on { border-color: var(--brand); box-shadow: var(--shadow); }
.apk-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 10px; }
.apk-h label { font-size: 12px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.apk-far td { opacity: .72; }

/* «Ýükleri tap» netijesi — saýlanan ulag kartynyň göni aşagynda */
#apk-list > .apk-match { margin: -4px 0 6px 18px; padding: 10px 12px 12px;
  border-left: 3px solid var(--brand); background: var(--sunk); border-radius: 0 var(--r-s) var(--r-s) 0; }
#apk-list > .apk-match .apk-h { margin-top: 0; }
.apk-ipuc { font-size: 12px; margin: 0 0 8px; }
.apk-yk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* tapylan ýükler öz gutusynda aýlanýar, aşagynda sahypalar */
.apk-yk-scroll { max-height: min(62vh, 640px); overflow-y: auto; overscroll-behavior: contain;
  padding-right: 4px; scrollbar-gutter: stable; }
.apk-yk-pager { margin-top: 10px; }
.apk-yi { padding: 8px 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-s); cursor: pointer; }
.apk-yi:hover, .apk-yi:focus-visible { border-color: var(--brand); outline: none; }
.apk-yi.open { border-color: var(--brand); box-shadow: var(--shadow); }
.apk-yi.apk-far { opacity: .72; }
/* görlen ýük / ýükleri gözlenen ulag — ýaşyl ýeňil fon + çep zolak + «✓ görüldi» */
.apk-gor { display: none; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); }
.apk-yi.gorlen, .apk-card.gorlen {
  background: color-mix(in srgb, var(--green) 9%, var(--card));
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  box-shadow: inset 4px 0 0 var(--green); }
.apk-yi.gorlen .apk-gor, .apk-card.gorlen .apk-gor { display: inline-block; }
.apk-yi.gorlen.open, .apk-card.gorlen.on { border-color: var(--brand);
  box-shadow: inset 4px 0 0 var(--green), var(--shadow); }
.apk-yi-r { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.apk-bal { min-width: 30px; text-align: center; padding: 1px 6px; border-radius: 6px;
  background: var(--brand-bg); color: var(--brand); font-variant-numeric: tabular-nums; }
.apk-yi-m { min-width: 0; }
.apk-yi-p { white-space: nowrap; font-variant-numeric: tabular-nums; }
.apk-yi-d { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px;
  font-size: 12.5px; color: var(--ink-3); }
.apk-yi-d a { color: inherit; }
.apk-yi-c { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apk-yi-ok { color: var(--ink-3); transition: transform .15s; }
.apk-yi.open .apk-yi-ok { transform: rotate(180deg); }
.apk-yi-hw { position: relative; }
.apk-yi-x { position: absolute; top: 14px; right: 8px; padding: 3px 10px; font-size: 12px; }
.apk-yi-h { margin: 8px 0 0; padding: 10px 84px 10px 12px; background: var(--sunk); border-radius: var(--r-s);
  white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px; line-height: 1.45;
  cursor: text; max-height: 360px; overflow: auto; }
@media (max-width: 640px) { #apk-list > .apk-match { margin-left: 0; } }

/* ── ýüküň ýaşy ───────────────────────────────────────────────────────────── */
.yas { font-size: 11px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
       background: var(--sunk); color: var(--ink-3); }
.yas-taze { color: var(--green); background: rgba(21,163,74,.12); }
.yas-orta { color: var(--ink-2); }
.yas-kone { color: var(--amber); background: rgba(194,113,12,.12); }
.card:has(.yas-kone) { opacity: .72; }

/* ── iberijiniň ynamlylygy ────────────────────────────────────────────────── */
.yn { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 0 6px; margin-left: 4px;
      border-radius: 999px; color: var(--ink-3); background: var(--sunk); }
.yn-ok  { color: var(--green); background: rgba(21,163,74,.12); }
.yn-bad { color: #c0392b; background: rgba(192,57,43,.12); }

.gd-eksi { color: #c0392b; }
.apk-param { margin: 4px 0 8px; font-size: 13px; }
.apk-param summary { cursor: pointer; color: var(--ink-3); }

/* ── isleg kartasy ────────────────────────────────────────────────────────── */
.isl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin: 12px 0; }
.isl h3 { font-size: 13.5px; margin: 14px 0 6px; color: var(--ink-2); }
.gd-plus { color: var(--green); }

/* ── ýük görnüşleri ───────────────────────────────────────────────────────── */
.ygr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px;
            align-items: start; margin: 10px 0 20px; }
.ygr-side { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
            padding: 12px 14px; position: sticky; top: 8px; max-height: calc(100vh - 150px);
            overflow-y: auto; }
.ygr-side h3 { margin: 0 0 2px; font-size: 16px; }
.ygr-side h4 { margin: 14px 0 5px; font-size: 12px; text-transform: uppercase;
               letter-spacing: .04em; color: var(--ink-3); }
.ygr-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px;
           color: var(--ink-2); margin: 6px 0 2px; }
.ygr-sum b { color: var(--ink); }
.ygr .tbl tr.tr { cursor: pointer; }
/* Gyradaky (400px) gutuda uzyn ýer atlary («Khasavyurtovsky District») baha
   sütünini gysyp çykarýardy — şu ýerde ugur ady setire bölünýär. */
.ygr-side .t-ugur { white-space: normal; }
.ygr-bar { display: block; height: 4px; border-radius: 999px; background: var(--brand);
           opacity: .55; min-width: 2px; margin-top: 3px; }
.ygr-ad { font-weight: 600; }
.ygr-yaz { display: flex; flex-wrap: wrap; gap: 5px; }
.ygr-yaz span { font-size: 11.5px; border: 1px solid var(--line); border-radius: 999px;
                padding: 1px 8px; color: var(--ink-2); }
/* Giriş / çykyş seljermesi: üç kartoçka + ýurt jübütleri. Reňkler ýük
   kartasyndaky bilen deň — mämişi «ugraýan», gök «gelýän». */
.ygr-ugur-hd { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.ygr-kart { flex: 1 1 160px; text-align: left; font: inherit; cursor: pointer;
            border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
            color: inherit; padding: 9px 12px 11px; }
.ygr-kart b { display: block; font-size: 20px; line-height: 1.15; }
.ygr-kart span { font-size: 12px; color: var(--ink-3); }
.ygr-kart i { display: block; height: 3px; border-radius: 999px; margin-top: 7px;
              min-width: 2px; background: currentColor; opacity: .5; }
.ygr-kart:hover { border-color: var(--ink-3); }
.ygr-kart[aria-pressed="true"] { border-color: currentColor; background: var(--sunk); }
.ygr-k-cyk { color: #ea580c; }
.ygr-k-gel { color: #2563eb; }
.ygr-k-ic  { color: var(--ink-2); }
.ygr-k-cyk span, .ygr-k-gel span, .ygr-k-ic span { color: var(--ink-3); }
.ygr-ugur-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
                gap: 2px 18px; margin-bottom: 6px; }
.ygr-ugur-box > div { min-width: 0; }
.ygr-ugur-box h4 { margin: 10px 0 2px; font-size: 12px; text-transform: uppercase;
                   letter-spacing: .04em; color: var(--ink-3); }
.ygr-ok { font-style: normal; opacity: .4; margin: 0 4px; }
.ygr-h { margin: 12px 0 5px; font-size: 12px; text-transform: uppercase;
         letter-spacing: .04em; color: var(--ink-3); }
.ygr .ygr-cyk b, .ygr .ygr-cyk { color: #ea580c; }
.ygr .ygr-gel b, .ygr .ygr-gel { color: #2563eb; }

@media (max-width: 900px) {
  .ygr-cols { grid-template-columns: 1fr; }
  .ygr-side { position: static; max-height: none; }
}

/* ── süzgüç zolagy (Baha / Isleg) ─────────────────────────────────────────── */
.flt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.flt input, .flt select { padding: 6px 9px; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); }
.flt input[type=search] { min-width: 150px; }

/* Süzgüç zolagy: umumy `width:100%` düzgünini ýatyrýar — hemmesi bir hatarda */
.flt { flex-wrap: wrap; }
.flt input[type="search"], .flt select { width: auto; flex: 0 0 auto; padding: 6px 30px 6px 10px;
  font-size: 13px; border-width: 1px; }
.flt input[type="search"] { padding-right: 10px; width: 170px; min-width: 0; }
.flt .btn { flex: 0 0 auto; }

/* ── gözleg meňzeşligi saýlawy (sahypanyň başynda) ────────────────────────── */
.g-sim { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.g-sim svg { width: 15px; height: 15px; flex: 0 0 auto; }
.g-sim select { width: auto; padding: 5px 28px 5px 9px; font-size: 13px; border-width: 1px; }

/* ── awtopark: Excel import ───────────────────────────────────────────────── */
.apk-imp { margin: 10px 0 6px; padding: 10px 12px; border: 1.5px dashed var(--line);
           border-radius: var(--r-s); background: var(--sunk); }
.apk-imp.drop { border-color: var(--brand); background: var(--brand-bg); }
.apk-imp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.apk-imp-bar label.btn { cursor: pointer; }
.apk-imp-bar .dim { font-size: 12px; flex: 1 1 320px; }
.apk-imp .apk-h { margin-top: 10px; }

/* ── habardan çykarylan şertler ───────────────────────────────────────────── */
.atr { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
       background: var(--brand-bg); color: var(--brand); }
.atr-dzblok, .atr-razresheniya { background: rgba(21,163,74,.12); color: var(--green); }
.atr-shoshilinch { background: rgba(192,57,43,.12); color: #c0392b; }
.atr-toleg_gornushi, .atr-awans, .atr-toleg_yeri { background: rgba(194,113,12,.12); color: var(--amber); }
.atrf { position: relative; font-size: 13px; }
.atrf summary { cursor: pointer; list-style: none; padding: 6px 12px; border: 1px solid var(--line);
                border-radius: var(--r-s); background: var(--panel); color: var(--ink-2); }
.atrf[open] summary { border-color: var(--brand); }
.atrf-box { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 240px;
            padding: 10px 12px; background: var(--panel); border: 1px solid var(--line);
            border-radius: var(--r-s); box-shadow: var(--shadow-md); display: flex;
            flex-direction: column; gap: 6px; }
.atrf-box label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* ── Kuzow süzgüji — birnäçe görnüşi bile saýlap bolýan açylýan sanaw
   (Şertler-iň .atrf-box-y bilen bir stil), harp tapawudy serwerde
   birleşdirilýär (bkz. web_server.py kuzow_facet). ────────────────────── */
.field.kuzow-dd > summary { flex: 1; list-style: none; cursor: pointer; display: flex;
  align-items: center; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-s);
  padding: 11px 13px 11px 35px; transition: border-color .14s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field.kuzow-dd > summary::-webkit-details-marker { display: none; }
.field.kuzow-dd[open] > summary { border-color: var(--brand); }
.field.kuzow-dd .atrf-box { max-height: 320px; overflow-y: auto; }

/* ── Dasha (parser API) profil belligi ─────────────────────────────────── */
.p-dasha.warn { background: #fff4d6; color: #8a5a00; border-color: #f0d28a; }
.prof-more { display: block; margin: 14px auto; }
.dh-sec .dh-row { padding: 8px 0; border-top: 1px solid rgba(128,128,128,.18); }
.dh-sec .dh-row:first-of-type { border-top: 0; }
.dh-prof { margin: 8px 0 0 12px; padding: 8px 10px; border-radius: 8px;
           background: rgba(128,128,128,.08); }
.dh-users { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dh-users .off { opacity: .5; text-decoration: line-through; }

/* ── ixcam süzgüç zolagy: sticky däl, «Ýükler/Ulaglar» tabyny gizle (gapdalda bar),
   meýdanlar we setirler gysga ── */
.toolbar-sticky { position: static; border-bottom: 0; padding-bottom: 0; }
/* Giň ekranda süzgüç zolagy ýokarda ýapyşýar (skrol edilende); dar ekranda (<=900px) meýdanlar
   köp hatara ýaýrap ekrany tutýar, şonuň üçin static galýar. */
@media (min-width: 901px) {
  .toolbar-sticky { position: sticky; top: var(--head-h, 65px); z-index: 20; background: var(--bg);
                    padding-bottom: 6px; border-bottom: 1px solid var(--line-soft);
                    box-shadow: 0 6px 10px -8px rgba(0,0,0,.45); }
}
.toolbar-sticky > .tabs { display: none; }
.body { padding-top: 12px; }
.filters { gap: 6px; margin-bottom: 6px; }
/* Süzgüçler bir hatara sygsyn: meýdanlaryň iň az ini kiçeldildi (öň 140px → 100px);
   ýerine görä giňelýär, ekran has dar bolsa (<~1350px) özi aşak geçýär. */
.filters { align-items: center; }
.filters .field { flex: 1 1 100px; min-width: 100px; max-width: 190px; }
.filters .field.f-q { flex: 3 1 190px; min-width: 170px; max-width: none; }
.filters .field.f-sort { flex: 0 1 132px; min-width: 118px; max-width: 150px; margin-left: 0; }
.filters .field.f-sort + .field.f-sort { flex-basis: 108px; min-width: 100px; }
.filters .field > svg { left: 9px; }
.filters .field > svg ~ input, .filters .field > svg ~ select { padding-left: 28px; }
.filters .field input[type="search"], .filters .field select { padding-right: 22px; }
.filters .field.f-q input[type="search"] { padding-right: 38px; }
.filters .field select { background-position: calc(100% - 13px) 53%, calc(100% - 8px) 53%; }
.filters .msgs { padding: 3px 4px; gap: 3px; flex: 0 0 auto; }
.filters input[type="search"], .filters select { padding-top: 7px; padding-bottom: 7px; font-size: 13.5px; }
.filters .field svg { width: 15px; height: 15px; }
.bar { gap: 8px; margin-bottom: 8px; }
.bar .chk { font-size: 13.5px; }
.bar .btn-sm { padding: 5px 11px; font-size: 13px; }
.msgs:empty { display: none; }

.filters input[type="search"]::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── karta: habarda ýazylan at we ýalňyş ýer duýduryşy ── */
.route-raw { padding: 10px 20px 0; font-size: 13.5px; color: var(--ink-2); }
.route-raw svg { width: 14px; height: 14px; }
.route-raw b { color: var(--ink); font-weight: 650; }
.route-warn { margin: 8px 20px 4px; padding: 8px 12px; border-radius: 8px; font-size: 13.5px;
              background: #fff4d6; color: #7a4d00; border: 1px solid #f0d28a; }

/* ── karta: el bilen marşrut düzetmek ── */
.route-fix { display: flex; align-items: center; gap: 10px; padding: 8px 20px 0; }
.route-fix-badge { font-size: 12.5px; font-weight: 650; padding: 3px 10px; border-radius: 999px;
                    background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.route-draw-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                   padding: 8px 20px; margin: 4px 0; background: var(--sunk);
                   border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.route-draw-hint { font-size: 12.5px; color: var(--ink-2); }
.route-draw-hint b { color: var(--ink); }
.closed-icon { font-size: 16px; line-height: 22px; text-align: center; }

/* ── Baha: gün-günden orta baha ── */
.bhs-gun { margin: 6px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
           background: var(--panel); }
.bhs-gun-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bhs-gun-hd h3 { margin: 0; font-size: 15px; }
.bhs-gun-hd select { width: auto; padding: 5px 28px 5px 10px; font-size: 13px; }
.bhs-gun-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 10px; }
.bg-tile { padding: 9px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line-soft); }
.bg-tile u { display: block; text-decoration: none; font-size: 12px; color: var(--ink-3); }
.bg-tile b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.bg-tile em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); }
.bg-d.up { color: #c2410c; } .bg-d.dn { color: #15803d; }
.bg-bar { width: 32%; padding-right: 14px; }
.bg-bar span { display: block; height: 9px; border-radius: 6px; background: var(--brand); opacity: .75; }
.bg-today td { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.bg-bos td { color: var(--ink-3); }

/* ── Bazar we Müşderiler sahypalary (panel_bazar.py) ─────────────────────── */
.bzr-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 16px; }
.bzr-kpi div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.bzr-kpi b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.bzr-kpi span { font-size: 12px; color: var(--ink-3); }
.bzr-ynam { font-size: 11.5px; font-weight: 650; padding: 1px 7px; border-radius: 999px; background: var(--sunk); }
.mus-acar { margin: 8px 0 14px; padding: 12px 14px; border: 1px dashed var(--acc); border-radius: 12px; }
.mus-acar code { display: block; margin: 6px 0; padding: 8px; background: var(--sunk); border-radius: 8px;
  font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.mus-off td { opacity: .5; }
.tbl .btn-sm + .btn-sm { margin-left: 4px; }
#bzr h3, #mus h3 { margin: 22px 0 6px; }
.adr-kv .adr-dil { width: 100%; max-width: 260px; padding: 4px 7px; font: inherit; font-size: 13px;
  color: var(--ink); background: var(--sunk); border: 1px solid var(--line); border-radius: 6px; }
.bhs-son { max-height: 460px; overflow-y: auto; }
.bhs-son thead th { position: sticky; top: 0; background: var(--panel); }
.bhs-sonlar { white-space: nowrap; }
.bhs-sonlar span { display: inline-block; margin-right: 8px; }
.bhs-sonlar span:first-child b { color: var(--ink); }
.bhs-sonlar i { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 3px; }
#bhs-list tbody tr[data-uf] { cursor: pointer; }
#bhs-list tbody tr[data-uf]:hover td { background: color-mix(in srgb, var(--brand) 5%, transparent); }
#bhs-list tbody tr.bhs-sayl td { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.bhs-ugur-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
                 padding: 3px 4px 3px 10px; border-radius: 999px;
                 background: color-mix(in srgb, var(--brand) 12%, transparent); }
.bhs-ugur-chip button { border: 0; background: none; cursor: pointer; font-size: 14px;
                        line-height: 1; padding: 0 6px; color: var(--ink-2); }

/* Dasha nobaty sahypa çalşylýarka köne kartlar solgun -- basyş işledi diýip görünsin */
#dasha-grid.loading { opacity: .45; pointer-events: none; transition: opacity .12s; }

/* ── ýük kartasy ─────────────────────────────────────────────────────────── */
.krt .d-head select { width: auto; }
.krt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px;
            height: calc(100vh - 230px); min-height: 460px; }
.krt-mapbox { position: relative; display: grid; min-height: 0; }
.krt-map { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
           background: var(--sunk); min-height: 0; }

/* Ilkinji hasap fonda gidende kartanyň üstündäki ýüklenýär gatlagy. Leaflet
   öz içinde z-index 400–1000 ulanýar, ýöne `.krt-map` izolirlenen -- şonuň
   üçin şu gatlak ondan ýokarda durýar. */
.krt-load { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
            border-radius: var(--r); padding: 16px;
            background: color-mix(in srgb, var(--panel) 82%, transparent);
            backdrop-filter: blur(2px); }
.krt-load[hidden] { display: none; }
.krt-load-in { width: min(320px, 100%); text-align: center; }
.krt-load-in b { display: block; font-size: 14px; color: var(--ink); }
.krt-load-in small { display: block; margin-top: 7px; font-size: 12.5px; color: var(--ink-3); }
.krt-load-in .btn { margin-top: 12px; }
.krt-bar { height: 6px; margin-top: 10px; border-radius: 999px; overflow: hidden;
           background: var(--sunk); border: 1px solid var(--line-soft); }
.krt-bar i { display: block; height: 100%; width: 0; border-radius: 999px;
             background: var(--brand); transition: width .4s ease; }
/* Göterim näbelli wagty (serwer heniz basgançak bermedik) -- aýlanýan zolak */
.krt-bar-nabelli i { width: 35% !important; transition: none;
                     animation: krt-sur 1.1s ease-in-out infinite; }
@keyframes krt-sur { 0% { transform: translateX(-100%); } 100% { transform: translateX(286%); } }
/* Leaflet öz gatlaklaryna z-index 400–1000 berýär — karta gapdal menýunyň (60)
   we ýapyşyk ýokarky hataryň (30) üstüne çykýardy. `isolation` bilen ol sanlar
   diňe kartanyň öz içinde hasaplanýar. */
.leaflet-container, .krt-map, #route-map { position: relative; isolation: isolate; z-index: 0; }
.krt-side { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
            overflow-y: auto; padding: 12px 14px; min-height: 0; }
.krt-hd h3 { margin: 0 0 2px; font-size: 16px; }
.krt-ugur { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.krt-chip { border: 1px solid var(--line); background: var(--sunk); color: var(--ink-2);
            border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.krt-chip[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.krt-yuk { border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: 9px 11px;
           margin-bottom: 8px; cursor: pointer; font-size: 13px; }
.krt-yuk:hover { border-color: var(--line); background: var(--sunk); }
.krt-yuk.krt-on { border-color: var(--brand); background: var(--brand-bg); }
.krt-rt { line-height: 1.45; }
.krt-ok { color: var(--brand); font-weight: 700; margin: 0 2px; }
.krt-meta { color: var(--ink-2); margin-top: 3px; }
.krt-txt { white-space: pre-wrap; word-break: break-word; margin-top: 6px; padding: 7px 9px;
           background: var(--sunk); border-radius: 8px; color: var(--ink-2); font-size: 12.5px;
           max-height: 6.2em; overflow: hidden; }
.krt-yuk.krt-on .krt-txt { max-height: none; }
.krt-src { font-size: 11.5px; margin-top: 5px; }
.krt-more { width: 100%; margin: 4px 0 8px; }

/* .leaflet-marker-icon { display: block } leaflet.css-den soň ýüklenýär we
   biziňkini basýar -- şonuň üçin iki klas bilen (san tegelegiň ortasynda bolsun) */
.leaflet-marker-icon.krt-pin { display: flex; align-items: stretch; cursor: pointer;
           border-radius: 999px; overflow: hidden;
           color: #fff; font: 700 12px/1 var(--sans); font-variant-numeric: tabular-nums;
           border: 2px solid rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.krt-b { display: flex; align-items: center; justify-content: center; white-space: nowrap; flex: none; }
.krt-b + .krt-b { border-left: 1px solid rgba(255,255,255,.7); }
/* mämişi — ugraýan, gök — gelýän (app.js-däki KRT_RENK bilen deň) */
.krt-b.krt-cyk { background: rgba(234, 88, 12, .88); }
.krt-b.krt-gel { background: rgba(37, 99, 235, .88); }
.krt-b.krt-say { background: #e11d48; box-shadow: inset 0 0 0 2px #fff; }
.krt-legend { display: inline-flex; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.krt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
                margin-right: 4px; vertical-align: -1px; }
.krt-tab { display: flex; gap: 6px; margin-top: 10px; }
.krt-tb { flex: 1; border: 1px solid var(--line); background: var(--sunk); color: var(--ink-2);
          border-radius: var(--r-s); padding: 7px 8px; font: inherit; cursor: pointer; }
.krt-tb.krt-cyk[aria-pressed="true"] { background: #ea580c; border-color: #ea580c; color: #fff; }
.krt-tb.krt-gel[aria-pressed="true"] { background: #2563eb; border-color: #2563eb; color: #fff; }
.krt-info { margin-top: 7px; padding: 7px 9px; border-radius: var(--r-s); background: var(--panel);
            border: 1px solid var(--line); display: grid; gap: 4px; font-size: 13px; }
.krt-info[hidden] { display: none; }
.krt-info > div > span:first-child { display: inline-block; min-width: 92px; color: var(--ink-2); }
.krt-bel { font-size: 12px; }
.krt-n { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 1px 6px;
         border-radius: 999px; margin-left: 4px; }
.krt-n-arzan { background: rgba(22, 163, 74, .15); color: #15803d; }
.krt-n-bazar { background: var(--sunk); color: var(--ink-2); }
.krt-n-gymmat { background: rgba(225, 29, 72, .14); color: #be123c; }

@media (max-width: 900px) {
  .krt-wrap { grid-template-columns: 1fr; height: auto; }
  .krt-mapbox { height: 60vh; }
  .krt-side { max-height: none; }
}

/* ── giriş sahypasy, ulanyjy gutusy, Admin ────────────────────────────────
   Ulanyjylar/rollar/hereket žurnaly (panel_auth.py). */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-box { width: min(360px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-md); padding: 8px 22px 22px;
  display: flex; flex-direction: column; gap: 14px; }
.login-box .logo { padding: 16px 0 6px; border: 0; }
.login-box label, .adm-form label { display: flex; flex-direction: column; gap: 5px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.login-box input, .adm-form input:not([type=checkbox]), .adm-form select {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--panel);
  border: 1.5px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; box-sizing: border-box; }
.login-box input:focus-visible, .adm-form input:focus-visible {
  outline: 0; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.login-box .btn { justify-content: center; padding: 11px; font-size: 15px; }
.login-err { margin: 0; color: #b3261e; font-size: 13.5px; }

.me-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px;
  border-top: 1px solid var(--line-soft); }
.me-av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-bg); color: var(--brand); font-weight: 700; font-size: 13px; }
.me-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.me-t b, .me-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-t b { font-size: 13.5px; }
.me-t small { font-size: 11.5px; color: var(--ink-3); }
.me-box .icon-btn { width: 30px; height: 30px; }
.side.collapsed .me-box { flex-direction: column; padding: 10px 0; }
.side.collapsed .me-t { display: none; }

.adm .seg { margin-left: 4px; }
.adm-scroll { overflow-x: auto; }
.adm-tbl td { white-space: nowrap; }
.au-tbl .au-m { white-space: normal; min-width: 260px; max-width: 520px; font-size: 12.5px; }
.au-tbl .au-m summary { cursor: pointer; color: var(--ink-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.au-tbl .au-m pre { margin: 6px 0 0; padding: 8px 10px; background: var(--sunk); border-radius: 8px;
  font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
.au-tbl .au-w { font-variant-numeric: tabular-nums; }
#au-pager { margin-top: 12px; }

.adm-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.adm-role { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; box-shadow: var(--shadow); }
.adm-role header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.adm-role header .grow { flex: 1; }
.adm-role h3 { margin: 0; font-size: 16px; font-weight: 700; }
.adm-role .mini, .adm-matrix .mini { font: inherit; font-size: 11.5px; font-weight: 500; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.adm-role .mini:hover, .adm-matrix .mini:hover { border-color: currentColor; }
.adm-bellik { margin: 0 0 8px; font-size: 12.5px; }
.adm-perm { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0; font-size: 13px; }
.adm-perm dt { color: var(--ink-2); }
.adm-perm dd { margin: 0; text-align: right; }
.adm-lv { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; }
.adm-lv.lv0 { color: var(--ink-3); }
.adm-lv.lv1 { color: var(--link); background: color-mix(in srgb, var(--link) 10%, transparent); }
.adm-lv.lv2 { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }

.adm-box { width: min(620px, 96vw); }
.adm-mbody { overflow: auto; display: block; }
.adm-form { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
.adm-form label.adm-chk { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.adm-matrix { padding: 0 16px 12px; }
.adm-matrix td, .adm-matrix th { padding: 5px 8px; }
.adm-matrix input[type=radio] { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.adm-matrix tr.adm-grp td { font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--brand); padding-top: 12px; }

/* ══ Uýgunlaşýan (responsive) gatlak: planşet we telefon ═══════════════════
   Ähli sahypalar üçin umumy düzgünler — faýlyň iň aşagynda, ýokardaky
   ixcam süzgüç düzgünlerini (`.filters .field` …) basyp geçer ýaly.
   Böleklenişi:  ≤1180px planşet (gapdal menýu bar)  ·  ≤900px çekmeje menýu
   ·  ≤600px telefon  ·  (pointer: coarse) barmak bilen basylýan ekran. */

/* Kart toplumlary: iň az ini ekrandan giň bolsa (320px telefon) gorizontal
   skrol çykýardy — `min(…, 100%)` bilen sütün hiç haçan gapdan giň bolmaýar. */
.grid           { grid-template-columns: repeat(auto-fill, minmax(min(370px, 100%), 1fr)); }
.prof-list      { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
#link-list      { grid-template-columns: repeat(auto-fit,  minmax(min(320px, 100%), 1fr)); }
#msg-list       { grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); }
.ksz-toparlar   { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.isl-cols       { grid-template-columns: repeat(auto-fit,  minmax(min(340px, 100%), 1fr)); }
.adm-roles      { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.bhs-gun-tiles  { grid-template-columns: repeat(auto-fit,  minmax(min(170px, 100%), 1fr)); }

/* `.flt`/`.jbt-bar` saýlawlarynda `background` gysgaltmasy açylýan oky pozýardy */
.flt select, .jbt-bar select, .log-f select, .apk-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 53%, calc(100% - 10px) 53%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; }

/* Mobil brauzerlerde 100vh adres setiriniň aşagyna düşýär — dvh hakyky beýiklik */
.side { height: 100dvh; }
.side-scrim { display: none; }
.flt-toggle { display: none; }
img, video, canvas { max-width: 100%; }

/* ── planşet: gapdal menýu bar, mazmun meýdany daralýar ─────────────────── */
@media (max-width: 1180px) {
  .krt-wrap { grid-template-columns: minmax(0, 1fr) 330px; }
  .kc { grid-template-columns: minmax(0, 1fr) 290px; }
  .d-grid { grid-template-columns: minmax(0, 1fr) 290px; }
  .head { gap: 10px; padding-inline: 18px; }
  .head-r { gap: 8px; }
  .body { padding-inline: 18px; }
  .g-sim > svg { display: none; }
}
@media (max-width: 1000px) {
  .d-grid { grid-template-columns: 1fr; }
}

/* ── çekmeje menýu (≤900px): planşet dik görnüşi we telefon ─────────────── */
@media (max-width: 900px) {
  .side { width: min(290px, 86vw); }
  .side.collapsed { width: min(290px, 86vw); }
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(8, 11, 17, .5); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .2s; }
  .side.open + .side-scrim { opacity: 1; pointer-events: auto; }
  body.menyu-acyk { overflow: hidden; }
  .nav-i { padding: 11px 12px; }
  /* statistika — menýu ýerini almasyn: üç san bir hatarda */
  .side-ft, .side.collapsed .side-ft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 10px; padding: 10px 16px 12px; }
  .stat-mini b { font-size: 17px; }
  .stat-mini span { font-size: 11px; line-height: 1.25; display: block; }
  .side-ft small { grid-column: 1 / -1; }

  /* ýokarky hatar: menýu + at birinji setirde, galan düwmeler ikinji setirde
     gorizontal aýlanýan zolak (gysylyp ýazgylar döwülmesin) */
  .head { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .head h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .head-r { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; padding-bottom: 2px; }
  .head-r::-webkit-scrollbar { display: none; }
  .head-r > * { flex: none; }

  .body { padding: 12px 14px 48px; }
  .d-head { gap: 8px 10px; }
  .d-head h2 { font-size: 19px; }

  /* Süzgüçler: iki sütünli tor; gözleg gutusy doly setir. Galanlary
     «Süzgüçler» düwmesi bilen açylýar (app.js — flt-toggle). */
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .filters .field, .filters .field.f-q, .filters .field.f-sort,
  .filters .field.f-sort + .field.f-sort {
    min-width: 0; max-width: none; margin-left: 0; }
  .filters .field.f-q, .filters .msgs { grid-column: 1 / -1; }
  .filters .msgs { justify-content: flex-start; overflow-x: auto; }
  .filters .f-search { justify-content: center; }
  .filters.flt-acyk .f-search { grid-column: 1 / -1; }
  .flt-toggle { display: inline-flex; justify-content: center; }
  .flt-toggle svg { width: 16px; height: 16px; }
  .flt-toggle[aria-expanded="true"] { border-color: var(--brand); color: var(--brand);
    background: var(--brand-bg); }
  .filters:not(.flt-acyk) > :not(.f-q):not(.f-search):not(.flt-toggle) { display: none; }
  /* «Gözle» düwmesi bolmadyk süzgüç (Habarlar) — toggle doly setir */
  .filters:not(:has(.f-search)) .flt-toggle { grid-column: 1 / -1; }
  .filters .field.kuzow-dd > summary { padding: 7px 22px 7px 28px; font-size: 13.5px; }

  .bar { gap: 8px 10px; }
  .bar .grow { flex-basis: 100%; height: 0; }

  /* açylýan şert/kuzow sanawy — ekranyň aşagynda «sahypa» bolup çykýar,
     gapdala çykyp, ekrandan daşa düşmesin */
  .atrf-box { position: fixed; left: 12px; right: 12px; top: auto;
    bottom: max(12px, env(safe-area-inset-bottom)); min-width: 0;
    max-height: 60vh; overflow-y: auto; z-index: 70;
    box-shadow: 0 -4px 30px rgba(0,0,0,.25); }
  .atrf-box label { padding: 6px 0; }

  /* tablisalar: sahypany däl-de diňe öz gutusyny gorizontal aýlasyn */
  :where(div, section):has(> table.tbl, > table.dict-t) { overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
  .tbl td, .tbl th { white-space: nowrap; }
  .tbl td.au-m, .tbl .t-grp { white-space: normal; }

  /* sahypa-sahypa süzgüç zolaklary: ini mazmuna görä däl-de tor bilen */
  .flt, .log-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .flt input[type="search"], .flt select, .log-f select, .log-f input {
    width: 100%; min-width: 0; flex: none; }
  .flt input[type="search"]:first-child, .log-f input[type="search"] { grid-column: 1 / -1; }
  .flt .btn { justify-content: center; }
  .flt .dim, .log-f .log-jemi { grid-column: 1 / -1; }
  .log-f .grow { display: none; }
  #apk-lf { display: flex; }

  .apk-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .apk-form input, .apk-form select, .apk-form .ac-wrap { min-width: 0; width: 100%; }
  .apk-btns { grid-column: 1 / -1; }
  .apk-btns .btn { flex: 1; justify-content: center; }

  .jbt-bar { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .jbt-bar label { flex-direction: column; align-items: stretch; gap: 3px; font-size: 12px; }
  .jbt-bar select, .jbt-bar input[type=search] { width: 100%; min-width: 0; }
  .jbt-bar .btn { justify-content: center; }
  .jbt-stat { grid-column: 1 / -1; margin-left: 0; }

  .adr-bar { position: static; }
  .adr-bar input[type=search] { min-width: 0; flex-basis: 100%; }
  .adr-jem { margin-left: 0; }
  .adr-split { grid-template-columns: 1fr; }
  .adr-tree { max-height: 46vh; }
  .adr-side { max-height: none; }

  .dict-add input { flex: 1 1 100%; min-width: 0; }
  .dict-add .btn { flex: 1 1 100%; justify-content: center; }
  .dict-add .grow { display: none; }
  /* köp bölümli tablar — birnäçe hatara ýaýramaz ýaly gorizontal zolak */
  .dict-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: -14px; padding-inline: 14px; }
  .dict-tabs::-webkit-scrollbar { display: none; }
  .dict-tabs .dt { flex: none; white-space: nowrap; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }

  .profs .d-head .field.p-search { flex: 1 1 100%; max-width: none; min-width: 0; order: 5; }
  .profs .d-head .field.p-sort { flex: 1 1 0; min-width: 0; max-width: none; order: 6; }
  .profs .d-head #prof-new { order: 7; }

  .krt-wrap { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .krt-mapbox { height: 58vh; }
  #route-map { height: 52vh; }

  .kc { grid-template-columns: 1fr; }
  .s-top { position: static; }
  .pone-ads .a-row time { flex-basis: 100%; }
}

/* planşet dik görnüşi: ýer köp — süzgüç we forma torlary üç sütünli */
@media (min-width: 601px) and (max-width: 900px) {
  .filters, .flt, .log-f, .apk-form, .jbt-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── telefon (≤600px) ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .head h1 { font-size: 16.5px; }
  .head .btn-t { display: none; }
  .head-r .btn { padding: 8px 11px; }
  .g-sim select { font-size: 13px; padding-top: 7px; padding-bottom: 7px; }

  .body { padding: 10px 12px 40px; }
  /* saýlaw ýok wagty işlemeýän düwmeler aýratyn hatar tutmasyn */
  .bar #clear:disabled, .bar #csv:disabled { display: none; }
  /* sözbaşy ýapyşyk galsa, ýokarky hatar bilen bile ekranyň üçden birini
     tutýardy — telefonda adaty akymda galýar */
  .d-head { position: static; padding: 0; margin-bottom: 12px; }
  .d-head h2 { font-size: 18px; flex: 1 1 auto; min-width: 0; }
  .d-head .grow { display: none; }
  .d-head > .btn { flex: 1 1 auto; justify-content: center; }
  .acc-note { font-size: 12.5px; margin: 0 0 12px; }
  .bhs-gun { padding: 11px 12px; }
  .bhs-gun-hd { gap: 8px; }
  .bhs-gun-hd .dim { flex-basis: 100%; font-size: 12.5px; }
  .dict-tabs { margin-inline: -12px; padding-inline: 12px; }

  /* bildiriş kartlary */
  .c-top { padding: 12px 13px 0; }
  .c-meta, .c-map, .c-chips, .c-flags, .c-std { padding-inline: 13px; }
  .c-route { padding: 10px 13px 0; font-size: 17px; }
  .c-key, .c-list { padding-inline: 13px; }
  .kv u { width: 64px; }
  .kv b { font-size: 16px; }
  .c-bot { padding: 11px 13px; gap: 8px; }
  .c-bot .tel { flex: 1 1 100%; justify-content: center; }
  .c-bot .grow { display: none; }
  .c-bot .edit, .c-bot .hz-edit, .c-bot .hz-push { flex: 1 1 auto; justify-content: center; }
  .raw summary { padding-inline: 13px; }
  .raw pre { padding-inline: 13px; }

  /* jikme-jik sahypa */
  .d-card { padding: 16px; }
  .d-list > div { flex-wrap: wrap; gap: 2px 12px; padding: 11px 0; }
  .d-list dd { text-align: left; flex: 1 1 auto; }
  .rt b { font-size: 16.5px; }

  /* redaktirleme penjiresi — doly ekran, düwmeler aşakda */
  .modal { padding: 0; place-items: stretch; }
  .modal-box, .modal.wide-modal .modal-box, .adm-box { width: 100%; max-height: none;
    height: 100dvh; border-radius: 0; border: 0; }
  .modal-body { flex: 1 1 auto; }
  .modal-hd { padding: 10px 12px; gap: 8px; }
  .modal-hd h2 { font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .modal-hd .btn-t { display: none; }
  .m-form { padding: 10px 12px; }
  .m-group-b { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
  .modal-ft { flex-wrap: wrap; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .m-note { flex-basis: 100%; }
  .m-note:empty { display: none; }
  .modal-ft .btn { flex: 1; justify-content: center; }

  .route-sum, .route-tags, .route-raw, .route-fix, .route-draw-bar { padding-inline: 14px; }
  .route-warn { margin-inline: 14px; }

  /* sahypa sanawy */
  .pager { gap: 5px; }
  .pg { min-width: 36px; padding: 7px 10px; }
  .pg-info { flex-basis: 100%; margin-left: 0; order: -1; }

  /* awtopark / abuna */
  .apk-card { padding: 10px 12px; }
  .apk-yi-c { max-width: 100%; }
  .apk-yi-h { padding: 40px 12px 10px; }

  .jbt-j, .jbt-t { padding: 11px 12px; }
  .log-r { padding: 6px 10px; }
  .pone { padding: 14px; }
  .tel-row .mini { margin-left: 0; }

  /* toast — gyralara degmesin */
  .toast { max-width: calc(100vw - 24px); width: max-content; text-align: center;
    bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* ── barmak bilen basylýan ekranlar: düwmeler azyndan ~40px ─────────────── */
@media (pointer: coarse) {
  .icon-btn { width: 40px; height: 40px; }
  .me-box .icon-btn { width: 36px; height: 36px; }
  .mini, .tbl .mini, .acc-act .mini, .adm-role .mini, .adm-matrix .mini {
    padding: 6px 11px; font-size: 12.5px; }
  .seg button { padding: 8px 13px; }
  .pg { min-height: 40px; }
  .chip button { padding: 4px 7px; }
  .ac-i { padding: 10px; }
  .log-chip, .krt-chip, .yurt-c { padding-top: 6px; padding-bottom: 6px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
}
/* iOS: 16px-den kiçi meýdana basylanda sahypa özi ulalýar — telefonda öňüni al */
@media (pointer: coarse) and (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
}

/* Meňzeş ýükleriň ilkinji goýany (asyl çeşme) */
.ilk-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:1px 7px;
  border-radius:999px;background:color-mix(in srgb,var(--green,#16a34a) 15%,transparent);
  color:var(--green,#15803d);white-space:nowrap}
.mtag.ilk-kim{background:var(--sunk);color:var(--ink-2);max-width:260px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── abuna (podpiska) ─────────────────────────────────────────────────────── */
#me-abuna.az  { color: #9a6b00; }
#me-abuna.yok { color: #b3261e; }
.abuna-gulp { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 12vh; }
.abuna-gulp svg { opacity: .5; }
.adm-h3 { font-size: 15px; margin: 22px 0 10px; font-weight: 600; }
.adm-h3 .t-dim { font-weight: 400; font-size: 13px; }