:root {
    color-scheme: light;

    --page-background: #e7e7e4;
    --surface: #f7f7f5;
    --surface-strong: #ffffff;

    --charcoal: #232629;
    --charcoal-soft: #34383c;

    --text: #202326;
    --text-muted: #666b70;

    --border: #c7c9c7;
    --border-strong: #9fa3a3;

    --accent: #4e5a61;
    --accent-hover: #3f494f;

    --error-background: #f5dddd;
    --error-border: #b66a6a;
    --error-text: #762f2f;

    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    --radius: 10px;
    --touch-height: 48px;
}


* {
    box-sizing: border-box;
}


html {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: var(--page-background);
    color: var(--text);
}


body {
    margin: 0;
    min-height: 100vh;
    background: var(--page-background);
}


header {
    background: var(--charcoal);
    color: #ffffff;

    padding:
        18px
        22px;

    border-bottom:
        4px solid var(--charcoal-soft);
}


header h1 {
    margin: 0;

    font-size: 1.45rem;
    font-weight: 700;
}


header p {
    margin:
        5px
        0
        0;

    color: #d5d8da;

    font-size: 0.92rem;
}


main {
    width: min(
        920px,
        calc(100% - 24px)
    );

    margin:
        22px
        auto
        40px;
}


.page-intro {
    margin-bottom: 18px;

    color: var(--text-muted);

    line-height: 1.5;
}


.session-bar {
    display: flex;

    flex-wrap: wrap;

    gap:
        8px
        18px;

    margin-bottom: 18px;

    padding:
        12px
        16px;

    background: var(--charcoal-soft);
    color: #ffffff;

    border-radius: var(--radius);
}


.session-bar span {
    font-size: 0.9rem;
}


section {
    margin-bottom: 18px;

    padding:
        18px
        18px
        20px;

    background: var(--surface);

    border:
        1px
        solid
        var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}


section h2 {
    margin:
        0
        0
        16px;

    padding-bottom: 9px;

    border-bottom:
        2px
        solid
        var(--charcoal);

    font-size: 1.18rem;
}


section h3 {
    margin:
        18px
        0
        12px;

    font-size: 1.05rem;
}


section h4,
section h5 {
    margin:
        16px
        0
        10px;
}


label {
    display: block;

    margin-bottom: 6px;

    font-weight: 650;
}


input,
select,
textarea,
button {
    font: inherit;
}


input,
select,
textarea {
    width: 100%;

    min-height: var(--touch-height);

    padding:
        10px
        12px;

    background: var(--surface-strong);
    color: var(--text);

    border:
        1px
        solid
        var(--border-strong);

    border-radius: 7px;
}


input:focus,
select:focus,
textarea:focus {
    outline:
        3px
        solid
        rgba(78, 90, 97, 0.20);

    border-color: var(--accent);
}


textarea {
    min-height: 120px;

    resize: vertical;
}


section > div,
.hood > div,
.duct > div {
    margin-bottom: 14px;
}


.hood {
    margin-top: 12px;

    padding:
        16px;

    background: var(--surface-strong);

    border:
        1px
        solid
        var(--border);

    border-radius: 8px;
}


.duct {
    margin-top: 12px;

    padding:
        14px;

    background: #efefec;

    border-left:
        4px
        solid
        var(--charcoal-soft);

    border-radius: 6px;
}


.duct-rectangular-fields,
.duct-round-fields {
    margin-top: 12px;
}


span {
    color: var(--text-muted);
}


button {
    min-height: var(--touch-height);

    padding:
        10px
        18px;

    background: var(--charcoal);
    color: #ffffff;

    border: 0;

    border-radius: 7px;

    font-weight: 700;

    cursor: pointer;
}


button:hover,
button:focus-visible {
    background: var(--accent-hover);
}


button:focus-visible {
    outline:
        3px
        solid
        rgba(78, 90, 97, 0.30);
}


.error-message {
    margin-bottom: 16px;

    padding:
        12px
        14px;

    background: var(--error-background);
    color: var(--error-text);

    border:
        1px
        solid
        var(--error-border);

    border-radius: 7px;
}
.material-condition-notice {
    margin-top: 16px;

    padding:
        14px
        16px;

    background: #fff7d6;

    border:
        1px
        solid
        #d4b84a;

    border-left:
        6px
        solid
        #c9a500;

    border-radius: 7px;

    color: #5f4b00;
}


.material-condition-notice strong {
    display: block;

    margin-bottom: 8px;

    font-size: 1rem;
}


.material-condition-notice p {
    margin:
        0
        0
        10px;

    line-height: 1.45;
}


.material-condition-notice p:last-child {
    margin-bottom: 0;
}

.login-shell {
    width: min(
        460px,
        calc(100% - 28px)
    );

    margin:
        8vh
        auto
        40px;
}


.login-card {
    padding:
        24px;

    background: var(--surface);

    border:
        1px
        solid
        var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}


.login-card h1 {
    margin:
        0
        0
        6px;

    color: var(--charcoal);
}


.login-card .subtitle {
    margin:
        0
        0
        20px;

    color: var(--text-muted);
}


.login-card form > div {
    margin-bottom: 16px;
}


.login-card button {
    width: 100%;
}


.reference-note {
    margin:
        14px
        0
        0;

    color: var(--text-muted);

    font-size: 0.9rem;

    line-height: 1.45;
}


[hidden] {
    display: none !important;
}


@media (min-width: 700px) {
    section {
        padding:
            22px
            24px
            24px;
    }

    .hood {
        padding:
            18px;
    }

    input,
    select {
        max-width: 480px;
    }
}


@media (max-width: 699px) {
    main {
        width: min(
            100% - 16px,
            920px
        );

        margin-top: 12px;
    }

    header {
        padding:
            15px
            16px;
    }

    section {
        margin-bottom: 12px;

        padding:
            16px;
    }

    .session-bar {
        padding:
            10px
            12px;
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }
}