/* =========================================================================
   Master Your Film — cinematic classroom theme
   Cinema black · champagne gold · warm cream · REC red
   Fraunces (display) · Inter (UI)
   ========================================================================= */

:root{
  --bg:#0b0c0f; --bg-2:#0f1116; --surface:#15181e; --surface-2:#1b1f27;
  --line:#282d38; --line-soft:#20242d;
  --text:#f3efe6; --muted:#9aa0ac; --muted-2:#6f7580;
  --gold:#c9a24b; --gold-2:#e6c579; --gold-dim:#9c7d38;
  --rec:#e5484d; --ok:#54b487; --info:#5aa9e6;
  --radius:14px; --radius-sm:10px;
  --shadow:0 2px 6px rgba(0,0,0,.4), 0 18px 50px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(201,162,75,.25), 0 10px 40px rgba(201,162,75,.10);
  --maxw:1140px;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Fraunces','Playfair Display',Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font-body); color:var(--text);
  background:var(--bg); line-height:1.55; font-size:15.5px;
  position:relative; overflow-x:hidden;
}
/* film-grain + vignette + gold glow atmosphere */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(201,162,75,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(90,120,160,.06), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

h1,h2,h3,.display{font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0 0 .4em}
h1{font-size:2.1rem} h2{font-size:1.5rem}
h3{font-size:1.08rem; font-family:var(--font-body); font-weight:650}
a{color:var(--gold-2); text-decoration:none} a:hover{color:var(--gold); text-decoration:underline}
p{margin:0 0 1rem}
::selection{background:rgba(201,162,75,.3); color:#fff}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
main{padding:30px 0 90px; animation:fade .5s ease both}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(11,12,15,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.topbar__in{max-width:var(--maxw); margin:0 auto; padding:0 22px; height:66px; display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:11px; color:var(--text)}
.brand:hover{text-decoration:none}
.brand img{height:30px; width:auto; display:block; border-radius:4px}
.brand__word{font-family:var(--font-display); font-weight:600; font-size:1.12rem; letter-spacing:.01em}
.brand__word small{display:block; font-family:var(--font-body); font-weight:500; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-top:1px}

.nav{display:flex; align-items:center; gap:3px; margin-left:auto}
.nav a.navlink{color:var(--muted); padding:8px 12px; border-radius:9px; font-weight:500; font-size:.9rem}
.nav a.navlink:hover{background:var(--surface); color:var(--text); text-decoration:none}
.nav a.navlink.is-active{color:var(--gold-2); background:rgba(201,162,75,.10)}

/* Book 1:1 button — always visible */
.book-btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:650; font-size:.85rem;
  padding:8px 14px; border-radius:999px; color:#12100a;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  box-shadow:0 6px 18px rgba(201,162,75,.28); border:0; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.book-btn:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(201,162,75,.4); text-decoration:none; color:#12100a}
.book-btn .dot{width:7px; height:7px; border-radius:50%; background:var(--rec); box-shadow:0 0 0 0 rgba(229,72,77,.6); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}70%{box-shadow:0 0 0 7px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}

/* ---- Marquee strip ---- */
.marquee{overflow:hidden; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--bg-2)}
.marquee__track{display:inline-flex; white-space:nowrap; gap:34px; padding:9px 0; animation:scroll 34s linear infinite; font-family:var(--font-display); font-size:.9rem; color:var(--muted)}
.marquee__track span{color:var(--gold)}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---- Page head ---- */
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:6px 0 24px; flex-wrap:wrap}
.eyebrow{text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; font-weight:700; color:var(--gold); margin-bottom:8px}
.subtle{color:var(--muted)}

/* ---- Hero (dashboard) ---- */
.hero{position:relative; border-radius:var(--radius); overflow:hidden; margin-bottom:28px; border:1px solid var(--line); box-shadow:var(--shadow)}
.hero__bg{position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.9) contrast(1.03)}
.hero__scrim{position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,12,15,.94) 0%,rgba(11,12,15,.78) 40%,rgba(11,12,15,.35) 100%)}
.hero__in{position:relative; padding:40px 34px; max-width:640px}
.hero__badge{display:inline-flex; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); border:1px solid rgba(201,162,75,.35); padding:5px 11px; border-radius:999px; margin-bottom:16px}
.hero h1{font-size:2.4rem; margin-bottom:10px}
.hero__meta{display:flex; gap:24px; margin-top:20px; flex-wrap:wrap}
.hero__meta b{font-family:var(--font-display); font-size:1.4rem; color:var(--gold-2); display:block; line-height:1}
.hero__meta span{font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}

/* ---- Cards / grid ---- */
.grid{display:grid; gap:18px}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.card--link{display:block; position:relative; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
.card--link:hover{transform:translateY(-3px); border-color:rgba(201,162,75,.4); box-shadow:var(--glow),var(--shadow); text-decoration:none}
.class-card{position:relative; overflow:hidden}
.class-card__num{position:absolute; top:8px; right:14px; font-family:var(--font-display); font-size:3.4rem; color:rgba(201,162,75,.10); line-height:1; pointer-events:none}
.class-card__tag{font-size:.68rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); font-weight:700}
.class-card h3{margin:9px 0 6px; font-size:1.2rem; font-family:var(--font-display); font-weight:600}
.class-card.is-off{opacity:.5}
.class-card.is-off::after{content:"Hidden"; position:absolute; top:14px; left:14px; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:2px 7px; border-radius:6px}

