:root{
  --bg:#f6f7fb;--card:#fff;--ink:#141a2e;--mut:#6b7389;--line:#e6e9f0;
  --pri:#4f46e5;--pri2:#eef0ff;--pri-ink:#fff;
  --ok:#16a34a;--okb:#e8f8ee;--okink:#0f6b31;--okline:#a7dcb9;
  --bad:#dc2626;--badb:#fdecec;--badink:#9b1c1c;--badline:#f3b4b4;
  --warn:#d97706;--warnb:#fff4e5;
  --shadow:0 14px 34px rgba(20,26,46,.12);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
:root[data-theme="dark"]{
  --bg:#0f1420;--card:#181f2e;--ink:#eef1f8;--mut:#93a0b8;--line:#263045;
  --pri:#6d64ff;--pri2:#232a4a;
  --ok:#22c55e;--okb:#13291d;--okink:#86efac;--okline:#1f5133;
  --bad:#f05252;--badb:#2e1719;--badink:#fca5a5;--badline:#5b2328;
  --warn:#f59e0b;--warnb:#2c2312;
  --shadow:0 14px 34px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;color:var(--ink);font-size:16px;overscroll-behavior:none}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}
input,textarea,select{font:inherit;color:var(--ink)}
#app{max-width:520px;margin:0 auto;min-height:100%;position:relative}
.splash{height:100vh;display:grid;place-items:center}
.logo{width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-weight:900;font-size:38px;display:grid;place-items:center;box-shadow:0 14px 30px rgba(79,70,229,.35)}

.screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-top:var(--safe-t)}
.screen.has-nav{padding-bottom:calc(104px + var(--safe-b))}
.top{padding:14px 18px 10px;display:flex;align-items:center;gap:12px}
.top h1{font-size:26px;font-weight:800;flex:1}
.top h2{font-size:19px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hello{font-size:14px;color:var(--mut)}
.ibtn{width:42px;height:42px;border-radius:13px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:19px;flex-shrink:0}
.body{flex:1;padding:4px 18px 24px;display:flex;flex-direction:column;gap:12px}
.card{background:var(--card);border-radius:18px;padding:16px;border:1px solid var(--line)}
.hero{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:none}
.hero .t{font-size:14px;opacity:.85}.hero .n{font-size:34px;font-weight:800;margin:4px 0}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 6px;text-align:center}
.stat b{display:block;font-size:22px}.stat span{font-size:12px;color:var(--mut)}
.sec{font-size:13px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
.unit{display:flex;align-items:center;gap:12px;text-align:left;width:100%}
.uic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:17px;flex-shrink:0}
.unit .m{flex:1;min-width:0}.unit .m b{font-size:16px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unit .m span{font-size:13px;color:var(--mut)}
.bar{height:6px;background:var(--line);border-radius:4px;margin-top:7px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ok);border-radius:4px;transition:width .3s}
.arrow{color:var(--mut);font-size:22px}
.btn{min-height:54px;border-radius:16px;background:var(--pri);color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;width:100%;transition:transform .1s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45}
.btn.soft{background:var(--pri2);color:var(--pri)}
.btn.red{background:var(--bad)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.sm{min-height:44px;font-size:15px;border-radius:13px}
.link{color:var(--mut);font-size:14px;text-align:center;padding:8px}
.fab{position:fixed;right:max(20px,calc(50% - 240px));bottom:calc(92px + var(--safe-b));width:60px;height:60px;border-radius:20px;background:var(--pri);color:#fff;font-size:32px;display:grid;place-items:center;box-shadow:0 10px 24px rgba(79,70,229,.4);z-index:5}
.word{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.word:last-child{border:none}
.word b{font-size:16px}.word .tr{font-size:15px;color:var(--mut);text-align:right}
.word small{display:block;font-size:12px;color:var(--mut);font-weight:500}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;padding:8px 14px;border-radius:20px;font-size:14px;font-weight:600;background:var(--card);border:1px solid var(--line)}
.chip.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.search{height:46px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;padding:0 14px;gap:8px}
.search input{border:none;outline:none;background:none;flex:1;font-size:16px}
.input,textarea.input{width:100%;border-radius:14px;border:1.5px solid var(--line);background:var(--card);padding:13px 14px;font-size:16px;outline:none}
.input:focus{border-color:var(--pri)}
textarea.input{line-height:1.7;min-height:220px;resize:vertical}
.hint{font-size:13px;color:var(--mut);line-height:1.5}
.opt{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;border:2px solid var(--line);background:var(--card);width:100%;text-align:left}
.opt.on{border-color:var(--pri);background:var(--pri2)}
.opt b{font-size:15px;display:block}.opt span{font-size:12.5px;color:var(--mut)}
.opt .oic{width:54px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0}
.radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);margin-left:auto;flex-shrink:0}
.opt.on .radio{border:7px solid var(--pri)}
.tabs{display:flex;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px}
.tabs button{flex:1;padding:10px;border-radius:10px;font-weight:600;font-size:14px;color:var(--mut)}
.tabs .on{background:var(--pri);color:#fff}
.prog{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--mut);flex:1}
.prog .bar{flex:1;margin:0;height:8px}.prog .bar i{background:var(--pri)}
.empty{text-align:center;padding:40px 20px;color:var(--mut)}
.empty .e{font-size:54px;margin-bottom:10px}
.empty b{display:block;color:var(--ink);font-size:18px;margin-bottom:6px}

/* Test */
.q{background:var(--card);border-radius:24px;border:1px solid var(--line);padding:30px 18px;text-align:center}
.q .l{font-size:13px;font-weight:700;color:var(--pri);letter-spacing:.06em;text-transform:uppercase}
.q .w{font-size:36px;font-weight:800;margin:12px 0 6px;word-break:break-word}
.q .s{font-size:14px;color:var(--mut)}
.ans{min-height:60px;border-radius:16px;background:var(--card);border:2px solid var(--line);display:flex;align-items:center;padding:10px 16px;font-size:17px;font-weight:600;gap:12px;width:100%;text-align:left;transition:background .15s,border-color .15s}
.ans .k{width:28px;height:28px;border-radius:9px;background:var(--bg);display:grid;place-items:center;font-size:13px;color:var(--mut);font-weight:700;flex-shrink:0}
.ans.ok{border-color:var(--ok);background:var(--okb);color:var(--okink)}.ans.ok .k{background:var(--ok);color:#fff}
.ans.bad{border-color:var(--bad);background:var(--badb);color:var(--badink)}.ans.bad .k{background:var(--bad);color:#fff}
.ans.dim{opacity:.45}
.toastc{border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:12px;font-size:14px}
.ring{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;margin:6px auto}
.ring>div{width:136px;height:136px;border-radius:50%;background:var(--bg);display:grid;place-items:center;text-align:center}
.ring b{font-size:40px;font-weight:800;display:block;line-height:1}.ring span{font-size:13px;color:var(--mut)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:14px;font-weight:700;font-size:15px}
.pill.r{background:var(--badb);color:var(--bad)}.pill.g{background:var(--okb);color:var(--ok)}

/* Flash */
.fl-head{display:flex;justify-content:space-between;align-items:center;padding:0 18px 6px;gap:8px}
.fl-head .mid{font-size:13px;color:var(--mut);font-weight:600;text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage{flex:1;position:relative;margin:4px 18px 8px;min-height:300px;perspective:1400px}
.fcard{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform}
.fcard.anim{transition:transform .35s cubic-bezier(.2,.8,.3,1),opacity .35s}
.fcard.under{transform:scale(.94) translateY(12px);opacity:.6;pointer-events:none}
.flipper{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.fcard.flipped .flipper{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:28px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;box-shadow:var(--shadow);text-align:center}
.face.front{background:var(--card);border:1px solid var(--line)}
.face.back{transform:rotateY(180deg);background:linear-gradient(150deg,#4f46e5,#7c3aed);color:#fff}
.face.back.uz2en{background:linear-gradient(150deg,#16a34a,#0d9488)}
.face .tag{position:absolute;top:18px;left:18px;padding:5px 11px;border-radius:10px;font-size:12px;font-weight:700;background:var(--pri2);color:var(--pri)}
.face.back .tag{background:rgba(255,255,255,.2);color:#fff}
.face .big{font-size:44px;font-weight:800;line-height:1.15;word-break:break-word}
.face .sm{font-size:17px;color:var(--mut)}
.face.back .sm{color:rgba(255,255,255,.8)}
.face .ex{font-size:15px;font-style:italic;background:rgba(255,255,255,.14);padding:10px 14px;border-radius:14px;line-height:1.4}
.face .tap{position:absolute;bottom:18px;left:0;right:0;font-size:13px;color:var(--mut)}
.face.back .tap{color:rgba(255,255,255,.8)}
.spk{width:50px;height:50px;border-radius:50%;background:var(--pri2);display:grid;place-items:center;font-size:22px}
.face.back .spk{background:rgba(255,255,255,.2)}
.stamp{position:absolute;top:56px;padding:6px 16px;border:4px solid;border-radius:14px;font-size:26px;font-weight:900;letter-spacing:.04em;opacity:0;z-index:3;pointer-events:none;background:var(--card)}
.stamp.yes{left:22px;color:var(--ok);border-color:var(--ok);transform:rotate(-12deg)}
.stamp.no{right:22px;color:var(--bad);border-color:var(--bad);transform:rotate(12deg)}
.fl-bottom{padding:4px 12px calc(16px + var(--safe-b))}
.fl-labels{display:flex;justify-content:space-between;font-size:13px;font-weight:700;padding:0 6px 10px}
.fl-ctrl{display:flex;align-items:center;justify-content:space-between}
.pile{width:66px;height:84px;position:relative}
.pile i{position:absolute;inset:0;border-radius:14px;border:2px solid}
.pile b{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:700;text-align:center;padding:4px;word-break:break-word;line-height:1.2}
.pile .badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);min-width:24px;height:24px;border-radius:12px;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;z-index:2;padding:0 6px}
.pile.r i{border-color:var(--badline);background:var(--badb)}.pile.r i:last-of-type{border-color:var(--bad)}.pile.r .badge{background:var(--bad)}
.pile.g i{border-color:var(--okline);background:var(--okb)}.pile.g i:last-of-type{border-color:var(--ok)}.pile.g .badge{background:var(--ok)}
.pile.empty i{border-style:dashed;background:none}
.rb{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:800;background:var(--card);transition:transform .1s}
.rb:active{transform:scale(.92)}
.rb.x{border:3px solid var(--bad);color:var(--bad)}.rb.v{border:3px solid var(--ok);color:var(--ok)}
.rb.u{width:50px;height:50px;border:2px solid var(--line);color:var(--mut);font-size:22px}
.rb.u:disabled{opacity:.35}

/* Modal + toast */
.mback{position:fixed;inset:0;background:rgba(10,14,25,.5);z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.modal{background:var(--card);width:100%;max-width:520px;border-radius:24px 24px 0 0;padding:20px 18px calc(20px + var(--safe-b));display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow:auto;animation:up .25s}
.modal h3{font-size:19px}
.modal p{color:var(--mut);font-size:15px;line-height:1.5}
.menu-item{display:flex;align-items:center;gap:12px;padding:14px 4px;font-size:16px;font-weight:500;border-bottom:1px solid var(--line);width:100%;text-align:left}
.menu-item:last-child{border:none}
.menu-item.danger{color:var(--bad)}
#toast-root{position:fixed;left:0;right:0;top:calc(14px + var(--safe-t));display:flex;justify-content:center;z-index:60;pointer-events:none}
.toast{background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;box-shadow:var(--shadow);animation:fade .2s;max-width:90%}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:.4}}

/* Settings */
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:500;width:100%;text-align:left}
.set:last-child{border:none}
.tog{width:48px;height:29px;border-radius:15px;background:var(--line);position:relative;flex-shrink:0;transition:background .2s}
.tog::after{content:'';position:absolute;left:3px;top:3px;width:23px;height:23px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tog.on{background:var(--pri)}.tog.on::after{left:22px}
.avatar{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;display:grid;place-items:center;font-size:28px;font-weight:800;flex-shrink:0}

/* Add preview */
.pv{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.pv:last-child{border:none}
.pv.badl{color:var(--bad)}
.pv.dup{color:var(--warn)}
.pv small{font-size:12px}

/* Login */
.login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:30px 24px;gap:16px;text-align:center}
.login h1{font-size:30px;font-weight:900}
.login p{color:var(--mut);line-height:1.5}
.tgbtn{background:#229ed9}
.feat{display:flex;flex-direction:column;gap:10px;text-align:left;margin:8px 0}
.feat div{display:flex;gap:12px;align-items:center;font-size:15px}
.feat span{width:40px;height:40px;border-radius:12px;background:var(--pri2);display:grid;place-items:center;font-size:19px;flex-shrink:0}

/* Admin */
.astat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.astat .stat b{font-size:20px}
.urow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.urow:last-child{border:none}
.urow .m{flex:1;min-width:0}
.urow .m b{display:block;font-size:15px}
.urow .m a{color:var(--pri);text-decoration:none;font-size:14px;font-weight:600}
.urow .m small{display:block;color:var(--mut);font-size:12.5px;margin-top:3px;line-height:1.45}
.sdot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex-shrink:0}
.fb{padding:12px 0;border-bottom:1px solid var(--line)}
.fb:last-child{border:none}
.fb .k{font-size:12px;font-weight:800;padding:3px 8px;border-radius:8px;display:inline-block}
.fb p{margin:6px 0 4px;font-size:15px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.fb small{color:var(--mut);font-size:12.5px}
.screen.has-nav .body{padding-bottom:84px}

/* Telegram Web App: to'liq ekranda yuqori/pastki xavfsiz joylar */
:root.tg{--safe-t:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));--safe-b:var(--tg-safe-area-inset-bottom,0px)}


/* =====================================================================
   "SUYUQ SHISHA" PASTKI MENYU (iPhone uslubida)
   Menyu ekran chetidan ajralib suzib turadi, tanlangan bo'limda shisha
   tomchi turadi va boshqasini bosganda tomchi oqib o'sha joyga o'tadi
   ===================================================================== */
.nav{position:fixed;left:max(12px,calc(50% - 248px));right:max(12px,calc(50% - 248px));bottom:calc(var(--safe-b) + 10px);height:68px;padding:0 6px;z-index:10;
  display:flex;align-items:center;border-radius:34px;isolation:isolate;
  background:color-mix(in srgb,var(--card) 72%,transparent);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);
  box-shadow:0 18px 40px rgba(30,24,90,.20),0 2px 6px rgba(30,24,90,.10),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.2)}
.nav::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 55%);opacity:.7}
.nav button{flex:1;position:relative;z-index:2;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10.5px;font-weight:600;color:var(--mut);border-radius:28px;transition:color .25s}
.nav button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.nav button.on{color:var(--pri)}
.nav button.on svg{transform:translateY(-1px) scale(1.12);stroke-width:2.3}
.nav button:active svg{transform:scale(.84)}
.nav .dot{position:absolute;top:4px;left:54%;background:var(--bad);color:#fff;font-size:10px;font-style:normal;font-weight:700;border-radius:9px;padding:1px 5px;box-shadow:0 2px 6px rgba(220,38,38,.4)}
/* o'rtadagi "+" — rangli shisha tomchi */
.nav .nav-add{flex:0 0 56px;width:56px;height:56px;border-radius:50%;color:#fff;margin:0 2px;
  background:radial-gradient(120% 120% at 30% 20%,#8b84ff 0%,var(--pri) 45%,#6d28d9 100%);
  box-shadow:0 10px 22px rgba(79,70,229,.45),inset 0 2px 3px rgba(255,255,255,.55),inset 0 -4px 8px rgba(40,20,120,.35);
  transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.nav .nav-add::after{content:"";position:absolute;top:7px;left:13px;width:20px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(1.5px);transform:rotate(-20deg)}
.nav .nav-add svg{width:26px;height:26px;stroke-width:2.6}
.nav .nav-add:active{transform:scale(.86)}
/* tomchi */
.nav-drop{position:absolute;top:6px;bottom:6px;left:0;width:64px;z-index:1;border-radius:28px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.38));border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 1px #fff,inset 0 -2px 6px rgba(79,70,229,.12),0 4px 14px rgba(60,50,140,.18);
  transition:transform .55s cubic-bezier(.34,1.45,.5,1),width .45s cubic-bezier(.34,1.45,.5,1),opacity .2s}
.nav-drop.on{opacity:1}
.nav-drop.moving{animation:dropStretch .55s cubic-bezier(.3,.9,.4,1)}
@keyframes dropStretch{0%{scale:1 1}35%{scale:1.35 .8}70%{scale:.94 1.06}100%{scale:1 1}}
:root[data-theme="dark"] .nav{border-color:rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12)}
:root[data-theme="dark"] .nav::before{opacity:.25}
:root[data-theme="dark"] .nav-drop{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.07));border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 4px 14px rgba(0,0,0,.35)}

