:root {
    --navy-deep:   #0A1628;
    --navy-panel:  #13284A;
    --navy-line:   #22395F;
    --field-bg:    #EDEFF5;
    --field-text:  #0A1628;
    --gold:        #D4AF37;
    --gold-soft:   #E8CE7A;
    --rose-gold:   #C98A93;
    --ivory:       #F3EFE8;
    --ivory-dim:   #B9C2D1;
    --error-bg:    #3A1620;
    --error-text:  #F3A8B3;
    --success-bg:  #163A2C;
    --success-text:#8FE0B4;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: var(--navy-deep);
    color: var(--ivory);
}

.page {
    display: flex;
    min-height: 100vh;
}

/* ---------- Intro / landing panel ---------- */

.intro {
    position: relative;
    flex: 1.15;
    display: flex;
    align-items: center;
    padding: 4rem 4rem;
    overflow: hidden;
    background: var(--navy-deep);
    border-right: 1px solid var(--navy-line);
}

.lattice {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    pointer-events: none;
    background-image:
        linear-gradient(30deg, var(--navy-line) 1px, transparent 1px),
        linear-gradient(150deg, var(--navy-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
    background-size: 56px 98px;
}

.intro-inner {
    position: relative;
    z-index: 1;
    max-width: 480px;
}

.mark {
    display: inline-block;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--gold);
    letter-spacing: 0.02em;
    margin-bottom: 2.5rem;
}

.intro h1 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-style: italic;
    font-size: 2.6rem;
    line-height: 1.2;
    margin: 0 0 1.2rem;
    color: var(--ivory);
}

.lede {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ivory-dim);
    margin: 0 0 2.5rem;
    max-width: 38ch;
}

.features {
    list-style: none;
    margin: 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--navy-line);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.features li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.feature-label {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--rose-gold);
    font-size: 0.9rem;
    width: 4.5rem;
    flex-shrink: 0;
}

.feature-text {
    font-size: 0.92rem;
    color: var(--ivory-dim);
}

/* ---------- Auth panel ---------- */

.auth {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-card {
    width: 100%;
    max-width: 340px;
    background: var(--navy-panel);
    border: 1px solid var(--navy-line);
    border-radius: 10px;
    padding: 2.25rem;
}

.auth-card h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--gold-soft);
    margin: 0 0 1.5rem;
}

.form-group {
    margin-bottom: 1.1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    color: var(--ivory-dim);
}

.form-group input {
    width: 100%;
    padding: 0.6rem 0.7rem;
    background: var(--field-bg);
    border: 1px solid var(--field-bg);
    border-radius: 6px;
    color: var(--field-text);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
}

.form-group input::placeholder {
    color: #8A93A6;
}

.field-hint {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--ivory-dim);
}

.form-group input:focus {
    outline: none;
    border-color: var(--rose-gold);
    box-shadow: 0 0 0 3px rgba(201, 138, 147, 0.25);
}

/* Orange-chrome button: the one bold accent on the page */
.btn-chrome {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.7rem;
    border: none;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #3A1C00;
    cursor: pointer;
    background: linear-gradient(135deg, #FF7A3D 0%, #FFD9A0 35%, #FF7A3D 60%, #FFB347 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    transition: background-position 0.4s ease;
}

.btn-chrome:hover {
    background-position: 100% 50%;
}

.auth-switch {
    text-align: center;
    margin-top: 1.3rem;
    font-size: 0.88rem;
    color: var(--ivory-dim);
}

.auth-switch a {
    color: var(--rose-gold);
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

.alert {
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 1.2rem;
    font-size: 0.85rem;
}

.alert ul {
    margin: 0;
    padding-left: 1.1rem;
}

.alert-error {
    background: var(--error-bg);
    color: var(--error-text);
}

.alert-success {
    background: var(--success-bg);
    color: var(--success-text);
}

/* ---------- Dashboard: top banner ---------- */

body.dashboard {
    padding-top: 56px; /* offset for fixed topbar */
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.75rem;
    background: var(--navy-deep);
    border-bottom: 1px solid var(--navy-line);
    z-index: 100;
}

.topbar-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-size: 1.1rem;
    color: var(--gold);
}

.logout-form {
    margin: 0;
}

.logout-btn {
    background: none;
    border: 1px solid var(--navy-line);
    color: var(--ivory-dim);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem;
    border-radius: 5px;
    cursor: pointer;
}

.logout-btn:hover {
    border-color: var(--rose-gold);
    color: var(--rose-gold);
}

/* ---------- Dashboard: content ---------- */

.breadcrumb {
    margin: 0 0 1.5rem;
}

.breadcrumb a {
    color: var(--rose-gold);
    text-decoration: none;
    font-size: 0.88rem;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.welcome-eyebrow {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rose-gold);
}

.content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem 1.75rem 4rem;
}

