/* feature-specific styles for settings (see styles/features.css for shared pieces) */
.settings-page .settings-body { min-width: 0; animation: page-in var(--t-base) var(--ease-out) both; }
.settings-page .mt-3 { margin-top: var(--sp-3); }
.settings-page .big { font-size: var(--fs-lg); }
.settings-page .danger-text { color: var(--danger); }
.settings-page .mono { font-family: var(--font-mono); }
.settings-nav a { transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.settings-nav a:hover { transform: translateX(2px); }
[dir="rtl"] .settings-nav a:hover { transform: translateX(-2px); }

/* section header inside each page */
.settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.settings-head h2 { font-size: var(--fs-lg); }
.settings-head .sub { color: var(--text-3); font-size: var(--fs-sm); margin-top: 2px; max-width: 70ch; }
.settings-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.settings-ico svg { width: 21px; height: 21px; }

.copy-code { cursor: pointer; border: 1px dashed var(--border); transition: all var(--t-fast); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.copy-code:hover { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand); }
.code-block { font-family: var(--font-mono); font-size: 11.5px; direction: ltr; text-align: start; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0; }
.saved-flash { animation: flash-ok .9s var(--ease-out); }
@keyframes flash-ok { 0% { box-shadow: 0 0 0 0 var(--success); } 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 35%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.form-grid.one { grid-template-columns: 1fr; }

/* profile */
.profile-top { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

/* notifications */
.pref-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); transition: border-color var(--t-fast); }
.pref-row:hover { border-color: var(--brand); }
.pref-ico { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-3); color: var(--text-3); flex: none; }
.pref-ico svg { width: 17px; height: 17px; }

/* channels */
.channel-card { transition: transform var(--t-fast), box-shadow var(--t-fast); flex-wrap: wrap; }
.channel-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ch-ico { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; color: var(--on-solid); background: linear-gradient(135deg, var(--brand), var(--blue-700)); }
.ch-ico.whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); }
.ch-ico.email { background: linear-gradient(135deg, var(--blue-500), var(--indigo-600)); }

/* users / permissions */
.perm-grid { align-items: stretch; }
.perm-grid .h { align-self: center; }
.perm-grid .select { height: 32px; font-size: var(--fs-xs); width: 100%; }

/* org chart */
.org-tree { display: flex; flex-direction: column; gap: 4px; }
.org-node { transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.org-node:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.org-branch > .org-children { animation: page-in var(--t-base) var(--ease-out) both; }

/* stages */
.stage-row { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; background: var(--surface); }
.stage-row + .stage-row { margin-top: 4px; }
.stage-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.stage-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: var(--surface-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.stage-chip svg { width: 16px; height: 16px; }

/* services / form / options editors */
.svc-row, .field-row, .opt-row, .rule-row { display: grid; align-items: center; gap: 8px; }
.svc-row { grid-template-columns: 40px 150px 1fr 1fr 150px 32px 32px 32px; }
.field-row { grid-template-columns: 190px 150px 170px auto 1fr 32px; }
.opt-row { grid-template-columns: 1fr 1fr 1fr 32px; }
.opt-row.head { font-size: var(--fs-xs); color: var(--text-4); font-weight: 600; padding-inline: 4px; }
.rule-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.svc-ico { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.svc-ico svg { width: 18px; height: 18px; }
.inline-title { height: 32px; font-size: var(--fs-sm); max-width: 220px; }
@media (max-width: 1100px) { .svc-row, .field-row { grid-template-columns: 1fr 1fr; } }

/* templates */
.tpl-card { cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.tpl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tpl-body { font-size: var(--fs-sm); color: var(--text-3); white-space: pre-wrap; }
.clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* import / export */
.io-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: inherit; transition: all var(--t-fast); }
.io-row:hover { border-color: var(--brand); background: var(--surface-hover); }
.io-ico { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-3); color: var(--text-3); flex: none; }
.io-ico svg { width: 18px; height: 18px; }

/* audit */
.audit-diff summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--brand-ink); }
.audit-diff summary svg { width: 15px; height: 15px; }
.audit-diff[open] { display: block; min-width: 320px; }
.audit-diff pre { margin-top: 6px; max-width: 380px; }

/* integrations */
.int-card .kv { grid-template-columns: 130px 1fr; }
.int-card.span-2 { grid-column: span 2; }
@media (max-width: 900px) { .int-card.span-2 { grid-column: auto; } }

/* ---- AI providers ---- */
.ai-banner { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-xl); border: 1px solid var(--border); background: linear-gradient(135deg, var(--surface-2), var(--surface)); flex-wrap: wrap; }
.ai-banner.on { border-color: var(--ai); background: linear-gradient(135deg, var(--ai-soft), var(--surface)); }
.ai-banner.off { border-color: var(--warning); background: linear-gradient(135deg, var(--warning-soft), var(--surface)); }
.ai-orb { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--on-solid); flex: none; background: linear-gradient(135deg, var(--ai), var(--blue-600)); box-shadow: 0 6px 18px -8px var(--ai); }
.ai-banner.on .ai-orb { animation: orb-pulse 3s ease-in-out infinite; }
.ai-banner.off .ai-orb { background: linear-gradient(135deg, var(--amber-500), var(--amber-700)); }
@keyframes orb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.provider-grid { align-items: start; }
.provider.off { opacity: .68; }
.provider:hover { box-shadow: var(--shadow-md); }
.provider .logo { box-shadow: var(--shadow-sm); }
.prio-box { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: var(--r-sm); background: var(--surface-2); }
.rung { transition: background var(--t-fast); }
.rung:hover { background: var(--surface-3); }
.rung .st { flex: none; }
.rung.ok .st { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); }
.rung.active-m .st { animation: orb-pulse 2s ease-in-out infinite; }
.btn.probing svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) { .settings-page .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .settings-page .grid-2, .settings-page .grid-3 { grid-template-columns: 1fr; } }

/* ---------- AI providers: readable on/off, plain-language order, key entry ---------- */
.onoff { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); cursor: pointer; user-select: none; white-space: nowrap; transition: all var(--t-fast); }
.onoff span:first-child { font-weight: 700; color: var(--text-3); }
.onoff.is-on { border-color: var(--brand); background: var(--brand-soft); }
.onoff.is-on span:first-child { color: var(--brand-ink); }
[dir="rtl"] .onoff { padding: 5px 12px 5px 10px; }

.order-pill { padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-weight: 700; }
/* .btn-xs moved to components.css (shared, 28px — the smallest step of the 28/34/40 control scale). */

.keyrow { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-lg); border: 1px dashed var(--border-strong); background: var(--surface-2); }
.keyrow code { font-family: var(--font-mono); font-size: .82em; background: var(--surface-3); padding: 2px 7px; border-radius: var(--r-xs); }

.how-list { margin: 8px 0 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); color: var(--text-2); }
.how-list li::marker { font-weight: 800; color: var(--ai); }

.rung .st-txt { color: var(--text-3); }
.rung.ok .st-txt { color: var(--success); font-weight: 700; }
.rung.fail .st-txt, .rung.auth .st-txt, .rung.not_found .st-txt { color: var(--danger); }
.rung.quota .st-txt { color: var(--warning); }

.avail summary { cursor: pointer; color: var(--text-3); padding: 4px 0; }
.avail summary:hover { color: var(--brand); }
.avail .badge { cursor: pointer; } .avail .badge:hover { filter: brightness(1.08); }