/* Tugmalar: bosilganda "jele" kabi siqiladi va ichida shisha tomchi sachraydi */
.dripbox{overflow:hidden;isolation:isolate}
.nav button.dripbox,.nav .nav-add.dripbox{overflow:visible}
.drip{position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.75),rgba(255,255,255,.28) 45%,rgba(255,255,255,0) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transform:scale(0);animation:drip .65s cubic-bezier(.2,.8,.3,1) forwards}
.btn.ghost .drip,.chip:not(.on) .drip,.ibtn .drip,.stat .drip,.unit .drip,.word .drip,.menu-item .drip,.tabs button .drip,.nav button .drip{
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--pri) 28%,transparent),color-mix(in srgb,var(--pri) 10%,transparent) 50%,transparent 70%)}
@keyframes drip{0%{transform:scale(0);opacity:1}60%{opacity:.8}100%{transform:scale(1);opacity:0}}
.btn,.chip,.ibtn,.stat,.menu-item,.tabs button,.fab{transition:transform .35s cubic-bezier(.3,1.7,.5,1),opacity .2s}
.btn:active,.chip:active,.ibtn:active,.stat:active,.menu-item:active,.fab:active{transform:scale(.94)}
.btn{box-shadow:0 8px 20px rgba(79,70,229,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.ghost,.btn.soft{box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.fab{background:radial-gradient(120% 120% at 30% 20%,#8b84ff 0%,var(--pri) 45%,#6d28d9 100%);border-radius:50%;
  box-shadow:0 12px 26px rgba(79,70,229,.45),inset 0 2px 3px rgba(255,255,255,.55),inset 0 -4px 8px rgba(40,20,120,.35)}
@media (prefers-reduced-motion:reduce){.nav-drop{transition:none}.nav-drop.moving,.drip{animation:none}}

/* =====================================================================
   TO'LIQ "SHISHA" (PROZRACHNIY) DIZAYN
   Orqa fonda rangli suzib yuruvchi dog'lar, ustida hamma narsa — kartalar,
   tugmalar, ikonkalar — xira shisha kabi shaffof (backdrop-filter: blur)
   ===================================================================== */
:root{
  --bg:#e9ebff;
  --card:rgba(255,255,255,.38);--line:rgba(255,255,255,.62);
  --pri2:rgba(99,102,241,.16);--okb:rgba(34,197,94,.16);--badb:rgba(239,68,68,.15);--warnb:rgba(245,158,11,.16);
  --okline:rgba(34,197,94,.45);--badline:rgba(239,68,68,.45);
  --gblur:blur(18px) saturate(180%);
  --gshadow:0 8px 24px rgba(40,30,120,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.25);
  --ghi:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 60%);
}
:root[data-theme="dark"]{
  --bg:#0b0d1f;
  --card:rgba(255,255,255,.07);--line:rgba(255,255,255,.13);
  --pri2:rgba(129,120,255,.18);--okb:rgba(34,197,94,.15);--badb:rgba(239,68,68,.15);--warnb:rgba(245,158,11,.14);
  --gshadow:0 10px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.14);
  --ghi:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 60%);
}
/* rangli fon (shisha orqasida ko'rinib turadi) */
html{background:var(--bg)}
body{background:transparent!important}
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 30% at 15% 12%,rgba(124,92,255,.55),transparent 70%),
    radial-gradient(34% 28% at 88% 22%,rgba(56,189,248,.45),transparent 70%),
    radial-gradient(40% 32% at 75% 78%,rgba(236,72,153,.38),transparent 70%),
    radial-gradient(36% 30% at 12% 82%,rgba(45,212,191,.40),transparent 70%);
  filter:blur(10px);animation:bgfloat 26s ease-in-out infinite alternate}