.content-title {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-style: italic;
    font-size: 2rem;
    color: var(--ivory);
    margin: 0 0 0.4rem;
}

.content-sub {
    color: var(--ivory-dim);
    font-size: 0.95rem;
    margin: 0 0 2.5rem;
}

.content-sub a {
    color: var(--rose-gold);
}

.inline-logout {
    display: inline;
    margin: 0;
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--rose-gold);
    font-family: 'Inter', sans-serif;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.link-btn:hover {
    color: var(--gold);
}

/* ---------- Dashboard: section grid ---------- */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.section-card {
    background: var(--navy-panel);
    border: 1px solid var(--navy-line);
    border-radius: 10px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
}

.section-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--gold-soft);
    margin: 0 0 0.5rem;
}

.section-desc {
    font-size: 0.88rem;
    color: var(--ivory-dim);
    margin: 0 0 1.4rem;
    flex-grow: 1;
}

.section-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.btn-section {
    display: inline-block;
    text-align: center;
    padding: 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: #3A1C00;
    background: linear-gradient(135deg, #FF7A3D 0%, #FFD9A0 35%, #FF7A3D 60%, #FFB347 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    transition: background-position 0.4s ease;
}

.btn-section:hover {
    background-position: 100% 50%;
}

.btn-section-outline {
    display: inline-block;
    text-align: center;
    padding: 0.55rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.88rem;
    color: var(--gold-soft);
    border: 1px solid var(--navy-line);
}

.btn-section-outline:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.marks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.marks-table th {
    text-align: left;
    color: var(--ivory-dim);
    font-weight: 500;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--navy-line);
}

.marks-table td {
    padding: 0.5rem 0;
    color: var(--ivory);
}

.marks-placeholder {
    color: var(--ivory-dim);
    font-style: italic;
    text-align: center;
    padding: 1rem 0;
}

/* ---------- Clicker page ---------- */
/* Colors match the A-E key colors used on lesson slides, pulled from the
   legacy stylesheet (.btnA - .btnE) so they stay instantly recognisable. */

.clicker-prompt {
    text-align: center;
    color: var(--ivory-dim);
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
}

