.qr-page main {
    width: min(1320px, calc(100% - 40px));
    padding-top: 3rem;
}

.qr-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: end;
    margin-bottom: 3rem;
}

.qr-intro h1 {
    max-width: 940px;
    margin-bottom: 1rem;
    font-size: clamp(3.1rem, 6.6vw, 6.2rem);
}

.qr-summary {
    max-width: 700px;
    margin: 0;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1.55;
}

.qr-privacy {
    padding: 1.35rem 0 0 1.5rem;
    border-left: 3px solid var(--green);
}

.qr-privacy p {
    margin: .5rem 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.qr-maker {
    display: grid;
    grid-template-columns: minmax(360px, .85fr) minmax(440px, 1.15fr);
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--panel);
    box-shadow: 0 28px 80px rgba(23, 33, 30, .09);
    overflow: clip;
}

.qr-controls {
    min-width: 0;
    padding: clamp(1.4rem, 3vw, 2.5rem);
}

.control-title h2,
.qr-preview-panel h2 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    letter-spacing: -.03em;
}

.control-title p,
.qr-preview-panel > div:first-child p {
    margin: .55rem 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.type-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
    margin: 1.5rem 0;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: var(--paper);
}

.type-picker label {
    position: relative;
    display: block;
    min-width: 0;
}

.type-picker input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.type-picker span {
    min-height: 42px;
    display: grid;
    place-items: center;
    padding: .55rem .5rem;
    border-radius: .55rem;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 800;
    cursor: pointer;
}

.type-picker input:checked + span {
    color: #eef5f0;
    background: var(--green);
}

.type-picker input:focus-visible + span {
    outline: 3px solid rgba(23, 107, 85, .3);
    outline-offset: 2px;
}

#qr-form { display: grid; gap: 1.2rem; }

.content-fields {
    display: grid;
    gap: .5rem;
}

.email-fields,
.wifi-fields {
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
}

.email-fields > div,
.wifi-fields > div {
    display: grid;
    gap: .5rem;
}

.wide-field { grid-column: 1 / -1; }

#qr-form textarea,
#qr-form select {
    width: 100%;
    min-height: 48px;
    padding: .72rem .8rem;
    border: 1px solid #9da9a4;
    border-radius: .55rem;
    color: var(--ink);
    background: #fefefc;
    font: inherit;
}

#qr-form textarea {
    min-height: 112px;
    resize: vertical;
    line-height: 1.5;
}

#qr-form input:focus,
#qr-form textarea:focus,
#qr-form select:focus {
    outline: 3px solid rgba(23, 107, 85, .28);
    outline-offset: 2px;
}

.field-help {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
}

.password-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .55rem;
}

.checkbox-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .65rem;
}

.checkbox-row input {
    width: 1.1rem;
    min-height: 1.1rem;
}

.qr-style {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem;
    margin: 0;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
}

.qr-style legend {
    padding: 0 .35rem;
    font-weight: 850;
}

.qr-style > div { display: grid; gap: .5rem; }

.color-field input {
    width: 100%;
    min-height: 48px;
    padding: .3rem;
    border: 1px solid #9da9a4;
    border-radius: .55rem;
    cursor: pointer;
}

.qr-status {
    min-height: 1.5rem;
    margin-top: 1rem;
    color: var(--green-dark);
    font-size: .88rem;
    line-height: 1.5;
}

.qr-status.error { color: #942f2f; }

.qr-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .5rem;
}

.qr-preview-panel {
    min-width: 0;
    padding: clamp(1.4rem, 4vw, 3rem);
    background:
        radial-gradient(circle at 88% 8%, rgba(216, 240, 103, .34), transparent 18rem),
        #dfe4df;
}

.qr-canvas-wrap {
    display: grid;
    place-items: center;
    margin-top: 1.6rem;
    padding: clamp(1rem, 4vw, 2rem);
    border-radius: .85rem;
    background: #26322e;
}

#qr-canvas {
    display: block;
    width: min(100%, 560px);
    height: auto;
    border-radius: .35rem;
    box-shadow: 0 18px 55px rgba(7, 20, 16, .3);
}

.qr-description {
    margin: 1rem 0 0;
    color: #485550;
    font-size: .9rem;
    line-height: 1.5;
}

.qr-guidance {
    display: grid;
    grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
    gap: clamp(2rem, 8vw, 8rem);
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--line);
}

.qr-guidance h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.qr-guidance > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.qr-guidance p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.qr-guidance strong {
    display: block;
    margin-bottom: .45rem;
    color: var(--ink);
}

@media (max-width: 960px) {
    .qr-intro { grid-template-columns: 1fr; gap: 1.5rem; }
    .qr-privacy { max-width: 650px; }
    .qr-maker { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .qr-page main { width: min(100% - 20px, 1320px); padding-top: 2rem; }
    .qr-intro h1 { font-size: clamp(2.65rem, 13vw, 4.2rem); }
    .type-picker { grid-template-columns: repeat(2, 1fr); }
    .email-fields, .wifi-fields, .qr-style { grid-template-columns: 1fr; }
    .wide-field { grid-column: auto; }
    .qr-actions { align-items: flex-start; flex-direction: column; }
    .qr-guidance { grid-template-columns: 1fr; }
    .qr-guidance > div { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
    .qr-page {
        --ink: #e8eee9;
        --muted: #a9b7b1;
        --paper: #111816;
        --panel: #18231f;
        --line: #34443e;
        --green: #77c8a7;
        --green-dark: #9bd8bd;
        background:
            radial-gradient(circle at 90% 6%, rgba(155, 188, 71, .13), transparent 24rem),
            var(--paper);
    }

    .type-picker input:checked + span { color: #102019; }
    #qr-form textarea,
    #qr-form select { border-color: #60716a; color: var(--ink); background: #111a17; }
    .qr-preview-panel {
        background:
            radial-gradient(circle at 88% 8%, rgba(155, 188, 71, .14), transparent 18rem),
            #222e2a;
    }
    .qr-description { color: #b9c7c0; }
    .qr-status.error { color: #ffaaa3; }
}