:root {

    --corrosion-primary:
    #0a6655;

    --corrosion-primary-dark:
    #074d41;

    --corrosion-primary-soft:
    #e8f5f1;

    --corrosion-border:
    #dce5e2;

    --corrosion-text:
    #17231f;

    --corrosion-muted:
    #687873;

    --corrosion-bg:
    #f5f8f7;

}


/* =====================================================
   顶部区域
===================================================== */

.corrosion-hero {

    color:
    #ffffff;

    background:

        radial-gradient(
            circle at 78% 28%,
            rgba(75,196,164,0.20),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #073f37,
            #0a6655 58%,
            #0b7562
        );

}


.corrosion-hero-inner {

    padding:
    30px 20px 58px;

}


.corrosion-breadcrumb {

    display:
    flex;

    gap:
    9px;

    margin-bottom:
    34px;

    color:
    rgba(255,255,255,0.70);

    font-size:
    14px;

}


.corrosion-breadcrumb a {

    color:
    rgba(255,255,255,0.88);

}


.corrosion-eyebrow {

    margin-bottom:
    12px;

    color:
    #9ee0ce;

    font-size:
    13px;

    font-weight:
    700;

    letter-spacing:
    0.16em;

}


.corrosion-hero h1 {

    margin:
    0;

    font-size:
    clamp(34px,5vw,54px);

    line-height:
    1.15;

}


.corrosion-hero-copy p {

    max-width:
    720px;

    margin:
    18px 0 0;

    color:
    rgba(255,255,255,0.82);

    font-size:
    18px;

    line-height:
    1.8;

}


/* =====================================================
   主体
===================================================== */

.corrosion-main {

    padding:
    0 0 72px;

    background:
    var(--corrosion-bg);

}


/* =====================================================
   查询卡片
===================================================== */

.corrosion-search-card {

    position:
    relative;

    z-index:
    3;

    margin-top:
    -24px;

    padding:
    32px;

    border:
    1px solid rgba(10,102,85,0.12);

    border-radius:
    18px;

    background:
    #ffffff;

    box-shadow:
    0 16px 42px rgba(18,61,51,0.10);

}


.corrosion-search-heading h2 {

    margin:
    0;

    color:
    var(--corrosion-text);

    font-size:
    24px;

}


.corrosion-search-heading p {

    margin:
    8px 0 0;

    color:
    var(--corrosion-muted);

}


.corrosion-form {

    display:
    grid;

    grid-template-columns:
    minmax(0,1.35fr)
    minmax(260px,0.9fr)
    auto;

    gap:
    22px;

    align-items:
    end;

    margin-top:
    26px;

}


.corrosion-field {

    position:
    relative;

}


.corrosion-field label {

    display:
    block;

    margin-bottom:
    9px;

    color:
    #283b35;

    font-weight:
    700;

}


.corrosion-input-wrap {

    position:
    relative;

}


.corrosion-field input,
.corrosion-field select {

    width:
    100%;

    height:
    48px;

    padding:
    0 14px;

    border:
    1px solid #cbd8d4;

    border-radius:
    9px;

    outline:
    none;

    background:
    #ffffff;

    color:
    var(--corrosion-text);

    font-size:
    15px;

    transition:
    0.2s ease;

}


.corrosion-field input {

    padding-right:
    42px;

}


.corrosion-field input:focus,
.corrosion-field select:focus {

    border-color:
    var(--corrosion-primary);

    box-shadow:
    0 0 0 3px rgba(10,102,85,0.12);

}


.corrosion-field select:disabled {

    color:
    #84918d;

    background:
    #f2f5f4;

    cursor:
    not-allowed;

}


.corrosion-help {

    margin-top:
    7px;

    color:
    #7a8984;

    font-size:
    12px;

}


.corrosion-clear {

    display:
    none;

    position:
    absolute;

    top:
    50%;

    right:
    10px;

    width:
    28px;

    height:
    28px;

    border:
    0;

    border-radius:
    50%;

    background:
    #edf2f0;

    color:
    #60716b;

    font-size:
    20px;

    line-height:
    1;

    transform:
    translateY(-50%);

    cursor:
    pointer;

}


.corrosion-clear.visible {

    display:
    block;

}


/* =====================================================
   查询按钮
===================================================== */

.corrosion-query-button {

    min-width:
    154px;

    height:
    48px;

    padding:
    0 22px;

    border:
    0;

    border-radius:
    9px;

    background:
    var(--corrosion-primary);

    color:
    #ffffff;

    font-size:
    15px;

    font-weight:
    700;

    cursor:
    pointer;

    transition:
    0.2s ease;

}


