:root {
  color-scheme: dark;
  --bg:#08090d;
  --bg-soft:#10131b;
  --panel:#121722;
  --panel-strong:#1a2230;
  --panel-glow:#222b3a;
  --ink:#f4f0e7;
  --muted:#aaa292;
  --line:#303846;
  --line-strong:#59677a;
  --accent:#f0b86b;
  --accent-2:#8fb7ff;
  --danger:#f27664;
  --shadow:0 24px 80px rgba(0,0,0,.38);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0;
  min-height:100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(240,184,107,.18), transparent 24rem),
    radial-gradient(circle at 92% 12%, rgba(143,183,255,.16), transparent 24rem),
    linear-gradient(180deg, #07080c 0%, #0c1119 48%, #08090d 100%);
  color:var(--ink);
}
.app-shell { width:min(1160px, calc(100% - 32px)); margin:0 auto; padding:18px 0 36px; }
.hidden { display:none !important; }
.top-bar {
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:10px 0 20px;
  background:linear-gradient(180deg, rgba(8,9,13,.96), rgba(8,9,13,.72) 74%, transparent);
  backdrop-filter: blur(14px);
}
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:950; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line-strong); background:linear-gradient(145deg, var(--panel-strong), #0d1118); color:var(--accent); font-size:.78rem; box-shadow:inset 0 0 18px rgba(240,184,107,.12); }
.top-actions,.status-row,.actions,.row-actions,.hero-actions,.journey-actions,.section-heading { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.section-heading { justify-content:space-between; gap:16px; align-items:flex-start; }
.status-pill { border:1px solid var(--line); padding:7px 10px; background:rgba(18,23,34,.78); color:var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.78rem; }
.landing-shell { display:grid; gap:18px; }
.landing-hero {
  min-height:72vh;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.72fr);
  align-items:center;
  gap:clamp(24px, 5vw, 64px);
  padding:clamp(28px, 6vw, 76px) 0;
}
.hero-copy-block { max-width:760px; }
.hero-panel { min-width:0; }
.phone-frame {
  max-width:360px;
  margin-left:auto;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(26,34,48,.96), rgba(10,13,20,.98));
  padding:16px;
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone-header { display:flex; gap:6px; margin-bottom:18px; }
.phone-header span { width:8px; height:8px; border-radius:999px; background:var(--line-strong); }
.phone-card,.phone-grid div { border:1px solid var(--line); background:rgba(255,255,255,.035); padding:14px; }
.phone-card.strong { border-color:rgba(240,184,107,.44); background:rgba(240,184,107,.08); }
.phone-card strong,.phone-card span,.phone-grid strong,.phone-grid span { display:block; }
.phone-card span,.phone-grid span { color:var(--muted); margin-top:4px; }
.phone-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
.hero-card, .card { background:linear-gradient(180deg, rgba(26,34,48,.94), rgba(18,23,34,.94)); border:1px solid var(--line); border-radius:18px; box-shadow:none; }
.login-card { max-width:520px; margin:48px auto 0; padding:24px; box-shadow:var(--shadow); }
.eyebrow { margin:0 0 10px; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); font-size:.74rem; font-weight:950; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:820px; font-size:clamp(2.7rem, 8.4vw, 7rem); line-height:.86; letter-spacing:-.075em; margin-bottom:18px; }
h2 { font-size:1.25rem; letter-spacing:-.02em; }
h3 { margin-bottom:8px; }
.hero-copy { max-width:690px; color:var(--muted); font-size:clamp(1.05rem, 2vw, 1.35rem); line-height:1.55; }
.muted { color:var(--muted); }
.principle-grid,.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card { padding:20px; min-width:0; }
.mini-card { background:rgba(18,23,34,.76); }
.mini-number { display:inline-flex; color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin-bottom:18px; }
.wide { grid-column:1 / -1; }
.welcome-panel { background:linear-gradient(135deg, rgba(240,184,107,.12), rgba(26,34,48,.92)); }
.journey-panel,.study-panel { display:grid; gap:16px; background:linear-gradient(180deg, rgba(26,34,48,.96), rgba(18,24,18,.96)); }
.stack { display:grid; gap:10px; margin-top:12px; }
.row { border:1px solid var(--line); padding:12px; background:rgba(255,255,255,.035); display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.row strong { display:block; }
.row span { color:var(--muted); }
.user-row button,.session-row button { padding:8px 10px; }
.feature-list { display:grid; gap:10px; padding:0; margin:12px 0 0; list-style:none; }
.feature-list li { border:1px solid var(--line); background:rgba(255,255,255,.035); padding:12px; }
.feature-list strong,.feature-list span { display:block; }
.feature-list span { color:var(--muted); }
.form-stack { display:grid; gap:10px; }
.one-time-code-form { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.compact-form { grid-template-columns:minmax(0,1fr) auto; align-items:end; }
.study-form { grid-template-columns:repeat(2,minmax(0,1fr)) auto; align-items:end; }
.wide-field { grid-column:1 / -1; }
.checkbox-row { display:flex; align-items:center; gap:8px; color:var(--ink); }
.checkbox-row input { width:auto; }
.split-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.quiz-answer { margin-top:8px; padding:10px; border:1px dashed var(--line-strong); background:rgba(255,255,255,.04); }
.status-callout { border:1px solid rgba(240,184,107,.42); background:rgba(240,184,107,.08); padding:12px; font-weight:900; }
.journey-current { display:grid; gap:10px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.metric-grid div { border:1px solid var(--line); background:rgba(255,255,255,.035); padding:12px; }
.metric-grid strong,.metric-grid span { display:block; }
.metric-grid span { color:var(--muted); font-size:.88rem; }
label { display:grid; gap:5px; font-weight:800; color:var(--muted); }
input,textarea,select,button { width:100%; border:1px solid var(--line-strong); border-radius:12px; padding:10px 12px; font:inherit; background:#0d1118; color:var(--ink); }
textarea { min-height:76px; resize:vertical; }
button { width:auto; cursor:pointer; border-color:rgba(240,184,107,.6); background:var(--accent); color:#171008; font-weight:950; }
button.secondary { border-color:var(--line-strong); background:rgba(255,255,255,.04); color:var(--ink); }
button.danger { border-color:rgba(242,118,100,.5); background:var(--danger); color:#170909; }
button:disabled { opacity:.48; cursor:not-allowed; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid rgba(213,179,255,.35); outline-offset:2px; }
.text-link { color:var(--ink); font-weight:900; text-underline-offset:4px; }
@media (max-width: 860px) {
  .top-bar { align-items:flex-start; }
  .top-actions { justify-content:flex-end; }
  .landing-hero { grid-template-columns:1fr; min-height:auto; padding:34px 0 20px; }
  .phone-frame { margin:0; max-width:none; }
  .principle-grid,.grid,.metric-grid,.split-grid { grid-template-columns:1fr; }
  .compact-form,.study-form { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .app-shell { width:min(100% - 20px, 1160px); padding:10px 0 24px; }
  .top-bar { position:static; flex-direction:row; align-items:center; }
  .brand { min-width:0; }
  .brand span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .top-actions { margin-left:auto; justify-content:flex-end; width:auto; flex:0 0 auto; }
  .top-actions .status-pill { display:none; }
  .top-actions #launch-app,.top-actions #logout { width:auto; white-space:nowrap; padding:9px 11px; }
  .hero-card,.card,.login-card { padding:16px; border-radius:16px; }
  h1 { font-size:clamp(2.45rem, 15vw, 4.25rem); }
  .hero-actions { display:grid; }
  .row { display:grid; }
  .row-actions { display:grid; width:100%; }
  .hero-actions button,.row-actions button,.journey-actions button,form button { width:100%; }
  .status-pill { width:100%; }
  .phone-grid { grid-template-columns:1fr; }
}
.mobile-only { display:none !important; }
.mobile-dashboard { gap:14px; }
.mobile-summary { margin:0; color:var(--muted); }
.modal-card { width:min(520px, calc(100% - 28px)); border:1px solid var(--line-strong); border-radius:22px; padding:20px; background:linear-gradient(180deg, rgba(26,34,48,.98), rgba(10,13,20,.98)); color:var(--ink); box-shadow:var(--shadow); }
.modal-card::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }
.modal-close-form { display:flex; justify-content:flex-end; margin:0 0 8px; }
.modal-close-form button { width:38px; height:38px; padding:0; }
.modal-heading { margin-bottom:16px; }
@media (max-width: 720px) {
  .desktop-panel { display:none !important; }
  .mobile-only { display:grid !important; }
  #workspace.grid { display:grid; grid-template-columns:1fr; gap:12px; }
  .journey-panel .compact-form,
  .study-panel .study-form { display:none; }
  .journey-panel,.study-panel { gap:12px; }
  .journey-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .journey-actions button { min-height:58px; }
  .mobile-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-list li { padding:10px; }
}

.mobile-bottom-nav { display:none; }
@media (max-width: 720px) {
  .app-shell { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:30;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    padding:0 0 env(safe-area-inset-bottom);
    border-top:1px solid var(--line-strong);
    border-right:0;
    border-bottom:0;
    border-left:0;
    border-radius:0;
    background:rgba(8,9,13,.96);
    box-shadow:0 -16px 40px rgba(0,0,0,.42);
    backdrop-filter:blur(18px);
  }
  .mobile-bottom-nav.hidden { display:none !important; }
  .mobile-bottom-nav button {
    min-height:64px;
    width:100%;
    display:grid;
    place-items:center;
    gap:2px;
    padding:8px 4px;
    border:0;
    border-left:1px solid var(--line);
    border-radius:0;
    background:transparent;
    color:var(--ink);
  }
  .mobile-bottom-nav button:first-child { border-left:0; }
  .mobile-bottom-nav button span { font-size:1.28rem; line-height:1; color:var(--accent); }
  .mobile-bottom-nav button small { font-size:.72rem; font-weight:900; color:var(--muted); }
}

.settings-block { display:grid; gap:10px; margin:0 0 18px; padding:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); }
.category-list { display:grid; gap:8px; }
.category-picker { display:flex; flex-wrap:wrap; gap:8px; }
.category-chip {
  width:auto;
  min-height:42px;
  border-color:var(--line-strong);
  background:rgba(255,255,255,.045);
  color:var(--ink);
}
.category-chip.selected { border-color:rgba(240,184,107,.75); background:rgba(240,184,107,.14); color:var(--accent); }
.category-chip.add-category { min-width:46px; font-size:1.2rem; }
@media (max-width: 720px) {
  .category-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .category-chip { width:100%; min-height:48px; }
}

.study-image-thumb, .quiz-image-preview {
  width:72px;
  height:72px;
  object-fit:cover;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
.quiz-image-preview { width:100%; max-height:220px; height:auto; object-fit:contain; }
@media (max-width: 720px) {
  .study-image-thumb { width:64px; height:64px; }
  .quiz-image-preview { max-height:260px; }
}

.answer-image-preview { margin-top:10px; border-style:dashed; }