:root {
    --bg      : #FAF7F3;
    --card    : #FFFFFF;
    --ink     : #1F1F1F;
    --muted   : #6B6B6B;
    --brand   : #0F172A;
    --accent  : #111827;
    --ring    : rgba(15, 23, 42, .2);
    --border  : #E8E3DC;
    --success : #10B981;
}

* {
    box-sizing : border-box
}

html, body {
    height : 100%
}

body {
    margin     : 0;
    color      : var(--ink);
    background : var(--bg);
    font       : 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* Layout */
.container {
    max-width : 960px;
    margin    : 0 auto;
    padding   : 0 20px
}

.hero {
    padding : 48px 0 48px;
}

.title {
    margin      : 0 0 6px;
    color       : var(--accent);
    font-size   : clamp(28px, 4vw, 40px);
    font-weight : 800;
    line-height : 1.15;
}

.subtitle {
    margin : 0;
    color  : var(--muted)
}

.card {
    padding       : 24px;
    border        : 1px solid var(--border);
    border-radius : 16px;
    background    : var(--card);
    box-shadow    : 0 6px 24px rgba(15, 23, 42, .06);
}

/* Form */
.form-grid {
    display : block
}

.form-row {
    margin-bottom : 16px
}

.label {
    display     : block;
    margin      : 0 0 6px;
    color       : var(--accent);
    font-weight : 600;
}

.required {
    margin-left : 4px;
    color       : var(--success);
}

.form-field .help {
    margin    : 6px 0 0;
    color     : var(--muted);
    font-size : 12px;
}

.errors {
    margin    : 6px 0 0;
    padding   : 0 0 0 16px;
    color     : #B91C1C;
    font-size : 13px;
}

.input, textarea, select {
    display       : block;
    width         : 100%;
    padding       : 12px 14px;
    color         : var(--ink);
    border        : 1px solid var(--border);
    border-radius : 12px;
    outline       : none;
    background    : #FFFFFF;
    transition    : border-color .2s, box-shadow .2s;
}

.input:focus, textarea:focus, select:focus {
    border-color : var(--brand);
    box-shadow   : 0 0 0 4px var(--ring);
}

textarea {
    min-height : 96px;
    resize     : vertical
}

/* Grid helpers */
.grid-2 {
    display               : grid;
    grid-template-columns :1fr 1fr;
    gap                   : 16px
}

@media (max-width : 760px) {
    .grid-2 {
        grid-template-columns :1fr
    }
}

/* Buttons */
.btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    padding         : 12px 18px;
    color           : var(--btn-ink);
    border          : 1px solid var(--btn-bd);
    border-radius   : 999px;
    background      : var(--btn-bg);
    font-weight     : 600;
    text-decoration : none;
    cursor          : pointer;
    transition      : transform .02s ease, box-shadow .2s;
    --btn-bg        : #111111;
    --btn-ink       : #FFFFFF;
    --btn-bd        : transparent;
    gap             : 8px;
}

.btn:active {
    transform : translateY(1px)
}

.btn-primary {
    --btn-bg  : var(--brand);
    --btn-ink : #FFFFFF
}

.btn-ghost {
    --btn-bg  : transparent;
    --btn-ink : var(--brand);
    --btn-bd  : var(--border)
}

.btn:hover {
    box-shadow : 0 8px 28px rgba(15, 23, 42, .15)
}

.actions {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
    margin-top      : 12px;
    gap             : 12px;
}

/* Toggle simple */
.form-row input[type="checkbox"] {
    appearance     : none;
    width          : 44px;
    height         : 26px;
    border         : 1px solid var(--border);
    border-radius  : 25px;
    position       : relative;
    background     : #FFFFFF;
    cursor         : pointer;
    vertical-align : middle;
}

.form-row input[type="checkbox"]::after {
    content       : '';
    position      : absolute;
    top           : 3px;
    left          : 2px;
    width         : 18px;
    height        : 18px;
    border-radius : 50%;
    background    : var(--border);
    transition    : all .2s;
}

.form-row input[type="checkbox"]:checked {
    background   : var(--brand);
    border-color : var(--brand);
}

.form-row input[type="checkbox"]:checked::after {
    left       : calc(100% - 20px);
    background : #FFFFFF;
}