.board-wrap{position:relative;height:72vh;min-height:420px}.board-dock{position:absolute;left:50%;top:16px;transform:translateX(-50%);display:flex;align-items:center;gap:3px;padding:9px 10px;background:#fff;border:1px solid #e0e3e5;border-radius:21px;box-shadow:0 4px 14px #20273310;z-index:4;max-width:calc(100% - 24px)}.dock-button{width:35px;height:35px;padding:7px;border:0;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:#34383a;background:transparent;flex-shrink:0}.dock-button:hover{background:#f2f4f6}.dock-button[aria-pressed=true],.dock-button.tool-active,.dock-button[aria-expanded=true]{background:#eaf0f5;color:#20262d}.dock-divider{width:1px;height:24px;background:#e9ecef;margin:0 3px;flex-shrink:0}.dock-popover{position:absolute;top:82px;left:50%;transform:translateX(-50%);padding:11px;border:1px solid #e1e4e6;border-radius:18px;box-shadow:0 8px 20px #20273314;background:white;z-index:5;max-width:calc(100% - 24px)}.dock-popover[hidden],.shape-library[hidden],.shape-catalog button[hidden]{display:none}.shape-shortlist{display:grid;grid-template-columns:repeat(4,35px);gap:3px}.line-shortlist{display:flex;gap:4px}.all-shapes{background:#f2f4f7;border:0;width:100%;color:#3678e5;margin-top:8px;font-size:12px;padding:9px}.shape-library{position:absolute;top:10px;bottom:12px;left:12px;width:292px;max-width:calc(100% - 24px);overflow:auto;padding:16px;background:#fff;border:1px solid #e1e4e6;border-radius:16px;box-shadow:0 5px 20px #20273316;z-index:6}.shape-library header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.shape-library h3{font-size:13px;font-weight:550;margin:22px 0 12px}.shape-library input{background:#f3f4f6;border:0;font-size:12px}.shape-catalog{display:grid;grid-template-columns:repeat(6,1fr);gap:7px 3px}.shape-catalog .dock-button{width:34px}.pen-quick{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.pen-popover{width:max-content}.width-dot{display:block;border-radius:50%;background:currentColor}.ink-swatch{width:32px;height:32px;padding:0;background:var(--ink);border:2px solid transparent;border-radius:8px}.ink-swatch:hover{background:var(--ink);filter:brightness(1.08)}.ink-swatch[aria-pressed=true]{outline:2px solid #99a8b4;outline-offset:2px;border-color:white}.pen-quick input[type=color]{width:34px;height:34px;padding:0;border:0;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);border-radius:8px}.pen-details{font-size:12px;padding:8px 3px 0;margin-top:7px;border-top:1px solid #eef0f2}.pen-details summary{cursor:pointer;color:#79828a}.pen-details label{font-size:12px;margin:12px 0 6px}.pen-details .inline-label{display:flex;align-items:center;gap:7px}.pen-details input.check{width:16px;height:16px}.pen-details select{font-size:12px}.board-zoom{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;align-items:center;gap:5px;padding:5px;border:1px solid #e1e4e6;background:white;border-radius:12px;box-shadow:0 2px 10px #20273310}.board-zoom button{border:0;padding:8px}.room-tools{padding:10px 16px}.board-wrap #board{outline-offset:-2px}@media(max-width:600px){.board-dock{gap:0;padding:7px;border-radius:16px}.board-dock .dock-button{width:30px;height:32px;padding:6px}.board-dock .dock-divider{margin:0 2px}.pen-popover{width:calc(100% - 24px)}.board-zoom{bottom:9px;right:9px}.shape-library{left:8px;width:270px}}

.board-layout{display:block;height:100dvh;min-height:0;overflow:hidden}.board-layout>aside,.board-layout .topbar{display:none}.board-layout .content{padding:0;max-width:none;margin:0}.board-room .board-wrap{height:100dvh;min-height:0;width:100%;max-height:none}.board-title-panel,.board-room .room-tools{position:absolute;top:12px;z-index:4;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e1e4e6;border-radius:18px;padding:8px;box-shadow:0 4px 14px #20273310}.board-title-panel{left:12px;max-width:calc(50% - 210px)}.board-title-panel button{border:0;padding:8px}.board-logo{font-style:normal;background:#dff06c;border-radius:11px;padding:9px;font-weight:700}.board-title-panel>div{min-width:0;padding-right:8px}.board-title-panel strong,.board-title-panel small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-title-panel strong{font-size:13px}.board-title-panel small{font-size:11px;color:#7d8981;margin-top:3px}.board-room .room-tools{right:12px;max-width:calc(50% - 210px);justify-content:flex-end;gap:5px}.board-room .room-tools button{font-size:12px;border:0;padding:8px}.board-room .voice-state{font-size:10px;width:100%;text-align:right;padding-right:8px}.board-room .board-dock{top:12px}.board-status{position:absolute;bottom:14px;left:14px;display:flex;flex-direction:column;gap:4px;background:#ffffffde;border-radius:10px;padding:8px 12px;font-size:11px;color:#7d8981;pointer-events:none}.board-hints{font-size:10px}.board-room .shape-library{top:82px}
@media(max-width:1100px){.board-title-panel{max-width:48%}.board-room .room-tools{max-width:48%}.board-room .board-dock{top:92px}.board-room .dock-popover{top:156px}.board-room .shape-library{top:156px}}
@media(max-width:600px){.board-title-panel{left:8px;gap:4px}.board-title-panel .board-logo{display:none}.board-room .room-tools{right:8px}.board-hints{display:none}.board-status{bottom:65px;font-size:10px}}

.board-room .room-tools{width:max-content;max-width:calc(50% - 205px);display:grid;grid-template-columns:42px auto;gap:0 4px;padding:7px 10px;align-items:center}.board-room .room-tools .voice-state{grid-column:2;font-size:10px;max-width:200px;white-space:normal;overflow-wrap:anywhere;padding:0 4px 2px;text-align:left}.board-room .room-tools #voiceButton{white-space:nowrap;text-align:left;padding:6px 4px}.board-room .room-tools .mic-indicator{grid-row:1 / 3;display:flex;align-items:center;justify-content:center;gap:2px;width:42px;height:40px;padding:4px;color:#d04d50;border-radius:11px;background:#fff0f0}.board-room .room-tools .mic-active{color:#209b60;background:#eaf8ef}.mic-active .mic-slash{display:none}.mic-meter{display:flex;align-items:center;gap:2px;height:20px;width:9px}.mic-meter i{display:block;width:2px;height:16px;background:currentColor;transform:scaleY(var(--mic-level,0));transition:transform 75ms linear}.mic-meter i:first-child{height:11px}.mic-meter i:last-child{height:13px}
@media(max-width:1100px){.board-room .room-tools{max-width:48%}}@media(max-width:600px){.board-room .room-tools{padding:5px;grid-template-columns:36px auto}.board-room .room-tools .mic-indicator{width:36px}.board-room .room-tools #voiceButton{font-size:10px}}

.board-room .room-tools .mic-indicator{position:relative;gap:0}.mic-indicator>svg{flex-shrink:0}.mic-indicator .mic-meter{position:absolute;right:2px;top:50%;transform:translateY(-50%);pointer-events:none}.mic-indicator:not(.mic-active) .mic-meter{display:none}

/* Graphite application theme. Canvas paper retains its original ink contrast. */
:root{color-scheme:dark;--green:#639bff;--muted:#97a3b6;--line:#2a3343;--surface:#161d29;--raised:#1d2635;color:#e3e9f3;background:#10151e;accent-color:#639bff}
body{background:#10151e}button{background:var(--raised);color:#dde5f2;border-color:var(--line)}button:hover{background:#2a374b}button.primary{background:#5489ed;border-color:#5489ed;color:#fff}button.primary:hover{background:#6799f5}button.danger,.error{color:#ff8d9e}input,select,textarea{background:#111824;color:#e3e9f3;border-color:#354156}input::placeholder,textarea::placeholder{color:#7f8ba0}input:focus,select:focus,textarea:focus{outline-color:#639bff}.check{accent-color:#639bff}aside,.topbar{background:#121923}.nav button{color:#98a6bb}.nav button:hover{background:#1a2535}.nav button.active{background:#243654;color:#aacaff}.brand i,.board-logo{background:#6094f0;color:#0c172b}.aside-note{background:#182234;border-color:#293951;color:#aabbd2}.aside-note strong{color:#e3e9f3}.avatar,.student-card .avatar{background:#26364d;color:#b8d3ff}.panel,.stat,.student-card{background:var(--surface);border-color:var(--line)}.stat .symbol{background:#24334a;color:#a4c5ff}.badge,.note{background:#202e44;color:#b4c9e9}.badge.orange{background:#493523;color:#edc49a}.row{border-color:var(--line)}.day-head strong{color:#b5c3d8}.day-head.today strong{background:#6094f0;color:#0d182a}.time-label{color:#8c9aaf}.day-column{background:repeating-linear-gradient(to bottom,transparent 0,transparent 59px,#273140 59px,#273140 60px)}.calendar-slot:hover,.calendar-slot:focus-visible{background:#639bff16;outline-color:#639bff66}.day-column.drop-target{background-color:#20314a}.event{background:color-mix(in srgb,var(--event-color) 28%,#192230);color:#e7edf7;border-color:color-mix(in srgb,var(--event-color) 75%,#bbc9db)}.event:hover{background:color-mix(in srgb,var(--event-color) 40%,#192230)}.event small{opacity:1;color:#bbc8da}.current-time-line,.current-time-line:before{background:#70a9ff}.current-time-line{box-shadow:0 0 7px #70a9ff35}.current-time-line span{color:#a6caff;background:#1b2b43}.calendar-drag-preview{border-color:#83b3ff;background:#263e60dd;color:#c2dcff}.empty{color:#97a3b6}.empty strong{color:#ccd7e8}.color-swatch{border-color:#1d2635;box-shadow:0 0 0 1px #4c5d77}.color-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #83b3ff}
dialog{background:#192230;color:#e3e9f3;border-color:#3a485d;box-shadow:0 24px 100px #0008}dialog::backdrop{background:#070c1680}.lesson-preview::backdrop{background:#060a1330}.lesson-description{background:#111a28}.lesson-preview .lesson-description,.lesson-editor .dialog-title{border-color:var(--line)}.lesson-editor .actions{background:#192230}#toast{background:#2a3d59;color:#e9f2ff;border:1px solid #4b6487}.auth-story{background:linear-gradient(145deg,#172943,#111923)}.auth-story p{color:#a7bbd7}.auth-story .pills span{border-color:#405779;color:#c4d6ef}.auth-form .switch{color:#91baff}
.board-dock,.dock-popover,.shape-library,.board-zoom,.board-title-panel,.board-room .room-tools{background:#192230;border-color:#354257;color:#e0e8f4;box-shadow:0 4px 18px #0003}.dock-button{color:#c6d2e5;background:transparent}.dock-button:hover{background:#29394f}.dock-button[aria-pressed=true],.dock-button.tool-active,.dock-button[aria-expanded=true]{background:#2d4466;color:#bbd6ff}.dock-divider{background:#354257}.all-shapes,.shape-library input{background:#233149;color:#adccff}.pen-details{border-color:#354257}.pen-details summary{color:#adbbcf}.board-status{background:#192230e8;color:#bcc9dc}.board-title-panel small{color:#a4b2c8}.board-room .room-tools .voice-state{color:#a4b2c8}.board-room .room-tools .mic-indicator{background:#442933;color:#ff95a4}.board-room .room-tools .mic-active{background:#1c3e35;color:#68d9a5}.ink-swatch,.ink-swatch:hover{background:var(--ink)}
*{scrollbar-color:#3c4a60 #141c28}::selection{background:#416da8;color:white}

.reminder-settings{display:flex;flex-direction:column;gap:12px;margin:22px 0 12px}.reminder-row{display:grid;grid-template-columns:85px minmax(180px,1fr) 170px;gap:14px;align-items:center}.reminder-row>label{margin:0}.reminder-time{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}.reminder-time input{min-width:0;width:100%;color:#e3e9f3}.reminder-row select{min-width:0}@media(max-width:600px){.reminder-row{grid-template-columns:1fr 135px;gap:8px}.reminder-row>label{grid-column:1 / -1}.reminder-row select{font-size:12px}}

/* Compact lesson form. */
.lesson-editor{padding:20px 24px;width:800px}.lesson-editor .dialog-title{padding-bottom:12px}.lesson-editor label{margin:11px 0 5px;font-size:12px}.lesson-editor input,.lesson-editor select,.lesson-editor textarea{padding:8px 10px;font-size:13px}.lesson-editor input[type=checkbox]{padding:0}.lesson-editor .form-grid{gap:12px}.lesson-editor textarea{min-height:76px;height:76px;resize:vertical}.lesson-editor .reminder-settings{gap:8px;margin:15px 0 8px}.lesson-editor .reminder-row{gap:10px;grid-template-columns:75px minmax(180px,1fr) 145px}.lesson-editor .reminder-row>label{margin:0}.lesson-editor .note{padding:9px 12px;margin:10px 0;font-size:11px}.lesson-editor small.muted{font-size:11px;line-height:1.35;display:block;margin-top:4px}.lesson-editor .color-options{gap:8px}.lesson-editor .color-swatch{width:24px;height:24px}.lesson-editor .color-options input[type=color]{width:34px;height:27px;padding:2px}.lesson-editor .actions{bottom:-20px;padding:10px 0;margin-top:10px}.lesson-editor .actions button{padding:9px 13px}.lesson-editor #repeatSummary{font-size:11px;margin:6px 0}.lesson-editor .inline-label{display:flex;align-items:center;gap:6px}@media(max-width:700px){.lesson-editor{padding:16px}.lesson-editor .actions{bottom:-16px}.lesson-editor .form-grid{gap:5px}}@media(max-width:600px){.lesson-editor .reminder-row{grid-template-columns:minmax(0,1fr) 125px;gap:6px}}

.lesson-quick-actions{display:flex;align-items:center;gap:5px;margin-left:auto}.lesson-preview .dialog-title{gap:12px;align-items:flex-start}.lesson-quick-actions button{display:grid;place-items:center;width:34px;height:34px;padding:6px!important;border:0!important}.lesson-quick-actions .danger{color:#ff8596}.archive-view{height:100dvh;overflow:auto;padding:24px}.archive-view header{display:flex;align-items:center;gap:20px}.archive-view img{display:block;max-width:100%;margin:18px auto;background:white}.archive-view a{color:#99c0ff}

.student-card{position:relative}.student-card-tools{position:absolute;top:18px;right:18px;display:flex;gap:5px}.student-card-tools button{display:grid;place-items:center;width:34px;height:34px;padding:6px;border:0;background:transparent}.student-card-tools button:hover{background:#29394f}.student-card-tools .danger{color:#ff8596}

.subject-picker-row{display:flex;align-items:center;gap:7px}.subject-picker-row select{min-width:0;flex:1}.subject-picker-row button{padding:8px 12px}.subject-create{display:flex;gap:8px;margin-top:8px}.subject-create[hidden]{display:none}.subject-feedback{display:block;margin-top:5px;font-size:11px}

.subject-rows{display:flex;flex-direction:column;gap:8px}.add-student-subject{margin:9px 0}.subject-profile{margin-bottom:24px}.subject-profile .subject-create{padding-top:12px}.subject-profile p{font-size:12px}

.event-resize{position:absolute;left:0;right:0;height:7px;cursor:ns-resize;touch-action:none;z-index:3}.event-resize-top{top:0}.event-resize-bottom{bottom:0}.event-resize:after{content:"";position:absolute;width:22px;height:2px;left:50%;top:2px;transform:translateX(-50%);border-radius:2px;background:#c6ddff;opacity:0}.event:hover .event-resize:after,.event.resizing .event-resize:after{opacity:.8}.event.resizing{z-index:7;outline:2px solid #83b3ff;cursor:ns-resize}

.student-event strong{margin-bottom:2px}.student-event small{position:relative;top:-2px}

.telegram-panel{max-width:760px;margin-bottom:20px}.telegram-content{padding:8px 22px 20px;font-size:14px}.telegram-content ol{padding-left:20px;line-height:1.9;color:#b7c5da}.telegram-code{display:flex;align-items:center;gap:20px;background:#101824;border:1px solid #344359;padding:16px;border-radius:10px;margin:16px 0 8px}.telegram-code strong{font:24px ui-monospace,monospace;letter-spacing:3px;user-select:all}.telegram-link{align-self:center;color:#a6caff;padding:10px}.telegram-content .actions{justify-content:flex-start}
.connection-controls { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } .connection-controls p { width: 100%; margin: 0; } .connection-controls button { font-size: 12px; padding: 8px 10px; }