/* DABLEW — Living Syllabus identity */
:root {
    --brand-night: #081827;
    --brand-night-soft: #102b3d;
    --brand-paper: #07131e;
    --brand-paper-deep: #0b2132;
    --brand-ink: #f4efe4;
    --brand-muted: #aebfc1;
    --brand-cloud: #8cc9e7;
    --brand-river: #4da9d1;
    --brand-forest: #4f9b72;
    --brand-leaf: #79bd6c;
    --brand-earth: #c9664a;
    --brand-sun: #e9ae38;
    --brand-line: rgba(216, 231, 235, .14);
    --brand-surface: rgba(15, 39, 52, .88);
    --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --font-ui: Aptos, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    --bg-light: var(--brand-paper);
    --header-black: var(--brand-night);
    --dable-grey: var(--brand-ink);
    --win-white: var(--brand-sun);
    --paper: var(--brand-paper);
    --paper-deep: var(--brand-paper-deep);
    --ink: var(--brand-ink);
    --muted-ink: var(--brand-muted);
    --line: var(--brand-line);
    --surface: var(--brand-surface);
    --accent: var(--brand-sun);
    --accent-dark: var(--brand-earth);
    --sage: var(--brand-forest);
    --card-shadow: 0 18px 50px rgba(0, 0, 0, .2);
    --hover-shadow: 0 24px 62px rgba(0, 0, 0, .3);
}

html {
    color-scheme: dark;
    background: var(--brand-paper);
}

body {
    position: relative;
    isolation: isolate;
    color: var(--brand-ink);
    background:
        radial-gradient(circle at 8% 2%, rgba(77, 169, 209, .17), transparent 30rem),
        radial-gradient(circle at 93% 40%, rgba(79, 155, 114, .12), transparent 34rem),
        linear-gradient(180deg, #07131e 0%, #0a1d2b 52%, #071922 100%);
    font-family: var(--font-ui);
}

body::before {
    z-index: 0;
    opacity: .96;
    background-image:
        radial-gradient(circle at 5% 14%, rgba(244, 239, 228, .82) 0 1px, rgba(140, 201, 231, .16) 1.4px 2.4px, transparent 3px),
        radial-gradient(circle at 13% 38%, rgba(140, 201, 231, .62) 0 1px, transparent 1.8px),
        radial-gradient(circle at 21% 8%, rgba(233, 174, 56, .64) 0 1.2px, rgba(233, 174, 56, .12) 1.7px 2.8px, transparent 3.4px),
        radial-gradient(circle at 29% 67%, rgba(244, 239, 228, .72) 0 1px, transparent 1.8px),
        radial-gradient(circle at 36% 28%, rgba(77, 169, 209, .72) 0 1.1px, rgba(77, 169, 209, .12) 1.6px 2.5px, transparent 3px),
        radial-gradient(circle at 44% 82%, rgba(244, 239, 228, .52) 0 1px, transparent 1.7px),
        radial-gradient(circle at 51% 16%, rgba(244, 239, 228, .78) 0 1px, transparent 1.9px),
        radial-gradient(circle at 58% 49%, rgba(140, 201, 231, .54) 0 1px, transparent 1.8px),
        radial-gradient(circle at 65% 7%, rgba(233, 174, 56, .55) 0 1px, transparent 1.8px),
        radial-gradient(circle at 72% 73%, rgba(244, 239, 228, .72) 0 1.1px, rgba(140, 201, 231, .1) 1.6px 2.6px, transparent 3.2px),
        radial-gradient(circle at 81% 31%, rgba(140, 201, 231, .68) 0 1px, transparent 1.9px),
        radial-gradient(circle at 89% 11%, rgba(244, 239, 228, .58) 0 1px, transparent 1.8px),
        radial-gradient(circle at 96% 58%, rgba(233, 174, 56, .5) 0 1px, transparent 1.9px),
        radial-gradient(circle at 8% 88%, rgba(77, 169, 209, .58) 0 1px, transparent 1.8px),
        radial-gradient(circle at 18% 76%, rgba(244, 239, 228, .56) 0 1px, transparent 1.7px),
        radial-gradient(circle at 33% 92%, rgba(233, 174, 56, .48) 0 1px, transparent 1.8px),
        radial-gradient(circle at 47% 58%, rgba(244, 239, 228, .46) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 61% 91%, rgba(140, 201, 231, .58) 0 1px, transparent 1.8px),
        radial-gradient(circle at 76% 53%, rgba(244, 239, 228, .5) 0 1px, transparent 1.8px),
        radial-gradient(circle at 86% 87%, rgba(77, 169, 209, .64) 0 1.1px, rgba(77, 169, 209, .1) 1.7px 2.5px, transparent 3px),
        radial-gradient(circle at 94% 40%, rgba(244, 239, 228, .48) 0 .9px, transparent 1.6px),
        repeating-radial-gradient(ellipse at 12% 24%, transparent 0 34px, rgba(77, 169, 209, .055) 35px 36px),
        repeating-radial-gradient(ellipse at 92% 86%, transparent 0 48px, rgba(121, 189, 108, .045) 49px 50px);
    animation: dablew-star-breathe 8s ease-in-out infinite alternate;
}

body::after {
    content: "";
    position: fixed;
    right: -190px;
    bottom: -175px;
    z-index: 0;
    width: min(690px, 58vw);
    min-width: 460px;
    aspect-ratio: 1.58;
    pointer-events: none;
    opacity: .52;
    border-radius: 50%;
    transform: rotate(-13deg);
    background:
        radial-gradient(circle at 50% 50%, rgba(233, 174, 56, .78) 0 4px, rgba(233, 174, 56, .18) 5px 13px, transparent 14px),
        radial-gradient(circle at 23% 50%, rgba(77, 169, 209, .72) 0 4px, rgba(77, 169, 209, .14) 5px 9px, transparent 10px),
        radial-gradient(circle at 74% 50%, rgba(201, 102, 74, .68) 0 7px, rgba(201, 102, 74, .12) 8px 14px, transparent 15px),
        radial-gradient(circle at 92% 50%, rgba(121, 189, 108, .7) 0 3px, rgba(121, 189, 108, .12) 4px 8px, transparent 9px),
        radial-gradient(ellipse at center, transparent 0 20.5%, rgba(77, 169, 209, .16) 20.8% 21.1%, transparent 21.4%),
        radial-gradient(ellipse at center, transparent 0 34%, rgba(233, 174, 56, .12) 34.3% 34.6%, transparent 34.9%),
        radial-gradient(ellipse at center, transparent 0 47.5%, rgba(121, 189, 108, .1) 47.8% 48.1%, transparent 48.4%);
    filter: drop-shadow(0 0 18px rgba(77, 169, 209, .08));
}

body > main,
body > footer {
    position: relative;
    z-index: 1;
}

@keyframes dablew-star-breathe {
    from { opacity: .78; }
    to { opacity: 1; }
}

body:not(.admin-page) > header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 72px;
    padding: 6px clamp(18px, 5vw, 72px);
    color: var(--brand-ink);
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    backdrop-filter: blur(0);
    transition:
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        backdrop-filter .28s ease;
}

body:not(.admin-page) > header.is-scrolled {
    background:
        radial-gradient(circle at 26% 0%, rgba(77, 169, 209, .2), transparent 24rem),
        linear-gradient(105deg, rgba(6, 18, 30, .96) 0%, rgba(11, 33, 50, .94) 56%, rgba(12, 42, 44, .94) 100%);
    border-bottom-color: rgba(233, 174, 56, .42);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
    backdrop-filter: blur(18px) saturate(1.12);
}

body:not(.admin-page) > header::after {
    display: none;
}

.logo.brand-lockup,
.email-action-brand.brand-lockup,
.brand.brand-lockup {
    display: block;
    width: clamp(172px, 18vw, 215px);
    max-width: 42vw;
    margin: 0;
    color: inherit;
    font-size: 0;
    letter-spacing: 0;
    line-height: 0;
    text-decoration: none;
}

.brand-lockup img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .24));
}

.logo.brand-lockup:hover {
    transform: translateY(-2px);
}

body:not(.admin-page) > header nav {
    gap: 9px;
}

body:not(.admin-page) > header #display-name,
body:not(.admin-page) > header #timer {
    color: var(--brand-ink);
    font-family: var(--font-ui);
    text-shadow: none;
}

.btn-nav,
.info-header-nav a {
    min-height: 36px;
    padding: 8px 15px;
    color: var(--brand-ink);
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.btn-nav:hover,
.info-header-nav a:hover,
.info-header-nav a.is-current {
    color: var(--brand-night);
    background: var(--brand-sun);
    border-color: var(--brand-sun);
    box-shadow: 0 8px 24px rgba(233, 174, 56, .18);
    transform: translateY(-2px);
}

.container {
    width: min(1320px, 100%);
    padding: clamp(48px, 7vw, 92px) clamp(18px, 6vw, 82px);
}

h1, h2, h3, h4,
.week-title,
.palette-title,
.legal-document h1,
.legal-document h2,
.contact-hero h1,
.contact-grid h2 {
    color: var(--brand-ink);
    font-family: var(--font-display);
}

.eyebrow,
.legal-kicker {
    color: var(--brand-earth);
    font-family: var(--font-ui);
    font-weight: 800;
}

.home-intro {
    position: relative;
    max-width: 950px;
    margin: 4px auto clamp(50px, 7vw, 86px);
}

.home-intro::before {
    content: "";
    display: block;
    width: 74px;
    height: 5px;
    margin: 0 auto 26px;
    background: linear-gradient(90deg, var(--brand-river) 0 33%, var(--brand-sun) 33% 66%, var(--brand-forest) 66%);
    border-radius: 999px;
}

.home-intro h1 {
    color: var(--brand-ink);
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 7.4vw, 7rem);
    font-weight: 600;
    letter-spacing: -.06em;
    line-height: .9;
}

.home-intro h1 em {
    color: var(--brand-forest);
    font-weight: 500;
}

.intro-copy {
    color: var(--brand-muted);
    font-family: var(--font-ui);
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    font-style: normal;
    line-height: 1.75;
}

.main-grid {
    gap: 18px;
}

.main-grid > .card,
.main-grid > .habit-entry-btn {
    position: relative;
    min-height: 250px;
    aspect-ratio: auto;
    overflow: hidden;
    padding: 32px;
    color: #fffaf0;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 20px 46px rgba(8, 24, 39, .15);
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.4vw, 2.55rem);
    font-weight: 600;
    line-height: 1.05;
    text-align: left;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.main-grid > .card::before,
.main-grid > .habit-entry-btn::before {
    position: absolute;
    top: 22px;
    left: 24px;
    font-family: var(--font-ui);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.main-grid > .card::after,
.main-grid > .habit-entry-btn::after {
    content: "→";
    position: absolute;
    right: 24px;
    bottom: 20px;
    font: 400 2rem/1 var(--font-ui);
}

.main-grid > .mains-answer-card {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    padding-top: 88px;
    background:
        radial-gradient(circle at 86% 18%, rgba(233, 174, 56, .42), transparent 8rem),
        linear-gradient(140deg, #8f3829, var(--brand-earth));
}

.main-grid > .mains-answer-card::before { content: "Write · Evaluate · Improve"; }

.mains-answer-card > span {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 13ch;
}

.main-grid > .card:nth-child(2) {
    padding-top: 88px;
    background:
        radial-gradient(circle at 90% 12%, rgba(255, 255, 255, .2), transparent 9rem),
        linear-gradient(140deg, #176d9b, var(--brand-river));
}

.main-grid > .card:nth-child(2)::before { content: "Practice · Analyse · Revise"; }

.main-grid > .habit-entry-btn {
    padding-top: 88px;
    background:
        radial-gradient(circle at 88% 16%, rgba(233, 174, 56, .28), transparent 8rem),
        linear-gradient(140deg, #164a37, var(--brand-forest));
}

.main-grid > .habit-entry-btn::before { content: "Discipline · Growth · Reflection"; }

.main-grid > .card:hover,
.main-grid > .habit-entry-btn:hover {
    color: #fffaf0;
    filter: saturate(1.08);
    transform: translateY(-8px);
    box-shadow: 0 30px 64px rgba(8, 24, 39, .22);
}

.mains-card-note {
    position: static;
    display: block;
    max-width: 34ch;
    margin: 0;
    color: rgba(255, 250, 240, .72);
    font-family: var(--font-ui);
    font-size: clamp(.72rem, .9vw, .82rem);
    font-weight: 500;
    line-height: 1.45;
}

.home-progress {
    margin-top: clamp(58px, 8vw, 96px);
    padding-top: 38px;
    border-top-color: var(--brand-line);
}

.daily-check-item,
.home-progress-charts,
.week-box,
.rect-card,
.question-card,
.quiz-right,
.result-card,
.review-question,
.habit-card,
.habit-tracker-card,
.habit-setup-card,
.leaderboard-box,
#performanceGraph,
.legal-document,
.contact-grid article {
    color: var(--brand-ink);
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
}

.daily-check-item {
    min-height: 84px;
    border-left: 4px solid var(--brand-cloud);
    font-family: var(--font-ui);
}

.daily-check-item:nth-child(2) { border-left-color: var(--brand-sun); }
.daily-check-item:nth-child(3) { border-left-color: var(--brand-forest); }

.daily-check-item.is-complete {
    background: rgba(79, 155, 114, .13);
    border-color: rgba(79, 155, 114, .42);
}

.daily-check-item.is-complete .daily-check-box {
    background: var(--brand-forest);
    border-color: var(--brand-forest);
}

.home-progress-charts {
    padding: 28px 26px 16px;
}

.progress-chart-divider {
    background: linear-gradient(to bottom, transparent, var(--brand-sun) 12%, var(--brand-sun) 88%, transparent);
    opacity: .7;
}

.chart-mains-bar { fill: var(--brand-forest); }
.chart-prelims-line { stroke: var(--brand-river); }
.chart-prelims-point { fill: var(--brand-paper); stroke: var(--brand-river); }

.prelims-grid .card,
.subject-box {
    color: var(--brand-ink);
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    font-family: var(--font-ui);
}

.prelims-grid .card:nth-child(4n + 1),
.subject-grid .subject-box:nth-child(4n + 1) { border-top: 4px solid var(--brand-river); }
.prelims-grid .card:nth-child(4n + 2),
.subject-grid .subject-box:nth-child(4n + 2) { border-top: 4px solid var(--brand-earth); }
.prelims-grid .card:nth-child(4n + 3),
.subject-grid .subject-box:nth-child(4n + 3) { border-top: 4px solid var(--brand-sun); }
.prelims-grid .card:nth-child(4n),
.subject-grid .subject-box:nth-child(4n) { border-top: 4px solid var(--brand-forest); }

.prelims-grid .card:hover,
.subject-box:hover {
    color: #fffaf0;
    background: #173e52;
    border-color: rgba(77, 169, 209, .5);
    transform: translateY(-5px);
}

.today,
.week-current {
    color: #fffaf0 !important;
    background: linear-gradient(135deg, #176d9b, var(--brand-river)) !important;
    border-color: transparent !important;
}

input,
textarea,
select,
.custom-answer-fields select,
.custom-answer-fields input {
    color: var(--brand-ink);
    background: rgba(5, 19, 30, .82);
    border: 1px solid var(--brand-line);
    border-radius: 11px;
    font-family: var(--font-ui);
}

input:focus,
textarea:focus,
select:focus {
    outline: 3px solid rgba(62, 155, 198, .2);
    border-color: var(--brand-river);
}

.btn-submit,
.nav-btn,
.custom-answer-submit,
.habit-edit-btn,
.contact-email-button,
.email-action-home {
    color: #fffaf0;
    background: var(--brand-night);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.btn-submit:hover,
.nav-btn:hover,
.custom-answer-submit:hover,
.habit-edit-btn:hover,
.contact-email-button:hover,
.email-action-home:hover {
    background: var(--brand-earth);
}

.modal {
    background: rgba(4, 15, 25, .72);
    backdrop-filter: blur(10px);
}

.modal-content {
    overflow: hidden;
    color: var(--brand-ink);
    background: #0f2734;
    border: 1px solid var(--brand-line);
    border-radius: 22px;
    box-shadow: 0 34px 100px rgba(4, 15, 25, .32);
}

.modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--brand-river), var(--brand-sun), var(--brand-earth), var(--brand-forest));
}

.option-btn {
    border-color: var(--brand-line);
    border-radius: 12px;
}

.option-btn:hover,
.option-btn.selected {
    color: #fffaf0;
    background: var(--brand-night-soft);
    border-color: var(--brand-night-soft);
}

.legal-page {
    background:
        radial-gradient(circle at 12% 0%, rgba(77, 169, 209, .16), transparent 28rem),
        linear-gradient(180deg, #07131e, #0a202d);
}

.legal-document {
    padding: clamp(28px, 5vw, 58px);
}

.legal-document section {
    border-top-color: var(--brand-line);
}

.legal-document p,
.legal-document li,
.contact-hero p,
.contact-grid p,
.contact-guidance p,
.about-lead {
    color: var(--brand-muted) !important;
    font-family: var(--font-ui);
}

.about-pillars article,
.contact-guidance {
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-radius: 18px;
}

.about-pillars article:nth-child(4n + 1) { border-top: 4px solid var(--brand-river); }
.about-pillars article:nth-child(4n + 2) { border-top: 4px solid var(--brand-earth); }
.about-pillars article:nth-child(4n + 3) { border-top: 4px solid var(--brand-sun); }
.about-pillars article:nth-child(4n) { border-top: 4px solid var(--brand-forest); }

.legal-document a,
.contact-shell a { color: var(--brand-earth); }

.email-action-page {
    background:
        radial-gradient(circle at 50% 15%, rgba(140, 201, 231, .25), transparent 28rem),
        linear-gradient(180deg, var(--brand-night), #123648);
}

.email-action-card {
    background: var(--brand-paper);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 26px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .34);
}

.email-action-brand.brand-lockup {
    width: min(100%, 340px);
    max-width: 100%;
    margin: 0 auto 26px;
}

.site-footer {
    color: rgba(247, 241, 229, .72);
    background:
        linear-gradient(90deg, rgba(62, 155, 198, .08), rgba(35, 106, 75, .1)),
        var(--brand-night);
    border-top: 3px solid var(--brand-sun);
    font-family: var(--font-ui);
}

.site-footer a { color: #f7f1e5; }
.site-footer a:hover { color: var(--brand-sun); }

body.dark-mode {
    --brand-ink: #f4efe4;
    --brand-muted: #aebfc1;
    --brand-line: rgba(216, 231, 235, .14);
    --brand-surface: rgba(15, 39, 52, .9);
    --bg-light: #07131e;
    --paper: var(--brand-paper);
    --paper-deep: var(--brand-paper-deep);
    --ink: var(--brand-ink);
    --muted-ink: var(--brand-muted);
    --line: var(--brand-line);
    --surface: var(--brand-surface);
    --header-black: var(--brand-night);
    color: var(--brand-ink);
    background:
        radial-gradient(circle at 8% 2%, rgba(62, 155, 198, .16), transparent 28rem),
        radial-gradient(circle at 92% 70%, rgba(35, 106, 75, .18), transparent 28rem),
        #07131e;
}

body.dark-mode:not(.admin-page) > header.is-scrolled {
    background:
        radial-gradient(circle at 26% 0%, rgba(77, 169, 209, .18), transparent 24rem),
        linear-gradient(105deg, #06121e 0%, #0b2132 56%, #0c2a2c 100%);
    border-bottom-color: rgba(233, 174, 56, .42);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
}

body.dark-mode .daily-check-item,
body.dark-mode .home-progress-charts,
body.dark-mode .week-box,
body.dark-mode .rect-card,
body.dark-mode .question-card,
body.dark-mode .quiz-right,
body.dark-mode .result-card,
body.dark-mode .review-question,
body.dark-mode .habit-card,
body.dark-mode .habit-tracker-card,
body.dark-mode .habit-setup-card,
body.dark-mode .leaderboard-box,
body.dark-mode #performanceGraph,
body.dark-mode .prelims-grid .card,
body.dark-mode .subject-box {
    color: var(--brand-ink);
    background: var(--brand-surface);
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    color: #f4efe4;
    background: #102a39;
}

.admin-page {
    --ink: var(--brand-ink);
    --muted: var(--brand-muted);
    --paper: var(--brand-paper);
    --card: var(--brand-surface);
    --line: var(--brand-line);
    --green: var(--brand-forest);
    --mint: rgba(79, 155, 114, .16);
    --amber: var(--brand-sun);
    color: var(--brand-ink);
    background: linear-gradient(180deg, #07131e, #0a202d);
    font-family: var(--font-ui);
}

.admin-page .topbar {
    min-height: 72px;
    padding: 6px 20px;
    background:
        radial-gradient(circle at 26% 0%, rgba(77, 169, 209, .18), transparent 24rem),
        linear-gradient(105deg, #06121e 0%, #0b2132 56%, #0c2a2c 100%);
    border: 0;
    border-bottom: 1px solid var(--brand-line);
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
}

.admin-page .brand.brand-lockup {
    position: relative;
    width: min(215px, 38vw);
    max-width: none;
}

.admin-page .brand.brand-lockup span {
    position: absolute;
    right: 0;
    bottom: 12px;
    color: var(--brand-night);
    background: var(--brand-sun);
    font: 800 .62rem/1 var(--font-ui);
}

.admin-page .admin-state { color: var(--brand-muted); }

/* Midnight surface harmonization */
.about-section,
.habit-first-time-guide,
.habit-setup-row,
.habit-summary-panel {
    color: var(--brand-ink);
    background: var(--brand-surface);
    border-color: var(--brand-line);
}

.about-pillars h3,
.about-closing h2,
.habit-summary-panel h3 {
    color: var(--brand-ink);
}

.about-pillars span { color: var(--brand-sun); }

.option-btn,
.btn-white {
    color: var(--brand-ink);
    background: rgba(5, 19, 30, .72);
    border-color: var(--brand-line);
}

.btn-white:hover,
.btn-white:focus-visible {
    color: var(--brand-night);
    background: var(--brand-sun);
    border-color: var(--brand-sun);
    outline: none;
    box-shadow: 0 8px 24px rgba(233, 174, 56, .18);
}

.btn-white.action-processing,
.btn-white.action-processing:hover {
    color: var(--brand-sun) !important;
    background: rgba(233, 174, 56, .12) !important;
    border-color: rgba(233, 174, 56, .48) !important;
}

.password-visibility-toggle {
    color: var(--brand-muted);
}

.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible {
    color: var(--brand-night);
    background: var(--brand-sun);
    box-shadow: 0 0 0 2px rgba(233, 174, 56, .22);
}

.close-btn-wrapper:hover { background: var(--brand-sun); }
.close-btn-wrapper:hover .close-x { color: var(--brand-night); }

.admin-page .secondary,
.admin-page .pagination button,
.admin-page .editor-card textarea,
.admin-page .login-panel input,
.admin-page .mains-question-row select {
    color: var(--brand-ink);
    background: rgba(5, 19, 30, .82);
    border-color: var(--brand-line);
}

.admin-page th { background: #0b2132; }
.admin-page th,
.admin-page td,
.admin-page .mains-question-row { border-color: var(--brand-line); }
.admin-page .admin-state i { box-shadow: 0 0 0 4px rgba(79, 155, 114, .16); }

@media (max-width: 900px) {
    body:not(.admin-page) > header {
        min-height: 68px;
    }

    .logo.brand-lockup { width: clamp(165px, 24vw, 200px); }
}

@media (max-width: 700px) {
    body:not(.admin-page) > header {
        min-height: 60px;
        padding: 6px 14px;
    }

    .logo.brand-lockup {
        width: min(42vw, 165px);
        max-width: none;
    }

    .btn-nav {
        min-height: 36px;
        padding: 7px 11px;
        font-size: .62rem;
    }

    .home-intro h1 { font-size: clamp(3rem, 15vw, 5.4rem); }

    .main-grid > .card,
    .main-grid > .habit-entry-btn {
        min-height: 210px;
        padding: 78px 24px 28px;
    }

    .mains-card-note {
        max-width: 31ch;
    }

    .legal-page > header {
        align-items: center;
        gap: 6px 14px;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .legal-page .brand-lockup { width: min(42vw, 165px); }

    .info-header-nav {
        width: 100%;
        padding: 3px 0 5px;
    }

    .info-header-nav a {
        min-height: 34px;
        padding: 7px 12px;
        font-size: .62rem;
    }

    .site-footer { align-items: flex-start; }

    .admin-page .topbar {
        min-height: 60px;
        padding: 6px 12px;
    }

    .admin-page .brand.brand-lockup { width: min(42vw, 165px); }
}

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

    body::before { opacity: .94; }
}

/* Legal-page contrast recovery: legacy paper callouts must not inherit light text. */
.legal-document .legal-summary {
    color: #f7fbff;
    background:
        linear-gradient(135deg, rgba(77, 169, 209, .18), rgba(12, 45, 61, .98)),
        #0c2d3d;
    border: 1px solid rgba(140, 201, 231, .34);
    border-left: 4px solid var(--brand-sun);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-family: var(--font-ui);
    font-weight: 560;
}

.legal-document .legal-summary strong {
    color: #ffffff;
}

.legal-document .legal-summary a {
    color: #bfe8fa;
    font-weight: 750;
}

.legal-document .legal-summary code {
    color: #fff5ce;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 5px;
    padding: .08em .34em;
    font-family: var(--font-ui);
    font-size: .9em;
    white-space: nowrap;
}

/* Match the question palette to the quiz option tiles. */
.palette-unattempted {
    color: var(--brand-ink);
    background: rgba(5, 19, 30, .72);
    border: 1px solid var(--brand-line);
}

.palette-unattempted:hover {
    background: var(--brand-night-soft);
    border-color: var(--brand-cloud);
}

/* Make the chosen answer unmistakable while keeping the midnight DABLEW palette. */
.option-btn.selected {
    position: relative;
    padding-right: 58px;
    color: #fffaf0;
    background: linear-gradient(90deg, rgba(32, 101, 132, .94), rgba(16, 57, 76, .96));
    border-color: rgba(140, 201, 231, .82);
    box-shadow: inset 4px 0 0 var(--brand-sun), 0 8px 22px rgba(4, 15, 25, .26);
    transform: translateX(3px);
}

.option-btn.selected span {
    font-weight: 700;
}

.option-btn.selected::after {
    content: "✓";
    position: absolute;
    top: 50%;
    right: 20px;
    color: var(--brand-sun);
    font-family: var(--font-ui);
    font-size: 1.15rem;
    font-weight: 800;
    transform: translateY(-50%);
}



/* Homepage daily actions */
.home-actions {
    display: grid;
    gap: 22px;
    margin: 34px 0 48px;
    text-align: left;
}

.home-answer-entry h2 {
    margin: 0 0 14px;
    color: var(--brand-ink);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 600;
}

.home-answer-entry .custom-answer-card {
    padding: 28px;
    background: rgba(15, 39, 52, .88);
    border: 1px solid var(--brand-line);
    border-radius: 22px;
    box-shadow: var(--card-shadow);
}

.home-answer-entry .custom-answer-fields select,
.home-answer-entry .custom-answer-fields input {
    min-height: 52px;
    background: rgba(5, 19, 30, .82);
}

.daily-prelims-prompt {
    display: grid;
    grid-template-columns: minmax(165px, .85fr) minmax(108px, .52fr) minmax(235px, 1.3fr);
    align-items: center;
    gap: clamp(12px, 2.6vw, 30px);
    max-width: 880px;
    margin: 0 auto;
    padding: 20px 26px;
    color: var(--brand-ink);
    background: linear-gradient(100deg, rgba(10, 32, 46, .88), rgba(12, 44, 59, .68));
    border: 1px solid rgba(140, 201, 231, .17);
    border-radius: 24px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
    text-decoration: none;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.daily-newspaper-cloud,
.daily-prelims-cta {
    min-height: 84px;
    padding: 16px 22px;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.daily-newspaper-cloud {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 25% 24%, rgba(140, 201, 231, .15), transparent 45%),
        rgba(5, 24, 39, .78);
    border: 1px solid rgba(140, 201, 231, .7);
    border-radius: 49% 51% 46% 54% / 54% 43% 57% 46%;
}

.daily-prelims-cta {
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(77, 169, 209, .22), transparent 60%),
        #12394c;
    border: 1px solid rgba(140, 201, 231, .42);
    border-radius: 17px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.daily-prelims-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--brand-sun);
    font: 400 clamp(1.8rem, 3vw, 2.55rem)/1 var(--font-ui);
}

.daily-prelims-arrow::before {
    content: "";
    width: clamp(30px, 5vw, 62px);
    border-top: 2px dashed rgba(233, 174, 56, .66);
}

.daily-prelims-prompt:hover {
    border-color: rgba(140, 201, 231, .46);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .26);
    transform: translateY(-3px);
}

.daily-prelims-prompt:hover .daily-newspaper-cloud {
    background: rgba(10, 42, 59, .95);
    border-color: var(--brand-cloud);
}

.daily-prelims-prompt:hover .daily-prelims-cta {
    background:
        linear-gradient(135deg, rgba(77, 169, 209, .34), transparent 65%),
        #174d65;
    border-color: var(--brand-cloud);
}

@media (max-width: 620px) {
    .home-actions { margin: 28px 0 38px; }

    .home-answer-entry .custom-answer-card { padding: 20px; }

    .daily-prelims-prompt {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 18px;
    }

    .daily-newspaper-cloud,
    .daily-prelims-cta { min-height: 76px; }

    .daily-prelims-arrow {
        height: 34px;
        transform: rotate(90deg);
    }

    .daily-prelims-arrow::before { width: 42px; }
}

/* Admin question studio — high-contrast midnight review workspace */
.admin-page #suggestion-panel {
    --review-canvas: #07131e;
    --review-toolbar: #0c2231;
    --review-heading: #fffaf0;
    --review-text: #edf4f1;
    --review-muted: #bfd0d1;
    --review-line: rgba(191, 232, 250, .2);
    overflow: hidden;
    color: var(--review-text);
    background:
        radial-gradient(circle at 88% 4%, rgba(77, 169, 209, .12), transparent 24rem),
        var(--review-canvas);
    border-top: 1px solid var(--review-line);
    font-family: "DM Sans", var(--font-ui);
}

.admin-page .suggestion-toolbar {
    align-items: center;
    padding: 30px 26px;
    color: var(--review-text);
    background:
        linear-gradient(105deg, rgba(77, 169, 209, .09), transparent 48%),
        var(--review-toolbar);
    border-bottom: 1px solid var(--review-line);
}

.admin-page .suggestion-toolbar .eyebrow {
    margin-bottom: 10px;
    color: #f1c96d;
}

.admin-page .suggestion-toolbar h3,
.admin-page .suggestion-group-head h3 {
    color: var(--review-heading);
    font-family: "DM Sans", var(--font-ui);
    font-weight: 760;
    letter-spacing: -.025em;
}

.admin-page .suggestion-toolbar h3 {
    font-size: clamp(1.65rem, 2.4vw, 2.05rem);
    line-height: 1.12;
}

.admin-page .suggestion-toolbar #selection-summary,
.admin-page .suggestion-group-head p {
    color: var(--review-muted);
}

.admin-page .toolbar-actions .secondary {
    min-height: 44px;
    padding: 10px 17px;
    color: #fffaf0;
    background: #173e52;
    border: 1px solid rgba(140, 201, 231, .34);
    border-radius: 10px;
    font-family: "DM Sans", var(--font-ui);
    font-weight: 720;
}

.admin-page .toolbar-actions .secondary:hover,
.admin-page .toolbar-actions .secondary:focus-visible {
    color: #081827;
    background: #e9ae38;
    border-color: #e9ae38;
    outline: 3px solid rgba(233, 174, 56, .2);
    outline-offset: 2px;
}

.admin-page .suggestion-sections {
    background: transparent;
}

.admin-page .suggestion-group {
    color: var(--review-text);
    background: #0f2734;
    border-color: var(--review-line);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}

.admin-page .suggestion-group-head {
    color: var(--review-text);
    background:
        linear-gradient(90deg, rgba(77, 169, 209, .08), transparent 62%),
        #102b3d;
    border-bottom-color: var(--review-line);
}

.admin-page .suggestion-group-head h3 {
    font-size: 1.25rem;
    line-height: 1.25;
}

.admin-page .group-actions button {
    min-height: 40px;
    padding: 8px 10px;
    color: #bfe8fa;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: "DM Sans", var(--font-ui);
    font-size: .75rem;
    font-weight: 760;
}

.admin-page .group-actions button:hover,
.admin-page .group-actions button:focus-visible {
    color: #081827;
    background: #e9ae38;
    border-color: #e9ae38;
    outline: none;
}

.admin-page .suggestion-card {
    color: var(--review-text);
    background: #0f2734;
    border-bottom-color: var(--review-line);
    transition: background .18s ease, box-shadow .18s ease;
}

.admin-page .suggestion-card:hover {
    background: #122f40;
}

.admin-page .suggestion-card:has(input:checked) {
    background:
        linear-gradient(90deg, rgba(79, 155, 114, .1), transparent 38%),
        #0f2936;
    box-shadow: inset 3px 0 0 rgba(79, 155, 114, .72);
}

.admin-page .suggestion-check > span:not(.visually-hidden) {
    background: #091d2a;
    border-color: #78919b;
}

.admin-page .suggestion-check input:focus-visible + span {
    outline: 3px solid rgba(140, 201, 231, .3);
    outline-offset: 3px;
}

.admin-page .suggestion-check input:checked + span {
    background: #4f9b72;
    border-color: #79bd8f;
}

.admin-page .suggestion-meta > span {
    color: #f1c96d;
}

.admin-page .source-badge {
    color: #cce9f6 !important;
    background: rgba(77, 169, 209, .16);
    border: 1px solid rgba(140, 201, 231, .18);
}

.admin-page .marks-badge {
    color: #ffe5a4 !important;
    background: rgba(233, 174, 56, .13);
    border: 1px solid rgba(233, 174, 56, .2);
}

.admin-page .suggestion-question,
.admin-page .mains-suggestion .suggestion-question {
    color: var(--review-heading);
    font-family: "DM Sans", var(--font-ui);
    font-size: 1.05rem;
    font-weight: 680;
    letter-spacing: -.008em;
    line-height: 1.58;
}

.admin-page .suggestion-options li {
    color: var(--review-text);
    background: #091d2a;
    border-color: rgba(191, 232, 250, .16);
}

.admin-page .suggestion-options li > span {
    color: #d7e3e3;
    background: #183342;
}

.admin-page .suggestion-options li p {
    color: #edf4f1;
    font-family: "DM Sans", var(--font-ui);
    font-size: .88rem;
    line-height: 1.5;
}

.admin-page .suggestion-options li b {
    color: #9ad9b4;
}

.admin-page .suggestion-options .correct-option {
    color: #f4fbf7;
    background: #123b2b;
    border-color: rgba(121, 189, 143, .72);
}

.admin-page .suggestion-options .correct-option > span {
    color: #fff;
    background: #4f9b72;
}

.admin-page .suggestion-explanation {
    background:
        linear-gradient(90deg, rgba(233, 174, 56, .08), transparent 60%),
        #182733;
    border-left-color: #e9ae38;
}

.admin-page .suggestion-explanation strong {
    color: #f1c96d;
}

.admin-page .suggestion-explanation p {
    color: #d7e3df;
    font-family: "DM Sans", var(--font-ui);
    font-size: .86rem;
    line-height: 1.62;
}

.admin-page .publish-bar {
    color: var(--review-text);
    background: rgba(12, 34, 49, .96);
    border-top-color: var(--review-line);
    box-shadow: 0 -14px 34px rgba(0, 0, 0, .22);
}

.admin-page .publish-bar strong {
    color: var(--review-heading);
    font-family: "DM Sans", var(--font-ui);
    font-size: 1rem;
}

.admin-page .publish-bar small {
    color: var(--review-muted);
}

.admin-page .publish-bar button {
    min-height: 46px;
    color: #081827;
    background: #e9ae38;
    border: 1px solid #f1c96d;
    font-family: "DM Sans", var(--font-ui);
    font-weight: 800;
}

.admin-page .publish-bar button:hover,
.admin-page .publish-bar button:focus-visible {
    background: #f1c96d;
    box-shadow: 0 9px 24px rgba(233, 174, 56, .2);
    outline: 3px solid rgba(233, 174, 56, .2);
    outline-offset: 2px;
}

.admin-page #publish-status {
    color: var(--review-muted);
}

.admin-page .newspaper-workflow .workflow-status {
    color: #bfd0d1;
    font-family: "DM Sans", var(--font-ui);
}

.admin-page .newspaper-workflow .workflow-status.is-working {
    color: #ffd783;
}

.admin-page .newspaper-workflow .workflow-status.is-success {
    color: #86d4a6;
}

.admin-page .newspaper-workflow .workflow-status.is-error {
    color: #ff9e9e;
}

.admin-page .newspaper-workflow .workflow-status.is-working::before {
    border-color: rgba(255, 215, 131, .35);
    border-top-color: #ffd783;
}

.admin-page .suggestion-meta > span,
.admin-page .suggestion-explanation strong {
    font-size: .69rem;
}

@media (max-width: 760px) {
    .admin-page .suggestion-toolbar {
        padding: 24px 18px;
    }

    .admin-page .suggestion-toolbar h3 {
        font-size: 1.55rem;
    }

    .admin-page .suggestion-group-head h3 {
        font-size: 1.15rem;
    }

    .admin-page .suggestion-question,
    .admin-page .mains-suggestion .suggestion-question {
        font-size: 1rem;
        line-height: 1.58;
    }

    .admin-page .suggestion-options li p,
    .admin-page .suggestion-explanation p {
        font-size: .875rem;
    }

    .admin-page .group-actions button {
        min-height: 44px;
    }
}