:root[data-theme="dark"] body::before{opacity:.55}
@keyframes bgfloat{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(3%,-2%) rotate(6deg)}100%{transform:translate(-3%,2%) rotate(-5deg)}}

/* shisha sirt */
.card,.stat,.chip,.search,.input,textarea.input,.opt,.tabs,.q,.ans,.ibtn,.btn.ghost,.btn.soft,.face.front,.rb,.modal,.toast,
.feat span,.spk,.stamp,.pile i,.ring>div{
  background-color:var(--card);background-image:var(--ghi);
  -webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);
  border:1px solid var(--line);box-shadow:var(--gshadow)}
.word,.menu-item,.set,.pv,.urow,.fb{border-color:var(--line)}
.input:focus{border-color:rgba(99,102,241,.6);background-color:rgba(255,255,255,.55)}
:root[data-theme="dark"] .input:focus{background-color:rgba(255,255,255,.11)}
.modal{border-bottom:none;background-color:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%)}
.mback{background:rgba(20,16,60,.22)}
.toast{background-color:rgba(20,22,44,.55);color:#fff;border-color:rgba(255,255,255,.25)}
.ans .k{background:rgba(255,255,255,.35)}
:root[data-theme="dark"] .ans .k{background:rgba(255,255,255,.08)}

/* rangli shisha (asosiy tugmalar, tanlanganlar) */
.btn:not(.ghost):not(.soft),.chip.on,.tabs .on,.tog.on,.fab,.nav .nav-add{
  background-color:rgba(91,82,255,.62);background-image:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 55%);
  -webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);
  border:1px solid rgba(255,255,255,.55);color:#fff;
  box-shadow:0 10px 24px rgba(79,70,229,.30),inset 0 1px 1px rgba(255,255,255,.7),inset 0 -3px 8px rgba(40,20,140,.25)}
.btn.red{background-color:rgba(239,68,68,.62)}
.tgbtn{background-color:rgba(34,158,217,.65)!important}
.opt.on{background-color:rgba(99,102,241,.18);border-color:rgba(99,102,241,.7)}
.ans.ok{background-color:rgba(34,197,94,.22);border-color:var(--ok)}
.ans.bad{background-color:rgba(239,68,68,.20);border-color:var(--bad)}
.tog{background:rgba(120,130,160,.25);box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.nav .nav-add{border-radius:50%}
.nav .nav-add::after{background:rgba(255,255,255,.6)}
.fab{border-radius:50%}

/* gradientli kartalar ham shaffof */
.hero,.face.back,.avatar,.logo{
  background:linear-gradient(135deg,rgba(99,82,255,.70),rgba(168,85,247,.55))!important;
  -webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 14px 34px rgba(79,70,229,.28),inset 0 1px 1px rgba(255,255,255,.6)}
.face.back.uz2en{background:linear-gradient(135deg,rgba(22,163,74,.68),rgba(13,148,136,.55))!important}
.hero .btn,.hero .btn:not(.ghost):not(.soft){background-color:rgba(255,255,255,.75);color:#4f46e5;box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(40,20,140,.2)}

/* IKONKALAR — shisha tomchilar (rangi saqlanadi, foni shaffof) */
.uic,.oic{
  background:var(--ghi),color-mix(in srgb,currentColor 16%,transparent)!important;
  -webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);
  border:1px solid color-mix(in srgb,currentColor 30%,rgba(255,255,255,.6));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -2px 6px color-mix(in srgb,currentColor 18%,transparent),0 4px 12px color-mix(in srgb,currentColor 18%,transparent);
  position:relative}
.uic::after,.oic::after,.feat span::after,.spk::after,.avatar::after,.logo::after,.ibtn::after{
  content:"";position:absolute;top:3px;left:18%;width:45%;height:28%;border-radius:50%;
  background:rgba(255,255,255,.55);filter:blur(1.5px);pointer-events:none}
.feat span,.spk,.avatar,.logo,.ibtn{position:relative}
:root[data-theme="dark"] .uic::after,:root[data-theme="dark"] .oic::after,:root[data-theme="dark"] .feat span::after,:root[data-theme="dark"] .ibtn::after{opacity:.35}
.nav button svg{filter:drop-shadow(0 1px 1px rgba(255,255,255,.6))}
.nav button.on svg{filter:drop-shadow(0 2px 4px rgba(79,70,229,.35))}
.nav{background:rgba(255,255,255,.32)}
:root[data-theme="dark"] .nav{background:rgba(255,255,255,.07)}
.bar{background:rgba(255,255,255,.4)}
:root[data-theme="dark"] .bar{background:rgba(255,255,255,.1)}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
:root[data-theme="dark"] .uic,:root[data-theme="dark"] .oic{filter:brightness(1.7) saturate(1.2)}