/* ═══════════════════════════════════════════════════════════════════════
   brend-dizayn · brand-ui.css
   Bitta brend rangi (logodan) + oq; Nunito shrift; 3D emoji; animatsiyalar.
   1) Quyidagi BREND TOKENLARI blokini scripts/brand_colors.py chiqishi bilan almashtiring.
   2) Qolgan hamma narsa tokenlar orqali ishlaydi — rang yozmang, var(--...) ishlating.
   Hozirgi qiymatlar: Stomatologiya demo (#0E7C7B).
   ═══════════════════════════════════════════════════════════════════════ */
  /* ── BREND TOKENLARI (brand_colors.py) ── */
/* Brend: #0E7C7B · OKLCH L=0.53 C=0.088 h=194 · oq bilan kontrast 5.01 */
  :root{
    --brand:#0E7C7B;
    --brand-2:#046362;
    --brand-3:#449694;
    --on-brand:#ffffff;
    --bg:#eef9f9;
    --surface:#ffffff;
    --surface-2:#f7fcfc;
    --sunken:#e3f4f4;
    --line:#ddeeed;
    --line-2:#c2dedd;
    --ink:#031a1a;
    --ink-2:#436160;
    --ink-3:#789291;
    --accent:#0E7C7B;
    --accent-2:#0b6665;
    --ok:#15803d;
    --warn:#b45309;
    --info:#1d4ed8;
    --pink:#be185d;
    --bad:#dc2626;
    --s-brand:#0E7C7B;
    --s-warn:#eda100;
    --s-ok:#008300;
    --s-info:#2a78d6;
    --s-pink:#e87ba4;
    --s-bad:#e34948;
    --s-muted:#bfd6d6;
    --s-prev:#a2bebd;
    --grid:#e6f1f1;
    --axis:#c6d9d8;
    --shadow:0 1px 2px rgba(5,53,53,0.05),0 10px 30px -14px rgba(5,53,53,0.2);
    --shadow-lg:0 2px 6px rgba(5,53,53,0.06),0 26px 50px -20px rgba(5,53,53,0.35);
    --side-bg:linear-gradient(165deg,#449694 0%,#0E7C7B 45%,#046362 100%);
  }
  [data-theme=dark]{
    --bg:#030f0f;
    --surface:#071717;
    --surface-2:#0a1c1b;
    --sunken:#0d2323;
    --line:#112928;
    --line-2:#173939;
    --ink:#e9f4f4;
    --ink-2:#a5c1c0;
    --ink-3:#6c8685;
    --accent:#45a3a2;
    --accent-2:#67b8b6;
    --ok:#4ade80;
    --warn:#fbbf24;
    --info:#7aa2ff;
    --pink:#f472b6;
    --bad:#f87171;
    --s-brand:#45a3a2;
    --s-warn:#c98500;
    --s-ok:#008300;
    --s-info:#3987e5;
    --s-pink:#d55181;
    --s-bad:#e66767;
    --s-muted:#223a3a;
    --s-prev:#425b5a;
    --grid:#112020;
    --axis:#1b3332;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 32px -18px rgba(0,0,0,.7);
    --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 28px 56px -22px rgba(0,0,0,.8);
    --side-bg:linear-gradient(165deg,#0d5655 0%,#073e3e 50%,#002323 100%);
  }

  /* ── O'zgarmas tokenlar ── */
  :root{
    --font:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --font-display:var(--font);
    --radius:18px;
    --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  }
  *{box-sizing:border-box}
  body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
    background:radial-gradient(900px 420px at 100% -8%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 65%),var(--bg);background-attachment:fixed}
  ::selection{background:color-mix(in srgb,var(--brand) 25%,transparent)}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:3px solid transparent;background-clip:content-box}
  .wrap{max-width:1240px;margin:0 auto;padding:22px 22px 60px}
  .spacer{flex:1}
  .muted{color:var(--ink-3)}
  .b{font-weight:800}

  /* 3D emoji va ikonkalar */
  .em{width:1.3em;height:1.3em;display:inline-block;vertical-align:-.28em;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
  .ic{width:17px;height:17px;flex:none;display:block}

  /* Tugmalar */
  .btn{position:relative;overflow:hidden;font-family:inherit;font-size:13.5px;font-weight:700;padding:9px 15px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;-webkit-tap-highlight-color:transparent;
    transition:transform .2s var(--spring),background .15s,color .15s,border-color .15s,box-shadow .2s}
  .btn:hover{background:var(--sunken);color:var(--ink);transform:translateY(-1px)}
  .btn:active{transform:scale(.95)}
  .btn.primary{background:linear-gradient(135deg,var(--brand-3) -30%,var(--brand) 45%,var(--brand-2));border-color:transparent;color:var(--on-brand);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand) 75%,transparent)}
  .btn.primary:hover{color:var(--on-brand);box-shadow:0 12px 26px -8px color-mix(in srgb,var(--brand) 85%,transparent)}
  .btn.primary::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .7s var(--ease);pointer-events:none}
  .btn.primary:hover::after{left:140%}
  .btn.icon{padding:0;width:40px;height:40px}
  .btn.sm{padding:6px 9px;border-radius:10px}
  .btn.ghost{border-color:transparent;background:transparent}
  .btn.ghost:hover{background:var(--sunken)}
  .btn.block{width:100%;padding:12px 16px;font-size:15px}
  .btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.2;transform:scale(0);animation:ripple .6s var(--ease) forwards;pointer-events:none}
  .spin{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;flex:none}

  /* Logo */
  .logo{width:44px;height:44px;border-radius:14px;background:linear-gradient(140deg,var(--brand-3),var(--brand) 50%,var(--brand-2));color:var(--on-brand);display:grid;place-items:center;font-weight:900;font-size:16px;letter-spacing:-.02em;flex:none;overflow:hidden;
    box-shadow:0 10px 22px -8px color-mix(in srgb,var(--brand) 60%,transparent);transition:transform .45s var(--spring)}
  .logo:hover{transform:rotate(-6deg) scale(1.07)}
  .logo.has-img{background:var(--surface)}
  .logo img{width:100%;height:100%;object-fit:contain;display:block}

  /* Chap menyu (☰ bilan ochiladi/yopiladi) */
  .side{position:fixed;top:0;left:0;bottom:0;width:248px;background:var(--side-bg);color:var(--on-brand);padding:20px 14px 16px;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .38s var(--ease);z-index:40;overflow:hidden auto}
  .side::before,.side::after{content:'';position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.16),rgba(255,255,255,.03));pointer-events:none;animation:blob 14s ease-in-out infinite}
  .side::before{width:280px;height:280px;right:-150px;bottom:-60px}
  .side::after{width:170px;height:170px;left:-100px;top:34%;animation-delay:-6s}
  .menu-open .side{transform:none;box-shadow:12px 0 40px -20px rgba(80,0,25,.5)}
  .brand{display:flex;align-items:center;gap:12px;padding:2px 8px 24px;position:relative;z-index:1}
  .brand .logo{width:46px;height:46px;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 10px 22px -8px rgba(60,0,15,.5)}
  .brand-t{font-family:var(--font-display);font-weight:900;font-size:18px;letter-spacing:-.01em;line-height:1.1}
  .brand-s{font-size:12px;font-weight:700;opacity:.75}
  .side-t{position:relative;z-index:1;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--on-brand);opacity:.65;padding:4px 12px 8px}
  #nav{position:relative;z-index:1}
  .nav-i{display:flex;align-items:center;gap:12px;width:100%;font-family:inherit;font-size:15px;font-weight:800;padding:9px 12px;margin-bottom:5px;border-radius:14px;border:none;background:transparent;color:var(--on-brand);cursor:pointer;text-align:left;
    transition:background .2s,color .2s,transform .3s var(--spring),box-shadow .2s}
  .nav-i .em{width:30px;height:30px;transition:transform .4s var(--spring)}
  .nav-i:hover{background:color-mix(in srgb,var(--on-brand) 15%,transparent);transform:translateX(4px)}
  .nav-i:hover .em{transform:scale(1.15) rotate(-10deg)}
  .nav-i.active{background:var(--surface);color:var(--accent);box-shadow:0 12px 26px -12px rgba(60,0,15,.6)}
  .nav-i.active .em{animation:pop .55s var(--spring)}
  .nav-i:focus-visible{outline:2px solid var(--on-brand);outline-offset:2px}
  #nav.intro .nav-i{animation:slideIn .5s var(--ease) backwards;animation-delay:calc(.15s + var(--i)*70ms)}
  .side-foot{margin-top:auto;position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:18px 10px 4px;font-size:12.5px;font-weight:700;color:var(--on-brand);opacity:.9;line-height:1.3}
  .side-foot .em{width:44px;height:44px;animation:float 4s ease-in-out infinite;filter:drop-shadow(0 10px 12px rgba(60,0,15,.35))}
  .side-foot small{display:block;opacity:.7;font-weight:600}
  .main{transition:margin-left .38s var(--ease)}
  @media(min-width:901px){.menu-open .main{margin-left:248px}.menu-open .header .logo{display:none}}
  .backdrop{position:fixed;inset:0;background:rgba(30,5,12,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:35;opacity:0;pointer-events:none;transition:opacity .3s}
  @media(max-width:900px){.menu-open .backdrop{opacity:1;pointer-events:auto}}

  /* Sarlavha */
  .header{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap;animation:fadeDown .55s var(--ease) backwards}
  h1{font-family:var(--font-display);font-size:24px;font-weight:900;letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:10px;line-height:1.2}
  h1 .em{width:32px;height:32px;animation:pop .6s var(--spring) backwards}
  .sub{font-size:13px;font-weight:600;color:var(--ink-3)}
  .who{display:inline-flex;align-items:center;gap:8px;padding:4px 13px 4px 4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:800;color:var(--ink-2);box-shadow:var(--shadow)}
  .who[hidden]{display:none}
  .who-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--brand-3),var(--brand-2));color:var(--on-brand);display:grid;place-items:center;font-size:12px;font-weight:900}
  .theme-btn svg{animation:spinIn .5s var(--spring)}
  [data-theme=dark] .theme-btn .i-sun,:root:not([data-theme=dark]) .theme-btn .i-moon{display:none}
  @media(max-width:640px){h1{font-size:20px}h1 .em{width:26px;height:26px}.who #who,.lbl{display:none}.who{padding:3px}.wrap{padding:16px 16px 48px}
    .header{gap:8px;row-gap:14px}.header .ttl{order:10;flex-basis:100%}}

  /* Statistika kartalari */
  #view{container-type:inline-size}
  #view>*{animation:fadeUp .5s var(--ease) backwards}
  #view>*:nth-child(2){animation-delay:.06s}#view>*:nth-child(3){animation-delay:.12s}#view>*:nth-child(4){animation-delay:.18s}
  .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}
  @container (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.stat:first-child{grid-column:1/-1}}
  .stat{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 18px;box-shadow:var(--shadow);cursor:pointer;
    transition:transform .35s var(--spring),box-shadow .3s,border-color .2s}
  .stat::after{content:'';position:absolute;width:130px;height:130px;border-radius:50%;right:-46px;top:-46px;background:radial-gradient(circle,color-mix(in srgb,var(--d) 24%,transparent),transparent 70%);transition:transform .6s var(--ease);pointer-events:none}
  .stat:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--d) 40%,var(--line))}
  .stat:hover::after{transform:scale(1.4)}
  .stat .em{position:absolute;right:12px;top:12px;width:42px;height:42px;z-index:1;transition:transform .5s var(--spring);filter:drop-shadow(0 6px 8px rgba(0,0,0,.14))}
  .stat:hover .em{transform:translateY(-4px) rotate(-12deg) scale(1.14)}
  .stat .lb{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:8px;padding-right:46px;line-height:1.3}
  .stat .v{font-size:30px;font-weight:900;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
  .stat .pct{font-size:12px;font-weight:800;color:var(--d);margin-top:3px}
  .stat .bar{position:absolute;left:0;bottom:0;height:4px;width:var(--w);background:var(--d);border-radius:0 4px 0 0}
  .stat.on{border-color:var(--d);box-shadow:0 0 0 3px color-mix(in srgb,var(--d) 25%,transparent),var(--shadow-lg)}
  .stats.intro .stat{animation:fadeUp .6s var(--ease) backwards;animation-delay:calc(var(--i)*70ms)}
  .stats.intro .stat .em{animation:pop .7s var(--spring) backwards;animation-delay:calc(.2s + var(--i)*70ms)}
  .stats.intro .stat .bar{animation:grow 1.2s var(--ease) backwards;animation-delay:calc(.3s + var(--i)*70ms)}
  .d-brand{--d:var(--accent)}.d-warn{--d:var(--warn)}.d-ok{--d:var(--ok)}.d-info{--d:var(--info)}.d-pink{--d:var(--pink)}.d-bad{--d:var(--bad)}

  /* Asboblar paneli va maydonlar */
  .toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
  @container (max-width:560px){.toolbar .search-w{flex-basis:100%}.toolbar select{flex:1;min-width:0}}
  input,select,textarea{font-family:inherit;font-size:14px;font-weight:600;padding:10px 13px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);transition:border-color .2s,box-shadow .2s}
  input::placeholder,textarea::placeholder{color:var(--ink-3);font-weight:500}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}
  select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a18893' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
  .search-w,.inp-w{position:relative;display:block}
  .search-w{flex:1;min-width:220px}
  .search-w .ic,.inp-w .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;transition:color .2s}
  .search-w input,.inp-w input{width:100%;padding-left:40px}
  .search-w:focus-within .ic,.inp-w:focus-within .ic{color:var(--accent)}

  /* Jadval */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .tw{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:14px}
  th{text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;user-select:none;transition:color .15s}
  th:hover,th.sorted{color:var(--accent)}
  th .ic{display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-left:4px}
  td{padding:11px 16px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
  tbody tr:last-child td{border-bottom:none}
  tbody tr td{transition:background .15s}
  tbody tr.clk{cursor:pointer}
  tbody tr.clk:hover td{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
  tbody tr.rin{animation:rowIn .45s var(--ease) backwards;animation-delay:calc(var(--i)*22ms)}
  .num{text-align:right}
  .nm-cell{display:flex;align-items:center;gap:10px;font-weight:700}
  .av,.avatar{display:grid;place-items:center;flex:none;color:#fff;font-weight:900;background:linear-gradient(135deg,hsl(var(--h) 80% 64%),hsl(var(--h) 72% 46%))}
  .av{width:32px;height:32px;border-radius:10px;font-size:12px;transition:transform .3s var(--spring)}
  tr.clk:hover .av{transform:scale(1.1) rotate(-6deg)}
  .av.anon,.avatar.anon{background:var(--sunken)}
  .av.anon .em{width:20px;height:20px}
  .pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;padding:3px 10px 3px 6px;border-radius:999px;background:color-mix(in srgb,var(--c,var(--ink-3)) 13%,var(--surface));color:var(--c,var(--ink-3));border:1px solid color-mix(in srgb,var(--c,var(--ink-3)) 26%,transparent);vertical-align:middle}
  .pill .em{width:16px;height:16px;vertical-align:0}
  .t-brand{--c:var(--accent)}.t-warn{--c:var(--warn)}.t-ok{--c:var(--ok)}.t-info{--c:var(--info)}.t-pink{--c:var(--pink)}.t-bad{--c:var(--bad)}
  .pag{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:11px 16px;font-size:13px;font-weight:700;color:var(--ink-3);border-top:1px solid var(--line)}
  .pag .pg{display:inline-flex;align-items:center;gap:10px}
  .empty{padding:44px 20px;text-align:center;color:var(--ink-3);font-weight:700;display:flex;flex-direction:column;align-items:center;gap:10px;white-space:normal}
  .empty .em{width:64px;height:64px;animation:float 3s ease-in-out infinite}
  .loader .em{width:52px;height:52px;animation:hop .55s var(--ease) infinite alternate}
  .sk{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--sunken) 25%,var(--surface-2) 50%,var(--sunken) 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}

  /* Modal oynalar */
  .ov{position:fixed;inset:0;background:rgba(30,6,14,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px;z-index:50;animation:fadeIn .25s ease backwards}
  .ov.out{animation:fadeOut .2s ease forwards}
  .modal{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px -20px rgba(40,0,15,.5);width:100%;max-width:460px;max-height:90vh;overflow:auto;animation:popIn .5s var(--spring) backwards}
  .ov.out .modal{animation:popOut .2s ease forwards}
  .modal-h{padding:16px 16px 16px 22px;border-bottom:1px solid var(--line);font-weight:900;font-size:17px;display:flex;align-items:center;gap:10px}
  .modal-h>.em{width:32px;height:32px;animation:pop .6s var(--spring) .1s backwards}
  .modal-h .x{margin-left:auto;width:34px;height:34px}
  .modal-b{padding:18px 22px;display:flex;flex-direction:column;gap:13px}
  .fld{display:flex;flex-direction:column;gap:6px}
  .fld label{font-size:12.5px;font-weight:800;color:var(--ink-2);display:flex;align-items:center;gap:8px}
  .fld label .em{width:22px;height:22px}
  .fld input,.fld select{width:100%}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:480px){.row2{grid-template-columns:1fr}}
  .modal-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
  .msg{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;padding:10px 13px;border-radius:12px;animation:msgIn .45s var(--spring) backwards}
  .msg .em{width:22px;height:22px;flex:none}
  .msg.ok{background:color-mix(in srgb,var(--ok) 13%,var(--surface));color:var(--ok)}
  .msg.err{background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad)}
  .hint{font-size:12.5px;color:var(--ink-3);font-weight:600}
  textarea{width:100%;resize:vertical;min-height:70px}
  .drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px;border:2px dashed var(--line-2);border-radius:16px;background:var(--surface-2);cursor:pointer;text-align:center;transition:border-color .2s,background .2s,transform .3s var(--spring)}
  .drop .em{width:52px;height:52px;margin-bottom:4px;transition:transform .4s var(--spring)}
  .drop:hover,.drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
  .drop:hover .em,.drop.over .em{transform:translateY(-4px) scale(1.1)}
  .drop.over{transform:scale(1.02)}
  .drop.has{border-style:solid;border-color:var(--ok)}

  /* Kirish oynasi */
  #login-ov{background:var(--side-bg);-webkit-backdrop-filter:none;backdrop-filter:none;overflow:hidden}
  #login-ov .modal{position:relative;z-index:2;max-width:380px;border:none;border-radius:26px;box-shadow:0 40px 90px -24px rgba(60,0,20,.6)}
  .blob{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.2),rgba(255,255,255,.03));animation:blob 12s ease-in-out infinite;pointer-events:none}
  .b1{width:440px;height:440px;left:-140px;top:-150px}
  .b2{width:340px;height:340px;right:-90px;bottom:-110px;animation-delay:-4s}
  .b3{width:170px;height:170px;right:24%;top:6%;animation-delay:-8s}
  .fl{position:absolute;width:var(--s);height:var(--s);z-index:1;pointer-events:none;animation:drift var(--d,7s) ease-in-out infinite alternate;filter:drop-shadow(0 18px 24px rgba(70,0,20,.35))}
  @media(max-width:640px){.fl{--s:62px!important;opacity:.6}}
  .login-top{padding:30px 26px 6px;text-align:center}
  .login-top .logo{width:74px;height:74px;margin:0 auto 16px;border-radius:22px;font-size:24px;animation:pop .8s var(--spring) .15s backwards}
  .login-top h2{margin:0;font-size:23px;font-weight:900;letter-spacing:-.01em}
  .login-top p{margin:4px 0 0;color:var(--ink-3);font-size:13.5px;font-weight:600}
  .wave{width:28px;height:28px;transform-origin:70% 80%;animation:wave 2.4s ease-in-out 1s infinite}
  .shake{animation:shake .45s ease!important}

  /* Mijoz profili */
  .back{margin-bottom:16px}
  .profile-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
  .avatar{width:60px;height:60px;border-radius:18px;font-size:22px;box-shadow:0 12px 24px -10px hsl(var(--h,346) 70% 45% / .7);animation:pop .6s var(--spring) backwards}
  .avatar.anon .em{width:34px;height:34px}
  .profile-h .nm{font-size:21px;font-weight:900;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .profile-h .ph{font-size:13.5px;font-weight:600;color:var(--ink-2)}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
  .kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);transition:transform .35s var(--spring),box-shadow .3s;animation:fadeUp .5s var(--ease) backwards;animation-delay:calc(.1s + var(--i)*60ms)}
  .kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .kpi .em{width:30px;height:30px;display:block;margin-bottom:8px;transition:transform .4s var(--spring)}
  .kpi:hover .em{transform:rotate(-10deg) scale(1.15)}
  .kpi .k-l{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
  .kpi .k-v{font-size:21px;font-weight:900;font-variant-numeric:tabular-nums;margin-top:2px}
  .grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
  @media(max-width:860px){.grid2{grid-template-columns:1fr}}
  .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
  .panel .p-h{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);font-weight:900;font-size:14px;display:flex;align-items:center;gap:9px}
  .panel .p-h .em{width:24px;height:24px}
  .panel .p-b{padding:6px 0}
  .lead{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s,padding-left .25s var(--ease)}
  .lead:last-child{border-bottom:none}
  .lead:hover{background:var(--surface-2);padding-left:20px}
  .dot{width:10px;height:10px;border-radius:50%;background:var(--k);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--k) 20%,transparent)}
  .lead .l-nm{font-weight:800;font-size:13.5px}.lead .l-st{font-size:12px;font-weight:600;color:var(--ink-2)}
  .lead .l-r{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink-3)}
  .act{padding:10px 16px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600;white-space:pre-wrap}
  .act:last-child{border-bottom:none}
  .act .a-meta{font-size:11.5px;color:var(--ink-3);margin-top:3px;white-space:normal}
  .act-add{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
  .act-add input{flex:1;min-width:0}

  /* Voronka doskasi */
  .k-info{--k:var(--info)}.k-warn{--k:var(--warn)}.k-ok{--k:var(--ok)}.k-bad{--k:var(--bad)}
  .pipe-tabs{display:inline-flex;gap:4px;padding:5px;background:var(--sunken);border-radius:14px;margin-bottom:18px;flex-wrap:wrap}
  .pipe-tab{font-family:inherit;font-size:13.5px;font-weight:800;padding:8px 15px;border-radius:10px;border:none;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .25s var(--ease),color .2s,box-shadow .25s}
  .pipe-tab:hover{color:var(--ink)}
  .pipe-tab.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow)}
  .board{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;padding:2px 2px 14px;scroll-snap-type:x proximity}
  .col{position:relative;flex:0 0 264px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;scroll-snap-align:start;animation:fadeUp .5s var(--ease) backwards;animation-delay:calc(var(--i)*60ms)}
  .col::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--k)}
  .col-h{padding:15px 14px 10px;font-size:13px;font-weight:900;display:flex;align-items:center;gap:9px}
  .col-h .n{margin-left:auto;font-size:12px;padding:1px 9px;border-radius:999px;background:color-mix(in srgb,var(--k) 15%,var(--surface));color:var(--k)}
  .col-b{padding:4px 10px 12px;display:flex;flex-direction:column;gap:9px;min-height:60px;max-height:66vh;overflow-y:auto}
  .chip{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 13px;box-shadow:var(--shadow);cursor:pointer;transition:transform .3s var(--spring),border-color .2s,box-shadow .25s;animation:fadeUp .45s var(--ease) backwards;animation-delay:calc(.15s + var(--j)*40ms)}
  .chip:hover{transform:translateY(-3px) rotate(-.6deg);border-color:var(--accent);box-shadow:var(--shadow-lg)}
  .chip .c-nm{font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:6px}
  .chip .c-nm .em{width:18px;height:18px}
  .chip .c-meta{font-size:12px;font-weight:600;color:var(--ink-2);margin-top:4px;display:flex;justify-content:space-between;gap:8px}
  .col-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 4px;font-size:12px;font-weight:700;color:var(--ink-3)}
  .col-empty .em{width:34px;height:34px;opacity:.75}

  /* Sozlamalar */
  .settings{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;max-width:520px;display:flex;flex-direction:column;gap:20px}
  .logo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  /* Faqat o'qish rejimi: .readonly ichida .w (yozish) tugmalari yashiriladi */
  .readonly .w{display:none!important}
  .sec{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:14px}
  .logo-row .logo{width:60px;height:60px;font-size:18px;border-radius:17px}

  /* ── Statistika sahifasi ── */
  .an-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
  .seg-ctl{display:inline-flex;gap:3px;padding:4px;background:var(--sunken);border-radius:13px;flex-wrap:wrap}
  .seg-ctl button{font-family:inherit;font-size:13px;font-weight:800;padding:7px 12px;border:none;border-radius:9px;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .25s var(--ease),color .2s,box-shadow .25s}
  .seg-ctl button:hover{color:var(--ink)}
  .seg-ctl button.on{background:var(--surface);color:var(--accent);box-shadow:var(--shadow)}
  .seg-ctl.sm button{font-size:12px;padding:5px 10px}
  .range{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);font-weight:800}
  .range input{padding:7px 10px;font-size:13px;border-radius:10px}
  .an-period{flex-basis:100%;font-size:12.5px;font-weight:700;color:var(--ink-3)}
  #an-body{transition:opacity .25s}
  #an-body.loading{opacity:.5;pointer-events:none}
  .an-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
  .an-kpi{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 0;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0;transition:transform .35s var(--spring),box-shadow .3s}
  .an-kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .an-kpi>.em{position:absolute;right:14px;top:14px;width:40px;height:40px;transition:transform .5s var(--spring)}
  .an-kpi:hover>.em{transform:rotate(-12deg) scale(1.12)}
  .an-kpi .k-l{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);padding-right:48px}
  .an-kpi .k-v{font-size:28px;font-weight:900;letter-spacing:-.02em;line-height:1.15;margin-top:4px;white-space:nowrap}
  .an-kpi .k-v small{font-size:.48em;font-weight:800;margin-left:4px;color:var(--ink-3);letter-spacing:0}
  .an-kpi .k-d{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:12px;font-weight:700;color:var(--ink-3)}
  .delta{display:inline-flex;align-items:center;gap:2px;padding:2px 8px 2px 5px;border-radius:999px;font-size:12px;font-weight:900;background:var(--sunken);color:var(--ink-2)}
  .delta .ic{width:13px;height:13px;stroke-width:3}
  .delta.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,var(--surface))}
  .delta.down{color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,var(--surface))}
  .spark{position:relative;height:42px;margin:auto 0 14px;padding-top:12px;box-sizing:content-box}
  .spark svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:42px;overflow:visible}
  .spark .sl{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .spark .sa{fill:var(--ink-3);opacity:.1}
  .spark .sd{position:absolute;right:0;width:9px;height:9px;border-radius:50%;background:var(--s-brand);box-shadow:0 0 0 2px var(--surface);transform:translate(50%,-50%)}
  .an-kpi.hero{grid-column:span 2;grid-row:span 2;background:var(--side-bg);border-color:transparent;color:var(--on-brand);padding:22px 24px 0}
  .an-kpi.hero::before{content:'';position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;bottom:-120px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.18),rgba(255,255,255,.02));animation:blob 12s ease-in-out infinite;pointer-events:none}
  .an-kpi.hero>.em{width:64px;height:64px;right:20px;top:18px;animation:float 4s ease-in-out infinite}
  .an-kpi.hero .k-l,.an-kpi.hero .k-d{color:var(--on-brand);opacity:.88}
  .an-kpi.hero .k-v{font-size:50px;margin-top:8px}
  .an-kpi.hero .k-v small{color:var(--on-brand);opacity:.8}
  .an-kpi.hero .delta{background:rgba(255,255,255,.95)}
  [data-theme=dark] .an-kpi.hero .delta{background:rgba(20,6,10,.55)}
  .an-kpi.hero .spark{flex:1;min-height:90px;margin:16px -24px 0;padding:0;height:auto}
  .an-kpi.hero .spark svg{top:0;height:100%}
  .an-kpi.hero .sl{stroke:var(--on-brand)}
  .an-kpi.hero .sa{fill:var(--on-brand);opacity:.16}
  .an-kpi.hero .sd{right:24px;background:var(--on-brand);box-shadow:0 0 0 3px rgba(255,255,255,.35)}
  .an-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .ch-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px 18px;min-width:0;display:flex;flex-direction:column}
  .ch-body{flex:1;display:flex;flex-direction:column;justify-content:center}
  .ch-card.wide{grid-column:1/-1}
  .ch-card.tall{grid-row:span 2}
  .ch-card.tall .ch-body{justify-content:flex-start}
  .intro .an-kpi,.intro .ch-card{animation:fadeUp .55s var(--ease) backwards;animation-delay:calc(var(--i)*65ms)}
  .ch-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  .ch-h>.em{width:30px;height:30px;transition:transform .45s var(--spring)}
  .ch-card:hover .ch-h>.em{transform:rotate(-10deg) scale(1.12)}
  .ch-t{font-weight:900;font-size:15px;line-height:1.25}
  .ch-s{font-size:12px;font-weight:600;color:var(--ink-3)}
  .tbl-btn{width:32px;height:32px}
  .tbl-btn.on{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent)}
  .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
  .legend span{display:inline-flex;align-items:center;gap:7px}
  .lk{width:16px;height:3px;border-radius:2px;display:inline-block}
  .sw{width:11px;height:11px;border-radius:3px;display:inline-block;flex:none}
  svg.chart{display:block;overflow:visible;touch-action:pan-y}
  .chart .grid{stroke:var(--grid);stroke-width:1}
  .chart .base{stroke:var(--axis);stroke-width:1}
  .chart .ax{fill:var(--ink-3);font-size:11px;font-weight:700;font-family:var(--font);font-variant-numeric:tabular-nums}
  .chart .lbl{fill:var(--ink);font-size:12px;font-weight:900;font-family:var(--font)}
  .chart .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
  .chart .ln.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s var(--ease) .1s forwards}
  .chart .area.draw{animation:fadeIn .9s ease .45s backwards}
  .chart .xh{stroke:var(--ink-3);stroke-width:1}
  .chart .hd{stroke:var(--surface);stroke-width:2}
  .chart .hit,.chart .col-hit{fill:transparent;outline:none}
  .chart .hit{cursor:crosshair}
  .chart .col-hit{cursor:pointer}
  .chart .cg{transition:opacity .15s}
  .chart .cg.grow{animation:growY .75s var(--ease) backwards;animation-delay:calc(var(--i)*22ms);transform-box:fill-box;transform-origin:50% 100%}
  .chart.hov .cg:not(.hl){opacity:.55}
  .tip{position:fixed;z-index:70;pointer-events:none;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-lg);padding:9px 12px;font-size:12.5px;min-width:150px;max-width:260px}
  .tip[hidden]{display:none}
  .tip-t{font-weight:800;color:var(--ink-2);margin-bottom:4px;font-size:12px}
  .tip-r{display:flex;align-items:center;gap:8px;line-height:1.75;white-space:nowrap}
  .tip-r i{width:12px;height:3px;border-radius:2px;flex:none}
  .tip-r b{font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
  .tip-r span{color:var(--ink-3);font-weight:600}
  .hb{display:flex;flex-direction:column;gap:14px;flex:1;justify-content:space-evenly}
  .hb-r{display:grid;grid-template-columns:minmax(70px,104px) 1fr;align-items:center;gap:10px;outline:none;border-radius:8px}
  .hb-l{font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hb-t{display:flex;align-items:center;gap:8px;min-width:0}
  .hb-b{height:18px;border-radius:0 4px 4px 0;background:var(--s-brand);flex:none;min-width:2px;transition:filter .15s}
  .hb-b.grow{animation:growX .8s var(--ease) backwards;animation-delay:calc(var(--i)*70ms);transform-origin:left}
  .hb-v{font-size:12.5px;white-space:nowrap}
  .hb-v b{font-weight:900}
  .hb-v span{color:var(--ink-3);font-weight:700;margin-left:5px}
  .hb-r:hover .hb-b,.hb-r:focus-visible .hb-b{filter:brightness(1.15)}
  .dn{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}
  .dn svg{flex:none;overflow:visible}
  .dn .arc{fill:none;transition:stroke-width .3s var(--spring);cursor:pointer;outline:none}
  .dn .arc.grow{animation:arc 1s var(--ease) backwards;animation-delay:var(--dl)}
  .dn .arc.hl{stroke-width:32}
  .dn .c-v{font-size:30px;font-weight:900;fill:var(--ink);font-family:var(--font)}
  .dn .c-l{font-size:12px;font-weight:700;fill:var(--ink-3);font-family:var(--font)}
  .dnl{display:flex;flex-direction:column;gap:4px;min-width:200px;flex:1}
  .dnl-r{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;padding:7px 9px;border-radius:10px;transition:background .15s}
  .dnl-r.hl{background:var(--surface-2)}
  .dnl-r .em{width:20px;height:20px}
  .dnl-r b{margin-left:auto;font-weight:900;font-variant-numeric:tabular-nums}
  .dnl-r .p{color:var(--ink-3);width:42px;text-align:right;font-variant-numeric:tabular-nums}
  .top{display:flex;flex-direction:column;gap:2px}
  .top-r{display:grid;grid-template-columns:28px 32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 8px;border-radius:12px;cursor:pointer;transition:background .15s,transform .3s var(--spring)}
  .top-r:hover{background:var(--surface-2);transform:translateX(4px)}
  .intro .top-r,.top.anim .top-r{animation:rowIn .45s var(--ease) backwards;animation-delay:calc(var(--i)*45ms)}
  .top-rk{font-weight:900;color:var(--ink-3);text-align:center;font-size:13px}
  .top-rk .em{width:28px;height:28px}
  .top-n b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-n b .em{width:16px;height:16px;margin-right:5px;vertical-align:-3px}
  .top-bar{height:5px;border-radius:0 3px 3px 0;background:var(--s-brand);opacity:.35;margin-top:5px}
  .top-v{text-align:right;font-weight:900;font-size:13.5px;white-space:nowrap}
  .top-v small{display:block;color:var(--ink-3);font-weight:600;font-size:11.5px}
  .pp{display:flex;flex-direction:column;gap:16px}
  .pp-h{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:800;margin-bottom:7px}
  .pp-h span{color:var(--ink-3)}
  .pp-bar{display:flex;gap:2px;height:18px;border-radius:0 4px 4px 0;overflow:hidden}
  .pp-bar.grow{animation:growX .8s var(--ease) backwards;animation-delay:calc(var(--i)*90ms);transform-origin:left}
  .pp-seg{height:100%;min-width:3px;outline:none;transition:filter .15s}
  .pp-seg:hover,.pp-seg:focus-visible{filter:brightness(1.15)}
  .an-tbl th{cursor:default}
  .an-tw{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:12px}
  .an-empty{padding:30px 10px;text-align:center;color:var(--ink-3);font-weight:700;display:flex;flex-direction:column;align-items:center;gap:8px}
  .an-empty .em{width:48px;height:48px;animation:float 3s ease-in-out infinite}
  @container (max-width:760px){
    .an-kpis{grid-template-columns:repeat(2,1fr)}
    .an-kpi.hero{grid-row:auto}
    .an-kpi.hero .k-v{font-size:38px}
    .an-kpi .k-v{font-size:23px}
    .an-grid{grid-template-columns:1fr}
    .ch-card.tall{grid-row:auto}
  }
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes growY{from{transform:scaleY(0)}}
  @keyframes growX{from{transform:scaleX(0)}}
  @keyframes arc{from{stroke-dasharray:0 var(--c)}}

  /* Animatsiyalar */
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}}
  @keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}}
  @keyframes fadeIn{from{opacity:0}}
  @keyframes fadeOut{to{opacity:0}}
  @keyframes popIn{from{opacity:0;transform:translateY(22px) scale(.93)}}
  @keyframes popOut{to{opacity:0;transform:translateY(12px) scale(.96)}}
  @keyframes pop{0%{opacity:0;transform:scale(.4) rotate(-14deg)}60%{opacity:1;transform:scale(1.14) rotate(4deg)}100%{transform:none}}
  @keyframes slideIn{from{opacity:0;transform:translateX(-18px)}}
  @keyframes rowIn{from{opacity:0;transform:translateX(-10px)}}
  @keyframes msgIn{from{opacity:0;transform:translateY(-6px) scale(.97)}}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes hop{from{transform:translateY(0) rotate(-10deg)}to{transform:translateY(-14px) rotate(10deg)}}
  @keyframes drift{from{transform:translate(0,0) rotate(-7deg)}to{transform:translate(var(--dx,14px),var(--dy,-26px)) rotate(9deg)}}
  @keyframes blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(22px,-18px) scale(1.08)}}
  @keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(18deg)}20%,40%{transform:rotate(-10deg)}}
  @keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes spinIn{from{opacity:0;transform:rotate(-120deg) scale(.4)}}
  @keyframes ripple{to{transform:scale(2.6);opacity:0}}
  @keyframes shimmer{to{background-position:-200% 0}}
  @keyframes grow{from{width:0}}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
  }