/* ---- Panels / feed ---- */
.panel{background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.panel__head{padding:16px 20px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; gap:12px}
.panel__head strong{font-family:var(--font-display); font-weight:600; font-size:1.05rem}
.panel__body{padding:20px}
.feed-item{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft)}
.feed-item:last-child{border-bottom:0}
.feed-item__meta{font-size:.8rem; color:var(--muted-2)}
.feed-item__body{margin-top:5px; white-space:pre-wrap}

/* ---- Avatars ---- */
.avatar{border-radius:50%; object-fit:cover; flex:none; display:inline-grid; place-items:center; border:1px solid var(--line)}
.avatar--initials{color:#12100a; font-weight:700; font-family:var(--font-body); border:0}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:inherit; font-weight:600; font-size:.9rem; padding:10px 17px; border-radius:10px; border:1px solid transparent; color:#12100a; background:linear-gradient(135deg,var(--gold-2),var(--gold)); transition:transform .12s ease, box-shadow .12s ease, filter .12s}
.btn:hover{filter:brightness(1.05); box-shadow:0 8px 22px rgba(201,162,75,.28); text-decoration:none; color:#12100a}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn--ghost:hover{background:var(--surface-2); filter:none; box-shadow:none; border-color:var(--gold-dim); color:var(--gold-2)}
.btn--danger{background:linear-gradient(135deg,#ef5a5f,var(--rec)); color:#fff}
.btn--sm{padding:7px 13px; font-size:.83rem}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---- Forms ---- */
.field{margin-bottom:16px}
.field label{display:block; font-weight:600; font-size:.86rem; margin-bottom:7px; color:var(--text)}
.input,.textarea,.select{width:100%; font:inherit; color:var(--text); padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); transition:border-color .12s, box-shadow .12s}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.input:focus,.textarea:focus,.select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,.16)}
.textarea{resize:vertical; min-height:96px}
.select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.hint{font-size:.8rem; color:var(--muted-2); margin-top:6px}
input[type=file].input{padding:9px 12px}
input[type=file]::file-selector-button{font:inherit; font-weight:600; margin-right:12px; padding:6px 12px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--gold-2); cursor:pointer}

/* ---- Tables ---- */
.table{width:100%; border-collapse:collapse; font-size:.92rem}
.table th,.table td{text-align:left; padding:12px 13px; border-bottom:1px solid var(--line-soft)}
.table th{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); font-weight:700}
.table tr:hover td{background:rgba(255,255,255,.02)}

