/* ===========================================
   CLARIVA · SHARED DESIGN TOKENS & UTILITIES · v2
   Loaded for every template-backed page (dashboards, auth).
   Tokens live ONLY here — page templates must not redefine
   them. Page-specific layout stays in each template's <style>.
   v2 (2026-09-27): one accent, liquid-glass surfaces over a static
   ambient field, SF Pro / Inter type, 3 radii.
=========================================== */

:root {
    color-scheme: dark;

    /* Surfaces — near-black green, each step ~4% lighter */
    --bg: #0a0f0c;
    --card: #111814;
    --surface: #151d18;
    --surf2: #1b251f;
    --surf3: #223029;
    --border: rgba(255, 255, 255, 0.07);
    --border-2: rgba(255, 255, 255, 0.12);

    /* One action accent; green = success; the rest are data colours */
    --amber: #f5a623;
    --amber-lt: #fbbf49;
    --green: #3dba6b;
    --green-lt: #4ade80;
    --coral: #f97316;
    --red: #f87171;
    --purple: #a78bfa;
    --blue: #60a5fa;
    --teal: #2dd4bf;
    --pink: #f472b6;

    /* Text — text-3 meets 4.5:1 on --bg */
    --text: #eef2ef;
    --text-2: #9aa9a0;
    --text-3: #75857b;

    /* Shape, depth, motion */
    --r-sm: 10px;
    --r: 14px;
    --r-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur: 0.15s;

    /* Type */
    /* SF Pro on Apple devices, Inter elsewhere. --font-mono is the small-caps
       label voice (iOS grouped-list headers), not a monospace face. */
    --font-display: -apple-system, "SF Pro Display", "Inter", system-ui, "Segoe UI", sans-serif;
    --font-ui: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
    --font-mono: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;

    /* Liquid glass material (see .lg below) */
    --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.018) 100%);
    --glass-fill-hover: linear-gradient(160deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.025) 100%);
    --glass-filter: blur(18px) saturate(190%) brightness(1.08);
    /* Frosted grain + soft top sheen painted inside the glass (static, one small tile).
       Replaces the old specular rim: gives the glass a texture of its own so the
       colour field reads as seen *through* frosted glass, not a tinted window. */
    --glass-frost: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.09'/%3E%3C/svg%3E");
    --glass-edge: rgba(255, 255, 255, 0.09);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 14px 34px rgba(0, 0, 0, 0.3);
    /* Thick material for chrome that floats over content (tab bar, sheets, bars):
       darker, denser fill so what scrolls underneath does not bleed through. */
    --glass-thick: linear-gradient(160deg, rgba(46, 58, 51, 0.62) 0%, rgba(20, 27, 23, 0.78) 55%, rgba(14, 19, 16, 0.84) 100%);
    --glass-thick-filter: blur(30px) saturate(180%);

    /* Static colour field behind the glass. Glass over a flat colour reads as grey. */
    --ambient:
        radial-gradient(60% 50% at 10% 4%, rgba(61, 186, 107, 0.2), transparent 62%),
        radial-gradient(42% 38% at 92% 14%, rgba(245, 166, 35, 0.13), transparent 64%),
        radial-gradient(55% 45% at 74% 96%, rgba(45, 212, 191, 0.11), transparent 62%),
        radial-gradient(38% 38% at 16% 88%, rgba(167, 139, 250, 0.08), transparent 64%),
        #070c09;

    /* Page gutters. The app shell does not pad template pages, so each page root
       uses these; mobile leaves room for the floating tab bar and safe areas. */
    --page-x: 16px;
    --page-top: max(env(safe-area-inset-top, 0px), 18px);
    --page-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
    :root { --page-x: 28px; --page-top: 28px; --page-bottom: 48px; }
}
@media (min-width: 1280px) {
    :root { --page-x: 40px; --page-top: 36px; --page-bottom: 56px; }
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    min-height: 100dvh;
    font-family: var(--font-ui);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

/* ── Icons (Lucide sprite: /icons/sprite.svg) ── */
.ic {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.18em;
    stroke: currentColor;
    fill: none;
}

/* The hidden attribute must win over component display rules. */
[hidden] { display: none !important; }

/* ── Layout utilities ──────────────────────── */
.wrap { position: relative; z-index: 1; }

/* ── Liquid glass ───────────────────────────
   Translucent fill + backdrop blur/saturation, a specular rim that is brighter
   where the light hits (top-left), an inner top highlight and a soft drop shadow.
   Used for cards, bars and sheets; content keeps its own contrast. */
.lg,
.glass,
.lib-card,
.lib-session,
.lib-seg,
.au-card,
.au-demo {
    position: relative;
    isolation: isolate;
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-shadow);
}
.lg::before,
.glass::before,
.lib-card::before,
.lib-session::before,
.lib-seg::before,
.au-card::before,
.au-demo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-frost); background-size: 100% 100%, 160px 160px;
    pointer-events: none;
    z-index: -1;
}

/* Glass inside glass: the inner surface must not blur again (its backdrop is only
   the parent's content, which reads as muddy grey). Tint it instead. */
:is(.lg, .glass, .lib-card, .cd-card, .au-card, .plan-card, .status-card, .section-card) :is(.lg, .glass, .sub-card, .stat-mini, .status-chip, .inline-panel, .toggle-group, .wip-insight, .lib-seg) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
:is(.lg, .glass, .lib-card, .cd-card, .au-card, .plan-card, .status-card, .section-card) :is(.lg, .glass, .lib-seg)::before { display: none; }

/* ── Specular light ──────────────────────────
   A faint white highlight that follows the pointer across glass
   (position set by /clariva-motion.v1.js; mouse/trackpad only). */
:is(.lg, .glass, .lib-card, .lib-session, .cd-card, .cd-ci, .cd-li, .fb-folder, .fb-files, .au-card)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -20%), rgba(255, 255, 255, 0.075), transparent 42%);
    opacity: 0;
    transition: opacity 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
    :is(.lg, .glass, .lib-card, .lib-session, .cd-card, .cd-ci, .cd-li, .fb-folder, .fb-files, .au-card):hover::after { opacity: 1; }
}
/* Touch: brief light under the finger (added by /clariva-motion.v1.js). */
:is(.lg, .glass, .lib-card, .lib-session, .cd-card, .cd-ci, .cd-li, .fb-folder, .fb-files, .au-card).is-lit::after {
    opacity: 1;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 60%);
    transition-duration: 0.12s;
}

/* ── Press feedback ── */
:is(.lib-card, .cd-ci, .cd-li, .fb-folder, .lib-btn, .cd-cta, .au-submit, .au-google, .lib-chip):active {
    transform: scale(0.985);
    transition-duration: 0.08s;
}

/* ── Page entry (pages without their own staggered entrance) ── */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lg, .glass { background: rgba(22, 32, 26, 0.92); }
}
@media (prefers-reduced-transparency: reduce) {
    .lg, .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: #141c17; }
}

/* Kept as a plain wrapper so older markup renders without the animated border. */
.grad-border { position: relative; border-radius: var(--r-lg); }
.grad-border > * { border-radius: var(--r-lg); }

/* ── Reveal on load (short, subtle) ────────── */
.reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.s1{transition-delay:.02s}.s2{transition-delay:.04s}.s3{transition-delay:.06s}
.s4{transition-delay:.08s}.s5{transition-delay:.10s}.s6{transition-delay:.12s}
.s7{transition-delay:.14s}.s8{transition-delay:.16s}.s9{transition-delay:.18s}

/* ── Press feedback ────────────────────────── */
.press { transition: transform 0.12s var(--ease); }
.press:active { transform: scale(0.98) !important; }

/* ── Keyboard focus, everywhere ────────────── */
:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Tabular numbers ───────────────────────── */
.count-slot { font-variant-numeric: tabular-nums; }

/* ── Skeleton value placeholder ────────────── */
@keyframes shimmerSweep { 0%{left:-55%} 100%{left:105%} }
.skel-val {
    display: inline-block; position: relative; overflow: hidden;
    min-width: 32px; min-height: 1em;
    background: rgba(255, 255, 255, 0.05); border-radius: 4px; vertical-align: middle;
}
.skel-val::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
    animation: shimmerSweep 1.5s ease-in-out infinite;
}
.skel-val.hydrated { background: transparent; min-width: 0; animation: skelReveal .25s ease-out; }
.skel-val.hydrated::after { display: none; }
@keyframes skelReveal { from{opacity:.4} to{opacity:1} }

/* ── Status dot ────────────────────────────── */
.online-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); flex-shrink: 0;
}

/* ── Scrollbar ─────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; }

/* ── Accessibility: reduced motion ─────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ═══════════════════════════════════════════
   LIBRARY PAGES (flashcards, quizzes, notes, exams)
   Markup is rendered by /clariva-library.v1.js.
═══════════════════════════════════════════ */
.lib {
    container-type: inline-size;
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--page-top) var(--page-x) var(--page-bottom);
    color: var(--text);
    font-family: var(--font-ui);
}
.lib *, .lib *::before, .lib *::after { box-sizing: border-box; }
.lib :where(button, input, select) { font: inherit; color: inherit; }
.lib :where(button) { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.lib .num { font-variant-numeric: tabular-nums; }

/* header */
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.lib-title { font-family: var(--font-display); font-size: 33px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.lib-sub { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.lib-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: 11px; white-space: nowrap;
    font-size: 14px; font-weight: 600; transition: background var(--dur), border-color var(--dur), transform var(--dur);
}
.lib-btn:active { transform: translateY(1px); }
.lib-btn.primary { background: var(--amber); color: #1a1204; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px rgba(245,166,35,.16); }
.lib-btn.primary:hover { background: var(--amber-lt); }
.lib-btn.ghost { border: 1px solid var(--border-2); color: var(--text-2); }
.lib-btn.ghost:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.lib-btn .lbl-short { display: none; }

/* toolbar */
.lib-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.lib-search { position: relative; flex: 1 1 260px; min-width: 0; }
.lib-search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.lib-search input {
    width: 100%; height: 40px; padding: 0 36px 0 38px; border-radius: 11px;
    background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
    border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); outline: none; font-size: 14px;
    transition: border-color var(--dur), background var(--dur);
}
.lib-search input::placeholder { color: var(--text-3); }
.lib-search input:focus { border-color: rgba(245,166,35,.5); background: var(--glass-fill-hover); }
.lib-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; display: none; place-items: center; color: var(--text-3); }
.lib-clear:hover { color: var(--text); background: rgba(255,255,255,.05); }
.lib-search.has-value .lib-clear { display: grid; }
.lib-select {
    height: 40px; padding: 0 34px 0 12px; border-radius: 11px; appearance: none; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa9a0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-color: rgba(255,255,255,.05); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
    border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); font-size: 14px; color: var(--text-2); outline: none;
}
.lib-select:focus { border-color: rgba(245,166,35,.45); }
.lib-select option { background: var(--surface); color: var(--text); }
.lib-seg { display: inline-flex; padding: 3px; border-radius: 12px; height: 40px; }
.lib-seg button { width: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); transition: background var(--dur), color var(--dur); }
.lib-seg button[aria-pressed="true"] { background: rgba(255,255,255,.14); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }

/* filter chips */
.lib-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--page-x)) 18px; padding: 2px var(--page-x); scroll-padding-inline: var(--page-x); }
.lib-chips::-webkit-scrollbar { display: none; }
.lib-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
    -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
    font-size: 13px; font-weight: 500; color: var(--text-2); transition: all var(--dur);
}
.lib-chip:hover { color: var(--text); border-color: var(--border-2); }
.lib-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #0a0f0c; }
.lib-chip .n { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.lib-chip[aria-pressed="true"] .n { color: rgba(10,15,12,.55); }

/* grid & cards */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.lib-card {
    position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0;
    padding: 16px; border-radius: 20px;
    cursor: pointer; transition: transform .25s var(--ease), background var(--dur);
}
.lib-card:hover { background: var(--glass-fill-hover); transform: translateY(-2px); }
.lib-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.lib-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lib-card-actions { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.lib-ico {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; font-size: 18px;
    color: var(--tone, var(--amber)); background: color-mix(in srgb, var(--tone, var(--amber)) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--amber)) 20%, transparent);
}
.lib-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(61,186,107,.14); color: var(--green-lt); }
.lib-badge.done { background: rgba(245,166,35,.14); color: var(--amber); }
.lib-card-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-card-desc { margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-tag { font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 7px; background: rgba(255,255,255,.05); color: var(--text-2); }
.lib-tag.easy { color: var(--green-lt); } .lib-tag.medium { color: var(--amber); } .lib-tag.hard { color: var(--coral); }
.lib-foot { margin-top: auto; }
.lib-prog-hd { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-bottom: 7px; }
.lib-prog-hd b { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 700; }
.lib-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.lib-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--tone, var(--amber)); transition: width .8s var(--ease); }
.lib-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; color: var(--text-3); }
.lib-meta span { display: inline-flex; align-items: center; gap: 5px; }
.lib-go { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--amber); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur), transform var(--dur); }
.lib-card:hover .lib-go, .lib-card:focus-visible .lib-go { opacity: 1; transform: none; }
@media (hover: none) { .lib-go { opacity: 1; transform: none; } }

/* list view */
.lib-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lib-grid.is-list .lib-card { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r); }
.lib-grid.is-list .lib-card:hover { transform: none; }
.lib-grid.is-list .lib-card-top { order: 0; }
.lib-grid.is-list .lib-card-top .lib-card-actions { display: none; }
.lib-grid.is-list .lib-body { flex: 1; min-width: 0; }
.lib-grid.is-list .lib-card-desc { -webkit-line-clamp: 1; min-height: 0; }
.lib-grid.is-list .lib-tags { display: none; }
.lib-grid.is-list .lib-foot { margin: 0; width: 180px; flex-shrink: 0; }
.lib-grid.is-list .lib-meta { display: none; }
.lib-list-actions { display: none; }
.lib-grid.is-list .lib-list-actions { display: flex; align-items: center; gap: 6px; }

/* more / empty / skeleton */
.lib-more { display: flex; justify-content: center; margin-top: 16px; }
.lib-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 56px 20px; border: 1px dashed rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.02); }
.lib-empty .lib-ico { width: 52px; height: 52px; font-size: 24px; }
.lib-empty h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.lib-empty p { font-size: 14px; color: var(--text-3); max-width: 36ch; line-height: 1.5; }
.lib-empty .lib-btn { margin-top: 6px; }
/* Placeholders stay invisible for 300ms: on a fast connection real content lands first and
   no placeholder is ever seen; on a slow one they fade in as quiet frosted glass. */
.is-sk { animation: clv-sk-in .35s ease .3s both; pointer-events: none; }
.lib-sk { border-radius: 8px; background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); animation: clv-sk-pulse 1.8s ease-in-out .3s infinite; }
@keyframes clv-sk-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes clv-sk-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lib-sk { animation: none; } }

/* recent sessions */
.lib-section { margin-top: 32px; }
.lib-section h2 { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.lib-sessions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.lib-session { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; }
.lib-session .t { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-session .s { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.lib-score { margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; }
.lib-score.hi { color: var(--green-lt); background: rgba(61,186,107,.12); }
.lib-score.mid { color: var(--amber); background: rgba(245,166,35,.12); }
.lib-score.lo { color: var(--coral); background: rgba(249,115,22,.12); }

.t-amber { --tone: var(--amber); } .t-green { --tone: var(--green-lt); } .t-purple { --tone: var(--purple); }
.t-blue { --tone: var(--blue); } .t-teal { --tone: var(--teal); } .t-coral { --tone: var(--coral); } .t-pink { --tone: var(--pink); }

@container (max-width: 520px) {
    .lib-title { font-size: 30px; }
    .lib-btn .lbl-long { display: none; }
    .lib-btn .lbl-short { display: inline; }
    .lib-search { flex-basis: 100%; }
    .lib-tools .lib-select { flex: 1; }
    .lib-grid.is-list .lib-foot { display: none; }
    .lib-card { gap: 12px; padding: 14px; }
    .lib-card-desc { min-height: 0; }
}
@container (min-width: 620px) {
    .lib-title { font-size: 40px; }
    .lib-chips { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
}

/* ── Ambient field (behind the glass) ──────────────────────
   Soft colour pools; they drift very slowly on large screens so the glass is
   never quite static. Transform-only animation; still on phones and for
   reduced motion (every drifting frame re-blurs the glass above it). */
.clv-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #070c09; }
.clv-ambient i { position: absolute; border-radius: 50%; will-change: transform; }
.clv-ambient i:nth-child(1) { width: 75vmax; height: 62vmax; left: -22vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(61,186,107,.26), transparent); animation: clvDriftA 46s ease-in-out infinite alternate; }
.clv-ambient i:nth-child(2) { width: 55vmax; height: 48vmax; right: -16vmax; top: -12vmax; background: radial-gradient(closest-side, rgba(245,166,35,.17), transparent); animation: clvDriftB 58s ease-in-out infinite alternate; }
.clv-ambient i:nth-child(3) { width: 68vmax; height: 55vmax; right: -8vmax; bottom: -30vmax; background: radial-gradient(closest-side, rgba(45,212,191,.15), transparent); animation: clvDriftC 52s ease-in-out infinite alternate; }
.clv-ambient i:nth-child(4) { width: 48vmax; height: 44vmax; left: -12vmax; bottom: -20vmax; background: radial-gradient(closest-side, rgba(167,139,250,.11), transparent); animation: clvDriftB 64s ease-in-out infinite alternate-reverse; }
/* Clariva's original texture: a faint hexagon lattice and fine grain over the colour field. */
.clv-ambient::before, .clv-ambient::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.clv-ambient::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); background-size: 180px 180px; opacity: 0.55; mix-blend-mode: overlay; }
.clv-ambient::after { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%233dba6b' fill-opacity='0.028'%3E%3Cpath d='M30 0l30 17.32v34.64L30 60 0 51.96V17.32z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 60px 60px; }
@keyframes clvDriftA { to { transform: translate(9vmax, 7vmax) scale(1.1); } }
@keyframes clvDriftB { to { transform: translate(-8vmax, 6vmax) scale(1.06); } }
@keyframes clvDriftC { to { transform: translate(-6vmax, -8vmax) scale(1.08); } }
@media (max-width: 1024px), (prefers-reduced-motion: reduce) { .clv-ambient i { animation: none; } }

/* ═══════════════════════════════════════════
   AUTH (login + signup)
═══════════════════════════════════════════ */
.au {
    min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr);
    position: relative; isolation: isolate; color: var(--text); font-family: var(--font-ui); background: #070c09;
}
.au-main { position: relative; z-index: 1; }
.au-story { z-index: 1; }
.au *, .au *::before, .au *::after { box-sizing: border-box; }
.au :where(button, input, select) { font: inherit; color: inherit; }
.au :where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
.au-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); text-decoration: none; letter-spacing: -0.03em; }
.au-mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--amber); color: #1a1204; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.au-mark .ic { width: 18px; height: 18px; stroke-width: 2.2; }

/* story panel (desktop only) */
.au-story { display: none; }
.au-story h2 { font-family: var(--font-display); font-size: 43px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; max-width: 12ch; }
.au-story h2 span { color: var(--amber-lt); }
.au-story p.lead { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 40ch; }
.au-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.au-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--text-2); line-height: 1.45; }
.au-points .ic { width: 18px; height: 18px; color: var(--amber); margin-top: 1px; }
.au-demo {
    margin-top: 36px; max-width: 380px; padding: 18px; border-radius: 22px;
    transform: rotate(-1.2deg);
}
.au-demo-hd { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.au-demo-q { margin-top: 12px; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
.au-demo-a { margin-top: 10px; font-size: 14px; color: var(--text-2); line-height: 1.5; padding-top: 10px; border-top: 1px dashed var(--border-2); }
.au-demo-r { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.au-demo-r span { text-align: center; font-size: 12px; font-weight: 600; padding: 8px 0; border-radius: 10px; background: rgba(255,255,255,.06); color: var(--text-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.au-demo-r span.on { background: rgba(245,166,35,.14); color: var(--amber); box-shadow: inset 0 0 0 1px rgba(245,166,35,.35); }
.au-foot-note { margin-top: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* form side */
.au-main { display: flex; flex-direction: column; justify-content: center; padding: max(env(safe-area-inset-top, 0px), 20px) 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.au-card { width: 100%; max-width: 440px; margin: 0 auto; padding: 24px 20px; border-radius: 28px; }
.au-card > .au-brand { margin-bottom: 28px; }
.au-h1 { font-family: var(--font-display); font-size: 33px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.au-sub { margin-top: 8px; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.au-steps { display: flex; gap: 6px; margin-bottom: 14px; }
.au-steps i { height: 4px; flex: 1; border-radius: 99px; background: rgba(255,255,255,.1); transition: background var(--dur); }
.au-steps i.on { background: var(--amber); }
.au-google {
    margin-top: 24px; width: 100%; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 10px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    font-size: 14px; font-weight: 500; transition: background var(--dur);
}
.au-google:hover { background: rgba(255,255,255,.11); }
.au-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.au-form { display: grid; gap: 16px; }
.au-field { display: grid; gap: 7px; }
.au-lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 500; color: var(--text-2); }
.au-lbl a { font-size: 12px; color: var(--text-3); text-decoration: none; }
.au-lbl a:hover { color: var(--amber); }
.au-input { position: relative; }
.au-input input, .au-input select {
    width: 100%; height: 48px; padding: 0 14px; border-radius: 14px; outline: none; appearance: none;
    background-color: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.12); font-size: 15px; box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
    transition: border-color var(--dur), box-shadow var(--dur);
}
.au-input select { padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa9a0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.au-input select:invalid { color: var(--text-3); }
.au-input select option { background: var(--surface); color: var(--text); }
.au-input input::placeholder { color: var(--text-3); }
.au-input input:focus, .au-input select:focus { border-color: rgba(245,166,35,.6); box-shadow: 0 0 0 3px rgba(245,166,35,.14); }
.au-input.has-eye input { padding-right: 46px; }
.au-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--text-3); }
.au-eye:hover { color: var(--text); background: rgba(255,255,255,.05); }
.au-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.au-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 2px; }
.au-rules li { list-style: none; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); transition: color var(--dur); }
.au-rules li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.14); transition: background var(--dur); }
.au-rules li.ok { color: var(--text-2); }
.au-rules li.ok::before { background: var(--green); }
.au-submit {
    height: 50px; width: 100%; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--amber); color: #1a1204; font-size: 15px; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 22px rgba(245,166,35,.18); transition: background var(--dur), opacity var(--dur);
}
.au-submit:hover { background: var(--amber-lt); }
.au-submit[disabled] { opacity: .7; cursor: wait; }
.au-btn-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.au-back { height: 50px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--text-2); font-weight: 500; }
.au-back:hover { color: var(--text); }
.au-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.is-loading .au-spin { display: inline-block; }
.au-msg { display: none; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.au-msg.show { display: flex; }
.au-msg.error { background: rgba(248,113,113,.1); color: #fecaca; box-shadow: inset 0 0 0 1px rgba(248,113,113,.25); }
.au-msg.success { background: rgba(61,186,107,.1); color: #bbf7d0; box-shadow: inset 0 0 0 1px rgba(61,186,107,.25); }
.au-msg .ic { margin-top: 1px; }
.au-alt { margin-top: 24px; text-align: center; font-size: 14px; color: var(--text-2); }
.au-alt a { color: var(--amber); font-weight: 600; text-decoration: none; }
.au-alt a:hover { text-decoration: underline; }
.au-legal { margin-top: 14px; text-align: center; font-size: 12px; color: var(--text-3); }
[data-step="2"] .au-step1, [data-step="1"] .au-step2 { display: none; }

@media (min-width: 900px) {
    .au { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .au-story {
        display: flex; flex-direction: column; padding: 40px 56px 36px;
        min-height: 100dvh; position: sticky; top: 0;
    }
    .au-story .au-story-body { margin: auto 0; padding: 40px 0; }
    .au-card > .au-brand { display: none; }
    .au-main { padding: 48px; }
    .au-card { padding: 36px 32px; }
}
@media (min-width: 1200px) { .au-story h2 { font-size: 52px; } }