/* ── Settings polish: shared visual language for all /settings pages ──
   Pairs with <x-page-hero>. Gives every settings card an icon-tile intro,
   soft gradient panels, and a consistent save-button treatment. */

.settings-intro {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 1.25rem;
}
.settings-intro-ico {
    width: 44px; height: 44px; border-radius: 13px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.settings-intro-ico--amber { color: #b45309; background: rgba(245,158,11,.14); }
.settings-intro-ico--blue { color: #0065da; background: #eaf2ff; }
.settings-intro-ico--violet { color: #4f46e5; background: rgba(79,70,229,.12); }
.settings-intro-ico--teal { color: #0e7490; background: rgba(14,116,144,.12); }
.settings-intro-ico--rose { color: #be123c; background: rgba(244,63,94,.12); }
.settings-intro-ico--slate { color: #334155; background: #f1f5f9; }
.settings-intro h5 { font-weight: 700; color: #0f172a; }
.settings-intro p { color: #64748b; }

.settings-panel {
    background: #f8fafc; border: 1px solid #e8eef5;
    border-radius: 14px; padding: 16px; height: 100%;
}
/* Opt out of the equal-height stretch: use when a panel sits alone in its
   column above more content. Without this, height:100% resolves against the
   stretched flex column and the panel balloons to the full column height. */
.settings-panel--auto { height: auto; }
.settings-panel--amber { background: linear-gradient(180deg, #fffbeb, #f8fafc); border-color: #fde68a; }
.settings-panel--blue { background: linear-gradient(180deg, #eff6ff, #f8fafc); border-color: #bfdbfe; }
.settings-panel--violet { background: linear-gradient(180deg, #eef2ff, #f8fafc); border-color: #e0e7ff; }
.settings-panel--teal { background: linear-gradient(180deg, #ecfeff, #f8fafc); border-color: #a5f3fc; }
.settings-panel--rose { background: linear-gradient(180deg, #fff1f2, #f8fafc); border-color: #fecdd3; }

.settings-panel .form-label { font-weight: 600; color: #0f172a; }
.settings-panel .form-control, .settings-panel .form-select { border-radius: 10px; }
.settings-panel .form-control:focus, .settings-panel .form-select:focus {
    border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

.settings-info {
    border-radius: 12px; border: 1px solid #bae6fd;
    background: linear-gradient(180deg, #f0f9ff, #fff);
}
.settings-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.settings-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: #475569; }
.settings-steps .step-n {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}
.settings-steps--blue .step-n { background: linear-gradient(135deg, #2563eb, #06b6d4); }
.settings-steps--violet .step-n { background: linear-gradient(135deg, #4f46e5, #9333ea); }
.settings-steps--teal .step-n { background: linear-gradient(135deg, #0e7490, #22d3ee); }

.settings-save {
    font-weight: 700; border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,101,218,.35);
    transition: transform .12s ease;
}
.settings-save:hover { transform: translateY(-1px); }

.email-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 999px;
    padding: 5px 6px 5px 11px; font-size: .8rem; color: #0f172a;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.email-chip .email-chip-x {
    width: 20px; height: 20px; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: #64748b; font-size: .75rem; line-height: 1;
}
.email-chip .email-chip-x:hover { background: #fee2e2; color: #b91c1c; }
.email-chip--invalid { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }