/* ============================================================
   A4 — 数字商品商城 · 重构版
   设计方向：干净、高效、信赖感
   ============================================================ */
:root {
    --c-brand: #4F46E5;
    --c-brand-light: #EEF2FF;
    --c-brand-dark: #3730A3;
    --c-accent: #F97316;
    --c-red: #EF4444;
    --c-green: #10B981;
    --c-amber: #F59E0B;
    --c-bg: #F2F3F7;
    --c-surface: #FFFFFF;
    --c-text: #0F172A;
    --c-text-2: #475569;
    --c-text-3: #94A3B8;
    --c-line: #E8EBF0;
    --c-line-light: #F1F4F8;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-float: 0 4px 16px rgba(0,0,0,0.10);
    --shadow-modal: 0 24px 48px rgba(0,0,0,0.14);
    --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-tap-highlight-color:transparent; scroll-behavior:smooth; }
body {
    font-family:var(--font);
    background:var(--c-bg);
    color:var(--c-text);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    overflow-x:hidden;
}
body.lock { overflow:hidden; }
a { color:inherit; text-decoration:none; }

.a4-app { max-width:480px; margin:0 auto; min-height:100vh; padding-bottom:80px; }

/* ============================================================
   HEADER
   ============================================================ */
.a4-header {
    background: linear-gradient(160deg, #4F46E5 0%, #6366F1 45%, #7C3AED 100%);
    padding:16px 14px 0;
    color:#fff;
    position:relative;
    overflow:hidden;
}
.a4-header::after {
    content:''; position:absolute; top:-70px; right:-50px;
    width:200px; height:200px;
    background:rgba(255,255,255,0.05); border-radius:50%; pointer-events:none;
}

.a4-h-top { display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.a4-h-avatar {
    width:42px; height:42px; border-radius:12px; flex-shrink:0;
    border:2px solid rgba(255,255,255,0.4); object-fit:cover;
}
.a4-h-avatar-text {
    background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:900; color:#fff;
}
.a4-h-info { flex:1; min-width:0; }
.a4-h-name {
    font-size:15px; font-weight:800; display:flex; align-items:center; gap:5px; letter-spacing:.01em;
}
.a4-h-cert { color:rgba(255,255,255,0.8); font-size:13px; flex-shrink:0; }
.a4-h-cert i { color:#A5F3FC; }
.a4-h-notice {
    display:flex; align-items:flex-start; gap:5px; margin-top:2px;
    font-size:11px; opacity:0.9; line-height:1.55;
    max-height:68px; overflow-y:auto;
}
.a4-h-notice i { flex-shrink:0; font-size:10px; margin-top:3px; }
.a4-h-notice-text {
    word-break:break-all;
}
.a4-h-btn {
    flex-shrink:0; background:rgba(255,255,255,0.18); color:#fff;
    padding:7px 14px; border-radius:18px; font-size:12px; font-weight:700;
    border:1px solid rgba(255,255,255,0.2); transition:.15s; white-space:nowrap;
}
.a4-h-btn:active { transform:scale(0.94); background:rgba(255,255,255,0.3); }

/* 搜索栏 */
.a4-search-bar {
    position:relative; z-index:1;
    margin-top:12px; padding-bottom:14px;
}
.a4-search-icon {
    position:absolute; left:14px; top:12px;
    color:var(--c-text-3); font-size:14px; pointer-events:none; z-index:2;
}
.a4-search-input {
    width:100%; padding:11px 14px 11px 36px;
    border:none; border-radius:22px;
    background:rgba(255,255,255,0.95);
    font-size:13px; font-weight:600; color:var(--c-text);
    outline:none; font-family:var(--font);
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    transition:.2s;
}
.a4-search-input::placeholder { color:var(--c-text-3); font-weight:500; }
.a4-search-input:focus { background:#fff; box-shadow:0 4px 16px rgba(0,0,0,0.12); }
.a4-search-clear {
    position:absolute; right:14px; top:12px;
    color:var(--c-text-3); font-size:15px; cursor:pointer; z-index:2; display:none;
}
.a4-search-clear:active { color:var(--c-text-2); }

/* ============================================================
   NAVIGATION DOTS
   ============================================================ */
.a4-nav {
    display:flex; justify-content:center; gap:0;
    padding:12px 14px;
    background:var(--c-surface);
    border-bottom:1px solid var(--c-line-light);
}
.a4-nav-item {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:4px 0; cursor:pointer; transition:.15s; font-size:11px;
    font-weight:600; color:var(--c-text-2); user-select:none;
}
.a4-nav-item:active { opacity:.7; }
.a4-nav-dot {
    width:40px; height:40px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; transition:.15s;
}
.a4-nav-dot-blue { background:#EEF2FF; color:#4F46E5; }
.a4-nav-dot-green { background:#D1FAE5; color:#059669; }
.a4-nav-dot-orange { background:#FEF3C7; color:#D97706; }
.a4-nav-dot-pink { background:#FCE7F3; color:#DB2777; }

/* ============================================================
   CATEGORY SCROLL
   ============================================================ */
.a4-cat-bar {
    background:var(--c-surface);
    padding:10px 14px;
    border-bottom:1px solid var(--c-line-light);
}
.a4-cat-bar::-webkit-scrollbar { display:none; }
.a4-cat-track { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.a4-cat-chip { display:block; 
    padding:7px 10px; border-radius:18px; text-align:center;
    font-size:12px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    background:#EBEDF2; color:var(--c-text-2);
    cursor:pointer; transition:.15s; user-select:none;
    border:1.5px solid transparent;
}
.a4-cat-chip.active {
    background:var(--c-brand-light); color:var(--c-brand);
    border-color:var(--c-brand); font-weight:700;
}
.a4-cat-chip:active { transform:scale(0.94); }

/* category level labels */
.a4-cat-label { display:block;
    font-size:10px; color:var(--c-text-3); font-weight:700;
    padding:1px 6px; border-radius:8px; white-space:nowrap;
    grid-column:1/-1; text-align:center;
    margin-bottom:2px;
}
.a4-subcat-label {
    font-size:10px; color:var(--c-text-3); font-weight:700;
    margin-right:4px; padding:3px 8px; background:var(--c-bg);
    border-radius:10px; white-space:nowrap; flex-shrink:0;
}

/* sub-category chips */
.a4-subcat-track {
    display:flex; flex-wrap:nowrap; gap:4px; overflow-x:auto;
    padding-top:8px; margin-top:8px;
    border-top:1px solid var(--c-line-light);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.a4-subcat-track::-webkit-scrollbar { display:none; }
.a4-subcat-chip {
    padding:4px 12px; border-radius:14px; flex-shrink:0;
    font-size:11px; font-weight:600; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    background:#F0F1F5; color:var(--c-text-3);
    cursor:pointer; transition:.15s; user-select:none;
    border:1.5px solid transparent;
}
.a4-subcat-chip.active {
    background:var(--c-brand-light); color:var(--c-brand);
    border-color:var(--c-brand); font-weight:700;
}
.a4-subcat-chip:active { transform:scale(0.94); }
.a4-subcat-all { background:var(--c-brand-light); color:var(--c-brand); }
.a4-cat-arrow { font-size:10px; margin-left:2px; opacity:0.6; }
.a4-cat-chip.active .a4-cat-arrow { opacity:1; }

/* ============================================================
   TOOLBAR (SORT + COUNT)
   ============================================================ */
.a4-toolbar {
    display:flex; justify-content:flex-end; align-items:center;
    padding:8px 14px;
    background:var(--c-surface);
    border-bottom:1px solid var(--c-line-light);
}
.a4-toolbar-count { font-size:11px; color:var(--c-text-3); font-weight:600; }

/* ============================================================
   GOODS FEED
   ============================================================ */
.a4-goods-feed {
    display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:8px 12px;
}

/* skeleton */
.a4-skeleton { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.a4-sk-card {
    background:var(--c-surface); border-radius:var(--r-lg); overflow:hidden;
}
.a4-sk-img {
    width:100%; padding-top:80%; background:linear-gradient(90deg, #E8EBF0 25%, #F1F4F8 50%, #E8EBF0 75%);
    background-size:200% 100%; animation:a4Shimmer 1.5s infinite;
}
.a4-sk-body { padding:10px; }
.a4-sk-line {
    height:12px; border-radius:6px; margin-bottom:8px;
    background:linear-gradient(90deg, #E8EBF0 25%, #F1F4F8 50%, #E8EBF0 75%);
    background-size:200% 100%; animation:a4Shimmer 1.5s infinite;
}
.a4-sk-line:last-child { width:55%; margin-bottom:0; height:16px; }
@keyframes a4Shimmer {
    0% { background-position:200% 0; }
    100% { background-position:-200% 0; }
}

.a4-empty-state { grid-column:1/-1; text-align:center; padding:50px 20px; }
.a4-empty-state i { font-size:40px; color:var(--c-text-3); display:block; margin-bottom:12px; opacity:.5; }
.a4-empty-state p { font-size:13px; color:var(--c-text-3); font-weight:600; line-height:1.6; }
.a4-empty-state .a4-empty-action {
    display:inline-block; margin-top:12px; padding:8px 20px;
    background:var(--c-brand); color:#fff; border-radius:18px;
    font-size:12px; font-weight:700; cursor:pointer;
}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.a4-card {
    background:var(--c-surface); border-radius:var(--r-lg);
    overflow:hidden; cursor:pointer; transition:.18s;
    box-shadow:var(--shadow-card);
    display:flex; flex-direction:column;
    position:relative;
}
.a4-card:active { transform:scale(0.97); }

.a4-card-cover {
    position:relative; width:100%; padding-top:85%;
    background:#F8FAFC; overflow:hidden;
}
.a4-card-cover img {
    position:absolute; top:0; left:0; width:100%; height:100%;
    object-fit:contain; padding:6px; background:#F8FAFC;
}
.a4-card-cover-letter {
    position:absolute; top:0; left:0; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:40px; font-weight:900; color:var(--c-brand); opacity:.15;
    background:linear-gradient(135deg, var(--c-brand-light), #E0E7FF);
}

/* hot / new tags */
.a4-card-tag {
    position:absolute; top:8px; left:8px;
    padding:3px 8px; border-radius:6px;
    font-size:10px; font-weight:800; color:#fff; z-index:2;
    line-height:1.4;
}
.a4-tag-hot { background:linear-gradient(135deg, #EF4444, #F97316); }
.a4-tag-new { background:linear-gradient(135deg, #4F46E5, #6366F1); }
.a4-tag-bulk { background:linear-gradient(135deg, #10B981, #34D399); }

.a4-card-body { padding:10px; flex:1; display:flex; flex-direction:column; gap:6px; }
.a4-card-name {
    font-size:13px; font-weight:700; color:var(--c-text); line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; flex:1; min-height:35px;
}
.a4-card-foot { display:flex; justify-content:space-between; align-items:flex-end; }
.a4-card-price {
    font-size:20px; font-weight:900; color:var(--c-red); line-height:1;
}
.a4-card-price i { font-size:12px; font-style:normal; font-weight:700; }
.a4-card-sales { font-size:10px; color:var(--c-amber); font-weight:600; }
.a4-card-buy-btn {
    width:100%; background:var(--c-brand); color:#fff; border:none;
    border-radius:8px; font-size:12px; font-weight:700; cursor:pointer;
    padding:7px 10px; margin-top:6px; transition:0.2s;
}
.a4-card-buy-btn:active { transform:scale(0.96); background:#4338CA; }

/* ============================================================
   BUY MODAL
   ============================================================ */
.a4-overlay {
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(15,23,42,0.45);
    align-items:center; justify-content:center;
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.a4-overlay.show { display:flex; }

.a4-modal {
    width:90%; max-width:340px; max-height:80vh;
    background:#fff; border-radius:20px;
    box-shadow:var(--shadow-modal);
    overflow:hidden; display:flex; flex-direction:column;
    animation:a4ModalIn .25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes a4ModalIn {
    from { transform:scale(0.9); opacity:0; }
    to { transform:scale(1); opacity:1; }
}

.a4-modal-top {
    display:flex; align-items:flex-start; gap:12px;
    padding:18px 16px 14px; border-bottom:1px solid var(--c-line);
}
.a4-modal-thumb {
    width:56px; height:56px; border-radius:12px; flex-shrink:0;
    background:var(--c-bg); overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.a4-modal-thumb img { width:100%; height:100%; object-fit:contain; padding:4px; }
.a4-modal-thumb-letter {
    font-size:24px; font-weight:900; color:var(--c-brand); opacity:.25;
}
.a4-modal-title-wrap { flex:1; min-width:0; }
.a4-modal-title-wrap h3 { font-size:16px; font-weight:800; margin-bottom:4px; }
.a4-modal-close {
    font-size:22px; color:var(--c-text-3); cursor:pointer; flex-shrink:0;
    transition:.15s;
}
.a4-modal-close:active { color:var(--c-text); }

.a4-modal-body { padding:14px 16px; overflow-y:auto; flex:1; }
.a4-modal-foot { display:flex; gap:10px; padding:0 16px 16px; }

.a4-buy-desc {
    font-size:12px; color:var(--c-text-2); line-height:1.6;
    padding:10px 12px; background:var(--c-bg); border-radius:var(--r-md);
    margin-bottom:14px; max-height:100px; overflow-y:auto;
    word-break:break-all; font-weight:500;
}
.a4-buy-meta { display:flex; flex-direction:column; gap:0; }
.a4-buy-meta-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:9px 0; border-bottom:1px solid var(--c-line); font-size:13px;
}
.a4-buy-meta-item > span { color:var(--c-text-2); font-weight:600; }
.a4-buy-meta-item > b { font-weight:800; }

.a4-stepper { display:flex; align-items:center; gap:0; background:var(--c-bg); border-radius:8px; overflow:hidden; }
.a4-stepper button {
    width:30px; height:30px; border:none; background:none;
    font-size:16px; font-weight:600; cursor:pointer; color:var(--c-text);
    display:flex; align-items:center; justify-content:center; transition:.1s;
}
.a4-stepper button:active { background:var(--c-line); }
.a4-stepper span {
    min-width:32px; text-align:center; font-weight:700; font-size:14px;
}

.a4-buy-total {
    display:flex; justify-content:space-between; align-items:baseline;
    padding:12px 0; margin-top:2px;
}
.a4-buy-total > span { font-size:14px; color:var(--c-text-2); font-weight:600; }
.a4-buy-total > b { font-size:28px; font-weight:900; color:var(--c-red); letter-spacing:-.03em; }

.a4-tag {
    display:inline-block; padding:3px 10px; border-radius:12px;
    font-size:10px; font-weight:700; color:#fff; text-decoration:none;
}

.a4-field {
    width:100%; padding:12px 14px; margin-top:8px;
    border:2px solid var(--c-line); border-radius:var(--r-md);
    font-size:14px; font-weight:600; color:var(--c-text);
    outline:none; text-align:center; transition:.2s;
    font-family:var(--font);
}
.a4-field:focus { border-color:var(--c-brand); box-shadow:0 0 0 3px rgba(79,70,229,0.06); }
.a4-field::placeholder { color:var(--c-text-3); font-weight:500; }

.a4-btn {
    flex:1; padding:13px; border-radius:12px; font-size:14px; font-weight:700;
    border:none; cursor:pointer; transition:.15s; font-family:var(--font);
}
.a4-btn:active { transform:scale(0.95); }
.a4-btn-fill { background:var(--c-brand); color:#fff; box-shadow:0 2px 8px rgba(79,70,229,0.3); }
.a4-btn-ghost { background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-line); }

/* ============================================================
   FLOATING ACTION BUTTONS
   ============================================================ */
.a4-fabs { position:fixed; bottom:20px; right:12px; z-index:998; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }

.a4-fab {
    display:flex; align-items:center; gap:6px;
    height:44px; padding:0 18px; border-radius:22px; color:#fff;
    cursor:pointer; font-size:13px; font-weight:800;
    box-shadow:var(--shadow-float); transition:.18s; user-select:none;
    white-space:nowrap;
}
.a4-fab i { font-size:18px; }
.a4-fab:active { transform:scale(0.9); }
.a4-fab-top {
    width:40px; height:40px; padding:0; border-radius:50%;
    background:var(--c-surface); color:var(--c-text-2); box-shadow:var(--shadow-card);
    justify-content:center; font-size:14px;
    opacity:0; transform:translateY(10px); pointer-events:none; transition:.25s;
}
.a4-fab-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.a4-fab-rec { background:linear-gradient(135deg, #F97316, #EF4444); box-shadow:0 4px 14px rgba(239,68,68,0.3); }

.a4-fab-kf { background:var(--c-brand); box-shadow:0 4px 14px rgba(79,70,229,0.35); }

/* ============================================================
   RECOMMENDATION DRAWER
   ============================================================ */
.a4-rec-mask {
    display:none; position:fixed; inset:0; z-index:996;
    background:rgba(0,0,0,.25);
}
.a4-rec-mask.show { display:block; }
.a4-rec-drawer {
    display:none; position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    z-index:997; width:100%; max-width:480px; max-height:55vh;
    background:#fff; border-radius:20px 20px 0 0;
    box-shadow:0 -8px 32px rgba(0,0,0,0.10);
    overflow:hidden;
}
.a4-rec-drawer.show { display:flex; flex-direction:column; animation:a4SlideUp .25s cubic-bezier(0.22, 0.61, 0.36, 1); }
.a4-rec-drawer-head {
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 18px 12px; flex-shrink:0;
    font-size:15px; font-weight:800; color:var(--c-text);
}
.a4-rec-drawer-head i.fa-times { font-size:16px; color:var(--c-text-3); cursor:pointer; }
.a4-rec-drawer-head i.fa-diamond { color:var(--c-red); margin-right:4px; font-size:13px; }
.a4-rec-drawer-list { flex:1; overflow-y:auto; padding:0 12px 12px; -webkit-overflow-scrolling:touch; }
.a4-rec-drawer-list .a4-rec-item {
    display:flex; align-items:center; gap:10px;
    padding:10px; border-radius:var(--r-md); cursor:default; transition:.1s;
}
.a4-rec-drawer-list .a4-rec-item:active { background:var(--c-bg); }
.a4-rec-img {
    width:44px; height:44px; border-radius:10px; object-fit:cover;
    flex-shrink:0; border:1px solid var(--c-line);
}
.a4-rec-img-text {
    width:44px; height:44px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:900; color:#fff;
}
.a4-rec-info { flex:1; min-width:0; }
.a4-rec-info .a4-rec-name { font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a4-rec-info .a4-rec-price { font-size:13px; font-weight:800; color:var(--c-red); margin-top:1px; }
.a4-rec-buy {
    flex-shrink:0; padding:6px 13px; border-radius:14px;
    font-size:11px; font-weight:700; background:var(--c-red); color:#fff;
    border:none; cursor:pointer; transition:.1s; font-family:var(--font);
}
.a4-rec-buy:active { transform:scale(0.88); }
.a4-rec-empty { text-align:center; padding:30px; color:var(--c-text-3); font-size:12px; font-weight:600; }

/* ============================================================
   FOOTER
   ============================================================ */
.a4-footer { text-align:center; padding:32px 16px 16px; }
.a4-footer-badge {
    display:inline-block; font-size:11px; font-weight:700; color:var(--c-green);
    background:#ECFDF5; padding:7px 16px; border-radius:18px; margin-bottom:12px;
}
.a4-footer-links { display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:6px; }
.a4-footer-links a { font-size:11px; color:var(--c-text-3); font-weight:600; transition:.15s; }
.a4-footer-links a:active { color:var(--c-brand); }
.a4-footer-dot { color:var(--c-text-3); font-size:10px; }
.a4-footer-cr { font-size:10px; color:var(--c-text-3); opacity:.5; }

/* ============================================================
   QUERY RESULT (inside layer)
   ============================================================ */
.a4-q-item {
    background:var(--c-bg); padding:8px 10px; border-radius:var(--r-sm);
    margin-bottom:6px; border:1px solid var(--c-line-light);
}
.a4-status {
    display:inline-block; padding:3px 10px; border-radius:10px;
    font-size:10px; font-weight:700; line-height:1.5;
}
.a4-status-wait { background:#DBEAFE; color:#1D4ED8; }
.a4-status-done { background:#D1FAE5; color:#047857; }
.a4-status-going { background:#FEF3C7; color:#B45309; }
.a4-status-bad { background:#FEE2E2; color:#B91C1C; }
.a4-status-back { background:#E2E8F0; color:#64748B; }

/* query tabs */
.a4-qtabs { display:flex; gap:6px; margin-bottom:12px; padding:4px; background:var(--c-bg); border-radius:12px; }
.a4-qtab {
    flex:1; padding:9px; text-align:center; border-radius:9px;
    font-size:12px; font-weight:700; color:var(--c-text-2); cursor:pointer; user-select:none; transition:.12s;
}
.a4-qtab.active { background:#fff; color:var(--c-text); box-shadow:0 1px 2px rgba(0,0,0,0.04); }

/* detail kami */
.a4-kami-box {
    background:linear-gradient(135deg, rgba(79,70,229,0.03), rgba(79,70,229,0.01));
    border:1.5px solid rgba(79,70,229,0.12); border-radius:var(--r-md);
    padding:12px; font-size:13px; color:var(--c-text); font-weight:800;
    word-break:break-all; user-select:all; line-height:1.5;
}
.a4-no-stock-box {
    background:rgba(239,68,68,0.03); border:1.5px dashed rgba(239,68,68,0.2);
    border-radius:var(--r-md); padding:13px; text-align:center;
    font-size:13px; color:var(--c-red); font-weight:700;
}

/* pay buttons */
.a4-pay-top { text-align:center; padding:18px; }
.a4-pay-top p { font-size:12px; color:var(--c-text-2); font-weight:600; }
.a4-pay-top h2 { font-size:36px; font-weight:900; margin:4px 0 0; }
.a4-pay-method {
    display:block; width:100%; padding:15px; border-radius:13px; margin-bottom:8px;
    color:#fff; font-weight:800; font-size:14px; text-align:center;
    border:none; cursor:pointer; transition:.12s; font-family:var(--font);
}
.a4-pay-method:active { transform:scale(0.96); }
.a4-pm-alipay { background:#1677FF; }
.a4-pm-wxpay { background:#07C160; }
.a4-pm-qqpay { background:#12B7F5; }
.a4-pm-balance { background:linear-gradient(135deg, #F59E0B, #EF4444); }

/* ============================================================
   LAYER SKIN
   ============================================================ */
.skin-light-tech[style] {
    top:6vh !important; height:auto !important;
    width:90% !important; max-width:380px !important;
    left:0 !important; right:0 !important; margin:0 auto;
    border-radius:18px !important; background:#fff !important;
    box-shadow:0 24px 48px rgba(0,0,0,0.15) !important;
    overflow:hidden !important;
}
.skin-light-tech .layui-layer-title {
    background:#fff !important; color:var(--c-text) !important;
    border-bottom:1px solid var(--c-line) !important;
    font-weight:800; font-size:16px; text-align:center;
    padding:16px 0 0 0 !important; height:50px !important;
    border-radius:18px 18px 0 0 !important;
}
.skin-light-tech .layui-layer-content {
    height:auto !important; max-height:60vh !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch !important;
    color:var(--c-text) !important; padding:0 !important;
}
.skin-light-tech .layui-layer-setwin { top:12px !important; right:14px !important; display:block !important; }
.skin-light-tech .layui-layer-setwin .layui-layer-close1 {
    background:var(--c-bg) !important; border-radius:50% !important;
    line-height:26px !important; margin:0 !important; padding:0 !important;
    text-align:center;
}
.skin-light-tech .layui-layer-setwin .layui-layer-close1::before {
    content:"\f00d"; font-family:FontAwesome; font-size:12px; color:var(--c-text-3); display:block;
}

/* --- buttons (alert / confirm) --- */
.skin-light-tech .layui-layer-btn { padding:0 20px 18px!important; text-align:center!important; }
.skin-light-tech .layui-layer-btn a { height:40px!important; line-height:40px!important; margin:0 6px!important; padding:0 26px!important; border:none!important; border-radius:10px!important; font-size:13px!important; font-weight:700!important; background:#F1F5F9!important; color:#475569!important; text-decoration:none!important; display:inline-block!important; cursor:pointer!important; }
.skin-light-tech .layui-layer-btn a:hover { background:#E2E8F0!important; color:#1E293B!important; opacity:1!important; }
.skin-light-tech .layui-layer-btn .layui-layer-btn0 { background:var(--c-brand)!important; color:#fff!important; box-shadow:0 2px 8px rgba(79,70,229,0.25)!important; }
.skin-light-tech .layui-layer-btn .layui-layer-btn0:hover { background:#4338CA!important; }

/* --- dialog content --- */
.skin-light-tech .layui-layer-dialog .layui-layer-content { padding:22px 22px 14px!important; text-align:center!important; font-size:14px!important; color:var(--c-text)!important; line-height:1.7!important; }
.skin-light-tech .layui-layer-dialog .layui-layer-padding { padding:22px 22px 14px!important; }

/* --- replace sprite icons with FontAwesome --- */
.skin-light-tech .layui-layer-ico { background:none!important; display:block!important; margin:0 auto 10px!important; position:static!important; float:none!important; width:auto!important; height:auto!important; }
.skin-light-tech .layui-layer-ico::before { font-family:FontAwesome; font-size:40px; line-height:1; display:block; }
.skin-light-tech .layui-layer-ico1::before { content:"\f058"; color:#10B981; }
.skin-light-tech .layui-layer-ico2::before { content:"\f057"; color:#EF4444; }
.skin-light-tech .layui-layer-ico3::before { content:"\f06a"; color:#F59E0B; }

/* --- loading --- */
.skin-light-tech.layui-layer-loading { border-radius:14px!important; background:rgba(255,255,255,0.95)!important; box-shadow:0 10px 36px rgba(0,0,0,0.1)!important; border:none!important; }
.skin-light-tech.layui-layer-loading .layui-layer-content { padding:22px!important; text-align:center; }

/* ============================================================
   GLOBAL: layer.msg toast (no skin support)
   ============================================================ */
.layui-layer-msg { border:none!important; border-radius:12px!important; background:rgba(30,41,59,0.92)!important; color:#fff!important; box-shadow:0 6px 28px rgba(0,0,0,0.18)!important; min-width:100px!important; }
.layui-layer-msg .layui-layer-content { padding:12px 20px!important; font-size:13px!important; font-weight:600!important; text-align:center!important; line-height:1.5!important; }
.layui-layer-msg .layui-layer-padding { padding:12px 20px 12px 42px!important; }
.layui-layer-msg .layui-layer-ico { background:none!important; position:absolute!important; left:12px!important; top:50%!important; transform:translateY(-50%)!important; width:20px!important; height:20px!important; margin:0!important; }
.layui-layer-msg .layui-layer-ico::before { font-family:FontAwesome; font-size:18px; line-height:20px; display:block; }
.layui-layer-msg .layui-layer-ico1::before { content:"\f058"; color:#10B981; }
.layui-layer-msg .layui-layer-ico2::before { content:"\f057"; color:#EF4444; }
.layui-layer-msg .layui-layer-ico3::before { content:"\f06a"; color:#F59E0B; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.08); border-radius:4px; }
::-webkit-scrollbar-track { background:transparent; }

/* wheel button alignment */
.wheel-float-btn { right:12px !important; bottom:180px !important; }
/* 弹窗打开时隐藏所有浮动按钮 */
body.lock .a4-fabs,
body.lock .wheel-float-btn { display:none!important; }
@media (max-width:370px) {
    .a4-goods-feed { padding:6px 8px; }
    .a4-card-name { font-size:12px; min-height:30px; }
    .a4-card-price { font-size:17px; }
    .a4-card-body { padding:8px; }
    .a4-nav-item { font-size:10px; }
    .a4-nav-dot { width:36px; height:36px; font-size:14px; }
}

@media (min-width:420px) {
    .a4-card-cover { padding-top:72%; }
}

/* ===== 滚动公告横幅 ===== */
.a4-marquee-box {
    background-color:#333;
    border-radius:15px;
    box-shadow:0 0 8px rgba(242,0,255,0.5);
    padding:8px 10px;
    margin:4px 14px 0;
}
#a4-marquee-text {
    font-size:15px;
    margin:0;
    background:linear-gradient(to right,
        #ffffff, #ff0000 6.26%, #ff7d00 12.5%, #ffff00 18.75%,
        #00ff00 26%, #00ffff 31.26%, #0000ff 37.5%, #ff00ff 43.75%,
        #ffff00 50%, #ff0000 56.26%, #ff7d00 62.5%, #ffff00 68.75%,
        #00ff00 75%, #00ffff 81.26%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-size:200% 100%;
    animation:a4-marquee-glow 3s infinite linear;
}
@keyframes a4-marquee-glow {
    0%   { background-position:0 0; }
    100% { background-position:-200% 0; }
}

/* APP下载横幅 */
.a4-app-banner { display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,#4F46E5,#7C3AED); color:#fff; padding:10px 14px; margin:0 12px 8px; border-radius:10px; font-size:13px; gap:8px; }
.a4-app-banner-left { display:flex; align-items:center; gap:6px; flex:1; }
.a4-app-banner-left i { font-size:18px; }
.a4-app-banner-btn { color:#fff; background:rgba(255,255,255,0.2); padding:4px 14px; border-radius:14px; text-decoration:none; font-size:12px; font-weight:600; white-space:nowrap; }
.a4-app-banner-close { cursor:pointer; opacity:0.6; font-size:14px; padding:4px; }
.a4-app-banner-close:hover { opacity:1; }