/* ============================================================
   云顶网络 · Stripe-inspired design system (company + legacy template)
   Tokens: indigo #533afd · ink #0d253d · canvas #ffffff
   Type:   Inter (Sohne substitute) weight 300/400
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
    --c-primary: #533afd;
    --c-primary-deep: #4434d4;
    --c-primary-press: #2e2b8c;
    --c-primary-soft: #665efd;
    --c-primary-subdued: #b9b9f9;
    --c-brand-dark: #1c1e54;
    --c-ink: #0d253d;
    --c-ink-2: #273951;
    --c-ink-mute: #64748d;
    --c-ink-mute-2: #61718a;
    --c-on-primary: #ffffff;
    --c-canvas: #ffffff;
    --c-canvas-soft: #f6f9fc;
    --c-canvas-cream: #f5e9d4;
    --c-hairline: #e3e8ee;
    --c-hairline-input: #a8c3de;
    --c-ruby: #ea2261;
    --c-lemon: #9b6829;

    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 9999px;

    --sh-1: 0 1px 3px rgba(0, 55, 112, 0.08);
    --sh-2: 0 8px 24px rgba(0, 55, 112, 0.08), 0 2px 6px rgba(0, 55, 112, 0.04);

    --font-sans: 'Inter', 'SF Pro Display', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* -- Global -- */
body {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 14px;
    font-feature-settings: "ss01";
    line-height: 1.5;
    color: var(--c-ink);
    background: var(--c-canvas);
    -webkit-font-smoothing: antialiased;
}

html, body { height: 100%; }

a {
    color: var(--c-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover { color: var(--c-primary-deep); }

/* ============================================================
   LEGACY ECOMMERCE TEMPLATE (a1-a12 / list / ruzhu / xieyi)
   Token swap: teal #1d6f77 → indigo #533afd ; gold #b7791f → indigo-deep
   ============================================================ */

/* -- Top bar -- */
.header_con {
    background-color: var(--c-canvas-soft);
    height: 32px;
    border-bottom: 1px solid var(--c-hairline);
}

.header {
    width: 1200px;
    height: 32px;
    margin: 0 auto;
}

.welcome, .login_info, .login_btn, .user_link { line-height: 32px; font-size: 13px; color: var(--c-ink-mute); }
.login_info { display: none; }
.login_info em { color: var(--c-primary); }
.login_btn a, .user_link a { color: var(--c-ink-2); }
.login_btn a:hover, .user_link a:hover { color: var(--c-primary); }
.login_btn span, .user_link span { color: var(--c-hairline-input); margin: 0 10px; }

/* -- Search bar -- */
.search_bar { width: 1200px; height: 96px; margin: 0 auto; display: flex; align-items: center; }
.logo { width: 350px; margin: 0 0 0 17px; }
.logo h2 { font-size: 24px; color: var(--c-ink); font-weight: 600; letter-spacing: -0.4px; }

.search_con {
    width: 616px; height: 40px;
    border: 1px solid var(--c-primary);
    margin: 0 0 0 124px;
    background: var(--c-canvas) url(../images/icons.png) 10px -338px no-repeat;
    border-radius: var(--r-pill);
    overflow: hidden;
}

.search_con .input_text {
    width: 470px; height: 36px; border: 0;
    margin: 2px 0 0 36px; outline: none;
    font-size: 14px; font-weight: 300; color: var(--c-ink);
    font-family: var(--font-sans);
}

.search_con .input_btn {
    width: 100px; height: 40px;
    background-color: var(--c-primary);
    border: 0; font-size: 14px; font-weight: 500; color: var(--c-on-primary);
    font-family: var(--font-sans); outline: none; cursor: pointer;
}

.guest_cart { width: 200px; height: 40px; }

.guest_cart .cart_name {
    width: 158px; height: 38px; line-height: 38px;
    border: 1px solid var(--c-hairline); display: block;
    background: var(--c-canvas) url(../images/icons.png) 13px -300px no-repeat;
    font-size: 14px; color: var(--c-primary); text-indent: 56px;
    border-radius: var(--r-pill);
}

.guest_cart .goods_count {
    width: 40px; height: 40px; text-align: center; line-height: 40px;
    font-size: 16px; font-weight: 500; color: var(--c-on-primary);
    background-color: var(--c-primary);
    border-radius: 50%;
}

/* -- Navbar (legacy) -- */
.navbar_con {
    height: 48px;
    border-bottom: 1px solid var(--c-hairline);
    padding-top: 16px;
    background: var(--c-canvas);
}

.navbar { width: 1200px; margin: 0 auto; display: flex; align-items: center; }

.navbar h1 {
    width: auto; height: 40px; line-height: 40px;
    text-align: center; padding: 0 24px;
    font-size: 22px; font-weight: 600; letter-spacing: -0.4px;
    color: var(--c-on-primary);
    background-color: var(--c-primary);
    border-radius: var(--r-pill);
}

.navbar .subnav_con {
    width: 200px; height: 40px; background-color: var(--c-primary);
    position: relative; cursor: pointer; border-radius: var(--r-pill);
}

.navbar .subnav_con h1 { position: absolute; left: 0; top: 0; text-align: left; text-indent: 40px; }
.navbar .subnav_con span {
    display: block; width: 16px; height: 9px;
    background: url(../images/down.png) no-repeat;
    position: absolute; right: 27px; top: 16px;
    transition: all 300ms ease-in;
}
.navbar .subnav_con:hover span { transform: rotateZ(180deg); }
.navbar .subnav_con .subnav {
    position: absolute; left: 0; top: 40px; display: none;
    border-top: 2px solid var(--c-primary);
    border-radius: 0 0 var(--r-md) var(--r-md);
    overflow: hidden;
}
.navbar .subnav_con:hover .subnav { display: block; }

.navlist { margin-left: 24px; }
.navlist li { height: 40px; float: left; line-height: 40px; }
.navlist li a {
    color: var(--c-ink-2); font-size: 14px; padding: 6px 12px;
    border-radius: var(--r-pill); transition: all 0.2s ease;
}
.navlist li a:hover { color: var(--c-primary); background-color: var(--c-primary-subdued); }
.navlist .interval { margin: 0 8px; color: var(--c-hairline-input); }

/* -- Slide carousel -- */
.center_con { width: 1200px; height: 270px; margin: 16px auto; }
.subnav {
    width: 198px; height: 270px;
    border-left: 1px solid var(--c-hairline); border-right: 1px solid var(--c-hairline);
    background: var(--c-canvas);
}
.subnav li {
    height: 44px; border-bottom: 1px solid var(--c-hairline);
    background: url(../images/icons.png) 178px -257px no-repeat var(--c-canvas);
}
.subnav li a {
    display: block; height: 44px; line-height: 44px; text-indent: 71px;
    font-size: 14px; color: var(--c-ink-2);
}
.subnav li a:hover { color: var(--c-primary); background-color: var(--c-canvas-soft); }
.subnav li .fruit { background: url(../images/icons.png) 28px 0px no-repeat; }
.subnav li .seafood { background: url(../images/icons.png) 28px -43px no-repeat; }
.subnav li .meet { background: url(../images/icons.png) 28px -86px no-repeat; }
.subnav li .egg { background: url(../images/icons.png) 28px -132px no-repeat; }
.subnav li .vegetables { background: url(../images/icons.png) 28px -174px no-repeat; }
.subnav li .ice { background: url(../images/icons.png) 28px -220px no-repeat; }

.slide { width: 1000px; height: 270px; position: relative; overflow: hidden; border-radius: var(--r-lg); }
.slide .slide_pics { position: relative; left: 0; top: 0; width: 760px; height: 270px; }
.slide .slide_pics li { width: 760px; height: 270px; position: absolute; left: 0; top: 0; }
.slide .prev, .slide .next {
    width: 17px; height: 23px;
    background: url(../images/icons.png) left -388px no-repeat;
    position: absolute; left: 11px; top: 122px; cursor: pointer;
}
.slide .next { background-position: left -428px; left: 732px; }
.points { width: 100%; height: 11px; position: absolute; left: 0; top: 250px; text-align: center; }
.points li {
    display: inline-block; width: 11px; height: 11px; margin: 0 5px;
    background-color: var(--c-hairline-input); border-radius: 50%; cursor: pointer;
    transition: background-color 0.2s ease;
}
.points li.active { background-color: var(--c-primary); }

.adv { width: 240px; height: 270px; overflow: hidden; background-color: var(--c-canvas-cream); border-radius: var(--r-lg); }
.adv a { display: block; float: left; }

/* -- Goods list (legacy) -- */
.list_model { width: 1200px; height: 340px; margin: 24px auto 0; }
.list_title { height: 44px; border-bottom: 2px solid var(--c-primary); }
.list_title h3 {
    height: 44px; line-height: 44px;
    font-size: 18px; font-weight: 500; letter-spacing: -0.2px; color: var(--c-ink);
}
.list_title .subtitle { height: 20px; line-height: 20px; margin-top: 15px; }
.list_title .subtitle span { color: var(--c-ink-mute); margin: 0 10px 0 20px; }
.list_title .subtitle a { color: var(--c-ink-mute); margin: 0 5px; }
.list_title .subtitle a:hover, .goods_more:hover { color: var(--c-primary); }
.goods_more { height: 20px; margin-top: 15px; color: var(--c-ink-mute); }

.goods_con { height: 300px; }
.goods_banner { width: 200px; height: 300px; border-radius: var(--r-md); overflow: hidden; }
.goods_banner img { width: 200px; height: 300px; }

.goods_list {
    width: 1000px; height: 299px;
    border-bottom: 1px solid var(--c-hairline);
}
.goods_list li {
    height: 299px; width: 249px;
    border-right: 1px solid var(--c-hairline); float: left;
    transition: background-color 0.2s ease;
}
.goods_list li:hover { background-color: var(--c-canvas-soft); }
.goods_list li:hover img { opacity: 0.92; }

.goods_list li h4 { width: 200px; height: 50px; margin: 20px auto 0; text-align: center; }
.goods_list li h4 a {
    font-size: 14px; color: var(--c-ink-2); font-weight: 400; line-height: 24px;
}
.goods_list li h4 a:hover { color: var(--c-primary); }

.goods_list li img { display: block; width: 180px; height: 180px; margin: 0 auto; border-radius: var(--r-sm); }
.goods_list li .prize {
    text-align: center; font-size: 20px; font-weight: 500; color: var(--c-primary);
    margin-top: 5px; font-feature-settings: "tnum";
}

/* -- Legacy footer -- */
.footer {
    border-top: 1px solid var(--c-hairline);
    margin: 40px 0 0;
    padding: 32px 0 40px;
    background: var(--c-canvas);
}
.foot_link { text-align: center; margin-top: 24px; }
.foot_link a, .foot_link span { color: var(--c-ink-mute); font-size: 13px; }
.foot_link a:hover { color: var(--c-primary); }
.foot_link span { padding: 0 10px; color: var(--c-hairline-input); }
.footer p { text-align: center; margin-top: 10px; color: var(--c-ink-mute); font-size: 13px; line-height: 1.7; }

/* ============================================================
   COMPANY.HTML — Modern Stripe-style hero + sections
   ============================================================ */
.service_hero {
    position: relative;
    padding: 80px 0 72px;
    overflow: hidden;
    background-color: var(--c-canvas);
    background-image:
        radial-gradient(ellipse 90% 100% at 50% 0%, rgba(83, 58, 253, 0.05) 0%, transparent 60%);
    border-bottom: 1px solid var(--c-hairline);
}

.service_hero_inner {
    width: 1200px;
    max-width: calc(100% - 48px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 390px;
    gap: 40px;
    align-items: center;
}

.service_hero_text .eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background: var(--c-primary-subdued);
    color: var(--c-primary-deep);
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.service_hero_text h2 {
    font-size: 48px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.96px;
    color: var(--c-ink);
    margin-bottom: 20px;
}

.hero_desc {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--c-ink-2);
    max-width: 780px;
    margin-bottom: 28px;
}

.hero_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero_actions a,
.business_card_body a,
.service_card a,
.compliance_links a { text-decoration: none; }

.primary_btn,
.secondary_btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    transition: all 0.2s ease;
    cursor: pointer;
}

.primary_btn {
    background: var(--c-primary);
    color: var(--c-on-primary);
    border: 1px solid var(--c-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.primary_btn:hover {
    background: var(--c-primary-deep);
    color: var(--c-on-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(83, 58, 253, 0.25);
}

.secondary_btn {
    background: var(--c-canvas);
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
}

.secondary_btn:hover {
    background: var(--c-primary-subdued);
    color: var(--c-primary-deep);
}

.service_license {
    background: var(--c-canvas);
    padding: 14px;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-hairline);
    box-shadow: var(--sh-2);
}

.service_license img {
    display: block;
    width: 100%;
    border-radius: var(--r-sm);
}

/* -- Platform sections -- */
.platform_section {
    width: 1200px;
    max-width: calc(100% - 48px);
    margin: 56px auto 0;
}

.section_title { margin-bottom: 24px; }

.section_title h3 {
    font-size: 32px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.64px;
    color: var(--c-ink);
    margin-bottom: 10px;
}

.section_title p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--c-ink-mute);
    max-width: 820px;
}

/* -- Card grids -- */
.info_grid,
.business_grid,
.service_grid,
.process_grid {
    display: grid;
    gap: 20px;
}

.info_grid { grid-template-columns: repeat(3, 1fr); }
.business_grid { grid-template-columns: repeat(3, 1fr); }
.service_grid { grid-template-columns: repeat(4, 1fr); }
.process_grid { grid-template-columns: repeat(5, 1fr); }

.info_card,
.business_card,
.service_card,
.process_card {
    background: var(--c-canvas);
    border: 1px solid var(--c-hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.info_card,
.service_card,
.process_card { padding: 28px; }

.info_card:hover,
.service_card:hover,
.process_card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }

.info_card h4,
.business_card h4,
.service_card h4,
.process_card h4 {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.2px;
    color: var(--c-ink);
    margin-bottom: 14px;
}

.info_card p,
.business_card p,
.service_card p,
.process_card p,
.business_card li {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--c-ink-mute);
    margin-bottom: 8px;
}

.info_card p strong,
.business_card p strong {
    color: var(--c-ink-2);
    font-weight: 500;
}

.business_card { overflow: hidden; }
.business_card img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.business_card_body { padding: 24px; }

.business_card_body ul {
    margin: 10px 0 16px 18px;
}

.business_card_body a,
.service_card a {
    color: var(--c-primary);
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--c-primary);
    border-radius: var(--r-pill);
    transition: all 0.2s ease;
}