.clicker-grid {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.clicker-btn {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: none;
    color: #111111;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.clicker-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.clicker-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.clicker-btn-a { background: #FF66CC; }
.clicker-btn-b { background: #FFCC33; }
.clicker-btn-c { background: #99FF33; }
.clicker-btn-d { background: #00CCFF; }
.clicker-btn-e { background: #9966FF; color: #F3EFE8; }

.clicker-btn.selected {
    box-shadow: 0 0 0 4px var(--gold), 0 2px 8px rgba(0,0,0,0.3);
}

@keyframes clickerPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}

.clicker-btn.pulse {
    animation: clickerPulse 0.35s ease;
}

.clicker-result {
    text-align: center;
    margin-top: 1.75rem;
    color: var(--ivory-dim);
    font-size: 0.92rem;
}

.clicker-result strong {
    color: var(--gold);
}

/* ---------- Let's Draw ---------- */

.draw-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.draw-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--ivory-dim);
}

.draw-field input[type="color"] {
    width: 34px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--navy-line);
    border-radius: 5px;
    background: none;
    cursor: pointer;
}

.draw-field input[type="range"] {
    accent-color: var(--rose-gold);
}

/* Neutral by default — only the active pen/eraser state and the final
   "send" action get color, so the toolbar isn't a wall of gold text. */
.draw-btn {
    background: none;
    border: 1px solid var(--navy-line);
    color: var(--ivory-dim);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.draw-btn:hover {
    border-color: var(--rose-gold);
    color: var(--rose-gold);
}

.draw-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #1A1200;
    font-weight: 600;
}

.canvas-wrap {
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

#c {
    border: 1px solid var(--navy-line);
    border-radius: 6px;
    background: #fff;
    touch-action: none;
    max-width: 100%;
}

.draw-send {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--navy-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.draw-status {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ivory-dim);
    min-height: 1.2em;
}

.tree-card {
    background: var(--navy-panel);
    border: 1px solid var(--navy-line);
    border-radius: 10px;
    padding: 2rem;
}

.tree-card .mermaid {
    display: flex;
    justify-content: center;
}

.tree-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--navy-line);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--ivory-dim);
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.dot-done { background: #2E7D4A; }
.dot-available { background: var(--gold); }
.dot-locked { background: #1C3357; border: 1px solid var(--navy-line); }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
    .page {
        flex-direction: column;
    }
    .intro {
        border-right: none;
        border-bottom: 1px solid var(--navy-line);
        padding: 3rem 1.75rem;
    }
    .intro h1 {
        font-size: 2rem;
    }
    .auth {
        padding: 2.5rem 1.5rem;
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Teacher dashboard (tmain.php) ---------- */

.span-all {
    grid-column: 1 / -1;
}

.stat-line {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    color: var(--ivory-dim);
}

.stat-num {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--gold-soft);
    margin-right: 0.35rem;
}

.scroll-x {
    overflow-x: auto;
}

.meter {
    display: inline-block;
    vertical-align: middle;
    width: 64px;
    height: 6px;
    margin-left: 0.6rem;
    border-radius: 3px;
    background: var(--navy-line);
    overflow: hidden;
}

.meter > span {
    display: block;
    height: 100%;
    background: var(--gold);
}

/* ---------- Clicker histogram (tclicker.php) ---------- */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
}

/* links styled like the outlined buttons */
a.logout-btn {
    display: inline-block;
    text-decoration: none;
}

.histogram {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 1.75rem 0.5rem 0;
}

.hist-col {
    flex: 1;
    text-align: center;
}

.hist-track {
    position: relative;
    height: 200px;
    border-bottom: 1px solid var(--navy-line);
}

.hist-bar {
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 0;
    min-height: 2px;
    background: var(--gold);
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
}

/* same colours as the student clicker buttons */
.hist-a .hist-bar { background: #FF66CC; }
.hist-b .hist-bar { background: #FFCC33; }
.hist-c .hist-bar { background: #99FF33; }
.hist-d .hist-bar { background: #00CCFF; }
.hist-e .hist-bar { background: #9966FF; }

[hidden] { display: none !important; }

.hist-count {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 0.25rem;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ivory);
}

.hist-label {
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--gold-soft);
}

.hist-pct {
    font-size: 0.8rem;
    color: var(--ivory-dim);
}

/* ---------- Student drawings gallery (tdraw.php) ---------- */

.content-wide {
    max-width: 1100px;
}

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

.draw-card {
    margin: 0;
    padding: 0.9rem;
    gap: 0.7rem;
}

.draw-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--navy-line);
    border-radius: 6px;
    background: #fff;
    cursor: zoom-in;
    overflow: hidden;
}

.draw-thumb:hover,
.draw-thumb:focus-visible {
    border-color: var(--gold);
}

.draw-thumb img {
    display: block;
    width: 100%;
    height: 220px;          /* drawings come in any shape: show each whole inside the same box */
    object-fit: contain;
}

.draw-card figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.75rem;
}

.draw-name {
    flex: 1 1 100%;
    font-weight: 600;
    color: var(--ivory);
}

.draw-time {
    flex: 1;
    font-size: 0.78rem;
    color: var(--ivory-dim);
}

.draw-dl {
    font-size: 0.82rem;
    color: var(--rose-gold);
}

.draw-dialog {
    max-width: min(92vw, 900px);
    padding: 1rem;
    border: 1px solid var(--navy-line);
    border-radius: 10px;
    background: var(--navy-panel);
    color: var(--ivory);
}

.draw-dialog::backdrop {
    background: rgba(0, 0, 0, 0.75);
}

.draw-dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.draw-dialog img {
    display: block;
    max-width: 100%;
    max-height: 80vh;       /* a tall drawing fits on screen */
    width: auto;
    height: auto;
    margin: 0 auto;
    background: #fff;
    border-radius: 6px;
}

/* ---------- Link accounts page (tlink.php) ---------- */

.stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.alert {
    margin-bottom: 1.5rem;
}

.muted {
    color: var(--ivory-dim);
    font-size: 0.88rem;
}

.link-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.link-form select,
.roster-form textarea {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--field-text);
    background: var(--field-bg);
    border: 1px solid var(--navy-line);
    border-radius: 5px;
    padding: 0.45rem 0.6rem;
}

