:root {
    --zib-primary: #004dea;
    --zib-blue: #004dea;
    --zib-cyan: #18c7d5;
    --zib-green: #35c987;
    --zib-yellow: #ffb84d;
    --zib-red: #ff5f6d;
    --zib-text: #2f3640;
    --zib-muted: #7a8190;
    --zib-line: rgba(40, 46, 60, .08);
    --zib-bg: #f6f7fb;
    --zib-card: rgba(255, 255, 255, .92);
    --zib-shadow: 0 12px 34px rgba(33, 40, 66, .08);
    --zib-radius: 8px;
}

@font-face {
    font-family: "HBD";
    src: url("../fonts/hbd.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--zib-text);
    background:
        radial-gradient(circle at 14% 8%, rgba(0, 77, 234, .08), transparent 28%),
        radial-gradient(circle at 86% 4%, rgba(0, 77, 234, .1), transparent 26%),
        linear-gradient(180deg, #fbfcff 0%, var(--zib-bg) 42%, #f2f4f8 100%);
    font-family: "HBD", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
}

button {
    font: inherit;
}

.page-wrap {
    min-height: 100vh;
    padding-top: 64px;
    overflow-x: hidden;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    border-bottom: 1px solid rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .76);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 28px rgba(31, 38, 62, .05);
}

.nav-shell {
    width: min(1200px, calc(100% - 32px));
    height: 62px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 132px;
    font-weight: 800;
    color: #202736;
}

.brand-mark {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(145deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 10px 24px rgba(0, 77, 234, .25);
}

.brand-name {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name strong {
    font-size: 18px;
    letter-spacing: 0;
}

.brand-name span {
    margin-top: 2px;
    color: var(--zib-muted);
    font-size: 12px;
    font-weight: 500;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
}

.nav-item {
    position: relative;
}

.main-nav>a,
.nav-item>a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 50px;
    color: #414958;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    box-shadow: none;
    white-space: nowrap;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}

.main-nav>a>i,
.nav-item>a>i {
    width: 15px;
    text-align: center;
    color: #8d95a5;
    font-size: 14px;
    transition: color .25s ease, transform .25s ease;
}

.nav-caret {
    width: auto !important;
    margin-left: -2px;
    font-size: 12px !important;
}

.main-nav>a:hover,
.main-nav>a.active,
.main-nav>a:focus,
.nav-item:hover>a,
.nav-item>a.active,
.nav-item>a:focus {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .08);
}

.main-nav>a:focus-visible,
.nav-item>a:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 77, 234, .14);
}

.main-nav>a:hover>i,
.main-nav>a.active>i,
.main-nav>a:focus>i,
.nav-item:hover>a>i,
.nav-item>a.active>i,
.nav-item>a:focus>i {
    color: var(--zib-primary);
    transform: translateY(-1px);
}

.nav-item:hover .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    min-width: 168px;
    padding: 8px;
    border: 1px solid var(--zib-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(31, 38, 62, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.nav-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    color: #4d5564;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .08);
}

.nav-dropdown a i {
    width: 16px;
    color: #9aa1ad;
    text-align: center;
}

.nav-badge {
    position: absolute;
    top: -6px;
    right: -2px;
    padding: 2px 5px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #18c7d5, #42dcba);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn,
.menu-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #4c5361;
    background: rgba(45, 55, 76, .06);
}

.icon-btn:hover,
.icon-btn:focus,
.menu-btn:hover,
.menu-btn:focus {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
}

.menu-btn {
    display: none;
}

.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 10px 24px rgba(0, 77, 234, .22);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.pill-btn.active,
.pill-btn:hover,
.pill-btn:focus {
    color: #fff;
    transform: translateY(-1px);
}

.nav-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: #4c5361;
    background: rgba(45, 55, 76, .06);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.nav-link-btn:hover,
.nav-link-btn.active,
.icon-btn.active {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
}

.nav-user-card {
    position: relative;
}

.nav-avatar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    color: #343b49;
    background: rgba(255, 255, 255, .82);
}

.nav-user-card.active .nav-avatar,
.nav-avatar:hover,
.nav-avatar:focus {
    border-color: rgba(0, 77, 234, .22);
    color: var(--zib-primary);
    box-shadow: 0 14px 28px rgba(0, 77, 234, .14);
    transform: translateY(-1px);
}

.nav-avatar-img {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), var(--zib-blue));
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(0, 77, 234, .2);
}

.nav-avatar-img.large {
    width: 46px;
    height: 46px;
}

.nav-user-text {
    display: grid;
    gap: 1px;
    line-height: 1.15;
}

.nav-user-text strong {
    color: #2f3640;
    font-size: 13px;
    font-weight: 900;
}

.nav-user-text em {
    color: var(--zib-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.nav-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    width: 238px;
    padding: 10px;
    border: 1px solid var(--zib-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 46px rgba(31, 38, 62, .15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.nav-user-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.nav-user-card:hover .nav-user-menu,
.nav-user-card:focus-within .nav-user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-user-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 77, 234, .1), rgba(0, 77, 234, .08));
}

.nav-user-head strong,
.nav-user-head em {
    display: block;
}

.nav-user-head strong {
    color: #252c3a;
    font-size: 14px;
    font-weight: 900;
}

.nav-user-head em {
    margin-top: 4px;
    color: var(--zib-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.nav-user-menu>a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    color: #4d5564;
    font-size: 13px;
    font-weight: 800;
}

.nav-user-menu>a:hover,
.nav-user-menu>a:focus {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .08);
}

.nav-user-menu>a i {
    width: 16px;
    color: #9aa1ad;
    text-align: center;
}

.nav-guest-hint {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: rgba(0, 77, 234, .06);
    color: #8a7a82;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.nav-guest-hint i {
    font-size: 18px;
    color: var(--zib-primary);
    opacity: .6;
}

/* 游客卡片 */
.nav-user-head.guest {
    display: block;
    padding: 0;
    background: transparent;
    margin-bottom: 0;
}

.guest-card {
    padding: 16px 14px;
    text-align: center;
    background: linear-gradient(135deg, rgba(0, 77, 234, .08), rgba(0, 77, 234, .05));
    border-radius: 12px;
}

.guest-card strong {
    display: block;
    color: #252c3a;
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 6px;
}

.guest-card p {
    margin: 0 0 14px;
    color: #8a7a82;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 600;
}

.guest-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.guest-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #4d5564;
    background: rgba(45, 55, 76, .06);
    transition: all .2s;
}

.guest-btn:hover {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
}

.guest-btn.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
}

.guest-btn.primary:hover {
    opacity: .9;
}

.nav-menu-divider {
    height: 1px;
    margin: 6px 10px;
    background: var(--zib-line);
}

.nav-menu-logout {
    color: #9097a6 !important;
}

.nav-menu-logout:hover {
    color: #ff5f6d !important;
    background: rgba(255, 95, 109, .08) !important;
}

.nav-menu-logout i {
    color: inherit !important;
}

.owl-dynamic {
    width: min(1200px, calc(100% - 32px));
    height: 45px;
    margin: 18px auto 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 77, 234, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 28px rgba(31, 38, 62, .06);
    backdrop-filter: blur(14px);
}

.owl-dynamic-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--zib-primary);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.owl-dynamic-label i {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
}

.owl-dynamic-viewport {
    height: 45px;
    overflow: hidden;
}

.owl-dynamic-track {
    display: grid;
    animation: owlDynamicScroll 12s linear infinite;
}

.owl-dynamic:hover .owl-dynamic-track {
    animation-play-state: paused;
}

.owl-dynamic-track a {
    height: 45px;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    color: #525a69;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.owl-dynamic-more {
    color: var(--zib-muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

@keyframes owlDynamicScroll {

    0%,
    18% {
        transform: translateY(0);
    }

    33%,
    51% {
        transform: translateY(-45px);
    }

    66%,
    84% {
        transform: translateY(-90px);
    }

    100% {
        transform: translateY(-135px);
    }
}

.hero {
    --hero-height: 450px;
    width: min(1200px, calc(100% - 32px));
    height: var(--hero-height);
    margin: 16px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(330px, .78fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 12px;
    background: rgba(255, 255, 255, .42);
    box-shadow: 0 18px 50px rgba(31, 38, 62, .06);
}

.hero-panel {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-self: stretch;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
    box-shadow: 0 22px 48px rgba(18, 25, 42, .16);
    color: #fff;
}

.hero-swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
    min-height: 0;
    height: 100% !important;
}

.hero-swiper {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    background: #20283a;
}

.hero-swiper .swiper-wrapper {
    width: 100%;
    align-items: stretch;
}

.hero-swiper .swiper-slide {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.hero-slide {
    position: relative;
    box-sizing: border-box;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 44px 56px 58px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13, 19, 33, .82) 0%, rgba(18, 25, 42, .55) 45%, rgba(18, 25, 42, .2) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .28));
    pointer-events: none;
}

.hero-slide::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    height: 120px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .24));
    pointer-events: none;
}

.hero-slide.theme-wordpress {
    background-image:
        linear-gradient(135deg, rgba(30, 38, 60, .78), rgba(0, 77, 234, .28)),
        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1300&q=82");
}

.hero-slide.theme-community {
    background-image:
        linear-gradient(135deg, rgba(22, 43, 78, .78), rgba(24, 199, 213, .28)),
        url("https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1300&q=82");
}

.hero-slide.theme-shop {
    background-image:
        linear-gradient(135deg, rgba(30, 38, 60, .78), rgba(255, 184, 77, .26)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1300&q=82");
}

.hero-swiper .swiper-pagination {
    left: 56px;
    bottom: 24px;
    width: auto;
    opacity: 1;
    text-align: left;
    z-index: 4;
}

.hero-swiper .swiper-pagination-bullet {
    width: 20px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    opacity: .58;
    transition: width .25s ease, opacity .25s ease, background .25s ease;
}

.hero-swiper .swiper-pagination-bullet-active {
    width: 36px;
    opacity: 1;
    background: #fff;
}

.hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    transform: translateY(-50%);
    transition: background .25s ease, transform .25s ease;
}

.hero-arrow:hover {
    color: #fff;
    background: rgba(255, 255, 255, .26);
    transform: translateY(-50%) scale(1.04);
}

.hero-arrow.prev {
    left: 16px;
}

.hero-arrow.next {
    right: 16px;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 700;
}

.hero h1 {
    margin: 0 0 18px;
    max-width: 610px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: 0;
}

.hero p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    line-height: 1.82;
    text-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero-actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 19px;
    border-radius: 999px;
    font-weight: 700;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.hero-actions a:hover {
    color: #fff;
    transform: translateY(-2px);
}

.hero-actions .primary {
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 14px 30px rgba(0, 77, 234, .3);
}

.hero-actions .ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(10px);
}

.hero-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.mini-card {
    min-height: 0;
    padding: 22px;
    border: 1px solid var(--zib-line);
    border-radius: 10px;
    background: var(--zib-card);
    box-shadow: 0 12px 32px rgba(33, 40, 66, .07);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.mini-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 77, 234, .16);
    box-shadow: 0 18px 42px rgba(33, 40, 66, .1);
}

.mini-card.wide {
    grid-column: 1 / -1;
    min-height: 0;
    background:
        linear-gradient(135deg, rgba(47, 91, 255, .9), rgba(24, 199, 213, .78)),
        url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=900&q=80") center/cover;
    color: #fff;
}

.mini-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 10px 20px rgba(0, 77, 234, .18);
}

.mini-card:nth-child(2) .mini-icon {
    background: linear-gradient(135deg, var(--zib-green), #68dea8);
}

.mini-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
}

.mini-card p {
    margin: 0;
    color: var(--zib-muted);
    line-height: 1.7;
}

.mini-card.wide p {
    color: rgba(255, 255, 255, .86);
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: min(1200px, calc(100% - 32px));
    margin: 22px auto;
}

.stat-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 96px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #004dea, #18c7d5);
    box-shadow: 0 14px 34px rgba(33, 40, 66, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.stat-item::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -36px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
}

.stat-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(33, 40, 66, .13);
}

.stat-item:nth-child(2) {
    background: linear-gradient(135deg, #004dea, #5f91ff);
}

.stat-item:nth-child(3) {
    background: linear-gradient(135deg, #35c987, #18c7d5);
}

.stat-item:nth-child(4) {
    background: linear-gradient(135deg, #ff9f43, #ffcc5c);
}

.stat-icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    font-size: 22px;
}

.stat-info {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.stat-info strong {
    display: block;
    color: #fff;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 800;
}

.stat-info span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 700;
}

.search-bg {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto 22px;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(31, 39, 68, .82), rgba(24, 199, 213, .5)),
        url("https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1400&q=82") center/cover;
    box-shadow: 0 18px 42px rgba(31, 38, 62, .1);
    overflow: hidden;
}

.search-panel {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    align-items: center;
    gap: 24px;
    min-height: 168px;
    padding: 28px 32px;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 800;
}

.search-copy h2,
.division-head h2,
.dynamic-head h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 800;
}

.search-copy h2 {
    color: #fff;
}

.search-copy p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .78);
    line-height: 1.7;
}

.search-form {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 36px rgba(18, 25, 42, .16);
    transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.search-form:focus-within {
    border-color: rgba(0, 77, 234, .38);
    background: #fff;
    box-shadow: 0 18px 40px rgba(18, 25, 42, .18), 0 0 0 4px rgba(0, 77, 234, .12);
}

.search-form>i {
    color: var(--zib-primary);
    text-align: center;
}

.search-form input {
    min-width: 0;
    height: 38px;
    border: 0;
    outline: none;
    background: transparent;
    color: #303746;
    box-shadow: none;
    font: inherit;
}

.search-form input:focus {
    outline: none;
    box-shadow: none;
}

.search-form input::placeholder {
    color: #9aa1ad;
}

.search-form button {
    height: 38px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-weight: 800;
}

.division,
.dynamic {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto 22px;
    padding: 22px;
    border: 1px solid var(--zib-line);
    border-radius: 12px;
    background: var(--zib-card);
    box-shadow: var(--zib-shadow);
}

.division-head,
.dynamic-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.division-head h2,
.dynamic-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #252c3a;
}

.division-head h2 i,
.dynamic-head h2 i {
    color: var(--zib-primary);
}

.division-head a,
.dynamic-head span {
    color: var(--zib-muted);
    font-size: 13px;
    font-weight: 700;
}

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

.division-item {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 132px;
    padding: 18px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, rgba(245, 247, 252, .86));
    border: 1px solid rgba(45, 55, 76, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.division-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(33, 40, 66, .08);
}

.division-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-blue), #3f7bff);
    font-size: 20px;
}

.division-item:nth-child(2) .division-icon {
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
}

