/* ==========================================================================
   Rayane Study Hub
   Mobile-first. The chrome stays quiet and neutral on purpose - each course
   carries a vivid colour of its own, and those are the only strong hues in
   the interface, so they read as meaning rather than decoration.
   ========================================================================== */

:root {
    /* Surfaces ---------------------------------------------------------- */
    --bg:            #f4f6fa;
    --surface:       #ffffff;
    --surface-2:     #f4f6f9;
    --surface-3:     #eceff4;
    --border:        #e5e8ef;
    --border-strong: #d3d9e3;

    /* Text -------------------------------------------------------------- */
    --text:          #111827;
    --text-soft:     #5a6577;
    --text-faint:    #98a1b0;

    /* Accents ----------------------------------------------------------- */
    --accent:        #4f46e5;
    --accent-hover:  #4338ca;
    --accent-soft:   #eef1fe;
    --accent-line:   #c9cdfa;

    --warn:          #b45309;
    --warn-soft:     #fdf3e7;
    --ok:            #15803d;
    --ok-soft:       #eaf6ee;
    --danger:        #be123c;
    --danger-soft:   #fdeef1;
    --star:          #d99a06;

    /* Shape ------------------------------------------------------------- */
    --radius-xs:  6px;
    --radius-sm:  9px;
    --radius:     14px;
    --radius-lg:  18px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px -8px rgba(16, 24, 40, .14);
    --shadow-lg: 0 2px 4px rgba(16, 24, 40, .04), 0 14px 30px -12px rgba(16, 24, 40, .22);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
            "Helvetica Neue", Arial, sans-serif;

    --topbar-h: 60px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:            #0d1117;
        --surface:       #161b23;
        --surface-2:     #1c222c;
        --surface-3:     #232a35;
        --border:        #262d38;
        --border-strong: #37404e;

        --text:          #e8ecf2;
        --text-soft:     #99a3b2;
        --text-faint:    #6b7686;

        --accent:        #7c86f4;
        --accent-hover:  #98a0f8;
        --accent-soft:   #1d2140;
        --accent-line:   #3b3f78;

        --warn:          #f0a35e;
        --warn-soft:     #2e2318;
        --ok:            #56d68b;
        --ok-soft:       #14301f;
        --danger:        #f27289;
        --danger-soft:   #33161f;
        --star:          #e3ae2b;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow:    0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px -8px rgba(0, 0, 0, .6);
        --shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 30px -12px rgba(0, 0, 0, .7);
    }
}

*, *::before, *::after { box-sizing: border-box; }

/* Any author `display` beats the browser's [hidden] rule, so an element with
   `display: grid`/`flex` stays visible even when hidden. Restore the intent. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 640; letter-spacing: -.018em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p  { margin: 0 0 .6rem; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* Times and counts line up in columns when they share a width. */
.session__time, .stat strong, .timeline__time, .pager__pos,
.queue__size, .exam__days { font-variant-numeric: tabular-nums; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: #fff; padding: .7rem 1.1rem;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

::selection { background: var(--accent-soft); color: var(--text); }

/* Touch: iOS zooms the whole page when a focused field is under 16px. */
@media (pointer: coarse) {
    input[type="text"], input[type="email"], input[type="password"], input[type="date"],
    input[type="search"], select, textarea { font-size: 16px; padding: .62rem .75rem; }

    .btn, .state-switch__btn { min-height: 44px; }
}

/* ============================================================== top bar == */

.topbar {
    display: flex; align-items: center; gap: 1.25rem;
    height: var(--topbar-h);
    padding: 0 1.25rem;
    padding-top: env(safe-area-inset-top);
    padding-left: calc(1.25rem + env(safe-area-inset-left));
    padding-right: calc(1.25rem + env(safe-area-inset-right));
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20;
}

.topbar__brand { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }

.topbar__mark {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(140deg, var(--accent), #7c6ff0);
    color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 1rem; letter-spacing: -.02em;
    box-shadow: 0 2px 6px -1px rgba(79, 70, 229, .45);
}

.topbar__names { display: flex; flex-direction: column; line-height: 1.2; }
.topbar__names strong { font-size: .95rem; letter-spacing: -.015em; }
.topbar__names small { color: var(--text-faint); font-size: .7rem; letter-spacing: .01em; }

.topbar__search { flex: 1; min-width: 0; max-width: 440px; }
.topbar__search input {
    width: 100%; padding: .5rem .85rem;
    border: 1px solid transparent; border-radius: 99px;
    background: var(--surface-2); color: var(--text);
    font: inherit; font-size: .875rem;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.topbar__search input::placeholder { color: var(--text-faint); }
.topbar__search input:focus {
    outline: none; background: var(--surface);
    border-color: var(--accent-line);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.topbar__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.topbar__logout { margin: 0; }

@media (max-width: 860px) {
    .topbar { height: auto; flex-wrap: wrap; padding-top: calc(.6rem + env(safe-area-inset-top)); padding-bottom: .6rem; gap: .65rem; }
    .topbar__names small { display: none; }
    .topbar__search { order: 3; flex-basis: 100%; max-width: none; }
}

/* ================================================================= nav == */

.nav {
    display: flex; gap: .15rem;
    padding: .4rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    position: sticky; top: var(--topbar-h); z-index: 19;
    scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav__item {
    display: flex; align-items: center; gap: .45rem;
    padding: .45rem .75rem;
    border-radius: var(--radius-sm);
    color: var(--text-soft); font-size: .865rem; font-weight: 520;
    white-space: nowrap;
    transition: background .14s, color .14s;
}
.nav__item:hover { color: var(--text); background: var(--surface-2); }
.nav__item.is-active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.nav__item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75;
                 stroke-linecap: round; stroke-linejoin: round; }

/* Phone / iPad portrait: bottom tab bar, within thumb reach. */
@media (max-width: 860px) {
    .nav {
        top: auto; bottom: 0; position: fixed; width: 100%;
        padding: .3rem .25rem; padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--border); border-bottom: none;
        justify-content: space-around; overflow-x: visible;
        box-shadow: 0 -2px 12px -6px rgba(16, 24, 40, .18);
    }
    .nav__item {
        flex-direction: column; gap: .2rem; font-size: .67rem; font-weight: 550;
        padding: .45rem .35rem; min-width: 58px; min-height: 48px;
        justify-content: center; background: none !important;
    }
    .nav__item svg { width: 21px; height: 21px; }
    .nav__item.is-active { color: var(--accent); }
    .main { padding-bottom: 5.5rem !important; }
}

/* ================================================================ main == */

.main {
    max-width: 1280px; margin: 0 auto;
    padding: 1.75rem 1.25rem 4rem;
    padding-left: calc(1.25rem + env(safe-area-inset-left));
    padding-right: calc(1.25rem + env(safe-area-inset-right));
}

.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.page-head h1 { font-size: 1.5rem; }
.page-head__sub { color: var(--text-soft); font-size: .875rem; margin: .3rem 0 0; }
.page-head__sub a { color: var(--text-soft); border-bottom: 1px solid var(--border-strong); }
.page-head__sub a:hover { color: var(--accent); border-color: var(--accent); }
.page-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.section-title {
    font-size: .74rem; font-weight: 640; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-faint);
    margin: 2rem 0 .85rem;
}
.muted { color: var(--text-soft); font-size: .85rem; }
.text-warn { color: var(--warn); font-weight: 600; }

.with-dot { display: flex; align-items: center; gap: .6rem; }

.dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    background: var(--course-colour, var(--text-faint));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--course-colour, #888) 16%, transparent);
}

/* ============================================================= buttons == */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
    font: inherit; font-size: .85rem; font-weight: 550;
    cursor: pointer; white-space: nowrap;
    transition: background .14s, border-color .14s, box-shadow .14s, transform .06s;
    box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--surface-2); border-color: var(--text-faint); }
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 1px 2px rgba(79, 70, 229, .3), 0 4px 10px -4px rgba(79, 70, 229, .5);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-soft); }
.btn--ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }

.btn--block { width: 100%; padding: .65rem; }

.btn--danger-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--danger); }
.btn--danger-ghost:hover { background: var(--danger-soft); border-color: transparent; }

/* ============================================================== alerts == */

.alert {
    padding: .7rem .95rem; border-radius: var(--radius-sm);
    font-size: .875rem; margin-bottom: 1.25rem; font-weight: 500;
    border: 1px solid transparent;
}
.alert--ok    { background: var(--ok-soft);     color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.alert--error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.alert--info  { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

/* =============================================================== cards == */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}
.card__title {
    font-size: .72rem; font-weight: 650; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-faint);
    margin-bottom: .85rem;
}

.panel { margin-bottom: 1.5rem; box-shadow: var(--shadow); }
.panel__footer {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: .6rem;
}
/* Push a destructive action away from the confirming one. */
.panel__footer .btn--danger-ghost { margin-left: auto; }

.field-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .9rem; margin-bottom: 1rem;
}
.field-grid label, .panel > label {
    display: flex; flex-direction: column; gap: .35rem;
    font-size: .78rem; font-weight: 550; color: var(--text-soft);
    letter-spacing: .005em;
}
.field-grid label.checkbox, .checkbox {
    flex-direction: row; align-items: center; gap: .45rem; font-weight: 500;
}
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="search"], select, textarea {
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
    font: inherit; font-size: .875rem;
    transition: border-color .14s, box-shadow .14s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="color"] {
    width: 52px; height: 36px; padding: 3px; cursor: pointer;
    border-radius: var(--radius-sm);
}
textarea { resize: vertical; line-height: 1.55; }

select {
    appearance: none; -webkit-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2398a1b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
}

/* =========================================================== dashboard == */

/* Every single-column fallback uses minmax(0, 1fr) rather than 1fr: a bare
   1fr track has an automatic minimum and refuses to shrink below its
   contents, which pushes the whole page into a sideways scroll on a phone. */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 1.5rem; align-items: start; }
@media (max-width: 1180px) { .dash { grid-template-columns: minmax(0, 1fr); } }

.dash__week, .dash__side { min-width: 0; }
.dash__side { display: flex; flex-direction: column; gap: 0; }

.week-nav { display: flex; gap: .35rem; align-items: center; }

.week-grid {
    display: grid; grid-template-columns: repeat(6, minmax(172px, 1fr));
    gap: .7rem; overflow-x: auto; padding-bottom: .35rem;
    scrollbar-width: thin;
}
@media (max-width: 1100px) { .week-grid { grid-template-columns: repeat(6, 178px); } }

/* Phone: "what do I have today" beats a six-wide sideways scroll. */
@media (max-width: 680px) {
    .week-grid { grid-template-columns: minmax(0, 1fr); overflow-x: visible; gap: .85rem; }
    .day { min-height: 0; }
    .day--today { order: -1; }
}

.day {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .7rem;
    min-height: 130px;
    box-shadow: var(--shadow-sm);
}
.day--today {
    border-color: var(--accent-line);
    box-shadow: 0 0 0 1px var(--accent-line), var(--shadow);
}
.day__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: .4rem;
    margin-bottom: .6rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}
.day__name {
    font-size: .78rem; font-weight: 640; text-transform: capitalize;
    letter-spacing: -.005em;
}
.day--today .day__name { color: var(--accent); }
.day__today {
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--accent); background: var(--accent-soft);
    padding: .1rem .35rem; border-radius: 4px;
}
.day__free { color: var(--text-faint); text-align: center; margin: 1.4rem 0; font-size: 1.1rem; }

.session {
    padding: .5rem .6rem; margin-bottom: .4rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border-left: 3px solid var(--course-colour, var(--text-faint));
    transition: background .14s;
}
.session:last-child { margin-bottom: 0; }
.session:hover { background: var(--surface-3); }
.session--cancelled { opacity: .48; }
.session--cancelled .session__title { text-decoration: line-through; }

/* Time and document count share a slim header row so the title beneath gets
   the column's full width. */
.session__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: .4rem; margin-bottom: .15rem; min-height: 18px;
}
.session__time {
    font-size: .69rem; font-weight: 650; color: var(--text-faint);
    letter-spacing: -.01em;
}
.session__title {
    font-size: .82rem; font-weight: 600; display: block;
    letter-spacing: -.012em; line-height: 1.35;
    overflow-wrap: break-word; hyphens: auto;
}
a.session__title:hover { color: var(--accent); }
.session__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem;
    font-size: .68rem; color: var(--text-faint); margin-top: .22rem;
}

