/* =====================================================================
   SPARK — "Ember" design system
   Dark, warm, interactive. Display: Bricolage Grotesque · Body: Figtree · Mono: JetBrains Mono
   ===================================================================== */
:root {
  --bg: #0c0b0d;
  --bg-2: #131216;
  --surface: rgba(24, 22, 27, .82);
  --surface-solid: #18161b;
  --surface-2: #211e25;
  --line: rgba(var(--tint), .09);
  --line-2: rgba(var(--tint), .17);
  --text: #f5efe6;
  --text-2: #cfc7bb;
  --muted: #a39b8f;
  --faint: #6f695f;
  --ember: #ff5a36;
  --amber: #ffb340;
  --sun: #ffd978;
  --rose: #ff3f7f;
  --on-ember: #1b0b05;
  --grad: linear-gradient(115deg, #ff5a36 0%, #ff8a3d 48%, #ffcf6e 100%);
  --glow: 0 0 0 1px rgba(255, 140, 70, .35), 0 12px 40px -10px rgba(255, 90, 54, .55);
  --ring: 0 0 0 3px rgba(255, 140, 60, .32);
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
  --ok: #4ade80; --warn: #fbbf24; --bad: #fb7185; --info: #60a5fa; --cyan: #22d3ee;
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Figtree', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --mx: 50%; --my: 50%;
  --tint: 255, 244, 230; --gold: #ffcf6e;
  --shadow-c: var(--shadow-c);
  --nav-bg: rgba(12, 11, 13, .66); --nav-collapse-bg: rgba(20, 18, 23, .96);
  --marquee-bg: rgba(12, 11, 13, .55); --band-bg: rgba(8, 7, 9, .55); --footer-bg: rgba(8, 7, 9, .7);
  --inset-bg: rgba(0, 0, 0, .22); --select-bg: #1a181d;
  --btn-dark-bg: #f5efe6; --btn-dark-fg: #17120d; --btn-dark-hover: #fff;
  --grad-text: linear-gradient(115deg, #ff5a36 0%, #ff8a3d 48%, #ffcf6e 100%);
  --stroke-num: rgba(255, 179, 64, .55);
  color-scheme: dark;
}
[data-bs-theme] {
  --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-body-font-family: var(--font-body);
  --bs-border-color: var(--line); --bs-link-color: var(--amber); --bs-link-hover-color: var(--sun);
  --bs-secondary-color: var(--muted); --bs-emphasis-color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { position: relative; margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
::selection { background: var(--ember); color: #fff; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--text); letter-spacing: -.03em; line-height: 1.08; }
p { color: var(--text-2); }
code { color: var(--sun); }
small { color: inherit; }

/* ---------- Live backdrop (grid, glow, grain, canvas) ---------- */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .55;
  -webkit-mask: radial-gradient(ellipse 75% 65% at 50% 28%, #000 20%, transparent 78%); mask: radial-gradient(ellipse 75% 65% at 50% 28%, #000 20%, transparent 78%); }
body::after { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fx-glow { position: fixed; z-index: 0; top: 0; left: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none; opacity: .0;
  background: radial-gradient(circle closest-side, rgba(255, 110, 50, .2), rgba(255, 170, 60, .07) 50%, transparent 100%); transition: opacity .6s; will-change: transform; }
.fx-glow.on { opacity: 1; }
.fx-progress { position: fixed; z-index: 1100; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; background: var(--grad); pointer-events: none; }
.fx-spark { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.site-nav, .page-container, .site-footer, main, section, footer { position: relative; z-index: 1; }

/* ---------- Navigation ---------- */
.site-nav { position: sticky; top: 0; z-index: 1050; min-height: 68px; padding: 10px 0; background: var(--nav-bg); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); transition: background .3s, border-color .3s; }
.site-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.04em; line-height: 1; text-decoration: none; }
.site-brand:hover { color: var(--text); }
.brand-mark { position: relative; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: var(--grad); box-shadow: 0 6px 18px -6px rgba(255, 90, 54, .8), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.site-brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); }
.brand-mark svg { width: 24px; stroke: var(--on-ember); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-nav .nav-link { position: relative; padding: 9px 13px !important; color: var(--muted); font-size: 14px; font-weight: 600; transition: color .2s; }
.site-nav .nav-link:not(.nav-cta)::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.site-nav .nav-link:not(.nav-cta):hover { color: var(--text); }
.site-nav .nav-link:not(.nav-cta):hover::after { transform: scaleX(1); }
.site-nav .nav-cta { margin-left: 8px; padding: 10px 18px !important; border: 0; border-radius: var(--r-md); background: var(--grad); color: var(--on-ember) !important; font-family: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 8px 22px -8px rgba(255, 90, 54, .8); transition: transform .2s, box-shadow .2s; }
.site-nav .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(255, 90, 54, .9); }
.nav-role { margin-right: 6px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--amber); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.notification-count { display: inline-grid; min-width: 19px; height: 19px; margin-left: 7px; place-items: center; padding: 0 5px; border-radius: 6px; background: var(--ember); color: #fff; font-size: 10px; font-weight: 800; }
.navbar-toggler { border-color: var(--line-2); }
.navbar-toggler:focus { box-shadow: var(--ring); }
.navbar-toggler-icon { filter: invert(1) brightness(1.6); }
.navbar-logout-form, .remove-slot-form, .action-cell form, .delete-account-form { margin: 0; }
.page-container { min-height: calc(100vh - 68px); }
.flash-container { position: relative; z-index: 12; max-width: 1160px; }
.flash-container:empty { display: none; }
.alert { margin-top: 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-solid); color: var(--text); }
body.landing-page .site-nav { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.landing-page.is-scrolled .site-nav { background: var(--nav-bg); border-bottom-color: var(--line); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--nav-collapse-bg); }
  .site-nav .nav-cta { display: inline-flex; width: fit-content; margin: 6px 0 2px; }
  .nav-role { display: inline-block; width: fit-content; margin: 4px 0; }
}

/* ---------- Shared bits ---------- */
.eyebrow { display: flex; align-items: center; gap: 11px; color: var(--amber); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow-light { display: inline-flex; width: fit-content; padding: 7px 13px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(var(--tint), .05); color: var(--text-2); }
.eyebrow-dash { display: inline-block; flex: 0 0 auto; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); }
.live-dot { position: relative; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--ember); box-shadow: 0 0 12px var(--ember); }
.live-dot::after { position: absolute; inset: -4px; border: 1px solid var(--ember); border-radius: 50%; content: ''; animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
.grad-text, h1 em, h2 em { font-style: italic; font-weight: 700; background: var(--grad-text); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 7s linear infinite; }
em .rb-word { background: var(--grad-text); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes flow { to { background-position: 200% 0; } }

.button { position: relative; display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; overflow: hidden; border: 1px solid transparent; border-radius: var(--r-md); font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s, border-color .2s, box-shadow .25s; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: scale(.98); }
.button:focus-visible { outline: 0; box-shadow: var(--ring); }
.button:disabled, .button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.button::after { content: ""; position: absolute; inset: 0; transform: translateX(-130%); pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); }
.button:not(:disabled):hover::after { transform: translateX(130%); transition: transform .8s ease; }
.button-lime { background: var(--grad); color: var(--on-ember); box-shadow: var(--glow); }
.button-lime:hover { color: var(--on-ember); box-shadow: 0 0 0 1px rgba(255, 170, 90, .6), 0 18px 46px -10px rgba(255, 90, 54, .8); }
.button-dark { background: var(--btn-dark-bg); color: var(--btn-dark-fg); }
.button-dark:hover { background: var(--btn-dark-hover); color: var(--btn-dark-fg); box-shadow: 0 14px 34px -12px rgba(var(--tint), .6); }
.button-glass { border-color: var(--line-2); background: rgba(var(--tint), .05); color: var(--text); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.button-glass:hover { border-color: rgba(255, 190, 120, .55); background: rgba(255, 150, 70, .1); color: var(--text); }
.button-outline { border-color: var(--line-2); background: transparent; color: var(--text); }
.button-outline:hover { border-color: var(--amber); background: rgba(255, 179, 64, .08); color: var(--sun); }
.button-danger { border-color: rgba(251, 113, 133, .35); background: rgba(251, 113, 133, .1); color: #ffb0bc; }
.button-danger:hover { border-color: var(--bad); background: rgba(251, 113, 133, .2); color: #ffd3da; }
.button-small { min-height: 36px; gap: 8px; padding: 0 14px; font-size: 12.5px; }
.text-link { display: inline-flex; gap: 10px; align-items: center; padding-bottom: 5px; border-bottom: 2px solid var(--ember); color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; transition: gap .25s, color .25s; }
.text-link:hover { gap: 16px; color: var(--sun); }
.back-link { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; transition: color .2s, gap .2s; }
.back-link:hover { gap: 13px; color: var(--sun); }

/* ---------- Landing ---------- */
.landing-page .page-container { min-height: 100vh; }
.hero { position: relative; display: flex; min-height: 100svh; align-items: center; padding: 130px 0 90px; overflow: hidden; isolation: isolate; }
.hero-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; will-change: transform; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.hero-orb-a { top: -8%; right: -6%; width: 46vmax; height: 46vmax; background: radial-gradient(circle, rgba(255, 90, 54, .34), transparent 65%); }
.hero-orb-b { bottom: -22%; left: -12%; width: 40vmax; height: 40vmax; background: radial-gradient(circle, rgba(255, 63, 127, .2), transparent 65%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: center; }
.hero-copy { max-width: 780px; }
.hero h1 { margin: 26px 0 24px; font-size: clamp(54px, 9vw, 132px); font-weight: 800; line-height: .9; letter-spacing: -.055em; }
.hero h1 em { padding-right: .06em; }
.hero-lede { max-width: 540px; margin: 0; color: var(--text-2); font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { display: flex; align-items: center; gap: 13px; margin-top: 44px; color: var(--muted); font-size: 13px; }
.avatar-stack { display: inline-flex; padding-left: 2px; }
.avatar-stack span { display: grid; width: 30px; height: 30px; margin-left: -8px; place-items: center; border: 2px solid var(--bg); border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 11px; font-weight: 800; }
.avatar-stack span:nth-child(1) { background: #ff5a36; color: #1b0b05; }
.avatar-stack span:nth-child(2) { background: #ffb340; color: #1b0b05; }
.avatar-stack span:nth-child(3) { background: #ff3f7f; color: #fff; }
.picker { position: relative; padding: 26px; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--surface); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 40px 80px -30px var(--shadow-c); }
.picker::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 130, 60, .16), transparent 60%); }
.picker > * { position: relative; }
.picker-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.picker h2 { margin: 12px 0 6px; font-size: 26px; font-weight: 700; }
.picker p { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }
.picker-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.picker-chip { padding: 8px 13px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(var(--tint), .03); color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .2s, border-color .2s, background .2s, color .2s; }
.picker-chip:hover { transform: translateY(-2px); border-color: var(--amber); color: var(--text); }
.picker-chip.is-on { border-color: transparent; background: var(--grad); color: var(--on-ember); box-shadow: 0 8px 20px -8px rgba(255, 90, 54, .8); }
.picker-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: rgba(var(--tint), .03); }
.picker-result strong { display: block; color: var(--text); font-size: 14px; }
.picker-result > div > span { color: var(--muted); font-size: 12px; }
.picker-result strong span { color: var(--amber); }
.picker-result .button { flex: 0 0 auto; }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; display: flex; align-items: center; gap: 10px; transform: translateX(-50%); color: var(--faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.scroll-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--amber), transparent); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.rd-marquee { position: relative; overflow: hidden; padding: 22px 0; border-block: 1px solid var(--line); background: var(--marquee-bg); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.rd-marquee-track { display: flex; width: max-content; animation: marq 42s linear infinite; }
.rd-marquee:hover .rd-marquee-track { animation-play-state: paused; }
.rd-marquee-group { display: flex; gap: 12px; padding-right: 12px; }
.rd-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--text-2); font-size: 14px; font-weight: 600; white-space: nowrap; transition: border-color .2s, color .2s; }
.rd-chip::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--grad); transform: rotate(45deg); }
.rd-chip:hover { border-color: var(--amber); color: var(--sun); }
@keyframes marq { to { transform: translateX(-50%); } }

.story-section, .intro-section { padding: 120px 0; }
.section-heading { position: relative; max-width: 700px; margin-bottom: 54px; }
.section-heading h2, .steps-intro h2, .closing-inner h2 { margin: 18px 0 14px; font-size: clamp(38px, 5.6vw, 72px); font-weight: 800; line-height: .98; letter-spacing: -.05em; }
.section-heading > p { max-width: 500px; margin: 0; color: var(--muted); font-size: 16px; }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.story-card { position: relative; display: flex; min-height: 340px; flex-direction: column; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s; }
.story-card:hover { border-color: rgba(255, 150, 80, .5); }
.story-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(255, 110, 50, .2), transparent 60%); }
.story-card:hover::before { opacity: 1; }
.story-card > * { position: relative; }
.story-num { margin-bottom: auto; font-family: var(--font-display); font-size: 100px; font-weight: 800; line-height: .8; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.5px var(--stroke-num); transition: -webkit-text-stroke-color .3s, color .3s; }
.story-card:hover .story-num { color: rgba(255, 140, 60, .14); -webkit-text-stroke-color: var(--amber); }
.story-card h3 { margin: 38px 0 10px; font-size: 30px; font-weight: 700; line-height: 1.05; }
.story-card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.story-card .eyebrow { margin-bottom: 14px; font-size: 10px; }

.benefit-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.benefit-card { position: relative; min-height: 320px; padding: 28px 30px 32px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .25s ease, border-color .3s, box-shadow .3s; will-change: transform; }
.benefit-card:hover { border-color: rgba(255, 150, 80, .5); box-shadow: 0 30px 60px -24px rgba(255, 90, 54, .35); }
.benefit-card::before, .tutor-card::before, .metric-card::before, .step-row::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255, 120, 60, .2), transparent 62%); }
.benefit-card:hover::before, .tutor-card:hover::before, .metric-card:hover::before, .step-row:hover::before { opacity: 1; }
.benefit-card > *, .tutor-card > *, .metric-card > * { position: relative; }
.benefit-featured { border-color: rgba(255, 150, 80, .4); background: radial-gradient(480px 260px at 100% 0, rgba(255, 90, 54, .24), transparent 70%), var(--surface); }
.benefit-number { color: var(--faint); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.benefit-icon { display: grid; width: 54px; height: 54px; margin-top: 26px; place-items: center; border: 1px solid rgba(255, 150, 80, .35); border-radius: 14px; background: rgba(255, 120, 60, .1); color: var(--amber); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .3s; }
.benefit-card:hover .benefit-icon { transform: rotate(-6deg) scale(1.1); background: rgba(255, 120, 60, .2); }
.benefit-icon svg { width: 30px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.benefit-card h3 { margin: 24px 0 9px; font-size: 24px; font-weight: 700; }
.benefit-card p { max-width: 340px; margin: 0; color: var(--muted); font-size: 14.5px; }
.card-arrow, .step-arrow { transition: transform .3s, color .3s; }
.card-arrow { position: absolute; right: 26px; bottom: 24px; color: var(--faint); font-size: 22px; }
.benefit-card:hover .card-arrow, .step-row:hover .step-arrow { transform: translate(5px, -5px); color: var(--amber); }

.steps-section { padding: 120px 0; border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 90, 54, .05), transparent 50%), var(--band-bg); }
.steps-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9%; align-items: start; }
.steps-intro { position: sticky; top: 110px; }
.steps-intro > p { max-width: 380px; margin: 0 0 28px; color: var(--muted); font-size: 16px; }
.steps-list { display: grid; gap: 12px; }
.step-row { position: relative; display: grid; grid-template-columns: 52px 1fr 24px; gap: 14px; align-items: start; padding: 26px 26px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s; }
.step-row:hover { transform: translateX(8px); border-color: rgba(255, 150, 80, .5); }
.step-row > * { position: relative; }
.step-index { padding-top: 5px; color: var(--ember); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.step-row h3 { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.step-row p { max-width: 400px; margin: 0; color: var(--muted); font-size: 14px; }
.step-arrow { justify-self: end; color: var(--faint); font-size: 20px; }

.closing-section { padding: 110px 0; }
.closing-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 54px 56px; overflow: hidden; border-radius: 28px; background: radial-gradient(620px 300px at 92% 0, rgba(255, 90, 54, .35), transparent 70%), radial-gradient(480px 260px at 0 110%, rgba(255, 63, 127, .2), transparent 70%), var(--surface-solid); box-shadow: 0 50px 100px -40px rgba(255, 90, 54, .35); }
.closing-inner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--a, 0deg), transparent 0 62%, var(--ember) 80%, var(--sun) 92%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }
.closing-inner > * { position: relative; z-index: 1; }
.closing-inner > div { margin-right: auto; }
.closing-inner h2 { margin: 12px 0 0; font-size: clamp(34px, 5vw, 62px); }
.closing-spark { display: grid; width: 60px; height: 60px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255, 150, 80, .5); border-radius: 16px; color: var(--amber); font-size: 28px; animation: twirl 9s linear infinite; }
@keyframes twirl { to { transform: rotate(360deg); } }
.site-footer { padding: 30px 0; border-top: 1px solid var(--line); background: var(--footer-bg); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.footer-brand { color: var(--text); font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.footer-brand span { color: var(--ember); }
.footer-inner p { margin: 0; color: var(--faint); font-size: 13px; }
.footer-inner a { color: var(--text-2); font-size: 13px; font-weight: 700; text-decoration: none; }
.footer-inner a:hover { color: var(--sun); }

.rd-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.rd-reveal.rd-in { opacity: 1; transform: none; }
.rb-word { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.45em); transition: opacity .75s cubic-bezier(.2, .7, .2, 1), filter .75s cubic-bezier(.2, .7, .2, 1), transform .75s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 60ms); }
.rb-in .rb-word { opacity: 1; filter: none; transform: none; }
.rb-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); }
.rb-magnet { transform: translate(var(--tx, 0px), var(--ty, 0px)); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, background .2s; }
.rb-magnet:hover { transform: translate(var(--tx, 0), var(--ty, 0)) translateY(-2px); }

