/* ===================================
   Dashboard Styles - Exact Match
   =================================== */

/* Suppress ALL transitions during theme switch to prevent color flash.
   body.theme-switching covers body itself (since * only selects descendants). */
body.theme-switching,
.theme-switching * {
    transition: none !important;
}

/* backdrop-filter blur causes GPU compositing lag that looks like animation —
   disable it during theme switch so colors change instantly */
.theme-switching .dashboard-sidebar,
.theme-switching .dashboard-topbar,
.theme-switching .floating-toggle {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* CSS Variables — Light mode (default) */
:root {
    --background: 0 0% 98%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --yellow-500: 45 93% 47%;
    --green-500: 142 71% 45%;
    --blue-500: 217 91% 60%;
    --red-500: 0 84% 60%;
    --emerald-600: 160 84% 39%;

    /* The sidebar count badge.

       #e11d48 is the product's own red, not a new one: it is `--primary` in
       style.css, the colour of the `.text-gradient` wordmark and of every
       brand accent on the public site. It cannot be read here as
       `var(--primary)` — framework.css and this file both redefine --primary
       on :root to the dashboard's near-black, so on a dashboard page
       `var(--primary)` is not red at all. Nor is it `--destructive`
       (0 84.2% 60.2% = #ef4444), which is stock Tailwind red-500 and is the
       colour of *deleting something*; a count of essays waiting is not a
       destructive action and should not borrow its colour.

       Deliberately not redefined for dark mode below. The number is white on
       #e11d48 in both themes at 4.70:1 — AA for the 11px bold it is set in —
       and the circle itself clears 3:1 against the light sidebar (#ffffff,
       4.70:1) and the dark one (hsl(180 3% 13%), 3.48:1). One value is
       correct in both themes, and a second would only be a second thing to
       keep in step. */
    --nav-badge: #e11d48;
    --nav-badge-foreground: #ffffff;
}

/* CSS Variables — Dark mode */
:root.dark {
    /* Background colors - EXACT IELTSX VALUES */
    --background: 180 1% 10%;
    /* Main inner bg - very dark with subtle cyan tint */
    --foreground: 60 6% 91%;
    /* Light warm foreground */

    /* Card colors - EXACT IELTSX VALUES */
    --card: 180 3% 13%;
    /* Sidebar and card bg - dark with cyan tint */
    --card-foreground: 60 6% 91%;

    /* Muted colors */
    --muted: 180 3% 13%;
    --muted-foreground: 0 0% 63.9%;

    /* Border and input */
    --border: 180 3% 20%;
    /* EXACT IELTSX border color */
    --input: 180 3% 20%;

    /* Primary */
    --primary: 60 6% 91%;
    --primary-foreground: 180 1% 10%;

    /* Secondary */
    --secondary: 180 3% 18%;
    /* Slightly lighter than card */
    --secondary-foreground: 60 6% 91%;

    /* Accent */
    --accent: 180 3% 18%;
    --accent-foreground: 60 6% 91%;

    /* Specific icon colors - EXACT VALUES */
    --yellow-500: 45 93% 47%;
    /* #eab308 */
    --green-500: 142 71% 45%;
    /* #10b981 */
    --blue-500: 217 91% 60%;
    /* #3b82f6 */
    --red-500: 0 84% 60%;
    /* #ef4444 */
    --emerald-600: 160 84% 39%;
    /* #059669 */
}

.dashboard-body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    /* Backstop, not a fix: one overflowing control anywhere on a dashboard
       page used to widen the whole document and let it pan sideways. Every
       known offender is fixed at the source above; this just keeps the next
       one from taking the whole page down with it. */
    overflow-x: hidden;
}

/* ===================================
   Layout Structure
   =================================== */
.dashboard-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* ===================================
   Sidebar
   =================================== */
/* Every confirm/onboarding modal in the dashboard is `fixed inset-0 z-50` —
   a Tailwind utility that only reaches z-index:50. The sidebar sits at 100
   and the collapsed-sidebar floating toggle at 110 (both below), so their
   backdrop dimmed the page content but the sidebar rendered on top of it
   uncovered, looking like it was deliberately left out. `[role="dialog"]`
   beats a single class selector on specificity alone, so this reaches every
   modal built on that pattern without editing each template. */
[role="dialog"][aria-modal="true"] {
    z-index: 150;
}

.dashboard-sidebar {
    position: fixed;
    left: 1rem;
    top: 1rem;
    bottom: 1rem;
    width: 16rem;
    /* 256px */
    background-color: hsl(var(--card) / 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow: hidden;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px -5px hsl(0 0% 0% / 0.5);
}

/* Sidebar collapsed state for floating layout */
.sidebar-collapsed .dashboard-sidebar {
    left: -18rem;
}

.sidebar-collapsed .dashboard-main {
    margin-left: 0;
}

.sidebar-collapsed .dashboard-topbar {
    left: 0;
}

.sidebar-header {
    height: 4rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
    flex-shrink: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    text-decoration: none;
    color: hsl(var(--foreground)) !important;
    /* Force color to prevent inheritance */
    height: 3rem;
    /* h-12 */
    cursor: pointer;
    background: transparent !important;
    /* Prevent any hover background */
    transition: none !important;
    /* Disable any inherited transitions */
    box-shadow: none !important;
}

.sidebar-logo *,
.sidebar-logo:hover,
.sidebar-logo:active,
.sidebar-logo:focus {
    background: transparent !important;
    color: hsl(var(--foreground)) !important;
    outline: none !important;
    box-shadow: none !important;
    /* pointer-events: none; REMOVED to allow clicking */
}
/* Feather icon always stays brand red regardless of theme */
.sidebar-logo i.fas {
    color: #e11d48 !important;
}

.logo-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.6rem;
    padding: 0.15rem;
}

.logo-icon-box svg {
    width: 1.5rem;
    height: 1.5rem;
}

.logo-icon-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
    margin-left: 0.25rem;
}

.logo-text span:first-child {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.logo-text .text-muted {
    color: hsl(var(--muted-foreground));
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
}

/* Custom Scrollbar for Sidebar */
.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background-color: hsl(var(--border) / 0.5);
    border-radius: 20px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--border));
}

.nav-section {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.nav-section.mt-auto {
    margin-top: auto;
}

.nav-label {
    display: flex;
    height: 2rem;
    align-items: center;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground) / 0.7);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s;
    height: 2.25rem;
}

