@font-face {
      font-family: "Manrope";
      src: url("/assets/fonts/Manrope-Variable.ttf") format("truetype");
      font-style: normal;
      font-weight: 200 800;
      font-display: swap;
    }
    :root {
      --plum-950: #1d102b;
      --plum-900: #2a173e;
      --plum-800: #3b2056;
      --plum-700: #543078;
      --plum-100: #eee7f5;
      --gold-600: #b78526;
      --gold-500: #d2a64d;
      --gold-300: #ead39a;
      --paper: #f7f3eb;
      --paper-raised: #fffdf8;
      --ink: #211d24;
      --muted: #6e6871;
      --line: #ded7cc;
      --line-dark: #c9c0b4;
      --green: #147354;
      --green-soft: #e3f0ea;
      --red: #a13d3d;
      --red-soft: #f8e8e4;
      --blue: #285aa7;
      --blue-soft: #e6eef9;
      --amber-soft: #f8edcf;
      --sidebar: #2b193f;
      --radius: 14px;
      --shadow: 0 10px 28px rgba(42, 23, 62, .09);
      --ease: cubic-bezier(.2, .8, .2, 1);
    }

    * { box-sizing: border-box; }
    html { background: var(--plum-950); scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Manrope", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 14px;
      line-height: 1.45;
      min-width: 320px;
    }
    button, input, select, textarea { font: inherit; color: inherit; }
    button, select { cursor: pointer; }
    button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
      outline: 3px solid rgba(210, 166, 77, .68);
      outline-offset: 2px;
    }
    ::selection { background: var(--gold-300); color: var(--plum-950); }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #bdb3a8; border: 3px solid var(--paper); border-radius: 999px; }
    .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
    .shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 24px 16px 18px;
      color: #f8f2e7;
      background: var(--sidebar);
      display: flex;
      flex-direction: column;
      overflow: auto;
      z-index: 10;
    }
    .brand { display: flex; align-items: center; gap: 11px; padding: 0 7px 28px; }
    .brand img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
    .brand-name { font-size: 18px; font-weight: 760; line-height: 1.05; letter-spacing: -.02em; }
    .brand-sub { margin-top: 4px; color: #bcaec7; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
    .nav-label { color: #8f80a0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 10px 7px; }
    .nav { display: grid; gap: 4px; }
    .nav-button {
      width: 100%; border: 0; background: transparent; color: #cfc3d8; padding: 10px 11px; border-radius: 10px;
      display: flex; align-items: center; gap: 10px; text-align: left; transition: background .18s var(--ease), color .18s var(--ease);
    }
    .nav-button:hover { background: rgba(255,255,255,.07); color: white; }
    .nav-button.active { background: var(--gold-500); color: var(--plum-950); font-weight: 700; }
    .nav-button .count { margin-left: auto; min-width: 22px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.12); text-align: center; font-size: 11px; }
    .nav-button.active .count { background: rgba(42,23,62,.13); }
    .sidebar-status { margin-top: auto; padding: 18px 11px 6px; border-top: 1px solid rgba(255,255,255,.1); }
    .status-dot { display: block; width: 11px; height: 11px; border-radius: 50%; background: #58d098; border: 2px solid rgba(255,255,255,.22); animation: status-breathe 2.2s var(--ease) infinite; }
    @keyframes status-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(88,208,152,.32); } 50% { box-shadow: 0 0 0 7px rgba(88,208,152,0); } }

    .main { min-width: 0; background: var(--paper); }
    .topbar {
      min-height: 72px; padding: 15px 24px; display: flex; align-items: center; gap: 18px;
      background: rgba(247,243,235,.96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 8;
    }
    .page-title { min-width: 180px; }
    .page-title h1 { margin: 0; font-size: 26px; font-weight: 760; line-height: 1.08; letter-spacing: -.025em; }
    .page-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
    .topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
    .btn {
      min-height: 38px; border: 1px solid var(--line-dark); background: var(--paper-raised); padding: 8px 13px; border-radius: 10px;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 650; box-shadow: 0 2px 5px rgba(0,0,0,.05);
      transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
    }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,0,0,.11); }
    .btn.primary { background: var(--plum-800); border-color: var(--plum-800); color: white; }
    .btn.gold { background: var(--gold-500); border-color: var(--gold-500); color: var(--plum-950); }
    .btn.danger { color: var(--red); border-color: #dfb9b0; background: #fff8f5; }
    .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
    .btn.small { min-height: 32px; padding: 6px 10px; font-size: 12px; }
    .btn[disabled] { cursor: not-allowed; opacity: .5; transform: none; box-shadow: none; }

    .content { padding: 22px 24px 36px; }
    .view { display: none; }
    .view.active { display: block; animation: reveal .28s var(--ease) both; }
    @keyframes reveal { from { opacity: .01; clip-path: inset(0 0 8% 0); } to { opacity: 1; clip-path: inset(0); } }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
      .status-dot, .pipeline-flow::after { animation: none !important; }
    }

    .notice {
      display: none; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; background: var(--amber-soft); border: 1px solid #e4c971; border-radius: 12px;
    }
    .notice.show { display: flex; }
    .notice strong { display: block; }
    .notice .btn { margin-left: auto; }

    .pulse-strip {
      display: grid; grid-template-columns: 1.25fr repeat(4, minmax(120px, .75fr)); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 18px;
    }
    .pulse-main { padding: 18px 20px; background: var(--plum-900); color: white; position: relative; overflow: hidden; }
    .pulse-main::after { content: ""; position: absolute; width: 140px; height: 140px; right: -54px; top: -74px; border: 28px solid rgba(210,166,77,.18); transform: rotate(45deg); }
    .pulse-main strong { display: block; font-size: 25px; font-weight: 760; line-height: 1.08; letter-spacing: -.025em; }
    .pulse-main span { display: block; margin-top: 6px; color: #cfc3d8; font-size: 12px; }
    .pulse-cell { padding: 16px 18px; border-left: 1px solid var(--line); min-width: 0; }
    .pulse-value { display: block; font-size: 23px; font-weight: 760; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
    .pulse-label { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
    .pulse-delta { color: var(--green); font-size: 11px; font-weight: 700; }

    .workbench { display: grid; grid-template-columns: minmax(500px, 1fr) 385px; gap: 18px; align-items: start; }
    .queue-panel, .inspector, .surface { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
    .panel-head { padding: 16px 18px 13px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 14px; }
    .panel-head h2 { margin: 0; font-size: 18px; font-weight: 760; line-height: 1.15; letter-spacing: -.018em; }
    .panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
    .panel-head .btn { margin-left: auto; }
    .filters { display: flex; gap: 8px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
    .filter-chip { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 6px 10px; color: var(--muted); white-space: nowrap; font-size: 12px; }
    .filter-chip.active { background: var(--plum-100); border-color: #cdbddd; color: var(--plum-800); font-weight: 700; }
    .search { margin-left: auto; min-width: 185px; position: relative; }
    .search .icon { position: absolute; left: 9px; top: 8px; color: var(--muted); width: 15px; height: 15px; }
    .search input { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: #fbf8f2; padding: 6px 9px 6px 31px; }

    .queue-list { min-height: 415px; }
    .queue-row {
      width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 13px 14px; text-align: left;
      display: grid; grid-template-columns: 45px minmax(0, 1fr) 110px 28px; gap: 11px; align-items: center; position: relative;
      transition: background .16s var(--ease);
    }
    .queue-row:last-child { border-bottom: 0; }
    .queue-row:hover { background: #faf6ef; }
    .queue-row.selected { background: #f1eaf6; }
    .queue-row.selected::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold-500); }
    .channel-mark { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--plum-100); }
    .queue-copy { min-width: 0; }
    .queue-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
    .queue-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .queue-meta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px 9px; color: var(--muted); font-size: 11px; }
    .severity { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
    .severity.high { background: var(--red); }
    .severity.medium { background: var(--gold-600); }
    .severity.low { background: var(--blue); }
    .row-status { justify-self: start; }
    .badge { display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 750; white-space: nowrap; }
    .badge.manual { background: var(--red-soft); color: #84332d; }
    .badge.ai { background: var(--blue-soft); color: #214e91; }
    .badge.ready { background: var(--green-soft); color: #0f684a; }
    .badge.processing { background: var(--amber-soft); color: #755511; }
    .chev { color: #918993; }
    .queue-empty { display: none; padding: 54px 20px; text-align: center; color: var(--muted); }

    .inspector { position: sticky; top: 94px; overflow: hidden; display: flex; flex-direction: column; height: calc(100vh - 249px); max-height: calc(100vh - 116px); }
    .inspector-top { padding: 16px 17px 13px; background: var(--plum-900); color: white; }
    .inspector-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #cfc3d8; font-size: 11px; margin-top: 8px; }
    .inspector-top h2 { margin: 0 0 6px; font-size: 21px; font-weight: 760; line-height: 1.12; letter-spacing: -.02em; }
    .inspector-top p { margin: 0; color: #cfc3d8; font-size: 12px; }
    .reason { padding: 11px 16px; background: var(--red-soft); color: #6e302d; border-bottom: 1px solid #eac9c1; display: flex; gap: 9px; font-size: 12px; }
    .reason .icon { margin-top: 1px; }
    .inspector-body { min-height: 0; flex: 1 1 auto; max-height: none; overflow: auto; padding: 15px 17px; }
    .data-block { padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
    .data-block:last-child { border: 0; margin-bottom: 0; }
    .block-title { margin: 0 0 9px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; }
    .field.full { grid-column: 1 / -1; }
    .field label { display: block; color: var(--muted); font-size: 10px; margin-bottom: 3px; }
    .field .value { font-weight: 650; overflow-wrap: anywhere; }
    .field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line-dark); background: white; border-radius: 8px; padding: 8px 9px; }
    .field textarea { min-height: 110px; resize: vertical; }
    .link-value { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
    .post-preview { background: #f4efe6; padding: 12px; border-radius: 10px; white-space: pre-line; font-size: 12px; }
    .source-snippet { color: var(--muted); font-size: 12px; border-left: 1px solid var(--gold-500); padding-left: 10px; }
    .inspector-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px 15px; border-top: 1px solid var(--line); background: #fbf8f2; }
    .inspector-actions .wide { grid-column: 1 / -1; }
    .edit-only { display: none; }
    .editing .edit-only { display: block; }
    .editing .read-only { display: none; }
    .ai-suggestion { display: none; padding: 12px; margin-bottom: 14px; border-radius: 10px; background: var(--blue-soft); color: #173f7b; }
    .ai-suggestion.show { display: block; animation: reveal .25s var(--ease); }
    .ai-suggestion strong { display: block; margin-bottom: 5px; }
    .ai-actions { display: flex; gap: 7px; margin-top: 10px; }

    .dashboard-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 18px; }
    .surface { overflow: hidden; }
    .surface-body { padding: 17px 18px; }
    .pipeline-viewport { overflow-x: auto; padding: 20px 18px 22px; border-bottom: 1px solid var(--line); }
    .pipeline-flow { position: relative; min-width: 640px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
    .pipeline-flow::before { content: ""; position: absolute; left: 9%; right: 9%; top: 27px; height: 2px; background: #d9d1c6; }
    .pipeline-flow::after { content: ""; position: absolute; z-index: 3; top: 22px; left: 9%; width: 12px; height: 12px; border: 3px solid var(--paper-raised); border-radius: 50%; background: var(--gold-500); animation: pipeline-travel 5s var(--ease) infinite; }
    @keyframes pipeline-travel { 0% { left: 9%; } 22% { left: 29%; } 46% { left: 49%; } 72% { left: 69%; } 100% { left: 89%; } }
    .flow-stage { position: relative; z-index: 1; text-align: center; }
    .flow-stage::after { content: ""; position: absolute; top: 23px; right: -4px; width: 8px; height: 8px; border-top: 2px solid #b8aea2; border-right: 2px solid #b8aea2; transform: rotate(45deg); }
    .flow-stage:last-child::after { display: none; }
    .flow-node { width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; background: var(--paper-raised); border: 3px solid var(--stage); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.08); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .flow-stage strong { display: block; font-size: 12px; }
    .flow-stage small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
    .flow-loss { position: absolute; top: -12px; right: -18px; min-width: 32px; padding: 2px 5px; border-radius: 999px; background: var(--paper); color: var(--muted); font-size: 9px; font-weight: 700; }
    .activity { display: grid; gap: 0; }
    .activity-row { display: grid; grid-template-columns: 76px 8px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
    .activity-row:last-child { border: 0; }
    .activity-time { color: var(--muted); font-variant-numeric: tabular-nums; }
    .activity-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; background: var(--green); }
    .bars { display: grid; gap: 13px; }
    .bar-row { display: grid; grid-template-columns: 130px 1fr 34px; gap: 10px; align-items: center; font-size: 12px; }
    .bar-track { height: 7px; background: #ece5dc; border-radius: 999px; overflow: hidden; }
    .bar-fill { height: 100%; width: var(--w); background: var(--plum-700); border-radius: inherit; }
    .bar-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
    th { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: #faf6ef; }
    td { font-size: 12px; }
    tbody tr:last-child td { border-bottom: 0; }
    .channel-cell { display: flex; align-items: center; gap: 10px; min-width: 220px; }
    .channel-cell img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
    .channel-cell strong { display: block; }
    .channel-cell span { color: var(--muted); font-size: 10px; }
    .switch { position: relative; display: inline-flex; width: 42px; height: 24px; }
    .switch input { opacity: 0; width: 1px; height: 1px; position: absolute; }
    .switch span { width: 100%; height: 100%; background: #c9c1b8; border-radius: 999px; transition: background .2s; }
    .switch span::after { content: ""; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .2s var(--ease); }
    .switch input:checked + span { background: var(--green); }
    .switch input:checked + span::after { transform: translateX(18px); }
    .switch input:focus-visible + span { outline: 3px solid rgba(210,166,77,.68); outline-offset: 2px; }

    .prompt-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); min-height: 610px; }
    .prompt-list { border-right: 1px solid var(--line); padding: 10px; }
    .prompt-item { width: 100%; border: 0; background: transparent; border-radius: 9px; padding: 11px; text-align: left; margin-bottom: 3px; }
    .prompt-item:hover { background: #f6f0e8; }
    .prompt-item.active { background: var(--plum-100); color: var(--plum-800); }
    .prompt-item strong { display: block; }
    .prompt-item span { color: var(--muted); font-size: 10px; }
    .prompt-editor { padding: 20px; }
    .prompt-editor h2 { margin: 0 0 4px; font-size: 22px; font-weight: 760; line-height: 1.15; letter-spacing: -.02em; }
    .prompt-editor > p { margin: 0 0 18px; color: var(--muted); }
    .editor-meta { display: flex; gap: 8px; margin-bottom: 12px; }
    .prompt-editor textarea { width: 100%; min-height: 330px; border: 1px solid var(--line-dark); border-radius: 10px; padding: 14px; resize: vertical; line-height: 1.55; background: #fffefa; }
    .editor-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
    .char-count { color: var(--muted); font-size: 11px; margin-right: auto; }

    .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .setting-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .setting-row:last-child { border: 0; }
    .setting-copy { flex: 1; }
    .setting-copy strong { display: block; }
    .setting-copy span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
    .field-control { min-width: 120px; border: 1px solid var(--line-dark); border-radius: 8px; background: white; padding: 8px 9px; }
    .danger-zone { background: #fff8f5; border-color: #e3bdb6; }
    .secret-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 13px; }
    .secret-row input { width: 100%; border: 1px solid var(--line-dark); border-radius: 8px; padding: 9px; }
    .storage-meter { margin-top: 12px; }
    .storage-line { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 5px; }

    .media-grid { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 14px; }
    .media-item { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
    .media-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
    .media-copy { padding: 11px; }
    .media-copy strong { display: block; }
    .media-copy span { color: var(--muted); font-size: 10px; }

    .toast {
      position: fixed; right: 24px; bottom: 24px; z-index: 30; max-width: 360px; padding: 12px 15px; border-radius: 11px; background: var(--plum-900); color: white; box-shadow: 0 16px 40px rgba(29,16,43,.28);
      transform: translateY(30px); opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s var(--ease);
    }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast strong { color: var(--gold-300); }
    .illustrative { color: var(--muted); font-size: 10px; }
    .quick-tools { display: flex; flex-wrap: wrap; gap: 6px; }
    .tool-chip { border: 1px solid var(--line); background: white; color: var(--muted); border-radius: 8px; padding: 6px 8px; font-size: 10px; }
    .tool-chip:hover { color: var(--plum-800); border-color: #cdbddd; background: var(--plum-100); }

    @media (max-width: 1320px) {
      .dashboard-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 1180px) {
      .pulse-strip { grid-template-columns: 1.3fr repeat(2, 1fr); }
      .pulse-cell:nth-last-child(-n+2) { border-top: 1px solid var(--line); }
      .workbench { grid-template-columns: minmax(430px, 1fr) 350px; }
      .media-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 920px) {
      .shell { grid-template-columns: 72px minmax(0, 1fr); }
      .sidebar { padding: 16px 10px 14px; }
      .brand { justify-content: center; padding: 0 0 24px; }
      .brand > div, .nav-label { display: none; }
      .nav-button { position: relative; justify-content: center; padding: 11px; font-size: 0; }
      .nav-button .icon { width: 20px; height: 20px; }
      .nav-button .count { position: absolute; top: 3px; right: 3px; min-width: 17px; padding: 1px 4px; font-size: 9px; }
      .sidebar-status { padding-inline: 20px; }
      .pipeline-flow { min-width: 560px; }
      .topbar { top: 0; }
      .workbench, .dashboard-grid { grid-template-columns: 1fr; }
      .inspector { position: static; height: auto; max-height: none; }
      .inspector-body { max-height: 260px; flex: none; }
      .settings-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 700px) {
      .shell { grid-template-columns: 1fr; padding-bottom: 66px; }
      .sidebar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 66px; padding: 8px 10px; flex-direction: row; overflow-x: auto; z-index: 20; box-shadow: 0 -8px 24px rgba(29,16,43,.18); }
      .brand, .nav-label, .sidebar-status { display: none; }
      .nav { display: flex; width: 100%; gap: 2px; }
      .nav-button { width: auto; min-width: 52px; flex: 1 0 52px; flex-direction: column; gap: 3px; padding: 5px 3px; font-size: 10px; }
      .nav-button .icon { width: 19px; height: 19px; }
      .nav-button .count { position: absolute; margin: -3px 0 0 25px; min-width: 17px; padding: 1px 4px; }
    }
    @media (max-width: 650px) {
      .topbar { min-height: 64px; padding: 12px 14px; }
      .page-title h1 { font-size: 21px; }
      .page-title p, .desktop-only { display: none; }
      .topbar-actions { gap: 5px; }
      .topbar-actions .btn { padding: 8px 10px; }
      .content { padding: 14px 12px 26px; }
      .pulse-strip { grid-template-columns: 1fr 1fr; }
      .pulse-main { grid-column: 1 / -1; }
      .pulse-cell { border-top: 1px solid var(--line); }
      .pulse-cell:nth-child(even) { border-left: 0; }
      .queue-row { grid-template-columns: 40px minmax(0, 1fr) 24px; padding: 11px; }
      .channel-mark { width: 38px; height: 38px; }
      .row-status { grid-column: 2; margin-top: -4px; }
      .chev { grid-column: 3; grid-row: 1 / span 2; }
      .filters { padding: 9px; }
      .search { min-width: 145px; }
      .prompt-layout { grid-template-columns: 1fr; }
      .prompt-list { border-right: 0; border-bottom: 1px solid var(--line); display: flex; overflow-x: auto; }
      .prompt-item { min-width: 180px; }
      .prompt-editor { padding: 15px; }
      .pipeline-viewport { overflow: visible; padding: 10px 16px 14px; }
      .pipeline-flow { min-width: 0; grid-template-columns: 1fr; }
      .pipeline-flow::before { left: 26px; right: auto; top: 27px; bottom: 27px; width: 2px; height: auto; }
      .pipeline-flow::after { left: 21px; top: 22px; animation-name: pipeline-drop; }
      @keyframes pipeline-drop { from { top: 22px; } to { top: calc(100% - 34px); } }
      .flow-stage { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: 1fr 1fr; column-gap: 14px; min-height: 74px; padding-bottom: 20px; text-align: left; }
      .flow-stage::after { top: auto; right: auto; bottom: 7px; left: 23px; transform: rotate(135deg); }
      .flow-node { grid-row: 1 / span 2; margin: 0; }
      .flow-stage strong { align-self: end; }
      .flow-stage small { align-self: start; margin-top: 3px; }
      .flow-loss { top: auto; right: auto; bottom: 5px; left: 43px; }
      .media-grid { grid-template-columns: repeat(2, 1fr); }
      .field-grid { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .filters { flex-wrap: wrap; overflow: visible; }
      .search { order: 2; flex: 1 0 100%; min-width: 100%; }
      #view-queue .pulse-strip { display: none; }
      #view-queue .workbench { display: flex; flex-direction: column; }
      #view-queue .inspector { order: -1; width: 100%; }
      #view-queue .inspector-body { max-height: 170px; }
      #view-queue .queue-panel { width: 100%; }
      .toast { left: 12px; right: 12px; bottom: 78px; }
    }