/* Доска: панель слева, полотно справа. Панели тёмные и в занятии, и вне его. */
.wb, .wb-full { --wb-panel:#181d29; --wb-hover:#2a3142; --wb-text:#e8ecf4; --wb-mute:#9aa4b8; --wb-line:#2f3748; --wb-on:#2a3f73; --wb-accent:#8fb3ff }
.wb { position:absolute; inset:0; display:flex; gap:8px }
.wb-stage { position:relative; flex:1; min-width:0; min-height:0; container-type:size; display:flex; justify-content:center; align-items:center }
.ink-sheet.wb-sheet { aspect-ratio:auto; flex:none; width:100%; height:100%; overflow:hidden; border:0; border-radius:10px }
.wb-sheet canvas { pointer-events:none }
.wb-sheet canvas.wb-top { pointer-events:auto }

.wb-bar { flex:none; width:84px; display:grid; grid-template-columns:repeat(2, 38px); gap:4px; align-content:start; overflow-y:auto; scrollbar-width:none; padding:4px; background:var(--wb-panel); border-radius:10px }
.wb-bar button, .wb-fly button { width:38px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:7px; background:none; color:var(--wb-text); font:inherit; font-size:17px; cursor:pointer }
.wb-bar button:hover, .wb-fly button:hover { background:var(--wb-hover) }
.wb-bar button.on { background:var(--wb-on); color:var(--wb-accent) }
.wb-bar .wb-gap { grid-column:1 / -1; height:1px; margin:2px 0; background:var(--wb-line) }
.wb-bar .wb-paint i { display:block; border-radius:50%; box-shadow:0 0 0 1px #566079 }
.wb-cs { display:grid; grid-template-columns:repeat(4, 34px); gap:4px } .wb-ws { display:flex; gap:4px; width:100% }
.wb-fly .wb-c { width:34px; height:30px } .wb-fly .wb-w { flex:1; height:30px }
.wb-fly .wb-c::before { content:""; width:20px; height:20px; border-radius:50%; background:var(--c) }
.wb-fly .wb-c[data-color="#1b1f2a"]::before { box-shadow:0 0 0 1px #566079 }
.wb-fly .wb-c.on::before, .wb-fly .wb-c[data-color="#1b1f2a"].on::before { box-shadow:0 0 0 2px var(--wb-panel), 0 0 0 4px var(--wb-accent) }
.wb-fly .wb-w.on { background:var(--wb-on) }
.wb-fly .wb-w b { display:block; width:22px; border-radius:4px; background:currentColor }
.wb-bar .wb-z { grid-column:1 / -1; width:100%; height:26px; font-size:12px; color:var(--wb-mute) }

.wb-fly { position:absolute; left:92px; z-index:6; display:flex; flex-wrap:wrap; max-width:240px; gap:4px; padding:6px; background:var(--wb-panel); color:var(--wb-text); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.4); font-size:13px; line-height:1.3 }
.wb-fly h4 { width:100%; margin:2px 4px 4px; font-size:13px }
.wb-fly p { width:100%; margin:0 4px 4px; display:flex; justify-content:space-between; gap:14px; white-space:nowrap }
.wb-fly em { color:var(--wb-mute); font-style:normal }
.wb-tsize { display:grid; grid-template-columns:repeat(8, 20px); gap:2px }
.wb-tsize u { height:20px; border:1px solid var(--wb-line); border-radius:3px; cursor:pointer; text-decoration:none }
.wb-tsize u.on { background:var(--wb-on); border-color:var(--wb-accent) }
.wb-fly .wb-tlabel { margin:6px 2px 0; color:var(--wb-mute) }

.wb-tnum { width:100%; display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; align-items:end }
.wb-tnum label { flex:1; display:flex; flex-direction:column; gap:2px; color:var(--wb-mute); font-size:12px }
.wb-tnum input { width:100%; box-sizing:border-box; height:30px; padding:0 6px; border:1px solid var(--wb-line); border-radius:6px; background:var(--wb-hover); font:inherit; font-size:14px; color:var(--wb-text) }
.wb-fly .wb-tnum button.wb-go { justify-content:center; background:#2f6df6; color:#fff }
.wb-hint { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:5; padding:5px 11px; border-radius:8px; background:rgba(23,28,43,.86); color:#fff; font-size:13px; white-space:nowrap; pointer-events:none }
.wb-hint[hidden] { display:none }
.wb-sel { position:absolute; top:8px; left:8px; right:8px; width:fit-content; max-width:calc(100% - 16px); margin:0 auto; z-index:5; display:flex; flex-wrap:wrap; justify-content:center; gap:4px; padding:4px; background:var(--wb-panel); border-radius:9px; box-shadow:0 4px 14px rgba(0,0,0,.3) }
.wb-sel[hidden] { display:none }
.wb-sel button { height:28px; padding:0 9px; border:0; border-radius:6px; background:none; color:var(--wb-text); font:inherit; font-size:13px; cursor:pointer; white-space:nowrap }
.wb-sel button:hover { background:var(--wb-hover) } .wb-sel button.on { background:var(--wb-on); color:var(--wb-accent) }

.wb-fly.wide { width:250px; max-width:250px }
.wb-fly button.wb-go { width:100%; height:32px; padding:0 8px; justify-content:flex-start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px }
.wb-fly button.wb-go.on { background:var(--wb-on); color:var(--wb-accent) }
.wb-note { color:var(--wb-mute); min-height:0 }
.wb-note:empty { display:none }

/* Сохранённая доска вне занятия. */
.wb-full { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; background:#0f131c }
.wb-head { flex:none; display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 12px; color:#fff }
.wb-head button { padding:8px 13px; border:0; border-radius:10px; background:var(--wb-panel); color:#fff; font:inherit; font-size:14px; cursor:pointer }
.wb-head button:disabled { opacity:.4; cursor:default }
.wb-title { flex:1; min-width:0; max-width:420px; height:36px; padding:0 11px; border:0; border-radius:10px; background:var(--wb-panel); color:#fff; font:inherit; font-size:14px }
.wb-pg { display:inline-flex; align-items:center; gap:8px; font-size:14px }
.wb-state { margin-left:auto; color:var(--wb-mute); font-size:14px }
.wb-body { position:relative; flex:1; min-height:0; margin:0 10px 10px }

/* Раздел «Доски». */
.wb-kinds { display:flex; flex-wrap:wrap; gap:10px }
.wb-kind { width:124px; padding:8px; display:flex; flex-direction:column; gap:6px; align-items:center; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; font-size:13px; cursor:pointer }
.wb-kind:hover { border-color:#2f6df6 }
.wb-kind i { display:block; width:100%; aspect-ratio:16/9; border:1px solid var(--line); border-radius:5px; background-color:#fff }
.wb-kind .wb-bg-grid { background-image:linear-gradient(#dfe5ef 1px, transparent 1px), linear-gradient(90deg, #dfe5ef 1px, transparent 1px); background-size:9px 9px }
.wb-kind .wb-bg-lines { background-image:linear-gradient(#cfdcf0 1px, transparent 1px); background-size:100% 10px }
.wb-kind .wb-bg-dots { background-image:radial-gradient(#b7c1d3 1px, transparent 1.4px); background-size:9px 9px }
.wb-kind .wb-bg-axes { background-image:linear-gradient(#5b6478, #5b6478), linear-gradient(#5b6478, #5b6478); background-size:100% 1px, 1px 100%; background-position:center; background-repeat:no-repeat }
.wb-kind .wb-bg-dark { background-color:#22302b }
.wb-who { margin:16px 0 0; font-size:17px } .wb-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; margin-top:12px }
.wb-card { display:flex; flex-direction:column; gap:6px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:10px }
.wb-open { aspect-ratio:16/9; padding:0; border:1px solid var(--line); border-radius:6px; background:#fff; overflow:hidden; cursor:pointer }
.wb-open img { display:block; width:100%; height:100%; margin:0; border:0; border-radius:0; object-fit:cover }
.wb-name { width:100%; box-sizing:border-box; height:30px; padding:0 6px; border:1px solid transparent; border-radius:6px; font:inherit; font-size:14px; font-weight:600 }
.wb-name:hover, .wb-name:focus { border-color:var(--line) }
.wb-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--muted); font-size:12px }
.wb-del { border:0; background:none; color:var(--muted); font:inherit; font-size:12px; cursor:pointer }
.wb-del:hover { color:#d23c3c }