/* Kassa Hub — dizayn tokenlari (design_handoff_kassa_hub/README.md dan) */
:root {
  --page:#070B12; --bg:#0E1420; --surf:#151D2C; --surf2:#1C2637;
  --line:rgba(255,255,255,.08); --fg:#EEF2F8; --fg2:#9AA6BA; --fg3:#66738A;
  --acc:#5B7CFA; --accbg:rgba(91,124,250,.16);
  --ok:#34C27A; --okbg:rgba(52,194,122,.14);
  --warn:#F2B23A; --warnbg:rgba(242,178,58,.14);
  --err:#F25C55; --errbg:rgba(242,92,85,.14);
  --skel:rgba(255,255,255,.07);
}
[data-theme="light"] {
  --page:#E4E8F0; --bg:#F4F6FA; --surf:#FFFFFF; --surf2:#EDF0F6;
  --line:rgba(15,23,42,.09); --fg:#0F172A; --fg2:#56627A; --fg3:#8A94A6;
  --acc:#3D5BE0; --accbg:rgba(61,91,224,.12);
  --ok:#1A9A58; --okbg:rgba(26,154,88,.12);
  --warn:#B97D0C; --warnbg:rgba(185,125,12,.12);
  --err:#D6413A; --errbg:rgba(214,65,58,.1);
  --skel:rgba(15,23,42,.07);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* `hidden` atributi CSS dagi display qoidasidan kuchsiz — shuning uchun majburlaymiz.
   Busiz modal/sheet qatlami yopilmay, ekranni to'sib qoladi. */
[hidden] { display:none !important; }
html, body { margin:0; height:100%; }
body {
  background:var(--bg); color:var(--fg);
  font:14px/1.45 "IBM Plex Sans", system-ui, sans-serif;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
.mono, .money, input.mono { font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; }
.money { white-space:nowrap; }
button { font:inherit; color:inherit; cursor:pointer; }
a { color:var(--acc); }

#screen { padding:16px 16px 8px; max-width:520px; margin:0 auto; }
.h1 { font-size:22px; font-weight:700; margin:0 0 12px; }
.h1.small { font-size:20px; }
.sect { font-size:15px; font-weight:600; margin:20px 0 10px; }
.muted { color:var(--fg2); }
.tiny { font-size:12px; color:var(--fg3); }
.row { display:flex; align-items:center; gap:10px; }
.between { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stack > * + * { margin-top:10px; }

.card { background:var(--surf); border:1px solid var(--line); border-radius:16px; padding:14px; }
.card.big { border-radius:20px; padding:18px; }
.chip { width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
        color:#fff; font-size:11px; font-weight:700; flex:none; }
.chip.lg { width:42px; height:42px; border-radius:12px; font-size:14px; }
.dot { width:8px; height:8px; border-radius:50%; flex:none; }
.pill { border-radius:99px; padding:4px 10px; font-size:11px; font-weight:600; }

.btn { display:block; width:100%; border:0; border-radius:14px; padding:15px;
       background:var(--acc); color:#fff; font-weight:600; font-size:15px; }
.btn:disabled { opacity:.5; }
.btn.ghost { background:var(--surf); color:var(--fg); border:1px solid var(--line); }
.btn.warn { background:var(--warn); color:#1a1200; }
.btn.sm { padding:9px 14px; width:auto; font-size:13px; border-radius:10px; }

input, select { width:100%; background:var(--surf2); border:1px solid var(--line);
  border-radius:14px; padding:15px; color:var(--fg); font:inherit; outline:none; }
input:focus { border-color:var(--acc); }
input.big { font-family:"IBM Plex Mono", monospace; font-size:26px; font-weight:600; text-align:center; }
input.err { border-color:var(--err); }

.pills { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.pills::-webkit-scrollbar { display:none; }
.pills button { white-space:nowrap; background:transparent; border:1px solid var(--line);
  color:var(--fg2); border-radius:99px; padding:8px 14px; font-size:13px; }
.pills button.on { border-color:var(--acc); background:var(--accbg); color:var(--acc); }

#nav { position:fixed; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--surf); border-top:1px solid var(--line);
  padding:8px 6px calc(14px + env(safe-area-inset-bottom)); z-index:20; }
#nav button { background:none; border:0; color:var(--fg3); font-size:10px; font-weight:600;
  display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; }
#nav button.on { color:var(--acc); }
#nav .ico { font-size:18px; line-height:1; }
#fab { background:var(--acc); color:#fff; width:48px; height:48px; border-radius:50%;
  font-size:26px; margin:-18px auto 0; box-shadow:0 8px 20px rgba(91,124,250,.35); align-self:center; }
#alertBadge { position:absolute; top:-2px; right:50%; transform:translateX(18px);
  background:var(--err); color:#fff; border-radius:99px; font-size:10px; font-style:normal;
  padding:1px 5px; font-weight:700; }

.overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:30;
  display:flex; align-items:center; justify-content:center; padding:20px; }
#sheet { align-items:flex-end; padding:0; }
#sheet > .inner { background:var(--surf); border-radius:22px 22px 0 0; padding:20px 16px 28px;
  width:100%; max-width:520px; max-height:80vh; overflow:auto; }
#modal > .inner { background:var(--surf); border-radius:22px; padding:22px 20px; width:100%;
  max-width:380px; text-align:center; }

#toast { position:fixed; left:16px; right:16px; bottom:96px; z-index:40; background:var(--fg);
  color:var(--bg); border-radius:14px; padding:12px 14px; font-size:13px; font-weight:600;
  text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.3); max-width:488px; margin:0 auto; }

.alert { border-left:3px solid var(--err); }
.alert.warn { border-left-color:var(--warn); }
.alert.info { border-left-color:var(--fg3); }

.skel { background:var(--skel); border-radius:14px; animation:pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.spin { width:28px; height:28px; border:3px solid var(--line); border-top-color:var(--acc);
  border-radius:50%; animation:spin .8s linear infinite; margin:0 auto; }
@keyframes spin { to { transform:rotate(360deg) } }

.bar { height:8px; background:var(--surf2); border-radius:4px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--acc); transition:width .3s; }
.steps { display:grid; grid-auto-flow:column; gap:6px; margin-bottom:16px; }
.steps i { height:4px; border-radius:2px; background:var(--surf2); }
.steps i.on { background:var(--acc); }

.tx { display:flex; gap:12px; align-items:center; }
.tx .sq { width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  font-size:18px; font-weight:700; flex:none; }
.chart { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; align-items:end; height:110px; }
.chart .col { display:flex; gap:3px; align-items:flex-end; height:100%; }
.chart .col i { flex:1; border-radius:3px 3px 0 0; min-height:3px; }