.link-form select {
    min-width: 12rem;
    max-width: 100%;
}

.roster-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--navy-line);
}

.roster-form label {
    font-size: 0.88rem;
    color: var(--ivory-dim);
}

.roster-form textarea {
    width: 100%;
    max-width: 28rem;
    resize: vertical;
}

/* ---------- Admin dashboard (amain.php) ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-tile {
    padding: 0.9rem 1rem;
    border: 1px solid var(--navy-line);
    border-radius: 8px;
    background: var(--navy-panel);
    font-size: 0.85rem;
    color: var(--ivory-dim);
}

.code-big {
    display: block;
    margin-top: 0.4rem;
    font-family: monospace;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    user-select: all;
}

.code-mono {
    font-family: monospace;
    letter-spacing: 0.05em;
}

.tag-teacher {
    color: var(--rose-gold);
    font-weight: 600;
}

.status {
    font-size: 0.78rem;
    font-weight: 600;
}
.status-active  { color: var(--success-text); }
.status-used-up,
.status-expired { color: var(--ivory-dim); }

.admin-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.admin-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--ivory-dim);
}

.admin-form input,
.admin-form select {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--field-text);
    background: var(--field-bg);
    border: 1px solid var(--navy-line);
    border-radius: 5px;
    padding: 0.45rem 0.6rem;
}

.admin-form input[type="number"] {
    width: 6rem;
}

.chip-form {
    display: inline-block;
    margin: 0 0.35rem 0.25rem 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.3rem 0.15rem 0.7rem;
    border: 1px solid var(--navy-line);
    border-radius: 999px;
    font-size: 0.85rem;
}

.chip button {
    border: none;
    background: none;
    color: var(--ivory-dim);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.chip button:hover {
    color: var(--error-text);
}

/* ---------- My Marks (smain.php) and marks upload (tmarks.php) ---------- */

.marks-table .num,
.marks-table .of {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.marks-table th.num,
.marks-table td.num {
    text-align: right;
    padding-left: 1rem;
}

.marks-table th.of,
.marks-table td.of {
    text-align: left;
    padding-left: 0.4rem;
    color: var(--ivory-dim);
}

.marks-table tr.marks-group td {
    padding-top: 1.1rem;
    border-bottom: 1px solid var(--navy-line);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rose-gold);
}

.marks-table tr.total-row td {
    font-weight: 600;
    border-top: 1px solid var(--navy-line);
}

.marks-table tr.pct-row td {
    color: var(--gold-soft);
    font-weight: 600;
}

.marks-wide th,
.marks-wide td {
    padding: 0.45rem 0.6rem 0.45rem 0;
    text-align: center;
    white-space: nowrap;
}

.marks-wide th:first-child,
.marks-wide td:first-child {
    text-align: left;
}

.error-list {
    margin: 0.5rem 0 0 1.1rem;
    padding: 0;
    font-size: 0.85rem;
}

/* ---------- Past year questions (spractice.php, tquestions.php) ---------- */

.check-label {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem !important;
}

.row-hidden td {
    opacity: 0.5;
}

.q-meta {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    color: var(--ivory-dim);
}

.q-text {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.q-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 1rem;
    background: #fff;
    border-radius: 6px;
}

.q-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}

.q-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--navy-line);
    border-radius: 8px;
    cursor: pointer;
}

.q-option:hover {
    border-color: var(--gold);
}

.q-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.q-option:has(input:checked) {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.12);
}

.q-option:has(input:focus-visible) {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.q-letter {
    flex: 0 0 1.6rem;
    font-weight: 600;
    color: var(--gold-soft);
}

.q-opt-text {
    flex: 1;
}

.q-option.is-correct {
    border-color: var(--success-text);
    background: rgba(143, 224, 180, 0.12);
    cursor: default;
}

.q-option.is-wrong {
    border-color: var(--error-text);
    background: rgba(255, 140, 140, 0.1);
    cursor: default;
}

.q-expl {
    display: block;
    margin-top: 0.4rem;
}

/* ---------- Questions imported as HTML (spractice.php) ---------- */

.q-html p {
    margin: 0 0 0.8rem;
}

.q-html ul.pyq-bullets {
    margin: 0 0 0.8rem 1.2rem;
    padding: 0;
}

.q-html table {
    border-collapse: collapse;
    margin: 0.5rem 0 1rem;
}

.q-html td,
.q-html th {
    border: 1px solid var(--navy-line);
    padding: 0.3rem 0.8rem;
    text-align: center;
    font-weight: 400;
}

.q-html figure {
    margin: 0.5rem 0 1rem;
}

.q-html img {
    max-width: 100%;
    height: auto;
    background: #fff;
    border-radius: 4px;
}

.q-html .frac {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    text-align: center;
    line-height: 1.15;
    margin: 0 0.15em;
}

.q-html .frac .n {
    border-bottom: 1px solid currentColor;
    padding: 0 0.15em;
}

.q-html .frac .d {
    padding: 0 0.15em;
}

.q-options-block {
    margin-bottom: 0.6rem;
}

.q-letter-row {
    flex-direction: row;
    gap: 0.6rem;
}

.q-option-letter {
    flex: 1;
    justify-content: center;
}

/* ---------- Layouts used by imported HTML questions (keep in step with pyq.css) ---------- */

.q-html .equation-center {
    text-align: center;
}

.q-html ul.pyq-bullets {
    margin: 0 0 0.8rem 1.5rem;
}

.q-html ul.pyq-bullets li {
    margin: 0.15rem 0;
}

.q-html table.pyq-labelled,
.q-html table.pyq-figure-grid {
    border-collapse: collapse;
    margin: 0.4rem 0 1rem 1.2rem;
}

.q-html table.pyq-labelled td,
.q-html table.pyq-figure-grid td {
    border: none;
    padding: 0.15rem 1.2rem 0.15rem 0;
    text-align: left;
    vertical-align: top;
}

.q-html table.pyq-figure-grid {
    margin-left: 0;
}

.q-html table.pyq-figure-grid td {
    text-align: center;
    vertical-align: bottom;
    padding: 0.4rem 1.4rem;
}

.q-html table.pyq-figure-grid figure {
    margin: 0;
}

/* mass number over atomic number, e.g. 27 over 13 before Al */
.q-html .nuclide {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    font-size: 0.72em;
    line-height: 1.05;
    text-align: right;
    margin-right: 0.08em;
}

.q-html .nuclide sup,
.q-html .nuclide sub {
    position: static;
    vertical-align: baseline;
    font-size: 1em;
    line-height: 1.05;
}


/* ---------- AS / A2 level (tlink.php) ---------- */

.inline-form {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.class-level-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
}

.level-tag {
    display: inline-block;
    min-width: 2.4rem;
    text-align: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.level-tag.level-as {
    color: var(--gold-soft);
    border: 1px solid var(--gold);
}

.level-tag.level-a2 {
    color: var(--navy-deep);
    background: var(--rose-gold);
    border: 1px solid var(--rose-gold);
}


/* ---------- Learning tree (slearning.php, ttree.php, stree.js) ---------- */

:root {
    --lt-as-phys:  #958CF2;  --lt-a2-phys:  #F08DA4;
    --lt-as-inorg: #5DC99C;  --lt-a2-inorg: #5DB9E8;
    --lt-as-org:   #F2B55C;  --lt-a2-org:   #C890F2;
    --lt-as-ana:   #8FE6DA;  --lt-a2-ana:   #2FB3A1;
}

body.lt-body-page { overflow: hidden; }

.lt-page {
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    display: flex;
    flex-direction: column;
}

.lt-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    padding: 0.9rem 1.25rem 0.8rem;
    border-bottom: 1px solid var(--navy-line);
}

.lt-back { color: var(--rose-gold); text-decoration: none; font-size: 0.82rem; }
.lt-back:hover { text-decoration: underline; }
.lt-h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.4rem; margin: 0.2rem 0 0.15rem; color: var(--ivory); }
.lt-sub { margin: 0; color: var(--ivory-dim); font-size: 0.85rem; }

