/* FORGE visual system v1 — shared by the chemistry tutorials.
   Keep this file identical across projects; app-specific selectors are scoped below. */
:root {
  color-scheme:dark;
  --forge-bg:#0c1116; --forge-panel:#151c23; --forge-panel2:#1c2731;
  --forge-text:#edece8; --forge-muted:#a6afb8; --forge-line:#34414c;
  --forge-fire:#ff9b58; --forge-ice:#7acbfa; --forge-bronze:#bf936a;
  --forge-tint:#152e3e; --forge-warm:#30241c; --forge-input:#101920;
  --forge-good:#a5deca; --forge-good-bg:#18312b;
  --forge-retry:#f0cbaa; --forge-retry-bg:#30241c;
  --forge-header:linear-gradient(145deg,#202a32,#12191f 35%,#10151b 80%,#191c1f);
  --forge-card:linear-gradient(140deg,#212a32,#151c23 32%,#11181f 75%,#1d252c);
  --forge-shadow:0 9px 24px #0003;
  --forge-metal:linear-gradient(180deg,#ffead2 5%,#ca9869 47%,#a77951 52%,#e7bb8c 90%);
}
:root[data-forge-theme="light"] {
  color-scheme:light;
  --forge-bg:#f2f5f7; --forge-panel:#fff; --forge-panel2:#e7eef3;
  --forge-text:#20313d; --forge-muted:#4c606f; --forge-line:#bdcbd4;
  --forge-fire:#93460f; --forge-ice:#096b95; --forge-bronze:#84562d;
  --forge-tint:#e1f0fa; --forge-warm:#f5e8db; --forge-input:#fff;
  --forge-good:#17664b; --forge-good-bg:#e1f3ec;
  --forge-retry:#743f12; --forge-retry-bg:#fff0de;
  --forge-header:linear-gradient(145deg,#edf2f6,#fff);
  --forge-card:linear-gradient(145deg,#fff,#e4eef5);
  --forge-shadow:0 5px 18px #263c5010;
  --forge-metal:linear-gradient(180deg,#71451f,#a36b38);
}
:root {
  --bg:var(--forge-bg); --panel:var(--forge-panel); --panel2:var(--forge-panel2);
  --card:var(--forge-panel); --text:var(--forge-text); --muted:var(--forge-muted);
  --border:var(--forge-line); --line:var(--forge-line); --accent:var(--forge-fire);
  --accent2:var(--forge-ice); --purple:var(--forge-ice); --blue:var(--forge-ice);
  --blue-soft:var(--forge-tint); --purple-soft:var(--forge-warm);
  --green:var(--forge-good); --green-soft:var(--forge-good-bg);
  --red:var(--forge-retry); --red-soft:var(--forge-retry-bg);
  --shadow:var(--forge-shadow); --radius:14px;
}
html {background:var(--forge-bg)}
body {display:block;min-height:100vh;padding:24px 18px;background:radial-gradient(ellipse at 25% 0,#bf936a0c,transparent 45%),var(--forge-bg);color:var(--text);font:16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.app {position:relative;isolation:isolate;width:100%;height:auto;min-height:0;max-width:1180px;margin:0 auto;padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--bg);box-shadow:var(--forge-shadow)}
.app::before {content:"";position:absolute;left:15px;right:15px;top:0;height:3px;background:linear-gradient(90deg,#6f3c21,#dc9a61 24%,#f5dac0 40%,#6a655e 53%,#83c9f4 74%,#204767);pointer-events:none;z-index:1}
.app>header {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin:-26px -26px 22px;padding:28px 26px 23px;background:var(--forge-header);border-bottom:1px solid var(--line);border-radius:17px 17px 0 0;text-align:left}
.forge-heading {min-width:0;flex:1 1 330px}
.forge-header-tools {display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.app h1,.hero h1 {font-size:clamp(1.65rem,3.1vw,2.1rem);line-height:1.25;letter-spacing:-.035em;font-weight:700;overflow-wrap:anywhere}
.app h1>span,.forge-wordmark {background:var(--forge-metal);background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:800}
.app>header .course-tag,.app>header .brand,.app>header .sub {font-size:12px;letter-spacing:.1em;color:var(--muted);line-height:1.5}
.hero p {color:var(--muted)}
.app :is(button,input,select) {font-family:inherit}
.app button {min-height:44px;border-radius:10px;line-height:1.4;box-shadow:inset 0 1px 0 #ffffff08;transition:background .15s,border-color .15s}
.app button:hover {background:var(--forge-panel2);transform:none;filter:none;border-color:var(--forge-ice)}
.app :is(button,input,select,summary,a,[role=button]):focus-visible {outline:3px solid var(--forge-ice);outline-offset:4px}
.app :where(.mode-btn,.choice-btn,.small-btn,button,.text-input,select,#answerInput) {background:var(--forge-input);color:var(--text);border:1px solid var(--line)}
.app :is(input,select,#studySet) {color-scheme:inherit}
.app :is(.primary,.primary-btn,#nextBtn) {position:relative;overflow:hidden;background:linear-gradient(110deg,transparent 15%,#fff2 36%,transparent 55%),linear-gradient(180deg,#dca573,#a4693c 8%,#834823 52%,#63371e);color:#fff2e5;border:1px solid #c89160;text-shadow:0 1px 2px #4b220c;box-shadow:inset 0 1px 0 #ffe8cc88,0 3px 12px #0003;font-weight:700}
.app :is(.primary,.primary-btn,#nextBtn):hover {border-color:#efc7a1;filter:brightness(1.08)}
.app :is(.mode-btn.active,.mode-switch button[aria-pressed=true],.mode-button[aria-pressed=true]) {background:linear-gradient(180deg,#65422e,#34271f 50%,#261f1b);border-color:#aa7954;color:#f8e8d9;box-shadow:inset 0 1px 0 #f5c39550}
.app .mode-button[aria-pressed=true] small {color:#edd5c1}
.app :is(.direction-buttons,.format-modes,.difficulty) button[aria-pressed=true] {background:var(--forge-tint);color:var(--forge-ice);border-color:var(--forge-ice)}
.app :is(.toolbar,.panel,.practice-area,.card,.mode-switch) {background:var(--forge-panel);border-color:var(--line);border-radius:14px;box-shadow:var(--forge-shadow)}
.app :is(.equation-card,.result,.welcome),.forge-flashcards .card {background:linear-gradient(117deg,transparent 3%,#f9d6b110 17%,#ffffff0e 18%,transparent 35%,transparent 65%,#9ee2ff09 82%,transparent 95%),var(--forge-card);border:1px solid var(--forge-bronze);box-shadow:inset 0 1px 0 #e2c09b40,var(--forge-shadow)}
.equation-card::after,.forge-flashcards .card::after {height:3px;background:linear-gradient(90deg,var(--forge-bronze),var(--forge-fire),var(--forge-ice))}
.app a,.app .arrow,.app #formatStatus,.app .category-label {color:var(--forge-ice)}
.app :is(.section-label,.eyebrow,.golden-rule strong) {color:var(--forge-bronze)}
.app :is(.crumb,.recipe,.hint-box,.hint-box p,.explain,.problem-heading,.formula-tools,kbd,.pill,.status-tag,.progressWrap) {background:var(--forge-input);border-color:var(--line);color:var(--text)}
.app :is(.hint-box,.explain,.problem-heading) {background:var(--forge-tint);color:var(--text)}
.app :is(.promise,.score,.trail li::before) {color:var(--text)}
.app .promise {border-color:var(--line)}
.app .choice-btn.correct,.app .feedback.good,.app .feedback.success {background:var(--forge-good-bg);border-color:var(--forge-good);color:var(--forge-good)}
.app .choice-btn.correct::before,.app #feedback[data-tone=success],.app .status-tag.balanced,.app .matched {color:var(--forge-good)}
.app .status-tag.balanced {background:var(--forge-good-bg)}
.app .choice-btn.incorrect,.app .feedback.bad {background:var(--forge-retry-bg);border-color:var(--forge-bronze);color:var(--forge-retry)}
.app .choice-btn.incorrect::before,.app .error-text,.app #feedback[data-tone=retry],.app .unmatched {color:var(--forge-retry)}
.app .feedback:not(.good):not(.bad):not(.success) {background:var(--forge-retry-bg);color:var(--forge-retry);border-color:var(--forge-bronze)}
.app .type-card {color:var(--text);background:var(--forge-panel);border:1px solid var(--line);box-shadow:inset 0 1px 0 #fff1}
.app .type-card:is(.ionic,.hydrate) {background:var(--forge-tint);border-color:var(--forge-ice)}
.app .type-card:is(.molecular,.element) {background:var(--forge-panel2);border-color:var(--forge-bronze)}
.app .type-card:is(.acid,.poly) {background:var(--forge-warm);border-color:var(--forge-bronze)}
.app .coefficient {background:var(--forge-input);border-color:var(--forge-bronze)}
.app .coefficient input {background:var(--forge-warm);color:var(--forge-fire);border-color:var(--forge-bronze)}
.app .coefficient button {border:0;border-radius:0;background:transparent;color:var(--forge-fire)}
.app .coefficient button:hover {background:var(--forge-warm)}
.app .coach-badge,.app .step-number {background:var(--forge-tint);color:var(--forge-ice);border-color:var(--forge-ice)}
.app td .element {background:var(--forge-panel2);border-color:var(--line)}
.app progress,.app progress::-webkit-progress-bar {background:var(--forge-panel2)}
.app progress::-webkit-progress-value,.app #progress {background:linear-gradient(90deg,var(--forge-bronze),var(--forge-ice))}
.app progress::-moz-progress-bar {background:var(--forge-ice)}
.app .prompt {text-shadow:none}
.app .answerState {border-color:var(--forge-ice);box-shadow:inset 0 1px 0 #7acbfa55,var(--forge-shadow)}
.app footer {color:var(--muted);border-color:var(--line)}
.app .forge-theme-toggle {font-size:14px;padding:9px 13px;white-space:nowrap;font-weight:600;min-height:42px;color:var(--muted)}
.forge-flashcards header {margin-bottom:0}
.forge-flashcards .timerBox {min-width:110px}
.forge-flashcards #timer {font-size:30px;color:var(--forge-ice)}
.forge-flashcards .card {width:100%;border-radius:15px}
.forge-flashcards .mode-button {font-size:16px;font-weight:700}
.forge-flashcards .studySet,.forge-flashcards .control-label,.forge-flashcards .filters label {font-size:14px}
.forge-flashcards .direction-control {min-width:0}
.forge-flashcards #answerInput {background:var(--forge-input);border-color:var(--line);color:var(--text)}
.forge-flashcards .progressWrap {background:var(--forge-input);min-width:0}
@media(max-width:700px) {
  body {padding:12px 8px}
  .app {padding:18px 15px;border-radius:14px;min-width:0}
  .app>header {margin:-18px -15px 18px;padding:23px 17px 18px;border-radius:13px 13px 0 0;gap:16px;align-items:flex-start}
  .forge-heading {flex-basis:100%}
  .forge-header-tools {width:100%;justify-content:space-between;gap:14px}
  .app h1 {font-size:clamp(25px,6vw,31px)}
  .forge-flashcards header {margin-bottom:0}
  .forge-flashcards .card {height:auto;min-height:330px;padding:24px 16px}
  .forge-flashcards .practice-card {min-height:180px}
  .forge-flashcards .toolbar {padding:12px}
  .forge-flashcards .prompt.formula {font-size:clamp(32px,8vw,60px)}
  .forge-flashcards .actions {width:100%;flex-wrap:wrap}
  .forge-flashcards .actions button {flex:1 1 auto;font-size:14px}
  .forge-balancing .stats {margin:0}
  .forge-balancing .forge-header-tools {flex-direction:column;align-items:flex-start}
  .forge-flashcards .studySet {flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce) {*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print {.forge-theme-toggle{display:none!important}body,.app{background:#fff;color:#111;box-shadow:none}.app{border:0}}