:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1f3047;
    background: #f3f6fa;
}

* { box-sizing: border-box; }
body { margin: 0; background: #f3f6fa; }
button, input { font: inherit; }

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px clamp(20px, 4vw, 56px);
    border-bottom: 3px solid #d9a527;
    background: #24384f;
    color: #fff;
}
.settings-header h1, .settings-header p { margin: 0; }
.settings-header h1 { margin: 3px 0; font-size: 25px; }
.eyebrow { color: #f0c95b; font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.settings-header nav { display: flex; align-items: center; gap: 12px; }
.settings-header a, .settings-header button {
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.settings-shell { display: grid; gap: 18px; width: min(880px, calc(100% - 32px)); margin: 28px auto; }
.settings-status { min-height: 22px; color: #52657b; }
.settings-status.success { color: #176a45; }
.settings-status.error { color: #a12828; }
.settings-card { padding: 22px; border: 1px solid #ced8e4; border-radius: 10px; background: #fff; box-shadow: 0 4px 14px rgba(31,48,71,.06); }
.card-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.card-heading h2, .card-heading p { margin: 0; }
.card-heading p { margin-top: 5px; color: #61738a; line-height: 1.45; }
.primary { min-height: 38px; padding: 8px 15px; border: 1px solid #2867b2; border-radius: 6px; background: #3277c9; color: #fff; font-weight: 750; cursor: pointer; }
.selected-vendors { display: flex; flex-wrap: wrap; gap: 7px; min-height: 42px; margin-bottom: 15px; padding: 8px; border: 1px solid #d8e0e9; border-radius: 6px; background: #f8fafc; }
.empty-vendors { align-self: center; color: #68798d; }
.vendor-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px 5px 10px; border-radius: 999px; background: #e9f0fb; color: #234f87; font-weight: 750; }
.vendor-chip button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #d4e1f4; color: #234f87; cursor: pointer; }
.vendor-search-label, .password-form label { display: grid; gap: 5px; color: #40546c; font-size: 12px; font-weight: 750; }
#vendor-search, .password-form input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #b9c6d5; border-radius: 6px; color: #1f3047; }
.vendor-results { display: grid; max-height: 250px; margin-top: 6px; overflow: auto; border-radius: 6px; }
.vendor-option { display: grid; grid-template-columns: minmax(90px, .35fr) minmax(0, 1fr); gap: 12px; padding: 9px 10px; border: 0; border-bottom: 1px solid #e1e7ee; background: #fff; color: #2b4059; text-align: left; cursor: pointer; }
.vendor-option:hover { background: #f0f5fb; }
.vendor-option:disabled { opacity: .48; cursor: default; }
.vendor-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-results { margin: 8px; color: #6c7c8e; }
.password-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.password-form button { min-height: 40px; }
.settings-note { color: #8b5a19; }

@media (max-width: 720px) {
    .settings-header, .card-heading { align-items: stretch; flex-direction: column; }
    .password-form { grid-template-columns: 1fr; }
}