*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #2a2a2e;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* ── Toolbar ── */
    #toolbar {
      background: #1e1e2e;
      color: #cdd6f4;
      padding: 0 10px;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      border-bottom: 1px solid #45475a;
      height: 44px;
    }
    .tb-lbl { font-size: 11px; color: #9399b2; white-space: nowrap; }
    .tb-sep { width: 1px; height: 24px; background: #45475a; margin: 0 3px; }
    .btn {
      background: #313244; border: 1px solid #45475a; border-radius: 4px;
      color: #cdd6f4; padding: 4px 10px; font-size: 12px; cursor: pointer;
      white-space: nowrap; user-select: none; line-height: 1;
    }
    .btn:hover { background: #45475a; }
    .btn.primary { background: #1e66f5; border-color: #1e66f5; color: #fff; }
    .btn.primary:hover { background: #2878ff; }
    .btn.active { background: #7287fd; border-color: #7287fd; color: #fff; }
    .btn.danger { border-color: #f38ba8; color: #f38ba8; }
    .btn.danger:hover { background: #f38ba8; color: #1e1e2e; }
    .btn.bold-btn { font-weight: 700; font-size: 13px; width: 30px; padding: 4px 0; text-align: center; }

    /* ── Font size stepper ── */
    .font-stepper {
      display: flex; align-items: stretch;
      border: 1px solid #45475a; border-radius: 4px;
      overflow: hidden; background: #313244;
    }
    .font-stepper:focus-within { border-color: #7287fd; }
    #size-inp {
      background: transparent; border: none; outline: none;
      color: #cdd6f4; font-size: 12px;
      width: 38px; text-align: center; padding: 0;
      -moz-appearance: textfield;
    }
    #size-inp::-webkit-outer-spin-button,
    #size-inp::-webkit-inner-spin-button { display: none; }
    .stepper-btns {
      display: flex; flex-direction: column;
      border-left: 1px solid #45475a;
    }
    .stepper-btn {
      background: #313244; border: none; color: #9399b2;
      cursor: pointer; padding: 0 5px; font-size: 7px;
      flex: 1; display: flex; align-items: center; justify-content: center;
      line-height: 1;
    }
    .stepper-btn:hover { background: #45475a; color: #cdd6f4; }
    .stepper-btn + .stepper-btn { border-top: 1px solid #45475a; }

    #box-props { display: none; align-items: center; gap: 5px; }
    #status { font-size: 11px; color: #6c7086; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

    /* ── Workspace ── */
    #workspace { flex: 1; display: flex; overflow: hidden; }

    /* ── Canvas ── */
    #canvas-wrap { flex: 1; overflow: auto; padding: 24px; }
    #canvas-sizer { position: relative; display: inline-block; }
    #canvas {
      display: flex; flex-direction: column;
      transform-origin: top left;
    }
    #canvas.empty {
      width: 595px; height: 842px; background: #f5f0e8;
      border: 2px dashed #666; display: flex; align-items: center;
      justify-content: center; color: #888; font-size: 15px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.7);
    }
    .page-layer {
      position: relative; flex-shrink: 0;
      box-shadow: 0 8px 32px rgba(0,0,0,0.7);
    }
    .page-layer + .page-layer { margin-top: 24px; }
    .page-layer .bg-img { display: block; width: 100%; pointer-events: none; user-select: none; }
    .page-layer .guides { position: absolute; inset: 0; pointer-events: none; z-index: 9999; }
    #bg-img { display: block; width: 100%; pointer-events: none; user-select: none; }

    /* ── Text box ── */
    .tbox { position: absolute; overflow: visible; }
    .tbox-bar {
      display: none; position: absolute; top: -18px; left: 0; right: 0;
      height: 16px; background: #1e66f5; border-radius: 3px 3px 0 0;
      padding: 0 6px; align-items: center; gap: 4px; cursor: grab;
      font-size: 9px; font-weight: 600; letter-spacing: 1px; color: #fff;
      user-select: none; text-transform: uppercase;
    }
    .tbox-bar:active { cursor: grabbing; }
    .tbox-bar-id { opacity: 0.7; }
    .tbox-bar-del {
      margin-left: auto; cursor: pointer; font-size: 11px;
      opacity: 0.8; line-height: 1;
    }
    .tbox-bar-del:hover { opacity: 1; }

    .tbox.sel { z-index: 10; }
    .tbox-inner {
      position: relative; min-height: 1.2em; word-break: break-word;
      outline: 1.5px dashed transparent; transition: outline-color 0.1s;
    }
    .tbox:hover .tbox-inner { outline-color: rgba(30,102,245,0.35); }
    .tbox.sel .tbox-inner { outline-color: #1e66f5; }
    .tbox.sel .tbox-bar { display: flex; }

    /* Resize handle — right edge (text) */
    .tbox-rh {
      position: absolute; right: -8px; top: 0; bottom: 0; width: 12px;
      cursor: ew-resize; display: flex; align-items: center; justify-content: center;
    }
    .tbox-rh::after {
      content: ''; width: 4px; height: 28px; min-height: 28px;
      background: #1e66f5; border-radius: 2px; opacity: 0; transition: opacity 0.15s;
    }
    .tbox:hover .tbox-rh::after { opacity: 0.4; }
    .tbox.sel .tbox-rh::after { opacity: 1; }

    /* Corner resize handle — bottom-right (shapes & images) */
    .tbox-crh {
      position: absolute; right: -8px; bottom: -8px; width: 14px; height: 14px;
      cursor: nwse-resize; z-index: 5;
    }
    .tbox-crh::after {
      content: ''; position: absolute; right: 1px; bottom: 1px;
      width: 8px; height: 8px; background: #1e66f5; border-radius: 2px;
      opacity: 0; transition: opacity 0.15s;
    }
    .tbox:hover .tbox-crh::after { opacity: 0.4; }
    .tbox.sel .tbox-crh::after { opacity: 1; }

    /* Shape inner */
    .tbox-shape-inner { height: 100%; min-height: unset !important; }
    .tbox-shape-inner svg { display: block; width: 100%; height: 100%; }

    /* Add-box dropdown */
    .add-wrap { position: relative; display: inline-flex; }
    .add-menu {
      display: none; position: absolute; top: calc(100% + 3px); left: 0;
      background: #313244; border: 1px solid #45475a; border-radius: 6px;
      z-index: 9999; min-width: 110px; padding: 4px 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    }
    .add-menu.open { display: block; }
    .add-menu-item {
      padding: 6px 12px; font-size: 12px; color: #cdd6f4; cursor: pointer;
      white-space: nowrap; user-select: none;
    }
    .add-menu-item:hover { background: #45475a; }

    /* Rendered markdown view */
    .tbox-view {
      cursor: text; min-height: 1em;
      line-height: 1.35; padding: 4px 6px;
    }
    .tbox-view p { margin: 0; }
    .tbox-view h1, .tbox-view h2, .tbox-view h3,
    .tbox-view h4, .tbox-view h5, .tbox-view h6 { margin: 0; line-height: 1.2; }
    .tbox-view ul, .tbox-view ol { margin: 0; padding-left: 1.2em; }

    /* Markdown source editor */
    .tbox-ed {
      display: none; width: 100%; background: transparent !important;
      border: 1px dashed rgba(30,102,245,0.6); border-radius: 2px; outline: none;
      resize: none; overflow: hidden; padding: 4px 6px;
      font-family: inherit;
      color: inherit; font-weight: inherit; line-height: 1.4;
      -webkit-appearance: none; appearance: none;
    }
    .tbox-ed:focus { background: rgba(255,255,255,0.98) !important; outline: none; }

    /* URL input for image boxes */
    .tbox-url-ed {
      display: none; width: 100%; box-sizing: border-box;
      background: rgba(255,255,255,0.95) !important; color: #111;
      border: 1px dashed rgba(30,102,245,0.6); border-radius: 2px; outline: none;
      padding: 4px 6px; font-size: 11px; font-family: monospace;
    }
    .tbox-img-view { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
    .tbox-img-view img { width: 100%; height: 100%; display: block; }
    .tbox-img-placeholder {
      width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
      font-size: 10px; color: #6c7086; border: 1px dashed #45475a; box-sizing: border-box;
    }

    /* ── Sidebar ── */
    #sidebar {
      width: 280px; flex-shrink: 0; border-left: 1px solid #313244;
      background: #181825; display: flex; flex-direction: column;
    }
    #sidebar.hidden { display: none !important; }
    #yaml-ta {
      flex: 1; background: #11111b; color: #a6e3a1; border: none; outline: none;
      padding: 10px; font-family: 'Menlo', 'Consolas', monospace;
      font-size: 10.5px; line-height: 1.6; resize: none; tab-size: 2;
    }
    #dep-tree {
      flex-shrink: 0; max-height: 30%; border-top: 1px solid #313244;
      overflow: hidden; background: #11111b; padding: 6px 4px 4px;
    }
    #dep-tree svg { display: block; width: 100%; }
    #dep-tree .dep-node { cursor: pointer; }
    #dep-tree .dep-node rect { fill: #1e1e2e; stroke: #45475a; stroke-width: 1; rx: 3; }
    #dep-tree .dep-node:hover rect { stroke: #89b4fa; }
    #dep-tree .dep-node text { fill: #cdd6f4; font: 9px Menlo,monospace; }

    /* ── Print ── */
    #print-container { display: none; }
    #print-container ul, #print-container ol { margin: 0; padding-left: 1.2em; }
    #print-container p { margin: 0; }

    @media print {
      @page { margin: 0; }
      body, html { display: block !important; overflow: visible !important; height: auto !important; background: white !important; }
      #toolbar, #sidebar { display: none !important; }
      #workspace { display: none !important; }
      #print-container { display: contents !important; }
      .pp, .print-page { display: block !important; page-break-after: always; break-after: page; }
      .pp:last-child, .print-page:last-child { page-break-after: avoid; break-after: avoid; }
      * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    }

    /* ── Mobile ── */
    @media (max-width: 768px) {
      #toolbar { position: static; height: auto !important; padding: 8px !important; gap: 6px !important; flex-wrap: wrap; }
      #workspace { position: static; }
      body { position: fixed; inset: 0; }
      .btn { padding: 7px 12px !important; font-size: 14px !important; }
      .btn.bold-btn { width: 38px !important; font-size: 15px !important; }
      .tb-lbl { font-size: 13px !important; }
      .tb-sep { height: 28px !important; }
      #size-inp { font-size: 14px !important; width: 48px !important; }
      .stepper-btn { font-size: 10px !important; padding: 0 6px !important; }
      #status { font-size: 13px !important; }
      .share-text { display: none; }

      /* Box props: fuera del toolbar, como panel flotante inferior al seleccionar */
      #box-props {
        display: none !important;
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
        background: #1e1e2e; border-top: 1px solid #45475a;
        padding: 8px; gap: 6px; flex-wrap: wrap;
      }
      #box-props.visible { display: flex !important; }
      #canvas-wrap { padding-bottom: var(--boxprops-h, 0px); }
    }

/* ── Directory listing ── */
#dir-listing {
  padding: 48px 56px;
  color: #cdd6f4;
  height: 100%;
  overflow-y: auto;
}
#dir-listing h1 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #cdd6f4;
}
#dir-listing ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
}
.dir-link {
  display: block;
  padding: 10px 16px;
  border-radius: 6px;
  background: #313244;
  color: #cdd6f4;
  text-decoration: none;
  font-size: 15px;
  border: 1px solid #45475a;
  transition: background 0.15s;
}
.dir-link:hover { background: #45475a; }