.lt-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.lt-btn, .lt-seg button {
    background: none;
    border: 1px solid var(--navy-line);
    color: var(--ivory-dim);
    font: 500 0.82rem 'Inter', sans-serif;
    padding: 0.42rem 0.8rem;
    border-radius: 7px;
    cursor: pointer;
}
.lt-btn:hover, .lt-seg button:hover { color: var(--ivory); border-color: var(--rose-gold); }
.lt-btn[aria-pressed="true"] { color: var(--navy-deep); background: var(--gold-soft); border-color: var(--gold-soft); }
.lt-btn[hidden], .lt-seg[hidden] { display: none; }
.lt-seg { display: inline-flex; border: 1px solid var(--navy-line); border-radius: 7px; overflow: hidden; }
.lt-seg button { border: none; border-radius: 0; }
.lt-seg button[aria-pressed="true"] { background: var(--navy-panel); color: var(--gold-soft); }

.lt-search {
    background: var(--navy-panel);
    border: 1px solid var(--navy-line);
    color: var(--ivory);
    border-radius: 7px;
    padding: 0.42rem 0.7rem;
    font: 400 0.85rem 'Inter', sans-serif;
    width: 13rem;
}
.lt-search::placeholder { color: var(--ivory-dim); }

.lt-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--navy-line);
    font-size: 0.78rem;
}
.lt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid transparent;
    color: var(--ivory-dim);
    border-radius: 999px;
    padding: 0.2rem 0.6rem 0.2rem 0.45rem;
    cursor: pointer;
    font: inherit;
}
.lt-chip:hover { border-color: var(--navy-line); color: var(--ivory); }
.lt-chip[aria-pressed="true"] { border-color: var(--gold-soft); color: var(--ivory); }
.lt-dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid; }
.lt-key { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ivory-dim); margin-left: 0.4rem; }

.lt-body { flex: 1; display: flex; min-height: 0; }
.lt-stage { flex: 1; min-width: 0; position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.lt-stage.lt-dragging { cursor: grabbing; }
.lt-map { width: 100%; height: 100%; display: block; }

.lt-edge { fill: none; stroke: var(--ivory-dim); stroke-opacity: 0.2; stroke-width: 1.1; }
.lt-edge.lt-cross { stroke-dasharray: 3 4; }
.lt-edge.lt-hot-in { stroke: var(--gold); stroke-opacity: 0.95; stroke-width: 2; }
.lt-edge.lt-hot-out { stroke: var(--rose-gold); stroke-opacity: 0.95; stroke-width: 2; }
.lt-edge.lt-dim { stroke-opacity: 0.05; }

.lt-node { cursor: pointer; }
.lt-node:focus { outline: none; }
.lt-node:focus-visible .lt-shape { stroke: var(--gold-soft); stroke-width: 3; }
.lt-node .lt-base { fill: var(--navy-deep); stroke: none; }
.lt-node .lt-shape { stroke-width: 2; }
.lt-node .lt-ring { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.lt-node text { font: 600 10px 'Inter', sans-serif; text-anchor: middle; dominant-baseline: central; fill: var(--ivory); pointer-events: none; }
.lt-node.lt-sel .lt-shape { stroke-width: 3.2; }
.lt-node.lt-sel .lt-halo { stroke-width: 2; stroke-dasharray: 3 3; }
.lt-node.lt-hit .lt-shape { stroke: var(--gold-soft); stroke-width: 3.4; }
.lt-node.lt-faded .lt-shape, .lt-node.lt-faded .lt-ring, .lt-node.lt-faded text { opacity: 0.14; }
.lt-node.lt-shadow .lt-shape, .lt-node.lt-shadow .lt-ring, .lt-node.lt-shadow text { opacity: 0.25; }
.lt-node.lt-shadow .lt-shape { stroke-dasharray: 2.5 3; }
.lt-node.lt-done .lt-shape { fill-opacity: 1; }
.lt-node.lt-done text { fill: var(--navy-deep); }
.lt-node.lt-open .lt-halo2 { stroke-opacity: 1; stroke-width: 1.5; opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
    .lt-node.lt-open .lt-halo2 { animation: lt-breathe 2.4s ease-in-out infinite; }
    @keyframes lt-breathe { 50% { opacity: 0.1; } }
}

.lt-band-label { font: 600 20px 'Fraunces', serif; fill: var(--gold-soft); }
.lt-band-line { stroke: var(--navy-line); stroke-width: 1; stroke-dasharray: 6 6; }

.lt-zoom { position: absolute; left: 1rem; bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lt-zoom .lt-btn { background: var(--navy-panel); }
.lt-zoom .lt-btn[aria-pressed="true"] { background: var(--gold-soft); }
.lt-hint {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 0.75rem;
    color: var(--ivory-dim);
    background: rgba(10, 22, 40, 0.85);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    pointer-events: none;
}

.lt-panel {
    width: 21rem;
    max-width: 100%;
    border-left: 1px solid var(--navy-line);
    background: #0F2140;
    padding: 1.25rem 1.25rem 2rem;
    overflow-y: auto;
}
.lt-empty { color: var(--ivory-dim); font-size: 0.88rem; line-height: 1.55; margin: 0; }
.lt-num { font-weight: 600; font-size: 0.85rem; color: var(--ivory-dim); }
.lt-id { opacity: 0.6; font-weight: 500; margin-left: 0.3rem; }
.lt-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.3rem; line-height: 1.25; margin: 0.25rem 0 0.6rem; }
.lt-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.9rem; }
.lt-tag { font-size: 0.74rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--navy-line); color: var(--ivory-dim); }
.lt-tag-ms { border-color: var(--gold); color: var(--gold-soft); }
.lt-rule { font-size: 0.86rem; margin: 0; line-height: 1.5; }
.lt-act { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lt-status { font-size: 0.84rem; color: var(--ivory-dim); margin: 0; }
.lt-h3 { font: 600 0.78rem 'Inter', sans-serif; color: var(--ivory-dim); margin: 1.1rem 0 0.45rem; letter-spacing: 0.02em; }
.lt-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.lt-list button {
    width: 100%;
    text-align: left;
    background: var(--navy-panel);
    border: 1px solid var(--navy-line);
    border-radius: 6px;
    color: var(--ivory);
    font: 400 0.84rem/1.35 'Inter', sans-serif;
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
}
.lt-list button:hover { border-color: var(--rose-gold); }
.lt-n { color: var(--ivory-dim); min-width: 2.6rem; font-weight: 600; }
.lt-st { margin-left: auto; font-size: 0.72rem; color: var(--ivory-dim); white-space: nowrap; }

@media (max-width: 820px) {
    body.lt-body-page { overflow: auto; }
    .lt-body { flex-direction: column; }
    .lt-stage { min-height: 55vh; }
    .lt-panel { width: 100%; border-left: none; border-top: 1px solid var(--navy-line); max-height: none; }
    .lt-search { width: 100%; }
    .lt-controls { width: 100%; }
}


/* ---------- Question bank v2 (spractice.php, aquestions.php) ---------- */

/* Classes used inside question HTML. Keep in step with clean_html() in aqlib.php and the preview template. */
.q-html .ell { font-style: italic; }
.q-html .iod { font-family: 'Times New Roman', Times, serif; }
.q-html .std { font-size: 60%; font-family: 'Cambria Math', 'Segoe UI Symbol', 'STIX Two Math', 'Noto Sans Math', 'DejaVu Sans', serif; }
.q-html .pyq-box { border: 1px solid var(--navy-line); padding: 0.6rem 0.9rem; margin: 0.5rem 0 1rem; text-align: left; }
.q-html .pyq-box p:last-child { margin-bottom: 0; }

/* Examiner star and explanation */
.q-star { color: var(--gold); margin-left: 0.35rem; font-size: 1rem; }
.q-expl-box {
    margin: 1rem 0;
    padding: 0.8rem 1rem;
    background: var(--navy-deep);
    border-left: 3px solid var(--gold);
    border-radius: 0 6px 6px 0;
}
.q-expl-label { margin: 0 0 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--gold-soft); letter-spacing: 0.02em; }

/* Admin bank page */
.qb-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; }
.qb-topic { font-size: 0.76rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--navy-line); color: var(--ivory-dim); }
.qb-topic.qb-main { border-color: var(--gold); color: var(--gold-soft); }
.qb-status { font-size: 0.76rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.qb-live    { color: var(--success-text); border-color: var(--success-text); }
.qb-hidden  { color: var(--rose-gold); border-color: var(--rose-gold); }
.qb-retired { color: var(--ivory-dim); border-color: var(--navy-line); }
.qb-answer { margin: 0.8rem 0 0; font-size: 0.9rem; color: var(--ivory-dim); }
.qb-answer strong { color: var(--success-text); }
.qb-actions, .qb-row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.qb-row-actions { margin-top: 0; }
.qb-current td { background: rgba(212, 175, 55, 0.08); }


/* ---------- Let's Draw (sdraw.php): whiteboard that fills the screen ---------- */

body.dz-body { overscroll-behavior: none; }
body.dz-locked { overflow: hidden; }

.dz-page {
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    max-width: 1040px;               /* desktops: a comfortable board, not a huge one */
    margin: 0 auto;
    padding: 0.6rem 0.6rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
}
.dz-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.9rem; margin: 0 0.2rem 0.5rem; }
.dz-back { color: var(--rose-gold); text-decoration: none; font-size: 0.85rem; }
.dz-back:hover { text-decoration: underline; }
.dz-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.3rem; margin: 0; color: var(--ivory); }
.dz-sub { flex-basis: 100%; margin: 0; font-size: 0.85rem; color: var(--ivory-dim); }

.dz-stage {
    flex: 1;
    min-height: 0;
    max-height: 760px;               /* desktops */
    display: flex;
    flex-direction: column;
    background: var(--navy-panel);
    border: 1px solid var(--navy-line);
    border-radius: 10px;
    padding: 0.45rem;
}

.dz-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 0.45rem; }
.dz-tb {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--navy-line); border-radius: 8px;
    color: var(--ivory-dim); cursor: pointer;
}
.dz-tb[hidden] { display: none; }
.dz-tb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dz-tb:hover { color: var(--ivory); border-color: var(--rose-gold); }
.dz-tb[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--navy-deep); }
.dz-tb:focus-visible, .dz-send:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.dz-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dz-swatch { width: 36px; height: 36px; padding: 4px; border: 1px solid var(--navy-line); border-radius: 8px; }
.dz-swatch input { width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.dz-grow { flex: 1; }
.dz-send { width: auto; flex: 0 0 auto; margin: 0; padding: 0.5rem 1rem; font-size: 0.9rem; }
.dz-full-only { display: none; }

.dz-board { position: relative; flex: 1; min-height: 0; }
.dz-board canvas {
    display: block; width: 100%; height: 100%;
    background: #fff; border-radius: 6px;
    touch-action: none; cursor: crosshair;
}
.dz-msg {
    position: absolute; left: 50%; bottom: 0.8rem; transform: translateX(-50%);
    margin: 0; max-width: 90%;
    padding: 0.45rem 0.9rem; border-radius: 999px;
    background: var(--navy-deep); color: var(--ivory); font-size: 0.85rem; text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.dz-msg.show { opacity: 1; }

/* Turned sideways: the board fills the whole screen */
.dz-stage.dz-full {
    position: fixed; inset: 0; z-index: 200; max-height: none;
    border: none; border-radius: 0;
    padding: calc(0.4rem + env(safe-area-inset-top, 0px)) 0.4rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
}
.dz-stage.dz-full .dz-full-only { display: inline-flex; }
.dz-stage.dz-full #turn { display: none; }
/* the phone stayed upright (e.g. iPhone): draw the view rotated so it is used held sideways */
.dz-stage.dz-full.dz-turned {
    inset: auto; top: 0; left: 0;
    width: 100vh; height: 100vw;
    width: 100dvh; height: 100dvw;
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100%);
}

@media (max-width: 600px) {
    .dz-sub { display: none; }       /* more room for drawing on phones */
    .dz-title { font-size: 1.15rem; }
}