/* ═══════════════════════════════════════════════════════════════
   AgencyOS — settings-v5.css
   V5 Blue: the Settings page, the sidebar profile menu and the
   notification drawer. Values copied from the reference v4.css
   (.settingsShell/.sgPage/.usPage, .profileMenu, .notificationDrawer).
   ═══════════════════════════════════════════════════════════════ */
:root {
  --st-bg: #070a0d; --st-surface: #0d1116; --st-surface-2: #131c24; --st-line: #22313b;
  --st-ink: #eff7f5; --st-muted: #8e9aa5; --st-primary: #17c7df; --st-primary-2: #47e282;
  --st-soft: #0e2430; --st-teal: #36d8c7; --st-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
[data-theme="light"] {
  --st-bg: #eef6f8; --st-surface: #ffffff; --st-surface-2: #e3f0f3; --st-line: #cddfe4;
  --st-ink: #17252b; --st-muted: #566a73; --st-primary: #12739a; --st-primary-2: #24aa9f;   /* primary #167da0 → #12739a: AA for brand-blue text on the pale tints; muted #566a73 → #566a73: AA (≥4.5:1) on every light surface, same hue */
  --st-soft: #deeff7; --st-teal: #08796f; --st-shadow: 0 14px 40px rgba(21, 82, 101, .12);
}

/* ── Settings page ── */
#viewSettings { background: var(--st-bg); color: var(--st-ink); font-family: var(--app-font, Inter, 'Outfit', system-ui, sans-serif); overflow: auto; }
#viewSettings *, #viewSettings *::before, #viewSettings *::after { box-sizing: border-box; }
#viewSettings svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.st5 { padding: 24px; max-width: 1560px; margin: 0 auto; }
.st5-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.st5-eyebrow { display: block; color: var(--st-primary); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.st5-head h1 { margin: 6px 0 4px; font-size: 36px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.st5-head p { margin: 0; color: var(--st-muted); font-size: 16px; }
.st5-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--st-line); border-radius: 11px; background: var(--st-surface); color: var(--st-ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.st5-btn:hover { border-color: color-mix(in srgb, var(--st-primary) 50%, var(--st-line)); color: var(--st-primary); }
.st5-btn.primary { border-color: transparent; background: linear-gradient(135deg, var(--st-primary), var(--st-primary-2)); color: #fff; font-weight: 700; box-shadow: 0 8px 20px color-mix(in srgb, var(--st-primary) 24%, transparent); }
:root:not([data-theme="light"]) .st5-btn.primary { color: #061014; }
.st5-btn.primary:hover { color: #fff; filter: brightness(1.06); }
:root:not([data-theme="light"]) .st5-btn.primary:hover { color: #061014; }
.st5-btn.danger { border-color: rgba(214, 69, 69, .4); color: #d64545; }
.st5-btn.danger:hover { background: rgba(214, 69, 69, .08); color: #d64545; border-color: #d64545; }
.st5-btn:focus-visible, .settingsTabs button:focus-visible, .sgOpt:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; }

.settingsShell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; min-height: 440px; height: calc(100vh - 190px); border: 1px solid var(--st-line); border-radius: 14px; background: var(--st-surface); overflow: hidden; }
.settingsTabs { display: grid; align-content: start; gap: 2px; padding: 16px 12px; border-right: 1px solid var(--st-line); background: var(--st-surface-2); overflow-y: auto; }
.settingsTabs button { position: relative; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--st-muted); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.settingsTabs button svg { width: 16px; height: 16px; }
.settingsTabs button:hover { background: var(--st-surface); color: var(--st-primary); }
.settingsTabs button.active { background: color-mix(in srgb, var(--st-primary) 10%, var(--st-surface)); color: var(--st-primary); }
.settingsTabs button.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--st-primary); }
.settingsContent { min-width: 0; height: 100%; padding: 28px 36px 32px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--st-line) transparent; --st-surface-2: var(--st-surface-2); }
.st5-empty { padding: 48px 20px; border: 1px dashed var(--st-line); border-radius: 12px; color: var(--st-muted); text-align: center; }
.st5-note { margin: 0; color: var(--st-muted); font-size: 12.5px; }

/* General / Account */
.sgPage { display: grid; gap: 28px; width: 100%; }
.sgHead h2 { margin: 0 0 4px; font-size: 22px; }
.sgHead p { margin: 0; color: var(--st-muted); font-size: 14px; }
.sgBlock { display: grid; gap: 14px; }
.sgBlockHead h3 { margin: 0 0 2px; font-size: 15px; }
.sgBlockHead p { margin: 0; color: var(--st-muted); font-size: 13px; }
.sgGrid { display: grid; gap: 14px; }
.sgGrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sgGrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sgOpt { position: relative; display: grid; gap: 14px; padding: 12px 12px 14px; border: 1.5px solid var(--st-line); border-radius: 14px; background: var(--st-surface); color: var(--st-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.sgOpt:hover { border-color: color-mix(in srgb, var(--st-primary) 45%, var(--st-line)); }
.sgOpt.selected { border-color: var(--st-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary) 14%, transparent); }
.sgOptText { display: grid; gap: 2px; padding: 0 4px; min-width: 0; }
.sgOptText strong { font-size: 14px; }
.sgOptText small { color: var(--st-muted); font-size: 12.5px; line-height: 1.4; }
.sgTick { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--st-primary); color: #fff; opacity: 0; transform: scale(.7); transition: opacity .15s ease, transform .15s ease; }
.sgTick svg { width: 13px; height: 13px; stroke-width: 2.6; }
.sgOpt.selected .sgTick { opacity: 1; transform: scale(1); }
.sgPreview { display: grid; grid-template-columns: 34px 1fr; height: 84px; border: 1px solid var(--st-line); border-radius: 10px; overflow: hidden; }
.sgPreview b { background: #dbe9ee; }
.sgPreview > span { display: grid; align-content: center; gap: 6px; padding: 12px; }
.sgPreview i { display: block; height: 8px; border-radius: 4px; background: #cddfe4; }
.sgPreview i:first-child { width: 55%; background: #167da0; }
.sgPreview.light { background: #f4f9fb; }
.sgPreview.dark { background: #0d1116; }
.sgPreview.dark b { background: #161d25; }
.sgPreview.dark i { background: #26313b; }
.sgPreview.dark i:first-child { background: #17c7df; }
.sgAa { display: grid; place-items: center; height: 84px; border-radius: 10px; background: var(--st-surface-2); font-size: 34px; font-weight: 700; }
.sgFoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--st-line); color: var(--st-muted); font-size: 13px; }
.sgFoot > span { display: inline-flex; align-items: center; gap: 8px; }
.sgFoot svg { width: 15px; height: 15px; color: var(--st-primary); }
.sgProfile { display: flex; align-items: center; gap: 18px; padding: 22px; border: 1px solid var(--st-line); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--st-primary) 9%, var(--st-surface)), var(--st-surface) 70%); }
.sgAvatar { display: grid; place-items: center; flex: 0 0 68px; width: 68px; height: 68px; border-radius: 50%; background: var(--st-primary); color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 0 0 4px var(--st-surface); }
:root:not([data-theme="light"]) .sgAvatar { color: #061014; }
.sgProfileText { display: grid; gap: 3px; flex: 1; min-width: 0; }
.sgProfileText strong { font-size: 18px; }
.sgProfileText span { color: var(--st-muted); font-size: 14px; }
.sgProfileText em { color: var(--st-primary); font-size: 12.5px; font-style: normal; font-weight: 700; }
.sgFields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sgField { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--st-line); border-radius: 12px; background: var(--st-surface-2); }
.sgField span { color: var(--st-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.sgField strong { font-size: 14.5px; overflow-wrap: anywhere; }

/* Usage */
.usPage { display: grid; gap: 22px; }
.usHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--st-line); }
.usHead h2 { margin: 0 0 4px; font-size: 24px; }
.usHead p { margin: 0; color: var(--st-muted); font-size: 14px; }
.usHeadChips { display: flex; align-items: center; gap: 10px; }
.usMeters { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.usMeter { --usc: var(--st-teal); display: flex; align-items: center; gap: 20px; padding: 20px; border: 1px solid var(--st-line); border-radius: 18px; background: var(--st-surface); }
.usMeter.mid { --usc: #d99a1f; }
.usMeter.high { --usc: #d64545; }
.usRing { display: grid; place-items: center; flex: 0 0 104px; width: 104px; height: 104px; border-radius: 50%; }
.usRing > span { display: grid; place-items: center; align-content: center; width: 80px; height: 80px; border-radius: 50%; background: var(--st-surface); }
.usRing strong { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.usRing small { margin-top: 4px; color: var(--st-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.usMeterText { display: grid; gap: 6px; min-width: 0; }
.usMeterText h3 { margin: 0; font-size: 16px; }
.usMeterText p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.usMeterText em { display: inline-flex; align-items: center; gap: 6px; color: var(--st-muted); font-size: 12.5px; font-style: normal; font-weight: 600; }
.usMeterText em svg { width: 13px; height: 13px; }
.usCard { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--st-line); border-radius: 18px; background: var(--st-surface); }
.usCardHead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.usCardHead h3 { margin: 0; font-size: 15px; }
.usCardHead span { color: var(--st-muted); font-size: 12.5px; font-weight: 700; }
.usShares { display: grid; gap: 14px; }
.usShare { display: grid; gap: 7px; }
.usShareTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.usShareTop strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.usShareTop span { color: var(--st-muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.usShare i { display: block; height: 8px; border-radius: 999px; background: var(--st-surface-2); overflow: hidden; }
.usShare b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--st-primary), var(--st-primary-2)); }

/* embedded legacy pages (Security / Skills / MCPs) sit on the V5 surface */
.st5-embedded { background: transparent; --bg-base: var(--st-surface); --bg-elevated: var(--st-surface); --bg-overlay: var(--st-surface); --border-subtle: var(--st-line); --border-muted: var(--st-line); --text-primary: var(--st-ink); --text-muted: var(--st-muted); --cyan: var(--st-primary); font-family: inherit; }
.st5-embedded .adm-card, .st5-embedded .cm-card { border-radius: 16px; }

/* reference v4.css: the side tabs stay until 700px (then a 3-up tab grid); content padding tightens at 1000px */
@media (max-width: 1000px) {
  .settingsContent { padding: 20px 18px; }
  .st5 { padding: 16px; }
}
@media (max-width: 700px) {
  .settingsShell { grid-template-columns: minmax(0, 1fr); gap: 0; height: auto; overflow: visible; }
  /* the reference's own 3-up tab grid collides with the content at phone width, so the tabs stay one scrollable row */
  .settingsTabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--st-line); padding: 10px; scrollbar-width: thin; }
  .settingsTabs button.active::before { display: none; }
  .settingsContent { height: auto; }
  .sgGrid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sgGrid.two, .sgGrid.three, .sgFields { grid-template-columns: minmax(0, 1fr); }
  .st5-head { flex-direction: column; align-items: stretch; }
  .usMeter { flex-direction: column; text-align: center; }
}

/* ── sidebar profile menu (reference .profileMenu) ── */
#sidebar .rs-dropdown {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); top: auto; z-index: 300;
  display: none; flex-direction: column; gap: 0; min-width: 0; width: auto; padding: 6px;
  border: 1px solid var(--sb-line, var(--st-line)); border-radius: 12px; background: var(--sb-bg, var(--st-surface));
  box-shadow: 0 16px 40px rgba(20, 50, 60, .16);
}
#sidebar .rs-dropdown.open { display: flex; }
#sidebar .rs-dropdown-label { display: none; }
#sidebar .rs-dropdown .rs-option {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--sb-ink, var(--st-ink)); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
}
#sidebar .rs-dropdown .rs-option svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--sb-muted, var(--st-muted)); }
#sidebar .rs-dropdown .rs-option:hover { background: var(--sb-surface-2, var(--st-surface-2)); color: var(--sb-primary, var(--st-primary)); }
#sidebar .rs-dropdown .rs-option:hover svg { color: inherit; }
#sidebar .rs-dropdown .menuRule { display: block; height: 1px; margin: 5px 4px; background: var(--sb-line, var(--st-line)); }
#sidebar.collapsed .rs-dropdown { left: 58px; right: auto; bottom: 0; width: 220px; }

/* ── notification drawer (reference .notificationOverlay / .notificationDrawer) ── */
.notif-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: var(--sidebar-w, 256px); z-index: 2390; background: rgba(6, 25, 32, .12); animation: stFade .2s ease-out; }
.notif-backdrop.hidden { display: none; }
.notif-panel {
  position: fixed; z-index: 2400; top: 0; bottom: 0; left: var(--sidebar-w, 256px); right: auto; max-height: none;
  width: min(480px, calc(100vw - 120px)); display: flex; flex-direction: column;
  border: 0; border: 0; border-left: 1px solid var(--st-line); border-right: 1px solid var(--st-line); border-radius: 0;
  background: var(--st-surface); color: var(--st-ink); box-shadow: 16px 0 42px rgba(20, 50, 60, .16);
  font-family: var(--app-font, Inter, 'Outfit', system-ui, sans-serif); font-size: 14px; line-height: 1.45;
  animation: stSlide .24s cubic-bezier(.2, .8, .2, 1);
}
.notif-panel.hidden { display: none; }
.notif-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 14px; border-bottom: 0; }
.notif-eyebrow { display: block; color: var(--st-primary); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.notif-panel-title { display: block; margin: 4px 0 0; font-size: 20px; font-weight: 700; line-height: 1.2; }
.notif-head-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.notif-mark-all { padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--st-primary); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.notif-mark-all:hover { background: var(--st-soft); }
.notif-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--st-line); border-radius: 10px; background: var(--st-surface); color: var(--st-muted); cursor: pointer; }
.notif-close:hover { color: var(--st-primary); border-color: var(--st-primary); }
.notif-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.notif-filters { display: flex; flex-wrap: nowrap; gap: 0; padding: 0 12px; border-bottom: 1px solid var(--st-line); overflow-x: auto; scrollbar-width: none; }
.notif-filter { position: relative; display: flex; align-items: center; gap: 7px; padding: 10px 11px 12px; flex: none; white-space: nowrap; line-height: 1.4; height: auto; border: 0; background: transparent; color: var(--st-muted); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.notif-filter:hover { color: var(--st-ink); }
.notif-filter.is-active { color: var(--st-primary); }
.notif-filter.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--st-primary); }
.notif-filter-count { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--st-primary) 14%, var(--st-surface)); color: var(--st-primary); font-size: 11px; font-weight: 700; text-align: center; }
.notif-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 20px; }
.notif-list { display: grid; align-content: start; gap: 6px; margin: 0; padding: 0; list-style: none; }
.notif-row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 10px; align-items: start; gap: 12px; padding: 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; list-style: none; transition: background-color .15s ease, border-color .15s ease; }
.notif-row:hover { background: var(--st-surface-2); border-color: var(--st-line); }
.notif-row.is-unread { background: color-mix(in srgb, var(--st-primary) 6%, var(--st-surface)); }
.notif-row-icon { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--st-surface-2); color: var(--st-muted); }
.notif-row.sev-error .notif-row-icon, .notif-row.sev-warning .notif-row-icon { background: color-mix(in srgb, var(--st-primary) 14%, var(--st-surface)); color: var(--st-primary); }
.notif-row-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notif-row-body { grid-column: 2; grid-row: 1; display: grid; gap: 3px; min-width: 0; }
.notif-row-title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.notif-row:not(.is-unread) .notif-row-title { font-weight: 600; }
.notif-row-msg { color: var(--st-muted); font-size: 13px; line-height: 1.45; }
.notif-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; color: var(--st-muted); font-size: 11.5px; }
.notif-row-dot { grid-column: 3; grid-row: 1; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.notif-row.is-unread .notif-row-dot { background: var(--st-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-primary) 14%, transparent); }
.notif-cta, .notif-mark { padding: 3px 8px; border: 1px solid var(--st-line); border-radius: 8px; background: var(--st-surface); color: var(--st-primary); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.notif-cta:hover, .notif-mark:hover { border-color: var(--st-primary); }
.notif-tag { padding: 1px 7px; border: 1px solid var(--st-line); border-radius: 999px; background: var(--st-surface-2); color: var(--st-muted); font-weight: 700; }
.notif-tag.is-open { border-color: color-mix(in srgb, var(--st-primary) 40%, var(--st-line)); background: color-mix(in srgb, var(--st-primary) 14%, var(--st-surface)); color: var(--st-primary); }
.notif-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 24px; color: var(--st-muted); text-align: center; }
.notif-empty-title { color: var(--st-ink); font-size: 14px; font-weight: 700; }
.notif-empty-sub { font-size: 13px; }
.notif-state { padding: 24px; color: var(--st-muted); text-align: center; }
@keyframes stFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stSlide { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .notif-panel, .notif-backdrop { animation: none; } }
@media (max-width: 900px) { .notif-panel, .notif-backdrop { left: 0; } .notif-panel { width: min(420px, 100vw); } }

/* layout fixes from review */
#viewSettings .st5 { width: 100%; align-self: stretch; }
.notif-filters { flex-wrap: wrap; row-gap: 0; padding: 0 14px; }
.notif-filter { padding: 10px 8px 12px; font-size: 12.5px; }

/* ═══ pixel pass — values measured from the reference Settings page (1440×900) ═══ */
.st5 { padding: 24px; max-width: none; margin: 0; }
.st5-head { margin-bottom: 24px; }
.st5-head .st5-eyebrow { display: block; height: 24.8px; line-height: 24.8px; }
.st5-head h1 { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.st5-head p { margin: 0; font-size: 16px; line-height: 24.8px; }
.st5-btn { height: 40.1px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 600; line-height: 20.15px; }
#settingsBackBtn { height: 44.8px; padding: 0 14px; font-size: 16px; line-height: 24.8px; }
#settingsBackBtn svg { width: 18px; height: 18px; }
/* card with the tab column inset 22px, exactly as the reference .settingsShell.panel */
.settingsShell { padding: 22px; height: calc(100vh - 168px); min-height: 440px; border-radius: 14px; align-items: stretch; }
.settingsTabs { height: 100%; padding: 16px 12px; gap: 2px; border-right: 0; }
.settingsContent { height: 100%; padding: 28px 36px 32px; }
.settingsTabs button { height: 40px; padding: 0 12px; border-radius: 9px; font-size: 14px; font-weight: 600; line-height: 21.7px; }
.sgHead h2 { font-size: 22px; font-weight: 700; line-height: 26.4px; }
.sgHead p { font-size: 14px; line-height: 21.7px; }
.sgBlockHead h3 { font-size: 15px; font-weight: 700; line-height: 23.25px; }
.sgBlockHead p { font-size: 13px; line-height: 20.15px; }
.sgOptText strong { font-size: 14px; line-height: 21.7px; }
.sgOptText small { font-size: 12.5px; line-height: 17.5px; }
.sgFoot { font-size: 13px; line-height: 20.15px; }
/* sidebar: the theme switch now lives in Settings → General */
#sidebar .theme-toggle { display: none !important; }
@media (max-width: 700px) { .settingsShell { padding: 12px; height: auto; } }
.st5-head .st5-eyebrow { box-sizing: border-box; padding-top: 3px; }
.st5-btn.primary { font-weight: 600; }

/* ═══ Skills / MCPs panels — reference .skPage … .mcpActions ═══ */
.skPage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; width: 100%; }   /* minmax(0,1fr): an implicit 'auto' column grew to its widest child (320–360px) and pushed Skills/MCPs past the phone viewport */
.skHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.skHead h2 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.01em; }
.skHead p { margin: 0; color: var(--st-muted); font-size: 14px; }
.skHead .st5-btn svg { width: 16px; height: 16px; }
.skNote { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--st-primary) 22%, var(--st-line)); border-radius: 12px; background: color-mix(in srgb, var(--st-primary) 6%, var(--st-surface)); }
.skNote svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--st-primary); }
.skNote p { margin: 0; color: var(--st-ink); font-size: 13px; line-height: 1.6; }
.skError { padding: 12px 16px; border: 1px solid rgba(214, 69, 69, .4); border-radius: 12px; background: rgba(214, 69, 69, .08); color: #d64545; font-size: 13px; }
.skStats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.skStats > div { position: relative; display: grid; gap: 4px; padding: 14px 18px 14px 20px; border: 1px solid var(--st-line); border-radius: 14px; background: var(--st-surface); overflow: hidden; }
.skStats > div::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--st-primary); }
.skStats > div:nth-child(2)::before { background: var(--st-teal); }
.skStats > div:nth-child(3)::before { background: var(--st-muted); }
.skStats > div:nth-child(4)::before { background: #7c5cff; }
.skStats span { color: var(--st-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.skStats strong { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.skToolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.skSearch { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; max-width: 420px; height: 42px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 11px; background: var(--st-surface); color: var(--st-muted); transition: border-color .15s ease, box-shadow .15s ease; }
.skSearch:focus-within { border-color: var(--st-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary) 12%, transparent); }
.skSearch input { flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; color: var(--st-ink); font: inherit; font-size: 14px; -webkit-appearance: none; appearance: none; }
.skSearch input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.skSeg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--st-line); border-radius: 11px; background: var(--st-surface-2); }
.skSeg button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--st-muted); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.skSeg button:hover:not(.active) { color: var(--st-ink); }
.skSeg button.active { background: var(--st-surface); color: var(--st-primary); box-shadow: 0 1px 2px rgba(15, 42, 52, .08), 0 4px 10px color-mix(in srgb, var(--st-primary) 12%, transparent); }
.skSeg b { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--st-surface-2); color: var(--st-muted); font-size: 11px; text-align: center; }
.skSeg button.active b { background: color-mix(in srgb, var(--st-primary) 14%, var(--st-surface)); color: var(--st-primary); }
.skIconBtn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--st-line); border-radius: 11px; background: var(--st-surface); color: var(--st-muted); cursor: pointer; }
.skIconBtn:hover { color: var(--st-primary); border-color: color-mix(in srgb, var(--st-primary) 45%, var(--st-line)); }
.skIconBtn svg { width: 18px; height: 18px; }
.skRefresh { margin-left: auto; }
.skGroup { display: grid; gap: 12px; }
.skGroupHead { display: flex; align-items: center; gap: 10px; }
.skGroupHead h3 { margin: 0; color: var(--st-muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.skGroupHead span { padding: 1px 8px; border-radius: 999px; background: var(--st-surface-2); color: var(--st-muted); font-size: 11px; font-weight: 700; }
.skGroupHead::after { content: ""; flex: 1; height: 1px; background: var(--st-line); }
.skGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.mcpGrid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.skCard { display: grid; gap: 14px; align-content: start; padding: 16px; border: 1px solid var(--st-line); border-radius: 14px; background: var(--st-surface); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.skCard:hover { border-color: color-mix(in srgb, var(--st-primary) 40%, var(--st-line)); box-shadow: var(--st-shadow); transform: translateY(-1px); }
.skCard.on { border-color: color-mix(in srgb, var(--st-teal) 40%, var(--st-line)); background: color-mix(in srgb, var(--st-teal) 4%, var(--st-surface)); }
.skCardTop { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.skIcon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--st-primary) 12%, var(--st-surface)); color: var(--st-primary); font-size: 13px; font-weight: 800; }
.skCard.on .skIcon { background: linear-gradient(135deg, var(--st-primary), var(--st-primary-2)); color: #fff; }
:root:not([data-theme="light"]) .skCard.on .skIcon { color: #061014; }
.skTitle { display: grid; gap: 2px; min-width: 0; }
.skTitle h4 { margin: 0; font-size: 14.5px; line-height: 1.3; }
.skTitle code { color: var(--st-muted); font: 11.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skSwitch { position: relative; flex: 0 0 auto; width: 40px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--st-muted) 35%, var(--st-surface)); cursor: pointer; transition: background-color .2s ease; }
.skSwitch:disabled { opacity: .55; cursor: wait; }
.skSwitch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s ease; }
.skSwitch.on { background: var(--st-teal); }
.skSwitch.on i { transform: translateX(18px); }
.skSwitch:focus-visible, .skSeg button:focus-visible, .skIconBtn:focus-visible, .skRemove:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; }
.skTasks { display: flex; flex-wrap: wrap; gap: 6px; }
.skTasks span { padding: 3px 9px; border: 1px solid var(--st-line); border-radius: 999px; background: var(--st-surface-2); color: var(--st-muted); font-size: 11.5px; font-weight: 600; }
.skFoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--st-line); }
.skStatus { display: inline-flex; align-items: center; gap: 8px; color: var(--st-muted); font-size: 12.5px; font-weight: 600; }
.skStatus i { width: 7px; height: 7px; border-radius: 50%; background: var(--st-muted); opacity: .6; }
.skStatus.on { color: var(--st-teal); }
.skStatus.on i { background: var(--st-teal); opacity: 1; }
.skTags { display: inline-flex; align-items: center; gap: 6px; }
.skTags em { padding: 2px 9px; border-radius: 6px; background: color-mix(in srgb, var(--st-primary) 10%, var(--st-surface)); color: var(--st-primary); font-size: 11px; font-style: normal; font-weight: 700; }
.skTags em.custom { background: rgba(124, 92, 255, .12); color: #7c5cff; }
.skTags em.muted { background: var(--st-surface-2); color: var(--st-muted); }
.skRemove { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--st-muted); cursor: pointer; }
.skRemove:hover { background: color-mix(in srgb, var(--st-primary) 10%, transparent); color: var(--st-primary); }
.skRemove[data-sk-act="delete"]:hover, .skRemove[data-sk-act="delete-unbind"]:hover { background: rgba(214, 69, 69, .1); color: #d64545; }
.skRemove svg { width: 14px; height: 14px; }
.mcpDesc { margin: 0; color: var(--st-ink); font-size: 13.5px; line-height: 1.6; }
.mcpFacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mcpFacts > div { display: grid; gap: 4px; }
.mcpFacts span { color: var(--st-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mcpFacts b { display: block; padding: 5px 10px; border-radius: 8px; background: var(--st-surface-2); color: var(--st-muted); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcpFacts b.good { background: color-mix(in srgb, var(--st-teal) 12%, var(--st-surface)); color: var(--st-teal); }
.mcpFacts b.warn { background: rgba(217, 154, 31, .14); color: #b9790a; }
:root:not([data-theme="light"]) .mcpFacts b.warn { color: #f0b84a; }
.mcpFacts b.info { background: color-mix(in srgb, var(--st-primary) 12%, var(--st-surface)); color: var(--st-primary); }
.mcpMeta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--st-muted); font-size: 12px; }
.mcpMeta code { padding: 1px 6px; border-radius: 6px; background: var(--st-surface-2); color: var(--st-ink); font: 11.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mcpLocked { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--st-surface-2); color: var(--st-muted); font-size: 12px; line-height: 1.5; }
.mcpError { margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(214, 69, 69, .08); color: #d64545; font-size: 12.5px; }
.mcpActions { display: flex; flex-wrap: wrap; gap: 8px; }
.mcpActions .st5-btn { height: 36px; }
@media (max-width: 900px) { .skStats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skSearch { max-width: none; flex-basis: 100%; } .skRefresh { margin-left: 0; } }

/* ═══ Account & security — reference .acPage … .permGroup ═══ */
.acPage { display: grid; gap: 20px; }
.acHead h2 { margin: 0 0 4px; font-size: 24px; }
.acHead p { margin: 0; color: var(--st-muted); font-size: 14px; }
.acGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; align-items: start; }
.acCol { display: grid; gap: 18px; min-width: 0; }
.acCard { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--st-line); border-radius: 16px; background: var(--st-surface); }
.acCard h3 { margin: 0; font-size: 15px; }
.acProfile { grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.accountAvatar { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--st-primary); color: #fff; font-size: 17px; font-weight: 800; }
:root:not([data-theme="light"]) .accountAvatar { color: #061014; }
.acProfile > div { display: grid; gap: 2px; }
.acProfile small { color: var(--st-muted); font-size: 13px; }
.acProfile p { margin: 6px 0 0; color: var(--st-ink); font-size: 13px; line-height: 1.55; }
.acField { display: grid; gap: 8px; margin: 0; }
.acField > span { color: var(--st-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.acField input, .acInline input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--st-line); border-radius: 11px; background: var(--st-surface-2); color: var(--st-ink); font: inherit; font-size: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.acField input:focus, .acInline input:focus { border-color: var(--st-primary); background: var(--st-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary) 12%, transparent); }
.acForm { display: grid; gap: 14px; }
.acInline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.acInline input { flex: 1 1 200px; width: auto; }
.acMessage { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.acMessage.error { background: rgba(214, 69, 69, .1); border: 1px solid rgba(214, 69, 69, .35); color: #d64545; }
.acMessage.ok { background: color-mix(in srgb, var(--st-teal) 12%, var(--st-surface)); border: 1px solid color-mix(in srgb, var(--st-teal) 32%, var(--st-line)); color: var(--st-teal); }
.acActions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.acActions small { color: var(--st-muted); font-size: 12.5px; }
.acSession { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--st-line); border-radius: 12px; background: var(--st-surface-2); }
.acSessionTop { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; }
.acSessionTop span { flex: 1; overflow-wrap: anywhere; }
.acSession small { color: var(--st-muted); font-size: 12.5px; }
.acThis { flex: 0 0 auto; padding: 2px 10px; border: 1px solid color-mix(in srgb, var(--st-primary) 32%, var(--st-line)); border-radius: 999px; background: color-mix(in srgb, var(--st-primary) 10%, var(--st-surface)); color: var(--st-primary); font-size: 11.5px; font-style: normal; font-weight: 800; }
.acRevoke { height: 30px; padding: 0 10px; font-size: 12px; }
.acNote { margin: 0; color: var(--st-muted); font-size: 13px; line-height: 1.55; }
.acNote strong { color: var(--st-ink); }
.acList { border: 1px solid var(--st-line); border-radius: 12px; overflow: hidden; }
.acEvent { display: grid; gap: 2px; padding: 12px 16px; transition: background-color .15s ease; }
.acEvent + .acEvent { border-top: 1px solid var(--st-line); }
.acEvent:hover { background: var(--st-surface-2); }
.acEvent strong { font-size: 14px; font-weight: 600; }
.acEvent small { color: var(--st-muted); font-size: 12.5px; }
.intEmpty { padding: 20px; border: 1px dashed var(--st-line); border-radius: 12px; color: var(--st-muted); font-size: 13.5px; text-align: center; }
.acEnroll { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; align-items: start; }
.acQr { width: 148px; height: 148px; padding: 6px; border-radius: 10px; background: #fff; }
.acQr svg { width: 100%; height: 100%; display: block; }
.acEnrollText { display: grid; gap: 8px; }
.acKey { display: block; padding: 8px 10px; border-radius: 8px; background: var(--st-surface-2); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; user-select: all; }
.permGroups { display: grid; gap: 10px; }
.permGroup { border: 1px solid var(--st-line); border-radius: 12px; background: var(--st-surface); overflow: hidden; }
.permGroup summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; }
.permGroup summary::-webkit-details-marker { display: none; }
.permGroup summary > span { flex: 1; }
.permGroup summary b { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--st-primary) 12%, var(--st-surface)); color: var(--st-primary); font-size: 12px; text-align: center; }
.permGroup summary svg { width: 16px; height: 16px; color: var(--st-muted); transition: transform .2s ease; }
.permGroup[open] summary svg { transform: rotate(180deg); }
.permGroup summary:hover { background: var(--st-surface-2); }
.permGroup ul { margin: 0; padding: 12px 14px 14px; list-style: none; display: grid; gap: 4px; border-top: 1px solid var(--st-line); }
.permGroup li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.4; padding: 3px 0; }
.permGroup li svg { width: 14px; height: 14px; margin-top: 3px; color: var(--st-teal); stroke-width: 2.4; }
.st5-modal-backdrop { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; background: rgba(6, 25, 32, .45); }
.st5-modal { width: min(460px, 100%); display: grid; gap: 14px; padding: 24px; border: 1px solid var(--st-line); border-radius: 16px; background: var(--st-surface); color: var(--st-ink); box-shadow: var(--st-shadow); }
.st5-modal h3 { margin: 0; font-size: 17px; }
.st5-codes { columns: 2; margin: 0; padding-left: 22px; font: 13px/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select: all; }
.st5-modal-actions { display: flex; justify-content: flex-end; }
@media (max-width: 1100px) { .acGrid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .acEnroll { grid-template-columns: 1fr; } }

/* embedded page roots must not bring their own page padding */
.settingsContent > #accountPageRoot, .settingsContent > #skillsPageRoot, .settingsContent > #mcpsPageRoot { padding: 0; margin: 0; overflow: visible; height: auto; }

/* ═══ pixel pass 2 — measured against the reference tabs (Account / Security / Usage / Skills / MCPs) ═══ */
#viewSettings { font-size: 16px; line-height: 1.55; }
#viewSettings h2 { line-height: 1.2; }
#viewSettings h3 { line-height: 1.55; }
.st5-btn { min-height: 44.8px; height: auto; padding: 9px 14px; font-size: 16px; line-height: 24.8px; }
.st5-btn svg { width: 18px; height: 18px; }
.sgFoot .st5-btn { min-height: 40.1px; font-size: 13px; line-height: 20.15px; }
.mcpActions .st5-btn { min-height: 36px; height: auto; padding: 0 14px; font-size: 13px; line-height: 1.55; }
.acRevoke { min-height: 30px; height: 30px; padding: 0 10px; font-size: 12px; line-height: 1; }
.acInline .st5-btn { min-height: 46px; }
#settingsBackBtn { min-height: 44.8px; height: 44.8px; }
.skHead .st5-btn svg { width: 16px; height: 16px; }

/* Account */
.sgProfileText span { color: var(--st-muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.sgProfileText em { justify-self: start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--st-primary) 12%, var(--st-surface)); color: var(--st-primary); font-size: 12px; font-style: normal; font-weight: 700; }
.sgField { min-width: 0; }
.sgField span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sgField strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; }
.sgSession { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 18px 20px; border: 1px solid var(--st-line); border-radius: 14px; }

/* Security permission lists */
.permGroup ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 14px; margin: 0; padding: 12px 14px 14px; list-style: none; border-top: 1px solid var(--st-line); }
.permGroup li { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: 13px; line-height: 1.35; }
.permGroup li svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; color: var(--st-primary); stroke-width: 1.8; }