.business_card_body a:hover,
.service_card a:hover {
    background: var(--c-primary-subdued);
    color: var(--c-primary-deep);
}

/* -- 线下许可服务卡片（中性色调区分展示型业务）-- */
.business_card_offline .business_card_body {
    background: var(--c-canvas-soft);
    position: relative;
}

.business_card_offline .business_card_body h4::before {
    content: "展示型业务";
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--c-ink-mute);
    background: var(--c-canvas);
    border: 1px solid var(--c-hairline);
    padding: 3px 8px;
    border-radius: var(--r-pill);
    margin-bottom: 10px;
}

.offline_note {
    font-size: 13px;
    color: var(--c-ink-mute);
    font-weight: 300;
    line-height: 1.6;
    padding: 10px 12px;
    background: var(--c-canvas);
    border: 1px solid var(--c-hairline);
    border-radius: var(--r-sm);
    margin: 10px 0 14px;
}

.process_card { position: relative; padding-top: 64px; }

.process_card span {
    display: block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 14px;
    position: absolute;
    top: 24px;
    left: 28px;
}

/* -- Compliance link grid -- */
.compliance_links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.compliance_links a {
    display: block;
    background: var(--c-canvas);
    border: 1px solid var(--c-hairline);
    border-radius: var(--r-md);
    padding: 18px 16px;
    text-align: center;
    color: var(--c-ink);
    font-size: 14px;
    font-weight: 400;
    transition: all 0.2s ease;
}

.compliance_links a:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    transform: translateY(-2px);
    box-shadow: var(--sh-1);
}

/* -- Responsive for company.html -- */
@media (max-width: 900px) {
    .navbar,
    .service_hero_inner,
    .platform_section {
        width: auto;
        margin-left: 16px;
        margin-right: 16px;
    }
    .service_hero_inner,
    .info_grid,
    .business_grid,
    .service_grid,
    .process_grid {
        grid-template-columns: 1fr;
    }
    .service_hero_text h2 { font-size: 32px; letter-spacing: -0.7px; }
    .hero_desc { width: auto; }
    .navbar_con { height: auto; padding: 12px 0; overflow: hidden; }
    .navbar { flex-wrap: wrap; gap: 12px; }
    .navbar h1 { font-size: 20px; padding: 0 18px; }
    .navlist {
        float: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: 0;
        margin-top: 8px;
    }
    .navlist .interval { display: none; }
    .navlist li { float: none; height: auto; line-height: 1.4; margin-right: 0; }
    .navlist li a { white-space: nowrap; }
    .service_hero { clear: both; padding: 48px 0; }
    .hero_actions a { margin-bottom: 0; }
}

@media (max-width: 1024px) {
    .service_hero_text h2 { font-size: 40px; }
    .section_title h3 { font-size: 26px; }
}

/* ============================================================
   LEGACY: breadcrumb / sidebar / detail / cart / user-center
   Token swap only — structure preserved
   ============================================================ */

.breadcrumb { width: 1200px; height: 40px; margin: 0 auto; }
.breadcrumb a { line-height: 40px; color: var(--c-primary); }
.breadcrumb a:hover { color: var(--c-primary-deep); }
.breadcrumb span { line-height: 40px; color: var(--c-ink-mute); padding: 0 5px; }

.main_wrap { width: 1200px; margin: 0 auto; }
.l_wrap { width: 200px; }
.r_wrap { width: 980px; }

/* -- New goods recommendation -- */
.new_goods {
    border: 1px solid var(--c-hairline);
    border-top: 2px solid var(--c-primary);
    padding-bottom: 10px;
    border-radius: 0 0 var(--r-md) var(--r-md);
}

.new_goods h3 {
    height: 36px; line-height: 36px;
    background-color: var(--c-canvas-soft);
    border-bottom: 1px solid var(--c-hairline);
    font-size: 14px; font-weight: 500; color: var(--c-ink); text-indent: 12px;
}

.new_goods ul { width: 160px; margin: 0 auto; overflow: hidden; }
.new_goods li { border-bottom: 1px solid var(--c-hairline); margin-bottom: -1px; }
.new_goods li img { display: block; width: 150px; height: 150px; margin: 10px auto; border-radius: var(--r-sm); }
.new_goods li h4 { width: 160px; margin: 0 auto; }
.new_goods li h4 a {
    font-weight: 400; color: var(--c-ink-2); display: block;
    width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.new_goods li .prize {
    font-size: 14px; color: var(--c-primary); margin: 10px auto;
    font-feature-settings: "tnum"; font-weight: 500;
}

/* -- Goods type list -- */
.sort_bar { height: 36px; background-color: var(--c-canvas-soft); border-radius: var(--r-sm); }
.sort_bar a {
    display: block; height: 36px; line-height: 36px; padding: 0 20px;
    float: left; color: var(--c-ink-2); font-size: 13px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.sort_bar a:hover { color: var(--c-primary); }
.sort_bar .active { background-color: var(--c-primary); color: var(--c-on-primary); }

.goods_type_list { margin: 16px auto 0; display: flex; flex-wrap: wrap; gap: 12px; }
.goods_type_list li {
    width: 240px;
    margin-bottom: 10px;
    border: 1px solid var(--c-hairline);
    border-radius: var(--r-md);
    background: var(--c-canvas);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.goods_type_list li:hover { box-shadow: var(--sh-1); transform: translateY(-2px); }
.goods_type_list li img { width: 200px; height: 200px; display: block; margin: 12px auto; border-radius: var(--r-sm); }
.goods_type_list li h4 { width: 200px; margin: 0 auto; }
.goods_type_list li h4 a {
    font-weight: 400; color: var(--c-ink-2); display: block;
    width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.operate { width: 200px; margin: 10px auto; position: relative; }
.goods_type_list .operate .prize {
    color: var(--c-primary); font-size: 16px; font-weight: 500;
    font-feature-settings: "tnum";
}
.goods_type_list .operate .unit { color: var(--c-ink-mute); padding-left: 5px; }
.goods_type_list .operate .add_goods {
    display: inline-block; width: 15px; height: 15px;
    background: url(../images/shop_cart.png); position: absolute; right: 0; top: 3px;
}

/* -- Pagination -- */
.pagenation { height: 32px; text-align: center; font-size: 0; margin: 30px auto; }
.pagenation a {
    display: inline-block;
    border: 1px solid var(--c-hairline);
    background-color: var(--c-canvas);
    font-size: 13px; padding: 7px 12px;
    color: var(--c-ink-2); margin: 5px;
    border-radius: var(--r-sm);
    transition: all 0.2s ease;
}
.pagenation a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pagenation .active {
    background-color: var(--c-primary); color: var(--c-on-primary);
    border-color: var(--c-primary);
}

/* -- Goods detail (legacy) -- */
.goods_detail_con {
    width: auto; max-width: 1198px;
    border: 1px solid var(--c-hairline);
    margin: 0 auto 20px;
    border-radius: var(--r-lg);
    background: var(--c-canvas);
    padding: 24px;
    display: flex;
    gap: 24px;
    box-shadow: var(--sh-1);
}

.goods_detail_pic { width: 350px; flex-shrink: 0; }
.goods_detail_pic img { width: 350px; border-radius: var(--r-md); }

.goods_detail_list { flex: 1; }
.goods_detail_list h3 {
    font-size: 24px; line-height: 1.3; color: var(--c-ink);
    font-weight: 400; letter-spacing: -0.4px;
}
.goods_detail_list p { color: var(--c-ink-mute); line-height: 1.7; font-size: 14px; }

.prize_bar {
    height: 72px;
    background-color: var(--c-canvas-soft);
    line-height: 72px;
    border-radius: var(--r-md);
    margin-top: 16px;
    padding: 0 20px;
}
.prize_bar .show_pirze {
    font-size: 14px; color: var(--c-ink-mute);
    font-feature-settings: "tnum";
}
.prize_bar .show_pirze em {
    font-style: normal; font-size: 32px; color: var(--c-primary);
    font-weight: 500; padding-left: 10px; letter-spacing: -0.5px;
}
.prize_bar .show_unit { padding-left: 150px; color: var(--c-ink-mute); }

.goods_num { height: 52px; margin-top: 19px; display: flex; align-items: center; gap: 14px; }
.goods_num .num_name { color: var(--c-ink-mute); font-size: 14px; }
.goods_num .num_add {
    width: 75px; height: 40px;
    border: 1px solid var(--c-hairline-input);
    border-radius: var(--r-sm);
    display: flex; overflow: hidden;
}
.goods_num .num_add input {
    width: 49px; height: 40px; text-align: center; line-height: 40px;
    border: 0; outline: none; font-size: 14px; color: var(--c-ink);
    font-feature-settings: "tnum";
}
.goods_num .num_add .add, .goods_num .num_add .minus {
    width: 25px; line-height: 20px; text-align: center;
    border-left: 1px solid var(--c-hairline);
    border-bottom: 1px solid var(--c-hairline);
    color: var(--c-ink-mute); font-size: 14px; cursor: pointer;
}
.goods_num .num_add .minus { border-bottom: 0; }
.goods_num .num_add .add:hover, .goods_num .num_add .minus:hover { color: var(--c-primary); }

.total {
    height: 35px; line-height: 35px; margin-top: 25px;
    color: var(--c-ink-mute); font-size: 14px;
}
.total em {
    font-style: normal; color: var(--c-primary);
    font-size: 20px; font-weight: 500;
    font-feature-settings: "tnum";
}

.operate_btn { height: 44px; margin-top: 28px; font-size: 0; position: relative; display: flex; gap: 12px; }
.operate_btn .buy_btn, .operate_btn .add_cart {
    display: inline-block; width: 178px; height: 42px;
    font-size: 14px; font-weight: 500; line-height: 42px;
    text-align: center; border-radius: var(--r-pill);
    transition: all 0.2s ease; cursor: pointer;
    font-family: var(--font-sans);
}
.operate_btn .buy_btn {
    border: 1px solid var(--c-primary);
    color: var(--c-primary);
    background-color: var(--c-canvas);
}
.operate_btn .buy_btn:hover { background-color: var(--c-primary-subdued); }
.operate_btn .add_cart {
    background-color: var(--c-primary);
    color: var(--c-on-primary);
    border: 1px solid var(--c-primary);
}
.operate_btn .add_cart:hover { background-color: var(--c-primary-deep); }

.add_jump {
    width: 20px; height: 20px; background-color: var(--c-primary);
    position: absolute; left: 268px; top: 10px;
    border-radius: 50%; z-index: 9; display: none;
}

.detail_tab {
    height: 38px;
    border-bottom: 1px solid var(--c-primary);
    display: flex;
}
.detail_tab li {
    height: 37px; line-height: 37px; padding: 0 28px;
    font-size: 14px; color: var(--c-ink-2);
    border: 1px solid var(--c-hairline); border-bottom: 0;
    cursor: pointer; background-color: var(--c-canvas-soft);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    transition: background-color 0.2s ease;
}
.detail_tab li:hover { color: var(--c-primary); }
.detail_tab li.active {
    border-top: 2px solid var(--c-primary);
    position: relative; background-color: var(--c-canvas);
    border-left: 1px solid var(--c-primary);
    border-right: 1px solid var(--c-primary);
    top: -1px; height: 38px;
    color: var(--c-primary); font-weight: 500;
}

.tab_content dt { margin-top: 12px; font-size: 16px; color: var(--c-ink); font-weight: 500; }
.tab_content dd { line-height: 1.7; margin-top: 5px; color: var(--c-ink-mute); font-size: 14px; }

/* -- Login page (legacy) -- */
.login_top { width: 960px; height: 130px; margin: 0 auto; }
.login_logo { display: block; width: 193px; height: 76px; margin-top: 30px; }
.login_form_bg { height: 480px; background-color: var(--c-brand-dark); }
.no-mp { margin-top: 0; }
.login_form_wrap { width: 960px; height: 480px; margin: 0 auto; }
.login_banner { width: 381px; height: 322px; margin-top: 90px; }
.slogan {
    width: 40px; height: 300px; font-size: 30px; color: var(--c-on-primary);
    text-align: center; line-height: 36px; margin: 80px 0 0 120px;
}
.login_form {
    width: 368px; height: 378px;
    border: 1px solid var(--c-hairline);
    background-color: var(--c-canvas);
    margin-top: 50px;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
}

.login_title { height: 60px; width: 308px; margin: 10px auto; border-bottom: 1px solid var(--c-hairline); }
.login_title h1 {
    font-size: 24px; height: 60px; line-height: 60px;
    color: var(--c-ink); float: left; font-weight: 500;
    margin-left: 44px; letter-spacing: -0.4px;
}
.login_title a {
    width: 100px; height: 20px; display: block;
    font-size: 14px; color: var(--c-primary);
    text-indent: 26px;
    background: url(../images/icons02.png) left 5px no-repeat;
    float: left; margin: 20px 0 0 36px;
}

.form_input { width: 308px; height: 250px; margin: 20px auto; position: relative; }
.name_input, .pass_input {
    width: 306px; height: 40px;
    border: 1px solid var(--c-hairline-input);
    background: var(--c-canvas) url(../images/icons02.png) 280px -41px no-repeat;
    outline: none; font-size: 14px; text-indent: 12px;
    position: absolute; left: 0; top: 0;
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.name_input:focus, .pass_input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.12);
}
.pass_input { top: 65px; background-position: 280px -95px; }

.user_error, .pwd_error {
    color: var(--c-ruby); position: absolute; left: 0; top: 43px;
    display: none; font-size: 12px;
}
.pwd_error { top: 110px; }

.more_input { position: absolute; left: 0; top: 130px; width: 100%; font-size: 13px; color: var(--c-ink-mute); }
.more_input input { float: left; margin-top: 2px; }
.more_input label { float: left; margin-left: 10px; }
.more_input a { float: right; color: var(--c-ink-mute); }
.more_input a:hover { color: var(--c-primary); }

.input_submit {
    width: 100%; height: 44px; position: absolute; left: 0; top: 180px;
    background-color: var(--c-primary); color: var(--c-on-primary);
    font-size: 16px; font-weight: 500;
    border: 0; border-radius: var(--r-pill);
    font-family: var(--font-sans); cursor: pointer;
    transition: background-color 0.2s ease;
}
.input_submit:hover { background-color: var(--c-primary-deep); }

/* -- Register page (legacy) -- */
.register_con { width: 800px; height: 560px; margin: 50px auto 0; display: flex; gap: 30px; }
.l_con { width: 300px; }
.reg_logo { width: 200px; height: 76px; float: right; margin-right: 30px; }
.reg_slogan {
    width: 300px; height: 30px; float: right; text-align: right;
    font-size: 22px; color: var(--c-primary); font-weight: 300;
    margin: 20px 30px 0 0; letter-spacing: -0.4px;
}
.reg_banner {
    width: 251px; height: 329px;
    background: url(../images/register_banner.png) no-repeat;
    float: right; margin: 20px 10px 0 0; opacity: 0.5;
}

.r_con { width: 400px; }
.reg_title {
    width: 360px; height: 50px; float: left; margin-left: 30px;
    border-bottom: 1px solid var(--c-hairline);
}
.reg_title h1 {
    height: 50px; line-height: 50px; float: left;
    font-size: 22px; color: var(--c-ink); font-weight: 500; letter-spacing: -0.4px;
}
.reg_title a {
    float: right; height: 20px; line-height: 20px;
    font-size: 14px; color: var(--c-primary);
    padding-right: 20px;
    background: url(../images/icons02.png) 35px 3px no-repeat;
    margin-top: 15px;
}

.reg_form { width: 360px; margin: 30px 0 0 30px; float: left; position: relative; }
.reg_form li { height: 70px; list-style: none; }
.reg_form li label {
    width: 70px; height: 40px; line-height: 40px; float: left;
    font-size: 14px; color: var(--c-ink-mute);
}
.reg_form li input {
    width: 288px; height: 40px;
    border: 1px solid var(--c-hairline-input);
    float: left; outline: none; text-indent: 12px;
    background-color: var(--c-canvas);
    border-radius: var(--r-sm);
    font-family: var(--font-sans); font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.reg_form li input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.12);
}
.reg_form li.agreement input { width: 15px; height: 15px; float: left; margin-top: 13px; }
.reg_form li.agreement label { width: 300px; float: left; margin-left: 10px; line-height: 1.6; }
.reg_form li.reg_sub input {
    width: 360px; height: 44px;
    background-color: var(--c-primary); font-size: 16px; font-weight: 500;
    color: var(--c-on-primary); font-family: var(--font-sans); cursor: pointer;
    border-radius: var(--r-pill);
    transition: background-color 0.2s ease;
}
.reg_form li.reg_sub input:hover { background-color: var(--c-primary-deep); }
.reg_form li .error_tip {
    float: left; height: 30px; line-height: 30px;
    margin-left: 70px; color: var(--c-ruby); display: none; font-size: 12px;
}
.reg_form li .error_tip2 {
    float: left; height: 20px; line-height: 20px;
    color: var(--c-ruby); display: none; font-size: 12px;
}

/* -- Cart / order pages -- */
.sub_page_name { font-size: 22px; color: var(--c-ink); font-weight: 400; margin: 40px 0 0 20px; letter-spacing: -0.4px; }

.total_count {
    width: 1200px; margin: 0 auto;
    height: 40px; line-height: 40px; font-size: 14px; color: var(--c-ink-mute);
}
.total_count em {
    font-size: 16px; color: var(--c-primary); margin: 0 5px;
    font-feature-settings: "tnum"; font-weight: 500;
}

.cart_list_th {
    width: 1198px; border: 1px solid var(--c-hairline);
    background-color: var(--c-canvas-soft); margin: 0 auto;
    border-radius: var(--r-md) var(--r-md) 0 0;
}
.cart_list_th li { height: 40px; line-height: 40px; float: left; text-align: center; font-size: 13px; color: var(--c-ink-2); font-weight: 500; }
.cart_list_th .col01 { width: 26%; }
.cart_list_th .col02 { width: 16%; }
.cart_list_th .col03 { width: 13%; }
.cart_list_th .col04 { width: 12%; }
.cart_list_th .col05 { width: 15%; }
.cart_list_th .col06 { width: 18%; }

.cart_list_td {
    width: 1198px;
    border: 1px solid var(--c-hairline);
    background-color: var(--c-canvas);
    margin: -1px auto 0;
}
.cart_list_td li { height: 120px; line-height: 120px; float: left; text-align: center; font-size: 13px; color: var(--c-ink-2); }

.cart_list_td .col01 { width: 4%; }
.cart_list_td .col02 { width: 12%; }
.cart_list_td .col03 { width: 10%; }
.cart_list_td .col04 { width: 16%; }
.cart_list_td .col05 { width: 13%; }
.cart_list_td .col06 { width: 12%; }
.cart_list_td .col07 { width: 15%; }
.cart_list_td .col08 { width: 18%; }

.cart_list_td .col02 img {
    width: 80px; height: 80px;
    border: 1px solid var(--c-hairline);
    display: block; margin: 20px auto 0;
    border-radius: var(--r-sm);
}
.cart_list_td .col03 {
    height: 48px; text-align: left; line-height: 24px; margin-top: 38px;
    color: var(--c-ink-mute);
}
.cart_list_td .col03 em { color: var(--c-ink-mute-2); }
.cart_list_td .col08 a { color: var(--c-primary); }
.cart_list_td .col08 a:hover { color: var(--c-primary-deep); }

.cart_list_td .col06 .num_add {
    width: 98px; height: 28px;
    border: 1px solid var(--c-hairline);
    margin: 46px auto 0;
    display: flex;
}
.cart_list_td .col06 .num_add a {
    width: 29px; height: 28px; line-height: 28px;
    background-color: var(--c-canvas-soft);
    font-size: 14px; color: var(--c-ink-mute);
    transition: background-color 0.2s ease;
}
.cart_list_td .col06 .num_add a:hover { background-color: var(--c-primary-subdued); color: var(--c-primary); }
.cart_list_td .col06 .num_add input {
    width: 38px; height: 28px; text-align: center; line-height: 30px;
    border: 0; display: block; float: left; outline: none;
    border-left: 1px solid var(--c-hairline);
    border-right: 1px solid var(--c-hairline);
    font-feature-settings: "tnum";
}

.settlements {
    width: 1198px;
    border: 1px solid var(--c-hairline);
    background-color: var(--c-canvas-soft);
    margin: -1px auto 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    overflow: hidden;
}
.settlements li { line-height: 78px; float: left; }
.settlements .col01 { width: 4%; text-align: center; }
.settlements .col02 { width: 12%; }
.settlements .col03 {
    width: 69%; height: 48px; line-height: 28px;
    text-align: right; margin-top: 10px;
    color: var(--c-ink-mute);
}
.settlements .col03 span { color: var(--c-ink-mute); padding-right: 5px; }
.settlements .col03 em {
    color: var(--c-primary); font-size: 22px; font-weight: 500;
    font-feature-settings: "tnum";
}
.settlements .col03 b { color: var(--c-ink-mute); font-size: 14px; padding: 0 5px; }
.settlements .col04 { width: 14%; text-align: center; float: right; }
.settlements .col04 a {
    display: block; height: 78px;
    background-color: var(--c-primary);
    text-align: center; line-height: 78px;
    color: var(--c-on-primary); font-size: 20px; font-weight: 500;
    transition: background-color 0.2s ease;
}
.settlements .col04 a:hover { background-color: var(--c-primary-deep); }

.common_title { width: 1200px; margin: 20px auto 0; font-size: 14px; color: var(--c-ink-mute); }

.common_list_con {
    width: 1200px;
    border: 1px solid var(--c-hairline);
    border-top: 2px solid var(--c-primary);
    margin: 10px auto 0;
    background-color: var(--c-canvas-soft);
    position: relative;
    border-radius: 0 0 var(--r-md) var(--r-md);
}
.common_list_con dl { margin: 20px; }
.common_list_con dt { font-size: 14px; font-weight: 500; margin-bottom: 10px; color: var(--c-ink); }
.common_list_con dd input { vertical-align: bottom; margin-right: 10px; }
.common_list_con dd { color: var(--c-ink-mute); font-size: 14px; line-height: 1.8; }

.edit_site {
    position: absolute; right: 20px; top: 30px;
    padding: 0 18px; height: 32px; line-height: 32px;
    background-color: var(--c-primary);
    text-align: center; color: var(--c-on-primary);
    border-radius: var(--r-pill); font-size: 13px; font-weight: 500;
    cursor: pointer;
}

.pay_style_con { margin: 20px; }
.pay_style_con input { float: left; margin: 14px 7px 0 0; }
.pay_style_con label {
    float: left; border: 1px solid var(--c-hairline);
    background-color: var(--c-canvas); padding: 10px 10px 10px 40px;
    margin-right: 25px; border-radius: var(--r-sm);
}

.pay_style_con .cash { background: url(../images/pay_icons.png) 8px top no-repeat var(--c-canvas); }
.pay_style_con .weixin { background: url(../images/pay_icons.png) 6px -36px no-repeat var(--c-canvas); }
.pay_style_con .zhifubao {
    background: url(../images/pay_icons.png) 12px -72px no-repeat var(--c-canvas);
    width: 50px; height: 16px;
}
.pay_style_con .bank { background: url(../images/pay_icons.png) 6px -108px no-repeat var(--c-canvas); }

.goods_list_th { height: 40px; border-bottom: 1px solid var(--c-hairline); }
.goods_list_th li { float: left; line-height: 40px; text-align: center; font-size: 13px; color: var(--c-ink-2); font-weight: 500; }
.goods_list_th .col01 { width: 25%; }
.goods_list_th .col02 { width: 20%; }
.goods_list_th .col03 { width: 25%; }
.goods_list_th .col04 { width: 15%; }
.goods_list_th .col05 { width: 15%; }

.goods_list_td { height: 80px; border-bottom: 1px solid var(--c-hairline); }
.goods_list_td li { float: left; line-height: 80px; text-align: center; font-size: 13px; color: var(--c-ink-2); }
.goods_list_td .col01 { width: 4%; }
.goods_list_td .col02 { width: 6%; }
.goods_list_td .col03 { width: 15%; }
.goods_list_td .col04 { width: 20%; }
.goods_list_td .col05 { width: 25%; }
.goods_list_td .col06 { width: 15%; }
.goods_list_td .col07 { width: 15%; }

.goods_list_td .col02 { text-align: right; }
.goods_list_td .col02 img {
    width: 63px; height: 63px;
    border: 1px solid var(--c-hairline);
    display: block; margin: 7px 0; float: right;
    border-radius: var(--r-sm);
}
.goods_list_td .col03 { text-align: left; text-indent: 20px; }

.settle_con { margin: 10px; }
.total_goods_count, .transit, .total_pay {
    line-height: 24px; text-align: right; font-size: 14px; color: var(--c-ink-mute);
}
.total_goods_count em, .total_goods_count b, .transit b, .total_pay b {
    font-size: 14px; color: var(--c-primary); padding: 0 5px;
    font-feature-settings: "tnum"; font-weight: 500;
}

.order_submit { width: 1200px; margin: 20px auto; }
.order_submit a {
    width: 160px; height: 44px; line-height: 44px; text-align: center;
    background-color: var(--c-primary); color: var(--c-on-primary);
    font-size: 15px; font-weight: 500; display: block; float: right;
    border-radius: var(--r-pill);
    transition: background-color 0.2s ease;
}
.order_submit a:hover { background-color: var(--c-primary-deep); }

.order_list_th {
    width: 1198px; border: 1px solid var(--c-hairline);
    background-color: var(--c-canvas-soft);
    margin: 20px auto 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
}
.order_list_th li { float: left; height: 40px; line-height: 40px; font-size: 13px; color: var(--c-ink-2); font-weight: 500; }
.order_list_th .col01 { width: 20%; margin-left: 20px; }
.order_list_th .col02 { width: 20%; }

.order_list_table {
    width: 1200px;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid var(--c-hairline);
    margin: -1px auto 0;
    background: var(--c-canvas);
}
.order_list_table td {
    border: 1px solid var(--c-hairline);
    text-align: center;
    padding: 10px;
    color: var(--c-ink-2);
    font-size: 13px;
}

.order_goods_list { border-bottom: 1px solid var(--c-hairline); margin-bottom: -2px; }
.order_goods_list li { float: left; height: 80px; line-height: 80px; }
.order_goods_list .col01 { width: 20%; }
.order_goods_list .col01 img {
    width: 60px; height: 60px;
    border: 1px solid var(--c-hairline);
    margin: 10px auto;
    border-radius: var(--r-sm);
}
.order_goods_list .col02 { width: 50%; text-align: left; }
.order_goods_list .col02 em { color: var(--c-ink-mute-2); margin-left: 10px; }
.order_goods_list .col03 { width: 10%; }
.order_goods_list .col04 { width: 20%; }

.oper_btn {
    display: inline-block;
    border: 1px solid var(--c-hairline-input);
    color: var(--c-primary);
    padding: 5px 14px;
    border-radius: var(--r-pill);
    font-size: 13px; font-weight: 500;
    transition: all 0.2s ease;
}
.oper_btn:hover { background-color: var(--c-primary-subdued); border-color: var(--c-primary); }

.popup_con { display: none; }
.popup {
    width: 320px; height: 160px;
    border: 1px solid var(--c-hairline);
    border-top: 2px solid var(--c-primary);
    background-color: var(--c-canvas);
    position: fixed;
    left: 50%; margin-left: -160px;
    top: 50%; margin-top: -80px;
    z-index: 1000;
    border-radius: var(--r-md);
    box-shadow: var(--sh-2);
}
.popup p {
    height: 160px; line-height: 160px;
    text-align: center; font-size: 16px;
    color: var(--c-ink); font-weight: 400;
}

.mask {
    width: 100%; height: 100%; position: fixed;
    left: 0; top: 0;
    background-color: var(--c-brand-dark); opacity: 0.5; z-index: 999;
}

.main_con {
    width: 1200px; margin: 0 auto;
    background: url(../images/left_bg.jpg) repeat-y;
}

.left_menu_con { width: 200px; float: left; background: var(--c-canvas); }
.left_menu_con h3 {
    font-size: 16px; font-weight: 500;
    line-height: 44px;
    border-bottom: 1px solid var(--c-hairline);
    text-align: center;
    color: var(--c-ink);
    background: var(--c-canvas-soft);
}
.left_menu_con ul li {
    line-height: 44px; text-align: center; font-size: 14px;
    border-bottom: 1px solid var(--c-hairline);
}
.left_menu_con ul li a { color: var(--c-ink-2); display: block; transition: all 0.2s ease; }
.left_menu_con ul li a:hover { background-color: var(--c-canvas-soft); color: var(--c-primary); }
.left_menu_con ul li .active {
    color: var(--c-primary); font-weight: 500;
    background-color: var(--c-primary-subdued);
}

.right_content {
    width: 980px; float: right;
    min-height: 500px;
    background: var(--c-canvas);
    padding: 20px;
}

.w980 { width: 980px; }
.w978 { width: 978px; }

.common_title2 {
    height: 24px; line-height: 24px;
    font-size: 16px; font-weight: 500;
    margin: 12px 0; color: var(--c-ink);
}
.user_info_list {
    background-color: var(--c-canvas-soft);
    margin: 10px 0 15px;
    padding: 14px 0;
    height: 90px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-hairline);
}

.user_info_list li {
    line-height: 30px; text-indent: 30px; font-size: 14px; color: var(--c-ink-2);
}
.user_info_list li span {
    width: 100px; float: left; text-align: right;
    color: var(--c-ink-mute);
}

.info_con { width: 980px; }
.info_l { width: 600px; float: left; }
.info_r { width: 360px; float: right; }

.site_con {
    background-color: var(--c-canvas-soft);
    padding: 14px 0; margin-bottom: 20px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-hairline);
}

