/* ==========================================================================
   Aksh Niti — portal shell.

   Shared by every portal page: index.html (Home), analysis.html, stats.html,
   tools.html. Tokens, the sidebar/topbar/bottom-nav shell, buttons, cards and
   the subject grid live here; the page-specific panels live in pages.css.

   The shell is deliberately one column of content with a fixed rail beside it.
   The old portal put subjects, stats, a focus list, an activity feed and a tools
   menu on one screen, which meant the thing a student actually came for — their
   subjects — started below the fold. Subjects come first here and everything
   else has its own page.
   ========================================================================== */

:root {
    color-scheme: light;

    --bg: #f6f8fc;
    --bg-tint: #eef2fa;
    --surface: #ffffff;
    --surface-2: #f3f6fb;
    --surface-3: #e9eef7;
    --text: #131a2a;
    --text-soft: #3d4759;
    --muted: #6b7688;
    --line: #e2e8f2;
    --line-soft: #edf1f8;

    --brand: #2f6df6;
    --brand-soft: rgba(47, 109, 246, 0.10);
    --brand-ink: #1b4bc4;
    --good: #12a06a;
    --good-soft: rgba(18, 160, 106, 0.12);
    --warn: #e08600;
    --warn-soft: rgba(224, 134, 0, 0.13);
    --bad: #de3b2f;
    --bad-soft: rgba(222, 59, 47, 0.12);
    --gold: #c98a00;

    --radius: 20px;
    --radius-sm: 14px;
    --radius-lg: 26px;

    --shadow-sm: 0 1px 2px rgba(19, 26, 42, 0.05), 0 4px 14px rgba(19, 26, 42, 0.045);
    --shadow: 0 2px 6px rgba(19, 26, 42, 0.05), 0 14px 40px rgba(19, 26, 42, 0.07);
    --shadow-lg: 0 30px 70px rgba(19, 26, 42, 0.13);

    --nav-w: 264px;
    --pad: clamp(16px, 3vw, 34px);
}

html[data-theme="dark"],
body[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0c0f15;
    --bg-tint: #10141c;
    --surface: #151a22;
    --surface-2: #1c222c;
    --surface-3: #242b37;
    --text: #eef2f8;
    --text-soft: #c6cedb;
    --muted: #939eaf;
    --line: #262e3a;
    --line-soft: #1e242e;

    --brand: #7ba6ff;
    --brand-soft: rgba(123, 166, 255, 0.14);
    --brand-ink: #a9c5ff;
    --good: #4cc38a;
    --good-soft: rgba(76, 195, 138, 0.15);
    --warn: #f0b429;
    --warn-soft: rgba(240, 180, 41, 0.15);
    --bad: #f2776b;
    --bad-soft: rgba(242, 119, 107, 0.15);
    --gold: #e8b53f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.28);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 44px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    background-image:
        radial-gradient(1100px 520px at 84% -12%, rgba(47, 109, 246, 0.09), transparent 65%),
        radial-gradient(760px 420px at -8% 4%, rgba(18, 160, 106, 0.07), transparent 62%);
    background-attachment: fixed;
    color: var(--text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
}

body[data-theme="dark"] {
    background-image:
        radial-gradient(1100px 520px at 84% -12%, rgba(123, 166, 255, 0.10), transparent 65%),
        radial-gradient(760px 420px at -8% 4%, rgba(76, 195, 138, 0.06), transparent 62%);
}

body.drawer-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

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

h1,
h2,
h3,
h4 {
    margin: 0;
    letter-spacing: -0.02em;
    font-weight: 700;
}

p {
    margin: 0;
}

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

/* ==========================================================================
   Shell
   ========================================================================== */

.ak-shell {
    display: grid;
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

/* z-index 70 puts the rail above the bottom nav (50) and the scrim (60). As a
   drawer it has to cover them — at 50 the fixed bottom nav painted straight
   over the "Developed by" block and cut it off.
   100dvh, not 100vh: on a phone 100vh is the height with the browser chrome
   *hidden*, so the last 60-90px of the drawer sat below the fold. */
.ak-sidebar {
    position: sticky;
    top: 0;
    z-index: 70;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px 16px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border-right: 1px solid var(--line);
    backdrop-filter: blur(20px);
    overscroll-behavior: contain;
}

.ak-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 0;
}

.ak-brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--brand), #7b3ff2);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 8px 20px rgba(47, 109, 246, 0.32);
}