.nav-item:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.nav-item.active,
.nav-item[aria-current="page"] {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    font-weight: 600;
}

.nav-item svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    opacity: 0.85;
}

.nav-item:hover svg,
.nav-item.active svg { opacity: 1; }

/* Prevent any red hover from global style.css */
.dashboard-layout a:hover {
    color: inherit;
}

/* Compact Card for Daily Practice */
.practice-card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border) / 0.5);
    background-color: hsl(var(--card));
    transition: all 0.2s ease;
    height: 100%;
}

.practice-card:hover {
    border-color: hsl(var(--primary) / 0.5);
    background-color: hsl(var(--accent));
    transform: translateY(-2px);
}

.nav-item svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.nav-item span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A count on a nav item: how much is waiting behind the link.

   `min-width` equals `height`, so a single digit is a true circle and only a
   longer number stretches into a pill. Forcing 3 digits into a 20px circle
   would shrink the type below reading size, and the number is the whole
   point of the badge.

   It is the one child of `.nav-item` that must not take the label's
   `flex: 1` — hence a selector specific enough to beat `.nav-item span`
   above, and `flex: none` to say so rather than relying on order. */
.nav-item .nav-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background-color: var(--nav-badge);
    /* Explicit, because `.nav-item:hover` and `.active` both reassign `color`
       on the anchor and an inherited badge would go grey underneath them. */
    color: var(--nav-badge-foreground);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    overflow: visible;
    /* Same width for every digit, so the circle does not twitch between
       renders as the count changes. */
    font-variant-numeric: tabular-nums;
}

/* ===================================
   Main Content Area
   =================================== */
.dashboard-main {
    flex: 1;
    margin-left: 17rem;
    /* Sidebar width + gap */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: hsl(var(--background));
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   Top Bar
   =================================== */
.dashboard-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    /* High z-index to stay above all content */
    display: flex;
    height: 4rem;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
    background-color: hsl(var(--background) / 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0 2rem;
    margin-bottom: 0.5rem;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.5rem;
}

/* Sidebar Toggle Button - Integrated in Header */
.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    color: hsl(var(--muted-foreground));
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.sidebar-collapsed .sidebar-toggle {
    display: none !important;
    /* Force hide to prevent overlap */
}

.sidebar-toggle:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.sidebar-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Floating Toggle when collapsed */
.floating-toggle {
    display: none;
    position: fixed;
    left: 1rem;
    z-index: 110;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    background-color: hsl(var(--card) / 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid hsl(var(--border) / 0.5);
    /* Was 0.75rem — visibly rounder than every other icon button in the
       topbar (.user-menu-btn, .sidebar-toggle both use 0.375rem–0.5rem),
       which read as "doesn't match" even though nothing else about it was
       wrong. Matches .sidebar-toggle's radius, the button it replaces on
       mobile. */
    border-radius: 0.5rem;
    color: hsl(var(--foreground));
    box-shadow: 0 4px 12px hsl(0 0% 0% / 0.2);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.sidebar-collapsed .floating-toggle {
    display: flex;
}

.floating-toggle:hover {
    transform: scale(1.05);
    background-color: hsl(var(--accent));
}

.separator-vertical {
    width: 1px;
    height: 1.25rem;
    background-color: hsl(var(--border) / 0.5);
    margin: 0 0.5rem;
}

.page-title {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--background));
    cursor: pointer;
    transition: background-color 0.2s;
}

.user-menu-btn:hover {
    background-color: hsl(var(--secondary));
}

.user-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
    font-weight: 600;
}

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

/* ===================================
   Content Wrapper
   =================================== */
.dashboard-content-wrapper {
    flex: 1;
    background-color: hsl(var(--background));
}

.container-fluid {
    max-width: 1280px;
    /* max-w-7xl */
    margin: 0 auto;
    padding: 2rem;
    /* p-6 */
    background-color: hsl(var(--background));
}

/* ===================================
   Copy button — one-time credentials banners
   (Add staff/student, org create) share templates/layouts/
   _credentials_banner.html; the click handler lives once in
   dashboard_base.html rather than once per page.
   =================================== */
.dash-copy-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 0.375rem;
    border: 1px solid hsl(var(--border)); background: transparent;
    color: hsl(var(--muted-foreground)); cursor: pointer;
}
.dash-copy-btn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.dash-copy-btn--done { color: rgb(74,222,128); border-color: rgba(34,197,94,.4); }

/* ===================================
   Banner Section
   =================================== */
.dashboard-banner-section {
    margin-bottom: 2.5rem;
    /* mb-10 in IELTSX */
}

.banner-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    /* rounded-2xl */
    border: 1px solid hsl(var(--border));
    background: linear-gradient(to bottom right, hsl(var(--primary) / 0.1), hsl(var(--background)), hsl(45 100% 50% / 0.05));
    padding: 1.5rem 2rem;
    /* p-6 md:p-8 */
    box-shadow: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
}

@media (min-width: 768px) {
    .banner-card {
        padding: 2rem;
    }
}

.banner-bg-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.effect-blob-1 {
    position: absolute;
    right: -2rem;
    top: -2rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: hsl(var(--primary) / 0.15);
    filter: blur(2rem);
}

.effect-blob-2 {
    position: absolute;
    left: -2rem;
    bottom: -2rem;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: hsl(45 100% 50% / 0.2);
    filter: blur(2rem);
}

.banner-content-flex {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .banner-content-flex {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.banner-text-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: hsl(var(--primary) / 0.1);
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--primary));
    width: fit-content;
}

.banner-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    line-height: 1.3;
    letter-spacing: -0.025em;
}

@media (min-width: 768px) {
    .banner-heading {
        font-size: 1.875rem;
    }
}

.banner-action {
    flex-shrink: 0;
}

.btn-unlock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 2.2rem;
    min-width: 10rem;
}

.btn-unlock:hover {
    background: #f59e0b;
    color: #000 !important;
    border-color: #f59e0b;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
}

.btn-unlock svg {
    width: 0.85rem;
    height: 0.85rem;
}

.btn-unlock.w-full {
    width: 100%;
}

.btn-unlock.mt-4 {
    margin-top: 1rem;
}

/* ===================================
   Section
   =================================== */
