/* ============================================================================
   app-shell.css — the "new look" chrome for the fully-wired app (app-new.html).
   Loaded AFTER styles.css, so equal-specificity chrome rules win here.
   RULES OF THE ROAD:
   - Never touch .sheet / .sheet-* / .q-* / worksheet internals — styles.css owns
     those and they are inlined into the PDF. This file re-skins CHROME only.
   - Do NOT redefine styles.css :root tokens (--ink/--accent/--accent-2/--line…);
     the worksheet uses them. All new colors live under --ui-*.
   - Honor the app.js state hooks: body.drawer-open / .tools-open / .browse-open,
     html[data-theme=dark], .sidebar[data-sv], #pro-bar.is-locked,
     #sheet-*.active, #tab-*.is-active.
   ============================================================================ */

:root {
  /* Calm Notebook theme (V3): warm cream paper + subtle grid, near-white panels,
     deep-green primary, muted earthy badge accents. Chrome only — the worksheet
     stays print-clean (Arial/white) via styles.css. */
  --ui-bg: #f5f1e8;          /* cream paper */
  --ui-grid: #e9e0d1;        /* faint notebook grid line */
  --ui-surface: #fffdf8;     /* warm near-white card */
  --ui-ink: #233044;
  --ui-muted: #6f776f;
  --ui-soft: #efe7d8;        /* warm soft fill (segmented "on") */
  --ui-line: #ded4c4;        /* warm border */
  --ui-line-strong: #cdbba0;
  --ui-blue: #3f8f72;        /* PRIMARY is green in this theme (buttons/active/hover) */
  --ui-blue-soft: #e8f5ef;   /* green tint for active/selected fills */
  --ui-green: #28705a;       /* Visual / Problem badge (green) */
  --ui-green-soft: #e8f5ef;
  --ui-orange: #a05332;      /* Puzzle badge (clay) */
  --ui-orange-soft: #faede6;
  --ui-purple: #86610b;      /* Strategy badge + Pro (mustard/gold) */
  --ui-purple-soft: #fff4cf;
  --ui-shadow: 0 16px 36px rgba(53, 44, 31, .11);
  --ui-shadow-sm: 0 8px 20px rgba(53, 44, 31, .07);
  /* Calm typography: a soft weight scale (mostly 400/500, 600 for section titles / active /
     primary CTAs). Inter carries all four weights; Georgia stays ONLY on the center title. */
  --font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --ui-headerh: 64px;
  --ui-toolsw: 300px;
  --ui-railw: 284px;
  --ui-paperw: 8.5in;   /* on-screen paper = the TRUE 8.5in page so content lays out exactly like the PDF (header, number-lines, columns) */
  --ui-paperzoom: .82;  /* then uniformly scale it down to fit the stage — no reflow, so nothing overflows/stretches vs the print */
}

/* ---------- Global ground ---------- */
body.ui-new {
  color: var(--ui-ink);
  background-color: var(--ui-bg);
  background-image: linear-gradient(var(--ui-grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--ui-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-regular);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
/* Native controls default to the UA font (Arial) — make the CHROME's buttons/inputs inherit
   the UI font so the app reads as one typeface. The worksheet has no controls, so it's untouched. */
.ui-new button, .ui-new input, .ui-new select, .ui-new textarea { font-family: inherit; }

/* ---------- Top bar ---------- */
.ui-new .app-header {
  background: var(--ui-surface);
  color: var(--ui-ink);
  border-bottom: 1px solid var(--ui-line);
  padding: 0 20px;
  height: var(--ui-headerh);
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.ui-new .app-brand { gap: 12px; }
.ui-new .app-brand .brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto;
}
.ui-new .app-brand .brand-logo img { width: 100%; height: 100%; display: block; }
.ui-new .app-header h1 { font-family: 'Nunito Sans', 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ui-ink); }  /* brand */
.ui-new .tagline { display: none; }        /* keep the bar compact like app2 */
.ui-new #theme-toggle { display: none; }   /* dark mode deferred — hide the toggle (full dark theme is a later task) */

/* header buttons → app2 pills */
.ui-new .app-header .btn {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  color: #344054;
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: var(--weight-medium);
  font-size: 13.5px;
  height: 40px;
  cursor: pointer;
  box-shadow: none;
  align-self: center;   /* base .btn sets flex-start, which top-anchored the header buttons */
}
.ui-new .app-header .btn:hover { border-color: var(--ui-line-strong); background: var(--ui-surface); }
.ui-new .app-header .btn-primary,
.ui-new .app-header #btn-account {
  background: var(--ui-blue); border-color: var(--ui-blue); color: #fff;
  box-shadow: 0 8px 18px rgba(47, 111, 90, .2);
}
.ui-new #nav-toggle { }                    /* left topics toggle (mobile) — keep */
/* Brand claims the free space on its right, pushing the whole button cluster to the right edge
   (above the Worksheet Tools drawer). In DOM order Tools comes after My Sheets, so it lands to
   the right of My Sheets. */
.ui-new .app-header .app-brand { margin-right: auto; }
.ui-new .account-area { margin-left: 0; }
.ui-new .acct-link {
  color: #344054; background: var(--ui-surface); border: 1px solid var(--ui-line);
  font-weight: var(--weight-medium); padding: 9px 12px; border-radius: 12px;
}
.ui-new .acct-link:hover { background: var(--ui-surface); border-color: var(--ui-line-strong); }

/* ---------- Layout: persistent left rail | main | right tools panel ---------- */
.ui-new .content { padding: 20px 18px 60px; min-width: 0; }
.ui-new .ws-body { display: block; }         /* stack the topic header over the worksheet */

/* DESKTOP: styles.css turns .sidebar into an off-canvas drawer even here; override
   that so the catalog is a persistent rail (app2 look). Mobile keeps the drawer. */
@media (min-width: 981px) {
  .ui-new .layout { grid-template-columns: var(--ui-railw) minmax(0, 1fr); gap: 0; }
  .ui-new .sidebar {
    position: sticky; top: var(--ui-headerh); transform: none;
    width: auto; max-width: none; z-index: 1;
    height: calc(100vh - var(--ui-headerh));
    background: rgba(255, 255, 255, .76);
    border-right: 1px solid var(--ui-line);
  }
  .ui-new #nav-toggle { display: none; }      /* rail is always shown on desktop */
}
/* Reserve room for the tools side-panel down to tablet widths so the worksheet
   never slides under it (below this it becomes a clean overlay). */
@media (min-width: 700px) {
  .ui-new.tools-open #workspace { padding-right: calc(var(--ui-toolsw) + 12px); }
}

/* Right tools panel — fixed; slides away when body loses .tools-open. */
.ui-new .tools-drawer {
  position: fixed; top: var(--ui-headerh); right: 0;
  width: var(--ui-toolsw); height: calc(100vh - var(--ui-headerh));
  background: var(--ui-surface);
  border-left: 1px solid var(--ui-line);
  overflow: auto; padding: 0;   /* head sits flush under the top bar; content padded via .ws-controls */
  transform: translateX(100%); transition: transform .22s ease;
  z-index: 30; box-shadow: none;
}
.ui-new.tools-open .tools-drawer { transform: translateX(0); }
.ui-new .tools-drawer-head { display: flex; align-items: center; justify-content: center; margin: 0; background: var(--ui-surface); border-bottom-color: var(--ui-line); }
/* Title centered; the close (✕) pins to the right without pushing the title off-center. */
.ui-new .tools-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.ui-new .tools-drawer .ws-controls { padding: 16px; }   /* content pad (drawer padding is 0 so the head is flush up top) */
/* Print / Save moved into the tools panel — a prominent action row at the top. */
.ui-new .tools-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ui-new .tools-actions .btn { align-self: auto; height: 42px; border-radius: 12px; font-weight: var(--weight-medium); }
.ui-new .tools-actions #btn-download { flex: 1 1 auto; }
.ui-new .tools-actions #btn-save { flex: 0 0 auto; }
.ui-new .tools-actions .dl-hint { flex: 1 1 100%; color: var(--ui-muted); font-size: 12px; margin: 0; }
.ui-new .tools-drawer-title { font-size: 17px; font-weight: var(--weight-semibold); color: var(--ui-ink); letter-spacing: 0; text-transform: none; }
.ui-new .tools-close {
  border: 1px solid var(--ui-line); background: var(--ui-surface); color: #667085;
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 14px;
}

