/* ============================================================================
   UNIVERSITY — external portal design system · "WATCHTOWER"
   An editorial, institutional command-center academy. Ink canvas, signal-amber
   beacon accent, topographic atmosphere. Self-contained: these standalone pages
   load ONLY this stylesheet (+ Font Awesome + Google Fonts), no cp-* base.

   Type: Fraunces (display serif) · Archivo (body) · Spline Sans Mono (operational labels)
   ============================================================================ */

/* ── reset ──────────────────────────────────────────────────────── */
.uni-portal *, .uni-portal *::before, .uni-portal *::after { box-sizing: border-box; }
html, body.uni-portal { margin: 0; padding: 0; }

body.uni-portal {
    --ink: #080b10;
    --ink-2: #0b0f15;
    --surface: #111923;
    --surface-2: #18222e;
    --line: rgba(244, 240, 230, 0.09);
    --line-strong: rgba(244, 240, 230, 0.16);
    --paper: #f4f0e6;
    --paper-dim: #aab4c0;
    --paper-faint: #6a7785;
    --beacon: #f7b32b;
    --beacon-bright: #ffc54d;
    --beacon-deep: #c98708;
    /* --beacon-ink: the amber accent as TEXT/icon color — distinct from the
       --beacon/-bright/-deep trio above, which drive BACKGROUNDS (CTA
       gradient, logo badge, progress fill, avatar gradient, simulator step
       indicator, status dots) and must stay vibrant in both themes to keep
       the amber identity. Dark mode: identical to --beacon (vibrant already
       reads fine as text on the near-black canvas). Light mode redefines
       this one token to a darkened, AA-legible value while the background
       trio stays vibrant — see the light-theme block for the split value. */
    --beacon-ink: var(--beacon);
    /* --beacon-ink-bright: the hover/emphasis companion to --beacon-ink, same
       split as above. Dark mode: identical to --beacon-bright — the vibrant
       shade `.cp-btn-outline:hover`, `.uni-auth-links a:hover`,
       `.uni-complete-toggle:hover` and `.uni-verify-course` originally used
       (see git history) before the --beacon-ink split above flattened all
       four to plain --beacon-ink, which in dark mode equals --beacon and so
       reads noticeably dimmer/flatter than the bright hover pop they used to
       have. Light mode redefines this token to an amber lighter than
       --beacon-ink (but still AA-legible) — see the light-theme block below
       for the split value + contrast numbers. */
    --beacon-ink-bright: var(--beacon-bright);
    --beacon-soft: rgba(247, 179, 43, 0.13);
    /* --beacon-line: translucent amber BORDER companion to the --beacon-soft
       wash — used wherever a --beacon-soft-filled surface needs a slightly
       stronger amber edge (user chat bubble, sidebar hint). Like --beacon-soft
       it is deliberately NOT redefined in the light theme: at this alpha it
       still reads as a soft amber line on pale paper. */
    --beacon-line: rgba(247, 179, 43, 0.25);
    --beacon-glow: rgba(247, 179, 43, 0.28);
    --ember: #ff5b48;
    --ember-soft: rgba(255, 91, 72, 0.14);
    --green: #38d39f;
    --green-soft: rgba(56, 211, 159, 0.14);
    --sky: #5aa9ff;
    --sky-soft: rgba(90, 169, 255, 0.14);
    --rad-sm: 6px;
    --rad: 12px;
    --rad-lg: 18px;
    --shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.7);

    margin: 0;
    min-height: 100vh;
    background: var(--ink);
    color: var(--paper);
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
    overflow-x: hidden;
}

/* ── atmosphere: beacon glow + contour grid + grain ─────────────── */
.uni-atmos {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 70% at 50% -8%, var(--beacon-soft) 0%, transparent 46%),
        radial-gradient(80% 50% at 88% 4%, rgba(90, 169, 255, 0.07) 0%, transparent 40%),
        linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 60%);
}
/* topographic contour layer — concentric rings drifting like a coverage map */
.uni-atmos::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-image:
        repeating-radial-gradient(circle at 72% 12%, transparent 0 38px, rgba(247, 179, 43, 0.05) 38px 39px),
        repeating-radial-gradient(circle at 14% 86%, transparent 0 52px, rgba(244, 240, 230, 0.025) 52px 53px);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
            mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
    opacity: 0.9;
}
/* fine grain */
.uni-atmos::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.uni-portal > *:not(.uni-atmos) {position: relative;z-index: 1;}

/* ── type helpers ───────────────────────────────────────────────── */
.uni-serif { font-family: 'Fraunces', Georgia, serif; }
.uni-eyebrow {
    font-family: 'Spline Sans Mono', ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--beacon-ink);
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.uni-eyebrow::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--beacon);
    box-shadow: 0 0 0 0 var(--beacon-glow);
    animation: uniPulse 2.6s ease-out infinite;
}
@keyframes uniPulse {
    0% { box-shadow: 0 0 0 0 var(--beacon-glow); }
    70% { box-shadow: 0 0 0 9px rgba(247, 179, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(247, 179, 43, 0); }
}
.uni-muted { color: var(--paper-faint); font-size: 13px; }
.uni-mono { font-family: 'Spline Sans Mono', ui-monospace, monospace; }

/* ── command bar (top of every page) ────────────────────────────── */
.uni-cmd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px clamp(18px, 5vw, 56px);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(8, 11, 16, 0.85), rgba(8, 11, 16, 0.4));
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 20;
}
.uni-mark {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    color: var(--paper);
}
.uni-mark-beacon {
    position: relative;
    width: 30px; height: 30px;
    flex: none;
    border-radius: 8px;
    background: radial-gradient(circle at 50% 40%, var(--beacon-bright), var(--beacon-deep));
    box-shadow: 0 0 18px -2px var(--beacon-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    display: grid;
    place-items: center;
}
.uni-mark-beacon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.uni-mark-beacon i { color: #1a1205; font-size: 14px; }
/* Tenant logo (when uploaded) replaces the beacon badge — render true colour. */
.uni-mark-logo { height: 30px; width: auto; max-width: 160px; object-fit: contain; flex: none; }
.uni-mark-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; letter-spacing: 0.01em; line-height: 1; }
.uni-mark-name em { font-style: normal; color: var(--paper-dim); font-weight: 400; }
.uni-cmd-right { display: flex; align-items: center; gap: 12px; }
.uni-status {
    font-family: 'Spline Sans Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-dim);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.uni-status::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
}
@media (max-width: 640px) { .uni-status { display: none; } }

/* ── buttons ────────────────────────────────────────────────────── */
.uni-portal .cp-btn,
.uni-portal .uni-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 11px 20px;
    border-radius: var(--rad-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    white-space: nowrap;
    height: 42px;
    color: var(--text);
}
.uni-portal .cp-btn-primary {
    background: linear-gradient(180deg, var(--beacon-bright), var(--beacon));
    color: #1a1205;
    box-shadow: 0 10px 24px -10px var(--beacon-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.uni-portal .cp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px var(--beacon-glow), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.uni-portal .cp-btn-outline {
    background: rgba(244, 240, 230, 0.02);
    color: var(--paper);
    border-color: var(--line-strong);
}
.uni-portal .cp-btn-outline:hover { border-color: var(--beacon); color: var(--beacon-ink-bright); background: var(--beacon-soft); }
.uni-portal .cp-btn[disabled], .uni-portal .cp-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.uni-portal .cp-btn-block { width: 100%; }

/* ── hero ───────────────────────────────────────────────────────── */
.uni-catalog-main, .uni-portal-main {/* max-width: 1120px; */margin: 0 auto;padding: clamp(28px, 5vw, 64px) clamp(18px, 5vw, 56px) 80px;width: 100%;}
.uni-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 72px);
    border-bottom: 1px solid var(--line);
    margin-bottom: clamp(36px, 5vw, 60px);
}
.uni-hero-copy { max-width: 620px; }
.uni-hero h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(40px, 6.4vw, 76px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 20px 0 18px;
    color: var(--paper);
}
.uni-hero h2 em { font-style: italic; color: var(--beacon-ink); }
.uni-hero p { color: var(--paper-dim); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; margin: 0 0 28px; max-width: 52ch; }
.uni-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.uni-hero-meta { margin-top: 30px; display: flex; gap: 30px; flex-wrap: wrap; }
.uni-hero-stat b { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; color: var(--paper); display: block; line-height: 1; }
.uni-hero-stat span { font-family: 'Spline Sans Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); }

/* radar/beacon decorative dial */
.uni-hero-dial {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
}
.uni-hero-dial::before {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px solid var(--line);
    background:
        repeating-radial-gradient(circle, transparent 0 26px, rgba(244, 240, 230, 0.04) 26px 27px);
}
.uni-hero-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, var(--beacon-glow) 350deg, rgba(247, 179, 43, 0.5) 360deg);
    -webkit-mask: radial-gradient(circle, transparent 18%, #000 19%);
            mask: radial-gradient(circle, transparent 18%, #000 19%);
    animation: uniSweep 7s linear infinite;
}
.uni-hero-dial-core {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--beacon);
    box-shadow: 0 0 24px 4px var(--beacon-glow);
    z-index: 1;
}
@keyframes uniSweep { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
    .uni-hero { grid-template-columns: 1fr; }
    .uni-hero-dial { display: none; }
}

/* ── section header ─────────────────────────────────────────────── */
.uni-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.uni-section-title {
    font-family: 'Spline Sans Mono', monospace;
    font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--paper-dim); margin: 0;
    display: flex; align-items: center; gap: 10px;
}
.uni-section-title::before { content: "//"; color: var(--beacon-ink); }

