/* ============================================================
   codex-settings.css — 对标 Codex 26.1007 Settings / Appearance
   根作用域：.zc-settings-page（叠加在现有 zc-settings 骨架上）
   ============================================================ */

.zc-settings-page{
  --cdx-set-accent:var(--appearance-accent,var(--color-ring));
  --cdx-set-switch-on:var(--cdx-set-accent);
  --cdx-set-ring:var(--cdx-set-accent);
  --cdx-set-danger-bg:var(--color-destructive-surface);
  --cdx-set-danger-fg:var(--color-destructive);
}

html.dark .zc-settings-page{
  --cdx-set-accent:var(--appearance-accent,var(--color-ring));
  --cdx-set-danger-bg:var(--color-destructive-surface);
  --cdx-set-danger-fg:var(--color-destructive);
}

/* 侧栏：Codex 搜索 pill「搜索」+ 分组 个人/集成/编码 */
.zc-settings-page .zc-settings-search{
  border-radius:var(--radius-full);
  background:var(--color-surface-hover);
  min-height:36px;
}
.zc-settings-page .zc-settings-nav-group-title{
  font-size:var(--text-ui-sm);
  font-weight:500;
  color:var(--color-foreground-subtlest);
  padding:var(--sp-1) var(--sp-2-5) var(--sp-1);
}
.zc-settings-page .zc-settings-nav-btn{
  height:36px;
  border-radius:10px;
}
.zc-settings-page .zc-settings-nav-btn.is-active{
  background:var(--color-surface-hover);
  color:var(--color-foreground);
  font-weight:500;
}

/* 主区：保留 DEMO 原背景（--color-background #f9f9f9）+ 白卡片 */
.zc-settings-page .zc-settings-panel{
  border-color:var(--color-border);
  background:var(--color-background);
}
.zc-settings-page .zc-settings-title{
  letter-spacing:-.02em;
}
.zc-settings-page .zc-settings-lead,
.zc-settings-page .zc-settings-row-desc{
  font-size:var(--text-ui-sm);
  line-height:1.45;
  color:var(--color-foreground-subtle);
}
.zc-settings-page .zc-settings-h3{
  font-size:var(--text-ui-base);
  font-weight:600;
}
.zc-settings-page .zc-settings-section-label{
  font-size:var(--text-ui-base);
  font-weight:600;
  color:var(--color-foreground);
  margin-bottom:var(--sp-2);
}
.zc-settings-page .zc-settings-card{
  border-radius:12px;
  border-color:var(--color-border);
  background:var(--color-card);
}
.zc-settings-page .zc-settings-row{
  padding:14px 16px;
}
.zc-settings-page .zc-settings-row-label{
  font-weight:500;
}

/* Codex 蓝开关（设置页内） */
.zc-settings-page .zc-switch{
  width:36px;
  height:20px;
  background:var(--color-border);
}
.zc-settings-page .zc-switch.is-on{
  background:var(--cdx-set-switch-on);
}
.zc-settings-page .zc-switch-thumb{
  width:16px;
  height:16px;
}
.zc-settings-page .zc-switch.is-on .zc-switch-thumb{
  transform:translateX(16px);
}

/* 危险按钮：浅红底 + 红字 */
.zc-settings-page .zc-btn.is-danger-soft,
.zc-settings-page .cdx-set-btn-danger{
  border:none;
  background:var(--cdx-set-danger-bg);
  color:var(--cdx-set-danger-fg);
  border-radius:8px;
  height:32px;
  padding:0 12px;
  font-size:var(--text-ui-sm);
  font-weight:500;
  cursor:pointer;
}
.zc-settings-page .zc-btn.is-danger-soft:hover,
.zc-settings-page .cdx-set-btn-danger:hover{
  filter:brightness(.97);
}

.zc-settings-page .cdx-set-btn-ghost{
  border:1px solid var(--color-border);
  background:var(--color-background);
  color:var(--color-foreground);
  border-radius:8px;
  height:32px;
  padding:0 12px;
  font-size:var(--text-ui-sm);
  font-weight:500;
  cursor:pointer;
}
.zc-settings-page .cdx-set-btn-ghost:hover{
  background:var(--color-surface-hover);
}

.zc-settings-page .cdx-set-btn-solid{
  border:none;
  background:var(--color-foreground);
  color:var(--color-background);
  border-radius:8px;
  height:32px;
  padding:0 12px;
  font-size:var(--text-ui-sm);
  font-weight:500;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.zc-settings-page .cdx-set-link{
  border:none;
  background:transparent;
  color:var(--cdx-set-accent);
  font-size:var(--text-ui-sm);
  cursor:pointer;
  padding:0;
}
.zc-settings-page .cdx-set-link:hover{text-decoration:underline}
.zc-settings-page .cdx-set-link.is-muted{
  color:var(--color-foreground-subtle);
  text-decoration:none;
}
.zc-settings-page .cdx-set-link.is-muted:hover{
  color:var(--color-foreground);
}

/* ---------- Appearance：视觉风格 ---------- */
.cdx-app-stack .cdx-app-block{gap:var(--sp-4)}
.cdx-app-stack .zc-settings-h3{margin-bottom:var(--sp-1)}
.cdx-app-stack .zc-settings-card{border-radius:var(--radius-2xl);padding-inline:var(--sp-4)}
.cdx-app-stack .zc-settings-row{padding:var(--sp-2) 0;min-height:var(--sp-10);box-sizing:border-box}
.cdx-app-stack .zc-settings-row-grid{grid-template-columns:minmax(0,1fr) auto;min-height:var(--control-h-8)}
.cdx-app-stack .cdx-app-row-nested{padding-block:var(--sp-2)}
.cdx-app-stack .zc-select-trigger{border-radius:var(--radius-full);background:transparent;border-color:var(--color-border)}
.cdx-app-stack .cdx-color-hex{font-family:var(--font-sans);font-size:var(--text-ui-sm);height:var(--control-h-7);min-width:0;padding-inline:var(--sp-2)}
.cdx-app-stack .cdx-color-hex input{width:5rem}
.cdx-app-stack .cdx-color-swatch{width:var(--size-3-5);height:var(--size-3-5)}
.cdx-app-stack .cdx-mode-tiles{width:17rem;gap:var(--sp-4)}
.cdx-app-stack .cdx-mode-preview{border-radius:var(--radius-lg)}
.cdx-app-stack .cdx-app-theme-ctrl .zc-select-wrap{order:3}
.cdx-app-stack .cdx-app-theme-ctrl .cdx-app-icon-btn:last-child{display:none}
.cdx-app-stack .cdx-app-adv-toggle{font-weight:400;color:var(--color-foreground-subtle)}
.cdx-app-stack>.cdx-app-block:last-child{margin-top:var(--sp-5)}
@media(max-width:640px){.cdx-app-stack .cdx-mode-tiles{width:min(17rem,100%)}.cdx-app-stack .cdx-app-row-nested .zc-settings-row-grid{grid-template-columns:1fr}.cdx-app-stack .cdx-color-ctrl{flex-wrap:wrap;justify-content:flex-end}}
.cdx-app-stack{display:flex;flex-direction:column;gap:28px;min-width:0}
.cdx-app-block{display:flex;flex-direction:column;gap:10px;min-width:0}
.cdx-app-block-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.cdx-app-adv-toggle{
  display:inline-flex;align-items:center;gap:4px;
  border:none;background:transparent;padding:0;
  font-size:var(--text-ui-base);font-weight:600;color:var(--color-foreground);
  cursor:pointer;
}
.cdx-app-adv-toggle svg{color:var(--color-foreground-subtle)}

.cdx-app-row-nested .zc-settings-row-grid{
  grid-template-columns:minmax(0,1fr) auto;
}
.cdx-app-row-nested .zc-settings-row-control{justify-content:flex-end}

/* Mode tiles：aspect 4/3，选中 ring */
.cdx-mode-tiles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  width:min(17rem,100%);
}
.cdx-mode-tile{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;min-width:0;position:relative;
}
.cdx-mode-tile input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.cdx-mode-label{font-size:var(--text-ui-sm);line-height:1.5;color:var(--color-foreground-subtle);white-space:nowrap}
.cdx-mode-tile.is-selected .cdx-mode-label{color:var(--color-foreground);font-weight:500}
.cdx-mode-preview{
  position:relative;isolation:isolate;
  display:block;width:100%;aspect-ratio:4/3;
  overflow:hidden;border-radius:8px;
  box-sizing:border-box;border:1px solid var(--color-border-hover);
  background:#f5f5f5;
  box-shadow:inset 0 0 0 1px var(--color-border);
}
.cdx-mode-tile.is-selected .cdx-mode-preview,
.cdx-mode-tile:has(input:checked) .cdx-mode-preview{
  border-color:var(--cdx-set-ring);
  box-shadow:inset 0 0 0 2px var(--cdx-set-ring);
}
.cdx-mode-tile:hover:not(.is-selected):not(:has(input:checked)) .cdx-mode-preview{
  box-shadow:inset 0 0 0 1px var(--color-border-hover);
}
.cdx-mode-chrome{
  display:grid;grid-template-columns:30% 1fr;height:100%;width:100%;
}
.cdx-mode-chrome.is-split{grid-template-columns:1fr 1fr}
.cdx-mode-side{background:#e8e8ea;border-right:1px solid rgba(0,0,0,.06)}
.cdx-mode-main{background:#fff;display:flex;flex-direction:column;padding:7px 8px;gap:5px;justify-content:flex-start}
.cdx-mode-bar{height:5px;border-radius:2px;background:#e5e5e5;width:72%}
.cdx-mode-bar.is-short{width:48%}
.cdx-mode-bar.is-accent{background:var(--cdx-set-accent);opacity:.65;width:58%}
.cdx-mode-preview.is-dark .cdx-mode-side{background:#2a2a2c;border-right-color:rgba(255,255,255,.06)}
.cdx-mode-preview.is-dark .cdx-mode-main{background:#141414}
.cdx-mode-preview.is-dark .cdx-mode-bar{background:#3a3a3a}
.cdx-mode-preview.is-dark .cdx-mode-bar.is-accent{background:var(--cdx-set-accent)}
.cdx-mode-split-l{
  background:linear-gradient(180deg,#fff 0 55%,#f3f3f3 55%);
  border-right:1px solid rgba(0,0,0,.08);
}
.cdx-mode-split-r{
  background:linear-gradient(180deg,#1a1a1a 0 55%,#0f0f0f 55%);
}

/* Theme 行右侧动作 */
.cdx-app-theme-ctrl{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;
}
.cdx-app-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:none;border-radius:8px;
  background:transparent;color:var(--color-foreground-subtle);cursor:pointer;
}
.cdx-app-icon-btn:hover{background:var(--color-surface-hover);color:var(--color-foreground)}
.cdx-app-aa{
  font-size:var(--text-ui-sm);font-weight:600;letter-spacing:-.02em;line-height:1;
}

/* 颜色控件：hex + 圆点 */
.cdx-color-ctrl{
  display:inline-flex;align-items:center;gap:8px;
}
.cdx-color-swatch{
  width:14px;height:14px;border-radius:999px;
  border:1px solid var(--color-border);
  flex-shrink:0;
}
.cdx-color-hex{
  display:inline-flex;align-items:center;gap:8px;
  height:28px;min-width:96px;padding:0 8px;
  border:1px solid var(--color-border);border-radius:999px;
  background:var(--color-background);
  font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:var(--text-ui-xs);color:var(--color-foreground);
}
.cdx-color-hex input{
  width:5.5rem;border:0;outline:none;background:transparent;
  font:inherit;color:inherit;text-transform:uppercase;
}

/* 分段控件：系统 / 开启 / 关闭 */
.cdx-seg{
  display:inline-flex;align-items:center;padding:2px;
  border-radius:8px;background:var(--color-surface-hover);gap:2px;
}
.cdx-seg-btn{
  border:none;background:transparent;cursor:pointer;
  height:28px;padding:0 10px;border-radius:6px;
  font-size:var(--text-ui-sm);color:var(--color-foreground-subtle);
}
.cdx-seg-btn.is-on{
  background:var(--color-background);
  color:var(--color-foreground);
  font-weight:500;
  box-shadow:0 0 0 1px var(--color-border);
}

/* 字号输入：Codex 右对齐 + px */
.zc-settings-page .zc-font-size{width:5.5rem}
.zc-settings-page .zc-font-size-input{
  border-radius:8px;
  background:var(--color-surface-hover);
  border-color:transparent;
  text-align:right;
}
.zc-settings-page .zc-font-size-input:focus{
  border-color:var(--color-border-hover);
  background:var(--color-background);
}
.zc-settings-page .zc-select-trigger{
  border-radius:8px;
  background:var(--color-surface-hover);
  border-color:transparent;
  height:32px;
}
.zc-settings-page .zc-select-trigger:hover{
  background:color-mix(in oklab,var(--color-surface-hover) 80%,var(--color-border));
}
.zc-settings-page .zc-select-trigger.w-28{width:7rem;max-width:100%}
.zc-settings-page .zc-select-trigger.w-40{width:10rem;max-width:100%}
.zc-settings-page .zc-select-trigger.w-44{width:11rem;max-width:100%}

/* ---------- 快捷键：Codex 列表 ---------- */
.cdx-sc-search-wrap{margin-bottom:4px}
.cdx-sc-num-card{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px;border:1px solid var(--color-border);border-radius:12px;
  background:var(--color-background);
}
.cdx-sc-num-title{font-size:var(--text-ui-base);font-weight:600}
.cdx-sc-num-desc{margin-top:4px;font-size:var(--text-ui-sm);color:var(--color-foreground-subtle)}
.cdx-sc-list{display:flex;flex-direction:column}
.cdx-sc-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;gap:12px;
  padding:14px 4px;
  border-bottom:1px solid var(--color-border);
}
.cdx-sc-row:last-child{border-bottom:none}
.cdx-sc-cmd{font-size:var(--text-ui-base);font-weight:600;color:var(--color-foreground)}
.cdx-sc-desc{margin-top:2px;font-size:var(--text-ui-sm);color:var(--color-foreground-subtle)}
.cdx-sc-binds{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cdx-sc-bind-line{display:inline-flex;align-items:center;gap:6px}
.cdx-sc-kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:24px;padding:2px 8px;border-radius:6px;
  background:var(--color-surface-hover);color:var(--color-foreground);
  font-size:12px;font-family:inherit;font-weight:500;
}
.cdx-sc-unassigned{font-size:var(--text-ui-sm);color:var(--color-foreground-subtlest)}
.cdx-sc-ico{
  border:none;background:transparent;color:var(--color-foreground-subtle);
  width:28px;height:28px;border-radius:6px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.cdx-sc-ico:hover{background:var(--color-surface-hover);color:var(--color-foreground)}
.cdx-sc-ico.is-danger:hover{color:var(--cdx-set-danger-fg)}

/* ---------- 副标题行（插件等） ---------- */
.cdx-set-page-lead{
  margin:-8px 0 0;font-size:var(--text-ui-sm);color:var(--color-foreground-subtle);
}
.cdx-set-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
}
.cdx-set-toolbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.cdx-set-filter-tabs{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  font-size:var(--text-ui-sm);color:var(--color-foreground-subtle);
}
.cdx-set-filter-tab{
  border:none;background:transparent;cursor:pointer;padding:0;
  font:inherit;color:inherit;
}
.cdx-set-filter-tab.is-on{color:var(--color-foreground);font-weight:600}

/* 插件：纵向分块（插件/应用/MCP/技能），无 Tab */
.cdx-set-plugin-block{display:flex;flex-direction:column;gap:8px;min-width:0}
.cdx-set-plugin-block-h{
  display:flex;align-items:baseline;gap:8px;padding:0 2px;
}
.cdx-set-plugin-block-title{
  font-size:var(--text-ui-base);font-weight:600;color:var(--color-foreground);
}
.cdx-set-plugin-block-count{
  font-size:var(--text-ui-sm);color:var(--color-foreground-subtle);
}
.cdx-set-plugin-list{
  border:1px solid var(--color-border);border-radius:12px;overflow:hidden;
  background:var(--color-card);
}
.cdx-set-plugin-row{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
}
.cdx-set-plugin-row + .cdx-set-plugin-row{
  border-top:1px solid transparent;
  box-shadow:inset 0 1px 0 var(--color-border);
}
.cdx-set-plugin-ico{
  width:28px;height:28px;border-radius:8px;overflow:hidden;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--color-border);background:var(--color-surface);
}
.cdx-set-plugin-ico img{width:100%;height:100%;object-fit:cover}
.cdx-set-plugin-main{min-width:0;flex:1}
.cdx-set-plugin-main.is-inline{
  display:flex;align-items:baseline;gap:8px;min-width:0;
}
.cdx-set-plugin-name{
  font-size:var(--text-ui-base);font-weight:500;flex-shrink:0;
  color:var(--color-foreground);
}
.cdx-set-plugin-desc{
  font-size:var(--text-ui-sm);color:var(--color-foreground-subtle);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.cdx-set-plugin-main:not(.is-inline) .cdx-set-plugin-desc{margin-top:2px;display:block}

/* 个性化 / 记忆：分区标题 + 主机下拉 */
.cdx-mem-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.cdx-mem-scope{
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 10px;border:1px solid var(--color-border);border-radius:8px;
  background:var(--color-background);font-size:var(--text-ui-sm);cursor:pointer;
}

.zc-settings-page .zc-settings-title-row{
  align-items:flex-start;
}
.zc-settings-page .cdx-set-page-lead{
  margin:-18px 0 4px;
}
html[data-reduced-motion="on"] .zc-settings-page *,
html[data-reduced-motion="on"] .zc-settings-page *::before,
html[data-reduced-motion="on"] .zc-settings-page *::after{
  animation-duration:0.001ms!important;
  transition-duration:0.001ms!important;
}

@media (max-width:640px){
  .cdx-mode-tiles{width:100%}
  .cdx-sc-row{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto}
  .cdx-sc-binds{grid-column:1;justify-self:start}
}

/* Settings page contract: one column, header, surface and control rhythm.
   Uses the existing SettingsPageParts scaffold and semantic ZCode tokens.
   Kept scoped here so directory pages and dialogs retain their own layouts. */
.zc-settings-page .zc-settings-panel{border:0;border-radius:0}
.zc-settings-page .zc-settings-panel-top{height:var(--sp-10)}
.zc-settings-page .zc-settings-frame{
  box-sizing:border-box;max-width:none;width:100%;
  padding:0 var(--page-directory-pad) var(--sp-10);gap:var(--sp-6);min-width:0;
  container-type:inline-size;
}

.zc-settings-page .zc-settings-title-row{align-items:center;gap:var(--sp-4)}
.zc-settings-heading{flex:1;min-width:0}
.zc-settings-page .zc-settings-title{font-size:var(--text-ui-2xl);line-height:1.4;font-weight:600;letter-spacing:0}
.zc-settings-page-description{margin:var(--sp-1) 0 0;font-size:var(--text-ui-sm);line-height:1.5;color:var(--color-foreground-subtle)}
#settingsSectionHeadExtra:empty{display:none}
.zc-settings-page #settingsSectionHeadExtra .cdx-set-toolbar-actions{margin:0;flex-wrap:wrap}
.zc-settings-page :is(.zc-settings-section-body,.zc-settings-stack,.zc-settings-stack.is-mid,.zc-settings-stack.is-tight,.cdx-app-stack,.cdx-mgmt-embed){gap:var(--sp-6);min-width:0}
.zc-settings-page :is(.zc-settings-block,.general-section,.cdx-set-plugin-block){display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.zc-settings-page :is(.general-section h2,.zc-settings-section-label,.zc-settings-h3,.cdx-set-plugin-block-title){margin:0;font-size:var(--text-ui-base);font-weight:500;line-height:1.5;color:var(--color-foreground)}
.zc-settings-page .general-section h2{padding:0}
.zc-settings-page :is(.zc-settings-card,.cdx-set-plugin-list,.cdx-sc-num-card,.cdx-sc-list){border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-card);padding:0;overflow:hidden}
.zc-settings-page :is(.zc-settings-card,.cdx-sc-num-card){overflow:visible}
.zc-settings-page :is(.zc-settings-row,.cdx-app-stack .zc-settings-row,.cdx-set-plugin-row,.cdx-sc-row,.cdx-sc-num-card){padding:var(--sp-4);min-height:var(--control-h-10);box-sizing:border-box}
.zc-settings-page .zc-settings-row-grid{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6);min-height:var(--control-h-8)}
.zc-settings-page .zc-settings-row-copy{min-width:0}
.zc-settings-page :is(.zc-settings-row-label,.cdx-sc-cmd,.cdx-sc-num-title){font-size:var(--text-ui-base);font-weight:500}
.zc-settings-page :is(.zc-settings-row-desc,.cdx-sc-desc,.cdx-sc-num-desc,.cdx-set-plugin-desc){font-size:var(--text-ui-sm);line-height:1.5}
.zc-settings-page .zc-settings-row-control{width:auto;max-width:100%;flex-wrap:wrap}
.zc-settings-page :is(.zc-btn-lg,.zc-btn-md,.cdx-set-btn-ghost,.cdx-set-btn-solid,.cdx-set-btn-danger,.cdx-mgmt-btn){height:var(--control-h-8);border-radius:var(--radius-lg);padding-inline:var(--sp-3);font-size:var(--text-ui-base)}
.zc-settings-page :is(.zc-select-trigger,.zc-res-search-input,.cdx-mgmt-search){height:var(--control-h-9);border-radius:var(--radius-lg);font-size:var(--text-ui-base)}
.zc-settings-page .zc-select-trigger{border:1px solid var(--color-border);background:var(--color-surface)}
.zc-settings-page :is(.zc-res-search,.zc-res-search.is-grow,.cdx-mgmt-search){width:min(100%,16rem);flex:0 1 16rem;min-width:0}
.zc-settings-page .cdx-mgmt-search{max-width:16rem;box-sizing:border-box}
.zc-settings-page :is(.zc-res-search-input,.cdx-mgmt-search){background:var(--color-card);border-color:var(--color-border)}
.zc-settings-page .zc-res-search-input.is-shortcut{font-family:var(--font-sans)}
.zc-settings-page :is(.cdx-set-toolbar,.cdx-mgmt-toolbar){gap:var(--sp-3);min-height:var(--control-h-9)}
.zc-settings-page .cdx-mgmt-toolbar .cdx-mgmt-search{margin-right:auto}
.zc-settings-page .cdx-sc-search-wrap{margin:0}
.zc-settings-page .zc-switch{width:36px;min-width:36px;height:20px;flex-shrink:0}
.zc-settings-page .zc-switch-thumb{width:16px;height:16px}
html.dark .zc-settings-page .zc-switch-thumb{background:var(--color-foreground)}
.zc-settings-page .zc-switch.is-on .zc-switch-thumb{transform:translateX(16px)}
.zc-settings-page .cdx-set-plugin-main.is-inline{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1)}
.zc-settings-page .cdx-set-plugin-name{flex-shrink:1;overflow-wrap:anywhere}
.zc-settings-page .cdx-set-plugin-desc{white-space:normal;overflow-wrap:anywhere}
.zc-settings-page .cdx-set-plugin-ico{width:var(--size-8);height:var(--size-8)}
.zc-settings-page .cdx-sc-row{border-bottom:1px solid var(--color-border)}
.zc-settings-page .cdx-sc-row:last-child{border-bottom:0}
.zc-settings-page .cdx-sc-kbd{font-size:var(--text-ui-sm)}
.zc-settings-page .settings-custom-mcp{display:flex;flex-direction:column;min-width:0}
.zc-settings-page .settings-custom-mcp summary{padding:0 0 var(--sp-3);font-size:var(--text-ui-base);font-weight:500;cursor:pointer}
.zc-settings-page .memory-content{margin:0 var(--sp-4);padding:var(--sp-4) 0}
.zc-settings-page :is(.general-font,.conv-width-slider,.page-contrast-slider){width:14rem;max-width:100%}
.zc-settings-page .cdx-mgmt-embed{--mgmt-fs-base:var(--text-ui-base);--mgmt-fs-sm:var(--text-ui-sm);--mgmt-fs-xs:var(--text-ui-sm);--mgmt-fs-lg:var(--text-ui-lg)}
.zc-settings-page .cdx-mgmt-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.zc-settings-page .cdx-mgmt-stat{padding:var(--sp-3);background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-xl)}
.zc-settings-page #mgmtBody{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-card)}
.zc-settings-page .cdx-mgmt-list{min-width:600px}
.zc-settings-page .cdx-mgmt-row{min-height:var(--sp-14);border-radius:0;border-bottom:1px solid var(--color-border)}
.zc-settings-page .cdx-mgmt-row:last-child{border-bottom:0}
.zc-settings-page :is(button,a,input,summary):focus-visible{outline:2px solid var(--color-ring);outline-offset:2px}
.zc-settings-page .cdx-mode-tile:has(input:focus-visible) .cdx-mode-preview{outline:2px solid var(--color-ring);outline-offset:2px}
@container (max-width:580px){
  .zc-settings-page .cdx-mgmt-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zc-settings-page .zc-settings-row-grid{grid-template-columns:1fr;gap:var(--sp-3)}
  .zc-settings-page .zc-settings-row-control{justify-content:flex-start}
  .zc-settings-page .cdx-sc-num-card{flex-wrap:wrap}
}
@media(max-width:1023px){
  .zc-settings-page .zc-settings-sidebar-title,.zc-settings-page .zc-settings-search{display:none}
  .zc-settings-page .zc-settings-nav{padding-top:var(--sp-4)}
}
@media(max-width:640px){
  .zc-settings-page .zc-settings-panel-top{height:var(--sp-6)}
  .zc-settings-page .zc-settings-frame{padding-inline:var(--sp-4)}
  .zc-settings-page .zc-settings-title-row{flex-direction:column;align-items:flex-start}
  .zc-settings-page .cdx-sc-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2)}
  .zc-settings-page .cdx-sc-binds{grid-column:1;grid-row:2;align-items:flex-start}
  .zc-settings-page .cdx-sc-row>.cdx-sc-ico{grid-column:2;grid-row:1 / span 2}
}

/* Match the workspace header centerline. */
.zc-settings-page .zc-settings-panel-top{height:0}
.zc-settings-page .zc-settings-title{min-height:var(--page-header-height);display:flex;align-items:center}
.zc-settings-page .zc-settings-sidebar-title{min-height:var(--page-header-height);display:flex;align-items:center;padding:0 var(--sp-4)}

/* Settings capability management uses the same search and tiles as the directory. */
.zc-settings-page:is([data-active-section="plugins"],[data-active-section="skill"],[data-active-section="mcp"]) .cdx-set-toolbar .zc-res-search{width:100%;flex:1;max-width:none}
.zc-settings-page:is([data-active-section="plugins"],[data-active-section="skill"],[data-active-section="mcp"]) .zc-res-search-input{height:var(--control-h-10);border-radius:var(--radius-full);background:var(--color-card)}
.zc-settings-page:is([data-active-section="plugins"],[data-active-section="skill"],[data-active-section="mcp"]) .cdx-set-plugin-list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2) var(--sp-6);border:0;border-radius:0;background:transparent;overflow:visible}
.zc-settings-page:is([data-active-section="plugins"],[data-active-section="skill"],[data-active-section="mcp"]) .cdx-set-plugin-row{padding:var(--sp-2);border:0;border-radius:var(--radius-xl);box-shadow:none;gap:var(--sp-3);min-width:0;transition:background-color .12s ease}
.zc-settings-page:is([data-active-section="plugins"],[data-active-section="skill"],[data-active-section="mcp"]) .cdx-set-plugin-row:hover{background:var(--color-surface-hover)}
.zc-settings-page:is([data-active-section="plugins"],[data-active-section="skill"],[data-active-section="mcp"]) .cdx-set-plugin-ico{width:var(--size-9);height:var(--size-9);border-radius:var(--radius-lg);background:var(--color-card)}
.zc-settings-page:is([data-active-section="plugins"],[data-active-section="skill"],[data-active-section="mcp"]) .cdx-set-plugin-main{overflow:hidden;gap:var(--sp-0-5)}
.zc-settings-page:is([data-active-section="plugins"],[data-active-section="skill"],[data-active-section="mcp"]) :is(.cdx-set-plugin-name,.cdx-set-plugin-desc){display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zc-settings-page:is([data-active-section="plugins"],[data-active-section="skill"],[data-active-section="mcp"]) .cdx-set-plugin-block-title{font-size:var(--text-ui-lg);font-weight:500}
@container (min-width:581px){
 .zc-settings-page:is([data-active-section="plugins"],[data-active-section="skill"],[data-active-section="mcp"]) .cdx-set-plugin-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* White settings layout: open sections aligned to the heading. */
.zc-settings-page .zc-settings-panel{background:var(--color-menu)}
.zc-settings-page :is(.zc-settings-card,.cdx-sc-num-card,.cdx-sc-list){border:0;border-radius:0;background:transparent}
.zc-settings-page .zc-settings-row.zc-settings-row,
.zc-settings-page .cdx-sc-num-card.cdx-sc-num-card{padding:var(--sp-3) 0}
.zc-settings-page .cdx-sc-row.cdx-sc-row{padding:var(--sp-2) 0;border-radius:0}
.zc-settings-page .cdx-mgmt-stats{gap:0;padding:var(--sp-4) 0;border-block:1px solid var(--color-border-subtle)}
.zc-settings-page .cdx-mgmt-stat{border:0;border-radius:0;background:transparent;padding:0 var(--sp-4)}
.zc-settings-page .cdx-mgmt-stat:first-child{padding-left:0}
.zc-settings-page .cdx-mgmt-stat + .cdx-mgmt-stat{border-left:1px solid var(--color-border-subtle)}
.zc-settings-page #mgmtBody{border:0;border-radius:0;background:transparent}
.zc-settings-page .zc-settings-row + .zc-settings-row{box-shadow:none;border-top:1px solid var(--color-border-subtle)}
.zc-settings-page .cdx-sc-row{min-height:var(--sp-14);border-color:var(--color-border-subtle)}
.zc-settings-page .cdx-sc-row:hover{background:var(--color-surface-hover)}
.zc-settings-page :is(.zc-res-search,.zc-res-search.is-grow,.cdx-mgmt-search){width:min(100%,20rem);flex:0 1 20rem;max-width:20rem}
.zc-settings-page :is(.zc-res-search-input,.cdx-mgmt-search){height:var(--control-h-10);border-radius:var(--radius-full);background:var(--color-card)}
.zc-settings-page :is(.cdx-mgmt-btn,.cdx-set-btn-solid,.cdx-set-btn-ghost){border-radius:var(--radius-full)}
.zc-settings-page .cdx-mgmt-list{gap:var(--sp-0-5)}
.zc-settings-page .cdx-mgmt-listhead{padding-inline:var(--sp-2)}
.zc-settings-page .cdx-mgmt-listhead::after{left:0;right:0}
.zc-settings-page .cdx-mgmt-row{padding-inline:var(--sp-2);min-height:var(--sp-10);border:0;border-radius:var(--radius-lg)}
.zc-settings-page .cdx-mgmt-name-text{font-weight:400}
.zc-settings-page .cdx-mgmt-avatar{width:var(--size-8);height:var(--size-8)}
.zc-settings-page .cdx-mgmt-acts{opacity:1}
@media(max-width:900px){
 .zc-settings-page .zc-settings-frame{padding-inline:var(--sp-6)}
}
@media(max-width:640px){
 .zc-settings-page .zc-settings-frame{padding-inline:var(--sp-4)}
 .zc-settings-page .cdx-mgmt-stat{padding:var(--sp-2)}
 .zc-settings-page .cdx-mgmt-stat:nth-child(3){border-left:0}
}

/* Full-width search and header actions shared by settings directories. */
.zc-settings-page :is(.zc-res-search,.zc-res-search.is-grow,.cdx-mgmt-search){width:100%;max-width:none;flex:1 1 100%}
.zc-settings-page #settingsSectionHeadExtra{flex-shrink:0;align-self:flex-start;padding-top:calc((var(--page-header-height) - var(--control-h-8)) / 2)}
.zc-settings-page #settingsSectionHeadExtra :is(.cdx-mgmt-btn,.cdx-set-btn-solid,.cdx-set-btn-ghost){height:var(--control-h-8);padding-inline:var(--sp-4);border-radius:var(--radius-full)}
.zc-settings-page #settingsSectionHeadExtra .cdx-set-btn-ghost{border:1px solid var(--color-border);background:var(--color-surface)}
@media(max-width:640px){.zc-settings-page #settingsSectionHeadExtra{padding-top:0}}

/* Octop ProfileAvatarPicker: original portrait assets and picker proportions. */
.zc-settings-page .zc-settings-card.profile-card{padding:var(--sp-3) 0}
.profile-card h2{font-size:var(--text-ui-base);font-weight:600;margin:0 0 var(--sp-1)}
.profile-card p{font-size:var(--text-ui-sm);color:var(--color-foreground-subtle);margin:0 0 var(--sp-3);line-height:1.6}
.profile-picker{border:0;border-radius:0;padding:var(--sp-3) 0 0}
.profile-picker-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.profile-avatar-preview{width:64px;height:64px;border-radius:var(--radius-full);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--color-surface-hover);color:var(--color-icon-blue)}
.profile-avatar-preview img,.profile-preset img{width:100%;height:100%;object-fit:cover}
.profile-avatar-preview svg{width:26px;height:26px}
.profile-picker-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);min-width:0}
.profile-picker-actions p{flex-basis:100%;margin:0}
.profile-presets{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.profile-preset{width:36px;height:36px;padding:0;border:0;border-radius:var(--radius-full);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--color-surface-hover);color:var(--color-icon-blue)}
.profile-preset[aria-pressed=true]{box-shadow:0 0 0 2px var(--color-card),0 0 0 4px var(--color-brand)}
.profile-preset:focus-visible{outline:2px solid var(--color-ring);outline-offset:3px}
.profile-name-input{width:100%;box-sizing:border-box;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-card);color:var(--color-foreground);height:var(--control-h-10);padding-inline:var(--sp-3);font:inherit}
.profile-error{display:block;color:var(--color-danger);font-size:var(--text-ui-sm);margin-top:var(--sp-2)}
.profile-default-avatar{display:flex;align-items:center;justify-content:center;background:var(--color-surface-hover);color:var(--color-icon-blue)}

.zc-settings-page .profile-picker-actions .zc-btn{background:var(--color-card);color:var(--color-foreground);border:1px solid var(--color-border)}


/* Settings navigation and section headings share one surface and hierarchy. */
.zc-settings-page .zc-settings-aside{background:var(--color-menu)}
.zc-settings-page :is(.general-section h2,.zc-settings-section-label,.zc-settings-h3,.cdx-set-plugin-block-title,.profile-card h2){margin:0 0 var(--sp-2);font-size:var(--text-ui-lg);font-weight:500;line-height:1.5;color:var(--color-foreground)}
.zc-settings-page .profile-card p{line-height:1.5}

/* Larger avatar options with room for the selection ring. */
.profile-presets{gap:var(--sp-3);padding:var(--sp-1) 0}
.profile-preset{width:48px;height:48px;flex:0 0 48px}
.profile-avatar-preview{width:72px;height:72px}