/* Light "study companion" redesign, drafted by Gemini 3.1 Pro (via OpenRouter) and reviewed here. Loaded last. */
/* redesign.css */
:root {
  color-scheme: light;
  
  /* Core Colors */
  --bg-deep: #f5f4f0; /* Warm premium paper */
  --bg: #ffffff;
  --ink: #1e293b; /* Crisp dark slate */
  --muted: #64748b;
  --line: rgba(15, 23, 42, 0.1);
  --glass: rgba(255, 255, 255, 0.9);
  
  /* Overrides for existing tokens */
  --sheet-a: #ffffff;
  --sheet-b: #ffffff;
  --card: #ffffff;
  --card-ink: #1e293b;
  
  /* Restrained Accents */
  --violet: #6366f1;
  --gold-a: #f59e0b;
  --gold-b: #d97706;
  --gold-edge: #b45309;
  --gold-ink: #ffffff;
  --mint-a: #10b981;
  --mint-b: #059669;
  --mint-edge: #047857;
  --mint-ink: #ffffff;
  
  --danger: #ef4444;
  --danger-bg: #fef2f2;
  --ok: #10b981;
  --ok-bg: #ecfdf5;

  /* New Brand Tokens */
  --brand-a: #2563eb; /* Trustworthy blue */
  --brand-b: #1d4ed8;
  --brand-edge: #1e40af;
  --brand-ink: #ffffff;
  
  --scene: var(--bg-deep);
}

/* Base & Typography */
body {
  background: var(--bg-deep);
  color: var(--ink);
  line-height: 1.9;
}
h1, h2, h3, h4, b, strong {
  color: var(--ink);
}
.title {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--ink);
  filter: none;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.tagline, .home-fine, .tz-fine, .hint {
  color: var(--muted);
}
.muted {
  color: var(--muted);
}

/* Buttons */
.btn {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  min-height: 48px;
}
.btn:active:not(:disabled) {
  box-shadow: 0 0 0 rgba(0,0,0,0.04);
  transform: translateY(2px);
}
.btn.primary {
  background: var(--brand-a);
  color: var(--brand-ink);
  border: none;
  box-shadow: 0 4px 0 var(--brand-edge);
}
.btn.primary:active:not(:disabled) {
  box-shadow: 0 2px 0 var(--brand-edge);
  transform: translateY(2px);
}
.btn.ghost {
  background: transparent;
  color: var(--brand-a);
  border-color: transparent;
  box-shadow: none;
}
.btn.ghost:active:not(:disabled) {
  background: rgba(15, 23, 42, 0.04);
  transform: translateY(1px);
}
.icon-btn {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  min-height: 46px;
}
.icon-btn:active {
  background: #f8fafc;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transform: translateY(1px);
}
#btn-buy {
  background: var(--brand-a);
  color: var(--brand-ink);
  box-shadow: 0 4px 0 var(--brand-edge);
}
#btn-buy:active:not(:disabled) {
  box-shadow: 0 2px 0 var(--brand-edge);
}

/* Home */
.hero .logo svg {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}
.full-chip {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  box-shadow: none;
}
.home-card {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  border-inline-start: 4px solid var(--cc, var(--brand-a));
  min-height: 74px;
}

/* Overlays & Sheets */
.overlay {
  background: rgba(15, 23, 42, 0.4);
}
.sheet {
  background: var(--sheet-a);
  border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  color: var(--ink);
}
.sheet-head, .sheet-head h2, .tz-headtxt h2 {
  color: var(--ink);
}
.tz-headtxt small {
  color: var(--muted);
}

/* Full-page mobile sheets */
.tz-ov {
  padding: 0 !important;
  background: var(--bg-deep);
}
.tz-ov .sheet.tall {
  width: 100%;
  max-width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: var(--bg);
  padding: calc(var(--sat) + 12px) 16px calc(var(--sab) + 16px);
}
@media (min-width: 520px) {
  .tz-ov {
    padding: calc(var(--sat) + 24px) 24px calc(var(--sab) + 24px) !important;
    background: rgba(15, 23, 42, 0.4);
  }
  .tz-ov .sheet.tall {
    max-width: 480px;
    height: 92%;
    max-height: 840px;
    border-radius: 24px;
    border: 1px solid var(--line);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    margin: auto;
    padding: 24px;
  }
}

