/* Settings use one surface per task. Lists are rows inside it; forms retain their own surface. */
#page-settings #set-sources .sources-sheet:has(.src-source),
#page-settings #set-team .team-sheet,
#page-settings #set-api .api-sheet,
#page-settings #set-audit .audit-sheet {
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: 20px;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
}
#page-settings #set-sources .sources-sheet:has(.src-source) .settings-content-head,
#page-settings #set-team .team-sheet .settings-content-head,
#page-settings #set-api .api-sheet .settings-content-head,
#page-settings #set-audit .audit-sheet .settings-content-head {
  align-items: center;
  margin: 0;
  padding: 22px 24px 8px;
}
#page-settings #set-sources .settings-content-head .set-section-h { font: 680 20px/1.3 var(--ds-font); letter-spacing: -.025em; }
#page-settings #set-sources .sources-sheet:has(.src-source) .src-overview {
  margin: 0;
  padding: 0 24px 20px;
}
#page-settings #set-sources .sources-sheet:has(.src-source) #srcListMp .src-source {
  border: 0;
  border-top: 1px solid var(--ds-line);
  border-radius: 0;
}
#page-settings #set-sources .sources-sheet:has(.src-source) #srcListMp .src-source:last-child { border-bottom: 0; }
#page-settings #set-team .team-sheet .settings-content-head .set-section-h { margin: 0; }
#page-settings #set-team :is(#teamMembersList,#teamInvitesList) { display: block; min-width: 0; }
#page-settings #set-team #teamMembersList { border-top: 1px solid var(--ds-line); }
#page-settings #set-team .team-card {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  min-height: 76px;
  margin: 0;
  padding: 14px 24px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--ds-line);
  background: transparent;
  box-shadow: none;
  transform: none;
}
#page-settings #set-team .team-card:hover { border-color: var(--ds-line); background: var(--ds-surface-subtle); box-shadow: none; transform: none; }
#page-settings #set-team .team-card.owner { border: 0; border-bottom: 1px solid var(--ds-line); background: transparent; }
#page-settings #set-team .team-card-head { grid-column: 3; grid-row: 1 / 3; justify-self: end; width: auto; margin: 0; }
#page-settings #set-team .team-card-ava { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 40px; height: 40px; margin: 0; border-radius: 11px; font-size: 15px; }
#page-settings #set-team .team-card-name { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; margin: 0; overflow-wrap: anywhere; font: 650 14px/1.35 var(--ds-font); }
#page-settings #set-team .team-card-email { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; overflow-wrap: anywhere; font: 450 13px/1.4 var(--ds-font); }
#page-settings #set-team .team-card-pill,
#page-settings #set-team .team-card.owner .team-card-pill {
  height: auto;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--ds-line);
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-secondary);
  font: 550 12px/1.2 var(--ds-font);
  letter-spacing: 0;
  text-transform: none;
}
#page-settings #set-team .team-invitations-heading { margin: 0; padding: 20px 24px 12px; border-top: 1px solid var(--ds-line); font: 650 14px/1.3 var(--ds-font); }
#page-settings #set-team #teamMembersList .team-card:last-child,
#page-settings #set-team #teamInvitesList .team-card:last-child { border-bottom: 0; }
#page-settings #set-team .team-empty { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 20px 24px; text-align: left; }
#page-settings #set-team .team-card[role="button"]:focus-visible { outline: 2px solid var(--ds-accent-strong); outline-offset: -3px; }
#page-settings #set-api .api-sheet .api-keys-list { gap: 0; border-top: 1px solid var(--ds-line); }
#page-settings #set-api .api-sheet .api-key-row { min-height: 76px; padding: 16px 24px; border: 0; border-bottom: 1px solid var(--ds-line); border-radius: 0; background: transparent; }
#page-settings #set-api .api-sheet .api-keys-empty { padding: 22px 24px; border: 0; border-bottom: 1px solid var(--ds-line); border-radius: 0; text-align: left; }
#page-settings #set-api .api-create-section { padding: 20px 24px 24px; }
#page-settings #set-api .api-create-section .set-section-h2 { margin: 0 0 14px; font: 650 14px/1.3 var(--ds-font); }
#page-settings #set-api .api-create input { min-height:44px; height:44px; border:1px solid var(--ws-line); border-radius:var(--ws-control-radius); background:var(--ds-surface); font:400 14px/1.4 var(--ds-font); box-shadow:var(--ws-shadow); }
#page-settings #set-api .api-create input:focus-visible { outline:2px solid var(--ds-accent)!important; outline-offset:3px; }
#page-settings #set-api .api-create input::placeholder { color:var(--ds-ink-secondary); opacity:1; }
#page-settings #set-api .api-create .src-add-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ds-line); border-radius:var(--ws-control-radius); background:var(--ds-accent); color:white; box-shadow:var(--ws-shadow); gap:8px; font:500 14px/1.4 var(--ds-font); cursor:pointer; }
#page-settings #set-api .api-create .src-add-btn:hover { background:var(--ds-accent-strong); }
#page-settings #set-api .api-docs-disclosure { border-top: 1px solid var(--ds-line); }
#page-settings #set-api .api-docs-disclosure summary { display: flex; align-items: center; gap:10px; list-style:none; min-height: 52px; padding: 10px 24px; color: var(--ds-accent-strong); font: 600 13px/1.4 var(--ds-font); cursor: pointer; }
#page-settings #set-api .api-docs-disclosure summary::-webkit-details-marker { display:none; }
#page-settings #set-api .api-docs-disclosure summary svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#page-settings #set-api .api-docs-chevron { margin-left:auto; }
#page-settings #set-api .api-docs-disclosure[open] .api-docs-chevron { transform:rotate(180deg); }
#page-settings #set-api .api-key-revoke { min-height:44px; padding:8px 14px; border-color:var(--ws-line); color:var(--ds-ink-secondary); background:var(--ds-surface); font:500 13px/1.4 var(--ds-font); }
#page-settings #set-api .api-key-revoke:is(:hover,:focus-visible) { color:var(--ds-red); background:var(--ds-surface-subtle); }
#page-settings #set-api .api-key-meta { line-height:1.5; overflow-wrap:anywhere; }
#page-settings #set-api .api-docs-disclosure summary:focus-visible { outline: 2px solid var(--ds-accent-strong); outline-offset: -3px; }
#page-settings #set-api .api-docs-block { margin: 0 24px 24px; border-color: var(--ds-line); background: var(--ds-surface-subtle); }
#page-settings #set-audit .audit-sheet .audit-toolbar { display: grid; grid-template-columns:minmax(0,340px) auto; justify-content:start; gap:8px 12px; margin:12px 24px 18px; }
#page-settings #set-audit .audit-sheet .audit-filter-label { grid-column: 1 / -1; }
#page-settings #set-audit .audit-sheet .audit-filter { width: min(340px,100%); min-width: 0; }
#page-settings #set-audit .audit-sheet .audit-refresh { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 16px; border: 1px solid var(--ds-line); border-radius:var(--ws-control-radius); background:var(--ds-surface); color:var(--ds-ink-secondary); box-shadow:var(--ws-shadow); gap:8px; font:500 14px/1.4 var(--ds-font); cursor:pointer; }
#page-settings #set-audit .audit-sheet .audit-refresh:hover { background: var(--ds-surface-subtle); }
#page-settings #set-audit .audit-sheet .audit-refresh svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#page-settings #set-audit .audit-sheet .audit-summary { margin:0 24px 20px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; gap:8px; }
#page-settings #set-audit .audit-sheet .audit-summary-item { min-height:0; padding:8px 12px; border:0; border-radius:12px; background:var(--ds-surface-subtle); box-shadow:none; }
#page-settings #set-audit .audit-sheet .audit-event :is(time,.audit-event-ip) { font-variant-numeric:tabular-nums; }
#page-settings #set-audit .audit-sheet #auditList { border-top: 1px solid var(--ds-line); border-radius: 0; box-shadow: none; }
#page-settings #set-audit .audit-sheet .audit-state { padding: 22px 24px; }
#page-settings #set-chats .chat-settings { margin-top: 24px; gap: 16px; }
#page-settings #set-chats .chat-settings-card { padding: 24px; border-radius: 20px; }
#page-settings #set-chats .chat-settings-card h2 { font: 700 20px/1.25 var(--ds-font); }
#page-settings #set-chats .chat-settings-card h3 { font: 680 17px/1.3 var(--ds-font); }
#page-settings #set-chats .chat-settings-card p { font: 450 13px/1.5 var(--ds-font); }
#page-settings #set-chats .chat-global-mode { display: grid; gap: 6px; flex: 0 0 auto; min-width: 170px; color: var(--ds-ink-secondary); font: 550 12px/1.3 var(--ds-font); }
#page-settings #set-chats .chat-store-list { margin-top: 20px; }
#page-settings #set-ai:not(.detail-mode) .set-ai-head .settings-content-head { margin-bottom: 0; }
#page-settings #set-ai:not(.detail-mode) .ai-collection-title {
  margin: 24px 0 12px;
  color: var(--ds-ink);
  font: 650 16px/1.35 var(--ds-font);
  letter-spacing: -.015em;
}
#page-settings #set-ai:not(.detail-mode) .set-ai-head + .ai-collection-title { margin-top: 0; }
#page-settings #set-ai:not(.detail-mode) .ai-list {
  display: block;
  container: ai-sets / inline-size;
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: 20px;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
}
#page-settings #set-ai:not(.detail-mode) .ai-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  gap: 18px;
  padding: 24px;
  border: 0;
  border-bottom: 1px solid var(--ds-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
#page-settings #set-ai:not(.detail-mode) .ai-card:last-child { border-bottom: 0; }
#page-settings #set-ai:not(.detail-mode) .ai-card:hover { border-color: var(--ds-line); background: var(--ds-surface-subtle); box-shadow: none; transform: none; }
#page-settings #set-ai:not(.detail-mode) .ai-card-icon { display: grid; place-items: center; align-self: start; width: 44px; height: 44px; border-radius: 16px; color: var(--a); background: #edf3ff; }
#page-settings #set-ai:not(.detail-mode) .ai-card-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#page-settings #set-ai:not(.detail-mode) .ai-card-body { min-width: 0; }
#page-settings #set-ai:not(.detail-mode) .ai-card-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 6px; }
#page-settings #set-ai:not(.detail-mode) .ai-card-pill { display: inline-flex; flex: 0 0 auto; height: auto; padding: 5px 10px; border: 0; border-radius: 999px; background: #edf3ff; color: var(--a); font: 550 11px/1.3 var(--ds-font); letter-spacing: 0; text-transform: none; }
#page-settings #set-ai:not(.detail-mode) .ai-card-name { margin: 0; overflow-wrap: anywhere; font: 680 17px/1.3 var(--ds-font); letter-spacing: -.018em; }
#page-settings #set-ai:not(.detail-mode) .ai-card-desc { margin: 0; overflow-wrap: anywhere; color: var(--ds-ink-secondary); font: 450 13px/1.5 var(--ds-font); }
#page-settings #set-ai:not(.detail-mode) .ai-card-traits { gap: 6px; margin-top: 10px; }
#page-settings #set-ai:not(.detail-mode) .ai-card-trait { height: auto; min-height: 26px; max-width: 100%; padding: 5px 10px; overflow-wrap: anywhere; font: 550 12px/1.2 var(--ds-font); }
#page-settings #set-ai:not(.detail-mode) .ai-card-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
#page-settings #set-ai:not(.detail-mode) .ai-card-foot-meta { display: block; margin-top: 8px; color: var(--ds-ink-tertiary); font: 450 12px/1.3 var(--ds-font); }
#page-settings #set-ai:not(.detail-mode) :is(.ai-card-cta, .ai-card-rm) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: 44px; min-height: 44px; padding: 0 16px; white-space: nowrap; font: 600 13px/1 var(--ds-font); }
#page-settings #set-ai:not(.detail-mode) :is(.ai-card-cta, .ai-card-rm) svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#page-settings #set-ai:not(.detail-mode) .ai-card.plan-unavailable { cursor: default; }
@container ai-sets (max-width: 720px) {
  #page-settings #set-ai:not(.detail-mode) .ai-card { grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 14px; }
  #page-settings #set-ai:not(.detail-mode) .ai-card-foot { grid-column: 2; justify-content: flex-start; }
}
@container ai-sets (max-width: 420px) {
  #page-settings #set-ai:not(.detail-mode) .ai-card { grid-template-columns: 40px minmax(0, 1fr); padding: 18px; gap: 12px; }
  #page-settings #set-ai:not(.detail-mode) .ai-card-icon { width: 40px; height: 40px; border-radius: 14px; }
  #page-settings #set-ai:not(.detail-mode) .ai-card-foot { grid-column: 1 / -1; }
  #page-settings #set-ai:not(.detail-mode) :is(.ai-card-cta, .ai-card-rm) { flex: 1; padding: 0 12px; }
  #page-settings #set-ai:not(.detail-mode) .ai-card-name { font-size: 16px; }
}

/* A consistent desktop reading rhythm: heading, one surface, then the next task. */
#page-settings .rules-block-head { align-items: center; margin-bottom: 20px; }
#page-settings .rules-block-head h2 { font: 680 20px/1.3 var(--ds-font); letter-spacing: -.025em; }
#page-settings .rules-list-head { margin-top: 30px; }
#page-settings .rules-list-head p { max-width: 76ch; margin-top: 6px; color: var(--ds-ink-secondary); font: 450 13px/1.45 var(--ds-font); }
#page-settings .quick-rule-card { margin-bottom: 0; padding: 28px 30px; border: 1px solid var(--ds-line); border-radius: 22px; }
#page-settings .quick-rule-label { font-size: 13px; }
#page-settings .quick-rule-hint { font-size: 12px; }
#page-settings .quick-rule-summary p { font-size: 13px; }
#page-settings .settings-content-head .set-section-h { font-size: 20px; }
#page-settings .set-section-sub { font-size: 14px; }
#page-settings .rule-card-pill { font-size: 11px; letter-spacing: 0; text-transform: none; }
#page-settings .rcc-lbl { font-size: 12px; font-weight: 550; letter-spacing: 0; text-transform: none; }
@media (max-width: 600px) {
  #page-settings #set-sources .sources-sheet:has(.src-source) .settings-content-head,
  #page-settings #set-team .team-sheet .settings-content-head,
  #page-settings #set-api .api-sheet .settings-content-head,
  #page-settings #set-audit .audit-sheet .settings-content-head { padding: 20px 18px 10px; }
  #page-settings #set-sources .sources-sheet:has(.src-source) .src-overview { padding: 0 18px 16px; }
  #page-settings #set-team .team-card { grid-template-columns: 40px minmax(0,1fr); row-gap: 4px; padding: 14px 18px; }
  #page-settings #set-team .team-card-head { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 3px; }
  #page-settings #set-team .team-invitations-heading { padding: 18px 18px 10px; }
  #page-settings #set-api .api-sheet .api-key-row,
  #page-settings #set-api .api-sheet .api-keys-empty,
  #page-settings #set-api .api-create-section { padding-left: 18px; padding-right: 18px; }
  #page-settings #set-api .api-docs-disclosure summary { padding-left: 18px; padding-right: 18px; }
  #page-settings #set-api .api-docs-block { margin-left: 18px; margin-right: 18px; }
  #page-settings #set-api .api-sheet .api-key-row { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; }
  #page-settings #set-api .api-sheet .api-key-info { order: 0; width: auto; }
  #page-settings #set-api .api-sheet .api-key-revoke { order: 0; }
  #page-settings #set-audit .audit-sheet .audit-toolbar { margin-left: 18px; margin-right: 18px; }
  #page-settings #set-audit .audit-sheet .audit-filter { width: 100%; }
  #page-settings #set-audit .audit-sheet .audit-summary { margin-left: 18px; margin-right: 18px; }
  #page-settings #set-chats .chat-settings-card { padding: 20px; }
  #page-settings #set-chats .chat-global-mode { width: 100%; }
  #page-settings #set-chats .chat-global-mode .chat-settings-select { width: 100%; }
  #page-settings .settings-content-head { align-items: center; flex-direction: row; gap: 8px 12px; }
  #page-settings .settings-content-head .set-section-h { flex: 1 1 150px; font-size: 19px; }
  #page-settings .settings-content-head .src-connect-action {
    width: auto;
    min-height: 38px;
    align-self: center;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--ds-line);
    background: var(--ds-surface);
    color: var(--ds-accent-strong);
    box-shadow: none;
    font-size: 12px;
  }
  #page-settings .quick-rule-card { padding: 20px 18px; }
  #page-settings .quick-rule-scope { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #page-settings .quick-rule-scope-btn,
  #page-settings .quick-rule-scope-btn:first-child { grid-column: span 2; }
  #page-settings .quick-rule-scope-btn:nth-child(n+4) { grid-column: span 3; }
  #page-settings .quick-rule-ratings { grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); gap: 2px; }
  #page-settings .quick-rule-rating { padding: 0 2px; }
  #page-settings .rules-list-head { align-items: flex-start; }
  #page-settings .rules-list-head .advanced-rule-create { width: auto; }
}
@media (max-width: 360px) {
  #page-settings .quick-rule-ratings { display: flex; overflow-x: auto; scrollbar-width: thin; }
  #page-settings .quick-rule-rating { flex: 0 0 44px; }
  #page-settings .quick-rule-rating:first-child { flex-basis: 62px; }
}

/* Settings studio — one navigation rail, one working canvas, one surface language.
   Kept after legacy styles so every existing control and action remains intact. */
.app:has(#page-settings.on) {
  background: #f8f9fb;
}
.app:has(#page-settings.on) .main-head { min-height: 78px; margin-bottom: 0; }
.app:has(#page-settings.on) .content { padding-top: 12px; }
#page-settings {
  --settings-line: #e5e7eb;
  --settings-muted: #68707d;
  --settings-ink: #191c22;
  --settings-shadow: 0 14px 34px rgba(23, 32, 49, .035), 0 2px 7px rgba(23, 32, 49, .025);
  color: var(--settings-ink);
}
#page-settings .set-section-sub {
  max-width: 68ch;
  margin: 0 0 22px;
  color: var(--settings-muted);
  font: 450 14px/1.55 var(--ds-font);
}
#page-settings .settings-content-head { align-items: center; gap: 14px; margin-bottom: 18px; }
#page-settings .settings-content-head .set-section-h,
#page-settings .rules-block-head h2 { font: 690 21px/1.25 var(--ds-font); letter-spacing: -.035em; }
#page-settings .set-section-h2 { font: 660 16px/1.3 var(--ds-font); letter-spacing: -.02em; }

#page-settings .set-head { margin-bottom: 24px; padding: 0; }
#page-settings .set-tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--settings-line);
  border-radius: 17px;
  background: #fff;
  box-shadow: var(--settings-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#page-settings .set-tab {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #59616d;
  background: transparent;
  box-shadow: none;
  font: 560 14px/1.2 var(--ds-font);
}
#page-settings .set-tab:hover { color: var(--settings-ink); background: #f4f5f7; }
#page-settings .set-tab.on {
  color: var(--settings-ink);
  border-color: #e4e6eb;
  background: #f7f8fa;
  box-shadow: none;
  font-weight: 680;
}

/* The composer reference is about clear hierarchy, not a copy of its chrome. */
#page-settings :is(.quick-rule-card,.rule-card,.rt-gcard,.bp-card,.chat-settings-card,.billing-plan-card,.billing-usage-card,.billing-history-card,.settings-sheet,.api-upgrade,.audit-summary,.src-stat) {
  border: 1px solid var(--settings-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--settings-shadow);
}
#page-settings :is(.quick-rule-card,.rule-card,.rt-gcard,.bp-card,.chat-settings-card,.billing-plan-card,.billing-usage-card,.billing-history-card,.settings-sheet,.api-upgrade,.audit-summary,.src-stat):hover {
  border-color: #d9dde4;
}
#page-settings :is(.rule-card,.rt-gcard,.ai-card,.src-source,.team-card):hover {
  transform: none;
  box-shadow: var(--settings-shadow);
}
#page-settings :is(.quick-rule-picker,.chat-settings-select,.audit-filter,.api-create input,.src-add input,.src-add select) {
  border-color: #dde1e7;
  background: #fff;
  color: var(--settings-ink);
}
#page-settings :is(.quick-rule-scope,.quick-rule-ratings,.ai-seg) { border: 1px solid #e9ebef; background: #f6f7f9; }
#page-settings :is(.quick-rule-scope-btn.on,.quick-rule-rating.on,.quick-rule-card .ai-seg-btn.on) {
  border-color: #dfe3e9;
  color: var(--settings-ink);
  background: #fff;
  box-shadow: 0 1px 4px rgba(23,32,49,.07);
}
#page-settings .quick-rule-card { padding: 28px; }
#page-settings .quick-rule-grid { gap: 26px; }
#page-settings .quick-rule-pane + .quick-rule-pane { padding-left: 26px; border-color: var(--settings-line); }
#page-settings .quick-rule-pane legend { margin-bottom: 20px; font: 650 16px/1.3 var(--ds-font); }
#page-settings .quick-rule-field { margin-top: 20px; }
#page-settings .quick-rule-label { margin-bottom: 8px; color: #4e5662; font-weight: 590; }
#page-settings .quick-rule-summary { border: 0; background: transparent; box-shadow: none; }
#page-settings .quick-rule-send { padding-top: 18px; border-top: 1px solid var(--settings-line); }
#page-settings .quick-rule-save,
#page-settings .src-connect-action {
  min-height: 44px;
  border: 1px solid #20242b;
  border-radius: 11px;
  color: #fff;
  background: #20242b;
  box-shadow: none;
}
#page-settings .quick-rule-save:hover,
#page-settings .src-connect-action:hover { border-color: #363b44; background: #363b44; transform: none; }
#page-settings .advanced-rule-create { background: #fff; border-color: var(--settings-line); box-shadow: none; }
#page-settings .rules-list-head { margin-top: 34px; }
#page-settings .rules-list-head p { max-width: 58ch; }
#page-settings .rule-card { padding: 26px; }
#page-settings .rule-card-conds { gap: 14px; }
#page-settings .rule-card-conds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#fpickOverlay [hidden] { display: none !important; }
.fpick-keywords { padding: 20px 24px 24px; }
.fpick-keywords label { display: block; margin-bottom: 8px; font: 650 13px var(--ds-font); color: var(--t); }
.fpick-keywords textarea { box-sizing: border-box; width: 100%; min-height: 132px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg3); color: var(--t); font: 500 14px/1.5 var(--ds-font); resize: vertical; }
.fpick-keywords textarea:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.fpick-keywords p { margin: 8px 0 0; color: var(--t3); font: 500 12px/1.5 var(--ds-font); }
@media (max-width: 980px) { #page-settings .rule-card-conds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { #page-settings .rule-card-conds { grid-template-columns: minmax(0, 1fr); } }
#page-settings .rcc-lbl { color: #7b8390; }
/* The scope values open pickers; make that action visible before hover. */
#page-settings .rule-card-conds .rcc,
#page-settings .rule-card-conds .rcc:first-child {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
  padding: 10px 40px 10px 20px;
  border: 1px solid var(--ds-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(24,24,27,.025),0 5px 14px rgba(24,24,27,.035);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
#page-settings .rule-card-conds .rcc::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.7px solid currentColor;
  border-right: 1.7px solid currentColor;
  color: var(--ds-ink-tertiary);
  transform: translateY(-50%) rotate(45deg);
}
#page-settings .rule-card-conds .rcc:hover {
  border-color: #dedee2;
  background: #fafafa;
  box-shadow: 0 3px 6px rgba(24,24,27,.035),0 7px 18px rgba(24,24,27,.05);
}
#page-settings .rule-card-conds .rcc:hover::after { color: var(--ds-ink-secondary); }
#page-settings .rule-card-conds .rcc:focus-visible {
  outline: 2px solid var(--ds-accent-strong);
  outline-offset: 2px;
}
#page-settings .rule-card-pill { border-radius: 999px; }
#page-settings .saved-rules-sheet { overflow: hidden; margin-top: 34px; }
#page-settings .saved-rules-sheet .rules-list-head { margin: 0; padding: 24px 28px 20px; }
#page-settings .saved-rules-sheet .rules-list { display: block; padding: 0; }
#page-settings .saved-rules-sheet .rule-item { border-top: 1px solid var(--settings-line); }
#page-settings .saved-rules-sheet .rule-card,
#page-settings .saved-rules-sheet .rule-card.open {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#page-settings .saved-rules-sheet .rule-card:hover:not(.open) { border: 0; background: #fafbfc; box-shadow: none; }
#page-settings .saved-rules-sheet .rule-inline {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--settings-line);
  border-radius: 0;
  box-shadow: none;
}

/* A template group is a browseable object, so it keeps a distinct card. */
#page-settings .rt-cardgrid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
#page-settings .rt-gcard { min-height: 216px; }
#page-settings .rt-gcard-head { padding: 20px 22px 12px; }
#page-settings .rt-gcard-sum { padding: 0 22px 16px; }
#page-settings .rt-gcard-foot { padding: 12px 22px; }
#page-settings .rt-gcard-cta-arrow { background: #eef3ff; color: var(--ds-accent-strong); }
#page-settings .rt-gcard:hover .rt-gcard-cta-arrow { background: #e4edff; color: var(--ds-accent-strong); transform: translateX(2px); }
#page-settings .templates-sheet {
  overflow: hidden;
  border: 1px solid #dce1e8;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--settings-shadow);
}
#page-settings .templates-header-surface {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
#page-settings .templates-sheet .tpl-groups {
  padding: 20px;
  border-top: 1px solid var(--settings-line);
  background: #f7f8fa;
}
#page-settings .ai-collection-sheet { overflow: hidden; }
#page-settings .templates-header-surface > .settings-content-head,
#page-settings .ai-collection-sheet .set-ai-head > .settings-content-head { margin: 0; padding: 24px 24px 0; }
#page-settings .templates-header-surface > .set-section-sub,
#page-settings .ai-collection-sheet .set-ai-head > .set-section-sub {
  max-width: 76ch;
  margin: 0;
  padding: 8px 24px 22px;
}
#page-settings .templates-sheet .rt-gcard {
  border: 1px solid #dee3ea;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(23,32,49,.025);
}
#page-settings .templates-sheet .rt-gcard:hover { border-color: #c6d1df; background: #fff; box-shadow: 0 9px 24px rgba(23,32,49,.075); }
#page-settings #set-ai:not(.detail-mode) .ai-collection-sheet .ai-collection-title {
  margin: 0;
  padding: 0 24px 16px;
}
#page-settings #set-ai:not(.detail-mode) .ai-collection-sheet .ai-list {
  border: 0;
  border-top: 1px solid var(--settings-line);
  border-radius: 0;
  box-shadow: none;
}
#page-settings #set-ai.detail-mode .ai-collection-sheet { border: 0; background: transparent; box-shadow: none; overflow: visible; }
#page-settings #set-ai:not(.detail-mode) .ai-list,
#page-settings #set-team .team-sheet,
#page-settings #set-api .api-sheet,
#page-settings #set-audit .audit-sheet,
#page-settings #set-sources .sources-sheet:has(.src-source) {
  border-color: var(--settings-line);
  border-radius: 20px;
  box-shadow: var(--settings-shadow);
}
#page-settings #set-ai:not(.detail-mode) .ai-card,
#page-settings #set-team .team-card,
#page-settings #set-api .api-key-row,
#page-settings #set-sources .src-source { border-color: var(--settings-line); }
#page-settings #set-ai:not(.detail-mode) .ai-card:hover,
#page-settings #set-team .team-card:hover,
#page-settings #set-sources .src-source:hover { background: #fafbfc; box-shadow: none; }
#page-settings #set-ai:not(.detail-mode) .ai-card-trait { border: 1px solid #e8eaee; color: #606874; background: #f8f9fa; }
#page-settings #set-chats .chat-settings { margin-top: 0; gap: 14px; }
#page-settings #set-chats .chat-settings-card { padding: 26px; }
#page-settings #set-chats .chat-settings-card h2 { font-size: 19px; }
#page-settings #set-chats .chat-settings-card p { color: var(--settings-muted); }
#page-settings #set-chats .chat-store-list { border-top: 1px solid var(--settings-line); }
#page-settings .billing-plan-card { border-color: var(--settings-line); }
#page-settings .billing-plan-badge:not(.tier-ultra .billing-plan-badge) { border-color: var(--settings-line); background: #f4f5f7; color: #505865; }
#page-settings .billing-kicker { letter-spacing: 0; text-transform: none; }
#page-settings .billing-answer-balance.healthy .billing-answer-value strong { color: #167453; }
#page-settings .billing-plan-included,
#page-settings .billing-period-row { border-color: var(--settings-line); }
#page-settings #set-audit .audit-sheet .audit-refresh { background: #fff; border-color: var(--settings-line); color: var(--settings-ink); }

/* The AI behavior editor is one settings task, not a stack of legacy cards. */
#page-settings #set-ai.detail-mode .ai-collection-sheet {
  overflow: hidden;
  border: 1px solid var(--settings-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--settings-shadow);
}
#page-settings #set-ai.detail-mode #aiListMp {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-settings #set-ai.detail-mode .ai-settings-sheet {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-settings #set-ai.detail-mode .ai-detail-back {
  margin: 20px 24px 0;
}
#page-settings #set-ai.detail-mode .ai-detail-back:focus-visible,
#page-settings #set-ai.detail-mode .ai-hero-actions button:focus-visible,
#page-settings #set-ai.detail-mode .ai-preview-sample:focus-visible,
#page-settings #set-ai.detail-mode .ai-trait:focus-visible,
#page-settings #set-ai.detail-mode .tpl-save-btn:focus-visible {
  outline: 2px solid var(--ds-accent-strong);
  outline-offset: 2px;
}
#page-settings #set-ai.detail-mode .ai-hero {
  margin: 0;
  padding: 16px 24px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-settings #set-ai.detail-mode .ai-hero-row { align-items: center; gap: 28px; }
#page-settings #set-ai.detail-mode .ai-hero-name {
  font: 700 26px/1.2 var(--ds-font);
  letter-spacing: -.03em;
}
#page-settings #set-ai.detail-mode .ai-hero-sub {
  margin-top: 4px;
  color: var(--settings-muted);
  font: 450 13px/1.45 var(--ds-font);
}
#page-settings #set-ai.detail-mode .ai-hero-actions { margin-top: 16px; }
#page-settings #set-ai.detail-mode .ai-hero-actions button {
  min-height: 40px;
  background: #fff;
  border-color: var(--settings-line);
  color: var(--settings-ink);
  box-shadow: none;
  backdrop-filter: none;
}
#page-settings #set-ai.detail-mode .ai-preview {
  padding: 16px;
  border: 1px solid var(--settings-line);
  border-radius: 14px;
  background: #f7f8fa;
  box-shadow: none;
  backdrop-filter: none;
}
#page-settings #set-ai.detail-mode .ai-preview-h {
  color: var(--settings-muted);
  font: 650 12px/1.3 var(--ds-font);
  letter-spacing: 0;
  text-transform: none;
}
#page-settings #set-ai.detail-mode .ai-preview-dot { display: none; }
#page-settings #set-ai.detail-mode .ai-preview-mode {
  background: #eef0f3;
  color: var(--settings-muted);
  font: 550 11px/1 var(--ds-font);
}
#page-settings #set-ai.detail-mode .ai-preview-sample { min-height: 40px; height: auto; }
#page-settings #set-ai.detail-mode .ai-preview-note {
  color: var(--settings-muted);
  font: 450 11px/1.45 var(--ds-font);
}
#page-settings #set-ai.detail-mode .ai-detail-section {
  margin: 0;
  padding: 24px;
  border: 0;
  border-top: 1px solid var(--settings-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-settings #set-ai.detail-mode .ai-section-h {
  color: var(--settings-ink);
  font: 680 18px/1.3 var(--ds-font);
}
#page-settings #set-ai.detail-mode .ai-section-sub { color: var(--settings-muted); }
#page-settings #set-ai.detail-mode .ai-param-h {
  color: var(--settings-ink);
  font: 620 14px/1.3 var(--ds-font);
}
#page-settings #set-ai.detail-mode .ai-seg {
  border: 1px solid #e9ebef;
  background: #f6f7f9;
}
#page-settings #set-ai.detail-mode .ai-seg-btn.on {
  color: var(--settings-ink);
  background: #fff;
  box-shadow: 0 1px 4px rgba(23,32,49,.07);
}
#page-settings #set-ai.detail-mode .ai-trait {
  min-height: 40px;
  height: auto;
  background: #fff;
  border-color: var(--settings-line);
  box-shadow: none;
  backdrop-filter: none;
}
#page-settings #set-ai.detail-mode .ai-trait:hover { transform: none; }
#page-settings #set-ai.detail-mode .ai-trait.on {
  color: var(--ds-accent-strong);
  border-color: #cbdaf7;
  background: var(--ds-accent-soft);
}
#page-settings #set-ai.detail-mode .ai-detail-foot {
  justify-content: space-between;
  margin: 0;
  padding: 20px 24px 24px;
  border-top: 1px solid var(--settings-line);
  background: transparent;
}
#page-settings #set-ai.detail-mode .tpl-save-btn {
  min-height: 44px;
  height: auto;
  border: 1px solid #20242b;
  border-radius: 11px;
  background: #20242b;
  box-shadow: none;
}
#page-settings #set-ai.detail-mode .tpl-save-btn:hover {
  border-color: #363b44;
  background: #363b44;
  transform: none;
}
@media (max-width: 760px) {
  #page-settings #set-ai.detail-mode .ai-detail-back { margin: 18px 18px 0; }
  #page-settings #set-ai.detail-mode .ai-hero { padding: 14px 18px 20px; }
  #page-settings #set-ai.detail-mode .ai-hero-row { gap: 20px; }
  #page-settings #set-ai.detail-mode .ai-hero-name { font-size: 22px; }
  #page-settings #set-ai.detail-mode .ai-detail-section { padding: 22px 18px; }
  #page-settings #set-ai.detail-mode .ai-detail-foot { align-items: stretch; flex-direction: column; padding: 18px; }
  #page-settings #set-ai.detail-mode .tpl-save-btn { width: 100%; }
}

@media (max-width: 1099px) {
  #page-settings .set-head { margin-bottom: 22px; }
  #page-settings .set-tabs { box-shadow: none; }
  #page-settings .rt-cardgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .app:has(#page-settings.on) .main-head { min-height: 70px; margin-bottom: 0; }
  .app:has(#page-settings.on) .content { padding-top: 6px; }
  #page-settings .set-section-sub { margin-bottom: 18px; }
  #page-settings .quick-rule-card,
  #page-settings #set-chats .chat-settings-card { padding: 20px 18px; }
  #page-settings .rt-cardgrid { grid-template-columns: minmax(0,1fr); }
  #page-settings .rt-gcard { min-height: 0; }
  #page-settings .templates-header-surface > .settings-content-head,
  #page-settings .ai-collection-sheet .set-ai-head > .settings-content-head { padding: 20px 18px 0; }
  #page-settings .templates-header-surface > .set-section-sub,
  #page-settings .ai-collection-sheet .set-ai-head > .set-section-sub { padding: 8px 18px 18px; }
  #page-settings .templates-sheet .tpl-groups { padding: 14px; }
  #page-settings #set-ai:not(.detail-mode) .ai-collection-sheet .ai-collection-title { padding: 0 18px 14px; }
  #page-settings .saved-rules-sheet .rules-list-head { align-items: flex-start; padding: 20px 18px; }
  #page-settings .saved-rules-sheet .rule-card { padding: 20px 18px; }
  #page-settings .quick-rule-grid { gap: 24px; }
  #page-settings .quick-rule-pane + .quick-rule-pane { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--settings-line); }
}