/* ==========================================================================
   Hamroh — mobil ilova
   Dizayn tamoyillari:
     · brend shrifti ilova ichiga joylangan — sayt bilan bir xil ko'rinadi
       va internetsiz ham to'g'ri chiqadi (bank ilovalaridagi yondashuv)
     · xavfsiz zonalar (notch / home indicator) hisobga olingan
     · barcha bosiladigan element ≥ 44px
     · yorug'/tungi rejim tizimga ergashadi, qo'lda ham almashtiriladi
   ========================================================================== */

/* Shriftlar ilova ichida — tarmoqqa bog'liq emas */
@font-face{
  font-family:'Inter';
  font-style:normal; font-weight:400 800; font-display:swap;
  src:url('./fonts/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+0304,U+0308,U+0329,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('./fonts/inter-latin-ext.woff2') format('woff2');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal; font-weight:600 900; font-display:swap;
  src:url('./fonts/fraunces-latin.woff2') format('woff2');
  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;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal; font-weight:600 900; font-display:swap;
  src:url('./fonts/fraunces-latin-ext.woff2') format('woff2');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokenlar */
:root{
  /* brend */
  --ink:#0F2438;
  --teal:#114B5F;
  --teal-light:#1B6B84;
  --gold:#C9A227;
  --gold-light:#E4C766;
  --up:#2F855A;
  --down:#C0392B;
  --warn:#B7791F;

  /* yuzalar — yorug' rejim */
  --bg:#F4F1EA;
  --surface:#FFFFFF;
  --surface-2:#FAF8F3;
  --elevated:#FFFFFF;
  --text:#0F2438;
  --muted:#5A6B7D;
  --faint:#8A99A8;
  --line:rgba(15,36,56,.10);
  --line-strong:rgba(15,36,56,.18);
  --scrim:rgba(8,19,31,.45);
  --skeleton:rgba(15,36,56,.07);

  /* o'lchamlar */
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-xl:28px;
  --tap:44px;

  --sh-1:0 1px 2px rgba(15,36,56,.06), 0 2px 8px -2px rgba(15,36,56,.08);
  --sh-2:0 4px 16px -4px rgba(15,36,56,.14);
  --sh-3:0 20px 48px -20px rgba(15,36,56,.35);

  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);

  /* xavfsiz zonalar */
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px);
  --sar:env(safe-area-inset-right, 0px);

  --appbar-h:56px;
  --tabbar-h:60px;

  --font:'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
         Roboto, "Helvetica Neue", system-ui, sans-serif;
  --display:'Fraunces', Georgia, "Times New Roman", serif;
  --mono:ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Tipografiya — sayt bilan bir xil tamoyil */
  --track-display:-.022em;
  --track-body:.011em;
}

html[data-theme="dark"]{
  --bg:#08131F;
  --surface:#0F2130;
  --surface-2:#132838;
  --elevated:#162B3C;
  --text:#E8F0F7;
  --muted:#9BB0C4;
  --faint:#6D8298;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  --scrim:rgba(0,0,0,.62);
  --skeleton:rgba(255,255,255,.07);
  --teal-light:#57B3CE;
  --sh-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px -2px rgba(0,0,0,.5);
  --sh-2:0 4px 16px -4px rgba(0,0,0,.55);
  --sh-3:0 20px 48px -20px rgba(0,0,0,.8);
}

/* ------------------------------------------------------------------ asos */
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}

/* `hidden` atributi HAR DOIM yashirsin.
   Brauzerning standart qoidasi `[hidden]{display:none}` juda kuchsiz —
   `.tab{display:flex}` kabi oddiy qoida ham uni bosib ketadi. Shu sababli
   admin tabi yashirin bo'lishi kerak bo'lgani holda ko'rinib qolgan edi. */
[hidden]{display:none !important;}

