:root {
    --forest: 26 58 42;
    --forest-dark: 14 31 22;
    --forest-mid: 42 90 58;
    --forest-light: 61 122 82;
    --gold: 201 168 76;
    --gold-light: 240 208 128;
    --gold-dark: 139 105 20;
    --cream: 250 248 243;
    --cream-text: 240 237 230;
    --ink: 28 28 28;
    --muted: 107 114 128;
    --border-soft: rgba(0, 0, 0, 0.08);

    --brand: var(--forest);
    --brand-light: var(--forest-mid);
    --success: 42 90 58;
    --danger: 139 44 44;
}

[x-cloak] { display: none !important; }

.sidebar-track::before {
    content: '';
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 22px;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 0;
}

.section-heading::before {
    content: '';
    width: 12px;
    height: 2px;
    background: rgb(var(--brand));
}

.progress-track::before {
    content: '';
    position: absolute; top: 1.375rem; left: 15%; right: 15%;
    height: 1px; background: rgb(203 213 225); z-index: 0;
}
.dark .progress-track::before { background: rgb(51 65 85); }

.wizard-step { display: none; }
.wizard-step.active { display: block; }

.dynamic-wrap { display: none; }
.dynamic-wrap.show { display: block; }

/* ---- Admin console (sidebar/topbar) ---- */
.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgba(240, 237, 230, 0.7);
}
.admin-nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgb(240 237 230);
}
.admin-nav-link.active {
    background: rgb(var(--gold) / 0.15);
    color: rgb(var(--gold-light));
}
.admin-nav-link-danger:hover {
    background: rgba(139, 44, 44, 0.15);
    color: rgb(220 130 130);
}

.admin-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(51 65 85);
}
.dark .admin-dropdown-link { color: rgb(203 213 225); }
.admin-dropdown-link:hover { background: rgb(248 250 252); }
.dark .admin-dropdown-link:hover { background: rgb(30 41 59); }
.admin-dropdown-link-danger { color: rgb(190 18 60); }

.tab-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.75rem;
    background: rgb(241 245 249);
}
.dark .tab-switch { background: rgb(30 41 59); }

.tab-switch-item {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgb(100 116 139);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.tab-switch-item:hover { color: rgb(30 41 59); }
.dark .tab-switch-item:hover { color: rgb(226 232 240); }
.tab-switch-item.active {
    background: rgb(var(--forest));
    color: rgb(var(--cream-text));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.step-dot {
    width: 44px; height: 44px;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    color: rgb(var(--cream-text) / 0.5);
    position: relative; z-index: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.step-dot-check { display: none; }
.step-dot.active {
    background: rgb(var(--gold));
    border-color: rgb(var(--gold));
    color: rgb(var(--forest-dark));
    transform: scale(1.05);
}
.step-dot.done {
    background: rgb(var(--forest-mid));
    border-color: rgb(var(--forest-mid));
    color: rgb(var(--cream));
}
.step-dot.done .step-dot-num { display: none; }
.step-dot.done .step-dot-check { display: block; }

/* ---- Subject selection tags (Step 1, A-Level combination) ---- */
.subject-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: .2rem;
    border: 1.5px solid rgb(var(--border-soft));
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--ink));
    background: white;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.subject-tag:hover {
    border-color: rgb(var(--forest-mid));
    color: rgb(var(--forest-mid));
}
.subject-tag:active { transform: scale(0.97); }
.subject-tag.selected {
    background: rgb(var(--forest));
    border-color: rgb(var(--forest));
    color: rgb(var(--cream-text));
}
.subject-tag.selected::before {
    content: '✓';
    margin-right: 0.375rem;
    font-weight: 700;
}

/* ---- Academic results table (G7 / O-Level) ---- */
.results-table {
    width: 100%;
    font-size: 0.8125rem;
    border: 1px solid rgb(var(--border-soft));
    border-radius: 0.5rem;
    overflow: hidden;
    border-collapse: collapse;
}
.results-table thead tr {
    background: rgb(var(--forest) / 0.06);
}
.results-table thead th {
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgb(var(--forest-mid));
    border-bottom: 1px solid rgb(var(--border-soft));
}
.results-table tbody tr {
    border-bottom: 1px solid rgb(var(--border-soft));
}
.results-table tbody tr:last-child { border-bottom: none; }
.results-table tbody tr:hover { background: rgb(var(--forest) / 0.03); }
.results-table tbody td {
    padding: 0.625rem 0.875rem;
    color: rgb(var(--ink));
    vertical-align: middle;
}
.results-table .remove-row {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgb(var(--danger));
    background: none;
    border: none;
    cursor: pointer;
.results-table .remove-row:hover { text-decoration: underline; }

.dark .results-table { border-color: rgba(255, 255, 255, 0.1); }
.dark .results-table thead tr { background: rgba(255, 255, 255, 0.05); }
.dark .results-table thead th {
    color: rgb(var(--gold-light));
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.dark .results-table tbody tr { border-bottom-color: rgba(255, 255, 255, 0.1); }
.dark .results-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.dark .results-table tbody td { color: white; }


.btn-draft-save {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-draft-save:hover {
    background: rgb(var(--forest) / 0.06);
    border-color: rgb(var(--forest-mid));
    color: rgb(var(--forest));
}
.btn-draft-save:focus-visible {
    outline: 2px solid rgb(var(--gold-dark));
    outline-offset: 2px;
}

/* ---- Flatpickr Dark Mode Overrides ---- */
.dark .flatpickr-calendar {
    background: #07130e;
    box-shadow: 1px 0 0 rgb(var(--border-soft)), -1px 0 0 rgb(var(--border-soft)), 0 1px 0 rgb(var(--border-soft)), 0 -1px 0 rgb(var(--border-soft)), 0 3px 13px rgba(0,0,0,0.4);
    border-color: #1a3a2a;
}
.dark .flatpickr-calendar.arrowTop:before { border-bottom-color: #1a3a2a; }
.dark .flatpickr-calendar.arrowTop:after { border-bottom-color: #07130e; }
.dark .flatpickr-calendar.arrowBottom:before { border-top-color: #1a3a2a; }
.dark .flatpickr-calendar.arrowBottom:after { border-top-color: #07130e; }

.dark .flatpickr-months .flatpickr-month,
.dark .flatpickr-months .flatpickr-prev-month,
.dark .flatpickr-months .flatpickr-next-month {
    color: rgb(var(--cream-text));
    fill: rgb(var(--cream-text));
}
.dark .flatpickr-months .flatpickr-prev-month:hover svg,
.dark .flatpickr-months .flatpickr-next-month:hover svg {
    fill: rgb(var(--gold));
}

.dark span.flatpickr-weekday {
    color: rgb(var(--gold-light));
}

.dark .flatpickr-day {
    color: rgb(var(--cream-text));
}
.dark .flatpickr-day.inRange,
.dark .flatpickr-day.prevMonthDay.inRange,
.dark .flatpickr-day.nextMonthDay.inRange,
.dark .flatpickr-day.today.inRange,
.dark .flatpickr-day.prevMonthDay.today.inRange,
.dark .flatpickr-day.nextMonthDay.today.inRange,
.dark .flatpickr-day:hover,
.dark .flatpickr-day.prevMonthDay:hover,
.dark .flatpickr-day.nextMonthDay:hover,
.dark .flatpickr-day:focus,
.dark .flatpickr-day.prevMonthDay:focus,
.dark .flatpickr-day.nextMonthDay:focus {
    background: #152e20;
    border-color: #152e20;
}
.dark .flatpickr-day.today {
    border-color: rgb(var(--gold-light));
}
.dark .flatpickr-day.today:hover,
.dark .flatpickr-day.today:focus {
    border-color: rgb(var(--gold));
    background: #152e20;
    color: white;
}
.dark .flatpickr-day.selected,
.dark .flatpickr-day.startRange,
.dark .flatpickr-day.endRange,
.dark .flatpickr-day.selected.inRange,
.dark .flatpickr-day.startRange.inRange,
.dark .flatpickr-day.endRange.inRange,
.dark .flatpickr-day.selected:focus,
.dark .flatpickr-day.startRange:focus,
.dark .flatpickr-day.endRange:focus,
.dark .flatpickr-day.selected:hover,
.dark .flatpickr-day.startRange:hover,
.dark .flatpickr-day.endRange:hover,
.dark .flatpickr-day.selected.prevMonthDay,
.dark .flatpickr-day.startRange.prevMonthDay,
.dark .flatpickr-day.endRange.prevMonthDay,
.dark .flatpickr-day.selected.nextMonthDay,
.dark .flatpickr-day.startRange.nextMonthDay,
.dark .flatpickr-day.endRange.nextMonthDay {
    background: rgb(var(--gold));
    border-color: rgb(var(--gold));
    color: #07130e;
}
.dark .flatpickr-day.flatpickr-disabled,
.dark .flatpickr-day.flatpickr-disabled:hover {
    color: rgba(255,255,255,0.1);
}
.dark .flatpickr-day.prevMonthDay,
.dark .flatpickr-day.nextMonthDay {
    color: rgba(255,255,255,0.3);
}
.dark .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: rgba(255,255,255,0.7); }
.dark .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: rgba(255,255,255,0.7); }