/* Shared primitives consume semantic tokens from tokens.css. */
  * { box-sizing:border-box; margin:0; }
  [hidden] { display:none !important; }
  .visually-hidden { position:absolute !important; width:1px; height:1px; padding:0;
                     margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
                     white-space:nowrap; border:0; }
  body { height:100dvh; overflow:hidden; display:flex; flex-direction:column;
         background-color:var(--bg); color:var(--txt);
         background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                          linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
         background-size:24px 24px;
         font:15px/1.42 var(--font-ui); }
  button, input, textarea, select { font:inherit; }
  button { appearance:none; cursor:pointer; border:1px solid var(--line); border-radius:7px;
           background:var(--button-bg); color:var(--txt); }
  button:disabled { cursor:not-allowed; opacity:.5; }
  button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
  .tab-link:focus-visible, .card:focus-visible {
    outline:2px solid var(--blue); outline-offset:2px;
  }
  .topbar { order:1; flex:0 0 auto; min-height:68px; display:flex; align-items:center;
            justify-content:space-between; gap:18px;
            padding:calc(14px + env(safe-area-inset-top, 0px))
              max(28px, env(safe-area-inset-right, 0px)) 14px
              max(28px, env(safe-area-inset-left, 0px));
            border-bottom:1px solid var(--line); background:var(--topbar-bg);
            box-shadow:0 12px 32px var(--shadow-color); position:relative; }
  .title-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .brand-lockup { display:flex; align-items:center; gap:12px; min-width:0; }
  .brand-mark { display:block; width:32px; height:32px; flex:0 0 auto;
                object-fit:contain; border-radius:5px; }
  .topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
  .legend-wrap { position:relative; }
  .theme-toggle, .legend-toggle { width:36px; height:36px; display:grid;
                                  place-items:center; padding:0; line-height:1; }
  .legend-toggle { border-radius:50%; color:var(--txt-soft); font-weight:750; }
  .legend-toggle[aria-expanded="true"] { border-color:var(--accent-border);
                                           background:var(--accent-soft); color:var(--cyan); }
  .legend-popover { position:absolute; z-index:30; top:calc(100% + 11px); right:0;
                    width:min(390px,calc(100vw - 28px)); padding:15px;
                    border:1px solid var(--line); border-radius:10px;
                    background:var(--panel-bg); box-shadow:var(--shadow); }
  .legend-popover h2 { margin-bottom:10px; }
  .legend-list { display:grid; gap:8px; list-style:none; }
  .legend-item { display:grid; grid-template-columns:108px 1fr; align-items:center;
                 gap:10px; color:var(--dim); font-size:11.5px; }
  .legend-signal { display:flex; align-items:center; gap:6px; color:var(--txt-soft); }
  .legend-signal .chip { justify-self:start; }
  .legend-project-bar { display:block; width:4px; height:24px; border-radius:3px;
                        background:var(--purple); box-shadow:0 0 6px var(--purple-soft); }
  .legend-freshness { display:flex; align-items:center; gap:7px; }
  .legend-freshness .freshness-dot { display:inline-block; }
  .theme-toggle { font-size:17px; }
  .theme-toggle-icon { width:100%; height:100%; display:grid; place-items:center;
                       align-items:center; justify-items:center; line-height:1;
                       text-align:center; }
  .health { display:inline-flex; align-items:center; gap:7px; color:var(--green);
            padding:5px 8px; border:1px solid var(--positive-border); border-radius:999px;
            background:var(--positive-soft);
            font:10px/1.2 ui-monospace,Menlo,monospace; letter-spacing:.08em;
            text-transform:uppercase; }
  .health-dot { width:7px; height:7px; border-radius:50%; background:var(--green);
                box-shadow:0 0 8px var(--positive-glow); }
  .health.reconnecting { color:var(--red); border-color:var(--danger-border);
                          background:var(--danger-soft); }
  .health.reconnecting .health-dot { background:var(--red);
                                      box-shadow:0 0 8px var(--danger-glow); }
  h1, h2 { font-family: var(--font-ui);
           letter-spacing:-.02em; }
  h1 { font-size:20px; font-weight:700; }
  .topbar h1 { white-space:nowrap; }
  h2 { font-size:15px; font-weight:650; }
  #meta { color:var(--dim); font:11px/1.4 ui-monospace,Menlo,monospace; }
  .tab-bar { order:2; flex:0 0 auto; display:flex; gap:4px;
             padding:8px max(28px,env(safe-area-inset-right,0px))
               env(safe-area-inset-bottom,0px) max(28px,env(safe-area-inset-left,0px));
             border-bottom:1px solid var(--line); background:var(--tabbar-bg); }
  .tab-link { min-width:112px; padding:10px 14px 11px; border:1px solid transparent;
              border-bottom:0; border-radius:8px 8px 0 0; color:var(--dim);
              text-align:center; text-decoration:none; font-weight:620; }
  .tab-link:hover { color:var(--txt); background:var(--accent-faint); }
  .tab-link[aria-selected="true"] { color:var(--blue); border-color:var(--line);
                                     background:var(--bg); }
  .tab-count { display:inline-grid; min-width:19px; min-height:19px; place-items:center;
               margin-left:5px; padding:1px 5px; border-radius:999px;
               background:var(--warning-soft); color:var(--amber);
               font:700 10px/1 ui-monospace,Menlo,monospace; vertical-align:1px; }
  .tab-panel { order:3; flex:1 1 auto; min-height:0; display:none; overflow:auto;
               padding:24px 28px 28px; position:relative; }
  .tab-panel.active { display:block; }
  .button { border:1px solid var(--line); border-radius:7px; background:var(--button-bg);
            color:var(--txt); padding:8px 12px; font-weight:650;
            transition:border-color .18s,background .18s,box-shadow .18s,transform .18s; }
  .button:hover:not(:disabled) { border-color:var(--accent-border); background:var(--accent-soft);
                                 box-shadow:0 0 18px var(--accent-faint); }
  /* T485 (doc 57/65): primary matches the prototype's .btn-primary/.dock-send
     component exactly (mf.css) — the shared variant every surface should
     consume, not a per-surface bespoke override. */
  .button.primary { background:var(--blue); border:none; border-radius:11px;
                    padding:8px 15px; font-size:13px; color:var(--primary-ink); }
  .button.primary:hover:not(:disabled) { background:var(--blue); filter:brightness(1.08);
                                         box-shadow:none; transform:none; }
  .button.primary:active:not(:disabled) { filter:brightness(0.95); transform:translateY(1px); }
  /* The prototype's launch-submit CTA widens the same component via an inline
     padding override (launch.html's Launch button); this is that as a shared
     size modifier instead of a one-off, for any surface with the same need. */
  .button.large,
  .button.primary.large { padding:10px 22px; }
  .button[aria-disabled="true"] { pointer-events:none; opacity:.5; }
  .button.danger { background:var(--danger-soft); color:var(--red); border-color:var(--danger-border); }
  .button.danger:hover:not(:disabled) { background:var(--danger-medium); border-color:var(--red); }
  .button.quiet { background:transparent; }
  .session-tree { min-width:0; }
  .session-children { display:grid; gap:10px; margin:10px 0 0 20px; padding-left:12px;
                      border-left:1px solid var(--accent-medium); }
  .session-children .card { --card-surface:var(--card-child); }
  .card { --card-surface:var(--card); --card-state-wash:transparent; --engine-line:var(--line);
          display:flex; flex-direction:column; width:100%; height:100%; color:inherit;
          text-decoration:none; text-align:left;
          background:linear-gradient(var(--card-state-wash),var(--card-state-wash)),var(--card-surface);
          border:1px solid var(--line); border-top-color:var(--engine-line);
          border-radius:8px; padding:15px 12px 13px; box-shadow:0 10px 26px var(--shadow-color);
          transition:border-color .2s,transform .2s,box-shadow .2s; }
  .card.state-working { --card-state-wash:var(--state-working-wash); }
  .card.state-needs_input { --card-state-wash:var(--state-needs-input-wash); }
  .card.state-awaiting_approval { --card-state-wash:var(--state-needs-input-wash); }
  .card.engine-codex { --engine-line:var(--engine-codex-line); }
  .card.engine-claude { --engine-line:var(--engine-claude-line); }
  .card.engine-cursor { --engine-line:var(--engine-cursor-line); }
  .card.engine-opencode { --engine-line:var(--engine-opencode-line); }
  .card.engine-deepagents { --engine-line:var(--engine-deepagents-line); }
  .card:hover { border-color:var(--accent-border); transform:translateY(-2px);
                border-top-color:var(--engine-line);
                box-shadow:0 14px 30px var(--shadow-color),0 0 20px var(--accent-faint); }
  .card-shell { position:relative; height:var(--agent-card-height); }
  .card-quick-actions { position:absolute; z-index:2; right:10px; bottom:10px;
                        display:flex; align-items:center; gap:5px; opacity:0;
                        pointer-events:none; transform:translateY(3px);
                        transition:opacity .15s,transform .15s; }
  .card-dock, .card-full-view { padding:5px 8px; border:1px solid var(--accent-border);
                                border-radius:7px; background:var(--topbar-bg); color:var(--blue);
                                font-size:11px; line-height:1.4; text-decoration:none; }
  .card-shell:hover .card-quick-actions, .card-quick-actions:focus-within {
    opacity:1; pointer-events:auto; transform:none;
  }
  .card.system-card { --card-surface:var(--system-card); border-color:var(--neutral-border); }
  .card.system-card:hover { border-color:var(--dim); }
  .card-header { display:grid; gap:6px; margin-bottom:8px; }
  .card-title-row, .card-meta-row { display:flex; align-items:center; gap:6px; min-width:0; }
  .project-hue-bar { width:3px; height:25px; flex:0 0 3px; border-radius:3px;
                     background:hsl(var(--project-hue),var(--project-saturation),var(--project-bar-lightness)); }
  .name { min-width:0; flex:1; font-weight:600; font-size:16px;
          overflow-wrap:anywhere; }
  .card:not(.system-card) .name {
    color:hsl(var(--project-hue),var(--project-saturation),var(--project-name-lightness)); }
  .chip { font-size:11.5px; padding:2px 9px; border-radius:99px; font-weight:600; letter-spacing:.02em; }
  .status-chip { display:inline-flex; align-items:center; gap:6px; }
  .st-working { background:var(--positive-soft); color:var(--green); }
  .st-idle { background:var(--neutral-soft); color:var(--idle-txt); }
  .st-needs_input { background:var(--warning-soft); color:var(--amber); }
  .st-awaiting_approval { background:var(--warning-soft); color:var(--amber); }
  .hn-mainframe { background:var(--accent-soft); }
  .hn-codex { background:var(--accent-soft); }
  .hn-claude { background:var(--purple-soft); }
  .hn-cursor { background:var(--neutral-soft); color:var(--txt-soft); }
  .hn-opencode { background:var(--accent-soft); }
  .hn-deepagents { background:var(--green-soft); }
  .hn-shell { background:var(--neutral-soft); color:var(--dim); }
  .guide-label { background:var(--purple-soft); color:var(--purple); }
  .engine-chip { display:inline-flex; align-items:center; gap:5px; color:var(--txt-soft); }
  .card-engine-mark { width:15px; height:15px; display:block; flex:0 0 15px; color:var(--slate); }
  .card-engine-mark.text-mark { display:grid; place-items:center; font-size:11px; font-weight:800; }
  .engine-chip.engine-working { color:var(--txt); border:1px solid var(--accent-medium); }
  .hn-codex .card-engine-mark { color:var(--engine-codex-mark); }
  .hn-claude .card-engine-mark { color:var(--engine-claude-mark); }
  .hn-cursor .card-engine-mark { color:var(--engine-cursor-mark); }
  .hn-opencode .card-engine-mark { color:var(--engine-opencode-mark); }
  .hn-deepagents .card-engine-mark { color:var(--engine-deepagents-mark); }
  .hn-codex.engine-working .card-engine-mark { filter:drop-shadow(0 0 3px var(--accent-border)); }
  .hn-claude.engine-working .card-engine-mark { filter:drop-shadow(0 0 3px var(--engine-claude-line)); }
  .hn-opencode.engine-working .card-engine-mark { filter:drop-shadow(0 0 3px var(--positive-border)); }
  .hn-deepagents.engine-working .card-engine-mark { filter:drop-shadow(0 0 3px var(--neutral-border)); }
  .system-label { background:var(--neutral-soft); color:var(--txt-soft); }
  .system-icon { width:24px; height:24px; display:grid; place-items:center; flex:0 0 auto;
                 border:1px solid var(--neutral-border); border-radius:6px; color:var(--dim); }
  .system-description { min-height:0; flex:1 1 auto; display:flex; align-items:center; color:var(--txt-soft);
                        border:1px solid var(--neutral-soft); border-radius:8px;
                        background:var(--inset-soft); padding:12px; }
  .snippet { background:var(--inset-bg); border:1px solid var(--line-faint);
             border-radius:6px; padding:12px 13px;
             font:13.5px/1.6 ui-monospace,Menlo,monospace; color:var(--dim);
             white-space:pre-wrap; overflow:hidden; min-height:0; max-height:none;
             flex:1 1 auto; display:block; }
  .activity-pill { z-index:3; min-height:30px; padding:5px 11px;
                   border-color:var(--accent-border); border-radius:999px;
                   background:var(--panel-bg); color:var(--cyan); box-shadow:var(--shadow);
                   font:650 11px/1.2 -apple-system,'Segoe UI',Roboto,sans-serif; }
  .transcript-shell { position:relative; min-height:260px; flex:1 1 auto; display:flex;
                      overflow:hidden; }
  .transcript-activity-pill { position:absolute; left:50%; bottom:12px;
                              transform:translateX(-50%); }
  .transcript-history-pill { position:absolute; left:50%; top:12px;
                             transform:translateX(-50%);
                             display:inline-flex; align-items:center; gap:6px;
                             white-space:nowrap; }
  .transcript-history-spinner { width:12px; height:12px; flex:0 0 auto;
                                border:2px solid var(--line);
                                border-top-color:var(--cyan); border-radius:50%;
                                animation:transcript-history-spin .8s linear infinite; }
  @keyframes transcript-history-spin { to { transform:rotate(360deg); } }
  .snippet-activity-pill { position:absolute; left:50%; bottom:18px;
                           transform:translateX(-50%); }
  .card-age { flex:0 0 auto; margin-left:auto; color:var(--slate);
              font:10px/1.2 ui-monospace,Menlo,monospace; text-align:right;
              white-space:nowrap; }
  .dot { width:8px; height:8px; border-radius:99px; display:inline-block; flex:0 0 auto; }
  .st-dot-working { background:var(--green); box-shadow:0 0 8px var(--positive-glow); }
  .st-dot-needs_input { background:var(--amber); box-shadow:0 0 7px var(--warning-glow); }
  .st-dot-awaiting_approval { background:var(--amber); box-shadow:0 0 9px var(--warning-glow); }
  .st-dot-idle { background:var(--slate); }
  .working-dot { animation:pulse 1.4s infinite; }
  @keyframes pulse { 50% { opacity:.35; } }

  .routines-section { margin-top:0; }
  .section-header { display:flex; align-items:baseline; justify-content:space-between;
                    gap:14px; margin-bottom:12px; }
  .section-header h2 { font-size:18px; }
  .section-meta { color:var(--dim); font-size:12px; }
  #routines-grid { display:grid; gap:9px; }
  .run-ok, .run-completed { background:var(--positive-soft); color:var(--green); }
  .run-running { background:var(--accent-faint); color:var(--blue); }
  .run-failed, .run-timeout { background:var(--danger-soft); color:var(--red); }
  .run-missed, .run-deferred { background:var(--warning-soft); color:var(--amber); }
  .run-none { background:var(--neutral-soft); color:var(--dim); }
  .empty-state { color:var(--dim); border:1px dashed var(--line); border-radius:10px;
                 padding:18px; text-align:center; }
  .apps-section { margin-top:0; }
  .apps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
               gap:12px; }
  .app-card { min-width:0; display:grid; gap:12px; padding:16px; text-align:left;
              border:1px solid var(--line); border-radius:9px; background:var(--card);
              box-shadow:0 10px 26px var(--shadow-color); }
  .app-card:hover { border-color:var(--accent-border); background:var(--accent-faint); }
  .app-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
  .app-card h3 { margin:0; color:var(--txt); font-size:14px; }
  .app-card p { margin:0; color:var(--txt-soft); font-size:12px; line-height:1.55; }
  .app-status-running, .app-status-scheduled { color:var(--green); background:var(--positive-soft); }
  .app-status-stopped { color:var(--dim); background:var(--neutral-soft); }
  .app-status-needs_attention { color:var(--amber); background:var(--warning-soft); }
  .app-panel { width:min(900px,100%); height:min(82vh,760px); }
  .app-detail-body { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 280px;
                     gap:18px; padding:20px; overflow:auto; }
  .app-detail-side { display:grid; align-content:start; gap:14px; }
  .app-facts, .app-activity { display:grid; gap:8px; padding:13px;
                              border:1px solid var(--line); border-radius:8px;
                              background:var(--muted-bg); }
  .app-fact small { display:block; color:var(--dim); text-transform:uppercase;
                    letter-spacing:.06em; font-size:9px; }
  .app-activity-item { padding-top:8px; border-top:1px solid var(--line);
                       color:var(--txt-soft); font-size:11px; }
  .app-activity-item:first-child { padding-top:0; border-top:0; }
  .app-control-result { min-height:18px; color:var(--dim); font-size:11px; }
  .placeholder-section.active { display:grid; grid-template-rows:auto minmax(0,1fr); }
  .placeholder-empty { align-self:center; justify-self:center; width:min(560px,100%);
                       padding:42px 32px; border:1px solid var(--line); border-radius:12px;
                       background:linear-gradient(145deg,var(--card),var(--muted-bg));
                       box-shadow:0 18px 44px var(--shadow-color); text-align:center; }
  .placeholder-mark { width:44px; height:44px; display:grid; place-items:center;
                      margin:0 auto 16px; border:1px solid var(--accent-border);
                      border-radius:50%; background:var(--accent-faint); color:var(--blue);
                      font:700 18px/1 ui-monospace,Menlo,monospace; }
  .placeholder-empty h3 { margin:0; color:var(--txt); font-size:17px; }
  .placeholder-empty p { max-width:440px; margin:9px auto 0; color:var(--txt-soft);
                         line-height:1.55; }
  .placeholder-empty .button { margin-top:18px; }

  .connections-layout { display:grid; gap:18px; }
  /* Operator round (2026-09-05): bottom-shade retired — shared selection
     language, see design-system/tabs.css. */
  .conn-subtabs { display:flex; gap:3px; flex-wrap:wrap; align-items:center; }
  .conn-subtab { appearance:none; padding:var(--cc-tab-pad); border:0; background:none;
                 color:var(--cc-tab-ink); font:inherit; font-size:13px; font-weight:600;
                 cursor:pointer; border-radius:var(--cc-tab-radius); }
  .conn-subtab:hover { color:var(--cc-tab-ink-hover); background:var(--cc-tab-bg-hover); }
  .conn-subtab[aria-selected="true"] { color:var(--cc-tab-ink-selected);
                 background:var(--cc-tab-bg-selected);
                 box-shadow:inset 0 0 0 1px var(--cc-tab-line-selected); }
  .conn-subtab:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
  .conn-pane { display:grid; gap:16px; }
  .conn-pane[hidden] { display:none; }
  .conn-pane-head { display:grid; gap:4px; }
  .conn-pane-title-row { display:flex; align-items:center; justify-content:space-between;
                         gap:12px; }
  .conn-pane-head h3 { margin:0; color:var(--txt); font-size:15px; }
  .conn-pane-explainer { max-width:760px; margin:0; color:var(--txt-soft); font-size:12px;
                         line-height:1.55; }
  .catalogue-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;
                    align-items:stretch; }
  button.catalog-card { position:relative; appearance:none; display:grid;
                        grid-template-rows:auto 1fr auto; gap:9px;
                        height:100%; text-align:left; padding:14px; cursor:pointer;
                        border:1px solid var(--line); border-radius:11px; background:var(--card);
                        color:inherit; font:inherit; }
  button.catalog-card:hover, button.catalog-card:focus-visible { border-color:var(--blue);
                        outline:none; box-shadow:0 6px 16px var(--shadow-color); }
  .catalog-card-head { display:flex; align-items:center; gap:9px; padding-right:66px; }
  .catalog-card-head strong { color:var(--txt); font-size:13px; overflow-wrap:anywhere; }
  .catalog-card-purpose { margin:0; color:var(--txt-soft); font-size:11.5px; line-height:1.5;
                          display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
                          overflow:hidden; }
  .catalog-card-foot { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
  .catalog-chip { padding:2px 8px; border-radius:999px; font-size:10px; font-weight:700;
                  border:1px solid var(--line); color:var(--txt-soft); background:var(--panel-bg); }
  .catalog-chip.connected { color:var(--good, #2ecc71); border-color:currentColor; }
  .card-category-badge { position:absolute; top:12px; right:12px; padding:2px 8px; border-radius:999px;
                         font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
                         border:1px solid var(--line); color:var(--dim); background:var(--panel-bg); }
  .card-status-badge { display:inline-flex; align-items:center; gap:5px; }
  .card-status-badge.status-connected { color:var(--good, #2ecc71); border-color:currentColor; }
  .card-status-badge.status-building { color:var(--amber); border-color:currentColor; }
  /* WP5: richer package states overlaid on registry cards. */
  .card-status-badge.status-installed { color:var(--blue); border-color:currentColor; }
  .card-status-badge.status-attention { color:var(--amber); border-color:currentColor; }
  .card-status-badge.status-modified { color:var(--txt-soft); border-color:currentColor; }
  .card-status-badge.status-update { color:var(--blue); border-color:currentColor; }
  /* T197: a settled (cancelled/expired) factory build fossil — dismissible, muted. */
  .card-status-badge.status-dismissed { color:var(--dim); border-color:var(--line); }
  .card-status-dot { width:7px; height:7px; border-radius:50%; background:currentColor;
                     flex:0 0 auto; }
  /* WP5: consent screen block (plain-language permissions) in the Manage shell. */
  .manage-consent { display:grid; gap:10px; }
  .manage-consent-line { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; }
  .manage-consent-line > div { min-width:0; }
  .manage-consent-line .manage-consent-icon { font-size:14px; line-height:1.4; }
  .manage-consent-line strong { display:block; color:var(--txt); font-size:12px; }
  .manage-consent-line small { color:var(--txt-soft); font-size:11.5px; line-height:1.5;
                               overflow-wrap:anywhere; word-break:break-word; }
  .connector-detail-heading { display:flex; align-items:center; gap:10px; min-width:0; }
  .connector-detail-body dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; }
  .connector-detail-body dt { color:var(--dim); font-size:11px; }
  .connector-detail-body dd { margin:0; color:var(--txt); font-size:12px; }
  .connector-detail-section { margin-top:14px; display:grid; gap:6px; }
  .connector-detail-section h2 { margin:0; color:var(--txt); font-size:12px; }
  .connector-tool-list { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
  .connector-tool-list li { display:flex; gap:8px; align-items:center; color:var(--txt-soft); font-size:11.5px; }
  .connector-detail-actions { margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .connector-detail-note { color:var(--dim); font-size:11px; line-height:1.5; }
  .connection-add-trigger { flex:0 0 auto; width:max-content; }
  #connection-add-overlay .modal-panel { width:min(680px,100%); height:auto; max-height:88vh; }
  .modal-panel .panel-header h1 { font-size:15px; }
  .modal-body { padding:22px; overflow:auto; }
  .connection-add-intro { display:grid; gap:6px; margin:0 0 20px; }
  .connection-add-intro strong { color:var(--txt); font-size:13px; }
  .connection-add-intro p { margin:0; color:var(--txt-soft); font-size:12px; line-height:1.55; }
  .connection-add { width:100%; display:grid; align-items:start; gap:16px; margin:0; }
  .connection-add label { min-width:0; display:grid; align-content:start; gap:5px;
                          color:var(--txt-soft); font-size:12px; }
  .connection-field-label { color:var(--txt); font-weight:700; }
  .connection-field-help { color:var(--dim); font-size:10.5px; line-height:1.4; }
  .connection-add input, .connection-add textarea { width:100%; margin-top:6px; }
  .connection-add textarea { min-height:108px; resize:vertical; }
  .connection-add-actions { display:flex; align-items:center; justify-content:space-between;
                            gap:12px; flex-wrap:wrap; }
  .connection-add-result { min-height:18px; margin:0; color:var(--red); font-size:12px; }
  .connection-add-result[data-tone="status"] { color:var(--txt-soft); }
  .connection-add-confirmation { display:grid; justify-items:center; gap:12px;
                                 padding:26px 12px 18px; text-align:center; }
  .connection-add-confirmation[hidden] { display:none; }
  .connection-add-confirmation-mark { display:grid; place-items:center; width:44px; height:44px;
                                      border-radius:50%; color:var(--green);
                                      border:1px solid var(--positive-border);
                                      background:var(--positive-soft); font-size:22px;
                                      font-weight:800; }
  .connection-add-confirmation h2 { margin:0; color:var(--txt); font-size:17px; }
  .connection-add-confirmation p { max-width:480px; margin:0; color:var(--txt-soft);
                                   font-size:12px; line-height:1.55; }
  .connection-add-confirmation .actions { justify-content:center; }
  .connections-result { min-height:18px; margin:6px 0 0; color:var(--red); font-size:12px; }
  .connections-result[data-tone="status"] { color:var(--txt-soft); }
  .connections-result[data-tone="success"] { color:var(--green); }
  @media (max-width:760px) {
    .connections-result:not(:empty) {
      position:fixed;
      z-index:18;
      right:max(12px,env(safe-area-inset-right,0px));
      bottom:calc(4.5rem + var(--cc-visual-viewport-bottom,0px)
        + env(safe-area-inset-bottom,0px));
      left:max(12px,env(safe-area-inset-left,0px));
      margin:0;
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius:8px;
      background:var(--card);
      box-shadow:0 10px 30px var(--shadow-color);
      white-space:normal;
      overflow-wrap:anywhere;
      line-height:1.4;
    }
  }
  .connections-group { display:grid; gap:10px; }
  .connections-group-header { display:flex; align-items:baseline; justify-content:space-between;
                              gap:14px; }
  .connections-group h3 { margin:0; color:var(--txt); font-size:14px; }
  .connection-grid, .default-connection-grid, .assistant-surfaces, .storage-card-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
    grid-auto-rows:1fr; align-items:stretch; gap:12px;
  }
  .connection-card, .default-connection, .assistant-surface, .storage-card {
    box-sizing:border-box; width:100%; min-width:0; height:100%; overflow:hidden;
    padding:16px; border:1px solid var(--line); border-radius:9px; background:var(--card);
    box-shadow:0 8px 20px var(--shadow-color);
  }
  .connection-card { display:flex; flex-direction:column; }
  .connection-card-head { display:flex; align-items:center; gap:10px; }
  .connection-logo { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center;
                     border-radius:8px; background:var(--accent-faint); color:var(--blue);
                     overflow:hidden; font:700 12px/1 ui-monospace,Menlo,monospace; }
  .connection-logo > * { grid-area:1 / 1; }
  .connection-logo img { width:26px; height:26px; object-fit:contain; border-radius:5px; }
  .connection-logo.logo-loaded .connection-logo-fallback { visibility:hidden; }
  .connection-title { min-width:0; flex:1; }
  .connection-title strong { display:block; overflow:visible; text-overflow:clip;
                             white-space:normal; overflow-wrap:anywhere; color:var(--txt);
                             font-size:13px; line-height:1.3; }
  .connection-title small { display:block; margin-top:3px; color:var(--dim); font-size:10.5px; }
  .connection-health { width:9px; height:9px; flex:0 0 auto; border-radius:50%;
                       background:var(--dim); }
  .connection-health.healthy { background:var(--green); box-shadow:0 0 9px var(--positive-soft); }
  .connection-health.attention { background:var(--amber); }
  .connection-health.unavailable { background:var(--red); }
  .connection-scopes { display:-webkit-box; margin:10px 0 0; overflow:hidden;
                       text-overflow:ellipsis; overflow-wrap:anywhere; -webkit-box-orient:vertical;
                       -webkit-line-clamp:2; color:var(--txt-soft); font-size:11.5px;
                       line-height:1.45; }
  .connection-card-actions { display:flex; justify-content:flex-end; margin-top:auto; padding-top:12px; }
  .default-connection { appearance:none; width:100%; height:100%; display:grid;
                        grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto 1fr;
                        align-items:start; gap:10px; color:inherit; text-align:left; cursor:pointer; }
  .default-connection > .connection-logo { grid-row:1 / 3; }
  .default-connection > .connection-switch { grid-column:2; grid-row:2; align-self:end;
                                              margin-top:auto; }
  .default-connection:hover:not(:disabled) { border-color:var(--blue); background:var(--accent-faint); }
  .default-connection[aria-checked="true"] { border-color:var(--positive-border);
                                              background:var(--positive-soft); }
  .connection-switch { color:var(--blue); font-size:11px; font-weight:700; }
  .always-on-setup { display:grid; gap:8px; margin-top:10px; padding:12px 14px;
                     border:1px solid var(--accent-border); border-radius:9px;
                     background:var(--accent-faint); color:var(--txt-soft); font-size:12px; }
  .always-on-setup strong { color:var(--txt); }
  .harness-intro { max-width:760px; margin:0; color:var(--txt-soft); font-size:12px;
                   line-height:1.55; }
  .factory-intro { max-width:760px; color:var(--txt-soft); font-size:12px; line-height:1.55; }
  .inline-text-action { appearance:none; padding:0; border:0; background:none; color:var(--blue);
                        font:inherit; font-weight:700; text-decoration:underline;
                        text-underline-offset:2px; }
  /* T225: brain card row needs the full pane — drop the 760px cap that forced 4+1 wrap. */
  .assistant-system-card { display:grid; gap:14px; padding:15px; border:1px solid var(--accent-border);
                           border-radius:10px; background:var(--accent-faint); max-width:none; width:100%; }
  .assistant-system-head { display:flex; align-items:center; justify-content:space-between;
                           gap:12px; flex-wrap:wrap; }
  .assistant-system-health { display:flex; align-items:center; gap:8px; color:var(--txt); }
  .assistant-system-health .connection-health { width:8px; height:8px; }
  .assistant-system-copy { color:var(--txt-soft); font-size:11.5px; }
  .assistant-brain { display:grid; gap:10px; padding-top:12px;
                     border-top:1px solid var(--line); }
  .assistant-brain-title { margin:0; color:var(--txt); font-size:12px; font-weight:700; }
  .assistant-brain-powered { margin:0; color:var(--txt-soft); font-size:11px; }
  .assistant-credits-note { margin:0; color:var(--warn, #b45309); font-size:11.5px; }
  /* T219/T225: full-width row for 4–5 engines; cards never overflow the pane. */
  .assistant-brain-cards { display:grid; gap:10px; width:100%;
                           grid-template-columns:repeat(5,minmax(0,1fr)); }
  .brain-card { display:grid; gap:8px; align-content:start; min-width:0; max-width:100%;
                padding:11px 12px; overflow:hidden;
                border:1px solid var(--line); border-radius:12px; background:var(--card-child); }
  .brain-card.is-current { border-color:var(--accent-border); background:var(--accent-soft); }
  .brain-card.is-unavailable { opacity:.78; }
  .brain-card-head { display:flex; align-items:center; gap:6px; min-width:0; max-width:100%; }
  .brain-card-head .engine-chip { pointer-events:none; min-width:0; flex:1 1 auto; }
  .brain-card-head .engine-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .brain-card-current { margin-left:auto; display:inline-flex; align-items:center; gap:4px;
                        max-width:100%; min-width:0; padding:2px 8px; border-radius:999px;
                        font-size:10px; font-weight:750;
                        border:1px solid var(--accent-border); background:var(--accent-soft);
                        color:var(--cyan); flex:0 1 auto; overflow:hidden;
                        text-overflow:ellipsis; white-space:nowrap; }
  .brain-card-model { margin:0; color:var(--txt-soft); font-size:11px; line-height:1.4; }
  .brain-card-reason { margin:0; color:var(--txt-soft); font-size:11px; line-height:1.45; }
  .brain-card-foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px; }
  .brain-card-switch { padding:5px 12px; font-size:11.5px; }
  .brain-card-secrets { background:none; border:none; padding:0; color:var(--cyan);
                        font-size:11px; font-weight:700; cursor:pointer; text-decoration:underline; }
  .brain-card-secrets:hover { color:var(--accent-strong); }
  .engine-unavailable-reason { grid-column:1/-1; color:var(--dim);
                               font-size:10.5px; line-height:1.35; }
  .assistant-brain-reason { max-width:620px; margin:0; color:var(--txt-soft);
                            font-size:11.5px; line-height:1.45; }
  .assistant-brain-status { display:flex; align-items:center; gap:8px; margin:0;
                            max-width:620px; padding:8px 11px; border-radius:10px;
                            font-size:12px; line-height:1.4; font-weight:600; }
  .assistant-brain-status[hidden] { display:none; }
  .assistant-brain-status.is-progress { border:1px solid var(--accent-border);
                                        background:var(--accent-soft); color:var(--txt); }
  .assistant-brain-status.is-success { border:1px solid var(--positive-border);
                                       background:var(--positive-soft); color:var(--green); }
  .assistant-brain-status.is-error { border:1px solid var(--danger-border);
                                     background:var(--danger-soft); color:var(--red); }
  .assistant-brain-status .brain-spinner { width:13px; height:13px; flex:0 0 auto;
                                           border:2px solid var(--line); border-top-color:var(--cyan);
                                           border-radius:50%;
                                           animation:sdk-activity-spin .8s linear infinite; }
  .assistant-brain-status-mark { flex:0 0 auto; font-weight:800; }
  .assistant-surface { display:grid; align-content:start; gap:9px; }
  .assistant-surface-head { display:flex; align-items:center; gap:10px; }
  .assistant-surface-head h4 { margin:0; }
  .assistant-telegram-paired-line .connection-logo { width:26px; height:26px;
                                                     font-size:10px; }
  .assistant-telegram-paired-line .connection-logo img { width:20px; height:20px; }
  .assistant-surface h4 { color:var(--txt); font-size:13px; }
  .assistant-surface p { color:var(--txt-soft); font-size:11.5px; line-height:1.5; }
  .assistant-surface-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
  .assistant-surface-actions[hidden] { display:none; }
  .assistant-pair-error { margin:8px 0 0; color:var(--red); font-size:12px; line-height:1.45;
    border:1px solid var(--danger-border); border-radius:8px; padding:8px 10px; }
  .assistant-pair-error[hidden] { display:none; }
  .assistant-telegram-paired { display:grid; gap:8px; padding:10px 12px; border:1px solid var(--line);
                               border-radius:8px; background:var(--accent-faint); }
  .assistant-telegram-paired[hidden] { display:none; }
  .assistant-telegram-paired-line { display:flex; align-items:center; gap:8px; margin:0; }
  .assistant-paired-status { display:inline-flex; align-items:center; gap:5px;
                             color:var(--green); border-color:var(--positive-border);
                             background:var(--positive-soft); }
  .assistant-paired-check { font-weight:800; line-height:1; }
  .assistant-telegram-paired .assistant-surface-actions { gap:10px; }
  .assistant-telegram-paired .assistant-surface-actions .button {
    min-height:0; padding:4px 8px; font-size:11px;
  }
  .assistant-pairing { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; }
  .assistant-pairing-qr { width:132px; height:132px; max-width:132px; max-height:132px;
                          flex:0 0 auto; padding:6px; border-radius:8px;
                          background:var(--paper); object-fit:contain; image-rendering:pixelated; }
  .assistant-pairing-detail { display:grid; gap:7px; min-width:0; }
  .assistant-pairing-detail a { color:var(--blue); overflow-wrap:anywhere; }
  .assistant-pairing-placeholder { display:grid; place-items:center; width:132px; height:132px;
                                   max-width:132px; flex:0 0 auto; padding:12px;
                                   border:1px dashed var(--line); border-radius:8px;
                                   color:var(--dim); text-align:center; font-size:10.5px; }
  .assistant-add-on { justify-self:start; background:var(--warning-soft); color:var(--amber); }
  .secret-add-shell { border:1px solid var(--line); border-radius:9px; background:var(--card); }