/* 04-top-mode-tabs */

      .shell { grid-template-rows: 48px auto 1fr; }
      .mode-tabs-bar { grid-column: 1 / -1; display: flex; gap: 4px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--border); overflow-x: auto; }
      .mode-tab { border: 1px solid var(--border); background: var(--panel-soft); border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }
      .mode-tab.active { background: var(--accent-soft); border-color: #93c5fd; color: var(--accent); font-weight: 600; }
      .submode-bar { grid-column: 1 / -1; display: flex; gap: 6px; padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid var(--border); }
      .submode-btn { border: none; background: transparent; padding: 6px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; }
      .submode-btn.active { background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.06); font-weight: 600; }
      .shell-body { grid-template-columns: var(--sidebar-w) 1fr var(--right-w); grid-row: 3; height: auto; }
      .mode-rail, .mode-flyout { display: none; }

      .ws-header { padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
      .title-row { display: flex; gap: 8px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
      .form-props { margin: 12px 16px 0; }
      .editor-block { flex: 1; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
      .editor-head { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; }