/* ── course grid + cards (syllabus index) ───────────────────────── */
.uni-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.uni-course-card {
    position: relative;
    display: block;
    background: linear-gradient(180deg, var(--surface), var(--ink-2));
    border: 1px solid var(--line);
    border-radius: var(--rad);
    padding: 24px 22px 22px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* targeting-bracket corners */
.uni-course-card::before, .uni-course-card::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 1.5px solid var(--line-strong);
    transition: border-color 0.2s ease;
}
.uni-course-card::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.uni-course-card::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.uni-course-card:hover {
    transform: translateY(-4px);
    border-color: var(--beacon);
    box-shadow: 0 22px 44px -22px var(--beacon-glow);
}
.uni-course-card:hover::before, .uni-course-card:hover::after { border-color: var(--beacon); }
.uni-card-index {
    font-family: 'Spline Sans Mono', monospace;
    font-size: 12px; color: var(--beacon-ink); letter-spacing: 0.1em;
    margin-bottom: 14px; display: block;
}
.uni-course-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.uni-course-card h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 21px; line-height: 1.15; margin: 0 0 9px; color: var(--paper); }
.uni-course-card p { margin: 0 0 16px; color: var(--paper-dim); font-size: 14px; line-height: 1.55; }
.uni-course-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.uni-tag {
    font-family: 'Spline Sans Mono', monospace;
    font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--paper-dim); background: rgba(244, 240, 230, 0.04);
    border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px;
}

/* ── course detail ──────────────────────────────────────────────── */
.uni-breadcrumb { margin-bottom: 22px; }
.uni-breadcrumb a { color: var(--paper-dim); text-decoration: none; font-family: 'Spline Sans Mono', monospace; font-size: 12px; letter-spacing: 0.08em; display: inline-flex; gap: 8px; align-items: center; }
.uni-breadcrumb a:hover { color: var(--beacon-ink); }
.uni-course-detail { max-width: 820px; }
.uni-course-detail h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(32px, 5vw, 52px); line-height: 1.02; letter-spacing: -0.02em; margin: 16px 0 14px; color: var(--paper); }
.uni-course-summary { color: var(--paper-dim); font-size: 18px; line-height: 1.55; margin: 0 0 22px; }
.uni-course-description { color: var(--paper); font-size: 15.5px; line-height: 1.8; margin-bottom: 38px; opacity: 0.92; }
.uni-course-detail h3 { font-family: 'Spline Sans Mono', monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-dim); margin: 0 0 14px; }
.uni-course-detail h3::before { content: "// "; color: var(--beacon-ink); }

.uni-cohort-row {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--rad);
    background: var(--surface); margin-bottom: 12px; flex-wrap: wrap;
    transition: border-color 0.18s ease;
}
.uni-cohort-row:hover { border-color: var(--line-strong); }
.uni-cohort-row strong { color: var(--paper); }
.uni-cohort-row-right { display: flex; align-items: center; gap: 16px; }
.uni-price { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--beacon-ink); }

/* ── auth ───────────────────────────────────────────────────────── */
.uni-auth-wrap { display: grid; place-items: center; min-height: calc(100vh - 78px); padding: 40px 18px; }
.uni-auth-card {
    width: 100%; max-width: 440px;
    background: linear-gradient(180deg, var(--surface), var(--ink-2));
    border: 1px solid var(--line); border-radius: var(--rad-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.uni-auth-head { padding: 30px 32px 6px; text-align: center; }
.uni-auth-head .uni-eyebrow { margin-bottom: 14px; }
.uni-auth-head h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; margin: 0 0 6px; color: var(--paper); }
.uni-auth-head p { color: var(--paper-dim); font-size: 14px; margin: 0; }
.uni-auth-body { padding: 22px 32px 30px; }
.uni-auth-links { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; text-align: center; font-size: 13px; color: var(--paper-dim); }
.uni-auth-links a { color: var(--beacon-ink); text-decoration: none; }
.uni-auth-links a:hover { color: var(--beacon-ink-bright); }
.uni-auth-alt { text-align: center; margin: 16px 0 0; font-size: 13px; color: var(--paper-faint); }
.uni-auth-alt a { color: var(--beacon-ink); text-decoration: none; }

.uni-portal .cp-form-group { margin-bottom: 15px; }
.uni-portal .cp-form-group > label {
    display: block; margin-bottom: 7px;
    font-family: 'Spline Sans Mono', monospace;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim);
}
.uni-portal .cp-input {
    width: 100%;
    background: rgba(8, 11, 16, 0.6);
    border: 1px solid var(--line-strong);
    border-radius: var(--rad-sm);
    color: var(--paper);
    font-family: 'Archivo', sans-serif;
    font-size: 14.5px;
    padding: 11px 13px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.uni-portal .cp-input::placeholder { color: var(--paper-faint); }
.uni-portal .cp-input:focus { outline: none; border-color: var(--beacon); box-shadow: 0 0 0 3px var(--beacon-soft); }
.uni-portal .cp-input:disabled { opacity: 0.55; }
.uni-portal textarea.cp-input { resize: vertical; min-height: 70px; }
.uni-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── "Student View" preview banner (Task 12) ───────────────────────
   Single accent (a leading dot, matching .uni-status's dot idiom) — NOT a
   left-border strip. Fixed height (36px) coordinated with the two rules
   below it that shift the sticky command bar down to make room. */
.uni-preview-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 36px; padding: 8px 44px 8px 16px; box-sizing: border-box;
    background: var(--ink-2); border-bottom: 1px solid var(--beacon);
    font-family: 'Spline Sans Mono', monospace; font-size: 11.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--paper);
}
.uni-preview-dot {
    width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--beacon); box-shadow: 0 0 8px var(--beacon-glow);
}
.uni-preview-close {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--paper-dim); cursor: pointer; font-size: 14px; padding: 6px;
}
.uni-preview-close:hover { color: var(--beacon-ink); }
body.uni-preview-active { padding-top: 36px; }
body.uni-preview-active .uni-cmd { top: 36px; }

/* ── alerts ─────────────────────────────────────────────────────── */
.uni-portal .cp-alert {
    display: flex; align-items: center; gap: 10px;
    border-radius: var(--rad-sm); padding: 11px 14px; margin-bottom: 14px;
    font-size: 13.5px; border: 1px solid transparent;
}
.uni-portal .cp-alert-error { background: var(--ember-soft); color: #ffb3a8; border-color: rgba(255, 91, 72, 0.3); }
.uni-portal .cp-alert-success { background: var(--green-soft); color: #93ecc9; border-color: rgba(56, 211, 159, 0.3); }
.uni-portal .cp-alert-info { background: var(--beacon-soft); color: var(--beacon-ink); border-color: rgba(247, 179, 43, 0.28); }
.uni-portal .uni-profile-nudge span { flex: 1; }
.uni-portal .uni-profile-nudge a { color: inherit; font-weight: 600; text-decoration: underline; margin-left: 4px; }
.uni-portal .uni-profile-nudge-dismiss {
    background: none; border: none; color: inherit; opacity: 0.65; cursor: pointer; padding: 2px 4px; font-size: 12px;
}
.uni-portal .uni-profile-nudge-dismiss:hover { opacity: 1; }

/* ── status pills ───────────────────────────────────────────────── */
.uni-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Spline Sans Mono', monospace;
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    background: rgba(244, 240, 230, 0.05); color: var(--paper-dim);
    border: 1px solid var(--line);
}
.uni-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.uni-pill-level { color: var(--sky); background: var(--sky-soft); border-color: rgba(90, 169, 255, 0.25); }
.uni-pill-level::before { display: none; }
.uni-pill-enrolled, .uni-pill-paid { color: var(--green); background: var(--green-soft); border-color: rgba(56, 211, 159, 0.25); }
.uni-pill-submitted { color: var(--sky); background: var(--sky-soft); border-color: rgba(90, 169, 255, 0.25); }
.uni-pill-tos_pending, .uni-pill-pending_payment, .uni-pill-in_progress, .uni-pill-enrollment_open { color: var(--beacon-ink); background: var(--beacon-soft); border-color: rgba(247, 179, 43, 0.28); }
.uni-pill-completed { color: #b9a7ff; background: rgba(150, 130, 255, 0.14); border-color: rgba(150, 130, 255, 0.28); }
.uni-pill-withdrawn, .uni-pill-expired { color: var(--ember); background: var(--ember-soft); border-color: rgba(255, 91, 72, 0.28); }

/* Task J — Live Sessions (Google Meet) status pills. Deliberately a SEPARATE
   namespace (uni-pill-meet-*) from the generic STATUS_LABELS-driven pills
   above — 'draft'/'completed'/'in_progress' etc. are already meaningful cohort/
   enrollment statuses through the SAME .uni-pill component, and a session's
   status vocabulary must never repaint those. */
.uni-pill-meet-draft { color: var(--paper-faint); background: rgba(244, 240, 230, 0.06); border-color: var(--line-strong); }
.uni-pill-meet-scheduled, .uni-pill-meet-processing { color: var(--beacon-ink); background: var(--beacon-soft); border-color: rgba(247, 179, 43, 0.28); }
.uni-pill-meet-sent { color: var(--sky); background: var(--sky-soft); border-color: rgba(90, 169, 255, 0.25); }
.uni-pill-meet-ready { color: var(--green); background: var(--green-soft); border-color: rgba(56, 211, 159, 0.25); }
.uni-pill-meet-failed { color: var(--ember); background: var(--ember-soft); border-color: rgba(255, 91, 72, 0.28); }

/* ── dashboards (console) ───────────────────────────────────────── */
.uni-portal-head { padding: 6px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.uni-portal-head .uni-eyebrow { margin-bottom: 12px; }
.uni-portal-head h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(28px, 4vw, 40px); margin: 0 0 4px; color: var(--paper); letter-spacing: -0.01em; }

.uni-enrollment-card {
    position: relative;
    background: linear-gradient(180deg, var(--surface), var(--ink-2));
    border: 1px solid var(--line);
    border-left: 2px solid var(--beacon);
    border-radius: var(--rad);
    padding: 20px 22px; margin-bottom: 14px;
}
.uni-enrollment-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.uni-enrollment-card h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; margin: 0 0 3px; color: var(--paper); }
.uni-enrollment-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.uni-enrollment-actions .uni-muted { display: inline-flex; align-items: center; gap: 7px; }

.uni-roster { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 4px; }
.uni-roster-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.uni-roster-row:last-child { border-bottom: none; }
.uni-roster-row strong { color: var(--paper); font-weight: 600; }

/* ── Alert Wizard picker (Task G) ───────────────────────────────── */
.uni-wizard-back { margin-bottom: 22px; }
.uni-wizard-group { margin-bottom: 26px; }
.uni-wizard-drills { display: flex; flex-direction: column; gap: 10px; }
.uni-wizard-drill {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: linear-gradient(180deg, var(--surface), var(--ink-2));
    border: 1px solid var(--line); border-radius: var(--rad);
    padding: 16px 20px;
}
.uni-wizard-drill strong { color: var(--paper); font-weight: 600; }

/* ── empty / loading ────────────────────────────────────────────── */
.uni-loading { text-align: center; padding: 44px 16px; color: var(--paper-faint); }
.uni-loading i { font-size: 22px; margin-bottom: 10px; color: var(--beacon-ink); }
.uni-empty {
    text-align: center; padding: 48px 24px; color: var(--paper-dim);
    border: 1px dashed var(--line-strong); border-radius: var(--rad);
    background: rgba(244, 240, 230, 0.012);
}
.uni-empty i { font-size: 32px; margin-bottom: 12px; display: block; color: var(--paper-faint); }
.uni-empty .cp-btn { margin-top: 16px; }

/* ── TOS modal ──────────────────────────────────────────────────── */
.uni-modal { position: fixed; inset: 0; background: rgba(4, 6, 9, 0.78); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 18px; }
.uni-modal-card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line-strong); border-radius: var(--rad-lg);
    box-shadow: var(--shadow);
    max-width: 660px; width: 100%; max-height: 88vh; overflow: auto; padding: 28px;
}
.uni-modal-card h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 21px; margin: 0 0 16px; color: var(--paper); display: flex; align-items: center; gap: 10px; }
.uni-modal-card h3 i { color: var(--beacon-ink); }
.uni-tos-text { white-space: pre-wrap; font-family: 'Archivo', sans-serif; font-size: 13px; line-height: 1.7; color: var(--paper-dim); background: rgba(8, 11, 16, 0.5); border: 1px solid var(--line); border-radius: var(--rad-sm); padding: 16px; max-height: 320px; overflow: auto; }
.uni-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ── payment success ────────────────────────────────────────────── */
.uni-pay-status { text-align: center; padding: 44px 24px; }
.uni-pay-done i { font-size: 48px; color: var(--green); margin-bottom: 14px; filter: drop-shadow(0 0 20px var(--green-soft)); }
.uni-pay-done .fa-clock { color: var(--beacon-ink); filter: drop-shadow(0 0 20px var(--beacon-glow)); }
.uni-pay-done h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 26px; margin: 0 0 8px; color: var(--paper); }
.uni-pay-done p { color: var(--paper-dim); margin: 0 0 18px; }

/* ── footer ─────────────────────────────────────────────────────── */
.uni-foot { text-align: center; padding: 34px 16px; color: var(--paper-faint); font-family: 'Spline Sans Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; border-top: 1px solid var(--line); }

/* ── page-load reveal (hero + cards) ────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .uni-hero-copy > * { animation: uniRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .uni-hero-copy > *:nth-child(1) { animation-delay: 0.04s; }
    .uni-hero-copy > *:nth-child(2) { animation-delay: 0.12s; }
    .uni-hero-copy > *:nth-child(3) { animation-delay: 0.2s; }
    .uni-hero-copy > *:nth-child(4) { animation-delay: 0.28s; }
    .uni-hero-copy > *:nth-child(5) { animation-delay: 0.36s; }
    .uni-course-card { animation: uniRise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .uni-course-card:nth-child(1) { animation-delay: 0.05s; }
    .uni-course-card:nth-child(2) { animation-delay: 0.1s; }
    .uni-course-card:nth-child(3) { animation-delay: 0.15s; }
    .uni-course-card:nth-child(4) { animation-delay: 0.2s; }
    .uni-course-card:nth-child(5) { animation-delay: 0.25s; }
    .uni-course-card:nth-child(6) { animation-delay: 0.3s; }
}
@keyframes uniRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .uni-hero-sweep, .uni-eyebrow::before { animation: none; }
}

/* ── responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .uni-form-row { grid-template-columns: 1fr; }
    .uni-cohort-row-right { width: 100%; justify-content: space-between; }
    .uni-hero-meta { gap: 22px; }
}

/* ── course player ──────────────────────────────────────────────── */
.uni-player-main { max-width: 1180px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) clamp(18px, 5vw, 56px) 80px; width: 100%; }
.uni-player-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.uni-player-head h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(26px, 4vw, 40px); margin: 10px 0 14px; color: var(--paper); letter-spacing: -0.01em; }
.uni-progress-bar { height: 6px; border-radius: 999px; background: rgba(244, 240, 230, 0.08); overflow: hidden; margin-bottom: 8px; }
.uni-progress-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--beacon-deep), var(--beacon-bright)); transition: width 0.4s ease; }
.uni-player-grid { display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: start; }
.uni-day-rail { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 92px; }
.uni-day-tab { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; text-align: left; background: var(--surface); border: 1px solid var(--line); border-left: 2px solid transparent; border-radius: var(--rad); padding: 12px 14px; cursor: pointer; color: var(--paper-dim); transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease; }
.uni-day-tab:hover { border-color: var(--line-strong); color: var(--paper); }
.uni-day-tab.active { border-left-color: var(--beacon); background: var(--surface-2); color: var(--paper); }
.uni-day-tab.done .uni-day-tab-prog { color: var(--green); }
.uni-day-tab-num { font-family: 'Spline Sans Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); }
.uni-day-tab-title { font-family: 'Fraunces', serif; font-size: 15.5px; font-weight: 600; grid-column: 1; }
.uni-day-tab-prog { grid-row: 1 / span 2; grid-column: 2; font-family: 'Spline Sans Mono', monospace; font-size: 12px; color: var(--paper-faint); }
.uni-day-content { min-width: 0; }
.uni-day-header { margin-bottom: 18px; }
.uni-day-header h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px; margin: 0 0 6px; color: var(--paper); }
.uni-block { background: linear-gradient(180deg, var(--surface), var(--ink-2)); border: 1px solid var(--line); border-radius: var(--rad); margin-bottom: 16px; overflow: hidden; transition: border-color 0.18s ease; }
.uni-block.completed { border-color: rgba(56, 211, 159, 0.3); }
.uni-block-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: rgba(8, 11, 16, 0.35); flex-wrap: wrap; }
.uni-block-tag { font-family: 'Spline Sans Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); display: inline-flex; align-items: center; gap: 8px; }
.uni-block-tag i { color: var(--beacon-ink); }
.uni-block-idx { color: var(--paper-faint); }
.uni-complete-toggle { font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--paper-dim); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all 0.16s ease; }
.uni-complete-toggle:hover { border-color: var(--beacon); color: var(--beacon-ink-bright); }
.uni-complete-toggle.on { color: var(--green); border-color: rgba(56, 211, 159, 0.4); background: var(--green-soft); }
.uni-save-tag { font-family: 'Spline Sans Mono', monospace; font-size: 10.5px; color: var(--paper-faint); letter-spacing: 0.06em; }
.uni-block-body { padding: 18px 20px; }
.uni-block-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; margin: 0 0 12px; color: var(--paper); }
.uni-read-p { color: var(--paper); opacity: 0.92; line-height: 1.8; margin: 0 0 14px; }
.uni-callout { border-left: 2px solid var(--beacon); background: var(--beacon-soft); border-radius: var(--rad-sm); padding: 13px 16px; margin: 0 0 14px; color: var(--paper); line-height: 1.7; }
.uni-callout-tip, .uni-callout-success { border-left-color: var(--green); background: var(--green-soft); }
.uni-callout-warning { border-left-color: var(--ember); background: var(--ember-soft); }
.uni-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--rad); overflow: hidden; border: 1px solid var(--line); }
.uni-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.uni-lecture-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.uni-input { width: 100%; background: rgba(8, 11, 16, 0.6); border: 1px solid var(--line-strong); border-radius: var(--rad-sm); color: var(--paper); font-family: 'Archivo', sans-serif; font-size: 14.5px; padding: 10px 12px; resize: vertical; transition: border-color 0.16s ease, box-shadow 0.16s ease; }
.uni-input:focus { outline: none; border-color: var(--beacon); box-shadow: 0 0 0 3px var(--beacon-soft); }
.uni-exercise { margin-bottom: 14px; }
.uni-exercise label, .uni-drill-label { display: block; margin-bottom: 6px; font-size: 13.5px; color: var(--paper-dim); }
.uni-drill { border: 1px solid var(--line); border-radius: var(--rad); padding: 14px 16px; margin-bottom: 14px; }
.uni-drill-head { font-family: 'Spline Sans Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--beacon-ink); margin-bottom: 8px; }
.uni-drill-scenario { color: var(--paper-dim); font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.uni-drill-label { font-family: 'Spline Sans Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-faint); margin-top: 8px; }
@media (max-width: 820px) {
    .uni-player-grid { grid-template-columns: 1fr; }
    .uni-day-rail { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
    .uni-day-tab { min-width: 180px; }
}

/* ============================================================================
   IPAWS Alert Simulator (overlay) — Phase 4
   ========================================================================== */
.uni-sim-open { overflow: hidden; }
.uni-sim-overlay {
    position: fixed !important;
    inset: 0;
    z-index: 1200;
    background: radial-gradient(120% 80% at 50% -10%, var(--beacon-soft) 0%, transparent 50%), linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 60%);
    overflow-y: auto;
    animation: uniSimFade 0.2s ease;
}
@keyframes uniSimFade { from { opacity: 0; } to { opacity: 1; } }
.uni-sim-shell {/* max-width: 1240px; */margin: 0 auto;padding: 18px clamp(14px, 4vw, 40px) 60px;}
.uni-sim-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 6px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; position: sticky; top: 0; background: linear-gradient(180deg, var(--ink) 70%, transparent); z-index: 3; }
.uni-sim-top-title h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(22px, 3vw, 32px); margin: 8px 0 0; color: var(--paper); letter-spacing: -0.01em; }
.uni-sim-badge { display: inline-flex; align-items: center; gap: 7px; font-family: 'Spline Sans Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--beacon-ink); background: var(--beacon-soft); border: 1px solid rgba(247,179,43,0.3); border-radius: 999px; padding: 4px 12px; }
.uni-sim-close { background: rgba(244,240,230,0.04); border: 1px solid var(--line-strong); color: var(--paper-dim); width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 17px; transition: all 0.16s ease; flex-shrink: 0; }
.uni-sim-close:hover { color: var(--paper); border-color: var(--beacon); background: var(--beacon-soft); }

.uni-sim-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr); gap: 24px; align-items: start; }
.uni-sim-scenario { margin-bottom: 18px; }

