/* ═══ Web bosh sahifasi (≥1100px): boshqaruv paneli — js/dash.js ═══════════════
   Pinterest namunasi (aqlli uy paneli, pin 1050253575617477537): to'q moviy-kulrang fon,
   shaffof oynasimon kartochkalar, chapda ikonali menyu, o'ngda tanlangan tur paneli.
   Shrift — Outfit (mobile/fonts, o'zimizda; internetsiz ham ishlaydi). Telefonda — #home. */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.dash { display: none; }

@media (min-width: 1100px) {
  .home, .tabbar { display: none !important; }

  .dash {
    --g-ink: #ffffff;
    --g-ink-2: rgba(255, 255, 255, 0.86);
    --g-glass: rgba(255, 255, 255, 0.13);
    --g-glass-2: rgba(255, 255, 255, 0.2);
    --g-line: rgba(255, 255, 255, 0.24);
    --g-dark: #2d4a2a;
    --g-dark-2: rgba(45, 74, 42, 0.74);
    --teal: #54804f;
    --teal-d: #42673e;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: fixed;
    inset: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) minmax(400px, 32vw);
    grid-template-rows: minmax(0, 1fr);   /* ustunlar ekran balandligida — ichidagi ro'yxatlar o'zi aylanadi */
    font-family: "Outfit", var(--font);
    color: var(--g-ink);
    background:
      radial-gradient(55% 65% at 80% 12%, rgba(192, 224, 187, 0.42), transparent 70%),
      radial-gradient(45% 55% at 8% 96%, rgba(84, 128, 79, 0.6), transparent 72%),
      linear-gradient(145deg, #2d4a2a 0%, #42673e 44%, #659961 100%);
  }
  .dash ::selection { background: rgba(255, 255, 255, 0.85); color: var(--g-dark); }
  .dash :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .dash button { font-family: inherit; }

  /* ─── Orqa fon: viloyat xaritasi (bilinar-bilinmas, sekin harakat) ─── */
  .dash__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .dash__bg svg {
    position: absolute;
    left: 6%;
    top: 4%;
    width: 96%;
    height: 96%;
    animation: bg-drift 80s ease-in-out infinite alternate;
  }
  .bg__grid { fill: none; stroke: rgba(255, 255, 255, 0.035); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .bg__d {
    fill: rgba(255, 255, 255, 0.018);
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 1.1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: bg-draw 3.6s var(--ease) forwards;
    animation-delay: calc(0.5s + var(--i, 0) * 0.14s);
  }
  .bg__dot { fill: rgba(255, 255, 255, 0.32); }
  .bg__pulse {
    fill: none;
    stroke: rgba(192, 224, 187, 0.55);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: bg-pulse 5.6s ease-out infinite;
    animation-delay: calc(2s + var(--i, 0) * 0.55s);
  }
  @keyframes bg-draw { to { stroke-dashoffset: 0; } }
  @keyframes bg-pulse { 0% { transform: scale(0.4); opacity: 0.85; } 60% { opacity: 0; } 100% { transform: scale(4.2); opacity: 0; } }
  @keyframes bg-drift { from { transform: translate3d(-1.2%, 0.6%, 0) scale(1); } to { transform: translate3d(1.2%, -1.2%, 0) scale(1.06); } }
  .dash__main, .dash__side { position: relative; z-index: 1; }

  /* ─── Chap menyu: yig'iq — belgilar, ochilganda — nomlari bilan (kontent ustiga chiqadi) ─── */
  .dash__rail {
    position: relative;
    z-index: 3;
    width: 92px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 24px 20px;
    background: rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    overflow: hidden;
    transition: width 0.38s var(--ease), background 0.3s, box-shadow 0.38s var(--ease);
  }
  .dash.is-menu .dash__rail {
    width: 264px;
    background: rgba(36, 61, 34, 0.86);
    box-shadow: 28px 0 60px -24px rgba(8, 22, 7, 0.7);
    backdrop-filter: blur(28px);
  }
  .rail__logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 12px 24px -12px rgba(9, 24, 8, 0.6);
  }
  .rail__logo img { width: 41px; height: auto; }
  .rail__items { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .rail__btn {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.2s var(--ease);
  }
  .rail__btn svg { flex: none; }
  .rail__label {
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.18s, transform 0.3s var(--ease);
  }
  .dash.is-menu .rail__label { opacity: 1; transform: none; transition-delay: 0.08s; }
  .rail__btn:hover { background: rgba(255, 255, 255, 0.13); color: #fff; }
  .rail__btn:active { transform: scale(0.96); }
  .rail__btn.is-on { background: #fff; color: var(--teal-d); box-shadow: 0 12px 24px -12px rgba(9, 24, 8, 0.6); }
  .rail__toggle { margin-bottom: 6px; color: #fff; background: rgba(255, 255, 255, 0.1); }
  .rail__sep { flex: none; width: 26px; height: 1px; margin: 6px 13px; background: rgba(255, 255, 255, 0.22); }
  /* Menyu pastida: joy, yil va muallif */
  .rail__sign {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 92px;
    margin: 0 0 0 -20px;
    text-align: center;
    line-height: 1.15;
    transition: width 0.38s var(--ease);
  }
  .dash.is-menu .rail__sign { width: 264px; }
  .rail__sign b { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: #fff; }
  .rail__sign b + b { font-size: 15px; font-weight: 300; letter-spacing: 0.04em; }
  .rail__sign small { margin-top: 6px; font-size: 10px; font-weight: 400; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.72); }

  /* ─── Markaz: salom, toifalar, kartochkalar ─── */
  .dash__main { min-width: 0; display: flex; flex-direction: column; padding: 30px 34px 0 46px; overflow: hidden; }
  .dash__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; font-size: 13.5px; color: var(--g-ink-2); }
  .dash__status span { display: inline-flex; align-items: center; gap: 7px; }
  .dash__status b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
  .dash__net i { width: 8px; height: 8px; border-radius: 50%; background: #5ee0b0; box-shadow: 0 0 0 3px rgba(94, 224, 176, 0.22); }
  .dash__net.is-off i { background: #f2c14e; box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.22); }
  .dash__hello {
    margin: 44px 0 30px;
    font-size: clamp(38px, 3.2vw, 54px);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -0.02em;
  }
  .dash__hello span { font-weight: 300; color: rgba(255, 255, 255, 0.9); }

  /* Salom va ikki kartochka (viloyat xaritasi, murojaat) bir qatorda; joy yetmasa — kartochkalar pastga tushadi */
  .dash__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 26px;
    margin: 30px 0 24px;
  }
  .dash__head .dash__hello { flex: none; margin: 0 0 4px; font-size: clamp(36px, 2.9vw, 54px); white-space: nowrap; }
  .dash__cards {
    flex: 1 1 380px;
    max-width: 540px;
    display: grid;
    height: 212px;
  }

  /* Ixcham xarita kartochkasi: viloyat butun kartochkada, pastda nom, burchakda ochish tugmasi */
  .hc {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    padding: 14px 14px 13px 16px;
    border: 1px solid var(--g-line);
    border-radius: 24px;
    overflow: hidden;
    color: var(--g-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 22px 40px -26px rgba(9, 26, 8, 0.7);
    animation: dc-in 0.55s var(--ease) both;
    transition: transform 0.25s var(--ease), box-shadow 0.25s;
  }
  .hc:hover { transform: translateY(-3px); box-shadow: 0 26px 44px -24px rgba(9, 26, 8, 0.75); }
  .hc b { position: relative; font-size: 16px; font-weight: 500; line-height: 1.2; }
  .hc small { position: relative; margin-top: 2px; font-size: 12.5px; }
  .hc__go {
    position: absolute;
    right: 12px;
    top: 12px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    transition: transform 0.25s var(--ease);
  }
  .hc:hover .hc__go { transform: translateX(2px); }

  .hc--map {
    border-color: rgba(255, 255, 255, 0.5);
    background:
      radial-gradient(90% 120% at 70% 30%, rgba(255, 255, 255, 0.55), transparent 70%),
      linear-gradient(160deg, #f1f8f0 0%, #cde4c8 100%);
    color: var(--g-dark);
  }
  .hc--map .dc__art { position: absolute; inset: 6px 8px 40px; padding: 0; }
  .hc--map small { color: var(--g-dark-2); }
  .hc--map .hc__go { background: var(--teal-d); color: #fff; box-shadow: 0 10px 20px -10px rgba(66, 103, 62, 0.7); }

  .hc--portal { border-color: rgba(255, 255, 255, 0.32); background: linear-gradient(160deg, #3d7ff2 0%, #1f4fd0 100%); }
  .hc--portal .hc__ic { position: absolute; left: 16px; top: 16px; color: #fff; }
  .hc--portal small { color: rgba(255, 255, 255, 0.88); }
  .hc--portal .hc__go { background: rgba(255, 255, 255, 0.94); color: #1f4fd0; }

  /* Toifalar bitta qatorda (namunadagi xonalar kabi); sig'masa — yonga aylanadi, chetida xiralashadi */
  .dash__chips {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 2px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%);
  }
  .dash__chips::-webkit-scrollbar { display: none; }
  .dchip { flex: none; }
  .dchip {
    --c: var(--teal);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    max-width: 400px;
    padding: 5px 14px 5px 6px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }
  /* To'liq nom — kerak bo'lsa ikki qatorda */
  .dchip__t { display: block; }
  .dchip i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; }
  .dchip b { flex: none; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums; }
  .dchip:hover { background: rgba(255, 255, 255, 0.14); }
  .dchip.is-on { border-color: #fff; background: rgba(255, 255, 255, 0.94); color: var(--g-dark); }
  .dchip.is-on b { color: var(--g-dark-2); }
  .dchip--all { padding: 0 15px 0 11px; }

  .dash__grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 224px;
    gap: 18px;
    margin: 0 -8px 0 -4px;
    padding: 10px 8px 40px 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 36px), transparent);
  }
  .dash__empty { grid-column: 1 / -1; margin: 10px 0; color: var(--g-ink-2); }

  /* Kartochka — oynasimon; yuqorida ichki panel, pastda nom va tugma */
  .dc {
    --c: var(--teal);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--g-line);
    border-radius: 26px;
    background: var(--g-glass);
    box-shadow: 0 22px 40px -26px rgba(9, 26, 8, 0.7);
    backdrop-filter: blur(22px) saturate(140%);
    color: var(--g-ink);
    font: inherit;
    text-align: left;
    overflow: hidden;
    animation: dc-in 0.55s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 32ms);
  }
  @keyframes dc-in { from { transform: translateY(12px) scale(0.985); } }

  .dc--type { cursor: pointer; transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease), color 0.25s; }
  .dc--type:hover { background: var(--g-glass-2); transform: translateY(-3px); }
  .dc__panel {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    gap: 8px 12px;
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.25s;
  }
  .dc__ic {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: var(--c);
    color: #fff;
    box-shadow: 0 12px 22px -12px var(--c);
  }
  .dc__num { justify-self: end; text-align: right; }
  .dc__num b { display: block; font-size: 42px; font-weight: 300; line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .dc__num small { font-size: 12px; color: var(--g-ink-2); }
  .dc__note { grid-column: 1 / -1; align-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--g-ink-2); }
  .dc__foot { display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 10px 4px 2px 8px; }
  .dc__txt { flex: 1; min-width: 0; }
  .dc__txt b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.25;
  }
  .dc__txt small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--g-ink-2); }
  .dc__go {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--c);
    box-shadow: 0 8px 16px -8px rgba(9, 26, 8, 0.5);
    transition: transform 0.25s var(--ease), background 0.25s, color 0.25s;
  }
  .dc--type:hover .dc__go { transform: translateX(3px); }
  /* Tanlangan tur — yorug' kartochka (namunadagi «Main Light») */
  .dc--type.is-on { border: 2px solid #fff; background: rgba(255, 255, 255, 0.92); color: var(--g-dark); }
  .dc--type.is-on .dc__panel { background: color-mix(in srgb, var(--c) 11%, #fff); }
  .dc--type.is-on .dc__num small, .dc--type.is-on .dc__note { color: var(--g-dark-2); }
  .dc--type.is-on .dc__go { background: var(--c); color: #fff; }

  /* Xarita kartochkasi (namunadagi musiqa kartochkasi o'rnida) */
  /* Xarita kartochkasi — ikki ustun: chapda nom va tugmalar, o'ngda viloyat (tumanlar o'z rangida,
     tashkilotlar — tur rangidagi nuqtalar) */
  .dc--map {
    grid-column: span 2;
    flex-direction: row;
    padding: 0;
    border-color: rgba(255, 255, 255, 0.5);
    background:
      radial-gradient(90% 120% at 78% 40%, rgba(255, 255, 255, 0.55), transparent 70%),
      linear-gradient(160deg, #f1f8f0 0%, #cde4c8 100%);
    color: var(--g-dark);
  }
  .dc__art { position: absolute; inset: 10px 10px 10px 34%; }
  .dc__art svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgba(30, 60, 28, 0.22)); }
  .art__d { stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .art__o { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
  .dc__over {
    position: relative;
    width: 38%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 22px 0 18px 22px;
  }
  .dc__over b { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
  .dc__over small { font-size: 12.5px; color: var(--g-dark-2); }
  .dc__ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
  .dc__ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(45, 74, 42, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--g-dark);
    transition: background 0.2s, transform 0.2s var(--ease);
  }
  .dc__ctrl:hover { background: #fff; transform: translateY(-1px); }
  .dc__ctrl--main {
    width: auto;
    padding: 0 16px 0 13px;
    border: 0;
    background: var(--teal-d);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 20px -10px rgba(66, 103, 62, 0.7);
  }
  .dc__ctrl--main:hover { background: var(--teal); }

  /* Murojaat kartochkasi (namunadagi «Smart Lock») */
  .dc--portal { padding: 0; border-color: rgba(255, 255, 255, 0.32); background: linear-gradient(160deg, #3d7ff2 0%, #1f4fd0 100%); }
  .dc__portal-top { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 0; }
  .dc__portal-top b { margin-top: auto; font-size: 18px; font-weight: 500; }
  .dc__portal-top small { font-size: 12.5px; color: rgba(255, 255, 255, 0.88); }
  .dc__foot--light {
    margin: 12px 10px 10px;
    padding: 10px 8px 10px 14px;
    min-height: 0;
    border: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    color: #14306c;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .dc__foot--light .dc__txt small { color: rgba(20, 48, 108, 0.72); }
  .dc__foot--light .dc__go { background: #1f4fd0; color: #fff; }
  .dc__foot--light:hover .dc__go { transform: translateX(3px); }

  /* ─── O'ng panel: tanlangan tur tashkilotlari ─── */
  .dash__side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 24px 30px 0;
    background: rgba(255, 255, 255, 0.07);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(24px);
  }
  .side__head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
  .side__map {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transition: background 0.2s;
  }
  .side__map:hover { background: rgba(255, 255, 255, 0.24); }
  .side__time { text-align: right; line-height: 1.05; }
  .side__time small { display: block; font-size: 12.5px; color: var(--g-ink-2); }
  .side__time b { font-size: 28px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .side__titlebox { display: flex; align-items: flex-start; gap: 14px; margin: 24px 0 18px; }
  .side__ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: var(--c);
    color: #fff;
    box-shadow: 0 12px 24px -12px var(--c);
  }
  .side__title { margin: 0; font-size: 26px; font-weight: 400; line-height: 1.16; letter-spacing: -0.015em; text-wrap: balance; }
  .side__sub { margin: 6px 0 0; font-size: 13.5px; color: var(--g-ink-2); }
  .side__tools { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .side__select {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
  }
  .side__select select {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #fff;
    font: 500 14px "Outfit", var(--font);
    cursor: pointer;
    appearance: none;
  }
  .side__select option { color: var(--ink); }
  .side__count { font-size: 13px; color: var(--g-ink-2); font-variant-numeric: tabular-nums; }
  .side__list {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 14px;
    margin-right: -10px;
    padding: 8px 10px 36px 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 30px), transparent);
  }

  /* Tashkilot kartochkasi (namunadagi o'ngdagi chiroqlar kartochkalari) */
  .oc {
    --c: var(--teal);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 15px 15px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.13);
    animation: dc-in 0.5s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 28ms);
  }
  .oc__state {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--g-ink-2);
  }
  .oc__state i { width: 8px; height: 8px; border-radius: 50%; background: #5ee0b0; }
  .oc.is-wide .oc__state i { background: #f2c14e; }
  .oc__name {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    text-wrap: pretty;
  }
  .oc__place { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--g-ink-2); }
  .oc__place svg { flex: none; margin-top: 1px; }
  .oc__basis {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
  }
  .oc__basis span { margin-right: 6px; font-weight: 600; color: #fff; }
  .oc__acts { margin-top: auto; padding-top: 4px; }
  .oc__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--g-dark);
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
  }
  .oc__btn:hover { background: var(--c); color: #fff; }

  /* «Loyiha haqida» */
  .side__about { color: var(--g-ink-2); font-size: 14.5px; line-height: 1.6; }
  .side__about p { margin: 18px 0 14px; max-width: 60ch; }
  .side__about ol { margin: 0 0 22px; padding-left: 20px; }
  .side__about li { margin-bottom: 8px; }
  .side__about b { color: #fff; font-weight: 600; }
  .side__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--g-dark);
    font-size: 14px;
    font-weight: 500;
  }

  .dash__grid::-webkit-scrollbar, .side__list::-webkit-scrollbar { width: 6px; }
  .dash__grid::-webkit-scrollbar-thumb, .side__list::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255, 255, 255, 0.3); }
}

@media (min-width: 1680px) {
  .dash__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .dc, .oc { animation: none; }
  .dash__bg svg, .bg__pulse { animation: none; }
  .bg__d { animation: none; stroke-dashoffset: 0; }
}

/* ═══ Bo'limlar (Turi / Toifasi / Hudud bo'yicha) — bosh sahifaning o'zida ═══ */
@media (min-width: 1100px) {
  .dash__sec { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; min-height: 44px; }
  .dsec__back {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: background 0.2s;
  }
  .dsec__back:hover { background: rgba(255, 255, 255, 0.22); }
  .dsec__txt h2 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
  .dsec__txt small { display: block; margin-top: 2px; font-size: 13px; color: var(--g-ink-2); }

  /* Toifa va hudud kartochkalari — tur kartochkasi bilan bir xil «oyna» */
  .dc--pick { cursor: pointer; transition: background 0.25s, transform 0.25s var(--ease); }
  .dc--pick:hover { background: var(--g-glass-2); transform: translateY(-3px); }
  .dc--pick:hover .dc__go { transform: translateX(3px); }
  .dc__shape { display: grid; place-items: center; width: 64px; height: 52px; }
  .dc__shape svg { width: 100%; height: 100%; overflow: visible; }
  .dc__shape path { fill: rgba(255, 255, 255, 0.85); stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
}

/* ═══ Xarita: chap panel — bosh sahifa uslubida (to'q moviy-yashil, oynasimon) ═══ */
@media (min-width: 1100px) {
  .mapscreen .sheet {
    --paper: #2d4a2a;
    --card: rgba(255, 255, 255, 0.11);
    --ink: #ffffff;
    --ink-2: rgba(255, 255, 255, 0.86);
    --ink-3: rgba(255, 255, 255, 0.68);
    --line: rgba(255, 255, 255, 0.14);
    --teal-l: rgba(255, 255, 255, 0.14);
    --teal-d: #d6ecd2;
    font-family: "Outfit", var(--font);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
      radial-gradient(70% 45% at 100% 0%, rgba(192, 224, 187, 0.22), transparent 70%),
      radial-gradient(60% 40% at 0% 100%, rgba(101, 153, 97, 0.45), transparent 72%),
      linear-gradient(165deg, #2d4a2a 0%, #3d6039 55%, #54804f 100%);
    box-shadow: 0 30px 60px -30px rgba(8, 22, 7, 0.75);
  }
  .mapscreen .sheet ::selection { background: rgba(255, 255, 255, 0.85); color: #2d4a2a; }
  .mapscreen .nhead__title small, .mapscreen .nsec b { color: #b9dcb2; }
  .mapscreen .nrow, .mapscreen .item, .mapscreen .det__info, .mapscreen .det__sec, .mapscreen .sbtn {
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
  }
  .mapscreen .nrow, .mapscreen .item { transition: background 0.2s; }
  .mapscreen .nrow:hover, .mapscreen .item:hover { background: rgba(255, 255, 255, 0.18); }
  .mapscreen .sbtn { color: #fff; }
  .mapscreen .sbtn--main { border-color: transparent; }
  .mapscreen .nacc.is-open > .nrow--sec { background: rgba(255, 255, 255, 0.2); }
  .mapscreen .lsub { color: rgba(255, 255, 255, 0.86); }
  .mapscreen .nrow--d .nrow__ic { color: #2d4a2a; }
  .mapscreen .nsearch__clear { background: rgba(255, 255, 255, 0.92); color: #2d4a2a; }
  .mapscreen .iconbtn--sm { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: none; }
  .mapscreen .nroot__head b, .mapscreen .det__name { color: #fff; }
  .mapscreen .det__sec h4, .mapscreen .det__sub h5 { color: rgba(255, 255, 255, 0.74); }
  .mapscreen .rt li::marker { color: #b9dcb2; }

  /* Qidiruv qatori va «orqaga» — panel bilan bir uslubda */
  .mapscreen .mtop .msearch, .mapscreen .mtop .iconbtn {
    background: rgba(45, 74, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px);
    color: #fff;
    box-shadow: 0 16px 30px -18px rgba(8, 22, 7, 0.7);
  }
  .mapscreen .mtop .msearch input { color: #fff; font-family: "Outfit", var(--font); }
  .mapscreen .mtop .msearch input::placeholder { color: rgba(255, 255, 255, 0.7); }
  .mapscreen .mtop .msearch__clear { color: rgba(255, 255, 255, 0.75); }
}

/* ═══ Toifalar qatori: strelkalar, sudrash, indikator; menyu pastidagi murojaat tugmasi ═══ */
@media (min-width: 1100px) {
  .chipsbox { position: relative; margin: 0 0 30px; }
  .chipsbox.is-drag .dash__chips { cursor: grabbing; scroll-behavior: auto; }
  .chipsbox.is-drag .dchip { pointer-events: none; }

  /* Chetlarda «suzib» turuvchi oyna strelkalar — surish mumkin bo'lgan tomonda ko'rinadi */
  .chips__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--g-dark);
    box-shadow: 0 12px 26px -12px rgba(8, 22, 7, 0.75);
    transition: opacity 0.25s, transform 0.3s var(--ease), background 0.2s;
  }
  .chips__nav--prev { left: -14px; }
  .chips__nav--next { right: -14px; }
  .chips__nav:hover { background: #fff; transform: scale(1.08); }
  .chips__nav--prev:hover svg { transform: translateX(-2px); }
  .chips__nav--next:hover svg { transform: translateX(2px); }
  .chips__nav svg { transition: transform 0.25s var(--ease); }
  .chipsbox.is-start .chips__nav--prev,
  .chipsbox.is-end .chips__nav--next,
  .chipsbox.is-fit .chips__nav { opacity: 0; pointer-events: none; transform: scale(0.7); }
  /* O'ng strelka sekin «chaqiradi» — qatorni surish mumkinligini bildiradi */
  .chipsbox.is-start:not(.is-fit) .chips__nav--next { animation: nudge 2.4s var(--ease) 1.2s 2; }
  @keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }

  /* Pastdagi indikator: qator qayerigacha ko'rilgani */
  .chips__bar {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -12px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
    transition: opacity 0.25s;
  }
  .chips__bar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.75); transition: left 0.12s linear, width 0.2s; }
  .chipsbox.is-fit .chips__bar { opacity: 0; }

  /* Menyu pastidagi murojaat tugmasi (ijtimoiyportal.uz) */
  .rail__cta {
    margin-top: auto;
    height: auto;
    min-height: 52px;
    padding: 0 15px;
    background: linear-gradient(160deg, #3d7ff2, #1f4fd0);
    color: #fff;
    box-shadow: 0 14px 26px -14px rgba(31, 79, 208, 0.9);
  }
  .rail__cta:hover { background: linear-gradient(160deg, #4b8af5, #2556da); color: #fff; }
  .rail__cta .rail__label b { display: block; font-size: 14.5px; font-weight: 600; }
  .rail__cta .rail__label small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.86); }
  .rail__cta + .rail__sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chips__nav { animation: none !important; }
}