:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    background: #08120f;
    color: #effbf4;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(43, 197, 126, .22), transparent 30rem),
        linear-gradient(145deg, #08120f, #0d1d18 65%, #10251e);
}

.shell {
    width: min(70rem, calc(100% - 2rem));
    min-height: 100vh;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
    align-items: center;
    gap: clamp(2rem, 7vw, 7rem);
    padding: 4rem 0;
}

.mark {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: #36d990;
    color: #052016;
    font-weight: 900;
}

.eyebrow, .status {
    color: #63e6aa;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

h1 { max-width: 12ch; margin: .6rem 0 1rem; font-size: clamp(2.7rem, 7vw, 5.4rem); line-height: .96; }
.lead { max-width: 46rem; color: #b9cec4; font-size: 1.1rem; line-height: 1.7; }
.panel { padding: 2rem; border: 1px solid #254c3d; border-radius: 1.5rem; background: rgba(8, 25, 19, .82); box-shadow: 0 2rem 6rem rgba(0, 0, 0, .3); }
.panel h2 { margin-top: 0; font-size: 1.7rem; }
.capabilities { margin: 1.5rem 0 2rem; padding-left: 1.2rem; color: #c9dbd3; line-height: 1.8; }

.interaction-shell { width: min(64rem, calc(100% - 2rem)); margin: auto; padding: 4rem 0; }
.interaction-brand { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 2rem; }
.interaction-brand h1 { max-width: none; font-size: clamp(2.3rem, 6vw, 4rem); }
.interaction-brand .eyebrow { margin-top: 0; }
.interaction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.interaction-grid.single-form { grid-template-columns: minmax(0, 1fr); max-width: 38rem; }
.interaction-shell.login-only { width: min(38rem, calc(100% - 2rem)); }
.interaction-shell.login-only .interaction-grid { grid-template-columns: minmax(0, 1fr); }
.interaction-shell.login-with-registration { width: min(64rem, calc(100% - 2rem)); }
.form-panel { display: grid; gap: 1rem; align-content: start; }
.form-panel label { display: grid; gap: .45rem; color: #c9dbd3; font-weight: 700; }
.form-panel input { width: 100%; border: 1px solid #376451; border-radius: .7rem; padding: .8rem .9rem; background: #071711; color: #effbf4; font: inherit; }
.form-panel input:focus { outline: 2px solid #63e6aa; outline-offset: 2px; }
.form-panel button { border: 0; border-radius: .8rem; padding: .9rem 1rem; background: #36d990; color: #052016; font: inherit; font-weight: 900; cursor: pointer; }
.form-hint { margin: -.35rem 0 0; color: #91aa9f; line-height: 1.5; }
.notice { margin-bottom: 1.5rem; padding: 1rem 1.2rem; border: 1px solid #b37b3a; border-radius: .8rem; background: #38240f; }
.notice.error { border-color: #b45151; background: #351313; }
.profile-panel { max-width: 38rem; margin: auto; }
.profile-panel p { color: #b9cec4; line-height: 1.55; }
.profile-panel span { overflow-wrap: anywhere; color: #effbf4; }
.logout-form { margin-top: 1.5rem; }
.logout-form button { border: 1px solid #376451; border-radius: .8rem; padding: .75rem 1rem; background: transparent; color: #c9dbd3; font: inherit; cursor: pointer; }
.secondary-form { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #254c3d; }
.form-panel label.choice { display: flex; align-items: center; gap: .65rem; }
.form-panel label.choice input { width: auto; }
.email-list { padding-left: 1.2rem; color: #b9cec4; line-height: 1.7; }
.text-link { color: #63e6aa; font-weight: 700; }
.primary-link { display: inline-block; border-radius: .8rem; padding: .9rem 1rem; background: #36d990; color: #052016; font-weight: 900; text-decoration: none; }
.disabled-link { opacity: .45; cursor: not-allowed; }
.secondary-button { border: 1px solid #376451; border-radius: .8rem; padding: .75rem 1rem; background: transparent; color: #c9dbd3; font: inherit; cursor: pointer; }

@media (max-width: 760px) {
    .shell { grid-template-columns: 1fr; align-content: center; }
    .interaction-grid { grid-template-columns: 1fr; }
}