.division-item:nth-child(3) .division-icon {
    background: linear-gradient(135deg, var(--zib-green), #65dba3);
}

.division-item:nth-child(4) .division-icon {
    background: linear-gradient(135deg, var(--zib-yellow), #ffd16f);
}

.division-item strong {
    color: #303746;
    font-size: 16px;
    font-weight: 800;
}

.division-item span:last-child {
    color: var(--zib-muted);
    line-height: 1.55;
}

.dynamic-viewport {
    position: relative;
    height: 228px;
    overflow: hidden;
    border-radius: 10px;
}

.dynamic-viewport::before,
.dynamic-viewport::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 34px;
    pointer-events: none;
}

.dynamic-viewport::before {
    top: 0;
    background: linear-gradient(180deg, var(--zib-card), rgba(255, 255, 255, 0));
}

.dynamic-viewport::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--zib-card), rgba(255, 255, 255, 0));
}

.dynamic-track {
    display: grid;
    gap: 10px;
    animation: dynamicScroll 18s linear infinite;
}

.dynamic-viewport:hover .dynamic-track {
    animation-play-state: paused;
}

.dynamic-item {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 10px;
    min-height: 64px;
    padding: 13px 16px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
    transition: background .25s ease, transform .25s ease;
}

.dynamic-item:hover {
    background: #fff;
    transform: translateX(3px);
}

.dynamic-dot {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--zib-primary);
    box-shadow: 0 0 0 5px rgba(0, 77, 234, .1);
}

.dynamic-item strong {
    display: -webkit-box;
    overflow: hidden;
    color: #303746;
    line-height: 1.45;
    font-weight: 800;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dynamic-item span:last-child {
    display: block;
    margin-top: 6px;
    color: #9097a6;
    font-size: 12px;
}

@keyframes dynamicScroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(-50% - 5px));
    }
}

.content-shell {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 326px;
    gap: 22px;
    align-items: start;
}

.main-column {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.main-column .widget-area-before-latest .hero {
    margin-top: 0 !important;
}

.section-card {
    border: 1px solid var(--zib-line);
    border-radius: var(--zib-radius);
    background: var(--zib-card);
    box-shadow: var(--zib-shadow);
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--zib-line);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.section-title i {
    color: var(--zib-primary);
}

.tabs {
    display: flex;
    gap: 8px;
    overflow: auto;
    scrollbar-width: none;
}

.tabs a {
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--zib-muted);
    background: rgba(45, 55, 76, .05);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.tabs a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
}

.post-list {
    padding: 8px;
}

.post-item {
    display: grid;
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 18px;
    height: 172px;
    padding: 14px;
    border-radius: var(--zib-radius);
    overflow: hidden;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.post-item:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 12px 26px rgba(33, 40, 66, .07);
}

.post-thumb {
    position: relative;
    overflow: hidden;
    height: 144px;
    border-radius: var(--zib-radius);
    background: #dde2ef;
}

.post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-thumb .flag {
    position: absolute;
    left: 10px;
    top: auto;
    bottom: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(20, 26, 40, .68);
    backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 700;
}

.status-tag {
    position: absolute;
    left: 0px;
    top: 10px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 8px 999px 999px 8px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(18, 25, 42, .2);
    letter-spacing: 0;
}

.tag-sticky {
    background: linear-gradient(135deg, #ff5f6d, var(--zib-primary));
}

.tag-hot {
    background: linear-gradient(135deg, #ff9f43, #ffcc5c);
}

.tag-new {
    background: linear-gradient(135deg, var(--zib-green), #18c7d5);
}

.post-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-body h3 {
    margin: 0 0 9px;
    font-size: 19px;
    line-height: 1.45;
    font-weight: 800;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.post-body p {
    margin: 0 0 14px;
    color: var(--zib-muted);
    line-height: 1.7;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    color: #9097a6;
    font-size: 13px;
}

.post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.post-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px 20px;
}

.page-btn,
.page-dot {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #667085;
    background: rgba(45, 55, 76, .06);
    font-size: 13px;
    font-weight: 800;
}

.page-btn {
    transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.page-btn:hover {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
    transform: translateY(-1px);
}

.page-btn.active {
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 10px 22px rgba(0, 77, 234, .2);
}

.page-btn.disabled {
    pointer-events: none;
    opacity: .45;
}

.page-dot {
    background: transparent;
}

.category-posts {
    padding: 16px;
    border: 1px solid var(--zib-line);
    border-radius: var(--zib-radius);
    background: var(--zib-card);
    box-shadow: var(--zib-shadow);
}

.category-posts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.category-posts-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #252c3a;
    font-size: 18px;
    font-weight: 800;
}

.category-posts-head h2 i {
    color: var(--zib-primary);
}

.category-posts-head a {
    color: var(--zib-muted);
    font-size: 13px;
    font-weight: 800;
}

.category-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.category-post-card {
    overflow: hidden;
    border: 1px solid rgba(45, 55, 76, .06);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(33, 40, 66, .05);
    transition: transform .25s ease, box-shadow .25s ease;
}

.category-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(33, 40, 66, .09);
}

.category-post-cover {
    position: relative;
    display: block;
    height: 105px;
    overflow: hidden;
    background: #dde2ef;
}

.category-post-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}

.category-post-card:hover .category-post-cover img {
    transform: scale(1.04);
}

.category-post-cover span {
    position: absolute;
    left: 12px;
    top: auto;
    bottom: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #fff;
    background: rgba(20, 26, 40, .68);
    backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 800;
}

.category-post-cover .status-tag {
    left: 0px;
    top: 10px;
    bottom: auto;
    border-radius: 8px 999px 999px 8px;
}

.category-post-cover .status-tag.tag-sticky {
    background: linear-gradient(135deg, #ff5f6d, var(--zib-primary));
}

.category-post-cover .status-tag.tag-hot {
    background: linear-gradient(135deg, #ff9f43, #ffcc5c);
}

.category-post-cover .status-tag.tag-new {
    background: linear-gradient(135deg, var(--zib-green), #18c7d5);
}

.category-post-body {
    padding: 12px;
}

.category-post-body h3 {
    margin: 0 0 7px;
    font-size: 14px;
    line-height: 1.42;
    font-weight: 800;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.category-post-body p {
    margin: 0;
    color: var(--zib-muted);
    font-size: 12px;
    line-height: 1.55;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.category-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    color: #9097a6;
    font-size: 12px;
}

.category-pagination {
    padding: 16px 0 0;
}

.sidebar {
    display: grid;
    gap: 16px;
}

.widget {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border: 1px solid var(--zib-line);
    border-radius: 10px;
    background: var(--zib-card);
    box-shadow: 0 12px 30px rgba(33, 40, 66, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.widget:hover {
    border-color: rgba(0, 77, 234, .12);
    box-shadow: 0 18px 40px rgba(33, 40, 66, .09);
}

.widget h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 13px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--zib-line);
    color: #2d3543;
    font-size: 16px;
    font-weight: 800;
}

.widget h3 i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-size: 13px;
}

.profile-card {
    text-align: center;
}

.avatar {
    width: 70px;
    height: 70px;
    margin: 0 auto 12px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zib-primary), var(--zib-blue));
    box-shadow: 0 10px 22px rgba(0, 77, 234, .18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.profile-card h3 {
    justify-content: center;
    margin-bottom: 6px;
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-card p {
    margin: 0 0 14px;
    color: var(--zib-muted);
    line-height: 1.7;
}

.profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.profile-actions a {
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(45, 55, 76, .06);
    font-weight: 700;
}

.profile-actions a.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
}

.doc-list {
    display: grid;
    gap: 10px;
}

.doc-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: var(--zib-radius);
    background: rgba(45, 55, 76, .045);
    transition: background .25s ease, transform .25s ease;
}

.doc-list a:hover {
    background: #fff;
    transform: translateX(3px);
}

.doc-list span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 700;
}

.doc-list i {
    color: var(--zib-blue);
}

.side-news-list {
    display: grid;
    gap: 12px;
}

.side-news-item {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    min-height: 68px;
    padding: 8px;
    border-radius: 9px;
    background: rgba(45, 55, 76, .045);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.side-news-item:hover {
    background: #fff;
    transform: translateX(3px);
    box-shadow: 0 10px 22px rgba(33, 40, 66, .06);
}

.side-news-thumb {
    width: 86px;
    height: 64px;
    overflow: hidden;
    border-radius: 7px;
    background: #dde2ef;
}

.side-news-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.side-news-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.side-news-body strong {
    color: #343b49;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 800;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.side-news-body span {
    margin-top: 6px;
    color: #9097a6;
    font-size: 12px;
}

.rank-list {
    display: grid;
    gap: 10px;
    counter-reset: rank;
}

.rank-item {
    counter-increment: rank;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 10px;
    border-radius: 9px;
    background: rgba(45, 55, 76, .045);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.rank-item:hover {
    background: #fff;
    transform: translateX(3px);
    box-shadow: 0 10px 22px rgba(33, 40, 66, .06);
}

.rank-item::before {
    content: counter(rank);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: rgba(45, 55, 76, .32);
    font-size: 14px;
    font-weight: 800;
}

.rank-item:nth-child(1)::before {
    background: linear-gradient(135deg, var(--zib-red), var(--zib-primary));
}

.rank-item:nth-child(2)::before {
    background: linear-gradient(135deg, var(--zib-yellow), #ffcf70);
}

.rank-item:nth-child(3)::before {
    background: linear-gradient(135deg, var(--zib-blue), #76a3ff);
}

.rank-body {
    min-width: 0;
}

.rank-body strong {
    display: -webkit-box;
    overflow: hidden;
    color: #343b49;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 800;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rank-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    color: #9097a6;
    font-size: 12px;
}

.category-cards {
    width: min(1200px, calc(100% - 32px));
    margin: -14px auto 36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.category-card {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    padding: 24px;
    border: 1px solid var(--zib-line);
    border-radius: 12px;
    background:
        radial-gradient(circle at 92% 8%, var(--category-glow, rgba(0, 77, 234, .14)), transparent 34%),
        linear-gradient(180deg, #fff, rgba(248, 250, 255, .9));
    box-shadow: 0 14px 34px rgba(33, 40, 66, .07);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.category-card::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -42px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--category-glow, rgba(0, 77, 234, .12));
}

.category-card:hover {
    transform: translateY(-4px);
    border-color: var(--category-border, rgba(0, 77, 234, .18));
    box-shadow: 0 22px 48px rgba(33, 40, 66, .11);
}

.category-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.category-card-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: var(--category-color, linear-gradient(135deg, var(--zib-blue), #3f7bff));
    font-size: 22px;
    box-shadow: 0 12px 24px var(--category-shadow, rgba(0, 77, 234, .2));
}

.category-count {
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--category-text, var(--zib-blue));
    background: var(--category-soft, rgba(0, 77, 234, .08));
    font-size: 12px;
    font-weight: 800;
}

.category-card h3,
.category-card p,
.category-card a {
    position: relative;
    z-index: 1;
}

.category-card h3 {
    margin: 0 0 10px;
    color: #252c3a;
    font-size: 21px;
    font-weight: 800;
}

.category-card p {
    margin: 0;
    color: var(--zib-muted);
    line-height: 1.75;
}

.category-card a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    color: var(--category-text, var(--zib-blue));
    font-weight: 800;
}

.category-card.color-blue {
    --category-color: linear-gradient(135deg, var(--zib-blue), #3f7bff);
    --category-text: var(--zib-blue);
    --category-soft: rgba(0, 77, 234, .09);
    --category-glow: rgba(0, 77, 234, .14);
    --category-border: rgba(0, 77, 234, .18);
    --category-shadow: rgba(0, 77, 234, .22);
}

.category-card.color-pink {
    --category-color: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    --category-text: var(--zib-primary);
    --category-soft: rgba(0, 77, 234, .09);
    --category-glow: rgba(0, 77, 234, .14);
    --category-border: rgba(0, 77, 234, .18);
    --category-shadow: rgba(0, 77, 234, .22);
}

.category-card.color-green {
    --category-color: linear-gradient(135deg, var(--zib-green), #65dba3);
    --category-text: #1e9c63;
    --category-soft: rgba(53, 201, 135, .09);
    --category-glow: rgba(53, 201, 135, .14);
    --category-border: rgba(53, 201, 135, .18);
    --category-shadow: rgba(53, 201, 135, .22);
}

.sidebar-swiper {
    position: relative;
    width: 100%;
    height: 176px;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(135deg, #eef3ff, #d9e4f4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.sidebar-swiper .swiper-wrapper,
.sidebar-swiper .swiper-slide {
    width: 100%;
    height: 176px !important;
}

.sidebar-swiper .swiper-wrapper {
    align-items: stretch;
}

.sidebar-swiper .swiper-slide {
    position: relative;
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    background: #dfe7f3;
}

.sidebar-slide {
    position: relative;
    display: block !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #fff;
    border-radius: inherit;
    background: #dfe7f3;
    transform: translateZ(0);
}

.sidebar-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 34%, rgba(18, 25, 42, .72));
    pointer-events: none;
}

.sidebar-slide img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 176px;
    display: block !important;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    visibility: visible;
    transition: transform .35s ease;
}

.sidebar-slide:hover img {
    transform: scale(1.045);
}

.sidebar-slide span {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 16px;
    z-index: 2;
    overflow: hidden;
    color: #fff;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-swiper-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(18, 25, 42, .42);
    box-shadow: 0 8px 18px rgba(18, 25, 42, .16);
    cursor: pointer;
    opacity: .88;
    transform: translateY(-50%);
    transition: background .25s ease, opacity .25s ease, transform .25s ease;
}

.sidebar-swiper-arrow.prev {
    left: 10px;
}

.sidebar-swiper-arrow.next {
    right: 10px;
}

.sidebar-swiper-arrow:hover {
    opacity: 1;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    transform: translateY(-50%) scale(1.06);
}

.sidebar-swiper-arrow:focus {
    outline: none;
}

.sidebar-swiper-arrow i {
    font-size: 20px;
    line-height: 1;
}

.sidebar-swiper .swiper-pagination {
    opacity: 1;
    bottom: 5px;
    z-index: 3;
}

.text-rank-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.text-rank-tabs button {
    height: 32px;
    border: 0;
    border-radius: 999px;
    color: #667085;
    background: rgba(45, 55, 76, .06);
    font-weight: 800;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

.text-rank-tabs button:hover {
    color: var(--zib-primary);
    transform: translateY(-1px);
}

.text-rank-tabs button.active {
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
}

.text-rank-panel {
    display: none;
}

.text-rank-panel.active {
    display: grid;
    gap: 8px;
}

.text-rank-panel a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(45, 55, 76, .045);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.text-rank-panel a:hover {
    background: #fff;
    transform: translateX(3px);
    box-shadow: 0 10px 22px rgba(33, 40, 66, .06);
}

.text-rank-panel a span {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #fff;
    background: rgba(45, 55, 76, .32);
    font-size: 12px;
    font-weight: 800;
}

.text-rank-panel a:nth-child(1) span {
    background: linear-gradient(135deg, #ff5f6d, var(--zib-primary));
}

.text-rank-panel a:nth-child(2) span {
    background: linear-gradient(135deg, #ff9f43, #ffcc5c);
}

.text-rank-panel a:nth-child(3) span {
    background: linear-gradient(135deg, var(--zib-blue), #3f7bff);
}

.text-rank-panel strong {
    min-width: 0;
    overflow: hidden;
    color: #343b49;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.friend-links a {
    padding: 8px 11px;
    border-radius: 999px;
    color: #596170;
    background: rgba(45, 55, 76, .06);
    font-size: 13px;
    font-weight: 800;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

.friend-links a:hover {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .08);
    transform: translateY(-1px);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.tag-cloud a {
    padding: 7px 11px;
    border-radius: 999px;
    color: #596170;
    background: rgba(45, 55, 76, .06);
    font-size: 13px;
    font-weight: 700;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

.tag-cloud a:hover {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .08);
    transform: translateY(-1px);
}

.notice {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(0, 77, 234, .94), rgba(255, 184, 77, .9)),
        url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=900&q=78") center/cover;
}

.notice p {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .86);
    line-height: 1.7;
}

.notice a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    font-weight: 800;
}

.feature-band {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto 36px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.feature-item {
    padding: 22px;
    border: 1px solid var(--zib-line);
    border-radius: var(--zib-radius);
    background: var(--zib-card);
    box-shadow: var(--zib-shadow);
}

.feature-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-blue), #3f7bff);
}

.feature-item:nth-child(2) .feature-icon {
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
}

.feature-item:nth-child(3) .feature-icon {
    background: linear-gradient(135deg, var(--zib-green), #65dba3);
}

.feature-item:nth-child(4) .feature-icon {
    background: linear-gradient(135deg, var(--zib-yellow), #ffd16f);
}

.feature-item h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
}

.feature-item p {
    margin: 0;
    color: var(--zib-muted);
    line-height: 1.7;
}

.site-footer {
    margin-top: 8px;
    padding: 34px 16px 22px;
    border-top: 1px solid var(--zib-line);
    color: var(--zib-muted);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(246, 247, 251, .96)),
        radial-gradient(circle at 10% 0, rgba(0, 77, 234, .08), transparent 28%);
}

.site-footer strong,
.site-footer h3 {
    color: var(--zib-text);
}

.footer-inner {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 1.5fr;
    gap: 44px;
    align-items: start;
}

.footer-brand p {
    max-width: 380px;
    margin: 14px 0 0;
    line-height: 1.75;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.footer-links h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
}

.footer-qrcodes {
    display: flex;
    gap: 12px;
}

.footer-qrcode {
    text-align: center;
    cursor: default;
}

.footer-qrcode img {
    width: 86px;
    height: 86px;
    display: block;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(33, 40, 66, .08);
    transition: transform .2s;
}

.footer-qrcode img:hover {
    transform: scale(1.05);
}

.footer-qrcode span {
    display: block;
    margin-top: 6px;
    color: var(--zib-muted);
    font-size: 12px;
    font-weight: 700;
}

.footer-qrcode em {
    display: block;
    max-width: 96px;
    margin-top: 4px;
    overflow: hidden;
    color: #9aa1ad;
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footer-links a {
    display: block;
    margin: 8px 0;
    color: var(--zib-muted);
}

.footer-links a:hover {
    color: var(--zib-primary);
}

.footer-bottom {
    width: min(1200px, calc(100% - 32px));
    margin: 26px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--zib-line);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #9aa1ad;
    font-size: 13px;
}

.notice-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.notice-modal.is-show {
    opacity: 1;
    visibility: visible;
}

.notice-mask {
    position: absolute;
    inset: 0;
    background: rgba(22, 28, 42, .52);
    backdrop-filter: blur(8px);
}

.notice-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    background:
        radial-gradient(circle at 95% 0, rgba(0, 77, 234, .14), transparent 35%),
        linear-gradient(180deg, #fff, #f8faff);
    box-shadow: 0 28px 70px rgba(18, 25, 42, .24);
    transform: translateY(14px) scale(.98);
    transition: transform .25s ease;
}

.notice-modal.is-show .notice-dialog {
    transform: translateY(0) scale(1);
}

.notice-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: #7d8491;
    background: rgba(45, 55, 76, .06);
}

.notice-dialog-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 28px 28px 18px;
}

.notice-dialog-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 14px 28px rgba(0, 77, 234, .22);
    font-size: 22px;
}

.notice-dialog-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--zib-primary);
    font-size: 12px;
    font-weight: 800;
}

.notice-dialog h2 {
    margin: 0;
    padding-right: 34px;
    color: #252c3a;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 800;
}

.notice-dialog-body {
    padding: 0 28px 22px;
}

.notice-dialog-body p {
    margin: 0 0 14px;
    color: var(--zib-muted);
    line-height: 1.75;
}

.notice-dialog-body ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.notice-dialog-body li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #4d5564;
}

.notice-dialog-body li i {
    color: var(--zib-green);
}

.notice-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px 24px;
    border-top: 1px solid var(--zib-line);
}

.notice-dialog-actions button,
.notice-dialog-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
}

