/* ============================================================
   音创汇聚商城 - 全站样式
   主题: 中国风 (印章 / 金线 / 回字纹) + 科技风 (切角 / 等宽 / 折角)
   配色: 墨夜底 + 朱砂红 + 帝皇金 + 青铜绿
   ============================================================ */

/* ---------- 主题变量 ---------- */
:root {
    --bg-ink:      #0d0f12;   /* 墨夜 */
    --bg-yan:      #16191e;   /* 墨砚 */
    --bg-lacquer:  #1c2027;   /* 漆面 */
    --line-bronze: #2a2e35;   /* 青铜暗 */
    --line-gold:   #3a3328;   /* 描金暗 */
    --text-paper:  #e6e3d8;   /* 宣纸白 */
    --text-ink:    #1b1f24;   /* 墨书 */
    --text-mute:   #8a8580;   /* 灰宣 */
    --text-dim:    #5a6470;
    --c-vermilion: #c2392f;   /* 朱砂红 */
    --c-seal:      #7a1d1d;   /* 印泥暗 */
    --c-gold:      #d4a04d;   /* 帝皇金 */
    --c-gold-deep: #a87932;
    --c-bronze:    #5fd49a;   /* 青铜绿 */
    --c-jade:      #3aa176;
    --c-warn:      #e67e22;
    --c-danger:    #b03a2e;
    --font-han:    "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
    --font-tech:   "JetBrains Mono", "Fira Code", Consolas, "SF Mono", Menlo, monospace;
    --font-ui:     -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    font-family: var(--font-ui);
    background: var(--bg-ink);
    color: var(--text-paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; outline: none; }

/* ---------- 表单控件 ---------- */
input, select, textarea {
    background: #11141a;
    color: var(--text-paper);
    border: 1px solid var(--line-bronze);
    border-radius: 2px;
    padding: 11px 14px;
    width: 100%;
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
input:focus, select:focus, textarea:focus {
    border-color: var(--c-gold);
    box-shadow: 0 0 0 1px var(--c-gold) inset;
}

/* ---------- 异形按钮（科技风切角） ---------- */
.btn, button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border: 0;
    background: var(--c-gold);
    color: var(--text-ink);
    font-weight: 700;
    font-size: 14px;
    padding: 12px 28px;
    letter-spacing: 2px;
    font-family: var(--font-han);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    transition: transform .15s, background .2s;
}
button:hover, .btn:hover { background: #e6b35e; transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(0); }

/* 印章按钮（朱砂描边） */
button.seal, .btn-seal {
    background: transparent;
    color: var(--c-vermilion);
    border: 2px solid var(--c-vermilion);
    padding: 10px 26px;
    letter-spacing: 4px;
    clip-path: none;
    border-radius: 2px;
    position: relative;
}
button.seal::before, .btn-seal::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid var(--c-vermilion);
    opacity: .35;
    pointer-events: none;
}
button.seal:hover, .btn-seal:hover {
    background: var(--c-vermilion);
    color: #fff;
}

/* 次级按钮（箭头尾端） */
button.ghost, .btn-ghost {
    background: transparent;
    color: var(--text-paper);
    border: 1px solid var(--line-bronze);
    padding: 11px 26px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 8px 50%);
}
button.ghost:hover, .btn-ghost:hover {
    border-color: var(--c-gold);
    color: var(--c-gold);
}

/* 危险按钮 */
button.danger, .btn-danger {
    background: var(--c-danger);
    color: #fff;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
button.danger:hover, .btn-danger:hover { background: #c04438; }

/* 按钮组 */
.btn-group { display: inline-flex; gap: 0; }
.btn-group > .btn, .btn-group > button { margin-left: -8px; }
.btn-group > .btn:first-child, .btn-group > button:first-child { margin-left: 0; }

/* 链接式按钮 */
.link-btn {
    color: var(--c-gold);
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: border-color .2s;
}
.link-btn:hover { border-bottom-color: var(--c-gold); }
.link-danger { color: var(--c-vermilion); }
.link-danger:hover { border-bottom-color: var(--c-vermilion); }

/* ---------- 顶栏（中国风金线 + 印章 logo） ---------- */
.topbar {
    background: linear-gradient(180deg, #131720 0%, #0d0f12 100%);
    border-bottom: 1px solid var(--line-bronze);
    padding: 0 32px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 var(--line-gold) inset, 0 4px 16px rgba(0,0,0,.4);
}
.topbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--c-gold) 30%, var(--c-gold) 70%, transparent 100%);
    opacity: .55;
}
.topbar .brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.topbar .seal-mark {
    width: 36px; height: 36px;
    background: var(--c-seal);
    color: #f5e6c8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-han);
    font-weight: 800;
    font-size: 18px;
    border-radius: 3px;
    box-shadow: 0 0 0 2px var(--c-seal) inset, 0 0 0 3px #4a1212;
    transform: rotate(-2deg);
    flex-shrink: 0;
}
.topbar .logo {
    font-family: var(--font-han);
    font-size: 19px;
    font-weight: 700;
    color: var(--c-gold);
    letter-spacing: 3px;
}
.topbar .logo .sub {
    color: var(--text-mute);
    font-family: var(--font-tech);
    font-weight: 400;
    font-size: 11px;
    margin-left: 8px;
    letter-spacing: 2px;
}
.topbar nav { display: flex; gap: 6px; }
.topbar nav a {
    padding: 8px 18px;
    color: #c8c4ba;
    font-size: 14px;
    font-family: var(--font-han);
    letter-spacing: 1px;
    position: relative;
    transition: color .2s;
}
.topbar nav a::before {
    content: "";
    position: absolute;
    left: 8px; right: 8px;
    bottom: 4px;
    height: 1px;
    background: var(--c-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s;
}
.topbar nav a:hover { color: var(--c-gold); }
.topbar nav a:hover::before { transform: scaleX(1); }
.topbar nav a.admin-link { color: var(--c-vermilion); }
.topbar .user {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: #c8c4ba;
}
.topbar .user a { color: var(--c-gold); font-weight: 600; }
.topbar .user a:hover { color: #e6b35e; }

/* ---------- 容器 ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 32px; }

/* ---------- 卡片（回字纹双线） ---------- */
.card {
    background: var(--bg-yan);
    border: 1px solid var(--line-bronze);
    border-radius: 2px;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    position: relative;
}
.card::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid var(--line-gold);
    pointer-events: none;
    opacity: .55;
}
.card-header {
    padding: 18px 26px;
    border-bottom: 1px solid var(--line-bronze);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.card-header::after {
    content: "";
    position: absolute;
    left: 26px; right: 26px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, var(--c-gold) 0%, transparent 60%);
    opacity: .35;
}
.card-header h2 {
    font-size: 17px;
    color: var(--c-gold);
    letter-spacing: 3px;
    font-family: var(--font-han);
    font-weight: 700;
}
.card-body { padding: 26px; position: relative; }

/* ---------- 表单 ---------- */
.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #c8c4ba;
    font-size: 13px;
    font-family: var(--font-han);
    letter-spacing: 1px;
}
.form-row { display: flex; gap: 16px; }
.form-row > * { flex: 1; }
.form-error { color: var(--c-vermilion); font-size: 13px; margin-top: 6px; }

/* ---------- 商品网格 ---------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}
.product-card {
    background: var(--bg-yan);
    border: 1px solid var(--line-bronze);
    border-radius: 2px;
    overflow: hidden;
    transition: transform .25s, border-color .25s, box-shadow .25s;
    display: flex;
    flex-direction: column;
    position: relative;
}
.product-card::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--line-gold);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s;
}
.product-card:hover {
    transform: translateY(-3px);
    border-color: var(--c-gold);
    box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(212,160,77,.15);
}
.product-card:hover::after { opacity: .55; }
.product-card .cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #0a0c0f;
}
.product-card .info { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.product-card .name {
    font-size: 15px;
    color: var(--text-paper);
    font-weight: 600;
    margin-bottom: 10px;
    min-height: 44px;
    font-family: var(--font-han);
    letter-spacing: 1px;
}
.product-card .desc {
    font-size: 12px;
    color: var(--text-mute);
    flex: 1;
    margin-bottom: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.product-card .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--line-bronze);
}
.product-card .price {
    color: var(--c-gold);
    font-size: 22px;
    font-weight: 800;
    font-family: var(--font-tech);
    letter-spacing: 1px;
}
.product-card .price::before { content: ""; }
.product-card .stock {
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--font-tech);
    letter-spacing: 1px;
    margin-top: 2px;
}
.product-card .buy {
    display: inline-block;
    padding: 8px 22px;
    background: var(--c-gold);
    color: var(--text-ink);
    font-weight: 700;
    border-radius: 0;
    font-size: 13px;
    font-family: var(--font-han);
    letter-spacing: 2px;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    transition: background .2s;
}
.product-card .buy:hover { background: #e6b35e; }
.product-card .buy.disabled {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--line-bronze);
    clip-path: none;
    cursor: not-allowed;
}

/* ---------- 表格 ---------- */
table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--line-bronze);
    font-size: 14px;
}
th {
    background: #11141a;
    color: var(--c-gold);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 2px;
    font-family: var(--font-han);
    border-bottom: 1px solid var(--line-gold);
    text-transform: uppercase;
}
tbody tr { transition: background .15s; }
tbody tr:hover { background: #1a1e25; }

/* ---------- 标签 ---------- */
.tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 1px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: var(--font-han);
    border: 1px solid;
}
.tag-paid   { background: rgba(95,212,154,.08); color: var(--c-bronze); border-color: rgba(95,212,154,.4); }
.tag-unpaid { background: rgba(212,160,77,.08); color: var(--c-gold); border-color: rgba(212,160,77,.4); }
.tag-refund { background: rgba(226,126,34,.08); color: var(--c-warn); border-color: rgba(226,126,34,.4); }
.tag-warning{ background: rgba(212,160,77,.08); color: var(--c-gold); border-color: rgba(212,160,77,.4); }
.tag-on     { background: rgba(95,212,154,.08); color: var(--c-bronze); border-color: rgba(95,212,154,.4); }
.tag-off    { background: rgba(90,100,112,.08); color: var(--text-dim); border-color: rgba(90,100,112,.3); }
.tag-reject { background: rgba(194,57,47,.08); color: var(--c-vermilion); border-color: rgba(194,57,47,.4); }

/* ---------- 提示框 ---------- */
.flash {
    padding: 14px 22px;
    border: 1px solid;
    border-left-width: 4px;
    margin-bottom: 22px;
    font-size: 14px;
    font-family: var(--font-han);
    letter-spacing: 1px;
    border-radius: 0;
}
.flash-success { background: rgba(95,212,154,.06); color: var(--c-bronze); border-color: rgba(95,212,154,.4); border-left-color: var(--c-bronze); }
.flash-error   { background: rgba(226,126,34,.06); color: var(--c-warn); border-color: rgba(226,126,34,.4); border-left-color: var(--c-warn); }
.flash-info    { background: rgba(212,160,77,.06); color: var(--c-gold); border-color: rgba(212,160,77,.4); border-left-color: var(--c-gold); }

/* ---------- 登录注册页 ---------- */
.auth-page {
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(212,160,77,.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(194,57,47,.04) 0%, transparent 50%),
        var(--bg-ink);
}
.auth-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(212,160,77,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,160,77,.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    opacity: .35;
}
.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-yan);
    border: 1px solid var(--line-bronze);
    padding: 48px 44px 42px;
    box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(212,160,77,.1);
    position: relative;
}
.auth-card::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid var(--line-gold);
    pointer-events: none;
}
.auth-card .auth-seal {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 56px; height: 56px;
    background: var(--c-seal);
    color: #f5e6c8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-han);
    font-weight: 800;
    font-size: 22px;
    border-radius: 3px;
    box-shadow: 0 0 0 2px var(--c-seal) inset, 0 0 0 4px #4a1212;
}
.auth-card h1 {
    text-align: center;
    font-size: 26px;
    color: var(--c-gold);
    margin-bottom: 4px;
    letter-spacing: 8px;
    font-family: var(--font-han);
    font-weight: 700;
    padding-left: 8px;
}
.auth-card .tip {
    text-align: center;
    color: var(--text-mute);
    font-size: 13px;
    margin-bottom: 30px;
    font-family: var(--font-han);
    letter-spacing: 2px;
}
.auth-card .switch {
    text-align: center;
    margin-top: 22px;
    font-size: 13px;
    color: var(--text-mute);
}
.auth-card .switch a { color: var(--c-gold); font-weight: 600; }
.auth-card .divider-gold {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
    margin: 22px 0;
    opacity: .55;
}

/* ---------- 商品详情 ---------- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.product-detail .cover-box {
    background: var(--bg-lacquer);
    border: 1px solid var(--line-bronze);
    padding: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    position: relative;
}
.product-detail .cover-box::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid var(--line-gold);
    pointer-events: none;
}
.product-detail .cover-box img { max-height: 500px; width: auto; }
.product-detail .info h1 {
    font-size: 28px;
    color: var(--text-paper);
    margin-bottom: 18px;
    font-family: var(--font-han);
    letter-spacing: 2px;
    font-weight: 700;
}
.product-detail .info h1::before {
    content: "";
    display: inline-block;
    width: 4px; height: 22px;
    background: var(--c-vermilion);
    margin-right: 12px;
    vertical-align: -3px;
}
.product-detail .info .price-box {
    background: #11141a;
    border: 1px solid var(--line-gold);
    padding: 22px 26px;
    margin: 22px 0;
    display: flex;
    align-items: center;
    gap: 22px;
    position: relative;
}
.product-detail .info .price-box::before {
    content: "";
    position: absolute;
    top: 4px; left: 4px;
    width: 14px; height: 14px;
    border-top: 1px solid var(--c-gold);
    border-left: 1px solid var(--c-gold);
}
.product-detail .info .price-box::after {
    content: "";
    position: absolute;
    bottom: 4px; right: 4px;
    width: 14px; height: 14px;
    border-bottom: 1px solid var(--c-gold);
    border-right: 1px solid var(--c-gold);
}
.product-detail .info .price-box .label {
    color: var(--text-mute);
    font-size: 13px;
    font-family: var(--font-han);
    letter-spacing: 4px;
}
.product-detail .info .price-box .price {
    color: var(--c-gold);
    font-size: 38px;
    font-weight: 800;
    font-family: var(--font-tech);
    letter-spacing: 1px;
}
.product-detail .info .price-box .price::before { content: ""; }
.product-detail .info .stock-box {
    color: var(--text-mute);
    font-size: 14px;
    margin: 16px 0;
    font-family: var(--font-han);
    letter-spacing: 1px;
}
.product-detail .info .stock-box strong { color: var(--text-paper); margin: 0 6px; font-family: var(--font-tech); }
.product-detail .info .desc {
    color: #d4d0c4;
    line-height: 1.85;
    padding: 22px 24px;
    background: #11141a;
    border: 1px solid var(--line-bronze);
    border-left: 3px solid var(--c-gold);
    font-family: var(--font-han);
}

/* ---------- 工具栏 ---------- */
.toolbar { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }

/* ---------- 统计卡（科技风折角） ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}
.stat-card {
    background: linear-gradient(135deg, #1a1e25 0%, #131720 100%);
    border: 1px solid var(--line-bronze);
    padding: 22px 24px;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.stat-card::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 14px; height: 14px;
    background: linear-gradient(225deg, var(--c-gold) 50%, transparent 50%);
}
.stat-card .label {
    color: var(--text-mute);
    font-size: 12px;
    letter-spacing: 3px;
    margin-bottom: 10px;
    font-family: var(--font-han);
}
.stat-card .value {
    color: var(--c-gold);
    font-size: 30px;
    font-weight: 800;
    font-family: var(--font-tech);
    letter-spacing: 1px;
}
.stat-card .sub {
    color: var(--text-mute);
    font-size: 12px;
    margin-top: 8px;
    font-family: var(--font-han);
}
.stat-card .value.danger { color: var(--c-warn); }
.stat-card .value.good { color: var(--c-bronze); }

/* ---------- 空状态 ---------- */
.empty {
    text-align: center;
    padding: 70px 20px;
    color: var(--text-mute);
}
.empty .icon {
    width: 60px; height: 60px;
    margin: 0 auto 18px;
    border: 1px solid var(--line-bronze);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-han);
    color: var(--text-dim);
    font-size: 18px;
    transform: rotate(45deg);
    position: relative;
}
.empty .icon::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid var(--line-gold);
}
.empty p { font-family: var(--font-han); letter-spacing: 2px; }

/* ---------- 页脚 ---------- */
.site-footer {
    text-align: center;
    padding: 36px 16px;
    color: var(--text-mute);
    font-size: 12px;
    border-top: 1px solid var(--line-bronze);
    margin-top: 48px;
    font-family: var(--font-han);
    letter-spacing: 2px;
    position: relative;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 2px;
    background: var(--c-gold);
    opacity: .55;
}
.site-footer .sep { color: var(--c-gold); margin: 0 12px; }

/* ---------- 后台侧边栏 ---------- */
.admin-wrap {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 68px);
}
.admin-side {
    background: var(--bg-yan);
    border-right: 1px solid var(--line-bronze);
    padding: 22px 0;
    position: relative;
}
.admin-side::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--c-gold) 20%, var(--c-gold) 80%, transparent);
    opacity: .35;
}
.admin-side .group {
    padding: 14px 26px 6px;
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 4px;
    font-family: var(--font-han);
    border-top: 1px dashed var(--line-bronze);
    margin-top: 14px;
}
.admin-side .group:first-of-type { margin-top: 0; border-top: 0; }
.admin-side .group::before { content: ""; }
.admin-side a {
    display: flex;
    align-items: center;
    padding: 12px 28px;
    color: #c8c4ba;
    border-left: 3px solid transparent;
    font-size: 14px;
    font-family: var(--font-han);
    letter-spacing: 2px;
    transition: all .2s;
}
.admin-side a::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--c-gold);
    margin-right: 12px;
    opacity: 0;
    transform: rotate(45deg);
    transition: opacity .2s;
}
.admin-side a:hover {
    background: #1c2027;
    color: var(--text-paper);
}
.admin-side a:hover::before { opacity: .55; }
.admin-side a.active {
    background: #1c2027;
    color: var(--c-gold);
    border-left-color: var(--c-vermilion);
}
.admin-side a.active::before { opacity: 1; background: var(--c-vermilion); }
.admin-main { padding: 32px; background: var(--bg-ink); }

/* ---------- 工具类 ---------- */
.mono-text { font-family: var(--font-tech); letter-spacing: 1px; }
.text-gold { color: var(--c-gold); }
.text-danger { color: var(--c-vermilion); }
.text-warn { color: var(--c-warn); }
.text-good { color: var(--c-bronze); }
.text-mute { color: var(--text-mute); }
.text-dim { color: var(--text-dim); }
.font-han { font-family: var(--font-han); }
.gold-divider {
    height: 1px;
    background: linear-gradient(90deg, var(--c-gold), transparent);
    margin: 22px 0;
    opacity: .55;
}

/* 操作按钮组（在表格行内） */
.row-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.row-actions button, .row-actions a.btn-mini {
    padding: 5px 12px;
    font-size: 12px;
    letter-spacing: 1px;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.row-actions .btn-mini {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    background: var(--bg-lacquer);
    color: var(--text-paper);
    border: 1px solid var(--line-bronze);
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    transition: all .2s;
}
.row-actions .btn-mini:hover { border-color: var(--c-gold); color: var(--c-gold); }
.row-actions .btn-mini.danger { color: var(--c-vermilion); border-color: rgba(194,57,47,.4); }
.row-actions .btn-mini.danger:hover { background: var(--c-vermilion); color: #fff; }
.row-actions .btn-mini.gold { color: var(--c-gold); border-color: rgba(212,160,77,.4); }
.row-actions .btn-mini.gold:hover { background: var(--c-gold); color: var(--text-ink); }
.row-actions .btn-mini.bronze { color: var(--c-bronze); border-color: rgba(95,212,154,.4); }
.row-actions .btn-mini.bronze:hover { background: var(--c-bronze); color: var(--text-ink); }

/* ---------- 复制微信按钮 ---------- */
.wechat-copy-btn {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-block;
    clip-path: none;
    transition: transform .15s, filter .2s;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}
.wechat-copy-btn:focus,
.wechat-copy-btn:focus-visible,
.wechat-copy-btn:active { outline: none; box-shadow: none; }
.wechat-copy-btn img {
    transition: transform .15s, filter .2s;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    display: block;
}
.wechat-copy-btn:hover img { transform: translateY(-2px); filter: drop-shadow(0 4px 10px rgba(212,160,77,.4)); }
.wechat-copy-btn:active img { transform: translateY(0) scale(.97); }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
    .topbar { padding: 0 16px; height: auto; flex-wrap: wrap; padding: 10px 16px; }
    .topbar nav { order: 3; width: 100%; overflow-x: auto; }
    .topbar .logo { font-size: 16px; letter-spacing: 2px; }
    .topbar .logo .sub { display: none; }
    .container { padding: 18px; }
    .product-detail { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; }
    .admin-wrap { grid-template-columns: 1fr; }
    .admin-side { border-right: 0; border-bottom: 1px solid var(--line-bronze); }
    .admin-side .group { display: inline-block; margin: 0; border: 0; padding: 6px 14px; }
    .admin-side a { display: inline-block; padding: 8px 14px; border-left: 0; }
    .product-detail .info .price-box .price { font-size: 28px; }
}