/* ===== 基础变量（可以按需调整主色等） ===== */
:root{
  --bg:#f7f7fb; --card:#fff; --text:#222; --muted:#666;
  --primary:#1677ff; --primary-ink:#0e5cc6; --border:#e7e7ee;
  --danger:#c0392b; --ok:#2ecc71; --warn:#f39c12;
}

/* ===== 全局 ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 12px 0}

/* ===== 布局 ===== */
header,main{max-width:1100px; margin:16px auto; padding:0 12px}
header h1{font-size:22px}
nav{display:flex; gap:12px; flex-wrap:wrap}
nav a{padding:4px 8px; border-radius:8px}
nav a:hover{background:#eef4ff; text-decoration:none}

/* ===== 通用卡片/按钮/表单 ===== */
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.03); padding:12px}
.btn{
  display:inline-block; padding:8px 12px; border-radius:8px;
  border:1px solid var(--primary); background:var(--primary); color:#fff; cursor:pointer
}
.btn:hover{background:var(--primary-ink); border-color:var(--primary-ink)}
.btn-outline{border:1px solid var(--primary); background:#fff; color:var(--primary)}
.btn-outline:hover{background:var(--primary); color:#fff}
.btn.disabled, .btn[disabled]{opacity:.55; cursor:not-allowed; background:#ccc; border-color:#ccc}

input,select,button{font:inherit}
input,select{
  width:100%; padding:10px; border:1px solid var(--border); border-radius:10px;
  background:#fff; outline:none
}
input:focus,select:focus{border-color:#b5cdfc; box-shadow:0 0 0 3px rgba(13,110,253,.15)}
label{display:block; margin:8px 0 6px}

/* ===== 顶部提示/消息 ===== */
.msg{padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff}
.msg.error{border-color:#f5c6cb; background:#fff5f5; color:#a40000}
.msg.ok{border-color:#c7f2d3; background:#f4fff6; color:#0a7a2d}
.msg.warn{border-color:#ffe0a6; background:#fff9ec; color:#8a5a00}

/* ===== /catalog 商品列表 ===== */
.shop-container{max-width:1100px; margin:16px auto; padding:0 12px}
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 16px}
.search{display:flex; gap:8px; flex:1}

.grid{display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.grid{grid-template-columns:repeat(4,1fr)}}

.card .thumb{position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border-radius:10px; background:#fafafa}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s}
.card:hover .thumb img{transform:scale(1.03)}

.tags{position:absolute; left:8px; top:8px; display:flex; gap:6px; flex-wrap:wrap}
.tags span{
  font-size:12px; background:rgba(0,0,0,.75); color:#fff;
  padding:2px 6px; border-radius:999px
}

.info{margin-top:8px}
.title{font-weight:600; color:#111; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.meta{display:flex; align-items:center; justify-content:space-between; margin-top:6px}
.price b{font-size:18px}
.stock{font-size:12px; color:#666}
.stock.low{color:#d35400; font-weight:600}
.actions{margin-top:8px}

/* ===== /p/<code> 商品详情页 ===== */
.product-page{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:900px){.product-page{grid-template-columns:1fr 1fr}}
.product-page .media{background:#fafafa; border:1px solid var(--border); border-radius:12px; overflow:hidden}
.product-page .media img{width:100%; display:block}
.product-page .pane{display:flex; flex-direction:column; gap:12px}
.product-page .name{margin:0}
.product-page .price b{font-size:22px}
.product-page .tags{display:flex; gap:8px; flex-wrap:wrap}
.product-page .tags span{background:#f3f3f3; border:1px solid #e9e9e9; border-radius:999px; padding:2px 8px; font-size:12px}
.product-page .buy{display:grid; grid-template-columns:120px 1fr; gap:8px; align-items:center}
.product-page .desc{padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff}

/* ===== 管理表格（保持你原有后台更清晰） ===== */
.table{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden}
.table th, .table td{padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top}
.table th{background:#fafafa; font-weight:600}
.table tr:last-child td{border-bottom:none}

/* ===== 小工具 ===== */
.text-muted{color:var(--muted)}
.center{display:flex; align-items:center; justify-content:center}
.badge{display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:#f5f5f5; border:1px solid var(--border)}
.badge.ok{background:#eafaf0; border-color:#d9f5e3; color:#2e7d32}
.badge.warn{background:#fff6e6; border-color:#ffe3b3; color:#8a5a00}
.badge.danger{background:#ffeaea; border-color:#ffd7d7; color:#a40000}
.video-box { position: relative; z-index: 10; }
.video-box video {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: auto;
}
.card .btn { position: relative; z-index: 1; }  /* 防止按钮层级盖住视频 */
.video-box { position: relative; z-index: 10; }
.video-box video { display:block; width:100%; height:auto; pointer-events:auto; }

.faq { margin-top:8px; }
.faq-item + .faq-item { border-top:1px solid #eee; }
.faq-q {
  width:100%; text-align:left; background:#fafafa; border:1px solid #eee;
  padding:10px 12px; border-radius:8px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-q[aria-expanded="true"] { background:#f5f9ff; border-color:#d6e4ff; }
.faq-arrow { transition: transform .2s; }
.faq-q[aria-expanded="true"] .faq-arrow { transform: rotate(90deg); }
.faq-a { display:none; padding:10px 2px 12px 2px; color:#444; line-height:1.6; }