:root {
    --cream: #fff8e9;
    --paper: #fffdf7;
    --navy: #16324f;
    --blue: #2375a5;
    --lavender: #795391;
    --lavender-soft: #eee4f0;
    --coral: #dc6b5b;
    --yellow: #f2bd4b;
    --green: #5c8065;
    --border: rgba(22, 50, 79, .16);
    --shadow: 0 18px 50px rgba(43, 55, 67, .13);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--navy);
    background:
        radial-gradient(circle at 90% 0%, rgba(242, 189, 75, .25), transparent 26rem),
        radial-gradient(circle at 0% 100%, rgba(35, 117, 165, .15), transparent 24rem),
        var(--cream);
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

a { color: inherit; }
button, input, select { font: inherit; }

.public-shell,
.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 14px;
}

.code-card,
.auth-card {
    position: relative;
    width: min(100%, 460px);
    padding: clamp(28px, 7vw, 48px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 28px;
    background: rgba(255, 253, 247, .92);
    box-shadow: var(--shadow);
    text-align: center;
}

.postcard-decoration {
    position: absolute;
    top: -18px;
    right: -12px;
    font-size: 72px;
    opacity: .22;
    transform: rotate(12deg);
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--coral);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
}

.code-card h1,
.auth-card h1,
.page-heading h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
}

.code-card h1 {
    font-size: clamp(43px, 13vw, 64px);
    font-style: italic;
    letter-spacing: -.055em;
}

.code-card h1 span { color: var(--lavender); }
.intro { margin: 14px auto 25px; color: #5f6c75; line-height: 1.55; }

form { margin: 0; }
label { display: block; margin: 16px 0 6px; font-size: 12px; font-weight: 900; text-align: left; }

input,
select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    outline: none;
    background: white;
    color: var(--navy);
}

select { appearance: none; background: white linear-gradient(45deg, transparent 50%, var(--navy) 50%) calc(100% - 16px) 52% / 5px 5px no-repeat; padding-right: 34px; }

input:focus { border-color: var(--lavender); box-shadow: 0 0 0 4px rgba(121, 83, 145, .12); }
.code-form input { text-align: center; font-size: 18px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border: 0;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.button.primary { background: var(--lavender); color: white; box-shadow: 0 7px 17px rgba(121, 83, 145, .22); }
.button.secondary { border: 1.5px solid var(--border); background: white; color: var(--navy); box-shadow: none; }
.button.soft { border: 0; background: var(--lavender-soft); color: #553b67; box-shadow: none; }
.button.danger { border: 1px solid #d9a19b; background: #fff3f1; color: #9c3028; box-shadow: none; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.code-form .button, .auth-card form .button { width: 100%; margin-top: 14px; }

.notice { margin: 16px 0; padding: 11px 13px; border-radius: 11px; font-size: 13px; line-height: 1.45; text-align: left; }
.notice.error { background: #fbe4e0; color: #852d28; }
.notice.success { background: #e2f0e5; color: #245b33; }
.notice.info { background: #e5f0f5; color: #24566e; }

.small-note { margin: 18px 0 0; color: #778189; font-size: 11px; line-height: 1.45; }
.small-note code { overflow-wrap: anywhere; }

@media (max-width: 420px) {
    .code-card, .auth-card { padding: 30px 20px; border-radius: 22px; }
}