/* ---------- Topic header (topic-side) → app2 "generator head" card ---------- */
.ui-new .topic-side {
  position: static; max-height: none; overflow: visible;
  width: auto; margin: 0 0 16px; align-self: auto;
}
.ui-new .topic-header.topic-side {
  border-left: 0; background: var(--ui-surface); border: 1px solid var(--ui-line);
  border-radius: 24px; padding: 20px 22px; box-shadow: var(--ui-shadow);
}
.ui-new .gen-crumb { font-size: 13px; color: var(--ui-muted); font-weight: var(--weight-medium); margin-bottom: 10px; }
.ui-new .topic-side .topic-heading {
  position: static; margin: 0; padding: 0; background: none; border: 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ui-new .topic-side .topic-heading h2 {
  /* Middle-box topic title. Short Stack comes from the Google font link in app.html, NOT from
     styles.css: that file is inlined into every PDF, so a UI-only face embedded there would add its
     bytes to every worksheet. One weight only, so 700 is synthetic bold. */
  font-family: 'Short Stack', 'Rokkitt', Georgia, serif;
  font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
  color: var(--ui-ink); margin: 0;
}
.ui-new #topic-grade { display: none; }        /* grade shown in the crumb + meta instead */
.ui-new .gen-desc { margin: 8px 0 0; color: var(--ui-muted); max-width: 760px; font-size: 14.5px; line-height: 1.5; }
.ui-new .gen-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ui-new .gm-badge { display: inline-flex; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: var(--weight-medium); white-space: nowrap; }
.ui-new .gm-badge.b-blue { background: var(--ui-blue-soft); color: #2f6f5a; }
.ui-new .gm-badge.b-green { background: var(--ui-green-soft); color: var(--ui-green); }
.ui-new .gm-badge.b-purple { background: var(--ui-purple-soft); color: var(--ui-purple); }
.ui-new .gm-badge.b-orange { background: var(--ui-orange-soft); color: var(--ui-orange); }
.ui-new .gm-badge.b-gray { background: #f1f5f9; color: #475569; }
/* Common Core code tag: neutral, monospace, so it reads as a standard code not a label. */
.ui-new .gm-badge.gm-ccss { background: #eef1f6; color: #55606f; font-family: 'DejaVu Sans Mono', ui-monospace, Menlo, monospace; font-weight: 600; letter-spacing: .01em; }
.ui-new .gen-example { margin-top: 14px; }
/* Warm the on-screen "Example" box (styles.css paints it blue for the PDF; this chrome-only
   override does not touch the printed sheet). */
.ui-new .gen-example .sheet-example { background: #f6f1e7; border-color: var(--ui-line); color: #5d5345; }
/* Focus chips (variant picker) → app2 mode-strip below the example. styles.css hides
   #topic-variants in .topic-side; surface it for the CLEAN concepts app.js allows. */
.ui-new .topic-side #topic-variants:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 16px; }
.ui-new .topic-side .variant-label { color: var(--ui-muted); font-weight: var(--weight-medium); font-size: 12.5px; margin-right: 2px; }
.ui-new .topic-side .variant-chip { border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: 13px; padding: 10px 13px; font-weight: var(--weight-medium); color: #344054; cursor: pointer; font-size: 13px; }
.ui-new .topic-side .variant-chip:hover { border-color: var(--ui-blue); color: var(--ui-blue); }
.ui-new .topic-side .variant-chip.is-active { background: #2f6f5a; border-color: #2f6f5a; color: #fff; font-weight: var(--weight-semibold); }
/* the rail now handles topic selection, so hide the old in-header lesson/mode nav.
   #topic-map is NOT in this list: it was swept in here while it was dead code, but it is the
   learning path (what to master first / what you are ready for), not lesson nav. The rail cannot
   do that job -- it lists what exists, it does not say what leads where. */
.ui-new .topic-side #topic-row,
.ui-new .topic-side #mode-legend,
.ui-new .topic-side #concept-modes,
.ui-new .topic-side #topic-modes,
.ui-new .topic-side #topic-subs { display: none !important; }

/* ---------- Learning path (prerequisite web) in the generator head ---------- */
.ui-new .topic-side #topic-map {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--ui-line);
}
.ui-new .topic-side .cmap-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border: 1px solid var(--ui-line); border-radius: 999px;
  background: var(--ui-surface); font: inherit; font-size: 13px; font-weight: var(--weight-medium);
  color: var(--ui-ink); cursor: pointer;
}
.ui-new .topic-side .cmap-chip:hover { border-color: var(--ui-blue); color: var(--ui-blue); }
/* an unbuilt neighbour: readable, but plainly not a destination */
.ui-new .topic-side .cmap-chip.is-ghost { cursor: default; opacity: .5; background: #f6f7fb; }
.ui-new .topic-side .cmap-chip.is-ghost:hover { border-color: var(--ui-line); color: var(--ui-ink); }

/* ---------- Preview toolbar above the worksheet (tabs + New version + Print) ---------- */
/* Preview toolbar → a bar/panel like the mock: tabs on the left, zoom + New version on the right. */
.ui-new .preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 16px;
  box-shadow: var(--ui-shadow-sm); padding: 10px 14px; }
.ui-new .preview-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Zoom stepper (segmented pill) */
.ui-new .zoom-ctrl { display: inline-flex; align-items: stretch; border: 1px solid var(--ui-line); border-radius: 12px; overflow: hidden; background: var(--ui-surface); }
.ui-new .zoom-btn { border: 0; background: transparent; padding: 8px 12px; font-weight: var(--weight-medium); font-size: 15px; line-height: 1; color: var(--ui-ink); cursor: pointer; }
.ui-new .zoom-btn:hover { background: var(--ui-soft); }
.ui-new .zoom-label { min-width: 50px; font-size: 12.5px; border-left: 1px solid var(--ui-line); border-right: 1px solid var(--ui-line); font-variant-numeric: tabular-nums; }
.ui-new .preview-toolbar .view-tabs { margin: 0; }
.ui-new .preview-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-new .preview-actions .dl-hint { color: var(--ui-muted); font-size: 12px; margin-right: 2px; }
.ui-new .preview-actions .btn { padding: 9px 13px; }

/* ---------- Worksheet → grey paper-stage with a shadowed page (app2 preview) ---------- */
.ui-new .sheets-area {
  background: rgba(255, 253, 248, .6); border: 1px solid var(--ui-line); border-radius: 20px;
  padding: 18px;
  overflow-x: auto;                         /* the working scrollbar for when a magnified/zoomed page exceeds the stage */
  justify-content: center;
  justify-content: safe center;             /* center when it fits, but fall back to left-aligned when it overflows so the left edge stays visible */
}
.ui-new .ws-output { min-width: 0; }
/* border-box folds the 0.5in padding into the width (matches the real 8.5in page
   = 7.5in content + margins), so the paper sizes predictably. */
.ui-new .sheet, .ui-new .ws-page { box-sizing: border-box; }
/* Desktop: pin the paper to a FIXED width. A % width would reflow (shrink) under
   browser zoom-in, blowing up the relative font size; a fixed px width instead
   lets zoom MAGNIFY the whole page (like the mock's iframe) and the stage's
   overflow-x scrollbar handles the excess. It's sized to fit the stage at 100%. */
@media (min-width: 700px) {
  .ui-new .ws-output .sheet.active,
  .ui-new .ws-output .ws-page { width: var(--ui-paperw); max-width: none; }
  /* ...and KEEP it. The paper is a flex item (.sheets-area is display:flex) and a flex item
     shrinks below its width when the stage is narrower -- max-width:none does not stop that,
     only flex-shrink does. At zoom .82 the page fits the stage and nothing shrinks, but
     MW.paginateSheet must neutralise the zoom to measure (rects come back scaled), and at
     zoom 1 the 8.5in page no longer fit: flex squeezed it to 770px and the packer measured
     wrapping, item heights and column fit on a page 46px narrower than the one that prints.
     That is how the preview came to hold two more questions per page than the PDF. */
  .ui-new .ws-output .sheet.active,
  .ui-new .ws-output .sheet.active.sheet--paged,
  .ui-new .ws-output .ws-page { flex-shrink: 0; }
  /* scale the actual paper (a plain sheet, or each .ws-page) — NOT the .sheet--paged wrapper (would double-zoom) */
  .ui-new .ws-output .sheet.active:not(.sheet--paged),
  .ui-new .ws-output .ws-page { zoom: var(--ui-paperzoom); }
  .ui-new .ws-output .sheet.active.sheet--paged { width: auto; }
}
.ui-new .ws-output .sheet.active {
  box-shadow: 0 18px 48px rgba(23, 32, 51, .17);
  /* OUTLINE, not border. The page is border-box and pinned to exactly 8.5in, so a 1px hairline
     comes out of the CONTENT: 718px where the print lays out 720, because PRINT_OVERRIDES drops
     the border for print. Two pixels is enough to wrap a question, and a wrapped question is a
     row. An outline draws the same line and takes no layout space. */
  border: 0; outline: 1px solid #e2dccf; border-radius: 8px;
}
/* Each page of a split sheet is a paper in its own right -- same hairline, same 2px. */
.ui-new .ws-output .ws-page { border: 0; outline: 1px solid var(--line); }

/* ---------- Backdrop (mobile drawers) ---------- */
.ui-new .backdrop { background: rgba(15, 23, 42, .38); }

/* ---------- Generic buttons (chrome) ---------- */
.ui-new .btn { border-radius: 12px; font-weight: var(--weight-medium); }
.ui-new .btn-primary { background: var(--ui-blue); border-color: var(--ui-blue); color: #fff; font-weight: var(--weight-semibold); }
.ui-new .btn-primary:hover { background: #2f6f5a; border-color: #2f6f5a; }

/* ============================ Left catalog rail ============================ */
.ui-new .sidebar-head { border-bottom: 1px solid var(--ui-line); padding: 14px 14px 10px; }
.ui-new #drawer-close { display: none; }     /* rail is persistent in the new look */
/* By grade / All topics segmented switch */
.ui-new .sb-toggle { background: var(--ui-soft); border-radius: 12px; padding: 4px; gap: 0; }
.ui-new .sb-toggle button { border: 0; background: transparent; border-radius: 9px; font-weight: var(--weight-medium); font-size: 13px; color: #64748b; padding: 8px 6px; cursor: pointer; }
.ui-new .sb-toggle button.on { background: var(--ui-surface); color: var(--ui-ink); box-shadow: 0 2px 6px rgba(23, 32, 51, .06); font-weight: var(--weight-semibold); }
.ui-new #search { border-radius: 12px; border: 1px solid var(--ui-line); background: var(--ui-surface); padding: 10px 12px; }
.ui-new #search:focus { outline: 0; border-color: var(--ui-blue); }
.ui-new .grade-select { border-radius: 11px; border: 1px solid var(--ui-line); font-weight: var(--weight-medium); }
.ui-new .catalog-count { color: var(--ui-muted); font-weight: var(--weight-medium); }
.ui-new .collapse-all:hover { color: var(--ui-blue); }

/* Grade rail → app2: a grade DROPDOWN, then category CARDS with topic rows + mode badges */
/* .grade-accordion is the SCROLLING element (overflow-y:auto); .ga-gbar sticks the grade
   dropdown to its top so it stays put while the category cards scroll under it. The bar
   must be opaque — the rail is translucent white, so rows would otherwise show through.
   Top padding moved off .grade-accordion onto the bar, else rows peek above it. */
.ui-new .grade-accordion { padding: 0 12px 12px; }
.ui-new .ga-gbar {
  position: sticky; top: 0; z-index: 3;
  margin: 0 -12px;                    /* bleed across the rail's side padding */
  padding: 12px 12px 10px;
  background: #fdfdfe;                /* == rgba(255,255,255,.76) over --ui-bg, i.e. the rail */
  border-bottom: 1px solid var(--ui-line);
}
.ui-new .ga-gselect { width: 100%; height: 42px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); color: var(--ui-ink); padding: 0 12px; font-weight: var(--weight-medium); font-size: 14px; cursor: pointer; }
.ui-new .ga-gselect:focus { outline: 0; border-color: var(--ui-blue); }
/* SUPER-PRO one-click whole-grade packet button (under the grade picker). */
.ui-new .ga-genall { width: 100%; margin-top: 8px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, var(--ui-blue), #6b5cff); color: #fff; font-weight: 700; font-size: 13.5px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.15;
  box-shadow: 0 2px 8px rgba(90, 90, 200, .25); transition: filter .12s ease, transform .06s ease; }
.ui-new .ga-genall:hover { filter: brightness(1.06); }
.ui-new .ga-genall:active { transform: translateY(1px); }
.ui-new .ga-cards { margin: 12px 0 10px; }
.ui-new .ga-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 15px; margin-bottom: 10px; overflow: hidden; }
.ui-new .ga-card-head { padding: 12px 13px; font-weight: var(--weight-semibold); font-size: 14px; color: var(--ui-ink); display: flex; justify-content: space-between; align-items: center; gap: 8px; }  /* category heading */
.ui-new .ga-card-n { font-size: 11px; font-weight: var(--weight-medium); color: #475569; background: #f1f5f9; border-radius: 999px; padding: 3px 8px; flex: 0 0 auto; }
.ui-new .ga-drow { border: 0; border-top: 1px solid #edf1f7; background: none; width: 100%; text-align: left; cursor: pointer; padding: 10px 12px; font-weight: var(--weight-medium); color: #475467; font-size: 13.5px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.ui-new .ga-drow:hover { background: #f8fafc; }
.ui-new .ga-drow.sel { background: var(--ui-blue-soft); color: #2f6f5a; font-weight: var(--weight-semibold); }
.ui-new .ga-drow-name { min-width: 0; }
.ui-new .ga-badge { display: inline-flex; border-radius: 999px; padding: 4px 7px; font-size: 10.5px; font-weight: var(--weight-medium); white-space: nowrap; }
.ui-new .ga-badge.b-blue { background: var(--ui-blue-soft); color: #2f6f5a; }
.ui-new .ga-badge.b-green { background: var(--ui-green-soft); color: var(--ui-green); }
.ui-new .ga-badge.b-orange { background: var(--ui-orange-soft); color: var(--ui-orange); }
.ui-new .ga-badge.b-purple { background: var(--ui-purple-soft); color: var(--ui-purple); }
.ui-new .ga-badge.b-gray { background: #f1f5f9; color: #475569; }
/* The blue token is repurposed to the green primary, so the Fluency (b-blue) badge and the
   gray badge get explicit calm-notebook colors here (overriding their token-based defaults). */
.ui-new .gm-badge.b-blue, .ui-new .ga-badge.b-blue { background: #e8f1fb; color: #326ca5; }
.ui-new .gm-badge.b-gray, .ui-new .ga-badge.b-gray { background: #efe7d8; color: #6c604f; }

/* Flat "All topics" catalog rows */
.ui-new .catalog .cat-name { color: var(--ui-muted); font-weight: var(--weight-semibold); letter-spacing: .04em; }  /* category heading */
.ui-new .topic-btn { border-radius: 10px; padding: 9px 10px; font-weight: var(--weight-medium); color: #475467; }
.ui-new .topic-btn:hover { background: var(--ui-blue-soft); }
.ui-new .topic-btn.is-active { background: var(--ui-blue-soft); color: #2f6f5a; border-color: transparent; font-weight: var(--weight-semibold); }
.ui-new .band-tag { background: var(--ui-soft); color: #475569; border-radius: 999px; font-size: 10.5px; font-weight: var(--weight-medium); padding: 2px 7px; }
.ui-new .soon-tag { background: #fff4e5; color: #b45309; border-radius: 999px; font-size: 10.5px; font-weight: var(--weight-medium); }
.ui-new .hub-tag { background: var(--ui-purple-soft); color: var(--ui-purple); border-radius: 999px; font-size: 10.5px; font-weight: var(--weight-medium); padding: 2px 7px; }

/* ============================ Tools panel ============================ */
.ui-new .tools-drawer .opt { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; padding: 8px 11px; gap: 3px; }
.ui-new .tools-drawer .opt > span { color: var(--ui-muted); font-size: 12px; font-weight: var(--weight-medium); }
/* Shade the input/select so an empty field (e.g. Sheet title) reads as a fillable box, not blank. */
.ui-new .tools-drawer .opt input,
.ui-new .tools-drawer .opt select { border: 1px solid var(--ui-line); background: #f7f2e8; border-radius: 8px;
  font-weight: var(--weight-medium); color: var(--ui-ink); padding: 7px 9px; width: 100%; box-sizing: border-box; }
.ui-new .tools-drawer .opt input::placeholder { color: #a89f8c; }
.ui-new .tools-drawer .opt input:focus,
.ui-new .tools-drawer .opt select:focus { outline: 0; border-color: var(--ui-blue); background: var(--ui-surface); }
.ui-new .tools-drawer .btn { border-radius: 12px; font-weight: var(--weight-medium); padding: 11px 12px; }
.ui-new .tools-drawer .options-bar { border-bottom: 1px solid var(--ui-line); }
.ui-new .dl-hint { color: var(--ui-muted); font-size: 12px; }
/* Worksheet / Answer Key tabs */
.ui-new .view-tabs { background: var(--ui-soft); border-radius: 12px; padding: 4px; }
.ui-new .view-tabs .tab { border: 0; background: transparent; border-radius: 9px; font-weight: var(--weight-medium); font-size: 13px; color: #64748b; padding: 8px; }
.ui-new .view-tabs .tab.is-active { background: var(--ui-surface); color: var(--ui-ink); box-shadow: 0 2px 6px rgba(23, 32, 51, .06); font-weight: var(--weight-semibold); }

/* Pro tools panel */
.ui-new .pro-bar { background: linear-gradient(135deg, var(--ui-surface), #fff7e2); border: 1px solid #ecdcae; border-radius: 16px; margin: 14px 0 0; padding: 14px; }
.ui-new .pro-bar-head { background: none; border: 0; margin: 0 0 10px; padding: 0; min-height: 0; }
.ui-new .pro-bar-title { color: var(--ui-purple); }
.ui-new .pro-tag { background: var(--ui-purple-soft); color: var(--ui-purple); border-radius: 999px; padding: 2px 7px; font-size: 10px; font-weight: var(--weight-medium); }
.ui-new .pro-unlock { background: #172033; color: #fff; border-radius: 10px; padding: 7px 11px; font-weight: var(--weight-semibold); text-decoration: none; }
.ui-new .pro-bar .opt-note { color: var(--ui-muted); font-size: 11.5px; }
.ui-new .pro-bar .opt > span { color: var(--ui-ink); font-size: 12px; font-weight: var(--weight-medium); }
.ui-new .pro-bar input,
.ui-new .pro-bar select { border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); padding: 8px 10px; color: var(--ui-ink); font-weight: var(--weight-medium); }
.ui-new .pro-bar.is-locked { opacity: 1; }
.ui-new .pro-bar.is-locked .opt input,
.ui-new .pro-bar.is-locked .opt select { background: #efe9dc; }