/* Ziyoly Maktab LMS — Testbor-derived modules styles */

/* ===== Common Testbor UI ===== */
.tb-hero {
  background: linear-gradient(135deg, #1c84ee 0%, #7f56da 100%);
  border-radius: 14px;
  padding: 22px 26px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.tb-hero::after {
  content: '';
  position: absolute;
  right: -50px; top: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
}
.tb-hero h2 { color: white; margin: 0 0 4px; font-size: 22px; }
.tb-hero .sub { color: rgba(255,255,255,0.85); font-size: 13px; }
.tb-hero .hero-stats { display: flex; gap: 28px; position: relative; z-index: 1; }
.tb-hero .hs-val { font-size: 28px; font-weight: 700; line-height: 1; }
.tb-hero .hs-lbl { font-size: 11px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* Exam-specific palette (full-screen, serious) */
.exam-shell { background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: 0; overflow: hidden; }
.exam-shell .exam-topbar { background: #1e293b; padding: 14px 22px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #334155; }
.exam-shell .exam-topbar h3 { color: white; margin: 0; font-size: 16px; }
.exam-shell .exam-timer { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: #fbbf24; padding: 6px 14px; background: rgba(251,191,36,0.12); border-radius: 8px; letter-spacing: 1px; }
.exam-shell .exam-body { padding: 28px; min-height: 480px; background: #0f172a; }
.exam-shell .exam-footer { background: #1e293b; padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #334155; }
.exam-q-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.exam-q-dot { width: 34px; height: 34px; border-radius: 6px; background: #334155; color: #94a3b8; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid transparent; }
.exam-q-dot.answered { background: #22c55e; color: white; }
.exam-q-dot.flagged  { background: #fbbf24; color: #1e293b; }
.exam-q-dot.current  { border-color: white; background: #1c84ee; color: white; transform: scale(1.1); }
.exam-q-dot.skipped  { background: #ef5f5f; color: white; }

/* Questions bank cards */
.qbank-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.qtype-tile {
  background: white; border: 1px solid var(--zy-border); border-radius: 12px;
  padding: 14px 16px; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; gap: 12px;
}
.qtype-tile:hover { border-color: var(--zy-primary); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.qtype-tile.active { border-color: var(--zy-primary); background: var(--zy-primary-soft); box-shadow: 0 0 0 2px var(--zy-primary) inset; }
.qtype-ic { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 40px; }
.qtype-tile .l { font-weight: 600; color: var(--zy-heading); font-size: 13px; }
.qtype-tile .s { font-size: 11px; color: var(--zy-muted); margin-top: 2px; }

.qcard { background: white; border: 1px solid var(--zy-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 10px; transition: all .12s; }
.qcard:hover { border-color: var(--zy-primary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.qcard .qc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.qcard .qc-id { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--zy-muted); }
.qcard .qc-text { color: var(--zy-heading); font-size: 14px; font-weight: 500; margin-bottom: 10px; line-height: 1.5; }
.qcard .qc-options { display: flex; flex-direction: column; gap: 6px; }
.qcard .qc-opt { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--zy-bg); border-radius: 8px; font-size: 13px; }
.qcard .qc-opt.correct { background: rgba(34,197,94,0.1); color: #16a34a; }
.qcard .qc-opt.correct::before { content: '✓'; font-weight: 700; }
.qcard .qc-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 11px; color: var(--zy-muted); padding-top: 10px; border-top: 1px dashed var(--zy-border-2); }

/* Homework status badges */
.hw-priority { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.hw-priority.high { background: var(--zy-danger); }
.hw-priority.mid  { background: var(--zy-warning); }
.hw-priority.low  { background: var(--zy-success); }

/* Submission rows */
.sub-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: white; border: 1px solid var(--zy-border-2); border-radius: 10px; margin-bottom: 8px; }
.sub-row .sr-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 12px; flex: 0 0 36px; }
.sub-row .sr-score { font-size: 22px; font-weight: 700; color: var(--zy-success); }
.sub-row .sr-score.mid { color: var(--zy-warning); }
.sub-row .sr-score.low { color: var(--zy-danger); }

/* Drag-n-drop placeholder */
.dnd-blank { display: inline-block; min-width: 80px; padding: 4px 10px; background: var(--zy-primary-soft); border: 1.5px dashed var(--zy-primary); border-radius: 6px; margin: 0 4px; font-weight: 600; color: var(--zy-primary); text-align: center; }
.dnd-pool { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; background: var(--zy-bg); border-radius: 10px; margin-top: 12px; }
.dnd-chip { padding: 6px 14px; background: white; border: 1px solid var(--zy-border); border-radius: 8px; cursor: grab; font-size: 13px; font-weight: 500; color: var(--zy-heading); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.dnd-chip:hover { border-color: var(--zy-primary); }

/* Matching UI */
.match-col { display: flex; flex-direction: column; gap: 8px; }
.match-item { padding: 10px 14px; background: white; border: 1.5px solid var(--zy-border); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all .1s; }
.match-item.matched { background: var(--zy-primary-soft); border-color: var(--zy-primary); color: var(--zy-primary-700); }
.match-item:hover { border-color: var(--zy-primary); }

/* Exam cards (platforms) */
.exam-platform {
  background: white; border: 1px solid var(--zy-border); border-radius: 14px;
  padding: 22px; cursor: pointer; position: relative; overflow: hidden;
  transition: all .18s;
}
.exam-platform:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.exam-platform::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--c, var(--zy-primary)); }
.exam-platform .ep-ic { width: 48px; height: 48px; border-radius: 10px; background: var(--bg, var(--zy-primary-soft)); color: var(--c, var(--zy-primary)); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 14px; }
.exam-platform h3 { margin: 0 0 4px; color: var(--zy-heading); }

/* IELTS band score cells */
.band-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.band-cell { background: white; border: 1px solid var(--zy-border); border-radius: 10px; padding: 14px; text-align: center; }
.band-cell .bv { font-size: 26px; font-weight: 700; color: var(--zy-heading); line-height: 1; }
.band-cell .bl { font-size: 11px; color: var(--zy-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; }
.band-cell.overall { background: linear-gradient(135deg, #e31837, #c0142f); color: white; border: none; }
.band-cell.overall .bv, .band-cell.overall .bl { color: white; }

/* Contest / Battle */
.battle-card { background: linear-gradient(135deg, #7f56da 0%, #ef5f5f 100%); color: white; border-radius: 14px; padding: 22px; position: relative; overflow: hidden; }
.battle-card::after { content: '⚡'; position: absolute; right: -20px; top: -30px; font-size: 220px; opacity: 0.08; }
.leaderboard-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: white; border: 1px solid var(--zy-border-2); border-radius: 10px; margin-bottom: 6px; }
.lb-rank { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: var(--zy-border-2); color: var(--zy-heading); flex: 0 0 32px; }
.lb-rank.gold { background: linear-gradient(135deg, #fde047, #eab308); color: white; }
.lb-rank.silver { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: white; }
.lb-rank.bronze { background: linear-gradient(135deg, #fdba74, #c2410c); color: white; }

/* Live rooms */
.room-card { background: white; border: 1px solid var(--zy-border); border-radius: 12px; padding: 18px; position: relative; }
.room-card.live { border-left: 4px solid var(--zy-danger); }
.room-card.live .live-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: var(--zy-danger); color: white; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.room-card.live .live-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: white; animation: zyPulse 1.2s infinite; }
@keyframes zyPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.3); } }

/* Whiteboard canvas */
.wb-canvas { background: #fafbfc; background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 20px 20px; border: 1px solid var(--zy-border); border-radius: 10px; min-height: 340px; position: relative; overflow: hidden; }
.wb-toolbar { display: flex; gap: 6px; padding: 8px; background: white; border: 1px solid var(--zy-border); border-radius: 10px; }
.wb-tool { width: 36px; height: 36px; border-radius: 6px; border: 1px solid transparent; background: transparent; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--zy-muted); cursor: pointer; }
.wb-tool:hover { background: var(--zy-bg); color: var(--zy-heading); }
.wb-tool.active { background: var(--zy-primary); color: white; }

/* Chat */
.chat-shell { display: grid; grid-template-columns: 300px 1fr; min-height: 600px; background: white; border: 1px solid var(--zy-border); border-radius: 14px; overflow: hidden; }
.chat-list { border-right: 1px solid var(--zy-border-2); display: flex; flex-direction: column; }
.chat-search-wrap { padding: 12px; border-bottom: 1px solid var(--zy-border-2); }
.chat-search-wrap input { width: 100%; }
.chat-thread { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--zy-border-2); }
.chat-thread:hover { background: var(--zy-bg); }
.chat-thread.active { background: var(--zy-primary-soft); border-left: 3px solid var(--zy-primary); padding-left: 11px; }
.chat-thread .ct-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 12px; flex: 0 0 40px; }
.chat-thread .ct-name { font-size: 13px; font-weight: 600; color: var(--zy-heading); }
.chat-thread .ct-last { font-size: 12px; color: var(--zy-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread .ct-unread { background: var(--zy-primary); color: white; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.chat-main { display: flex; flex-direction: column; }
.chat-header { padding: 14px 18px; border-bottom: 1px solid var(--zy-border-2); display: flex; align-items: center; gap: 12px; }
.chat-msgs { flex: 1; padding: 20px; overflow-y: auto; max-height: 450px; background: #fafbfc; }
.msg-bubble { max-width: 65%; margin-bottom: 10px; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; position: relative; }
.msg-bubble.me { background: var(--zy-primary); color: white; margin-left: auto; border-bottom-right-radius: 4px; }
.msg-bubble.other { background: white; border: 1px solid var(--zy-border-2); color: var(--zy-heading); border-bottom-left-radius: 4px; }
.msg-bubble .mb-sender { font-size: 11px; font-weight: 700; margin-bottom: 2px; color: var(--zy-primary); }
.msg-bubble.me .mb-sender { color: rgba(255,255,255,0.9); }
.msg-bubble .mb-time { font-size: 10px; opacity: 0.65; margin-top: 4px; }
.msg-bubble .mb-attach { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(0,0,0,0.06); border-radius: 8px; margin-top: 6px; font-size: 12px; }
.msg-bubble.me .mb-attach { background: rgba(255,255,255,0.18); }
.chat-composer { padding: 12px; border-top: 1px solid var(--zy-border-2); display: flex; align-items: center; gap: 8px; background: white; }
.chat-composer input { flex: 1; }

/* Notifications */
.notif-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; background: white; border: 1px solid var(--zy-border-2); border-radius: 10px; margin-bottom: 6px; position: relative; }
.notif-row.unread { border-left: 3px solid var(--zy-primary); background: #fbfcfe; }
.notif-row.urgent { border-left-color: var(--zy-danger); }
.notif-row .nr-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 36px; }
.notif-row .nr-title { font-weight: 600; color: var(--zy-heading); font-size: 13px; }
.notif-row .nr-sub { font-size: 12px; color: var(--zy-muted); margin-top: 2px; }
.notif-row .nr-time { font-size: 11px; color: var(--zy-muted); margin-left: auto; flex-shrink: 0; }

/* Billing / Pricing */
.plan-card { background: white; border: 2px solid var(--zy-border); border-radius: 16px; padding: 26px 22px; position: relative; transition: all .2s; }
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.08); }
.plan-card.popular { border-color: var(--zy-primary); background: linear-gradient(180deg, white 0%, var(--zy-primary-soft) 200%); }
.plan-card.popular::before { content: 'ENG MASHHUR'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--zy-primary); color: white; padding: 4px 14px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; }
.plan-price { font-size: 32px; font-weight: 800; color: var(--zy-heading); margin: 8px 0 4px; line-height: 1; }
.plan-price .u { font-size: 14px; color: var(--zy-muted); font-weight: 500; }
.plan-feat { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; color: var(--zy-body); }
.plan-feat .i { color: var(--zy-success); }

/* Mock test QR */
.qr-frame { background: white; padding: 22px; border-radius: 14px; border: 2px solid var(--zy-border); display: inline-block; }
.qr-mock { width: 180px; height: 180px; background: repeating-conic-gradient(from 0deg at 50% 50%, #1a2230 0deg 8deg, white 8deg 16deg); border-radius: 8px; position: relative; }
.qr-mock::before, .qr-mock::after { content: ''; position: absolute; width: 40px; height: 40px; border: 6px solid #1a2230; background: white; }
.qr-mock::before { top: 8px; left: 8px; }
.qr-mock::after { bottom: 8px; right: 8px; }
.qr-mock .qr-tl { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 6px solid #1a2230; background: white; }

/* Status pills */
.st-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.st-active   { background: rgba(34,197,94,0.14); color: #16a34a; }
.st-pending  { background: rgba(249,185,49,0.16); color: #b88300; }
.st-done     { background: rgba(28,132,238,0.14); color: var(--zy-primary); }
.st-failed   { background: rgba(239,95,95,0.12); color: var(--zy-danger); }
.st-draft    { background: var(--zy-border-2); color: var(--zy-muted); }
.st-live     { background: rgba(239,95,95,0.14); color: var(--zy-danger); }
.st-live::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--zy-danger); margin-right:4px; animation: zyPulse 1.2s infinite; }

/* Wizard stepper (for homework form, exam form) */
.tb-stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.tb-step { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 22px; background: var(--zy-bg); color: var(--zy-muted); font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.tb-step .n { width: 20px; height: 20px; border-radius: 50%; background: white; color: var(--zy-muted); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.tb-step.active { background: var(--zy-primary-soft); color: var(--zy-primary); border-color: var(--zy-primary); }
.tb-step.active .n { background: var(--zy-primary); color: white; }
.tb-step.done { background: rgba(34,197,94,0.12); color: #16a34a; }
.tb-step.done .n { background: var(--zy-success); color: white; }
.tb-step-line { width: 20px; height: 2px; background: var(--zy-border); }

/* ===== Live students board (kanban) ===== */
.lsb-wrap { background: #fafbfc; border-radius: 12px; padding: 18px 20px 22px; border: 1px solid var(--zy-border-2); }
.lsb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.lsb-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--zy-ink); letter-spacing: -0.3px; }
.lsb-head .right { display: flex; gap: 8px; align-items: center; }
.lsb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lsb-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lsb-col-head { position: relative; border-radius: 14px; padding: 16px 18px; color: white; overflow: hidden; box-shadow: 0 6px 18px -6px rgba(15,23,42,0.25); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lsb-col-head.p-all  { background: linear-gradient(135deg,#1c84ee 0%,#0ea5e9 55%,#06b6d4 100%); }
.lsb-col-head.p-pas  { background: linear-gradient(135deg,#ea580c 0%,#f97316 55%,#fbbf24 100%); }
.lsb-col-head.p-idle { background: linear-gradient(135deg,#475569 0%,#64748b 55%,#94a3b8 100%); }
.lsb-col-head.p-help { background: linear-gradient(135deg,#b91c1c 0%,#ef4444 55%,#f87171 100%); }
.lsb-col-glow { position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,0.15); filter: blur(10px); pointer-events: none; }
.lsb-col-head::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 120%, rgba(255,255,255,0.18), transparent 60%); pointer-events: none; }
.lsb-col-head-top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; min-width: 0; flex: 1; }
.lsb-col-head-top i { font-size: 22px; color: rgba(255,255,255,0.95); flex-shrink: 0; }
.lsb-pill { font-size: 16px; font-weight: 700; letter-spacing: -0.1px; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.08); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsb-col-head-stats { display: flex; gap: 20px; position: relative; z-index: 1; align-items: flex-end; flex-shrink: 0; }
.lsb-col-stat { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.lsb-col-val { font-size: 28px; font-weight: 700; line-height: 1; color: white; letter-spacing: -0.3px; }
.lsb-col-lbl { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.5px; }
.lsb-col-body { display: flex; flex-direction: column; gap: 7px; max-height: 640px; overflow-y: auto; padding: 2px 4px 2px 0; }
.lsb-col-body::-webkit-scrollbar { width: 6px; }
.lsb-col-body::-webkit-scrollbar-thumb { background: var(--zy-border); border-radius: 3px; }
.lsb-card { position: relative; background: white; border: 1px solid var(--zy-border-2); border-radius: 12px; padding: 12px 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,0.04); overflow: hidden; font-size: 12px; }
.lsb-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .18s; }
.lsb-card.bkt-active::before { background: linear-gradient(180deg,#22c55e,#16a34a); }
.lsb-card.bkt-pas::before    { background: linear-gradient(180deg,#f97316,#ea580c); }
.lsb-card.bkt-idle::before   { background: linear-gradient(180deg,#94a3b8,#64748b); }
.lsb-card.bkt-help::before   { background: linear-gradient(180deg,#ef4444,#b91c1c); }
.lsb-card:hover { border-color: rgba(28,132,238,0.35); box-shadow: 0 8px 20px -10px rgba(15,23,42,0.18); transform: translateY(-1px); }
.lsb-card.open { border-color: #3b82f6; box-shadow: 0 14px 32px -12px rgba(59,130,246,0.28); transform: translateY(-1px); }
.lsb-head { display: flex; align-items: center; gap: 10px; }
.lsb-meta { color: var(--zy-muted); font-size: 11px; display: flex; align-items: center; gap: 6px; line-height: 1.3; }
.lsb-meta i { font-size: 13px; flex-shrink: 0; }
.lsb-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.lsb-bkt-badge { font-weight: 700; }
.lsb-bkt-badge.bkt-bg-active { background: rgba(34,197,94,0.14); color: #16a34a; }
.lsb-bkt-badge.bkt-bg-pas    { background: rgba(249,115,22,0.14); color: #c2410c; }
.lsb-bkt-badge.bkt-bg-idle   { background: rgba(148,163,184,0.22); color: #475569; }
.lsb-bkt-badge.bkt-bg-help   { background: rgba(239,68,68,0.14); color: #dc2626; }
.lsb-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 13px; flex-shrink: 0; position: relative; box-shadow: 0 2px 6px -1px rgba(15,23,42,0.18), inset 0 -2px 6px rgba(0,0,0,0.08); }
.lsb-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.lsb-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid white; box-sizing: border-box; }
.lsb-dot.dot-active { background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: lsbPulse 2s infinite; }
.lsb-dot.dot-pas    { background: #f97316; }
.lsb-dot.dot-idle   { background: #94a3b8; }
.lsb-dot.dot-help   { background: #ef4444; }
@keyframes lsbPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55);} 70% { box-shadow: 0 0 0 6px rgba(34,197,94,0);} 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0);} }
.lsb-nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--zy-ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsb-xp { display: inline-flex; align-items: center; gap: 3px; background: #fff7e6; color: #d97706; padding: 3px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.lsb-xp i { color: #f59e0b; font-size: 11px; }
.lsb-icon-btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--zy-muted); border-radius: 6px; font-size: 16px; flex-shrink: 0; }
.lsb-card:hover .lsb-icon-btn { color: var(--zy-primary); }
.lsb-expand { margin: 4px -12px -12px -14px; padding: 8px 14px 12px; background: linear-gradient(180deg, rgba(59,130,246,0.04), rgba(59,130,246,0.01)); border-top: 1px solid var(--zy-border-2); display: flex; flex-direction: column; gap: 0; }
.lsb-expand-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed rgba(148,163,184,0.22); }
.lsb-expand-row:last-of-type { border-bottom: none; }
.lsb-expand-lbl { color: var(--zy-muted); font-weight: 600; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px; }
.lsb-expand-val { color: var(--zy-ink); font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsb-muted { color: var(--zy-muted); font-weight: 500; }
.lsb-stats { display: flex; gap: 6px; align-items: center; margin: 10px 0 4px; }
.lsb-stat-chip { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1; }
.lsb-stat-chip.st-good { background: rgba(34,197,94,0.12); color: #16a34a; }
.lsb-stat-chip.st-warn { background: rgba(245,158,11,0.14); color: #b45309; }
.lsb-stat-chip.st-bad  { background: rgba(239,68,68,0.12); color: #dc2626; }
.lsb-actions { display: flex; gap: 6px; margin-top: 4px; }
.lsb-details-btn { flex: 1; padding: 8px 8px; background: linear-gradient(135deg,#1c84ee,#0ea5e9); border: none; border-radius: 10px; font-size: 11px; font-weight: 600; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 4px 10px -4px rgba(28,132,238,0.5); transition: transform .15s, box-shadow .15s; }
.lsb-details-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -4px rgba(28,132,238,0.6); }
.lsb-details-btn.ghost { background: white; color: var(--zy-primary); border: 1px solid var(--zy-border-2); box-shadow: none; }
.lsb-details-btn.ghost:hover { background: rgba(28,132,238,0.06); border-color: var(--zy-primary); transform: translateY(-1px); }

/* Mini DC-style artboard */
.dc-canvas { background: #f0f2f5; padding: 24px; border-radius: 12px; overflow: auto; }
.dc-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--zy-muted); font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.dc-section-title::before { content: ''; width: 20px; height: 2px; background: var(--zy-primary); }
.dc-artboard { background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); margin-bottom: 28px; overflow: hidden; border: 1px solid var(--zy-border); }
.dc-ab-title { padding: 8px 14px; background: #fafbfc; border-bottom: 1px solid var(--zy-border-2); font-size: 11px; color: var(--zy-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.dc-ab-body { padding: 18px 22px; }
.dc-variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }

/* Generic row action icons */
.row-actions { display: flex; gap: 4px; opacity: 0.4; transition: opacity .12s; }
.zy-table tr:hover .row-actions { opacity: 1; }
.row-actions button { background: transparent; border: none; width: 28px; height: 28px; border-radius: 6px; color: var(--zy-muted); cursor: pointer; }
.row-actions button:hover { background: var(--zy-border-2); color: var(--zy-heading); }

/* Audio player stub */
.audio-player { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--zy-bg); border-radius: 22px; }
.audio-player .ap-play { width: 32px; height: 32px; border-radius: 50%; background: var(--zy-primary); color: white; border: none; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
.audio-player .ap-wave { flex: 1; height: 24px; display: flex; align-items: center; gap: 2px; }
.audio-player .ap-wave span { flex: 1; background: var(--zy-primary); border-radius: 1px; opacity: 0.4; }
.audio-player .ap-wave span.played { opacity: 1; }
.audio-player .ap-time { font-size: 11px; color: var(--zy-muted); font-variant-numeric: tabular-nums; }


/* ===== Exams hub ===== */
.exam-platform { background:#fff; border:1px solid var(--zy-border-2); border-radius:14px; overflow:hidden; transition: all .2s; }
.exam-platform:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
.ep-top { padding:22px; color:#fff; position:relative; overflow:hidden; }
.ep-top::after { content:''; position:absolute; right:-40px; bottom:-40px; width:140px; height:140px; border-radius:50%; background: rgba(255,255,255,0.15); }
.ep-icon { width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:10px; }
.ep-title { font-size:22px; font-weight:700; }
.ep-meta { font-size:12px; opacity:0.9; margin-top:4px; }
.ep-body { padding:16px 18px; }
.ep-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:1px dashed var(--zy-border-2); }
.ep-row:last-child { border-bottom:none; }
.ep-sections { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

/* Exam banner */
.exam-banner { color:#fff; padding:26px 30px; border-radius:14px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; position:relative; overflow:hidden; }
.exam-banner::after { content:''; position:absolute; right:-50px; top:-60px; width:240px; height:240px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%); }
.exam-banner h1 { color:#fff; font-size:28px; line-height:1.2; }
.eb-pill { display:inline-block; padding:4px 12px; background:rgba(255,255,255,0.2); border-radius:12px; font-size:11px; font-weight:600; margin-bottom:8px; text-transform: uppercase; letter-spacing:0.5px; }
.eb-sub { font-size:14px; opacity:0.9; margin-top:8px; }
.eb-stats { display:flex; gap:24px; position:relative; z-index:1; }
.eb-stats .v { font-size:32px; font-weight:700; line-height:1; }
.eb-stats .l { font-size:11px; opacity:0.85; text-transform:uppercase; margin-top:4px; letter-spacing:0.5px; }

/* IELTS listening row */
.ielts-sec { display:flex; gap:14px; align-items:center; padding:14px 16px; background:#fff; border:1px solid var(--zy-border-2); border-radius:10px; margin-bottom:8px; transition: all .15s; }
.ielts-sec:hover { border-color: var(--zy-primary); }
.ielts-sec.playing { border-color:#e31837; background:#e3183708; }
.is-play { width:44px; height:44px; border-radius:50%; background: var(--zy-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; flex-shrink:0; }
.ielts-sec.playing .is-play { background:#e31837; animation: zyPulse 1.5s infinite; }
.audio-bar { display:flex; align-items:center; gap:10px; margin-top:8px; }
.ab-bar { flex:1; height:6px; background: var(--zy-bg); border-radius:3px; overflow:hidden; }
.ab-fill { height:100%; background:#e31837; border-radius:3px; }

/* Proctor grid */
.proctor-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
.proctor-cell { background:#fff; border:2px solid var(--zy-border-2); border-radius:10px; padding:14px; position:relative; transition: all .15s; }
.proctor-cell.flag { border-color:#f9b931; background:#f9b93108; }
.proctor-cell.paused { border-color:#8486a7; opacity:0.75; }
.proctor-cell.done { border-color:#22c55e; background:#22c55e08; }
.pc-avatar { width:40px; height:40px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; margin-bottom:8px; }
.pc-name { font-size:13px; font-weight:600; color: var(--zy-heading); }
.pc-meta { font-size:11px; color: var(--zy-muted); margin-top:2px; }
.pc-flag { display:inline-block; margin-top:6px; padding:2px 8px; border-radius:8px; background:#f9b93120; color:#f9b931; font-size:10px; font-weight:600; }
.pc-flag.paused { background:#8486a720; color:#8486a7; }
.pc-flag.done { background:#22c55e20; color:#22c55e; }

/* QR */
.qr-wrap { display:inline-block; padding:20px; background:#fff; border:2px solid var(--zy-border); border-radius:14px; }

@keyframes zyPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,95,95,0.4); } 50% { box-shadow: 0 0 0 12px rgba(239,95,95,0); } }