:root {
    --bg: #f6f8f7;
    --surface: #ffffff;
    --surface-soft: #eef7f4;
    --text: #17231f;
    --muted: #64736e;
    --line: #dbe5e1;
    --primary: #0f766e;
    --primary-dark: #115e59;
    --accent: #f59e0b;
    --danger: #b91c1c;
    --success: #15803d;
    --shadow: 0 18px 50px rgba(15, 23, 42, .08);
    --radius: 8px;
}

.scmb-portal-page {
    min-height: 70vh;
    padding: 32px 0 64px;
    background: var(--bg);
    color: var(--text);
}

.scmb-auth-panel {
    width: min(100%, 900px);
    margin-inline: auto;
    padding: clamp(18px, 4vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.scmb-auth-panel header h1 {
    margin: 4px 0 20px;
    color: var(--text);
    font-size: clamp(1.45rem, 4vw, 2.15rem);
}

.scmb-eyebrow {
    color: var(--primary);
    font-weight: 800;
}

.scmb-auth-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 20px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.scmb-auth-tabs button {
    min-height: 42px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}

.scmb-auth-tabs button.is-active {
    background: var(--primary);
    color: #fff;
}

.scmb-form {
    display: grid;
    gap: 14px;
}

.scmb-auth-panel [hidden] {
    display: none !important;
}

.scmb-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scmb-form label {
    display: grid;
    gap: 7px;
    color: var(--text);
    font-weight: 700;
}

.scmb-form input,
.scmb-form select,
.scmb-form textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    padding: 10px 12px;
    font: inherit;
}

.scmb-form input:focus,
.scmb-form select:focus,
.scmb-form textarea:focus {
    border-color: var(--primary);
    outline: 3px solid rgba(15, 118, 110, .13);
}

.scmb-form select:disabled,
.scmb-form input[readonly] {
    background: var(--surface-soft);
    color: var(--muted);
}

.scmb-residence-fields {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.scmb-residence-fields legend {
    padding-inline: 8px;
    color: var(--primary-dark);
    font-weight: 800;
}

.scmb-residence-summary {
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--muted);
}

.scmb-btn {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.scmb-btn-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.scmb-btn-primary:hover {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
}

.scmb-btn-secondary {
    border-color: var(--line);
    background: var(--surface);
    color: var(--primary-dark);
}

.scmb-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.scmb-otp-timer {
    min-height: 24px;
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
}

.scmb-alert {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.scmb-alert-success {
    border-color: rgba(21, 128, 61, .3);
    background: rgba(21, 128, 61, .08);
    color: var(--success);
}

.scmb-alert-error {
    border-color: rgba(185, 28, 28, .3);
    background: rgba(185, 28, 28, .08);
    color: var(--danger);
}

@media (max-width: 720px) {
    .scmb-portal-page { padding: 16px 0 48px; }
    .scmb-auth-tabs,
    .scmb-form-grid { grid-template-columns: 1fr; }
}

/* Patch 1.1.7: synchronize legacy SCMB Platform pages with theme light/dark mode.
   The mu-plugin pages (/profile, /members, /user/...) use old variables:
   --bg, --surface, --surface-soft, --text, --muted, --line, --primary, ...
   The new theme uses --scmb-* variables. This bridge keeps both systems in sync.
*/
html[data-theme="light"] {
    --bg: var(--scmb-bg, #f6f8f7);
    --surface: var(--scmb-surface, #ffffff);
    --surface-soft: var(--scmb-surface-soft, #eef7f4);
    --text: var(--scmb-text, #17231f);
    --muted: var(--scmb-muted, #64736e);
    --line: var(--scmb-border, #dbe5e1);
    --primary: var(--scmb-primary, #0f766e);
    --primary-dark: var(--scmb-primary-2, #115e59);
    --accent: var(--scmb-accent, #f59e0b);
    --shadow: var(--scmb-shadow, 0 18px 50px rgba(15, 23, 42, .08));
}

html[data-theme="dark"] {
    --bg: var(--scmb-bg, #07130f);
    --surface: var(--scmb-surface, #0d1d18);
    --surface-soft: var(--scmb-surface-soft, #112820);
    --text: var(--scmb-text, #dcebe7);
    --muted: var(--scmb-muted, #9db4ad);
    --line: var(--scmb-border, #24433a);
    --primary: var(--scmb-primary, #2dd4bf);
    --primary-dark: var(--scmb-primary-2, #5eead4);
    --accent: var(--scmb-accent, #fbbf24);
    --danger: #fca5a5;
    --success: #86efac;
    --shadow: var(--scmb-shadow, 0 18px 50px rgb(0 0 0 / .30));
}

/* Apply the bridge to legacy platform containers and member/profile cards. */
html[data-theme="dark"] .scmb-portal-page,
html[data-theme="dark"] .scmb-dashboard,
html[data-theme="dark"] .scmb-public-profile,
html[data-theme="dark"] .scmb-members-header,
html[data-theme="dark"] .scmb-member-filters,
html[data-theme="dark"] .scmb-member-card,
html[data-theme="dark"] .scmb-profile-card,
html[data-theme="dark"] .scmb-dashboard-nav,
html[data-theme="dark"] .scmb-profile-rss,
html[data-theme="dark"] .scmb-dashboard-main,
html[data-theme="dark"] .scmb-auth-panel,
html[data-theme="dark"] .scmb-public-profile > header,
html[data-theme="dark"] .scmb-public-profile section {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--line);
}

html[data-theme="dark"] .scmb-member-filters,
html[data-theme="dark"] .scmb-auth-tabs,
html[data-theme="dark"] .scmb-status-grid > div,
html[data-theme="dark"] .scmb-profile-facts > div,
html[data-theme="dark"] .scmb-dashboard-nav a.is-active,
html[data-theme="dark"] .scmb-residence-summary,
html[data-theme="dark"] .scmb-form select:disabled,
html[data-theme="dark"] .scmb-form input[readonly] {
    background-color: var(--surface-soft);
}

html[data-theme="dark"] .scmb-form input,
html[data-theme="dark"] .scmb-form select,
html[data-theme="dark"] .scmb-form textarea,
html[data-theme="dark"] .scmb-member-filters input,
html[data-theme="dark"] .scmb-member-filters select,
html[data-theme="dark"] .scmb-profile-tabs button,
html[data-theme="dark"] .scmb-btn-secondary,
html[data-theme="dark"] .scmb-pagination a,
html[data-theme="dark"] .scmb-pagination span {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--line);
}

html[data-theme="dark"] .scmb-member-card h2 a,
html[data-theme="dark"] .scmb-member-card h3 a,
html[data-theme="dark"] .scmb-rss-list a,
html[data-theme="dark"] .scmb-dashboard-nav a,
html[data-theme="dark"] .scmb-auth-panel header h1,
html[data-theme="dark"] .scmb-form label {
    color: var(--text);
}

html[data-theme="dark"] .scmb-member-card span,
html[data-theme="dark"] .scmb-member-card small,
html[data-theme="dark"] .scmb-status-grid span,
html[data-theme="dark"] .scmb-profile-form small,
html[data-theme="dark"] .scmb-muted,
html[data-theme="dark"] .scmb-otp-timer,
html[data-theme="dark"] .scmb-auth-tabs button,
html[data-theme="dark"] .scmb-profile-tabs button {
    color: var(--muted);
}

html[data-theme="dark"] .scmb-auth-tabs button.is-active,
html[data-theme="dark"] .scmb-profile-tabs button.is-active,
html[data-theme="dark"] .scmb-btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #06231f;
}

html[data-theme="dark"] .scmb-private-note {
    background: rgba(251, 191, 36, .12);
    color: #fde68a;
}

html[data-theme="dark"] .scmb-profile-submit {
    background: rgba(13, 29, 24, .96);
    border-color: var(--line);
}

html[data-theme="dark"] .scmb-alert-success {
    border-color: rgba(134, 239, 172, .35);
    background: rgba(21, 128, 61, .16);
    color: var(--success);
}

html[data-theme="dark"] .scmb-alert-error {
    border-color: rgba(252, 165, 165, .35);
    background: rgba(185, 28, 28, .18);
    color: var(--danger);
}

/* Smooth theme switch on custom platform pages. */
.scmb-portal-page,
.scmb-dashboard,
.scmb-public-profile,
.scmb-member-card,
.scmb-profile-card,
.scmb-dashboard-nav,
.scmb-dashboard-main,
.scmb-auth-panel,
.scmb-form input,
.scmb-form select,
.scmb-form textarea,
.scmb-member-filters input,
.scmb-member-filters select {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}