/* =============================
CSS FOUNDATION & THEME TOKENS
============================= */
:root{
--bg: #0b1020;             /* deep navy for subtle contrast */
--panel: #101735;          /* elevated surfaces */
--muted: #a6b0d0;          /* secondary text */
--text: #eef1ff;           /* primary text */
--brand: #7aa6ff;          /* accent */
--brand-600: #5d8fff;
--brand-700: #4a79e6;
--success: #46d38f;
--warn: #ffcc66;
--danger: #ff7a7a;
--ring: rgba(122,166,255,.35);
--card: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
--radius: 18px;
--shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
}

*{ box-sizing: border-box; }

html,body {
	height:100%;
}

body {
	background: radial-gradient(1200px 600px at 80% -10%, rgba(122,166,255,.20), transparent 40%), var(--bg);
	color:var(--text);
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
	line-height:1.5; letter-spacing:.2px;
	margin:0;
}

.container {
	margin-inline:auto;
	width:min(1100px, 92%);
}

.grid {
	display:grid;
	gap:1rem;
}

.grid-2 {grid-template-columns: repeat(2, minmax(0,1fr));}
.grid-3 {grid-template-columns: repeat(3, minmax(0,1fr));}

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

/* ============== CARDS ============== */
.card {
	background:var(--card);
	border:1px solid rgba(255,255,255,.08);
	border-radius:var(--radius);
	box-shadow: var(--shadow);
	padding:1rem;
}

.card .meta {
	font-size:.9rem;
	color:var(--muted);
}

.card h3 {
	margin:.2rem 0 .6rem;
	font-size:1.05rem;
}


/* ============== CLASS LIST ============== */
.class-card {
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
	border:1px solid rgba(255,255,255,.1);
	border-radius:16px;
	display:grid;
	gap:.8rem; padding:1rem;
	grid-template-columns: 1fr auto;
}
.class-card .row {
	align-items:center;
	display:flex;
	flex-wrap:wrap;
	gap:.6rem;
 }

.class-card .title {
	font-size:1.05rem;
	font-weight:800;
	}

.price {font-weight:800;}

/* ============== CALLOUTS ============== */
.callout {
	display:flex;
	align-items:center;
	gap:.8rem;
	padding: .9rem 1rem;
	border-radius:14px;
	background: rgba(70,211,143,.12);
	border:1px solid rgba(70,211,143,.35);
}

/* ============== FOOTER ============== */
footer {
	margin-top:3rem;
	padding:2rem 0 4rem; color:var(--muted);
}

/* ============== HERO ============== */
.hero {padding:4.5rem 0 3rem; }
.hero h1 {
	font-size: clamp(2rem, 3vw + 1rem, 3.2rem);
	line-height:1.05; margin:.6rem 0 1rem;
}

.hero p {
	color:var(--muted);
	font-size: clamp(1rem, .8vw + .8rem, 1.25rem);
	max-width: 55ch;
}

.hero-actions {
	display:flex;
	flex-wrap:wrap;
	gap:.8rem;
	margin-top:1.2rem;
}

/* ============== NAVBAR ============== */
.brand {
	align-items:center;
	display:flex;
	gap:.7rem;
	font-weight:800;
}

.brand svg {
	width:28px;
	height:28px;
}

.nav-inner {
	align-items:center;
	display:flex;
	justify-content:space-between;
	padding:.75rem 0;
}

.nav-links {
	align-items:center;
	display:flex;
	flex-wrap:wrap;
	gap:.8rem;
}

.navbar {
	background: linear-gradient(180deg, rgba(16,23,53,.85), rgba(16,23,53,.55));
	backdrop-filter:saturate(1.1) blur(8px);
	border-bottom:1px solid rgba(255,255,255,.08);
	position:sticky;
	top:0;
	z-index:50;
}

/* ============== ROLE TABS (CSS-only) ============== */
.tabbar {
	background: rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.1);
	border-radius:999px;
	display:flex;
	flex-wrap:wrap;
	gap:.6rem;
	padding:.5rem;
}

.tabbar a {
	border:1px solid transparent;
	border-radius:999px;
	color:var(--muted);
	flex:1 1 auto;
	font-weight:700;
	padding:.55rem .9rem;
	text-align:center;
	text-decoration:none;
}

.tabbar a[aria-current="page"], .tabbar a:focus, .tabbar a:hover {
	background: rgba(122,166,255,.12);
	border-color: rgba(122,166,255,.3);
	color:var(--text);
	outline:none;
}

.tabs {margin-top:2rem;}

section[role="tabpanel"]{ display:none; }
section[role="tabpanel"].active{ display:block; }

/* ============== SCHEDULE PREVIEW ============== */
.schedule {
	display:grid;
	gap:.5rem;
	grid-template-columns: repeat(7, 1fr);
}

.slot {
	background: rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.08);
	border-radius:10px;
	font-size:.85rem;
	padding:.6rem;
	text-align:center;}
	
.slot.busy {
	background: rgba(122,166,255,.12);
	border-color: rgba(122,166,255,.35);
}


/* ============== SEARCH MOCK ============== */
.search {
	background: rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.12);
	border-radius:14px;
	display:flex;
	flex-wrap:wrap;
	gap:.6rem;
	padding: .8rem;
}

.search input, .search select {
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.14);
	color:var(--text);
	border-radius:12px;
	flex:1 1 220px;
	padding:.8rem .9rem;
	width:100%;   
}

/* ============== UI PRIMITIVES ============== */
.btn {
	align-items:center;
	border:1px solid transparent;
	border-radius:14px;
	cursor:pointer;
	display:inline-flex;
	font-weight:700;
	gap:.5rem;
	justify-content:center;
	padding:.8rem 1rem;
	text-decoration:none;
	transition:.2s ease;
}

.btn-ghost {
	background: transparent;
	border-color: rgba(255,255,255,.15);
	color:var(--text);
}
.btn-ghost:hover{ background: rgba(255,255,255,.06); }

.btn-primary {
	background: linear-gradient(180deg, var(--brand), var(--brand-600));
	box-shadow: 0 10px 20px rgba(47,103,255,.25);
	color:white;
}

.btn-primary:hover {
	transform: translateY(-1px);
	background: linear-gradient(180deg, var(--brand-600), var(--brand-700));
}

.btn-red {
	background: linear-gradient(180deg, #ff9aa2, #ff7a7a);
	border-color: #ff7a7a; color: #fff;
	transform: translateY(-1px);
}

.btn-red:hover {
	background: linear-gradient(180deg, #ff7a7a, #ff5f5f);
	border-color: #ff5f5f; transform: translateY(-1px);
}

.btn-small { padding: 0.5rem 0.8rem; font-size: 0.55rem; border-radius: 6px;}

.kicker {
	color: var(--brand);
	font-size:.8rem;
	font-weight:800;
	letter-spacing:.18em;
	text-transform:uppercase;
}

.muted {color:var(--muted);}

.panel {
	background:var(--panel);
	border-radius:var(--radius);
	box-shadow: var(--shadow);
}

.pill {
	align-items:center;
	background: rgba(122,166,255,.12);
	border:1px solid rgba(122,166,255,.25);
	border-radius:999px;
	color: var(--brand);
	display:inline-flex;
	font-size:.85rem;
	font-weight:600;
	gap:.5rem;
	padding:.35rem .7rem;
}

.surface {
	background:var(--card);
	border:1px solid rgba(255,255,255,.08);
	border-radius:var(--radius);
	box-shadow: var(--shadow);
}

.tag {
	align-items:center;
	background: rgba(255,255,255,.06);
	border:1.1px solid rgba(255,255,255,.12);
	border-radius:999px;
	display:inline-flex;
	font-size:.40rem;
	gap:.35rem;
	padding:.28rem .6rem;
}

/* Utility */
.center {text-align:center;}

.inline {
	display:inline-flex;
	align-items:center;
	gap:.5rem;
}

.mb-0 {margin-bottom:0;}
.mt-2 {margin-top:.5rem;}
.mt-3 {margin-top:1rem;}
.mt-4 {margin-top:1.5rem;}
.mt-6 {margin-top:2rem;}
.mt-8 {margin-top:3rem;}

.right{text-align:right;}

/* ============== MEDIA ============== */

@media (prefers-color-scheme: light) {
	:root{
	--bg:#f6f8ff; --panel:#ffffff; --text:#0b1020; --muted:#50608f;
	--brand:#2f67ff; --brand-600:#2958da; --brand-700:#224ab7; --ring: rgba(47,103,255,.25);
	--card: linear-gradient(180deg, rgba(17,24,39,.05), rgba(17,24,39,.025));
	--shadow: 0 12px 28px rgba(21,25,41,.08), inset 0 1px 0 rgba(255,255,255,.6);
	}
}

@media (max-width: 700px) {.grid-3,.grid-2{ grid-template-columns: 1fr; } }
@media (max-width: 900px) { .grid-3{ grid-template-columns: 1fr 1fr; } }