/* Ko'rinish sozlamalari: tungi rejim (html.dark) va katta shrift (html.big). Yordam kartochkasi. */
.tools { display: flex; gap: 8px; align-items: center; }
.disp .lang-btn { padding: 6px 9px; }
.aa { font: 800 15px var(--serif); display: inline-block; width: 20px; text-align: center; }
.lang-menu button span { display: inline-flex; align-items: center; gap: 8px; }

.help-card { border: 2px solid color-mix(in srgb, var(--ok) 45%, white) !important; }
.help-card .tag { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: var(--ok); text-transform: uppercase; letter-spacing: .4px; }
.help-card .tag svg { width: 16px; height: 16px; }
.help-card p { margin: 8px 0 12px; }
.help-item { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.help-item .btn { justify-self: start; }
.help-item small { color: var(--muted); }

/* ---------- Katta shrift ---------- */
html.big body { font-size: 17px; }
html.big .opt { font-size: 17px; }
html.big .q-text { font-size: 21px; }
html.big .sub, html.big .lead, html.big .note, html.big .why, html.big .status { font-size: 16px; }
html.big .ai li, html.big .opinion p, html.big .discuss, html.big .fb-lbl, html.big .bar-row .lbl, html.big .steps li { font-size: 16.5px; }
html.big .field label, html.big .check, html.big .feature { font-size: 15.5px; }
html.big .btn { font-size: 17px; }

/* ---------- Tungi rejim ---------- */
html.dark .logo path.la { stroke: #e0b664; }
html.dark .logo .lh { fill: #f4c3cb; }
html.dark .logo path.li { stroke: #e9cf98; }
html.dark {
  --ink: #f4e9e6; --muted: #c7b3ae; --card: #2a171c; --line: #4a2f35;
  --glass: rgba(42, 22, 28, .72); --glass-strong: rgba(48, 26, 32, .86); --glass-line: rgba(255, 255, 255, .09);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .06); --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --t-bg: #3a2027; --er-bg: #1d2a44; --xotin-bg: #3d1a2a;
  color-scheme: dark;
}
html.dark body { background: linear-gradient(180deg, #1c0f13 0%, #241216 50%, #1a0d11 100%) fixed; }
html.dark .petals, html.dark .blob { opacity: .25; }
html.dark .theme-ruby { --t: #e06b7e; } html.dark .theme-rose { --t: #ec7078; } html.dark .theme-green { --t: #5bbd88; }
html.dark .theme-navy { --t: #7f9de0; } html.dark .theme-teal { --t: #4dbcc0; } html.dark .theme-purple { --t: #a985dc; }
html.dark .title, html.dark .card h2, html.dark .ai h3, html.dark .back, html.dark .mini-brand, html.dark .reveal-card h2, html.dark .fact-hl h3, html.dark .big-pct, html.dark .page-title { color: #f3b9c3; }
html.dark .title .big { text-shadow: 0 1px 0 #6b1321, 0 2px 0 #520e19, 0 3px 0 #3d0a12, 0 8px 16px rgba(0, 0, 0, .5); }
html.dark .brand b, html.dark .feature, html.dark .lead { color: #f1dcd7; }
html.dark .input, html.dark .opt, html.dark .role, html.dark .status, html.dark .code-box, html.dark .pair-box, html.dark .chips button, html.dark .lang-btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: var(--ink); }
html.dark .input:focus { background: rgba(255, 255, 255, .1); }
html.dark .opt[aria-checked='true'] { background: color-mix(in srgb, var(--t) 22%, #2a171c); }
html.dark .opinion.er { background: rgba(31, 79, 154, .25); } html.dark .opinion.xotin { background: rgba(194, 24, 91, .2); }
html.dark .opinion.er b, html.dark .opinion.er .av { color: #9dbcf2; } html.dark .opinion.xotin b, html.dark .opinion.xotin .av { color: #f39abd; }
html.dark .opinion .av { background: rgba(255, 255, 255, .08); }
html.dark .discuss, html.dark .why { background: rgba(201, 151, 63, .12); color: var(--ink); }
html.dark .level, html.dark .reveal-level { background: #3a2027; color: #f3b9c3; }
html.dark .ring div, html.dark .reveal-ring { --bg: #2a171c; }
html.dark .ring div { background: #2a171c; }
html.dark .bar, html.dark .fb-bar, html.dark .meter { background: rgba(255, 255, 255, .08); }
html.dark .bottom-bar { background: rgba(28, 15, 19, .82); }
html.dark .lang-menu { background: #2a171c; border-color: #4a2f35; }
html.dark .lang-menu button { color: var(--ink); }
html.dark .lang-menu button:hover, html.dark .lang-menu button[aria-checked='true'] { background: #3a2027; color: #f3b9c3; }
html.dark .ready-banner, html.dark .fact-hl { background: linear-gradient(135deg, #3a2a14, #33171d) !important; }
html.dark .ready-banner b { color: #f3b9c3; }
html.dark .rb-ring, html.dark .fact-tile i, html.dark .kpi i { background: #2a171c; }
html.dark .reveal-card { background: linear-gradient(160deg, #2e1a1f, #22121a); }
html.dark .reveal-ring { background: radial-gradient(closest-side, #2a171c 78%, transparent 79% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), #4a2f35 0); }
html.dark .match.same { background: rgba(46, 125, 79, .25); color: #7fd4a2; }
html.dark .match.close { background: rgba(178, 106, 0, .25); color: #f1b45e; }
html.dark .match.diff { background: rgba(179, 38, 30, .25); color: #f08a83; }
html.dark .btn-ghost { background: rgba(255, 255, 255, .07); color: #f3b9c3; border-color: rgba(255, 255, 255, .14); }
html.dark .tabs { background: rgba(255, 255, 255, .05); }
html.dark .chapter-list .now button { background: rgba(255, 255, 255, .1); }
html.dark .help-item { border-color: var(--line); }
html.dark .toast { background: #f4e9e6; color: #2a171c; }