.uni-sim-steps { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.uni-sim-step { flex: 1; min-width: 130px; display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-sm); color: var(--paper-dim); cursor: pointer; transition: all 0.16s ease; text-align: left; }
.uni-sim-step:hover { border-color: var(--line-strong); color: var(--paper); }
.uni-sim-step.active { border-color: var(--beacon); background: var(--beacon-soft); color: var(--paper); }
.uni-sim-step-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(8,11,16,0.5); border: 1px solid var(--line-strong); font-family: 'Spline Sans Mono', monospace; font-size: 12px; flex-shrink: 0; }
.uni-sim-step.active .uni-sim-step-n { background: var(--beacon); color: #1a1205; border-color: var(--beacon); font-weight: 700; }
.uni-sim-step-l { font-size: 12.5px; font-weight: 600; }
.uni-sim-step-l i { color: var(--beacon-ink); margin-right: 5px; }

.uni-sim-stepbody { background: linear-gradient(180deg, var(--surface), var(--ink-2)); border: 1px solid var(--line); border-radius: var(--rad); padding: 20px 22px; }
.uni-sim-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.uni-fld { display: flex; flex-direction: column; gap: 6px; }
.uni-fld:has(textarea), .uni-fld.uni-fld-wide { grid-column: 1 / -1; }
.uni-fld > span { font-size: 12.5px; color: var(--paper-dim); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uni-count { font-family: 'Spline Sans Mono', monospace; font-size: 10.5px; color: var(--paper-faint); }
select.uni-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23aab4c0' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }
.uni-chk-row { display: flex; flex-direction: column; gap: 8px; }
.uni-chk { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--paper); cursor: pointer; }
.uni-chk input { accent-color: var(--beacon); width: 16px; height: 16px; }
.uni-chk small { color: var(--paper-faint); font-size: 12px; }

.uni-lang-tabs { display: inline-flex; gap: 4px; background: rgba(8,11,16,0.5); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 14px; }
.uni-lang { background: transparent; border: none; color: var(--paper-faint); font-size: 12.5px; font-weight: 600; padding: 6px 16px; border-radius: 999px; cursor: pointer; transition: all 0.16s ease; }
.uni-lang.active { background: var(--beacon-soft); color: var(--beacon-ink); }

.uni-geo-row {d;display: flex;isplay: grid;grid-template-columns: 110px 1fr 38px;gap: 8px;margin-bottom: 8px;}
input.uni-input.uni-geo-code {
    min-width: 50px !important;
    width: fit-content;
}

select.uni-input.uni-geo-type {
    height: 45px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23aab4c0' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    border-radius: var(--radius-native);
    margin-right: 10px;
}
.uni-geo-del { background: var(--ember-soft); border: 1px solid rgba(255,91,72,0.3); color: #ffb3a8; border-radius: var(--rad-sm); cursor: pointer; }

button.uni-geo-del {
    width: 66px;
}
.uni-geo-del:hover { background: rgba(255,91,72,0.2); }
.uni-geo-empty { margin: 0 0 8px; }
.uni-geo-add { margin-top: 4px; }

.uni-sim-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.uni-sim-foot-right { display: flex; gap: 10px; flex-wrap: wrap; }

/* Phone / WEA preview */
.uni-sim-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 84px; }
.uni-sim-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.uni-phone {width: 300px;background: #05070a;border: 2px solid #1d242e;border-radius: 30px;padding: 14px 12px 18px;box-shadow: 0 24px 50px -18px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);position: relative;min-height: 500px;}
.uni-phone-notch { width: 70px; height: 5px; background: #1d242e; border-radius: 999px; margin: 0 auto 12px; }
.uni-phone-screen { background: linear-gradient(180deg, #11161d, #0a0d12); border-radius: 18px; padding: 12px; min-height: 230px; }
.uni-wea-banner { display: flex; align-items: center; gap: 8px; font-family: 'Spline Sans Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #1a1205; background: linear-gradient(180deg, var(--beacon-bright), var(--beacon)); padding: 7px 10px; border-radius: 10px; font-weight: 700; }
.uni-wea-msg { margin-top: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; }
.uni-wea-short { color: var(--paper); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.uni-wea-long { color: var(--paper-dim); font-size: 12px; line-height: 1.55; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.uni-wea-meta { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.uni-wea-chip { font-family: 'Spline Sans Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; color: var(--beacon); background: var(--beacon-soft); border: 1px solid rgba(247,179,43,0.25); border-radius: 999px; padding: 2px 8px; }
.uni-wea-chip-off { color: var(--paper-faint); background: rgba(8,11,16,0.5); border-color: var(--line); }
.uni-prev-counts { display: flex; gap: 14px; font-family: 'Spline Sans Mono', monospace; font-size: 10.5px; color: var(--paper-faint); }
.uni-prev-counts .over { color: #ffb3a8; }

/* Question-bank quiz player + per-question grading review (Phase F2) */
.uni-quiz-top-right { display: flex; align-items: center; gap: 14px; }
.uni-quiz-timer { font-family: 'Spline Sans Mono', monospace; font-size: 14px; color: var(--paper-faint); }
.uni-quiz-timer.urgent { color: #ff8a7a; }
.uni-quiz-form { display: flex; flex-direction: column; gap: 16px; margin: 14px 0; }
.uni-quiz-q { border: 1px solid var(--line); border-radius: var(--rad); padding: 16px 18px; background: var(--surface); }
.uni-quiz-q-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.uni-quiz-q-num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--beacon-soft); color: var(--beacon-ink); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.uni-quiz-q-prompt { flex: 1; line-height: 1.55; }
.uni-quiz-q-pts { flex: 0 0 auto; color: var(--paper-faint); font-size: 12px; }
.uni-quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.uni-quiz-opt { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--rad-sm); cursor: pointer; }
.uni-quiz-opt:hover { border-color: var(--beacon); }
.uni-quiz-opt input { margin-top: 3px; }
.uni-quiz-hint { margin: 6px 0 0; }
.uni-quiz-foot { margin: 8px 0 4px; }

/* Per-question grading review (professor grade modal) */
.uni-qg { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.uni-qg-q { border: 1px solid var(--line); border-radius: var(--rad-sm); padding: 12px 14px; }
.uni-qg-prompt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; line-height: 1.5; margin-bottom: 8px; }
.uni-qg-pts { color: var(--paper-faint); font-size: 12px; }
.uni-qg-opts { display: flex; flex-direction: column; gap: 5px; }
.uni-qg-opt { padding: 6px 10px; border-radius: var(--rad-sm); font-size: 13.5px; }
.uni-qg-opt.correct { color: var(--green); background: var(--green-soft); }
.uni-qg-opt.wrong { color: #ff8a7a; background: rgba(255, 138, 122, 0.1); }
.uni-qg-opt.chosen { font-weight: 600; }
.uni-qg-short-answer { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--rad-sm); padding: 10px 12px; white-space: pre-wrap; word-break: break-word; font-size: 13.5px; }

/* Score report */
.uni-sim-report { margin-top: 18px; }
.uni-rep-card { background: linear-gradient(180deg, var(--surface), var(--ink-2)); border: 1px solid var(--line); border-radius: var(--rad); padding: 18px 20px; }
.uni-rep-overall { display: flex; align-items: baseline; gap: 8px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.uni-rep-big { font-family: 'Fraunces', serif; font-size: 40px; font-weight: 600; line-height: 1; }
.uni-rep-of { color: var(--paper-faint); font-size: 13px; }
.uni-score-good { color: var(--green); }
.uni-score-warn { color: var(--beacon-ink); }
.uni-score-bad { color: #ff8a7a; }
.uni-rep-section { margin-bottom: 16px; }
.uni-rep-shead { display: flex; align-items: center; gap: 8px; font-family: 'Spline Sans Mono', monospace; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 8px; }
.uni-rep-shead i { color: var(--beacon-ink); }
.uni-rep-spct { margin-left: auto; font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; }
.uni-rep-dims { display: flex; flex-direction: column; gap: 7px; }
.uni-dim {display: grid;grid-template-columns: 130px 34px 1fr;gap: 10px;align-items: baseline;padding: 7px 10px;border-radius: 0;background: rgba(8,11,16,0.35);border-left: 2px solid var(--line-strong);}
.uni-dim-strong { border-left-color: var(--green); }
.uni-dim-weak { border-left-color: var(--beacon); }
.uni-dim-missing { border-left-color: var(--ember); }
.uni-dim-name { font-size: 12.5px; font-weight: 600; color: var(--paper); }
.uni-dim-score { font-family: 'Spline Sans Mono', monospace; font-size: 13px; color: var(--paper-dim); }
.uni-dim-fb { font-size: 12px; color: var(--paper-faint); line-height: 1.5; }

/* AI Instructor chat */
.uni-chat { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface), var(--ink-2)); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; height: 460px; }
.uni-chat-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: 'Spline Sans Mono', monospace; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); background: rgba(8,11,16,0.4); }
.uni-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.uni-chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.uni-msg { display: flex; gap: 9px; align-items: flex-start; }
.uni-msg-user { flex-direction: row-reverse; }
.uni-msg-ava { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--beacon-soft); color: var(--beacon-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.uni-msg-bubble { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.6; }
.uni-msg-assistant .uni-msg-bubble { background: rgba(8,11,16,0.45); border: 1px solid var(--line); color: var(--paper); border-top-left-radius: 4px; }
.uni-msg-user .uni-msg-bubble { background: var(--beacon-soft); border: 1px solid var(--beacon-line); color: var(--paper); border-top-right-radius: 4px; }
.uni-msg-tools { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.uni-tool-chip { font-family: 'Spline Sans Mono', monospace; font-size: 9.5px; letter-spacing: 0.05em; color: var(--beacon-ink); background: var(--beacon-soft); border-radius: 999px; padding: 2px 8px; }
.uni-chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.uni-chat-form .uni-input { flex: 1; }
.uni-chat-form textarea.uni-chat-input { resize: none; overflow-y: auto; max-height: 140px; line-height: 1.4; }
.uni-chat-form .cp-btn { padding: 0 14px; }

/* ============================================================================
   AI Instructor — PINNED RESIZABLE SIDEBAR (Task F)
   Docked to the right edge on studentApp/courseApp/professorApp (student and
   course-player surfaces share one persona/hint copy; professor gets its own
   hint text — see the launcher JS). NOT used by the simulator's in-wizard
   contextual chat (unchanged — still mounts .uni-chat inline via
   UniInstructorChat.mountInto()).

   Structure: <div class="uni-chat-sidebar"><button class="uni-chat-tab">…
   <div class="uni-chat-panel-inner">…<div class="uni-chat-panel-body"><div
   class="uni-chat">(UniInstructorChat's own markup)</div></div></div></div>.
   Collapsed state shrinks the whole sidebar to the tab's width (44px) rather
   than hiding it — the tab is always reachable, never fully gone.
   ============================================================================ */
.uni-chat-sidebar {
    position: fixed !important;
    top: 0; right: 0; bottom: 0;
    z-index: 900; /* above page content (1) + atmosphere (0), below .uni-modal (1000) and the theme toggle (1300) */
    display: flex;
    align-items: stretch;
    width: var(--uni-chat-w, 380px);
    max-width: 92vw;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 40px -24px rgba(0, 0, 0, 0.55);
    transition: width 0.18s ease;
}
.uni-chat-sidebar.collapsed { width: 44px; }
.uni-chat-tab {
    flex: none;
    width: 44px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--line);
    cursor: pointer;
    color: var(--beacon-ink);
    font-size: 16px;
    font-family: inherit;
}
.uni-chat-tab:hover { background: var(--beacon-soft); }
.uni-chat-tab-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Spline Sans Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-dim);
}
.uni-chat-panel-inner { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.uni-chat-sidebar.collapsed .uni-chat-panel-inner { display: none; }
.uni-chat-resize {
    position: absolute;
    left: -3px; top: 0; bottom: 0;
    width: 7px;
    cursor: col-resize;
    z-index: 2;
    background: transparent;
    touch-action: none;
}
.uni-chat-resize:hover, .uni-chat-resize.dragging { background: var(--beacon-soft); }
.uni-chat-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 12px 18px;
    border-bottom: 1px solid var(--line);
}
.uni-chat-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Spline Sans Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-dim);
}
.uni-chat-panel-title i { color: var(--beacon-ink); }
.uni-chat-collapse {
    background: none;
    border: none;
    color: var(--paper-faint);
    cursor: pointer;
    font-size: 14px;
    padding: 5px 7px;
    border-radius: var(--rad-sm);
}
.uni-chat-collapse:hover { color: var(--beacon-ink); background: var(--beacon-soft); }
.uni-chat-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 14px 0 18px;
    padding: 10px 12px;
    background: var(--beacon-soft);
    border: 1px solid var(--beacon-line);
    border-radius: var(--rad-sm);
    font-size: 12.5px;
    color: var(--paper);
    line-height: 1.5;
}
.uni-chat-hint span { flex: 1; }
.uni-chat-hint-close { flex: none; background: none; border: none; color: var(--paper-faint); cursor: pointer; font-size: 12px; line-height: 1; padding: 2px; }
.uni-chat-hint-close:hover { color: var(--beacon-ink); }
.uni-chat-panel-body { flex: 1; min-height: 0; display: flex; padding: 12px 14px 14px 18px; }
/* The inner UniInstructorChat renders its OWN header (.uni-chat-head) — inside
   the sidebar that would stack a second "AI Instructor" label under the panel
   head above, so it's hidden here (the .uni-chat block used standalone, e.g.
   the simulator's inline mount, keeps its header exactly as before). */
.uni-chat-panel-body .uni-chat { flex: 1; height: auto; min-height: 0; border: none; border-radius: 0; background: none; }
.uni-chat-panel-body .uni-chat-head { display: none; }

/* Desktop: content flexes to make room, never overlaps. A `uni-chat-mounted`
   body class always reserves the collapsed-tab's 44px (the tab is never fully
   hidden); `uni-chat-open` additionally reserves the full current width. Both
   the sticky command bar and the centered `.uni-portal-main`/`.uni-player-main`
   are plain-flow, width:auto elements, so body's padding-right already shrinks
   them — no per-element overrides needed. */
@media (min-width: 900px) {
    body.uni-portal.uni-chat-mounted { padding-right: 44px; transition: padding-right 0.18s ease; }
    body.uni-portal.uni-chat-mounted.uni-chat-open { padding-right: var(--uni-chat-w, 380px); }
    body.uni-portal.uni-chat-mounted .uni-theme-toggle { right: calc(44px + 20px); }
    body.uni-portal.uni-chat-mounted.uni-chat-open .uni-theme-toggle { right: calc(var(--uni-chat-w, 380px) + 20px); }
}

/* Mobile (<900px): a full-height right OVERLAY drawer — never pushes content.
   Default CLOSED (only the edge tab peeks); the same edge tab / collapse
   button toggle it open. Fixed drawer width (not the resize-handle value —
   dragging by touch on a narrow viewport is more hazard than feature; the
   resize handle itself is hidden below). Sidebar translates off to the right
   until only the 44px tab remains on-screen, mirroring the desktop
   collapsed-but-reachable behavior. */
@media (max-width: 899px) {
    .uni-chat-sidebar {
        width: min(420px, 92vw) !important;
        transform: translateX(calc(100% - 44px));
        transition: transform 0.22s ease;
    }
    .uni-chat-sidebar:not(.collapsed) { transform: translateX(0); }
    .uni-chat-resize { display: none; }
    /* The drawer covers most of a narrow viewport when open — hide the
       floating theme toggle rather than try to squeeze it in beside it. */
    body.uni-portal.uni-chat-open .uni-theme-toggle { display: none; }
}

@media (max-width: 900px) {
    .uni-sim-grid { grid-template-columns: 1fr; }
    .uni-sim-side { position: static; }
    .uni-sim-fields { grid-template-columns: 1fr; }
}

/* ============================================================================
   STUDENT — profile card (dashboard)
   ============================================================================ */
.uni-profile-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--rad-lg);
    padding: 22px 24px;
    margin: 0 0 34px;
    box-shadow: var(--shadow);
}
.uni-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.uni-profile-id { display: flex; align-items: center; gap: 14px; }
.uni-avatar {
    width: 50px; height: 50px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px;
    color: #1a1205; background: linear-gradient(150deg, var(--beacon-bright), var(--beacon-deep));
    flex: 0 0 auto;
}
.uni-profile-id h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; margin: 0; color: var(--paper); }
.uni-profile-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 26px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line);
}
.uni-profile-grid div { margin: 0; }
.uni-profile-grid dt {
    font-family: 'Spline Sans Mono', monospace; font-size: 11px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--paper-faint); margin: 0 0 3px;
}
.uni-profile-grid dd { margin: 0; color: var(--paper); font-size: 15px; }
.uni-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .uni-form-row { grid-template-columns: 1fr; } }

