:root{color-scheme:dark;--bg:#070b14;--panel:#101827;--panel2:#0b1220;--line:#26344d;--text:#f8fafc;--muted:#94a3b8;--cyan:#22d3ee;--purple:#7c3aed;--green:#34d399;--danger:#fb7185}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}body{min-height:100vh;overscroll-behavior:none}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:62px;padding:10px 16px;border-bottom:1px solid var(--line);background:#09101d;position:sticky;top:0;z-index:80}.brand{font-weight:900;letter-spacing:.05em}.status{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}.status-dot{width:8px;height:8px;border-radius:50%;background:#f59e0b}.status.online .status-dot{background:var(--green)}.wrap{max-width:1500px;margin:auto;padding:14px}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}.primary,.secondary,.danger{border-radius:10px;padding:9px 12px;color:#fff;font-weight:700}.primary{border:0;background:linear-gradient(90deg,#06b6d4,#7c3aed)}.secondary{border:1px solid var(--line);background:#172033}.danger{border:1px solid #7f1d1d;background:#421722}.small{font-size:12px;color:var(--muted);line-height:1.45}.good{color:#6ee7b7}.bad{color:#fda4af}label{display:block;margin:10px 0 5px;color:var(--muted);font-size:12px;font-weight:700}input[type=text],input[type=email],input[type=password],select{width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);color:#fff}input[type=color]{width:100%;height:40px;background:transparent;border:1px solid var(--line);border-radius:9px}input[type=file]{width:100%;color:var(--muted)}input[type=range]{width:150px}.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px}.section{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}.section:last-child{border:0;margin-bottom:0}.canvas-shell{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid #334155;border-radius:14px;background:#111827;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}.toolbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:10px}.tool.active{outline:2px solid var(--cyan)}.colorwrap{display:flex;gap:6px;flex-wrap:wrap}.color{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.25);padding:0}.color.selected{outline:3px solid #fff}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#0d2731;color:#67e8f9;font-size:11px;font-weight:800}.join-page,.login-page,.landing{min-height:100vh;display:grid;place-items:center;padding:20px}.join-card,.login-card,.landing-card{width:min(520px,100%);background:linear-gradient(180deg,#111827,#0a101c);border:1px solid #334155;border-radius:22px;padding:26px;box-shadow:0 24px 80px #0006}.join-card h1,.landing-card h1{font-size:clamp(30px,7vw,48px);margin:8px 0 10px;line-height:1}.eyebrow{color:#67e8f9;font-size:11px;font-weight:900;letter-spacing:.08em}.participant-wrap{padding:12px}.participant-card{max-width:1200px;margin:auto}.canvas-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:9px}.actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.tools{margin-top:9px;border:1px solid var(--line);border-radius:12px;background:#0b1220;overflow:hidden}.tools-head{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:7px 9px}.tools-body{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px;border-top:1px solid var(--line)}.tools.collapsed .tools-body,.palette-hidden .colorwrap{display:none}body.drawing{overflow:hidden}body.focus-mode{overflow:hidden;background:#000}body.focus-mode .topbar{display:none}body.focus-mode .participant-wrap{position:fixed;inset:0;z-index:500;padding:0;background:#000}body.focus-mode .participant-card{width:100vw;height:100dvh;max-width:none;border:0;border-radius:0;padding:0;display:flex;flex-direction:column;justify-content:center;background:#000}body.focus-mode .canvas-head{display:none}body.focus-mode .canvas-stage{flex:1;min-height:0;display:grid;place-items:center}body.focus-mode .canvas-shell{width:min(100vw,calc(100dvh * 16 / 9));height:min(100dvh,56.25vw);border:0;border-radius:0}body.focus-mode .tools{position:fixed;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));z-index:520;background:#09101df5;backdrop-filter:blur(10px)}body.focus-mode .tools.collapsed{left:auto;min-width:150px}.focus-exit{display:none;position:fixed;right:10px;top:max(10px,env(safe-area-inset-top));z-index:540}body.focus-mode .focus-exit{display:block}.admin-list{display:grid;gap:7px;max-height:240px;overflow:auto}.event-item{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:10px;background:#0b1220}.event-item.selected{outline:2px solid var(--cyan)}.qr-box{background:#fff;border-radius:12px;padding:10px;display:grid;place-items:center;min-height:160px}.qr-box canvas{position:static;width:160px!important;height:160px!important}.display-page{min-height:100vh;overflow:hidden;display:grid;place-items:center;background:#000}.display-page .canvas-shell{width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,56.25vw);border:0;border-radius:0}.display-overlay{position:fixed;left:12px;bottom:10px;padding:6px 9px;border-radius:999px;background:#00000073;font-size:11px;color:#cbd5e1;opacity:.55}.table-note{padding:8px 10px;border-radius:9px;background:#0b2732;color:#a5f3fc;font-size:11px}.hidden{display:none!important}@media(max-width:900px){.grid{grid-template-columns:1fr}}@media(max-width:720px){.topbar{padding:9px 10px}.brand{font-size:13px}.participant-card{padding:9px}.canvas-head{align-items:flex-start}.tools-body{display:grid;grid-template-columns:1fr}.toolbar,.colorwrap{justify-content:center}input[type=range]{width:100%}.row{grid-template-columns:1fr}}