/* ============================================================
   方案 A · 极简白 · Notion/Linear 风 (v1.1)
   ============================================================ */
:root {
    --brand:        #2563eb;
    --brand-hover:  #1d4ed8;
    --brand-soft:   #eff6ff;
    --brand-line:   #dbeafe;
    --text:         #111827;
    --text-2:       #4b5563;
    --text-3:       #9ca3af;
    --bg:           #fafbfc;
    --card:         #ffffff;
    --border:       #e5e7eb;
    --border-soft:  #f1f3f5;
    --radius:       10px;
    --shadow:       0 1px 2px rgba(15,23,42,.04);
    --shadow-hover: 0 4px 12px rgba(37,99,235,.08);
}
* { box-sizing: border-box; }
html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--text); font-size: 14px; line-height: 1.6;
}
body.minimal-blue { background: var(--bg) !important; min-height: 100vh; margin: 0; padding: 0; }
.full-bg { display: none !important; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: none; }

.page-wrap { max-width: 1280px; margin: 0 auto; padding: 20px 16px 40px; }
.grid-3col { display: grid; grid-template-columns: 280px 1fr 320px; gap: 18px; align-items: start; }
.side-left, .side-right { display: flex; flex-direction: column; gap: 14px; }
.main-center { min-width: 0; }
@media (max-width: 1199px) {
    .grid-3col { grid-template-columns: 260px 1fr; }
    .side-right { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .side-right > .card { flex: 1 1 240px; }
}

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }

.brand-card { padding: 22px 18px 16px; text-align: center; }
.brand-avatar img { width: 72px; height: 72px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(37,99,235,.15); background: #fff; }
.brand-name { margin: 12px 0 4px; font-size: 18px; color: var(--text); font-weight: 600; }
.brand-slogan { margin: 0 0 14px; font-size: 12px; color: var(--text-3); }
.brand-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.qa-btn { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; background: var(--brand-soft); border-radius: 8px; color: var(--brand); font-size: 12px; transition: all .2s; }
.qa-btn i { font-size: 15px; margin-bottom: 3px; }
.qa-btn:hover { background: var(--brand); color: #fff; }
.brand-contact { display: block; padding: 9px; background: var(--brand-soft); color: var(--brand); border-radius: 8px; font-size: 12.5px; text-align: center; transition: all .2s; }
.brand-contact:hover { background: var(--brand); color: #fff; }

.side-panel { padding: 14px 16px; }
.side-panel-title { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border-soft); font-size: 13px; font-weight: 600; color: var(--text-2); }
.side-panel-title i { color: var(--brand); }
.side-panel-list { display: flex; flex-direction: column; }
.side-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; color: var(--text); transition: all .15s; }
.side-item:last-child { border-bottom: 0; }
.side-item i.fa-angle-right { color: var(--text-3); font-size: 15px; }
.side-item > span i { color: var(--brand); margin-right: 6px; width: 16px; text-align: center; }
.side-item:hover { color: var(--brand); padding-left: 8px; }
.side-item:hover i.fa-angle-right { color: var(--brand); }
.promote-card { text-align: center; padding: 18px 16px; }
.promote-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.promote-title i { color: var(--brand); margin-right: 4px; }
.promote-card p { font-size: 12.5px; color: var(--text-2); margin: 0 0 14px; line-height: 1.7; }
.promote-actions { display: flex; gap: 8px; }
.promote-link { flex: 1; padding: 8px; text-align: center; background: var(--brand-soft); color: var(--brand); border-radius: 8px; font-size: 13px; transition: all .2s; }
.promote-link:hover { background: var(--brand-line); }
.promote-btn { flex: 1; padding: 8px; text-align: center; background: var(--brand); color: #fff; border-radius: 8px; font-size: 13px; transition: all .2s; }
.promote-btn:hover { background: var(--brand-hover); color: #fff; }

.main-card { padding: 0; }
.main-card .block-title { padding: 0; margin: 0; border-bottom: 1px solid var(--border); background: transparent; }
.main-card .nav-tabs { border-bottom: none; display: flex; padding: 0 8px; }
.main-card .nav-tabs > li { flex: 0 0 auto; float: none; }
.main-card .nav-tabs > li > a { border: none !important; border-radius: 0; color: var(--text-2); padding: 14px 18px; margin: 0; font-size: 14px; background: transparent !important; position: relative; transition: color .2s; }
.main-card .nav-tabs > li > a i { margin-right: 4px; }
.main-card .nav-tabs > li > a:hover { color: var(--brand); }
.main-card .nav-tabs > li.active > a,
.main-card .nav-tabs > li.active > a:focus,
.main-card .nav-tabs > li.active > a:hover { color: var(--brand) !important; font-weight: 600; }
.main-card .nav-tabs > li.active > a::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--brand); border-radius: 2px 2px 0 0; }
.main-card .tab-content { padding: 18px 20px 22px; }

.shop-tips { background: var(--brand-soft); color: var(--brand); padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; border-left: 3px solid var(--brand); }
.shop-tips i { margin-right: 4px; }
.notice-bar { margin-top: 16px; padding: 10px 14px; background: #f8fafc; border: 1px solid var(--border-soft); border-radius: 8px; text-align: center; color: var(--text-2); font-size: 12.5px; }
.notice-bar i { color: #10b981; margin-right: 4px; }

.sk-alert { padding: 10px 14px; background: var(--brand-soft); border-left: 3px solid var(--brand); border-radius: 6px; color: var(--text-2); font-size: 13px; margin-bottom: 12px; }

.sk-search { display: flex; align-items: stretch; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: border-color .2s; }
.sk-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.sk-search input { flex: 1; border: none; padding: 0 12px; height: 40px; font-size: 14px; outline: none; background: #fff; color: var(--text); }
.sk-search button { border: none; background: var(--brand); color: #fff; padding: 0 18px; cursor: pointer; font-size: 14px; }
.sk-search button:hover { background: var(--brand-hover); }

.sk-cate-grid { display: grid; gap: 12px; }
.sk-grid-lg { grid-template-columns: repeat(3, 1fr); }
.sk-grid-sm { grid-template-columns: repeat(4, 1fr); }
.sk-cate-card { display: block; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: all .2s; text-decoration: none; }
.sk-cate-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-hover); transform: translateY(-2px); text-decoration: none; }
.sk-cate-card.is-disabled { pointer-events: none; opacity: .5; filter: grayscale(80%); }
.sk-cate-img { background: #f8fafc; padding: 20px; text-align: center; border-bottom: 1px solid var(--border-soft); }
.sk-cate-img img { max-width: 100%; height: 80px; object-fit: contain; }
.sk-cate-info { padding: 10px 12px; text-align: center; }
.sk-cate-name { font-size: 13.5px; color: var(--text); font-weight: 500; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-cate-meta { font-size: 11.5px; color: var(--text-3); }

.sk-cate-mini { display: block; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 8px; text-align: center; transition: all .2s; text-decoration: none; }
.sk-cate-mini:hover { border-color: var(--brand-line); box-shadow: var(--shadow-hover); text-decoration: none; }
.sk-cate-mini.is-disabled { pointer-events: none; opacity: .5; filter: grayscale(80%); }
.sk-cate-mini img { max-width: 100%; height: 60px; object-fit: contain; margin-bottom: 6px; }
.sk-cate-mini-name { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sk-cate-rows { display: flex; flex-direction: column; gap: 8px; }
.sk-cate-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 8px; transition: all .2s; text-decoration: none; }
.sk-cate-row:hover { border-color: var(--brand-line); box-shadow: var(--shadow-hover); text-decoration: none; }
.sk-cate-row.is-disabled { pointer-events: none; opacity: .5; filter: grayscale(80%); }
.sk-cate-row-img { width: 44px; height: 44px; object-fit: contain; background: #f8fafc; border-radius: 8px; padding: 4px; flex-shrink: 0; }
.sk-cate-row-info { flex: 1; min-width: 0; }
.sk-cate-row-name { font-size: 14px; color: var(--text); font-weight: 500; margin-bottom: 2px; }
.sk-cate-row-meta { font-size: 12px; color: var(--text-3); }
.sk-cate-row-arrow { color: var(--text-3); font-size: 16px; }

.sk-cur-cate { text-align: center; padding: 10px 0 18px; }
.sk-cur-cate img { max-width: 200px; max-height: 100px; margin-bottom: 8px; }
.sk-cur-cate img:not([src]),
.sk-cur-cate img[src=""] { display: none; }
.sk-cur-cate h3 { margin: 0; font-size: 16px; color: var(--text); font-weight: 600; }

.sk-form-row { margin-bottom: 14px; }
.sk-form-row > label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
.sk-input { display: block; width: 100%; height: 40px; padding: 0 12px; background: #fff; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; outline: none; transition: all .2s; }
.sk-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.sk-input-plain { background: #f8fafc; color: var(--text-2); }

.sk-price-wrap { display: flex; align-items: stretch; }
.sk-price-wrap .sk-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sk-price-suffix { display: flex; align-items: center; padding: 0 14px; background: var(--brand); color: #fff; border-radius: 0 8px 8px 0; font-size: 13px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.sk-price-suffix:hover { background: var(--brand-hover); color: #fff; }

.sk-reg-tip { margin-top: 8px; font-size: 12.5px; }
.sk-reg-tip a { color: var(--text-2); }
.sk-reg-tip .hl { color: var(--brand); font-weight: 600; }
.sk-reg-tip i { color: var(--brand); margin-right: 3px; }

/* 数量组 —— 修复"说明"竖排 */
.sk-num-group { display: flex; align-items: stretch; gap: 6px; flex-wrap: nowrap; }
.sk-num-btn { width: 40px; height: 40px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 18px; border-radius: 8px; cursor: pointer; transition: all .2s; line-height: 1; flex-shrink: 0; }
.sk-num-btn:hover { border-color: var(--brand); color: var(--brand); }
.sk-num-input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; text-align: center; font-size: 14px; outline: none; }
.sk-num-input:focus { border-color: var(--brand); }
.sk-num-help { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; height: 40px; border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand); border-radius: 8px; font-size: 13px; text-decoration: none; white-space: nowrap; flex-shrink: 0; min-width: 56px; }
.sk-num-help:hover { background: var(--brand); color: #fff; }

.sk-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 8px; font-size: 14px; text-decoration: none; cursor: pointer; border: none; transition: all .2s; min-height: 42px; white-space: nowrap; }
.sk-btn-primary { background: var(--brand); color: #fff; }
.sk-btn-primary:hover { background: var(--brand-hover); color: #fff; }
.sk-btn-line { background: #fff; color: var(--brand); border: 1px solid var(--brand-line); }
.sk-btn-line:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.sk-btn-warn { background: #ef4444; color: #fff; }
.sk-btn-warn:hover { background: #dc2626; color: #fff; }
.sk-btn-ghost { background: #f8fafc; color: var(--text-2); border: 1px solid var(--border); }
.sk-btn-ghost:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.sk-btn-block { display: flex; width: 100%; }
.sk-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sk-btn-mini { display: inline-block; padding: 4px 12px; background: var(--brand); color: #fff !important; border-radius: 14px; font-size: 12px; text-decoration: none; }
.sk-btn-mini:hover { background: var(--brand-hover); color: #fff !important; }

.sk-alert-frame { background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.sk-alert-title { font-weight: 600; color: var(--text); margin-bottom: 8px; font-size: 14px; }
.sk-alert-content { color: var(--text); font-size: 13.5px; line-height: 1.8; white-space: pre-wrap; word-break: break-all; }

/* 商品介绍操作按钮组：桌面自适应，手机固定 3 列 */
.sk-alert-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
.sk-alert-actions .sk-btn { padding: 8px 6px; font-size: 12.5px; min-height: 38px; }

.sk-cart-tip { display: flex; align-items: center; padding: 10px 14px; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 8px; color: var(--text); font-size: 13px; margin: 12px 0; }
.sk-cart-tip i { color: var(--brand); margin-right: 6px; }
.sk-cart-tip b { color: var(--brand); margin: 0 3px; }
.sk-cart-open { margin-left: auto; color: var(--brand); font-size: 12.5px; text-decoration: underline; }

.sk-reg-banner { display: flex; align-items: center; padding: 10px 14px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; color: #92400e; font-size: 13px; margin-top: 12px; }
.sk-reg-banner i { color: #f97316; margin-right: 6px; }
.sk-reg-banner a { margin-left: auto; }
.sk-cur-tool { text-align: center; color: var(--brand); font-size: 13px; margin-top: 8px; }

.sk-rank { background: #f8fafc; border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.sk-rank-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sk-rank-title { font-weight: 600; color: var(--text); font-size: 13.5px; display: flex; align-items: center; }
.sk-rank-title i { color: var(--brand); margin-right: 5px; }
.sk-rank-tip { font-size: 11.5px; color: var(--text-3); }
.sk-rank-list { display: flex; flex-direction: column; gap: 6px; }
.sk-rank-item { display: flex; align-items: center; padding: 8px 10px; background: #fff; border: 1px solid var(--border-soft); border-radius: 6px; cursor: pointer; transition: all .15s; }
.sk-rank-item:hover { background: var(--brand-soft); border-color: var(--brand-line); }
.sk-rank-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; color: #fff; font-size: 12px; font-weight: 700; margin-right: 10px; flex-shrink: 0; background: #cbd5e1; }
.sk-rank-num.r1 { background: var(--brand); }
.sk-rank-num.r2 { background: #60a5fa; }
.sk-rank-num.r3 { background: #93c5fd; }
.sk-rank-name { flex: 1; color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-rank-dep { color: var(--brand); font-size: 12px; font-weight: 600; margin-left: 8px; }

#credits-box { display: none; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 10px; padding: 12px 14px; margin: 12px 0; font-size: 13px; color: var(--text); }
#credits-box .cr-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
#credits-box .cr-title { font-weight: 600; color: var(--brand); }
#credits-box .cr-title i { color: var(--brand); margin-right: 4px; }
#credits-box .cr-avail { font-size: 12px; color: var(--text-2); }
#credits-box .cr-avail b { color: var(--brand); font-size: 14px; margin: 0 3px; }
#credits-box .cr-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#credits-box .cr-check { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
#credits-box .cr-input { width: 110px; padding: 5px 8px; border: 1px solid var(--brand); border-radius: 6px; font-size: 13px; text-align: center; background: #fff; color: var(--text); height: 30px; }
#credits-box .cr-input:disabled { background: #f5f5f5; color: #999; }
#credits-box .cr-tip { font-size: 11px; color: var(--text-2); margin-left: auto; }
#credits-box .cr-discount { color: var(--brand); font-weight: 600; }
#credits-box .cr-alert { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--brand-line); font-size: 11px; color: var(--text-2); line-height: 1.6; }
#credits-box.cr-none { background: #f8fafc; border-color: var(--border); color: var(--text-3); }

#free-lottery-box { display: none; background: linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%); border: 1px solid var(--brand-line); border-radius: 10px; padding: 12px 14px; margin: 12px 0; font-size: 13px; color: var(--brand); }
#free-lottery-box .fl-head { font-weight: 600; color: var(--brand); margin-bottom: 4px; font-size: 14px; }
#free-lottery-box .fl-rate { display: inline-block; background: var(--brand); color: #fff; padding: 2px 10px; border-radius: 12px; font-size: 13px; font-weight: 700; margin: 0 4px; }
#free-lottery-box .fl-tip { color: var(--text-2); font-size: 11px; margin-top: 4px; }

.goods-like-box { display: flex; width: 100%; justify-content: space-around; padding: 10px 0; }
.goods-like-box .like-icon { width: 20px; height: 20px; display: inline-block; cursor: pointer; position: relative; }
.goods-like-box .like-icon svg { width: 100%; height: 100%; }
.goods-like-box .like-icon-right svg { transform: rotate(180deg); }
.goods-like-box .like-num { font-size: 18px; margin-left: 6px; color: var(--text); }

.cs-wrap { position: relative; flex: 1; }
.cs-display { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 32px 8px 12px; background: #fff; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 14px; overflow: hidden; white-space: nowrap; position: relative; }
.cs-display:hover { border-color: var(--brand-line); }
.cs-display:after { content: ""; position: absolute; right: 12px; top: 50%; width: 0; height: 0; margin-top: -3px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--text-3); }
.cs-display img, .cs-opt img { width: 22px !important; height: 22px !important; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.cs-display .cs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cs-list { display: none; position: fixed; background: #fff; border: 1px solid var(--border); max-height: 50vh; overflow-y: auto; z-index: 2147483647; box-shadow: 0 8px 24px rgba(15,23,42,.12); border-radius: 8px; }
.cs-list.open { display: block; }
.cs-opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.cs-opt:last-child { border-bottom: 0; }
.cs-opt:hover { background: var(--brand-soft); }
.cs-opt.cs-disabled { cursor: not-allowed !important; background: #f5f5f5 !important; pointer-events: none; opacity: .6; }
.cs-mask { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: transparent; z-index: 2147483646; }
.cs-mask.open { display: block; }

.tab-content .form-control, .input-group .form-control, select.form-control { background: #fff; border: 1px solid var(--border); border-radius: 8px; height: 40px; color: var(--text); box-shadow: none; transition: border-color .2s, box-shadow .2s; font-size: 14px; }
.tab-content .form-control:focus, .input-group .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.input-group-addon { background: #f8fafc; border: 1px solid var(--border); color: var(--text-2); border-radius: 8px; font-size: 13px; }
.input-group .input-group-btn .btn { border-radius: 8px; }
.tab-content .btn-primary, .btn-primary { background: var(--brand); border: none; border-radius: 8px; height: 42px; font-size: 14px; letter-spacing: 1px; color: #fff; box-shadow: none; transition: background .2s; }
.tab-content .btn-primary:hover, .btn-primary:hover, .btn-primary:focus { background: var(--brand-hover); color: #fff; }
.btn-info { background: var(--brand); border: none; color: #fff; border-radius: 8px; }
.btn-info:hover { background: var(--brand-hover); color: #fff; }
.btn-line-blue { display: inline-block; padding: 8px 14px; background: #fff; border: 1px solid var(--brand-line); color: var(--brand); border-radius: 8px; font-size: 13px; transition: all .2s; text-align: center; }
.btn-line-blue:hover { background: var(--brand); color: #fff; border-color: var(--brand); text-decoration: none; }
.btn-line-blue.btn-block { display: block; padding: 10px; }
.btn-default { background: #fff; border: 1px solid var(--border); color: var(--text-2); border-radius: 8px; }
.btn-default:hover { background: #f8fafc; color: var(--text); }

.kf-tip { display: flex; align-items: center; gap: 12px; padding: 14px; background: #f8fafc; border: 1px solid var(--border-soft); border-radius: 8px; margin-bottom: 14px; }
.kf-tip img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.kf-info { flex: 1; }
.kf-name { font-weight: 600; color: var(--text); margin-bottom: 3px; }
.kf-detail { font-size: 12.5px; color: var(--text-2); }
.kf-detail i { color: var(--brand); margin-right: 4px; }
.query-notice { padding: 10px 14px; background: var(--brand-soft); border-left: 3px solid var(--brand); border-radius: 0 6px 6px 0; color: var(--text-2); font-size: 13px; margin-bottom: 12px; }
.query-input { margin-bottom: 12px; }
.query-input #searchtype { min-width: 100px; height: 40px; }
.query-hint { margin-top: 12px; padding: 10px 14px; background: #fff7ed; border-left: 3px solid #f59e0b; border-radius: 0 6px 6px 0; color: #92400e; font-size: 12.5px; }
.query-hint i { margin-right: 4px; }
.query-scroll-tip { text-align: center; color: var(--text-3); font-size: 12px; margin-bottom: 6px; }

.plan-card { border: 1px solid var(--brand-line); background: linear-gradient(180deg, var(--brand-soft) 0%, #fff 60%); border-radius: var(--radius); padding: 20px; text-align: center; }
.plan-head h4 { margin: 0 0 6px; color: var(--brand); font-size: 17px; font-weight: 600; }
.plan-head h4 i { margin: 0 4px; }
.plan-slash { color: var(--text-3); margin: 0 6px; }
.plan-price { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 16px; }
.plan-list { list-style: none; padding: 0; margin: 0 auto 18px; text-align: left; max-width: 300px; }
.plan-list li { padding: 8px 0; border-bottom: 1px dashed var(--border); color: var(--text-2); font-size: 13.5px; }
.plan-list li:last-child { border-bottom: 0; }
.plan-list li i { color: var(--brand); margin-right: 8px; }
.plan-actions { display: flex; gap: 10px; justify-content: center; }
.plan-actions .btn-primary { padding: 8px 20px; }

.lottery-box { text-align: center; padding: 10px 0; }
#roll { font-size: 20px; font-weight: 600; color: var(--brand); padding: 30px 20px; background: var(--brand-soft); border-radius: 8px; margin-bottom: 16px; }
.lottery-actions .btn { padding: 10px 40px; font-size: 15px; }
.giftlist { margin-top: 16px; text-align: left; }
.giftlist-title { font-weight: 600; color: var(--text); margin-bottom: 8px; }

.more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.more-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: #f8fafc; border: 1px solid var(--border-soft); border-radius: 8px; transition: all .2s; color: var(--text); text-decoration: none; }
.more-item:hover { background: #fff; border-color: var(--brand-line); color: var(--brand); box-shadow: var(--shadow-hover); text-decoration: none; }
.more-item > i { font-size: 22px; color: var(--brand); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border-radius: 8px; flex-shrink: 0; }
.more-text { min-width: 0; }
.more-text strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.more-text span { font-size: 12px; color: var(--text-3); }
.more-item:hover .more-text span { color: var(--text-2); }

.info-card { padding: 14px 16px; }
.info-card-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; font-weight: 600; color: var(--text); }
.info-card-title i { color: var(--brand); margin-right: 5px; }
.info-card-title small { color: var(--text-3); font-size: 11.5px; font-weight: normal; }
.notice-list { list-style: none; padding: 0; margin: 0; }
.notice-list li { padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; cursor: pointer; }
.notice-list li:last-child { border-bottom: 0; }
.notice-list li a { color: var(--text); display: flex; align-items: center; gap: 6px; }
.notice-list li a:hover { color: var(--brand); }
.notice-list li a i.fa-angle-right { color: var(--brand); font-size: 12px; flex-shrink: 0; }
.notice-list li.empty { color: var(--text-3); text-align: center; padding: 20px 0; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.stat-item { text-align: center; padding: 12px 6px; background: #f8fafc; border-radius: 8px; border: 1px solid var(--border-soft); }
.stat-item b { display: block; color: var(--brand); font-size: 15px; font-weight: 600; margin-bottom: 4px; word-break: break-all; }
.stat-item span { font-size: 11.5px; color: var(--text-3); }
.runtime-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.runtime-card > i { font-size: 22px; color: var(--brand); width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border-radius: 50%; flex-shrink: 0; }
.runtime-label { font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.runtime-value { font-size: 14px; color: var(--text); font-weight: 600; letter-spacing: 0.5px; }
.fav-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--text); transition: all .2s; text-decoration: none; }
.fav-card:hover { background: var(--brand-soft); color: var(--text); border-color: var(--brand-line); text-decoration: none; }
.fav-card > i { font-size: 20px; color: var(--brand); width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border-radius: 50%; flex-shrink: 0; }
.fav-title { font-size: 12.5px; color: var(--text); word-break: break-all; }
.fav-card small { color: var(--text-3); font-size: 11.5px; }
.foot-card { text-align: center; padding: 16px; }
.foot-card .foot-copy { font-size: 13px; color: var(--text-2); margin-bottom: 4px; }
.foot-card .foot-copy b { color: var(--brand); font-weight: 600; }
.foot-card .foot-host { margin-bottom: 6px; }
.foot-card .foot-host a { color: var(--text-2); font-size: 12.5px; }
.foot-card .foot-extra { font-size: 11.5px; color: var(--text-3); line-height: 1.7; margin-top: 4px; }
.foot-card .foot-icons { margin-top: 10px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.foot-card .foot-icons img { border-radius: 3px; opacity: .75; }

.modal-backdrop.in { opacity: .5; background: #0f172a; }
.modal-content { background: #fff !important; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 40px rgba(15,23,42,.15); overflow: hidden; }
.modal-header { background: #fff !important; background-image: none !important; border-bottom: 1px solid var(--border-soft); padding: 16px 20px; color: var(--text) !important; }
.modal-header .modal-title, .modal-header h4, .modal-header b, .modal-header font { color: var(--text) !important; font-weight: 600; font-size: 16px; text-shadow: none; }
.modal-header .close { color: var(--text-3); opacity: 1; text-shadow: none; font-size: 22px; }
.modal-header .close:hover { color: var(--text); }
.modal-body { color: var(--text); padding: 18px 20px; }
.modal-footer { border-top: 1px solid var(--border-soft); background: #f8fafc; padding: 12px 20px; }
.modal-footer .btn-default { border-radius: 8px; padding: 6px 18px; }

.rec-list { display: flex; flex-direction: column; gap: 8px; }
.rec-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #f8fafc; border: 1px solid var(--border-soft); border-radius: 8px; color: var(--text); transition: all .2s; text-decoration: none; }
.rec-item:hover { background: var(--brand-soft); border-color: var(--brand-line); text-decoration: none; }
.rec-item-info { flex: 1; min-width: 0; }
.rec-item-name { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-item-price { color: var(--brand); font-size: 13px; margin-top: 2px; }
.rec-item i.fa-angle-right { color: var(--text-3); font-size: 16px; }

.hot-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.hot-tabs .btn { flex: 1; }
.hot-table { border-radius: 8px; overflow: hidden; }
.hot-table thead tr { background: var(--brand); }
.hot-table thead th { color: #fff !important; border: none; padding: 10px 12px; font-weight: 500; }
.hot-table tbody td { padding: 10px 12px; border-color: var(--border-soft); color: var(--text); }
.hot-table tbody tr.rk1 { background: #fef3c7; }
.hot-table tbody tr.rk2 { background: #e0f2fe; }
.hot-table tbody tr.rk3 { background: #ffedd5; }

#accordion .panel { background: transparent; border: 1px solid var(--border-soft); border-radius: 8px !important; box-shadow: none; margin-bottom: 8px !important; overflow: hidden; }
#accordion .panel-heading { background: #f8fafc; border: none; padding: 12px 14px; }
#accordion .panel-heading:hover { background: var(--brand-soft); }
#accordion .panel-title a { color: var(--text); font-size: 13.5px; text-decoration: none; display: block; }
#accordion .panel-title a:not(.collapsed) { color: var(--brand); font-weight: 600; }
#accordion .panel-body { font-size: 13px; color: var(--text-2); line-height: 1.75; padding: 12px 14px; background: #fff; border-top: 1px solid var(--border-soft); }
#lxkf .list-group { border-radius: 8px; overflow: hidden; margin-top: 14px; }
#lxkf .list-group-item { background: #f8fafc; border: 1px solid var(--border-soft); padding: 12px 14px; color: var(--text); }
#lxkf .list-group-item .img-avatar { width: 44px; height: 44px; border: 2px solid #fff; }
#lxkf .list-group-item .btn-primary { border-radius: 20px; padding: 5px 16px; }
#lxkf .list-group-item .font-w600 { color: var(--brand); }
#lxkf .kf-tips { font-size: 12.5px; color: var(--text-2); line-height: 1.8; }

.version-table thead tr { background: var(--brand); }
.version-table thead th { color: #fff !important; border: none; padding: 12px 14px; font-weight: 500; }
.version-table tbody td { padding: 12px 14px; border-color: var(--border-soft); font-size: 13px; color: var(--text); }
.ver-yes, .ver-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 11px; margin: 0 2px; }
.ver-yes { background: var(--brand); }
.ver-no { background: #cbd5e1; }

#audio-play { position: fixed; z-index: 9998; right: 20px; bottom: 100px; }
#audio-btn { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--brand-line); color: var(--brand); box-shadow: 0 2px 8px rgba(37,99,235,.15); display: flex; align-items: center; justify-content: center; cursor: pointer; animation: none !important; }
#audio-btn.on { animation: none !important; }
#kefu-btn { position: fixed; right: 20px; bottom: 30px; z-index: 99999; touch-action: none; }
#kefu-inner { width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 20px; box-shadow: 0 4px 14px rgba(37,99,235,.35); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s; }
#kefu-inner:hover { transform: scale(1.08); }

.side-fixed-btn { z-index: 9999; position: fixed; left: 0; }
.side-fixed-1 { bottom: 240px; }
.side-fixed-2 { bottom: 140px; }
.side-fixed-btn a { display: block; padding: 12px 6px; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 500; text-decoration: none; border-radius: 0 8px 8px 0; box-shadow: 0 2px 8px rgba(37,99,235,.25); writing-mode: vertical-rl; letter-spacing: 2px; line-height: 1; }
.side-fixed-2 a { background: #3b82f6; }
.side-fixed-btn a:hover { background: var(--brand-hover); color: #fff; }

.widget, .block.full2, .panel, .panel-primary, .block.block-themed { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; }
marquee { display: none !important; }

/* ============================================================
   手机端 (≤767px)
   ============================================================ */
@media (max-width: 767px) {
    .page-wrap { padding: 12px 10px 30px; }

    .grid-3col {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        grid-template-columns: none;
    }
    .side-left, .side-right, .main-center { display: contents; }
    .side-right > .card { flex: 0 0 auto; width: auto; }

    .brand-card                { order: 1; }
    .main-card                 { order: 2; }
    .notice-info-card          { order: 3; }
    .stat-info-card            { order: 4; }
    .side-panel:not(.promote-card) { order: 5; }
    .promote-card              { order: 6; }
    .runtime-card              { order: 7; }
    .fav-card                  { order: 8; }
    .foot-card                 { order: 9; }

    .side-panel-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .side-item { flex-direction: column; justify-content: center; padding: 12px 4px; border: 1px solid var(--border-soft); border-radius: 8px; text-align: center; }
    .side-item:last-child { border-bottom: 1px solid var(--border-soft); }
    .side-item:hover { padding-left: 4px; background: var(--brand-soft); }
    .side-item > span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
    .side-item > span i { margin: 0; font-size: 18px; color: var(--brand); width: auto; }
    .side-item > i.fa-angle-right { display: none; }

    .promote-card p { display: none; }
    .promote-card { padding: 14px 16px; }
    .promote-title { margin-bottom: 10px; }
    .brand-card { padding: 18px 16px 14px; }

    .sk-grid-lg { grid-template-columns: repeat(2, 1fr); }
    .sk-grid-sm { grid-template-columns: repeat(3, 1fr); }
    .more-grid { grid-template-columns: 1fr; }

    /* 商品介绍按钮组：手机保持 3 列，字号更小 */
    .sk-alert-actions { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .sk-alert-actions .sk-btn { padding: 8px 4px; font-size: 12px; letter-spacing: 0; }

    /* 数量控件：紧凑不换行 */
    .sk-num-group { gap: 4px; }
    .sk-num-btn { width: 36px; }
    .sk-num-help { min-width: 46px; padding: 0 10px; font-size: 12.5px; }
}