:root {
    color-scheme: light;
    font-family: Montserrat, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1b2030;
    background: #f4f8fa;
    --sp-primary: #0386b6;
    --sp-info: #00abe6;
    --sp-warning: #feb404;
    --sp-orange: #ef530e;
    --sp-secondary: #546373;
    --sp-border: #d9e2e7;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(320px, 38%) minmax(0, 62%);
    background: #f4f8fa;
}

.auth-showcase {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(30px, 5vw, 68px);
    color: #fff;
    background:
        linear-gradient(180deg, rgba(16, 31, 43, 0.12), rgba(16, 31, 43, 0.82)),
        url("/auth/assets/solarplus-login-bg.webp") center / cover no-repeat;
    box-shadow: -8px 0 18px rgba(0, 0, 0, 0.2) inset;
}

.showcase-logo { width: 200px; height: 60px; object-fit: contain; object-position: left center; }
.showcase-copy { max-width: 480px; }
.showcase-kicker { margin: 0 0 12px; color: #8edfff; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.showcase-copy h2 { margin: 0 0 24px; font-size: clamp(1.75rem, 3vw, 2.65rem); line-height: 1.15; letter-spacing: -0.035em; }
.showcase-copy ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding-left: 18px; font-size: 0.82rem; font-weight: 750; }
.showcase-copy li::marker { color: var(--sp-orange); }

.auth-stage {
    display: grid;
    min-width: 0;
    place-items: center;
    padding: clamp(24px, 5vw, 72px);
}

.auth-card {
    width: min(100%, 560px);
    background: #fff;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    box-shadow: 0 9px 26px rgba(27, 32, 48, 0.13);
    padding: clamp(26px, 4vw, 46px);
}

.wide-auth-view .auth-shell { grid-template-columns: minmax(0, 1fr); }
.wide-auth-view .auth-stage {
    width: 100%;
    min-height: 100vh;
    padding: clamp(24px, 4vw, 64px);
    background: #f4f8fa;
}
.wide-auth-view .auth-card { width: min(100%, 1120px); }
.compact-auth-view .auth-card { width: min(100%, 560px); }
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--sp-secondary); font-weight: 800; text-decoration: none; }
.brand img { width: 184px; height: auto; }
.brand span { padding-left: 14px; border-left: 1px solid var(--sp-border); color: var(--sp-primary); font-size: 0.92rem; letter-spacing: 0.05em; text-transform: uppercase; }
h1 { margin: 32px 0 8px; color: #1b2030; font-size: clamp(1.65rem, 4vw, 2.15rem); letter-spacing: -0.035em; }
h2 { color: #1b2030; }
.lede { margin: 0 0 26px; color: var(--sp-secondary); line-height: 1.55; }
form { display: grid; gap: 18px; }
label { display: grid; gap: 7px; color: #384554; font-size: 0.88rem; font-weight: 700; }
input, select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #c8d3da;
    border-radius: 4px;
    padding: 10px 13px;
    background: #fff;
    color: #1b2030;
}
input:focus, select:focus { outline: 3px solid rgba(0, 171, 230, 0.17); border-color: var(--sp-info); }
button, .button {
    border: 0;
    border-radius: 4px;
    min-height: 44px;
    padding: 10px 16px;
    background: var(--sp-info);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 132, 181, 0.2);
}
button:hover, .button:hover { background: var(--sp-primary); }
button:disabled { opacity: 0.55; cursor: wait; }
.button.secondary, button.secondary { background: #edf2f5; color: #3d4c59; box-shadow: none; }
button.danger { border: 1px solid #e7b9b9; background: #fff; color: #b42323; box-shadow: none; }
button.danger:hover { background: #fff0f0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form-link { margin: 16px 0 0; text-align: right; }
.form-link a { color: var(--sp-primary); font-weight: 700; }
.auth-options { display: grid; gap: 12px; justify-items: center; margin-top: 18px; color: var(--sp-secondary); font-size: 0.84rem; text-align: center; }
.auth-options p { margin: 0; line-height: 1.5; }
.text-button { min-height: 0; padding: 2px; background: transparent; color: var(--sp-primary); box-shadow: none; }
.text-button:hover { background: transparent; color: var(--sp-orange); }
.message { padding: 12px 14px; border-left: 4px solid var(--sp-info); border-radius: 4px; margin: 0 0 18px; background: #eef8fc; color: #245165; }
.message.error { border-left-color: #d32f2f; background: #fff0f0; color: #a52d2d; }
.qr { display: block; width: 240px; max-width: 100%; margin: 18px auto; border: 10px solid #fff; }
.backup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 16px; border: 1px solid var(--sp-border); border-radius: 4px; background: #f6f8fa; font-family: ui-monospace, monospace; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.user-list { display: grid; gap: 10px; margin: 24px 0; }
.user-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 14px; align-items: center; border: 1px solid var(--sp-border); border-radius: 6px; padding: 14px; }
.user-row strong, .user-row small { display: block; overflow-wrap: anywhere; }
.user-row small { color: var(--sp-secondary); margin-top: 4px; }
.user-actions { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto; gap: 8px; }
.user-actions button { min-height: 46px; }
.divider { border: 0; border-top: 1px solid var(--sp-border); margin: 28px 0; }
.auth-footer { margin: 32px 0 0; padding-top: 18px; border-top: 1px solid #e8eef1; color: #76828b; font-size: 0.74rem; text-align: center; }
code { overflow-wrap: anywhere; }

@media (max-width: 1000px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-showcase { display: none; }
    .auth-stage {
        min-height: 100vh;
        background:
            linear-gradient(rgba(244, 248, 250, 0.88), rgba(244, 248, 250, 0.96)),
            url("/auth/assets/solarplus-login-bg.webp") center / cover no-repeat;
    }
}

@media (max-width: 700px) {
    .auth-stage { place-items: start center; padding: 14px; }
    .auth-card { padding: 24px 19px; border-radius: 6px; }
    .brand img { width: 150px; }
    .user-row { grid-template-columns: 1fr; }
    .user-actions { grid-template-columns: 1fr; }
    .backup { grid-template-columns: 1fr; }
    .admin-head { align-items: flex-start; flex-direction: column-reverse; }
}