:root {
    color-scheme: light;
    --bg: rgb(244, 247, 250);
    --surface: rgb(255, 255, 255);
    --surface-2: rgb(248, 250, 252);
    --line: rgb(226, 232, 240);
    --line-strong: rgb(203, 213, 225);
    --text: rgb(23, 32, 51);
    --muted: rgb(100, 116, 139);
    --accent: rgb(194, 65, 12);
    --accent-hover: rgb(234, 88, 12);
    --accent-soft: rgba(194, 65, 12, 0.1);
    --danger-soft: rgba(220, 38, 38, 0.08);
    --success-soft: rgba(22, 163, 74, 0.1);
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: rgb(12, 12, 14);
    --surface: rgb(21, 21, 24);
    --surface-2: rgb(28, 28, 32);
    --line: rgb(38, 38, 43);
    --line-strong: rgb(54, 54, 61);
    --text: rgb(243, 243, 245);
    --muted: rgb(142, 142, 152);
    --accent: rgb(234, 88, 12);
    --accent-hover: rgb(249, 115, 22);
    --accent-soft: rgba(234, 88, 12, 0.16);
    --danger-soft: rgba(240, 82, 82, 0.14);
    --success-soft: rgba(34, 197, 94, 0.14);
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 0%, rgba(186, 230, 253, .55) 0%, transparent 38rem),
        linear-gradient(180deg, rgb(250,252,254), var(--bg));
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
}
:root[data-theme="dark"] body {
    background: radial-gradient(circle at 50% 0%, rgb(30, 24, 51) 0%, var(--bg) 55%);
}

.card {
    width: min(440px, 100%);
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}
.card-wide { width: min(980px, 100%); }

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.qviarq-brand-logo { width:148px; display:grid; flex:0 0 auto; line-height:0; }
.qviarq-brand-logo-lockup { width:190px; }
.qviarq-brand-logo img { grid-area:1 / 1; display:block; width:100%; height:auto; }
.qviarq-logo-white { display:none !important; }
:root[data-theme="dark"] .qviarq-brand-logo-adaptive .qviarq-logo-color { display:none; }
:root[data-theme="dark"] .qviarq-brand-logo-adaptive .qviarq-logo-white,
.qviarq-brand-logo-white .qviarq-logo-white { display:block !important; }
.auth-tagline { color: var(--muted); font-size: 12.5px; }
h1 { margin: 0 0 6px; font-size: 20px; }
p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.auth-eyebrow {
    display: block; margin-bottom: 7px; color: var(--accent); font-size: 11px;
    font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
}
.field { display: grid; gap: 6px; margin-bottom: 14px; }
label { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    transition: border-color .12s ease, box-shadow .12s ease;
}

input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

button,
a.button {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .12s ease;
}

button:hover { background: var(--accent-hover); }
a.button,
.button-secondary { border-color: var(--line-strong); background: var(--surface-2); color: var(--text); }
a.button:hover,
.button-secondary:hover { background: var(--line-strong); }
.auth-submit-full { width: 100%; }
.actions { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.auth-actions-spaced { margin-top: 18px; justify-content: flex-start; }
.auth-forgot { margin: -6px 0 14px; }
.auth-forgot a { color: var(--accent); font-size: 13px; }
.auth-change-product { margin: 18px 0 0; }
.auth-change-product a { color: var(--accent); font-size: 13px; font-weight: 600; }
.error,
.status,
.notice { margin-bottom: 16px; padding: 11px 14px; border: 1px solid; border-radius: 8px; font-size: 13.5px; }
.error { border-color: rgba(220, 38, 38, 0.24); background: var(--danger-soft); color: rgb(185, 28, 28); }
.status { border-color: rgba(22, 163, 74, 0.28); background: var(--success-soft); color: rgb(21, 128, 61); }
.notice { border-color: rgba(2, 132, 199, .24); background: rgba(2, 132, 199, .08); color: rgb(3, 105, 161); }
:root[data-theme="dark"] .error { border-color: rgba(240,82,82,.35); color: rgb(254,202,202); }
:root[data-theme="dark"] .status { border-color: rgba(34,197,94,.35); color: rgb(187,247,208); }
:root[data-theme="dark"] .notice { border-color: rgba(56,189,248,.32); background: rgba(56,189,248,.1); color: rgb(186,230,253); }

.product-selector-heading { max-width: 660px; margin-bottom: 22px; }
.product-selector-heading h1 { font-size: clamp(24px, 3vw, 34px); }
.product-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.product-option {
    --product-accent: rgb(194, 65, 12);
    position: relative; min-height: 270px; display: flex; flex-direction: column; gap: 18px;
    padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2);
    color: var(--text); text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.product-option-blue { --product-accent: rgb(2, 132, 199); }
.product-option-slate { --product-accent: rgb(71, 85, 105); }
:root[data-theme="dark"] .product-option-slate { --product-accent: rgb(148, 163, 184); }
.product-option:hover {
    transform: translateY(-3px); border-color: var(--product-accent);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .1);
}
.product-option-disabled { cursor: default; opacity: .72; }
.product-option-disabled:hover { transform: none; border-color: var(--line); box-shadow: none; }
.product-option-mark {
    width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
    background: color-mix(in srgb, var(--product-accent) 13%, transparent);
    color: var(--product-accent); font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.product-option-status {
    position: absolute; top: 22px; right: 22px; padding: 5px 9px; border-radius: 999px;
    background: color-mix(in srgb, var(--product-accent) 12%, var(--surface)); color: var(--product-accent);
    font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.product-option-copy { display: grid; gap: 8px; }
.product-option-copy strong { font-size: 20px; }
.product-option-copy > span:last-child { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.product-option-eyebrow {
    color: var(--product-accent) !important; font-size: 10px !important; font-weight: 750;
    letter-spacing: .06em; text-transform: uppercase;
}
.product-option-action {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto;
    color: var(--product-accent); font-size: 12px; font-weight: 750;
}
.product-option-action > span { font-size: 18px; line-height: 1; }
.product-option-action-muted { color: var(--muted); font-weight: 600; }
.product-selector-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px;
}
.auth-product-blue { --accent: rgb(2, 132, 199); --accent-hover: rgb(3, 105, 161); --accent-soft: rgba(2, 132, 199, .12); }
.auth-product-slate { --accent: rgb(71, 85, 105); --accent-hover: rgb(51, 65, 85); --accent-soft: rgba(71, 85, 105, .12); }
:root[data-theme="dark"] .auth-product-blue { --accent: rgb(56, 189, 248); --accent-hover: rgb(14, 165, 233); }
:root[data-theme="dark"] .auth-product-slate { --accent: rgb(148, 163, 184); --accent-hover: rgb(203, 213, 225); }

@media (max-width: 520px) {
    body { padding: 16px; }
    .card { padding: 22px; }
    .actions > * { flex: 1 1 auto; }
    .product-selector-footer { align-items: stretch; flex-direction: column; }
    .product-selector-footer .button { width: 100%; }
    .qviarq-brand-logo { width:132px; }
    .qviarq-brand-logo-lockup { width:168px; }
}

@media (max-width: 780px) {
    .product-options { grid-template-columns: 1fr; }
    .product-option { min-height: 0; }
}