:root{ /* Studio Deck — quiz-board blue control room */ --bg:#0A0D14; --bg2:#11151F; --panel:#141925; --panel2:#1C2330; --ink:#EEF2F9; --muted:#8893A8; --line:#283041; --accent:#3D8BFF; /* brand / board blue */ --accent2:#2BD46A; /* ON AIR / go-live / success */ --warn:#FFB02E; --bad:#FF4D5E; /* the four buzzers (answer system) */ --a:#FF4D5E; --b:#2563EB; --c:#FFB02E; --d:#2BD46A; --display:"Unbounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --brand:"Bricolage Grotesque","Unbounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --r:14px; /* shared aliases + soft surfaces (match the Quiz Creator design tokens) */ --green:#2BD46A; --accent-soft:#cfe0ff; --line2:#3a4256; --radial:rgba(61,139,255,.16); --sidebar:linear-gradient(180deg,#0E121C,#0A0D14); --shadow:0 16px 44px rgba(0,0,0,.34); --shadow-sm:0 10px 30px rgba(0,0,0,.28); } /* ── light theme (toggled via ) ─────── */ html[data-theme="light"]{ --bg:#EDF1F8; --bg2:#FFFFFF; --panel:#FFFFFF; --panel2:#F3F6FC; --ink:#131A28; --muted:#5E6B80; --line:#E2E8F1; --line2:#C4CDDC; --accent:#2B6FE0; --accent2:#149A52; --green:#149A52; --accent-soft:#2B6FE0; --radial:rgba(43,111,224,.10); --sidebar:linear-gradient(180deg,#FFFFFF,#EEF2F9); --shadow:0 14px 36px rgba(30,50,90,.12); --shadow-sm:0 8px 22px rgba(30,50,90,.08); } html[data-theme="light"] body{ background:radial-gradient(900px 520px at 78% -8%, var(--radial), transparent 60%), var(--bg); } html[data-theme="light"]{ --hover:#EDF1F8; } html[data-theme="light"] .card{box-shadow:var(--shadow)} html[data-theme="light"] .btn.ghost:hover{background:#EDF1F8;border-color:var(--line2)} html[data-theme="light"] .nav-item:hover{background:#EDF1F8} html[data-theme="light"] .nav-item.active{color:var(--accent)} html[data-theme="light"] .nav-item.active .ni{opacity:1} html[data-theme="light"] ::placeholder{color:#97A1B5} html[data-theme="light"] .code{color:var(--ink)} html[data-theme="light"] .langsw button:not(.on), html[data-theme="light"] .qchip,html[data-theme="light"] .pf-tag{color:var(--muted)} html[data-theme="light"] .nav-item.active::before{background:var(--accent)} html[data-theme="light"] .qcat,html[data-theme="light"] .nav-item.active{color:var(--accent)} html[data-theme="light"] .iconbtn:hover:not(:disabled), html[data-theme="light"] .btn.ghost:hover{background:#EDF1F8} *{box-sizing:border-box} body{ margin:0;font-family:var(--sans);color:var(--ink); background: radial-gradient(900px 520px at 78% -8%, rgba(61,139,255,.16), transparent 60%), var(--bg); min-height:100vh;-webkit-font-smoothing:antialiased;letter-spacing:.1px; } /* SMPTE-style broadcast color bars — the four answer colors (signature) */ body::before{ content:"";position:fixed;top:0;left:0;right:0;height:4px;z-index:60; background:linear-gradient(90deg,var(--a) 0 25%,var(--b) 25% 50%,var(--c) 50% 75%,var(--d) 75% 100%); } a{color:var(--accent)} h1{font-family:var(--display);font-size:22px;margin:0;letter-spacing:-.4px;font-weight:800} h2{font-family:var(--sans);font-size:17px;margin:0 0 12px;font-weight:700;letter-spacing:-.2px} .muted{color:var(--muted)} .hidden{display:none!important} .center{text-align:center} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .spread{justify-content:space-between} /* ── inputs ─────────────────────────────────────────────────── */ label{display:block;font-size:11px;color:var(--muted);margin:13px 0 5px;text-transform:uppercase;letter-spacing:.8px;font-weight:700} input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:11px 13px;font-size:15px;font-family:inherit;transition:border-color .15s,box-shadow .15s} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(61,139,255,.22)} textarea{min-height:66px;resize:vertical} ::placeholder{color:#5b647a} /* ── buttons ────────────────────────────────────────────────── */ .btn{background:var(--accent);color:#fff;border:none;border-radius:11px;padding:12px 18px;font-size:14.5px;font-weight:700;font-family:var(--sans);cursor:pointer;transition:filter .15s,transform .06s,box-shadow .15s} .btn:hover{filter:brightness(1.1)} .btn:active{transform:translateY(1px)} .btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(61,139,255,.4)} .btn.ghost{background:var(--panel2);border:1px solid var(--line);color:var(--ink)} .btn.ghost:hover{filter:none;border-color:#3a4256;background:#222a3a} .btn.green{background:var(--accent2);color:#06210f} .btn.warn{background:var(--warn);color:#231600} .btn:disabled{opacity:.45;cursor:default} .btn.sm{padding:7px 13px;font-size:12.5px;border-radius:9px} .btn.danger{color:#ff8a96} .btn.danger:hover{filter:none;color:#fff;background:rgba(255,93,108,.16);border-color:rgba(255,93,108,.5)} /* the "go live" bar — putting the quiz on air */ .btn.big{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.2px;padding:17px 24px;width:100%;border-radius:14px} .btn.big.green{box-shadow:0 0 0 1px rgba(43,212,106,.4),0 14px 36px rgba(43,212,106,.22);position:relative} /* ── cards ──────────────────────────────────────────────────── */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:14px 0;box-shadow:0 16px 44px rgba(0,0,0,.34)} .card.muted{color:var(--muted);text-align:center;padding:34px 18px} .card.editing{border-color:var(--accent);box-shadow:0 0 0 3px rgba(61,139,255,.2),0 16px 44px rgba(0,0,0,.34)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:560px){.grid2{grid-template-columns:1fr}} /* eyebrow tag / status chips */ .tag{display:inline-block;font-family:var(--sans);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);padding:4px 10px;border-radius:7px} /* ── legacy single-column wrap (player page) ────────────────── */ .wrap{max-width:980px;margin:0 auto;padding:30px 18px 70px} .wrap.narrow{max-width:520px} .top{display:flex;align-items:center;gap:12px;margin-bottom:18px} .pill{font-size:12px;font-weight:600;color:var(--muted);background:var(--panel);border:1px solid var(--line);padding:5px 12px 5px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:7px} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 0 rgba(43,212,106,.6);animation:livepulse 2.4s ease-out infinite} .top .pill{margin-left:auto} /* ── buzzer logomark (signature) ────────────────────────────── */ .logo{width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:grid;grid-template-columns:1fr 1fr;background:var(--panel2);border:1px solid var(--line);overflow:hidden;font-size:18px;place-items:center} .logo .bz{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1} .logo .bz.a{color:var(--a);background:rgba(255,77,94,.14)} .logo .bz.b{color:#5b8cff;background:rgba(37,99,235,.20)} .logo .bz.c{color:var(--c);background:rgba(255,176,46,.14)} .logo .bz.d{color:var(--d);background:rgba(43,212,106,.14)} /* ── dashboard shell (host deck) ────────────────────────────── */ .app{display:flex;min-height:100vh} .sidebar{flex:0 0 248px;width:248px;background:linear-gradient(180deg,#0E121C,#0A0D14);border-right:1px solid var(--line);padding:22px 16px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .brand{display:flex;align-items:center;gap:12px;padding:0 6px 18px;margin-bottom:10px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none} .brand-name{font-family:var(--brand);font-size:19px;font-weight:800;letter-spacing:-.5px} .side-nav{display:flex;flex-direction:column;gap:3px;margin-top:8px} .nav-item{display:flex;align-items:center;gap:12px;width:100%;white-space:nowrap;text-align:left;background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:14px;font-weight:600;padding:11px 13px;border-radius:10px;cursor:pointer;position:relative;transition:background .14s,color .14s} .nav-item .ni{font-size:15px;width:18px;text-align:center;opacity:.8} .nav-item:hover{background:var(--panel2);color:var(--ink)} .nav-item:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(61,139,255,.5)} .nav-item.active{background:rgba(61,139,255,.14);color:#cfe0ff} .nav-item.active::before{content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)} .nav-item.active .ni{opacity:1} .side-foot{margin-top:auto;display:flex;flex-direction:column;gap:11px;padding-top:14px} .side-foot .pill{margin:0;align-self:flex-start} .side-foot .pill .dot{background:var(--warn);animation:none;box-shadow:none} .langsw{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:0 0 auto} .langsw button{background:none;border:none;color:var(--muted);font-family:var(--sans);font-weight:700;font-size:12px;padding:6px 12px;cursor:pointer} .langsw button.on{background:var(--accent);color:#fff} .langsw button:not(.on):hover{color:var(--ink)} /* sidebar footer language control */ .side-lang{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line)} .side-lang-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)} .main{flex:1;min-width:0;max-width:1020px;padding:28px 32px 84px} /* ── quiz list / question items ─────────────────────────────── */ .qitem{border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0;background:var(--panel2)} .qitem .qh{display:flex;gap:10px;align-items:center} .qitem .qh .n{font-family:var(--mono);background:var(--accent);color:#06122c;border-radius:7px;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .qitem .qh b{font-weight:600} /* ── answer buzzers (Kahoot-style, tactile) ─────────────────── */ .opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px} @media(max-width:560px){.opts{grid-template-columns:1fr}} .opt{display:flex;align-items:center;gap:13px;border:none;border-radius:14px;padding:18px 18px;font-size:16px;font-weight:700;color:#fff;cursor:pointer;text-align:left;min-height:66px;font-family:var(--sans);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px rgba(0,0,0,.28);transition:transform .08s,filter .14s} .opt:hover{filter:brightness(1.07)} .opt:active{transform:translateY(2px)} .opt .sym{font-size:19px;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))} .opt.a{background:var(--a)} .opt.b{background:var(--b)} .opt.c{background:var(--c);color:#231600} .opt.d{background:var(--d);color:#06210f} .opt.dim{opacity:.28;filter:saturate(.5)} .opt.right{outline:3px solid #fff;box-shadow:0 0 0 4px var(--accent2),0 8px 22px rgba(43,212,106,.3)} .opt.chosen{outline:3px solid #fff} .opt:disabled{cursor:default} /* ── editor: "mark correct" toggle (high-visibility) ────────── */ .optrow{display:flex;gap:11px;align-items:center;margin-top:10px} .correct-toggle{position:relative;flex:0 0 auto;margin:0;cursor:pointer;text-transform:none;letter-spacing:0} .correct-toggle input{position:absolute;opacity:0;width:0;height:0;margin:0} .ct-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:11px;border:2px solid var(--line);background:var(--bg2);color:var(--muted);font-family:var(--sans);font-weight:700;font-size:13px;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .06s} .ct-mark{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;border:2px solid currentColor;font-size:11px;line-height:1;opacity:.45;transition:inherit} .correct-toggle:hover .ct-pill{border-color:#3a4256;color:var(--ink)} .correct-toggle:active .ct-pill{transform:translateY(1px)} .correct-toggle input:focus-visible + .ct-pill{box-shadow:0 0 0 3px rgba(61,139,255,.55)} /* selected — unmistakable green */ .correct-toggle input:checked + .ct-pill{ background:var(--accent2);border-color:var(--accent2);color:#06210f; box-shadow:0 0 0 4px rgba(43,212,106,.28),0 8px 22px rgba(43,212,106,.4); } .correct-toggle input:checked + .ct-pill .ct-mark{opacity:1;border-color:#06210f;background:#06210f;color:var(--accent2)} /* ring the whole row that's marked correct */ .optrow:has(input[data-correct]:checked) input[data-opt]{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(43,212,106,.20)} .optrow:has(input[data-correct]:checked) .opt{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 2px var(--accent2),0 6px 16px rgba(0,0,0,.3)} /* ── import page (prompt builder + paste) ───────────────────── */ .import-grid{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start;margin-top:14px} @media(max-width:760px){.import-grid{grid-template-columns:1fr}} /* paste-only mode (Imports): hide the AI builder; lay paste + preview side by side */ #import.paste-only .import-form{display:none} #import.paste-only .import-grid{grid-template-columns:1fr;max-width:none} #import.paste-only .paste-card{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;align-items:start} #import.paste-only .paste-card > label, #import.paste-only .paste-card > textarea, #import.paste-only .paste-card > .row{grid-column:1} #import.paste-only .paste-card > .import-preview{grid-column:2;grid-row:1 / span 4;align-self:start;margin-top:0;max-height:430px;overflow:auto} @media(max-width:760px){ #import.paste-only .paste-card{grid-template-columns:1fr} #import.paste-only .paste-card > .import-preview{grid-column:1;grid-row:auto;margin-top:14px} } .import-preview.ph{display:block;border-style:dashed;background:transparent} .import-form h3{font-family:var(--display);font-weight:800;font-size:17px;margin:0 0 6px} #import textarea{min-height:180px;font-family:var(--mono);font-size:13px;line-height:1.5} #import .importmsg{color:var(--bad)} .pf-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .pf-tag{background:var(--bg2);border:1px solid var(--line);color:var(--muted);border-radius:20px;padding:6px 12px;font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .12s} .pf-tag:hover{color:var(--ink);border-color:#3a4256} .pf-tag.on{background:rgba(61,139,255,.16);border-color:var(--accent);color:#cfe0ff} .prompt-out{white-space:pre-wrap;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:13px;font-family:var(--mono);font-size:12px;line-height:1.5;color:#c4ccdb;max-height:320px;overflow:auto;margin:6px 0 12px} /* difficulty segmented control */ .seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:10px;overflow:hidden} .seg-btn{background:none;border:none;color:var(--muted);font-family:var(--sans);font-weight:700;font-size:13px;padding:9px 18px;cursor:pointer;transition:background .14s,color .14s} .seg-btn + .seg-btn{border-left:1px solid var(--line)} .seg-btn:hover:not(.on){color:var(--ink)} .seg-btn.on{background:var(--accent);color:#fff} /* "about to create" live preview */ .import-preview{display:none;margin-top:14px;border:1px solid var(--line);border-radius:11px;background:var(--bg2);padding:13px 15px;animation:risein .3s ease} .import-preview.show{display:block} .import-preview.bad{border-color:rgba(255,77,94,.5);background:rgba(255,77,94,.07)} .import-preview .ip-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--accent2);font-weight:700;margin-bottom:6px} .import-preview .ip-title{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.2px} .import-preview .ip-meta{font-size:12px;color:var(--muted);margin-top:3px} .import-preview .ip-qs{margin:11px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px} .import-preview .ip-qs li{font-size:13px;line-height:1.4;display:flex;gap:8px;align-items:baseline} .import-preview .ip-qn{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);min-width:18px;flex:0 0 auto} .import-preview .ip-err{color:#ff8a96;font-size:13px;font-weight:600} /* ── imports hub (choose Team Quiz / Interview) ─────────────── */ .hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px;max-width:760px} @media(max-width:620px){.hub-grid{grid-template-columns:1fr}} .hub-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;cursor:pointer;font-family:var(--sans);color:var(--ink);box-shadow:0 16px 44px rgba(0,0,0,.34);transition:border-color .15s,transform .08s,box-shadow .15s} .hub-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 0 0 3px rgba(61,139,255,.18),0 16px 44px rgba(0,0,0,.34)} .hub-card:active{transform:translateY(0)} .hub-card:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(61,139,255,.4)} .hub-ico{font-size:30px;line-height:1;margin-bottom:4px} .hub-name{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.2px} .hub-desc{font-size:12.5px;color:var(--muted);line-height:1.45} /* ── create: block editor (editable JSON/YAML question blocks) ─ */ .mkblock{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:12px 14px;margin:10px 0} .mkblock.bad{border-color:rgba(255,77,94,.5);box-shadow:inset 3px 0 0 var(--bad)} .mkblock-head{display:flex;align-items:center;gap:9px;margin-bottom:8px} .mkblock-head .qnum{font-family:var(--mono);background:var(--accent);color:#06122c;border-radius:7px;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;padding:0 6px} .mkblock-text{width:100%;min-height:128px;font-family:var(--mono);font-size:12.5px;line-height:1.5;resize:vertical} .mkblock-err{color:#ff8a96;font-size:12px;font-weight:600;margin-top:5px;min-height:1em} .iconbtn{background:var(--bg2);border:1px solid var(--line);color:var(--muted);width:30px;height:30px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:color .14s,border-color .14s,background .14s} .iconbtn:hover:not(:disabled){color:var(--ink);border-color:#3a4256;background:#222a3a} .iconbtn.danger:hover:not(:disabled){color:#fff;background:rgba(255,93,108,.16);border-color:rgba(255,93,108,.5)} .iconbtn:disabled{opacity:.35;cursor:default} /* My Quizzes type filter */ .qfilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px} .qfilter:empty{display:none} .qchip{background:var(--bg2);border:1px solid var(--line);color:var(--muted);font-family:var(--sans);font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:20px;cursor:pointer;transition:all .12s} .qchip:hover{color:var(--ink);border-color:#3a4256} .qchip.on{background:rgba(61,139,255,.16);border-color:var(--accent);color:#cfe0ff} /* create: format chooser */ .hub-grid-3{grid-template-columns:repeat(3,1fr);max-width:none} @media(max-width:860px){.hub-grid-3{grid-template-columns:1fr 1fr}} @media(max-width:560px){.hub-grid-3{grid-template-columns:1fr}} .fmt-card{gap:3px;padding:18px} .fmt-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:8px} .fmt-ico{font-size:28px;line-height:1} .fmt-card .hub-name{font-size:17px} .fmt-tag{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--accent);margin-top:2px} .fmt-card .hub-desc{margin-top:7px;font-size:12.5px;line-height:1.5} .fmt-badge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:20px;white-space:nowrap} .fmt-badge.yes{color:var(--accent2);background:rgba(43,212,106,.14);border:1px solid rgba(43,212,106,.4)} .fmt-badge.no{color:var(--warn);background:rgba(255,176,46,.14);border:1px solid rgba(255,176,46,.4)} /* survey = the unscored odd-one-out: warm accent so it reads as different */ .fmt-card.fmt-unscored .fmt-tag{color:var(--warn)} .fmt-card.fmt-unscored:hover{border-color:var(--warn);box-shadow:0 0 0 3px rgba(255,176,46,.18),0 16px 44px rgba(0,0,0,.34)} /* per-format rule list (roles · how many · scoring · transition · results) */ .fmt-rules{list-style:none;margin:12px 0 0;padding:11px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px;width:100%} .fmt-rules li{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.35;color:var(--ink)} .fmt-ri{flex:0 0 auto;width:18px;text-align:center;font-size:13px;opacity:.95} /* big quiz-type selector (Create) */ .seg.big{display:inline-flex;max-width:100%;overflow-x:auto} .seg.big .seg-btn{flex:1 1 auto;padding:14px 24px;font-size:15px;white-space:nowrap} /* colorful "Create" call-to-action in the sidebar */ .nav-item.nav-cta{background:var(--accent);color:#fff;font-weight:700;margin-bottom:8px;box-shadow:0 6px 16px rgba(61,139,255,.3)} .nav-item.nav-cta .ni{opacity:1} .nav-item.nav-cta:hover{background:var(--accent);filter:brightness(1.1);color:#fff} .nav-item.nav-cta.active{background:var(--accent);color:#fff} .nav-item.nav-cta.active::before{display:none} /* ── create/import merged screen (doc = source of truth) ────── */ .make-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} @media(max-width:820px){.make-grid{grid-template-columns:1fr}} .mkdoc{min-height:440px;font-family:var(--mono);font-size:12.5px;line-height:1.5;resize:vertical;white-space:pre} .mkpreview{min-height:120px} .mkpreview.bad{color:#ff8a96} .mkpreview .ip-err.warn{color:var(--warn)} .mkpreview .ip-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--accent2);font-weight:700;margin-bottom:6px} .mkpreview .ip-title{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.2px} .mkpreview .ip-meta{font-size:12px;color:var(--muted);margin:3px 0 10px} .mkpreview-list{display:flex;flex-direction:column;gap:7px} .mkrow{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line);border-radius:9px;background:var(--bg2);padding:8px 10px} .mkrow .ip-qn{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);min-width:18px;flex:0 0 auto;padding-top:3px} .mkrow-q{flex:1;min-width:0;font-size:13.5px;line-height:1.4} /* ── catalog page + "from catalog" picker ───────────────────── */ .catitem{padding:13px 15px} .catmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:7px} .qcat{font-size:11px;font-weight:700;color:#cfe0ff;background:rgba(61,139,255,.16);border:1px solid rgba(61,139,255,.4);padding:2px 9px;border-radius:6px} .qtag{font-size:11px;color:var(--muted);background:var(--bg2);border:1px solid var(--line);padding:2px 8px;border-radius:20px} .qtag::before{content:"#";opacity:.5} .diff{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:6px} .diff.easy{color:var(--accent2);background:rgba(43,212,106,.14);border:1px solid rgba(43,212,106,.4)} .diff.medium{color:var(--warn);background:rgba(255,176,46,.14);border:1px solid rgba(255,176,46,.4)} .diff.hard{color:#ff8a96;background:rgba(255,77,94,.14);border:1px solid rgba(255,77,94,.4)} .catpicker{border:1px solid var(--accent);border-radius:12px;background:var(--panel2);padding:12px 14px;margin:10px 0;box-shadow:0 0 0 3px rgba(61,139,255,.14)} .catpicker-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14px} .catpicker-list{max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:2px} .catrow{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:9px;cursor:pointer;text-transform:none;letter-spacing:0;margin:0} .catrow:hover{background:var(--bg2)} .catrow input{width:auto;flex:0 0 auto;margin:0} .catrow-q{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── auth gate (sign-in + org onboarding) ───────────────────── */ .authwrap{max-width:460px;margin:6vh auto 0} #authLogin{padding:34px 28px} .authlogo{width:54px;height:54px;border-radius:15px;margin:0 auto 16px} .authlogo .bz{font-size:15px} #authLogin h2{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.3px;margin:0 0 8px} #authLogin p{font-size:14px;line-height:1.55;margin:0 auto 22px;max-width:32em} #googleBtn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1a1a1a} #googleBtn:hover{filter:brightness(.96)} #googleBtn .gmark{font-family:var(--display);font-weight:800;color:#4285F4} .authmsg{font-size:12.5px;margin:14px 0 0;min-height:1em} #authOnboard h2{font-family:var(--display);font-size:20px;font-weight:800;margin:0 0 6px} .onboard-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:start;margin-top:16px} .onboard-grid > div:first-child,.onboard-grid > div:last-child{display:flex;flex-direction:column} .ob-or{align-self:center;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px} @media(max-width:560px){.onboard-grid{grid-template-columns:1fr}.ob-or{padding:4px 0}} /* sidebar org box */ .orgbox{display:flex;flex-direction:column;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 13px} .orgbox .orgname{font-weight:700;font-size:14px} .orgbox .orgcode{font-size:11px} .orgbox .orgcode b{font-family:var(--mono);color:var(--accent);letter-spacing:1px} .orgbox .orguser{font-size:12.5px;font-weight:600;color:var(--ink);padding-top:8px;border-top:1px solid var(--line)} .orgbox .btn{align-self:flex-start} /* ── quiz preview (player's-eye view) ───────────────────────── */ .pvframe{display:flex;justify-content:center;margin-top:6px} .pvphone{width:100%;max-width:760px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 18px 50px rgba(0,0,0,.45)} .pvtag{color:#0a3d1f;background:var(--accent2);border-color:var(--accent2)} #preview .opts{margin-top:18px} #preview .opt{cursor:default} /* ── lobby players ──────────────────────────────────────────── */ .players{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .pchip{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);border-radius:30px;padding:6px 15px 6px 9px;font-weight:600;font-size:14px;animation:pop .26s ease} .pchip .av{font-size:20px} @keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}} /* ── big timer / PIN / countdown ────────────────────────────── */ .timer{font-family:var(--display);font-size:64px;font-weight:800;text-align:center;line-height:1.02;letter-spacing:-1px} .bar{height:9px;border-radius:6px;background:var(--bg2);overflow:hidden;margin-top:14px;border:1px solid var(--line)} .bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#7db1ff);transition:width .25s linear} .big-q{font-family:var(--display);font-size:25px;font-weight:700;line-height:1.18;margin:10px 0 6px;letter-spacing:-.4px} .qimg{max-width:100%;max-height:240px;border-radius:12px;display:block;margin:12px auto} .code{font-family:var(--mono);font-size:46px;font-weight:700;letter-spacing:10px;color:#fff;text-align:center;margin:8px 0 4px;text-indent:10px} /* ── avatar picker ──────────────────────────────────────────── */ .avs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .av-btn{font-size:24px;background:var(--bg2);border:2px solid var(--line);border-radius:12px;width:48px;height:48px;cursor:pointer;transition:transform .1s,border-color .14s} .av-btn:hover{transform:translateY(-2px)} .av-btn.sel{border-color:var(--accent);background:rgba(61,139,255,.16)} /* ── podium / leaderboard ───────────────────────────────────── */ .podium{display:flex;justify-content:center;align-items:flex-end;gap:14px;margin:20px 0} .pod{background:var(--panel2);border:1px solid var(--line);border-radius:14px 14px 0 0;width:120px;text-align:center;padding:14px 8px} .pod .av{font-size:34px} .pod .nm{font-weight:700;margin-top:4px} .pod .sc{font-family:var(--mono);color:var(--accent2);font-weight:700} .pod.p1{height:200px;background:linear-gradient(180deg,rgba(61,139,255,.32),var(--panel2));border-color:rgba(61,139,255,.4)} .pod.p2{height:162px} .pod.p3{height:132px} .medal{font-size:26px} table.lb{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px} table.lb td,table.lb th{border-top:1px solid var(--line);padding:10px 8px;text-align:left} table.lb th{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;font-weight:700} table.lb td.r,table.lb th.r{text-align:right;font-family:var(--mono)} .stat{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 15px;margin:8px 8px 0 0} .quizstats{margin:0 0 10px} .quizstats:empty{display:none} .stat b{display:block;font-family:var(--mono);font-size:22px;color:var(--accent2)} /* ── setup notice / QR / toast ──────────────────────────────── */ .setup{background:rgba(255,176,46,.10);border:1px solid rgba(255,176,46,.34);color:#ffd98f;border-radius:11px;padding:12px 13px;font-size:12.5px;line-height:1.5} .setup code{font-family:var(--mono);font-size:11.5px;color:#fff;background:rgba(0,0,0,.28);padding:1px 5px;border-radius:5px} .qrbox{background:#fff;padding:14px;border-radius:14px;display:inline-block;margin-top:6px} .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);padding:11px 18px;border-radius:24px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;z-index:70;box-shadow:0 12px 30px rgba(0,0,0,.4)} .toast.show{opacity:1} /* ── motion ─────────────────────────────────────────────────── */ @keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(43,212,106,.55)}70%{box-shadow:0 0 0 7px rgba(43,212,106,0)}100%{box-shadow:0 0 0 0 rgba(43,212,106,0)}} @keyframes risein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .main section:not(.hidden) > *{animation:risein .42s cubic-bezier(.2,.7,.2,1) both} .main section:not(.hidden) > *:nth-child(2){animation-delay:.06s} .main section:not(.hidden) > *:nth-child(3){animation-delay:.12s} .main section:not(.hidden) > *:nth-child(4){animation-delay:.18s} .sidebar .nav-item{animation:risein .4s ease both} .sidebar .nav-item:nth-child(2){animation-delay:.05s} /* ── responsive: deck collapses to a top bar ────────────────── */ @media(max-width:820px){ .app{flex-direction:column} .sidebar{flex:none;width:100%;height:auto;position:static;flex-flow:row wrap;align-items:center;gap:12px;padding:14px 16px} .brand{border:none;padding:0;margin:0} .side-nav{flex-direction:row;margin:0;margin-left:auto} .nav-item.active::before{display:none} .side-foot{margin:0;flex-direction:row;align-items:center;padding:0} .side-foot .pill{display:none} .side-lang{border:none;padding:0} .side-lang-label{display:none} #setup{flex:1 1 100%;margin:2px 0 0} .main{padding:20px 16px 72px} } /* ── interviews: conduct (interviewer) view ─────────────────── */ .ivbar{position:sticky;top:4px;z-index:30;background:linear-gradient(180deg,var(--bg) 70%,transparent);padding:8px 0 12px;margin-bottom:4px} .modepill{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:20px;white-space:nowrap} .mode-int{background:rgba(255,176,46,.14);color:var(--warn);border:1px solid rgba(255,176,46,.4)} .mode-cand{background:rgba(43,212,106,.14);color:var(--accent2);border:1px solid rgba(43,212,106,.4)} .ivscore{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--accent2);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:5px 13px;min-width:62px;text-align:center} .ivq{padding:16px 18px} .ivq-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px} .ivq-head .qnum{font-family:var(--mono);background:var(--accent);color:#06122c;border-radius:7px;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;padding:0 6px} .ivtype{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:3px 9px;border-radius:6px} .ivtype.open{background:rgba(61,139,255,.16);color:#9cc2ff;border:1px solid rgba(61,139,255,.4)} .ivtype.mc{background:var(--panel2);color:var(--muted);border:1px solid var(--line)} .ivw{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent2);background:rgba(43,212,106,.12);border:1px solid rgba(43,212,106,.3);padding:2px 8px;border-radius:6px} .ivq-score{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:14px;color:var(--muted)} .ivq-score.good{color:var(--accent2)} .ivq-score.part{color:var(--warn)} .ivq-score.bad{color:var(--bad)} .ivq-prompt{font-family:var(--display);font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.2px;margin:2px 0} /* interviewer-only blocks (hidden in candidate view) */ .iv-only{} #iv_run.candidate .iv-only{display:none!important} #iv_run.candidate .ivq-score{display:none} .ivprobe{font-size:13.5px;color:var(--ink);background:rgba(61,139,255,.08);border:1px solid rgba(61,139,255,.26);border-radius:9px;padding:9px 12px;margin:10px 0 0} .ivprobe b{color:var(--accent)} .ivkey{font-size:13.5px;color:var(--muted);line-height:1.55;border-left:3px solid var(--accent2);background:var(--panel2);border-radius:0 9px 9px 0;padding:10px 13px;margin:12px 0 0} /* answer key words — interviewer toggles each as the candidate says it */ .ivkw-wrap{margin-top:12px} .ivkw-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--accent2);font-weight:700;margin-bottom:7px} .ivkw{display:flex;flex-wrap:wrap;gap:9px} .kwchip{background:var(--bg2);border:1.5px dashed var(--line);color:var(--ink);font-family:var(--sans);font-size:13.5px;font-weight:600;padding:8px 15px;border-radius:22px;cursor:pointer;transition:all .13s} .kwchip:hover{border-color:var(--accent2);color:#fff} .kwchip.on{background:var(--accent2);border-style:solid;border-color:var(--accent2);color:#06210f;box-shadow:0 0 0 3px rgba(43,212,106,.22)} .kwchip.on::before{content:"✓ "} /* MC in conduct: clickable buttons, chosen + correctness shown only to interviewer */ #iv_run .ivopts .opt{cursor:pointer;border:none} .opt.wrongpick{outline:3px solid #fff;box-shadow:0 0 0 4px var(--bad),0 8px 22px rgba(255,77,94,.3)} #iv_run.candidate .opt{cursor:default} #iv_run.candidate .opt.right,#iv_run.candidate .opt.wrongpick,#iv_run.candidate .opt.chosen{outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px rgba(0,0,0,.28)} #ivSummary .ivsum-pct{font-family:var(--display);font-size:46px;font-weight:800;color:var(--accent2);line-height:1} #ivShape{max-height:none} /* import format tabs (JSON / YAML) */ .ivfmt-tabs{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:4px} .ivfmt-tab{background:none;border:none;color:var(--muted);font-family:var(--mono);font-weight:700;font-size:12.5px;padding:7px 16px;cursor:pointer;transition:background .14s,color .14s} .ivfmt-tab:hover:not(.on){color:var(--ink)} .ivfmt-tab.on{background:var(--accent);color:#fff} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .pill .dot{box-shadow:none} } /* ── brand mark → "Q" monogram (replaces the buzzer grid) ───── */ .logo .bz{display:none} .logo{background:linear-gradient(135deg,var(--accent2),#179a52);border-color:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden} .logo::after{content:"Q";font-family:var(--display);font-weight:800;color:#06210f;font-size:23px;line-height:1} .authlogo::after{font-size:31px} .logo.sm::after{font-size:15px} /* ── sidebar "Create" CTA → green, not blue ─────────────────── */ .nav-item.nav-cta{background:var(--accent2);color:#06210f;box-shadow:0 6px 16px rgba(43,212,106,.28)} .nav-item.nav-cta:hover{background:var(--accent2);filter:brightness(1.06);color:#06210f} .nav-item.nav-cta.active{background:var(--accent2);color:#06210f} /* ── create: settings box + readiness status ────────────────── */ .mk-settings{padding:14px;margin:0 0 14px} .mk-status{font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:9px;margin:0 0 10px} .mk-status.ok{color:var(--accent2);background:rgba(43,212,106,.12);border:1px solid rgba(43,212,106,.35)} .mk-status.draft{color:var(--warn);background:rgba(255,176,46,.12);border:1px solid rgba(255,176,46,.35)} .mkrow.mkrow-bad{border-color:rgba(255,176,46,.5);box-shadow:inset 3px 0 0 var(--warn)} .mkrow-warn{color:var(--warn)} /* ── signature radial-Q logomark (shared across every page) ──── */ .qmark{flex:0 0 auto;color:var(--accent);overflow:visible} .qmark .qmark-spokes{transform-origin:50% 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1)} .qmark .qmark-glow{transition:opacity .3s} .qmark .qmark-ring{stroke:var(--bg)} .qmark .qmark-letter{fill:#053018;font-family:var(--brand);font-weight:800;font-size:15px} .brand:hover .qmark .qmark-spokes,.lp-brand:hover .qmark .qmark-spokes, .top:hover .qmark .qmark-spokes{transform:scale(1.06) rotate(-4deg)} .brand:hover .qmark .qmark-glow,.lp-brand:hover .qmark .qmark-glow, .top:hover .qmark .qmark-glow{opacity:.5} /* ── theme switch (dark / light) — reuses the .langsw look ────── */ .themesw{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:0 0 auto} .themesw button{background:none;border:none;color:var(--muted);font-family:var(--sans);font-weight:700;font-size:11.5px;padding:6px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:5px} .themesw button.on{background:var(--accent);color:#fff} .themesw button:not(.on):hover{color:var(--ink)} .side-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line)} .side-theme-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)} @media(max-width:820px){ .side-theme{border:none;padding:0} .side-theme-label{display:none} }