@font-face {
  font-family: 'JetBrains Mono';
  src: url('JetBrainsMono-latin.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('JetBrainsMono-cyrillic.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('Montserrat-Bold.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00B2-00B3, U+00B9, U+2070-209F;
}
@font-face {
  font-family: 'Roboto';
  src: url('Roboto-arrows.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2190-21FF;
}
@font-face {
  font-family: 'Montserrat';
  src: url('Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #15181c;
  --surface: #20242a;
  --surface-2: #2a2f36;
  --text: #f2f4f6;
  --text-muted: #98a1a9;
  --border: rgba(255,255,255,0.08);
  --primary: #3ddc97;
  --primary-dark: #24a874;
  --gold: #ffc93c;
  --gold-dark: #d9a422;
  --coral: #ff5c5c;
  --coral-dark: #d9403f;
  --blue: #3e9dff;
  --blue-dark: #2778cc;
  --violet: #8c6fff;
  --violet-dark: #6a4fd9;
  --primary-ink: var(--primary);
  --gold-ink: var(--gold);
  --coral-ink: var(--coral);
  --blue-ink: var(--blue);
  --violet-ink: #a08cff;
}
:root.theme-light {
  --primary-ink: #0b6b42;
  --gold-ink: #8a5a00;
  --coral-ink: #b71c1c;
  --blue-ink: #155aa8;
  --violet-ink: #5b3fd6;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, color 0.2s ease;
  touch-action: manipulation;
  padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
}
.brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 0;
  max-width: 480px;
  margin: 0 auto;
}
.brand-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  outline: none; -webkit-tap-highlight-color: transparent;
}
.brand-header-left:focus, .brand-header-left:focus-visible { outline: none; }
.brand-logo {
  width: 36px;
  height: 36px;
  padding: 4px;
  border-radius: 50%;
  background: #ffffff;
  box-sizing: content-box;
}
.brand-wordmark {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size:calc(17px * var(--fs, 1));
  color: var(--text);
}
.brand-wordmark strong { font-weight: 700; }
.screen { display: none; padding: 12px 16px 32px; max-width: 480px; margin: 0 auto; }
.screen.active { display: block; }
h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size:calc(22px * var(--fs, 1));
  margin: 4px 0 4px;
}
.theme-toggle-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  font-size:calc(15px * var(--fs, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.theme-toggle-btn { color: var(--text); }
.theme-toggle-btn .ic { width: 18px; height: 18px; }
.theme-toggle-btn:active { transform: scale(0.92); }
.theme-toggle-btn { position: relative; }
.theme-toggle-btn::after { content: ''; position: absolute; inset: -5px; }
.back-btn::after { content: ''; position: absolute; inset: -9px -8px; }
.progress-chip { position: relative; }
.progress-chip::after { content: ''; position: absolute; inset: -9px -6px; }
.subtitle { color: var(--text-muted); font-size:calc(14px * var(--fs, 1)); margin: 0 0 16px; line-height: 1.4; }
.progress-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 16px 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size:calc(14px * var(--fs, 1));
}
.progress-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  line-height: 1;
}
.progress-chip.streak { color: var(--coral-ink); }
.progress-chip.level { color: var(--violet-ink); }
.ic { width: 1em; height: 1em; display: block; flex: none; }
.chip-icon .ic { width: 15px; height: 15px; }
.chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size:calc(15px * var(--fs, 1));
}
.xp-track {
  flex: 1;
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.xp-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  width: 0%;
  transition: width 0.4s ease;
}
.xp-label {
  font-size:calc(12px * var(--fs, 1));
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
}
.module-card {
  background: var(--surface);
  border: none;
  border-radius: 18px;
  border-bottom: 4px solid var(--module-shadow, var(--surface-2));
  padding: 16px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.08s ease;
}
.module-card:active { transform: translateY(3px); border-bottom-width: 1px; }
.module-card.disabled { opacity: 0.4; cursor: default; }
.module-card.disabled:active { transform: none; }
.module-icon {
  font-size:calc(26px * var(--fs, 1));
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--module-bg, var(--surface-2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.module-card-content {
  flex: 1;
  min-width: 0;
}
.module-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size:calc(16px * var(--fs, 1));
  margin: 0 0 3px;
}
.module-desc { color: var(--text-muted); font-size:calc(13px * var(--fs, 1)); margin: 0; }
.module-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.module-progress-track {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.module-progress-fill {
  height: 100%;
  background: var(--module-shadow, var(--primary));
  border-radius: 999px;
  width: 0%;
  transition: width 0.3s ease;
}
.module-progress-text {
  font-family: 'JetBrains Mono', monospace;
  font-size:calc(12px * var(--fs, 1));
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 40px;
  text-align: right;
}
.deck-counter {
  font-size:calc(13px * var(--fs, 1));
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.deck-counter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.deck-counter-row .deck-counter { margin-bottom: 0; }
.progress-ring {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  transform: rotate(-90deg);
}
.progress-ring-bg {
  fill: none;
  stroke: var(--surface-2);
  stroke-width: 3;
}
.progress-ring-fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 97.4;
  stroke-dashoffset: 97.4;
  transition: stroke-dashoffset 0.6s cubic-bezier(.2,.8,.2,1);
}
.deck-percent {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size:calc(12px * var(--fs, 1));
  color: var(--text-muted);
  margin-left: auto;
}
.round-complete {
  text-align: center;
  padding: 40px 20px;
}
.round-complete-emoji { font-size:calc(48px * var(--fs, 1)); margin: 0 0 12px; }
.round-complete-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size:calc(18px * var(--fs, 1));
  margin: 0 0 20px;
}
.arrow-roboto { font-family: 'Roboto', sans-serif; }
.temp-arrow {
  position: relative;
  display: inline-block;
  padding-top: 0.85em;
  margin: 0 2px;
  vertical-align: middle;
  line-height: 1;
}
.temp-arrow-t {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
#screen-home h1, #screen-oge-chem h1,
#screen-home .subtitle, #screen-oge-chem .subtitle,
#screen-home .module-title, #screen-oge-chem .module-title,
#screen-home .module-desc, #screen-oge-chem .module-desc,
#screen-home .module-progress-text, #screen-oge-chem .module-progress-text {
  font-family: 'Montserrat', sans-serif;
}
.back-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size:calc(14px * var(--fs, 1));
  padding: 4px 0;
  margin-bottom: 8px;
  cursor: pointer;
}
.screen-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 4px;
}
.screen-header-row h1 { margin: 0; }
.mode-switch-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mode-switch-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size:calc(12px * var(--fs, 1));
  color: var(--text-muted);
  white-space: nowrap;
}
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-track {
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.switch-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s ease, background 0.2s ease;
}
.switch input:checked + .switch-track {
  background: rgba(255,201,60,0.25);
  border-color: var(--gold);
}
.switch input:checked + .switch-track .switch-thumb {
  transform: translateX(20px);
  background: var(--gold);
}
.topic-tag {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size:calc(12px * var(--fs, 1));
  color: var(--violet-ink);
  background: rgba(140,111,255,0.15);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
button.topic-tag {
  border: none;
  min-height: 28px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
button.topic-tag:disabled { cursor: default; opacity: 1; }
button.topic-tag.has-hint { cursor: pointer; }
button.topic-tag.has-hint:active { transform: scale(0.96); }
button.topic-tag.has-hint::after {
  content: '?';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--violet-ink);
  color: var(--surface);
  font-size:calc(12px * var(--fs, 1));
  font-weight: 800;
  vertical-align: 1px;
}
.rxn-hint-title {
  margin: 0 0 12px;
  font-size:calc(18px * var(--fs, 1));
  font-weight: 800;
  color: var(--violet-ink);
}
#rxn-hint-overlay .modal-card { display: flex; flex-direction: column; overflow: hidden; }
.rxn-hint-body {
  min-height: 0;
  margin-bottom: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  color: var(--text);
  font-size:calc(15px * var(--fs, 1));
  font-weight: 600;
  line-height: 1.5;
}
.rxn-hint-body p { margin: 0 0 10px; }
.rxn-hint-body ul { margin: 0 0 10px; padding-left: 20px; }
.rxn-hint-body li { margin-bottom: 4px; }
.rxn-hint-body sup.hint-ion { font-size: 0.68em; line-height: 0; font-weight: 600; }
.task-card {
  background: var(--surface);
  border-radius: 18px;
  padding: 16px 18px 14px;
  margin-bottom: 16px;
}
.task-text { font-size:calc(17px * var(--fs, 1)); line-height: 1.35; margin: 0; font-weight: 600; }
.answer-input {
  width: 100%;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-family: 'JetBrains Mono', 'Montserrat', sans-serif;
  font-weight: 600;
  font-size:calc(16px * var(--fs, 1));
  padding: 13px 14px;
  margin-bottom: 10px;
}
.answer-input:focus { outline: none; border-color: var(--blue); }
.equation-input {
  display: block;
  resize: none;
  overflow: hidden;
  line-height: 1.4;
  min-height: 52px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}
.sign-btn-row {
  display: flex;
  gap: 10px;
  margin: -2px 0 10px;
}
.sign-btn {
  flex: 1;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-bottom: 4px solid var(--border);
  color: var(--text);
  border-radius: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size:calc(20px * var(--fs, 1));
  padding: 10px;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.sign-btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.sign-btn-row--digits { gap: 5px; margin-top: 0; }
.sign-btn-row--digits .sign-btn { font-size:calc(18px * var(--fs, 1)); padding: 10px 0; border-radius: 12px; }
.hint {
  font-size:calc(12px * var(--fs, 1));
  color: var(--text-muted);
  margin: -2px 0 16px;
  line-height: 1.4;
}
.primary-btn {
  width: 100%;
  background: var(--primary);
  border-bottom: 4px solid var(--primary-dark);
  color: #0b1410;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size:calc(16px * var(--fs, 1));
  padding: 14px;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.primary-btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.primary-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.btn-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.btn-row .primary-btn,
.btn-row .secondary-btn {
  flex: 1;
  width: auto;
}
:has(> .btn-row[style*="display: flex"]) > .primary-btn[onclick^="submit"] {
  display: none;
}
.secondary-btn {
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-bottom: 4px solid var(--border);
  color: var(--text);
  border-radius: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size:calc(15px * var(--fs, 1));
  padding: 12px;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.secondary-btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.answer-reveal {
  margin-top: 10px;
  padding: 12px 14px 12px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--reveal-border);
  border-left: 5px solid var(--primary);
  background: var(--reveal-bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size:calc(15px * var(--fs, 1));
  line-height: 1.45;
}
.answer-reveal::before {
  content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; border-radius: 50%;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1410' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.answer-reveal b { color: var(--primary-ink); }
:root { --reveal-bg: rgba(61,220,151,0.10); --reveal-border: rgba(61,220,151,0.45); }
:root.theme-light { --reveal-bg: rgba(29,160,103,0.08); --reveal-border: rgba(29,160,103,0.40); }
.feedback {
  margin-top: 14px;
  padding: 13px 16px;
  font-size:calc(14px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.5;
  border-radius: 14px;
}
.feedback.good { background: rgba(61,220,151,0.15); color: var(--primary-ink); }
.feedback.bad { background: rgba(255,92,92,0.15); color: var(--coral-ink); }
.feedback.hint-notice { background: rgba(255,201,60,0.15); color: var(--gold-ink); line-height: 1.5; }
.stats-row { display: none; }
.element-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}
.element-symbol {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size:calc(30px * var(--fs, 1));
  line-height: 1.2;
  margin-bottom: 0;
  color: var(--violet-ink);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.element-z { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-muted); font-size:calc(14px * var(--fs, 1)); }
.element-name { color: var(--text-muted); font-size:calc(14px * var(--fs, 1)); font-weight: 600; }
#econfig-diagram {
  display: flex;
  flex-direction: column-reverse;
}
.subshell-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.subshell-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size:calc(14px * var(--fs, 1));
  color: var(--text-muted);
  width: 32px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.cells { display: flex; gap: 6px; }
.cell {
  width: 36px;
  height: 36px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size:calc(15px * var(--fs, 1));
  color: var(--violet);
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.cell:active { transform: scale(0.92); border-color: var(--violet); }
.wrong-label { color: var(--coral-ink); }
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.modal-card {
  background: var(--surface);
  border-radius: 20px;
  padding: 26px 22px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal-icon { font-size:calc(40px * var(--fs, 1)); margin-bottom: 10px; }
.modal-icon .ic { margin: 0 auto; }
.modal-text a { color: var(--blue-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.modal-text {
  font-size:calc(15px * var(--fs, 1));
  line-height: 1.5;
  color: var(--text);
  font-weight: 600;
  margin: 0 0 20px;
}
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8px 16px calc(8px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
  z-index: 500;
}
.tab-bar-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size:calc(12px * var(--fs, 1));
  transition: color 0.15s ease;
}
.tab-bar-icon {
  font-size:calc(22px * var(--fs, 1));
  line-height: 1;
  padding: 4px 18px;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.tab-bar-btn.active .tab-bar-icon { background: var(--tab-active-bg); }
:root { --nav-sel-bg: rgba(61, 220, 151, 0.16); }
:root.theme-light { --nav-sel-bg: rgba(29, 160, 103, 0.12); }
:root { --tab-active-bg: rgba(61, 220, 151, 0.18); }
:root.theme-light { --tab-active-bg: rgba(29, 160, 103, 0.16); }
.tab-bar-btn.active { color: var(--primary-ink); }
.tab-bar-spacer { height: 80px; }
#trivial-organic-canvas-wrap {
  width: 100%;
  height: 380px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: #fff;
  touch-action: none;
  margin-top: 12px;
}
#trivial-organic-svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#trivial-organic-svg * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#trivial-organic-mode-bond-btn.active,
#trivial-organic-mode-move-btn.active,
#trivial-organic-mode-erase-btn.active {
  background: var(--primary);
  border-color: var(--primary-dark);
  border-bottom-color: var(--primary-dark);
  color: #0b1410;
}
.tc-toolbar-row .secondary-btn {
  flex: 1;
  padding: 12px 4px;
  font-size:calc(14px * var(--fs, 1));
  white-space: nowrap;
}
@media (max-width: 350px) {
  .tc-toolbar-row .secondary-btn { font-size:calc(13px * var(--fs, 1)); }
}
#trivial-organic-canvas-wrap.erasing { border-color: var(--coral); }
#trivial-organic-undo-btn:disabled { opacity: 0.4; cursor: default; }
#trivial-organic-pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}
#trivial-organic-pick-grid button {
  padding: 14px 4px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  border: 2px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size:calc(15px * var(--fs, 1));
  cursor: pointer;
}
#trivial-organic-pick-grid button:active { transform: scale(0.95); }
#trivial-organic-pick-grid button.danger { color: var(--coral-ink); border-color: rgba(255,92,92,0.4); }
.flame-card { margin-bottom: 10px; }
.flame-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.flame-card-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.flame-card-person .task-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flame-dm-btn,
.flame-delete-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  font-size:calc(16px * var(--fs, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.flame-dm-btn:active,
.flame-delete-btn:active { transform: scale(0.92); }
.flame-dm-btn, .flame-delete-btn { color: var(--text); }
.flame-avatar,
.flame-avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.flame-avatar { object-fit: cover; background: var(--surface-2); }
.flame-avatar-fallback {
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size:calc(16px * var(--fs, 1));
  align-items: center;
  justify-content: center;
}
.flame-progress {
  display: flex;
  align-items: center;
  gap: 6px;
}
.flame-progress-track {
  flex: 1;
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}
.flame-progress-mine { justify-content: flex-start; }
.flame-progress-partner { justify-content: flex-end; }
.flame-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--coral));
  transition: width 0.3s ease;
}
.flame-progress-divider {
  width: 2px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
}
.flame-progress-labels {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 0;
}
.roman-btn-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: 10px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
}
.roman-btn-row button {
  flex: 1 1 auto;
  min-width: 40px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size:calc(13px * var(--fs, 1));
  padding: 6px 8px;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.roman-btn-row button:active { transform: scale(0.92); border-color: var(--violet); }
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-size:calc(13px * var(--fs, 1));
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
  padding: 0;
}
.info-btn:active { transform: scale(0.9); }
#trivial-organic-action-bar {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding-bottom: 10px;
  margin-top: 4px;
}
#trivial-organic-action-bar.answered {
  position: static;
}
.welcome-greeting {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size:calc(22px * var(--fs, 1));
  line-height: 1.35;
  margin: 4px 0 6px;
  white-space: pre-line;
}
.stats-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.stats-list-row:last-child { border-bottom: none; }
.stats-list-row:active { opacity: 0.7; }
.stats-list-row-title { font-weight: 600; font-size:calc(15px * var(--fs, 1)); }
.stats-list-row-chevron { color: var(--text-muted); font-size:calc(20px * var(--fs, 1)); }
.stats-back-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  cursor: pointer;
  color: var(--text-muted);
  font-size:calc(14px * var(--fs, 1));
}
.stats-back-row:active { opacity: 0.7; }
.stats-back-arrow { font-size:calc(18px * var(--fs, 1)); }
.stats-detail-title { font-size:calc(20px * var(--fs, 1)); line-height: 1.3; margin: 0 0 24px; }
.stats-ring-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.stats-tiles { display: flex; gap: 10px; }
.stats-tile {
  flex: 1;
  background: var(--surface);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.stats-tile-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size:calc(20px * var(--fs, 1)); }
.stats-tile-label { color: var(--text-muted); font-size:calc(12px * var(--fs, 1)); margin-top: 2px; }
.home-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 18px;
  background: var(--surface);
  border-radius: 16px;
}
.home-tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size:calc(14px * var(--fs, 1));
  font-weight: 700;
  padding: 11px 8px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}
