:root{ --navy:#1F3864; --blue:#2E5496; --red:#B22222; --green:#1E7145; --grey:#7A7A7A; --line:#dfe5ee; --bg:#f4f6fa; }
*{ box-sizing:border-box; }
body{ font-family:'Segoe UI',Calibri,'Microsoft YaHei',Arial,sans-serif; color:#1c1c1c; margin:0; background:var(--bg); line-height:1.5; }
a{ color:var(--blue); }
.cn{ color:var(--grey); font-weight:600; font-size:.82em; }
.muted{ color:var(--grey); } .small{ font-size:12px; } .danger{ color:var(--red); }
.center-page{ display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; min-height:100vh; }
.card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px; width:100%; max-width:440px; box-shadow:0 4px 18px rgba(20,40,80,.06); }
.card.install{ max-width:560px; }
.card h1{ margin:0 0 14px; color:var(--navy); font-size:22px; }
.form label{ display:block; font-size:13px; font-weight:600; color:#333; margin:10px 0 0; }
.form input, .form select, .form textarea{ width:100%; padding:9px 11px; margin-top:4px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; }
fieldset{ border:1px solid var(--line); border-radius:10px; margin:14px 0; padding:8px 14px 16px; }
legend{ font-size:13px; font-weight:700; color:var(--navy); padding:0 6px; }
.btn{ border:none; border-radius:8px; padding:10px 20px; font-size:15px; font-weight:600; cursor:pointer; }
.btn.primary{ background:var(--navy); color:#fff; } .btn.primary:disabled{ background:#9aa6ba; cursor:not-allowed; }
.btn.ghost{ background:#eef2f8; color:var(--navy); } .btn.sm{ padding:6px 12px; font-size:13px; }
.btn.danger{ background:#fbe6e6; color:var(--red); }
.ok-box{ background:#e6f2ea; border:1px solid #bfe0cb; border-radius:10px; padding:14px 16px; }
.err-box{ background:#fbe6e6; border:1px solid #e6b8b8; color:var(--red); border-radius:10px; padding:10px 14px; margin-bottom:12px; }
code{ background:#eef2f8; padding:1px 6px; border-radius:5px; }

/* header */
.topbar{ background:var(--navy); color:#fff; padding:14px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.topbar h1{ margin:0; font-size:18px; }
.topbar .sp{ flex:1; }
.topbar .who{ font-size:13px; color:#c7d3e6; }
.wrap{ max-width:1050px; margin:0 auto; padding:18px; }

/* left-sidebar layout */
.layout{ display:flex; align-items:stretch; min-height:calc(100vh - 52px); }
.sidebar{ width:210px; flex:0 0 210px; background:#eef2f8; border-right:1px solid var(--line); padding:14px 10px; }
.navitem{ display:block; width:100%; text-align:left; border:none; background:none; padding:10px 14px; margin:2px 0; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600; color:#3a4a63; }
.navitem:hover{ background:#e2eaf5; }
.navitem.active{ background:var(--navy); color:#fff; }
.navgroup{ font-size:11px; font-weight:700; color:#9aa6ba; text-transform:uppercase; letter-spacing:.5px; padding:12px 14px 4px; }
.content{ flex:1; padding:22px 26px; min-width:0; overflow-x:auto; }
.content h2.page-title{ margin:0 0 4px; color:var(--navy); font-size:20px; }
.content .page-sub{ color:var(--grey); font-size:13px; margin:0 0 16px; }
@media (max-width:720px){
  .layout{ flex-direction:column; }
  .sidebar{ width:100%; flex:none; display:flex; flex-wrap:wrap; gap:4px; border-right:none; border-bottom:1px solid var(--line); }
  .navitem{ width:auto; } .navgroup{ display:none; }
}

/* dashboard stat cards */
.statcards{ display:flex; gap:14px; flex-wrap:wrap; }
.statcard{ flex:1; min-width:130px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
.statcard .statnum{ font-size:34px; font-weight:800; color:var(--navy); line-height:1; }
.statcard .statlbl{ color:var(--grey); font-size:13px; margin-top:4px; }

/* tables */
table.grid{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; font-size:13.5px; }
table.grid th{ background:var(--navy); color:#fff; text-align:left; padding:9px 11px; font-size:12.5px; }
table.grid td{ padding:8px 11px; border-top:1px solid var(--line); vertical-align:top; }
table.grid tr:nth-child(even) td{ background:#fafbfd; }
.pill{ display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; }
.pill.pass{ background:#e6f2ea; color:var(--green); } .pill.fail{ background:#fbe6e6; color:var(--red); }
.pill.on{ background:#e6f2ea; color:var(--green); } .pill.off{ background:#eee; color:#777; }
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }

/* form pages */
.formcard{ max-width:660px; margin-top:6px; }
.formcard label{ display:block; font-size:13px; font-weight:600; color:#333; margin:12px 0 0; }
.formcard input:not([type=radio]):not([type=checkbox]), .formcard select, .formcard textarea{
  width:100%; padding:9px 11px; margin-top:4px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; }
.formcard textarea{ resize:vertical; }
.formactions{ margin-top:20px; display:flex; gap:10px; justify-content:flex-end; }

/* results answer chips (wrap instead of scrolling right) */
.qachips{ display:flex; flex-wrap:wrap; gap:3px; }
.qachip{ min-width:22px; height:20px; padding:0 4px; border-radius:4px; font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.qachip.ok{ background:var(--green); } .qachip.no{ background:var(--red); } .qachip.na{ background:#d3d8e0; color:#667; }

/* live roster (admin) */
.lnames{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:2px 16px; margin-top:8px; }
.lname{ display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed var(--line); padding:3px 0; font-size:13px; }

/* presenter mini preview (admin) */
.mini-stage{ position:relative; width:100%; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#0f1a2b; }
.mini-canvas{ width:1280px; height:720px; transform-origin:top left; overflow:hidden; position:relative; background:#fff; }

/* modal */
.modal-bg{ position:fixed; inset:0; background:rgba(20,30,50,.45); display:none; align-items:flex-start; justify-content:center; padding:30px 14px; z-index:50; overflow:auto; }
.modal-bg.show{ display:flex; }
.modal{ background:#fff; border-radius:12px; padding:22px; width:100%; max-width:620px; }
.modal h3{ margin:0 0 12px; color:var(--navy); }
.row{ display:flex; gap:12px; flex-wrap:wrap; } .row > *{ flex:1; min-width:140px; }

/* chooser */
.chooser{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.choice{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:left;
  border:1px solid var(--line); border-radius:12px; padding:18px; background:#fafbfd; cursor:pointer; }
.choice:hover{ border-color:var(--blue); background:#f0f5fc; }
.choice .ic{ font-size:30px; }
.choice b{ color:var(--navy); font-size:16px; }

/* slide viewer — full-screen 16:9 stage */
.stage-wrap{ position:fixed; inset:0; z-index:60; background:#0f1a2b; display:flex; flex-direction:column; }
.stage-top{ height:46px; flex:0 0 46px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 14px; color:#fff; }
.stage-top .btn.ghost{ background:rgba(255,255,255,.14); color:#fff; }
.stage-count{ font-size:13px; color:#c7d3e6; }
.stage-area{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.slide-canvas{ width:1280px; height:720px; flex:0 0 auto; background:#fff; border-radius:6px; overflow:hidden;
  transform-origin:center center; box-shadow:0 10px 40px rgba(0,0,0,.45); }
.slidebody{ width:100%; height:100%; box-sizing:border-box; padding:56px 70px; overflow:hidden; font-size:22px; color:#1c1c1c; }
.slidebody h1{ color:var(--navy); font-size:52px; margin:.1em 0 .3em; }
.slidebody h2{ color:var(--navy); font-size:38px; margin:.1em 0 .4em; }
.slidebody p{ margin:.45em 0; }
.slidebody ul, .slidebody ol{ margin:.45em 0 .45em 1.1em; }
.slidebody li{ margin:.35em 0; }
.slidebody .cn{ color:var(--grey); font-weight:600; font-size:.62em; display:block; margin:-.2em 0 .5em; }
.slidebody .muted{ color:var(--grey); }
.slidebody img{ max-width:100%; border-radius:8px; }
.hbbanner{ font-size:13px; font-weight:600; color:#c7d3e6; }
.hbbanner.live{ color:#ff8f8f; }
.navarrow{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border:none; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:34px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.navarrow:hover{ background:rgba(255,255,255,.28); }
.navarrow.left{ left:16px; } .navarrow.right{ right:16px; }
/* fixed logo box so any company's logo fits without breaking the slide */
.slidelogo{ position:absolute; bottom:26px; height:72px; width:200px; object-fit:contain; object-position:bottom; }
.slidelogo.left{ left:30px; object-position:left bottom; }
.slidelogo.right{ right:30px; object-position:right bottom; }
/* live in-class question on a slide */
.liveq{ max-width:1000px; }
.livehdr{ display:inline-block; background:var(--red); color:#fff; font-weight:700; font-size:14px; letter-spacing:.5px; padding:3px 12px; border-radius:20px; margin-bottom:14px; }
.liveopts{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.liveopt{ text-align:left; border:2px solid var(--line); background:#fafbfd; border-radius:10px; padding:16px 20px; font-size:22px; cursor:pointer; }
.liveopt:hover:not(:disabled){ border-color:var(--blue); background:#f0f5fc; }
.liveopt:disabled{ cursor:default; }
.liveopt.ans{ border-color:var(--green); background:#e6f2ea; }
.liveopt.pick-wrong{ border-color:var(--red); background:#fbe6e6; }
.liveopt .optcn{ color:var(--grey); font-size:.72em; }
.livefoot{ margin-top:16px; font-size:18px; font-weight:600; }
.livefoot.ok{ color:var(--green); } .livefoot.no{ color:var(--red); }

/* quiz */
.q{ background:#fff; border:1px solid var(--line); border-radius:9px; padding:14px 16px; margin:12px 0; }
.q .num{ font-weight:700; color:var(--navy); margin-right:6px; }
.q .en{ font-size:16px; } .q .qcn{ color:var(--grey); font-size:13px; margin:3px 0 10px; }
.q img.qimg{ max-width:100%; border-radius:8px; margin:8px 0; border:1px solid var(--line); }
.opts{ display:flex; flex-wrap:wrap; gap:8px; } .opts.col{ flex-direction:column; }
label.opt{ display:flex; gap:8px; border:1px solid var(--line); border-radius:7px; padding:8px 12px; cursor:pointer; font-size:14.5px; background:#fafbfd; }
.opts.col label.opt{ width:100%; }
label.opt:hover{ border-color:var(--blue); background:#f0f5fc; }
.optcn{ color:var(--grey); font-size:12.5px; }
.q.correct{ border-color:#bfe0cb; } .q.wrong{ border-color:#e6b8b8; }
label.opt.ans{ background:#e6f2ea; border-color:var(--green); } label.opt.pick-wrong{ background:#fbe6e6; border-color:var(--red); }
.exp{ margin-top:10px; font-size:13px; background:#f7f9fc; border-radius:7px; padding:8px 12px; }
.bar{ position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line); padding:12px 16px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:14px; border-radius:0 0 10px 10px; }
.prog{ font-weight:600; color:var(--navy); }
.result{ text-align:center; background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px; margin:16px 0; }
.result .score{ font-size:42px; font-weight:800; color:var(--navy); }
.badge{ display:inline-block; margin-top:8px; font-size:16px; font-weight:700; padding:6px 18px; border-radius:24px; }
.badge.pass{ background:#e6f2ea; color:var(--green); } .badge.fail{ background:#fbe6e6; color:var(--red); }