/* ─── StudyVET PWA — calm clinical UI ────────────────────────────────────
*
* Palette: slate-tinted teal primary on slate-mist neutrals. Reads as a
* serious study tool — exam prep, not a consumer game. Ambient four-hue
* mesh and gradient text fills retired in this pass; flat surfaces with
* hairline slate borders and a single accent stripe carry the visual
* tone instead.
*
* Token discipline: every color used in components reads through one of
* the variables below. Swapping a token here propagates globally.
*/
:root {
/* Ambient backdrop — kept for back-compat (legacy rules read --blob-N
and --bg-0) but the four-hue mesh is retired in body::before/::after.
The blob values are now neutral so any straggler reading them gets a
calm slate tint instead of teal/violet/amber soup. */
--bg-0: #0b1220;
--blob-1: rgba(15, 23, 42, 0);
--blob-2: rgba(15, 23, 42, 0);
--blob-3: rgba(15, 23, 42, 0);
--blob-4: rgba(15, 23, 42, 0);
/* Surfaces — flat by default, glass reserved for floating overlays
(toasts, popovers, lightbox). Cards/heroes/stats sit on solid
surfaces with hairline borders; reads calmer than translucent. */
--surface: rgba(15, 23, 42, 0.72);
--surface-2: rgba(30, 41, 59, 0.55);
--border: rgba(148, 163, 184, 0.18);
--border-strong: rgba(148, 163, 184, 0.32);
/* Glass surfaces — same shape as before for back-compat (.toast,
.lightbox, .popover still read these). Lower blur + saturation so
it reads as subtle frosting, not frosted-window. */
--glass: rgba(15, 23, 42, 0.72);
--glass-strong: rgba(15, 23, 42, 0.85);
--glass-weak: rgba(15, 23, 42, 0.50);
--glass-border: rgba(148, 163, 184, 0.18);
--glass-border-strong: rgba(148, 163, 184, 0.30);
--glass-hi: rgba(255, 255, 255, 0.04);
/* Text — slate-cool, dropped the bluish tint of the old palette. */
--ink: #f1f5f9; /* slate-100 — true heading ink (dark mode) */
--text: #e2e8f0; /* slate-200 — body */
--text-dim: #94a3b8; /* slate-400 — secondary body, .muted */
--muted: #64748b; /* slate-500 — captions, table-cell meta */
/* Accents — slate-tinted clinical teal. Less candy than #14b8a6, more
authority. --accent retired (was triple-duty amber); split into
role-specific --warn (warnings only) and --active (active tab,
streak, timer — uses primary). */
--primary: #0ea5a3; /* clinical teal */
--primary-dark: #0f766e; /* teal-700 hover */
--primary-soft: rgba(14, 165, 163, 0.18);
--primary-50: #ccfbf1; /* teal-100 — chip backgrounds, soft fills */
--active: var(--primary);
--accent-sky: #0284c7; /* sky-600 — secondary, charts, info */
--good: #059669; /* emerald-600 (was #22c55e — too candy) */
--bad: #dc2626; /* red-600 */
--warn: #d97706; /* amber-600 — warnings only */
/* Legacy --accent alias — kept so old rules don't break, but points at
--warn now (was the role amber actually played). New code should
use --warn or --active explicitly. */
--accent: var(--warn);
--radius-xs: 6px;
--radius-sm: 10px;
--radius: 14px; /* was 18 — less candy, more clinical-card */
--radius-lg: 20px; /* hero/modal only */
--radius-s: var(--radius-sm); /* legacy alias */
--blur: 12px; /* was 18 — subtler frosting */
--blur-lg: 20px; /* was 28 */
--saturate: 120%; /* was 160 */
/* ── Type scale ───────────────────────────────────────────────────────
* xs 11.5px pill labels, captions, table-cell metadata
* sm 13px secondary body, footnotes, .muted prose
* base 15px default body (was 14 — bumped 1px for clinical readability)
* md 16px interactive label / button text (was 15)
* lg 18px section headings, prominent body (was 17)
* xl 24px page titles (h2) (was 22)
* 2xl 32px hero headlines (h1, big stat numerals) (was 30)
* 3xl 40px landing-only display
*/
--text-xs: 11.5px;
--text-sm: 13px;
--text-base: 15px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 40px;
/* ── Elevation scale ─────────────────────────────────────────────────
* Cool-slate shadows (not deep navy) with reduced saturation. Inset
* highlights on light theme stripped — they read glassy/dated on
* solid white. Added shadow-0 for hairline elevation (input focus,
* hovered table rows) — old scale started too heavy for that role.
*/
--shadow-0: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-1: 0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-2: 0 4px 12px rgba(15, 23, 42, 0.16), 0 2px 4px rgba(15, 23, 42, 0.08);
--shadow-3: 0 12px 30px rgba(15, 23, 42, 0.40), 0 4px 8px rgba(15, 23, 42, 0.10);
/* Legacy aliases — existing rules still reference these. */
--shadow: var(--shadow-2);
--shadow-hover: var(--shadow-3);
/* ── Focus ring ──────────────────────────────────────────────────────
* Slate-tinted teal — pulled toward --primary so it reads as one
* brand color across all interactive states.
*/
--ring: rgba(14, 165, 163, 0.50);
--ring-glow: 0 0 0 3px rgba(14, 165, 163, 0.22);
/* ── Motion ──────────────────────────────────────────────────────────
* Single curve + duration trio used everywhere. Calm clinical means
* no overshoot, no spring — just smooth ease-out for entries.
*/
--ease: cubic-bezier(.2, .8, .2, 1);
--dur-1: 120ms; /* hover, micro */
--dur-2: 220ms; /* panel reveal, state change */
--dur-3: 320ms; /* page transition */
}
@media (prefers-color-scheme: light) {
:root {
--bg-0: #f4f6fb; /* slate-50 mist (was #e8ecf7 — cooler) */
/* Light-theme surfaces — flat white with solid hairline borders.
Glass tokens still defined for the few overlays that opt in
(toasts, lightbox), but lower opacity than before. */
--surface: #ffffff;
--surface-2: #f8fafc; /* slate-50 secondary */
--border: #e2e8f0; /* slate-200 — flat hairline */
--border-strong: #cbd5e1; /* slate-300 — input focus */
--glass: rgba(255, 255, 255, 0.85);
--glass-strong: rgba(255, 255, 255, 0.95);
--glass-weak: rgba(255, 255, 255, 0.65);
--glass-border: #e2e8f0;
--glass-border-strong: #cbd5e1;
--glass-hi: rgba(255, 255, 255, 0.70);
--ink: #0f172a; /* slate-900 — true heading ink */
--text: #1e293b; /* slate-800 */
--text-dim: #475569; /* slate-600 (was #3d4a70 — bluer) */
--muted: #64748b; /* slate-500 */
--primary-soft: rgba(14, 165, 163, 0.10);
/* Light-theme shadows — softer + cool slate, no white inset
highlights (those read glassy/dated on solid white). */
--shadow-0: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
--shadow-2: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 15px rgba(15, 23, 42, 0.08);
--shadow-3: 0 10px 25px rgba(15, 23, 42, 0.10), 0 20px 40px rgba(15, 23, 42, 0.06);
--shadow: var(--shadow-2);
--shadow-hover: var(--shadow-3);
}
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font: 16px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-feature-settings: "cv11", "ss01", "ss03";
color: var(--text);
background: var(--bg-0);
padding-bottom: env(safe-area-inset-bottom);
min-height: 100%;
position: relative;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Stat numbers read cleaner with tabular figures. */
.stat-num, .big-score, .big-pct, .pb-num { font-variant-numeric: tabular-nums; }
/* ─── Skeleton loaders ──────────────────────────────────────────────────
* Replace plain "Loading…" text with pulsing skeleton blocks shaped like
* the content that's about to arrive. Gives the user a sense of layout
* before the data loads, makes pages feel ~2x faster perceptually.
*
* Usage:
* generic text-row
* headline row
* partial-width row
* generic block
* stat-grid cell
* round 64px medallion
*
* Composition: each "loading" branch in a view returns HTML composed of
* these primitives, sized to roughly match the real layout. When the
* real data arrives, view.innerHTML swaps to the rendered content.
*/
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton {
display: block;
background:
linear-gradient(
90deg,
var(--glass-weak) 0%,
var(--glass) 50%,
var(--glass-weak) 100%
);
background-size: 200% 100%;
border-radius: 6px;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
/* Slightly desaturate so the colours don't fight the real content
when it arrives during the fade. */
opacity: .85;
}
@media (prefers-reduced-motion: reduce) {
.skeleton { animation: none; }
}
.skeleton-line { height: 14px; margin: 8px 0; width: 100%; }
.skeleton-line.lg { height: 22px; }
.skeleton-line.xl { height: 30px; }
.skeleton-line.w-30 { width: 30%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-75 { width: 75%; }
.skeleton-block { width: 100%; height: 100px; border-radius: var(--radius-s); }
.skeleton-block.h-40 { height: 40px; }
.skeleton-block.h-60 { height: 60px; }
.skeleton-block.h-80 { height: 80px; }
.skeleton-block.h-120 { height: 120px; }
.skeleton-block.h-160 { height: 160px; }
.skeleton-block.h-200 { height: 200px; }
/* Stat-card placeholder — matches .stat shape so the swap is seamless. */
.skeleton-stat {
width: 100%;
height: 80px;
border-radius: var(--radius-s);
}
.skeleton-stat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (min-width: 540px) {
.skeleton-stat-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Round medallion placeholder — matches the empty-state icon shape. */
.skeleton-icon {
width: 64px;
height: 64px;
border-radius: 50%;
}
/* Helper card-shape wrapper so the page-load layout matches a .card. */
.skeleton-card {
padding: 22px;
border-radius: var(--radius);
background: var(--glass);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-1);
margin-bottom: 16px;
}
/* ─── Universal card hover ──────────────────────────────────────────────
* Anything that's clickable and shaped like a card should subtly lift on
* hover — gives every interaction the same "alive" feel. We target
* specific known patterns rather than every .card globally because most
* info cards (stat grids, hero copy) are not clickable.
*/
.action-card,
.plan-card:not(.locked),
.admin-stat:not(.admin-stat-live),
a.bd:hover,
.dash-lock,
.dash-card,
.plan-card-featured {
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* Lift + stronger shadow + slight border accent. We use the design-token
shadow scale so dark/light themes adapt automatically. */
.plan-card:not(.locked):hover,
a.action-card:not(.locked):hover,
button.action-card:not(.locked):hover {
transform: translateY(-2px);
box-shadow: var(--shadow-3);
}
/* admin-stat lifts only when it actually links somewhere — the static
stats on /admin/users are not anchors. */
a.admin-stat:hover,
button.admin-stat:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-3);
border-color: var(--glass-border-strong);
}
/* Hover treatment for any anchor wrapping a .card — used by the admin
hub nav cards and similar landing-page-style links. */
a > .card:hover,
.card a.card-link:hover,
a.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-3);
border-color: rgba(45,212,191,.35);
}
/* ─── Global focus ring ──────────────────────────────────────────────────
* One brand-teal ring used everywhere a keyboard user lands. :focus-visible
* gates this to keyboard navigation only — mouse clicks don't trigger it,
* so buttons don't get peppered with rings on every press.
*
* Inputs use a softer "glow" via box-shadow because outline gets clipped
* by some glass surfaces. Buttons / links / chips use outline so the
* ring sits cleanly outside the element's own border-radius.
*/
:focus { outline: none; } /* ditch the browser-default blue ring */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
.chip-pick:focus-visible,
.fc-chip:focus-visible,
.fc-radio:focus-visible,
.theme-option:focus-visible,
.practice-preset:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
border-radius: inherit;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: none;
border-color: var(--primary);
box-shadow: var(--ring-glow);
}
/* ─── Unified status pill ────────────────────────────────────────────────
* Standard shape for every small status indicator (Pro / Free / Active /
* Past-due / Canceled / Trialing / etc.). Variants change only the colour;
* the geometry stays the same so the pill family reads as a single
* consistent element.
*
* Kept as a separate base from the older .sub-pill / .achv-chip / .tag
* families. Migrate piecemeal — anything new should use .pill.
*/
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid var(--glass-border);
background: var(--glass-weak);
color: var(--text-dim);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .04em;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
}
.pill-pro { color: #0f766e; background: rgba(45,212,191,.14); border-color: rgba(45,212,191,.40); }
.pill-active { color: #0f766e; background: rgba(45,212,191,.14); border-color: rgba(45,212,191,.40); }
.pill-trial { color: #1e40af; background: rgba(37,99,235,.14); border-color: rgba(37,99,235,.40); }
.pill-warn { color: #92400e; background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.45); }
.pill-bad { color: #991b1b; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.40); }
.pill-muted { color: var(--muted); } /* default look — explicit alias */
/* Calm clinical canvas — flat slate-mist with a single very subtle
noise overlay to kill banding on dark mode. The four-hue mesh
(teal/violet/amber/sky drifting blobs) was retired in this pass —
it competed with content for attention and read as consumer-app,
not study-tool. body::before/::after kept (zero-cost no-ops in
light mode, faint dither in dark) so any external rule that
expected the pseudo-element layers doesn't break. */
body::before {
content: "";
position: fixed; inset: 0;
z-index: -2;
background: var(--bg-0);
pointer-events: none;
}
body::after {
/* Faint dither — only visible on dark mode to soften the flat
slate canvas. Negligible on light mode (low-contrast against
#f4f6fb). 3x3 dot grid, 2% white noise. */
content: "";
position: fixed; inset: 0; z-index: -1;
pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
background-size: 3px 3px;
opacity: .5;
}
@media (prefers-color-scheme: light) {
body::after { opacity: 0; } /* No noise on white — reads cleaner. */
}
/* ─── Top bar ────────────────────────────────────────────────────────── */
.topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
background: var(--glass-strong);
backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
border-bottom: 1px solid var(--glass-border);
position: sticky; top: 0; z-index: 10;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.brand {
display: inline-flex; align-items: center; gap: 10px;
text-decoration: none; color: inherit;
min-width: 0;
}
.logo {
width: 34px; height: 34px;
display: inline-grid; place-items: center;
border-radius: 10px; overflow: hidden;
box-shadow: 0 4px 16px rgba(14,165,233,.30), inset 0 1px 0 rgba(255,255,255,.25);
}
.logo svg,
.logo img { display: block; width: 100%; height: 100%; }
.brand-title {
font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
color: var(--text);
}
/* VET accent in the wordmark — teal→cyan to echo the icon tile. */
.brand-accent {
font-weight: 800;
background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 55%, #0ea5e9 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: 1px;
}
.top-right { display: flex; align-items: center; gap: 10px; }
.user-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px 5px 6px; border-radius: 999px;
background: var(--glass-weak);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
color: var(--text-dim);
font-size: 13px; max-width: 180px;
text-decoration: none; cursor: pointer;
border: 1px solid var(--glass-border);
transition: border-color .15s, color .15s, background .15s, transform .1s;
}
a.user-chip:hover {
color: var(--text); border-color: var(--glass-border-strong);
background: var(--glass); transform: translateY(-1px);
}
.user-chip-avatar {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 999px;
font-size: 17px; line-height: 1;
background: rgba(255,255,255,.06);
border: 1px solid var(--glass-border);
}
.user-chip-name {
flex: 0 1 auto;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0;
}
/* Admin pill — neutral glass like user-chip with a subtle teal accent so
the shield still reads as "privileged" without the eye-piercing amber. */
.admin-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
color: var(--text-dim);
text-decoration: none; cursor: pointer;
background: var(--glass-weak);
border: 1px solid var(--glass-border);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
transition: color .15s, background .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.admin-pill:hover {
color: var(--text); border-color: var(--glass-border-strong);
background: var(--glass);
transform: translateY(-1px);
}
.admin-pill .pill-icon {
font-size: 13px;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.admin-pill .pill-text { line-height: 1; }
@media (max-width: 480px) {
.admin-pill .pill-text { display: none; }
.admin-pill { padding: 6px 9px; }
}
/* Circular icon button — used for sign-out in the top bar. */
.icon-btn {
width: 34px; height: 34px; padding: 0;
display: inline-grid; place-items: center;
border-radius: 999px;
color: var(--text-dim);
background: var(--glass-weak);
border: 1px solid var(--glass-border);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
cursor: pointer;
transition: color .15s, background .15s, border-color .15s, transform .1s;
}
.icon-btn:hover {
color: #fca5a5;
background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(239,68,68,.08));
border-color: rgba(239,68,68,.45);
transform: translateY(-1px);
}
.icon-btn:focus-visible {
outline: 2px solid rgba(239,68,68,.55); outline-offset: 2px;
}
.icon-btn svg { display: block; }
/* ─── Main view ──────────────────────────────────────────────────────── */
main#view {
max-width: 860px; margin: 0 auto;
padding: 24px 16px 120px;
/* Page-transition fade between routes. The router toggles
.view-leaving on route change; the same property handles fade-out
(opacity → 0) and fade-in (opacity → 1 when class removed). */
transition: opacity 120ms ease;
opacity: 1;
/* `will-change: opacity` hints the browser to keep the layer composited
so the transition runs on the GPU, avoiding paint flashes on
content-heavy pages like /dashboard. */
will-change: opacity;
}
main#view.view-leaving {
opacity: 0;
/* During fade-out, refuse pointer events so users can't double-click
another nav item mid-transition and queue stale renders. */
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
main#view { transition: none; }
main#view.view-leaving { opacity: 1; }
}
/* Calm clinical card — flat surface (white on light, slate on dark)
with hairline border + subtle shadow. The previous translucent glass
with white "lip" highlight read glassy/dated on solid white; new
treatment reads as a clean clinical card. Glass primitive still
exists for floating overlays (toasts, popovers, lightbox). */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px;
margin-bottom: 16px;
box-shadow: var(--shadow-1);
position: relative;
transition: box-shadow var(--dur-2) var(--ease);
}
.card > * { position: relative; }
h1, h2, h3 {
margin: 0 0 12px;
line-height: 1.25;
letter-spacing: -0.011em;
color: var(--ink);
font-weight: 700;
}
h1 { font-size: var(--text-2xl); } /* 32px */
h2 { font-size: var(--text-xl); } /* 24px */
h3 { font-size: var(--text-lg); font-weight: 600; } /* 18px */
.muted { color: var(--muted); }
/* ─── Buttons ──────────────────────────────────────────────────────────
* Calm clinical button set — flat surfaces, single solid primary
* (no gradient), slate hairline borders, soft shadow. Hover lifts
* 1px with a tightened shadow rather than a wash of color change.
* Previous gradient primary (#2dd4bf → #0ea5e9) read as marketing
* page; solid --primary reads as a serious CTA. */
.btn, button.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 10px 20px; border-radius: var(--radius-sm);
border: 1px solid var(--border);
font-weight: 600; font-size: var(--text-md);
background: var(--surface);
color: var(--text);
cursor: pointer; text-decoration: none;
transition: transform var(--dur-1) var(--ease),
background var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease),
box-shadow var(--dur-1) var(--ease),
color var(--dur-1) var(--ease);
min-height: 44px;
box-shadow: var(--shadow-1);
}
.btn:hover {
transform: translateY(-1px);
border-color: var(--border-strong);
box-shadow: var(--shadow-2);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-0); }
.btn-primary {
background: var(--primary);
color: #ffffff;
border-color: var(--primary);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(14, 165, 163, .25);
}
.btn-primary:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 8px 20px rgba(14, 165, 163, .32);
}
.btn-ghost {
background: transparent;
border-color: var(--border);
color: var(--text-dim);
box-shadow: none;
}
.btn-ghost:hover {
background: var(--surface-2);
border-color: var(--border-strong);
color: var(--ink);
box-shadow: var(--shadow-0);
}
.btn-red {
background: rgba(220, 38, 38, .08);
color: var(--bad);
border-color: rgba(220, 38, 38, .30);
}
.btn-red:hover {
background: rgba(220, 38, 38, .14);
border-color: rgba(220, 38, 38, .45);
color: #991b1b;
}
.btn-yellow {
background: rgba(217, 119, 6, .08);
color: var(--warn);
border-color: rgba(217, 119, 6, .30);
}
.btn-yellow:hover {
background: rgba(217, 119, 6, .14);
border-color: rgba(217, 119, 6, .45);
color: #92400e;
}
.btn-green {
background: rgba(5, 150, 105, .08);
color: var(--good);
border-color: rgba(5, 150, 105, .30);
}
.btn-green:hover {
background: rgba(5, 150, 105, .14);
border-color: rgba(5, 150, 105, .45);
color: #047857;
}
@media (prefers-color-scheme: dark) {
/* Dark-mode tonal buttons — the same accents but lighter text so
the labels stay legible on dark backdrops. */
.btn-red { color: #fca5a5; }
.btn-yellow { color: #fcd34d; }
.btn-green { color: #86efac; }
.btn-red:hover { color: #fecaca; }
.btn-yellow:hover { color: #fde68a; }
.btn-green:hover { color: #bbf7d0; }
}
.btn.wide, .btn-primary.wide, .btn-ghost.wide { width: 100%; }
.btn-icon {
background: transparent; border: none;
font-size: 22px; color: var(--muted); padding: 4px 8px; cursor: pointer;
transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn-icon:hover { color: var(--ink); transform: scale(1.08); }
.btn-icon.on { color: var(--primary); }
/* ─── Home / dashboard ───────────────────────────────────────────────── */
/* Home hero — soft multi-tone pastel that flows mint → peach → rose
left-to-right. Reads warmer and more inviting than a single-hue
gradient, and pairs well with the teal home-hero avatar bubble.
Different palette from the admin hero (warm amber→coral) so the
user-facing landing and the ops console can't be confused. */
/* Calm clinical hero — flat surface + a single 4px teal accent stripe
on the leading edge. The previous warm-pastel mint→peach→rose
gradient with the orange→rose gradient h1 fill read as marketing
page, not study tool. New treatment lets the user's name and
greeting carry the page rather than a candy backdrop. */
.hero {
position: relative;
/* Padding evened out after removing the teal ::before accent stripe.
Old left-padding (26px) was bumped to clear the 4px stripe; with
the stripe gone we drop back to a uniform 22px on both sides. */
padding: 20px 22px 18px 22px;
margin: 4px 0 16px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--surface);
box-shadow: var(--shadow-1);
overflow: hidden;
}
.hero h1 {
font-size: var(--text-2xl);
margin-bottom: 2px;
color: var(--ink);
font-weight: 700;
letter-spacing: -0.011em;
/* Drop the orange→rose gradient text fill — solid ink reads as a
serious headline, gradient reads as marketing. */
background: none;
-webkit-background-clip: initial; background-clip: initial;
-webkit-text-fill-color: initial;
}
@media (max-width: 540px) {
.hero { padding: 16px 16px 14px 22px; }
.hero h1 { font-size: var(--text-xl); }
}
.stat-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px; margin: 18px 0;
}
@media (min-width: 540px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px; text-align: center;
box-shadow: var(--shadow-1);
transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.stat:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
/* Calm clinical stat numerals — solid --ink, no gradient text fill.
Gradient was teal→sky which read as decorative marketing; solid ink
with tabular-nums reads as data. Tabular-nums also prevents layout
shift when numerals change (e.g., live counters). */
.stat-num {
font-size: 28px; font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.011em;
background: none;
-webkit-background-clip: initial; background-clip: initial;
-webkit-text-fill-color: initial;
}
.stat-lbl { font-size: var(--text-xs); color: var(--muted); margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; }
/* "Today" tile — tints mint when the user has answered ≥1 question
since local midnight, so the daily-progress signal stands out from
the lifetime-stat tiles next to it. Sits subtle until you've earned
it; turns into a small badge once you have. */
.stat.stat-today.is-active {
background: rgba(20, 184, 166, 0.08);
border-color: rgba(20, 184, 166, 0.35);
}
.stat.stat-today.is-active .stat-num { color: #0F6E56; }
.card-grid {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* ─── Bento variant ──────────────────────────────────────────────
`.card-grid-bento` opts a card grid into the "one primary +
secondary tiles" layout. The primary tile (`.action-card-primary`)
spans two columns on the 3-col desktop layout (taking the headline
slot), shows a tinted background, larger title, and a primary CTA
button. Mobile / narrow viewports collapse it to one column
automatically via grid auto-fit. */
.card-grid-bento { gap: 12px; }
.action-card-primary {
grid-column: span 2;
display: flex;
gap: 16px;
align-items: flex-start;
padding: 22px 24px;
border-radius: var(--radius);
text-decoration: none;
color: var(--text);
border: 1px solid var(--border, rgba(148,163,184,0.35));
background: var(--surface, var(--glass-weak));
transition: transform .12s, box-shadow .15s, border-color .15s;
}
.action-card-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.action-icon-primary {
width: 48px; height: 48px;
border-radius: 14px;
font-size: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--glass-weak, rgba(148,163,184,0.12));
line-height: 1;
}
.action-primary-body { display: flex; flex-direction: column; min-width: 0; gap: 4px; flex: 1; }
.action-primary-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim, var(--muted));
}
.action-primary-title {
font-size: 19px;
font-weight: 700;
line-height: 1.2;
color: var(--ink, var(--text));
letter-spacing: -0.01em;
}
.action-primary-sub {
font-size: 13.5px;
line-height: 1.45;
color: var(--text-dim, var(--muted));
margin-top: 2px;
}
.action-primary-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: #fff;
background: var(--primary, #0F6E56);
margin-top: 12px;
align-self: flex-start;
white-space: nowrap;
}
/* Accent tints — pick by data-accent. Background uses a light pastel
from the matching ramp; border + CTA + eyebrow take the darker
stops so they pop without overpowering the rest of the grid. */
.action-card-primary[data-accent="teal"] {
background: #E1F5EE; border-color: rgba(15, 110, 86, 0.30);
}
.action-card-primary[data-accent="teal"] .action-primary-eyebrow { color: #085041; }
.action-card-primary[data-accent="teal"] .action-icon-primary { background: rgba(15, 110, 86, 0.16); color: #0F6E56; }
.action-card-primary[data-accent="teal"] .action-primary-cta { background: #0F6E56; }
.action-card-primary[data-accent="purple"] {
background: #EEEDFE; border-color: rgba(60, 52, 137, 0.30);
}
.action-card-primary[data-accent="purple"] .action-primary-eyebrow { color: #3C3489; }
.action-card-primary[data-accent="purple"] .action-icon-primary { background: rgba(60, 52, 137, 0.16); color: #3C3489; }
.action-card-primary[data-accent="purple"] .action-primary-cta { background: #534AB7; }
.action-card-primary[data-accent="amber"] {
background: #FAEEDA; border-color: rgba(186, 117, 23, 0.32);
}
.action-card-primary[data-accent="amber"] .action-primary-eyebrow { color: #633806; }
.action-card-primary[data-accent="amber"] .action-icon-primary { background: rgba(186, 117, 23, 0.16); color: #854F0B; }
.action-card-primary[data-accent="amber"] .action-primary-cta { background: #BA7517; }
.action-card-primary[data-accent="blue"] {
background: #E6F1FB; border-color: rgba(24, 95, 165, 0.30);
}
.action-card-primary[data-accent="blue"] .action-primary-eyebrow { color: #0C447C; }
.action-card-primary[data-accent="blue"] .action-icon-primary { background: rgba(24, 95, 165, 0.16); color: #185FA5; }
.action-card-primary[data-accent="blue"] .action-primary-cta { background: #185FA5; }
/* Mobile — drop the 2-col span; primary tile becomes a tall single-
column card. Slightly less padding, title scales down. */
@media (max-width: 540px) {
.action-card-primary { grid-column: auto; padding: 18px 18px; gap: 12px; }
.action-icon-primary { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; }
.action-primary-title { font-size: 17px; }
.action-primary-sub { font-size: 12.5px; }
}
.action-card {
position: relative;
display: flex; align-items: center; gap: 14px;
padding: 18px;
background: var(--glass);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
border: 1px solid var(--glass-border);
border-radius: var(--radius);
text-decoration: none; color: var(--text);
transition: border-color .15s, transform .1s, box-shadow .15s;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.action-badge {
position: absolute;
top: 10px; right: 10px;
min-width: 22px; height: 22px;
padding: 0 7px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; line-height: 1;
color: #042f2e;
background: linear-gradient(135deg, #5eead4, #38bdf8);
border: 1px solid rgba(45,212,191,.7);
border-radius: 999px;
box-shadow: 0 0 0 2px rgba(3,8,24,.6), 0 4px 12px rgba(45,212,191,.35);
animation: actionBadgePulse 2.4s ease-in-out infinite;
}
.action-badge[hidden] { display: none; }
.action-badge.action-badge-urgent {
color: #fff;
background: linear-gradient(135deg, #f97316, #ef4444);
border-color: rgba(239,68,68,.7);
box-shadow: 0 0 0 2px rgba(3,8,24,.6), 0 4px 14px rgba(239,68,68,.45);
animation: actionBadgeUrgent 1.1s ease-in-out infinite;
min-width: 26px; height: 26px; font-size: 14px;
}
@keyframes actionBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); box-shadow: 0 0 0 2px rgba(3,8,24,.6), 0 6px 16px rgba(45,212,191,.5); }
}
@keyframes actionBadgeUrgent {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); box-shadow: 0 0 0 2px rgba(3,8,24,.6), 0 8px 20px rgba(239,68,68,.65); }
}
.action-card:hover {
border-color: rgba(45,212,191,.45);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(3,8,24,.30), inset 0 1px 0 rgba(255,255,255,.10);
}
.action-card.highlight {
border-color: rgba(251,191,36,.50);
box-shadow: 0 0 0 2px rgba(251,191,36,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.action-icon { font-size: 30px; }
/* When the action-icon hosts an inline SVG instead of an emoji, size it to
match the visual weight of the surrounding 30px emoji glyphs. The
container itself stays the same flex-item shape so the grid layout
doesn't shift. */
.action-icon-svg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
}
.action-icon-svg svg {
width: 30px;
height: 30px;
}
.action-title { font-weight: 700; }
.action-sub { font-size: 13px; color: var(--muted); }
/* ─── Auth form ──────────────────────────────────────────────────────── */
.auth-wrap { max-width: 420px; margin: 24px auto 0; }
.auth-back { margin: 0 0 8px; font-size: 14px; }
.auth-back a { color: var(--text-dim); text-decoration: none; transition: color .15s; }
.auth-back a:hover { color: var(--accent); }
.auth-brand {
display: flex; align-items: center; justify-content: center;
gap: 12px;
margin: 12px 0 4px;
}
.auth-logo {
width: 56px; height: 56px;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(20,184,166,.22);
}
.auth-wordmark {
font-size: 30px; font-weight: 800; letter-spacing: .01em;
color: var(--text);
line-height: 1;
}
.auth-tagline {
text-align: center;
margin: 4px 0 18px;
color: var(--muted);
font-size: 14px;
letter-spacing: .02em;
}
.auth-card { max-width: 420px; margin: 0 auto; }
.auth-title { font-size: 24px; }
.auth-sub { color: var(--muted); margin-bottom: 18px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-dim); }
.auth-form input {
padding: 12px 14px; font-size: 16px; border-radius: var(--radius-s);
border: 1px solid var(--glass-border);
background: var(--glass-weak);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
color: var(--text);
transition: border-color .15s, box-shadow .15s;
}
.auth-form input:focus {
outline: none;
border-color: rgba(45,212,191,.6);
box-shadow: 0 0 0 3px rgba(45,212,191,.18);
}
.or { text-align: center; margin: 14px 0; color: var(--muted); font-size: 13px; }
.auth-toggle { text-align: center; margin-top: 12px; color: var(--text-dim); }
.auth-toggle a { color: var(--primary); }
.notice {
padding: 12px 14px;
background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(251,191,36,.06));
border: 1px solid rgba(251,191,36,.35);
border-radius: var(--radius-s);
color: var(--text); margin-bottom: 16px; font-size: 14px;
}
.banner {
background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(251,191,36,.10));
color: var(--text);
padding: 10px 14px; text-align: center; font-size: 13px;
border-bottom: 1px solid rgba(251,191,36,.40);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
}
/* ─── Filters ────────────────────────────────────────────────────────── */
.filters { display: flex; flex-direction: column; gap: 18px; }
.filters fieldset { border: none; padding: 0; margin: 0; }
.filters legend { font-weight: 600; color: var(--text-dim); margin-bottom: 8px; letter-spacing: .02em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-dense { gap: 6px; }
.chip-pick { position: relative; }
.chip-pick input { position: absolute; opacity: 0; pointer-events: none; }
.chip-pick span {
display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
background: var(--glass-weak);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
color: var(--text-dim);
border: 1px solid var(--glass-border); border-radius: 999px;
font-size: 13px; cursor: pointer;
transition: all .15s;
}
.chip-pick .chip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 15px;
line-height: 1;
padding: 0;
background: transparent;
border: none;
filter: saturate(1.1) drop-shadow(0 1px 1px rgba(0,0,0,.25));
flex-shrink: 0;
}
.chip-pick .chip-text { display: inline-block; }
.chip-pick input:checked + span .chip-icon {
filter: saturate(1.25) drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.chip-pick span:hover { color: var(--text); border-color: var(--glass-border-strong); }
.chip-pick input:checked + span {
background: linear-gradient(135deg, rgba(45,212,191,.28), rgba(14,165,233,.22));
color: var(--text);
border-color: rgba(45,212,191,.55);
box-shadow: 0 4px 14px rgba(45,212,191,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
display: inline-flex; padding: 10px 18px;
background: var(--glass-weak);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
color: var(--text-dim);
border: 1px solid var(--glass-border); border-radius: var(--radius-s); font-size: 14px;
transition: all .15s;
}
.seg span:hover { color: var(--text); }
.seg input:checked + span {
background: linear-gradient(135deg, #2dd4bf, #0ea5e9);
color: white; border-color: rgba(255,255,255,.18);
box-shadow: 0 4px 14px rgba(14,165,233,.30), inset 0 1px 0 rgba(255,255,255,.25);
}
.filter-actions {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
margin-top: 6px; flex-wrap: wrap;
}
.match-count { font-size: 13px; }
/* ─── Quiz card ──────────────────────────────────────────────────────── */
.quiz .quiz-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 8px; margin-bottom: 10px;
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
font-size: 11px; padding: 4px 10px; border-radius: 999px;
background: var(--glass-weak);
color: var(--text-dim);
border: 1px solid var(--glass-border);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
}
.tag-species { color: #5eead4; border-color: rgba(45,212,191,.30); background: rgba(20,184,166,.12); }
.tag-subject { color: #fcd34d; border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.12); }
.quiz-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.progress-text { font-variant-numeric: tabular-nums; }
.question {
font-size: 18px; line-height: 1.5; margin: 14px 0 18px;
color: var(--text);
}
/* Organised question block: clinical vignette (framed card) + the actual
prompt (coloured, bold). Rendered by fmtQuestion() in quiz.js. */
.question-block { margin: 14px 0 18px; }
.question-vignette {
font-size: 17px;
line-height: 1.55;
font-weight: 700;
color: var(--text);
margin: 0 0 14px;
}
.question-vignette p { margin: 0 0 8px; }
.question-vignette p:last-child { margin-bottom: 0; }
.question-prompt {
font-size: 17px;
line-height: 1.5;
font-weight: 700;
color: #5eead4;
margin: 0;
}
.choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.choice {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px;
background: var(--glass-weak);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
border: 1px solid var(--glass-border); border-radius: var(--radius-s);
cursor: pointer; text-align: left; color: var(--text); font-size: 15px;
min-height: 52px; line-height: 1.45;
transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.choice:not(:disabled):hover {
border-color: rgba(45,212,191,.45);
background: rgba(45,212,191,.08);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(3,8,24,.20), inset 0 1px 0 rgba(255,255,255,.09);
}
.choice .letter {
flex: 0 0 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center;
background: var(--glass);
border: 1px solid var(--glass-border);
font-weight: 700; font-size: 13px; color: var(--text-dim);
transition: all .15s;
}
.choice.is-correct {
border-color: rgba(34,197,94,.55);
background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(34,197,94,.06));
box-shadow: 0 0 0 2px rgba(34,197,94,.14), inset 0 1px 0 rgba(255,255,255,.08);
}
.choice.is-correct .letter { background: var(--good); color: white; border-color: var(--good); }
.choice.is-wrong {
border-color: rgba(239,68,68,.55);
background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(239,68,68,.06));
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.choice.is-wrong .letter { background: var(--bad); color: white; border-color: var(--bad); }
.choice.is-selected {
border-color: rgba(45,212,191,.55);
background: linear-gradient(135deg, rgba(45,212,191,.18), rgba(14,165,233,.10));
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.choice.is-selected .letter { background: var(--primary); color: white; border-color: var(--primary); }
.choice:disabled { cursor: default; }
.feedback {
padding: 14px 16px; border-radius: var(--radius-s);
margin-bottom: 14px;
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
}
.feedback.ok { background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(34,197,94,.04)); border: 1px solid rgba(34,197,94,.40); }
.feedback.bad { background: linear-gradient(135deg, rgba(239,68,68,.16), rgba(239,68,68,.04)); border: 1px solid rgba(239,68,68,.40); }
.feedback-title { font-weight: 700; margin-bottom: 6px; font-size: 15px; }
.feedback.ok .feedback-title { color: #86efac; }
.feedback.bad .feedback-title { color: #fca5a5; }
@media (prefers-color-scheme: light) {
.feedback.ok .feedback-title { color: #166534; }
.feedback.bad .feedback-title { color: #991b1b; }
}
.feedback-answer { margin-bottom: 8px; }
.feedback-explain { color: var(--text-dim); font-size: 15px; line-height: 1.55; }
.feedback-explain p { margin: 0 0 10px; }
.feedback-explain p:last-child { margin-bottom: 0; }
.feedback-list {
list-style: disc outside;
padding-left: 20px;
margin: 4px 0 10px;
}
.feedback-list li { margin: 2px 0; }
.feedback-refs {
margin-top: 14px !important;
padding-top: 10px;
border-top: 1px solid var(--glass-border);
font-size: 12.5px;
color: var(--muted);
}
.feedback-refs strong { color: var(--text); }
.actions { display: flex; flex-direction: column; gap: 10px; }
.grade-row { display: flex; gap: 8px; }
.grade-row .btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
line-height: 1.15;
padding-top: 10px;
padding-bottom: 10px;
}
.grade-label { font-weight: 600; font-size: 1rem; }
.grade-hint { font-size: 0.72rem; opacity: 0.78; font-weight: 500; letter-spacing: 0.01em; }
.grade-help { margin-bottom: 2px; line-height: 1.35; }
@media (max-width: 420px) {
.grade-hint { font-size: 0.66rem; }
.grade-label { font-size: 0.95rem; }
}
.hidden { display: none !important; }
/* Prev + Next nav row — Prev ghost on the left, Next primary on the right,
similar sizes so the pair reads as one control. Sits inside .actions so it
stacks below any grade-row (review mode never passes onPrev, so this row
only appears in practice mode today). */
.nav-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.nav-row .nav-prev,
.nav-row .nav-next { flex: 0 1 auto; min-width: 120px; }
/* ─── Install-app prompt (mobile only) ───────────────────────────────── */
/* Floats above the fixed bottom nav. The install-prompt module only ever
inserts this element on mobile viewports, but the media query below keeps
it off-screen on tablet/desktop widths regardless. */
.install-banner {
position: fixed;
left: 12px;
right: 12px;
/* Bottom nav is ~64px tall + safe-area inset. Clear that plus 10px gap. */
bottom: calc(74px + env(safe-area-inset-bottom, 0px));
z-index: 60;
background: var(--glass-strong);
backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
border: 1px solid var(--glass-border);
border-radius: 14px;
padding: 12px 14px;
box-shadow: 0 12px 36px rgba(3, 8, 24, 0.28);
animation: install-rise 0.32s ease-out both;
}
.install-banner.hidden { display: none !important; }
.install-banner-inner {
display: flex;
align-items: center;
gap: 12px;
}
.install-banner-icon {
font-size: 24px;
line-height: 1;
flex: 0 0 auto;
}
.install-banner-text {
flex: 1 1 auto;
min-width: 0;
font-size: 14px;
line-height: 1.35;
}
.install-banner-text strong { display: block; font-weight: 700; }
.install-banner-sub { display: block; font-size: 12.5px; margin-top: 2px; }
.install-banner-actions {
display: flex;
gap: 6px;
flex: 0 0 auto;
align-items: center;
}
.install-banner-actions .btn {
padding: 7px 12px;
font-size: 13px;
min-width: 0;
}
.ios-share-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 2px;
border: 1px solid var(--glass-border);
border-radius: 4px;
vertical-align: -4px;
color: var(--text-dim);
}
@keyframes install-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* On tablet/desktop the bottom nav is static and there's plenty of room —
don't show the install CTA, mirroring the JS-side viewport check. */
@media (min-width: 900px) {
.install-banner { display: none !important; }
}
/* ─── Session summary ────────────────────────────────────────────────── */
.summary { text-align: center; padding: 34px 20px; }
.big-score {
font-size: 48px; font-weight: 800; margin: 16px 0 4px;
background: linear-gradient(135deg, #2dd4bf 0%, #0ea5e9 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.02em;
}
.big-pct { font-size: 26px; font-weight: 600; color: var(--text-dim); margin-bottom: 22px; }
.summary-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* ─── Exam mode ──────────────────────────────────────────────────────── */
.exam-bar {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px;
background: var(--glass);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
border-radius: var(--radius);
border: 1px solid var(--glass-border); margin-bottom: 14px;
font-size: 14px; gap: 10px; flex-wrap: wrap;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.exam-timer { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; font-size: 15px; }
.exam-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.exam-nav .btn { min-width: 120px; }
/* Dashboard vertical rhythm — keep every section visually separated. */
.dash { display: flex; flex-direction: column; gap: 16px; }
.dash > .two-col { margin-top: 0; } /* .dash gap handles spacing; avoid double gap */
/* Home vertical rhythm — hero, stats, card grid, recent exams, bookmarks. */
.home { display: flex; flex-direction: column; gap: 16px; }
/* Breakdown tables */
.two-col { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
@media (min-width: 720px) { .two-col { grid-template-columns: 1fr 1fr; } }
.bd {
background: var(--glass);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
border: 1px solid var(--glass-border);
border-radius: var(--radius); padding: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.bd-table { width: 100%; border-collapse: collapse; }
.bd-table td, .bd-table th { padding: 6px 8px; font-size: 14px; }
.bd-table .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.bd-table .bar-cell { width: 40%; }
.bar {
height: 8px; background: var(--glass-weak); border-radius: 4px; overflow: hidden;
border: 1px solid var(--glass-border);
}
.bar span {
display: block; height: 100%;
background: linear-gradient(90deg, #2dd4bf, #0ea5e9);
border-radius: 4px;
box-shadow: 0 0 12px rgba(45,212,191,.45);
}
/* ─── Bottom nav ─────────────────────────────────────────────────────────
* Calm clinical bottom nav — single tonal language. SVG fills inherit
* currentColor (set in index.html) so the active state lights up
* --primary while inactive tabs sit at --text-dim. Subtle frosted
* surface, slate hairline border, no candy shadow. */
.bottomnav {
position: fixed; left: 0; right: 0; bottom: 0;
/* 6 columns to accommodate Home / Practice / Review / Multiplayer /
Flashcards / Stats. Each column is `minmax(0, 1fr)` so labels can
truncate gracefully on narrow viewports instead of forcing the
whole nav wider than the screen. */
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
background: var(--glass-strong);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
border-top: 1px solid var(--border);
padding: 6px 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom));
z-index: 20;
box-shadow: 0 -1px 2px rgba(15, 23, 42, .04), 0 -4px 16px rgba(15, 23, 42, .06);
}
.bottomnav a {
display: flex; flex-direction: column; align-items: center;
padding: 9px 4px 7px;
color: var(--text-dim);
text-decoration: none;
font-size: var(--text-xs); gap: 3px;
transition: color var(--dur-1) var(--ease),
background var(--dur-1) var(--ease),
transform var(--dur-1) var(--ease);
border-radius: var(--radius-sm);
min-width: 0; /* let grid track shrink below content width */
}
/* Truncate labels that don't fit (notably "Multiplayer" on narrow
viewports — 6 tabs × ~12px font at <380px viewport runs out of
horizontal room). Icon stays full-size; the label ellipsizes
gracefully instead of forcing the nav to overflow. */
.bottomnav a .label {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bottomnav a .icon {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
}
.bottomnav a .icon svg {
width: 22px; height: 22px;
transition: transform var(--dur-2) var(--ease);
}
.bottomnav a.active {
color: var(--primary);
background: var(--primary-soft);
font-weight: 600;
}
.bottomnav a.active .icon svg { transform: translateY(-1px); }
.bottomnav a:hover { color: var(--ink); }
.bottomnav a:hover .icon svg { transform: translateY(-1px); }
.bottomnav a.active:hover { color: var(--primary); }
/* ─── Toast stack ────────────────────────────────────────────────────────
* Multiple toasts can fire close together (a save + a streak milestone +
* a network warning all firing in the same tick is plausible). Stack them
* vertically instead of letting the last one clobber the rest. Each toast
* is its own element with its own enter/exit transition.
*
* Position: above the bottom nav (with safe-area inset on iPhone), centered
* horizontally. The stack wrapper itself is pointer-events:none so toasts
* never block taps to underlying UI; individual toasts opt back in for the
* click-to-dismiss interaction.
*/
#toast-stack {
position: fixed;
left: 50%;
bottom: calc(80px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
z-index: 30;
display: flex;
flex-direction: column-reverse; /* newest at the bottom of the stack visually */
gap: 8px;
pointer-events: none;
width: max-content;
max-width: calc(100vw - 24px);
}
.toast {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px 10px 12px;
border-radius: 999px;
background: var(--glass-strong);
backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-3);
color: var(--text);
font-size: var(--text-sm);
font-weight: 500;
line-height: 1.4;
pointer-events: auto;
cursor: pointer;
user-select: none;
/* Animation states. The from-state is the default (out-of-stage); the
`.toast-in` class commits the to-state via transition; `.toast-out`
reverses (with a slight downward drift to feel like a dismissal). */
opacity: 0;
transform: translateY(20px) scale(.96);
transition:
opacity 220ms ease,
transform 280ms cubic-bezier(.22, .9, .35, 1);
}
.toast-in { opacity: 1; transform: translateY(0) scale(1); }
.toast-out { opacity: 0; transform: translateY(8px) scale(.96); }
@media (prefers-reduced-motion: reduce) {
.toast { transition: opacity 120ms ease; transform: none !important; }
.toast-in, .toast-out { transform: none !important; }
}
/* Status icon — colored circle with a single character glyph. Kept as
a flexible 22×22 square so character-width variations (i / ! / ✓ / ✕)
don't shift the layout. */
.toast-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 13px;
font-weight: 800;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #fff;
line-height: 1;
}
.toast-msg {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Variant color mapping — only the icon background and the border change
per variant; the toast body keeps the neutral glass look so the visual
hierarchy is "icon shouts variant, body reads message". */
.toast-ok { border-color: rgba(34, 197, 94, .45); }
.toast-ok .toast-icon { background: #22c55e; }
.toast-warn { border-color: rgba(245, 158, 11, .45); }
.toast-warn .toast-icon { background: #f59e0b; }
.toast-bad { border-color: rgba(239, 68, 68, .45); }
.toast-bad .toast-icon { background: #ef4444; }
.toast-info { border-color: rgba(45, 212, 191, .40); }
.toast-info .toast-icon { background: var(--primary, #14b8a6); }
/* Hover: slight lift + brighter border so users notice it's clickable. */
.toast:hover {
box-shadow: 0 18px 56px rgba(3, 8, 24, 0.55);
transform: translateY(-1px);
}
/* ─── Responsive: tablet / desktop ───────────────────────────────────── */
@media (min-width: 900px) {
main#view { padding-bottom: 40px; }
.bottomnav {
position: static;
padding: 0;
max-width: 860px; margin: 0 auto 16px;
border-radius: var(--radius);
background: var(--glass);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow);
}
.bottomnav a { padding: 12px 8px; font-size: 13px; flex-direction: row; gap: 8px; }
}
/* ─── Site footer ────────────────────────────────────────────────────── */
.site-footer {
max-width: 860px;
margin: 8px auto 0;
padding: 18px 20px 140px; /* bottom padding clears fixed mobile nav */
text-align: center;
}
.site-footer .footer-copy {
padding: 12px 0;
border-top: 1px solid var(--glass-border);
color: var(--muted);
font-size: 12.5px;
letter-spacing: .01em;
}
@media (min-width: 900px) {
.site-footer { padding-bottom: 40px; }
}
/* ─── Dashboard hero (welcoming header on /dashboard) ─────────────────
Mirrors the home hero's vibe but with a stats-page identity:
eyebrow with date stamp, larger gradient headline, adaptive subtitle.
Sits at the very top of the dashboard before the stat grid. */
/* Dashboard hero — same calm-clinical pattern as the home .hero:
flat surface with a teal accent stripe on the leading edge. The
previous teal-sky gradient panel + gradient h1 fill mismatched
the new palette and read as marketing-y. */
.dash-hero {
position: relative;
margin: 4px 0 18px;
padding: 20px 22px 18px 26px;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-1);
overflow: hidden;
}
.dash-hero::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--primary);
border-radius: var(--radius) 0 0 var(--radius);
}
.dash-hero-row {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
}
.dash-hero-text { min-width: 0; flex: 1 1 auto; }
.dash-hero-eyebrow {
font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 4px;
}
.dash-hero h1 {
margin: 0 0 6px;
font-size: var(--text-2xl); line-height: 1.2;
color: var(--ink);
font-weight: 700;
letter-spacing: -0.011em;
/* Solid ink — no gradient text fill. */
background: none;
-webkit-background-clip: initial; background-clip: initial;
-webkit-text-fill-color: initial;
}
.dash-hero-sub {
margin: 0;
font-size: var(--text-base); line-height: 1.5;
color: var(--text-dim);
}
@media (max-width: 540px) {
.dash-hero { padding: 16px 16px 14px 22px; }
.dash-hero h1 { font-size: var(--text-xl); }
.dash-hero-sub { font-size: var(--text-sm); }
}
/* ─── Subscription: pro chip, lock badges, paywall, upgrade page ───── */
.hero-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.hero-row h1 { margin: 0; }
.hero-greeting {
display: flex; align-items: center; gap: 12px;
min-width: 0;
}
/* Stats-loaded hero variant — greeting + Pro pill on top row, divider,
then a row of glanceable chips (streak, today, due, accuracy). The
chip palette uses light pastel fills with darker text from the same
ramp for legibility. Hover lift is gentle so non-link chips don't
feel falsely interactive. */
.hero-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.hero-text h1 { margin: 0; }
.hero-subtitle { font-size: 13px; margin: 0; line-height: 1.4; }
.hero-divider {
border: 0;
height: 1px;
background: var(--border, rgba(148, 163, 184, 0.2));
margin: 12px 0;
}
.hero-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.hero-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-decoration: none;
border: 0.5px solid transparent;
transition: filter .12s, transform .12s;
}
a.hero-chip { cursor: pointer; }
a.hero-chip:hover { filter: brightness(0.96); transform: translateY(-1px); }
.hero-chip-streak { background: #FAEEDA; color: #633806; border-color: rgba(186, 117, 23, 0.18); }
.hero-chip-today { background: #E6F1FB; color: #0C447C; border-color: rgba(24, 95, 165, 0.18); }
.hero-chip-due { background: #FBEAF0; color: #72243E; border-color: rgba(153, 53, 86, 0.18); }
.hero-chip-due.hero-chip-zero { background: var(--glass-weak, rgba(148,163,184,0.12)); color: var(--text-dim, var(--muted)); border-color: var(--border, rgba(148,163,184,0.18)); }
.hero-chip-accuracy { background: var(--glass-weak, rgba(148,163,184,0.12)); color: var(--text-dim, var(--muted)); border-color: var(--border, rgba(148,163,184,0.18)); }
.hero-chip-quota { background: #FCEBEB; color: #791F1F; border-color: rgba(163, 45, 45, 0.18); }
@media (max-width: 480px) {
.hero-chips { gap: 6px; }
.hero-chip { padding: 4px 9px; font-size: 11.5px; }
}
.pro-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
background: linear-gradient(135deg, rgba(45,212,191,.18), rgba(14,165,233,.18));
border: 1px solid rgba(45,212,191,.35);
color: #5eead4;
text-decoration: none;
white-space: nowrap;
}
.pro-chip-free {
color: var(--muted);
background: var(--glass);
border-color: var(--glass-border);
}
.pro-chip-free:hover { color: #5eead4; border-color: rgba(45,212,191,.4); }
.lock-badge {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase;
color: #fbbf24;
background: rgba(251,191,36,.10);
border: 1px solid rgba(251,191,36,.30);
border-radius: 999px;
vertical-align: 1px;
}
/* Locked action cards get a subtler look + a small lock accent via the badge. */
.action-card.locked { opacity: .85; }
.action-card.locked:hover { opacity: 1; }
/* Paywall interstitial */
.paywall {
max-width: 640px;
margin: 24px auto;
}
.paywall-card {
text-align: center;
padding: 32px 28px;
}
.paywall-icon {
font-size: 40px; line-height: 1;
margin-bottom: 8px;
}
.paywall-eyebrow {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .12em;
color: #5eead4;
font-weight: 700;
margin-bottom: 6px;
}
.paywall-title { margin: 4px 0 8px; font-size: 22px; }
.paywall-body { color: var(--muted); margin: 0 auto 18px; max-width: 440px; }
.paywall-actions {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
margin-top: 4px;
}
.paywall-note { margin-top: 16px; }
/* Dashboard free-tier lock card (in-page teaser, not full paywall) */
.dash-lock {
border: 1px solid rgba(94, 234, 212, .22);
background: linear-gradient(180deg, rgba(94, 234, 212, .07), rgba(94, 234, 212, .02));
}
.dash-lock-head {
display: flex; align-items: flex-start; gap: 14px;
margin-bottom: 10px;
}
.dash-lock-icon {
font-size: 28px; line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}
.dash-lock-eyebrow {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .12em;
color: #5eead4;
font-weight: 700;
margin-bottom: 2px;
}
.dash-lock-title { margin: 0; font-size: 19px; }
.dash-lock-list {
list-style: none;
padding: 0;
margin: 8px 0 18px;
display: grid; gap: 8px;
}
.dash-lock-list li {
display: flex; align-items: center; gap: 10px;
color: var(--fg);
}
.dash-lock-bullet {
display: inline-grid; place-items: center;
width: 26px; height: 26px;
font-size: 15px;
border-radius: 8px;
background: rgba(94, 234, 212, .10);
flex-shrink: 0;
}
.dash-lock-actions {
display: flex; gap: 10px; flex-wrap: wrap;
}
/* Upgrade page */
.upgrade { max-width: 960px; margin: 0 auto; }
.upgrade-hero { text-align: center; margin: 8px 0 24px; }
.upgrade-eyebrow {
display: inline-block;
font-size: 30px;
text-transform: uppercase;
letter-spacing: .18em;
color: #5eead4;
font-weight: 800;
margin-bottom: 16px;
}
.upgrade-hero h1 { margin: 2px 0 10px; }
.upgrade-lede { max-width: 580px; margin: 0 auto; }
.upgrade-current {
margin-top: 14px;
display: inline-block;
padding: 8px 14px;
border-radius: 999px;
background: var(--glass);
border: 1px solid var(--glass-border);
color: var(--muted);
font-size: 13.5px;
}
.upgrade-current .link { color: #5eead4; text-decoration: none; margin-left: 6px; }
/* ─── Intro promo banner ────────────────────────────────────────────────
Shown to non-Pro users only on /upgrade. Mirrors the amber promo box
in the day-1 email so a user who clicked through from the email sees
a continuous visual identity. Two-column layout: price on the left,
copyable promo-code chip on the right.
Pulse animation (.intro-promo-banner-pulse) fires when the user lands
here from the email's Try Pro CTA (?promo=Intro) — a subtle
attention-pull so they can spot the offer they came for. */
.intro-promo-banner {
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
margin: 8px 0 18px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 1px solid #f59e0b;
border-radius: var(--radius);
box-shadow: 0 4px 18px rgba(245,158,11,.18), inset 0 1px 0 rgba(255,255,255,.4);
color: #78350f;
}
.intro-promo-left { flex: 1 1 240px; min-width: 0; }
.intro-promo-eyebrow {
font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: #92400e; margin-bottom: 4px;
}
.intro-promo-price {
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
margin-bottom: 4px;
}
.intro-promo-amount {
font-size: 30px; font-weight: 800; color: #92400e; line-height: 1;
}
.intro-promo-amount-sub { font-size: 14px; font-weight: 600; color: #78350f; }
.intro-promo-fineprint {
font-size: 12.5px; color: #78350f; opacity: .9; line-height: 1.4;
}
.intro-promo-fineprint s { color: #a16207; }
.intro-promo-right {
display: flex; flex-direction: column; align-items: stretch; gap: 6px;
min-width: 160px;
}
.intro-promo-codelabel {
font-size: 11px; font-weight: 600; color: #92400e; opacity: .85;
letter-spacing: .04em; text-transform: uppercase; text-align: center;
}
.intro-promo-codechip {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px; padding: 12px 18px;
background: #ffffff;
border: 2px dashed #b45309;
border-radius: 8px;
cursor: pointer;
font: inherit;
transition: transform .12s ease, box-shadow .12s ease, background .12s;
}
.intro-promo-codechip:hover {
background: #fffbeb;
box-shadow: 0 4px 12px rgba(180,83,9,.25);
transform: translateY(-1px);
}
.intro-promo-codechip:active { transform: translateY(0); }
.intro-promo-codechip-copied {
background: #d1fae5;
border-color: #059669;
}
.intro-promo-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-weight: 800; font-size: 17px; letter-spacing: .1em;
color: #b45309;
}
.intro-promo-codechip-copied .intro-promo-code { color: #059669; }
.intro-promo-copyicon { font-size: 14px; opacity: .8; }
/* Subtle pulse for users who arrived from the email's Intro CTA so they
can immediately spot the offer they came for. Fires twice and stops. */
@keyframes intro-promo-pulse {
0% { box-shadow: 0 4px 18px rgba(245,158,11,.18), inset 0 1px 0 rgba(255,255,255,.4); }
50% { box-shadow: 0 6px 28px rgba(245,158,11,.45), inset 0 1px 0 rgba(255,255,255,.4); }
100% { box-shadow: 0 4px 18px rgba(245,158,11,.18), inset 0 1px 0 rgba(255,255,255,.4); }
}
.intro-promo-banner-pulse {
animation: intro-promo-pulse 1.4s ease-in-out 2;
}
@media (max-width: 480px) {
.intro-promo-banner { flex-direction: column; align-items: stretch; gap: 12px; }
/* When the parent switches to column direction, the left side's
`flex: 1 1 240px` (sized for a 240px desktop COLUMN WIDTH) becomes a
240px MIN-HEIGHT — inflating the price block with empty space below
the fineprint. Reset to auto so it sizes to content. */
.intro-promo-left { flex: 0 0 auto; }
.intro-promo-right { min-width: 0; }
}
.plan-grid {
display: grid; gap: 16px;
grid-template-columns: 1fr;
margin: 16px 0 24px;
}
@media (min-width: 720px) {
.plan-grid { grid-template-columns: 1fr 1fr; }
}
.plan-card {
position: relative;
padding: 24px 22px;
border-radius: var(--radius);
background: var(--glass);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow);
}
.plan-card-featured {
border-color: rgba(45,212,191,.45);
box-shadow: 0 10px 40px rgba(20,184,166,.12);
background: linear-gradient(160deg, rgba(45,212,191,.08), var(--glass) 70%);
}
.plan-ribbon {
position: absolute; top: -10px; right: 18px;
padding: 3px 10px;
font-size: 11px; font-weight: 700; letter-spacing: .06em;
color: #0a0f1f;
background: linear-gradient(135deg, #2dd4bf, #0ea5e9);
border-radius: 999px;
}
.plan-name {
font-size: 14px; font-weight: 600; letter-spacing: .02em;
color: var(--muted); text-transform: uppercase;
}
.plan-price { margin: 6px 0 2px; display: flex; align-items: baseline; gap: 6px; }
.plan-amount { font-size: 34px; font-weight: 700; }
.plan-per { color: var(--muted); font-size: 14px; }
.plan-sub { font-size: 13px; margin-bottom: 14px; }
.plan-cta { width: 100%; }
.plan-cta[disabled] { opacity: .6; cursor: not-allowed; }
.plan-points {
list-style: none; padding: 0; margin: 14px 0 0;
font-size: 14px; color: var(--muted);
}
.plan-points li { padding: 4px 0; }
.plan-points li::before { content: "✓ "; color: #5eead4; font-weight: 700; }
.compare-card table.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-card .compare th,
.compare-card .compare td {
padding: 10px 8px;
border-bottom: 1px solid var(--glass-border);
text-align: left;
}
.compare-card .compare th:nth-child(2),
.compare-card .compare th:nth-child(3),
.compare-card .compare td.cmp-cell {
text-align: center; width: 72px;
}
.compare-card .cmp-pro { color: #5eead4; font-weight: 700; }
.faq-card p { margin: 8px 0; color: var(--muted); font-size: 14px; }
.faq-card p strong { color: var(--text); }
/* Home hero free-tier quota strip */
.home-quota {
margin-top: 14px;
padding: 12px 14px;
border-radius: var(--radius-s);
background: var(--glass);
border: 1px solid var(--glass-border);
}
.home-quota-done {
border-color: rgba(251,191,36,.45);
background: rgba(251,191,36,.06);
}
.home-quota-label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
font-size: 13px;
color: var(--muted);
margin-bottom: 8px;
}
.home-quota-label strong { color: var(--text); }
.home-quota-label .link { color: #5eead4; text-decoration: none; font-weight: 600; }
.home-quota-bar {
height: 6px;
background: rgba(255,255,255,.06);
border-radius: 999px; overflow: hidden;
}
.home-quota-bar > span {
display: block; height: 100%;
background: linear-gradient(90deg, #2dd4bf, #0ea5e9);
border-radius: 999px;
transition: width .3s ease;
}
.home-quota-done .home-quota-bar > span { background: linear-gradient(90deg, #fbbf24, #f97316); }
/* Practice-filter quota banner (above the filter form) */
.quota-banner {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
margin: 4px 0 14px;
padding: 12px 14px;
border-radius: var(--radius-s);
background: linear-gradient(135deg, rgba(45,212,191,.08), rgba(14,165,233,.06));
border: 1px solid rgba(45,212,191,.30);
}
.quota-banner-done {
background: rgba(251,191,36,.08);
border-color: rgba(251,191,36,.45);
}
.quota-text { font-size: 13.5px; color: var(--text); }
.quota-text strong { color: var(--text); }
.quota-cta { white-space: nowrap; }
/* Account page subscription pill — bumped up so the Pro/Free state reads
at a glance from the right side of the Subscription row, instead of
getting lost next to the heading. */
.sub-pill {
display: inline-block;
padding: 6px 16px;
border-radius: 999px;
font-size: 14px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
}
.sub-pill-pro {
color: #0f766e;
background: linear-gradient(135deg, rgba(94,234,212,.35), rgba(45,212,191,.20));
border: 1px solid rgba(45,212,191,.55);
box-shadow: 0 2px 8px rgba(45,212,191,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.sub-pill-free {
color: var(--muted);
background: var(--glass);
border: 1px solid var(--glass-border);
}
/* ─── "Edited" badge ────────────────────────────────────────────────── */
.tag-edited {
color: #5eead4;
background: rgba(45,212,191,.12);
border-color: rgba(45,212,191,.30);
}
/* ─── Modal overlay (edit form) ──────────────────────────────────────── */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(5,10,25,.45);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
display: flex; align-items: flex-start; justify-content: center;
z-index: 100;
padding: 20px 12px;
overflow-y: auto;
}
.modal-card {
background: var(--glass-strong);
backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
color: var(--text);
border: 1px solid var(--glass-border-strong);
border-radius: var(--radius);
width: 100%; max-width: 640px;
padding: 24px;
box-shadow: var(--shadow-hover);
margin: auto 0;
}
.modal-card h2 { margin-bottom: 4px; }
.edit-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.edit-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-dim); }
.edit-form label > span { font-weight: 600; }
.edit-form input, .edit-form textarea, .edit-form select {
font: inherit; color: var(--text);
background: var(--glass-weak);
backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
border: 1px solid var(--glass-border);
border-radius: var(--radius-s); padding: 10px 12px;
width: 100%; box-sizing: border-box;
resize: vertical;
transition: border-color .15s, box-shadow .15s;
}
.edit-form input:focus, .edit-form textarea:focus, .edit-form select:focus {
outline: none;
border-color: rgba(45,212,191,.6);
box-shadow: 0 0 0 3px rgba(45,212,191,.18);
}
.two-col-fields { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .two-col-fields { grid-template-columns: 1fr 1fr; } }
.modal-actions {
display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px;
flex-wrap: wrap;
}
/* ─── Admin view ─────────────────────────────────────────────────────── */
.admin-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.admin-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Admin hub hero — distinguishes the admin landing from the rest of the
app with a warmer amber→coral gradient so a misclick into admin land
reads instantly. Sits at the top of /admin before the nav cards.
Same shape as the dashboard hero, different palette. */
/* Admin hero — same calm-clinical card shape as user-facing hero, but
uses the --warn (amber) accent stripe to distinguish ops console
from study surfaces. The previous orange→rose gradient panel + h1
read as too consumer-y for an internal tool; the amber stripe
keeps the "different from study pages" semantic without shouting. */
.admin-hero {
position: relative;
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
padding: 20px 22px 18px 26px; margin: 4px 0 14px;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-1);
overflow: hidden;
}
.admin-hero::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--warn);
border-radius: var(--radius) 0 0 var(--radius);
}
.admin-hero-text { flex: 1 1 auto; min-width: 0; }
.admin-hero-eyebrow {
font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em;
text-transform: uppercase;
color: var(--warn);
margin-bottom: 4px;
}
.admin-hero-text h1 {
margin: 0 0 6px;
font-size: var(--text-2xl); line-height: 1.2;
color: var(--ink);
font-weight: 700;
letter-spacing: -0.011em;
background: none;
-webkit-background-clip: initial; background-clip: initial;
-webkit-text-fill-color: initial;
}
.admin-hero-sub {
margin: 0;
font-size: var(--text-base); line-height: 1.5;
color: var(--text-dim);
}
.admin-hero-side { flex: 0 0 auto; }
@media (max-width: 540px) {
.admin-hero { padding: 16px 16px 14px 22px; }
.admin-hero-text h1 { font-size: var(--text-xl); }
.admin-hero-sub { font-size: var(--text-sm); }
}
/* ─── Images inside quiz cards ───────────────────────────────────────── */
.quiz-figure { margin: 14px 0 18px; text-align: center; }
.quiz-figure .quiz-img-wrap { margin: 0; }
.quiz-img-caption {
margin: 4px 0 0;
font-size: 13px;
color: var(--muted);
font-style: italic;
line-height: 1.4;
text-align: center;
}
.feedback .quiz-figure { margin: 10px 0 0; }
/* .quiz-img-wrap was an until the in-app lightbox
landed — now a