:root {
    color-scheme: light;
    --forest: #123d32;
    --forest-deep: #0b2b24;
    --paper: #f7f7f1;
    --ink: #172b26;
    --muted: #63716a;
    --line: #d9e0d9;
    --mint: #d8eee3;
    --lime: #d6ea78;
    --gold: #d8bd77;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--paper); color: var(--ink); font: 14px/1.45 "Segoe UI", Arial, sans-serif; }
button, input, select { font: inherit; }
.shell { display: grid; grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); width: 100%; height: 100vh; height: 100svh; overflow: hidden; }
.intro { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 34px clamp(28px, 5vw, 72px) 26px; overflow: hidden; background: var(--forest); color: #f4f5e9; }
.intro::after { position: absolute; right: -180px; bottom: -250px; width: 470px; height: 470px; border: 1px solid #ffffff20; border-radius: 50%; content: ""; pointer-events: none; }
.brand { position: relative; z-index: 1; display: inline-flex; align-items: center; width: fit-content; }
.brand img { display: block; width: 148px; height: 105px; object-fit: contain; }
.intro-copy { position: relative; z-index: 1; max-width: 420px; margin: auto 0; }
.eyebrow { margin: 0 0 11px; color: #cbd6bd; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; }
h1 { margin: 0; color: #fbfbf3; font: 400 43px/1.12 Georgia, "Times New Roman", serif; }
.lead { max-width: 340px; margin: 20px 0 0; color: #c4d4cc; font-size: 14px; }
.steps { display: grid; gap: 18px; margin: 34px 0 0; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: 14px; }
.steps li > span { display: grid; flex: 0 0 34px; width: 34px; aspect-ratio: 1; place-items: center; border: 1px solid #ffffff52; border-radius: 50%; color: var(--lime); font-size: 10px; }
.steps p { margin: 0; font-size: 13px; font-weight: 600; }
.steps small { display: block; margin-top: 2px; color: #afc1b7; font-size: 11px; font-weight: 400; }
.aside-footer { position: relative; z-index: 1; margin: 0; color: #c0cdc1; font-size: 9px; font-weight: 600; letter-spacing: 1.4px; }
.aside-footer span, footer span { padding: 0 5px; color: var(--gold); }
.panel { display: grid; min-width: 0; min-height: 0; place-items: center; padding: 24px clamp(24px, 5vw, 72px); overflow: hidden; }
.panel-inner { display: flex; flex-direction: column; width: min(100%, 710px); max-height: 100%; min-height: 0; }
.panel-heading { flex: 0 0 auto; }
.badge { display: inline-flex; align-items: center; min-height: 23px; padding: 4px 9px; border: 1px solid #c8d7ca; color: #35564a; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; }
.panel-heading .eyebrow { margin: 18px 0 5px; color: #74837a; }
h2 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 650; }
.muted { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.flow-content { width: min(100%, 460px); margin: 34px auto 0; }
label { display: block; margin: 0 0 5px; color: #354b43; font-size: 11px; font-weight: 650; }
input:not([type="radio"]), select { display: block; width: 100%; min-width: 0; height: 39px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: var(--ink); }
.input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.input-wrap input.with-icon, .input-wrap select.with-icon { padding-left: 34px; }
.input-wrap input.with-visibility { padding-right: 38px; }
.input-wrap .code { padding-right: 40px !important; padding-left: 40px !important; }
.input-icon { position: absolute; z-index: 1; left: 11px; display: inline-flex; align-items: center; color: #71847a; font-size: 14px; pointer-events: none; }
.visibility-toggle { position: absolute; z-index: 1; right: 3px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; background: transparent; color: #52675d; font-size: 15px; cursor: pointer; }
.visibility-toggle:hover { color: var(--forest); }
.visibility-toggle:focus-visible { outline: 2px solid #4d9275; outline-offset: -2px; }
input::placeholder { color: #98a39b; }
input:focus, select:focus { outline: 2px solid #4d9275; outline-offset: 1px; }
input[type="radio"] { accent-color: var(--forest); }
.code { height: 55px !important; padding: 12px 15px !important; font-size: 20px; letter-spacing: 3px; }
.code::placeholder { font-size: 14px; letter-spacing: 0; }
small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.primary { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 45px; margin-top: 18px; padding: 11px 15px; border: 0; border-radius: 3px; background: var(--forest); color: #fff; font-size: 12px; font-weight: 650; cursor: pointer; }
.primary:hover { background: var(--forest-deep); }
button:focus-visible { outline: 3px solid #a68542; outline-offset: 3px; }
.security-note { display: flex; gap: 12px; margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--line); }
.security-note > span { color: #527a5e; font-size: 23px; line-height: 1; }
.security-note p { margin: 0; font-size: 11px; font-weight: 650; }
.security-note small { font-weight: 400; }
.verified { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 7px 10px; background: #e6efe5; color: #285538; font-size: 11px; }
.verified strong { font-size: 9px; letter-spacing: 1px; }
.form-help { margin: 5px 0 10px; color: var(--muted); font-size: 10px; }
.progress { display: flex; gap: 20px; margin: 0 0 10px; padding: 0; list-style: none; }
.progress li { display: flex; align-items: center; gap: 6px; color: #818c84; font-size: 10px; }
.progress li > span { display: grid; width: 20px; aspect-ratio: 1; place-items: center; border: 1px solid #cbd4cc; border-radius: 50%; font-size: 9px; }
.progress li.active { color: var(--forest); font-weight: 700; }
.progress li.active > span { border-color: var(--forest); background: var(--forest); color: white; }
.registration-form { min-height: 0; }
.form-step[hidden] { display: none; }
.form-step h3 { margin: 0 0 10px; font-size: 15px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.field { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
em { color: #7d8980; font-size: 9px; font-style: normal; font-weight: 400; }
select { padding-right: 27px; }
.theme-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-field legend { margin-bottom: 5px; color: #354b43; font-size: 11px; font-weight: 650; }
.theme-options { display: flex; gap: 7px; }
.theme-option { display: flex; flex: 1; align-items: center; gap: 6px; min-height: 35px; margin: 0; padding: 6px 8px; border: 1px solid var(--line); background: white; font-size: 10px; cursor: pointer; }
.theme-option > i { color: #557365; font-size: 13px; }
.theme-option:has(input:checked) { border-color: #6c9980; background: #eff6ee; }
.step-actions { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 12px; margin-top: 13px; }
.step-actions .primary { margin: 0; }
.back { min-height: 36px; padding: 7px 8px; border: 0; background: transparent; color: #50665b; font-size: 10px; cursor: pointer; }
.back:hover { color: var(--forest-deep); text-decoration: underline; }
.cancel-form { display: flex; justify-content: center; margin-top: 4px; }
.cancel-form .back { min-height: 25px; }
.notice { margin: 14px 0; padding: 11px 13px; border: 1px solid #cbd8c9; background: #eaf0e7; font-size: 11px; }
.notice p { margin: 3px 0; }
.notice.error { border-color: #dfb7a6; background: #fff0ea; color: #8f3426; }
.notice.success { background: #e3eee5; }
footer { margin-top: auto; padding-top: 12px; color: #879188; font-size: 9px; }

@media (max-width: 760px) {
    .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 60px minmax(0, 1fr); }
    .intro { display: contents; }
    .intro::after, .intro-copy, .aside-footer { display: none; }
    .brand { grid-row: 1; width: 100%; height: 60px; padding: 5px 18px; background: var(--forest); }
    .brand img { width: 76px; height: 50px; object-position: left center; }
    .panel { grid-row: 2; padding: 16px 18px; }
    .panel-inner { width: min(100%, 560px); }
    h2 { font-size: 25px; }
    .flow-content { margin-top: 28px; }
}

@media (max-width: 420px), (max-height: 680px) {
    .shell { grid-template-rows: 50px minmax(0, 1fr); }
    .brand { height: 50px; }
    .brand img { width: 68px; height: 43px; }
    .panel { padding: 11px 14px; }
    .panel-heading .eyebrow { margin-top: 11px; }
    h2 { font-size: 22px; }
    .muted { margin-top: 4px; font-size: 11px; }
    .verified { min-height: 29px; padding: 5px 8px; }
    .form-help { margin: 3px 0 7px; }
    .progress { margin-bottom: 6px; }
    .form-step h3 { margin-bottom: 7px; }
    .form-grid { gap: 7px 9px; }
    label, .theme-field legend { margin-bottom: 3px; font-size: 10px; }
    input:not([type="radio"]), select { height: 34px; padding: 6px 8px; font-size: 12px; }
    .theme-option { min-height: 30px; padding: 4px 5px; font-size: 9px; }
    .step-actions { margin-top: 8px; }
    .step-actions .primary { min-height: 37px; padding: 8px 10px; font-size: 10px; }
    .cancel-form { margin-top: 0; }
    .cancel-form .back { min-height: 20px; }
    footer { padding-top: 5px; }
}