:root{--wb-bg:#f9f9f7;--wb-surface:#fff;--wb-stroke:#111;--wb-muted:#6f6f68;--wb-border:#dfdfd7;--wb-danger:#bf3a30}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{background:var(--wb-bg);color:#111;font-family:Avenir Next,Segoe UI,sans-serif;overflow:hidden}.wb-page{min-height:100dvh}.wb-host-shell,.wb-controller-shell,.wb-panel,.wb-board-view{width:100%;min-height:100dvh}.wb-panel{background:var(--wb-bg);place-items:center;padding:20px;display:grid}.wb-controller-home{padding:24px}.wb-home-card{text-align:center;background:#fffffff5;border:1px solid #11111114;border-radius:24px;width:min(520px,92vw);padding:28px;box-shadow:0 24px 60px #1111111a}.wb-home-card h1{margin:8px 0 10px;font-size:clamp(1.8rem,4vw,2.4rem)}.wb-home-card p{color:#2f2f2f;margin:0 0 10px}.wb-home-badge{color:#111;letter-spacing:.08em;text-transform:uppercase;background:#1111110f;border-radius:999px;justify-content:center;align-items:center;padding:6px 12px;font-size:.78rem;font-weight:700;display:inline-flex}.wb-qr-wrap{background:var(--wb-surface);border:1px solid var(--wb-border);text-align:center;border-radius:18px;width:min(520px,92vw);padding:24px;box-shadow:0 18px 40px #10101014}.wb-qr{justify-content:center;margin-bottom:14px;display:flex}.wb-qr canvas{border:1px solid var(--wb-border);background:var(--wb-bg);border-radius:14px}.wb-qr-wrap h1{margin:8px 0;font-size:clamp(1.45rem,1.8vw,2rem)}.wb-qr-wrap p{color:#2f2f2f;margin:6px 0}.wb-muted{color:var(--wb-muted)!important}.wb-btn,.wb-tool{border:1px solid var(--wb-border);color:#111;cursor:pointer;touch-action:manipulation;background:#fff;border-radius:10px;padding:10px 12px;font-size:.95rem;font-weight:600}.wb-home-card .wb-btn{min-width:180px;margin-top:10px}.wb-home-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.wb-home-actions .wb-btn{margin-top:10px}.wb-tool-icon{justify-content:center;align-items:center;width:46px;height:46px;padding:0;display:inline-flex}.wb-tool-icon svg{stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px;width:22px;height:22px}.wb-btn:active,.wb-tool:active{transform:translateY(1px)}.wb-btn:disabled,.wb-tool:disabled{opacity:.38;cursor:default;box-shadow:none}.wb-btn-danger,.wb-tool-danger{color:var(--wb-danger);border-color:#bf3a3059}.wb-tool.is-active{border-color:#111;box-shadow:inset 0 0 0 1px #111}.wb-board-view{background:var(--wb-bg);position:relative}#host-canvas,#controller-canvas{touch-action:none;background:linear-gradient(#11111106 1px,#0000 1px) 0 0/24px 24px,linear-gradient(90deg,#11111106 1px,#0000 1px) 0 0/24px 24px,#fff;width:100%;height:100dvh;display:block}.wb-toolbar{top:max(12px, calc(env(safe-area-inset-top) + 4px));z-index:30;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffe0;border:1px solid #11111114;border-radius:16px;align-items:center;gap:8px;padding:8px;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 12px 32px #11111114}.wb-status{right:14px;bottom:max(12px, env(safe-area-inset-bottom));z-index:20;color:#fff;letter-spacing:.02em;background:#111111d1;border-radius:999px;padding:7px 10px;font-size:.78rem;position:fixed}.wb-host-reset{top:max(14px, calc(env(safe-area-inset-top) + 6px));z-index:32;color:#111;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffe6;border:1px solid #11111114;border-radius:999px;position:fixed;right:14px;box-shadow:0 12px 32px #11111114}.wb-host-reset svg{stroke:currentColor;fill:none;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.wb-host-reset:active{transform:translateY(1px)}.wb-scanner{z-index:55;padding:max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));color:#fff;background:#111111eb;flex-direction:column;gap:16px;display:flex;position:fixed;inset:0}.wb-scanner-topbar{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.wb-scanner-topbar h2{margin:0 0 4px;font-size:1.25rem}.wb-scanner-topbar p{color:#ffffffb8;margin:0}.wb-scanner-frame{background:#000;border:1px solid #ffffff1f;border-radius:24px;flex:1;min-height:280px;position:relative;overflow:hidden}.wb-scanner-frame video{object-fit:cover;width:100%;height:100%;display:block}.wb-scanner-reticle{aspect-ratio:1;border:2px solid #ffffffe6;border-radius:24px;width:min(58vw,300px);position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-shadow:0 0 0 9999px #00000038}.wb-scanner-message{text-align:center;margin:0;color:#ffffffc7!important}.wb-install-hint{left:50%;bottom:max(14px, calc(env(safe-area-inset-bottom) + 8px));z-index:45;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#111;background:#fffffff0;border:1px solid #11111114;border-radius:16px;justify-content:space-between;align-items:center;gap:12px;width:min(560px,100vw - 24px);padding:12px 14px;font-size:.92rem;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 16px 40px #1111111a}.wb-install-hint button{cursor:pointer;background:#fff;border:1px solid #11111114;border-radius:999px;flex:none;justify-content:center;align-items:center;width:36px;height:36px;display:inline-flex}.wb-install-hint svg{stroke:currentColor;fill:none;stroke-width:2px;stroke-linecap:round;width:16px;height:16px}.wb-rotate-overlay{z-index:60;background:#f9f9f7fa;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.wb-rotate-card{text-align:center;background:#fff;border:1px solid #11111114;border-radius:22px;width:min(420px,92vw);padding:24px;box-shadow:0 24px 60px #1111111a}.wb-rotate-card svg{stroke:currentColor;fill:none;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:42px;height:42px;margin-bottom:12px}.wb-rotate-card h1{margin:0 0 8px;font-size:1.35rem}.wb-rotate-card p{color:var(--wb-muted);margin:0}.wb-block-message{border:1px solid var(--wb-border);text-align:center;background:#fff;border-radius:18px;width:min(520px,92vw);padding:22px}.wb-block-message h1{margin:0 0 10px}.wb-block-message p{color:var(--wb-muted);margin:0}.is-hidden{display:none!important}@media (width<=700px){.wb-toolbar{justify-content:flex-start;width:calc(100vw - 16px);left:8px;overflow-x:auto;transform:none}.wb-tool{white-space:nowrap}.wb-install-hint{align-items:flex-start}}@media (orientation:portrait){.wb-controller .wb-controller-shell,.wb-controller .wb-status{visibility:hidden}.wb-controller .wb-rotate-overlay{display:grid!important}}@media (orientation:landscape){.wb-controller .wb-rotate-overlay{display:none!important}}
