:root {
    --ink: #101828;
    --muted: #667085;
    --line: #e6eaf0;
    --soft: #f6f8fb;
    --card: #ffffff;
    --green: #43e69b;
    --green2: #1fcf83;
    --cyan: #43c8ff;
    --gold: #f5bf5b;
    --red: #e5485d;
    --dark: #050911;
    --dark2: #0a1220;
    --dark3: #101b2c;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.market-page {
    color: #eef7ff;
    background:
        radial-gradient(circle at 12% 8%, rgba(67,230,155,.16), transparent 30%),
        radial-gradient(circle at 84% 0%, rgba(67,200,255,.12), transparent 28%),
        linear-gradient(180deg, #050812 0%, #08101c 52%, #05080f 100%);
}
.market-page .grid-bg {
    position: fixed; inset: 0; pointer-events: none; opacity: .36;
    background-image:
        radial-gradient(circle at center, rgba(67,230,155,.16) 0 1px, transparent 1px),
        linear-gradient(rgba(67,230,155,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(67,200,255,.035) 1px, transparent 1px);
    background-size: 96px 96px, 54px 54px, 54px 54px;
}
.console-page { color: var(--ink); background: #f4f6fa; }
.console-page .grid-bg { display: none; }

.topbar {
    position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px;
    padding: 14px min(4vw, 44px); border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
}
.market-page .topbar { background: rgba(4, 8, 15, .78); box-shadow: 0 16px 34px rgba(0,0,0,.28); }
.console-page .topbar { background: rgba(255,255,255,.94); border-bottom-color: var(--line); box-shadow: 0 8px 24px rgba(16,24,40,.06); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 210px; }
.brand-mark {
    width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto; position: relative;
    background: linear-gradient(135deg, rgba(67,230,155,.95), rgba(67,200,255,.72));
    box-shadow: 0 10px 30px rgba(67,230,155,.2);
}
.brand-mark:before { content: ""; position: absolute; inset: 11px; border: 2px solid rgba(5,9,17,.74); transform: rotate(45deg); }
.brand b { display: block; font-size: 19px; line-height: 1.15; letter-spacing: .2px; }
.brand small { display: block; color: var(--green); font-size: 12px; margin-top: 2px; }
.console-page .brand small { color: #12a66f; }
.top-search { flex: 1 1 360px; max-width: 620px; }
.top-search input {
    width: 100%; height: 42px; border-radius: 999px; border: 1px solid rgba(116,139,167,.18);
    padding: 0 18px; color: #dceeff; background: rgba(255,255,255,.07); outline: none;
}
.top-search input:focus { border-color: rgba(67,230,155,.56); box-shadow: 0 0 0 4px rgba(67,230,155,.08); }
.nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.nav a, .btn, button, .pagination a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid transparent;
    border-radius: 10px; padding: 8px 14px; transition: .18s ease; white-space: nowrap;
}
.market-page .nav a, .market-page .btn, .market-page button, .market-page .pagination a {
    color: #eaf5ff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.10);
}
.console-page .nav a, .console-page .btn, .console-page button, .console-page .pagination a {
    color: #344054; background: #fff; border-color: #d8dee8;
}
.nav a:hover, .btn:hover, button:hover, .pagination a:hover { transform: translateY(-1px); border-color: rgba(67,230,155,.48); }
.btn-primary, .nav-primary {
    border: 0 !important; color: #05100c !important; font-weight: 800;
    background: linear-gradient(135deg, var(--green), var(--cyan)) !important;
    box-shadow: 0 12px 26px rgba(67,230,155,.22);
}
.container { position: relative; width: min(1240px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 46px; }
.console-page .container { width: min(1180px, calc(100% - 28px)); }

.panel, .card, .table-panel {
    border-radius: 16px; overflow: hidden;
}
.market-page .panel, .market-page .card, .market-page .table-panel {
    background: rgba(12, 20, 34, .82); border: 1px solid rgba(114, 146, 177, .14);
    box-shadow: 0 24px 70px rgba(0,0,0,.30);
}
.console-page .panel, .console-page .card, .console-page .table-panel {
    background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 34px rgba(16,24,40,.06);
}
.panel { padding: 20px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; align-items: stretch; margin-bottom: 18px; }
.market-hero {
    min-height: 310px; padding: 36px; position: relative;
    background:
        linear-gradient(115deg, rgba(10,18,31,.96), rgba(10,18,31,.76)),
        radial-gradient(circle at 78% 20%, rgba(67,230,155,.22), transparent 24%),
        linear-gradient(135deg, #122033, #07101c);
}
.market-hero:after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .20;
    background:
        linear-gradient(135deg, transparent 0 44%, rgba(67,230,155,.35) 44.2% 44.7%, transparent 45%),
        radial-gradient(circle at 84% 64%, transparent 0 42px, rgba(67,230,155,.35) 43px 44px, transparent 45px);
}
.market-hero h1 { position: relative; z-index: 1; margin: 0 0 12px; font-size: clamp(30px, 4vw, 48px); line-height: 1.15; }
.market-hero p { position: relative; z-index: 1; max-width: 620px; margin: 0 0 20px; color: #aab8c8; }
.hero-tags, .tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-tags { position: relative; z-index: 1; }
.glass-tag, .badge {
    display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 999px; font-size: 12px;
}
.glass-tag { color: #dffaf0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.badge { color: #11b979; background: rgba(67,230,155,.10); border: 1px solid rgba(67,230,155,.25); }
.badge.red { color: var(--red); background: rgba(229,72,93,.10); border-color: rgba(229,72,93,.25); }
.badge.amber { color: #b7791f; background: rgba(245,191,91,.12); border-color: rgba(245,191,91,.28); }
.notice-card { padding: 18px; background: rgba(255,255,255,.07); backdrop-filter: blur(18px); }
.notice-card h2 { margin: 0 0 14px; font-size: 18px; }
.notice-card ol { margin: 0; padding-left: 18px; color: #b9c6d4; font-size: 13px; }
.notice-card li + li { margin-top: 10px; }
.flow-grid, .kpi-grid, .cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.flow-card, .kpi { padding: 16px; transition: .18s ease; }
.flow-card:hover, .account-card:hover { transform: translateY(-4px); }
.flow-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #06100c; background: linear-gradient(135deg, var(--green), var(--cyan)); font-weight: 900; margin-bottom: 10px; }
.flow-card h3 { margin: 0; font-size: 16px; }
.flow-card p { margin: 6px 0 0; color: #aab8c8; font-size: 13px; }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.section-title h1, .section-title h2 { margin: 0; }
.muted { color: var(--muted); }
.market-page .muted { color: #9eacbc; }
.kpi small { display: block; color: var(--muted); }
.market-page .kpi small { color: #9eacbc; }
.kpi b { display: block; margin-top: 6px; font-size: 23px; color: #12b981; }
.market-page .kpi b { color: var(--green); }

.filters { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.field.full { grid-column: 1 / -1; }
label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.console-page label { color: #344054; }
.market-page label { color: #d8e7f8; }
input, select, textarea {
    width: 100%; min-height: 42px; border-radius: 10px; padding: 10px 12px; outline: none; transition: .16s ease;
}
.market-page input, .market-page select, .market-page textarea {
    color: #edf7ff; background: rgba(4,9,17,.74); border: 1px solid rgba(148,163,184,.20);
}
.console-page input, .console-page select, .console-page textarea {
    color: var(--ink); background: #fff; border: 1px solid #d8dee8;
}
input:focus, select:focus, textarea:focus { border-color: rgba(67,230,155,.68); box-shadow: 0 0 0 4px rgba(67,230,155,.10); }
textarea { min-height: 112px; resize: vertical; }
select option { background: #111827; color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.account-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.account-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; transition: .18s ease; }
.product-cover { display: block; width: 100%; aspect-ratio: 4 / 2.65; border-radius: 13px; overflow: hidden; background: #0b1422; }
.product-cover img, .detail-cover, .thumb-row img { width: 100%; height: 100%; object-fit: cover; display: block; animation: imageFade .35s ease both; }
@keyframes imageFade { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }
.account-card h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
.price { color: var(--green2); font-size: 22px; font-weight: 900; }
.market-page .price { color: var(--green); }
.hidden-profit { color: #b7791f; font-weight: 900; }
.detail-gallery { margin-bottom: 16px; }
.detail-cover { aspect-ratio: 16 / 9; border-radius: 14px; background: #0b1422; }
.thumb-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.thumb-row img { aspect-ratio: 1.45; border-radius: 10px; }

.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.sidebar {
    position: sticky; top: 82px; border-radius: 16px; padding: 10px;
    background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(16,24,40,.06);
}
.sidebar a { display: block; padding: 11px 12px; border-radius: 10px; color: #475467; }
.sidebar a:hover, .sidebar a.active { background: #eefaf4; color: #0e9f6e; }
.table-panel { overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: #475467; background: #f8fafc; font-size: 13px; }
td { color: #344054; }
.market-page td { color: #e6f1fb; border-bottom-color: rgba(148,163,184,.12); }
.market-page th { color: #aab8c8; background: rgba(255,255,255,.05); }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.pagination a.active { background: var(--green) !important; color: #04100b !important; border-color: transparent !important; font-weight: 900; }
.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; border: 1px solid rgba(67,200,255,.20); background: rgba(67,200,255,.08); }
.alert-warning { border-color: rgba(245,191,91,.35); color: #d99a22; background: rgba(245,191,91,.10); }
.alert-success { border-color: rgba(67,230,155,.35); color: #0fad73; background: rgba(67,230,155,.10); }
.alert-danger { border-color: rgba(229,72,93,.35); color: var(--red); background: rgba(229,72,93,.10); }
.copybox { font-family: Consolas, monospace; min-height: 180px; }

.check-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 8px; }
.check-item { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 10px; border-radius: 10px; }
.market-page .check-item { background: rgba(255,255,255,.05); border: 1px solid rgba(148,163,184,.14); }
.console-page .check-item { background: #f8fafc; border: 1px solid #e6eaf0; }
.check-item input { width: auto; min-height: auto; accent-color: var(--green2); }

.upload-zone {
    position: relative; display: grid; gap: 12px; min-height: 150px; padding: 18px; border-radius: 14px;
    border: 1px dashed rgba(67,230,155,.45); transition: .16s ease; overflow: hidden;
}
.market-page .upload-zone { background: rgba(255,255,255,.04); }
.console-page .upload-zone { background: #f8fafc; }
.upload-zone:hover { border-color: var(--green); box-shadow: 0 0 0 4px rgba(67,230,155,.08); }
.upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-copy { display: grid; place-items: center; text-align: center; gap: 5px; color: var(--muted); pointer-events: none; }
.upload-copy b { color: inherit; font-size: 15px; }
.market-page .upload-copy b { color: #eaf5ff; }
.upload-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; position: relative; z-index: 1; pointer-events: none; }
.upload-preview img { width: 100%; aspect-ratio: 1.35; object-fit: cover; border-radius: 10px; box-shadow: 0 12px 24px rgba(0,0,0,.14); }
.upload-progress { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--cyan)); width: 0; transition: width .35s ease; }
.product-admin-strip { display: grid; grid-template-columns: 150px minmax(0,1fr) 160px; gap: 12px; align-items: center; margin: 12px 0; }
.product-admin-strip > img { width: 150px; aspect-ratio: 1.45; object-fit: cover; border-radius: 12px; background: #eef2f7; }
.compact-upload { min-height: 96px; padding: 12px; }

.seller-quote-panel {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eefdf6, #f7fbff);
    border: 1px solid #c8f3df;
    box-shadow: 0 18px 42px rgba(16, 185, 129, .10);
}
.seller-quote-panel > div {
    min-height: 94px;
    padding: 14px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid #e1e8f0;
}
.seller-quote-panel small {
    display: block;
    color: #667085;
    font-weight: 800;
}
.seller-quote-panel strong {
    display: inline-block;
    margin-top: 8px;
    color: #0e9f6e;
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
}
.seller-quote-panel span {
    display: block;
    margin-top: 7px;
    color: #475467;
    font-size: 13px;
}
.seller-quote-panel p {
    grid-column: 1 / -1;
    margin: 0;
    color: #0f5132;
    font-size: 13px;
    font-weight: 700;
}

.footer {
    position: relative; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 24px;
    border-top: 1px solid rgba(148,163,184,.16); color: #8ea0b3; font-size: 13px;
}
.console-page .footer { color: #667085; background: #fff; border-top-color: var(--line); }

.zx-home-page {
    color: #333;
    background: #f4f5f7;
}
.zx-home-page .grid-bg { display: none; }
.zx-home-page .container {
    width: 100%;
    max-width: none;
    padding: 0 0 34px;
}
.zx-home-page .footer {
    background: #fff;
    border-top-color: #e5e7eb;
    color: #697386;
}
.zx-top-main {
    position: sticky;
    top: 0;
    z-index: 60;
    height: 86px;
    background: #fff;
    border-bottom: 1px solid #edf0f5;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .05);
}
.zx-top-inner {
    width: min(1600px, calc(100% - 32px));
    height: 86px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.zx-left-main {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}
.zx-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.zx-logo-mark {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, #23c7a1, #64d9e6);
    box-shadow: 0 8px 20px rgba(35, 199, 161, .28);
}
.zx-logo-mark:after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 3px solid #075c5f;
    transform: rotate(45deg);
    border-radius: 2px;
}
.zx-logo b {
    display: block;
    color: #1f2937;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 900;
}
.zx-logo small {
    display: block;
    margin-top: 3px;
    color: #00a868;
    font-size: 13px;
    font-weight: 800;
}
.zx-menu-group {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
}
.zx-menu-group a {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    color: #333;
    font-size: 15px;
    font-weight: 800;
    border-radius: 8px;
}
.zx-menu-group a:hover,
.zx-menu-group .action-item {
    color: #10a873;
    background: #eafbf5;
}
.zx-menu-group .first-item:after {
    content: "";
    position: absolute;
    right: 6px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff2638;
    box-shadow: 0 0 0 2px #fff;
}
.zx-right-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.zx-right-main a {
    position: relative;
    display: grid;
    place-items: center;
    gap: 5px;
    min-width: 58px;
    color: #333;
    font-size: 12px;
    font-weight: 700;
}
.zx-right-main span {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff;
    background: #333;
    font-size: 12px;
    font-weight: 900;
}
.zx-right-main .zx-login-action span { background: #12c68b; }
.zx-right-main a:hover { color: #0fa676; }

.exchange-home {
    width: calc(100vw - 16px);
    margin-left: calc(50% - 50vw + 8px);
    color: #172033;
    background: #eef2f6;
    border-radius: 18px;
    padding: 10px 10px 14px;
    box-shadow: 0 28px 80px rgba(0,0,0,.24);
}
.zx-home-page .exchange-home {
    width: min(1600px, calc(100% - 32px));
    margin: 0 auto;
    padding: 0 0 24px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.exchange-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 590px;
    gap: 10px;
    align-items: stretch;
}
.zx-home-page .exchange-top {
    grid-template-columns: minmax(0, 1280px) 290px;
    gap: 22px;
    align-items: start;
    margin-top: 22px;
}
.zx-swiper-card {
    position: relative;
    height: 260px;
    overflow: hidden;
    border-radius: 12px;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .42), transparent 22%),
        radial-gradient(circle at 80% 32%, rgba(255, 124, 39, .28), transparent 25%),
        linear-gradient(105deg, #ffe1d3 0%, #f7fbff 48%, #bdeff4 100%);
    box-shadow: 0 10px 24px rgba(59, 69, 91, .08);
}
.zx-swiper-card:before {
    content: "";
    position: absolute;
    left: 42px;
    bottom: -24px;
    width: 210px;
    height: 210px;
    border-radius: 50% 50% 42% 42%;
    background:
        radial-gradient(circle at 54% 22%, #ffd0bb 0 36px, transparent 37px),
        radial-gradient(circle at 48% 40%, #1f2937 0 4px, transparent 5px),
        radial-gradient(circle at 62% 40%, #1f2937 0 4px, transparent 5px),
        linear-gradient(180deg, transparent 0 78px, #ffca31 79px 148px, transparent 149px);
    transform: rotate(-5deg);
    opacity: .96;
}
.zx-swiper-card:after {
    content: "";
    position: absolute;
    right: 110px;
    top: 34px;
    width: 140px;
    height: 180px;
    border-radius: 36px;
    background:
        radial-gradient(circle at 50% 26%, rgba(255,255,255,.44) 0 24px, transparent 25px),
        linear-gradient(145deg, #ff7f35, #ff413b);
    transform: rotate(-16deg);
    box-shadow: 0 24px 40px rgba(255, 87, 47, .20);
}
.zx-slide {
    position: relative;
    z-index: 2;
    width: 720px;
    margin-left: 290px;
    padding-top: 42px;
}
.zx-slide-tag {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 16px;
    color: #7f3400;
    background: rgba(255,255,255,.74);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
}
.zx-slide h1 {
    margin: 13px 0 8px;
    color: #1f2937;
    font-size: 48px;
    line-height: 1.05;
    font-weight: 950;
    text-shadow: 0 4px 0 rgba(255,255,255,.85);
}
.zx-slide p {
    margin: 0;
    color: #435067;
    font-size: 17px;
    font-weight: 800;
}
.zx-slide-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.zx-slide-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 22px;
    border-radius: 999px;
    color: #222;
    background: #fff;
    font-weight: 900;
    box-shadow: 0 10px 18px rgba(255, 112, 48, .18);
}
.zx-slide-actions a:first-child {
    color: #fff;
    background: linear-gradient(90deg, #ff8b21, #ff3d31);
}
.zx-slide-card {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 120px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 13px;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(43, 53, 72, .16);
}
.zx-card-one { right: 305px; bottom: 34px; background: #12b981; }
.zx-card-two { right: 52px; top: 36px; background: #ff8836; transform: rotate(8deg); }
.zx-card-three { right: 190px; top: 34px; background: #343a46; transform: rotate(-6deg); }
.zx-swiper-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 3;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}
.zx-swiper-dots span {
    width: 20px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
}
.zx-swiper-dots span:first-child { background: #12b981; }
.zx-side-box {
    display: grid;
    gap: 10px;
}
.zx-login-box {
    min-height: 92px;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 10px;
    align-items: center;
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(59, 69, 91, .08);
}
.zx-login-box .zx-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #12c68b, #44d6e8);
    font-weight: 900;
    font-size: 22px;
}
.zx-login-box b,
.zx-login-box span {
    display: block;
}
.zx-login-box b { color: #263142; font-size: 15px; }
.zx-login-box span { margin-top: 4px; color: #7b8596; font-size: 12px; }
.zx-login-box a {
    grid-column: 1 / -1;
    min-height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #12b981;
    font-weight: 900;
}
.zx-news-img {
    min-height: 78px;
    display: grid;
    align-content: center;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff1d3, #ffe1e1);
    box-shadow: 0 8px 18px rgba(59, 69, 91, .08);
}
.zx-news-img b { color: #1f2937; font-size: 18px; }
.zx-news-img span { margin-top: 5px; color: #7c4a16; font-size: 12px; font-weight: 800; }
.zx-qrcode-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.zx-qrcode-card {
    min-height: 70px;
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(59, 69, 91, .08);
}
.zx-qrcode-card .fake-qr {
    width: 56px;
    height: 56px;
    border-width: 4px;
    border-radius: 6px;
    background-size: 13px 13px, 13px 13px, auto, auto;
}
.zx-qrcode-card span {
    color: #4d5a6e;
    font-size: 12px;
    font-weight: 900;
}
.promo-banner {
    position: relative;
    min-height: 154px;
    overflow: hidden;
    border-radius: 14px;
    background:
        radial-gradient(circle at 18% 72%, rgba(255,108,120,.32), transparent 31%),
        radial-gradient(circle at 75% 20%, rgba(255,151,58,.26), transparent 23%),
        linear-gradient(100deg, #ffd2bd 0%, #e6f4ff 48%, #bff6fb 100%);
}
.promo-banner:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 36% 20%, rgba(255,255,255,.86) 0 2px, transparent 3px),
        radial-gradient(circle at 64% 64%, rgba(255,168,36,.8) 0 4px, transparent 5px),
        linear-gradient(135deg, transparent 0 47%, rgba(255,255,255,.34) 47.2% 47.7%, transparent 48%);
    background-size: 180px 120px, 220px 150px, 100% 100%;
}
.promo-copy {
    position: relative;
    z-index: 2;
    padding: 24px 30px 20px 220px;
}
.promo-kicker {
    display: inline-flex;
    padding: 5px 12px;
    border-radius: 999px;
    color: #0c8b68;
    background: rgba(255,255,255,.72);
    font-weight: 800;
    font-size: 13px;
}
.promo-copy h1 {
    margin: 8px 0 4px;
    font-size: 46px;
    line-height: 1;
    color: #151924;
    text-shadow: 0 3px 0 rgba(255,255,255,.88), 0 8px 20px rgba(255,105,35,.18);
}
.promo-copy p {
    margin: 0 0 12px;
    color: #4b5565;
    font-weight: 700;
}
.promo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 18px;
    border-radius: 999px;
    color: #17191f;
    background: #fff;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(255,128,44,.18);
}
.promo-figure {
    position: absolute;
    left: 18px;
    bottom: 0;
    width: 180px;
    height: 148px;
    z-index: 2;
}
.promo-head {
    position: absolute;
    left: 54px;
    top: 10px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffd1b8, #ff9a80);
    box-shadow: inset -10px 0 0 rgba(137,58,47,.18);
}
.promo-head:before {
    content: "";
    position: absolute;
    left: 16px;
    top: 22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1f2937;
    box-shadow: 24px 0 0 #1f2937;
}
.promo-head:after {
    content: "";
    position: absolute;
    left: 24px;
    top: 41px;
    width: 18px;
    height: 8px;
    border-radius: 0 0 999px 999px;
    background: #d93652;
}
.promo-body {
    position: absolute;
    left: 22px;
    bottom: -18px;
    width: 132px;
    height: 96px;
    border-radius: 42px 42px 14px 14px;
    background: linear-gradient(145deg, #ffd544, #ff9f33);
    transform: rotate(-5deg);
}
.promo-body:after {
    content: "";
    position: absolute;
    right: -44px;
    top: 8px;
    width: 70px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(90deg, #25c7ff, #087fc7);
    transform: rotate(-16deg);
}
.promo-coins span {
    position: absolute;
    right: 8%;
    top: 18%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffcf55, #ff7a23);
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.32), 0 12px 24px rgba(255,108,35,.2);
}
.promo-coins span:nth-child(2) { right: 3%; top: 58%; width: 28px; height: 28px; }
.promo-coins span:nth-child(3) { right: 16%; top: 68%; width: 24px; height: 24px; }
.qr-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.qr-card {
    display: grid;
    grid-template-columns: 126px 1fr;
    align-items: center;
    gap: 12px;
    min-height: 154px;
    padding: 12px;
    border-radius: 14px;
    overflow: hidden;
    background: #f6f7fb;
    border: 1px solid #dde4ee;
}
.qr-card.orange { box-shadow: inset 8px 0 0 #ff9c43; }
.qr-card.green { box-shadow: inset 8px 0 0 #36c783; }
.qr-card b {
    display: block;
    font-size: 21px;
    color: #2f3a4c;
    line-height: 1.15;
}
.qr-card span {
    display: block;
    margin-top: 8px;
    color: #fff;
    background: #29b878;
    border-radius: 10px;
    padding: 8px 10px;
    font-weight: 900;
    writing-mode: vertical-rl;
    letter-spacing: 2px;
}
.qr-card.orange span { background: #ff9944; }
.fake-qr {
    width: 126px;
    height: 126px;
    border: 8px solid #fff;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 12px, transparent 12px) 0 0/24px 24px,
        linear-gradient(#111 12px, transparent 12px) 0 0/24px 24px,
        radial-gradient(circle at 50% 50%, #20c997 0 9px, #fff 10px 20px, transparent 21px),
        #fff;
    box-shadow: 0 8px 20px rgba(40,54,76,.16);
}
.trade-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 550px;
    gap: 18px;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(196, 203, 214, .94);
}
.quick-tabs {
    display: flex;
    gap: 14px;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 2px;
}
.quick-tabs a {
    position: relative;
    flex: 0 0 auto;
    min-width: 82px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #111827;
    background: #f5f7fb;
    font-weight: 900;
    box-shadow: 0 1px 0 rgba(255,255,255,.65) inset;
}
.quick-tabs a.hot { color: #111; background: linear-gradient(180deg, #ff973a, #ff740f); }
.quick-tabs a.hot:after {
    content: "H";
    position: absolute;
    right: -5px;
    top: -7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10px;
    color: #fff;
    background: #ff2738;
}
.quick-tabs a.green { color: #fff; background: linear-gradient(180deg, #0fca75, #08a864); }
.quick-tabs a.active {
    outline: 3px solid rgba(255,255,255,.8);
    transform: translateY(-1px);
}
.table-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px 96px;
    gap: 8px;
    align-items: center;
}
.table-search input {
    min-height: 40px;
    border-radius: 9px;
    border: 2px solid #151515;
    background: #fff;
    color: #1f2937;
}
.table-search > button,
.advanced-pop > summary {
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #111;
    font-weight: 900;
}
.advanced-pop {
    position: relative;
}
.advanced-pop > summary {
    display: grid;
    place-items: center;
    list-style: none;
    cursor: pointer;
    padding: 0 12px;
}
.advanced-pop > summary::-webkit-details-marker { display: none; }
.advanced-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 12;
    width: min(720px, calc(100vw - 30px));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #d8dee8;
    box-shadow: 0 24px 48px rgba(17,24,39,.18);
}
.advanced-panel label { color: #344054; }
.advanced-panel input,
.advanced-panel select {
    color: #111827;
    background: #fff;
    border: 1px solid #d8dee8;
}
.ticker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 2px 10px;
    color: #344054;
    font-size: 13px;
}
.ticker-row span,
.ticker-row a {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dde4ee;
    font-weight: 700;
}
.ticker-row a { margin-left: auto; color: #0d9488; }
.trade-table-wrap {
    overflow: auto;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #cfd7e3;
    box-shadow: 0 10px 26px rgba(20,30,48,.12);
}
.trade-table {
    min-width: 1840px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}
.trade-table th {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 10px 8px;
    text-align: center;
    color: #fff;
    background: #030303;
    border-right: 1px solid #303030;
    border-bottom: 0;
    line-height: 1.35;
    white-space: nowrap;
}
.trade-table td {
    padding: 7px 8px;
    text-align: center;
    vertical-align: middle;
    color: #111827;
    background: #fff;
    border-right: 1px solid #e4e9f1;
    border-bottom: 1px solid #e4e9f1;
    white-space: nowrap;
}
.trade-table tbody tr:nth-child(even) td { background: #f5f7fa; }
.trade-table tbody tr:hover td { background: #edfdf6; }
.id-flag {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(90deg, #ffb000, #ff7a00);
    font-weight: 900;
    font-size: 11px;
}
.zone-pill,
.login-pill,
.rank-pill,
.ratio-pill,
.level-pill,
.safe-pill,
.dark-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 4px;
    color: #fff;
    font-weight: 800;
    line-height: 1;
}
.zone-pill { background: #2379ff; }
.login-pill { background: #2383f4; }
.rank-pill { background: #2d7cf6; }
.ratio-pill { background: #08c6d0; }
.level-pill { background: #f1a736; }
.safe-pill { color: #0d4f63; background: #c8f0ff; border: 1px solid #94d8ef; }
.dark-pill { background: #030303; }
.money-cell { font-weight: 900; color: #111; }
.table-thumb {
    width: 38px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
    background: #111827;
}
.note-cell {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.order-btn {
    display: inline-flex;
    min-width: 58px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #fff;
    background: #61c734;
    font-weight: 900;
}
.order-btn:hover { background: #43ad22; }
.empty-row {
    height: 120px;
    color: #64748b !important;
    font-size: 14px;
    background: #fff !important;
}

@media (max-width: 1120px) {
    .account-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .flow-grid, .kpi-grid, .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .top-search { order: 3; width: 100%; max-width: none; flex-basis: 100%; }
    .exchange-top { grid-template-columns: 1fr; }
    .qr-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trade-toolbar { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .hero, .layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .filters, .form-grid { grid-template-columns: 1fr; }
    .account-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .topbar { align-items: flex-start; flex-direction: column; }
    .nav { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); margin-left: 0; }
    .nav a { text-align: center; }
    .seller-quote-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .promo-copy { padding: 22px 22px 20px 160px; }
    .promo-copy h1 { font-size: 34px; }
    .promo-figure { left: -6px; transform: scale(.82); transform-origin: left bottom; }
    .table-search { grid-template-columns: 1fr; }
    .advanced-panel { position: static; width: 100%; grid-template-columns: 1fr; margin-top: 8px; }
}
@media (max-width: 560px) {
    .container { width: min(100% - 20px, 1240px); }
    .market-hero { padding: 24px; min-height: 260px; }
    .account-grid, .flow-grid, .kpi-grid, .cards { grid-template-columns: 1fr; }
    .seller-quote-panel { grid-template-columns: 1fr; }
    .table-panel { overflow-x: auto; }
    table { min-width: 760px; }
    .exchange-home { width: calc(100vw - 10px); margin-left: calc(50% - 50vw + 5px); padding: 6px; border-radius: 12px; }
    .qr-stack { grid-template-columns: 1fr; }
    .qr-card { grid-template-columns: 112px 1fr; }
    .fake-qr { width: 112px; height: 112px; }
    .promo-banner { min-height: 190px; }
    .promo-copy { padding: 18px; }
    .promo-figure { display: none; }
    .quick-tabs { gap: 8px; }
    .quick-tabs a { min-width: 74px; font-size: 13px; }
}

/* Home visual upgrade: tactical marketplace skin, frontend-only. */
.zx-home-page {
    --tactical-green: #20e6a2;
    --tactical-green-dark: #079765;
    --esport-orange: #ff8a1f;
    --space-black: #050b12;
    --space-blue: #0a1624;
    --glass-gray: rgba(239, 245, 251, .92);
    min-height: 100vh;
    color: #edf7ff;
    background:
        radial-gradient(circle at 9% 12%, rgba(32, 230, 162, .22), transparent 22%),
        radial-gradient(circle at 88% 10%, rgba(255, 138, 31, .12), transparent 18%),
        linear-gradient(135deg, rgba(32, 230, 162, .05) 0 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(180deg, #06111b 0%, #08101b 42%, #03070d 100%);
    background-size: auto, auto, 96px 96px, 120px 120px, auto;
}
.zx-home-page:before,
.zx-home-page:after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 0;
}
.zx-home-page:before {
    inset: 0;
    opacity: .35;
    background:
        repeating-linear-gradient(135deg, rgba(32,230,162,.05) 0 2px, transparent 2px 42px),
        radial-gradient(circle at 16% 82%, rgba(255,138,31,.12), transparent 20%);
}
.zx-home-page:after {
    right: 4vw;
    bottom: 8vh;
    width: 260px;
    height: 90px;
    opacity: .12;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0 18%, #9fb4c8 18% 72%, transparent 72%);
    box-shadow: -92px 16px 0 -22px #9fb4c8, 98px 8px 0 -34px #9fb4c8;
    transform: rotate(-14deg);
}
.zx-home-page .container,
.zx-home-page .exchange-home,
.zx-home-page .footer,
.zx-top-main { position: relative; z-index: 1; }

.zx-top-main {
    height: 70px;
    background: rgba(5, 11, 18, .86);
    border-bottom: 1px solid rgba(108, 126, 148, .22);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .26);
    backdrop-filter: blur(18px);
}
.zx-top-inner {
    height: 70px;
    width: min(1780px, calc(100% - 42px));
}
.zx-logo-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(145deg, #45f3b7, #2cc4e3);
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 14px 30px rgba(32,230,162,.25);
}
.zx-logo b { color: #eef7ff; font-size: 20px; }
.zx-logo small { color: var(--tactical-green); }
.zx-menu-group a,
.zx-right-main a {
    color: #d8e4ef;
    text-shadow: 0 0 18px rgba(32,230,162,0);
}
.zx-menu-group a:hover,
.zx-menu-group .action-item {
    color: #ffffff;
    background: rgba(32,230,162,.13);
    box-shadow: inset 0 0 0 1px rgba(32,230,162,.22), 0 0 28px rgba(32,230,162,.14);
}
.zx-right-main span {
    color: #081018;
    background: linear-gradient(135deg, var(--tactical-green), #62dbff);
    box-shadow: 0 8px 18px rgba(32,230,162,.18);
}
.zx-right-main .zx-login-action span {
    background: linear-gradient(135deg, var(--esport-orange), #ffcf3d);
}

.zx-home-page .exchange-home {
    width: min(1860px, calc(100% - 18px));
    padding-bottom: 46px;
}
.zx-home-page .exchange-top {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    margin-top: 18px;
}
.zx-swiper-card {
    min-height: 330px;
    height: 330px;
    border: 1px solid rgba(105, 145, 177, .28);
    border-radius: 22px;
    background:
        linear-gradient(115deg, rgba(4, 12, 22, .92), rgba(10, 27, 42, .72)),
        radial-gradient(circle at 75% 20%, rgba(32,230,162,.22), transparent 24%),
        radial-gradient(circle at 92% 78%, rgba(255,138,31,.20), transparent 26%),
        linear-gradient(135deg, #081827, #0b1320 60%, #060b12);
    box-shadow: 0 30px 70px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.05);
}
.zx-swiper-card:before {
    display: none;
}
.zx-swiper-card:after {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: inherit;
    transform: none;
    background:
        radial-gradient(circle at 8% 22%, rgba(32,230,162,.12) 0 1px, transparent 2px),
        linear-gradient(135deg, transparent 0 42%, rgba(32,230,162,.18) 42.1% 42.4%, transparent 42.6%),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 78px 78px, auto, 72px 72px, 72px 72px;
    box-shadow: none;
    opacity: .9;
}
.zx-hero-art {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.zx-character {
    position: absolute;
    left: 44px;
    bottom: -8px;
    width: 210px;
    height: 286px;
    border-radius: 88px 88px 28px 28px;
    background:
        radial-gradient(circle at 50% 22%, #f3c3a2 0 42px, transparent 43px),
        radial-gradient(circle at 42% 19%, #101827 0 4px, transparent 5px),
        radial-gradient(circle at 58% 19%, #101827 0 4px, transparent 5px),
        radial-gradient(circle at 50% 35%, #1f2937 0 28px, transparent 29px),
        linear-gradient(180deg, transparent 0 92px, #26364b 93px 146px, #152436 147px 220px, transparent 221px);
    filter: drop-shadow(0 24px 32px rgba(0,0,0,.34));
}
.zx-character:before {
    content: "";
    position: absolute;
    left: 36px;
    top: 70px;
    width: 138px;
    height: 62px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1d2c3e, #2d465a);
    box-shadow: inset 0 -10px 0 rgba(0,0,0,.14);
}
.zx-character:after {
    content: "";
    position: absolute;
    left: 68px;
    top: 18px;
    width: 74px;
    height: 34px;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(135deg, #172334, #375064);
    box-shadow: 0 -8px 0 #26364b, inset 0 -4px 0 rgba(32,230,162,.22);
}
.zx-rifle {
    position: absolute;
    left: 118px;
    bottom: 76px;
    width: 210px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #73869a, #1a2635 34%, #a9bdc8 35% 50%, #1a2635 51% 100%);
    transform: rotate(-16deg);
    box-shadow: 0 10px 18px rgba(0,0,0,.26);
}
.zx-rifle:after {
    content: "";
    position: absolute;
    right: -42px;
    top: 4px;
    width: 52px;
    height: 8px;
    border-radius: 999px;
    background: #8ca0b2;
}
.zx-shield {
    position: absolute;
    right: 346px;
    top: 52px;
    width: 82px;
    height: 96px;
    border-radius: 22px 22px 36px 36px;
    background: linear-gradient(145deg, rgba(32,230,162,.95), rgba(17,126,93,.82));
    clip-path: polygon(50% 0, 94% 16%, 84% 76%, 50% 100%, 16% 76%, 6% 16%);
    box-shadow: 0 18px 34px rgba(32,230,162,.24);
}
.zx-shield:after {
    content: "";
    position: absolute;
    inset: 24px;
    border: 4px solid rgba(5, 11, 18, .6);
    transform: rotate(45deg);
}
.zx-coin {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff3a9, #ffbf2e 45%, #ff7b1f);
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.22), 0 14px 24px rgba(255,138,31,.24);
}
.zx-coin:after {
    content: "H";
    position: absolute;
    inset: 8px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #9d4e00;
    font-size: 13px;
    font-weight: 900;
    background: rgba(255,255,255,.22);
}
.coin-a { right: 510px; top: 42px; animation: coinFloat 4.2s ease-in-out infinite; }
.coin-b { right: 260px; bottom: 54px; width: 24px; height: 24px; animation: coinFloat 5s ease-in-out infinite .4s; }
.coin-c { left: 288px; top: 42px; width: 20px; height: 20px; animation: coinFloat 4.6s ease-in-out infinite .8s; }
@keyframes coinFloat { 50% { transform: translateY(-10px) rotate(12deg); } }
.zx-slide {
    width: min(720px, calc(100% - 590px));
    margin-left: 300px;
    padding-top: 58px;
}
.zx-slide-tag {
    color: #06130f;
    background: linear-gradient(135deg, var(--tactical-green), #78e9ff);
    box-shadow: 0 12px 28px rgba(32,230,162,.18);
}
.zx-slide h1 {
    max-width: 690px;
    color: #fff;
    font-size: clamp(36px, 4vw, 62px);
    letter-spacing: 0;
    text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 34px rgba(32,230,162,.18);
}
.zx-slide p {
    color: #b9c8d8;
    font-size: 16px;
}
.zx-slide-actions a {
    color: #06130f;
    background: rgba(255,255,255,.92);
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
.zx-slide-actions a:first-child,
.zx-slide-actions .warning-link {
    color: #fff;
    background: linear-gradient(135deg, #ff9a22, #ff3e2f);
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 16px 32px rgba(255,98,31,.24);
}
.zx-slide-actions .warning-link:before {
    content: "!";
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-right: 7px;
    border-radius: 50%;
    color: #ff5b2f;
    background: #fff;
}
.zx-slide-card {
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 38px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08);
}
.zx-card-one { right: 384px; bottom: 34px; background: linear-gradient(135deg, #0fbf7f, #23e6a8); color: #06130f; }
.zx-card-two { right: 52px; top: 34px; background: linear-gradient(135deg, #ff8c21, #ff4f2f); }
.zx-card-three { right: 226px; top: 36px; background: linear-gradient(135deg, #29384c, #0f1825); }
.zx-hero-qr {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(2, 110px);
    gap: 12px;
}
.zx-hero-qr-item {
    display: grid;
    place-items: center;
    gap: 7px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 34px rgba(0,0,0,.26);
}
.zx-hero-qr-item .fake-qr {
    width: 78px;
    height: 78px;
    border-width: 5px;
    border-radius: 8px;
    background-size: 16px 16px, 16px 16px, auto, auto;
}
.zx-hero-qr-item span {
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.zx-side-box { gap: 12px; }
.zx-login-box,
.zx-news-img,
.zx-qrcode-card {
    background: rgba(238,245,251,.92);
    border: 1px solid rgba(255,255,255,.48);
    box-shadow: 0 20px 48px rgba(0,0,0,.22);
    backdrop-filter: blur(14px);
}
.zx-login-box a {
    background: linear-gradient(135deg, var(--tactical-green), #53dfff);
    color: #06130f;
}
.zx-news-img {
    background:
        radial-gradient(circle at 86% 18%, rgba(255,138,31,.22), transparent 32%),
        linear-gradient(135deg, rgba(255,245,224,.96), rgba(232,255,246,.94));
}
.zx-qrcode-card .fake-qr {
    background-color: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.trade-toolbar {
    margin-top: 14px;
    padding: 12px;
    border-radius: 20px;
    background: rgba(227, 234, 243, .88);
    border: 1px solid rgba(255,255,255,.42);
    box-shadow: 0 22px 52px rgba(0,0,0,.22);
    backdrop-filter: blur(14px);
}
.quick-tabs { gap: 12px; }
.quick-tabs a {
    min-width: 92px;
    min-height: 44px;
    border-radius: 13px;
    color: #06130f;
    background: linear-gradient(180deg, #ffffff, #e8eef5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 18px rgba(20,30,44,.12);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.quick-tabs a:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 32px rgba(255,138,31,.22);
    filter: saturate(1.08);
}
.quick-tabs a.hot {
    color: #17100a;
    background: linear-gradient(180deg, #ffad42, #ff7417);
}
.quick-tabs a.hot:after {
    content: "热";
    width: 18px;
    height: 18px;
    top: -7px;
    right: -7px;
    background: linear-gradient(135deg, #ff3045, #ff6a2a);
}
.quick-tabs a.green {
    color: #06130f;
    background: linear-gradient(180deg, #4cf2b8, #0dbb7c);
}
.quick-tabs a.active {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255,255,255,.74), 0 0 32px rgba(32,230,162,.26);
}
.table-search {
    grid-template-columns: minmax(0, 1fr) 86px 108px;
}
.table-search input {
    min-height: 44px;
    border-radius: 12px;
    border: 2px solid rgba(10, 16, 24, .88);
    background: rgba(255,255,255,.92);
    color: #111827;
    box-shadow: inset 0 2px 5px rgba(15,23,42,.05);
}
.table-search > button,
.advanced-pop > summary {
    min-height: 44px;
    border-radius: 12px;
    background: linear-gradient(180deg, #1c2430, #090e15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 20px rgba(0,0,0,.18);
}
.table-search > button:hover,
.advanced-pop > summary:hover {
    box-shadow: 0 0 26px rgba(32,230,162,.22), inset 0 1px 0 rgba(255,255,255,.18);
}

.ticker-row {
    padding: 12px 2px;
    color: #d8e6f2;
}
.ticker-row span,
.ticker-row a {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    color: #d8e6f2;
    backdrop-filter: blur(12px);
}
.ticker-row a {
    color: var(--tactical-green);
}
.trade-table-wrap {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(235, 241, 247, .96);
    box-shadow: 0 26px 70px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.36);
    padding: 10px;
}
.trade-table {
    overflow: hidden;
    border-radius: 12px;
    font-size: 12px;
}
.trade-table th {
    padding: 12px 8px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(22,31,43,.98), rgba(3,6,10,.98));
    border-right: 1px solid rgba(255,255,255,.10);
    text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.trade-table th:after {
    content: "◆";
    display: inline-block;
    margin-left: 5px;
    color: rgba(32,230,162,.9);
    font-size: 9px;
    transform: translateY(-1px);
}
.trade-table td {
    color: #172033;
    background: rgba(255,255,255,.96);
    border-right: 1px solid #dde6ef;
    border-bottom: 1px solid #dde6ef;
}
.trade-table tbody tr:nth-child(even) td {
    background: #f2f6fa;
}
.trade-table tbody tr:hover td {
    background: #e8f5ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(32,230,162,.22);
}
.id-flag,
.zone-pill,
.login-pill,
.rank-pill,
.ratio-pill,
.level-pill,
.safe-pill,
.dark-pill {
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 6px 12px rgba(17,24,39,.10);
}
.id-flag {
    background: linear-gradient(135deg, #ffca30, #ff6917);
}
.zone-pill {
    background: linear-gradient(135deg, #2378ff, #24c2ff);
}
.login-pill {
    background: linear-gradient(135deg, #1d7cf2, #0bbf9a);
}
.rank-pill {
    background: linear-gradient(135deg, #236bff, #7a5cff);
}
.ratio-pill {
    color: #05221a;
    background: linear-gradient(135deg, #2ff0c0, #1fcce5);
}
.level-pill {
    color: #271300;
    background: linear-gradient(135deg, #ffd45b, #ff9922);
}
.safe-pill {
    color: #073328;
    background: linear-gradient(135deg, #dff9a8, #9df0ff);
    border-color: #8ee9d0;
}
.dark-pill {
    background: linear-gradient(135deg, #0f1724, #1f2937);
}
.money-cell,
.deposit-cell {
    position: relative;
    color: #101828;
    font-weight: 950;
}
.money-cell:before,
.deposit-cell:before {
    content: "￥";
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 4px;
    border-radius: 50%;
    color: #8a4200;
    background: radial-gradient(circle at 35% 28%, #fff5b4, #ffc83d 50%, #ff7c1e);
    font-size: 11px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 4px 8px rgba(255,124,30,.18);
}
.table-thumb {
    width: 46px;
    height: 34px;
    border-radius: 7px;
    box-shadow: 0 8px 16px rgba(0,0,0,.20);
}
.order-btn {
    min-width: 64px;
    min-height: 34px;
    border-radius: 8px;
    color: #05130e;
    background: linear-gradient(180deg, #63f2a9, #28bf55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 9px 18px rgba(40,191,85,.26);
    transition: transform .16s ease, box-shadow .16s ease;
}
.order-btn:hover {
    color: #05130e;
    background: linear-gradient(180deg, #78ffbc, #2edb64);
    transform: scale(1.06);
    box-shadow: 0 0 26px rgba(40, 219, 100, .42);
}
.empty-row {
    color: #64748b !important;
    background: linear-gradient(180deg, #fff, #f5f8fb) !important;
}
.trade-notice-panel {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: 0 0 12px;
    padding: 15px 18px;
    border-radius: 18px;
    color: #fff2df;
    background:
        radial-gradient(circle at 4% 50%, rgba(255, 138, 31, .35), transparent 26%),
        linear-gradient(135deg, rgba(58, 27, 15, .92), rgba(18, 28, 40, .90));
    border: 1px solid rgba(255, 138, 31, .28);
    box-shadow: 0 18px 40px rgba(0,0,0,.24);
}
.trade-notice-panel:target {
    box-shadow: 0 0 0 3px rgba(255,138,31,.32), 0 22px 48px rgba(0,0,0,.28);
}
.trade-notice-panel b {
    color: #ffb25b;
    font-size: 18px;
}
.trade-notice-panel span {
    color: #f9e4cd;
    line-height: 1.7;
}

.detail-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 16px;
    align-items: start;
}
.detail-main-card,
.detail-order-card {
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(13, 24, 39, .92), rgba(8, 14, 24, .88));
    border: 1px solid rgba(118, 145, 174, .18);
    box-shadow: 0 28px 70px rgba(0,0,0,.32);
    overflow: hidden;
}
.detail-main-card { padding: 20px; }
.detail-order-card {
    position: sticky;
    top: 92px;
    padding: 20px;
}
.detail-order-card h2 {
    margin: 0 0 18px;
    color: #f4f8ff;
    font-size: 26px;
}
.detail-hero {
    display: grid;
    grid-template-columns: minmax(360px, 1.2fr) minmax(320px, .9fr);
    gap: 20px;
    align-items: stretch;
}
.detail-shell .detail-gallery {
    margin: 0;
}
.detail-shell .detail-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 16px;
    background: #07101d;
    box-shadow: 0 18px 42px rgba(0,0,0,.34);
}
.detail-title-block {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 8px;
}
.detail-code {
    width: fit-content;
    display: inline-flex;
    padding: 5px 12px;
    border-radius: 999px;
    color: #07120f;
    background: linear-gradient(135deg, #4cf2b8, #59d8ff);
    font-size: 12px;
    font-weight: 900;
}
.detail-title-block h1 {
    margin: 14px 0 10px;
    color: #fff;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
}
.detail-title-block p {
    margin: 0;
    color: #aebcd0;
    line-height: 1.7;
}
.detail-title-tags,
.detail-attr-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}
.detail-title-tags span,
.attr-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    transition: transform .16s ease, box-shadow .16s ease;
}
.detail-title-tags span {
    color: #cfe0ef;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}
.detail-title-tags b {
    margin-left: 5px;
    color: #43e69b;
}
.attr-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 24px rgba(0,0,0,.20);
}
.detail-price-card {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(209, 255, 235, .96), rgba(227, 251, 255, .92));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.62), 0 18px 44px rgba(32,230,162,.10);
}
.detail-price-card div {
    min-height: 98px;
    padding: 13px;
    border-radius: 14px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(9, 92, 66, .12);
}
.detail-price-card small,
.material-card small {
    display: block;
    color: #506070;
    font-weight: 900;
}
.detail-price-card strong {
    display: block;
    margin-top: 8px;
    color: #079765;
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
}
.detail-price-card strong:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fff5b4, #ffc83d 50%, #ff7c1e);
    vertical-align: -1px;
}
.detail-price-card span {
    display: block;
    margin-top: 7px;
    color: #526273;
    font-size: 12px;
}
.detail-attr-grid {
    margin-top: 18px;
}
.attr-chip.asset {
    color: #d9efff;
    background: linear-gradient(135deg, rgba(35,120,255,.24), rgba(36,194,255,.18));
    border: 1px solid rgba(74,167,255,.34);
}
.attr-chip.rank {
    color: #fff2dd;
    background: linear-gradient(135deg, rgba(255,138,31,.30), rgba(255,91,47,.20));
    border: 1px solid rgba(255,138,31,.36);
}
.attr-chip.safe {
    color: #d8fff1;
    background: linear-gradient(135deg, rgba(32,230,162,.24), rgba(16,185,129,.16));
    border: 1px solid rgba(32,230,162,.36);
}
.attr-chip.cert {
    color: #d3dfeb;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.13);
}
.material-card,
.detail-info-grid,
.service-row,
.detail-tabs,
.tab-content {
    margin-top: 18px;
}
.material-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(238, 244, 250, .08);
    border: 1px solid rgba(255,255,255,.10);
}
.material-card div {
    min-height: 110px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
}
.material-card p {
    margin: 10px 0 0;
    color: #e7f2ff;
    line-height: 1.7;
}
.detail-info-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 12px;
}
.remark-card,
.cashback-card {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
}
.remark-card {
    background: rgba(255,255,255,.08);
}
.cashback-card {
    background: linear-gradient(135deg, rgba(255,138,31,.18), rgba(255,214,102,.08));
    border-color: rgba(255,138,31,.24);
}
.remark-card h2,
.cashback-card h2 {
    margin: 0 0 8px;
    color: #fff;
}
.cashback-card h2 {
    color: #ffb25b;
}
.remark-card p,
.cashback-card p,
.tab-content p {
    margin: 0;
    color: #c1cedd;
    line-height: 1.8;
}
.service-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 120px;
    gap: 10px;
}
.service-row span,
.service-row a {
    display: grid;
    place-items: center;
    min-height: 48px;
    border-radius: 14px;
    color: #dff8ef;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    font-weight: 900;
}
.service-row a {
    color: #06130f;
    background: linear-gradient(135deg, #4cf2b8, #59d8ff);
}
.detail-tabs {
    display: flex;
    gap: 20px;
    padding: 0 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
}
.detail-tabs a {
    position: relative;
    padding: 15px 0;
    color: #9eacbc;
    font-weight: 900;
}
.detail-tabs a.active {
    color: #fff;
}
.detail-tabs a.active:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #43e69b;
    box-shadow: 0 0 18px rgba(67,230,155,.42);
}
.tab-content {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}
.detail-action-grid {
    display: grid;
    gap: 10px;
}
.detail-btn {
    display: grid;
    place-items: center;
    min-height: 54px;
    padding: 9px 12px;
    border: 0;
    border-radius: 15px;
    color: #111827;
    font-weight: 950;
    text-align: center;
    transition: transform .16s ease, box-shadow .16s ease;
}
.detail-btn span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
    opacity: .72;
}
.detail-btn:hover {
    transform: scale(1.025);
}
.detail-btn.favorite { background: linear-gradient(135deg, #ffd17a, #ff9b39); }
.detail-btn.share { background: linear-gradient(135deg, #8ff7c9, #35d99d); }
.detail-btn.copy { background: linear-gradient(135deg, #ffd1df, #ff90b5); }
.detail-btn.service {
    color: #fff;
    background: linear-gradient(135deg, #ff962f, #ff542f);
}
.detail-btn.order {
    color: #06130f;
    background: linear-gradient(135deg, #43e69b, #26bf79);
    box-shadow: 0 0 30px rgba(67,230,155,.22);
}
.detail-copybox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.zx-home-page .footer {
    background: rgba(3, 7, 13, .92);
    border-top: 1px solid rgba(255,255,255,.10);
    color: #91a3b8;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

@media (max-width: 1120px) {
    .zx-home-page .exchange-top { grid-template-columns: 1fr; }
    .zx-side-box { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .zx-hero-qr { display: none; }
    .zx-slide { width: calc(100% - 330px); }
    .detail-shell { grid-template-columns: 1fr; }
    .detail-order-card { position: static; }
    .detail-price-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .zx-top-main,
    .zx-top-inner { height: auto; }
    .zx-top-inner { padding: 12px 0; flex-direction: column; align-items: flex-start; }
    .zx-left-main { width: 100%; flex-direction: column; align-items: flex-start; gap: 10px; }
    .zx-menu-group { width: 100%; }
    .zx-right-main { width: 100%; overflow-x: auto; padding-bottom: 4px; }
    .zx-swiper-card { min-height: 360px; height: auto; }
    .zx-character { opacity: .32; left: -20px; }
    .zx-slide { width: auto; margin-left: 28px; padding: 34px 24px 34px 0; }
    .zx-slide h1 { font-size: 34px; }
    .zx-card-one, .zx-card-two, .zx-card-three, .zx-shield, .zx-rifle { display: none; }
    .zx-side-box { grid-template-columns: 1fr; }
    .detail-hero,
    .detail-info-grid,
    .material-card,
    .service-row { grid-template-columns: 1fr; }
    .detail-price-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .zx-home-page .exchange-home { width: calc(100% - 10px); }
    .zx-slide-actions { flex-direction: column; align-items: flex-start; }
    .trade-toolbar { border-radius: 14px; }
    .trade-table-wrap { padding: 6px; border-radius: 14px; }
    .detail-main-card,
    .detail-order-card { padding: 14px; border-radius: 14px; }
    .detail-price-card { grid-template-columns: 1fr; }
    .detail-title-tags,
    .detail-attr-grid { gap: 7px; }
}

/* 2026-07 首页电竞科技强化：只覆盖前台首页视觉与交互，不改业务字段 */
.zx-home-page {
    min-height: 100vh;
    color: #d9e7f6;
    background:
        radial-gradient(circle at 16% 8%, rgba(38, 191, 121, .20), transparent 28%),
        radial-gradient(circle at 84% 2%, rgba(69, 183, 255, .16), transparent 32%),
        linear-gradient(145deg, #03070d 0%, #07111f 46%, #04070c 100%);
    overflow-x: hidden;
}
.zx-home-page:before,
.zx-home-page:after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.zx-home-page:before {
    opacity: .34;
    background-image:
        linear-gradient(rgba(81, 255, 188, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 189, 255, .10) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.18));
    animation: xwGridFlow 32s linear infinite;
}
.zx-home-page:after {
    opacity: .56;
    background:
        radial-gradient(circle, rgba(83, 255, 191, .65) 0 1px, transparent 2px) 12% 16% / 120px 120px,
        radial-gradient(circle, rgba(102, 205, 255, .48) 0 1px, transparent 2px) 64% 20% / 160px 160px,
        linear-gradient(115deg, transparent 0 38%, rgba(73, 239, 183, .10) 44%, transparent 52% 100%);
    animation: xwParticleFloat 18s ease-in-out infinite alternate;
}
.zx-home-page .grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px),
        radial-gradient(circle at 50% 0, rgba(59, 225, 171, .10), transparent 45%);
}
.zx-home-page .container,
.zx-top-main,
.zx-home-page .footer {
    position: relative;
    z-index: 1;
}
.zx-top-main,
.zx-swiper-card,
.zx-side-box > *,
.trade-toolbar,
.ticker-row,
.trade-notice-panel,
.security-flow,
.trade-table-wrap,
.zx-home-page .pagination,
.zx-home-page .footer {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.zx-top-main {
    background: rgba(3, 8, 15, .74);
    border-bottom: 1px solid rgba(116, 255, 205, .16);
    box-shadow: 0 18px 48px rgba(0,0,0,.34), inset 0 -1px 0 rgba(255,255,255,.05);
}
.zx-logo-mark {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(85,255,196,.55);
    background: linear-gradient(135deg, rgba(35, 221, 151, .95), rgba(24, 106, 255, .90));
    box-shadow: 0 0 24px rgba(65, 235, 171, .32);
}
.zx-logo-mark:before {
    content: "";
    position: absolute;
    inset: 8px;
    clip-path: polygon(50% 0, 100% 86%, 0 86%);
    border: 2px solid rgba(3, 12, 18, .86);
}
.zx-menu-group a,
.zx-right-main a,
.zx-slide-actions a,
.quick-tabs a,
.table-search button,
.advanced-pop summary,
.order-btn,
.security-card,
.zx-slide-card,
.zx-news-img,
.zx-qrcode-card,
.zx-hero-qr-item,
.footer a {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.zx-menu-group a:before,
.zx-right-main a:before,
.zx-slide-actions a:before,
.quick-tabs a:before,
.table-search button:before,
.advanced-pop summary:before,
.order-btn:before,
.security-card:before,
.zx-slide-card:before,
.zx-news-img:before,
.zx-qrcode-card:before,
.zx-hero-qr-item:before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    opacity: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent, rgba(74,255,191,.42), rgba(69,185,255,.38), transparent);
    transform: translateX(-40%);
    transition: opacity .18s ease;
}
.zx-menu-group a:hover:before,
.zx-right-main a:hover:before,
.zx-slide-actions a:hover:before,
.quick-tabs a:hover:before,
.table-search button:hover:before,
.advanced-pop summary:hover:before,
.order-btn:hover:before,
.security-card:hover:before,
.zx-slide-card:hover:before,
.zx-news-img:hover:before,
.zx-qrcode-card:hover:before,
.zx-hero-qr-item:hover:before {
    opacity: 1;
    animation: xwBorderFlow 1.4s linear infinite;
}
.zx-menu-group a:hover,
.zx-right-main a:hover,
.zx-slide-actions a:hover,
.quick-tabs a:hover,
.table-search button:hover,
.advanced-pop summary:hover,
.order-btn:hover,
.security-card:hover,
.zx-slide-card:hover,
.zx-news-img:hover,
.zx-qrcode-card:hover,
.zx-hero-qr-item:hover,
.trade-table tbody tr:hover {
    transform: translateY(-2px);
}
.is-pressing {
    transform: translateY(1px) scale(.985) !important;
}
.zx-menu-group a.active,
.quick-tabs a.active,
.zx-login-action,
.order-btn {
    animation: xwSoftPulse 2.8s ease-in-out infinite;
}
.ui-icon,
.nav-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    vertical-align: -4px;
    color: currentColor;
    position: relative;
    flex: 0 0 auto;
}
.ui-svg {
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 7px;
    vertical-align: -3px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.zx-menu-group a,
.zx-right-main a,
.quick-tabs a,
.ticker-row span,
.trade-notice-panel b,
.page-header .btn {
    display: inline-flex;
    align-items: center;
}
.zx-right-main .ui-svg {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    color: #37f0d0;
}
.quick-tabs .ui-svg {
    width: 16px;
    height: 16px;
}
.ticker-row .ui-svg,
.trade-notice-panel .ui-svg {
    width: 16px;
    height: 16px;
}
.ui-icon:before,
.ui-icon:after,
.nav-icon:before,
.nav-icon:after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}
.icon-crosshair:before { inset: 2px; border: 2px solid currentColor; border-radius: 50%; }
.icon-crosshair:after { left: 8px; top: 0; width: 2px; height: 18px; background: currentColor; box-shadow: -8px 8px 0 -7px currentColor, 8px 8px 0 -7px currentColor; }
.icon-coin:before { inset: 2px; border-radius: 50%; border: 2px solid currentColor; }
.icon-coin:after { left: 7px; top: 4px; width: 4px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.icon-grid:before { inset: 2px; border: 2px solid currentColor; box-shadow: 7px 0 0 -1px transparent; }
.icon-grid:after { left: 8px; top: 2px; width: 2px; height: 14px; background: currentColor; box-shadow: -6px 6px 0 -1px currentColor, 6px 6px 0 -1px currentColor; opacity: .8; }
.icon-ruler:before { left: 2px; top: 8px; width: 14px; height: 4px; border: 2px solid currentColor; transform: rotate(-24deg); }
.icon-order:before { left: 4px; top: 2px; width: 11px; height: 14px; border: 2px solid currentColor; border-radius: 3px; }
.icon-order:after { left: 7px; top: 6px; width: 6px; height: 2px; background: currentColor; box-shadow: 0 4px currentColor; }
.icon-shield:before { left: 3px; top: 1px; width: 12px; height: 15px; border: 2px solid currentColor; border-radius: 8px 8px 10px 10px; clip-path: polygon(50% 0, 100% 18%, 88% 76%, 50% 100%, 12% 76%, 0 18%); }
.icon-upload:before { left: 4px; top: 9px; width: 10px; height: 7px; border: 2px solid currentColor; border-top: 0; border-radius: 2px; }
.icon-upload:after { left: 8px; top: 2px; width: 2px; height: 9px; background: currentColor; box-shadow: -3px 3px 0 -1px currentColor, 3px 3px 0 -1px currentColor; }
.icon-service:before { left: 3px; top: 3px; width: 12px; height: 10px; border: 2px solid currentColor; border-radius: 8px; }
.icon-service:after { right: 1px; bottom: 2px; width: 6px; height: 2px; background: currentColor; }
.icon-bell:before { left: 4px; top: 3px; width: 10px; height: 11px; border: 2px solid currentColor; border-radius: 8px 8px 4px 4px; }
.icon-bell:after { left: 7px; bottom: 1px; width: 4px; height: 2px; border-radius: 3px; background: currentColor; }
.icon-star:before { inset: 2px; background: currentColor; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 80% 92%, 50% 70%, 20% 92%, 32% 56%, 2% 35%, 39% 35%); }
.icon-admin:before { inset: 2px; border: 2px solid currentColor; border-radius: 3px; }
.icon-admin:after { left: 5px; top: 6px; width: 8px; height: 2px; background: currentColor; box-shadow: 0 4px currentColor; }
.icon-user:before { left: 6px; top: 2px; width: 6px; height: 6px; border: 2px solid currentColor; border-radius: 50%; }
.icon-user:after { left: 3px; bottom: 1px; width: 12px; height: 7px; border: 2px solid currentColor; border-radius: 9px 9px 2px 2px; }
.icon-login:before { left: 2px; top: 3px; width: 9px; height: 12px; border: 2px solid currentColor; border-right: 0; }
.icon-login:after { right: 1px; top: 8px; width: 11px; height: 2px; background: currentColor; box-shadow: -3px -3px 0 -1px currentColor, -3px 3px 0 -1px currentColor; }
.icon-register:before { left: 3px; top: 3px; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; }
.icon-register:after { left: 8px; top: 5px; width: 2px; height: 8px; background: currentColor; box-shadow: -3px 3px 0 -1px currentColor, 3px 3px 0 -1px currentColor; }
.icon-logout:before { right: 2px; top: 3px; width: 9px; height: 12px; border: 2px solid currentColor; border-left: 0; }
.icon-logout:after { left: 1px; top: 8px; width: 11px; height: 2px; background: currentColor; box-shadow: 3px -3px 0 -1px currentColor, 3px 3px 0 -1px currentColor; }
.icon-alert:before { left: 8px; top: 3px; width: 2px; height: 8px; background: currentColor; box-shadow: 0 10px 0 0 currentColor; }
.icon-alert:after { inset: 1px; border: 2px solid currentColor; clip-path: polygon(50% 0, 100% 92%, 0 92%); }
.icon-lightning:before { inset: 1px 4px; background: currentColor; clip-path: polygon(58% 0, 22% 52%, 50% 52%, 36% 100%, 82% 40%, 55% 40%); }
.icon-fire:before { inset: 2px 4px; background: currentColor; clip-path: polygon(55% 0, 84% 38%, 74% 82%, 50% 100%, 24% 84%, 14% 52%, 37% 28%); }
.icon-tag:before { inset: 3px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-18deg); }
.icon-tag:after { left: 5px; top: 5px; width: 4px; height: 4px; border: 1px solid currentColor; border-radius: 50%; }
.icon-cashback:before { inset: 3px; border: 2px solid currentColor; border-radius: 50%; }
.icon-cashback:after { left: 5px; top: 8px; width: 8px; height: 2px; background: currentColor; box-shadow: 2px -3px 0 -1px currentColor, 2px 3px 0 -1px currentColor; }
.icon-location:before { left: 4px; top: 1px; width: 10px; height: 14px; border: 2px solid currentColor; border-radius: 9px 9px 9px 2px; transform: rotate(45deg); }
.icon-location:after { left: 7px; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.zx-menu-group a {
    color: #c9d8e6;
    border: 1px solid transparent;
    border-radius: 12px;
}
.zx-menu-group a:hover,
.zx-menu-group a.active {
    color: #eafff7;
    border-color: rgba(78, 244, 184, .28);
    background: rgba(75, 255, 190, .08);
    box-shadow: 0 0 24px rgba(67,230,155,.12);
}
.zx-right-main a {
    color: #d4e3f3;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.05);
}
.zx-right-main .nav-icon {
    display: grid;
    place-items: center;
    margin-right: 6px;
}
.zx-swiper-card {
    border: 1px solid rgba(116,255,205,.18);
    background:
        linear-gradient(90deg, rgba(3,9,17,.86) 0 48%, rgba(6, 34, 46, .58)),
        radial-gradient(circle at 78% 18%, rgba(70, 222, 166, .18), transparent 36%);
    box-shadow: 0 28px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
}
.zx-swiper-card:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .22;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 0 35%, rgba(75,255,190,.22) 44%, transparent 52%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 18px);
    animation: xwLightSweep 5.8s ease-in-out infinite;
}
.zx-slide-tag {
    color: #06120e;
    background: linear-gradient(135deg, #5ef4ba, #6bdcff);
    box-shadow: 0 0 22px rgba(94,244,186,.24);
}
.zx-slide h1 {
    text-shadow: 0 0 28px rgba(72, 226, 171, .18);
}
.zx-slide-actions a {
    border: 1px solid rgba(255,255,255,.13);
    color: #07120f;
    background: linear-gradient(135deg, #59f0b2, #4bc8ff);
    box-shadow: 0 16px 36px rgba(29, 214, 152, .20);
}
.zx-slide-actions .warning-link {
    color: #fff5e9;
    background: linear-gradient(135deg, #ff9142, #ff4f3a);
    box-shadow: 0 16px 36px rgba(255, 112, 55, .22);
}
.zx-slide-card,
.zx-news-img,
.zx-qrcode-card,
.zx-hero-qr-item {
    color: #e8f6ff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(9, 22, 35, .62);
    box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
.zx-slide-card {
    display: inline-flex;
    align-items: center;
}
.zx-side-box > * {
    border: 1px solid rgba(116,255,205,.14);
    background: rgba(5, 14, 24, .74);
    box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
.zx-login-box a {
    background: linear-gradient(135deg, #59f0b2, #46d3ff);
    color: #06120e;
    box-shadow: 0 0 24px rgba(72, 226, 171, .20);
}
.fake-qr {
    background:
        linear-gradient(90deg, #07111d 8px, transparent 8px) 0 0 / 16px 16px,
        linear-gradient(#07111d 8px, transparent 8px) 0 0 / 16px 16px,
        #e7fff6;
    border: 6px solid rgba(255,255,255,.92);
    box-shadow: inset 0 0 0 1px rgba(4, 16, 22, .16), 0 10px 24px rgba(0,0,0,.20);
}
.trade-toolbar {
    border: 1px solid rgba(116,255,205,.15);
    background: rgba(5, 15, 25, .72);
    box-shadow: 0 20px 54px rgba(0,0,0,.32);
}
.quick-tabs a {
    color: #e7f5ff;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(135deg, rgba(255, 139, 57, .82), rgba(255, 84, 51, .82));
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
}
.quick-tabs a.green,
.quick-tabs a.active {
    color: #07120f;
    background: linear-gradient(135deg, #5df0b5, #37c6ff);
}
.quick-tabs a.hot:after {
    content: "HOT";
    position: absolute;
    top: -7px;
    right: -2px;
    padding: 2px 5px;
    border-radius: 999px;
    color: #fff;
    background: #ff3d35;
    font-size: 10px;
    letter-spacing: 0;
}
.table-search input,
.advanced-panel input,
.advanced-panel select {
    color: #eaf5ff;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.table-search input::placeholder {
    color: rgba(219, 232, 244, .58);
}
.table-search button,
.advanced-pop summary {
    color: #e9f7ff;
    border: 1px solid rgba(116,255,205,.18);
    background: linear-gradient(135deg, rgba(13,24,35,.96), rgba(15,44,54,.96));
}
.advanced-panel {
    border: 1px solid rgba(116,255,205,.16);
    background: rgba(5, 16, 27, .96);
    box-shadow: 0 24px 64px rgba(0,0,0,.42);
}
.ticker-row,
.trade-notice-panel {
    border: 1px solid rgba(116,255,205,.15);
    color: #dfefff;
    background: rgba(6, 17, 28, .70);
    box-shadow: 0 18px 42px rgba(0,0,0,.24);
}
.ticker-row span,
.trade-notice-panel b {
    display: inline-flex;
    align-items: center;
}
.trade-notice-panel {
    border-color: rgba(255, 133, 66, .28);
    background: linear-gradient(135deg, rgba(42,18,8,.78), rgba(6,17,28,.78));
}
.trade-notice-panel b {
    color: #ffb36d;
}
.security-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 14px 0 18px;
}
.security-card {
    min-height: 132px;
    padding: 18px;
    border-radius: 18px;
    color: #dcecff;
    text-decoration: none;
    border: 1px solid rgba(116,255,205,.14);
    background: linear-gradient(145deg, rgba(8,22,35,.76), rgba(10,35,39,.58));
    box-shadow: 0 20px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.security-card .ui-icon {
    width: 26px;
    height: 26px;
    color: #54efb6;
}
.security-card b,
.security-card span {
    display: block;
}
.security-card b {
    margin-top: 12px;
    color: #fff;
    font-size: 16px;
}
.security-card span {
    margin-top: 7px;
    color: #9fb3c8;
    font-size: 13px;
    line-height: 1.6;
}
.trade-table-wrap {
    border: 1px solid rgba(116,255,205,.13);
    background: rgba(6, 15, 25, .78);
    box-shadow: 0 24px 70px rgba(0,0,0,.36);
}
.trade-table {
    border-collapse: separate;
    border-spacing: 0;
}
.trade-table th {
    color: #f3fbff;
    background: linear-gradient(180deg, rgba(14, 29, 45, .98), rgba(6, 14, 24, .98));
    border-bottom: 1px solid rgba(116,255,205,.15);
}
.trade-table th:after {
    border-top-color: rgba(89, 240, 178, .85);
}
.trade-table td {
    color: #1d2b3a;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.trade-table tbody tr {
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease;
}
.trade-table tbody tr:nth-child(even) td {
    background: rgba(241, 247, 250, .96);
}
.trade-table tbody tr:nth-child(odd) td {
    background: rgba(255, 255, 255, .98);
}
.trade-table tbody tr:hover td {
    background: #eafcff;
}
.id-flag,
.zone-pill,
.login-pill,
.rank-pill,
.ratio-pill,
.level-pill,
.safe-pill {
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.rank-pill {
    background: linear-gradient(135deg, #ffb15f, #ff7042);
    color: #fff;
}
.zone-pill {
    background: linear-gradient(135deg, #3edda4, #32b8ff);
    color: #062018;
}
.login-pill,
.level-pill {
    background: #eef4fb;
    color: #26394c;
}
.safe-pill {
    color: #07331f;
    background: linear-gradient(135deg, #b7ffe0, #78e7ff);
}
.ratio-pill {
    color: #fff;
    background: linear-gradient(135deg, #213247, #0e1827);
}
.money-cell,
.deposit-cell {
    white-space: nowrap;
    font-weight: 950;
}
.money-cell {
    color: #f06423 !important;
}
.deposit-cell {
    color: #08865d !important;
}
.money-cell:before,
.deposit-cell:before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fff8ba, #ffc533 48%, #ff7b2a);
    vertical-align: -2px;
    box-shadow: 0 0 10px rgba(255, 188, 53, .36);
}
.thumb-link {
    display: inline-block;
    border-radius: 10px;
}
.table-thumb {
    border: 1px solid rgba(13, 24, 36, .08);
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
    transition: transform .18s ease, filter .18s ease;
}
.thumb-link:hover .table-thumb {
    transform: scale(1.04);
    filter: saturate(1.12);
}
.note-cell a {
    color: #16324a;
    font-weight: 800;
    text-decoration: none;
}
.note-cell a:hover {
    color: #0c9b70;
}
.order-btn {
    color: #06130f;
    border: 1px solid rgba(255,255,255,.35);
    background: linear-gradient(135deg, #68f2bb, #31cb77);
    box-shadow: 0 10px 24px rgba(44, 204, 123, .24);
}
.order-btn:hover {
    color: #06130f;
    background: linear-gradient(135deg, #7affcc, #36e786);
    box-shadow: 0 0 24px rgba(54, 231, 134, .36);
}
.site-modal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    z-index: 50;
    padding: 20px;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(10px);
}
.site-modal.show {
    display: grid;
}
.site-modal-card {
    position: relative;
    width: min(420px, 92vw);
    padding: 28px;
    border-radius: 22px;
    color: #eaf6ff;
    text-align: center;
    border: 1px solid rgba(116,255,205,.20);
    background: linear-gradient(145deg, rgba(7, 19, 32, .96), rgba(8, 42, 42, .92));
    box-shadow: 0 30px 90px rgba(0,0,0,.52);
}
.site-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: #eaf6ff;
    background: rgba(255,255,255,.10);
    cursor: pointer;
}
.site-modal-icon {
    width: 92px;
    height: 92px;
    margin: 0 auto 16px;
    border-radius: 20px;
    background:
        linear-gradient(90deg, #07111d 8px, transparent 8px) 0 0 / 16px 16px,
        linear-gradient(#07111d 8px, transparent 8px) 0 0 / 16px 16px,
        #e7fff6;
    border: 8px solid #fff;
}
.site-modal-card h3 {
    margin: 0;
    color: #fff;
}
.site-modal-card p {
    margin: 10px 0 18px;
    color: #adc0d1;
    line-height: 1.7;
}
.site-modal-card a {
    display: inline-flex;
    padding: 11px 18px;
    border-radius: 999px;
    color: #06120f;
    text-decoration: none;
    font-weight: 900;
    background: linear-gradient(135deg, #59f0b2, #46d3ff);
}
@keyframes xwGridFlow {
    from { background-position: 0 0, 0 0; }
    to { background-position: 116px 58px, 116px 58px; }
}
@keyframes xwParticleFloat {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-18px, 24px, 0); }
}
@keyframes xwBorderFlow {
    from { transform: translateX(-55%); }
    to { transform: translateX(55%); }
}
@keyframes xwSoftPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(67,230,155,.14); }
    50% { box-shadow: 0 0 30px rgba(67,230,155,.30); }
}
@keyframes xwLightSweep {
    0%, 100% { transform: translateX(-22%); opacity: .12; }
    50% { transform: translateX(26%); opacity: .30; }
}
@media (max-width: 1120px) {
    .security-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .security-flow { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .zx-home-page:before,
    .zx-home-page:after,
    .zx-swiper-card:before,
    .zx-menu-group a.active,
    .quick-tabs a.active,
    .zx-login-action,
    .order-btn {
        animation: none !important;
    }
    .zx-menu-group a,
    .zx-right-main a,
    .zx-slide-actions a,
    .quick-tabs a,
    .order-btn,
    .security-card,
    .trade-table tbody tr {
        transition: none !important;
    }
}

/* 商品详情页转化型重构 */
.detail-commerce {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
}
.detail-title-compact {
    display: block;
    min-height: auto;
    padding: 0;
}
.detail-title-compact h1 {
    max-width: 980px;
    margin: 14px 0 8px;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.18;
}
.detail-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.detail-trust-row span {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    color: #d7e7f8;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.11);
    font-size: 13px;
    font-weight: 800;
}
.detail-trust-row .trust-good {
    color: #09231a;
    background: linear-gradient(135deg, #8dffd1, #43e69b);
}
.detail-key-card {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.detail-key-card div {
    min-height: 90px;
}
.detail-key-card strong {
    font-size: 25px;
}
.detail-gallery-compact {
    margin-top: 18px !important;
}
.detail-cover-link {
    position: relative;
    display: block;
    color: #eafff6;
    text-decoration: none;
}
.detail-cover-link span {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #07120f;
    background: rgba(90, 245, 184, .92);
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(0,0,0,.24);
}
.detail-gallery-compact .detail-cover {
    max-height: 360px;
    object-fit: cover;
}
.thumb-row-buttons {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.thumb-row-buttons button {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}
.thumb-row-buttons button.active,
.thumb-row-buttons button:hover {
    border-color: rgba(67,230,155,.85);
    box-shadow: 0 0 18px rgba(67,230,155,.22);
}
.attr-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}
.attr-section {
    padding: 15px;
    border-radius: 16px;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.10);
}
.attr-section h2 {
    margin: 0 0 12px;
    color: #f5f9ff;
    font-size: 16px;
}
.attr-section .detail-attr-grid {
    margin-top: 0;
}
.material-card-enhanced div {
    background: rgba(255,255,255,.095);
}
.material-card-enhanced .gift-card {
    background: linear-gradient(135deg, rgba(255,138,31,.28), rgba(255,198,83,.13));
    border-color: rgba(255,171,72,.34);
}
.material-card-enhanced .gift-card small,
.material-card-enhanced .gift-card p {
    color: #fff3df;
}
.service-row-compact span {
    display: inline-flex;
    gap: 6px;
}
.detail-order-sticky {
    top: 84px;
}
.order-price-hero {
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(214,255,236,.98), rgba(228,250,255,.94));
    border: 1px solid rgba(255,255,255,.62);
    box-shadow: 0 18px 38px rgba(40,230,162,.12);
}
.order-price-hero small,
.order-price-hero span {
    display: block;
    color: #526273;
    font-weight: 900;
}
.order-price-hero strong {
    display: block;
    margin: 6px 0 7px;
    color: #079765;
    font-size: 38px;
    line-height: 1;
    font-weight: 950;
}
.order-checkout-form {
    margin-top: 14px;
}
.checkout-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
}
.checkout-steps span {
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 6px;
    border-radius: 10px;
    color: #b9c9d8;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}
.day-pills {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 9px;
}
.day-pills button,
.mini-action {
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    color: #d9e9f8;
    background: rgba(255,255,255,.07);
    font-weight: 900;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.day-pills button.active,
.day-pills button:hover {
    color: #06130f;
    background: linear-gradient(135deg, #5ef0b7, #42d8ff);
    box-shadow: 0 0 20px rgba(67,230,155,.22);
}
.day-input {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.13);
    color: #f1f7ff;
    background: rgba(255,255,255,.08);
    padding: 0 12px;
}
.checkout-total {
    display: grid;
    gap: 8px;
    margin: 13px 0;
    padding: 13px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}
.checkout-total div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #aebed0;
    font-size: 13px;
}
.checkout-total b {
    color: #f5fbff;
    font-size: 15px;
}
.checkout-total .total {
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.10);
}
.checkout-total .total b {
    color: #43e69b;
    font-size: 22px;
}
.payment-options {
    display: grid;
    gap: 8px;
}
.payment-options label {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    align-items: center;
    min-height: 46px;
    padding: 10px;
    border-radius: 13px;
    color: #ecf6ff;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.10);
    font-weight: 900;
}
.payment-options small {
    grid-column: 2;
    color: #96a9bc;
    font-weight: 700;
}
.primary-order-btn {
    width: 100%;
    min-height: 62px;
    margin-top: 12px;
    font-size: 18px;
}
.secondary-service-btn {
    margin-top: 10px;
}
.order-safe-list {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    color: #aebed0;
    font-size: 13px;
}
.order-safe-list span {
    display: inline-flex;
    align-items: center;
}
.order-safe-list .ui-svg {
    color: #43e69b;
}
.detail-side-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.mini-action:hover {
    transform: translateY(-2px);
}
@media (max-width: 1120px) {
    .detail-commerce {
        grid-template-columns: 1fr;
    }
    .detail-order-sticky {
        position: static;
    }
}
@media (max-width: 760px) {
    .detail-key-card,
    .attr-section-grid,
    .material-card-enhanced,
    .detail-info-grid {
        grid-template-columns: 1fr;
    }
    .day-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}