:root { --neon-cyan:#00f0ff; --neon-pink:#ff00aa; --neon-purple:#b829dd; --bg:#0a0a0f; --card:#12121a; --card2:#1a1a25; --text:#e0e0e0; --text2:#888; --border:#2a2a35; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.6; min-height:100vh; padding-bottom:90px; }
a { color:var(--neon-cyan); text-decoration:none; }

.container { max-width:720px; margin:0 auto; padding:0 16px; }

/* 头部 */
.shop-header { background:var(--card); border-bottom:1px solid var(--border); padding:14px 0; position:sticky; top:0; z-index:50; }
.shop-header .container { display:flex; align-items:center; justify-content:space-between; }
.shop-info .shop-name { font-size:18px; font-weight:700; color:#fff; text-shadow:0 0 10px rgba(0,240,255,0.3); }
.shop-info .contact-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border-radius:20px; font-size:12px; background:rgba(0,240,255,0.1); color:var(--neon-cyan); border:1px solid var(--neon-cyan); margin-left:8px; box-shadow:0 0 8px rgba(0,240,255,0.2); }
.shop-contact { font-size:12px; color:var(--text2); margin-top:2px; }
.header-actions .btn-query { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); border-radius:20px; color:#000; font-size:13px; font-weight:700; box-shadow:0 0 15px rgba(0,240,255,0.3); }

/* 公告 */
.notice-bar { background:var(--card); border-radius:12px; margin:16px auto; padding:14px 18px; max-width:720px; border:1px solid var(--border); box-shadow:0 0 20px rgba(184,41,221,0.1); }
.notice-bar .title { font-size:13px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:6px; color:var(--neon-pink); text-shadow:0 0 8px rgba(255,0,170,0.3); }
.notice-bar .content { font-size:13px; color:var(--text2); line-height:1.8; }

/* 区块 */
.section { background:var(--card); border-radius:12px; margin:16px auto; padding:18px; max-width:720px; border:1px solid var(--border); }
.section-title { font-size:15px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; color:#fff; }
.section-title .icon { color:var(--neon-cyan); text-shadow:0 0 8px rgba(0,240,255,0.4); font-size:16px; }

/* 分类 */
.category-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; }
.category-card { background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:14px; cursor:pointer; transition:all .3s; position:relative; text-align:center; }
.category-card:hover { border-color:var(--neon-cyan); box-shadow:0 0 15px rgba(0,240,255,0.2); transform:translateY(-2px); }
.category-card.active { background:linear-gradient(135deg, rgba(0,240,255,0.1), rgba(184,41,221,0.1)); border-color:var(--neon-cyan); box-shadow:0 0 20px rgba(0,240,255,0.2); }
.category-card .name { font-size:14px; font-weight:600; color:#fff; }
.category-card .count { font-size:12px; color:var(--text2); margin-top:4px; }
.category-card.active .check { position:absolute; top:6px; right:6px; width:20px; height:20px; background:var(--neon-cyan); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#000; font-size:12px; box-shadow:0 0 10px var(--neon-cyan); }

/* 商品 */
.product-list { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
@media (max-width:640px) { .product-list { grid-template-columns:1fr; } }
.product-item { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--card2); border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:all .3s; }
.product-item:hover { border-color:var(--neon-cyan); }
.product-item.active { border-color:var(--neon-cyan); background:linear-gradient(135deg, rgba(0,240,255,0.08), rgba(184,41,221,0.08)); box-shadow:0 0 15px rgba(0,240,255,0.15); }
.product-item .product-icon { width:44px; height:44px; background:var(--bg); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:var(--neon-cyan); flex-shrink:0; box-shadow:0 0 10px rgba(0,240,255,0.15); }
.product-item .product-info { flex:1; }
.product-item .product-name { font-size:14px; font-weight:600; color:#fff; }
.product-item .product-meta { display:flex; align-items:center; gap:8px; margin-top:3px; }
.product-item .product-price { font-size:14px; font-weight:700; color:var(--neon-cyan); text-shadow:0 0 5px rgba(0,240,255,0.3); }
.product-item .product-stock { font-size:11px; padding:2px 8px; border-radius:10px; }
.product-stock.in-stock { background:rgba(0,240,255,0.1); color:var(--neon-cyan); }
.product-stock.low-stock { background:rgba(255,0,170,0.1); color:var(--neon-pink); }
.product-stock.no-stock { background:rgba(255,50,50,0.1); color:#ff4444; }
.product-item.active .product-check { width:22px; height:22px; background:var(--neon-cyan); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#000; font-size:12px; flex-shrink:0; box-shadow:0 0 10px var(--neon-cyan); }

/* 介绍 */
.product-desc { background:var(--card2); border-radius:8px; padding:14px; font-size:13px; color:var(--text2); line-height:1.8; min-height:60px; border:1px solid var(--border); }
.product-desc:empty::before { content:'请选择商品查看介绍'; color:#555; }

/* 表单 */
.form-section { background:var(--card); border-radius:12px; margin:16px auto; padding:18px; max-width:720px; border:1px solid var(--border); }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:14px; font-weight:600; margin-bottom:6px; color:#fff; }
.form-group label .required { color:var(--neon-pink); margin-right:4px; }
.form-control { width:100%; padding:12px 14px; background:var(--card2); border:1px solid var(--border); border-radius:8px; color:#fff; font-size:14px; outline:none; }
.form-control:focus { border-color:var(--neon-cyan); box-shadow:0 0 10px rgba(0,240,255,0.2); }
.form-hint { font-size:12px; color:var(--text2); margin-top:4px; }

.pay-methods { display:flex; gap:10px; flex-wrap:wrap; }
.pay-method { display:flex; align-items:center; gap:8px; padding:10px 20px; background:var(--card2); border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:all .3s; font-size:14px; color:var(--text); }
.pay-method:hover { border-color:var(--neon-cyan); }
.pay-method.active { border-color:var(--neon-cyan); background:rgba(0,240,255,0.08); box-shadow:0 0 15px rgba(0,240,255,0.15); }
.pay-method .pay-icon { width:24px; height:24px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.pay-icon.wechat { background:#07c160; }
.pay-icon.alipay { background:#1677ff; }

/* 底部 */
.bottom-bar { position:fixed; bottom:0; left:0; right:0; background:var(--card); border-top:1px solid var(--border); padding:12px 0; z-index:50; display:none; }
.bottom-bar .container { display:flex; align-items:center; justify-content:space-between; }
.qty-control { display:flex; align-items:center; }
.qty-control .qty-btn { width:34px; height:34px; border:1px solid var(--border); background:var(--card2); color:var(--text); border-radius:50%; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.qty-control .qty-input { width:50px; height:34px; text-align:center; background:var(--card2); border:1px solid var(--border); border-radius:6px; color:#fff; font-size:14px; font-weight:600; margin:0 6px; outline:none; }
.bottom-bar .price-area { display:flex; align-items:center; gap:12px; }
.bottom-bar .total-label { font-size:13px; color:var(--text2); }
.bottom-bar .total-price { font-size:20px; font-weight:700; color:var(--neon-cyan); text-shadow:0 0 8px rgba(0,240,255,0.3); }
.bottom-bar .btn-order { padding:10px 24px; background:linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); border:none; border-radius:10px; color:#000; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 0 15px rgba(0,240,255,0.3); }
.bottom-bar .btn-order:disabled { opacity:.4; cursor:not-allowed; }

/* PC端右侧面板 */
.order-panel .qty-row { display:flex; align-items:center; gap:8px; }
.order-panel .qty-btn-pc { width:36px; height:36px; border:1px solid var(--border); background:var(--card2); color:var(--text); border-radius:8px; font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.order-panel .qty-btn-pc:hover { border-color:var(--neon-cyan); color:var(--neon-cyan); box-shadow:0 0 10px rgba(0,240,255,0.2); }
.order-panel .qty-input-pc { width:60px; height:36px; text-align:center; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:#fff; font-size:15px; font-weight:600; outline:none; }
.order-panel .qty-input-pc:focus { border-color:var(--neon-cyan); box-shadow:0 0 10px rgba(0,240,255,0.15); }
.order-panel .total-price-pc { font-size:28px; font-weight:700; color:var(--neon-cyan); text-shadow:0 0 10px rgba(0,240,255,0.3); }
.order-panel .btn-order-pc { width:100%; padding:12px; background:linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); border:none; border-radius:10px; color:#000; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 0 15px rgba(0,240,255,0.3); transition:all .2s; margin-top:4px; }
.order-panel .btn-order-pc:hover:not(:disabled) { box-shadow:0 0 25px rgba(0,240,255,0.5); transform:translateY(-1px); }
.order-panel .btn-order-pc:disabled { opacity:.4; cursor:not-allowed; }

/* 移动端默认边距 */
.main-layout { padding:0 16px; }

/* PC宽屏布局 */
@media (min-width:861px) {
    .shop-header .container { max-width:1068px; margin:0 auto; }
    .notice-bar { min-width:1068px; }
    .main-layout { display:grid; grid-template-columns:1fr 340px; gap:20px; max-width:1100px; margin:16px auto; }
    .main-layout .section, .main-layout .form-section { max-width:none; margin:0 0 16px 0; }
    .main-right { position:sticky; top:80px; align-self:start; height:fit-content; }
}

/* loading */
.loading { text-align:center; padding:20px; color:#555; }
.spinner { display:inline-block; width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--neon-cyan); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }