:root{--font-sans:"Inter", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:"JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;--color-bg:#f7f8fb;--color-surface:#fff;--color-surface-soft:#f2f4f8;--color-text:#1f2937;--color-text-muted:#667085;--color-border:#e4e7ec;--color-accent:#4f46e5;--color-accent-strong:#4338ca;--color-accent-soft:#eef2ff;--color-success-soft:#e8f7ef;--color-success-text:#166534;--color-neutral-soft:#eef2f6;--color-danger-soft:#fdecec;--color-danger-text:#b42318;--color-warning-soft:#fff6df;--color-warning-text:#92400e;--shadow-soft:0 6px 24px #1018280f;--shadow-hover:0 10px 28px #1018281c;--radius-sm:12px;--radius-md:14px;--radius-lg:16px;--radius-pill:999px;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:40px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html,body,#app{min-height:100%}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:16px;line-height:1.55}h1,h2,h3,h4{margin:0 0 var(--space-2);color:var(--color-text);letter-spacing:-.01em;font-weight:600;line-height:1.2}h1{font-size:clamp(1.8rem,1.2rem + 1.8vw,2.4rem)}h2{font-size:clamp(1.2rem,1rem + 1vw,1.6rem)}h3{font-size:1.1rem}p{margin:0}a{color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-accent-strong)}.page{min-height:100vh;padding:var(--space-3) var(--space-2)}.container{width:100%;max-width:1120px;margin:0 auto}.panel,.card,.login-card,.register-card,.settings-form,.display-panel,.table-wrap{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}.panel,.card,.login-card,.register-card,.display-panel,.settings-form{padding:var(--space-3)}.header,.display-header{justify-content:space-between;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);display:flex}.row,.filters,.search-row{gap:var(--space-1);flex-wrap:wrap;align-items:center;display:flex}.between{justify-content:space-between}.muted{color:var(--color-text-muted)}.error,.error-message{color:var(--color-danger-text);background:var(--color-danger-soft);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);margin-top:var(--space-1);border:1px solid #f8c6c1}input,select,textarea,.input{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);width:100%;color:var(--color-text);font:inherit;padding:10px 12px;transition:border-color .18s,box-shadow .18s}input:focus,select:focus,textarea:focus,.input:focus{border-color:#a5b4fc;outline:none;box-shadow:0 0 0 4px #4f46e51f}button,.btn,.primary,.secondary,.subtle,.tiny,.role-btn{appearance:none;border-radius:var(--radius-sm);font:inherit;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;padding:10px 14px;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}button:disabled,.btn:disabled,.primary:disabled,.secondary:disabled,.subtle:disabled{opacity:.55;cursor:not-allowed}.primary,button[type=submit],.btn,.role-btn.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.primary:hover,button[type=submit]:hover,.btn:hover,.role-btn.active:hover{background:var(--color-accent-strong);border-color:var(--color-accent-strong);box-shadow:var(--shadow-hover);transform:translateY(-1px)}.secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.secondary:hover{background:var(--color-surface-soft);transform:translateY(-1px)}.subtle,.role-btn{background:var(--color-surface-soft);color:var(--color-text);border-color:#e6e8f0}.subtle:hover,.role-btn:hover{background:#eaecf4}.danger,.delete-btn,.logout-btn{color:#fff;background:#d92d20;border:1px solid #b42318}.danger:hover,.delete-btn:hover,.logout-btn:hover{background:#b42318;transform:translateY(-1px)}.badge,.pill{border-radius:var(--radius-pill);align-items:center;padding:4px 10px;font-size:.78rem;font-weight:600;display:inline-flex}.badge-live{background:var(--color-success-soft);color:var(--color-success-text)}.badge-archived{background:var(--color-neutral-soft);color:#344054}.pill-yes{background:var(--color-accent-soft);color:var(--color-accent-strong)}.pill-no{background:var(--color-neutral-soft);color:#475467}.session-table,table{border-collapse:separate;border-spacing:0;background:0 0;width:100%;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--color-border);color:var(--color-text);vertical-align:top;padding:14px 16px}th{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);background:#fafbff;font-size:.78rem}tbody tr{transition:background-color .18s}tbody tr:hover{background:#f9faff}tbody tr:last-child td{border-bottom:none}.question-card,.timeline-item,.session-item,.metric{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-soft);padding:var(--space-2)}.session-item{cursor:pointer}.session-item.active{background:var(--color-accent-soft);border-color:#a5b4fc}.metrics-grid,.status-grid{gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));display:grid}.meta{gap:var(--space-2);color:var(--color-text-muted);flex-wrap:wrap;font-size:.88rem;display:flex}.video-player{border-radius:var(--radius-md);width:100%;max-height:420px;margin:var(--space-2) 0;background:#000}.timeline-list,.session-list,.comment-list,.question-list{margin:var(--space-2) 0 0;gap:var(--space-1);padding:0;list-style:none;display:grid}.code-link{text-overflow:ellipsis;white-space:nowrap;max-width:340px;font-family:var(--font-mono);background:var(--color-surface-soft);border-radius:10px;padding:4px 8px;display:inline-block;overflow:hidden}.hidden-copy{opacity:0;position:absolute;top:-9999px;left:-9999px}@media (width<=900px){.page{padding:var(--space-2)}.header,.display-header{flex-direction:column;align-items:flex-start}.panel,.card,.login-card,.register-card,.display-panel,.settings-form{padding:var(--space-2)}th,td{padding:12px 10px}.session-table,table{min-width:620px}}