/* Online Whiteboard — light infinite canvas inside the dark site frame, floating toolbars. */
.wb-hero{background:radial-gradient(circle at 92% 18%,#ffd16633,transparent 38%),linear-gradient(120deg,#2a2346,#211d38 75%)}
.wb-frame{border:1px solid var(--usp-line,#3a3352);border-radius:16px;overflow:hidden;margin-top:14px;background:#f8f9fb}
.wb-stage{position:relative;height:min(76vh,780px);min-height:440px;overflow:hidden;outline:none;background:#f8f9fb;touch-action:none;user-select:none;-webkit-user-select:none}
#wbSvg{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:default}
.wb-stage.panning #wbSvg,.wb-stage.t-hand #wbSvg{cursor:grab}.wb-stage.t-draw #wbSvg{cursor:crosshair}.wb-stage.t-erase #wbSvg{cursor:cell}
.wb .wb-btn,.wb .wb-toolbar button,.wb .wb-pop button,.wb .wb-style button{font:600 13px system-ui,'Segoe UI',sans-serif;color:#1e1e1e;background:#fff;border:1px solid #dfe2e8;border-radius:9px;min-height:34px;padding:4px 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;box-shadow:none}
.wb .wb-btn:hover,.wb .wb-toolbar button:hover,.wb .wb-pop button:hover,.wb .wb-style button:hover{background:#f1f0ff;border-color:#c9c2ff}
.wb-toolbar{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:5px;background:#fff;border:1px solid #dfe2e8;border-radius:12px;box-shadow:0 4px 18px #0000001a;max-width:calc(100% - 170px);overflow-x:auto;scrollbar-width:none;z-index:4}
.wb .wb-toolbar button{width:38px;height:38px;padding:0;font-size:17px;border-color:transparent;position:relative;flex:0 0 auto}
.wb .wb-toolbar button[aria-pressed=true]{background:#e5dbff;border-color:#9775fa}
.wb-toolbar button small{position:absolute;right:2px;bottom:0;font-size:9px;color:#868e96;font-weight:500}
.wb-toolbar .wb-sep{width:1px;background:#e3e6ec;margin:4px 2px;flex:0 0 1px}
.wb-menu{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:5}
.wb-pop{position:absolute;top:42px;right:0;width:250px;background:#fff;border:1px solid #dfe2e8;border-radius:12px;box-shadow:0 10px 30px #0000002a;padding:8px;display:flex;flex-direction:column;gap:4px;max-height:min(70vh,560px);overflow:auto}
.wb .wb-pop button,.wb-filebtn{justify-content:flex-start;width:100%;border-color:transparent;font:600 13px system-ui,'Segoe UI',sans-serif;color:#1e1e1e;padding:7px 10px;border-radius:8px;cursor:pointer;display:flex}
.wb-filebtn:hover{background:#f1f0ff}
.wb-pop hr{border:0;border-top:1px solid #eceef2;margin:4px 0;width:100%}
.wb-sub{font:700 11px system-ui;color:#868e96;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px}
.wb-tpls{display:grid;grid-template-columns:1fr 1fr;gap:4px}.wb .wb-tpls button{justify-content:center;border-color:#eceef2;font-size:12px;padding:5px}
.wb-chk{display:flex;gap:6px;align-items:center;font:500 12px system-ui;color:#495057;padding:3px 8px}
.wb-style{position:absolute;left:10px;top:60px;width:208px;max-height:calc(100% - 120px);overflow:auto;background:#fff;border:1px solid #dfe2e8;border-radius:12px;box-shadow:0 4px 18px #0000001a;padding:10px;z-index:4;font:500 12px system-ui,'Segoe UI',sans-serif;color:#495057}
.wb-style h4{margin:8px 0 5px;font:700 11px system-ui;color:#868e96;text-transform:uppercase;letter-spacing:.05em}.wb-style h4:first-child{margin-top:0}
.wb-sw{display:flex;flex-wrap:wrap;gap:4px}
.wb .wb-sw button{width:26px;height:26px;min-height:0;padding:0;border-radius:7px;border:1px solid #dfe2e8}
.wb .wb-sw button[aria-pressed=true]{outline:2px solid #7048e8;outline-offset:1px}
.wb .wb-sw button.none{background:linear-gradient(135deg,#fff 45%,#e03131 46%,#e03131 54%,#fff 55%)}
.wb-seg{display:flex;gap:3px;flex-wrap:wrap}.wb .wb-seg button{min-height:28px;padding:2px 8px;font-size:12px;flex:1}.wb .wb-seg button[aria-pressed=true]{background:#e5dbff;border-color:#9775fa}
.wb-style input[type=range]{width:100%}
.wb-style input[type=color]{width:26px;height:26px;padding:0;border:1px solid #dfe2e8;border-radius:7px;background:none}
.wb-zoom{position:absolute;left:10px;bottom:10px;display:flex;gap:3px;padding:4px;background:#fff;border:1px solid #dfe2e8;border-radius:12px;box-shadow:0 4px 18px #0000001a;z-index:4;align-items:center}
.wb .wb-zoom .wb-btn{min-height:30px;padding:2px 9px;border-color:transparent}.wb-pct{min-width:56px}.wb-sep{width:1px;height:20px;background:#e3e6ec;margin:0 2px}
.wb-status{position:absolute;right:10px;bottom:10px;max-width:min(520px,60%);margin:0;padding:7px 12px;border-radius:10px;background:#1e1e1ee6;color:#fff;font:500 13px system-ui;z-index:4;pointer-events:none}
.wb-status:empty{display:none}.wb-status[data-error=true]{background:#c92a2ae6}
.wb-edit{position:absolute;z-index:6;margin:0;border:0;outline:2px solid #9775fa;border-radius:4px;background:transparent;resize:none;overflow:hidden;padding:0;color:#1e1e1e;line-height:1.25;white-space:pre-wrap;word-break:break-word;min-height:0;box-shadow:none;transform-origin:0 0}
.wb-frame:fullscreen,.wb-frame.wb-full{position:fixed;inset:0;z-index:1000;margin:0;border:0;border-radius:0}
.wb-frame:fullscreen .wb-stage,.wb-frame.wb-full .wb-stage{height:100%;max-height:none}
@media(max-width:700px){.wb-toolbar{top:auto;bottom:58px;max-width:calc(100% - 20px)}.wb-style{left:auto;right:10px;top:56px;width:180px;max-height:calc(100% - 180px)}.wb-zoom{bottom:10px}.wb .wb-zoom .wb-btn{padding:2px 7px}.wb-status{bottom:110px;right:10px;left:10px;max-width:none}}