/* =====================================================================
Select Tutors — Portal · Brand matched to selecttutors.world
Primary: #FAB223 (amber/gold) · Dark: #0D1B2A (navy)
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');
:root {
--amber: #FAB223;
--amber-dark: #E09B0A;
--amber-deeper: #C8880A;
--amber-light: #FEF7E6;
--amber-mid: #FDECC0;
--amber-text: #7A4E00;
--navy: #0D1B2A;
--navy-80: #1A2D42;
--navy-60: #243A54;
--navy-40: #3D5A7A;
--green: #059669; --green-light: #D1FAE5; --green-text: #065F46;
--red: #DC2626; --red-light: #FEE2E2; --red-text: #991B1B;
--blue: #2563EB; --blue-light: #EFF6FF; --blue-mid: #DBEAFE; --blue-text: #1E3A8A;
--purple: #7C3AED; --purple-light:#EDE9FE; --purple-text:#4C1D95;
--ink: #0D1B2A;
--body: #374151;
--muted: #6B7280;
--subtle: #9CA3AF;
--border: #E5E7EB;
--border-s: #D1D5DB;
--bg: #F9FAFB;
--bg-alt: #F3F4F6;
--surface: #FFFFFF;
--r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 18px;
--sh-xs: 0 1px 2px rgba(0,0,0,.05);
--sh-sm: 0 2px 6px rgba(0,0,0,.07);
--sh: 0 4px 16px rgba(0,0,0,.10);
--sh-lg: 0 8px 32px rgba(0,0,0,.14);
--sh-amber: 0 4px 20px rgba(250,178,35,.30);
--font: 'Inter', system-ui, sans-serif;
--font-h: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
font-family: var(--font);
background: var(--bg); color: var(--body);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
line-height: 1.6; font-size: 14px;
overflow-x: hidden;
}
a { color: var(--blue); text-decoration: none; transition: color .12s; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-family: var(--font-h); color: var(--ink); line-height: 1.2; letter-spacing: -.3px; }
/* ── TOPBAR ──────────────────────────────────────── */
.topbar {
background: linear-gradient(180deg, var(--navy) 0%, var(--navy-80) 100%);
height: 60px; padding: 0 1.5rem;
display: flex; align-items: center; justify-content: space-between;
position: sticky; top: 0; z-index: 300;
box-shadow: 0 1px 0 rgba(250,178,35,.35), 0 8px 24px rgba(0,0,0,.18);
}
.brand { display:flex; align-items:center; gap:11px; text-decoration:none !important; color:#fff !important; }
.brand:hover { text-decoration:none !important; }
.brand-logo {
width:34px; height:34px; border-radius:var(--r);
background:linear-gradient(155deg,var(--amber),var(--amber-deeper)); color:var(--navy);
display:flex; align-items:center; justify-content:center;
font-size:14px; font-weight:900; flex-shrink:0; letter-spacing:-.5px;
box-shadow:0 2px 8px rgba(250,178,35,.35);
}
.brand-logo-img { height:36px; width:auto; max-width:170px; object-fit:contain; flex-shrink:0; }
.brand-sub-pill {
font-size:10.5px; font-weight:700; color:rgba(255,255,255,.75);
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
padding:3px 9px; border-radius:999px; letter-spacing:.3px; white-space:nowrap;
}
.brand-sub-pill .icon { width:11px; height:11px; margin-right:3px; vertical-align:-1px; }
.topbar-right { display:flex; align-items:center; gap:6px; }
.topbar-link { color:rgba(255,255,255,.65) !important; font-size:13px; padding:6px 10px; border-radius:var(--r-sm); transition:all .15s; }
.topbar-link:hover { background:rgba(255,255,255,.08); color:#fff !important; text-decoration:none; }
.topbar-user { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.85) !important; font-weight:500; padding:4px 10px 4px 4px; border-radius:999px; background:rgba(255,255,255,.06); margin:0 2px; }
.topbar-user-name { display:inline; }
.avatar-sm { width:30px; height:30px; border-radius:50%; background:linear-gradient(155deg,var(--amber),var(--amber-deeper)); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; box-shadow:0 0 0 2px rgba(255,255,255,.15); }
.avatar-md { width:44px; height:44px; border-radius:50%; background:linear-gradient(155deg,var(--amber),var(--amber-deeper)); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; flex-shrink:0; box-shadow:0 2px 8px rgba(250,178,35,.3); }
/* ── MOBILE SIDEBAR TOGGLE ───────────────────────── */
.sidebar-toggle { display:none; background:none; border:none; cursor:pointer; color:#fff; font-size:22px; padding:4px 8px; line-height:1; }
/* ── LAYOUT ──────────────────────────────────────── */
.layout { display:grid; grid-template-columns:236px 1fr; min-height:calc(100vh - 60px); }
.sidebar {
background:var(--surface); border-right:1px solid var(--border);
padding:1rem .75rem 1.5rem;
position:sticky; top:60px; height:calc(100vh - 60px); overflow-y:auto;
transition: transform .25s ease;
z-index: 200;
display:flex; flex-direction:column;
}
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(13,27,42,.55); backdrop-filter:blur(1px); z-index:199; }
.sidebar-overlay.open { display:block; }
.sidebar-section { margin-bottom:1.35rem; }
.sidebar-label { font-size:10px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--subtle); padding:0 .6rem; margin-bottom:5px; display:block; }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:8px .6rem; margin-bottom:1px; font-size:13px; font-weight:500; color:var(--body); border-radius:var(--r); transition:all .12s; text-decoration:none; }
.sidebar-item:hover { background:var(--bg-alt); color:var(--ink); text-decoration:none; }
.sidebar-item.active { background:linear-gradient(135deg,var(--amber-light),var(--amber-mid)); color:var(--amber-text) !important; font-weight:700; box-shadow:inset 0 0 0 1px rgba(250,178,35,.35); }
.sidebar-item .icon { width:18px; text-align:center; font-size:14px; flex-shrink:0; }
/* ── MAIN ────────────────────────────────────────── */
.main { padding:2.25rem 2.5rem; overflow-y:auto; min-width:0; }
.page-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:1.85rem; flex-wrap:wrap; gap:12px; padding-bottom:1.35rem; border-bottom:1px solid var(--border); position:relative; }
.page-header::after { content:''; position:absolute; left:0; bottom:-1px; width:64px; height:2px; background:linear-gradient(90deg,var(--navy),var(--amber)); }
.page-title { font-family:var(--font-h); font-size:23px; font-weight:800; color:var(--ink); letter-spacing:-.5px; }
.page-sub { font-size:13px; color:var(--muted); margin-top:4px; }
/* ── CARDS ───────────────────────────────────────── */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:2rem; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.25rem; box-shadow:var(--sh-xs); }
.card-stat { position:relative; overflow:hidden; transition:box-shadow .18s, transform .18s; }
.card-stat::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--amber),var(--amber-dark)); }
.card-stat:hover { box-shadow:var(--sh-sm); transform:translateY(-2px); }
.card-stat .stat-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.9px; font-weight:700; color:var(--subtle); margin-bottom:9px; }
.card-stat .stat-value { font-family:var(--font-h); font-size:27px; font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.6px; }
.card-stat .stat-sub { font-size:11.5px; color:var(--muted); margin-top:7px; }
/* ── PANELS ──────────────────────────────────────── */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.35rem 1.6rem; margin-bottom:1.5rem; box-shadow:var(--sh-xs); }
.panel-title { font-family:var(--font-h); font-size:14.5px; font-weight:700; margin-bottom:1.1rem; color:var(--ink); display:flex; align-items:center; gap:7px; letter-spacing:-.1px; }
/* ── TABLES ──────────────────────────────────────── */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-xs); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:12px 15px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
th { font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); background:var(--bg-alt); font-weight:700; }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background .1s; }
tbody tr:hover { background:var(--amber-light); }
td.wrap,th.wrap { white-space:normal; }
/* ── BADGES ──────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; line-height:1.6; }
.badge-success { background:var(--green-light); color:var(--green-text); }
.badge-warning { background:var(--amber-mid); color:var(--amber-text); }
.badge-danger { background:var(--red-light); color:var(--red-text); }
.badge-blue { background:var(--blue-mid); color:var(--blue-text); }
.badge-purple { background:var(--purple-light);color:var(--purple-text);}
.badge-muted { background:var(--bg-alt); color:var(--muted); }
.badge-accent { background:var(--amber-mid); color:var(--amber-text); }
/* ── BUTTONS ─────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 18px; border-radius:var(--r); font-size:13.5px; font-weight:600; font-family:var(--font); cursor:pointer; border:1.5px solid transparent; transition:all .15s; text-decoration:none; white-space:nowrap; }
.btn-primary { background:linear-gradient(155deg,var(--amber),var(--amber-dark)); color:var(--navy) !important; border-color:var(--amber-dark); box-shadow:var(--sh-amber); font-weight:700; }
.btn-primary:hover { background:linear-gradient(155deg,var(--amber-dark),var(--amber-deeper)); color:var(--navy) !important; text-decoration:none; transform:translateY(-1px); }
.btn-dark { background:var(--navy); color:#fff !important; border-color:var(--navy-80); }
.btn-dark:hover{ background:var(--navy-80); color:#fff !important; text-decoration:none; }
.btn-blue { background:var(--blue); color:#fff !important; border-color:var(--blue); }
.btn-blue:hover{ background:#1D4ED8; color:#fff !important; text-decoration:none; }
.btn-outline { background:var(--surface); color:var(--body) !important; border-color:var(--border-s); box-shadow:var(--sh-xs); }
.btn-outline:hover { background:var(--bg-alt); color:var(--ink) !important; text-decoration:none; border-color:var(--subtle); }
.btn-danger { background:var(--red); color:#fff !important; border-color:#B91C1C; }
.btn-danger:hover { background:#B91C1C; color:#fff !important; text-decoration:none; }
.btn-sm { padding:5px 12px; font-size:12px; border-radius:var(--r-sm); }
.btn-lg { padding:13px 28px; font-size:15px; font-weight:700; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
/* ── FORMS ───────────────────────────────────────── */
.form-group { margin-bottom:18px; }
.form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.form-label { display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.form-input,.form-select,.form-textarea { width:100%; padding:9px 12px; border:1.5px solid var(--border-s); border-radius:var(--r); font-size:13.5px; font-family:var(--font); background:var(--surface); color:var(--ink); outline:none; transition:border-color .12s,box-shadow .12s; }
.form-input::placeholder,.form-textarea::placeholder { color:var(--subtle); }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--amber); box-shadow:0 0 0 3px rgba(250,178,35,.18); }
.form-textarea { resize:vertical; min-height:80px; line-height:1.55; }
.form-hint { font-size:12px; color:var(--muted); margin-top:5px; }
/* ── ALERTS ──────────────────────────────────────── */
.alert { border-radius:var(--r); padding:12px 16px; font-size:13.5px; margin-bottom:1rem; font-weight:500; border-left:4px solid; line-height:1.5; }
.alert-success { background:var(--green-light); color:var(--green-text); border-color:var(--green); }
.alert-error { background:var(--red-light); color:var(--red-text); border-color:var(--red); }
.alert-info { background:var(--blue-mid); color:var(--blue-text); border-color:var(--blue); }
.alert-warning { background:var(--amber-light); color:var(--amber-text); border-color:var(--amber); }
/* ── TABS ────────────────────────────────────────── */
.tabs { display:flex; gap:4px; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--r-lg); padding:4px; margin-bottom:1.5rem; flex-wrap:wrap; overflow-x:auto; }
.tab { padding:8px 14px; font-size:12.5px; font-weight:600; color:var(--muted); border-radius:var(--r); text-decoration:none; transition:all .12s; white-space:nowrap; }
.tab.active { color:var(--navy) !important; font-weight:700; background:var(--surface); box-shadow:var(--sh-xs); }
.tab:hover { text-decoration:none; color:var(--ink); }
/* ── UTILITIES ───────────────────────────────────── */
.flex { display:flex; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-gap { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.muted { color:var(--muted) !important; }
.small { font-size:12px; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.empty-state { text-align:center; padding:3.5rem 1rem; color:var(--muted); }
.empty-state-icon { width:52px; height:52px; border-radius:50%; background:var(--amber-light); color:var(--amber-deeper); display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem; font-size:20px; }
.empty-state-icon .icon { width:24px; height:24px; }
.empty-state h3 { color:var(--ink); margin-bottom:6px; font-size:16px; font-weight:700; }
.empty-state p { font-size:13px; color:var(--muted); max-width:320px; margin:0 auto; }
.pill-row { display:flex; gap:6px; flex-wrap:wrap; }
.stars { color:var(--amber); letter-spacing:1px; font-size:14px; }
.progress-track { display:flex; gap:3px; margin-bottom:.5rem; }
.progress-step { flex:1; height:4px; border-radius:2px; background:var(--bg-alt); }
.progress-step.done { background:var(--green); }
.progress-step.now { background:var(--amber); }
footer.app-footer { padding:1rem 1.5rem; font-size:12px; color:var(--subtle); text-align:center; border-top:1px solid var(--border); background:var(--surface); }
/* ── Shared page-level polish (applies site-wide) ─── */
.page-title { display:flex; align-items:center; gap:9px; }
.table-wrap table thead th { position:sticky; top:0; z-index:1; }
tbody tr:hover td a { text-decoration:none; }
.panel-title .icon,.dash-panel-title .icon { color:var(--amber-deeper); }
/* ================================================================
LANDING PAGE — matches selecttutors.world brand
================================================================ */
body.landing { background:#fff; font-family:var(--font); }
.lp-nav {
position:sticky; top:0; z-index:200;
background:#fff; border-bottom:1px solid var(--border);
padding:0 2rem; height:72px;
display:flex; align-items:center; justify-content:space-between;
box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.lp-nav-brand { display:flex; align-items:center; text-decoration:none; }
.lp-nav-logo { height:50px; object-fit:contain; }
.lp-nav-links { display:flex; align-items:center; gap:8px; }
.lp-nav-link { font-size:14px; font-weight:500; color:var(--body); padding:6px 12px; border-radius:var(--r-sm); transition:all .12s; text-decoration:none; }
.lp-nav-link:hover { color:var(--amber-deeper); text-decoration:none; }
.lp-hero {
background:var(--navy);
display:grid; grid-template-columns:1fr 1fr;
min-height:90vh; overflow:hidden; position:relative;
}
.lp-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--amber); z-index:3; }
.lp-hero-content {
display:flex; flex-direction:column; justify-content:center;
padding:5rem 3rem 5rem 6rem; position:relative; z-index:2;
}
.lp-hero-badge {
display:inline-flex; align-items:center; gap:6px;
background:var(--amber); color:var(--navy);
padding:6px 16px; border-radius:999px;
font-size:11.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
margin-bottom:1.5rem; width:fit-content;
}
.lp-hero h1 {
font-family:var(--font-h);
font-size:clamp(2.4rem,4.5vw,4rem);
font-weight:900; color:#fff;
line-height:1.05; margin-bottom:1.5rem; letter-spacing:-1px;
}
.lp-hero h1 .hl { color:var(--amber); }
.lp-hero-sub {
font-size:1.05rem; color:rgba(255,255,255,.68);
line-height:1.8; margin-bottom:2.5rem; max-width:480px;
}
.lp-hero-cta { display:flex; gap:12px; flex-wrap:wrap; }
.lp-hero-stats {
display:flex; gap:2.5rem; margin-top:3.5rem;
padding-top:2rem; border-top:1px solid rgba(255,255,255,.1);
}
.lp-hero-stat-val {
font-family:var(--font-h); font-size:30px; font-weight:900;
color:var(--amber); line-height:1;
}
.lp-hero-stat-label { font-size:12px; color:rgba(255,255,255,.5); margin-top:4px; letter-spacing:.2px; }
.lp-hero-image { position:relative; overflow:hidden; }
.lp-hero-image img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.lp-hero-image::before {
content:''; position:absolute; inset:0; z-index:1;
background:linear-gradient(to right, var(--navy) 0%, rgba(13,27,42,.2) 40%, transparent 100%);
}
.lp-trust { background:var(--amber); padding:1.25rem 2rem; text-align:center; }
.lp-trust p { font-size:14px; font-weight:700; color:var(--navy); letter-spacing:.2px; }
.lp-section { padding:5.5rem 2rem; max-width:1160px; margin:0 auto; }
.lp-section-eyebrow {
font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
color:var(--amber-deeper); margin-bottom:.75rem;
}
.lp-section h2 {
font-family:var(--font-h); font-size:clamp(1.8rem,3vw,2.6rem);
font-weight:800; color:var(--navy); margin-bottom:.75rem;
line-height:1.12; letter-spacing:-.5px;
}
.lp-section p.lead { font-size:1rem; color:var(--muted); max-width:560px; line-height:1.8; }
.lp-why { background:var(--bg); padding:5.5rem 2rem; }
.lp-why-inner { max-width:1160px; margin:0 auto; }
.lp-why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin-top:3rem; }
.lp-why-card {
background:var(--surface); border:1px solid var(--border);
border-radius:var(--r-xl); padding:2rem; text-align:center;
box-shadow:var(--sh-sm); transition:all .2s;
}
.lp-why-card:hover { box-shadow:var(--sh); transform:translateY(-4px); border-color:var(--amber-mid); }
.lp-why-icon { width:68px; height:68px; background:var(--amber-light); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; overflow:hidden; }
.lp-why-card h3 { font-size:19px; font-weight:800; margin-bottom:.6rem; color:var(--navy); }
.lp-why-card p { font-size:13.5px; color:var(--muted); line-height:1.7; }
.lp-tutors-section { background:var(--navy); padding:5.5rem 2rem; }
.lp-tutors-inner { max-width:1160px; margin:0 auto; }
.lp-tutors-section h2 { color:#fff !important; }
.lp-tutors-section .lp-section-eyebrow { color:var(--amber); }
.lp-tutors-section p.lead { color:rgba(255,255,255,.65); }
.lp-req-grid {
display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:16px; margin-top:3rem;
}
.lp-req-card {
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
border-radius:var(--r-lg); padding:1.75rem; text-align:center; transition:all .2s;
}
.lp-req-card:hover { background:rgba(255,255,255,.09); border-color:var(--amber); }
.lp-req-card h3 { font-size:14px; font-weight:600; color:#fff; line-height:1.45; }
.lp-req-note {
margin-top:2.5rem; padding:1.5rem 2rem;
background:rgba(250,178,35,.12); border:1px solid rgba(250,178,35,.25);
border-radius:var(--r-lg); text-align:center;
font-size:14px; font-weight:600; color:rgba(255,255,255,.85); line-height:1.6;
}
.lp-portals-section { padding:5.5rem 2rem; background:var(--bg); }
.lp-portals-inner { max-width:1160px; margin:0 auto; }
.lp-portals { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:3rem; }
.lp-portal {
border-radius:var(--r-xl); padding:2.25rem; text-align:center;
border:2px solid transparent; transition:all .2s;
}
.lp-portal:hover { transform:translateY(-4px); box-shadow:var(--sh); }
.lp-portal.admin-p { background:var(--navy); border-color:var(--amber); }
.lp-portal.tutor-p { background:var(--amber-light); border-color:var(--amber-mid); }
.lp-portal.student-p { background:var(--blue-light); border-color:var(--blue-mid); }
.lp-portal-icon { font-size:42px; margin-bottom:1.25rem; display:block; }
.lp-portal h3 { font-size:21px; font-weight:800; margin-bottom:.6rem; }
.lp-portal.admin-p h3 { color:var(--amber); }
.lp-portal.tutor-p h3 { color:var(--amber-text); }
.lp-portal.student-p h3 { color:var(--blue-text); }
.lp-portal p { font-size:13.5px; line-height:1.7; margin-bottom:1.5rem; }
.lp-portal.admin-p p { color:rgba(255,255,255,.65); }
.lp-portal.tutor-p p { color:var(--amber-text); opacity:.85; }
.lp-portal.student-p p { color:var(--blue-text); opacity:.85; }
.lp-portal-btns { display:flex; flex-direction:column; gap:8px; }
.lp-testimonials { background:var(--navy); padding:5.5rem 2rem; }
.lp-testimonials-inner { max-width:1160px; margin:0 auto; }
.lp-testimonials h2 { color:#fff !important; }
.lp-testimonials .lp-section-eyebrow { color:var(--amber); }
.lp-testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:3rem; }
.lp-testi-card {
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
border-radius:var(--r-xl); padding:1.75rem; position:relative;
}
.lp-testi-card::before { content:'"'; font-size:60px; font-family:Georgia,serif; color:var(--amber); line-height:.8; position:absolute; top:1.25rem; left:1.5rem; opacity:.6; }
.lp-testi-text { font-size:14px; color:rgba(255,255,255,.8); line-height:1.75; margin-bottom:1.25rem; padding-top:.75rem; font-style:italic; }
.lp-testi-name { font-size:13px; font-weight:700; color:var(--amber); }
.lp-testi-role { font-size:12px; color:rgba(255,255,255,.45); margin-top:2px; }
.lp-cta-strip { background:var(--amber); text-align:center; padding:5rem 2rem; }
.lp-cta-strip h2 { font-size:clamp(1.7rem,3vw,2.5rem); font-weight:800; color:var(--navy) !important; margin-bottom:.75rem; letter-spacing:-.4px; }
.lp-cta-strip p { color:rgba(13,27,42,.65); font-size:1rem; margin-bottom:2rem; }
.lp-footer { background:var(--navy); border-top:4px solid var(--amber); padding:4rem 2rem 2rem; }
.lp-footer-inner { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; }
.lp-footer-brand img { height:46px; margin-bottom:1rem; }
.lp-footer-brand p { font-size:13px; color:rgba(255,255,255,.5); line-height:1.75; max-width:280px; }
.lp-footer-col h4 { font-size:13px; font-weight:700; color:var(--amber); margin-bottom:.85rem; letter-spacing:.3px; }
.lp-footer-col a { display:block; font-size:13px; color:rgba(255,255,255,.55); margin-bottom:.45rem; text-decoration:none; transition:color .12s; }
.lp-footer-col a:hover { color:var(--amber); text-decoration:none; }
.lp-footer-bottom { max-width:1160px; margin:2rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.35); flex-wrap:wrap; gap:8px; }
/* ── GUEST LAYOUT ────────────────────────────────── */
body.guest {
background:var(--navy);
position:relative;
display:flex; align-items:center; justify-content:center;
min-height:100vh; padding:1.5rem; overflow-x:hidden;
}
.guest-bg {
position:fixed; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(620px 460px at 12% 8%, rgba(250,178,35,.16), transparent 60%),
radial-gradient(520px 420px at 92% 92%, rgba(250,178,35,.10), transparent 60%),
linear-gradient(165deg, var(--navy) 0%, var(--navy-80) 60%, var(--navy-60) 100%);
}
.guest-wrap { position:relative; z-index:1; width:100%; max-width:440px; animation: guestRise .45s ease both; }
@keyframes guestRise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .guest-wrap { animation:none; } }
.guest-logo { text-align:center; margin-bottom:1.75rem; }
.guest-logo img { height:54px; }
.guest-logo .brand-tagline { font-size:11.5px; color:rgba(255,255,255,.45); letter-spacing:.5px; text-transform:uppercase; font-weight:600; display:block; margin-top:.4rem; }
.guest-card { position:relative; background:var(--surface); border-radius:var(--r-xl); padding:2.25rem; box-shadow:0 28px 70px rgba(0,0,0,.5); overflow:hidden; }
.guest-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--amber),var(--amber-deeper)); }
.guest-card h2 { font-size:20px; font-weight:800; margin-bottom:.25rem; color:var(--navy); }
.guest-links { text-align:center; margin-top:1.25rem; font-size:13px; color:var(--muted); }
.role-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:1.5rem; }
.role-tab {
display:flex; flex-direction:column; align-items:center; gap:5px;
padding:11px 6px; border-radius:var(--r); border:1.5px solid var(--border-s);
background:var(--surface); color:var(--muted);
font-size:12px; font-weight:600; cursor:pointer;
text-decoration:none; transition:all .12s;
}
.role-tab:hover { border-color:var(--amber); color:var(--amber-text); text-decoration:none; }
.role-tab.active { background:var(--navy); border-color:var(--navy); color:var(--amber) !important; }
.role-tab .role-icon { font-size:18px; line-height:1; }
/* ── STEPPER (multi-step application forms) ───────── */
.stepper { display:flex; align-items:flex-start; margin-bottom:2rem; }
.stepper-item { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.stepper-dot {
width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:700; background:var(--bg-alt); color:var(--subtle);
border:1.5px solid var(--border-s); transition:all .2s;
}
.stepper-item.now .stepper-dot { background:var(--amber); border-color:var(--amber-dark); color:var(--navy); box-shadow:0 0 0 4px var(--amber-light); }
.stepper-item.done .stepper-dot { background:var(--navy); border-color:var(--navy); color:var(--amber); }
.stepper-label { font-size:10.5px; font-weight:600; color:var(--subtle); text-align:center; max-width:76px; line-height:1.3; }
.stepper-item.now .stepper-label { color:var(--ink); }
.stepper-item.done .stepper-label { color:var(--muted); }
.stepper-line { flex:1; height:2px; background:var(--border); margin:13px 4px 0; }
.stepper-line.done { background:var(--amber); }
@media (max-width:420px) { .stepper-label { display:none; } }
/* ================================================================
RESPONSIVE — MOBILE FIRST
================================================================ */
@media (max-width:1023px) {
.lp-footer-inner { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
.topbar { padding:0 1rem; height:56px; }
.brand-sub-pill { display:none; }
.topbar-user-name { display:none; }
.sidebar-toggle { display:block; }
.layout { grid-template-columns:1fr; }
.sidebar {
position:fixed; top:56px; left:0; bottom:0;
width:260px; height:auto;
transform:translateX(-100%);
border-right:1px solid var(--border);
box-shadow:var(--sh-lg);
}
.sidebar.open { transform:translateX(0); }
.main { padding:1.25rem 1rem; }
.lp-nav { padding:0 1rem; height:60px; }
.lp-nav-logo { height:38px; }
.lp-nav-links { gap:4px; }
.lp-nav-link { display:none; }
.lp-nav-links .btn { font-size:12px; padding:7px 12px; }
.lp-hero { grid-template-columns:1fr; min-height:auto; }
.lp-hero-image { height:260px; order:-1; }
.lp-hero-image::before { background:linear-gradient(to bottom,transparent 0%,var(--navy) 90%); }
.lp-hero-content { padding:2.5rem 1.5rem 3rem; }
.lp-hero h1 { font-size:2.2rem; }
.lp-hero-stats { gap:1.5rem; }
.lp-hero-stat-val { font-size:24px; }
.lp-section { padding:3.5rem 1.25rem; }
.lp-why { padding:3.5rem 1.25rem; }
.lp-tutors-section { padding:3.5rem 1.25rem; }
.lp-portals-section { padding:3.5rem 1.25rem; }
.lp-testimonials { padding:3.5rem 1.25rem; }
.lp-cta-strip { padding:3.5rem 1.25rem; }
.lp-footer { padding:3rem 1.25rem 2rem; }
.lp-footer-inner { grid-template-columns:1fr; gap:2rem; }
.lp-footer-bottom { flex-direction:column; text-align:center; gap:6px; }
.cards { grid-template-columns:repeat(2,1fr); }
.page-header { flex-direction:column; align-items:flex-start; }
.page-title { font-size:19px; }
th,td { padding:9px 12px; font-size:12.5px; }
.form-row { grid-template-columns:1fr; gap:0; }
.form-row .form-group { margin-bottom:14px; }
.panel { padding:1rem 1rem; }
.panel-title { font-size:13.5px; }
.tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
body.guest { padding:1rem; }
.guest-card { padding:1.75rem 1.25rem; }
.card-stat .stat-value { font-size:22px; }
}
@media (max-width:420px) {
.cards { grid-template-columns:1fr; }
.lp-hero h1 { font-size:1.85rem; }
.lp-hero-stats { flex-wrap:wrap; gap:1rem; }
.lp-hero-cta { flex-direction:column; }
.lp-hero-cta .btn { width:100%; justify-content:center; }
.role-tabs { gap:4px; }
.role-tab { padding:9px 4px; font-size:11px; }
.lp-cta-strip h2 { font-size:1.5rem; }
}
/* =====================================================================
AUTH — split-screen sign-in (layouts/auth.php)
===================================================================== */
:root {
--font-serif: 'Fraunces', 'Plus Jakarta Sans', serif;
}
body.auth-body { background: var(--navy); }
.auth-shell {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
/* ── Brand panel ─────────────────────────────────────────────────── */
.auth-brand {
position: relative;
overflow: hidden;
padding: 3rem 3.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
background:
radial-gradient(560px 420px at 88% 8%, rgba(250,178,35,.14), transparent 60%),
linear-gradient(165deg, var(--navy) 0%, var(--navy-80) 58%, var(--navy-60) 100%);
color: #fff;
}
.auth-brand-net { position:absolute; inset:0; width:100%; height:100%; opacity:.55; pointer-events:none; }
.auth-net-dots circle { animation: authPulse 4.5s ease-in-out infinite; transform-origin: center; }
.auth-net-dots circle:nth-child(2n) { animation-delay: 1.1s; }
.auth-net-dots circle:nth-child(3n) { animation-delay: 2.2s; }
@keyframes authPulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .auth-net-dots circle { animation: none; } }
.auth-brand-top { position:relative; z-index:1; }
.auth-brand-logo { height:36px; filter:brightness(0) invert(1); }
.auth-brand-logo-fallback { font-size:18px; font-weight:900; color:var(--amber); }
.auth-brand-mid { position:relative; z-index:1; max-width:440px; }
.auth-brand-eyebrow {
display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
color: var(--amber); margin-bottom: 1.1rem;
}
.auth-brand-mid h1 {
font-family: var(--font-serif); font-weight:500; font-size: clamp(2.1rem, 3.4vw, 2.85rem);
line-height: 1.12; letter-spacing: -.5px; color:#fff; margin-bottom: 1.1rem;
}
.auth-brand-mid h1 em { font-style: italic; color: var(--amber); }
.auth-brand-mid p { font-size: 15px; line-height:1.65; color: rgba(255,255,255,.62); max-width: 360px; }
.auth-brand-bottom { position:relative; z-index:1; }
.auth-brand-rule { display:block; width:40px; height:2px; background:var(--amber); margin-bottom:.85rem; }
.auth-brand-bottom p { font-size: 12.5px; letter-spacing:.4px; color: rgba(255,255,255,.4); font-weight:600; }
/* ── Form panel ──────────────────────────────────────────────────── */
.auth-panel {
background: var(--bg);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 2.5rem 2rem;
}
.auth-panel-inner { width: 100%; max-width: 380px; }
.auth-panel-inner-wide { max-width: 560px; }
.auth-panel-logo { display:none; margin-bottom: 1.75rem; text-align:center; }
.auth-panel-logo img { height: 34px; }
.auth-h2 { font-family: var(--font-h); font-size: 25px; font-weight: 800; color: var(--ink); letter-spacing:-.4px; margin-bottom: .3rem; }
.auth-sub { font-size: 14px; color: var(--muted); margin-bottom: 1.85rem; line-height:1.5; }
.auth-role-tabs {
display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-lg);
padding: 4px; margin-bottom: 1.85rem;
}
.auth-role-tab {
text-align:center; padding: 8px 6px; border-radius: var(--r);
font-size: 13px; font-weight: 600; color: var(--muted);
}
.auth-role-tab:hover { color: var(--ink); text-decoration:none; }
.auth-role-tab.active { background: var(--navy); color: var(--amber) !important; box-shadow: var(--sh-sm); }
.auth-form .form-group { margin-bottom: 1.1rem; }
.auth-form .form-label { font-size: 12.5px; font-weight:600; color: var(--body); margin-bottom:.4rem; display:block; }
.auth-input-wrap { position: relative; }
.auth-input-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color: var(--subtle); pointer-events:none; }
.auth-input { padding-left: 38px !important; }
.auth-input-wrap:focus-within .auth-input-icon { color: var(--amber-deeper); }
.auth-row { display:flex; justify-content:flex-end; margin-bottom: 1.35rem; margin-top:-.4rem; }
.auth-link { font-size: 12.5px; color: var(--muted); font-weight:500; }
.auth-link:hover { color: var(--amber-deeper); }
.auth-submit { width:100%; padding: 12px; font-size: 14.5px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin: 1.6rem 0 1.1rem; font-size:12px; font-weight:600; color: var(--subtle); }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background: var(--border); }
.auth-cta { width:100%; }
.auth-help { text-align:center; margin-top: 1.75rem; font-size: 12.5px; color: var(--muted); }
.auth-panel-footer { margin-top: 2.5rem; font-size: 11.5px; color: var(--subtle); }
@media (max-width: 900px) {
.auth-shell { grid-template-columns: 1fr; }
.auth-brand { display: none; }
.auth-panel-logo { display: block; }
.auth-panel { min-height: 100vh; }
}
/* ── ICONS (replaces colour emoji throughout the UI) ────────────── */
.icon { width:1em; height:1em; display:inline-block; vertical-align:-0.14em; flex-shrink:0; }
.sidebar-item .icon { width:15px; height:15px; }
.page-title .icon { width:20px; height:20px; vertical-align:-0.12em; }
.panel-title .icon { width:16px; height:16px; }
.btn .icon { width:14px; height:14px; }
.stat-label .icon { width:12px; height:12px; }
.success-badge {
width:64px; height:64px; border-radius:50%;
background:linear-gradient(155deg,var(--amber),var(--amber-deeper));
display:flex; align-items:center; justify-content:center;
margin:0 auto 1.25rem;
box-shadow:0 8px 24px rgba(250,178,35,.35);
}
.success-badge-icon { width:30px; height:30px; color:var(--navy); }
/* =====================================================================
ADMIN DASHBOARD — sleek overview module
===================================================================== */
@keyframes dashRise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dash-hero,.dash-stat,.dash-panel,.dash-card { animation:none !important; } }
/* ── Hero banner ─────────────────────────────────── */
.dash-hero {
position:relative; overflow:hidden;
background:linear-gradient(135deg,var(--navy) 0%,var(--navy-80) 55%,var(--navy-60) 100%);
border-radius:var(--r-xl); padding:1.9rem 2.25rem; margin-bottom:1.75rem;
display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
box-shadow:var(--sh-lg);
animation:dashRise .4s ease both;
}
.dash-hero::before {
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(460px 320px at 88% -10%, rgba(250,178,35,.20), transparent 60%),
radial-gradient(360px 280px at 100% 120%, rgba(250,178,35,.10), transparent 60%);
}
.dash-hero-main { position:relative; z-index:1; min-width:220px; }
.dash-hero-eyebrow { display:block; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--amber); margin-bottom:.5rem; }
.dash-hero h1 { font-family:var(--font-h); font-size:clamp(1.4rem,2.4vw,1.85rem); font-weight:800; color:#fff; letter-spacing:-.4px; margin-bottom:.35rem; }
.dash-hero p { font-size:13px; color:rgba(255,255,255,.6); }
.dash-hero-actions { position:relative; z-index:1; display:flex; gap:10px; flex-wrap:wrap; }
.dash-hero-btn {
display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--r);
font-size:13px; font-weight:600; text-decoration:none; transition:all .15s; white-space:nowrap;
background:rgba(255,255,255,.08); color:#fff !important; border:1.5px solid rgba(255,255,255,.16);
}
.dash-hero-btn:hover { background:rgba(255,255,255,.14); text-decoration:none; transform:translateY(-1px); }
.dash-hero-btn.primary { background:linear-gradient(155deg,var(--amber),var(--amber-dark)); color:var(--navy) !important; border-color:var(--amber-dark); box-shadow:var(--sh-amber); font-weight:700; }
.dash-hero-btn.primary:hover { background:linear-gradient(155deg,var(--amber-dark),var(--amber-deeper)); }
.dash-hero-btn .pip { display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:rgba(255,255,255,.22); font-size:10.5px; font-weight:800; }
.dash-hero-btn.primary .pip { background:rgba(13,27,42,.18); color:var(--navy); }
/* ── Stat cards ──────────────────────────────────── */
.dash-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:14px; margin-bottom:1.75rem; }
.dash-stat {
background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
padding:1.1rem 1.2rem; display:flex; align-items:flex-start; gap:.85rem;
box-shadow:var(--sh-xs); transition:box-shadow .18s,transform .18s,border-color .18s;
animation:dashRise .4s ease both;
}
.dash-stat:hover { box-shadow:var(--sh-sm); transform:translateY(-2px); border-color:var(--amber-mid); }
.dash-stat-icon { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--amber-light); color:var(--amber-deeper); }
.dash-stat-icon svg { width:18px; height:18px; }
.dash-stat-icon.blue { background:var(--blue-light); color:var(--blue); }
.dash-stat-icon.green { background:var(--green-light); color:var(--green); }
.dash-stat-icon.red { background:var(--red-light); color:var(--red); }
.dash-stat-icon.navy { background:var(--navy); color:var(--amber); }
.dash-stat-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; font-weight:700; color:var(--subtle); margin-bottom:5px; }
.dash-stat-value { font-family:var(--font-h); font-size:24px; font-weight:800; color:var(--ink); letter-spacing:-.5px; line-height:1; }
.dash-stat-sub { font-size:11px; color:var(--muted); margin-top:6px; }
/* ── Analytics row: donut + funnel ───────────────── */
.dash-grid-2 { display:grid; grid-template-columns:1fr 1.35fr; gap:1.5rem; margin-bottom:1.5rem; align-items:stretch; }
.dash-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.35rem 1.5rem; box-shadow:var(--sh-xs); animation:dashRise .45s ease both; }
.dash-card-title { font-family:var(--font-h); font-size:14px; font-weight:700; color:var(--ink); margin-bottom:1.1rem; display:flex; align-items:center; gap:7px; }
.dash-donut-wrap { display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.dash-donut { width:118px; height:118px; border-radius:50%; flex-shrink:0; position:relative; }
.dash-donut::before { content:''; position:absolute; inset:15px; border-radius:50%; background:var(--surface); }
.dash-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.dash-donut-center strong { font-family:var(--font-h); font-size:17px; color:var(--ink); letter-spacing:-.3px; }
.dash-donut-center span { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:1px; }
.dash-legend { display:flex; flex-direction:column; gap:11px; flex:1; min-width:150px; }
.dash-legend-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.dash-legend-key { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--body); font-weight:500; }
.dash-legend-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.dash-legend-val { font-family:var(--font-h); font-weight:700; font-size:13.5px; color:var(--ink); }
.dash-funnel { display:flex; flex-direction:column; gap:11px; }
.dash-funnel-row { display:grid; grid-template-columns:82px 1fr 34px; align-items:center; gap:10px; }
.dash-funnel-label { font-size:12px; font-weight:600; color:var(--muted); }
.dash-funnel-track { height:9px; border-radius:5px; background:var(--bg-alt); overflow:hidden; }
.dash-funnel-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,var(--amber),var(--amber-dark)); transition:width .5s ease; }
.dash-funnel-count { text-align:right; font-family:var(--font-h); font-weight:700; font-size:13px; color:var(--ink); }
.dash-funnel-note { font-size:11.5px; color:var(--muted); margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--border); }
/* ── Attention panels ────────────────────────────── */
.dash-alerts-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.5rem; margin-bottom:1.5rem; }
.dash-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-xs); overflow:hidden; display:flex; flex-direction:column; animation:dashRise .45s ease both; min-width:0; }
.dash-panel-head { display:flex; align-items:center; gap:10px; padding:1.05rem 1.3rem; border-bottom:1px solid var(--border); }
.dash-panel-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--amber-light); color:var(--amber-deeper); }
.dash-panel-icon svg { width:16px; height:16px; }
.dash-panel-icon.blue { background:var(--blue-light); color:var(--blue); }
.dash-panel-icon.red { background:var(--red-light); color:var(--red); }
.dash-panel-icon.green { background:var(--green-light); color:var(--green); }
.dash-panel-title { flex:1; font-family:var(--font-h); font-size:13.5px; font-weight:700; color:var(--ink); }
.dash-panel-count { font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--bg-alt); color:var(--muted); }
.dash-panel-count.has-items { background:var(--red-light); color:var(--red-text); }
.dash-panel .table-wrap { border:none; border-radius:0; box-shadow:none; overflow-x:auto; min-width:0; }
.dash-panel table { font-size:12.5px; table-layout:fixed; width:100%; }
.dash-panel th,.dash-panel td { padding:9px 1rem; white-space:normal; word-break:break-word; }
.dash-panel-empty { padding:2.1rem 1.3rem; text-align:center; }
.dash-panel-empty-icon { width:36px; height:36px; border-radius:50%; background:var(--green-light); color:var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto .65rem; }
.dash-panel-empty-icon svg { width:17px; height:17px; }
.dash-panel-empty p { font-size:12.5px; color:var(--muted); }
.dash-panel-footer { padding:.7rem 1.3rem; border-top:1px solid var(--border); }
@media (max-width:900px) { .dash-grid-2 { grid-template-columns:1fr; } }
/* =====================================================================
MOBILE RESPONSIVENESS — broader pass
===================================================================== */
@media (max-width: 640px) {
/* Action rows (list row buttons, Credentials & Account panels) stack
cleanly full-width instead of wrapping into a cramped inline mess. */
td .flex-gap,
td form,
.panel .flex-gap {
flex-direction: column;
align-items: stretch !important;
}
td .flex-gap form,
.panel .flex-gap form { width: 100%; }
td .flex-gap .btn,
.panel .flex-gap .btn,
td form .btn { width: 100%; justify-content: center; }
td .flex-gap input.form-input,
.panel .flex-gap input.form-input { max-width: none !important; width: 100%; }
/* Table cells: slightly larger tap targets, less cramped padding */
th, td { padding: 10px 12px; }
/* Lower-priority table columns hide on very small screens — the
essential info (name/status/action) stays, the rest is one tap
away via "View". Applied opt-in via .hide-mobile on | / | . */
.hide-mobile { display: none !important; }
/* Page header actions (e.g. "+ Add Tutor") go full width so they're
easy to tap and don't fight the title for space. */
.page-header { flex-direction: column; align-items: stretch; }
.page-header > .btn,
.page-header > a.btn { width: 100%; text-align: center; }
/* Forms that were laid out as inline rows (filters, test-email,
credentials reset) stack into a clean single column. */
.panel form[style*="display:flex"] { flex-direction: column; align-items: stretch !important; }
.panel form[style*="display:flex"] input,
.panel form[style*="display:flex"] .btn { width: 100%; max-width: none !important; }
/* Tabs (email templates Simple/Code, application status tabs) scroll
smoothly with a bit of edge padding so the first/last tab isn't
flush against the screen edge. */
.tabs { padding-bottom: 2px; }
.tab { padding: 9px 12px; font-size: 12.5px; }
/* Stat cards: 2-up instead of an awkward single wide column */
.cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.card-stat .stat-value { font-size: 22px; }
/* Dashboard: hero stacks, stat cards go 2-up, donut re-centers */
.dash-hero { padding: 1.5rem 1.4rem; flex-direction: column; align-items: flex-start; }
.dash-hero-actions { width: 100%; }
.dash-hero-btn { flex: 1; justify-content: center; }
.dash-stats { grid-template-columns: repeat(2, 1fr); }
.dash-stat-value { font-size: 20px; }
.dash-donut-wrap { justify-content: center; text-align: left; }
/* Star rating picker (reviews) — slightly smaller so 5 stars never
wrap to a second line on a narrow screen. */
#starPicker { font-size: 26px !important; }
}
@media (max-width: 420px) {
.cards { grid-template-columns: 1fr 1fr; }
.brand-logo-img { max-width: 130px; }
}
|