/* ============================================================
   回首奇迹 · 前台设计系统 (mu.css)
   暗黑魔幻风：深曜石底 + 鎏金点缀 + 石板卡片
   仅服务前台；后台继续使用 style.css
   ============================================================ */

:root {
    --bg:        #0b0e14;
    --bg-2:      #0e1220;
    --panel:     #141a29;
    --panel-2:   #182031;
    --line:      #2a3348;
    --line-soft: #222b3f;

    --gold:      #d4af5f;
    --gold-hi:   #f0d78c;
    --gold-lo:   #8a6d2f;
    --gold-dim:  rgba(212, 175, 95, .16);

    --txt:       #e8e4d8;
    --txt-2:     #aab2c5;
    --txt-3:     #78829a;

    --ok:        #3fbf5f;
    --warn:      #e0b53a;
    --err:       #d05555;
    --info:      #4ab0ff;

    --radius:    10px;
    --radius-lg: 14px;
    --shadow:    0 10px 30px rgba(0, 0, 0, .45);
    --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.65;
    color: var(--txt);
    background:
        radial-gradient(900px 420px at 50% -180px, rgba(212, 175, 95, .07), transparent 65%),
        var(--bg);
    min-height: 100vh;
}

a { color: var(--gold-hi); text-decoration: none; transition: color .15s; }
a:hover { color: #fff; }

h1, h2, h3 { line-height: 1.35; }

img { vertical-align: middle; }

::selection { background: var(--gold-lo); color: #fff; }

/* ---------- 布局容器 ---------- */
.container        { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 560px;  margin: 0 auto; padding: 40px 20px 60px; }

/* ============================================================
   导航
   ============================================================ */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 14, 20, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
}

.nav::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-lo) 30%, var(--gold) 50%, var(--gold-lo) 70%, transparent);
    opacity: .55;
}