/* MCP meta block */
.mcpMeta { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--st-line); color: var(--st-muted); font-size: 12px; }
.mcpMeta code { margin-left: 6px; padding: 0; background: transparent; color: var(--st-ink); font: 11.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.skGroupHead h3 { line-height: 1.55; }
.sgProfileText { line-height: 1.55; }

/* ═══ Usage — reference .usPage … .usStats ═══ */
.usPage { display: grid; gap: 22px; }
.usHead { padding-bottom: 18px; }
.usPeriod { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 999px; background: var(--st-surface-2); color: var(--st-muted); font-size: 12.5px; font-weight: 700; }
.usPeriod[hidden] { display: none; }
.usPeriod svg { width: 14px; height: 14px; }
.usMeter:hover { border-color: color-mix(in srgb, var(--usc) 40%, var(--st-line)); box-shadow: var(--st-shadow); }
.usTwo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.usChart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 12px; height: 190px; }
.usBarCol { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: end; gap: 6px; height: 100%; }
.usBarValue { color: var(--st-muted); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.usBarCol i { display: block; width: 100%; max-width: 38px; min-height: 6px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--st-primary), var(--st-primary-2)); transform-origin: bottom; animation: usGrow .6s cubic-bezier(.2, .8, .2, 1) both; }
.usBarCol:hover i { filter: brightness(1.12); }
.usBarCol em { color: var(--st-muted); font-size: 12px; font-style: normal; font-weight: 700; }
.usStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.usStats > div { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--st-line); border-radius: 14px; background: var(--st-surface-2); }
.usStats span { color: var(--st-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.usStats strong { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.usCard { border-radius: 18px; }
@keyframes usGrow { from { transform: scaleY(.05); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }
@media (max-width: 1000px) { .usTwo { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .usBarCol i { animation: none; } }

#stUsageBody { display: grid; gap: 22px; }
#stUsageRefresh { min-height: 30px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1; }
#stUsageRefresh svg { width: 14px; height: 14px; }
.usHeadChips { align-items: flex-start; }

.usShare, .usShareTop, .usShareTop span, .usShareTop strong { line-height: 1.55; }
.usShareTop { min-height: 0; height: auto; }

.usShares { align-content: start; }

/* ═══ Usage tab — our data (accounts, capacity, routing, recorded activity), V5 theme ═══ */
.usHeadChips { align-items: center; }
.usFresh { height: 30px; }
.usFresh.ok { color: var(--st-teal); border-color: color-mix(in srgb, var(--st-teal) 34%, var(--st-line)); background: color-mix(in srgb, var(--st-teal) 9%, var(--st-surface)); }
.usFresh.busy { color: var(--st-primary); }
.usFresh.warn { color: #b9790a; border-color: rgba(217, 154, 31, .4); background: rgba(217, 154, 31, .1); }
:root:not([data-theme="light"]) .usFresh.warn { color: #f0b84a; }
#stUsageRefresh, #stUsageManage { min-height: 30px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1; }
#stUsageRefresh svg { width: 14px; height: 14px; }
.usBody { display: grid; gap: 26px; }
.usSection { display: grid; gap: 14px; }
.uaSummary { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--st-primary) 28%, var(--st-line)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--st-primary) 8%, var(--st-surface)), var(--st-surface) 70%); }
.uaSummaryMain { display: flex; align-items: center; gap: 14px; min-width: 0; }
.uaSummaryMain small { display: block; color: var(--st-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.uaSummaryMain h3 { margin: 2px 0 0; font-size: 18px; }
.uaSummaryStats { display: flex; gap: 28px; }
.uaSummaryStats span { display: block; color: var(--st-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.uaSummaryStats strong { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.uaAuto { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--st-teal) 34%, var(--st-line)); border-radius: 999px; background: color-mix(in srgb, var(--st-teal) 9%, var(--st-surface)); color: var(--st-teal); font-size: 12.5px; font-weight: 700; cursor: help; }
.uaAuto i { width: 7px; height: 7px; border-radius: 50%; background: var(--st-teal); }
.uaGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.uaCard { display: grid; gap: 14px; align-content: start; padding: 18px; border: 1px solid var(--st-line); border-radius: 16px; background: var(--st-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.uaCard:hover { border-color: color-mix(in srgb, var(--st-primary) 40%, var(--st-line)); box-shadow: var(--st-shadow); }
.uaCard.pick { border-color: color-mix(in srgb, var(--st-teal) 45%, var(--st-line)); }
.uaCard.flagged { border-color: rgba(214, 69, 69, .4); }
.uaCardHead { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.uaTitle { display: grid; gap: 2px; min-width: 0; }
.uaTitle h4 { margin: 0; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uaTitle code { color: var(--st-muted); font: 11.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uaDot { width: 10px; height: 10px; border-radius: 50%; background: var(--st-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-muted) 18%, transparent); }
.uaDot.ok { background: #3fb950; box-shadow: 0 0 0 3px rgba(63, 185, 80, .18); }
.uaDot.mid { background: #d99a1f; box-shadow: 0 0 0 3px rgba(217, 154, 31, .18); }
.uaDot.bad { background: #d64545; box-shadow: 0 0 0 3px rgba(214, 69, 69, .18); }
.uaBadge { padding: 3px 10px; border-radius: 999px; background: var(--st-surface-2); color: var(--st-muted); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.uaBadge.ok { background: color-mix(in srgb, #3fb950 14%, var(--st-surface)); color: #2b9a40; }
.uaBadge.mid { background: rgba(217, 154, 31, .14); color: #b9790a; }
.uaBadge.bad { background: rgba(214, 69, 69, .12); color: #d64545; }
:root:not([data-theme="light"]) .uaBadge.ok { color: #6fdc84; }
:root:not([data-theme="light"]) .uaBadge.mid { color: #f0b84a; }
.uaPickTag { justify-self: start; padding: 2px 10px; border-radius: 6px; background: color-mix(in srgb, var(--st-teal) 12%, var(--st-surface)); color: var(--st-teal); font-size: 11px; font-weight: 800; }
.uaMeter { display: grid; gap: 6px; }
.uaMeterTop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.uaMeterTop span { color: var(--st-ink); font-weight: 600; }
.uaMeterTop strong { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.uaMeter i { display: block; height: 8px; border-radius: 999px; background: var(--st-surface-2); overflow: hidden; }
.uaMeter b { display: block; height: 100%; border-radius: inherit; background: var(--st-teal); transition: width .4s ease; }
.uaMeter.mid b { background: #d99a1f; }
.uaMeter.bad b { background: #d64545; }
.uaMeter small { color: var(--st-muted); font-size: 12px; }
.uaObserved { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--st-line); color: var(--st-muted); font-size: 12.5px; }
.uaObserved strong { color: var(--st-ink); font-weight: 600; }
.usBody .usStats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.usBody .usSection > .usTwo, .usBody .usSection > .usStats { margin-top: 0; }
.usBody .usSection { gap: 16px; }

.notif-filter.is-active::after { content: ""; display: block; }
.notif-filter.is-active::after { position: absolute; left: 11px; right: 11px; width: auto; bottom: -1px; height: 2px; background: var(--st-primary); }
.notif-filter, .notif-filter.is-active { border: 0; border-radius: 0; }
.notif-filter.is-active::after { bottom: 0; }

/* ═══ Skills / MCPs add + edit popups — reference .overlay + .usrModal ═══ */
body .cm-overlay { z-index: 2000; display: grid; place-items: center; padding: 24px; background: rgba(6, 25, 32, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
body .cm-overlay .cm-drawer.cm-editor {
  width: min(520px, 100%); max-height: min(86vh, 760px); overflow-y: auto; gap: 16px; padding: 0 24px 0;
  border: 1px solid var(--st-line); border-radius: 18px; background: var(--st-surface); color: var(--st-ink);
  box-shadow: 0 30px 80px rgba(6, 25, 32, .35); animation: stPop .18s cubic-bezier(.2, .8, .2, 1);
  font-family: var(--app-font, Inter, system-ui, sans-serif);
}
@keyframes stPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
body .cm-overlay .cm-editor-title { position: sticky; top: 0; z-index: 1; margin: 0 -24px; padding: 22px 24px 16px; border-bottom: 1px solid var(--st-line); background: var(--st-surface); font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--st-ink); }
body .cm-overlay .cm-field { gap: 8px; }
body .cm-overlay .cm-field-label { color: var(--st-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; }
body .cm-overlay .cm-input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--st-line); border-radius: 11px; background: var(--st-surface-2); color: var(--st-ink); font: inherit; font-size: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
body .cm-overlay textarea.cm-input { height: auto; min-height: 160px; padding: 12px 14px; line-height: 1.55; }
body .cm-overlay .cm-input:focus { border-color: var(--st-primary); background: var(--st-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary) 12%, transparent); }
body .cm-overlay .cm-note, .cm-overlay .cm-authority { padding: 12px 14px; border: 1px solid var(--st-line); border-radius: 12px; background: var(--st-surface-2); color: var(--st-muted); font-size: 13px; line-height: 1.55; }
body .cm-overlay .cm-checkrow { gap: 8px; }
body .cm-overlay .cm-check { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 10px; background: var(--st-surface); color: var(--st-ink); font-size: 13px; font-weight: 600; cursor: pointer; }
body .cm-overlay .cm-check:has(input:checked) { border-color: var(--st-primary); background: color-mix(in srgb, var(--st-primary) 9%, var(--st-surface)); color: var(--st-primary); }
body .cm-overlay .cm-state.err { padding: 10px 14px; border: 1px solid rgba(214, 69, 69, .4); border-radius: 12px; background: rgba(214, 69, 69, .08); color: #d64545; font-size: 13px; }
body .cm-overlay .cm-card-actions { position: sticky; bottom: 0; display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 10px; margin: 0 -24px; padding: 14px 24px; border-top: 1px solid var(--st-line); background: var(--st-surface-2); }
body .cm-overlay .cm-btn { height: 40px; padding: 0 18px; border: 1px solid var(--st-line); border-radius: 11px; background: var(--st-surface); color: var(--st-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
body .cm-overlay .cm-btn:hover:not(:disabled) { border-color: var(--st-primary); color: var(--st-primary); background: var(--st-surface); }
body .cm-overlay .cm-btn-primary { border-color: var(--st-primary); background: var(--st-primary); color: #fff; }
body .cm-overlay .cm-btn-primary:hover:not(:disabled) { background: var(--st-primary); color: #fff; filter: brightness(1.08); }
body .cm-overlay .cm-btn-danger { border-color: rgba(214, 69, 69, .5); color: #d64545; }
@media (max-width: 640px) { body .cm-overlay { padding: 12px; } body .cm-overlay .cm-drawer.cm-editor { width: 100%; } }
body .cm-overlay { justify-content: center; align-items: center; }
body .cm-overlay .cm-drawer.cm-editor { display: flex; flex-direction: column; flex: 0 1 auto; }
body .cm-overlay .cm-drawer.cm-editor > * { flex: none; }
body .cm-overlay .cm-card-actions { order: 99; margin-top: auto; }
body .cm-overlay .cm-editor-title { order: -1; }
body .cm-overlay input[type="file"] { width: 100%; padding: 9px 12px; border: 1px dashed var(--st-line); border-radius: 11px; background: var(--st-surface-2); color: var(--st-muted); font: inherit; font-size: 13px; }
body .cm-overlay input[type="file"]::file-selector-button { margin-right: 12px; padding: 6px 12px; border: 1px solid var(--st-line); border-radius: 8px; background: var(--st-surface); color: var(--st-ink); font: inherit; font-weight: 700; cursor: pointer; }
body .cm-overlay details { border: 1px solid var(--st-line); border-radius: 12px; padding: 10px 14px; background: var(--st-surface-2); }
body .cm-overlay details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--st-ink); }
body .cm-overlay .cm-card-actions { position: static; margin-bottom: 0; }
body .cm-overlay .cm-drawer.cm-editor { padding-bottom: 0; }

/* Off-canvas panels must not cast their shadow into the viewport while closed
   (the hidden preview bar leaked a dark band along the bottom edge). */
.preview-bar:not(.open) { box-shadow: none; }
.gtd-drawer:not(.gtd-open) { box-shadow: none; }

/* ═══ Popup anatomy: sticky header + scrolling body + sticky footer ═══
   Applies to every .cm-overlay popup (structure built by finishModal()). */
body .cm-overlay .cm-drawer.cm-editor.cm-modal { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; max-height: min(86vh, 760px); }
body .cm-overlay .cm-modal > .cm-editor-title { position: static; flex: none; margin: 0; padding: 22px 24px 16px; border-bottom: 1px solid var(--st-line); }
body .cm-overlay .cm-modal > .cm-modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--st-line) transparent; }
body .cm-overlay .cm-modal > .cm-modal-body > * { flex: none; }
body .cm-overlay .cm-modal > .cm-card-actions { position: static; flex: none; order: 0; margin: 0; padding: 14px 24px; }
/* form controls — one look for inputs, textareas and dropdowns */
body .cm-overlay select.cm-input { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667b84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
body .cm-overlay .cm-input::placeholder { color: var(--st-muted); opacity: .7; }
body .cm-overlay .cm-field input[type="checkbox"], body .cm-overlay .cm-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--st-primary); }
body .cm-overlay details > summary { list-style: none; }
body .cm-overlay details > summary::-webkit-details-marker { display: none; }
body .cm-overlay details[open] > summary { margin-bottom: 12px; }


/* Stacking: while the drawer is open the app shell stops being its own stacking
   context, so the rail (and its collapse toggle) sits above the drawer instead of under it. */
body:has(.notif-panel:not(.hidden)) .app-shell { z-index: auto; }
body:has(.notif-panel:not(.hidden)) #sidebar { z-index: 2450; }

/* Settings: Back is the same icon-only square button as the project header's back arrow, left of the title */
.st5-head { justify-content: flex-start; align-items: center; gap: 16px; }
#settingsBackBtn {
  order: -1; flex: none; display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 12px;
  background: color-mix(in srgb, var(--st-primary) 10%, var(--st-surface)); color: var(--st-primary); font-size: 0; line-height: 0; box-shadow: none;
  transition: background-color .15s ease, transform .15s ease;
}
#settingsBackBtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#settingsBackBtn:hover { background: color-mix(in srgb, var(--st-primary) 18%, var(--st-surface)); color: var(--st-primary); border: 0; transform: translateX(-1px); }
#settingsBackBtn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; gap: 0 !important; align-self: center; box-sizing: border-box; font-size: 0 !important; line-height: 0 !important; }
#settingsBackBtn svg { display: block !important; flex: none; width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; position: static !important; }

/* Usage › Claude accounts: Remove (added accounts only) */
.uaObserved { align-items: center; }
.uaRemove { margin-left: 0; height: 28px; padding: 0 12px; border: 1px solid color-mix(in srgb, #d64545 40%, var(--st-line)); border-radius: 8px; background: transparent; color: #d64545; font: 600 12px/1 inherit; font-family: inherit; cursor: pointer; transition: background-color .15s ease; }
.uaRemove:hover { background: color-mix(in srgb, #d64545 10%, transparent); }
.uaObserved:has(.uaRemove) { gap: 12px; }
.uaObserved:has(.uaRemove) strong { margin-left: auto; }


/* ── Design-consistency pass (22 Oct 2026) ───────────────────────────────────────────────────────────────────────────────────────────── */
/* phone: the later desktop padding (28px 36px) overrode the intended phone padding, leaving only ~244px of content width */
@media (max-width: 700px) { .settingsContent { padding: 18px 14px 24px; } .skHead { flex-wrap: wrap; } .skStats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* light theme: brand-blue TEXT on tinted surfaces and the green status chip fell under 4.5:1 — text only, accents/fills unchanged */
[data-theme="light"] .breadcrumb-root, [data-theme="light"] #sidebar .rs-avatar { color: #0f6b8c; }
/* light role avatars: the dark-theme pastel text colours were unreadable on the pale tints (VS measured 1.77–3.91:1) */
[data-theme="light"] .rs-avatar.super-admin { color: #0b6a8a; }
[data-theme="light"] .rs-avatar.team-lead { color: #7a5200; }
[data-theme="light"] .rs-avatar.team-member { color: #0b7152; }
[data-theme="light"] .rs-avatar.intern { color: #6234c9; }
[data-theme="light"] .cvx-chip.cvx-ok { color: #1f7a49; }

/* status / meta text that measured under 4.5:1 (measured in a real browser, 22 Oct) */
[data-theme="light"] .cv-card-status-label { color: #1f7a49; }
[data-theme="light"] .wc-item-reason { color: #5f6773; }
[data-theme="light"] .cvx-chip.cvx-warn { color: #8a5a00; }
[data-theme="light"] .pg5-status.ready { color: #8f5300; }
html:not([data-theme="light"]) .wc-item-reason { color: #8b949e; }
/* workspace status bar: white text on the bright dark-theme cyan was 2.0:1 — use the dark ink the other cyan buttons use */
html:not([data-theme="light"]) #viewWorkingWorkspace .wui-ide-statusbar, html:not([data-theme="light"]) #viewWorkingWorkspace .wui-ide-statusbar .wui-statusbar-item, html:not([data-theme="light"]) #viewWorkingWorkspace .wui-ide-statusbar a { color: #04222b; opacity: 1; }

/* Light theme: semantic text colours that were still the dark-theme values (amber/green/red/violet on pale surfaces measured 2.2–3.7:1).
   Inline-styled modal buttons (Generate New Direction, Apply Changes, Approve Page, Confirm …) are matched by their literal inline colour. */
[data-theme="light"] [style*="color:#a78bfa"], [data-theme="light"] [style*="color: #a78bfa"], [data-theme="light"] .custom { color: #6234c9 !important; }
[data-theme="light"] [style*="color:var(--amber)"], [data-theme="light"] [style*="color: var(--amber)"], [data-theme="light"] .nd-warning span, [data-theme="light"] .qa5-state-pill, [data-theme="light"] .btn.intDanger { color: #8a5a00 !important; }
[data-theme="light"] [style*="color:var(--green)"], [data-theme="light"] [style*="color: var(--green)"], [data-theme="light"] .cs-green { color: #1f7a49 !important; }
[data-theme="light"] [style*="color:var(--red)"], [data-theme="light"] [style*="color: var(--red)"], [data-theme="light"] [style*="color:#f85149"], [data-theme="light"] [style*="color: #f85149"], [data-theme="light"] [style*="color:#ef4444"], [data-theme="light"] [style*="color: #ef4444"],
[data-theme="light"] .secSev.critical, [data-theme="light"] .auSev.high, [data-theme="light"] .st5-btn.danger { color: #b42318 !important; }
[data-theme="light"] .ap-sub { color: #5f6773; }
[data-theme="light"] .wui-chat-role { color: #135f94; }
/* dark theme: the same red / violet fell to ~4.3:1 on the near-black surface */
html:not([data-theme="light"]) .secSev.critical, html:not([data-theme="light"]) .auSev.high, html:not([data-theme="light"]) .st5-btn.danger { color: #e86464; }
html:not([data-theme="light"]) .custom { color: #9a86ff; }

/* light theme, remaining amber / green / red / violet meta text (computed colours measured 3.1–4.4:1 on white and the pale tints) */
[data-theme="light"] .wsPill.warn, [data-theme="light"] .rolPill.amber, [data-theme="light"] .platBadge.warn, [data-theme="light"] .rbi-step-headbadge,
[data-theme="light"] .rbi-step-badge, [data-theme="light"] .warn, [data-theme="light"] .pg5-status.ready, [data-theme="light"] .cv-btn-amber { color: #8a5a00 !important; }
[data-theme="light"] .cs-line.ok, [data-theme="light"] .cv-card-status-label { color: #1f7a49 !important; }
[data-theme="light"] .cs-title { color: #5f6773; }
[data-theme="light"] .qa5-qj-state.failed { color: #b42318; }
[data-theme="light"] .cbir-badge { color: #7a2fd0; }
[data-theme="light"] .cv-modal-warning, [data-theme="light"] #cvModalWarningText { color: #8a5a00; }

/* Usage screen: signed-in email under the account name + Default badge (same pill language as the Accounts screen) */
.uaEmail { display: block; margin-top: 2px; font-size: 12px; color: var(--st-muted); word-break: break-all; }
.uaBadge.uaDefault { background: color-mix(in srgb, var(--st-primary) 14%, transparent); color: var(--st-primary); border: 1px solid color-mix(in srgb, var(--st-primary) 35%, transparent); }

/* Phase 1 — discovered tools on a custom MCP card */
.mcpTools { margin: 8px 0 0; font-size: 12px; color: var(--st-muted, inherit); }
.mcpTools summary { cursor: pointer; font-weight: 600; color: var(--st-ink, inherit); }
.mcpTools ul { margin: 6px 0 0; padding-left: 18px; max-height: 160px; overflow: auto; display: grid; gap: 3px; }
.mcpTools code { font-size: 11px; }
.skImport { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.skImport ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }