/* =====================================================================================================
   Settings → General / Notifications / Security (Pages/Components/Settings/PortalSettingsEditor.razor).
   st- classes on top of the hx- kit; colors from the .hd-page tokens (light/dark, theme accent).
   ===================================================================================================== */
.hd-page .st { gap: 16px; padding-bottom: 8px; }
.hd-page .st .hx-card { gap: 16px; }

.hd-page .st-head { display: flex; align-items: flex-start; gap: 12px; }
.hd-page .st-head > div { flex: 1; min-width: 0; }
.hd-page .st-head h3 { font-size: 16px; }
.hd-page .st-head p { margin-top: 2px; }
.hd-page .st-icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; color: var(--hub-accent); background: color-mix(in srgb, var(--hub-accent) 12%, transparent); border: 1px solid var(--hd-line-strong); box-shadow: 0 0 16px color-mix(in srgb, var(--hub-accent) 14%, transparent); }
.hd-page .st-icon.warn { color: var(--hd-warn); background: color-mix(in srgb, var(--hd-warn) 12%, transparent); border-color: color-mix(in srgb, var(--hd-warn) 45%, transparent); box-shadow: none; }

.hd-page .st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px 16px; }
.hd-page .st-span { grid-column: 1 / -1; }
.hd-page .st-sub { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 1px solid var(--hd-card-line); }
.hd-page .st-sub h4 { margin: 0; font-size: 14px; font-weight: 600; }
.hd-page .st-sub h4 em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--hd-muted); margin-left: 6px; }
.hd-page .st-inline { display: flex; align-items: center; gap: 8px; }
.hd-page .st-inline .hx-input { flex: 1; }
.hd-page .st-unit { font-family: var(--mono); font-size: 11px; color: var(--hd-faint); }
.hd-page .st-note { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--hd-muted); }
.hd-page .st-note i { color: var(--hub-accent); margin-top: 2px; }
.hd-page .st-danger-card { border-color: color-mix(in srgb, var(--hd-warn) 55%, transparent) !important; box-shadow: 0 0 26px color-mix(in srgb, var(--hd-warn) 14%, transparent); }

/* Toggle tiles */
.hd-page .st-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.hd-page .st-toggles.compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.hd-page .st-toggle {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; cursor: pointer; text-align: left;
    border: 1px solid var(--hd-card-line); background: rgba(var(--hd-fg-rgb), 0.02); color: var(--hd-text); font: inherit;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.hd-page .st-toggle > i { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 16px; color: var(--hd-muted); background: rgba(var(--hd-fg-rgb), 0.05); }
.hd-page .st-toggle > span:not(.hx-track) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hd-page .st-toggle strong { font-size: 14px; font-weight: 600; }
.hd-page .st-toggle small { font-size: 12px; color: var(--hd-muted); }
.hd-page .st-toggle:hover { border-color: var(--hd-line-strong); }
.hd-page .st-toggle:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 2px; }
.hd-page .st-toggle.on { border-color: color-mix(in srgb, var(--hub-accent) 55%, transparent); background: color-mix(in srgb, var(--hub-accent) 8%, transparent); }
.hd-page .st-toggle.on > i { color: var(--hub-accent); background: color-mix(in srgb, var(--hub-accent) 14%, transparent); }
.hd-page .st-toggle .hx-track { flex: 0 0 auto; }
.hd-page .st-toggle.on .hx-track { background: var(--hub-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--hub-accent) 40%, transparent); }
.hd-page .st-toggle.on .hx-track::after { transform: translateX(18px); background: #fff; }

/* Test email / password try-out */
.hd-page .st-test, .hd-page .st-try { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding-top: 14px; border-top: 1px solid var(--hd-card-line); }
.hd-page .st-test .hx-field, .hd-page .st-try .hx-field { flex: 1 1 260px; }
.hd-page .st-try .hx-tag { margin-bottom: 10px; white-space: normal; }

/* Password strength badge */
.hd-page .st-strength { --tone: var(--hd-muted); font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: var(--tone); border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.hd-page .st-strength.s2, .hd-page .st-strength.s3 { --tone: var(--hd-warn); }
.hd-page .st-strength.s4, .hd-page .st-strength.s5 { --tone: var(--hd-ok); }

/* Sticky save bar */
.hd-page .st-savebar {
    position: sticky; bottom: 12px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--hd-line); background: color-mix(in srgb, var(--hd-panel-solid) 92%, transparent);
}
.hd-page .st-savebar.dirty { border-style: solid; border-color: var(--hub-accent); box-shadow: 0 0 26px color-mix(in srgb, var(--hub-accent) 20%, transparent); }
.hd-page .st-savebar-actions { display: flex; gap: 8px; }
.hd-page .st-pulse { color: var(--hd-warn); font-size: 22px; vertical-align: middle; animation: st-pulse 1.4s ease-in-out infinite; }
@keyframes st-pulse { 50% { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) { .hd-page .st-pulse { animation: none; } }

/* Import the host's SMTP configuration */
.hd-page .st-import { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--hd-line); font-size: 13px; color: var(--hd-muted); }
.hd-page .st-import i { color: var(--hub-accent); margin-right: 4px; }

/* =====================================================================================================
   Settings → API keys (ApiKeySettings.razor): ak- classes
   ===================================================================================================== */
.hd-page .ak code { font-family: var(--mono); font-size: 12px; padding: 2px 8px; border-radius: 6px; background: rgba(var(--hd-sunk-rgb), 0.6); border: 1px solid var(--hd-card-line); color: var(--hd-text); word-break: break-all; }
.hd-page .ak-conn.warn { border-color: color-mix(in srgb, var(--hd-warn) 50%, transparent); }
.hd-page .ak-conn-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.hd-page .ak-conn-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.hd-page .ak-conn-key small { width: 100%; font-size: 12px; color: var(--hd-muted); }
.hd-page .ak-conn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hd-page .ak-role { --tone: var(--hub-accent); font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: var(--tone); border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.hd-page .ak-role.r1 { --tone: var(--hub-accent-2); }
.hd-page .ak-role.r3 { --tone: var(--hd-muted); }
.hd-page .ak-list { display: flex; flex-direction: column; gap: 10px; }
.hd-page .ak-key { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 14px; border-radius: 14px; border: 1px solid var(--hd-card-line); background: rgba(var(--hd-fg-rgb), 0.02); transition: border-color 0.15s; }
.hd-page .ak-key:hover { border-color: var(--hd-line-strong); }
.hd-page .ak-key.caller { border-color: color-mix(in srgb, var(--hd-ok) 50%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--hd-ok) 12%, transparent); }
.hd-page .ak-key.off { opacity: 0.6; }
.hd-page .ak-key-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hd-page .ak-key-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hd-page .ak-key-top strong { font-size: 15px; overflow-wrap: anywhere; }
.hd-page .ak-key-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--hd-muted); }
.hd-page .ak-key-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.hd-page .ak-confirm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 13px; color: var(--hd-warn-ink); border: 1px solid color-mix(in srgb, var(--hd-warn) 45%, transparent); background: color-mix(in srgb, var(--hd-warn) 9%, transparent); }
.hd-page .ak-confirm span { flex: 1 1 260px; }
.hd-page .ak-secret { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px dashed var(--hub-accent); background: color-mix(in srgb, var(--hub-accent) 6%, transparent); }
.hd-page .ak-secret code { flex: 1; font-size: 13px; }
.hd-page .ak-roles { display: grid; gap: 8px; }
.hd-page .ak-role-pick { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hd-card-line); background: rgba(var(--hd-fg-rgb), 0.02); color: var(--hd-text); text-align: left; cursor: pointer; font: inherit; }
.hd-page .ak-role-pick small { font-size: 12px; color: var(--hd-muted); }
.hd-page .ak-role-pick.on { border-color: var(--hub-accent); background: color-mix(in srgb, var(--hub-accent) 10%, transparent); }
.hd-page .ak-role-pick:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 760px) { .hd-page .ak-key { grid-template-columns: minmax(0, 1fr); } .hd-page .ak-key-actions { justify-content: flex-start; } }