.site_con dt {
    font-size: 14px; line-height: 30px; text-indent: 30px;
    font-weight: 500; color: var(--c-ink);
}
.site_con dd {
    font-size: 14px; line-height: 30px; text-indent: 30px;
    color: var(--c-ink-mute);
}
.site_con .form_group { height: 40px; line-height: 40px; margin-top: 10px; }
.site_con .form_group label {
    width: 100px; float: left; text-align: right;
    font-size: 14px; height: 40px; line-height: 40px;
    color: var(--c-ink-mute);
}
.site_con .form_group input {
    width: 300px; height: 36px;
    border: 1px solid var(--c-hairline-input);
    float: left; outline: none;
    margin-top: 2px; text-indent: 12px;
    border-radius: var(--r-sm);
    font-family: var(--font-sans); font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site_con .form_group input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.12);
}
.site_con .form_group2 { height: 90px; }
.site_area {
    width: 280px; height: 60px;
    border: 1px solid var(--c-hairline-input);
    outline: none; padding: 10px;
    border-radius: var(--r-sm);
    font-family: var(--font-sans); font-size: 14px;
}
.info_submit {
    width: 96px; height: 36px;
    background-color: var(--c-primary);
    border: 0; color: var(--c-on-primary);
    margin: 10px 0 10px 100px;
    cursor: pointer; font-family: var(--font-sans);
    font-size: 14px; font-weight: 500;
    border-radius: var(--r-pill);
    transition: background-color 0.2s ease;
}
.info_submit:hover { background-color: var(--c-primary-deep); }

.stress { color: var(--c-ruby); }