:root{
  --bg:#020c0f;
  --surface:#06181c;
  --muted:#84a8ad;
  --text:#e3fbff;
  --primary:#3de3f5;
  --on-primary:#032025;
  --radius:12px;
  --container:1100px;
  --glass: rgba(255,255,255,0.04);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
/* Generic visibility utility — several components previously worked around this not existing
   by toggling inline styles by hand, which is exactly the kind of thing that quietly breaks
   (see the admin dashboard's tabs). !important is deliberate here: without it, any other
   single-class selector setting its own `display` (e.g. .admin-gate{display:flex}) can win the
   cascade tie purely by being declared later in the file, silently defeating .hidden. */
.hidden{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.container{max-width:var(--container);margin:0 auto;padding:1rem}

/* Nav */
.nav{position:sticky;top:0;z-index:40;background:linear-gradient(180deg, rgba(61,227,245,0.14), rgba(61,227,245,0.04) 70%), #0a2429;border-bottom:1px solid rgba(61,227,245,0.4);box-shadow:0 12px 30px rgba(0,0,0,0.45), 0 14px 32px rgba(61,227,245,0.1);backdrop-filter:blur(10px)}
.nav-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:0.4rem 0 0.35rem;row-gap:0.3rem}
.logo{order:1;width:100%;display:flex;justify-content:center;padding-bottom:0.3rem;border-bottom:1px solid rgba(255,255,255,0.08)}
.logo img{height:42px}
.nav-toggle{order:2}
.nav-links{order:3;list-style:none;margin:0;padding:0;display:flex;gap:1.85rem;align-items:center}
.nav-links a{position:relative;color:var(--muted);text-decoration:none;font-weight:600;font-size:0.95rem;padding:0.4rem 0.05rem;transition:color 150ms ease}
.nav-links a:hover{color:#ffffff}
.nav-badge{position:absolute;bottom:-6px;right:-10px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ff4d4d;color:#fff;font-size:0.7rem;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px #000, 0 2px 8px rgba(255,77,77,0.5)}
.nav-links a.active,
.nav-links a[aria-current="page"]{color:#ffffff}
.nav-links a.active::after,
.nav-links a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--primary)}
.nav-auth{order:4;position:relative;margin:0}
.profile-pill{display:inline-flex;align-items:center;gap:0.6rem;height:44px;padding:0.35rem 1rem 0.35rem 0.35rem;border-radius:14px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);color:#ffffff;font-weight:700;cursor:pointer;transition:background 150ms ease,border-color 150ms ease}
.profile-pill:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.24)}
.profile-avatar{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6df1ff,#0f5fff);color:#021126;font-weight:800;font-size:0.9rem;flex-shrink:0}
.profile-name{white-space:nowrap;font-size:0.95rem;}
.profile-menu{position:absolute;left:0;top:calc(100% + 0.65rem);background:rgba(6,24,52,0.96);border:1px solid rgba(109,208,255,0.16);box-shadow:0 20px 40px rgba(0,0,0,0.22);list-style:none;padding:0.4rem 0;margin:0;min-width:220px;border-radius:18px;display:none;z-index:50}
.profile-menu.visible{display:block}
.profile-menu li{padding:0}
.profile-menu a,
.profile-menu button{display:block;width:100%;text-align:left;padding:0.85rem 1rem;color:#e8f5ff;text-decoration:none;background:transparent;border:0;font:inherit;cursor:pointer}
.profile-menu a:hover,
.profile-menu button:hover{background:rgba(255,255,255,0.08)}
/* Compact, fixed-size indicator (not a text chip) so it can never push nav links into
   wrapping regardless of name length — the full "Connect Stripe payouts" text lives in the
   tooltip and the dropdown menu item below, not inline in the pill. */
.stripe-connect-flag{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(255,182,72,0.25);border:1px solid rgba(255,182,72,0.55);color:#ffc978;font-size:0.75rem;font-weight:800;line-height:1}
.stripe-connect-flag[hidden]{display:none}
.profile-menu button.connect-stripe-menu-item{color:#ffc978;font-weight:800}
.connect-stripe-menu-item[hidden]{display:none}
.btn.connect-stripe-btn{border:1px dashed rgba(255,182,72,0.5);color:#ffc978;background:rgba(255,182,72,0.08)}
.profile-avatar-img{width:34px;height:34px;border-radius:50%;object-fit:cover;}
.modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;z-index:2000;}
.modal.hidden{display:none}
.modal-panel{background:rgba(3,18,41,0.98);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(18px);border-radius:28px;max-width:520px;width:min(520px,95vw);max-height:90vh;overflow-y:auto;padding:1.5rem;box-shadow:0 40px 120px rgba(0,0,0,0.35);color:#f0f8ff;}
.booking-panel{max-width:600px;background:linear-gradient(180deg, rgba(19,36,72,0.98), rgba(5,11,31,0.98));border:1px solid rgba(67,129,255,0.18);}
.modal-close{position:absolute;top:1rem;right:1rem;background:transparent;border:0;color:#d0e9ff;font-size:1.6rem;cursor:pointer}
.profile-settings-grid{display:grid;grid-template-columns:minmax(120px,150px)1fr;gap:1rem;align-items:start}
.profile-preview{display:flex;flex-direction:column;gap:0.85rem;}
.profile-image-wrap{width:150px;height:150px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);}
.profile-image-preview{width:100%;height:100%;object-fit:cover;}
.file-input-label{display:inline-flex;align-items:center;justify-content:center;padding:0.85rem 1rem;border-radius:14px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.06);color:#eef9ff;cursor:pointer;transition:all 150ms ease;}
.file-input-label:hover{background:rgba(255,255,255,0.12);}
.file-input-label input{display:none}
.profile-email-display{display:block;padding:0.6rem 0;color:#dce8f2}
.auth-card{max-width:420px}
.auth-shell{max-width:460px;margin:0 auto;text-align:center}
.auth-shell h1{margin-bottom:0.4rem}
.auth-shell .page-lead{margin-left:auto;margin-right:auto}
.auth-shell .auth-card,
.auth-shell .dev-login-card{margin-left:auto;margin-right:auto;text-align:left;max-width:420px}
.auth-card{margin-top:1.6rem}
.auth-note{display:flex;align-items:center;gap:0.6rem;margin:1.2rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,0.06);color:var(--muted);font-size:0.85rem;line-height:1.5}
.auth-note svg{width:18px;height:18px;flex-shrink:0;color:#6dfcac}
.consent-check{display:flex;align-items:flex-start;gap:0.65rem;margin:1rem 0 0;padding:0.9rem 1rem;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);cursor:pointer;font-size:0.88rem;color:var(--muted);line-height:1.5;text-align:left}
.consent-check input[type="checkbox"]{margin-top:0.15rem;width:18px;height:18px;flex-shrink:0;accent-color:var(--primary);cursor:pointer}
.consent-check a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(255,255,255,0.3);text-underline-offset:2px}
.consent-check a:hover{color:var(--primary)}
.google-signin-gated{opacity:0.35;filter:grayscale(0.7);pointer-events:none;transition:opacity 200ms ease,filter 200ms ease}
.google-signin-gated.enabled{opacity:1;filter:none;pointer-events:auto}
.auth-switch{margin-top:1.2rem;color:var(--muted)}
.dev-login-card{margin-top:1.5rem;border:1px dashed rgba(255,182,72,0.45);background:rgba(255,182,72,0.05)}
.dev-login-card h3{margin:0 0 0.5rem;color:#ffc978}
.dev-login-card code{background:rgba(255,255,255,0.08);padding:0.1rem 0.4rem;border-radius:4px}
.btn.dev-pay-btn{border:1px dashed rgba(255,182,72,0.45);color:#ffc978;background:rgba(255,182,72,0.05)}

/* Embedded Stripe payment form (Payment Element mounts into #paymentElementContainer) */
.payment-panel{max-width:460px}

/* Lesson price + flat platform fee breakdown (booking request modal and payment modal) */
.price-breakdown-box{margin-bottom:1.25rem;padding:0.9rem 1rem;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08)}
.price-breakdown{display:flex;align-items:baseline;justify-content:space-between;font-size:0.9rem;color:var(--muted);padding:0.2rem 0}
.price-breakdown.total{margin-top:0.4rem;padding-top:0.6rem;border-top:1px solid rgba(255,255,255,0.08);font-size:1.1rem;font-weight:800;color:#f3faff}
/* Discounted lesson price — no badge/label, just the original struck through in a plain
   readable grey, ample space, then the new price bigger and brighter. Lets the two numbers
   speak for themselves rather than announcing "discounted" on top of them. */
.price-breakdown-discounted{align-items:center}
.price-discount-values{display:flex;align-items:baseline;gap:1rem}
.price-original{color:var(--muted);text-decoration:line-through;font-size:0.95rem}
.price-final{color:#6dfcac;font-weight:800;font-size:1.15rem}
#paymentElementContainer{min-height:220px;margin-bottom:1rem}
#paymentElementContainer .payment-loading{color:var(--muted);font-size:0.9rem;text-align:center;padding:2rem 0}
#paymentError{display:none;margin:0.75rem 0;padding:0.75rem 0.9rem;border-radius:12px;background:rgba(255,77,77,0.12);border:1px solid rgba(255,77,77,0.22);color:#ffdddd;font-size:0.9rem;line-height:1.5}
.settings-panel{max-width:640px;width:min(640px,95vw);padding:2rem}
.tutor-settings-section{margin-top:2rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,0.08)}
.tutor-settings-section.hidden{display:none}
.settings-subheading{margin:0 0 1.5rem;font-size:1.05rem;color:#f3faff}
.tutor-settings-section label{display:block;margin-bottom:1rem;font-size:0.95rem;color:var(--muted)}
.tutor-settings-section input[type="number"],
.tutor-settings-section input[type="text"],
.tutor-settings-section select{width:100%;padding:0.75rem 0.85rem;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:#ffffff;outline:none;margin-top:0.4rem}
/* Related fields grouped with their own small heading and a bit of dedicated whitespace
   around each group, rather than one long unbroken list of labels — that grouping is most of
   what makes a form this size read as organised instead of cramped. */
.settings-group{margin-bottom:1.75rem}
.settings-group:last-child{margin-bottom:0}
.settings-group-label{display:block;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin-bottom:0.9rem}
.settings-field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){
  .settings-field-row{grid-template-columns:1fr}
}
.tutor-settings-section select option{background:var(--surface);color:var(--text)}
.settings-group-hint{margin:0 0 0.9rem;color:var(--muted);font-size:0.85rem;line-height:1.5}

/* Availability blocks: each is a set of selectable days + one time range (Account settings) */
.availability-block-list{display:flex;flex-direction:column;gap:0.7rem;margin-bottom:0.9rem}
.availability-block{display:flex;align-items:center;flex-wrap:wrap;gap:0.9rem;padding:0.8rem 0.9rem;border-radius:12px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03)}
.availability-day-chips{display:flex;gap:0.35rem;flex-wrap:wrap}
.day-chip{padding:0.4rem 0.65rem;border-radius:8px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);color:var(--muted);font-weight:700;font-size:0.8rem;cursor:pointer;transition:all 150ms ease}
.day-chip:hover{border-color:rgba(61,227,245,0.45)}
.day-chip.selected{background:var(--primary);color:var(--on-primary);border-color:transparent}
.availability-times{display:flex;align-items:center;gap:0.6rem}
.availability-times select{padding:0.5rem 0.6rem;border-radius:10px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:#fff;outline:none;margin:0;width:auto;cursor:pointer}
.availability-times select option{background:var(--surface);color:var(--text)}
.availability-to{color:var(--muted);font-size:0.85rem}
.remove-block-btn{margin-left:auto;width:28px;height:28px;flex-shrink:0;border-radius:50%;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer}
.remove-block-btn:hover{background:rgba(255,80,80,0.15);border-color:rgba(255,80,80,0.4);color:#ff8080}
@media (max-width:520px){
  .availability-block{flex-direction:column;align-items:flex-start}
  .remove-block-btn{margin-left:0;align-self:flex-end}
}

/* Repeatable admissions-test / A-Level qualification rows (signup form + account settings) */
.qual-section{margin-bottom:1.25rem}
.qual-section .field-label{display:block;margin-bottom:0.5rem;color:var(--muted);font-size:0.95rem}
.qual-list{display:flex;flex-direction:column;gap:0.6rem;margin-bottom:0.6rem}
.qual-row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;padding:0.6rem;border-radius:12px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);transition:border-color 150ms ease}
.qual-row.status-achieved{border-left:3px solid #38d980}
.qual-row.status-predicted{border-left:3px solid #ffb648}
.qual-row input,
.qual-row select{padding:0.55rem 0.65rem;border-radius:10px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:#ffffff;outline:none;font-size:0.9rem;min-width:0}
/* The closed <select> box picks up the dark theme fine, but its open option list is drawn by
   the browser/OS using default (often white-on-white) styling unless the options themselves are
   styled too. */
.qual-row select option{background:var(--surface);color:var(--text)}
.qual-name-select{flex:1;min-width:150px}
.qual-name-other{flex:1;min-width:140px}
.qual-row .qual-result{flex:1;min-width:120px}
/* Exam-specific structured result fields (UCAT total+band, ESAT's 3 modules+scores, STEP's
   grade, TMUA/BMAT's two papers, LNAT's section score) replace the single free-text box for
   exams with a known real grading structure — see ADMISSIONS_TEST_FIELD_SCHEMAS in main.js. */
.qual-result-fields{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:flex-end;flex:2;min-width:220px}
.qual-field{display:flex;flex-direction:column;gap:0.3rem;font-size:0.72rem;color:var(--muted);font-weight:600}
.qual-field-input{width:auto;min-width:88px}
.qual-field input[type="number"].qual-field-input{width:88px}
/* Hide the native up/down spinner — these are precise decimal scores (e.g. 7.2), and the tiny
   increment arrows invite mis-clicks more than they help typing the right value. */
.qual-field input[type="number"].qual-field-input::-webkit-outer-spin-button,
.qual-field input[type="number"].qual-field-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qual-field input[type="number"].qual-field-input{-moz-appearance:textfield}
.qual-status-toggle{display:flex;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.14)}
.qual-status-btn{padding:0.5rem 0.7rem;background:rgba(255,255,255,0.03);color:var(--muted);border:0;font-size:0.8rem;font-weight:700;cursor:pointer;white-space:nowrap}
.qual-status-btn.achieved-btn.active{background:rgba(56,217,128,0.22);color:#6dfcac}
.qual-status-btn.predicted-btn.active{background:rgba(255,182,72,0.22);color:#ffc978}
.qual-status-static{padding:0.5rem 0.7rem;border-radius:10px;background:rgba(56,217,128,0.16);color:#6dfcac;font-size:0.8rem;font-weight:700;white-space:nowrap;text-align:center}
.qual-remove-btn{width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.03);color:var(--muted);font-size:1.1rem;cursor:pointer;line-height:1}
.qual-remove-btn:hover{background:rgba(255,77,77,0.14);color:#ffb3b3}
.add-qual-btn{font-size:0.85rem;padding:0.55rem 0.9rem}

/* Test-score summary shown on Find a Tutor cards — grouped, text-first rows instead of a pile
   of colourful chips, so scores stay easy to scan without competing for attention with the
   verified/rate badges above. Always visible, no hover needed. */
.qual-summary{display:flex;flex-direction:column;gap:0.35rem;margin:0 0 0.6rem}
.qual-group-row{display:flex;gap:0.7rem;align-items:baseline;flex-wrap:wrap}
.qual-group-label{flex:0 0 138px;white-space:nowrap;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted)}
.qual-group-items{display:flex;flex-wrap:wrap;gap:0 1rem}
.qual-item{font-size:0.88rem;color:var(--text);white-space:nowrap}
.qual-item strong{font-weight:800}
/* Same green/blue split as the compact grade tiles — A Levels green, admissions tests blue. */
.qual-group-alevel .qual-item strong{color:#6dfcac}
.qual-group-admissions .qual-item strong{color:#5eb3ff}
.qual-predicted-tag{margin-left:0.35rem;font-size:0.72rem;font-weight:700;font-style:italic;color:var(--muted)}
.profile-fields label{display:block;margin-bottom:1rem;font-size:0.95rem;color:var(--muted);}
.profile-fields input,
.profile-fields textarea,
.booking-panel textarea{width:100%;padding:0.85rem 0.95rem;border-radius:14px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:#ffffff;outline:none;}
.profile-fields textarea{resize:vertical;min-height:100px;}
.booking-field{margin-top:1rem;margin-bottom:1rem;}
.booking-field .field-label{display:block;margin-bottom:0.5rem;color:var(--muted);font-size:0.95rem;}
.booking-field-hint{margin:-0.15rem 0 0.7rem;color:var(--muted);font-size:0.82rem;font-style:italic;}
.booking-subtitle{margin:0.65rem 0 1rem;color:var(--muted);}
.booking-detail{display:flex;flex-direction:column;gap:0.3rem;margin-bottom:1rem;font-size:0.98rem;}
.booking-tutor-subjects{color:var(--muted);font-size:0.95rem;}
.modal-actions{display:flex;justify-content:flex-end;gap:0.75rem;margin-top:1rem;}
.modal-actions .btn{min-width:110px;}

/* Custom time picker (replaces native <select>, which renders unreadable white-on-white option text in some browsers) */
.time-picker{position:relative}
.time-picker-trigger{width:100%;text-align:left;padding:0.85rem 0.95rem;border-radius:14px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:#ffffff;outline:none;cursor:pointer;font:inherit;display:flex;align-items:center;justify-content:space-between;gap:0.5rem}
.time-picker-trigger:hover{background:rgba(255,255,255,0.08)}
.time-picker-trigger::after{content:'';width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:-4px;flex-shrink:0}
.time-picker-panel{position:absolute;left:0;right:0;top:calc(100% + 0.5rem);background:rgba(8,20,42,0.98);border:1px solid rgba(109,208,255,0.22);border-radius:16px;box-shadow:0 24px 50px rgba(0,0,0,0.45);padding:0.75rem;z-index:20;max-height:230px;overflow-y:auto}
.time-picker-panel.hidden{display:none}
.time-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}
.time-chip{padding:0.6rem 0.4rem;border-radius:10px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);color:#ffffff;font-weight:600;font-size:0.92rem;text-align:center;cursor:pointer;transition:all 150ms ease}
.time-chip:hover{background:rgba(61,227,245,0.24);border-color:rgba(61,227,245,0.45)}
.time-chip.selected{background:var(--primary);color:var(--on-primary);border-color:transparent;font-weight:800}

/* Date chip grid (replaces the native calendar <input type="date">, which was mostly
   unusable dead space since only a 7-day window is ever selectable, and replaces an
   earlier horizontal-scroll chip strip that hid chips off-screen behind a drag/scroll
   interaction — this lays every option out at once, wrapping as needed, no scrolling) */
.date-picker-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(74px,1fr));gap:0.55rem}
.booking-no-availability{grid-column:1/-1;margin:0;padding:1rem;text-align:center;color:var(--muted);font-size:0.9rem;border:1px dashed rgba(255,255,255,0.14);border-radius:14px}
.date-chip{display:flex;flex-direction:column;align-items:center;gap:0.3rem;padding:0.65rem 0.5rem;border-radius:14px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);color:#ffffff;cursor:pointer;transition:all 150ms ease}
.date-chip:hover{background:rgba(61,227,245,0.24);border-color:rgba(61,227,245,0.45)}
.date-chip.selected{background:var(--primary);color:var(--on-primary);border-color:transparent}
.date-chip-label{font-size:0.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.03em}
.date-chip.selected .date-chip-label{color:var(--on-primary);opacity:0.8}
.date-chip-day{font-size:1rem;font-weight:800}

/* Session request cards (Requests page) */
.sessions-tabs{display:inline-flex;gap:0.3rem;margin:1.4rem 0 0;padding:0.3rem;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08)}
.sessions-tab{background:none;border:0;color:var(--muted);font-weight:700;font-size:0.92rem;padding:0.65rem 1.2rem;border-radius:10px;cursor:pointer;transition:background 150ms ease,color 150ms ease}
.sessions-tab:hover{color:var(--text)}
.sessions-tab.active{background:var(--primary);color:var(--on-primary)}
.sessions-list-wrap{margin-top:1.6rem;max-width:760px}
.request-card{background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.07);border-left:4px solid rgba(255,255,255,0.14);border-radius:18px;padding:1.4rem;box-shadow:0 16px 40px rgba(0,0,0,0.35);margin-bottom:1.1rem}
.request-card.status-pending{border-left-color:#ffb648}
.request-card.status-payment_pending{border-left-color:#8f6dff}
.request-card.status-confirmed,
.request-card.status-accepted{border-left-color:#38d980}
.request-card.status-declined{border-left-color:rgba(255,255,255,0.14);opacity:0.7}
.request-card.status-cancelled{border-left-color:rgba(239,68,68,0.5);opacity:0.75}
.request-header{display:flex;align-items:center;gap:0.9rem;flex-wrap:wrap}
.request-avatar{width:42px;height:42px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6df1ff,#0f5fff);color:#021126;font-weight:800;font-size:0.95rem}
.request-header-text{display:flex;flex-direction:column;gap:0.2rem;flex:1;min-width:180px}
.request-student{font-size:1.05rem;color:#f6fbff}
.request-when{color:var(--muted);font-size:0.92rem}
.request-status-badge{padding:0.35rem 0.8rem;border-radius:999px;font-size:0.78rem;font-weight:800;text-transform:uppercase;letter-spacing:0.03em;white-space:nowrap;background:rgba(255,255,255,0.08);color:var(--muted)}
.request-status-badge.pending{background:rgba(255,182,72,0.18);color:#ffc978}
.request-status-badge.payment_pending{background:rgba(143,109,255,0.18);color:#c3b2ff}
.request-status-badge.confirmed,
.request-status-badge.accepted{background:rgba(56,217,128,0.16);color:#6dfcac}
.request-status-badge.declined{background:rgba(255,255,255,0.06);color:var(--muted)}
.request-status-badge.cancelled{background:rgba(239,68,68,0.16);color:#ff8a8a}
.request-note{margin:1rem 0 0;padding:0.85rem 1rem;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);color:#dce8f2;font-size:0.95rem;line-height:1.6}
.request-note-mine{background:rgba(61,227,245,0.08);border-color:rgba(61,227,245,0.22)}
.request-note-label{display:block;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted);margin-bottom:0.3rem}
.request-meta{margin:0.85rem 0 0;color:var(--muted);font-size:0.85rem}
.session-price{margin:0.7rem 0 0;font-size:1rem;font-weight:800;color:var(--text)}
.session-price-discounted{display:flex;align-items:baseline;gap:1rem}
.session-price-discounted .price-original{color:var(--muted);text-decoration:line-through;font-weight:600;font-size:0.9rem}
.session-price-discounted .price-final{color:#6dfcac;font-weight:800;font-size:1.15rem}
.request-actions{display:flex;gap:0.7rem;margin-top:1.1rem;flex-wrap:wrap}
.request-actions.hidden{display:none}
.inline-confirm{flex-basis:100%;display:flex;align-items:center;gap:0.7rem;flex-wrap:wrap;margin-top:0.7rem;padding:0.85rem 1rem;border-radius:12px;background:rgba(239,68,68,0.07);border:1px solid rgba(239,68,68,0.25)}
.inline-confirm-message{color:var(--text);font-size:0.92rem;flex:1;min-width:160px}
.inline-confirm .btn{padding:0.55rem 1rem;font-size:0.88rem}
.request-accept-form{margin-top:1.1rem;padding:1rem;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08)}
.request-accept-form.hidden{display:none}
.request-accept-form label{display:block;font-size:0.9rem;color:var(--muted);margin-bottom:0.5rem}
.request-accept-form textarea{width:100%;margin-top:0.5rem;padding:0.75rem 0.85rem;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:#ffffff;outline:none;resize:vertical;min-height:70px}
.request-accept-form-actions{display:flex;gap:0.7rem;margin-top:0.85rem}

/* Confirmed Sessions page */
.session-datetime{margin:1rem 0;padding:1rem 1.2rem;border-radius:14px;background:rgba(56,217,128,0.08);border:1px solid rgba(56,217,128,0.22);display:flex;align-items:baseline;gap:0.85rem;flex-wrap:wrap}
.session-date{font-size:1.1rem;font-weight:800;color:#f3fff8}
.session-time{font-size:1.5rem;font-weight:900;color:#6dfcac;letter-spacing:0.01em}
.session-join-row{margin-top:1.1rem;display:flex;align-items:center;gap:0.8rem;flex-wrap:wrap}
.join-hint{color:var(--muted);font-size:0.85rem}
.cancel-hint{color:var(--muted);font-size:0.85rem}
.btn.primary:disabled{opacity:0.5;cursor:not-allowed;background:rgba(255,255,255,0.08);color:var(--muted);box-shadow:none;transform:none}

.nav-toggle{display:none;background:none;border:0;color:inherit}
.nav-toggle span{display:block;height:2px;width:22px;background:var(--text);margin:4px 0;border-radius:2px}

/* Hero */
/* Anchor-scrolling to any of these (e.g. clicking "Home" while on another page, which lands on
   index.html#home) would otherwise put the target's top edge at the very top of the viewport —
   right where the sticky nav then overlaps it, hiding the first ~60px of content behind the
   header. scroll-margin-top reserves that space so the landing position clears the nav. */
#home, #about, #howItWorks, #platformTrust, #examSpotlight, #faq{scroll-margin-top:112px}
.hero{padding:0.2rem 0 0;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-140px;right:-110px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle, rgba(61,227,245,0.22), rgba(61,227,245,0) 70%);pointer-events:none;z-index:0}
.hero::after{content:'';position:absolute;bottom:-180px;left:-140px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle, rgba(56,217,128,0.13), rgba(56,217,128,0) 70%);pointer-events:none;z-index:0}
.hero-inner{display:flex;gap:2rem;align-items:flex-start;position:relative;z-index:1}
.hero-copy{flex:1;max-width:760px;display:flex;flex-direction:column}
.hero-copy h1{font-size:2.2rem;margin:0 0 0.75rem;font-weight:600}
.help-panel{padding:1.8rem 1.5rem;border-radius:28px;background:linear-gradient(180deg, rgba(4,16,33,0.96), rgba(16,44,80,0.98));box-shadow:0 26px 100px rgba(0,0,0,0.32);border:1px solid rgba(61,227,245,0.18);position:relative;overflow:visible;width:min(760px,100%);margin:2rem 0 0 0;min-height:170px}
.help-panel .help-label{color:#f3faff;font-size:1.04rem;font-weight:800;letter-spacing:0.02em;margin-bottom:1rem}
.help-panel .help-chips{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:0.85rem;position:relative;align-items:flex-start;justify-content:flex-start}
.help-panel .help-chips span{display:inline-flex;align-items:center;justify-content:center;padding:0.65rem 0.95rem;border-radius:999px;background:rgba(255,255,255,0.08);color:var(--text);font-size:0.88rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);position:relative}
.help-panel .help-chips span:nth-child(1){background:rgba(61,227,245,0.24);animation:floatA 6s ease-in-out infinite;font-size:0.96rem;padding:0.68rem 1rem}
.help-panel .help-chips span:nth-child(2){background:rgba(109,208,255,0.18);animation:floatB 5.5s ease-in-out infinite;font-size:0.92rem;padding:0.62rem 0.95rem}
.help-panel .help-chips span:nth-child(3){background:rgba(62,116,255,0.16);animation:floatC 7s ease-in-out infinite;font-size:0.86rem;padding:0.5rem 0.85rem}
.help-panel .help-chips span:nth-child(4){background:rgba(87,180,255,0.14);animation:floatD 6.5s ease-in-out infinite;font-size:0.9rem;padding:0.6rem 0.95rem}
.help-panel .help-chips span:nth-child(5){background:rgba(255,255,255,0.08);animation:floatE 5.8s ease-in-out infinite;font-size:0.88rem;padding:0.55rem 0.9rem}
.help-panel .help-chips span:nth-child(6){background:rgba(80,150,255,0.16);animation:floatA 6.4s ease-in-out infinite;font-size:0.9rem;padding:0.6rem 0.95rem}
.lead{color:var(--muted);margin-bottom:1.25rem}
.hero-ctas{display:flex;align-items:center;gap:0.9rem;flex-wrap:wrap}
.site-stat-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.55rem 1rem;border-radius:999px;background:rgba(56,217,128,0.12);border:1px solid rgba(56,217,128,0.28);color:#6dfcac;font-weight:700;font-size:0.92rem}
.site-stat-badge.hidden{display:none}
.spotlight-note{margin-top:1.4rem;padding:0.9rem 1.2rem;border-radius:18px;background:rgba(61,227,245,0.18);border:1px solid rgba(61,227,245,0.3);color:#f8fbff;font-weight:600;box-shadow:0 18px 40px rgba(61,227,245,0.14);font-size:0.98rem;line-height:1.6;max-width:640px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1.25rem;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.03)}

.hero-art{width:280px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.hero-quick{width:100%;padding:0.8rem;border-radius:20px;background:linear-gradient(180deg, rgba(10,25,40,0.6), rgba(255,255,255,0.01));box-shadow:0 20px 60px rgba(0,0,0,0.75);border:1px solid rgba(61,227,245,0.08);}
.hero-quick-title{margin:0 0 0.3rem;font-size:1.1rem;font-weight:800;color:#ffffff}
.hero-quick-lead{color:#d7e4f0;margin:0 0 0.7rem;font-size:0.9rem;font-weight:600;line-height:1.4}

/* Reusable section heading (title + short supporting line) */
.section-head{margin-bottom:1.25rem;max-width:640px}
.section-head h2{margin:0 0 0.25rem}
.section-head p{margin:0;color:var(--muted);font-size:1.05rem}

/* "How booking works" — 3-step trust/process cards, the last one styled to draw the eye
   since it's the key reassurance: payment isn't taken until the lesson is actually delivered */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.8rem}
.step-card{position:relative;background:var(--surface);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:0.6rem 0.9rem;transition:transform 220ms ease}
.step-number{position:absolute;top:0.7rem;right:1rem;font-size:1.7rem;font-weight:900;line-height:1;color:rgba(255,255,255,0.14)}
.step-icon{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.16);color:var(--muted);display:flex;align-items:center;justify-content:center;margin-bottom:0.4rem}
.step-icon svg{width:14px;height:14px}
.step-card h3{margin:0 0 0.2rem;font-size:0.98rem}
.step-card p{margin:0;color:var(--muted);line-height:1.35;font-size:0.86rem}

.step-card.accent-blue{border-color:rgba(61,227,245,0.4);box-shadow:0 0 60px -18px rgba(61,227,245,0.6)}
.step-card.accent-blue .step-icon{border-color:rgba(109,208,255,0.55);color:#6dd0ff}
.step-card.accent-blue .step-number{color:rgba(109,208,255,0.55)}

.step-card.accent-purple{border-color:rgba(143,109,255,0.4);box-shadow:0 0 60px -18px rgba(143,109,255,0.6)}
.step-card.accent-purple .step-icon{border-color:rgba(179,161,255,0.55);color:#b3a1ff}
.step-card.accent-purple .step-number{color:rgba(179,161,255,0.55)}

.step-card.accent-green{border-color:rgba(56,217,128,0.45);box-shadow:0 0 60px -18px rgba(56,217,128,0.65)}
.step-card.accent-green .step-icon{border-color:rgba(109,252,172,0.55);color:#6dfcac}
.step-card.accent-green .step-number{color:rgba(109,252,172,0.55)}

@media (max-width:900px){ .steps-grid{grid-template-columns:1fr} }

/* Two trust/convenience points sitting right under the homepage's Find a Tutor card — kept
   compact (no section-head/heading) rather than a full section, since it's reinforcing points
   made elsewhere, not introducing a new topic. */
.platform-trust{padding-top:0;padding-bottom:0}
#howItWorks{padding-top:0.2rem}
.trust-points-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.8rem}
.trust-point{display:flex;gap:0.7rem;align-items:flex-start;background:var(--surface);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:0.7rem 0.9rem}
.trust-point-icon{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(61,227,245,0.45);color:#6dd0ff;display:flex;align-items:center;justify-content:center}
.trust-point-icon svg{width:18px;height:18px}
.trust-point h3{margin:0 0 0.25rem;font-size:1rem}
.trust-point p{margin:0;color:var(--muted);line-height:1.4;font-size:0.88rem}
@media (max-width:900px){ .trust-points-grid{grid-template-columns:1fr} }

/* Buttons */
.btn{display:inline-block;text-decoration:none;padding:0.75rem 1.25rem;border-radius:12px;font-weight:700;letter-spacing:0.4px;border:0;cursor:pointer;transition:all 180ms ease}
.btn.primary{background:var(--primary);color:var(--on-primary);box-shadow:0 8px 20px rgba(61,227,245,0.18);}
.btn.primary:hover{background:#0f7ae6}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);}
.btn.ghost:hover{border-color:rgba(109,208,255,0.4);color:#fff}
.btn.secondary{background:rgba(255,255,255,0.03);color:var(--text);border:1px solid rgba(255,255,255,0.04)}
.btn.danger{background:transparent;border:1px solid rgba(239,68,68,0.4);color:#ff8a8a}
.btn.danger:hover{background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.6)}
.btn.danger:disabled{opacity:0.4;cursor:not-allowed;border-color:rgba(255,255,255,0.1);color:var(--muted);background:transparent}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,0.6)}

/* Sections */
.section{padding:0.6rem 0}
h2{margin:0 0 0.5rem}
#about{padding-top:0.15rem;padding-bottom:0.25rem}
.about-copy p{margin:0 0 1rem;line-height:1.55;font-size:0.98rem}
#about h2{font-size:1.9rem;font-weight:800;letter-spacing:-0.01em}
.about-inner{display:flex;gap:2.5rem;align-items:flex-start}
.about-copy{flex:1;min-width:0}

.page-lead{color:var(--muted);font-size:1.05rem;margin:0.4rem 0 0;max-width:600px}

/* Plain prose pages (Privacy Policy, Terms, etc.) — constrained width for readability, generous
   spacing between sections since these are read top-to-bottom, not scanned like a landing page. */
.legal-content{max-width:760px;color:var(--muted);line-height:1.7}
.legal-content h2{color:var(--text);margin:2rem 0 0.75rem;font-size:1.3rem}
.legal-content h2:first-child{margin-top:0}
.legal-content p{margin:0 0 1rem}
.legal-content ul{margin:0 0 1rem;padding-left:1.3rem}
.legal-content li{margin-bottom:0.5rem}
.legal-content a{color:#6dd0ff}

.uni-chip-row{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1rem}
.uni-chip-label{margin:0 0 0.9rem;color:var(--muted);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.06em;font-weight:700}
.uni-chip-row span{padding:0.55rem 1.25rem;border-radius:999px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:var(--text);font-size:0.92rem;font-weight:700}
.uni-chip-row span.oxford{color:#6d8bef;background:rgba(31,58,138,0.16);border-color:rgba(109,139,239,0.35)}
.uni-chip-row span.cambridge{color:#7fe0f0;background:rgba(24,120,133,0.16);border-color:rgba(127,224,240,0.35)}
.uni-chip-row span.imperial{color:#2f9bef;background:rgba(0,80,158,0.18);border-color:rgba(47,155,239,0.4)}
.uni-chip-row span.lse{color:#e0576f;background:rgba(150,30,50,0.18);border-color:rgba(224,87,111,0.4)}
.uni-chip-row span.kings{color:#ff4d5e;background:rgba(180,20,30,0.2);border-color:rgba(255,77,94,0.45)}

.signup-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.signup-grid.single{grid-template-columns:1fr;max-width:560px}
.role-choice-card{display:flex;flex-direction:column}
.role-choice-card .btn{margin-top:auto;align-self:flex-start}
.form label{display:block;margin-bottom:0.5rem;color:var(--muted)}
.form textarea{width:100%;padding:0.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);resize:vertical;font-family:inherit}
.form input{width:100%;padding:0.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text)}
.form select{width:100%;padding:0.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text)}
.form select option{background:var(--surface);color:var(--text)}
.auth-error{display:none;margin-top:1rem;padding:0.85rem 1rem;border-radius:12px;background:rgba(255,77,77,0.12);border:1px solid rgba(255,77,77,0.22);color:#ffdddd;font-size:0.95rem;line-height:1.5}

.reviews-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;margin-bottom:1.8rem}
.reviews-head h2{margin:0 0 0.75rem}
.reviews-head p{margin:0;color:var(--muted);max-width:560px;line-height:1.8}
.review-badges{display:flex;flex-wrap:wrap;gap:0.75rem}
.review-badges span{display:inline-flex;align-items:center;padding:0.65rem 0.95rem;border-radius:999px;background:rgba(61,227,245,0.16);color:#e8f5ff;font-weight:700;border:1px solid rgba(61,227,245,0.24);font-size:0.95rem}
.reviews-featured{display:grid;grid-template-columns:1.8fr 1fr;gap:1rem;align-items:start}
.review-main{padding:2rem;border-radius:24px;background:linear-gradient(180deg, rgba(12,28,55,0.95), rgba(18,54,108,0.96));border:1px solid rgba(61,227,245,0.18);box-shadow:0 28px 60px rgba(0,0,0,0.45);}
.review-main .review-quote{margin:0 0 1.2rem;font-size:1.1rem;line-height:1.8;color:#edf6ff}
.review-main cite{color:#9ecbff;font-weight:700;font-style:normal}
.review-mini-grid{display:grid;gap:1rem}
.review-mini{padding:1.3rem;border-radius:20px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.review-mini cite{color:var(--text);font-weight:700;font-style:normal}

.review-attribution{display:flex;align-items:center;gap:0.7rem}
.review-main .review-attribution{margin-top:1.2rem}
.review-mini .review-attribution{margin-top:0.85rem}
.review-avatar{width:38px;height:38px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6df1ff,#0f5fff);color:#021126;font-weight:800;font-size:0.88rem}
.review-main .review-avatar{width:46px;height:46px;font-size:1rem}

.review-submit-card{max-width:640px;margin:0 auto;padding:2.2rem;border-radius:24px;background:linear-gradient(180deg, rgba(12,28,55,0.95), rgba(18,54,108,0.96));border:1px solid rgba(61,227,245,0.18);box-shadow:0 28px 60px rgba(0,0,0,0.45);}
.review-submit-card h3{margin:0 0 0.4rem;font-size:1.3rem}
.review-submit-lead{color:var(--muted);margin:0 0 1.6rem}
.review-submit-label{display:block;margin-bottom:1.3rem;color:#edf6ff;font-weight:700;font-size:0.95rem}
.review-submit-input,.review-submit-textarea{display:block;width:100%;margin-top:0.6rem;padding:0.9rem 1.1rem;border-radius:14px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);color:var(--text);font-family:inherit;font-size:1rem;outline:none;transition:border-color 150ms ease,background 150ms ease}
.review-submit-input::placeholder,.review-submit-textarea::placeholder{color:rgba(230,238,246,0.4)}
.review-submit-input:focus,.review-submit-textarea:focus{border-color:var(--primary);background:rgba(255,255,255,0.08)}
.review-submit-textarea{resize:vertical;min-height:160px;line-height:1.7}
.review-submit-msg{margin-top:1.1rem;font-size:0.92rem;line-height:1.5}

.reviews-more-row{display:flex;justify-content:center;margin-top:1.8rem}

.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
blockquote{margin:0;padding:1rem;border-left:3px solid var(--primary);color:var(--muted)}
blockquote cite{display:block;margin-top:0.75rem;color:var(--text);font-weight:600}

.reviews-teaser-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:1.75rem 2rem;border-radius:20px;background:var(--surface);border:1px solid rgba(255,255,255,0.08)}
.reviews-teaser-inner h2{margin:0 0 0.4rem;font-size:1.3rem}
.reviews-teaser-inner p{margin:0;color:var(--muted)}

/* Dedicated Reviews page */
.reviews-intro h1{font-size:2.3rem;font-weight:800;letter-spacing:-0.01em;margin:0 0 0.5rem}
.reviews-intro-badges{margin-top:1.3rem}
.reviews-cta{text-align:center}
.reviews-cta-inner{max-width:600px;margin:0 auto}
.reviews-cta h2{margin:0 0 0.6rem}
.reviews-cta p{color:var(--muted);margin:0 0 1.4rem}
.reviews-cta-actions{justify-content:center}

/* Footer */
.footer{padding:1.5rem 0;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted);position:relative}
.footer::before{content:'';position:absolute;top:-1px;left:0;width:220px;height:1px;background:linear-gradient(90deg, rgba(61,227,245,0.5), rgba(56,217,128,0.4), transparent)}

/* Reveal animations */
.reveal{opacity:1;transform:none;transition:none}
.js .reveal{opacity:0;transform:translateY(12px);transition:all 600ms cubic-bezier(.2,.9,.2,1)}
.reveal.in-view{opacity:1;transform:none;transition:all 600ms cubic-bezier(.2,.9,.2,1)}

/* Signup role visuals */
.card.tutee{border-left:6px solid var(--primary)}
.card.tutor{border-left:6px solid #7adfff}
.role-icon{width:48px;height:48px;border-radius:13px;background:rgba(61,227,245,0.14);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:#6dd0ff}
.role-icon svg{width:24px;height:24px}
.card.tutor .role-icon{background:rgba(122,223,255,0.14);color:#7adfff}
.role-badge{display:inline-block;padding:0.25rem 0.6rem;border-radius:999px;font-size:0.8rem;color:#00112a;background:var(--primary);font-weight:700;margin-bottom:0.75rem}
.card.tutor .role-badge{background:#7adfff;color:#001426}
.signup-brief{color:var(--muted);margin-bottom:0.75rem}
.helper-list{margin:0.5rem 0 1rem 0;padding-left:1.15rem;color:var(--muted)}

.btn.secondary{background:#111827;color:var(--text);border:1px solid rgba(255,255,255,0.06)}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{flex-direction:column-reverse}
  .hero-art{width:100%;flex-direction:column;align-items:stretch}
  .about-inner{flex-direction:column}
  .help-panel{max-width:none;width:100%}
  .help-panel .help-chips{grid-template-columns:1fr 1fr}
  .signup-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .reviews-featured{grid-template-columns:1fr}
}

@media (max-width:700px){
  .nav-inner{flex-wrap:nowrap}
  .nav-toggle{display:block;order:initial}
  .logo{width:auto;order:initial;padding-bottom:0;border-bottom:none}
  .logo img{height:36px}
  .nav-auth{order:initial}
  .nav-links{position:fixed;right:0;top:64px;background:var(--surface);height:calc(100vh - 64px);width:220px;flex-direction:column;align-items:stretch;gap:0;padding:1rem;transform:translateX(100%);transition:transform 300ms}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{padding:0.85rem 0.5rem}
  .nav-links a.active::after,
  .nav-links a[aria-current="page"]::after{left:0;right:auto;top:0;bottom:0;width:3px;height:auto;border-radius:2px}
  .nav-badge{bottom:auto;top:0.6rem;right:0.4rem}
  .hero-inner{flex-direction:column-reverse}
  .hero-copy{max-width:100%}
  .hero-art{width:100%}
  .help-panel{margin-top:1.5rem}
}

@media (max-width:420px){
  .hero{padding:3rem 0}
  .hero-copy h1{font-size:1.5rem}
}

.faq-grid{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:1rem;margin-top:1.5rem}
.faq-item{background:var(--surface);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:1.2rem;transition:background 200ms ease}
.faq-item summary{list-style:none;cursor:pointer;font-weight:700;color:#f8fbff;position:relative;padding-right:1.4rem}
.faq-item summary::marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:0;top:0;color:var(--muted);font-size:1.1rem}
.faq-item[open] summary::after{content:'−'}
.faq-item p{margin:0.85rem 0 0;color:var(--muted);line-height:1.75}

@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr}
}

@keyframes floatA {
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(2px,-5px)}
  50%{transform:translate(4px,0)}
  75%{transform:translate(2px,4px)}
}
@keyframes floatB {
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-2px,-4px)}
  50%{transform:translate(-4px,2px)}
  80%{transform:translate(-2px,4px)}
}
@keyframes floatC {
  0%,100%{transform:translate(0,0)}
  30%{transform:translate(3px,-3px)}
  55%{transform:translate(-3px,2px)}
  85%{transform:translate(2px,3px)}
}
@keyframes floatD {
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-3px,-5px)}
  50%{transform:translate(-5px,1px)}
  75%{transform:translate(-2px,5px)}
}
@keyframes floatE {
  0%,100%{transform:translate(0,0)}
  30%{transform:translate(2px,-6px)}
  60%{transform:translate(4px,1px)}
  90%{transform:translate(1px,5px)}
}

/* utility */
html{scroll-behavior:smooth}

/* Toast notifications (replaces blocking alert() popups for non-critical confirmations) */
.toast-stack{position:fixed;top:1.25rem;right:1.25rem;z-index:3000;display:flex;flex-direction:column;gap:0.6rem;pointer-events:none}
.toast{pointer-events:auto;min-width:280px;max-width:360px;padding:0.9rem 1rem;border-radius:16px;background:rgba(3,18,41,0.98);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.1);box-shadow:0 20px 45px rgba(0,0,0,0.4);color:#f0f8ff;font-size:0.92rem;font-weight:600;line-height:1.5;display:flex;align-items:flex-start;gap:0.65rem;opacity:0;transform:translateX(18px);transition:opacity 220ms ease, transform 220ms ease}
.toast.show{opacity:1;transform:translateX(0)}
.toast-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.8rem;margin-top:0.05rem}
.toast.success{border-color:rgba(56,217,128,0.3)}
.toast.success .toast-icon{background:rgba(56,217,128,0.2);color:#6dfcac}
.toast.error{border-color:rgba(255,77,77,0.3)}
.toast.error .toast-icon{background:rgba(255,77,77,0.2);color:#ffb3b3}
.toast.info .toast-icon{background:rgba(61,227,245,0.2);color:#8fc7ff}
.toast-msg{flex:1}
.toast-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.05rem;line-height:1;padding:0;flex-shrink:0}
@media (max-width:480px){ .toast-stack{left:1rem;right:1rem;top:1rem} .toast{max-width:none;min-width:0} }

/* Search results layout */
.tutor-list{display:flex;flex-direction:column;gap:2.2rem;margin-top:1.5rem}
.tutor-item{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:1.4rem;border-radius:16px;border:1px solid rgba(255,255,255,0.03);display:flex;gap:1.2rem;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,0.7);min-height:168px}
.tutor-avatar{width:104px;height:104px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;color:var(--text);font-weight:900;font-size:28px;overflow:hidden;flex-shrink:0}
.tutor-avatar-img{width:100%;height:100%;object-fit:cover}
.tutor-meta{flex:1}
.tutor-meta h4{margin:0;font-size:1.2rem}
/* The university is the platform's core trust signal, so it gets its own distinct,
   colour-coded badge — same palette as the homepage's "our tutors hold offers from" chips,
   for a consistent visual language between the two. Extra padding/margin here vs. the other
   badges deliberately gives it (and the course line below) room to breathe rather than
   crowding straight into the name above or the verified/session badges below. */
.tutor-uni-badge{display:inline-block;padding:0.4rem 1rem;border-radius:999px;font-weight:800;font-size:0.85rem;border:1px solid rgba(255,255,255,0.14);color:var(--text);background:rgba(255,255,255,0.05)}
.tutor-uni-badge.uni-oxford{color:#6d8bef;background:rgba(31,58,138,0.16);border-color:rgba(109,139,239,0.35)}
.tutor-uni-badge.uni-cambridge{color:#7fe0f0;background:rgba(24,120,133,0.16);border-color:rgba(127,224,240,0.35)}
.tutor-uni-badge.uni-imperial{color:#2f9bef;background:rgba(0,80,158,0.18);border-color:rgba(47,155,239,0.4)}
.tutor-uni-badge.uni-lse{color:#e0576f;background:rgba(150,30,50,0.18);border-color:rgba(224,87,111,0.4)}
.tutor-uni-badge.uni-kings{color:#ff4d5e;background:rgba(180,20,30,0.2);border-color:rgba(255,77,94,0.45)}
.tutor-uni-badge.uni-ucl{color:#b18aff;background:rgba(90,40,160,0.18);border-color:rgba(177,138,255,0.4)}
.tutor-uni-badge.uni-warwick{color:#e8b84b;background:rgba(120,90,10,0.18);border-color:rgba(232,184,75,0.4)}
.tutor-uni-badge.uni-edinburgh{color:#8ea0ff;background:rgba(40,50,140,0.18);border-color:rgba(142,160,255,0.4)}
.tutor-uni-badge.uni-bristol{color:#ff8bc4;background:rgba(140,20,80,0.18);border-color:rgba(255,139,196,0.4)}
/* Left-aligned rather than true-centred — centring shifted short names/badges sideways
   relative to whichever sibling happened to be widest, which read as oddly off-place. Flush
   left keeps name/university/course on one predictable, shared starting edge instead. */
.tutor-academic-block{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0.5rem;margin-bottom:0.7rem}
/* Bolder and brighter than plain muted text — the course is worth noticing at a glance, just
   one step quieter than the university badge above it. A small book icon marks it clearly as
   "field of study", so it doesn't read as an ambiguous second line under the university. */
.tutor-academic-status{display:flex;align-items:center;gap:0.4rem;margin:0;color:var(--text);font-weight:800;font-size:1rem;line-height:1.5}
.tutor-academic-status svg{width:15px;height:15px;flex-shrink:0;color:var(--muted)}
.tutor-badge-row{display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.6rem}
/* Price now lives in its own column at the far right of the card, past the grades — kept quiet
   (plain text, no pill/colour fill) so it reads as a detail rather than shouting for attention. */
.tutor-price{flex-shrink:0;align-self:stretch;display:flex;align-items:center;padding-left:1.3rem;margin-left:0.4rem;border-left:1px solid rgba(255,255,255,0.08)}
.tutor-price .rate-badge{background:transparent;border:none;padding:0;color:var(--muted);font-size:1.05rem;font-weight:700;white-space:nowrap}
/* A discount breaks from the otherwise-quiet price styling on purpose — original struck through
   in plain readable grey, ample space, then the new price bigger and brighter. No badge/label —
   the two numbers next to each other already make the discount obvious.
   Compound selector (not just .rate-badge-discounted) deliberately outweighs the unrelated
   .rate-badge pill-badge rule below, which also sets display and would otherwise win by being
   later in the file despite matching the same element here. */
.rate-badge.rate-badge-discounted{display:flex;align-items:baseline;gap:1rem}
.rate-badge-discounted .rate-original{color:var(--muted);text-decoration:line-through;font-size:0.9rem;font-weight:600}
.rate-badge-discounted .rate-final{color:#6dfcac;font-weight:800;font-size:1.2rem}
.tutor-meta p{margin:0;color:var(--muted);font-size:1rem}
.tutor-meta .subjects{margin-top:0.45rem;color:var(--muted);font-weight:600;font-size:0.95rem}
/* Permanent right-hand column on the compact card — uses the space that used to sit empty
   until a card was expanded, so a tutor's achieved grades are visible at a glance. */
/* Fixed (not min/max-range) width so every tutor's grades column lines up at the same size
   regardless of how many results they have — otherwise a tutor with 1 result and one with 6
   would have visibly different card widths. Wide enough that a typical handful of results (up
   to ~6 tiles) wraps to 2 rows rather than 3. */
.tutor-stats{flex-shrink:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:0.6rem;padding-left:1.3rem;margin-left:0.4rem;border-left:1px solid rgba(255,255,255,0.08);width:320px}
.tutor-stats-title{display:flex;align-items:center;gap:0.35rem;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:#6dfcac}
.tutor-stats-title svg{width:14px;height:14px;flex-shrink:0}
.tutor-stat-grid{display:flex;flex-wrap:wrap;gap:0.5rem}
.tutor-stat{display:flex;flex-direction:column;align-items:flex-start;gap:0.15rem;padding:0.5rem 0.8rem;border-radius:12px;border:1px solid transparent;min-width:68px}
/* A Levels green, admissions tests blue — consistent throughout (here and in the expanded Test
   scores breakdown below), not one uniform colour for every kind of result. */
.tutor-stat-alevel{background:rgba(56,217,128,0.1);border-color:rgba(56,217,128,0.28)}
.tutor-stat-alevel .tutor-stat-value{color:#6dfcac}
.tutor-stat-admissions{background:rgba(64,156,255,0.12);border-color:rgba(64,156,255,0.32)}
.tutor-stat-admissions .tutor-stat-value{color:#5eb3ff}
.tutor-stat-value{font-size:1.3rem;font-weight:900;line-height:1}
.tutor-stat-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;color:var(--muted);white-space:nowrap}
.tutor-stats-empty .tutor-stats-title{color:var(--muted)}
.tutor-stats-empty-note{margin:0;color:var(--muted);font-size:0.82rem;font-style:italic}
/* The expanded panel's "Test scores" breakdown already covers everything in this column
   (plus predicted results), so hide the duplicate once a card opens. */
.tutor-item.expanded .tutor-stats{display:none}
.verified-badge{display:inline-block;padding:0.22rem 0.6rem;background:linear-gradient(90deg, rgba(61,227,245,0.14), rgba(122,215,255,0.08));color:var(--text);border-radius:999px;font-weight:800;font-size:0.78rem}
.rate-badge{display:inline-block;padding:0.3rem 0.75rem;background:rgba(56,217,128,0.14);color:#6dfcac;border-radius:999px;font-weight:800;font-size:0.94rem}
.session-count-badge{display:inline-block;padding:0.3rem 0.75rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:var(--muted);border-radius:999px;font-weight:700;font-size:0.82rem}

.tutor-item.best{border-left:6px solid rgba(109,208,255,0.18);background:linear-gradient(90deg, rgba(61,227,245,0.04), rgba(255,255,255,0.01));box-shadow:0 18px 40px rgba(0,0,0,0.75);transform:scale(1.01)}
.tutor-item .cta-wrap{display:flex;gap:0.6rem;align-items:center}
.tutor-item .tutor-score{font-size:0.9rem;color:#aee9ff;font-weight:800;background:rgba(10,40,60,0.3);padding:0.25rem 0.5rem;border-radius:8px}

/* Search hero */
.search-hero{background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);padding:2rem;border-radius:18px;border:1px solid rgba(255,255,255,0.02);box-shadow:0 14px 40px rgba(0,0,0,0.6)}
.search-row{display:flex;gap:0.8rem;align-items:center;max-width:1100px;margin:0 auto}
.search-input-wrapper{display:flex;align-items:center;gap:0.8rem;flex:1;position:relative;padding:6px;border-radius:18px;background:linear-gradient(90deg, rgba(61,227,245,0.02), rgba(255,255,255,0.003));box-shadow:0 10px 30px rgba(2,17,38,0.6)}
.tutor-list{display:flex;flex-direction:column;gap:2.2rem;margin-top:1.5rem}
.tutor-item{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:1.4rem;border-radius:16px;border:1px solid rgba(255,255,255,0.03);display:flex;gap:1.2rem;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,0.7);min-height:140px}

/* Exam spotlight section */
.exam-spotlight .exam-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:1.2rem;margin-top:1.5rem}
.exam-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.08);border-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,0.35);padding:1.75rem;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;transition:transform 220ms ease, box-shadow 220ms ease}
.exam-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,0.45)}
.exam-card h3{margin:0 0 0.75rem;font-size:1.2rem}
.exam-card p{margin:0 0 1rem;color:var(--muted);line-height:1.7}
.exam-card ul{margin:0;padding-left:1.15rem;color:var(--text)}
.exam-card li{margin-bottom:0.7rem;font-size:0.98rem}
.exam-card-icon{width:48px;height:48px;border-radius:13px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
.exam-card-icon svg{width:25px;height:25px;color:#fff}
.exam-card.tmua{background:linear-gradient(180deg, rgba(12,33,65,0.9), rgba(29,89,160,0.85));border-color:rgba(96,148,255,0.25)}
.exam-card.ucat{background:linear-gradient(180deg, rgba(14,41,53,0.9), rgba(43,113,159,0.85));border-color:rgba(90,179,255,0.25)}
.exam-card.tmua h3,
.exam-card.ucat h3{color:#ffffff}
.exam-card.tmua p,
.exam-card.ucat p,
.exam-card li{color:rgba(255,255,255,0.8)}

@media (max-width:900px){
  .exam-spotlight .exam-grid{grid-template-columns:1fr}
}

/* Admin dashboard */
.admin-gate{display:flex;justify-content:center;padding:3rem 0}
.admin-gate-card{max-width:380px;width:100%;text-align:center}
.admin-gate-card label{display:block;margin:1.2rem 0 1rem;text-align:left;color:var(--muted)}
.admin-gate-card input{width:100%;padding:0.75rem 0.85rem;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:#fff;outline:none;margin-top:0.4rem}
.admin-gate-card .btn{width:100%}
.admin-tabs{display:flex;gap:0.5rem;flex-wrap:wrap;margin:1.5rem 0 2rem;border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:0.5rem}
.admin-tab{background:none;border:none;color:var(--muted);font-weight:700;font-size:0.95rem;padding:0.6rem 1rem;border-radius:10px;cursor:pointer;transition:background 150ms ease,color 150ms ease}
.admin-tab:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.admin-tab.active{color:#fff;background:rgba(61,227,245,0.16)}
.admin-panel-lead{color:var(--muted);margin:0.3rem 0 1.5rem}
.admin-tutor-card{margin-bottom:1.1rem}
.admin-tutor-head{display:flex;align-items:center;gap:1rem;margin-bottom:0.7rem}
.admin-tutor-avatar{width:56px;height:56px;font-size:1.1rem;border-radius:12px}
.admin-tutor-head h4{margin:0 0 0.4rem;font-size:1.05rem}
.admin-tutor-tags{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap}
.admin-course{font-weight:700;color:var(--text);font-size:0.85rem}
.admin-tutor-meta{margin:0 0 0.5rem;color:var(--muted);font-size:0.92rem}
.admin-tutor-about{margin:0 0 0.8rem;color:var(--muted);font-size:0.9rem;line-height:1.5}
.admin-tutor-actions{display:flex;gap:0.6rem;flex-wrap:wrap}
.admin-tutor-actions .reject-btn{background:rgba(255,77,77,0.12);border:1px solid rgba(255,77,77,0.25);color:#ffb3b3}
.admin-tutor-actions .reject-btn:hover{background:rgba(255,77,77,0.2)}
.admin-review-card{margin-bottom:1.1rem}
.admin-review-quote{margin:0 0 0.6rem;color:var(--text);font-size:0.95rem;line-height:1.55;font-style:italic}
.admin-review-attribution{margin:0 0 0.9rem;color:var(--muted);font-size:0.88rem;display:flex;flex-wrap:wrap;gap:0.5rem;align-items:baseline}
.admin-review-source{font-size:0.78rem;color:rgba(255,255,255,0.4)}
.admin-list{border:1px solid rgba(255,255,255,0.08);border-radius:14px;overflow:hidden}
.admin-list-row{display:grid;grid-template-columns:1.3fr 1.3fr 1fr 0.8fr 0.9fr;gap:0.8rem;padding:0.8rem 1rem;border-bottom:1px solid rgba(255,255,255,0.06);font-size:0.92rem;align-items:center}
.admin-list-row-3{grid-template-columns:1.3fr 1.3fr 1fr}
.admin-list-row:last-child{border-bottom:none}
.tutor-pricing-toggle.has-override{border-color:rgba(56,217,128,0.4);color:#6dfcac}
.admin-pricing-panel{display:flex;flex-wrap:wrap;gap:0.9rem;align-items:flex-end;margin-top:0.8rem;padding:0.9rem 1rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px}
.admin-pricing-panel label{display:flex;flex-direction:column;gap:0.35rem;font-size:0.78rem;color:var(--muted);font-weight:600}
.admin-pricing-panel input{padding:0.55rem 0.65rem;border-radius:10px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);color:#fff;outline:none;width:150px}
.admin-tutor-pricing-row{margin-bottom:1rem}
.admin-tutor-pricing-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.admin-tutor-pricing-head h4{margin:0;font-size:1.05rem}
.admin-tutor-pricing-rate{color:var(--muted);font-size:0.88rem;white-space:nowrap}
.admin-list-head{background:rgba(255,255,255,0.03);color:var(--muted);font-weight:700;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em}
.admin-status-tag{display:inline-block;padding:0.2rem 0.6rem;border-radius:999px;font-size:0.75rem;font-weight:800;text-align:center;width:fit-content}
.admin-status-tag.paid{background:rgba(56,217,128,0.16);color:#6dfcac}
.admin-status-tag.confirmed{background:rgba(143,109,255,0.16);color:#c3b2ff}
.admin-settings-card{max-width:640px}
.admin-settings-card input[type="number"],
.admin-settings-card input[type="text"]{width:100%;padding:0.75rem 0.85rem;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:#ffffff;outline:none;margin-top:0.4rem}
.admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.admin-stat-tile{background:var(--surface);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:0.35rem}
.admin-stat-value{font-size:1.5rem;font-weight:900;color:#fff}
.admin-stat-label{color:var(--muted);font-size:0.82rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em}
.admin-stat-positive .admin-stat-value{color:#6dfcac}
.admin-stat-negative .admin-stat-value{color:#ff8080}
@media (max-width:700px){
  .admin-list-row{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .admin-list-head{display:none}
}

/* Expand on hover / tap to reveal more info.
   This used to grow the card's own box in normal flow (bigger padding, a taller avatar, and the
   "extra" panel's max-height animating 0→400px) — every one of those is a real layout resize,
   which pushes the cards below it down the page too. A resize under a *stationary* mouse is
   exactly what causes an unprompted bounce loop: growing can move the card's own edge down past
   a mouse sitting just below it, which re-triggers hover, which un-triggers it once it later
   collapses back, forever. (This was on top of an earlier, separate bug — the whole card used
   to lift+scale via transform and jump to z-index:1200, high enough to render over the sticky
   nav — already fixed below by dropping the transform and keeping z-index low.)
   The fix here is structural: the card's own box never changes size on hover any more. The
   "extra" info instead drops down as an absolutely-positioned panel below the card, which
   doesn't push anything and can't grow into a stationary cursor sitting outside it. */
.tutor-item{position:relative;overflow:visible}
.tutor-item .tutor-summary{flex:1;display:flex;gap:1rem;align-items:center}
.tutor-item .tutor-extra{
  position:absolute;left:0;right:0;top:100%;
  max-height:0;opacity:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg, rgba(18,22,28,0.98), rgba(9,12,17,0.98));
  border:1px solid rgba(255,255,255,0.07);border-top:0;
  border-radius:0 0 16px 16px;
  box-shadow:0 24px 50px rgba(0,0,0,0.6);
  padding:0 1.4rem;
  color:var(--muted);
  transition:max-height 200ms cubic-bezier(.2,.9,.2,1), opacity 150ms, padding 150ms;
}
.tutor-item{transition:box-shadow 320ms ease}
.tutor-item.expanded{box-shadow:0 20px 45px rgba(0,0,0,0.7);z-index:2}
.tutor-item.expanded .tutor-extra{max-height:400px;opacity:1;overflow:auto;padding:1rem 1.4rem 1.4rem;pointer-events:auto}
.tutor-item.expanded .request-area{justify-content:flex-end;margin-top:0.8rem}

/* On small screens keep the dropdown panel readable without covering the whole list below it */
@media (max-width:700px){
  .tutor-item.expanded .tutor-extra{max-height:60vh}
}
.tutor-extra .about-title{font-weight:700;color:var(--text);margin-bottom:0.25rem}
.tutor-extra .about-text{margin:0 0 0.6rem;color:var(--muted)}
.tutor-extra .grades{font-weight:700;color:#aee9ff;margin-bottom:0.6rem}
.tutor-item .request-area{display:flex;justify-content:flex-end}
.search-input-wrapper svg{width:24px;height:24px;color:var(--muted);flex-shrink:0;margin-left:0.9rem}
.search-input{flex:1;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--text);border-radius:999px;padding:1.2rem 1.6rem;border:1px solid rgba(109,208,255,0.06);font-size:1.25rem;height:88px;box-shadow:0 12px 40px rgba(2,17,38,0.7);transition:all 220ms ease}
.search-input::placeholder{color:rgba(238,246,252,0.6);font-size:1.08rem}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3.5rem 1.5rem;color:var(--muted);gap:0.9rem}
.empty-state svg{width:44px;height:44px;color:rgba(255,255,255,0.16)}
.empty-state p{margin:0;font-size:1.02rem}
.tutors-loading{display:flex;align-items:center;justify-content:center;gap:0.7rem;padding:3.5rem 1.5rem;color:var(--muted);font-size:1.02rem}
.spinner{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,0.14);border-top-color:var(--primary);animation:spin 700ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.search-input:focus{outline:none;box-shadow:0 24px 60px rgba(61,227,245,0.18), 0 0 0 8px rgba(61,227,245,0.06);transform:translateY(-3px)}
.search-input:hover{box-shadow:0 18px 50px rgba(61,227,245,0.12), 0 0 0 4px rgba(61,227,245,0.03);transform:translateY(-2px)}

.tailor-hint{color:rgba(174,233,255,0.65);font-size:0.95rem;margin-top:0.65rem;margin-left:6px;font-style:italic}

@media (max-width:900px){
  .search-row{flex-direction:column;align-items:stretch}
}
.no-results-note{color:var(--muted);font-style:italic;margin-top:0.6rem}

@media (max-width:700px){
  .tutor-item{align-items:flex-start}
  .tutor-avatar{width:48px;height:48px}
  .tutor-item .tutor-summary{flex-wrap:wrap}
  .tutor-stats{border-left:0;border-top:1px solid rgba(255,255,255,0.08);padding-left:0;padding-top:0.6rem;margin-left:0;margin-top:0.6rem;width:100%;max-width:none}
  .tutor-price{border-left:0;border-top:1px solid rgba(255,255,255,0.08);padding-left:0;padding-top:0.6rem;margin-left:0;margin-top:0.6rem;width:100%}
}