.session__count {
    flex-shrink: 0; min-width: 19px; height: 19px; padding: 0 .3rem;
    border-radius: 99px; background: var(--accent); color: #fff;
    font-size: .66rem; font-weight: 700;
    display: grid; place-items: center;
}
.session__count--empty {
    background: transparent; color: var(--text-faint);
    border: 1px dashed var(--border-strong); font-weight: 500;
}
.session__count--empty:hover { color: var(--accent); border-color: var(--accent); }

.tag {
    padding: .05rem .32rem; border-radius: 4px;
    background: var(--surface-3); color: var(--text-soft);
    font-size: .63rem; font-weight: 600; letter-spacing: .01em;
}
.tag--exam { background: var(--danger-soft); color: var(--danger); }

.session-edit { position: relative; }
.session-edit form { position: absolute; top: .35rem; right: .35rem; margin: 0; }
.session-edit__delete {
    border: none; background: none; color: var(--text-faint);
    cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 .2rem;
    border-radius: var(--radius-xs);
}
.session-edit__delete:hover { color: var(--danger); background: var(--danger-soft); }

/* =============================================================== stats == */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: .55rem; }
.stats--wide { margin-bottom: 1.5rem; gap: .75rem; }

.stat {
    background: var(--surface-2); border-radius: var(--radius-sm);
    padding: .65rem .75rem;
}
.stats--wide .stat {
    background: var(--surface); border: 1px solid var(--border);
    padding: .9rem 1rem; box-shadow: var(--shadow-sm);
}
.stat strong { display: block; font-size: 1.3rem; font-weight: 660; letter-spacing: -.03em; }
.stats--wide .stat strong { font-size: 1.55rem; }
.stat span { font-size: .715rem; color: var(--text-faint); font-weight: 500; }
.stat--warn { color: var(--warn); }
.stat--ok   { color: var(--ok); }

.plain-list { list-style: none; margin: 0; padding: 0; }

.course-line {
    display: flex; align-items: center; gap: .55rem;
    padding: .4rem .3rem; margin: 0 -.3rem;
    border-radius: var(--radius-xs); font-size: .86rem;
    transition: background .14s;
}
.course-line:hover { background: var(--surface-2); }
.course-line__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pill {
    padding: .08rem .42rem; border-radius: 99px;
    background: var(--surface-3); color: var(--text-faint);
    font-size: .69rem; font-weight: 600; min-width: 20px; text-align: center;
}
.pill--warn { background: var(--warn-soft); color: var(--warn); }

.exam { display: flex; align-items: center; gap: .5rem; font-size: .86rem; padding: .3rem 0; }
.exam__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam__days { color: var(--warn); font-weight: 660; font-size: .78rem; }

/* ============================================================= courses == */

.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }

.course-card {
    display: flex; flex-direction: column;      /* equal heights, footer pinned */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem;
    box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
    transition: box-shadow .16s, transform .12s, border-color .16s;
}
/* Colour bar as a pseudo-element so it hugs the rounded corner cleanly. */
.course-card::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: var(--course-colour);
}
.course-card:hover {
    box-shadow: var(--shadow-lg); transform: translateY(-2px);
    border-color: var(--border-strong);
}
.course-card--archived { opacity: .55; }

.course-card__title {
    font-size: 1rem; margin-bottom: .25rem; letter-spacing: -.02em;
    padding-left: .35rem;
}
.course-card__lecturer {
    color: var(--text-soft); font-size: .8rem; margin-bottom: 1rem;
    padding-left: .35rem;
}

/* Pinning the footer keeps every card's progress bar on the same baseline
   even when one title wraps to two lines. */
.course-card__foot { margin-top: auto; padding-left: .35rem; }

.progress {
    height: 6px; background: var(--surface-3);
    border-radius: 99px; overflow: hidden; margin-bottom: .5rem;
}
.progress span {
    display: block; height: 100%; border-radius: 99px;
    background: var(--course-colour, var(--accent));
    transition: width .3s ease;
}

.course-card__stats {
    font-size: .78rem; color: var(--text-faint); margin: 0;
    display: flex; align-items: center; gap: .45rem;
}
.course-card__stats--empty { font-style: italic; opacity: .75; }

/* ============================================================ timeline == */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { display: flex; gap: .9rem; padding-bottom: 1.35rem; position: relative; }
.timeline__item::before {
    content: ""; position: absolute; left: 5px; top: 18px; bottom: 0;
    width: 2px; background: var(--border); border-radius: 2px;
}
.timeline__item:last-child::before { display: none; }
.timeline__item.is-cancelled { opacity: .5; }

.timeline__marker {
    width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex-shrink: 0;
    background: var(--course-colour); position: relative; z-index: 1;
    box-shadow: 0 0 0 3px var(--bg);
}
.timeline__content { flex: 1; min-width: 0; }
.timeline__head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.timeline__head strong { font-size: .89rem; text-transform: capitalize; letter-spacing: -.01em; }
.timeline__time { font-size: .76rem; color: var(--text-faint); }
.timeline__subject { font-size: .83rem; color: var(--text-soft); margin: .2rem 0 .45rem; }

.timeline__add {
    display: inline-block; margin-top: .35rem; font-size: .78rem;
    color: var(--text-faint); border: 1px dashed var(--border-strong);
    padding: .35rem .65rem; border-radius: var(--radius-sm);
    transition: color .14s, border-color .14s, background .14s;
}
.timeline__add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 1.75rem; align-items: start; }
@media (max-width: 1050px) { .split { grid-template-columns: minmax(0, 1fr); } }

.note { border-left: 2px solid var(--border-strong); padding-left: .7rem; margin-bottom: .8rem; }
.note p { font-size: .85rem; margin-bottom: .2rem; }
.note small { color: var(--text-faint); font-size: .72rem; }
.note-form { margin-bottom: 1rem; }
.note-form textarea { margin-bottom: .5rem; }

/* ============================================================ materials == */

.filters {
    display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
    margin-bottom: 1.25rem;
}
.filters select { width: auto; min-width: 148px; font-size: .84rem; }

.material-list { display: flex; flex-direction: column; gap: .4rem; }
.material-list--tight { gap: .3rem; }

.material {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .75rem; min-height: 50px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: border-color .14s, box-shadow .14s, transform .08s;
}
.material:hover {
    border-color: var(--border-strong); box-shadow: var(--shadow);
    transform: translateX(2px);
}

.material__badge {
    flex-shrink: 0; width: 38px; padding: .22rem 0; text-align: center;
    border-radius: var(--radius-xs);
    font-size: .6rem; font-weight: 750; letter-spacing: .04em;
    background: var(--surface-3); color: var(--text-soft);
}
.material__badge--slides { background: #fdeee4; color: #c2410c; }
.material__badge--pdf    { background: #fde9ea; color: #be123c; }
.material__badge--doc    { background: #e8effd; color: #1d4ed8; }
.material__badge--sheet  { background: #e7f6ec; color: #15803d; }
.material__badge--image  { background: #f4e9fd; color: #7c3aed; }
.material__badge--audio,
.material__badge--video   { background: #e5f5fa; color: #0e7490; }
.material__badge--notebook { background: #fdf2e3; color: #a16207; }

@media (prefers-color-scheme: dark) {
    .material__badge--slides { background: #3a2317; color: #fb923c; }
    .material__badge--pdf    { background: #3a1a20; color: #fb7185; }
    .material__badge--doc    { background: #1c2740; color: #7ea6f8; }
    .material__badge--sheet  { background: #14301f; color: #4ade80; }
    .material__badge--image  { background: #2b1f3d; color: #c084fc; }
    .material__badge--audio,
    .material__badge--video   { background: #14303a; color: #38bdf8; }
    .material__badge--notebook { background: #322611; color: #fbbf24; }
}

.material__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.material__title {
    font-size: .885rem; font-weight: 560; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.material:hover .material__title { color: var(--accent); }
.material__meta {
    font-size: .735rem; color: var(--text-faint);
    display: flex; align-items: center; gap: .3rem;
    overflow: hidden; white-space: nowrap;
}
.material__fav { color: var(--star); font-size: .92rem; }

.state {
    flex-shrink: 0; padding: .15rem .5rem; border-radius: 99px;
    font-size: .68rem; font-weight: 650; letter-spacing: .005em;
}
.state--unread  { background: var(--warn-soft);   color: var(--warn); }
.state--reading { background: var(--accent-soft); color: var(--accent); }
.state--done    { background: var(--ok-soft);     color: var(--ok); }

@media (max-width: 560px) {
    .material__meta { font-size: .7rem; }
    .state { font-size: .62rem; padding: .12rem .4rem; }
}

.pager { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.75rem; }
.pager__pos { font-size: .82rem; color: var(--text-soft); }

/* =============================================================== reader == */

.state-switch {
    display: inline-flex; padding: 3px; gap: 2px;
    border: 1px solid var(--border); border-radius: 99px;
    background: var(--surface-2); margin-bottom: 1.25rem;
}
.state-switch__btn {
    border: none; background: transparent; color: var(--text-soft);
    padding: .35rem .85rem; border-radius: 99px;
    font: inherit; font-size: .8rem; font-weight: 550; cursor: pointer;
    transition: background .14s, color .14s;
}
.state-switch__btn:hover { color: var(--text); }
.state-switch__btn.is-active {
    background: var(--surface); color: var(--accent); font-weight: 640;
    box-shadow: var(--shadow-sm);
}


.viewer { margin-top: .75rem; }
.viewer__pdf {
    width: 100%; height: 78vh; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.viewer__image {
    max-width: 100%; border-radius: var(--radius);
    border: 1px solid var(--border); box-shadow: var(--shadow);
}
.viewer__media { width: 100%; border-radius: var(--radius-sm); }
.viewer__fallback, .viewer__none {
    padding: 3rem 1.5rem; text-align: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-soft);
}
.viewer__none .btn { margin-top: .75rem; }

.viewer__touch-open { display: none; }
@media (pointer: coarse) {
    .viewer__touch-open { display: block; }
    .viewer__pdf { height: 55vh; }
}

.slides { display: flex; flex-direction: column; gap: .6rem; }
.slides__intro {
    font-size: .82rem; color: var(--text-soft);
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    padding: .7rem .95rem; border-radius: var(--radius-sm);
    margin-bottom: .3rem;
}

.slide {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1rem 1.15rem;
    box-shadow: var(--shadow-sm);
}
.slide__head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .5rem; }
.slide__number {
    flex-shrink: 0; min-width: 26px; height: 22px; padding: 0 .4rem;
    border-radius: var(--radius-xs);
    background: var(--surface-3); color: var(--text-faint);
    font-size: .7rem; font-weight: 700;
    display: grid; place-items: center;
}
.slide__title { font-size: 1rem; letter-spacing: -.02em; }
.slide__text {
    font-size: .875rem; color: var(--text-soft); line-height: 1.7;
    padding-left: 2.35rem;
}
.slide__notes {
    font-size: .8rem; color: var(--text-faint); margin: .75rem 0 0;
    padding: .6rem 0 0 2.35rem; border-top: 1px dashed var(--border);
}
.slide__notes strong { color: var(--text-soft); }

@media (max-width: 560px) {
    .slide__text, .slide__notes { padding-left: 0; }
}

/* =============================================================== search == */

.search-form { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.search-form input[type="search"] { flex: 1; min-width: 220px; }
.search-form select { width: auto; min-width: 170px; }

.results { display: flex; flex-direction: column; gap: .6rem; }
.result {
    display: block; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: .95rem 1.1rem; box-shadow: var(--shadow-sm);
    transition: border-color .14s, box-shadow .14s, transform .1s;
}
.result:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.result__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; }
.result__title { font-size: .95rem; letter-spacing: -.015em; }
.result:hover .result__title { color: var(--accent); }
.result__meta {
    font-size: .75rem; color: var(--text-faint);
    display: flex; align-items: center; gap: .35rem; margin-bottom: .5rem;
}
.result__snippet { font-size: .855rem; color: var(--text-soft); margin: 0; line-height: 1.65; }
.result__snippet mark {
    background: #fef3c7; color: #78350f; padding: .05rem .18rem;
    border-radius: 3px; font-weight: 600;
}
@media (prefers-color-scheme: dark) {
    .result__snippet mark { background: #4a3c10; color: #fcd34d; }
}

/* ============================================================= uploader == */

.dropzone {
    border: 2px dashed var(--border-strong); border-radius: var(--radius);
    padding: 3rem 1.25rem; text-align: center; cursor: pointer;
    background: var(--surface);
    transition: border-color .16s, background .16s;
}
.dropzone:hover, .dropzone:focus { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.is-dragover {
    border-color: var(--accent); background: var(--accent-soft);
    box-shadow: inset 0 0 0 3px var(--accent-soft);
}
.dropzone__inner { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.dropzone__inner strong { font-size: 1rem; letter-spacing: -.015em; }
.dropzone__icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    display: grid; place-items: center;
    font-size: 1.25rem; font-weight: 700; margin-bottom: .45rem;
}

/* No drag-and-drop on an iPad - say what tapping actually does. */
.dropzone__touch { display: none; }
@media (pointer: coarse) {
    .dropzone__desktop { display: none; }
    .dropzone__touch { display: block; }
    .dropzone { padding: 2.25rem 1rem; }
}

.queue { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.queue__item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .7rem .85rem;
    box-shadow: var(--shadow-sm);
}
.queue__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.queue__name {
    flex: 1; min-width: 0; font-size: .865rem; font-weight: 550;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.queue__name a:hover { color: var(--accent); }
.queue__size { font-size: .73rem; color: var(--text-faint); }
.queue__status { font-size: .73rem; font-weight: 650; color: var(--text-soft); }
.queue__status--ok    { color: var(--ok); }
.queue__status--error { color: var(--danger); }
.queue__status--dup   { color: var(--warn); }

.queue__bar { height: 4px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.queue__bar span { display: block; height: 100%; width: 0; background: var(--accent);
                   border-radius: 99px; transition: width .25s ease; }

.queue__pickers {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: .45rem; margin-top: .6rem;
}
.queue__select { font-size: .8rem; padding: .4rem .55rem; padding-right: 1.8rem; }
@media (max-width: 640px) { .queue__pickers { grid-template-columns: 1fr; } }
@media (pointer: coarse) { .queue__select { font-size: 16px; padding: .55rem .7rem; padding-right: 2rem; } }

/* ================================================================ misc == */

.empty {
    text-align: center; padding: 3.5rem 1.5rem; color: var(--text-soft);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.empty p:first-child { font-size: 1rem; font-weight: 550; color: var(--text); }
.empty--page { max-width: 580px; margin: 3rem auto; }
.empty__hint { font-size: .85rem; color: var(--text-faint); margin-bottom: 0; }
.empty__hint a, .empty a { color: var(--accent); font-weight: 550; }

.toolbar { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

@media (max-width: 860px) { .hide-on-touch { display: none; } }

/* =============================================================== login == */

.body--centered { display: grid; place-items: center; min-height: 100vh; padding: 1.25rem; }

.login {
    width: 100%; max-width: 360px; text-align: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 2.5rem 1.75rem;
    box-shadow: var(--shadow-lg);
}
.login__mark {
    width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: 15px;
    background: linear-gradient(140deg, var(--accent), #7c6ff0);
    color: #fff; display: grid; place-items: center;
    font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em;
    box-shadow: 0 4px 14px -3px rgba(79, 70, 229, .55);
}
.login h1 { font-size: 1.4rem; }
.login__tagline { color: var(--text-faint); font-size: .82rem; margin-bottom: 1.6rem; }
.login__form { text-align: left; display: flex; flex-direction: column; gap: .2rem; }
.login__form label { font-size: .78rem; font-weight: 550; color: var(--text-soft); margin-top: .7rem; }
.login__form button { margin-top: 1.4rem; }

/* ================================================== private assistant == */

.chat {
    display: grid; grid-template-columns: 264px minmax(0, 1fr);
    gap: 1.25rem; align-items: start;
    /* Fill the viewport below the header so only the thread scrolls. */
    height: calc(100vh - var(--topbar-h) - 108px);
    min-height: 460px;
}

.chat__list {
    display: flex; flex-direction: column; gap: .6rem;
    height: 100%; min-height: 0;
}
.chat__new { margin: 0; }
.chat__list-empty { text-align: center; padding: 1rem 0; }

.chat__threads {
    display: flex; flex-direction: column; gap: .2rem;
    overflow-y: auto; min-height: 0; padding-right: .2rem;
}

.thread {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .55rem .7rem; border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background .14s, border-color .14s;
}
.thread:hover { background: var(--surface-2); }
.thread.is-active {
    background: var(--surface); border-color: var(--border);
    box-shadow: var(--shadow-sm);
}
.thread__title {
    font-size: .855rem; font-weight: 560; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread.is-active .thread__title { color: var(--accent); }
.thread__meta {
    font-size: .715rem; color: var(--text-faint);
    display: flex; align-items: center; gap: .25rem;
    overflow: hidden; white-space: nowrap;
}

.chat__main {
    display: flex; flex-direction: column;
    height: 100%; min-height: 0; min-width: 0;
}

.chat__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding-bottom: .85rem; margin-bottom: .25rem;
    border-bottom: 1px solid var(--border);
}
.chat__title { font-size: 1.15rem; }
.chat__sub {
    font-size: .78rem; color: var(--text-faint); margin: .25rem 0 0;
    display: flex; align-items: center; gap: .3rem;
}

.chat__context {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    padding: .6rem 0; border-bottom: 1px solid var(--border);
}
.chat__context-label { font-size: .73rem; color: var(--text-faint); font-weight: 550; }
.context-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid var(--accent-line);
    padding: .2rem .3rem .2rem .55rem; border-radius: 99px;
    font-size: .73rem; font-weight: 550; max-width: 260px;
}
.context-chip__x {
    border: none; background: none; cursor: pointer; color: inherit;
    font-size: .95rem; line-height: 1; padding: 0 .15rem; border-radius: 50%;
}
.context-chip__x:hover { background: var(--accent); color: #fff; }

/* thread -------------------------------------------------------------- */

.chat__thread {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 1.1rem .25rem 1rem;
    display: flex; flex-direction: column; gap: 1rem;
    scroll-behavior: smooth;
}

.msg { display: flex; max-width: 100%; }
.msg--user { justify-content: flex-end; }

.msg__body {
    font-size: .9rem; line-height: 1.65;
    overflow-wrap: break-word;
}
.msg--user .msg__body {
    background: var(--accent); color: #fff;
    padding: .65rem .95rem; border-radius: var(--radius) var(--radius) 4px var(--radius);
    max-width: min(80%, 620px); white-space: pre-wrap;
}
.msg--assistant .msg__body {
    background: var(--surface); border: 1px solid var(--border);
    padding: .9rem 1.1rem; border-radius: var(--radius) var(--radius) var(--radius) 4px;
    max-width: min(88%, 760px); box-shadow: var(--shadow-sm);
}
.msg--failed .msg__body {
    background: var(--danger-soft); border-color: var(--danger);
    color: var(--danger); font-size: .85rem;
}

.msg__body > p:first-child { margin-top: 0; }
.msg__body > p:last-child  { margin-bottom: 0; }
.msg__body .md-h { margin: .9rem 0 .35rem; font-size: .95rem; }
.msg__body .md-h:first-child { margin-top: 0; }
.msg__body .md-list { margin: .4rem 0 .6rem; padding-left: 1.25rem; }
.msg__body .md-list li { margin-bottom: .22rem; }
.msg__body .md-rule { border: none; border-top: 1px solid var(--border); margin: .9rem 0; }
.msg__body .md-inline {
    background: var(--surface-3); padding: .08rem .3rem;
    border-radius: 4px; font-size: .86em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.msg__body .md-code {
    background: var(--surface-3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .7rem .85rem;
    overflow-x: auto; margin: .6rem 0; font-size: .82rem; line-height: 1.55;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.msg--user .msg__body .md-inline,
.msg--user .msg__body .md-code { background: rgba(255,255,255,.18); border-color: transparent; }

/* Three-dot "thinking" indicator while the first token is in flight. */
.msg__dots { display: inline-flex; gap: 4px; align-items: center; height: 1.2em; }
.msg__dots i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint);
    animation: msgdot 1.25s infinite ease-in-out;
}
.msg__dots i:nth-child(2) { animation-delay: .18s; }
.msg__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes msgdot {
    0%, 60%, 100% { opacity: .28; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .msg__dots i { animation: none; opacity: .5; }
    .chat__thread { scroll-behavior: auto; }
}

.chat__welcome { text-align: center; margin: auto; padding: 2rem 1rem; max-width: 420px; }
.chat__welcome-mark {
    width: 46px; height: 46px; margin: 0 auto .8rem; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.3rem;
    background: var(--accent-soft); color: var(--accent);
}
.chat__welcome h2 { margin-bottom: .4rem; }

/* composer ------------------------------------------------------------ */

.chat__composer { padding-top: .85rem; border-top: 1px solid var(--border); }

.chat__attach { margin-bottom: .6rem; }
.chat__attach summary {
    font-size: .78rem; color: var(--text-soft); cursor: pointer;
    padding: .2rem 0; user-select: none;
}
.chat__attach summary:hover { color: var(--accent); }
.chat__attach select { margin-top: .45rem; }

.composer { display: flex; align-items: flex-end; gap: .6rem; }
.composer textarea {
    flex: 1; resize: none; overflow-y: auto; max-height: 220px;
    padding: .7rem .9rem; border-radius: var(--radius);
    line-height: 1.5; font-size: .9rem;
}
.composer__send {
    width: 42px; height: 42px; padding: 0; flex-shrink: 0;
    border-radius: 50%; font-size: 1.1rem; font-weight: 700;
}
.composer__send:disabled { opacity: .5; cursor: not-allowed; }
.composer__hint { font-size: .72rem; margin: .5rem 0 0; text-align: center; }

.chat__setup { max-width: 560px; margin: auto; padding: 2rem 0; }
.chat__setup h1 { margin-bottom: .6rem; }
.chat__code {
    background: var(--surface-3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .75rem .9rem; overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84rem;
}

/* On a phone the conversation list becomes a horizontal strip so the thread
   keeps the full width. */
@media (max-width: 900px) {
    .chat { grid-template-columns: minmax(0, 1fr); height: auto; }
    .chat__list { height: auto; }
    .chat__threads {
        flex-direction: row; overflow-x: auto; gap: .4rem;
        padding-bottom: .4rem; scrollbar-width: none;
    }
    .chat__threads::-webkit-scrollbar { display: none; }
    .thread { min-width: 168px; border-color: var(--border); background: var(--surface); }
    .chat__main { height: auto; }
    .chat__thread { max-height: none; overflow-y: visible; }
    .msg--user .msg__body { max-width: 90%; }
    .msg--assistant .msg__body { max-width: 100%; }
}

/* ------------------------------------------------- images & settings -- */

.mode-switch {
    display: inline-flex; padding: 3px; gap: 2px; margin-bottom: .6rem;
    border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2);
}
.mode-switch__btn {
    border: none; background: transparent; color: var(--text-soft);
    padding: .3rem .8rem; border-radius: 99px;
    font: inherit; font-size: .78rem; font-weight: 550; cursor: pointer;
    transition: background .14s, color .14s;
}
.mode-switch__btn:hover { color: var(--text); }
.mode-switch__btn.is-active {
    background: var(--surface); color: var(--accent); font-weight: 640;
    box-shadow: var(--shadow-sm);
}

.msg__note { font-size: .8rem; color: var(--text-faint); margin-left: .5rem; }
.msg__body--image { padding: .5rem !important; }

.gen-image { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.gen-image img {
    display: block; width: 100%; max-width: 460px; height: auto;
    border-radius: var(--radius-sm); background: var(--surface-3);
}
.gen-image__caption { font-size: .76rem; color: var(--text-faint); line-height: 1.45; }
.gen-image__save {
    align-self: flex-start; font-size: .76rem; font-weight: 600; color: var(--accent);
    border: 1px solid var(--accent-line); background: var(--accent-soft);
    padding: .22rem .6rem; border-radius: var(--radius-xs);
}
.gen-image__save:hover { background: var(--accent); color: #fff; }

/* settings: model chooser ---------------------------------------------- */

.model-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .4rem;
}

.model {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .65rem; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface-2);
    font-size: .82rem; cursor: pointer;
    transition: border-color .14s, background .14s;
}
.model:hover { border-color: var(--border-strong); background: var(--surface); }
.model input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.model__id {
    flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model__default {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .68rem; color: var(--text-faint); white-space: nowrap;
}
.model__default input { accent-color: var(--accent); }

/* ===================================================== revision tools == */

.gen-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.gen-form {
    display: flex; flex-direction: column; gap: .6rem;
    background: var(--surface-2); border-radius: var(--radius-sm); padding: .85rem;
}
.gen-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem;
                  font-weight: 550; color: var(--text-soft); }

/* exam countdown ------------------------------------------------------- */

.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }

.exam-card {
    position: relative; background: var(--surface);
    border: 1px solid var(--border); border-left: 4px solid var(--course-colour);
    border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-sm);
}
.exam-card--urgent { border-color: var(--warn); border-left-color: var(--warn); }
.exam-card__head { display: flex; align-items: baseline; gap: .35rem; }
.exam-card__days { font-size: 2rem; font-weight: 680; letter-spacing: -.04em; line-height: 1; }
.exam-card--urgent .exam-card__days { color: var(--warn); }
.exam-card__unit { font-size: .78rem; color: var(--text-faint); }
.exam-card__title { font-size: .95rem; margin: .5rem 0 .2rem; }
.exam-card__meta { font-size: .76rem; color: var(--text-faint); margin-bottom: .7rem; }
.exam-card__ready { font-size: .74rem; color: var(--text-soft); margin: .4rem 0 0; }
.exam-card form { position: absolute; top: .5rem; right: .5rem; margin: 0; }
.exam-card__x {
    border: none; background: none; color: var(--text-faint); cursor: pointer;
    font-size: 1.05rem; line-height: 1; padding: 0 .2rem; border-radius: var(--radius-xs);
}
.exam-card__x:hover { color: var(--danger); background: var(--danger-soft); }

/* forecast ------------------------------------------------------------- */

.forecast {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: .4rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .9rem; box-shadow: var(--shadow-sm);
}
.forecast__day { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.forecast__bar {
    width: 100%; height: 74px; display: flex; align-items: flex-end;
    background: var(--surface-2); border-radius: var(--radius-xs); overflow: hidden;
}
.forecast__bar span { display: block; width: 100%; background: var(--accent); border-radius: var(--radius-xs); }
.forecast__n { font-size: .78rem; font-weight: 620; }
.forecast__label { font-size: .66rem; color: var(--text-faint); text-transform: capitalize; }

/* weak topics ---------------------------------------------------------- */

.weak-list { display: flex; flex-direction: column; gap: .35rem; }
.weak {
    display: flex; align-items: center; gap: .6rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .55rem .8rem; font-size: .86rem;
}
.weak__topic { font-weight: 560; }
.weak__course { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* decks ---------------------------------------------------------------- */

.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
.deck {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--course-colour); border-radius: var(--radius);
    padding: 1rem; box-shadow: var(--shadow-sm);
}
.deck__title { font-size: .95rem; margin-bottom: .15rem; }
.deck__course { font-size: .78rem; margin-bottom: .6rem; }
.deck__counts { font-size: .82rem; margin-bottom: .8rem;
                display: flex; align-items: center; gap: .4rem; }
.deck__actions { margin-top: auto; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.deck__actions form { margin: 0; }

/* review session ------------------------------------------------------- */

.review { max-width: 680px; margin: 0 auto; }
.review__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.review__progress { font-size: .82rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.review__bar { height: 4px; background: var(--surface-3); border-radius: 99px; overflow: hidden; margin-bottom: 1.5rem; }
.review__bar span { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }

.rcard {
    display: none;
    background: var(--surface); border: 1px solid var(--border);
    border-top: 4px solid var(--course-colour);
    border-radius: var(--radius); padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow);
}
.rcard.is-current { display: block; }
.rcard__meta { font-size: .74rem; color: var(--text-faint); display: flex;
               align-items: center; gap: .3rem; margin-bottom: 1rem; }
.rcard__question { font-size: 1.15rem; font-weight: 560; line-height: 1.5; letter-spacing: -.015em; }

.rcard__hint { margin-top: .9rem; }
.rcard__hint summary { font-size: .78rem; color: var(--text-faint); cursor: pointer; }
.rcard__hint p { font-size: .84rem; color: var(--text-soft); margin: .4rem 0 0; }

.rcard__answer {
    margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
    font-size: 1rem; line-height: 1.65; color: var(--text-soft);
}
.rcard__answer-label {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--accent); margin-bottom: .4rem;
}
.rcard__actions { margin-top: 1.5rem; }

.rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.rate__btn {
    padding: .7rem .4rem; border-radius: var(--radius-sm); cursor: pointer;
    font: inherit; font-size: .8rem; font-weight: 600;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    transition: background .14s, border-color .14s, transform .06s;
}
.rate__btn:hover { transform: translateY(-1px); }
.rate__btn:active { transform: translateY(0); }
.rate__btn--0 { border-color: var(--danger); color: var(--danger); }
.rate__btn--0:hover { background: var(--danger-soft); }
.rate__btn--1 { border-color: var(--warn); color: var(--warn); }
.rate__btn--1:hover { background: var(--warn-soft); }
.rate__btn--2 { border-color: var(--accent); color: var(--accent); }
.rate__btn--2:hover { background: var(--accent-soft); }
.rate__btn--3 { border-color: var(--ok); color: var(--ok); }
.rate__btn--3:hover { background: var(--ok-soft); }

.review__done { text-align: center; padding: 3rem 1rem; }
.review__done h1 { margin-bottom: .5rem; }
.review__done p { margin-bottom: 1.25rem; }
.review__hint { text-align: center; margin-top: 1.5rem; font-size: .72rem; }

@media (max-width: 560px) {
    .rate { grid-template-columns: repeat(2, 1fr); }
    .rcard { padding: 1.4rem 1.1rem; }
    .rcard__question { font-size: 1.05rem; }
}

/* quiz ----------------------------------------------------------------- */

.quiz { max-width: 760px; }

.qcard {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); padding: 1.1rem 1.25rem; margin: 0 0 .85rem;
    box-shadow: var(--shadow-sm);
}
/* A <legend> is positioned on the fieldset's border by default, which leaves
   the question floating outside the card. Floating it puts it back in flow. */
.qcard__legend {
    float: left; width: 100%;
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .95rem; font-weight: 560; line-height: 1.5; padding: 0 0 .8rem;
}
.qcard::after { content: ""; display: table; clear: both; }
.qcard__n {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    font-size: .72rem; font-weight: 700;
    display: grid; place-items: center;
}

.choice {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .55rem .7rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer; font-size: .875rem;
    transition: background .12s, border-color .12s;
}
.choice:hover { background: var(--surface-2); }
.choice input { margin-top: .2rem; accent-color: var(--accent); flex-shrink: 0; }
.choice:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-line); }

/* quiz results --------------------------------------------------------- */

.score {
    display: flex; align-items: baseline; justify-content: center; gap: 1rem;
    padding: 1.5rem; border-radius: var(--radius); margin-bottom: 1.5rem;
    background: var(--surface); border: 1px solid var(--border);
}
.score--ok   { background: var(--ok-soft);     border-color: var(--ok); }
.score--warn { background: var(--warn-soft);   border-color: var(--warn); }
.score--bad  { background: var(--danger-soft); border-color: var(--danger); }
.score__value { font-size: 2.6rem; font-weight: 680; letter-spacing: -.04em; line-height: 1; }
.score__value span { font-size: 1.4rem; color: var(--text-faint); font-weight: 500; }
.score__percent { font-size: 1.1rem; font-weight: 600; color: var(--text-soft); }

.results-list { display: flex; flex-direction: column; gap: .8rem; max-width: 820px; }

.qresult {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--border-strong);
    border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow-sm);
}
.qresult--ok  { border-left-color: var(--ok); }
.qresult--bad { border-left-color: var(--danger); }
.qresult__head { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .7rem; }
.qresult__n {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface-3); color: var(--text-soft);
    font-size: .7rem; font-weight: 700; display: grid; place-items: center;
}
.qresult__question { flex: 1; font-weight: 560; font-size: .9rem; line-height: 1.5; }

.qresult__choices { list-style: none; margin: 0; padding: 0; display: flex;
                    flex-direction: column; gap: .25rem; }
.qresult__choices li {
    padding: .4rem .65rem; border-radius: var(--radius-xs);
    font-size: .85rem; color: var(--text-soft);
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.qresult__choices li.is-correct { background: var(--ok-soft); color: var(--ok); font-weight: 550; }
.qresult__choices li.is-wrong   { background: var(--danger-soft); color: var(--danger); }
.qresult__mark { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.qresult__explain {
    margin: .7rem 0 0; padding-top: .7rem; border-top: 1px dashed var(--border);
    font-size: .82rem; color: var(--text-soft); line-height: 1.6;
}

/* document AI tools & summary ------------------------------------------ */

.ai-tools {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .75rem .9rem; margin-bottom: 1.25rem;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.ai-tools__form { margin: 0; }
.ai-tools .muted { font-size: .78rem; }

.summary {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius); padding: 1.15rem 1.35rem; margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.summary__title {
    font-size: .72rem; font-weight: 650; text-transform: uppercase;
    letter-spacing: .07em; color: var(--accent); margin-bottom: .6rem;
}
.summary__body { font-size: .9rem; line-height: 1.7; color: var(--text-soft); }
.summary__points { margin: .8rem 0 0; padding-left: 1.2rem; font-size: .865rem; color: var(--text); }
.summary__points li { margin-bottom: .3rem; }
.summary__meta { font-size: .72rem; margin: .9rem 0 0; }

/* ============================================ recorder & job queue == */

.recorder {
    display: flex; flex-direction: column; gap: .5rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}
.recorder.is-recording { border-color: var(--danger); }
.recorder__main { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.recorder__btn {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .6rem 1rem; min-height: 44px;
    border: 1px solid var(--border-strong); border-radius: 99px;
    background: var(--surface); color: var(--text);
    font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color .14s, background .14s;
}
.recorder__btn:hover { border-color: var(--danger); }
.recorder__btn.is-recording { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.recorder__dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--danger); flex-shrink: 0;
}
.recorder__btn.is-recording .recorder__dot { animation: recpulse 1.4s ease-in-out infinite; }
@keyframes recpulse {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .4; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) { .recorder__dot { animation: none !important; } }

.recorder__time {
    font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums;
    color: var(--danger);
}
.recorder__hint { font-size: .78rem; margin: 0; line-height: 1.5; }

/* job status strip ----------------------------------------------------- */

.jobs {
    display: flex; flex-direction: column; gap: .4rem;
    margin-bottom: 1.25rem;
}

.job {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .8rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface);
    font-size: .84rem; box-shadow: var(--shadow-sm);
}
.job--queued  { border-left: 3px solid var(--text-faint); }
.job--running { border-left: 3px solid var(--accent); }
.job--done    { border-left: 3px solid var(--ok);   background: var(--ok-soft); }
.job--failed  { border-left: 3px solid var(--danger); background: var(--danger-soft); }

.job__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job__state { font-size: .72rem; font-weight: 650; color: var(--text-faint); white-space: nowrap; }
.job--running .job__state { color: var(--accent); }
.job--done   .job__state { color: var(--ok); }
.job--failed .job__state { color: var(--danger); }

.job__spinner {
    width: 13px; height: 13px; flex-shrink: 0;
    border: 2px solid var(--accent-line); border-top-color: var(--accent);
    border-radius: 50%; animation: jobspin .8s linear infinite;
}
@keyframes jobspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .job__spinner { animation-duration: 3s; } }

.jobs__note { font-size: .74rem; color: var(--text-faint); margin: .1rem 0 0; }

.setup-steps { margin: .6rem 0 0; padding-left: 1.3rem; font-size: .85rem; line-height: 1.7; }
.setup-steps li { margin-bottom: .35rem; }
.setup-steps code { background: var(--surface-3); padding: .05rem .3rem; border-radius: 4px; font-size: .85em; }

.model-tools { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: .75rem; }
.model-tools input[type="search"] { width: auto; min-width: 200px; flex: 1; max-width: 320px; }