/* ══════════════════════════════════════════════════════════════
   TEACH.HTML — EraPin Teacher Portal (Redesigned April 2026)
   Layout: Sidebar (rooms) | Centre (room hero + leaderboard) | Quiz builder below
   Zero-setup: auto-creates Practice Room with pre-loaded quiz
   ══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;background:#F5F0E8;font-family:'Courier Prime',monospace;color:#1C1208}

/* ── Container — narrow for login, full-width for dashboard ── */
.container{max-width:680px;margin:0 auto;padding:32px 20px;transition:max-width .3s}
.container.wide{max-width:100%;padding:20px 24px}
@media(max-width:500px){#name-school-row{flex-direction:column;gap:0}
.landing-pill{font-size:10px !important;padding:4px 10px !important}}

/* ── Brand ── */
.logo{font-family:'IM Fell English SC',serif;font-size:28px;color:#1C1208;letter-spacing:6px;text-align:center;margin-bottom:4px}
.logo span{color:#8B1A0E}
.sub{font-family:'Courier Prime',monospace;font-size:10px;letter-spacing:3px;color:#8B6914;text-align:center;margin-bottom:32px}

/* ── Card system ── */
.card{background:#fff;border:1px solid #1C120820;border-radius:8px;padding:20px;margin-bottom:16px}
.card-title{font-family:'IM Fell English SC',serif;font-size:15px;letter-spacing:3px;color:#1C1208;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid #1C120815}

/* ── Form elements ── */
label{display:block;font-size:9px;letter-spacing:2px;color:#8B6914;margin-bottom:4px;text-transform:uppercase}
input[type="text"],input[type="email"],input[type="number"],input[type="date"],select,textarea{width:100%;padding:10px 12px;border:1px solid #1C120830;border-radius:6px;font-family:'Courier Prime',monospace;font-size:13px;color:#1C1208;background:#F5F0E8;outline:none;margin-bottom:14px}
input:focus,select:focus,textarea:focus{border-color:#8B6914}
select{cursor:pointer;-webkit-appearance:none;appearance:none;background:#F5F0E8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238B6914' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center}
textarea{resize:vertical;height:60px}

/* ── Buttons ── */
.btn{width:100%;padding:14px;border:none;border-radius:6px;font-family:'IM Fell English SC',serif;font-size:16px;letter-spacing:3px;cursor:pointer;transition:opacity .2s}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.btn-primary{background:var(--erapin-red);color:var(--erapin-paper)}
.btn-primary:hover{background:var(--erapin-red-deep)}
.btn-secondary{background:#EDE8DC;border:1px solid #1C120830;color:#1C1208;font-size:13px;letter-spacing:2px}
.btn-sm{width:auto;padding:8px 16px;font-size:12px;letter-spacing:2px}
.msg{font-size:11px;color:#8B6914;text-align:center;letter-spacing:1px;padding:12px 0}
.error{color:#c44a2a}
.hidden{display:none}
.row{display:flex;gap:10px}
.row>*{flex:1}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid #8B691440;border-top-color:#8B6914;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD LAYOUT — 2-column grid
   Left sidebar: room list (sticky)
   Main: room hero + leaderboard + quiz builder
   ══════════════════════════════════════════════════════════════ */
.dash-grid{display:grid;grid-template-columns:260px 1fr;gap:20px;min-height:calc(100vh - 120px)}
.dash-sidebar{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow-y:auto}

@media(max-width:900px){
  .dash-grid{grid-template-columns:1fr}
  .dash-sidebar{position:static;max-height:none}
  .dash-sidebar.room-selected > .card{display:none !important}
  .dash-sidebar.room-selected > #referral-card{display:none !important}
  .dash-sidebar.room-selected > #pro-sidebar-card{display:none !important}
  .dash-sidebar.room-selected .mobile-room-header{display:flex !important}
  /* Sidebar brand is desktop-only — mobile gets the .container .logo
     header at the top of the page already. */
  #sidebar-brand{display:none !important}
}

/* ── Mobile room header (shows when sidebar cards hidden) ── */
.mobile-room-header{display:none;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border:1px solid #1C120820;border-radius:8px;margin-bottom:8px}
.mobile-room-header .mrh-name{font-family:'Playfair Display',serif;font-size:14px;color:#1C1208}
.mobile-room-header .mrh-code{font-family:'IM Fell English SC',serif;font-size:14px;color:#8B1A0E;letter-spacing:2px}
.mobile-room-header .mrh-change{font-size:10px;color:#8B6914;text-decoration:underline;cursor:pointer;letter-spacing:1px}

/* ── Room list items ── */
.room-list-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:#F5F0E8;border:2px solid transparent;border-radius:6px;margin-bottom:6px;cursor:pointer;transition:all .15s}
.room-list-item:hover{background:#EDE8DC;border-color:#8B691440}
.room-list-item.active{border-color:#8B1A0E;background:#fdf6ee}
.room-list-name{font-family:'Playfair Display',serif;font-size:13px;color:#1C1208}
.room-list-code{font-family:'IM Fell English SC',serif;font-size:13px;color:#8B1A0E;letter-spacing:2px}
.room-list-meta{font-size:8px;color:#8B6914;letter-spacing:1px;margin-top:2px}

/* ══════════════════════════════════════════════════════════════
   ROOM HERO — the centre-stage card when a room is selected
   Shows room code, student link, share buttons
   ══════════════════════════════════════════════════════════════ */
.room-hero{background:#fff;border:2px solid #1C120815;border-radius:10px;padding:20px;margin-bottom:16px;position:relative;overflow:hidden}
.room-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#c44a2a,#8B6914)}
.room-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.room-hero-left{flex:1;min-width:0}
/* Mobile-only stacked layout for the room-hero-top row. The desktop
   layout has 4 flex siblings (left, name, spacer, share-btns) that
   all try to sit on one row — on a narrow viewport the room name +
   LIVE pill collided with the ROOM CODE label + code, producing the
   "bunny ✏️ overlapping D7OF" overlap. Below the desktop breakpoint
   (the dashboard layout flips at 900px), stack them vertically so
   each block gets its own row with consistent left alignment. */
@media (max-width: 899px) {
  .room-hero-top { flex-direction: column; align-items: stretch; gap: 10px; }
  .room-hero-top .share-btns { flex-direction: row; flex-wrap: wrap; margin-top: 4px; }
  .room-hero-top .room-hero-spacer { display: none; }
}
.room-hero-label{font-size:9px;letter-spacing:2px;color:#8B6914;text-transform:uppercase;margin-bottom:4px}
.room-hero-code{font-family:'IM Fell English SC',serif;font-size:40px;letter-spacing:8px;color:#8B1A0E;line-height:1}
.room-hero-name{font-family:'Playfair Display',serif;font-size:15px;color:#1C1208;margin-top:4px}
.room-hero-right{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0}
.live-dot{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:2px;color:#2e6018;font-family:'Courier Prime',monospace}
.live-dot::before{content:'';width:8px;height:8px;background:#2e6018;border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.3)}}

.student-link-bar{display:flex;gap:6px;align-items:stretch;margin-top:8px}
.student-link{flex:1;font-size:11px;color:#1C1208;background:#F5F0E8;border:1px solid #1C120830;border-radius:4px;padding:8px 12px;cursor:pointer;word-break:break-all;font-family:'Courier Prime',monospace;transition:background .15s}
.student-link:hover{background:#EDE8DC}
.copy-feedback{font-size:9px;color:#2e6018;letter-spacing:1px;text-align:center;min-height:14px;margin-top:4px}

.share-btns{display:flex;gap:6px;margin-top:4px}
.share-btns .btn{padding:8px 14px;font-size:11px;letter-spacing:1px;width:auto;flex:1}

/* ── Reassurance pill ── */
.reassurance{display:flex;align-items:center;gap:8px;background:#EDE8DC;border-radius:6px;padding:10px 14px;margin-bottom:16px;font-size:10px;color:#5a4828;line-height:1.5;letter-spacing:0.3px}
.reassurance-icon{font-size:16px;flex-shrink:0}

/* ══════════════════════════════════════════════════════════════
   TODAY'S QUIZ — prominent card showing what's live right now
   ══════════════════════════════════════════════════════════════ */
.tq-card{background:#fff;border:2px solid #2e601830;border-radius:10px;margin-bottom:16px;overflow:hidden}
.tq-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:linear-gradient(135deg,#f0f8ec,#EDE8DC);border-bottom:1px solid #1C120815}
.tq-header.preview{background:linear-gradient(135deg,#fff8e0,#EDE8DC)}
.tq-title{font-family:'IM Fell English SC',serif;font-size:15px;letter-spacing:2px;color:#2e6018;display:flex;align-items:center;gap:8px}
.tq-title.preview{color:#8B6914}
.tq-title-dot{width:8px;height:8px;background:#2e6018;border-radius:50%;flex-shrink:0}
.tq-actions{display:flex;gap:6px}
.tq-body{padding:12px 20px}
.tq-empty{padding:20px;text-align:center;color:#8B6914;font-size:11px;letter-spacing:1px;line-height:1.6}
.tq-round{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #1C120808}
.tq-round:last-child{border-bottom:none}
.tq-round-num{font-family:'IM Fell English SC',serif;font-size:16px;color:#8B1A0E;width:22px;flex-shrink:0;text-align:center;padding-top:2px}
.tq-round-img{width:48px;height:48px;min-width:48px;min-height:48px;object-fit:cover;border-radius:4px;flex-shrink:0;background:#EDE8DC}
.tq-round-body{flex:1;min-width:0}
.tq-round-name{font-family:'Playfair Display',serif;font-size:12px;color:#1C1208;line-height:1.3;margin-bottom:2px}
.tq-round-meta{font-size:9px;color:#8B6914;letter-spacing:0.5px}
.tq-round-clue{font-size:10px;color:#1C1208cc;font-style:italic;margin-top:3px;line-height:1.4}
.tq-round-edit{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.tq-round-edit input{padding:4px 8px;font-size:10px;border:1px solid #1C120820;border-radius:3px;font-family:'Courier Prime',monospace;background:#F5F0E8;margin-bottom:0}
.tq-swap{padding:12px 20px;border-top:1px solid #1C120815;background:#faf8f4}
.tq-swap-label{font-size:9px;color:#8B6914;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.tq-swap-grid{display:flex;gap:6px;flex-wrap:wrap}
.tq-swap-btn{padding:8px 14px;border:1px solid #1C120830;border-radius:6px;background:#F5F0E8;font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:1px;cursor:pointer;transition:all .15s;color:#1C1208}
.tq-swap-btn:hover{background:#EDE8DC;border-color:#8B6914}
.tq-swap-btn.active{background:#8B1A0E;color:#F5F0E8;border-color:#8B1A0E}
/* Mini calendar */
.mcal-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mcal-hdr span{font-family:'IM Fell English SC',serif;font-size:13px;letter-spacing:1px;color:#1C1208}
.mcal-nav{cursor:pointer;padding:4px 10px;font-size:14px;color:#8B6914;border:none;background:none;border-radius:4px}
.mcal-nav:hover{background:#EDE8DC}
.mcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.mcal-dow{font-family:'Courier Prime',monospace;font-size:9px;color:#8B6914;text-transform:uppercase;font-weight:bold;padding:4px 0}
.mcal-day{position:relative;padding:6px 0;border-radius:6px;font-family:'Courier Prime',monospace;font-size:12px;font-weight:bold;color:#747978;cursor:pointer;transition:background .15s}
.mcal-day:hover{background:#EDE8DC}
.mcal-day.today{border:1.5px solid #8B6914}
.mcal-day.selected{background:#F5A1A3;color:#fff}
.mcal-day .mcal-dot{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#2e6018}
.tq-save-row{padding:10px 20px;border-top:1px solid #1C120815;display:none}
.tq-save-row.visible{display:flex;gap:8px;align-items:center}

/* ══════════════════════════════════════════════════════════════
   LEADERBOARD — the hero element, prominent with status
   ══════════════════════════════════════════════════════════════ */
.lb-card{background:#fff;border:2px solid #1C120815;border-radius:10px;padding:0;margin-bottom:16px;overflow:hidden}
.lb-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 12px;border-bottom:1px solid #1C120815;flex-wrap:wrap;gap:8px}
.lb-title{font-family:'IM Fell English SC',serif;font-size:16px;letter-spacing:3px;color:#1C1208;display:flex;align-items:center;gap:8px}
.lb-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.lb-actions .btn{padding:6px 10px;font-size:9px;letter-spacing:1px;width:auto}

/* Mobile (≤700px): the leaderboard-header buttons row crams up
   against the title and the debrief CTA gets lost. Push the
   debrief button to its own line below the rest of the action
   buttons. flex order:99 + flex-basis:100% on the debrief id
   wins against the surrounding flex layout. */
@media (max-width: 700px) {
  #debrief-btn {
    order: 99;
    flex-basis: 100%;
    margin-top: 4px;
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
}
.lb-body{padding:4px 0}
.lb-empty{padding:24px 20px;text-align:center;color:#8B6914;font-size:12px;letter-spacing:1px;line-height:1.7}

/* Individual leaderboard row */
.lb-row{display:flex;align-items:center;padding:10px 20px;transition:background .1s;border-bottom:1px solid #1C120808}
.lb-row:last-child{border-bottom:none}
.lb-row:hover{background:#faf8f4}
.lb-rank{font-family:'IM Fell English SC',serif;font-size:18px;width:30px;flex-shrink:0;color:#1C1208}
.lb-rank.top3{color:#8B1A0E}
.lb-status{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-right:10px}
.lb-status.done{background:#2e6018}
.lb-status.playing{background:#8B6914;animation:pulse 1.5s ease-in-out infinite}
.lb-status.ready{background:#c44a2a40;border:1.5px solid #c44a2a}
.lb-name{flex:1;font-family:'Courier Prime',monospace;font-size:13px;color:#1C1208;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-score{font-family:'IM Fell English SC',serif;font-size:17px;color:#1C1208;margin-right:8px;min-width:50px;text-align:right}
.lb-kick{background:none;border:none;color:#c44a2a;font-size:13px;cursor:pointer;padding:2px 4px;opacity:0.3;transition:opacity .15s}
.lb-kick:hover{opacity:1}

/* (Removed 2026-05-28: .lb-summary auto-promote rules that bumped
   the dashboard leaderboard to projector-readable fonts when every
   student score had completed=true. The trigger was broken for the
   rolling-arrival classroom flow — `every()` thrashed as students
   joined in waves. The dashboard now stays at the dense working-
   tool sizing always; teachers project finals via
   /class.html?projector=true, which has its own font scale and
   was always the right surface for projection. JS trigger removed
   in teach.js at the same commit.) */

/* Status legend */
.lb-legend{display:flex;gap:14px;padding:8px 20px 12px;font-size:9px;color:#8B6914;letter-spacing:1px;border-top:1px solid #1C120810}
.lb-legend-item{display:flex;align-items:center;gap:4px}
.lb-legend-dot{width:7px;height:7px;border-radius:50%}

/* Student count */
.lb-counter{font-family:'Courier Prime',monospace;font-size:10px;color:#8B6914;letter-spacing:1px;padding:6px 20px 10px;border-top:1px solid #1C120810;text-align:center}

/* ══════════════════════════════════════════════════════════════
   QUIZ BUILDER — pushed below leaderboard, in an accordion
   ══════════════════════════════════════════════════════════════ */
.accordion{background:#fff;border:1px solid #1C120820;border-radius:8px;margin-bottom:16px;overflow:hidden}
.accordion-trigger{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;cursor:pointer;user-select:none;transition:background .15s}
.accordion-trigger:hover{background:#faf8f4}
.accordion-trigger-title{font-family:'IM Fell English SC',serif;font-size:15px;letter-spacing:3px;color:#1C1208}
.accordion-trigger-sub{font-size:9px;color:#8B6914;letter-spacing:1px;margin-top:2px}
.accordion-chev{font-size:12px;color:#8B6914;transition:transform .2s}
.accordion-chev.open{transform:rotate(90deg)}
.accordion-body{display:none;padding:0 20px 20px}
.accordion-body.open{display:block}

/* ── Tab bar ── */
.tab-bar{display:flex;gap:0;border-bottom:2px solid #1C120820;margin-bottom:16px}
.tab-btn{flex:1;padding:10px 8px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;font-family:'IM Fell English SC',serif;font-size:12px;letter-spacing:2px;color:#8B6914;cursor:pointer;transition:all .2s;text-align:center}
.tab-btn:hover{color:#1C1208;background:#EDE8DC}
.tab-btn.active{color:#8B1A0E;border-bottom-color:#8B1A0E}
.tab-content{display:none}
.tab-content.active{display:block}
.pro-badge{display:inline-block;background:var(--erapin-red);color:var(--erapin-paper);font-family:'IM Fell English SC',serif;font-size:7px;letter-spacing:1px;padding:2px 6px;border-radius:10px;vertical-align:middle;margin-left:4px}

/* ── Lesson pack grid ── */
.lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.lesson-pack-card{background:#F5F0E8;border:2px solid transparent;border-radius:8px;padding:12px;cursor:pointer;transition:all .15s;text-align:center}
.lesson-pack-card:hover{border-color:#8B691440;background:#EDE8DC}
.lesson-pack-card.active{border-color:#8B1A0E;background:#fdf6ee}
.lp-icon{font-size:22px;margin-bottom:4px}
.lp-title{font-family:'IM Fell English SC',serif;font-size:12px;letter-spacing:2px;color:#1C1208}
.lp-sub{font-size:8px;color:#8B6914;letter-spacing:1px;margin-top:2px}

/* ── Sample picker cards ── */
.sample-pick{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#F5F0E8;border:2px solid transparent;border-radius:6px;margin-bottom:5px;cursor:pointer;transition:all .15s;user-select:none}
.sample-pick:hover{background:#EDE8DC;border-color:#8B691440}
.sample-pick.selected{border-color:#8B1A0E;background:#fdf6ee}
.sample-pick.selected .sp-check{background:#8B1A0E;border-color:#8B1A0E;color:#F5F0E8}
.sp-check{width:22px;height:22px;border-radius:50%;border:2px solid #1C120840;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;transition:all .15s;color:transparent;font-weight:bold}
.sp-img{width:44px;height:44px;min-width:44px;min-height:44px;object-fit:cover;border-radius:4px;flex-shrink:0;background:#EDE8DC}
.sp-body{flex:1;min-width:0}
.sp-name{font-family:'Playfair Display',serif;font-size:12px;color:#1C1208;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-meta{font-size:8px;color:#8B6914;letter-spacing:1px;margin-top:1px}
.sp-diff{font-size:7px;letter-spacing:1px;padding:1px 5px;border-radius:2px;font-family:'Courier Prime',monospace}
.quiz-status{font-size:10px;letter-spacing:1px;text-align:center;padding:8px 0}
.quiz-status.generating{color:#8B6914}
.quiz-status.ready{color:#2e6018}
.quiz-status.error{color:#c44a2a}

/* ── AI Generation ── */
.gen-meter{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#EDE8DC;border-radius:6px;font-size:10px;color:#8B6914;letter-spacing:1px;margin-bottom:14px}
.gen-meter-bar{flex:1;height:4px;background:#1C120815;border-radius:2px;overflow:hidden}
.gen-meter-fill{height:100%;background:linear-gradient(90deg,#2e6018,#8B6914);border-radius:2px;transition:width .3s}
.gen-meter-full .gen-meter-fill{background:#c44a2a}
.upgrade-banner{background:linear-gradient(135deg,#1C1208 0%,#3a2a10 100%);color:#F5F0E8;border-radius:8px;padding:16px;text-align:center;margin-bottom:14px}
.upgrade-banner h3{font-family:'IM Fell English SC',serif;font-size:16px;letter-spacing:3px;margin-bottom:6px;color:#F5F0E8}
.upgrade-banner p{font-size:11px;color:#EDE8DC;margin-bottom:12px;line-height:1.5}
.btn-upgrade{background:var(--erapin-red);color:var(--erapin-paper);border:none;padding:12px 24px;border-radius:6px;font-family:'IM Fell English SC',serif;font-size:14px;letter-spacing:3px;cursor:pointer;transition:background .15s}
.btn-upgrade:hover{background:var(--erapin-red-deep)}

/* AI round cards grid */
.ai-rounds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
@media(max-width:700px){.ai-rounds-grid{grid-template-columns:1fr}}
/* v2-d: pack browser is the hero. #dual-path-b removed; Path A + Today's Quiz stack. */
#dual-entry > #dual-path-a{grid-column:1 / -1}
#dual-entry > #todays-quiz-card{grid-column:1 / -1}
@media(max-width:600px){
  #dual-entry{grid-template-columns:1fr !important}
  #dual-entry > #dual-path-a{order:1}
  #dual-entry > #todays-quiz-card{order:2}
}
.ai-round-card{background:#F5F0E8;border:1px solid #1C120830;border-radius:8px;padding:12px;display:flex;gap:10px;align-items:flex-start;cursor:pointer;position:relative;transition:all .15s}
.ai-round-card:hover{border-color:#8B6914}
.ai-round-card.selected{border:2px solid #2e6018;background:#f0f8ec}
.ai-round-img{width:72px;height:72px;min-width:72px;min-height:72px;object-fit:cover;border-radius:6px;flex-shrink:0;background:#EDE8DC}
.ai-round-body{flex:1;min-width:0}
.ai-round-title{font-family:'Playfair Display',serif;font-size:12px;font-style:italic;color:#1C1208;margin-bottom:3px}
.ai-round-meta{font-size:8px;letter-spacing:1px;color:#8B6914;margin-bottom:3px}

/* ── Wiki quiz cards ── */
.quiz-card{background:#F5F0E8;border:1px solid #1C120830;border-radius:6px;padding:12px;margin-bottom:8px}
.quiz-card-title{font-family:'Playfair Display',serif;font-size:13px;font-style:italic;color:#1C1208;margin-bottom:4px}

/* ── Published quizzes section ── */
.result-card{background:#EDE8DC;border:1px solid #1C120830;border-radius:8px;padding:16px;margin-bottom:10px}

/* ── Pro sidebar card ── */
.manage-sub{font-size:10px;color:#8B6914;text-decoration:underline;cursor:pointer;text-align:center;display:block;margin-top:8px}

/* ── Referral card ── */
#referral-card{margin-top:12px}

/* ── Seed bank (for wiki tab) ── */
.seed-bank{background:#F5F0E8;border:1px solid #1C120820;border-radius:6px;padding:12px;margin-top:8px}
.seed-filters{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.seed-filter{background:none;border:1px solid #1C120830;color:#8B6914;font-size:9px;letter-spacing:1px;padding:3px 8px;cursor:pointer;border-radius:3px;font-family:'Courier Prime',monospace;transition:all .15s}
.seed-filter:hover{background:#EDE8DC}
.seed-filter.active{background:#1C1208;color:#F5F0E8;border-color:#1C1208}
.seed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;max-height:240px;overflow-y:auto}
.seed-item{background:#EDE8DC;border:1px solid #1C120820;border-radius:3px;padding:6px 8px;cursor:pointer;transition:all .15s}
.seed-item:hover{background:#1C1208}
.seed-item:hover .seed-item-name{color:#F5F0E8}
.seed-item:hover .seed-item-meta{color:#8B6914}
.seed-item-name{font-size:10px;color:#1C1208;line-height:1.4;font-family:'Courier Prime',monospace}
.seed-item-meta{font-size:8px;color:#8B6914;margin-top:1px;font-style:italic}

/* ── Pre-loaded classroom card (sidebar) ── */
.preloaded-section{margin-bottom:12px}
.preloaded-label{font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:2px;color:#8B6914;margin-bottom:6px;padding:0 4px}
.preloaded-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:#fdf6ee;border:2px solid #8B1A0E40;border-radius:6px;cursor:pointer;transition:all .15s}
.preloaded-item:hover{border-color:#8B1A0E}
.preloaded-item.active{border-color:#8B1A0E;background:#fdf6ee}
.preloaded-badge{font-size:8px;color:#2e6018;letter-spacing:1px;display:block;margin-top:2px}

/* ══════════════════════════════════════════════════════════════
   FIRST-TIME TEACHER WALKTHROUGH — centered slideshow card
   5 steps, auto-playing timer ring, mock illustrations (no DOM spotlighting)
   ══════════════════════════════════════════════════════════════ */
.wt-blur{filter:blur(3px);transition:filter .4s ease}
#walkthrough-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,14,8,0.72);animation:wtFadeIn .4s ease}
@keyframes wtFadeIn{from{opacity:0}to{opacity:1}}
.wt-card{background:#F5F0E8;border:1px solid #1C120820;border-radius:12px;width:100%;max-width:480px;box-shadow:0 24px 80px rgba(0,0,0,0.45),0 0 0 1px rgba(184,150,62,0.2);overflow:hidden;animation:wtSlideUp .4s cubic-bezier(0.16,1,0.3,1);font-family:'Playfair Display',Georgia,serif}
@keyframes wtSlideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.wt-progress-bar{height:3px;background:#EDE8DC;width:100%}
.wt-progress-fill{height:100%;background:#8B6914;transition:width .5s cubic-bezier(0.16,1,0.3,1)}
.wt-body{padding:28px 32px 24px}
.wt-icon{width:52px;height:52px;border-radius:50%;background:#fff;border:1.5px solid #1C120830;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:18px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.wt-step-label{font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:3px;color:#8B6914;margin-bottom:8px}
.wt-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;color:#1C1208;line-height:1.25;margin-bottom:12px}
.wt-body-text{font-size:14px;line-height:1.65;color:#3a2810;margin-bottom:18px}
.wt-body-text strong{color:#8B1A0E;font-weight:700}
.wt-illustration{background:#fff;border:1px solid #1C120820;border-radius:8px;padding:14px 16px;margin-bottom:18px;font-size:12px;color:#5a4828;font-family:'Playfair Display',serif}
.wt-illustration-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.wt-illustration-row:last-child{margin-bottom:0}
.wt-pill{background:#EDE8DC;border:1px solid #1C120830;border-radius:20px;padding:4px 11px;font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:1.5px;color:#1C1208;white-space:nowrap;display:inline-flex;align-items:center}
.wt-pill.active{background:var(--erapin-red);color:var(--erapin-paper);border-color:var(--erapin-red-dark)}
.wt-cal-mini{display:inline-flex;align-items:flex-end;justify-content:center;width:28px;height:28px;border-radius:4px;background:#EDE8DC;border:1px solid #1C120830;font-size:11px;color:#1C1208;position:relative;font-family:'Playfair Display',serif;padding-bottom:5px}
.wt-cal-mini::after{content:'';width:4px;height:4px;background:#8B1A0E;border-radius:50%;position:absolute;bottom:3px}
.wt-cal-mini.empty::after{display:none}
.wt-cal-mini.today{background:#8B1A0E;color:#F5F0E8;border-color:#8B1A0E}
.wt-cal-mini.today::after{background:#F5F0E8}
.wt-footer{display:flex;align-items:center;justify-content:space-between;padding:0 32px 24px;gap:12px}
.wt-dots{display:flex;gap:6px}
.wt-dot{width:6px;height:6px;border-radius:50%;background:#1C120830;transition:all .3s ease;cursor:pointer}
.wt-dot.active{background:#8B1A0E;width:18px;border-radius:3px}
.wt-btn-group{display:flex;gap:10px;align-items:center}
.wt-btn{font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:2px;padding:10px 18px;border-radius:6px;cursor:pointer;transition:all .2s ease;border:1px solid #1C120830;background:transparent;color:#8B6914}
.wt-btn:hover{background:#EDE8DC;color:#1C1208}
.wt-btn-primary{background:var(--erapin-red);color:var(--erapin-paper);border-color:var(--erapin-red-dark)}
.wt-btn-primary:hover{background:var(--erapin-red-deep)}
.wt-btn-primary:hover{background:linear-gradient(135deg,#a63a20,#6e1408);color:#F5F0E8}
.wt-btn-finish{background:#1C1208;color:#F5F0E8;border-color:#1C1208}
.wt-btn-finish:hover{background:#3a2810;color:#F5F0E8}
.wt-skip{font-size:11px;color:#8B6914;cursor:pointer;text-decoration:underline;text-underline-offset:3px;background:none;border:none;font-family:'Playfair Display',serif}
.wt-skip:hover{color:#1C1208}
.wt-step-content{animation:wtStepIn .35s cubic-bezier(0.16,1,0.3,1)}
@keyframes wtStepIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.wt-confetti{font-size:28px;text-align:center;margin-bottom:12px;letter-spacing:6px;animation:wtPop .5s cubic-bezier(0.16,1,0.3,1)}
@keyframes wtPop{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}
.wt-timer-wrap{display:flex;flex-direction:column;align-items:center}
.wt-timer-ring{position:relative;width:36px;height:36px;flex-shrink:0;cursor:pointer}
.wt-timer-ring svg{transform:rotate(-90deg);width:36px;height:36px}
.wt-timer-ring .track{fill:none;stroke:#1C120830;stroke-width:2.5}
.wt-timer-ring .fill{fill:none;stroke:#8B1A0E;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:94.2;stroke-dashoffset:94.2;transition:stroke-dashoffset .1s linear}
.wt-timer-ring .pause-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#8B6914;pointer-events:none}
.wt-timer-ring:hover .pause-icon{color:#8B1A0E}
.wt-paused-badge{font-family:'IM Fell English SC',serif;font-size:8px;letter-spacing:2px;color:#8B6914;text-align:center;margin-top:2px}
@media(max-width:540px){.wt-body{padding:22px 22px 18px}.wt-footer{padding:0 22px 18px}.wt-title{font-size:19px}.wt-body-text{font-size:13px}}

/* ════════════════════════════════════════════════════════════════
   DESKTOP DASHBOARD REDESIGN — May 2026
   ════════════════════════════════════════════════════════════════
   Applies at ≥900px only — mobile keeps the existing single-column
   layout untouched. Restyles the existing #dashboard subtree to match
   the parchment + Georgia mock without changing IDs / handlers / JS.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* Page surface — parchment cream */
  body { background: #F4EFE6 !important; color: #2C2620; }
  /* Scoped to .wide so the full-bleed dashboard grid only kicks in
     after login (showDashboard adds .wide). The pre-login sign-in
     card + testimonial keep the base 680px cap so they don't stretch
     edge-to-edge on a wide desktop incognito window. */
  .container.wide { max-width: none; padding: 0; }

  /* Dashboard grid — wider sidebar (240px), no outer container padding */
  #dashboard { padding: 0 !important; max-width: none; }
  .dash-grid { grid-template-columns: 240px 1fr; gap: 0; min-height: 100vh; }

  /* Sidebar — darker cream, subtle separator */
  .dash-sidebar {
    background: #EDE5D6;
    border-right: 0.5px solid rgba(60, 40, 20, 0.15);
    padding: 1.25rem 1rem;
    max-height: 100vh;
    overflow-y: auto;
  }
  .dash-sidebar .card {
    background: #FFFDF8;
    border: 0.5px solid rgba(60, 40, 20, 0.15);
    border-radius: 6px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 1.1rem;
    box-shadow: none;
  }
  .dash-sidebar .card-title {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 0.15em;
    color: #8B7355;
    text-transform: uppercase;
    border: none;
    padding: 0;
    margin: 0 0 6px;
  }
  .dash-sidebar .card input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    border: 0.5px solid rgba(60, 40, 20, 0.2);
    border-radius: 4px;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 11px;
    background: #F4EFE6;
    color: #5C4A3A;
    box-sizing: border-box;
    margin-bottom: 6px;
  }
  .dash-sidebar .card .btn-primary {
    width: 100%;
    background: #B33A1A;
    color: #F4EFE6;
    border: none;
    padding: 8px;
    border-radius: 4px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12px;
    letter-spacing: 0.05em;
  }

  /* Sidebar branding — handled by the #sidebar-brand HTML element added
     directly inside #dash-sidebar at desktop. Hidden by default on
     mobile (where the .container .logo at the top of the page already
     plays the same role). */
  .dash-sidebar #sidebar-brand { display: block; }

  /* Stats card (teacher-stats-line) — slim, centered */
  #teacher-stats-line {
    background: #FFFDF8 !important;
    border: 0.5px solid rgba(60, 40, 20, 0.15) !important;
    border-radius: 6px !important;
    padding: 0.55rem 0.75rem !important;
    margin-bottom: 1.1rem !important;
    text-align: center !important;
    font-family: 'Courier Prime', 'Courier New', monospace !important;
    font-size: 11px !important;
    color: #5C4A3A !important;
  }

  /* Your Classrooms — card frame already, just style the rows below */
  #rooms-list { display: flex; flex-direction: column; gap: 4px; }
  #rooms-list .room-item,
  #rooms-list > div {
    border: 0.5px solid rgba(60, 40, 20, 0.15);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    background: transparent;
    cursor: pointer;
  }
  #rooms-list .room-item.active,
  #rooms-list .room-item.selected,
  #rooms-list > div.active,
  #rooms-list > div.selected {
    background: #F4EFE6;
    border-color: #B33A1A;
  }

  /* Founding Teacher badge — gold-cream box per mock */
  #founding-badge > div {
    background: #F8EDD3 !important;
    border: 0.5px solid rgba(139, 105, 20, 0.3) !important;
    border-radius: 6px !important;
    padding: 0.85rem !important;
    max-width: none !important;
    margin: 0 0 1.1rem !important;
  }

  /* Referral card — pinned to bottom of sidebar via flex */
  .dash-sidebar { display: flex; flex-direction: column; }
  #referral-card {
    margin-top: auto !important;
    background: #FFFDF8 !important;
    border: 0.5px solid rgba(60, 40, 20, 0.15) !important;
  }

  /* Main column */
  .dash-main { background: #F4EFE6; }
  #room-panel { padding: 0; }

  /* Sticky room hero — mock's top bar */
  .room-hero {
    background: #FFFDF8;
    border-bottom: 0.5px solid rgba(60, 40, 20, 0.15);
    border-radius: 0;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0;
  }
  .room-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
  .room-hero-left { display: flex; align-items: baseline; gap: 1.25rem; }
  .room-hero-label {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 0.15em;
    color: #8B7355;
    text-transform: uppercase;
    margin: 0;
  }
  .room-hero-code {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 32px;
    color: #B33A1A;
    letter-spacing: 0.05em;
    line-height: 1.1;
    margin-top: 2px;
    font-weight: 700;
  }
  .room-hero-name {
    font-size: 14px;
    color: #2C2620;
    border-left: 0.5px solid rgba(60, 40, 20, 0.2);
    padding-left: 1.25rem;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .live-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(74, 124, 42, 0.1);
    color: #4A7C2A;
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .live-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #4A7C2A;
    border-radius: 50%;
  }

  /* Student-link bar inside sticky hero — tighter */
  .student-link-bar { margin-top: 8px; }
  .student-link {
    background: #F4EFE6;
    border: 0.5px solid rgba(60, 40, 20, 0.2);
    color: #5C4A3A;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 4px;
  }
  .share-btns { gap: 8px; margin-top: 8px; }
  .share-btns .btn-secondary {
    background: #2C5F2D;
    color: #F4EFE6;
    border: none;
    padding: 9px 14px;
    border-radius: 5px;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .share-btns .btn-secondary + .btn-secondary {
    background: transparent;
    border: 0.5px solid rgba(60, 40, 20, 0.3);
    color: #2C2620;
  }

  /* Classroom settings strip — restyle to mock */
  #classroom-settings-strip {
    background: #FFFDF8 !important;
    border: 0.5px solid rgba(60, 40, 20, 0.15) !important;
    border-radius: 6px !important;
    padding: 1rem 1.25rem !important;
    margin: 1.5rem 2rem !important;
  }

  /* Pack browser block — main panel card style */
  #dual-entry > #dual-path-a {
    background: #FFFDF8 !important;
    border: 0.5px solid rgba(60, 40, 20, 0.15) !important;
    border-radius: 6px !important;
    padding: 1.25rem !important;
    margin: 0 2rem 1.25rem !important;
  }
  #pack-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
  }
  #pack-grid .erapin-pack-card,
  #pack-grid > div {
    background: #F4EFE6 !important;
    border: 0.5px solid rgba(60, 40, 20, 0.15) !important;
    border-radius: 4px !important;
    padding: 10px 12px !important;
  }
  #unified-input {
    background: #F4EFE6 !important;
    border: 0.5px solid rgba(60, 40, 20, 0.2) !important;
    color: #5C4A3A !important;
    font-family: 'Courier Prime', 'Courier New', monospace !important;
  }

  /* Today-quiz / pack-detail card — wraps existing tq content with mock spacing */
  #todays-quiz-card {
    background: #FFFDF8 !important;
    border: 0.5px solid rgba(74, 124, 42, 0.3) !important;
    border-radius: 6px !important;
    padding: 1rem 1.25rem !important;
    margin: 0 2rem 1.25rem !important;
  }

  /* Leaderboard card */
  #leaderboard-section,
  #lb-content,
  #leaderboard-card {
    background: #FFFDF8;
    border: 0.5px solid rgba(60, 40, 20, 0.15);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 0 2rem 1.25rem;
  }

  /* Logo / header in pre-login wrap stays aside; logged-in dashboard
     hides the original .container .logo so the sidebar header is the
     single branding mark. */
  #dashboard ~ .logo,
  #dashboard .logo { display: none; }
}

/* DESKTOP REDESIGN — phase 2: room-hero internal layout
   Match the mock's horizontal sticky-header: room code + room name +
   spacer + share buttons all in one flex row. Mobile keeps the
   stacked layout already defined elsewhere. */
@media (min-width: 900px) {
  .room-hero-top {
    flex-wrap: nowrap;
    align-items: center;
  }
  .room-hero-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .room-hero-name {
    border-left: 0.5px solid rgba(60, 40, 20, 0.2);
    padding-left: 1.25rem;
    margin-left: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .room-hero-name .live-dot { margin-top: 4px; }
  .room-hero .share-btns { flex-shrink: 0; flex-direction: row; }

  /* Student-link bar — slim on desktop (mobile keeps the prominent
     copy-tap target) */
  .room-hero .student-link-bar { margin-top: 8px; }
  .room-hero .student-link {
    font-size: 11px;
    padding: 6px 10px;
    text-align: left;
  }

  /* Today's session bar — already inline-styled to match mock */
  #todays-session-bar { display: none; }
  #todays-session-bar.has-session { display: flex !important; }
}

/* DESKTOP REDESIGN — phase 3: pack tile colored icon block + room
   settings panel + tile sizing.
   The mock's pack tile has a large colored block at the top with the
   icon centered, then name, then meta. The existing .erapin-pack-icon
   classes already supply the tints; just upsize the block. */
@media (min-width: 900px) {
  .erapin-pack-icon {
    width: 100% !important;
    height: auto !important;
    padding: 14px !important;
    border-radius: 3px !important;
    font-size: 22px !important;
    margin-bottom: 8px !important;
    box-sizing: border-box;
  }
  .erapin-pack-card {
    background: #F4EFE6 !important;
    border-radius: 4px !important;
    padding: 10px 12px !important;
    min-height: auto !important;
  }
  .erapin-pack-name {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 12px !important;
    color: #2C2620 !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }
  .erapin-pack-desc,
  .erapin-pack-attribution {
    font-style: italic;
    font-size: 10px;
    color: #8B6914;
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .erapin-pack-footer .erapin-pack-count,
  .erapin-pack-count {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 10px;
    color: #8B7355;
  }
}

/* Pack tile purple color — added to the palette so the deterministic
   _packColorClassByHash() can cycle 4 tones (red/green/gold/purple)
   matching the desktop mock. */
.erapin-pack-icon-purple { background: rgba(120, 80, 160, 0.12); }

/* DESKTOP REDESIGN — phase 4: Today's Quiz "Published for today" panel
   Mock-style summary header + chips on TOP, full event list still
   visible below. Originally tried collapsing the detail view by
   default but that hid pack-event lists when teachers click a pack
   tile (the same #tq-body is reused for pack-detail render). The
   summary header is now purely additive context. */
@media (min-width: 900px) {
  #tq-summary-header { display: flex !important; }
  #tq-chips { display: flex !important; }
  /* #tq-detail-view stays visible by default — hides the redundant
     internal title only since the summary header above carries it. */
  #tq-detail-view .tq-header { display: none; }
  /* "Show details" toggle is now a no-op visual indicator since the
     details are always shown — keeps the icon on screen so the panel
     still resembles the mock without breaking the underlying flow. */
  #tq-details-toggle-icon { display: none; }
  #tq-details-toggle { display: none; }

  /* Pack browser footer — already inline-styled */
  #pack-browser-footer { display: flex !important; }
}

/* DESKTOP REDESIGN — phase 5: leaderboard row visual polish per mock.
   Mock has clean rank.dot.name.score columns with #1 in deep red, every
   row sharing the same baseline border, monospace numerics. */
@media (min-width: 900px) {
  .lb-row {
    padding: 8px 0 !important;
    border-bottom: 0.5px solid rgba(60, 40, 20, 0.05) !important;
  }
  .lb-rank {
    font-family: 'Courier Prime', 'Courier New', monospace !important;
    font-size: 13px !important;
    color: #8B7355 !important;
    width: 28px !important;
    text-align: left;
  }
  .lb-rank.top3 { color: #B33A1A !important; }
  .lb-name {
    font-family: 'Courier Prime', 'Courier New', monospace !important;
    font-size: 13px !important;
    color: #2C2620 !important;
    margin-left: 6px;
  }
  .lb-score {
    font-family: 'Courier Prime', 'Courier New', monospace !important;
    font-size: 13px !important;
    color: #2C2620 !important;
  }
  .lb-counter {
    text-align: center;
    padding-top: 8px;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 10px;
    color: #8B7355;
  }
}