@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#0a1f2e; --muted:#4a5a6a; --line:#c8d4dc; --paper:#f5f7f4; --white:#fff; --coral:#ef8354; --mint:#b9e5d4; --yellow:#f7d774; --blue:#8dc5e8; --pink:#eeb6c9; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 10% 0%, #dbeee7 0 22%, transparent 43%), linear-gradient(135deg,#f7f4ec,#edf4f1 70%); font-family:'DM Sans',sans-serif; min-height:100vh; }
button { font:inherit; cursor:pointer; }
.app-shell { max-width:760px; margin:0 auto; padding:28px 20px 44px; }
.topbar,.section-heading,.workspace-actions,.molecule-item { display:flex; align-items:center; justify-content:space-between; }
.topbar { margin-bottom:26px; }
.support-banner { margin:0 0 12px; padding:8px 12px; border:1px solid rgba(16,42,67,.08); border-radius:8px; background:rgba(255,255,255,.6); color:var(--muted); font-size:11px; line-height:1.4; box-shadow:0 4px 12px rgba(16,42,67,.04); }
.support-banner strong { font-weight:700; }
.completion-overlay { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(16,42,67,.62); backdrop-filter:blur(5px); }
.completion-overlay[hidden] { display:none; }
.completion-card { width:min(100%,430px); padding:34px 28px 30px; border:1px solid rgba(255,255,255,.7); border-radius:24px; background:#fbfcf8; text-align:center; box-shadow:0 24px 60px rgba(16,42,67,.3); animation:completionIn .35s ease; }
.completion-mark { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 16px; border-radius:50%; background:var(--mint); color:var(--ink); font:700 30px 'Space Grotesk',sans-serif; }
.completion-card .eyebrow { margin-bottom:8px; }
.completion-card h2 { margin-bottom:10px; }
.completion-card > p:not(.eyebrow) { color:var(--muted); font-size:14px; }
.completion-score { display:block; margin:20px 0 4px; color:var(--coral); font:700 30px 'Space Grotesk',sans-serif; }
.completion-count { margin-bottom:22px; }
.completion-card .primary-button { margin-top:22px; }
.eyebrow,.section-kicker,.level-badge { font-size:11px; letter-spacing:.14em; font-weight:700; color:var(--coral); margin:0 0 5px; }
h1,h2,h3,p { margin:0; } h1,h2,h3 { font-family:'Space Grotesk',sans-serif; } h1 { font-size:29px; letter-spacing:-.02em; } h2 { font-size:27px; margin:4px 0 8px; } h3 { font-size:18px; }
.score-block { display:flex; align-items:center; gap:8px; }
.score-chip { display:flex; flex-direction:column; align-items:center; min-width:68px; padding:9px 12px; border:1px solid #c8ded6; border-radius:14px; background:#e7f3ed; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:21px; }.score-chip.secondary { background:#f8f1d9; border-color:#ead7a6; }
.score-chip small { color:var(--muted); font:500 10px 'DM Sans',sans-serif; }
.mission-panel { display:flex; align-items:center; justify-content:space-between; padding:22px 22px 22px 24px; border-radius:22px; background:var(--ink); color:white; box-shadow:0 13px 28px #0a1f2e28; overflow:hidden; position:relative; }.mission-panel:after { content:''; position:absolute; width:170px; height:170px; right:-52px; bottom:-86px; border-radius:50%; border:25px solid #ef835480; }.mission-copy { position:relative; z-index:1; }.mission-copy p { color:#d0e0f0; font-size:13px; }.level-badge { color:var(--yellow); }
.formula-card { display:grid; place-items:center; width:94px; aspect-ratio:1; border-radius:50%; background:var(--yellow); color:var(--ink); font:700 25px 'Space Grotesk',sans-serif; transform:rotate(5deg); z-index:1; }
.workspace-section,.elements-section,.molecules-section { margin-top:32px; }.section-heading { margin-bottom:12px; }.section-kicker { display:block; color:var(--muted); margin-bottom:3px; }.status,.atom-count { color:var(--muted); font-size:12px; }.status { padding:6px 10px; border:1px solid var(--line); border-radius:99px; background:#ffffff90; }.workspace { height:330px; position:relative; border:1px solid #d8e4df; border-radius:25px; overflow:hidden; background-color:#fbfcf8; background-image:linear-gradient(#e5ece8 1px,transparent 1px),linear-gradient(90deg,#e5ece8 1px,transparent 1px); background-size:26px 26px; box-shadow:inset 0 0 40px #b9e5d420; touch-action:none; }
.workspace.success { box-shadow:0 0 0 3px rgba(91,187,124,.35), inset 0 0 40px rgba(144,214,160,.32); animation:workspaceGlow .45s ease; }
.workspace.shake { animation:workspaceShake .38s ease-in-out; }
.empty-state { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); gap:5px; pointer-events:none; }.empty-state strong { font:600 16px 'Space Grotesk',sans-serif; color:var(--ink); }.empty-state small { font-size:12px; }.plus-mark { display:grid; place-items:center; width:46px; height:46px; border:1px dashed #9eb4ad; border-radius:50%; font-size:28px; font-weight:300; color:#78988c; }.bond-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }.bond-line { stroke:#82968e; stroke-width:5; stroke-linecap:round; stroke-dasharray:500; stroke-dashoffset:500; animation:bondDraw .34s ease forwards; transition:stroke-width .2s ease, stroke .2s ease; }
.bond-line.ionic { stroke:#3d91c4; stroke-dasharray:7 5; }
.bond-line:hover { stroke-width:7; stroke:#0a1f2e; }
.bond-order { fill:#0a1f2e; font-size:12px; font-weight:700; font-family:'Space Grotesk',sans-serif; pointer-events:none; animation:bondOrderFade .2s ease; }
.atom-layer { position:absolute; inset:0; }
.atom-charge { position:absolute; right:-9px; top:-9px; min-width:23px; height:23px; padding:2px 4px; border:2px solid #fff; border-radius:50%; background:var(--ink); color:#fff; font:700 11px 'Space Grotesk',sans-serif; }
.atom { position:absolute; width:62px; height:62px; transform:translate(-50%,-50%); border:4px solid white; border-radius:50%; display:grid; place-items:center; box-shadow:0 5px 12px #0a1f2e24; font:700 18px 'Space Grotesk',sans-serif; user-select:none; touch-action:none; transition:transform .16s, box-shadow .16s; animation:atomPop .22s ease; cursor:grab; }
.atom:active { transform:translate(-50%,-50%) scale(.93); }
.atom.dragging { box-shadow:0 0 0 5px rgba(239,131,84,.65), 0 12px 18px #0a1f2e30; transform:translate(-50%,-50%) scale(1.05); }
.atom.selected { box-shadow:0 0 0 5px var(--coral), 0 7px 15px #0a1f2e30; }
.atom-h { background:var(--mint); }
.atom-o { background:var(--coral); color:white; }
.atom-c { background:var(--blue); }
.atom-n { background:var(--pink); }
.atom-cl { background:#e6f3ff; }
.atom-na { background:#f5d6a5; }
.atom-s { background:#d9d4ff; }
.atom-mg,.atom-ca,.atom-al { background:#c7d8e5; }
.atom-f { background:#c9e8d3; }
.workspace-actions { margin-top:13px; }
.text-button { border:0; background:transparent; color:var(--muted); font-size:13px; padding:10px 0; }
.primary-button { border:0; border-radius:12px; background:var(--coral); color:white; font-weight:700; padding:13px 16px; box-shadow:0 5px 0 #c96540; }
.primary-button:active { transform:translateY(2px); box-shadow:0 3px 0 #c96540; }
.primary-button span { margin-left:10px; font-size:18px; }
.charge-picker { display:flex; align-items:center; gap:6px; margin:-2px 0 10px; flex-wrap:wrap; }
.charge-label { color:var(--muted); font-size:12px; margin-right:3px; }
.charge-choice { min-width:34px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); padding:6px 8px; font-weight:700; font-size:12px; }
.charge-choice.active { border-color:var(--coral); background:#fff0e9; color:#c96540; }
.charge-choice.negative { color:#367da9; }
.salt-section { margin-top:32px; padding-top:20px; border-top:1px solid #d8e4df; }
.build-mode-selector { display:flex; gap:7px; margin-bottom:10px; flex-wrap:wrap; }
.build-mode-choice { border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--muted); padding:8px 10px; font-size:12px; font-weight:700; }
.build-mode-choice.active { border-color:var(--coral); background:#fff0e9; color:#c96540; }
.mode-description { color:var(--muted); font-size:12px; margin-bottom:10px; }
.salt-challenges { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.salt-challenges[hidden] { display:none; }
.salt-challenge { border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); padding:10px 6px; font:700 15px 'Space Grotesk',sans-serif; }
.salt-challenge.active { border-color:var(--coral); background:#fff0e9; }
.reaction-section { margin-top:32px; padding-top:20px; border-top:1px solid #d8e4df; }
.reaction-state { color:var(--muted); font-size:12px; }
.reaction-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.reaction-card { border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); padding:14px; text-align:left; }
.reaction-card.active { border:2px solid var(--coral); padding:13px; background:#fff8f3; }
.reaction-card strong { display:block; font:700 15px 'Space Grotesk',sans-serif; }
.reaction-card small { display:block; margin-top:5px; color:var(--muted); font-size:11px; line-height:1.35; }
.reaction-tag { display:inline-block; margin-top:9px; padding:4px 7px; border-radius:6px; background:#e7f3ed; color:#36765a; font-size:10px; font-weight:700; }
.reaction-card.endothermic .reaction-tag { background:#e6f3ff; color:#367da9; }
.reaction-controls { display:flex; align-items:center; gap:9px; margin-top:12px; flex-wrap:wrap; color:var(--muted); font-size:12px; }
.reaction-controls select { min-height:40px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); padding:7px 9px; }
.reaction-controls .primary-button { margin-left:auto; }
.reaction-result { display:flex; flex-direction:column; gap:4px; min-height:52px; margin-top:12px; padding:11px 13px; border-left:4px solid var(--yellow); background:#ffffffb8; border-radius:0 10px 10px 0; }
.reaction-result strong { font:700 14px 'Space Grotesk',sans-serif; }
.reaction-result span { color:var(--muted); font-size:12px; }
.reaction-section.exothermic .reaction-result { border-left-color:var(--coral); background:#fff0e9; }
.reaction-section.endothermic .reaction-result { border-left-color:var(--blue); background:#eaf5fc; }
.reaction-section.reacting .reaction-result { animation:reactionPulse .7s ease-in-out infinite alternate; }
.reaction-section.exothermic .reaction-state { color:#c96540; }
.reaction-section.endothermic .reaction-state { color:#367da9; }
@keyframes reactionPulse { from { transform:scale(1); } to { transform:scale(1.015); } }
.forces-section { margin-top:32px; padding-top:20px; border-top:1px solid #d8e4df; }
.forces-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.force-card { border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); padding:14px; text-align:left; transition:border-color .16s,background .16s; cursor:pointer; }
.force-card:hover { border-color:var(--coral); background:#fff8f3; }
.force-card.active { border:2px solid var(--coral); padding:13px; background:#fff0e9; }
.force-card strong { display:block; font:700 15px 'Space Grotesk',sans-serif; margin-bottom:4px; }
.force-card .force-strength { display:inline-block; margin-top:6px; padding:3px 6px; border-radius:6px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.force-card .force-strength.strong { background:#ef8354; color:#fff; }
.force-card .force-strength.medium { background:#f7d774; color:#0a1f2e; }
.force-card .force-strength.weak { background:#b9e5d4; color:#0a1f2e; }
.forces-detail { padding:12px; border:1px solid var(--line); border-radius:12px; background:#ffffffb8; }
.forces-detail strong { display:block; font:700 14px 'Space Grotesk',sans-serif; margin-bottom:6px; }
.forces-detail p { margin:0 0 8px; font-size:13px; color:var(--muted); line-height:1.4; }
.forces-detail .force-meta { display:flex; gap:12px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); }
.forces-detail .force-meta span { display:flex; align-items:center; gap:4px; }
.forces-detail .force-meta strong { color:var(--ink); font-size:11px; margin:0; }
.element-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.element-choice { border:1px solid var(--line); background:#fff; border-radius:14px; padding:10px 4px 8px; color:var(--ink); }
.element-choice strong { display:block; font:700 19px 'Space Grotesk',sans-serif; }
.element-choice small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.element-choice:hover { border-color:var(--coral); transform:translateY(-2px); }
.connection-tip { margin-top:10px; color:var(--muted); font-size:12px; }
.molecule-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.molecule-item { justify-content:flex-start; gap:12px; padding:13px; border:1px solid var(--line); background:#ffffffb8; border-radius:15px; text-align:left; }
.molecule-item.active { border:2px solid var(--coral); padding:12px; }
.molecule-item.completed { background:#e7f3ed; border-color:#c8ded6; }
.molecule-item.completed .molecule-symbol { color:#5a9c6e; }
.molecule-symbol { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:12px; background:var(--yellow); font:700 13px 'Space Grotesk',sans-serif; }
.molecule-item strong { display:block; font-size:13px; }
.molecule-item small { color:var(--muted); font-size:11px; }
.molecule-forces-detail { margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#ffffffb8; }
.molecule-forces-detail strong { display:block; font:700 14px 'Space Grotesk',sans-serif; margin-bottom:8px; }
.molecule-forces-content p { margin:0 0 8px; font-size:12px; color:var(--muted); line-height:1.4; }
.molecule-forces-content .force-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.molecule-forces-content .force-tag { padding:3px 8px; border-radius:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.molecule-forces-content .force-tag.hydrogen-bonding { background:#ef8354; color:#fff; }
.molecule-forces-content .force-tag.dipole-dipole { background:#f7d774; color:#0a1f2e; }
.molecule-forces-content .force-tag.london-dispersion { background:#b9e5d4; color:#0a1f2e; }
.molecule-forces-content .force-tag.ionic { background:#8dc5e8; color:#fff; }
.molecule-forces-content .primary-force { margin-top:8px; padding:6px 8px; border-left:3px solid var(--coral); background:#fff0e9; font-size:11px; color:var(--ink); }
.toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%,120px); padding:13px 18px; border-radius:14px; background:var(--ink); color:white; font-size:13px; box-shadow:0 8px 24px #102a4340; transition:transform .25s; z-index:3; }
.toast.show { transform:translate(-50%,0); }
.reaction-section { margin-top:32px; }
.reaction-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-bottom:16px; }
.reaction-card { display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--line); background:#ffffffb8; border-radius:14px; text-align:left; transition:border-color .16s, background .16s; }
.reaction-card:hover { border-color:var(--coral); background:#fff; }
.reaction-card.active { border:2px solid var(--coral); padding:13px; }
.reaction-equation { font:600 14px 'Space Grotesk',sans-serif; color:var(--ink); }
.reaction-name { font-size:13px; color:var(--muted); }
.reaction-difficulty { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.reaction-difficulty.easy { color:#5a9c6e; }
.reaction-difficulty.medium { color:#d4a537; }
.reaction-difficulty.hard { color:#ef8354; }
.reaction-controls { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#ffffffb8; flex-wrap:wrap; }
.reaction-controls label { font-size:12px; color:var(--muted); }
.reaction-controls select { padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:13px; }
.reaction-controls input[type="range"] { width:120px; accent-color:var(--coral); }
.reaction-controls span { font-size:12px; font-weight:700; color:var(--ink); min-width:50px; }
.reaction-result { margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#ffffffb8; }
.reaction-state { font-size:12px; font-weight:700; color:var(--coral); }
.reaction-state.running { animation:pulse 1s infinite; }
.energy-diagram { margin:16px 0; padding:12px; border:1px solid var(--line); border-radius:12px; background:#ffffffb8; }
.energy-diagram svg { display:block; }
.reaction-section.exothermic .energy-diagram { border-color:#ef835440; background:#fff5f0b8; }
.reaction-section.endothermic .energy-diagram { border-color:#8dc5e840; background:#f0f8ffb8; }
.quantum-section { margin-top:32px; }
.quantum-view { margin-top:12px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#ffffffb8; }
.quantum-view svg { display:block; margin-bottom:12px; }
.quantum-info { font-size:13px; color:var(--muted); }
.quantum-info p { margin:0; }
.quantum-educational { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px; margin-bottom:16px; }
.orbital-explanation { padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; transition:border-color .16s,box-shadow .16s; }
.orbital-explanation:hover { border-color:var(--coral); box-shadow:0 4px 12px rgba(239,131,84,.12); }
.orbital-explanation h4 { margin:0 0 8px; font-size:14px; color:var(--ink); font-family:'Space Grotesk',sans-serif; }
.orbital-explanation p { margin:0 0 12px; font-size:12px; color:var(--muted); line-height:1.5; }
.orbital-explanation strong { color:var(--coral); }
.orbital-visual { height:50px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--ink); font-weight:600; }
.orbital-visual.s-orbital { background:radial-gradient(circle at 30% 30%,#b9e5d4 0%,#8dc5e8 70%,#6ba8c4 100%); }
.orbital-visual.s-orbital::after { content:'● ●'; letter-spacing:8px; }
.orbital-visual.p-orbital { background:linear-gradient(135deg,#b9e5d4 0%,#8dc5e8 40%,#eeb6c9 100%); }
.orbital-visual.p-orbital::after { content:'● ● ●'; letter-spacing:4px; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
@keyframes atomPop { 0% { opacity:0; transform:translate(-50%,-50%) scale(.45); } 60% { opacity:1; transform:translate(-50%,-50%) scale(1.08); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes bondDraw { to { stroke-dashoffset:0; opacity:1; } }
@keyframes bondOrderFade { 0% { opacity:0; transform:scale(0.8); } 100% { opacity:1; transform:scale(1); } }
@keyframes workspaceGlow { 0% { box-shadow:0 0 0 0 rgba(82,185,120,.38), inset 0 0 40px rgba(144,214,160,.18); } 50% { box-shadow:0 0 0 8px rgba(82,185,120,.18), inset 0 0 40px rgba(144,214,160,.38); } 100% { box-shadow:0 0 0 3px rgba(82,185,120,.35), inset 0 0 40px rgba(144,214,160,.32); } }
@keyframes workspaceShake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-5px); } 80% { transform:translateX(5px); } }
@keyframes completionIn { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:520px) { .app-shell { padding:22px 16px 35px; } h1 { font-size:25px; } h2 { font-size:23px; }.workspace { height:300px; }.formula-card { width:76px; font-size:20px; }.mission-panel { padding-left:19px; }.element-grid { gap:5px; }.element-choice { padding:9px 2px 7px; }.element-choice strong { font-size:17px; }.molecule-list { grid-template-columns:1fr; }.reaction-grid { grid-template-columns:1fr; }.reaction-controls .primary-button { width:100%; margin-left:0; }.atom { width:62px; height:62px; }.forces-grid { grid-template-columns:1fr; }.forces-detail .force-meta { flex-direction:column; gap:8px; } }
@media (min-width:700px) { .workspace { height:390px; }.app-shell { padding-top:42px; } }