/* ============================================================
   Hustlers IELTS — Portal design system (plain CSS).
   Written WITHOUT @apply so it works under the Tailwind Play CDN.
   ============================================================ */

:root {
    --brand-red:   #CD1F35;
    --brand-red-d: #A8182A;
    --brand-blue:  #22285B;
    --brand-blue-d:#171B40;
    --brand-cream: #F8F5F0;
    --ring:        rgba(205, 31, 53, 0.20);
    --line:        #e5e7eb;
}

body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
[x-cloak] { display: none !important; }

/* ---------- Form controls ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], input[type="tel"],
input[type="date"], input[type="datetime-local"],
select, textarea { border-radius: 0.375rem; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-red) !important;
    box-shadow: 0 0 0 3px var(--ring);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500;
    border-radius: 0.375rem; transition: all 120ms ease; cursor: pointer;
    white-space: nowrap; line-height: 1.2;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
.btn-primary   { background: var(--brand-red); color: #fff; }
.btn-primary:hover   { background: var(--brand-red-d); }
.btn-secondary { background: var(--brand-blue); color: #fff; }
.btn-secondary:hover { background: var(--brand-blue-d); }
.btn-outline   { background: #fff; border: 1px solid #d1d5db; color: #374151; }
.btn-outline:hover   { border-color: var(--brand-red); color: var(--brand-red); }
.btn-ghost     { background: transparent; color: #4b5563; }
.btn-ghost:hover     { background: #f3f4f6; }
.btn-danger    { background: #fff; border: 1px solid #fca5a5; color: var(--brand-red); }
.btn-danger:hover    { background: #fef2f2; }

/* ---------- Cards ---------- */
.card        { background: #fff; border: 1px solid var(--line); border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card-pad    { padding: 1.25rem; }
.card-header { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.card-title  { font-weight: 600; font-size: 0.875rem; color: #1f2937; }

/* ---------- Stat tiles ---------- */
.stat        { background: #fff; border: 1px solid var(--line); border-radius: 0.5rem; padding: 1.25rem; transition: box-shadow 150ms ease; }
.stat:hover  { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.stat-label  { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
.stat-value  { font-size: 1.875rem; font-weight: 600; color: #111827; margin-top: 0.5rem; line-height: 1.1; }
.stat-sub    { font-size: 0.75rem; color: #9ca3af; margin-top: 0.25rem; }

/* ---------- Badges ---------- */
.badge        { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; }
.badge-green  { background: #dcfce7; color: #166534; }
.badge-gray   { background: #e5e7eb; color: #4b5563; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-blue   { background: #dbeafe; color: var(--brand-blue); }
.badge-red    { background: #fee2e2; color: var(--brand-red); }

/* ---------- Tables ---------- */
.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: 0.5rem; overflow: hidden; }
.tbl        { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.tbl thead  { background: #f9fafb; }
.tbl th     { text-align: left; padding: 0.75rem 1rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; font-weight: 600; }
.tbl tbody tr { border-top: 1px solid #f3f4f6; transition: background 100ms ease; }
.tbl tbody tr:hover { background: #f9fafb; }
.tbl td     { padding: 0.75rem 1rem; vertical-align: middle; }

/* ---------- Sidebar ---------- */
.sidebar-link        { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; font-size: 0.875rem; color: #cbd5e1; border-radius: 0.5rem; transition: all 120ms ease; }
.sidebar-link:hover  { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-link.active { background: var(--brand-red); color: #fff; font-weight: 500; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.sidebar-link svg    { flex-shrink: 0; }
.sidebar-section-title { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; padding: 0 1rem; margin: 1.5rem 0 0.5rem; }

/* ---------- Breadcrumbs ---------- */
.crumbs   { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: #9ca3af; margin-bottom: 0.5rem; flex-wrap: wrap; }
.crumbs a { color: #9ca3af; transition: color 120ms; }
.crumbs a:hover { color: var(--brand-red); }

/* ---------- Student sidebar nav (light) ---------- */
.nav-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.625rem 0.875rem; font-size: 0.9rem; font-weight: 500;
    color: #4b5563; border-radius: 0.5rem; transition: all 120ms ease;
}
.nav-item:hover  { background: #f3f4f6; color: #111827; }
.nav-item.active { background: rgba(205,31,53,0.08); color: var(--brand-red); }
.nav-item.active svg { color: var(--brand-red); }
.nav-item svg    { color: #9ca3af; flex-shrink: 0; }
.nav-item.active svg, .nav-item:hover svg { color: inherit; }

/* ---------- Section heading (minimal) ---------- */
.sec-title { font-size: 1.05rem; font-weight: 600; color: #111827; letter-spacing: -0.01em; }

/* ---------- Forms (staff) ---------- */
.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem; }
.form-help  { font-size: 0.75rem; color: #9ca3af; margin-top: 0.25rem; }
.form-error { font-size: 0.75rem; color: var(--brand-red); margin-top: 0.25rem; }
.form-row   { margin-bottom: 1.25rem; }

/* ---------- Empty state ---------- */
.empty     { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3.5rem 1.5rem; color: #6b7280; }
.empty svg { width: 2.5rem; height: 2.5rem; color: #d1d5db; margin-bottom: 0.75rem; }

/* ---------- Toast ---------- */
.toast { box-shadow: 0 10px 25px rgba(0,0,0,0.12); }

/* ============================================================
   Student portal — exam-grade ("IDP-style") design tokens
   Calm white surfaces, hairline borders, generous whitespace,
   Hustlers red as the primary accent, deep blue as support.
   ============================================================ */

/* Page intro */
.page-eyebrow { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--brand-red); }
.page-title   { font-family: 'Poppins', Inter, sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: #111827; line-height: 1.15; }
@media (min-width: 768px){ .page-title { font-size: 1.9rem; } }
.page-sub     { font-size: 0.9rem; color: #6b7280; margin-top: 0.35rem; }

/* Surface card — flat & sharp-cornered to match the Hustlers homepage. */
.surface       { background: #fff; border: 1px solid #e7e9ee; border-radius: 0; }
.surface-pad   { padding: 1.25rem; }
@media (min-width: 768px){ .surface-pad { padding: 1.5rem; } }
.surface-hover { transition: box-shadow 160ms ease, border-color 160ms ease; }
.surface-hover:hover { border-color: #CD1F35; box-shadow: 0 10px 30px rgba(34,40,91,0.08); }

/* Hero / focus card — the prominent "your next test" panel */
.focus-card {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #22285B 0%, #2c3370 55%, #3a1f3d 100%);
    color: #fff; border-radius: 0; padding: 1.75rem;
}
@media (min-width: 768px){ .focus-card { padding: 2.25rem; } }
.focus-card .accent { position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 9999px; background: rgba(205,31,53,0.18); }
.focus-card .accent2 { position: absolute; right: 60px; bottom: -70px; width: 150px; height: 150px; border-radius: 9999px; background: rgba(255,255,255,0.05); }

/* Section header row */
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.section-head h2 { font-family: 'Poppins', Inter, sans-serif; font-size: 1.15rem; font-weight: 600; color: #111827; letter-spacing: -0.01em; }
.section-link { font-size: 0.8rem; font-weight: 500; color: var(--brand-red); display: inline-flex; align-items: center; gap: 0.25rem; }
.section-link:hover { text-decoration: underline; }

/* Band score display */
.band { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--brand-blue); line-height: 1; }
.band-xl { font-size: 3rem; }
.band-lg { font-size: 2rem; }
.band-cap { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: #9ca3af; margin-top: 0.3rem; }

/* Metric (flat stat, sharp corners) */
.metric        { background: #fff; border: 1px solid #e7e9ee; border-radius: 0; padding: 1.1rem 1.25rem; }
.metric-label  { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: #9ca3af; font-weight: 600; }
.metric-value  { font-size: 1.75rem; font-weight: 700; color: #111827; margin-top: 0.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-sub    { font-size: 0.72rem; color: #9ca3af; margin-top: 0.3rem; }

/* Skill accents — Listening / Reading / Writing / Speaking */
.skill-tile { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem; background: #fff; border: 1px solid #e7e9ee; border-radius: 0; transition: box-shadow 160ms ease, border-color 160ms ease; }
.skill-tile:hover { box-shadow: 0 10px 30px rgba(34,40,91,0.08); border-color: #CD1F35; }
.skill-ic { width: 2.5rem; height: 2.5rem; border-radius: 0; display: flex; align-items: center; justify-content: center; }
.skill-ic svg { width: 1.25rem; height: 1.25rem; }
.skill-listening { background: #eef2ff; color: #4338ca; }
.skill-reading   { background: #ecfdf5; color: #047857; }
.skill-writing   { background: #fff7ed; color: #c2410c; }
.skill-speaking  { background: #fdf2f8; color: #be185d; }
.skill-count { font-size: 0.72rem; color: #9ca3af; }

/* Status pill (exam-grade) */
.pill          { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; font-size: 0.72rem; font-weight: 600; border-radius: 9999px; }
.pill-done     { background: #ecfdf5; color: #047857; }
.pill-progress { background: #fffbeb; color: #b45309; }
.pill-pending  { background: #eff6ff; color: #1d4ed8; }

/* Row list item */
.row-item { display: flex; align-items: center; justify-content: space-between; padding: 0.95rem 1.25rem; transition: background 120ms ease; }
.row-item:hover { background: #fafafa; }

/* Primary button on dark surfaces */
.btn-on-dark { background: #fff; color: var(--brand-blue); }
.btn-on-dark:hover { background: #f3f4f6; }

/* ============================================================
   Test-taking (student side) — unchanged behaviour
   ============================================================ */
.test-passage { line-height: 1.7; }
.test-passage h2 { font-size: 1.5rem; font-weight: 600; margin: 1.5em 0 0.5em; }
.test-passage h3 { font-size: 1.25rem; font-weight: 600; margin: 1.25em 0 0.5em; }
.test-passage p { margin: 0.75em 0; }
.test-passage strong { font-weight: 700; }

.test-question { border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
.test-question:last-child { border-bottom: none; }
.test-question label { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.5rem 0.75rem; cursor: pointer; transition: background-color 100ms; }
.test-question label:hover { background-color: #f9fafb; }
.test-question input[type="radio"]:checked + span,
.test-question input[type="checkbox"]:checked + span { font-weight: 600; color: var(--brand-red); }

@keyframes record-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } }
.recording-dot { animation: record-pulse 1.2s infinite ease-in-out; }

/* ============================================================
   Hustlers website look — applied to the student portal
   Poppins display headings, brand hero band, bold cards,
   squared brand CTAs with arrow, brand sidebar.
   ============================================================ */

.font-display { font-family: 'Poppins', Inter, ui-sans-serif, system-ui, sans-serif; }

/* Hero band (mirrors the site's hero / section heads) */
.hs-hero {
    position: relative; overflow: hidden;
    background: var(--brand-blue);
    color: #fff;
    border-radius: 1rem;
    padding: 1.75rem;
}
@media (min-width: 768px){ .hs-hero { padding: 2.5rem; } }
.hs-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25;
    background:
        radial-gradient(620px 320px at 100% 0%, rgba(205,31,53,.55), transparent 60%),
        radial-gradient(420px 300px at 10% 120%, rgba(255,255,255,.12), transparent 60%);
}
.hs-hero > * { position: relative; z-index: 1; }

/* Eyebrow + heading in the site's voice */
.hs-eyebrow { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.hs-title   { font-family: 'Poppins', Inter, sans-serif; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.hs-h1 { font-size: 1.9rem; } @media (min-width:768px){ .hs-h1 { font-size: 2.6rem; } }
.hs-h2 { font-family:'Poppins',Inter,sans-serif; font-weight:600; font-size: 1.25rem; letter-spacing:-.01em; color:#111827; }
@media (min-width:768px){ .hs-h2 { font-size: 1.5rem; } }

/* Site-style card: white, hairline border, generous radius, lift on hover */
.hs-card { background:#fff; border:1px solid #e7e9ee; border-radius: 0.9rem; transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease; }
.hs-card-hover:hover { box-shadow: 0 14px 34px rgba(34,40,91,.10); transform: translateY(-2px); border-color:#d8dbe3; }

/* Brand CTA buttons — squared, confident, with room for an arrow (site style) */
.hs-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; padding:.7rem 1.4rem; border-radius:.6rem; transition: all 150ms ease; line-height:1.1; }
.hs-btn-red   { background: var(--brand-red); color:#fff; }
.hs-btn-red:hover   { background: var(--brand-red-d); }
.hs-btn-blue  { background: var(--brand-blue); color:#fff; }
.hs-btn-blue:hover  { background: var(--brand-blue-d); }
.hs-btn-light { background:#fff; color: var(--brand-blue); border:1px solid #e7e9ee; }
.hs-btn-light:hover { background:#f6f7f9; }
.hs-btn-ghost { color: var(--brand-red); }
.hs-btn-ghost:hover { background: rgba(205,31,53,.06); }

/* Stat tile, site flavour */
.hs-stat { background:#fff; border:1px solid #e7e9ee; border-radius:.9rem; padding:1.1rem 1.25rem; }
.hs-stat-num { font-family:'Poppins',Inter,sans-serif; font-weight:700; font-size:1.85rem; line-height:1; color: var(--brand-blue); font-variant-numeric: tabular-nums; }
.hs-stat-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#9aa1ab; font-weight:600; }

/* Sidebar — brand-blue rail like the site's dark surfaces */
.hs-side-link { display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; font-size:.92rem; font-weight:500; color: rgba(255,255,255,.78); border-radius:.6rem; transition: all 130ms ease; }
.hs-side-link:hover  { background: rgba(255,255,255,.10); color:#fff; }
.hs-side-link.active { background: var(--brand-red); color:#fff; box-shadow: 0 6px 16px rgba(205,31,53,.35); }
.hs-side-link i, .hs-side-link svg { color: currentColor; }

/* ============================================================
   Hustlers homepage style — flat, bold, sharp-cornered, friendly
   Mirrors the marketing site: flat tinted blocks, flag-badge icon,
   arrow CTAs, alternating tints, generous whitespace.
   ============================================================ */

/* Welcome hero — gradient brand-blue band, like the site hero */
.hsx-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(105deg, #22285B 0%, #22285B 42%, #2c3370 70%, #3a1f3d 100%);
    color: #fff; padding: 2rem 1.5rem;
}
@media (min-width:768px){ .hsx-hero { padding: 3rem 3rem; } }
.hsx-hero::before {  /* dotted texture, subtle */
    content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
    background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 14px 14px;
}
.hsx-hero::after {
    content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
    background: rgba(205,31,53,.30); border-radius:9999px; filter: blur(8px); pointer-events:none;
}
.hsx-hero > * { position: relative; z-index: 1; }
.hsx-eyebrow { font-size:.78rem; letter-spacing:.04em; color: rgba(255,255,255,.8); }
.hsx-h1 { font-family:'Poppins',Inter,sans-serif; font-weight:700; line-height:1.1; letter-spacing:-.02em; font-size:1.9rem; }
@media (min-width:768px){ .hsx-h1 { font-size:2.7rem; } }

/* Section heading (centered/left, big, friendly) */
.hsx-section-title { font-family:'Poppins',Inter,sans-serif; font-weight:600; font-size:1.35rem; letter-spacing:-.01em; color:#111827; }
@media (min-width:768px){ .hsx-section-title { font-size:1.6rem; } }

/* Flat stat block (sharp corners + soft tint + flag badge) */
.hsx-stat { position:relative; padding:1.4rem 1.5rem; min-height:8.5rem; display:flex; flex-direction:column; justify-content:space-between; }
.hsx-stat .num { font-family:'Poppins',Inter,sans-serif; font-weight:700; font-size:2.25rem; line-height:1; letter-spacing:-.02em; }
.hsx-stat .lbl { font-size:.95rem; color:#374151; margin-top:.35rem; }
.hsx-tint-blue  { background: rgba(34,40,91,.08); }
.hsx-tint-red   { background: rgba(205,31,53,.08); }
.hsx-tint-green { background: rgba(34,197,94,.10); }
.hsx-tint-amber { background: rgba(245,158,11,.12); }

/* The signature 'flag badge' — colored square with a downward ribbon tail */
.hsx-flag { position:absolute; right:1.25rem; top:1.25rem; width:2.4rem; height:2.4rem;
    display:flex; align-items:center; justify-content:center; color:#fff; }
.hsx-flag::before, .hsx-flag::after {
    content:""; position:absolute; top:100%; width:0; height:0; border-top:0.9rem solid currentColor; }
.hsx-flag::before { right:50%; border-left:1.2rem solid transparent; }
.hsx-flag::after  { left:50%;  border-right:1.2rem solid transparent; }
.hsx-flag i, .hsx-flag svg { width:1.2rem; height:1.2rem; }
.hsx-flag-blue  { background:#22285B; color:#22285B; }
.hsx-flag-blue  i, .hsx-flag-blue svg  { color:#fff; }
.hsx-flag-red   { background:#CD1F35; color:#CD1F35; }
.hsx-flag-red   i, .hsx-flag-red svg   { color:#fff; }
.hsx-flag-green { background:#22c55e; color:#22c55e; }
.hsx-flag-green i, .hsx-flag-green svg { color:#fff; }
.hsx-flag-amber { background:#f59e0b; color:#f59e0b; }
.hsx-flag-amber i, .hsx-flag-amber svg { color:#fff; }

/* Flat block (sharp-cornered card replacement) */
.hsx-block { background:#fff; border:1px solid #e7e9ee; }
.hsx-block-hover { transition: border-color 150ms ease, box-shadow 150ms ease; }
.hsx-block-hover:hover { border-color:#CD1F35; box-shadow: 0 10px 30px rgba(34,40,91,.08); }

/* Arrow CTA buttons (flat, sharp, trailing arrow) — site signature */
.hsx-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:1.25rem;
    padding:.85rem 1.25rem; font-weight:600; transition: all 150ms ease; }
.hsx-cta-red  { background:#CD1F35; color:#fff; } .hsx-cta-red:hover  { background:#A8182A; }
.hsx-cta-blue { background:#22285B; color:#fff; } .hsx-cta-blue:hover { background:#171B40; }
.hsx-cta-white{ background:#fff; color:#111827; border:1px solid #e7e9ee; } .hsx-cta-white:hover{ border-color:#CD1F35; color:#CD1F35; }

/* Friendly empty state */
.hsx-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:3rem 1.5rem; }
.hsx-empty .ic { width:3.5rem; height:3.5rem; display:flex; align-items:center; justify-content:center; background: rgba(205,31,53,.08); color:#CD1F35; margin-bottom:1rem; }
.hsx-empty .ic i, .hsx-empty .ic svg { width:1.6rem; height:1.6rem; }

/* Pill (skill / status) flat */
.hsx-pill { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; font-size:.72rem; font-weight:600; }