.home-tab.active { background: var(--nav-sel-bg); color: var(--primary-ink); box-shadow: inset 0 0 0 1px var(--primary); }
.home-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.home-group[hidden] { display: none; }
#screen-home, #screen-oge-chem { --bio-g-dark: #8665C3; --bio-g-main: #E7D3FF; --bio-g-bg: #F7EEFF; }
.home-hub[hidden], .home-group-view[hidden] { display: none; }
#screen-home h1, #screen-oge-chem h1 { text-transform: lowercase; }
#oge-group-view { margin-bottom: 12px; }
#screen-oge-chem > .subtitle { font-size:calc(15px * var(--fs, 1)); line-height: normal; margin: 2px 0 18px; }
#screen-home .home-hub > .subtitle, #screen-home .home-group-view > .subtitle { font-size:calc(15px * var(--fs, 1)); line-height: normal; margin: 2px 0 18px; }
.chem-rects { display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; }
:is(#screen-home, #screen-oge-chem) .chem-rect {
  position: relative; overflow: hidden; display: flex; flex-direction: row; align-items: center; gap: 14px; margin: 0;
  padding: 14px 14px 14px 18px; border: 0; border-radius: 26px; min-height: clamp(88px, calc((100dvh - 330px) / 5), 132px);
  background: var(--bio-g-dark); color: #fff;
}
:root.theme-light :is(#screen-home, #screen-oge-chem) .chem-rect { background: var(--bio-g-bg); color: #181818; }
:is(#screen-home, #screen-oge-chem) .chem-rect[hidden] { display: none; }
:is(#screen-home, #screen-oge-chem) .chem-rect > * { position: relative; z-index: 1; }
:is(#screen-home, #screen-oge-chem) .chem-rect > .bio-group-wm { position: absolute; z-index: 0; width: 120px; height: 120px; right: -14px; bottom: -26px; }
:is(#screen-home, #screen-oge-chem) .chem-rect .bio-group-text, :is(#screen-home, #screen-oge-chem) .chem-rect .review-home-text { flex: 1; min-width: 0; max-width: none; gap: 0; }
:is(#screen-home, #screen-oge-chem) .chem-rect .bio-group-title, :is(#screen-home, #screen-oge-chem) .chem-rect .review-home-text strong {
  display: block; font-size:calc(22px * var(--fs, 1)); font-weight: 700; letter-spacing: -0.4px; line-height: 1.1; text-transform: lowercase;
}
:is(#screen-home, #screen-oge-chem) .chem-rect .bio-group-sub, :is(#screen-home, #screen-oge-chem) .chem-rect .review-home-text small {
  display: block; margin-top: 3px; font-size:calc(14px * var(--fs, 1)); font-weight: 500; line-height: 1.35; color: inherit;
}
:root.theme-light :is(#screen-home, #screen-oge-chem) .chem-rect .bio-group-sub, :root.theme-light :is(#screen-home, #screen-oge-chem) .chem-rect .review-home-text small { color: #434343; }
:is(#screen-home, #screen-oge-chem) .chem-rect .bio-group-arrow { flex: none; }
:is(#screen-home, #screen-oge-chem) .chem-rect .chem-gbar { margin-top: 8px; }
:is(#screen-home, #screen-oge-chem) .chem-rect.chem-tile:active { transform: scale(0.98); }
:is(#screen-home, #screen-oge-chem) .chem-rect.chem-tile.trainer-soon { filter: brightness(0.9) saturate(0.55); cursor: default; }
:is(#screen-home, #screen-oge-chem) .chem-rect.chem-tile.trainer-soon .bio-group-arrow { visibility: hidden; }
:is(#screen-home, #screen-oge-chem) .chem-rect.chem-tile.trainer-soon:active { transform: none; }
#screen-home .review-home.chem-rect.done { padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 389px) {
  :is(#screen-home, #screen-oge-chem) .chem-rect { gap: 12px; padding-right: 12px; }
  :is(#screen-home, #screen-oge-chem) .chem-rect .bio-group-sub, :is(#screen-home, #screen-oge-chem) .chem-rect .review-home-text small { font-size:calc(13px * var(--fs, 1)); }
}
@media (max-width: 359px) {
  :is(#screen-home, #screen-oge-chem) .chem-rect { gap: 10px; padding: 12px 12px 12px 14px; }
  :is(#screen-home, #screen-oge-chem) .chem-rect .bio-group-title, :is(#screen-home, #screen-oge-chem) .chem-rect .review-home-text strong { font-size:calc(19px * var(--fs, 1)); }
  :is(#screen-home, #screen-oge-chem) .chem-rect .bio-group-sub, :is(#screen-home, #screen-oge-chem) .chem-rect .review-home-text small { font-size:calc(13px * var(--fs, 1)); }
  :is(#screen-home, #screen-oge-chem) .chem-rect .bio-group-ico { width: 38px; height: 38px; }
  :is(#screen-home, #screen-oge-chem) .chem-rect .bio-group-ico .ic { width: 21px; height: 21px; }
  :is(#screen-home, #screen-oge-chem) .chem-rect .review-home-btn { padding: 10px 14px; font-size:calc(14px * var(--fs, 1)); }
}
.chem-gbar { display: flex; align-items: center; gap: 8px; margin-top: clamp(6px, calc(2dvh - 7px), 10px); }
.chem-gbar > span { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.25); overflow: hidden; }
.chem-gbar i { display: block; height: 100%; width: 0; border-radius: 3px; background: #fff; transition: width 0.3s ease; }
:root.theme-light .chem-gbar > span { background: #fff; }
:root.theme-light .chem-gbar i { background: var(--bio-g-dark); }
.chem-gbar em { font-style: normal; font-size:calc(12px * var(--fs, 1)); font-weight: 700; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
:is(#screen-home, #screen-oge-chem) .home-banner-row { margin: 0 0 12px; gap: 10px; }
:is(#screen-home, #screen-oge-chem) .home-banner-row .home-banner { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px;
  min-height: 112px; padding: 14px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); }
:is(#screen-home, #screen-oge-chem) .home-banner-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size:calc(20px * var(--fs, 1)); color: #fff; background: var(--bio-g-dark); }
:is(#screen-home, #screen-oge-chem) .home-banner-row .home-banner-icon { display: flex; }
:is(#screen-home, #screen-oge-chem) .home-banner-row .home-banner-text { flex: none; width: 100%; }
:is(#screen-home, #screen-oge-chem) .home-banner-row .home-banner-text strong { font-size:calc(17px * var(--fs, 1)); text-transform: lowercase; }
@media (max-width: 359px) { :is(#screen-home, #screen-oge-chem) .home-banner-row .home-banner-text strong { font-size:calc(15px * var(--fs, 1)); } }
:is(#screen-home, #screen-oge-chem) .home-banner-row .home-banner-text small { font-size:calc(13px * var(--fs, 1)); font-weight: 700; color: #5b3f8f; }
:root:not(.theme-light) :is(#screen-home, #screen-oge-chem) .home-banner-row .home-banner-text small { color: #d9c6ff; }
:is(#home-group-view, #oge-group-view) .home-group { background: var(--surface); border-radius: 24px; overflow: hidden; }
:is(#home-group-view, #oge-group-view) .module-card { margin: 0; padding: 14px 14px 14px 16px; gap: 12px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
:is(#home-group-view, #oge-group-view) .module-card:first-child { border-top: 0; }
:is(#home-group-view, #oge-group-view) .module-card:active { transform: none; background: var(--surface-2); }
:is(#home-group-view, #oge-group-view) .module-icon { width: 40px; height: 40px; border-radius: 50%; font-size:calc(22px * var(--fs, 1)); color: #fff; background: var(--bio-g-dark); }
:is(#home-group-view, #oge-group-view) .module-title { font-weight: 700; }
:is(#home-group-view, #oge-group-view) .module-progress-fill { background: var(--bio-g-dark); }
:is(#home-group-view, #oge-group-view) .module-card:not(.disabled)::after { content: '→'; flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif; font-size:calc(17px * var(--fs, 1)); line-height: 1; background: var(--surface-2); color: var(--text); }
:is(#home-group-view, #oge-group-view) .module-card.soon-card .module-icon { background: var(--surface-2); color: var(--text-muted); }
.back-btn .arrow-roboto, .ru-back .arrow-roboto { font-family: -apple-system, 'Helvetica Neue', Roboto, Arial, sans-serif; font-weight: 400; }
#screen-home .back-btn, #screen-oge-chem .back-btn, #screen-chem-anim .back-btn, #screen-biology .back-btn, #screen-bio-anim .back-btn, #screen-anatomy .back-btn,
#screen-russian .ru-back { text-transform: lowercase; }
#screen-chem-anim h1 { text-transform: lowercase; }
.progress-bar[hidden] { display: none; }
.tab-bar-btn[hidden] { display: none; }
.element-symbol.rxn-equation {
  font-size:calc(22px * var(--fs, 1));
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.rxn-attr { margin-top: 16px; }
.rxn-attr-title {
  font-size:calc(13px * var(--fs, 1));
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.rxn-attr-sub {
  font-size:calc(12px * var(--fs, 1));
  color: var(--text-muted);
  margin: -4px 0 8px;
}
.rxn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rxn-chip {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-bottom-width: 4px;
  border-radius: 14px;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size:calc(14px * var(--fs, 1));
  line-height: 1.25;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}
.rxn-chip:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.rxn-chip:disabled { cursor: default; }
.rxn-chip.selected { border-color: var(--violet); background: rgba(140,111,255,0.18); }
.rxn-chip.correct { border-color: var(--primary-dark); background: rgba(61,220,151,0.2); }
.rxn-chip.wrong { border-color: var(--coral); background: rgba(255,92,92,0.16); }
.rxn-chip.reveal { outline: 2px dashed var(--primary); outline-offset: 2px; }
.rxn-reveal-line { margin: 0 0 8px; font-size:calc(14px * var(--fs, 1)); line-height: 1.5; }
.rxn-reveal-line:last-child { margin-bottom: 0; }
.oxide-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.oxide-chip {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-bottom-width: 4px;
  border-radius: 14px;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size:calc(14px * var(--fs, 1));
  line-height: 1.25;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}
.oxide-chip:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.oxide-chip:disabled { cursor: default; }
.oxide-chip.selected { border-color: var(--violet); background: rgba(140,111,255,0.18); }
.oxide-chip.correct { border-color: var(--primary-dark); background: rgba(61,220,151,0.2); }
.oxide-chip.wrong { border-color: var(--coral); background: rgba(255,92,92,0.16); }
.ionic-label { display: block; margin: 14px 0 0; font-size:calc(14px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); }
.answer-input.field-wrong { border-color: var(--coral); }
.ionic-charges .sign-btn { font-size:calc(15px * var(--fs, 1)); }
.strength-options { margin: 14px 0 0; flex-wrap: nowrap; }
.strength-options .oxide-chip { flex: 1 1 0; min-width: 0; padding: 10px 6px; }
.states-options { margin: 14px 0 0; flex-direction: column; flex-wrap: nowrap; }
.states-options .oxide-chip { flex: none; width: 100%; }
#states-prompt.states-long { font-size:calc(24px * var(--fs, 1)); }
#states-prompt.states-text { font-size:calc(22px * var(--fs, 1)); line-height: 1.25; }
#states-prompt.states-struct { display: flex; justify-content: center; font-size:calc(16px * var(--fs, 1)); font-weight: 400; color: var(--text); line-height: 1; overflow: hidden; }
.states-explain { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius, 12px); background: var(--surface-2); border: 1px solid var(--border); }
.states-explain-title { margin: 0 0 6px; font-size:calc(13px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); }
.states-explain-p { margin: 6px 0 0; font-size:calc(14px * var(--fs, 1)); line-height: 1.45; color: var(--text); overflow-wrap: break-word; }
.states-explain-p:first-of-type { margin-top: 0; }
.states-name { margin: 4px 0 0; font-size:calc(16px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); overflow-wrap: break-word; }
.cb-mode { margin: 2px 0 12px; flex-wrap: nowrap; }
.cb-mode .oxide-chip { flex: 1 1 0; min-width: 0; padding: 10px 6px; }
#cb-prompt { font-size:calc(26px * var(--fs, 1)); line-height: 1.3; }
.cb-note { font-size:calc(14px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.cb-hint-btn { margin-top: 12px; min-height: 44px; padding: 8px 16px; font-size:calc(14px * var(--fs, 1)); }
.cb-hint, .cb-explain { background: var(--surface); border-radius: 18px; padding: 14px 16px; margin: 0 0 14px; }
.cb-hint[hidden], .cb-explain[hidden], .cb-step-body[hidden] { display: none; }
.cb-block-title { margin: 0 0 8px; font-size:calc(13px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); }
.cb-struct { display: flex; justify-content: center; padding: 6px 0 4px; color: var(--text); overflow: hidden; }
.cb-svg { display: block; max-width: 100%; height: auto; }
.cb-rule { margin: 8px 0 0; font-size:calc(13px * var(--fs, 1)); line-height: 1.45; color: var(--text-muted); }
.cb-steps { display: flex; flex-direction: column; gap: 8px; }
.cb-step { background: var(--surface); border: 2px solid var(--border); border-radius: 16px; overflow: hidden; }
.cb-step.ok { border-color: var(--primary-dark); background: rgba(61,220,151,0.10); }
.cb-step.bad { border-color: var(--coral); background: rgba(255,92,92,0.08); }
.cb-step-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; background: none; border: 0; color: var(--text); font-family: 'Montserrat', sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cb-step-head:disabled { cursor: default; opacity: 1; }
.cb-step-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size:calc(14px * var(--fs, 1)); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cb-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cb-step-title { font-size:calc(14px * var(--fs, 1)); font-weight: 700; line-height: 1.3; }
.cb-step-val { font-size:calc(14px * var(--fs, 1)); font-weight: 600; color: var(--violet-ink); line-height: 1.3; overflow-wrap: anywhere; }
.cb-step.empty .cb-step-val { color: var(--text-muted); font-weight: 500; }
.cb-step.ok .cb-step-val { color: var(--primary-ink); }
.cb-step.bad .cb-step-val { color: var(--coral-ink); }
.cb-step-fix { font-size:calc(14px * var(--fs, 1)); font-weight: 700; color: var(--primary-ink); line-height: 1.3; }
.cb-step-fix:empty { display: none; }
.cb-step-mark { flex: none; font-size:calc(18px * var(--fs, 1)); line-height: 1; }
.cb-step-mark:empty { display: none; }
.cb-step-body { padding: 0 12px 12px; }
.cb-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb-opts .oxide-chip { min-width: 0; }
.cb-done { width: 100%; margin-top: 10px; min-height: 44px; padding: 8px; }
.cb-done:disabled { opacity: 0.5; cursor: default; }
.cb-why { padding: 10px 0 2px; border-top: 1px solid var(--border); margin-top: 10px; }
.cb-why-head { margin: 0 0 4px; font-size:calc(14px * var(--fs, 1)); line-height: 1.4; }
.cb-why-head b { color: var(--violet-ink); }
.cb-why.ok .cb-why-head b { color: var(--primary-ink); }
.cb-why.bad .cb-why-head b { color: var(--coral-ink); }
.cb-why-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--surface-2); font-size:calc(13px * var(--fs, 1)); font-weight: 700; }
.cb-why-text { margin: 0; font-size:calc(14px * var(--fs, 1)); line-height: 1.5; color: var(--text); }
.oxs-formula { text-align: center; margin: 14px 0 4px; padding: 0 6px; overflow-x: auto; overflow-y: hidden; line-height: 1.1; }
.oxs-word { white-space: nowrap; }
.oxs-el { display: inline-block; position: relative; min-width: 28px; padding-top: 38px; text-align: center; font-size:calc(26px * var(--fs, 1)); font-weight: 700; color: var(--text); }
.oxs-el--tx { min-width: 0; color: var(--text-muted); }
.oxs-sym sub { font-size: 0.6em; }
.oxs-chg { font-size: 0.6em; font-weight: 700; vertical-align: top; position: relative; top: 0.1em; margin-left: 1px; }
.oxs-cell { position: absolute; top: 0; left: 50%; width: 36px; height: 40px; margin-left: -18px; display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; box-sizing: border-box; cursor: pointer; z-index: 1; }
.oxs-cell::after { content: ''; position: absolute; left: 50%; top: 32px; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: var(--border); }
.oxs-cell.active::after { background: var(--blue); }
.oxs-in { box-sizing: border-box; width: 28px; height: 30px; padding: 0; text-align: center; font-family: 'JetBrains Mono', 'Montserrat', sans-serif; font-weight: 700; font-size:calc(14px * var(--fs, 1));
  background: var(--surface-2); border: 2px solid var(--border); border-radius: 8px; color: var(--text); caret-color: var(--blue); }
.oxs-in:focus { outline: none; }
.oxs-in.active { border-color: var(--blue); }
.oxs-in.ok { border-color: var(--primary-dark); color: var(--primary-ink); }
.oxs-in.bad { border-color: var(--coral); background: rgba(255,92,92,0.10); }
.oxs-in.rev { border-color: var(--primary-dark); border-style: dashed; color: var(--primary-ink); }
.oxs-in:disabled { opacity: 1; -webkit-text-fill-color: currentColor; }
.oxs-explain .oxs-block-title, .cb-hint .oxs-block-title { margin: 0 0 8px; font-size:calc(13px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); }
.oxs-formula-line { margin: 0 0 4px; font-size:calc(22px * var(--fs, 1)); font-weight: 700; }
.oxs-formula-line sub, .oxs-formula-line sup { font-size: 0.6em; }
.oxs-why { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0 2px; margin-top: 10px; border-top: 1px solid var(--border); }
.oxs-why-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); font-size:calc(13px * var(--fs, 1)); font-weight: 700; }
.oxs-why.ok .oxs-why-n { background: rgba(61,220,151,0.28); }
.oxs-why.bad { border-top-color: var(--coral); }
.oxs-why.bad .oxs-why-n { background: rgba(255,92,92,0.28); }
.oxs-why-text { flex: 1; min-width: 0; margin: 0; font-size:calc(14px * var(--fs, 1)); line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.oxs-why-text sub { font-size: 0.75em; }
.oxs-you { color: var(--coral-ink); font-weight: 700; white-space: nowrap; }
.oxs-answer { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size:calc(15px * var(--fs, 1)); font-weight: 700; color: var(--primary-ink); overflow-wrap: anywhere; }
.oxs-rules { margin: 0; padding-left: 18px; font-size:calc(13px * var(--fs, 1)); line-height: 1.5; color: var(--text); }
.oxs-rules li { margin: 0 0 4px; }
.oxs-en-line { margin: 0 0 4px; font-size:calc(15px * var(--fs, 1)); font-weight: 700; letter-spacing: 0.04em; color: var(--text); overflow-wrap: anywhere; }
.oxs-anim { padding: 2px 0 0; }
.oxs-formula--stage { margin: 8px 0 0; }
.oxs-slot { position: absolute; top: 4px; left: 50%; width: 30px; height: 30px; margin-left: -15px; box-sizing: border-box; border: 2px dashed var(--border); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', 'Montserrat', sans-serif; font-weight: 700; font-size:calc(14px * var(--fs, 1)); color: var(--text-muted); transition: border-color .25s, background-color .25s, color .25s; }
.oxs-slot::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 4px; margin-left: -1px; background: var(--border); }
.oxs-slot.q { border-style: solid; border-color: var(--blue); color: var(--blue-ink); }
.oxs-slot.val { border-style: solid; border-color: var(--violet); background: var(--surface-2); color: var(--violet-ink); }
.oxs-slot.pop { animation: oxs-pop .55s cubic-bezier(.2,.9,.3,1.2); }
@keyframes oxs-pop { 0% { transform: translateY(12px) scale(.4); opacity: 0; } 60% { transform: translateY(-5px) scale(1.15); opacity: 1; } 100% { transform: none; opacity: 1; } }
.oxs-el.hl > .oxs-sym { color: var(--violet-ink); text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.oxs-stage--ok .oxs-slot.val { border-color: var(--primary-dark); color: var(--primary-ink); }
.oxs-stage--ok .oxs-slot.val::after { background: var(--primary-dark); }
.oxs-eq { margin: 10px 0 0; min-height: 22px; text-align: center; font-size:calc(16px * var(--fs, 1)); font-weight: 700; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.oxs-eq[hidden], .oxs-row[hidden] { display: none; }
.oxs-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin: 12px 0 0; }
.oxs-row-lab { flex: 1 0 100%; text-align: center; font-size:calc(12px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); }
.oxs-chip { min-width: 26px; padding: 4px 4px; box-sizing: border-box; text-align: center; font-size:calc(15px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); border: 2px solid transparent; border-radius: 8px; transition: background-color .25s, color .25s, border-color .25s; }
.oxs-chip.hi { color: var(--violet-ink); border-color: var(--violet); background: var(--surface-2); }
.oxs-chip--m { font-size:calc(13px * var(--fs, 1)); }
.oxs-cap { margin: 8px 0 0; min-height: 24px; text-align: center; font-size:calc(17px * var(--fs, 1)); font-weight: 700; line-height: 1.35; color: var(--text); }
.oxs-pult { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 0; }
.oxs-pbtn { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; background: var(--surface-2); border: 2px solid var(--border); color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.oxs-pbtn svg { width: 20px; height: 20px; }
.oxs-pbtn:disabled { opacity: .4; cursor: default; }
.oxs-pbtn.oxs-pplay { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--primary); color: #0d2b1e; }
.oxs-pbtn.oxs-pplay svg { width: 24px; height: 24px; }
.oxs-count { min-width: 40px; text-align: center; font-size:calc(13px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); }
.oxs-bar { display: flex; gap: 3px; margin: 4px 0 2px; }
.oxs-seg { flex: 1 1 0; min-width: 0; height: 36px; padding: 0; border: 0; background: none; position: relative; cursor: pointer; }
.oxs-seg::before { content: ''; position: absolute; left: 0; right: 0; top: 15px; height: 6px; border-radius: 3px; background: var(--border); transition: background-color .25s; }
.oxs-seg.done::before { background: var(--violet); opacity: .55; }
.oxs-seg.cur::before { background: var(--violet); }
.oxs-static .oxs-pplay { display: none; }
.oxs-text { margin: 12px 0 0; border-top: 1px solid var(--border); padding-top: 8px; }
.oxs-text > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size:calc(14px * var(--fs, 1)); font-weight: 700; color: var(--blue-ink); }
@media (prefers-reduced-motion: reduce) { .oxs-slot.pop { animation: none; } .oxs-slot, .oxs-chip, .oxs-seg::before { transition: none; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  .oxs-slot { width: calc(30px * var(--fs)); height: calc(30px * var(--fs)); margin-left: calc(-15px * var(--fs)); top: calc(4px * var(--fs)); border-radius: calc(8px * var(--fs)); }
  .oxs-pbtn { width: calc(44px * var(--fs)); height: calc(44px * var(--fs)); border-radius: calc(12px * var(--fs)); }
  .oxs-pbtn.oxs-pplay { width: calc(56px * var(--fs)); height: calc(56px * var(--fs)); }
  .oxs-pbtn svg { width: calc(20px * var(--fs)); height: calc(20px * var(--fs)); }
  .oxs-pbtn.oxs-pplay svg { width: calc(24px * var(--fs)); height: calc(24px * var(--fs)); }
  .oxs-seg { height: calc(36px * var(--fs)); } .oxs-seg::before { top: calc(15px * var(--fs)); height: calc(6px * var(--fs)); }
  .oxs-chip { min-width: calc(30px * var(--fs)); }
  .oxs-anim { max-width: calc(560px * var(--fs)); margin-left: auto; margin-right: auto; }
}
@media (max-width: 340px) { .oxs-el { font-size:calc(24px * var(--fs, 1)); } }
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  .oxs-in { width: calc(28px * var(--fs)); height: calc(30px * var(--fs)); border-radius: calc(8px * var(--fs)); }
  .oxs-cell { width: calc(36px * var(--fs)); height: calc(40px * var(--fs)); margin-left: calc(-18px * var(--fs)); }
  .oxs-cell::after { top: calc(32px * var(--fs)); }
  .oxs-el { padding-top: calc(38px * var(--fs)); min-width: calc(28px * var(--fs)); }
  .oxs-why-n { width: calc(22px * var(--fs)); height: calc(22px * var(--fs)); }
}
.home-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}
.home-banner:active { transform: scale(0.99); }
.home-banner-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.home-banner-row .home-banner { margin: 0; padding: 10px 12px; gap: 8px; min-width: 0; }
.home-banner-row .home-banner-text strong,
.home-banner-row .home-banner-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-banner-row .home-banner-recent,
.home-banner-row .home-banner-arrow { display: none; }
@media (max-width: 360px) {
  .home-banner-row .home-banner-icon { display: none; }
}
.module-card.soon-card { padding-top: 12px; padding-bottom: 12px; opacity: 0.75; }
.module-card.soon-card .module-icon { width: 40px; height: 40px; font-size:calc(20px * var(--fs, 1)); }
.home-banner-icon { font-size:calc(22px * var(--fs, 1)); line-height: 1; flex: none; }
.home-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.home-banner-text strong { font-size:calc(15px * var(--fs, 1)); font-weight: 700; }
.home-banner-text small { font-size:calc(12px * var(--fs, 1)); color: var(--text-muted); font-weight: 600; }
.home-banner-recent { display: flex; gap: 2px; font-size:calc(16px * var(--fs, 1)); flex: none; }
.home-banner-arrow { color: var(--text-muted); font-size:calc(20px * var(--fs, 1)); flex: none; }
.achievement-summary { margin-bottom: 18px; }
.achievement-summary-track {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.achievement-summary-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--primary));
  border-radius: 999px;
}
.achievement-group { margin-bottom: 22px; }
.achievement-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.achievement-group-head { cursor: pointer; list-style: none; padding: 4px 0; }
.achievement-group-head::-webkit-details-marker { display: none; }
.achievement-group-head h2 { margin: 0; font-size:calc(15px * var(--fs, 1)); font-weight: 700; flex: 1; }
.achievement-group-head::after { content: '›'; color: var(--text-muted); font-size:calc(18px * var(--fs, 1)); transition: transform 0.15s ease; }
.achievement-group[open] > .achievement-group-head::after { transform: rotate(90deg); }
.achievement-group-head span { font-size:calc(12px * var(--fs, 1)); color: var(--text-muted); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.achievement-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.achievement-row.locked { opacity: 0.68; }
.achievement-row.unlocked { border-color: rgba(255,201,60,0.35); }
.achievement-icon { font-size:calc(20px * var(--fs, 1)); line-height: 1.2; flex: none; }
.achievement-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.achievement-title-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.achievement-title-row strong { font-size:calc(14px * var(--fs, 1)); font-weight: 700; }
.achievement-xp {
  font-size:calc(12px * var(--fs, 1));
  font-weight: 700;
  color: var(--gold-ink);
  font-family: 'JetBrains Mono', monospace;
  flex: none;
}
.achievement-desc { font-size:calc(12px * var(--fs, 1)); color: var(--text-muted); font-weight: 600; line-height: 1.35; }
.achievement-track {
  display: block;
  height: 5px;
  margin-top: 4px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.achievement-track i { display: block; height: 100%; background: var(--violet); border-radius: 999px; }
.achievement-date, .achievement-progress-text {
  flex: none;
  font-size:calc(12px * var(--fs, 1));
  font-weight: 600;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  padding-top: 2px;
}
.achievement-toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)) 14px calc(12px + env(safe-area-inset-top, 0px));
  background: var(--surface);
  border: 1px solid rgba(255,201,60,0.45);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transform: translateY(-130%);
  transition: transform 0.28s ease;
  z-index: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.achievement-toast.visible { transform: translateY(0); }
.achievement-toast-icon { font-size:calc(24px * var(--fs, 1)); line-height: 1; flex: none; }
.achievement-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.achievement-toast-body strong { font-size:calc(14px * var(--fs, 1)); font-weight: 700; color: var(--text); }
.achievement-toast-body small { font-size:calc(12px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.progress-info-extra { margin: -6px 0 18px; text-align: left; }
.skin-rank { margin: 0 0 4px; font-size:calc(15px * var(--fs, 1)); font-weight: 600; color: var(--text); }
.skin-note { margin: 0 0 14px; font-size:calc(12px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); line-height: 1.35; }
.skin-heading { margin: 0 0 8px; font-size:calc(12px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.skin-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.skin-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 52px;
  padding: 7px 6px;
  background: var(--surface-2);
  border: 2px solid transparent;
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.skin-cell:active { transform: scale(0.94); }
.skin-cell.active { border-color: var(--violet); }
.skin-cell.locked { opacity: 0.5; cursor: default; }
.skin-cell-face { font-size:calc(20px * var(--fs, 1)); line-height: 1; }
.skin-cell-swatch { width: 26px; height: 12px; border-radius: 999px; }
.skin-cell small { font-size:calc(12px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.lb-list { margin: 12px 0 16px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.lb-row.me { border-color: var(--violet); background: rgba(140,111,255,0.12); }
.lb-rank {
  flex: none;
  min-width: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size:calc(13px * var(--fs, 1));
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
}
.lb-row.me .lb-rank { color: var(--violet-ink); }
.lb-name {
  flex: 1;
  min-width: 0;
  font-size:calc(14px * var(--fs, 1));
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-score {
  flex: none;
  font-family: 'JetBrains Mono', monospace;
  font-size:calc(13px * var(--fs, 1));
  font-weight: 700;
  color: var(--text-muted);
}
.lb-gap { text-align: center; color: var(--text-muted); letter-spacing: 3px; padding: 2px 0 6px; }
.lb-privacy {
  margin-top: 18px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.lb-privacy-row { display: flex; align-items: center; gap: 10px; font-size:calc(14px * var(--fs, 1)); font-weight: 600; cursor: pointer; }
.lb-privacy-row input { width: 18px; height: 18px; accent-color: var(--violet); flex: none; }
.lb-privacy .hint { margin: 8px 0 0; }
.lb-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 12px;
}
.lb-tab {
  flex: 1;
  padding: 8px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size:calc(13px * var(--fs, 1));
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lb-tab { position: relative; }
.lb-tab::after { content: ''; position: absolute; inset: -6px 0; }
.lb-tab.active { background: var(--nav-sel-bg); color: var(--primary-ink); box-shadow: inset 0 0 0 1px var(--primary); }
.lb-fresh { font-size:calc(12px * var(--fs, 1)); color: var(--text-muted); }
.error-work-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,92,92,0.12);
  color: var(--coral-ink);
  font-size:calc(13px * var(--fs, 1));
  font-weight: 700;
}
.error-work-banner.done { background: rgba(61,220,151,0.14); color: var(--primary-ink); }
.error-work-banner.stale { background: rgba(140,111,255,0.14); color: var(--violet-ink); }
.error-work-banner.stale.done { background: rgba(61,220,151,0.14); color: var(--primary-ink); }
.lb-retry { width: 100%; margin: 4px 0 14px; }
:root { --fav-fill: var(--text); --fav-stroke: var(--text); }
.fav-star { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--text-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease, color .15s ease; }
.fav-star svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: fill .15s ease, stroke .15s ease; }
.fav-star:active { background: var(--surface-2); }
.fav-star.on svg { fill: var(--fav-fill); stroke: var(--fav-stroke); }
.fav-star:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.fav-star--corner { position: absolute; top: 6px; right: 6px; }
.task-card.has-fav { position: relative; }
.task-card.has-fav > :first-child { padding-right: 34px; }
.fav-star--inline { margin-left: auto; align-self: center; }
@keyframes fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.fav-star.pop svg { animation: fav-pop .28s ease; }
@media (prefers-reduced-motion: reduce) { .fav-star.pop svg { animation: none; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.error-work-banner.fav { background: rgba(255,201,60,0.16); color: var(--gold-ink); }
.error-work-banner.fav.done { background: rgba(61,220,151,0.14); color: var(--primary-ink); }
.review-home { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.review-home[hidden] { display: none; }
.review-home-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.review-home-text strong { font-size:calc(15px * var(--fs, 1)); font-weight: 700; }
.review-home-text small { font-size:calc(12px * var(--fs, 1)); color: var(--text-muted); font-weight: 600; }
.review-home .review-home-btn { width: auto; flex: none; margin: 0; padding: 10px 18px; min-height: 44px; font-size:calc(15px * var(--fs, 1)); }
.review-home.done { padding-top: 10px; padding-bottom: 10px; }
.error-work-banner.review { background: rgba(62,157,255,0.14); color: var(--blue-ink); }
.feedback .review-note { display: block; margin-top: 4px; font-size:calc(13px * var(--fs, 1)); font-weight: 600; }
#screen-subjects .subtitle { font-size:calc(15px * var(--fs, 1)); line-height: normal; margin: 2px 0 18px; }
.subject-grid { display: flex; flex-direction: column; gap: 12px; min-height: calc(100dvh - 350px); }
.app-credit a { display: inline-block; padding: 10px 2px; margin: -10px 0; color: var(--blue-ink); font-weight: 700; text-decoration: none; }
.app-credit { margin: 16px 0 4px; text-align: center; font-size:calc(11px * var(--fs, 1)); font-weight: 600; line-height: 1.4; white-space: nowrap; color: var(--text-muted); }
@media (max-width: 359px) { .app-credit { font-size:calc(10px * var(--fs, 1)); letter-spacing: -0.2px; } }
#screen-subjects .subject-card {
  position: relative; overflow: hidden; flex-direction: column; align-items: stretch; justify-content: space-between;
  gap: 16px; margin: 0; padding: 22px; border: none; border-radius: 28px;
  flex: 1 1 0; min-height: 160px;
  background: var(--subject-dark); color: #fff;
  transition: transform 0.12s ease, filter 0.2s ease;
}
:root.theme-light #screen-subjects .subject-card { background: var(--subject-bg); color: #181818; }
#screen-subjects .subject-card:active { transform: scale(0.98); border-bottom-width: 0; }
.subject-card-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
#screen-subjects .subject-card .module-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; }
:root.theme-light #screen-subjects .subject-card .module-icon { background: var(--subject-dark); }
#screen-subjects .subject-card .module-icon .ic { width: 28px; height: 28px; }
.subject-arrow {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.18); font-size:calc(20px * var(--fs, 1)); line-height: 1;
}
:root.theme-light .subject-arrow { background: #fff; color: #181818; }
.subject-watermark { position: absolute; right: -18px; bottom: -28px; width: 150px; height: 150px; color: var(--subject-main); opacity: 0.3; pointer-events: none; }
:root.theme-light .subject-watermark { opacity: 0.55; }
.subject-watermark .ic { width: 100%; height: 100%; }
#screen-subjects .subject-card .module-card-content { position: relative; z-index: 1; flex: none; max-width: 74%; }
#screen-subjects .subject-card .module-title { margin: 0; font-size:calc(30px * var(--fs, 1)); font-weight: 700; letter-spacing: -0.6px; line-height: 1.05; text-transform: lowercase; }
#screen-subjects .subject-card .module-desc { margin: 6px 0 0; font-size:calc(14px * var(--fs, 1)); line-height: 1.35; color: inherit; }
:root.theme-light #screen-subjects .subject-card .module-desc { color: #434343; opacity: 1; }
#screen-subjects .subject-card.subject-locked { filter: brightness(0.9) saturate(0.55); cursor: default; }
#screen-subjects .subject-card.subject-locked .subject-arrow { visibility: hidden; }
#screen-subjects .subject-card.subject-locked:active { transform: none; }
#screen-subjects .subject-card.subject-students-only { filter: saturate(0.6); opacity: 0.85; }
.subjects-status { flex: none; text-align: center; }
.subjects-status .hint { margin: 0 0 8px; }
.subjects-status .secondary-btn { width: 100%; }
@media (max-width: 374px) {
  #screen-subjects .subject-card { padding: 20px; min-height: 160px; }
  #screen-subjects .subject-card .module-title { font-size:calc(26px * var(--fs, 1)); }
  #screen-subjects .subject-card .module-card-content { max-width: 86%; }
}
#screen-subjects { --sdv: 0.85dvh; }
#screen-subjects .subject-card { padding: clamp(12px, calc(4 * var(--sdv) - 12px), 22px); gap: clamp(6px, calc(4.6 * var(--sdv) - 23px), 16px); min-height: clamp(122px, calc((100dvh - 330px) / 4), 160px); }
#screen-subjects .subject-card .module-icon { width: clamp(36px, calc(8 * var(--sdv) - 16px), 52px); height: clamp(36px, calc(8 * var(--sdv) - 16px), 52px); }
#screen-subjects .subject-card .module-icon .ic { width: clamp(20px, calc(4.3 * var(--sdv) - 8px), 28px); height: clamp(20px, calc(4.3 * var(--sdv) - 8px), 28px); }
#screen-subjects .subject-arrow { width: clamp(30px, calc(5 * var(--sdv) - 2px), 40px); height: clamp(30px, calc(5 * var(--sdv) - 2px), 40px); font-size: clamp(15px, calc(2.5 * var(--sdv) - 1px), 20px); }
#screen-subjects .subject-card .module-title { font-size: clamp(22px, calc(4 * var(--sdv) - 4px), 30px); }
#screen-subjects .subject-watermark { width: clamp(104px, calc(23 * var(--sdv) - 44px), 150px); height: clamp(104px, calc(23 * var(--sdv) - 44px), 150px); right: clamp(-18px, calc(-2.1 * var(--sdv)), -13px); bottom: clamp(-28px, calc(-3.3 * var(--sdv)), -20px); }
@media (max-width: 374px) {
  #screen-subjects .subject-card { padding: clamp(12px, calc(4 * var(--sdv) - 14px), 20px); }
  #screen-subjects .subject-card .module-title { font-size: clamp(21px, calc(3.4 * var(--sdv) - 3px), 26px); }
}
.flames-title-ic, .flame-title-ic { display: inline-flex; vertical-align: -0.14em; color: var(--coral-ink); }
.flames-title-ic .ic, .flame-title-ic .ic { width: 1em; height: 1em; }
.flame-title-ic.off { color: var(--text-muted); }
.inline-ic { display: inline-flex; vertical-align: -0.2em; }
.inline-ic .ic { width: 1.15em; height: 1.15em; }
.round-complete-emoji { display: flex; justify-content: center; }
.inline-ic.gap { margin-right: 0.35em; }
.achievement-next { margin: 4px 0 18px; padding: 14px 14px 6px; border-radius: 18px; background: var(--surface); border: 1.5px solid rgba(255,201,60,0.35); }
.achievement-next h2, .achievement-all-title { margin: 0 0 10px; font-size:calc(15px * var(--fs, 1)); font-weight: 800; }
.achievement-next .achievement-row { background: var(--surface-2); }
.achievement-next .achievement-row.locked { opacity: 1; }
.achievement-all-title { margin-top: 6px; color: var(--text-muted); }
#screen-home > h1 { margin-bottom: 16px; }
@keyframes mo-flash { 0% { box-shadow: 0 0 0 0 rgba(61,220,151,0); } 25% { box-shadow: 0 0 0 3px var(--primary), 0 0 22px 2px rgba(61,220,151,0.35); } 100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); } }
.mo-flash { animation: mo-flash 0.6s ease-out; }
.mo-xp {
  position: fixed; z-index: 960; pointer-events: none;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size:calc(15px * var(--fs, 1));
  color: var(--gold-ink); background: var(--surface); border: 1px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
@keyframes mo-glow { 0% { box-shadow: 0 0 0 0 rgba(255,201,60,0); } 40% { box-shadow: 0 0 0 3px rgba(255,201,60,0.55); } 100% { box-shadow: 0 0 0 0 rgba(255,201,60,0); } }
.xp-track.mo-glow { animation: mo-glow 0.5s ease-out; }
@keyframes mo-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.mo-shake { animation: mo-shake 0.32s ease-in-out; }
.mo-toast {
  position: fixed; inset: 0; z-index: 970; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s;
}
.mo-toast.visible { opacity: 1; visibility: visible; transition: opacity 0.2s; }
.mo-toast-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 18px 26px; border-radius: 20px; background: var(--surface);
  border: 1px solid rgba(255,201,60,0.5); box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  transform: scale(0.85); transition: transform 0.3s cubic-bezier(.2,1.4,.4,1);
}
.mo-toast.visible .mo-toast-card { transform: scale(1); }
.mo-toast[data-kind="flame"] .mo-toast-card { border-color: rgba(255,92,92,0.5); }
.mo-toast-ic { display: flex; width: 44px; height: 44px; margin-bottom: 4px; color: var(--gold-ink); }
.mo-toast[data-kind="flame"] .mo-toast-ic { color: var(--coral-ink); }
.mo-toast-ic .ic { width: 100%; height: 100%; }
.mo-toast strong { font-size:calc(20px * var(--fs, 1)); font-weight: 700; color: var(--text); }
.mo-toast small { font-size:calc(13px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); }
@keyframes mo-flare { 0% { transform: scale(0.4); } 50% { transform: scale(1.25); filter: drop-shadow(0 0 10px currentColor); } 100% { transform: scale(1); } }
.mo-toast.visible .mo-toast-ic { animation: mo-flare 0.6s ease-out; }
.mo-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 965; pointer-events: none; }
.round-complete-count { margin: -8px 0 18px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size:calc(28px * var(--fs, 1)); color: var(--primary-ink); }
@keyframes mo-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.mo-pop { animation: mo-pop 0.5s cubic-bezier(.2,1.4,.4,1); }
@keyframes mo-bump { 0%, 100% { transform: rotate(-90deg) scale(1); } 40% { transform: rotate(-90deg) scale(1.22); } }
.progress-ring.mo-bump { animation: mo-bump 0.45s ease-out; }
@keyframes mo-enter { from { opacity: 0; } to { opacity: 1; } }
.screen.mo-enter { animation: mo-enter 0.2s ease-out; }
.mo-view-in { animation: mo-enter 0.2s ease-out; }
.modal-overlay, .bq-sheet, .bq-zoom { animation: mo-enter 0.18s ease-out; }
.lab-shake, .bq-shake { animation: mo-shake 0.32s ease-in-out; }
:where(.screen, #tab-bar, .modal-overlay, .bq-sheet, .bq-zoom) :where(button:not(:disabled), .bq-rrow):active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .mo-flash, .mo-shake, .mo-pop, .screen.mo-enter, .mo-view-in, .lab-shake, .bq-shake, .xp-track.mo-glow, .progress-ring.mo-bump, .mo-toast.visible .mo-toast-ic { animation: none !important; }
  .modal-overlay, .bq-sheet, .bq-zoom { animation: none !important; }
  .progress-ring-fill, .xp-fill, .mo-toast, .mo-toast-card { transition: none !important; }
}
.lab-headrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 10px; }
.lab-headrow h1 { margin: 0; font-size:calc(22px * var(--fs, 1)); }
.lab-title-wrap { display: flex; align-items: center; gap: 2px; min-width: 0; }
.lab-info-b { flex: none; width: 44px; height: 44px; margin: -10px -8px -10px 0; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.lab-info-b[hidden] { display: none; }
.lab-info-b span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-muted); font: 800 14px 'Montserrat', sans-serif; }
.lab-meta { display: flex; justify-content: space-between; gap: 8px; font-size:calc(12px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.lab-card { background: var(--surface); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
.lab-cond { font-size:calc(14px * var(--fs, 1)); line-height: 1.45; }
.lab-xy { color: var(--violet-ink); }
.lab-rig { display: contents; }
.lab-bench { border-radius: 20px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #2d3443 0%, #181c23 72%); margin-bottom: 4px; }
.lab-bench-svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.lab-bench-svg [data-tube].hover { fill: rgba(61, 220, 151, 0.12); }
.lab-tube-labels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
.lab-tube-labels.four { grid-template-columns: repeat(4, 1fr); }
.lab-tl { display: block; width: 100%; min-height: 44px; padding: 4px 2px; border: 0; border-radius: 10px; background: none; text-align: center; font-family: 'Montserrat', sans-serif; font-size:calc(12px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); line-height: 1.3; cursor: pointer; touch-action: manipulation; }
.lab-tl > b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--surface-2); color: var(--text); font-size:calc(12px * var(--fs, 1)); margin-right: 2px; vertical-align: middle; }
.lab-tl .lab-xy { font-style: normal; font-weight: 800; }
.lab-tl.hover { background: rgba(61, 220, 151, 0.14); }
.lab-tl:disabled { cursor: default; }
.lab-tl.on > b { background: var(--primary); color: #07261a; }
.lab-tl.on { color: var(--text); }
.lab-results { display: grid; gap: 6px; margin-bottom: 6px; }
.lab-res { margin: 0 0 6px; font-size:calc(13px * var(--fs, 1)); line-height: 1.42; background: var(--surface); border-left: 3px solid var(--text-muted); padding: 8px 10px; border-radius: 10px; }
.lab-res.yes { border-left-color: var(--gold); }
.lab-res.no { border-left-color: var(--surface-2); color: var(--text-muted); }
.lab-hint { font-size:calc(13px * var(--fs, 1)); color: var(--text-muted); margin: 4px 0 8px; line-height: 1.4; }
.lab-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.lab-opt { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border: 1.5px solid transparent; border-radius: 12px; background: var(--surface); color: var(--text); font-family: 'Montserrat', sans-serif; font-size:calc(13px * var(--fs, 1)); font-weight: 600; text-align: left; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.lab-opt i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--surface-2); font-style: normal; font-size:calc(12px * var(--fs, 1)); font-weight: 800; color: var(--text-muted); }
.lab-opt.sel { border-color: var(--violet); background: rgba(140, 111, 255, 0.16); }
.lab-opt.sel i { background: var(--violet); color: #fff; }
.lab-opt.as-x, .lab-opt.as-y { position: relative; box-shadow: inset 0 0 0 2px var(--gold-ink); }
.lab-opt[data-role]::after { content: attr(data-role); position: absolute; top: 4px; right: 6px; font-size:calc(12px * var(--fs, 1)); font-weight: 800; color: var(--gold-ink); }
.lab-opt:disabled { opacity: 0.7; cursor: default; }
.lab-ans { display: flex; gap: 8px; margin-bottom: 10px; }
.lab-slot { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 12px; border-radius: 12px; background: var(--surface); font-size:calc(13px * var(--fs, 1)); }
.lab-slot.good { box-shadow: inset 0 0 0 1.5px var(--primary); }
.lab-slot.bad { box-shadow: inset 0 0 0 1.5px var(--coral); }
.lab-slot s { color: var(--coral-ink); }
.lab-slot-right { display: block; color: var(--text); }
.lab-slot b { font-size:calc(16px * var(--fs, 1)); font-weight: 800; color: var(--violet-ink); }
.lab-slot em { font-style: normal; color: var(--text-muted); line-height: 1.3; }
.lab-slot em i { font-style: normal; font-weight: 800; color: var(--text); }
.lab-check { width: 100%; }
.lab-verdict { margin-top: 10px; font-size:calc(13px * var(--fs, 1)); line-height: 1.45; border-left: 3px solid var(--coral); }
.lab-verdict.good { border-left-color: var(--primary); }
.lab-vt { font-weight: 800; font-size:calc(16px * var(--fs, 1)); margin: 0 0 6px; }
.lab-verdict p { margin: 0 0 6px; }
.lab-eq { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.lab-eq b { display: block; font-size:calc(12px * var(--fs, 1)); color: var(--text-muted); margin-bottom: 4px; }
.lab-eq p, .lab-entry p { margin: 0 0 3px; }
.lab-eqs { color: var(--text-muted); }
.lab-ion { font-size:calc(13px * var(--fs, 1)); color: var(--text-muted); }
.lab-note { font-size:calc(13px * var(--fs, 1)); color: var(--text-muted); font-style: italic; }
.lab-sign { color: var(--gold-ink); font-weight: 600; }
.lab-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 6px 0 10px; }
@media (min-width: 600px) { .lab-tools { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 359px) { .lab-tools { gap: 4px; } .lab-tool { padding-left: 0; padding-right: 0; } .lab-tool span { letter-spacing: -0.3px; } }
.lab-tool { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 6px 2px; border: 0; border-radius: 12px; background: var(--surface); color: var(--text-muted); font-family: 'Montserrat', sans-serif; font-size:calc(16px * var(--fs, 1)); cursor: pointer; }
.lab-tool span { font-size:calc(12px * var(--fs, 1)); font-weight: 700; }
.lab-tool.on { color: var(--primary-ink); box-shadow: inset 0 0 0 1.5px var(--primary); background: var(--nav-sel-bg); }
.lab-search { margin: 0 0 8px; }
.lab-shelf { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; scrollbar-width: none; }
.lab-shelf::-webkit-scrollbar { display: none; }
.lab-chip { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface); color: var(--text-muted); font-family: 'Montserrat', sans-serif; font-size:calc(13px * var(--fs, 1)); font-weight: 700; cursor: pointer; }
.lab-chip.on { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--primary); }
.lab-bottles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; align-content: start; }
.lab-bt { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 76px; padding: 6px 3px; border: 1.5px solid transparent; border-radius: 12px; background: var(--surface); color: var(--text); font-family: 'Montserrat', sans-serif; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; overflow: hidden; }
.lab-bt b { font-size:calc(13px * var(--fs, 1)); font-weight: 700; line-height: 1.15; word-break: break-word; }
.lab-bt small { font-size:calc(12px * var(--fs, 1)); color: var(--text-muted); line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.lab-bt.sel { border-color: var(--violet); background: rgba(140, 111, 255, 0.16); }
.lab-log { font-size:calc(13px * var(--fs, 1)); line-height: 1.42; }
.lab-log-title { font-weight: 800; margin: 0 0 6px; }
.lab-entry { padding: 6px 0; border-top: 1px solid var(--border); }
.lab-entry:first-of-type { border-top: 0; }
.lab-eqline { font-weight: 600; }
.lab-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; border-radius: 12px; background: rgba(32, 36, 42, 0.92); color: #f2f4f6; font-size:calc(13px * var(--fs, 1)); font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.lab-tool .ic { width: 20px; height: 20px; }
.lab-bt .lab-glass { fill: var(--surface-2); stroke: var(--text-muted); stroke-width: 1.2; }
.lab-bt .lab-liq { fill: #8fc3ff; opacity: 0.55; }
:root.theme-light .lab-bt .lab-liq { fill: #6aa6e6; opacity: 0.6; }
:root.theme-light .lab-bt .lab-solid { stroke: #9aa3ad; stroke-width: 0.8; }
.lab-bt.lab-bt-wide { grid-column: 1 / -1; }
.lab-bottles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .lab-bottles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .lab-bottles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lab-bt b { white-space: nowrap; word-break: normal; max-width: 100%; min-width: 0; overflow: hidden; }
.lab-bt small { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; max-height: none; max-width: 100%; min-width: 0; overflow: hidden; text-align: center; }
.lab-grp { grid-column: 1 / -1; margin: 6px 4px 0; font-size:calc(13px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); }
.lab-grp-main { margin-top: 10px; font-size:calc(15px * var(--fs, 1)); font-weight: 800; color: var(--text); }
.lab-grp-main:first-child { margin-top: 0; }
.lab-res.wait { border-left-color: var(--surface-2); color: var(--text-muted); }
.lab-wait { font-style: italic; }
.lab-res.unsup, .lab-entry.unsup { border-left-color: var(--blue); }
.lab-res .lab-eqline, .lab-res .lab-ion, .lab-res .lab-sign, .lab-res .lab-note { margin: 4px 0 0; }
.lab-vbanner { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border-left: 3px solid var(--coral); font-size:calc(14px * var(--fs, 1)); line-height: 1.4; }
.lab-vbanner.good { border-left-color: var(--primary); }
.lab-vbanner { flex-wrap: wrap; }
.lab-vbanner p { flex: 1 1 180px; margin: 0; }
.lab-replay { flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font-family: 'Montserrat', sans-serif; font-size:calc(13px * var(--fs, 1)); font-weight: 700; cursor: pointer; }
.lab-replay .ic { width: 18px; height: 18px; }
.lab-shelf-wrap { position: relative; }
.lab-shelf-bar { position: sticky; top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); z-index: 4; background: var(--bg); padding-top: 4px; margin-bottom: 6px; }
.lab-shelf-bar .lab-shelf { margin-bottom: 4px; }
.lab-shelf-bar .lab-sub-wrap { margin-bottom: 0; }
.lab-chip-sub { min-height: 44px; padding: 0 12px; font-size:calc(12px * var(--fs, 1)); }
.lab-chip-sub.on { box-shadow: inset 0 0 0 1.5px var(--violet); }
.lab-shelf-wrap.more > :is(.lab-shelf, .lab-sub, #lab-ovr-cats, #lab-ovr-subs) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
#screen-chem-lab.lab-pouring { padding-bottom: 88px; }
.lab-pour { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 6px; max-width: 480px; margin: 0 auto; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25); border-radius: 18px 18px 0 0; }
.lab-pour[hidden] { display: none; }
.lab-pour-t { flex: 1; min-width: 0; font-size:calc(13px * var(--fs, 1)); font-weight: 700; line-height: 1.3; }
.lab-pour-b, .lab-pour-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; font-family: 'Montserrat', sans-serif; font-size:calc(16px * var(--fs, 1)); font-weight: 800; cursor: pointer; }
.lab-pour-b { background: var(--primary); color: #07261a; }
.lab-pour-x { background: var(--surface-2); color: var(--text-muted); }
@media (max-width: 359px) { .lab-pour { gap: 4px; padding-left: 10px; padding-right: 10px; } .lab-pour-b, .lab-pour-x { width: 40px; } }
.lab-fhint { margin-top: 0; }
.lab-tube-labels.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.lab-tube-labels .lab-tl { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; }
.lab-tube-labels .lab-tl > b { margin-right: 0; }
.lab-tl-cru > b svg { display: block; color: var(--text-muted); }
.lab-tl-cru.on > b svg { color: #07261a; }
.lab-pour { flex-wrap: wrap; row-gap: 8px; }
.lab-pour-t { flex: 1 1 100%; }
.lab-pour-cru { display: grid; place-items: center; }
.lab-pour-cru:disabled { background: var(--surface-2); color: var(--text-muted); opacity: 0.55; cursor: default; }
#screen-chem-lab.lab-pouring { padding-bottom: 128px; }
.lab-fam { display: flex; gap: 3px; justify-content: center; font-size:calc(12px * var(--fs, 1)); line-height: 1.2; color: var(--text-muted); }
.lab-fam i { font-style: normal; padding: 0 3px; border-radius: 4px; }
.lab-fam i.on { color: var(--violet-ink); font-weight: 800; background: rgba(140, 111, 255, 0.16); }
.lab-fam i.no { opacity: 0.4; text-decoration: line-through; }
.lab-fam.many { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 2px 4px; }
.lab-pour-cat { flex: 1 1 100%; display: flex; align-items: center; gap: 5px; font-size:calc(13px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); }
.lab-cat-b { flex: 1 1 0; min-width: 44px; max-width: 64px; height: 40px; padding: 0 4px; border: 1.5px solid var(--border, rgba(255,255,255,.14)); border-radius: 12px; background: var(--surface-2); color: var(--text); font-family: 'Montserrat', sans-serif; font-size:calc(15px * var(--fs, 1)); font-weight: 800; cursor: pointer; }
.lab-cat-b.on { border-color: var(--violet); background: rgba(140, 111, 255, 0.2); color: var(--violet-ink); }
.lab-cat-b:disabled { opacity: 0.4; cursor: default; text-decoration: line-through; }
.lab-cat-b.lab-cat-no { opacity: 0.4; text-decoration: line-through; }
.lab-pour-cat.many { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.lab-pour-cat.many > span { grid-column: 1 / -1; }
.lab-pour-cat.many .lab-cat-b { max-width: none; }
#screen-chem-lab.lab-pouring.lab-pouring-fam { padding-bottom: 180px; }
.lab-headrow { flex-wrap: wrap; row-gap: 6px; }
.lab-seg { display: flex; flex: none; background: var(--surface-2); border-radius: 12px; padding: 3px; }
.lab-seg[hidden] { display: none; }
.lab-seg button { position: relative; min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--text-muted); font: 700 13px 'Montserrat', sans-serif; cursor: pointer; touch-action: manipulation; }
.lab-seg button::after { content: ''; position: absolute; inset: -4px 0; }
.lab-seg button.on { background: var(--nav-sel-bg); color: var(--primary-ink); box-shadow: inset 0 0 0 1px var(--primary); }
.lab-seg button.trainer-soon { opacity: 0.55; cursor: default; }
.lab-ovr-medrow { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.lab-ovr-medrow > span { flex: none; font-size:calc(12px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); }
.lab-ovr-meds { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lab-ovr-med { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 48px; min-width: 0; padding: 4px 2px; border: 0; border-radius: 12px; background: var(--surface); color: var(--text); font-family: 'Montserrat', sans-serif; cursor: pointer; touch-action: manipulation; }
.lab-ovr-med b { display: flex; align-items: center; gap: 5px; font-size:calc(13px * var(--fs, 1)); font-weight: 700; white-space: nowrap; }
.lab-ovr-med small { font-size:calc(12px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); }
.lab-ovr-med.on { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--primary); }
.lab-ovr-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.lab-ovr-tl { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lab-ovr-tl > b { margin-right: 0; }
.lab-ovr-medtag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size:calc(12px * var(--fs, 1)); font-weight: 700; }
.lab-ovr-medtag[hidden] { display: none; }
.lab-ovr-cap { font-size:calc(12px * var(--fs, 1)); line-height: 1.25; overflow-wrap: anywhere; }
.lab-ovr-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lab-ovr-tag { display: inline-block; margin-top: 2px; padding: 1px 6px; border-radius: 999px; font-size:calc(12px * var(--fs, 1)); font-weight: 700; background: var(--surface-2); color: var(--violet-ink); }
.lab-ovr-why, .lab-ovr-bal { margin: 6px 0 0; }
.lab-ovr-why summary, .lab-ovr-bal summary { cursor: pointer; font-weight: 700; color: var(--violet-ink); min-height: 44px; display: flex; align-items: center; }
.lab-ovr-why p { margin: 2px 0 0; font-style: italic; }
.lab-ovr-baltab { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 10px; row-gap: 4px; margin: 4px 0; font-weight: 600; }
.lab-ovr-baltab .k { border-left: 1.5px solid var(--text-muted); padding-left: 8px; font-weight: 800; align-self: end; }
.lab-ovr-hl { white-space: nowrap; }
.lab-ovr-ox { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; vertical-align: bottom; }
.lab-ovr-ox i { font-style: normal; font-size:calc(12px * var(--fs, 1)); font-weight: 700; color: var(--coral-ink); margin-bottom: 1px; }
.lab-ovr-roles { color: var(--text-muted); }
.lab-ovr-src { font-size:calc(12px * var(--fs, 1)); color: var(--text-muted); margin: 4px 0 0; }
.lab-ovr-cmp { font-size:calc(13px * var(--fs, 1)); line-height: 1.4; }
.lab-ovr-cmp-t { font-weight: 800; margin: 0 0 6px; }
.lab-ovr-cmp-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 8px; align-items: start; padding: 6px 0; border-top: 1px solid var(--border); }
.lab-ovr-cmp-row:first-of-type { border-top: 0; }
.lab-ovr-cmp-m { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size:calc(12px * var(--fs, 1)); }
.lab-ovr-cmp-p { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.lab-ovr-sw { flex: none; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.45); }
.lab-ovr-cmp-s { grid-column: 2; color: var(--gold-ink); font-weight: 600; }
.lab-ovr-cmp-q { margin: 8px 0 0; color: var(--text-muted); }
.lab-res .lab-ovr-why, .lab-res .lab-ovr-bal { margin-top: 4px; }
@media (max-width: 359px) { .lab-ovr-medrow > span { display: none; } .lab-ovr-cmp-row { grid-template-columns: 92px minmax(0, 1fr); } .lab-ovr-med b { gap: 3px; font-size:calc(12px * var(--fs, 1)); } }
:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: 2px; }
.screen.review-on .deck-counter-row, .screen.review-on .mode-switch-wrap { display: none; }
.app-splash { --sp-bg: #181818; --sp-ink: #dffba1; --sp-pat: #dffba1; --sp-pat-o: 0.10; --sp-star: #8278e2; --sp-star-line: #dffba1; --sp-bar-bg: rgba(223,251,161,0.18);
  --sp-star-size: min(95vw, 62vh);
  position: fixed; inset: 0; z-index: 3000; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--sp-bg); color: var(--sp-ink); transition: opacity 0.25s ease; }
:root.theme-light .app-splash { --sp-bg: #f4f1ff; --sp-ink: #6b5bd6; --sp-pat: #8278e2; --sp-pat-o: 0.12; --sp-star: #dffba1; --sp-star-line: #6b5bd6; --sp-bar-bg: rgba(107,91,214,0.15); }
.app-splash.hide { opacity: 0; pointer-events: none; }
.app-splash-pat { position: absolute; inset: 0; background: var(--sp-pat); opacity: var(--sp-pat-o);
  -webkit-mask: url(splash-pattern.svg) center / cover no-repeat; mask: url(splash-pattern.svg) center / cover no-repeat; animation: app-splash-fade 0.6s ease-out both; }
.app-splash-star { position: absolute; width: var(--sp-star-size); height: var(--sp-star-size); overflow: visible; will-change: transform; }
.app-splash-star path { fill: var(--sp-star); stroke: var(--sp-star-line); stroke-width: 8; stroke-linejoin: miter; }
.app-splash-star.s1 { right: calc(var(--sp-star-size) * -0.38); top: calc(var(--sp-star-size) * -0.30); animation: app-splash-pop 0.55s cubic-bezier(.2,1.2,.4,1) both, app-splash-breathe 3.2s ease-in-out 0.55s infinite alternate; }
.app-splash-star.s2 { left: calc(var(--sp-star-size) * -0.38); bottom: calc(var(--sp-star-size) * -0.23); width: calc(var(--sp-star-size) * 0.95); height: calc(var(--sp-star-size) * 0.95);
  animation: app-splash-pop 0.55s cubic-bezier(.2,1.2,.4,1) 0.12s both, app-splash-breathe 3.2s ease-in-out 0.67s infinite alternate-reverse; }
.app-splash-brand { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(86vw, 560px); animation: app-splash-rise 0.5s ease-out 0.1s both; }
.app-splash-mark { width: 100%; height: auto; display: block; }
.app-splash-name { font-family: 'Montserrat', sans-serif; font-size:calc(15px * var(--fs, 1)); font-weight: 600; letter-spacing: 0.14em; text-transform: lowercase; }
.app-splash-bar { position: relative; width: 120px; height: 4px; border-radius: 2px; background: var(--sp-bar-bg); overflow: hidden; margin-top: 6px; }
.app-splash-bar i { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 2px; background: var(--sp-ink); animation: app-splash-run 1.1s ease-in-out infinite; }
@keyframes app-splash-run { to { left: 100%; } }
@keyframes app-splash-fade { from { opacity: 0; } }
@keyframes app-splash-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes app-splash-pop { from { opacity: 0; transform: scale(0.82) rotate(-8deg); } }
@keyframes app-splash-breathe { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.05) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .app-splash-pat, .app-splash-star.s1, .app-splash-star.s2, .app-splash-brand { animation: none; } .app-splash-bar i { animation: none; left: 30%; } }
:root:not(.theme-light) #trivial-organic-canvas-wrap { background: #3A404A; }
:root:not(.theme-light) #trivial-organic-svg [stroke="#15181c"] { stroke: #F2F4F6; }
:root:not(.theme-light) #trivial-organic-svg text[fill="#15181c"] { fill: #F2F4F6; }
:root:not(.theme-light) #trivial-organic-svg [stroke="#8c6fff"] { stroke: #A08CFF; }
#screen-bio-division { --ca-vio: #e7d3ff; --ca-vio-d: #8665c3; --ca-blue: #b2dcf8; --ca-blue-d: #418bc6;
  --ca-red: #ffc5c8; --ca-red-d: #bf303e; --ca-yel: #fff9bc; --ca-yel-d: #8a7d16; --ca-bond-vio: #c9a8f5;
  --ca-on: #1a1d21; --ca-nuc-ink: #7a1c27;
  --ca-vio-ink: #e7d3ff; --ca-blue-ink: #b2dcf8; --ca-red-ink: #ffc5c8; --ca-yel-ink: #fff9bc;
  --ca-shell-out: #b2dcf8; --ca-shell: #7d8592; --ca-line: #12161d;
  --ca-cell: #2c3341; --ca-cell-line: #4a5262; --ca-track: #2c3341; --ca-cloud-op: 0.2; }
:root.theme-light #screen-bio-division { --ca-vio-ink: #6a4ba8; --ca-blue-ink: #2e6da6; --ca-red-ink: #bf303e; --ca-yel-ink: #6e6410;
  --ca-shell-out: #418bc6; --ca-line: #4d5560; --ca-cell: #ffffff; --ca-cell-line: #c5cedd; --ca-track: #e3e8ef; --ca-cloud-op: 0.85; }
#screen-bio-division:is([data-bio-mode^="crad_"], [data-bio-mode^="chac_"], [data-bio-mode="ctab"], [data-bio-mode="rta"], [data-bio-mode^="atm_"]) .bio-scene-card {
  background: var(--emb-bg); --surface: var(--emb-surface); }
#bio-scene .ca-cloud { opacity: var(--ca-cloud-op); }
#chem-anim-list .module-card { --module-shadow: #8665c3; --module-bg: #8665c3; }
#chem-anim-list .module-card .module-icon { color: #fff; }
:root.theme-light #chem-anim-list .module-card { --module-bg: #f7eeff; }
:root.theme-light #chem-anim-list .module-card .module-icon { color: #8665c3; }
#screen-bio-division .emb3d.cm3d { border-radius: 10px; }
#screen-bio-division .emb3d.cm3d:not(.full) .emb3d-exp { width: 22px; height: 22px; right: 3px; top: 3px; }
#screen-bio-division .emb3d.cm3d:not(.full) .emb3d-cap { left: 3px; bottom: 3px; }
#screen-bio-division .cm3d-sym { font-family: 'Montserrat', sans-serif; font-weight: 800; fill: var(--ca-on); text-anchor: middle; }
#screen-bio-division { --atm-gray: #dfe3e8; --atm-gray-d: #6f7886; --atm-shell: #7d8592; --atm-shell-out: #b2dcf8; }
:root.theme-light #screen-bio-division { --atm-shell: #5f6673; --atm-shell-out: #2e6da6; }
#screen-bio-division .atm3d { position: absolute; z-index: 2; pointer-events: none; }
#screen-bio-division .atm3d[hidden] { display: none; }
#screen-bio-division .atm3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; pointer-events: auto; }
#bio-kinds .atm-ebar { position: relative; }
#bio-kinds:has(.atm-ebar) { gap: 4px; }
#bio-kinds:has(.atm-ebar) button { padding: 0 9px; }
#bio-kinds .atm-ebar::before { content: ''; position: absolute; left: 0.06em; right: 0.06em; top: 0.18em; height: 0.09em; min-height: 1.4px; border-radius: 1px; background: currentColor; }
#screen-bio-division .atm3d.flat .atm3d-canvas { touch-action: pan-y; }
#screen-bio-division .atm3d-lab { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#screen-bio-division .atm3d-txt { font: 600 12.5px 'Montserrat', sans-serif; fill: var(--text); stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; }
#screen-bio-division .atm3d-txt.b { font-weight: 700; }
#screen-bio-division .atm3d-txt.mint { fill: var(--primary-ink); }
#screen-bio-division .atm3d-txt.muted { fill: var(--text-muted); }
#screen-bio-division .atm3d-line { stroke: var(--text-muted); stroke-width: 1; }
#screen-bio-division .atm3d-dot { fill: var(--text-muted); }
#screen-bio-division .atm3d-conn { stroke: var(--primary-ink); stroke-width: 1.6; fill: none; stroke-dasharray: 4 4; }
#screen-bio-division .atm3d-cell, #bio-scene .atm-cell { fill: var(--ca-cell); stroke: var(--text); stroke-width: 1.4; }
#screen-bio-division .atm3d-cell.on, #bio-scene .atm-cell.on { fill: var(--bio-mint-bg); stroke: var(--primary-ink); stroke-width: 2; }
#bio-scene .atm-cell { cursor: pointer; }
#screen-bio-division[data-bio-mode^="atm_"] #bio-scene :is(path, text, g) { pointer-events: none; }
#screen-bio-division[data-bio-mode^="atm_"] #bio-scene .atm-cell { pointer-events: all; }
#bio-scene .atm-cell.ghost { fill: none; stroke: var(--text-muted); stroke-dasharray: 3 3; cursor: default; }
#screen-bio-division .atm3d-zoom { position: absolute; right: 6px; top: 6px; height: 36px; padding: 0 10px 0 8px; border-radius: 10px; display: flex; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font: 600 13px 'Montserrat', sans-serif; cursor: pointer; pointer-events: auto; }
#screen-bio-division .atm3d-zoom::after { content: ''; position: absolute; inset: -4px; }
#screen-bio-division .atm3d-zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
#screen-bio-division .atm3d-zoom.on { border-color: var(--primary); color: var(--primary-ink); }
#screen-bio-division .atm3d-zoom[hidden], #screen-bio-division .atm3d-hint[hidden] { display: none; }
#screen-bio-division .atm3d:is([data-mode="atm_o"], [data-mode="atm_d"], [data-mode="atm_j"]) .atm3d-hint { left: auto; right: 6px; transform: none; }
#screen-bio-division .atm3d:is([data-mode="atm_o"], [data-mode="atm_d"], [data-mode="atm_j"]) .atm3d-hint { white-space: normal; text-align: center; width: min-content; min-width: 7.5em; line-height: 1.25; }
#screen-bio-division .atm3d-hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 600 12px 'Montserrat', sans-serif; color: var(--text-muted); background: var(--surface-2); border-radius: 8px; padding: 5px 10px; }
#bio-nc .atm-scheme { display: block; }
#bio-nc sup, #bio-counts sup, #bio-phase-items sup { font-size:calc(12px * var(--fs, 1)); line-height: 0; }
@media (min-width: 700px) {
  :root { --app-w: 1080px; --task-w: 760px; --app-pad: 32px; }
  .brand-header, .progress-bar { max-width: var(--app-w); padding-left: var(--app-pad); padding-right: var(--app-pad); }
  .tab-bar { max-width: var(--app-w); }
  .screen { max-width: var(--task-w); padding: 16px var(--app-pad) 40px; }
  #screen-subjects, #screen-home, #screen-oge-chem, #screen-oge-stats, #screen-oge-flames, #screen-biology, #screen-anatomy, #screen-chem-anim, #screen-stats { max-width: var(--app-w); }
  .achievement-toast, .lab-pour { max-width: var(--task-w); }
  h1 { font-size:calc(26px * var(--fs, 1)); }
  #screen-subjects .subject-card .module-card-content { max-width: 70%; }
  .chem-rects { display: grid; grid-template-columns: 1fr 1fr; }
  .chem-rects .chem-rect { min-height: 132px; }
  #oge-group-view .home-group, #home-group-view .home-group:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; }
  #home-group-view .module-card.g-row0, #oge-group-view .module-card.g-row0 { border-top: 0; }
  #home-group-view .module-card.g-right, #oge-group-view .module-card.g-right { border-left: 1px solid var(--border); }
  #home-group-view .module-card.g-span, #oge-group-view .module-card.g-span { border-left: 0; grid-column: 1 / -1; }
  .chem-rects .chem-rect.g-span { grid-column: 1 / -1; }
  #chem-anim-list { display: grid; grid-template-columns: 1fr 1fr; }
  #chem-anim-list .module-card { margin: 0; }
}
@media (min-width: 980px) and (orientation: landscape) {
  :root { --side-w: 240px; --side-top: calc(12px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
  #screen-subjects .subject-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: calc(100dvh - 294px); }
  #screen-subjects .subject-card.g-span { grid-column: 1 / -1; }
  #screen-subjects .subject-card .module-card-content { max-width: 86%; }
  .chem-rects .chem-rect { min-height: 150px; }
  body.has-tabbar { padding-left: var(--side-w); }
  body.has-tabbar .tab-bar { top: 0; right: auto; width: var(--side-w); max-width: none; margin: 0; flex-direction: column; justify-content: flex-start; gap: 6px;
    padding: calc(92px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)) 14px 20px; border-top: 0; border-right: 1px solid var(--border); }
  body.has-tabbar .tab-bar-btn { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 4px 6px; border-radius: 16px; font-size:calc(15px * var(--fs, 1)); }
  body.has-tabbar .tab-bar-btn.active { background: var(--tab-active-bg); }
  body.has-tabbar .tab-bar-btn.active .tab-bar-icon { background: none; }
  body.has-tabbar .tab-bar-icon { padding: 4px 8px; }
  body.has-tabbar .tab-bar-spacer { display: none; }
  body.has-tabbar .brand-header { position: fixed; top: 0; left: 0; z-index: 501; width: var(--side-w); max-width: none; margin: 0;
    padding: calc(22px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)) 18px 0; }
  body.has-tabbar .theme-toggle-btn { position: fixed; left: 20px; bottom: calc(20px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))); z-index: 501; }
  body.has-tabbar .screen { padding-top: 22px; }
}
@media (min-width: 980px) and (orientation: landscape) {
  #screen-chem-lab { max-width: var(--app-w); }
  :is(#lab-free, #lab-ovr):not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 24px; align-items: start; }
  :is(#lab-free, #lab-ovr) > * { grid-column: 2; min-width: 0; }
  :is(#lab-free, #lab-ovr) > .lab-rig { display: block; grid-column: 1; grid-row: 1 / -1; position: sticky; top: var(--side-top); }
  :is(#lab-free, #lab-ovr) .lab-rig > .lab-tools { margin-bottom: 0; }
  #lab-task:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr); grid-template-rows: repeat(7, auto) 1fr auto auto; column-gap: 24px; align-items: start; }
  #lab-task > * { grid-column: 2; min-width: 0; }
  #lab-task > .lab-bench { grid-column: 1; grid-row: 1 / 9; }
  #lab-task > .lab-tube-labels { grid-column: 1; grid-row: 9; }
  #lab-task > .lab-results { grid-column: 1; grid-row: 10; }
}
@media (min-width: 700px) {
  .subtitle, .module-desc { font-size:calc(15px * var(--fs, 1)); }
  #screen-home .home-hub > .subtitle, #screen-home .home-group-view > .subtitle, #screen-oge-chem > .subtitle { font-size:calc(16px * var(--fs, 1)); }
  #screen-home .module-desc, #screen-oge-chem .module-desc { font-size:calc(14px * var(--fs, 1)); }
  .hint, .module-progress-text, .achievement-desc, .achievement-xp, .achievement-progress-text { font-size:calc(13px * var(--fs, 1)); }
  .achievement-title-row strong { font-size:calc(15px * var(--fs, 1)); }
  .lab-hint { font-size:calc(14px * var(--fs, 1)); }
  .rxn-chip { font-size:calc(15px * var(--fs, 1)); }
  .rxn-attr-title { font-size:calc(14px * var(--fs, 1)); }
  .deck-counter { font-size:calc(14px * var(--fs, 1)); }
  .lb-tab { font-size:calc(14px * var(--fs, 1)); }
  .screen :is(p.hint, p.subtitle, p.lab-hint) { max-width: 62ch; }
}
@media (min-width: 700px) and (orientation: portrait) {
  :is(#lab-free, #lab-ovr) > .lab-rig { display: block; position: sticky; top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + var(--lab-head-h, 0px)); z-index: 5;
    max-width: 540px; margin: 0 auto; padding: 6px 0 4px; background: var(--bg); }
  #lab-task > :is(.lab-bench, .lab-tube-labels, .lab-results) { max-width: 540px; margin-left: auto; margin-right: auto; }
  :is(#lab-free, #lab-ovr) .lab-shelf-bar { top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + var(--lab-head-h, 0px) + var(--lab-rig-h, 0px)); }
}
@media (min-width: 980px) and (orientation: landscape) {
  .lab-pour { left: auto; right: max(var(--app-pad), calc((100vw - var(--app-w)) / 2 + var(--app-pad))); margin: 0;
    width: calc((min(100vw, var(--app-w)) - 2 * var(--app-pad) - 24px) / 2.15); max-width: none; }
  body.has-tabbar .achievement-toast { left: var(--side-w); }
}
.bio-rt-on .bio-pult, .bio-rt-on #bio-counts, .bio-rt-on .bio-caption { display: none; }
.bio-rt { margin: 4px 0 12px; }
.bio-rt[hidden], .rt-range[hidden], .rt-btns[hidden], .rt-konsp[hidden] { display: none; }
.rt-verdict { margin: 0 0 2px; min-height: 4.05em; font-size:calc(15px * var(--fs, 1)); font-weight: 700; line-height: 1.35; color: var(--text); }
@media (min-width: 360px) { .bio-rt:not([data-view="cat"]) .rt-verdict { min-height: 3.05em; } }
.rt-range { display: block; margin: 0; }
.rt-range input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.rt-range input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: var(--ca-track); box-shadow: inset 0 0 0 1px var(--text-muted); }
.rt-range input[type=range]::-moz-range-track { height: 10px; border-radius: 5px; background: var(--ca-track); box-shadow: inset 0 0 0 1px var(--text-muted); }
.rt-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; margin-top: -17px; border-radius: 50%;
  background: var(--primary); border: 8px solid var(--surface); box-shadow: 0 0 0 2px var(--primary); }
.rt-range input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); border: 8px solid var(--surface); box-shadow: 0 0 0 2px var(--primary); }
.rt-range input[type=range]:focus-visible { outline: none; }
.rt-range input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--primary), 0 0 0 5px var(--text); }
.rt-range-ends { display: flex; justify-content: space-between; gap: 6px; margin-top: 2px; font-size:calc(13px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); }
.rt-range-ends b { color: var(--primary-ink); font-weight: 700; text-align: center; }
.rt-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 0; }
.rt-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 56px; padding: 4px 10px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size:calc(14px * var(--fs, 1)); line-height: 1.15; text-align: left; }
.rt-btn.on { border-color: var(--primary); background: var(--bio-mint-bg); color: var(--primary-ink); }
.rt-btn .rt-g { flex: none; width: 28px; height: 28px; }
.rt-btn .rt-b-t { min-width: 0; }
.rt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.rt-again, .rt-kbtn { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--primary-ink); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size:calc(14px * var(--fs, 1)); cursor: pointer; }
.rt-again svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rt-konsp { margin: 2px 0 0; padding-top: 6px; border-top: 1px solid var(--border); }
.rt-konsp p { margin: 0 0 8px; font-size:calc(13px * var(--fs, 1)); line-height: 1.45; color: var(--text); }
.rt-konsp .rt-k-view { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.rt-konsp sub { font-size: 0.75em; }
.bio-lab-rt .bio-kinds button { font-size:calc(13px * var(--fs, 1)); }
@media (max-width: 359px) { .rt-btn { gap: 6px; padding: 4px 6px; font-size:calc(13.5px * var(--fs, 1)); } .rt-btn .rt-g { width: 22px; height: 22px; } }
.app-link-box { margin: 14px 0 0; padding: 0; text-align: center; }
.app-link-box .app-link-text { padding: 0 4px; margin: 0 auto 10px; max-width: none; text-align: center; }
.app-link-box button { width: 100%; }
.app-link-box .app-link-code-box { margin: 0 0 12px; padding: 12px 10px; border: 1.5px dashed var(--border); border-radius: 14px; background: var(--surface); }
.app-link-box .app-link-code { margin: 0; font-family: 'JetBrains Mono', monospace; font-size:calc(20px * var(--fs, 1)); font-weight: 700; letter-spacing: 1px; color: var(--text); user-select: all; -webkit-user-select: all; word-break: break-all; }
.app-link-box button + button { margin-top: 8px; }
.app-link-box a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  #screen-subjects .subject-grid { min-height: 0; }
  #screen-subjects .subject-card { flex: none; min-height: 250px; padding: 28px; }
  #screen-subjects .subject-card .module-title { font-size:calc(40px * var(--fs, 1)); }
  #screen-subjects .subject-card .module-desc { font-size:calc(17px * var(--fs, 1)); margin-top: 8px; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 980px) and (orientation: landscape) {
  #screen-subjects .subject-grid { grid-auto-rows: 270px; }
  #screen-subjects .subject-card { min-height: 0; }
}
#screen-chem-anim { --bio-g-dark: #8665C3; --bio-g-main: #E7D3FF; --bio-g-bg: #F7EEFF; }
#screen-chem-anim .bio-row-tags i { background: var(--bio-g-bg); color: #6a4ba8; }
:root:not(.theme-light) #screen-chem-anim .bio-row-tags i { background: rgba(231,211,255,0.14); color: var(--bio-g-main); }
@media (min-width: 700px) { #chem-anim-list.bio-anim-rows, #chem-anim-list:has(> .bio-group-tile) { display: flex; } }
#chem-anim-list .chem-anim-sub { margin: 0; padding: 16px 18px 6px; border-top: 1px solid var(--border); font-size:calc(14px * var(--fs, 1)); font-weight: 700; line-height: 1.3; color: var(--text-muted); }
#chem-anim-list .chem-anim-sub:first-child { border-top: 0; }
#chem-anim-list .chem-anim-sub + .bio-anim-row { border-top: 0; }
#screen-bio-division { --og-acc: #ffb27a; --og-acc-ink: #ffb27a; --og-cl: #7fdc96; --og-h: var(--ca-vio-ink); --og-br: var(--ca-red-ink); --og-grp: var(--ca-blue-ink); }
:root.theme-light #screen-bio-division { --og-acc: #c0610f; --og-acc-ink: #a24f08; --og-cl: #1e7b3b; }
#screen-bio-division[data-bio-mode^="oalk_"] .bio-scene-card, #screen-bio-division[data-bio-mode^="oen_"] .bio-scene-card { background: var(--emb-bg); --surface: var(--emb-surface); }
#screen-bio-division[data-bio-mode^="oalk_"] #bio-scene text, #screen-bio-division[data-bio-mode^="oen_"] #bio-scene text { font-family: 'Montserrat', sans-serif; }
#screen-bio-division { --oen-brw: #d98a55; --oen-clear: #4d7896; --oen-kmn: #e05ccc; --oen-pg: #2f4d34; --oen-pb: #1f4a5e; --oen-bal: #3a2e27; }
:root.theme-light #screen-bio-division { --oen-brw: #f0b48a; --oen-clear: #cfe6f7; --oen-kmn: #d81fbf; --oen-pg: #d7f2cc; --oen-pb: #c9eefb; --oen-bal: #fde4d2; }
.nb-slot[hidden] { display: none; }
#nb-home-chem { margin-bottom: 12px; }
.nb-wrap { max-width: 448px; margin: 12px auto 0; }
.nb-wrap.nb-a { margin-top: 16px; }
.nb-box { position: relative; }
.nb-link { display: block; border-radius: 20px; -webkit-tap-highlight-color: transparent; }
.nb-img { display: block; width: 100%; height: auto; border-radius: 20px; user-select: none; -webkit-user-select: none; transition: transform .12s ease; }
.nb-link:active .nb-img { transform: scale(.985); }
.nb-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nb-x { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nb-x:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.nb-wrap { transition: opacity .35s ease; }
.nb-wrap.nb-in { opacity: 0; }
html.bq-deck-lock.nb-deck-a, html.bq-deck-lock.nb-deck-a body { overflow: auto; overscroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { .nb-img, .nb-wrap { transition: none; } .nb-link:active .nb-img { transform: none; } }
.exam-switch { display: flex; gap: 4px; padding: 4px; margin: 2px 0 14px; background: var(--surface-2); border-radius: 16px; }
.exam-switch button { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 4px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--text-muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: 'Montserrat', sans-serif; }
.exam-switch button b { font-size:calc(17px * var(--fs, 1)); font-weight: 800; line-height: 1.15; }
.exam-switch button small { font-size:calc(12px * var(--fs, 1)); font-weight: 600; line-height: 1.2; }
.exam-switch button.on { background: var(--nav-sel-bg); color: var(--primary-ink); box-shadow: inset 0 0 0 1.5px var(--primary); }
@media (max-width: 340px) { .exam-switch button b { font-size:calc(15px * var(--fs, 1)); } }
.exam-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin-left: 8px; text-transform: none; letter-spacing: 0; border-radius: 999px; vertical-align: middle; font-size:calc(13px * var(--fs, 1)); font-weight: 800; line-height: 1;
  background: var(--nav-sel-bg); color: var(--primary-ink); box-shadow: inset 0 0 0 1.5px var(--primary); }
@media (min-width: 700px) { .exam-switch { max-width: 520px; } }
#screen-subjects:is([data-exam="oge"], [data-exam="uni"]) .subject-card { flex: none; min-height: 210px; }
@media (max-width: 699px) {
  :is(#lab-free, #lab-ovr) > .lab-rig { display: block; position: sticky; top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + var(--lab-head-h, 0px)); z-index: 5; background: var(--bg); padding: 4px 0 6px; }
  .lab-rig .lab-bench { margin-bottom: 2px; }
  .lab-rig .lab-bench-svg { width: 100%; height: auto; max-height: 28dvh; }
  .lab-rig .lab-tools { margin: 4px 0 0; gap: 5px; }
  :is(#lab-free, #lab-ovr) .lab-shelf-bar { top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + var(--lab-head-h, 0px) + var(--lab-rig-h, 0px)); }
}
@media (max-width: 699px), (min-width: 700px) and (orientation: portrait) {
  #screen-chem-lab:has(#lab-free:not([hidden]), #lab-ovr:not([hidden])) .lab-headrow { position: sticky; top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); z-index: 6; background: var(--bg); margin: 0; padding: 4px 0; }
  #screen-chem-lab:has(#lab-free:not([hidden]), #lab-ovr:not([hidden])) .lab-headrow::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--bg); pointer-events: none; }
  #screen-chem-lab:has(#lab-free:not([hidden]), #lab-ovr:not([hidden])) .lab-headrow::after { content: ''; position: fixed; z-index: 7; top: 0; left: 0; right: 0; height: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); background: var(--bg); pointer-events: none; }
  :is(#lab-free, #lab-ovr) > .lab-rig::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--bg); pointer-events: none; }
  #screen-chem-lab { overflow-x: clip; }
}
@media (min-width: 700px) and (orientation: portrait) {
  .lab-rig .lab-bench-svg { width: 100%; height: auto; max-height: 30dvh; }
}
h1:has(> .exam-chip) { display: flex; align-items: flex-start; gap: 10px; }
h1 > .exam-chip { flex: none; margin: 2px 0 0 auto; }
h1.flames-title:has(> .exam-chip) { align-items: center; gap: 6px; }
h1.flames-title > .exam-chip { margin-top: 0; }
.oa-fig { position: relative; width: 100%; max-width: 380px; margin: 4px auto 12px; }
.oa-fig-mini { max-width: 300px; margin: 6px auto 8px; }
.oa-svg { display: block; width: 100%; height: auto; overflow: visible; }
.oa-sym { font-family: 'Montserrat', sans-serif; font-size:calc(36px * var(--fs, 1)); font-weight: 800; fill: var(--violet-ink); }
.oa-sym.unknown { fill: var(--text-muted); }
.oa-sym.ok { fill: var(--primary-ink); }
.oa-oval, .oa-arc { fill: none; stroke: var(--violet); stroke-width: 3.5; stroke-linecap: round; }
.oa-charge, .oa-num { font-family: 'Montserrat', sans-serif; font-weight: 500; fill: var(--violet-ink); }
.oa-charge { font-size:calc(24px * var(--fs, 1)); }
.oa-num { font-size:calc(30px * var(--fs, 1)); }
.oa-arc.fresh { animation: oa-arc-in 0.35s ease-out both; }
@keyframes oa-arc-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .oa-arc.fresh { animation: none; } }
.oa-in { display: block; width: 100%; min-width: 0; height: 44px; padding: 0 2px; text-align: center; background: var(--surface-2); border: 2px solid var(--border); border-radius: 12px; color: var(--text);
  font-family: 'JetBrains Mono', 'Montserrat', sans-serif; font-weight: 700; font-size:calc(18px * var(--fs, 1)); }
.oa-in:focus { outline: none; border-color: var(--blue); }
.oa-in.ok { border-color: var(--primary-dark); background: rgba(61,220,151,0.16); }
.oa-in.bad { border-color: var(--coral); background: rgba(255,92,92,0.14); }
.oa-in[readonly] { cursor: default; }
.oa-charge-wrap { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 2px; }
.oa-charge-wrap .oa-in { width: 46px; height: 40px; }
.oa-plus { font-size:calc(22px * var(--fs, 1)); font-weight: 500; line-height: 1; color: var(--violet-ink); }
.oa-e-wrap { position: absolute; transform: translateX(-50%); }
.oa-e-wrap .oa-in { height: 42px; }
.oa-nrow { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.oa-nrow[hidden], .oa-note[hidden] { display: none; }
.oa-nrow label { flex: 1; min-width: 0; font-size:calc(14px * var(--fs, 1)); font-weight: 700; line-height: 1.3; color: var(--text-muted); }
.oa-nrow .oa-in { flex: none; width: 56px; }
.oa-note { margin: -4px 0 10px; font-size:calc(13px * var(--fs, 1)); font-weight: 600; color: var(--coral-ink); }
.oa-answer { margin-top: 4px; }
.answer-input.field-ok { border-color: var(--primary-dark); }
.oa-rules, .oa-why { margin: 0; padding-left: 20px; font-size:calc(14px * var(--fs, 1)); line-height: 1.5; }
.oa-rules li, .oa-why li { margin-bottom: 4px; }
#oa-prompt { font-size:calc(26px * var(--fs, 1)); line-height: 1.3; }
#ob-prompt, #oc-prompt { font-size:calc(26px * var(--fs, 1)); line-height: 1.3; }
.imgz { position: fixed; inset: 0; z-index: 2500; background: var(--bg); touch-action: none; overflow: hidden; }
.imgz[hidden] { display: none; }
.imgz-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.imgz-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.22), 0 6px 22px rgba(0,0,0,0.25); user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.imgz-pill {
  position: absolute; left: 12px; top: calc(12px + env(safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  max-width: calc(100% - 84px); padding: 0 14px; height: 44px; display: flex; align-items: center; border-radius: 999px;
  background: var(--surface-2); border: 2px solid var(--border); color: var(--text); font: 700 13px 'Montserrat', sans-serif; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imgz-mini {
  position: absolute; right: 12px; top: calc(66px + env(safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  width: 96px; border-radius: 8px; overflow: hidden; background: #fff; border: 2px solid var(--border); pointer-events: none;
}
.imgz-mini[hidden] { display: none; }
.imgz-mini img { display: block; width: 100%; }
.imgz-mini i { position: absolute; border: 2px solid #13a36a; box-sizing: border-box; }
.imgz-bot { position: absolute; left: 12px; right: 12px; bottom: calc(16px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.imgz-hint { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); font: 600 13px/1.35 'Montserrat', sans-serif; text-align: center; max-width: 420px; }
.imgz-btns { display: flex; gap: 12px; pointer-events: auto; }
.imgz-btns button { width: 48px; height: 48px; border: 2px solid var(--border); border-bottom-width: 4px; border-radius: 50%; background: var(--surface-2); color: var(--text); font: 700 24px/1 'Montserrat', sans-serif; cursor: pointer; padding: 0; }
.imgz-btns button:disabled { opacity: 0.4; cursor: default; }
.imgz-close {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; border: 2px solid var(--border); border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; z-index: 2;
}
@media (max-height: 520px) { .imgz-hint { display: none; } .imgz-bot { left: auto; right: 12px; bottom: 12px; } .imgz-btns { flex-direction: column; } .imgz-mini { width: 72px; } }
:root:not(.theme-light) .imgz-stage img, :root:not(.theme-light) .imgz-mini img { filter: invert(0.92) hue-rotate(180deg); }
:root:not(.theme-light) .imgz-mini { background: #141414; }
.pt-btn { min-height: 44px; padding: 8px 16px; font-size:calc(14px * var(--fs, 1)); }
.pt-ico { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--text-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pt-ico .ic { width: 24px; height: 24px; }
.pt-ico:active { background: var(--surface-2); }
.pt-ico:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.element-header .pt-ico { margin-left: auto; align-self: center; margin-top: -8px; margin-bottom: -8px; }
.element-header .pt-ico + .fav-star--inline { margin-left: 0; }
.pt-ico { width: 32px; }
.element-header .pt-ico { margin-right: -10px; }
.pt-ico--corner { position: absolute; top: 2px; right: 42px; }
.task-card.has-ptico { position: relative; }
.task-card.has-ptico > .pt-ico + * { padding-right: 84px; }
.task-card.has-ptico > .fav-star--corner { width: 32px; height: 44px; top: 2px; right: 10px; }
.app-update-bar { position: fixed; z-index: 900; left: 12px; right: 12px; bottom: calc(var(--tabbar-h, 72px) + env(safe-area-inset-bottom, 0px) + 8px); max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--primary); box-shadow: 0 6px 24px rgba(0,0,0,.35); color: var(--text); font-size:calc(14px * var(--fs, 1)); font-weight: 600; }
body:not(.has-tabbar) .app-update-bar { bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
.app-update-text { flex: 1; min-width: 0; }
.app-update-go { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--primary); color: #0b1d15; font: inherit; font-weight: 700; cursor: pointer; }
.app-update-go:disabled { opacity: .6; }
.app-update-x { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--text-muted); font-size:calc(22px * var(--fs, 1)); cursor: pointer; }
@media (min-width: 700px) and (orientation: landscape) { body.has-tabbar .app-update-bar { bottom: 16px; left: calc(var(--side-w, 0px) + 12px); } }
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  #screen-subjects .subject-grid { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); grid-auto-rows: 300px; min-height: 0; }
  #screen-subjects .subject-card.g-span { grid-column: auto; }
  #screen-subjects .subject-card { padding: 24px; }
  #screen-subjects .subject-card .module-card-content { max-width: 100%; }
  #screen-subjects .subject-card .module-title { font-size:calc(27px * var(--fs, 1)); }
  #screen-subjects .subject-card .module-desc { font-size:calc(16px * var(--fs, 1)); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  #screen-biology .bio-home-grid { min-height: 0; height: auto; grid-template-rows: repeat(2, 230px); }
  #screen-russian .ru-home-grid.ru-home-grid { height: auto; min-height: 0; grid-template-rows: 230px 230px auto; }
  #screen-math { max-width: var(--app-w); }
}
#screen-russian .ru-home-grid .bio-home-half:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (min-width: 980px) and (orientation: landscape) { #screen-russian .ru-home-grid .bio-home-half:last-child:nth-child(even) { grid-column: 2 / -1; } }
:root { --fs: 1; }
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) { :root { --fs: 1.1;  --app-w: 1190px; --task-w: 836px;  --app-pad: 35px; --side-w: 264px; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1440px) { :root { --fs: 1.2;  --app-w: 1296px; --task-w: 912px;  --app-pad: 38px; --side-w: 288px; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1680px) { :root { --fs: 1.3;  --app-w: 1404px; --task-w: 988px;  --app-pad: 42px; --side-w: 312px; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1920px) { :root { --fs: 1.4;  --app-w: 1512px; --task-w: 1064px; --app-pad: 45px; --side-w: 336px; } }
@media (hover: hover) and (pointer: fine) and (min-width: 2200px) { :root { --fs: 1.55; --app-w: 1674px; --task-w: 1178px; --app-pad: 50px; --side-w: 372px; } }
@media (hover: hover) and (pointer: fine) and (min-width: 2560px) { :root { --fs: 1.7;  --app-w: 1836px; --task-w: 1292px; --app-pad: 54px; --side-w: 408px; } }
.tab-bar.tab-bar--bare .tab-bar-btn { display: none; }
.achievement-toast { transition: transform 0.28s ease, box-shadow 0.28s ease; }
.achievement-toast:not(.visible) { box-shadow: none; }
@media (min-width: 700px) {
  :is(#screen-flames, #screen-bio-flames, #screen-oge-flames, #screen-ru-flames) { max-width: var(--app-w); }
  :is(#screen-flames, #screen-bio-flames, #screen-oge-flames, #screen-ru-flames) > * { max-width: var(--task-w); }
  :is(#screen-home, #screen-oge-chem) .chem-rects .chem-rect :is(.bio-group-text, .review-home-text):not(:has(.chem-gbar))::after { content: '\00a0'; display: block; visibility: hidden;
    margin-top: calc(8px * var(--fs, 1)); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size:calc(12px * var(--fs, 1)); line-height: normal; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  .brand-logo { width: calc(36px * var(--fs)); height: calc(36px * var(--fs)); padding: calc(4px * var(--fs)); }
  .theme-toggle-btn { width: calc(34px * var(--fs)); height: calc(34px * var(--fs)); }
  .theme-toggle-btn .ic { width: calc(18px * var(--fs)); height: calc(18px * var(--fs)); }
  .chip-icon .ic { width: calc(15px * var(--fs)); height: calc(15px * var(--fs)); }
  .xp-track { flex: 0 1 calc(360px * var(--fs)); height: calc(10px * var(--fs)); }
  body.has-tabbar #screen-russian :is(.tabs, .actbar) { left: var(--side-w); }
  body.has-tabbar .lab-pour { right: max(var(--app-pad), calc((100vw - var(--side-w) - var(--app-w)) / 2 + var(--app-pad)));
    width: calc((min(100vw - var(--side-w), var(--app-w)) - 2 * var(--app-pad) - 24px) / 2.15); }
  #screen-subjects .subject-grid { grid-auto-rows: calc(260px * var(--fs)); gap: calc(12px * var(--fs)); }
  #screen-subjects .subject-card { padding: calc(24px * var(--fs)); border-radius: calc(28px * var(--fs)); }
  #screen-subjects .subject-card .module-icon { width: calc(46px * var(--fs)); height: calc(46px * var(--fs)); }
  #screen-subjects .subject-card .module-icon .ic { width: calc(25px * var(--fs)); height: calc(25px * var(--fs)); }
  #screen-subjects .subject-arrow { width: calc(36px * var(--fs)); height: calc(36px * var(--fs)); }
  #screen-subjects .subject-watermark { width: calc(150px * var(--fs)); height: calc(150px * var(--fs)); right: calc(-18px * var(--fs)); bottom: calc(-28px * var(--fs)); }
  .chem-rects { gap: calc(12px * var(--fs)); }
  :is(#screen-home, #screen-oge-chem) .chem-rect { gap: calc(14px * var(--fs)); padding: calc(14px * var(--fs)) calc(14px * var(--fs)) calc(14px * var(--fs)) calc(18px * var(--fs));
    border-radius: calc(26px * var(--fs)); min-height: calc(120px * var(--fs)); }
  :is(#screen-home, #screen-oge-chem) .chem-rect > .bio-group-wm { width: calc(120px * var(--fs)); height: calc(120px * var(--fs)); right: calc(-14px * var(--fs)); bottom: calc(-26px * var(--fs)); }
  :is(#screen-home, #screen-oge-chem) .chem-rect .chem-gbar { margin-top: calc(8px * var(--fs)); }
  .chem-gbar > span { height: calc(5px * var(--fs)); }
  .nb-wrap { max-width: calc(448px * var(--fs)); }
  :is(#screen-home, #screen-oge-chem) .home-banner-row { gap: calc(12px * var(--fs)); }
  :is(#screen-home, #screen-oge-chem) .home-banner-row .home-banner { flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(14px * var(--fs));
    min-height: 0; padding: calc(14px * var(--fs)) calc(18px * var(--fs)); border-radius: calc(24px * var(--fs)); }
  :is(#screen-home, #screen-oge-chem) .home-banner-icon { width: calc(44px * var(--fs)); height: calc(44px * var(--fs)); }
  :is(#screen-home, #screen-oge-chem) .home-banner-row .home-banner-text { flex: 1; width: auto; }
  :is(#screen-home, #screen-oge-chem) .home-banner-row .home-banner-arrow { display: block; font-size:calc(24px * var(--fs, 1)); line-height: 1; }
  .module-card { padding: calc(16px * var(--fs)); gap: calc(14px * var(--fs)); }
  .module-icon { width: calc(44px * var(--fs)); height: calc(44px * var(--fs)); }
  :is(#home-group-view, #oge-group-view) .module-icon, .module-card.soon-card .module-icon { width: calc(40px * var(--fs)); height: calc(40px * var(--fs)); }
  .cells { gap: calc(6px * var(--fs)); }
  .cell { width: calc(36px * var(--fs)); height: calc(36px * var(--fs)); }
  .screen .primary-btn:not(.review-home-btn) { display: block; max-width: calc(440px * var(--fs)); margin-left: auto; margin-right: auto; }
  #screen-biology .bio-home-grid { grid-template-rows: repeat(2, calc(230px * var(--fs))); }
  #screen-russian .ru-home-grid.ru-home-grid { grid-template-rows: calc(230px * var(--fs)) calc(230px * var(--fs)) auto; }
}
.hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .hint-mouse { display: inline; } .hint-touch { display: none; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  :is(#screen-flames, #screen-bio-flames, #screen-oge-flames, #screen-ru-flames) > :is(.answer-input, .primary-btn) { max-width: calc(440px * var(--fs)); margin-left: 0; }
  #screen-subjects .subject-grid { grid-template-columns: repeat(auto-fit, minmax(calc(190px * var(--fs)), 1fr)); }
  #screen-subjects .subject-card { container-type: inline-size; padding: calc(20px * var(--fs)); }
  #screen-subjects .subject-card .module-title { font-size: min(calc(27px * var(--fs)), 11cqi); }
  #screen-subjects .subject-card .module-desc { font-size: min(calc(16px * var(--fs)), 7.6cqi); }
}
#screen-bio-division { --elz-glass: #8fa3b8; --elz-liq-sol: #1f3a52; --elz-liq-melt: #4a3322; --elz-rod: #6f7884; --elz-rod-d: #b4bcc6;
  --elz-wire: #c3ccd6; --elz-e: #8cc8f5; --elz-e-ink: #8cc8f5;
  --elz-w: #d9f2ec; --elz-w-d: #3f8f7f; --elz-gas: #e6e9ee; --elz-gas-d: #6b7480; --elz-cl: #c8f0d0; --elz-cl-d: #2f8a4a;
  --elz-f: #f1f6c2; --elz-f-d: #7e8a1e; --elz-br: #f6d2bf; --elz-br-d: #a3502a; --elz-metal: #d6dbe1; --elz-metal-d: #5d6772;
  --elz-cu: #f7c9a6; --elz-cu-d: #b4683a; --elz-r1: #3b2f55; --elz-r1d: #b79bf0; --elz-r2: #1f4a45; --elz-r2d: #5fd0b8; }
:root.theme-light #screen-bio-division { --elz-r1: #ece0ff; --elz-r1d: #6a4ba8; --elz-r2: #d6f3ec; --elz-r2d: #1f7a68; --elz-glass: #6b7d91; --elz-liq-sol: #d6ecfb; --elz-liq-melt: #ffe3c6; --elz-rod: #a7b0bb; --elz-rod-d: #59636f;
  --elz-wire: #4d5560; --elz-e: #2e6da6; --elz-e-ink: #2e6da6; }
#screen-bio-division[data-bio-mode^="elz_"] .bio-scene-card { background: var(--emb-bg); --surface: var(--emb-surface); }
#screen-bio-division[data-bio-mode^="elz_"] #bio-scene text { font-family: 'Montserrat', sans-serif; }
.elz-pick { position: relative; margin: 0 0 6px; }
.elz-pick[hidden], .elz-panel[hidden], .elz-eq[hidden], .elz-panel-sub[hidden] { display: none; }
.elz-pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.elz-pick-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; min-width: 0; min-height: 46px; padding: 2px 8px 3px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: 'Montserrat', sans-serif; text-align: left; }
.elz-pick-btn.open { border-color: var(--primary); }
.elz-pick-cap { grid-column: 1; font-size:calc(12px * var(--fs, 1)); font-weight: 600; line-height: 1.2; color: var(--text-muted); }
.elz-pick-ion { grid-column: 1; font-size:calc(17px * var(--fs, 1)); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.elz-pick-btn svg { grid-column: 2; grid-row: 1 / span 2; flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; color: var(--text-muted); }
.elz-pick-btn.open svg { transform: rotate(180deg); }
.elz-pick sup, .elz-panel sup, .elz-eq sup, .elz-pick sub, .elz-panel sub, .elz-eq sub { font-size: 0.66em; line-height: 0; }
.elz-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: min(62vh, 440px); overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 12px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
:root.theme-light .elz-panel { box-shadow: 0 12px 32px rgba(20, 30, 50, 0.18); }
.elz-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.elz-panel-title { font-size:calc(15px * var(--fs, 1)); font-weight: 700; color: var(--text); }
.elz-panel-x { flex: none; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; color: var(--text-muted); font-size:calc(26px * var(--fs, 1)); line-height: 1; cursor: pointer; }
.elz-panel-sub { margin: -4px 0 4px; font-size:calc(12px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); }
.elz-note { margin: 0 0 6px; font-size:calc(13px * var(--fs, 1)); font-weight: 600; line-height: 1.35; color: var(--coral-ink); }
.elz-note:empty { display: none; }
.elz-group { margin-top: 8px; }
.elz-group-h { margin: 0 0 6px; font-size:calc(12px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); }
.elz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.elz-chip { min-width: 52px; height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-family: 'Montserrat', sans-serif; font-size:calc(16px * var(--fs, 1)); font-weight: 700; cursor: pointer; white-space: nowrap; }
.elz-chip.on { border-color: var(--primary); background: var(--bio-mint-bg); color: var(--primary-ink); }
.elz-chip.off { opacity: 0.45; border-style: dashed; }
.elz-eq { display: grid; gap: 3px; margin: 4px 0 4px; }
.elz-eq-row { display: flex; align-items: baseline; gap: 8px; min-height: 27px; padding: 2px 10px; border-radius: 10px; border-left: 3px solid transparent;
  font-size:calc(15px * var(--fs, 1)); font-weight: 700; line-height: 1.3; color: var(--text); transition: background-color 0.3s ease; }
.elz-eq-lab { flex: none; min-width: 3.3em; color: var(--text-muted); }
.elz-eq-f { opacity: 0; transition: opacity 0.4s ease; }
.elz-eq-row.on .elz-eq-f { opacity: 1; }
.elz-eq-row.cur { background: var(--surface-2); border-left-color: var(--ca-vio-d); }
.elz-eq-row[data-r="1"] { border-left-color: var(--elz-r1d); }
.elz-eq-row[data-r="2"] { border-left-color: var(--elz-r2d); }
.elz-eq-row[data-r] .elz-eq-lab { min-width: 4.4em; }
#screen-bio-division.bio-lab-elz #bio-phase-items li.elz-li-r1::marker { color: var(--elz-r1d); }
#screen-bio-division.bio-lab-elz #bio-phase-items li.elz-li-r2::marker { color: var(--elz-r2d); }
#screen-bio-division.bio-lab-elz :is(#bio-nc, #bio-phase-title, #bio-phase-items) sub { font-size: 0.72em; line-height: 0; }
#screen-bio-division.bio-lab-elz :is(#bio-nc, #bio-phase-title) sup { font-size: 0.66em; line-height: 0; }
#screen-bio-division.bio-lab-elz #bio-phase-items li.elz-li-eq { font-weight: 700; }
#screen-bio-division.bio-lab-elz .bio-phase-chip { flex: none; white-space: nowrap; -webkit-line-clamp: 1; }
#screen-bio-division.bio-lab-elz .bio-nc { flex: 0 1 auto; min-width: 0; font-size:calc(16px * var(--fs, 1)); text-align: right; }
@media (prefers-reduced-motion: reduce) { .elz-eq-f, .elz-eq-row { transition: none; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  .elz-pick-row { gap: calc(8px * var(--fs)); }
  .elz-pick-btn { min-height: calc(46px * var(--fs)); padding: calc(4px * var(--fs)) calc(8px * var(--fs)) calc(4px * var(--fs)) calc(12px * var(--fs)); border-radius: calc(14px * var(--fs)); }
  .elz-pick-btn svg { width: calc(18px * var(--fs)); height: calc(18px * var(--fs)); }
  .elz-panel { padding: calc(4px * var(--fs)) calc(12px * var(--fs)) calc(12px * var(--fs)); border-radius: calc(16px * var(--fs)); }
  .elz-panel-x { width: calc(44px * var(--fs)); height: calc(44px * var(--fs)); }
  .elz-chips { gap: calc(6px * var(--fs)); }
  .elz-chip { min-width: calc(52px * var(--fs)); height: calc(44px * var(--fs)); padding: 0 calc(10px * var(--fs)); border-radius: calc(12px * var(--fs)); }
  .elz-eq-row { min-height: calc(27px * var(--fs)); padding: calc(2px * var(--fs)) calc(10px * var(--fs)); border-radius: calc(10px * var(--fs)); }
}
.elx-answer sup.hint-ion, #screen-elx .rxn-equation sup.hint-ion { font-size: 0.68em; line-height: 0; font-weight: 600; }
.elx-rx { margin-top: 8px; }
.elx-rx + .elx-rx { padding-top: 8px; border-top: 1px dashed var(--reveal-border); }
.elx-rx-h { margin: 0 0 2px; font-size:calc(13px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); }
.elx-half { margin: 2px 0; overflow-wrap: anywhere; }
.elx-half-k { color: var(--text-muted); font-weight: 600; }
.elx-eqline { margin: 4px 0 0; overflow-wrap: anywhere; }
.elx-eq-note { font-size:calc(13px * var(--fs, 1)); color: var(--text-muted); font-weight: 600; }
.elx-arrow { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; margin: 0 3px; line-height: 1; }
.elx-arrow-t { font-size:calc(12px * var(--fs, 1)); font-weight: 600; padding: 0 3px 2px; text-align: center; white-space: nowrap; }
.elx-arrow-l { position: relative; height: 1.6px; background: currentColor; margin-right: 2px; }
.elx-arrow-l::after { content: ''; position: absolute; right: -2px; top: -3.4px; width: 6px; height: 6px; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); box-sizing: border-box; }
.elx-alt { margin: 6px 0 0; font-size:calc(14px * var(--fs, 1)); }
.elx-why { margin-top: 8px; font-size:calc(14px * var(--fs, 1)); font-weight: 500; color: var(--text-muted); }
.elx-why p { margin: 4px 0 0; }
.elx-anim-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; min-height: 44px; }
.elx-anim-btn[hidden] { display: none; }
.elx-anim-btn .ic { font-size:calc(20px * var(--fs, 1)); }
.elx-key-e sup { font-size: 0.7em; }
.duel-home[hidden] { display: none !important; }
#screen-home .duel-home, #screen-oge-chem .duel-home { margin: 0 0 12px; border-radius: 24px; padding: 12px 14px; }
#screen-home .duel-home .home-banner-icon, #screen-oge-chem .duel-home .home-banner-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--bio-g-dark, #8665C3); }
.duel-home .home-banner-text small { white-space: normal; }
.duel-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.duel-title-ic { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; background: var(--surface-2); color: var(--violet-ink); font-size:calc(18px * var(--fs, 1)); flex: none; }
.duel-hub { display: flex; flex-direction: column; gap: 10px; }
.duel-label { font-size:calc(13px * var(--fs, 1)); font-weight: 700; color: var(--text-muted); }
.duel-select { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size:calc(15px * var(--fs, 1)); font-weight: 600; max-width: 100%; }
.duel-wide { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 8px; }
.duel-wide .ic { font-size:calc(18px * var(--fs, 1)); }
.duel-quiet { background: transparent; border-color: transparent; color: var(--text-muted); }
.duel-note { margin: 6px 0; font-size:calc(14px * var(--fs, 1)); color: var(--text-muted); line-height: 1.4; }
.duel-err { margin: 4px 0; min-height: 0; font-size:calc(14px * var(--fs, 1)); font-weight: 600; color: var(--coral-ink); }
.duel-err:empty { display: none; }
.duel-invite { font-size:calc(17px * var(--fs, 1)); line-height: 1.4; margin: 8px 0 12px; overflow-wrap: anywhere; }
.duel-invite-name { color: var(--violet-ink); }
.duel-card { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 8px; }
.duel-card-k { font-size:calc(13px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); }
.duel-card-v { font-size:calc(14px * var(--fs, 1)); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.duel-timer { font-family: 'JetBrains Mono', monospace; font-size:calc(15px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); margin: 4px 0 8px; }
.duel-players { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 8px 0 12px; }
.duel-player { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 18px; background: var(--surface); border: 2px solid var(--border); text-align: center; }
.duel-player.ready { border-color: var(--primary); }
.duel-player-name { font-weight: 700; font-size:calc(15px * var(--fs, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-player-sub { font-size:calc(13px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); }
.duel-player.ready .duel-player-sub { color: var(--primary-ink); }
.duel-vs { font-weight: 700; color: var(--text-muted); font-size:calc(14px * var(--fs, 1)); }
.duel-count { font-family: 'JetBrains Mono', monospace; font-size:calc(96px * var(--fs, 1)); font-weight: 700; text-align: center; line-height: 1.2; margin: 24px 0 8px; color: var(--violet-ink); }
.duel-count.pop { animation: duel-pop 0.6s ease-out; }
@keyframes duel-pop { from { transform: scale(1.5); opacity: 0.2; } to { transform: scale(1); opacity: 1; } }
.duel-progress { display: flex; flex-direction: column; gap: 8px; }
.duel-prog-row { display: flex; flex-direction: column; gap: 4px; position: relative; }
.duel-prog-top { display: flex; justify-content: space-between; gap: 8px; font-size:calc(13px * var(--fs, 1)); font-weight: 600; }
.duel-prog-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-prog-num { font-family: 'JetBrains Mono', monospace; flex: none; color: var(--text-muted); }
.duel-prog-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.duel-prog-fill { height: 100%; border-radius: 999px; background: var(--violet); transition: width 0.3s ease; }
.duel-prog-row.me .duel-prog-fill { background: var(--primary); }
.duel-prog-flag { font-size:calc(12px * var(--fs, 1)); font-weight: 600; color: var(--coral-ink); }
.duel-result { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.duel-res-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.duel-res-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-res-score { font-weight: 700; }
.duel-res-time { font-family: 'JetBrains Mono', monospace; font-size:calc(13px * var(--fs, 1)); color: var(--text-muted); }
.duel-won .duel-title { color: var(--primary-ink); }
.duel-badge { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--gold); font-weight: 600; font-size:calc(14px * var(--fs, 1)); }
.duel-badge .ic { color: var(--gold-ink); font-size:calc(20px * var(--fs, 1)); flex: none; }
.duel-bar { position: sticky; top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); z-index: 30; margin: 0 0 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.duel-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.duel-bar-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size:calc(14px * var(--fs, 1)); min-width: 0; }
.duel-bar-title .ic { color: var(--violet-ink); flex: none; }
.duel-bar-quit { min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--coral-ink); font-family: inherit; font-weight: 600; font-size:calc(13px * var(--fs, 1)); cursor: pointer; flex: none; }
.duel-next { margin-top: 12px; }
.duel-next[hidden] { display: none; }
.screen.duel-on .back-btn, .screen.duel-on .deck-counter-row, .screen.duel-on .mode-switch-wrap, .screen.duel-on button.topic-tag,
.screen.duel-on [id$="-reveal-btn"], .screen.duel-on [id$="-reveal-structure-btn"], .screen.duel-on [id$="-hint-btn"], .screen.duel-on .cb-hint-btn,
.screen.duel-on .btn-row, .screen.duel-on [id$="-next-btn"], .screen.duel-on [id$="-round-complete"], .screen.duel-on [id$="-answer-reveal"],
.screen.duel-on .fav-star, .screen.duel-on .error-work-banner, .screen.duel-on .nb-wrap, .screen.duel-on .review-note { display: none !important; }
.screen.duel-answered [id$="-task-ui"] .primary-btn, .screen.duel-answered [id$="-check-btn"], .screen.duel-answered [id$="-submit-btn"] { display: none !important; }
body.duel-playing #tab-bar, body.duel-playing #progress-bar { display: none !important; }
.duel-stats-row { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: inherit; text-align: left; cursor: pointer; min-height: 56px; }
.duel-stats-ic { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--violet-ink); flex: none; }
.duel-stats-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.duel-stats-text strong { font-size:calc(15px * var(--fs, 1)); }
.duel-stats-text small { font-size:calc(13px * var(--fs, 1)); color: var(--text-muted); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .duel-count.pop { animation: none; } .duel-prog-fill { transition: none; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  #screen-home .duel-home .home-banner-icon, #screen-oge-chem .duel-home .home-banner-icon { width: calc(38px * var(--fs)); height: calc(38px * var(--fs)); }
  .duel-title-ic { width: calc(32px * var(--fs)); height: calc(32px * var(--fs)); }
  .duel-select, .duel-wide { min-height: calc(48px * var(--fs)); }
  .duel-prog-bar { height: calc(8px * var(--fs)); }
  .duel-stats-ic { width: calc(36px * var(--fs)); height: calc(36px * var(--fs)); }
  .duel-bar-quit { min-height: calc(44px * var(--fs)); }
  #screen-duel #duel-body { max-width: calc(560px * var(--fs)); margin: 0 auto; }
}
.duel-set[hidden] { display: none; }
.duel-set { display: flex; flex-direction: column; gap: 8px; }
.duel-set-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.duel-set-all { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--blue-ink); font-family: inherit; font-weight: 600; font-size:calc(14px * var(--fs, 1)); cursor: pointer; flex: none; }
.duel-chips { display: flex; flex-direction: column; gap: 6px; max-height: 288px; overflow-y: auto; padding: 2px; }
.duel-chip { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); border: 2px solid var(--border); cursor: pointer; font-size:calc(14px * var(--fs, 1)); font-weight: 600; }
.duel-chip:has(input:checked) { border-color: var(--primary); }
.duel-chip input { width: 20px; height: 20px; flex: none; accent-color: var(--primary); }
.duel-chip-text { min-width: 0; overflow-wrap: anywhere; }
.duel-card-set { font-weight: 500; }
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) { .duel-chip { min-height: calc(44px * var(--fs)); } .duel-set-all { min-height: calc(44px * var(--fs)); } .duel-chip input { width: calc(20px * var(--fs)); height: calc(20px * var(--fs)); } }
.lab-bench { position: relative; }
.lab-replay { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.16); color: #eef1f6; cursor: pointer; animation: lab-replay-in .25s ease both; }
.lab-replay[hidden] { display: none; }
.lab-replay::after { content: ''; position: absolute; inset: -6px; }
.lab-replay .ic { width: 16px; height: 16px; }
.lab-replay:active { transform: scale(.92); }
.lab-replay:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@keyframes lab-replay-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lab-replay { animation: none; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  .lab-replay { top: calc(8px * var(--fs)); right: calc(8px * var(--fs)); width: calc(32px * var(--fs)); height: calc(32px * var(--fs)); }
  .lab-replay .ic { width: calc(16px * var(--fs)); height: calc(16px * var(--fs)); }
}
.lab-sub-wrap { margin-bottom: 6px; }
@media (min-width: 360px) and (max-width: 699px) {
  .lab-headrow { flex-wrap: nowrap; row-gap: 0; }
  .lab-seg button { padding: 0 10px; }
}
@media (max-width: 699px) {
  .lab-headrow h1 { font-size:calc(18px * var(--fs, 1)); }
  :is(#lab-free, #lab-ovr) .lab-rig .lab-tools { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
  .lab-rig .lab-tool { padding: 4px 0; }
}
@media (max-width: 699px) {
  #screen-chem-lab, #screen-chem-lab * { overflow-anchor: none; }
  .lab-rig .lab-bench-svg { max-height: calc(var(--lab-bench-f, 28dvh) - (var(--lab-bench-f, 28dvh) - 72px) * var(--lab-p, 0)); }
  .lab-rig .lab-tl { min-height: calc(44px - 10px * var(--lab-p, 0)); }
  .lab-rig .lab-tl span { max-height: calc(1.3em * (1 - var(--lab-p, 0))); opacity: calc(1 - var(--lab-p, 0) * 1.6); overflow: hidden; }
  .lab-rig .lab-tool { min-height: calc(48px - 4px * var(--lab-p, 0)); }
  .lab-rig .lab-hist:not(.shut) { max-height: calc(34dvh * (1 - var(--lab-p, 0))); overflow: hidden; opacity: calc(1 - var(--lab-p, 0) * 1.5); padding-top: calc(12px * (1 - var(--lab-p, 0))); padding-bottom: calc(12px * (1 - var(--lab-p, 0))); margin-bottom: calc(10px * (1 - var(--lab-p, 0))); }
  .lab-rig .lab-hist.all:not(.shut) { overflow-y: auto; }
  .lab-shrunk .lab-rig .lab-tl span, .lab-shrunk .lab-rig .lab-hist { display: none; }
}
.lab-hist { border-left-color: var(--surface-2); }
.lab-hist.all { max-height: 38vh; overflow-y: auto; }
.lab-hist .lab-hist-t { margin: 0 0 2px; font-size:calc(12px * var(--fs, 1)); font-weight: 800; color: var(--text-muted); }
.lab-hist button.lab-hist-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 0; background: none; border: 0; font: inherit; font-size:calc(12px * var(--fs, 1)); font-weight: 800; color: var(--text-muted); text-align: left; cursor: pointer; }
.lab-hist button.lab-hist-t span { color: var(--primary-ink); font-weight: 700; white-space: nowrap; }
.lab-hist button.lab-hist-t span::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 2px 2px 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-135deg); vertical-align: middle; }
.lab-hist.shut button.lab-hist-t span::after { transform: rotate(45deg); margin-bottom: 4px; }
.lab-hist.shut { padding-top: 2px; padding-bottom: 2px; }
.lab-hist.shut button.lab-hist-t { margin: 0; }
.lab-hist .lab-entry { padding: 6px 0 6px 8px; border-left: 3px solid transparent; }
.lab-hist .lab-entry.ok { border-left-color: var(--gold); }
.lab-hist .lab-entry.unsup { border-left-color: var(--blue); }
.lab-hist .lab-entry.note, .lab-hist .lab-entry.wait { color: var(--text-muted); }
.lab-hist button.lab-hist-more { display: block; width: 100%; min-height: 40px; margin-top: 4px; padding: 0; background: none; border: 0; border-top: 1px solid var(--border); font: inherit; font-size:calc(13px * var(--fs, 1)); font-weight: 700; color: var(--primary-ink); text-align: center; cursor: pointer; }