.lb-create{display:flex;align-items:end;gap:18px;max-width:850px;margin:24px 0 30px}.campus .lb-create label{flex:1;margin:0;font-size:16px}.lb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}.lb-board-card{background:white;border:1px solid #dce0ef;border-radius:20px;text-align:left;padding:20px;display:grid;gap:18px;box-shadow:0 4px 15px #25315a06;transition:transform .2s,border-color .2s}.lb-board-card:hover{transform:translateY(-4px);border-color:#8078df}.lb-board-card strong{font-size:21px}.lb-board-card>span:last-child{display:flex;justify-content:space-between;color:#566174;font-size:14px}.lb-mini-board{height:125px;border-radius:12px;background:radial-gradient(#b9c0d5 1px,transparent 1px) 0 0/16px 16px,#f5f6fc;display:flex;align-items:center;justify-content:center;font:italic 32px Georgia;color:#7764c2;gap:30px}.lb-mini-board span{font-size:55px;color:#ed9474}.lb-editor{background:#fff;border:1px solid #dce0ef;border-radius:20px;overflow:hidden}.lb-header{display:flex;gap:12px;padding:16px;align-items:center;border-bottom:1px solid #e4e6ef}.lb-header input{min-width:50px;width:100%;flex:1;border:1px solid transparent!important;background:transparent!important;padding:8px!important;font-size:22px!important;font-weight:750}.lb-header input:hover:not([readonly]){border-color:#bcb7df!important}.lb-header-actions{display:flex;gap:12px;align-items:center}.lb-back{border:0;border-radius:10px;background:#f0eff9;width:42px;height:42px;font-size:24px!important;flex-shrink:0}.lb-meta{display:flex;justify-content:space-between;gap:20px;padding:10px 20px;color:#586078;font-size:14px}.lb-meta .is-error{color:#a03250;font-weight:700}.lb-stage{position:relative;height:clamp(430px,calc(100dvh - 310px),1000px);overflow:hidden;background:#fafaff}.lb-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline-offset:-4px!important}.lb-bottom{padding:12px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;background:#fff;border-top:1px solid #e4e6ef}.lb-tools,.lb-pen-settings,.lb-zoom{display:flex;gap:4px;align-items:center;padding:4px;background:#f4f4fa;border-radius:12px}.lb-bottom button,.lb-selection button{width:40px;height:42px;border:0;background:transparent;color:#26344b;border-radius:8px;font-size:23px}.lb-tools button.is-active{background:#e2dcfb;color:#4d3bb2;box-shadow:inset 0 0 0 1px #b7a6eb}.lb-bottom button:hover{background:#e7e5f5}.lb-zoom span{min-width:52px;text-align:center;font-size:14px}.lb-pen-settings input{width:32px;height:32px;padding:2px;border:0;background:none}.lb-pen-settings select{font-size:14px!important;padding:6px!important;border:0;background:transparent}.lb-selection{position:absolute;top:16px;left:16px;border:1px solid #c9c9e0;display:flex;background:#fff;box-shadow:0 5px 20px #26344b16;border-radius:12px;padding:4px;gap:4px}.lb-selection button{width:auto;min-width:40px;font-size:15px;padding:0 12px}.lb-text-editor{position:absolute;left:50%;top:15%;transform:translateX(-50%);width:min(480px,90%);background:#fff;padding:22px;border:1px solid #c7bfeb;border-radius:16px;box-shadow:0 20px 60px #33334f25;z-index:4}.lb-text-editor label{display:grid;gap:12px;font-weight:700}.lb-text-editor textarea{width:100%;font-size:18px;line-height:1.6;padding:12px;border:1px solid #b8bdd5;border-radius:8px;margin-bottom:16px}.lb-live{color:#3d587d;font-size:14px;font-weight:700}.lb-conflict{background:#fff0df;color:#6c3c00;padding:16px}.lb-sharing{margin:20px}.lb-sharing input{width:100%;font-size:16px;padding:12px;border:1px solid #bbbfd4;border-radius:8px;margin:10px 0}.lb-sharing h3{margin-top:24px}.lb-sharing p{display:flex;align-items:center;justify-content:space-between;gap:20px}.campus[data-board-open] .c-main{max-width:none;padding:16px}.campus[data-board-open] .c-enter{animation:none}.campus[data-board-open] .c-topbar{height:72px}.lb-editor [hidden]{display:none!important}@media(max-width:900px){.lb-header{flex-wrap:wrap}.lb-header-actions{width:100%;justify-content:space-between}.lb-header input{font-size:18px!important}.lb-meta>span:last-child{display:none}.lb-stage{height:calc(100dvh - 350px);min-height:350px}.lb-tools{overflow:auto;max-width:100%}.lb-bottom button{width:38px;flex-shrink:0}.lb-create{align-items:stretch;flex-direction:column}.lb-header .c-button{font-size:14px;padding:10px}.lb-sharing{margin:10px}.lb-sharing p{display:block}}@media(prefers-reduced-motion:reduce){.lb-board-card{transition:none}}
.lb-editor {
  container: lesson-board / inline-size;
  border: 1px solid #e0e6ee;
  border-radius: 20px;
  background: #f9fbfd;
  box-shadow: 0 10px 35px #253a5510;
}
.lb-stage {height: calc(100dvh - 116px); min-height: 460px; background: #f9fbfd;}
.lb-stage canvas {cursor: default;}
.lb-topbar {position: absolute; inset: 16px 16px auto; display: flex; align-items: start; justify-content: space-between; gap: 16px; pointer-events: none; z-index: 7;}
.lb-titlebar {position: relative; display: flex; align-items: center; max-width: min(430px, calc(100% - 260px)); min-width: 170px; padding: 5px; border: 1px solid #e1e6ed; border-radius: 15px; background: #ffffffed; box-shadow: 0 4px 18px #30435f0d; pointer-events: auto;}
.lb-titlebar input {width: 260px; min-width: 40px; padding: 8px 5px!important; font: 650 15px/1.3 Manrope, sans-serif!important; color: #24354d; background: transparent!important; border: 0!important; outline-offset: -1px;}
.lb-titlebar input:focus {background: #f4f6fc!important; border-radius: 6px;}
.lb-editor button {font-family: inherit; cursor: pointer;}
.lb-titlebar>button,.lb-fullscreen,.lb-history>button,.lb-tools>button,.lb-zoom>button {display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #53647c;}
.lb-editor button:focus-visible {outline: 3px solid #a9b9f1; outline-offset: 2px;}
.lb-editor button:disabled {cursor: default; opacity: .35;}
.lb-editor button:disabled:hover {background: transparent;}
.lb-fullscreen {pointer-events: auto; background: #fffffff0; border: 1px solid #e1e6ed; border-radius: 13px; height: 48px; width: 48px; flex-basis: 48px; box-shadow: 0 4px 18px #30435f0d;}
.lb-titlebar>button:hover,.lb-fullscreen:hover,.lb-history>button:hover,.lb-tools>button:hover,.lb-zoom>button:hover {background: #eef2f8; color: #263f6b;}
.lb-status {position: absolute; top: 76px; left: 26px; z-index: 2; color: #7c8a9c; font-size: 11px; background: #f9fbfddb; padding: 3px 6px; border-radius: 6px; pointer-events: none;}
.lb-status.is-error {color: #a33f4c; background: #fff0f0;}
.lb-session-slot {position: absolute; inset: 0; pointer-events: none; z-index: 6;}
.lb-bottom {position: absolute; inset: auto 16px 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: end; padding: 0; border: 0; background: none; pointer-events: none; z-index: 5;}
.lb-history,.lb-tools,.lb-zoom {display: flex; align-items: center; gap: 3px; padding: 5px; background: #ffffffed; border: 1px solid #e0e6ee; border-radius: 15px; box-shadow: 0 5px 22px #273c5912; pointer-events: auto;}
.lb-history>span {padding: 11px; color: #7c8a9c; font-size: 12px;}
.lb-tool-dock {position: relative; justify-self: center; max-width: 100%; pointer-events: auto;}
.lb-tools {gap: 3px; max-width: 100%; overflow: visible;}
.lb-tools>button {width: 38px; flex-basis: 38px; height: 40px;}
.lb-tools>button.is-active {color: #365ace; background: #e9efff; box-shadow: inset 0 0 0 1px #d5dffb;}
.lb-tools>button[data-board-tool=laser] {color: #c55a74;}
.lb-color-swatch {display: block; width: 19px; height: 19px; border-radius: 50%; background: #26344b; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #dfe5ee;}
.lb-zoom {gap: 1px;}
.lb-zoom>button {width: 32px; flex-basis: 32px; height: 38px;}
.lb-zoom>[data-board-zoom] {width: 55px; flex-basis: 55px; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;}
.lb-zoom>[data-board-fit] {margin-left: 3px; border-left: 1px solid #e4e9f1; border-radius: 0 9px 9px 0;}
.lb-popover {position: absolute; z-index: 10; border: 1px solid #dce4ef; border-radius: 16px; background: #fff; padding: 10px; box-shadow: 0 12px 40px #263d6220; color: #263b55;}
.lb-menu {top: calc(100% + 8px); left: 0; width: 246px; display: grid; gap: 4px;}
.lb-menu>button {display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; border: 0; border-radius: 10px; background: #fff; color: inherit; font-size: 13px;}
.lb-menu>button:hover,.lb-shapes>button:hover {background: #f2f5fb;}
.lb-shapes {bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: 280px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;}
.lb-shapes>span {grid-column: 1/-1; padding: 5px 8px 7px; font-size: 12px; color: #7f8ca0;}
.lb-shapes>button {display: grid; justify-items: center; gap: 10px; width: 100%; height: auto; min-height: 86px; padding: 14px 8px; border: 1px solid #edf0f5; border-radius: 10px; color: #53647c; background: #fff;}
.lb-shapes>button span {font-size: 11px;}
.lb-shapes>button.is-active {border-color: #becbf1; background: #edf2ff; color: #365ace;}
.lb-style {bottom: calc(100% + 12px); right: 0; width: 250px; display: grid; gap: 12px; padding: 18px;}
.lb-style>label {display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; gap: 16px;}
.lb-style input[type=color] {width: 48px; height: 32px; padding: 2px; border: 1px solid #dce4ef; border-radius: 8px; background: #fff;}
.lb-style select {max-width: 120px; padding: 7px; border: 1px solid #dce4ef; border-radius: 8px; background: #fff; color: #42516b; font-size: 12px;}
.lb-style small {font-size: 11px; line-height: 1.6; color: #8a96a8;}
.lb-selection {z-index: 4; gap: 2px; padding: 5px; background: #ffffffed; border: 1px solid #dbe3f1; border-radius: 12px; box-shadow: 0 5px 20px #26344b12;}
.lb-selection>button {display: inline-flex; justify-content: center; align-items: center; height: 34px; min-width: 34px; padding: 0 10px; font-size: 11px; white-space: nowrap; color: #53647c;}
.lb-selection>button:hover {background: #eff3fb;}
.lb-selection>[data-board-delete] {color: #a14e59;}
.lb-text-editor {z-index: 12; top: 105px; padding: 20px; border-color: #dae3ef; box-shadow: 0 14px 50px #263d6226;}
.lb-text-editor label {font-size: 14px;}
.lb-text-editor textarea {margin-bottom: 12px; border-color: #d3ddea; font-size: 18px;}
.lb-sharing {position: absolute; z-index: 13; left: 16px; top: 78px; width: min(380px, calc(100% - 32px)); max-height: calc(100% - 180px); overflow: auto; margin: 0; padding: 24px; border: 1px solid #dce4ef; border-radius: 17px; background: #fff; box-shadow: 0 14px 45px #263d6226;}
.lb-sharing h2 {font-size: 20px; margin: 2px 30px 14px 0;}
.lb-sharing h3 {font-size: 14px; margin: 24px 0 12px;}
.lb-sharing p {font-size: 12px; line-height: 1.7; color: #718196;}
.lb-sharing .c-button {font-size: 11px; padding: 9px 12px;}
.lb-sharing input {font-size: 12px; border-color: #dce4ef;}
.lb-panel-close {position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; background: #f1f4f9; border: 0; border-radius: 9px; color: #65758b;}
.lb-conflict {position: absolute; top: 108px; left: 16px; right: 16px; z-index: 14; padding: 12px 16px; border: 1px solid #eacda5; border-radius: 12px; font-size: 12px;}
.lb-conflict button {background: transparent; border: 0; color: inherit; text-decoration: underline; margin-left: 8px; padding: 5px; font: inherit;}
.lb-editor.is-expanded,.lb-editor:fullscreen {position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; border: 0; border-radius: 0; z-index: 1000;}
.lb-editor.is-expanded .lb-stage,.lb-editor:fullscreen .lb-stage {height: 100dvh; min-height: 0;}
.lb-editor [hidden] {display: none!important;}
.campus[data-board-open] .c-main {padding: 12px;}
@container lesson-board (max-width: 1000px) {
  .lb-bottom {grid-template-columns: 1fr 1fr; row-gap: 8px;}
  .lb-tool-dock {grid-column: 1/-1; grid-row: 1;}
  .lb-history {grid-column: 1; grid-row: 2; justify-self: start;}
  .lb-zoom {grid-column: 2; grid-row: 2; justify-self: end;}
}
@container lesson-board (max-width: 650px) {
  .lb-topbar {inset: 10px 10px auto;}
  .lb-titlebar {max-width: calc(100% - 64px); min-width: 0;}
  .lb-titlebar input {width: 200px; font-size: 13px!important;}
  .lb-status {left: 17px; top: 67px; max-width: calc(100% - 34px);}
  .lb-bottom {inset: auto 10px 10px; gap: 6px;}
  .lb-tools {gap: 1px; padding: 4px; border-radius: 13px; flex-wrap: wrap; justify-content: center;}
  .lb-tools>button {width: 32px; flex-basis: 32px; height: 36px; border-radius: 8px;}
  .lb-tools>button>svg {width: 20px; height: 20px;}
  .lb-history,.lb-zoom {padding: 3px; border-radius: 12px;}
  .lb-history>button,.lb-zoom>button {height: 32px;}
  .lb-style {right: 50%; transform: translateX(50%);}
  .lb-fullscreen {width: 46px; height: 46px; flex-basis: 46px;}
  .lb-text-editor {top: 115px;}
}
@media (max-width: 800px) {
  .campus[data-board-open] .c-main {padding: 8px;}
  .lb-stage {height: calc(100dvh - 96px); min-height: 430px;}
}
@media print {.lb-topbar,.lb-bottom,.lb-status,.lb-session-slot,.lb-selection {display:none!important;}.lb-stage{height:700px;}}

/* The lesson canvas is a white working surface in both application themes. */
html[data-theme] .lb-editor .lb-bottom {background: transparent; border: 0; box-shadow: none; color: #24354d;}
html[data-theme] .lb-editor .lb-stage :is(.lb-history,.lb-tools,.lb-zoom,.lb-selection,.lb-popover,.lb-text-editor,.lb-titlebar,.lb-fullscreen,.lb-sharing) {background: #fff; color: #24354d; border-color: #e0e6ee;}
html[data-theme] .lb-editor .lb-stage :is(.lb-bottom button,.lb-selection button,.lb-titlebar>button,.lb-fullscreen) {color: #53647c;}
html[data-theme] .lb-editor .lb-stage .lb-tools>button.is-active {background: #e9efff; color: #365ace; border-color: #d5dffb;}
html[data-theme] .lb-editor .lb-stage .lb-tools>button[data-board-tool=laser] {color: #c55a74;}
html[data-theme] .lb-editor .lb-stage :is(.lb-titlebar input,.lb-style select,.lb-text-editor textarea,.lb-sharing input) {color: #24354d; background: #fff; border-color: #d9e1ec;}
html[data-theme] .lb-editor .lb-stage :is(.lb-bottom button,.lb-selection button):hover {background: #eef2f8; color: #263f6b; border-color: #d5dffb;}