html,body{height:100%;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.5;
  letter-spacing:var(--track-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
  overscroll-behavior-y:none;
  /* Ilova chrome'i tanlanmaydi — nativ his uchun */
  -webkit-user-select:none; user-select:none;
  overflow:hidden;
}
p, .selectable, input, textarea{-webkit-user-select:text; user-select:text;}

/* Yirik sarlavhalar — brend serif shrifti (saytdagidek) */
.splash-name, .hero h2, .sect-title h2, .login-wrap h2, .empty b{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:var(--track-display);
  font-optical-sizing:auto;
}

/* Pul va raqamlar bir xil kenglikda — bank interfeysining asosiy qoidasi */
.calc-out .amt, .calc-legend b, .slider-top output, .scale, .rate .val,
.hero-stat b, .kpi .v, .feat .big, .status-clock, .detail-row .v, .tiny.mono{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}

button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
a{color:inherit; text-decoration:none;}
svg{display:block;}
img{display:block; max-width:100%;}
:focus-visible{outline:2.5px solid var(--gold); outline-offset:2px; border-radius:6px;}

/* --------------------------------------------------------------- splash */
.splash{
  position:fixed; inset:0; z-index:500;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:linear-gradient(165deg, #0F2438 0%, #114B5F 100%);
  color:#fff;
  transition:opacity .38s var(--ease-out), visibility .38s;
}
.splash.hide{opacity:0; visibility:hidden; pointer-events:none;}
.splash-mark{font-size:64px; line-height:1; animation:pop .5s var(--ease-out) both;}
.splash-name{font-size:29px; font-weight:800; letter-spacing:-.5px; animation:pop .5s .06s var(--ease-out) both;}
.splash-sub{font-size:13.5px; opacity:.62; animation:pop .5s .12s var(--ease-out) both;}
.splash-bar{width:120px; height:3px; border-radius:2px; background:rgba(255,255,255,.16); overflow:hidden; margin-top:22px;}
.splash-bar i{display:block; height:100%; width:40%; border-radius:2px; background:var(--gold); animation:slide 1.05s var(--ease) infinite;}
@keyframes pop{from{opacity:0; transform:translateY(9px) scale(.96)} to{opacity:1; transform:none}}
@keyframes slide{0%{transform:translateX(-100%)} 100%{transform:translateX(300%)}}

/* ------------------------------------------------------------------ app */
.app{
  display:flex; flex-direction:column;
  height:100%;
  padding-left:var(--sal); padding-right:var(--sar);
}

/* --------------------------------------------------------------- appbar */
.appbar{
  flex:none; z-index:30;
  padding-top:var(--sat);
  background:var(--ink);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.06), var(--sh-1);
}
html[data-theme="dark"] .appbar{background:#0B1A28;}
.appbar-in{
  height:var(--appbar-h);
  display:flex; align-items:center; gap:8px;
  padding:0 8px 0 14px;
}
.appbar-back{
  width:var(--tap); height:var(--tap); margin-left:-10px;
  display:grid; place-items:center; border-radius:50%;
  transition:background .15s, transform .12s var(--ease-out);
}
.appbar-back:active{background:rgba(255,255,255,.12); transform:scale(.92);}
.appbar-brand{display:flex; align-items:center; gap:10px; min-width:0; flex:1;}
.appbar-mark{font-size:24px; line-height:1;}
.appbar-text{display:flex; flex-direction:column; line-height:1.15; min-width:0;}
.appbar-text b{font-size:16.5px; font-weight:700; letter-spacing:-.2px;}
.appbar-text small{font-size:11px; opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.appbar-title{
  flex:1; font-size:17px; font-weight:650; letter-spacing:-.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.appbar-actions{display:flex; align-items:center; gap:2px;}
.icon-btn{
  width:var(--tap); height:var(--tap);
  display:grid; place-items:center; border-radius:50%;
  transition:background .15s, transform .12s var(--ease-out);
}
.icon-btn:active{background:rgba(255,255,255,.14); transform:scale(.9);}
.icon-btn .i-sun{display:none;}
html[data-theme="dark"] .icon-btn .i-sun{display:block;}
html[data-theme="dark"] .icon-btn .i-moon{display:none;}
.icon-btn.on{color:var(--gold-light);}

.offline-bar{
  background:var(--warn); color:#fff;
  font-size:12px; font-weight:600; text-align:center;
  padding:6px 12px;
}

/* -------------------------------------------------------------- ekranlar */
.screens{flex:1; position:relative; min-height:0;}
.screen{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding:16px 16px calc(24px + var(--tabbar-h) + var(--sab));
}
.screen[hidden]{display:none;}
.screen.enter{animation:screenIn .28s var(--ease-out) both;}
@keyframes screenIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* pull-to-refresh */
.ptr{
  position:absolute; top:0; left:50%; transform:translate(-50%,-46px);
  width:34px; height:34px; border-radius:50%;
  background:var(--surface); box-shadow:var(--sh-2);
  display:grid; place-items:center; z-index:5;
  transition:transform .22s var(--ease-out), opacity .22s;
  opacity:0; pointer-events:none;
}
.ptr.show{opacity:1;}
.ptr svg{width:18px; height:18px; color:var(--teal-light);}
.ptr.spin svg{animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* --------------------------------------------------------------- tabbar */
.tabbar{
  flex:none; z-index:40;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  height:calc(var(--tabbar-h) + var(--sab));
  padding-bottom:var(--sab);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);
}
.tab{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--faint);
  font-size:10.5px; font-weight:600; letter-spacing:-.1px;
  transition:color .18s;
  padding-top:4px;
}
.tab svg{width:23px; height:23px;}
.tab.is-active{color:var(--teal-light);}
html[data-theme="light"] .tab.is-active{color:var(--teal);}
.tab:active{transform:scale(.94);}
.tab-accent .tab-fab{
  display:grid; place-items:center;
  width:44px; height:32px; border-radius:12px;
  background:linear-gradient(160deg, var(--gold-light), var(--gold));
  color:#3A2C05;
  box-shadow:0 4px 12px -3px rgba(201,162,39,.6);
  transition:transform .16s var(--ease-out);
}
.tab-accent .tab-fab svg{width:19px; height:19px;}
.tab-accent:active .tab-fab{transform:scale(.9);}
.tab-accent.is-active .tab-fab{transform:translateY(-1px) scale(1.04);}
.tab-badge{
  position:absolute; top:4px; right:calc(50% - 20px);
  min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--down); color:#fff;
  font-size:10px; font-weight:700; font-style:normal;
  display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--surface);
}

/* =============================== UMUMIY BO'LAKLAR ======================== */
.stack{display:flex; flex-direction:column; gap:14px;}
.row{display:flex; align-items:center; gap:10px;}
.spread{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.grow{flex:1; min-width:0;}
.mt{margin-top:18px;}
.center{text-align:center;}

.sect-title{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:22px 2px 10px;
}
.sect-title h2{font-size:17.5px; font-weight:750; letter-spacing:-.35px;}
.sect-title a, .sect-title button{font-size:13px; font-weight:600; color:var(--teal-light);}

.card{
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:16px;
  box-shadow:var(--sh-1);
  border:1px solid var(--line);
}
.card.flat{box-shadow:none;}
.card.tap{transition:transform .14s var(--ease-out), box-shadow .14s;}
.card.tap:active{transform:scale(.985); box-shadow:var(--sh-2);}

.muted{color:var(--muted);}
.faint{color:var(--faint);}
.tiny{font-size:12px;}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  padding:22px 20px 20px;
  background:linear-gradient(155deg, #123049 0%, #114B5F 62%, #0E3F52 100%);
  color:#fff;
  box-shadow:var(--sh-2);
}
.hero::before{
  content:""; position:absolute; width:230px; height:230px; border-radius:50%;
  top:-110px; right:-70px;
  background:radial-gradient(circle, rgba(201,162,39,.42), transparent 68%);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.5), transparent 72%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.5), transparent 72%);
  pointer-events:none;
}
.hero > *{position:relative;}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:650; letter-spacing:.3px; text-transform:uppercase;
  color:var(--gold-light);
  background:rgba(201,162,39,.14); border:1px solid rgba(228,199,102,.28);
  padding:5px 11px; border-radius:999px;
}
.live-dot{width:6px; height:6px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:pulse 2s infinite;}
.live-dot.off{background:#F87171; animation:none;}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(74,222,128,0)} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.hero h2{margin:13px 0 8px; font-size:26px; font-weight:800; line-height:1.16; letter-spacing:-.7px;}
/* Ajratilgan so'z — oltin gradient, ustidan sekin o'tuvchi yorug'lik */
.hero h2 em{
  font-style:normal; position:relative; display:inline-block;
  background:linear-gradient(100deg,
    var(--gold) 0%, var(--gold-light) 26%, #FFF6DA 46%, var(--gold-light) 62%, var(--gold) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:goldSweep 6.5s ease-in-out infinite;
}
@keyframes goldSweep{
  0%, 12%{background-position:120% 0;}
  55%, 100%{background-position:-30% 0;}
}
.hero h2 em::after{
  content:''; position:absolute; left:2%; right:2%; bottom:.06em; height:.06em;
  border-radius:99px; opacity:.55;
  background:linear-gradient(90deg, transparent, var(--gold-light), transparent);
}
/* So'zlar birin-ketin ko'tariladi */
.hero-title .w{
  display:inline-block; opacity:0; transform:translateY(.36em);
  animation:wordUp .62s var(--ease-out) forwards;
  animation-delay:calc(var(--i, 0) * 55ms);
}
@keyframes wordUp{to{opacity:1; transform:none;}}

/* ---------- Jonli yangiliklar lentasi ---------- */
.news-strip{
  display:flex; align-items:center; gap:10px;
  margin:0 -16px 14px; padding:0 16px;
  height:34px; overflow:hidden;
  background:linear-gradient(90deg, var(--surface-2), var(--surface) 45%, var(--surface-2));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.news-tag{
  display:flex; align-items:center; gap:6px; flex:none;
  font-size:9.5px; font-weight:750; letter-spacing:.11em; text-transform:uppercase;
  color:#E05252;
}
.news-tag i{
  width:6px; height:6px; border-radius:50%; background:#E05252;
  box-shadow:0 0 0 0 rgba(224,82,82,.6); animation:newsPulse 1.8s infinite;
}
@keyframes newsPulse{
  0%{box-shadow:0 0 0 0 rgba(224,82,82,.6)}
  70%{box-shadow:0 0 0 7px rgba(224,82,82,0)}
  100%{box-shadow:0 0 0 0 rgba(224,82,82,0)}
}
.news-view{
  flex:1; min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.news-run{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:newsScroll var(--news-speed, 28s) linear infinite;
}
@keyframes newsScroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.news-one{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:12.2px; font-weight:500; color:var(--muted);
}
.news-one b{font-size:13px; font-weight:400;}
.news-one.t-good{color:var(--up);}
.news-one.t-warn{color:var(--warn);}
.news-one.t-hot{color:var(--down);}
.hero p{font-size:13.8px; line-height:1.55; opacity:.8;}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px;}
.hero-stat{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r); padding:10px 8px; text-align:center;
}
.hero-stat b{display:block; font-size:19px; font-weight:800; letter-spacing:-.5px; color:var(--gold-light);}
.hero-stat span{display:block; font-size:10.5px; opacity:.68; margin-top:2px; line-height:1.25;}
.hero-cta{
  display:flex; gap:9px; margin-top:16px;
}

/* --------------------------------------------------------------- tugmalar */
.btn{
  min-height:var(--tap);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:14px;
  font-size:15px; font-weight:650; letter-spacing:-.2px;
  transition:transform .14s var(--ease-out), opacity .15s, background .18s;
}
.btn:active{transform:scale(.965);}
.btn[disabled]{opacity:.55; pointer-events:none;}
.btn-gold{background:linear-gradient(160deg, var(--gold-light), var(--gold)); color:#3A2C05; box-shadow:0 5px 16px -6px rgba(201,162,39,.75);}
.btn-teal{background:var(--teal); color:#fff;}
html[data-theme="dark"] .btn-teal{background:var(--teal-light); color:#052330;}
.btn-ghost{background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.18);}
.btn-soft{background:var(--surface-2); color:var(--text); border:1px solid var(--line);}
.btn-danger{background:rgba(192,57,43,.12); color:var(--down); border:1px solid rgba(192,57,43,.25);}
.btn-block{width:100%;}
.btn-sm{min-height:36px; padding:8px 14px; font-size:13.5px; border-radius:11px;}

/* ------------------------------------------------------------ ish holati */
.status-card{
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--sh-1);
}
.status-card .dot{width:10px; height:10px; border-radius:50%; flex:none;}
.status-card.open .dot{background:var(--up); box-shadow:0 0 0 4px rgba(47,133,90,.16);}
.status-card.closed .dot{background:var(--down); box-shadow:0 0 0 4px rgba(192,57,43,.14);}
.status-card b{display:block; font-size:14.5px; font-weight:700;}
.status-card span{display:block; font-size:12.3px; color:var(--muted); margin-top:1px;}
.status-clock{font-family:var(--mono); font-size:15px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------- kurslar */
.rates{display:grid; grid-template-columns:repeat(3,1fr); gap:9px;}
.rate{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 10px; text-align:center; box-shadow:var(--sh-1);
}
.rate .code{font-size:11px; font-weight:750; color:var(--muted); letter-spacing:.5px;}
.rate .val{font-size:15px; font-weight:750; margin-top:3px; letter-spacing:-.3px; font-variant-numeric:tabular-nums;}
.rate .cur{font-size:10px; color:var(--faint); font-weight:600;}
.rate.live .code::after{content:"●"; color:var(--up); font-size:7px; vertical-align:middle; margin-left:4px;}

/* --------------------------------------------------------------- xususiyat */
.feats{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
.feat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:15px 14px; box-shadow:var(--sh-1);
}
.feat .ic{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  font-size:19px; margin-bottom:10px;
  background:linear-gradient(150deg, rgba(201,162,39,.18), rgba(27,107,132,.14));
}
.feat b{display:block; font-size:14px; font-weight:700; letter-spacing:-.2px;}
.feat .big{font-size:20px; font-weight:800; color:var(--teal-light); letter-spacing:-.6px; margin:2px 0;}
html[data-theme="light"] .feat .big{color:var(--teal);}
.feat p{font-size:12.4px; color:var(--muted); margin-top:5px; line-height:1.42;}

/* ---------------------------------------------------------------- qadamlar */
.steps{display:flex; flex-direction:column; gap:0;}
.step{display:flex; gap:13px; position:relative; padding-bottom:18px;}
.step:last-child{padding-bottom:0;}
.step::before{
  content:""; position:absolute; left:15px; top:32px; bottom:2px; width:2px;
  background:linear-gradient(var(--line-strong), transparent);
}
.step:last-child::before{display:none;}
.step .n{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; font-size:12.5px; font-weight:750;
  background:var(--teal); color:#fff; z-index:1;
}
html[data-theme="dark"] .step .n{background:var(--teal-light); color:#052330;}
.step b{display:block; font-size:14.5px; font-weight:700;}
.step p{font-size:12.8px; color:var(--muted); margin-top:3px; line-height:1.45;}

/* ---------------------------------------------------------------- fikrlar */
.tst-scroll{
  display:flex; gap:11px; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:0 -16px; padding:2px 16px 6px;
  scrollbar-width:none;
}
.tst-scroll::-webkit-scrollbar{display:none;}
.tst{
  flex:0 0 82%; scroll-snap-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:15px; box-shadow:var(--sh-1);
}
.tst .stars{color:var(--gold); font-size:13px; letter-spacing:1px;}
.tst p{font-size:13.3px; color:var(--muted); margin:8px 0 12px; line-height:1.5;}
.tst .who{display:flex; align-items:center; gap:10px;}
.tst .av{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:12.5px; font-weight:750;
  background:linear-gradient(150deg, var(--teal), var(--teal-light)); color:#fff;
}
.tst .who b{display:block; font-size:13.2px; font-weight:700;}
.tst .who span{display:block; font-size:11.5px; color:var(--faint);}

/* -------------------------------------------------------------------- FAQ */
.faq details{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:9px; overflow:hidden;
}
.faq summary{
  list-style:none; cursor:pointer;
  padding:14px 15px; font-size:14px; font-weight:650; line-height:1.4;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:var(--tap);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:""; flex:none; width:9px; height:9px; margin-right:3px;
  border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);
  transform:rotate(45deg) translateY(-2px); transition:transform .22s var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px);}
.faq .a{padding:0 15px 15px; font-size:13.3px; color:var(--muted); line-height:1.55;}

/* --------------------------------------------------------------- kalkulyator */
.calc-out{
  border-radius:var(--r-xl); padding:20px 18px; text-align:center;
  background:linear-gradient(155deg, #123049, #114B5F); color:#fff;
  box-shadow:var(--sh-2);
}
.calc-out small{font-size:12px; opacity:.65; font-weight:600; letter-spacing:.3px; text-transform:uppercase;}
.calc-out .amt{font-size:34px; font-weight:850; letter-spacing:-1.2px; margin:4px 0 2px; font-variant-numeric:tabular-nums;}
.calc-out .amt span{font-size:15px; font-weight:600; opacity:.68; letter-spacing:0;}
.calc-donut{display:flex; align-items:center; gap:16px; margin-top:16px; text-align:left;}
.calc-donut svg{flex:none;}
.calc-legend{flex:1; display:flex; flex-direction:column; gap:7px;}
.calc-legend div{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.6px;}
.calc-legend .lk{display:flex; align-items:center; gap:7px; opacity:.78;}
.calc-legend i{width:8px; height:8px; border-radius:50%; flex:none;}
.calc-legend b{font-weight:700; font-variant-numeric:tabular-nums;}

.slider-block{margin-bottom:20px;}
.slider-block:last-child{margin-bottom:0;}
.slider-top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px;}
.slider-top label{font-size:13.5px; font-weight:650; color:var(--muted);}
.slider-top output{font-size:16px; font-weight:750; letter-spacing:-.3px; font-variant-numeric:tabular-nums;}
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:34px; background:none; display:block;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:3px;
  background:linear-gradient(90deg, var(--gold) var(--pct,50%), var(--line-strong) var(--pct,50%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; margin-top:-10px; border-radius:50%;
  background:#fff; border:1px solid rgba(15,36,56,.12);
  box-shadow:0 2px 8px rgba(15,36,56,.28);
}
input[type=range]::-moz-range-track{height:6px; border-radius:3px; background:var(--line-strong);}
input[type=range]::-moz-range-progress{height:6px; border-radius:3px; background:var(--gold);}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:#fff;
  border:1px solid rgba(15,36,56,.12); box-shadow:0 2px 8px rgba(15,36,56,.28);
}
.scale{display:flex; justify-content:space-between; font-size:11.5px; color:var(--faint); margin-top:-2px;}
.chips{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px;}
.chip{
  min-height:34px; padding:7px 13px; border-radius:11px;
  background:var(--surface-2); border:1px solid var(--line);
  font-size:13px; font-weight:600; color:var(--muted);
  transition:all .16s var(--ease-out);
}
.chip:active{transform:scale(.94);}
.chip.on{background:var(--teal); border-color:var(--teal); color:#fff;}
html[data-theme="dark"] .chip.on{background:var(--teal-light); border-color:var(--teal-light); color:#052330;}

.note{
  font-size:12.2px; color:var(--muted); line-height:1.5;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 13px;
}

/* ----------------------------------------------------------------- forma */
.field{margin-bottom:14px;}
.field > label{display:block; font-size:12.8px; font-weight:650; color:var(--muted); margin-bottom:6px;}
.field .req{color:var(--down);}
.input, .field input, .field select, .field textarea{
  width:100%; min-height:var(--tap);
  padding:12px 14px; border-radius:13px;
  background:var(--surface); color:var(--text);
  border:1.5px solid var(--line);
  font-family:inherit; font-size:16px; /* 16px — iOS zoom qilmasligi uchun */
  transition:border-color .18s, box-shadow .18s;
  appearance:none; -webkit-appearance:none;
}
.field textarea{min-height:84px; resize:vertical; line-height:1.45;}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6B7D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
  padding-right:38px;
}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus{
  outline:none; border-color:var(--teal-light);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--teal-light) 20%, transparent);
}
.field .err{display:block; font-size:12px; color:var(--down); margin-top:5px; font-weight:600;}
.field.has-err input, .field.has-err select, .field.has-err textarea{border-color:var(--down);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.switch{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:var(--tap); padding:8px 0;
}
.switch label{font-size:14px; font-weight:600; flex:1;}
.switch input{
  appearance:none; -webkit-appearance:none; flex:none;
  width:50px; height:30px; border-radius:15px; background:var(--line-strong);
  position:relative; transition:background .22s var(--ease-out); cursor:pointer;
}
.switch input::after{
  content:""; position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.25);
  transition:transform .22s var(--ease-out);
}
.switch input:checked{background:var(--up);}
.switch input:checked::after{transform:translateX(20px);}

.form-msg{
  font-size:13px; font-weight:600; padding:12px 14px; border-radius:12px; margin-top:12px;
  display:none;
}
.form-msg.ok{display:block; background:rgba(47,133,90,.13); color:var(--up);}
.form-msg.err{display:block; background:rgba(192,57,43,.12); color:var(--down);}

/* ---------------------------------------------------------------- aloqa */
.info{
  display:flex; align-items:center; gap:13px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 14px; margin-bottom:9px; min-height:var(--tap);
  box-shadow:var(--sh-1);
  transition:transform .14s var(--ease-out);
}
a.info:active{transform:scale(.985);}
.info .ic{
  width:38px; height:38px; border-radius:12px; flex:none;
  display:grid; place-items:center; font-size:17px;
  background:linear-gradient(150deg, rgba(27,107,132,.16), rgba(201,162,39,.14));
}
.info b{display:block; font-size:11.5px; color:var(--faint); font-weight:650; text-transform:uppercase; letter-spacing:.4px;}
.info span{display:block; font-size:14px; font-weight:600; margin-top:2px; line-height:1.35;}
.socials{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px;}
.social{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); border-radius:13px;
  background:var(--surface); border:1px solid var(--line);
  font-size:13.5px; font-weight:650; box-shadow:var(--sh-1);
  transition:transform .14s var(--ease-out);
}
.social:active{transform:scale(.96);}

/* ------------------------------------------------------------------ video */
.video{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:var(--r); overflow:hidden; background:#000;
  margin-bottom:11px; box-shadow:var(--sh-1);
}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ------------------------------------------------------------------ sheet */
.sheet-root{position:fixed; inset:0; z-index:200;}
.sheet-root[hidden]{display:none;}
.sheet-scrim{
  position:absolute; inset:0; background:var(--scrim);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:fade .25s var(--ease-out) both;
}
@keyframes fade{from{opacity:0} to{opacity:1}}
.sheet{
  position:absolute; left:0; right:0; bottom:0;
  max-height:92%;
  display:flex; flex-direction:column;
  background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-3);
  padding-bottom:var(--sab);
  animation:sheetUp .34s var(--ease) both;
}
.sheet.closing{animation:sheetDown .24s var(--ease-out) both;}
@keyframes sheetUp{from{transform:translateY(100%)} to{transform:none}}
@keyframes sheetDown{from{transform:none} to{transform:translateY(100%)}}
.sheet-grip{
  width:38px; height:4.5px; border-radius:3px; background:var(--line-strong);
  margin:9px auto 0; flex:none;
}
.sheet-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px 10px; flex:none;
}
.sheet-head h2{font-size:18px; font-weight:750; letter-spacing:-.4px;}
.sheet-x{
  width:32px; height:32px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:15px;
  background:var(--surface-2); color:var(--muted);
}
.sheet-x:active{transform:scale(.9);}
.sheet-body{
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:0 18px 20px;
}

/* ------------------------------------------------------------------ toast */
.toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar-h) + var(--sab) + 16px);
  transform:translate(-50%, 14px);
  max-width:calc(100% - 40px);
  background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:14px;
  font-size:13.5px; font-weight:600; text-align:center;
  box-shadow:var(--sh-3); border:1px solid rgba(255,255,255,.12);
  opacity:0; pointer-events:none; z-index:300;
  transition:opacity .25s, transform .25s var(--ease-out);
}
html[data-theme="dark"] .toast{background:#1E3A50;}
.toast.show{opacity:1; transform:translate(-50%,0);}
.toast.ok{background:var(--up);}
.toast.err{background:var(--down);}

/* -------------------------------------------------------------- skeleton */
.sk{
  background:var(--skeleton); border-radius:10px;
  animation:shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{opacity:1} 50%{opacity:.45}}
.sk-hero{height:210px; border-radius:var(--r-xl);}
.sk-line{height:13px; margin-bottom:9px;}
.sk-card{height:88px; border-radius:var(--r-lg);}

/* ---------------------------------------------------------- bo'sh holat */
.empty{
  text-align:center; padding:44px 20px; color:var(--muted);
}
.empty .em{font-size:42px; margin-bottom:10px;}
.empty b{display:block; font-size:15.5px; font-weight:700; color:var(--text); margin-bottom:5px;}
.empty p{font-size:13.2px; line-height:1.5;}

/* ============================== ADMIN PANEL ============================== */
.login-wrap{
  min-height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:8px 4px 30px;
}
.login-mark{
  width:66px; height:66px; border-radius:20px; margin:0 auto 16px;
  display:grid; place-items:center; font-size:32px;
  background:linear-gradient(155deg, var(--teal), var(--ink));
  box-shadow:var(--sh-2);
}
.login-wrap h2{text-align:center; font-size:21px; font-weight:800; letter-spacing:-.5px;}
.login-wrap > p{text-align:center; font-size:13.2px; color:var(--muted); margin:5px 0 24px;}

.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 15px; box-shadow:var(--sh-1); position:relative; overflow:hidden;
}
.kpi .k{font-size:11.5px; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;}
.kpi .v{font-size:27px; font-weight:850; letter-spacing:-1px; margin-top:3px; font-variant-numeric:tabular-nums;}
.kpi.hot .v{color:var(--down);}
.kpi.good .v{color:var(--up);}
.kpi .spark{position:absolute; right:-6px; bottom:-6px; font-size:34px; opacity:.07;}

.filters{
  display:flex; gap:7px; overflow-x:auto; scrollbar-width:none;
  margin:0 -16px 12px; padding:2px 16px;
}
.filters::-webkit-scrollbar{display:none;}
.filters .chip{white-space:nowrap; flex:none;}

.app-item{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; margin-bottom:9px; box-shadow:var(--sh-1);
  transition:transform .14s var(--ease-out);
  width:100%; text-align:left;
}
.app-item:active{transform:scale(.985);}
.app-item .av{
  width:40px; height:40px; border-radius:13px; flex:none;
  display:grid; place-items:center; font-size:14px; font-weight:750; color:#fff;
  background:linear-gradient(150deg, var(--teal), var(--teal-light));
}
.app-item .nm{font-size:14.3px; font-weight:700; letter-spacing:-.2px;}
.app-item .meta{font-size:12px; color:var(--muted); margin-top:2px; display:flex; gap:7px; flex-wrap:wrap;}
.pill{
  flex:none; font-size:10.5px; font-weight:750; padding:4px 9px; border-radius:8px;
  text-transform:uppercase; letter-spacing:.3px; white-space:nowrap;
}
.pill.yangi{background:rgba(192,57,43,.13); color:var(--down);}
.pill.korib_chiqildi{background:rgba(27,107,132,.14); color:var(--teal-light);}
.pill.tasdiqlandi{background:rgba(47,133,90,.14); color:var(--up);}
.pill.rad_etildi{background:rgba(113,128,150,.16); color:var(--faint);}