.notice-secondary {
    color: #697181;
    background: rgba(45, 55, 76, .07);
}

.notice-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 12px 24px rgba(0, 77, 234, .2);
}

.vip-pay-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.vip-pay-modal.is-show {
    opacity: 1;
    visibility: visible;
}

.vip-pay-mask {
    position: absolute;
    inset: 0;
    background: rgba(22, 28, 42, .58);
    backdrop-filter: blur(8px);
}

.vip-pay-dialog {
    position: relative;
    z-index: 1;
    width: min(680px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    background:
        radial-gradient(circle at 95% 0, rgba(0, 77, 234, .14), transparent 36%),
        linear-gradient(180deg, #fff, #f8faff);
    box-shadow: 0 28px 70px rgba(18, 25, 42, .24);
    transform: translateY(14px) scale(.98);
    transition: transform .25s ease;
}

.vip-pay-modal.is-show .vip-pay-dialog {
    transform: translateY(0) scale(1);
}

.points-payment-dialog {
    width: min(620px, 100%);
}

.points-payment-body {
    padding: 18px 28px 28px;
    text-align: center;
}

.points-payment-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.points-payment-summary div {
    padding: 12px;
    border: 1px solid rgba(45, 55, 76, .1);
    border-radius: 10px;
    background: #f7f8fb;
}

.points-payment-summary span {
    display: block;
    margin-bottom: 5px;
    color: #7d8491;
    font-size: 12px;
}

.points-payment-summary strong {
    color: #252b3a;
    font-size: 14px;
    word-break: break-all;
}

.points-payment-qr {
    width: 248px;
    height: 248px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid rgba(45, 55, 76, .12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(18, 25, 42, .08);
}

.points-payment-qr canvas,
.points-payment-qr img {
    width: 220px;
    height: 220px;
}

.points-payment-qr span,
.points-payment-status {
    color: #697181;
    font-size: 14px;
}

.points-payment-status {
    margin: 14px 0 0;
}

.points-payment-status.is-error {
    color: #d92d20;
}

.points-payment-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.points-payment-actions .vip-pay-primary,
.points-payment-actions .vip-pay-secondary {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    text-decoration: none;
}

.points-payment-actions .is-disabled {
    opacity: .55;
    pointer-events: none;
}

.vip-pay-body.points-payment-body {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 18px 28px 30px;
    background:
        linear-gradient(180deg, rgba(0, 77, 234, .055), rgba(255, 255, 255, 0) 42%),
        #fff;
}

.vip-pay-body.points-payment-body .points-payment-summary {
    width: 100%;
    margin-bottom: 2px;
}

.vip-pay-body.points-payment-body .points-payment-summary div {
    min-width: 0;
    padding: 13px 14px;
    border-color: rgba(0, 77, 234, .12);
    border-radius: 8px;
    background: rgba(247, 249, 252, .92);
}

.vip-pay-body.points-payment-body .points-payment-summary span {
    color: #667085;
    font-weight: 800;
}

.vip-pay-body.points-payment-body .points-payment-summary strong {
    color: #1f2430;
    font-size: 15px;
}

.vip-pay-body.points-payment-body .points-payment-qr {
    position: relative;
    width: 264px;
    height: 264px;
    padding: 16px;
    border-color: rgba(0, 77, 234, .18);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(31, 36, 48, .1);
}

.vip-pay-body.points-payment-body .points-payment-qr::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(0, 77, 234, .18);
    border-radius: 6px;
    pointer-events: none;
}

.vip-pay-body.points-payment-body .points-payment-qr canvas,
.vip-pay-body.points-payment-body .points-payment-qr img {
    position: relative;
    z-index: 1;
    width: 220px;
    height: 220px;
}

.vip-pay-body.points-payment-body .points-payment-status {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    color: #475467;
    background: rgba(53, 201, 135, .08);
    font-weight: 800;
    line-height: 1.6;
}

.vip-pay-body.points-payment-body .points-payment-status.is-error {
    color: #b42318;
    background: rgba(217, 45, 32, .08);
}

.vip-pay-body.points-payment-body .points-payment-actions {
    width: 100%;
    margin-top: 0;
}

.vip-pay-body.points-payment-body .points-payment-actions .vip-pay-primary,
.vip-pay-body.points-payment-body .points-payment-actions .vip-pay-secondary {
    min-height: 42px;
    border-radius: 8px;
}

#pointsPaymentOpen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

.points-payment-dialog {
    border-color: rgba(0, 77, 234, .18);
    background:
        linear-gradient(180deg, #f7faff 0, #fff 42%),
        #fff;
}

.points-payment-dialog .vip-pay-head {
    align-items: flex-start;
    padding: 22px 28px 18px;
    border-bottom: 1px solid rgba(0, 77, 234, .1);
    background: linear-gradient(180deg, rgba(0, 77, 234, .08), rgba(255, 255, 255, 0));
}

.points-payment-dialog .vip-pay-icon {
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 12px 24px rgba(0, 77, 234, .2);
}

.points-payment-dialog .vip-pay-kicker {
    color: var(--zib-primary);
}

.points-payment-dialog .vip-pay-head h2 {
    margin-top: 2px;
    color: #1f2430;
}

.points-payment-dialog .vip-pay-head p {
    max-width: 420px;
    color: #667085;
}

.vip-pay-body.points-payment-body {
    grid-template-columns: minmax(0, 1fr);
}

.vip-pay-body.points-payment-body .points-payment-summary {
    gap: 12px;
}

.vip-pay-body.points-payment-body .points-payment-summary div {
    display: grid;
    gap: 6px;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.vip-pay-body.points-payment-body .points-payment-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.vip-pay-body.points-payment-body .points-payment-summary div:last-child strong {
    color: var(--zib-primary);
    font-size: 18px;
    font-weight: 900;
}

.vip-pay-body.points-payment-body .points-payment-qr {
    margin-top: 2px;
}

.vip-pay-body.points-payment-body .points-payment-qr span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    color: #475467;
    background: #f7f9fc;
    font-weight: 800;
}

.vip-pay-body.points-payment-body .points-payment-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.vip-pay-body.points-payment-body .points-payment-actions .vip-pay-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 12px 24px rgba(0, 77, 234, .2);
}

.vip-pay-body.points-payment-body .points-payment-actions .vip-pay-secondary {
    border: 1px solid rgba(0, 77, 234, .16);
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .06);
}

.vip-pay-body.points-payment-body .points-payment-actions .vip-pay-primary:hover,
.vip-pay-body.points-payment-body .points-payment-actions .vip-pay-secondary:hover {
    transform: translateY(-1px);
}

.order-detail-dialog {
    position: relative;
    isolation: isolate;
    width: min(640px, calc(100vw - 28px));
    border-color: rgba(0, 77, 234, .18);
    background:
        linear-gradient(180deg, #f7faff 0, #fff 42%),
        #fff;
}

.order-detail-dialog .vip-pay-head {
    position: relative;
    align-items: flex-start;
    padding: 22px 150px 18px 28px;
    border-bottom: 1px solid rgba(0, 77, 234, .1);
    background: linear-gradient(180deg, rgba(0, 77, 234, .08), rgba(255, 255, 255, 0));
}

.order-detail-dialog .vip-pay-icon {
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 12px 24px rgba(0, 77, 234, .2);
}

.order-detail-dialog .vip-pay-kicker {
    color: var(--zib-primary);
}

.order-detail-dialog .vip-pay-head h2 {
    font-size: 21px;
}

.order-detail-dialog .vip-pay-head p {
    max-width: 360px;
    color: #667085;
}

.order-detail-body {
    position: static;
    display: grid;
    gap: 16px;
    padding: 22px 28px 28px;
    background:
        linear-gradient(180deg, rgba(0, 77, 234, .035), rgba(255, 255, 255, 0) 46%),
        #fff;
}

.order-detail-status {
    position: absolute;
    top: 70px;
    right: 44px;
    z-index: 12;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.order-detail-status .order-status {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.order-detail-status .order-status--paid {
    color: #067647;
    border-color: rgba(6, 118, 71, .18);
    background: linear-gradient(135deg, rgba(6, 118, 71, .12), rgba(18, 183, 106, .2));
    box-shadow: 0 6px 14px rgba(6, 118, 71, .1);
}

.order-detail-status .order-status--paid::before {
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 12px;
}

.order-detail-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 0 6px;
}

.order-detail-grid div {
    display: grid;
    gap: 7px;
    min-width: 0;
    min-height: 78px;
    padding: 14px 15px;
    border: 1px solid rgba(0, 77, 234, .12);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(247, 249, 252, .94)),
        #fff;
    box-shadow: 0 10px 24px rgba(31, 36, 48, .045), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.order-detail-grid span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.order-detail-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #1f2430;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
    word-break: break-word;
}

.order-detail-grid div:nth-child(2) strong {
    color: var(--zib-primary);
    font-size: 18px;
}

.order-detail-grid div:nth-child(3) strong {
    color: #067647;
}

.order-detail-grid div:nth-child(4) strong,
.order-detail-grid div:nth-child(5) strong {
    color: #0f3d91;
}

.order-detail-grid div:nth-child(5) strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

.order-detail-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 14px;
    border-top: 1px solid rgba(228, 233, 242, .9);
}

.order-detail-actions .vip-pay-secondary {
    min-width: 96px;
    min-height: 40px;
    border: 1px solid rgba(0, 77, 234, .16);
    border-radius: 999px;
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .06);
}

@media (max-width: 560px) {
    .points-payment-summary {
        grid-template-columns: 1fr;
    }

    .vip-pay-body.points-payment-body {
        padding: 16px;
    }

    .vip-pay-body.points-payment-body .points-payment-qr {
        width: min(264px, 100%);
        height: auto;
        aspect-ratio: 1;
    }

    .vip-pay-body.points-payment-body .points-payment-actions {
        grid-template-columns: 1fr;
    }

    .order-detail-body {
        padding: 16px;
    }

    .order-detail-dialog .vip-pay-head {
        padding-right: 54px;
    }

    .order-detail-status {
        position: static;
        justify-content: flex-start;
    }

    .order-detail-grid {
        grid-template-columns: 1fr;
        padding: 6px 0 4px;
    }

    .order-detail-grid div:first-child {
        grid-column: auto;
    }

    .order-detail-actions .vip-pay-secondary {
        width: 100%;
    }

    .points-payment-actions .vip-pay-primary,
    .points-payment-actions .vip-pay-secondary {
        flex: 1;
        justify-content: center;
    }
}

.order-detail-body {
    gap: 16px;
}

.order-detail-status {
    padding-bottom: 0;
}

.order-detail-grid div {
    gap: 8px;
    border-color: rgba(0, 77, 234, .12);
}

.order-detail-grid span {
    line-height: 1.2;
}

.order-detail-grid strong {
    line-height: 1.35;
}

.order-detail-grid div:first-child {
    grid-column: 1 / -1;
}

.order-detail-grid div:first-child strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: 0;
}

.order-detail-grid div:nth-child(5) strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: normal;
}

.order-detail-grid {
    padding-top: 10px;
    padding-bottom: 6px;
}

.order-detail-actions .vip-pay-secondary {
    border-color: rgba(0, 77, 234, .16);
    background: rgba(0, 77, 234, .06);
}

@media (max-width: 560px) {
    .order-detail-grid {
        padding-top: 6px;
        padding-bottom: 4px;
    }

    .order-detail-status {
        position: static;
        pointer-events: auto;
    }

    .order-detail-grid div:first-child {
        grid-column: auto;
    }
}

.order-cancel-dialog {
    border-color: rgba(231, 76, 60, .18);
    background:
        linear-gradient(180deg, #fff8f7 0, #fff 46%),
        #fff;
}

.order-cancel-dialog .vip-pay-head {
    align-items: flex-start;
    padding: 22px 28px 18px;
    border-bottom: 1px solid rgba(231, 76, 60, .1);
    background: linear-gradient(180deg, rgba(231, 76, 60, .08), rgba(255, 255, 255, 0));
}

.order-cancel-dialog .vip-pay-icon {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #e74c3c, #ff7a6b);
    box-shadow: 0 12px 24px rgba(231, 76, 60, .2);
}

.order-cancel-dialog .vip-pay-kicker {
    color: #d92d20;
}

.order-cancel-body {
    display: grid;
    gap: 16px;
    padding: 18px 28px 28px;
}

.order-cancel-box {
    display: grid;
    gap: 8px;
    padding: 14px 15px;
    border: 1px solid rgba(231, 76, 60, .12);
    border-radius: 8px;
    background: rgba(255, 247, 245, .86);
}

.order-cancel-box span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.order-cancel-box strong {
    overflow: hidden;
    color: #1f2430;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-cancel-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.order-cancel-actions .vip-pay-secondary,
.order-cancel-actions .vip-pay-primary {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

@media (max-width: 560px) {
    .order-cancel-body {
        padding: 16px;
    }

    .order-cancel-actions {
        grid-template-columns: 1fr;
    }
}

.order-list.uc-list {
    display: grid;
    gap: 12px;
}

.order-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--zib-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(18, 25, 42, .05);
}

.order-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #35c987, #1e9c63);
    font-size: 18px;
}

.order-icon--member {
    background: linear-gradient(135deg, #004dea, #003fbe);
}

.order-info {
    min-width: 0;
}

.order-title {
    display: block;
    margin-bottom: 6px;
    color: #252b3a;
    font-size: 15px;
}

.order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: #7d8491;
    font-size: 12px;
}

.order-meta-id {
    word-break: break-all;
}

.order-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.order-status {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.order-status--pending {
    color: #b54708;
    background: #fff4e5;
}

.order-status--paid {
    color: #067647;
    background: #e9f8f0;
}

.order-status--closed {
    color: #667085;
    background: #f2f4f7;
}

.order-actions button {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--zib-line);
    border-radius: 999px;
    color: #4d5564;
    background: #fff;
    font-weight: 800;
    font-size: 12px;
}

.order-repay-btn {
    color: #fff !important;
    border-color: #1677ff !important;
    background: #1677ff !important;
}

.order-cancel-btn {
    color: #d92d20 !important;
    border-color: #ffd3cc !important;
    background: #fff7f5 !important;
}

@media (max-width: 760px) {
    .order-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .order-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.vip-pay-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: #7d8491;
    background: rgba(45, 55, 76, .06);
    cursor: pointer;
}

.order-detail-dialog .vip-pay-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
}

.vip-pay-head {
    display: flex;
    gap: 14px;
    padding: 20px 28px 12px;
    flex-shrink: 0;
}

.vip-pay-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 14px 28px rgba(0, 77, 234, .22);
    font-size: 22px;
}

.vip-pay-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--zib-primary);
    font-size: 12px;
    font-weight: 800;
}

.vip-pay-head h2 {
    margin: 0;
    padding-right: 36px;
    color: #252c3a;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 800;
}

.vip-pay-head p {
    margin: 8px 0 0;
    color: var(--zib-muted);
    line-height: 1.7;
}

.vip-pay-body {
    display: grid;
    gap: 14px;
    padding: 0 28px 18px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vip-pay-body::-webkit-scrollbar {
    display: none;
}

.vip-pay-block h3 {
    margin: 0 0 10px;
    color: #252c3a;
    font-size: 16px;
    font-weight: 800;
}

.vip-plan-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.vip-plan-option,
.vip-method-option {
    border: 1px solid var(--zib-line);
    border-radius: 10px;
    background: #fff;
    color: #4d5564;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.vip-plan-option {
    display: grid;
    gap: 12px;
    padding: 14px;
    text-align: left;
}

.vip-plan-option strong,
.vip-plan-option small,
.vip-plan-option em {
    display: block;
}

.vip-plan-option strong {
    color: #252c3a;
    font-weight: 800;
}

.vip-plan-option small {
    margin-top: 6px;
    color: var(--zib-muted);
    font-size: 12px;
    line-height: 1.55;
}

.vip-plan-option em {
    color: var(--zib-primary);
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
}

.vip-plan-option em small {
    display: inline;
    margin: 0 0 0 2px;
}

.vip-method-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.vip-method-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 800;
}

.vip-plan-option.active,
.vip-method-option.active {
    border-color: rgba(0, 77, 234, .46);
    box-shadow: 0 10px 24px rgba(0, 77, 234, .12);
    transform: translateY(-1px);
}

.vip-method-option.active i {
    color: var(--zib-primary);
}

.vip-order-box {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .05);
}

.vip-order-box div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--zib-muted);
    font-weight: 700;
}

.vip-order-box strong {
    color: #252c3a;
}

.vip-order-total {
    padding-top: 10px;
    border-top: 1px solid var(--zib-line);
}

.vip-order-total strong {
    color: var(--zib-primary);
    font-size: 24px;
}

.vip-order-total em {
    font-style: normal;
}

.vip-pay-status {
    min-height: 22px;
    margin: 0;
    color: var(--zib-primary);
    font-weight: 800;
}

.vip-pay-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px 24px;
    border-top: 1px solid var(--zib-line);
    flex-shrink: 0;
}

.vip-pay-actions button {
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
}

.vip-pay-secondary {
    color: #697181;
    background: rgba(45, 55, 76, .07);
}

.vip-pay-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 12px 24px rgba(0, 77, 234, .2);
}

.vip-pay-primary.is-danger {
    background: linear-gradient(135deg, #e74c3c, #ff6b6b);
    box-shadow: 0 12px 24px rgba(231, 76, 60, .22);
}

.vip-pay-primary:disabled {
    opacity: .72;
    cursor: wait;
}

.vip-toast {
    position: fixed;
    right: 24px;
    top: 86px;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-green), #21c98f);
    box-shadow: 0 16px 36px rgba(18, 25, 42, .18);
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease;
}

.vip-toast.is-show {
    opacity: 1;
    transform: translateY(0);
}

.page-hero,
.member-hero {
    width: min(1200px, calc(100% - 32px));
    margin: 22px auto;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(31, 38, 62, .08);
}

.page-hero {
    min-height: 300px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: end;
    padding: 34px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(20, 28, 48, .86), rgba(0, 77, 234, .48)),
        url("https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1400&q=82") center/cover;
}

.breadcrumb-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 800;
}

.article-card .breadcrumb-line {
    color: var(--zib-muted);
}

.page-breadcrumb {
    width: min(1200px, calc(100% - 32px));
    margin: 12px auto 12px;
    color: var(--zib-muted);
}

.breadcrumb-line a:hover {
    color: var(--zib-primary);
}

.page-hero h1,
.member-hero h1 {
    margin: 0;
    font-size: 42px;
    line-height: 1.16;
    font-weight: 800;
}

.page-hero p,
.member-hero p {
    max-width: 620px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .84);
    font-size: 16px;
    line-height: 1.8;
}

.page-hero-actions,
.member-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.page-hero-actions a,
.member-hero-actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
}

.page-hero-actions .primary,
.member-hero-actions .primary {
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 12px 24px rgba(0, 77, 234, .24);
}

.page-hero-actions .ghost,
.member-hero-actions .ghost {
    border: 1px solid rgba(255, 255, 255, .36);
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
}

.page-hero-stats {
    display: grid;
    gap: 12px;
}

.page-hero-stats span {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, .82);
    font-weight: 800;
}

.page-hero-stats strong {
    color: #fff;
    font-size: 28px;
}

.section-more {
    color: var(--zib-muted);
    font-size: 13px;
    font-weight: 800;
}

.detail-shell {
    margin-top: 22px;
}

.article-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--zib-line);
    border-radius: 12px;
    background: var(--zib-card);
    box-shadow: var(--zib-shadow);
}

.article-head {
    padding-bottom: 18px;
}

.article-category,
.member-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
    font-size: 12px;
    font-weight: 800;
}

.article-head h1 {
    margin: 0;
    color: #252c3a;
    font-size: 34px;
    line-height: 1.32;
    font-weight: 800;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 16px;
    color: #9097a6;
    font-size: 13px;
}

.article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.article-cover {
    overflow: hidden;
    height: 360px;
    border-radius: 12px;
    background: #dde2ef;
}

.article-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.article-summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    margin: 22px 0;
    padding: 16px;
    border-radius: 10px;
    color: #566074;
    background: rgba(0, 77, 234, .08);
}

.article-summary i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-blue), #3f7bff);
}

.article-summary p {
    margin: 0;
    line-height: 1.75;
}

.article-content {
    color: #3f4756;
    font-size: 15px;
    line-height: 1.9;
}

.article-content h2 {
    scroll-margin-top: 90px;
    margin: 32px 0 14px;
    padding-left: 14px;
    border-left: 3px solid var(--zib-primary);
    color: #252c3a;
    font-size: 20px;
    font-weight: 800;
}

.article-content p {
    margin: 0 0 14px;
}

.article-content ul {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
    padding-left: 20px;
}

.paid-resource-card {
    scroll-margin-top: 90px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 18px;
    align-items: stretch;
    margin: 28px 0;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 77, 234, .14);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 247, 251, .94)),
        var(--zib-card);
    box-shadow: 0 18px 42px rgba(33, 40, 66, .08);
}

.paid-resource-main h2 {
    margin-top: 0;
}

.paid-resource-main p {
    color: var(--zib-muted);
}

.paid-resource-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.paid-resource-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    color: #596170;
    background: rgba(45, 55, 76, .06);
    font-size: 13px;
    font-weight: 800;
}

.paid-resource-meta i {
    color: var(--zib-primary);
}

.paid-resource-buy {
    display: grid;
    gap: 10px;
    align-content: center;
    justify-items: stretch;
    padding: 18px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(0, 77, 234, .1), rgba(0, 77, 234, .08)),
        #fff;
}

.paid-resource-buy span {
    color: var(--zib-muted);
    font-size: 13px;
    font-weight: 800;
}

.paid-resource-buy strong {
    color: var(--zib-primary);
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
}

.paid-resource-buy small {
    font-size: 15px;
}

.paid-resource-buy button,
.paid-resource-buy a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}

.paid-resource-buy button {
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 12px 24px rgba(0, 77, 234, .2);
}

.paid-resource-buy a {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
}

.paid-content-lock,
.paid-content-unlocked {
    margin: 22px 0;
    padding: 18px;
    border-radius: 12px;
}

.paid-content-lock {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 1px dashed rgba(0, 77, 234, .34);
    background: rgba(0, 77, 234, .06);
}

.paid-content-lock>span {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-size: 20px;
}

.paid-content-lock h3,
.paid-content-unlocked h3 {
    margin: 0 0 6px;
    color: #252c3a;
    font-size: 18px;
    font-weight: 800;
}

.paid-content-lock p {
    margin: 0;
    color: var(--zib-muted);
}

.paid-content-unlocked {
    border: 1px solid rgba(53, 201, 135, .22);
    background: rgba(53, 201, 135, .08);
}

.paid-content-unlocked h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.paid-content-unlocked h3 i {
    color: var(--zib-green);
}

.resource-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin: 26px 0;
    padding: 20px;
    border-radius: 12px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(0, 77, 234, .96), rgba(255, 184, 77, .86)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=900&q=78") center/cover;
}

.resource-kicker {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 800;
}

.resource-box h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
}

.resource-box p {
    margin: 0;
    color: rgba(255, 255, 255, .84);
}

.resource-box a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    font-weight: 800;
    white-space: nowrap;
}

.article-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--zib-line);
}

.article-tags,
.article-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.article-tags a,
.article-actions button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 34px;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    color: #596170;
    background: rgba(45, 55, 76, .06);
    font-weight: 800;
}

.article-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.article-neighbor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.article-neighbor-item {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--zib-line);
    border-radius: 10px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.article-neighbor-item:hover {
    border-color: rgba(0, 77, 234, .2);
    box-shadow: 0 14px 30px rgba(33, 40, 66, .08);
    transform: translateY(-2px);
}

.article-neighbor-item span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--zib-primary);
    font-size: 12px;
    font-weight: 800;
}

.article-neighbor-item strong {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 9px;
    color: #252c3a;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 800;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.article-neighbor-item em {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 7px;
    color: var(--zib-muted);
    font-size: 13px;
    line-height: 1.65;
    font-style: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.article-neighbor-item.next {
    text-align: right;
}

.article-related {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--zib-line);
}

.article-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.article-related-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #252c3a;
    font-size: 20px;
    font-weight: 800;
}

.article-related-head h2 i {
    color: var(--zib-primary);
}

.article-related-head a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--zib-muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.article-related-head a:hover {
    color: var(--zib-primary);
}

.article-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.related-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--zib-line);
    border-radius: 10px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.related-card:hover {
    border-color: rgba(0, 77, 234, .2);
    box-shadow: 0 14px 30px rgba(33, 40, 66, .08);
    transform: translateY(-2px);
}

.related-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    object-fit: cover;
    background: #dde2ef;
}

.related-card span {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
    font-size: 12px;
    font-weight: 800;
}

.related-card strong {
    display: -webkit-box;
    overflow: hidden;
    color: #252c3a;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 800;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.related-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--zib-muted);
    line-height: 1.7;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.related-card em {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9097a6;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.author-card,
.comment-card {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--zib-line);
    border-radius: 10px;
    background: #fff;
}

.author-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.author-avatar,
.comment-avatar {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-weight: 800;
}

.author-card h3,
.comment-card h2 {
    margin: 0 0 6px;
    color: #252c3a;
    font-weight: 800;
}

.author-card p {
    margin: 0;
    color: var(--zib-muted);
    line-height: 1.65;
}

.author-card a {
    padding: 8px 13px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-weight: 800;
    white-space: nowrap;
}

.comment-card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
}

.comment-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--zib-line);
}

.comment-avatar {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--zib-blue), #18c7d5);
}

.comment-item strong {
    display: block;
    margin-bottom: 5px;
}

.comment-item p {
    margin: 0;
    color: var(--zib-muted);
    line-height: 1.65;
}

.article-toc a {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid var(--zib-line);
    color: #5d6676;
    font-weight: 800;
    transition: color .2s ease, padding-left .2s ease;
}

.article-toc a:last-child {
    border-bottom: 0;
}

.article-toc a:hover,
.article-toc a.active {
    padding-left: 8px;
    color: var(--zib-primary);
}

.detail-buy-card {
    display: grid;
    gap: 10px;
    border-color: rgba(0, 77, 234, .16);
    background:
        linear-gradient(180deg, rgba(255, 247, 251, .96), rgba(255, 255, 255, .96)),
        var(--zib-card);
}

.detail-buy-card h3 {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 18px;
}

.detail-buy-card p {
    margin: 0;
    color: var(--zib-muted);
    line-height: 1.65;
}

.detail-buy-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-self: start;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
    font-size: 12px;
    font-weight: 800;
}

.detail-buy-price {
    color: var(--zib-primary);
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
}

.detail-buy-price small {
    font-size: 15px;
}

.detail-buy-card button,
.detail-buy-card>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
}

.detail-buy-card button {
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 12px 24px rgba(0, 77, 234, .18);
}

.detail-buy-card>a {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
}

.detail-buy-card.is-paid {
    border-color: rgba(53, 201, 135, .22);
    background:
        linear-gradient(180deg, rgba(246, 255, 250, .96), rgba(255, 255, 255, .96)),
        var(--zib-card);
}

.detail-buy-card.is-paid .detail-buy-badge,
.detail-buy-card.is-paid .detail-buy-price {
    color: var(--zib-green);
}

.article-pay-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .05);
}

.article-pay-summary strong {
    color: #252c3a;
    line-height: 1.45;
}

.article-pay-summary span {
    color: var(--zib-primary);
    font-size: 24px;
    font-weight: 900;
    white-space: nowrap;
}

.member-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 26px;
    align-items: center;
    padding: 36px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(23, 29, 48, .9), rgba(0, 77, 234, .5)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1400&q=82") center/cover;
}

.member-account {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(12px);
}

.member-avatar {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-size: 24px;
}

.member-account h2 {
    margin: 16px 0 8px;
    font-size: 24px;
    font-weight: 800;
}

.member-account p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
}

.member-account-grid {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.member-account-grid span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .78);
    font-weight: 800;
}

.member-account-grid strong {
    color: #fff;
}

.member-account>a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-weight: 800;
}

.member-benefits,
.pricing-section,
.member-dashboard {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto 22px;
}

.member-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.member-benefits article,
.pricing-card {
    padding: 22px;
    border: 1px solid var(--zib-line);
    border-radius: 12px;
    background: var(--zib-card);
    box-shadow: var(--zib-shadow);
}

.member-benefits span {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-blue), #18c7d5);
    font-size: 20px;
}

.member-benefits article:nth-child(2) span {
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
}

.member-benefits article:nth-child(3) span {
    background: linear-gradient(135deg, var(--zib-green), #65dba3);
}

.member-benefits article:nth-child(4) span {
    background: linear-gradient(135deg, var(--zib-yellow), #ffd16f);
}

.member-benefits h3,
.pricing-head h2 {
    margin: 0 0 8px;
    color: #252c3a;
    font-weight: 800;
}

.member-benefits p,
.pricing-head p {
    margin: 0;
    color: var(--zib-muted);
    line-height: 1.7;
}

.pricing-section {
    padding: 22px;
    border: 1px solid var(--zib-line);
    border-radius: 12px;
    background: var(--zib-card);
    box-shadow: var(--zib-shadow);
}

.pricing-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.pricing-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
}

.pricing-head h2 i {
    color: var(--zib-primary);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pricing-card {
    position: relative;
    overflow: hidden;
}

.pricing-card.featured {
    color: #fff;
    background:
        linear-gradient(135deg, rgba(0, 77, 234, .95), rgba(0, 77, 234, .82)),
        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80") center/cover;
}

.recommend {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--zib-primary);
    background: #fff;
    font-size: 12px;
    font-weight: 800;
}

.plan-name {
    color: var(--zib-primary);
    font-weight: 800;
}

.featured .plan-name,
.featured p,
.featured li {
    color: rgba(255, 255, 255, .86);
}

.plan-price {
    margin: 14px 0 10px;
    color: #252c3a;
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
}

.featured .plan-price {
    color: #fff;
}

.plan-price small {
    font-size: 20px;
}

.plan-price span {
    color: var(--zib-muted);
    font-size: 14px;
}

.featured .plan-price span {
    color: rgba(255, 255, 255, .76);
}

.pricing-card p {
    color: var(--zib-muted);
    line-height: 1.7;
}

.pricing-card ul {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
}

.pricing-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #566074;
    font-weight: 800;
}

.pricing-card li i {
    color: var(--zib-green);
}

.featured li i {
    color: #fff;
}

.pricing-card>a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-weight: 800;
}

.featured>a {
    color: var(--zib-primary);
    background: #fff;
}

.member-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    gap: 18px;
}

.member-dashboard-single {
    grid-template-columns: 1fr;
}

.order-list,
.faq-list {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.order-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
}

.order-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    line-height: 1;
}

.order-icon i {
    display: block;
    line-height: 1;
}

.order-item strong,
.order-item span {
    display: block;
}

.order-item span {
    margin-top: 4px;
    color: var(--zib-muted);
    font-size: 13px;
}

.order-item em {
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
    font-style: normal;
    font-weight: 800;
}

.faq-list details {
    padding: 14px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
}

.faq-list summary {
    cursor: pointer;
    color: #343b49;
    font-weight: 800;
}

.faq-list p {
    margin: 10px 0 0;
    color: var(--zib-muted);
    line-height: 1.7;
}

@media (max-width: 1100px) {
    .hero {
        height: auto;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hero-panel,
    .hero-swiper,
    .hero-swiper .swiper-wrapper,
    .hero-swiper .swiper-slide,
    .hero-slide {
        min-height: 430px;
        height: 430px !important;
    }

    .hero-card-grid {
        grid-template-rows: none;
    }

    .mini-card,
    .mini-card.wide {
        min-height: 176px;
    }

    .content-shell {
        grid-template-columns: 1fr;
    }

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

    .notice {
        grid-column: 1 / -1;
    }

    .search-panel {
        grid-template-columns: 1fr;
    }

    .division-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dynamic-viewport {
        height: 220px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .page-hero,
    .member-hero,
    .member-dashboard {
        grid-template-columns: 1fr;
    }

    .member-benefits,
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .nav-shell {
        height: auto;
        min-height: 58px;
        flex-wrap: wrap;
        padding: 10px 0;
    }

    .menu-btn {
        display: inline-flex;
    }

    .main-nav {
        order: 9;
        width: 100%;
        display: none;
        padding: 4px 0 2px;
        overflow-x: auto;
    }

    .main-nav.is-open {
        display: flex;
    }

    .nav-item {
        flex: 0 0 auto;
    }

    .nav-dropdown {
        position: static;
        min-width: 150px;
        margin-top: 6px;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(45, 55, 76, .045);
    }

    .nav-dropdown::before {
        display: none;
    }

    .nav-actions {
        margin-left: auto;
    }

    .nav-user-menu {
        right: 0;
    }

    .stat-row,
    .feature-band {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-hero {
        grid-template-columns: 1fr;
    }

    .category-cards {
        grid-template-columns: 1fr;
    }

    .search-form {
        border-radius: 12px;
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .search-form button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 680px) {

    .nav-shell,
    .owl-dynamic,
    .hero,
    .stat-row,
    .search-bg,
    .division,
    .dynamic,
    .content-shell,
    .category-cards,
    .footer-inner,
    .footer-bottom,
    .feature-band {
        width: min(100% - 24px, 1200px);
    }

    .page-hero,
    .member-hero,
    .page-breadcrumb,
    .member-benefits,
    .pricing-section,
    .member-dashboard {
        width: min(100% - 24px, 1200px);
    }

    .brand {
        min-width: auto;
    }

    .brand-name span,
    .nav-user-text {
        display: none;
    }

    .nav-avatar {
        width: 38px;
        min-height: 38px;
        padding: 2px;
    }

    .nav-avatar>i {
        display: none;
    }

    .nav-user-menu {
        width: min(238px, calc(100vw - 24px));
    }

    .owl-dynamic {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        padding: 0 12px;
    }

    .owl-dynamic-more {
        display: none;
    }

    .hero-panel {
        min-height: 460px;
        height: 460px !important;
    }

    .hero-swiper,
    .hero-swiper .swiper-wrapper,
    .hero-swiper .swiper-slide,
    .hero-slide {
        min-height: 460px;
        height: 460px !important;
    }

    .hero-slide {
        align-items: flex-end;
        padding: 28px 22px 64px;
    }

    .hero-swiper .swiper-pagination {
        left: 22px;
        bottom: 20px;
    }

    .hero-arrow {
        display: none;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero p {
        font-size: 14px;
        line-height: 1.72;
    }

    .hero-actions {
        margin-top: 22px;
    }

    .hero-actions a {
        min-height: 40px;
        padding: 0 15px;
        font-size: 13px;
    }

    .hero-card-grid,
    .stat-row,
    .division-grid,
    .category-cards,
    .category-post-grid,
    .member-benefits,
    .pricing-grid,
    .footer-links,
    .feature-band,
    .sidebar {
        grid-template-columns: 1fr;
    }

    .page-hero,
    .member-hero,
    .article-card,
    .pricing-section {
        padding: 18px;
    }

    .page-hero h1,
    .member-hero h1 {
        font-size: 30px;
    }

    .article-head h1 {
        font-size: 26px;
    }

    .article-cover {
        height: 220px;
    }

    .resource-box,
    .paid-resource-card,
    .article-neighbor,
    .article-related-grid,
    .article-footer,
    .author-card,
    .pricing-head,
    .order-item {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .paid-resource-buy {
        width: 100%;
    }

    .paid-content-lock {
        grid-template-columns: 1fr;
    }

    .article-pay-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .article-footer,
    .article-related-head,
    .pricing-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-neighbor-item.next {
        text-align: left;
    }

    .category-posts-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .category-post-cover {
        height: 160px;
    }

    .dynamic-viewport {
        height: 210px;
    }

    .search-panel,
    .division,
    .dynamic {
        padding: 18px;
    }

    .search-copy h2,
    .division-head h2,
    .dynamic-head h2 {
        font-size: 20px;
    }

    .division-head,
    .dynamic-head,
    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .mini-card.wide {
        grid-column: auto;
    }

    .section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .post-item {
        grid-template-columns: 1fr;
        height: auto;
    }

    .post-thumb {
        height: 190px;
    }

    .notice-dialog-head {
        padding: 24px 22px 16px;
    }

    .notice-dialog-body {
        padding: 0 22px 20px;
    }

    .notice-dialog-actions {
        flex-direction: column-reverse;
        padding: 16px 22px 22px;
    }

    .notice-dialog-actions button {
        width: 100%;
    }

    .vip-pay-head {
        padding: 22px 20px 14px;
    }

    .vip-pay-body {
        padding: 0 20px 20px;
    }

    .vip-plan-options,
    .vip-method-options {
        grid-template-columns: 1fr;
    }

    .vip-pay-actions {
        padding: 14px 20px 20px;
        flex-direction: column;
    }

    .vip-pay-actions button {
        width: 100%;
    }

    .vip-toast {
        right: 16px;
        left: 16px;
        top: 74px;
        justify-content: center;
    }
}

.auth-shell,
.user-hero,
.user-stat-grid,
.user-center-shell {
    width: min(1200px, calc(100% - 32px));
    margin: 22px auto;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 22px;
    align-items: stretch;
}

.auth-shell-reverse {
    grid-template-columns: minmax(0, 1fr) 420px;
}

.auth-shell-reverse .auth-copy {
    grid-column: 1;
    grid-row: 1;
}

.auth-shell-reverse .auth-card {
    grid-column: 2;
    grid-row: 1;
}

.auth-copy,
.auth-card,
.user-hero,
.user-stat-grid article,
.user-sidebar,
.user-main .section-card {
    border: 1px solid var(--zib-line);
    border-radius: 12px;
    background: var(--zib-card);
    box-shadow: var(--zib-shadow);
}

.auth-copy {
    min-height: 520px;
    padding: 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(23, 29, 48, .9), rgba(0, 77, 234, .48)),
        url("https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1400&q=82") center/cover;
}

.auth-shell-reverse .auth-copy {
    background:
        linear-gradient(135deg, rgba(23, 29, 48, .9), rgba(0, 77, 234, .46)),
        url("https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1400&q=82") center/cover;
}

.auth-copy h1 {
    margin: 0;
    max-width: 640px;
    font-size: 42px;
    line-height: 1.22;
    font-weight: 800;
}

.auth-copy p {
    max-width: 620px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .84);
    font-size: 16px;
    line-height: 1.8;
}

.auth-point-list,
.auth-stat-grid {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.auth-point-list span,
.auth-stat-grid span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .86);
    background: rgba(255, 255, 255, .14);
    font-weight: 800;
}

.auth-point-list i {
    color: #75f0b6;
}

.auth-stat-grid {
    grid-template-columns: repeat(3, 1fr);
}

.auth-stat-grid span {
    flex-direction: column;
    align-items: flex-start;
}

.auth-stat-grid strong {
    color: #fff;
    font-size: 26px;
}

.auth-card {
    min-height: 520px;
    padding: 26px;
    align-self: center;
}

.auth-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.auth-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-size: 24px;
}

.auth-card h2 {
    margin: 0 0 6px;
    color: #252c3a;
    font-size: 24px;
    font-weight: 800;
}

.auth-card p {
    margin: 0;
    color: var(--zib-muted);
}

.auth-form {
    display: grid;
    gap: 16px;
}

.auth-form label {
    display: grid;
    gap: 8px;
    margin: 0;
    color: #4d5564;
    font-weight: 800;
}

.form-control-icon {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--zib-line);
    border-radius: 10px;
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.form-control-icon:focus-within {
    border-color: rgba(0, 77, 234, .38);
    box-shadow: 0 0 0 4px rgba(0, 77, 234, .1);
}

.form-control-icon i {
    color: #9aa1ad;
    text-align: center;
}

.form-control-icon input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: none;
    color: #303746;
    background: transparent;
    font: inherit;
}

.form-control-icon input::placeholder {
    color: #a6adbb;
}

.auth-code-control {
    grid-template-columns: 22px minmax(0, 1fr) 118px;
}

.auth-code-btn {
    width: 118px;
    min-width: 0;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 8px 18px rgba(0, 77, 234, .18);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.auth-code-btn:hover,
.auth-code-btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 77, 234, .24);
}

