:root{--bg-page: #FFFFFF;--bg-surface: #F0F4F3;--bg-surface-muted: #E8ECF0;--bg-subtle: rgba(0, 0, 0, .02);--bg-overlay: rgba(255, 255, 255, .9);--bg-overlay-strong: rgba(240, 244, 243, .95);--bg-backdrop: rgba(0, 0, 0, .4);--border-default: #D6DDE3;--border-focus: #0F6E56;--text-primary: #1A2332;--text-secondary: #5A6B7A;--text-muted: #8E99A4;--color-accent: #0F6E56;--color-accent-hover: #085041;--color-accent-bg: rgba(15, 110, 86, .1);--color-accent-subtle: rgba(15, 110, 86, .05);--color-accent-border: rgba(15, 110, 86, .3);--color-danger: #C03B3B;--color-danger-bg: rgba(192, 59, 59, .1);--color-danger-border: rgba(192, 59, 59, .4);--color-purple: #a78bfa;--color-purple-bg: rgba(167, 139, 250, .1);--color-purple-border: rgba(167, 139, 250, .3);--color-warning: #B8860B;--color-warning-bg: rgba(184, 134, 11, .1);--color-warning-border: rgba(184, 134, 11, .3);--color-warning-text: #B8860B;--color-success: #0F6E56;--color-question: #60a5fa;--color-good-point: #4ade80;--color-text-ref: #fbbf24;--color-connection: #0F6E56;--color-node-fill: #FFFFFF;--color-node-stroke: #0F6E56;--color-node-active-fill: #0F6E56;--color-node-active-text: #FFFFFF;--color-node-initials: rgba(26, 35, 50, .7);--color-node-outer-fill: #E8ECF0;--color-group-stroke: #D6DDE3;--color-group-stroke-active: #0F6E56;--btn-primary-bg: #0F6E56;--btn-primary-text: #FFFFFF;--btn-secondary-bg: transparent;--btn-secondary-border: #D6DDE3;--btn-secondary-text: #5A6B7A;--toggle-knob: #FFFFFF}html.dark{--bg-page: #0f172a;--bg-surface: #1e293b;--bg-surface-muted: #334155;--bg-subtle: rgba(255, 255, 255, .03);--bg-overlay: rgba(30, 41, 59, .9);--bg-overlay-strong: rgba(15, 23, 42, .95);--bg-backdrop: rgba(0, 0, 0, .7);--border-default: #334155;--border-focus: #2dd4bf;--text-primary: #e2e8f0;--text-secondary: #94a3b8;--text-muted: #64748b;--color-accent: #2dd4bf;--color-accent-hover: #5eead4;--color-accent-bg: rgba(45, 212, 191, .1);--color-accent-subtle: rgba(45, 212, 191, .05);--color-accent-border: rgba(45, 212, 191, .3);--color-danger: #f87171;--color-danger-bg: rgba(248, 113, 113, .1);--color-danger-border: rgba(239, 68, 68, .4);--color-purple: #a78bfa;--color-purple-bg: rgba(167, 139, 250, .15);--color-purple-border: rgba(167, 139, 250, .3);--color-warning: #fbbf24;--color-warning-bg: rgba(251, 191, 36, .1);--color-warning-border: rgba(251, 191, 36, .3);--color-warning-text: #fde68a;--color-success: #22c55e;--color-connection: #4a9eff;--color-node-fill: #1e293b;--color-node-stroke: #2dd4bf;--color-node-active-fill: #3b82f6;--color-node-active-text: #FFFFFF;--color-node-initials: rgba(255, 255, 255, .5);--color-node-outer-fill: #334155;--color-group-stroke: #475569;--color-group-stroke-active: #3b82f6;--btn-primary-bg: #2dd4bf;--btn-primary-text: #0f172a;--btn-secondary-bg: #334155;--btn-secondary-border: #334155;--btn-secondary-text: #94a3b8;--toggle-knob: #e2e8f0}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;width:100%;min-height:100%}body{background:var(--bg-page);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.student-node{-webkit-tap-highlight-color:transparent}.app{min-height:100vh;background:var(--bg-page);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg-surface);border-bottom:1px solid var(--border-default)}.toolbar-left{display:flex;align-items:center;gap:12px}.toolbar-title{font-size:16px;font-weight:600}.toolbar-topic{font-size:13px;color:var(--text-muted);font-style:italic}.toolbar-live{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--color-accent);background:var(--color-accent-bg);padding:3px 8px;border-radius:4px;animation:pulse-live 2s ease-in-out infinite}@keyframes pulse-live{0%,to{opacity:1}50%{opacity:.5}}.toolbar-right{display:flex;gap:8px}.btn{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,opacity .2s}.btn:hover{opacity:.9}.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}.btn-secondary{background:var(--btn-secondary-bg);border:1px solid var(--btn-secondary-border);color:var(--btn-secondary-text)}.canvas-container{flex:1;height:calc(100vh - 57px)}.recording-indicator{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--color-danger);background:var(--color-danger-bg);padding:3px 8px;border-radius:4px}.recording-dot{width:8px;height:8px;border-radius:50%;background:var(--color-danger);animation:pulse-rec 1.5s ease-in-out infinite}@keyframes pulse-rec{0%,to{opacity:1}50%{opacity:.3}}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}