@media (max-width: 991.98px) {
  .hero { padding: 120px 0 90px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-grid, .benefit-grid { grid-template-columns: 1fr; }
  .story-card, .benefit-card { min-height: 0; }
  .story-num { margin-bottom: 30px; font-size: 76px; }
  .steps-layout { grid-template-columns: 1fr; gap: 40px; }
  .steps-intro { position: static; }
  .story-section, .intro-section, .steps-section { padding: 84px 0; }
  .closing-section { padding: 70px 0; }
}
@media (max-width: 767.98px) {
  .hero { padding-top: 104px; }
  .hero h1 { font-size: clamp(50px, 15vw, 84px); }
  .hero-lede { font-size: 16px; }
  .scroll-cue { display: none; }
  .closing-inner { flex-wrap: wrap; padding: 34px 26px; }
  .closing-inner > div { width: calc(100% - 80px); }
  .picker { padding: 20px; }
  .picker-result { flex-direction: column; align-items: flex-start; }
  .footer-inner { flex-wrap: wrap; }
  .footer-inner p { order: 3; width: 100%; }
}
@media (max-width: 480px) {
  .hero-actions { align-items: stretch; flex-direction: column; max-width: 300px; }
}

/* ---------- App pages ---------- */
.app-view { max-width: 1160px; padding-top: 44px; padding-bottom: 84px; }
.app-view > * { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.app-view > *:nth-child(2) { animation-delay: .06s; } .app-view > *:nth-child(3) { animation-delay: .12s; } .app-view > *:nth-child(4) { animation-delay: .18s; } .app-view > *:nth-child(n+5) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.view-heading h1 { margin: 14px 0 8px; font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; letter-spacing: -.05em; }
.view-heading > div > p { max-width: 600px; margin: 0; color: var(--muted); font-size: 15px; }
.view-heading .eyebrow { font-size: 10.5px; }
.heading-stat, .earnings-card, .admin-date { display: flex; align-items: center; gap: 12px; padding: 13px 17px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
.heading-stat { min-width: 210px; }
.earnings-card { min-width: 215px; }
.heading-stat-icon, .earnings-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: var(--grad); color: var(--on-ember); font-size: 18px; }
.heading-stat strong, .earnings-card strong { display: block; font-family: var(--font-display); font-size: 22px; line-height: 1.1; color: var(--text); }
.heading-stat small, .earnings-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 600; }
.earnings-card i { font-family: var(--font-body); font-size: 11px; font-style: normal; color: var(--muted); }
.admin-date { display: inline-flex; padding: 8px 14px; border-radius: 8px; color: var(--amber); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; }
.admin-date > span { display: none; }
.admin-date::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 54, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 90, 54, 0); } }
.admin-date a { color: inherit; }
.app-section { margin-top: 38px; }
.section-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed var(--line-2); }
.section-title-row h2, .card-heading h2 { margin: 5px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.04em; }
.section-kicker { color: var(--amber); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.quiet-count, .queue-count { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 6px; background: rgba(var(--tint), .04); color: var(--text-2); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.queue-count { border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .1); color: var(--warn); }

.surface-card, .tutor-card, .payment-card, .chat-panel, .error-card, .commission-share { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 40px -26px var(--shadow-c); }
.surface-card { padding: 26px; transition: border-color .3s; }
.surface-card:hover { border-color: var(--line-2); }
.card-body { padding: 26px; }
.table-card { padding: 6px 20px; }
.tutor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tutor-card { position: relative; display: flex; min-height: 290px; flex-direction: column; padding: 24px; overflow: hidden; transition: transform .25s ease, border-color .3s, box-shadow .3s; will-change: transform; }
.tutor-card:hover { border-color: rgba(255, 150, 80, .5); box-shadow: 0 30px 60px -28px rgba(255, 90, 54, .4); }
.tutor-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.person-mark, .mini-person, .profile-avatar { display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; background: var(--grad); color: var(--on-ember); font-family: var(--font-display); font-weight: 800; }
.person-mark { width: 46px; height: 46px; font-size: 19px; }
.mini-person { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }
.verified-pill { padding: 5px 9px; border: 1px solid rgba(74, 222, 128, .4); border-radius: 6px; background: rgba(74, 222, 128, .1); color: var(--ok); font-size: 11px; font-weight: 700; }
.verified-pill span { margin-right: 3px; }
.tutor-card h3 { margin: 18px 0 3px; font-size: 22px; font-weight: 700; }
.tutor-subjects { margin: 0 0 10px; color: var(--amber); font-size: 13px; font-weight: 700; }
.tutor-bio { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 13.5px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tutor-campus, .profile-campus { margin: -4px 0 8px; color: var(--faint); font-size: 12px; }
.tutor-rating, .profile-rating { margin-top: 12px; color: var(--sun); font-size: 13px; font-weight: 700; }
.tutor-rating > span:first-child, .profile-rating > span:first-child, .review-stars { color: var(--amber); }
.tutor-rating small, .profile-rating small { color: var(--muted); font-size: 11px; font-weight: 500; }
.rating-new { color: var(--muted); font-size: 12px; font-weight: 600; }
.profile-rating { margin: 10px 0; }
.tutor-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; }
.price-label { color: var(--muted); font-size: 12px; }
.price-label strong { color: var(--text); font-family: var(--font-display); font-size: 20px; }
.price-label small { color: var(--faint); font-size: 11px; }

.tutor-filter-panel { display: grid; grid-template-columns: minmax(190px, 1.3fr) minmax(180px, 1.2fr) minmax(140px, .9fr) minmax(140px, .9fr); gap: 12px; align-items: end; margin: 0 0 22px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); }
.filter-field { min-width: 0; }
.filter-field > label, .review-form > label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.filter-price-inputs { display: flex; gap: 6px; }
.filter-price-inputs .form-control { min-width: 0; }
.availability-toggle { display: flex; min-height: 40px; align-items: center; gap: 8px; color: var(--text-2); font-size: 12.5px; }
.availability-toggle input { width: 16px; height: 16px; accent-color: var(--ember); }
.filter-actions { display: flex; align-items: center; gap: 12px; }
.filter-clear { color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; }
.filter-clear:hover { color: var(--sun); text-decoration: underline; }
.filter-topic { min-width: 165px; }

/* Forms */
.form-control, .form-select, .input-group-text { min-height: 46px; border: 1px solid var(--line-2); border-radius: 10px; background-color: rgba(var(--tint), .04); color: var(--text); font-size: 14px; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.form-select { background-color: var(--select-bg); }
.form-select option { background: var(--select-bg); color: var(--text); }
.form-control::placeholder { color: var(--faint); }
.form-control:focus, .form-select:focus { border-color: var(--amber); background-color: rgba(var(--tint), .07); color: var(--text); box-shadow: var(--ring); }
.form-control:disabled, .form-control[readonly] { background-color: rgba(var(--tint), .02); color: var(--muted); }
textarea.form-control { min-height: 100px; resize: vertical; }
.form-label, .app-form .form-label { margin-bottom: 7px; color: var(--text-2); font-size: 13px; font-weight: 700; }
.form-text { color: var(--faint); font-size: 12px; }
.form-check-input { border-color: var(--line-2); background-color: rgba(var(--tint), .06); }
.form-check-input:checked { border-color: var(--ember); background-color: var(--ember); }
.form-check-input:focus { border-color: var(--amber); box-shadow: var(--ring); }
.label-note { margin-left: 4px; color: var(--faint); font-size: 11px; font-weight: 500; }
.input-group .form-control { border-radius: 10px 0 0 10px; }
.input-group-text { border-radius: 0 10px 10px 0; color: var(--muted); font-size: 12px; }
.form-submit { width: 100%; margin-top: 8px; }
.saved-note, .secure-note { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 16px; padding: 13px 14px; border: 1px solid rgba(255, 179, 64, .3); border-radius: var(--r-md); background: rgba(255, 179, 64, .07); color: var(--text-2); font-size: 12.5px; line-height: 1.55; }
.saved-note span, .secure-note > span { flex: 0 0 auto; color: var(--amber); font-weight: 800; }
.secure-note strong { display: block; color: var(--text); font-size: 12.5px; }
.secure-note p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.availability-form { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.card-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.card-heading-mark { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: rgba(255, 120, 60, .14); color: var(--amber); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.card-heading h2 { font-size: 22px; }

/* Tables */
.table-responsive { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text-2); --bs-table-border-color: var(--line); --bs-table-hover-bg: rgba(255, 140, 60, .07); --bs-table-hover-color: var(--text); margin: 0; font-size: 13.5px; }
.table-responsive > .table { margin: 0; }
.app-table > :not(caption) > * > * { padding: 15px 16px; border-bottom-color: var(--line); vertical-align: middle; }
.app-table thead th, .table thead th { background: rgba(var(--tint), .035); color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.app-table tbody tr { transition: background .15s; }
.app-table tbody tr:hover { background: rgba(255, 140, 60, .07); }
.app-table tbody tr:last-child > * { border-bottom: 0; }
.table-person { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-weight: 700; white-space: nowrap; }
.money-cell { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.tutor-money { color: var(--sun) !important; font-weight: 700; }
.owner-money { color: var(--ember) !important; font-weight: 700; }
.metric-money { font-variant-numeric: tabular-nums; }
.status-badge, .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid transparent; border-radius: 6px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.badge.text-bg-success { background: rgba(74, 222, 128, .12) !important; color: var(--ok) !important; border-color: rgba(74, 222, 128, .35); }
.badge.text-bg-warning { background: rgba(251, 191, 36, .12) !important; color: var(--warn) !important; border-color: rgba(251, 191, 36, .35); }
.badge.text-bg-danger { background: rgba(251, 113, 133, .12) !important; color: var(--bad) !important; border-color: rgba(251, 113, 133, .35); }
.badge.text-bg-info { background: rgba(96, 165, 250, .12) !important; color: var(--info) !important; border-color: rgba(96, 165, 250, .35); }
.badge.text-bg-secondary { background: rgba(var(--tint), .07) !important; color: var(--text-2) !important; border-color: var(--line-2); }
.action-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 120px; }
.role-change, .remove-slot-form .remove-link { padding: 0; border: 0; background: transparent; color: var(--amber); font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.role-change:hover { color: var(--sun); text-decoration: underline; }
.remove-link { color: var(--bad); font-size: 12px; font-weight: 700; text-decoration: none; }
.remove-link:hover { color: #ffb0bc; text-decoration: underline; }
.protected-account { color: var(--faint); font-size: 12px; font-weight: 600; }

/* Empty states */
.empty-panel, .empty-inline, .compact-empty { border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); background: rgba(var(--tint), .02); }
.empty-panel { display: grid; justify-items: center; padding: 42px 20px; text-align: center; }
.empty-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 120, 60, .1); color: var(--amber); font-size: 20px; }
.empty-panel h3 { margin: 14px 0 4px; font-size: 18px; }
.empty-panel p, .empty-inline p, .empty-hint { margin: 0; color: var(--muted); font-size: 13px; }
.empty-inline { display: flex; align-items: center; gap: 14px; padding: 24px 16px; }
.empty-inline strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 14px; }
.empty-inline .empty-icon { width: 38px; height: 38px; flex: 0 0 auto; font-size: 17px; }
.compact-empty { padding: 28px 16px; }

/* Layout grids */
.workspace-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 18px; align-items: start; }
.workspace-column { display: grid; gap: 18px; }
.tutor-heading, .admin-heading, .notification-view .view-heading { align-items: center; }
.availability-list { margin: 0; padding: 0; list-style: none; }
.availability-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 13px; }
.availability-list li > span:first-child { display: flex; align-items: center; gap: 10px; }
.slot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(74, 222, 128, .14); }
.slot-booked { background: var(--warn); box-shadow: 0 0 0 4px rgba(251, 191, 36, .14); }
.status-label { color: var(--warn); font-size: 12px; font-weight: 700; }
.booking-item { padding: 18px 0; border-top: 1px solid var(--line); }
.booking-item:first-child { padding-top: 2px; border-top: 0; }
.booking-item-top { display: flex; align-items: center; gap: 9px; }
.booking-student { flex: 1; color: var(--text); font-size: 14px; font-weight: 700; }
.booking-details { display: grid; grid-template-columns: .8fr 1.3fr .9fr; gap: 13px; margin: 15px 0; }
.booking-details span { color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.booking-details small { display: block; margin-bottom: 4px; color: var(--faint); font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; }
.booking-done { text-decoration: none; }
.request-schedule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.upcoming-panel { margin: 0 0 30px; padding: 22px 24px; border: 1px solid rgba(255, 150, 80, .3); border-radius: var(--r-lg); background: radial-gradient(420px 180px at 100% 0, rgba(255, 90, 54, .14), transparent 70%), var(--surface); }
.upcoming-panel h2, .upcoming-panel h3 { margin: 0; font-size: 22px; }
.upcoming-session-list { display: grid; gap: 10px; }
.upcoming-session { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.upcoming-session:first-child { border-top: 0; }
.upcoming-session strong { color: var(--text); font-size: 14px; }
.upcoming-session span { color: var(--amber); font-size: 13px; font-weight: 700; }
.upcoming-session small { color: var(--muted); font-size: 12px; }
.upcoming-session p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.student-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 40px; padding: 7px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); }
.student-tab { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.student-tab:hover { background: rgba(255, 140, 60, .09); color: var(--text); transform: translateY(-1px); }
.student-tab.active { background: var(--grad); color: var(--on-ember); box-shadow: 0 8px 22px -8px rgba(255, 90, 54, .8); }
.student-tab span { display: inline-grid; min-width: 20px; height: 20px; place-items: center; padding: 0 6px; border-radius: 5px; background: rgba(0, 0, 0, .22); font-size: 11px; }
.student-bookings-table { min-width: 840px; }
.student-session-action { min-width: 188px; }
.session-action-form { margin-top: 7px; }
.session-next-step { display: block; margin-top: 6px; color: var(--warn); font-size: 11px; line-height: 1.5; white-space: normal; }
.review-form { display: grid; gap: 6px; min-width: 175px; margin-top: 8px; }
.review-form .button { justify-self: start; }
.review-submitted { display: block; margin-top: 7px; color: var(--sun); font-size: 12px; font-weight: 700; }
.review-list-card { padding: 24px; }
.verified-reviews { display: grid; gap: 10px; }
.verified-review { padding: 14px 0 4px; border-top: 1px solid var(--line); }
.verified-review-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.verified-review-top strong { color: var(--text); font-size: 14px; }
.verified-review > small { display: block; margin-top: 3px; color: var(--faint); font-size: 11px; }
.verified-review p { margin: 8px 0 0; color: var(--text-2); font-size: 13.5px; white-space: pre-line; }
.review-stars { font-size: 13px; letter-spacing: 1px; }
.review-nudge { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 18px 0 24px; padding: 20px 24px; border: 1px solid rgba(255, 150, 80, .35); border-radius: var(--r-lg); background: linear-gradient(115deg, rgba(255, 90, 54, .16), transparent 70%), var(--surface); }
.review-nudge > div { display: grid; gap: 4px; }
.review-nudge strong { color: var(--text); font-family: var(--font-display); font-size: 19px; }
.review-nudge p { margin: 0; color: var(--muted); font-size: 13.5px; }
.reminder-stack { display: grid; gap: 10px; margin: -16px 0 30px; }
.tutor-reminder-stack { margin: -17px 0 29px; }
.session-reminder { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid rgba(255, 179, 64, .3); border-radius: var(--r-md); background: rgba(255, 179, 64, .07); }
.reminder-confirmation { border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .09); }
.reminder-release { border-color: rgba(96, 165, 250, .35); background: rgba(96, 165, 250, .08); }
.reminder-mark { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: rgba(255, 179, 64, .2); color: var(--amber); font-size: 14px; }
.reminder-release .reminder-mark { background: rgba(96, 165, 250, .2); color: var(--info); }
.session-reminder strong { display: block; margin: 0 0 2px; color: var(--text); font-size: 13px; }
.session-reminder p { margin: 0; color: var(--muted); font-size: 12.5px; }
.session-reminder p span { margin-left: 5px; color: var(--amber); font-weight: 700; }
.session-chat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 12px; }
.session-payment-status { display: grid; justify-items: start; gap: 8px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: rgba(var(--tint), .03); color: var(--text-2); font-size: 13px; }
.session-payment-status > p { margin: 0; color: var(--muted); }
.session-payment-status > strong { color: var(--text); }
.completed-request-sessions { margin-top: 22px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.completed-request-sessions h3 { margin: 0; }
.session-chat-link { display: inline-flex; margin-top: 10px; color: var(--amber); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.topic-checkbox-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 240px; overflow-y: auto; padding: 11px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--inset-bg); }
.topic-choice { display: flex; min-width: 0; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(var(--tint), .03); cursor: pointer; transition: border-color .2s, background .2s; }
.topic-choice:hover { border-color: var(--amber); background: rgba(255, 140, 60, .06); }
.topic-choice .form-check-input { flex: 0 0 auto; margin: 3px 0 0; }
.topic-choice .form-check-label { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--text); font-size: 13px; font-weight: 600; }
.topic-choice small:not(.badge) { color: var(--muted); font-size: 11px; font-weight: 500; }
.payout-fields { margin: 18px 0; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: rgba(var(--tint), .03); }
.payout-fields h3 { margin: 0 0 13px; font-size: 19px; }

/* Profile + checkout */
.profile-view, .checkout-view { max-width: 1100px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(315px, .75fr); gap: 18px; align-items: start; }
.profile-main { display: grid; gap: 18px; }
.profile-hero-card { position: relative; min-height: 250px; padding: 30px; overflow: hidden; background: radial-gradient(520px 260px at 100% 0, rgba(255, 90, 54, .22), transparent 70%), var(--surface); }
.profile-avatar { width: 60px; height: 60px; margin-bottom: 18px; border-radius: 16px; font-size: 26px; }
.profile-hero-card h1 { margin: 10px 0 2px; font-size: 38px; font-weight: 800; }
.profile-subjects { margin: 0 0 12px; color: var(--amber); font-size: 14px; font-weight: 700; }
.profile-bio { max-width: 580px; margin: 0; color: var(--text-2); font-size: 14.5px; }
.profile-rate { position: absolute; top: 26px; right: 26px; display: flex; align-items: baseline; gap: 7px; padding: 10px 15px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-solid); }
.profile-rate strong { color: var(--text); font-family: var(--font-display); font-size: 22px; }
.profile-rate span { color: var(--muted); font-size: 12px; }
.trial-card { padding: 22px; }
.trial-player { display: block; width: 100%; max-height: 430px; border-radius: var(--r-md); background: #000; }
.trial-embed { overflow: hidden; border-radius: var(--r-md); }
.booking-card { position: sticky; top: 100px; padding: 24px; }
.booking-card h2, .payment-card h2 { margin: 7px 0; font-size: 28px; font-weight: 700; }
.booking-intro { margin: 0 0 22px; color: var(--muted); font-size: 13.5px; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr); gap: 18px; align-items: start; }
.checkout-main h1 { margin: 14px 0 6px; font-size: 42px; font-weight: 800; }
.auth-subtitle { margin: 0 0 24px; color: var(--muted); font-size: 13.5px; }
.checkout-rows { margin-top: 26px; border-top: 1px solid var(--line); }
.checkout-rows > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 2px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.checkout-rows strong { max-width: 60%; color: var(--text); font-size: 13.5px; text-align: right; }
.checkout-rows .checkout-total { align-items: center; padding: 20px 2px; border-bottom: 0; color: var(--text); font-weight: 700; }
.checkout-rows .checkout-total strong { font-family: var(--font-display); font-size: 32px; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.checkout-rows .checkout-total small { font-size: 12px; }
.payment-card { padding: 24px; }
.payment-card .demo-footnote { margin: 15px 0 0; color: var(--faint); font-size: 11px; }
.instapay-checkout-card { margin-top: 22px; padding: 22px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: rgba(var(--tint), .03); }
.payment-method-heading { display: flex; align-items: flex-start; gap: 12px; }
.payment-method-heading h2 { margin: 3px 0 4px; font-size: 22px; }
.payment-method-heading p { margin: 0; color: var(--muted); font-size: 12.5px; }
.instapay-badge { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--grad); color: var(--on-ember); font-size: 11px; font-weight: 800; }
.instapay-qr-frame { display: grid; justify-items: center; gap: 8px; max-width: 310px; margin: 18px auto 14px; padding: 13px; border-radius: var(--r-md); background: #fff; }
.instapay-qr-frame img { display: block; width: min(100%, 270px); height: auto; }
.instapay-qr-frame figcaption { color: #3a332b; font-size: 12px; text-align: center; }
.instapay-qr-frame figcaption strong { color: #17120d; }
.instapay-steps { margin: 12px 0 18px; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.instapay-steps li { padding: 2px 0 2px 3px; }
.instapay-steps strong { color: var(--text); }
.instapay-submit-form { padding-top: 14px; border-top: 1px solid var(--line); }
.payment-provider-state { display: flex; align-items: flex-start; gap: 11px; margin: 18px 0; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: rgba(var(--tint), .03); }
.provider-state-mark { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: rgba(var(--tint), .08); color: var(--text-2); font-weight: 800; }
.payment-provider-state strong { display: block; color: var(--text); font-size: 13px; }
.payment-provider-state p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.demo-checkout-box { margin: 17px 0; padding: 13px; border: 1px dashed var(--line-2); border-radius: var(--r-md); }
.demo-checkout-box p { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
.transfer-review-section .action-cell { min-width: 160px; }
.transfer-review-section .action-cell form { display: inline-block; margin: 2px; }

/* Auth */
.auth-shell { max-width: 1040px; padding-top: 44px; padding-bottom: 70px; }
.auth-layout { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 580px; overflow: hidden; border: 1px solid var(--line-2); border-radius: 26px; background: var(--surface-solid); box-shadow: 0 50px 100px -40px var(--shadow-c), 0 0 0 1px rgba(255, 120, 60, .05); }
.auth-aside { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 52px 42px; overflow: hidden; background: radial-gradient(420px 320px at 90% 8%, rgba(255, 120, 50, .6), transparent 70%), radial-gradient(380px 300px at 0 100%, rgba(255, 63, 127, .35), transparent 70%), #1a0f12; color: #fff; }
.auth-aside::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask: radial-gradient(ellipse at 100% 0, #000, transparent 70%); mask: radial-gradient(ellipse at 100% 0, #000, transparent 70%); }
.auth-aside .eyebrow { position: relative; z-index: 1; color: var(--sun); }
.auth-aside h1 { position: relative; z-index: 1; margin: 22px 0 14px; color: #fff; font-size: clamp(40px, 5vw, 60px); font-weight: 800; line-height: .98; letter-spacing: -.05em; }
.auth-aside h1 em { background: linear-gradient(100deg, #fff, #ffd978); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-aside > p { position: relative; z-index: 1; max-width: 340px; margin: 0; color: rgba(255, 255, 255, .78); font-size: 14px; }
.auth-orbit { position: absolute; top: -80px; right: -50px; color: rgba(255, 255, 255, .1); font-size: 260px; line-height: 1; animation: twirl 40s linear infinite; }
.auth-aside-foot { position: absolute; bottom: 27px; z-index: 1; color: rgba(255, 255, 255, .6); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.auth-aside-foot span { padding: 0 5px; color: var(--sun); }
.auth-card { align-self: center; margin: 30px 36px; padding: 30px !important; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.auth-card h2 { margin: 10px 0 6px; font-size: 36px; font-weight: 800; }
.auth-card .app-form { margin-top: 24px; }
.auth-switch { margin-top: 18px; color: var(--muted); font-size: 13px; text-align: center; }
.auth-switch a, .role-switch a { color: var(--amber); font-weight: 700; text-decoration: none; }
.auth-switch a:hover, .role-switch a:hover { color: var(--sun); text-decoration: underline; }
.role-switch { margin-top: 9px; color: var(--faint); font-size: 12px; text-align: center; }
.demo-note { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; margin-top: 20px; padding: 11px 13px; border: 1px dashed var(--line-2); border-radius: 10px; background: rgba(var(--tint), .03); color: var(--muted); font-size: 11px; }
.demo-note span { margin-right: auto; font-family: var(--font-mono); font-weight: 600; letter-spacing: .08em; }
.demo-note code { font-size: 11px; }
.signup-layout { grid-template-columns: .86fr 1.14fr; }
.signup-layout .auth-aside { padding-left: 38px; padding-right: 34px; }
.auth-aside-points { position: relative; z-index: 1; display: grid; gap: 12px; margin-top: 28px; color: rgba(255, 255, 255, .88); font-size: 13px; }
.auth-aside-points i { display: inline-grid; width: 24px; height: 24px; margin-right: 8px; place-items: center; border: 1px solid rgba(255, 217, 120, .55); border-radius: 7px; color: var(--sun); font-size: 11px; font-style: normal; }
.signup-card { margin: 26px 36px; padding: 26px 30px !important; }
.signup-card .app-form { margin-top: 17px; }
.signup-card .form-control, .signup-card .form-select { min-height: 42px; }
.signup-card .mb-3 { margin-bottom: 12px !important; }
.signup-card .auth-switch { margin-top: 12px; }

/* Admin */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { --c: var(--ok); position: relative; display: flex; min-height: 142px; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 18px 20px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(200px 100px at 100% 0, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), var(--surface); transition: transform .25s ease, border-color .3s; will-change: transform; }
.metric-card:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.metric-card:has(.metric-mark-lime) { --c: var(--amber); }
.metric-card:has(.metric-mark-amber) { --c: var(--warn); }
.metric-card:has(.metric-mark-blue) { --c: var(--info); }
.metric-card:has(.metric-mark-muted) { --c: #b0a99d; }
.metric-card:has(.metric-mark-cyan) { --c: var(--cyan); }
.metric-card:has(.metric-mark-purple) { --c: #8b5cf6; }
.metric-card:has(.metric-mark-pink) { --c: var(--rose); }
.metric-card.metric-visits { grid-column: span 1; }
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.analytics-panel { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.analytics-panel h3 { margin: 0 0 16px 0; font-family: var(--font-display); font-size: 16px; color: var(--text); }
.referrer-item, .page-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.referrer-item:last-child, .page-item:last-child { border-bottom: none; }
.referrer-source, .page-path { color: var(--text-2); font-size: 13px; }
.referrer-count, .page-count { color: var(--cyan); font-weight: 700; font-family: var(--font-mono); font-size: 14px; }
.chart-container { margin-top: 20px; }
@media (max-width: 900px) { .analytics-grid { grid-template-columns: 1fr; } }
.metric-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font-family: var(--font-mono); font-size: 10px; font-weight: 800; }
.metric-card strong { margin-top: 14px; color: var(--text); font-family: var(--font-display); font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.metric-card small { margin-top: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.admin-section { margin-top: 18px; padding: 24px; }
.approval-section { border-color: rgba(251, 191, 36, .28); background: linear-gradient(120deg, rgba(251, 191, 36, .07), transparent 60%), var(--surface); }
.admin-lower-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.admin-lower-grid .admin-section { min-width: 0; }
.university-form { gap: 8px; margin-bottom: 14px; }
.university-form .form-control { min-height: 40px; border-radius: 10px !important; font-size: 13px; }
.university-form .button { border-radius: 10px !important; }
.university-delete-note, .account-deletion-note, .ledger-note { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.university-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.university-pill { display: flex; align-items: center; gap: 8px; padding: 6px 7px 6px 11px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(var(--tint), .04); color: var(--text-2); font-size: 12px; }
.university-pill small { margin-left: 3px; color: var(--faint); font-size: 11px; }
.university-pill form { margin: 0; }
.university-pill button { display: grid; width: 22px; height: 22px; place-items: center; padding: 0; border: 1px solid rgba(251, 113, 133, .35); border-radius: 6px; background: rgba(251, 113, 133, .1); color: var(--bad); font-size: 15px; line-height: 1; cursor: pointer; }
.university-pill button:hover { background: rgba(251, 113, 133, .25); }
.university-pill .university-delete-disabled { border-color: var(--line); background: transparent; color: var(--faint); cursor: not-allowed; }
.commission-panel { position: relative; margin-top: 18px; padding: 30px; overflow: hidden; border: 0; border-radius: 24px; background: radial-gradient(560px 240px at 88% -10%, rgba(255, 90, 54, .3), transparent 70%), radial-gradient(420px 220px at 0 110%, rgba(255, 63, 127, .16), transparent 70%), var(--surface-solid); }
.commission-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--a, 0deg), transparent 0 66%, var(--ember) 82%, var(--sun) 93%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 7s linear infinite; }
.commission-panel > * { position: relative; z-index: 1; }
.commission-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.commission-heading h2 { margin: 6px 0; font-size: 32px; font-weight: 800; }
.commission-heading p { max-width: 570px; margin: 0; color: var(--muted); font-size: 13px; }
.commission-gross { flex: 0 0 auto; padding: 13px 17px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: rgba(var(--tint), .05); text-align: right; }
.commission-gross small, .commission-gross strong, .commission-share small, .commission-share strong { display: block; }
.commission-gross small, .commission-share small { color: var(--muted); font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; }
.commission-gross strong { margin-top: 4px; color: var(--text); font-family: var(--font-display); font-size: 26px; }
.commission-gross i, .commission-share i { font-family: var(--font-body); font-size: 11px; font-style: normal; }
.commission-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.commission-share { display: flex; align-items: center; gap: 14px; min-height: 106px; padding: 18px; background: rgba(var(--tint), .04); }
.commission-share.owner-share { border-color: rgba(255, 90, 54, .45); background: rgba(255, 90, 54, .1); }
.commission-share.tutor-share { border-color: rgba(255, 207, 110, .35); background: rgba(255, 207, 110, .07); }
.commission-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: var(--grad); color: var(--on-ember); font-size: 10px; font-weight: 800; }
.commission-share strong { margin-top: 4px; color: var(--text); font-family: var(--font-display); font-size: 28px; line-height: 1.05; }
.commission-share p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.commission-bar { display: flex; height: 10px; margin-top: 20px; overflow: hidden; border-radius: 999px; background: rgba(var(--tint), .1); }
.commission-bar span:nth-child(1) { width: 60%; background: var(--ok); }
.commission-bar span:nth-child(2) { width: 30%; background: var(--ember); }
.commission-bar span:nth-child(3) { width: 10%; background: var(--gold); }
.commission-legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; color: var(--muted); font-size: 11.5px; }
.commission-legend span { display: inline-flex; align-items: center; gap: 6px; }
.commission-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--ember); }
.commission-legend span:last-child i { background: var(--gold); }
.tutor-ledger-section { margin-top: 18px; }
.tutor-ledger-section .app-table { min-width: 760px; }
.tutor-ledger-section .app-table thead th:nth-child(n+3), .tutor-ledger-section .app-table td:nth-child(n+3) { text-align: right; }
.delete-account-form .button { min-height: 33px; }
.admin-user-actions { min-width: 190px; }
.deleted-accounts-section { border-color: var(--line-2); background: repeating-linear-gradient(135deg, rgba(var(--tint), .025) 0 10px, transparent 10px 20px), var(--surface); }
.archive-explanation { max-width: 920px; margin: -6px 0 16px; color: var(--muted); font-size: 13.5px; }
.deleted-accounts-section .protected-account { display: inline-block; max-width: 220px; line-height: 1.5; }
/* tutor application review (moved out of admin_home.html) */
.tutor-review-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.tutor-review-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: rgba(var(--tint), .03); transition: border-color .3s, transform .25s; }
.tutor-review-card:hover { border-color: rgba(255, 150, 80, .45); transform: translateY(-3px); }
.tutor-review-head { display: flex; align-items: center; gap: 12px; }
.tutor-review-head .mini-person { flex: none; width: 42px; height: 42px; }
.tutor-review-head strong { display: block; color: var(--text); font-size: 15px; line-height: 1.2; }
.tutor-review-head small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.tutor-review-topic { display: inline-flex; align-self: flex-start; padding: 5px 11px; border-radius: 6px; background: rgba(255, 140, 60, .14); color: var(--amber); font-size: 12px; font-weight: 700; }
.tutor-review-media { display: grid; gap: 12px; }
.tutor-review-label { display: block; margin-bottom: 5px; color: var(--faint); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.tutor-review-media video, .tutor-review-media .ratio { width: 100%; overflow: hidden; border-radius: var(--r-md); background: #000; }
.tutor-review-media a { display: inline-block; margin-top: 6px; color: var(--amber); font-size: 12px; font-weight: 700; }
.tutor-review-bio { max-height: 5.6em; margin: 0; overflow: auto; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.tutor-review-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.tutor-review-actions { display: flex; gap: 8px; margin-top: auto; }
.tutor-review-actions form { margin: 0; }

/* Database viewer, community, notifications, chat, errors */
.database-view .database-table-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.database-table-section { margin-top: 24px; }
.database-table { font-size: 12.5px; }
.community-post { padding: 20px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.request-list, .booking-list { display: grid; gap: 10px; }
.request-item, .student-booking-card, .bookings-card, .availability-card { border-color: var(--line); }
.notification-count + .notification-count { margin-left: 4px; }
.notification-list { display: grid; gap: 10px; }
.notification-card { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: border-color .3s, transform .25s; }
.notification-card:hover { border-color: var(--line-2); transform: translateX(4px); }
.notification-card.notification-unread { border-color: rgba(255, 150, 80, .5); background: linear-gradient(100deg, rgba(255, 90, 54, .14), transparent 60%), var(--surface); }
.notification-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.notification-unread .notification-dot { background: var(--ember); box-shadow: 0 0 0 4px rgba(255, 90, 54, .2); }
.notification-card-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.notification-card-heading h2 { margin: 0; font-size: 19px; }
.notification-category { padding: 4px 8px; border-radius: 5px; background: rgba(var(--tint), .08); color: var(--text-2); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.notification-content p { margin: 6px 0; color: var(--muted); font-size: 13.5px; }
.notification-content time { color: var(--faint); font-size: 12px; }
.chat-view { max-width: 900px; padding-top: 40px; padding-bottom: 70px; }
.chat-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.chat-heading h1 { margin: 12px 0 7px; font-size: clamp(32px, 4vw, 48px); }
.chat-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.chat-panel { overflow: hidden; }
.chat-message-list { display: flex; min-height: 300px; max-height: 62vh; flex-direction: column; gap: 13px; overflow: auto; padding: 24px; }
.chat-message { width: min(82%, 640px); align-self: flex-start; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 16px 16px 16px 4px; background: rgba(var(--tint), .05); }
.chat-message-own { align-self: flex-end; border-color: rgba(255, 150, 80, .45); border-radius: 16px 16px 4px 16px; background: linear-gradient(135deg, rgba(255, 90, 54, .25), rgba(255, 179, 64, .12)); }
.chat-message-meta { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 12px; }
.chat-message-meta strong { color: var(--text); }
.chat-message-meta time { color: var(--faint); font-size: 11px; }
.chat-message p { margin: 8px 0 0; color: var(--text); font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-empty { margin: auto; padding: 36px 10px; text-align: center; color: var(--muted); }
.chat-empty strong { color: var(--text); font-family: var(--font-display); }
.chat-empty p { margin: 6px 0 0; font-size: 13.5px; }
.chat-composer { display: flex; align-items: flex-end; gap: 12px; padding: 17px; border-top: 1px solid var(--line); background: var(--inset-bg); }
.chat-composer textarea { min-height: 76px; resize: vertical; }
.chat-closed-note { margin-bottom: 16px; padding: 13px 16px; border: 1px solid rgba(251, 191, 36, .35); border-radius: var(--r-md); background: rgba(251, 191, 36, .08); color: var(--warn); font-size: 13px; }
.error-view { display: grid; min-height: calc(100vh - 200px); place-items: center; }
.error-card { width: min(100%, 560px); padding: 44px; text-align: center; }
.error-mark { display: block; margin-bottom: 10px; font-family: var(--font-display); font-size: 120px; font-weight: 800; letter-spacing: -.08em; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-card .eyebrow { justify-content: center; }
.error-card h1 { margin: 13px auto 9px; font-size: 32px; }
.error-card p { margin-bottom: 22px; color: var(--muted); font-size: 14px; }
.btn-primary { border-color: transparent; background: var(--grad); color: var(--on-ember); font-weight: 700; }
.btn-close { filter: invert(1) grayscale(1); }
.ratio > iframe { border: 0; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tutor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-lower-grid { grid-template-columns: 1fr; }
  .tutor-filter-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .app-view { padding-top: 34px; }
  .workspace-grid, .profile-grid, .checkout-layout { grid-template-columns: 1fr; }
  .workspace-column { grid-template-columns: 1fr 1fr; align-items: start; }
  .booking-card { position: static; }
  .auth-layout { grid-template-columns: .85fr 1.15fr; }
  .auth-aside { padding: 38px 28px; }
  .auth-card { margin: 25px 20px; padding: 24px !important; }
}
@media (max-width: 767.98px) {
  .app-view { padding-top: 28px; padding-bottom: 56px; }
  .view-heading { align-items: flex-start; flex-direction: column; margin-bottom: 28px; }
  .heading-stat, .earnings-card { min-width: unset; }
  .tutor-grid, .request-schedule-grid, .workspace-column, .commission-cards { grid-template-columns: 1fr; }
  .tutor-card { min-height: 250px; }
  .booking-details { grid-template-columns: 1fr 1fr; }
  .booking-details span:last-child { grid-column: 1 / -1; }
  .profile-hero-card { padding: 23px; }
  .profile-rate { position: static; width: fit-content; margin-top: 17px; }
  .metric-card { min-height: 120px; }
  .metric-card strong { font-size: 30px; }
  .admin-section { padding: 18px 14px; }
  .admin-date { align-self: flex-start; }
  .commission-panel { padding: 22px 16px; }
  .commission-heading { flex-direction: column; gap: 13px; }
  .commission-gross { width: 100%; text-align: left; }
  .auth-shell { padding-top: 25px; padding-bottom: 40px; }
  .auth-layout, .signup-layout { grid-template-columns: 1fr; }
  .auth-aside { min-height: 250px; padding: 34px 26px; }
  .auth-aside-foot { bottom: 17px; }
  .auth-aside-points { gap: 8px; margin-top: 18px; }
  .auth-card, .signup-card { margin: 0; padding: 27px 23px !important; }
  .table-card { padding: 4px 10px; }
  .app-table > :not(caption) > * > * { padding: 12px 10px; }
  .tutor-filter-panel { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
  .filter-search, .filter-actions { grid-column: 1 / -1; }
  .filter-actions { flex-wrap: wrap; }
  .reminder-stack { margin-top: -9px; }
  .review-nudge { align-items: flex-start; flex-direction: column; padding: 18px; }
  .chat-view { padding-top: 24px; }
  .chat-heading { align-items: flex-start; flex-direction: column; }
  .chat-message-list { max-height: 58vh; padding: 15px; }
  .chat-message { width: 94%; }
  .chat-composer { align-items: stretch; flex-direction: column; padding: 12px; }
  .chat-composer .button { align-self: flex-end; }
}
@media (max-width: 620px) {
  .notification-card { grid-template-columns: 8px minmax(0, 1fr); gap: 10px; padding: 15px; }
  .notification-card form { grid-column: 2; }
  .student-tabs { grid-template-columns: 1fr; gap: 5px; margin-bottom: 30px; }
  .topic-checkbox-list { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .tutor-filter-panel { grid-template-columns: 1fr; }
  .filter-search, .filter-actions { grid-column: auto; }
  .metric-grid { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rd-reveal { opacity: 1; transform: none; }
  .rb-word { opacity: 1; filter: none; transform: none; }
  .fx-glow, .fx-canvas { display: none; }
}


/* ---------- Theme toggle ---------- */
.theme-toggle { position: relative; display: inline-grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(var(--tint), .05); color: var(--amber); cursor: pointer; transition: border-color .2s, background .2s, transform .25s; }
.theme-toggle:hover { border-color: var(--amber); background: rgba(255, 140, 60, .12); transform: translateY(-2px); }
.theme-toggle:focus-visible { outline: 0; box-shadow: var(--ring); }
.theme-toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .25s; }
.theme-toggle .ico-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-toggle .ico-moon { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
.site-nav > .container { gap: 10px; }
.theme-toggle { margin-left: auto; }
@media (min-width: 992px) { .site-nav .navbar-collapse { order: 2; } .theme-toggle { order: 3; margin-left: 12px; } }
@media (max-width: 991.98px) { .theme-toggle { order: 2; } .navbar-toggler { order: 3; } .site-nav .navbar-collapse { order: 4; } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }

/* =====================================================================
   LIGHT MODE — warm paper, same ember accents
   ===================================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --tint: 40, 25, 10;
  --bg: #f8f3ea; --bg-2: #f1eadd;
  --surface: rgba(255, 255, 255, .82); --surface-solid: #fffdf9; --surface-2: #f3ecdf;
  --line: rgba(40, 25, 10, .11); --line-2: rgba(40, 25, 10, .2);
  --text: #1d1812; --text-2: #463d33; --muted: #6d6254; --faint: #968a7a;
  --ember: #f0471f; --amber: #c0600a; --sun: #a8500a; --gold: #f5a623; --rose: #e11d6a;
  --glow: 0 0 0 1px rgba(240, 90, 40, .35), 0 12px 30px -10px rgba(255, 90, 54, .5);
  --ring: 0 0 0 3px rgba(240, 110, 40, .28);
  --ok: #15803d; --warn: #b45309; --bad: #be123c; --info: #1d4ed8;
  --shadow-c: rgba(90, 50, 15, .26);
  --nav-bg: rgba(248, 243, 234, .8); --nav-collapse-bg: rgba(255, 253, 249, .98);
  --marquee-bg: rgba(255, 255, 255, .5); --band-bg: rgba(255, 255, 255, .5); --footer-bg: rgba(255, 253, 249, .85);
  --inset-bg: rgba(40, 25, 10, .045); --select-bg: #fffdf9;
  --btn-dark-bg: #1d1812; --btn-dark-fg: #fff6ea; --btn-dark-hover: #000;
  --grad-text: linear-gradient(115deg, #e23a12 0%, #ee6a14 50%, #d98c0a 100%);
  --stroke-num: rgba(205, 95, 20, .6);
}
:root[data-theme="light"] .navbar-toggler-icon, :root[data-theme="light"] .btn-close { filter: none; }
:root[data-theme="light"] body::after { opacity: .06; mix-blend-mode: multiply; }
:root[data-theme="light"] .hero-orb-a { background: radial-gradient(circle, rgba(255, 120, 60, .3), transparent 65%); }
:root[data-theme="light"] .hero-orb-b { background: radial-gradient(circle, rgba(255, 63, 127, .16), transparent 65%); }
:root[data-theme="light"] .fx-glow { background: radial-gradient(circle closest-side, rgba(255, 120, 60, .2), rgba(255, 170, 60, .08) 50%, transparent 100%); }
:root[data-theme="light"] .brand-mark svg { stroke: #2a1006; }
:root[data-theme="light"] .site-nav .nav-cta, :root[data-theme="light"] .button-lime { color: #2a1006 !important; }
:root[data-theme="light"] .picker-chip.is-on { color: #2a1006; }
:root[data-theme="light"] .avatar-stack span { border-color: var(--bg); }
:root[data-theme="light"] .benefit-featured { background: radial-gradient(480px 260px at 100% 0, rgba(255, 120, 60, .22), transparent 70%), var(--surface); }
:root[data-theme="light"] .closing-inner { box-shadow: 0 40px 80px -40px rgba(240, 90, 40, .4); }
:root[data-theme="light"] .surface-card, :root[data-theme="light"] .tutor-card, :root[data-theme="light"] .payment-card, :root[data-theme="light"] .chat-panel, :root[data-theme="light"] .error-card, :root[data-theme="light"] .commission-share { box-shadow: 0 14px 34px -24px var(--shadow-c); }
:root[data-theme="light"] .auth-layout { box-shadow: 0 40px 80px -40px var(--shadow-c); }
:root[data-theme="light"] .badge.text-bg-secondary { background: rgba(var(--tint), .07) !important; }
:root[data-theme="light"] .table-responsive, :root[data-theme="light"] .tutor-filter-panel { background: var(--surface); }
:root[data-theme="light"] .app-table thead th, :root[data-theme="light"] .table thead th { background: rgba(var(--tint), .05); }
:root[data-theme="light"] .tutor-card:hover, :root[data-theme="light"] .benefit-card:hover { box-shadow: 0 26px 50px -26px rgba(240, 90, 40, .45); }
:root[data-theme="light"] .instapay-qr-frame { border: 1px solid var(--line-2); }

/* ---------- Back to top button ---------- */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--grad); color: var(--on-ember); cursor: pointer;
  box-shadow: var(--glow); transition: transform .2s, opacity .2s;
  display: flex; align-items: center; justify-content: center;
}
.back-to-top:hover { transform: scale(1.1); }
.back-to-top svg { width: 24px; height: 24px; }

/* ---------- Toast notifications ---------- */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  pointer-events: auto; background: var(--surface-solid);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 14px 18px; min-width: 280px; max-width: 400px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
  animation: toast-in .3s ease;
  display: flex; align-items: center; gap: 12px;
}
.toast-success { border-left: 3px solid var(--ok); }
.toast-error { border-left: 3px solid var(--bad); }
.toast-info { border-left: 3px solid var(--info); }
.toast-warning { border-left: 3px solid var(--warn); }
.toast-content { flex: 1; color: var(--text); font-size: 14px; }
.toast-close {
  background: none; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 0 4px;
}
.toast.fade-out { opacity: 0; transition: opacity .3s; }
@keyframes toast-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ---------- FAQ accordion ---------- */
.faq-item { margin-bottom: 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.faq-question {
  width: 100%; background: var(--surface); border: none; padding: 16px 20px;
  text-align: left; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-question:hover { background: var(--surface-2); }
.faq-answer {
  padding: 0 20px; max-height: 0; overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}
.faq-item.open .faq-answer { padding: 16px 20px; max-height: 500px; }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-icon { transition: transform .3s; }

/* ---------- Live stats counter ---------- */
.stats-counter { font-variant-numeric: tabular-nums; }

/* ---------- Social proof / testimonials ---------- */
.testimonial-card {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 24px; position: relative;
}
.testimonial-card::before {
  content: '"'; position: absolute; top: 10px; left: 16px;
  font-size: 60px; color: var(--ember); opacity: .2; line-height: 1;
}
.testimonial-text { font-style: italic; margin-bottom: 16px; position: relative; z-index: 1; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--grad); display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: var(--on-ember);
}

/* ---------- Stats Section ---------- */
.stats-section {
  padding: 60px 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  text-align: center;
}
.stat-item { display: flex; flex-direction: column; gap: 8px; }
.stat-number {
  font-size: 3rem;
  font-weight: 800;
  font-family: var(--font-display);
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label {
  color: var(--muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------- Testimonials Section ---------- */
.testimonials-section { padding: 80px 0; }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

/* ---------- FAQ Section ---------- */
.faq-section { padding: 80px 0; }
.faq-list { max-width: 800px; margin: 40px auto 0; }

/* ---------- Cookie Consent ---------- */
.cookie-consent {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000;
  background: var(--surface-solid); border-top: 1px solid var(--line-2);
  padding: 16px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.cookie-content { flex: 1; min-width: 280px; }
.cookie-content p { margin: 0 0 12px; color: var(--text-2); font-size: 14px; }
.cookie-actions { display: flex; gap: 10px; }
@media (max-width: 600px) { .cookie-consent { flex-direction: column; text-align: center; } }

/* ---------- Skeleton Loading ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text { height: 1em; margin-bottom: 0.5em; width: 100%; }
.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-circle { border-radius: 50%; }

/* ---------- RTL Support ---------- */
html[dir="rtl"] .navbar-nav { direction: rtl; }
html[dir="rtl"] .nav-cta { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] .back-to-top { right: auto; left: 24px; }
html[dir="rtl"] .toast-container { right: auto; left: 24px; }
html[dir="rtl"] .tutor-card-top { direction: rtl; }

/* ---------- Community Improvements ---------- */
.community-stats { display: flex; gap: 20px; align-items: center; }
.community-stat { background: var(--surface); padding: 8px 16px; border-radius: var(--r-md); border: 1px solid var(--line); }
.community-stat strong { color: var(--ember); }
.post-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.post-replies { margin-top: 8px; }
.empty-state { text-align: center; padding: 40px 20px; }
.empty-state .empty-icon { font-size: 3rem; display: block; margin-bottom: 16px; }

/* ---------- Security & Hints ---------- */
.password-hint { margin-top: 16px; }
.security-notice { margin-top: 16px; padding: 12px; background: var(--inset-bg); border-radius: var(--r-sm); color: var(--muted); font-size: 13px; }

/* ---------- Auth Layout ---------- */
.auth-aside-foot { margin-top: 40px; color: var(--muted); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; }

/* ---------- Success Animation ---------- */
@keyframes success-pop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
.success-animation { animation: success-pop 0.4s ease-out; }

/* ---------- Language Toggle ---------- */
.lang-toggle {
  padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: transparent; color: var(--text-2); cursor: pointer; font-size: 14px;
  font-weight: 600; transition: all .2s;
}
.lang-toggle:hover { border-color: var(--ember); color: var(--ember); }

/* ---------- Keyboard Shortcuts Hint ---------- */
.shortcut-hint {
  position: fixed; bottom: 24px; left: 24px; z-index: 999;
  background: var(--surface-solid); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 12px 16px; font-size: 12px;
  color: var(--muted); max-width: 200px; display: none;
}
.shortcut-hint.visible { display: block; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.shortcut-item { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.shortcut-key {
  background: var(--surface-2); padding: 2px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px;
}

/* ---------- Security Badges ---------- */
.security-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.security-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: var(--inset-bg); border-radius: var(--r-sm);
  font-size: 13px; color: var(--muted);
}

/* ---------- Admin Chart ---------- */
#adminChart, #earningsChart {
  max-width: 100%;
  height: auto !important;
}
.chart-label {
  display: block; text-align: center; margin-top: 8px;
  font-size: 12px; color: var(--muted);
}