/* =============================================================================
   LabSimplifier — "lab notebook" theme. Same palette (laser red, indigo, navy);
   Space Grotesk for text, Space Mono for numbers / formulas / labels.
   Loaded last so it can restyle style.css + lsx.css without touching their logic.
   ============================================================================= */
:root {
  --font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-math: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius: 12px;
  --radius-btn: 10px;
  --edge: #0f172a;           /* ink outline */
  --off: #0f172a;            /* hard offset shadow */
  --grid: rgba(79, 70, 229, .07);
  --paper: #f4f5fa;
}
[data-theme="dark"] {
  --edge: #3b4a7a;
  --off: #04070f;
  --grid: rgba(148, 163, 184, .06);
}

/* ---------- page: graph-paper desk ---------- */
html, body { font-family: var(--font-sans); letter-spacing: -0.005em; }
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
}
::selection { background: var(--acc); color: #fff; }
h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
button, input, select, textarea { font-family: inherit; }

/* ---------- numbers, formulas, labels = Space Mono ---------- */
.formula-main, .formula-sub, .math-font, .lsx-sw, .lsx-stat b, .control-val-badge, .readings-counter,
.obs-table td, .obs-table input, .obs-input, .lsx-in, .symbols-table td:first-child, .result-val-row strong,
.step-label, .viva-badge, .quiz-q-num, .reading-pill, .procedure-step-badge, .lsx-tag, .ls-price, .adm-stat b,
table.adm td, table.adm th, .progress-fill + *, code, kbd {
  font-family: var(--font-mono) !important;
}
.formula-main, .formula-sub { letter-spacing: -0.02em; }
.obs-table td, .obs-table th { font-variant-numeric: tabular-nums; }
.obs-table th, .symbols-table th, table.adm th { font-family: var(--font-mono) !important; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }

/* ---------- cards: ink outline + hard offset shadow (printed-sheet feel) ---------- */
.card, .bento-card, .lsx-panel, .lsx-cvcard, .quiz-card, .adm-card, .adm-stat, .result-summary-card, .calc-breakdown-card, .lsx-calc, .ls-modal-card, .lsx-chipsbox, .apparatus-card {
  border: 1.5px solid var(--edge) !important;
  border-radius: var(--radius) !important;
  box-shadow: 4px 4px 0 var(--off) !important;
  backdrop-filter: none !important;
}
.card-hover:hover, .bento-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--off) !important; }
.card, .bento-card { transition: transform .15s ease, box-shadow .15s ease; }
.bento-for-you { box-shadow: 5px 5px 0 var(--acc) !important; }
.bento-for-you:hover { box-shadow: 7px 7px 0 var(--acc) !important; }
.apparatus-card, .lsx-chipsbox, .lsx-calc { box-shadow: 3px 3px 0 var(--off) !important; }
.lsx-cvcard { box-shadow: 4px 4px 0 var(--acc2) !important; }
.lsx-cvhead, .sim-canvas-header { font-family: var(--font-mono); font-size: .7rem !important; text-transform: uppercase; letter-spacing: .06em; }
.sim-fullscreen { background-color: var(--bg); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px; }
.sim-top-nav, .exp-footer-nav, nav#bottom-nav, #bottom-nav { border-radius: 0 !important; }

/* ---------- buttons: chunky, pressable ---------- */
.btn, .chip, .segmented-btn, .viva-pill { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; }
.btn { border: 2px solid var(--edge); border-radius: var(--radius-btn); box-shadow: 3px 3px 0 var(--off); transition: transform .1s ease, box-shadow .1s ease; }
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--off); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--off); }
.btn:disabled { box-shadow: none; }
.btn-primary { background: var(--acc); color: #fff; border-color: var(--edge); }
.btn-indigo { background: var(--acc2); color: #fff; border-color: var(--edge); }
.btn-outline { background: var(--card); color: var(--ink); }
.btn-icon { box-shadow: 2px 2px 0 var(--off); border: 2px solid var(--edge); }
.chip { border: 1.5px solid var(--edge); border-radius: 8px; box-shadow: 2px 2px 0 var(--off); }
.chip.active { background: var(--acc); color: #fff; }
.segmented-control { border: 1.5px solid var(--edge); border-radius: 10px; }

/* ---------- tags: stamped lab labels ---------- */
.badge { font-family: var(--font-mono) !important; border-radius: 4px !important; font-size: .66rem !important; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; border: 1.5px solid currentColor; background: transparent !important; padding: 3px 8px !important; }
.badge-acc { color: var(--acc) !important; }
.badge-indigo { color: var(--acc2) !important; }
[data-theme="dark"] .badge-indigo { color: #8b86ff !important; }
.badge-ready { color: var(--ok) !important; }
.badge-soon { color: #d97706 !important; }

/* ---------- inputs ---------- */
input.form-control, .form-control, textarea, select, .lsx-in, .obs-input, .search-input-box, .adm-in {
  border: 1.5px solid var(--edge) !important; border-radius: 10px !important;
}
.search-input-box { box-shadow: 3px 3px 0 var(--off); background: var(--card); }
.search-input { font-family: var(--font-sans); }
input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible, button:focus-visible { outline: 3px solid var(--acc2); outline-offset: 2px; }

/* ---------- home: bigger, more editorial greeting ---------- */
.greeting-section { position: relative; padding-top: 6px; }
.greeting-section::before { content: "LAB BENCH · PRACTICAL PREP"; display: block; font: 700 .68rem var(--font-mono); letter-spacing: .18em; color: var(--acc); margin-bottom: 6px; }
.greeting-text { font-size: clamp(2rem, 7.5vw, 3.1rem) !important; font-weight: 700 !important; letter-spacing: -0.04em !important; line-height: 1.02 !important; }
.greeting-subtitle { font-family: var(--font-mono); font-size: .8rem !important; letter-spacing: -0.01em; color: var(--mut); max-width: 46ch; }
.bento-title { letter-spacing: -0.03em; }

/* ---------- brand ---------- */
.brand-logo-icon { border-radius: 10px !important; border: 2px solid var(--edge) !important; box-shadow: 3px 3px 0 var(--off) !important; font-family: var(--font-mono); }
.brand-name { font-family: var(--font-sans); font-size: 1.25rem; letter-spacing: -0.04em; }

/* ---------- bottom navigation: tab strip with a thick active bar ---------- */
#bottom-nav { border-top: 2px solid var(--edge) !important; background: var(--card) !important; backdrop-filter: none !important; }
#bottom-nav button { position: relative; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .6rem; }
#bottom-nav .nav-icon { display: grid; place-items: center; font-size: 0; }
#bottom-nav .nav-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#bottom-nav button.active { color: var(--acc); }
#bottom-nav button.active::before { content: ""; position: absolute; top: -2px; left: 18%; right: 18%; height: 4px; background: var(--acc); border-radius: 0 0 4px 4px; }

/* ---------- experiment chrome ---------- */
.exp-header h2 { font-size: 1.3rem; }
.step-label { letter-spacing: .12em; font-size: .68rem !important; }
.step-dot { height: 8px; border-radius: 2px; border: 1.5px solid var(--edge); background: transparent; }
.step-dot.active { background: var(--acc); }
.step-dot.done { background: var(--ok); }
.exp-footer-nav { border: 2px solid var(--edge) !important; box-shadow: 4px 4px 0 var(--off) !important; border-radius: var(--radius) !important; }
.procedure-banner { border: 2px solid var(--acc2); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--acc2); }
.procedure-text { font-weight: 600; }
.formula-hero { border: 2px dashed var(--edge); border-radius: var(--radius); background: var(--card-subtle); }
.formula-main { font-size: clamp(1.15rem, 4.5vw, 1.7rem); font-weight: 700; color: var(--acc); }
.flip-card-front, .flip-card-back { border: 2px solid var(--edge); border-radius: 14px; box-shadow: 5px 5px 0 var(--off); }
.viva-q-text { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; }
.quiz-option { border: 1.5px solid var(--edge); border-radius: 10px; font-family: var(--font-sans); }
.celebrate-card { border: 2px solid var(--edge); border-radius: 16px; box-shadow: 6px 6px 0 var(--acc); }
.statement-box { border-radius: 10px; border: 1.5px dashed var(--ok); }
.lsx-help { border: 1.5px solid var(--edge); border-left: 6px solid var(--acc2); border-radius: 10px; }
.lsx-setup-wrap svg { border: 1.5px solid var(--edge); border-radius: 12px; box-shadow: 4px 4px 0 var(--off); }

/* ---------- paywall + toasts ---------- */
.ls-opt { border: 2px solid var(--edge); border-radius: 12px; box-shadow: 3px 3px 0 var(--off); }
.ls-opt:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--acc); }
.ls-bundle { border: 2px solid var(--edge); box-shadow: 4px 4px 0 var(--acc); border-radius: 12px; }
.toast { border: 1.5px solid var(--edge); border-radius: 10px; font-family: var(--font-mono); font-size: .8rem; box-shadow: 3px 3px 0 var(--off); }

/* ---------- motion: cards slide up in sequence ---------- */
@keyframes ls-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#view > *, .bento-grid > .card, .exp-header, #lsx-host > .card { animation: ls-rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.bento-grid > :nth-child(2) { animation-delay: .06s; } .bento-grid > :nth-child(3) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--acc) transparent; }
@media (max-width: 560px) { .card, .bento-card { box-shadow: 3px 3px 0 var(--off) !important; } .greeting-section::before { font-size: .6rem; } }

/* ---------- landing page ---------- */
body.landing-mode { padding-bottom: 0; }
body.landing-mode #app { max-width: 1040px; padding-bottom: 32px; }
.ld-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0 18px; }
.ld-top-r { display: flex; gap: 10px; align-items: center; }
.ld-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; padding: 18px 0 30px; }
.ld-kicker { display: inline-block; font: 700 .7rem var(--font-mono); letter-spacing: .16em; color: var(--acc); margin-bottom: 12px; }
.ld-hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); letter-spacing: -0.045em; line-height: 1.02; margin-bottom: 16px; }
.ld-hero h1 em { font-style: normal; color: var(--acc); background: linear-gradient(transparent 62%, rgba(79,70,229,.28) 62%); padding: 0 2px; }
.ld-hero p { font-size: 1.05rem; color: var(--mut); max-width: 52ch; margin-bottom: 22px; }
.ld-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ld-start { font-size: 1.15rem; padding: 14px 34px; min-height: 52px; }
.ld-note { font: 400 .78rem var(--font-mono); color: var(--mut); }
.ld-hero-art svg { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 6px 6px 0 var(--acc2); }
.ld-art-bg { fill: #070b14; stroke: var(--edge); stroke-width: 3; }
.ld-beam { stroke: #ff4d4d; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px #ff4d4d); }
.ld-ray { stroke: rgba(255, 77, 77, .75); stroke-width: 1.6; fill: none; }
.ld-dev { fill: #8d96aa; stroke: #475569; } .ld-grat { fill: rgba(190, 225, 255, .55); }
.ld-spot { fill: #ff4d4d; filter: drop-shadow(0 0 8px #ff4d4d); } .ld-spot.s2 { opacity: .8; } .ld-spot.s3 { opacity: .55; }
.ld-lbl { fill: #94a3b8; font: 700 10px var(--font-mono); letter-spacing: .08em; }
.ld-sec { padding: 22px 0; }
.ld-sec h2 { font-size: clamp(1.4rem, 4vw, 2rem); margin-bottom: 16px; }
.ld-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ld-grid .card p { color: var(--mut); font-size: .92rem; }
.ld-grid .card h3 { margin: 8px 0; font-size: 1.05rem; }
.ld-ic { font: 700 .75rem var(--font-mono); color: #fff; background: var(--acc2); padding: 3px 8px; border-radius: 4px; }
.ld-exps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ld-exp { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--card); border: 1.5px solid var(--edge); border-radius: 10px; box-shadow: 3px 3px 0 var(--off); flex-wrap: wrap; }
.ld-code { font: 700 .68rem var(--font-mono); color: var(--acc); letter-spacing: .08em; }
.ld-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 8px; }
.ld-prices div { border: 1.5px dashed var(--edge); border-radius: 10px; padding: 12px; text-align: center; }
.ld-prices b { display: block; font: 700 1.8rem var(--font-mono); color: var(--acc); }
.ld-prices span { font-size: .82rem; color: var(--mut); }
.ld-final { text-align: center; padding: 34px 0 10px; }
.ld-final h2 { margin-bottom: 16px; font-size: clamp(1.5rem, 5vw, 2.2rem); }
.ld-foot { text-align: center; font: 400 .72rem var(--font-mono); color: var(--mut); padding: 24px 0 6px; }
@media (max-width: 760px) { .ld-hero { grid-template-columns: 1fr; } .ld-hero-art { order: -1; } .ld-start { width: 100%; } }

.dev-by{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font:400 .78rem "Space Mono",monospace;color:var(--mut,#475569)}
.dev-by img{height:22px;width:auto;display:block}
.dev-heart{color:#e5383b}
[data-theme="dark"] .dev-by img{filter:invert(1)}
@media (prefers-color-scheme:dark){.legal-page .dev-by img{filter:invert(1)}}