.ak-brand h1 {
    font-size: 1.02rem;
    letter-spacing: -0.03em;
}

.ak-brand p {
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

.ak-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.ak-nav-label {
    padding: 14px 12px 6px;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.ak-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-soft);
    font-size: 0.9rem;
    font-weight: 550;
    cursor: pointer;
    text-align: left;
    transition: background 0.16s ease, color 0.16s ease;
}

.ak-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 0.92rem;
    color: var(--muted);
    transition: color 0.16s ease;
}

.ak-nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
}

.ak-nav-item.active {
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-weight: 650;
}

.ak-nav-item.active i {
    color: var(--brand);
}

.ak-nav-badge {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bad-soft);
    color: var(--bad);
    font-size: 0.7rem;
    font-weight: 700;
}

.ak-nav-badge:empty {
    display: none;
}

/* A link now, not a static credit block — it opens the developer's story.
   flex-shrink: 0 so a short viewport squeezes the scrollable nav above it
   rather than crushing this. */
.ak-sidebar-foot {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    transition: border-color 0.16s ease, transform 0.16s ease;
}

a.ak-sidebar-foot:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
}

a.ak-sidebar-foot.active {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.ak-sidebar-foot img {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    object-fit: cover;
    flex: 0 0 38px;
}

.ak-sidebar-foot-go {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.76rem;
}

.ak-sidebar-foot span {
    display: block;
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}

.ak-sidebar-foot strong {
    font-size: 0.85rem;
}

.ak-sidebar-close {
    display: none;
}

.ak-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    background: rgba(10, 14, 22, 0.5);
    backdrop-filter: blur(3px);
}

.ak-scrim.show {
    display: block;
}

/* ── Main + topbar ───────────────────────────────────────────────────── */

.ak-main {
    min-width: 0;
    padding: 0 var(--pad) 72px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.ak-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    margin-bottom: -4px;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(16px);
}

.ak-topbar-title {
    display: none;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ak-topbar-heading {
    min-width: 0;
    flex: 1;
}

.ak-topbar-heading strong {
    display: block;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
}

.ak-topbar-heading small {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ak-search {
    position: relative;
    flex: 1;
    max-width: 420px;
}

.ak-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.ak-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.88rem;
    box-shadow: var(--shadow-sm);
}

.ak-search input::placeholder {
    color: var(--muted);
}

.ak-search input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.ak-topbar-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.ak-btn,
.ak-ghost,
.ak-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.14s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.ak-btn {
    padding: 10px 17px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 8px 20px rgba(47, 109, 246, 0.26);
}

.ak-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(47, 109, 246, 0.32);
}

.ak-btn.full {
    width: 100%;
}

.ak-ghost {
    padding: 9px 14px;
    background: var(--surface);
    border-color: var(--line);
    color: var(--text-soft);
    box-shadow: var(--shadow-sm);
}

.ak-ghost:hover {
    border-color: var(--brand);
    color: var(--brand-ink);
}

.ak-ghost.is-danger:hover {
    border-color: var(--bad);
    color: var(--bad);
}

.ak-icon-btn {
    width: 40px;
    height: 40px;
    background: var(--surface);
    border-color: var(--line);
    color: var(--text-soft);
    box-shadow: var(--shadow-sm);
}

.ak-icon-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.ak-menu-btn {
    display: none;
}

/* ── Profile chip ────────────────────────────────────────────────────── */

.ak-profile-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.16s ease, transform 0.14s ease;
}

.ak-profile-chip:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
}

.ak-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(140deg, var(--brand), #7b3ff2);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}

.ak-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ak-profile-chip strong {
    display: block;
    font-size: 0.84rem;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ak-profile-chip small {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Cards, headings, primitives shared by every page
   ========================================================================== */

.ak-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.ak-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ak-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.ak-section-head h3 {
    font-size: 1.22rem;
}

.ak-section-head p {
    font-size: 0.84rem;
    color: var(--muted);
    margin-top: 3px;
}

.ak-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: 0.74rem;
    font-weight: 650;
    color: var(--text-soft);
}

.ak-pill.is-good {
    background: var(--good-soft);
    border-color: transparent;
    color: var(--good);
}

.ak-pill.is-warn {
    background: var(--warn-soft);
    border-color: transparent;
    color: var(--warn);
}

.ak-pill.is-bad {
    background: var(--bad-soft);
    border-color: transparent;
    color: var(--bad);
}

.ak-pill.is-brand {
    background: var(--brand-soft);
    border-color: transparent;
    color: var(--brand-ink);
}

.ak-empty {
    padding: 34px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
}

.ak-empty i {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: var(--line);
}

/* ==========================================================================
   Home — admin notice banner
   ========================================================================== */

.ak-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    margin-top: 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
    font-size: 0.9rem;
}

/* The banner ships with the `hidden` attribute and notices.js toggles it.
   `display: flex` above is an author rule, so it beats the browser's own
   [hidden] { display: none } and the empty box paints on every load until
   this rule puts it back. */
.ak-notice[hidden] {
    display: none;
}

.ak-notice > i {
    margin-top: 2px;
    font-size: 1.05rem;
    color: var(--brand);
}

.ak-notice.is-success > i {
    color: var(--good, #188038);
}

.ak-notice.is-warning {
    border-color: rgba(234, 142, 22, 0.4);
    background: linear-gradient(135deg, rgba(249, 171, 0, 0.10), transparent 60%), var(--surface);
}

.ak-notice.is-warning > i {
    color: #e37400;
}

.ak-notice-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ak-notice-copy strong {
    letter-spacing: -0.01em;
}

.ak-notice-copy span {
    color: var(--muted);
    overflow-wrap: break-word;
}

/* The cloud-backup offer borrows this banner and is the only notice that
   carries an action, so the button gets its own row rather than sitting on the
   baseline of the sentence above it. */
.ak-notice-actions {
    margin-top: 10px;
}

.ak-notice-close {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 4px;
    border-radius: 8px;
}

.ak-notice-close:hover {
    color: var(--text);
    background: var(--surface-2);
}

/* ==========================================================================
   Home — hero band
   ========================================================================== */

.ak-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 24px 26px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(47, 109, 246, 0.10), transparent 55%),
        var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.ak-hero h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    letter-spacing: -0.035em;
}

.ak-hero p {
    margin-top: 6px;
    font-size: 0.9rem;
    color: var(--muted);
    max-width: 52ch;
}

.ak-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* Dark surface in both themes on purpose — exam-countdown.css paints its
   digits light-on-dark and is shared with the study app.
 *
 * Two rows, not four. This was a column of eyebrow / big number / clock /
 * full-width button stacked on top of each other — around 150px tall for one
 * date. The name and the action share the top line, the countdown runs along
 * the bottom one, and the whole thing is half the height.
 */
.exam-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 12px;
    min-width: 212px;
    padding: 13px 15px;
    border-radius: 16px;
    background: linear-gradient(150deg, #1a2233, #0c111c 72%);
    color: #fff;
    box-shadow: 0 14px 32px rgba(12, 17, 28, 0.3);
}

.exam-card>span {
    grid-column: 1;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exam-card strong {
    grid-column: 1 / -1;
    font-size: 1.5rem;
    font-weight: 700;
    min-width: 0;
}

/* The exam date, sitting where the button used to. Keeps the card at two rows:
   name + date on top, countdown along the bottom. */
.exam-card small {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.7rem;
    font-weight: 650;
    white-space: nowrap;
}

.exam-card small:empty {
    display: none;
}

/* Edit: top-right corner, after the date pill. Opens profile.html#exam. */
.exam-card {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.exam-card-edit {
    grid-column: 3;
    grid-row: 1;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.72rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.exam-card-edit:hover,
.exam-card-edit:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ── Resume strip ────────────────────────────────────────────────────── */

.ak-resume {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 20px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.ak-resume-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.05rem;
}

.ak-resume-copy {
    min-width: 0;
    flex: 1;
}

.ak-resume-copy strong {
    display: block;
    font-size: 0.98rem;
}

.ak-resume-copy small {
    display: block;
    font-size: 0.82rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Home — subject grid (the reason the portal exists)
   ========================================================================== */

.ak-subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    gap: 16px;
}

.ak-subject {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ak-subject::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--tone);
    opacity: 0.85;
}

.ak-subject::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: var(--tone);
    opacity: 0.07;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ak-subject:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tone) 40%, var(--line));
    box-shadow: var(--shadow);
}

.ak-subject:hover::after {
    opacity: 0.13;
}

.ak-subject-top {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.ak-subject-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--tone) 14%, transparent);
    color: var(--tone);
    font-size: 1.1rem;
}

.ak-subject h4 {
    font-size: 1.05rem;
}

.ak-subject-top p {
    margin-top: 3px;
    font-size: 0.81rem;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ak-subject-meter {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ak-subject-meter-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.76rem;
    color: var(--muted);
    font-weight: 600;
}

.ak-subject-meter-head b {
    color: var(--text);
}

.ak-meter {
    height: 7px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.ak-meter span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--tone);
    transition: width 0.4s ease;
}

.ak-subject-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ak-stat-cell {
    padding: 9px 10px;
    border-radius: 12px;
    background: var(--surface-2);
    text-align: center;
}

.ak-stat-cell strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ak-stat-cell span {
    display: block;
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.ak-stat-cell.is-due strong {
    color: var(--warn);
}

.ak-subject-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.ak-subject-foot .ak-btn {
    flex: 1;
    background: var(--tone);
    box-shadow: none;
}

.ak-subject-foot .ak-btn:hover {
    box-shadow: 0 10px 22px color-mix(in srgb, var(--tone) 34%, transparent);
}

.ak-subject-last {
    font-size: 0.76rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
}

/* ==========================================================================
   Home — full length banner
   ========================================================================== */

.ak-fulltest {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 26px;
    border-radius: var(--radius-lg);
    background: linear-gradient(125deg, #131b2e 0%, #1d2a4d 48%, #2b1d4d 100%);
    color: #fff;
    box-shadow: 0 22px 50px rgba(19, 27, 46, 0.34);
    overflow: hidden;
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ak-fulltest:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 60px rgba(19, 27, 46, 0.42);
}

.ak-fulltest::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -110px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123, 166, 255, 0.35), transparent 68%);
    pointer-events: none;
}

.ak-fulltest-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 1.25rem;
}

.ak-fulltest-copy {
    flex: 1;
    min-width: 0;
    position: relative;
}

.ak-fulltest-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
}

.ak-tag-new {
    padding: 2px 8px;
    border-radius: 999px;
    background: #ff9f43;
    color: #2a1600;
    letter-spacing: 0.05em;
    font-size: 0.62rem;
}

.ak-fulltest-copy strong {
    display: block;
    margin-top: 5px;
    font-size: 1.16rem;
    letter-spacing: -0.02em;
}

.ak-fulltest-copy small {
    display: block;
    margin-top: 3px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.68);
}

.ak-fulltest-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.ak-fulltest-pills span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.74rem;
    font-weight: 600;
}

.ak-fulltest-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #fff;
    color: #131b2e;
    font-weight: 700;
    font-size: 0.86rem;
    white-space: nowrap;
    position: relative;
}

/* ==========================================================================
   Home — the three destination cards
   ========================================================================== */

.ak-destinations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.ak-dest {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ak-dest:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    box-shadow: var(--shadow);
}

.ak-dest-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ak-dest-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    font-size: 1rem;
}

.ak-dest h4 {
    font-size: 1rem;
}

.ak-dest p {
    font-size: 0.82rem;
    color: var(--muted);
}

.ak-dest-figures {
    display: flex;
    gap: 18px;
    margin-top: auto;
    padding-top: 4px;
}

.ak-dest-figures div strong {
    display: block;
    font-size: 1.22rem;
    letter-spacing: -0.03em;
}

.ak-dest-figures div span {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.ak-dest-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--brand);
}

/* ==========================================================================
   Bottom navigation (mobile)
   ========================================================================== */

.ak-bottom-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(20px);
}

.ak-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    border-radius: 12px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 600;
}

.ak-bottom-nav a i {
    font-size: 1.02rem;
}

.ak-bottom-nav a.active {
    color: var(--brand);
    background: var(--brand-soft);
}

/* ==========================================================================
   Toast
   ========================================================================== */

.aksh-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    z-index: 90;
    transform: translate(-50%, 20px);
    padding: 12px 22px;
    border-radius: 999px;
    background: #131a2a;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.aksh-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
    .ak-hero {
        grid-template-columns: 1fr;
    }

    .exam-card {
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .ak-shell {
        grid-template-columns: 1fr;
    }

    .ak-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(300px, 84vw);
        transform: translateX(-102%);
        transition: transform 0.24s ease;
        box-shadow: var(--shadow-lg);
        background: var(--surface);
        /* The rail scrolls as one on a phone. Letting only .ak-nav scroll meant
           that on a short screen the credit block was pushed off the bottom
           with no way to reach it. */
        overflow-y: auto;
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
    }

    .ak-sidebar .ak-nav {
        overflow: visible;
        flex: 0 0 auto;
    }

    .ak-sidebar-foot {
        margin-top: auto;
    }

    .ak-sidebar.open {
        transform: none;
    }

    .ak-sidebar-close {
        display: grid;
        position: absolute;
        top: 14px;
        right: 14px;
    }

    .ak-menu-btn {
        display: inline-flex;
    }

    /* Not sticky on a phone. With the search on its own row the bar is ~133px,
       and pinned alongside the 62px bottom nav that is a quarter of the screen
       permanently spent on chrome. Navigation already lives in the bottom nav,
       so the bar scrolls away with the rest. */
    .ak-topbar {
        position: static;
        flex-wrap: wrap;
        row-gap: 10px;
        backdrop-filter: none;
        background: transparent;
    }

    .ak-topbar-title {
        display: block;
        flex: 1;
    }

    .ak-main {
        padding-bottom: 96px;
    }

    .ak-bottom-nav {
        display: flex;
    }

    /* Search drops to its own full-width row rather than disappearing. It used
       to be display:none on phones — which left the Reset button sitting in the
       top bar clearing a field the student could not see, and left no way at
       all to search subjects on the device most of them use. */
    .ak-search {
        order: 5;
        flex: 1 0 100%;
        max-width: none;
    }

    .ak-search input {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Touch targets. Icon-only buttons were coming out 38x34 once their labels
       were hidden, which is well under the 44px every mobile guideline asks for
       and misses often enough to feel broken. */
    .ak-ghost,
    .ak-icon-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .exam-card button {
        min-height: 42px;
        padding-inline: 16px;
    }

    .ak-bottom-nav a {
        min-height: 46px;
    }

    /* Most pills are labels and 28px is right for them; the handful that are
       links are not. */
    a.ak-pill {
        min-height: 40px;
        padding-inline: 14px;
    }

    .ak-profile-chip strong,
    .ak-profile-chip small {
        display: none;
    }

    .ak-profile-chip {
        padding: 5px;
    }

    .ak-fulltest {
        flex-wrap: wrap;
        gap: 16px;
        padding: 20px;
    }

    .ak-fulltest-cta {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 620px) {
    body {
        font-size: 14.5px;
    }

    .ak-hero {
        padding: 20px;
        border-radius: var(--radius);
    }

    .ak-subject-grid {
        grid-template-columns: 1fr;
    }

    .ak-topbar-heading small {
        display: none;
    }

    .ak-resume {
        padding: 13px 15px;
    }

    .ak-ghost span,
    .ak-btn span.hide-sm {
        display: none;
    }

    .ak-ghost {
        padding: 9px 11px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}