/* Cognita AI — asosiy uslublar (minimalistik qayta dizayn) */
/* Rang/masofa/radius tokenlari — static/css/tokens.css da (yagona manba). */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);
  line-height:var(--text-body-lh);overflow:hidden;
}
a{color:var(--accent-text)}
button{font-family:inherit;cursor:pointer}

.app{display:flex;height:100svh}

/* ── SIDEBAR ─────────────────────────── */
.side{
  width:256px;flex:none;display:flex;flex-direction:column;gap:var(--space-1);
  background:var(--bg-sidebar);border-right:1px solid var(--border-subtle);
  padding:var(--space-4) var(--space-3);z-index:60;
  transition:transform var(--dur-slow) var(--ease),width var(--dur-slow) var(--ease);
}
.side-top{display:flex;align-items:center;gap:var(--space-2);padding:2px 4px var(--space-3)}
.logo{flex:1;min-width:0;font-weight:var(--weight-semibold);font-size:var(--text-section);
  letter-spacing:-.015em;color:var(--text-primary);text-decoration:none;white-space:nowrap}
.logo b{color:var(--text-primary);font-weight:var(--weight-semibold)}
.logo span{font-weight:var(--weight-normal);font-size:var(--text-micro);color:var(--accent-text)}
.new-btn{
  display:flex;align-items:center;gap:var(--space-2);width:100%;text-align:left;
  font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary);
  background:var(--surface-2);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  padding:10px var(--space-3);margin-bottom:var(--space-3);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.new-btn:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.side-sec{font-size:var(--text-micro);font-weight:var(--weight-medium);letter-spacing:.08em;
  color:var(--text-muted);padding:var(--space-3) var(--space-2) var(--space-1);text-transform:uppercase}
.side-q{
  position:relative;
  display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;
  background:none;border:none;border-radius:var(--radius-sm);
  color:var(--text-secondary);font-size:var(--text-sm);padding:9px var(--space-2);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.side-q:hover{background:var(--surface-hover);color:var(--text-primary)}
a.side-q{text-decoration:none}
.side-q i{font-style:normal;flex:none;width:18px;height:18px;display:grid;place-items:center;color:inherit}
/* Faol bo'lim — §14 */
.side-q.on{background:var(--accent-soft);color:var(--text-primary);font-weight:var(--weight-medium)}
.side-q.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:16px;border-radius:2px;background:var(--accent-primary)}
.side-q.on i{color:var(--accent-text)}
/* ── Suhbatlar ro'yxati ── */
.chat-list{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;min-height:0;margin-bottom:var(--space-1)}
.chat-item{position:relative;padding-right:26px}
.chat-item.on{background:var(--accent-soft);color:var(--text-primary)}
.ci-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm)}
.ci-d{flex:none;font-style:normal;font-size:var(--text-micro);color:var(--text-muted)}
.ci-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:20px;height:20px;
  display:grid;place-items:center;border-radius:var(--radius-xs);font-size:.62rem;
  color:var(--text-muted);opacity:0;transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease)}
.chat-item:hover .ci-x{opacity:1}
.ci-x:hover{color:var(--danger);background:var(--danger-soft)}
@media(hover:none){.ci-x{opacity:.6}}

/* ── Yig'ilgan sidebar (§14: collapse) ── */
.side.mini{width:64px;padding-left:var(--space-2);padding-right:var(--space-2)}
.side.mini .logo,.side.mini .side-sec,.side.mini .chat-list,
.side.mini .new-btn span,.side.mini .side-q span,
.side.mini .acc>div,.side.mini .acc-more,.side.mini .wc-add,.side.mini .wallet-chip i{display:none}
.side.mini .side-top{justify-content:center;padding-left:0;padding-right:0}
.side.mini .new-btn,.side.mini .side-q,.side.mini .acc,.side.mini .wallet-chip{
  justify-content:center;padding-left:0;padding-right:0}
.side.mini .side-q.on::before{display:none}

.side-foot{margin-top:auto;border-top:1px solid var(--border-subtle);padding-top:10px;position:relative}
.me{display:flex;align-items:center;gap:10px;padding:6px 8px}
.me-dot{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-size:.8rem;font-weight:600;color:#062822;
  background:var(--accent-primary);
}
.me b{display:block;font-size:.8rem;font-weight:500;line-height:1.25}
.me i{font-style:normal;font-size:.66rem;color:var(--text-secondary)}
.side-mail{display:block;font-size:.7rem;color:var(--text-secondary);text-decoration:none;padding:6px 8px 0}
.side-mail:hover{color:var(--accent-primary)}

.overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(2px);z-index:55;opacity:0;pointer-events:none;transition:opacity .3s}
@media(max-width:900px){
  .side{position:fixed;inset:0 auto 0 0;transform:translateX(-102%)}
  .side.open{transform:none}
  body.side-open .overlay{opacity:1;pointer-events:auto}
}

/* ── MAIN ────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.top{
  flex:none;height:54px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;border-bottom:1px solid var(--border-subtle);position:relative;
  background:var(--bg-app);z-index:5;
}
.icon-btn{
  width:38px;height:38px;border-radius:var(--radius-sm);border:none;background:none;
  color:var(--text-secondary);font-size:1rem;transition:color .2s,background .2s;
}
.icon-btn:hover{color:var(--text-primary);background:var(--surface-hover)}
.icon-btn.on{color:var(--accent-primary)}
#burger{display:none}
@media(max-width:900px){#burger{display:block}}
.model{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:500;letter-spacing:.02em;color:var(--text-primary);
}
.model b{color:var(--text-secondary);font-weight:400}
.model .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-primary)}

/* ── CHAT AREA ───────────────────────── */
.chat{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:18px 16px 8px}
body.empty .chat{justify-content:center}

.stagebox{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
body.chatting .stagebox{
  position:sticky;top:-6px;z-index:4;padding:4px 0 10px;
  background:linear-gradient(180deg,var(--bg-app) 64%,transparent);
}
.holo-stage{
  position:relative;width:min(58vw,300px);aspect-ratio:1/1.1;cursor:pointer;
  transition:width .55s var(--ease);
}
body.chatting .holo-stage{width:120px}
.holo-stage::before{
  content:'';position:absolute;left:50%;bottom:2%;width:70%;height:12%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,var(--accent-soft-strong),transparent 75%);
  filter:blur(8px);pointer-events:none;
}
.holo-stage canvas,.holo-stage img{width:100%;height:100%;display:block;object-fit:contain;cursor:grab;touch-action:none;user-select:none}
.holo-stage canvas.dragging{cursor:grabbing}
.holo-stage [hidden]{display:none}
.status{font-size:.72rem;color:var(--text-secondary);text-align:center;max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.chatting .status{display:none}
body.chatting .status.busy{display:block;font-size:.68rem}

/* empty-state greeting */
.hello{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:22px;width:100%}
body.chatting .hello{display:none}
.hello h1{font-family:var(--font-sans);font-weight:700;font-size:clamp(1.3rem,3.6vw,1.75rem);letter-spacing:-.02em;margin-bottom:8px}
.hello h1 em{font-style:normal;color:var(--accent-primary)}
.hello p{color:var(--text-secondary);font-size:.94rem;max-width:58ch}
.hello .hint{font-size:.72rem;color:var(--text-secondary);margin-top:12px}
.hello .hint i{font-style:normal;color:var(--accent-primary)}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);width:100%;max-width:680px;margin-top:var(--space-6)}
@media(max-width:440px){.chips{grid-template-columns:1fr}}
.chip-card{
  text-align:left;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:14px 16px;color:var(--text-primary);transition:background .2s,border-color .2s,transform .25s var(--ease);
}
.chip-card:hover{background:var(--surface-2);border-color:var(--border-strong);transform:translateY(-2px)}
.chip-card i{font-style:normal;font-size:1rem;margin-right:8px}
.chip-card b{font-size:.88rem;font-weight:600}
.chip-card span{display:block;font-size:.72rem;color:var(--text-secondary);margin-top:4px}

/* messages */
.msgs{width:100%;max-width:var(--chat-width);display:flex;flex-direction:column;gap:18px;padding:8px 2px 22px}
.m-user{
  align-self:flex-end;max-width:82%;
  background:var(--surface-2);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl) var(--radius-xl) 6px var(--radius-xl);padding:10px 15px;font-size:.94rem;white-space:pre-wrap;
}
.m-ai{display:flex;gap:12px;align-items:flex-start}
.m-ai .av{
  flex:none;width:32px;height:32px;border-radius:var(--radius-sm);display:grid;place-items:center;
  border:1px solid var(--border-subtle);color:var(--accent-primary);font-size:.95rem;
  background:var(--accent-soft);
}
.m-ai .txt{padding-top:4px;font-size:.94rem;color:var(--text-primary);white-space:pre-wrap;min-width:0;overflow-wrap:anywhere}
.m-ai .txt a{color:var(--accent-primary);text-decoration:underline;text-underline-offset:3px}
.m-ai .txt .web-note{margin-top:6px;font-size:.74rem;color:var(--text-secondary,#8a93a6);opacity:.85;letter-spacing:.01em}
.dots{display:inline-flex;gap:5px;padding-top:9px}
.dots b{width:6px;height:6px;border-radius:50%;background:var(--text-secondary);opacity:.4;animation:dot 1.2s infinite}
.dots b:nth-child(2){animation-delay:.18s}
.dots b:nth-child(3){animation-delay:.36s}
@keyframes dot{40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.dots b{animation:none;opacity:.8}}

/* ── COMPOSER ────────────────────────── */
.composer{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:8px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,var(--bg-app) 40%);
}
.box{
  width:100%;max-width:var(--chat-width);display:flex;align-items:center;gap:var(--space-1);
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:26px;
  padding:6px 6px 6px var(--space-3);box-shadow:var(--shadow-float);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.box:focus-within{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-soft)}
.box input{
  flex:1;min-width:0;background:none;border:none;color:var(--text-primary);
  font-family:var(--font-sans);font-size:16px;padding:9px 0;
}
.box input::placeholder{color:var(--text-muted)}
.box input:focus{outline:none}
.box button{
  flex:none;width:40px;height:40px;border-radius:50%;font-size:.95rem;
  border:none;background:none;color:var(--text-secondary);transition:color .2s,background .2s;
}
.box button:hover{color:var(--text-primary);background:var(--surface-hover)}
#send{background:var(--accent-primary);color:#062822;font-weight:700}
#send:hover{background:#63e0d0;color:#062822}
#mic.rec{color:var(--warn);background:var(--warn-soft);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.5}}
#mic:disabled,#liveBtn:disabled{opacity:.35;cursor:not-allowed}
#mic{touch-action:none;user-select:none;-webkit-user-select:none}

/* ── Jonli suhbat tugmasi ── */
#liveBtn.on{color:var(--accent-primary);background:var(--accent-soft)}
#liveBtn.listening{animation:pulse 1.4s infinite}
/* jonli suhbatda "eshitilayotgan" matn — yarim shaffof, kursiv */
.m-interim{opacity:.55;font-style:italic;border-style:dashed!important}
body.live .box{border-color:var(--accent-primary)}
.fineprint{font-size:.66rem;color:var(--text-muted);text-align:center}
.fineprint i{font-style:normal;color:var(--accent-text)}

/* ══════ DARS REJIMI: chapda katta doska, o'ngda avatar + suhbat ══════ */
#modeLesson.on{color:var(--warn);background:var(--warn-soft)}

/* Dars rejimi uslublari — static/css/lesson.css (3 bosqich: landing, generatsiya, pleyer) */

/* ── AI javobidagi markdown ── */
.m-ai .txt b{color:var(--text-primary);font-weight:600}
.m-ai .txt i{color:var(--text-secondary)}
.md-h2,.md-h3{display:block;color:var(--text-primary);margin:.7em 0 .25em;font-weight:600}
.md-h2{font-size:1.02em}
.md-h3{font-size:.96em;color:var(--accent-primary)}
.md-li{display:block;padding-left:1.15em;position:relative;margin:.18em 0}
.md-li::before{content:'•';position:absolute;left:.15em;color:var(--accent-primary)}
.md-li em{font-style:normal;color:var(--accent-primary);font-family:var(--font-mono);font-size:.86em}
.md-li:has(em)::before{content:''}
.md-hr{display:block;height:1px;margin:.8em 0;background:var(--border-strong)}
.md-code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-hover);
  border:1px solid var(--border-subtle);border-radius:5px;padding:.1em .38em;color:var(--accent-primary)}
.md-pre{font-family:var(--font-mono);font-size:.84em;background:var(--surface-1);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:10px 12px;margin:.5em 0;
  overflow-x:auto;white-space:pre;color:var(--text-secondary)}


/* ── Yon panel navigatsiyasi va akkaunt bloki (Claude/ChatGPT uslubi) ── */
.side-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.acc{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;border-radius:var(--radius-lg);padding:8px 10px;
  color:var(--text-primary);text-decoration:none;font-family:inherit;transition:background .18s;
}
.acc:hover{background:var(--surface-hover)}
.acc>div{flex:1;min-width:0}
.acc b{display:block;font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc i{display:block;font-style:normal;font-size:.68rem;color:var(--text-secondary)}
.acc-av{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:.78rem;font-weight:700;color:#062822;
  background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
}
.acc-av.big{width:44px;height:44px;font-size:.95rem}
.acc-more{color:var(--text-secondary);font-size:1rem;padding:0 4px}
.acc-menu{
  position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:70;
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  padding:6px;box-shadow:var(--shadow-float);
}
.acc-head{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;border-bottom:1px solid var(--border-subtle);margin-bottom:4px}
.acc-head b{display:block;font-size:.86rem;font-weight:600}
.acc-head i{display:block;font-style:normal;font-size:.7rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;max-width:180px}
.acc-menu button,.acc-menu a{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:none;border-radius:var(--radius-sm);color:var(--text-primary);text-decoration:none;
  font-family:inherit;font-size:.82rem;padding:8px 10px;transition:background .15s;
}
.acc-menu button:hover,.acc-menu a:hover{background:var(--surface-hover)}
.acc-menu i{font-style:normal;width:18px;text-align:center}
.acc-menu hr{border:none;height:1px;background:var(--border-subtle);margin:4px 6px}
.acc-menu .danger{color:var(--danger)}

/* akkaunt sozlamalari modali */
.acc-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:var(--overlay);backdrop-filter:blur(3px)}
.acc-card{
  width:min(520px,94vw);background:var(--surface-1);border:1px solid var(--border-strong);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);overflow:hidden;
}
.acc-card-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-subtle)}
.acc-card-top b{font-size:.98rem}
.acc-card-top button{width:32px;height:32px;border:none;background:none;color:var(--text-secondary);border-radius:8px;font-size:.9rem}
.acc-card-top button:hover{color:var(--text-primary);background:var(--surface-hover)}
.acc-tabs{display:flex;gap:4px;padding:10px 14px 0}
.acc-tabs button{padding:8px 12px;border:none;background:none;color:var(--text-secondary);border-radius:8px;font-family:inherit;font-size:.8rem}
.acc-tabs button.on{background:var(--surface-hover);color:var(--text-primary)}
.acc-card section{padding:14px 18px 18px;display:flex;flex-direction:column;gap:6px}
.acc-profile{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle);margin-bottom:6px}
.acc-profile b{display:block;font-size:.95rem}
.acc-profile i{display:block;font-style:normal;font-size:.72rem;color:var(--text-secondary)}
.acc-card label{font-size:.7rem;color:var(--text-secondary);margin-top:6px}
.acc-card input{
  background:var(--bg-app);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:10px;
  padding:10px 12px;font-family:inherit;font-size:.88rem;
}
.acc-card input:focus{outline:none;border-color:var(--accent-primary)}
.acc-save{
  margin-top:10px;align-self:flex-start;padding:9px 16px;border:none;border-radius:10px;
  background:var(--accent-primary);color:#062822;font-family:inherit;font-size:.82rem;font-weight:700;
}
.acc-save.danger{background:none;border:1px solid var(--danger);color:var(--danger)}
.acc-msg{font-size:.76rem;color:var(--accent-primary);min-height:1.1em}
.acc-row{display:flex;justify-content:space-between;gap:12px;font-size:.8rem;padding:8px 0;border-bottom:1px solid var(--border-subtle)}
.acc-row span{color:var(--text-secondary)}
.acc-row b{font-weight:500;text-align:right}
/* hidden atributi display qoidalaridan ustun bo'lsin */
.acc-modal[hidden],.acc-menu[hidden],.acc[hidden]{display:none}
.acc-card section[hidden]{display:none}
.acc-head>div{flex:1;min-width:0}
.acc-head i{max-width:100%;white-space:nowrap}

/* ── Hamyon (coin-billing) ── */
.wallet-chip{display:flex;align-items:center;gap:6px;padding:8px 10px;margin:4px 0;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);text-decoration:none;color:var(--text-primary);font-size:.82rem;transition:background .2s var(--ease),border-color .2s var(--ease)}
.wallet-chip:hover{background:var(--surface-hover)}
.wallet-chip b{font-weight:600}
.wallet-chip i{font-style:normal;color:var(--text-secondary)}
.wallet-chip .wc-add{margin-left:auto;color:var(--accent-primary);font-size:.74rem}
.wallet-chip.low{border-color:var(--warn)}
.wallet-chip.low b{color:var(--warn)}
.wallet-chip.bump{animation:wcBump .6s var(--ease)}
@keyframes wcBump{0%{background:var(--accent-soft);transform:scale(1.02)}100%{background:transparent;transform:scale(1)}}
.model{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.model-pick{background:var(--surface-2);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:8px;font:inherit;font-size:.76rem;padding:3px 6px;max-width:240px}
.model-cost{font-size:.72rem;color:var(--text-secondary);white-space:nowrap}

/* ── Xavfsizlik: 2FA (TOTP) ── */
.acc-card{max-height:calc(100svh - 24px);overflow-y:auto}
.acc-sep{height:1px;background:var(--border-subtle);margin:12px 0 4px}
.acc-note{font-size:.72rem;color:var(--text-secondary);line-height:1.5}
.acc-steps{margin:4px 0 6px 16px;font-size:.76rem;color:var(--text-secondary);line-height:1.6}
.acc-steps b{color:var(--text-primary);font-weight:600}
.acc-qr-wrap{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin:6px 0}
.acc-qr{flex:none;width:180px;min-height:180px;padding:8px;border-radius:12px;background:#fff;display:grid;place-items:center}
.acc-qr img,.acc-qr canvas{display:block;max-width:100%}
.acc-qr-none{color:#062822;font-size:.7rem;line-height:1.5;text-align:center;word-break:break-all}
.acc-qr-info{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px}
.acc-secret{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acc-secret code{
  font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.08em;word-break:break-all;
  background:var(--bg-app);border:1px solid var(--border-strong);border-radius:8px;padding:6px 10px;
}
.acc-mini{padding:6px 10px;border:1px solid var(--border-strong);border-radius:8px;background:none;color:var(--text-primary);font-family:inherit;font-size:.72rem;cursor:pointer}
.acc-mini:hover{background:var(--surface-hover)}
.acc-card input.acc-code{font-family:'JetBrains Mono',monospace;font-size:1.1rem;letter-spacing:.35em;text-align:center;max-width:200px}
.acc-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.acc-btns .acc-save{margin-top:6px}
.acc-save.ghost{background:none;border:1px solid var(--border-strong);color:var(--text-primary);font-weight:500}
.acc-save:disabled{opacity:.45;cursor:not-allowed}
.acc-msg.err{color:var(--danger)}

/* Chuqur fikrlash tugmasi va javob belgisi */
.deep-btn{background:transparent;color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:999px;font:inherit;font-size:.72rem;padding:3px 9px;cursor:pointer;transition:all .2s var(--ease)}
.deep-btn:hover{color:var(--text-primary);border-color:var(--border-strong)}
.deep-btn.on{background:var(--accent-soft);color:var(--accent-primary);border-color:var(--accent-primary)}
.model-note{font-size:.7rem;color:var(--text-secondary);white-space:nowrap}


/* ── Pro darajasi tugmasi (model nomlari mijozga ko'rsatilmaydi) ── */
.pro-btn{
  display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:3px 10px 3px 7px;
  border-radius:999px;border:1px solid var(--border-strong);background:none;
  color:var(--text-secondary);font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.02em;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
.pro-btn svg{width:13px;height:13px;fill:currentColor}
.pro-btn:hover{color:var(--text-primary);border-color:var(--border-strong)}
.pro-btn.on{
  color:#2B1A02;border-color:transparent;
  background:linear-gradient(135deg,#ffd76a,#f59e0b);
  box-shadow:0 0 14px var(--warn-soft);
}

/* ── Ovoz (erkak/ayol) ikonkasi: professional SVG ── */
.ovoz-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block;margin:auto}
.ovoz-btn.on{color:var(--accent-primary)}

/* ── Mavzu tanlagichi (akkaunt menyusida — §35 progressive disclosure) ── */
.acc-theme{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  padding:var(--space-2) var(--space-2) var(--space-1);}
.acc-theme>span{font-size:var(--text-micro);color:var(--text-muted)}
.acc-theme .segmented button span{display:none}
.acc-theme .segmented button{padding:0 var(--space-2)}

/* ── Robot avatar (robot-head.js): rasm shaffof fonli, yorug' mavzuda ham
   ko'rinadi — alohida to'q sahna kerak emas. */
:root[data-theme="light"] .holo-stage::before{opacity:.5}

/* ── Kichik ekranda sarlavha paneli (§40): markazdagi blok absolyut
   joylashuvdan oddiy qatorga o'tadi, shunda tugmalar ustma-ust tushmaydi. */
@media(max-width:560px){
  .top{gap:var(--space-1);padding:0 var(--space-2)}
  .model{position:static;transform:none;flex:1;min-width:0;justify-content:center;
    overflow:hidden;white-space:nowrap}
  .model-cost,.model-note{display:none}
  .icon-btn{width:36px;height:36px}
}