.auth-code-btn:disabled {
    cursor: not-allowed;
    opacity: .62;
    transform: none;
    box-shadow: none;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 2px 2px 2px 0;
    color: var(--zib-muted);
    font-size: 13px;
}

.auth-row a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--zib-primary);
    font-weight: 800;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease;
}

.auth-row a:hover,
.auth-row a:focus {
    background: rgba(0, 77, 234, .08);
}

.auth-switch a {
    color: var(--zib-primary);
    font-weight: 800;
}

.check-line {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 9px !important;
    min-height: 34px;
    padding: 0 10px 0 4px;
    border-radius: 999px;
    color: #596170 !important;
    font-size: 13px;
    font-weight: 800 !important;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.check-line:hover,
.check-line:focus-within {
    color: var(--zib-primary) !important;
    background: rgba(0, 77, 234, .08);
}

.check-line input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--zib-primary);
    cursor: pointer;
    flex: 0 0 auto;
}

.auth-submit {
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    box-shadow: 0 12px 24px rgba(0, 77, 234, .22);
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.auth-submit:hover,
.auth-submit:focus {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0, 77, 234, .28);
}

.auth-submit[data-loading="1"],
.auth-submit:disabled {
    cursor: wait;
    opacity: .76;
    transform: none;
    box-shadow: 0 8px 18px rgba(0, 77, 234, .16);
}

.auth-switch {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--zib-line);
    color: var(--zib-muted);
    text-align: center;
    font-weight: 700;
}

.user-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 30px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(23, 29, 48, .9), rgba(24, 199, 213, .45)),
        url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1400&q=82") center/cover;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.user-avatar {
    width: 86px;
    height: 86px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .42), transparent 26%),
        linear-gradient(135deg, var(--zib-primary), var(--zib-blue));
    box-shadow: 0 18px 34px rgba(18, 25, 42, .22);
    font-size: 34px;
}

.user-hero h1 {
    margin: 0;
    font-size: 40px;
    font-weight: 800;
}

.user-hero p {
    max-width: 620px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .82);
    line-height: 1.75;
}

.user-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.user-profile-badges span {
    display: inline-grid;
    grid-template-columns: 18px auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    min-width: 122px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(10px);
}

.user-profile-badges i {
    grid-row: 1 / 3;
    align-self: center;
    color: #fff;
    opacity: .9;
}

.user-profile-badges strong {
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.1;
}

.user-profile-badges em {
    margin-top: 3px;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.1;
}

.user-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.user-quick-actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
}

.user-quick-actions .primary {
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
}

.user-quick-actions .ghost {
    border: 1px solid rgba(255, 255, 255, .36);
    background: rgba(255, 255, 255, .14);
}

.user-stat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.user-overview-panel {
    position: relative;
    display: grid;
    gap: 18px;
    padding: 22px;
    overflow: hidden;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgba(20, 184, 166, .18), transparent 34%),
        linear-gradient(135deg, #0f766e, #14532d);
    box-shadow: 0 18px 36px rgba(15, 118, 110, .18);
}

.user-overview-panel::after {
    content: "";
    position: absolute;
    right: -52px;
    bottom: -58px;
    width: 170px;
    height: 170px;
    border: 32px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
}

.user-overview-head {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
}

.user-overview-head h2 {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.25;
}

.user-overview-head p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    line-height: 1.8;
}

.user-overview-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.user-overview-stats article {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

.user-overview-stats article span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 18px;
}

.user-overview-stats article strong {
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    word-break: break-word;
}

.user-overview-stats article p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.6;
}

.user-overview-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.user-overview-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.user-overview-chip strong {
    font-weight: 900;
}

.user-stat-summary,
.user-stat-cards,
.user-vip-panel {
    display: none;
}

.user-vip-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.user-vip-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-size: 22px;
}

.user-vip-info h2 {
    margin: 0 0 6px;
    color: #252c3a;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
}

.user-vip-info p {
    margin: 0;
    color: var(--zib-muted);
    font-weight: 700;
}

.user-vip-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, auto));
    gap: 10px;
}

.user-vip-status span {
    display: grid;
    gap: 4px;
    min-height: 54px;
    padding: 9px 14px;
    border-radius: 10px;
    background: #fff;
    color: var(--zib-muted);
    font-size: 12px;
    font-weight: 800;
}

.user-vip-status strong {
    color: #252c3a;
    font-size: 16px;
}

.user-center-shell {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
}

.user-sidebar {
    padding: 12px;
    align-self: start;
}

.user-sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin-bottom: 3px;
    padding: 0 13px;
    border-radius: 10px;
    color: #596170;
    font-weight: 800;
}

.user-sidebar a i {
    width: 16px;
    color: #9aa1ad;
    text-align: center;
}

.user-sidebar a:hover,
.user-sidebar a.active {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
}

.user-sidebar a:hover i,
.user-sidebar a.active i {
    color: var(--zib-primary);
}

.user-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.user-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--zib-line);
}

.user-page-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.user-page-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    color: #596170;
    background: rgba(45, 55, 76, .06);
    font-weight: 800;
}

.user-page-tabs a.active,
.user-page-tabs a:hover {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
}

.user-page-search {
    display: grid;
    grid-template-columns: 18px minmax(0, 180px);
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--zib-line);
    border-radius: 999px;
    background: #fff;
    color: #9aa1ad;
}

.user-page-search input {
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #303746;
    font: inherit;
}

.download-list,
.account-form,
.favorite-grid {
    padding: 16px;
}

.download-list {
    display: grid;
    gap: 12px;
}

.download-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
}

.download-item .order-icon {
    background: linear-gradient(135deg, var(--zib-green), #65dba3);
}

.download-item strong,
.download-item span {
    display: block;
}

.download-item span {
    margin-top: 4px;
    color: var(--zib-muted);
    font-size: 13px;
}

.download-item a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-weight: 800;
    white-space: nowrap;
}

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

.favorite-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
}

.favorite-card h3 {
    margin: 0;
    color: #252c3a;
    font-size: 17px;
    font-weight: 800;
}

.favorite-card p {
    margin: 0;
    color: var(--zib-muted);
    line-height: 1.7;
}

.favorite-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--zib-muted);
    font-size: 13px;
    font-weight: 700;
}

.favorite-card a {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .09);
    font-weight: 800;
}

.account-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-form label {
    display: grid;
    gap: 8px;
    margin: 0;
    color: #4d5564;
    font-weight: 800;
}

.account-form label.wide {
    grid-column: 1 / -1;
}

.account-form input,
.account-form textarea,
.account-form select {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--zib-line);
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #303746;
    font: inherit;
}

.account-form textarea {
    min-height: 96px;
    padding: 12px 13px;
    resize: vertical;
}

.account-form input:focus,
.account-form textarea:focus,
.account-form select:focus {
    border-color: rgba(0, 77, 234, .38);
    box-shadow: 0 0 0 4px rgba(0, 77, 234, .1);
}

.account-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.account-actions button,
.account-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 800;
}

.account-actions button {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
}

.account-actions a {
    color: #596170;
    background: rgba(45, 55, 76, .06);
}

.user-timeline {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.user-timeline span {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
}

.user-timeline i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-blue), #18c7d5);
}

.user-timeline strong {
    color: #343b49;
}

.user-timeline em {
    color: var(--zib-muted);
    font-style: normal;
    font-size: 13px;
    white-space: nowrap;
}

@media (max-width: 1100px) {

    .auth-shell,
    .auth-shell-reverse,
    .user-center-shell {
        grid-template-columns: 1fr;
    }

    .auth-copy {
        min-height: 360px;
    }

    .user-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {

    .auth-shell,
    .user-hero,
    .user-stat-grid,
    .user-vip-panel,
    .user-center-shell {
        width: min(100% - 24px, 1200px);
    }

    .nav-link-btn {
        display: none;
    }

    .auth-copy,
    .auth-card,
    .user-hero {
        padding: 18px;
    }

    .auth-copy h1,
    .user-hero h1 {
        font-size: 30px;
    }

    .auth-stat-grid,
    .user-stat-grid {
        grid-template-columns: 1fr;
    }

    .user-hero,
    .user-profile {
        align-items: flex-start;
        flex-direction: column;
    }

    .user-vip-panel,
    .user-vip-info,
    .user-vip-status {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .user-vip-info {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .user-sidebar {
        overflow-x: auto;
        display: flex;
        gap: 8px;
    }

    .user-sidebar a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .user-timeline span {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .user-timeline em {
        grid-column: 2;
    }

    .user-page-toolbar,
    .download-item {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .user-page-search {
        width: 100%;
        grid-template-columns: 18px minmax(0, 1fr);
    }

    .favorite-grid,
    .account-form {
        grid-template-columns: 1fr;
    }
}

.mobile-drawer {
    display: none;
}

@media (max-width: 680px) {
    body {
        background: #f6f7fb;
        font-size: 13px;
    }

    body.drawer-open {
        overflow: hidden;
    }

    .page-wrap {
        overflow: visible;
    }

    .site-header {
        box-shadow: 0 6px 18px rgba(31, 38, 62, .06);
    }

    .nav-shell {
        width: calc(100% - 20px);
        min-height: 54px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 8px 0;
        align-items: center;
    }

    .nav-actions {
        display: flex;
        flex: 0 0 auto;
        grid-column: 2;
        grid-row: 1;
        margin-left: auto;
    }

    .main-nav {
        display: none !important;
    }

    .brand-mark,
    .nav-avatar-img {
        width: 32px;
        height: 32px;
    }

    .brand-name strong {
        font-size: 16px;
    }

    .icon-btn,
    .menu-btn {
        width: 32px;
        height: 32px;
    }

    .nav-actions .nav-user-card {
        display: none;
    }

    .menu-btn {
        display: inline-flex;
    }

    .main-nav>a,
    .nav-item>a {
        min-height: 32px;
        padding: 0 10px;
        background: rgba(45, 55, 76, .045);
        font-size: 12px;
    }

    .main-nav.is-open {
        display: none;
    }

    .mobile-drawer {
        position: fixed;
        inset: 0;
        z-index: 999;
        display: block;
        pointer-events: none;
        visibility: hidden;
    }

    .mobile-drawer.is-open {
        pointer-events: auto;
        visibility: visible;
    }

    .mobile-drawer-mask {
        position: absolute;
        inset: 0;
        background: rgba(16, 22, 36, .42);
        opacity: 0;
        transition: opacity .22s ease;
    }

    .mobile-drawer.is-open .mobile-drawer-mask {
        opacity: 1;
    }

    .mobile-drawer-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: min(84vw, 330px);
        height: 100%;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) 152px;
        overflow: hidden;
        background: #fff;
        box-shadow: 20px 0 44px rgba(18, 25, 42, .18);
        transform: translateX(-105%);
        transition: transform .24s ease;
    }

    .mobile-drawer.is-open .mobile-drawer-panel {
        transform: translateX(0);
    }

    .mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 58px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--zib-line);
    }

    .mobile-drawer-close {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border: 0;
        border-radius: 50%;
        color: #4c5361;
        background: rgba(45, 55, 76, .06);
    }

    .mobile-drawer-account {
        height: 152px;
        padding: 12px;
        border-top: 1px solid var(--zib-line);
        background:
            linear-gradient(135deg, rgba(0, 77, 234, .08), rgba(24, 199, 213, .08)),
            #fff;
    }

    .mobile-user-card {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
    }

    .mobile-user-card strong,
    .mobile-user-card em,
    .mobile-auth-card strong,
    .mobile-auth-card p {
        display: block;
    }

    .mobile-user-card strong,
    .mobile-auth-card strong {
        color: #252c3a;
        font-size: 15px;
        font-weight: 900;
    }

    .mobile-user-card em,
    .mobile-auth-card p {
        margin-top: 3px;
        color: var(--zib-muted);
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.35;
    }

    .mobile-user-actions,
    .mobile-auth-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 10px;
    }

    .mobile-user-actions a,
    .mobile-user-actions button,
    .mobile-auth-actions a {
        min-width: 0;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 8px;
        border: 0;
        border-radius: 8px;
        color: #596170;
        background: rgba(45, 55, 76, .06);
        font-size: 16px;
        font-weight: 800;
    }

    .mobile-auth-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    .mobile-auth-actions a {
        font-size: 12px;
    }

    .mobile-auth-actions .primary {
        color: #fff;
        background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    }

    .mobile-user-actions button {
        color: var(--zib-primary);
        background: rgba(0, 77, 234, .09);
    }

    .mobile-drawer-scroll {
        min-height: 0;
        overflow-y: auto;
        padding: 10px 12px 14px;
    }

    .mobile-drawer-menu {
        display: grid;
        gap: 8px;
    }

    .mobile-drawer-item {
        border: 1px solid var(--zib-line);
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
    }

    .mobile-drawer-item>a,
    .mobile-drawer-submenu a {
        min-height: 42px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        color: #343b49;
        font-size: 14px;
        font-weight: 900;
    }

    .mobile-drawer-item>a i,
    .mobile-drawer-submenu a i {
        width: 16px;
        color: var(--zib-primary);
        text-align: center;
    }

    .mobile-drawer-submenu {
        display: grid;
        gap: 2px;
        padding: 0 8px 8px 34px;
    }

    .mobile-drawer-submenu a {
        min-height: 34px;
        padding: 0 10px;
        border-radius: 8px;
        color: #687083;
        background: rgba(45, 55, 76, .045);
        font-size: 12px;
        font-weight: 800;
    }

    .nav-dropdown,
    .nav-badge,
    .owl-dynamic,
    .notice-modal,
    .breadcrumb-line,
    .hero-card-grid,
    .stat-row,
    .dynamic,
    .feature-band,
    .sidebar,
    .page-hero-stats,
    .article-summary,
    .article-neighbor,
    .article-related,
    .auth-copy,
    .user-profile-badges,
    .user-stat-grid,
    .member-benefits,
    .footer-links,
    .footer-brand p {
        display: none !important;
    }

    .hero,
    .search-bg,
    .division,
    .content-shell,
    .category-cards,
    .category-posts,
    .page-hero,
    .member-hero,
    .pricing-section,
    .member-dashboard,
    .auth-shell,
    .user-hero,
    .user-vip-panel,
    .user-center-shell,
    .site-footer .footer-inner,
    .site-footer .footer-bottom {
        width: calc(100% - 20px);
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .hero {
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        box-shadow: none;
    }

    .hero-panel,
    .hero-swiper,
    .hero-swiper .swiper-wrapper,
    .hero-swiper .swiper-slide,
    .hero-slide {
        min-height: 300px;
        height: 300px !important;
    }

    .hero-slide {
        padding: 22px 18px 48px;
    }

    .eyebrow {
        margin-bottom: 10px;
        padding: 6px 10px;
        font-size: 11px;
    }

    .hero h1 {
        margin-bottom: 10px;
        font-size: 26px;
        line-height: 1.18;
    }

    .hero p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .hero-actions {
        gap: 8px;
        margin-top: 16px;
    }

    .hero-actions a,
    .page-hero-actions a,
    .member-hero-actions a,
    .user-quick-actions a {
        min-height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }

    .search-panel,
    .division,
    .page-hero,
    .member-hero,
    .article-card,
    .pricing-section,
    .auth-card,
    .user-hero,
    .user-vip-panel,
    .user-main .section-card {
        padding: 14px;
        border-radius: 10px;
    }

    .search-copy p,
    .division-head a,
    .page-hero p,
    .member-hero p,
    .category-post-body p,
    .favorite-card p,
    .auth-card p,
    .user-hero p,
    .user-vip-info p,
    .paid-resource-main p,
    .related-card p {
        display: none;
    }

    .search-copy h2,
    .division-head h2,
    .section-head h2,
    .category-posts-head h2,
    .page-hero h1,
    .member-hero h1,
    .article-head h1 {
        font-size: 22px;
        line-height: 1.28;
    }

    .search-form {
        margin-top: 12px;
    }

    .search-bg {
        background: transparent;
        box-shadow: none;
    }

    .search-panel {
        display: block;
        min-height: auto;
        padding: 0;
    }

    .search-copy {
        display: none;
    }

    .search-form {
        margin-top: 0;
        border-color: var(--zib-line);
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--zib-shadow);
    }

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

    .division-item,
    .category-card,
    .category-post-card,
    .post-item,
    .favorite-card,
    .download-item,
    .order-item,
    .user-timeline span {
        padding: 12px;
        border-radius: 8px;
    }

    .division-icon,
    .category-card-icon,
    .order-icon,
    .user-vip-icon,
    .auth-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .content-shell {
        display: block;
    }

    .article-cover,
    .category-post-cover,
    .post-thumb {
        height: 150px;
        border-radius: 8px;
    }

    .article-meta,
    .category-post-meta,
    .favorite-meta {
        gap: 8px;
        font-size: 12px;
    }

    .article-meta span:nth-child(n+3),
    .category-post-meta span:nth-child(n+3),
    .favorite-meta span:nth-child(n+3),
    .order-item span,
    .download-item span,
    .user-timeline em {
        display: none;
    }

    .article-content h2 {
        margin-top: 22px;
        font-size: 20px;
    }

    .article-content p,
    .article-content li {
        line-height: 1.75;
    }

    .paid-resource-card,
    .resource-box,
    .article-footer,
    .pricing-head,
    .order-item,
    .download-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .paid-resource-meta,
    .article-tags,
    .article-actions,
    .account-actions {
        gap: 8px;
    }

    .article-actions button,
    .paid-resource-buy button,
    .paid-resource-buy a,
    .download-item a,
    .favorite-card a,
    .account-actions button,
    .account-actions a {
        width: 100%;
        justify-content: center;
    }

    .user-page-tabs a,
    .user-sidebar a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .category-post-grid,
    .favorite-grid,
    .account-form,
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pricing-card {
        padding: 16px;
    }

    .member-account {
        padding: 14px;
    }

    .member-account-grid,
    .user-vip-status {
        grid-template-columns: 1fr 1fr;
    }

    .auth-shell,
    .auth-shell-reverse {
        display: block;
    }

    .auth-card {
        min-height: auto;
    }

    .auth-card-head {
        margin-bottom: 16px;
    }

    .auth-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .auth-code-control {
        grid-template-columns: 22px minmax(0, 1fr);
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .auth-code-control .auth-code-btn {
        grid-column: 2;
        width: 100%;
    }

    .user-avatar {
        width: 62px;
        height: 62px;
        font-size: 24px;
    }

    .user-hero h1 {
        font-size: 24px;
    }

    .user-quick-actions,
    .user-page-toolbar {
        width: 100%;
    }

    .user-sidebar {
        margin-bottom: 10px;
        padding: 8px;
        border-radius: 10px;
        box-shadow: none;
    }

    .user-page-toolbar {
        padding: 12px;
    }

    .download-list,
    .favorite-grid,
    .account-form,
    .user-timeline,
    .order-list {
        padding: 12px;
    }

    .site-footer {
        margin-top: 18px;
        padding: 14px 0 10px;
    }

    .footer-inner {
        display: block;
    }

    .footer-brand .brand {
        justify-content: center;
    }

    .footer-bottom {
        align-items: center;
        gap: 6px;
        padding-top: 10px;
        text-align: center;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .main-nav.is-open {
        grid-template-columns: repeat(3, max-content);
    }

    .division-grid,
    .member-account-grid,
    .user-vip-status {
        grid-template-columns: 1fr;
    }

    .hero h1,
    .page-hero h1,
    .member-hero h1,
    .article-head h1 {
        font-size: 20px;
    }
}

.search-page-hero {
    align-items: center;
}

.search-page-form {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    max-width: 660px;
    margin-top: 24px;
    padding: 9px 10px 9px 16px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 36px rgba(33, 40, 66, .1);
}

.search-page-form i {
    color: var(--zib-primary);
    font-size: 16px;
    text-align: center;
}

.search-page-form input {
    min-width: 0;
    height: 42px;
    border: 0;
    outline: 0;
    color: #2f3640;
    background: transparent;
    font-size: 15px;
    font-weight: 800;
}

.search-page-form input::placeholder {
    color: #a0a7b4;
}

.search-page-form button {
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(0, 77, 234, .22);
}

.search-hot-words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.search-hot-words a {
    padding: 6px 12px;
    border-radius: 999px;
    color: #596174;
    background: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 800;
}

.search-hot-words a:hover {
    color: var(--zib-primary);
    background: #fff;
}

.search-filter {
    margin-bottom: 18px;
}

.search-result-head span {
    color: var(--zib-muted);
    font-size: 13px;
    font-weight: 800;
}

.search-result-head strong {
    color: var(--zib-primary);
}

.search-result-list {
    padding-top: 10px;
}

.search-side-filter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.search-side-filter a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #687185;
    background: rgba(45, 55, 76, .055);
    font-weight: 800;
}

.search-side-filter a:hover,
.search-side-filter a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
}

.search-trend-list {
    display: grid;
    gap: 10px;
}

.search-trend-list a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
}

.search-trend-list a:hover {
    background: #fff;
}

.search-trend-list span {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-blue), #3f7bff);
    font-weight: 900;
}

.search-trend-list a:nth-child(1) span {
    background: linear-gradient(135deg, #ff5f6d, var(--zib-primary));
}

.search-trend-list a:nth-child(2) span {
    background: linear-gradient(135deg, #ff9f43, #ffcc5c);
}

.search-trend-list a:nth-child(3) span {
    background: linear-gradient(135deg, var(--zib-green), #18c7d5);
}

.search-trend-list strong {
    min-width: 0;
    overflow: hidden;
    color: #303746;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-trend-list em {
    color: #9aa1ad;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

@media (max-width: 680px) {
    .search-page-form {
        grid-template-columns: 24px minmax(0, 1fr);
        margin-top: 18px;
        border-radius: 12px;
    }

    .search-page-form button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .search-hot-words {
        gap: 7px;
    }

    .search-side-filter {
        grid-template-columns: 1fr;
    }

    .search-result-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ===== API 管理系统专用样式 ===== */

/* API Hero 面板 */
.api-hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.api-hero-content h1 {
    margin: 0 0 18px;
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: 0;
}

.api-hero-content p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    line-height: 1.82;
    text-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}

/* 统计卡片增强 */
.mini-card .stat-value {
    font-size: 28px;
    font-weight: 900;
    margin: 8px 0 0;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.mini-card .stat-value.balance {
    color: var(--zib-primary);
}

.mini-card .stat-value.api-count {
    color: var(--zib-blue);
}

.mini-card .stat-value.calls {
    color: #fff;
}

.mini-card .stat-value.keys {
    color: #fff;
}

.mini-card .stat-label {
    color: var(--zib-muted);
    font-size: 13px;
    font-weight: 600;
}

.mini-card.wide .stat-label {
    color: rgba(255, 255, 255, .78);
}

/* API 卡片增强 */
.api-card-item {
    position: relative;
    display: flex;
    flex-direction: column;
}

.api-card-item .api-card-body {
    flex: 1;
}

.api-card-item .api-card-footer {
    margin-top: auto;
}

.api-card-item .api-method-badge {
    font-size: 10px;
    letter-spacing: .8px;
    padding: 3px 8px;
    border-radius: 3px;
}

/* 分类图标配色 */
.division-icon.wechat {
    background: linear-gradient(135deg, #07c160, #2ae088);
}

.division-icon.shield {
    background: linear-gradient(135deg, var(--zib-blue), #3f7bff);
}

.division-icon.cube {
    background: linear-gradient(135deg, var(--zib-green), #65dba3);
}

.division-icon.message {
    background: linear-gradient(135deg, var(--zib-yellow), #ffd16f);
}

/* 系统公告增强 */
.widget.notice h3 i {
    background: linear-gradient(135deg, #ff9f43, #ffcc5c);
}

.widget.notice a {
    transition: all .2s;
}

.widget.notice a:hover {
    background: rgba(255, 255, 255, .28);
    transform: translateX(2px);
}

/* 侧边栏卡片悬浮效果增强 */
.widget {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.widget:hover {
    border-color: rgba(0, 77, 234, .12);
    box-shadow: 0 18px 40px rgba(33, 40, 66, .09);
}

/* Hero Panel API 背景 */
.hero-panel-api {
    background: linear-gradient(135deg, rgba(23, 29, 48, .92), rgba(0, 77, 234, .55)), url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=1300&q=82') center/cover;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 44px 56px;
}

/* 统计卡片双列布局 */
.mini-card-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    height: 100%;
}

/* Section 徽标 */
.section-badge {
    color: var(--zib-muted);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* 首页间距优化 */
main>.owl-dynamic {
    margin-bottom: 0;
}

main>.search-bg {
    margin-top: 14px;
    margin-bottom: 18px;
}

main>.content-shell {
    margin-top: 0;
}

@media (max-width: 680px) {
    .section-badge {
        display: none;
    }
}

/* Toast 提示 */
/* User order list */
#page-orders .section-card {
    overflow: hidden;
}

#page-orders .order-list {
    gap: 10px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(247, 249, 252, .72), rgba(255, 255, 255, .94));
}

#page-orders .order-list.is-loading {
    opacity: .68;
    pointer-events: none;
}

#page-orders .order-item {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 82px;
    padding: 14px 16px;
    border: 1px solid rgba(228, 233, 242, .95);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(31, 36, 48, .045);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#page-orders .order-item:hover {
    border-color: rgba(0, 77, 234, .24);
    box-shadow: 0 16px 32px rgba(31, 36, 48, .07);
    transform: translateY(-1px);
}

#page-orders .order-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 46px;
    height: 46px;
    margin-top: 0;
    border-radius: 8px;
    color: var(--zib-primary);
    background: linear-gradient(135deg, rgba(0, 77, 234, .14), rgba(63, 123, 255, .2));
    box-shadow: 0 10px 20px rgba(0, 77, 234, .12);
    line-height: 1;
}

#page-orders .order-icon i {
    display: block;
    color: inherit;
    line-height: 1;
}

#page-orders .order-title {
    margin-bottom: 8px;
    color: #1f2430;
    font-size: 15px;
    line-height: 1.35;
}

#page-orders .order-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    color: #667085;
    font-size: 12px;
}

#page-orders .order-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: inherit;
    font-size: inherit;
}

#page-orders .order-meta-id {
    max-width: 260px;
    overflow: hidden;
    color: #344054;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-orders .order-actions {
    min-width: 218px;
    gap: 7px;
}

#page-orders .order-status {
    min-width: 62px;
    border-radius: 999px;
    text-align: center;
}

#page-orders .order-actions button {
    min-width: 54px;
    min-height: 32px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}

#page-orders .order-actions button:hover {
    transform: translateY(-1px);
}

.order-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 18px 18px;
    background: #fff;
}

.order-pagination button {
    min-width: 34px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--zib-line);
    border-radius: 8px;
    color: #344054;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.order-pagination button:hover:not(:disabled),
.order-pagination button.is-active {
    border-color: #004dea;
    color: #fff;
    background: #004dea;
}

.order-pagination button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.order-page-ellipsis {
    color: #98a2b3;
    font-weight: 800;
}

@media (max-width: 760px) {
    #page-orders .order-item {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 13px;
    }

    #page-orders .order-icon {
        display: inline-flex;
        width: 42px;
        height: 42px;
    }

    #page-orders .order-actions {
        grid-column: 1 / -1;
        min-width: 0;
        justify-content: flex-start;
    }

    #page-orders .order-meta,
    #page-orders .order-meta span {
        display: inline-flex;
    }

    #page-orders .order-meta-id {
        max-width: 100%;
        white-space: normal;
    }

    .order-pagination {
        justify-content: center;
        padding: 0 12px 14px;
    }
}

.api-toast {
    position: fixed;
    left: 50%;
    top: 86px;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 16px 36px rgba(18, 25, 42, .18);
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -10px);
    transition: opacity .25s ease, transform .25s ease;
}

.api-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* API 卡片网格 */
.api-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.api-card-item {
    padding: 18px;
    border: 1px solid var(--zib-line);
    border-radius: 10px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.api-card-item[role="link"] {
    cursor: pointer;
}

.api-card-item[role="link"]:focus-visible {
    outline: 3px solid rgba(0, 77, 234, .28);
    outline-offset: 2px;
}

.api-card-item:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 77, 234, .18);
    box-shadow: 0 14px 32px rgba(33, 40, 66, .08);
}

.api-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.api-method-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
}

.api-category-tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    color: #596170;
    background: rgba(45, 55, 76, .06);
    font-size: 11px;
    font-weight: 700;
}

.api-price-tag {
    margin-left: auto;
    color: var(--zib-primary);
    font-size: 12px;
    font-weight: 800;
}

.api-card-name {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}

.api-card-name a {
    color: #252c3a;
    transition: color .2s;
}

.api-card-name a:hover {
    color: var(--zib-primary);
}

.api-card-summary {
    margin: 0 0 10px;
    color: var(--zib-muted);
    font-size: 13px;
    line-height: 1.65;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.api-card-path code {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(45, 55, 76, .05);
    color: #4d5564;
    font-size: 12px;
    font-family: "SF Mono", "Consolas", monospace;
    word-break: break-all;
}

.api-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--zib-line);
    color: #9097a6;
    font-size: 12px;
    font-weight: 700;
}

.api-card-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--zib-blue) !important;
    background: rgba(0, 77, 234, .08);
    font-weight: 800;
    transition: background .2s, color .2s;
}

.api-card-doc-link:hover {
    background: rgba(0, 77, 234, .15);
}

/* API密钥 */
.api-key-section {
    padding: 16px;
}

.api-key-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.api-key-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.api-key-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-blue), #6b9aff);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 6px 16px rgba(0, 77, 234, .2);
}

.api-key-create-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 77, 234, .28);
}

.api-key-list {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.api-key-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--zib-line);
    border-radius: 10px;
    background: #fff;
    transition: box-shadow .2s, border-color .2s;
}

.api-key-item:hover {
    border-color: rgba(0, 77, 234, .1);
    box-shadow: 0 6px 16px rgba(33, 40, 66, .05);
}

.api-key-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 77, 234, .1);
    color: var(--zib-primary);
    font-size: 17px;
    flex-shrink: 0;
}

.api-key-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.api-key-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.api-key-row code {
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(45, 55, 76, .04);
    color: #4d5564;
    font-size: 12px;
    font-family: "SF Mono", "Consolas", monospace;
    word-break: break-all;
    user-select: all;
    letter-spacing: .3px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.api-key-label {
    font-size: 14px;
    font-weight: 800;
    color: #252c3a;
}

.api-key-status {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.api-key-status-active {
    color: #1e9c63;
    background: rgba(53, 201, 135, .12);
}

.api-key-status-disabled {
    color: #9097a6;
    background: rgba(45, 55, 76, .08);
}

.api-key-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.api-key-action-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    color: #7d8491;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    transition: color .2s, background .2s;
}

.api-key-action-btn:hover {
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .08);
}

.api-key-action-danger:hover {
    color: #ff5f6d;
    background: rgba(255, 95, 109, .08);
}

/* ===== 概览统计卡片 ===== */
.stat-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 16px;
}

@media (max-width: 900px) {
    .stat-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .stat-grid-4 {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 10px;
    background: var(--zib-bg);
    border: 1px solid var(--zib-line);
    transition: box-shadow .2s, transform .2s;
}

.stat-card:hover {
    box-shadow: 0 4px 14px rgba(33, 40, 66, .06);
    transform: translateY(-1px);
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 20px;
    flex-shrink: 0;
}

.stat-icon-blue {
    background: rgba(0, 77, 234, .12);
    color: var(--zib-blue);
}

.stat-icon-green {
    background: rgba(53, 201, 135, .12);
    color: var(--zib-green);
}

.stat-icon-pink {
    background: rgba(0, 77, 234, .12);
    color: var(--zib-primary);
}

.stat-icon-yellow {
    background: rgba(255, 193, 7, .16);
    color: #d4a017;
}

.stat-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.stat-label {
    font-size: 13px;
    font-weight: 700;
    color: #6d7587;
    white-space: nowrap;
}

.stat-number {
    font-size: 22px;
    font-weight: 800;
    color: #252c3a;
    line-height: 1.2;
}

/* ===== 快捷操作 ===== */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px;
}

@media (max-width: 768px) {
    .quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .quick-grid {
        grid-template-columns: 1fr;
    }
}

.quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 12px 18px;
    border-radius: 10px;
    border: 1px solid var(--zib-line);
    background: #fff;
    text-align: center;
    transition: box-shadow .2s, transform .2s, border-color .2s;
    text-decoration: none;
}

.quick-card:hover {
    box-shadow: 0 6px 18px rgba(33, 40, 66, .07);
    transform: translateY(-2px);
    border-color: rgba(0, 77, 234, .15);
    text-decoration: none;
}

.quick-card i {
    font-size: 26px;
}

.quick-card span {
    font-size: 14px;
    font-weight: 800;
    color: #252c3a;
}

.quick-card small {
    font-size: 12px;
    color: #9aa1ad;
    line-height: 1.4;
}

.api-key-action-danger:hover {
    color: #ff5f6d;
    background: rgba(255, 95, 109, .1);
}

/* 充值页面 */
/* Account overview */
#page-overview {
    display: grid;
    gap: 16px;
}

.overview-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(0, 77, 234, .18);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(0, 77, 234, .12), rgba(63, 123, 255, .08)),
        linear-gradient(180deg, #fff, #f7faff),
        #fff;
    box-shadow: 0 16px 36px rgba(0, 77, 234, .08);
}

.overview-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--zib-primary);
    font-size: 12px;
    font-weight: 900;
}

.overview-hero-main h2 {
    margin: 0;
    color: #1f2430;
    font-size: 24px;
    line-height: 1.25;
}

.overview-hero-main p {
    margin: 8px 0 0;
    color: #667085;
    line-height: 1.7;
}

.overview-hero-actions {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.overview-hero-actions a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(0, 77, 234, .16);
}

.overview-hero-actions a + a {
    color: var(--zib-primary);
    border: 1px solid rgba(0, 77, 234, .16);
    background: rgba(255, 255, 255, .78);
    box-shadow: none;
}

.overview-mini-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.overview-mini-grid div {
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    border: 1px solid rgba(0, 77, 234, .1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}

.overview-mini-grid span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.overview-mini-grid strong {
    overflow: hidden;
    color: #1f2430;
    font-size: 16px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-overview .section-card {
    overflow: hidden;
    border-radius: 10px;
}

#page-overview > .section-card:last-of-type {
    display: none;
}

#page-overview,
#page-overview a,
#page-overview span,
#page-overview p,
#page-overview small,
#page-overview h2,
#page-overview strong {
    letter-spacing: 0;
}

#page-overview .stat-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px;
    gap: 12px;
}

#page-overview .stat-card:first-child,
#page-overview .stat-card:nth-child(3) {
    display: none;
}

#page-overview .stat-card {
    align-items: flex-start;
    padding: 16px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(247, 249, 252, .92)),
        #fff;
    box-shadow: 0 10px 24px rgba(31, 36, 48, .045);
}

#page-overview .stat-icon {
    border-radius: 8px;
}

#page-overview .stat-label {
    color: #667085 !important;
}

#page-overview .stat-number {
    color: #1f2430 !important;
}

#page-overview .section-title {
    color: #1f2430;
}

#page-overview .quick-grid {
    gap: 12px;
    padding: 16px;
}

#page-overview .quick-card {
    align-items: flex-start;
    min-height: 132px;
    padding: 18px;
    border-radius: 8px;
    text-align: left;
}

#page-overview .quick-card i {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--zib-primary) !important;
    border: 1px solid rgba(0, 77, 234, .14);
    background: linear-gradient(135deg, rgba(0, 77, 234, .1), rgba(63, 123, 255, .16));
    box-shadow: 0 10px 20px rgba(0, 77, 234, .1);
    font-size: 20px;
}

#page-overview .quick-card small {
    color: #667085 !important;
    line-height: 1.6;
}

#page-overview .quick-card span {
    color: #1f2430 !important;
}

#page-overview .section-card:last-child > div:last-child {
    padding: 16px 20px 20px !important;
}

#page-overview .section-card:last-child > div:last-child > div {
    gap: 12px !important;
}

#page-overview .section-card:last-child > div:last-child > div > div {
    padding: 15px;
    border: 1px solid rgba(0, 77, 234, .1);
    border-radius: 8px;
    background: #fff;
}

@media (max-width: 760px) {
    .overview-hero-card,
    .overview-mini-grid {
        grid-template-columns: 1fr;
    }

    .overview-hero-actions {
        flex-wrap: wrap;
    }
}

.recharge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 16px;
}

.recharge-plan-card {
    position: relative;
    padding: 14px 12px;
    border: 2px solid var(--zib-line);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    background: #fff;
    overflow: hidden;
}

.recharge-plan-card:hover {
    border-color: rgba(0, 77, 234, .2);
    box-shadow: 0 10px 24px rgba(33, 40, 66, .07);
    transform: translateY(-2px);
}

.recharge-plan-card.selected {
    border-color: var(--zib-blue);
    box-shadow: 0 10px 24px rgba(0, 77, 234, .15);
    transform: translateY(-2px);
}

.recharge-plan-card.recommended {
    border-color: var(--zib-primary);
}

[data-points-plans].has-selection .recharge-plan-card.recommended:not(.selected) {
    border-color: var(--zib-line);
}

.recommend-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--zib-primary), #3f7bff);
    font-size: 10px;
    font-weight: 800;
}

.recharge-plan-amount strong {
    font-size: 28px;
    font-weight: 900;
    color: #252c3a;
}

.recharge-bonus {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #1e9c63;
    background: rgba(53, 201, 135, .12);
    font-size: 12px;
    font-weight: 800;
}

.recharge-plan-card p {
    margin: 10px 0 0;
    color: var(--zib-muted);
    font-size: 12px;
    line-height: 1.55;
}

.recharge-order-box {
    display: grid;
    gap: 10px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--zib-line);
}

.recharge-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--zib-muted);
    font-weight: 700;
    font-size: 14px;
}

.recharge-order-total {
    padding-top: 10px;
    border-top: 1px solid var(--zib-line);
}

.recharge-order-total span:last-child {
    color: var(--zib-primary);
    font-size: 24px;
    font-weight: 900;
}

.points-ratio-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    color: #4f6fd8;
    background: rgba(0, 77, 234, .08);
    font-size: 13px;
    font-weight: 800;
}

.points-recharge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 4px 4px 8px;
}

.points-plan-card {
    border-width: 1px;
}

.points-activity-tag {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #ff6b2c;
    background: rgba(255, 107, 44, .1);
    font-size: 11px;
    font-weight: 900;
}

.points-price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}

.points-price-row del {
    color: #aeb4c0;
    font-size: 13px;
    font-weight: 800;
}

.points-pay-section {
    margin-top: 18px;
}

.points-pay-section h3 {
    margin: 0 0 10px;
    color: #252c3a;
    font-size: 14px;
}

.points-pay-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.points-pay-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid var(--zib-line);
    border-radius: 12px;
    color: #4d5564;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, color .2s, transform .2s;
}

.points-pay-method:hover,
.points-pay-method.is-selected {
    border-color: rgba(0, 77, 234, .55);
    color: var(--zib-blue);
    box-shadow: 0 10px 24px rgba(0, 77, 234, .12);
    transform: translateY(-1px);
}

.points-custom-card {
    background: linear-gradient(180deg, #fff, rgba(0, 77, 234, .045));
}

.points-custom-inline {
    display: none;
    align-items: center;
    height: 36px;
    margin-top: 10px;
    border: 1px solid var(--zib-line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.points-custom-card.selected .points-custom-inline {
    display: flex;
}

.points-custom-inline input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    border: 0;
    outline: 0;
    text-align: center;
    color: #252c3a;
    font: inherit;
    font-weight: 800;
}

.points-custom-inline em {
    padding: 0 8px 0 0;
    color: var(--zib-muted);
    font-size: 12px;
    font-style: normal;
}

/* 账单列表 */
.bill-list {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.bill-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
    transition: background .2s;
}

.bill-item:hover {
    background: #fff;
}

.bill-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.bill-info strong {
    display: block;
    color: #343b49;
    font-size: 14px;
    font-weight: 800;
}

.bill-info span {
    display: block;
    margin-top: 4px;
    color: var(--zib-muted);
    font-size: 12px;
}

.bill-amount {
    font-weight: 900;
    font-size: 15px;
    white-space: nowrap;
}

.bill-status {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.bill-status-completed {
    color: #1e9c63;
    background: rgba(53, 201, 135, .12);
}

/* API 详情页 */
.api-detail-base {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 0;
    padding: 0;
}

.api-detail-base dt {
    padding: 10px 14px;
    border-bottom: 1px solid var(--zib-line);
    color: #9097a6;
    font-weight: 700;
    font-size: 13px;
}

.api-detail-base dd {
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid var(--zib-line);
    color: #343b49;
    font-weight: 800;
    font-size: 13px;
}

.api-detail-base dt:last-of-type,
.api-detail-base dd:last-of-type {
    border-bottom: 0;
}

.api-param-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

.api-param-table th {
    padding: 10px 14px;
    background: rgba(45, 55, 76, .05);
    color: #4d5564;
    font-weight: 800;
    text-align: left;
    border-bottom: 2px solid var(--zib-line);
}

.api-param-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--zib-line);
    color: #4d5564;
    font-size: 13px;
}

.api-param-table td code {
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(45, 55, 76, .06);
    color: #e74c5f;
}

.required {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    color: #fff;
    background: #ff5f6d;
    font-size: 11px;
    font-weight: 800;
}

.optional {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    color: #7a8190;
    background: rgba(45, 55, 76, .08);
    font-size: 11px;
    font-weight: 800;
}

.api-code-block {
    margin: 16px 0;
    border-radius: 10px;
    overflow: hidden;
    background: #14111c;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
}

.api-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(0, 77, 234, .05);
    border-bottom: 1px solid rgba(0, 77, 234, .06);
}

.api-code-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b892a6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.api-code-lang::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--zib-primary);
    opacity: .7;
}

.api-code-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid rgba(0, 77, 234, .1);
    border-radius: 5px;
    background: rgba(0, 77, 234, .06);
    color: #b1869c;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
}

.api-code-copy-btn:hover {
    background: rgba(0, 77, 234, .12);
    color: #e8a8c0;
    border-color: rgba(0, 77, 234, .2);
}

.api-code-block pre {
    margin: 0;
    padding: 16px 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    border: none;
}

.api-code-block code {
    display: block;
    color: #ddd2d8;
    font-size: 13px;
    line-height: 1.7;
    font-family: "SF Mono", "Consolas", "Monaco", monospace;
    white-space: pre;
}

.api-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.api-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.api-badge-paid {
    color: #1e9c63;
    background: rgba(53, 201, 135, .12);
}

.api-badge-auth {
    color: var(--zib-blue);
    background: rgba(0, 77, 234, .1);
}

.api-badge-access {
    color: var(--zib-yellow);
    background: rgba(255, 184, 77, .12);
}

/* 空状态 */
.api-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--zib-muted);
}

.api-empty i {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
    opacity: .4;
}

.api-empty p {
    margin: 0;
    font-weight: 700;
}

/* 统计卡片数据绑定 */
[data-stat],
[data-display] {
    font-variant-numeric: tabular-nums;
}

/* 余额显示在导航栏 */
.nav-balance {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--zib-primary);
    background: rgba(0, 77, 234, .08);
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .api-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .api-card-grid {
        grid-template-columns: 1fr;
    }

    .bill-item {
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }

    .bill-status {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .api-key-meta {
        flex-direction: column;
        gap: 4px;
    }

    .api-key-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 680px) {
    .recharge-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .points-pay-methods {
        grid-template-columns: 1fr;
    }

    .points-plan-card {
        flex-basis: 158px;
    }

    .api-param-table {
        font-size: 12px;
    }

    .api-param-table th,
    .api-param-table td {
        padding: 8px 10px;
    }

    .user-overview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}