:root{
--ink:#13233c;
--ink-soft:#57667e;
--paper:#f5f7fa;
--paper-ink:#13233c;
--paper-ink-soft:#57667e;
--surface:#ffffff;
--surface-2:#eef1f6;
--border:#dde2ea;
--primary:#1c3f6e;
--primary-ink:#ffffff;
--primary-soft:#e6ebf3;
--accent:#f2b705;
--accent-ink:#2a1f00;
--info:#e6ebf3;
--info-ink:#1c3f6e;
--sidebar-bg:#14396b;
--sidebar-ink:#f4f7fc;
--sidebar-ink-soft:#b7c6e2;
--success:#2f8f5b;
--success-soft:#e3f3e9;
--warning:#c67e1c;
--warning-soft:#faedd8;
--danger:#c4483f;
--danger-soft:#fbe6e3;
--focus:#f2b705;
--shadow: 0 1px 2px rgba(18,32,56,.06), 0 8px 24px -12px rgba(18,32,56,.2);
color-scheme: light;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--ink:#eef1f6; --ink-soft:#a7b2c4; --paper:#0a1830; --paper-ink:#f3f6fb; --paper-ink-soft:#a7b6d6;
--surface:#182338; --surface-2:#1f2c44; --border:#2c3a56;
--primary:#8fabd6; --primary-ink:#0d1626; --primary-soft:#22304a;
--accent:#f4c430;
--accent-ink:#2a1f00;
--info:#22304a; --info-ink:#8fabd6;
--sidebar-bg:#0e2647; --sidebar-ink:#f4f7fc; --sidebar-ink-soft:#a7b9dc;
--success:#5fbf8a; --success-soft:#193626;
--warning:#e0a44a; --warning-soft:#3a2c14;
--danger:#e0776c; --danger-soft:#3a2320;
--focus:#f4c430;
color-scheme: dark;
}
}
:root[data-theme="dark"]{
--ink:#eef1f6; --ink-soft:#a7b2c4; --paper:#0a1830; --paper-ink:#f3f6fb; --paper-ink-soft:#a7b6d6;
--surface:#182338; --surface-2:#1f2c44; --border:#2c3a56;
--primary:#8fabd6; --primary-ink:#0d1626; --primary-soft:#22304a;
--accent:#f4c430;
--accent-ink:#2a1f00;
--info:#22304a; --info-ink:#8fabd6;
--sidebar-bg:#0e2647; --sidebar-ink:#f4f7fc; --sidebar-ink-soft:#a7b9dc;
--success:#5fbf8a; --success-soft:#193626;
--warning:#e0a44a; --warning-soft:#3a2c14;
--danger:#e0776c; --danger-soft:#3a2320;
--focus:#f4c430;
color-scheme: dark;
}

*{box-sizing:border-box;}
body{
margin:0; background:var(--paper); color:var(--ink);
font-family:'Manrope', system-ui, sans-serif;
font-size:14px; line-height:1.5;
overflow-x:hidden;
}
h1,h2,h3{ font-family:'Fraunces', system-ui, serif; text-wrap:balance; margin:0; font-weight:700; }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }
a{ color:inherit; }
button{ font-family:inherit; font-size:inherit; cursor:pointer; }
input, textarea, select, button{ font-family:inherit; }
::selection{ background:var(--primary-soft); }

#app{ min-height:100vh; position:relative; }

/* ---------- Sidebar (hover-reveal drawer) ---------- */
.sidebar-zone{
position:fixed; top:0; left:0; bottom:0; width:70px; z-index:90;
}
.sidebar-bulb{
position:fixed; top:16px; left:14px; width:46px; height:46px; border-radius:50%;
background:var(--sidebar-bg); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center;
box-shadow:0 4px 14px -4px rgba(5,15,30,.6), 0 0 0 4px rgba(242,183,5,.14);
z-index:91; transition:box-shadow .2s, transform .2s;
}
.sidebar-bulb svg{ width:26px; height:26px; display:block; }
.sidebar-bulb:hover, .sidebar-zone:hover .sidebar-bulb{ transform:scale(1.07); box-shadow:0 6px 18px -4px rgba(5,15,30,.7), 0 0 0 6px rgba(242,183,5,.26); }
.sidebar{
width:248px; background:var(--sidebar-bg); color:var(--sidebar-ink);
padding:80px 18px 22px; display:flex; flex-direction:column; gap:18px;
position:fixed; top:0; left:0; height:100vh; overflow-y:auto;
box-shadow: 6px 0 20px -10px rgba(5,15,30,.4); z-index:90;
transform:translateX(-100%); transition:transform .22s ease;
}
.sidebar-zone:hover .sidebar, .sidebar-zone:focus-within .sidebar{ transform:translateX(0); }
.sidebar-backdrop{
position:fixed; inset:0; background:rgba(5,15,30,.45); z-index:85;
opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.sidebar::before{
content:""; position:absolute; top:0; left:0; right:0; height:4px;
background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
}
.sidebar-action-btn{
display:flex; align-items:center; gap:9px; width:100%; padding:10px 12px; border-radius:9px;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:var(--sidebar-ink);
font-weight:700; font-size:13.5px; transition:background .15s, border-color .15s;
}
.sidebar-action-btn:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.26); }
.sidebar-signout-btn{ background:rgba(196,72,63,.18); border-color:rgba(196,72,63,.32); color:#ffdcd8; width:100%; }
.sidebar-signout-btn:hover{ background:rgba(196,72,63,.3); border-color:rgba(196,72,63,.48); color:#fff; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
width:38px;height:38px;border-radius:10px; background:var(--surface);
display:flex; align-items:center; justify-content:center;
flex:none; box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.brand-mark svg{ width:26px; height:26px; display:block; }
.brand-name{ font-family:'Fraunces', serif; font-weight:800; font-size:16.5px; line-height:1.15; color:var(--sidebar-ink); }
.brand-sub{ font-size:11px; color:var(--sidebar-ink-soft); margin-top:2px; font-weight:600; }

.role-switch{ display:flex; flex-direction:column; gap:4px; }
.label-eyebrow{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sidebar-ink-soft); font-weight:700; margin-bottom:2px; }
.role-btn{
display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; border:1px solid transparent;
background:transparent; color:var(--sidebar-ink-soft); text-align:left; font-weight:600; font-size:13.5px;
transition:background .12s, color .12s;
}
.role-btn:hover{ background:rgba(255,255,255,.08); color:var(--sidebar-ink); }
.role-btn.active{ background:var(--surface); color:var(--primary); border-color:transparent; }
.role-btn .dot{ width:7px;height:7px;border-radius:50%; background:currentColor; flex:none; }

.picker{ display:flex; flex-direction:column; gap:6px; }
select{
width:100%; padding:9px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface);
color:var(--ink); font-family:inherit; font-size:13px; font-weight:600;
}
select:focus, button:focus-visible, input:focus-visible, textarea:focus-visible{
outline:2px solid var(--focus); outline-offset:1px;
}