.dashboard-section {
    padding: 0;
    margin-bottom: 2rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.dashboard-banner-section {
    padding: 0;
    /* Override global section padding */
    margin-bottom: 2rem;
    /* Spacing to next section */
}

.section-title {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    color: hsl(var(--foreground));
    margin-bottom: 2rem;
    /* mb-8 in IELTSX */
    background: transparent !important;
}

/* ===================================
   Grid Layouts
   =================================== */
.grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    /* gap-6 in IELTSX */
}

@media (min-width: 768px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===================================
   Card
   =================================== */
.card {
    border-radius: 1rem;
    border: 1px solid hsl(var(--border) / 0.6);
    background: linear-gradient(145deg, hsl(var(--card)), hsl(var(--background)));
    color: hsl(var(--card-foreground));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card.hover-effect:hover {
    box-shadow: 0 12px 24px -5px rgba(0, 0, 0, 0.1);
    border-color: hsl(var(--border));
}

.card.border-2 {
    border-width: 2px;
}

.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
}

.card-title {
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    display: flex;
    align-items: center;
}

.card-title.text-lg {
    font-size: 1.125rem;
    font-weight: 600;
}

.card-body-compact {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.card-text-muted {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.card-text-muted.mb-4 {
    margin-bottom: 1rem;
}

.card-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

/* ===================================
   Badges
   =================================== */
.badge-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background-color: transparent;
    color: hsl(var(--muted-foreground));
    border: 1px dashed hsl(var(--border));
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-secondary svg {
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0.7;
}

.flex-wrap-gap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ===================================
   Tab Switcher
   =================================== */
.tab-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    /* Buttons never wrap (.tab-btn is white-space:nowrap) and this container
       has no width cap of its own, so on a narrow screen it was overflowing
       past the viewport edge and getting hard-clipped by an ancestor rather
       than wrapping — "Pending deletion" simply vanished mid-word. Scrolling
       sideways inside the control keeps every tab reachable instead. */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.tab-switcher::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.tab-btn:hover {
    color: hsl(var(--foreground));
    background: hsl(var(--accent) / 0.5);
}

.tab-btn.active {
    color: hsl(var(--foreground));
    background: hsl(var(--background));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

/* Pack Detail Search Input */
.pack-search-input {
    width: 100%;
    height: 2.75rem;
    padding-left: 3rem;
    padding-right: 1rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    color: hsl(var(--foreground));
    transition: all 0.2s ease;
}

.pack-search-input::placeholder {
    color: hsl(var(--muted-foreground));
}

.pack-search-input:focus {
    outline: none;
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

/* No `.tab-count`.
   -----------------
   Counts live on each list's heading, which captions the table the
   reader is actually looking at. The tabs name the buckets. Carrying
   the figure in both places put it on screen twice, and the tab is the
   worse of the two homes: it turned part of a label into something that
   looked clickable. */

/* The row a list page puts its controls in: tabs on the left, search and
   actions pushed to the right by `.filter-bar-end`. Wraps on narrow
   screens instead of scrolling. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.filter-bar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* Search field. The wrapper positions the magnifier; the input reserves
   room for it. `flex: 1` lets it take the slack when it is the only thing
   on the right of the bar, but it never collapses below readable width. */
.filter-search {
    position: relative;
    flex: 1 1 16rem;
    min-width: 13rem;
}

.filter-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: hsl(var(--muted-foreground));
    pointer-events: none;
}

.filter-search .form-control {
    padding-left: 2.5rem;
}

/* Search inputs get a clear affordance but never the UA's own cancel
   button, which draws itself in the wrong colour in dark mode. */
.form-control[type="search"]::-webkit-search-decoration,
.form-control[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* ===================================
   .form-control — native controls that obey the theme
   -----------------------------------
   `<input type="date">`, `<input type="time">` and `<select>` paint
   themselves with the UA's own colours, which is why they came out
   black-on-black in dark mode. `color-scheme` is the half that matters:
   it inverts the calendar/clock picker icon and the select's popup list
   too, which no amount of `background`/`color` can reach. The class
   declares support for both schemes, then the theme classes pin it —
   the site's toggle sets `.dark` / `data-theme` by hand and does not
   touch the OS preference, so `light dark` alone would leave a
   hand-darkened page with a white date picker.
   =================================== */
.form-control,
select,
input[type="date"],
input[type="time"] {
    color-scheme: light dark;
}

.form-control {
    display: block;
    width: 100%;
    min-height: 2.625rem;
    padding: 0.55rem 0.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
    color: hsl(var(--foreground));
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Every native `<select>`/date/time picker gets the same fix as
   `.form-control`, not just the ones wearing that class — a plain
   Tailwind-styled `<select>` (e.g. the CRM filter bars) paints its popup
   list from the OS exactly the same way and was missed the first time
   this was fixed. */
:root.dark .form-control,
:root.dark select,
:root.dark input[type="date"],
:root.dark input[type="time"],
[data-theme="dark"] .form-control,
[data-theme="dark"] select,
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"] {
    color-scheme: dark;
}

:root:not(.dark) .form-control,
:root:not(.dark) select,
:root:not(.dark) input[type="date"],
:root:not(.dark) input[type="time"],
[data-theme="light"] .form-control,
[data-theme="light"] select,
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"] {
    color-scheme: light;
}

.form-control::placeholder {
    color: hsl(var(--muted-foreground));
}

.form-control:focus {
    outline: none;
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

.form-control:disabled,
.form-control[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* The native select keeps its own arrow on purpose: with `color-scheme`
   set the UA draws it in the right colour, and an `appearance: none`
   replacement would need a hard-coded chevron that cannot follow the
   palette. `option` is styled explicitly because Windows renders the
   popup list from the OS, not the page. */
select.form-control {
    padding-right: 0.5rem;
    cursor: pointer;
}

select.form-control option,
select option {
    color: hsl(var(--foreground));
    background-color: hsl(var(--card));
}

textarea.form-control {
    min-height: 6rem;
    resize: vertical;
}

/* Auto-width variant for a control that sits next to others in a filter
   bar rather than filling a form column. `inline-block` rather than a flex
   display because these are replaced elements — a `<select>` laid out as a
   flex container is undefined territory in some engines. */
.form-control-inline {
    display: inline-block;
    width: auto;
}

/* ===================================
   Mock Exams Page Styles
   =================================== */
.mock-full-layout {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 5rem;
}

.bento-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 1024px) {
    .bento-features-grid {
        grid-template-columns: 1fr;
    }
}

.bento-feature-item {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.75rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

html:not(.dark) .bento-feature-item {
    background: #fff;
    border-color: #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.bento-feature-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
}

.bento-icon-container {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--icon-bg), 0.1);
    border: 1px solid rgba(var(--icon-bg), 0.15);
    color: rgb(var(--icon-bg));
}

.bento-feature-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}

html:not(.dark) .bento-feature-title {
    color: #111827;
}

.bento-feature-desc {
    font-size: 0.85rem;
    font-weight: 500;
    color: #777;
    line-height: 1.6;
}

.bento-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.35rem 0.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 2rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
}

.roster-section-header {
    margin-bottom: 1.5rem;
    padding-left: 0.5rem;
}

.exam-roster {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.75rem;
    overflow: hidden;
}

html:not(.dark) .exam-roster {
    background: #fff;
    border-color: #e5e7eb;
}

.roster-header {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    padding: 1.5rem 2.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #555;
}

html:not(.dark) .roster-header {
    background: #f9fafb;
    border-color: #e5e7eb;
}

.roster-item {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: center;
    padding: 2rem 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
}

html:not(.dark) .roster-item {
    border-color: #f3f4f6;
}

.roster-item:last-child {
    border-bottom: none;
}

.roster-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

html:not(.dark) .roster-item:hover {
    background: #f9fafb;
}

.badge-plan-pill {
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-pro  { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2); }
.badge-max  { background: rgba(168, 85, 247, 0.1); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.2); }
.badge-free { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }

.bubble-set {
    display: flex;
    gap: 0.75rem;
}

.module-bubble {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #555;
}

.module-bubble.active.l { background: rgba(245, 158, 11, 0.08); color: #f59e0b; border-color: rgba(245, 158, 11, 0.15); }
.module-bubble.active.r { background: rgba(16, 185, 129, 0.08); color: #10b981; border-color: rgba(16, 185, 129, 0.15); }
.module-bubble.active.w { background: rgba(59, 130, 246, 0.08); color: #3b82f6; border-color: rgba(59, 130, 246, 0.15); }

.btn-mock-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 42px;
    box-sizing: border-box;
    padding: 0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    line-height: 1;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.btn-row-outline.btn-mock-action {
    border-color: #333;
    color: #999;
    background: transparent;
}

html:not(.dark) .btn-row-outline.btn-mock-action {
    border-color: #d1d5db;
    color: #4b5563;
}

/* ===================================
   Buttons
   =================================== */
.btn-view {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
    transition: box-shadow 0.2s;
    height: 2rem;
    position: relative;
}

/* Section Row Action Buttons - Pixel-Perfect Sizing */
.btn-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    
    /* Fixed dimensions for consistency */
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    
    box-sizing: border-box;
    padding: 0;
    
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    text-decoration: none;
    line-height: 1;
    
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    cursor: pointer;
}

a.btn-row-primary,
.btn-row-primary {
    background: #ffffff;
    color: #111827;
    border-color: transparent;
}

html:not(.dark) a.btn-row-primary,
html:not(.dark) .btn-row-primary {
    background: #111827;
    color: #ffffff;
    border-color: transparent;
}

a.btn-row-primary:hover,
.btn-row-primary:hover {
    background: #e5e7eb !important;
    color: #111827 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark) a.btn-row-primary:hover,
html:not(.dark) .btn-row-primary:hover {
    background: #1f2937 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

a.btn-row-outline,
.btn-row-outline {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

html:not(.dark) a.btn-row-outline,
html:not(.dark) .btn-row-outline {
    color: #111827;
    border-color: #e5e7eb;
}

a.btn-row-outline:hover,
.btn-row-outline:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3);
}

html:not(.dark) a.btn-row-outline:hover,
html:not(.dark) .btn-row-outline:hover {
    background: #f9fafb !important;
    color: #111827 !important;
    border-color: #d1d5db;
}

/* Section Row Item Styles: see the authoritative definition further down
   this file ("Professional Row-Based Section Design") — this file used to
   carry two full copies of every .section-row-* rule from two separate
   redesign passes. Same-specificity, later-wins cascade meant this copy was
   dead for every property the other copy also set — including the mobile
   fix below, which set `.section-row-actions` to `width:100%` here but lost
   to that copy's unconditional `width:14rem` (set for desktop, but with no
   competing mobile rule to lose to on a phone). The real mobile layout now
   lives next to the copy that actually renders. */

/* ===================================
   Mock Exams - Compact Unique Design
   =================================== */
.mock-compact-header {
    margin-bottom: 1.5rem;
}

.mock-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.mock-page-desc {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* Compact Feature Cards */
.mock-features-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.feature-compact {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.feature-compact:hover {
    border-color: hsl(var(--border));
    box-shadow: 0 2px 8px hsl(0 0% 0% / 0.04);
}

.feature-compact-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon-orange {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.feature-icon-green {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.feature-icon-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.feature-compact-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 0.25rem;
}

.feature-compact-desc {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.4;
}

/* Filter Bar */
.mock-filter-bar {
    margin-bottom: 1rem;
}

.mock-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mock-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 0.875rem;
    transition: all 0.2s ease;
}

.mock-item:hover {
    border-color: hsl(var(--border));
    box-shadow: 0 2px 8px hsl(0 0% 0% / 0.04);
}

.mock-item-left {
    flex: 1;
    min-width: 0;
}

.mock-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.mock-item-title {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    letter-spacing: -0.01em;
}

.badge-plan-compact {
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.badge-plan-compact.pro {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.badge-plan-compact.max {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.badge-plan-compact.free {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.mock-item-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

.info-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.sections-labels {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.25rem;
}

.sec-label {
    padding: 0.15rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.sec-listening {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.sec-reading {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.sec-writing {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* Per-skill bands on a finished mock card.

   One card carries all four skills plus the 4-skill Overall — there is no
   separate speaking card, because the speaking session was booked against
   this mock. The pending pill replaces the whole row while a centre's
   teacher is still marking; it is deliberately wordy and deliberately
   numberless. */
.mock-item-bands {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.mock-band {
    padding: 0.2rem 0.55rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--muted) / 0.4);
    white-space: nowrap;
}

.mock-band b {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin-left: 0.15rem;
}

.mock-band-l { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.mock-band-r { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.mock-band-w { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.mock-band-s { background: rgba(168, 85, 247, 0.1); color: #a855f7; }

.mock-band-overall {
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
}

.mock-band-pending {
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
    font-weight: 500;
}

.mock-item-right {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    border-radius: 0.5rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

a.btn-compact-primary,
.btn-compact-primary {
    background: #ffffff;
    color: #111827;
    border: 1px solid transparent;
}

html:not(.dark) a.btn-compact-primary,
html:not(.dark) .btn-compact-primary {
    background: #111827;
    color: #ffffff;
    border-color: transparent;
}

a.btn-compact-primary:hover,
.btn-compact-primary:hover {
    background: #e5e7eb !important;
    color: #111827 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark) a.btn-compact-primary:hover,
html:not(.dark) .btn-compact-primary:hover {
    background: #1f2937 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

a.btn-compact-outline,
.btn-compact-outline {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

html:not(.dark) a.btn-compact-outline,
html:not(.dark) .btn-compact-outline {
    color: #111827;
    border-color: #e5e7eb;
}

a.btn-compact-outline:hover,
.btn-compact-outline:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3);
}

html:not(.dark) a.btn-compact-outline:hover,
html:not(.dark) .btn-compact-outline:hover {
    background: #f9fafb !important;
    color: #111827 !important;
    border-color: #d1d5db;
}

/* Mobile responsive for mock exams */
@media (max-width: 767px) {
    .mock-features-compact {
        grid-template-columns: 1fr;
    }
    
    .mock-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }
    
    .mock-item-right {
        width: 100%;
    }
    
    .mock-item-right .flex {
        width: 100%;
    }
    
    .btn-compact {
        flex: 1;
        justify-content: center;
    }
    
    .sections-labels {
        flex-wrap: wrap;
    }
}

.nav-item-pro-cap {
    margin-left: auto;
    color: hsl(var(--muted-foreground));
    opacity: 0.7;
}

.nav-item:hover .nav-item-pro-cap {
    opacity: 1;
    color: hsl(var(--foreground));
}

a.btn-view:hover,
.btn-view:hover {
    background-color: hsl(var(--accent)) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-view svg {
    width: 1rem;
    height: 1rem;
}

/* ===================================
   Icon Colors
   =================================== */
.text-yellow {
    color: hsl(var(--yellow-500));
}

.text-green {
    color: hsl(var(--green-500));
}

.text-blue {
    color: hsl(var(--blue-500));
}

.text-red {
    color: hsl(var(--red-500));
}

.text-emerald {
    color: hsl(var(--emerald-600));
}

/* ===================================
   Mobile Responsive — Dashboard
   =================================== */
@media (max-width: 767px) {
    /* Reduce content padding */
    .container-fluid {
        padding: 1rem;
    }

    /* Topbar padding */
    .dashboard-topbar {
        padding: 0 1rem;
    }

    /* Floating toggle — centered against the topbar's own height (4rem),
       not eyeballed. This button is `position: fixed`, so unlike the sun
       icon and avatar it doesn't get .dashboard-topbar's own
       align-items: center for free — it was 2.4px low. (4rem topbar -
       2.5rem button) / 2 = 0.75rem. */
    .floating-toggle {
        top: 0.75rem;
    }

    /* Push breadcrumbs right so they don't overlap the hamburger */
    .topbar-left {
        padding-left: 3rem;
    }

    /* Each page hand-rolls its own trail (Dashboard > Section > Page), and
       on a narrow topbar a 3-level trail wraps into a cramped two-column
       mess instead of a line. Keep only the last crumb — the current page,
       always the last child by how every template builds this — and drop
       the rest; the sidebar and back button already cover the navigation
       those links offered. */
    .header-breadcrumbs > div > *:not(:last-child) {
        display: none;
    }

    /* Branch switcher: icon-only on narrow screens so it never pushes the
       page title off-screen next to the hamburger */
    #branchSwitcherBtn span {
        display: none;
    }

    #branchSwitcherBtn {
        max-width: none !important;
        padding: 0.4rem !important;
    }

    /* Section title */
    .section-title {
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
    }

    /* Dashboard section spacing */
    .dashboard-section {
        margin-bottom: 1.5rem;
    }

    /* Banner heading */
    .banner-heading {
        font-size: 1.25rem;
    }

    /* Card footer: stack on very small screens */
    .card-footer-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Mock exam card start button: don't overflow */
    .card-footer-row .btn-view {
        flex-shrink: 0;
    }

    /* Sidebar overlay */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .dashboard-layout.sidebar-open .sidebar-overlay {
        display: block;
    }

    /* Sidebar: overlay mode on mobile — use sidebar-open class.
       The desktop sidebar is a floating card (inset 1rem on every side,
       rounded corners) by design; reusing that on mobile is what made an
       opened drawer read as "floating in the wrong place" instead of as a
       menu — it sat 1rem off the left edge AND 1rem down from the top, with
       rounded corners on all four sides suggesting a card rather than a
       drawer. Flush to three edges (left/top/bottom) is what makes it read
       as a drawer; the right edge keeps a little rounding as the only
       remaining "floating card" cue, deliberately. */
    .dashboard-sidebar {
        left: 0;
        top: 0;
        bottom: 0;
        border-radius: 0 1.25rem 1.25rem 0;
        transform: translateX(-100%);
        z-index: 100;
    }

    .dashboard-layout.sidebar-open .dashboard-sidebar {
        transform: translateX(0);
    }

    /* The regular sidebar-collapsed JS still works on desktop; on mobile use sidebar-open */
    .dashboard-layout.sidebar-collapsed .dashboard-sidebar {
        transform: translateX(-100%);
    }

    .dashboard-main {
        margin-left: 0;
        width: 100%;
    }

    /* Show floating toggle always on mobile (acts as hamburger) */
    .floating-toggle {
        display: flex !important;
        left: 1rem;
    }

    /* Hide the inline topbar toggle on mobile (replaced by floating hamburger) */
    .sidebar-toggle {
        display: none !important;
    }

    .separator-vertical {
        display: none;
    }
}

/* Utility Classes */
.mb-4 {
    margin-bottom: 1rem;
}

.mt-4 {
    margin-top: 1rem;
}

.w-full {
    width: 100%;
}
/* ===================================
   Page Header Icon Box
   =================================== */
.page-icon-box {
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: #1e1e1e;
    border: 1px solid #2d2d2d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html:not(.dark) .page-icon-box {
    background: hsl(210 40% 96.1%);
    border-color: hsl(210 20% 88%);
}

/* ===================================
   Tier Badges
   =================================== */
.badge-tier-3,
.badge-tier-2,
.badge-tier-1,
.badge-demo {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid;
}

/* Tier 3 — amber */
.badge-tier-3 {
    background: #3f2c20;
    color: #ea580c;
    border-color: rgba(234, 88, 12, 0.25);
}
html:not(.dark) .badge-tier-3 {
    background: #fff7ed;
    color: #b45309;
    border-color: rgb(253 230 138);
}

/* Tier 2 — purple (darker/gentler in dark mode) */
.badge-tier-2 {
    background: #1a0b38;
    color: #9333ea;
    border-color: rgba(147, 51, 234, 0.2);
}
html:not(.dark) .badge-tier-2 {
    background: #faf5ff;
    color: #7c3aed;
    border-color: rgb(233 213 255);
}

/* Tier 1 — blue */
.badge-plan-premium {
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
}

.badge-plan-free { background: #10b981; color: #fff; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); }
.badge-plan-pro  { background: #6366f1; color: #fff; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); }
.badge-plan-max  { background: #a855f7; color: #fff; box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2); }

/* ===================================
   Section Cards (sections list pages)
   =================================== */
.section-card {
    background: #121212;
    border: 1px solid #222;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-card:hover {
    border-color: #333;
    background: #181818;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.8);
}

.section-card-preview {
    padding: 1.5rem;
    background: #1a1a1a;
    position: relative;
    border-bottom: 1px solid #222;
}

/* "Section X" / "Passage X" / "Task X" top-right badge */
/* Professional Row-Based Section Design */
.section-row-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.85rem;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
    min-height: 3.75rem;
}

html:not(.dark) .section-row-item {
    background: #fff;
    border-color: #e5e7eb;
}

.section-row-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

html:not(.dark) .section-row-item:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.section-row-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-row-content {
    flex: 1;
    min-width: 0;
}

.section-row-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.15rem;
}

html:not(.dark) .section-row-title {
    color: #111827;
}

.section-row-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: #555;
    /* No wrap meant the row never broke onto a second line when it ran out
       of width — instead each multi-word chip ("Passage 3", "Authentic
       Material") shrank and wrapped its own text mid-phrase, while the
       last chip got shoved off to whatever space was left, reading as two
       disconnected columns instead of one flowing line. */
    flex-wrap: wrap;
    row-gap: 0.35rem;
}

.section-row-meta > span {
    white-space: nowrap;
}

html:not(.dark) .section-row-meta {
    color: #6b7280;
}

.section-row-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    width: 14rem; /* Fixed width to hold up to 2 buttons comfortably */
    justify-content: flex-end;
}

.badge-container-fixed {
    width: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.badge-plan-row {
    font-size: 0.55rem;
    font-weight: 900;
    min-width: 3.75rem;
    height: 1.35rem;
    border-radius: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

html:not(.dark) .badge-plan-row.free { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
html:not(.dark) .badge-plan-row.pro  { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
html:not(.dark) .badge-plan-row.max  { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }

.badge-plan-row.free { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }
.badge-plan-row.pro  { background: rgba(99, 102, 241, 0.1); color: #6366f1; border: 1px solid rgba(99, 102, 241, 0.2); }
.badge-plan-row.max  { background: rgba(168, 85, 247, 0.1); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.2); }

/* Section row cards on mobile: the icon and title/meta keep their desktop
   placement — top of the card, left-aligned — and only the actions area
   (Start / Review / Retake / Unlock) moves, from flush-right-of-a-row to
   flush-bottom-right-of-the-card. Stacking everything full-width, or
   centering the button, was the "awful" layout this replaces. */
@media (max-width: 767px) {
    .section-row-item {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .section-row-content {
        width: 100%;
        /* Room for the plan badge, now pinned top-right of the card
           instead of sitting inline next to a title that can wrap to two
           lines on a narrow screen. */
        padding-right: 3.75rem;
    }

    /* Top-right corner of the card — the icon's spot mirrored, rather than
       inline next to a title long enough to wrap. Sized up slightly and
       vertically centered against the 3rem icon (card padding + half the
       icon/badge height difference) rather than just sharing its top edge,
       which read as too small and too high once it stood on its own. */
    .section-row-item .badge-plan-row {
        position: absolute;
        top: 1.45rem;
        right: 1.25rem;
        font-size: 0.65rem;
        min-width: 4rem;
        height: 1.6rem;
    }

    .section-row-actions {
        width: auto;
        align-self: flex-end;
    }

    /* The vertical divider only makes sense separating meta text from the
       action button within one desktop row; stacked, it's a stray line
       sitting in front of the button. */
    .section-row-actions > div:first-child {
        display: none;
    }
}

/* Icon circle in section preview */
.section-icon-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Small tag pills (Real Exam, Practice) */
.tag-pill {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border: 1px solid hsl(var(--border));
}
.tag-pill:hover {
    border-color: #e11d48;
    color: #e11d48;
}

/* Tag pill more/less toggle button */
.tag-pill.tag-pill-more,
.tag-pill-more {
    cursor: pointer;
    color: hsl(var(--muted-foreground));
    transition: background 0.15s;
}
.tag-pill.tag-pill-more:hover,
.tag-pill-more:hover {
    background: hsl(180 3% 25%);
}
html:not(.dark) .tag-pill.tag-pill-more:hover,
html:not(.dark) .tag-pill-more:hover {
    background: hsl(var(--accent-foreground) / 0.12);
}
.alert-close {
    display: none;
}

/* Pagination */
.page-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    text-decoration: none;
    cursor: pointer;
}
.page-btn:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }

.page-btn-disabled {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    cursor: not-allowed;
}

/* Tier badges inside section card previews */
.section-badge-amber { background: #3f2c20; color: #eab308; border: 1px solid rgba(234,179,8,.2); border-radius: 0.25rem; }
html:not(.dark) .section-badge-amber { background: #fef9c3; color: #92400e; border-color: rgba(217,119,6,.3); }

.section-badge-green { background: #14532d; color: #22c55e; border: 1px solid rgba(34,197,94,.2); border-radius: 0.25rem; }
html:not(.dark) .section-badge-green { background: #dcfce7; color: #166534; border-color: rgba(22,163,74,.3); }

.section-badge-blue { background: #1e3a8a; color: #60a5fa; border: 1px solid rgba(96,165,250,.2); border-radius: 0.25rem; }
html:not(.dark) .section-badge-blue { background: #dbeafe; color: #1e40af; border-color: rgba(59,130,246,.3); }

.section-badge-red { background: #7f1d1d; color: #f87171; border: 1px solid rgba(248,113,113,.2); border-radius: 0.25rem; }
html:not(.dark) .section-badge-red { background: #fee2e2; color: #991b1b; border-color: rgba(239,68,68,.3); }

/* ===================================
   Test Cards (pack_detail page)
   =================================== */
.test-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px hsl(0 0% 0% / 0.07);
}

/* Question-type tag pills */
.q-type-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    transition: background 0.15s;
}
.q-type-tag.cursor-pointer:hover {
    background: hsl(180 3% 25%);
}

/* Tab switcher styles are defined earlier in the file (line ~803) */

/* Grid / List view toggle */
.view-toggle-wrap {
    display: flex;
    gap: 0.25rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    padding: 0.25rem;
    height: 2.5rem;
}
.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    height: 2rem;
    width: 2.5rem;
    padding: 0;
    border: none;
    cursor: pointer;
    background: transparent;
    color: hsl(var(--muted-foreground));
}
.view-btn:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.view-btn.active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 3px hsl(0 0% 0% / 0.2);
}
html:not(.dark) .view-btn.active {
    background: #111827;
    color: #ffffff;
}

/* Search input */
.pack-search-input {
    display: flex;
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid hsl(var(--border));
    background: transparent;
    padding: 0.25rem 0.75rem 0.25rem 2.25rem;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    height: 2.5rem;
}
.pack-search-input::placeholder { color: hsl(var(--muted-foreground)); }
.pack-search-input:focus { 
    outline: none; 
    border-color: hsl(var(--border)); 
    box-shadow: 0 0 0 1px hsl(var(--border)); 
}

/* Fix for search bar white flash and light mode */
#section-search {
    background-color: #1e1e1e !important;
    color: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

html:not(.dark) #section-search {
    background-color: #fff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

/* Pack header badges */
.pack-type-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    text-transform: capitalize;
}
.pack-name-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: #ffffff;
    color: #111827;
}
html:not(.dark) .pack-name-badge {
    background: #111827;
    color: #ffffff;
}

/* Start / action button — dark mode: white/black; light mode: #111827/white */
.btn-start {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    white-space: nowrap;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    height: 2rem;
    border-radius: 0.375rem;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.btn-start:hover { 
    background-color: hsl(var(--primary) / 0.9) !important; 
    color: hsl(var(--primary-foreground)) !important;
}
html:not(.dark) .btn-start { 
    background: #111827; 
    color: #ffffff; 
}
html:not(.dark) .btn-start:hover { 
    background-color: rgb(17 24 39 / 0.9) !important;
}
.btn-start-lg {
    height: 2.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Review button — theme-aware (replaces hardcoded dark bg-[#1e1e1e] classes) */
.review-btn {
    background: #1e1e1e;
    border: 1px solid #3d3d3d;
    color: #d1d5db;
}
.review-btn:hover {
    background: #2d2d2d;
    color: #ffffff;
}
html:not(.dark) .review-btn {
    background: #ffffff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
html:not(.dark) .review-btn:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

/* JS-created filter active badge */
.filter-active-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    padding: 0.125rem 0.5rem 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    gap: 0.25rem;
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
}
.filter-active-badge:hover { background: hsl(var(--accent)); }

/* ===================================
   Section tier badge colours (by tier level, not test type)
   =================================== */
/* Tier 1 — blue (matches badge-tier-1 in pack_detail) */
.section-badge-tier1 { background: #172554; color: #3b82f6; border: 1px solid rgba(59,130,246,.25); border-radius: 0.25rem; }
html:not(.dark) .section-badge-tier1 { background: #eff6ff; color: #1d4ed8; border-color: rgb(191 219 254); }

/* Tier 2 — purple (matches badge-tier-2 in pack_detail) */
.section-badge-tier2 { background: #1a0b38; color: #9333ea; border: 1px solid rgba(147,51,234,.2); border-radius: 0.25rem; }
html:not(.dark) .section-badge-tier2 { background: #faf5ff; color: #7c3aed; border-color: rgb(233 213 255); }

/* Tier 3 → existing .section-badge-amber  |  Demo → existing .section-badge-green */

/* ===================================
   Filter bar — light mode fixes
   (template uses hardcoded #1e1e1e/#2d2d2d dark colours)
   =================================== */
html:not(.dark) #section-search {
    background: hsl(var(--background));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}
html:not(.dark) .filter-popover > button {
    background: hsl(var(--background));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}
html:not(.dark) .filter-popover > button:hover {
    background: hsl(var(--accent));
}
html:not(.dark) .filter-popover > div {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}
html:not(.dark) .filter-popover label span {
    color: hsl(var(--muted-foreground));
}
html:not(.dark) .filter-popover label:hover span {
    color: hsl(var(--foreground)) !important;
}
html:not(.dark) #active-filters {
    border-color: hsl(var(--border));
}
/* Filter checkbox checked indicator: dark=white, light=#111827 */
.filter-popover .peer:checked ~ div {
    background: #ffffff;
    border-color: #ffffff;
}
html:not(.dark) .filter-popover .peer:checked ~ div {
    background: #111827;
    border-color: #111827;
}

/* ===================================
   Reusable page-card classes (used by mock/admin pages)
   Replace hardcoded dark Tailwind values with theme-aware CSS
   =================================== */
/* Outer card — replaces bg-[#1e1e1e] border border-[#2d2d2d] rounded-xl */
.page-card {
    background: #1e1e1e;
    border: 1px solid #2d2d2d;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px hsl(0 0% 0% / 0.3);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.page-card:hover { border-color: #3d3d3d; box-shadow: 0 2px 8px hsl(0 0% 0% / 0.35); }
html:not(.dark) .page-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
    box-shadow: 0 1px 3px hsl(0 0% 0% / 0.06);
}
html:not(.dark) .page-card:hover { border-color: hsl(var(--border)); box-shadow: 0 2px 8px hsl(0 0% 0% / 0.1); }
html:not(.dark) .page-card .text-white { color: hsl(var(--foreground)); }

/* Inner nested card — replaces bg-[#2d2d2d] border border-[#3d3d3d] rounded-xl */
.page-card-inner {
    background: #2d2d2d;
    border: 1px solid #3d3d3d;
    border-radius: 0.75rem;
    transition: border-color 0.15s, background 0.15s;
}
.page-card-inner:hover { border-color: #555; background: #333; }
html:not(.dark) .page-card-inner {
    background: hsl(var(--secondary));
    border-color: hsl(var(--border));
}
html:not(.dark) .page-card-inner:hover { background: hsl(var(--accent)); border-color: hsl(var(--border)); }
html:not(.dark) .page-card-inner .text-white { color: hsl(var(--foreground)); }

/* Icon circle — theme-aware (replaces bg-white/5 invisible in light mode) */
.icon-circle {
    width: 3rem; height: 3rem;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: hsl(0 0% 100% / 0.08);
    border: 1px solid hsl(0 0% 100% / 0.1);
    transition: background 0.15s;
}
.icon-circle-lg {
    width: 5rem; height: 5rem;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: hsl(0 0% 100% / 0.08);
    border: 1px solid hsl(0 0% 100% / 0.1);
}
html:not(.dark) .icon-circle,
html:not(.dark) .icon-circle-lg {
    background: hsl(var(--secondary));
    border-color: hsl(var(--border));
}
html:not(.dark) .icon-circle:hover { background: hsl(var(--accent)); }

/* Mock exam section badges (Listening/Reading/Writing tags) */
.mock-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid transparent;
}
.mock-section-tag-listening { background: hsl(217 91% 60% / 0.15); color: #60a5fa; border-color: hsl(217 91% 60% / 0.25); }
.mock-section-tag-reading   { background: hsl(142 76% 36% / 0.15); color: #4ade80; border-color: hsl(142 76% 36% / 0.25); }
.mock-section-tag-writing   { background: hsl(265 89% 78% / 0.15); color: #c084fc; border-color: hsl(265 89% 78% / 0.25); }
html:not(.dark) .mock-section-tag-listening { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
html:not(.dark) .mock-section-tag-reading   { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
html:not(.dark) .mock-section-tag-writing   { background: #f3e8ff; color: #7c3aed; border-color: #e9d5ff; }

/* Deep background (bg-[#151515]) — used in test factory bottom section */
.page-bg-deep {
    background: #151515;
    border-top: 1px solid #2d2d2d;
}
html:not(.dark) .page-bg-deep {
    background: hsl(var(--muted));
    border-color: hsl(var(--border));
}

/* Selects inside page cards */
html:not(.dark) .page-card select,
html:not(.dark) .page-card-inner select {
    background: hsl(var(--secondary));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}
html:not(.dark) .page-card select option,
html:not(.dark) .page-card-inner select option {
    background: hsl(var(--card));
    color: hsl(var(--foreground));
}

/* Upload drop zone inside page cards */
html:not(.dark) .page-card .upload-zone {
    background: hsl(var(--muted));
    border-color: hsl(var(--border));
}
html:not(.dark) .page-card .upload-zone:hover {
    background: hsl(var(--accent));
}

/* Step numbers (01/02/03) in test factory */
html:not(.dark) .page-bg-deep .step-number { color: hsl(var(--muted-foreground)); }

/* Tab switcher bar inside page-card */
.page-tab-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #1e1e1e;
    border: 1px solid #2d2d2d;
    padding: 0.25rem;
    border-radius: 0.5rem;
}
html:not(.dark) .page-tab-bar {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}
.page-tab-bar a { border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 700; transition: all 0.15s; }
.page-tab-bar a.active { background: #2d2d2d; color: #fff; }
html:not(.dark) .page-tab-bar a.active { background: #111827; color: #fff; }
.page-tab-bar a:not(.active) { color: #6b7280; }
html:not(.dark) .page-tab-bar a:not(.active) { color: hsl(var(--muted-foreground)); }
.page-tab-bar a:not(.active):hover { color: #d1d5db; }
html:not(.dark) .page-tab-bar a:not(.active):hover { color: hsl(var(--foreground)); background: transparent; }

/* Select styled for page-card context */
.page-select {
    padding: 0.75rem 2.75rem 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #2d2d2d;
    border: 1px solid #3d3d3d;
    color: #fff;
}
.page-select:focus { border-color: #666; }
.page-select-wrap .page-select-chevron { transition: transform 0.2s ease; }
.page-select-wrap.open .page-select-chevron { transform: rotate(180deg); }
html:not(.dark) .page-select {
    background-color: hsl(var(--secondary));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}
html:not(.dark) .page-select option { background: hsl(var(--card)); color: hsl(var(--foreground)); }

/* Upload drop zone */
.upload-zone-label {
    background: #151515;
    border-color: #3d3d3d;
}
.upload-zone-label:hover { background: #1a1a1a; border-color: #555; }
html:not(.dark) .upload-zone-label {
    background: hsl(var(--muted));
    border-color: hsl(var(--border));
}
html:not(.dark) .upload-zone-label:hover {
    background: hsl(var(--accent));
    border-color: hsl(var(--border));
}

/* Neutralise style.css hover for dashboard buttons */
.dashboard-layout a.btn-start:hover,
.dashboard-layout a.btn-start-lg:hover { 
    background-color: hsl(var(--primary) / 0.9) !important; 
    color: hsl(var(--primary-foreground)) !important;
    border-color: transparent !important; 
}
html:not(.dark) .dashboard-layout a.btn-start:hover,
html:not(.dark) .dashboard-layout a.btn-start-lg:hover { 
    background-color: rgb(17 24 39 / 0.9) !important;
    color: #ffffff !important; 
    border-color: transparent !important; 
}

/* Messages & Alerts - Compact Toasts with Title/Desc */
.messages-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    left: auto;
    top: auto;
    transform: none;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
    width: auto;
}

.alert {
    pointer-events: auto;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: hsl(var(--card));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border) / 0.5);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    animation: slideNotificationRight 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 20rem;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.alert-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.alert-description {
    font-size: 0.75rem;
    font-weight: 400;
    color: hsl(var(--muted-foreground));
    line-height: 1.4;
}

@keyframes slideNotificationRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.alert-success, .alert-error, .alert-danger, .alert-info, .alert-warning, .alert-debug {
    background: hsl(var(--card));
}

.alert-close {
    display: none;
}

/* Plan Badges - Consistent styling for both mock tests and sections */
.badge-plan-compact,
.badge-plan-row {
    padding: 0.25rem 0.65rem;
    border-radius: 0.375rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.badge-plan-compact.pro,
.badge-plan-row.pro {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-plan-compact.max,
.badge-plan-row.max {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.badge-plan-compact.free,
.badge-plan-row.free {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}