:root { 
      --bg: #f6f8fb; 
      --panel: #ffffff; 
      --panel-muted: #f1f4f9;
      --panel-hover: #e7ecf5;
      --ink: #16a34a; 
      --ink-strong: #15803d;
      --txt: #1f2937; 
      --txt-strong: #111827;
      --txt-inverse: #ffffff;
      --muted: #5f6b7c;
      --border: #d5dce6;
      --shadow-soft: 0 4px 12px rgba(15, 23, 42, 0.08);
      --shadow-elevated: 0 18px 40px rgba(15, 23, 42, 0.12);
      --accent-green-soft: #e6f4ea;
      --accent-yellow-soft: #fff5cc;
      --accent-blue-soft: #e6edff;
    }
    * { box-sizing: border-box; }
    body { margin:0; background: var(--bg); color: var(--txt); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; }
    .wrap { display:grid; grid-template-rows: auto 1fr auto; height: 100dvh; }
    header { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto auto; align-items:center; gap:.5rem; padding:.45rem .65rem; background: linear-gradient(180deg, rgba(17,24,39,.95), rgba(17,24,39,.6)); backdrop-filter: blur(6px); position: sticky; top:0; z-index:10; }
    header .toolbar-controls { flex:1 1 auto; display:flex; align-items:center; gap:.75rem; flex-wrap:nowrap; overflow-x:auto; padding-bottom:.2rem; scrollbar-width:thin; }
    header .toolbar-controls::-webkit-scrollbar{ height:6px; }
    header .toolbar-controls::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35); border-radius:999px; }
    header .toolbar-controls::-webkit-scrollbar-track{ background:transparent; }
    #menuToggle { border:1px solid var(--border); background:#0b1220; color:var(--txt); padding:.45rem .6rem; border-radius:.55rem; font-size:14px; line-height:1; }
    header .toolbar-nav { display:flex; gap:.35rem; align-items:center; flex-wrap:nowrap; padding-right:.75rem; margin-right:.1rem; position:relative; }
    header .toolbar-nav::after { content:""; display:block; width:1px; height:2.1rem; background:var(--border); border-radius:999px; position:relative; margin-left:.4rem; }
    header .toolbar-nav .tab-btn { border:1px solid #3b82f6; background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(59,130,246,.1)); color:#1e3a8a; padding:.38rem .85rem; border-radius:.7rem; font-size:13px; line-height:1; cursor:pointer; font-weight:600; box-shadow:0 1px 4px rgba(37,99,235,.16); transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
    header .toolbar-nav .tab-btn:hover,
    header .toolbar-nav .tab-btn:focus-visible { background:linear-gradient(135deg, rgba(59,130,246,.26), rgba(59,130,246,.16)); border-color:#2563eb; color:#1d4ed8; box-shadow:0 4px 12px rgba(37,99,235,.18); }
    header .toolbar-nav .tab-btn.active { color:#f8fafc; border-color:#1d4ed8; background:linear-gradient(135deg, rgba(37,99,235,.9), rgba(29,78,216,.85)); box-shadow:0 6px 16px rgba(29,78,216,.28); }
    header .toolbar-controls button,
    header .toolbar-controls label,
    header .toolbar-controls .pill,
    header .header-pages .btn,
    .header-status .btn { border:1px solid #1d4ed8; background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(59,130,246,.1)); color:#1e3a8a; padding:.45rem .6rem; border-radius:.55rem; font-size:14px; line-height:1; box-shadow:0 1px 4px rgba(37,99,235,.18); }
    .header-status .btn:hover,
    .header-status .btn:focus-visible{ background:linear-gradient(135deg, rgba(59,130,246,.26), rgba(59,130,246,.16)); color:#1d4ed8; }
    header .toolbar-controls label:not(.tool-setting) { display:flex; align-items:center; gap:.4rem; }
    header .toolbar-controls .pill { display:inline-flex; align-items:center; }
    .header-status{ display:flex; align-items:center; gap:.5rem; justify-self:end; }
    .header-status .status-btn{ position:relative; }
    .header-status .view-toggle{ border-color:var(--border); color:var(--muted); background:var(--panel); box-shadow:var(--shadow-soft); font-weight:500; }
    .header-status .view-toggle[data-active="true"]{ background:var(--accent-green-soft); border-color:#22c55e; color:#14532d; box-shadow:0 0 0 1px rgba(34,197,94,.16) inset; }
    .btn-with-icon { display:inline-flex; align-items:center; gap:.4rem; }
    .btn-with-icon .btn-icon { display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; line-height:1; }
    .tool-group{ display:flex; flex-wrap:nowrap; gap:.35rem; align-items:center; }
    .tool-group .tool-btn{ padding:.32rem .55rem; font-size:13px; border-radius:.5rem; white-space:nowrap; }
    .tool-group .tool-btn[aria-pressed="true"]{ border-color:#34d399; box-shadow:0 0 0 1px rgba(34,197,94,.4) inset; background:rgba(34,197,94,.22); color:#bbf7d0; }
    .draw-toolbar{ display:flex; align-items:center; gap:.5rem; min-width:0; width:100%; justify-content:flex-start; }
    .draw-toolbar-actions{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; white-space:nowrap; }
    .draw-toolbar-actions .tool-trigger{ min-width:0; max-width:220px; text-align:left; display:inline-flex; align-items:center; gap:.35rem; }
    .draw-toolbar-actions .btn{ padding:.32rem .55rem; font-size:13px; }
    .draw-toolbar-divider{ width:1px; height:24px; background:var(--border); border-radius:999px; margin:0 .25rem; flex:0 0 auto; }
    .tool-settings-popover{ position:fixed; top:78px; right:16px; width:min(420px, 94vw); max-height:min(80vh, 520px); overflow:auto; background:rgba(15,23,42,.96); border:1px solid rgba(34,197,94,.35); border-radius:18px; padding:.85rem; box-shadow:0 24px 48px rgba(2,6,23,.55); display:none; flex-direction:column; gap:.75rem; z-index:30; backdrop-filter:blur(10px); }
    .tool-settings-popover[data-open="true"]{ display:flex; }
    header[data-role="host"] + #toolSettingsPanel{ border-color:rgba(34,197,94,.45); box-shadow:0 24px 48px rgba(6,95,70,.45); }
    header[data-role="host"] + #toolSettingsPanel .tool-setting{ border-color:rgba(34,197,94,.28); }
    .tool-settings-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
    .tool-settings-heading{ display:flex; flex-direction:column; gap:.18rem; }
    .tool-settings-head{ cursor:grab; }
    #toolSettingsPanel[data-dragging="true"] .tool-settings-head{ cursor:grabbing; }
    .tool-settings-actions{ display:flex; align-items:center; gap:.35rem; }
    .tool-settings-actions .btn{ padding:.32rem .55rem; min-width:0; }
    #toolSettingsPin[aria-pressed="true"]{ border-color:#34d399; color:#bbf7d0; background:rgba(34,197,94,.22); box-shadow:0 0 0 1px rgba(52,211,153,.3) inset; }
    #toolSettingsPanel[data-pinned="true"]{ border-color:rgba(96,165,250,.45); box-shadow:0 24px 48px rgba(30,64,175,.4); }
    #toolSettingsPanel[data-pinned="true"] .tool-settings-head strong{ color:#bfdbfe; }
    .tool-settings-head strong{ font-size:1rem; letter-spacing:.01em; color:#e2e8f0; }
    .tool-settings-head span{ font-size:.8rem; color:var(--muted); }
    .tool-settings-tabs{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
    .tool-settings-tabs .btn{ padding:.35rem .6rem; font-size:.85rem; border-radius:.55rem; background:rgba(4,12,24,.78); border-color:rgba(51,65,85,.75); color:var(--muted); flex:0 0 auto; }
    .tool-settings-tabs .btn[aria-selected="true"],
    .tool-settings-tabs .tool-btn.active{ color:#e2e8f0; border-color:#34d399; background:rgba(34,197,94,.22); box-shadow:0 0 0 1px rgba(52,211,153,.35) inset; }
    .tool-settings-content{ display:flex; flex-direction:column; gap:.75rem; }
    .tool-settings-grid{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); align-items:stretch; }
    .tool-setting{ display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; min-width:0; padding:.55rem .65rem; border:1px solid var(--border); border-radius:.65rem; background:rgba(11,18,32,.78); box-shadow:0 8px 18px rgba(2,6,23,.45); }
    .fill-input-group{ display:flex; align-items:center; gap:.5rem; width:100%; }
    .fill-input-group input[type="color"]{ width:52px; height:34px; padding:0; border-radius:.45rem; border:1px solid var(--border); background:#0b1220; }
    .fill-transparent-toggle{ display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; color:var(--muted); cursor:pointer; }
    .fill-transparent-toggle input{ width:auto; height:auto; }
    .tool-settings-grid[hidden]{ display:none; }
    .tool-setting span{ font-size:.85rem; color:var(--muted); }
    .tool-setting input[type="color"]{ width:52px; height:34px; padding:0; border-radius:.45rem; border:1px solid var(--border); background:#0b1220; }
    .tool-setting input[type="number"]{ width:100%; max-width:140px; background:#0b1220; color:var(--txt); border:1px solid var(--border); padding:.35rem .45rem; border-radius:.45rem; }
    .tool-setting select{ width:100%; background:#0b1220; color:var(--txt); border:1px solid var(--border); padding:.35rem .45rem; border-radius:.45rem; }
    .toolbar-section { position:relative; }
    .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; padding:0; font-size:.9rem; }
    @media (max-width: 720px){
      .draw-toolbar{ flex-wrap:wrap; gap:.45rem; }
      .draw-toolbar-actions{ flex:1 1 100%; justify-content:flex-start; flex-wrap:wrap; }
      .draw-toolbar-actions .btn{ flex:1 1 auto; }
      .draw-toolbar-divider{ display:none; }
      .tool-settings-popover{ position:fixed; top:auto; bottom:16px; right:16px; left:16px; width:auto; }
      .tool-settings-grid{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
    }
    header label { display:flex; align-items:center; gap:.4rem; }
    .header-pages { display:flex; flex:0 0 auto; }
    #hostBtn,
    #joinBtn { font-weight:600; letter-spacing:.01em; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
    #hostBtn[data-state="idle"]{ background:linear-gradient(120deg, rgba(22,163,74,.24), rgba(6,95,70,.32)); border-color:#16a34a; color:#ecfdf5; box-shadow:0 0 0 1px rgba(34,197,94,.35) inset, 0 0 12px rgba(16,185,129,.18); }
    #hostBtn[data-state="idle"]:hover,
    #hostBtn[data-state="idle"]:focus-visible{ background:linear-gradient(120deg, rgba(22,163,74,.33), rgba(6,95,70,.38)); }
    #hostBtn[data-state="pending"]{ background:linear-gradient(120deg, rgba(250,204,21,.28), rgba(234,179,8,.2)); border-color:#facc15; color:#fef9c3; box-shadow:0 0 0 1px rgba(250,204,21,.32) inset; }
    #hostBtn[data-state="active"]{ background:linear-gradient(120deg, rgba(34,197,94,.38), rgba(6,78,59,.45)); border-color:#22c55e; color:#d1fae5; box-shadow:0 0 0 1px rgba(34,197,94,.5) inset, 0 0 14px rgba(34,197,94,.35); }
    #hostBtn[data-state="active"]:hover,
    #hostBtn[data-state="active"]:focus-visible{ background:linear-gradient(120deg, rgba(34,197,94,.48), rgba(6,78,59,.55)); }
    #hostBtn[data-state="error"]{ background:linear-gradient(120deg, rgba(248,113,113,.28), rgba(185,28,28,.32)); border-color:#f87171; color:#fecaca; }
    #hostBtn[disabled],
    #joinBtn[disabled]{ cursor:progress; opacity:.75; }
    #joinBtn[data-state="idle"]{ background:linear-gradient(120deg, rgba(59,130,246,.22), rgba(37,99,235,.28)); border-color:#3b82f6; color:#dbeafe; box-shadow:0 0 0 1px rgba(59,130,246,.32) inset; }
    #joinBtn[data-state="idle"]:hover,
    #joinBtn[data-state="idle"]:focus-visible{ background:linear-gradient(120deg, rgba(59,130,246,.32), rgba(37,99,235,.34)); }
    #joinBtn[data-state="pending"]{ background:linear-gradient(120deg, rgba(250,204,21,.24), rgba(234,179,8,.18)); border-color:#facc15; color:#fef3c7; box-shadow:0 0 0 1px rgba(250,204,21,.28) inset; }
    #joinBtn[data-state="active"]{ background:linear-gradient(120deg, rgba(14,165,233,.28), rgba(8,145,178,.32)); border-color:#0ea5e9; color:#bae6fd; box-shadow:0 0 0 1px rgba(14,165,233,.42) inset, 0 0 12px rgba(14,165,233,.28); }
    #joinBtn[data-state="active"]:hover,
    #joinBtn[data-state="active"]:focus-visible{ background:linear-gradient(120deg, rgba(14,165,233,.36), rgba(8,145,178,.38)); }
    #joinBtn[data-state="error"]{ background:linear-gradient(120deg, rgba(248,113,113,.26), rgba(220,38,38,.3)); border-color:#f87171; color:#fecaca; }
    header input[type="text"], header input[type="number"] { background:#0b1220; color:var(--txt); border:1px solid var(--border); padding:.35rem .5rem; height:28px; }
    header input::placeholder { color:#cbd5e1; opacity:.8; }
    header input[type="color"] { width:40px; height:28px; padding:0; border-radius:.35rem; }
    header .btn { cursor:pointer; user-select:none; }
    header .btn[disabled] { opacity:.5; cursor:not-allowed; }
    .status-indicator{ justify-self:end; display:flex; }
    .status-btn{ position:relative; border:1px solid var(--border); background:var(--panel); color:var(--muted); padding:.35rem .75rem; border-radius:.55rem; font-size:0.9rem; line-height:1; font-weight:500; display:inline-flex; align-items:center; gap:.45rem; box-shadow:var(--shadow-soft); transition:box-shadow .2s ease, border-color .2s ease, color .2s ease; }
    .status-btn::before{ content:''; width:.65rem; height:.65rem; border-radius:50%; background:#f97316; box-shadow:0 0 0 2px rgba(249,115,22,.22); transition:background .15s ease, box-shadow .15s ease, transform .15s ease; }
    .status-btn:hover,
    .status-btn:focus-visible{ background:var(--panel-hover); border-color:#c7d0df; }
    #status[data-state="connected"] .status-btn{ color:#047857; }
    #status[data-state="connected"] .status-btn::before{ background:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.2); }
    #status[data-state="pending"] .status-btn::before{ background:#facc15; box-shadow:0 0 0 2px rgba(250,204,21,.22); }
    #status[data-state="locked"] .status-btn::before{ background:#fb923c; box-shadow:0 0 0 2px rgba(251,146,60,.22); }
    #status[data-state="error"] .status-btn{ color:#b91c1c; }
    #status[data-state="error"] .status-btn::before{ background:#f87171; box-shadow:0 0 0 2px rgba(248,113,113,.22); }
    #status[data-alert="true"] .status-btn{ color:#b45309; border-color:#facc15; animation:statusAlert 1.4s ease-in-out infinite; }
    #status[data-alert="true"] .status-btn::before{ background:#facc15; box-shadow:0 0 0 4px rgba(250,204,21,.28); animation:statusDot 1.4s ease-in-out infinite; }
    @keyframes statusAlert{
      0%,100%{ box-shadow:var(--shadow-soft); transform:translateY(0); }
      50%{ box-shadow:0 0 0 6px rgba(250,204,21,.24); transform:translateY(-1px); }
    }
    @keyframes statusDot{
      0%,100%{ transform:scale(1); }
      50%{ transform:scale(1.35); }
    }
    header[data-collapsed="true"] .toolbar-controls { display:none; }
    header[data-collapsed="true"] .header-pages { display:none; }
    header[data-collapsed="true"] .header-status { justify-self:end; }
    #menuToggle { display:inline-flex; justify-content:center; align-items:center; gap:.35rem; }
    header[data-role="host"] { box-shadow: 0 0 0 2px rgba(22,163,74,0.35); }
    header[data-role="host"] #menuToggle,
    header[data-role="host"] .toolbar-controls button,
    header[data-role="host"] .toolbar-controls label,
    header[data-role="host"] .toolbar-controls .pill,
    header[data-role="host"] .header-pages .btn { border-color:#16a34a; }
    header[data-role="host"] .toolbar-nav .tab-btn { border-color:#16a34a; box-shadow:0 2px 8px rgba(16,185,129,.18); }
    header[data-role="host"] .toolbar-nav .tab-btn.active { border-color:#15803d; background:linear-gradient(135deg, rgba(34,197,94,.9), rgba(13,148,136,.85)); color:#f0fdf4; box-shadow:0 8px 18px rgba(13,148,136,.24); }
    header[data-role="host"] strong { color:#34d399; }
    header[data-role="host"] #status .status-btn{ border-color:#16a34a; }
    header[data-collapsed="true"] .toolbar-nav { display:none; }
    .toolbar-section { display:none; gap:.6rem; align-items:center; flex-wrap:nowrap; min-width:0; }
    .toolbar-controls[data-active="session"] .toolbar-section[data-section="session"] { display:flex; }
    .toolbar-controls[data-active="draw"] .toolbar-section[data-section="draw"] { display:flex; }
    .toolbar-controls[data-active="options"] .toolbar-section[data-section="options"] { display:flex; }
    @media (max-width: 1200px){
      header {
        grid-template-columns:auto minmax(0,1fr) auto;
        grid-template-areas:
          "menu nav status"
          "pages controls status";
        grid-auto-rows:auto;
        row-gap:.35rem;
        align-items:start;
      }
      #menuToggle { grid-area:menu; }
      header .toolbar-nav {
        grid-area:nav;
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:.35rem;
      }
      header .toolbar-nav::after { display:none; }
      header .toolbar-controls {
        grid-area:controls;
        justify-content:flex-start;
        flex-wrap:wrap;
        row-gap:.3rem;
        column-gap:.5rem;
        overflow-x:visible;
        padding-bottom:.15rem;
      }
      header .toolbar-controls > * {
        flex:0 1 210px;
        min-width:160px;
      }
      .header-pages {
        grid-area:pages;
        justify-self:flex-start;
      }
      .header-status {
        grid-area:status;
        justify-self:flex-end;
        gap:.3rem;
        align-items:center;
        flex-wrap:nowrap;
      }
      .header-status .btn { white-space:nowrap; }
    }
    @media (max-width: 960px){
      header {
        grid-template-columns:1fr;
        grid-template-areas:
          "menu"
          "nav"
          "controls"
          "pages"
          "status";
      }
      .header-status {
        justify-content:space-between;
        flex-wrap:wrap;
        gap:.3rem;
      }
    }
    .hidden { display:none !important; }
    .board { position:relative; height: 100%; overflow:auto; background:#0b1220; }
    .board.guest-view { box-shadow: inset 0 0 0 2px rgba(59,130,246,.45); }
    .board.guest-view::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius:16px;
      border:2px solid rgba(59,130,246,.65);
      box-shadow:0 0 0 4px rgba(59,130,246,.18), 0 32px 68px rgba(15,23,42,.28);
    }
    .board-restore-btn{
      position:absolute;
      top:1rem;
      right:1rem;
      width:38px;
      height:38px;
      display:none;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      background:rgba(15,23,42,.78);
      border:1px solid rgba(148,163,184,.45);
      color:#f8fafc;
      box-shadow:0 10px 30px rgba(15,23,42,.55);
      backdrop-filter:blur(6px);
      transition:opacity .2s ease, transform .2s ease;
      cursor:pointer;
      opacity:0;
      pointer-events:none;
      padding:0;
    }
    .board-restore-btn::before{
      content:"↺";
      font-size:18px;
      line-height:1;
    }
    body[data-board-expanded="true"] .board-restore-btn{
      display:inline-flex;
      opacity:.85;
      pointer-events:auto;
    }
    body[data-board-expanded="true"] .board-restore-btn:hover,
    body[data-board-expanded="true"] .board-restore-btn:focus-visible{
      opacity:1;
      border-color:rgba(148,163,184,.75);
      outline:2px solid rgba(148,163,184,.55);
      outline-offset:2px;
    }
    body[data-board-expanded="true"] .board-restore-btn:active{
      transform:scale(.96);
    }
    body[data-theme="light"] .board-restore-btn{
      background:rgba(248,250,252,.92);
      border-color:rgba(148,163,184,.35);
      color:#1f2937;
      box-shadow:0 10px 30px rgba(15,23,42,.2);
    }
    body[data-theme="light"][data-board-expanded="true"] .board-restore-btn:hover,
    body[data-theme="light"][data-board-expanded="true"] .board-restore-btn:focus-visible{
      border-color:rgba(59,130,246,.5);
      outline:2px solid rgba(59,130,246,.4);
      outline-offset:2px;
    }
    .view-toggle{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; font-size:13px; }
    .view-toggle[data-active="true"]{ background:linear-gradient(120deg, rgba(22,163,74,.3), rgba(6,95,70,.35)); border-color:#16a34a; color:#d1fae5; box-shadow:0 0 0 1px rgba(34,197,94,.4) inset, 0 0 12px rgba(34,197,94,.32); }
    body[data-board-expanded="true"] header { display:none; }
    body[data-board-expanded="true"] .wrap { grid-template-rows: 1fr; }
    body[data-board-expanded="true"] .board { height:100dvh; }
    #canvas { width:100%; display:block; background:#0b1220; touch-action: none; cursor: crosshair; }
    #canvas.erase-mode { cursor:none; }
    .image-overlay{
      position:absolute;
      border:1px dashed rgba(59,130,246,.85);
      border-radius:.6rem;
      box-shadow:0 0 0 1px rgba(59,130,246,.35) inset, 0 12px 32px rgba(15,23,42,.45);
      cursor:move;
      z-index:25;
      touch-action:none;
      user-select:none;
      background:rgba(15,23,42,.24);
      backdrop-filter:blur(0);
    }
    .image-overlay[data-dragging="true"]{ cursor:grabbing; }
    .image-overlay-img{
      width:100%;
      height:100%;
      object-fit:contain;
      pointer-events:none;
      border-radius:inherit;
      display:block;
    }
    .image-overlay-handle{
      position:absolute;
      width:16px;
      height:16px;
      border-radius:50%;
      background:rgba(59,130,246,.95);
      border:2px solid #e0f2fe;
      box-shadow:0 0 0 1px rgba(15,23,42,.5);
      pointer-events:auto;
      touch-action:none;
    }
    .image-overlay-handle:hover,
    .image-overlay-handle:focus-visible{
      background:rgba(37,99,235,.95);
    }
    .image-overlay-handle-nw{ top:-10px; left:-10px; cursor:nwse-resize; }
    .image-overlay-handle-ne{ top:-10px; right:-10px; cursor:nesw-resize; }
    .image-overlay-handle-sw{ bottom:-10px; left:-10px; cursor:nesw-resize; }
    .image-overlay-handle-se{ bottom:-10px; right:-10px; cursor:nwse-resize; }
    #eraserCursor {
      position:fixed;
      left:-1000px;
      top:-1000px;
      width:20px;
      height:20px;
      border:2px solid rgba(255,255,255,.8);
      border-radius:50%;
      pointer-events:none;
      mix-blend-mode:difference;
      z-index:200;
      transition:width .08s ease, height .08s ease, border-color .08s ease;
      opacity:0;
      transform:translate(-50%, -50%);
    }
    #canvas.erase-mode + #eraserCursor { opacity:1; }
    .sep { width:1px; height:28px; background:var(--border); margin:0 .25rem; display:inline-block; }
    .chip { font-variant-numeric: tabular-nums; color:#a7f3d0; border-color:#065f46; }
    .pill { border-radius:999px; padding:.25rem .6rem; border:1px solid #065f46; background:#042f2e; }
    .kbd { padding:.1rem .35rem; border:1px solid var(--border); border-bottom-width:2px; border-radius:.35rem; background:#0b1220; color:#e5e7eb; }
    .qr-meta .copy-btn { margin-top:.65rem; align-self:flex-start; background:linear-gradient(120deg, rgba(59,130,246,.22), rgba(37,99,235,.28)); border-color:#3b82f6; color:#dbeafe; box-shadow:0 0 0 1px rgba(59,130,246,.28) inset; }
    .qr-meta .copy-btn:hover,
    .qr-meta .copy-btn:focus-visible{ background:linear-gradient(120deg, rgba(59,130,246,.32), rgba(37,99,235,.35)); }
    .qr-meta .copy-btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }
    .qr-url { margin-top:.45rem; padding:.45rem .55rem; background:#0b1220; border:1px solid var(--border); border-radius:.45rem; word-break:break-word; color:var(--txt); cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease; }
    .qr-url:hover{ border-color:#3b82f6; }
    .qr-url:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; border-color:#3b82f6; }
    .qr-url.disabled{ cursor:not-allowed; opacity:.6; border-style:dashed; color:var(--muted); }
    .copy-feedback{ font-size:.8rem; margin-top:.3rem; color:#bbf7d0; transition:opacity .2s ease; }
    .copy-feedback.hidden{ opacity:0; height:0; overflow:hidden; margin-top:0; }
    .copy-feedback.error{ color:#fecaca; }
    .page-panel{ position:fixed; top:72px; right:16px; width:min(360px, 92vw); background:rgba(15,23,42,.97); border:1px solid rgba(59, 130, 246, .35); border-radius:18px; box-shadow:0 24px 48px rgba(2,6,23,.55); padding:.75rem; display:flex; flex-direction:column; gap:.5rem; z-index:40; transition:opacity .2s ease, transform .2s ease; backdrop-filter:blur(10px); }
    .page-panel[hidden]{ display:none; }
    .page-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; cursor:grab; user-select:none; touch-action:none; }
    .page-panel[data-dragging="true"] .page-panel-head{ cursor:grabbing; }
    .page-panel-head strong{ font-size:14px; letter-spacing:.02em; }
    .page-panel .page-tools{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
    .page-panel .page-tools .btn{ padding:.35rem .6rem; font-size:13px; }
    .page-thumbnails{ display:grid; gap:.55rem; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); grid-auto-rows:minmax(82px, auto); overflow-y:auto; overflow-x:hidden; padding:.4rem .45rem; max-height:50vh; }
    .page-thumb-wrap{ position:relative; display:flex; }
    .page-thumb{ position:relative; width:100%; aspect-ratio:4 / 3; border:1px solid var(--border); border-radius:.55rem; background:#0f172a; cursor:pointer; display:block; overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
    .page-thumb[data-active="true"]{ border-color:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.25); transform:translateY(-2px); }
    .page-thumb img{ position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); object-fit:cover; border-radius:.45rem; pointer-events:none; }
    .page-thumb::before{ content:''; position:absolute; inset:6px; border-radius:.45rem; background:rgba(15,23,42,.75); opacity:.35; pointer-events:none; transition:opacity .2s ease; }
    .page-thumb[data-has-img="true"]::before{ opacity:0; }
    .page-thumb-label{ position:absolute; left:10px; bottom:8px; font-size:11px; color:#e2e8f0; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.75); pointer-events:none; }
    .page-thumb-delete{ position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; border:1px solid rgba(248,113,113,.6); background:rgba(185,28,28,.7); color:#fee2e2; font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .page-thumb-delete:hover,
    .page-thumb-delete:focus-visible{ background:rgba(220,38,38,.78); }
    .page-thumb-delete:focus-visible{ outline:2px solid rgba(248,113,113,.8); outline-offset:2px; }
    .page-thumb-delete[disabled]{ opacity:.5; cursor:not-allowed; }
    .page-thumbnails::-webkit-scrollbar{ width:6px; }
    .page-thumbnails::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35); border-radius:999px; }
    .page-empty-thumb{ position:absolute; inset:6px; border-radius:.45rem; background:linear-gradient(120deg, rgba(148,163,184,.2), rgba(100,116,139,.2)); display:flex; align-items:center; justify-content:center; color:#cbd5f5; font-size:11px; font-weight:600; }
    @media (max-width: 720px){
      .page-panel{ top:auto; bottom:16px; right:16px; width:min(320px, 92vw); }
      .page-panel .page-tools{ justify-content:space-between; }
      .page-panel .page-tools .btn{ flex:0 1 auto; }
      .page-thumbnails{ gap:.35rem; }
      .page-thumb{ width:68px; height:48px; }
    }

    .guest-panel{ position:fixed; top:72px; right:16px; width:min(340px, 92vw); background:var(--panel); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-elevated); padding:.75rem; display:flex; flex-direction:column; gap:.6rem; z-index:45; transition:opacity .2s ease, transform .2s ease; }
    .guest-panel[hidden]{ display:none; }
    .guest-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
    .guest-panel-actions{ display:flex; align-items:center; gap:.35rem; }
    .guest-toggle-all{ display:flex; align-items:center; gap:.45rem; font-size:.9rem; color:var(--muted); }
    .guest-toggle-all input{ width:auto; height:auto; }
    .guest-list{ display:flex; flex-direction:column; gap:.55rem; max-height:45vh; overflow:auto; padding-right:.1rem; }
    .guest-row{ padding:.6rem .7rem; border:1px solid var(--border); border-radius:.65rem; background:var(--panel); box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:.45rem; }
    .guest-row-title{ font-weight:600; color:var(--txt-strong); font-size:.95rem; }
    .guest-row-controls{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
    .guest-permission-toggle{ display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; color:var(--muted); }
    .guest-permission-toggle input{ width:auto; height:auto; }
    .guest-row-locked .guest-permission-toggle span{ color:#b91c1c; }
    .guest-row:not(.guest-row-locked) .guest-permission-toggle span{ color:#166534; }
    .guest-row-request{ border-color:#facc15; background:var(--accent-yellow-soft); animation:guestRequestPulse 1.4s ease-in-out infinite; }
    .guest-row-request .guest-row-title{ color:#92400e; }
    .guest-request-badge{ display:inline-block; align-self:flex-start; font-size:.75rem; font-weight:600; color:#92400e; background:#fef3c7; border-radius:999px; padding:.15rem .6rem; }
    .guest-empty{ font-size:.9rem; color:var(--muted); margin:0; }
    @media (max-width: 720px){
      .guest-panel{ top:auto; bottom:16px; right:16px; left:16px; width:auto; }
      .guest-list{ max-height:38vh; }
    }
    .guest-self-field{ display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; color:var(--muted); }
    .guest-self-field span{ font-weight:600; color:var(--txt-strong); }
    .guest-self-field input{ width:100%; padding:.35rem .5rem; border:1px solid var(--border); border-radius:.5rem; background:var(--panel); color:var(--txt); box-shadow:var(--shadow-soft); }
    .guest-self-field input:disabled{ opacity:.6; box-shadow:none; cursor:not-allowed; }
    .guest-self-field input:focus{ outline:2px solid rgba(59,130,246,.28); outline-offset:2px; }
    .guest-request-btn{ align-self:flex-start; background:linear-gradient(135deg, rgba(14,165,233,.2), rgba(59,130,246,.24)); border-color:#3b82f6; color:#1e3a8a; box-shadow:0 0 0 1px rgba(59,130,246,.2) inset; }
    .guest-request-btn.pending{ background:linear-gradient(135deg, rgba(250,204,21,.28), rgba(234,179,8,.2)); border-color:#facc15; color:#92400e; box-shadow:0 0 0 1px rgba(250,204,21,.24) inset; }
    .guest-request-btn.granted{ background:linear-gradient(135deg, rgba(34,197,94,.28), rgba(16,185,129,.24)); border-color:#22c55e; color:#14532d; box-shadow:0 0 0 1px rgba(34,197,94,.22) inset; }
    .guest-request-btn:disabled{ opacity:.65; cursor:not-allowed; box-shadow:none; }
    .guest-request-hint{ font-size:.85rem; color:var(--muted); margin:0; }
    @keyframes guestRequestPulse{
      0%,100%{ box-shadow:0 0 0 0 rgba(250,204,21,.18); }
      50%{ box-shadow:0 0 0 10px rgba(250,204,21,.1); }
    }

    /* QR overlay */
    .qr-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.65); z-index:50; }
    .qr-card{ background:#0b1220; border:1px solid var(--border); padding:1rem; border-radius:12px; width:min(92vw,420px); }
    .qr-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
    .qr-box{ display:flex; justify-content:center; padding:1rem; background:#fff; border-radius:12px; }
    .qr-meta{ font-size:.9rem; color:var(--muted); margin-top:.5rem; word-break:break-all; display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; }

    /* Light theme refresh */
    body{ background:var(--bg); color:var(--txt); }
    header{ background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,246,250,.9)); color:var(--txt); box-shadow:0 1px 0 rgba(15,23,42,.08); }
    header strong{ color:var(--txt-strong); }
    #menuToggle,
    header .toolbar-controls button,
    header .toolbar-controls label,
    header .toolbar-controls .pill,
    header .header-pages .btn{ background:var(--panel); color:var(--txt); border-color:var(--border); box-shadow:var(--shadow-soft); }
    #menuToggle:hover,
    #menuToggle:focus-visible,
    header .toolbar-controls button:hover,
    header .toolbar-controls button:focus-visible,
    header .toolbar-controls label:hover,
    header .toolbar-controls label:focus-visible,
    header .header-pages .btn:hover,
    header .header-pages .btn:focus-visible{ background:var(--panel-hover); border-color:#c7d0df; color:var(--txt); }
    header .toolbar-controls .pill{ background:var(--panel-muted); border-color:#cbd5e1; color:var(--txt); }
    header .toolbar-controls label:not(.tool-setting){ color:var(--txt); }
    header .toolbar-nav .tab-btn{ background:linear-gradient(135deg, rgba(191,219,254,.55), rgba(191,219,254,.35)); border-color:#60a5fa; color:#1d4ed8; box-shadow:0 4px 12px rgba(59,130,246,.16); }
    header .toolbar-nav .tab-btn.active{ color:#0f172a; border-color:#2563eb; background:linear-gradient(135deg, rgba(96,165,250,.95), rgba(59,130,246,.85)); box-shadow:0 8px 18px rgba(37,99,235,.22); }
    header input[type="text"],
    header input[type="number"]{ background:var(--panel); color:var(--txt); border-color:var(--border); }
    header input::placeholder{ color:#94a3b8; }
    header input[type="color"]{ background:var(--panel); border:1px solid var(--border); }
    .tool-group .tool-btn{ background:var(--panel); color:var(--muted); border-color:var(--border); box-shadow:var(--shadow-soft); }
    .tool-group .tool-btn[aria-pressed="true"]{ border-color:#22c55e; background:var(--accent-green-soft); box-shadow:0 0 0 1px rgba(34,197,94,.18) inset; color:#166534; }
    .tool-settings-popover{ background:var(--panel); border:1px solid rgba(34,197,94,.18); box-shadow:var(--shadow-elevated); color:var(--txt); }
    #toolSettingsPin[aria-pressed="true"]{ border-color:#22c55e; color:#166534; background:var(--accent-green-soft); box-shadow:0 0 0 1px rgba(34,197,94,.18) inset; }
    #toolSettingsPanel[data-pinned="true"]{ border-color:rgba(37,99,235,.28); box-shadow:0 24px 48px rgba(37,99,235,.18); }
    #toolSettingsPanel[data-pinned="true"] .tool-settings-head strong{ color:#1d4ed8; }
    .tool-settings-head strong{ color:var(--txt-strong); }
    .tool-settings-tabs .btn{ background:var(--panel-muted); border-color:var(--border); color:var(--muted); }
    .tool-settings-tabs .btn[aria-selected="true"],
    .tool-settings-tabs .tool-btn.active{ background:var(--accent-green-soft); border-color:#22c55e; color:#166534; box-shadow:0 0 0 1px rgba(34,197,94,.18) inset; }
    .tool-setting{ background:var(--panel); border-color:var(--border); box-shadow:var(--shadow-soft); color:var(--txt); }
    .tool-setting span{ color:var(--muted); }
    .tool-setting input[type="color"],
    .tool-setting input[type="number"],
    .tool-setting select,
    .fill-input-group input[type="color"]{ background:var(--panel); color:var(--txt); border-color:var(--border); }
    .tool-setting input[type="number"]::placeholder{ color:#94a3b8; }
    header[data-role="host"]{ box-shadow:0 0 0 2px rgba(34,197,94,.18); }
    header[data-role="host"] #menuToggle,
    header[data-role="host"] .toolbar-controls button,
    header[data-role="host"] .toolbar-controls label,
    header[data-role="host"] .toolbar-controls .pill,
    header[data-role="host"] .header-pages .btn{ border-color:#22c55e; }
    header[data-role="host"] strong{ color:#047857; }
    header[data-role="host"] .toolbar-nav .tab-btn{ border-color:#16a34a; box-shadow:0 4px 14px rgba(34,197,94,.18); }
    header[data-role="host"] .toolbar-nav .tab-btn.active{ background:linear-gradient(135deg, rgba(134,239,172,.9), rgba(74,222,128,.85)); color:#14532d; border-color:#16a34a; box-shadow:0 10px 22px rgba(22,163,74,.24); }
    #hostBtn[data-state="idle"]{ background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(16,185,129,.28)); border-color:#22c55e; color:#14532d; box-shadow:0 0 0 1px rgba(34,197,94,.16) inset; }
    #hostBtn[data-state="idle"]:hover,
    #hostBtn[data-state="idle"]:focus-visible{ background:linear-gradient(135deg, rgba(34,197,94,.24), rgba(16,185,129,.32)); }
    #hostBtn[data-state="pending"]{ background:linear-gradient(135deg, rgba(250,204,21,.22), rgba(234,179,8,.18)); border-color:#facc15; color:#b45309; box-shadow:0 0 0 1px rgba(250,204,21,.22) inset; }
    #hostBtn[data-state="active"]{ background:linear-gradient(135deg, rgba(34,197,94,.32), rgba(6,95,70,.32)); border-color:#16a34a; color:#0f5132; box-shadow:0 0 0 1px rgba(34,197,94,.2) inset; }
    #hostBtn[data-state="active"]:hover,
    #hostBtn[data-state="active"]:focus-visible{ background:linear-gradient(135deg, rgba(34,197,94,.38), rgba(6,95,70,.4)); }
    #hostBtn[data-state="error"]{ background:linear-gradient(135deg, rgba(248,113,113,.22), rgba(185,28,28,.26)); border-color:#f87171; color:#b91c1c; }
    #joinBtn[data-state="idle"]{ background:linear-gradient(135deg, rgba(59,130,246,.16), rgba(37,99,235,.24)); border-color:#3b82f6; color:#1e3a8a; box-shadow:0 0 0 1px rgba(59,130,246,.18) inset; }
    #joinBtn[data-state="idle"]:hover,
    #joinBtn[data-state="idle"]:focus-visible{ background:linear-gradient(135deg, rgba(59,130,246,.24), rgba(37,99,235,.3)); }
    #joinBtn[data-state="pending"]{ background:linear-gradient(135deg, rgba(250,204,21,.2), rgba(234,179,8,.16)); border-color:#facc15; color:#b45309; }
    #joinBtn[data-state="active"]{ background:linear-gradient(135deg, rgba(14,165,233,.26), rgba(8,145,178,.3)); border-color:#0ea5e9; color:#0f4c75; box-shadow:0 0 0 1px rgba(14,165,233,.24) inset; }
    #joinBtn[data-state="active"]:hover,
    #joinBtn[data-state="active"]:focus-visible{ background:linear-gradient(135deg, rgba(14,165,233,.32), rgba(8,145,178,.34)); }
    #joinBtn[data-state="error"]{ background:linear-gradient(135deg, rgba(248,113,113,.22), rgba(220,38,38,.26)); border-color:#f87171; color:#b91c1c; }
    #qrBtn{
      position:relative;
      background:linear-gradient(135deg, rgba(59,130,246,.92), rgba(14,165,233,.88));
      color:#f8fafc;
      border-color:#1d4ed8;
      box-shadow:0 10px 24px rgba(29,78,216,.32);
      font-weight:600;
    }
    #qrBtn::after{
      content:"";
      position:absolute;
      inset:-4px;
      border-radius:inherit;
      border:2px solid rgba(96,165,250,.45);
      opacity:0;
      animation:qrPulse 2.4s ease-in-out infinite;
      pointer-events:none;
    }
    #qrBtn:hover,
    #qrBtn:focus-visible{
      background:linear-gradient(135deg, rgba(37,99,235,.92), rgba(14,165,233,.92));
      border-color:#2563eb;
      box-shadow:0 12px 28px rgba(29,78,216,.38);
      outline:none;
    }
    @keyframes qrPulse{
      0%{ opacity:.78; transform:scale(.94); }
      55%{ opacity:0; transform:scale(1.18); }
      100%{ opacity:0; transform:scale(1.18); }
    }
    header[data-collapsed="true"] .header-pages{ display:none; }
    .board{ background:var(--panel-muted); transition:background-color .2s ease; }
    .board.guest-view{ background:#e7edf9; }
    .board.guest-view.board-has-gap{
      background:#dce6ff;
      background-image:linear-gradient(135deg, rgba(148,163,184,.18) 0, rgba(226,232,240,.18) 12px);
      background-size:28px 28px;
    }
    .board.guest-view #canvas{
      box-shadow:0 0 0 2px rgba(59,130,246,.45);
    }
    .board.guest-view.board-has-gap #canvas{
      box-shadow:
        0 0 0 2px rgba(37,99,235,.75),
        0 18px 40px rgba(15,23,42,.24),
        0 0 0 9999px rgba(59,130,246,.12);
    }
    #canvas{ background:#fff; }
    .view-toggle{ background:var(--panel); border-color:var(--border); color:var(--muted); box-shadow:var(--shadow-soft); }
    .view-toggle[data-active="true"]{ background:var(--accent-green-soft); border-color:#22c55e; color:#14532d; box-shadow:0 0 0 1px rgba(34,197,94,.16) inset; }
    .image-overlay{ background:rgba(59,130,246,.06); border-color:rgba(59,130,246,.35); box-shadow:0 12px 32px rgba(15,23,42,.18); }
    .image-overlay-handle{ background:rgba(37,99,235,.9); border:2px solid #e0f2fe; box-shadow:0 0 0 1px rgba(15,23,42,.16); }
    .chip{ color:#0f5132; border-color:#86efac; background:#f0fdf4; }
    .pill{ border:1px solid #22c55e; background:var(--accent-green-soft); color:#166534; }
    .kbd{ background:var(--panel); color:var(--txt); border-color:var(--border); border-bottom-color:#c7d0df; }
    .qr-meta .copy-btn{ background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(37,99,235,.2)); border-color:#3b82f6; color:#1d4ed8; box-shadow:0 0 0 1px rgba(59,130,246,.18) inset; }
    .qr-card{ background:var(--panel); border-color:var(--border); box-shadow:var(--shadow-elevated); }
    .qr-url{ background:var(--panel); color:var(--txt); border-color:var(--border); }
    .qr-url:hover{ border-color:#3b82f6; }
    .page-panel{ background:rgba(255,255,255,.97); border-color:rgba(59,130,246,.2); box-shadow:var(--shadow-elevated); color:var(--txt); }
    .page-thumb{ background:#f1f5f9; border-color:var(--border); }
    .page-thumb::before{ background:rgba(148,163,184,.15); }
    .page-thumb-label{ color:var(--txt-strong); text-shadow:none; }
    .page-thumb-delete{ background:rgba(220,38,38,.12); color:#b91c1c; border-color:rgba(248,113,113,.4); }
    .page-empty-thumb{ background:linear-gradient(135deg, rgba(148,163,184,.12), rgba(100,116,139,.12)); color:#475569; }
    .qr-meta{ color:var(--muted); }
    .copy-feedback{ color:#0f5132; }
    .copy-feedback.error{ color:#b91c1c; }