@font-face{font-family:TeacherFlixDisplay;src:url('/fonts/classflix-display.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
/* TeacherFlix identity. Lesson colors and drawing swatches remain authored content. */
:root{--bg:#0b0b0d;--panel:#151517;--line:#333337;--muted:#aaaab3;--text:#f8f8fa;--blue:#ed1127;--accent:#ff3045;--accent-button:#e50920;--accent-hover:#ff2036;--accent-soft:#301018;--accent-line:#8b2431;--accent-text:#ffb7c0}
body{font-family:Arial,Helvetica,sans-serif;background:#0b0b0d;color:#f8f8fa}
.brand,.wordmark{font-family:Impact,'Arial Narrow',sans-serif!important;font-weight:900!important;color:var(--accent)!important;letter-spacing:-1.5px!important;text-decoration:none}.brand{font-size:36px!important}.brand small,.brandmark{display:none!important}
body.collection-layout .topbar{background:#0c0c0eee;border-color:#28282c;min-height:84px;gap:24px}.top-actions{flex-wrap:wrap;justify-content:flex-end}.top-actions .button{font-size:12px}
.collection-home{position:relative}.collection-heading{position:relative;overflow:hidden;min-height:290px;padding:48px!important;border:1px solid var(--accent-line);border-radius:24px;background:radial-gradient(ellipse at 88% 40%,var(--hero-glow),transparent 58%),linear-gradient(120deg,#151517,var(--accent-soft));margin:24px 0 28px!important}.collection-heading:after{content:'';position:absolute;width:165px;height:470px;right:12%;top:-100px;transform:rotate(28deg);border:18px dashed var(--film-line);box-shadow:0 0 0 2px var(--film-line);pointer-events:none}.collection-heading>div,.collection-heading>button{position:relative;z-index:1}.collection-heading h1{font-size:clamp(32px,4vw,54px)!important;line-height:1.06!important;letter-spacing:-2px!important;text-transform:none;max-width:670px;margin:16px 0!important}.collection-heading h1 span{color:var(--accent)!important}.collection-heading p{max-width:490px;font-size:15px!important;line-height:1.65}.eyebrow{letter-spacing:2.2px;font-size:10px;color:#e6b6bf}.button.primary,.new-button{background:var(--accent-button)!important;border-color:var(--accent-line)!important;color:#fff!important}.button{border-radius:9px}.collection-card{background:#171719;border-color:#333338}.collection-card.selected{border-color:var(--accent-line)}.collection-poster,.poster-placeholder{background:linear-gradient(135deg,var(--accent-soft),#111114)!important}.poster-placeholder svg{color:var(--accent)}.module-heading h2{font-size:21px}.collection-meta{padding-top:25px!important}.module-empty{color:#b6b6bf}.lesson-module{border-color:#303035!important}.classflix-tabs{display:flex;gap:24px;border-bottom:1px solid #333338}.classflix-tabs button{font-size:15px;font-weight:700;color:#b4b4be;padding:18px 4px;background:none;border:0;border-bottom:3px solid transparent}.classflix-tabs button[aria-current=page]{color:white;border-bottom-color:var(--accent)}
[data-library-view=catalog] .collection-meta,[data-library-view=catalog] #collectionGrid,[data-library-view=mine] .catalog-section{display:none!important}.catalog-section{padding:34px 0}.catalog-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.catalog-heading h2{font-size:28px;margin:9px 0}.catalog-heading p{color:#b2b2bc}.catalog-module{margin:30px 0}.catalog-module h3{font-size:21px}.catalog-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}.catalog-card{border:1px solid #353038;border-radius:14px;overflow:hidden;background:#19181c;transition:transform .2s,border-color .2s}.catalog-card:hover{transform:translateY(-4px);border-color:#e72a40}.catalog-poster{position:relative;min-height:190px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(ellipse at top right,#86172e99,transparent 75%),linear-gradient(145deg,#2c1721,#101014)}.catalog-badge{font-size:9px;letter-spacing:1.5px;color:#ffc1cc}.catalog-play{margin:16px 0;color:#ff2944;font-size:28px}.catalog-poster strong{font-size:22px;line-height:1.25;overflow-wrap:anywhere}.catalog-card-meta{display:flex;justify-content:space-between;padding:17px;color:#c7c7cf;font-size:12px}.publication-status{font-size:11px;margin:12px 15px;color:#f2c5ca}.publish-dialog{max-width:560px}.publish-dialog p{line-height:1.7}.publish-card-button{color:var(--accent-text)!important}.site-theme-picker{display:flex!important}
@media(max-width:760px){.collection-heading{padding:26px!important;min-height:300px;align-items:flex-start;flex-direction:column;gap:20px}.collection-heading h1{letter-spacing:-1px!important}.collection-heading:after{right:-60px}.brand{font-size:30px!important}.catalog-heading{align-items:flex-start;flex-direction:column}.classflix-tabs{gap:20px}.classflix-tabs button{font-size:14px}.catalog-cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
/* Reference-inspired login: real inputs and real CAPTCHA, not a flattened image. */
.account-page{background:radial-gradient(ellipse at 20% 15%,#b800183b,transparent 52%),radial-gradient(ellipse at 90% 85%,#c6001738,transparent 55%),#080809;position:relative;isolation:isolate;padding:48px 20px}.account-page:before,.account-page:after{content:'';position:fixed;z-index:-1;width:150px;height:150vh;border:20px dashed #b600182e;transform:rotate(28deg);pointer-events:none;box-shadow:inset 0 0 45px #ad001529}.account-page:before{left:-25px;top:-25vh}.account-page:after{right:-40px;top:-10vh;transform:rotate(-25deg)}.login-card{width:min(100%,530px);padding:48px 38px 30px;background:linear-gradient(140deg,#171719ee,#0c0c0ef5);border:1px solid #545056;border-radius:24px;box-shadow:0 20px 100px #bd001421}.login-card .wordmark{display:block;text-align:center;font-size:76px;line-height:1.2;margin:4px 0 32px}.login-card h1{text-align:center;font-size:32px;margin:0 0 10px;font-weight:800;letter-spacing:-1px}.login-card #intro{text-align:center;margin:0;color:#aaaab5;font-size:16px}.login-card label{font-size:15px}.login-card input{background:#ffffff05;border-color:#49474c;border-radius:10px;padding:16px 44px;color:white;margin:10px 0 0}.login-card .input-wrap{display:block;position:relative}.input-glyph{position:absolute;left:15px;top:25px;color:#bcbcc6;font-size:20px;pointer-events:none}.password-eye{position:absolute;right:5px;top:17px;padding:7px;background:transparent;border:0;color:#bcbcc6;font-size:17px}.login-card button[type=submit],#verifyLink{background:#ed001b;color:white;border-color:#ff172e;padding:17px;border-radius:11px;font-size:17px;font-weight:750}.login-card #recoverToggle{display:block;margin:8px 0 0 auto;color:#bcbcc6;text-decoration:underline;font-size:14px}.login-card .fine-print{text-align:center;color:#aaaab6;border-color:#444148;line-height:1.6;padding-top:24px}.login-card .fine-print:before{content:'♧';display:block;color:#bcbcc6;font-size:23px;margin-bottom:10px}.login-card #message:empty{display:none}.login-card .captcha-box{margin:0;min-height:65px}.login-card #message{margin:16px 0 0}.login-card form{margin-top:28px;gap:18px}.login-card .login-recover-position{margin-top:-4px}
@media(max-width:520px){.account-page{padding:22px 14px}.login-card{padding:30px 22px 25px;border-radius:20px}.login-card .wordmark{font-size:62px;margin-bottom:25px}.login-card h1{font-size:27px}.login-card #intro{font-size:14px}}
[hidden]{display:none!important}
:root[data-site-theme] .collection-home{background:transparent}
.collection-heading h1{font-style:normal!important}
body.collection-layout{background:#0b0b0d!important}
:root[data-site-theme=red]{--bg:#0b0b0d;--panel:#151517;--accent:#ff3045;--accent-button:#e50920;--accent-hover:#ff2036;--accent-soft:#301018;--accent-line:#8b2431;--accent-text:#ffb7c0}

.brand,.wordmark{font-family:TeacherFlixDisplay,Impact,sans-serif!important;font-weight:400!important;letter-spacing:-.5px!important}.login-card .fine-print:before{content:none}.login-card .fine-print svg{display:block;width:22px;height:22px;margin:0 auto 14px}.input-glyph svg{width:20px;height:20px}

#replayClip,.admin-page button:not(.secondary){background:var(--accent-button);color:white;border-color:var(--accent-line)}
/* Shared cinematic preview treatment for both libraries. */
.collection-card{border:1px solid var(--accent-line);border-radius:16px;overflow:hidden;box-shadow:0 8px 28px #0003;transition:border-color .18s,transform .18s,box-shadow .18s}
.collection-card:hover{border-color:var(--accent);box-shadow:0 10px 32px var(--accent-glow);transform:translateY(-2px)}
.collection-poster{position:relative;overflow:hidden;border-bottom:2px solid var(--accent-line);background:linear-gradient(135deg,#23121a,#11151d);isolation:isolate}
.collection-poster:after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid #ffffff12;box-shadow:inset 0 -28px 35px #0008,inset 3px 0 var(--accent)}
.collection-poster video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
#catalogGrid{display:grid;gap:24px}#catalogGrid .lesson-module{min-width:0}#catalogGrid .collection-open{width:100%;text-align:left}
.catalog-workspace:not(.catalog-session-ready) #app{display:none}
.catalog-session-loading{max-width:620px;margin:15vh auto;padding:32px;border:1px solid var(--accent-line);border-radius:18px;background:#15151d;color:#fff;font:16px/1.6 system-ui}
.catalog-session-loading a{display:inline-block;margin-top:18px}
.catalog-workspace #mediaBtn,.catalog-workspace #newProject,.catalog-workspace #addSlide,.catalog-workspace #publicationButton,.catalog-workspace #configBtn,.catalog-workspace #placeholderUpload,.catalog-workspace .slide-delete,.catalog-workspace .slide-duplicate{display:none!important}
.catalog-workspace #saveStatus{max-width:280px;white-space:normal;font-size:11px}
@media(max-width:700px){.catalog-session-loading{margin:12vh 16px}.catalog-workspace #saveStatus{max-width:170px}}

.catalog-workspace .slide-card-delete,.catalog-workspace .slide-card-duplicate,.catalog-workspace #duplicateSlide,.catalog-workspace #optimizeVideoButton,.catalog-workspace #manualEdit{display:none!important}

.lesson-preview{border:1px solid var(--accent-line);box-shadow:inset 3px 0 var(--accent),0 4px 15px #0002;border-radius:10px;overflow:hidden}.slide-item:hover .lesson-preview,.slide-item.active .lesson-preview{border-color:var(--accent);box-shadow:inset 3px 0 var(--accent),0 0 16px var(--accent-glow)}

/* Personal palettes. Default remains red even before a user signs in. */
:root,:root[data-site-theme=red]{--accent:#ff3045;--accent-button:#cf0d24;--accent-hover:#e61931;--accent-soft:#301018;--accent-line:#8b2431;--accent-text:#ffb7c0;--accent-glow:#ff30451f;--hero-glow:#b8002380;--film-line:#ff233822;--blue:var(--accent)}
:root[data-site-theme=green]{--accent:#50d99a;--accent-button:#147449;--accent-hover:#198658;--accent-soft:#142b20;--accent-line:#337b57;--accent-text:#acf0c9;--accent-glow:#50d99a1f;--hero-glow:#08734280;--film-line:#50d99a22;--blue:var(--accent)}
:root[data-site-theme=blue]{--accent:#63a6ff;--accent-button:#225cc4;--accent-hover:#2a6bdc;--accent-soft:#13243d;--accent-line:#3568a4;--accent-text:#b7d6ff;--accent-glow:#63a6ff1f;--hero-glow:#145bbc80;--film-line:#63a6ff22;--blue:var(--accent);--slide-light:#f7faff;--slide-dark:#111b2c;--slide-light-glow:#dfebff;--slide-dark-glow:#203957;--slide-light-detail:#42658d;--slide-dark-detail:#aacbf3;--slide-light-line:#b4cae7;--slide-dark-line:#355c88}
:root[data-site-theme=pink]{--accent:#f887c0;--accent-button:#ae296b;--accent-hover:#c0347c;--accent-soft:#321527;--accent-line:#985171;--accent-text:#ffd0e7;--accent-glow:#f887c01f;--hero-glow:#a8226580;--film-line:#f887c022;--blue:var(--accent);--slide-light:#fff8fc;--slide-dark:#251420;--slide-light-glow:#f9e1ee;--slide-dark-glow:#49253a;--slide-light-detail:#895471;--slide-dark-detail:#e9b1cf;--slide-light-line:#dfb7cc;--slide-dark-line:#88516e}
:root[data-site-theme] .brand,:root[data-site-theme] .wordmark{color:var(--accent)!important}
:root[data-site-theme] .collection-card:hover{border-color:var(--accent)}
.site-theme-picker select{min-width:138px;min-height:38px}
.brand-tagline{text-align:center;color:#ffb7c0;font-size:20px;font-weight:700;line-height:1.4;margin:-12px 0 28px}
.login-card .wordmark{font-size:clamp(44px,10vw,70px)}
@media(max-width:600px){.brand{font-size:30px!important}.top-actions .site-theme-picker{margin-right:0}.brand-tagline{font-size:18px}}