.sidebar-foot{ margin-top:auto; font-size:11.5px; color:var(--sidebar-ink-soft); }

/* ---------- Profile bubble ---------- */
.profile-bubble{
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:16px;
padding:14px; display:flex; flex-direction:column; gap:10px;
}
.profile-top{ display:flex; align-items:center; gap:10px; }
.profile-name{ font-weight:800; font-size:14px; color:var(--sidebar-ink); font-family:'Fraunces', serif; line-height:1.2; }
.profile-role{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--sidebar-ink-soft); font-weight:700; margin-top:2px; }
.profile-academic{ display:flex; flex-direction:column; gap:7px; border-top:1px solid rgba(255,255,255,.14); padding-top:10px; }
.profile-field{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; }
.profile-field .k{ color:var(--sidebar-ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:9.5px; flex:none; }
.profile-field .v{ color:var(--sidebar-ink); font-weight:700; text-align:right; }
.profile-edit-row{ display:flex; flex-direction:column; gap:4px; }
.profile-edit-row label{ font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--sidebar-ink-soft); font-weight:700; }
.profile-edit-row input{
width:100%; padding:6px 8px; border-radius:7px; border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.09); color:var(--sidebar-ink); font-size:12px; font-family:inherit;
}
.profile-edit-actions{ display:flex; gap:6px; margin-top:2px; }
.profile-edit-actions .btn{ flex:1; padding:6px; font-size:11px; }
.profile-edit-btn{
align-self:flex-start; background:rgba(242,183,5,.16); border:1px solid rgba(242,183,5,.35); color:var(--accent);
border-radius:7px; padding:5px 11px; font-size:11px; font-weight:800;
}
.profile-edit-btn:hover{ background:rgba(242,183,5,.28); }

/* ---------- Main ---------- */
main{ width:100%; min-width:0; padding:76px 34px 60px 84px; margin-left:0; transition:margin-left .22s ease; }
.sidebar-zone:hover ~ main, .sidebar-zone:focus-within ~ main{ margin-left:248px; }

/* ---------- Touch devices (phones/tablets): hover doesn't apply, and on
    some touch browsers a tap can leave :hover/:focus-within "stuck" on,
    which is what made the sidebar refuse to close. Below this width the
    sidebar is switched entirely to a tap-to-open overlay drawer (JS toggles
    the .open class on .sidebar-zone) instead of relying on hover. ---------- */
@media (max-width:900px){
.sidebar-zone:hover .sidebar, .sidebar-zone:focus-within .sidebar{ transform:translateX(-100%); }
.sidebar-zone.open .sidebar{ transform:translateX(0); }
.sidebar-zone:hover ~ main, .sidebar-zone:focus-within ~ main{ margin-left:0; }
.sidebar-zone.open ~ main{ margin-left:0; } /* overlay on top of content instead of pushing it, so nothing reflows */
.sidebar-zone.open .sidebar-backdrop{ opacity:1; pointer-events:auto; }
.sidebar{ width:84vw; max-width:300px; }
main{ padding-left:18px; padding-right:18px; }
}
@media (max-width:640px){ main{ padding:66px 16px 40px; } }
@media (max-width:420px){ .sidebar-bulb{ top:12px; left:12px; width:42px; height:42px; } }
.topbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:26px; flex-wrap:wrap; }
.topbar-id{ display:flex; align-items:center; gap:14px; }
.topbar h1{ font-size:25px; color:var(--paper-ink); }
.topbar .sub{ color:var(--paper-ink-soft); font-size:13.5px; margin-top:4px; font-weight:600; }
.topbar-logo{ display:flex; align-items:center; gap:10px; }
.notif-bell{
position:relative; width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
background:var(--surface); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.notif-bell svg{ width:18px; height:18px; }
.notif-bell:hover{ background:var(--surface-2); color:var(--ink); }
.notif-badge{
position:absolute; top:-5px; right:-5px; background:var(--danger); color:#fff; font-size:10px; font-weight:800;
min-width:16px; height:16px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.notif-list{ max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin:0 -4px; }
.notif-row{ padding:11px 10px; border-radius:9px; font-size:13px; }
.notif-row.unread{ background:var(--primary-soft); }
.notif-msg{ line-height:1.4; }
.notif-date{ font-size:11px; color:var(--ink-soft); margin-top:3px; }
.accent-rule{ width:52px; height:4px; border-radius:999px; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent)); margin:9px 0 2px; }
.student-avatar{
border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;
color:#fff; font-family:'Fraunces',serif; font-weight:700; letter-spacing:.02em;
box-shadow:0 3px 8px -2px rgba(18,32,56,.35);
}
.badge{
display:inline-flex; align-items:center; gap:9px;
font-family:'JetBrains Mono', ui-monospace, monospace; font-weight:700; font-size:10.5px;
letter-spacing:.12em; text-transform:uppercase; color:var(--primary); background:none; padding:0;
}
.badge::before{ content:""; width:15px; height:2px; background:var(--accent); display:inline-block; flex:none; }
.eyebrow{
display:inline-flex; align-items:center; gap:9px;
font-family:'JetBrains Mono', ui-monospace, monospace; font-weight:700; font-size:10.5px;
letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
.eyebrow::before{ content:""; width:15px; height:2px; background:var(--accent); display:inline-block; flex:none; }

.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns: 1.3fr .9fr; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

.card{
background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:22px;
box-shadow:var(--shadow); transition:box-shadow .15s, transform .15s;
}
.card h2{ font-size:16.5px; margin-bottom:2px; display:flex; align-items:center; gap:8px; }
.card h2::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--accent); flex:none; }
.card .card-sub{ color:var(--ink-soft); font-size:12.5px; margin-bottom:14px; }
.card:hover{ box-shadow: 0 2px 4px rgba(18,32,56,.08), 0 14px 30px -14px rgba(18,32,56,.25); transform:translateY(-1px); }
.card-icon-title{ display:flex; align-items:center; gap:10px; margin-bottom:2px; }
.card-icon-title .stat-icon{ width:30px; height:30px; border-radius:9px; }
.card-icon-title .stat-icon svg{ width:15px; height:15px; }

.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }

.dashboard-section{ margin-top:28px; padding-top:24px; border-top:1px solid var(--border); }
.dashboard-section.first{ margin-top:0; padding-top:0; border-top:none; }
.dashboard-section-label{
display:inline-flex; align-items:center; gap:9px;
font-family:'JetBrains Mono', ui-monospace, monospace; font-weight:700; font-size:10.5px;
letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px;
}
.dashboard-section-label::before{ content:""; width:15px; height:2px; background:var(--accent); display:inline-block; flex:none; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px 16px; display:flex; align-items:center; gap:12px; }
.stat-icon{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:none; }
.stat-icon.navy{ background:var(--primary); color:var(--primary-ink); }
.stat-icon.gold{ background:var(--accent); color:var(--accent-ink); }
.stat-icon svg{ width:19px; height:19px; }
.stat .num{ font-family:'JetBrains Mono',monospace; font-size:21px; font-weight:500; line-height:1.1; }
.stat .lbl{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; font-weight:700; }

  /* ---------- Redesigned student overview: navy masthead + hero focal point ---------- */
  /* (replaces the old "everything is an equal white card" layout on the Overview tab) */
  .topbar-brand{
    background:var(--primary); border-radius:20px; padding:26px 28px 24px; position:relative; overflow:hidden;
  }
  .topbar-brand::before{
    content:""; position:absolute; right:-30px; top:-46px; width:170px; height:170px; border-radius:50%;
    border:20px solid rgba(242,183,5,.14); pointer-events:none;
  }
  .topbar-brand::after{
    content:""; position:absolute; right:40px; bottom:-70px; width:120px; height:120px; border-radius:50%;
    border:14px solid rgba(242,183,5,.1); pointer-events:none;
  }
  .topbar-brand .topbar-id, .topbar-brand > div:last-child{ position:relative; z-index:1; }
  .topbar-brand .badge{ color:var(--accent); }
  .topbar-brand .badge::before{ background:var(--accent); }
  .topbar-brand h1{ color:#fff; }
  .topbar-brand .sub{ color:rgba(255,255,255,.72); }

  .ov-hero-wrap{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:20px; }
  @media (max-width:900px){ .ov-hero-wrap{ grid-template-columns:1fr; } }
  .ov-hero{
    background:var(--surface); border:1px solid var(--border); border-left:5px solid var(--accent);
    border-radius:16px; padding:20px 22px; box-shadow:var(--shadow);
  }
  .ov-hero.ov-hero-clear{ border-left-color:var(--success); }
  .ov-hero.ov-hero-clear .ov-hero-label{ color:var(--success); }
  .ov-hero-label{
    font-family:'JetBrains Mono', ui-monospace, monospace; text-transform:uppercase; letter-spacing:.1em;
    font-size:10.5px; font-weight:800; color:var(--warning); margin-bottom:10px;
  }
  .ov-hero-title{ font-size:17px; font-weight:700; margin-bottom:12px; font-family:'Fraunces',serif; }
  .ov-hero-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .ov-hero-list li{ display:flex; align-items:center; gap:10px; font-size:13px; }
  .ov-hero-list .dot{ width:7px; height:7px; border-radius:50%; background:var(--warning); flex:none; }
  .ov-hero-list button{
    margin-left:auto; font-size:11.5px; font-weight:700; color:var(--primary); background:none; border:none;
    padding:0; cursor:pointer; font-family:inherit; flex:none;
  }
  .ov-quiet-stats{
    background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px 22px;
    display:flex; flex-direction:column; justify-content:center; gap:13px; box-shadow:var(--shadow);
  }
  .ov-stat-line{ display:flex; align-items:baseline; gap:10px; }
  .ov-stat-line .num{ font-family:'Fraunces',serif; font-weight:700; font-size:23px; color:var(--primary); }
  .ov-stat-line .label{ font-size:12px; color:var(--ink-soft); }

  .ov-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:26px; }
  @media (max-width:900px){ .ov-grid{ grid-template-columns:1fr; } }
  .ov-title{
    font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10.5px; text-transform:uppercase;
    letter-spacing:.12em; font-weight:800; color:var(--ink-soft); margin-bottom:12px; display:flex; align-items:center; gap:8px;
  }
  .ov-title::after{ content:""; flex:1; height:1px; background:var(--border); }
  .ov-title-action{
    font-family:'Manrope',sans-serif; text-transform:none; letter-spacing:0; font-weight:700; font-size:11px;
    color:var(--primary); background:none; border:none; padding:0; cursor:pointer; flex:none;
  }

  .ov-timeline{ list-style:none; margin:0; padding:0; }
  .ov-timeline li{ display:flex; gap:16px; padding:13px 0; border-bottom:1px solid var(--border); align-items:flex-start; }
  .ov-timeline li:last-child{ border-bottom:none; }
  .ov-tl-date{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--primary); font-weight:700; width:58px; flex:none; padding-top:2px; white-space:nowrap; }
  .ov-tl-body{ flex:1; min-width:0; }
  .ov-tl-title{ font-weight:700; font-size:13px; margin-bottom:2px; }
  .ov-tl-sub{ font-size:11.5px; color:var(--ink-soft); }
  .ov-tl-tag{ font-size:10.5px; font-weight:700; border-left:2px solid var(--success); padding-left:7px; color:var(--success); white-space:nowrap; flex:none; margin-top:1px; }
  .ov-tl-tag.warn{ border-color:var(--warning); color:var(--warning); }

  .ov-quiet-block{ margin-bottom:24px; }
  .ov-quiet-block:last-child{ margin-bottom:0; }
  .ov-fact-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed var(--border); font-size:13px; }
  .ov-fact-row:last-child{ border-bottom:none; }
  .ov-fact-row .k{ color:var(--ink-soft); }
  .ov-fact-row .v{ font-weight:700; }
  .ov-fact-row .v.ok{ color:var(--success); }
  .ov-fact-row .v.pending{ color:var(--warning); }

  .ov-grade-track{ display:flex; align-items:center; gap:10px; margin-top:4px; }
  .ov-grade-box{ text-align:center; }
  .ov-grade-box .g{ font-family:'Fraunces',serif; font-size:19px; font-weight:700; color:var(--primary); }
  .ov-grade-box .l{ font-size:9.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
  .ov-grade-arrow{ color:var(--accent); font-size:15px; }

  .ov-act-item{ display:flex; gap:10px; font-size:12px; padding:7px 0; align-items:flex-start; }
  .ov-act-item .bullet{ width:6px; height:6px; border-radius:50%; background:var(--border); margin-top:5px; flex:none; }
  .ov-act-item .bullet.gold{ background:var(--accent); }
  .ov-act-item .when{ color:var(--ink-soft); font-size:10.5px; margin-left:auto; white-space:nowrap; flex:none; padding-left:8px; }

.pill{
display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px;
font-size:11px; font-weight:700; letter-spacing:.02em;
}
.pill.success{ background:var(--success-soft); color:var(--success); }
.pill.warning{ background:var(--warning-soft); color:var(--warning); }
.pill.danger{ background:var(--danger-soft); color:var(--danger); }
.pill.neutral{ background:var(--surface-2); color:var(--ink-soft); }

.session-item{ border-top:1px solid var(--border); padding:14px 0; }
.session-item:first-child{ border-top:none; padding-top:0; }
.session-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.session-head .date{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-soft); }
.session-topic{ font-family:'Fraunces',serif; font-weight:700; font-size:15px; }
.session-block{ margin-top:8px; }
.session-block .k{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:700; margin-bottom:3px; }
.session-block .v{ font-size:13.5px; color:var(--ink); }

ul.plain{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.chk-row{ display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid var(--border); border-radius:9px; background:var(--surface); }
.chk-row.done{ background:var(--success-soft); border-color:transparent; }
.chk-row input[type=checkbox]{ width:16px;height:16px; accent-color:var(--success); flex:none; }
.chk-row label{ font-size:13px; flex:1; }
.chk-row.done label{ text-decoration:line-through; color:var(--ink-soft); }

.video-row{ display:flex; align-items:center; gap:10px; padding:8px 9px; border:1px solid var(--border); border-radius:9px; }
.video-row .play{
width:26px;height:26px;border-radius:50%; background:var(--primary); color:var(--primary-ink); border:none;
display:flex; align-items:center; justify-content:center; flex:none; font-size:11px;
}
.video-row a{ font-weight:600; font-size:13px; text-decoration:none; }
.video-row a:hover{ text-decoration:underline; }
.video-row .watched-tag{ margin-left:auto; }
.video-row input[type=checkbox]{ accent-color:var(--success); }

.worksheet{ border:1px solid var(--border); border-radius:11px; padding:14px 16px; margin-top:4px; }
.worksheet h3{ font-size:14px; margin-bottom:10px; }
.q{ margin-bottom:12px; }
.q .qtext{ font-size:13px; font-weight:600; margin-bottom:6px; }
.q input[type=text]{
width:100%; padding:8px 10px; border-radius:7px; border:1px solid var(--border); background:var(--paper); color:var(--ink);
font-family:inherit; font-size:13px;
}
.q .opts{ display:flex; flex-direction:column; gap:5px; }
.q .opts label{ display:flex; gap:7px; align-items:center; font-size:13px; }

.btn{
padding:9px 16px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--ink);
font-weight:700; font-size:12.5px; transition:filter .12s, transform .12s, box-shadow .12s;
}
.btn:hover{ background:var(--surface-2); }
.btn.primary{ background:var(--primary); color:var(--primary-ink); border-color:transparent; }
.btn.accent{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.btn.success{ background:var(--success); color:#fff; border-color:transparent; }
.btn.danger{ background:var(--danger); color:#fff; border-color:transparent; }
.btn.info{ background:var(--info); color:var(--info-ink); border-color:transparent; }
.btn.primary:hover, .btn.accent:hover, .btn.success:hover, .btn.danger:hover, .btn.info:hover{
filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(18,32,56,.35);
}
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

form.log-form{ display:flex; flex-direction:column; gap:12px; }
.field label{ display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:5px; }
.field input[type=text], .field input[type=date], .field input[type=email],
.field input[type=password], .field input[type=number], .field textarea{
width:100%; padding:11px 13px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
font-family:inherit; font-size:14px; resize:vertical; box-sizing:border-box;
transition:border-color .15s, box-shadow .15s;
}
.field input[type=text]:focus, .field input[type=date]:focus, .field input[type=email]:focus,
.field input[type=password]:focus, .field input[type=number]:focus, .field textarea:focus{
outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint, var(--ink-soft)); opacity:.75; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:480px){ .row2{ grid-template-columns:1fr; } }
.subfield-list{ display:flex; flex-direction:column; gap:7px; }
.subfield-row{ display:flex; gap:7px; }
.subfield-row input{ flex:1; }
.icon-btn{ width:32px; flex:none; border-radius:7px; border:1px solid var(--border); background:var(--surface); }
.icon-btn:hover{ background:var(--surface-2); }
.add-link{ background:none; border:1px dashed var(--border); border-radius:8px; padding:7px; font-size:12.5px; font-weight:700; color:var(--primary); }
.add-link:hover{ background:var(--primary-soft); }

.empty{ color:var(--ink-soft); font-size:13px; padding:14px 0; }
.list-group-label{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin:14px 0 6px; }
.list-group-label:first-child{ margin-top:0; }
.roster-scope{ display:flex; gap:4px; background:rgba(255,255,255,.06); border-radius:8px; padding:3px; margin-bottom:2px; }
.roster-scope button{
flex:1; padding:6px 4px; border-radius:6px; border:none; background:transparent; color:var(--sidebar-ink-soft);
font-weight:700; font-size:10.5px; letter-spacing:.01em; transition:background .12s, color .12s;
}
.roster-scope button.active{ background:var(--surface); color:var(--primary); }
.roster-scope button:hover:not(.active){ color:var(--sidebar-ink); }

.roster-search{ position:relative; margin-bottom:2px; }
.roster-search svg{ position:absolute; left:9px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--sidebar-ink-soft); pointer-events:none; }
.roster-search input{
width:100%; padding:8px 10px 8px 30px; border-radius:8px; border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.08); color:var(--sidebar-ink); font-size:12.5px; font-weight:600;
}
.roster-search input::placeholder{ color:var(--sidebar-ink-soft); }
.roster-search input:focus-visible{ outline:2px solid var(--focus); outline-offset:0; }
.sidebar-add-link{
background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.28); border-radius:8px;
padding:5px 9px; font-size:11px; font-weight:700; color:var(--sidebar-ink);
}
.sidebar-add-link:hover{ background:rgba(255,255,255,.16); }
.class-group{ display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.class-group-label{
display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
color:var(--sidebar-ink-soft); font-weight:800; margin:8px 0 2px; padding:0 2px;
}
.class-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.class-group-label .class-group-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.class-group-label .class-group-edit{
width:18px; height:18px; border-radius:5px; border:none; background:transparent; color:var(--sidebar-ink-soft);
display:flex; align-items:center; justify-content:center; font-size:10px; flex:none;
}
.class-group-label .class-group-edit:hover{ background:rgba(255,255,255,.14); color:var(--sidebar-ink); }
.roster-list{ display:flex; flex-direction:column; gap:3px; max-height:340px; overflow-y:auto; margin:0 -6px; padding:0 6px; }
.roster-item{ display:flex; align-items:center; gap:2px; }
.roster-row{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; border:1px solid transparent; text-align:left; background:none; flex:1; min-width:0; color:var(--sidebar-ink); }
.roster-delete, .roster-move{
width:26px; height:26px; border-radius:7px; border:1px solid transparent; background:transparent; flex:none;
display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--sidebar-ink-soft);
}
.roster-delete:hover{ background:rgba(196,72,63,.3); color:#fff; }
.roster-move:hover{ background:rgba(255,255,255,.16); color:var(--sidebar-ink); }
.roster-row:hover{ background:rgba(255,255,255,.08); }
.roster-row.active{ background:var(--surface); }
.roster-row.active .r-name{ color:var(--ink); }
.roster-row.active .r-sub{ color:var(--ink-soft); }
.roster-row .r-name{ font-weight:700; font-size:12.5px; line-height:1.25; }
.roster-row .r-sub{ font-size:10.5px; color:var(--sidebar-ink-soft); font-weight:600; }
.avatar{ width:30px;height:30px;border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex:none; }
.toast{
position:fixed; bottom:20px; right:20px; background:var(--primary); color:#fff; padding:9px 16px 9px 10px; border-radius:11px;
font-size:13px; font-weight:700; box-shadow:var(--shadow); opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s; pointer-events:none; z-index:50;
display:flex; align-items:center; gap:9px;
}
.toast .brand-mark{ width:24px; height:24px; border-radius:7px; flex:none; }
.toast .brand-mark svg{ width:15px; height:15px; }
.toast.show{ opacity:1; transform:translateY(0); }
.offline-note{ font-size:11.5px; color:var(--warning); background:var(--warning-soft); padding:8px 10px; border-radius:8px; margin-bottom:14px; }
.progress-bar{ height:7px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.progress-bar > div{ height:100%; background:var(--success); }

/* ---------- Week strip (Sessions widget) ---------- */
.week-strip{ display:flex; gap:6px; }
.week-day{
width:34px; height:34px; border-radius:9px; border:1.5px solid var(--border); background:var(--surface);
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; color:var(--ink-soft);
cursor:pointer; transition:transform .12s;
}
.week-day:hover{ transform:translateY(-1px); }
.week-day.attended{ background:var(--success); color:#fff; border-color:transparent; }
.week-day.upcoming{ background:var(--warning); color:#fff; border-color:transparent; }
.week-day.today{ box-shadow:0 0 0 2px var(--accent); }
.week-count-pill{
display:inline-flex; margin-top:12px; padding:6px 13px; border-radius:999px; background:var(--surface-2);
color:var(--ink); font-weight:800; font-size:12px;
}

/* ---------- Updates feed (Parent updates widget) ---------- */
.update-feed{ display:flex; flex-direction:column; gap:12px; }
.update-item{ display:flex; flex-direction:column; gap:5px; }
.update-bubble{
background:var(--primary); color:var(--primary-ink); border-radius:13px 13px 13px 4px;
padding:11px 14px; font-size:12.5px; line-height:1.45; max-width:92%;
}
.update-meta{ font-size:11px; color:var(--ink-soft); font-weight:700; padding-left:2px; }

/* ---------- Weekly schedule (tutor cross-student widget) ---------- */
.sched-grid{ display:grid; row-gap:8px; column-gap:6px; align-items:center; overflow-x:auto; }
.sched-head{ text-align:center; font-size:10px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; }
.sched-name{ font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sched-cell{ height:20px; border-radius:6px; background:var(--surface-2); }

/* ---------- Progress trend (Progress widget) ---------- */
.trend-bars{ display:flex; align-items:flex-end; gap:7px; height:80px; }
.trend-bar{ flex:1; background:var(--accent); border-radius:5px 5px 2px 2px; min-height:4px; transition:height .2s; }

/* ---------- Family access ---------- */
.family-access-row{ display:flex; gap:26px; flex-wrap:wrap; margin-top:14px; }
.family-access-item{ display:flex; align-items:center; gap:10px; }
.family-access-label{ font-weight:800; font-size:13px; color:var(--ink); }

/* ---------- Day detail modal (This week card) ---------- */
.day-detail-row{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:2px 0; }
.day-detail-row .k{ color:var(--ink-soft); font-weight:700; }
.day-detail-row .v{ font-weight:700; }

/* ---------- Grade progress ---------- */
.grade-progress-row{ display:flex; align-items:center; gap:16px; margin:16px 0; flex-wrap:wrap; }
.grade-chip{
display:flex; flex-direction:column; gap:3px; background:var(--surface-2); border-radius:12px;
padding:10px 18px; min-width:140px;
}
.grade-chip.target{ background:var(--primary-soft); }
.grade-chip .k{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700; }
.grade-chip .v{ font-family:'Fraunces', serif; font-weight:800; font-size:18px; color:var(--ink); }
.grade-chip.target .v{ color:var(--primary); }
.grade-arrow{ font-size:20px; color:var(--accent); font-weight:800; }
.grade-steps{ font-size:13.5px; line-height:1.6; color:var(--ink); white-space:pre-wrap; }
.grade-steps textarea{
width:100%; padding:11px 13px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
font-family:inherit; font-size:13.5px; resize:vertical; box-sizing:border-box;
}

/* ---------- Billing / invoices ---------- */
.invoice-card{ border:1px solid var(--border); border-radius:13px; padding:14px 16px; margin-bottom:12px; }
.invoice-card:last-child{ margin-bottom:0; }
.invoice-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.invoice-total{
display:flex; justify-content:space-between; font-weight:800; font-size:13.5px;
border-top:1px solid var(--border); padding-top:9px; margin-top:2px;
}
.invoice-audit{ font-size:10.5px; color:var(--ink-soft); margin-top:8px; }

/* ---------- Lesson content shared styles ---------- */
.lesson-step-type{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); font-weight:700; }
.lesson-step-title{ font-weight:700; font-size:14px; }
.lesson-checkpoint{
margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--warning-soft); border:1px solid var(--border);
}
.lesson-checkpoint-q{ font-size:13.5px; font-weight:700; margin-bottom:8px; }
.lesson-checkpoint-a{ margin-top:10px; font-size:13px; color:var(--ink-soft); background:var(--success-soft); padding:8px 10px; border-radius:8px; }

/* ---------- Lesson player (on-screen, step-by-step run-through) ---------- */
.lesson-player-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.lesson-player-progress{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.lesson-player-track{ flex:1; height:7px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.lesson-player-fill{ height:100%; background:var(--primary); border-radius:999px; transition:width .25s ease; }
.lesson-player-count{
font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.lesson-player-step{
background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
padding:18px 20px; margin-bottom:18px; min-height:140px;
}
.lesson-player-body{ font-size:14px; line-height:1.65; color:var(--ink); margin-top:8px; }
.lesson-player-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lesson-player-dots{ display:flex; gap:6px; }
.lesson-dot{
width:7px; height:7px; border-radius:999px; background:var(--border); display:inline-block;
}
.lesson-dot.done{ background:var(--primary-soft); }
.lesson-dot.active{ background:var(--primary); transform:scale(1.3); }

/* ---------- Test papers (branded mock exam + diagnostic report) ---------- */
.exam-paper{
background:var(--surface); border:1px solid var(--border); border-radius:16px;
padding:22px 24px; margin-bottom:18px; position:relative; overflow:hidden;
}
.exam-paper::before{
content:""; position:absolute; top:0; left:0; right:0; height:4px;
background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
}
.exam-letterhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.exam-brand{ display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-weight:800; font-size:15.5px; color:var(--primary); }
.exam-meta{
font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
color:var(--ink-soft); white-space:nowrap;
}
.exam-title{ font-size:20px; font-weight:800; color:var(--primary); }
.exam-sub{ font-size:13.5px; color:var(--ink-soft); margin-top:2px; }
.exam-instructions{
margin-top:14px; padding:11px 14px; border-radius:10px; background:var(--surface-2);
font-size:12.5px; color:var(--ink-soft); line-height:1.5;
}
.exam-score{ display:flex; align-items:baseline; gap:12px; margin-top:16px; }
.exam-score-num{ font-family:'JetBrains Mono',monospace; font-size:32px; font-weight:800; color:var(--primary); line-height:1; }
.exam-score-pct{ font-size:13px; color:var(--ink-soft); }

.exam-question{
background:var(--surface); border:1px solid var(--border); border-radius:13px;
padding:16px 18px; margin-bottom:12px;
}
.exam-question-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.exam-q-num{ font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; }
.exam-q-marks{ font-size:11px; color:var(--ink-soft); background:var(--surface-2); padding:3px 9px; border-radius:999px; font-weight:700; }
.exam-q-prompt{ font-size:14px; font-weight:700; margin-bottom:12px; line-height:1.45; }
.exam-option{ display:flex; gap:8px; align-items:center; margin-bottom:8px; font-size:13.5px; }
.exam-option:last-child{ margin-bottom:0; }
.exam-input{
width:100%; padding:10px 12px; border-radius:9px; border:1.5px solid var(--border);
font-family:inherit; font-size:14px; box-sizing:border-box; background:var(--surface);
}
.exam-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }

.diagnostic-list{ display:flex; flex-direction:column; gap:12px; }
.diagnostic-row{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:13px 15px; }
.diagnostic-row-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.diagnostic-topic{ font-weight:700; font-size:13.5px; }

/* ---------- Login page ---------- */
.login-wrap{
min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
background:
radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 46%),
radial-gradient(circle at 82% 86%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
var(--sidebar-bg);
}
.login-card{
background:var(--surface); border-radius:20px; padding:38px; width:100%; max-width:400px;
box-shadow:0 30px 70px -24px rgba(0,0,0,.55); position:relative; overflow:hidden;
animation: loginCardIn .4s ease;
}
.login-card::before{
content:""; position:absolute; top:0; left:0; right:0; height:5px;
background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
}
@keyframes loginCardIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
.login-brand{ display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.login-brand .brand-mark{ background:var(--surface-2); box-shadow:0 4px 14px -6px rgba(18,32,56,.3); }
.login-brand .brand-name{ color:var(--primary); font-size:22px; letter-spacing:.01em; }
.login-slogan{ font-family:'Fraunces', serif; font-weight:800; font-size:14.5px; line-height:1.35; margin:14px 0 0; letter-spacing:.01em; }
.login-slogan .line1{ color:var(--primary); display:block; }
.login-slogan .line2{ color:var(--accent); display:block; }
.login-title{ font-size:20px; margin-bottom:4px; }
.login-sub{ color:var(--ink-soft); font-size:13px; margin-bottom:20px; }
.login-tabs{ display:flex; gap:4px; background:var(--surface-2); border-radius:9px; padding:3px; margin-bottom:18px; }
.login-tabs button{ flex:1; padding:7px; border:none; background:none; border-radius:7px; font-weight:700; font-size:13px; color:var(--ink-soft); }
.login-tabs button.active{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1); }
.login-error{ background:var(--danger-soft); color:var(--danger); border-radius:8px; padding:9px 12px; font-size:13px; margin-bottom:14px; display:none; }
.login-error.show{ display:block; }
.role-select{ display:flex; gap:8px; margin-bottom:2px; }
.role-select label{ flex:1; }
.role-select input{ display:none; }
.role-select span{
display:block; text-align:center; padding:8px 4px; border-radius:8px; border:1px solid var(--border);
font-size:12.5px; font-weight:700; color:var(--ink-soft); cursor:pointer;
}
.role-select input:checked + span{ background:var(--primary-soft); color:var(--primary); border-color:transparent; }

/* ---------- Modal (add student) ---------- */
.modal-overlay{
position:fixed; inset:0; background:rgba(10,20,40,.55); display:flex; align-items:center; justify-content:center;
padding:20px; z-index:100;
}
.modal-box{
background:var(--surface); border-radius:18px; padding:26px; width:100%; max-width:420px;
box-shadow:0 24px 60px -20px rgba(0,0,0,.5); max-height:90vh; overflow-y:auto;
}
.modal-box select{ width:100%; padding:10px 11px; }

/* ---------- Loading screen ---------- */
.loading-screen{
position:fixed; inset:0; z-index:150; background:var(--paper);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.loading-bulb{ transform-origin:50% 4%; animation:bulbSway 3.2s ease-in-out infinite; }
.loading-bulb svg{ width:124px; height:139px; display:block; overflow:visible; }
.loading-bulb-rays{ transform-origin:50px 40px; animation:bulbRayPulse 1.6s ease-in-out infinite; }
.loading-bulb-glass{ transform-origin:50px 40px; animation:bulbGlow 1.6s ease-in-out infinite; }
.loading-bulb-filament{ transform-origin:50px 46px; animation:bulbFlicker 1.6s ease-in-out infinite; }
.loading-wordmark{
display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap;
font-family:'Fraunces', serif; font-weight:700; font-size:clamp(22px,5vw,32px);
}
.loading-space{ width:.3em; }
.loading-letter{
display:inline-block; opacity:0; transform:translateY(16px) scale(.82); color:var(--primary);
animation:letterLightUp .65s cubic-bezier(.22,.9,.32,1.2) forwards;
animation-delay:calc(.45s + var(--i) * 0.07s);
}
@keyframes letterLightUp{
0%{ opacity:0; transform:translateY(16px) scale(.82); color:var(--primary); text-shadow:0 0 0 rgba(242,183,5,0); }
50%{ opacity:1; transform:translateY(-4px) scale(1.08); color:var(--accent); text-shadow:0 0 16px rgba(242,183,5,.9); }
100%{ opacity:1; transform:translateY(0) scale(1); color:var(--paper-ink); text-shadow:0 0 0 rgba(242,183,5,0); }
}
.loading-subtext{
font-family:'Manrope', sans-serif; font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
color:var(--paper-ink-soft); opacity:0; transform:translateY(6px);
animation:subtextFadeIn .7s ease forwards; animation-delay:1.75s;
}
@keyframes subtextFadeIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes bulbSway{
0%,100%{ transform:rotate(-3deg); }
50%{ transform:rotate(3deg); }
}
@keyframes bulbGlow{
0%,100%{ filter:drop-shadow(0 0 0 rgba(28,63,110,0)); opacity:.65; }
50%{ filter:drop-shadow(0 0 10px rgba(28,63,110,.5)); opacity:1; }
}
@keyframes bulbFlicker{
0%,100%{ opacity:.5; filter:drop-shadow(0 0 3px rgba(242,183,5,.4)); }
45%{ opacity:1; filter:drop-shadow(0 0 15px rgba(242,183,5,.95)); }
50%{ opacity:.68; filter:drop-shadow(0 0 6px rgba(242,183,5,.55)); }
55%{ opacity:1; filter:drop-shadow(0 0 15px rgba(242,183,5,.95)); }
}
@keyframes bulbRayPulse{
0%,100%{ opacity:.25; transform:scale(.86) rotate(0deg); filter:drop-shadow(0 0 2px rgba(242,183,5,.3)); }
50%{ opacity:1; transform:scale(1.12) rotate(4deg); filter:drop-shadow(0 0 10px rgba(242,183,5,.85)); }
}

/* ---------- Calendar modal ---------- */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; }
.cal-nav-btn{ width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-weight:700; }
.cal-nav-btn:hover{ background:var(--surface-2); }
.cal-title{ font-family:'Fraunces', serif; font-weight:700; font-size:15px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-cell{
aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
border-radius:8px; font-size:12px; color:var(--ink); font-weight:600;
}
.cal-cell.head{ font-weight:800; font-size:10px; color:var(--ink-soft); text-transform:uppercase; aspect-ratio:auto; padding:4px 0; }
.cal-cell.empty{ visibility:hidden; }
.cal-cell.today{ box-shadow:inset 0 0 0 1.5px var(--primary); }
.cal-cell.attended{ background:var(--success-soft); color:var(--success); font-weight:800; cursor:default; }
.cal-cell.upcoming{ background:var(--warning-soft); color:var(--warning); font-weight:800; }
.cal-cell.selectable{ cursor:pointer; transition:background .12s, transform .12s; }
.cal-cell.selectable:hover{ background:var(--surface-2); transform:translateY(-1px); }
.cal-cell.selected{ background:var(--primary); color:var(--primary-ink); font-weight:800; }
.cal-cell.disabled{ opacity:.3; cursor:not-allowed; }

/* ---------- Pill-select (theme-matched replacement for native <select>) ---------- */
.pill-select{ display:flex; flex-wrap:wrap; gap:8px; }
.pill-option{
padding:8px 15px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
font-weight:700; font-size:12.5px; transition:background .12s, border-color .12s, color .12s;
}
.pill-option:hover{ background:var(--surface-2); }
.pill-option.active{ background:var(--primary); color:var(--primary-ink); border-color:transparent; }
.cal-dot{ width:5px; height:5px; border-radius:50%; margin-top:2px; }
.cal-dot.attended{ background:var(--success); }
.cal-dot.upcoming{ background:var(--warning); }
.cal-legend{ display:flex; gap:16px; margin-top:14px; font-size:12px; color:var(--ink-soft); font-weight:700; }
.cal-legend span{ display:inline-flex; align-items:center; gap:6px; }
.cal-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; font-style:normal; }
.cal-legend i.attended{ background:var(--success); }
.cal-legend i.upcoming{ background:var(--warning); }

/* ---------- Nav / list unread badge ---------- */
.nav-badge{
display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px;
border-radius:999px; background:var(--danger); color:#fff; font-size:10px; font-weight:800; line-height:1; flex:none;
}

/* ---------- Messenger ---------- */
.messenger-wrap{
display:grid; grid-template-columns:280px 1fr; gap:16px; height:min(640px, calc(100vh - 220px)); min-height:420px;
}
.messenger-list{
background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
overflow-y:auto; padding:8px;
}
.messenger-list-item{
display:flex; align-items:center; gap:10px; width:100%; padding:10px; border-radius:12px; border:none;
background:transparent; text-align:left; cursor:pointer; transition:background .12s;
}
.messenger-list-item:hover{ background:var(--surface-2); }
.messenger-list-item.active{ background:var(--primary-soft); }
.messenger-list-item-body{ flex:1; min-width:0; }
.messenger-list-item-top{ display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.messenger-list-item-name{ font-weight:700; font-size:13px; color:var(--ink); }
.messenger-list-item-preview{
font-size:12px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.messenger-thread-pane{
background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
overflow:hidden; display:flex; flex-direction:column;
}
.messenger-thread{ display:flex; flex-direction:column; height:100%; }
.messenger-thread-head{
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:16px 20px; border-bottom:1px solid var(--border);
}
.messenger-thread-title{ font-family:'Fraunces', serif; font-weight:700; font-size:15px; }
.messenger-bubbles{
flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:4px;
}
.bubble-row{ display:flex; }
.bubble-row.mine{ justify-content:flex-end; }
.bubble-row.theirs{ justify-content:flex-start; }
.bubble{ max-width:72%; padding:9px 13px; border-radius:16px; margin:3px 0; }
.bubble.mine{ background:var(--primary); color:var(--primary-ink); border-bottom-right-radius:4px; }
.bubble.theirs{ background:var(--surface-2); color:var(--ink); border-bottom-left-radius:4px; }
.bubble-text{ font-size:13.5px; line-height:1.4; word-break:break-word; white-space:pre-wrap; }
.bubble-time{ font-size:10px; opacity:.7; margin-top:4px; text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.bubble.mine .bubble-time{ color:var(--primary-ink); }
.bubble.theirs .bubble-time{ color:var(--ink-soft); }
.bubble-delete{
background:none; border:none; padding:0; font-size:10px; font-weight:800; text-decoration:underline;
color:inherit; opacity:.85; cursor:pointer;
}
.bubble-delete:hover{ opacity:1; }
.messenger-tutor-picker{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.messenger-compose{
display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--border); background:var(--surface);
}
.messenger-compose input[type=text]{
flex:1; padding:11px 14px; border-radius:999px; border:1.5px solid var(--border); background:var(--paper); color:var(--ink);
font-family:inherit; font-size:13.5px;
}
.messenger-compose input[type=text]:focus{ outline:none; border-color:var(--focus); }
.messenger-compose .btn{ border-radius:999px; padding:9px 20px; flex:none; }
.messenger-readonly-note{
padding:12px 20px; border-top:1px solid var(--border); background:var(--surface-2);
color:var(--ink-soft); font-size:12px; text-align:center; font-weight:600;
}
@media (max-width:900px){
.messenger-wrap{ grid-template-columns:1fr; height:auto; }
.messenger-list{ max-height:220px; }
.messenger-thread-pane{ height:min(520px, 70vh); }
}

/* ---------- Class tutor team rows ---------- */
.class-tutor-row{ display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid var(--border); border-radius:9px; background:var(--surface); flex-wrap:wrap; }
.class-tutor-row .btn-xs{ padding:4px 9px; font-size:11px; border-radius:7px; }

/* ---------- Motion / entrance animations ---------- */
@media (prefers-reduced-motion: no-preference){
.card, .stat, .messenger-list-item, .tutorial-step{ animation: fadeInUp .38s cubic-bezier(.2,.7,.3,1) both; }
.grid .card:nth-child(2), .stat-row .stat:nth-child(2){ animation-delay:.03s; }
.grid .card:nth-child(3), .stat-row .stat:nth-child(3){ animation-delay:.06s; }
.grid .card:nth-child(4), .stat-row .stat:nth-child(4){ animation-delay:.09s; }
.grid .card:nth-child(n+5), .stat-row .stat:nth-child(n+5){ animation-delay:.12s; }
.dashboard-section{ animation: fadeIn .3s ease both; }
.topbar{ animation: fadeInDown .32s cubic-bezier(.2,.7,.3,1) both; }
.sidebar-action-btn, .nav-btn, .roster-scope button{ transition: background .15s, border-color .15s, transform .12s; }
.sidebar-action-btn:active, .btn:active, .nav-btn:active{ transform:scale(.96); }
.accent-rule{ animation: ruleGrow .5s cubic-bezier(.2,.7,.3,1) both .05s; }
.notif-badge{ animation: badgePop .3s cubic-bezier(.34,1.56,.64,1) both; }
.trend-bar{ animation: barGrow .5s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeInDown{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ruleGrow{ from{ transform:scaleX(0); transform-origin:left; } to{ transform:scaleX(1); transform-origin:left; } }
@keyframes badgePop{ from{ transform:scale(0); } to{ transform:scale(1); } }
@keyframes barGrow{ from{ transform:scaleY(0); transform-origin:bottom; } to{ transform:scaleY(1); transform-origin:bottom; } }

/* ---------- Tutorial walkthrough ---------- */
.tutorial-toggle{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:var(--sidebar-ink); }
.tutorial-toggle:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.26); }
.tutorial-modal-box{ max-width:620px; }
.tutorial-modal-box h2{ font-size:18px; margin-bottom:6px; }
.tutorial-modal-box .card-sub{ color:var(--ink-soft); font-size:12.5px; margin-bottom:18px; }
.tutorial-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.tutorial-progress{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; font-weight:700; color:var(--ink-soft); }
.tutorial-mockup{ border-radius:14px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); }
.tutorial-step-body{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.tutorial-dots{ display:flex; gap:7px; justify-content:center; margin:16px 0 4px; }
.tutorial-dot{ width:7px; height:7px; border-radius:50%; background:var(--border); cursor:pointer; transition:background .15s, transform .15s; padding:0; border:none; }
.tutorial-dot:hover{ background:var(--ink-soft); }
.tutorial-dot.active{ background:var(--accent); transform:scale(1.35); }
.tutorial-step{ display:flex; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); }
.tutorial-step-num{
flex:none; width:26px; height:26px; border-radius:50%; background:var(--primary); color:var(--primary-ink);
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; font-family:'Fraunces',serif;
}
.tutorial-step-title{ font-weight:800; font-size:13.5px; margin-bottom:2px; }
.tutorial-step-body{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.tutorial-modal-actions{ display:flex; justify-content:flex-end; gap:8px; }