.nav-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.nav-brand {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 3px;
    background: linear-gradient(180deg, #f6e3a8, #caa050);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.nav-links a {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 8px;
    color: var(--txt-2);
    font-size: 14px;
    transition: color .15s, background .15s;
}

.nav-links a:hover { color: var(--gold-hi); background: rgba(212, 175, 95, .08); }

.nav-links a.active {
    color: var(--gold-hi);
    background: var(--gold-dim);
}

.nav-links a.btn {
    margin-left: 6px;
    color: #1a1408;
    font-weight: 600;
    background: linear-gradient(180deg, #ecd192, #c39a4b);
    box-shadow: 0 2px 10px rgba(212, 175, 95, .25);
}

.nav-links a.btn:hover { color: #000; filter: brightness(1.08); }

/* ============================================================
   Hero（首页专用）
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 92px 20px 84px;
    background:
        radial-gradient(1100px 480px at 50% -140px, rgba(212, 175, 95, .20), transparent 62%),
        radial-gradient(760px 420px at 88% 118%, rgba(74, 176, 255, .10), transparent 60%),
        radial-gradient(680px 400px at 10% 120%, rgba(208, 85, 85, .09), transparent 60%),
        linear-gradient(180deg, #101627 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--line-soft);
}

/* 符文网格暗纹 */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg,  rgba(212,175,95,.045) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(90deg, rgba(212,175,95,.045) 0 1px, transparent 1px 64px);
    -webkit-mask-image: radial-gradient(720px 360px at 50% 30%, #000 20%, transparent 75%);
    mask-image: radial-gradient(720px 360px at 50% 30%, #000 20%, transparent 75%);
    pointer-events: none;
}

.hero > * { position: relative; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 16px;
    border: 1px solid rgba(212, 175, 95, .35);
    border-radius: 999px;
    color: var(--gold-hi);
    font-size: 13px;
    letter-spacing: 2px;
    background: rgba(212, 175, 95, .08);
}

.hero-badge::before,
.hero-badge::after {
    content: "◆";
    font-size: 8px;
    color: var(--gold);
    opacity: .8;
}

.hero-title {
    margin: 22px 0 10px;
    font-size: 52px;
    font-weight: 800;
    letter-spacing: 10px;
    text-indent: 10px;
    background: linear-gradient(180deg, #fbeec2 15%, #d9b268 55%, #9a7733 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 8px 40px rgba(212, 175, 95, .18);
}

.hero-slogan {
    color: var(--txt-2);
    font-size: 16px;
    letter-spacing: 5px;
    margin-bottom: 34px;
}

.hero-cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.btn-gold,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    padding: 13px 34px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 4px;
    text-indent: 4px;
    cursor: pointer;
    transition: filter .15s, transform .15s, border-color .15s;
}

.btn-gold {
    color: #221a06;
    background: linear-gradient(180deg, #f2d695, #c69c4b);
    border: 1px solid #a8813a;
    box-shadow: 0 4px 22px rgba(212, 175, 95, .30), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.btn-gold:hover { color: #000; filter: brightness(1.1); transform: translateY(-1px); }

.btn-ghost {
    color: var(--gold-hi);
    background: rgba(212, 175, 95, .06);
    border: 1px solid rgba(212, 175, 95, .4);
}

.btn-ghost:hover { border-color: var(--gold); background: rgba(212, 175, 95, .13); color: #fff; transform: translateY(-1px); }

.hero-status {
    margin-top: 38px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 22px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(13, 17, 27, .75);
    font-size: 14px;
    color: var(--txt-2);
}

.hero-status b { color: #fff; font-size: 16px; }

.pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50%      { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); opacity: .75; }
}

@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }

/* ============================================================
   区块通用
   ============================================================ */
.section { max-width: 1120px; margin: 0 auto; padding: 44px 20px 0; }

.section-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.section-head::before,
.section-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
}

.section-head::before { background: linear-gradient(90deg, transparent, var(--line)); }

.section-head h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--txt);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-head h2::before {
    content: "◆";
    color: var(--gold);
    font-size: 11px;
}

.section-head .more {
    font-size: 13px;
    color: var(--txt-3);
    white-space: nowrap;
}

.section-head .more:hover { color: var(--gold-hi); }

/* ============================================================
   组件状态条（GS/CS/JS/DS）
   ============================================================ */
.strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 1120px;
    margin: -30px auto 0;
    padding: 14px 20px;
    position: relative;
    z-index: 5;
}

.strip-card {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 14px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    box-shadow: var(--shadow);
}

.strip-label { font-size: 13px; color: var(--txt-3); letter-spacing: 2px; }

.strip-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: rgba(11, 14, 20, .6);
    font-size: 13px;
    color: var(--txt-2);
    min-width: 74px;
    justify-content: center;
}

.s-dot { width: 8px; height: 8px; border-radius: 50%; background: #5a6377; }

.strip-item.online  .s-dot { background: var(--ok);   box-shadow: 0 0 8px rgba(63, 191, 95, .7); }
.strip-item.online             { color: #cfe8d4; border-color: rgba(63, 191, 95, .3); }
.strip-item.offline .s-dot { background: var(--err);  box-shadow: 0 0 8px rgba(208, 85, 85, .7); }
.strip-item.offline           { color: #eecaca; border-color: rgba(208, 85, 85, .35); }
.strip-item.pending .s-dot { background: #5a6377; }
.strip-item.pending           { color: var(--txt-3); }

.strip-summary { font-size: 13px; }
.strip-summary.ok  { color: var(--ok); }
.strip-summary.err { color: var(--err); }

/* ============================================================
   数据统计带
   ============================================================ */
.stats-band {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.stat-cell {
    text-align: center;
    padding: 20px 8px 16px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(24, 32, 49, .65), rgba(20, 26, 41, .65));
    position: relative;
}

.stat-cell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 95, .45), transparent);
}

.stat-cell .num {
    font-size: 27px;
    font-weight: 800;
    color: var(--gold-hi);
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.stat-cell .num.red { color: #e08585; }

.stat-cell .lbl {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--txt-3);
    letter-spacing: 2px;
}

/* ============================================================
   双栏：公告 + 巅峰榜
   ============================================================ */
.grid-2 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    align-items: start;
}

.card {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    overflow: hidden;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(11, 14, 20, .35);
}

.card-head h3 {
    margin: 0;
    font-size: 16px;
    letter-spacing: 3px;
    color: var(--txt);
    display: flex;
    align-items: center;
    gap: 9px;
}

.card-head h3::before { content: "◆"; color: var(--gold); font-size: 10px; }

.card-head a { font-size: 13px; color: var(--txt-3); }
.card-head a:hover { color: var(--gold-hi); }

/* 公告列表 */
.news-list { list-style: none; margin: 0; padding: 6px 0; }

.news-list li { border-bottom: 1px dashed var(--line-soft); }
.news-list li:last-child { border-bottom: 0; }

.news-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: var(--txt-2);
    transition: background .15s, color .15s;
}

.news-list a:hover { background: rgba(212, 175, 95, .06); color: var(--txt); }

.news-tag {
    flex: none;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 4px;
    color: var(--gold-hi);
    border: 1px solid rgba(212, 175, 95, .45);
    background: var(--gold-dim);
}

.news-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.news-date { flex: none; font-size: 12.5px; color: var(--txt-3); font-variant-numeric: tabular-nums; }

.news-empty { padding: 34px 20px; text-align: center; color: var(--txt-3); }

/* 巅峰榜 */
.top-list { list-style: none; margin: 0; padding: 6px 0; }

.top-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px dashed var(--line-soft);
}

.top-row:last-child { border-bottom: 0; }

.top-no {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--txt-3);
    border: 1px solid var(--line-soft);
    background: rgba(11, 14, 20, .6);
    font-variant-numeric: tabular-nums;
}

.top-no.n1 { color: #201500; background: linear-gradient(180deg, #f4dc9a, #cf9f3e); border-color: #a8813a; }
.top-no.n2 { color: #1c1c1c; background: linear-gradient(180deg, #e8e8ee, #a9adb8); border-color: #8d919c; }
.top-no.n3 { color: #2b1503; background: linear-gradient(180deg, #eab183, #b06f36); border-color: #8f5722; }

.top-row img {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    border: 1px solid var(--line);
    object-fit: cover;
    background: #0b0e14;
}

.top-name { flex: 1; min-width: 0; }

.top-name b {
    display: block;
    color: var(--txt);
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-name span { font-size: 12px; color: var(--txt-3); }

.top-meta {
    flex: none;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.top-meta b { display: block; color: var(--gold-hi); font-size: 15px; }

.top-meta span { font-size: 11.5px; color: var(--txt-3); }

/* ============================================================
   职业卡
   ============================================================ */
.class-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.class-card {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    padding: 22px 18px 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}

.class-card:hover { border-color: rgba(212, 175, 95, .4); transform: translateY(-3px); }

.class-card::after {
    content: "";
    position: absolute;
    inset: auto 15% 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 95, .4), transparent);
}

.class-art {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(212, 175, 95, .35);
    background: #0b0e14;
    box-shadow: 0 0 0 4px rgba(212, 175, 95, .07), 0 6px 18px rgba(0, 0, 0, .5);
}

.class-card h4 { margin: 13px 0 2px; font-size: 16px; letter-spacing: 3px; color: var(--txt); }

.class-card .cls-count { font-size: 12.5px; color: var(--txt-3); }

.cls-track {
    margin-top: 13px;
    height: 5px;
    border-radius: 3px;
    background: rgba(11, 14, 20, .9);
    border: 1px solid var(--line-soft);
    overflow: hidden;
}

.cls-fill { height: 100%; border-radius: 3px; }

.cls-percent { margin-top: 7px; font-size: 12.5px; color: var(--txt-2); font-variant-numeric: tabular-nums; }

/* ============================================================
   特色 + 加入
   ============================================================ */
.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.feat-card {
    padding: 26px 24px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
}

.feat-card .ico {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--gold-hi);
    background: var(--gold-dim);
    border: 1px solid rgba(212, 175, 95, .3);
    font-size: 20px;
    margin-bottom: 14px;
}

.feat-card h4 { margin: 0 0 6px; font-size: 16px; letter-spacing: 2px; }

.feat-card p { margin: 0; color: var(--txt-2); font-size: 13.5px; }

.cta-band {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 28px 30px;
    border: 1px solid rgba(212, 175, 95, .28);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(600px 200px at 15% 0%, rgba(212, 175, 95, .13), transparent 60%),
        linear-gradient(180deg, var(--panel-2), var(--panel));
}

.cta-band h3 { margin: 0 0 4px; font-size: 20px; letter-spacing: 3px; }

.cta-band p { margin: 0; color: var(--txt-2); font-size: 14px; }

.cta-band .actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   页脚
   ============================================================ */
.footer {
    margin-top: 70px;
    padding: 34px 20px 40px;
    text-align: center;
    color: var(--txt-3);
    font-size: 13px;
    border-top: 1px solid var(--line-soft);
    background: linear-gradient(180deg, transparent, rgba(13, 17, 27, .8));
}

.footer a { color: var(--txt-3); }
.footer a:hover { color: var(--gold-hi); }

.footer .foot-brand {
    font-size: 16px;
    letter-spacing: 4px;
    margin-bottom: 10px;
    color: var(--gold-lo);
}

/* ============================================================
   面板 / 表单（登录、注册、用户中心等页面）
   ============================================================ */
.panel {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    padding: 30px 28px;
    box-shadow: var(--shadow);
}

.panel-title {
    margin: 0 0 6px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    background: linear-gradient(180deg, #f6e3a8, #caa050);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.panel-sub { margin: 0 0 22px; text-align: center; color: var(--txt-3); font-size: 13.5px; }

.panel-foot { margin-top: 20px; text-align: center; color: var(--txt-3); font-size: 13.5px; }

.form-card { margin-bottom: 18px; }

.form-field { margin-bottom: 16px; }

.form-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    color: var(--txt-2);
    letter-spacing: 1px;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: rgba(11, 14, 20, .7);
    color: var(--txt);
    font-size: 15px;
    font-family: var(--font);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 95, .15);
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: #5b6478; }

.captcha-row { display: flex; gap: 12px; align-items: center; }
.captcha-row input { flex: 1 1 auto; min-width: 0; }
/* 验证码图源为 2 倍图(176x60), 窄屏时按容器收缩, 保持清晰 */
.captcha-row img {
    flex: 0 1 auto; min-width: 0;
    height: 42px; width: auto; max-width: 48%;
    object-fit: contain;
    border-radius: 6px; border: 1px solid var(--line); background: #fff;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #a8813a;
    border-radius: 8px;
    color: #221a06;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 6px;
    text-indent: 6px;
    cursor: pointer;
    background: linear-gradient(180deg, #f2d695, #c69c4b);
    box-shadow: 0 3px 16px rgba(212, 175, 95, .25), inset 0 1px 0 rgba(255, 255, 255, .3);
    font-family: var(--font);
    transition: filter .15s, transform .15s;
}

.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-primary.disabled,
.btn-primary[disabled] { opacity: .55; cursor: not-allowed; transform: none; filter: none; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: rgba(24, 32, 49, .8);
    color: var(--txt-2);
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.btn:hover { border-color: var(--gold); color: var(--gold-hi); }

/* 消息条 */
.msg {
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    margin-bottom: 16px;
    border: 1px solid;
}

.msg.ok   { color: #a9e5b8; border-color: rgba(63, 191, 95, .4);  background: rgba(63, 191, 95, .08); }
.msg.err  { color: #f0b3b3; border-color: rgba(208, 85, 85, .45); background: rgba(208, 85, 85, .09); }
.msg.warn { color: #ecd69a; border-color: rgba(224, 181, 58, .4); background: rgba(224, 181, 58, .08); }

/* ============================================================
   页头 / 选项卡
   ============================================================ */
.page-head {
    margin: 34px 0 18px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 6px;
    background: linear-gradient(180deg, #f6e3a8, #caa050);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-title { margin: 0 0 16px; font-size: 20px; letter-spacing: 3px; }

.tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.tab {
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--txt-2);
    font-size: 13.5px;
    transition: all .15s;
}

.tab:hover { border-color: var(--gold-lo); color: var(--gold-hi); }

.tab.active {
    color: #221a06;
    font-weight: 600;
    border-color: #a8813a;
    background: linear-gradient(180deg, #ecd192, #c39a4b);
}

/* ============================================================
   排行榜表格
   ============================================================ */
.rank-table-wrap {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    overflow-x: auto;
}

.rank-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 560px;
}

.rank-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--txt-3);
    border-bottom: 1px solid var(--line);
    background: rgba(11, 14, 20, .4);
    white-space: nowrap;
}

.rank-table td {
    padding: 11px 16px;
    border-bottom: 1px dashed var(--line-soft);
    color: var(--txt-2);
}

.rank-table tr:last-child td { border-bottom: 0; }

.rank-table tbody tr { transition: background .15s; }
.rank-table tbody tr:hover { background: rgba(212, 175, 95, .05); }

.rank-table .rank-name { color: var(--txt); font-weight: 600; }

.rank-row-online td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.rank-row-banned td { color: #b08585 !important; }

.rank-sub { font-size: 12px; color: var(--txt-3); }

.rank-name-line { display: flex; align-items: center; gap: 8px; }

.rank-badge {
    display: inline-block;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 4px;
    border: 1px solid var(--line);
    color: var(--txt-3);
    white-space: nowrap;
}

.rank-badge.banned { color: #f0b3b3; border-color: rgba(208, 85, 85, .45); background: rgba(208, 85, 85, .08); }
.rank-badge.online { color: #a9e5b8; border-color: rgba(63, 191, 95, .4);  background: rgba(63, 191, 95, .08); }

.medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--line);
    color: var(--txt-3);
    background: rgba(11, 14, 20, .6);
}

.medal.gold   { color: #201500; background: linear-gradient(180deg, #f4dc9a, #cf9f3e); border-color: #a8813a; }
.medal.silver { color: #1c1c1c; background: linear-gradient(180deg, #e8e8ee, #a9adb8); border-color: #8d919c; }
.medal.bronze { color: #2b1503; background: linear-gradient(180deg, #eab183, #b06f36); border-color: #8f5722; }

.guild-cell { display: flex; align-items: center; gap: 9px; }
.guild-name { color: var(--txt); font-weight: 600; }

.map-badge, .map-name {
    display: inline-block;
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 4px;
    border: 1px solid var(--line-soft);
    background: rgba(11, 14, 20, .5);
    color: var(--txt-2);
}

.class-icon-inline {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--line);
    object-fit: cover;
    background: #0b0e14;
}

/* 分页 */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.pager a,
.pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    color: var(--txt-2);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.pager a:hover { border-color: var(--gold); color: var(--gold-hi); }

.pager span.current {
    color: #221a06;
    font-weight: 700;
    border-color: #a8813a;
    background: linear-gradient(180deg, #ecd192, #c39a4b);
}

.pager span.disabled { opacity: .4; }

.pager-info { border: 0 !important; color: var(--txt-3) !important; }

/* ============================================================
   公告列表页
   ============================================================ */
.notice-list { display: flex; flex-direction: column; gap: 12px; }

.notice-item {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    padding: 16px 20px;
    transition: border-color .15s;
}

.notice-item:hover { border-color: rgba(212, 175, 95, .35); }

.notice-title {
    display: block;
    color: var(--txt);
    font-size: 15.5px;
    font-weight: 600;
    margin-bottom: 4px;
}

.notice-title:hover { color: var(--gold-hi); }

.notice-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--txt-3); }

.notice-tag {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 4px;
    color: var(--gold-hi);
    border: 1px solid rgba(212, 175, 95, .45);
    background: var(--gold-dim);
}

.notice-date { font-variant-numeric: tabular-nums; }

.notice-empty {
    padding: 50px 20px;
    text-align: center;
    color: var(--txt-3);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
}

/* 公告正文 */
.panel .rich, .panel .content { color: var(--txt-2); font-size: 14.5px; }
.panel img { max-width: 100%; height: auto; border-radius: 8px; }
.panel table { border-collapse: collapse; width: 100%; }
.panel table th, .panel table td { border: 1px solid var(--line); padding: 8px 12px; }

/* ============================================================
   用户中心
   ============================================================ */
.user-wrap {
    max-width: 1120px;
    margin: 34px auto 0;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    align-items: start;
}

.user-side {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    overflow: hidden;
}

.user-profile {
    padding: 26px 20px;
    text-align: center;
    border-bottom: 1px solid var(--line-soft);
    background: radial-gradient(300px 120px at 50% -30px, rgba(212, 175, 95, .14), transparent 70%);
}

.user-avatar {
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 25px;
    font-weight: 700;
    color: #221a06;
    background: linear-gradient(180deg, #f2d695, #c69c4b);
    box-shadow: 0 0 0 4px rgba(212, 175, 95, .12);
}

.user-name { font-size: 16.5px; font-weight: 700; letter-spacing: 1px; }

.user-vip { margin-top: 3px; font-size: 12.5px; letter-spacing: 2px; }

.user-tabs { list-style: none; margin: 0; padding: 8px; }

.user-tabs a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--txt-2);
    font-size: 14px;
    transition: all .15s;
}

.user-tabs a:hover { color: var(--gold-hi); background: rgba(212, 175, 95, .07); }

.user-tabs a.active {
    color: var(--gold-hi);
    background: var(--gold-dim);
    border: 1px solid rgba(212, 175, 95, .3);
}

.user-logout {
    display: block;
    margin: 8px;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid var(--line);
    color: var(--txt-3);
    font-size: 13.5px;
}

.user-logout:hover { color: #f0b3b3; border-color: rgba(208, 85, 85, .45); }

.user-main { min-width: 0; }

.user-main .panel { margin-bottom: 18px; }

/* ============================================================
   杂项
   ============================================================ */
.badge {
    display: inline-block;
    font-size: 11.5px;
    padding: 2px 9px;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: rgba(11, 14, 20, .5);
    color: var(--txt-2);
}

.lic-tag {
    display: inline-block;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 4px;
    border: 1px solid rgba(74, 176, 255, .4);
    color: #a5d5f5;
    background: rgba(74, 176, 255, .08);
}

.mono { font-family: Consolas, Menlo, monospace; font-variant-numeric: tabular-nums; }
.dim  { color: var(--txt-3); }
.red  { color: #e08585; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 960px) {
    .hero-title { font-size: 38px; letter-spacing: 6px; }
    .stats-band { grid-template-columns: repeat(3, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    .class-grid { grid-template-columns: repeat(2, 1fr); }
    .feat-grid { grid-template-columns: 1fr; }
    .user-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .hero { padding: 64px 16px 60px; }
    .hero-title { font-size: 30px; letter-spacing: 4px; }
    .hero-slogan { letter-spacing: 2px; font-size: 14px; }
    .nav-inner { height: auto; padding: 10px 14px; flex-direction: column; gap: 6px; }
    .stats-band { grid-template-columns: repeat(2, 1fr); }
    .class-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .strip-card { gap: 8px; padding: 12px 14px; }
    .panel { padding: 22px 18px; }
    .btn-gold, .btn-ghost { min-width: 140px; padding: 11px 22px; }
}

/* ============================================================
   用户中心 · 总览信息卡
   ============================================================ */
.info-card {
    position: relative;
    padding: 14px 16px 14px 20px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.info-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
    opacity: .55;
}
.info-label {
    font-size: 12px; color: var(--txt-3);
    letter-spacing: 2px; margin-bottom: 6px;
}
.info-value {
    font-size: 16px; font-weight: 600; color: var(--txt);
    word-break: break-all; line-height: 1.4;
}
.info-sub {
    display: inline-block;
    margin-left: 8px; font-size: 12px;
    color: var(--txt-3); font-weight: 400; letter-spacing: 0;
}

.sub-title {
    margin: 26px 0 14px; font-size: 15px; font-weight: 600;
    letter-spacing: 3px; color: var(--gold);
    padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
}
.sub-title::before { content: '◆ '; font-size: 11px; color: var(--gold-lo); }

.action-block {
    padding: 16px 18px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line); border-radius: var(--radius);
}
.action-block form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hint { font-size: 12.5px; color: var(--txt-3); }

.btn-danger {
    display: inline-block; padding: 9px 22px; border: 0; border-radius: 8px;
    font-size: 13.5px; font-weight: 700; letter-spacing: 2px;
    color: #ffd9d9; cursor: pointer;
    background: linear-gradient(180deg, #a03d3d, #7d2b2b);
    border: 1px solid rgba(208, 85, 85, .55);
    transition: filter .15s;
}
.btn-danger:hover { filter: brightness(1.15); }

.form-card { max-width: 560px; }

/* ============================================================
   用户中心 · 角色卡片（卡片式展示）
   ============================================================ */
.char-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.char-card {
    position: relative;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: var(--radius); padding: 16px 18px;
    transition: border-color .2s, box-shadow .2s;
}
.char-card:hover {
    border-color: rgba(212, 175, 95, .4);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
.char-card.is-current {
    border-color: rgba(212, 175, 95, .6);
    box-shadow: 0 0 0 1px rgba(212, 175, 95, .18) inset;
}
.char-card.banned {
    opacity: .55; filter: grayscale(.6);
    border-color: #5a2a2a;
}
.char-card.banned .char-name { color: #808a99; text-decoration: line-through; }
.char-head {
    display: flex; gap: 12px; align-items: center;
    padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
    margin-bottom: 12px;
}
.class-icon {
    width: 48px; height: 48px; border-radius: 8px;
    background: var(--gold-dim);
    padding: 4px; flex: 0 0 auto;
}
.char-title { min-width: 0; flex: 1; }
.char-name {
    font-size: 16px; font-weight: 600; color: var(--txt);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 2px;
}
.char-sub { font-size: 12px; color: var(--txt-3); letter-spacing: 1px; }

.badge {
    display: inline-block; padding: 1px 7px; border-radius: 4px;
    font-size: 11px; font-weight: 500; letter-spacing: 0;
}
.badge-current { background: var(--gold-dim); color: var(--gold-hi); }
.badge-ban     { background: rgba(200, 60, 60, .18); color: #ff9090; }
.badge-master  {
    background: linear-gradient(135deg, #f0d578, #cf9e2c);
    color: #1a1205; font-weight: 700;
}
.badge-online {
    background: rgba(63, 191, 95, .18);
    color: #6fdc8c; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
.badge-online::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: #3fbf5f;
    box-shadow: 0 0 6px #3fbf5f;
    animation: badge-pulse 1.6s infinite;
}
@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

.char-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; margin-bottom: 10px;
}
.cs { display: flex; flex-direction: column; gap: 2px; }
.cs .k { font-size: 11px; color: var(--txt-3); letter-spacing: 1px; }
.cs .v { font-size: 14px; color: var(--txt); font-weight: 600; }
.cs .v.warn { color: #ff9060; }

.char-location {
    display: flex; gap: 8px; font-size: 13px;
    padding: 7px 0; border-top: 1px dashed var(--line-soft);
}
.char-location .k { color: var(--txt-3); flex: 0 0 40px; letter-spacing: 1px; }
.char-location .v { color: var(--txt); }
.char-location .guild-tag {
    display: inline-block; margin-left: 6px;
    padding: 0 6px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
    background: linear-gradient(135deg, #f0d578, #cf9e2c);
    color: #1a1205;
}
.char-ban-line {
    margin-top: 8px; padding: 6px 10px; border-radius: 6px;
    font-size: 12px; color: #ff9090;
    background: rgba(200, 60, 60, .1);
    border: 1px solid rgba(200, 60, 60, .25);
}
.char-actions {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    display: flex; gap: 8px;
}
.btn-small {
    display: inline-block; padding: 6px 16px; border-radius: 6px;
    font-size: 12px; font-weight: 600; letter-spacing: 1px;
    color: #1a1205; text-decoration: none;
    background: linear-gradient(180deg, #f2d695, #c69c4b);
    box-shadow: 0 2px 8px rgba(212, 175, 95, .2);
    transition: filter .15s;
}
.btn-small:hover { filter: brightness(1.1); color: #1a1205; }
.btn-disabled {
    display: inline-block; padding: 6px 14px; border-radius: 6px;
    font-size: 12px; color: var(--txt-3);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    cursor: not-allowed;
}

@media (max-width: 820px) {
    .char-grid { grid-template-columns: 1fr; }
    .char-stats { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   用户中心 · 手机适配（底部固定菜单栏 + 点击弹出菜单）
   ============================================================ */
/* 手机端专属组件, 默认(PC/宽屏)一律隐藏 —— 显示规则在下方媒体查询内 */
.user-bottombar, .user-sheet-mask, .user-sheet { display: none; }

@media (max-width: 820px) {
    .user-wrap { grid-template-columns: 1fr; }

    /* 侧栏整体退场, 由底部菜单栏接管 */
    .user-side { display: none; }

    body.uc { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

    .user-bottombar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 90;
        align-items: center; gap: 12px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(11, 14, 20, .96);
        border-top: 1px solid var(--line);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .ub-btn {
        padding: 9px 20px; border-radius: 8px;
        border: 1px solid var(--gold-lo);
        background: var(--gold-dim);
        color: var(--gold-hi);
        font-size: 14px; font-weight: 600; letter-spacing: 2px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .ub-btn:active { filter: brightness(1.2); }
    .ub-user {
        flex: 1; text-align: right;
        font-size: 13px; color: var(--txt-3);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ub-exit {
        padding: 8px 14px; border-radius: 8px;
        border: 1px solid rgba(208, 85, 85, .45);
        color: #f0b3b3; font-size: 13px;
        background: rgba(208, 85, 85, .08);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* 弹出菜单（底部抽屉） */
    .user-sheet-mask {
        display: none;
        position: fixed; inset: 0; z-index: 98;
        background: rgba(0, 0, 0, .55);
    }
    .user-sheet-mask.open { display: block; }

    .user-sheet {
        display: block;                     /* 覆盖 PC 端的默认隐藏 */
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 99;
        background: var(--panel);
        border-top: 1px solid var(--gold-lo);
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, .6);
        transform: translateY(105%);
        transition: transform .25s ease;
        padding: 0 10px calc(10px + env(safe-area-inset-bottom));
    }
    .user-sheet.open { transform: translateY(0); }
    .us-head {
        text-align: center;
        padding: 14px 0 10px;
        font-size: 13px; letter-spacing: 3px; color: var(--txt-3);
        border-bottom: 1px solid var(--line-soft);
    }
    .us-tabs { list-style: none; margin: 0; padding: 6px; }
    .us-tabs a {
        display: block;
        padding: 13px 16px;
        border-radius: 8px;
        color: var(--txt-2); text-decoration: none;
        font-size: 14.5px; letter-spacing: 2px;
    }
    .us-tabs a.active { color: var(--gold-hi); background: var(--gold-dim); }
    .us-tabs a:active { background: rgba(212, 175, 95, .1); }
    .us-exit {
        display: block; text-align: center;
        margin: 4px 8px 2px; padding: 12px;
        border-radius: 8px;
        color: #f0b3b3; text-decoration: none; font-size: 14px;
        border-top: 1px solid var(--line-soft);
    }
}
.online-icon  {
    color: #28a745; /* 或 #198754、#00c853 等 */
}