/* ============================================================
   虚拟物品激活码分发系统 · 样式
   设计基调：8px 间距栅格、统一圆角层级、柔和阴影、克制的强调色
   ============================================================ */

:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-soft: rgba(79, 70, 229, .10);

    --bg: #f6f7fb;
    --card: #ffffff;
    --text: #1b2333;
    --text-2: #4a5468;
    --muted: #8a94a8;
    --border: #e8eaf1;
    --border-2: #f0f1f6;

    --ok: #16a34a;
    --warn: #f59e0b;
    --err: #e5484d;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --radius: 12px;
    --r-btn: var(--r-sm);
    --r-input: var(--r-sm);

    /* 字体栈：由后台「系统字体」设置注入，这里是默认回退 */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

    --sh-1: 0 1px 2px rgba(20, 25, 45, .04);
    --sh-2: 0 2px 8px rgba(20, 25, 45, .06);
    --sh-3: 0 8px 24px rgba(20, 25, 45, .10);

    --fs-base: clamp(14px, .35vw + 13px, 15px);
    --fs-sm:   clamp(12.5px, .25vw + 12px, 13.5px);
    --fs-lg:   clamp(15px, .5vw + 14px, 17px);
    --fs-xl:   clamp(19px, 1.4vw + 15px, 26px);
    --fs-2xl:  clamp(24px, 2.6vw + 16px, 36px);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    font-size: var(--fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-dark); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.35; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-base); }

.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.text-2 { color: var(--text-2); }

/* ============================================================
   控件
   ============================================================ */
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], select, textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-input);
    background: #fff; font-size: var(--fs-base); color: var(--text); outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
input[type=color] { cursor: pointer; }
textarea { min-height: 96px; resize: vertical; font-family: inherit; line-height: 1.6; }
label { display: block; margin-bottom: 6px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; }

.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row > .field { flex: 1 1 170px; margin-bottom: 14px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 18px; border: 0; border-radius: var(--r-btn);
    background: var(--primary); color: #fff; font-size: var(--fs-base);
    cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s;
    white-space: nowrap;
}
.btn:hover { background: var(--primary-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn.ghost:hover { background: #f7f8fc; color: var(--text); border-color: #d8dce8; }
.btn.small { padding: 5px 11px; font-size: var(--fs-sm); border-radius: calc(var(--r-btn) * .75); }
.btn.danger { background: var(--err); }
.btn.danger:hover { background: #cc3d42; }
.btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   面板 / 卡片
   ============================================================ */
.panel {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 20px; margin-bottom: 16px; box-shadow: var(--sh-1);
}
.panel-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.panel-head h2 { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   表格
   ============================================================ */
table.grid { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.grid th, table.grid td {
    padding: 11px 12px; border-bottom: 1px solid var(--border-2);
    text-align: left; vertical-align: middle;
}
table.grid th {
    color: var(--muted); font-weight: 500; background: #fafbfd;
    white-space: nowrap; font-size: 12.5px; letter-spacing: .2px;
}
table.grid th:first-child { border-top-left-radius: var(--r-sm); }
table.grid th:last-child { border-top-right-radius: var(--r-sm); }
table.grid tbody tr:hover { background: #fafbfd; }
table.grid tbody tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.table-scroll .grid { min-width: 620px; }

/* ============================================================
   徽章 / 提示
   ============================================================ */
.badge {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: 12px; line-height: 18px; white-space: nowrap;
}
.badge-available, .badge-unused { background: var(--primary-soft); color: var(--primary); }
.badge-used, .badge-active { background: #e6f7ee; color: var(--ok); }
.badge-disabled { background: #f0f1f6; color: var(--muted); }
.badge-expired { background: #fdecec; color: var(--err); }

.alert { padding: 11px 14px; border-radius: var(--r-sm); margin-bottom: 14px; font-size: var(--fs-sm); }
.alert-ok { background: #e6f7ee; color: #116c34; }
.alert-err { background: #fdecec; color: #b1363a; }
.alert-info { background: var(--primary-soft); color: #3730a3; }
.alert-warn { background: #fff6e5; color: #8a5a00; border: 1px solid #f5e2b8; }

code.kami {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #f4f5fa; border: 1px solid var(--border); border-radius: calc(var(--r-sm) * .6);
    padding: 1px 7px; letter-spacing: .5px; font-size: 12.5px;
}
.code-list {
    background: #f8f9fc; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
    max-height: 260px; overflow: auto; word-break: break-all; line-height: 1.9;
}

/* ============================================================
   统计卡
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 14px 16px; box-shadow: var(--sh-1); position: relative; overflow: hidden;
}
.stat::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--primary); opacity: .65;
}
.stat .num { font-size: 24px; font-weight: 650; line-height: 1.2; letter-spacing: -.5px; }
.stat .lb { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }

.pager { margin-top: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pager a, .pager span {
    padding: 5px 11px; border: 1px solid var(--border); border-radius: calc(var(--r-sm) * .6);
    background: #fff; font-size: var(--fs-sm); color: var(--text-2);
}
.pager a:hover { border-color: var(--primary); color: var(--primary); }
.pager .cur { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ============================================================
   后台布局（比例：侧栏 232 / 内容自适应，最大 1440）
   ============================================================ */
.admin-body { background: #f4f5f9; }
.admin-wrap { display: flex; min-height: 100vh; }

.admin-side {
    width: 232px; flex: 0 0 232px; background: #1c2230; color: #b9c3d4;
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
    overflow-y: auto; overflow-x: hidden;
}
.admin-side .brand {
    padding: 20px 20px 16px; color: #fff; font-size: 15px; font-weight: 600;
    display: flex; align-items: center; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.admin-side .brand .dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,.25); flex: 0 0 8px;
}
.admin-side nav { padding: 10px 10px 4px; flex: 1; }
.nav-group { margin-bottom: 4px; }
.nav-title {
    font-size: 11px; color: #6b7689; padding: 10px 12px 5px;
    letter-spacing: .6px; font-weight: 600;
}
.admin-side nav a {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 12px; color: #b9c3d4; font-size: var(--fs-sm);
    border-radius: var(--r-sm); margin-bottom: 1px; transition: background .15s, color .15s;
}
.admin-side nav a .ic { font-style: normal; font-size: 14px; width: 18px; text-align: center; opacity: .9; }
.admin-side nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-side nav a.on { background: var(--primary); color: #fff; font-weight: 500; }
.admin-side nav a.on .ic { opacity: 1; }
.admin-side .side-foot { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.07); }
.admin-side .side-foot a { color: #7b8699; font-size: var(--fs-sm); }
.admin-side .side-foot a:hover { color: #fff; }

.admin-main { flex: 1; min-width: 0; padding: 0 0 40px; }
.admin-top {
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 16px 26px; display: flex; justify-content: space-between;
    align-items: center; gap: 12px; margin-bottom: 20px;
    position: sticky; top: 0; z-index: 20;
}
.admin-top h1 { font-size: 17px; margin-bottom: 2px; }
.admin-top .who {
    color: var(--muted); font-size: var(--fs-sm);
    display: inline-flex; align-items: center; gap: 7px;
}
.admin-top .who .av {
    width: 26px; height: 26px; border-radius: 50%; background: var(--primary);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
}
.admin-body .admin-main > *:not(.admin-top) { max-width: 1440px; margin-left: 26px; margin-right: 26px; }
.admin-body .admin-main > .admin-top { max-width: none; margin: 0 0 20px; }

@media (max-width: 900px) {
    .admin-wrap { flex-direction: column; }
    .admin-side { width: 100%; flex: none; height: auto; position: static; }
    .admin-side nav { display: flex; flex-wrap: wrap; }
    .nav-group { flex: 1 1 150px; }
    .admin-top { padding: 14px 16px; }
    .admin-body .admin-main > *:not(.admin-top) { margin-left: 16px; margin-right: 16px; }
}

/* ============================================================
   前台：容器与页头
   ============================================================ */
.site-wrap { max-width: 1120px; margin: 0 auto; padding: 24px 20px 56px; }
.site-head { text-align: center; margin-bottom: 22px; }
.site-head h1 { font-size: var(--fs-xl); margin-bottom: 6px; }
.site-head p { margin: 0; font-size: var(--fs-sm); }

.login-box {
    max-width: 400px; margin: 26px auto; background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-2);
}
.login-box .tip { text-align: center; color: var(--text-2); margin-bottom: 16px; font-size: var(--fs-sm); }

/* ============================================================
   商品网格
   ============================================================ */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.prod-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px;
    color: var(--text); box-shadow: var(--sh-1);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.prod-card:hover {
    border-color: var(--primary); color: var(--text);
    transform: translateY(-2px); box-shadow: var(--sh-3);
}
.prod-card .ic { font-size: 26px; margin-bottom: 8px; line-height: 1; }
.prod-card .nm { font-size: var(--fs-base); font-weight: 600; }
.prod-card .ds { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; flex: 1; }
.prod-card .tag { margin-top: 10px; font-size: var(--fs-sm); color: var(--primary); }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.info-item { background: #f8f9fc; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; }
.info-item .k { color: var(--muted); font-size: var(--fs-sm); }
.info-item .v { font-size: 15px; font-weight: 600; margin-top: 2px; word-break: break-all; }

/* 进度条 */
.progress { height: 6px; background: #eef0f6; border-radius: 999px; overflow: hidden; margin: 10px 0; }
.progress > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* 激活码展示 */
.code-hero {
    /* 先给不支持 color-mix 的浏览器一个可用底色 */
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #7c3aed));
    color: #fff; border-radius: var(--r-md); padding: 20px; text-align: center; margin-bottom: 14px;
}
.code-hero .val {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(15px, 2.2vw, 20px); font-weight: 600; letter-spacing: 1px; word-break: break-all;
}
.code-hero .lb { opacity: .85; font-size: var(--fs-sm); margin-bottom: 6px; }

/* 网友动态滚动 */
.feed-box { position: relative; overflow: hidden; max-height: 148px; }
.feed-item { padding: 6px 0; border-bottom: 1px dashed var(--border-2); font-size: var(--fs-sm); }
.feed-item:last-child { border-bottom: 0; }

/* 用户等级 */
.lvl { display: inline-block; padding: 1px 8px; border-radius: calc(var(--r-sm) * .55); font-size: 11.5px; font-weight: 600; }

/* 联系方式网格 */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.contact-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 14px; text-align: center; box-shadow: var(--sh-1);
}
.contact-card img { max-width: 120px; border-radius: var(--r-sm); margin-bottom: 8px; }

/* ============================================================
   发卡网风格：顶部导航
   ============================================================ */
.shop-nav {
    background: #fff; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50; box-shadow: var(--sh-1);
}
.shop-nav-in {
    max-width: 1120px; margin: 0 auto; height: 60px; padding: 0 20px;
    display: flex; align-items: center; gap: 16px;
}
.shop-logo {
    display: flex; align-items: center; gap: 9px; font-weight: 650;
    font-size: 15px; color: var(--text); white-space: nowrap; flex: 0 0 auto;
}
.logo-ic {
    width: 30px; height: 30px; border-radius: calc(var(--r-sm) * .9); background: var(--primary);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}
.shop-menu { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.shop-menu::-webkit-scrollbar { display: none; }
.shop-menu a {
    padding: 7px 12px; border-radius: var(--r-sm); color: var(--text-2);
    font-size: var(--fs-sm); white-space: nowrap;
}
.shop-menu a:hover { background: #f5f6fb; color: var(--primary); }
.shop-nav-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sn-btn {
    background: var(--primary); color: #fff; padding: 7px 16px;
    border-radius: var(--r-sm); font-size: var(--fs-sm); white-space: nowrap;
}
.sn-btn:hover { background: var(--primary-dark); color: #fff; }

/* ============================================================
   发卡网风格：Hero（左文案 / 右卡片，7:5 比例）
   ============================================================ */
.hero {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr);
    gap: 28px; align-items: center;
    background: linear-gradient(120deg, var(--primary-soft), #f2f5ff 55%, #faf8ff);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 30px 32px; margin-bottom: 22px;
}
.hero h1 { font-size: var(--fs-2xl); letter-spacing: -.5px; }
.hero-sub { color: var(--text-2); font-size: var(--fs-base); margin: 8px 0 0; max-width: 46ch; }
.hero-points {
    list-style: none; padding: 0; margin: 16px 0 0;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.hero-points li {
    background: rgba(255,255,255,.7); border: 1px solid var(--border);
    border-radius: 20px; padding: 4px 12px; font-size: var(--fs-sm); color: var(--text-2);
}
.hero-flags { margin-top: 16px; display: flex; gap: 5px; flex-wrap: wrap; font-size: 17px; opacity: .85; }

.hero-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 22px; box-shadow: var(--sh-2);
}
.hc-title { font-size: var(--fs-lg); font-weight: 650; margin-bottom: 4px; }
.hc-sub { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 16px; }
.hc-expire { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hc-label { color: var(--muted); font-size: var(--fs-sm); }
.hc-expire strong { font-size: 17px; }
.hc-left { margin-top: 6px; color: var(--primary); font-size: var(--fs-sm); font-weight: 500; }

/* ============================================================
   发卡网风格：分类筛选与搜索
   ============================================================ */
.cat-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-2);
}
.cat-btn {
    padding: 6px 14px; border-radius: 20px; background: #f5f6fa; color: var(--text-2);
    font-size: var(--fs-sm); border: 1px solid transparent; white-space: nowrap;
}
.cat-btn:hover { border-color: var(--primary); color: var(--primary); }
.cat-btn.on { background: var(--primary); color: #fff; }
.cat-btn .cnt { opacity: .65; font-size: 11px; }
.cat-search { display: flex; gap: 6px; margin-left: auto; }
.cat-search input {
    padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
    font-size: var(--fs-sm); width: 190px; max-width: 48vw;
}
.cat-search button {
    background: var(--primary); color: #fff; border: 0; border-radius: var(--r-sm);
    padding: 7px 16px; cursor: pointer; font-size: var(--fs-sm); white-space: nowrap;
}

/* 商品卡片增强部分 */
.pc-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.pc-tags span { font-size: 11px; padding: 2px 8px; border-radius: calc(var(--r-sm) * .55); white-space: nowrap; }
.st-out { background: #fdeaea; color: #c0392b; }
.st-low { background: #fff3e0; color: #a35f00; }
.st-mid { background: #e6f7ee; color: #217a41; }
.st-ok  { background: #e6f7ee; color: #217a41; }
.dm { background: var(--primary-soft); color: var(--primary); }
.cg { background: #f2f4f9; color: var(--muted); }
.pc-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-2);
}
.pc-foot .price { color: var(--err); font-weight: 700; font-size: 17px; }
.pc-foot .price.free { color: var(--ok); font-size: 14px; }
.pc-foot .buy { color: var(--primary); font-size: var(--fs-sm); }

/* ============================================================
   模板差异
   ============================================================ */
/* 独角经典：渐变图标块 */
body.tpl-dujiao .prod-card .ic {
    width: 46px; height: 46px; border-radius: calc(var(--r-sm) * 1.2); display: flex;
    align-items: center; justify-content: center; font-size: 23px;
    background: linear-gradient(135deg, var(--primary-soft), #eef2ff); margin-bottom: 10px;
}
body.tpl-dujiao .hero { background: #fff; }
body.tpl-dujiao .hero-points li { background: #f7f8fc; }

/* 现代发卡：主色渐变 Hero */
body.tpl-modern .hero {
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #7c3aed));
    border: 0; color: #fff; padding: 38px 34px;
}
body.tpl-modern .hero h1 { color: #fff; }
body.tpl-modern .hero-sub { color: rgba(255,255,255,.85); }
body.tpl-modern .hero-points li { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.25); color: #fff; }
body.tpl-modern .prod-card { border-radius: var(--r-lg); }
body.tpl-modern .prod-card .ic { font-size: 32px; }

/* 购买向导：分类侧栏 + 底部悬浮条 */
body.tpl-shop .site-wrap { padding-bottom: 84px; }
@media (min-width: 920px) {
    body.tpl-shop #goods { display: grid; grid-template-columns: 208px 1fr; gap: 20px; align-items: start; }
    body.tpl-shop #goods > .panel-head { grid-column: 1 / -1; margin-bottom: 0; }
    body.tpl-shop .cat-bar {
        grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch;
        gap: 8px; border-bottom: 0; padding-bottom: 0; margin-bottom: 0;
    }
    body.tpl-shop .cat-btn {
        border-radius: var(--r-sm); background: #fff; border: 1px solid var(--border);
        display: flex; justify-content: space-between; align-items: center; padding: 9px 13px;
    }
    body.tpl-shop .cat-btn.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
    body.tpl-shop .cat-search { margin-left: 0; }
    body.tpl-shop .cat-search input { width: 100%; max-width: none; }
    body.tpl-shop #goods > .prod-grid, body.tpl-shop #goods > p { grid-column: 2; grid-row: 2; }
}

.shop-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(20,25,45,.07);
    padding: 12px 20px;
}
.shop-dock-in {
    max-width: 1120px; margin: 0 auto; display: flex; align-items: center;
    justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.dock-info { font-size: var(--fs-sm); color: var(--text-2); }
.dock-info b { color: var(--err); font-size: 17px; }
.dock-btn {
    background: var(--primary); color: #fff; padding: 9px 26px;
    border-radius: var(--r-sm); font-size: var(--fs-sm); white-space: nowrap;
}

/* 暗夜 */
body.tpl-night { background: #14171d; color: #dfe4ee; }
body.tpl-night .panel, body.tpl-night .prod-card, body.tpl-night .hero-card,
body.tpl-night .login-box, body.tpl-night .stat, body.tpl-night .contact-card { background: #1c2029; border-color: #2c323e; }
body.tpl-night .site-wrap h1, body.tpl-night .hero h1, body.tpl-night .prod-card .nm { color: #eef2f8; }
body.tpl-night .muted, body.tpl-night .text-2 { color: #8b94a6; }
body.tpl-night .info-item { background: #232833; border-color: #2c323e; }
body.tpl-night table.grid th { background: #232833; color: #8b94a6; }
body.tpl-night table.grid tbody tr:hover { background: #232833; }
body.tpl-night .shop-nav { background: #1c2029; border-color: #2c323e; }
body.tpl-night .shop-logo, body.tpl-night .shop-menu a { color: #dfe4ee; }
body.tpl-night .shop-menu a:hover { background: #232833; }
body.tpl-night .hero { background: linear-gradient(120deg, #232833, #1f2430); border-color: #2c323e; }
body.tpl-night .hero-points li { background: #232833; border-color: #2c323e; color: #dfe4ee; }
body.tpl-night .hero-sub { color: #8b94a6; }
body.tpl-night .cat-btn { background: #232833; color: #dfe4ee; border-color: #2c323e; }
body.tpl-night .cat-search input { background: #232833; border-color: #2c323e; color: #dfe4ee; }
body.tpl-night .shop-dock { background: #1c2029; border-color: #2c323e; }
body.tpl-night .dock-info { color: #dfe4ee; }

/* ============================================================
   会员中心
   ============================================================ */
.uc-tabs {
    display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 16px;
    border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.uc-tabs a {
    padding: 9px 15px; border-radius: var(--r-sm) var(--r-sm) 0 0; color: var(--text-2);
    font-size: var(--fs-sm); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.uc-tabs a:hover { background: #f5f6fb; color: var(--primary); }
.uc-tabs a.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.uc-icon { display: inline-flex; align-items: center; gap: 6px; }
.uc-icon .pen { font-size: 11px; opacity: .75; }
@media (max-width: 520px) { .uc-icon-txt { display: none; } }

.c-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; background: var(--primary);
    color: #fff; font-size: 14px; font-weight: 600; flex: 0 0 34px;
}
.c-ic.small { width: 24px; height: 24px; font-size: 12px; flex: 0 0 24px; }

.user-card {
    display: flex; align-items: center; gap: 16px; background: #fff;
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px;
    margin-bottom: 16px; box-shadow: var(--sh-1);
}
.user-avatar { width: 60px; height: 60px; border-radius: 50%; flex: 0 0 60px; }
.user-meta { min-width: 0; }
.user-name { font-size: var(--fs-lg); font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.contact-saved {
    display: flex; align-items: center; gap: 12px; margin-top: 16px;
    padding: 12px 14px; background: #f8f9fc; border: 1px solid var(--border); border-radius: var(--r-sm);
}

.invite-box { display: flex; gap: 8px; align-items: center; }
.invite-box input { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-sm); }

/* 续期方案卡 */
.renew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.renew-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-md);
    padding: 16px 12px; color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.renew-card:hover {
    border-color: var(--primary); color: var(--text);
    transform: translateY(-2px); box-shadow: var(--sh-3);
}
.renew-card .rn-label { font-weight: 600; font-size: var(--fs-base); }
.renew-card .rn-days { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.renew-card .rn-price { color: var(--err); font-weight: 700; font-size: 19px; margin-top: 8px; }
.renew-card .rn-go { margin-top: 10px; font-size: var(--fs-sm); color: var(--primary); }
.renew-card.disabled { opacity: .62; cursor: default; }
.renew-card.disabled:hover { transform: none; box-shadow: none; border-color: var(--border); }

/* 在线人数 */
.online-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f5f6fa; border: 1px solid var(--border); border-radius: 20px;
    padding: 3px 11px; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap;
}
.online-chip i, .online-line .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
    display: inline-block; box-shadow: 0 0 0 3px rgba(22,163,74,.16);
    animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.online-line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }

/* 时效提示 */
.tip-panel { border-left: 3px solid var(--primary); }
.tip-item + .tip-item { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-2); }
.tip-title { font-weight: 600; margin-bottom: 4px; }
.tip-body { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.7; }

/* ============================================================
   后台：模板选择 / 升级清单
   ============================================================ */
.tpl-group-title { font-size: 12px; color: var(--muted); margin: 14px 0 8px; font-weight: 600; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.tpl-card {
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px;
    cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.tpl-card:hover { border-color: #d8dce8; box-shadow: var(--sh-1); }
.tpl-card input { display: none; }
.tpl-card.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.tpl-preview {
    height: 92px; border-radius: var(--r-sm); margin-bottom: 8px; padding: 10px;
    display: flex; flex-direction: column; gap: 6px; background: #f7f8fc; border: 1px solid var(--border);
}
.tpl-preview .bar { height: 9px; border-radius: 4px; background: var(--c); width: 58%; display: block; }
.tpl-preview .box { height: 18px; border-radius: 4px; background: #fff; border: 1px solid var(--border); display: block; }
.tpl-preview .row { display: flex; gap: 6px; }
.tpl-preview .row b { flex: 1; height: 20px; border-radius: 5px; background: #fff; border: 1px solid var(--border); display: block; }
.tpl-preview .hero { height: 24px; border-radius: 6px; background: var(--c); opacity: .85; display: block; }
.tpl-preview.tpl-shop { position: relative; }
.tpl-preview.tpl-shop .side {
    position: absolute; left: 10px; top: 46px; width: 32px; height: 32px;
    border-radius: 5px; background: #fff; border: 1px solid var(--border); display: block;
}
.tpl-preview.tpl-shop .row { margin-left: 42px; }
.tpl-preview.tpl-shop .dock {
    position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
    background: #fff; border-top: 1px solid var(--border); display: block; border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.tpl-card .tpl-name { font-weight: 600; font-size: var(--fs-sm); }
.tpl-card .tpl-desc { color: var(--muted); font-size: 11.5px; margin-top: 3px; line-height: 1.5; }
.swatch { width: 28px; height: 28px; border-radius: calc(var(--r-sm) * .6); border: 1px solid rgba(0,0,0,.08); cursor: pointer; padding: 0; }

.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.mini-stat {
    background: #f5f6fa; border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 6px 14px; font-size: var(--fs-sm); color: var(--text-2);
}
.mini-stat b { font-size: 15px; margin-right: 4px; }
.mini-stat.red b { color: var(--err); }
.warn-box {
    background: #fff8e8; border: 1px solid #f5e2b8; color: #8a5a00;
    border-radius: var(--r-sm); padding: 11px 14px; margin-bottom: 14px; font-size: var(--fs-sm);
}
details.chg { border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 10px; overflow: hidden; }
details.chg summary {
    padding: 10px 14px; cursor: pointer; font-size: var(--fs-sm); font-weight: 600;
    background: #fafbfd; list-style: none;
}
details.chg summary::-webkit-details-marker { display: none; }
details.chg summary::before { content: '▸ '; color: var(--muted); }
details.chg[open] summary::before { content: '▾ '; }
details.chg .code-list { background: #fff; border-top: 1px solid var(--border); border-radius: 0; }
.safe-note { margin-top: 16px; padding: 12px 16px; background: #f8f9fc; border: 1px solid var(--border); border-radius: var(--r-sm); }
.safe-note .t { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 8px; }
.safe-note ul { margin: 0; padding-left: 18px; }
.safe-note li { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.8; }

/* ============================================================
   自适应
   ============================================================ */
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
    .hero-sub { max-width: none; }
}
@media (max-width: 768px) {
    .site-wrap { padding: 18px 14px 48px; }
    .shop-nav-in { height: auto; padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
    .shop-menu { order: 3; width: 100%; }
    .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .prod-card { padding: 13px; }
    .prod-card .ic { font-size: 23px; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-row { flex-direction: column; }
    .field-row > .field { flex: 1 1 auto; }
    .panel { padding: 16px; }
    .cat-search { margin-left: 0; width: 100%; }
    .cat-search input { flex: 1; width: auto; max-width: none; }
    .user-card { padding: 14px; }
    .renew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .prod-grid, .renew-grid { grid-template-columns: 1fr; }
    .stats, .info-grid { grid-template-columns: 1fr 1fr; }
    .hero-flags span:nth-child(n+6) { display: none; }
    .hero { padding: 18px; }
}

/* ============================================================
   富文本编辑器
   ============================================================ */
.ed-bar {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    padding: 7px 8px; background: #f7f8fc; border: 1px solid var(--border);
    border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.ed-btn {
    min-width: 30px; height: 28px; padding: 0 7px; border: 1px solid transparent;
    background: transparent; border-radius: calc(var(--r-sm) * .5); cursor: pointer;
    font-size: 13px; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center;
}
.ed-btn:hover { background: #fff; border-color: var(--border); color: var(--primary); }
.ed-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.ed-sel {
    height: 28px; padding: 0 6px; border: 1px solid var(--border); border-radius: calc(var(--r-sm) * .5);
    background: #fff; font-size: 12.5px; color: var(--text-2); cursor: pointer; width: auto;
}
.ed-color {
    width: 30px; height: 28px; padding: 2px; border: 1px solid var(--border);
    border-radius: calc(var(--r-sm) * .5); background: #fff; cursor: pointer;
}
.ed-area {
    min-height: 220px; padding: 14px; background: #fff;
    border: 1px solid var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm);
    outline: none; line-height: 1.75; font-size: var(--fs-base); overflow-y: auto;
}
.ed-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ed-area:empty:before {
    content: attr(data-placeholder); color: var(--muted);
}
.ed-area img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: 6px 0; }
.ed-area blockquote {
    margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--primary);
    background: #f7f8fc; color: var(--text-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.ed-area h2, .ed-area h3, .ed-area h4 { margin: 12px 0 6px; }
.ed-area ul, .ed-area ol { padding-left: 22px; margin: 8px 0; }
.ed-area a { text-decoration: underline; }
.ed-area table { border-collapse: collapse; margin: 8px 0; }
.ed-area td, .ed-area th { border: 1px solid var(--border); padding: 6px 10px; }

/* 公告列表 */
.text-row {
    border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 12px 14px; margin-bottom: 10px; background: #fff;
}
.tr-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-actions { display: flex; gap: 6px; }
.tr-excerpt { margin-top: 6px; }

/* ============================================================
   公告前台
   ============================================================ */
.notice-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border-2);
    flex-wrap: wrap;
}
.notice-body { line-height: 1.8; font-size: var(--fs-base); color: var(--text); }
.notice-body img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: 8px 0; }
.notice-body blockquote {
    margin: 12px 0; padding: 10px 16px; border-left: 3px solid var(--primary);
    background: #f7f8fc; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-2);
}
.notice-body h2, .notice-body h3, .notice-body h4 { margin: 16px 0 8px; }
.notice-body ul, .notice-body ol { padding-left: 22px; margin: 8px 0; }
.notice-body a { text-decoration: underline; }
.notice-body table { border-collapse: collapse; margin: 10px 0; }
.notice-body td, .notice-body th { border: 1px solid var(--border); padding: 6px 10px; }

.notice-list { display: flex; flex-direction: column; gap: 10px; }
.notice-item {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 14px 16px; color: var(--text); box-shadow: var(--sh-1);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.notice-item:hover {
    border-color: var(--primary); color: var(--text);
    transform: translateY(-2px); box-shadow: var(--sh-3);
}
.ni-main { min-width: 0; }
.ni-title { font-weight: 600; }
.ni-excerpt { color: var(--muted); font-size: var(--fs-sm); margin-top: 3px; }
.ni-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ni-arrow { color: var(--muted); font-size: 18px; }

/* ============================================================
   下单页
   ============================================================ */
.buy-summary {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px; background: #f8f9fc; border: 1px solid var(--border);
    border-radius: var(--r-sm); margin-bottom: 18px;
}
.bs-ic { font-size: 34px; flex: 0 0 auto; line-height: 1; }
.bs-info { min-width: 0; }
.bs-name { font-weight: 650; font-size: var(--fs-lg); }
.bs-desc { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }

.renew-card.pick { cursor: pointer; position: relative; }
.renew-card.pick input { position: absolute; opacity: 0; pointer-events: none; }
.renew-card.pick:has(input:checked) {
    border-color: var(--primary); background: var(--primary-soft);
}
/* 不支持 :has() 的浏览器用 JS 兜底：选中后加 .picked */
.renew-card.picked { border-color: var(--primary); background: var(--primary-soft); }

.pay-types { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-opt {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1.5px solid var(--border); border-radius: var(--r-sm);
    padding: 8px 14px; font-size: var(--fs-sm); background: #fff;
}
.pay-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.pay-opt input { accent-color: var(--primary); }

.amount-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; background: #f8f9fc; border: 1px solid var(--border);
    border-radius: var(--r-sm); margin-top: 4px;
}
.amount-bar strong { color: var(--err); font-size: 22px; }

.flow-list { margin: 0; padding-left: 20px; }
.flow-list li { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.9; }

/* ============================================================
   公共码前台展示
   ============================================================ */
.public-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.public-item {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 12px 14px;
}
.pi-title { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; color: var(--text-2); }
.pi-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pi-val {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--fs-base); word-break: break-all; flex: 1; min-width: 0;
}

/* 首页公告摘要 */
.home-notice + .home-notice { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-2); }
.hn-title { font-weight: 600; font-size: var(--fs-base); display: inline-block; margin-bottom: 4px; }
.hn-title:hover { text-decoration: underline; }
.hn-body {
    font-size: var(--fs-sm); color: var(--text-2);
    max-height: 4.2em; overflow: hidden; position: relative;
}
.hn-body img { max-height: 60px; width: auto; }
.hn-body * { margin: 0 !important; display: inline; font-size: var(--fs-sm) !important; font-weight: normal !important; }
.hn-body img, .hn-body br { display: none; }

/* 三种"码"的概念区分 */
.code-intro {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
    margin-bottom: 16px;
}
.ci-item {
    display: flex; gap: 10px; align-items: flex-start;
    background: #f8f9fc; border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 11px 13px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6;
}
.ci-ic { font-size: 18px; flex: 0 0 auto; line-height: 1.3; }
.ci-item b { color: var(--text); }

/* ============================================================
   购买数量控件 + 结算摘要
   ============================================================ */
.qty-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qty-box {
    display: inline-flex; align-items: center; border: 1px solid var(--border);
    border-radius: var(--r-sm); overflow: hidden; background: #fff; flex: 0 0 auto;
}
.qty-btn {
    width: 38px; height: 38px; border: 0; background: #f7f8fc; color: var(--text-2);
    font-size: 17px; cursor: pointer; line-height: 1; transition: background .15s;
}
.qty-btn:hover { background: #eef0f7; color: var(--primary); }
.qty-box input {
    width: 62px; height: 38px; border: 0; border-radius: 0; text-align: center;
    font-size: var(--fs-base); font-weight: 600; -moz-appearance: textfield;
}
.qty-box input::-webkit-outer-spin-button,
.qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-box input:focus { box-shadow: none; }
.qty-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.qty-preset {
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 20px;
    background: #fff; color: var(--text-2); font-size: var(--fs-sm); cursor: pointer;
}
.qty-preset:hover { border-color: var(--primary); color: var(--primary); }
.qty-preset.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.qty-max { flex: 0 0 auto; }

.sum-card {
    background: #f8f9fc; border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 14px 16px; margin-top: 4px;
}
.sum-line {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 4px 0; font-size: var(--fs-sm); color: var(--text-2);
}
.sum-line b { color: var(--text); font-weight: 600; }
.sum-total {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border);
    font-size: var(--fs-base); font-weight: 600;
}
.sum-total .amt { color: var(--err); font-size: 20px; }

/* 支付方式选项（pay.php 用） */
.pay-type {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer;
    background: #f8f9fc; border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 8px 16px; font-size: var(--fs-sm);
}
.pay-type:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.pay-type input { accent-color: var(--primary); width: auto; }

@media (max-width: 768px) {
    .qty-presets { width: 100%; }
    .qty-max { width: 100%; }
}

/* ============================================================
   购物车 & 规格 & 优惠券
   ============================================================ */
.cart-item {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 0; border-bottom: 1px solid var(--border-2);
}
.cart-item:last-child { border-bottom: 0; }
.ci-icon { font-size: 30px; flex: 0 0 auto; width: 44px; text-align: center; }
.ci-main { flex: 1 1 200px; min-width: 0; }
.ci-name { font-weight: 600; }
.ci-spec { margin-top: 2px; }
.ci-unit { margin-top: 2px; }
.ci-qty { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ci-qty input { width: 68px; text-align: center; }
.ci-sum { flex: 0 0 90px; text-align: right; }
.ci-del { flex: 0 0 auto; }

.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1; }

.sku-card .rn-price { color: var(--primary); }

@media (max-width: 768px) {
    .ci-icon { display: none; }
    .ci-main { flex: 1 1 100%; }
    .ci-qty, .ci-sum, .ci-del { flex: 0 0 auto; }
    .ci-sum { flex: 1 1 auto; }
}

/* 订单明细 items[] */
.order-items {
    border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 10px 12px; background: #f8f9fc;
}
.oi-row {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 4px 0; font-size: var(--fs-sm);
}
.oi-row + .oi-row { border-top: 1px dashed var(--border-2); }

/* ============================================================
   ZFAKA 域：文章 / 手工发货 / 会员开关
   ============================================================ */
.article-item {
    display: flex; align-items: center; gap: 14px; padding: 14px 0;
    border-bottom: 1px solid var(--border-2); text-decoration: none; color: inherit;
}
.article-item:last-child { border-bottom: 0; }
.ai-cover { flex: 0 0 96px; }
.ai-cover img { width: 96px; height: 60px; object-fit: cover; border-radius: var(--r-sm); }
.ai-main { flex: 1 1 auto; min-width: 0; }
.ai-title { font-weight: 600; font-size: var(--fs-base); }
.ai-desc { margin-top: 3px; }
.ai-meta { margin-top: 4px; }
.ai-go { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--primary); }

.article-body { line-height: 1.85; }
.article-cover img { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--r-md); margin-bottom: 14px; }
.article-lead {
    padding: 10px 14px; background: #f8f9fc; border-left: 3px solid var(--primary);
    border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-sm); margin-bottom: 16px;
}
.article-content img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.article-content h2, .article-content h3 { margin: 20px 0 10px; }
.article-content p { margin: 10px 0; }
.article-content ul, .article-content ol { padding-left: 22px; }
.article-content pre {
    background: #f5f6fb; padding: 12px; border-radius: var(--r-sm); overflow-x: auto;
}
.article-content blockquote {
    margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--border); color: var(--text-2);
}

/* 验证码 */
.captcha-row { display: flex; gap: 8px; align-items: center; }
.captcha-row input { flex: 1; }
.captcha-img {
    height: 42px; border: 1px solid var(--border); border-radius: var(--r-sm);
    cursor: pointer; flex: 0 0 auto; background: #fff;
}

/* 功能开关 */
.switch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sw-item {
    display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; cursor: pointer;
}
.sw-item input { width: auto; margin-top: 2px; accent-color: var(--primary); }
.sw-title { font-weight: 600; font-size: var(--fs-sm); }
.sw-desc { margin-top: 2px; }

@media (max-width: 768px) {
    .ai-cover { display: none; }
    .switch-grid { grid-template-columns: 1fr; }
}

/* 商品管理：表单分组 */
.form-section {
    margin-top: 14px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: #fafbfd;
}
.fs-title {
    font-weight: 600; font-size: var(--fs-sm); color: var(--primary);
    margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--border);
}
.form-section .field-row { margin-bottom: 0; }
.form-section .field { margin-bottom: 6px; }

/* ============================================================
   公共码：后台卡片 + 前台方框展示
   ============================================================ */

/* ---- 后台：公共码卡片（头部删除 / 底部保存，不再挤同一行） ---- */
.pc-card {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}
.pc-card.off { background: #fbfbfd; }
.pc-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px;
    background: #f7f8fc;
    border-bottom: 1px solid var(--border);
}
.pc-ch-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.pc-ch-right { flex: 0 0 auto; }
.pc-no {
    font-size: var(--fs-xs); color: var(--text-3);
    background: #eef0f6; border-radius: calc(var(--r-sm) * .55); padding: 2px 6px;
}
.pc-name { font-weight: 600; font-size: var(--fs-sm); }
.pc-card-body { padding: 12px 14px; }
.pc-card-body .field-row { margin-bottom: 0; }

/* ---- 前台：公共码方框（与激活码视觉区分） ---- */
.public-list { display: grid; gap: 12px; margin-top: 14px; }
.public-item {
    border: 1px solid var(--border);
    border-left: 4px solid #7c5cff;      /* 紫色左边条：公共码 */
    border-radius: var(--r-md);
    background: linear-gradient(180deg, #faf9ff 0%, #fff 100%);
    padding: 14px 16px;
}
.public-item .pi-title {
    display: inline-block;
    font-size: var(--fs-xs); font-weight: 600; color: #7c5cff;
    background: #f1eeff; border: 1px solid #e2dcff;
    border-radius: 999px; padding: 3px 10px; margin-bottom: 8px;
}
.public-item .pi-body {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.public-item .pi-val {
    flex: 1 1 auto; min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-sm); color: var(--text);
    background: #fff; border: 1px dashed #cfc7f5; border-radius: var(--r-sm);
    padding: 8px 10px; word-break: break-all;
}

/* 激活码框：绿色系，与公共码明显不同 */
.code-hero { border-left: 4px solid var(--ok); }

/* ============================================================
   下单页：双栏商品详情 + 横向色差选项
   ============================================================ */
.buy-hero {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 22px;
    align-items: start;
}

/* ---- 左栏：商品卡 ---- */
.bh-left {
    background: linear-gradient(165deg, #f6f8ff 0%, #fff 60%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    text-align: center;
}
.bh-ic {
    font-size: 52px; line-height: 1;
    margin-bottom: 12px;
}
.bh-name {
    font-size: var(--fs-lg); font-weight: 700; color: var(--text);
    line-height: 1.4; word-break: break-all;
}
.bh-desc {
    margin-top: 8px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6;
}
.bh-price { margin-top: 14px; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.bh-price .cur { font-size: 26px; font-weight: 700; color: #e5484d; }
.bh-price .old { font-size: var(--fs-sm); color: var(--text-3); text-decoration: line-through; }
.bh-meta { margin-top: 10px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.bh-facts {
    list-style: none; margin: 16px 0 0; padding: 12px 0 0;
    border-top: 1px dashed var(--border);
    display: grid; gap: 8px; text-align: left;
}
.bh-facts li { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.bh-facts li span { color: var(--text-3); }
.bh-facts li b { color: var(--text); font-weight: 600; }

/* ---- 右栏：选购区 ---- */
.bh-right { min-width: 0; }
.opt-label {
    display: block; font-weight: 600; font-size: var(--fs-sm);
    color: var(--text); margin-bottom: 8px;
}
.opt-hint {
    font-weight: 400; color: var(--text-3);
    font-size: var(--fs-xs); margin-left: 6px;
}

/* 横向色差选项 chip */
.opt-chips {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.opt-chip {
    position: relative;
    display: block; cursor: pointer;
    min-width: 104px; padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.opt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.opt-chip:hover { border-color: #b9bff0; background: #fbfbff; }
.opt-chip.on {
    border-color: var(--primary);
    background: #f3f2ff;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, .1);
}
.opt-chip .rn-label { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.opt-chip .rn-days { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.opt-chip .rn-price { font-size: var(--fs-sm); font-weight: 700; color: #e5484d; margin-top: 4px; }
.opt-chip.on .rn-price { color: var(--primary); }

/* 时长档位用不同色区分 */
.dur-chip:nth-child(1).on { border-color: #30a46c; background: #f0fbf5; box-shadow: 0 0 0 2px rgba(48,164,108,.1); }
.dur-chip:nth-child(2).on { border-color: #4f46e5; background: #f3f2ff; box-shadow: 0 0 0 2px rgba(79,70,229,.1); }
.dur-chip:nth-child(3).on { border-color: #f5a524; background: #fff9ef; box-shadow: 0 0 0 2px rgba(245,165,36,.12); }
.dur-chip:nth-child(4).on { border-color: #e5484d; background: #fff3f3; box-shadow: 0 0 0 2px rgba(229,72,77,.1); }
.dur-chip:nth-child(5).on { border-color: #8e4ec6; background: #faf3ff; box-shadow: 0 0 0 2px rgba(142,78,198,.1); }

@media (max-width: 768px) {
    .buy-hero { grid-template-columns: 1fr; gap: 16px; }
    .bh-left { text-align: left; }
    .bh-price { justify-content: flex-start; }
    .bh-meta { justify-content: flex-start; }
    .opt-chips { gap: 8px; }
    .opt-chip { flex: 1 1 calc(50% - 4px); min-width: 0; }
}
@media (max-width: 420px) {
    .opt-chip { flex: 1 1 100%; }
}

/* ============================================================
   下单页 v2：横向商品条 + 主栏/侧栏结算
   ============================================================ */

/* 商品条（横向：图标 | 名称标签 | 价格） */
.buy-prod {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: linear-gradient(100deg, #f5f7ff 0%, #fff 70%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.bp-ic {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px;
    background: #fff; border: 1px solid var(--border-2);
    border-radius: var(--r-md);
}
.bp-mid { min-width: 0; }
.bp-name { font-size: var(--fs-lg); font-weight: 700; color: var(--text); line-height: 1.35; word-break: break-all; }
.bp-desc { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; }
.bp-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.bp-price { text-align: right; flex: 0 0 auto; }
.bp-p { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.bp-p .cur { font-size: 26px; font-weight: 700; color: #e5484d; line-height: 1; }
.bp-p .old { font-size: var(--fs-sm); color: var(--text-3); text-decoration: line-through; }
.bp-facts {
    margin-top: 8px; display: flex; gap: 12px; justify-content: flex-end;
    font-size: var(--fs-xs); color: var(--text-3); flex-wrap: wrap;
}
.bp-facts b { color: var(--text); font-weight: 600; }

/* 主栏 + 侧栏 */
.buy-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}
.buy-main { min-width: 0; }
.buy-side {
    position: sticky; top: 16px;
    min-width: 0;
}
.buy-side .sum-card { margin-top: 0; }

/* 结算卡微调：更紧凑 */
.buy-side .sum-line { padding: 5px 0; }
.buy-side .sum-total { margin-top: 8px; padding-top: 10px; }

@media (max-width: 900px) {
    .buy-grid { grid-template-columns: 1fr; }
    .buy-side { position: static; }
}
@media (max-width: 560px) {
    .buy-prod { grid-template-columns: 48px 1fr; gap: 12px; }
    .bp-ic { width: 48px; height: 48px; font-size: 26px; }
    .bp-price { grid-column: 1 / -1; text-align: left; }
    .bp-p { justify-content: flex-start; }
    .bp-facts { justify-content: flex-start; }
}

/* ============================================================
   会员中心：头像编辑 / 资料
   ============================================================ */
.avatar-edit {
    display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.ae-preview {
    flex: 0 0 auto; text-align: center;
}
.ae-preview img {
    width: 96px; height: 96px; border-radius: 50%;
    border: 2px solid var(--border); background: #fff;
}
.ae-pick { flex: 1 1 260px; min-width: 0; }
.ae-seeds { display: flex; flex-wrap: wrap; gap: 8px; }
.ae-seed {
    position: relative; cursor: pointer; margin: 0;
    display: block; line-height: 0;
}
.ae-seed input { position: absolute; opacity: 0; pointer-events: none; }
.ae-seed img {
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid transparent; background: #fff;
    transition: border-color .15s, transform .15s;
}
.ae-seed:hover img { transform: translateY(-2px); }
.ae-seed.on img { border-color: var(--primary); }

@media (max-width: 560px) {
    .avatar-edit { gap: 14px; }
    .ae-pick { flex: 1 1 100%; }
}

/* ============================================================
   字体与圆润度设置面板
   ============================================================ */
.font-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.font-pick {
    position: relative; cursor: pointer; margin: 0;
    padding: 10px 12px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: #fff;
    transition: border-color .15s, background .15s;
}
.font-pick input { position: absolute; opacity: 0; pointer-events: none; }
.font-pick:hover { border-color: #c3c8e8; }
.font-pick.on { border-color: var(--primary); background: #f6f5ff; }
.fp-name { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.fp-sample { display: block; margin-top: 4px; font-size: var(--fs-lg); color: var(--text-2); }

.seg-picks { display: flex; gap: 10px; flex-wrap: wrap; }
.seg-pick {
    position: relative; cursor: pointer; margin: 0;
    padding: 8px 16px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: #fff; min-width: 92px; text-align: center;
}
.seg-pick input { position: absolute; opacity: 0; pointer-events: none; }
.seg-pick.on { border-color: var(--primary); background: #f6f5ff; }
.sp-name { display: block; font-size: var(--fs-sm); font-weight: 600; }
.sp-preview { display: block; margin-top: 2px; color: var(--text-3); }

.round-picks { display: flex; gap: 10px; flex-wrap: wrap; }
.round-pick {
    position: relative; cursor: pointer; margin: 0;
    padding: 10px 14px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: #fff; text-align: center; min-width: 84px;
}
.round-pick input { position: absolute; opacity: 0; pointer-events: none; }
.round-pick.on { border-color: var(--primary); background: #f6f5ff; }
.rp-name { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 8px; }
.rp-box {
    display: block; width: 54px; height: 34px; margin: 0 auto;
    background: #f0f1f8; border: 1.5px solid var(--primary);
}

/* 实时预览 */
.style-preview { padding: 16px; background: #f7f8fc; border: 1px dashed var(--border); border-radius: var(--r-md); }
.spv-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--sh-1);
    font-family: var(--font-sans); font-size: var(--fs-base);
}
.spv-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 6px; }
.spv-text { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 12px; }
.spv-row { display: flex; gap: 8px; align-items: center; }
.spv-tag {
    font-size: var(--fs-sm); padding: 2px 10px;
    background: var(--primary-soft); color: var(--primary);
    border-radius: calc(var(--r-sm) * .55);
}
.spv-btn {
    font-size: var(--fs-sm); padding: 6px 16px;
    background: var(--primary); color: #fff; border-radius: var(--r-btn);
}

@media (max-width: 560px) {
    .font-picks { grid-template-columns: 1fr; }
}

/* ============================================================
   玩游戏续时长
   ============================================================ */

/* 头部 */
/* 石头剪刀布 */
.score-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 18px; margin-bottom: 16px;
    background: linear-gradient(135deg, #f7f8ff 0%, #fdf7ff 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
}
.sc { text-align: center; min-width: 56px; }
.sc-n { display: block; font-size: 22px; font-weight: 700; color: var(--ok); line-height: 1.1; }
.sc-n.danger { color: var(--err); }
.sc-l { font-size: var(--fs-xs); color: var(--muted); }
.sc-vs { flex: 1; text-align: center; font-size: var(--fs-sm); color: var(--text-2); }
.sc-vs b { color: var(--primary); }

.rps-rounds { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rr-item {
    padding: 6px 12px; border-radius: var(--r-sm);
    background: #f0f1f6; color: var(--text-2);
    font-size: var(--fs-sm); border: 1px solid transparent;
}
.rr-win  { background: #e6f7ee; color: var(--ok); border-color: #b7ebcd; }
.rr-lose { background: #fdecec; color: var(--err); border-color: #f7c5c7; }
.rr-item.now { box-shadow: 0 0 0 2px var(--primary-soft); font-weight: 600; }

.rps-pick { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rps-btn {
    width: 96px; padding: 18px 8px; font-size: 34px; line-height: 1;
    background: #fff; border: 1px solid var(--border);
    border-radius: 20px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    box-shadow: var(--sh-1);
    transition: transform .14s, border-color .14s, box-shadow .14s;
}
.rps-btn span { font-size: var(--fs-sm); color: var(--text-2); }
.rps-btn:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: 0 10px 22px rgba(79,70,229,.16);
}
.rps-btn:active { transform: translateY(0); }
.rps-last {
    margin-top: 14px; text-align: center;
    font-size: var(--fs-base); color: var(--text); font-weight: 600;
}

/* 三国对战 */
.san-ke { margin-bottom: 14px; }
.ke-bar { height: 8px; background: #eef0f6; border-radius: 999px; overflow: hidden; }
.ke-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #6a7cff, #8f6aff); border-radius: 999px; transition: width .4s; }

.san-field {
    display: flex; align-items: center; gap: 16px;
    padding: 14px; background: #f7f8fc; border-radius: var(--r-md); margin-bottom: 14px;
}
.sf-side { flex: 1; text-align: center; min-width: 0; }
.sf-name { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; }
.sf-bar { height: 10px; background: #e6e9f2; border-radius: 999px; overflow: hidden; }
.sf-bar > i { display: block; height: 100%; background: var(--ok); border-radius: 999px; transition: width .4s; }
.sf-bar.danger > i { background: var(--err); }
.sf-num { margin-top: 5px; font-size: var(--fs-xs); color: var(--text-2); }
.sf-num b { font-size: var(--fs-base); }
.sf-mid { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; flex: 0 0 auto; }

.san-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.san-btn {
    padding: 14px 10px; background: #fff; border: 1px solid var(--border);
    border-radius: 18px; cursor: pointer; text-align: center;
    box-shadow: var(--sh-1);
    transition: transform .14s, border-color .14s, box-shadow .14s;
}
.san-btn b { display: block; font-size: var(--fs-lg); margin-bottom: 3px; }
.san-btn span { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.san-btn:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 10px 22px rgba(79,70,229,.16);
}

.san-log { max-height: 260px; overflow-y: auto; }
.sl-item {
    padding: 8px 10px; border-left: 3px solid var(--primary);
    background: #f8f9fc; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: 8px;
}
.sl-h { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 2px; }
.sl-b { font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.sl-f {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: var(--fs-xs); color: var(--text-2); margin-top: 5px;
}
.sl-f b { font-size: var(--fs-sm); }
.sl-loss b { color: var(--err); }
.sl-kill b { color: var(--ok); }
.sl-tide {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    background: #f0f1f6; color: var(--text-2);
}

/* 战况标签：吃亏红、占优绿、均势灰 */
.sl-item.tide-good .sl-tide { background: #e6f7ee; color: var(--ok); }
.sl-item.tide-bad  .sl-tide { background: #fdecec; color: var(--err); }
.sl-item.tide-even .sl-tide { background: #f0f1f6; color: var(--muted); }

/* 行左边框颜色跟随战况 */
.sl-item.tide-good { border-left-color: var(--ok); }
.sl-item.tide-bad  { border-left-color: var(--err); }
.sl-item.tide-even { border-left-color: var(--primary); }

/* 结算弹层 */
.game-modal {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(20, 24, 40, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; backdrop-filter: blur(3px);
}
.gm-box {
    background: #fff; border-radius: var(--r-lg);
    padding: 28px 26px; text-align: center; max-width: 380px; width: 100%;
    box-shadow: var(--sh-3);
    animation: gmPop .32s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes gmPop {
    from { transform: scale(.82); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.gm-emoji { font-size: 52px; line-height: 1; margin-bottom: 10px; }
.gm-title { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 6px; }
.gm-desc { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6; }
.gm-reward {
    margin: 16px 0; padding: 12px;
    background: linear-gradient(100deg, #fff6e5, #fff);
    border: 1px dashed #f0c674; border-radius: var(--r-md);
}
.gm-r-label { font-size: var(--fs-xs); color: var(--muted); }
.gm-r-val { font-size: 22px; font-weight: 700; color: var(--err); margin-top: 2px; }
.gm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* 撒花 / 加油特效 */
.fireworks {
    position: fixed; inset: 0; pointer-events: none; z-index: 1000; overflow: hidden;
}
.fireworks span {
    position: absolute; bottom: -40px;
    animation: fwRise 2.6s ease-out forwards;
}
@keyframes fwRise {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translateY(-100vh) rotate(320deg); opacity: 0; }
}
.fireworks.cheer span { animation-duration: 3.2s; }

/* 后台：奖励配置块 */
.reward-box {
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 14px; margin-bottom: 12px; background: #fafbfd;
}
.rb-head { font-size: var(--fs-base); font-weight: 600; margin-bottom: 10px; }

/* 会员中心游戏入口 */
.uc-game { color: var(--primary); font-weight: 600; }
.uc-game-btn { background: linear-gradient(100deg, #6a7cff, #8f6aff); border: 0; }

@media (max-width: 560px) {
    .game-grid { grid-template-columns: 1fr; }
    .rps-btn { width: 78px; font-size: 28px; }
    .san-field { gap: 10px; }
    .gch-stats { gap: 10px; }
}

/* ============================================================
   友情提示：滚动展示（后台可逐条开关）
   ============================================================ */
.tip-panel { overflow: hidden; }
.tip-head {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-base); font-weight: 600; margin-bottom: 10px;
}
.tip-bell { font-size: 16px; }

/* 滚动窗口：高度自适应，最多约 5 行 */
.tip-scroll {
    position: relative; overflow: hidden;
    max-height: 132px;
}
.tip-scroll.rolling {
    /* 上下淡出，避免文字硬切 */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.tip-track { --tip-dur: 12s; }
.tip-scroll.rolling .tip-track {
    animation: tipRoll var(--tip-dur) linear infinite;
}
.tip-scroll.rolling:hover .tip-track {
    animation-play-state: paused;   /* 悬停暂停，方便阅读 */
}
@keyframes tipRoll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }   /* track 内含两份内容，跑一半即无缝 */
}
@media (prefers-reduced-motion: reduce) {
    .tip-scroll.rolling .tip-track { animation: none; }
}

/* ============================================================
   模块化排序容器 + 移动端自适应 + 圆润化
   ============================================================ */

/* ---- 模块排序：用 flex order，不改 HTML 结构 ---- */
.site-wrap.mod-sorted,
.site-wrap { display: flex; flex-direction: column; }
.site-wrap > * { order: 50; }
.site-wrap > [data-mod="foot"] { order: 999; }
.uc-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.uc-tabs > * { order: 50; }

/* ---- 移动端真自适应：禁止整页横向滚动 ---- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
/* 任何固定宽度都不允许撑破屏幕 */
img, table, pre, video, iframe {
    max-width: 100%;
}
input, select, textarea { max-width: 100%; }

/* 游戏舞台：宽度由后台「展示尺寸」控制，默认 720px，手机上自动撑满 */
.game-stage,
.page-game .wrap {
    width: 100%;
    max-width: var(--stage-w, 720px);
    margin-left: auto;
    margin-right: auto;
}
.page-game .game-stage { max-width: 100%; }

/* ---- 圆润化：加大圆角层级（跟随后台「圆润度」设置） ---- */
.panel,
.game-card,
.mod-item,
.reward-box,
.user-card,
.info-item,
.style-preview {
    border-radius: var(--r-lg);
}
.btn,
.badge,
.cat-btn,
.rps-btn,
.san-btn,
.mi-sw span {
    border-radius: var(--r-btn);
}
input[type=text], input[type=password], input[type=number],
input[type=email], select, textarea {
    border-radius: var(--r-input);
}
table.grid { overflow: hidden; border-radius: var(--r-md); }

/* ---- 后台模块管理 ---- */
.zone-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.zone-tabs a {
    padding: 6px 16px; border: 1px solid var(--border);
    border-radius: var(--r-btn); color: var(--text-2); font-size: var(--fs-sm);
}
.zone-tabs a.on { background: var(--primary); color: #fff; border-color: var(--primary); }

.mod-list { display: flex; flex-direction: column; gap: 10px; }
.mod-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: #fff;
    transition: border-color .15s, opacity .15s;
}
.mod-item.off { opacity: .55; background: #fafbfd; }
.mod-item.dragging { opacity: .4; border-style: dashed; }
.mi-drag { cursor: grab; color: var(--muted); font-size: 16px; user-select: none; flex: 0 0 auto; }
.mi-ic { font-size: 20px; flex: 0 0 auto; width: 28px; text-align: center; }
.mi-main { flex: 1 1 auto; min-width: 0; }
.mi-name { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mi-desc { margin-top: 2px; }
.mi-core {
    font-size: 11px; padding: 1px 7px; background: var(--primary-soft);
    color: var(--primary); border-radius: 999px;
}
.mi-del {
    border: 0; background: transparent; color: var(--err);
    font-size: var(--fs-sm); cursor: pointer; padding: 0 2px;
}
.mi-edit { display: flex; gap: 6px; flex: 0 0 auto; }
.mi-edit input { width: 110px; padding: 5px 8px; font-size: var(--fs-sm); }
.mi-edit input:last-child { width: 58px; }
.mi-sw { flex: 0 0 auto; cursor: pointer; }
.mi-sw input { display: none; }
.mi-sw span {
    display: block; width: 42px; height: 24px; background: #d8dce8;
    position: relative; transition: background .18s;
}
.mi-sw span::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; background: #fff; border-radius: 50%;
    transition: transform .18s;
}
.mi-sw input:checked + span { background: var(--ok); }
.mi-sw input:checked + span::after { transform: translateX(18px); }

/* ---- 简洁导航（内页） ---- */
.mini-nav { background: #fff; border-bottom: 1px solid var(--border); }
.mini-nav-in {
    max-width: 1120px; margin: 0 auto; padding: 10px 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.mn-logo { font-weight: 700; font-size: var(--fs-lg); color: var(--text); text-decoration: none; }
.mn-menu { display: flex; gap: 14px; flex-wrap: wrap; }
.mn-menu a { color: var(--text-2); font-size: var(--fs-sm); text-decoration: none; padding: 4px 2px; }
.mn-menu a.on { color: var(--primary); font-weight: 600; }
.site-foot { margin-top: 28px; padding: 18px 16px; border-top: 1px solid var(--border); }
.site-foot-in { max-width: 1120px; margin: 0 auto; text-align: center; }

/* ---- 移动端细化 ---- */
@media (max-width: 768px) {
    .mi-edit { display: none; }              /* 手机上隐藏内联编辑，避免太挤 */
    .mod-item { flex-wrap: wrap; }
    .gch-top { flex-direction: column; align-items: flex-start; }
    .gs-ring { width: 66px; height: 66px; }
    .gs-in { width: 50px; height: 50px; }
    .gs-in b { font-size: 20px; }
    .gs-big { width: 66px; height: 66px; font-size: 28px; }
    .gc-hero { padding: 20px 18px 16px; border-radius: 20px; }
    .mini-nav-in { justify-content: center; }
    .mn-menu { justify-content: center; }
}

@media (max-width: 560px) {
    .site-wrap { padding-left: 12px; padding-right: 12px; }
    .uc-tabs { gap: 2px; }
    .uc-tabs a { padding: 7px 12px; font-size: var(--fs-sm); }
    .gstat { flex: 1 1 100%; }
    .gch-stats { gap: 10px; }
    .game-grid { grid-template-columns: 1fr; }
    .mi-ic { display: none; }
}

/* 后台用户列表：序号名后的自定义昵称（括号） */
.u-nick-in {
    font-weight: 400;
    color: var(--muted);
    font-size: var(--fs-sm);
    margin-left: 2px;
}

/* ============================================================
   游戏中心：彩色英雄卡 + 圆润卡片
   ============================================================ */

/* ---- 英雄卡：渐变底 + 大圆角 + 装饰光斑 ---- */
.gc-hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 26px 26px 20px;
    margin-bottom: 22px;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 48%, #a855f7 100%);
    box-shadow: 0 12px 32px rgba(99, 102, 241, .28);
}
.gch-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}
.gch-deco.d1 { width: 190px; height: 190px; top: -70px; right: -40px; background: rgba(255,255,255,.14); }
.gch-deco.d2 { width: 130px; height: 130px; bottom: -60px; left: 8%;  background: rgba(255,255,255,.10); }
.gch-deco.d3 { width: 70px;  height: 70px;  top: 40%;     right: 22%; background: rgba(255,255,255,.08); }

.gch-top {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin-bottom: 22px;
}
.gch-brand { display: flex; align-items: center; gap: 14px; }
.gch-icon {
    width: 52px; height: 52px; flex: 0 0 52px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    border-radius: 16px;
    background: rgba(255,255,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.gch-title { font-size: var(--fs-2xl); font-weight: 700; margin: 0; line-height: 1.25; }
.gch-sub { margin: 2px 0 0; font-size: var(--fs-sm); color: rgba(255,255,255,.82); }

.gch-back {
    display: inline-flex; align-items: center;
    padding: 8px 16px;
    font-size: var(--fs-sm);
    color: #fff;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    transition: background .18s, transform .18s;
}
.gch-back:hover { background: rgba(255,255,255,.26); color: #fff; transform: translateY(-1px); }

/* ---- 玻璃态统计 ---- */
.gch-stats {
    position: relative;
    display: flex; gap: 14px; flex-wrap: wrap;
}
.gstat {
    flex: 1 1 150px; min-width: 132px;
    display: flex; flex-direction: column; align-items: center;
    padding: 18px 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.26);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-align: center;
}
.gstat-main { background: rgba(255,255,255,.22); }

/* 环形进度：白底轨道 + 白色进度 */
.gs-ring {
    --pct: 0;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: conic-gradient(#fff calc(var(--pct) * 1%), rgba(255,255,255,.26) 0);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
    transition: background .45s ease;
}
.gs-ring.alt {
    background: conic-gradient(#ffd166 calc(var(--pct) * 1%), rgba(255,255,255,.26) 0);
}
.gs-in {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    display: flex; align-items: center; justify-content: center;
}
.gs-in b { font-size: 24px; font-weight: 800; color: #4c1d95; line-height: 1; }

.gs-cap { font-size: var(--fs-xs); color: rgba(255,255,255,.78); margin-bottom: 2px; }
.gs-label { font-size: var(--fs-base); font-weight: 600; }
.gs-hint { margin-top: 3px; font-size: var(--fs-xs); color: rgba(255,255,255,.80); }

/* 用完整态：金色高亮 */
.gstat.is-full .gs-ring,
.gstat.is-full .gs-ring.alt {
    background: conic-gradient(#ffd166 calc(var(--pct) * 1%), rgba(255,255,255,.26) 0);
}
.gstat.is-full .gs-hint { color: #ffe9a8; font-weight: 600; }

.gs-big {
    width: 76px; height: 76px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 800;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: #4c1d95;
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.gstat-main.is-full .gs-big { color: #b45309; }

.gch-foot {
    position: relative;
    margin-top: 16px; padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,.28);
    font-size: var(--fs-xs); color: rgba(255,255,255,.78);
    text-align: center;
}

/* ---- 大厅卡片 ---- */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
}
.game-card {
    --gc1: #6366f1;
    --gc2: #8b5cf6;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 24px 18px 18px;
    text-align: center;
    box-shadow: var(--sh-2);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(20,25,45,.13);
    border-color: var(--gc1);
}
.game-card.disabled { opacity: .62; }
.game-card.disabled:hover { transform: none; }

/* 顶部彩色光晕 */
.gc-glow {
    position: absolute;
    top: -60px; left: 50%; transform: translateX(-50%);
    width: 190px; height: 120px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--gc1), var(--gc2));
    opacity: .16;
    filter: blur(18px);
    pointer-events: none;
}

.gc-ic {
    position: relative;
    width: 74px; height: 74px; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; line-height: 1;
    border-radius: 22px;
    background: linear-gradient(140deg, var(--gc1), var(--gc2));
    box-shadow: 0 8px 18px rgba(99,102,241,.26);
}
.gc-name { position: relative; font-size: var(--fs-lg); font-weight: 700; margin-bottom: 4px; }
.gc-desc { position: relative; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 14px; min-height: 2.6em; }

.gc-tags {
    position: relative;
    display: flex; gap: 8px; width: 100%;
    margin-bottom: 16px;
}
.gct {
    flex: 1 1 0;
    padding: 8px 6px;
    border-radius: 14px;
    font-size: var(--fs-xs);
    line-height: 1.35;
}
.gct b { display: inline-block; margin-top: 2px; font-size: var(--fs-sm); }
.gct.win  { background: #fff5e6; color: #b45309; }
.gct.win b { color: #d97706; }
.gct.lose { background: #e8f7ee; color: #15803d; }
.gct.lose b { color: #16a34a; }

.gc-btn {
    width: 100%;
    margin-top: auto;
    padding: 11px 16px;
    border: 0;
    border-radius: 999px;
    font-size: var(--fs-base);
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--gc1), var(--gc2));
    box-shadow: 0 6px 16px rgba(99,102,241,.26);
    transition: transform .16s, box-shadow .16s, filter .16s;
}
.gc-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.gc-btn:active { transform: translateY(0); }
.gc-btn:disabled {
    background: #e9ebf2; color: var(--muted);
    box-shadow: none; cursor: not-allowed; filter: none; transform: none;
}


/* ============================================================
   会员中心 · 等级英雄卡（奖杯样式）
   底色随等级色渐变，不再用白底，文字才看得清
   ============================================================ */
.mem-hero {
    --lv: #A0522D;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 24px 26px 18px;
    margin-bottom: 20px;
    color: #fff;
    /*
     * --lv 已由 PHP 端按亮度提亮过（保色相），这里只做渐变：
     * 上层盖半透明白提亮、下层压深色做纵深，不依赖 color-mix，
     * 老浏览器也能正常显示。
     */
    background:
        linear-gradient(135deg,
            rgba(255,255,255,.30) 0%,
            rgba(255,255,255,.06) 42%,
            rgba(0,0,0,.22) 100%),
        linear-gradient(135deg, var(--lv) 0%, var(--lv) 100%);
    box-shadow: 0 12px 30px rgba(27, 16, 51, .26);
}

/* 装饰光斑 + 扫光 */
.mh-deco { position: absolute; border-radius: 50%; pointer-events: none; }
.mh-deco.d1 { width: 200px; height: 200px; top: -80px; right: -50px; background: rgba(255,255,255,.15); }
.mh-deco.d2 { width: 140px; height: 140px; bottom: -70px; left: 6%;  background: rgba(255,255,255,.10); }
.mh-deco.d3 { width: 80px;  height: 80px;  top: 38%;    right: 26%; background: rgba(255,255,255,.08); }

.mh-shine {
    position: absolute;
    top: -60%; left: -30%;
    width: 45%; height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    transform: rotate(18deg);
    pointer-events: none;
    animation: mhShine 6s ease-in-out infinite;
}
@keyframes mhShine {
    0%, 100% { left: -30%; }
    50%      { left: 115%; }
}

.mh-top {
    position: relative;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-bottom: 20px;
}

/* 头像：等级色光环 */
.mh-avatar { position: relative; flex: 0 0 auto; }
.mh-avatar img {
    width: 76px; height: 76px; border-radius: 50%;
    display: block; position: relative; z-index: 1;
    background: #fff;
}
.mh-av-ring {
    position: absolute; inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 0 0 4px rgba(255,255,255,.18);
    animation: mhPulse 2.6s ease-in-out infinite;
}
@keyframes mhPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
    50%      { box-shadow: 0 0 0 8px rgba(255,255,255,.06); }
}

/* 问候语 */
.mh-greet { flex: 1 1 auto; min-width: 0; }
.mh-hello {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.86);
    letter-spacing: .3px;
}
.mh-hello b {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: #fff;
    margin: 0 2px;
    text-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.mh-nick {
    margin-top: 2px;
    font-size: var(--fs-lg);
    font-weight: 700;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.mh-lv {
    padding: 2px 12px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.34);
}

/* 奖杯 */
.mh-trophy {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.mht-cup {
    font-size: 40px; line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.28));
    animation: mhFloat 3.2s ease-in-out infinite;
}
@keyframes mhFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-5px) rotate(2deg); }
}
.mht-name {
    margin-top: 4px;
    font-size: var(--fs-base);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.mht-sub { font-size: var(--fs-xs); color: rgba(255,255,255,.78); }

/* 三格信息 */
.mh-info {
    position: relative;
    display: flex; gap: 12px; flex-wrap: wrap;
}
.mhi {
    flex: 1 1 150px; min-width: 132px;
    padding: 14px 14px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.mhi .k { font-size: var(--fs-xs); color: rgba(255,255,255,.76); margin-bottom: 3px; }
.mhi .v { font-size: var(--fs-base); font-weight: 600; color: #fff; word-break: break-all; }
.mhi .v.hi { font-size: var(--fs-lg); font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* 底部 */
.mh-foot {
    position: relative;
    margin-top: 16px; padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,.26);
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.82);
}
.mh-next b { color: #ffe9a8; }

/* 移动端 */
@media (max-width: 640px) {
    .mem-hero { padding: 18px 16px 14px; border-radius: 20px; }
    .mh-top { gap: 12px; }
    .mh-trophy { padding: 8px 12px; }
    .mht-cup { font-size: 32px; }
    .mhi { flex: 1 1 100%; }
    .mh-foot { flex-direction: column; align-items: flex-start; }
}

/* ---- 会员英雄卡：紧凑版（首页侧栏）与配套按钮 ---- */
.mem-hero.compact {
    padding: 18px 18px 14px;
    border-radius: 20px;
    margin-bottom: 0;
}
.mem-hero.compact .mh-top { gap: 12px; margin-bottom: 14px; }
.mem-hero.compact .mh-hello { font-size: var(--fs-xs); }
.mem-hero.compact .mh-hello b { font-size: var(--fs-lg); }
.mem-hero.compact .mh-nick { font-size: var(--fs-base); }
.mem-hero.compact .mh-trophy { padding: 7px 12px; }
.mem-hero.compact .mht-cup { font-size: 30px; }
.mem-hero.compact .mhi { flex: 1 1 100%; padding: 10px 12px; }
.mem-hero.compact .mh-info { gap: 8px; }
.mem-hero.compact .mh-foot { margin-top: 12px; padding-top: 10px; }

/* 追加信息行（登录次数 / 地域） */
.mh-extra { position: relative; margin-top: 12px; }
.mh-extra-info {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.80);
    text-align: center;
}
.mh-extra .btn-row { display: flex; gap: 8px; justify-content: center; }

/* 卡片内按钮：半透明白底，保证在深色渐变上看得清 */
.mh-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,.24);
    border: 1px solid rgba(255,255,255,.40);
    transition: background .18s, transform .18s;
}
.mh-btn:hover { background: rgba(255,255,255,.36); color: #fff; transform: translateY(-1px); }
.mh-btn.ghost { background: rgba(255,255,255,.10); }
.mh-btn.ghost:hover { background: rgba(255,255,255,.22); }

/* 紧凑版在小屏下也完整显示 */
@media (max-width: 900px) {
    .mem-hero.compact .mh-info { gap: 8px; }
}

/* 登录状态下：白底外框让位给彩色奖杯卡（含防拉伸，定义在下方） */
body.tpl-night .hero-card.has-mem { background: transparent; border-color: transparent; }

/* ============================================================
   会员卡 · 极简模式（首页 Hero 右栏）
   只保留「第几位会员 + 等级」，避免内容过多被拉伸变形
   ============================================================ */
.mem-hero.minimal {
    padding: 16px 18px 14px;
    border-radius: 18px;
    margin-bottom: 0;
    /* 关键：Hero 是 grid + align-items:center，卡片不再被纵向拉伸 */
    align-self: center;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
.mem-hero.minimal .mh-top {
    gap: 12px;
    margin-bottom: 0;
    flex-wrap: nowrap;
}
.mem-hero.minimal .mh-avatar img { width: 54px; height: 54px; }
.mem-hero.minimal .mh-greet { min-width: 0; flex: 1 1 auto; }
.mem-hero.minimal .mh-hello {
    font-size: var(--fs-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mem-hero.minimal .mh-hello b { font-size: var(--fs-xl); }
.mem-hero.minimal .mh-nick {
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mem-hero.minimal .mh-nick .mh-lv { flex: 0 0 auto; }
.mem-hero.minimal .mh-trophy {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 14px;
}
.mem-hero.minimal .mht-cup { font-size: 26px; }
.mem-hero.minimal .mht-name { font-size: var(--fs-sm); }
.mem-hero.minimal .mht-sub { display: none; }

/* 极简模式下不显示三格信息与底部 */
.mem-hero.minimal .mh-info,
.mem-hero.minimal .mh-foot { display: none; }

.mem-hero.minimal .mh-extra { margin-top: 12px; }
.mem-hero.minimal .mh-extra.btn-row {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.mem-hero.minimal .mh-btn { padding: 7px 16px; }

/* Hero 右栏：不再把卡片拉伸到满高 */
.hero-card.has-mem {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    align-self: center;      /* 防拉伸 */
    display: block;
}

@media (max-width: 900px) {
    .mem-hero.minimal { max-width: 100%; }
    .mem-hero.minimal .mh-top { flex-wrap: wrap; }
}

/* 登录首页（融合会员中心）顶部操作条 */
.mem-bar {
    display: flex; justify-content: flex-end;
    margin-bottom: 12px;
}
.mem-bar .mh-btn {
    /* 独立按钮不在深色卡内，改用可辨识的描边样式 */
    background: rgba(127,127,127,.10);
    border-color: var(--border);
    color: var(--text-2);
}
.mem-bar .mh-btn:hover { background: rgba(127,127,127,.18); color: var(--text); }