/* Shared brand palette for the public site and member experience. */
:root {
    --brand-ink: #1c2a31;
    --brand-ink-soft: #2c3d45;
    --brand-green: #148466;
    --brand-green-soft: #e8f3ef;
    --brand-blue: #326f8d;
    --brand-blue-soft: #e9f1f5;
    --brand-coral: #cf6854;
    --brand-coral-soft: #f8ece9;
    --brand-gold: #c88a3d;
    --brand-line: #dbe3e7;
}

body:not(.cashier-body) .site-header {
    border-bottom-color: #dbe3e7;
    background: rgba(255, 255, 255, .97);
}

body:not(.cashier-body) .brand-mark {
    border-radius: 7px;
    background: var(--brand-ink);
    box-shadow: inset 0 -3px var(--brand-green);
}

body:not(.cashier-body) .nav a {
    position: relative;
    color: #43535c;
    font-weight: 600;
}

body:not(.cashier-body) .nav a::after {
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    content: "";
    background: transparent;
}

body:not(.cashier-body) .nav a:hover {
    color: var(--brand-blue);
}

body:not(.cashier-body) .nav a:hover::after {
    background: var(--brand-coral);
}

body:not(.cashier-body) .header-account {
    color: var(--brand-ink-soft);
    border-color: var(--brand-line);
    background: #fff;
}

body:not(.cashier-body) .header-account:hover {
    color: var(--brand-green);
    border-color: #a8cbbb;
    background: #f8fbfa;
}

/* Public home */
.image-page {
    color: var(--brand-ink);
}

.image-page .eyebrow {
    color: var(--brand-blue);
}

.image-page .eyebrow::before {
    background: var(--brand-coral);
}

.image-hero {
    border-bottom-color: var(--brand-line);
    background-color: #eef3f6;
    background-image:
        linear-gradient(90deg, rgba(244, 248, 249, 1) 0%, rgba(244, 248, 249, .98) 34%, rgba(244, 248, 249, .7) 57%, rgba(244, 248, 249, .08) 100%),
        url("/assets/img/yunqiao-screen-editor.png");
}

.image-hero .eyebrow {
    color: var(--brand-blue);
}

.image-hero h1 {
    color: #15242b;
}

.image-hero p {
    color: #53656f;
}

.image-hero .btn.primary {
    background: var(--brand-green);
    box-shadow: 0 12px 26px rgba(20, 132, 102, .2);
}

.image-hero .btn.secondary {
    color: var(--brand-blue);
    background: var(--brand-blue-soft);
}

.image-hero .hero-stats div {
    border-color: rgba(206, 218, 224, .9);
    background: rgba(255, 255, 255, .92);
}

.image-hero .hero-stats div:nth-child(1) dt { color: var(--brand-green); }
.image-hero .hero-stats div:nth-child(2) dt { color: var(--brand-blue); }
.image-hero .hero-stats div:nth-child(3) dt { color: var(--brand-coral); }

.image-page .trust-band {
    border: 0;
    color: #d9e3e6;
    background: var(--brand-ink);
}

.image-page .trust-list span {
    position: relative;
    color: #d7e1e5;
    border-right: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px;
}

.image-page .trust-list span::before {
    position: absolute;
    top: 0;
    right: 22%;
    left: 22%;
    height: 3px;
    content: "";
    background: var(--brand-green);
}

.image-page .trust-list span:nth-child(3n + 2)::before { background: var(--brand-blue); }
.image-page .trust-list span:nth-child(3n + 3)::before { background: var(--brand-coral); }

.visual-showcase {
    padding: 54px 0 48px;
    color: #f4f7f5;
    background: #1d2d30;
}

.visual-showcase-head {
    min-height: 62px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.visual-showcase-head > div {
    max-width: 760px;
}

.visual-showcase-head span {
    display: block;
    margin-bottom: 7px;
    color: #82d2b4;
    font-size: 11px;
    font-weight: 800;
}

.visual-showcase-head strong {
    display: block;
    font-size: 25px;
    line-height: 1.32;
}

.visual-showcase-head p {
    max-width: 680px;
    margin: 9px 0 0;
    color: #aab9b8;
    font-size: 12px;
    line-height: 1.7;
}

.visual-showcase-head > a {
    flex: none;
    border-bottom: 1px solid rgba(248, 185, 101, .48);
    padding: 0 0 5px;
    color: #f8b965;
    font-size: 12px;
    font-weight: 800;
}

.visual-showcase-filters {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    margin-bottom: 19px;
    padding-bottom: 3px;
    scrollbar-width: none;
}

.visual-showcase-filters::-webkit-scrollbar {
    display: none;
}

.visual-showcase-filters button {
    min-height: 32px;
    flex: none;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 5px;
    padding: 0 12px;
    color: #b9c6c5;
    background: #26383b;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.visual-showcase-filters button:hover,
.visual-showcase-filters button.active {
    border-color: #87d1b7;
    color: #17352d;
    background: #9de0c8;
}

.visual-showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.visual-case {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 7px;
    color: #253338;
    background: #f8f6f0;
    box-shadow: 0 14px 32px rgba(3, 12, 14, .18);
    transition: border-color .2s ease, transform .2s ease;
}

.visual-case:hover {
    border-color: rgba(157, 224, 200, .58);
    transform: translateY(-3px);
}

.visual-case-media {
    position: relative;
    aspect-ratio: 16 / 10;
    display: block;
    overflow: hidden;
    background: #d9ded9;
}

.visual-case-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .28s ease;
}

.visual-case:hover .visual-case-media img {
    transform: scale(1.035);
}

.visual-case-media span {
    position: absolute;
    top: 9px;
    left: 9px;
    border-radius: 4px;
    padding: 5px 7px;
    color: #fff;
    background: rgba(21, 38, 41, .84);
    font-size: 9px;
    font-weight: 800;
}

.visual-case-body {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    padding: 14px 15px 15px;
}

.visual-case-body > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #197359;
}

.visual-case-body > div span {
    font-size: 9px;
    font-weight: 800;
}

.visual-case-body > div small {
    min-width: 0;
    overflow: hidden;
    color: #8b7770;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-case-body h3 {
    margin: 8px 0 6px;
    color: #1d2d30;
    font-size: 15px;
    line-height: 1.35;
}

.visual-case-body p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 11px;
    color: #657276;
    font-size: 10px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.visual-case-body > a {
    width: max-content;
    margin-top: auto;
    color: #b45f37;
    font-size: 10px;
    font-weight: 800;
}

.visual-showcase-more {
    display: flex;
    justify-content: center;
    padding-top: 22px;
}

.visual-showcase-more button {
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 5px;
    padding: 0 18px;
    color: #e2eae8;
    background: #2a3c3f;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.visual-showcase-more button:hover {
    border-color: #f2b46a;
    color: #f2b46a;
}

.image-page .service-section {
    background: #fff;
}

.image-page .service-item {
    border-color: var(--brand-line);
    box-shadow: 0 10px 28px rgba(28, 42, 49, .06);
}

.image-page .service-item:nth-child(1) { border-top: 3px solid var(--brand-green); }
.image-page .service-item:nth-child(2) { border-top: 3px solid var(--brand-blue); }
.image-page .service-item:nth-child(3) { border-top: 3px solid var(--brand-coral); }
.image-page .service-item:nth-child(4) { border-top: 3px solid var(--brand-gold); }

.image-page .section.muted {
    background: #f1f5f7;
}

.image-page .product-card {
    border-color: var(--brand-line);
    border-top: 3px solid #aebdc4;
    box-shadow: 0 10px 28px rgba(28, 42, 49, .06);
}

.image-page .product-card:nth-child(2) { border-top-color: var(--brand-blue); }
.image-page .product-card:nth-child(3) { border-top-color: var(--brand-green); }
.image-page .product-card:nth-child(4) { border-top-color: var(--brand-coral); }

.image-page .product-card.featured {
    border-color: rgba(20, 132, 102, .45);
    box-shadow: 0 16px 38px rgba(20, 132, 102, .12);
}

.image-page .product-price span,
.image-page .product-price strong,
.image-page .recharge-price {
    color: var(--brand-green);
}

.image-page .cycle {
    color: var(--brand-blue);
}

.image-page .tag {
    color: #88511e;
    background: #f9ead7;
}

.image-page .recharge-strip {
    border: 1px solid #cddde5;
    border-left: 5px solid var(--brand-blue);
    background: #edf4f7;
}

.image-page #software {
    background: #f8f6f3;
}

.image-page .download-link {
    border-top: 3px solid var(--brand-blue);
}

.image-page .download-link strong {
    color: var(--brand-blue);
}

.image-page .software-panel {
    border-color: #293c44;
    background: #22333a;
    box-shadow: 0 18px 44px rgba(23, 36, 42, .16);
}

.image-page .software-panel div {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .055);
}

.image-page .software-panel div:nth-child(1) { box-shadow: inset 0 3px var(--brand-green); }
.image-page .software-panel div:nth-child(2) { box-shadow: inset 0 3px var(--brand-blue); }
.image-page .software-panel div:nth-child(3) { box-shadow: inset 0 3px var(--brand-coral); }
.image-page .software-panel div:nth-child(4) { box-shadow: inset 0 3px var(--brand-gold); }

.image-page .software-panel strong {
    color: #fff;
}

.image-page .software-panel span {
    color: #bccbd1;
}

.image-page .scenario-card {
    border-color: var(--brand-line);
    box-shadow: 0 9px 26px rgba(28, 42, 49, .055);
}

.image-page .scenario-card:nth-child(1) { border-top: 4px solid var(--brand-green); }
.image-page .scenario-card:nth-child(2) { border-top: 4px solid var(--brand-blue); }
.image-page .scenario-card:nth-child(3) { border-top: 4px solid var(--brand-coral); }
.image-page .scenario-card:nth-child(4) { border-top: 4px solid var(--brand-gold); }

.image-page .scenario-card li {
    color: #455760;
    background: #f2f5f6;
}

.image-page .process-grid > div {
    border-color: var(--brand-line);
}

.image-page .process-grid > div:nth-child(1) b { color: var(--brand-green); }
.image-page .process-grid > div:nth-child(2) b { color: var(--brand-blue); }
.image-page .process-grid > div:nth-child(3) b { color: var(--brand-coral); }
.image-page .process-grid > div:nth-child(4) b { color: var(--brand-gold); }

.image-page .assurance-grid {
    border-color: #d9e1e5;
    border-left: 5px solid var(--brand-coral);
    background: #f2f5f6;
}

.image-page .assurance-list p {
    border-color: #dce3e6;
    background: #fff;
}

.image-page .cta {
    color: #fff;
    background: var(--brand-ink);
    box-shadow: inset 0 5px var(--brand-green);
}

.image-page .cta .eyebrow::before {
    background: var(--brand-coral);
}

/* Member center */
.member-center {
    background: #eff3f5;
}

.member-center-head {
    border-color: #263941;
    color: #fff;
    background: #203139;
    box-shadow: 0 16px 38px rgba(25, 40, 47, .14);
}

.member-center-head .eyebrow {
    color: #8fcfb9;
}

.member-center-head .eyebrow::before {
    background: var(--brand-coral);
}

.member-center-head h1 {
    color: #fff;
}

.member-center-head p {
    color: #bdcbd0;
}