.corrosion-query-button:hover:not(:disabled) {

    background:
    var(--corrosion-primary-dark);

    transform:
    translateY(-1px);

}


.corrosion-query-button:disabled {

    background:
    #aab8b4;

    cursor:
    not-allowed;

}


/* =====================================================
   介质联想结果
===================================================== */

.corrosion-suggestions {

    display:
    none;

    position:
    absolute;

    top:
    calc(100% - 19px);

    right:
    0;

    left:
    0;

    z-index:
    20;

    max-height:
    330px;

    overflow-y:
    auto;

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

    border-radius:
    10px;

    background:
    #ffffff;

    box-shadow:
    0 14px 35px rgba(21,55,47,0.16);

}


.corrosion-suggestions.visible {

    display:
    block;

}


.corrosion-suggestion {

    display:
    block;

    width:
    100%;

    padding:
    13px 15px;

    border:
    0;

    border-bottom:
    1px solid #edf1f0;

    background:
    #ffffff;

    text-align:
    left;

    cursor:
    pointer;

}


.corrosion-suggestion:last-child {

    border-bottom:
    0;

}


.corrosion-suggestion:hover {

    background:
    #f0f8f5;

}


.corrosion-suggestion-title {

    color:
    #172a24;

    font-weight:
    700;

}


.corrosion-suggestion-en {

    margin-left:
    7px;

    color:
    #6f7e79;

    font-weight:
    400;

}


.corrosion-suggestion-meta {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    6px 14px;

    margin-top:
    5px;

    color:
    #7d8a86;

    font-size:
    12px;

}


.corrosion-suggestion-empty {

    padding:
    18px;

    color:
    #72817c;

    text-align:
    center;

}


.corrosion-message {

    min-height:
    20px;

    margin-top:
    14px;

    color:
    #b43c2e;

    font-size:
    14px;

}


/* =====================================================
   查询结果
===================================================== */

.corrosion-result {

    margin-top:
    28px;

    padding:
    34px;

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

    border-radius:
    18px;

    background:
    #ffffff;

    box-shadow:
    0 10px 30px rgba(18,61,51,0.06);

}


.corrosion-result-head {

    display:
    flex;

    justify-content:
    space-between;

    gap:
    24px;

    align-items:
    flex-start;

}


.corrosion-result-kicker {

    margin-bottom:
    7px;

    color:
    var(--corrosion-primary);

    font-size:
    13px;

    font-weight:
    800;

    letter-spacing:
    0.1em;

}


.corrosion-result h2 {

    margin:
    0;

    color:
    var(--corrosion-text);

    font-size:
    28px;

}


.corrosion-result-head p {

    margin:
    9px 0 0;

    color:
    var(--corrosion-muted);

}


#corrosionBackToSearch {

    padding:
    9px 15px;

    border:
    1px solid #b9cbc5;

    border-radius:
    8px;

    background:
    #ffffff;

    color:
    var(--corrosion-primary);

    cursor:
    pointer;

}


.corrosion-result-meta {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    8px;

    margin:
    22px 0 18px;

}


.corrosion-meta-item {

    padding:
    6px 10px;

    border-radius:
    6px;

    background:
    #eef5f3;

    color:
    #48615a;

    font-size:
    13px;

}


/* =====================================================
   结果表格
===================================================== */

.corrosion-table-wrap {

    width:
    100%;

    overflow-x:
    auto;

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

    border-radius:
    12px;

    -webkit-overflow-scrolling:
    touch;

}


.corrosion-table {

    width:
    100%;

    min-width:
    680px;

    border-collapse:
    separate;

    border-spacing:
    0;

}


.corrosion-table th,
.corrosion-table td {

    padding:
    14px 12px;

    border-right:
    1px solid #e4ebe8;

    border-bottom:
    1px solid #e4ebe8;

    text-align:
    center;

    vertical-align:
    middle;

}


.corrosion-table th:last-child,
.corrosion-table td:last-child {

    border-right:
    0;

}


.corrosion-table tbody tr:last-child td {

    border-bottom:
    0;

}


.corrosion-table thead th {

    background:
    #edf6f3;

    color:
    #28483f;

    font-size:
    14px;

    white-space:
    nowrap;

}


.corrosion-table th:first-child,
.corrosion-table td:first-child {

    position:
    sticky;

    left:
    0;

    z-index:
    2;

    min-width:
    120px;

    background:
    #ffffff;

    font-weight:
    700;

    box-shadow:
    1px 0 0 #dce5e2;

}


.corrosion-table thead th:first-child {

    z-index:
    3;

    background:
    #e4f1ed;

}


/* =====================================================
   腐蚀结果标签
===================================================== */

.corrosion-badge {

    display:
    inline-flex;

    min-width:
    64px;

    min-height:
    28px;

    align-items:
    center;

    justify-content:
    center;

    padding:
    4px 9px;

    border-radius:
    15px;

    font-size:
    13px;

    font-weight:
    700;

    white-space:
    nowrap;

}


.corrosion-badge.excellent {

    color:
    #087443;

    background:
    #def5e9;

}


.corrosion-badge.good {

    color:
    #176b67;

    background:
    #def3f1;

}


.corrosion-badge.usable {

    color:
    #946000;

    background:
    #fff0c8;

}


.corrosion-badge.unsuitable {

    color:
    #a32632;

    background:
    #ffe1e4;

}


.corrosion-badge.warning {

    color:
    #a54510;

    background:
    #ffe6d5;

}


.corrosion-badge.danger {

    color:
    #8c1c31;

    background:
    #fbdde5;

}


.corrosion-badge.notice {

    color:
    #526176;

    background:
    #e9edf3;

}


.corrosion-empty-cell {

    color:
    #a4afab;

}


/* =====================================================
   结果说明
===================================================== */

.corrosion-legend {

    margin-top:
    26px;

}


.corrosion-legend h3 {

    margin:
    0 0 14px;

    color:
    var(--corrosion-text);

    font-size:
    18px;

}


.corrosion-legend-grid {

    display:
    grid;

    grid-template-columns:
    repeat(2,minmax(0,1fr));

    gap:
    10px 22px;

}


.corrosion-legend-grid > div {

    display:
    flex;

    gap:
    10px;

    align-items:
    center;

}


.corrosion-legend-grid p {

    margin:
    0;

    color:
    #64736e;

    font-size:
    13px;

    line-height:
    1.5;

}


.corrosion-disclaimer {

    margin-top:
    22px;

    padding:
    15px 17px;

    border-left:
    4px solid #d6a03b;

    background:
    #fff8e8;

    color:
    #66552e;

    font-size:
    14px;

    line-height:
    1.7;

}


/* =====================================================
   页面介绍
===================================================== */

.corrosion-intro {

    display:
    grid;

    grid-template-columns:
    1.25fr 1fr;

    gap:
    50px;

    align-items:
    center;

    margin-top:
    30px;

    padding:
    36px;

    border-radius:
    16px;

    background:
    #e8f2ef;

}


.corrosion-intro h2 {

    margin:
    0 0 12px;

    color:
    var(--corrosion-text);

}


.corrosion-intro p {

    margin:
    0;

    color:
    #5e716b;

    line-height:
    1.9;

}


.corrosion-intro-points {

    display:
    grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:
    10px;

}


.corrosion-intro-points div {

    padding:
    18px 10px;

    border-radius:
    10px;

    background:
    rgba(255,255,255,0.72);

    text-align:
    center;

}


.corrosion-intro-points strong,
.corrosion-intro-points span {

    display:
    block;

}


.corrosion-intro-points strong {

    color:
    var(--corrosion-primary);

    font-size:
    22px;

}


.corrosion-intro-points span {

    margin-top:
    5px;

    color:
    #64736e;

    font-size:
    12px;

}


/* =====================================================
   平板
===================================================== */

@media (max-width:900px) {

    .corrosion-form {

        grid-template-columns:
        1fr 1fr;

    }


    .corrosion-action {

        grid-column:
        1 / -1;

    }


    .corrosion-query-button {

        width:
        100%;

    }


    .corrosion-intro {

        grid-template-columns:
        1fr;

        gap:
        24px;

    }

}


/* =====================================================
   手机
===================================================== */

@media (max-width:640px) {

    .corrosion-hero-inner {

        padding:
        50px 16px 48px;

    }


    .corrosion-breadcrumb {

        margin-bottom:
        24px;

    }


    .corrosion-hero h1 {

        font-size:
        32px;

    }


    .corrosion-hero-copy p {

        font-size:
        16px;

    }


    .corrosion-main > .container {

        padding-right:
        12px;

        padding-left:
        12px;

    }


    .corrosion-search-card,
    .corrosion-result {

        padding:
        20px 16px;

        border-radius:
        13px;

    }


    .corrosion-form {

        grid-template-columns:
        1fr;

        gap:
        18px;

    }


    .corrosion-action {

        grid-column:
        auto;

    }


    .corrosion-result-head {

        display:
        block;

    }


    #corrosionBackToSearch {

        margin-top:
        16px;

    }


    .corrosion-result h2 {

        font-size:
        23px;

    }


    .corrosion-legend-grid {

        grid-template-columns:
        1fr;

    }


    .corrosion-intro {

        padding:
        24px 18px;

    }


    .corrosion-intro-points {

        grid-template-columns:
        1fr;

    }

}