:root { --ink:#263451; --cream:#fff9ee; --paper:#fffefa; --line:#e8e1d4; --navy:#273c75; --coral:#ef6b51; --mint:#dff7e9; }
*{box-sizing:border-box} body{margin:0;background:#f5f1e8;color:var(--ink);font-family:"Yu Gothic UI","Hiragino Sans",system-ui,sans-serif}.app-shell{min-height:100vh;padding:14px}.topbar{height:64px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 5px 18px #3e35100a}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand-mark{display:grid;place-items:center;width:37px;height:37px;border-radius:13px;background:var(--navy);color:white;font:bold 21px/1 Georgia}.brand-mark span{color:#ffd76b}.brand b{display:block;font-size:17px;letter-spacing:.04em}.brand small{display:block;font-size:10px;color:#768096;margin-top:1px}.lesson-status{display:flex;align-items:center;gap:8px;background:#f6f4ee;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:700}.status-dot{width:8px;height:8px;border-radius:50%;background:#2ab27b;box-shadow:0 0 0 3px #d5f6e8}.status-label{color:#758097;font-weight:500}.end-button{border:0;border-radius:11px;padding:10px 14px;color:white;background:var(--coral);font:700 13px inherit;cursor:pointer}.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 267px;gap:14px;height:calc(100vh - 106px);min-height:580px;margin-top:14px}.board-area{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden}.board-toolbar{z-index:3;display:flex;align-items:center;gap:8px;padding:13px 17px;border-bottom:1px solid #f0ebe1}.tool,.color{width:32px;height:32px;border:1px solid transparent;border-radius:9px;background:#f8f5ee;color:var(--ink);font-weight:800;cursor:pointer}.tool.is-active{background:#e9ecfa;color:var(--navy);border-color:#cbd1f3}.color{width:22px;height:22px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 3px white}.color.is-active{outline:2px solid var(--navy);outline-offset:2px}.toolbar-rule{height:25px;width:1px;background:var(--line);margin:0 2px}.text-tool{font-family:Georgia}.reset-tool{width:auto;padding:0 9px;font-size:11px;color:#766f65}.board-wrap{position:relative;min-height:0;background-image:linear-gradient(#eef1f733 1px,transparent 1px),linear-gradient(90deg,#eef1f733 1px,transparent 1px);background-size:34px 34px;overflow:hidden}.board-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.board-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#a9b2bd;font-weight:700;font-size:15px;pointer-events:none;text-align:center}.board-hint span{font-size:27px;display:block;margin-bottom:6px}.question-card{position:absolute;z-index:5;top:71px;left:18px;display:flex;align-items:center;gap:12px;max-width:min(480px,calc(100% - 36px));padding:11px 12px 11px 14px;border:1px solid #fae2a6;background:#fff8dc;border-radius:13px;box-shadow:0 6px 15px #8d661619}.question-label{font-size:11px;font-weight:800;color:#aa7919;white-space:nowrap}.question-card p{margin:0;font-weight:750;font-size:14px}.question-card button{margin-left:auto;border:0;background:transparent;font-size:19px;color:#907f56;cursor:pointer}.board-footer{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 17px;border-top:1px solid #f0ebe1}.board-footer p{margin:0;font-size:12px;color:#828c9c}.secondary-button{border:1px solid var(--line);border-radius:10px;background:#fff;color:#526077;padding:8px 11px;font:700 12px inherit;cursor:pointer}.teacher-panel{background:var(--navy);border-radius:20px;padding:16px;color:white;display:flex;flex-direction:column;overflow:auto}.teacher-topline{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;letter-spacing:.04em}.live-pill{font-size:9px;color:#ffdd75;background:#ffffff1f;padding:5px 7px;border-radius:99px}.teacher-stage{position:relative;height:188px;margin:7px 0 0;border-radius:15px;background:linear-gradient(150deg,#4c64a8,#354d90);overflow:hidden}.spark{position:absolute;color:#ffe07c;font-size:18px}.spark-one{top:27px;left:37px}.spark-two{right:31px;top:60px;font-size:9px}.teacher-avatar{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:119px;height:154px}.hair{position:absolute;z-index:2;left:12px;top:17px;width:96px;height:87px;background:#20305b;border-radius:50% 50% 32% 32%;box-shadow:inset 18px 5px #384c87}.face{position:absolute;z-index:3;left:27px;top:38px;width:67px;height:66px;background:#ffe1c7;border-radius:45% 45% 43% 43%}.eye{position:absolute;top:28px;width:7px;height:10px;border-radius:50%;background:#2c3961}.eye.left{left:17px}.eye.right{right:17px}.mouth{position:absolute;left:27px;bottom:12px;width:13px;height:6px;border-bottom:2px solid #e8817b;border-radius:50%}.body{position:absolute;z-index:1;bottom:0;left:3px;width:113px;height:77px;border-radius:48px 48px 0 0;background:#ffcd5f}.teacher-name{text-align:center;padding:9px 0 8px}.teacher-name strong{display:block;font-size:17px}.teacher-name span{font-size:11px;color:#cdd6f0}.speech-card{background:white;color:var(--ink);border-radius:13px;padding:12px 13px;min-height:78px;font-size:13px;line-height:1.55;position:relative}.speech-card:before{content:"";position:absolute;top:-7px;left:50%;border:7px solid transparent;border-bottom-color:white;border-top:0}.speech-card p{margin:0;font-weight:650}.quick-replies{display:flex;flex-wrap:wrap;gap:6px;padding:9px 0}.quick-replies button{border:1px solid #ffffff3d;border-radius:20px;background:#ffffff14;color:white;font:600 11px inherit;padding:6px 8px;cursor:pointer}.voice-controls{margin-top:auto;text-align:center;padding-top:8px}.mic-button{width:49px;height:49px;border:0;border-radius:50%;background:#f1c651;color:#233568;box-shadow:0 5px 0 #b68a26;cursor:pointer}.mic-button span{font-size:20px}.mic-button.is-listening{animation:pulse 1.1s infinite;background:#fff}.voice-controls p{margin:11px 0 3px;font-size:13px;font-weight:800}.voice-controls small{font-size:10px;color:#c8d2ec}.session-note{font-size:10px;color:#b9c7eb;margin-top:14px;padding:9px 0 0;border-top:1px solid #ffffff23}.session-note span{color:#ffdd75}dialog{border:0;padding:0;background:transparent}dialog::backdrop{background:#17234699}.summary-card{width:min(380px,calc(100vw - 32px));border-radius:20px;background:white;padding:30px;text-align:center;color:var(--ink);box-shadow:0 18px 60px #1118}.summary-icon{font-size:26px;color:#efb928}.summary-card h2{margin:8px 0}.summary-card p{color:#687386;font-size:14px}.summary-card div{display:flex;justify-content:center;gap:9px;margin-top:22px}@keyframes pulse{50%{box-shadow:0 0 0 9px #ffffff32}}@media(max-width:760px){.app-shell{padding:7px}.topbar{height:56px;padding:0 11px;border-radius:14px}.brand small,.lesson-status .status-label{display:none}.lesson-status{padding:7px 9px;font-size:12px}.end-button{padding:8px 9px;font-size:11px}.lesson-layout{grid-template-columns:1fr;height:auto;min-height:0;margin-top:7px}.board-area{height:62vh;min-height:430px;border-radius:15px}.teacher-panel{min-height:395px;border-radius:15px}.teacher-stage{height:150px}.board-footer p{display:none}.question-card{top:63px}.board-toolbar{padding:9px 11px}.board-footer{padding:9px 11px}}