/* ---- Badges ---- */
.badge{display:inline-block; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:.02em; border:1px solid transparent}
.badge--admin{background:rgba(201,162,75,.14); color:var(--gold-2); border-color:rgba(201,162,75,.3)}
.badge--teacher{background:rgba(84,180,135,.14); color:#7fd6ab; border-color:rgba(84,180,135,.3)}
.badge--student{background:rgba(90,169,230,.14); color:#8ec6f2; border-color:rgba(90,169,230,.3)}
.badge--muted{background:var(--surface-2); color:var(--muted); border-color:var(--line)}
.badge--amber{background:rgba(201,162,75,.14); color:var(--gold-2); border-color:rgba(201,162,75,.3)}
.badge--rec{background:rgba(229,72,77,.15); color:#ff8b8f; border-color:rgba(229,72,77,.35)}

/* ---- Flash ---- */
.flash{padding:13px 16px; border-radius:11px; margin-bottom:16px; font-size:.92rem; border:1px solid transparent}
.flash--success{background:rgba(84,180,135,.12); color:#8fe0b8; border-color:rgba(84,180,135,.3)}
.flash--error{background:rgba(229,72,77,.12); color:#ff9a9d; border-color:rgba(229,72,77,.3)}
.flash--info{background:rgba(90,169,230,.12); color:#a6d4f5; border-color:rgba(90,169,230,.3)}

/* ---- Bell / dropdowns ---- */
.dropdown-wrap{position:relative}
.bell{position:relative; padding:8px 10px; color:var(--muted); cursor:pointer}
.bell:hover{color:var(--text)}
.bell__dot{position:absolute; top:2px; right:3px; min-width:17px; height:17px; padding:0 4px; background:var(--rec); color:#fff; border-radius:10px; font-size:.66rem; font-weight:700; display:grid; place-items:center}
.dropdown{position:absolute; right:0; top:calc(100% + 10px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:8px 16px; min-width:230px; display:none; z-index:60}
.dropdown.is-open{display:block; animation:fade .16s ease both}
.dropdown a.menu-item{display:block; padding:10px 4px; color:var(--text); border-bottom:1px solid var(--line-soft)}
.dropdown a.menu-item:last-child{border-bottom:0}
.dropdown a.menu-item:hover{color:var(--gold-2); text-decoration:none}
.notif-list{max-width:470px}
.notif{display:block; padding:12px 0; border-bottom:1px solid var(--line-soft); color:var(--text)}
.notif:last-child{border-bottom:0}
.notif.is-unread{font-weight:600}
.notif small{display:block; color:var(--muted-2); font-weight:400; margin-top:2px}
.user-btn{display:flex; align-items:center; gap:8px; cursor:pointer; background:none; border:0; font:inherit; color:var(--text); padding:4px 6px; border-radius:9px}
.user-btn:hover{background:var(--surface-2)}

/* ---- Chat ---- */
.chat{display:flex; flex-direction:column; height:64vh}
.chat__stream{flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:12px}
.msg{display:flex; gap:10px; max-width:80%}
.msg__bubble{background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:9px 13px}
.msg__who{font-size:.76rem; font-weight:700; margin-bottom:2px; color:var(--gold-2)}
.msg__time{font-size:.7rem; color:var(--muted-2); margin-left:6px; font-weight:400}
.msg--mine{align-self:flex-end; flex-direction:row-reverse}
.msg--mine .msg__bubble{background:rgba(201,162,75,.12); border-color:rgba(201,162,75,.28)}
.chat__compose{display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--line-soft); align-items:center}
.chat__compose .input{flex:1}
.chat__file{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); cursor:pointer; color:var(--muted); font-size:1.1rem}
.chat__file:hover{color:var(--gold-2); border-color:var(--gold-dim)}
.chat__file input{display:none}
.mention{color:var(--gold-2); font-weight:600}
.chat__filename{font-size:.78rem; color:var(--gold-2); padding:0 16px 10px}

/* ---- Attachment chips ---- */
.attach{display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:7px 11px; border:1px solid var(--line); border-radius:9px; background:var(--bg-2); color:var(--text); font-size:.84rem; max-width:100%}
.attach:hover{border-color:var(--gold-dim); color:var(--gold-2); text-decoration:none}
.attach span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px}
.attach--img{padding:0; overflow:hidden; border-radius:10px}
.attach--img img{display:block; max-width:260px; max-height:180px; object-fit:cover}

/* ---- Video player ---- */
.player{position:relative; background:#000; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9}
.player iframe,.player video{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000}
.player video{object-fit:contain}

/* ---- Utilities ---- */
.stack>*+*{margin-top:14px}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.between{justify-content:space-between}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.text-sm{font-size:.87rem}.text-muted{color:var(--muted)}
.narrow{max-width:520px; margin:0 auto}
.divider{height:1px; background:var(--line-soft); border:0; margin:18px 0}
.empty{text-align:center; color:var(--muted-2); padding:36px 10px}

/* ---- Auth ---- */
.auth{min-height:100vh; display:grid; place-items:center; padding:24px}
.auth__card{width:100%; max-width:420px}
.auth__logo{text-align:center; margin-bottom:24px}
.auth__logo img{height:44px}

/* ---- Footer ---- */
.site-foot{border-top:1px solid var(--line-soft); padding:26px 0; color:var(--muted-2); font-size:.84rem; margin-top:40px}

/* ---- Responsive ---- */
@media (max-width:820px){
  .grid[style]{grid-template-columns:1fr !important}
  .hero h1{font-size:1.8rem}
}
@media (max-width:620px){
  .nav a.navlink span.label{display:none}
  .brand__word small{display:none}
  .page-head{flex-direction:column; align-items:flex-start}
  .msg{max-width:92%}
  h1{font-size:1.6rem}
}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ---- Book 1:1 promo card ---- */
.book-card{display:grid; grid-template-columns:200px 1fr; gap:0; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(180deg,var(--surface),var(--surface-2)); box-shadow:var(--shadow); transition:transform .14s ease, border-color .14s ease, box-shadow .14s}
.book-card:hover{transform:translateY(-3px); border-color:rgba(201,162,75,.45); box-shadow:var(--glow),var(--shadow); text-decoration:none}
.book-card__img{background-size:cover; background-position:center; min-height:150px; filter:saturate(1.02)}
.book-card__body{padding:22px}
.book-card__body h3{font-family:var(--font-display); font-weight:600; font-size:1.25rem; margin:6px 0 8px; color:var(--text)}
.book-card__body .book-btn{margin-top:12px}
@media (max-width:620px){.book-card{grid-template-columns:1fr}.book-card__img{min-height:170px}}

/* ---- Chat menu badge + message role tag ---- */
.nav-badge{
  display:none; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px;
  background:var(--rec); color:#fff; border-radius:10px; font-size:.66rem; font-weight:700; vertical-align:middle;
}
.navlink{display:inline-flex; align-items:center}
.msg__role{
  display:inline-block; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:1px 6px; margin-left:6px; border-radius:999px; vertical-align:middle;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
}
.msg__role.role-teacher{background:rgba(84,180,135,.16); color:#7fd6ab; border-color:rgba(84,180,135,.3)}
.msg__role.role-admin{background:rgba(201,162,75,.16); color:var(--gold-2); border-color:rgba(201,162,75,.3)}
.msg__role.role-student{background:rgba(90,169,230,.16); color:#8ec6f2; border-color:rgba(90,169,230,.3)}