:root {--bg: #070b17;--panel: rgba(255, 255, 255, .05);--border: rgba(255, 255, 255, .09);--accent: #22d3ee;--accent2: #818cf8;--text: #e8ecf4;--muted: #93a0b5;--dialog-bg: #0f1526;--accent-bg: rgba(34, 211, 238, .1);}
body.skin-violet {--accent: #a78bfa;--accent2: #e879f9;--bg: #0c0717;--dialog-bg: #150a26;}
body.skin-emerald {--accent: #34d399;--accent2: #38bdf8;--bg: #04120e;--dialog-bg: #0a1f18;}
body.skin-rose {--accent: #fb7185;--accent2: #f59e0b;--bg: #160a0d;--dialog-bg: #1f1014;}
body.skin-ocean {--accent: #38bdf8;--accent2: #22d3ee;--bg: #07101b;--dialog-bg: #0e1b2e;}
body.skin-amber {--accent: #fbbf24;--accent2: #fb923c;--bg: #140f05;--dialog-bg: #241b0b;}
body.skin-obsidian {--accent: #64748b;--accent2: #94a3b8;--bg: #08080b;--dialog-bg: #14141b;}
body.skin-crimson {--accent: #ef4444;--accent2: #f87171;--bg: #120505;--dialog-bg: #220b0b;}
body.skin-mint {--accent: #2dd4bf;--accent2: #5eead4;--bg: #051210;--dialog-bg: #0b2420;}
body.skin-indigo {--accent: #818cf8;--accent2: #a5b4fc;--bg: #090b1a;--dialog-bg: #131733;}
body.skin-slate {--accent: #9ca3af;--accent2: #d1d5db;--bg: #0b0c0e;--dialog-bg: #17181c;}
body.skin-lava {--accent: #f97316;--accent2: #ef4444;--bg: #110704;--dialog-bg: #230e08;}
body.skin-teal {--accent: #14b8a6;--accent2: #2dd4bf;--bg: #041010;--dialog-bg: #0a2020;}
body.skin-fuchsia {--accent: #d946ef;--accent2: #f0abfc;--bg: #120714;--dialog-bg: #220d26;}
body.skin-sky {--accent: #0ea5e9;--accent2: #38bdf8;--bg: #060d16;--dialog-bg: #0c1a2b;}
body.skin-grape {--accent: #9333ea;--accent2: #a855f7;--bg: #0e0618;--dialog-bg: #1c0c2e;}
body.skin-copper {--accent: #dd8048;--accent2: #fb923c;--bg: #110906;--dialog-bg: #21130c;}
body.skin-forest {--accent: #22c55e;--accent2: #4ade80;--bg: #051007;--dialog-bg: #0b2210;}
body.skin-plum {--accent: #c084fc;--accent2: #e879f9;--bg: #0f0816;--dialog-bg: #1d0f29;}
* {margin: 0;padding: 0;box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;background: radial-gradient(900px 600px at 8% -10%, rgba(34, 211, 238, .14), transparent 60%),radial-gradient(900px 700px at 100% 10%, rgba(129, 140, 248, .16), transparent 60%),radial-gradient(800px 600px at 50% 110%, rgba(34, 197, 94, .08), transparent 60%),var(--bg);color: var(--text);min-height: 100vh;line-height: 1.5;transition: background .4s ease, color .4s ease;}
.wrap {max-width: 1180px;margin: 0 auto;padding: 0 20px;}
* {scrollbar-width: thin;scrollbar-color: #334155 transparent;}
::-webkit-scrollbar {width: 7px;height: 7px;}
::-webkit-scrollbar-thumb {background: #334155;border-radius: 6px;}
::-webkit-scrollbar-track {background: transparent;}
.nav {position: sticky;top: 0;z-index: 50;background: rgba(7, 11, 23, .75);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);border-bottom: 1px solid var(--border);}
.nav-inner {display: flex;align-items: center;justify-content: space-between;gap: 16px;height: 64px;}
.logo {display: flex;align-items: center;gap: 10px;font-weight: 800;font-size: 19px;letter-spacing: .5px;color: var(--text);text-decoration: none;}
.logo-ico {width: 34px;height: 34px;border-radius: 10px;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, var(--accent), var(--accent2));color: #fff;font-size: 17px;box-shadow: 0 6px 18px rgba(34, 211, 238, .35);}
.nav-links {display: flex;align-items: center;gap: 6px;}
.nav-links .nl {padding: 8px 13px;border-radius: 10px;cursor: pointer;color: var(--muted);font-size: 14px;transition: .2s;display: flex;align-items: center;gap: 6px;white-space: nowrap;}
.nav-links .nl:hover {color: var(--text);background: var(--panel);}
.nav-ad {position: relative;height: 32px;min-width: 120px;display: flex;align-items: center;margin: 0 4px;}
.nav-ad-item {position: absolute;left: 0;opacity: 0;pointer-events: none;transition: opacity .6s ease;font-size: 13px;white-space: nowrap;}
.nav-ad-item.active {opacity: 1;pointer-events: auto;}
.nav-ad-item a {color: var(--accent);text-decoration: none;font-weight: 600;display: flex;align-items: center;gap: 5px;}
.nav-ad-item a:hover {filter: brightness(1.2);}
.search-wrap {position: relative;}
.search {display: flex;align-items: center;gap: 0;}
.search input {width: 190px;padding: 8px 14px;border-radius: 10px 0 0 10px;border: 1px solid var(--border);background: rgba(255, 255, 255, .05);color: var(--text);font-size: 13px;outline: none;transition: .2s;}
.search input:focus {border-color: var(--accent);}
.search button {padding: 8px 14px;border-radius: 0 10px 10px 0;border: 1px solid var(--border);border-left: none;background: linear-gradient(135deg, var(--accent), var(--accent2));color: #fff;cursor: pointer;font-size: 13px;font-weight: 600;}
.hot-search {position: absolute;top: 100%;left: 0;right: 0;background: var(--panel);border: 1px solid var(--border);border-radius: 8px;margin-top: 4px;padding: 8px;display: none;z-index: 100;box-shadow: 0 4px 12px rgba(0, 0, 0, .1);backdrop-filter: blur(10px);}
.hot-search-title {font-size: 12px;color: var(--muted);margin-bottom: 6px;}
.hot-search-item {padding: 6px 8px;font-size: 13px;cursor: pointer;border-radius: 4px;}
.hot-search-item:hover {background: var(--bg);}
.hero {margin: 16px 0 16px;text-align: center;padding: 20px 20px 18px;position: relative;overflow: hidden;background: linear-gradient(150deg, rgba(34, 211, 238, .10), rgba(129, 140, 248, .12) 55%, rgba(34, 197, 94, .08));border: 1px solid var(--border);border-radius: 18px;}
.hero::before {content: "";position: absolute;width: 220px; height: 220px;border-radius: 50%;filter: blur(70px);background: rgba(34, 211, 238, .25);top: -80px;left: 10%;}
.hero::after {content: "";position: absolute;width: 200px;height: 200px;border-radius: 50%;filter: blur(70px);background: rgba(129, 140, 248, .28);bottom: -90px;right: 8%;}
.hero h1 {position: relative;font-size: clamp(22px, 3vw, 30px); font-weight: 800;letter-spacing: 1px;line-height: 1.2;background: linear-gradient(90deg, #fff 0%, #a5f3fc 30%, #e9d5ff 50%, #a5f3fc 70%, #fff 100%);background-size: 220% auto;-webkit-background-clip: text;background-clip: text;color: transparent;animation: shimmer 3.2s linear infinite;}
.hero p {position: relative;color: var(--muted);margin: 6px 0 12px;font-size: 13px;}
.hero-stats {position: relative;display: flex;justify-content: center;gap: 10px;flex-wrap: wrap;}
.hstat {background: rgba(255, 255, 255, .06);border: 1px solid var(--border);border-radius: 10px;padding: 8px 14px;min-width: 100px;}
.hstat b {display: block;font-size: 18px;color: var(--text);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 120px;}
.hstat span {font-size: 11px; color: var(--muted);}
.hero-trust {display: flex;gap: 16px; justify-content: center;margin-top: 12px; color: var(--muted);font-size: 12px; flex-wrap: wrap;}
.hero-trust i {color: var(--accent);margin-right: 4px;}
.hstat {background: rgba(255, 255, 255, .06);border: 1px solid var(--border);border-radius: 12px;padding: 10px 18px;min-width: 120px;}
.hstat b {display: block;font-size: 20px;color: var(--text);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 140px;}
.hstat span {font-size: 12px;color: var(--muted);}
.hero-trust {display: flex;gap: 20px;justify-content: center;margin-top: 18px;color: var(--muted);font-size: 13px;flex-wrap: wrap;}
.hero-trust i {color: var(--accent);margin-right: 4px;}
.ticker {margin-top: 10px;margin-bottom: 22px;background: var(--panel);border: 1px solid var(--border);border-radius: 14px;padding: 14px 16px;display: flex;align-items: center;gap: 12px;overflow: hidden;}
.ticker-tag {flex-shrink: 0;display: flex;align-items: center;gap: 6px;font-size: 13px;color: #34d399;font-weight: 600;}
.ticker-tag i {animation: spin 1.6s linear infinite;}
.trade-inner {flex: 1;white-space: nowrap;overflow: hidden;color: var(--muted);font-size: 13px;transition: opacity 1.4s ease;}
.trade-text {display: inline;line-height: 24px;}
.main-container {display: flex;gap: 20px;align-items: flex-start;}
.sidebar {width: 260px;flex-shrink: 0;position: sticky;top: 84px;}
.content {flex: 1;min-width: 0;}
.cats {margin-bottom: 22px;background: var(--panel);border: 1px solid var(--border);border-radius: 16px;padding: 16px;}
.cats-head {display: flex;align-items: center;justify-content: space-between;margin-bottom: 12px;}
.cats-head h3 {font-size: 17px;font-weight: 700;}
.cats-head span {color: var(--muted);font-size: 12px;}
.cats-row {display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px;}
.cat-chip {padding: 8px 12px;border-radius: 999px;cursor: pointer;font-size: 13px;background: var(--bg);border: 1px solid var(--border);color: var(--muted);transition: .2s;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.cat-chip:hover {color: var(--text);border-color: var(--accent);}
.cat-chip.active {color: #fff;background: linear-gradient(135deg, var(--accent), var(--accent2));border-color: transparent;font-weight: 600;}
.sort-bar {display: flex;align-items: center;gap: 16px;margin: 0 0 12px;font-size: 13px;color: var(--muted);}
.sort-item {cursor: pointer;padding: 4px 8px;border-radius: 6px;transition: .2s;}
.sort-item.active {color: var(--accent);background: var(--accent-bg);}
.section-title {font-size: 19px;font-weight: 800;margin: 0 0 16px;background: linear-gradient(90deg, var(--text), var(--accent), var(--text));background-size: 220% auto;-webkit-background-clip: text;background-clip: text;color: transparent;animation: shimmer 4s linear infinite;}
.goods-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 18px;}
.p-card {display: flex;flex-direction: column;border-radius: 18px;overflow: hidden;border: 1px solid var(--border);background: var(--panel);backdrop-filter: blur(10px);transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;}
.p-card:hover {transform: translateY(-2px);box-shadow: 0 6px 16px rgba(0, 0, 0, .08);border-color: rgba(34, 211, 238, .4);}
.p-art {position: relative;height: 130px;display: flex;align-items: center;justify-content: center;overflow: hidden;background: linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(129, 140, 248, .18) 60%, rgba(34, 197, 94, .12));}
.p-art::after {content: "";position: absolute;width: 160px;height: 160px;border-radius: 50%;filter: blur(50px);background: rgba(34, 211, 238, .15);}
.p-art-char {position: relative;z-index: 1;font-size: 44px;font-weight: 800;color: rgba(255, 255, 255, .85);text-shadow: 0 8px 24px rgba(34, 211, 238, .5);}
.p-img {position: absolute;inset: 0;z-index: 2;width: 100%;height: 100%;object-fit: contain;padding: 10px;}
.badge {position: absolute;padding: 3px 10px;border-radius: 999px;font-size: 11px;z-index: 3;backdrop-filter: blur(4px);}
.badge-hot {left: 10px;top: 10px;background: rgba(255, 87, 34, .9);color: #fff;}
.badge-warn {left: 10px;top: 36px;background: rgba(245, 158, 11, .92);color: #1a1000;}
.badge-auto {right: 10px;top: 10px;background: rgba(52, 211, 153, .9);color: #fff;}
.badge-new {background: #8b5cf6;color: #fff;}
.badge-soldout {background: #6b7280;color: #fff;}
.p-body {display: flex;flex-direction: column;flex: 1;padding: 16px 16px 18px;}
.p-name {font-size: 16px;font-weight: 700;line-height: 1.4;margin-bottom: 8px;word-break: break-all;white-space: normal;}
.p-price-row {display: flex;align-items: baseline;gap: 8px;margin: 4px 0;}
.p-price {font-size: 14px;font-weight: 900;background: linear-gradient(135deg, var(--accent), var(--accent2));-webkit-background-clip: text;background-clip: text;color: transparent;margin-bottom: 6px;line-height: 1.2;}
.p-price span {font-size: 16px;vertical-align: baseline;}
.p-original-price {font-size: 12px;color: #999;text-decoration: line-through;}
.p-sell-point {font-size: 12px;color: var(--accent);margin-bottom: 6px;line-height: 1.4;}
.p-promotion {font-size: 12px;color: #ff7a45;font-weight: 600;margin-bottom: 12px;display: flex;align-items: center;gap: 4px;}
.p-meta {display: flex;justify-content: space-between;color: var(--muted);font-size: 12px;margin-bottom: 14px;}
.btn-buy {margin-top: auto;width: 100%;height: 44px;display: flex;align-items: center;justify-content: center;gap: 6px;border: none;border-radius: 12px;cursor: pointer;font-size: 15px;font-weight: 700;color: #fff;background: linear-gradient(135deg, var(--accent), var(--accent2));transition: filter .2s, transform .1s;text-shadow: 0 1px 2px rgba(0, 0, 0, .2);}
.btn-buy:hover {filter: brightness(1.1);}
.btn-buy:active {transform: scale(.97);}
.empty-tip {grid-column: 1 / -1;text-align: center;padding: 60px 0;color: var(--muted);font-size: 16px;}
.pagination {display: flex;gap: 8px;justify-content: center;margin: 26px 0;}
.page-item {min-width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;border-radius: 10px;border: 1px solid var(--border);background: var(--panel);color: var(--text);text-decoration: none;font-size: 14px;transition: .2s;}
.page-item:hover {border-color: var(--accent);}
.page-item.active {background: linear-gradient(135deg, var(--accent), var(--accent2));color: #fff;border-color: transparent;font-weight: 700;}
.recent-bar {margin-top: 30px;}
.recent-head {display: flex;align-items: center;justify-content: space-between;margin-bottom: 0;}
.recent-clear {font-size: 12px;color: var(--muted);cursor: pointer;transition: .2s;}
.recent-clear:hover {color: var(--accent);}
.recent-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));gap: 12px;margin-top: 10px;}
.recent-card {position: relative;padding: 10px;padding-right: 28px;border: 1px solid var(--border);border-radius: 8px;cursor: pointer;transition: .2s;font-size: 13px;}
.recent-card:hover {border-color: var(--accent);}
.recent-del {position: absolute;top: 6px;right: 6px;width: 18px;height: 18px;line-height: 18px;text-align: center;border-radius: 4px;color: var(--muted);opacity: 0;transition: .2s;cursor: pointer;font-size: 12px;}
.recent-card:hover .recent-del {opacity: 1;}
.recent-del:hover {color: #f87171;background: rgba(248, 113, 113, .1);}
.recent-name {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-bottom: 4px;}
.recent-price {color: var(--accent);font-weight: 600;}
footer {margin-top: 40px;padding: 10px 0 0;border-top: 1px solid var(--border);text-align: center;color: var(--muted);font-size: 13px;}
footer .f-tag {display: flex;justify-content: center;gap: 14px;flex-wrap: wrap;margin-bottom: 10px;}
.float-btns {position: fixed;right: 20px;bottom: 100px;z-index: 40;display: flex;flex-direction: column;gap: 10px;}
.float-btn {width: 44px;height: 44px;border-radius: 12px;border: 1px solid var(--border);background: var(--panel);backdrop-filter: blur(10px);color: var(--text);cursor: pointer;font-size: 18px;display: flex;align-items: center;justify-content: center;transition: .3s;position: relative;}
.float-btn:hover {border-color: var(--accent);color: var(--accent);}
#backTop {opacity: 0;visibility: hidden;transform: translateY(10px);pointer-events: none;}
#backTop.show {opacity: 1;visibility: visible;transform: translateY(0);pointer-events: auto;}
.service-dot {position: absolute;top: 4px;right: 4px;width: 8px;height: 8px;background: #ff4d4f;border-radius: 50%;animation: breath 2s infinite;}
.service-tip {position: absolute;right: calc(100% + 10px);top: 50%;transform: translateY(-50%);white-space: nowrap;background: var(--panel);border: 1px solid var(--border);padding: 6px 12px;border-radius: 6px;font-size: 12px;opacity: 0;pointer-events: none;transition: .3s;box-shadow: 0 2px 8px rgba(0, 0, 0, .08);}
.float-btn:hover .service-tip {opacity: 1;right: calc(100% + 8px);}
.mask {position: fixed;inset: 0;background: rgba(3, 6, 14, .7);backdrop-filter: blur(6px);display: none;align-items: center;justify-content: center;z-index: 9999;padding: 20px;}
.mask.show {display: flex;animation: fadeIn .25s ease;}
.dialog {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: min(94%, 440px);max-height: 90vh;background: var(--dialog-bg);border: 1px solid rgba(255, 255, 255, .12);border-radius: 20px;padding: 22px;box-shadow: 0 30px 80px rgba(0, 0, 0, .6);animation: pop .28s cubic-bezier(.2, .9, .3, 1.2);display: flex;flex-direction: column;overflow: hidden;box-sizing: border-box;}
.dialog-ann {width: min(94%, 560px);}
.dialog-head {display: flex;align-items: center;justify-content: space-between;margin-bottom: 16px;flex-shrink: 0;}
.dialog-title-row {display: flex;align-items: center;gap: 10px;}
.dialog-head h3 {font-size: 18px;font-weight: 700;}
.x {width: 30px;height: 30px;border-radius: 8px;border: 1px solid var(--border);background: var(--panel);color: var(--muted);cursor: pointer;font-size: 16px;transition: .2s;}
.x:hover {color: #fff;border-color: var(--accent);}
.dlg-body {font-size: 14px;color: var(--muted);flex: 1;overflow-y: auto;overflow-x: hidden;min-height: 0;-webkit-overflow-scrolling: touch;padding-right: 4px;}
.dlg-foot {display: flex;gap: 10px;justify-content: flex-end;margin-top: 18px;flex-shrink: 0;}
.online-tag {display: inline-flex;align-items: center;gap: 6px;padding: 3px 10px;border-radius: 999px;background: rgba(52, 211, 153, .12);color: #34d399;font-size: 12px;font-weight: 600;}
.online-dot {width: 8px;height: 8px;border-radius: 50%;background: #34d399;box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);animation: pulse-ring 2s infinite;}
.ann-body {display: flex;flex-direction: column;gap: 10px;}
.ann-item {display: flex;align-items: flex-start;gap: 10px;padding: 10px 12px;border-radius: 10px;background: var(--panel);border: 1px solid var(--border);line-height: 1.6;font-size: 14px;transition: .2s;}
.ann-item:hover {border-color: rgba(255, 255, 255, .15);}
.ann-icon {flex-shrink: 0;font-size: 16px;line-height: 1.6;}
.ann-text {color: var(--text);flex: 1;}
.ann-warn {border-color: rgba(245, 158, 11, 0.3);background: rgba(245, 158, 11, 0.08);}
.ann-warn .ann-text {color: #ffd28a;}
.ann-tip {border-color: rgba(34, 211, 238, 0.3);background: rgba(34, 211, 238, 0.06);}
.ann-tip .ann-text {color: #a5f3fc;}
#mBuy .dlg-foot {justify-content: stretch;margin-top: 16px;padding-top: 0;}
#mBuy .btn-primary {width: 100%;}
.buy-top {display: flex;align-items: center;gap: 14px;padding: 14px;border-radius: 14px;background: linear-gradient(135deg, rgba(34, 211, 238, .12), rgba(129, 140, 248, .12));border: 1px solid var(--border);margin-bottom: 18px;}
.buy-top .gname {font-size: 17px;font-weight: 700;}
.buy-top .gprice {color: var(--accent);font-size: 20px;font-weight: 800;margin-top: 4px;}
.field {margin-bottom: 14px;}
.field label {display: block;font-size: 13px;color: var(--muted);margin-bottom: 7px;}
.field input, .field select {width: 100%;padding: 10px 13px;border-radius: 11px;border: 1px solid var(--border);background: rgba(255, 255, 255, .05);color: var(--text);font-size: 14px;outline: none;transition: .2s;}
.field input:focus {border-color: var(--accent);}
.form-tip {font-size: 12px;margin-top: 4px;min-height: 16px;}
.form-tip.error {color: #f87171;}
.qty-row {display: flex;align-items: center;gap: 10px;}
.qty-btn {width: 38px;height: 38px;border-radius: 10px;border: 1px solid var(--border);background: var(--panel);color: var(--text);font-size: 18px;cursor: pointer;transition: .2s;}
.qty-btn:hover {border-color: var(--accent);}
.qty-row input {flex: 1;text-align: center;font-size: 16px;font-weight: 600;}
.qty-fast {display: flex;gap: 8px;margin-top: 8px;}
.qty-fast-item {padding: 4px 10px;border: 1px solid var(--border);border-radius: 6px;font-size: 12px;cursor: pointer;transition: .2s;}
.qty-fast-item:hover {border-color: var(--accent);color: var(--accent);}
.pay-tabs {display: flex;gap: 10px;}
.pay-tab {flex: 1;text-align: center;padding: 10px 6px;border-radius: 11px;border: 1px solid var(--border);cursor: pointer;font-size: 13px;color: var(--muted);transition: .2s;background: var(--panel);display: flex;align-items: center;justify-content: center;gap: 6px;}
.pay-tab img {width: 20px;height: 20px;object-fit: contain;flex-shrink: 0;}
.pay-tab:hover {color: var(--text);}
.pay-tab.active {color: #fff;background: linear-gradient(135deg, var(--accent), var(--accent2));border-color: transparent;font-weight: 700;}
#pay_hint {display: none;margin-top: 8px;font-size: 12px;color: #fbbf24;}
.pay-safe-tip {font-size: 12px;color: var(--muted);margin-top: 8px;text-align: center;}
.pay-safe-tip i {color: #34d399;margin-right: 4px;}
.total-row {display: flex;justify-content: space-between;align-items: center;margin: 16px 0 6px;padding: 14px;border-radius: 12px;background: rgba(255, 255, 255, .03);border: 1px solid var(--border);}
.total-row span {color: var(--muted);font-size: 14px;}
.total-row b {color: var(--accent);font-size: 26px;}
.warn {background: rgba(220, 38, 38, .12);border: 1px solid rgba(220, 38, 38, .3);color: #fca5a5;font-size: 12px;padding: 10px;border-radius: 10px;text-align: center;margin: 12px 0;}
.order-tip {display: flex;align-items: flex-start;gap: 8px;padding: 10px 12px;border-radius: 10px;background: rgba(34, 211, 238, 0.06);border: 1px solid rgba(34, 211, 238, 0.2);margin-bottom: 12px;line-height: 1.5;}
.order-tip i {color: var(--accent);font-size: 14px;flex-shrink: 0;margin-top: 1px;}
.order-tip span {color: var(--muted);font-size: 12px;}
.drop {border: 2px dashed rgba(255, 255, 255, .18);border-radius: 14px;padding: 28px 16px;text-align: center;cursor: pointer;transition: .2s;color: var(--muted);font-size: 14px;}
.drop:hover, .drop.drag-over {border-color: var(--accent);background: rgba(34, 211, 238, .06);color: var(--text);}
.drop .ic {font-size: 30px;margin-bottom: 8px;color: var(--accent);}
.drop small {display: block;margin-top: 6px;font-size: 12px;color: var(--muted);}
.preview-img {width: 100%;height: auto;object-fit: contain;border-radius: 12px;margin-top: 12px;max-height: 300px;}
.upload-warn {display: flex;gap: 10px;padding: 10px 12px;border-radius: 10px;background: rgba(245, 158, 11, 0.08);border: 1px solid rgba(245, 158, 11, 0.3);margin-top: 12px;line-height: 1.5;}
.upload-warn i {color: #fbbf24;font-size: 16px;flex-shrink: 0;margin-top: 2px;}
.warn-content {flex: 1;}
.warn-title {color: #ffd28a;display: block;font-size: 13px;margin-bottom: 2px;}
.upload-warn p {color: var(--muted);font-size: 12px;}
.btn-ghost {padding: 10px 18px;border-radius: 11px;border: 1px solid var(--border);background: var(--panel);color: var(--text);cursor: pointer;transition: .2s;}
.btn-ghost:hover {background: rgba(255, 255, 255, .09);}
.btn-primary {width: 100%;padding: 13px;border: none;border-radius: 12px;cursor: pointer;font-size: 16px;font-weight: 800;color: #fff;background: linear-gradient(135deg, var(--accent), var(--accent2));transition: filter .2s;text-shadow: 0 1px 2px rgba(0, 0, 0, .2);}
.btn-primary:hover {filter: brightness(1.08);}
.kami-block {background: #0b1020;padding: 11px;border-radius: 10px;white-space: pre-wrap;word-break: break-all;font-family: monospace;font-size: 13px;color: #a5f3fc;margin-top: 6px;}
.copy-btn {margin-left: 8px;padding: 2px 8px;font-size: 12px;border: 1px solid var(--border);border-radius: 4px;cursor: pointer;background: none;color: inherit;}
.copy-btn:hover {border-color: var(--accent);color: var(--accent);}
.exit-modal-body {text-align: center;padding: 10px 0;}
.exit-modal-body h4 {margin: 0 0 10px;font-size: 18px;}
.exit-modal-body p {color: var(--muted);margin: 0 0 16px;font-size: 13px;line-height: 1.6;}
.exit-bonus {background: linear-gradient(135deg, var(--accent), var(--accent2));color: #fff;padding: 10px;border-radius: 8px;margin-bottom: 16px;font-weight: 600;}
.toasts {position: fixed;top: 22px;left: 50%;transform: translateX(-50%);z-index: 999999;display: flex;flex-direction: column;gap: 8px;align-items: center;width: min(92%, 420px);}
.toast {padding: 11px 18px;border-radius: 11px;background: #131a2e;border: 1px solid var(--border);color: #fff;font-size: 14px;box-shadow: 0 10px 30px rgba(0, 0, 0, .4);animation: pop .3s ease;text-align: center;}
.toast.success {border-color: #22c55e;}
.toast.error {border-color: #ef4444;}
.mbar {position: fixed;bottom: 0;left: 0;right: 0;z-index: 60;display: none;background: rgba(7, 11, 23, .9);backdrop-filter: blur(14px);border-top: 1px solid var(--border);padding: 10px 12px calc(10px + env(safe-area-inset-bottom));}
.mbar-ad-inner {position: relative;height: 24px;text-align: center;}
.m-ad-item {position: absolute;width: 100%;left: 0;opacity: 0;pointer-events: none;transition: opacity .8s ease;}
.m-ad-item.active {opacity: 1;pointer-events: auto;}
.m-ad-link {color: var(--accent);text-decoration: none;font-size: 14px;font-weight: 600;display: inline-flex;align-items: center;gap: 6px;}
#liveTime {font-family: monospace;letter-spacing: 1px;color: var(--accent);}
.pulse {animation: pulse 1.5s infinite;}
@keyframes shimmer {to {background-position: 220% center;}}
@keyframes spin {to {transform: rotate(360deg);}}
@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}
@keyframes pop {from {transform: translate(-50%, -50%) translateY(24px) scale(.96);opacity: 0;}to {transform: translate(-50%, -50%) none;opacity: 1;}}
@keyframes pulse-ring {0% {box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);}70% {box-shadow: 0 0 0 8px rgba(52, 211, 153, 0);}100% {box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);}}
@keyframes pulse {0%, 100% {opacity: 1;}50% {opacity: .5;}}
@keyframes breath {0%, 100% {opacity: 1;transform: scale(1);}50% {opacity: .6;transform: scale(1.3);}}
@keyframes marquee {0% {transform: translateX(0);}100% {transform: translateX(-100%);}}
.contact-item {display: flex;align-items: center;gap: 12px;padding: 12px 14px;border-radius: 12px;background: var(--panel);border: 1px solid var(--border);margin-bottom: 10px;transition: .2s ease;}
.contact-item:hover {border-color: var(--accent);background: rgba(255, 255, 255, .08);}
.contact-icon {width: 40px;height: 40px;border-radius: 10px;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, var(--accent), var(--accent2));color: #fff;font-size: 18px;flex-shrink: 0;}
.contact-info {flex: 1;min-width: 0;}
.contact-label {display: block;font-size: 12px;color: var(--muted);margin-bottom: 2px;}
.contact-value {font-size: 15px;color: var(--text);word-break: break-all;}
.contact-value a {color: inherit;text-decoration: none;transition: .2s;}
.contact-value a:hover {color: var(--accent);}
.service-tip-box {display: flex;gap: 10px;padding: 12px;border-radius: 10px;background: linear-gradient(135deg, rgba(34, 211, 238, .08), rgba(129, 140, 248, .08));border: 1px solid rgba(34, 211, 238, .15);margin-top: 6px;}
.service-tip-box > i {color: var(--accent);font-size: 16px;margin-top: 2px;flex-shrink: 0;}
.service-tip-text span {display: block;font-size: 13px;font-weight: 600;color: var(--text);margin-bottom: 2px;}
.service-tip-text p {font-size: 12px;color: var(--muted);line-height: 1.5;margin: 0;}
.p-art img, .p-img {-webkit-user-drag: none;-khtml-user-drag: none;-moz-user-select: none;-webkit-user-select: none;user-select: none;pointer-events: auto;}
img {-webkit-user-drag: none;user-select: none;}
@media(max-width: 1024px) {
.goods-grid {grid-template-columns: repeat(2, 1fr);}
.sidebar {width: 220px;}}
@media(max-width: 768px) {
.cats-row {display: flex;flex-wrap: nowrap;overflow-x: auto;scroll-behavior: smooth;gap: 8px;padding-bottom: 4px;-webkit-overflow-scrolling: touch;}
.cats-row::-webkit-scrollbar {height: 0;display: none;}
.cat-chip {flex-shrink: 0;padding: 6px 14px;font-size: 13px;}
.nav-inner {flex-wrap: wrap;height: auto;padding: 10px 0;gap: 10px;}
.nav-links {order: 3;width: 100%;overflow-x: auto;justify-content: flex-start;}
.search {order: 2;margin-left: auto;}
.search input {width: 150px;}
.nav-ad {order: 4;width: 100%;justify-content: center;margin: 4px 0;}
.main-container {flex-direction: column;}
.sidebar {width: 100%;position: static;}
.trade-inner {overflow: hidden;position: relative;}
.trade-inner .trade-text {display: inline-block;padding-left: 100%;padding-right: 60px;animation: marquee 12s linear infinite;white-space: nowrap;}
.float-btns {right: 12px;bottom: 80px;}
.float-btn {width: 40px;height: 40px;font-size: 16px;}
.dialog {max-width: 92vw !important;max-height: 82dvh;overflow-y: auto;padding: 18px;}
.dialog .dlg-body {padding-right: 2px;}
.mbar {display: block;}
footer {padding-bottom: 70px;}
.hero-trust {gap: 12px;font-size: 12px;}
.sort-bar {gap: 10px;font-size: 12px;}
.goods-grid { grid-template-columns: 1fr; }
.hero {display: none;}
.buy-info-card {display: none;}
.buy-trust {display: none;}
}
#goodsWrap {transition: opacity .25s ease;}
@media(max-width: 576px) {
.goods-grid {grid-template-columns: 1fr;gap: 14px;}
.p-art {height: 120px;}
.p-art-char {font-size: 40px;}
.p-body {padding: 14px 16px 16px;}
.p-name {font-size: 15px;}
.p-price span {font-size: 18px;}
.btn-buy {height: 42px;font-size: 15px;}
}
.buy-grid-wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items: start;}
@media (max-width:768px){
.buy-grid-wrap{grid-template-columns:1fr;gap:20px;}
}
#mBuy .dialog {width: min(94vw, 920px) !important;max-width: 920px;}
.btn-buy{position:relative;transition: all 0.22s ease;transform: translateY(0) scale(1);box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);}
.btn-buy:not([disabled]):hover{transform: translateY(-3px) scale(1.03);box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4);background: linear-gradient(135deg,#4f46e5,#6366f1);}
.btn-buy:not([disabled]):active{transform: translateY(1px) scale(0.98);box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);}
.btn-buy[disabled]{cursor: not-allowed;opacity:0.6;}
.cat-chip {transition: all 0.24s ease;cursor: pointer;transform: translateY(0) scale(1);}
.cat-chip:hover {transform: translateY(-2px) scale(1.04);box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);}
.cat-chip:active {transform: translateY(1px) scale(0.97);}
.cat-chip.active {box-shadow: 0 0 0 2px rgba(99,102,241,0.4);}
.trade-email {color: #34d399; font-weight: 500;}
.trade-name {color: #e9d5ff; font-weight: 700;font-size: 1.05em;text-shadow: 0 0 6px rgba(168, 85, 247, 0.35);}
.trade-price {color: #fb7185; font-weight: bold;font-size:1.02em;}
.trade-time {color: #9ca3af; font-size:0.92em;opacity:0.85;}
.submit-btn {position: relative;padding: 14px 28px;border: none;border-radius: 8px;background: linear-gradient(135deg, #409eff, #2979ff);color: #fff;font-size: 16px;font-weight: 600;cursor: pointer;overflow: hidden;transition: all 0.25s ease;box-shadow: 0 4px 12px rgba(64, 158, 255, 0.35);}
.submit-btn:hover {transform: translateY(-3px);box-shadow: 0 6px 20px rgba(64, 158, 255, 0.5);background: linear-gradient(135deg, #54a8ff, #3b86ff);}
.submit-btn:active {transform: translateY(0px);box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);}
.submit-btn:hover .fa-bolt {animation: boltShake 0.4s ease;}
@keyframes boltShake {0%{transform: rotate(0deg);}25%{transform: rotate(15deg);}75%{transform: rotate(-15deg);}100%{transform: rotate(0deg);}}
.captcha-tip-wrap {position: relative;display: inline-block;}
.captcha-tooltip {visibility: hidden;opacity: 0;position: absolute;bottom: calc(100% + 8px);left: 50%;transform: translateX(-50%);padding: 7px 14px;background: rgba(3,6,14,.9);color: #fff;font-size: 12px;border-radius: 6px;white-space: nowrap;transition: all 0.22s ease;pointer-events: none;box-shadow: 0 3px 10px rgba(0,0,0,0.3);z-index: 9999999; }
.captcha-tooltip::after {content: '';position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: rgba(3,6,14,.9) transparent transparent transparent;}
.captcha-tip-wrap:hover .captcha-tooltip {visibility: visible;opacity: 1;bottom: calc(100% + 10px);}
@media (max-width:768px){
.buy-grid-responsive{grid-template-columns:1fr !important;gap:20px !important;}
#mBuy .dialog{max-height:94vh !important;border-radius:16px;}
#mBuy .buy-top{padding:12px;}
#mBuy .pay-tabs{flex-wrap:wrap;}
#mBuy .pay-tab{flex:1 1 40%;}
}
#mBuy .buy-grid-responsive{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items: start;}
#mBuy .buy-top {display: flex;align-items: center;gap: 14px;padding: 14px;border-radius: 14px;background: linear-gradient(135deg, rgba(34, 211, 238, .12), rgba(129, 140, 248, .12));border: 1px solid rgba(255,255,255,0.08);margin-bottom: 18px;}
#mBuy .buy-top .gname {font-size: 17px;font-weight: 700;}
#mBuy .buy-top .gprice {color: var(--accent);font-size: 20px;font-weight: 800;margin-top: 4px;}
#mBuy .buy-trust {display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px;}
#mBuy .buy-trust span{font-size:12px;color:var(--muted);background:var(--panel);padding:6px 10px;border-radius:8px;}
#mBuy .buy-kefu{color:var(--accent);cursor:pointer;}
#mBuy .buy-info-card {margin-top:16px;padding:16px;background:rgba(255,255,255,0.04);border-radius:12px;border:1px solid rgba(255,255,255,0.07);}
#mBuy .info-row {display:flex;justify-content:space-between;margin-bottom:12px;}
#mBuy .total-row {display:flex;justify-content:space-between;margin-top:12px;font-weight:bold;font-size:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08);}
#mBuy .warn {background: rgba(220, 38, 38, .12);border: 1px solid rgba(220, 38, 38, .3);color: #fca5a5;font-size: 12px;padding: 10px;border-radius: 10px;text-align: center;margin: 12px 0;}
#mBuy .qty-row {display: flex;align-items: center;gap: 10px;}
#mBuy .qty-btn {width: 38px;height: 38px;border-radius: 10px;border: 1px solid var(--border);background: var(--panel);color: var(--text);font-size: 18px;cursor: pointer;transition: .2s;}
#mBuy .qty-btn:hover {border-color: var(--accent);}
#mBuy .qty-fast {display: flex;gap: 8px;margin-top: 8px;flex-wrap: wrap;}
#mBuy .qty-fast-item {padding: 4px 10px;border: 1px solid var(--border);border-radius: 6px;font-size: 12px;cursor: pointer;transition: .2s;}
#mBuy .qty-fast-item:hover {border-color: var(--accent);color: var(--accent);}
#mBuy .pay-tabs {display: flex;gap: 10px;}
#mBuy .pay-tab {flex: 1;text-align: center;padding: 10px 6px;border-radius: 11px;border: 1px solid rgba(255,255,255,0.08);cursor: pointer;font-size: 13px;color: var(--muted);transition: .2s;background: rgba(255,255,255,0.04);display: flex;align-items: center;justify-content: center;gap: 6px;}
#mBuy .pay-tab img {width: 20px;height: 20px;object-fit: contain;flex-shrink: 0;}
#mBuy .pay-tab:hover {color: var(--text);background:rgba(255,255,255,0.06);}
#mBuy .pay-tab.active {color: #fff;background: linear-gradient(135deg, var(--accent), var(--accent2));border-color: transparent;font-weight: 700;}
#mBuy .pay-safe-tip {font-size: 12px;color: var(--muted);margin-top: 8px;text-align: center;}
#mBuy .pay-safe-tip i {color: #34d399;margin-right: 4px;}
#mBuy .dlg-foot {margin-top:20px;}
#mBuy .submit-btn{width:100%;}
#marqueeTradeText {opacity: 0;transform: translateY(6px);transition: opacity 0.5s ease, transform 0.5s ease;}
#marqueeTradeText.show {opacity: 1;transform: translateY(0);}
#marqueeTradeText .email{color:#7dd3fc;}
#marqueeTradeText .time{color:#a5b4fc;}
#marqueeTradeText .text{color:#f0f0f0;}