/* ============================================================================
   DOCUMENT pages (binder + certificate) — a light "paper" sheet on the dark
   canvas, print-optimized for browser "Save as PDF".
   ============================================================================ */
.uni-doc-main { max-width: unset margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(14px, 4vw, 40px) 70px; width: 100%; }
.uni-doc-cert .uni-doc-main { max-width: 1040px; }
.bn-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 22px; flex-wrap: wrap; }
.bn-toolbar-r { display: flex; gap: 10px; flex-wrap: wrap; }

/* paper sheet */
.bn-sheet, .cert-sheet {
    background: #faf7f0;
    color: #20242b;
    border-radius: var(--rad);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75);
    overflow: hidden;
}
.bn-sheet { padding: clamp(26px, 4vw, 48px); }

/* ── binder cover ── */
.bn-cover { border-bottom: 2px solid #1c5247; padding: 0 0 22px; margin: 0 0 24px; }
.bn-cover-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.bn-cover .uni-eyebrow { color: #1c5247; }
.bn-cover .uni-eyebrow::before { background: #1c5247; }
.bn-cover h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(26px, 4vw, 38px); line-height: 1.1; margin: 0 0 12px; color: #16201c; letter-spacing: -0.01em; }
.bn-cover-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: #5b6770; margin: 0 0 18px; }
.bn-cover-meta i { color: #1c5247; margin-right: 5px; }
.bn-cover-student { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px; }
.bn-cover-student dt { font-family: 'Spline Sans Mono', monospace; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: #8a949c; margin: 0 0 2px; }
.bn-cover-student dd { margin: 0; font-size: 15px; font-weight: 600; color: #20242b; }
.bn-cover-cert {
    display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0;
    font-family: 'Spline Sans Mono', monospace; font-size: 12px; color: #8a6d1f;
    background: rgba(169, 128, 47, 0.12); border: 1px solid rgba(169, 128, 47, 0.3);
    padding: 6px 12px; border-radius: 999px;
}
.bn-cover-cert i { color: #a9802f; }

/* ── binder summary stats ── */
.bn-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 30px; }
.bn-stat { background: #fff; border: 1px solid #e7e1d4; border-radius: var(--rad-sm); padding: 14px 16px; text-align: center; }
.bn-stat-num { display: block; font-family: 'Fraunces', serif; font-weight: 600; font-size: 26px; color: #1c5247; line-height: 1; }
.bn-stat-lbl { display: block; font-size: 11px; color: #6b757d; margin-top: 5px; }
@media (max-width: 620px) { .bn-summary { grid-template-columns: repeat(2, 1fr); } }

.bn-block { margin: 0 0 30px; }
.bn-h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; color: #16201c; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid #e7e1d4; display: flex; align-items: center; gap: 9px; }
.bn-h2 i { color: #dc4a1e; font-size: 17px; }

/* ── binder assessments table ── */
.bn-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bn-table th { text-align: left; font-family: 'Spline Sans Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a949c; padding: 0 10px 8px; border-bottom: 1px solid #e7e1d4; }
.bn-table td { padding: 9px 10px; border-bottom: 1px solid #efe9dd; color: #2b3038; vertical-align: top; }
.bn-num { font-weight: 600; }
.bn-pass { color: #1c5247; font-size: 12px; margin-left: 6px; }
.bn-fail { color: #dc4a1e; font-size: 12px; margin-left: 6px; }
.bn-fb-row td { background: #fbf4ec; font-size: 13px; color: #4a525a; }
.bn-fb-label { font-family: 'Spline Sans Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #a9802f; margin-right: 8px; }

/* ── binder day + entries ── */
.bn-day { margin: 0 0 22px; padding: 0 0 4px; }
.bn-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.bn-day-head h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; color: #16201c; margin: 0; }
.bn-day-num { font-family: 'Spline Sans Mono', monospace; font-size: 12px; color: #dc4a1e; margin-right: 8px; }
.bn-day-done { color: #1c5247; font-size: 12px; font-weight: 600; }
.bn-day-done i { margin-right: 4px; }
.bn-day-desc { color: #6b757d; font-size: 13px; margin: 0 0 12px; }
.bn-empty-day { font-size: 13px; margin: 4px 0 0; }

.bn-entry { border: 1px solid #e7e1d4; border-radius: var(--rad-sm); padding: 14px 16px; margin: 0 0 12px; background: #fff; }
.bn-entry-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.bn-entry-head h4 { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15px; color: #20242b; margin: 0; }
.bn-type { font-family: 'Spline Sans Mono', monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: #1c5247; padding: 3px 7px; border-radius: 4px; flex: 0 0 auto; }
.bn-art { margin: 0 0 12px; }
.bn-art:last-child { margin-bottom: 0; }
.bn-art-label { font-family: 'Spline Sans Mono', monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #8a6d1f; margin: 0 0 5px; }
.bn-art-body { font-size: 14px; line-height: 1.6; color: #2b3038; white-space: normal; }
.bn-art-sim .bn-art-body { background: #fbf4ec; border-left: 3px solid #dc4a1e; padding: 10px 12px; border-radius: 0 4px 4px 0; }
.bn-art-meta { margin-top: 6px; font-size: 11px; }
.bn-score { font-family: 'Spline Sans Mono', monospace; font-size: 11px; color: #1c5247; background: rgba(28, 82, 71, 0.1); padding: 2px 7px; border-radius: 999px; margin-left: 8px; }
.bn-draft { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px dashed #ece5d8; }
.bn-draft:last-child { border-bottom: none; }
.bn-draft-tag { font-family: 'Spline Sans Mono', monospace; font-size: 10px; color: #1c5247; flex: 0 0 96px; }
.bn-draft-text { flex: 1; font-size: 13px; color: #2b3038; }
.bn-draft-count { font-family: 'Spline Sans Mono', monospace; font-size: 10px; color: #a0a8af; flex: 0 0 auto; }
.bn-foot { margin: 26px 0 0; padding: 14px 0 0; border-top: 1px solid #e7e1d4; font-family: 'Spline Sans Mono', monospace; font-size: 11px; color: #9aa3ab; text-align: center; }

/* ============================================================================
   CERTIFICATE
   ============================================================================ */
.cert-sheet { padding: clamp(18px, 3vw, 34px); }
.cert-frame {
    border: 2px solid #1c5247; border-radius: 8px; position: relative;
    padding: clamp(34px, 6vw, 70px) clamp(24px, 5vw, 60px);
    text-align: center; background:
        radial-gradient(120% 80% at 50% -10%, rgba(169, 128, 47, 0.07), transparent 55%), #fffdf8;
    box-shadow: inset 0 0 0 6px #fffdf8, inset 0 0 0 7px rgba(169, 128, 47, 0.35);
}
.cert-seal {
    width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    color: #fffdf8; background: linear-gradient(150deg, #1c5247, #0f2e28);
    box-shadow: 0 0 0 4px rgba(28, 82, 71, 0.14);
}
.cert-org { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; color: #16201c; letter-spacing: 0.01em; }
.cert-org em { color: #a9802f; font-style: italic; }
.cert-kicker { font-family: 'Spline Sans Mono', monospace; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #a9802f; margin: 16px 0 24px; }
.cert-presented { font-size: 14px; color: #6b757d; margin: 14px 0 6px; font-style: italic; }
.cert-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(30px, 6vw, 50px); color: #16201c; margin: 4px 0; line-height: 1.05; letter-spacing: -0.01em; }
.cert-org-sub { font-size: 14px; color: #5b6770; margin: 0 0 4px; }
.uni-roster-row-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uni-cert-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid rgba(22, 32, 28, 0.12); border-radius: 12px; margin-bottom: 10px; }
.uni-cert-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cert-logo { max-height: 64px; max-width: 240px; object-fit: contain; margin: 0 auto 10px; display: block; }
.cert-sample-badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'Spline Sans Mono', monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #a9802f; border: 1px dashed #a9802f; border-radius: 999px; padding: 5px 12px; }
.cert-course { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(20px, 3.5vw, 28px); color: #1c5247; margin: 8px 0 4px; }
.cert-level { font-family: 'Spline Sans Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a6d1f; }
.cert-cohort { font-size: 14px; color: #6b757d; margin: 6px 0 0; }
.cert-foot { display: flex; justify-content: center; gap: clamp(24px, 6vw, 72px); margin: clamp(30px, 5vw, 52px) 0 0; flex-wrap: wrap; }
.cert-foot-col { text-align: center; }
.cert-foot-val { font-size: 15px; color: #20242b; font-weight: 600; padding: 0 0 7px; border-bottom: 1px solid #cbc4b3; min-width: 150px; }
.cert-foot-val.cert-mono { font-family: 'Spline Sans Mono', monospace; font-size: 13px; }
.cert-foot-val.cert-sig { font-family: 'Fraunces', serif; font-style: italic; }
.cert-foot-lbl { font-family: 'Spline Sans Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #9aa3ab; margin-top: 6px; }

/* ============================================================================
   PRINT — strip portal chrome, sheet fills the page in black-on-white
   ============================================================================ */
@media print {
    @page { margin: 14mm; }
    body.uni-doc { background: #fff !important; }
    .uni-atmos, .no-print, .bn-toolbar, .uni-theme-toggle, .uni-chat-sidebar { display: none !important; }
    .uni-doc-main { max-width: none; margin: 0; padding: 0; }
    .bn-sheet, .cert-sheet { box-shadow: none !important; border-radius: 0; }
    .bn-entry, .bn-day { break-inside: avoid; }
    .cert-frame { box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px rgba(169, 128, 47, 0.5) !important; }
    a[href]::after { content: ""; }
}

/* ── certificate verification terminal ──────────────────────────── */
.uni-verify-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; gap: 22px; }
.uni-verify-card { width: 100%; max-width: 560px; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--line-strong); border-radius: var(--rad-lg); box-shadow: var(--shadow); padding: 44px 40px 40px; text-align: center; animation: uniVerifyIn .5s cubic-bezier(.2,.7,.2,1) both; }
.uni-verify-status { font-size: 16px; color: var(--paper-dim); margin: 18px 0 4px; }
.uni-vscan { width: 88px; height: 88px; margin: 8px auto 0; display: grid; place-items: center; border-radius: 50%; font-size: 34px; color: var(--beacon-ink); background: var(--beacon-soft); box-shadow: 0 0 0 0 var(--beacon-glow); animation: uniPulse 1.6s ease-out infinite; }
.uni-vstamp { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px; font-family: 'Spline Sans Mono', monospace; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; color: var(--green); background: var(--green-soft); border: 1px solid rgba(56,211,159,.4); animation: uniStamp .42s cubic-bezier(.2,1.4,.3,1) both; }
.uni-vstamp i { font-size: 17px; }
.uni-vstamp-bad { color: var(--ember); background: var(--ember-soft); border-color: rgba(255,91,72,.4); }
.uni-eyebrow-ok { color: var(--green); } .uni-eyebrow-ok::before { background: var(--green); }
.uni-eyebrow-bad { color: var(--ember); } .uni-eyebrow-bad::before { background: var(--ember); animation: none; }
.uni-verify-lead { color: var(--paper-faint); font-size: 13.5px; margin: 16px 0 4px; }
.uni-verify-name { font-size: 30px; line-height: 1.15; font-weight: 600; margin: 2px 0; }
.uni-verify-org { color: var(--paper-dim); font-size: 14px; margin-top: 4px; }
.uni-verify-course { font-size: 21px; font-weight: 600; color: var(--beacon-ink-bright); margin: 2px 0 6px; }
.uni-verify-level { display: inline-block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-faint); }
.uni-verify-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 22px; padding-top: 22px; border-top: 1px solid var(--line); text-align: left; }
.uni-verify-meta dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 4px; }
.uni-verify-meta dd { margin: 0; font-size: 13px; color: var(--paper); word-break: break-word; }
.uni-verify-pdf { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: var(--rad); background: var(--beacon); color: #1a1205; font-weight: 600; text-decoration: none; transition: transform .12s ease, filter .12s ease; }
.uni-verify-pdf:hover { transform: translateY(-1px); filter: brightness(1.05); }
.uni-verify-foot { color: var(--paper-faint); font-size: 11px; letter-spacing: .1em; }
@keyframes uniVerifyIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes uniStamp { 0% { opacity: 0; transform: scale(1.6) rotate(-7deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .uni-verify-card, .uni-vstamp, .uni-vscan { animation: none !important; } }

/* ============================================================================
   PROFESSOR PORTAL — grading queue + read-only course content (Task 11)
   ============================================================================ */
.uni-pill-graded { color: var(--green); background: var(--green-soft); border-color: rgba(56, 211, 159, 0.25); }

/* cohort-card action row badge (pending-grading count on the Grading button) */
.uni-action-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
    border-radius: 999px; font-family: 'Spline Sans Mono', monospace; font-size: 10.5px; font-weight: 600;
    color: #1a1205; background: var(--beacon);
}

/* inline list boxes under a cohort card (grading + course content), mirrors .uni-roster */
.uni-grading-list, .uni-course-content { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 4px; }

.uni-grade-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; font-family: inherit; color: inherit; transition: background 0.14s ease; }
.uni-grade-row:last-of-type { border-bottom: none; }
.uni-grade-row:hover { background: rgba(244, 240, 230, 0.03); }
.uni-grade-row strong { color: var(--paper); font-weight: 600; }
.uni-grade-row-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.uni-grade-score { font-family: 'Spline Sans Mono', monospace; font-size: 13px; color: var(--paper-dim); }

/* grading modal — student's alert payload summary */
.uni-grade-alert { border: 1px solid var(--line); border-radius: var(--rad-sm); padding: 14px 16px; margin: 0 0 16px; background: rgba(8, 11, 16, 0.35); }
.uni-grade-alert-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.uni-grade-rubric { border: 1px solid var(--line); border-radius: var(--rad-sm); padding: 12px 16px; margin: 0 0 16px; background: rgba(8, 11, 16, 0.35); }
.uni-grade-rubric-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uni-grade-rubric-head .uni-block-title { margin: 0; font-size: 15px; }
.uni-grade-rubric-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.uni-grade-rubric-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* course-content accordion (read-only day-by-day view) */
.uni-content-day { border: 1px solid var(--line); border-radius: var(--rad); margin-bottom: 10px; overflow: hidden; }
/* Task I — the day-head toggle button and the "Edit in Studio" launch button are
   SIBLINGS in a flex row (not nested — two <button>s can't nest), so the row itself
   carries the layout that used to live on .uni-content-day-head alone. */
.uni-content-day-headrow { display: flex; align-items: stretch; background: var(--surface); }
.uni-content-day-headrow .uni-content-day-head { flex: 1; min-width: 0; width: auto; }
.uni-content-day-headrow .uni-day-studio-btn { flex-shrink: 0; margin: 8px 10px 8px 0; height: auto; padding: 8px 14px; }
.uni-content-day-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: var(--surface); border: none; cursor: pointer; color: var(--paper); text-align: left; font-family: inherit; }
.uni-content-day-head .uni-day-tab-title { flex: 1; }
.uni-content-day-head i.fa-chevron-down { color: var(--paper-faint); transition: transform 0.16s ease; }
.uni-content-day-head.open i.fa-chevron-down { transform: rotate(180deg); }
.uni-content-day-body { padding: 14px 18px 18px; border-top: 1px solid var(--line); background: var(--ink-2); }
.uni-content-day-body .uni-block:last-child { margin-bottom: 0; }

/* Task J — Live Sessions (Google Meet) card. One card per day, shown at the top
   of the day's content body (professor) or day view (student). Status conveyed
   ONCE via the leading-dot pill above — a plain 1px border, no extra accent. */
.uni-meet-session { border: 1px solid var(--line); border-radius: var(--rad-sm); padding: 14px 16px; margin: 0 0 16px; background: rgba(8, 11, 16, 0.35); }
.uni-meet-session-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.uni-meet-session-title { font-weight: 600; color: var(--paper); }
.uni-meet-session-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.uni-meet-session-recap { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.uni-meet-session-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.uni-meet-session-attendance { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.uni-meet-attendance-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--paper-faint); }

/* ============================================================================
   Course Studio embed (professor "Edit in Studio", Task I) — full-screen iframe
   overlay, same top-layer convention as the IPAWS simulator overlay above
   (.uni-sim-overlay): a plain solid --ink backdrop (the Studio iframe paints its
   OWN chrome immediately, so no gradient/atmosphere needed underneath it) sitting
   below the always-reachable theme toggle (z-index 1300). Single accent (none
   here at all, actually — status/chrome all live INSIDE the iframe) — no stacked
   borders on this shell.
   ========================================================================== */
body.uni-studio-open { overflow: hidden; }
.uni-studio-overlay { position: fixed !important; inset: 0; z-index: 1200; background: var(--ink); }
.uni-studio-iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================================
   LIGHT THEME — body.uni-portal.uni-light (Task 14)
   Default stays DARK; this activates only once a visitor opts in via the
   toggle (initThemeToggle() in client/portal/_portalBase.js, persisted to
   localStorage.uniPortalTheme). Warm paper, not sterile white — ink text,
   everything token-driven so components below need zero changes.

   --beacon/-bright/-deep stay at their vibrant dark-mode values here on
   purpose (NOT redefined — falls through to the root block above) because
   they drive BACKGROUNDS: the primary-CTA gradient, header logo badge,
   grading badge, progress fill, avatar gradient and simulator step indicator
   all key off them, each pairing a vibrant amber fill with a fixed dark
   `#1a1205` ink label/icon (hardcoded, not `var(--ink)` — `--ink` means
   "page canvas" and flips to a light paper tone in this very block, so it
   can't double as an always-dark foreground). Darkening the trio itself
   (an earlier version of this fix) muddied every one of those backgrounds
   AND still failed AA on the `#1a1205` label since the two darkened together.
   The one foreground-only user of the amber accent — `--beacon-ink` — is
   redefined below instead: dark mode reads it as `var(--beacon)` (identity,
   see root block), light mode darkens it to an AA-legible value against
   both `--ink` and `--surface`, including behind a `--beacon-soft` wash
   (verified ~4.96–5.47:1 across those combinations — comfortably clears 4.5:1).

   Every selector here is deliberately over-qualified (`.uni-portal.uni-light`,
   3 classes) so it outranks this file's base rules on specificity alone —
   correct regardless of source order, since these overrides sit at the very
   end of the file next to the component they patch would otherwise be miles
   away. Two categories:
     1. Token redefinitions (comment "tokens") — everything else in this file
        already reads through var(--ink)/var(--paper)/etc. and adapts for free.
     2. Bounded breakage fixes — the handful of spots that hardcoded a raw
        rgba(8,11,16,x) or rgba(244,240,230,x) literal assuming a dark canvas
        instead of reading the token, found by grepping the file for every
        hex/rgba outside the root token block. Each is a background-only fix;
        in every case the TEXT already used the token and adapts on its own.
   ============================================================================ */
body.uni-portal.uni-light {
    --ink: #f4f0e6;
    --ink-2: #f8f4ea;
    --surface: #fffcf5;
    --surface-2: #fffefa;
    --line: rgba(16, 21, 28, 0.10);
    --line-strong: rgba(16, 21, 28, 0.18);
    --paper: #10151c;
    --paper-dim: #4b5563;
    /* Darkened from #6e7882 — that shade only cleared 3.95:1 on --ink and
       4.39:1 on --surface (both below the 4.5:1 AA floor for small labels).
       #5a6570 clears 5.23:1 / 5.81:1 while staying clearly lighter/less
       contrasty than --paper-dim (6.64:1 / 7.38:1) so the two keep their
       visual hierarchy. */
    --paper-faint: #5a6570;
    /* --beacon/--beacon-bright/--beacon-deep: intentionally NOT redefined —
       see the block comment above. They keep the vibrant dark-mode values
       from the root block so backgrounds retain the amber identity. */
    --beacon-ink: #8a580a;
    /* --beacon-ink-bright: hover/emphasis companion to --beacon-ink above.
       #a06a0c is a lighter amber than --beacon-ink (#8a580a) — a visibly
       distinct "bright" step, same relationship --beacon-bright has to
       --beacon in dark mode — while staying comfortably clear of the 3:1 AA
       floor for non-text UI contrast (WCAG 1.4.11): 4.05:1 against --ink
       (#f4f0e6) and 4.49:1 against --surface (#fffcf5), computed via the
       standard relative-luminance formula. (Raw --beacon-bright #ffc54d
       would only clear ~1.38:1 / 1.54:1 against those same backgrounds —
       nowhere near legible, which is why this needs its own light-mode
       value rather than just using --beacon-bright directly.) */
    --beacon-ink-bright: #a06a0c;
    --ember: #b8341f;
    --green: #0a7a55;
    --sky: #1a63c4;
    --shadow: 0 18px 50px -18px rgba(40, 30, 12, 0.20);
    /* --beacon-soft/-glow, --ember-soft, --green-soft, --sky-soft, --rad-* are
       deliberately NOT redefined: checked against the darker text tokens above
       at their existing dark-mode alpha and they still clear AA as translucent
       washes behind the darker text (radii carry no color, N/A either way). */
}

/* atmosphere — subtle warm grain/vignette standing in for the dark glow, same
   layered structure (radial highlight → contour rings → grain), recalibrated
   so the contour rings read as faint INK lines on paper instead of vanishing
   (they were faint PAPER lines meant to show up on the dark canvas). */
.uni-portal.uni-light .uni-atmos {
    background:
        radial-gradient(120% 70% at 50% -8%, var(--beacon-soft) 0%, transparent 46%),
        radial-gradient(80% 50% at 88% 4%, rgba(26, 99, 196, 0.05) 0%, transparent 40%),
        linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 60%);
}
.uni-portal.uni-light .uni-atmos::before {
    background-image:
        repeating-radial-gradient(circle at 72% 12%, transparent 0 38px, rgba(150, 96, 10, 0.06) 38px 39px),
        repeating-radial-gradient(circle at 14% 86%, transparent 0 52px, rgba(16, 21, 28, 0.035) 52px 53px);
    opacity: 0.7;
}
.uni-portal.uni-light .uni-atmos::after { opacity: 0.025; }
.uni-portal.uni-light .uni-hero-dial::before {
    background: repeating-radial-gradient(circle, transparent 0 26px, rgba(16, 21, 28, 0.05) 26px 27px);
}

/* command bar — frosted warm-paper bar instead of the dark-canvas gradient
   (was a hardcoded rgba(8,11,16,x) fade assuming a dark page underneath it) */
.uni-portal.uni-light .uni-cmd {
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.88), rgba(255, 252, 245, 0.55));
}

/* form fields — recessed warm-paper well instead of the near-black fill
   (cp-input covers every auth/profile/TOS form; uni-input covers the course
   player + simulator wizard). background-color, NOT the `background` shorthand:
   select.uni-input (below) sets background-position/-repeat via longhand at
   lower specificity than a shorthand override here would carry, and the
   shorthand's implied resets would have clobbered the dropdown-arrow layout. */
.uni-portal.uni-light .cp-input,
.uni-portal.uni-light .uni-input {
    background-color: rgba(16, 21, 28, 0.045);
}
.uni-portal.uni-light select.uni-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234b5563' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}

/* focus indicator — the base rules (`.uni-portal .cp-input:focus`, `.uni-input:focus`
   below) ride the vibrant `--beacon` for the focus border, which is only ~1.7:1
   against this theme's pale paper (`--ink`/`--surface`) — well under the 3:1 AA
   floor for non-text UI contrast. Swap to the AA-legible `--beacon-ink` here, in
   light mode only; dark mode keeps `--beacon` (plenty of contrast on the
   near-black canvas, and matches the vibrant amber identity everywhere else). */
.uni-portal.uni-light .cp-input:focus,
.uni-portal.uni-light .uni-input:focus {
    border-color: var(--beacon-ink);
}

/* nested "sunken" surfaces that hardcoded the same dark-canvas wash — the
   block-type bar, TOS text panel, score-report dimension rows, grading-modal
   alert summary, chat header, and assistant chat bubble. Their text already
   reads var(--paper)/var(--paper-dim)/var(--paper-faint) above and adapts on
   its own; only the background needed a paper-side counterpart. */
.uni-portal.uni-light .uni-block-bar,
.uni-portal.uni-light .uni-tos-text,
.uni-portal.uni-light .uni-dim,
.uni-portal.uni-light .uni-grade-alert,
.uni-portal.uni-light .uni-meet-session {
    background: rgba(16, 21, 28, 0.04);
}
.uni-portal.uni-light .uni-chat-head,
.uni-portal.uni-light .uni-msg-assistant .uni-msg-bubble {
    background: rgba(16, 21, 28, 0.045);
}
.uni-portal.uni-light .uni-sim-step-n { background: rgba(16, 21, 28, 0.08); }
.uni-portal.uni-light .uni-lang-tabs { background: rgba(16, 21, 28, 0.06); }
.uni-portal.uni-light .uni-progress-bar { background: rgba(16, 21, 28, 0.08); }

/* status-state literal colors — these were tuned as a light-on-dark shade
   (readable against the dark-canvas soft-tint background) and need a
   light-on-paper counterpart; everywhere else in this file the equivalent
   text already rides var(--green)/var(--ember)/etc. and adapted for free
   from the token block above. */
.uni-portal.uni-light .cp-alert-error,
.uni-portal.uni-light .uni-geo-del,
.uni-portal.uni-light .uni-prev-counts .over,
.uni-portal.uni-light .uni-score-bad { color: var(--ember); }
.uni-portal.uni-light .cp-alert-success { color: var(--green); }
.uni-portal.uni-light .uni-pill-completed {
    color: #6d28d9; background: rgba(124, 58, 237, 0.14); border-color: rgba(124, 58, 237, 0.32);
}

/* IPAWS phone/WEA preview mock — a deliberately dark "device screen" regardless
   of portal theme (it's simulating what a phone displays); pin its internals to
   the dark-mode literal values instead of letting them ride the (now-inverted)
   theme tokens, or the alert text would go dark-on-dark inside the still-dark
   phone screen. .uni-wea-chip reads var(--beacon) in the base rule, which (per
   the token comment above) is never redefined in this block — so it already
   renders the vibrant dark-mode amber here too. Pinned explicitly anyway, same
   as its .uni-wea-chip-off sibling, so this component stays correct even if a
   future change redefines --beacon for some other reason. */
.uni-portal.uni-light .uni-wea-short { color: #f4f0e6; }
.uni-portal.uni-light .uni-wea-long { color: #aab4c0; }
.uni-portal.uni-light .uni-wea-chip { color: #f7b32b; }
.uni-portal.uni-light .uni-wea-chip-off { color: #6a7785; border-color: rgba(244, 240, 230, 0.09); }
.uni-portal.uni-light .uni-wea-msg { border-color: rgba(244, 240, 230, 0.09); }

/* theme toggle button — injected by initThemeToggle() (client/portal/_portalBase.js).
   Single accent on hover (beacon), no stacked borders. z-index clears the IPAWS
   simulator overlay (1200) so it stays reachable even with the wizard open. */
.uni-theme-toggle {
    position: fixed !important;
    right: 20px;
    bottom: 20px;
    z-index: 1300;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--paper-dim);
    font-size: 16px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.uni-theme-toggle:hover { border-color: var(--beacon); color: var(--beacon-ink); transform: translateY(-2px); }
.uni-theme-toggle:focus-visible { outline: 2px solid var(--beacon); outline-offset: 2px; }
/* Light mode: the vibrant --beacon outline is only ~1.7:1 against pale paper
   (below the 3:1 AA floor for non-text UI contrast) — swap to --beacon-ink,
   same fix as the .cp-input/.uni-input focus border above. Dark mode unchanged. */
.uni-portal.uni-light .uni-theme-toggle:focus-visible { outline-color: var(--beacon-ink); }
@media (max-width: 640px) {
    .uni-theme-toggle { right: 14px; bottom: 14px; width: 40px; height: 40px; font-size: 14px; }
}
.uni-video video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }