/* Digisteri Whiteboard */
:root {
  --wb-ink: #1d2433; --wb-muted: #5b6475; --wb-line: #d7dbe3; --wb-surface: #ffffff; --wb-surface-2: #f3f4f7; --wb-page: #eceef2;
  --wb-accent: #0f2a4a; --wb-accent-ink: #ffffff; --wb-teal: #0f766e; --wb-coral: #d9482b; --wb-danger: #b91c1c; --wb-ok: #047857; --wb-focus: #f59e0b; --wb-sel: #2563eb;
  --wb-radius: 10px; --wb-radius-s: 8px; --wb-radius-l: 14px; --wb-shadow: 0 8px 30px rgba(15, 23, 42, .16);
  --wb-s1: 4px; --wb-s2: 8px; --wb-s3: 12px; --wb-s4: 16px; --wb-s5: 24px;
  --wb-fs-s: 13px; --wb-fs-m: 14px; --wb-fs-l: 16px; --wb-fs-xl: 20px;
  --wb-touch: 44px; --wb-motion: .18s; --wb-kb: 0px; --wb-vvh: 100dvh;
  --wb-z-panel: 30; --wb-z-text: 45; --wb-z-modal: 50; --wb-z-menu: 60; --wb-z-toast: 100;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--wb-ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --wb-ink: #e6e9ef; --wb-muted: #a3acbd; --wb-line: #394152; --wb-surface: #1c2230; --wb-surface-2: #252c3b; --wb-page: #141924; --wb-accent: #5eead4; --wb-accent-ink: #06201d; --wb-teal: #5eead4; --wb-coral: #fb8f73; --wb-danger: #f87171; --wb-ok: #34d399; }
}
:root[data-theme="dark"] { --wb-ink: #e6e9ef; --wb-muted: #a3acbd; --wb-line: #394152; --wb-surface: #1c2230; --wb-surface-2: #252c3b; --wb-page: #141924; --wb-accent: #5eead4; --wb-accent-ink: #06201d; --wb-teal: #5eead4; --wb-coral: #fb8f73; --wb-danger: #f87171; --wb-ok: #34d399; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--wb-page); color: var(--wb-ink); }
.wb-root { height: 100%; }
.wb-loading { padding: 24px; }
.wb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--wb-focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- Buttons and forms ---------- */
.wb-btn { font: inherit; font-size: 14px; border: 1px solid var(--wb-line); background: var(--wb-surface); color: var(--wb-ink); border-radius: 8px; padding: 7px 12px; cursor: pointer; line-height: 1.2; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.wb-btn:hover { background: var(--wb-surface-2); }
.wb-btn:disabled { opacity: .5; cursor: not-allowed; }
.wb-btn-primary { background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-ink); }
.wb-btn-primary:hover { background: var(--wb-accent); filter: brightness(1.08); }
.wb-btn-danger { background: var(--wb-danger); border-color: var(--wb-danger); color: #fff; }
.wb-btn-danger:hover { background: var(--wb-danger); filter: brightness(1.08); }
.wb-btn-danger-text { color: var(--wb-danger); }
.wb-btn-ghost { background: transparent; border-color: transparent; }
.wb-btn-small { padding: 4px 8px; font-size: 13px; }
.wb-icon-btn { font: inherit; width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--wb-ink); cursor: pointer; display: inline-grid; place-items: center; font-size: 17px; padding: 0; }
.wb-icon-btn:hover { background: var(--wb-surface-2); }
.wb-icon-btn:disabled { opacity: .35; cursor: default; }
.wb-icon-btn[aria-pressed="true"] { border-color: var(--wb-accent); }
.wb-icon-btn svg { width: 20px; height: 20px; }
.wb-field { display: grid; gap: 4px; margin: 0 0 10px; }
.wb-field label { font-size: 13px; color: var(--wb-muted); }
.wb-field input:not([type=checkbox]):not([type=color]):not([type=range]), .wb-field select, .wb-login input, .wb-url { font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--wb-line); border-radius: 7px; background: var(--wb-surface); color: var(--wb-ink); width: 100%; }
.wb-field input[type=color] { width: 56px; height: 34px; padding: 2px; border: 1px solid var(--wb-line); border-radius: 7px; background: var(--wb-surface); }
.wb-check { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 0 0 10px; }
.wb-hint { color: var(--wb-muted); font-size: 13px; }
.wb-error { color: var(--wb-danger); font-size: 14px; }
.wb-error:empty { display: none; }
.wb-ok { color: var(--wb-ok); }
.wb-empty { color: var(--wb-muted); }
.wb-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.wb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

/* ---------- Pages (list, login) ---------- */
.wb-page { min-height: 100%; }
.wb-page-head { padding: 12px 16px; border-bottom: 1px solid var(--wb-line); background: var(--wb-surface); }
.wb-brand { display: inline-flex; gap: 10px; align-items: center; color: var(--wb-ink); text-decoration: none; font-weight: 700; }
.wb-page-main { max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; }
.wb-page-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wb-page-top h1 { margin: 0 auto 0 0; }
.wb-card { background: var(--wb-surface); border: 1px solid var(--wb-line); border-radius: var(--wb-radius); padding: 16px; }
.wb-login { max-width: 420px; margin: 40px auto; display: grid; gap: 8px; }
.wb-login h1 { margin: 0; }
.wb-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.wb-template { text-align: left; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 6px; }
.wb-template:hover { border-color: var(--wb-accent); }
.wb-template span { color: var(--wb-muted); font-size: 14px; }
.wb-board-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.wb-board-list li { background: var(--wb-surface); border: 1px solid var(--wb-line); border-radius: 8px; padding: 10px 12px; }
.wb-board-list a { font-weight: 600; color: var(--wb-accent); }

/* ---------- Editor layout ---------- */
.wb-app { height: 100%; display: grid; grid-template-rows: auto 1fr; background: var(--wb-page); overflow: hidden; }
.wb-top { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--wb-surface); border-bottom: 1px solid var(--wb-line); min-width: 0; flex-wrap: wrap; }
.wb-title-input { font: inherit; font-weight: 650; font-size: 16px; border: 1px solid transparent; background: transparent; color: var(--wb-ink); padding: 5px 8px; border-radius: 7px; min-width: 120px; flex: 0 1 280px; }
.wb-title-input:hover, .wb-title-input:focus { border-color: var(--wb-line); }
.wb-save-status { font-size: 13px; color: var(--wb-muted); white-space: nowrap; }
.wb-save-status::before { content: "●"; margin-right: 5px; }
.wb-save-saved::before { color: var(--wb-ok); }
.wb-save-dirty::before, .wb-save-saving::before { color: #d97706; }
.wb-save-offline, .wb-save-error, .wb-save-conflict { color: var(--wb-danger); font-weight: 600; }
.wb-top-sep { flex: 1; }
.wb-publish.wb-has-changes { box-shadow: 0 0 0 3px rgba(217, 119, 6, .35); }
.wb-body { display: grid; grid-template-columns: 56px minmax(0, 1fr) 320px; min-height: 0; }
.wb-tools { background: var(--wb-surface); border-right: 1px solid var(--wb-line); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; overflow-y: auto; }
.wb-tool { position: relative; width: 42px; height: 42px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--wb-ink); font-size: 19px; cursor: pointer; display: grid; place-items: center; }
.wb-tool:hover { background: var(--wb-surface-2); }
.wb-tool-on { background: color-mix(in srgb, var(--wb-accent) 16%, transparent); border-color: var(--wb-accent); }
.wb-tool-more { position: absolute; right: 2px; bottom: 1px; font-size: 9px; color: var(--wb-muted); }
.wb-draw-opts { display: grid; gap: 6px; justify-items: center; padding: 6px 0; border-top: 1px solid var(--wb-line); margin-top: 4px; }
.wb-draw-opts input[type=color] { width: 36px; height: 30px; border: 1px solid var(--wb-line); padding: 1px; background: none; border-radius: 6px; }
.wb-draw-opts input[type=range] { writing-mode: vertical-lr; direction: rtl; height: 80px; width: 20px; }
.wb-tool-menu { position: fixed; z-index: 60; background: var(--wb-surface); border: 1px solid var(--wb-line); border-radius: 10px; box-shadow: var(--wb-shadow); padding: 6px; display: grid; min-width: 210px; }
.wb-menu-item { font: inherit; font-size: 14px; text-align: left; border: 0; background: transparent; color: var(--wb-ink); padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.wb-menu-item:hover, .wb-menu-item:focus { background: var(--wb-surface-2); }
.wb-main { position: relative; min-width: 0; min-height: 0; }
.wb-panel { background: var(--wb-surface); border-left: 1px solid var(--wb-line); display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.wb-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--wb-line); }
.wb-tabs button { font: inherit; font-size: 12.5px; border: 0; background: transparent; color: var(--wb-muted); padding: 7px 7px; border-bottom: 2px solid transparent; cursor: pointer; }
.wb-tabs button[aria-selected="true"] { color: var(--wb-ink); border-bottom-color: var(--wb-accent); font-weight: 600; }
.wb-panel-body { overflow-y: auto; padding: 12px; min-height: 0; }
.wb-ptitle { font-weight: 700; margin: 0 0 10px; }
.wb-psection { border-top: 1px solid var(--wb-line); padding-top: 10px; margin-top: 10px; }
.wb-psection h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--wb-muted); margin: 0 0 8px; }
.wb-psection > .wb-btn { margin: 0 6px 8px 0; }
.wb-psection small.wb-hint, .wb-action-box + small.wb-hint { display: block; margin: 0 0 10px; }
.wb-action-box { background: var(--wb-surface-2); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.wb-action-summary { margin: 0 0 6px; font-size: 14px; overflow-wrap: anywhere; }
.wb-text-links ul { margin: 0; padding-left: 18px; font-size: 13px; }
.wb-shortcuts { font-size: 13px; color: var(--wb-muted); padding-left: 18px; }
.wb-layers { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.wb-layers li { display: flex; align-items: center; gap: 4px; border-radius: 6px; }
.wb-layer-on { background: color-mix(in srgb, var(--wb-accent) 14%, transparent); }
.wb-layer-name { flex: 1; text-align: left; font: inherit; font-size: 13px; border: 0; background: transparent; color: var(--wb-ink); padding: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-vp-row, .wb-route, .wb-popup-row, .wb-version, .wb-block { border: 1px solid var(--wb-line); border-radius: 8px; padding: 10px; margin: 10px 0; }
.wb-vp-row-on { border-color: #7c3aed; }
.wb-route-list { padding-left: 22px; margin: 6px 0; }
.wb-route-list li { margin: 2px 0; }
.wb-route-list li > span:first-child { margin-right: 6px; }
.wb-popup-row { display: grid; gap: 4px; }
.wb-version-public { border-color: var(--wb-ok); }
.wb-swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wb-swatch { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--wb-line); cursor: pointer; }
.wb-swatch[aria-pressed="true"] { outline: 2px solid var(--wb-accent); outline-offset: 2px; }
.wb-icon-pick { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.wb-task-edit { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.wb-task-edit li { display: flex; gap: 6px; align-items: center; }
.wb-task-edit input:not([type=checkbox]) { flex: 1; font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--wb-line); border-radius: 6px; background: var(--wb-surface); color: var(--wb-ink); }
.wb-table-edit { display: grid; gap: 3px; margin-bottom: 8px; }
.wb-table-edit input { font: inherit; font-size: 12px; padding: 4px; border: 1px solid var(--wb-line); border-radius: 4px; min-width: 0; background: var(--wb-surface); color: var(--wb-ink); }
.wb-end { border-top: 1px dashed var(--wb-line); padding-top: 8px; margin-top: 8px; font-size: 14px; }
.wb-crop { background: var(--wb-surface-2); padding: 8px; border-radius: 8px; margin: 8px 0; }

/* ---------- Stage, world and objects ---------- */
.wb-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; }
.wb-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--wb-focus); }
.wb-grid { background-image: radial-gradient(circle, rgba(15, 23, 42, .16) 1px, transparent 1.2px); }
.wb-panning, .wb-panning * { cursor: grabbing !important; }
.wb-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.wb-content { position: absolute; left: 0; top: 0; }
.wb-obj { position: absolute; transform-origin: 50% 50%; color: #1d2433; }
.wb-far { content-visibility: hidden; visibility: hidden; }
.wb-text { width: 100%; line-height: 1.35; overflow-wrap: anywhere; outline: none; cursor: inherit; }
.wb-text p, .wb-text h2, .wb-text h3, .wb-text h4, .wb-text ul, .wb-text ol, .wb-text li { margin: 0; }
.wb-text p + p, .wb-text ul + p, .wb-text ol + p { margin-top: .35em; }
.wb-text h2 { font-size: 1.6em; line-height: 1.15; }
.wb-text h3 { font-size: 1.3em; line-height: 1.2; }
.wb-text h4 { font-size: 1.1em; }
.wb-text ul, .wb-text ol { padding-left: 1.3em; }
.wb-link { color: #1d4ed8; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .15em; cursor: pointer; }
a.wb-link:hover { text-decoration-thickness: .14em; }
.wb-link-broken { color: var(--wb-danger); text-decoration: line-through wavy; }
.wb-type-sticky .wb-sticky-body { width: 100%; height: 100%; padding: 16px; box-shadow: 0 4px 14px rgba(15, 23, 42, .18); overflow: hidden; }
.wb-shape { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; text-align: center; }
.wb-shape-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wb-shape .wb-text { position: relative; }
.wb-image { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; }
.wb-image-clip { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.wb-image-clip img { width: 100%; height: 100%; display: block; }
.wb-image figcaption { font-size: 15px; padding: 6px 2px 0; color: #374151; }
.wb-frame-polaroid { background: #fff; padding: 12px 12px 0; box-shadow: 0 6px 18px rgba(15, 23, 42, .25); }
.wb-frame-polaroid:not(:has(figcaption)) { padding-bottom: 44px; }
.wb-frame-polaroid figcaption { font-family: "Segoe Print", "Comic Sans MS", cursive; text-align: center; padding: 10px 4px 14px; min-height: 44px; }
.wb-frame-tape { background: #fff; padding: 10px; box-shadow: 0 4px 12px rgba(15, 23, 42, .2); position: relative; }
.wb-frame-tape::before, .wb-frame-tape::after { content: ""; position: absolute; top: -12px; width: 90px; height: 26px; background: rgba(250, 240, 180, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); z-index: 1; }
.wb-frame-tape::before { left: 12%; transform: rotate(-6deg); }
.wb-frame-tape::after { right: 12%; transform: rotate(5deg); }
.wb-frame-paper { background: #fffdf6; padding: 14px; box-shadow: 0 3px 10px rgba(15, 23, 42, .18); clip-path: polygon(0 2%, 4% 0, 12% 1.5%, 22% 0, 35% 1%, 50% 0, 64% 1.5%, 78% 0, 90% 1%, 100% 0, 99% 15%, 100% 32%, 98.5% 50%, 100% 68%, 99% 85%, 100% 100%, 85% 98.5%, 70% 100%, 52% 98.8%, 36% 100%, 20% 98.6%, 6% 100%, 0 98%, 1% 80%, 0 62%, 1.4% 44%, 0 26%, 1% 12%); }
.wb-frame-rounded .wb-image-clip { border-radius: 18px; }
.wb-placeholder { width: 100%; height: 100%; min-height: 80px; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 10px; background: repeating-linear-gradient(45deg, #eef1f6, #eef1f6 12px, #e4e8ef 12px, #e4e8ef 24px); color: #475569; border: 2px dashed #94a3b8; font-size: 15px; }
.wb-placeholder-icon { font-size: 28px; }
.wb-placeholder-note { font-size: 13px; color: #64748b; }
.wb-video { width: 100%; height: 100%; background: #0f172a; border-radius: 8px; overflow: hidden; position: relative; }
.wb-video-poster { position: absolute; inset: 0; display: grid; place-items: center; background: #0f172a center / cover no-repeat; color: #fff; }
.wb-play { width: 72px; height: 72px; border-radius: 50%; border: 0; background: rgba(15, 23, 42, .75); color: #fff; font-size: 28px; cursor: pointer; box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); }
.wb-play:disabled { cursor: default; opacity: .8; }
.wb-video-title { position: absolute; left: 10px; top: 8px; font-size: 14px; text-shadow: 0 1px 3px #000; }
.wb-video-external { position: absolute; right: 10px; bottom: 8px; color: #fff; font-size: 13px; background: rgba(15, 23, 42, .75); padding: 4px 8px; border-radius: 6px; }
.wb-video .wb-placeholder-note { position: absolute; bottom: 10px; left: 10px; color: #cbd5e1; }
.wb-player { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.wb-audio { width: 100%; height: 100%; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 10px; display: grid; gap: 6px; align-content: center; }
.wb-audio audio { width: 100%; }
.wb-type-connector { pointer-events: none; }
.wb-connector, .wb-connector-svg { position: absolute; inset: 0; overflow: visible; }
.wb-connector-hit { pointer-events: stroke; cursor: pointer; }
.wb-connector-label { position: absolute; transform: translate(-50%, -50%); background: #fff; padding: 2px 8px; border-radius: 6px; font-size: 15px; white-space: nowrap; border: 1px solid #cbd5e1; pointer-events: auto; }
.wb-draw-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wb-frame { position: absolute; inset: 0; border: 2px solid; border-radius: 6px; }
.wb-frame-label { position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; font-size: 18px; font-weight: 600; color: #475569; white-space: nowrap; }
.wb-hotspot { width: 100%; height: 100%; }
.wb-hotspot-button { display: grid; place-items: center; background: var(--hot); color: #fff; border-radius: 999px; font-weight: 600; font-size: 18px; box-shadow: 0 3px 10px rgba(15, 23, 42, .25); padding: 0 12px; text-align: center; }
.wb-hotspot-area { border: 2px dashed var(--hot); background: color-mix(in srgb, var(--hot) 14%, transparent); border-radius: 10px; }
.wb-hotspot-hidden { border: 1px dashed transparent; }
.wb-edit-stage .wb-hotspot-hidden { border-color: #94a3b8; background: rgba(148, 163, 184, .12); }
.wb-filecard { width: 100%; height: 100%; display: flex; gap: 12px; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 14px; box-shadow: 0 2px 8px rgba(15, 23, 42, .08); overflow: hidden; }
.wb-filecard-icon { font-size: 30px; }
.wb-filecard p { margin: 4px 0; font-size: 14px; color: #475569; }
.wb-filecard-open { font-size: 14px; color: #1d4ed8; }
.wb-projectcard { width: 100%; height: 100%; border: 1px solid #cbd5e1; border-radius: 12px; padding: 14px; box-shadow: 0 2px 8px rgba(15, 23, 42, .1); overflow: hidden; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.wb-pc-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.wb-pc-status { font-size: 12px; background: #e0e7ff; color: #1e3a8a; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.wb-pc-tasks { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; font-size: 15px; }
.wb-pc-tasks .done { color: #64748b; text-decoration: line-through; }
.wb-pc-meta { margin-top: auto; display: flex; gap: 12px; font-size: 13px; color: #475569; }
.wb-table { border-collapse: collapse; width: 100%; background: #fff; }
.wb-table th, .wb-table td { border: 1px solid #94a3b8; padding: 6px 8px; text-align: left; vertical-align: top; }
.wb-table th { background: #e2e8f0; }
.wb-iconobj, .wb-iconobj svg { width: 100%; height: 100%; display: block; }
.wb-type-text.wb-overflow::after, .wb-type-sticky.wb-overflow::after, .wb-type-shape.wb-overflow::after { content: "Teksti ei mahdu"; position: absolute; right: 0; bottom: -24px; font-size: 12px; background: var(--wb-danger); color: #fff; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.wb-type-text, .wb-type-sticky { overflow: visible; }
.wb-edit-stage .wb-type-frame { pointer-events: none; }
.wb-edit-stage .wb-frame-label { pointer-events: auto; cursor: pointer; }
.wb-edit-stage .wb-obj { cursor: default; }
.wb-edit-stage.wb-tool-create .wb-obj { cursor: crosshair; }
.wb-editing { z-index: 100000 !important; }
.wb-editing .wb-text { cursor: text; outline: 2px solid var(--wb-sel); outline-offset: 4px; user-select: text; -webkit-user-select: text; }
.wb-has-action::before { content: "⚡"; position: absolute; top: -12px; right: 18px; width: 24px; height: 24px; border-radius: 50%; background: #7c3aed; color: #fff; font-size: 13px; display: grid; place-items: center; z-index: 2; }
.wb-locked { }
.wb-drop { box-shadow: inset 0 0 0 4px var(--wb-accent); }

/* Viewpoint outlines (editor only) */
.wb-vp-layer { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2000000; }
.wb-vp { position: absolute; border: calc(2px * var(--inv-z, 1)) dashed rgba(124, 58, 237, .55); border-radius: calc(6px * var(--inv-z, 1)); }
.wb-vp-active { border-color: #7c3aed; border-style: solid; }
.wb-vp-hidden { opacity: .35; }
.wb-vp-editing .wb-vp-label { pointer-events: auto; cursor: move; }
.wb-vp-edge { position: absolute; pointer-events: auto; cursor: move; }
.wb-vp-edge-n,.wb-vp-edge-s { left: 0; width: 100%; height: calc(12px * var(--inv-z, 1)); transform: translateY(-50%); }
.wb-vp-edge-n { top: 0; } .wb-vp-edge-s { top: 100%; }
.wb-vp-edge-e,.wb-vp-edge-w { top: 0; height: 100%; width: calc(12px * var(--inv-z, 1)); transform: translateX(-50%); }
.wb-vp-edge-e { left: 100%; } .wb-vp-edge-w { left: 0; }
.wb-vp-handle { position: absolute; z-index: 1; width: calc(44px * var(--inv-z, 1)); height: calc(44px * var(--inv-z, 1)); border: 0; padding: 0; transform: translate(-50%, -50%); background: transparent; pointer-events: auto; touch-action: none; }
.wb-vp-handle::after { content: ''; position: absolute; inset: 35%; border: calc(2px * var(--inv-z, 1)) solid #7c3aed; background: white; border-radius: 2px; }
.wb-vp-handle:focus-visible { outline: calc(2px * var(--inv-z, 1)) solid #7c3aed; }
.wb-view-edit-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid #7c3aed; border-radius: 8px; background: #fff; color: #5b21b6; white-space: nowrap; font-size: 13px; }
.wb-view-edit-bar[hidden] { display: none; }
.wb-layout-tools { display: flex; gap: 4px; align-items: center; flex: none; }
.wb-layout-select { font: inherit; font-size: 13px; width: 104px; min-height: 36px; border: 1px solid var(--wb-line); border-radius: 7px; background: white; }
.wb-layout-status { font: inherit; font-size: 12px; border: 0; border-radius: 6px; background: #e7f3f1; color: #23475a; min-height: 36px; cursor: pointer; }
.wb-layout-guide { position: absolute; pointer-events: none; z-index: 3; border: 1px dashed #64748b; border-radius: 4px; }
.wb-layout-guide[hidden] { display: none; }
.wb-layout-guide span { position: absolute; left: 0; top: 0; font-size: 11px; color: #475569; background: #ffffffdd; padding: 2px 4px; }
.wb-layout-hidden { opacity: .24; outline: 2px dashed #64748b; }
.wb-layout-copy-preview { width: 100%; height: 180px; background: #f6f4ee; border: 1px solid var(--wb-line); }
@media(max-width:599px) { .wb-layout-select { width: 82px; min-height: 44px; } .wb-layout-status { width: 44px; min-width: 44px; min-height: 44px; overflow: hidden; color: transparent; position: relative; } .wb-layout-status::after { content: attr(data-mark); color: #23475a; position: absolute; inset: 0; display: grid; place-items: center; } }
.wb-vp-label { position: absolute; left: 0; bottom: 100%; transform-origin: 0 100%; transform: scale(var(--inv-z, 1)); background: #7c3aed; color: #fff; font-size: 13px; padding: 3px 8px; border-radius: 6px 6px 0 0; white-space: nowrap; pointer-events: none; }
.wb-picking .wb-vp-label { pointer-events: auto; cursor: pointer; }
.wb-picking .wb-vp { border-color: #7c3aed; background: rgba(124, 58, 237, .06); }

/* Overlay (screen coordinates) */
.wb-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.wb-sel { position: absolute; border: 1.5px solid var(--wb-sel); transform-origin: 50% 50%; }
.wb-sel-multi { border-style: dashed; }
.wb-sel-locked { border-color: #94a3b8; border-style: dotted; }
.wb-handle { position: absolute; width: 11px; height: 11px; background: #fff; border: 1.5px solid var(--wb-sel); border-radius: 2px; pointer-events: auto; transform: translate(-50%, -50%); }
.wb-h-nw { left: 0; top: 0; cursor: nwse-resize; } .wb-h-n { left: 50%; top: 0; cursor: ns-resize; } .wb-h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.wb-h-e { left: 100%; top: 50%; cursor: ew-resize; } .wb-h-se { left: 100%; top: 100%; cursor: nwse-resize; } .wb-h-s { left: 50%; top: 100%; cursor: ns-resize; }
.wb-h-sw { left: 0; top: 100%; cursor: nesw-resize; } .wb-h-w { left: 0; top: 50%; cursor: ew-resize; }
.wb-h-rot { left: 50%; top: -28px; border-radius: 50%; width: 14px; height: 14px; cursor: grab; }
.wb-h-rot::after { content: ""; position: absolute; left: 50%; top: 100%; height: 14px; border-left: 1.5px solid var(--wb-sel); }
.wb-handle-end { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--wb-sel); transform: translate(-50%, -50%); pointer-events: auto; cursor: move; }
.wb-handle-end.wb-attached { background: var(--wb-sel); }
.wb-lock-badge, .wb-group-badge { position: absolute; top: -26px; left: 0; font-size: 12px; background: var(--wb-sel); color: #fff; padding: 2px 6px; border-radius: 4px; }
.wb-sel-locked .wb-lock-badge { background: #64748b; }
.wb-marquee { position: absolute; border: 1px solid var(--wb-sel); background: rgba(37, 99, 235, .08); }
.wb-guide { position: absolute; background: #e11d48; }
.wb-guide-v { top: 0; bottom: 0; width: 1px; }
.wb-guide-h { left: 0; right: 0; height: 1px; }
.wb-drop-target { position: absolute; outline: 3px solid #10b981; border-radius: 6px; }
.wb-draw-temp { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wb-text-toolbar { position: absolute; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; background: var(--wb-surface); border: 1px solid var(--wb-line); border-radius: 10px; box-shadow: var(--wb-shadow); padding: 4px; pointer-events: auto; max-width: min(720px, 96%); z-index: 10; }
.wb-tb-btn { font: inherit; font-size: 14px; min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--wb-ink); cursor: pointer; }
.wb-tb-btn:hover { background: var(--wb-surface-2); }
.wb-tb-btn:disabled { opacity: .35; }
.wb-tb-select { font: inherit; font-size: 13px; height: 32px; border: 1px solid var(--wb-line); border-radius: 6px; background: var(--wb-surface); color: var(--wb-ink); }
.wb-tb-color { width: 34px; height: 30px; padding: 1px; border: 1px solid var(--wb-line); border-radius: 6px; background: none; }
.wb-zoombar { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 4px; align-items: center; background: var(--wb-surface); border: 1px solid var(--wb-line); border-radius: 10px; padding: 4px; box-shadow: 0 2px 8px rgba(15, 23, 42, .1); z-index: 6; flex-wrap: wrap; max-width: calc(100% - 220px); }
.wb-zoom-label { font: inherit; font-size: 13px; border: 0; background: transparent; color: var(--wb-ink); min-width: 56px; cursor: pointer; }
.wb-minimap { position: absolute; right: 12px; bottom: 12px; background: var(--wb-surface); border: 1px solid var(--wb-line); border-radius: 8px; z-index: 6; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .1); }
.wb-banner { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #7c3aed; color: #fff; padding: 8px 12px; border-radius: 10px; z-index: 7; display: flex; gap: 12px; align-items: center; box-shadow: var(--wb-shadow); }
.wb-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #111827; color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; max-width: 90vw; box-shadow: var(--wb-shadow); }
.wb-progress { bottom: 72px; }

/* ---------- Modals ---------- */
.wb-modal-wrap { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.wb-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.wb-modal, .wb-reauth .wb-login { position: relative; background: var(--wb-surface); color: var(--wb-ink); border-radius: 14px; box-shadow: var(--wb-shadow); width: min(520px, 100%); max-height: calc(100dvh - 32px); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.wb-reauth .wb-login { display: grid; grid-template-rows: none; padding: 20px; margin: 0; }
.wb-modal-wide { width: min(760px, 100%); }
.wb-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; }
.wb-modal-head h2 { margin: 0; font-size: 19px; }
.wb-modal-body { padding: 6px 16px 12px; overflow-y: auto; }
.wb-modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--wb-line); }
.wb-ref-list li { margin: 3px 0; }
.wb-issues ul { padding-left: 20px; }
.wb-issues li { margin: 4px 0; }
.wb-rich-wrap { border: 1px solid var(--wb-line); border-radius: 8px; overflow: hidden; }
.wb-mini-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: var(--wb-surface-2); border-bottom: 1px solid var(--wb-line); }
.wb-rich-edit { min-height: 90px; padding: 10px; font-size: 16px; background: #fff; color: #1d2433; user-select: text; -webkit-user-select: text; }
.wb-popup-editor h3 { font-size: 15px; margin: 14px 0 4px; }
.wb-url { width: 100%; }

/* ---------- Preview overlay ---------- */
.wb-preview { position: fixed; inset: 0; z-index: 40; background: var(--wb-page); display: grid; grid-template-rows: auto 1fr; }
.wb-preview-bar { display: flex; gap: 12px; align-items: center; padding: 8px 12px; background: #7c3aed; color: #fff; flex-wrap: wrap; }
.wb-preview-bar .wb-hint { color: #ede9fe; margin-right: auto; }
.wb-preview-host { position: relative; min-height: 0; }

/* ---------- Viewer ---------- */
.wb-viewer { position: relative; height: 100%; overflow: hidden; background: var(--wb-page); }
body.wb-public, body.wb-public .wb-root { height: 100dvh; }
.wb-view-stage { position: absolute; inset: 0; cursor: grab; }
.wb-view-stage .wb-obj { pointer-events: auto; }
.wb-viewer[data-mode="read"] .wb-view-stage { display: none; }
.wb-viewer[data-mode="map"] .wb-read { display: none; }
.wb-actionable > :not(.wb-hit) { pointer-events: none; }
.wb-actionable .wb-link, .wb-actionable a:not(.wb-hit), .wb-actionable button, .wb-actionable audio, .wb-actionable video, .wb-actionable iframe { pointer-events: auto; }
.wb-hit { position: absolute; inset: 0; z-index: 0; border-radius: 8px; cursor: pointer; }
.wb-actionable > :not(.wb-hit) { position: relative; z-index: 1; }
.wb-actionable > .wb-shape, .wb-actionable > .wb-frame, .wb-actionable > .wb-draw-svg { position: absolute; }
.wb-type-hotspot.wb-actionable > .wb-hotspot { position: absolute; inset: 0; }
.wb-hit:focus-visible { outline: 4px solid var(--wb-focus); outline-offset: 4px; }
.wb-actionable:hover > .wb-hit + * { filter: brightness(1.04); }
.wb-view-stage .wb-actionable:hover { cursor: pointer; }
.wb-read { position: absolute; inset: 0; overflow-y: auto; padding: 24px 16px 120px; background: var(--wb-surface); color: var(--wb-ink); user-select: text; -webkit-user-select: text; }
.wb-read > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.wb-read-title { font-size: clamp(28px, 6vw, 44px); line-height: 1.1; margin: 0 auto 16px; }
.wb-read-section { padding: 16px 0 24px; border-top: 1px solid var(--wb-line); scroll-margin-top: 12px; }
.wb-read-heading { font-size: 24px; margin: 0 0 12px; }
.wb-flow-item { margin: 0 0 18px; color: var(--wb-ink); }
.wb-flow-item .wb-flow-text, .wb-popup-text { font-size: 18px; line-height: 1.55; }
.wb-flow-text p, .wb-popup-text p { margin: 0 0 .6em; }
.wb-flow-text h2, .wb-popup-text h2 { font-size: 1.6em; margin: .2em 0 .4em; line-height: 1.15; }
.wb-flow-text h3, .wb-popup-text h3 { font-size: 1.3em; margin: .2em 0 .4em; }
.wb-flow-text[style*="color"] { color: inherit !important; }
.wb-viewer .wb-read .wb-link, .wb-popup .wb-link { color: var(--wb-accent); }
.wb-flow-note { padding: 14px 16px; border-radius: 6px; color: #1d2433; box-shadow: 0 2px 6px rgba(15, 23, 42, .1); font-size: 17px; }
.wb-flow-note p { margin: 0 0 .4em; }
.wb-flow-figure { margin: 0; }
.wb-flow-figure img { max-width: 100%; height: auto; display: block; border-radius: 8px; }
.wb-flow-figure figcaption { color: var(--wb-muted); font-size: 15px; padding-top: 6px; }
.wb-flow-video { aspect-ratio: 16 / 9; height: auto; }
.wb-flow-hotspot, .wb-flow-filecard, .wb-flow-projectcard, .wb-flow-table, .wb-flow-audio { position: static; height: auto; }
.wb-flow-icon { width: 48px; height: 48px; }
.wb-flow-action { display: inline-block; background: var(--wb-accent); color: var(--wb-accent-ink); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.wb-flow-action .wb-shape { position: relative; inset: auto; padding: 0; }
.wb-flow-action .wb-shape-svg { display: none; }
.wb-flow-more { display: inline-block; margin-top: 4px; color: var(--wb-accent); font-weight: 600; }
.wb-nav { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 4px; align-items: center; background: var(--wb-surface); color: var(--wb-ink); border: 1px solid var(--wb-line); border-radius: 14px; padding: 6px; box-shadow: var(--wb-shadow); z-index: 10; max-width: calc(100% - 24px); }
.wb-nav-btn { font: inherit; font-size: 14px; border: 0; background: transparent; color: var(--wb-ink); padding: 8px 10px; border-radius: 9px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 40px; white-space: nowrap; }
.wb-nav-btn:hover:not(:disabled) { background: var(--wb-surface-2); }
.wb-nav-btn:disabled { opacity: .35; cursor: default; }
.wb-nav-btn > span[aria-hidden] { font-size: 18px; }
.wb-step-select { font: inherit; font-size: 14px; max-width: 220px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--wb-line); background: var(--wb-surface); color: var(--wb-ink); }
.wb-nav-sep { width: 1px; align-self: stretch; background: var(--wb-line); margin: 0 2px; }
@media (max-width: 720px) {
  .wb-nav-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wb-step-select { max-width: 140px; }
  .wb-nav { gap: 2px; }
}
.wb-popup-layer { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; }
.wb-popup-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.wb-popup { position: relative; background: var(--wb-surface); color: var(--wb-ink); border-radius: 14px; box-shadow: var(--wb-shadow); max-height: calc(100% - 24px); overflow-y: auto; width: min(640px, 100%); outline: none; }
.wb-popup-s { width: min(420px, 100%); }
.wb-popup-l { width: min(920px, 100%); }
.wb-popup-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 8px; background: var(--wb-surface); z-index: 1; }
.wb-popup-head h2 { margin: 0; font-size: 22px; }
.wb-popup-close { font: inherit; font-size: 26px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wb-line); background: var(--wb-surface); color: var(--wb-ink); cursor: pointer; flex: none; }
.wb-popup-body { padding: 4px 16px 20px; display: grid; gap: 14px; }
.wb-popup-link { font-weight: 600; color: var(--wb-accent); }
.wb-lightbox { width: min(1100px, 100%); padding-bottom: 16px; }
.wb-lightbox-img { display: block; max-width: 100%; max-height: calc(100dvh - 160px); margin: 0 auto; object-fit: contain; }
.wb-lightbox-video { aspect-ratio: 16 / 9; height: auto; width: calc(100% - 32px); margin: 0 16px; }
.wb-lightbox-caption { text-align: center; color: var(--wb-muted); margin: 8px 16px 0; }
@media (max-width: 720px) {
  .wb-popup-layer { padding: 0; align-items: end; }
  .wb-popup, .wb-popup-s, .wb-popup-l { width: 100%; max-height: 94%; border-radius: 16px 16px 0 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print {
  .wb-nav, .wb-view-stage, .wb-popup-layer { display: none !important; }
  .wb-viewer, .wb-read { position: static; overflow: visible; height: auto; }
  .wb-viewer[data-mode="map"] .wb-read { display: block; }
}
.wb-publication-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.wb-publication-card{min-width:0}.wb-publication-card ul{padding-left:20px}.wb-public-layout{position:relative;align-self:center;font-size:13px}.wb-public-layout summary{cursor:pointer;padding:12px;min-height:44px}.wb-public-layout[open]{padding:8px;border:1px solid var(--wb-border,#abc);border-radius:8px;background:var(--wb-panel,#fff)}.wb-public-layout label{display:flex;gap:8px;align-items:center}.wb-public-layout select{min-height:44px;max-width:160px}
.wb-nav-layouts{flex-wrap:wrap;justify-content:center;width:max-content}.wb-public-layout{flex:0 0 auto}.wb-public-layout summary{white-space:nowrap}.wb-public-layout[open]{padding:0;border:0;background:transparent}.wb-public-layout label{position:absolute;bottom:calc(100% + 8px);right:0;padding:12px;background:var(--wb-surface);border:1px solid var(--wb-line);border-radius:8px;box-shadow:var(--wb-shadow);white-space:nowrap}
@media(max-width:700px){.wb-publication-cards{grid-template-columns:1fr}.wb-public-layout summary{padding:8px}.wb-nav-layouts{width:calc(100% - 24px)}.wb-public-layout label{right:50%;transform:translateX(50%)}}
.wb-view-edit-bar{max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center;white-space:normal}.wb-view-edit-bar>span{overflow-wrap:anywhere;max-width:100%}.wb-view-nudges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0}.wb-view-nudges button{min-height:44px}.wb-coarse .wb-layout-select,.wb-coarse .wb-layout-status,.wb-coarse .wb-view-edit-bar button,.wb-coarse .wb-vp-row button,.wb-coarse .wb-vp-row input,.wb-coarse .wb-vp-row select,.wb-coarse .wb-vp-row summary{min-height:44px}.wb-coarse .wb-vp-row input[type=checkbox]{min-height:24px;width:24px;height:24px}.wb-coarse .wb-vp-row .wb-check{min-height:44px}
.wb-view-edit-mode .wb-layout-guide{display:none}
@media(max-width:599px){.wb-view-edit-bar button{display:none}.wb-view-edit-bar{pointer-events:none;font-size:12px}}