.member-balance {
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.member-balance span,
.member-balance small {
    color: #aec0c6;
}

.member-balance strong {
    color: #f2b66d;
}

.member-actions .btn.primary {
    background: var(--brand-green);
}

.member-actions .btn.secondary {
    color: var(--brand-blue);
    background: var(--brand-blue-soft);
}

.member-metrics {
    border-color: var(--brand-line);
    box-shadow: 0 8px 22px rgba(28, 42, 49, .045);
}

.member-metrics > div:nth-child(1) { box-shadow: inset 0 3px var(--brand-green); }
.member-metrics > div:nth-child(2) { box-shadow: inset 0 3px var(--brand-blue); }
.member-metrics > div:nth-child(3) { box-shadow: inset 0 3px var(--brand-coral); }
.member-metrics > div:nth-child(4) { box-shadow: inset 0 3px var(--brand-gold); }

.member-section {
    border-color: var(--brand-line);
    box-shadow: 0 8px 22px rgba(28, 42, 49, .04);
}

.member-section-head {
    border-color: var(--brand-line);
    background: #fafbfb;
}

.member-bind-section .member-section-head {
    box-shadow: inset 4px 0 var(--brand-blue);
    background: var(--brand-blue-soft);
}

.member-password-section .member-section-head {
    box-shadow: inset 4px 0 var(--brand-coral);
    background: #faf3f1;
}

.member-section-head a {
    color: var(--brand-blue);
}

.code-list strong {
    color: var(--brand-green);
}

/* Login and registration */
.member-login-body,
.member-login-page,
.member-register-page {
    background: #edf2f5;
}

.member-login-shell,
.member-register-shell {
    border-color: #ced9de;
    box-shadow: 0 22px 56px rgba(24, 39, 47, .15);
}

.member-login-page .member-auth-visual,
.member-register-page .member-auth-visual {
    position: relative;
    background: #203139;
    box-shadow: inset 0 5px var(--brand-green);
}

.member-login-page .member-auth-visual::after,
.member-register-page .member-auth-visual::after {
    position: absolute;
    top: 5px;
    right: 0;
    width: 34%;
    height: 4px;
    content: "";
    background: var(--brand-blue);
}

.member-login-page .member-auth-visual .eyebrow,
.member-register-page .member-auth-visual .eyebrow {
    color: #8fcfb9;
}

.member-login-page .member-auth-visual .eyebrow::before,
.member-register-page .member-auth-visual .eyebrow::before {
    background: var(--brand-coral);
}

.member-login-page .member-login-intro p,
.member-register-page .member-register-intro p {
    color: #becdd2;
}

.member-register-benefits div:nth-child(1) { border-color: var(--brand-green); }
.member-register-benefits div:nth-child(2) { border-color: var(--brand-blue); }
.member-register-benefits div:nth-child(3) { border-color: var(--brand-coral); }

.member-login-form-head > div > span::before,
.member-register-form-head > div > span::before {
    background: var(--brand-coral);
}

.member-login-form-head a,
.member-register-form-head a,
.member-login-footer a {
    color: var(--brand-blue);
}

.member-login-submit,
.member-register-submit {
    background: var(--brand-green);
    box-shadow: 0 12px 26px rgba(20, 132, 102, .18);
}

body:not(.cashier-body) .site-footer {
    border-top: 5px solid var(--brand-green);
    color: #dce6e9;
    background: #19282f;
}

body:not(.cashier-body) .footer-grid p,
body:not(.cashier-body) .footer-grid span,
body:not(.cashier-body) .footer-service-row,
body:not(.cashier-body) .footer-bottom {
    color: #9fb0b8;
}

@media (max-width: 1080px) {
    .visual-showcase-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body:not(.cashier-body) .nav {
        scrollbar-width: none;
    }

    body:not(.cashier-body) .nav::-webkit-scrollbar {
        display: none;
    }

    .image-hero {
        background:
            linear-gradient(180deg, rgba(244, 248, 249, .99) 0%, rgba(244, 248, 249, .97) 58%, rgba(244, 248, 249, .9) 100%),
            url("/assets/img/yunqiao-screen-editor.png") right -330px bottom 18px / 720px auto no-repeat,
            #eef3f6;
    }

    .image-hero .hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .image-hero .hero-actions > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .image-hero .hero-actions .btn {
        min-width: 0;
        padding-right: 12px;
        padding-left: 12px;
        white-space: nowrap;
    }

    .image-hero .hero-stats div {
        padding-right: 6px;
        padding-left: 6px;
    }

    .image-hero .hero-stats dd {
        font-size: 12px;
    }

    .visual-showcase {
        padding: 34px 0 32px;
    }

    .visual-showcase-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .visual-showcase-head > a {
        margin: 0;
    }

    .visual-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .visual-case-body {
        min-height: 180px;
        padding: 12px;
    }

    .member-balance {
        padding: 18px 0 0;
        border-top: 1px solid rgba(255, 255, 255, .14);
        border-left: 0;
    }

    .member-login-page,
    .member-register-page {
        background: #edf2f4;
    }
}

@media (max-width: 520px) {
    .visual-showcase-grid {
        grid-template-columns: 1fr;
    }

    .visual-case-body {
        min-height: 166px;
    }
}

/* Surface hierarchy: color distinguishes page regions while white is reserved for focused content. */
body:not(.cashier-body) {
    background: #e8eef0;
}

.image-page {
    background: #edf2f3;
}

.image-page .service-section {
    background: #f0f5f3;
}

.image-page .service-item:nth-child(1) { background: #f7fbf9; }
.image-page .service-item:nth-child(2) { background: #f4f8fa; }
.image-page .service-item:nth-child(3) { background: #fbf6f4; }
.image-page .service-item:nth-child(4) { background: #faf7f1; }

.image-page #products {
    background: #e7eef1;
}

.image-page .product-card {
    background: #f9fbfb;
}

.image-page .product-card.featured {
    background: #fff;
}

.image-page #software {
    background: #f2eee9;
}

.image-page .download-link {
    background: #f8faf9;
}

.image-page #scenarios {
    background: #e8eff1;
}

.image-page .scenario-card:nth-child(1) { background: #f5faf8; }
.image-page .scenario-card:nth-child(2) { background: #f3f7f9; }
.image-page .scenario-card:nth-child(3) { background: #faf4f2; }
.image-page .scenario-card:nth-child(4) { background: #faf7f0; }

.image-page #process {
    background: #f4f6f4;
}

.image-page .process-grid > div:nth-child(1) { background: #f5faf8; }
.image-page .process-grid > div:nth-child(2) { background: #f3f7f9; }
.image-page .process-grid > div:nth-child(3) { background: #faf4f2; }
.image-page .process-grid > div:nth-child(4) { background: #faf7f0; }

.image-page .assurance-section {
    background: #e7edef;
}

.member-center {
    background: #e7edef;
}

.member-metrics > div:nth-child(1) { background: #f4faf7; }
.member-metrics > div:nth-child(2) { background: #f1f6f9; }
.member-metrics > div:nth-child(3) { background: #faf3f1; }
.member-metrics > div:nth-child(4) { background: #faf6ed; }

.member-section {
    background: #f8faf9;
}

.member-section .member-table th {
    background: #eaf0f2;
}

.member-section .member-table td {
    background: rgba(255, 255, 255, .56);
}

.member-two-columns .member-section:first-child {
    background: #f2f6f8;
}

.member-two-columns .member-section:last-child {
    background: #f7f3ed;
}

.member-two-columns .member-section:first-child .member-section-head {
    background: #e8f0f4;
}

.member-two-columns .member-section:last-child .member-section-head {
    background: #f2ebe1;
}

.order-page-body {
    background: #e7edef;
}

.order-page-body .page-hero {
    color: #fff;
    border-bottom: 1px solid #2d424a;
    background: #203139;
    box-shadow: inset 0 4px var(--brand-green);
}

.order-page-body .page-hero.compact {
    padding: 40px 0 36px;
}

.order-page-body .page-hero h1 {
    font-size: 42px;
}

.order-page-body .page-hero .eyebrow {
    color: #8fcfb9;
}

.order-page-body .page-hero h1 {
    color: #fff;
}

.order-page-body .page-hero p {
    color: #becdd2;
}

.order-page-body > main > .section,
.order-page-body main > .section {
    background: #e7edef;
}

.order-page-body .order-form {
    border-color: #ccd8dc;
    background: #f4f8f7;
    box-shadow: 0 16px 38px rgba(24, 42, 49, .09);
}

.order-page-body .order-summary {
    border-color: #d8d0c5;
    background: #f5f1eb;
    box-shadow: 0 16px 38px rgba(24, 42, 49, .08);
}

.order-page-body .radio-card {
    border-color: #d4dee1;
    background: #fff;
}

.order-page-body .service-card {
    border-color: #d6dfe2;
    background: #edf3f4;
}

@media (max-width: 760px) {
    .member-login-shell,
    .member-register-shell {
        background: #f6f9f8;
    }

    .order-page-body .page-hero.compact {
        padding: 32px 0 28px;
    }

    .order-page-body .page-hero h1 {
        font-size: 31px;
    }
}