:root {
      --bg: #f6f7fb;
      --panel: #ffffff;
      --text: #1f2937;
      --muted: #6b7280;
      --border: #e5e7eb;
      --accent: #111827;
      --shadow: 0 10px 30px rgba(15, 23, 42, .08);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow: hidden;
    }
    button, input, textarea { font: inherit; }
    .app { display: grid; grid-template-columns: 230px minmax(0, 1fr) 220px; height: 100vh; min-height: 0; overflow: hidden; }
    .sidebar {
      background: var(--panel);
      border-right: 1px solid var(--border);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      z-index: 10;      min-height: 0;
      height: 100vh;
      max-height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior-y: contain;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
    }
    .brand { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
    .sub { color: var(--muted); font-size: 12px; line-height: 1.4; }
    .project-input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      outline: none;
    }
    .project-input:focus { border-color: #9ca3af; }
    .project-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; }
    .project-modal { position:fixed; inset:0; z-index:100; background:rgba(15,23,42,.32); display:flex; align-items:center; justify-content:center; padding:24px; }
    .project-modal[hidden] { display:none; }
    .project-dialog { width:min(520px, 94vw); max-height:min(620px, 82vh); overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:0 24px 70px rgba(15,23,42,.22); display:flex; flex-direction:column; }
    .project-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border); }
    .project-dialog-head strong { font-size:15px; }
    .icon-button { width:32px; height:32px; border:1px solid var(--border); border-radius:9px; background:#fff; cursor:pointer; font-size:18px; color:#6b7280; }
    .project-list { overflow:auto; padding:10px; display:grid; gap:8px; }
    .project-row { width:100%; border:1px solid var(--border); border-radius:12px; background:#fff; padding:11px 12px; display:flex; align-items:center; gap:12px; cursor:pointer; text-align:left; }
    .project-row:hover { background:#f8fafc; }
    .project-row.active { border-color:#111827; background:#f9fafb; }
    .project-row-main { min-width:0; flex:1; }
    .project-row-name { font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .project-row-meta { margin-top:3px; color:var(--muted); font-size:10px; }
    .project-current-badge { font-size:9px; font-weight:800; color:#166534; background:#dcfce7; border-radius:999px; padding:4px 7px; }
    .project-empty { color:var(--muted); font-size:12px; padding:28px 14px; text-align:center; }

    .tool-list { display: grid; gap: 9px; }
    .tool {
      width: 100%;
      text-align: left;
      border: 1px solid var(--border);
      background: #fff;
      border-radius: 12px;
      padding: 11px 12px;
      cursor: pointer;
      transition: .15s ease;
    }
    .tool:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,.06); }
    .tool strong { display: block; font-size: 13px; }
    .tool span { color: var(--muted); font-size: 11px; }
    .sidebar-bottom { margin-top: auto; display: grid; gap: 8px; }
    .secondary, .primary {
      border: 0;
      border-radius: 10px;
      padding: 10px 12px;
      cursor: pointer;
    }
    .secondary { background: #f3f4f6; color: #111827; }
    .primary { background: #111827; color: white; }
    .rightbar {
      background: var(--panel);
      border-left: 1px solid var(--border);
      padding: 14px 12px 28px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      z-index: 10;
      min-height: 0;
      height: 100vh;
      max-height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior-y: contain;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
    }

    .rightbar > div { flex: 0 0 auto; }

    .rightbar::-webkit-scrollbar { width: 8px; }
    .rightbar::-webkit-scrollbar-thumb {
      background: #d1d5db;
      border-radius: 999px;
    }
    .rightbar::-webkit-scrollbar-track { background: transparent; }

    @media (max-height: 760px) {
      .rightbar {
        padding: 10px 10px 24px;
        gap: 10px;
      }
      .rightbar .tool-list { gap: 6px; }
      .rightbar .tool { padding: 8px 10px; border-radius: 10px; }
      .rightbar .tool strong { font-size: 12px; }
      .rightbar .tool span { font-size: 10px; }
      .rightbar .compact-grid { gap: 6px; }
      .rightbar .compact-action { min-height: 34px; padding: 7px 8px; }
      .rightbar .shortcut { margin-top: 8px; font-size: 10px; line-height: 1.35; }
    }

    @media (max-height: 620px) {
      .rightbar {
        padding-bottom: 36px;
      }
    }
    .rightbar .tool-list { gap: 7px; }
    .rightbar .tool { padding: 9px 10px; border-radius: 10px; }
    .rightbar .tool strong { font-size: 12px; }
    .rightbar .tool span { font-size: 10px; }
    .compact-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
    .compact-action {
      border:1px solid var(--border); background:#fff; border-radius:10px; padding:9px 7px; cursor:pointer;
      font-size:11px; font-weight:750; color:#374151; display:flex; align-items:center; justify-content:center; gap:5px;
    }
    .compact-action:hover { background:#f8fafc; }
    #clearSketchBtn { grid-column:1 / -1; }
    .danger-soft { background:#fff7f7; color:#991b1b; border:1px solid #fecaca; }
    .zoom-controls { display:flex; align-items:center; gap:5px; margin-left:4px; }
    .zoom-controls button {
      width:30px; height:30px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; font-weight:800;
    }
    .zoom-controls .zoom-value { min-width:48px; text-align:center; color:var(--muted); font-size:11px; font-weight:700; }
    #canvasStage { position:relative; width:4800px; height:3200px; flex:none; }
    #canvas { transform-origin: 0 0; }
    .card[data-type="spreadsheet"] .card-head { background:#ecfdf5; }
    .card[data-type="form"] .card-head { background:#eef2ff; }
    .card[data-type="router"] .card-head { background:#fff7ed; }
    .card[data-type="merge"] .card-head { background:#f0f9ff; }
    .multi-ports { display:grid; gap:10px; padding:12px 10px 13px; border-top:1px solid var(--border); background:#fff; border-radius:0 0 13px 13px; }
    .multi-port-row { position:relative; display:flex; align-items:center; gap:8px; min-height:34px; }
    .multi-port-row input { width:100%; border:1px solid var(--border); border-radius:8px; padding:7px 28px 7px 8px; font-size:11px; outline:none; }
    .multi-port-row input:focus { border-color:#94a3b8; }
    .multi-port-row .flow-port { top:50%; }
    .multi-port-row.output-row .flow-port { right:-17px; }
    .multi-port-row.input-row .flow-port { left:-17px; }
    .multi-port-add { border:1px dashed #cbd5e1; background:#f8fafc; color:#475569; border-radius:8px; padding:7px 8px; cursor:pointer; font-size:10px; font-weight:800; }
    .multi-port-remove { position:absolute; right:5px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:#94a3b8; cursor:pointer; font-weight:900; }
    .selected { outline: 3px solid #2563eb !important; outline-offset: 4px; }
    #selectionBox {
      position:absolute; z-index:9; display:none; pointer-events:none;
      border:1.5px solid #2563eb; background:rgba(37,99,235,.10); border-radius:8px;
    }
    .spreadsheet-card { width: 340px; }
    .spreadsheet-toolbar { display:flex; gap:6px; padding:8px 10px; border-top:1px solid var(--border); background:#f8fffb; }
    .spreadsheet-toolbar button {
      border:1px solid #d1fae5; background:#fff; color:#166534; border-radius:8px; padding:6px 8px; cursor:pointer;
      font-size:10px; font-weight:800;
    }
    .spreadsheet-toolbar button:hover { background:#ecfdf5; }
    .spreadsheet-table-wrap { max-height:240px; overflow:auto; border-top:1px solid var(--border); background:#fff; border-radius:0 0 13px 13px; }
    .spreadsheet-table { width:100%; border-collapse:collapse; table-layout:auto; font-size:10.5px; }
    .spreadsheet-table th, .spreadsheet-table td { border-right:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; padding:6px 7px; text-align:left; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
    .spreadsheet-table th { position:sticky; top:0; background:#ecfdf5; color:#166534; font-weight:800; z-index:1; }
    .spreadsheet-empty { padding:13px 12px 14px; color:#6b7280; font-size:10.5px; border-top:1px solid var(--border); background:#fff; border-radius:0 0 13px 13px; }
    .table-editor { position:absolute; inset:0; z-index:30; background:rgba(255,255,255,.98); border-radius:14px; display:flex; flex-direction:column; padding:10px; gap:8px; box-shadow:0 12px 30px rgba(15,23,42,.18); }
    .table-editor textarea { min-height:180px !important; resize:vertical; border:1px solid var(--border) !important; border-radius:9px !important; padding:9px !important; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; }
    .table-editor-actions { display:flex; justify-content:flex-end; gap:6px; }
    .table-editor-actions button { border:1px solid var(--border); background:#fff; border-radius:8px; padding:6px 9px; cursor:pointer; font-size:10px; font-weight:800; }
    .table-editor-actions .apply { background:#111827; color:#fff; border-color:#111827; }
    .wire-preview { pointer-events:none; }
    .workspace { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    .topbar {
      height: 64px;
      background: rgba(255,255,255,.9);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 18px;
      gap: 10px;
      z-index: 8;
    }
    .topbar .hint { color: var(--muted); font-size: 12px; margin-right: auto; }
    .status { color: var(--muted); font-size: 12px; }
    #canvasWrap {
      position: relative;
      flex: 1 1 0;
      min-height: 0;
      min-width: 0;
      overflow: scroll;
      overscroll-behavior: contain;
      background-image:
        linear-gradient(#e9edf3 1px, transparent 1px),
        linear-gradient(90deg, #e9edf3 1px, transparent 1px);
      background-size: 28px 28px;
    }
    #canvas {
      position: relative;
      width: 6000px;
      height: 4000px;
    }
    #lines {
      position: absolute;
      inset: 0;
      width: 6000px;
      height: 4000px;
      pointer-events: none;
      overflow: visible;
      z-index: 1;
    }
    #sketchLayer {
      position: absolute;
      inset: 0;
      width: 6000px;
      height: 4000px;
      pointer-events: none;
      z-index: 2;
      touch-action: none;
      cursor: crosshair;
    }
    #sketchLayer.drawing { pointer-events: auto; z-index: 7; }
    #canvasWrap.pan-mode { cursor: grab; }
    #canvasWrap.panning { cursor: grabbing; user-select: none; }
    #canvasWrap.pan-mode .card,
    #canvasWrap.pan-mode .image-item,
    #canvasWrap.pan-mode .text-item { cursor: grab; }
    .pan-active { background: #111827 !important; color: white !important; }
    .image-item {
      position: absolute;
      z-index: 3;
      min-width: 90px;
      min-height: 60px;
      border: 1px solid #d1d5db;
      border-radius: 12px;
      box-shadow: var(--shadow);
      background: #fff;
      overflow: visible;
      user-select: none;
      cursor: grab;
    }
    .image-item:active { cursor: grabbing; }
    .image-item.connect-source { outline: 3px solid #111827; outline-offset: 3px; }
    .image-item.connect-target { outline: 2px dashed #2563eb; outline-offset: 3px; }
    .image-badge {
      position: absolute;
      left: 8px;
      top: 8px;
      z-index: 2;
      background: rgba(17,24,39,.82);
      color: #fff;
      border-radius: 999px;
      padding: 4px 7px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .08em;
      pointer-events: none;
      opacity: .82;
    }
    .image-item img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 11px;
      pointer-events: none;
    }
    .image-delete {
      position: absolute;
      right: -9px;
      top: -9px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid #d1d5db;
      background: #fff;
      color: #6b7280;
      cursor: pointer;
      box-shadow: 0 3px 8px rgba(15,23,42,.12);
    }
    .resize-handle {
      position: absolute;
      right: -5px;
      bottom: -5px;
      width: 14px;
      height: 14px;
      border-radius: 4px;
      background: #111827;
      cursor: nwse-resize;
      border: 2px solid #fff;
    }
    .freeform-tools { display: grid; gap: 8px; }
    .freeform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .draw-active { background: #111827 !important; color: white !important; }
    .section-label { color: var(--muted); font-size: 11px; margin-bottom: 8px; }
    .shortcut { color: #9ca3af; font-size: 10px; margin-top: 6px; line-height: 1.35; }

    .card {
      position: absolute;
      z-index: 4;
      width: 220px;
      min-height: 118px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
      user-select: none;
      overflow: visible;
    }
    .card.connect-source { outline: 3px solid #111827; outline-offset: 2px; }
    .card.connect-target { outline: 2px dashed #2563eb; outline-offset: 2px; }
    .flow-port {
      position: absolute;
      z-index: 8;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      border-radius: 999px;
      background: #fff;
      border: 2px solid #94a3b8;
      box-shadow: 0 0 0 3px rgba(255,255,255,.9);
      cursor: crosshair;
    }
    .flow-port:hover { border-color: #111827; transform: translateY(-50%) scale(1.12); }
    .flow-port.input { left: -8px; }
    .flow-port.output { right: -8px; background: #111827; border-color: #111827; }
    .card[data-type="trigger"] .flow-port.output { background: #2563eb; border-color: #2563eb; }
    .image-item .flow-port { top: 50%; }
    .port-disabled { opacity: .25; cursor: not-allowed; }
    .card-head {
      padding: 10px 12px 8px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: grab;
      background: #fafafa;
      border-radius: 13px 13px 0 0;
    }
    .card-head:active { cursor: grabbing; }
    .type-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .delete {
      border: 0;
      background: transparent;
      cursor: pointer;
      color: #9ca3af;
      font-size: 16px;
      line-height: 1;
    }
    .card textarea {
      width: 100%;
      min-height: 78px;
      resize: vertical;
      border: 0;
      outline: none;
      padding: 11px 12px 14px;
      color: var(--text);
      background: #fff;
      user-select: text;
      line-height: 1.4;
    }
    .card:not([data-type="condition"]):not([data-type="router"]):not([data-type="merge"]):not([data-type="spreadsheet"]) textarea { border-radius: 0 0 13px 13px; }
    .spreadsheet-card > textarea { min-height:54px; border-radius:0 !important; resize:vertical; }
    .card[data-type="router"] textarea, .card[data-type="merge"] textarea { border-radius:0; }
    .card[data-type="problem"] .card-head { background: #fff1f2; }
    .card[data-type="trigger"] .card-head { background: #eff6ff; }
    .card[data-type="action"] .card-head { background: #ecfdf5; }
    .card[data-type="condition"] .card-head { background: #fffbeb; }
    .card[data-type="question"] .card-head { background: #f5f3ff; }
    .condition-branches {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      padding: 12px 10px 13px;
      border-top: 1px solid var(--border);
      background: #fffdf7;
      border-radius: 0 0 13px 13px;
    }
    .branch-handle {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 36px;
      border-radius: 9px;
      border: 1px solid var(--border);
      background: #fff;
      cursor: crosshair;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
      user-select: none;
      padding: 0 18px 0 10px;
    }
    .branch-handle::after {
      content: '';
      position: absolute;
      right: -17px;
      top: 50%;
      transform: translateY(-50%);
      width: 11px;
      height: 11px;
      border-radius: 999px;
      background: #94a3b8;
      border: 3px solid #fff;
      box-shadow: 0 0 0 1px #cbd5e1;
    }
    .branch-handle::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #94a3b8;
    }
    .branch-handle.true { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
    .branch-handle.true::before, .branch-handle.true::after { background: #22c55e; }
    .branch-handle.false { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
    .branch-handle.false::before, .branch-handle.false::after { background: #ef4444; }
    .branch-handle.selected { outline: 3px solid #111827; outline-offset: 1px; }
    .connection-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
      paint-order: stroke;
      stroke: white;
      stroke-width: 4px;
      stroke-linejoin: round;
    }
    #connectionControls {
      position: absolute;
      inset: 0;
      width: 6000px;
      height: 4000px;
      pointer-events: none;
      z-index: 6;
    }
    .connection-control {
      position: absolute;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px;
      border: 1px solid #dbe2ea;
      border-radius: 999px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 5px 14px rgba(15,23,42,.12);
      pointer-events: auto;
    }
    .connection-control button {
      width: 24px;
      height: 24px;
      border: 0;
      border-radius: 999px;
      background: #f3f4f6;
      color: #374151;
      display: grid;
      place-items: center;
      cursor: pointer;
      font-weight: 900;
      line-height: 1;
      padding: 0;
    }
    .connection-control button:hover { background: #e5e7eb; }
    .connection-control .connection-delete:hover { background: #fee2e2; color: #b91c1c; }
    .insert-menu {
      position: absolute;
      pointer-events: auto;
      left: 50%;
      top: 38px;
      transform: translateX(-50%);
      width: 178px;
      padding: 7px;
      background: #fff;
      border: 1px solid #dbe2ea;
      border-radius: 12px;
      box-shadow: 0 12px 28px rgba(15,23,42,.16);
      display: grid;
      gap: 4px;
      z-index: 20;
    }
    .insert-menu .menu-title {
      color: #6b7280;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .08em;
      padding: 3px 6px 5px;
      text-transform: uppercase;
    }
    .insert-menu button {
      width: 100%;
      height: auto;
      min-height: 30px;
      justify-content: flex-start;
      display: flex;
      padding: 7px 8px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 700;
      background: #fff;
      color: #374151;
    }
    .insert-menu button:hover { background: #f3f4f6; }
    .wire-drop-menu {
      transform: translate(-50%, 12px);
      z-index: 30;
    }
    .help-panel {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fafafa;
      padding: 10px 11px;
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.45;
    }
    .help-panel summary {
      cursor: pointer;
      color: #374151;
      font-size: 11px;
      font-weight: 800;
      user-select: none;
    }
    .help-panel p { margin: 8px 0 0; }
    .help-panel strong { color: #374151; }
    .empty {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 360px;
      padding: 16px 18px;
      border: 1px dashed #d1d5db;
      border-radius: 14px;
      background: rgba(255,255,255,.82);
      text-align: left;
      color: var(--muted);
      pointer-events: none;
      box-shadow: 0 6px 18px rgba(15,23,42,.04);
    }
    .empty strong { display: block; color: #374151; margin-bottom: 6px; }
    .connect-active { background: #dc2626 !important; color: white !important; }
    .connection-banner {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 9px;
      background: #eff6ff;
      color: #1d4ed8;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .connection-banner.show { display: flex; }
    .connection-banner button {
      border: 0;
      background: #fff;
      color: #1d4ed8;
      border-radius: 7px;
      padding: 4px 7px;
      cursor: pointer;
      font-weight: 800;
    }
    #canvasWrap.drop-ready::after {
      content: 'Drop image onto canvas';
      position: fixed;
      inset: 88px 234px 24px 244px;
      border: 2px dashed #2563eb;
      border-radius: 18px;
      background: rgba(239,246,255,.72);
      display: grid;
      place-items: center;
      color: #1d4ed8;
      font-size: 18px;
      font-weight: 800;
      pointer-events: none;
      z-index: 12;
    }
    .branch-handle::after { display:none; }
    .branch-handle .flow-port.output { right:-18px; }

    .guide-replay {
      margin-top:10px; width:100%; border:1px solid var(--border); background:#fff; color:#475569;
      border-radius:8px; padding:7px 8px; cursor:pointer; font-size:10px; font-weight:800;
    }
    .guide-replay:hover { background:#f8fafc; }
    .onboarding-modal { position:fixed; inset:0; z-index:140; background:rgba(15,23,42,.30); display:grid; place-items:center; padding:24px; }
    .onboarding-modal[hidden] { display:none; }
    .onboarding-card { width:min(540px, 94vw); background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:0 26px 80px rgba(15,23,42,.24); overflow:hidden; }
    .onboarding-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 20px 14px; border-bottom:1px solid var(--border); }
    .onboarding-head strong { display:block; margin-top:3px; font-size:18px; letter-spacing:-.02em; }
    .onboarding-kicker { color:#64748b; font-size:9px; font-weight:900; letter-spacing:.12em; }
    .onboarding-steps { display:grid; gap:10px; padding:16px 20px 8px; }
    .onboarding-step { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; }
    .onboarding-step > span { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:#111827; color:#fff; font-size:11px; font-weight:900; }
    .onboarding-step strong { font-size:12px; }
    .onboarding-step p { margin:3px 0 0; color:#64748b; font-size:11px; line-height:1.45; }
    .onboarding-actions { display:flex; justify-content:flex-end; padding:12px 20px 18px; }
    .onboarding-actions .primary { min-width:120px; }

    .toast {
      position: fixed; bottom: 20px; right: 20px; background: #111827; color: #fff;
      padding: 10px 14px; border-radius: 10px; font-size: 12px; opacity: 0;
      transform: translateY(10px); transition: .2s; pointer-events: none; z-index: 20;
    }
    .toast.show { opacity: 1; transform: translateY(0); }
    @media (max-width: 980px) {
      .app { grid-template-columns: 190px minmax(0,1fr) 180px; }
      .sidebar { padding: 14px; }
      .topbar .hint { display: none; }
    }


    /* Beta 0.2 — canvas text annotations */
    #canvasWrap.text-mode { cursor: text; }
    .text-active { background:#111827 !important; color:#fff !important; }

    .text-item {
      position:absolute;
      z-index:5;
      width:320px;
      min-width:80px;
      min-height:38px;
      padding:6px 8px;
      border:1px solid transparent;
      border-radius:9px;
      background:transparent;
      user-select:none;
      cursor:grab;
      overflow:visible;
      box-sizing:border-box;
    }
    .text-item:hover:not(.editing) {
      border-color:rgba(148,163,184,.42);
      background:rgba(255,255,255,.52);
    }
    .text-item.selected {
      outline:2px solid #2563eb !important;
      outline-offset:3px;
      background:rgba(255,255,255,.72);
    }
    .text-item.editing {
      cursor:text;
      outline:2px solid #2563eb !important;
      outline-offset:3px;
      background:rgba(255,255,255,.92);
      box-shadow:0 8px 24px rgba(15,23,42,.08);
    }
    .canvas-text-content {
      min-height:1.25em;
      width:100%;
      white-space:pre-wrap;
      overflow-wrap:anywhere;
      line-height:1.25;
      outline:none;
      cursor:inherit;
      user-select:none;
    }
    .text-item.editing .canvas-text-content {
      user-select:text;
      cursor:text;
    }
    .canvas-text-content:empty::before {
      content:attr(data-placeholder);
      color:#94a3b8;
      font-weight:500;
      font-style:normal;
      pointer-events:none;
    }
    .text-drag-grip {
      position:absolute;
      left:-18px;
      top:6px;
      width:14px;
      height:24px;
      border:1px solid #dbe1e8;
      border-radius:6px;
      background:#fff;
      box-shadow:0 3px 10px rgba(15,23,42,.08);
      color:#94a3b8;
      display:none;
      place-items:center;
      font-size:10px;
      line-height:1;
      cursor:grab;
    }
    .text-item.selected:not(.editing) .text-drag-grip { display:grid; }
    .text-drag-grip:active { cursor:grabbing; }

    .text-width-handle {
      position:absolute;
      right:-13px;
      top:50%;
      transform:translateY(-50%);
      width:20px;
      height:38px;
      border:1px solid #dbe1e8;
      border-radius:10px;
      background:#fff;
      box-shadow:0 4px 14px rgba(15,23,42,.10);
      color:#64748b;
      display:none;
      place-items:center;
      font-size:11px;
      font-weight:800;
      line-height:1;
      cursor:ew-resize;
      user-select:none;
      z-index:3;
    }
    .text-width-handle::before { content:'↔'; }
    .text-item.selected .text-width-handle { display:grid; }
    .text-width-handle:hover,
    .text-width-handle.resizing {
      color:#2563eb;
      border-color:#93c5fd;
      background:#eff6ff;
      box-shadow:0 5px 16px rgba(37,99,235,.14);
    }
    .text-width-label {
      position:absolute;
      left:50%;
      top:-28px;
      transform:translateX(-50%);
      padding:4px 7px;
      border-radius:7px;
      background:#0f172a;
      color:#fff;
      font:700 10px/1 system-ui,sans-serif;
      white-space:nowrap;
      opacity:0;
      pointer-events:none;
      transition:opacity .12s ease;
    }
    .text-width-handle.resizing .text-width-label { opacity:1; }

    .text-format-bar {
      position:fixed;
      z-index:90;
      display:flex;
      align-items:center;
      gap:5px;
      padding:6px;
      max-width:calc(100vw - 24px);
      border:1px solid #dfe4ea;
      border-radius:12px;
      background:rgba(255,255,255,.97);
      box-shadow:0 14px 35px rgba(15,23,42,.16);
      backdrop-filter:blur(10px);
    }
    .text-format-bar[hidden] { display:none; }
    .text-format-bar .format-select {
      height:32px;
      border:1px solid #e2e8f0;
      border-radius:8px;
      background:#fff;
      color:#334155;
      padding:0 26px 0 9px;
      font-size:11px;
      font-weight:700;
      outline:none;
    }
    #textFontFamily { width:126px; }
    #textFontSize { width:68px; }
    .format-button {
      width:32px;
      height:32px;
      border:1px solid #e2e8f0;
      border-radius:8px;
      background:#fff;
      color:#475569;
      display:grid;
      place-items:center;
      cursor:pointer;
      font-size:12px;
      font-weight:800;
    }
    .format-button:hover,
    .format-button.active { background:#f1f5f9; color:#0f172a; border-color:#cbd5e1; }
    .format-button.delete-format:hover { background:#fff1f2; color:#be123c; border-color:#fecdd3; }
    .format-divider { width:1px; height:22px; background:#e5e7eb; margin:0 1px; }
    .text-color-wrap {
      width:32px;
      height:32px;
      position:relative;
      border:1px solid #e2e8f0;
      border-radius:8px;
      overflow:hidden;
      background:#fff;
      cursor:pointer;
    }
    .text-color-wrap::after {
      content:'A';
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      color:#334155;
      font-size:12px;
      font-weight:900;
      pointer-events:none;
    }
    #textColor {
      position:absolute;
      inset:-8px;
      width:48px;
      height:48px;
      opacity:0;
      cursor:pointer;
    }
    .text-color-indicator {
      position:absolute;
      left:6px;
      right:6px;
      bottom:4px;
      height:3px;
      border-radius:99px;
      background:#111827;
      pointer-events:none;
      z-index:2;
    }

    @media (max-width: 860px) {
      .text-format-bar {
        gap:4px;
        padding:5px;
      }
      #textFontFamily { width:108px; }
      #textFontSize { width:62px; }
      .format-button,
      .text-color-wrap { width:30px; height:30px; }
    }

  
    /* =========================================================
       LOGIC PAD — UI REFRESH V1
       Visual-only layer. Core workflow behavior is unchanged.
       ========================================================= */

    :root {
      --bg: #f5f6f8;
      --panel: #fbfbfc;
      --panel-solid: #ffffff;
      --text: #151922;
      --muted: #6f7785;
      --border: #e4e7ec;
      --border-strong: #d5dae2;
      --accent: #5b5bd6;
      --accent-strong: #4747c7;
      --accent-soft: #f0f0ff;
      --canvas-grid: #dfe3ea;
      --success: #14804a;
      --warning: #b54708;
      --danger: #b42318;
      --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
      --shadow-sm: 0 4px 12px rgba(16, 24, 40, .06);
      --shadow-md: 0 10px 30px rgba(16, 24, 40, .09);
      --shadow-lg: 0 24px 70px rgba(16, 24, 40, .16);
    }

    html, body {
      background: var(--bg);
    }

    body {
      color: var(--text);
      letter-spacing: -.005em;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    button, input, textarea, select {
      font: inherit;
    }

    button {
      -webkit-tap-highlight-color: transparent;
    }

    .app {
      grid-template-columns: 248px minmax(0, 1fr) 246px;
      background: var(--bg);
    }

    /* ---------- Left workspace rail ---------- */
    .sidebar {
      background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,252,.98));
      border-right: 1px solid var(--border);
      padding: 18px 16px 22px;
      gap: 16px;
      box-shadow: 1px 0 0 rgba(255,255,255,.7) inset;
    }

    .sidebar::-webkit-scrollbar,
    .rightbar::-webkit-scrollbar {
      width: 7px;
    }

    .sidebar::-webkit-scrollbar-thumb,
    .rightbar::-webkit-scrollbar-thumb {
      background: #d7dce4;
      border: 2px solid transparent;
      background-clip: padding-box;
      border-radius: 999px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 850;
      color: #11131a;
      letter-spacing: -.03em;
    }

    .brand::before {
      content: "";
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      border-radius: 9px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.32), transparent 45%),
        linear-gradient(135deg, #6667df 0%, #4546be 100%);
      box-shadow:
        0 7px 16px rgba(91,91,214,.22),
        inset 0 0 0 1px rgba(255,255,255,.22);
      position: relative;
    }

    .brand::after {
      content: "L";
      position: absolute;
      margin-left: 7px;
      color: #fff;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: -.05em;
      pointer-events: none;
    }

    .sub {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.5;
    }

    .sidebar > div:first-child .sub {
      margin-top: 6px;
      padding-left: 38px;
      color: #8a919f;
      font-size: 10.5px;
    }

    .section-label,
    .sidebar .sub[style*="margin-bottom:6px"] {
      color: #98a0ae !important;
      font-size: 9px !important;
      line-height: 1.2;
      font-weight: 850;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .project-input {
      height: 39px;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 0 11px;
      background: rgba(255,255,255,.85);
      color: #20242d;
      font-size: 12px;
      font-weight: 700;
      box-shadow: var(--shadow-xs);
      transition: .16s ease;
    }

    .project-input:hover {
      border-color: #d7dce4;
      background: #fff;
    }

    .project-input:focus {
      border-color: rgba(91,91,214,.6);
      box-shadow: 0 0 0 3px rgba(91,91,214,.10);
      background: #fff;
    }

    .project-actions {
      gap: 6px;
      margin-top: 7px;
    }

    .compact-action,
    .secondary,
    .primary {
      transition:
        background .14s ease,
        border-color .14s ease,
        color .14s ease,
        box-shadow .14s ease,
        transform .14s ease;
    }

    .compact-action {
      min-height: 35px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.9);
      border-radius: 9px;
      padding: 7px 9px;
      color: #4c5563;
      font-size: 10.5px;
      font-weight: 760;
      box-shadow: var(--shadow-xs);
    }

    .compact-action:hover {
      transform: none;
      background: #fff;
      border-color: #d6dbe4;
      color: #212630;
      box-shadow: var(--shadow-sm);
    }

    .compact-action:active,
    .secondary:active,
    .primary:active,
    .tool:active {
      transform: translateY(1px);
    }

    .danger-soft {
      background: #fffafa;
      color: #b42318;
      border-color: #f3d3d0;
    }

    .danger-soft:hover {
      background: #fff4f3;
      border-color: #efc1bd;
      color: #8f1710;
    }

    /* ---------- Quick Guide ---------- */
    .help-panel {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(255,255,255,.74);
      overflow: hidden;
      box-shadow: var(--shadow-xs);
    }

    .help-panel summary {
      cursor: pointer;
      list-style: none;
      padding: 11px 12px;
      color: #3d4552;
      font-size: 11px;
      font-weight: 820;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .help-panel summary::-webkit-details-marker { display: none; }

    .help-panel summary::after {
      content: "⌄";
      color: #9aa1ad;
      font-size: 12px;
      transform: rotate(-90deg);
      transition: transform .15s ease;
    }

    .help-panel[open] summary::after {
      transform: rotate(0deg);
    }

    .help-panel[open] summary {
      border-bottom: 1px solid var(--border);
      background: #fff;
    }

    .help-panel p {
      margin: 0;
      padding: 8px 11px 0;
      color: #707887;
      font-size: 10px;
      line-height: 1.48;
    }

    .help-panel p strong {
      color: #374151;
      font-weight: 800;
    }

    .guide-replay {
      width: calc(100% - 20px);
      margin: 11px 10px 10px;
      border: 0;
      border-radius: 8px;
      background: #f4f5f7;
      color: #535b67;
      padding: 8px 9px;
      font-size: 10px;
      font-weight: 800;
      cursor: pointer;
    }

    .guide-replay:hover { background: #edeff2; }

    .sidebar-bottom {
      margin-top: 0;
      padding-top: 2px;
      gap: 7px;
    }

    .secondary,
    .primary {
      min-height: 38px;
      border-radius: 10px;
      padding: 9px 11px;
      font-size: 11px;
      font-weight: 780;
    }

    .secondary {
      background: #fff;
      color: #3f4754;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-xs);
    }

    .secondary:hover {
      background: #fafbfc;
      border-color: #d3d8e0;
      box-shadow: var(--shadow-sm);
    }

    .primary {
      background: linear-gradient(180deg, #6263df, #5253ca);
      color: #fff;
      box-shadow: 0 8px 18px rgba(91,91,214,.20);
    }

    .primary:hover {
      background: linear-gradient(180deg, #5758d5, #4748bd);
      box-shadow: 0 10px 22px rgba(91,91,214,.26);
    }

    /* ---------- Center workspace ---------- */
    .workspace {
      background: #f6f7f9;
    }

    .topbar {
      height: 58px;
      padding: 0 14px 0 16px;
      gap: 8px;
      background: rgba(250,251,252,.86);
      border-bottom: 1px solid rgba(224,228,234,.92);
      backdrop-filter: blur(16px) saturate(1.25);
      -webkit-backdrop-filter: blur(16px) saturate(1.25);
      box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    }

    .topbar .hint {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #8b93a0;
      font-size: 10.5px;
    }

    .status {
      min-width: max-content;
      color: #87909e;
      font-size: 10px;
      font-weight: 700;
      padding-left: 6px;
    }

    .zoom-controls {
      gap: 3px;
      margin-left: auto;
      padding: 3px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(255,255,255,.94);
      box-shadow: var(--shadow-xs);
    }

    .zoom-controls button {
      width: 27px;
      height: 27px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #69717e;
      font-size: 13px;
    }

    .zoom-controls button:hover {
      background: #f1f3f5;
      color: #252a33;
    }

    .zoom-controls .zoom-value {
      min-width: 43px;
      color: #59616e;
      font-size: 10px;
    }

    #zoomResetBtn {
      border-left: 1px solid #edf0f3 !important;
      border-radius: 0 7px 7px 0 !important;
      margin-left: 2px;
      color: #78808c;
      font-size: 9px;
    }

    .connection-banner {
      border-radius: 10px !important;
      box-shadow: var(--shadow-sm);
    }

    #canvasWrap {
      background-color: #f8f9fb;
      background-image:
        radial-gradient(circle at center, rgba(157,165,178,.44) 1px, transparent 1.2px);
      background-size: 24px 24px;
      scrollbar-width: thin;
      scrollbar-color: #cdd2da transparent;
    }

    #canvasWrap::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    #canvasWrap::-webkit-scrollbar-track {
      background: transparent;
    }

    #canvasWrap::-webkit-scrollbar-thumb {
      background: #cfd4dc;
      border: 3px solid #f8f9fb;
      border-radius: 999px;
    }

    .empty {
      border: 1px dashed #cfd5de !important;
      background: rgba(255,255,255,.82) !important;
      color: #8b93a0 !important;
      border-radius: 14px !important;
      padding: 16px 18px !important;
      box-shadow: 0 10px 25px rgba(16,24,40,.04);
      max-width: 310px;
      line-height: 1.5;
    }

    .empty strong {
      color: #323843 !important;
      font-size: 12px !important;
      margin-bottom: 4px !important;
    }

    /* ---------- Right block library ---------- */
    .rightbar {
      background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,252,.98));
      border-left: 1px solid var(--border);
      padding: 16px 13px 24px;
      gap: 17px;
      box-shadow: -1px 0 0 rgba(255,255,255,.7) inset;
    }

    .rightbar .section-label {
      margin: 0 3px 8px;
    }

    .rightbar .tool-list {
      gap: 6px;
    }

    .tool {
      position: relative;
      overflow: hidden;
      min-height: 51px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.9);
      border-radius: 11px;
      padding: 9px 10px 9px 13px;
      box-shadow: var(--shadow-xs);
      transition:
        background .14s ease,
        border-color .14s ease,
        box-shadow .14s ease,
        transform .14s ease;
    }

    .tool::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      bottom: 9px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: #b7bdc8;
    }

    .tool[data-add="trigger"]::before { background: #16a36a; }
    .tool[data-add="action"]::before { background: #5b5bd6; }
    .tool[data-add="condition"]::before { background: #d79517; }
    .tool[data-add="router"]::before { background: #e07832; }
    .tool[data-add="merge"]::before { background: #2e89b8; }
    .tool[data-add="spreadsheet"]::before { background: #2a9d69; }
    .tool[data-add="form"]::before { background: #7c6bc4; }
    .tool[data-add="problem"]::before { background: #d15252; }
    .tool[data-add="question"]::before { background: #667085; }

    .tool:hover {
      transform: translateY(-1px);
      border-color: #d7dce3;
      background: #fff;
      box-shadow: var(--shadow-sm);
    }

    .tool strong {
      color: #303641;
      font-size: 11.5px;
      font-weight: 820;
      letter-spacing: -.01em;
    }

    .tool span {
      margin-top: 2px;
      display: block;
      color: #8b93a0;
      font-size: 9.5px;
      line-height: 1.25;
    }

    .rightbar .compact-grid {
      gap: 6px;
    }

    .rightbar .compact-action {
      min-height: 37px;
      background: rgba(255,255,255,.9);
      color: #535c69;
    }

    .rightbar .compact-action:hover {
      color: #272d37;
    }

    .shortcut {
      margin: 8px 3px 0;
      color: #929aa7;
      font-size: 9.5px;
      line-height: 1.48;
    }

    .shortcut strong { color: #626b78; }

    /* ---------- Workflow cards ---------- */
    .card {
      width: 220px;
      min-height: 112px;
      border: 1px solid #dfe3e9;
      border-radius: 13px;
      background: rgba(255,255,255,.98);
      box-shadow:
        0 1px 2px rgba(16,24,40,.03),
        0 7px 19px rgba(16,24,40,.065);
      transition:
        box-shadow .16s ease,
        border-color .16s ease,
        transform .16s ease;
    }

    .card:hover {
      border-color: #d4d9e1;
      box-shadow:
        0 2px 3px rgba(16,24,40,.04),
        0 11px 25px rgba(16,24,40,.085);
    }

    .card.selected,
    .image-item.selected,
    .text-item.selected {
      outline: 2px solid var(--accent) !important;
      outline-offset: 3px !important;
      box-shadow:
        0 0 0 4px rgba(91,91,214,.08),
        0 12px 28px rgba(16,24,40,.10) !important;
    }

    .card-head {
      border-radius: 12px 12px 0 0 !important;
      border-bottom: 1px solid rgba(222,226,233,.85) !important;
      min-height: 35px;
    }

    .card[data-type="spreadsheet"] .card-head { background:#edf9f3; }
    .card[data-type="form"] .card-head { background:#f1effb; }
    .card[data-type="router"] .card-head { background:#fff4e9; }
    .card[data-type="merge"] .card-head { background:#edf7fb; }
    .card[data-type="condition"] .card-head { background:#fff9e8; }
    .card[data-type="trigger"] .card-head { background:#edf9f3; }
    .card[data-type="problem"] .card-head { background:#fff1f0; }
    .card[data-type="question"] .card-head { background:#f4f5f7; }

    .flow-port {
      box-shadow:
        0 0 0 2px #fff,
        0 1px 4px rgba(16,24,40,.18);
    }

    .selected {
      outline-width: 2px !important;
    }

    .multi-ports {
      border-top-color: #e7eaf0;
      background: #fcfcfd;
      gap: 8px;
      padding: 10px;
    }

    .multi-port-row input {
      height: 31px;
      border-color: #e0e4ea;
      background: #fff;
      color: #4a5260;
      font-size: 10px;
    }

    .multi-port-row input:focus {
      border-color: rgba(91,91,214,.55);
      box-shadow: 0 0 0 3px rgba(91,91,214,.08);
    }

    .multi-port-add {
      border-color: #d9dee6;
      background: #f8f9fb;
      color: #667080;
    }

    .spreadsheet-card { width: 360px; }

    .spreadsheet-toolbar {
      background: #f7fcf9;
      border-top-color: #e2ebe6;
    }

    .spreadsheet-toolbar button {
      border-color: #d6e8de;
      color: #287553;
      background: #fff;
    }

    .spreadsheet-table-wrap {
      border-top-color: #e6e9ee;
    }

    .spreadsheet-table th {
      background: #eef8f3;
      color: #347258;
    }

    /* ---------- Images / canvas annotations ---------- */
    .image-item {
      border-color: #dfe3e8;
      border-radius: 13px;
      background: #fff;
      box-shadow:
        0 2px 4px rgba(16,24,40,.04),
        0 10px 25px rgba(16,24,40,.08);
    }

    .image-badge {
      left: 9px;
      top: 9px;
      background: rgba(24,29,38,.76);
      padding: 4px 7px;
      letter-spacing: .06em;
      backdrop-filter: blur(6px);
    }

    .image-delete {
      width: 25px;
      height: 25px;
      border-color: #dfe3e8;
      box-shadow: var(--shadow-sm);
    }

    .resize-handle {
      background: var(--accent);
      border-radius: 4px;
      box-shadow: 0 2px 5px rgba(91,91,214,.22);
    }

    .text-item {
      border-radius: 9px;
      transition: background .12s ease, outline-color .12s ease;
    }

    .text-item:hover:not(.editing) {
      border-color: rgba(181,188,198,.50);
      background: rgba(255,255,255,.70);
    }

    .text-item.editing {
      outline-color: var(--accent) !important;
      background: rgba(255,255,255,.94);
      box-shadow: 0 10px 28px rgba(16,24,40,.09);
    }

    .text-format-bar {
      border: 1px solid #dfe3e8;
      border-radius: 13px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 18px 42px rgba(16,24,40,.15);
      padding: 5px;
      gap: 4px;
    }

    .text-format-bar .format-select,
    .format-button,
    .text-color-wrap {
      border-color: #e3e6eb;
      border-radius: 8px;
    }

    .format-button:hover,
    .format-button.active {
      background: var(--accent-soft);
      color: var(--accent-strong);
      border-color: #d7d7fb;
    }

    /* ---------- Modals ---------- */
    .project-modal,
    .onboarding-modal {
      background: rgba(17,24,39,.34);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .project-dialog,
    .onboarding-card {
      border-color: rgba(221,225,232,.92);
      border-radius: 18px;
      box-shadow: var(--shadow-lg);
    }

    .project-dialog-head,
    .onboarding-head {
      background: #fbfbfc;
      border-bottom-color: var(--border);
    }

    .project-row {
      border-color: var(--border);
      border-radius: 11px;
      box-shadow: var(--shadow-xs);
    }

    .project-row:hover {
      background: #fafbfc;
      border-color: #d8dde5;
      box-shadow: var(--shadow-sm);
    }

    .project-row.active {
      border-color: rgba(91,91,214,.56);
      background: var(--accent-soft);
    }

    .project-current-badge {
      color: #397252;
      background: #e8f6ee;
    }

    .icon-button {
      border-color: var(--border);
      color: #7a8390;
    }

    .icon-button:hover {
      background: #f3f4f6;
      color: #353b45;
    }

    .toast {
      border-radius: 11px !important;
      box-shadow: var(--shadow-md) !important;
    }

    /* ---------- Small laptop refinements ---------- */
    @media (max-height: 760px) {
      .sidebar {
        padding: 13px 12px 22px;
        gap: 12px;
      }

      .sidebar > div:first-child .sub {
        padding-left: 38px;
      }

      .help-panel p {
        padding-top: 7px;
      }

      .rightbar {
        padding: 12px 10px 22px;
        gap: 12px;
      }

      .tool {
        min-height: 46px;
        padding-top: 7px;
        padding-bottom: 7px;
      }

      .topbar {
        height: 54px;
      }
    }

    @media (max-width: 1180px) {
      .app {
        grid-template-columns: 226px minmax(0, 1fr) 226px;
      }

      .topbar .hint {
        max-width: 420px;
      }
    }

  
    /* ---------- Smiley blocks ---------- */
    .smiley-section .section-label {
      margin-bottom: 8px;
    }

    .smiley-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .smiley-tool {
      min-height: 58px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.92);
      border-radius: 11px;
      padding: 8px 6px 7px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: #38404b;
      box-shadow: var(--shadow-xs);
      transition:
        background .14s ease,
        border-color .14s ease,
        box-shadow .14s ease,
        transform .14s ease;
    }

    .smiley-tool:hover {
      background: #fff;
      border-color: #d7dce3;
      box-shadow: var(--shadow-sm);
      transform: translateY(-1px);
    }

    .smiley-tool .emoji {
      font-size: 24px;
      line-height: 1;
    }

    .smiley-tool .name {
      font-size: 9.5px;
      font-weight: 780;
      color: #6d7583;
      line-height: 1.1;
    }

    .smiley-card {
      width: 170px;
      min-height: 142px;
    }

    .card[data-type="smiley"] .card-head {
      background: #fff7e8;
    }

    .smiley-body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 104px;
      padding: 10px 12px 14px;
      cursor: move;
      user-select: none;
      text-align: center;
    }

    .smiley-emoji {
      font-size: 46px;
      line-height: 1;
      filter: drop-shadow(0 5px 10px rgba(16,24,40,.10));
    }

    .smiley-caption {
      font-size: 10px;
      font-weight: 760;
      color: #8b93a0;
      letter-spacing: .02em;
    }

  
    /* ---------- Smiley library wrapper ---------- */
    .smiley-library {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(255,255,255,.78);
      overflow: hidden;
      box-shadow: var(--shadow-xs);
    }

    .smiley-library summary {
      list-style: none;
      cursor: pointer;
      min-height: 39px;
      padding: 0 11px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #515a67;
      font-size: 10.5px;
      font-weight: 820;
      user-select: none;
    }

    .smiley-library summary::-webkit-details-marker { display: none; }

    .smiley-library summary::after {
      content: "⌄";
      color: #9aa1ad;
      font-size: 12px;
      transition: transform .15s ease;
    }

    .smiley-library:not([open]) summary::after {
      transform: rotate(-90deg);
    }

    .smiley-library[open] summary {
      border-bottom: 1px solid var(--border);
      background: #fff;
    }

    .smiley-library-body {
      padding: 9px;
    }

    .smiley-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .smiley-tool {
      min-height: 63px;
      border-radius: 10px;
    }

    .smiley-tool .emoji {
      font-size: 25px;
    }

    .smiley-library-help {
      margin-top: 8px;
      padding: 8px 9px;
      border-radius: 9px;
      background: #f8f9fb;
      color: #868f9c;
      font-size: 9.4px;
      line-height: 1.45;
    }

    /* ---------- Editable smiley blocks ---------- */
    .smiley-card {
      width: 200px;
      min-height: 208px;
    }

    .smiley-body {
      min-height: 162px;
      padding: 9px 12px 13px;
      gap: 8px;
      cursor: default;
    }

    .smiley-visual {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 3px 0 1px;
      border-radius: 9px;
      cursor: grab;
      user-select: none;
    }

    .smiley-visual:hover {
      background: #fffaf0;
    }

    .smiley-visual:active {
      cursor: grabbing;
    }

    .smiley-emoji {
      font-size: 48px;
      line-height: 1;
    }

    .smiley-fields {
      width: 100%;
      display: grid;
      gap: 6px;
    }

    .smiley-name-input,
    .smiley-note-input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid transparent;
      outline: none;
      background: transparent;
      transition:
        border-color .14s ease,
        background .14s ease,
        box-shadow .14s ease;
    }

    .smiley-name-input {
      height: 31px;
      padding: 5px 8px;
      border-radius: 8px;
      color: #343b46;
      text-align: center;
      font-size: 11px;
      font-weight: 820;
      letter-spacing: -.01em;
    }

    .smiley-note-input {
      min-height: 54px;
      max-height: 125px;
      resize: vertical;
      padding: 7px 8px;
      border-radius: 8px;
      color: #747d8a;
      font-size: 9.8px;
      line-height: 1.42;
      font-weight: 560;
    }

    .smiley-name-input:hover,
    .smiley-note-input:hover {
      border-color: #e4e7ec;
      background: #fcfcfd;
    }

    .smiley-name-input:focus,
    .smiley-note-input:focus {
      border-color: rgba(91,91,214,.45);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(91,91,214,.08);
    }

    .smiley-name-input::placeholder {
      color: #a2a9b4;
      font-weight: 720;
    }

    .smiley-note-input::placeholder {
      color: #aab1bb;
      font-weight: 520;
    }

  
    /* ---------- Public Early Access ---------- */
    .public-version-badge {
      position: fixed;
      right: 12px;
      bottom: 8px;
      z-index: 45;
      pointer-events: none;
      color: #9aa1ad;
      font: 750 9px/1 system-ui, sans-serif;
      letter-spacing: .035em;
      white-space: nowrap;
    }

    .mobile-desktop-notice {
      display: none;
    }

    @media (max-width: 820px) {
      .mobile-desktop-notice {
        display: block;
        position: fixed;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        width: min(92vw, 460px);
        padding: 9px 12px;
        border: 1px solid #e1e4e9;
        border-radius: 10px;
        background: rgba(255,255,255,.96);
        color: #626b78;
        box-shadow: 0 10px 28px rgba(16,24,40,.12);
        font: 700 10px/1.4 system-ui, sans-serif;
        text-align: center;
        pointer-events: none;
        backdrop-filter: blur(10px);
      }
    }