:root { color-scheme: light; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #2b2430; background: #f7f3f0; --ink:#2b2430; --muted:#776f7b; --surface:rgba(255,255,255,.92); --line:#e9e0dc; --brand:#e76f51; --brand-dark:#b94b34; --plum:#251d2b; --cream:#fff8f2; --success:#25845d; --warning:#a66b16; --danger:#bd3d45; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background: radial-gradient(circle at 10% 0%,#fff0e8 0,transparent 34rem),linear-gradient(145deg,#fbf8f6 0%,#f5efec 100%); }
.ambient { position:fixed; z-index:-1; border-radius:999px; filter:blur(3px); opacity:.58; pointer-events:none; }
.ambient-one { width:24rem; height:24rem; right:-9rem; top:8rem; background:#f2c7bb; }
.ambient-two { width:18rem; height:18rem; left:-8rem; bottom:4rem; background:#ddd0df; }
.site-shell { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:22px 0 36px; }
.app-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; padding:12px 18px; margin-bottom:34px; background:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.9); border-radius:22px; box-shadow:0 18px 60px rgba(54,35,48,.08); backdrop-filter:blur(18px); position:sticky; top:12px; z-index:20; }
.brand-lockup { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.brand-lockup:hover { text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; border-radius:16px; color:white; background:linear-gradient(145deg,#ef886d,#d95c43); font-family:Georgia,serif; font-weight:700; letter-spacing:-1px; box-shadow:0 10px 24px rgba(231,111,81,.3); }
.brand-lockup strong { display:block; font-family:Georgia,"Times New Roman",serif; font-size:22px; letter-spacing:-.35px; }
.brand-lockup small { display:block; margin-top:2px; color:var(--muted); font-size:12px; letter-spacing:.04em; }
.app-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.app-nav a,.nav-logout { appearance:none; border:0; margin:0; padding:10px 14px; border-radius:12px; background:transparent; color:#5d5361; font-family:inherit; font-size:14px; font-weight:600; line-height:1; cursor:pointer; text-decoration:none; transition:.18s ease; }
.app-nav a:hover,.nav-logout:hover { background:#f7eeea; color:var(--brand-dark); text-decoration:none; }
.page-content { min-height:calc(100vh - 210px); }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 24px; padding:0 4px; }
.page-heading h1,.hero-title { margin:5px 0 8px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(32px,4vw,52px); line-height:1.02; letter-spacing:-1.2px; }
.page-heading p { max-width:650px; margin:0; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--brand-dark); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow::before { content:""; width:20px; height:2px; border-radius:2px; background:var(--brand); }
.lead { color:#625966; font-size:17px; line-height:1.65; }
.muted { color:var(--muted); font-size:14px; line-height:1.55; }
.grid,.schedule-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; }
.card { position:relative; margin-bottom:18px; padding:24px; overflow:hidden; background:var(--surface); border:1px solid rgba(255,255,255,.95); border-radius:22px; box-shadow:0 14px 45px rgba(61,43,53,.075); }
.card.subtle { background:rgba(255,255,255,.72); box-shadow:none; border-color:var(--line); }
.class-card { display:flex; flex-direction:column; min-height:250px; }
.class-card::after { content:""; position:absolute; right:-45px; top:-55px; width:150px; height:150px; border-radius:50%; background:linear-gradient(145deg,rgba(238,139,113,.22),rgba(226,198,218,.16)); }
.class-card h2 { max-width:80%; font-size:23px; }
.class-card .button { align-self:flex-start; margin-top:auto; }
.meta-row { display:flex; align-items:center; gap:10px; margin:12px 0 18px; color:#625966; font-size:14px; }
.meta-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#faeee9; color:var(--brand-dark); }
h1 { margin:0 0 16px; font-family:Georgia,"Times New Roman",serif; font-size:34px; line-height:1.1; letter-spacing:-.6px; }
h2 { margin:0 0 12px; font-size:20px; line-height:1.25; }
h3 { margin:0 0 8px; font-size:16px; }
p { line-height:1.55; }
a { color:var(--brand-dark); text-decoration:none; }
a:hover { text-decoration:underline; }
label { display:block; margin:16px 0 7px; color:#4b414e; font-weight:700; font-size:13px; }
input,select { width:100%; min-height:48px; padding:11px 13px; border:1px solid #ddd2d6; border-radius:13px; outline:none; background:#fff; color:var(--ink); font:inherit; transition:border-color .15s,box-shadow .15s; }
input:focus,select:focus { border-color:#e78a73; box-shadow:0 0 0 4px rgba(231,111,81,.12); }
input[readonly] { background:#f7f3f1; color:#857b82; }
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; margin-top:14px; padding:11px 17px; border:0; border-radius:14px; background:linear-gradient(145deg,#ec7b5f,#d85d45); color:#fff; font-family:inherit; font-size:14px; font-weight:700; line-height:1; cursor:pointer; text-decoration:none; box-shadow:0 9px 22px rgba(220,94,69,.2); transition:transform .15s,box-shadow .15s,opacity .15s; }
button:hover,.button:hover { transform:translateY(-1px); box-shadow:0 12px 28px rgba(220,94,69,.26); text-decoration:none; }
button:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
button.secondary,.button.secondary { background:#f4ece9; color:#6b4a43; box-shadow:none; }
button.danger,.button.danger { background:#a83c44; box-shadow:none; }
.inline { display:inline; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.status-pill { display:inline-flex; align-items:center; width:max-content; gap:7px; margin:0 0 18px; padding:7px 11px; border-radius:999px; font-size:12px; font-weight:800; }
.status-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status-open { color:#247653; background:#e7f5ee; }
.status-closed { color:#956216; background:#fff3d9; }
.status-finished { color:#776f7b; background:#f0ecee; }
.status-admin { color:#7a456c; background:#f5eaf2; }
.notice { margin:16px 0; padding:14px 16px; border:1px solid #efd9d1; border-radius:15px; background:#fff5f0; color:#6a4a42; line-height:1.55; }
.error { margin:12px 0; padding:12px 14px; border-radius:12px; background:#fff0f1; color:var(--danger); font-weight:700; }
.credentials { padding:16px; border:1px dashed #dfb294; border-radius:15px; background:#fff8e9; }
code { user-select:all; padding:3px 6px; border-radius:7px; background:#f3eeee; color:#553f4d; }
.auth-shell { display:grid; grid-template-columns:1.08fr .92fr; min-height:610px; overflow:hidden; border-radius:30px; background:var(--plum); box-shadow:0 30px 90px rgba(38,25,36,.18); }
.auth-story { display:flex; flex-direction:column; justify-content:flex-end; min-height:610px; padding:54px; color:white; background:radial-gradient(circle at 20% 15%,rgba(231,111,81,.45),transparent 23rem),linear-gradient(145deg,#2c2331,#1e1823); }
.auth-story .eyebrow { color:#ffc0ae; }
.auth-story .hero-title { max-width:560px; font-size:clamp(42px,6vw,72px); }
.auth-story p { max-width:520px; color:#d9d0da; font-size:17px; }
.auth-card { display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,5vw,64px); background:#fffaf7; }
.auth-card h1 { font-size:40px; }
.auth-card button { width:100%; margin-top:24px; }
.auth-points { display:flex; gap:18px; flex-wrap:wrap; margin-top:28px; color:#bcb1bd; font-size:13px; }
.auth-points span::before { content:"✓"; margin-right:6px; color:#ef8a70; }
.table-wrap { width:100%; overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:640px; }
th,td { padding:14px 10px; border-bottom:1px solid #eee6e3; text-align:left; vertical-align:middle; }
th { color:#887f86; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
td { font-size:14px; }
tr:last-child td { border-bottom:0; }
td .button,td button,td .status-pill { margin-top:0; margin-bottom:0; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.section-title h2 { margin:0; }
.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.admin-card { margin-bottom:0; }
.stream-card { padding:0; background:#17131a; color:white; }
.stream-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:24px 24px 18px; }
.stream-head h1 { margin:4px 0 8px; color:white; }
.stream-head p { margin:0; color:#c8bec9; }
video { display:block; width:100%; max-height:72vh; background:#080609; object-fit:contain; }
.stream-shell { overflow:hidden; background:#080609; border-radius:18px; }
.stream-shell:fullscreen { width:100vw; height:100vh; border-radius:0; }
.stream-shell:fullscreen .stream-frame { height:100vh; min-height:100vh; max-height:none; border-radius:0; }
.stream-frame { display:block; width:100%; min-height:460px; height:56.25vw; max-height:72vh; border:0; background:#080609; }
.stream-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:18px 24px 24px; }
.stream-actions button { margin-top:0; }
.broadcast-status { flex:1 1 240px; margin:0; padding:12px 15px; border-radius:13px; background:rgba(255,255,255,.08); color:#e8e0e9; font-size:14px; }
.message-card { max-width:680px; margin:80px auto; padding:38px; text-align:center; }
.message-card .eyebrow { justify-content:center; }
footer { display:flex; justify-content:space-between; gap:20px; margin-top:40px; padding:22px 6px 0; border-top:1px solid rgba(109,89,101,.14); color:#8a8188; font-size:12px; }
@media (max-width:820px) { .site-shell{width:min(100% - 20px,1180px);padding-top:10px}.app-header{position:relative;top:0;align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:24px}.app-nav{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.app-nav a,.nav-logout{white-space:nowrap;background:#f8f2ef}.auth-shell{grid-template-columns:1fr}.auth-story{min-height:330px;padding:34px}.auth-card{padding:34px}.admin-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start;flex-direction:column}.stream-frame{min-height:55vh}.stream-head{flex-direction:column}.card{padding:20px} }
@media (max-width:520px) { .brand-lockup strong{font-size:20px}.brand-mark{width:42px;height:42px;flex-basis:42px}.auth-story{min-height:300px;padding:28px}.auth-story .hero-title{font-size:42px}.auth-card{padding:28px 22px}.page-heading h1,.hero-title{font-size:36px}.schedule-grid{grid-template-columns:1fr}.class-card{min-height:230px}.stream-head{padding:20px 18px 14px}.stream-actions{padding:14px 18px 20px}.stream-actions button{width:100%}.stream-frame{min-height:62vh}footer{flex-direction:column}.message-card{margin:40px auto;padding:28px 22px} }