.detail-row{
  display:flex; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line);
  font-size:14px;
}
.detail-row:last-child{border-bottom:none;}
.detail-row .k{color:var(--muted); font-weight:600; flex:none;}
.detail-row .v{text-align:right; font-weight:600; word-break:break-word;}

.status-picker{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px;}
.status-picker button{
  min-height:var(--tap); border-radius:12px; font-size:13.5px; font-weight:650;
  border:1.5px solid var(--line); background:var(--surface-2); color:var(--muted);
  transition:all .16s var(--ease-out);
}
.status-picker button:active{transform:scale(.96);}
.status-picker button.on{border-color:currentColor;}
.status-picker button.on.yangi{background:rgba(192,57,43,.12); color:var(--down);}
.status-picker button.on.korib_chiqildi{background:rgba(27,107,132,.14); color:var(--teal-light);}
.status-picker button.on.tasdiqlandi{background:rgba(47,133,90,.14); color:var(--up);}
.status-picker button.on.rad_etildi{background:rgba(113,128,150,.16); color:var(--faint);}

.adm-nav{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:4px;}
.adm-link{
  display:flex; align-items:center; gap:11px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; box-shadow:var(--sh-1); min-height:var(--tap);
  transition:transform .14s var(--ease-out);
}
.adm-link:active{transform:scale(.97);}
.adm-link .ic{font-size:20px;}
.adm-link b{font-size:13.8px; font-weight:700;}
.adm-link small{display:block; font-size:11.5px; color:var(--faint); font-weight:500;}

.list-item{
  display:flex; align-items:center; gap:11px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; margin-bottom:9px; box-shadow:var(--sh-1);
}
.list-item .grow b{font-size:13.8px; font-weight:650; line-height:1.35; display:block;}
.list-item .grow small{font-size:11.8px; color:var(--faint);}
.list-item .acts{display:flex; gap:6px; flex:none;}
.mini-btn{
  width:36px; height:36px; border-radius:10px; flex:none;
  display:grid; place-items:center; font-size:15px;
  background:var(--surface-2); border:1px solid var(--line);
}
.mini-btn:active{transform:scale(.9);}
.mini-btn.danger{color:var(--down);}
.off{opacity:.45;}

/* --------------------------------------------------- harakatni kamaytirish */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* --------------------------------------------------------- katta ekranlar */
@media (min-width:600px){
  .screen{max-width:620px; margin:0 auto; padding-left:24px; padding-right:24px;}
  .sheet{left:50%; transform:translateX(-50%); max-width:620px; border-radius:var(--r-xl) var(--r-xl) 0 0;}
  @keyframes sheetUp{from{transform:translate(-50%,100%)} to{transform:translate(-50%,0)}}
  @keyframes sheetDown{from{transform:translate(-50%,0)} to{transform:translate(-50%,100%)}}
  .tabbar{max-width:620px; margin:0 auto; border-left:1px solid var(--line); border-right:1px solid var(--line);}
  .appbar-in{max-width:620px; margin:0 auto; width:100%;}
}