/* TZ Components */
.tz-stats { gap: 12px; }
.tz-stat {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.tz-stat b { color: var(--brand-a); }
.tz-card {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  border-inline-start: 4px solid var(--cc, var(--brand-a));
  color: var(--ink);
  min-height: 64px;
}
.tz-card.sub { background: #f8fafc; border-inline-start-width: 3px; }
.tz-card.hot { background: #fff1f2; border-inline-start-color: var(--danger); }
.tz-card.all { background: #f0f9ff; border-inline-start-color: var(--brand-a); }
.tz-card .go { color: var(--muted); }
.tz-sec { color: var(--muted); font-weight: 800; }
.tz-note {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: var(--ink);
}

/* Questions & Practice */
.tz-q {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  color: var(--ink);
}
.tz-qn { color: var(--brand-a); font-size: 13px; }
.tz-text { font-weight: 600; }
.tz-pass {
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--ink);
}

/* SVGs inside questions */
.tz-fig, .wsq svg, .tz-pass .pfig svg, .tz-key .in svg, .lp .fig {
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 4px;
}
.tz-q .tz-fig { background: #f8fafc !important; }

/* Options */
.tz-opt {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  min-height: 52px;
}
.tz-opt i {
  background: #f1f5f9;
  color: var(--muted);
}
.tz-opt.picked {
  border-color: var(--brand-a);
  background: #eff6ff;
}
.tz-opt.picked i {
  background: var(--brand-a);
  color: #ffffff;
}
.tz-opt.right {
  border-color: var(--ok);
  background: var(--ok-bg);
}
.tz-opt.right i {
  background: var(--ok);
  color: #ffffff;
}
.tz-opt.wrong {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.tz-opt.wrong i {
  background: var(--danger);
  color: #ffffff;
}

/* Explanations */
.tz-exp {
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--ink);
}
.tz-exp b.ok { color: var(--ok); }
.tz-exp b.no { color: var(--danger); }

/* Exam Bar & Grid */
.tz-exambar {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  color: var(--ink);
}
.tz-exambar .clock { color: var(--ink); }
.tz-exambar .clock.low { color: var(--danger); font-weight: 900; }
.tz-grid button {
  background: #f1f5f9;
  border: 1px solid var(--line);
  color: var(--muted);
  min-height: 44px;
  height: auto;
}
.tz-grid button.on {
  background: var(--brand-a);
  color: #ffffff;
  border-color: var(--brand-a);
}
.tz-grid button.cur {
  outline: 2px solid var(--brand-a);
  outline-offset: -2px;
  background: #ffffff;
  color: var(--brand-a);
}

/* Score & Report */
.tz-score {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  color: var(--ink);
}
.tz-score .pct { color: var(--brand-a); }
.tz-per .nm, .tz-per b { color: var(--ink); }
.tz-per .bar { background: #e2e8f0; }
.tz-per .bar i { background: var(--cc, var(--brand-a)); }

/* Answer Key */
.tz-key {
  background: #ffffff;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--muted);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.tz-key.right { border-inline-start-color: var(--ok); }
.tz-key.wrong { border-inline-start-color: var(--danger); }
.tz-key .in {
  background: #ffffff;
  border-top: 1px solid var(--line);
}
.tz-key .in .tz-pass { background: #f8fafc; }
.tz-key .opt.right { background: var(--ok-bg); color: #065f46; }
.tz-key .opt.wrong { background: var(--danger-bg); color: #991b1b; }

/* Worksheet List & PDF */
.ws-box {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  color: var(--ink);
}
.ws-box h3 { color: var(--ink); }
.ws-box p { color: var(--muted); }
.ws-box .tz-card { background: #f8fafc; }
.pdf-ov { background: #f1f5f9; }
.pdf-bar {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.pdf-bar .icon-btn { background: transparent; border: none; box-shadow: none; }
.pdf-msg { color: var(--muted); }

/* Worksheet Content (wsq) */
.wsq b.q { color: var(--ink); }
.wsq table.code th, .wsq table.code td,
.wsq table.grid td, .wsq table.grid th,
.wsq table.faces td {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
}
.wsq .pair, .wsq .sign {
  border-color: var(--line);
  background: #f8fafc;
}
.lock-note {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

/* Guide */
.guide { color: var(--ink); }
.guide h4 { color: var(--brand-a); }
.guide .tip {
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--ink);
}
.gtable th { background: #f1f5f9; border: 1px solid var(--line); color: var(--ink); }
.gtable td { border: 1px solid var(--line); }
.g-upd { color: var(--muted); }

/* Purchase & About */
#ov-buy { padding: calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px); }
.buy-sheet {
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.buy-sheet h2 { color: var(--ink); }
.buy-sheet .muted { color: var(--muted); }
.buy-list li {
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--ink);
}
.about b, .about .maker { color: var(--ink); }
.about p { color: var(--muted); }
.about svg { filter: none; }

/* Segmented Control */
.seg {
  background: #f1f5f9;
  border: 1px solid var(--line);
}
.seg button { color: var(--muted); min-height: 34px; }
.seg button[aria-pressed="true"] {
  background: #ffffff;
  color: var(--brand-a);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Toast */
#toast {
  background: #1e293b;
  color: #ffffff;
  border: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

/* Lessons (Textbook style) */
.lp-toc-top {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  color: var(--ink);
}
.lp-bar { background: #e2e8f0; }
.lp-bar i { background: var(--brand-a); }
.lp-chap {
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  border: 1px solid var(--line);
}
.lp-chap-h {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}
.lp-chap-n { background: var(--cc, var(--brand-a)); }
.lp-chap-h b { color: var(--ink); }
.lp-chap-h small, .lp-chap-p { color: var(--muted); }
.lp-row { border-top: 1px solid var(--line); min-height: 56px; }
.lp-row:active { background: #f1f5f9; }
.lp-row b { color: var(--ink); }
.lp-row small { color: var(--muted); }
.lp-row-n { color: var(--cc, var(--brand-a)); }
.lp-row-s { color: var(--ok); }
.lp-row.locked .lp-row-s { color: var(--muted); }

.lp {
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  border: 1px solid var(--line);
  color: var(--ink);
}
.lp-head {
  background: #f8fafc;
  border-top: 4px solid var(--cc, var(--brand-a));
  border-bottom: 1px solid var(--line);
}
.lp-kicker {
  background: var(--cc, var(--brand-a));
  color: #ffffff;
}
.lp-meta { color: var(--muted); }
.lp-goal {
  background: #ffffff;
  border: 1px solid var(--line);
}
.lp-goal b { color: var(--muted); }
.lp-goal p { color: var(--ink); }
.lp-sec-h, .lp b { color: var(--ink); }
.lp-sec-n { background: var(--cc, var(--brand-a)); }
.lp .ex {
  background: #f8fafc;
  border: 1px solid var(--line);
  background-image: none;
}
.lp .ex::before { color: var(--brand-a); }
.lp .tip {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brand-a);
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.lp .tip::before { color: var(--brand-a); }
.lp .tip.trap {
  background: #fff1f2;
  border-inline-start-color: var(--danger);
}
.lp .tip.trap::before { color: var(--danger); }
.lp-more {
  background: #f8fafc;
  border: 1px dashed var(--line);
}
.lp-more p { color: var(--muted); }
.lp-more .btn {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--brand-a);
}
.lp-next {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink);
}

/* Locked items stay quiet: a grey lock, no orange signal (reviewed tweak) */
.tz-card.locked { border-inline-start-color: var(--line); }
.tz-card.locked .emo { filter: grayscale(1); opacity: .4; font-size: 20px; }
.tz-card.locked .go { color: var(--muted); }
#btn-buy { white-space: normal; height: auto; min-height: 60px; padding: 10px 16px; font-size: 18px; line-height: 1.6; min-width: 0; }