:root {
        --bg: #ffffff;
        --surface: #fafafa;
        --surface-2: #f4f4f4;
        --ink: #1a1a1a;
        --mute: #6b6b6b;
        --mute-soft: #9a9a9a;
        --line: #e7e7e7;
        --line-soft: #f0f0f0;
        --accent: #0078d7;
        --accent-soft: rgba(0, 120, 215, 0.1);
        --accent-tint: rgba(0, 120, 215, 0.18);
        --green: #107c10;
        --orange: #d83b01;
        --red: #e81123;
        --purple: #5c2d91;
        --teal: #00b294;
        --magenta: #b4009e;
        --indigo: #4b53bc;
        --log-bg: #ffffff;
      }
      * { box-sizing: border-box; margin: 0; padding: 0; }
      html, body { height: 100%; overflow: hidden; }
      body {
        font-family: "Inter", "Segoe UI", system-ui, sans-serif;
        font-size: 13.5px; line-height: 1.5;
        background: var(--bg); color: var(--ink);
        font-weight: 400; -webkit-font-smoothing: antialiased;
      }
      ::selection { background: var(--accent); color: #fff; }
      .mono, code { font-family: "JetBrains Mono", monospace; }
      * { scrollbar-width: none; }
      ::-webkit-scrollbar { display: none; width: 0; height: 0; }

      .shell {
        display: grid;
        grid-template-columns: 232px 1fr;
        grid-template-rows: 56px auto 1fr auto;
        grid-template-areas: "brand topbar" "filters filters" "main main" "dock dock";
        height: 100vh;
      }

      .brand-cell {
        grid-area: brand;
        background: var(--surface-2);
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        display: flex; align-items: center;
        padding: 0 20px;
        font-size: 15px; font-weight: 600;
        letter-spacing: -0.01em;
        overflow: hidden;
        justify-content: space-between;
      }
      .brand-cell img { transition: opacity 0.2s; }
      .brand-logo-min { display: none; }

      .topbar {
        grid-area: topbar;
        border-bottom: 1px solid var(--line);
        background: var(--bg);
        display: flex; align-items: center;
        padding: 0 20px; gap: 28px;
        overflow-x: auto;
      }
      .topbar .stats { display: flex; gap: 24px; }
      .stat { display: flex; flex-direction: column; gap: 2px; }
      .stat .k {
        font-size: 10px; color: var(--mute);
        text-transform: uppercase; letter-spacing: 0.06em;
        font-weight: 600; line-height: 1;
      }
      .stat .v {
        font-family: "JetBrains Mono", monospace;
        font-size: 13px; font-weight: 500; line-height: 1.1;
      }
      .stat .v.ok { color: var(--green); }
      .stat .v.warn { color: var(--orange); }
      .stat .v.err { color: var(--red); }
      .topbar .spacer { flex: 1; }
      .topbar .back-link {
        display: inline-flex; align-items: center; gap: 6px;
        color: var(--mute); text-decoration: none;
        font-size: 12.5px; font-weight: 500;
        padding: 6px 10px; border-radius: 4px;
        border: 1px solid var(--line);
        transition: all 0.1s; flex-shrink: 0;
      }
      .topbar .back-link:hover { color: var(--ink); background: var(--surface); }

      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
      }

      main {
        grid-area: main; overflow: hidden;
        display: flex; flex-direction: column;
      }
      #endpoint-banner:empty { display: none; }
      #endpoint-banner:not(:empty) { flex: 1; min-height: 0; display: flex; }
      #endpoint-banner:not(:empty) + .panel-grid { display: none; }
      .panel-grid {
        flex: 1; min-height: 0;
        position: relative;
        display: flex; flex-wrap: wrap; align-content: flex-start;
        gap: 12px; height: 100%; overflow-y: auto;
        /* padding lives here, not on main — main is overflow:hidden with a fixed 1fr
           row, so padding there ate into panel-grid's own scrollable box and the
           last row rode flush to the bottom edge. padding on the scrollable element
           itself scrolls with its content instead. */
        padding: 14px;
      }
      /* marks the boundary before the auto-deleted temp- sessions (sortedSessions
         always sorts them last) — flex-basis 100% forces it onto its own full-width
         row regardless of how many columns the panels above/below it are using */
      .panel-divider { flex: 1 1 100%; height: 1px; background: var(--line); margin: 2px 0; }
      .panel-grid:has(.panel.scaled) { padding: 0; }

      .panel {
        position: relative;
        /* exact pixel width, not a flex-basis that grows to fill the row — index.js
           computes it from the column count (1-4) and sets it as --panel-width on
           panel-grid: (100vw - 14*2 - 12*(cols-1)) / cols */
        flex: 0 0 var(--panel-width, 400px);
        width: var(--panel-width, 400px);
        height: calc(100vh - 11.5rem);
        border-radius: 4px;
        overflow: hidden;
        transition: box-shadow 0.12s;
        cursor: pointer;
      }
      /* scaling a panel fills the whole grid and hides every other panel — :has()
         does the sibling-hiding so index.js only has to toggle one class */
      .panel-grid:has(.panel.scaled) .panel:not(.scaled) { display: none; }
      /* position:fixed with top/left/width/height set inline by index.js (measured
         from panel-grid's actual getBoundingClientRect()) — every percentage/inset-
         based attempt here kept losing to some rule elsewhere in the cascade (grid
         row sizing, .many's height override, flex stretch...) and came out short of
         panel-grid's real box. Fixed positioning with JS-measured pixels sidesteps
         the cascade: it just covers that exact rectangle, full stop. */
      .panel.scaled { position: fixed; z-index: 5; }
      /* once there are more panels than fit in one row (cols), every panel's height
         is derived from its OWN rendered width via a 480:480 aspect ratio — wider
         panels get taller, narrower panels get shorter, always keeping this ratio.
         The panel itself still scrolls the rest. "many" is toggled by index.js as
         n > cols. */
      .panel-grid.many .panel { height: var(--panel-width, 400px); }
      .panel::after {
        content: "";
        position: absolute; inset: 0;
        border-radius: inherit;
        box-shadow: inset 0 0 0 1px var(--line);
        pointer-events: none;
      }
      /* streaming: rotating gradient halo, clipped by .panel's own overflow:hidden
         so only the 4px ring around .panel-inner is visible — same technique as a
         "conic-gradient block glow": big centered square, blurred, spun with CSS */
      .panel.streaming::before {
        content: "";
        position: absolute;
        z-index: 0;
        width: 200%; height: 200%;
        left: -50%; top: -50%;
        background-image: conic-gradient(#5575D9, #DFA0D380, #DFA0D333, transparent, #DFA0D333, #DFA0D380, #5575D9, #DFA0D380, #DFA0D333, #DFA0D300, #DFA0D333, #DFA0D380, #5575D9);
        filter: blur(1.5rem);
        animation: state-online-glow 4s linear infinite;
      }
      .panel.targeted .panel-head { background: var(--accent-soft); }
      .panel.targeted .panel-head .sid { color: var(--accent); }
      .panel-inner {
        position: absolute; inset: 1px;
        z-index: 1;
        display: flex; flex-direction: column;
        background: var(--bg);
        border-radius: calc(4px - 1px);
        overflow: hidden;
      }
      .panel.streaming .panel-inner { inset: 4px; border-radius: 2px; }
      /* the targeted panel always scrolls; every other panel is scroll-masked until
         the dwell/rearm logic in index.js adds .unmasked (pointer settled on it for
         200ms) — clicking anywhere on a masked panel still targets it */
      .panel:not(.targeted):not(.unmasked) .log-body { overflow: hidden; }

      .panel-head {
        background: var(--surface);
        padding: 10px 14px;
        border-bottom: 1px solid var(--line);
        border-radius: 4px 4px 0 0;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px; align-items: center;
        transition: background 0.12s;
      }
      @keyframes state-online-glow {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

      .panel-head .info {
        display: flex; flex-direction: column;
        gap: 2px; min-width: 0;
      }
      .panel-head .info .sid {
        font-family: "JetBrains Mono", monospace;
        font-size: 13px; font-weight: 600;
        overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; transition: color 0.12s;
      }
      .panel-head .info .meta {
        font-size: 11px; color: var(--mute);
        overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap;
      }
      .panel-head .info .meta .sep {
        color: var(--mute-soft); margin: 0 6px;
      }
      .panel-head .info .meta strong {
        color: var(--ink); font-weight: 500;
      }
      .panel-head .info .meta.model-switch {
        cursor: pointer;
      }
      .panel-head .info .meta .model-icon {
        font-size: 9px; margin-right: 4px; opacity: 0.6;
        vertical-align: baseline;
      }
      .panel-head .info .meta.model-switch:hover strong {
        text-decoration: underline;
      }
      .panel-head .info .meta.model-switch:hover .model-icon {
        opacity: 1;
      }
      .panel-head .info .meta .reasoning-sep { color: var(--mute-soft); margin: 0 2px; }
      .panel-head .info .meta .reasoning-okay { color: var(--green); }
      .panel-head .info .meta .reasoning-warn { color: var(--red); }
      .panel-head .info .meta .reasoning-mute { color: var(--mute); }
      .panel-head .actions { display: flex; gap: 4px; }
      .panel-head .actions button {
        background: var(--bg); color: var(--mute);
        border: 1px solid var(--line); border-radius: 3px;
        font-family: "Inter", sans-serif;
        font-size: 11px; font-weight: 500;
        padding: 3px 8px; cursor: pointer;
        transition: all 0.1s;
      }
      .panel-head .actions button:hover {
        background: var(--ink); color: #fff; border-color: var(--ink);
      }
      /* Mirrors TUI's renderTodoList (renderTodo.go): live "⏺ Plan (done/total)"
         progress block driven by EventTodoUpdate, shown while a plan is active. */
      .plan-block {
        display: none;
        background: var(--surface); color: var(--ink);
        padding: 8px 14px;
        border-bottom: 1px solid var(--line);
        font-family: "JetBrains Mono", monospace;
        font-size: 12px; line-height: 1.6;
      }
      .plan-block.show { display: block; }
      .plan-block .plan-title { color: #0078d7; font-weight: 600; }
      .plan-block .plan-count { color: var(--mute); }
      .plan-block .plan-item {
        padding-left: 2px; white-space: pre-wrap; overflow-wrap: anywhere;
      }
      .plan-block .plan-item.completed { color: var(--mute); }
      .plan-block .plan-item.completed .plan-mark { color: #2ea043; }
      .plan-block .plan-item.in_progress { color: var(--ink); }
      .plan-block .plan-item.in_progress .plan-mark { color: #0078d7; }
      .plan-block .plan-item.pending { color: var(--mute); }

      .log-body {
        flex: 1; overflow-y: auto; overflow-x: auto;
        background: var(--log-bg); color: var(--ink);
        padding: 10px 14px;
        border-radius: 0 0 4px 4px;
        font-family: "JetBrains Mono", monospace;
        font-size: 12px; line-height: 1.7;
      }
      .log-line { padding: 1px 0; white-space: pre; }
      .log-line.new { animation: flash-in 0.7s ease-out; }
      .log-line.user-msg {
        display: flex; justify-content: flex-end;
        padding: 6px 0; white-space: normal;
      }
      .log-line.user-msg .ev-EventUserInput {
        display: inline-block; max-width: 80%;
        background: var(--surface-2); color: var(--ink);
        border-radius: 14px; padding: 8px 14px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere;
      }
      @keyframes flash-in {
        0% { background: rgba(0, 120, 215, 0.12); padding-left: 8px; }
        100% { background: transparent; padding-left: 0; }
      }
      .log-line .ev-EventText,
      .log-line .ev-EventTextDone { color: var(--ink); }

      /* one collapsible "Reasoning" group per turn, holding both tool-exec and reasoning lines */
      details.activity-group { color: var(--mute-soft); }
      details.activity-group summary {
        cursor: pointer; font-weight: 500;
        color: var(--mute); list-style: none;
        display: flex; align-items: center; gap: 8px;
      }
      details.activity-group summary::-webkit-details-marker { display: none; }
      details.activity-group summary::before { content: "▸ "; }
      details.activity-group[open] summary::before { content: "▾ "; }
      details.activity-group .activity-group-body {
        margin-top: 4px; padding-left: 14px;
        border-left: 2px solid var(--line);
      }
      details.activity-group .activity-group-body > div { padding: 1px 0; }
      details.activity-group .ev-EventToolCall,
      details.activity-group .ev-EventToolSkipped { color: var(--mute-soft); }
      details.activity-group .ev-EventReasoning {
        font-style: italic; white-space: pre-wrap; overflow-wrap: anywhere;
      }
      /* markdown-rendered content wraps instead of overflowing the panel width */
      .log-line .ev-EventText,
      .log-line .ev-EventTextDone {
        white-space: pre-wrap; overflow-wrap: anywhere;
      }
      .log-line .ev-EventError,
      .log-line .ev-EventExecError,
      details.activity-group .ev-EventError,
      details.activity-group .ev-EventExecError { color: #cf222e; }
      .log-line .ev-EventDone { color: var(--mute); white-space: pre-wrap; overflow-wrap: anywhere; }
      .log-line.history-divider { color: var(--mute); font-style: italic; }
      .log-empty {
        color: var(--mute-soft); font-style: italic;
        padding: 20px 0; text-align: center;
        font-size: 12px;
      }

      .dock {
        grid-area: dock;
        border-top: 1px solid var(--line);
        background: var(--bg);
        display: flex; flex-direction: column;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
      }
      .shell:has(.panel.scaled) .type-filters { display: none; }
      .shell:has(#endpoint-banner:not(:empty)) .type-filters { display: none; }
      .type-filters {
        grid-area: filters;
        display: flex; align-items: center;
        border-bottom: 1px solid var(--line);
        background: var(--surface);
        overflow-x: auto; padding: 0 10px;
        height: 32px;
      }
      .type-filters .label {
        display: flex; align-items: center;
        padding: 0 14px; font-size: 10px;
        font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.08em; color: var(--mute);
        flex-shrink: 0;
      }
      .chip {
        display: inline-flex; align-items: center;
        gap: 6px; padding: 0 10px;
        margin: 0 4px 0 0;
        height: 20px;
        font-family: "Inter", sans-serif;
        font-size: 11px; font-weight: 500;
        background: var(--bg); color: var(--ink);
        border: 1px solid var(--line);
        border-radius: 14px; cursor: pointer;
        white-space: nowrap; transition: all 0.1s;
      }
      .chip:hover {
        background: var(--accent-soft);
        border-color: var(--accent); color: var(--accent);
      }
      .chip.active {
        background: var(--accent); color: #fff;
        border-color: var(--accent); font-weight: 600;
      }
      .chip-dot {
        width: 7px; height: 7px; border-radius: 50%;
      }
      .chip-dot.online { background: var(--green); }
      .chip-dot.idle { background: var(--mute-soft); }
      .chip-dot.warn { background: var(--orange); }
      .chip.active .chip-dot.online { background: #fff; }

      .dock-input {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: stretch;
        height: 64px;
      }
      .dock-input textarea.content {
        width: 100%; border: 0;
        background: var(--bg);
        padding: 12px 16px;
        font-family: "JetBrains Mono", monospace;
        font-size: 14px; line-height: 1.4; color: var(--ink);
        outline: none; resize: none; overflow-y: auto;
        border-right: 1px solid var(--line);
      }
      .dock-input textarea.content:focus { background: var(--accent-soft); }
      .dock-input textarea.content::placeholder { color: var(--mute-soft); }
      .dock-input button.send-btn {
        background: var(--accent); border: 0;
        color: #fff; font-family: "Inter", sans-serif;
        font-size: 13px; font-weight: 600;
        padding: 0 30px; cursor: pointer;
        letter-spacing: 0.02em;
        transition: background 0.1s;
        min-width: 130px;
      }
      .dock-input button.send-btn:hover { background: #005ba1; }
      .dock-input button.send-btn:active { background: var(--green); }


      /* ===== Global pending modal (centered, consolidated list) ===== */
      .pending-modal {
        position: fixed; inset: 0; z-index: 9999;
        display: flex; align-items: center; justify-content: center;
        background: rgba(0, 0, 0, 0.28); pointer-events: auto;
      }
      .pending-modal .pm-card {
        width: 440px; max-width: calc(100vw - 40px); max-height: 72vh;
        display: flex; flex-direction: column;
        background: var(--bg); border: 1px solid var(--line);
        border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
        animation: pm-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1);
        overflow: hidden;
      }
      .pending-modal .pm-head {
        display: flex; align-items: center; gap: 8px;
        padding: 14px 16px; border-bottom: 1px solid var(--line);
      }
      .pending-modal .pm-title { font-weight: 700; color: var(--ink); font-size: 14px; }
      .pending-modal .pm-close {
        margin-left: auto; background: none; border: none; color: var(--mute);
        font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px;
      }
      .pending-modal .pm-close:hover { color: var(--ink); }
      .pending-modal .pm-list { padding: 4px; overflow-y: auto; }
      .pending-modal .pm-item {
        padding: 10px 12px; border-radius: 8px; cursor: pointer;
      }
      .pending-modal .pm-item:hover { background: var(--surface); }
      .pending-modal .pm-session {
        font-weight: 600; color: var(--ink); font-size: 12px; margin-bottom: 3px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .pending-modal .pm-item-body {
        color: var(--mute); font-size: 12px; line-height: 1.45;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
      }
      @keyframes pm-in {
        from { transform: scale(0.96); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
      }

      /* ===== Panel pending badge ===== */
      .panel-head .pending-btn {
        display: inline-flex; align-items: center; gap: 5px;
        background: var(--surface); color: var(--ink);
        border: 1px solid var(--line); border-radius: 3px;
        font-family: "Inter", sans-serif;
        font-size: 10px; font-weight: 600;
        padding: 3px 10px; cursor: pointer;
        transition: all 0.1s;
      }
      .panel-head .pending-btn .dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: var(--red); flex-shrink: 0;
      }
      .panel-head .pending-btn:hover {
        background: var(--red); color: #fff; border-color: var(--red);
      }
      .panel-head .pending-btn:hover .dot { background: #fff; }

      /* ===== Pending overlay (per-panel) ===== */
      .panel { position: relative; }
      .pending-overlay {
        position: absolute; inset: 0;
        background: rgba(0,0,0,0.6);
        display: flex; align-items: center; justify-content: center;
        z-index: 10; backdrop-filter: blur(2px);
      }
      .pending-card {
        background: var(--bg); border: 1px solid var(--line);
        border-radius: 6px; padding: 14px 18px;
        max-width: 92%; min-width: 240px;
        max-height: 80%; overflow-y: auto;
        box-shadow: 0 8px 24px rgba(0,0,0,0.18);
      }
      .pending-card-head {
        display: flex; align-items: center; gap: 8px;
        margin-bottom: 10px;
      }
      .pending-card-head .title {
        font-size: 12px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.04em;
      }
      .pending-card-head .close-btn {
        margin-left: auto; background: none; border: none;
        font-size: 15px; cursor: pointer; color: var(--mute);
        padding: 0; line-height: 1;
      }
      .pending-card-head .close-btn:hover { color: var(--ink); }
      .pending-task-item {
        padding: 8px 0; border-bottom: 1px solid var(--line-soft);
        cursor: pointer; display: flex; align-items: center; gap: 8px;
        font-size: 12px; transition: color 0.08s;
      }
      .pending-task-item:last-child { border-bottom: none; }
      .pending-task-item:hover { color: var(--accent); }
      .pending-task-item .tag {
        font-size: 9px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.03em;
        padding: 1px 5px; border-radius: 2px;
        background: var(--accent); color: #fff;
        flex-shrink: 0;
      }
      .pending-task-item span:not(.tag) { flex: 1; min-width: 0; }
      .pending-task-delete {
        flex-shrink: 0; margin-left: auto;
        background: none; border: none; color: var(--mute-soft);
        cursor: pointer; padding: 4px 6px; border-radius: 4px; font-size: 11px;
      }
      .pending-task-delete:hover { color: var(--red); background: rgba(232, 17, 35, 0.1); }
      .pending-question {
        font-size: 13px; font-weight: 500;
        color: var(--ink); margin-bottom: 8px;
      }
      .pending-detail {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px; line-height: 1.4;
        color: var(--mute); margin-bottom: 8px;
      }
      .pending-actions {
        display: flex; flex-wrap: wrap; gap: 5px;
        margin-bottom: 8px;
      }
      .pending-actions button {
        font-family: "Inter", sans-serif;
        font-size: 11px; font-weight: 500;
        padding: 4px 10px; border-radius: 3px;
        border: 1px solid var(--line);
        background: var(--bg); color: var(--ink);
        cursor: pointer; transition: all 0.1s;
      }
      .pending-actions button:hover {
        background: var(--accent); color: #fff; border-color: var(--accent);
      }
      .pending-actions button.selected {
        background: var(--accent); color: #fff; border-color: var(--accent);
      }
      .pending-input {
        display: flex; gap: 5px; width: 100%;
        margin-bottom: 8px;
      }
      .pending-input input {
        flex: 1; font-family: "JetBrains Mono", monospace;
        font-size: 12px; padding: 5px 8px;
        border: 1px solid var(--line); border-radius: 3px;
        outline: none; background: var(--bg); color: var(--ink);
      }
      .pending-input input:focus { border-color: var(--accent); }
      .pending-submit {
        display: flex; gap: 5px; justify-content: flex-end;
      }
      .pending-submit button {
        font-family: "Inter", sans-serif;
        font-size: 11px; font-weight: 600;
        padding: 5px 14px; border-radius: 3px;
        border: none; cursor: pointer;
      }
      .pending-submit .send { background: var(--accent); color: #fff; }
      .pending-submit .send:hover { opacity: 0.85; }
      .pending-submit .cancel { background: var(--surface); color: var(--mute); border: 1px solid var(--line); }
      .pending-submit .cancel:hover { color: var(--ink); }

      .gate-hero {
        flex: 1; width: 100%;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 14px; text-align: center; padding: 40px 20px;
        background: radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 60%);
      }
      .gate-hero-logo { width: 56px; height: 56px; opacity: 0.9; }
      .gate-hero h1 { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
      .gate-hero p { font-size: 13.5px; color: var(--mute); max-width: 440px; line-height: 1.6; }
      .gate-hero-install { margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
      .gate-hero-install .label { font-size: 11.5px; color: var(--mute-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
      .gate-hero-note { font-size: 11.5px; color: var(--mute-soft); }
      .gate-hero-cmd {
        display: flex; align-items: stretch;
        background: #1c2333; border-radius: 8px; overflow: hidden;
      }
      .gate-hero-cmd code {
        font-family: "JetBrains Mono", monospace; font-size: 13px;
        color: #7ee787; padding: 12px 16px; white-space: nowrap;
      }
      .gate-hero-cmd button {
        background: var(--accent); border: none; color: #fff; cursor: pointer;
        padding: 0 22px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700;
        flex-shrink: 0; transition: background 0.12s;
      }
      .gate-hero-cmd button:hover { background: #005ba1; }
      .gate-hero-links { display: flex; gap: 10px; margin-top: 10px; }
      .gate-hero-btn {
        display: inline-flex; align-items: center; gap: 7px;
        font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600;
        padding: 9px 20px; border-radius: 6px; text-decoration: none;
        border: 1px solid var(--line); color: var(--ink);
        transition: all 0.12s;
      }
      .gate-hero-btn:hover { border-color: var(--mute-soft); background: var(--surface); }
      .gate-hero-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
      .gate-hero-btn.primary:hover { background: #005ba1; }
      @media (max-width: 799px) {
        .shell { grid-template-columns: 52px 1fr; }
        .brand-cell { padding: 0; justify-content: center; }
        .brand-logo-full { display: none; }
        .brand-logo-min { display: block; }
      }