*, *::before, *::after { box-sizing: border-box; }
    :root { color-scheme: light dark; }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
      background: #111;
      color: #eee;
    }

    /* ── Header: two compact rows ── */
    header {
      flex: 0 0 auto;
      background: #1b1b1b;
      border-bottom: 1px solid #2a2a2a;
    }

    /* Each toolbar row scrolls horizontally instead of wrapping */
    .tb-row {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: #333 transparent;
      min-height: 44px;
      border-bottom: 1px solid #222;
    }
    .tb-row:last-child { border-bottom: none; }
    .tb-row::-webkit-scrollbar { height: 3px; }
    .tb-row::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

    /* Vertical separator between groups */
    .tb-sep {
      width: 1px;
      height: 26px;
      background: #2a2a2a;
      flex-shrink: 0;
      margin: 0 2px;
    }

    /* Compact group label */
    .tb-label {
      font-size: 10px;
      opacity: 0.55;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* Compact inline label */
    .inline-label {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    input, select {
      padding: 4px 6px;
      border-radius: 7px;
      border: 1px solid #333;
      background: #0f0f0f;
      color: #eee;
      outline: none;
      font-size: 11px;
      font-family: inherit;
    }
    input[type="number"] { width: 52px; }
    input[type="text"]   { width: 72px; }
    input[type="range"]  { width: 80px; accent-color: #7c5cff; padding: 0; }
    input[type="checkbox"] { width: auto; accent-color: #7c5cff; cursor: pointer; }
    input[type="color"] {
      width: 28px; height: 24px;
      padding: 1px; border-radius: 5px;
      border: 1px solid #333; background: #0f0f0f; cursor: pointer;
    }
    select { padding: 3px 5px; font-size: 11px; }

    .btn {
      padding: 5px 9px;
      border-radius: 8px;
      border: 1px solid #2f2f2f;
      color: white;
      font-weight: 700;
      font-size: 12px;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      flex-shrink: 0;
      font-family: inherit;
      line-height: 1.1;
    }
    .btn:active { transform: translateY(1px); }
    #newBtn     { background: #2a6df4; }
    #undoBtn    { background: #555; }
    #undoBtn:disabled { opacity: 0.35; cursor: not-allowed; }
    #frontBtn,#backBtn,#forwardBtn,#backwardBtn { background: #7c5cff; }
    #exportBtn  { background: #f59e0b; color: #111; border-color: #c0840b; }
    #saveJsonBtn { background: #0ea5e9; }
    #loadJsonBtn { background: #14b8a6; }
    #exportSvgBtn { background: #333; }
    #exportPdfBtn { background: #e74c3c; }
    #ghostBtn.ghost-active {
      background: #3a1a6e !important;
      border-color: #9b59b6 !important;
      box-shadow: 0 0 8px rgba(155,89,182,0.4);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid #2b2b2b;
      background: #0e0e0e;
      font-size: 11px;
      opacity: 0.9;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* Shape picker icons */
    .radio-row {
      display: flex;
      gap: 4px;
      align-items: center;
      flex-shrink: 0;
    }
    .radio-row input[type="radio"] { display: none; }
    .shape-icon {
      border-radius: 7px;
      border: 2px solid transparent;
      padding: 2px;
      transition: border-color 0.12s, transform 0.1s;
      display: block;
      background: #1a1a1a;
      cursor: pointer;
    }
    .shape-icon:hover { border-color: #555; transform: scale(1.08); }
    input[type="radio"]:checked + .shape-icon { border-color: #7c5cff; background: #1e1530; }
    .text-radio {
      display: flex;
      gap: 5px;
      align-items: center;
      font-size: 11px;
      cursor: pointer;
      white-space: nowrap;
    }
    .text-radio input[type="radio"] { accent-color: #7c5cff; cursor: pointer; }

    /* Z-order slider */
    .z-slider-wrap { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
    #zOrderSlider  { width: 90px; height: 16px; padding: 0; cursor: pointer; accent-color: #aaa; }
    .z-bar { width: 28px; height: 3px; border-radius: 2px; background: #555; transition: background 0.15s; }
    .z-bar.z-active { background: #7c5cff; height: 4px; }

    /* Arrow type buttons */
    .arrowTypeBtn {
      background: #1a1a1a; border: 2px solid #333; border-radius: 6px;
      padding: 3px 5px; cursor: pointer; line-height: 0; flex-shrink: 0;
    }
    .arrowTypeBtn.arrow-active { border-color: #7c5cff; background: #1e1530; }

    /* Command tabs (Actions / File / Canvas) */
    .command-tabs { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
    .command-tab {
      border: 1px solid #2b2b2b; background: #0e0e0e; color: #ddd;
      border-radius: 999px; padding: 3px 9px; font: inherit;
      font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
    }
    .command-tab.active { background: #2a2a2a; color: #fff; border-color: #444; }
    .command-panel { display: none; align-items: center; gap: 5px; flex-shrink: 0; }
    .command-panel.active { display: flex; }

    /* Pages group */
    #pagesGroup { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

    /* Hidden */
    .hidden { display: none !important; }
    .hidden-control { display: none !important; }
    .subtle { font-size: 11px; opacity: 0.8; white-space: nowrap; }

    /* ── Main canvas area fills remaining height ── */
    main {
      flex: 1 1 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 10px;
      min-height: 0;
    }

    #sketchRoot {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    canvas {
      border-radius: 12px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.5);
      border: 1px solid #2a2a2a;
      /* CSS scaling — canvas pixel size stays fixed, display size scales */
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    /* Fullscreen */
    #sketchRoot:fullscreen {
      background: #000;
      width: 100vw; height: 100vh;
    }
    #sketchRoot:fullscreen canvas {
      border-radius: 0; border: none; box-shadow: none;
      max-width: 100vw; max-height: 100vh;
      width: auto !important; height: auto !important;
    }

    /* Fixed Text Box Editor */
    #tbPanel {
      position: fixed; right: 14px; bottom: 14px;
      width: 420px; max-width: calc(100vw - 28px);
      max-height: calc(100vh - 28px); overflow-y: auto;
      background: #101010; border: 1px solid #2a2a2a;
      border-radius: 16px; padding: 12px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.55); z-index: 9999;
    }
    #tbPanel.hidden  { display: none !important; }
    #tbPanel.dragging { opacity: 0.15; pointer-events: none; }
    #tbPanel { transition: opacity 0.15s ease; }
    #tbPanel h3 { cursor: move; margin: 0 0 8px; font-size: 14px; opacity: 0.95; }
    #tbPanel .tbRow { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
    #tbPanel .tbRow label { width: 120px; }
    #tbPanel textarea {
      width: 100%; min-height: 140px; resize: none;
      padding: 10px; border-radius: 12px; border: 1px solid #333;
      background: #0b0b0b; color: #eee; outline: none;
      font-family: inherit; line-height: 1.25; box-sizing: border-box;
    }
    #tbPanel .tbActions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
    #tbPanel .tbActions .btn { padding: 8px 12px; }
    #tbStatus { font-size: 12px; opacity: 0.8; margin-left: auto; white-space: nowrap; }

    /* Missing images notification */
    #missingImagesPanel {
      flex: 0 0 auto;
      display: none;
      background: #1a1200;
      border-bottom: 2px solid #f59e0b;
      padding: 6px 14px;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }