* {
    box-sizing: border-box;
}

:root {
    --bg: #0f1020;
    --panel: #171827;
    --panel-2: #222233;
    --text: #f5f1e8;
    --muted: #b8aecf;
    --gold: #e0ad45;
    --gold-light: #f0bf59;
    --purple: #9a7cff;
    --cyan: #6ee7ff;
    --border: rgba(255, 255, 255, 0.1);
    --danger: #ff7272;
    --success: #8ff0b2;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(224, 173, 69, 0.13), transparent 34%),
        radial-gradient(circle at bottom right, rgba(117, 84, 255, 0.14), transparent 42%),
        radial-gradient(circle at center, rgba(110, 231, 255, 0.04), transparent 35%),
        var(--bg);
    color: var(--text);
    font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
}

a {
    color: inherit;
}

.page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 36px 0 60px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.topbar h1 {
    margin: 0 0 8px;
    font-size: 32px;
    letter-spacing: 1px;
}

.topbar p {
    margin: 0;
    color: var(--muted);
}

.card {
    background: rgba(23, 24, 39, 0.88);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
}

.card h2 {
    margin: 0 0 22px;
    font-size: 26px;
}

.card h3 {
    margin: 0 0 14px;
    font-size: 20px;
}

.grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.character-card {
    min-height: 420px;
}

.realm {
    margin: 0 0 28px;
    color: var(--gold);
    font-size: 24px;
    font-weight: 800;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
}

.stat-row strong {
    color: var(--text);
    text-align: right;
}

.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 28px 0 22px;
}

button {
    width: 100%;
    border: none;
    border-radius: 12px;
    background: var(--gold);
    color: #16110a;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

button:hover {
    transform: translateY(-1px);
    background: var(--gold-light);
}

button.secondary,
button.ghost {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    border: 1px solid var(--border);
}

button.secondary:hover,
button.ghost:hover {
    background: rgba(255, 255, 255, 0.11);
}

button.ghost {
    width: auto;
    min-width: 90px;
}

input,
select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(10, 10, 20, 0.55);
    color: var(--text);
    padding: 13px 15px;
    font-size: 15px;
    outline: none;
}

input:focus,
select:focus {
    border-color: rgba(224, 173, 69, 0.65);
}

select option {
    background: #171827;
    color: var(--text);
}

.inline-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.travel-form {
    margin-top: 20px;
}

.travel-form label {
    display: block;
    color: var(--muted);
    margin-bottom: 8px;
}

.notice,
.error {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 700;
}

.notice {
    background: rgba(143, 240, 178, 0.12);
    border: 1px solid rgba(143, 240, 178, 0.35);
    color: var(--success);
}

.error {
    background: rgba(255, 114, 114, 0.12);
    border: 1px solid rgba(255, 114, 114, 0.35);
    color: var(--danger);
}

.muted {
    color: var(--muted);
    line-height: 1.75;
}

.list {
    display: grid;
    gap: 12px;
}

.item {
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--border);
}

.item-title {
    color: var(--gold);
    font-weight: 800;
    margin-bottom: 10px;
}

.item p {
    margin: 0 0 10px;
    line-height: 1.7;
}

.item span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.create-character {
    margin-bottom: 20px;
}

.create-character p {
    color: var(--muted);
    line-height: 1.8;
}

/* 宗门 / 功法共用区域 */

.sect-card,
.method-card,
.method-rank-card,
.sect-rank-card,
.history-card {
    margin-top: 20px;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.sect-current {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    padding: 22px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.14), rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(224, 173, 69, 0.22);
}

.sect-current h3 {
    color: var(--gold);
    font-size: 24px;
}

.motto {
    margin: 0 0 16px;
    color: var(--text);
    line-height: 1.7;
}

.mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mini-stats span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
    font-size: 14px;
}

.sect-split {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 22px;
}

.sect-create-form {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--border);
}

.sect-list {
    display: grid;
    gap: 12px;
}

.sect-list.compact {
    max-height: 360px;
    overflow: auto;
    padding-right: 4px;
}

.sect-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--border);
}

.sect-row strong {
    color: var(--gold);
    font-size: 18px;
}

.sect-row p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.sect-row form {
    min-width: 90px;
}

.reputation {
    min-width: 96px;
    text-align: right;
    color: var(--gold);
    font-weight: 800;
}

/* 功法系统 */

.method-card {
    border-color: rgba(154, 124, 255, 0.25);
    background:
        linear-gradient(135deg, rgba(154, 124, 255, 0.08), rgba(23, 24, 39, 0.88));
}

.method-rank-card {
    border-color: rgba(110, 231, 255, 0.18);
}

.method-card h2,
.method-rank-card h2 {
    color: #efe8ff;
}

.method-card .sect-create-form {
    border-color: rgba(154, 124, 255, 0.2);
    background:
        linear-gradient(135deg, rgba(154, 124, 255, 0.1), rgba(255, 255, 255, 0.035));
}

.method-card .item-title,
.method-rank-card .sect-row strong {
    color: #c9b8ff;
}

.method-rank-card .sect-row {
    align-items: flex-start;
}

.method-rank-card button.secondary {
    margin-top: 4px;
}

.method-rank-card .reputation {
    color: var(--cyan);
}

/* 世界历史 */

.timeline {
    display: grid;
    gap: 12px;
}

.timeline-event {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    align-items: start;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    border-left: 4px solid rgba(255, 255, 255, 0.2);
}

.timeline-event .year {
    color: var(--gold);
    font-weight: 900;
}

.timeline-event strong {
    color: var(--text);
}

.timeline-event p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.importance-4,
.importance-5 {
    background:
        linear-gradient(90deg, rgba(224, 173, 69, 0.11), rgba(255, 255, 255, 0.045));
    border-left-color: var(--gold);
}

/* Login / Register */

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.auth-card {
    width: min(430px, 100%);
    background: rgba(23, 24, 39, 0.9);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
}

.auth-card h1 {
    margin: 0 0 8px;
}

.auth-card p {
    color: var(--muted);
}

.auth-card form {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.auth-link {
    margin-top: 20px;
    color: var(--muted);
}

.auth-link a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 800;
}

/* Mobile */

@media (max-width: 900px) {
    .grid,
    .sect-split {
        grid-template-columns: 1fr;
    }

    .topbar,
    .sect-current,
    .sect-row {
        flex-direction: column;
        align-items: stretch;
    }

    .timeline-event {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .inline-form {
        flex-direction: column;
    }

    .actions {
        grid-template-columns: 1fr;
    }

    .reputation {
        text-align: left;
    }
}

/* =========================
   v0.4 洞府 / 遗产系统
   ========================= */

.legacy-card {
    margin-top: 20px;
    border-color: rgba(143, 240, 178, 0.22);
    background:
        linear-gradient(135deg, rgba(143, 240, 178, 0.07), rgba(23, 24, 39, 0.9));
}

.legacy-rank-card {
    margin-top: 20px;
    border-color: rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 35%),
        rgba(23, 24, 39, 0.88);
}

.legacy-card h2,
.legacy-rank-card h2 {
    color: #dfffe9;
}

.legacy-card h3 {
    color: var(--success);
}

.legacy-card .sect-create-form {
    border-color: rgba(143, 240, 178, 0.24);
    background:
        linear-gradient(135deg, rgba(143, 240, 178, 0.09), rgba(255, 255, 255, 0.035));
}

.legacy-card .item-title,
.legacy-rank-card .sect-row strong {
    color: var(--success);
}

.legacy-item {
    position: relative;
    overflow: hidden;
}

.legacy-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.09), transparent 40%);
    pointer-events: none;
}

.legacy-row {
    align-items: flex-start;
}

.legacy-row p {
    max-width: 820px;
}

.legacy-rank-card .reputation {
    color: var(--success);
    min-width: 130px;
}

.small-action {
    width: 220px;
    flex-shrink: 0;
}

.small-action button {
    white-space: nowrap;
}

.legacy-card .section-title-row {
    margin-bottom: 22px;
}

/* 让洞府、功法、宗门卡片之间更有层次 */
.method-card,
.legacy-card,
.sect-card {
    position: relative;
    overflow: hidden;
}

.method-card::before,
.legacy-card::before,
.sect-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    right: 26px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.28),
        transparent
    );
}

.legacy-card input::placeholder,
.method-card input::placeholder,
.sect-card input::placeholder {
    color: rgba(245, 241, 232, 0.42);
}

/* 世界历史里重要遗产事件更明显 */
.timeline-event.importance-5 {
    box-shadow: inset 0 0 0 1px rgba(224, 173, 69, 0.18);
}

.timeline-event.importance-4 {
    box-shadow: inset 0 0 0 1px rgba(143, 240, 178, 0.12);
}

/* Mobile 修正 */
@media (max-width: 900px) {
    .small-action {
        width: 100%;
    }

    .legacy-rank-card .reputation {
        min-width: auto;
        text-align: left;
    }
}

/* =========================
   v0.5 秘境挑战系统
   ========================= */

.three-actions {
    grid-template-columns: 1fr 1fr 1fr;
}

button.danger-action {
    background: linear-gradient(135deg, #e0ad45, #ff7272);
    color: #180b08;
}

button.danger-action:hover {
    background: linear-gradient(135deg, #f0bf59, #ff8f8f);
}

@media (max-width: 900px) {
    .three-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v0.6 切磋 / 江湖冲突系统
   ========================= */

.four-actions {
    grid-template-columns: 1fr 1fr;
}

button.battle-action {
    background: linear-gradient(135deg, #9a7cff, #6ee7ff);
    color: #0b1020;
}

button.battle-action:hover {
    background: linear-gradient(135deg, #b4a0ff, #9af0ff);
}

@media (max-width: 900px) {
    .four-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v0.7 世界地图 / 区域详情页
   ========================= */

.top-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 13px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    border: 1px solid var(--border);
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    transition: transform 0.15s ease, background 0.15s ease;
}

.nav-button:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.11);
}

.world-map-card,
.area-detail-card {
    margin-top: 20px;
}

.world-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.area-card {
    display: block;
    padding: 22px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.09), transparent 38%),
        rgba(255, 255, 255, 0.045);
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.area-card:hover,
.area-card.active {
    transform: translateY(-2px);
    border-color: rgba(224, 173, 69, 0.4);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.16), transparent 42%),
        rgba(255, 255, 255, 0.065);
}

.area-card h3 {
    margin: 0 0 16px;
    color: var(--gold);
    font-size: 24px;
}

.area-stats {
    display: grid;
    gap: 9px;
}

.area-stats span {
    color: var(--muted);
    font-size: 14px;
}

.area-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.area-detail-card h3 {
    color: var(--gold);
}

@media (max-width: 900px) {
    .top-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .nav-button {
        width: 100%;
    }

    .world-grid,
    .area-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v0.8 NPC / 世界自动事件系统
   ========================= */

button.world-action {
    min-width: 140px;
    background: linear-gradient(135deg, #6ee7ff, #e0ad45);
    color: #111019;
}

button.world-action:hover {
    background: linear-gradient(135deg, #9af0ff, #f0bf59);
}

@media (max-width: 900px) {
    button.world-action {
        width: 100%;
    }
}

/* =========================
   v0.9 排行榜 / 传奇人物榜
   ========================= */

.rank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.rank-card {
    margin-top: 20px;
    border-color: rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 36%),
        rgba(23, 24, 39, 0.88);
}

.rank-card h2 {
    color: var(--gold);
}

.wide-rank-card {
    margin-bottom: 20px;
}

.rank-list {
    display: grid;
    gap: 12px;
}

.rank-row {
    display: grid;
    grid-template-columns: 56px 1fr 120px;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--border);
}

.rank-number {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(224, 173, 69, 0.13);
    color: var(--gold);
    font-weight: 900;
}

.rank-main strong {
    color: var(--text);
    font-size: 18px;
}

.rank-main p {
    margin: 8px 0;
    color: var(--muted);
    line-height: 1.6;
}

.rank-main span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.rank-score {
    text-align: right;
    color: var(--gold);
    font-weight: 900;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .rank-grid {
        grid-template-columns: 1fr;
    }

    .rank-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .rank-number {
        width: auto;
        height: auto;
        padding: 8px 12px;
        border-radius: 999px;
        place-items: start;
    }

    .rank-score {
        text-align: left;
    }
}

/* =========================
   v1.0 资料页 / 历史档案系统
   ========================= */

.story-link {
    color: var(--gold);
    text-decoration: none;
    font-weight: 900;
}

.story-link:hover {
    text-decoration: underline;
}

.profile-hero-card {
    margin-top: 20px;
    border-color: rgba(224, 173, 69, 0.26);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.13), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.profile-hero-card h2 {
    margin-bottom: 10px;
    color: var(--gold);
    font-size: 34px;
}

.profile-subtitle {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 17px;
}

.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-stats span {
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
    font-size: 14px;
}

.profile-quote {
    margin: 22px 0 0;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--border);
    color: var(--text);
    line-height: 1.8;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.profile-section {
    margin-top: 20px;
}

.npc-profile {
    border-color: rgba(110, 231, 255, 0.28);
}

.npc-profile h2 {
    color: var(--cyan);
}

.sect-profile {
    border-color: rgba(224, 173, 69, 0.3);
}

.method-profile {
    border-color: rgba(154, 124, 255, 0.3);
}

.method-profile h2 {
    color: #c9b8ff;
}

.legacy-profile {
    border-color: rgba(143, 240, 178, 0.3);
}

.legacy-profile h2 {
    color: var(--success);
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-hero-card h2 {
        font-size: 28px;
    }
}

/* =========================
   v1.1 任务 / 悬赏系统
   ========================= */

.quest-control-card,
.quest-board-card {
    margin-top: 20px;
}

.quest-control-card {
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.quest-board-card {
    border-color: rgba(224, 173, 69, 0.18);
}

.quest-list {
    display: grid;
    gap: 14px;
}

.quest-card {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 20px;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.quest-title-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 10px;
}

.quest-title-row h3 {
    margin: 0;
    color: var(--gold);
}

.quest-status {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.13);
    color: var(--gold);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.quest-main p {
    color: var(--muted);
    line-height: 1.7;
}

.quest-actions {
    display: grid;
    gap: 10px;
    align-content: center;
}

.quest-card.status-completed {
    opacity: 0.72;
}

.quest-card.status-completed .quest-status {
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
}

.quest-card.status-claimed .quest-status {
    background: rgba(154, 124, 255, 0.13);
    color: #c9b8ff;
}

@media (max-width: 900px) {
    .quest-card {
        grid-template-columns: 1fr;
    }

    .quest-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================
   v1.3 悬赏详情页 / 任务历史档案
   ========================= */

.quest-profile-card {
    margin-top: 20px;
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.quest-profile-card h2 {
    color: var(--gold);
}

.big-status {
    font-size: 15px;
    padding: 10px 14px;
}

.quest-profile-card .profile-quote {
    margin-bottom: 20px;
}

.quest-profile-card .item-title {
    color: var(--cyan);
}

/* =========================
   v1.4 世界历史详情页 / 历史事件档案
   ========================= */

.history-profile-card {
    margin-top: 20px;
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.09), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.history-event-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.history-event-header h2 {
    color: var(--gold);
    margin-bottom: 10px;
}

.history-badge {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.13);
    color: var(--gold);
    font-weight: 900;
    white-space: nowrap;
}

.entity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.entity-panel {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.entity-panel h3 {
    color: var(--gold);
    margin-bottom: 14px;
}

.entity-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.entity-chip {
    display: inline-flex;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    border: 1px solid var(--border);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
}

.entity-chip:hover {
    border-color: rgba(224, 173, 69, 0.45);
    color: var(--gold);
}

.mini-link {
    display: inline-flex;
    margin-top: 8px;
    color: var(--gold);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.mini-link:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .history-event-header {
        flex-direction: column;
    }

    .entity-grid {
        grid-template-columns: 1fr;
    }

    .history-badge {
        width: 100%;
        text-align: center;
    }
}

/* =========================
   v1.5 历史搜索系统
   ========================= */

.history-search-card {
    margin-top: 20px;
    border-color: rgba(224, 173, 69, 0.2);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.history-search-card h2 {
    color: var(--gold);
}

.history-search-form {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 12px;
    margin-bottom: 14px;
}

.search-entity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.search-entity-grid section {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.search-entity-grid h3 {
    margin: 0 0 14px;
    color: var(--gold);
}

@media (max-width: 900px) {
    .history-search-form {
        grid-template-columns: 1fr;
    }

    .search-entity-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v1.6 世界编年史页面
   ========================= */

.chronicle-summary-card,
.chronicle-type-card,
.chronicle-card {
    margin-top: 20px;
}

.chronicle-summary-card {
    border-color: rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.1), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.chronicle-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.summary-box {
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
    display: grid;
    gap: 8px;
}

.summary-box strong {
    color: var(--gold);
    font-size: 30px;
}

.summary-box span {
    color: var(--muted);
}

.event-type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.event-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.055);
}

.event-type-pill span {
    color: var(--muted);
}

.event-type-pill strong {
    color: var(--gold);
}

.chronicle-list {
    display: grid;
    gap: 24px;
}

.chronicle-year-block {
    padding: 22px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top left, rgba(224, 173, 69, 0.07), transparent 34%),
        rgba(255, 255, 255, 0.035);
}

.chronicle-year-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.chronicle-year-header h3 {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 26px;
}

.chronicle-year-header p {
    margin: 0;
    color: var(--muted);
}

.major-badge {
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.13);
    color: var(--gold);
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .chronicle-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .chronicle-year-header {
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .chronicle-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v1.7 角色结局 / 飞升 / 转世系统
   ========================= */

.ending-card,
.legends-card {
    margin-top: 20px;
    border-color: rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.09), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.ending-card h2,
.legends-card h2 {
    color: var(--gold);
}

.ending-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.legend-list {
    display: grid;
    gap: 14px;
}

.legend-card {
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

.legend-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.legend-header h3 {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 22px;
}

.legend-header p {
    margin: 0;
    color: var(--muted);
}

.legend-year {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.13);
    color: var(--gold);
    font-weight: 900;
    white-space: nowrap;
}

.legend-summary {
    color: var(--muted);
    line-height: 1.8;
    margin: 0 0 14px;
}

.legend-card.ending-飞升 {
    border-color: rgba(110, 231, 255, 0.28);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.1), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

.legend-card.ending-飞升 .legend-header h3,
.legend-card.ending-飞升 .legend-year {
    color: var(--cyan);
}

.legend-card.ending-陨落 {
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.09), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

.legend-card.ending-陨落 .legend-header h3,
.legend-card.ending-陨落 .legend-year {
    color: var(--danger);
}

.legend-card.ending-退隐 {
    border-color: rgba(143, 240, 178, 0.25);
}

.legend-card.ending-退隐 .legend-header h3,
.legend-card.ending-退隐 .legend-year {
    color: var(--success);
}

@media (max-width: 900px) {
    .ending-grid {
        grid-template-columns: 1fr;
    }

    .legend-header {
        flex-direction: column;
    }
}

/* =========================
   v1.8 转世血脉 / 前世传承系统
   ========================= */

.reincarnation-card {
    margin-top: 20px;
    border-color: rgba(154, 124, 255, 0.28);
    background:
        radial-gradient(circle at top right, rgba(154, 124, 255, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.reincarnation-card h2 {
    color: #c9b8ff;
}

.reincarnation-card .legend-card {
    border-color: rgba(154, 124, 255, 0.26);
    background:
        radial-gradient(circle at top right, rgba(154, 124, 255, 0.1), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

.reincarnation-card .legend-header h3,
.reincarnation-card .legend-year {
    color: #c9b8ff;
}

.reincarnation-hint {
    margin: 18px 0;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(154, 124, 255, 0.28);
    background:
        radial-gradient(circle at top right, rgba(154, 124, 255, 0.12), transparent 38%),
        rgba(255, 255, 255, 0.045);
}

.reincarnation-hint .item-title {
    color: #c9b8ff;
}

.reincarnation-hint p {
    color: var(--muted);
    line-height: 1.8;
}

.reincarnation-hint span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

/* =========================
   v1.9 血脉谱系 / 多世传承系统
   ========================= */

.bloodline-summary-card,
.bloodline-card,
.bloodline-mini-card {
    margin-top: 20px;
    border-color: rgba(154, 124, 255, 0.28);
    background:
        radial-gradient(circle at top right, rgba(154, 124, 255, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.bloodline-summary-card h2,
.bloodline-card h2,
.bloodline-mini-card h2 {
    color: #c9b8ff;
}

.bloodline-timeline {
    position: relative;
    display: grid;
    gap: 20px;
}

.bloodline-timeline::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(
        180deg,
        rgba(154, 124, 255, 0.9),
        rgba(224, 173, 69, 0.4),
        rgba(110, 231, 255, 0.7)
    );
}

.bloodline-life {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: start;
}

.bloodline-node {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(154, 124, 255, 0.18);
    border: 1px solid rgba(154, 124, 255, 0.42);
    color: #c9b8ff;
    font-weight: 900;
}

.bloodline-content {
    padding: 20px;
    border-radius: 18px;
    border: 1px solid rgba(154, 124, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(154, 124, 255, 0.09), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

.bloodline-life.current-life .bloodline-node {
    background: rgba(110, 231, 255, 0.15);
    border-color: rgba(110, 231, 255, 0.42);
    color: var(--cyan);
}

.bloodline-life.current-life .bloodline-content {
    border-color: rgba(110, 231, 255, 0.24);
}

@media (max-width: 900px) {
    .bloodline-life {
        grid-template-columns: 1fr;
    }

    .bloodline-timeline::before {
        display: none;
    }

    .bloodline-node {
        width: auto;
        height: auto;
        border-radius: 999px;
        padding: 10px 14px;
        place-items: start;
    }
}

/* =========================
   v2.0 首页重构 / 游戏主面板
   ========================= */

.game-topbar {
    align-items: flex-start;
}

.game-dashboard {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.dashboard-left,
.dashboard-center,
.dashboard-right {
    display: grid;
    gap: 20px;
}

.sticky-card {
    position: sticky;
    top: 18px;
}

.action-panel {
    border-color: rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 36%),
        rgba(23, 24, 39, 0.9);
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.full-nav {
    width: 100%;
    min-height: 45px;
}

.two-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.small-scroll {
    max-height: 300px;
    overflow: auto;
    padding-right: 4px;
}

.world-shortcuts {
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 36%),
        rgba(23, 24, 39, 0.9);
}

.shortcut-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.shortcut-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    transition: transform 0.15s ease, background 0.15s ease;
}

.shortcut-grid a:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.1);
    color: var(--gold);
}

.compact-history .timeline-event {
    grid-template-columns: 90px 1fr;
    padding: 14px;
}

.compact-history .timeline-event p {
    font-size: 14px;
}

.start-panel {
    max-width: 880px;
    margin: 0 auto 20px;
}

.dashboard-right .card h2,
.dashboard-left .card h2 {
    font-size: 22px;
}

.dashboard-right .legend-card,
.dashboard-right .item {
    padding: 14px;
}

.dashboard-right .legend-header h3 {
    font-size: 17px;
}

.dashboard-right .legend-year {
    font-size: 12px;
    padding: 6px 9px;
}

@media (max-width: 1280px) {
    .game-dashboard {
        grid-template-columns: 290px minmax(0, 1fr);
    }

    .dashboard-right {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-right .history-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .game-dashboard {
        grid-template-columns: 1fr;
    }

    .sticky-card {
        position: static;
    }

    .dashboard-right {
        grid-template-columns: 1fr;
    }

    .action-grid,
    .two-panel {
        grid-template-columns: 1fr;
    }

    .compact-history .timeline-event {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .shortcut-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v2.1 统一导航栏 / 页面布局组件化
   ========================= */

.unified-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 760px;
}

.unified-nav .nav-button {
    min-width: auto;
    padding: 10px 13px;
    font-size: 14px;
}

.nav-form {
    margin: 0;
}

.nav-small-button {
    width: auto;
    min-width: 84px;
    padding: 10px 13px;
    font-size: 14px;
}

.game-topbar .unified-nav {
    max-width: 880px;
}

@media (max-width: 900px) {
    .unified-nav {
        max-width: none;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .unified-nav .nav-button,
    .unified-nav .nav-small-button,
    .nav-form {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .unified-nav {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v2.2 数据库初始化统一化 / 系统状态页
   ========================= */

.system-card {
    margin-top: 20px;
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.system-card h2 {
    color: var(--cyan);
}

.system-table-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.system-table-card {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.system-table-card strong {
    color: var(--text);
}

.system-table-card p {
    margin: 8px 0 0;
    color: var(--muted);
}

.system-table-card span {
    min-width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-weight: 900;
}

.system-table-card.ok {
    border-color: rgba(143, 240, 178, 0.18);
}

.system-table-card.ok span {
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
}

.system-table-card.bad {
    border-color: rgba(255, 114, 114, 0.28);
}

.system-table-card.bad span {
    background: rgba(255, 114, 114, 0.12);
    color: var(--danger);
}

@media (max-width: 980px) {
    .system-table-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

/* =========================
   v2.3 错误处理页面 / 404 / 500 友好提示
   ========================= */

.error-page-card {
    margin-top: 20px;
    text-align: center;
    border-color: rgba(255, 114, 114, 0.26);
    background:
        radial-gradient(circle at top, rgba(255, 114, 114, 0.1), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.error-symbol {
    width: 110px;
    height: 110px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 114, 114, 0.13);
    border: 1px solid rgba(255, 114, 114, 0.35);
    color: var(--danger);
    font-size: 34px;
    font-weight: 900;
}

.error-page-card h2 {
    color: var(--danger);
    font-size: 32px;
    margin-bottom: 12px;
}

.error-page-message {
    max-width: 720px;
    margin: 0 auto 22px;
    color: var(--muted);
    line-height: 1.8;
}

.error-detail-box {
    max-width: 900px;
    margin: 22px auto;
    text-align: left;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 114, 114, 0.22);
    background: rgba(255, 255, 255, 0.045);
}

.error-detail-box h3 {
    color: var(--danger);
    margin-top: 0;
}

.error-detail-box pre,
.error-trace-card pre {
    white-space: pre-wrap;
    word-break: break-word;
    color: #ffd6d6;
    line-height: 1.55;
    font-size: 13px;
    overflow: auto;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.error-trace-card {
    margin-top: 20px;
    border-color: rgba(255, 114, 114, 0.2);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.error-trace-card h2 {
    color: var(--danger);
}

.system-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.system-actions .small-action {
    width: 190px;
}

@media (max-width: 900px) {
    .error-actions,
    .system-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .system-actions .small-action {
        width: 100%;
    }
}

/* =========================
   v2.4 开发者工具页 / 快速测试按钮
   ========================= */

.dev-card {
    margin-top: 20px;
    border-color: rgba(154, 124, 255, 0.24);
    background:
        radial-gradient(circle at top right, rgba(154, 124, 255, 0.09), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.dev-card h2 {
    color: #c9b8ff;
}

.dev-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dev-action-list {
    display: grid;
    gap: 16px;
}

.dev-form {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(154, 124, 255, 0.2);
    background: rgba(255, 255, 255, 0.045);
}

.dev-form h3 {
    margin: 0;
    color: #c9b8ff;
}

.dev-form p {
    margin: 0;
}

@media (max-width: 900px) {
    .dev-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v2.5 世界档案导出 / 备份系统
   ========================= */

.export-card {
    margin-top: 20px;
    border-color: rgba(143, 240, 178, 0.22);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.export-card h2 {
    color: var(--success);
}

.export-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.export-actions .small-action {
    width: 150px;
}

.export-table-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.export-table-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(143, 240, 178, 0.18);
    background: rgba(255, 255, 255, 0.045);
    text-decoration: none;
    color: var(--text);
    transition: transform 0.15s ease, background 0.15s ease;
}

.export-table-card:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
}

.export-table-card strong {
    color: var(--text);
    font-size: 14px;
}

.export-table-card span {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
    font-weight: 900;
}

.export-link-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.export-list {
    display: grid;
    gap: 12px;
}

.export-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.export-row strong {
    color: var(--success);
}

.export-row p {
    margin: 8px 0 0;
    color: var(--muted);
}

.export-row span {
    color: var(--gold);
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .export-table-grid,
    .export-link-grid {
        grid-template-columns: 1fr 1fr;
    }

    .export-actions {
        justify-content: stretch;
    }

    .export-actions .small-action,
    .export-actions .nav-button {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .export-table-grid,
    .export-link-grid {
        grid-template-columns: 1fr;
    }

    .export-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================
   v2.6 管理员清理工具 / 测试资料整理
   ========================= */

.cleanup-card,
.cleanup-danger-card {
    margin-top: 20px;
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.cleanup-card h2 {
    color: var(--gold);
}

.cleanup-danger-card {
    border-color: rgba(255, 114, 114, 0.3);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.1), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.cleanup-danger-card h2 {
    color: var(--danger);
}

.cleanup-count-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.cleanup-count-card {
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.cleanup-count-card span {
    color: var(--muted);
    font-size: 14px;
}

.cleanup-count-card strong {
    color: var(--gold);
}

.cleanup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.cleanup-form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.danger-cleanup-form {
    max-width: 520px;
}

@media (max-width: 980px) {
    .cleanup-grid {
        grid-template-columns: 1fr;
    }

    .cleanup-count-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

/* =========================
   v2.7 游戏设置 / 平衡参数页面
   ========================= */

.settings-card {
    margin-top: 20px;
    border-color: rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.settings-card h2 {
    color: var(--gold);
}

.settings-grid {
    display: grid;
    gap: 14px;
}

.setting-row {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.setting-row strong {
    color: var(--text);
    font-size: 17px;
}

.setting-row p {
    margin: 8px 0;
    color: var(--muted);
    line-height: 1.6;
}

.setting-row span {
    color: var(--gold);
    font-size: 13px;
    font-weight: 800;
}

.settings-submit {
    margin-top: 20px;
    max-width: 220px;
}

@media (max-width: 760px) {
    .setting-row {
        grid-template-columns: 1fr;
    }

    .settings-submit {
        max-width: none;
    }
}

/* =========================
   v2.9 开发模式开关 / 隐藏危险工具
   ========================= */

.dev-nav-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 114, 114, 0.22);
    background: rgba(255, 114, 114, 0.06);
}

.dev-mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 114, 114, 0.14);
    color: var(--danger);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}

.dev-nav-button {
    border-color: rgba(255, 114, 114, 0.2);
}

.settings-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.settings-actions .small-action {
    width: 170px;
}

@media (max-width: 900px) {
    .dev-nav-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .dev-mode-badge {
        grid-column: 1 / -1;
    }

    .settings-actions {
        width: 100%;
        flex-direction: column;
    }

    .settings-actions .small-action {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .dev-nav-group {
        grid-template-columns: 1fr;
    }

    .dev-mode-badge {
        grid-column: auto;
    }
}

/* =========================
   v3.0 正式测试前健康检查
   ========================= */

.health-summary-card,
.health-card,
.health-danger-card {
    margin-top: 20px;
}

.health-summary-card,
.health-card {
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.health-danger-card {
    border-color: rgba(255, 114, 114, 0.32);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.1), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.health-summary-card h2,
.health-card h2 {
    color: var(--cyan);
}

.health-danger-card h2 {
    color: var(--danger);
}

.health-list {
    display: grid;
    gap: 12px;
}

.health-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.health-row strong {
    color: var(--text);
}

.health-row p {
    margin: 8px 0;
    color: var(--muted);
}

.health-row span {
    color: var(--gold);
    font-size: 13px;
    word-break: break-word;
}

.health-row.ok {
    border-color: rgba(143, 240, 178, 0.18);
}

.health-row.bad {
    border-color: rgba(255, 114, 114, 0.28);
}

.health-badge {
    min-width: 58px;
    min-height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-weight: 900;
}

.health-row.ok .health-badge {
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
}

.health-row.bad .health-badge {
    background: rgba(255, 114, 114, 0.12);
    color: var(--danger);
}

@media (max-width: 700px) {
    .health-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .health-badge {
        width: 100%;
    }
}

/* =========================
   v3.2 测试路线页 / 功能验收清单
   ========================= */

.test-summary-card,
.test-card {
    margin-top: 20px;
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.test-summary-card h2,
.test-card h2 {
    color: var(--gold);
}

.test-list {
    display: grid;
    gap: 12px;
}

.test-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.test-row.ok {
    border-color: rgba(143, 240, 178, 0.16);
}

.test-row.bad {
    border-color: rgba(255, 114, 114, 0.26);
}

.test-title-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.test-main strong {
    color: var(--text);
    font-size: 17px;
}

.test-main p {
    margin: 8px 0;
    color: var(--muted);
    line-height: 1.6;
}

.test-main span {
    color: var(--gold);
    font-size: 13px;
    font-weight: 800;
}

.test-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.test-badge.ok {
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
}

.test-badge.bad {
    background: rgba(255, 114, 114, 0.12);
    color: var(--danger);
}

.test-actions {
    display: grid;
}

@media (max-width: 760px) {
    .test-row {
        grid-template-columns: 1fr;
    }

    .test-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================
   v3.3 最终启动前 Checklist / 维护指南页
   ========================= */

.checklist-summary-card,
.checklist-card,
.checklist-danger-card {
    margin-top: 20px;
}

.checklist-summary-card,
.checklist-card {
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.checklist-danger-card {
    border-color: rgba(255, 114, 114, 0.3);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.09), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.checklist-summary-card h2,
.checklist-card h2 {
    color: var(--cyan);
}

.checklist-danger-card h2 {
    color: var(--danger);
}

.checklist-list {
    display: grid;
    gap: 14px;
}

.checklist-row {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.checklist-row strong {
    color: var(--text);
    font-size: 17px;
}

.checklist-row p {
    color: var(--muted);
    line-height: 1.7;
}

.command-box {
    margin: 14px 0;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(110, 231, 255, 0.22);
    background: rgba(0, 0, 0, 0.22);
    overflow: auto;
}

.command-box code {
    color: var(--cyan);
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.small-command {
    margin-bottom: 0;
}

/* =========================
   v3.4 版本信息 / 更新日志页面
   ========================= */

.about-hero-card,
.about-card {
    margin-top: 20px;
}

.about-hero-card {
    border-color: rgba(224, 173, 69, 0.28);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.about-hero-card h2,
.about-card h2 {
    color: var(--gold);
}

.about-lead {
    color: var(--muted);
    line-height: 1.9;
    font-size: 17px;
    max-width: 900px;
}

.about-card {
    border-color: rgba(224, 173, 69, 0.2);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.changelog-list {
    display: grid;
    gap: 18px;
}

.changelog-block {
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.changelog-header h3 {
    margin: 0 0 8px;
    color: var(--gold);
}

.changelog-header p {
    margin: 0 0 14px;
    color: var(--muted);
}

@media (max-width: 980px) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

/* =========================
   v3.5 测试结果记录系统
   ========================= */

.test-record-form {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.test-record-form select,
.test-record-form input {
    min-height: 42px;
}

.test-result-list {
    display: grid;
    gap: 14px;
}

.test-result-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.test-result-row.result-PASS {
    border-color: rgba(143, 240, 178, 0.22);
}

.test-result-row.result-FAIL {
    border-color: rgba(255, 114, 114, 0.32);
}

.test-result-row.result-SKIP {
    border-color: rgba(224, 173, 69, 0.22);
}

.test-badge.pass {
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
}

.test-badge.fail {
    background: rgba(255, 114, 114, 0.12);
    color: var(--danger);
}

.test-badge.skip {
    background: rgba(224, 173, 69, 0.12);
    color: var(--gold);
}

.test-note {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--border);
    color: var(--text);
    line-height: 1.7;
}

@media (max-width: 760px) {
    .test-result-row {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v3.6 Bug 记录 / 问题追踪系统
   ========================= */

.bug-summary-card,
.bug-card {
    margin-top: 20px;
    border-color: rgba(255, 114, 114, 0.24);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.08), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.bug-summary-card h2,
.bug-card h2 {
    color: var(--danger);
}

.bug-form {
    display: grid;
    gap: 12px;
}

.bug-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 120px;
}

.bug-list {
    display: grid;
    gap: 14px;
}

.bug-row {
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 20px;
    align-items: start;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 114, 114, 0.22);
    background: rgba(255, 255, 255, 0.045);
}

.bug-row.bug-fixed {
    opacity: 0.72;
    border-color: rgba(143, 240, 178, 0.22);
}

.bug-row.bug-wontfix {
    opacity: 0.62;
    border-color: rgba(224, 173, 69, 0.22);
}

.bug-title-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.bug-title-row strong {
    color: var(--text);
    font-size: 17px;
}

.bug-main p {
    color: var(--muted);
    line-height: 1.7;
}

.bug-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bug-severity,
.bug-status {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.bug-severity {
    background: rgba(255, 114, 114, 0.12);
    color: var(--danger);
}

.bug-status {
    background: rgba(224, 173, 69, 0.12);
    color: var(--gold);
}

.bug-row.bug-fixed .bug-status {
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
}

.bug-actions {
    display: grid;
    gap: 10px;
}

.bug-actions form {
    display: grid;
    gap: 8px;
}

.bug-delete-form input {
    min-height: 40px;
}

@media (max-width: 900px) {
    .bug-row {
        grid-template-columns: 1fr;
    }

    .bug-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================
   v3.7 测试报告 / 验收总览页面
   ========================= */

.qa-hero-card,
.qa-card {
    margin-top: 20px;
}

.qa-hero-card {
    border-color: rgba(110, 231, 255, 0.24);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.1), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.qa-hero-card h2,
.qa-card h2 {
    color: var(--cyan);
}

.qa-hero-card.readiness-BLOCKED,
.qa-hero-card.readiness-NEED_FIX {
    border-color: rgba(255, 114, 114, 0.3);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.1), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.qa-hero-card.readiness-BLOCKED h2,
.qa-hero-card.readiness-NEED_FIX h2 {
    color: var(--danger);
}

.qa-hero-card.readiness-READY {
    border-color: rgba(143, 240, 178, 0.28);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.1), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.qa-hero-card.readiness-READY h2 {
    color: var(--success);
}

.qa-card {
    border-color: rgba(110, 231, 255, 0.2);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.qa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.compact-bug-row {
    grid-template-columns: 1fr;
}

@media (max-width: 980px) {
    .qa-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v4.0 战斗系统基础版
   ========================= */

.battle-hero-card,
.battle-card {
    margin-top: 20px;
}

.battle-hero-card {
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.1), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.battle-hero-card h2,
.battle-card h2 {
    color: var(--danger);
}

.battle-power {
    min-width: 96px;
    min-height: 96px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 114, 114, 0.14);
    border: 1px solid rgba(255, 114, 114, 0.35);
    color: var(--danger);
    font-size: 30px;
    font-weight: 900;
}

.battle-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.battle-stat {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 114, 114, 0.18);
    background: rgba(255, 255, 255, 0.045);
    display: grid;
    gap: 8px;
    text-align: center;
}

.battle-stat strong {
    color: var(--danger);
    font-size: 26px;
}

.battle-stat span {
    color: var(--muted);
}

.battle-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 20px;
}

.battle-card {
    border-color: rgba(255, 114, 114, 0.2);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.battle-action-list {
    display: grid;
    gap: 14px;
}

.battle-action-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 114, 114, 0.2);
    background: rgba(255, 255, 255, 0.045);
}

.battle-action-card h3 {
    color: var(--danger);
    margin: 0;
}

.battle-action-card p {
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
}

.battle-log-list {
    display: grid;
    gap: 12px;
}

.battle-log {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.battle-log.result-victory {
    border-color: rgba(143, 240, 178, 0.24);
}

.battle-log.result-defeat {
    border-color: rgba(255, 114, 114, 0.28);
}

.battle-log-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 10px;
}

.battle-log-header strong {
    color: var(--text);
}

.battle-log-header span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.12);
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
}

.battle-log.result-victory .battle-log-header span {
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
}

.battle-log.result-defeat .battle-log-header span {
    background: rgba(255, 114, 114, 0.12);
    color: var(--danger);
}

.battle-log p {
    color: var(--muted);
    line-height: 1.7;
}

@media (max-width: 980px) {
    .battle-grid {
        grid-template-columns: 1fr;
    }

    .battle-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .battle-power {
        min-width: 76px;
        min-height: 76px;
        font-size: 24px;
    }
}

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

    .battle-log-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================
   v4.2 秘境挑战接入战斗系统
   ========================= */

.battle-log.result-victory .mini-stats span:nth-child(1) {
    border-color: rgba(143, 240, 178, 0.18);
}

.battle-action-card:nth-child(4) {
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

/* =========================
   v4.3 悬赏完成接入战斗系统
   ========================= */

.battle-action-card:nth-child(5) {
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

.battle-log-header strong {
    line-height: 1.5;
}

/* =========================
   v4.4 战斗详情页 / 战斗档案系统
   ========================= */

.battle-profile-hero,
.battle-profile-card {
    margin-top: 20px;
}

.battle-profile-hero {
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.1), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.battle-profile-hero.result-victory {
    border-color: rgba(143, 240, 178, 0.28);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.1), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.battle-profile-hero h2,
.battle-profile-card h2 {
    color: var(--danger);
}

.battle-profile-hero.result-victory h2 {
    color: var(--success);
}

.battle-profile-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.battle-result-badge {
    min-width: 96px;
    min-height: 56px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 114, 114, 0.12);
    color: var(--danger);
    font-weight: 900;
}

.battle-result-badge.result-victory {
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
}

.battle-result-badge.result-draw {
    background: rgba(224, 173, 69, 0.12);
    color: var(--gold);
}

.battle-profile-card {
    border-color: rgba(255, 114, 114, 0.2);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.battle-versus-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.battle-side-card {
    padding: 20px;
    border-radius: 18px;
    border: 1px solid rgba(143, 240, 178, 0.22);
    background: rgba(255, 255, 255, 0.045);
}

.battle-side-card h3 {
    color: var(--success);
}

.enemy-side {
    border-color: rgba(255, 114, 114, 0.26);
}

.enemy-side h3 {
    color: var(--danger);
}

.battle-power-compare {
    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    gap: 16px;
    align-items: center;
}

.power-box {
    padding: 24px;
    border-radius: 18px;
    border: 1px solid rgba(143, 240, 178, 0.22);
    background: rgba(255, 255, 255, 0.045);
    display: grid;
    gap: 8px;
    text-align: center;
}

.power-box strong {
    color: var(--success);
    font-size: 36px;
}

.power-box span {
    color: var(--muted);
}

.power-box.enemy {
    border-color: rgba(255, 114, 114, 0.26);
}

.power-box.enemy strong {
    color: var(--danger);
}

.versus-symbol {
    display: grid;
    place-items: center;
    color: var(--gold);
    font-weight: 900;
    font-size: 24px;
}

.battle-power-bar {
    margin: 20px 0;
    height: 18px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 114, 114, 0.18);
    border: 1px solid var(--border);
}

.battle-power-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(143, 240, 178, 0.9), rgba(110, 231, 255, 0.8));
}

.battle-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 900px) {
    .battle-profile-header,
    .battle-versus-grid,
    .battle-power-compare,
    .battle-profile-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .battle-result-badge {
        width: 100%;
    }

    .versus-symbol {
        min-height: 48px;
    }
}

/* =========================
   v4.5 战斗排行榜 / 战绩统计系统
   ========================= */

.battle-ranking-hero,
.battle-ranking-card {
    margin-top: 20px;
}

.battle-ranking-hero {
    border-color: rgba(255, 114, 114, 0.3);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.1), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.battle-ranking-hero h2,
.battle-ranking-card h2 {
    color: var(--danger);
}

.battle-ranking-card {
    border-color: rgba(255, 114, 114, 0.22);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.battle-ranking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.battle-ranking-card .rank-row {
    grid-template-columns: 56px 1fr 140px;
}

@media (max-width: 980px) {
    .battle-ranking-grid {
        grid-template-columns: 1fr;
    }

    .battle-ranking-card .rank-row {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v4.6 装备 / 法器基础系统
   ========================= */

.artifact-hero-card,
.artifact-card {
    margin-top: 20px;
}

.artifact-hero-card {
    border-color: rgba(224, 173, 69, 0.28);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.artifact-hero-card h2,
.artifact-card h2 {
    color: var(--gold);
}

.artifact-card {
    border-color: rgba(224, 173, 69, 0.2);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.artifact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.artifact-item {
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.06), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

.artifact-item.equipped {
    border-color: rgba(143, 240, 178, 0.26);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.08), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

.artifact-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.artifact-header h3 {
    margin: 0 0 8px;
    color: var(--gold);
}

.artifact-header p {
    margin: 0;
    color: var(--muted);
}

.artifact-header span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.12);
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.artifact-item.equipped .artifact-header span {
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
}

.artifact-item > p {
    color: var(--muted);
    line-height: 1.7;
}

.artifact-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.discard-form {
    display: grid;
    gap: 8px;
}

.discard-form input {
    min-height: 40px;
}

.grade-天品 {
    border-color: rgba(110, 231, 255, 0.34);
}

.grade-地品 {
    border-color: rgba(154, 124, 255, 0.32);
}

.grade-玄品 {
    border-color: rgba(224, 173, 69, 0.32);
}

.profile-artifact-grid {
    margin-top: 18px;
}

@media (max-width: 900px) {
    .artifact-grid,
    .artifact-actions {
        grid-template-columns: 1fr;
    }

    .artifact-header {
        flex-direction: column;
    }
}

/* =========================
   v4.8 法器详情页 / 法器图鉴系统
   ========================= */

.artifact-profile-hero,
.artifact-profile-card {
    margin-top: 20px;
}

.artifact-profile-hero {
    border-color: rgba(224, 173, 69, 0.3);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.artifact-profile-hero h2,
.artifact-profile-card h2 {
    color: var(--gold);
}

.artifact-profile-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.artifact-equipped-badge,
.artifact-idle-badge {
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 900;
    white-space: nowrap;
}

.artifact-equipped-badge {
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
}

.artifact-idle-badge {
    background: rgba(224, 173, 69, 0.12);
    color: var(--gold);
}

.artifact-profile-card {
    border-color: rgba(224, 173, 69, 0.2);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.artifact-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.artifact-mini-list {
    display: grid;
    gap: 12px;
}

.artifact-mini-list.wide-list {
    grid-template-columns: repeat(2, 1fr);
}

.artifact-mini-item {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.06), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

.artifact-mini-item.equipped {
    border-color: rgba(143, 240, 178, 0.24);
}

.artifact-mini-item strong {
    color: var(--gold);
    font-size: 17px;
}

.artifact-mini-item p {
    color: var(--muted);
    margin: 8px 0 12px;
}

.artifact-profile-hero.grade-天品,
.artifact-mini-item.grade-天品 {
    border-color: rgba(110, 231, 255, 0.36);
}

.artifact-profile-hero.grade-地品,
.artifact-mini-item.grade-地品 {
    border-color: rgba(154, 124, 255, 0.34);
}

.artifact-profile-hero.grade-玄品,
.artifact-mini-item.grade-玄品 {
    border-color: rgba(224, 173, 69, 0.34);
}

@media (max-width: 900px) {
    .artifact-profile-header,
    .artifact-profile-grid,
    .artifact-mini-list.wide-list {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .artifact-equipped-badge,
    .artifact-idle-badge {
        width: 100%;
        text-align: center;
    }
}

/* =========================
   v4.9 法器排行榜 / 天下法器榜
   ========================= */

.artifact-ranking-hero,
.artifact-ranking-card {
    margin-top: 20px;
}

.artifact-ranking-hero {
    border-color: rgba(224, 173, 69, 0.3);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.artifact-ranking-hero h2,
.artifact-ranking-card h2 {
    color: var(--gold);
}

.artifact-ranking-card {
    border-color: rgba(224, 173, 69, 0.2);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.artifact-ranking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.compact-artifact-rank {
    grid-template-columns: 52px 1fr 110px;
}

@media (max-width: 980px) {
    .artifact-ranking-grid {
        grid-template-columns: 1fr;
    }

    .compact-artifact-rank {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v5.0 背包 / 物品系统基础版
   ========================= */

.inventory-hero-card,
.inventory-card {
    margin-top: 20px;
}

.inventory-hero-card {
    border-color: rgba(143, 240, 178, 0.28);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.1), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.inventory-hero-card h2,
.inventory-card h2 {
    color: var(--success);
}

.inventory-card {
    border-color: rgba(143, 240, 178, 0.2);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.inventory-item {
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.06), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

.inventory-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.inventory-header h3 {
    margin: 0 0 8px;
    color: var(--success);
}

.inventory-header p {
    margin: 0;
    color: var(--muted);
}

.inventory-header span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.inventory-item > p {
    color: var(--muted);
    line-height: 1.7;
}

.inventory-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.inventory-item.type-丹药,
.inventory-item.type-灵草 {
    border-color: rgba(143, 240, 178, 0.28);
}

.inventory-item.type-材料 {
    border-color: rgba(224, 173, 69, 0.28);
}

.inventory-item.type-灵石 {
    border-color: rgba(110, 231, 255, 0.28);
}

.inventory-item.grade-天品 {
    border-color: rgba(110, 231, 255, 0.36);
}

.inventory-item.grade-地品 {
    border-color: rgba(154, 124, 255, 0.34);
}

.inventory-item.grade-玄品 {
    border-color: rgba(224, 173, 69, 0.34);
}

@media (max-width: 900px) {
    .inventory-grid,
    .inventory-actions {
        grid-template-columns: 1fr;
    }

    .inventory-header {
        flex-direction: column;
    }
}

/* =========================
   v5.2 物品详情页 / 物品图鉴系统
   ========================= */

.item-profile-hero,
.item-profile-card {
    margin-top: 20px;
}

.item-profile-hero {
    border-color: rgba(143, 240, 178, 0.3);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.11), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.item-profile-hero h2,
.item-profile-card h2 {
    color: var(--success);
}

.item-profile-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.item-type-badge {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
    font-weight: 900;
    white-space: nowrap;
}

.item-profile-card {
    border-color: rgba(143, 240, 178, 0.2);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.item-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.item-mini-list {
    display: grid;
    gap: 12px;
}

.item-mini-list.wide-list {
    grid-template-columns: repeat(2, 1fr);
}

.item-mini-card {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.06), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

.item-mini-card strong {
    color: var(--success);
    font-size: 17px;
}

.item-mini-card p {
    color: var(--muted);
    margin: 8px 0 12px;
}

.item-profile-hero.type-丹药,
.item-profile-hero.type-灵草,
.item-mini-card.type-丹药,
.item-mini-card.type-灵草 {
    border-color: rgba(143, 240, 178, 0.3);
}

.item-profile-hero.type-材料,
.item-mini-card.type-材料 {
    border-color: rgba(224, 173, 69, 0.3);
}

.item-profile-hero.type-灵石,
.item-mini-card.type-灵石 {
    border-color: rgba(110, 231, 255, 0.3);
}

.item-profile-hero.grade-天品,
.item-mini-card.grade-天品 {
    border-color: rgba(110, 231, 255, 0.36);
}

.item-profile-hero.grade-地品,
.item-mini-card.grade-地品 {
    border-color: rgba(154, 124, 255, 0.34);
}

.item-profile-hero.grade-玄品,
.item-mini-card.grade-玄品 {
    border-color: rgba(224, 173, 69, 0.34);
}

@media (max-width: 900px) {
    .item-profile-header,
    .item-profile-grid,
    .item-mini-list.wide-list {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .item-type-badge {
        width: 100%;
        text-align: center;
    }
}

/* =========================
   v5.3 物品排行榜 / 天下物品榜
   ========================= */

.item-ranking-hero,
.item-ranking-card {
    margin-top: 20px;
}

.item-ranking-hero {
    border-color: rgba(143, 240, 178, 0.3);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.11), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.item-ranking-hero h2,
.item-ranking-card h2 {
    color: var(--success);
}

.item-ranking-card {
    border-color: rgba(143, 240, 178, 0.2);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.item-ranking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.compact-item-rank {
    grid-template-columns: 52px 1fr 120px;
}

@media (max-width: 980px) {
    .item-ranking-grid {
        grid-template-columns: 1fr;
    }

    .compact-item-rank {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v5.4 炼丹系统基础版
   ========================= */

.alchemy-hero-card,
.alchemy-card {
    margin-top: 20px;
}

.alchemy-hero-card {
    border-color: rgba(154, 124, 255, 0.3);
    background:
        radial-gradient(circle at top right, rgba(154, 124, 255, 0.11), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.alchemy-hero-card h2,
.alchemy-card h2 {
    color: #c9b8ff;
}

.alchemy-card {
    border-color: rgba(154, 124, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(154, 124, 255, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.alchemy-form {
    display: grid;
    gap: 18px;
}

.alchemy-select-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.alchemy-select-grid label {
    display: grid;
    gap: 8px;
}

.alchemy-select-grid span {
    color: #c9b8ff;
    font-weight: 900;
}

.alchemy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.alchemy-log-list {
    display: grid;
    gap: 12px;
}

.alchemy-log {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.alchemy-log.result-success {
    border-color: rgba(143, 240, 178, 0.24);
}

.alchemy-log.result-failed {
    border-color: rgba(255, 114, 114, 0.28);
}

.alchemy-log-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 10px;
}

.alchemy-log-header strong {
    color: #c9b8ff;
}

.alchemy-log.result-success .alchemy-log-header strong {
    color: var(--success);
}

.alchemy-log.result-failed .alchemy-log-header strong {
    color: var(--danger);
}

.alchemy-log-header span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(154, 124, 255, 0.12);
    color: #c9b8ff;
    font-size: 12px;
    font-weight: 900;
}

.alchemy-log p {
    color: var(--muted);
    line-height: 1.7;
}

@media (max-width: 980px) {
    .alchemy-select-grid,
    .alchemy-grid {
        grid-template-columns: 1fr;
    }

    .alchemy-log-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================
   v5.5 丹方系统 / 指定炼丹
   ========================= */

.recipe-hero-card,
.recipe-card {
    margin-top: 20px;
}

.recipe-hero-card {
    border-color: rgba(154, 124, 255, 0.32);
    background:
        radial-gradient(circle at top right, rgba(154, 124, 255, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.recipe-hero-card h2,
.recipe-card h2 {
    color: #c9b8ff;
}

.recipe-card {
    border-color: rgba(154, 124, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(154, 124, 255, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.recipe-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.recipe-card-link {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(154, 124, 255, 0.22);
    background: rgba(255, 255, 255, 0.045);
    text-decoration: none;
    color: var(--text);
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.recipe-card-link:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.075);
}

.recipe-card-link.active {
    border-color: rgba(143, 240, 178, 0.34);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.08), transparent 36%),
        rgba(255, 255, 255, 0.055);
}

.recipe-card-link strong {
    color: #c9b8ff;
    font-size: 18px;
}

.recipe-card-link.active strong {
    color: var(--success);
}

.recipe-card-link p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.recipe-requirement-grid {
    margin: 18px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.requirement-box {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.requirement-box strong {
    display: block;
    color: var(--text);
    margin-bottom: 8px;
}

.requirement-box span {
    color: var(--gold);
    font-weight: 900;
}

.requirement-box p {
    color: var(--muted);
    margin-bottom: 0;
}

.requirement-box.ok {
    border-color: rgba(143, 240, 178, 0.24);
}

.requirement-box.bad {
    border-color: rgba(255, 114, 114, 0.28);
}

@media (max-width: 900px) {
    .recipe-list,
    .recipe-requirement-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v5.6 炼丹排行榜 / 丹道榜
   ========================= */

.alchemy-ranking-hero,
.alchemy-ranking-card {
    margin-top: 20px;
}

.alchemy-ranking-hero {
    border-color: rgba(154, 124, 255, 0.32);
    background:
        radial-gradient(circle at top right, rgba(154, 124, 255, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.alchemy-ranking-hero h2,
.alchemy-ranking-card h2 {
    color: #c9b8ff;
}

.alchemy-ranking-card {
    border-color: rgba(154, 124, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(154, 124, 255, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.alchemy-ranking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.compact-alchemy-rank {
    grid-template-columns: 52px 1fr 110px;
}

.second-summary {
    margin-top: 16px;
}

@media (max-width: 980px) {
    .alchemy-ranking-grid {
        grid-template-columns: 1fr;
    }

    .compact-alchemy-rank {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v5.7 炼器系统基础版
   ========================= */

.crafting-hero-card,
.crafting-card {
    margin-top: 20px;
}

.crafting-hero-card {
    border-color: rgba(224, 173, 69, 0.32);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.crafting-hero-card h2,
.crafting-card h2 {
    color: var(--gold);
}

.crafting-card {
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.crafting-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.crafting-log-list {
    display: grid;
    gap: 12px;
}

.crafting-log {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.crafting-log.result-success {
    border-color: rgba(143, 240, 178, 0.24);
}

.crafting-log.result-failed {
    border-color: rgba(255, 114, 114, 0.28);
}

.crafting-log-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 10px;
}

.crafting-log-header strong {
    color: var(--gold);
}

.crafting-log.result-success .crafting-log-header strong {
    color: var(--success);
}

.crafting-log.result-failed .crafting-log-header strong {
    color: var(--danger);
}

.crafting-log-header span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.12);
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
}

.crafting-log p {
    color: var(--muted);
    line-height: 1.7;
}

@media (max-width: 980px) {
    .crafting-grid {
        grid-template-columns: 1fr;
    }

    .crafting-log-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================
   v5.8 炼器排行榜 / 器道榜
   ========================= */

.crafting-ranking-hero,
.crafting-ranking-card {
    margin-top: 20px;
}

.crafting-ranking-hero {
    border-color: rgba(224, 173, 69, 0.32);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.crafting-ranking-hero h2,
.crafting-ranking-card h2 {
    color: var(--gold);
}

.crafting-ranking-card {
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.crafting-ranking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.compact-crafting-rank {
    grid-template-columns: 52px 1fr 110px;
}

@media (max-width: 980px) {
    .crafting-ranking-grid {
        grid-template-columns: 1fr;
    }

    .compact-crafting-rank {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v5.9 交易 / 市集基础版
   ========================= */

.market-hero-card,
.market-card {
    margin-top: 20px;
}

.market-hero-card {
    border-color: rgba(110, 231, 255, 0.32);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.market-hero-card h2,
.market-card h2 {
    color: var(--cyan);
}

.market-card {
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.market-wallet {
    padding: 14px 18px;
    border-radius: 999px;
    border: 1px solid rgba(110, 231, 255, 0.28);
    background: rgba(110, 231, 255, 0.1);
    color: var(--cyan);
    font-weight: 900;
    white-space: nowrap;
}

.market-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.market-form {
    display: grid;
    gap: 14px;
}

.market-form label {
    display: grid;
    gap: 8px;
}

.market-form label span {
    color: var(--cyan);
    font-weight: 900;
}

.market-list {
    display: grid;
    gap: 14px;
}

.market-listing {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(110, 231, 255, 0.22);
    background: rgba(255, 255, 255, 0.045);
}

.market-listing.type-artifact {
    border-color: rgba(224, 173, 69, 0.26);
}

.market-listing.type-item {
    border-color: rgba(143, 240, 178, 0.22);
}

.market-listing.status-sold {
    border-color: rgba(143, 240, 178, 0.24);
    opacity: 0.82;
}

.market-listing.status-cancelled {
    border-color: rgba(255, 114, 114, 0.24);
    opacity: 0.62;
}

.market-listing-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.market-listing-header strong {
    color: var(--text);
    font-size: 17px;
}

.market-listing-header p {
    margin: 8px 0 0;
    color: var(--muted);
}

.market-listing-header > span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(110, 231, 255, 0.12);
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.market-listing-main > p {
    color: var(--muted);
    line-height: 1.7;
}

.market-actions {
    display: grid;
    gap: 10px;
}

@media (max-width: 980px) {
    .market-grid,
    .market-listing {
        grid-template-columns: 1fr;
    }

    .market-listing-header {
        flex-direction: column;
    }

    .market-wallet {
        width: 100%;
        text-align: center;
    }
}

/* =========================
   v6.0 宗门仓库基础版
   ========================= */

.sect-warehouse-hero,
.sect-warehouse-card {
    margin-top: 20px;
}

.sect-warehouse-hero {
    border-color: rgba(224, 173, 69, 0.32);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.sect-warehouse-hero h2,
.sect-warehouse-card h2 {
    color: var(--gold);
}

.sect-warehouse-card {
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.sect-warehouse-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.warehouse-form {
    display: grid;
    gap: 14px;
}

.warehouse-form label {
    display: grid;
    gap: 8px;
}

.warehouse-form label span {
    color: var(--gold);
    font-weight: 900;
}

.warehouse-list {
    display: grid;
    gap: 14px;
}

.warehouse-entry {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(255, 255, 255, 0.045);
}

.warehouse-entry.type-item {
    border-color: rgba(143, 240, 178, 0.22);
}

.warehouse-entry.type-artifact {
    border-color: rgba(224, 173, 69, 0.28);
}

.warehouse-entry.status-withdrawn {
    opacity: 0.62;
    border-color: rgba(255, 255, 255, 0.12);
}

.warehouse-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.warehouse-header strong {
    color: var(--text);
    font-size: 17px;
}

.warehouse-header p {
    margin: 8px 0 0;
    color: var(--muted);
}

.warehouse-header > span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.12);
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.warehouse-entry.status-available .warehouse-header > span {
    background: rgba(143, 240, 178, 0.12);
    color: var(--success);
}

.warehouse-main > p {
    color: var(--muted);
    line-height: 1.7;
}

.warehouse-actions {
    display: grid;
    gap: 10px;
}

@media (max-width: 980px) {
    .sect-warehouse-grid,
    .warehouse-entry {
        grid-template-columns: 1fr;
    }

    .warehouse-header {
        flex-direction: column;
    }
}

/* =========================
   v6.1 宗门贡献点系统
   ========================= */

.sect-warehouse-hero .chronicle-summary-grid {
    grid-template-columns: repeat(5, 1fr);
}

.warehouse-entry .warehouse-header > span {
    text-align: center;
}

.warehouse-actions .secondary[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .sect-warehouse-hero .chronicle-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .sect-warehouse-hero .chronicle-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v6.2 宗门贡献排行榜 / 宗门仓库榜
   ========================= */

.sect-contribution-hero,
.sect-contribution-card {
    margin-top: 20px;
}

.sect-contribution-hero {
    border-color: rgba(224, 173, 69, 0.32);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.sect-contribution-hero h2,
.sect-contribution-card h2 {
    color: var(--gold);
}

.sect-contribution-card {
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.sect-contribution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.compact-sect-rank {
    grid-template-columns: 52px 1fr 110px;
}

@media (max-width: 980px) {
    .sect-contribution-grid {
        grid-template-columns: 1fr;
    }

    .compact-sect-rank {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v6.3 宗门职位权限系统
   ========================= */

.sect-role-hero,
.sect-role-card {
    margin-top: 20px;
}

.sect-role-hero {
    border-color: rgba(224, 173, 69, 0.32);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.sect-role-hero h2,
.sect-role-card h2 {
    color: var(--gold);
}

.sect-role-card {
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.role-permission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.role-permission-card {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.045);
}

.role-permission-card strong {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
}

.role-permission-card p {
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 0;
}

.role-permission-card.leader {
    border-color: rgba(224, 173, 69, 0.32);
}

.role-permission-card.elder {
    border-color: rgba(110, 231, 255, 0.28);
}

.role-permission-card.member {
    border-color: rgba(143, 240, 178, 0.24);
}

.role-member-list {
    display: grid;
    gap: 14px;
}

.role-member-row {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(255, 255, 255, 0.045);
}

.role-member-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.role-member-header strong {
    color: var(--text);
    font-size: 17px;
}

.role-member-header p {
    color: var(--muted);
    margin: 8px 0 0;
}

.role-member-header > span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.12);
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.role-actions {
    display: grid;
    gap: 10px;
}

@media (max-width: 980px) {
    .role-permission-grid,
    .role-member-row {
        grid-template-columns: 1fr;
    }

    .role-member-header {
        flex-direction: column;
    }
}

/* =========================
   v6.4 宗门职位贡献加成 / 仓库领取折扣
   ========================= */

.role-policy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

.role-policy-box {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(224, 173, 69, 0.24);
    background: rgba(255, 255, 255, 0.045);
    display: grid;
    gap: 8px;
}

.role-policy-box strong {
    color: var(--gold);
    font-size: 18px;
}

.role-policy-box span {
    color: var(--muted);
}

.role-policy-form {
    display: grid;
    gap: 18px;
}

.role-policy-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.role-policy-form-grid label {
    display: grid;
    gap: 8px;
}

.role-policy-form-grid label span {
    color: var(--gold);
    font-weight: 900;
}

@media (max-width: 900px) {
    .role-policy-grid,
    .role-policy-form-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v6.5 宗门仓库审批系统
   ========================= */

.warehouse-request-hero,
.warehouse-request-card {
    margin-top: 20px;
}

.warehouse-request-hero {
    border-color: rgba(224, 173, 69, 0.32);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.warehouse-request-hero h2,
.warehouse-request-card h2 {
    color: var(--gold);
}

.warehouse-request-card {
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 38%),
        rgba(23, 24, 39, 0.9);
}

.warehouse-request-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.warehouse-request-list {
    display: grid;
    gap: 14px;
}

.warehouse-request-row {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(224, 173, 69, 0.24);
    background: rgba(255, 255, 255, 0.045);
}

.warehouse-request-mini {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(255, 255, 255, 0.045);
}

.warehouse-request-mini.status-approved {
    border-color: rgba(143, 240, 178, 0.25);
}

.warehouse-request-mini.status-rejected {
    border-color: rgba(255, 114, 114, 0.25);
}

.warehouse-request-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.warehouse-request-header strong {
    color: var(--text);
    font-size: 17px;
}

.warehouse-request-header p {
    color: var(--muted);
    margin: 8px 0 0;
}

.warehouse-request-header > span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.12);
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.warehouse-request-actions {
    display: grid;
    gap: 10px;
}

.warehouse-request-actions form,
.warehouse-request-form {
    display: grid;
    gap: 8px;
}

@media (max-width: 980px) {
    .warehouse-request-grid,
    .warehouse-request-row {
        grid-template-columns: 1fr;
    }

    .warehouse-request-header {
        flex-direction: column;
    }
}

/* =========================
   UI-1 登录页 + 主页专业化整理
   ========================= */

:root {
    --ui-bg-1: #090a14;
    --ui-bg-2: #111427;
    --ui-card: rgba(20, 22, 38, 0.78);
    --ui-card-strong: rgba(28, 31, 50, 0.92);
    --ui-border: rgba(255, 255, 255, 0.11);
    --ui-border-soft: rgba(255, 255, 255, 0.07);
    --ui-text: #f7f3e8;
    --ui-muted: #a9acc6;
    --ui-gold: #e6b64a;
    --ui-gold-2: #ffcf6a;
    --ui-cyan: #7ee7ff;
    --ui-purple: #a78bfa;
    --ui-green: #8ff0b2;
    --ui-red: #ff7272;
    --ui-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
}

/* 全局背景更干净 */
body {
    background:
        radial-gradient(circle at 16% 12%, rgba(230, 182, 74, 0.10), transparent 28%),
        radial-gradient(circle at 84% 8%, rgba(126, 231, 255, 0.08), transparent 24%),
        radial-gradient(circle at 70% 80%, rgba(167, 139, 250, 0.09), transparent 28%),
        linear-gradient(135deg, var(--ui-bg-1), var(--ui-bg-2));
    color: var(--ui-text);
}

/* 页面最大宽度控制，避免主页太散 */
.container,
main,
body > main {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}

/* 卡片统一变得更专业 */
.card {
    border: 1px solid var(--ui-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        var(--ui-card);
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(14px);
}

/* 顶部标题区减少杂乱感 */
.topbar {
    align-items: flex-start;
    gap: 18px;
    padding-top: 24px;
    margin-bottom: 22px;
}

.topbar h1 {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.04em;
    margin-bottom: 8px;
}

.topbar p {
    color: var(--ui-muted);
    font-size: 15px;
}

/* 导航按钮统一尺寸 */
.nav-button,
.topbar a,
.export-actions a,
.export-link-grid a {
    border-radius: 12px;
    border: 1px solid var(--ui-border);
    background: rgba(255, 255, 255, 0.055);
    color: var(--ui-text);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.nav-button:hover,
.topbar a:hover,
.export-actions a:hover,
.export-link-grid a:hover {
    transform: translateY(-1px);
    border-color: rgba(230, 182, 74, 0.38);
    background: rgba(230, 182, 74, 0.10);
}

/* 表单输入统一 */
input,
select,
textarea {
    border-radius: 13px;
    border: 1px solid var(--ui-border);
    background: rgba(5, 7, 17, 0.72);
    color: var(--ui-text);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(230, 182, 74, 0.70);
    box-shadow: 0 0 0 4px rgba(230, 182, 74, 0.12);
    background: rgba(5, 7, 17, 0.9);
}

/* 按钮统一 */
button,
.world-action,
.auth-form button {
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ui-gold), var(--ui-gold-2));
    color: #15100a;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

button:hover,
.world-action:hover,
.auth-form button:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 14px 28px rgba(230, 182, 74, 0.18);
}

.secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
}

/* =========================
   登录页
   ========================= */

.auth-page {
    min-height: calc(100vh - 40px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 460px);
    gap: 34px;
    align-items: center;
    padding: 54px 24px;
}

.auth-hero {
    padding: 28px;
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(230, 182, 74, 0.28);
    background: rgba(230, 182, 74, 0.09);
    color: var(--ui-gold-2);
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 18px;
}

.auth-hero h1 {
    font-size: clamp(42px, 6vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.06em;
    margin: 0 0 18px;
}

.auth-hero p {
    max-width: 680px;
    color: var(--ui-muted);
    line-height: 1.9;
    font-size: 17px;
}

.auth-feature-grid {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.auth-feature-grid div {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--ui-border-soft);
    background: rgba(255, 255, 255, 0.045);
}

.auth-feature-grid strong {
    display: block;
    color: var(--ui-gold-2);
    margin-bottom: 8px;
    font-size: 16px;
}

.auth-feature-grid span {
    display: block;
    color: var(--ui-muted);
    line-height: 1.65;
    font-size: 13px;
}

.auth-card {
    padding: 30px;
    border-radius: 26px;
    border: 1px solid rgba(230, 182, 74, 0.23);
    background:
        radial-gradient(circle at top right, rgba(230, 182, 74, 0.13), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
        rgba(18, 20, 35, 0.92);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(16px);
}

.auth-card-header {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 24px;
}

.auth-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(230, 182, 74, 0.22), rgba(126, 231, 255, 0.12));
    border: 1px solid rgba(230, 182, 74, 0.26);
    color: var(--ui-gold-2);
    font-weight: 900;
}

.auth-card h2 {
    margin: 0 0 6px;
    font-size: 26px;
}

.auth-card p {
    margin: 0;
    color: var(--ui-muted);
    font-size: 14px;
}

.auth-form {
    display: grid;
    gap: 18px;
}

.auth-form label {
    display: grid;
    gap: 8px;
}

.auth-form label span {
    color: var(--ui-text);
    font-weight: 800;
    font-size: 14px;
}

.auth-form input {
    height: 48px;
    padding: 0 14px;
}

.auth-form button {
    height: 52px;
    margin-top: 4px;
    font-size: 15px;
}

.auth-footer {
    margin-top: 20px;
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--ui-muted);
    font-size: 14px;
}

.auth-footer a {
    color: var(--ui-gold-2);
    font-weight: 900;
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* =========================
   主页整理
   ========================= */

/* 首页卡片间距更一致 */
.card + .card,
main + .card,
section + section {
    margin-top: 18px;
}

/* 主页右侧大量入口按钮，整理为更紧凑的网格 */
.card a,
.card button {
    min-height: 38px;
}

/* 世界入口 / 快捷入口这类按钮区域更专业 */
.card .nav-button,
.card a[href^="/"] {
    text-decoration: none;
    text-align: center;
}

/* 主页主要行动按钮突出 */
button[type="submit"],
.world-action {
    min-height: 44px;
}

/* DEV 区域降低视觉干扰 */
.dev-panel,
.dev-tools,
.debug-panel,
.qa-panel {
    border-color: rgba(255, 114, 114, 0.18) !important;
    background: rgba(255, 114, 114, 0.045) !important;
}

/* summary boxes 更统一 */
.summary-box {
    border: 1px solid var(--ui-border-soft);
    background: rgba(255, 255, 255, 0.045);
    border-radius: 16px;
}

.summary-box strong {
    color: var(--ui-gold-2);
}

/* 首页行动区域：按钮更像 Dashboard */
.action-grid,
.quick-actions,
.world-entry-grid,
.export-link-grid {
    gap: 12px;
}

.action-grid a,
.action-grid button,
.quick-actions a,
.quick-actions button,
.world-entry-grid a,
.world-entry-grid button,
.export-link-grid a,
.export-link-grid button {
    border-radius: 14px;
}

/* 通知和错误信息专业一点 */
.notice,
.error {
    border-radius: 16px;
    padding: 14px 16px;
    margin: 16px 0;
    font-weight: 800;
}

.notice {
    border: 1px solid rgba(143, 240, 178, 0.28);
    background: rgba(143, 240, 178, 0.09);
    color: var(--ui-green);
}

.error {
    border: 1px solid rgba(255, 114, 114, 0.30);
    background: rgba(255, 114, 114, 0.09);
    color: var(--ui-red);
}

/* 手机适配 */
@media (max-width: 980px) {
    .auth-page {
        grid-template-columns: 1fr;
        padding: 32px 16px;
    }

    .auth-hero {
        padding: 10px 4px;
    }

    .auth-feature-grid {
        grid-template-columns: 1fr;
    }

    .auth-card {
        padding: 22px;
    }

    .topbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .auth-hero h1 {
        font-size: 42px;
    }

    .auth-card-header {
        align-items: flex-start;
    }
}

/* =========================
   UI-3 动态视觉：首页 + 登录页
   ========================= */

/* ---------- 登录页动态视觉 ---------- */

.auth-page-enhanced {
    min-height: calc(100vh - 40px);
    display: grid;
    grid-template-columns: 1.2fr 420px;
    gap: 34px;
    align-items: center;
    padding: 40px 24px;
}

.auth-visual-stage {
    position: relative;
    min-height: 720px;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 20% 20%, rgba(224, 173, 69, 0.15), transparent 25%),
        radial-gradient(circle at 80% 30%, rgba(110, 231, 255, 0.12), transparent 22%),
        linear-gradient(135deg, rgba(10, 12, 28, 0.95), rgba(16, 22, 48, 0.95));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
}

.auth-stage-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mist {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.28;
    animation: floatMist 12s ease-in-out infinite;
}

.mist-1 {
    width: 340px;
    height: 340px;
    left: -60px;
    top: 80px;
    background: rgba(224, 173, 69, 0.20);
}

.mist-2 {
    width: 300px;
    height: 300px;
    right: 20px;
    top: 140px;
    background: rgba(110, 231, 255, 0.18);
    animation-delay: 2s;
}

.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    animation: orbFloat 7s ease-in-out infinite;
}

.orb-1 {
    width: 20px;
    height: 20px;
    left: 18%;
    top: 26%;
    background: rgba(224, 173, 69, 0.95);
}

.orb-2 {
    width: 12px;
    height: 12px;
    left: 70%;
    top: 20%;
    background: rgba(110, 231, 255, 0.95);
    animation-delay: 1.5s;
}

.orb-3 {
    width: 16px;
    height: 16px;
    left: 58%;
    top: 44%;
    background: rgba(167, 139, 250, 0.95);
    animation-delay: 3s;
}

.sword-light {
    position: absolute;
    width: 4px;
    height: 260px;
    right: 22%;
    top: 18%;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(126,231,255,0.95), rgba(255,255,255,0));
    box-shadow: 0 0 24px rgba(126, 231, 255, 0.45);
    transform: rotate(18deg);
    animation: swordGlow 3.4s ease-in-out infinite;
}

.mountain-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: polygon(0 100%, 0 60%, 12% 48%, 24% 57%, 36% 42%, 47% 58%, 58% 40%, 69% 56%, 80% 38%, 90% 54%, 100% 44%, 100% 100%);
}

.mountain-back {
    height: 280px;
    background: linear-gradient(to top, rgba(12, 16, 32, 0.95), rgba(25, 31, 55, 0.75));
    opacity: 0.8;
}

.mountain-mid {
    height: 220px;
    background: linear-gradient(to top, rgba(10, 12, 24, 0.98), rgba(19, 25, 44, 0.90));
}

.mountain-front {
    height: 160px;
    background: linear-gradient(to top, rgba(7, 8, 18, 1), rgba(11, 13, 28, 0.95));
}

.auth-stage-content {
    position: relative;
    z-index: 2;
    padding: 64px 56px;
    max-width: 720px;
}

.auth-stage-content h1 {
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.05em;
    margin: 0 0 18px;
}

.auth-stage-content p {
    color: var(--ui-muted);
    line-height: 1.9;
    font-size: 17px;
    max-width: 650px;
}

.auth-scene-grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.auth-scene-card {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
}

.auth-scene-card strong {
    display: block;
    color: var(--ui-gold-2);
    margin-bottom: 8px;
}

.auth-scene-card span {
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.7;
}

.auth-card-enhanced {
    border-radius: 28px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 40%),
        rgba(19, 21, 38, 0.95);
}

/* ---------- 首页动态横幅 ---------- */

.world-hero-banner {
    margin-top: 18px;
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 20px;
    overflow: hidden;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top left, rgba(224, 173, 69, 0.12), transparent 25%),
        radial-gradient(circle at 85% 20%, rgba(110, 231, 255, 0.10), transparent 22%),
        linear-gradient(135deg, rgba(18, 20, 38, 0.95), rgba(13, 17, 34, 0.95));
}

.world-hero-copy {
    padding: 28px;
}

.hero-pill {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.10);
    border: 1px solid rgba(224, 173, 69, 0.22);
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 14px;
}

.world-hero-copy h2 {
    font-size: 34px;
    line-height: 1.1;
    margin: 0 0 12px;
}

.world-hero-copy p {
    color: var(--ui-muted);
    line-height: 1.85;
    max-width: 700px;
}

.hero-stat-row {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.hero-stat-box {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
}

.hero-stat-box strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 18px;
    margin-bottom: 8px;
}

.hero-stat-box span {
    color: var(--ui-muted);
    font-size: 13px;
}

.world-hero-art {
    position: relative;
    min-height: 320px;
    overflow: hidden;
}

.hero-moon {
    position: absolute;
    width: 130px;
    height: 130px;
    right: 18%;
    top: 18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(126,231,255,0.25) 60%, transparent 72%);
    filter: blur(1px);
    box-shadow: 0 0 36px rgba(126, 231, 255, 0.20);
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    animation: orbFloat 8s ease-in-out infinite;
}

.hero-orb-a {
    width: 16px;
    height: 16px;
    left: 18%;
    top: 26%;
    background: rgba(224, 173, 69, 0.95);
}

.hero-orb-b {
    width: 14px;
    height: 14px;
    left: 72%;
    top: 40%;
    background: rgba(110, 231, 255, 0.95);
    animation-delay: 1s;
}

.hero-orb-c {
    width: 10px;
    height: 10px;
    left: 56%;
    top: 24%;
    background: rgba(167, 139, 250, 0.95);
    animation-delay: 2.2s;
}

.hero-ring {
    position: absolute;
    width: 180px;
    height: 180px;
    left: 42%;
    top: 34%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.22);
    box-shadow: 0 0 26px rgba(224, 173, 69, 0.10);
    animation: ringRotate 14s linear infinite;
}

.hero-mountain {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.hero-mountain-back {
    height: 170px;
    background: linear-gradient(to top, rgba(17,19,35,0.95), rgba(28,31,55,0.75));
    clip-path: polygon(0 100%, 0 58%, 16% 44%, 28% 57%, 40% 40%, 54% 54%, 68% 34%, 82% 55%, 100% 42%, 100% 100%);
}

.hero-mountain-front {
    height: 120px;
    background: linear-gradient(to top, rgba(8,10,20,1), rgba(16,18,32,0.95));
    clip-path: polygon(0 100%, 0 68%, 14% 58%, 30% 70%, 47% 50%, 61% 67%, 75% 52%, 88% 65%, 100% 55%, 100% 100%);
}

.hero-silhouette {
    position: absolute;
    width: 44px;
    height: 120px;
    left: 46%;
    bottom: 84px;
    background: linear-gradient(to top, rgba(7,8,16,1), rgba(25,28,45,1));
    clip-path: polygon(40% 0, 62% 0, 70% 18%, 78% 42%, 72% 100%, 28% 100%, 22% 44%, 30% 18%);
    box-shadow: 0 0 16px rgba(126, 231, 255, 0.08);
}

/* ---------- 主要行动动态场景卡 ---------- */

.action-panel-enhanced {
    overflow: hidden;
}

.scene-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 18px;
    margin-bottom: 18px;
}

.scene-action-card {
    position: relative;
    min-height: 270px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
}

.scene-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.scene-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
    background: linear-gradient(to top, rgba(9,10,20,0.92), rgba(9,10,20,0.18));
}

.scene-tag {
    display: inline-block;
    width: fit-content;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    background: rgba(255,255,255,0.08);
    color: var(--ui-gold-2);
}

.scene-content h3 {
    margin: 0 0 10px;
    font-size: 24px;
}

.scene-content p {
    margin: 0 0 16px;
    color: var(--ui-muted);
    line-height: 1.8;
    font-size: 14px;
}

/* 修炼场景 */
.cultivation-scene .scene-bg {
    background:
        radial-gradient(circle at 50% 38%, rgba(224, 173, 69, 0.24), transparent 26%),
        radial-gradient(circle at 50% 50%, rgba(110, 231, 255, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(20,22,46,0.95), rgba(8,10,22,0.95));
}

.scene-core {
    position: absolute;
    width: 86px;
    height: 86px;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(224,173,69,0.70) 34%, rgba(110,231,255,0.25) 58%, transparent 72%);
    box-shadow: 0 0 34px rgba(224, 173, 69, 0.25);
    animation: pulseCore 2.8s ease-in-out infinite;
}

.scene-particle {
    position: absolute;
    border-radius: 50%;
    animation: orbFloat 6s ease-in-out infinite;
}

.scene-particle.p1 {
    width: 14px;
    height: 14px;
    left: 26%;
    top: 28%;
    background: rgba(224, 173, 69, 0.95);
}

.scene-particle.p2 {
    width: 10px;
    height: 10px;
    left: 66%;
    top: 26%;
    background: rgba(110, 231, 255, 0.95);
    animation-delay: 1.4s;
}

.scene-particle.p3 {
    width: 12px;
    height: 12px;
    left: 58%;
    top: 52%;
    background: rgba(167, 139, 250, 0.95);
    animation-delay: 2.4s;
}

/* 战斗场景 */
.battle-scene .scene-bg {
    background:
        radial-gradient(circle at 50% 46%, rgba(255, 114, 114, 0.20), transparent 26%),
        linear-gradient(135deg, rgba(27,14,20,0.95), rgba(9,10,22,0.96));
}

.blade {
    position: absolute;
    width: 5px;
    height: 160px;
    top: 28%;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(255,255,255,0));
    box-shadow: 0 0 18px rgba(255,255,255,0.20);
}

.blade-left {
    left: 42%;
    transform: rotate(-38deg);
}

.blade-right {
    left: 54%;
    transform: rotate(38deg);
}

.battle-flash {
    position: absolute;
    width: 120px;
    height: 120px;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,114,114,0.35), transparent 72%);
    animation: battleFlash 2.2s ease-in-out infinite;
}

/* 探索场景 */
.explore-scene .scene-bg {
    background:
        radial-gradient(circle at 50% 30%, rgba(110, 231, 255, 0.16), transparent 22%),
        linear-gradient(180deg, rgba(10,18,34,0.96), rgba(8,10,20,0.96));
}

.explore-star {
    position: absolute;
    border-radius: 50%;
    background: rgba(110, 231, 255, 0.95);
    animation: twinkle 2.4s ease-in-out infinite;
}

.star-a {
    width: 8px;
    height: 8px;
    left: 22%;
    top: 24%;
}

.star-b {
    width: 10px;
    height: 10px;
    left: 72%;
    top: 20%;
    animation-delay: 0.8s;
}

.star-c {
    width: 7px;
    height: 7px;
    left: 58%;
    top: 36%;
    animation-delay: 1.6s;
}

.explore-path {
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 20%;
    height: 110px;
    border-radius: 50% 50% 0 0;
    border: 2px dashed rgba(224, 173, 69, 0.26);
    border-bottom: 0;
    transform: perspective(400px) rotateX(68deg);
    animation: driftPath 6s linear infinite;
}

.action-grid-secondary {
    margin-top: 6px;
}

/* ---------- 动画 ---------- */

@keyframes floatMist {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-18px) translateX(10px); }
}

@keyframes orbFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.95; }
    50% { transform: translateY(-12px) scale(1.08); opacity: 0.7; }
}

@keyframes swordGlow {
    0%, 100% { opacity: 0.55; transform: rotate(18deg) translateY(0); }
    50% { opacity: 1; transform: rotate(18deg) translateY(-6px); }
}

@keyframes ringRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pulseCore {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 28px rgba(224,173,69,0.20); }
    50% { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 44px rgba(224,173,69,0.34); }
}

@keyframes battleFlash {
    0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.35); }
}

@keyframes driftPath {
    0% { opacity: 0.55; }
    50% { opacity: 0.9; }
    100% { opacity: 0.55; }
}

/* ---------- 响应式 ---------- */

@media (max-width: 1100px) {
    .auth-page-enhanced,
    .world-hero-banner {
        grid-template-columns: 1fr;
    }

    .scene-action-grid {
        grid-template-columns: 1fr;
    }

    .hero-stat-row {
        grid-template-columns: 1fr;
    }

    .auth-scene-grid {
        grid-template-columns: 1fr;
    }

    .auth-visual-stage {
        min-height: 520px;
    }
}

@media (max-width: 720px) {
    .auth-stage-content {
        padding: 34px 24px;
    }

    .world-hero-copy h2 {
        font-size: 28px;
    }

    .scene-action-card {
        min-height: 240px;
    }
}

/* =========================
   UI-4 首页入口分组 + 功能中心
   ========================= */

/* 右侧世界入口从按钮墙变成模块中心 */
.world-hub-card {
    overflow: hidden;
}

.world-hub-grid {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.world-hub-section {
    position: relative;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.world-hub-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.045), transparent);
    transform: translateX(-120%);
    transition: transform 0.5s ease;
}

.world-hub-section:hover::before {
    transform: translateX(120%);
}

.world-hub-section h3 {
    margin: 0 0 6px;
    color: var(--ui-text);
    font-size: 18px;
}

.world-hub-section p {
    margin: 0 0 14px;
    color: var(--ui-muted);
    line-height: 1.7;
    font-size: 13px;
}

.hub-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.04);
}

.hub-icon::before,
.hub-icon::after {
    content: "";
    position: absolute;
    border-radius: 999px;
}

.hub-world::before {
    width: 28px;
    height: 28px;
    left: 12px;
    top: 12px;
    border: 2px solid rgba(110, 231, 255, 0.85);
    box-shadow: 0 0 18px rgba(110, 231, 255, 0.22);
    animation: hubPulse 3s ease-in-out infinite;
}

.hub-battle::before {
    width: 4px;
    height: 34px;
    left: 24px;
    top: 10px;
    background: rgba(255, 114, 114, 0.9);
    transform: rotate(38deg);
    box-shadow: 0 0 18px rgba(255, 114, 114, 0.25);
}

.hub-battle::after {
    width: 4px;
    height: 34px;
    left: 25px;
    top: 10px;
    background: rgba(255, 255, 255, 0.85);
    transform: rotate(-38deg);
}

.hub-craft::before {
    width: 26px;
    height: 26px;
    left: 13px;
    top: 13px;
    border: 2px solid rgba(224, 173, 69, 0.85);
    box-shadow: 0 0 20px rgba(224, 173, 69, 0.22);
    animation: ringRotate 8s linear infinite;
}

.hub-craft::after {
    width: 8px;
    height: 8px;
    left: 23px;
    top: 23px;
    background: rgba(224, 173, 69, 0.95);
}

.hub-sect::before {
    width: 30px;
    height: 22px;
    left: 12px;
    top: 17px;
    background: linear-gradient(135deg, rgba(143, 240, 178, 0.85), rgba(110, 231, 255, 0.55));
    clip-path: polygon(50% 0, 100% 35%, 86% 100%, 14% 100%, 0 35%);
    box-shadow: 0 0 18px rgba(143, 240, 178, 0.20);
}

.hub-link-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.hub-link-grid a {
    position: relative;
    z-index: 2;
    min-height: 36px;
    display: grid;
    place-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.055);
    color: var(--ui-text);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.hub-link-grid a:hover {
    transform: translateY(-1px);
    border-color: rgba(224, 173, 69, 0.35);
    background: rgba(224, 173, 69, 0.10);
}

/* 中间功能中心 */
.feature-hub-panel {
    overflow: hidden;
}

.feature-hub-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.feature-hub-card {
    position: relative;
    min-height: 155px;
    padding: 18px;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    color: var(--ui-text);
    border: 1px solid rgba(255,255,255,0.08);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.09), transparent 34%),
        rgba(255,255,255,0.045);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.feature-hub-card:hover {
    transform: translateY(-2px);
    border-color: rgba(224, 173, 69, 0.32);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.13), transparent 34%),
        rgba(255,255,255,0.065);
}

.feature-hub-card::before {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -26px;
    top: -24px;
    border-radius: 50%;
    opacity: 0.42;
    filter: blur(1px);
}

.feature-hub-card::after {
    content: "";
    position: absolute;
    width: 58px;
    height: 58px;
    right: 28px;
    bottom: 22px;
    border-radius: 20px;
    opacity: 0.42;
    animation: hubFloat 5s ease-in-out infinite;
}

.feature-hub-card span {
    position: relative;
    z-index: 2;
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 12px;
}

.feature-hub-card strong {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 21px;
    margin-bottom: 8px;
}

.feature-hub-card p {
    position: relative;
    z-index: 2;
    color: var(--ui-muted);
    line-height: 1.65;
    margin: 0;
    font-size: 13px;
}

.feature-artifact::before {
    background: rgba(224, 173, 69, 0.28);
}

.feature-artifact::after {
    background: linear-gradient(135deg, rgba(224, 173, 69, 0.95), rgba(255,255,255,0.35));
    clip-path: polygon(48% 0, 62% 0, 72% 100%, 28% 100%);
    transform: rotate(28deg);
}

.feature-inventory::before {
    background: rgba(143, 240, 178, 0.25);
}

.feature-inventory::after {
    background: linear-gradient(135deg, rgba(143, 240, 178, 0.9), rgba(110, 231, 255, 0.35));
    clip-path: polygon(50% 0, 90% 28%, 78% 100%, 22% 100%, 10% 28%);
}

.feature-alchemy::before {
    background: rgba(167, 139, 250, 0.28);
}

.feature-alchemy::after {
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(167, 139, 250, 0.55), transparent 70%);
    border-radius: 50%;
}

.feature-crafting::before {
    background: rgba(224, 173, 69, 0.26);
}

.feature-crafting::after {
    border: 2px solid rgba(224, 173, 69, 0.8);
    background: transparent;
    animation: ringRotate 10s linear infinite;
}

.feature-market::before {
    background: rgba(110, 231, 255, 0.24);
}

.feature-market::after {
    background: linear-gradient(135deg, rgba(110, 231, 255, 0.85), rgba(224, 173, 69, 0.35));
    clip-path: polygon(0 30%, 100% 30%, 86% 100%, 14% 100%);
}

.feature-warehouse::before {
    background: rgba(143, 240, 178, 0.22);
}

.feature-warehouse::after {
    background: linear-gradient(135deg, rgba(143, 240, 178, 0.85), rgba(224, 173, 69, 0.35));
    clip-path: polygon(50% 0, 100% 32%, 86% 100%, 14% 100%, 0 32%);
}

@keyframes hubPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

@keyframes hubFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(5deg);
    }
}

@media (max-width: 980px) {
    .feature-hub-grid {
        grid-template-columns: 1fr;
    }

    .hub-link-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   UI-5 顶部导航专业化 / DEV 折叠
   ========================= */

.main-nav-shell {
    display: grid;
    gap: 12px;
    width: 100%;
}

.main-nav-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.main-nav-row .nav-button {
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.main-nav-row .primary-nav {
    border-color: rgba(224, 173, 69, 0.38);
    background: rgba(224, 173, 69, 0.12);
    color: var(--ui-gold-2);
}

.nav-drawer {
    justify-self: end;
    width: min(720px, 100%);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.07), transparent 34%),
        rgba(255, 255, 255, 0.045);
    overflow: hidden;
}

.nav-drawer summary {
    list-style: none;
    cursor: pointer;
    min-height: 46px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    user-select: none;
}

.nav-drawer summary::-webkit-details-marker {
    display: none;
}

.nav-drawer summary::after {
    content: "展开";
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.10);
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 900;
}

.nav-drawer[open] summary::after {
    content: "收起";
}

.drawer-title {
    color: var(--ui-text);
    font-weight: 900;
}

.drawer-hint {
    color: var(--ui-muted);
    font-size: 12px;
}

.nav-drawer-content {
    padding: 0 16px 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.nav-drawer-group {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(255, 255, 255, 0.035);
}

.nav-drawer-group h3 {
    margin: 0 0 12px;
    color: var(--ui-gold-2);
    font-size: 14px;
}

.nav-drawer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.nav-drawer-links a {
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 8px 10px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(255, 255, 255, 0.045);
    color: var(--ui-text);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    text-align: center;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.nav-drawer-links a:hover {
    transform: translateY(-1px);
    border-color: rgba(224, 173, 69, 0.32);
    background: rgba(224, 173, 69, 0.10);
}

.dev-nav-group {
    border-color: rgba(255, 114, 114, 0.18);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.06), transparent 34%),
        rgba(255, 255, 255, 0.03);
}

.dev-nav-group h3 {
    color: #ff9d9d;
}

.dev-links a {
    border-color: rgba(255, 114, 114, 0.12);
    background: rgba(255, 114, 114, 0.045);
}

.dev-links a:hover {
    border-color: rgba(255, 114, 114, 0.28);
    background: rgba(255, 114, 114, 0.075);
}

@media (max-width: 980px) {
    .main-nav-row {
        justify-content: flex-start;
    }

    .nav-drawer {
        justify-self: stretch;
    }

    .nav-drawer-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .nav-drawer summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-drawer-links {
        grid-template-columns: 1fr;
    }
}

/* =========================
   UI-6 主页 Dashboard 视觉层级统一
   ========================= */

/* 主页整体三栏布局 */
.game-dashboard {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
    margin-top: 22px;
}

/* 三栏内部间距统一 */
.dashboard-left,
.dashboard-center,
.dashboard-right {
    display: grid;
    gap: 20px;
}

/* 左侧角色卡更像正式角色面板 */
.character-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(224, 173, 69, 0.25);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.15), transparent 38%),
        radial-gradient(circle at 20% 20%, rgba(110, 231, 255, 0.08), transparent 32%),
        rgba(20, 22, 38, 0.88);
}

.character-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -80px;
    top: -80px;
    border-radius: 50%;
    background: rgba(224, 173, 69, 0.14);
    filter: blur(10px);
}

.character-card h2 {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
    font-size: 28px;
    letter-spacing: -0.03em;
}

.character-card .realm {
    position: relative;
    z-index: 2;
    display: inline-flex;
    width: fit-content;
    padding: 7px 12px;
    margin: 0 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.24);
    background: rgba(224, 173, 69, 0.10);
    color: var(--ui-gold-2);
    font-weight: 900;
}

/* 角色属性行更清楚 */
.stat-row {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.stat-row:last-of-type {
    border-bottom: none;
}

.stat-row span {
    color: var(--ui-muted);
    font-size: 13px;
}

.stat-row strong {
    color: var(--ui-text);
    font-size: 14px;
    text-align: right;
}

/* 左侧 sticky 效果，滚动时角色卡保持在视野 */
.sticky-card {
    position: sticky;
    top: 18px;
}

/* 旅行区域变成小控制台 */
.travel-form {
    position: relative;
    z-index: 2;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.travel-form label {
    display: block;
    margin-bottom: 10px;
    color: var(--ui-gold-2);
    font-weight: 900;
    font-size: 13px;
}

/* 中间栏卡片主次更明显 */
.dashboard-center > .card {
    border-color: rgba(255, 255, 255, 0.095);
}

.dashboard-center > .card h2 {
    font-size: 24px;
    letter-spacing: -0.03em;
}

/* 主要行动卡突出 */
.action-panel-enhanced,
.action-panel {
    border-color: rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top left, rgba(224, 173, 69, 0.10), transparent 34%),
        rgba(20, 22, 38, 0.88);
}

/* 宗门文明卡 */
.sect-card {
    border-color: rgba(143, 240, 178, 0.20);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.08), transparent 34%),
        rgba(20, 22, 38, 0.86);
}

.sect-current {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(143, 240, 178, 0.16);
    background: rgba(255, 255, 255, 0.04);
}

.sect-current h3 {
    margin-top: 0;
    font-size: 22px;
}

.sect-current .motto {
    color: var(--ui-muted);
    line-height: 1.8;
}

/* 功法、洞府、结局卡分色 */
.method-card {
    border-color: rgba(167, 139, 250, 0.20);
    background:
        radial-gradient(circle at top right, rgba(167, 139, 250, 0.08), transparent 34%),
        rgba(20, 22, 38, 0.86);
}

.legacy-card {
    border-color: rgba(110, 231, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.07), transparent 34%),
        rgba(20, 22, 38, 0.86);
}

.ending-card {
    border-color: rgba(255, 114, 114, 0.18);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.07), transparent 34%),
        rgba(20, 22, 38, 0.86);
}

/* 两栏表单区域更整齐 */
.two-panel,
.ending-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.two-panel > div,
.two-panel > form,
.ending-grid > form {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(255, 255, 255, 0.035);
}

.two-panel h3,
.ending-grid h3 {
    margin-top: 0;
    color: var(--ui-gold-2);
}

/* 右侧信息栏更像世界情报面板 */
.dashboard-right > .card {
    border-color: rgba(110, 231, 255, 0.14);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.06), transparent 34%),
        rgba(20, 22, 38, 0.82);
}

.dashboard-right > .card h2 {
    font-size: 21px;
    color: var(--ui-cyan);
}

/* 最近发现、最近传说、最近历史更紧凑 */
.dashboard-right .item,
.dashboard-right .legend-card,
.dashboard-right .timeline-event {
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.07);
}

.dashboard-right .item-title {
    color: var(--ui-gold-2);
}

.dashboard-right .timeline-event {
    padding: 13px;
}

/* 小滚动区域更美观 */
.small-scroll {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}

.small-scroll::-webkit-scrollbar {
    width: 8px;
}

.small-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

.small-scroll::-webkit-scrollbar-thumb {
    background: rgba(224, 173, 69, 0.28);
    border-radius: 999px;
}

.small-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(224, 173, 69, 0.42);
}

/* 列表卡片统一 */
.sect-list.compact,
.legend-list.compact {
    display: grid;
    gap: 12px;
}

.sect-row,
.item,
.legend-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(255, 255, 255, 0.035);
}

/* 主页的表单输入更统一 */
.sect-create-form {
    display: grid;
    gap: 12px;
}

.sect-create-form input,
.sect-create-form select,
.inline-form input,
.inline-form select {
    width: 100%;
}

/* 按钮不要过度占满视觉 */
.action-grid-secondary button,
.action-grid-secondary .nav-button {
    min-height: 42px;
}

/* 血脉 / 前世卡左侧更高级 */
.bloodline-mini-card {
    border-color: rgba(167, 139, 250, 0.20);
    background:
        radial-gradient(circle at top right, rgba(167, 139, 250, 0.08), transparent 34%),
        rgba(20, 22, 38, 0.84);
}

.reincarnation-card {
    border-color: rgba(224, 173, 69, 0.20);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        rgba(20, 22, 38, 0.84);
}

/* 让主页所有 card 标题更统一 */
.game-dashboard .card h2 {
    margin-top: 0;
}

/* 表单里的按钮统一宽度 */
.game-dashboard form button {
    width: 100%;
}

/* 游戏入口卡不要被默认 a 样式弄乱 */
.game-dashboard a {
    text-decoration: none;
}

/* 响应式：平板变两栏 */
@media (max-width: 1180px) {
    .game-dashboard {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .dashboard-right {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-right .world-hub-card {
        grid-column: 1 / -1;
    }
}

/* 响应式：手机变单栏 */
@media (max-width: 860px) {
    .game-dashboard {
        grid-template-columns: 1fr;
    }

    .dashboard-right {
        grid-template-columns: 1fr;
    }

    .sticky-card {
        position: relative;
        top: auto;
    }

    .two-panel,
    .ending-grid {
        grid-template-columns: 1fr;
    }
}

/* 更小屏幕优化 */
@media (max-width: 560px) {
    .character-card h2 {
        font-size: 24px;
    }

    .stat-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .stat-row strong {
        text-align: left;
    }
}

/* =========================
   UI-7 功能页动态头图
   battle / artifacts / inventory
   ========================= */

.page-visual-banner {
    position: relative;
    margin-top: 20px;
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: 22px;
    overflow: hidden;
    min-height: 310px;
    border-radius: 26px;
}

.visual-copy {
    position: relative;
    z-index: 2;
    padding: 30px;
    align-self: center;
}

.visual-pill {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.24);
    background: rgba(224, 173, 69, 0.10);
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 900;
}

.visual-copy h2 {
    margin: 0 0 12px;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.visual-copy p {
    max-width: 720px;
    margin: 0;
    color: var(--ui-muted);
    line-height: 1.85;
}

.visual-mini-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.visual-mini-actions .nav-button {
    min-height: 40px;
    padding: 10px 14px;
}

.visual-art {
    position: relative;
    min-height: 310px;
    overflow: hidden;
}

/* =========================
   战斗页视觉
   ========================= */

.battle-visual-banner {
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top left, rgba(255, 114, 114, 0.12), transparent 32%),
        radial-gradient(circle at 82% 20%, rgba(224, 173, 69, 0.10), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.battle-art {
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 114, 114, 0.20), transparent 28%),
        radial-gradient(circle at 65% 30%, rgba(255, 255, 255, 0.08), transparent 20%);
}

.battle-aura {
    position: absolute;
    width: 220px;
    height: 220px;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 114, 114, 0.22);
    box-shadow:
        0 0 32px rgba(255, 114, 114, 0.18),
        inset 0 0 38px rgba(255, 114, 114, 0.12);
    animation: battleAuraPulse 3s ease-in-out infinite;
}

.battle-sword {
    position: absolute;
    width: 5px;
    height: 210px;
    left: 50%;
    top: 18%;
    border-radius: 999px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.95), transparent);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

.sword-a {
    transform: rotate(42deg);
    background: linear-gradient(to bottom, transparent, rgba(255, 114, 114, 0.95), transparent);
}

.sword-b {
    transform: rotate(-42deg);
    background: linear-gradient(to bottom, transparent, rgba(126, 231, 255, 0.95), transparent);
}

.battle-impact {
    position: absolute;
    width: 116px;
    height: 116px;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,114,114,0.38), transparent 72%);
    animation: battleImpact 2.2s ease-in-out infinite;
}

.battle-spark {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 220, 120, 0.95);
    box-shadow: 0 0 14px rgba(255, 220, 120, 0.4);
    animation: sparkFly 4s ease-in-out infinite;
}

.spark-a {
    width: 9px;
    height: 9px;
    left: 25%;
    top: 34%;
}

.spark-b {
    width: 7px;
    height: 7px;
    left: 72%;
    top: 36%;
    animation-delay: 1.2s;
}

.spark-c {
    width: 8px;
    height: 8px;
    left: 60%;
    top: 66%;
    animation-delay: 2.1s;
}

/* =========================
   法器页视觉
   ========================= */

.artifact-visual-banner {
    border-color: rgba(224, 173, 69, 0.30);
    background:
        radial-gradient(circle at top left, rgba(224, 173, 69, 0.13), transparent 32%),
        radial-gradient(circle at 78% 26%, rgba(167, 139, 250, 0.10), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.artifact-art {
    background:
        radial-gradient(circle at 50% 44%, rgba(224, 173, 69, 0.16), transparent 32%),
        radial-gradient(circle at 60% 34%, rgba(167, 139, 250, 0.10), transparent 24%);
}

.artifact-ring {
    position: absolute;
    left: 50%;
    top: 48%;
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.28);
    transform: translate(-50%, -50%);
}

.ring-one {
    width: 230px;
    height: 230px;
    animation: ringRotate 16s linear infinite;
}

.ring-two {
    width: 150px;
    height: 150px;
    border-color: rgba(126, 231, 255, 0.22);
    animation: ringRotateReverse 12s linear infinite;
}

.floating-artifact {
    position: absolute;
    width: 44px;
    height: 190px;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%) rotate(18deg);
    background:
        linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.95) 12%, rgba(224,173,69,0.95) 44%, rgba(255,255,255,0.75) 68%, transparent 100%);
    clip-path: polygon(45% 0, 60% 0, 70% 70%, 55% 100%, 40% 100%, 30% 70%);
    filter: drop-shadow(0 0 18px rgba(224, 173, 69, 0.35));
    animation: artifactFloat 4s ease-in-out infinite;
}

.artifact-orb {
    position: absolute;
    border-radius: 50%;
    animation: orbFloat 6s ease-in-out infinite;
}

.orb-a {
    width: 14px;
    height: 14px;
    left: 24%;
    top: 28%;
    background: rgba(224, 173, 69, 0.95);
}

.orb-b {
    width: 11px;
    height: 11px;
    left: 72%;
    top: 35%;
    background: rgba(126, 231, 255, 0.95);
    animation-delay: 1.4s;
}

.orb-c {
    width: 13px;
    height: 13px;
    left: 62%;
    top: 68%;
    background: rgba(167, 139, 250, 0.95);
    animation-delay: 2.2s;
}

/* =========================
   背包页视觉
   ========================= */

.inventory-visual-banner {
    border-color: rgba(143, 240, 178, 0.28);
    background:
        radial-gradient(circle at top left, rgba(143, 240, 178, 0.11), transparent 32%),
        radial-gradient(circle at 78% 22%, rgba(110, 231, 255, 0.10), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.inventory-art {
    background:
        radial-gradient(circle at 50% 50%, rgba(143, 240, 178, 0.15), transparent 32%),
        radial-gradient(circle at 62% 36%, rgba(224, 173, 69, 0.08), transparent 22%);
}

.inventory-chest {
    position: absolute;
    width: 190px;
    height: 126px;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
    border-radius: 22px 22px 28px 28px;
    background:
        linear-gradient(180deg, rgba(224, 173, 69, 0.95), rgba(119, 74, 31, 0.95));
    box-shadow:
        inset 0 0 22px rgba(255,255,255,0.12),
        0 20px 42px rgba(0,0,0,0.35);
    overflow: hidden;
}

.inventory-chest::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 42px;
    height: 6px;
    background: rgba(20, 22, 38, 0.75);
}

.inventory-chest::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    left: 50%;
    top: 45px;
    transform: translateX(-50%);
    border-radius: 10px;
    background: rgba(20, 22, 38, 0.78);
    border: 1px solid rgba(255,255,255,0.15);
}

.inventory-glow {
    position: absolute;
    width: 220px;
    height: 90px;
    left: 50%;
    top: 38%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(143, 240, 178, 0.45), transparent 70%);
    filter: blur(12px);
    animation: inventoryGlow 2.8s ease-in-out infinite;
}

.inventory-item-orb {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(255,255,255,0.18);
    animation: treasureFloat 6s ease-in-out infinite;
}

.item-orb-a {
    width: 16px;
    height: 16px;
    left: 30%;
    top: 24%;
    background: rgba(143, 240, 178, 0.95);
}

.item-orb-b {
    width: 12px;
    height: 12px;
    left: 68%;
    top: 30%;
    background: rgba(224, 173, 69, 0.95);
    animation-delay: 1.2s;
}

.item-orb-c {
    width: 14px;
    height: 14px;
    left: 76%;
    top: 58%;
    background: rgba(110, 231, 255, 0.95);
    animation-delay: 2.2s;
}

.item-orb-d {
    width: 10px;
    height: 10px;
    left: 24%;
    top: 62%;
    background: rgba(167, 139, 250, 0.95);
    animation-delay: 3s;
}

/* =========================
   UI-7 动画
   ========================= */

@keyframes battleAuraPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.96);
        opacity: 0.65;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 1;
    }
}

@keyframes battleImpact {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.86);
        opacity: 0.55;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.12);
        opacity: 1;
    }
}

@keyframes sparkFly {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-14px) translateX(8px) scale(1.2);
        opacity: 1;
    }
}

@keyframes ringRotateReverse {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

@keyframes artifactFloat {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(18deg) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) rotate(18deg) translateY(-12px);
    }
}

@keyframes inventoryGlow {
    0%, 100% {
        opacity: 0.45;
        transform: translateX(-50%) scale(0.95);
    }

    50% {
        opacity: 0.85;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes treasureFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-16px) scale(1.12);
        opacity: 1;
    }
}

/* =========================
   UI-7 Responsive
   ========================= */

@media (max-width: 980px) {
    .page-visual-banner {
        grid-template-columns: 1fr;
    }

    .visual-art {
        min-height: 240px;
    }
}

@media (max-width: 620px) {
    .visual-copy {
        padding: 22px;
    }

    .visual-mini-actions {
        display: grid;
    }

    .visual-mini-actions .nav-button {
        width: 100%;
    }
}

/* =========================
   UI-8 炼丹 / 炼器 / 市集 动态头图
   ========================= */

/* =========================
   炼丹页视觉
   ========================= */

.alchemy-visual-banner {
    border-color: rgba(167, 139, 250, 0.30);
    background:
        radial-gradient(circle at top left, rgba(167, 139, 250, 0.13), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(224, 173, 69, 0.10), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.alchemy-art {
    background:
        radial-gradient(circle at 50% 52%, rgba(167, 139, 250, 0.16), transparent 32%),
        radial-gradient(circle at 52% 38%, rgba(224, 173, 69, 0.12), transparent 24%);
}

.alchemy-cauldron {
    position: absolute;
    width: 190px;
    height: 118px;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    border-radius: 24px 24px 48px 48px;
    background:
        linear-gradient(180deg, rgba(70, 63, 98, 0.98), rgba(23, 25, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 0 24px rgba(255, 255, 255, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.36);
}

.alchemy-cauldron::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: -16px;
    height: 28px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(143, 240, 178, 0.55), rgba(167, 139, 250, 0.22), rgba(10, 12, 22, 0.95));
    border: 1px solid rgba(167, 139, 250, 0.30);
    box-shadow: 0 0 24px rgba(167, 139, 250, 0.30);
    animation: alchemyLiquid 2.8s ease-in-out infinite;
}

.alchemy-cauldron::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 26px;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    border-radius: 0 0 16px 16px;
    background: rgba(12, 14, 28, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.alchemy-fire {
    position: absolute;
    width: 130px;
    height: 80px;
    left: 50%;
    top: 76%;
    transform: translateX(-50%);
    border-radius: 50% 50% 20% 20%;
    background:
        radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.95), rgba(224, 173, 69, 0.75), rgba(255, 114, 114, 0.45), transparent 72%);
    filter: blur(4px);
    animation: forgeFire 1.8s ease-in-out infinite;
}

.alchemy-smoke {
    position: absolute;
    border-radius: 50%;
    background: rgba(167, 139, 250, 0.18);
    filter: blur(12px);
    animation: smokeRise 5s ease-in-out infinite;
}

.smoke-a {
    width: 90px;
    height: 90px;
    left: 39%;
    top: 20%;
}

.smoke-b {
    width: 110px;
    height: 110px;
    left: 52%;
    top: 14%;
    animation-delay: 1.8s;
}

.alchemy-pill {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(167, 139, 250, 0.35);
    animation: pillFloat 5s ease-in-out infinite;
}

.pill-a {
    width: 18px;
    height: 18px;
    left: 30%;
    top: 34%;
    background: rgba(143, 240, 178, 0.95);
}

.pill-b {
    width: 14px;
    height: 14px;
    left: 70%;
    top: 38%;
    background: rgba(224, 173, 69, 0.95);
    animation-delay: 1.3s;
}

.pill-c {
    width: 16px;
    height: 16px;
    left: 58%;
    top: 24%;
    background: rgba(167, 139, 250, 0.95);
    animation-delay: 2.1s;
}

/* =========================
   炼器页视觉
   ========================= */

.crafting-visual-banner {
    border-color: rgba(224, 173, 69, 0.30);
    background:
        radial-gradient(circle at top left, rgba(224, 173, 69, 0.13), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(255, 114, 114, 0.10), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.crafting-art {
    background:
        radial-gradient(circle at 50% 60%, rgba(224, 173, 69, 0.18), transparent 34%),
        radial-gradient(circle at 64% 32%, rgba(255, 114, 114, 0.10), transparent 24%);
}

.forge-anvil {
    position: absolute;
    width: 190px;
    height: 82px;
    left: 50%;
    top: 66%;
    transform: translate(-50%, -50%);
    border-radius: 20px 20px 26px 26px;
    background:
        linear-gradient(180deg, rgba(90, 91, 105, 0.98), rgba(25, 27, 40, 0.98));
    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, 0.08),
        0 24px 46px rgba(0, 0, 0, 0.34);
}

.forge-anvil::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 24px;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(31, 33, 48, 0.96), rgba(114, 112, 125, 0.96), rgba(31, 33, 48, 0.96));
}

.forge-hammer {
    position: absolute;
    width: 136px;
    height: 26px;
    left: 54%;
    top: 36%;
    border-radius: 10px;
    background:
        linear-gradient(90deg, rgba(224, 173, 69, 0.95), rgba(88, 55, 24, 0.95));
    transform: rotate(-28deg);
    transform-origin: 80% 50%;
    animation: hammerStrike 2.6s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(224, 173, 69, 0.16);
}

.forge-hammer::before {
    content: "";
    position: absolute;
    width: 42px;
    height: 54px;
    right: -18px;
    top: -14px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(210, 210, 218, 0.95), rgba(72, 75, 90, 0.98));
}

.forge-sword {
    position: absolute;
    width: 150px;
    height: 8px;
    left: 50%;
    top: 57%;
    transform: translateX(-50%) rotate(-8deg);
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), rgba(126, 231, 255, 0.75), transparent);
    box-shadow: 0 0 18px rgba(126, 231, 255, 0.22);
}

.forge-glow {
    position: absolute;
    width: 220px;
    height: 120px;
    left: 50%;
    top: 68%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 173, 69, 0.40), rgba(255, 114, 114, 0.15), transparent 72%);
    filter: blur(10px);
    animation: forgeGlow 2s ease-in-out infinite;
}

.forge-spark {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 220, 120, 0.95);
    box-shadow: 0 0 16px rgba(255, 220, 120, 0.45);
    animation: forgeSparkFly 3.6s ease-in-out infinite;
}

.forge-spark-a {
    width: 8px;
    height: 8px;
    left: 36%;
    top: 44%;
}

.forge-spark-b {
    width: 7px;
    height: 7px;
    left: 65%;
    top: 48%;
    animation-delay: 1.1s;
}

.forge-spark-c {
    width: 9px;
    height: 9px;
    left: 52%;
    top: 32%;
    animation-delay: 2s;
}

/* =========================
   市集页视觉
   ========================= */

.market-visual-banner {
    border-color: rgba(110, 231, 255, 0.30);
    background:
        radial-gradient(circle at top left, rgba(110, 231, 255, 0.12), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(224, 173, 69, 0.11), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.market-art {
    background:
        radial-gradient(circle at 54% 54%, rgba(110, 231, 255, 0.13), transparent 34%),
        radial-gradient(circle at 65% 28%, rgba(224, 173, 69, 0.10), transparent 24%);
}

.market-stall {
    position: absolute;
    width: 230px;
    height: 130px;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    border-radius: 18px 18px 26px 26px;
    background:
        linear-gradient(180deg, rgba(45, 48, 70, 0.98), rgba(20, 22, 38, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.34);
}

.market-stall::before {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    top: -42px;
    height: 58px;
    border-radius: 18px 18px 8px 8px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(224, 173, 69, 0.95) 0 34px,
            rgba(110, 231, 255, 0.85) 34px 68px
        );
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.market-stall::after {
    content: "";
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 28px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.market-light {
    position: absolute;
    width: 260px;
    height: 140px;
    left: 50%;
    top: 48%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 173, 69, 0.26), rgba(110, 231, 255, 0.10), transparent 72%);
    filter: blur(12px);
    animation: marketLightPulse 3.2s ease-in-out infinite;
}

.market-lantern {
    position: absolute;
    width: 34px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 220, 120, 0.95), rgba(224, 92, 74, 0.78));
    box-shadow: 0 0 26px rgba(224, 173, 69, 0.32);
    animation: lanternSwing 4s ease-in-out infinite;
}

.lantern-a {
    left: 28%;
    top: 22%;
}

.lantern-b {
    right: 25%;
    top: 25%;
    animation-delay: 1.3s;
}

.market-coin {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(224,173,69,0.95), rgba(126,92,34,0.95));
    box-shadow: 0 0 14px rgba(224, 173, 69, 0.28);
    animation: coinFloat 5.5s ease-in-out infinite;
}

.coin-a {
    width: 18px;
    height: 18px;
    left: 34%;
    top: 38%;
}

.coin-b {
    width: 14px;
    height: 14px;
    left: 68%;
    top: 42%;
    animation-delay: 1.1s;
}

.coin-c {
    width: 16px;
    height: 16px;
    left: 55%;
    top: 25%;
    animation-delay: 2.2s;
}

/* =========================
   UI-8 动画
   ========================= */

@keyframes alchemyLiquid {
    0%, 100% {
        transform: scaleX(1);
        opacity: 0.75;
    }

    50% {
        transform: scaleX(1.08);
        opacity: 1;
    }
}

@keyframes smokeRise {
    0% {
        transform: translateY(24px) scale(0.85);
        opacity: 0.08;
    }

    50% {
        opacity: 0.26;
    }

    100% {
        transform: translateY(-54px) scale(1.18);
        opacity: 0;
    }
}

@keyframes pillFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.82;
    }

    50% {
        transform: translateY(-16px) scale(1.13);
        opacity: 1;
    }
}

@keyframes forgeFire {
    0%, 100% {
        opacity: 0.65;
        transform: translateX(-50%) scale(0.92);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes hammerStrike {
    0%, 100% {
        transform: rotate(-28deg) translateY(0);
    }

    45% {
        transform: rotate(-28deg) translateY(0);
    }

    60% {
        transform: rotate(-18deg) translateY(34px);
    }

    72% {
        transform: rotate(-28deg) translateY(0);
    }
}

@keyframes forgeGlow {
    0%, 100% {
        opacity: 0.45;
        transform: translateX(-50%) scale(0.95);
    }

    50% {
        opacity: 0.85;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes forgeSparkFly {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.75;
    }

    50% {
        transform: translateY(-22px) translateX(10px) scale(1.25);
        opacity: 1;
    }
}

@keyframes marketLightPulse {
    0%, 100% {
        opacity: 0.45;
        transform: translateX(-50%) scale(0.96);
    }

    50% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1.06);
    }
}

@keyframes lanternSwing {
    0%, 100% {
        transform: rotate(-3deg) translateY(0);
    }

    50% {
        transform: rotate(4deg) translateY(-5px);
    }
}

@keyframes coinFloat {
    0%, 100% {
        transform: translateY(0) rotateY(0deg);
        opacity: 0.85;
    }

    50% {
        transform: translateY(-16px) rotateY(180deg);
        opacity: 1;
    }
}

/* =========================
   UI-9 宗门系统动态头图
   warehouse / requests / roles
   ========================= */

/* =========================
   宗门仓库视觉
   ========================= */

.sect-warehouse-visual-banner {
    border-color: rgba(224, 173, 69, 0.30);
    background:
        radial-gradient(circle at top left, rgba(224, 173, 69, 0.13), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(143, 240, 178, 0.10), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.sect-warehouse-art {
    background:
        radial-gradient(circle at 50% 56%, rgba(224, 173, 69, 0.16), transparent 32%),
        radial-gradient(circle at 66% 30%, rgba(143, 240, 178, 0.10), transparent 24%);
}

.warehouse-vault {
    position: absolute;
    width: 230px;
    height: 170px;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    border-radius: 28px 28px 34px 34px;
    background:
        linear-gradient(180deg, rgba(68, 57, 38, 0.98), rgba(24, 25, 38, 0.98));
    border: 1px solid rgba(224, 173, 69, 0.24);
    box-shadow:
        inset 0 0 26px rgba(255, 255, 255, 0.08),
        0 26px 48px rgba(0, 0, 0, 0.36);
}

.warehouse-vault::before {
    content: "";
    position: absolute;
    width: 98px;
    height: 98px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 10px solid rgba(224, 173, 69, 0.72);
    background: rgba(13, 15, 28, 0.96);
    box-shadow:
        inset 0 0 20px rgba(224, 173, 69, 0.15),
        0 0 22px rgba(224, 173, 69, 0.18);
}

.warehouse-vault::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(143, 240, 178, 0.95);
    box-shadow: 0 0 22px rgba(143, 240, 178, 0.45);
}

.warehouse-door-glow {
    position: absolute;
    width: 220px;
    height: 140px;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 173, 69, 0.30), rgba(143, 240, 178, 0.12), transparent 72%);
    filter: blur(12px);
    animation: warehouseGlow 3s ease-in-out infinite;
}

.warehouse-seal {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    border: 1px solid rgba(224, 173, 69, 0.35);
    background: rgba(224, 173, 69, 0.12);
    box-shadow: 0 0 18px rgba(224, 173, 69, 0.18);
    animation: sealFloat 5s ease-in-out infinite;
}

.seal-a {
    left: 25%;
    top: 24%;
}

.seal-b {
    right: 24%;
    top: 28%;
    animation-delay: 1.8s;
}

.warehouse-seal::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    border: 2px solid rgba(224, 173, 69, 0.72);
}

.warehouse-treasure {
    position: absolute;
    border-radius: 50%;
    animation: treasureFloat 5.5s ease-in-out infinite;
}

.treasure-a {
    width: 16px;
    height: 16px;
    left: 30%;
    top: 42%;
    background: rgba(224, 173, 69, 0.95);
}

.treasure-b {
    width: 14px;
    height: 14px;
    left: 70%;
    top: 46%;
    background: rgba(143, 240, 178, 0.95);
    animation-delay: 1.4s;
}

.treasure-c {
    width: 12px;
    height: 12px;
    left: 58%;
    top: 26%;
    background: rgba(110, 231, 255, 0.95);
    animation-delay: 2.4s;
}

/* =========================
   仓库审批视觉
   ========================= */

.warehouse-request-visual-banner {
    border-color: rgba(110, 231, 255, 0.30);
    background:
        radial-gradient(circle at top left, rgba(110, 231, 255, 0.12), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(224, 173, 69, 0.10), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.warehouse-request-art {
    background:
        radial-gradient(circle at 50% 52%, rgba(110, 231, 255, 0.14), transparent 32%),
        radial-gradient(circle at 62% 34%, rgba(224, 173, 69, 0.10), transparent 24%);
}

.scroll-paper {
    position: absolute;
    width: 220px;
    height: 150px;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%) rotate(-4deg);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(247, 231, 184, 0.95), rgba(162, 124, 63, 0.90));
    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.12),
        0 24px 42px rgba(0, 0, 0, 0.34);
}

.scroll-paper::before,
.scroll-paper::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    height: 6px;
    border-radius: 999px;
    background: rgba(42, 32, 22, 0.35);
}

.scroll-paper::before {
    top: 42px;
}

.scroll-paper::after {
    top: 70px;
}

.approval-brush {
    position: absolute;
    width: 150px;
    height: 16px;
    right: 21%;
    top: 35%;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(24, 18, 14, 0.98), rgba(224, 173, 69, 0.92));
    transform: rotate(34deg);
    animation: brushMove 4s ease-in-out infinite;
}

.approval-brush::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 24px;
    right: -16px;
    top: -4px;
    border-radius: 50%;
    background: rgba(24, 18, 14, 0.98);
}

.approval-stamp {
    position: absolute;
    width: 62px;
    height: 62px;
    left: 38%;
    top: 58%;
    border-radius: 18px;
    border: 3px solid rgba(255, 74, 74, 0.72);
    background: rgba(255, 74, 74, 0.10);
    transform: rotate(-12deg);
    animation: stampPulse 2.8s ease-in-out infinite;
}

.approval-light {
    position: absolute;
    width: 240px;
    height: 120px;
    left: 50%;
    top: 54%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(110, 231, 255, 0.26), rgba(224, 173, 69, 0.10), transparent 72%);
    filter: blur(12px);
    animation: marketLightPulse 3.4s ease-in-out infinite;
}

.approval-line {
    position: absolute;
    height: 3px;
    border-radius: 999px;
    background: rgba(110, 231, 255, 0.55);
    box-shadow: 0 0 12px rgba(110, 231, 255, 0.22);
    animation: approvalLine 4s ease-in-out infinite;
}

.line-a {
    width: 90px;
    left: 26%;
    top: 26%;
}

.line-b {
    width: 120px;
    right: 22%;
    bottom: 28%;
    animation-delay: 1.5s;
}

/* =========================
   宗门职位视觉
   ========================= */

.sect-role-visual-banner {
    border-color: rgba(167, 139, 250, 0.30);
    background:
        radial-gradient(circle at top left, rgba(167, 139, 250, 0.13), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(224, 173, 69, 0.11), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.sect-role-art {
    background:
        radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.16), transparent 32%),
        radial-gradient(circle at 60% 30%, rgba(224, 173, 69, 0.10), transparent 24%);
}

.sect-token {
    position: absolute;
    width: 120px;
    height: 150px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.96), rgba(88, 57, 28, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 0 24px rgba(255, 255, 255, 0.12),
        0 26px 48px rgba(0, 0, 0, 0.36);
    animation: tokenFloat 4.5s ease-in-out infinite;
}

.sect-token::before {
    content: "";
    position: absolute;
    inset: 26px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.38);
}

.sect-token::after {
    content: "令";
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    color: rgba(20, 14, 8, 0.88);
    font-size: 42px;
    font-weight: 900;
}

.sect-token-ring {
    position: absolute;
    width: 220px;
    height: 220px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.26);
    box-shadow: 0 0 28px rgba(224, 173, 69, 0.14);
    animation: ringRotate 14s linear infinite;
}

.role-banner {
    position: absolute;
    width: 68px;
    height: 180px;
    top: 28%;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(167, 139, 250, 0.82), rgba(38, 31, 74, 0.88));
    border: 1px solid rgba(167, 139, 250, 0.25);
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.15);
}

.banner-left {
    left: 24%;
    transform: rotate(-8deg);
}

.banner-right {
    right: 24%;
    transform: rotate(8deg);
}

.role-star {
    position: absolute;
    border-radius: 50%;
    background: rgba(224, 173, 69, 0.95);
    box-shadow: 0 0 16px rgba(224, 173, 69, 0.35);
    animation: orbFloat 5.5s ease-in-out infinite;
}

.role-star-a {
    width: 12px;
    height: 12px;
    left: 28%;
    top: 26%;
}

.role-star-b {
    width: 15px;
    height: 15px;
    right: 28%;
    top: 34%;
    animation-delay: 1.5s;
}

.role-star-c {
    width: 10px;
    height: 10px;
    left: 62%;
    top: 70%;
    animation-delay: 2.4s;
}

/* =========================
   UI-9 动画
   ========================= */

@keyframes warehouseGlow {
    0%, 100% {
        opacity: 0.45;
        transform: translate(-50%, -50%) scale(0.96);
    }

    50% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes sealFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.82;
    }

    50% {
        transform: translateY(-10px) rotate(6deg);
        opacity: 1;
    }
}

@keyframes brushMove {
    0%, 100% {
        transform: rotate(34deg) translateY(0);
    }

    50% {
        transform: rotate(28deg) translateY(10px);
    }
}

@keyframes stampPulse {
    0%, 100% {
        transform: rotate(-12deg) scale(0.94);
        opacity: 0.65;
    }

    50% {
        transform: rotate(-12deg) scale(1.08);
        opacity: 1;
    }
}

@keyframes approvalLine {
    0%, 100% {
        opacity: 0.35;
        transform: translateX(0);
    }

    50% {
        opacity: 0.95;
        transform: translateX(10px);
    }
}

@keyframes tokenFloat {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-12px);
    }
}

/* =========================
   UI-10 排行榜 / 历史 / 编年史 / 传奇录动态头图
   ========================= */

/* =========================
   排行榜视觉
   ========================= */

.rankings-visual-banner {
    border-color: rgba(224, 173, 69, 0.32);
    background:
        radial-gradient(circle at top left, rgba(224, 173, 69, 0.15), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(110, 231, 255, 0.10), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.rankings-art {
    background:
        radial-gradient(circle at 50% 50%, rgba(224, 173, 69, 0.18), transparent 34%),
        radial-gradient(circle at 62% 30%, rgba(110, 231, 255, 0.10), transparent 24%);
}

.ranking-ring {
    position: absolute;
    left: 50%;
    top: 52%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(224, 173, 69, 0.28);
}

.ranking-ring-one {
    width: 250px;
    height: 250px;
    animation: ringRotate 16s linear infinite;
}

.ranking-ring-two {
    width: 160px;
    height: 160px;
    border-color: rgba(110, 231, 255, 0.24);
    animation: ringRotateReverse 12s linear infinite;
}

.ranking-tablet {
    position: absolute;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(224, 173, 69, 0.95), rgba(75, 52, 25, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 0 22px rgba(255, 255, 255, 0.10),
        0 24px 42px rgba(0, 0, 0, 0.34);
}

.tablet-main {
    width: 115px;
    height: 165px;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
    animation: tabletFloat 4.8s ease-in-out infinite;
}

.tablet-main::after {
    content: "榜";
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    color: rgba(25, 16, 7, 0.82);
    font-size: 44px;
    font-weight: 900;
}

.tablet-left {
    width: 76px;
    height: 112px;
    left: 28%;
    top: 58%;
    opacity: 0.72;
    transform: rotate(-12deg);
}

.tablet-right {
    width: 76px;
    height: 112px;
    right: 25%;
    top: 42%;
    opacity: 0.72;
    transform: rotate(12deg);
}

.ranking-star {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 240, 160, 0.95);
    box-shadow: 0 0 18px rgba(255, 240, 160, 0.36);
    animation: orbFloat 5.5s ease-in-out infinite;
}

.rank-star-a {
    width: 13px;
    height: 13px;
    left: 27%;
    top: 24%;
}

.rank-star-b {
    width: 10px;
    height: 10px;
    right: 26%;
    top: 30%;
    animation-delay: 1.4s;
}

.rank-star-c {
    width: 12px;
    height: 12px;
    left: 62%;
    top: 70%;
    animation-delay: 2.3s;
}

/* =========================
   历史搜索视觉
   ========================= */

.history-visual-banner {
    border-color: rgba(110, 231, 255, 0.28);
    background:
        radial-gradient(circle at top left, rgba(110, 231, 255, 0.12), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(224, 173, 69, 0.10), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.history-art {
    background:
        radial-gradient(circle at 50% 54%, rgba(110, 231, 255, 0.14), transparent 34%),
        radial-gradient(circle at 60% 32%, rgba(224, 173, 69, 0.10), transparent 24%);
}

.history-scroll {
    position: absolute;
    width: 230px;
    height: 155px;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%) rotate(-3deg);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(247, 231, 184, 0.96), rgba(154, 111, 55, 0.92));
    box-shadow:
        inset 0 0 22px rgba(255,255,255,0.12),
        0 24px 42px rgba(0,0,0,0.34);
}

.history-scroll::before,
.history-scroll::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    height: 6px;
    border-radius: 999px;
    background: rgba(49, 36, 20, 0.34);
}

.history-scroll::before {
    top: 42px;
}

.history-scroll::after {
    top: 72px;
}

.history-quill {
    position: absolute;
    width: 150px;
    height: 18px;
    right: 21%;
    top: 34%;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(24, 18, 14, 0.98), rgba(110, 231, 255, 0.88));
    transform: rotate(33deg);
    animation: quillWrite 4.2s ease-in-out infinite;
}

.history-quill::after {
    content: "";
    position: absolute;
    width: 44px;
    height: 30px;
    right: -28px;
    top: -6px;
    border-radius: 80% 20% 80% 20%;
    background: rgba(247, 231, 184, 0.95);
}

.history-ink {
    position: absolute;
    width: 46px;
    height: 38px;
    left: 34%;
    bottom: 24%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 22, 38, 0.98), rgba(110, 231, 255, 0.22));
    box-shadow: 0 0 18px rgba(110, 231, 255, 0.18);
}

.history-line {
    position: absolute;
    height: 3px;
    border-radius: 999px;
    background: rgba(110, 231, 255, 0.55);
    box-shadow: 0 0 12px rgba(110, 231, 255, 0.24);
    animation: approvalLine 4s ease-in-out infinite;
}

.history-line-a {
    width: 90px;
    left: 25%;
    top: 25%;
}

.history-line-b {
    width: 120px;
    right: 20%;
    bottom: 27%;
    animation-delay: 1.2s;
}

.history-line-c {
    width: 76px;
    right: 30%;
    top: 62%;
    animation-delay: 2s;
}

.history-dust {
    position: absolute;
    border-radius: 50%;
    background: rgba(224, 173, 69, 0.85);
    animation: dustFloat 6s ease-in-out infinite;
}

.dust-a {
    width: 8px;
    height: 8px;
    left: 28%;
    top: 28%;
}

.dust-b {
    width: 7px;
    height: 7px;
    right: 26%;
    top: 40%;
    animation-delay: 1.5s;
}

.dust-c {
    width: 9px;
    height: 9px;
    left: 62%;
    bottom: 25%;
    animation-delay: 2.7s;
}

/* =========================
   编年史视觉
   ========================= */

.chronicle-visual-banner {
    border-color: rgba(167, 139, 250, 0.30);
    background:
        radial-gradient(circle at top left, rgba(167, 139, 250, 0.13), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(110, 231, 255, 0.10), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.chronicle-art {
    background:
        radial-gradient(circle at 50% 52%, rgba(167, 139, 250, 0.16), transparent 34%),
        radial-gradient(circle at 62% 30%, rgba(110, 231, 255, 0.10), transparent 24%);
}

.time-wheel {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(167, 139, 250, 0.28);
    box-shadow:
        0 0 28px rgba(167, 139, 250, 0.15),
        inset 0 0 32px rgba(167, 139, 250, 0.08);
    animation: ringRotate 18s linear infinite;
}

.time-wheel::before,
.time-wheel::after {
    content: "";
    position: absolute;
    inset: 36px;
    border-radius: 50%;
    border: 1px dashed rgba(110, 231, 255, 0.24);
}

.time-wheel::after {
    inset: 72px;
    border-color: rgba(224, 173, 69, 0.24);
}

.time-wheel-inner {
    position: absolute;
    width: 74px;
    height: 74px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.92), rgba(167,139,250,0.52), transparent 72%);
    box-shadow: 0 0 24px rgba(167, 139, 250, 0.28);
    animation: pulseCore 3s ease-in-out infinite;
}

.chronicle-page {
    position: absolute;
    width: 80px;
    height: 110px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(247, 231, 184, 0.92), rgba(135, 95, 49, 0.88));
    box-shadow: 0 16px 28px rgba(0,0,0,0.24);
    opacity: 0.82;
    animation: pageFloat 5.5s ease-in-out infinite;
}

.page-a {
    left: 25%;
    top: 36%;
    transform: rotate(-12deg);
}

.page-b {
    right: 24%;
    top: 34%;
    transform: rotate(10deg);
    animation-delay: 1.5s;
}

.page-c {
    left: 54%;
    bottom: 18%;
    transform: rotate(5deg);
    animation-delay: 2.5s;
}

.time-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(110, 231, 255, 0.95);
    box-shadow: 0 0 16px rgba(110, 231, 255, 0.35);
    animation: orbFloat 5.2s ease-in-out infinite;
}

.time-dot-a {
    width: 11px;
    height: 11px;
    left: 28%;
    top: 28%;
}

.time-dot-b {
    width: 13px;
    height: 13px;
    right: 28%;
    top: 62%;
    animation-delay: 1.3s;
}

.time-dot-c {
    width: 9px;
    height: 9px;
    left: 68%;
    top: 26%;
    animation-delay: 2.2s;
}

/* =========================
   传奇录视觉
   ========================= */

.legends-visual-banner {
    border-color: rgba(224, 173, 69, 0.32);
    background:
        radial-gradient(circle at top left, rgba(224, 173, 69, 0.14), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(167, 139, 250, 0.11), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.legends-art {
    background:
        radial-gradient(circle at 50% 52%, rgba(224, 173, 69, 0.17), transparent 34%),
        radial-gradient(circle at 62% 30%, rgba(167, 139, 250, 0.10), transparent 24%);
}

.legend-monument {
    position: absolute;
    width: 145px;
    height: 190px;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    border-radius: 28px 28px 16px 16px;
    background:
        linear-gradient(180deg, rgba(224, 173, 69, 0.94), rgba(72, 49, 22, 0.96));
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow:
        inset 0 0 24px rgba(255,255,255,0.10),
        0 26px 48px rgba(0,0,0,0.36);
    animation: monumentGlow 4s ease-in-out infinite;
}

.legend-monument::before {
    content: "传";
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    color: rgba(26, 17, 7, 0.82);
    font-size: 48px;
    font-weight: 900;
}

.legend-monument::after {
    content: "";
    position: absolute;
    left: -24px;
    right: -24px;
    bottom: -18px;
    height: 32px;
    border-radius: 16px;
    background: rgba(20, 22, 38, 0.96);
    border: 1px solid rgba(224, 173, 69, 0.18);
}

.legend-halo {
    position: absolute;
    width: 250px;
    height: 250px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.26);
    box-shadow: 0 0 28px rgba(224, 173, 69, 0.14);
    animation: ringRotate 16s linear infinite;
}

.legend-constellation {
    position: absolute;
    width: 90px;
    height: 2px;
    background: rgba(167, 139, 250, 0.45);
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.25);
    animation: constellationGlow 4.8s ease-in-out infinite;
}

.constellation-a {
    left: 23%;
    top: 27%;
    transform: rotate(24deg);
}

.constellation-b {
    right: 20%;
    top: 35%;
    transform: rotate(-28deg);
    animation-delay: 1.6s;
}

.legend-flame {
    position: absolute;
    border-radius: 50% 50% 45% 45%;
    background: radial-gradient(circle at 50% 70%, rgba(255,255,255,0.9), rgba(224,173,69,0.78), rgba(255,114,114,0.32), transparent 70%);
    filter: blur(1px);
    animation: legendFlame 3s ease-in-out infinite;
}

.flame-a {
    width: 34px;
    height: 50px;
    left: 28%;
    bottom: 24%;
}

.flame-b {
    width: 28px;
    height: 42px;
    right: 29%;
    bottom: 28%;
    animation-delay: 1.2s;
}

.flame-c {
    width: 24px;
    height: 36px;
    left: 62%;
    top: 24%;
    animation-delay: 2.1s;
}

/* =========================
   UI-10 动画
   ========================= */

@keyframes tabletFloat {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-12px);
    }
}

@keyframes quillWrite {
    0%, 100% {
        transform: rotate(33deg) translateY(0);
    }

    50% {
        transform: rotate(27deg) translateY(12px);
    }
}

@keyframes dustFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.65;
    }

    50% {
        transform: translateY(-14px) scale(1.18);
        opacity: 1;
    }
}

@keyframes pageFloat {
    0%, 100% {
        translate: 0 0;
        opacity: 0.72;
    }

    50% {
        translate: 0 -12px;
        opacity: 1;
    }
}

@keyframes monumentGlow {
    0%, 100% {
        box-shadow:
            inset 0 0 24px rgba(255,255,255,0.10),
            0 26px 48px rgba(0,0,0,0.36),
            0 0 0 rgba(224,173,69,0);
    }

    50% {
        box-shadow:
            inset 0 0 28px rgba(255,255,255,0.14),
            0 26px 48px rgba(0,0,0,0.36),
            0 0 34px rgba(224,173,69,0.22);
    }
}

@keyframes constellationGlow {
    0%, 100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;
    }
}

@keyframes legendFlame {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.68;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

/* =========================
   UI-11 排行榜子页面统一视觉
   ========================= */

.sub-rank-visual {
    border-color: rgba(224, 173, 69, 0.26);
    background:
        radial-gradient(circle at top left, rgba(224, 173, 69, 0.12), transparent 32%),
        radial-gradient(circle at 82% 20%, rgba(110, 231, 255, 0.09), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.sub-rank-art {
    background:
        radial-gradient(circle at 50% 52%, rgba(224, 173, 69, 0.14), transparent 34%),
        radial-gradient(circle at 65% 30%, rgba(110, 231, 255, 0.08), transparent 24%);
}

.battle-rank-visual {
    border-color: rgba(255, 114, 114, 0.28);
}

.artifact-rank-visual,
.crafting-rank-visual {
    border-color: rgba(224, 173, 69, 0.30);
}

.item-rank-visual,
.sect-rank-visual {
    border-color: rgba(143, 240, 178, 0.26);
}

.alchemy-rank-visual {
    border-color: rgba(167, 139, 250, 0.30);
}

.rank-core {
    position: absolute;
    width: 150px;
    height: 150px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(2px);
    animation: rankCorePulse 3.2s ease-in-out infinite;
}

.rank-battle-core {
    background: radial-gradient(circle, rgba(255,255,255,0.92), rgba(255,114,114,0.35), transparent 70%);
}

.rank-artifact-core,
.rank-crafting-core {
    background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(224,173,69,0.35), transparent 70%);
}

.rank-item-core,
.rank-sect-core {
    background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(143,240,178,0.30), transparent 70%);
}

.rank-alchemy-core {
    background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(167,139,250,0.36), transparent 70%);
}

.rank-blade {
    position: absolute;
    width: 5px;
    height: 190px;
    left: 50%;
    top: 24%;
    border-radius: 999px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.95), transparent);
    box-shadow: 0 0 18px rgba(255,255,255,0.22);
}

.rank-blade-a {
    transform: rotate(42deg);
}

.rank-blade-b {
    transform: rotate(-42deg);
    background: linear-gradient(to bottom, transparent, rgba(255,114,114,0.95), transparent);
}

.rank-ring {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.32);
}

.rank-ring-a {
    width: 230px;
    height: 230px;
    animation: ringRotate 16s linear infinite;
}

.rank-ring-b {
    width: 150px;
    height: 150px;
    border-color: rgba(110, 231, 255, 0.22);
    animation: ringRotateReverse 12s linear infinite;
}

.rank-floating-sword {
    position: absolute;
    width: 38px;
    height: 180px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(18deg);
    background:
        linear-gradient(to bottom, transparent, rgba(255,255,255,0.96), rgba(224,173,69,0.85), transparent);
    clip-path: polygon(45% 0, 60% 0, 72% 72%, 55% 100%, 40% 100%, 28% 72%);
    filter: drop-shadow(0 0 18px rgba(224, 173, 69, 0.35));
    animation: artifactFloat 4s ease-in-out infinite;
}

.rank-treasure-box {
    position: absolute;
    width: 170px;
    height: 105px;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    border-radius: 22px 22px 28px 28px;
    background:
        linear-gradient(180deg, rgba(224, 173, 69, 0.95), rgba(91, 58, 25, 0.96));
    box-shadow:
        inset 0 0 20px rgba(255,255,255,0.12),
        0 22px 42px rgba(0,0,0,0.32);
}

.rank-treasure-box::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 38px;
    height: 6px;
    background: rgba(20, 22, 38, 0.70);
}

.rank-gem,
.rank-orb,
.rank-pill-dot,
.rank-spark-dot {
    position: absolute;
    border-radius: 50%;
    animation: orbFloat 5.5s ease-in-out infinite;
}

.gem-a,
.orb-one,
.pill-one,
.spark-one {
    width: 16px;
    height: 16px;
    left: 30%;
    top: 28%;
    background: rgba(224, 173, 69, 0.95);
}

.gem-b,
.orb-two,
.pill-two,
.spark-two {
    width: 13px;
    height: 13px;
    right: 28%;
    top: 36%;
    background: rgba(110, 231, 255, 0.95);
    animation-delay: 1.4s;
}

.gem-c,
.orb-three {
    width: 14px;
    height: 14px;
    left: 60%;
    top: 70%;
    background: rgba(167, 139, 250, 0.95);
    animation-delay: 2.3s;
}

.rank-cauldron-mini {
    position: absolute;
    width: 165px;
    height: 100px;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    border-radius: 24px 24px 44px 44px;
    background:
        linear-gradient(180deg, rgba(72, 63, 102, 0.98), rgba(23, 25, 42, 0.98));
    box-shadow:
        inset 0 0 20px rgba(255,255,255,0.08),
        0 22px 42px rgba(0,0,0,0.34);
}

.rank-smoke {
    position: absolute;
    border-radius: 50%;
    background: rgba(167, 139, 250, 0.18);
    filter: blur(12px);
    animation: smokeRise 5s ease-in-out infinite;
}

.smoke-one {
    width: 80px;
    height: 80px;
    left: 38%;
    top: 22%;
}

.smoke-two {
    width: 96px;
    height: 96px;
    right: 28%;
    top: 18%;
    animation-delay: 1.8s;
}

.rank-anvil-mini {
    position: absolute;
    width: 180px;
    height: 76px;
    left: 50%;
    top: 66%;
    transform: translate(-50%, -50%);
    border-radius: 20px 20px 26px 26px;
    background:
        linear-gradient(180deg, rgba(90, 91, 105, 0.98), rgba(25, 27, 40, 0.98));
    box-shadow:
        inset 0 0 18px rgba(255,255,255,0.08),
        0 22px 42px rgba(0,0,0,0.34);
}

.rank-hammer-mini {
    position: absolute;
    width: 126px;
    height: 24px;
    left: 55%;
    top: 36%;
    border-radius: 10px;
    background:
        linear-gradient(90deg, rgba(224,173,69,0.95), rgba(88,55,24,0.95));
    transform: rotate(-28deg);
    animation: hammerStrike 2.6s ease-in-out infinite;
}

.rank-sect-token {
    position: absolute;
    width: 115px;
    height: 145px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.96), rgba(88, 57, 28, 0.96));
    box-shadow:
        inset 0 0 24px rgba(255,255,255,0.12),
        0 24px 44px rgba(0,0,0,0.34);
    animation: tokenFloat 4.5s ease-in-out infinite;
}

.rank-sect-token::after {
    content: "贡";
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    color: rgba(20, 14, 8, 0.88);
    font-size: 42px;
    font-weight: 900;
}

.rank-banner-small {
    position: absolute;
    width: 58px;
    height: 145px;
    top: 32%;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(143, 240, 178, 0.72), rgba(38, 74, 54, 0.88));
    border: 1px solid rgba(143, 240, 178, 0.22);
}

.banner-a {
    left: 25%;
    transform: rotate(-8deg);
}

.banner-b {
    right: 25%;
    transform: rotate(8deg);
}

@keyframes rankCorePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.94);
        opacity: 0.55;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.95;
    }
}

/* =========================
   UI-12 统一表格 / 榜单 / 记录列表样式
   ========================= */

/* ---------- 通用资料区标题 ---------- */

.card > h2,
.card .section-title-row h2 {
    letter-spacing: -0.03em;
}

.card > p.muted,
.section-title-row .muted {
    color: var(--ui-muted);
    line-height: 1.7;
}

/* ---------- 所有榜单行统一 ---------- */

.rank-list {
    display: grid;
    gap: 12px;
}

.rank-row {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
        rgba(18, 20, 35, 0.78);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.rank-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent, rgba(224, 173, 69, 0.055), transparent);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
}

.rank-row:hover {
    transform: translateY(-2px);
    border-color: rgba(224, 173, 69, 0.28);
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(18, 20, 35, 0.82);
}

.rank-row:hover::before {
    transform: translateX(120%);
}

.rank-number {
    position: relative;
    z-index: 2;
    min-width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background:
        radial-gradient(circle at top, rgba(224, 173, 69, 0.24), rgba(224, 173, 69, 0.08));
    color: var(--ui-gold-2);
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.18);
}

.rank-main {
    position: relative;
    z-index: 2;
}

.rank-main strong {
    color: var(--ui-text);
    font-size: 16px;
}

.rank-main p {
    color: var(--ui-muted);
    line-height: 1.65;
    margin: 6px 0;
}

.rank-main span {
    color: rgba(247, 243, 232, 0.72);
    font-size: 13px;
}

.rank-score {
    position: relative;
    z-index: 2;
    justify-self: end;
    min-width: 96px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.10);
    border: 1px solid rgba(224, 173, 69, 0.20);
    color: var(--ui-gold-2);
    font-size: 13px;
    font-weight: 950;
    text-align: center;
}

/* ---------- Top 3 榜单视觉 ---------- */

.rank-list .rank-row:nth-child(1) {
    border-color: rgba(255, 215, 120, 0.34);
    background:
        radial-gradient(circle at top right, rgba(255, 215, 120, 0.13), transparent 32%),
        rgba(18, 20, 35, 0.84);
}

.rank-list .rank-row:nth-child(2) {
    border-color: rgba(210, 220, 235, 0.24);
}

.rank-list .rank-row:nth-child(3) {
    border-color: rgba(214, 145, 84, 0.24);
}

.rank-list .rank-row:nth-child(1) .rank-number {
    background:
        radial-gradient(circle, rgba(255, 240, 170, 0.35), rgba(224, 173, 69, 0.12));
    box-shadow: 0 0 22px rgba(224, 173, 69, 0.18);
}

/* ---------- 通用 mini stats ---------- */

.mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.mini-stats span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(255, 255, 255, 0.045);
    color: rgba(247, 243, 232, 0.74);
    font-size: 12px;
    font-weight: 800;
}

/* ---------- 通用列表卡片 ---------- */

.item,
.timeline-event,
.legend-card,
.alchemy-log,
.crafting-log,
.market-listing,
.warehouse-entry,
.warehouse-request-row,
.warehouse-request-mini,
.role-member-row,
.inventory-item,
.artifact-item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.024)),
        rgba(18, 20, 35, 0.76);
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.item:hover,
.timeline-event:hover,
.legend-card:hover,
.alchemy-log:hover,
.crafting-log:hover,
.market-listing:hover,
.warehouse-entry:hover,
.warehouse-request-row:hover,
.warehouse-request-mini:hover,
.role-member-row:hover,
.inventory-item:hover,
.artifact-item:hover {
    transform: translateY(-2px);
    border-color: rgba(224, 173, 69, 0.24);
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.055), rgba(255, 255, 255, 0.024)),
        rgba(18, 20, 35, 0.82);
}

/* ---------- 物品 / 法器网格统一 ---------- */

.inventory-grid,
.artifact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.inventory-item,
.artifact-item {
    padding: 18px;
}

.inventory-header,
.artifact-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.inventory-header h3,
.artifact-header h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

.inventory-header p,
.artifact-header p {
    margin: 0;
    color: var(--ui-muted);
}

.inventory-header > span,
.artifact-header > span {
    min-width: fit-content;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.10);
    border: 1px solid rgba(224, 173, 69, 0.20);
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 950;
}

/* ---------- 品级颜色统一 ---------- */

.grade-凡品 {
    border-color: rgba(255, 255, 255, 0.09);
}

.grade-灵品 {
    border-color: rgba(143, 240, 178, 0.22);
}

.grade-玄品 {
    border-color: rgba(110, 231, 255, 0.24);
}

.grade-地品 {
    border-color: rgba(167, 139, 250, 0.26);
}

.grade-天品 {
    border-color: rgba(224, 173, 69, 0.34);
    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.20),
        0 0 24px rgba(224, 173, 69, 0.08);
}

.grade-天品::after,
.grade-地品::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -54px;
    top: -54px;
    border-radius: 50%;
    background: rgba(224, 173, 69, 0.12);
    pointer-events: none;
}

.grade-地品::after {
    background: rgba(167, 139, 250, 0.10);
}

/* ---------- 状态颜色统一 ---------- */

.result-success,
.status-approved,
.status-sold,
.status-available {
    border-color: rgba(143, 240, 178, 0.23);
}

.result-failed,
.status-rejected,
.status-cancelled {
    border-color: rgba(255, 114, 114, 0.23);
}

.status-pending {
    border-color: rgba(224, 173, 69, 0.24);
}

/* ---------- 链接统一 ---------- */

.story-link,
.card a:not(.nav-button):not(.feature-hub-card):not(.recipe-card-link):not(.world-action) {
    color: var(--ui-gold-2);
    font-weight: 900;
    text-decoration: none;
}

.story-link:hover,
.card a:not(.nav-button):not(.feature-hub-card):not(.recipe-card-link):not(.world-action):hover {
    text-decoration: underline;
}

/* ---------- 表格统一 ---------- */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

thead th {
    padding: 10px 12px;
    color: var(--ui-gold-2);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    border-bottom: 1px solid rgba(224, 173, 69, 0.16);
}

tbody tr {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.022));
    transition: transform 0.15s ease, background 0.15s ease;
}

tbody tr:hover {
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.07), rgba(255, 255, 255, 0.024));
}

tbody td {
    padding: 13px 12px;
    color: rgba(247, 243, 232, 0.82);
    border-top: 1px solid rgba(255, 255, 255, 0.065);
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 14px 0 0 14px;
}

tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 0 14px 14px 0;
}

/* ---------- 表格外层避免手机爆版 ---------- */

.card table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
}

.card table::-webkit-scrollbar {
    height: 8px;
}

.card table::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

.card table::-webkit-scrollbar-thumb {
    background: rgba(224, 173, 69, 0.28);
    border-radius: 999px;
}

/* ---------- 表单与操作区统一 ---------- */

form {
    gap: 10px;
}

form label span,
label span {
    color: var(--ui-gold-2);
    font-size: 13px;
    font-weight: 900;
}

button.danger-action,
.danger-action {
    background: linear-gradient(135deg, #ff7272, #ffad72) !important;
    color: #1a0c0c !important;
}

button.battle-action,
.battle-action {
    background: linear-gradient(135deg, #ff7272, #a78bfa) !important;
    color: #120c18 !important;
}

/* ---------- 空状态统一 ---------- */

.muted {
    color: var(--ui-muted);
}

.card > .muted,
section > .muted {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.03);
}

/* ---------- 页面中的记录列表限制高度 ---------- */

.alchemy-log-list,
.crafting-log-list,
.market-list,
.warehouse-list,
.warehouse-request-list,
.role-member-list {
    display: grid;
    gap: 12px;
}

/* ---------- 右侧紧凑列表 ---------- */

.compact-list,
.sect-list.compact,
.legend-list.compact {
    display: grid;
    gap: 10px;
}

.compact-list .item,
.sect-list.compact .sect-row,
.legend-list.compact .legend-card {
    padding: 14px;
}

/* ---------- 小标签统一 ---------- */

.event-type-pill,
.requirement-box,
.role-policy-box,
.role-permission-card,
.summary-box {
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.event-type-pill:hover,
.requirement-box:hover,
.role-policy-box:hover,
.role-permission-card:hover,
.summary-box:hover {
    transform: translateY(-1px);
    border-color: rgba(224, 173, 69, 0.24);
    background: rgba(255, 255, 255, 0.055);
}

/* ---------- 响应式 ---------- */

@media (max-width: 980px) {
    .inventory-grid,
    .artifact-grid {
        grid-template-columns: 1fr;
    }

    .rank-row {
        grid-template-columns: 1fr !important;
    }

    .rank-number,
    .rank-score {
        justify-self: start;
    }

    .inventory-header,
    .artifact-header {
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .mini-stats {
        display: grid;
        grid-template-columns: 1fr;
    }

    .mini-stats span {
        width: 100%;
        justify-content: center;
    }

    .rank-score {
        width: 100%;
    }
}

/* =========================
   UI-13 注册页 + 表单 / 开发工具页面统一风格
   ========================= */

/* ---------- 注册页动态视觉 ---------- */

.register-visual-stage {
    border-color: rgba(167, 139, 250, 0.20);
    background:
        radial-gradient(circle at 20% 20%, rgba(167, 139, 250, 0.14), transparent 25%),
        radial-gradient(circle at 80% 30%, rgba(224, 173, 69, 0.12), transparent 22%),
        linear-gradient(135deg, rgba(10, 12, 28, 0.96), rgba(23, 18, 48, 0.96));
}

.register-scroll {
    position: absolute;
    width: 230px;
    height: 155px;
    right: 16%;
    top: 25%;
    transform: rotate(-8deg);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(247, 231, 184, 0.95), rgba(150, 105, 52, 0.92));
    box-shadow:
        inset 0 0 22px rgba(255, 255, 255, 0.12),
        0 24px 44px rgba(0, 0, 0, 0.32);
    animation: registerScrollFloat 5s ease-in-out infinite;
}

.register-scroll::before,
.register-scroll::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    height: 6px;
    border-radius: 999px;
    background: rgba(49, 36, 20, 0.34);
}

.register-scroll::before {
    top: 42px;
}

.register-scroll::after {
    top: 74px;
}

.register-seal {
    position: absolute;
    width: 72px;
    height: 72px;
    right: 27%;
    top: 43%;
    border-radius: 22px;
    border: 3px solid rgba(255, 74, 74, 0.70);
    background: rgba(255, 74, 74, 0.10);
    transform: rotate(-12deg);
    box-shadow: 0 0 24px rgba(255, 74, 74, 0.18);
    animation: registerSealPulse 3s ease-in-out infinite;
}

.register-orb {
    position: absolute;
    border-radius: 50%;
    animation: orbFloat 6s ease-in-out infinite;
}

.register-orb-a {
    width: 17px;
    height: 17px;
    left: 18%;
    top: 30%;
    background: rgba(224, 173, 69, 0.95);
}

.register-orb-b {
    width: 13px;
    height: 13px;
    left: 62%;
    top: 18%;
    background: rgba(167, 139, 250, 0.95);
    animation-delay: 1.4s;
}

.register-orb-c {
    width: 15px;
    height: 15px;
    right: 20%;
    top: 58%;
    background: rgba(110, 231, 255, 0.95);
    animation-delay: 2.4s;
}

@keyframes registerScrollFloat {
    0%, 100% {
        transform: rotate(-8deg) translateY(0);
    }

    50% {
        transform: rotate(-5deg) translateY(-14px);
    }
}

@keyframes registerSealPulse {
    0%, 100% {
        transform: rotate(-12deg) scale(0.94);
        opacity: 0.68;
    }

    50% {
        transform: rotate(-12deg) scale(1.08);
        opacity: 1;
    }
}

/* ---------- 通用管理 / 表单页面 ---------- */

.admin-page-shell,
.settings-page,
.cleanup-page,
.dev-tools-page,
.system-page,
.qa-page,
.bug-page,
.report-page {
    max-width: 1180px;
    margin: 0 auto;
}

/* 没有专属 class 的页面，也通过 card 风格统一 */
.card form:not(.auth-form):not(.warehouse-request-form) {
    display: grid;
    gap: 14px;
}

.card form label {
    display: grid;
    gap: 8px;
}

.card form input,
.card form select,
.card form textarea {
    width: 100%;
}

.card form textarea {
    min-height: 120px;
    resize: vertical;
    padding: 13px 14px;
    line-height: 1.7;
}

/* 普通管理卡片更像后台控制台 */
.settings-card,
.cleanup-card,
.dev-card,
.system-card,
.qa-card,
.bug-card,
.report-card,
.admin-card {
    margin-top: 20px;
    border-color: rgba(110, 231, 255, 0.16);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.07), transparent 34%),
        rgba(20, 22, 38, 0.86);
}

.settings-card h2,
.cleanup-card h2,
.dev-card h2,
.system-card h2,
.qa-card h2,
.bug-card h2,
.report-card h2,
.admin-card h2 {
    color: var(--ui-cyan);
}

/* 开发 / 危险操作区域降噪但保留警示 */
.dev-warning,
.danger-zone,
.cleanup-danger,
.admin-danger {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 114, 114, 0.24);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.08), transparent 34%),
        rgba(255, 114, 114, 0.045);
}

.dev-warning h2,
.danger-zone h2,
.cleanup-danger h2,
.admin-danger h2 {
    color: #ff9d9d;
}

/* 管理按钮区域 */
.admin-action-grid,
.dev-action-grid,
.settings-action-grid,
.cleanup-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.admin-action-grid a,
.dev-action-grid a,
.settings-action-grid a,
.cleanup-action-grid a,
.admin-action-grid button,
.dev-action-grid button,
.settings-action-grid button,
.cleanup-action-grid button {
    min-height: 44px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 14px;
    text-decoration: none;
}

/* 通用信息面板 */
.info-grid,
.admin-info-grid,
.system-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.info-box,
.admin-info-box,
.system-info-box {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background: rgba(255, 255, 255, 0.045);
}

.info-box strong,
.admin-info-box strong,
.system-info-box strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 22px;
    margin-bottom: 6px;
}

.info-box span,
.admin-info-box span,
.system-info-box span {
    color: var(--ui-muted);
    font-size: 13px;
}

/* 设置类表单排版 */
.settings-form,
.admin-form,
.bug-form,
.report-form {
    display: grid;
    gap: 16px;
}

.settings-form-grid,
.admin-form-grid,
.bug-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* checkbox / radio 不要变形 */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    accent-color: var(--ui-gold);
}

/* 文件 / code / pre 输出更专业 */
pre,
code {
    border-radius: 14px;
}

pre {
    padding: 16px;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background: rgba(5, 7, 17, 0.72);
    color: rgba(247, 243, 232, 0.88);
    line-height: 1.65;
}

code {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--ui-gold-2);
}

/* 页面顶部工具按钮统一 */
.page-actions,
.admin-actions,
.header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.page-actions a,
.admin-actions a,
.header-actions a {
    min-height: 38px;
    display: inline-grid;
    place-items: center;
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.085);
    background: rgba(255,255,255,0.045);
    color: var(--ui-text);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.page-actions a:hover,
.admin-actions a:hover,
.header-actions a:hover {
    border-color: rgba(224, 173, 69, 0.30);
    background: rgba(224, 173, 69, 0.10);
}

/* 开发工具列表统一 */
.tool-list,
.admin-list,
.report-list {
    display: grid;
    gap: 12px;
}

.tool-row,
.admin-row,
.report-row {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background: rgba(255, 255, 255, 0.045);
}

.tool-row strong,
.admin-row strong,
.report-row strong {
    color: var(--ui-text);
}

.tool-row p,
.admin-row p,
.report-row p {
    color: var(--ui-muted);
    line-height: 1.7;
}

/* 简单给所有页面里的 select option 更可读 */
select option {
    background: #111427;
    color: #f7f3e8;
}

/* 响应式 */
@media (max-width: 980px) {
    .admin-action-grid,
    .dev-action-grid,
    .settings-action-grid,
    .cleanup-action-grid,
    .info-grid,
    .admin-info-grid,
    .system-info-grid,
    .settings-form-grid,
    .admin-form-grid,
    .bug-form-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   UI-14 全站 Loading / Hover / Page Transition 微动效
   ========================= */

/* ---------- 页面进入淡入 ---------- */

body {
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.32s ease,
        transform 0.32s ease;
}

body.page-ready {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- 全站 loading overlay ---------- */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(224, 173, 69, 0.12), transparent 26%),
        radial-gradient(circle at 62% 58%, rgba(110, 231, 255, 0.10), transparent 28%),
        rgba(5, 7, 17, 0.74);
    backdrop-filter: blur(10px);
    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}

.page-loader.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.page-loader p {
    position: absolute;
    top: calc(50% + 82px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--ui-gold-2);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.loader-orb {
    position: absolute;
    width: 74px;
    height: 74px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(224, 173, 69, 0.72), rgba(110, 231, 255, 0.25), transparent 72%);
    box-shadow:
        0 0 28px rgba(224, 173, 69, 0.25),
        0 0 58px rgba(110, 231, 255, 0.12);
    animation: loaderOrbPulse 1.8s ease-in-out infinite;
}

.loader-ring {
    position: absolute;
    width: 138px;
    height: 138px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.24);
    border-top-color: rgba(224, 173, 69, 0.95);
    border-right-color: rgba(110, 231, 255, 0.70);
    animation: loaderRingSpin 1.1s linear infinite;
}

/* ---------- button loading ---------- */

button.is-loading,
button[disabled].is-loading {
    position: relative;
    opacity: 0.82;
    cursor: wait;
}

button.is-loading::after {
    content: "";
    width: 15px;
    height: 15px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: -2px;
    border-radius: 50%;
    border: 2px solid rgba(20, 14, 8, 0.26);
    border-top-color: rgba(20, 14, 8, 0.88);
    animation: buttonSpinner 0.8s linear infinite;
}

/* ---------- 全站 hover 微动效 ---------- */

.card {
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.card:hover {
    box-shadow:
        var(--ui-shadow),
        0 0 0 1px rgba(224, 173, 69, 0.045);
}

.nav-button,
button,
.card a,
.summary-box,
.feature-hub-card,
.world-hub-section,
.scene-action-card,
.page-visual-banner {
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

button:active,
.nav-button:active,
.card a:active {
    transform: translateY(1px) scale(0.99);
}

/* ---------- 输入框更有焦点感 ---------- */

input,
select,
textarea {
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

input:focus,
select:focus,
textarea:focus {
    transform: translateY(-1px);
}

/* ---------- details 折叠动画感 ---------- */

details.nav-drawer[open] .nav-drawer-content {
    animation: drawerReveal 0.22s ease both;
}

details summary {
    transition:
        background 0.18s ease,
        color 0.18s ease;
}

details summary:hover {
    background: rgba(255, 255, 255, 0.035);
}

/* ---------- 页面视觉头图轻微浮动 ---------- */

.page-visual-banner .visual-art,
.world-hero-art,
.auth-stage-bg {
    animation: subtleSceneDrift 10s ease-in-out infinite;
}

/* 不让内部已经有动画的东西太夸张 */
.page-visual-banner .visual-art > *,
.world-hero-art > *,
.auth-stage-bg > * {
    will-change: transform, opacity;
}

/* ---------- 通用 reveal ---------- */

.card,
.world-hero-banner,
.page-visual-banner {
    animation: cardReveal 0.36s ease both;
}

.game-dashboard .dashboard-left {
    animation-delay: 0.04s;
}

.game-dashboard .dashboard-center {
    animation-delay: 0.08s;
}

.game-dashboard .dashboard-right {
    animation-delay: 0.12s;
}

/* ---------- 动画定义 ---------- */

@keyframes loaderOrbPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.94);
        opacity: 0.72;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
}

@keyframes loaderRingSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes buttonSpinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes drawerReveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subtleSceneDrift {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- 尊重系统减少动画设置 ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    body {
        opacity: 1;
        transform: none;
    }

    .page-loader {
        display: none;
    }
}

/* =========================
   UI-15 最终全站收尾修复
   ========================= */

/* 避免横向爆版 */
* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

/* 全站页面容器统一 */
.page {
    width: min(100%, 1380px);
    margin: 0 auto;
    padding: 0 22px 42px;
}

/* 顶部区域更稳 */
.topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 22px;
}

.topbar > div:first-child {
    min-width: 0;
}

.topbar h1,
.topbar p {
    overflow-wrap: anywhere;
}

/* 过长按钮文字不要撑爆 */
button,
.nav-button,
.card a,
summary,
input,
select,
textarea {
    max-width: 100%;
}

/* 卡片内容不要被长文字撑爆 */
.card,
.rank-row,
.item,
.market-listing,
.warehouse-entry,
.warehouse-request-row,
.role-member-row,
.artifact-item,
.inventory-item {
    min-width: 0;
}

.card p,
.card span,
.card strong,
.card h2,
.card h3 {
    overflow-wrap: anywhere;
}

/* 修复部分页面按钮太满 */
.visual-mini-actions .nav-button,
.export-actions .nav-button,
.header-actions .nav-button {
    white-space: nowrap;
}

/* 让顶部导航在小屏更自然 */
.main-nav-row {
    max-width: 100%;
}

.main-nav-row .nav-button {
    white-space: nowrap;
}

/* 开发工具类视觉降噪 */
.dev-nav-group,
.dev-warning,
.danger-zone,
.cleanup-danger,
.admin-danger {
    opacity: 0.92;
}

/* 所有 disabled 状态统一 */
button:disabled,
button[disabled],
.secondary[disabled] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.2);
    box-shadow: none !important;
    transform: none !important;
}

/* 表单按钮在卡片里不要过分拥挤 */
.card form button {
    padding-left: 14px;
    padding-right: 14px;
}

/* 统一 select 高度 */
select,
input {
    min-height: 42px;
}

/* textarea 更好读 */
textarea {
    font-family: inherit;
}

/* 页面视觉 banner 在手机上不要太高 */
@media (max-width: 980px) {
    .page {
        padding-left: 16px;
        padding-right: 16px;
    }

    .topbar {
        grid-template-columns: 1fr;
    }

    .main-nav-row {
        justify-content: flex-start;
    }

    .page-visual-banner,
    .world-hero-banner {
        min-height: auto;
    }
}

/* 手机端按钮全部变好按 */
@media (max-width: 640px) {
    .page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .nav-button,
    button,
    .card a[href^="/"] {
        min-height: 42px;
    }

    .visual-mini-actions,
    .export-actions,
    .header-actions,
    .page-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .visual-mini-actions .nav-button,
    .export-actions .nav-button,
    .header-actions .nav-button,
    .page-actions a {
        width: 100%;
    }

    .auth-page-enhanced {
        padding-left: 12px;
        padding-right: 12px;
    }

    .auth-visual-stage {
        min-height: 460px;
    }

    .auth-stage-content h1 {
        font-size: 38px;
    }

    .auth-card {
        border-radius: 22px;
    }
}

/* 极小屏幕 */
@media (max-width: 420px) {
    .topbar h1 {
        font-size: 30px;
    }

    .visual-copy h2,
    .world-hero-copy h2 {
        font-size: 26px;
    }

    .auth-stage-content {
        padding: 28px 18px;
    }

    .auth-stage-content h1 {
        font-size: 34px;
    }
}

/* =========================
   UI-16 全屏融合式 Login 页面
   ========================= */

.login-fusion-shell {
    min-height: 100vh;
}

/* 全屏铺开，不再是小卡 + 大卡割裂 */
.full-bleed-stage {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

.login-fusion-stage {
    position: relative;
    background:
        radial-gradient(circle at 18% 20%, rgba(224, 173, 69, 0.12), transparent 22%),
        radial-gradient(circle at 82% 26%, rgba(110, 231, 255, 0.11), transparent 24%),
        linear-gradient(115deg, #090b17 0%, #060918 38%, #07103a 100%);
    display: flex;
    align-items: center;
    padding: 42px clamp(18px, 3vw, 44px);
}

.login-scene-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* 大范围光影 */
.login-scene-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    opacity: 0.9;
}

.glow-left {
    width: 520px;
    height: 520px;
    left: -120px;
    top: 10%;
    background: radial-gradient(circle, rgba(224, 173, 69, 0.16), transparent 68%);
}

.glow-right {
    width: 620px;
    height: 620px;
    right: -140px;
    top: 14%;
    background: radial-gradient(circle, rgba(110, 231, 255, 0.16), transparent 68%);
}

/* 月亮 */
.login-moon {
    position: absolute;
    right: 15%;
    top: 14%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,0.98), rgba(208,232,255,0.75), rgba(110,231,255,0.10), transparent 76%);
    box-shadow:
        0 0 48px rgba(110, 231, 255, 0.15),
        0 0 120px rgba(110, 231, 255, 0.06);
    animation: moonBreath 5s ease-in-out infinite;
}

/* 剑光 */
.login-sword-light {
    position: absolute;
    right: 28%;
    top: 18%;
    width: 4px;
    height: 220px;
    border-radius: 999px;
    background: linear-gradient(to bottom, transparent, rgba(110,231,255,0.95), transparent);
    box-shadow: 0 0 20px rgba(110, 231, 255, 0.25);
    transform: rotate(20deg);
    animation: swordGlow 4s ease-in-out infinite;
}

/* 星点 */
.login-star {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 14px rgba(255,255,255,0.35);
    animation: starTwinkle 4.6s ease-in-out infinite;
}

.star-a {
    width: 9px;
    height: 9px;
    left: 22%;
    top: 18%;
}

.star-b {
    width: 6px;
    height: 6px;
    left: 48%;
    top: 38%;
    animation-delay: 1.1s;
}

.star-c {
    width: 8px;
    height: 8px;
    right: 24%;
    top: 30%;
    animation-delay: 2.1s;
}

.star-d {
    width: 7px;
    height: 7px;
    right: 38%;
    top: 46%;
    animation-delay: 3s;
}

/* 云雾 */
.login-mist {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    background: rgba(255,255,255,0.06);
    animation: mistMove 14s ease-in-out infinite;
}

.mist-a {
    width: 360px;
    height: 120px;
    left: 8%;
    bottom: 20%;
}

.mist-b {
    width: 440px;
    height: 150px;
    right: 12%;
    bottom: 16%;
    animation-delay: 4s;
}

/* 山层 */
.login-mountain {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: repeat-x;
    opacity: 0.95;
}

.mountain-back {
    height: 190px;
    background:
        linear-gradient(to top, rgba(6, 10, 24, 0.96), rgba(6, 10, 24, 0)),
        polygon(0 100%);
    clip-path: polygon(
        0 100%, 0 74%, 8% 68%, 15% 75%, 25% 65%, 36% 78%, 46% 64%, 56% 76%, 67% 66%, 79% 78%, 90% 69%, 100% 76%, 100% 100%
    );
    background-color: rgba(12, 16, 34, 0.85);
}

.mountain-mid {
    height: 155px;
    clip-path: polygon(
        0 100%, 0 72%, 10% 60%, 18% 74%, 32% 57%, 41% 76%, 55% 55%, 66% 72%, 79% 60%, 89% 75%, 100% 66%, 100% 100%
    );
    background: linear-gradient(to top, rgba(8, 13, 30, 0.96), rgba(8, 13, 30, 0.08));
}

.mountain-front {
    height: 125px;
    clip-path: polygon(
        0 100%, 0 66%, 12% 54%, 25% 70%, 39% 50%, 52% 72%, 66% 52%, 79% 66%, 91% 56%, 100% 64%, 100% 100%
    );
    background: linear-gradient(to top, rgba(4, 7, 18, 0.98), rgba(4, 7, 18, 0.12));
}

/* 中央布局 */
.login-fusion-grid {
    position: relative;
    z-index: 2;
    width: min(1320px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) 420px;
    gap: 34px;
    align-items: center;
}

.login-fusion-copy {
    padding: 28px 18px 28px 18px;
}

.fusion-badge {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    margin-bottom: 18px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.28);
    background: rgba(224, 173, 69, 0.08);
    color: var(--ui-gold-2);
    font-size: 13px;
    font-weight: 900;
}

.login-fusion-copy h1 {
    margin: 0 0 18px;
    max-width: 760px;
    font-size: clamp(54px, 7vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.05em;
    color: #f4f0e8;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.fusion-subtitle {
    max-width: 760px;
    margin: 0;
    color: rgba(236, 231, 221, 0.80);
    font-size: 17px;
    line-height: 1.9;
}

.fusion-feature-row {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 760px;
}

.fusion-feature-card {
    padding: 18px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        rgba(15, 18, 34, 0.48);
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.fusion-feature-card strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 16px;
    margin-bottom: 8px;
}

.fusion-feature-card span {
    color: rgba(236, 231, 221, 0.68);
    line-height: 1.7;
    font-size: 14px;
}

/* 右边登录面板，现在直接融入场景 */
.login-fusion-panel {
    display: flex;
    justify-content: center;
}

.fusion-panel-inner {
    width: 100%;
    max-width: 420px;
    padding: 34px 30px 28px;
    border-radius: 28px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)),
        rgba(11, 14, 30, 0.72);
    backdrop-filter: blur(14px);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255,255,255,0.02);
}

.fusion-panel-header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.fusion-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.10);
    color: var(--ui-gold-2);
    font-weight: 950;
    font-size: 15px;
    flex-shrink: 0;
}

.fusion-panel-header h2 {
    margin: 0 0 6px;
    font-size: 24px;
    color: #f4f0e8;
}

.fusion-panel-header p {
    margin: 0;
    color: var(--ui-muted);
    line-height: 1.7;
}

.fusion-login-form {
    display: grid;
    gap: 16px;
}

.fusion-login-form label {
    display: grid;
    gap: 8px;
}

.fusion-login-form label span {
    color: #f2ede2;
    font-weight: 900;
    font-size: 14px;
}

.fusion-login-form input {
    min-height: 48px;
    border-radius: 16px;
    background: rgba(5, 8, 22, 0.78);
    border: 1px solid rgba(255,255,255,0.08);
    color: #f7f3e8;
}

.fusion-login-form input:focus {
    border-color: rgba(224, 173, 69, 0.42);
    box-shadow: 0 0 0 4px rgba(224, 173, 69, 0.10);
}

.fusion-login-form button {
    min-height: 50px;
    margin-top: 4px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 950;
}

.fusion-login-footer {
    margin-top: 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--ui-muted);
    font-size: 14px;
}

.fusion-login-footer a {
    color: var(--ui-gold-2);
    font-weight: 900;
    text-decoration: none;
}

.fusion-login-footer a:hover {
    text-decoration: underline;
}

/* 动画 */
@keyframes moonBreath {
    0%, 100% {
        transform: scale(0.98);
        opacity: 0.88;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

@keyframes swordGlow {
    0%, 100% {
        opacity: 0.62;
        transform: rotate(20deg) translateY(0);
    }

    50% {
        opacity: 1;
        transform: rotate(20deg) translateY(-6px);
    }
}

@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

@keyframes mistMove {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.34;
    }

    50% {
        transform: translateX(22px);
        opacity: 0.55;
    }
}

/* 响应式 */
@media (max-width: 1100px) {
    .login-fusion-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .login-fusion-copy {
        padding-bottom: 0;
    }

    .login-fusion-panel {
        justify-content: flex-start;
    }

    .fusion-panel-inner {
        max-width: 520px;
    }
}

@media (max-width: 820px) {
    .login-fusion-stage {
        padding: 28px 16px;
    }

    .login-fusion-copy h1 {
        font-size: clamp(42px, 11vw, 62px);
    }

    .fusion-feature-row {
        grid-template-columns: 1fr;
    }

    .login-moon {
        width: 130px;
        height: 130px;
        right: 10%;
        top: 10%;
    }
}

@media (max-width: 560px) {
    .fusion-panel-inner {
        padding: 26px 18px 22px;
        border-radius: 22px;
    }

    .fusion-panel-header {
        align-items: center;
    }

    .fusion-mark {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .fusion-subtitle {
        font-size: 15px;
    }
}

/* =========================
   UI-17 Login 页面二次精修
   海报式全屏融合版
   ========================= */

/* 让 login 页彻底脱离普通 page 容器限制 */
.page:has(.login-fusion-shell) {
    width: 100%;
    max-width: none;
    padding: 0;
}

/* login 页不要被旧的 page padding / card 风格影响 */
.page:has(.login-fusion-shell) .login-fusion-shell {
    width: 100%;
    min-height: 100vh;
}

/* 全屏海报感加强 */
.login-fusion-stage {
    min-height: 100vh;
    padding: 0;
    align-items: stretch;
    background:
        linear-gradient(90deg, rgba(4, 6, 16, 0.92) 0%, rgba(5, 8, 22, 0.72) 36%, rgba(5, 8, 22, 0.38) 62%, rgba(4, 7, 18, 0.84) 100%),
        radial-gradient(circle at 18% 22%, rgba(224, 173, 69, 0.14), transparent 24%),
        radial-gradient(circle at 78% 30%, rgba(110, 231, 255, 0.13), transparent 26%),
        linear-gradient(115deg, #070812 0%, #071026 45%, #0b1744 100%);
}

/* 中央内容改成真正的海报式左右融合 */
.login-fusion-grid {
    min-height: 100vh;
    width: min(1500px, 100%);
    grid-template-columns: minmax(0, 1fr) minmax(440px, 500px);
    gap: clamp(26px, 5vw, 76px);
    padding: clamp(34px, 5vw, 76px);
}

/* 左边文案不要像卡片，要像海报标题 */
.login-fusion-copy {
    align-self: center;
    padding: 0;
    max-width: 880px;
}

.login-fusion-copy h1 {
    max-width: 880px;
    font-size: clamp(64px, 8vw, 112px);
    line-height: 0.9;
    letter-spacing: -0.075em;
    text-wrap: balance;
    text-shadow:
        0 14px 38px rgba(0, 0, 0, 0.34),
        0 0 38px rgba(224, 173, 69, 0.05);
}

/* 副标题更像游戏介绍，不要太淡 */
.fusion-subtitle {
    max-width: 780px;
    font-size: 18px;
    color: rgba(247, 243, 232, 0.78);
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

/* badge 更精致 */
.fusion-badge {
    border-color: rgba(224, 173, 69, 0.36);
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.16), rgba(255, 255, 255, 0.035));
    box-shadow: 0 10px 28px rgba(224, 173, 69, 0.08);
}

/* 三个介绍卡更融入背景，不像独立大卡 */
.fusion-feature-row {
    max-width: 820px;
    margin-top: 42px;
    gap: 16px;
}

.fusion-feature-card {
    min-height: 116px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(8, 11, 24, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(12px);
}

.fusion-feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(224, 173, 69, 0.30);
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.09), rgba(255, 255, 255, 0.028)),
        rgba(8, 11, 24, 0.42);
}

/* 登录区域更大、更稳、更像玻璃浮层 */
.login-fusion-panel {
    align-self: center;
    justify-content: center;
}

.fusion-panel-inner {
    max-width: 500px;
    padding: 42px 40px 34px;
    border-radius: 34px;
    border: 1px solid rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.13), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
        rgba(6, 9, 22, 0.68);
    backdrop-filter: blur(20px);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.44),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

/* 登录框顶部更高级 */
.fusion-panel-header {
    margin-bottom: 30px;
}

.fusion-mark {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top, rgba(224, 173, 69, 0.28), rgba(224, 173, 69, 0.09));
    box-shadow: 0 0 28px rgba(224, 173, 69, 0.10);
}

.fusion-panel-header h2 {
    font-size: 30px;
    letter-spacing: -0.035em;
}

.fusion-panel-header p {
    font-size: 14px;
}

/* 输入区更像正式产品 */
.fusion-login-form {
    gap: 20px;
}

.fusion-login-form input {
    min-height: 56px;
    padding: 0 16px;
    border-radius: 18px;
    font-size: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        rgba(3, 6, 18, 0.82);
    border-color: rgba(255, 255, 255, 0.10);
}

.fusion-login-form input:hover {
    border-color: rgba(224, 173, 69, 0.24);
}

.fusion-login-form input:focus {
    border-color: rgba(224, 173, 69, 0.58);
    box-shadow:
        0 0 0 4px rgba(224, 173, 69, 0.12),
        0 14px 28px rgba(0, 0, 0, 0.18);
}

.fusion-login-form button {
    min-height: 58px;
    border-radius: 18px;
    font-size: 17px;
    box-shadow: 0 18px 34px rgba(224, 173, 69, 0.20);
}

.fusion-login-form button:hover {
    box-shadow:
        0 22px 44px rgba(224, 173, 69, 0.24),
        0 0 34px rgba(224, 173, 69, 0.10);
}

/* 注册链接更自然 */
.fusion-login-footer {
    margin-top: 24px;
    justify-content: center;
}

/* 背景月亮和剑光调整，不要抢登录框 */
.login-moon {
    right: 18%;
    top: 11%;
    width: 220px;
    height: 220px;
    opacity: 0.68;
}

.login-sword-light {
    right: 31%;
    top: 17%;
    height: 300px;
    opacity: 0.72;
}

/* 山更明显，整屏更有场景 */
.mountain-back {
    height: 260px;
    opacity: 0.88;
}

.mountain-mid {
    height: 210px;
    opacity: 0.94;
}

.mountain-front {
    height: 160px;
    opacity: 1;
}

/* 增加底部暗角，让登录框更突出 */
.login-scene-bg::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 36%;
    background:
        linear-gradient(to top, rgba(3, 5, 14, 0.96), rgba(3, 5, 14, 0));
    pointer-events: none;
}

/* 增加右侧玻璃光边 */
.login-fusion-panel::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 520px;
    right: clamp(20px, 5vw, 90px);
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(110, 231, 255, 0.08), transparent 68%);
    filter: blur(18px);
    pointer-events: none;
}

/* login panel 需要 relative 才能承接上面光效 */
.login-fusion-panel {
    position: relative;
}

/* 手机和平板重新排版：仍然保持融合，不回到一大一小 */
@media (max-width: 1180px) {
    .login-fusion-grid {
        grid-template-columns: 1fr;
        align-content: center;
        gap: 32px;
    }

    .login-fusion-copy {
        max-width: 900px;
    }

    .login-fusion-copy h1 {
        font-size: clamp(54px, 10vw, 84px);
        max-width: 900px;
    }

    .login-fusion-panel {
        justify-content: flex-start;
    }

    .fusion-panel-inner {
        max-width: 560px;
    }

    .login-moon {
        right: 8%;
        top: 8%;
    }
}

@media (max-width: 760px) {
    .login-fusion-grid {
        padding: 28px 16px 42px;
    }

    .login-fusion-copy h1 {
        font-size: clamp(42px, 13vw, 62px);
        line-height: 0.95;
    }

    .fusion-subtitle {
        font-size: 15px;
    }

    .fusion-feature-row {
        grid-template-columns: 1fr;
        margin-top: 24px;
    }

    .fusion-panel-inner {
        padding: 30px 22px 26px;
        border-radius: 26px;
    }

    .fusion-panel-header h2 {
        font-size: 26px;
    }

    .fusion-login-form input {
        min-height: 52px;
    }

    .fusion-login-form button {
        min-height: 54px;
    }

    .login-moon {
        width: 150px;
        height: 150px;
        right: -20px;
        top: 22px;
        opacity: 0.45;
    }

    .login-sword-light {
        right: 22%;
        top: 12%;
        height: 220px;
        opacity: 0.44;
    }
}

@media (max-width: 480px) {
    .fusion-panel-header {
        flex-direction: row;
        gap: 12px;
    }

    .fusion-mark {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    .fusion-panel-header h2 {
        font-size: 23px;
    }

    .fusion-feature-card {
        min-height: auto;
    }
}

/* =========================
   UI-18 Register 全屏融合式页面
   ========================= */

/* register 跟 login 一样脱离普通 page 容器 */
.page:has(.register-fusion-shell) {
    width: 100%;
    max-width: none;
    padding: 0;
}

.page:has(.register-fusion-shell) .register-fusion-shell {
    width: 100%;
    min-height: 100vh;
}

/* 注册页背景偏紫金，跟 login 区分 */
.register-fusion-stage {
    background:
        linear-gradient(90deg, rgba(4, 6, 16, 0.92) 0%, rgba(12, 8, 25, 0.74) 36%, rgba(13, 9, 30, 0.42) 62%, rgba(4, 7, 18, 0.86) 100%),
        radial-gradient(circle at 18% 22%, rgba(167, 139, 250, 0.16), transparent 24%),
        radial-gradient(circle at 78% 30%, rgba(224, 173, 69, 0.13), transparent 26%),
        linear-gradient(115deg, #070812 0%, #120b27 45%, #07153e 100%);
}

.register-glow-right {
    background: radial-gradient(circle, rgba(167, 139, 250, 0.18), transparent 68%);
}

/* 注册页月亮稍微偏左一点，不抢注册面板 */
.register-moon {
    right: 20%;
    top: 12%;
    opacity: 0.58;
}

/* 命格卷轴 */
.register-scroll-float {
    position: absolute;
    right: 26%;
    top: 24%;
    width: 230px;
    height: 150px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(247, 231, 184, 0.94), rgba(154, 104, 52, 0.88));
    box-shadow:
        inset 0 0 22px rgba(255, 255, 255, 0.12),
        0 24px 44px rgba(0, 0, 0, 0.32);
    transform: rotate(-8deg);
    animation: registerPosterScroll 5.5s ease-in-out infinite;
}

.register-scroll-float::before,
.register-scroll-float::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    height: 6px;
    border-radius: 999px;
    background: rgba(49, 36, 20, 0.34);
}

.register-scroll-float::before {
    top: 42px;
}

.register-scroll-float::after {
    top: 74px;
}

/* 印章 */
.register-seal-float {
    position: absolute;
    right: 32%;
    top: 43%;
    width: 74px;
    height: 74px;
    border-radius: 22px;
    border: 3px solid rgba(255, 74, 74, 0.72);
    background: rgba(255, 74, 74, 0.10);
    box-shadow: 0 0 28px rgba(255, 74, 74, 0.18);
    transform: rotate(-12deg);
    animation: registerPosterSeal 3.2s ease-in-out infinite;
}

.register-seal-float::after {
    content: "命";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(12deg);
    color: rgba(255, 120, 120, 0.84);
    font-size: 30px;
    font-weight: 950;
}

/* 命格灵点 */
.register-orb-float {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.20);
    animation: orbFloat 6s ease-in-out infinite;
}

.register-orb-one {
    width: 17px;
    height: 17px;
    left: 18%;
    top: 30%;
    background: rgba(224, 173, 69, 0.95);
}

.register-orb-two {
    width: 13px;
    height: 13px;
    left: 62%;
    top: 18%;
    background: rgba(167, 139, 250, 0.95);
    animation-delay: 1.4s;
}

.register-orb-three {
    width: 15px;
    height: 15px;
    right: 20%;
    top: 58%;
    background: rgba(110, 231, 255, 0.95);
    animation-delay: 2.4s;
}

/* 注册面板略带紫金色 */
.register-panel-inner {
    border-color: rgba(167, 139, 250, 0.26);
    background:
        radial-gradient(circle at top right, rgba(167, 139, 250, 0.15), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
        rgba(7, 8, 24, 0.70);
}

.register-panel-inner .fusion-mark {
    border-color: rgba(167, 139, 250, 0.28);
    background:
        radial-gradient(circle at top, rgba(167, 139, 250, 0.30), rgba(224, 173, 69, 0.08));
    color: #d9c7ff;
}

.register-panel-inner .fusion-login-form input:focus {
    border-color: rgba(167, 139, 250, 0.60);
    box-shadow:
        0 0 0 4px rgba(167, 139, 250, 0.13),
        0 14px 28px rgba(0, 0, 0, 0.18);
}

/* 注册按钮还是用金色，但稍微偏亮 */
.register-panel-inner .fusion-login-form button {
    background: linear-gradient(135deg, #e6b64a, #ffd982);
}

/* 动画 */
@keyframes registerPosterScroll {
    0%, 100% {
        transform: rotate(-8deg) translateY(0);
    }

    50% {
        transform: rotate(-5deg) translateY(-14px);
    }
}

@keyframes registerPosterSeal {
    0%, 100% {
        transform: rotate(-12deg) scale(0.94);
        opacity: 0.70;
    }

    50% {
        transform: rotate(-12deg) scale(1.08);
        opacity: 1;
    }
}

/* 小屏优化 */
@media (max-width: 1180px) {
    .register-scroll-float {
        right: 10%;
        top: 15%;
        opacity: 0.54;
    }

    .register-seal-float {
        right: 18%;
        top: 32%;
        opacity: 0.62;
    }
}

@media (max-width: 760px) {
    .register-scroll-float {
        width: 170px;
        height: 112px;
        right: -10px;
        top: 90px;
        opacity: 0.36;
    }

    .register-seal-float {
        width: 58px;
        height: 58px;
        right: 48px;
        top: 200px;
        opacity: 0.44;
    }

    .register-seal-float::after {
        font-size: 24px;
    }

    .register-moon {
        width: 140px;
        height: 140px;
        right: -20px;
        top: 28px;
        opacity: 0.38;
    }
}

/* =========================
   UI-18.5 标题修仙化
   login / register 标题气质优化
   ========================= */

.fusion-title {
    margin: 0 0 18px;
    display: grid;
    gap: 2px;
    max-width: 880px;
    line-height: 0.9;
    letter-spacing: 0;
    text-shadow:
        0 10px 28px rgba(0, 0, 0, 0.34),
        0 0 22px rgba(224, 173, 69, 0.04);
}

.fusion-title-top,
.fusion-title-bottom {
    display: block;
    color: #f4f0e8;
    font-family:
        "STKaiti",
        "KaiTi",
        "Noto Serif SC",
        "Songti SC",
        "STSong",
        serif;
    font-weight: 700;
}

.fusion-title-top {
    font-size: clamp(46px, 6vw, 82px);
    letter-spacing: 0.01em;
}

.fusion-title-bottom {
    font-size: clamp(58px, 7.2vw, 96px);
    letter-spacing: 0.015em;
}

.fusion-title-bottom em {
    font-style: normal;
    color: #e8bb57;
    text-shadow:
        0 0 18px rgba(224, 173, 69, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.22);
}

/* login 那边原本 h1 太巨大，覆盖旧规则 */
.login-fusion-copy h1.fusion-title {
    font-size: unset;
    line-height: 0.9;
    letter-spacing: 0;
    max-width: 880px;
}

/* register 标题比 login 稍微收一点 */
.fusion-title-register .fusion-title-top {
    font-size: clamp(40px, 5.2vw, 66px);
}

.fusion-title-register .fusion-title-bottom {
    font-size: clamp(52px, 6vw, 78px);
}

/* 让副标题和大标题距离更自然 */
.fusion-title + .fusion-subtitle {
    margin-top: 8px;
}

/* 小屏优化 */
@media (max-width: 760px) {
    .fusion-title {
        gap: 4px;
        line-height: 0.95;
    }

    .fusion-title-top {
        font-size: clamp(34px, 9vw, 52px);
    }

    .fusion-title-bottom {
        font-size: clamp(42px, 11vw, 64px);
    }

    .fusion-title-register .fusion-title-top {
        font-size: clamp(30px, 8vw, 44px);
    }

    .fusion-title-register .fusion-title-bottom {
        font-size: clamp(38px, 9.5vw, 54px);
    }
}

/* =========================
   UI-18.6 标题终极修感版
   login / register 标题题字感强化
   ========================= */

.fusion-title {
    position: relative;
    isolation: isolate;
    width: fit-content;
    padding-right: 24px;
}

/* 标题后方灵气光晕 */
.fusion-title::before {
    content: "";
    position: absolute;
    width: 68%;
    height: 72%;
    left: 8%;
    top: 16%;
    z-index: -1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.18), rgba(224, 173, 69, 0.06), transparent 72%);
    filter: blur(18px);
    opacity: 0.75;
    animation: titleAuraBreath 4.8s ease-in-out infinite;
}

/* 标题右侧淡淡剑光 */
.fusion-title::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 72%;
    right: -18px;
    top: 8%;
    border-radius: 999px;
    background:
        linear-gradient(to bottom, transparent, rgba(126, 231, 255, 0.72), transparent);
    box-shadow: 0 0 18px rgba(126, 231, 255, 0.26);
    transform: rotate(18deg);
    opacity: 0.68;
    animation: titleSwordGlow 4s ease-in-out infinite;
}

/* 上半句：更像题字，不要太死白 */
.fusion-title-top {
    position: relative;
    color: #f6f0e4;
    text-shadow:
        0 7px 0 rgba(0, 0, 0, 0.10),
        0 16px 36px rgba(0, 0, 0, 0.35),
        0 0 24px rgba(255, 255, 255, 0.035);
}

/* 上半句左下角一点金色笔锋 */
.fusion-title-top::after {
    content: "";
    position: absolute;
    left: 0.08em;
    bottom: -0.08em;
    width: 1.65em;
    height: 0.12em;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(224, 173, 69, 0.88), rgba(224, 173, 69, 0.05));
    filter: blur(0.3px);
    opacity: 0.8;
}

/* 下半句整体更重，形成主标题重心 */
.fusion-title-bottom {
    position: relative;
    color: #f3eadb;
    text-shadow:
        0 8px 0 rgba(0, 0, 0, 0.12),
        0 20px 42px rgba(0, 0, 0, 0.40);
}

/* “修仙”二字重点强化 */
.fusion-title-bottom em {
    position: relative;
    display: inline-block;
    padding: 0 0.04em;
    background:
        linear-gradient(180deg, #fff2b8 0%, #e8bb57 46%, #b9822d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow:
        0 0 20px rgba(224, 173, 69, 0.18),
        0 10px 28px rgba(0, 0, 0, 0.32);
}

/* “修仙”背后灵纹光 */
.fusion-title-bottom em::before {
    content: "";
    position: absolute;
    inset: 0.12em -0.12em 0.02em -0.12em;
    z-index: -1;
    border-radius: 40%;
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.18), transparent 68%);
    filter: blur(10px);
    opacity: 0.9;
    animation: titleGoldPulse 3.8s ease-in-out infinite;
}

/* “修仙”下方一笔横锋 */
.fusion-title-bottom em::after {
    content: "";
    position: absolute;
    left: 0.05em;
    right: 0.04em;
    bottom: -0.04em;
    height: 0.08em;
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent, rgba(224, 173, 69, 0.92), rgba(255, 235, 160, 0.72), transparent);
    box-shadow: 0 0 14px rgba(224, 173, 69, 0.28);
}

/* 注册页标题稍微收敛一点，不要抢注册框 */
.fusion-title-register::before {
    background:
        radial-gradient(circle, rgba(167, 139, 250, 0.18), rgba(224, 173, 69, 0.05), transparent 72%);
}

.fusion-title-register::after {
    background:
        linear-gradient(to bottom, transparent, rgba(167, 139, 250, 0.72), transparent);
    box-shadow: 0 0 18px rgba(167, 139, 250, 0.24);
}

/* 标题旁边小灵点 */
.login-fusion-copy {
    position: relative;
}

.login-fusion-copy::before,
.login-fusion-copy::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: titleSpiritFloat 5.2s ease-in-out infinite;
}

.login-fusion-copy::before {
    width: 10px;
    height: 10px;
    left: 3%;
    top: -4%;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
}

.login-fusion-copy::after {
    width: 8px;
    height: 8px;
    right: 18%;
    top: 36%;
    background: rgba(224, 173, 69, 0.92);
    box-shadow: 0 0 18px rgba(224, 173, 69, 0.28);
    animation-delay: 1.8s;
}

/* 标题动画 */
@keyframes titleAuraBreath {
    0%, 100% {
        transform: scale(0.96);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.92;
    }
}

@keyframes titleSwordGlow {
    0%, 100% {
        opacity: 0.42;
        transform: rotate(18deg) translateY(0);
    }

    50% {
        opacity: 0.82;
        transform: rotate(18deg) translateY(-8px);
    }
}

@keyframes titleGoldPulse {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes titleSpiritFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.62;
    }

    50% {
        transform: translateY(-12px) scale(1.18);
        opacity: 1;
    }
}

/* 小屏别太夸张 */
@media (max-width: 760px) {
    .fusion-title {
        padding-right: 0;
    }

    .fusion-title::after {
        right: -8px;
        height: 58%;
        opacity: 0.42;
    }

    .fusion-title-top::after {
        width: 1.2em;
    }

    .login-fusion-copy::before,
    .login-fusion-copy::after {
        opacity: 0.45;
    }
}

/* =========================
   UI-19 Login / Register 最终比例调校
   ========================= */

/* 整体内容宽度收一点，避免左右太散 */
.login-fusion-grid {
    width: min(1360px, 100%);
    grid-template-columns: minmax(0, 1fr) minmax(430px, 470px);
    gap: clamp(28px, 4vw, 58px);
    padding: clamp(36px, 4.5vw, 66px);
}

/* 左边标题区域往中间收，不要太贴左 */
.login-fusion-copy {
    padding-left: clamp(10px, 2vw, 34px);
}

/* 标题整体缩一点，保留气势但不要压爆 */
.fusion-title-top {
    font-size: clamp(40px, 4.8vw, 68px);
}

.fusion-title-bottom {
    font-size: clamp(50px, 5.8vw, 82px);
}

/* 覆盖之前 login h1 超大规则 */
.login-fusion-copy h1.fusion-title {
    max-width: 780px;
}

/* 标题行距稍微放松，比较像题字，不要挤成一团 */
.fusion-title {
    gap: 8px;
    line-height: 0.96;
}

/* “修仙”金色别太刺眼，改成更沉稳 */
.fusion-title-bottom em {
    background:
        linear-gradient(180deg, #fff0b8 0%, #e1b04d 46%, #a8732c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 副标题变窄一点，阅读更舒服 */
.fusion-subtitle {
    max-width: 690px;
    font-size: 16px;
    line-height: 1.9;
}

/* 三张介绍卡收窄，避免铺太开 */
.fusion-feature-row {
    max-width: 720px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.fusion-feature-card {
    min-height: 104px;
    padding: 16px;
}

/* 登录框稍微加宽，但不要笨重 */
.fusion-panel-inner {
    max-width: 470px;
    padding: 38px 36px 32px;
}

/* 登录框标题压低一点，减少大块感 */
.fusion-panel-header {
    margin-bottom: 26px;
}

.fusion-panel-header h2 {
    font-size: 28px;
}

/* 输入框高度稍微收一点 */
.fusion-login-form input {
    min-height: 52px;
}

.fusion-login-form button {
    min-height: 54px;
}

/* 登录框整体稍微往左融入画面 */
.login-fusion-panel {
    transform: translateX(-18px);
}

/* 月亮降噪，不要像一个大球压在登录框后面 */
.login-moon {
    width: 170px;
    height: 170px;
    right: 12%;
    top: 8%;
    opacity: 0.42;
    filter: blur(0.4px);
}

/* 剑光也轻一点 */
.login-sword-light {
    right: 25%;
    top: 16%;
    height: 250px;
    opacity: 0.48;
}

/* 背景光别太亮，登录框会更清楚 */
.glow-right {
    opacity: 0.58;
}

.glow-left {
    opacity: 0.72;
}

/* 山层稍微降低存在感 */
.mountain-back {
    opacity: 0.62;
}

.mountain-mid {
    opacity: 0.78;
}

.mountain-front {
    opacity: 0.92;
}

/* login 的小灵点不要抢标题 */
.login-fusion-copy::before {
    opacity: 0.55;
}

.login-fusion-copy::after {
    opacity: 0.48;
}

/* register 标题也同步调小 */
.fusion-title-register .fusion-title-top {
    font-size: clamp(34px, 4.2vw, 56px);
}

.fusion-title-register .fusion-title-bottom {
    font-size: clamp(44px, 5vw, 68px);
}

/* Register 的卷轴不要太抢 */
.register-scroll-float {
    opacity: 0.48;
}

.register-seal-float {
    opacity: 0.58;
}

/* 中等屏幕：登录框不要掉太下面 */
@media (max-width: 1180px) {
    .login-fusion-grid {
        width: min(980px, 100%);
        grid-template-columns: 1fr;
        align-content: center;
        gap: 28px;
    }

    .login-fusion-panel {
        transform: none;
        justify-content: flex-start;
    }

    .fusion-panel-inner {
        max-width: 520px;
    }

    .fusion-feature-row {
        max-width: 760px;
    }

    .login-moon {
        right: 6%;
        top: 6%;
        opacity: 0.32;
    }
}

/* 手机端：标题不能太大 */
@media (max-width: 760px) {
    .login-fusion-grid {
        padding: 28px 16px 40px;
    }

    .login-fusion-copy {
        padding-left: 0;
    }

    .fusion-title-top {
        font-size: clamp(30px, 8vw, 44px);
    }

    .fusion-title-bottom {
        font-size: clamp(38px, 10vw, 56px);
    }

    .fusion-title {
        gap: 5px;
        line-height: 1;
    }

    .fusion-subtitle {
        font-size: 14.5px;
        line-height: 1.8;
    }

    .fusion-feature-row {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 22px;
    }

    .fusion-feature-card {
        min-height: auto;
        padding: 14px;
    }

    .fusion-panel-inner {
        max-width: none;
        padding: 28px 20px 24px;
    }

    .fusion-panel-header h2 {
        font-size: 24px;
    }

    .fusion-login-form input {
        min-height: 50px;
    }

    .fusion-login-form button {
        min-height: 52px;
    }

    .login-moon {
        width: 110px;
        height: 110px;
        right: -24px;
        top: 22px;
        opacity: 0.28;
    }

    .login-sword-light {
        opacity: 0.28;
    }
}

/* =========================
   UI-20 主页精修 + 男修 / 女修动态人物
   ========================= */

.home-page-refined {
    width: min(100%, 1420px);
    margin: 0 auto;
    padding: 0 20px 42px;
}

.home-page-refined .topbar {
    margin-bottom: 20px;
}

.home-page-refined .topbar h1 {
    max-width: 720px;
    line-height: 0.92;
    letter-spacing: -0.04em;
}

.home-page-refined .topbar p {
    max-width: 720px;
    color: rgba(247, 243, 232, 0.78);
}

/* 首页所有 card 统一再精修一下 */
.home-page-refined .card {
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
        rgba(16, 19, 36, 0.82);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}

.home-page-refined .card:hover {
    border-color: rgba(224, 173, 69, 0.22);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(224, 173, 69, 0.04);
}

/* =========================
   首页 hero 重构
   ========================= */

.refined-world-hero-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) 470px;
    gap: 26px;
    align-items: center;
    min-height: 420px;
    padding: 28px 28px 28px 28px;
    overflow: hidden;
    border-color: rgba(224, 173, 69, 0.20);
    background:
        radial-gradient(circle at 12% 18%, rgba(224, 173, 69, 0.10), transparent 24%),
        radial-gradient(circle at 86% 26%, rgba(110, 231, 255, 0.11), transparent 24%),
        linear-gradient(120deg, rgba(13, 16, 34, 0.96), rgba(8, 14, 38, 0.96));
}

.refined-hero-copy {
    position: relative;
    z-index: 2;
    padding-right: 8px;
}

.refined-hero-copy h2 {
    margin: 14px 0 16px;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #f6f1e7;
}

.refined-hero-copy p {
    max-width: 720px;
    margin: 0;
    color: rgba(247, 243, 232, 0.80);
    font-size: 17px;
    line-height: 1.9;
}

.hero-promise-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 860px;
}

.hero-promise-card {
    min-height: 110px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
        rgba(18, 21, 37, 0.72);
    backdrop-filter: blur(8px);
}

.hero-promise-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ui-gold-2);
    font-size: 16px;
}

.hero-promise-card span {
    color: rgba(247, 243, 232, 0.68);
    line-height: 1.7;
    font-size: 14px;
}

.hero-intent-row {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.intent-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.08);
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 900;
}

/* =========================
   右侧人物舞台
   ========================= */

.refined-hero-art {
    position: relative;
    min-height: 360px;
    border-radius: 26px;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 28%, rgba(110, 231, 255, 0.12), transparent 22%),
        radial-gradient(circle at 42% 18%, rgba(224, 173, 69, 0.09), transparent 24%),
        linear-gradient(180deg, rgba(10, 14, 29, 0.18), rgba(10, 14, 29, 0.02));
}

.hero-gender-pills {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 4;
    display: flex;
    gap: 8px;
}

.gender-pill {
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
}

.male-pill {
    color: #8ed9ff;
    border-color: rgba(110, 231, 255, 0.26);
    background: rgba(110, 231, 255, 0.08);
}

.female-pill {
    color: #e6c3ff;
    border-color: rgba(167, 139, 250, 0.26);
    background: rgba(167, 139, 250, 0.08);
}

/* 背景灵气 */
.hero-spirit-ring {
    position: absolute;
    width: 190px;
    height: 190px;
    left: 50%;
    top: 22%;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.18);
    box-shadow: 0 0 26px rgba(224, 173, 69, 0.08);
    animation: heroRingSpin 16s linear infinite;
}

.hero-moon-core {
    position: absolute;
    width: 120px;
    height: 120px;
    right: 38px;
    top: 64px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,0.98), rgba(110,231,255,0.62), transparent 74%);
    box-shadow:
        0 0 44px rgba(110, 231, 255, 0.20),
        0 0 82px rgba(110, 231, 255, 0.10);
    animation: moonBreath 5s ease-in-out infinite;
}

.hero-light {
    position: absolute;
    border-radius: 50%;
    animation: heroLightFloat 5s ease-in-out infinite;
}

.light-a {
    width: 18px;
    height: 18px;
    left: 74px;
    top: 88px;
    background: rgba(224, 173, 69, 0.92);
}

.light-b {
    width: 12px;
    height: 12px;
    left: 280px;
    top: 88px;
    background: rgba(167, 139, 250, 0.92);
    animation-delay: 1.5s;
}

.light-c {
    width: 16px;
    height: 16px;
    right: 24px;
    top: 136px;
    background: rgba(110, 231, 255, 0.92);
    animation-delay: 2.6s;
}

.hero-character-stage {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* 通用修行者 */
.cultivator {
    position: absolute;
    bottom: 56px;
    width: 130px;
    height: 240px;
    animation: cultivatorFloat 4.6s ease-in-out infinite;
}

.cultivator-nameplate {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 82px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    backdrop-filter: blur(8px);
}

.cultivator-aura {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    filter: blur(12px);
    opacity: 0.65;
    animation: auraPulse 3.6s ease-in-out infinite;
}

.cultivator-head {
    position: absolute;
    left: 50%;
    top: 34px;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    z-index: 3;
}

.cultivator-hair {
    position: absolute;
    left: 50%;
    top: 26px;
    transform: translateX(-50%);
    width: 48px;
    height: 56px;
    z-index: 2;
}

.cultivator-body {
    position: absolute;
    left: 50%;
    top: 62px;
    transform: translateX(-50%);
    width: 66px;
    height: 120px;
    border-radius: 26px 26px 16px 16px;
    z-index: 1;
}

.cultivator-sleeve {
    position: absolute;
    top: 78px;
    width: 30px;
    height: 88px;
    border-radius: 20px;
    z-index: 0;
}

.cultivator .sleeve-left {
    left: 22px;
    transform: rotate(18deg);
}

.cultivator .sleeve-right {
    right: 22px;
    transform: rotate(-18deg);
}

.cultivator-energy {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: 84px;
    height: 6px;
    border-radius: 999px;
}

/* 男修 */
.cultivator-male {
    left: 92px;
}

.cultivator-male .cultivator-nameplate {
    color: #97dfff;
    border: 1px solid rgba(110, 231, 255, 0.24);
    background: rgba(110, 231, 255, 0.08);
}

.cultivator-male .cultivator-aura {
    background: radial-gradient(circle, rgba(110, 231, 255, 0.24), transparent 68%);
}

.cultivator-male .cultivator-head {
    background: linear-gradient(180deg, #f5ddc9, #ddb194);
}

.cultivator-male .cultivator-hair {
    border-radius: 26px 26px 18px 18px;
    background: linear-gradient(180deg, #0d1226, #050811);
}

.cultivator-male .cultivator-body {
    background: linear-gradient(180deg, #1f2f68, #0c1738);
    border: 1px solid rgba(110, 231, 255, 0.18);
    box-shadow: inset 0 0 16px rgba(255,255,255,0.04);
}

.cultivator-male .cultivator-sleeve {
    background: linear-gradient(180deg, #243874, #0b1635);
}

.cultivator-male .cultivator-energy {
    background: linear-gradient(90deg, transparent, rgba(110, 231, 255, 0.92), transparent);
    box-shadow: 0 0 16px rgba(110, 231, 255, 0.22);
}

.cultivator-sword {
    position: absolute;
    right: -6px;
    top: 46px;
    width: 10px;
    height: 158px;
    border-radius: 999px;
    background: linear-gradient(to bottom, transparent, rgba(220, 236, 255, 0.98), rgba(110, 231, 255, 0.88), transparent);
    box-shadow: 0 0 18px rgba(110, 231, 255, 0.20);
    transform: rotate(10deg);
    animation: swordPulse 4s ease-in-out infinite;
}

.cultivator-sword::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 20px;
    width: 26px;
    height: 7px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.92);
}

/* 女修 */
.cultivator-female {
    right: 76px;
    width: 138px;
    animation-delay: 0.8s;
}

.cultivator-female .cultivator-nameplate {
    color: #e8c7ff;
    border: 1px solid rgba(167, 139, 250, 0.24);
    background: rgba(167, 139, 250, 0.08);
}

.cultivator-female .cultivator-aura {
    background: radial-gradient(circle, rgba(167, 139, 250, 0.24), transparent 68%);
}

.cultivator-female .cultivator-head {
    background: linear-gradient(180deg, #f7e0d2, #e4b7a1);
}

.cultivator-female .cultivator-hair {
    width: 54px;
    height: 86px;
    border-radius: 26px 26px 30px 30px;
    background: linear-gradient(180deg, #1a0f2a, #090713);
}

.cultivator-female .cultivator-body {
    width: 70px;
    height: 132px;
    background: linear-gradient(180deg, #53308d, #241042);
    border: 1px solid rgba(167, 139, 250, 0.20);
    box-shadow: inset 0 0 16px rgba(255,255,255,0.04);
}

.cultivator-female .cultivator-sleeve {
    height: 94px;
    background: linear-gradient(180deg, #6a3aaa, #2a1548);
}

.cultivator-female .cultivator-energy {
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.92), transparent);
    box-shadow: 0 0 16px rgba(167, 139, 250, 0.24);
}

.cultivator-ribbon {
    position: absolute;
    left: -12px;
    top: 78px;
    width: 148px;
    height: 88px;
    border-radius: 50%;
    border-top: 2px solid rgba(224, 173, 69, 0.62);
    border-bottom: 2px solid transparent;
    transform: rotate(-12deg);
    opacity: 0.85;
    animation: ribbonWave 4.5s ease-in-out infinite;
}

.cultivator-ribbon::after {
    content: "";
    position: absolute;
    right: 0;
    top: 16px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(224, 173, 69, 0.90);
    box-shadow: 0 0 16px rgba(224, 173, 69, 0.28);
}

/* 飘浮符箓与灵球 */
.floating-talisman {
    position: absolute;
    width: 26px;
    height: 38px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(247, 231, 184, 0.95), rgba(158, 114, 56, 0.88));
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.18);
    animation: talismanFloat 5.2s ease-in-out infinite;
}

.floating-talisman::before,
.floating-talisman::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    height: 3px;
    border-radius: 999px;
    background: rgba(74, 52, 25, 0.40);
}

.floating-talisman::before {
    top: 11px;
}

.floating-talisman::after {
    top: 19px;
}

.talisman-a {
    left: 48px;
    top: 170px;
}

.talisman-b {
    right: 142px;
    top: 118px;
    animation-delay: 1.8s;
}

.floating-orb {
    position: absolute;
    border-radius: 50%;
    animation: orbFloat 5.8s ease-in-out infinite;
}

.orb-a {
    width: 12px;
    height: 12px;
    left: 120px;
    top: 136px;
    background: rgba(224, 173, 69, 0.96);
}

.orb-b {
    width: 16px;
    height: 16px;
    right: 132px;
    top: 182px;
    background: rgba(110, 231, 255, 0.96);
    animation-delay: 1.4s;
}

.orb-c {
    width: 10px;
    height: 10px;
    left: 250px;
    top: 100px;
    background: rgba(167, 139, 250, 0.96);
    animation-delay: 2.2s;
}

/* 山线 */
.hero-mountain-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.mountain-line-back {
    height: 92px;
    background: rgba(16, 20, 40, 0.64);
    clip-path: polygon(
        0 100%, 0 52%, 12% 40%, 24% 58%, 38% 36%, 50% 56%, 64% 34%, 78% 54%, 90% 38%, 100% 48%, 100% 100%
    );
}

.mountain-line-front {
    height: 64px;
    background: rgba(5, 8, 18, 0.94);
    clip-path: polygon(
        0 100%, 0 44%, 13% 28%, 28% 50%, 42% 26%, 56% 48%, 69% 30%, 84% 46%, 100% 34%, 100% 100%
    );
}

/* =========================
   首页其他区域精修
   ========================= */

.home-page-refined .game-dashboard {
    gap: 22px;
    margin-top: 22px;
}

.home-page-refined .dashboard-left,
.home-page-refined .dashboard-center,
.home-page-refined .dashboard-right {
    display: grid;
    gap: 22px;
    align-content: start;
}

.home-page-refined .dashboard-left > .card:first-child {
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        rgba(18, 21, 37, 0.84);
}

.home-page-refined .dashboard-right > .card:first-child {
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.12), transparent 34%),
        rgba(18, 21, 37, 0.84);
}

/* 主行动卡再精修 */
.home-page-refined .scene-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.home-page-refined .scene-action-card {
    position: relative;
    min-height: 220px;
    padding: 22px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.home-page-refined .scene-action-card:nth-child(1) {
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        rgba(22, 20, 37, 0.88);
}

.home-page-refined .scene-action-card:nth-child(2) {
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        rgba(24, 15, 30, 0.88);
}

.home-page-refined .scene-action-card:nth-child(3) {
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.10), transparent 34%),
        rgba(12, 18, 32, 0.88);
}

/* =========================
   动画
   ========================= */

@keyframes heroRingSpin {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes heroLightFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.68;
    }

    50% {
        transform: translateY(-14px) scale(1.18);
        opacity: 1;
    }
}

@keyframes cultivatorFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes auraPulse {
    0%, 100% {
        transform: translateX(-50%) scale(0.92);
        opacity: 0.50;
    }

    50% {
        transform: translateX(-50%) scale(1.08);
        opacity: 0.84;
    }
}

@keyframes swordPulse {
    0%, 100% {
        opacity: 0.64;
        transform: rotate(10deg) translateY(0);
    }

    50% {
        opacity: 1;
        transform: rotate(10deg) translateY(-8px);
    }
}

@keyframes ribbonWave {
    0%, 100% {
        transform: rotate(-12deg) scale(0.98);
        opacity: 0.70;
    }

    50% {
        transform: rotate(-6deg) scale(1.04);
        opacity: 1;
    }
}

@keyframes talismanFloat {
    0%, 100% {
        transform: translateY(0) rotate(-3deg);
        opacity: 0.72;
    }

    50% {
        transform: translateY(-12px) rotate(4deg);
        opacity: 1;
    }
}

/* =========================
   响应式
   ========================= */

@media (max-width: 1180px) {
    .refined-world-hero-banner {
        grid-template-columns: 1fr;
    }

    .refined-hero-art {
        min-height: 380px;
    }

    .hero-promise-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .home-page-refined .scene-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .home-page-refined {
        padding-left: 12px;
        padding-right: 12px;
    }

    .refined-world-hero-banner {
        padding: 22px 18px;
    }

    .refined-hero-copy h2 {
        font-size: clamp(28px, 9vw, 38px);
    }

    .refined-hero-copy p {
        font-size: 15px;
    }

    .hero-promise-card {
        min-height: auto;
    }

    .refined-hero-art {
        min-height: 320px;
    }

    .cultivator {
        transform: scale(0.88);
        transform-origin: bottom center;
    }

    .cultivator-male {
        left: 30px;
    }

    .cultivator-female {
        right: 20px;
    }

    .hero-moon-core {
        width: 92px;
        height: 92px;
        right: 10px;
        top: 70px;
    }
}

/* =========================
   v6.6 入宗申请系统 UI
   ========================= */

.sect-join-visual-banner {
    border-color: rgba(143, 240, 178, 0.28);
    background:
        radial-gradient(circle at top left, rgba(143, 240, 178, 0.12), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(224, 173, 69, 0.10), transparent 28%),
        rgba(20, 22, 38, 0.88);
}

.sect-join-art {
    background:
        radial-gradient(circle at 50% 55%, rgba(143, 240, 178, 0.14), transparent 34%),
        radial-gradient(circle at 62% 32%, rgba(224, 173, 69, 0.10), transparent 24%);
}

.sect-gate {
    position: absolute;
    width: 230px;
    height: 180px;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    border-radius: 24px 24px 18px 18px;
    background:
        linear-gradient(180deg, rgba(61, 50, 32, 0.98), rgba(18, 22, 34, 0.98));
    border: 1px solid rgba(224, 173, 69, 0.22);
    box-shadow:
        inset 0 0 24px rgba(255,255,255,0.08),
        0 24px 44px rgba(0,0,0,0.34);
}

.sect-gate::before {
    content: "";
    position: absolute;
    left: -28px;
    right: -28px;
    top: -28px;
    height: 42px;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(224, 173, 69, 0.88), rgba(89, 61, 29, 0.95));
    box-shadow: 0 10px 24px rgba(0,0,0,0.24);
}

.sect-gate::after {
    content: "";
    position: absolute;
    width: 86px;
    height: 118px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 50px 50px 0 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(143, 240, 178, 0.30), rgba(8, 12, 24, 0.96));
    border: 1px solid rgba(143, 240, 178, 0.18);
}

.sect-gate-glow {
    position: absolute;
    width: 230px;
    height: 130px;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(143, 240, 178, 0.28), rgba(224, 173, 69, 0.10), transparent 72%);
    filter: blur(12px);
    animation: warehouseGlow 3.2s ease-in-out infinite;
}

.join-scroll {
    position: absolute;
    width: 94px;
    height: 130px;
    left: 24%;
    top: 34%;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(247, 231, 184, 0.94), rgba(154, 104, 52, 0.88));
    transform: rotate(-10deg);
    box-shadow: 0 18px 34px rgba(0,0,0,0.26);
    animation: pageFloat 5s ease-in-out infinite;
}

.join-scroll::before,
.join-scroll::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    height: 5px;
    border-radius: 999px;
    background: rgba(49, 36, 20, 0.34);
}

.join-scroll::before {
    top: 38px;
}

.join-scroll::after {
    top: 62px;
}

.join-token {
    position: absolute;
    width: 72px;
    height: 88px;
    right: 26%;
    top: 36%;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.96), rgba(88, 57, 28, 0.96));
    box-shadow:
        inset 0 0 18px rgba(255,255,255,0.12),
        0 18px 34px rgba(0,0,0,0.28);
    animation: tokenFloat 4.6s ease-in-out infinite;
}

.join-token::after {
    content: "入";
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    color: rgba(20, 14, 8, 0.88);
    font-size: 34px;
    font-weight: 950;
}

.join-orb {
    position: absolute;
    border-radius: 50%;
    animation: orbFloat 5.5s ease-in-out infinite;
}

.join-orb-a {
    width: 14px;
    height: 14px;
    left: 32%;
    top: 24%;
    background: rgba(224, 173, 69, 0.95);
}

.join-orb-b {
    width: 12px;
    height: 12px;
    right: 30%;
    top: 26%;
    background: rgba(143, 240, 178, 0.95);
    animation-delay: 1.4s;
}

.join-orb-c {
    width: 10px;
    height: 10px;
    left: 62%;
    bottom: 26%;
    background: rgba(110, 231, 255, 0.95);
    animation-delay: 2.2s;
}

.sect-join-request-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.sect-join-request-form input {
    min-height: 38px;
}

@media (max-width: 720px) {
    .sect-join-request-form {
        grid-template-columns: 1fr;
    }
}

/* =========================
   UI-21 角色性别正式入场
   ========================= */

.character-create-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 130px 150px auto;
    gap: 10px;
}

.character-identity-row {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 16px;
}

.gender-badge,
.identity-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.045);
}

.gender-男 {
    color: #8ed9ff;
    border-color: rgba(110, 231, 255, 0.26);
    background: rgba(110, 231, 255, 0.08);
}

.gender-女 {
    color: #e8c7ff;
    border-color: rgba(167, 139, 250, 0.26);
    background: rgba(167, 139, 250, 0.08);
}

.gender-未知 {
    color: var(--ui-gold-2);
    border-color: rgba(224, 173, 69, 0.24);
    background: rgba(224, 173, 69, 0.08);
}

.identity-badge {
    color: rgba(247, 243, 232, 0.78);
}

/* hero 性别 pill active */
.gender-pill.active {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(224, 173, 69, 0.12);
}

.male-pill.active {
    color: #b8ecff;
    border-color: rgba(110, 231, 255, 0.48);
    background: rgba(110, 231, 255, 0.14);
}

.female-pill.active {
    color: #ecd6ff;
    border-color: rgba(167, 139, 250, 0.48);
    background: rgba(167, 139, 250, 0.14);
}

.unknown-pill {
    color: var(--ui-gold-2);
    border-color: rgba(224, 173, 69, 0.28);
    background: rgba(224, 173, 69, 0.10);
}

/* 首页人物根据角色性别突出 */
.refined-hero-art.gender-male .cultivator-male {
    z-index: 6;
    opacity: 1;
    filter: saturate(1.15) brightness(1.08);
}

.refined-hero-art.gender-male .cultivator-female {
    z-index: 4;
    opacity: 0.34;
    filter: grayscale(0.35) blur(0.2px);
}

.refined-hero-art.gender-female .cultivator-female {
    z-index: 6;
    opacity: 1;
    filter: saturate(1.18) brightness(1.08);
}

.refined-hero-art.gender-female .cultivator-male {
    z-index: 4;
    opacity: 0.34;
    filter: grayscale(0.35) blur(0.2px);
}

.refined-hero-art.gender-unknown .cultivator-male,
.refined-hero-art.gender-unknown .cultivator-female {
    opacity: 0.82;
}

/* 根据性别微调背景气氛 */
.refined-hero-art.gender-male {
    background:
        radial-gradient(circle at 70% 30%, rgba(110, 231, 255, 0.16), transparent 24%),
        radial-gradient(circle at 40% 18%, rgba(224, 173, 69, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(10, 14, 29, 0.20), rgba(10, 14, 29, 0.03));
}

.refined-hero-art.gender-female {
    background:
        radial-gradient(circle at 70% 30%, rgba(167, 139, 250, 0.16), transparent 24%),
        radial-gradient(circle at 40% 18%, rgba(224, 173, 69, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(10, 14, 29, 0.20), rgba(10, 14, 29, 0.03));
}

@media (max-width: 760px) {
    .character-create-form {
        grid-template-columns: 1fr;
    }

    .character-identity-row {
        margin-top: 8px;
    }
}

/* =========================
   UI-22 首页男女修立绘重做
   更像剪影立绘 / 法衣 / 剑修 / 灵修
   ========================= */

/* 先整体重置旧人物观感 */
.refined-hero-art .cultivator {
    width: 150px;
    height: 270px;
    bottom: 42px;
    filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.28));
}

/* 人物底部站台 */
.refined-hero-art .cultivator::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 120px;
    height: 24px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 173, 69, 0.18), transparent 70%);
    filter: blur(3px);
}

/* 名牌缩小，避免像按钮 */
.refined-hero-art .cultivator-nameplate {
    top: -18px;
    min-width: 96px;
    padding: 5px 11px;
    font-size: 11px;
    letter-spacing: 0.04em;
    opacity: 0.9;
}

/* 头部更像人物，不要圆球感太强 */
.refined-hero-art .cultivator-head {
    top: 44px;
    width: 32px;
    height: 38px;
    border-radius: 46% 46% 48% 48%;
    z-index: 6;
    box-shadow:
        inset 0 -8px 14px rgba(0, 0, 0, 0.10),
        0 8px 18px rgba(0, 0, 0, 0.18);
}

/* 身体改成法袍剪影 */
.refined-hero-art .cultivator-body {
    top: 76px;
    width: 76px;
    height: 150px;
    border-radius: 36px 36px 20px 20px;
    z-index: 3;
    clip-path: polygon(
        50% 0,
        76% 12%,
        92% 64%,
        78% 100%,
        22% 100%,
        8% 64%,
        24% 12%
    );
}

/* 法袍中线 */
.refined-hero-art .cultivator-body::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 18px;
    bottom: 14px;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

/* 腰带 */
.refined-hero-art .cultivator-body::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 70px;
    height: 7px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.72);
    box-shadow: 0 0 14px rgba(224, 173, 69, 0.18);
}

/* 袖子改成宽袖法衣 */
.refined-hero-art .cultivator-sleeve {
    top: 88px;
    width: 44px;
    height: 118px;
    border-radius: 34px 34px 22px 22px;
    z-index: 2;
    opacity: 0.95;
}

.refined-hero-art .cultivator .sleeve-left {
    left: 14px;
    transform: rotate(18deg);
    clip-path: polygon(44% 0, 100% 10%, 78% 100%, 8% 86%);
}

.refined-hero-art .cultivator .sleeve-right {
    right: 14px;
    transform: rotate(-18deg);
    clip-path: polygon(0 10%, 56% 0, 92% 86%, 22% 100%);
}

/* 灵气光圈更细腻 */
.refined-hero-art .cultivator-aura {
    width: 190px;
    height: 190px;
    bottom: -12px;
    filter: blur(18px);
    opacity: 0.55;
}

/* 灵气横线改成脚下阵纹 */
.refined-hero-art .cultivator-energy {
    bottom: 4px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: transparent !important;
    border: 1px solid rgba(224, 173, 69, 0.18);
    box-shadow:
        inset 0 0 24px rgba(224, 173, 69, 0.06),
        0 0 24px rgba(224, 173, 69, 0.08);
    animation: cultivatorArraySpin 12s linear infinite;
}

.refined-hero-art .cultivator-energy::before,
.refined-hero-art .cultivator-energy::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.13);
}

.refined-hero-art .cultivator-energy::after {
    inset: 38px;
    border-style: solid;
    border-color: rgba(224, 173, 69, 0.16);
}

/* =========================
   男修：剑修风格
   ========================= */

.refined-hero-art .cultivator-male {
    left: 80px;
}

/* 男修整体颜色 */
.refined-hero-art .cultivator-male .cultivator-aura {
    background: radial-gradient(circle, rgba(110, 231, 255, 0.24), transparent 70%);
}

.refined-hero-art .cultivator-male .cultivator-head {
    background: linear-gradient(180deg, #f0d2b8, #c99072);
}

/* 男修头发：束冠长发 */
.refined-hero-art .cultivator-male .cultivator-hair {
    top: 27px;
    width: 54px;
    height: 84px;
    border-radius: 28px 28px 24px 24px;
    background:
        linear-gradient(180deg, #151a2d 0%, #080b14 100%);
    z-index: 5;
    clip-path: polygon(
        18% 20%,
        34% 0,
        66% 0,
        82% 20%,
        78% 78%,
        62% 100%,
        50% 72%,
        38% 100%,
        22% 78%
    );
}

/* 发冠 */
.refined-hero-art .cultivator-male .cultivator-hair::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -8px;
    width: 28px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, rgba(224, 173, 69, 0.95), rgba(120, 78, 28, 0.95));
    box-shadow: 0 0 12px rgba(224, 173, 69, 0.18);
}

/* 男修法袍 */
.refined-hero-art .cultivator-male .cultivator-body {
    background:
        linear-gradient(180deg, rgba(42, 68, 142, 0.98), rgba(8, 20, 48, 0.98));
    border: 1px solid rgba(110, 231, 255, 0.22);
    box-shadow:
        inset 0 0 22px rgba(255, 255, 255, 0.05),
        0 0 24px rgba(110, 231, 255, 0.05);
}

.refined-hero-art .cultivator-male .cultivator-sleeve {
    background: linear-gradient(180deg, rgba(49, 81, 156, 0.96), rgba(9, 22, 52, 0.98));
}

/* 男修背后剑，改大一点更像剑修 */
.refined-hero-art .cultivator-sword {
    right: 0;
    top: 20px;
    width: 12px;
    height: 210px;
    border-radius: 999px;
    background:
        linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.95) 18%,
            rgba(126, 231, 255, 0.92) 48%,
            rgba(255, 255, 255, 0.75) 76%,
            transparent 100%
        );
    transform: rotate(11deg);
    box-shadow:
        0 0 18px rgba(110, 231, 255, 0.34),
        0 0 38px rgba(110, 231, 255, 0.10);
    z-index: 1;
}

/* 剑柄 */
.refined-hero-art .cultivator-sword::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 70px;
    width: 34px;
    height: 8px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.95);
    box-shadow: 0 0 14px rgba(224, 173, 69, 0.18);
}

/* 剑尖 */
.refined-hero-art .cultivator-sword::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -18px;
    width: 24px;
    height: 32px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 0 10px rgba(110, 231, 255, 0.28));
}

/* =========================
   女修：灵修风格
   ========================= */

.refined-hero-art .cultivator-female {
    right: 64px;
}

/* 女修灵气 */
.refined-hero-art .cultivator-female .cultivator-aura {
    background: radial-gradient(circle, rgba(167, 139, 250, 0.26), transparent 70%);
}

.refined-hero-art .cultivator-female .cultivator-head {
    background: linear-gradient(180deg, #f7d9c8, #d59b84);
}

/* 女修长发 */
.refined-hero-art .cultivator-female .cultivator-hair {
    top: 26px;
    width: 66px;
    height: 128px;
    border-radius: 34px 34px 44px 44px;
    background:
        linear-gradient(180deg, #26143a 0%, #090613 100%);
    z-index: 5;
    clip-path: polygon(
        18% 12%,
        34% 0,
        66% 0,
        82% 12%,
        90% 72%,
        72% 100%,
        56% 80%,
        50% 100%,
        44% 80%,
        28% 100%,
        10% 72%
    );
}

/* 女修发簪 */
.refined-hero-art .cultivator-female .cultivator-hair::before {
    content: "";
    position: absolute;
    width: 58px;
    height: 4px;
    left: 50%;
    top: 11px;
    transform: translateX(-50%) rotate(-12deg);
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(224, 173, 69, 0.95), transparent);
    box-shadow: 0 0 12px rgba(224, 173, 69, 0.22);
}

/* 女修法衣 */
.refined-hero-art .cultivator-female .cultivator-body {
    width: 82px;
    height: 158px;
    background:
        linear-gradient(180deg, rgba(111, 63, 166, 0.98), rgba(35, 13, 65, 0.98));
    border: 1px solid rgba(167, 139, 250, 0.26);
    box-shadow:
        inset 0 0 22px rgba(255, 255, 255, 0.05),
        0 0 24px rgba(167, 139, 250, 0.07);
}

.refined-hero-art .cultivator-female .cultivator-sleeve {
    background: linear-gradient(180deg, rgba(132, 76, 190, 0.96), rgba(44, 17, 75, 0.98));
}

/* 女修飘带改成双层，更像灵修 */
.refined-hero-art .cultivator-ribbon {
    left: -22px;
    top: 86px;
    width: 188px;
    height: 112px;
    border-top: 2px solid rgba(224, 173, 69, 0.72);
    border-bottom: 2px solid rgba(167, 139, 250, 0.34);
    border-radius: 50%;
    opacity: 0.88;
    z-index: 4;
}

.refined-hero-art .cultivator-ribbon::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 22px;
    width: 140px;
    height: 70px;
    border-radius: 50%;
    border-top: 2px solid rgba(167, 139, 250, 0.42);
    transform: rotate(8deg);
}

.refined-hero-art .cultivator-ribbon::after {
    width: 20px;
    height: 20px;
    right: -2px;
    top: 18px;
    background: rgba(224, 173, 69, 0.95);
}

/* =========================
   人物高亮时更自然
   ========================= */

.refined-hero-art.gender-male .cultivator-male {
    opacity: 1;
    transform: scale(1.03);
}

.refined-hero-art.gender-male .cultivator-female {
    opacity: 0.42;
    transform: scale(0.94);
}

.refined-hero-art.gender-female .cultivator-female {
    opacity: 1;
    transform: scale(1.03);
}

.refined-hero-art.gender-female .cultivator-male {
    opacity: 0.42;
    transform: scale(0.94);
}

.refined-hero-art.gender-unknown .cultivator-male,
.refined-hero-art.gender-unknown .cultivator-female {
    opacity: 0.88;
}

/* 避免 hover/animation 跟 transform 打架，重点人物只靠 filter 和 opacity */
.refined-hero-art.gender-male .cultivator-male,
.refined-hero-art.gender-female .cultivator-female {
    filter:
        saturate(1.18)
        brightness(1.08)
        drop-shadow(0 24px 34px rgba(0, 0, 0, 0.30));
}

/* =========================
   动画
   ========================= */

@keyframes cultivatorArraySpin {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* 小屏优化 */
@media (max-width: 760px) {
    .refined-hero-art .cultivator {
        width: 132px;
        height: 238px;
        bottom: 34px;
    }

    .refined-hero-art .cultivator-male {
        left: 18px;
    }

    .refined-hero-art .cultivator-female {
        right: 8px;
    }

    .refined-hero-art .cultivator-sword {
        height: 170px;
    }

    .refined-hero-art .cultivator-female .cultivator-hair {
        height: 110px;
    }

    .refined-hero-art .cultivator-ribbon {
        width: 154px;
        left: -8px;
    }
}

/* =========================
   UI-23 主页整体重排收紧 / 游戏大厅化
   ========================= */

/* 首页整体不要太散 */
.home-page-refined {
    width: min(100%, 1380px);
    padding-left: 18px;
    padding-right: 18px;
}

/* 顶部标题不要太像后台标题 */
.home-page-refined .home-topbar {
    margin-top: 8px;
    margin-bottom: 18px;
    padding: 18px 0 4px;
}

.home-page-refined .home-topbar h1 {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -0.045em;
}

.home-page-refined .home-topbar p {
    font-size: 15px;
    color: rgba(247, 243, 232, 0.68);
}

/* Hero 区域收紧，不要太高太空 */
.home-page-refined .refined-world-hero-banner {
    min-height: 360px;
    padding: 24px;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 20px;
    border-radius: 30px;
}

.home-page-refined .refined-hero-copy h2 {
    font-size: clamp(32px, 3.6vw, 46px);
    max-width: 720px;
}

.home-page-refined .refined-hero-copy p {
    max-width: 680px;
    font-size: 16px;
}

/* 三个说明卡不要太大 */
.home-page-refined .hero-promise-grid {
    margin-top: 20px;
    gap: 10px;
}

.home-page-refined .hero-promise-card {
    min-height: 92px;
    padding: 14px;
    border-radius: 17px;
}

.home-page-refined .hero-promise-card strong {
    font-size: 15px;
}

.home-page-refined .hero-promise-card span {
    font-size: 13px;
}

/* 人物区域先压一下，不要占太大 */
.home-page-refined .refined-hero-art {
    min-height: 330px;
}

.home-page-refined .cultivator {
    transform-origin: bottom center;
}

.home-page-refined .cultivator-male {
    left: 68px;
}

.home-page-refined .cultivator-female {
    right: 52px;
}

/* =========================
   Dashboard 主布局：更像游戏大厅
   ========================= */

/* 由原来的三栏后台感，调整成更稳的游戏大厅 */
.home-page-refined .game-dashboard {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: start;
    margin-top: 18px;
}

/* 每一列内部间距统一缩小 */
.home-page-refined .dashboard-left,
.home-page-refined .dashboard-center,
.home-page-refined .dashboard-right {
    gap: 16px;
}

/* 卡片统一更紧凑 */
.home-page-refined .card {
    border-radius: 24px;
    padding: 20px;
}

/* 主页卡片标题统一 */
.home-page-refined .card h2 {
    font-size: 21px;
    letter-spacing: -0.035em;
}

.home-page-refined .card h3 {
    font-size: 17px;
}

/* muted 不要到处像大空状态 */
.home-page-refined .card > .muted,
.home-page-refined section > .muted {
    padding: 11px 13px;
    border-radius: 14px;
}

/* =========================
   左侧角色卡：更像角色面板
   ========================= */

.home-page-refined .character-card {
    padding: 22px;
}

.home-page-refined .character-card h2 {
    font-size: 25px;
    margin-bottom: 8px;
}

.home-page-refined .character-card .realm {
    margin-bottom: 12px;
}

.home-page-refined .character-identity-row {
    margin: 8px 0 12px;
}

.home-page-refined .stat-row {
    padding: 9px 0;
}

.home-page-refined .travel-form {
    margin-top: 14px;
    padding-top: 14px;
}

.home-page-refined .travel-form .inline-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* 左侧小卡不要太长 */
.home-page-refined .bloodline-mini-card .mini-stats,
.home-page-refined .reincarnation-card .mini-stats {
    gap: 6px;
}

.home-page-refined .bloodline-mini-card .mini-stats span,
.home-page-refined .reincarnation-card .mini-stats span {
    font-size: 11.5px;
}

/* =========================
   中间：核心玩法区重新拉开层级
   ========================= */

.home-page-refined .action-panel-enhanced {
    padding: 22px;
    border-color: rgba(224, 173, 69, 0.28);
}

/* 主要行动卡：更像游戏按钮，不要太像三张广告卡 */
.home-page-refined .scene-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.home-page-refined .scene-action-card {
    min-height: 205px;
    padding: 0;
    border-radius: 20px;
}

.home-page-refined .scene-content {
    padding: 18px;
}

.home-page-refined .scene-content h3 {
    font-size: 21px;
}

.home-page-refined .scene-content p {
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 12px;
}

.home-page-refined .scene-content button {
    min-height: 40px;
}

/* 次要行动改成细条，不要抢主要行动 */
.home-page-refined .action-grid-secondary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.home-page-refined .action-grid-secondary button,
.home-page-refined .action-grid-secondary .nav-button {
    min-height: 40px;
    border-radius: 13px;
}

/* 功能中心收紧成更像快捷入口 */
.home-page-refined .feature-hub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.home-page-refined .feature-hub-card {
    min-height: 126px;
    padding: 15px;
    border-radius: 18px;
}

.home-page-refined .feature-hub-card span {
    margin-bottom: 8px;
}

.home-page-refined .feature-hub-card strong {
    font-size: 18px;
}

.home-page-refined .feature-hub-card p {
    font-size: 12.5px;
    line-height: 1.55;
}

/* 宗门 / 功法 / 洞府 / 结局这类内容降噪 */
.home-page-refined .sect-card,
.home-page-refined .method-card,
.home-page-refined .legacy-card,
.home-page-refined .ending-card {
    padding: 20px;
}

.home-page-refined .two-panel,
.home-page-refined .ending-grid {
    gap: 12px;
}

.home-page-refined .two-panel > div,
.home-page-refined .two-panel > form,
.home-page-refined .ending-grid > form {
    padding: 14px;
    border-radius: 16px;
}

.home-page-refined .sect-current {
    padding: 15px;
    border-radius: 16px;
}

/* 表单区更紧凑 */
.home-page-refined .sect-create-form {
    gap: 10px;
}

.home-page-refined .sect-create-form input,
.home-page-refined .sect-create-form select {
    min-height: 40px;
}

/* 中间列表高度控制 */
.home-page-refined .dashboard-center .small-scroll {
    max-height: 260px;
}

/* =========================
   右侧世界情报栏：变成情报面板
   ========================= */

.home-page-refined .dashboard-right .card {
    padding: 18px;
}

/* 世界入口太长，收紧 */
.home-page-refined .world-hub-grid {
    gap: 12px;
}

.home-page-refined .world-hub-section {
    grid-template-columns: 44px 1fr;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
}

.home-page-refined .hub-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
}

.home-page-refined .world-hub-section h3 {
    font-size: 16px;
}

.home-page-refined .world-hub-section p {
    font-size: 12.5px;
    margin-bottom: 10px;
}

.home-page-refined .hub-link-grid {
    gap: 7px;
}

.home-page-refined .hub-link-grid a {
    min-height: 32px;
    font-size: 12px;
    border-radius: 10px;
}

/* 右侧历史 / 传说 / 发现统一 */
.home-page-refined .dashboard-right .item,
.home-page-refined .dashboard-right .legend-card,
.home-page-refined .dashboard-right .timeline-event {
    padding: 12px;
    border-radius: 14px;
}

.home-page-refined .dashboard-right .small-scroll {
    max-height: 300px;
}

.home-page-refined .timeline-event {
    grid-template-columns: 72px 1fr;
    gap: 10px;
}

.home-page-refined .timeline-event .year {
    font-size: 12px;
}

/* =========================
   让主页有“区域标题感”
   ========================= */

.home-page-refined .section-title-row {
    margin-bottom: 12px;
}

.home-page-refined .section-title-row h2 {
    margin-bottom: 4px;
}

.home-page-refined .section-title-row .muted {
    font-size: 13px;
}

/* =========================
   修复人物高亮 transform 和动画冲突
   ========================= */

.refined-hero-art.gender-male .cultivator-male,
.refined-hero-art.gender-female .cultivator-female,
.refined-hero-art.gender-male .cultivator-female,
.refined-hero-art.gender-female .cultivator-male {
    transform: none;
}

/* 只用 opacity/filter 区分当前性别，避免打架 */
.refined-hero-art.gender-male .cultivator-male,
.refined-hero-art.gender-female .cultivator-female {
    opacity: 1;
    filter:
        saturate(1.18)
        brightness(1.08)
        drop-shadow(0 24px 34px rgba(0, 0, 0, 0.30));
}

.refined-hero-art.gender-male .cultivator-female,
.refined-hero-art.gender-female .cultivator-male {
    opacity: 0.38;
    filter:
        grayscale(0.35)
        brightness(0.82)
        drop-shadow(0 18px 26px rgba(0, 0, 0, 0.22));
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1250px) {
    .home-page-refined .game-dashboard {
        grid-template-columns: 290px minmax(0, 1fr);
    }

    .home-page-refined .dashboard-right {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page-refined .dashboard-right .world-hub-card {
        grid-column: 1 / -1;
    }

    .home-page-refined .refined-world-hero-banner {
        grid-template-columns: 1fr;
    }

    .home-page-refined .refined-hero-art {
        min-height: 350px;
    }
}

@media (max-width: 980px) {
    .home-page-refined .game-dashboard {
        grid-template-columns: 1fr;
    }

    .home-page-refined .dashboard-right {
        grid-template-columns: 1fr;
    }

    .home-page-refined .feature-hub-grid,
    .home-page-refined .scene-action-grid,
    .home-page-refined .action-grid-secondary {
        grid-template-columns: 1fr;
    }

    .home-page-refined .two-panel,
    .home-page-refined .ending-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .home-page-refined {
        padding-left: 12px;
        padding-right: 12px;
    }

    .home-page-refined .card {
        padding: 16px;
        border-radius: 20px;
    }

    .home-page-refined .refined-world-hero-banner {
        padding: 16px;
    }

    .home-page-refined .refined-hero-copy h2 {
        font-size: 30px;
    }

    .home-page-refined .hero-promise-grid {
        grid-template-columns: 1fr;
    }

    .home-page-refined .refined-hero-art {
        min-height: 315px;
    }

    .home-page-refined .timeline-event {
        grid-template-columns: 1fr;
    }
}

/* =========================
   UI-24 首页创建角色页面精修
   新一世入场 / 性别选择卡
   ========================= */

.new-life-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 24px;
    align-items: center;
    min-height: 390px;
    margin-top: 18px;
    overflow: hidden;
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at 15% 20%, rgba(224, 173, 69, 0.12), transparent 26%),
        radial-gradient(circle at 84% 26%, rgba(167, 139, 250, 0.12), transparent 26%),
        linear-gradient(120deg, rgba(14, 17, 34, 0.96), rgba(8, 13, 34, 0.96));
}

.new-life-copy {
    position: relative;
    z-index: 2;
}

.new-life-copy h2 {
    margin: 14px 0 14px;
    max-width: 740px;
    font-size: clamp(36px, 5vw, 62px);
    line-height: 1;
    letter-spacing: -0.045em;
    color: #f6f1e7;
}

.new-life-copy p {
    max-width: 740px;
    color: rgba(247, 243, 232, 0.78);
    line-height: 1.9;
    font-size: 16px;
}

.new-life-reincarnation {
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 36%),
        rgba(255, 255, 255, 0.045);
}

.new-life-reincarnation span {
    color: var(--ui-muted);
    font-size: 13px;
}

.new-life-summary-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

/* 右侧入场视觉 */
.new-life-visual {
    position: relative;
    min-height: 330px;
    border-radius: 26px;
    overflow: hidden;
    background:
        radial-gradient(circle at 54% 38%, rgba(224, 173, 69, 0.13), transparent 30%),
        radial-gradient(circle at 70% 25%, rgba(167, 139, 250, 0.12), transparent 28%);
}

.new-life-ring {
    position: absolute;
    width: 210px;
    height: 210px;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.24);
    box-shadow:
        inset 0 0 34px rgba(224, 173, 69, 0.06),
        0 0 34px rgba(224, 173, 69, 0.10);
    animation: ringRotate 18s linear infinite;
}

.new-life-ring::before,
.new-life-ring::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(167, 139, 250, 0.22);
}

.new-life-ring::before {
    inset: 34px;
}

.new-life-ring::after {
    inset: 70px;
    border-color: rgba(110, 231, 255, 0.22);
}

.new-life-moon {
    position: absolute;
    width: 115px;
    height: 115px;
    right: 38px;
    top: 42px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.96), rgba(167,139,250,0.42), transparent 74%);
    box-shadow: 0 0 44px rgba(167, 139, 250, 0.18);
    animation: moonBreath 5s ease-in-out infinite;
}

.new-life-cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    background: rgba(255,255,255,0.06);
    animation: mistMove 11s ease-in-out infinite;
}

.cloud-a {
    width: 220px;
    height: 70px;
    left: 20px;
    bottom: 84px;
}

.cloud-b {
    width: 260px;
    height: 80px;
    right: 10px;
    bottom: 54px;
    animation-delay: 3s;
}

.new-life-scroll {
    position: absolute;
    width: 118px;
    height: 156px;
    left: 72px;
    top: 92px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(247, 231, 184, 0.95), rgba(145, 96, 48, 0.90));
    transform: rotate(-10deg);
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.28);
    animation: pageFloat 5.4s ease-in-out infinite;
}

.new-life-scroll::before,
.new-life-scroll::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    height: 6px;
    border-radius: 999px;
    background: rgba(49, 36, 20, 0.34);
}

.new-life-scroll::before {
    top: 48px;
}

.new-life-scroll::after {
    top: 78px;
}

.new-life-sword {
    position: absolute;
    width: 10px;
    height: 210px;
    right: 128px;
    top: 72px;
    border-radius: 999px;
    background:
        linear-gradient(to bottom, transparent, rgba(255,255,255,0.95), rgba(110,231,255,0.82), transparent);
    transform: rotate(18deg);
    box-shadow: 0 0 20px rgba(110, 231, 255, 0.22);
    animation: swordGlow 4s ease-in-out infinite;
}

.new-life-orb {
    position: absolute;
    border-radius: 50%;
    animation: orbFloat 5.6s ease-in-out infinite;
}

.orb-one {
    width: 15px;
    height: 15px;
    left: 58px;
    top: 54px;
    background: rgba(224, 173, 69, 0.95);
}

.orb-two {
    width: 12px;
    height: 12px;
    left: 246px;
    top: 78px;
    background: rgba(167, 139, 250, 0.95);
    animation-delay: 1.4s;
}

.orb-three {
    width: 13px;
    height: 13px;
    right: 54px;
    bottom: 104px;
    background: rgba(110, 231, 255, 0.95);
    animation-delay: 2.5s;
}

.new-life-mountain {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.mountain-a {
    height: 92px;
    background: rgba(15, 19, 38, 0.70);
    clip-path: polygon(0 100%, 0 56%, 12% 42%, 25% 58%, 39% 36%, 52% 58%, 67% 38%, 82% 56%, 100% 44%, 100% 100%);
}

.mountain-b {
    height: 62px;
    background: rgba(5, 8, 18, 0.95);
    clip-path: polygon(0 100%, 0 46%, 15% 28%, 30% 52%, 46% 26%, 60% 52%, 76% 30%, 100% 42%, 100% 100%);
}

/* 创建角色表单 */
.new-life-form-card {
    margin-top: 20px;
    border-color: rgba(167, 139, 250, 0.20);
    background:
        radial-gradient(circle at top right, rgba(167, 139, 250, 0.08), transparent 34%),
        rgba(18, 21, 37, 0.86);
}

.new-life-form {
    display: grid;
    gap: 18px;
}

.new-life-field label,
.new-life-bottom-row label {
    display: grid;
    gap: 8px;
}

.new-life-field label span,
.new-life-bottom-row label span {
    color: var(--ui-gold-2);
    font-size: 13px;
    font-weight: 900;
}

.new-life-field input,
.new-life-bottom-row select {
    min-height: 50px;
    border-radius: 16px;
    padding: 0 14px;
}

.new-life-gender-select {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.gender-choice-card {
    position: relative;
    min-height: 210px;
    padding: 18px;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(16, 19, 36, 0.82);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.gender-choice-card:hover {
    transform: translateY(-2px);
    border-color: rgba(224, 173, 69, 0.24);
}

.gender-choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gender-choice-card:has(input:checked) {
    transform: translateY(-3px);
    border-color: rgba(224, 173, 69, 0.46);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.24),
        0 0 26px rgba(224, 173, 69, 0.08);
}

.gender-choice-card strong {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 112px;
    margin-bottom: 8px;
    color: var(--ui-text);
    font-size: 20px;
}

.gender-choice-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.65;
}

.gender-choice-art {
    position: absolute;
    left: 50%;
    top: 20px;
    width: 112px;
    height: 104px;
    transform: translateX(-50%);
}

.gender-choice-head {
    position: absolute;
    left: 50%;
    top: 14px;
    width: 28px;
    height: 32px;
    transform: translateX(-50%);
    border-radius: 48%;
    background: linear-gradient(180deg, #f4d8c2, #c99173);
    z-index: 3;
}

.gender-choice-body {
    position: absolute;
    left: 50%;
    top: 44px;
    width: 56px;
    height: 72px;
    transform: translateX(-50%);
    border-radius: 28px 28px 14px 14px;
    clip-path: polygon(50% 0, 82% 20%, 94% 100%, 6% 100%, 18% 20%);
}

.gender-choice-sword {
    position: absolute;
    right: 18px;
    top: 8px;
    width: 6px;
    height: 104px;
    border-radius: 999px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.95), rgba(110,231,255,0.82), transparent);
    transform: rotate(14deg);
    box-shadow: 0 0 14px rgba(110,231,255,0.24);
}

.gender-choice-ribbon {
    position: absolute;
    left: 7px;
    top: 56px;
    width: 102px;
    height: 48px;
    border-radius: 50%;
    border-top: 2px solid rgba(224, 173, 69, 0.70);
    border-bottom: 2px solid rgba(167, 139, 250, 0.30);
    transform: rotate(-10deg);
}

.gender-choice-ring {
    position: absolute;
    left: 50%;
    top: 34px;
    width: 96px;
    height: 96px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.22);
    animation: ringRotate 12s linear infinite;
}

.gender-choice-male .gender-choice-body {
    background: linear-gradient(180deg, rgba(42, 68, 142, 0.98), rgba(8, 20, 48, 0.98));
    border: 1px solid rgba(110, 231, 255, 0.20);
}

.gender-choice-female .gender-choice-body {
    background: linear-gradient(180deg, rgba(111, 63, 166, 0.98), rgba(35, 13, 65, 0.98));
    border: 1px solid rgba(167, 139, 250, 0.22);
}

.gender-choice-unknown .gender-choice-body {
    background: linear-gradient(180deg, rgba(95, 81, 48, 0.98), rgba(28, 24, 38, 0.98));
    border: 1px solid rgba(224, 173, 69, 0.22);
}

.gender-choice-male:has(input:checked) {
    border-color: rgba(110, 231, 255, 0.52);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.13), transparent 36%),
        rgba(16, 19, 36, 0.88);
}

.gender-choice-female:has(input:checked) {
    border-color: rgba(167, 139, 250, 0.52);
    background:
        radial-gradient(circle at top right, rgba(167, 139, 250, 0.14), transparent 36%),
        rgba(16, 19, 36, 0.88);
}

.gender-choice-unknown:has(input:checked) {
    border-color: rgba(224, 173, 69, 0.52);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.13), transparent 36%),
        rgba(16, 19, 36, 0.88);
}

.new-life-bottom-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.new-life-bottom-row button {
    min-height: 50px;
    padding: 0 24px;
    border-radius: 16px;
}

/* Responsive */
@media (max-width: 980px) {
    .new-life-hero {
        grid-template-columns: 1fr;
    }

    .new-life-visual {
        min-height: 300px;
    }

    .new-life-summary-grid,
    .new-life-gender-select {
        grid-template-columns: 1fr;
    }

    .gender-choice-card {
        min-height: 180px;
    }
}

@media (max-width: 640px) {
    .new-life-hero {
        padding: 18px;
    }

    .new-life-copy h2 {
        font-size: 34px;
    }

    .new-life-bottom-row {
        grid-template-columns: 1fr;
    }

    .new-life-bottom-row button {
        width: 100%;
    }
}

/* =========================
   UI-25 首页世界入口收纳成游戏菜单
   ========================= */

.world-menu-card {
    overflow: hidden;
}

.world-menu-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.world-menu-group {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(15, 18, 34, 0.78);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.world-menu-group[open] {
    border-color: rgba(224, 173, 69, 0.26);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        rgba(15, 18, 34, 0.86);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.world-menu-group summary {
    list-style: none;
    min-height: 70px;
    padding: 14px 14px;
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.world-menu-group summary::-webkit-details-marker {
    display: none;
}

.world-menu-group summary::after {
    content: "展开";
    min-width: 44px;
    padding: 5px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    color: var(--ui-gold-2);
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.08);
}

.world-menu-group[open] summary::after {
    content: "收起";
}

.world-menu-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    position: relative;
    display: block;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.045);
}

.world-menu-icon::before,
.world-menu-icon::after {
    content: "";
    position: absolute;
}

.world-menu-world .world-menu-icon::before {
    width: 24px;
    height: 24px;
    left: 10px;
    top: 10px;
    border-radius: 50%;
    border: 2px solid rgba(110, 231, 255, 0.82);
    box-shadow: 0 0 14px rgba(110, 231, 255, 0.20);
}

.world-menu-battle .world-menu-icon::before,
.world-menu-battle .world-menu-icon::after {
    width: 4px;
    height: 30px;
    left: 21px;
    top: 8px;
    border-radius: 999px;
    background: rgba(255, 114, 114, 0.90);
    box-shadow: 0 0 14px rgba(255, 114, 114, 0.22);
}

.world-menu-battle .world-menu-icon::before {
    transform: rotate(38deg);
}

.world-menu-battle .world-menu-icon::after {
    transform: rotate(-38deg);
    background: rgba(255,255,255,0.84);
}

.world-menu-craft .world-menu-icon::before {
    width: 24px;
    height: 24px;
    left: 10px;
    top: 10px;
    border-radius: 50%;
    border: 2px solid rgba(224, 173, 69, 0.84);
    box-shadow: 0 0 14px rgba(224, 173, 69, 0.22);
    animation: ringRotate 8s linear infinite;
}

.world-menu-craft .world-menu-icon::after {
    width: 8px;
    height: 8px;
    left: 19px;
    top: 19px;
    border-radius: 50%;
    background: rgba(224, 173, 69, 0.95);
}

.world-menu-sect .world-menu-icon::before {
    width: 28px;
    height: 22px;
    left: 9px;
    top: 13px;
    background: linear-gradient(135deg, rgba(143, 240, 178, 0.88), rgba(110, 231, 255, 0.48));
    clip-path: polygon(50% 0, 100% 34%, 84% 100%, 16% 100%, 0 34%);
    box-shadow: 0 0 14px rgba(143, 240, 178, 0.18);
}

.world-menu-group strong {
    display: block;
    color: var(--ui-text);
    font-size: 16px;
    margin-bottom: 4px;
}

.world-menu-group small {
    display: block;
    color: var(--ui-muted);
    line-height: 1.5;
    font-size: 12px;
}

.world-menu-links {
    padding: 0 14px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    animation: drawerReveal 0.22s ease both;
}

.world-menu-links a {
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 8px 9px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.075);
    background: rgba(255,255,255,0.045);
    color: var(--ui-text);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    text-align: center;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.world-menu-links a:hover {
    transform: translateY(-1px);
    border-color: rgba(224, 173, 69, 0.30);
    background: rgba(224, 173, 69, 0.10);
}

/* 不再显示旧 world-hub 样式的影响 */
.world-menu-card .world-hub-grid,
.world-menu-card .world-hub-section {
    display: none;
}

@media (max-width: 720px) {
    .world-menu-group summary {
        grid-template-columns: 42px 1fr;
    }

    .world-menu-group summary::after {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .world-menu-links {
        grid-template-columns: 1fr;
    }
}

/* =========================
   UI-26 首页成长档案折叠整理
   宗门 / 功法 / 洞府 / 此生结局
   ========================= */

.growth-archive-panel {
    overflow: hidden;
    border-color: rgba(167, 139, 250, 0.20);
    background:
        radial-gradient(circle at top right, rgba(167, 139, 250, 0.08), transparent 34%),
        rgba(18, 21, 37, 0.86);
}

.growth-archive-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.growth-archive-group {
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(15, 18, 34, 0.78);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.growth-archive-group[open] {
    border-color: rgba(224, 173, 69, 0.26);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        rgba(15, 18, 34, 0.86);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.growth-archive-group summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    min-height: 76px;
    padding: 16px;
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 14px;
    align-items: center;
}

.growth-archive-group summary::-webkit-details-marker {
    display: none;
}

.growth-archive-group summary::after {
    content: "展开";
    min-width: 46px;
    padding: 6px 9px;
    border-radius: 999px;
    text-align: center;
    font-size: 11px;
    font-weight: 950;
    color: var(--ui-gold-2);
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.08);
}

.growth-archive-group[open] summary::after {
    content: "收起";
}

.growth-icon {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    position: relative;
    display: block;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.045);
    box-shadow: inset 0 0 18px rgba(255,255,255,0.035);
}

.growth-icon::before,
.growth-icon::after {
    content: "";
    position: absolute;
}

.growth-icon-sect::before {
    width: 30px;
    height: 24px;
    left: 9px;
    top: 14px;
    background: linear-gradient(135deg, rgba(143, 240, 178, 0.88), rgba(110, 231, 255, 0.45));
    clip-path: polygon(50% 0, 100% 34%, 84% 100%, 16% 100%, 0 34%);
    box-shadow: 0 0 14px rgba(143, 240, 178, 0.18);
}

.growth-icon-method::before {
    width: 30px;
    height: 34px;
    left: 10px;
    top: 8px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(247, 231, 184, 0.92), rgba(120, 82, 34, 0.92));
    transform: rotate(-6deg);
    box-shadow: 0 0 14px rgba(224, 173, 69, 0.16);
}

.growth-icon-method::after {
    width: 18px;
    height: 3px;
    left: 16px;
    top: 24px;
    border-radius: 999px;
    background: rgba(50, 34, 18, 0.42);
}

.growth-icon-legacy::before {
    width: 30px;
    height: 30px;
    left: 10px;
    top: 10px;
    border-radius: 50%;
    border: 2px solid rgba(110, 231, 255, 0.75);
    box-shadow:
        0 0 14px rgba(110, 231, 255, 0.20),
        inset 0 0 14px rgba(110, 231, 255, 0.08);
}

.growth-icon-legacy::after {
    width: 8px;
    height: 8px;
    left: 21px;
    top: 21px;
    border-radius: 50%;
    background: rgba(110, 231, 255, 0.90);
}

.growth-icon-ending::before {
    width: 6px;
    height: 34px;
    left: 22px;
    top: 8px;
    border-radius: 999px;
    background:
        linear-gradient(to bottom, transparent, rgba(255, 114, 114, 0.95), rgba(224, 173, 69, 0.70), transparent);
    box-shadow: 0 0 16px rgba(255, 114, 114, 0.24);
    transform: rotate(18deg);
}

.growth-icon-ending::after {
    width: 28px;
    height: 28px;
    left: 11px;
    top: 12px;
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.30);
    animation: ringRotate 8s linear infinite;
}

.growth-archive-group strong {
    display: block;
    color: var(--ui-text);
    font-size: 17px;
    margin-bottom: 4px;
}

.growth-archive-group small {
    display: block;
    color: var(--ui-muted);
    line-height: 1.5;
    font-size: 12px;
}

.growth-archive-content {
    padding: 0 16px 16px;
    animation: drawerReveal 0.22s ease both;
}

.growth-archive-content .two-panel,
.growth-archive-content .ending-grid {
    margin-top: 4px;
}

.growth-archive-content .sect-current,
.growth-archive-content .two-panel > div,
.growth-archive-content .two-panel > form,
.growth-archive-content .ending-grid > form {
    border-radius: 18px;
}

/* 每组轻微不同颜色 */
.growth-sect-group[open] {
    border-color: rgba(143, 240, 178, 0.24);
}

.growth-method-group[open] {
    border-color: rgba(167, 139, 250, 0.24);
}

.growth-legacy-group[open] {
    border-color: rgba(110, 231, 255, 0.24);
}

.growth-ending-group[open] {
    border-color: rgba(255, 114, 114, 0.24);
}

/* 原本旧卡片如果残留，避免重复视觉太重 */
.home-page-refined .growth-archive-panel .sect-card,
.home-page-refined .growth-archive-panel .method-card,
.home-page-refined .growth-archive-panel .legacy-card,
.home-page-refined .growth-archive-panel .ending-card {
    display: contents;
}

@media (max-width: 720px) {
    .growth-archive-group summary {
        grid-template-columns: 46px 1fr;
    }

    .growth-archive-group summary::after {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .growth-archive-content {
        padding: 0 12px 12px;
    }
}

/* =========================
   UI-27 首页右侧世界情报收纳
   最近发现 / 最近传说 / 最近历史
   ========================= */

.world-intel-card {
    overflow: hidden;
    border-color: rgba(110, 231, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 34%),
        rgba(18, 21, 37, 0.86);
}

.world-intel-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.world-intel-group {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(15, 18, 34, 0.78);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.world-intel-group[open] {
    border-color: rgba(110, 231, 255, 0.26);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 34%),
        rgba(15, 18, 34, 0.86);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.world-intel-group summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    min-height: 72px;
    padding: 14px;
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 12px;
    align-items: center;
}

.world-intel-group summary::-webkit-details-marker {
    display: none;
}

.world-intel-group summary::after {
    content: "展开";
    min-width: 44px;
    padding: 5px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 11px;
    font-weight: 950;
    color: var(--ui-gold-2);
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.08);
}

.world-intel-group[open] summary::after {
    content: "收起";
}

.world-intel-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    position: relative;
    display: block;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.045);
    box-shadow: inset 0 0 18px rgba(255,255,255,0.035);
}

.world-intel-icon::before,
.world-intel-icon::after {
    content: "";
    position: absolute;
}

.intel-icon-discovery::before {
    width: 26px;
    height: 26px;
    left: 10px;
    top: 10px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(143, 240, 178, 0.95), rgba(110, 231, 255, 0.28), transparent 72%);
    box-shadow: 0 0 18px rgba(143, 240, 178, 0.24);
}

.intel-icon-discovery::after {
    width: 8px;
    height: 8px;
    right: 9px;
    top: 9px;
    border-radius: 50%;
    background: rgba(224, 173, 69, 0.95);
    box-shadow: 0 0 12px rgba(224, 173, 69, 0.28);
}

.intel-icon-legend::before {
    width: 26px;
    height: 32px;
    left: 10px;
    top: 8px;
    border-radius: 10px 10px 6px 6px;
    background:
        linear-gradient(180deg, rgba(224, 173, 69, 0.96), rgba(90, 58, 24, 0.96));
    box-shadow: 0 0 16px rgba(224, 173, 69, 0.18);
}

.intel-icon-legend::after {
    content: "传";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(20, 14, 8, 0.86);
    font-size: 17px;
    font-weight: 950;
}

.intel-icon-history::before {
    width: 30px;
    height: 34px;
    left: 8px;
    top: 7px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(247, 231, 184, 0.92), rgba(130, 88, 38, 0.90));
    transform: rotate(-6deg);
    box-shadow: 0 0 14px rgba(224, 173, 69, 0.16);
}

.intel-icon-history::after {
    width: 18px;
    height: 3px;
    left: 15px;
    top: 23px;
    border-radius: 999px;
    background: rgba(50, 34, 18, 0.42);
}

.world-intel-group strong {
    display: block;
    color: var(--ui-text);
    font-size: 16px;
    margin-bottom: 4px;
}

.world-intel-group small {
    display: block;
    color: var(--ui-muted);
    line-height: 1.5;
    font-size: 12px;
}

.world-intel-content {
    padding: 0 14px 14px;
    animation: drawerReveal 0.22s ease both;
}

.world-intel-content .small-scroll {
    max-height: 320px;
}

.world-intel-content .item,
.world-intel-content .legend-card,
.world-intel-content .timeline-event {
    border-radius: 14px;
}

/* 三种情报打开时有不同色调 */
.intel-discovery-group[open] {
    border-color: rgba(143, 240, 178, 0.24);
}

.intel-legend-group[open] {
    border-color: rgba(224, 173, 69, 0.26);
}

.intel-history-group[open] {
    border-color: rgba(110, 231, 255, 0.24);
}

@media (max-width: 720px) {
    .world-intel-group summary {
        grid-template-columns: 42px 1fr;
    }

    .world-intel-group summary::after {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .world-intel-content {
        padding: 0 12px 12px;
    }
}

/* =========================
   UI-28 首页左侧角色面板精修
   ========================= */

.character-profile-panel {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-color: rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 34%),
        radial-gradient(circle at 18% 18%, rgba(110, 231, 255, 0.08), transparent 28%),
        rgba(18, 21, 37, 0.88);
}

.character-profile-panel::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -86px;
    top: -86px;
    border-radius: 50%;
    background: rgba(224, 173, 69, 0.12);
    filter: blur(10px);
    pointer-events: none;
}

.character-profile-top {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.character-avatar-orbit {
    position: relative;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
}

.avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.26);
    box-shadow:
        inset 0 0 24px rgba(224, 173, 69, 0.08),
        0 0 24px rgba(224, 173, 69, 0.10);
    animation: avatarRingSpin 12s linear infinite;
}

.avatar-ring::before,
.avatar-ring::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avatar-ring::before {
    inset: 13px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
}

.avatar-ring::after {
    inset: 30px;
    border: 1px solid rgba(224, 173, 69, 0.18);
}

.avatar-core {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: rgba(16, 12, 6, 0.92);
    font-size: 24px;
    font-weight: 950;
    background:
        linear-gradient(135deg, rgba(255, 236, 166, 0.98), rgba(224, 173, 69, 0.88));
    box-shadow:
        inset 0 0 16px rgba(255, 255, 255, 0.20),
        0 12px 26px rgba(0, 0, 0, 0.24);
}

.avatar-male .avatar-ring {
    border-color: rgba(110, 231, 255, 0.34);
    box-shadow:
        inset 0 0 24px rgba(110, 231, 255, 0.08),
        0 0 24px rgba(110, 231, 255, 0.12);
}

.avatar-male .avatar-core {
    background:
        linear-gradient(135deg, rgba(178, 237, 255, 0.96), rgba(74, 165, 225, 0.90));
    color: rgba(4, 16, 28, 0.94);
}

.avatar-female .avatar-ring {
    border-color: rgba(167, 139, 250, 0.36);
    box-shadow:
        inset 0 0 24px rgba(167, 139, 250, 0.08),
        0 0 24px rgba(167, 139, 250, 0.12);
}

.avatar-female .avatar-core {
    background:
        linear-gradient(135deg, rgba(226, 203, 255, 0.96), rgba(167, 139, 250, 0.90));
    color: rgba(22, 10, 40, 0.94);
}

.avatar-spark {
    position: absolute;
    border-radius: 50%;
    animation: avatarSparkFloat 4.5s ease-in-out infinite;
}

.spark-one {
    width: 9px;
    height: 9px;
    right: 10px;
    top: 18px;
    background: rgba(224, 173, 69, 0.94);
}

.spark-two {
    width: 7px;
    height: 7px;
    left: 12px;
    bottom: 22px;
    background: rgba(110, 231, 255, 0.94);
    animation-delay: 1.6s;
}

.character-title-block h2 {
    margin: 0 0 6px;
    font-size: 25px;
    letter-spacing: -0.035em;
}

.character-title-block .realm {
    margin: 0 0 10px;
    font-size: 13px;
}

.qi-core-panel {
    position: relative;
    z-index: 2;
    min-height: 96px;
    padding: 16px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: 1fr 86px;
    gap: 14px;
    align-items: center;
    border-radius: 20px;
    border: 1px solid rgba(224, 173, 69, 0.16);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 38%),
        rgba(255, 255, 255, 0.04);
}

.qi-core-panel span {
    display: block;
    color: var(--ui-muted);
    font-size: 13px;
    margin-bottom: 6px;
}

.qi-core-panel strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.qi-core-visual {
    position: relative;
    width: 76px;
    height: 76px;
}

.qi-orb {
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(224, 173, 69, 0.74), transparent 72%);
    box-shadow:
        0 0 22px rgba(224, 173, 69, 0.24),
        0 0 44px rgba(224, 173, 69, 0.08);
    animation: qiOrbPulse 2.6s ease-in-out infinite;
}

.qi-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.24);
    border-top-color: rgba(224, 173, 69, 0.85);
    border-right-color: rgba(110, 231, 255, 0.50);
    animation: avatarRingSpin 4.5s linear infinite;
}

.character-info-grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
}

.character-info-box {
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(255, 255, 255, 0.035);
}

.character-info-box span {
    display: block;
    color: var(--ui-muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.character-info-box strong {
    color: var(--ui-text);
    font-size: 13.5px;
    line-height: 1.55;
}

.character-travel-panel {
    position: relative;
    z-index: 2;
    margin-top: 16px;
    padding-top: 16px;
}

.character-travel-panel label {
    color: var(--ui-gold-2);
    font-weight: 950;
}

.character-travel-panel .inline-form {
    margin-top: 9px;
}

/* 旧 stat-row 在新角色卡里不再需要时，防止残留影响 */
.character-profile-panel .stat-row {
    display: none;
}

@keyframes avatarRingSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes avatarSparkFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.65;
    }

    50% {
        transform: translateY(-10px) scale(1.18);
        opacity: 1;
    }
}

@keyframes qiOrbPulse {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.72;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@media (max-width: 720px) {
    .character-profile-top {
        grid-template-columns: 1fr;
    }

    .character-avatar-orbit {
        justify-self: start;
    }

    .qi-core-panel {
        grid-template-columns: 1fr;
    }

    .qi-core-visual {
        justify-self: start;
    }
}

/* =========================
   UI-29 首页修行控制台精修
   ========================= */

.main-command-panel {
    overflow: hidden;
    border-color: rgba(224, 173, 69, 0.28);
    background:
        radial-gradient(circle at top left, rgba(224, 173, 69, 0.12), transparent 34%),
        radial-gradient(circle at 85% 20%, rgba(110, 231, 255, 0.08), transparent 28%),
        rgba(18, 21, 37, 0.88);
}

.command-title-row {
    align-items: center;
}

.command-year-badge {
    min-height: 34px;
    padding: 8px 12px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.09);
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.command-status-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 18px;
}

.command-status-box {
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.075);
    background: rgba(255,255,255,0.04);
}

.command-status-box span {
    display: block;
    margin-bottom: 6px;
    color: var(--ui-muted);
    font-size: 12px;
}

.command-status-box strong {
    display: block;
    color: var(--ui-text);
    font-size: 14px;
    line-height: 1.4;
}

.command-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.command-card {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(15, 18, 34, 0.84);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.command-card:hover {
    transform: translateY(-3px);
    border-color: rgba(224, 173, 69, 0.28);
    box-shadow: 0 20px 42px rgba(0,0,0,0.24);
}

.command-card-art {
    position: relative;
    height: 132px;
    overflow: hidden;
}

.command-card-content {
    position: relative;
    z-index: 2;
    padding: 18px;
}

.command-tag {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.08);
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 950;
}

.command-card h3 {
    margin: 0 0 9px;
    font-size: 23px;
    letter-spacing: -0.035em;
}

.command-card p {
    min-height: 64px;
    margin: 0;
    color: var(--ui-muted);
    line-height: 1.7;
    font-size: 13px;
}

.command-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0;
}

.command-mini-stats span {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.075);
    background: rgba(255,255,255,0.04);
    color: rgba(247,243,232,0.72);
    font-size: 11.5px;
    font-weight: 850;
}

.command-card form button {
    width: 100%;
    min-height: 42px;
    border-radius: 14px;
}

/* 修炼卡 */
.command-cultivation {
    border-color: rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        rgba(16, 18, 34, 0.86);
}

.command-orbit {
    position: absolute;
    width: 118px;
    height: 118px;
    left: 50%;
    top: 24px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.24);
    animation: ringRotate 12s linear infinite;
}

.command-orbit::before,
.command-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.13);
}

.command-orbit::before {
    inset: 20px;
}

.command-orbit::after {
    inset: 42px;
    border-style: solid;
    border-color: rgba(224,173,69,0.16);
}

.command-core {
    position: absolute;
    width: 48px;
    height: 48px;
    left: 50%;
    top: 58px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,0.96), rgba(224,173,69,0.74), transparent 74%);
    box-shadow: 0 0 28px rgba(224,173,69,0.22);
    animation: qiOrbPulse 2.8s ease-in-out infinite;
}

.command-particle {
    position: absolute;
    border-radius: 50%;
    animation: orbFloat 5s ease-in-out infinite;
}

.particle-a {
    width: 10px;
    height: 10px;
    left: 24%;
    top: 36px;
    background: rgba(224,173,69,0.95);
}

.particle-b {
    width: 8px;
    height: 8px;
    right: 24%;
    top: 56px;
    background: rgba(110,231,255,0.92);
    animation-delay: 1.4s;
}

.particle-c {
    width: 9px;
    height: 9px;
    left: 58%;
    top: 104px;
    background: rgba(167,139,250,0.92);
    animation-delay: 2.4s;
}

/* 战斗卡 */
.command-battle {
    border-color: rgba(255, 114, 114, 0.20);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        rgba(22, 14, 28, 0.86);
}

.command-blade {
    position: absolute;
    width: 5px;
    height: 150px;
    left: 50%;
    top: 0;
    border-radius: 999px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.96), transparent);
    box-shadow: 0 0 18px rgba(255,255,255,0.20);
}

.blade-one {
    transform: rotate(42deg);
    background: linear-gradient(to bottom, transparent, rgba(255,114,114,0.95), transparent);
}

.blade-two {
    transform: rotate(-42deg);
    background: linear-gradient(to bottom, transparent, rgba(110,231,255,0.95), transparent);
}

.command-impact {
    position: absolute;
    width: 82px;
    height: 82px;
    left: 50%;
    top: 64px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.92), rgba(255,114,114,0.30), transparent 72%);
    animation: battleImpact 2.4s ease-in-out infinite;
}

.command-spark {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,220,120,0.94);
    box-shadow: 0 0 14px rgba(255,220,120,0.34);
    animation: sparkFly 4s ease-in-out infinite;
}

.command-spark.spark-a {
    width: 8px;
    height: 8px;
    left: 26%;
    top: 42px;
}

.command-spark.spark-b {
    width: 7px;
    height: 7px;
    right: 26%;
    top: 78px;
    animation-delay: 1.6s;
}

/* 探索卡 */
.command-explore {
    border-color: rgba(110, 231, 255, 0.20);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.10), transparent 34%),
        rgba(10, 18, 34, 0.86);
}

.command-path {
    position: absolute;
    width: 150px;
    height: 70px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 50% 50% 0 0;
    border-top: 2px solid rgba(224,173,69,0.42);
    filter: drop-shadow(0 0 12px rgba(224,173,69,0.18));
    animation: approvalLine 4s ease-in-out infinite;
}

.command-mountain {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58px;
    background: rgba(5,8,18,0.92);
    clip-path: polygon(0 100%, 0 46%, 14% 28%, 30% 52%, 46% 26%, 60% 52%, 76% 30%, 100% 42%, 100% 100%);
}

.command-star {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 0 14px rgba(255,255,255,0.28);
    animation: starTwinkle 4.2s ease-in-out infinite;
}

.star-one {
    width: 8px;
    height: 8px;
    left: 24%;
    top: 34px;
}

.star-two {
    width: 6px;
    height: 6px;
    right: 28%;
    top: 46px;
    animation-delay: 1.3s;
}

.star-three {
    width: 7px;
    height: 7px;
    left: 54%;
    top: 86px;
    animation-delay: 2.1s;
}

/* 次要行动 */
.command-secondary-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.command-secondary-row button,
.command-secondary-row .nav-button {
    width: 100%;
    min-height: 42px;
    border-radius: 14px;
}

@media (max-width: 1100px) {
    .command-action-grid,
    .command-status-strip,
    .command-secondary-row {
        grid-template-columns: 1fr;
    }

    .command-card {
        min-height: auto;
    }

    .command-card p {
        min-height: auto;
    }
}

@media (max-width: 720px) {
    .command-title-row {
        grid-template-columns: 1fr;
    }

    .command-year-badge {
        width: fit-content;
    }
}

/* =========================
   UI-30 首页修仙系统矩阵
   替代普通 feature hub
   ========================= */

.system-matrix-panel {
    overflow: hidden;
    border-color: rgba(110, 231, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 34%),
        radial-gradient(circle at 12% 24%, rgba(224, 173, 69, 0.08), transparent 28%),
        rgba(18, 21, 37, 0.88);
}

.system-matrix-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.system-matrix-card {
    position: relative;
    min-height: 154px;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    align-items: start;
    padding: 18px;
    overflow: hidden;
    border-radius: 22px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(15, 18, 34, 0.82);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.system-matrix-card::before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -58px;
    top: -58px;
    border-radius: 50%;
    background: rgba(224, 173, 69, 0.08);
    filter: blur(2px);
    pointer-events: none;
}

.system-matrix-card:hover {
    transform: translateY(-3px);
    border-color: rgba(224, 173, 69, 0.26);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
}

.matrix-icon {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.045);
    box-shadow:
        inset 0 0 18px rgba(255,255,255,0.035),
        0 14px 28px rgba(0,0,0,0.18);
}

.matrix-icon::before,
.matrix-icon::after {
    content: "";
    position: absolute;
}

.matrix-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.matrix-content span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 5px 9px;
    margin-bottom: 8px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.07);
    color: var(--ui-gold-2);
    font-size: 11.5px;
    font-weight: 950;
}

.matrix-content strong {
    display: block;
    color: var(--ui-text);
    font-size: 20px;
    margin-bottom: 8px;
    letter-spacing: -0.03em;
}

.matrix-content p {
    margin: 0;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.65;
}

.matrix-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.matrix-tags em {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-style: normal;
    font-size: 11px;
    font-weight: 850;
    color: rgba(247, 243, 232, 0.72);
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.035);
}

/* 法器 icon */
.matrix-icon-artifact::before {
    width: 10px;
    height: 54px;
    left: 31px;
    top: 8px;
    border-radius: 999px;
    background:
        linear-gradient(to bottom, transparent, rgba(255,255,255,0.96), rgba(224,173,69,0.82), transparent);
    box-shadow: 0 0 18px rgba(224, 173, 69, 0.24);
    transform: rotate(16deg);
}

.matrix-icon-artifact::after {
    width: 28px;
    height: 7px;
    left: 23px;
    top: 30px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.92);
}

/* 背包 icon */
.matrix-icon-inventory::before {
    width: 42px;
    height: 34px;
    left: 15px;
    top: 28px;
    border-radius: 12px 12px 16px 16px;
    background:
        linear-gradient(180deg, rgba(224, 173, 69, 0.95), rgba(95, 60, 25, 0.95));
    box-shadow: 0 0 16px rgba(224, 173, 69, 0.16);
}

.matrix-icon-inventory::after {
    width: 24px;
    height: 18px;
    left: 24px;
    top: 14px;
    border-radius: 14px 14px 0 0;
    border: 3px solid rgba(224, 173, 69, 0.72);
    border-bottom: none;
}

/* 炼丹 icon */
.matrix-icon-alchemy::before {
    width: 44px;
    height: 34px;
    left: 14px;
    top: 28px;
    border-radius: 14px 14px 24px 24px;
    background:
        linear-gradient(180deg, rgba(86, 66, 118, 0.98), rgba(24, 19, 40, 0.98));
    box-shadow: 0 0 18px rgba(167, 139, 250, 0.16);
}

.matrix-icon-alchemy::after {
    width: 36px;
    height: 14px;
    left: 18px;
    top: 20px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(143, 240, 178, 0.85), rgba(167, 139, 250, 0.28), transparent 72%);
    animation: qiOrbPulse 2.8s ease-in-out infinite;
}

/* 炼器 icon */
.matrix-icon-crafting::before {
    width: 46px;
    height: 22px;
    left: 13px;
    top: 38px;
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(140, 142, 156, 0.95), rgba(32, 34, 48, 0.95));
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.08);
}

.matrix-icon-crafting::after {
    width: 40px;
    height: 8px;
    left: 25px;
    top: 18px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.95);
    transform: rotate(-30deg);
    box-shadow: 0 0 16px rgba(224, 173, 69, 0.16);
}

/* 市集 icon */
.matrix-icon-market::before {
    width: 48px;
    height: 34px;
    left: 12px;
    top: 28px;
    border-radius: 10px 10px 14px 14px;
    background:
        linear-gradient(180deg, rgba(45, 48, 70, 0.98), rgba(20, 22, 38, 0.98));
}

.matrix-icon-market::after {
    width: 58px;
    height: 20px;
    left: 7px;
    top: 14px;
    border-radius: 10px 10px 4px 4px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(224, 173, 69, 0.95) 0 14px,
            rgba(110, 231, 255, 0.85) 14px 28px
        );
}

/* 宗门仓库 icon */
.matrix-icon-warehouse::before {
    width: 48px;
    height: 44px;
    left: 12px;
    top: 18px;
    border-radius: 13px;
    background:
        linear-gradient(180deg, rgba(68, 57, 38, 0.98), rgba(24, 25, 38, 0.98));
    border: 1px solid rgba(224, 173, 69, 0.22);
}

.matrix-icon-warehouse::after {
    width: 22px;
    height: 22px;
    left: 25px;
    top: 29px;
    border-radius: 50%;
    border: 4px solid rgba(224, 173, 69, 0.70);
    background: rgba(13, 15, 28, 0.96);
}

/* 每张卡不同色调 */
.matrix-artifact {
    border-color: rgba(224, 173, 69, 0.16);
}

.matrix-inventory {
    border-color: rgba(143, 240, 178, 0.16);
}

.matrix-alchemy {
    border-color: rgba(167, 139, 250, 0.16);
}

.matrix-crafting {
    border-color: rgba(255, 114, 114, 0.14);
}

.matrix-market {
    border-color: rgba(110, 231, 255, 0.16);
}

.matrix-warehouse {
    border-color: rgba(143, 240, 178, 0.18);
}

/* 避免旧 feature-hub-card 残留影响 */
.system-matrix-panel .feature-hub-grid,
.system-matrix-panel .feature-hub-card {
    display: none;
}

@media (max-width: 1100px) {
    .system-matrix-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .system-matrix-card {
        grid-template-columns: 1fr;
    }

    .matrix-icon {
        width: 64px;
        height: 64px;
    }
}

/* =========================
   UI-31 首页顶部游戏 HUD 精修
   ========================= */

.home-game-header {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px;
    margin-top: 12px;
    margin-bottom: 22px;
    border-radius: 30px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at 14% 20%, rgba(224, 173, 69, 0.13), transparent 28%),
        radial-gradient(circle at 86% 24%, rgba(110, 231, 255, 0.10), transparent 28%),
        linear-gradient(120deg, rgba(13, 16, 34, 0.96), rgba(7, 12, 30, 0.96));
    box-shadow:
        0 22px 46px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.home-header-aura {
    position: absolute;
    width: 360px;
    height: 360px;
    right: -120px;
    top: -150px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.18), rgba(110, 231, 255, 0.06), transparent 70%);
    filter: blur(12px);
    pointer-events: none;
    animation: titleAuraBreath 6s ease-in-out infinite;
}

.home-header-star {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.30);
    pointer-events: none;
    animation: starTwinkle 4.5s ease-in-out infinite;
}

.home-header-star.star-one {
    width: 7px;
    height: 7px;
    left: 36%;
    top: 22px;
}

.home-header-star.star-two {
    width: 6px;
    height: 6px;
    right: 32%;
    top: 54px;
    animation-delay: 1.4s;
}

.home-header-star.star-three {
    width: 8px;
    height: 8px;
    right: 18%;
    bottom: 76px;
    animation-delay: 2.4s;
}

.home-header-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 22px;
    align-items: center;
}

.home-title-stack {
    min-width: 0;
}

.home-title-stack h1 {
    margin: 14px 0 12px;
    display: grid;
    gap: 6px;
    line-height: 0.95;
}

.home-title-stack h1 span {
    display: block;
    color: #f6f1e7;
    font-size: clamp(40px, 5vw, 70px);
    letter-spacing: -0.06em;
    text-shadow:
        0 14px 34px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(224, 173, 69, 0.06);
}

.home-title-stack h1 em {
    display: block;
    width: fit-content;
    font-style: normal;
    font-family:
        "STKaiti",
        "KaiTi",
        "Noto Serif SC",
        "Songti SC",
        "STSong",
        serif;
    color: var(--ui-gold-2);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow:
        0 0 18px rgba(224, 173, 69, 0.15),
        0 10px 24px rgba(0, 0, 0, 0.24);
}

.home-title-stack p {
    max-width: 760px;
    margin: 0;
    color: rgba(247, 243, 232, 0.74);
    line-height: 1.8;
    font-size: 15px;
}

/* HUD 角色状态面板 */
.home-hud-panel {
    position: relative;
    z-index: 2;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(10px);
}

.home-hud-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.home-hud-title span {
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 850;
}

.home-hud-title strong {
    color: var(--ui-gold-2);
    font-size: 18px;
    letter-spacing: -0.025em;
    text-align: right;
}

.home-hud-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.home-hud-box {
    min-height: 66px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.048), rgba(255,255,255,0.018)),
        rgba(8, 11, 24, 0.42);
}

.home-hud-box span {
    display: block;
    margin-bottom: 6px;
    color: var(--ui-muted);
    font-size: 11.5px;
    font-weight: 850;
}

.home-hud-box strong {
    display: block;
    color: rgba(247, 243, 232, 0.92);
    font-size: 13px;
    line-height: 1.45;
}

/* 导航 dock */
.home-nav-dock {
    position: relative;
    z-index: 3;
    padding: 12px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(5, 8, 18, 0.42);
    backdrop-filter: blur(10px);
}

.home-nav-dock .main-nav-row,
.home-nav-dock nav,
.home-nav-dock .nav-row {
    margin: 0;
}

.home-nav-dock .nav-button,
.home-nav-dock a {
    white-space: nowrap;
}

/* 旧 topbar grid 对新 header 的影响修复 */
.home-game-header.topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
}

.home-game-header.topbar > div:first-child {
    min-width: 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .home-header-main {
        grid-template-columns: 1fr;
    }

    .home-hud-panel {
        max-width: 640px;
    }
}

@media (max-width: 720px) {
    .home-game-header {
        padding: 18px;
        border-radius: 24px;
    }

    .home-title-stack h1 span {
        font-size: clamp(34px, 11vw, 50px);
    }

    .home-title-stack h1 em {
        font-size: clamp(22px, 7vw, 32px);
    }

    .home-hud-grid {
        grid-template-columns: 1fr;
    }

    .home-hud-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-hud-title strong {
        text-align: left;
    }

    .home-nav-dock {
        padding: 10px;
    }
}

/* =========================
   UI-32 首页导航 Dock 精修 + 全站导航降噪
   ========================= */

/* 首页导航 dock 内部统一 */
.home-nav-dock {
    overflow: hidden;
}

/* 导航整体变成横向游戏 dock */
.home-nav-dock .main-nav-row,
.home-nav-dock nav,
.home-nav-dock .nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* 顶部 nav button 更像游戏快捷栏 */
.home-nav-dock .nav-button,
.home-nav-dock a {
    min-height: 38px;
    padding: 9px 13px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(9, 12, 26, 0.62);
    color: rgba(247, 243, 232, 0.86);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: none;
}

.home-nav-dock .nav-button:hover,
.home-nav-dock a:hover {
    transform: translateY(-1px);
    border-color: rgba(224, 173, 69, 0.30);
    background:
        linear-gradient(135deg, rgba(224,173,69,0.12), rgba(255,255,255,0.025)),
        rgba(9, 12, 26, 0.72);
    color: var(--ui-gold-2);
    text-decoration: none;
}

/* 当前常用入口做一点主按钮感 */
.home-nav-dock a[href="/"],
.home-nav-dock a[href="/world"],
.home-nav-dock a[href="/rankings"],
.home-nav-dock a[href="/inventory"],
.home-nav-dock a[href="/market"] {
    border-color: rgba(224, 173, 69, 0.18);
}

/* details 导航组优化 */
.home-nav-dock details,
.home-nav-dock .nav-drawer {
    position: relative;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(9, 12, 26, 0.62);
}

.home-nav-dock details[open],
.home-nav-dock .nav-drawer[open] {
    border-color: rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        rgba(9, 12, 26, 0.78);
}

.home-nav-dock summary {
    min-height: 38px;
    padding: 9px 13px;
    border-radius: 14px;
    color: rgba(247, 243, 232, 0.86);
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    list-style: none;
}

.home-nav-dock summary::-webkit-details-marker {
    display: none;
}

.home-nav-dock summary::after {
    content: "▾";
    margin-left: 7px;
    color: var(--ui-gold-2);
    font-size: 11px;
}

.home-nav-dock details[open] summary::after,
.home-nav-dock .nav-drawer[open] summary::after {
    content: "▴";
}

/* 下拉内容变成浮动菜单 */
.home-nav-dock .nav-drawer-content,
.home-nav-dock details > div,
.home-nav-dock details > ul {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    padding: 10px;
    display: grid;
    gap: 7px;
    border-radius: 18px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        rgba(7, 10, 24, 0.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.36);
    animation: drawerReveal 0.18s ease both;
}

.home-nav-dock .nav-drawer-content a,
.home-nav-dock details > div a,
.home-nav-dock details > ul a {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 12px;
}

/* 避免下拉被 header 裁切 */
.home-game-header,
.home-nav-dock {
    overflow: visible;
}

/* 非首页的 nav 也稍微降噪 */
.main-nav-row .nav-button,
.main-nav-row a {
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        color 0.16s ease;
}

/* 如果 nav 太长，小屏变横向滚动，不挤爆 */
@media (max-width: 900px) {
    .home-nav-dock {
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: thin;
    }

    .home-nav-dock .main-nav-row,
    .home-nav-dock nav,
    .home-nav-dock .nav-row {
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
    }

    .home-nav-dock .nav-button,
    .home-nav-dock a,
    .home-nav-dock summary {
        white-space: nowrap;
    }

    .home-nav-dock .nav-drawer-content,
    .home-nav-dock details > div,
    .home-nav-dock details > ul {
        position: fixed;
        left: 14px;
        right: 14px;
        top: auto;
        bottom: 18px;
        min-width: 0;
        max-height: 60vh;
        overflow-y: auto;
    }
}

@media (max-width: 520px) {
    .home-nav-dock {
        padding: 9px;
        border-radius: 18px;
    }

    .home-nav-dock .nav-button,
    .home-nav-dock a,
    .home-nav-dock summary {
        min-height: 36px;
        padding: 8px 11px;
        font-size: 12px;
    }
}

/* =========================
   UI-33 全站背景天幕 + 滚动条 + 页面层次统一
   ========================= */

/* 全站底层修仙天幕 */
html {
    min-height: 100%;
    background:
        radial-gradient(circle at 18% 12%, rgba(224, 173, 69, 0.08), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(110, 231, 255, 0.075), transparent 26%),
        radial-gradient(circle at 52% 82%, rgba(167, 139, 250, 0.06), transparent 28%),
        linear-gradient(135deg, #070914 0%, #090d20 45%, #050713 100%);
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 18%, rgba(224, 173, 69, 0.055), transparent 26%),
        radial-gradient(circle at 88% 12%, rgba(110, 231, 255, 0.052), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 38%);
}

/* 给 body 增加淡淡星点，不影响点击 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.22) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(224,173,69,0.20) 0 1px, transparent 1.8px),
        radial-gradient(circle, rgba(110,231,255,0.16) 0 1px, transparent 1.8px);
    background-size:
        180px 180px,
        260px 260px,
        340px 340px;
    background-position:
        0 0,
        70px 110px,
        130px 60px;
    opacity: 0.42;
}

/* 底部灵气雾层 */
body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38vh;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 80%, rgba(224,173,69,0.08), transparent 32%),
        radial-gradient(circle at 76% 82%, rgba(110,231,255,0.07), transparent 34%),
        linear-gradient(to top, rgba(3, 5, 13, 0.62), transparent);
}

/* 页面主体更像浮在背景上 */
.page,
.home-page-refined {
    position: relative;
    z-index: 1;
}

/* 全站卡片层次统一 */
.card {
    position: relative;
    isolation: isolate;
}

.card::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.035), transparent 38%, rgba(224,173,69,0.018));
    opacity: 0.72;
}

/* 大型区域卡片更有“仙府/界面面板”感 */
.world-hero-banner,
.new-life-hero,
.home-game-header,
.main-command-panel,
.system-matrix-panel,
.growth-archive-panel,
.world-menu-card,
.world-intel-card,
.character-profile-panel {
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

/* 悬浮时别太跳，改成高级微动 */
.card:hover {
    transform: translateY(-1px);
}

/* 主页区域之间更有节奏 */
.home-page-refined .game-dashboard {
    margin-top: 22px;
}

.home-page-refined .dashboard-center,
.home-page-refined .dashboard-left,
.home-page-refined .dashboard-right {
    position: relative;
}

/* 小标题更像游戏 UI */
.section-title-row h2,
.card > h2 {
    position: relative;
}

.section-title-row h2::after,
.card > h2::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 8px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(224, 173, 69, 0.82), transparent);
}

/* 但部分小卡片里不要重复下划线太乱 */
.world-menu-group h2::after,
.world-intel-group h2::after,
.growth-archive-group h2::after,
.summary-box h2::after,
.item h2::after {
    display: none;
}

/* 全站滚动条美化 */
::-webkit-scrollbar {
    width: 11px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(5, 8, 18, 0.82);
}

::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 2px solid rgba(5, 8, 18, 0.82);
    background:
        linear-gradient(180deg, rgba(224,173,69,0.55), rgba(110,231,255,0.32));
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(224,173,69,0.78), rgba(110,231,255,0.45));
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(224,173,69,0.55) rgba(5,8,18,0.82);
}

/* 小 scroll 区域统一 */
.small-scroll {
    padding-right: 4px;
}

.small-scroll::-webkit-scrollbar {
    width: 8px;
}

.small-scroll::-webkit-scrollbar-thumb {
    border-width: 1px;
}

/* 输入区统一更柔和 */
input,
select,
textarea {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(5, 8, 18, 0.66);
}

input:hover,
select:hover,
textarea:hover {
    border-color: rgba(224, 173, 69, 0.24);
}

/* notice / error 更像系统提示 */
.notice,
.error {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 14px 16px;
    margin: 14px 0;
    font-weight: 850;
}

.notice {
    border: 1px solid rgba(143, 240, 178, 0.24);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.12), transparent 34%),
        rgba(143, 240, 178, 0.055);
    color: rgba(215, 255, 226, 0.92);
}

.error {
    border: 1px solid rgba(255, 114, 114, 0.26);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.12), transparent 34%),
        rgba(255, 114, 114, 0.055);
    color: rgba(255, 210, 210, 0.94);
}

/* 空状态统一，不要太像 debug */
.muted {
    line-height: 1.7;
}

.card > .muted,
section > .muted {
    border-color: rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018)),
        rgba(255,255,255,0.025);
}

/* 链接 hover 更像游戏菜单 */
.story-link,
.mini-link,
.card a:not(.nav-button):not(.feature-hub-card):not(.recipe-card-link):not(.world-action):not(.system-matrix-card) {
    transition:
        color 0.16s ease,
        text-shadow 0.16s ease,
        opacity 0.16s ease;
}

.story-link:hover,
.mini-link:hover,
.card a:not(.nav-button):not(.feature-hub-card):not(.recipe-card-link):not(.world-action):not(.system-matrix-card):hover {
    color: #ffd982;
    text-shadow: 0 0 14px rgba(224,173,69,0.22);
}

/* 按钮点击反馈统一 */
button,
.nav-button,
.system-matrix-card,
.world-menu-links a,
.hub-link-grid a {
    transform-origin: center;
}

button:active,
.nav-button:active,
.system-matrix-card:active,
.world-menu-links a:active,
.hub-link-grid a:active {
    transform: translateY(1px) scale(0.99);
}

/* 顶部和底部空间收口 */
.home-page-refined {
    padding-bottom: 56px;
}

/* 手机端背景别太花 */
@media (max-width: 720px) {
    body::before {
        opacity: 0.25;
        background-size:
            150px 150px,
            220px 220px,
            280px 280px;
    }

    body::after {
        height: 28vh;
    }

    .section-title-row h2::after,
    .card > h2::after {
        width: 34px;
        height: 2px;
    }
}

/* =========================
   UI-34 移动端主页专门优化
   手机 / 小屏游戏大厅布局
   ========================= */

/* 平板以下：主页改成单列游戏大厅 */
@media (max-width: 980px) {
    .home-page-refined {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 72px;
    }

    .home-page-refined .game-dashboard {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 14px;
    }

    .home-page-refined .dashboard-left,
    .home-page-refined .dashboard-center,
    .home-page-refined .dashboard-right {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .home-page-refined .sticky-card {
        position: relative;
        top: auto;
    }

    .home-page-refined .card {
        border-radius: 20px;
        padding: 16px;
    }

    .home-page-refined .card h2 {
        font-size: 20px;
    }

    .home-page-refined .card h3 {
        font-size: 16px;
    }
}

/* 手机顶部 HUD 压缩 */
@media (max-width: 760px) {
    .home-game-header {
        margin-top: 8px;
        margin-bottom: 14px;
        padding: 16px;
        border-radius: 22px;
    }

    .home-header-main {
        gap: 16px;
    }

    .home-title-stack .visual-pill {
        font-size: 11px;
        padding: 6px 9px;
    }

    .home-title-stack h1 {
        margin: 10px 0;
        gap: 4px;
    }

    .home-title-stack h1 span {
        font-size: clamp(32px, 11vw, 46px);
        line-height: 0.95;
    }

    .home-title-stack h1 em {
        font-size: clamp(20px, 6.5vw, 30px);
    }

    .home-title-stack p {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .home-hud-panel {
        padding: 14px;
        border-radius: 18px;
    }

    .home-hud-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .home-hud-box {
        min-height: 58px;
        padding: 10px;
        border-radius: 13px;
    }

    .home-hud-box span {
        font-size: 11px;
    }

    .home-hud-box strong {
        font-size: 12px;
    }
}

/* 手机导航 dock：横向滑动，更像底部快捷栏 */
@media (max-width: 760px) {
    .home-nav-dock {
        position: sticky;
        top: 8px;
        z-index: 50;
        margin-left: -4px;
        margin-right: -4px;
        padding: 8px;
        border-radius: 18px;
        overflow-x: auto;
        overflow-y: visible;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .home-nav-dock::-webkit-scrollbar {
        height: 4px;
    }

    .home-nav-dock .main-nav-row,
    .home-nav-dock nav,
    .home-nav-dock .nav-row {
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
        gap: 7px;
    }

    .home-nav-dock .nav-button,
    .home-nav-dock a,
    .home-nav-dock summary {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 12px;
        border-radius: 12px;
    }
}

/* 手机 hero：保留气氛，但减少高度和人物挤压 */
@media (max-width: 760px) {
    .refined-world-hero-banner,
    .new-life-hero {
        grid-template-columns: 1fr;
        gap: 14px;
        min-height: auto;
        padding: 16px;
        border-radius: 22px;
    }

    .refined-hero-copy h2,
    .new-life-copy h2 {
        font-size: clamp(28px, 9vw, 38px);
        line-height: 1.05;
        margin: 10px 0;
    }

    .refined-hero-copy p,
    .new-life-copy p {
        font-size: 14px;
        line-height: 1.75;
    }

    .hero-promise-grid,
    .new-life-summary-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 14px;
    }

    .hero-promise-card {
        min-height: auto;
        padding: 12px;
        border-radius: 15px;
    }

    .hero-intent-row {
        gap: 6px;
        margin-top: 12px;
    }

    .intent-chip {
        min-height: 26px;
        padding: 5px 8px;
        font-size: 11px;
    }

    .refined-hero-art {
        min-height: 280px;
        border-radius: 18px;
    }

    .hero-gender-pills {
        top: 10px;
        right: 10px;
        gap: 6px;
    }

    .gender-pill {
        min-height: 24px;
        padding: 4px 8px;
        font-size: 11px;
    }

    .hero-moon-core {
        width: 78px;
        height: 78px;
        right: 10px;
        top: 58px;
        opacity: 0.62;
    }

    .hero-spirit-ring {
        width: 150px;
        height: 150px;
        top: 35%;
    }

    .floating-talisman,
    .floating-orb,
    .hero-light {
        opacity: 0.55;
    }
}

/* 手机人物：不再抢画面 */
@media (max-width: 760px) {
    .refined-hero-art .cultivator {
        width: 112px;
        height: 210px;
        bottom: 28px;
        transform: scale(0.84);
        transform-origin: bottom center;
    }

    .refined-hero-art .cultivator-male {
        left: 8px;
    }

    .refined-hero-art .cultivator-female {
        right: 0;
    }

    .refined-hero-art .cultivator-nameplate {
        top: -12px;
        min-width: 78px;
        font-size: 10px;
        padding: 4px 8px;
    }

    .refined-hero-art .cultivator-sword {
        height: 150px;
    }

    .refined-hero-art .cultivator-ribbon {
        width: 132px;
        opacity: 0.65;
    }
}

/* 手机创建角色页：性别选择卡更紧凑 */
@media (max-width: 760px) {
    .new-life-visual {
        min-height: 230px;
        border-radius: 18px;
    }

    .new-life-form-card {
        margin-top: 14px;
    }

    .new-life-form {
        gap: 14px;
    }

    .new-life-gender-select {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .gender-choice-card {
        min-height: 138px;
        padding: 14px;
        display: grid;
        grid-template-columns: 82px 1fr;
        gap: 12px;
        align-items: center;
    }

    .gender-choice-art {
        position: relative;
        left: auto;
        top: auto;
        width: 78px;
        height: 86px;
        transform: none;
        grid-row: span 2;
    }

    .gender-choice-card strong {
        margin-top: 0;
        margin-bottom: 6px;
        font-size: 18px;
    }

    .gender-choice-card p {
        font-size: 12.5px;
        line-height: 1.55;
    }

    .new-life-bottom-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .new-life-bottom-row button {
        width: 100%;
        min-height: 46px;
    }
}

/* 手机角色面板 */
@media (max-width: 760px) {
    .character-profile-panel {
        padding: 16px;
    }

    .character-profile-top {
        grid-template-columns: 72px 1fr;
        gap: 12px;
    }

    .character-avatar-orbit {
        width: 72px;
        height: 72px;
    }

    .avatar-core {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        font-size: 20px;
    }

    .character-title-block h2 {
        font-size: 21px;
    }

    .character-title-block .realm {
        font-size: 12px;
    }

    .character-identity-row {
        gap: 6px;
        margin: 7px 0 10px;
    }

    .gender-badge,
    .identity-badge {
        min-height: 26px;
        padding: 5px 9px;
        font-size: 11px;
    }

    .qi-core-panel {
        grid-template-columns: 1fr 64px;
        min-height: 78px;
        padding: 12px;
        border-radius: 16px;
    }

    .qi-core-panel strong {
        font-size: 26px;
    }

    .qi-core-visual {
        width: 60px;
        height: 60px;
    }

    .character-info-grid {
        gap: 8px;
    }

    .character-info-box {
        padding: 10px;
        border-radius: 13px;
    }
}

/* 手机修行控制台 */
@media (max-width: 760px) {
    .main-command-panel {
        padding: 16px;
    }

    .command-title-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .command-year-badge {
        width: fit-content;
        min-height: 30px;
        padding: 6px 10px;
        font-size: 11px;
    }

    .command-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 12px 0;
    }

    .command-status-box {
        padding: 10px;
        border-radius: 13px;
    }

    .command-status-box span {
        font-size: 11px;
    }

    .command-status-box strong {
        font-size: 12.5px;
    }

    .command-action-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .command-card {
        min-height: auto;
        border-radius: 18px;
    }

    .command-card-art {
        height: 94px;
    }

    .command-card-content {
        padding: 14px;
    }

    .command-card h3 {
        font-size: 20px;
    }

    .command-card p {
        min-height: auto;
        font-size: 12.5px;
    }

    .command-mini-stats {
        margin: 10px 0;
    }

    .command-secondary-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* 手机系统矩阵 */
@media (max-width: 760px) {
    .system-matrix-panel {
        padding: 16px;
    }

    .system-matrix-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .system-matrix-card {
        grid-template-columns: 58px 1fr;
        gap: 12px;
        min-height: auto;
        padding: 14px;
        border-radius: 18px;
    }

    .matrix-icon {
        width: 58px;
        height: 58px;
        border-radius: 18px;
    }

    .matrix-content span {
        min-height: 24px;
        font-size: 11px;
        margin-bottom: 6px;
    }

    .matrix-content strong {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .matrix-content p {
        font-size: 12.5px;
    }

    .matrix-tags {
        margin-top: 8px;
    }
}

/* 手机成长档案 / 世界菜单 / 世界情报 */
@media (max-width: 760px) {
    .growth-archive-panel,
    .world-menu-card,
    .world-intel-card {
        padding: 16px;
    }

    .growth-archive-list,
    .world-menu-list,
    .world-intel-list {
        gap: 9px;
        margin-top: 10px;
    }

    .growth-archive-group,
    .world-menu-group,
    .world-intel-group {
        border-radius: 16px;
    }

    .growth-archive-group summary,
    .world-menu-group summary,
    .world-intel-group summary {
        min-height: 62px;
        padding: 12px;
        grid-template-columns: 40px 1fr;
        gap: 10px;
    }

    .growth-archive-group summary::after,
    .world-menu-group summary::after,
    .world-intel-group summary::after {
        grid-column: 1 / -1;
        justify-self: start;
        min-width: 40px;
        padding: 4px 8px;
        font-size: 10.5px;
    }

    .growth-icon,
    .world-menu-icon,
    .world-intel-icon {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }

    .growth-archive-group strong,
    .world-menu-group strong,
    .world-intel-group strong {
        font-size: 15px;
    }

    .growth-archive-group small,
    .world-menu-group small,
    .world-intel-group small {
        font-size: 11.5px;
    }

    .growth-archive-content,
    .world-menu-links,
    .world-intel-content {
        padding: 0 12px 12px;
    }

    .world-menu-links {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .world-menu-links a {
        min-height: 32px;
        font-size: 12px;
    }

    .world-intel-content .small-scroll,
    .growth-archive-content .small-scroll {
        max-height: 260px;
    }
}

/* 超小屏幕 */
@media (max-width: 430px) {
    .home-page-refined {
        padding-left: 9px;
        padding-right: 9px;
    }

    .home-page-refined .card {
        padding: 14px;
        border-radius: 18px;
    }

    .home-title-stack h1 span {
        font-size: 32px;
    }

    .home-title-stack h1 em {
        font-size: 21px;
    }

    .home-hud-grid,
    .command-status-strip {
        grid-template-columns: 1fr;
    }

    .character-profile-top {
        grid-template-columns: 1fr;
    }

    .character-avatar-orbit {
        justify-self: start;
    }

    .system-matrix-card {
        grid-template-columns: 1fr;
    }

    .matrix-icon {
        width: 54px;
        height: 54px;
    }
}

/* =========================
   UI-35 首页最终视觉稳定层
   修复层级 / 过度动画 / 卡片密度 / 移动端细节
   ========================= */

/* ---------- 首页整体稳定 ---------- */

.home-page-refined {
    isolation: isolate;
}

.home-page-refined * {
    min-width: 0;
}

/* 防止旧 CSS 的 hover transform 让大区块跳动太明显 */
.home-page-refined .home-game-header:hover,
.home-page-refined .refined-world-hero-banner:hover,
.home-page-refined .new-life-hero:hover,
.home-page-refined .main-command-panel:hover,
.home-page-refined .system-matrix-panel:hover,
.home-page-refined .growth-archive-panel:hover,
.home-page-refined .world-menu-card:hover,
.home-page-refined .world-intel-card:hover,
.home-page-refined .character-profile-panel:hover {
    transform: none;
}

/* 大卡片只保留边框光效，不做明显位移 */
.home-page-refined .card {
    will-change: auto;
}

/* 页面主区域之间保持统一距离 */
.home-page-refined .dashboard-left,
.home-page-refined .dashboard-center,
.home-page-refined .dashboard-right {
    align-content: start;
}

/* ---------- Header 稳定 ---------- */

.home-game-header {
    max-width: 100%;
}

.home-game-header .visual-pill {
    width: fit-content;
}

.home-title-stack h1,
.home-title-stack p,
.home-hud-box strong {
    overflow-wrap: anywhere;
}

/* HUD 数字/文字不要挤爆 */
.home-hud-box {
    overflow: hidden;
}

.home-hud-box strong {
    word-break: break-word;
}

/* 导航下拉永远在最上层 */
.home-nav-dock {
    z-index: 80;
}

.home-nav-dock details {
    z-index: 100;
}

.home-nav-dock details[open] {
    z-index: 200;
}

/* ---------- Hero 人物区降噪 ---------- */

.refined-hero-art {
    isolation: isolate;
}

.hero-character-stage {
    pointer-events: none;
}

.hero-gender-pills {
    pointer-events: auto;
}

/* 人物暂时作为背景装饰，避免抢正文 */
.refined-hero-art .cultivator {
    transition:
        opacity 0.2s ease,
        filter 0.2s ease;
}

/* 未知性别时两个人物都降低一点存在感 */
.refined-hero-art.gender-unknown .cultivator-male,
.refined-hero-art.gender-unknown .cultivator-female {
    opacity: 0.58;
    filter:
        saturate(0.92)
        brightness(0.92)
        drop-shadow(0 18px 26px rgba(0, 0, 0, 0.24));
}

/* 当前性别高亮不要太刺眼 */
.refined-hero-art.gender-male .cultivator-male,
.refined-hero-art.gender-female .cultivator-female {
    opacity: 0.92;
}

.refined-hero-art.gender-male .cultivator-female,
.refined-hero-art.gender-female .cultivator-male {
    opacity: 0.26;
}

/* ---------- 主要行动控制台稳定 ---------- */

.command-card {
    isolation: isolate;
}

.command-card-art {
    pointer-events: none;
}

.command-card-content {
    pointer-events: auto;
}

/* 主要行动卡 hover 稍微收敛 */
.command-card:hover {
    transform: translateY(-2px);
}

/* 按钮在卡片底部更稳 */
.command-card-content form {
    margin-top: auto;
}

.command-card-content {
    display: grid;
    align-content: start;
}

/* 防止 mini tags 过多撑高 */
.command-mini-stats {
    min-height: 28px;
}

/* ---------- 系统矩阵稳定 ---------- */

.system-matrix-card {
    isolation: isolate;
}

.system-matrix-card:hover {
    transform: translateY(-2px);
}

.matrix-content strong,
.matrix-content p {
    overflow-wrap: anywhere;
}

/* matrix icon 不要被文字挤压 */
.matrix-icon {
    flex-shrink: 0;
}

/* ---------- 折叠菜单稳定 ---------- */

.growth-archive-group,
.world-menu-group,
.world-intel-group {
    contain: layout paint;
}

/* details 打开时内容和 summary 之间更清楚 */
.growth-archive-content,
.world-intel-content {
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    margin-top: 2px;
    padding-top: 14px;
}

.world-menu-links {
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    margin-top: 2px;
    padding-top: 14px;
}

/* summary hover 不要太亮 */
.growth-archive-group summary:hover,
.world-menu-group summary:hover,
.world-intel-group summary:hover {
    background: rgba(255, 255, 255, 0.025);
}

/* 展开/收起 pill 统一 */
.growth-archive-group summary::after,
.world-menu-group summary::after,
.world-intel-group summary::after {
    white-space: nowrap;
}

/* ---------- 表单区域统一稳定 ---------- */

.home-page-refined form input,
.home-page-refined form select,
.home-page-refined form textarea {
    max-width: 100%;
}

.home-page-refined form button {
    white-space: nowrap;
}

/* 入宗申请表避免按钮和输入框挤爆 */
.sect-join-request-form {
    align-items: stretch;
}

.sect-join-request-form button {
    min-width: 64px;
}

/* ---------- 空状态减少后台感 ---------- */

.home-page-refined .muted {
    color: rgba(247, 243, 232, 0.62);
}

.home-page-refined .card > .muted,
.home-page-refined section > .muted {
    font-size: 13px;
}

/* ---------- 右侧世界情报可读性 ---------- */

.world-intel-content .timeline-event p,
.world-intel-content .legend-card p,
.world-intel-content .item p {
    font-size: 12.5px;
    line-height: 1.65;
}

/* ---------- 小型列表统一密度 ---------- */

.home-page-refined .sect-list.compact,
.home-page-refined .legend-list.compact,
.home-page-refined .compact-history {
    gap: 9px;
}

.home-page-refined .item,
.home-page-refined .legend-card,
.home-page-refined .timeline-event,
.home-page-refined .sect-row {
    border-radius: 14px;
}

/* ---------- 防止全站 card::after 影响极小组件 ---------- */

.summary-box::after,
.gender-choice-card::after,
.command-card::after,
.system-matrix-card::after,
.growth-archive-group::after,
.world-menu-group::after,
.world-intel-group::after {
    display: none;
}

/* ---------- reduced motion 更完整 ---------- */

@media (prefers-reduced-motion: reduce) {
    .home-page-refined *,
    .home-page-refined *::before,
    .home-page-refined *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .home-page-refined .card,
    .home-page-refined .command-card,
    .home-page-refined .system-matrix-card {
        transform: none !important;
    }
}

/* ---------- 平板细节 ---------- */

@media (max-width: 980px) {
    .home-page-refined .dashboard-left {
        order: 1;
    }

    .home-page-refined .dashboard-center {
        order: 2;
    }

    .home-page-refined .dashboard-right {
        order: 3;
    }

    .home-page-refined .character-profile-panel {
        position: relative;
    }
}

/* ---------- 手机最终稳定 ---------- */

@media (max-width: 760px) {
    .home-page-refined {
        overflow-x: hidden;
    }

    .home-game-header,
    .refined-world-hero-banner,
    .new-life-hero,
    .character-profile-panel,
    .main-command-panel,
    .system-matrix-panel,
    .growth-archive-panel,
    .world-menu-card,
    .world-intel-card {
        box-shadow:
            0 16px 34px rgba(0, 0, 0, 0.18),
            inset 0 0 0 1px rgba(255, 255, 255, 0.022);
    }

    .home-page-refined .section-title-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .home-page-refined .section-title-row h2 {
        font-size: 19px;
    }

    .home-page-refined .section-title-row .muted {
        font-size: 12.5px;
    }

    .command-card:hover,
    .system-matrix-card:hover,
    .gender-choice-card:hover {
        transform: none;
    }

    .home-page-refined button,
    .home-page-refined .nav-button {
        min-height: 40px;
    }

    .home-page-refined input,
    .home-page-refined select {
        min-height: 42px;
    }

    .sect-join-request-form {
        grid-template-columns: 1fr;
    }
}

/* ---------- 极小屏幕最终保护 ---------- */

@media (max-width: 390px) {
    .home-page-refined {
        padding-left: 7px;
        padding-right: 7px;
    }

    .home-page-refined .card {
        padding: 12px;
    }

    .home-title-stack h1 span {
        font-size: 29px;
    }

    .home-title-stack h1 em {
        font-size: 19px;
    }

    .visual-pill {
        max-width: 100%;
        white-space: normal;
    }

    .character-title-block h2,
    .matrix-content strong,
    .command-card h3 {
        font-size: 18px;
    }

    .command-status-box,
    .home-hud-box,
    .character-info-box {
        padding: 9px;
    }
}

/* =========================
   UI-36 全站二级页面统一 HUD Header
   适用于 inventory / market / battle / alchemy / rankings 等页面
   ========================= */

/* 非首页 topbar 统一成二级页面 HUD */
.topbar:not(.home-game-header) {
    position: relative;
    overflow: hidden;
    margin: 10px auto 22px;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at 14% 22%, rgba(224, 173, 69, 0.12), transparent 28%),
        radial-gradient(circle at 86% 22%, rgba(110, 231, 255, 0.09), transparent 28%),
        linear-gradient(120deg, rgba(13, 16, 34, 0.94), rgba(7, 12, 30, 0.94));
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

/* 二级页面 header 灵气光 */
.topbar:not(.home-game-header)::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -120px;
    top: -140px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.16), rgba(110, 231, 255, 0.055), transparent 70%);
    filter: blur(12px);
    pointer-events: none;
    animation: titleAuraBreath 6s ease-in-out infinite;
}

/* 二级页面 header 底部淡光 */
.topbar:not(.home-game-header)::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background:
        linear-gradient(90deg, transparent, rgba(224, 173, 69, 0.42), rgba(110, 231, 255, 0.22), transparent);
    pointer-events: none;
}

/* topbar 内部内容保持在光效上方 */
.topbar:not(.home-game-header) > * {
    position: relative;
    z-index: 2;
}

/* 二级页面标题 */
.topbar:not(.home-game-header) h1 {
    margin: 0 0 10px;
    color: #f6f1e7;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1;
    letter-spacing: -0.055em;
    text-shadow:
        0 14px 34px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(224, 173, 69, 0.06);
}

.topbar:not(.home-game-header) p {
    max-width: 780px;
    margin: 0;
    color: rgba(247, 243, 232, 0.72);
    line-height: 1.75;
    font-size: 15px;
}

/* topbar 里面的 nav 统一成小型 dock */
.topbar:not(.home-game-header) .main-nav-row,
.topbar:not(.home-game-header) nav,
.topbar:not(.home-game-header) .nav-row {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* 二级页面导航按钮降噪 */
.topbar:not(.home-game-header) .nav-button,
.topbar:not(.home-game-header) a {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(9, 12, 26, 0.58);
    color: rgba(247, 243, 232, 0.86);
    font-size: 12.5px;
    font-weight: 900;
    text-decoration: none;
}

.topbar:not(.home-game-header) .nav-button:hover,
.topbar:not(.home-game-header) a:hover {
    transform: translateY(-1px);
    border-color: rgba(224, 173, 69, 0.30);
    background:
        linear-gradient(135deg, rgba(224,173,69,0.12), rgba(255,255,255,0.025)),
        rgba(9, 12, 26, 0.72);
    color: var(--ui-gold-2);
    text-decoration: none;
}

/* 二级页面 details nav */
.topbar:not(.home-game-header) details,
.topbar:not(.home-game-header) .nav-drawer {
    position: relative;
    z-index: 30;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(9, 12, 26, 0.58);
}

.topbar:not(.home-game-header) details[open],
.topbar:not(.home-game-header) .nav-drawer[open] {
    z-index: 200;
    border-color: rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        rgba(9, 12, 26, 0.78);
}

.topbar:not(.home-game-header) summary {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 13px;
    color: rgba(247, 243, 232, 0.86);
    font-size: 12.5px;
    font-weight: 950;
    cursor: pointer;
    list-style: none;
}

.topbar:not(.home-game-header) summary::-webkit-details-marker {
    display: none;
}

.topbar:not(.home-game-header) summary::after {
    content: "▾";
    margin-left: 7px;
    color: var(--ui-gold-2);
    font-size: 11px;
}

.topbar:not(.home-game-header) details[open] summary::after,
.topbar:not(.home-game-header) .nav-drawer[open] summary::after {
    content: "▴";
}

/* 二级页面下拉菜单 */
.topbar:not(.home-game-header) .nav-drawer-content,
.topbar:not(.home-game-header) details > div,
.topbar:not(.home-game-header) details > ul {
    position: absolute;
    z-index: 300;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    padding: 10px;
    display: grid;
    gap: 7px;
    border-radius: 18px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        rgba(7, 10, 24, 0.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.36);
    animation: drawerReveal 0.18s ease both;
}

.topbar:not(.home-game-header) .nav-drawer-content a,
.topbar:not(.home-game-header) details > div a,
.topbar:not(.home-game-header) details > ul a {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 12px;
}

/* 避免二级页面 header 裁切下拉 */
.topbar:not(.home-game-header) {
    overflow: visible;
}

/* 不同页面常用 heading 下面的第一个 card 稍微贴近 header */
.topbar:not(.home-game-header) + .notice,
.topbar:not(.home-game-header) + .error {
    margin-top: -6px;
}

/* 二级页面主内容第一张卡更像页面主体 */
.topbar:not(.home-game-header) ~ .card:first-of-type {
    border-color: rgba(224, 173, 69, 0.16);
}

/* 页面 header 后的 main/grid 距离统一 */
.topbar:not(.home-game-header) + main,
.topbar:not(.home-game-header) + section,
.topbar:not(.home-game-header) ~ main,
.topbar:not(.home-game-header) ~ section {
    position: relative;
    z-index: 1;
}

/* 手机端二级 header */
@media (max-width: 760px) {
    .topbar:not(.home-game-header) {
        margin-top: 8px;
        margin-bottom: 16px;
        padding: 16px;
        border-radius: 22px;
    }

    .topbar:not(.home-game-header) h1 {
        font-size: clamp(28px, 10vw, 40px);
        margin-bottom: 8px;
    }

    .topbar:not(.home-game-header) p {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .topbar:not(.home-game-header) .main-nav-row,
    .topbar:not(.home-game-header) nav,
    .topbar:not(.home-game-header) .nav-row {
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
        gap: 7px;
    }

    .topbar:not(.home-game-header) {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    .topbar:not(.home-game-header) .nav-button,
    .topbar:not(.home-game-header) a,
    .topbar:not(.home-game-header) summary {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .topbar:not(.home-game-header) .nav-drawer-content,
    .topbar:not(.home-game-header) details > div,
    .topbar:not(.home-game-header) details > ul {
        position: fixed;
        left: 14px;
        right: 14px;
        top: auto;
        bottom: 18px;
        min-width: 0;
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* =========================
   UI-37 二级页面内容卡片统一收紧
   inventory / market / battle / alchemy / crafting / sect pages
   ========================= */

/* ---------- 二级页面整体内容区 ---------- */

body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) .page {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 52px;
}

/* 二级页面卡片不要太散 */
body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) .card {
    border-radius: 24px;
    padding: 22px;
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.045), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(18, 21, 37, 0.84);
}

/* 二级页面卡片标题 */
body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) .card h2 {
    font-size: 23px;
    letter-spacing: -0.035em;
}

body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) .card h3 {
    font-size: 18px;
    letter-spacing: -0.025em;
}

/* section 间距统一 */
body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) section.card,
body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) main.card {
    margin-top: 18px;
}

/* ---------- 二级页面常见 grid 收紧 ---------- */

.two-panel,
.ending-grid,
.warehouse-request-grid,
.inventory-grid,
.artifact-grid,
.feature-hub-grid,
.recipe-grid,
.battle-grid,
.market-grid,
.role-grid,
.report-grid,
.settings-form-grid,
.admin-form-grid {
    gap: 14px;
}

.two-panel > div,
.two-panel > form,
.ending-grid > form,
.battle-grid > section,
.market-grid > section,
.role-grid > section,
.report-grid > section {
    border-radius: 20px;
}

/* ---------- 二级页面操作区统一 ---------- */

.action-grid,
.export-actions,
.page-actions,
.header-actions,
.admin-actions,
.visual-mini-actions {
    gap: 9px;
}

.action-grid button,
.action-grid .nav-button,
.export-actions .nav-button,
.page-actions a,
.header-actions a,
.admin-actions a {
    min-height: 40px;
    border-radius: 13px;
}

/* ---------- 表单区域更像游戏控制面板 ---------- */

.card form:not(.auth-form) {
    gap: 12px;
}

.card form label {
    gap: 7px;
}

.card form label span,
.card label span {
    color: var(--ui-gold-2);
    font-size: 12.5px;
    font-weight: 950;
}

.card form input,
.card form select,
.card form textarea {
    min-height: 42px;
    border-radius: 14px;
}

.card form textarea {
    min-height: 110px;
}

.card form button {
    min-height: 42px;
    border-radius: 14px;
}

/* inline form 不要挤爆 */
.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.inline-form input,
.inline-form select {
    flex: 1 1 180px;
}

.inline-form button {
    flex: 0 0 auto;
}

/* ---------- 资料列表统一 ---------- */

.sect-list,
.legend-list,
.market-list,
.warehouse-list,
.warehouse-request-list,
.role-member-list,
.alchemy-log-list,
.crafting-log-list,
.tool-list,
.admin-list,
.report-list,
.timeline,
.rank-list {
    gap: 11px;
}

/* 列表卡片密度统一 */
.item,
.sect-row,
.legend-card,
.market-listing,
.warehouse-entry,
.warehouse-request-row,
.warehouse-request-mini,
.role-member-row,
.alchemy-log,
.crafting-log,
.timeline-event,
.rank-row,
.tool-row,
.admin-row,
.report-row,
.inventory-item,
.artifact-item {
    border-radius: 18px;
    padding: 15px;
}

/* 重要列表 hover 轻一点 */
.item:hover,
.sect-row:hover,
.legend-card:hover,
.market-listing:hover,
.warehouse-entry:hover,
.warehouse-request-row:hover,
.warehouse-request-mini:hover,
.role-member-row:hover,
.alchemy-log:hover,
.crafting-log:hover,
.timeline-event:hover,
.rank-row:hover,
.inventory-item:hover,
.artifact-item:hover {
    transform: translateY(-1px);
}

/* ---------- inventory / artifact ---------- */

.inventory-grid,
.artifact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inventory-item,
.artifact-item {
    min-height: 150px;
}

.inventory-header,
.artifact-header {
    margin-bottom: 10px;
}

.inventory-header h3,
.artifact-header h3 {
    font-size: 18px;
}

.inventory-header > span,
.artifact-header > span {
    border-radius: 999px;
    font-size: 11.5px;
}

/* ---------- market / warehouse ---------- */

.market-listing,
.warehouse-entry {
    display: grid;
    gap: 10px;
}

.market-listing h3,
.warehouse-entry h3 {
    margin-bottom: 4px;
}

.market-listing p,
.warehouse-entry p {
    color: var(--ui-muted);
    line-height: 1.65;
}

/* 宗门审批类行 */
.warehouse-request-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 14px;
    align-items: start;
}

.warehouse-request-actions {
    display: grid;
    gap: 9px;
}

.warehouse-request-actions form {
    display: grid;
    gap: 8px;
}

/* ---------- battle / rank ---------- */

.rank-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.rank-main p {
    margin: 4px 0;
}

.rank-score {
    min-width: 86px;
}

/* ---------- timeline / history ---------- */

.timeline-event {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 14px;
}

.timeline-event .year {
    font-size: 12px;
    color: var(--ui-gold-2);
    font-weight: 950;
}

/* ---------- summary boxes ---------- */

.chronicle-summary-grid,
.info-grid,
.admin-info-grid,
.system-info-grid {
    gap: 12px;
}

.summary-box,
.info-box,
.admin-info-box,
.system-info-box {
    border-radius: 18px;
    padding: 15px;
}

.summary-box strong,
.info-box strong,
.admin-info-box strong,
.system-info-box strong {
    font-size: 24px;
}

/* ---------- 空状态统一 ---------- */

.card > .muted,
section > .muted {
    padding: 13px 14px;
    border-radius: 15px;
}

/* ---------- 二级页面视觉 banner 收紧 ---------- */

.page-visual-banner {
    min-height: 300px;
    padding: 24px;
    border-radius: 28px;
}

.page-visual-banner .visual-copy h2 {
    font-size: clamp(30px, 4vw, 48px);
}

.page-visual-banner .visual-copy p {
    font-size: 15px;
    line-height: 1.8;
}

/* ---------- 防止某些页面被旧 CSS 拉太宽 ---------- */

.card table {
    max-width: 100%;
}

table {
    font-size: 13px;
}

thead th {
    padding: 9px 11px;
}

tbody td {
    padding: 11px;
}

/* ---------- 页面底部留白 ---------- */

body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) main:last-child,
body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) section:last-child {
    margin-bottom: 36px;
}

/* ---------- 响应式 ---------- */

@media (max-width: 980px) {
    body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) .page {
        padding-left: 14px;
        padding-right: 14px;
    }

    .inventory-grid,
    .artifact-grid,
    .two-panel,
    .ending-grid,
    .warehouse-request-grid,
    .battle-grid,
    .market-grid,
    .role-grid,
    .report-grid,
    .settings-form-grid,
    .admin-form-grid,
    .chronicle-summary-grid,
    .info-grid,
    .admin-info-grid,
    .system-info-grid {
        grid-template-columns: 1fr;
    }

    .warehouse-request-row {
        grid-template-columns: 1fr;
    }

    .rank-row {
        grid-template-columns: 1fr;
    }

    .rank-number,
    .rank-score {
        justify-self: start;
    }

    .timeline-event {
        grid-template-columns: 1fr;
    }

    .page-visual-banner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) .page {
        padding-left: 10px;
        padding-right: 10px;
    }

    body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) .card {
        padding: 15px;
        border-radius: 20px;
    }

    body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) .card h2 {
        font-size: 20px;
    }

    .inline-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .inline-form button,
    .action-grid button,
    .action-grid .nav-button,
    .export-actions .nav-button,
    .page-actions a,
    .header-actions a {
        width: 100%;
    }

    .item,
    .sect-row,
    .legend-card,
    .market-listing,
    .warehouse-entry,
    .warehouse-request-row,
    .warehouse-request-mini,
    .role-member-row,
    .alchemy-log,
    .crafting-log,
    .timeline-event,
    .rank-row,
    .inventory-item,
    .artifact-item {
        padding: 13px;
        border-radius: 16px;
    }

    .page-visual-banner {
        padding: 18px;
        border-radius: 22px;
    }

    .page-visual-banner .visual-copy h2 {
        font-size: 28px;
    }
}

/* =========================
   UI-38 全站按钮体系统一
   主按钮 / secondary / danger / battle / world / nav
   ========================= */

/* ---------- 基础按钮统一 ---------- */

button,
.nav-button,
.world-action,
.secondary,
.danger-action,
.battle-action,
.full-nav,
a.nav-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 42px;
    display: inline-grid;
    place-items: center;
    gap: 6px;
    padding: 10px 15px;
    border-radius: 14px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 222, 128, 0.96), rgba(224, 173, 69, 0.90));
    color: rgba(20, 14, 8, 0.94);
    font-size: 14px;
    font-weight: 950;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 12px 26px rgba(224, 173, 69, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        filter 0.16s ease;
}

button::before,
.nav-button::before,
.world-action::before,
.secondary::before,
.danger-action::before,
.battle-action::before,
.full-nav::before,
a.nav-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.26), transparent);
    transform: translateX(-120%);
    transition: transform 0.45s ease;
}

button:hover,
.nav-button:hover,
.world-action:hover,
.secondary:hover,
.danger-action:hover,
.battle-action:hover,
.full-nav:hover,
a.nav-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
        0 16px 34px rgba(224, 173, 69, 0.20),
        0 0 24px rgba(224, 173, 69, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    text-decoration: none;
}

button:hover::before,
.nav-button:hover::before,
.world-action:hover::before,
.secondary:hover::before,
.danger-action:hover::before,
.battle-action:hover::before,
.full-nav:hover::before,
a.nav-button:hover::before {
    transform: translateX(120%);
}

button:active,
.nav-button:active,
.world-action:active,
.secondary:active,
.danger-action:active,
.battle-action:active,
.full-nav:active,
a.nav-button:active {
    transform: translateY(1px) scale(0.99);
    box-shadow:
        0 8px 18px rgba(224, 173, 69, 0.14),
        inset 0 2px 8px rgba(0, 0, 0, 0.16);
}

/* ---------- secondary：低优先级按钮 ---------- */

button.secondary,
.secondary,
a.secondary {
    border-color: rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.026)),
        rgba(13, 17, 34, 0.78);
    color: rgba(247, 243, 232, 0.86);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

button.secondary:hover,
.secondary:hover,
a.secondary:hover {
    border-color: rgba(224, 173, 69, 0.28);
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.12), rgba(255, 255, 255, 0.026)),
        rgba(13, 17, 34, 0.86);
    color: var(--ui-gold-2);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.18),
        0 0 22px rgba(224, 173, 69, 0.08);
}

/* ---------- nav-button：导航按钮 ---------- */

.nav-button,
a.nav-button,
.full-nav {
    border-color: rgba(224, 173, 69, 0.18);
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.12), rgba(255, 255, 255, 0.026)),
        rgba(11, 15, 30, 0.72);
    color: rgba(247, 243, 232, 0.88);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-button:hover,
a.nav-button:hover,
.full-nav:hover {
    color: var(--ui-gold-2);
    border-color: rgba(224, 173, 69, 0.34);
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.18), rgba(255, 255, 255, 0.03)),
        rgba(11, 15, 30, 0.82);
}

/* ---------- danger：危险操作 ---------- */

button.danger-action,
.danger-action,
a.danger-action {
    border-color: rgba(255, 114, 114, 0.34) !important;
    background:
        linear-gradient(135deg, rgba(255, 114, 114, 0.96), rgba(255, 173, 114, 0.88)) !important;
    color: rgba(35, 8, 8, 0.96) !important;
    box-shadow:
        0 12px 28px rgba(255, 114, 114, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

button.danger-action:hover,
.danger-action:hover,
a.danger-action:hover {
    box-shadow:
        0 16px 34px rgba(255, 114, 114, 0.24),
        0 0 26px rgba(255, 114, 114, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ---------- battle：战斗按钮 ---------- */

button.battle-action,
.battle-action,
a.battle-action {
    border-color: rgba(255, 114, 114, 0.30) !important;
    background:
        linear-gradient(135deg, rgba(255, 114, 114, 0.94), rgba(167, 139, 250, 0.88)) !important;
    color: rgba(18, 8, 26, 0.96) !important;
    box-shadow:
        0 12px 28px rgba(255, 114, 114, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

button.battle-action:hover,
.battle-action:hover,
a.battle-action:hover {
    box-shadow:
        0 16px 34px rgba(255, 114, 114, 0.22),
        0 0 26px rgba(167, 139, 250, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ---------- world-action：世界/确认类按钮 ---------- */

button.world-action,
.world-action,
a.world-action {
    border-color: rgba(143, 240, 178, 0.30);
    background:
        linear-gradient(135deg, rgba(143, 240, 178, 0.94), rgba(110, 231, 255, 0.82));
    color: rgba(4, 24, 18, 0.96);
    box-shadow:
        0 12px 28px rgba(143, 240, 178, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

button.world-action:hover,
.world-action:hover,
a.world-action:hover {
    box-shadow:
        0 16px 34px rgba(143, 240, 178, 0.20),
        0 0 26px rgba(110, 231, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ---------- 表单内按钮宽度规则 ---------- */

form button[type="submit"] {
    width: fit-content;
}

.inline-form button,
.action-grid button,
.command-card form button,
.command-secondary-row button,
.command-secondary-row .nav-button,
.system-matrix-card,
.gender-choice-card,
.new-life-bottom-row button,
.fusion-login-form button {
    width: 100%;
}

/* 避免小按钮撑太大 */
.warehouse-request-actions button,
.sect-join-request-form button,
.rank-row button,
.item button,
.sect-row button,
.market-listing button,
.inventory-item button,
.artifact-item button {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12.5px;
    border-radius: 12px;
}

/* ---------- disabled 状态统一 ---------- */

button:disabled,
button[disabled],
.secondary[disabled],
.nav-button[disabled],
.world-action[disabled],
.danger-action[disabled],
.battle-action[disabled] {
    opacity: 0.48 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.25) !important;
    transform: none !important;
    box-shadow: none !important;
}

button:disabled::before,
button[disabled]::before {
    display: none !important;
}

/* ---------- loading 状态兼容 ---------- */

button.is-loading,
button[disabled].is-loading {
    opacity: 0.82 !important;
    cursor: wait !important;
}

button.is-loading::before {
    display: none;
}

button.is-loading::after {
    border-color: rgba(20, 14, 8, 0.28);
    border-top-color: rgba(20, 14, 8, 0.92);
}

/* secondary loading 用浅色 spinner */
button.secondary.is-loading::after,
.secondary.is-loading::after,
.nav-button.is-loading::after {
    border-color: rgba(247, 243, 232, 0.22);
    border-top-color: rgba(247, 243, 232, 0.86);
}

/* ---------- 顶部导航按钮不要被主按钮样式压太重 ---------- */

.home-nav-dock .nav-button,
.home-nav-dock a,
.topbar:not(.home-game-header) .nav-button,
.topbar:not(.home-game-header) a {
    box-shadow: none;
}

.home-nav-dock .nav-button::before,
.home-nav-dock a::before,
.topbar:not(.home-game-header) .nav-button::before,
.topbar:not(.home-game-header) a::before {
    opacity: 0.6;
}

/* ---------- 移动端按钮 ---------- */

@media (max-width: 760px) {
    button,
    .nav-button,
    .world-action,
    .secondary,
    .danger-action,
    .battle-action,
    .full-nav,
    a.nav-button {
        min-height: 40px;
        padding: 9px 12px;
        border-radius: 13px;
        font-size: 13px;
    }

    form button[type="submit"] {
        width: 100%;
    }

    .inline-form button,
    .action-grid button,
    .export-actions .nav-button,
    .page-actions a,
    .header-actions a,
    .visual-mini-actions .nav-button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    button,
    .nav-button,
    .world-action,
    .secondary,
    .danger-action,
    .battle-action,
    .full-nav,
    a.nav-button {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 12.5px;
    }
}

/* =========================
   UI-39 全站表单输入框体系统一
   input / select / textarea / checkbox / radio
   ========================= */

/* ---------- 基础输入框统一 ---------- */

input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        rgba(5, 8, 18, 0.72);
    color: rgba(247, 243, 232, 0.92);
    font: inherit;
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 8px 18px rgba(0, 0, 0, 0.10);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease,
        color 0.18s ease;
}

input:hover,
select:hover,
textarea:hover {
    border-color: rgba(224, 173, 69, 0.28);
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(5, 8, 18, 0.78);
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(224, 173, 69, 0.52);
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.075), rgba(255, 255, 255, 0.02)),
        rgba(5, 8, 18, 0.86);
    box-shadow:
        0 0 0 4px rgba(224, 173, 69, 0.10),
        0 12px 26px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

/* ---------- placeholder ---------- */

input::placeholder,
textarea::placeholder {
    color: rgba(247, 243, 232, 0.38);
}

/* ---------- textarea ---------- */

textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.7;
}

/* ---------- select ---------- */

select {
    cursor: pointer;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(224, 173, 69, 0.88) 50%),
        linear-gradient(135deg, rgba(224, 173, 69, 0.88) 50%, transparent 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%,
        0 0;
    background-size:
        6px 6px,
        6px 6px,
        100% 100%;
    background-repeat: no-repeat;
    padding-right: 38px;
}

select option {
    background: #0b0f21;
    color: #f7f3e8;
}

/* ---------- label 统一 ---------- */

label {
    color: rgba(247, 243, 232, 0.82);
}

label span,
.form-label,
.field-label {
    display: inline-block;
    color: var(--ui-gold-2);
    font-size: 12.5px;
    font-weight: 950;
    margin-bottom: 6px;
}

/* ---------- 表单分组 ---------- */

.form-row,
.form-grid,
.settings-form,
.admin-form,
.bug-form,
.report-form,
.sect-create-form,
.warehouse-request-form,
.new-life-form,
.fusion-login-form {
    gap: 14px;
}

/* ---------- input 类型细节 ---------- */

input[type="number"] {
    font-variant-numeric: tabular-nums;
}

input[type="file"] {
    padding: 9px;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    min-height: 34px;
    margin-right: 10px;
    padding: 7px 11px;
    border-radius: 11px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.16), rgba(255, 255, 255, 0.03)),
        rgba(11, 15, 30, 0.78);
    color: var(--ui-gold-2);
    font-weight: 900;
    cursor: pointer;
}

/* ---------- checkbox / radio 基础美化 ---------- */

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    margin: 0 7px 0 0;
    appearance: none;
    display: inline-grid;
    place-items: center;
    vertical-align: -3px;
    border-radius: 6px;
    border: 1px solid rgba(224, 173, 69, 0.30);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
        rgba(5, 8, 18, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 6px 14px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]::before,
input[type="radio"]::before {
    content: "";
    width: 9px;
    height: 9px;
    transform: scale(0);
    transition: transform 0.14s ease;
    background: var(--ui-gold-2);
    box-shadow: 0 0 12px rgba(224, 173, 69, 0.35);
}

input[type="checkbox"]::before {
    border-radius: 3px;
    clip-path: polygon(14% 48%, 36% 70%, 84% 18%, 96% 30%, 38% 92%, 4% 58%);
}

input[type="radio"]::before {
    border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    border-color: rgba(224, 173, 69, 0.62);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.18), rgba(5, 8, 18, 0.88));
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
    transform: scale(1);
}

/* ---------- disabled / readonly ---------- */

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
    opacity: 0.56;
    cursor: not-allowed;
    filter: grayscale(0.25);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)),
        rgba(5, 8, 18, 0.56);
}

input[readonly],
textarea[readonly] {
    cursor: default;
}

/* ---------- error / invalid ---------- */

input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown) {
    border-color: rgba(255, 114, 114, 0.38);
}

input:invalid:not(:placeholder-shown):focus,
textarea:invalid:not(:placeholder-shown):focus,
select:invalid:not(:placeholder-shown):focus {
    box-shadow:
        0 0 0 4px rgba(255, 114, 114, 0.10),
        0 12px 26px rgba(0, 0, 0, 0.18);
}

/* ---------- 小型表单行 ---------- */

.inline-form input,
.inline-form select,
.sect-join-request-form input,
.warehouse-request-actions input {
    min-height: 40px;
    border-radius: 13px;
}

/* ---------- 登录 / 注册输入框保持高级感 ---------- */

.fusion-login-form input,
.auth-form input {
    min-height: 52px;
    border-radius: 17px;
}

/* ---------- 创建角色卡里的 radio 不要显示原生圆点 ---------- */

.gender-choice-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ---------- 表单中的 help text ---------- */

.form-help,
.help-text,
.field-help {
    display: block;
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.6;
    margin-top: 5px;
}

/* ---------- 表单中的字段组视觉 ---------- */

.field-box,
.form-box,
.input-panel {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(255, 255, 255, 0.035);
}

/* ---------- 搜索框类 ---------- */

input[type="search"] {
    padding-left: 40px;
}

.search-field,
.search-box {
    position: relative;
}

.search-field::before,
.search-box::before {
    content: "⌕";
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: rgba(224, 173, 69, 0.76);
    font-weight: 950;
    pointer-events: none;
}

/* ---------- 手机端 ---------- */

@media (max-width: 760px) {
    input,
    select,
    textarea {
        min-height: 42px;
        padding: 9px 12px;
        border-radius: 13px;
        font-size: 13px;
    }

    textarea {
        min-height: 100px;
    }

    label span,
    .form-label,
    .field-label {
        font-size: 12px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 17px;
        min-width: 17px;
        height: 17px;
        min-height: 17px;
    }

    .fusion-login-form input,
    .auth-form input {
        min-height: 48px;
    }
}

/* =========================
   UI-40 全站表格 / 排行榜 / 记录列表最终精修
   ========================= */

/* ---------- 通用数据卡片组 ---------- */

.rank-list,
.timeline,
.legend-list,
.sect-list,
.market-list,
.warehouse-list,
.warehouse-request-list,
.role-member-list,
.alchemy-log-list,
.crafting-log-list,
.tool-list,
.admin-list,
.report-list {
    display: grid;
    gap: 12px;
}

/* ---------- 通用列表行最终统一 ---------- */

.rank-row,
.timeline-event,
.legend-card,
.sect-row,
.item,
.market-listing,
.warehouse-entry,
.warehouse-request-row,
.warehouse-request-mini,
.role-member-row,
.alchemy-log,
.crafting-log,
.tool-row,
.admin-row,
.report-row,
.inventory-item,
.artifact-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.045), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(15, 18, 34, 0.80);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.rank-row::before,
.timeline-event::before,
.legend-card::before,
.sect-row::before,
.item::before,
.market-listing::before,
.warehouse-entry::before,
.warehouse-request-row::before,
.warehouse-request-mini::before,
.role-member-row::before,
.alchemy-log::before,
.crafting-log::before,
.inventory-item::before,
.artifact-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(120deg, transparent, rgba(224, 173, 69, 0.055), transparent);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
}

.rank-row:hover,
.timeline-event:hover,
.legend-card:hover,
.sect-row:hover,
.item:hover,
.market-listing:hover,
.warehouse-entry:hover,
.warehouse-request-row:hover,
.warehouse-request-mini:hover,
.role-member-row:hover,
.alchemy-log:hover,
.crafting-log:hover,
.inventory-item:hover,
.artifact-item:hover {
    transform: translateY(-1px);
    border-color: rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.075), transparent 34%),
        linear-gradient(135deg, rgba(224,173,69,0.06), rgba(255,255,255,0.022)),
        rgba(15, 18, 34, 0.86);
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.17),
        0 0 22px rgba(224, 173, 69, 0.045);
}

.rank-row:hover::before,
.timeline-event:hover::before,
.legend-card:hover::before,
.sect-row:hover::before,
.item:hover::before,
.market-listing:hover::before,
.warehouse-entry:hover::before,
.warehouse-request-row:hover::before,
.warehouse-request-mini:hover::before,
.role-member-row:hover::before,
.alchemy-log:hover::before,
.crafting-log:hover::before,
.inventory-item:hover::before,
.artifact-item:hover::before {
    transform: translateX(120%);
}

/* ---------- 排行榜最终样式 ---------- */

.rank-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
}

.rank-number {
    min-width: 48px;
    height: 48px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    color: var(--ui-gold-2);
    font-weight: 950;
    font-size: 15px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top, rgba(224, 173, 69, 0.24), rgba(224, 173, 69, 0.07)),
        rgba(255,255,255,0.035);
}

.rank-main strong {
    color: var(--ui-text);
    font-size: 16px;
}

.rank-main p {
    margin: 5px 0;
    color: var(--ui-muted);
    line-height: 1.65;
    font-size: 13px;
}

.rank-main span {
    color: rgba(247, 243, 232, 0.66);
    font-size: 12.5px;
}

.rank-score {
    min-width: 92px;
    padding: 9px 12px;
    border-radius: 999px;
    text-align: center;
    color: var(--ui-gold-2);
    font-size: 12.5px;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.09);
}

/* Top 3 排行榜更明显 */
.rank-list .rank-row:nth-child(1) {
    border-color: rgba(255, 218, 126, 0.40);
    background:
        radial-gradient(circle at top right, rgba(255, 218, 126, 0.13), transparent 34%),
        rgba(18, 20, 35, 0.88);
}

.rank-list .rank-row:nth-child(1) .rank-number {
    color: #fff2b8;
    border-color: rgba(255, 218, 126, 0.40);
    background:
        radial-gradient(circle, rgba(255, 240, 170, 0.34), rgba(224, 173, 69, 0.13));
    box-shadow: 0 0 22px rgba(224, 173, 69, 0.14);
}

.rank-list .rank-row:nth-child(2) {
    border-color: rgba(210, 220, 235, 0.26);
}

.rank-list .rank-row:nth-child(3) {
    border-color: rgba(214, 145, 84, 0.26);
}

/* ---------- 时间线 / 历史记录 ---------- */

.timeline-event {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
}

.timeline-event .year {
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.45;
}

.timeline-event strong {
    color: var(--ui-text);
    font-size: 14px;
}

.timeline-event p {
    margin: 6px 0;
    color: var(--ui-muted);
    line-height: 1.7;
    font-size: 13px;
}

.timeline-event .mini-link {
    display: inline-flex;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 900;
}

/* 历史重要度 */
.importance-1 {
    border-color: rgba(255, 255, 255, 0.08);
}

.importance-2 {
    border-color: rgba(110, 231, 255, 0.18);
}

.importance-3 {
    border-color: rgba(224, 173, 69, 0.22);
}

.importance-4,
.importance-5 {
    border-color: rgba(255, 114, 114, 0.22);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.07), transparent 34%),
        rgba(15, 18, 34, 0.82);
}

/* ---------- 传说卡 ---------- */

.legend-card {
    padding: 15px;
}

.legend-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.legend-header h3 {
    margin: 0 0 5px;
    font-size: 16px;
}

.legend-header p {
    margin: 0;
    color: var(--ui-muted);
    line-height: 1.6;
    font-size: 13px;
}

.legend-year {
    min-width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 11.5px;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.08);
}

/* ---------- 普通 item / sect-row ---------- */

.item-title {
    color: var(--ui-text);
    font-weight: 950;
    margin-bottom: 6px;
}

.item p,
.sect-row p,
.market-listing p,
.warehouse-entry p,
.alchemy-log p,
.crafting-log p {
    margin: 5px 0;
    color: var(--ui-muted);
    line-height: 1.65;
    font-size: 13px;
}

.item span,
.market-listing span,
.warehouse-entry span,
.alchemy-log span,
.crafting-log span {
    color: rgba(247, 243, 232, 0.62);
    font-size: 12px;
}

.sect-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

/* ---------- 背包 / 法器最终样式 ---------- */

.inventory-grid,
.artifact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.inventory-item,
.artifact-item {
    min-height: 158px;
    padding: 17px;
}

.inventory-header,
.artifact-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.inventory-header h3,
.artifact-header h3 {
    margin: 0 0 6px;
    color: var(--ui-text);
    font-size: 18px;
}

.inventory-header p,
.artifact-header p {
    margin: 0;
    color: var(--ui-muted);
    font-size: 13px;
}

.inventory-header > span,
.artifact-header > span {
    min-width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 11.5px;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.08);
}

/* ---------- 品级最终视觉 ---------- */

.grade-凡品 {
    border-color: rgba(255, 255, 255, 0.09);
}

.grade-灵品 {
    border-color: rgba(143, 240, 178, 0.22);
}

.grade-玄品 {
    border-color: rgba(110, 231, 255, 0.24);
}

.grade-地品 {
    border-color: rgba(167, 139, 250, 0.26);
}

.grade-天品 {
    border-color: rgba(224, 173, 69, 0.36);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.20),
        0 0 26px rgba(224, 173, 69, 0.08);
}

/* ---------- 状态最终视觉 ---------- */

.status-pending {
    border-color: rgba(224, 173, 69, 0.26);
}

.status-approved,
.status-sold,
.status-available,
.result-success {
    border-color: rgba(143, 240, 178, 0.26);
}

.status-rejected,
.status-cancelled,
.result-failed {
    border-color: rgba(255, 114, 114, 0.26);
}

/* 状态 badge */
.status-pending .warehouse-request-header > span,
.status-approved .warehouse-request-header > span,
.status-rejected .warehouse-request-header > span,
.status-cancelled .warehouse-request-header > span {
    min-width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 950;
}

.status-pending .warehouse-request-header > span {
    color: var(--ui-gold-2);
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.08);
}

.status-approved .warehouse-request-header > span {
    color: #9ff7bc;
    border: 1px solid rgba(143, 240, 178, 0.22);
    background: rgba(143, 240, 178, 0.08);
}

.status-rejected .warehouse-request-header > span,
.status-cancelled .warehouse-request-header > span {
    color: #ffb2b2;
    border: 1px solid rgba(255, 114, 114, 0.22);
    background: rgba(255, 114, 114, 0.08);
}

/* ---------- 仓库 / 审批行 ---------- */

.warehouse-request-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
    gap: 14px;
    align-items: start;
    padding: 16px;
}

.warehouse-request-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.warehouse-request-header strong {
    color: var(--ui-text);
    font-size: 15px;
}

.warehouse-request-header p {
    margin: 4px 0 0;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.6;
}

.warehouse-request-actions {
    display: grid;
    gap: 9px;
}

.warehouse-request-actions form {
    display: grid;
    gap: 8px;
}

/* ---------- mini-stats 最终统一 ---------- */

.mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}

.mini-stats span {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    color: rgba(247, 243, 232, 0.72);
    font-size: 11.5px;
    font-weight: 850;
    border: 1px solid rgba(255,255,255,0.075);
    background: rgba(255,255,255,0.04);
}

/* ---------- table 最终统一 ---------- */

.table-wrap,
.table-container {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    font-size: 13px;
}

thead th {
    padding: 10px 12px;
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid rgba(224, 173, 69, 0.16);
}

tbody tr {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.048), rgba(255,255,255,0.020)),
        rgba(15, 18, 34, 0.72);
    transition:
        background 0.16s ease,
        transform 0.16s ease;
}

tbody tr:hover {
    background:
        linear-gradient(135deg, rgba(224,173,69,0.07), rgba(255,255,255,0.022)),
        rgba(15, 18, 34, 0.82);
}

tbody td {
    padding: 12px;
    color: rgba(247, 243, 232, 0.82);
    border-top: 1px solid rgba(255,255,255,0.065);
    border-bottom: 1px solid rgba(255,255,255,0.065);
    line-height: 1.55;
}

tbody td:first-child {
    border-left: 1px solid rgba(255,255,255,0.065);
    border-radius: 14px 0 0 14px;
}

tbody td:last-child {
    border-right: 1px solid rgba(255,255,255,0.065);
    border-radius: 0 14px 14px 0;
}

/* 保留之前 card table 可滚动，但让表格不要变形 */
.card table {
    overflow-x: auto;
}

/* ---------- 空状态 ---------- */

.empty-state,
.card > .muted,
section > .muted {
    color: rgba(247, 243, 232, 0.62);
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.11);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018)),
        rgba(255,255,255,0.025);
}

/* ---------- 手机端 ---------- */

@media (max-width: 900px) {
    .rank-row,
    .warehouse-request-row,
    .sect-row,
    .timeline-event {
        grid-template-columns: 1fr;
    }

    .rank-number,
    .rank-score {
        justify-self: start;
    }

    .inventory-grid,
    .artifact-grid {
        grid-template-columns: 1fr;
    }

    .warehouse-request-actions {
        grid-template-columns: 1fr;
    }

    .legend-header,
    .warehouse-request-header,
    .inventory-header,
    .artifact-header {
        flex-direction: column;
    }

    .legend-year {
        align-self: flex-start;
    }
}

@media (max-width: 640px) {
    .rank-row,
    .timeline-event,
    .legend-card,
    .sect-row,
    .item,
    .market-listing,
    .warehouse-entry,
    .warehouse-request-row,
    .warehouse-request-mini,
    .role-member-row,
    .alchemy-log,
    .crafting-log,
    .inventory-item,
    .artifact-item {
        padding: 13px;
        border-radius: 16px;
    }

    .rank-number {
        min-width: 40px;
        height: 40px;
        border-radius: 14px;
    }

    .rank-score {
        width: 100%;
    }

    .mini-stats {
        display: grid;
        grid-template-columns: 1fr;
    }

    .mini-stats span {
        width: 100%;
        justify-content: center;
    }

    table {
        font-size: 12.5px;
    }

    thead th,
    tbody td {
        padding: 9px 10px;
    }
}

/* =========================
   UI-41 全站系统提示 / 空状态 / Notice / Error 统一
   ========================= */

/* ---------- Notice / Error 基础系统提示 ---------- */

.notice,
.error,
.warning,
.success,
.system-message,
.flash-message {
    position: relative;
    overflow: hidden;
    margin: 16px 0;
    padding: 15px 17px 15px 48px;
    border-radius: 18px;
    font-weight: 850;
    line-height: 1.7;
    backdrop-filter: blur(10px);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.notice::before,
.error::before,
.warning::before,
.success::before,
.system-message::before,
.flash-message::before {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 950;
}

/* 成功 / 普通通知 */
.notice,
.success {
    border: 1px solid rgba(143, 240, 178, 0.26);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.13), transparent 34%),
        linear-gradient(135deg, rgba(143, 240, 178, 0.075), rgba(255, 255, 255, 0.018)),
        rgba(9, 22, 18, 0.76);
    color: rgba(220, 255, 230, 0.94);
}

.notice::before,
.success::before {
    content: "✓";
    color: rgba(6, 32, 20, 0.95);
    background: rgba(143, 240, 178, 0.92);
    box-shadow: 0 0 18px rgba(143, 240, 178, 0.22);
}

/* 错误 */
.error {
    border: 1px solid rgba(255, 114, 114, 0.30);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.13), transparent 34%),
        linear-gradient(135deg, rgba(255, 114, 114, 0.075), rgba(255, 255, 255, 0.018)),
        rgba(30, 10, 14, 0.76);
    color: rgba(255, 220, 220, 0.96);
}

.error::before {
    content: "!";
    color: rgba(48, 8, 8, 0.96);
    background: rgba(255, 114, 114, 0.92);
    box-shadow: 0 0 18px rgba(255, 114, 114, 0.22);
}

/* 警告 */
.warning {
    border: 1px solid rgba(224, 173, 69, 0.30);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.14), transparent 34%),
        linear-gradient(135deg, rgba(224, 173, 69, 0.075), rgba(255, 255, 255, 0.018)),
        rgba(32, 23, 9, 0.76);
    color: rgba(255, 237, 190, 0.96);
}

.warning::before {
    content: "!";
    color: rgba(40, 25, 4, 0.96);
    background: rgba(224, 173, 69, 0.92);
    box-shadow: 0 0 18px rgba(224, 173, 69, 0.22);
}

/* 普通系统说明 */
.system-message,
.flash-message {
    border: 1px solid rgba(110, 231, 255, 0.24);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.11), transparent 34%),
        linear-gradient(135deg, rgba(110, 231, 255, 0.060), rgba(255, 255, 255, 0.018)),
        rgba(8, 18, 30, 0.76);
    color: rgba(218, 245, 255, 0.94);
}

.system-message::before,
.flash-message::before {
    content: "i";
    color: rgba(4, 25, 36, 0.96);
    background: rgba(110, 231, 255, 0.88);
    box-shadow: 0 0 18px rgba(110, 231, 255, 0.22);
}

/* 提示条扫光 */
.notice::after,
.error::after,
.warning::after,
.success::after,
.system-message::after,
.flash-message::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent, rgba(255,255,255,0.055), transparent);
    transform: translateX(-120%);
    animation: messageSweep 2.6s ease-in-out 1;
    pointer-events: none;
}

@keyframes messageSweep {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(120%);
    }
}

/* ---------- 空状态统一 ---------- */

.empty-state,
.no-data,
.card > .muted,
section > .muted,
main > .muted {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 18px 50px;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.13);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.040), rgba(255,255,255,0.016)),
        rgba(255,255,255,0.024);
    color: rgba(247, 243, 232, 0.64);
    line-height: 1.75;
}

.empty-state::before,
.no-data::before,
.card > .muted::before,
section > .muted::before,
main > .muted::before {
    content: "∅";
    position: absolute;
    left: 17px;
    top: 18px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: rgba(224, 173, 69, 0.88);
    border: 1px solid rgba(224, 173, 69, 0.24);
    background: rgba(224, 173, 69, 0.07);
    font-size: 13px;
    font-weight: 950;
}

/* 避免 mini 文案被加 icon 后太怪 */
.mini-stats .muted,
.legend-card .muted,
.item .muted,
.timeline-event .muted,
.world-intel-content .muted,
.growth-archive-content .muted,
.world-menu-links .muted {
    padding: 12px 13px;
}

.mini-stats .muted::before,
.legend-card .muted::before,
.item .muted::before,
.timeline-event .muted::before,
.world-intel-content .muted::before,
.growth-archive-content .muted::before,
.world-menu-links .muted::before {
    display: none;
}

/* ---------- 条件不足 / 限制类卡片 ---------- */

.item:has(.item-title),
.requirement-box,
.condition-box,
.locked-box {
    position: relative;
}

.item .item-title,
.requirement-box strong,
.condition-box strong,
.locked-box strong {
    color: var(--ui-gold-2);
}

/* 条件不足文字更清楚 */
.item .item-title + p,
.requirement-box p,
.condition-box p,
.locked-box p {
    color: rgba(247, 243, 232, 0.68);
}

/* ---------- 状态类提示 badge ---------- */

.status-badge,
.result-badge,
.type-badge,
.event-type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 950;
    line-height: 1;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.08);
    color: var(--ui-gold-2);
}

.status-badge.success,
.result-badge.success,
.status-approved .status-badge,
.status-available .status-badge {
    border-color: rgba(143, 240, 178, 0.24);
    background: rgba(143, 240, 178, 0.08);
    color: #9ff7bc;
}

.status-badge.danger,
.result-badge.danger,
.status-rejected .status-badge,
.status-cancelled .status-badge {
    border-color: rgba(255, 114, 114, 0.24);
    background: rgba(255, 114, 114, 0.08);
    color: #ffb2b2;
}

.status-badge.info,
.result-badge.info {
    border-color: rgba(110, 231, 255, 0.24);
    background: rgba(110, 231, 255, 0.08);
    color: #aeefff;
}

/* ---------- 页面说明段落 ---------- */

.page-description,
.section-description,
.help-panel {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(110, 231, 255, 0.16);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.075), transparent 34%),
        rgba(255, 255, 255, 0.035);
    color: rgba(247, 243, 232, 0.70);
    line-height: 1.75;
}

/* ---------- 表单帮助 / 说明 ---------- */

.form-help,
.help-text,
.field-help,
small {
    color: rgba(247, 243, 232, 0.55);
}

.form-help,
.help-text,
.field-help {
    padding-left: 2px;
}

/* ---------- 确认/危险区域视觉 ---------- */

.danger-zone,
.cleanup-danger,
.admin-danger,
.dev-warning {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.11), transparent 34%),
        rgba(255, 114, 114, 0.045);
}

.danger-zone::before,
.cleanup-danger::before,
.admin-danger::before,
.dev-warning::before {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    right: -62px;
    top: -62px;
    border-radius: 50%;
    background: rgba(255, 114, 114, 0.12);
    filter: blur(8px);
    pointer-events: none;
}

/* ---------- notice/error 在首页和二级页的间距 ---------- */

.home-page-refined > .notice,
.home-page-refined > .error,
.page > .notice,
.page > .error {
    margin-top: 14px;
    margin-bottom: 16px;
}

/* ---------- 紧凑列表里的空状态 ---------- */

.small-scroll .muted,
.compact .muted {
    margin: 0;
    font-size: 12.5px;
}

/* ---------- 手机端 ---------- */

@media (max-width: 760px) {
    .notice,
    .error,
    .warning,
    .success,
    .system-message,
    .flash-message {
        padding: 13px 14px 13px 42px;
        border-radius: 16px;
        font-size: 13px;
    }

    .notice::before,
    .error::before,
    .warning::before,
    .success::before,
    .system-message::before,
    .flash-message::before {
        left: 14px;
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .empty-state,
    .no-data,
    .card > .muted,
    section > .muted,
    main > .muted {
        padding: 14px 14px 14px 42px;
        border-radius: 16px;
        font-size: 12.5px;
    }

    .empty-state::before,
    .no-data::before,
    .card > .muted::before,
    section > .muted::before,
    main > .muted::before {
        left: 14px;
        top: 15px;
        width: 19px;
        height: 19px;
        font-size: 11px;
    }

    .page-description,
    .section-description,
    .help-panel {
        padding: 13px 14px;
        border-radius: 16px;
        font-size: 13px;
    }
}

/* =========================
   UI-42 全站弹性布局最终排错
   防横向爆版 / 长文字 / 表格 / 按钮 / details 层级
   ========================= */

/* ---------- 全站防爆版基础 ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

a,
button,
input,
select,
textarea,
summary,
strong,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    min-width: 0;
}

/* 长文字 / 英文 / URL 不要撑爆 */
p,
span,
strong,
small,
em,
a,
td,
th,
li,
label,
input,
textarea,
select,
.card,
.item,
.rank-row,
.timeline-event,
.market-listing,
.warehouse-entry,
.warehouse-request-row,
.inventory-item,
.artifact-item,
.system-matrix-card,
.command-card,
.character-info-box,
.home-hud-box {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---------- page 容器最终保护 ---------- */

.page,
.home-page-refined,
.login-fusion-shell,
.register-fusion-shell {
    max-width: 100%;
}

.page {
    overflow-x: clip;
}

/* 如果浏览器不支持 clip，保底 hidden */
@supports not (overflow-x: clip) {
    .page {
        overflow-x: hidden;
    }
}

/* ---------- grid / flex 防撑爆 ---------- */

.game-dashboard,
.dashboard-left,
.dashboard-center,
.dashboard-right,
.two-panel,
.ending-grid,
.inventory-grid,
.artifact-grid,
.system-matrix-grid,
.command-action-grid,
.command-status-strip,
.command-secondary-row,
.growth-archive-list,
.world-menu-list,
.world-intel-list,
.feature-hub-grid,
.chronicle-summary-grid,
.info-grid,
.admin-info-grid,
.system-info-grid,
.role-grid,
.market-grid,
.battle-grid,
.report-grid {
    min-width: 0;
}

.game-dashboard > *,
.dashboard-left > *,
.dashboard-center > *,
.dashboard-right > *,
.two-panel > *,
.ending-grid > *,
.inventory-grid > *,
.artifact-grid > *,
.system-matrix-grid > *,
.command-action-grid > *,
.command-status-strip > *,
.command-secondary-row > *,
.growth-archive-list > *,
.world-menu-list > *,
.world-intel-list > * {
    min-width: 0;
}

/* flex 子项必须允许缩小 */
.inline-form > *,
.section-title-row > *,
.legend-header > *,
.warehouse-request-header > *,
.inventory-header > *,
.artifact-header > *,
home-hud-title > * {
    min-width: 0;
}

/* ---------- 卡片最终保护 ---------- */

.card {
    max-width: 100%;
    min-width: 0;
}

.card > * {
    min-width: 0;
}

/* 防止 card hover/transform 造成边缘横向滚动 */
.card:hover {
    max-width: 100%;
}

/* 大型视觉区不要把页面撑宽 */
.home-game-header,
.refined-world-hero-banner,
.new-life-hero,
.page-visual-banner,
.login-fusion-stage,
.register-fusion-stage {
    max-width: 100%;
}

/* ---------- 按钮最终保护 ---------- */

button,
.nav-button,
.world-action,
.secondary,
.danger-action,
.battle-action,
.full-nav,
a.nav-button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

button,
.nav-button,
.world-action,
.secondary,
.danger-action,
.battle-action {
    line-height: 1.25;
}

/* 小按钮不要被全局 width 影响得太夸张 */
.sect-row button,
.item button,
.rank-row button,
.inventory-item button,
.artifact-item button,
.market-listing button,
.warehouse-entry button,
.warehouse-request-actions button {
    width: auto;
}

/* 但手机端仍然好按 */
@media (max-width: 760px) {
    .sect-row button,
    .item button,
    .rank-row button,
    .inventory-item button,
    .artifact-item button,
    .market-listing button,
    .warehouse-entry button,
    .warehouse-request-actions button {
        width: 100%;
    }
}

/* ---------- 表单最终保护 ---------- */

form {
    max-width: 100%;
    min-width: 0;
}

input,
select,
textarea {
    max-width: 100%;
}

.inline-form {
    min-width: 0;
}

.inline-form input,
.inline-form select,
.inline-form button {
    min-width: 0;
}

/* 避免 select 文字太长撑爆 */
select {
    text-overflow: ellipsis;
}

/* ---------- 表格最终保护 ---------- */

table {
    min-width: 720px;
}

.card:has(table),
.table-wrap,
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 没有包 table-wrap 的 table 也能滚动 */
.card > table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-spacing: 0 10px;
}

/* 表格里的按钮不要撑爆 */
td button,
td .nav-button,
td a {
    max-width: 220px;
}

/* ---------- details / dropdown 层级最终修复 ---------- */

details {
    position: relative;
}

details[open] {
    z-index: 250;
}

.home-nav-dock,
.topbar,
.home-game-header {
    isolation: isolate;
}

.home-nav-dock details[open],
.topbar details[open] {
    z-index: 500;
}

/* details 菜单不被卡片裁切 */
.home-game-header,
.home-nav-dock,
.topbar:not(.home-game-header) {
    overflow: visible;
}

/* 折叠内容内部不要撑爆 */
.growth-archive-content,
.world-menu-links,
.world-intel-content,
.nav-drawer-content {
    min-width: 0;
}

/* ---------- 首页人物 / 背景装饰防撑爆 ---------- */

.refined-hero-art,
.new-life-visual,
.login-scene-bg,
.auth-stage-bg,
.visual-art {
    overflow: hidden;
}

.cultivator,
.hero-moon-core,
.hero-spirit-ring,
.floating-talisman,
.floating-orb,
.login-moon,
.login-sword-light,
.new-life-ring,
.new-life-scroll,
.new-life-sword {
    max-width: none;
}

/* ---------- 列表高度最终保护 ---------- */

.small-scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

.world-intel-content .small-scroll,
.growth-archive-content .small-scroll,
.dashboard-right .small-scroll,
.dashboard-center .small-scroll {
    max-height: min(340px, 60vh);
}

/* ---------- notice / error 防爆 ---------- */

.notice,
.error,
.warning,
.success,
.system-message,
.flash-message {
    max-width: 100%;
}

.notice *,
.error *,
.warning *,
.success *,
.system-message *,
.flash-message * {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------- 手机端最终排错 ---------- */

@media (max-width: 980px) {
    .page,
    .home-page-refined {
        width: 100%;
        max-width: 100%;
    }

    .topbar:not(.home-game-header),
    .home-game-header,
    .refined-world-hero-banner,
    .new-life-hero,
    .main-command-panel,
    .system-matrix-panel,
    .growth-archive-panel,
    .world-menu-card,
    .world-intel-card,
    .character-profile-panel {
        max-width: 100%;
    }
}

@media (max-width: 760px) {
    html,
    body {
        overflow-x: hidden;
    }

    .page,
    .home-page-refined {
        padding-left: 10px;
        padding-right: 10px;
    }

    .card {
        max-width: 100%;
    }

    /* 所有主要 grid 在手机强制单列 */
    .game-dashboard,
    .dashboard-left,
    .dashboard-center,
    .dashboard-right,
    .two-panel,
    .ending-grid,
    .inventory-grid,
    .artifact-grid,
    .system-matrix-grid,
    .command-action-grid,
    .command-status-strip,
    .command-secondary-row,
    .growth-archive-list,
    .world-menu-list,
    .world-intel-list,
    .chronicle-summary-grid,
    .info-grid,
    .admin-info-grid,
    .system-info-grid,
    .warehouse-request-grid,
    .role-grid,
    .market-grid,
    .battle-grid,
    .report-grid {
        grid-template-columns: 1fr !important;
    }

    .section-title-row,
    .legend-header,
    .warehouse-request-header,
    .inventory-header,
    .artifact-header {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .inline-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .inline-form > * {
        width: 100%;
    }

    table {
        min-width: 640px;
    }
}

/* ---------- 极小屏幕最终保护 ---------- */

@media (max-width: 420px) {
    .page,
    .home-page-refined {
        padding-left: 7px;
        padding-right: 7px;
    }

    .card {
        padding-left: 12px;
        padding-right: 12px;
    }

    .home-game-header,
    .topbar:not(.home-game-header) {
        padding-left: 14px;
        padding-right: 14px;
    }

    .visual-pill,
    .command-year-badge,
    .legend-year,
    .rank-score,
    .status-badge,
    .result-badge,
    .type-badge,
    .event-type-pill {
        width: fit-content;
        max-width: 100%;
        white-space: normal;
    }

    table {
        min-width: 580px;
    }
}

/* =========================
   UI-43 全站空页面 / 加载骨架 / 无数据状态美化
   ========================= */

/* ---------- 通用空状态强化 ---------- */

.empty-state,
.no-data,
.card > .muted,
section > .muted,
main > .muted {
    position: relative;
    min-height: 70px;
}

/* 空状态右侧淡淡阵纹 */
.empty-state::after,
.no-data::after,
.card > .muted::after,
section > .muted::after,
main > .muted::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 54px;
    height: 54px;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.12);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.08), transparent 68%);
    opacity: 0.58;
    pointer-events: none;
}

/* 小组件里的 muted 不要出现大阵纹 */
.mini-stats .muted::after,
.legend-card .muted::after,
.item .muted::after,
.timeline-event .muted::after,
.world-intel-content .muted::after,
.growth-archive-content .muted::after,
.world-menu-links .muted::after,
.command-card .muted::after,
.system-matrix-card .muted::after {
    display: none;
}

/* ---------- 空列表容器保护 ---------- */

.sect-list:empty,
.legend-list:empty,
.timeline:empty,
.rank-list:empty,
.market-list:empty,
.warehouse-list:empty,
.warehouse-request-list:empty,
.inventory-grid:empty,
.artifact-grid:empty {
    min-height: 120px;
    border-radius: 18px;
    border: 1px dashed rgba(224, 173, 69, 0.16);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 34%),
        rgba(255, 255, 255, 0.025);
}

.sect-list:empty::before,
.legend-list:empty::before,
.timeline:empty::before,
.rank-list:empty::before,
.market-list:empty::before,
.warehouse-list:empty::before,
.warehouse-request-list:empty::before,
.inventory-grid:empty::before,
.artifact-grid:empty::before {
    content: "暂无记录";
    display: grid;
    place-items: center;
    min-height: 120px;
    color: rgba(247, 243, 232, 0.58);
    font-size: 13px;
    font-weight: 850;
}

/* ---------- 加载骨架工具类 ----------
   之后任何页面只要加 class="skeleton-card" 或 skeleton-line 就会生效
*/

.skeleton-card,
.loading-card {
    position: relative;
    overflow: hidden;
    min-height: 120px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(15, 18, 34, 0.78);
}

.skeleton-card::before,
.loading-card::before,
.skeleton-line::before,
.skeleton-chip::before,
.skeleton-avatar::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255, 255, 255, 0.055) 42%,
            rgba(224, 173, 69, 0.085) 50%,
            rgba(255, 255, 255, 0.055) 58%,
            transparent 100%
        );
    transform: translateX(-120%);
    animation: skeletonSweep 1.8s ease-in-out infinite;
}

.skeleton-line,
.skeleton-chip,
.skeleton-avatar {
    position: relative;
    overflow: hidden;
    display: block;
    background: rgba(255, 255, 255, 0.055);
}

.skeleton-line {
    height: 14px;
    border-radius: 999px;
}

.skeleton-line.short {
    width: 42%;
}

.skeleton-line.medium {
    width: 66%;
}

.skeleton-line.long {
    width: 88%;
}

.skeleton-chip {
    width: 82px;
    height: 28px;
    border-radius: 999px;
}

.skeleton-avatar {
    width: 58px;
    height: 58px;
    border-radius: 18px;
}

@keyframes skeletonSweep {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(120%);
    }
}

/* ---------- 页面加载时的卡片进场更稳定 ---------- */

.page-ready .card,
.page-ready .topbar,
.page-ready .home-game-header,
.page-ready .refined-world-hero-banner,
.page-ready .main-command-panel,
.page-ready .system-matrix-panel,
.page-ready .growth-archive-panel,
.page-ready .world-menu-card,
.page-ready .world-intel-card {
    animation-name: ui43SoftEnter;
    animation-duration: 0.28s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

@keyframes ui43SoftEnter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 避免重复动画太夸张 */
.page-ready .card:nth-of-type(1) {
    animation-delay: 0.02s;
}

.page-ready .card:nth-of-type(2) {
    animation-delay: 0.04s;
}

.page-ready .card:nth-of-type(3) {
    animation-delay: 0.06s;
}

/* ---------- 条件不足 / 锁定状态更像系统限制 ---------- */

.item:has(.item-title):has(p),
.locked-box,
.requirement-box,
.condition-box {
    position: relative;
}

.item:has(.item-title):has(p)::after,
.locked-box::after,
.requirement-box::after,
.condition-box::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.14);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.08), transparent 70%);
    opacity: 0.42;
    pointer-events: none;
}

/* 只在普通 item 里显示，不影响大型列表太多 */
.timeline-event.item::after,
.legend-card.item::after {
    display: none;
}

/* ---------- 操作结果状态色增强 ---------- */

.result-success,
.status-approved,
.status-available {
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(143,240,178,0.045), rgba(255,255,255,0.018)),
        rgba(15, 18, 34, 0.82);
}

.result-failed,
.status-rejected,
.status-cancelled {
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(255,114,114,0.045), rgba(255,255,255,0.018)),
        rgba(15, 18, 34, 0.82);
}

.status-pending {
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(224,173,69,0.045), rgba(255,255,255,0.018)),
        rgba(15, 18, 34, 0.82);
}

/* ---------- 页面区块之间的空白优化 ---------- */

.card + .card,
.card + main,
main + .card,
section + section.card {
    margin-top: 18px;
}

/* 首页内部已经有 grid gap，不需要额外叠太多 */
.home-page-refined .dashboard-left .card + .card,
.home-page-refined .dashboard-center .card + .card,
.home-page-refined .dashboard-right .card + .card {
    margin-top: 0;
}

/* ---------- 搜索结果为空时更清楚 ---------- */

.search-empty,
.filter-empty {
    min-height: 130px;
    display: grid;
    place-items: center;
    padding: 24px;
    border-radius: 20px;
    border: 1px dashed rgba(110, 231, 255, 0.16);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.07), transparent 34%),
        rgba(255, 255, 255, 0.025);
    color: rgba(247, 243, 232, 0.60);
    text-align: center;
    line-height: 1.7;
}

/* ---------- 手机端 ---------- */

@media (max-width: 760px) {
    .empty-state,
    .no-data,
    .card > .muted,
    section > .muted,
    main > .muted {
        min-height: 58px;
    }

    .empty-state::after,
    .no-data::after,
    .card > .muted::after,
    section > .muted::after,
    main > .muted::after {
        width: 38px;
        height: 38px;
        right: 10px;
        opacity: 0.34;
    }

    .skeleton-card,
    .loading-card {
        min-height: 96px;
        border-radius: 17px;
    }

    .search-empty,
    .filter-empty {
        min-height: 110px;
        padding: 18px;
        border-radius: 17px;
        font-size: 13px;
    }

    .page-ready .card,
    .page-ready .topbar,
    .page-ready .home-game-header {
        animation-duration: 0.22s;
    }
}

/* ---------- 减少动画设置 ---------- */

@media (prefers-reduced-motion: reduce) {
    .skeleton-card::before,
    .loading-card::before,
    .skeleton-line::before,
    .skeleton-chip::before,
    .skeleton-avatar::before,
    .page-ready .card,
    .page-ready .topbar,
    .page-ready .home-game-header {
        animation: none !important;
    }
}

/* =========================
   UI-44 全站颜色变量最终统一
   主题色 / 状态色 / 背景层级
   ========================= */

:root {
    /* 主背景 */
    --theme-bg-0: #050713;
    --theme-bg-1: #070914;
    --theme-bg-2: #090d20;
    --theme-panel: rgba(18, 21, 37, 0.86);
    --theme-panel-strong: rgba(15, 18, 34, 0.92);
    --theme-panel-soft: rgba(255, 255, 255, 0.035);

    /* 文字 */
    --theme-text: #f7f3e8;
    --theme-text-soft: rgba(247, 243, 232, 0.78);
    --theme-text-muted: rgba(247, 243, 232, 0.60);
    --theme-text-faint: rgba(247, 243, 232, 0.42);

    /* 修仙主色 */
    --theme-gold: #e0ad45;
    --theme-gold-2: #ffd982;
    --theme-gold-dark: #a8732c;

    /* 灵气辅助色 */
    --theme-blue: #6ee7ff;
    --theme-blue-2: #aeefff;
    --theme-purple: #a78bfa;
    --theme-purple-2: #e8c7ff;
    --theme-green: #8ff0b2;
    --theme-green-2: #9ff7bc;
    --theme-red: #ff7272;
    --theme-red-2: #ffb2b2;

    /* 边框 */
    --theme-border: rgba(255, 255, 255, 0.085);
    --theme-border-soft: rgba(255, 255, 255, 0.060);
    --theme-border-gold: rgba(224, 173, 69, 0.24);
    --theme-border-blue: rgba(110, 231, 255, 0.22);
    --theme-border-purple: rgba(167, 139, 250, 0.24);
    --theme-border-green: rgba(143, 240, 178, 0.24);
    --theme-border-red: rgba(255, 114, 114, 0.26);

    /* 光效 */
    --theme-glow-gold: rgba(224, 173, 69, 0.12);
    --theme-glow-blue: rgba(110, 231, 255, 0.10);
    --theme-glow-purple: rgba(167, 139, 250, 0.10);
    --theme-glow-green: rgba(143, 240, 178, 0.10);
    --theme-glow-red: rgba(255, 114, 114, 0.10);

    /* 阴影 */
    --theme-shadow-soft: 0 14px 32px rgba(0, 0, 0, 0.16);
    --theme-shadow-panel: 0 22px 46px rgba(0, 0, 0, 0.20);
    --theme-shadow-strong: 0 28px 68px rgba(0, 0, 0, 0.28);

    /* 圆角 */
    --theme-radius-sm: 12px;
    --theme-radius-md: 16px;
    --theme-radius-lg: 22px;
    --theme-radius-xl: 28px;

    /* 兼容旧变量 */
    --ui-text: var(--theme-text);
    --ui-muted: var(--theme-text-muted);
    --ui-gold: var(--theme-gold);
    --ui-gold-2: var(--theme-gold-2);
}

/* ---------- 全站背景统一回主题变量 ---------- */

html {
    background:
        radial-gradient(circle at 18% 12%, var(--theme-glow-gold), transparent 24%),
        radial-gradient(circle at 82% 18%, var(--theme-glow-blue), transparent 26%),
        radial-gradient(circle at 52% 82%, var(--theme-glow-purple), transparent 28%),
        linear-gradient(135deg, var(--theme-bg-1) 0%, var(--theme-bg-2) 45%, var(--theme-bg-0) 100%);
}

body {
    color: var(--theme-text);
    background:
        radial-gradient(circle at 12% 18%, rgba(224, 173, 69, 0.055), transparent 26%),
        radial-gradient(circle at 88% 12%, rgba(110, 231, 255, 0.052), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 38%);
}

/* ---------- 卡片主题统一 ---------- */

.card,
.item,
.rank-row,
.timeline-event,
.legend-card,
.sect-row,
.market-listing,
.warehouse-entry,
.warehouse-request-row,
.warehouse-request-mini,
.role-member-row,
.inventory-item,
.artifact-item,
.system-matrix-card,
.command-card,
.growth-archive-group,
.world-menu-group,
.world-intel-group {
    border-color: var(--theme-border);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.045), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.022)),
        var(--theme-panel);
}

.card:hover,
.item:hover,
.rank-row:hover,
.timeline-event:hover,
.legend-card:hover,
.sect-row:hover,
.market-listing:hover,
.warehouse-entry:hover,
.warehouse-request-row:hover,
.warehouse-request-mini:hover,
.role-member-row:hover,
.inventory-item:hover,
.artifact-item:hover,
.system-matrix-card:hover,
.command-card:hover {
    border-color: var(--theme-border-gold);
}

/* ---------- 文字主题统一 ---------- */

h1,
h2,
h3,
h4,
strong {
    color: var(--theme-text);
}

p,
small,
.muted,
.card p,
.item p,
.timeline-event p,
.legend-card p,
.market-listing p,
.warehouse-entry p {
    color: var(--theme-text-muted);
}

.visual-pill,
.command-year-badge,
.intent-chip,
.command-tag,
.matrix-content span,
.status-badge,
.result-badge,
.type-badge,
.event-type-pill,
.rank-score,
.legend-year {
    color: var(--theme-gold-2);
    border-color: var(--theme-border-gold);
    background: rgba(224, 173, 69, 0.08);
}

/* ---------- 链接主题统一 ---------- */

a,
.story-link,
.mini-link {
    color: var(--theme-gold-2);
}

a:hover,
.story-link:hover,
.mini-link:hover {
    color: #ffe8a6;
    text-shadow: 0 0 14px rgba(224, 173, 69, 0.24);
}

/* ---------- 状态色统一 ---------- */

.status-pending,
.result-pending {
    border-color: var(--theme-border-gold);
    background:
        radial-gradient(circle at top right, var(--theme-glow-gold), transparent 34%),
        linear-gradient(135deg, rgba(224, 173, 69, 0.045), rgba(255, 255, 255, 0.018)),
        var(--theme-panel);
}

.status-approved,
.status-available,
.status-sold,
.result-success,
.success,
.notice {
    border-color: var(--theme-border-green);
}

.status-rejected,
.status-cancelled,
.result-failed,
.error {
    border-color: var(--theme-border-red);
}

/* ---------- 性别主题统一 ---------- */

.gender-男,
.male-pill,
.avatar-male .avatar-ring {
    border-color: var(--theme-border-blue);
}

.gender-男,
.male-pill {
    color: var(--theme-blue-2);
    background: rgba(110, 231, 255, 0.08);
}

.gender-女,
.female-pill,
.avatar-female .avatar-ring {
    border-color: var(--theme-border-purple);
}

.gender-女,
.female-pill {
    color: var(--theme-purple-2);
    background: rgba(167, 139, 250, 0.08);
}

.gender-未知,
.unknown-pill {
    color: var(--theme-gold-2);
    border-color: var(--theme-border-gold);
    background: rgba(224, 173, 69, 0.08);
}

/* ---------- 输入框主题统一 ---------- */

input,
select,
textarea {
    border-color: rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        rgba(5, 8, 18, 0.72);
    color: var(--theme-text);
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--theme-border-gold);
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(224, 173, 69, 0.52);
    box-shadow:
        0 0 0 4px rgba(224, 173, 69, 0.10),
        0 12px 26px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---------- 按钮主题统一 ---------- */

button,
.nav-button,
.world-action,
.secondary,
.danger-action,
.battle-action,
.full-nav,
a.nav-button {
    border-color: var(--theme-border-gold);
}

button:not(.secondary):not(.danger-action):not(.battle-action):not(.world-action):not(.nav-button) {
    background:
        linear-gradient(135deg, rgba(255, 222, 128, 0.96), rgba(224, 173, 69, 0.90));
    color: rgba(20, 14, 8, 0.94);
}

.secondary,
button.secondary {
    border-color: var(--theme-border);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.026)),
        rgba(13, 17, 34, 0.78);
    color: var(--theme-text-soft);
}

.danger-action,
button.danger-action {
    border-color: var(--theme-border-red) !important;
    background:
        linear-gradient(135deg, rgba(255, 114, 114, 0.96), rgba(255, 173, 114, 0.88)) !important;
}

.battle-action,
button.battle-action {
    border-color: var(--theme-border-red) !important;
    background:
        linear-gradient(135deg, rgba(255, 114, 114, 0.94), rgba(167, 139, 250, 0.88)) !important;
}

.world-action,
button.world-action {
    border-color: var(--theme-border-green);
    background:
        linear-gradient(135deg, rgba(143, 240, 178, 0.94), rgba(110, 231, 255, 0.82));
}

/* ---------- 页面大区域主题统一 ---------- */

.home-game-header,
.topbar:not(.home-game-header),
.refined-world-hero-banner,
.new-life-hero,
.main-command-panel,
.system-matrix-panel,
.growth-archive-panel,
.world-menu-card,
.world-intel-card,
.character-profile-panel,
.page-visual-banner {
    border-color: var(--theme-border-gold);
    box-shadow: var(--theme-shadow-panel);
}

/* ---------- 不同功能区主题色 ---------- */

.command-cultivation,
.matrix-artifact,
.growth-method-group[open],
.intel-legend-group[open] {
    border-color: var(--theme-border-gold);
}

.command-battle,
.matrix-crafting,
.growth-ending-group[open] {
    border-color: var(--theme-border-red);
}

.command-explore,
.matrix-market,
.growth-legacy-group[open],
.intel-history-group[open] {
    border-color: var(--theme-border-blue);
}

.matrix-alchemy,
.gender-choice-female:has(input:checked) {
    border-color: var(--theme-border-purple);
}

.matrix-warehouse,
.matrix-inventory,
.growth-sect-group[open],
.intel-discovery-group[open] {
    border-color: var(--theme-border-green);
}

/* ---------- 滚动条主题统一 ---------- */

::-webkit-scrollbar-track {
    background: rgba(5, 8, 18, 0.82);
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, rgba(224, 173, 69, 0.55), rgba(110, 231, 255, 0.32));
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(224, 173, 69, 0.78), rgba(110, 231, 255, 0.45));
}

/* ---------- 未来换主题用：冷色模式预备 ----------
   现在不启用。以后 body 加 class="theme-cold" 就能切换。
*/

body.theme-cold {
    --theme-gold: #6ee7ff;
    --theme-gold-2: #aeefff;
    --theme-gold-dark: #247c96;
    --theme-glow-gold: rgba(110, 231, 255, 0.12);
    --theme-border-gold: rgba(110, 231, 255, 0.24);
}

/* ---------- 未来换主题用：紫色仙门模式预备 ----------
   现在不启用。以后 body 加 class="theme-purple" 就能切换。
*/

body.theme-purple {
    --theme-gold: #a78bfa;
    --theme-gold-2: #e8c7ff;
    --theme-gold-dark: #5b3ca0;
    --theme-glow-gold: rgba(167, 139, 250, 0.12);
    --theme-border-gold: rgba(167, 139, 250, 0.24);
}

/* =========================
   UI-45 CSS 收尾清理层
   修复重复覆盖 / hover 过强 / 层级冲突 / 旧 class 影响
   ========================= */

/* ---------- 修复之前 selector typo ---------- */
/* 之前有一条 home-hud-title > * 少了点，这里补正确版本 */
.home-hud-title > * {
    min-width: 0;
}

/* ---------- 大卡片 hover 稳定化 ---------- */
/* 只让可点击卡片动，大容器不再整块跳动 */
.card:hover,
.home-page-refined .card:hover {
    transform: none;
}

.system-matrix-card:hover,
.command-card:hover,
.gender-choice-card:hover,
.world-menu-links a:hover,
.hub-link-grid a:hover,
.nav-button:hover,
button:hover {
    transform: translateY(-1px);
}

/* 手机端所有 hover 位移关闭，避免触摸时页面抖 */
@media (max-width: 760px) {
    .system-matrix-card:hover,
    .command-card:hover,
    .gender-choice-card:hover,
    .world-menu-links a:hover,
    .hub-link-grid a:hover,
    .nav-button:hover,
    button:hover {
        transform: none;
    }
}

/* ---------- 防止全局 card::after 干扰内部组件 ---------- */
.card::after {
    pointer-events: none;
}

.command-card::after,
.system-matrix-card::after,
.gender-choice-card::after,
.world-menu-group::after,
.world-intel-group::after,
.growth-archive-group::after,
.rank-row::after,
.item::after,
.timeline-event::after,
.legend-card::after,
.sect-row::after,
.inventory-item::after,
.artifact-item::after,
.market-listing::after,
.warehouse-entry::after,
.warehouse-request-row::after,
.warehouse-request-mini::after {
    display: none;
}

/* ---------- muted 空状态不要到处加大图标 ---------- */
/* 只有直接作为空状态的 muted 才有图标，小卡内部 muted 取消图标 */
.item .muted,
.legend-card .muted,
.timeline-event .muted,
.sect-row .muted,
.rank-row .muted,
.command-card .muted,
.system-matrix-card .muted,
.growth-archive-group .muted,
.world-menu-group .muted,
.world-intel-group .muted,
.character-profile-panel .muted,
.home-hud-panel .muted,
.qi-core-panel .muted,
.mini-stats .muted {
    padding: 0;
    border: none;
    background: transparent;
}

.item .muted::before,
.item .muted::after,
.legend-card .muted::before,
.legend-card .muted::after,
.timeline-event .muted::before,
.timeline-event .muted::after,
.sect-row .muted::before,
.sect-row .muted::after,
.rank-row .muted::before,
.rank-row .muted::after,
.command-card .muted::before,
.command-card .muted::after,
.system-matrix-card .muted::before,
.system-matrix-card .muted::after,
.growth-archive-group .muted::before,
.growth-archive-group .muted::after,
.world-menu-group .muted::before,
.world-menu-group .muted::after,
.world-intel-group .muted::before,
.world-intel-group .muted::after,
.character-profile-panel .muted::before,
.character-profile-panel .muted::after,
.home-hud-panel .muted::before,
.home-hud-panel .muted::after,
.qi-core-panel .muted::before,
.qi-core-panel .muted::after,
.mini-stats .muted::before,
.mini-stats .muted::after {
    display: none;
}

/* ---------- details / 折叠菜单最终稳定 ---------- */
/* details 本身不应该被 contain: paint 裁切内容 */
.growth-archive-group,
.world-menu-group,
.world-intel-group {
    contain: layout;
}

/* 折叠内容内部可以正常显示 */
.growth-archive-content,
.world-menu-links,
.world-intel-content {
    overflow: visible;
}

/* nav 下拉永远最高 */
.home-nav-dock,
.topbar:not(.home-game-header) {
    position: relative;
    z-index: 90;
}

.home-nav-dock details[open],
.topbar:not(.home-game-header) details[open] {
    z-index: 999;
}

.home-nav-dock .nav-drawer-content,
.home-nav-dock details > div,
.home-nav-dock details > ul,
.topbar:not(.home-game-header) .nav-drawer-content,
.topbar:not(.home-game-header) details > div,
.topbar:not(.home-game-header) details > ul {
    z-index: 1000;
}

/* ---------- 首页人物视觉降噪 ---------- */
/* 现在人物只是装饰，不要盖过内容 */
.refined-hero-art .cultivator {
    pointer-events: none;
}

.refined-hero-art .cultivator-nameplate {
    opacity: 0.78;
}

.refined-hero-art.gender-male .cultivator-male,
.refined-hero-art.gender-female .cultivator-female {
    opacity: 0.88;
}

.refined-hero-art.gender-male .cultivator-female,
.refined-hero-art.gender-female .cultivator-male {
    opacity: 0.22;
}

/* 小屏人物更低调 */
@media (max-width: 760px) {
    .refined-hero-art.gender-male .cultivator-male,
    .refined-hero-art.gender-female .cultivator-female {
        opacity: 0.72;
    }

    .refined-hero-art.gender-male .cultivator-female,
    .refined-hero-art.gender-female .cultivator-male {
        opacity: 0.16;
    }

    .refined-hero-art .cultivator-nameplate {
        opacity: 0.58;
    }
}

/* ---------- 按钮宽度清理 ---------- */
/* 默认 submit 不要全部强制 full width，只有指定区域才满宽 */
form button[type="submit"] {
    width: auto;
}

.command-card form button,
.command-secondary-row button,
.command-secondary-row .nav-button,
.new-life-bottom-row button,
.fusion-login-form button,
.auth-form button,
.inline-form button,
.action-grid button,
.action-grid .nav-button {
    width: 100%;
}

/* 列表内按钮保持自然宽度 */
.sect-row form button,
.item form button,
.rank-row form button,
.inventory-item form button,
.artifact-item form button,
.market-listing form button,
.warehouse-entry form button,
.warehouse-request-actions form button,
.role-member-row form button {
    width: 100%;
}

/* 桌面端列表按钮不要过宽 */
@media (min-width: 761px) {
    .sect-row form button,
    .item form button,
    .rank-row form button,
    .inventory-item form button,
    .artifact-item form button,
    .market-listing form button,
    .warehouse-entry form button {
        width: auto;
    }
}

/* ---------- input / select 高度最终统一 ---------- */
input,
select,
textarea,
button,
.nav-button {
    font-family: inherit;
}

input,
select {
    line-height: 1.25;
}

textarea {
    line-height: 1.65;
}

/* 避免 hidden radio 影响 layout */
.gender-choice-card input[type="radio"] {
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
}

/* ---------- table 最终修复 ---------- */
/* table 如果被 display:block 影响，在带 wrapper 的情况恢复正常 */
.table-wrap table,
.table-container table {
    display: table;
}

/* 直接在 card 下的 table 才允许横向滚动 */
.card > table {
    display: block;
    overflow-x: auto;
}

/* ---------- 首页和二级页宽度清理 ---------- */
.home-page-refined {
    width: min(100%, 1380px);
}

body:not(:has(.home-page-refined)):not(:has(.login-fusion-shell)):not(:has(.register-fusion-shell)) .page {
    width: min(100%, 1280px);
}

/* login/register 仍然全屏，不被二级页面宽度影响 */
.page:has(.login-fusion-shell),
.page:has(.register-fusion-shell) {
    width: 100%;
    max-width: none;
    padding: 0;
}

/* ---------- 标题下划线清理 ---------- */
/* 防止小组件标题也出现过多金线 */
.item h2::after,
.item h3::after,
.legend-card h2::after,
.legend-card h3::after,
.timeline-event h2::after,
.timeline-event h3::after,
.rank-row h2::after,
.rank-row h3::after,
.command-card h3::after,
.system-matrix-card h3::after,
.world-menu-group strong::after,
.world-intel-group strong::after,
.growth-archive-group strong::after {
    display: none;
}

/* ---------- 统一主要内容的文字密度 ---------- */
.card p,
.item p,
.timeline-event p,
.legend-card p,
.market-listing p,
.warehouse-entry p,
.command-card p,
.system-matrix-card p {
    line-height: 1.65;
}

/* ---------- 空列表不要太高 ---------- */
.sect-list:empty,
.legend-list:empty,
.timeline:empty,
.rank-list:empty,
.market-list:empty,
.warehouse-list:empty,
.warehouse-request-list:empty,
.inventory-grid:empty,
.artifact-grid:empty {
    min-height: 96px;
}

.sect-list:empty::before,
.legend-list:empty::before,
.timeline:empty::before,
.rank-list:empty::before,
.market-list:empty::before,
.warehouse-list:empty::before,
.warehouse-request-list:empty::before,
.inventory-grid:empty::before,
.artifact-grid:empty::before {
    min-height: 96px;
}

/* ---------- z-index 分层标准化 ---------- */
.home-page-refined,
.page {
    z-index: 1;
}

.notice,
.error,
.warning,
.success,
.system-message,
.flash-message {
    z-index: 5;
}

.home-nav-dock,
.topbar {
    z-index: 20;
}

details[open] {
    z-index: 100;
}

/* ---------- 最终移动端清理 ---------- */
@media (max-width: 760px) {
    body {
        min-width: 0;
    }

    .home-page-refined,
    .page {
        overflow-x: hidden;
    }

    .home-page-refined .card,
    .page .card {
        border-radius: 18px;
    }

    .home-game-header,
    .topbar:not(.home-game-header) {
        border-radius: 20px;
    }

    .visual-pill,
    .command-year-badge,
    .legend-year,
    .rank-score,
    .status-badge,
    .result-badge,
    .type-badge,
    .event-type-pill {
        max-width: 100%;
    }

    .world-menu-links,
    .world-intel-content,
    .growth-archive-content {
        overflow-x: hidden;
    }

    .home-nav-dock details > div,
    .home-nav-dock details > ul,
    .topbar:not(.home-game-header) details > div,
    .topbar:not(.home-game-header) details > ul {
        max-width: calc(100vw - 28px);
    }
}

/* ---------- reduced motion 收尾 ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}

/* =========================
   UI-46 主页 Header 拆分重排
   修复青州大陆标题 / HUD / 导航挤在一起的问题
   ========================= */

.home-game-header-v2 {
    display: grid;
    gap: 18px;
    margin-top: 18px;
    margin-bottom: 22px;
}

/* 上半部：只放世界标题 + HUD */
.home-world-title-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    min-height: 300px;
    padding: clamp(30px, 4vw, 48px);
    border-radius: 34px;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background:
        radial-gradient(circle at 14% 20%, rgba(224, 173, 69, 0.13), transparent 28%),
        radial-gradient(circle at 86% 24%, rgba(110, 231, 255, 0.10), transparent 28%),
        linear-gradient(120deg, rgba(13, 16, 34, 0.96), rgba(7, 12, 30, 0.96));
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

/* 标题区域不要再被压扁 */
.home-world-title-panel .home-title-stack {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.home-world-title-panel .home-title-stack h1 {
    margin: 16px 0 16px;
    display: grid;
    gap: 10px;
    line-height: 0.95;
}

.home-world-title-panel .home-title-stack h1 span {
    font-size: clamp(58px, 6.4vw, 92px);
    letter-spacing: -0.075em;
}

.home-world-title-panel .home-title-stack h1 em {
    font-size: clamp(32px, 3.4vw, 48px);
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.home-world-title-panel .home-title-stack p {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.85;
    color: rgba(247, 243, 232, 0.76);
}

/* HUD 不要贴边，也不要太挤 */
.home-world-title-panel .home-hud-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 430px;
    justify-self: end;
    padding: 22px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.09), transparent 34%),
        rgba(255, 255, 255, 0.045);
}

.home-world-title-panel .home-hud-grid {
    gap: 12px;
}

.home-world-title-panel .home-hud-box {
    min-height: 74px;
    padding: 14px;
}

/* 下半部：导航单独成一个菜单面板 */
.home-nav-panel-v2 {
    position: relative;
    z-index: 80;
    padding: 16px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        rgba(5, 8, 18, 0.58);
    backdrop-filter: blur(12px);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.022);
}

/* 兼容 _nav.html 里面的 nav row */
.home-nav-panel-v2 .main-nav-row,
.home-nav-panel-v2 nav,
.home-nav-panel-v2 .nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* 顶部主导航按钮 */
.home-nav-panel-v2 a,
.home-nav-panel-v2 .nav-button {
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 14px;
    white-space: nowrap;
}

/* “更多系统”整行显示，不再半截卡住 */
.home-nav-panel-v2 details,
.home-nav-panel-v2 .nav-drawer {
    flex-basis: 100%;
    width: 100%;
    margin-top: 4px;
    border-radius: 18px;
}

.home-nav-panel-v2 summary {
    min-height: 44px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 16px;
}

/* 如果 summary 里面只有文字，也保持舒展 */
.home-nav-panel-v2 summary::after {
    justify-self: end;
}

/* 下拉内容 */
.home-nav-panel-v2 details > div,
.home-nav-panel-v2 details > ul,
.home-nav-panel-v2 .nav-drawer-content {
    z-index: 1000;
}

/* 旧版 home-game-header 样式不再影响新版 */
.home-game-header-v2.topbar {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

/* 旧 home-nav-dock 不影响新版 */
.home-game-header-v2 .home-nav-dock {
    display: none;
}

/* 平板 */
@media (max-width: 1100px) {
    .home-world-title-panel {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .home-world-title-panel .home-hud-panel {
        justify-self: start;
        max-width: 620px;
    }
}

/* 手机 */
@media (max-width: 760px) {
    .home-game-header-v2 {
        gap: 12px;
        margin-top: 10px;
        margin-bottom: 16px;
    }

    .home-world-title-panel {
        padding: 18px;
        border-radius: 22px;
        gap: 18px;
    }

    .home-world-title-panel .home-title-stack h1 {
        gap: 6px;
        margin: 12px 0;
    }

    .home-world-title-panel .home-title-stack h1 span {
        font-size: clamp(38px, 13vw, 54px);
        line-height: 0.95;
    }

    .home-world-title-panel .home-title-stack h1 em {
        font-size: clamp(24px, 7vw, 34px);
    }

    .home-world-title-panel .home-title-stack p {
        font-size: 13.5px;
        line-height: 1.75;
    }

    .home-world-title-panel .home-hud-panel {
        padding: 14px;
        border-radius: 18px;
    }

    .home-world-title-panel .home-hud-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .home-world-title-panel .home-hud-box {
        min-height: 58px;
        padding: 10px;
    }

    .home-nav-panel-v2 {
        padding: 10px;
        border-radius: 18px;
        overflow-x: auto;
        overflow-y: visible;
    }

    .home-nav-panel-v2 .main-nav-row,
    .home-nav-panel-v2 nav,
    .home-nav-panel-v2 .nav-row {
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
    }

    .home-nav-panel-v2 a,
    .home-nav-panel-v2 .nav-button,
    .home-nav-panel-v2 summary {
        min-height: 36px;
        padding: 8px 11px;
        font-size: 12px;
    }

    .home-nav-panel-v2 details,
    .home-nav-panel-v2 .nav-drawer {
        flex-basis: auto;
        width: auto;
        margin-top: 0;
    }
}

/* =========================
   ABOUT 页面独立修复
   修复 topbar 影响导致“版本信息”竖排
   ========================= */

.about-page-shell {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 18px 20px 56px;
    position: relative;
    z-index: 1;
}

.about-page-header {
    display: grid;
    gap: 18px;
    margin-bottom: 22px;
}

.about-header-main {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    min-height: 280px;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 34px;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background:
        radial-gradient(circle at 14% 20%, rgba(224, 173, 69, 0.13), transparent 28%),
        radial-gradient(circle at 86% 24%, rgba(110, 231, 255, 0.10), transparent 28%),
        linear-gradient(120deg, rgba(13, 16, 34, 0.96), rgba(7, 12, 30, 0.96));
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.about-header-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.about-header-star {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.30);
    pointer-events: none;
    animation: starTwinkle 4.5s ease-in-out infinite;
}

.about-header-star.star-one {
    width: 7px;
    height: 7px;
    left: 36%;
    top: 22px;
}

.about-header-star.star-two {
    width: 6px;
    height: 6px;
    right: 32%;
    top: 54px;
    animation-delay: 1.4s;
}

.about-header-star.star-three {
    width: 8px;
    height: 8px;
    right: 18%;
    bottom: 76px;
    animation-delay: 2.4s;
}

.about-title-stack {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.about-title-stack h1 {
    margin: 16px 0 16px;
    color: #f6f1e7;
    font-size: clamp(46px, 5.6vw, 82px);
    line-height: 0.98;
    letter-spacing: -0.07em;
    text-shadow:
        0 14px 34px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(224, 173, 69, 0.06);
    white-space: normal;
    writing-mode: horizontal-tb;
}

.about-title-stack p {
    max-width: 760px;
    margin: 0;
    color: rgba(247, 243, 232, 0.76);
    font-size: 16px;
    line-height: 1.85;
}

.about-version-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 410px;
    justify-self: end;
    padding: 22px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.09), transparent 34%),
        rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(10px);
}

.about-version-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.about-version-title span {
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 850;
}

.about-version-title strong {
    color: var(--ui-gold-2);
    font-size: 22px;
    letter-spacing: -0.025em;
}

.about-version-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.about-version-grid > div {
    min-height: 66px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.048), rgba(255,255,255,0.018)),
        rgba(8, 11, 24, 0.42);
}

.about-version-grid span {
    display: block;
    margin-bottom: 6px;
    color: var(--ui-muted);
    font-size: 11.5px;
    font-weight: 850;
}

.about-version-grid strong {
    display: block;
    color: rgba(247, 243, 232, 0.92);
    font-size: 13px;
    line-height: 1.45;
}

.about-nav-panel {
    position: relative;
    z-index: 80;
    padding: 16px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        rgba(5, 8, 18, 0.58);
    backdrop-filter: blur(12px);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.022);
}

.about-nav-panel .main-nav-row,
.about-nav-panel nav,
.about-nav-panel .nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.about-nav-panel a,
.about-nav-panel .nav-button {
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 14px;
    white-space: nowrap;
}

.about-nav-panel details,
.about-nav-panel .nav-drawer {
    flex-basis: 100%;
    width: 100%;
    margin-top: 4px;
    border-radius: 18px;
}

.about-nav-panel summary {
    min-height: 44px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 16px;
}

.about-world-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: center;
    overflow: hidden;
}

.about-world-card h2 {
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.about-lead {
    max-width: 780px;
    font-size: 16px;
    line-height: 1.9;
    color: rgba(247, 243, 232, 0.76);
}

.about-world-visual {
    position: relative;
    min-height: 260px;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 60% 38%, rgba(224, 173, 69, 0.13), transparent 30%),
        radial-gradient(circle at 70% 25%, rgba(167, 139, 250, 0.12), transparent 28%);
}

.about-orbit {
    position: absolute;
    width: 170px;
    height: 170px;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.24);
    animation: ringRotate 18s linear infinite;
}

.about-core {
    position: absolute;
    width: 52px;
    height: 52px;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,0.96), rgba(224,173,69,0.74), transparent 74%);
    box-shadow: 0 0 28px rgba(224,173,69,0.22);
    animation: qiOrbPulse 2.8s ease-in-out infinite;
}

.about-scroll {
    position: absolute;
    width: 82px;
    height: 116px;
    left: 42px;
    top: 70px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(247, 231, 184, 0.95), rgba(145, 96, 48, 0.90));
    transform: rotate(-10deg);
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.28);
}

.about-sword {
    position: absolute;
    width: 8px;
    height: 170px;
    right: 70px;
    top: 52px;
    border-radius: 999px;
    background:
        linear-gradient(to bottom, transparent, rgba(255,255,255,0.95), rgba(110,231,255,0.82), transparent);
    transform: rotate(18deg);
    box-shadow: 0 0 20px rgba(110, 231, 255, 0.22);
}

.about-cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    background: rgba(255,255,255,0.06);
}

.about-cloud.cloud-a {
    width: 180px;
    height: 58px;
    left: 18px;
    bottom: 54px;
}

.about-cloud.cloud-b {
    width: 220px;
    height: 68px;
    right: 8px;
    bottom: 34px;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.about-feature-item {
    min-height: 140px;
}

.about-changelog-list,
.about-roadmap-list {
    display: grid;
    gap: 14px;
}

.about-changelog-block {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        rgba(255,255,255,0.035);
}

.about-changelog-block h3 {
    margin: 0 0 6px;
    color: var(--ui-gold-2);
    font-size: 20px;
}

.about-changelog-block p {
    margin: 0;
    color: var(--ui-muted);
}

.about-action-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 980px) {
    .about-header-main,
    .about-world-card {
        grid-template-columns: 1fr;
    }

    .about-version-panel {
        justify-self: start;
        max-width: 620px;
    }

    .about-grid,
    .about-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-world-visual {
        min-height: 220px;
    }
}

@media (max-width: 760px) {
    .about-page-shell {
        padding: 10px 10px 48px;
    }

    .about-header-main {
        padding: 18px;
        border-radius: 22px;
        gap: 18px;
    }

    .about-title-stack h1 {
        font-size: clamp(34px, 11vw, 48px);
        letter-spacing: -0.055em;
    }

    .about-title-stack p,
    .about-lead {
        font-size: 13.5px;
        line-height: 1.75;
    }

    .about-version-panel {
        padding: 14px;
        border-radius: 18px;
    }

    .about-version-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .about-version-grid > div {
        min-height: 58px;
        padding: 10px;
    }

    .about-nav-panel {
        padding: 10px;
        border-radius: 18px;
        overflow-x: auto;
        overflow-y: visible;
    }

    .about-nav-panel .main-nav-row,
    .about-nav-panel nav,
    .about-nav-panel .nav-row {
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
    }

    .about-nav-panel details,
    .about-nav-panel .nav-drawer {
        flex-basis: auto;
        width: auto;
        margin-top: 0;
    }

    .about-grid,
    .about-action-grid {
        grid-template-columns: 1fr;
    }

    .about-world-visual {
        min-height: 190px;
    }
}

/* =========================
   FIX-宗门成长档案布局修复
   修复“拜入宗门”中文竖排 / 申请按钮挤爆
   ========================= */

/* 宗门文明展开后不要再硬分左右两栏，空间太小会导致中文一字一行 */
.growth-sect-group .growth-archive-content .two-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* 开宗立派表单改成完整横向空间 */
.growth-sect-group .sect-create-form {
    width: 100%;
    padding: 16px;
    border-radius: 18px;
}

/* 拜入宗门列表不要挤在半栏里面 */
.growth-sect-group .sect-list.compact {
    display: grid;
    gap: 12px;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

/* 宗门行改成卡片，不要再左右硬挤 */
.growth-sect-group .sect-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
    padding: 14px;
    border-radius: 18px;
}

/* 宗门名字禁止一字一行 */
.growth-sect-group .sect-row strong,
.growth-sect-group .sect-row .story-link {
    display: inline-block;
    writing-mode: horizontal-tb !important;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.35;
    font-size: 17px;
}

/* 宗门资料不要被强制竖排 */
.growth-sect-group .sect-row p {
    writing-mode: horizontal-tb !important;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.65;
    margin: 6px 0 0;
}

/* 入宗申请表：输入框和按钮正常排列 */
.growth-sect-group .sect-join-request-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

/* hidden input 不参与布局 */
.growth-sect-group .sect-join-request-form input[type="hidden"] {
    display: none;
}

/* 申请理由输入框不要太高太挤 */
.growth-sect-group .sect-join-request-form input[name="request_reason"] {
    min-height: 40px;
    border-radius: 13px;
}

/* 申请按钮固定舒服宽度 */
.growth-sect-group .sect-join-request-form button {
    width: auto;
    min-width: 76px;
    min-height: 40px;
    padding-left: 14px;
    padding-right: 14px;
    white-space: nowrap;
}

/* 当前宗门资料也保持横向阅读 */
.growth-sect-group .sect-current,
.growth-sect-group .sect-current * {
    writing-mode: horizontal-tb !important;
}

/* 小屏再改成单列，避免挤爆 */
@media (max-width: 760px) {
    .growth-sect-group .sect-join-request-form {
        grid-template-columns: 1fr;
    }

    .growth-sect-group .sect-join-request-form button {
        width: 100%;
    }
}

/* =========================
   宗门成员入口 / 宗门卡片修复
   首页成长档案：拜入宗门卡片
   ========================= */

.growth-sect-group .growth-archive-content .two-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.growth-sect-group .sect-create-form {
    width: 100%;
    padding: 16px;
    border-radius: 18px;
}

.growth-sect-group .sect-list.compact {
    display: grid;
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.growth-sect-group .sect-directory-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
    padding: 15px;
    border-radius: 20px;
}

.growth-sect-group .sect-directory-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.growth-sect-group .sect-directory-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.growth-sect-group .sect-directory-name,
.growth-sect-group .sect-row strong,
.growth-sect-group .sect-row .story-link {
    display: inline-block;
    writing-mode: horizontal-tb !important;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.35;
    font-size: 18px;
}

.growth-sect-group .sect-row p {
    writing-mode: horizontal-tb !important;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.65;
    margin: 6px 0 0;
}

.growth-sect-group .sect-profile-link {
    width: auto;
    min-width: 88px;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 13px;
    white-space: nowrap;
}

.growth-sect-group .sect-member-preview {
    border-radius: 16px;
    border: 1px solid rgba(224, 173, 69, 0.16);
    background: rgba(255, 255, 255, 0.035);
    overflow: hidden;
}

.growth-sect-group .sect-member-preview summary {
    min-height: 38px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    color: var(--ui-gold-2);
    font-size: 12.5px;
    font-weight: 950;
}

.growth-sect-group .sect-member-preview summary::-webkit-details-marker {
    display: none;
}

.growth-sect-group .sect-member-preview summary::after {
    content: "展开";
    float: right;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.08);
    color: var(--ui-gold-2);
    font-size: 11px;
}

.growth-sect-group .sect-member-preview[open] summary::after {
    content: "收起";
}

.growth-sect-group .sect-member-preview-body {
    padding: 0 12px 12px;
}

.growth-sect-group .sect-role-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.growth-sect-group .sect-role-box {
    min-height: 86px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(5, 8, 18, 0.38);
}

.growth-sect-group .sect-role-box strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ui-gold-2);
    font-size: 13px;
}

.growth-sect-group .sect-role-box span {
    display: block;
    margin-top: 6px;
    color: rgba(247, 243, 232, 0.78);
    font-size: 12.5px;
    line-height: 1.45;
}

.growth-sect-group .sect-role-box .empty-role {
    color: rgba(247, 243, 232, 0.42);
}

.growth-sect-group .sect-join-request-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.growth-sect-group .sect-join-request-form input[type="hidden"] {
    display: none;
}

.growth-sect-group .sect-join-request-form input[name="request_reason"] {
    min-height: 40px;
    border-radius: 13px;
}

.growth-sect-group .sect-join-request-form button {
    width: auto;
    min-width: 76px;
    min-height: 40px;
    padding-left: 14px;
    padding-right: 14px;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .growth-sect-group .sect-directory-title-row,
    .growth-sect-group .sect-join-request-form,
    .growth-sect-group .sect-role-groups {
        grid-template-columns: 1fr;
    }

    .growth-sect-group .sect-profile-link,
    .growth-sect-group .sect-join-request-form button {
        width: 100%;
    }
}

/* =========================
   FIX-全站二级页面 topbar 竖排修复
   修复：排行榜 / 宗门档案 / 历史页标题被压成一字一行
   ========================= */

/* 二级页面 header 不再用左右硬挤布局，统一改成上下结构 */
.topbar:not(.home-game-header) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

/* 标题容器必须占满宽度，不允许被 nav 挤到只剩一列 */
.topbar:not(.home-game-header) > div:first-child {
    display: block !important;
    width: 100% !important;
    max-width: 920px !important;
    min-width: 0 !important;
}

/* 标题强制横排 */
.topbar:not(.home-game-header) h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: auto !important;
    text-align: left !important;
}

/* 标题说明也强制正常横排 */
.topbar:not(.home-game-header) p {
    display: block !important;
    width: 100% !important;
    max-width: 780px !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
}

/* nav 独立成一整行，别挤标题 */
.topbar:not(.home-game-header) > nav,
.topbar:not(.home-game-header) > .main-nav-row,
.topbar:not(.home-game-header) > .nav-row,
.topbar:not(.home-game-header) .main-nav-row,
.topbar:not(.home-game-header) nav,
.topbar:not(.home-game-header) .nav-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

/* nav 按钮不要被撑爆 */
.topbar:not(.home-game-header) a,
.topbar:not(.home-game-header) .nav-button,
.topbar:not(.home-game-header) summary {
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* 更多系统独立一行，避免压到标题 */
.topbar:not(.home-game-header) details,
.topbar:not(.home-game-header) .nav-drawer {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 760px !important;
    margin-top: 4px !important;
}

/* 更多系统 summary 正常横排 */
.topbar:not(.home-game-header) summary {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
}

/* 下拉菜单层级最高，避免被卡片遮住 */
.topbar:not(.home-game-header) details[open] {
    z-index: 999 !important;
}

.topbar:not(.home-game-header) details > div,
.topbar:not(.home-game-header) details > ul,
.topbar:not(.home-game-header) .nav-drawer-content {
    z-index: 1000 !important;
}

/* 修复全站 word-break:anywhere 造成中文标题竖排 */
.topbar:not(.home-game-header) *,
.topbar:not(.home-game-header) h1 *,
.topbar:not(.home-game-header) p * {
    writing-mode: horizontal-tb !important;
}

/* 手机端：nav 可以横向滑动，但标题仍然横排 */
@media (max-width: 760px) {
    .topbar:not(.home-game-header) {
        overflow-x: hidden !important;
        padding: 16px !important;
        border-radius: 22px !important;
    }

    .topbar:not(.home-game-header) h1 {
        font-size: clamp(28px, 9vw, 42px) !important;
        line-height: 1.05 !important;
    }

    .topbar:not(.home-game-header) p {
        font-size: 13.5px !important;
        line-height: 1.7 !important;
    }

    .topbar:not(.home-game-header) .main-nav-row,
    .topbar:not(.home-game-header) nav,
    .topbar:not(.home-game-header) .nav-row {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 4px !important;
    }

    .topbar:not(.home-game-header) details,
    .topbar:not(.home-game-header) .nav-drawer {
        flex-basis: auto !important;
        width: auto !important;
        min-width: 170px !important;
    }
}

/* =========================
   v6.7 玩法体验修正
   批量使用物品 + 推荐装备
   ========================= */

.inventory-use-form {
    display: grid;
    gap: 8px;
}

.use-quantity-row {
    display: grid;
    grid-template-columns: 90px 1fr 1fr;
    gap: 8px;
    align-items: center;
}

.use-quantity-row input[type="number"] {
    min-height: 40px;
    text-align: center;
}

.artifact-recommend-card {
    border-color: rgba(143, 240, 178, 0.24);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(18, 21, 37, 0.86);
}

.artifact-recommend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.recommend-upgrade {
    border-color: rgba(143, 240, 178, 0.28);
}

.recommend-upgrade .artifact-header > span {
    color: #9ff7bc;
    border-color: rgba(143, 240, 178, 0.24);
    background: rgba(143, 240, 178, 0.08);
}

@media (max-width: 760px) {
    .use-quantity-row,
    .artifact-recommend-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v6.8 批量丢弃法器 / 流落法器 UI
   ========================= */

.artifact-bulk-card .section-title-row {
    align-items: start;
}

.bulk-discard-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 14px;
    align-items: center;
    margin: 16px 0 18px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 114, 114, 0.22);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        rgba(255, 255, 255, 0.035);
}

.bulk-discard-panel strong {
    color: #ffb2b2;
    font-size: 16px;
}

.bulk-discard-panel p {
    margin: 6px 0 0;
}

.bulk-discard-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.bulk-discard-form input {
    min-height: 42px;
}

.bulk-discard-form button {
    white-space: nowrap;
}

.artifact-select-line {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.07);
    color: rgba(247, 243, 232, 0.78);
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.artifact-select-line input[type="checkbox"] {
    margin: 0;
}

.artifact-select-line span {
    white-space: normal;
    word-break: keep-all;
}

.artifact-item:has(.artifact-select-line input:checked) {
    border-color: rgba(255, 114, 114, 0.36);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(255, 114, 114, 0.055), rgba(255,255,255,0.018)),
        rgba(15, 18, 34, 0.88);
}

.artifact-item:has(.artifact-select-line input:checked) .artifact-select-line {
    border-color: rgba(255, 114, 114, 0.42);
    background: rgba(255, 114, 114, 0.12);
    color: #ffb2b2;
}

@media (max-width: 760px) {
    .bulk-discard-panel {
        grid-template-columns: 1fr;
        padding: 14px;
        border-radius: 18px;
    }

    .bulk-discard-form {
        grid-template-columns: 1fr;
    }

    .bulk-discard-form button {
        width: 100%;
    }
}

/* =========================
   v6.8.3 管理员导航区
   ========================= */

.admin-nav-section {
    border-radius: 18px;
    border: 1px solid rgba(255, 114, 114, 0.24);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        rgba(255, 255, 255, 0.035);
    padding: 12px;
}

.admin-nav-section > strong {
    color: #ffb2b2;
}

/* =========================
   FIX-v6.8.4 导航菜单重排
   修复管理员工具导致“更多系统”变丑
   ========================= */

.refined-nav-drawer {
    width: 100%;
}

.refined-nav-drawer > summary {
    min-height: 48px;
    border-radius: 18px;
}

.refined-nav-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
    border-radius: 0 0 22px 22px;
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.055), transparent 34%),
        rgba(5, 8, 18, 0.35);
}

.nav-system-card {
    min-width: 0;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.72);
}

.nav-system-head {
    margin-bottom: 12px;
}

.nav-system-head strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 15px;
    line-height: 1.35;
}

.nav-system-head span {
    display: block;
    margin-top: 5px;
    color: rgba(247, 243, 232, 0.58);
    font-size: 12px;
    line-height: 1.55;
}

.nav-system-card .nav-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.nav-system-card .nav-button {
    justify-content: center;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 13px;
    font-size: 12.5px;
}

/* 管理员工具不再直接铺满污染菜单，默认折叠成一条 */
.nav-admin-fold {
    grid-column: 1 / -1;
    border-radius: 20px;
    border: 1px solid rgba(255, 114, 114, 0.18);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.075), transparent 34%),
        rgba(255, 255, 255, 0.026);
    overflow: hidden;
}

.nav-admin-fold > summary {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 13px 16px;
    cursor: pointer;
}

.nav-admin-fold > summary strong {
    color: #ffb2b2;
    font-size: 15px;
}

.nav-admin-fold > summary span {
    display: block;
    margin-top: 4px;
    color: rgba(247, 243, 232, 0.56);
    font-size: 12px;
}

.admin-tool-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    padding: 0 16px 16px;
}

.admin-tool-grid .nav-button {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 12px;
    font-size: 12px;
    color: rgba(255, 220, 220, 0.92);
    border-color: rgba(255, 114, 114, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 114, 114, 0.075), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.68);
}

/* 防止旧 admin-nav-section 继续影响 */
.admin-nav-section {
    padding: 0;
    border: none;
    background: transparent;
}

/* 平板 */
@media (max-width: 1100px) {
    .refined-nav-content {
        grid-template-columns: 1fr;
    }

    .nav-system-card .nav-link-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-tool-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 手机 */
@media (max-width: 760px) {
    .refined-nav-content {
        padding: 10px;
        gap: 10px;
    }

    .nav-system-card {
        padding: 12px;
        border-radius: 16px;
    }

    .nav-system-card .nav-link-grid,
    .admin-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-system-card .nav-button,
    .admin-tool-grid .nav-button {
        width: 100%;
        white-space: normal;
    }

    .nav-admin-fold > summary {
        padding: 12px;
    }

    .admin-tool-grid {
        padding: 0 12px 12px;
    }
}

/* =========================
   v6.9-1 宗门档案页成员结构
   ========================= */

.sect-profile-page {
    width: min(100%, 1280px);
}

.sect-profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 24px;
    align-items: center;
    overflow: hidden;
}

.sect-profile-main {
    min-width: 0;
}

.sect-profile-main h2 {
    margin: 14px 0 12px;
    color: var(--ui-text);
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.06em;
}

.sect-profile-motto {
    max-width: 780px;
    color: rgba(247, 243, 232, 0.74);
    font-size: 16px;
    line-height: 1.8;
}

.sect-profile-stats {
    margin-top: 18px;
}

.sect-profile-emblem {
    position: relative;
    min-height: 240px;
    display: grid;
    place-items: center;
}

.sect-emblem-ring {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 1px solid rgba(224, 173, 69, 0.26);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.08), transparent 64%);
    animation: ringRotate 18s linear infinite;
}

.sect-emblem-core {
    position: relative;
    z-index: 2;
    width: 92px;
    height: 92px;
    border-radius: 30px;
    display: grid;
    place-items: center;
    color: var(--ui-gold-2);
    font-size: 38px;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.30);
    background:
        radial-gradient(circle at top, rgba(224, 173, 69, 0.22), rgba(224, 173, 69, 0.06)),
        rgba(255,255,255,0.035);
    box-shadow: 0 0 34px rgba(224, 173, 69, 0.12);
}

.sect-emblem-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(224, 173, 69, 0.10);
    filter: blur(22px);
}

.sect-member-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 20px;
}

.sect-role-block {
    margin-top: 18px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        rgba(255,255,255,0.028);
}

.sect-role-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}

.sect-role-title h3 {
    margin: 0;
    color: var(--ui-gold-2);
    font-size: 20px;
}

.sect-role-title span {
    color: rgba(247, 243, 232, 0.56);
    font-size: 12px;
    font-weight: 850;
}

.sect-member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sect-member-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.72);
}

.sect-member-card.leader {
    border-color: rgba(224, 173, 69, 0.32);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.11), transparent 34%),
        rgba(12, 15, 29, 0.82);
}

.sect-member-card.elder {
    border-color: rgba(167, 139, 250, 0.24);
}

.sect-member-card.deacon {
    border-color: rgba(110, 231, 255, 0.24);
}

.sect-member-card.disciple {
    border-color: rgba(143, 240, 178, 0.18);
}

.sect-member-avatar {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: var(--ui-gold-2);
    font-size: 20px;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.20), rgba(224, 173, 69, 0.055));
}

.sect-member-main {
    min-width: 0;
}

.sect-member-main h4 {
    margin: 0 0 6px;
    font-size: 16px;
}

.sect-member-main p {
    margin: 0;
    color: rgba(247, 243, 232, 0.64);
    line-height: 1.6;
    font-size: 13px;
}

.sect-profile-section {
    margin-top: 18px;
}

@media (max-width: 900px) {
    .sect-profile-hero {
        grid-template-columns: 1fr;
    }

    .sect-profile-emblem {
        min-height: 160px;
    }

    .sect-member-summary-grid,
    .sect-member-grid {
        grid-template-columns: 1fr;
    }

    .sect-member-card {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .sect-member-avatar {
        width: 46px;
        height: 46px;
        border-radius: 15px;
        font-size: 17px;
    }
}

@media (max-width: 640px) {
    .sect-profile-main h2 {
        font-size: 38px;
    }

    .sect-role-block {
        padding: 13px;
        border-radius: 18px;
    }

    .sect-role-title {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
    }
}

/* =========================
   v6.9-2 宗门职位管理正式化
   ========================= */

.sect-roles-page {
    width: min(100%, 1280px);
}

.sect-role-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.sect-role-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.sect-role-member-list {
    display: grid;
    gap: 14px;
}

.sect-role-member-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.sect-role-member-card.role-掌门 {
    border-color: rgba(224, 173, 69, 0.34);
}

.sect-role-member-card.role-长老 {
    border-color: rgba(167, 139, 250, 0.26);
}

.sect-role-member-card.role-执事 {
    border-color: rgba(110, 231, 255, 0.24);
}

.sect-role-member-card.role-弟子 {
    border-color: rgba(143, 240, 178, 0.18);
}

.sect-role-member-main {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    min-width: 0;
}

.sect-role-avatar {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: var(--ui-gold-2);
    font-size: 20px;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.20), rgba(224, 173, 69, 0.055));
}

.sect-role-member-main h3 {
    margin: 0 0 6px;
    font-size: 17px;
}

.sect-role-member-main p {
    margin: 0;
    color: rgba(247, 243, 232, 0.64);
    line-height: 1.6;
    font-size: 13px;
}

.sect-role-actions {
    display: grid;
    gap: 10px;
}

.sect-role-update-form,
.sect-role-remove-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
}

.sect-role-update-form select,
.sect-role-remove-form input {
    min-height: 40px;
    border-radius: 13px;
}

.sect-role-update-form button,
.sect-role-remove-form button {
    min-height: 40px;
    white-space: nowrap;
}

.sect-role-lock {
    padding: 12px 14px;
    border-radius: 16px;
    color: rgba(247, 243, 232, 0.62);
    border: 1px dashed rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.028);
    line-height: 1.6;
    font-size: 13px;
}

.sect-role-policy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1000px) {
    .sect-role-hero,
    .sect-role-member-card {
        grid-template-columns: 1fr;
    }

    .sect-role-policy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .sect-role-member-main {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .sect-role-avatar {
        width: 46px;
        height: 46px;
        border-radius: 15px;
        font-size: 17px;
    }

    .sect-role-update-form,
    .sect-role-remove-form,
    .sect-role-policy-grid {
        grid-template-columns: 1fr;
    }

    .sect-role-update-form button,
    .sect-role-remove-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-3 宗门任务系统
   ========================= */

.sect-missions-page {
    width: min(100%, 1280px);
}

.sect-mission-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.sect-mission-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.sect-mission-create-form {
    display: grid;
    gap: 14px;
}

.sect-mission-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.sect-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sect-mission-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.sect-mission-card.status-closed {
    opacity: 0.72;
}

.sect-mission-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.sect-mission-head h3 {
    margin: 10px 0 8px;
    font-size: 20px;
    color: var(--ui-text);
}

.sect-mission-head p {
    margin: 0;
    color: rgba(247, 243, 232, 0.64);
    line-height: 1.65;
    font-size: 13px;
}

.sect-mission-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sect-mission-actions form,
.sect-mission-actions button {
    width: 100%;
}

@media (max-width: 1000px) {
    .sect-mission-hero,
    .sect-mission-grid {
        grid-template-columns: 1fr;
    }

    .sect-mission-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .sect-mission-form-grid,
    .sect-mission-actions {
        grid-template-columns: 1fr;
    }

    .sect-mission-head {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* =========================
   v6.9-4 宗门建设系统
   ========================= */

.sect-buildings-page {
    width: min(100%, 1280px);
}

.sect-building-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.sect-building-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.sect-building-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sect-building-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.sect-building-card.building-library {
    border-color: rgba(224, 173, 69, 0.26);
}

.sect-building-card.building-alchemy_room {
    border-color: rgba(167, 139, 250, 0.24);
}

.sect-building-card.building-crafting_room {
    border-color: rgba(110, 231, 255, 0.24);
}

.sect-building-card.building-warehouse {
    border-color: rgba(143, 240, 178, 0.22);
}

.sect-building-card.building-formation {
    border-color: rgba(255, 114, 114, 0.24);
}

.sect-building-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 14px;
    align-items: start;
}

.sect-building-head h3 {
    margin: 10px 0 8px;
    font-size: 22px;
    color: var(--ui-text);
}

.sect-building-head p,
.sect-building-effect p {
    margin: 0;
    color: rgba(247, 243, 232, 0.64);
    line-height: 1.65;
    font-size: 13px;
}

.sect-building-level {
    min-height: 76px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.15), transparent 68%),
        rgba(255,255,255,0.035);
}

.sect-building-level strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 28px;
    line-height: 1;
}

.sect-building-level span {
    display: block;
    color: rgba(247, 243, 232, 0.56);
    font-size: 11px;
    font-weight: 850;
}

.sect-building-effect {
    padding: 13px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.075);
    background: rgba(255,255,255,0.026);
}

.sect-building-upgrade-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.sect-building-upgrade-form input {
    min-height: 40px;
    border-radius: 13px;
}

.sect-building-upgrade-form button {
    min-height: 40px;
    white-space: nowrap;
}

.sect-building-lock {
    padding: 12px 14px;
    border-radius: 16px;
    color: rgba(247, 243, 232, 0.62);
    border: 1px dashed rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.028);
    line-height: 1.6;
    font-size: 13px;
}

@media (max-width: 1000px) {
    .sect-building-hero,
    .sect-building-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sect-building-head,
    .sect-building-upgrade-form {
        grid-template-columns: 1fr;
    }

    .sect-building-upgrade-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-5 宗门建筑效果接入
   ========================= */

.building-effect-current {
    margin-top: 11px;
    display: grid;
    gap: 7px;
}

.building-effect-current span {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 28px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.075);
}

.sect-mission-card .mini-stats span:nth-child(2),
.sect-mission-card .mini-stats span:nth-child(4),
.sect-mission-card .mini-stats span:nth-child(5) {
    color: var(--ui-gold-2);
    border-color: rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.07);
}

/* =========================
   v6.9-7 宗门公告 / 法令系统
   ========================= */

.sect-announcements-page {
    width: min(100%, 1280px);
}

.sect-announcement-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.sect-announcement-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.sect-announcement-form {
    display: grid;
    gap: 14px;
}

.sect-announcement-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sect-announcement-form textarea {
    min-height: 130px;
    resize: vertical;
}

.sect-announcement-list {
    display: grid;
    gap: 14px;
}

.sect-announcement-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.sect-announcement-card.importance-重要 {
    border-color: rgba(224, 173, 69, 0.30);
}

.sect-announcement-card.importance-紧急 {
    border-color: rgba(255, 114, 114, 0.30);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(255,114,114,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.sect-announcement-card.status-closed {
    opacity: 0.72;
}

.sect-announcement-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 11px;
}

.sect-announcement-head h3 {
    margin: 0 0 9px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.25;
}

.sect-announcement-head p {
    margin: 0;
    color: rgba(247, 243, 232, 0.68);
    line-height: 1.75;
    white-space: pre-wrap;
}

.sect-announcement-close-form {
    display: flex;
    justify-content: flex-end;
}

.sect-announcement-close-form button {
    min-width: 110px;
}

@media (max-width: 900px) {
    .sect-announcement-hero,
    .sect-announcement-form-grid {
        grid-template-columns: 1fr;
    }

    .sect-announcement-close-form {
        display: grid;
    }

    .sect-announcement-close-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-8 宗门政策效果系统
   ========================= */

.sect-policies-page {
    width: min(100%, 1280px);
}

.sect-policy-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.sect-policy-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.sect-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sect-policy-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.sect-policy-card.active-policy {
    border-color: rgba(143, 240, 178, 0.26);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(143,240,178,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.sect-policy-head h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.25;
}

.sect-policy-head p,
.sect-policy-effect p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.sect-policy-effect {
    padding: 13px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.075);
    background: rgba(255,255,255,0.026);
}

.sect-policy-action-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.sect-policy-action-form input {
    min-height: 40px;
    border-radius: 13px;
}

.sect-policy-action-form button {
    min-height: 40px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .sect-policy-hero,
    .sect-policy-grid,
    .sect-policy-action-form {
        grid-template-columns: 1fr;
    }

    .sect-policy-action-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-9 宗门功勋商店
   ========================= */

.sect-shop-page {
    width: min(100%, 1280px);
}

.sect-shop-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.sect-shop-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.sect-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sect-shop-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.sect-shop-card.category-丹药 {
    border-color: rgba(167, 139, 250, 0.24);
}

.sect-shop-card.category-灵草 {
    border-color: rgba(143, 240, 178, 0.22);
}

.sect-shop-card.category-材料 {
    border-color: rgba(110, 231, 255, 0.24);
}

.sect-shop-card.category-法器 {
    border-color: rgba(224, 173, 69, 0.28);
}

.sect-shop-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 14px;
    align-items: start;
}

.sect-shop-head h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.25;
}

.sect-shop-head p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.sect-shop-cost {
    min-height: 76px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.15), transparent 68%),
        rgba(255,255,255,0.035);
}

.sect-shop-cost strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 26px;
    line-height: 1;
}

.sect-shop-cost span {
    display: block;
    color: rgba(247, 243, 232, 0.56);
    font-size: 11px;
    font-weight: 850;
}

.sect-shop-buy-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.sect-shop-buy-form input {
    min-height: 40px;
    border-radius: 13px;
}

.sect-shop-buy-form button {
    min-height: 40px;
    white-space: nowrap;
}

.sect-shop-lock {
    padding: 12px 14px;
    border-radius: 16px;
    color: rgba(247, 243, 232, 0.62);
    border: 1px dashed rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.028);
    line-height: 1.6;
    font-size: 13px;
}

@media (max-width: 1000px) {
    .sect-shop-hero,
    .sect-shop-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sect-shop-head,
    .sect-shop-buy-form {
        grid-template-columns: 1fr;
    }

    .sect-shop-buy-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-10 宗门商店建筑等级解锁
   ========================= */

.sect-shop-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.locked-shop-item {
    opacity: 0.72;
    border-style: dashed;
    filter: grayscale(0.15);
}

.locked-shop-item .sect-shop-cost {
    opacity: 0.72;
}

.sect-shop-unlock-note {
    padding: 10px 12px;
    border-radius: 14px;
    line-height: 1.6;
    font-size: 12.5px;
    font-weight: 900;
}

.sect-shop-unlock-note.unlocked {
    color: #9ff7bc;
    border: 1px solid rgba(143, 240, 178, 0.20);
    background: rgba(143, 240, 178, 0.075);
}

.sect-shop-unlock-note.locked {
    color: #ffb2b2;
    border: 1px solid rgba(255, 114, 114, 0.20);
    background: rgba(255, 114, 114, 0.075);
}

.locked-shop-item h3 {
    color: rgba(247, 243, 232, 0.70);
}

/* =========================
   v6.9-11 宗门贡献自动晋升
   ========================= */

.sect-promotion-page {
    width: min(100%, 1280px);
}

.sect-promotion-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.sect-promotion-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.sect-promotion-progress-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.sect-promotion-progress-card.can-promote {
    border-color: rgba(143, 240, 178, 0.26);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(143,240,178,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.sect-promotion-progress-card.not-ready {
    border-color: rgba(224, 173, 69, 0.20);
}

.sect-promotion-progress-card h3 {
    margin: 12px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.sect-promotion-progress-card p {
    margin: 0 0 12px;
    color: rgba(247, 243, 232, 0.68);
    line-height: 1.7;
}

.sect-promotion-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.sect-promotion-form input {
    min-height: 42px;
    border-radius: 13px;
}

.sect-promotion-form button {
    min-height: 42px;
    white-space: nowrap;
}

.sect-promotion-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1000px) {
    .sect-promotion-hero,
    .sect-promotion-rule-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sect-promotion-form {
        grid-template-columns: 1fr;
    }

    .sect-promotion-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-12 宗门任务智能推荐
   ========================= */

.sect-mission-recommend-page {
    width: min(100%, 1280px);
}

.sect-mission-recommend-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.sect-mission-recommend-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.sect-mission-recommend-list {
    display: grid;
    gap: 14px;
}

.sect-mission-recommend-card {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.sect-mission-recommend-card.level-强烈推荐 {
    border-color: rgba(143, 240, 178, 0.30);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(143,240,178,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.sect-mission-recommend-card.level-谨慎选择 {
    border-color: rgba(255, 114, 114, 0.22);
}

.recommend-rank-badge {
    width: 56px;
    height: 56px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    color: var(--ui-gold-2);
    font-weight: 950;
    font-size: 18px;
    border: 1px solid rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.17), transparent 68%),
        rgba(255,255,255,0.035);
}

.sect-mission-recommend-main {
    min-width: 0;
    display: grid;
    gap: 13px;
}

.sect-mission-recommend-head h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.25;
}

.sect-mission-recommend-head p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.recommend-reason-box {
    padding: 13px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.075);
    background: rgba(255,255,255,0.026);
}

.recommend-reason-box ul {
    margin: 9px 0 0;
    padding-left: 20px;
    color: rgba(247, 243, 232, 0.68);
    line-height: 1.75;
    font-size: 13px;
}

.recommend-complete-form {
    display: grid;
}

.recommend-complete-form button {
    width: 100%;
    min-height: 42px;
}

@media (max-width: 760px) {
    .sect-mission-recommend-hero,
    .sect-mission-recommend-card {
        grid-template-columns: 1fr;
    }

    .recommend-rank-badge {
        width: fit-content;
        min-width: 56px;
        padding: 0 14px;
    }
}

/* =========================
   v6.9-13 宗门任务刷新 / 任务池
   ========================= */

.sect-mission-refresh-page {
    width: min(100%, 1280px);
}

.sect-refresh-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.sect-refresh-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.sect-refresh-form {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(220px, 1fr) minmax(180px, 260px) auto;
    gap: 12px;
    align-items: end;
}

.sect-refresh-form input {
    min-height: 42px;
    border-radius: 13px;
}

.sect-refresh-form button {
    min-height: 42px;
    white-space: nowrap;
}

.sect-refresh-checkbox {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.085);
    background: rgba(255,255,255,0.035);
}

.sect-refresh-checkbox input {
    min-height: auto;
}

.sect-refresh-pool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sect-refresh-pool-item {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.sect-refresh-pool-item.status-closed {
    opacity: 0.62;
}

.sect-refresh-pool-item h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 20px;
    line-height: 1.3;
}

.sect-refresh-pool-item p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .sect-refresh-hero,
    .sect-refresh-form,
    .sect-refresh-pool-grid {
        grid-template-columns: 1fr;
    }

    .sect-refresh-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-14 宗门任务完成上限
   ========================= */

.sect-mission-limit-card {
    border-color: rgba(143, 240, 178, 0.22);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(143,240,178,0.035), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.sect-mission-limit-card.limit-reached {
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255,114,114,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.sect-mission-limit-lock {
    padding: 11px 13px;
    border-radius: 15px;
    color: #ffb2b2;
    border: 1px dashed rgba(255, 114, 114, 0.24);
    background: rgba(255, 114, 114, 0.075);
    font-size: 13px;
    line-height: 1.6;
}

/* =========================
   v6.9-15 宗门任务个人记录
   ========================= */

.sect-mission-records-page {
    width: min(100%, 1280px);
}

.sect-record-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.sect-record-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.sect-record-limit-card {
    border-color: rgba(143, 240, 178, 0.22);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(143,240,178,0.035), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.sect-record-limit-card.limit-reached {
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255,114,114,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.sect-record-list {
    display: grid;
    gap: 14px;
}

.sect-record-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.sect-record-year {
    min-height: 76px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.15), transparent 68%),
        rgba(255,255,255,0.035);
}

.sect-record-year strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 24px;
    line-height: 1;
}

.sect-record-year span {
    display: block;
    color: rgba(247, 243, 232, 0.56);
    font-size: 11px;
    font-weight: 850;
}

.sect-record-main {
    min-width: 0;
}

.sect-record-main h3 {
    margin: 10px 0 10px;
    color: var(--ui-text);
    font-size: 21px;
    line-height: 1.3;
}

@media (max-width: 760px) {
    .sect-record-hero,
    .sect-record-card {
        grid-template-columns: 1fr;
    }

    .sect-record-year {
        width: fit-content;
        min-width: 86px;
        padding: 0 14px;
    }
}

/* =========================
   v6.9-R1 境界体系重构
   ========================= */

.realm-mini-lore {
    margin-top: 10px;
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(224, 173, 69, 0.16);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.075), transparent 36%),
        rgba(255,255,255,0.026);
}

.realm-mini-lore div {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.realm-mini-lore span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 11px;
    font-weight: 900;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.07);
}

.realm-mini-lore strong {
    color: rgba(247, 243, 232, 0.86);
    font-size: 13px;
}

.realm-mini-lore p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    font-size: 12.5px;
    line-height: 1.65;
}

.realm-mini-lore small {
    color: rgba(247, 243, 232, 0.50);
    font-size: 11px;
    font-weight: 850;
}

.realm-system-page {
    width: min(100%, 1280px);
}

.realm-system-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.realm-system-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.06em;
}

.realm-system-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.realm-system-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.realm-system-card.stage-凡界 {
    border-color: rgba(143, 240, 178, 0.20);
}

.realm-system-card.stage-仙界 {
    border-color: rgba(110, 231, 255, 0.22);
}

.realm-system-card.stage-至高境 {
    border-color: rgba(224, 173, 69, 0.30);
}

.realm-rank-pill {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: var(--ui-gold-2);
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.18), transparent 68%),
        rgba(255,255,255,0.035);
}

.realm-system-card h3 {
    margin: 10px 0 10px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.realm-system-card p {
    margin: 10px 0 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

@media (max-width: 900px) {
    .realm-system-hero,
    .realm-system-grid,
    .realm-system-card {
        grid-template-columns: 1fr;
    }

    .realm-rank-pill {
        width: fit-content;
        min-width: 54px;
        padding: 0 14px;
    }
}

/* =========================
   v6.9-R1-3 境界显示强化
   ========================= */

.realm-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    vertical-align: middle;
}

.realm-inline strong {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 12.5px;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.075);
}

.realm-inline small {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    color: rgba(247, 243, 232, 0.62);
    font-size: 11px;
    font-weight: 850;
    border: 1px solid rgba(255,255,255,0.085);
    background: rgba(255,255,255,0.035);
}

.realm-inline.stage-mortal strong,
.realm-compact-card.stage-mortal {
    border-color: rgba(143, 240, 178, 0.22);
}

.realm-inline.stage-immortal strong,
.realm-compact-card.stage-immortal {
    border-color: rgba(110, 231, 255, 0.24);
}

.realm-inline.stage-supreme strong,
.realm-compact-card.stage-supreme {
    border-color: rgba(224, 173, 69, 0.34);
}

.realm-compact-card {
    margin-top: 10px;
    display: grid;
    gap: 8px;
    padding: 13px;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.07), transparent 36%),
        rgba(255,255,255,0.026);
}

.realm-compact-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.realm-compact-head span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 11px;
    font-weight: 900;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.07);
}

.realm-compact-head strong {
    color: rgba(247, 243, 232, 0.88);
    font-size: 14px;
}

.realm-compact-card p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    font-size: 12.5px;
    line-height: 1.65;
}

.realm-compact-card small {
    color: rgba(247, 243, 232, 0.52);
    font-size: 11.5px;
    line-height: 1.65;
}

/* =========================
   v6.9-R1-5 渡劫飞升提示
   ========================= */

.ending-card .item p {
    line-height: 1.75;
}

.ascension-rule-note {
    margin-top: 10px;
    padding: 12px 13px;
    border-radius: 16px;
    color: rgba(247, 243, 232, 0.66);
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        rgba(255,255,255,0.026);
}

/* =========================
   v6.9-R1-6 仙界修行入口
   ========================= */

.immortal-cultivation-page {
    width: min(100%, 1280px);
}

.immortal-cultivation-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    overflow: hidden;
}

.immortal-cultivation-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.immortal-realm-lore {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.immortal-realm-lore span,
.immortal-realm-lore strong,
.immortal-realm-lore small {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.07);
}

.immortal-realm-lore span {
    color: var(--ui-gold-2);
}

.immortal-realm-lore strong {
    color: rgba(247, 243, 232, 0.86);
}

.immortal-realm-lore small {
    color: rgba(247, 243, 232, 0.58);
}

.immortal-law-panel {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.085), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.immortal-law-symbol {
    width: 82px;
    height: 82px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    color: var(--ui-gold-2);
    font-size: 34px;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.28);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.22), transparent 70%),
        rgba(255,255,255,0.035);
    box-shadow: 0 0 34px rgba(224, 173, 69, 0.11);
}

.immortal-law-panel h3 {
    margin: 11px 0 8px;
    color: var(--ui-text);
    font-size: 24px;
    line-height: 1.25;
}

.immortal-law-panel p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.75;
}

.immortal-train-form {
    display: grid;
}

.immortal-train-form button {
    min-height: 48px;
    font-size: 15px;
}

.immortal-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1000px) {
    .immortal-cultivation-hero,
    .immortal-rule-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .immortal-law-panel {
        grid-template-columns: 1fr;
    }

    .immortal-law-symbol {
        width: 68px;
        height: 68px;
        border-radius: 22px;
        font-size: 28px;
    }
}

/* =========================
   v6.9-R1-7 仙界角色首页适配
   ========================= */

.immortal-home-wrapper {
    width: min(100%, 1280px);
    margin-bottom: 18px;
}

.immortal-home-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 22px;
    align-items: center;
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.085), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.07), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.80);
    overflow: hidden;
}

.immortal-home-panel.supreme-home-panel {
    border-color: rgba(224, 173, 69, 0.34);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 34%),
        radial-gradient(circle at bottom left, rgba(167, 139, 250, 0.10), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.84);
}

.immortal-home-main h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(34px, 4.5vw, 62px);
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.immortal-home-tags {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.immortal-home-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    color: rgba(247, 243, 232, 0.76);
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.065);
}

.immortal-home-side {
    display: grid;
    gap: 14px;
}

.immortal-home-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.immortal-home-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.immortal-home-actions .nav-button {
    justify-content: center;
    min-height: 42px;
}

@media (max-width: 1000px) {
    .immortal-home-panel,
    .immortal-home-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .immortal-home-stat-grid {
        grid-template-columns: 1fr;
    }

    .immortal-home-main h2 {
        font-size: 34px;
    }
}

/* =========================
   v6.9-R1-8 法则体系 / 法则榜
   ========================= */

.law-system-page {
    width: min(100%, 1280px);
}

.law-system-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.law-system-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.my-law-panel {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.law-symbol {
    width: 82px;
    height: 82px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    color: var(--ui-gold-2);
    font-size: 34px;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.28);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.22), transparent 70%),
        rgba(255,255,255,0.035);
}

.my-law-panel h3,
.law-card h3,
.law-ranking-main h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.my-law-panel p,
.law-card p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.law-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.law-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.law-rank {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: var(--ui-gold-2);
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.18), transparent 68%),
        rgba(255,255,255,0.035);
}

.law-style-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    color: rgba(247, 243, 232, 0.66);
    font-size: 12.5px;
    line-height: 1.6;
    border: 1px solid rgba(224, 173, 69, 0.14);
    background: rgba(224, 173, 69, 0.055);
}

.law-ranking-list {
    display: grid;
    gap: 14px;
}

.law-ranking-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(110, 231, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.07), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.law-ranking-main {
    min-width: 0;
}

@media (max-width: 900px) {
    .law-system-hero,
    .law-grid,
    .law-card,
    .law-ranking-item,
    .my-law-panel {
        grid-template-columns: 1fr;
    }

    .law-rank,
    .law-symbol {
        width: fit-content;
        min-width: 58px;
        padding: 0 14px;
    }
}

/* =========================
   v6.9-R1-9 仙界地图 / 凡界降临限制
   ========================= */

.immortal-world-page {
    width: min(100%, 1280px);
}

.immortal-world-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.07), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.80);
}

.immortal-world-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.immortal-world-tags {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.immortal-world-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    color: rgba(247, 243, 232, 0.76);
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.065);
}

.mortal-descent-warning-card {
    border-color: rgba(255, 114, 114, 0.30);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255,114,114,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.80);
}

.immortal-domain-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.immortal-domain-item {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(110, 231, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.065), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.immortal-domain-item.locked-domain {
    opacity: 0.68;
    border-style: dashed;
    filter: grayscale(0.12);
}

.immortal-domain-item h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.immortal-domain-item p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.domain-feature-note,
.domain-lock-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    color: rgba(247, 243, 232, 0.66);
    font-size: 12.5px;
    line-height: 1.6;
    border: 1px solid rgba(224, 173, 69, 0.14);
    background: rgba(224, 173, 69, 0.055);
}

.domain-lock-note {
    color: #ffb2b2;
    border-color: rgba(255, 114, 114, 0.20);
    background: rgba(255, 114, 114, 0.065);
}

.immortal-domain-form {
    display: grid;
}

.immortal-domain-form button {
    min-height: 42px;
}

.mortal-descent-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.mortal-descent-form,
.immortal-return-form {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.immortal-return-form {
    grid-template-columns: minmax(220px, 1fr) auto;
    margin-top: 16px;
}

.mortal-descent-form input,
.mortal-descent-form select,
.immortal-return-form input {
    min-height: 42px;
    border-radius: 13px;
}

.mortal-descent-form button,
.immortal-return-form button {
    min-height: 42px;
    white-space: nowrap;
}

@media (max-width: 1000px) {
    .immortal-world-hero,
    .immortal-domain-grid,
    .mortal-descent-rule-grid,
    .mortal-descent-form,
    .immortal-return-form {
        grid-template-columns: 1fr;
    }

    .mortal-descent-form button,
    .immortal-return-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-R1-10 仙界任务 / 仙域事件
   ========================= */

.immortal-tasks-page {
    width: min(100%, 1280px);
}

.immortal-task-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.07), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.80);
}

.immortal-task-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.immortal-task-tags {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.immortal-task-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    color: rgba(247, 243, 232, 0.76);
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.065);
}

.immortal-task-lock-card {
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255,114,114,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.80);
}

.immortal-task-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.immortal-task-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(110, 231, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.065), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.immortal-task-card.difficulty-危险,
.immortal-task-card.difficulty-极难 {
    border-color: rgba(224, 173, 69, 0.28);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.085), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.immortal-task-card.locked-task {
    opacity: 0.68;
    border-style: dashed;
    filter: grayscale(0.12);
}

.immortal-task-head h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.immortal-task-head p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.immortal-task-form {
    display: grid;
}

.immortal-task-form button {
    min-height: 42px;
}

.immortal-task-lock {
    padding: 11px 13px;
    border-radius: 15px;
    color: rgba(247, 243, 232, 0.62);
    border: 1px dashed rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.028);
    line-height: 1.6;
    font-size: 13px;
}

@media (max-width: 1000px) {
    .immortal-task-hero,
    .immortal-task-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v6.9-R1-11 仙界任务刷新 / 仙缘事件池
   ========================= */

.immortal-task-refresh-page {
    width: min(100%, 1280px);
}

.immortal-refresh-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.07), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.80);
}

.immortal-refresh-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.immortal-refresh-lock-card {
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255,114,114,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.80);
}

.immortal-refresh-form {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) minmax(190px, 260px) auto;
    gap: 12px;
    align-items: end;
}

.immortal-refresh-form input {
    min-height: 42px;
    border-radius: 13px;
}

.immortal-refresh-form button {
    min-height: 42px;
    white-space: nowrap;
}

.immortal-refresh-checkbox {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.085);
    background: rgba(255,255,255,0.035);
}

.immortal-refresh-checkbox input {
    min-height: auto;
}

.immortal-refresh-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.immortal-refresh-item {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(110, 231, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.065), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.immortal-refresh-item.difficulty-危险,
.immortal-refresh-item.difficulty-极难 {
    border-color: rgba(224, 173, 69, 0.28);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.085), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.immortal-refresh-item.status-closed {
    opacity: 0.62;
}

.immortal-refresh-item h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.immortal-refresh-item p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .immortal-refresh-hero,
    .immortal-refresh-form,
    .immortal-refresh-grid {
        grid-template-columns: 1fr;
    }

    .immortal-refresh-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-R1-12 仙界任务记录 / 仙缘履历
   ========================= */

.immortal-task-records-page {
    width: min(100%, 1280px);
}

.immortal-record-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(110, 231, 255, 0.22);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.07), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.80);
}

.immortal-record-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.immortal-record-warning-card {
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255,114,114,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.80);
}

.immortal-record-law-panel {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.immortal-record-law-panel h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 24px;
    line-height: 1.25;
}

.immortal-record-law-panel p {
    margin: 0 0 12px;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.75;
}

.immortal-record-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.immortal-record-list {
    display: grid;
    gap: 14px;
}

.immortal-record-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(110, 231, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.065), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.immortal-record-year {
    min-height: 76px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.15), transparent 68%),
        rgba(255,255,255,0.035);
}

.immortal-record-year strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 24px;
    line-height: 1;
}

.immortal-record-year span {
    display: block;
    color: rgba(247, 243, 232, 0.56);
    font-size: 11px;
    font-weight: 850;
}

.immortal-record-main {
    min-width: 0;
}

.immortal-record-main h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.immortal-record-main p {
    margin: 0 0 12px;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

@media (max-width: 1000px) {
    .immortal-record-hero,
    .immortal-record-summary-grid,
    .immortal-record-law-panel,
    .immortal-record-item {
        grid-template-columns: 1fr;
    }

    .immortal-record-year {
        width: fit-content;
        min-width: 86px;
        padding: 0 14px;
    }
}

/* =========================
   v6.9-R1-13 法则 / 功法熟练度阶段
   ========================= */

.method-mastery-page {
    width: min(100%, 1280px);
}

.method-mastery-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
}

.method-mastery-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.method-stage-grid,
.method-mastery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.method-mastery-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.method-mastery-card.category-心法 {
    border-color: rgba(167, 139, 250, 0.24);
}

.method-mastery-card.category-身法 {
    border-color: rgba(110, 231, 255, 0.24);
}

.method-mastery-card.category-炼体 {
    border-color: rgba(143, 240, 178, 0.24);
}

.method-mastery-card.category-攻法 {
    border-color: rgba(255, 114, 114, 0.24);
}

.method-mastery-card.perfect-method {
    border-color: rgba(224, 173, 69, 0.34);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.11), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.80);
}

.method-mastery-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 14px;
    align-items: start;
}

.method-mastery-head h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.method-mastery-head p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.method-level-orb {
    min-height: 76px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.15), transparent 68%),
        rgba(255,255,255,0.035);
}

.method-level-orb strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 28px;
    line-height: 1;
}

.method-level-orb span {
    display: block;
    color: rgba(247, 243, 232, 0.56);
    font-size: 11px;
    font-weight: 850;
}

.method-train-form {
    display: grid;
}

.method-train-form button {
    min-height: 42px;
}

.method-perfect-note {
    padding: 11px 13px;
    border-radius: 15px;
    color: var(--ui-gold-2);
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.07);
    line-height: 1.6;
    font-size: 13px;
    font-weight: 850;
}

@media (max-width: 1000px) {
    .method-mastery-hero,
    .method-stage-grid,
    .method-mastery-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .method-mastery-head {
        grid-template-columns: 1fr;
    }

    .method-level-orb {
        width: fit-content;
        min-width: 86px;
        padding: 0 14px;
    }
}

/* =========================
   v6.9-R1-14 仙号 / 称号系统
   ========================= */

.titles-page {
    width: min(100%, 1280px);
}

.titles-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(224, 173, 69, 0.26);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(167, 139, 250, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.titles-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.active-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.14), transparent 60%),
        rgba(224, 173, 69, 0.07);
}

.active-title-badge span {
    color: rgba(247, 243, 232, 0.58);
    font-size: 11px;
    font-weight: 900;
}

.active-title-badge strong {
    color: var(--ui-gold-2);
    font-size: 13px;
    font-weight: 950;
}

.active-title-panel {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.title-seal {
    width: 82px;
    height: 82px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    color: var(--ui-gold-2);
    font-size: 34px;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.28);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.22), transparent 70%),
        rgba(255,255,255,0.035);
}

.active-title-panel h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 26px;
    line-height: 1.25;
}

.active-title-panel p,
.title-card p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.title-clear-form {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.title-stage-grid,
.title-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.title-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.title-card.type-法则称号,
.title-card.type-法则圆满,
.title-card.type-主修法则 {
    border-color: rgba(110, 231, 255, 0.24);
}

.title-card.type-功法称号,
.title-card.type-功法阶段,
.title-card.type-功法圆满 {
    border-color: rgba(167, 139, 250, 0.24);
}

.title-card.type-仙界称号,
.title-card.type-仙域称号 {
    border-color: rgba(224, 173, 69, 0.30);
}

.title-card.type-宗门称号 {
    border-color: rgba(143, 240, 178, 0.22);
}

.title-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 14px;
    align-items: start;
}

.title-card h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.title-priority-orb {
    min-height: 76px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.15), transparent 68%),
        rgba(255,255,255,0.035);
}

.title-priority-orb strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 18px;
    line-height: 1;
}

.title-priority-orb span {
    display: block;
    color: rgba(247, 243, 232, 0.56);
    font-size: 11px;
    font-weight: 850;
}

.title-equip-form {
    display: grid;
}

.title-equip-form button {
    min-height: 42px;
}

@media (max-width: 1000px) {
    .titles-hero,
    .title-stage-grid,
    .title-grid,
    .active-title-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .title-card-head {
        grid-template-columns: 1fr;
    }

    .title-priority-orb,
    .title-seal {
        width: fit-content;
        min-width: 86px;
        padding: 0 14px;
    }

    .title-clear-form {
        display: grid;
    }
}

/* =========================
   v6.9-R1-15 称号属性加成
   ========================= */

.title-bonuses-page {
    width: min(100%, 1280px);
}

.title-bonus-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(224, 173, 69, 0.26);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(110, 231, 255, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.title-bonus-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.active-title-bonus-panel {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.active-title-bonus-panel h3,
.title-bonus-card h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 24px;
    line-height: 1.25;
}

.active-title-bonus-panel p,
.title-bonus-card p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.title-bonus-line {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 15px;
    color: var(--ui-gold-2);
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.07);
    line-height: 1.6;
    font-size: 13px;
    font-weight: 900;
}

.title-bonus-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.title-bonus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.title-bonus-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.title-bonus-card.type-法则称号,
.title-bonus-card.type-法则圆满,
.title-bonus-card.type-主修法则 {
    border-color: rgba(110, 231, 255, 0.24);
}

.title-bonus-card.type-功法称号,
.title-bonus-card.type-功法阶段,
.title-bonus-card.type-功法圆满 {
    border-color: rgba(167, 139, 250, 0.24);
}

.title-bonus-card.type-仙界称号,
.title-bonus-card.type-仙域称号 {
    border-color: rgba(224, 173, 69, 0.30);
}

.title-bonus-card.type-宗门称号 {
    border-color: rgba(143, 240, 178, 0.22);
}

@media (max-width: 1000px) {
    .title-bonus-hero,
    .active-title-bonus-panel,
    .title-bonus-stat-grid,
    .title-bonus-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v6.9-R1-17 新称号提醒
   ========================= */

.title-notifications-page {
    width: min(100%, 1280px);
}

.title-notice-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(224, 173, 69, 0.26);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(167, 139, 250, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.title-notice-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.title-notice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.title-notice-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.title-notice-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 14px;
    align-items: start;
}

.title-notice-card h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.title-notice-card p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.title-notice-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.title-notice-actions form {
    display: grid;
}

.title-notice-actions button {
    min-height: 42px;
}

.title-home-notice-wrapper {
    width: min(100%, 1280px);
    margin-bottom: 18px;
}

.title-home-notice-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    border-color: rgba(224, 173, 69, 0.30);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 34%),
        radial-gradient(circle at bottom left, rgba(167, 139, 250, 0.10), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.title-home-notice-card h2 {
    margin: 12px 0 8px;
    color: var(--ui-text);
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.title-home-mini-list {
    margin-top: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.title-home-mini-list span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.07);
}

.title-home-actions {
    display: grid;
    gap: 10px;
    min-width: 180px;
}

.title-home-actions .nav-button {
    justify-content: center;
}

@media (max-width: 1000px) {
    .title-notice-hero,
    .title-notice-grid,
    .title-home-notice-card {
        grid-template-columns: 1fr;
    }

    .title-home-actions {
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .title-notice-card-head,
    .title-notice-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v6.9-R2-1 修行资质 / 难度重构
   ========================= */

.cultivation-profile-page {
    width: min(100%, 1280px);
}

.cultivation-profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(224, 173, 69, 0.26);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(110, 231, 255, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.cultivation-profile-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

@media (max-width: 1000px) {
    .cultivation-profile-hero {
        grid-template-columns: 1fr;
    }
}

/* =========================
   v6.9-R2-2 离线修炼 / 心法自动运转
   ========================= */

.offline-cultivation-page {
    width: min(100%, 1280px);
}

.offline-cultivation-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(143, 240, 178, 0.24);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.07), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.offline-cultivation-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.offline-heart-note {
    margin-top: 14px;
    padding: 12px 13px;
    border-radius: 16px;
    color: rgba(247, 243, 232, 0.70);
    border: 1px solid rgba(143, 240, 178, 0.18);
    background: rgba(143, 240, 178, 0.055);
    line-height: 1.7;
    font-size: 13px;
}

.offline-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.offline-home-wrapper {
    width: min(100%, 1280px);
    margin-bottom: 18px;
}

.offline-home-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    border-color: rgba(143, 240, 178, 0.24);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.07), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.offline-home-card h2 {
    margin: 12px 0 8px;
    color: var(--ui-text);
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.offline-home-actions {
    display: grid;
    gap: 10px;
    min-width: 180px;
}

.offline-home-actions form {
    display: grid;
}

.offline-home-actions .nav-button,
.offline-home-actions button {
    justify-content: center;
    min-height: 42px;
}

@media (max-width: 1000px) {
    .offline-cultivation-hero,
    .offline-rule-grid,
    .offline-home-card {
        grid-template-columns: 1fr;
    }

    .offline-home-actions {
        min-width: 0;
    }
}

/* =========================
   v6.9-R2-3 NPC 自动行为 / 世界事件
   ========================= */

.world-events-page {
    width: min(100%, 1280px);
}

.world-events-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(255, 114, 114, 0.24);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.09), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.07), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.world-events-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.world-events-run-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.world-events-run-form input {
    min-height: 42px;
    border-radius: 13px;
}

.world-events-run-form button {
    min-height: 42px;
    white-space: nowrap;
}

.world-event-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.world-event-list {
    display: grid;
    gap: 14px;
}

.world-event-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.world-event-item.result-death,
.world-event-item.result-kill,
.world-event-item.result-tribulation_failed,
.world-event-item.result-major_failed {
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.world-event-item.result-opportunity,
.world-event-item.result-major_success,
.world-event-item.result-minor_success,
.world-event-item.result-gain_qi {
    border-color: rgba(143, 240, 178, 0.22);
}

.world-event-year {
    min-height: 76px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.15), transparent 68%),
        rgba(255,255,255,0.035);
}

.world-event-year strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 24px;
    line-height: 1;
}

.world-event-year span {
    display: block;
    color: rgba(247, 243, 232, 0.56);
    font-size: 11px;
    font-weight: 850;
}

.world-event-main {
    min-width: 0;
}

.world-event-main h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.world-event-main p {
    margin: 0 0 12px;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

@media (max-width: 1000px) {
    .world-events-hero,
    .world-event-rule-grid,
    .world-events-run-form,
    .world-event-item {
        grid-template-columns: 1fr;
    }

    .world-events-run-form button {
        width: 100%;
    }

    .world-event-year {
        width: fit-content;
        min-width: 86px;
        padding: 0 14px;
    }
}

/* =========================
   v6.9-R2-4 世界事件自动触发
   ========================= */

.world-events-auto-page {
    width: min(100%, 1280px);
}

.world-auto-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(255, 114, 114, 0.24);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.09), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.07), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.world-auto-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.world-auto-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px) auto;
    gap: 12px;
    align-items: end;
}

.world-auto-checkbox {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.085);
    background: rgba(255,255,255,0.035);
}

.world-auto-checkbox input {
    min-height: auto;
}

.world-auto-form input {
    min-height: 42px;
    border-radius: 13px;
}

.world-auto-form button {
    min-height: 42px;
    white-space: nowrap;
}

.world-auto-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1000px) {
    .world-auto-hero,
    .world-auto-form,
    .world-auto-rule-grid {
        grid-template-columns: 1fr;
    }

    .world-auto-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-R2-5 玩家受伤 / 死亡 / 高危试炼
   ========================= */

.danger-adventure-page {
    width: min(100%, 1280px);
}

.danger-adventure-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.07), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.danger-adventure-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.danger-injury-card {
    border-color: rgba(255, 114, 114, 0.30);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255,114,114,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.80);
}

.danger-injury-desc {
    margin-top: 14px;
    padding: 12px 13px;
    border-radius: 16px;
    color: rgba(247, 243, 232, 0.70);
    border: 1px solid rgba(255, 114, 114, 0.18);
    background: rgba(255, 114, 114, 0.055);
    line-height: 1.7;
    font-size: 13px;
}

.danger-recover-form {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.danger-recover-form input,
.danger-action-form input {
    min-height: 42px;
    border-radius: 13px;
}

.danger-recover-form button,
.danger-action-form button {
    min-height: 42px;
    white-space: nowrap;
}

.danger-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.danger-action-item {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 114, 114, 0.22);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.075), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.danger-action-item h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.danger-action-item p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.danger-action-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 10px;
}

.danger-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.danger-log-list {
    display: grid;
    gap: 14px;
}

.danger-log-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
}

.danger-log-item.result-injured {
    border-color: rgba(255, 114, 114, 0.28);
}

.danger-log-item.result-death {
    border-color: rgba(255, 64, 64, 0.36);
    background:
        radial-gradient(circle at top right, rgba(255, 64, 64, 0.11), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.danger-log-item.result-success {
    border-color: rgba(143, 240, 178, 0.22);
}

.danger-log-year {
    min-height: 76px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.15), transparent 68%),
        rgba(255,255,255,0.035);
}

.danger-log-year strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 24px;
    line-height: 1;
}

.danger-log-year span {
    display: block;
    color: rgba(247, 243, 232, 0.56);
    font-size: 11px;
    font-weight: 850;
}

.danger-log-main {
    min-width: 0;
}

.danger-log-main h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.danger-log-main p {
    margin: 0 0 12px;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

@media (max-width: 1000px) {
    .danger-adventure-hero,
    .danger-action-grid,
    .danger-rule-grid,
    .danger-log-item,
    .danger-recover-form,
    .danger-action-form {
        grid-template-columns: 1fr;
    }

    .danger-recover-form button,
    .danger-action-form button {
        width: 100%;
    }

    .danger-log-year {
        width: fit-content;
        min-width: 86px;
        padding: 0 14px;
    }
}

/* =========================
   v6.9-R2-6 装备分解 + 旧探索战斗风险
   ========================= */

.equipment-dismantle-page {
    width: min(100%, 1280px);
}

.equipment-dismantle-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(224, 173, 69, 0.26);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(143, 240, 178, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.equipment-dismantle-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.equipment-bulk-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(220px, 300px) auto;
    gap: 12px;
    align-items: end;
}

.equipment-bulk-form input,
.equipment-bulk-form select,
.equipment-dismantle-form input {
    min-height: 42px;
    border-radius: 13px;
}

.equipment-bulk-form button,
.equipment-dismantle-form button {
    min-height: 42px;
    white-space: nowrap;
}

.equipment-dismantle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.equipment-dismantle-item {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.065), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.equipment-dismantle-item.equipped-item {
    opacity: 0.72;
    border-style: dashed;
    border-color: rgba(255, 114, 114, 0.22);
}

.equipment-dismantle-item h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.equipment-dismantle-item p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.equipment-dismantle-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 10px;
}

.equipment-lock-note {
    padding: 11px 13px;
    border-radius: 15px;
    color: #ffb2b2;
    border: 1px dashed rgba(255, 114, 114, 0.22);
    background: rgba(255, 114, 114, 0.065);
    line-height: 1.6;
    font-size: 13px;
}

@media (max-width: 1000px) {
    .equipment-dismantle-hero,
    .equipment-bulk-form,
    .equipment-dismantle-grid,
    .equipment-dismantle-form {
        grid-template-columns: 1fr;
    }

    .equipment-bulk-form button,
    .equipment-dismantle-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-R2-7 装备强化 / 重铸
   ========================= */

.equipment-enhance-page {
    width: min(100%, 1280px);
}

.equipment-enhance-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(224, 173, 69, 0.26);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(143, 240, 178, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.equipment-enhance-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.equipment-enhance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.equipment-enhance-item {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.065), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.equipment-enhance-item.equipped-enhance-item {
    border-color: rgba(143, 240, 178, 0.24);
}

.equipment-enhance-item h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.equipment-enhance-item p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.equipment-enhance-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 10px;
}

.equipment-enhance-form input {
    min-height: 42px;
    border-radius: 13px;
}

.equipment-enhance-form button {
    min-height: 42px;
    white-space: nowrap;
}

.equipment-enhance-note {
    padding: 11px 13px;
    border-radius: 15px;
    color: var(--ui-gold-2);
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.065);
    line-height: 1.6;
    font-size: 13px;
    font-weight: 850;
}

.equipment-enhance-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1000px) {
    .equipment-enhance-hero,
    .equipment-enhance-grid,
    .equipment-enhance-form,
    .equipment-enhance-rule-grid {
        grid-template-columns: 1fr;
    }

    .equipment-enhance-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-R2-8 装备裂痕 / 危险淬炼 / 修复
   ========================= */

.equipment-fracture-page {
    width: min(100%, 1280px);
}

.equipment-fracture-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(255, 114, 114, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.equipment-fracture-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.equipment-fracture-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.equipment-fracture-item {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.065), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.equipment-fracture-item.equipped-fracture-item {
    border-color: rgba(143, 240, 178, 0.24);
}

.equipment-fracture-item.crack-3,
.equipment-fracture-item.crack-4,
.equipment-fracture-item.crack-5 {
    border-color: rgba(255, 114, 114, 0.30);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.equipment-fracture-item h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.equipment-fracture-item p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.equipment-fracture-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 10px;
}

.equipment-fracture-form input {
    min-height: 42px;
    border-radius: 13px;
}

.equipment-fracture-form button {
    min-height: 42px;
    white-space: nowrap;
}

.equipment-fracture-note {
    padding: 11px 13px;
    border-radius: 15px;
    color: rgba(247, 243, 232, 0.72);
    border: 1px solid rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.065);
    line-height: 1.6;
    font-size: 13px;
    font-weight: 850;
}

.equipment-fracture-note.danger-note {
    color: #ffb2b2;
    border-color: rgba(255, 114, 114, 0.24);
    background: rgba(255, 114, 114, 0.065);
}

.equipment-fracture-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1000px) {
    .equipment-fracture-hero,
    .equipment-fracture-grid,
    .equipment-fracture-form,
    .equipment-fracture-rule-grid {
        grid-template-columns: 1fr;
    }

    .equipment-fracture-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-R2-9 炼器炉 / 护器符
   ========================= */

.refining-furnace-page {
    width: min(100%, 1280px);
}

.refining-furnace-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(224, 173, 69, 0.30);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 34%),
        radial-gradient(circle at bottom left, rgba(143, 240, 178, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.refining-furnace-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.refining-control-grid,
.refining-equipment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.refining-control-item,
.refining-equipment-item {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.065), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.refining-equipment-item.equipped-refining-item {
    border-color: rgba(143, 240, 178, 0.24);
}

.refining-equipment-item.crack-3,
.refining-equipment-item.crack-4,
.refining-equipment-item.crack-5 {
    border-color: rgba(255, 114, 114, 0.30);
}

.refining-control-item h3,
.refining-equipment-item h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.refining-control-item p,
.refining-equipment-item p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.refining-form,
.refining-temper-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.refining-form.craft-form {
    grid-template-columns: 110px minmax(180px, 1fr) auto;
}

.refining-form input,
.refining-temper-form input {
    min-height: 42px;
    border-radius: 13px;
}

.refining-form button,
.refining-temper-form button {
    min-height: 42px;
    white-space: nowrap;
}

.refining-checkbox {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.085);
    background: rgba(255,255,255,0.035);
}

.refining-checkbox input {
    min-height: auto;
}

.refining-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1000px) {
    .refining-furnace-hero,
    .refining-control-grid,
    .refining-equipment-grid,
    .refining-form,
    .refining-form.craft-form,
    .refining-temper-form,
    .refining-rule-grid {
        grid-template-columns: 1fr;
    }

    .refining-form button,
    .refining-temper-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-R2-10 炼器师商会 / 护器符商店 / 大师护炉
   ========================= */

.refiner-market-page {
    width: min(100%, 1280px);
}

.refiner-market-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(224, 173, 69, 0.30);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 34%),
        radial-gradient(circle at bottom left, rgba(110, 231, 255, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.refiner-market-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.refiner-simple-form,
.master-temper-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.refiner-simple-form input,
.master-temper-form input {
    min-height: 42px;
    border-radius: 13px;
}

.refiner-simple-form button,
.master-temper-form button {
    min-height: 42px;
    white-space: nowrap;
}

.refiner-trade-grid,
.master-temper-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.refiner-trade-item,
.master-temper-item {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.065), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.master-temper-item.equipped-master-item {
    border-color: rgba(143, 240, 178, 0.24);
}

.master-temper-item.crack-3,
.master-temper-item.crack-4,
.master-temper-item.crack-5 {
    border-color: rgba(255, 114, 114, 0.30);
}

.refiner-trade-item h3,
.master-temper-item h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.refiner-trade-item p,
.master-temper-item p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

.refiner-checkbox {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.085);
    background: rgba(255,255,255,0.035);
}

.refiner-checkbox input {
    min-height: auto;
}

.refiner-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1000px) {
    .refiner-market-hero,
    .refiner-trade-grid,
    .master-temper-grid,
    .refiner-simple-form,
    .master-temper-form,
    .refiner-rule-grid {
        grid-template-columns: 1fr;
    }

    .refiner-simple-form button,
    .master-temper-form button {
        width: 100%;
    }
}

/* =========================
   v6.9-R2-11 材料掉落 / 世界遗物
   ========================= */

.material-drops-page {
    width: min(100%, 1280px);
}

.material-drops-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(143, 240, 178, 0.26);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.11), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.material-drops-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.material-claim-form {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.material-claim-form input {
    min-height: 42px;
    border-radius: 13px;
}

.material-claim-form button {
    min-height: 42px;
    white-space: nowrap;
}

.material-source-rule-grid,
.material-drop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.material-drop-item {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(143, 240, 178, 0.20);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.76);
}

.material-drop-item h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.3;
}

.material-drop-item p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.7;
    font-size: 13px;
}

@media (max-width: 1000px) {
    .material-drops-hero,
    .material-source-rule-grid,
    .material-drop-grid,
    .material-claim-form {
        grid-template-columns: 1fr;
    }

    .material-claim-form button {
        width: 100%;
    }
}

/* =========================
   首页 Dashboard 小组件整理
   不再让称号 / 离线修炼占据首页主视觉
   ========================= */

.home-dashboard-strip {
    width: min(100%, 1280px);
    margin: 18px auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.home-dashboard-strip:empty {
    display: none;
}

.home-dashboard-widget {
    min-height: 132px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
    display: grid;
    gap: 10px;
    align-content: start;
}

.home-dashboard-widget.title-widget {
    border-color: rgba(224, 173, 69, 0.22);
}

.home-dashboard-widget.offline-widget {
    border-color: rgba(143, 240, 178, 0.22);
}

.widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.widget-head strong {
    color: var(--ui-text);
    font-size: 16px;
}

.widget-tag {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.08);
}

.widget-main-number {
    color: var(--ui-text);
    font-size: 36px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.home-dashboard-widget p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.6;
    font-size: 13px;
}

.inline-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 11px;
    font-weight: 850;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.07);
}

.widget-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.widget-actions a,
.widget-actions button {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 12px;
    border: 1px solid rgba(224, 173, 69, 0.25);
    background: rgba(255,255,255,0.04);
    color: var(--ui-text);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.widget-actions form {
    margin: 0;
}

@media (max-width: 900px) {
    .home-dashboard-strip {
        grid-template-columns: 1fr;
    }
}

/* =========================
   首页布局归位：隐藏旧浮动称号 / 功法阶段
   ========================= */

.home-page-refined > .page:has(.active-title-badge),
.home-page-refined > .page:has(.title-badge),
.title-home-notice-wrapper {
    display: none !important;
}

/* 新 dashboard 小提醒 */
.home-dashboard-strip {
    width: min(100%, 1280px);
    margin: 16px auto 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.home-dashboard-strip:empty {
    display: none;
}

.home-dashboard-widget {
    min-height: 120px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.74);
    display: grid;
    gap: 10px;
    align-content: start;
}

.home-dashboard-widget.offline-widget {
    border-color: rgba(143, 240, 178, 0.22);
}

.widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.widget-head strong {
    color: var(--ui-text);
    font-size: 16px;
}

.widget-tag {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.08);
}

.widget-main-number {
    color: var(--ui-text);
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.home-dashboard-widget p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    line-height: 1.6;
    font-size: 13px;
}

.inline-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 11px;
    font-weight: 850;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.07);
}

.widget-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.widget-actions a,
.widget-actions button {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 12px;
    border: 1px solid rgba(224, 173, 69, 0.25);
    background: rgba(255,255,255,0.04);
    color: var(--ui-text);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.widget-actions form {
    margin: 0;
}

@media (max-width: 900px) {
    .home-dashboard-strip {
        grid-template-columns: 1fr;
    }
}

/* =========================
   导航整理：主入口简洁，更多系统分区
   ========================= */

.primary-nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.primary-nav-row .nav-button {
    min-width: 98px;
}

.refined-nav-drawer {
    margin-top: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        rgba(9, 12, 26, 0.62);
    overflow: visible;
}

.refined-nav-drawer summary {
    min-height: 44px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}

.refined-nav-drawer summary::-webkit-details-marker {
    display: none;
}

.refined-nav-drawer summary strong {
    color: var(--ui-text, var(--text));
    font-size: 15px;
}

.refined-nav-drawer summary span {
    color: rgba(247, 243, 232, 0.62);
    font-size: 13px;
    font-weight: 800;
}

.refined-nav-drawer summary::after {
    content: "展开";
    margin-left: auto;
    min-width: 46px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--ui-gold-2, var(--gold));
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.08);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.refined-nav-drawer[open] summary::after {
    content: "收起";
}

.refined-nav-content {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.nav-system-card {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.055), transparent 34%),
        rgba(10, 14, 29, 0.72);
}

.nav-system-card.admin-system-card {
    border-color: rgba(255, 114, 114, 0.20);
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.08), transparent 34%),
        rgba(10, 14, 29, 0.76);
}

.nav-system-head {
    margin-bottom: 12px;
}

.nav-system-head strong {
    display: block;
    color: var(--ui-text, var(--text));
    font-size: 16px;
    margin-bottom: 4px;
}

.nav-system-head span {
    color: rgba(247, 243, 232, 0.58);
    font-size: 12px;
    font-weight: 800;
}

.nav-link-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nav-link-grid .nav-button {
    min-width: auto;
    min-height: 34px;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 12px;
}

@media (max-width: 900px) {
    .primary-nav-row {
        justify-content: flex-start;
    }

    .refined-nav-content {
        grid-template-columns: 1fr;
    }

    .refined-nav-drawer summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .refined-nav-drawer summary::after {
        margin-left: 0;
    }
}

/* =========================
   背包 v2：格子化 + 分类
   ========================= */

.inventory-page-v2 {
    width: min(100%, 1280px);
}

.inventory-hero-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(143, 240, 178, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.inventory-hero-v2 h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.06em;
}

.inventory-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.inventory-type-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.inventory-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background: rgba(224, 173, 69, 0.07);
    color: rgba(247, 243, 232, 0.78);
    font-weight: 850;
}

.inventory-type-chip strong {
    color: var(--ui-gold-2);
}

.inventory-category-stack {
    display: grid;
    gap: 16px;
}

.inventory-category-card {
    overflow: visible;
}

.inventory-category-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.inventory-category-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.inventory-category-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--ui-gold-2);
    font-size: 20px;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle, rgba(224, 173, 69, 0.20), transparent 70%),
        rgba(255,255,255,0.04);
}

.inventory-category-title h2 {
    margin: 0 0 5px;
}

.inventory-category-stat {
    min-width: 150px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 6px;
    align-items: baseline;
    justify-content: end;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.085);
    background: rgba(255,255,255,0.035);
}

.inventory-category-stat strong {
    color: var(--ui-gold-2);
    font-size: 22px;
    line-height: 1;
}

.inventory-category-stat span {
    color: rgba(247, 243, 232, 0.58);
    font-size: 12px;
    font-weight: 850;
}

.inventory-artifact-hint {
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(224, 173, 69, 0.16);
    background: rgba(224, 173, 69, 0.055);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.inventory-artifact-hint strong {
    color: var(--ui-text);
}

.inventory-artifact-hint p {
    margin: 5px 0 0;
    color: rgba(247, 243, 232, 0.62);
    font-size: 13px;
    line-height: 1.6;
}

.inventory-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 12px;
}

.inventory-slot {
    position: relative;
    min-height: 146px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.018)),
        rgba(10, 14, 29, 0.78);
    overflow: visible;
    display: grid;
}

.inventory-slot-main {
    position: relative;
    min-height: 146px;
    padding: 10px;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 7px;
    text-decoration: none;
    color: inherit;
}

.slot-rarity {
    justify-self: start;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 11px;
    font-weight: 900;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.07);
}

.slot-icon {
    align-self: center;
    justify-self: center;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--ui-text);
    font-size: 19px;
    font-weight: 950;
    border: 1px solid rgba(255,255,255,0.10);
    background:
        radial-gradient(circle, rgba(255,255,255,0.11), transparent 68%),
        rgba(255,255,255,0.04);
}

.slot-qty {
    position: absolute;
    right: 9px;
    bottom: 8px;
    min-height: 24px;
    min-width: 38px;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--ui-text);
    font-size: 12px;
    font-weight: 950;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.30);
}

.inventory-slot.grade-天品 {
    border-color: rgba(255, 226, 122, 0.45);
    box-shadow: 0 0 0 1px rgba(255, 226, 122, 0.08), 0 12px 34px rgba(224, 173, 69, 0.10);
}

.inventory-slot.grade-地品 {
    border-color: rgba(143, 240, 178, 0.32);
}

.inventory-slot.grade-玄品 {
    border-color: rgba(110, 231, 255, 0.28);
}

.inventory-slot.grade-灵品 {
    border-color: rgba(177, 140, 255, 0.26);
}

.inventory-slot-detail {
    display: none;
    position: absolute;
    z-index: 9999;
    top: 8px;
    left: calc(100% + 12px);
    right: auto;
    width: 360px;
    max-width: min(360px, calc(100vw - 32px));
    transform: none;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(224, 173, 69, 0.24);
    background:
        linear-gradient(135deg, rgba(24, 28, 45, 0.98), rgba(12, 16, 31, 0.98));
    box-shadow: 0 24px 60px rgba(0,0,0,0.48);
    pointer-events: auto;
}

.inventory-slot:hover .inventory-slot-detail,
.inventory-slot:focus-within .inventory-slot-detail {
    display: grid;
    gap: 10px;
}

.inventory-slot-detail p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    font-size: 12px;
    line-height: 1.55;
}

.inventory-slot-actions {
    display: grid;
    gap: 8px;
}

.compact-use-row {
    display: grid;
    grid-template-columns: 72px 1fr 1fr;
    gap: 7px;
}

.compact-use-row input,
.compact-discard-form input {
    min-height: 34px;
    border-radius: 11px;
}

.compact-use-row button,
.compact-discard-form button,
.inventory-slot-actions > button {
    min-height: 34px;
    border-radius: 11px;
    padding: 6px 9px;
    font-size: 12px;
}

.compact-discard-form {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto;
    gap: 7px;
}

.empty-slot {
    min-height: 146px;
    display: grid;
    place-items: center;
    gap: 4px;
    opacity: 0.48;
    border-style: dashed;
    border-color: rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.025);
}

.empty-slot-plus {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: rgba(247, 243, 232, 0.42);
    font-size: 22px;
    font-weight: 900;
    border: 1px dashed rgba(255,255,255,0.12);
}

.empty-slot span {
    color: rgba(247, 243, 232, 0.36);
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 1000px) {
    .inventory-hero-v2,
    .inventory-category-head,
    .inventory-artifact-hint {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .inventory-toolbar-actions {
        justify-content: flex-start;
    }

    .inventory-category-stat {
        justify-content: start;
    }

    .inventory-slot-grid {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    }
}

@media (max-width: 640px) {
    .inventory-slot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }

    .inventory-slot-main,
    .inventory-slot,
    .empty-slot {
        min-height: 128px;
    }

    .slot-icon {
        width: 40px;
        height: 40px;
    }

    .slot-name {
        font-size: 12px;
    }
}

/* =========================
   物品效能显示优化
   ========================= */

.slot-effect-line {
    min-height: 18px;
    color: var(--ui-gold-2);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    line-height: 1.25;
    opacity: 0.95;
}

.item-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    border: 1px solid rgba(224, 173, 69, 0.24);
    background: rgba(224, 173, 69, 0.08);
    font-size: 13px;
    font-weight: 900;
}

/* =========================
   背包 tooltip：完整物品效能 / 自身加成明细
   ========================= */

.inventory-tooltip-head {
    display: grid;
    gap: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.inventory-tooltip-head strong {
    color: var(--ui-text);
    font-size: 15px;
    line-height: 1.35;
}

.inventory-tooltip-head span {
    color: rgba(247, 243, 232, 0.58);
    font-size: 12px;
    font-weight: 800;
}

.inventory-effect-summary {
    display: grid;
    gap: 7px;
}

.inventory-effect-summary > div {
    display: grid;
    gap: 3px;
    padding: 8px 9px;
    border-radius: 12px;
    border: 1px solid rgba(224, 173, 69, 0.16);
    background: rgba(224, 173, 69, 0.055);
}

.inventory-effect-summary span {
    color: rgba(247, 243, 232, 0.52);
    font-size: 11px;
    font-weight: 850;
}

.inventory-effect-summary strong {
    color: var(--ui-gold-2);
    font-size: 13px;
    line-height: 1.35;
}

.inventory-stat-list {
    display: grid;
    gap: 7px;
}

.inventory-stat-row {
    padding: 8px 9px;
    border-radius: 12px;
    border: 1px solid rgba(143, 240, 178, 0.18);
    background: rgba(143, 240, 178, 0.055);
}

.inventory-stat-row > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.inventory-stat-row strong {
    color: #a7f3c0;
    font-size: 13px;
}

.inventory-stat-row span {
    color: rgba(247, 243, 232, 0.56);
    font-size: 12px;
    font-weight: 850;
}

.inventory-stat-row p {
    margin: 0;
    color: rgba(247, 243, 232, 0.62);
    font-size: 11px;
    line-height: 1.45;
}

.inventory-tooltip-desc {
    display: grid;
    gap: 6px;
}

.inventory-tooltip-desc p {
    margin: 0;
    color: rgba(247, 243, 232, 0.66);
    font-size: 12px;
    line-height: 1.55;
}

.item-effect-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.item-effect-stat-card {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(143, 240, 178, 0.18);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.08), transparent 34%),
        rgba(255,255,255,0.035);
}

.item-effect-stat-card span {
    display: block;
    color: rgba(247, 243, 232, 0.58);
    font-size: 12px;
    font-weight: 900;
}

.item-effect-stat-card strong {
    display: block;
    margin: 6px 0;
    color: #a7f3c0;
    font-size: 26px;
    line-height: 1;
}

.item-effect-stat-card p {
    margin: 0 0 6px;
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 850;
}

.item-effect-stat-card small {
    display: block;
    color: rgba(247, 243, 232, 0.58);
    line-height: 1.45;
}

/* =========================
   背包真实使用加成面板
   ========================= */

.inventory-bonus-panel {
    border-color: rgba(143, 240, 178, 0.22);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.inventory-bonus-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.inventory-bonus-box {
    padding: 13px;
    border-radius: 16px;
    border: 1px solid rgba(143, 240, 178, 0.16);
    background: rgba(143, 240, 178, 0.055);
}

.inventory-bonus-box strong {
    display: block;
    color: #a7f3c0;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 6px;
}

.inventory-bonus-box span {
    color: rgba(247, 243, 232, 0.60);
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 1000px) {
    .inventory-bonus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================
   背包 tooltip 定位修复
   让物品详情显示在格子正下方，并盖在其他卡片上
   ========================= */

.inventory-category-stack,
.inventory-category-card,
.inventory-slot-grid {
    overflow: visible !important;
}

.inventory-category-card {
    position: relative;
    z-index: 1;
}

.inventory-category-card:hover,
.inventory-category-card:focus-within {
    z-index: 200;
}

.inventory-slot {
    position: relative;
    z-index: 1;
}

.inventory-slot:hover,
.inventory-slot:focus-within {
    z-index: 500;
}

.inventory-slot-detail::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    border-left: 1px solid rgba(224, 173, 69, 0.24);
    border-top: 1px solid rgba(224, 173, 69, 0.24);
    background: rgba(24, 28, 45, 0.98);
}

/* =========================
   战斗档案：战力对比条优化
   ========================= */

.battle-power-compare {
    margin-top: 18px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(224, 173, 69, 0.20);
    background:
        radial-gradient(circle at left, rgba(143, 240, 178, 0.08), transparent 34%),
        radial-gradient(circle at right, rgba(255, 114, 114, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(10, 14, 29, 0.72);
}

.battle-power-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.battle-power-header > div:first-child {
    text-align: left;
}

.battle-power-header > div:last-child {
    text-align: right;
}

.battle-power-header span {
    display: block;
    color: rgba(247, 243, 232, 0.58);
    font-size: 12px;
    font-weight: 850;
    margin-bottom: 5px;
}

.battle-power-header strong {
    color: var(--ui-text);
    font-size: 26px;
    line-height: 1;
    font-weight: 950;
}

.battle-power-result {
    min-width: 110px;
    padding: 8px 13px;
    border-radius: 999px;
    text-align: center;
    color: var(--ui-gold-2);
    font-size: 13px;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.26);
    background: rgba(224, 173, 69, 0.08);
}

.battle-power-track {
    position: relative;
    height: 22px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background:
        linear-gradient(90deg, rgba(143, 240, 178, 0.10), rgba(255, 114, 114, 0.10)),
        rgba(0,0,0,0.26);
}

.battle-power-fill-player {
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(143, 240, 178, 0.95), rgba(224, 173, 69, 0.90));
    box-shadow:
        0 0 18px rgba(143, 240, 178, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.30);
    transition: width 0.35s ease;
}

.battle-power-centerline {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.32);
    box-shadow: 0 0 12px rgba(255,255,255,0.20);
}

.battle-power-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    color: rgba(247, 243, 232, 0.58);
    font-size: 12px;
    font-weight: 850;
}

@media (max-width: 700px) {
    .battle-power-header {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .battle-power-header > div:last-child {
        text-align: left;
    }

    .battle-power-result {
        justify-self: start;
    }

    .battle-power-footer {
        flex-direction: column;
    }
}

/* =========================
   背包 tooltip 强制修复：
   平时不显示，只有 hover / focus 才显示详细信息
   ========================= */

.inventory-slot {
    position: relative;
    z-index: 1;
}

.inventory-slot-detail {
    display: none !important;
    position: absolute !important;
    z-index: 9999 !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    right: auto !important;
    width: 360px !important;
    max-width: min(360px, calc(100vw - 32px)) !important;
    transform: translateX(-50%) !important;
    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(224, 173, 69, 0.24) !important;
    background:
        linear-gradient(135deg, rgba(24, 28, 45, 0.98), rgba(12, 16, 31, 0.98)) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.48) !important;
    pointer-events: auto !important;
}

.inventory-slot:hover,
.inventory-slot:focus-within {
    z-index: 500 !important;
}

.inventory-slot:hover > .inventory-slot-detail,
.inventory-slot:focus-within > .inventory-slot-detail {
    display: grid !important;
    gap: 10px !important;
}

/* 防止之前 mobile 规则把 tooltip 永久显示 */
@media (max-width: 640px) {
    .inventory-slot-detail {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 50% !important;
        right: auto !important;
        width: min(340px, calc(100vw - 32px)) !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
    }

    .inventory-slot:hover > .inventory-slot-detail,
    .inventory-slot:focus-within > .inventory-slot-detail {
        display: grid !important;
    }
}

/* 让父层不要裁掉 tooltip */
.inventory-category-stack,
.inventory-category-card,
.inventory-slot-grid {
    overflow: visible !important;
}

.inventory-category-card {
    position: relative;
    z-index: 1;
}

.inventory-category-card:hover,
.inventory-category-card:focus-within {
    z-index: 200 !important;
}

/* =========================
   背包 tooltip 最终收敛版
   目标：
   1. 背包格子平时只显示小图标 / 名字 / 简短效能
   2. 鼠标指上去才显示详情
   3. tooltip 不再跑到左边
   4. tooltip 不再无限变高
   5. 详细说明压缩成游戏提示框
   ========================= */

.inventory-slot {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
}

/* 默认永远隐藏 */
.inventory-slot > .inventory-slot-detail {
    display: none !important;
}

/* hover 才显示 */
.inventory-slot:hover > .inventory-slot-detail,
.inventory-slot:focus-within > .inventory-slot-detail {
    display: grid !important;
}

/* tooltip 位置：固定在物品格子下方左对齐，不再居中跑歪 */
.inventory-slot-detail {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;

    width: 320px !important;
    max-width: 320px !important;
    max-height: 420px !important;
    overflow-y: auto !important;

    z-index: 99999 !important;
    gap: 8px !important;
    padding: 12px !important;

    border-radius: 16px !important;
    border: 1px solid rgba(224, 173, 69, 0.28) !important;
    background:
        linear-gradient(135deg, rgba(22, 25, 42, 0.98), rgba(10, 13, 27, 0.98)) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55) !important;
}

/* 小箭头 */
.inventory-slot-detail::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 34px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border-left: 1px solid rgba(224, 173, 69, 0.28);
    border-top: 1px solid rgba(224, 173, 69, 0.28);
    background: rgba(22, 25, 42, 0.98);
}

/* 父级不能裁掉 tooltip */
.inventory-category-stack,
.inventory-category-card,
.inventory-slot-grid {
    overflow: visible !important;
}

.inventory-category-card {
    position: relative !important;
    z-index: 1 !important;
}

.inventory-category-card:hover,
.inventory-category-card:focus-within {
    z-index: 300 !important;
}

.inventory-slot:hover,
.inventory-slot:focus-within {
    z-index: 1000 !important;
}

/* tooltip 头部压缩 */
.inventory-tooltip-head {
    display: grid !important;
    gap: 3px !important;
    padding-bottom: 7px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.inventory-tooltip-head strong {
    color: var(--ui-text) !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
}

.inventory-tooltip-head span {
    color: rgba(247, 243, 232, 0.56) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

/* 效能总结改成紧凑两列，不再一条占很大 */
.inventory-effect-summary {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}

.inventory-effect-summary > div {
    padding: 7px 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(224, 173, 69, 0.16) !important;
    background: rgba(224, 173, 69, 0.055) !important;
}

.inventory-effect-summary span {
    display: block !important;
    color: rgba(247, 243, 232, 0.50) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    margin-bottom: 2px !important;
}

.inventory-effect-summary strong {
    color: var(--ui-gold-2) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* 自身加成改成小条，不要一大块一大块 */
.inventory-stat-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.inventory-stat-row {
    padding: 7px 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(143, 240, 178, 0.18) !important;
    background: rgba(143, 240, 178, 0.055) !important;
}

.inventory-stat-row > div {
    display: grid !important;
    gap: 2px !important;
    margin: 0 !important;
}

.inventory-stat-row strong {
    color: #a7f3c0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.inventory-stat-row span {
    color: rgba(247, 243, 232, 0.52) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.inventory-stat-row p {
    display: none !important;
}

/* 长说明不要占太多 */
.inventory-tooltip-desc {
    display: grid !important;
    gap: 5px !important;
}

.inventory-tooltip-desc p {
    margin: 0 !important;
    color: rgba(247, 243, 232, 0.62) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

/* 来源信息压小 */
.inventory-slot-detail .mini-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

.inventory-slot-detail .mini-stats span {
    padding: 4px 7px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
}

/* 操作按钮压到底部 */
.inventory-slot-actions {
    display: grid !important;
    gap: 7px !important;
    padding-top: 7px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.compact-use-row {
    display: grid !important;
    grid-template-columns: 64px 1fr 1fr !important;
    gap: 6px !important;
}

.compact-use-row input,
.compact-discard-form input {
    min-height: 32px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

.compact-use-row button,
.compact-discard-form button,
.inventory-slot-actions > button {
    min-height: 32px !important;
    border-radius: 10px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
}

.compact-discard-form {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 6px !important;
}

/* 手机不要默认展开 */
@media (max-width: 640px) {
    .inventory-slot-detail {
        left: 0 !important;
        top: calc(100% + 8px) !important;
        width: min(310px, calc(100vw - 28px)) !important;
        max-width: min(310px, calc(100vw - 28px)) !important;
        max-height: 380px !important;
        transform: none !important;
        position: absolute !important;
        display: none !important;
    }

    .inventory-slot:hover > .inventory-slot-detail,
    .inventory-slot:focus-within > .inventory-slot-detail {
        display: grid !important;
    }

    .inventory-stat-list {
        grid-template-columns: 1fr !important;
    }
}

/* =========================
   背包 tooltip 鼠标移动修复
   解决：鼠标从物品移动到 tooltip 时，中途经过空隙导致 tooltip 消失
   ========================= */

.inventory-slot {
    position: relative !important;
    overflow: visible !important;
}

/* 做一个透明桥，连接物品格子和 tooltip */
.inventory-slot::after {
    content: "";
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 340px;
    height: 18px;
    z-index: 99998;
    background: transparent;
    pointer-events: auto;
}

.inventory-slot:hover::after,
.inventory-slot:focus-within::after {
    display: block;
}

/* tooltip 不要离物品太远 */
.inventory-slot-detail {
    top: calc(100% + 2px) !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;

    width: 320px !important;
    max-width: 320px !important;
    max-height: 430px !important;
    overflow-y: auto !important;

    z-index: 99999 !important;
    pointer-events: auto !important;
}

/* 鼠标进入 tooltip 后，也继续保持显示 */
.inventory-slot:hover > .inventory-slot-detail,
.inventory-slot:focus-within > .inventory-slot-detail,
.inventory-slot-detail:hover {
    display: grid !important;
}

/* tooltip 滚动条稍微美化 */
.inventory-slot-detail::-webkit-scrollbar {
    width: 8px;
}

.inventory-slot-detail::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

.inventory-slot-detail::-webkit-scrollbar-thumb {
    background: rgba(224, 173, 69, 0.55);
    border-radius: 999px;
}

.inventory-slot-detail::-webkit-scrollbar-thumb:hover {
    background: rgba(224, 173, 69, 0.78);
}

/* =========================
   自身数据系统 v1
   ========================= */

.self-stats-page {
    width: min(100%, 1280px);
}

.self-stats-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: center;
    border-color: rgba(143, 240, 178, 0.24);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(224, 173, 69, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82);
}

.self-stats-hero h2 {
    margin: 14px 0 10px;
    color: var(--ui-text);
    font-size: clamp(42px, 6vw, 74px);
    line-height: 1.02;
    letter-spacing: -0.06em;
}

.self-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.self-status-item {
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.085);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(10, 14, 29, 0.72);
}

.self-status-item.life {
    border-color: rgba(255, 114, 114, 0.22);
}

.self-status-item.spirit {
    border-color: rgba(110, 231, 255, 0.22);
}

.self-status-item.stamina {
    border-color: rgba(143, 240, 178, 0.22);
}

.self-status-item.focus {
    border-color: rgba(224, 173, 69, 0.22);
}

.self-status-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.self-status-head strong {
    color: var(--ui-text);
    font-size: 18px;
}

.self-status-head span {
    color: var(--ui-gold-2);
    font-size: 13px;
    font-weight: 900;
}

.self-stat-bar {
    position: relative;
    height: 13px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.26);
}

.self-stat-fill {
    height: 100%;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(143, 240, 178, 0.95), rgba(224, 173, 69, 0.92));
}

.self-status-item p {
    margin: 10px 0 0;
    color: rgba(247, 243, 232, 0.62);
    font-size: 13px;
    line-height: 1.6;
}

.self-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.self-stat-box {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(143, 240, 178, 0.16);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.08), transparent 34%),
        rgba(255,255,255,0.035);
}

.self-stat-box span {
    display: block;
    color: rgba(247, 243, 232, 0.58);
    font-size: 12px;
    font-weight: 900;
}

.self-stat-box strong {
    display: block;
    margin: 7px 0;
    color: #a7f3c0;
    font-size: 30px;
    line-height: 1;
}

.self-stat-box small {
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 850;
}

.self-source-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1000px) {
    .self-stats-hero,
    .self-status-grid,
    .self-stat-grid,
    .self-source-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   自身数据：疗伤恢复卡片
   ========================= */

.self-recovery-card {
    border-color: rgba(143, 240, 178, 0.22);
    background:
        radial-gradient(circle at top right, rgba(143, 240, 178, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.78);
}

.self-recovery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.self-recovery-option {
    display: grid;
    gap: 14px;
    align-content: space-between;
    padding: 15px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.085);
    background: rgba(255,255,255,0.035);
}

.self-recovery-option strong {
    color: var(--ui-text);
    font-size: 17px;
}

.self-recovery-option p {
    margin: 8px 0 0;
    color: rgba(247, 243, 232, 0.62);
    line-height: 1.6;
    font-size: 13px;
}

.self-recovery-option form {
    margin: 0;
}

.self-recovery-option button {
    width: 100%;
}

.self-recovery-missing {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.self-recovery-missing span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background: rgba(224, 173, 69, 0.07);
}

.warning-text {
    color: #facc15 !important;
}

.danger-text {
    color: #ff7272 !important;
}

@media (max-width: 900px) {
    .self-recovery-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   首页修行控制台：打坐调息面板
   ========================= */

.home-recovery-panel {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 20px 22px;
    border-radius: 26px;
    border: 1px solid rgba(113, 232, 198, 0.24);
    background:
        radial-gradient(circle at 88% 40%, rgba(113, 232, 198, 0.12), transparent 30%),
        radial-gradient(circle at 12% 100%, rgba(224, 173, 69, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.048), rgba(255,255,255,0.018)),
        rgba(10, 14, 29, 0.86);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 22px;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}

.home-recovery-panel::before {
    content: "";
    position: absolute;
    left: 22px;
    bottom: 0;
    width: 160px;
    height: 1px;
    background: linear-gradient(90deg, rgba(224,173,69,0.88), transparent);
}

.home-recovery-panel.warning {
    border-color: rgba(250, 204, 21, 0.32);
    background:
        radial-gradient(circle at 88% 40%, rgba(250, 204, 21, 0.12), transparent 30%),
        radial-gradient(circle at 12% 100%, rgba(224, 173, 69, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.048), rgba(255,255,255,0.018)),
        rgba(10, 14, 29, 0.86);
}

.home-recovery-panel.critical {
    border-color: rgba(255, 114, 114, 0.35);
    background:
        radial-gradient(circle at 88% 40%, rgba(255, 114, 114, 0.14), transparent 30%),
        radial-gradient(circle at 12% 100%, rgba(224, 173, 69, 0.09), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.048), rgba(255,255,255,0.018)),
        rgba(10, 14, 29, 0.86);
}

.home-recovery-aura {
    position: absolute;
    inset: -80px auto auto -80px;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(113,232,198,0.12), transparent 64%);
    pointer-events: none;
}

.home-recovery-main {
    position: relative;
    z-index: 1;
}

.home-recovery-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.home-recovery-pill,
.home-recovery-state {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
}

.home-recovery-pill {
    color: var(--ui-gold-2);
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.09);
}

.home-recovery-state.normal {
    color: #93f7d5;
    border: 1px solid rgba(113, 232, 198, 0.22);
    background: rgba(113, 232, 198, 0.08);
}

.home-recovery-state.warning {
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.22);
    background: rgba(250, 204, 21, 0.08);
}

.home-recovery-state.critical {
    color: #ff8e8e;
    border: 1px solid rgba(255, 114, 114, 0.22);
    background: rgba(255, 114, 114, 0.08);
}

.home-recovery-main h3 {
    margin: 10px 0 8px;
    color: var(--ui-text);
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.home-recovery-main p {
    margin: 0;
    max-width: 760px;
    color: rgba(247, 243, 232, 0.68);
    font-size: 14px;
    line-height: 1.7;
}

.home-recovery-stat-grid {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.home-recovery-stat {
    min-height: 54px;
    padding: 9px 11px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.085);
    background: rgba(255,255,255,0.035);
    display: grid;
    gap: 4px;
}

.home-recovery-stat span {
    color: rgba(247, 243, 232, 0.58);
    font-size: 12px;
    font-weight: 850;
}

.home-recovery-stat strong {
    color: var(--ui-gold-2);
    font-size: 14px;
    font-weight: 950;
}

.home-recovery-side {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: stretch;
    gap: 10px;
}

.home-recovery-orb {
    justify-self: center;
    width: 72px;
    height: 72px;
    position: relative;
    display: grid;
    place-items: center;
}

.home-recovery-ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid rgba(113,232,198,0.42);
    box-shadow: 0 0 24px rgba(113,232,198,0.15);
}

.home-recovery-core {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 35%, #fff9c7, #e0ad45 48%, rgba(224,173,69,0.20) 72%);
    box-shadow: 0 0 28px rgba(224,173,69,0.38);
}

.home-recovery-form {
    margin: 0;
}

.home-recovery-form button,
.home-recovery-link {
    width: 100%;
    min-height: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 950;
}

.home-recovery-form button {
    border: 0;
    color: #1a1a1a;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    box-shadow: 0 8px 24px rgba(224, 173, 69, 0.23);
    cursor: pointer;
}

.home-recovery-link {
    color: var(--ui-text);
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.04);
}

.home-recovery-link:hover {
    color: var(--ui-gold-2);
    border-color: rgba(224,173,69,0.24);
}

@media (max-width: 1100px) {
    .home-recovery-panel {
        grid-template-columns: 1fr;
    }

    .home-recovery-side {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .home-recovery-orb {
        display: none;
    }
}

@media (max-width: 700px) {
    .home-recovery-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-recovery-side {
        grid-template-columns: 1fr;
    }

    .home-recovery-main h3 {
        font-size: 24px;
    }
}

/* =========================
   首页行动卡：根据生命状态显示风险
   ========================= */

.command-card.warning-state {
    border-color: rgba(250, 204, 21, 0.32) !important;
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.10), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.82) !important;
}

.command-card.danger-state {
    border-color: rgba(255, 114, 114, 0.34) !important;
    background:
        radial-gradient(circle at top right, rgba(255, 114, 114, 0.13), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(12, 15, 29, 0.84) !important;
}

.command-card.warning-state .command-tag,
.command-card.warning-state .command-mini-stats span {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.22);
    background: rgba(250, 204, 21, 0.08);
}

.command-card.danger-state .command-tag,
.command-card.danger-state .command-mini-stats span {
    color: #ff8e8e;
    border-color: rgba(255, 114, 114, 0.22);
    background: rgba(255, 114, 114, 0.08);
}

.warning-confirm-action {
    background: linear-gradient(135deg, #facc15, #d9a846) !important;
    color: #191919 !important;
}

.danger-confirm-action {
    background: linear-gradient(135deg, #ff7272, #f59e0b) !important;
    color: #191919 !important;
    box-shadow: 0 10px 28px rgba(255, 114, 114, 0.25) !important;
}

.danger-confirm-action:hover,
.warning-confirm-action:hover {
    transform: translateY(-1px);
}

/* =========================
   Mobile-1: 手游底部主导航
   ========================= */

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 860px) {
    .page {
        padding-bottom: 96px;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 9999;

        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px;

        padding: 8px;
        border-radius: 24px;
        border: 1px solid rgba(224, 173, 69, 0.28);
        background:
            linear-gradient(135deg, rgba(10, 16, 34, 0.94), rgba(11, 24, 42, 0.94)),
            rgba(8, 12, 26, 0.96);
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.48),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
    }

    .mobile-bottom-nav-item {
        min-width: 0;
        min-height: 58px;
        padding: 6px 3px;

        display: grid;
        place-items: center;
        align-content: center;
        gap: 3px;

        color: rgba(247, 243, 232, 0.62);
        text-decoration: none;
        border-radius: 18px;
        border: 1px solid transparent;
        transition: 0.18s ease;
    }

    .mobile-bottom-nav-item strong {
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
    }

    .mobile-nav-icon {
        width: 28px;
        height: 28px;

        display: grid;
        place-items: center;

        border-radius: 12px;
        color: rgba(247, 243, 232, 0.72);
        background: rgba(255, 255, 255, 0.055);
        font-size: 14px;
        font-weight: 950;
    }

    .mobile-bottom-nav-item.active {
        color: #f7f3e8;
        border-color: rgba(224, 173, 69, 0.32);
        background:
            radial-gradient(circle at top, rgba(224, 173, 69, 0.18), transparent 60%),
            rgba(224, 173, 69, 0.08);
    }

    .mobile-bottom-nav-item.active .mobile-nav-icon {
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        box-shadow: 0 8px 18px rgba(224, 173, 69, 0.22);
    }

    .mobile-bottom-nav-item:active {
        transform: scale(0.96);
    }
}

@media (max-width: 420px) {
    .mobile-bottom-nav {
        left: 6px;
        right: 6px;
        bottom: 6px;
        gap: 4px;
        padding: 6px;
        border-radius: 22px;
    }

    .mobile-bottom-nav-item {
        min-height: 54px;
        border-radius: 16px;
    }

    .mobile-nav-icon {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .mobile-bottom-nav-item strong {
        font-size: 10px;
    }
}

@media (max-width: 420px) {
    .mobile-bottom-nav {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .mobile-bottom-nav-item strong {
        font-size: 9px;
    }

    .mobile-nav-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}

/* =========================
   Mobile-1B: 首页手游 Dashboard
   ========================= */

.mobile-home-dashboard-v1 {
    display: none;
}

@media (max-width: 860px) {
    .mobile-home-dashboard-v1 {
        display: grid;
        gap: 14px;
        width: min(100%, calc(100vw - 22px));
        margin: 14px auto 18px;
    }

    .mobile-home-hero-card,
    .mobile-home-recommend-card,
    .mobile-home-action-card {
        border: 1px solid rgba(224, 173, 69, 0.22);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 34%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
        border-radius: 24px;
        padding: 16px;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
    }

    .mobile-home-identity {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
    }

    .mobile-home-kicker,
    .mobile-home-section-title span {
        display: block;
        color: #f0d06a;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.08em;
    }

    .mobile-home-identity h2 {
        margin: 4px 0 6px;
        color: #f7f3e8;
        font-size: 30px;
        line-height: 1.05;
        letter-spacing: -0.04em;
    }

    .mobile-home-identity p {
        margin: 0;
        color: rgba(247, 243, 232, 0.66);
        font-size: 13px;
        line-height: 1.6;
    }

    .mobile-home-profile-link {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;
    }

    .mobile-home-core-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 14px;
    }

    .mobile-home-core-box {
        padding: 12px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(8, 12, 26, 0.36);
    }

    .mobile-home-core-box span {
        display: block;
        color: rgba(247, 243, 232, 0.52);
        font-size: 11px;
        margin-bottom: 5px;
    }

    .mobile-home-core-box strong {
        color: #f7f3e8;
        font-size: 16px;
        line-height: 1.15;
    }

    .mobile-home-bars {
        display: grid;
        gap: 10px;
        margin-top: 14px;
    }

    .mobile-home-bar-item > div:first-child {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 6px;
        color: rgba(247, 243, 232, 0.68);
        font-size: 12px;
    }

    .mobile-home-bar-item strong {
        color: #f7f3e8;
        font-size: 12px;
    }

    .mobile-home-bar {
        height: 8px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
    }

    .mobile-home-bar i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, rgba(240, 208, 106, 0.95), rgba(113, 232, 198, 0.9));
    }

    .mobile-home-bar-item.life .mobile-home-bar i {
        background: linear-gradient(90deg, #ef4444, #f97316);
    }

    .mobile-home-bar-item.spirit .mobile-home-bar i {
        background: linear-gradient(90deg, #38bdf8, #818cf8);
    }

    .mobile-home-bar-item.stamina .mobile-home-bar i {
        background: linear-gradient(90deg, #22c55e, #a3e635);
    }

    .mobile-home-bar-item.focus .mobile-home-bar i {
        background: linear-gradient(90deg, #c084fc, #f0abfc);
    }

    .mobile-home-section-title {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        margin-bottom: 12px;
    }

    .mobile-home-section-title h3 {
        margin: 3px 0 0;
        color: #f7f3e8;
        font-size: 18px;
    }

    .mobile-home-section-title a {
        color: #f0d06a;
        font-size: 12px;
        text-decoration: none;
        font-weight: 900;
    }

    .mobile-home-recommend-list {
        display: grid;
        gap: 8px;
    }

    .mobile-home-recommend-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;

        padding: 12px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
        color: #f7f3e8;
        text-decoration: none;
    }

    .mobile-home-recommend-item strong {
        display: block;
        margin-bottom: 4px;
        font-size: 14px;
    }

    .mobile-home-recommend-item p {
        margin: 0;
        color: rgba(247, 243, 232, 0.62);
        font-size: 12px;
        line-height: 1.5;
    }

    .mobile-home-recommend-item > span {
        min-height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        color: #171717;
        background: #f0d06a;
        font-size: 11px;
        font-weight: 950;
        white-space: nowrap;
    }

    .mobile-home-recommend-item.danger {
        border-color: rgba(239, 68, 68, 0.34);
        background: rgba(239, 68, 68, 0.08);
    }

    .mobile-home-recommend-item.warning {
        border-color: rgba(250, 204, 21, 0.28);
        background: rgba(250, 204, 21, 0.07);
    }

    .mobile-home-recommend-item.good {
        border-color: rgba(34, 197, 94, 0.28);
        background: rgba(34, 197, 94, 0.07);
    }

    .mobile-home-action-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-home-action-grid form {
        margin: 0;
    }

    .mobile-home-action-grid button,
    .mobile-home-action-grid a {
        width: 100%;
        min-height: 72px;
        padding: 10px 6px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.055);
        color: #f7f3e8;
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;

        display: grid;
        place-items: center;
        align-content: center;
        gap: 6px;
    }

    .mobile-home-action-grid button {
        font-family: inherit;
        cursor: pointer;
    }

    .mobile-home-action-grid span {
        width: 30px;
        height: 30px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 14px;
        font-weight: 950;
    }

    .mobile-home-action-grid .danger span {
        color: #fff;
        background: linear-gradient(135deg, #ef4444, #f97316);
    }

    .mobile-home-action-grid button:active,
    .mobile-home-action-grid a:active {
        transform: scale(0.96);
    }
}

@media (max-width: 420px) {
    .mobile-home-identity h2 {
        font-size: 26px;
    }

    .mobile-home-core-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .mobile-home-recommend-item {
        grid-template-columns: 1fr;
    }

    .mobile-home-recommend-item > span {
        width: fit-content;
    }
}

/* =========================
   Mobile-1C: 首页旧入口收纳
   ========================= */

.mobile-more-systems-v1 {
    display: none;
}

@media (max-width: 860px) {
    .mobile-more-systems-v1 {
        display: block;
        width: min(100%, calc(100vw - 22px));
        margin: 0 auto 18px;
    }

    .mobile-system-drawer {
        border: 1px solid rgba(224, 173, 69, 0.22);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 36%),
            linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
        border-radius: 24px;
        padding: 14px;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
    }

    .mobile-system-drawer summary {
        list-style: none;
        cursor: pointer;

        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .mobile-system-drawer summary::-webkit-details-marker {
        display: none;
    }

    .mobile-system-drawer summary span {
        display: block;
        color: #f0d06a;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.08em;
    }

    .mobile-system-drawer summary strong {
        display: block;
        margin-top: 4px;
        color: #f7f3e8;
        font-size: 18px;
    }

    .mobile-system-drawer summary i {
        width: 36px;
        height: 36px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-style: normal;
        font-weight: 950;
        transition: 0.18s ease;
    }

    .mobile-system-drawer[open] summary i {
        transform: rotate(45deg);
    }

    .mobile-system-group {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    .mobile-system-group h3 {
        margin: 0 0 10px;
        color: rgba(247,243,232,0.88);
        font-size: 14px;
    }

    .mobile-system-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-system-grid a {
        min-height: 48px;
        padding: 8px 6px;
        border-radius: 15px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.045);

        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;

        color: rgba(247,243,232,0.82);
        text-decoration: none;
        font-size: 12px;
        font-weight: 900;
        line-height: 1.25;
    }

    .mobile-system-grid a:active {
        transform: scale(0.96);
    }

    /*
       手机端隐藏旧首页的大入口区。
       不删除 HTML，桌面版仍保留。
    */
    body:has(.mobile-home-dashboard-v1) .game-dashboard .action-panel,
    body:has(.mobile-home-dashboard-v1) .game-dashboard .world-shortcuts {
        display: none;
    }

    /*
       角色卡已经由 Mobile Dashboard 承担，手机端降低重复感。
       如果你想保留旧角色卡，把下面这一段删掉即可。
    */
    body:has(.mobile-home-dashboard-v1) .dashboard-left .character-profile-panel {
        display: none;
    }

    /*
       手机端让旧 dashboard 只保留历史、发现、传说等内容。
    */
    body:has(.mobile-home-dashboard-v1) .game-dashboard {
        display: block;
        width: min(100%, calc(100vw - 22px));
        margin: 0 auto 120px;
    }

    body:has(.mobile-home-dashboard-v1) .dashboard-left,
    body:has(.mobile-home-dashboard-v1) .dashboard-center,
    body:has(.mobile-home-dashboard-v1) .dashboard-right {
        display: block;
        width: 100%;
    }

    body:has(.mobile-home-dashboard-v1) .game-dashboard .card {
        margin-bottom: 14px;
    }
}

@media (max-width: 420px) {
    .mobile-system-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-system-grid a {
        min-height: 46px;
        font-size: 12px;
    }
}

/* =========================
   Mobile-1D: 首页世界动态事件流
   ========================= */

.mobile-world-feed-v1 {
    display: none;
}

@media (max-width: 860px) {
    .mobile-world-feed-v1 {
        display: block;
        width: min(100%, calc(100vw - 22px));
        margin: 0 auto 120px;
        border: 1px solid rgba(224, 173, 69, 0.22);
        background:
            radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 34%),
            linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
        border-radius: 24px;
        padding: 16px;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
    }

    .mobile-feed-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .mobile-feed-head span {
        display: block;
        color: #f0d06a;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.08em;
    }

    .mobile-feed-head h3 {
        margin: 3px 0 0;
        color: #f7f3e8;
        font-size: 20px;
    }

    .mobile-feed-head a {
        color: #f0d06a;
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;
        white-space: nowrap;
    }

    .mobile-feed-tabs {
        display: grid;
        gap: 10px;
    }

    .mobile-feed-group {
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.035);
        overflow: hidden;
    }

    .mobile-feed-group summary {
        list-style: none;
        cursor: pointer;
        min-height: 50px;
        padding: 0 12px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 10px;
    }

    .mobile-feed-group summary::-webkit-details-marker {
        display: none;
    }

    .mobile-feed-group summary strong {
        color: #f7f3e8;
        font-size: 14px;
    }

    .mobile-feed-group summary small {
        min-width: 28px;
        height: 24px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        color: #171717;
        background: #f0d06a;
        font-size: 11px;
        font-weight: 950;
    }

    .feed-dot {
        width: 12px;
        height: 12px;
        border-radius: 999px;
        display: inline-block;
        box-shadow: 0 0 18px currentColor;
    }

    .feed-dot.discovery {
        color: #22c55e;
        background: #22c55e;
    }

    .feed-dot.legend {
        color: #f0d06a;
        background: #f0d06a;
    }

    .feed-dot.history {
        color: #38bdf8;
        background: #38bdf8;
    }

    .mobile-feed-list {
        display: grid;
        gap: 8px;
        padding: 0 10px 10px;
    }

    .mobile-feed-item {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
        align-items: start;

        padding: 11px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(8, 12, 26, 0.38);
        color: #f7f3e8;
        text-decoration: none;
    }

    .mobile-feed-item.discovery {
        border-left: 3px solid rgba(34, 197, 94, 0.8);
    }

    .mobile-feed-item.legend {
        border-left: 3px solid rgba(240, 208, 106, 0.9);
    }

    .mobile-feed-item.history {
        border-left: 3px solid rgba(56, 189, 248, 0.9);
    }

    .mobile-feed-item.importance-5,
    .mobile-feed-item.importance-4 {
        background:
            radial-gradient(circle at top right, rgba(240, 208, 106, 0.11), transparent 38%),
            rgba(8, 12, 26, 0.42);
    }

    .feed-year {
        color: #f0d06a;
        font-size: 11px;
        font-weight: 950;
        line-height: 1.4;
    }

    .mobile-feed-item strong {
        display: block;
        color: #f7f3e8;
        font-size: 13px;
        line-height: 1.35;
        margin-bottom: 4px;
    }

    .mobile-feed-item p {
        margin: 0;
        color: rgba(247,243,232,0.62);
        font-size: 12px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-feed-empty {
        margin: 0;
        padding: 12px;
        border-radius: 15px;
        background: rgba(255,255,255,0.035);
        color: rgba(247,243,232,0.62);
        font-size: 12px;
        line-height: 1.6;
    }

    .mobile-feed-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
    }

    .mobile-feed-actions a {
        min-height: 42px;
        padding: 8px 4px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.045);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(247,243,232,0.82);
        text-decoration: none;
        font-size: 12px;
        font-weight: 900;
    }

    /*
       手机端隐藏旧世界情报块，避免和新事件流重复。
       旧内容不删除，桌面版仍保留。
    */
    body:has(.mobile-world-feed-v1) .world-intel-list,
    body:has(.mobile-world-feed-v1) .dashboard-right .history-card,
    body:has(.mobile-world-feed-v1) .dashboard-right .legends-card {
        display: none;
    }

    /*
       如果旧的最近发现不是 world-intel-list 包起来，也一并降低重复。
    */
    body:has(.mobile-world-feed-v1) .dashboard-right > section.card:not(.world-shortcuts):not(.world-menu-card):not(.world-hub-card) {
        display: none;
    }
}

@media (max-width: 420px) {
    .mobile-feed-item {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .mobile-feed-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================
   Mobile-1E: 修炼中枢
   ========================= */

.mobile-cultivation-hub-v1 {
    display: none;
}

@media (max-width: 860px) {
    .mobile-cultivation-hub-v1 {
        display: grid;
        gap: 12px;
        width: min(100%, calc(100vw - 22px));
        margin: 12px auto 16px;
    }

    .mobile-cultivation-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;

        padding: 18px;
        border-radius: 24px;
        border: 1px solid rgba(224, 173, 69, 0.24);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.14), transparent 34%),
            linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
        box-shadow: 0 18px 48px rgba(0,0,0,0.26);
    }

    .mobile-cultivation-kicker {
        display: block;
        color: #f0d06a;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.08em;
        margin-bottom: 5px;
    }

    .mobile-cultivation-hero h2 {
        margin: 0;
        color: #f7f3e8;
        font-size: 30px;
        line-height: 1.05;
        letter-spacing: -0.04em;
    }

    .mobile-cultivation-hero p {
        margin: 7px 0 0;
        color: rgba(247,243,232,0.64);
        font-size: 13px;
        line-height: 1.55;
    }

    .mobile-cultivation-home {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;
    }

    .mobile-cultivation-tabs {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;

        padding: 8px;
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(8, 12, 26, 0.44);
    }

    .mobile-cultivation-tabs a {
        min-height: 58px;
        padding: 6px 3px;
        border-radius: 16px;

        display: grid;
        place-items: center;
        align-content: center;
        gap: 4px;

        color: rgba(247,243,232,0.62);
        text-decoration: none;
        font-size: 11px;
        font-weight: 950;
        border: 1px solid transparent;
    }

    .mobile-cultivation-tabs a span {
        width: 27px;
        height: 27px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        color: rgba(247,243,232,0.72);
        background: rgba(255,255,255,0.055);
        font-size: 13px;
    }

    .mobile-cultivation-tabs a.active {
        color: #f7f3e8;
        border-color: rgba(224, 173, 69, 0.32);
        background: rgba(224, 173, 69, 0.08);
    }

    .mobile-cultivation-tabs a.active span {
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
    }

    .mobile-cultivation-status-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-cultivation-status-card {
        padding: 13px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background:
            radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 40%),
            rgba(255,255,255,0.04);
    }

    .mobile-cultivation-status-card.life {
        background:
            radial-gradient(circle at top right, rgba(239, 68, 68, 0.10), transparent 40%),
            rgba(255,255,255,0.04);
    }

    .mobile-cultivation-status-card.good {
        background:
            radial-gradient(circle at top right, rgba(34, 197, 94, 0.10), transparent 40%),
            rgba(255,255,255,0.04);
    }

    .mobile-cultivation-status-card span {
        display: block;
        color: rgba(247,243,232,0.52);
        font-size: 11px;
        margin-bottom: 5px;
    }

    .mobile-cultivation-status-card strong {
        display: block;
        color: #f7f3e8;
        font-size: 16px;
        line-height: 1.2;
    }

    .mobile-cultivation-status-card small {
        display: block;
        margin-top: 6px;
        color: rgba(247,243,232,0.45);
        font-size: 10px;
        line-height: 1.35;
    }

    .mobile-cultivation-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-cultivation-actions form {
        margin: 0;
    }

    .mobile-cultivation-actions button,
    .mobile-cultivation-actions a {
        width: 100%;
        min-height: 68px;
        padding: 8px 4px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.055);
        color: #f7f3e8;
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;
        font-family: inherit;

        display: grid;
        place-items: center;
        align-content: center;
        gap: 6px;
    }

    .mobile-cultivation-actions button {
        cursor: pointer;
    }

    .mobile-cultivation-actions span {
        width: 30px;
        height: 30px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 14px;
        font-weight: 950;
    }

    .mobile-cultivation-actions button:active,
    .mobile-cultivation-actions a:active {
        transform: scale(0.96);
    }

    /*
       手机端收纳旧的大型说明区，保留核心操作区。
       桌面版不受影响。
    */
    .offline-cultivation-page .offline-rule-card,
    .offline-cultivation-page .offline-log-card,
    .method-mastery-page .method-stage-card,
    .method-mastery-page .method-bonus-card,
    .self-stats-page .self-base-card,
    .self-stats-page .self-item-log-card {
        display: none;
    }
}

@media (max-width: 430px) {
    .mobile-cultivation-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mobile-cultivation-status-grid {
        grid-template-columns: 1fr;
    }

    .mobile-cultivation-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================
   Mobile-1F: 战斗中枢
   ========================= */

.mobile-battle-hub-v1 {
    display: none;
}

@media (max-width: 860px) {
    .mobile-battle-hub-v1 {
        display: grid;
        gap: 12px;
        width: min(100%, calc(100vw - 22px));
        margin: 12px auto 18px;
    }

    .mobile-battle-hero,
    .mobile-battle-risk-card,
    .mobile-battle-actions-card,
    .mobile-battle-recent-card {
        border: 1px solid rgba(224, 173, 69, 0.22);
        background:
            radial-gradient(circle at top right, rgba(239, 68, 68, 0.10), transparent 34%),
            linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
        border-radius: 24px;
        padding: 16px;
        box-shadow: 0 18px 48px rgba(0,0,0,0.26);
    }

    .mobile-battle-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        overflow: hidden;
        position: relative;
    }

    .mobile-battle-hero::after {
        content: "战";
        position: absolute;
        right: 18px;
        bottom: -24px;
        font-size: 96px;
        line-height: 1;
        font-weight: 950;
        color: rgba(240, 208, 106, 0.08);
        pointer-events: none;
    }

    .mobile-battle-kicker,
    .mobile-battle-section-title span,
    .mobile-battle-risk-head span {
        display: block;
        color: #f0d06a;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.08em;
    }

    .mobile-battle-hero h2 {
        margin: 4px 0 6px;
        color: #f7f3e8;
        font-size: 32px;
        line-height: 1.05;
        letter-spacing: -0.04em;
    }

    .mobile-battle-hero p {
        margin: 0;
        color: rgba(247,243,232,0.64);
        font-size: 13px;
        line-height: 1.55;
    }

    .mobile-battle-power {
        flex: 0 0 auto;
        min-width: 92px;
        padding: 12px;
        border-radius: 20px;
        border: 1px solid rgba(224, 173, 69, 0.24);
        background: rgba(224, 173, 69, 0.08);
        text-align: center;
        position: relative;
        z-index: 1;
    }

    .mobile-battle-power span {
        display: block;
        color: rgba(247,243,232,0.62);
        font-size: 11px;
        margin-bottom: 4px;
    }

    .mobile-battle-power strong {
        color: #f0d06a;
        font-size: 24px;
        line-height: 1;
    }

    .mobile-battle-stat-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-battle-stat-grid article {
        padding: 13px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.045);
    }

    .mobile-battle-stat-grid span {
        display: block;
        color: rgba(247,243,232,0.52);
        font-size: 11px;
        margin-bottom: 5px;
    }

    .mobile-battle-stat-grid strong {
        display: block;
        color: #f7f3e8;
        font-size: 18px;
        line-height: 1.15;
    }

    .mobile-battle-risk-card.safe {
        border-color: rgba(34, 197, 94, 0.24);
        background:
            radial-gradient(circle at top right, rgba(34, 197, 94, 0.10), transparent 34%),
            linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
    }

    .mobile-battle-risk-card.warning {
        border-color: rgba(250, 204, 21, 0.30);
        background:
            radial-gradient(circle at top right, rgba(250, 204, 21, 0.12), transparent 34%),
            linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
    }

    .mobile-battle-risk-card.danger {
        border-color: rgba(239, 68, 68, 0.34);
        background:
            radial-gradient(circle at top right, rgba(239, 68, 68, 0.16), transparent 34%),
            linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
    }

    .mobile-battle-risk-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 10px;
    }

    .mobile-battle-risk-head strong {
        display: block;
        margin-top: 4px;
        color: #f7f3e8;
        font-size: 20px;
    }

    .mobile-battle-risk-head a {
        min-height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;
    }

    .mobile-battle-life-row {
        display: flex;
        justify-content: space-between;
        color: rgba(247,243,232,0.72);
        font-size: 12px;
        margin-bottom: 7px;
    }

    .mobile-battle-life-bar {
        height: 9px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255,255,255,0.08);
    }

    .mobile-battle-life-bar i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #ef4444, #f97316);
    }

    .mobile-battle-risk-card.safe .mobile-battle-life-bar i {
        background: linear-gradient(90deg, #22c55e, #a3e635);
    }

    .mobile-battle-risk-card.warning .mobile-battle-life-bar i {
        background: linear-gradient(90deg, #facc15, #f97316);
    }

    .mobile-battle-risk-card p {
        margin: 10px 0 0;
        color: rgba(247,243,232,0.64);
        font-size: 12px;
        line-height: 1.65;
    }

    .mobile-battle-section-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .mobile-battle-section-title h3 {
        margin: 3px 0 0;
        color: #f7f3e8;
        font-size: 18px;
    }

    .mobile-battle-section-title a {
        color: #f0d06a;
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;
        white-space: nowrap;
    }

    .mobile-battle-action-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-battle-action-grid form {
        margin: 0;
    }

    .mobile-battle-action-grid button,
    .mobile-battle-action-grid a {
        width: 100%;
        min-height: 90px;
        padding: 10px 7px;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.055);
        color: #f7f3e8;
        text-decoration: none;
        font-size: 13px;
        font-weight: 950;
        font-family: inherit;

        display: grid;
        place-items: center;
        align-content: center;
        gap: 6px;
    }

    .mobile-battle-action-grid button {
        cursor: pointer;
    }

    .mobile-battle-action-grid span {
        width: 34px;
        height: 34px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 15px;
        font-weight: 950;
    }

    .mobile-battle-action-grid small {
        color: rgba(247,243,232,0.52);
        font-size: 11px;
        font-weight: 700;
    }

    .mobile-battle-action-grid .danger span {
        color: #fff;
        background: linear-gradient(135deg, #ef4444, #f97316);
    }

    .mobile-battle-action-grid .duel span {
        color: #fff;
        background: linear-gradient(135deg, #6366f1, #a855f7);
    }

    .mobile-battle-action-grid button:active,
    .mobile-battle-action-grid a:active {
        transform: scale(0.96);
    }

    .mobile-battle-log-feed {
        display: grid;
        gap: 8px;
    }

    .mobile-battle-log-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;

        padding: 12px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(8, 12, 26, 0.38);
        color: #f7f3e8;
        text-decoration: none;
    }

    .mobile-battle-log-item strong {
        display: block;
        margin-bottom: 4px;
        color: #f7f3e8;
        font-size: 14px;
    }

    .mobile-battle-log-item p {
        margin: 0;
        color: rgba(247,243,232,0.62);
        font-size: 12px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-battle-log-item > span {
        min-height: 28px;
        padding: 0 9px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        color: #171717;
        background: #f0d06a;
        font-size: 11px;
        font-weight: 950;
        white-space: nowrap;
    }

    .mobile-battle-log-item.result-defeat {
        border-left: 3px solid rgba(239, 68, 68, 0.85);
    }

    .mobile-battle-log-item.result-victory,
    .mobile-battle-log-item.result-win {
        border-left: 3px solid rgba(34, 197, 94, 0.85);
    }

    /*
       手机端隐藏旧的大型战斗横幅、旧战力面板、旧行动区。
       桌面版保持原样。
    */
    .battle-visual-banner,
    .battle-hero-card,
    .battle-grid > .battle-card:first-child {
        display: none;
    }

    /*
       手机端保留旧的最近战斗 / 全服战斗记录，但让它们在中枢后面显示。
    */
    .battle-grid {
        display: block;
        width: min(100%, calc(100vw - 22px));
        margin: 0 auto 120px;
    }

    .battle-grid > .battle-card {
        margin-bottom: 14px;
    }
}

@media (max-width: 430px) {
    .mobile-battle-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-battle-action-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Mobile-1G: 背包手游中枢
   ========================= */

.mobile-inventory-hub-v1 {
    display: none;
}

@media (max-width: 860px) {
    .mobile-inventory-hub-v1 {
        display: grid;
        gap: 12px;
        width: min(100%, calc(100vw - 22px));
        margin: 12px auto 16px;
    }

    .mobile-inventory-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;

        padding: 18px;
        border-radius: 24px;
        border: 1px solid rgba(224, 173, 69, 0.24);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.14), transparent 34%),
            linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
        box-shadow: 0 18px 48px rgba(0,0,0,0.26);
        position: relative;
        overflow: hidden;
    }

    .mobile-inventory-hero::after {
        content: "包";
        position: absolute;
        right: 18px;
        bottom: -28px;
        font-size: 96px;
        line-height: 1;
        color: rgba(240, 208, 106, 0.08);
        font-weight: 950;
        pointer-events: none;
    }

    .mobile-inventory-kicker {
        display: block;
        color: #f0d06a;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.08em;
        margin-bottom: 5px;
    }

    .mobile-inventory-hero h2 {
        margin: 0;
        color: #f7f3e8;
        font-size: 30px;
        line-height: 1.05;
        letter-spacing: -0.04em;
    }

    .mobile-inventory-hero p {
        margin: 7px 0 0;
        color: rgba(247,243,232,0.64);
        font-size: 13px;
        line-height: 1.55;
    }

    .mobile-inventory-self {
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;
    }

    .mobile-inventory-status-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-inventory-status-grid article {
        padding: 13px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background:
            radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 40%),
            rgba(255,255,255,0.04);
    }

    .mobile-inventory-status-grid span {
        display: block;
        color: rgba(247,243,232,0.52);
        font-size: 11px;
        margin-bottom: 5px;
    }

    .mobile-inventory-status-grid strong {
        display: block;
        color: #f7f3e8;
        font-size: 18px;
        line-height: 1.15;
    }

    .mobile-inventory-status-grid small {
        display: block;
        margin-top: 6px;
        color: rgba(247,243,232,0.45);
        font-size: 10px;
        line-height: 1.35;
    }

    .mobile-inventory-category-tabs {
        position: sticky;
        top: 8px;
        z-index: 30;

        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;

        padding: 8px;
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(8, 12, 26, 0.86);
        backdrop-filter: blur(14px);
        box-shadow: 0 14px 36px rgba(0,0,0,0.28);
    }

    .mobile-inventory-category-tabs a {
        min-height: 58px;
        padding: 6px 2px;
        border-radius: 16px;
        border: 1px solid transparent;

        display: grid;
        place-items: center;
        align-content: center;
        gap: 4px;

        color: rgba(247,243,232,0.68);
        text-decoration: none;
        font-size: 11px;
        font-weight: 950;
    }

    .mobile-inventory-category-tabs span {
        width: 27px;
        height: 27px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 13px;
        font-weight: 950;
    }

    .mobile-inventory-category-tabs a:active {
        transform: scale(0.96);
    }

    .mobile-inventory-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-inventory-actions a {
        min-height: 68px;
        padding: 8px 4px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.055);
        color: #f7f3e8;
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;

        display: grid;
        place-items: center;
        align-content: center;
        gap: 6px;
    }

    .mobile-inventory-actions span {
        width: 30px;
        height: 30px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 14px;
        font-weight: 950;
    }

    .mobile-inventory-actions a:active {
        transform: scale(0.96);
    }

    /*
       手机端减少重复：新中枢已经显示总览和快捷操作。
       桌面版保持原样。
    */
    .inventory-page-v2 .inventory-hero-v2,
    .inventory-page-v2 .inventory-toolbar-v2,
    .inventory-page-v2 .inventory-type-card-v2 {
        display: none;
    }

    /*
       手机端保留累计加成，但让它更紧凑。
    */
    .inventory-page-v2 .inventory-bonus-panel {
        width: min(100%, calc(100vw - 22px));
        margin: 0 auto 14px;
    }

    .inventory-page-v2 .inventory-bonus-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .inventory-page-v2 .inventory-bonus-box {
        padding: 12px;
        border-radius: 16px;
    }

    /*
       手机端背包分类卡更像手游仓库格子。
    */
    .inventory-page-v2 .inventory-category-stack {
        width: min(100%, calc(100vw - 22px));
        margin: 0 auto 120px;
    }

    .inventory-page-v2 .inventory-category-card {
        scroll-margin-top: 96px;
        padding: 14px;
        border-radius: 24px;
        margin-bottom: 14px;
    }

    .inventory-page-v2 .inventory-category-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .inventory-page-v2 .inventory-category-title {
        min-width: 0;
    }

    .inventory-page-v2 .inventory-category-title h2 {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .inventory-page-v2 .inventory-category-title .muted {
        font-size: 12px;
        line-height: 1.5;
    }

    .inventory-page-v2 .inventory-category-stat {
        flex: 0 0 auto;
        min-width: 70px;
        padding: 10px;
        border-radius: 16px;
        background: rgba(255,255,255,0.045);
    }

    .inventory-page-v2 .inventory-slot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .inventory-page-v2 .inventory-slot {
        min-height: 118px;
        border-radius: 18px;
    }

    .inventory-page-v2 .inventory-slot-main {
        padding: 8px;
    }

    .inventory-page-v2 .slot-rarity {
        font-size: 10px;
    }

    .inventory-page-v2 .slot-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
        border-radius: 14px;
    }

    .inventory-page-v2 .slot-name {
        font-size: 12px;
        line-height: 1.25;
        min-height: 30px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .inventory-page-v2 .slot-effect-line {
        font-size: 10px;
        line-height: 1.25;
        min-height: 24px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .inventory-page-v2 .slot-qty {
        right: 7px;
        bottom: 7px;
        font-size: 11px;
    }

    /*
       手机端 hover 不稳定，所以详情改成点按/按住也能看到。
       :focus-within 让点击格子后详情浮层出现。
    */
    .inventory-page-v2 .inventory-slot:focus-within .inventory-slot-detail,
    .inventory-page-v2 .inventory-slot:hover .inventory-slot-detail {
        display: block;
    }

    .inventory-page-v2 .inventory-slot-detail {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 88px;
        top: auto;
        z-index: 10000;

        max-height: 55vh;
        overflow: auto;

        border-radius: 22px;
        padding: 14px;
        border: 1px solid rgba(224, 173, 69, 0.28);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 36%),
            linear-gradient(135deg, rgba(12, 18, 36, 0.98), rgba(10, 22, 38, 0.98));
        box-shadow: 0 24px 70px rgba(0,0,0,0.56);
    }

    .inventory-page-v2 .inventory-slot-actions {
        display: grid;
        gap: 8px;
    }

    .inventory-page-v2 .use-quantity-row,
    .inventory-page-v2 .compact-use-row {
        display: grid;
        grid-template-columns: 56px 1fr 1fr;
        gap: 8px;
    }

    .inventory-page-v2 .discard-form,
    .inventory-page-v2 .compact-discard-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .inventory-page-v2 .inventory-card:last-child {
        width: min(100%, calc(100vw - 22px));
        margin: 0 auto 120px;
    }
}

@media (max-width: 430px) {
    .mobile-inventory-status-grid {
        grid-template-columns: 1fr;
    }

    .mobile-inventory-category-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mobile-inventory-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-page-v2 .inventory-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================
   Mobile-1H: 宗门主城
   ========================= */

.sect-home-page-v1 {
    padding-bottom: 80px;
}

.sect-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 24px;
    align-items: center;
    overflow: hidden;
    position: relative;

    border: 1px solid rgba(224, 173, 69, 0.25);
    background:
        radial-gradient(circle at 84% 20%, rgba(224, 173, 69, 0.16), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(56, 189, 248, 0.10), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
}

.sect-home-hero h2 {
    margin: 8px 0 10px;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.sect-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.sect-home-actions .primary,
.sect-home-module.primary-module {
    border-color: rgba(224, 173, 69, 0.38);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.16), transparent 36%),
        rgba(224, 173, 69, 0.08);
}

.sect-home-emblem {
    min-height: 220px;
    display: grid;
    place-items: center;
    position: relative;
}

.sect-home-emblem-ring {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.20);
    box-shadow:
        0 0 40px rgba(224, 173, 69, 0.08),
        inset 0 0 40px rgba(224, 173, 69, 0.06);
}

.sect-home-emblem-core {
    width: 132px;
    height: 132px;
    border-radius: 44px;
    display: grid;
    place-items: center;

    color: rgba(23, 23, 23, 0.92);
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    font-size: 58px;
    font-weight: 950;
    box-shadow: 0 22px 55px rgba(224, 173, 69, 0.22);
    position: relative;
    z-index: 1;
}

.sect-home-emblem-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(224, 173, 69, 0.14), transparent 64%);
}

.sect-home-summary-card .second-summary {
    margin-top: 12px;
}

.sect-home-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.sect-home-module {
    min-height: 156px;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.10);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 36%),
        rgba(255,255,255,0.04);

    display: grid;
    align-content: space-between;
    gap: 12px;

    color: #f7f3e8;
    text-decoration: none;
    transition: 0.18s ease;
}

.sect-home-module:hover {
    transform: translateY(-2px);
    border-color: rgba(224, 173, 69, 0.30);
}

.sect-home-module span {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    font-size: 18px;
    font-weight: 950;
}

.sect-home-module strong {
    display: block;
    color: #f0d06a;
    font-size: 18px;
}

.sect-home-module p {
    margin: 8px 0 0;
    color: rgba(247,243,232,0.62);
    line-height: 1.6;
    font-size: 14px;
}

.sect-home-recommend-list {
    display: grid;
    gap: 10px;
}

.sect-home-recommend {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;

    padding: 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.04);

    color: #f7f3e8;
    text-decoration: none;
}

.sect-home-recommend strong {
    display: block;
    margin-bottom: 5px;
    color: #f7f3e8;
}

.sect-home-recommend p {
    margin: 0;
    color: rgba(247,243,232,0.62);
    line-height: 1.55;
    font-size: 13px;
}

.sect-home-recommend > span {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #171717;
    background: #f0d06a;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.sect-home-recommend.good {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.06);
}

.sect-home-recommend.warning {
    border-color: rgba(250, 204, 21, 0.28);
    background: rgba(250, 204, 21, 0.06);
}

@media (max-width: 860px) {
    .sect-home-page-v1 {
        width: min(100%, calc(100vw - 22px));
        margin: 0 auto 120px;
        padding-bottom: 0;
    }

    .sect-home-page-v1 .topbar {
        display: none;
    }

    .sect-home-hero {
        grid-template-columns: 1fr;
        padding: 18px;
        border-radius: 26px;
        margin-top: 12px;
    }

    .sect-home-hero h2 {
        font-size: 36px;
    }

    .sect-home-emblem {
        min-height: 120px;
    }

    .sect-home-emblem-ring {
        width: 116px;
        height: 116px;
    }

    .sect-home-emblem-core {
        width: 84px;
        height: 84px;
        border-radius: 28px;
        font-size: 38px;
    }

    .sect-home-emblem-glow {
        width: 140px;
        height: 140px;
    }

    .sect-home-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sect-home-actions .nav-button {
        width: 100%;
        justify-content: center;
        min-height: 42px;
        font-size: 12px;
    }

    .sect-home-summary-card,
    .sect-home-card {
        padding: 16px;
        border-radius: 24px;
        margin-top: 14px;
    }

    .sect-home-summary-card .chronicle-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sect-home-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sect-home-module {
        min-height: 136px;
        padding: 14px;
        border-radius: 20px;
    }

    .sect-home-module span {
        width: 34px;
        height: 34px;
        border-radius: 14px;
        font-size: 15px;
    }

    .sect-home-module strong {
        font-size: 15px;
    }

    .sect-home-module p {
        font-size: 12px;
        line-height: 1.5;
    }

    .sect-home-recommend {
        grid-template-columns: 1fr;
    }

    .sect-home-recommend > span {
        width: fit-content;
    }
}

@media (max-width: 430px) {
    .sect-home-actions {
        grid-template-columns: 1fr;
    }

    .sect-home-module-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Mobile-1I: 世界页手游化
   ========================= */

.mobile-world-hub-v1 {
    display: none;
}

@media (max-width: 860px) {
    .mobile-world-hub-v1 {
        display: grid;
        gap: 12px;
        width: min(100%, calc(100vw - 22px));
        margin: 12px auto 120px;
    }

    .mobile-world-hero,
    .mobile-world-summary-card,
    .mobile-world-detail-card,
    .mobile-world-actions-card,
    .mobile-world-feed-card {
        border: 1px solid rgba(224, 173, 69, 0.22);
        background:
            radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 34%),
            linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
        border-radius: 24px;
        padding: 16px;
        box-shadow: 0 18px 48px rgba(0,0,0,0.26);
    }

    .mobile-world-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        position: relative;
        overflow: hidden;
    }

    .mobile-world-hero::after {
        content: "界";
        position: absolute;
        right: 18px;
        bottom: -28px;
        font-size: 96px;
        line-height: 1;
        color: rgba(240, 208, 106, 0.08);
        font-weight: 950;
        pointer-events: none;
    }

    .mobile-world-kicker,
    .mobile-world-section-title span {
        display: block;
        color: #f0d06a;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.08em;
    }

    .mobile-world-hero h2 {
        margin: 4px 0 6px;
        color: #f7f3e8;
        font-size: 34px;
        line-height: 1.05;
        letter-spacing: -0.04em;
    }

    .mobile-world-hero p {
        margin: 0;
        color: rgba(247,243,232,0.64);
        font-size: 13px;
        line-height: 1.55;
    }

    .mobile-world-home {
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;
    }

    .mobile-world-area-tabs {
        position: sticky;
        top: 8px;
        z-index: 30;

        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;

        padding: 8px;
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(8, 12, 26, 0.86);
        backdrop-filter: blur(14px);
        box-shadow: 0 14px 36px rgba(0,0,0,0.28);
    }

    .mobile-world-area-tabs a {
        min-height: 58px;
        padding: 6px 4px;
        border-radius: 16px;
        border: 1px solid transparent;

        display: grid;
        place-items: center;
        align-content: center;
        gap: 4px;

        color: rgba(247,243,232,0.68);
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;
    }

    .mobile-world-area-tabs span {
        width: 28px;
        height: 28px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        color: rgba(247,243,232,0.76);
        background: rgba(255,255,255,0.055);
    }

    .mobile-world-area-tabs a.active {
        color: #f7f3e8;
        border-color: rgba(224, 173, 69, 0.32);
        background: rgba(224, 173, 69, 0.08);
    }

    .mobile-world-area-tabs a.active span {
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
    }

    .mobile-world-section-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .mobile-world-section-title h3 {
        margin: 3px 0 0;
        color: #f7f3e8;
        font-size: 18px;
    }

    .mobile-world-section-title a {
        color: #f0d06a;
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;
        white-space: nowrap;
    }

    .mobile-world-region-grid {
        display: grid;
        gap: 8px;
    }

    .mobile-world-region-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;

        padding: 12px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(8, 12, 26, 0.38);
        color: #f7f3e8;
        text-decoration: none;
    }

    .mobile-world-region-card.active {
        border-color: rgba(224, 173, 69, 0.32);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 36%),
            rgba(8, 12, 26, 0.42);
    }

    .mobile-world-region-card strong {
        display: block;
        color: #f0d06a;
        font-size: 15px;
        margin-bottom: 4px;
    }

    .mobile-world-region-card p {
        margin: 0;
        color: rgba(247,243,232,0.62);
        font-size: 12px;
        line-height: 1.45;
    }

    .mobile-world-region-card > span {
        min-height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        color: #171717;
        background: #f0d06a;
        font-size: 11px;
        font-weight: 950;
        white-space: nowrap;
    }

    .mobile-world-intel-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-world-intel-grid article {
        padding: 12px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.045);
    }

    .mobile-world-intel-grid span {
        display: block;
        color: rgba(247,243,232,0.52);
        font-size: 11px;
        margin-bottom: 5px;
    }

    .mobile-world-intel-grid strong {
        display: block;
        color: #f7f3e8;
        font-size: 18px;
    }

    .mobile-world-action-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-world-action-grid form {
        margin: 0;
    }

    .mobile-world-action-grid button,
    .mobile-world-action-grid a {
        width: 100%;
        min-height: 76px;
        padding: 8px 4px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.055);
        color: #f7f3e8;
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;
        font-family: inherit;

        display: grid;
        place-items: center;
        align-content: center;
        gap: 5px;
    }

    .mobile-world-action-grid button {
        cursor: pointer;
    }

    .mobile-world-action-grid span {
        width: 30px;
        height: 30px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 14px;
        font-weight: 950;
    }

    .mobile-world-action-grid small {
        color: rgba(247,243,232,0.52);
        font-size: 10px;
        font-weight: 700;
    }

    .mobile-world-feed-card {
        display: grid;
        gap: 10px;
    }

    .mobile-world-feed-group {
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.035);
        overflow: hidden;
    }

    .mobile-world-feed-group summary {
        list-style: none;
        cursor: pointer;
        min-height: 50px;
        padding: 0 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

    .mobile-world-feed-group summary::-webkit-details-marker {
        display: none;
    }

    .mobile-world-feed-group summary strong {
        color: #f7f3e8;
        font-size: 14px;
    }

    .mobile-world-feed-group summary small {
        min-width: 28px;
        height: 24px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        color: #171717;
        background: #f0d06a;
        font-size: 11px;
        font-weight: 950;
    }

    .mobile-world-feed-list {
        display: grid;
        gap: 8px;
        padding: 0 10px 10px;
    }

    .mobile-world-feed-item,
    .mobile-world-history-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        align-items: start;

        padding: 11px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(8, 12, 26, 0.38);
        color: #f7f3e8;
        text-decoration: none;
    }

    .mobile-world-history-item {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .mobile-world-avatar {
        width: 34px;
        height: 34px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 13px;
        font-weight: 950;
    }

    .mobile-world-feed-item.sect .mobile-world-avatar {
        background: linear-gradient(135deg, #38bdf8, #818cf8);
        color: #fff;
    }

    .mobile-world-feed-item.legacy .mobile-world-avatar {
        background: linear-gradient(135deg, #22c55e, #a3e635);
    }

    .mobile-world-year {
        color: #f0d06a;
        font-size: 11px;
        font-weight: 950;
        line-height: 1.4;
    }

    .mobile-world-feed-item strong,
    .mobile-world-history-item strong {
        display: block;
        color: #f7f3e8;
        font-size: 13px;
        line-height: 1.35;
        margin-bottom: 4px;
    }

    .mobile-world-feed-item p,
    .mobile-world-history-item p {
        margin: 0;
        color: rgba(247,243,232,0.62);
        font-size: 12px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-world-empty {
        margin: 0;
        padding: 12px;
        border-radius: 15px;
        background: rgba(255,255,255,0.035);
        color: rgba(247,243,232,0.62);
        font-size: 12px;
        line-height: 1.6;
    }

    /*
       手机端隐藏旧世界资料大块，避免重复。
       桌面版保持原样。
    */
    .world-map-card,
    .area-detail-card {
        display: none;
    }

    body:has(.mobile-world-hub-v1) .topbar {
        display: none;
    }
}

@media (max-width: 430px) {
    .mobile-world-intel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-world-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-world-history-item {
        grid-template-columns: 64px minmax(0, 1fr);
    }
}

/* =========================
   Mobile-1J: 悬赏板手游化
   ========================= */

.mobile-quest-board-v1 {
    display: none;
}

@media (max-width: 860px) {
    .mobile-quest-board-v1 {
        display: grid;
        gap: 12px;
        width: min(100%, calc(100vw - 22px));
        margin: 12px auto 120px;
    }

    .mobile-quest-hero,
    .mobile-quest-control-card,
    .mobile-quest-section {
        border: 1px solid rgba(224, 173, 69, 0.22);
        background:
            radial-gradient(circle at top right, rgba(239, 68, 68, 0.10), transparent 34%),
            linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
        border-radius: 24px;
        padding: 16px;
        box-shadow: 0 18px 48px rgba(0,0,0,0.26);
    }

    .mobile-quest-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        position: relative;
        overflow: hidden;
    }

    .mobile-quest-hero::after {
        content: "赏";
        position: absolute;
        right: 18px;
        bottom: -28px;
        font-size: 96px;
        line-height: 1;
        color: rgba(240, 208, 106, 0.08);
        font-weight: 950;
        pointer-events: none;
    }

    .mobile-quest-kicker,
    .mobile-quest-section-title span {
        display: block;
        color: #f0d06a;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.08em;
    }

    .mobile-quest-hero h2 {
        margin: 4px 0 6px;
        color: #f7f3e8;
        font-size: 34px;
        line-height: 1.05;
        letter-spacing: -0.04em;
    }

    .mobile-quest-hero p {
        margin: 0;
        color: rgba(247,243,232,0.64);
        font-size: 13px;
        line-height: 1.55;
    }

    .mobile-quest-battle {
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;
    }

    .mobile-quest-status-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-quest-status-grid article {
        padding: 13px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background:
            radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 40%),
            rgba(255,255,255,0.04);
    }

    .mobile-quest-status-grid span {
        display: block;
        color: rgba(247,243,232,0.52);
        font-size: 11px;
        margin-bottom: 5px;
    }

    .mobile-quest-status-grid strong {
        display: block;
        color: #f7f3e8;
        font-size: 20px;
        line-height: 1.15;
    }

    .mobile-quest-status-grid small {
        display: block;
        margin-top: 6px;
        color: rgba(247,243,232,0.45);
        font-size: 10px;
        line-height: 1.35;
    }

    .mobile-quest-control-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
    }

    .mobile-quest-control-card strong {
        display: block;
        color: #f7f3e8;
        margin-bottom: 4px;
    }

    .mobile-quest-control-card p {
        margin: 0;
        color: rgba(247,243,232,0.62);
        font-size: 12px;
        line-height: 1.5;
    }

    .mobile-quest-control-card form {
        margin: 0;
    }

    .mobile-quest-control-card button {
        min-height: 40px;
        padding: 0 14px;
        border-radius: 14px;
        border: 0;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-weight: 950;
        font-family: inherit;
        cursor: pointer;
        white-space: nowrap;
    }

    .mobile-quest-filter-tabs {
        position: sticky;
        top: 8px;
        z-index: 30;

        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;

        padding: 8px;
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(8, 12, 26, 0.86);
        backdrop-filter: blur(14px);
        box-shadow: 0 14px 36px rgba(0,0,0,0.28);
    }

    .mobile-quest-filter-tabs a {
        min-height: 56px;
        padding: 6px 3px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 4px;
        color: rgba(247,243,232,0.68);
        text-decoration: none;
        font-size: 11px;
        font-weight: 950;
    }

    .mobile-quest-filter-tabs span {
        width: 27px;
        height: 27px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 13px;
        font-weight: 950;
    }

    .mobile-quest-section {
        scroll-margin-top: 92px;
    }

    .mobile-quest-section-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .mobile-quest-section-title h3 {
        margin: 3px 0 0;
        color: #f7f3e8;
        font-size: 18px;
    }

    .mobile-quest-list {
        display: grid;
        gap: 10px;
    }

    .mobile-quest-card {
        padding: 14px;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,0.09);
        background: rgba(8, 12, 26, 0.38);
    }

    .mobile-quest-card.status-open {
        border-left: 3px solid rgba(34, 197, 94, 0.85);
    }

    .mobile-quest-card.status-claimed {
        border-left: 3px solid rgba(250, 204, 21, 0.85);
    }

    .mobile-quest-card.status-completed {
        border-left: 3px solid rgba(56, 189, 248, 0.85);
    }

    .mobile-quest-card-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: start;
    }

    .mobile-quest-type {
        display: inline-flex;
        min-height: 24px;
        padding: 0 9px;
        border-radius: 999px;
        align-items: center;
        color: #f0d06a;
        background: rgba(224, 173, 69, 0.08);
        border: 1px solid rgba(224, 173, 69, 0.18);
        font-size: 11px;
        font-weight: 950;
        margin-bottom: 8px;
    }

    .mobile-quest-card h3 {
        margin: 0;
        font-size: 17px;
        line-height: 1.25;
    }

    .mobile-quest-card h3 a {
        color: #f7f3e8;
        text-decoration: none;
    }

    .mobile-quest-card-head > strong {
        min-height: 30px;
        padding: 0 10px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        color: #171717;
        background: #f0d06a;
        font-size: 11px;
        font-weight: 950;
        white-space: nowrap;
    }

    .mobile-quest-card p {
        margin: 10px 0 0;
        color: rgba(247,243,232,0.64);
        font-size: 12px;
        line-height: 1.6;
    }

    .mobile-quest-reward-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 12px;
    }

    .mobile-quest-reward-grid span {
        min-height: 30px;
        padding: 7px 8px;
        border-radius: 12px;
        background: rgba(255,255,255,0.045);
        color: rgba(247,243,232,0.72);
        font-size: 11px;
        line-height: 1.35;
    }

    .mobile-quest-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
    }

    .mobile-quest-actions.single {
        grid-template-columns: 1fr;
    }

    .mobile-quest-actions form {
        margin: 0;
    }

    .mobile-quest-actions button {
        width: 100%;
        min-height: 42px;
        border-radius: 14px;
        border: 0;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-weight: 950;
        font-family: inherit;
        cursor: pointer;
    }

    .mobile-quest-actions button.secondary {
        color: #f7f3e8;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.055);
    }

    .mobile-quest-empty {
        margin: 0;
        padding: 12px;
        border-radius: 15px;
        background: rgba(255,255,255,0.035);
        color: rgba(247,243,232,0.62);
        font-size: 12px;
        line-height: 1.6;
    }

    .mobile-quest-bottom-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-quest-bottom-actions a {
        min-height: 42px;
        padding: 8px 4px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.045);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(247,243,232,0.82);
        text-decoration: none;
        font-size: 12px;
        font-weight: 900;
        text-align: center;
    }

    /*
       手机端隐藏旧悬赏页，避免重复。
       桌面版保持原样。
    */
    body:has(.mobile-quest-board-v1) .topbar,
    body:has(.mobile-quest-board-v1) .quest-control-card,
    body:has(.mobile-quest-board-v1) .quest-board-card {
        display: none;
    }
}

@media (max-width: 430px) {
    .mobile-quest-status-grid {
        grid-template-columns: 1fr;
    }

    .mobile-quest-control-card {
        grid-template-columns: 1fr;
    }

    .mobile-quest-filter-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-quest-reward-grid {
        grid-template-columns: 1fr;
    }

    .mobile-quest-bottom-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================
   Mobile-1K: 角色中枢
   ========================= */

.character-home-page-v1 {
    padding-bottom: 80px;
}

.character-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 24px;
    align-items: center;
    overflow: hidden;
    position: relative;

    border: 1px solid rgba(224, 173, 69, 0.25);
    background:
        radial-gradient(circle at 84% 20%, rgba(224, 173, 69, 0.16), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(56, 189, 248, 0.10), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
}

.character-home-hero h2 {
    margin: 8px 0 10px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.character-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.character-home-actions .primary,
.character-home-module.primary-module {
    border-color: rgba(224, 173, 69, 0.38);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.16), transparent 36%),
        rgba(224, 173, 69, 0.08);
}

.character-home-avatar {
    min-height: 210px;
    display: grid;
    place-items: center;
    position: relative;
}

.character-home-avatar-ring {
    position: absolute;
    width: 176px;
    height: 176px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.20);
    box-shadow:
        0 0 40px rgba(224, 173, 69, 0.08),
        inset 0 0 40px rgba(224, 173, 69, 0.06);
}

.character-home-avatar-core {
    width: 126px;
    height: 126px;
    border-radius: 44px;
    display: grid;
    place-items: center;

    color: rgba(23, 23, 23, 0.92);
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    font-size: 56px;
    font-weight: 950;
    box-shadow: 0 22px 55px rgba(224, 173, 69, 0.22);
    position: relative;
    z-index: 1;
}

.character-home-summary-card .second-summary {
    margin-top: 12px;
}

.character-home-body-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.character-body-stat {
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.04);
}

.character-body-stat > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.character-body-stat strong {
    color: #f7f3e8;
}

.character-body-stat span {
    color: rgba(247,243,232,0.64);
}

.character-body-bar {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
}

.character-body-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f0d06a, #71e8c6);
}

.character-body-stat.life .character-body-bar i {
    background: linear-gradient(90deg, #ef4444, #f97316);
}

.character-body-stat.spirit .character-body-bar i {
    background: linear-gradient(90deg, #38bdf8, #818cf8);
}

.character-body-stat.stamina .character-body-bar i {
    background: linear-gradient(90deg, #22c55e, #a3e635);
}

.character-body-stat.focus .character-body-bar i {
    background: linear-gradient(90deg, #c084fc, #f0abfc);
}

.character-home-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.character-home-module-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
}

.character-home-module {
    min-height: 156px;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.10);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 36%),
        rgba(255,255,255,0.04);

    display: grid;
    align-content: space-between;
    gap: 12px;

    color: #f7f3e8;
    text-decoration: none;
    transition: 0.18s ease;
}

.character-home-module:hover {
    transform: translateY(-2px);
    border-color: rgba(224, 173, 69, 0.30);
}

.character-home-module span {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    font-size: 18px;
    font-weight: 950;
}

.character-home-module strong {
    display: block;
    color: #f0d06a;
    font-size: 18px;
}

.character-home-module p {
    margin: 8px 0 0;
    color: rgba(247,243,232,0.62);
    line-height: 1.6;
    font-size: 14px;
}

.character-bonus-grid {
    margin-top: 12px;
}

.character-home-recommend-list {
    display: grid;
    gap: 10px;
}

.character-home-recommend {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;

    padding: 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.04);

    color: #f7f3e8;
    text-decoration: none;
}

.character-home-recommend strong {
    display: block;
    margin-bottom: 5px;
    color: #f7f3e8;
}

.character-home-recommend p {
    margin: 0;
    color: rgba(247,243,232,0.62);
    line-height: 1.55;
    font-size: 13px;
}

.character-home-recommend > span {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #171717;
    background: #f0d06a;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.character-home-recommend.good {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.06);
}

.character-home-recommend.danger {
    border-color: rgba(239, 68, 68, 0.30);
    background: rgba(239, 68, 68, 0.07);
}

@media (max-width: 860px) {
    .character-home-page-v1 {
        width: min(100%, calc(100vw - 22px));
        margin: 0 auto 120px;
        padding-bottom: 0;
    }

    .character-home-page-v1 .topbar {
        display: none;
    }

    .character-home-hero {
        grid-template-columns: 1fr;
        padding: 18px;
        border-radius: 26px;
        margin-top: 12px;
    }

    .character-home-hero h2 {
        font-size: 38px;
    }

    .character-home-avatar {
        min-height: 118px;
    }

    .character-home-avatar-ring {
        width: 116px;
        height: 116px;
    }

    .character-home-avatar-core {
        width: 84px;
        height: 84px;
        border-radius: 28px;
        font-size: 38px;
    }

    .character-home-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .character-home-actions .nav-button {
        width: 100%;
        justify-content: center;
        min-height: 42px;
        font-size: 12px;
    }

    .character-home-summary-card,
    .character-home-body-card,
    .character-home-profile-card,
    .character-home-card {
        padding: 16px;
        border-radius: 24px;
        margin-top: 14px;
    }

    .character-home-summary-card .chronicle-summary-grid,
    .character-bonus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .character-home-body-grid {
        grid-template-columns: 1fr;
    }

    .character-home-module-grid,
    .character-home-module-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .character-home-module {
        min-height: 136px;
        padding: 14px;
        border-radius: 20px;
    }

    .character-home-module span {
        width: 34px;
        height: 34px;
        border-radius: 14px;
        font-size: 15px;
    }

    .character-home-module strong {
        font-size: 15px;
    }

    .character-home-module p {
        font-size: 12px;
        line-height: 1.5;
    }

    .character-home-recommend {
        grid-template-columns: 1fr;
    }

    .character-home-recommend > span {
        width: fit-content;
    }
}

@media (max-width: 430px) {
    .character-home-actions,
    .character-home-module-grid,
    .character-home-module-grid.compact {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Mobile-1L: 移动端测试清单
   ========================= */

.mobile-checklist-page-v1 {
    padding-bottom: 80px;
}

.mobile-checklist-hero {
    border: 1px solid rgba(224, 173, 69, 0.25);
    background:
        radial-gradient(circle at 84% 20%, rgba(224, 173, 69, 0.16), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(56, 189, 248, 0.10), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
}

.mobile-checklist-hero h2 {
    margin: 8px 0 10px;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.mobile-checklist-list {
    display: grid;
    gap: 10px;
}

.mobile-checklist-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;

    padding: 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.04);
}

.mobile-checklist-row.ok {
    border-left: 3px solid rgba(34, 197, 94, 0.85);
}

.mobile-checklist-row.bad {
    border-left: 3px solid rgba(239, 68, 68, 0.85);
}

.mobile-checklist-title-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 6px;
}

.mobile-checklist-title-row strong {
    color: #f7f3e8;
}

.mobile-check-badge {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.mobile-check-badge.ok {
    color: #102015;
    background: #86efac;
}

.mobile-check-badge.bad {
    color: #fff;
    background: #ef4444;
}

.mobile-checklist-row p {
    margin: 0 0 8px;
    color: rgba(247,243,232,0.66);
    line-height: 1.6;
    font-size: 13px;
}

.mobile-checklist-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 860px) {
    .mobile-checklist-page-v1 {
        width: min(100%, calc(100vw - 22px));
        margin: 0 auto 120px;
        padding-bottom: 0;
    }

    .mobile-checklist-page-v1 .topbar {
        display: none;
    }

    .mobile-checklist-hero,
    .mobile-checklist-card {
        padding: 16px;
        border-radius: 24px;
        margin-top: 14px;
    }

    .mobile-checklist-hero h2 {
        font-size: 36px;
    }

    .mobile-checklist-hero .chronicle-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-checklist-row {
        grid-template-columns: 1fr;
    }

    .mobile-checklist-title-row {
        align-items: flex-start;
    }

    .mobile-checklist-actions {
        justify-content: flex-start;
    }

    .mobile-checklist-actions .nav-button {
        width: 100%;
        justify-content: center;
    }
}

/* =========================
   Mobile-2A: 点击反馈与页面转场
   ========================= */

.mobile-route-loader {
    display: none;
}

@media (max-width: 860px) {
    html {
        scroll-behavior: smooth;
    }

    a,
    button,
    summary,
    .nav-button,
    .mobile-bottom-nav-item,
    .mobile-home-recommend-item,
    .mobile-home-action-grid a,
    .mobile-system-grid a,
    .mobile-feed-item,
    .mobile-cultivation-tabs a,
    .mobile-battle-action-grid a,
    .mobile-inventory-category-tabs a,
    .mobile-world-region-card,
    .mobile-quest-card a,
    .character-home-module,
    .sect-home-module {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    a,
    button {
        transition:
            transform 0.14s ease,
            opacity 0.14s ease,
            background 0.18s ease,
            border-color 0.18s ease,
            box-shadow 0.18s ease;
    }

    button:disabled,
    .secondary:disabled {
        opacity: 0.52;
        cursor: not-allowed;
    }

    .mobile-tap-pulse {
        transform: scale(0.96) !important;
    }

    .mobile-submit-pending {
        opacity: 0.75;
        pointer-events: none;
    }

    .mobile-route-loader {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: grid;
        place-items: center;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: 0.18s ease;
        background:
            radial-gradient(circle at 50% 40%, rgba(224, 173, 69, 0.10), transparent 28%),
            rgba(4, 8, 18, 0.46);
        backdrop-filter: blur(4px);
    }

    html.mobile-route-transitioning .mobile-route-loader {
        opacity: 1;
        visibility: visible;
    }

    .mobile-route-loader-card {
        min-width: 180px;
        padding: 22px;
        border-radius: 26px;
        border: 1px solid rgba(224, 173, 69, 0.28);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.16), transparent 36%),
            linear-gradient(135deg, rgba(12, 18, 36, 0.96), rgba(10, 22, 38, 0.96));
        box-shadow: 0 24px 70px rgba(0,0,0,0.48);
        display: grid;
        justify-items: center;
        gap: 8px;
        color: #f7f3e8;
    }

    .mobile-route-loader-card strong {
        color: #f7f3e8;
        font-size: 16px;
    }

    .mobile-route-loader-card span {
        color: rgba(247,243,232,0.62);
        font-size: 12px;
    }

    .mobile-loader-orb {
        width: 42px;
        height: 42px;
        border-radius: 999px;
        border: 3px solid rgba(240, 208, 106, 0.20);
        border-top-color: #f0d06a;
        animation: mobile-loader-spin 0.82s linear infinite;
        box-shadow: 0 0 28px rgba(224, 173, 69, 0.20);
    }

    @keyframes mobile-loader-spin {
        to {
            transform: rotate(360deg);
        }
    }

    /*
       统一手机端按钮触感：更像手游按钮。
    */
    .mobile-bottom-nav-item:active,
    .mobile-home-action-grid button:active,
    .mobile-home-action-grid a:active,
    .mobile-cultivation-actions button:active,
    .mobile-cultivation-actions a:active,
    .mobile-battle-action-grid button:active,
    .mobile-battle-action-grid a:active,
    .mobile-inventory-actions a:active,
    .mobile-world-action-grid button:active,
    .mobile-world-action-grid a:active,
    .mobile-quest-actions button:active,
    .sect-home-module:active,
    .character-home-module:active {
        transform: scale(0.96);
    }

    /*
       手机端主要卡片轻微入场，提升页面感。
    */
    .mobile-home-dashboard-v1,
    .mobile-more-systems-v1,
    .mobile-world-feed-v1,
    .mobile-cultivation-hub-v1,
    .mobile-battle-hub-v1,
    .mobile-inventory-hub-v1,
    .mobile-world-hub-v1,
    .mobile-quest-board-v1,
    .sect-home-page-v1,
    .character-home-page-v1,
    .mobile-checklist-page-v1 {
        animation: mobile-page-enter 0.22s ease both;
    }

    @keyframes mobile-page-enter {
        from {
            opacity: 0;
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /*
       sticky 分类条 / 地图条 / 悬赏条点按时更明显。
    */
    .mobile-inventory-category-tabs a:hover,
    .mobile-world-area-tabs a:hover,
    .mobile-quest-filter-tabs a:hover,
    .mobile-cultivation-tabs a:hover {
        border-color: rgba(224, 173, 69, 0.28);
        background: rgba(224, 173, 69, 0.07);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* =========================
   Mobile-2B: 危险操作确认弹窗
   ========================= */

.mobile-danger-confirm {
    display: none;
}

@media (max-width: 860px) {
    html.mobile-danger-open,
    html.mobile-danger-open body {
        overflow: hidden;
    }

    .mobile-danger-confirm {
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: 0.18s ease;
    }

    .mobile-danger-confirm.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-danger-backdrop {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 50% 36%, rgba(239, 68, 68, 0.12), transparent 32%),
            rgba(4, 8, 18, 0.66);
        backdrop-filter: blur(5px);
    }

    .mobile-danger-sheet {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;

        padding: 22px;
        border-radius: 30px;
        border: 1px solid rgba(239, 68, 68, 0.32);
        background:
            radial-gradient(circle at top right, rgba(239, 68, 68, 0.16), transparent 36%),
            linear-gradient(135deg, rgba(14, 18, 36, 0.98), rgba(20, 12, 24, 0.98));
        box-shadow: 0 28px 90px rgba(0,0,0,0.62);

        transform: translateY(22px);
        transition: 0.2s ease;
    }

    .mobile-danger-confirm.show .mobile-danger-sheet {
        transform: translateY(0);
    }

    .mobile-danger-icon {
        width: 54px;
        height: 54px;
        border-radius: 20px;
        display: grid;
        place-items: center;

        color: #ffffff;
        background: linear-gradient(135deg, #ef4444, #f97316);
        font-size: 22px;
        font-weight: 950;
        box-shadow: 0 14px 34px rgba(239, 68, 68, 0.25);
        margin-bottom: 14px;
    }

    .mobile-danger-sheet h2 {
        margin: 0 0 10px;
        color: #f7f3e8;
        font-size: 24px;
        line-height: 1.15;
    }

    .mobile-danger-message {
        margin: 0;
        color: rgba(247,243,232,0.68);
        line-height: 1.7;
        font-size: 14px;
    }

    .mobile-danger-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 20px;
    }

    .mobile-danger-actions button {
        min-height: 48px;
        border-radius: 16px;
        border: 0;
        font-family: inherit;
        font-weight: 950;
        cursor: pointer;
    }

    .mobile-danger-cancel {
        color: #f7f3e8;
        border: 1px solid rgba(255,255,255,0.12) !important;
        background: rgba(255,255,255,0.06);
    }

    .mobile-danger-confirm-button {
        color: #ffffff;
        background: linear-gradient(135deg, #ef4444, #f97316);
        box-shadow: 0 12px 30px rgba(239, 68, 68, 0.22);
    }

    .mobile-danger-actions button:active {
        transform: scale(0.96);
    }
}

@media (min-width: 861px) {
    .mobile-danger-confirm {
        display: none !important;
    }
}

/* =========================
   Mobile-2C: Toast 提示系统
   ========================= */

.mobile-toast-layer {
    display: none;
}

@media (max-width: 860px) {
    .mobile-toast-layer {
        position: fixed;
        top: 10px;
        left: 10px;
        right: 10px;
        z-index: 100001;

        display: grid;
        gap: 8px;
        pointer-events: none;
    }

    .mobile-toast {
        width: 100%;
        min-height: 62px;
        padding: 12px;
        border-radius: 20px;

        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;

        border: 1px solid rgba(255,255,255,0.10);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 36%),
            linear-gradient(135deg, rgba(11, 18, 36, 0.96), rgba(9, 22, 38, 0.96));
        box-shadow: 0 18px 48px rgba(0,0,0,0.42);
        backdrop-filter: blur(14px);

        color: #f7f3e8;
        pointer-events: auto;

        opacity: 0;
        transform: translateY(-12px) scale(0.98);
        transition: 0.22s ease;
    }

    .mobile-toast.show {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .mobile-toast-icon {
        width: 38px;
        height: 38px;
        border-radius: 15px;

        display: grid;
        place-items: center;

        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 16px;
        font-weight: 950;
        box-shadow: 0 10px 26px rgba(224, 173, 69, 0.22);
    }

    .mobile-toast-success {
        border-color: rgba(34, 197, 94, 0.28);
        background:
            radial-gradient(circle at top right, rgba(34, 197, 94, 0.13), transparent 36%),
            linear-gradient(135deg, rgba(11, 18, 36, 0.96), rgba(9, 22, 38, 0.96));
    }

    .mobile-toast-success .mobile-toast-icon {
        background: linear-gradient(135deg, #22c55e, #a3e635);
    }

    .mobile-toast-error {
        border-color: rgba(239, 68, 68, 0.34);
        background:
            radial-gradient(circle at top right, rgba(239, 68, 68, 0.16), transparent 36%),
            linear-gradient(135deg, rgba(20, 12, 24, 0.96), rgba(11, 18, 36, 0.96));
    }

    .mobile-toast-error .mobile-toast-icon {
        color: #ffffff;
        background: linear-gradient(135deg, #ef4444, #f97316);
    }

    .mobile-toast-warning {
        border-color: rgba(250, 204, 21, 0.32);
        background:
            radial-gradient(circle at top right, rgba(250, 204, 21, 0.15), transparent 36%),
            linear-gradient(135deg, rgba(20, 16, 8, 0.96), rgba(11, 18, 36, 0.96));
    }

    .mobile-toast-warning .mobile-toast-icon {
        background: linear-gradient(135deg, #facc15, #f97316);
    }

    .mobile-toast-body {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    .mobile-toast-body strong {
        color: #f7f3e8;
        font-size: 14px;
        line-height: 1.2;
    }

    .mobile-toast-body span {
        color: rgba(247,243,232,0.68);
        font-size: 12px;
        line-height: 1.45;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-toast-close {
        width: 32px;
        height: 32px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.06);
        color: rgba(247,243,232,0.82);
        font-size: 18px;
        line-height: 1;
        font-weight: 900;
        cursor: pointer;
    }

    .mobile-toast-close:active {
        transform: scale(0.92);
    }

    /*
       手机端把原本页面内的 notice/error 隐藏，
       避免 Toast 和页面提示重复。
       桌面版仍保留原 notice/error。
    */
    .notice.mobile-toast-source-hidden,
    .error.mobile-toast-source-hidden {
        display: none !important;
    }
}

@media (max-width: 430px) {
    .mobile-toast {
        min-height: 58px;
        padding: 10px;
        border-radius: 18px;
    }

    .mobile-toast-icon {
        width: 34px;
        height: 34px;
        border-radius: 13px;
    }
}

/* =========================
   Mobile-2D: 底部弹窗 Sheet
   ========================= */

.mobile-sheet-layer {
    display: none;
}

@media (max-width: 860px) {
    html.mobile-sheet-open,
    html.mobile-sheet-open body {
        overflow: hidden;
    }

    .mobile-sheet-layer {
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: block;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: 0.18s ease;
    }

    .mobile-sheet-layer.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-sheet-backdrop {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 50% 38%, rgba(224, 173, 69, 0.10), transparent 34%),
            rgba(4, 8, 18, 0.66);
        backdrop-filter: blur(5px);
    }

    .mobile-sheet-panel {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;

        max-height: min(76vh, 680px);
        overflow: hidden;

        display: grid;
        grid-template-rows: auto minmax(0, 1fr);

        border-radius: 30px;
        border: 1px solid rgba(224, 173, 69, 0.28);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.14), transparent 36%),
            linear-gradient(135deg, rgba(12, 18, 36, 0.98), rgba(10, 22, 38, 0.98));
        box-shadow: 0 28px 90px rgba(0,0,0,0.62);

        transform: translateY(24px);
        transition: 0.2s ease;
    }

    .mobile-sheet-layer.show .mobile-sheet-panel {
        transform: translateY(0);
    }

    .mobile-sheet-handle {
        width: 46px;
        height: 5px;
        border-radius: 999px;
        background: rgba(247,243,232,0.24);
        margin: 10px auto 4px;
    }

    .mobile-sheet-head {
        padding: 10px 16px 12px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .mobile-sheet-head span {
        display: block;
        color: #f0d06a;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.08em;
        margin-bottom: 4px;
    }

    .mobile-sheet-head h2 {
        margin: 0;
        color: #f7f3e8;
        font-size: 22px;
        line-height: 1.15;
    }

    .mobile-sheet-close {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.06);
        color: rgba(247,243,232,0.86);
        font-size: 22px;
        line-height: 1;
        font-weight: 900;
        cursor: pointer;
    }

    .mobile-sheet-body {
        overflow: auto;
        padding: 16px;
        color: #f7f3e8;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-sheet-body h1,
    .mobile-sheet-body h2,
    .mobile-sheet-body h3,
    .mobile-sheet-body strong {
        color: #f7f3e8;
    }

    .mobile-sheet-body p {
        color: rgba(247,243,232,0.68);
        line-height: 1.7;
    }

    .mobile-sheet-body .muted {
        color: rgba(247,243,232,0.56);
    }

    .mobile-sheet-body button,
    .mobile-sheet-body .nav-button,
    .mobile-sheet-body a {
        max-width: 100%;
    }

    .mobile-sheet-body form {
        margin: 0;
    }

    .mobile-sheet-body input,
    .mobile-sheet-body select,
    .mobile-sheet-body textarea {
        width: 100%;
    }

    /*
       背包详情进入 Sheet 后，去掉原本 hover 浮层定位。
    */
    .mobile-sheet-body .inventory-slot-detail,
    .mobile-sheet-body .mobile-sheet-detail-content {
        position: static !important;
        display: block !important;
        max-height: none !important;
        width: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        box-shadow: none !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .mobile-sheet-body .inventory-detail-head {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .mobile-sheet-body .inventory-detail-title strong {
        display: block;
        color: #f0d06a;
        font-size: 18px;
        margin-bottom: 4px;
    }

    .mobile-sheet-body .inventory-detail-section {
        padding: 12px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.04);
        margin-top: 10px;
    }

    .mobile-sheet-body .inventory-detail-section h4 {
        margin: 0 0 8px;
        color: #f0d06a;
        font-size: 13px;
    }

    .mobile-sheet-body .inventory-slot-actions {
        display: grid;
        gap: 10px;
        margin-top: 12px;
    }

    .mobile-sheet-body .use-quantity-row,
    .mobile-sheet-body .compact-use-row {
        display: grid;
        grid-template-columns: 64px 1fr 1fr;
        gap: 8px;
    }

    .mobile-sheet-body .discard-form,
    .mobile-sheet-body .compact-discard-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .mobile-sheet-body button {
        min-height: 42px;
        border-radius: 14px;
        font-family: inherit;
        font-weight: 950;
    }

    .mobile-sheet-body .danger-action {
        color: #fff;
        background: linear-gradient(135deg, #ef4444, #f97316);
    }

    .mobile-sheet-close:active {
        transform: scale(0.92);
    }
}

@media (max-width: 430px) {
    .mobile-sheet-panel {
        left: 6px;
        right: 6px;
        bottom: 6px;
        border-radius: 26px;
        max-height: 80vh;
    }

    .mobile-sheet-body .use-quantity-row,
    .mobile-sheet-body .compact-use-row {
        grid-template-columns: 1fr;
    }

    .mobile-sheet-body .discard-form,
    .mobile-sheet-body .compact-discard-form {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 861px) {
    .mobile-sheet-layer {
        display: none !important;
    }
}

/* Mobile-2D: 背包详情改由底部 Sheet 负责 */
@media (max-width: 860px) {
    .inventory-page-v2 .inventory-slot:hover .inventory-slot-detail,
    .inventory-page-v2 .inventory-slot:focus-within .inventory-slot-detail {
        display: none;
    }

    .mobile-sheet-body .inventory-slot-detail {
        display: block !important;
    }
}

/* =========================
   Mobile-2E: 战斗结果底部弹窗
   ========================= */

@media (max-width: 860px) {
    .mobile-battle-result-sheet {
        display: grid;
        gap: 14px;
    }

    .mobile-battle-result-emblem {
        width: 68px;
        height: 68px;
        border-radius: 24px;

        display: grid;
        place-items: center;

        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 30px;
        font-weight: 950;
        box-shadow: 0 18px 44px rgba(224, 173, 69, 0.24);
    }

    .mobile-battle-result-sheet.victory .mobile-battle-result-emblem {
        background: linear-gradient(135deg, #22c55e, #a3e635);
    }

    .mobile-battle-result-sheet.defeat .mobile-battle-result-emblem {
        color: #ffffff;
        background: linear-gradient(135deg, #ef4444, #f97316);
    }

    .mobile-battle-result-title span {
        display: block;
        color: #f0d06a;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.08em;
        margin-bottom: 6px;
    }

    .mobile-battle-result-title h3 {
        margin: 0 0 8px;
        color: #f7f3e8;
        font-size: 28px;
        line-height: 1.08;
    }

    .mobile-battle-result-title p {
        margin: 0;
        color: rgba(247,243,232,0.70);
        line-height: 1.8;
        font-size: 14px;
    }

    .mobile-battle-result-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-battle-result-grid article {
        padding: 13px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 40%),
            rgba(255,255,255,0.04);
    }

    .mobile-battle-result-grid span {
        display: block;
        color: rgba(247,243,232,0.52);
        font-size: 11px;
        margin-bottom: 5px;
    }

    .mobile-battle-result-grid strong {
        display: block;
        color: #f7f3e8;
        font-size: 17px;
        line-height: 1.2;
    }

    .mobile-battle-result-grid small {
        display: block;
        margin-top: 6px;
        color: rgba(247,243,232,0.45);
        font-size: 10px;
        line-height: 1.35;
    }

    .mobile-battle-result-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 2px;
    }

    .mobile-battle-result-actions a {
        min-height: 44px;
        padding: 8px 10px;
        border-radius: 15px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.055);
        color: #f7f3e8;
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .mobile-battle-result-actions a:first-child {
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
    }
}

@media (max-width: 430px) {
    .mobile-battle-result-grid {
        grid-template-columns: 1fr;
    }

    .mobile-battle-result-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Mobile-2F: 任务 / 悬赏结果 Sheet
   ========================= */

@media (max-width: 860px) {
    .mobile-task-result-sheet {
        display: grid;
        gap: 14px;
    }

    .mobile-task-result-emblem {
        width: 68px;
        height: 68px;
        border-radius: 24px;

        display: grid;
        place-items: center;

        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 30px;
        font-weight: 950;
        box-shadow: 0 18px 44px rgba(224, 173, 69, 0.24);
    }

    .mobile-task-result-sheet.quest_complete .mobile-task-result-emblem,
    .mobile-task-result-sheet.sect_mission_complete .mobile-task-result-emblem {
        background: linear-gradient(135deg, #22c55e, #a3e635);
    }

    .mobile-task-result-sheet.quest_failed .mobile-task-result-emblem {
        color: #ffffff;
        background: linear-gradient(135deg, #ef4444, #f97316);
    }

    .mobile-task-result-title span {
        display: block;
        color: #f0d06a;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.08em;
        margin-bottom: 6px;
    }

    .mobile-task-result-title h3 {
        margin: 0 0 8px;
        color: #f7f3e8;
        font-size: 28px;
        line-height: 1.08;
    }

    .mobile-task-result-title p {
        margin: 0;
        color: rgba(247,243,232,0.70);
        line-height: 1.8;
        font-size: 14px;
    }

    .mobile-task-result-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-task-result-grid article {
        padding: 13px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent255,0.08);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 40%),
            rgba(255,255,255,0.04);
    }

    .mobile-task-result-grid span {
        display: block;
        color: rgba(247,243,232,0.52);
        font-size: 11px;
        margin-bottom: 5px;
    }

    .mobile-task-result-grid strong {
        display: block;
        color: #f7f3e8;
        font-size: 17px;
        line-height: 1.2;
    }

    .mobile-task-result-grid small {
        display: block;
        margin-top: 6px;
        color: rgba(247,243,232,0.45);
        font-size: 10px;
        line-height: 1.35;
    }

    .mobile-task-result-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 2px;
    }

    .mobile-task-result-actions a {
        min-height: 44px;
        padding: 8px 10px;
        border-radius: 15px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.055);
        color: #f7f3e8;
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .mobile-task-result-actions a:first-child {
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
    }
}

@media (max-width: 430px) {
    .mobile-task-result-grid {
        grid-template-columns: 1fr;
    }

    .mobile-task-result-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Mobile-2G: 通用奖励 / 获得物品 Sheet
   ========================= */

@media (max-width: 860px) {
    .mobile-reward-sheet {
        display: grid;
        gap: 14px;
    }

    .mobile-reward-emblem {
        width: 72px;
        height: 72px;
        border-radius: 26px;

        display: grid;
        place-items: center;

        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 32px;
        font-weight: 950;
        box-shadow:
            0 18px 44px rgba(224, 173, 69, 0.26),
            inset 0 1px 0 rgba(255,255,255,0.35);
    }

    .mobile-reward-title span {
        display: block;
        color: #f0d06a;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.08em;
        margin-bottom: 6px;
    }

    .mobile-reward-title h3 {
        margin: 0 0 8px;
        color: #f7f3e8;
        font-size: 28px;
        line-height: 1.08;
    }

    .mobile-reward-title p {
        margin: 0;
        color: rgba(247,243,232,0.70);
        line-height: 1.8;
        font-size: 14px;
    }

    .mobile-reward-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-reward-grid article {
        padding: 13px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 40%),
            rgba(255,255,255,0.04);
    }

    .mobile-reward-grid span {
        display: block;
        color: rgba(247,243,232,0.52);
        font-size: 11px;
        margin-bottom: 5px;
    }

    .mobile-reward-grid strong {
        display: block;
        color: #f7f3e8;
        font-size: 17px;
        line-height: 1.2;
        word-break: break-word;
    }

    .mobile-reward-grid small {
        display: block;
        margin-top: 6px;
        color: rgba(247,243,232,0.45);
        font-size: 10px;
        line-height: 1.35;
    }

    .mobile-reward-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 2px;
    }

    .mobile-reward-actions a {
        min-height: 44px;
        padding: 8px 10px;
        border-radius: 15px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.055);
        color: #f7f3e8;
        text-decoration: none;
        font-size: 12px;
        font-weight: 950;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .mobile-reward-actions a:first-child {
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
    }
}

@media (max-width: 430px) {
    .mobile-reward-grid {
        grid-template-columns: 1fr;
    }

    .mobile-reward-actions {
        grid-template-columns: 1fr;
    }
}

/* Mobile-2J: 奖励 Sheet 出现时隐藏重复 notice */
@media (max-width: 860px) {
    .notice[data-mobile-toast-skip="yes"] {
        display: none !important;
    }
}

/* =========================
   Theme-1A 首页当前道途目标
   ========================= */

.player-path-card {
    position: relative;
    overflow: hidden;
    margin-top: 22px;
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.14), transparent 34%),
        radial-gradient(circle at bottom left, rgba(110, 231, 255, 0.08), transparent 32%),
        rgba(20, 22, 38, 0.9);
}

.player-path-card::before {
    content: "";
    position: absolute;
    inset: auto -80px -120px auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.09);
    filter: blur(8px);
    pointer-events: none;
}

.player-path-head {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.player-path-head h2 {
    margin: 0 0 8px;
    font-size: clamp(24px, 3vw, 36px);
    letter-spacing: -0.04em;
}

.player-path-progress-orb {
    flex: 0 0 auto;
    width: 94px;
    height: 94px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px solid rgba(224, 173, 69, 0.28);
    background:
        radial-gradient(circle at 50% 35%, rgba(224, 173, 69, 0.24), transparent 58%),
        rgba(255, 255, 255, 0.045);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.player-path-progress-orb strong {
    display: block;
    color: var(--ui-gold-2);
    font-size: 24px;
    font-weight: 950;
    line-height: 1;
}

.player-path-progress-orb span {
    display: block;
    margin-top: 5px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 800;
}

.player-path-progress-track {
    position: relative;
    z-index: 2;
    height: 10px;
    margin: 18px 0 18px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.player-path-progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(224, 173, 69, 0.92), rgba(110, 231, 255, 0.82));
    box-shadow: 0 0 18px rgba(224, 173, 69, 0.32);
}

.player-path-goal-list {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
}

.player-path-goal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.045);
}

.player-path-goal.done {
    border-color: rgba(91, 220, 151, 0.22);
    background: rgba(91, 220, 151, 0.06);
}

.player-path-goal.todo {
    border-color: rgba(224, 173, 69, 0.18);
}

.player-path-check {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 950;
    border: 1px solid rgba(224, 173, 69, 0.22);
    background: rgba(224, 173, 69, 0.10);
    color: var(--ui-gold-2);
}

.player-path-goal.done .player-path-check {
    border-color: rgba(91, 220, 151, 0.30);
    background: rgba(91, 220, 151, 0.12);
    color: #8ff0b8;
}

.player-path-goal-main strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ui-text);
    font-size: 15px;
}

.player-path-goal-main p {
    margin: 0;
    color: var(--ui-muted);
    line-height: 1.65;
    font-size: 13px;
}

.player-path-status,
.player-path-action {
    white-space: nowrap;
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.player-path-status.done {
    color: #8ff0b8;
    background: rgba(91, 220, 151, 0.10);
    border: 1px solid rgba(91, 220, 151, 0.20);
}

.player-path-action {
    color: var(--ui-gold-2);
    background: rgba(224, 173, 69, 0.10);
    border: 1px solid rgba(224, 173, 69, 0.22);
}

.player-path-action:hover {
    background: rgba(224, 173, 69, 0.16);
}

.player-path-next {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
    padding: 15px;
    border-radius: 20px;
    border: 1px solid rgba(110, 231, 255, 0.16);
    background: rgba(110, 231, 255, 0.055);
}

.player-path-next span {
    display: block;
    margin-bottom: 4px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 800;
}

.player-path-next strong {
    color: var(--ui-text);
}

@media (max-width: 760px) {
    .player-path-head,
    .player-path-next {
        align-items: flex-start;
        flex-direction: column;
    }

    .player-path-progress-orb {
        width: 82px;
        height: 82px;
    }

    .player-path-goal {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .player-path-action,
    .player-path-status {
        grid-column: 2;
        width: fit-content;
    }
}

/* =========================
   Theme-1B 道途目标阶段奖励
   ========================= */

.player-path-reward-panel {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto auto;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
    padding: 15px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 40%),
        rgba(255, 255, 255, 0.045);
}

.player-path-reward-panel.claimable {
    border-color: rgba(224, 173, 69, 0.34);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.20), transparent 42%),
        radial-gradient(circle at bottom left, rgba(91, 220, 151, 0.10), transparent 34%),
        rgba(255, 255, 255, 0.055);
    box-shadow: 0 18px 44px rgba(224, 173, 69, 0.12);
}

.player-path-reward-panel.claimed {
    border-color: rgba(91, 220, 151, 0.24);
    background:
        radial-gradient(circle at top right, rgba(91, 220, 151, 0.12), transparent 40%),
        rgba(91, 220, 151, 0.045);
}

.player-path-reward-main span {
    display: block;
    margin-bottom: 5px;
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.player-path-reward-main strong {
    display: block;
    color: var(--ui-text);
    font-size: 16px;
    line-height: 1.35;
}

.player-path-reward-main p {
    margin: 6px 0 0;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.65;
}

.player-path-reward-prizes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.player-path-reward-prizes span {
    min-height: 36px;
    padding: 8px 11px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #f7f3e8;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.player-path-claim-form {
    margin: 0;
}

.player-path-claim-form button {
    min-height: 42px;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    box-shadow: 0 14px 32px rgba(224, 173, 69, 0.18);
    font-family: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    white-space: nowrap;
}

.player-path-claim-form button:hover {
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .player-path-reward-panel {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .player-path-reward-prizes {
        justify-content: flex-start;
    }

    .player-path-claim-form button {
        width: 100%;
    }
}

/* =========================
   Theme-1C 首页新手道途引导
   ========================= */

.player-path-guide-button {
    margin-top: 12px;
    min-height: 36px;
    padding: 8px 13px;
    width: fit-content;
    border: 1px solid rgba(110, 231, 255, 0.18);
    border-radius: 999px;
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.12), transparent 42%),
        rgba(255, 255, 255, 0.055);
    color: #bff4ff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.player-path-guide-button:hover {
    border-color: rgba(110, 231, 255, 0.32);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.18), transparent 42%),
        rgba(255, 255, 255, 0.075);
}

.mobile-path-guide-sheet {
    display: grid;
    gap: 15px;
}

.mobile-path-guide-emblem {
    width: 72px;
    height: 72px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    font-size: 34px;
    font-weight: 950;
    box-shadow:
        0 18px 44px rgba(224, 173, 69, 0.26),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

.mobile-path-guide-title span {
    display: block;
    color: #f0d06a;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.mobile-path-guide-title h3 {
    margin: 0 0 8px;
    color: #f7f3e8;
    font-size: 26px;
    line-height: 1.12;
}

.mobile-path-guide-title p {
    margin: 0;
    color: rgba(247,243,232,0.70);
    line-height: 1.8;
    font-size: 14px;
}

.mobile-path-guide-steps {
    display: grid;
    gap: 10px;
}

.mobile-path-guide-steps article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 40%),
        rgba(255,255,255,0.04);
}

.mobile-path-guide-steps article > strong {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    font-size: 15px;
    font-weight: 950;
}

.mobile-path-guide-steps h4 {
    margin: 0 0 5px;
    color: #f7f3e8;
    font-size: 15px;
}

.mobile-path-guide-steps p {
    margin: 0;
    color: rgba(247,243,232,0.62);
    line-height: 1.65;
    font-size: 12px;
}

.mobile-path-guide-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mobile-path-guide-actions a {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.055);
    color: #f7f3e8;
    text-decoration: none;
    font-size: 12px;
    font-weight: 950;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mobile-path-guide-actions a:first-child {
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
}

@media (max-width: 430px) {
    .mobile-path-guide-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Theme-1D 手机首页今日推荐行动
   ========================= */

.mobile-daily-choice-card {
    display: none;
}

@media (max-width: 860px) {
    .mobile-daily-choice-card {
        display: block;
        margin-top: 14px;
        padding: 15px;
        border-radius: 24px;
        border: 1px solid rgba(224, 173, 69, 0.18);
        background:
            radial-gradient(circle at top right, rgba(224, 173, 69, 0.12), transparent 38%),
            radial-gradient(circle at bottom left, rgba(110, 231, 255, 0.08), transparent 34%),
            rgba(18, 20, 34, 0.92);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
    }

    .mobile-daily-choice-grid {
        display: grid;
        gap: 11px;
        margin-top: 12px;
    }

    .mobile-daily-choice-item {
        position: relative;
        overflow: hidden;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        min-height: 132px;
        padding: 14px;
        border-radius: 21px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        background: rgba(255, 255, 255, 0.045);
    }

    .mobile-daily-choice-item::after {
        content: "";
        position: absolute;
        right: -40px;
        top: -50px;
        width: 130px;
        height: 130px;
        border-radius: 999px;
        opacity: 0.55;
        pointer-events: none;
    }

    .mobile-daily-choice-item.choice-cultivate::after {
        background: radial-gradient(circle, rgba(224, 173, 69, 0.18), transparent 65%);
    }

    .mobile-daily-choice-item.choice-explore::after {
        background: radial-gradient(circle, rgba(110, 231, 255, 0.16), transparent 65%);
    }

    .mobile-daily-choice-item.choice-sect::after {
        background: radial-gradient(circle, rgba(167, 139, 250, 0.16), transparent 65%);
    }

    .daily-choice-orb {
        position: relative;
        z-index: 2;
        width: 46px;
        height: 46px;
        border-radius: 17px;
        display: grid;
        place-items: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-size: 20px;
        font-weight: 950;
        box-shadow:
            0 14px 34px rgba(224, 173, 69, 0.20),
            inset 0 1px 0 rgba(255,255,255,0.35);
    }

    .choice-explore .daily-choice-orb {
        color: #06131a;
        background: linear-gradient(135deg, #9eefff, #56c7e8);
    }

    .choice-sect .daily-choice-orb {
        color: #11101f;
        background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
    }

    .daily-choice-copy {
        position: relative;
        z-index: 2;
        min-width: 0;
    }

    .daily-choice-copy span {
        display: block;
        margin-bottom: 4px;
        color: var(--ui-gold-2);
        font-size: 11px;
        font-weight: 950;
        letter-spacing: 0.06em;
    }

    .choice-explore .daily-choice-copy span {
        color: #9eefff;
    }

    .choice-sect .daily-choice-copy span {
        color: #c4b5fd;
    }

    .daily-choice-copy h4 {
        margin: 0 0 6px;
        color: #f7f3e8;
        font-size: 17px;
        line-height: 1.2;
    }

    .daily-choice-copy p {
        margin: 0;
        color: rgba(247, 243, 232, 0.64);
        font-size: 12px;
        line-height: 1.65;
    }

    .mobile-daily-choice-item form,
    .mobile-daily-choice-item > a {
        position: relative;
        z-index: 2;
        grid-column: 1 / -1;
        margin: 2px 0 0;
    }

    .mobile-daily-choice-item button,
    .mobile-daily-choice-item > a {
        width: 100%;
        min-height: 42px;
        border: 0;
        border-radius: 999px;
        padding: 9px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #171717;
        background: linear-gradient(135deg, #f0d06a, #d9a846);
        font-family: inherit;
        font-size: 13px;
        font-weight: 950;
        text-decoration: none;
        cursor: pointer;
    }

    .choice-explore button {
        color: #06131a;
        background: linear-gradient(135deg, #9eefff, #56c7e8);
    }

    .choice-sect > a {
        color: #11101f;
        background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
    }

    .mobile-daily-choice-item button:active,
    .mobile-daily-choice-item > a:active {
        transform: scale(0.98);
    }
}

/* =========================
   Theme-1E 首页刚刚行动结果反馈卡
   ========================= */

.home-action-result-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-top: 18px;
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.14), transparent 36%),
        radial-gradient(circle at bottom left, rgba(110, 231, 255, 0.08), transparent 34%),
        rgba(20, 22, 38, 0.90);
}

.home-action-result-card.result-cultivate {
    border-color: rgba(224, 173, 69, 0.28);
}

.home-action-result-card.result-explore {
    border-color: rgba(110, 231, 255, 0.22);
}

.home-action-result-card.result-sect {
    border-color: rgba(167, 139, 250, 0.24);
}

.home-action-result-card::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -90px;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.08);
    pointer-events: none;
}

.home-action-result-card.result-explore::after {
    background: rgba(110, 231, 255, 0.08);
}

.home-action-result-card.result-sect::after {
    background: rgba(167, 139, 250, 0.09);
}

.home-action-result-orb {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 62px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    font-size: 26px;
    font-weight: 950;
    box-shadow:
        0 18px 44px rgba(224, 173, 69, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.34);
}

.result-explore .home-action-result-orb {
    color: #06131a;
    background: linear-gradient(135deg, #9eefff, #56c7e8);
    box-shadow:
        0 18px 44px rgba(86, 199, 232, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.34);
}

.result-sect .home-action-result-orb {
    color: #11101f;
    background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
    box-shadow:
        0 18px 44px rgba(139, 92, 246, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.34);
}

.home-action-result-main {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.home-action-result-main span {
    display: block;
    margin-bottom: 6px;
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.result-explore .home-action-result-main span {
    color: #9eefff;
}

.result-sect .home-action-result-main span {
    color: #c4b5fd;
}

.home-action-result-main h2 {
    margin: 0 0 8px;
    color: var(--ui-text);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.home-action-result-main p {
    margin: 0;
    color: var(--ui-muted);
    line-height: 1.7;
    font-size: 13px;
}

.home-action-result-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.home-action-result-stats strong {
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #f7f3e8;
    font-size: 12px;
    font-weight: 950;
}

.home-action-result-actions {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 8px;
    min-width: 150px;
}

.home-action-result-actions a {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 950;
    color: #f7f3e8;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.055);
}

.home-action-result-actions a:first-child {
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    border-color: transparent;
}

.result-explore .home-action-result-actions a:first-child {
    color: #06131a;
    background: linear-gradient(135deg, #9eefff, #56c7e8);
}

.result-sect .home-action-result-actions a:first-child {
    color: #11101f;
    background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
}

@media (max-width: 760px) {
    .home-action-result-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        margin-top: 14px;
    }

    .home-action-result-actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        min-width: 0;
    }
}

@media (max-width: 430px) {
    .home-action-result-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Theme-1F 今日行动与主线目标联动
   ========================= */

.mobile-daily-path-hint {
    margin-top: 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 42%),
        rgba(255, 255, 255, 0.045);
}

.mobile-daily-path-hint span {
    display: block;
    margin-bottom: 4px;
    color: #f0d06a;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.mobile-daily-path-hint strong {
    display: block;
    color: #f7f3e8;
    font-size: 15px;
    line-height: 1.35;
}

.mobile-daily-path-hint p {
    margin: 6px 0 0;
    color: rgba(247, 243, 232, 0.62);
    font-size: 12px;
    line-height: 1.65;
}

.mobile-daily-choice-item {
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.mobile-daily-choice-item.is-recommended {
    border-color: rgba(240, 208, 106, 0.52);
    background:
        radial-gradient(circle at top right, rgba(240, 208, 106, 0.18), transparent 38%),
        radial-gradient(circle at bottom left, rgba(110, 231, 255, 0.08), transparent 34%),
        rgba(255, 255, 255, 0.065);
    box-shadow:
        0 18px 42px rgba(224, 173, 69, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.mobile-daily-choice-item.is-recommended::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(240, 208, 106, 0.24);
    pointer-events: none;
}

.daily-choice-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    font-size: 10px;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(224, 173, 69, 0.20);
}

.mobile-daily-choice-item.is-recommended .daily-choice-orb {
    transform: scale(1.06);
}

.linked-path-battle .mobile-daily-path-hint,
.linked-path-explore .mobile-daily-path-hint {
    border-color: rgba(110, 231, 255, 0.20);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.10), transparent 42%),
        rgba(255, 255, 255, 0.045);
}

.linked-path-battle .mobile-daily-path-hint span,
.linked-path-explore .mobile-daily-path-hint span {
    color: #9eefff;
}

.linked-path-sect .mobile-daily-path-hint {
    border-color: rgba(196, 181, 253, 0.22);
    background:
        radial-gradient(circle at top right, rgba(196, 181, 253, 0.11), transparent 42%),
        rgba(255, 255, 255, 0.045);
}

.linked-path-sect .mobile-daily-path-hint span {
    color: #c4b5fd;
}

.linked-path-battle .mobile-daily-choice-item.is-recommended {
    border-color: rgba(248, 113, 113, 0.42);
    background:
        radial-gradient(circle at top right, rgba(248, 113, 113, 0.14), transparent 40%),
        rgba(255, 255, 255, 0.055);
    box-shadow: 0 18px 42px rgba(248, 113, 113, 0.12);
}

.linked-path-battle .mobile-daily-choice-item.is-recommended .daily-choice-orb,
.linked-path-battle .daily-choice-badge {
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #f97316);
}

.linked-path-sect .mobile-daily-choice-item.is-recommended {
    border-color: rgba(196, 181, 253, 0.42);
    background:
        radial-gradient(circle at top right, rgba(196, 181, 253, 0.16), transparent 40%),
        rgba(255, 255, 255, 0.055);
    box-shadow: 0 18px 42px rgba(139, 92, 246, 0.13);
}

.linked-path-sect .daily-choice-badge {
    color: #11101f;
    background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
}

.mobile-daily-choice-item > a {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    margin: 2px 0 0;
}

@media (max-width: 860px) {
    .mobile-daily-choice-item.is-recommended {
        transform: translateY(-1px);
    }
}

/* =========================
   Theme-1G 首页主线进度小地图
   ========================= */

.player-path-map {
    position: relative;
    z-index: 2;
    margin: 16px 0 18px;
    padding: 15px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 42%),
        rgba(255, 255, 255, 0.04);
}

.player-path-map-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.player-path-map-head span {
    display: block;
    margin-bottom: 4px;
    color: var(--ui-gold-2);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.player-path-map-head strong {
    display: block;
    color: var(--ui-text);
    font-size: 16px;
    line-height: 1.25;
}

.player-path-map-head small {
    max-width: 46%;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 850;
    text-align: right;
    line-height: 1.45;
}

.player-path-map-road {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.player-path-map-road::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 26px;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(224, 173, 69, 0.55),
        rgba(110, 231, 255, 0.28),
        rgba(255, 255, 255, 0.10)
    );
    pointer-events: none;
}

.player-path-map-node {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 9px;
    align-content: start;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 14, 24, 0.55);
    min-height: 138px;
}

.player-path-map-node.done {
    border-color: rgba(91, 220, 151, 0.24);
    background:
        radial-gradient(circle at top, rgba(91, 220, 151, 0.10), transparent 45%),
        rgba(12, 14, 24, 0.55);
}

.player-path-map-node.current {
    border-color: rgba(224, 173, 69, 0.40);
    background:
        radial-gradient(circle at top, rgba(224, 173, 69, 0.18), transparent 48%),
        rgba(12, 14, 24, 0.60);
    box-shadow:
        0 16px 38px rgba(224, 173, 69, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.player-path-map-node.locked {
    opacity: 0.62;
}

.path-map-orb {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    font-size: 13px;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(224, 173, 69, 0.18);
}

.player-path-map-node.done .path-map-orb {
    color: #07130d;
    background: linear-gradient(135deg, #8ff0b8, #46c985);
    box-shadow: 0 10px 24px rgba(91, 220, 151, 0.16);
}

.player-path-map-node.locked .path-map-orb {
    color: rgba(247, 243, 232, 0.68);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.path-map-copy span {
    display: block;
    margin-bottom: 4px;
    color: var(--ui-gold-2);
    font-size: 11px;
    font-weight: 950;
}

.player-path-map-node.done .path-map-copy span {
    color: #8ff0b8;
}

.player-path-map-node.locked .path-map-copy span {
    color: rgba(247, 243, 232, 0.42);
}

.path-map-copy strong {
    display: block;
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.25;
}

.path-map-copy p {
    margin: 6px 0 0;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 1.55;
}

@media (max-width: 760px) {
    .player-path-map-head {
        flex-direction: column;
    }

    .player-path-map-head small {
        max-width: 100%;
        text-align: left;
    }

    .player-path-map-road {
        grid-template-columns: 1fr;
    }

    .player-path-map-road::before {
        left: 26px;
        right: auto;
        top: 26px;
        bottom: 26px;
        width: 2px;
        height: auto;
        background: linear-gradient(
            180deg,
            rgba(224, 173, 69, 0.55),
            rgba(110, 231, 255, 0.28),
            rgba(255, 255, 255, 0.10)
        );
    }

    .player-path-map-node {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: auto;
        align-items: start;
    }

    .path-map-copy p {
        font-size: 12px;
    }
}

/* =========================
   Theme-1H 道途阶段突破庆祝横幅
   ========================= */

.path-celebration-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-top: 18px;
    border-color: rgba(240, 208, 106, 0.35);
    background:
        radial-gradient(circle at 20% 20%, rgba(240, 208, 106, 0.20), transparent 34%),
        radial-gradient(circle at 90% 10%, rgba(110, 231, 255, 0.13), transparent 30%),
        radial-gradient(circle at 80% 90%, rgba(167, 139, 250, 0.12), transparent 34%),
        rgba(20, 22, 38, 0.94);
    box-shadow:
        0 22px 58px rgba(224, 173, 69, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.path-celebration-glow {
    position: absolute;
    inset: -80px -120px auto auto;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: rgba(240, 208, 106, 0.16);
    filter: blur(10px);
    pointer-events: none;
}

.path-celebration-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.06) 38%,
            transparent 62%
        );
    transform: translateX(-100%);
    animation: pathCelebrationSweep 2.8s ease-out 0.25s 1;
    pointer-events: none;
}

@keyframes pathCelebrationSweep {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

.path-celebration-seal {
    position: relative;
    z-index: 2;
    width: 82px;
    height: 82px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    color: #171717;
    background:
        linear-gradient(135deg, #f7df88, #d9a846);
    font-size: 38px;
    font-weight: 950;
    box-shadow:
        0 20px 48px rgba(224, 173, 69, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.path-celebration-main {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.path-celebration-main span {
    display: block;
    margin-bottom: 7px;
    color: #f0d06a;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.10em;
}

.path-celebration-main h2 {
    margin: 0 0 9px;
    color: #f7f3e8;
    font-size: clamp(25px, 3.4vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.path-celebration-main p {
    margin: 0;
    max-width: 760px;
    color: rgba(247, 243, 232, 0.70);
    font-size: 14px;
    line-height: 1.75;
}

.path-celebration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.path-celebration-actions a {
    min-height: 40px;
    padding: 8px 13px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f7f3e8;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.11);
    text-decoration: none;
    font-size: 12px;
    font-weight: 950;
}

.path-celebration-actions a:first-child {
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    border-color: transparent;
}

@media (max-width: 760px) {
    .path-celebration-card {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 14px;
    }

    .path-celebration-seal {
        width: 70px;
        height: 70px;
        border-radius: 24px;
        font-size: 32px;
    }

    .path-celebration-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* =========================
   Theme-1I 角色档案道途展示
   ========================= */

.profile-path-card {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    border-color: rgba(224, 173, 69, 0.22);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.13), transparent 36%),
        radial-gradient(circle at bottom left, rgba(110, 231, 255, 0.08), transparent 34%),
        rgba(20, 22, 38, 0.90);
}

.profile-path-card::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -90px;
    width: 250px;
    height: 250px;
    border-radius: 999px;
    background: rgba(224, 173, 69, 0.08);
    pointer-events: none;
}

.profile-path-head {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.profile-path-head h2 {
    margin: 0 0 8px;
    color: var(--ui-text);
    font-size: clamp(24px, 3vw, 36px);
    letter-spacing: -0.04em;
}

.profile-path-progress-orb {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px solid rgba(224, 173, 69, 0.28);
    background:
        radial-gradient(circle at 50% 35%, rgba(224, 173, 69, 0.23), transparent 58%),
        rgba(255, 255, 255, 0.045);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.profile-path-progress-orb strong {
    color: var(--ui-gold-2);
    font-size: 23px;
    font-weight: 950;
    line-height: 1;
}

.profile-path-progress-orb span {
    display: block;
    margin-top: 5px;
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: 850;
}

.profile-path-road {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.profile-path-stage {
    min-height: 130px;
    padding: 12px;
    border-radius: 18px;
    display: grid;
    gap: 9px;
    align-content: start;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.profile-path-stage.done {
    border-color: rgba(91, 220, 151, 0.24);
    background:
        radial-gradient(circle at top, rgba(91, 220, 151, 0.10), transparent 45%),
        rgba(255,255,255,0.035);
}

.profile-path-stage.current {
    border-color: rgba(224, 173, 69, 0.40);
    background:
        radial-gradient(circle at top, rgba(224, 173, 69, 0.16), transparent 48%),
        rgba(255,255,255,0.05);
    box-shadow: 0 16px 38px rgba(224, 173, 69, 0.12);
}

.profile-path-stage.locked {
    opacity: 0.58;
}

.profile-path-stage-orb {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    font-size: 13px;
    font-weight: 950;
}

.profile-path-stage.done .profile-path-stage-orb {
    color: #07130d;
    background: linear-gradient(135deg, #8ff0b8, #46c985);
}

.profile-path-stage.locked .profile-path-stage-orb {
    color: rgba(247,243,232,0.62);
    background: rgba(255,255,255,0.08);
}

.profile-path-stage span {
    color: var(--ui-gold-2);
    font-size: 11px;
    font-weight: 950;
}

.profile-path-stage.done span {
    color: #8ff0b8;
}

.profile-path-stage strong {
    display: block;
    margin-top: 4px;
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.25;
}

.profile-path-stage p {
    margin: 6px 0 0;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 1.55;
}

.profile-path-current-goals {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 9px;
    margin-top: 14px;
}

.profile-path-current-goals article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 11px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.profile-path-current-goals article.done {
    border-color: rgba(91, 220, 151, 0.20);
    background: rgba(91, 220, 151, 0.055);
}

.profile-path-current-goals article span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--ui-gold-2);
    background: rgba(224,173,69,0.10);
    font-size: 12px;
    font-weight: 950;
}

.profile-path-current-goals article.done span {
    color: #8ff0b8;
    background: rgba(91,220,151,0.10);
}

.profile-path-current-goals article strong {
    color: var(--ui-text);
    font-size: 13px;
}

.profile-path-current-goals article em {
    color: var(--ui-muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 850;
}

.profile-path-next {
    position: relative;
    z-index: 2;
    margin-top: 13px;
    padding: 13px;
    border-radius: 18px;
    border: 1px solid rgba(110,231,255,0.15);
    background: rgba(110,231,255,0.055);
}

.profile-path-next span {
    display: block;
    margin-bottom: 4px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 850;
}

.profile-path-next strong {
    color: var(--ui-text);
}

@media (max-width: 760px) {
    .profile-path-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-path-road {
        grid-template-columns: 1fr;
    }

    .profile-path-stage {
        min-height: auto;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .profile-path-current-goals article {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .profile-path-current-goals article em {
        grid-column: 2;
    }
}

/* =========================
   Theme-2A 声音反馈 + 黑白模式切换
   ========================= */

html.theme-light {
    --theme-bg-0: #f4efe4;
    --theme-bg-1: #fbf7ee;
    --theme-bg-2: #efe4d1;

    --theme-panel: rgba(255, 252, 244, 0.90);
    --theme-panel-strong: rgba(255, 249, 237, 0.96);
    --theme-panel-soft: rgba(25, 18, 10, 0.035);

    --theme-text: #22170d;
    --theme-text-soft: rgba(34, 23, 13, 0.82);
    --theme-text-muted: rgba(34, 23, 13, 0.62);
    --theme-text-faint: rgba(34, 23, 13, 0.42);

    --theme-gold: #9b641e;
    --theme-gold-2: #7a4b13;
    --theme-gold-dark: #5c350a;

    --theme-blue: #0b7285;
    --theme-blue-2: #075866;
    --theme-purple: #6d4cc2;
    --theme-purple-2: #4b3292;
    --theme-green: #247a4b;
    --theme-green-2: #1b633c;
    --theme-red: #b73333;
    --theme-red-2: #8f2525;

    --theme-border: rgba(78, 54, 28, 0.14);
    --theme-border-soft: rgba(78, 54, 28, 0.09);
    --theme-border-gold: rgba(155, 100, 30, 0.28);
    --theme-border-blue: rgba(11, 114, 133, 0.20);
    --theme-border-purple: rgba(109, 76, 194, 0.20);
    --theme-border-green: rgba(36, 122, 75, 0.20);
    --theme-border-red: rgba(183, 51, 51, 0.22);

    --theme-glow-gold: rgba(155, 100, 30, 0.12);
    --theme-glow-blue: rgba(11, 114, 133, 0.08);
    --theme-glow-purple: rgba(109, 76, 194, 0.08);
    --theme-glow-green: rgba(36, 122, 75, 0.08);
    --theme-glow-red: rgba(183, 51, 51, 0.08);

    --theme-shadow-soft: 0 14px 32px rgba(68, 42, 16, 0.10);
    --theme-shadow-panel: 0 22px 46px rgba(68, 42, 16, 0.12);
    --theme-shadow-strong: 0 28px 68px rgba(68, 42, 16, 0.16);

    --ui-text: var(--theme-text);
    --ui-muted: var(--theme-text-muted);
    --ui-gold: var(--theme-gold);
    --ui-gold-2: var(--theme-gold-2);
}

html.theme-light,
html.theme-light body {
    background:
        radial-gradient(circle at 18% 12%, rgba(155, 100, 30, 0.12), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(11, 114, 133, 0.08), transparent 26%),
        linear-gradient(135deg, #fbf7ee 0%, #efe4d1 52%, #f4efe4 100%);
}

html.theme-light body {
    color: var(--theme-text);
}

html.theme-light .card,
html.theme-light .item,
html.theme-light .rank-row,
html.theme-light .timeline-event,
html.theme-light .legend-card,
html.theme-light .sect-row,
html.theme-light .market-listing,
html.theme-light .warehouse-entry,
html.theme-light .warehouse-request-row,
html.theme-light .warehouse-request-mini,
html.theme-light .role-member-row,
html.theme-light .inventory-item,
html.theme-light .artifact-item,
html.theme-light .system-matrix-card,
html.theme-light .command-card,
html.theme-light .growth-archive-group,
html.theme-light .world-menu-group,
html.theme-light .world-intel-group,
html.theme-light .topbar,
html.theme-light .home-game-header-v2,
html.theme-light .home-world-title-panel,
html.theme-light .home-nav-panel-v2 {
    background:
        radial-gradient(circle at top right, rgba(155, 100, 30, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 249, 237, 0.60)),
        var(--theme-panel);
    color: var(--theme-text);
}

html.theme-light p,
html.theme-light small,
html.theme-light .muted,
html.theme-light .card p,
html.theme-light .item p,
html.theme-light .timeline-event p,
html.theme-light .legend-card p {
    color: var(--theme-text-muted);
}

html.theme-light input,
html.theme-light select,
html.theme-light textarea {
    color: var(--theme-text);
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(78, 54, 28, 0.16);
}

html.theme-light .mobile-sheet-panel,
html.theme-light .mobile-toast,
html.theme-light .mobile-reward-sheet,
html.theme-light .mobile-task-result-sheet {
    color: var(--theme-text);
    background:
        radial-gradient(circle at top right, rgba(155, 100, 30, 0.12), transparent 36%),
        rgba(255, 252, 244, 0.96);
}

html.theme-light .mobile-sheet-title,
html.theme-light .mobile-reward-title h3,
html.theme-light .mobile-task-result-title h3,
html.theme-light .mobile-toast-body strong {
    color: var(--theme-text);
}

html.theme-light .mobile-reward-title p,
html.theme-light .mobile-task-result-title p,
html.theme-light .mobile-toast-body span {
    color: var(--theme-text-muted);
}

.game-ux-control-panel {
    position: fixed;
    right: 14px;
    bottom: 86px;
    z-index: 100050;
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.game-ux-toggle {
    pointer-events: auto;
    min-width: 78px;
    min-height: 38px;
    padding: 7px 9px;
    border-radius: 999px;
    border: 1px solid rgba(224, 173, 69, 0.24);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.14), transparent 42%),
        rgba(15, 18, 34, 0.82);
    color: #f7f3e8;
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    font-family: inherit;
    cursor: pointer;
}

.game-ux-toggle:active {
    transform: scale(0.96);
}

.ux-toggle-icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    font-size: 11px;
    font-weight: 950;
}

.game-ux-toggle em {
    color: inherit;
    font-style: normal;
    font-size: 12px;
    font-weight: 950;
}

html.theme-light .game-ux-toggle {
    color: #22170d;
    border-color: rgba(155, 100, 30, 0.24);
    background:
        radial-gradient(circle at top right, rgba(155, 100, 30, 0.12), transparent 42%),
        rgba(255, 252, 244, 0.86);
    box-shadow: 0 14px 34px rgba(68, 42, 16, 0.12);
}

html.theme-light .ux-toggle-icon {
    color: #fff7e8;
    background: linear-gradient(135deg, #9b641e, #5c350a);
}

@media (max-width: 860px) {
    .game-ux-control-panel {
        right: 10px;
        bottom: 82px;
    }

    .game-ux-toggle {
        min-width: 64px;
        min-height: 34px;
        padding: 6px 8px;
    }

    .ux-toggle-icon {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .game-ux-toggle em {
        font-size: 11px;
    }
}

@media (max-width: 430px) {
    .game-ux-control-panel {
        bottom: 76px;
    }

    .game-ux-toggle {
        min-width: 44px;
        width: 44px;
        justify-content: center;
        padding: 6px;
    }

    .game-ux-toggle em {
        display: none;
    }
}

/* =========================
   Theme-2A-Fix 明亮模式视觉修复
   修复白天模式灰块、低对比、页面发灰问题
   ========================= */

html.theme-light {
    --theme-bg-0: #f5efe3;
    --theme-bg-1: #fffaf0;
    --theme-bg-2: #eadfcb;

    --theme-panel: rgba(255, 252, 243, 0.94);
    --theme-panel-strong: rgba(255, 248, 235, 0.98);
    --theme-panel-soft: rgba(128, 86, 32, 0.055);

    --theme-text: #20150b;
    --theme-text-soft: rgba(32, 21, 11, 0.82);
    --theme-text-muted: rgba(32, 21, 11, 0.62);
    --theme-text-faint: rgba(32, 21, 11, 0.42);

    --theme-gold: #9a651d;
    --theme-gold-2: #72460f;
    --theme-blue: #0a6f80;
    --theme-purple: #6844b8;
    --theme-green: #237448;
    --theme-red: #b73434;

    --ui-text: var(--theme-text);
    --ui-muted: var(--theme-text-muted);
    --ui-gold: var(--theme-gold);
    --ui-gold-2: var(--theme-gold-2);
}

html.theme-light,
html.theme-light body {
    color: var(--theme-text);
    background:
        radial-gradient(circle at 12% 8%, rgba(154, 101, 29, 0.10), transparent 28%),
        radial-gradient(circle at 85% 14%, rgba(10, 111, 128, 0.075), transparent 30%),
        linear-gradient(135deg, #fffaf0 0%, #f4ecd9 48%, #efe2cc 100%) !important;
}

/* 首页头图不要变成一片灰白 */
html.theme-light .home-world-title-panel,
html.theme-light .home-game-header-v2,
html.theme-light .home-nav-panel-v2 {
    background:
        radial-gradient(circle at 12% 10%, rgba(154, 101, 29, 0.13), transparent 32%),
        radial-gradient(circle at 84% 16%, rgba(10, 111, 128, 0.075), transparent 34%),
        linear-gradient(135deg, rgba(255, 252, 243, 0.96), rgba(245, 235, 215, 0.92)) !important;
    border-color: rgba(113, 76, 28, 0.13) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 22px 52px rgba(79, 52, 18, 0.10) !important;
}

/* 巨大的“青州大陆”背景字在白天模式降低刺眼感 */
html.theme-light .home-title-stack h1 span {
    color: rgba(120, 82, 32, 0.12) !important;
    text-shadow: none !important;
}

html.theme-light .home-title-stack h1 em,
html.theme-light .home-title-stack p,
html.theme-light .home-hud-title strong,
html.theme-light .home-hud-title span {
    color: var(--theme-text) !important;
}

/* HUD 小卡不要变成灰黑块 */
html.theme-light .home-hud-box,
html.theme-light .summary-box,
html.theme-light .command-status-box,
html.theme-light .character-info-box,
html.theme-light .home-recovery-stat,
html.theme-light .qi-core-substat {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.78), rgba(246,235,213,0.72)) !important;
    border-color: rgba(113, 76, 28, 0.14) !important;
    color: var(--theme-text) !important;
}

html.theme-light .home-hud-box span,
html.theme-light .summary-box span,
html.theme-light .command-status-box span,
html.theme-light .character-info-box span,
html.theme-light .home-recovery-stat span,
html.theme-light .qi-core-substat span {
    color: rgba(32, 21, 11, 0.58) !important;
}

html.theme-light .home-hud-box strong,
html.theme-light .summary-box strong,
html.theme-light .command-status-box strong,
html.theme-light .character-info-box strong,
html.theme-light .home-recovery-stat strong,
html.theme-light .qi-core-substat strong {
    color: #20150b !important;
}

/* 全局卡片白天模式更干净 */
html.theme-light .card,
html.theme-light .player-path-card,
html.theme-light .mobile-daily-choice-card,
html.theme-light .home-action-result-card,
html.theme-light .path-celebration-card,
html.theme-light .profile-path-card,
html.theme-light .action-panel,
html.theme-light .feature-hub-panel,
html.theme-light .growth-archive-panel,
html.theme-light .world-shortcuts,
html.theme-light .world-intel-card,
html.theme-light .bloodline-mini-card,
html.theme-light .character-card {
    background:
        radial-gradient(circle at top right, rgba(154, 101, 29, 0.065), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,248,235,0.76)) !important;
    border-color: rgba(113, 76, 28, 0.13) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 20px 48px rgba(79, 52, 18, 0.09) !important;
}

html.theme-light .card h1,
html.theme-light .card h2,
html.theme-light .card h3,
html.theme-light .card h4,
html.theme-light .item-title,
html.theme-light strong {
    color: var(--theme-text) !important;
}

html.theme-light .muted,
html.theme-light p,
html.theme-light small,
html.theme-light span {
    color: rgba(32, 21, 11, 0.64);
}

/* 导航不要黑得太硬 */
html.theme-light .nav-button,
html.theme-light .home-nav-panel-v2 a,
html.theme-light .export-link-grid a,
html.theme-light .world-menu-links a,
html.theme-light .matrix-tags em,
html.theme-light .intent-chip {
    color: #2a1b0d !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.82), rgba(238,224,198,0.72)) !important;
    border-color: rgba(113, 76, 28, 0.16) !important;
    box-shadow: 0 10px 22px rgba(79, 52, 18, 0.07) !important;
}

html.theme-light .nav-button:hover,
html.theme-light .home-nav-panel-v2 a:hover,
html.theme-light .world-menu-links a:hover {
    background:
        linear-gradient(135deg, rgba(255,250,237,0.95), rgba(230,210,174,0.82)) !important;
}

/* 主要按钮保持金色，但别太黑 */
html.theme-light button,
html.theme-light input[type="submit"],
html.theme-light .player-path-action,
html.theme-light .player-path-claim-form button,
html.theme-light .home-action-result-actions a:first-child,
html.theme-light .path-celebration-actions a:first-child {
    color: #20150b !important;
    background: linear-gradient(135deg, #e2b954, #c9922e) !important;
    border-color: rgba(113, 76, 28, 0.18) !important;
}

/* 次要按钮 */
html.theme-light button.secondary,
html.theme-light .secondary {
    color: #2a1b0d !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(238,224,198,0.74)) !important;
    border-color: rgba(113, 76, 28, 0.16) !important;
}

/* 修行控制台三张大卡不要保持暗黑底 */
html.theme-light .command-card,
html.theme-light .system-matrix-card,
html.theme-light .growth-archive-group,
html.theme-light .world-menu-group,
html.theme-light .world-intel-group,
html.theme-light .player-path-goal,
html.theme-light .player-path-map,
html.theme-light .player-path-map-node,
html.theme-light .player-path-reward-panel,
html.theme-light .mobile-daily-choice-item {
    background:
        radial-gradient(circle at top right, rgba(154, 101, 29, 0.055), transparent 38%),
        rgba(255, 252, 243, 0.72) !important;
    border-color: rgba(113, 76, 28, 0.12) !important;
    color: var(--theme-text) !important;
}

/* 当前主线 / 推荐项在白天模式有重点 */
html.theme-light .player-path-map-node.current,
html.theme-light .mobile-daily-choice-item.is-recommended,
html.theme-light .player-path-reward-panel.claimable {
    background:
        radial-gradient(circle at top right, rgba(226, 185, 84, 0.22), transparent 40%),
        rgba(255, 248, 230, 0.86) !important;
    border-color: rgba(154, 101, 29, 0.32) !important;
    box-shadow: 0 18px 42px rgba(154, 101, 29, 0.12) !important;
}

/* 文字链接 */
html.theme-light a,
html.theme-light .story-link,
html.theme-light .mini-link {
    color: #7a4b13;
}

html.theme-light a:hover,
html.theme-light .story-link:hover,
html.theme-light .mini-link:hover {
    color: #4f2e09;
}

/* 输入框 */
html.theme-light input,
html.theme-light select,
html.theme-light textarea {
    color: #20150b !important;
    background: rgba(255,255,255,0.82) !important;
    border-color: rgba(113, 76, 28, 0.18) !important;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
    color: rgba(32, 21, 11, 0.40) !important;
}

/* notice / error */
html.theme-light .notice {
    color: #215239 !important;
    background: rgba(219, 247, 229, 0.82) !important;
    border-color: rgba(35, 116, 72, 0.22) !important;
}

html.theme-light .error {
    color: #8f2525 !important;
    background: rgba(255, 228, 228, 0.84) !important;
    border-color: rgba(183, 51, 51, 0.22) !important;
}

/* 右下角切换按钮 */
html.theme-light .game-ux-toggle {
    color: #20150b !important;
    background:
        radial-gradient(circle at top right, rgba(154, 101, 29, 0.13), transparent 42%),
        rgba(255, 252, 243, 0.90) !important;
    border-color: rgba(113, 76, 28, 0.18) !important;
    box-shadow: 0 14px 30px rgba(79, 52, 18, 0.12) !important;
}

/* 手机 bottom nav / sheet 也要适配 */
html.theme-light .mobile-bottom-nav,
html.theme-light .mobile-sheet-panel,
html.theme-light .mobile-toast,
html.theme-light .mobile-reward-sheet,
html.theme-light .mobile-task-result-sheet {
    color: var(--theme-text) !important;
    background:
        radial-gradient(circle at top right, rgba(154, 101, 29, 0.10), transparent 38%),
        rgba(255, 252, 243, 0.96) !important;
    border-color: rgba(113, 76, 28, 0.14) !important;
}

html.theme-light .mobile-bottom-nav a,
html.theme-light .mobile-bottom-nav button {
    color: rgba(32, 21, 11, 0.72) !important;
}

html.theme-light .mobile-bottom-nav a.active,
html.theme-light .mobile-bottom-nav button.active {
    color: #7a4b13 !important;
}

/* =========================
   Theme-2A-Fix-2 明亮模式残留深色块修复
   修复：首页离线收益卡、更多系统横条、widget按钮
   ========================= */

/* 首页顶部的离线收益 / 称号 widget */
html.theme-light .home-dashboard-strip {
    background: transparent !important;
}

html.theme-light .home-dashboard-widget,
html.theme-light .home-dashboard-widget.offline-widget,
html.theme-light .home-dashboard-widget.title-widget {
    background:
        radial-gradient(circle at top right, rgba(154, 101, 29, 0.085), transparent 38%),
        radial-gradient(circle at bottom left, rgba(35, 116, 72, 0.055), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(255, 247, 229, 0.82)) !important;
    border-color: rgba(113, 76, 28, 0.16) !important;
    color: #20150b !important;
    box-shadow: 0 18px 42px rgba(79, 52, 18, 0.10) !important;
}

html.theme-light .home-dashboard-widget.offline-widget {
    border-color: rgba(35, 116, 72, 0.22) !important;
    background:
        radial-gradient(circle at top right, rgba(35, 116, 72, 0.10), transparent 38%),
        radial-gradient(circle at bottom left, rgba(154, 101, 29, 0.065), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(240, 251, 238, 0.76)) !important;
}

html.theme-light .widget-head strong,
html.theme-light .widget-main-number,
html.theme-light .home-dashboard-widget strong {
    color: #20150b !important;
}

html.theme-light .home-dashboard-widget p {
    color: rgba(32, 21, 11, 0.62) !important;
}

html.theme-light .widget-tag,
html.theme-light .inline-pill {
    color: #72460f !important;
    background: rgba(226, 185, 84, 0.18) !important;
    border-color: rgba(154, 101, 29, 0.22) !important;
}

html.theme-light .offline-widget .widget-tag {
    color: #1b633c !important;
    background: rgba(35, 116, 72, 0.12) !important;
    border-color: rgba(35, 116, 72, 0.20) !important;
}

html.theme-light .widget-actions a,
html.theme-light .widget-actions button {
    color: #20150b !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(235, 220, 190, 0.78)) !important;
    border-color: rgba(113, 76, 28, 0.18) !important;
}

html.theme-light .widget-actions button {
    background: linear-gradient(135deg, #e2b954, #c9922e) !important;
    border-color: rgba(113, 76, 28, 0.16) !important;
}

/* 顶部更多系统 details summary 横条 */
html.theme-light .nav-drawer,
html.theme-light .refined-nav-drawer {
    background: transparent !important;
    border-color: transparent !important;
}

html.theme-light .nav-drawer > summary,
html.theme-light .refined-nav-drawer > summary {
    color: #20150b !important;
    background:
        radial-gradient(circle at top right, rgba(154, 101, 29, 0.08), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 224, 198, 0.78)) !important;
    border: 1px solid rgba(113, 76, 28, 0.16) !important;
    box-shadow: 0 12px 26px rgba(79, 52, 18, 0.08) !important;
}

html.theme-light .nav-drawer > summary strong,
html.theme-light .refined-nav-drawer > summary strong {
    color: #20150b !important;
}

html.theme-light .nav-drawer > summary span,
html.theme-light .refined-nav-drawer > summary span {
    color: rgba(32, 21, 11, 0.56) !important;
}

html.theme-light .nav-drawer > summary::after,
html.theme-light .refined-nav-drawer > summary::after {
    color: #72460f !important;
    background: rgba(226, 185, 84, 0.16) !important;
    border-color: rgba(154, 101, 29, 0.18) !important;
}

/* 展开的更多系统内容 */
html.theme-light .nav-drawer-content,
html.theme-light .refined-nav-content {
    background:
        radial-gradient(circle at top right, rgba(154, 101, 29, 0.08), transparent 38%),
        rgba(255, 252, 243, 0.94) !important;
    border-color: rgba(113, 76, 28, 0.14) !important;
    box-shadow: 0 20px 46px rgba(79, 52, 18, 0.10) !important;
}

html.theme-light .nav-system-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 247, 229, 0.74)) !important;
    border-color: rgba(113, 76, 28, 0.13) !important;
}

html.theme-light .nav-system-head strong {
    color: #20150b !important;
}

html.theme-light .nav-system-head span {
    color: rgba(32, 21, 11, 0.58) !important;
}

/* 修复部分深灰 pill / 状态条 */
html.theme-light .visual-pill,
html.theme-light .command-year-badge,
html.theme-light .home-recovery-pill,
html.theme-light .quest-status,
html.theme-light .type-badge,
html.theme-light .status-badge {
    color: #72460f !important;
    background: rgba(226, 185, 84, 0.16) !important;
    border-color: rgba(154, 101, 29, 0.20) !important;
}

/* 防止旧变量把文字压灰 */
html.theme-light .home-page-refined,
html.theme-light .home-page-refined * {
    text-shadow: none;
}

html.theme-light .home-page-refined .muted,
html.theme-light .home-page-refined p {
    color: rgba(32, 21, 11, 0.64) !important;
}

/* 保留按钮里的文字清晰 */
html.theme-light .home-page-refined button,
html.theme-light .home-page-refined .nav-button {
    color: #20150b !important;
}

/* =========================
   Theme-2A-Fix-3
   明亮模式进一步精修：
   1) 青州大陆保留仙气金色
   2) 首页大标题更有金光感
   3) 世界历史引导卡 / 三张说明卡不再发灰
   4) 世界英雄插画区域改成更柔和的昼卷仙气风
   ========================= */

/* -------------------------
   A. 青州大陆：保留仙气金色
   ------------------------- */

/* 顶部巨大背景字「青州大陆」 */
html.theme-light .home-title-stack h1 span {
    color: rgba(173, 129, 44, 0.20) !important;
    text-shadow:
        0 10px 28px rgba(214, 179, 97, 0.18),
        0 0 42px rgba(214, 179, 97, 0.16) !important;
    letter-spacing: 0.02em;
}

/* 主标题「全民共享历史修仙界」 */
html.theme-light .home-title-stack h1 em {
    color: #8b5917 !important;
    text-shadow:
        0 2px 0 rgba(255, 250, 239, 0.78),
        0 10px 24px rgba(181, 136, 50, 0.14) !important;
}

/* 副文案 */
html.theme-light .home-title-stack p {
    color: rgba(47, 31, 14, 0.64) !important;
}

/* 顶部总面板再偏金一点，别太白 */
html.theme-light .home-game-header-v2,
html.theme-light .home-world-title-panel {
    background:
        radial-gradient(circle at 12% 12%, rgba(214, 179, 97, 0.18), transparent 32%),
        radial-gradient(circle at 82% 16%, rgba(175, 216, 233, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(255, 252, 243, 0.98), rgba(245, 236, 218, 0.94)) !important;
    border-color: rgba(145, 104, 40, 0.14) !important;
    box-shadow: 0 22px 56px rgba(97, 67, 24, 0.10) !important;
}

/* 顶部右边小信息格 */
html.theme-light .home-hud-box,
html.theme-light .home-hud-box strong,
html.theme-light .home-hud-box span {
    color: #24170c !important;
}

html.theme-light .home-hud-box {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.82), rgba(247,239,223,0.72)) !important;
    border-color: rgba(145, 104, 40, 0.13) !important;
}

/* -------------------------
   B. 「你正在书写这个世界的历史」那块
   ------------------------- */

html.theme-light .world-hero-banner.refined-world-hero-banner {
    background:
        radial-gradient(circle at 12% 10%, rgba(214, 179, 97, 0.16), transparent 32%),
        radial-gradient(circle at 88% 15%, rgba(125, 205, 232, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(255, 252, 243, 0.98), rgba(245, 236, 218, 0.94)) !important;
    border-color: rgba(145, 104, 40, 0.14) !important;
    box-shadow: 0 24px 56px rgba(97, 67, 24, 0.10) !important;
}

html.theme-light .refined-hero-copy h2 {
    color: #2b1b0d !important;
    text-shadow: 0 2px 0 rgba(255, 250, 239, 0.68);
}

html.theme-light .refined-hero-copy p {
    color: rgba(47, 31, 14, 0.66) !important;
}

/* 三张说明卡：共享历史 / 宗门文明 / 角色痕迹 */
html.theme-light .hero-promise-card {
    background:
        radial-gradient(circle at top right, rgba(214, 179, 97, 0.10), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(241,230,206,0.76)) !important;
    border: 1px solid rgba(145, 104, 40, 0.15) !important;
    color: #24170c !important;
    box-shadow: 0 14px 32px rgba(97, 67, 24, 0.08) !important;
}

html.theme-light .hero-promise-card strong {
    color: #2b1b0d !important;
}

html.theme-light .hero-promise-card span {
    color: rgba(47, 31, 14, 0.62) !important;
}

/* 底部那排 intent chip：修炼 / 探索 / 战斗 / 宗门 / 传承 */
html.theme-light .intent-chip {
    color: #71460f !important;
    background: rgba(226, 185, 84, 0.14) !important;
    border-color: rgba(154, 101, 29, 0.18) !important;
}

/* -------------------------
   C. 右边插画区域也改成仙气昼卷风
   ------------------------- */

html.theme-light .world-hero-art.refined-hero-art {
    background:
        radial-gradient(circle at 68% 22%, rgba(94, 208, 255, 0.18), transparent 30%),
        radial-gradient(circle at 34% 28%, rgba(214, 179, 97, 0.16), transparent 36%),
        linear-gradient(180deg, rgba(255, 250, 238, 0.96), rgba(242, 232, 213, 0.92)) !important;
    border-color: rgba(145, 104, 40, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

html.theme-light .gender-pill {
    color: rgba(47, 31, 14, 0.68) !important;
    background: rgba(255,255,255,0.66) !important;
    border-color: rgba(145, 104, 40, 0.13) !important;
}

html.theme-light .gender-pill.active,
html.theme-light .male-pill.active,
html.theme-light .female-pill.active,
html.theme-light .unknown-pill.active {
    color: #71460f !important;
    background: rgba(226, 185, 84, 0.18) !important;
    border-color: rgba(154, 101, 29, 0.22) !important;
}

html.theme-light .cultivator-nameplate {
    color: #71460f !important;
    background: rgba(255, 251, 240, 0.78) !important;
    border-color: rgba(154, 101, 29, 0.16) !important;
}

html.theme-light .hero-moon-core {
    background:
        radial-gradient(circle, rgba(255, 238, 188, 0.96) 0%, rgba(255, 220, 130, 0.76) 55%, rgba(255, 220, 130, 0.05) 100%) !important;
    box-shadow: 0 0 36px rgba(226, 185, 84, 0.18) !important;
}

html.theme-light .hero-spirit-ring {
    border-color: rgba(226, 185, 84, 0.18) !important;
    box-shadow: 0 0 28px rgba(125, 205, 232, 0.12) !important;
}

/* 山脉保留，不要那么黑 */
html.theme-light .hero-mountain-line.mountain-line-back {
    border-bottom-color: rgba(35, 39, 58, 0.62) !important;
}

html.theme-light .hero-mountain-line.mountain-line-front {
    border-bottom-color: rgba(16, 20, 36, 0.90) !important;
}

/* -------------------------
   D. 首页还残留的一些深色卡块
   ------------------------- */

/* 修行控制台 / 世界入口 / 角色卡 / 其它主体卡 */
html.theme-light .character-card,
html.theme-light .character-profile-panel,
html.theme-light .action-panel,
html.theme-light .feature-hub-panel,
html.theme-light .world-shortcuts,
html.theme-light .world-intel-card,
html.theme-light .command-card,
html.theme-light .command-card.command-cultivate,
html.theme-light .command-card.command-battle,
html.theme-light .command-card.command-explore {
    background:
        radial-gradient(circle at top right, rgba(214, 179, 97, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(246,237,220,0.76)) !important;
    border-color: rgba(145, 104, 40, 0.14) !important;
    color: #24170c !important;
    box-shadow: 0 18px 42px rgba(97, 67, 24, 0.08) !important;
}

html.theme-light .command-card h3,
html.theme-light .character-card h2,
html.theme-light .feature-hub-panel h2,
html.theme-light .world-shortcuts h2 {
    color: #24170c !important;
}

html.theme-light .command-card p,
html.theme-light .character-card p,
html.theme-light .feature-hub-panel p,
html.theme-light .world-shortcuts p {
    color: rgba(47, 31, 14, 0.64) !important;
}

/* 小标签 */
html.theme-light .command-tag,
html.theme-light .visual-pill,
html.theme-light .home-recovery-pill,
html.theme-light .type-badge,
html.theme-light .status-badge {
    color: #71460f !important;
    background: rgba(226, 185, 84, 0.14) !important;
    border-color: rgba(154, 101, 29, 0.18) !important;
}

/* 卡里的小 chips */
html.theme-light .command-mini-stats span,
html.theme-light .matrix-tags em,
html.theme-light .mini-chip,
html.theme-light .character-mini-tags span {
    color: rgba(47, 31, 14, 0.68) !important;
    background: rgba(255,255,255,0.62) !important;
    border-color: rgba(145, 104, 40, 0.12) !important;
}

/* -------------------------
   E. 如果你要更明显的金色「青州大陆」
   可把下面 0.20 改成 0.26 / 0.30
   ------------------------- */

/* =========================
   Theme-2B 全站动作动画反馈
   修炼 / 探索 / 战斗 / 宗门 / 奖励
   ========================= */

.xianxia-action-fx {
    position: fixed;
    inset: 0;
    z-index: 100080;
    pointer-events: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    animation: xianxiaFxFade 0.86s ease forwards;
}

.xianxia-action-fx::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: xianxiaFxScreenFlash 0.48s ease-out forwards;
}

.xianxia-fx-core {
    position: relative;
    width: 190px;
    height: 190px;
    display: grid;
    place-items: center;
    animation: xianxiaFxCorePop 0.72s cubic-bezier(.2, .9, .2, 1) forwards;
}

.xianxia-fx-symbol {
    position: relative;
    z-index: 5;
    width: 76px;
    height: 76px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    color: #171717;
    font-size: 34px;
    font-weight: 950;
    box-shadow:
        0 20px 52px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
    transform: rotate(-4deg);
}

.xianxia-fx-ring {
    position: absolute;
    inset: 34px;
    border-radius: 999px;
    border: 2px solid currentColor;
    opacity: 0;
}

.xianxia-fx-ring.ring-a {
    animation: xianxiaFxRingA 0.76s ease-out forwards;
}

.xianxia-fx-ring.ring-b {
    animation: xianxiaFxRingB 0.76s ease-out 0.08s forwards;
}

.xianxia-fx-particle {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0;
}

.xianxia-fx-particle.particle-a {
    left: 24px;
    top: 66px;
    animation: xianxiaFxParticleA 0.72s ease-out forwards;
}

.xianxia-fx-particle.particle-b {
    right: 30px;
    top: 50px;
    animation: xianxiaFxParticleB 0.72s ease-out 0.03s forwards;
}

.xianxia-fx-particle.particle-c {
    left: 86px;
    bottom: 24px;
    animation: xianxiaFxParticleC 0.72s ease-out 0.06s forwards;
}

.xianxia-fx-slash {
    position: absolute;
    width: 230px;
    height: 6px;
    border-radius: 999px;
    opacity: 0;
    transform-origin: center;
}

.xianxia-fx-slash.slash-a {
    transform: rotate(-32deg) translateX(-38px);
}

.xianxia-fx-slash.slash-b {
    transform: rotate(38deg) translateX(38px);
}

/* 修炼：金色灵气脉冲 */
.xianxia-action-fx.fx-cultivate {
    color: rgba(240, 208, 106, 0.78);
}

.xianxia-action-fx.fx-cultivate::before {
    background:
        radial-gradient(circle at center, rgba(240, 208, 106, 0.20), transparent 34%),
        radial-gradient(circle at center, rgba(110, 231, 255, 0.08), transparent 52%);
}

.fx-cultivate .xianxia-fx-symbol {
    background: linear-gradient(135deg, #f0d06a, #d9a846);
}

.fx-cultivate .xianxia-fx-core::before {
    content: "";
    position: absolute;
    width: 138px;
    height: 138px;
    border-radius: 999px;
    background:
        conic-gradient(
            from 0deg,
            transparent,
            rgba(240, 208, 106, 0.45),
            transparent,
            rgba(110, 231, 255, 0.25),
            transparent
        );
    filter: blur(1px);
    animation: xianxiaFxRotate 0.86s linear forwards;
}

/* 探索：蓝色流光 */
.xianxia-action-fx.fx-explore {
    color: rgba(110, 231, 255, 0.78);
}

.xianxia-action-fx.fx-explore::before {
    background:
        linear-gradient(115deg, transparent 0%, rgba(110, 231, 255, 0.16) 42%, transparent 70%),
        radial-gradient(circle at center, rgba(110, 231, 255, 0.13), transparent 44%);
}

.fx-explore .xianxia-fx-symbol {
    color: #06131a;
    background: linear-gradient(135deg, #9eefff, #56c7e8);
}

.fx-explore .xianxia-fx-slash.slash-a {
    opacity: 1;
    background: linear-gradient(90deg, transparent, rgba(158, 239, 255, 0.88), transparent);
    animation: xianxiaFxExploreSweep 0.62s ease-out forwards;
}

/* 战斗：红橙剑光 */
.xianxia-action-fx.fx-battle {
    color: rgba(248, 113, 113, 0.84);
}

.xianxia-action-fx.fx-battle::before {
    background:
        radial-gradient(circle at center, rgba(248, 113, 113, 0.16), transparent 40%),
        linear-gradient(115deg, transparent, rgba(249, 115, 22, 0.10), transparent);
}

.fx-battle .xianxia-fx-symbol {
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #f97316);
}

.fx-battle .xianxia-fx-slash {
    opacity: 1;
    height: 8px;
    background: linear-gradient(90deg, transparent, rgba(255, 220, 160, 0.95), rgba(239, 68, 68, 0.78), transparent);
    box-shadow: 0 0 20px rgba(248, 113, 113, 0.45);
}

.fx-battle .xianxia-fx-slash.slash-a {
    animation: xianxiaFxBattleSlashA 0.42s ease-out forwards;
}

.fx-battle .xianxia-fx-slash.slash-b {
    animation: xianxiaFxBattleSlashB 0.42s ease-out 0.08s forwards;
}

/* 宗门：紫色宗印 */
.xianxia-action-fx.fx-sect {
    color: rgba(196, 181, 253, 0.80);
}

.xianxia-action-fx.fx-sect::before {
    background:
        radial-gradient(circle at center, rgba(196, 181, 253, 0.18), transparent 38%),
        radial-gradient(circle at center, rgba(240, 208, 106, 0.08), transparent 58%);
}

.fx-sect .xianxia-fx-symbol {
    color: #11101f;
    background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
    border-radius: 999px;
}

.fx-sect .xianxia-fx-core::before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 22px;
    border: 2px solid rgba(196, 181, 253, 0.42);
    transform: rotate(45deg);
    animation: xianxiaFxSeal 0.78s ease-out forwards;
}

/* 奖励：金色爆光 */
.xianxia-action-fx.fx-reward {
    color: rgba(240, 208, 106, 0.86);
}

.xianxia-action-fx.fx-reward::before {
    background:
        radial-gradient(circle at center, rgba(240, 208, 106, 0.24), transparent 30%),
        radial-gradient(circle at center, rgba(91, 220, 151, 0.10), transparent 52%);
}

.fx-reward .xianxia-fx-symbol {
    background: linear-gradient(135deg, #f7df88, #d9a846);
}

.fx-reward .xianxia-fx-core::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    background:
        radial-gradient(circle, rgba(240, 208, 106, 0.24), transparent 42%),
        conic-gradient(
            transparent,
            rgba(240, 208, 106, 0.52),
            transparent,
            rgba(91, 220, 151, 0.28),
            transparent
        );
    border-radius: 999px;
    animation: xianxiaFxRewardBurst 0.82s ease-out forwards;
}

/* 明亮模式下动画稍微柔和一点 */
html.theme-light .xianxia-action-fx::before {
    opacity: 0.9;
}

html.theme-light .xianxia-fx-symbol {
    box-shadow:
        0 18px 42px rgba(97, 67, 24, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

/* 动画关键帧 */
@keyframes xianxiaFxFade {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes xianxiaFxScreenFlash {
    0% {
        opacity: 0;
    }

    22% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes xianxiaFxCorePop {
    0% {
        opacity: 0;
        transform: scale(0.72) translateY(12px);
    }

    32% {
        opacity: 1;
        transform: scale(1.08) translateY(0);
    }

    100% {
        opacity: 0;
        transform: scale(1.18) translateY(-4px);
    }
}

@keyframes xianxiaFxRingA {
    0% {
        opacity: 0;
        transform: scale(0.45);
    }

    22% {
        opacity: 0.75;
    }

    100% {
        opacity: 0;
        transform: scale(1.72);
    }
}

@keyframes xianxiaFxRingB {
    0% {
        opacity: 0;
        transform: scale(0.35);
    }

    26% {
        opacity: 0.48;
    }

    100% {
        opacity: 0;
        transform: scale(2.08);
    }
}

@keyframes xianxiaFxParticleA {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.6);
    }

    25% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
        transform: translate(-36px, -32px) scale(1.4);
    }
}

@keyframes xianxiaFxParticleB {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.6);
    }

    25% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
        transform: translate(42px, -36px) scale(1.3);
    }
}

@keyframes xianxiaFxParticleC {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.6);
    }

    25% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
        transform: translate(8px, 46px) scale(1.5);
    }
}

@keyframes xianxiaFxRotate {
    from {
        transform: rotate(0deg) scale(0.82);
        opacity: 0.9;
    }

    to {
        transform: rotate(230deg) scale(1.5);
        opacity: 0;
    }
}

@keyframes xianxiaFxExploreSweep {
    0% {
        transform: rotate(-28deg) translateX(-180px);
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    100% {
        transform: rotate(-28deg) translateX(180px);
        opacity: 0;
    }
}

@keyframes xianxiaFxBattleSlashA {
    0% {
        transform: rotate(-32deg) translateX(-190px);
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    100% {
        transform: rotate(-32deg) translateX(190px);
        opacity: 0;
    }
}

@keyframes xianxiaFxBattleSlashB {
    0% {
        transform: rotate(38deg) translateX(190px);
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    100% {
        transform: rotate(38deg) translateX(-190px);
        opacity: 0;
    }
}

@keyframes xianxiaFxSeal {
    0% {
        opacity: 0;
        transform: rotate(45deg) scale(0.55);
    }

    28% {
        opacity: 0.85;
    }

    100% {
        opacity: 0;
        transform: rotate(45deg) scale(1.65);
    }
}

@keyframes xianxiaFxRewardBurst {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.5);
    }

    24% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(140deg) scale(1.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .xianxia-action-fx {
        display: none !important;
    }
}

/* =========================
   Theme-2A-Fix-4
   明亮模式残留修复：
   1) 调息 / 疗伤卡
   2) 当前天气 / 状态小格
   3) 查看自身数据按钮
   4) 世界情报列表
   ========================= */

/* 调息 / 疗伤主卡 */
html.theme-light .home-recovery-panel {
    background:
        radial-gradient(circle at top right, rgba(35, 116, 72, 0.10), transparent 38%),
        radial-gradient(circle at bottom left, rgba(226, 185, 84, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(239, 250, 235, 0.78)) !important;
    border-color: rgba(35, 116, 72, 0.18) !important;
    color: #20150b !important;
    box-shadow: 0 18px 42px rgba(79, 52, 18, 0.08) !important;
}

/* 调息卡内部文字 */
html.theme-light .home-recovery-panel h3,
html.theme-light .home-recovery-panel strong {
    color: #20150b !important;
}

html.theme-light .home-recovery-panel p,
html.theme-light .home-recovery-panel span {
    color: rgba(32, 21, 11, 0.64) !important;
}

/* 调息 / 疗伤 标签 */
html.theme-light .home-recovery-pill {
    color: #1b633c !important;
    background: rgba(35, 116, 72, 0.12) !important;
    border-color: rgba(35, 116, 72, 0.20) !important;
}

/* 状态稳定 badge */
html.theme-light .home-recovery-state,
html.theme-light .home-recovery-state.normal {
    color: #1b633c !important;
    background: rgba(35, 116, 72, 0.12) !important;
    border-color: rgba(35, 116, 72, 0.20) !important;
}

html.theme-light .home-recovery-state.warning {
    color: #8a5a12 !important;
    background: rgba(226, 185, 84, 0.16) !important;
    border-color: rgba(154, 101, 29, 0.22) !important;
}

html.theme-light .home-recovery-state.critical {
    color: #8f2525 !important;
    background: rgba(255, 220, 220, 0.70) !important;
    border-color: rgba(183, 51, 51, 0.22) !important;
}

/* 生命 / 精神 / 体魄 / 心神 小格 */
html.theme-light .home-recovery-stat-grid,
html.theme-light .home-recovery-stat {
    background: transparent !important;
}

html.theme-light .home-recovery-stat {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(242, 235, 218, 0.68)) !important;
    border-color: rgba(113, 76, 28, 0.13) !important;
    color: #20150b !important;
}

html.theme-light .home-recovery-stat span {
    color: rgba(32, 21, 11, 0.56) !important;
}

html.theme-light .home-recovery-stat strong {
    color: #20150b !important;
}

/* 右边调息灵气球 */
html.theme-light .home-recovery-orb {
    background:
        radial-gradient(circle, rgba(226, 185, 84, 0.20), transparent 58%) !important;
}

html.theme-light .home-recovery-core {
    background:
        radial-gradient(circle, #e2b954 0%, #c9922e 58%, rgba(201, 146, 46, 0.08) 100%) !important;
    box-shadow:
        0 0 28px rgba(226, 185, 84, 0.30),
        0 0 58px rgba(35, 116, 72, 0.10) !important;
}

html.theme-light .home-recovery-ring {
    border-color: rgba(35, 116, 72, 0.22) !important;
}

/* 开始调息按钮 */
html.theme-light .home-recovery-form button {
    color: #20150b !important;
    background: linear-gradient(135deg, #e2b954, #c9922e) !important;
    border-color: rgba(113, 76, 28, 0.16) !important;
}

/* 查看自身数据按钮 */
html.theme-light .home-recovery-link {
    color: #71460f !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(238,224,198,0.72)) !important;
    border-color: rgba(113, 76, 28, 0.16) !important;
}

/* -------------------------
   世界情报右边列表
   ------------------------- */

html.theme-light .world-intel-card,
html.theme-light .world-intel-list,
html.theme-light .world-intel-content {
    background: transparent !important;
}

html.theme-light .world-intel-group {
    background:
        radial-gradient(circle at top right, rgba(214, 179, 97, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.84), rgba(246,237,220,0.76)) !important;
    border-color: rgba(145, 104, 40, 0.14) !important;
    color: #20150b !important;
}

html.theme-light .world-intel-group summary {
    color: #20150b !important;
}

html.theme-light .world-intel-group summary strong {
    color: #20150b !important;
}

html.theme-light .world-intel-group summary small {
    color: rgba(32, 21, 11, 0.58) !important;
}

/* 最近发现 / 最近历史 / 最近传说里面的小卡 */
html.theme-light .intel-item,
html.theme-light .world-intel-content .item,
html.theme-light .world-intel-content .timeline-event,
html.theme-light .world-intel-content .legend-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(241,230,206,0.70)) !important;
    border-color: rgba(145, 104, 40, 0.13) !important;
    color: #20150b !important;
    box-shadow: 0 10px 22px rgba(79, 52, 18, 0.06) !important;
}

html.theme-light .world-intel-content .item-title,
html.theme-light .world-intel-content strong,
html.theme-light .world-intel-content h3 {
    color: #20150b !important;
}

html.theme-light .world-intel-content p,
html.theme-light .world-intel-content span {
    color: rgba(32, 21, 11, 0.62) !important;
}

/* 世界情报图标不要太暗 */
html.theme-light .world-intel-icon {
    background:
        radial-gradient(circle, rgba(226, 185, 84, 0.30), rgba(226, 185, 84, 0.08)) !important;
    border-color: rgba(154, 101, 29, 0.18) !important;
}

/* 左侧血脉 / 天气 / 迁徙相关也统一修干净 */
html.theme-light .bloodline-mini-card,
html.theme-light .character-travel-panel,
html.theme-light .travel-form {
    background:
        radial-gradient(circle at top right, rgba(214, 179, 97, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(246,237,220,0.76)) !important;
    border-color: rgba(145, 104, 40, 0.14) !important;
    color: #20150b !important;
}

html.theme-light .bloodline-mini-card h2,
html.theme-light .character-travel-panel label,
html.theme-light .travel-form label {
    color: #20150b !important;
}

html.theme-light .bloodline-mini-card p,
html.theme-light .bloodline-mini-card span {
    color: rgba(32, 21, 11, 0.62) !important;
}

/* =========================
   Theme-2C 行动小过场文案
   ========================= */

.xianxia-action-prelude {
    position: fixed;
    inset: 0;
    z-index: 100090;
    pointer-events: none;
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.28), transparent 42%);
    animation: xianxiaPreludeFadeIn 0.16s ease-out forwards;
}

.xianxia-action-prelude.is-leaving {
    animation: xianxiaPreludeFadeOut 0.22s ease-in forwards;
}

.xianxia-prelude-card {
    position: relative;
    overflow: hidden;
    width: min(440px, 92vw);
    padding: 18px;
    border-radius: 26px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(240, 208, 106, 0.28);
    background:
        radial-gradient(circle at top right, rgba(240, 208, 106, 0.18), transparent 36%),
        rgba(18, 20, 34, 0.94);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(12px) scale(0.96);
    animation: xianxiaPreludeCardIn 0.32s cubic-bezier(.2,.9,.2,1) forwards;
}

.xianxia-action-prelude.is-leaving .xianxia-prelude-card {
    animation: xianxiaPreludeCardOut 0.22s ease-in forwards;
}

.xianxia-prelude-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 42%,
            transparent 68%
        );
    transform: translateX(-110%);
    animation: xianxiaPreludeSweep 0.66s ease-out forwards;
    pointer-events: none;
}

.xianxia-prelude-seal {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    color: #171717;
    background: linear-gradient(135deg, #f0d06a, #d9a846);
    font-size: 30px;
    font-weight: 950;
    box-shadow:
        0 18px 44px rgba(224, 173, 69, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.34);
}

.xianxia-prelude-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.xianxia-prelude-copy span {
    display: block;
    margin-bottom: 5px;
    color: #f0d06a;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.10em;
}

.xianxia-prelude-copy h3 {
    margin: 0 0 7px;
    color: #f7f3e8;
    font-size: 22px;
    line-height: 1.12;
}

.xianxia-prelude-copy p {
    margin: 0;
    color: rgba(247, 243, 232, 0.68);
    font-size: 13px;
    line-height: 1.65;
}

.xianxia-prelude-line {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
}

.xianxia-prelude-line i {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f0d06a, #9eefff);
    animation: xianxiaPreludeLine 0.56s ease-out forwards;
}

/* 探索 */
.prelude-explore .xianxia-prelude-card {
    border-color: rgba(110, 231, 255, 0.28);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.18), transparent 36%),
        rgba(18, 20, 34, 0.94);
}

.prelude-explore .xianxia-prelude-seal {
    color: #06131a;
    background: linear-gradient(135deg, #9eefff, #56c7e8);
}

.prelude-explore .xianxia-prelude-copy span {
    color: #9eefff;
}

.prelude-explore .xianxia-prelude-line i {
    background: linear-gradient(90deg, #9eefff, #56c7e8);
}

/* 战斗 */
.prelude-battle .xianxia-prelude-card {
    border-color: rgba(248, 113, 113, 0.30);
    background:
        radial-gradient(circle at top right, rgba(248, 113, 113, 0.18), transparent 36%),
        rgba(18, 20, 34, 0.94);
}

.prelude-battle .xianxia-prelude-seal {
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #f97316);
}

.prelude-battle .xianxia-prelude-copy span {
    color: #fca5a5;
}

.prelude-battle .xianxia-prelude-line i {
    background: linear-gradient(90deg, #ef4444, #f97316);
}

/* 宗门 */
.prelude-sect .xianxia-prelude-card {
    border-color: rgba(196, 181, 253, 0.30);
    background:
        radial-gradient(circle at top right, rgba(196, 181, 253, 0.18), transparent 36%),
        rgba(18, 20, 34, 0.94);
}

.prelude-sect .xianxia-prelude-seal {
    color: #11101f;
    background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
}

.prelude-sect .xianxia-prelude-copy span {
    color: #c4b5fd;
}

.prelude-sect .xianxia-prelude-line i {
    background: linear-gradient(90deg, #c4b5fd, #8b5cf6);
}

/* 奖励 */
.prelude-reward .xianxia-prelude-card {
    border-color: rgba(240, 208, 106, 0.34);
    background:
        radial-gradient(circle at top right, rgba(240, 208, 106, 0.22), transparent 36%),
        radial-gradient(circle at bottom left, rgba(91, 220, 151, 0.10), transparent 34%),
        rgba(18, 20, 34, 0.94);
}

/* 明亮模式 */
html.theme-light .xianxia-action-prelude {
    background:
        radial-gradient(circle at center, rgba(97, 67, 24, 0.18), transparent 46%);
}

html.theme-light .xianxia-prelude-card {
    color: #20150b;
    background:
        radial-gradient(circle at top right, rgba(226, 185, 84, 0.20), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(246,237,220,0.92)) !important;
    border-color: rgba(154, 101, 29, 0.22);
    box-shadow:
        0 24px 66px rgba(97, 67, 24, 0.20),
        inset 0 1px 0 rgba(255,255,255,0.48);
}

html.theme-light .xianxia-prelude-copy h3 {
    color: #20150b;
}

html.theme-light .xianxia-prelude-copy p {
    color: rgba(32, 21, 11, 0.66);
}

html.theme-light .xianxia-prelude-line {
    background: rgba(113, 76, 28, 0.12);
}

@keyframes xianxiaPreludeFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes xianxiaPreludeFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes xianxiaPreludeCardIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes xianxiaPreludeCardOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}

@keyframes xianxiaPreludeSweep {
    from {
        transform: translateX(-110%);
    }

    to {
        transform: translateX(110%);
    }
}

@keyframes xianxiaPreludeLine {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .xianxia-prelude-card {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .xianxia-prelude-copy h3 {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xianxia-action-prelude {
        display: none !important;
    }
}

/* =========================
   Theme-2D 首页行动结果：修炼报告 / 游历报告
   ========================= */

.home-action-result-card.report-mode {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

.home-action-result-banner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.home-action-report-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.home-action-report-grid article {
    min-height: 82px;
    padding: 13px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.09);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.08), transparent 42%),
        rgba(255,255,255,0.045);
}

.home-action-report-grid article span {
    display: block;
    margin-bottom: 7px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 850;
}

.home-action-report-grid article strong {
    display: block;
    color: var(--ui-text);
    font-size: 18px;
    line-height: 1.25;
}

.home-action-result-lore {
    position: relative;
    z-index: 2;
    padding: 15px;
    border-radius: 20px;
    border: 1px solid rgba(110, 231, 255, 0.14);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.08), transparent 40%),
        rgba(110, 231, 255, 0.045);
}

.home-action-result-lore strong {
    display: block;
    margin-bottom: 6px;
    color: #bff4ff;
    font-size: 13px;
    font-weight: 950;
}

.home-action-result-lore p {
    margin: 0;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.75;
}

/* 不同报告类型的细节颜色 */
.home-action-result-card.result-cultivate .home-action-result-lore {
    border-color: rgba(224, 173, 69, 0.18);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 40%),
        rgba(224, 173, 69, 0.045);
}

.home-action-result-card.result-cultivate .home-action-result-lore strong {
    color: var(--ui-gold-2);
}

.home-action-result-card.result-explore .home-action-result-lore {
    border-color: rgba(110, 231, 255, 0.16);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.10), transparent 40%),
        rgba(110, 231, 255, 0.045);
}

.home-action-result-card.result-sect .home-action-result-lore {
    border-color: rgba(196, 181, 253, 0.18);
    background:
        radial-gradient(circle at top right, rgba(196, 181, 253, 0.10), transparent 40%),
        rgba(196, 181, 253, 0.045);
}

.home-action-result-card.result-sect .home-action-result-lore strong {
    color: #c4b5fd;
}

/* 明亮模式 */
html.theme-light .home-action-report-grid article {
    background:
        radial-gradient(circle at top right, rgba(214, 179, 97, 0.09), transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,0.84), rgba(246,237,220,0.72)) !important;
    border-color: rgba(145, 104, 40, 0.13) !important;
}

html.theme-light .home-action-report-grid article span {
    color: rgba(32, 21, 11, 0.56) !important;
}

html.theme-light .home-action-report-grid article strong {
    color: #20150b !important;
}

html.theme-light .home-action-result-lore,
html.theme-light .home-action-result-card.result-cultivate .home-action-result-lore,
html.theme-light .home-action-result-card.result-explore .home-action-result-lore,
html.theme-light .home-action-result-card.result-sect .home-action-result-lore {
    background:
        radial-gradient(circle at top right, rgba(214, 179, 97, 0.10), transparent 40%),
        linear-gradient(135deg, rgba(255,255,255,0.82), rgba(246,237,220,0.72)) !important;
    border-color: rgba(145, 104, 40, 0.14) !important;
}

html.theme-light .home-action-result-lore strong,
html.theme-light .home-action-result-card.result-cultivate .home-action-result-lore strong,
html.theme-light .home-action-result-card.result-explore .home-action-result-lore strong,
html.theme-light .home-action-result-card.result-sect .home-action-result-lore strong {
    color: #71460f !important;
}

html.theme-light .home-action-result-lore p {
    color: rgba(32, 21, 11, 0.64) !important;
}

@media (max-width: 760px) {
    .home-action-result-banner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .home-action-report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .home-action-result-banner {
        grid-template-columns: 1fr;
    }

    .home-action-report-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Theme-2E 行动结果：自动下一步推荐
   ========================= */

.home-action-next-panel {
    position: relative;
    z-index: 2;
    padding: 15px;
    border-radius: 22px;
    border: 1px solid rgba(224, 173, 69, 0.16);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.10), transparent 40%),
        rgba(255, 255, 255, 0.045);
}

.home-action-next-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.home-action-next-title span {
    color: var(--ui-gold-2);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.home-action-next-title strong {
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
    text-align: right;
}

.home-action-next-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.next-card {
    min-height: 88px;
    padding: 13px;
    border-radius: 18px;
    display: grid;
    align-content: center;
    gap: 6px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.09);
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 40%),
        rgba(255,255,255,0.045);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.next-card:hover {
    transform: translateY(-2px);
}

.next-card span {
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 850;
}

.next-card strong {
    color: var(--ui-text);
    font-size: 15px;
    line-height: 1.25;
}

.next-card.primary-next {
    border-color: rgba(224, 173, 69, 0.26);
    background:
        radial-gradient(circle at top right, rgba(224, 173, 69, 0.16), transparent 40%),
        rgba(224, 173, 69, 0.055);
}

.next-card.primary-next strong {
    color: var(--ui-gold-2);
}

.next-card.path-next {
    border-color: rgba(110, 231, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(110, 231, 255, 0.11), transparent 40%),
        rgba(110, 231, 255, 0.045);
}

.next-card.path-next strong {
    color: #bff4ff;
}

.next-card.extra-next {
    border-color: rgba(196, 181, 253, 0.18);
    background:
        radial-gradient(circle at top right, rgba(196, 181, 253, 0.11), transparent 40%),
        rgba(196, 181, 253, 0.045);
}

.next-card.extra-next strong {
    color: #c4b5fd;
}

/* 明亮模式 */
html.theme-light .home-action-next-panel {
    background:
        radial-gradient(circle at top right, rgba(214, 179, 97, 0.10), transparent 40%),
        linear-gradient(135deg, rgba(255,255,255,0.84), rgba(246,237,220,0.72)) !important;
    border-color: rgba(145, 104, 40, 0.14) !important;
}

html.theme-light .home-action-next-title span {
    color: #71460f !important;
}

html.theme-light .home-action-next-title strong {
    color: rgba(32, 21, 11, 0.62) !important;
}

html.theme-light .next-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(241,230,206,0.70)) !important;
    border-color: rgba(145, 104, 40, 0.13) !important;
}

html.theme-light .next-card span {
    color: rgba(32, 21, 11, 0.56) !important;
}

html.theme-light .next-card strong,
html.theme-light .next-card.path-next strong,
html.theme-light .next-card.extra-next strong {
    color: #20150b !important;
}

html.theme-light .next-card.primary-next {
    background:
        radial-gradient(circle at top right, rgba(226, 185, 84, 0.18), transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,0.90), rgba(248,235,204,0.78)) !important;
    border-color: rgba(154, 101, 29, 0.22) !important;
}

html.theme-light .next-card.primary-next strong {
    color: #71460f !important;
}

@media (max-width: 760px) {
    .home-action-next-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-action-next-title strong {
        text-align: left;
    }

    .home-action-next-grid {
        grid-template-columns: 1fr;
    }

    .next-card {
        min-height: 72px;
    }
}

/* Mobile home compact pass: keep the bottom nav from covering content and
   make the first screen behave like a playable hub instead of a long index. */
@media (max-width: 860px) {
    :root {
        --mobile-bottom-nav-height: 70px;
        --mobile-bottom-nav-offset: max(8px, env(safe-area-inset-bottom));
        --mobile-bottom-nav-space: calc(var(--mobile-bottom-nav-height) + var(--mobile-bottom-nav-offset) + 18px);
    }

    html,
    body {
        scroll-padding-bottom: var(--mobile-bottom-nav-space);
    }

    .page {
        padding-top: 12px !important;
        padding-bottom: calc(var(--mobile-bottom-nav-space) + 14px) !important;
    }

    .page:has(.login-fusion-shell),
    .page:has(.register-fusion-shell) {
        padding: 0 !important;
    }

    .mobile-bottom-nav {
        bottom: var(--mobile-bottom-nav-offset) !important;
        min-height: var(--mobile-bottom-nav-height);
        padding: 6px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-nav-item {
        min-height: 54px !important;
        padding: 5px 2px !important;
        border-radius: 16px !important;
    }

    .mobile-nav-icon {
        width: 24px !important;
        height: 24px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }

    .mobile-bottom-nav-item strong {
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

    .game-ux-control-panel {
        bottom: calc(var(--mobile-bottom-nav-space) + 8px) !important;
    }

    body:has(.login-fusion-shell) .game-ux-control-panel,
    body:has(.register-fusion-shell) .game-ux-control-panel {
        bottom: 16px !important;
    }

    body:has(.mobile-home-dashboard-v1) .page {
        padding-top: 8px !important;
    }

    body:has(.mobile-home-dashboard-v1) .home-page-refined {
        width: 100%;
        padding: 0 !important;
    }

    body:has(.mobile-home-dashboard-v1) .home-game-header-v2,
    body:has(.mobile-home-dashboard-v1) .game-dashboard {
        display: none !important;
    }

    body:has(.mobile-home-dashboard-v1) .home-dashboard-strip {
        width: min(100%, calc(100vw - 22px));
        margin: 10px auto 12px;
        gap: 10px;
    }

    body:has(.mobile-home-dashboard-v1) .home-dashboard-widget {
        min-height: auto;
        padding: 12px;
        border-radius: 18px;
        gap: 8px;
    }

    body:has(.mobile-home-dashboard-v1) .widget-main-number {
        font-size: 28px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-home-dashboard-v1,
    body:has(.mobile-home-dashboard-v1) .mobile-more-systems-v1,
    body:has(.mobile-home-dashboard-v1) .mobile-world-feed-v1,
    body:has(.mobile-home-dashboard-v1) .player-path-card {
        width: min(100%, calc(100vw - 22px));
    }

    body:has(.mobile-home-dashboard-v1) .mobile-home-dashboard-v1 {
        gap: 10px;
        margin: 8px auto 10px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-home-hero-card,
    body:has(.mobile-home-dashboard-v1) .mobile-home-recommend-card,
    body:has(.mobile-home-dashboard-v1) .mobile-home-action-card,
    body:has(.mobile-home-dashboard-v1) .mobile-daily-choice-card,
    body:has(.mobile-home-dashboard-v1) .mobile-system-drawer,
    body:has(.mobile-home-dashboard-v1) .mobile-world-feed-v1,
    body:has(.mobile-home-dashboard-v1) .player-path-card {
        border-radius: 18px !important;
        padding: 12px !important;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-home-identity h2 {
        font-size: 24px;
        letter-spacing: 0;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-home-identity p {
        font-size: 12px;
        line-height: 1.45;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-home-core-grid {
        gap: 6px;
        margin-top: 10px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-home-core-box {
        padding: 9px;
        border-radius: 14px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-home-core-box strong {
        font-size: 14px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-home-bars {
        gap: 7px;
        margin-top: 10px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-daily-choice-card {
        margin-top: 10px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-daily-choice-grid {
        gap: 8px;
        margin-top: 8px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-daily-choice-item {
        min-height: 0;
        gap: 9px;
        padding: 10px;
        border-radius: 16px;
    }

    body:has(.mobile-home-dashboard-v1) .daily-choice-orb {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        font-size: 17px;
    }

    body:has(.mobile-home-dashboard-v1) .daily-choice-copy h4 {
        margin-bottom: 4px;
        font-size: 15px;
    }

    body:has(.mobile-home-dashboard-v1) .daily-choice-copy p,
    body:has(.mobile-home-dashboard-v1) .mobile-daily-path-hint p,
    body:has(.mobile-home-dashboard-v1) .mobile-home-recommend-item p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.45;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-daily-choice-item button,
    body:has(.mobile-home-dashboard-v1) .mobile-daily-choice-item > a {
        min-height: 38px;
        padding: 7px 10px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-home-recommend-list,
    body:has(.mobile-home-dashboard-v1) .mobile-home-action-grid {
        gap: 7px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-home-recommend-item {
        padding: 10px;
        border-radius: 15px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-home-action-grid button,
    body:has(.mobile-home-dashboard-v1) .mobile-home-action-grid a {
        min-height: 58px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-more-systems-v1 {
        margin: 0 auto 10px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-world-feed-v1 {
        margin: 0 auto 12px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-feed-tabs {
        gap: 8px;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-feed-list {
        max-height: 168px;
        overflow: auto;
        overscroll-behavior: contain;
    }

    body:has(.mobile-home-dashboard-v1) .mobile-feed-item {
        padding: 9px;
        border-radius: 14px;
    }

    body:has(.mobile-home-dashboard-v1) .player-path-card {
        margin: 10px auto 12px;
    }

    body:has(.mobile-home-dashboard-v1) .player-path-map,
    body:has(.mobile-home-dashboard-v1) .player-path-goal-list,
    body:has(.mobile-home-dashboard-v1) .player-path-guide-button {
        display: none !important;
    }

    body:has(.mobile-home-dashboard-v1) .player-path-head {
        gap: 10px;
        align-items: center;
        flex-direction: row;
    }

    body:has(.mobile-home-dashboard-v1) .player-path-head h2 {
        font-size: 20px;
    }

    body:has(.mobile-home-dashboard-v1) .player-path-head .muted {
        display: none;
    }

    body:has(.mobile-home-dashboard-v1) .player-path-progress-orb {
        width: 62px;
        height: 62px;
    }

    body:has(.mobile-home-dashboard-v1) .player-path-progress-orb strong {
        font-size: 18px;
    }

    body:has(.mobile-home-dashboard-v1) .player-path-progress-orb span {
        font-size: 10px;
    }

    body:has(.mobile-home-dashboard-v1) .player-path-progress-track {
        height: 7px;
        margin: 10px 0;
    }

    body:has(.mobile-home-dashboard-v1) .player-path-next,
    body:has(.mobile-home-dashboard-v1) .player-path-reward-panel {
        margin-top: 10px;
        padding: 11px;
        border-radius: 16px;
    }

    body:has(.mobile-home-dashboard-v1) .player-path-reward-main p {
        display: none;
    }
}

@media (max-width: 420px) {
    :root {
        --mobile-bottom-nav-height: 66px;
        --mobile-bottom-nav-offset: max(6px, env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav {
        left: 6px !important;
        right: 6px !important;
        gap: 4px !important;
    }

    .mobile-bottom-nav-item {
        min-height: 50px !important;
    }

    .mobile-bottom-nav-item strong {
        font-size: 9px !important;
    }
}

/* Mobile-1F: professional home cover */
@media (max-width: 860px) {
    .mobile-home-cover-pro {
        gap: 12px;
        margin-top: 6px !important;
    }

    .mobile-cover-stage,
    .mobile-next-step-card,
    .mobile-home-loop-card,
    .mobile-home-ability-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 20px;
        background:
            radial-gradient(circle at 92% 8%, rgba(240, 190, 82, 0.24), transparent 30%),
            radial-gradient(circle at 8% 92%, rgba(77, 193, 210, 0.18), transparent 32%),
            linear-gradient(145deg, rgba(19, 21, 37, 0.97), rgba(11, 14, 27, 0.98));
        box-shadow: 0 20px 52px rgba(0, 0, 0, 0.30);
    }

    .mobile-cover-stage {
        padding: 14px;
    }

    .mobile-cover-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(90deg, rgba(240, 190, 82, 0.26), transparent 34%, rgba(77, 193, 210, 0.18)),
            linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 28%);
        opacity: 0.65;
    }

    .mobile-cover-stage > * {
        position: relative;
        z-index: 1;
    }

    .mobile-cover-topline,
    .mobile-cover-title-row,
    .mobile-cover-meter-copy {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .mobile-cover-topline {
        min-height: 28px;
        margin-bottom: 12px;
        padding: 0 4px;
    }

    .mobile-cover-topline span {
        min-width: 0;
        color: #f0c35c;
        font-size: 12px;
        font-weight: 950;
    }

    .mobile-cover-topline a,
    .mobile-cover-profile,
    .mobile-next-action,
    .mobile-home-section-title a {
        border: 1px solid rgba(240, 195, 92, 0.32);
        border-radius: 999px;
        color: #11131f;
        background: linear-gradient(135deg, #f5cf72, #d49c37);
        text-decoration: none;
        font-weight: 950;
        white-space: nowrap;
    }

    .mobile-cover-topline a {
        min-height: 28px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        font-size: 11px;
    }

    .mobile-cover-title-row {
        align-items: flex-start;
        margin-bottom: 13px;
    }

    .mobile-cover-title-row > div {
        min-width: 0;
    }

    .mobile-cover-kicker {
        margin: 0 0 3px;
        color: rgba(247, 243, 232, 0.66);
        font-size: 12px;
        font-weight: 900;
    }

    .mobile-cover-title-row h1 {
        margin: 0;
        color: #fff7df;
        font-size: 36px;
        line-height: 1;
        letter-spacing: 0;
    }

    .mobile-cover-subtitle {
        margin: 7px 0 0;
        color: rgba(247, 243, 232, 0.74);
        font-size: 12px;
        line-height: 1.55;
    }

    .mobile-cover-status {
        flex: 0 0 72px;
        min-height: 54px;
        padding: 8px 9px;
        display: grid;
        align-content: center;
        border-radius: 16px;
        text-align: center;
        text-decoration: none;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .mobile-cover-status span {
        color: rgba(247, 243, 232, 0.52);
        font-size: 10px;
        font-weight: 900;
    }

    .mobile-cover-status strong {
        color: #f5cf72;
        font-size: 15px;
        line-height: 1.15;
    }

    .mobile-cover-status.good strong {
        color: #72e6b1;
    }

    .mobile-cover-status.warning strong {
        color: #ffd166;
    }

    .mobile-cover-status.danger strong {
        color: #ff7777;
    }

    .mobile-cover-character-panel {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) auto;
        gap: 11px;
        align-items: center;
        min-height: 112px;
        padding: 12px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.11);
        background: rgba(255, 255, 255, 0.065);
    }

    .mobile-cover-avatar {
        width: 52px;
        height: 76px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        color: #151118;
        background: linear-gradient(180deg, #ffd36a, #f0a92f);
        box-shadow: 0 15px 32px rgba(240, 169, 47, 0.22);
    }

    .mobile-cover-avatar span {
        font-size: 24px;
        font-weight: 950;
        line-height: 1;
    }

    .mobile-cover-character-main {
        min-width: 0;
    }

    .mobile-cover-character-main > span {
        display: block;
        color: rgba(247, 243, 232, 0.58);
        font-size: 11px;
        font-weight: 900;
    }

    .mobile-cover-character-main h2 {
        margin: 4px 0 8px;
        max-width: 100%;
        color: #fff7df;
        font-size: 24px;
        line-height: 1.08;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .mobile-cover-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .mobile-cover-tags strong {
        min-height: 24px;
        max-width: 100%;
        padding: 4px 8px;
        border-radius: 999px;
        color: rgba(247, 243, 232, 0.84);
        background: rgba(8, 10, 20, 0.42);
        font-size: 11px;
        line-height: 1.2;
    }

    .mobile-cover-profile {
        min-height: 32px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        font-size: 11px;
    }

    .mobile-cover-qi-block {
        margin-top: 12px;
        padding: 11px;
        border-radius: 16px;
        background: rgba(8, 10, 20, 0.36);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-cover-meter-copy {
        margin-bottom: 8px;
        color: rgba(247, 243, 232, 0.62);
        font-size: 12px;
    }

    .mobile-cover-meter-copy strong {
        color: #fff7df;
        font-size: 12px;
    }

    .mobile-cover-meter {
        height: 10px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.13);
    }

    .mobile-cover-meter i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #f5c95d, #51d7c3);
    }

    .mobile-cover-vital-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-top: 10px;
    }

    .mobile-cover-vital-grid a {
        min-height: 56px;
        padding: 9px;
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.055);
        color: #fff7df;
        text-decoration: none;
    }

    .mobile-cover-vital-grid span {
        display: block;
        color: rgba(247, 243, 232, 0.52);
        font-size: 11px;
        font-weight: 850;
    }

    .mobile-cover-vital-grid strong {
        display: block;
        margin-top: 5px;
        font-size: 16px;
        line-height: 1.1;
    }

    .mobile-next-step-card,
    .mobile-home-loop-card,
    .mobile-home-ability-card {
        padding: 13px;
    }

    .mobile-next-step-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
    }

    .mobile-next-step-card.route-battle {
        background:
            radial-gradient(circle at top right, rgba(239, 68, 68, 0.20), transparent 34%),
            linear-gradient(145deg, rgba(24, 18, 30, 0.98), rgba(12, 14, 25, 0.98));
    }

    .mobile-next-step-card.route-explore {
        background:
            radial-gradient(circle at top right, rgba(77, 193, 210, 0.22), transparent 34%),
            linear-gradient(145deg, rgba(15, 25, 35, 0.98), rgba(10, 14, 25, 0.98));
    }

    .mobile-next-step-card.route-sect {
        background:
            radial-gradient(circle at top right, rgba(156, 123, 255, 0.22), transparent 34%),
            linear-gradient(145deg, rgba(22, 18, 37, 0.98), rgba(10, 14, 25, 0.98));
    }

    .mobile-next-main {
        min-width: 0;
    }

    .mobile-next-main span,
    .mobile-home-section-title span {
        display: block;
        color: #f0c35c;
        font-size: 11px;
        font-weight: 950;
    }

    .mobile-next-main h2,
    .mobile-home-section-title h3 {
        margin: 3px 0 0;
        color: #fff7df;
        font-size: 18px;
        line-height: 1.2;
        letter-spacing: 0;
    }

    .mobile-next-main p {
        margin: 6px 0 0;
        color: rgba(247, 243, 232, 0.66);
        font-size: 12px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-next-action {
        min-height: 42px;
        padding: 0 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .mobile-loop-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }

    form.mobile-loop-tile,
    form.mobile-loop-tile button,
    a.mobile-loop-tile {
        min-width: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        text-decoration: none;
    }

    form.mobile-loop-tile {
        margin: 0;
        padding: 0;
    }

    form.mobile-loop-tile button,
    a.mobile-loop-tile {
        width: 100%;
        min-height: 86px;
        padding: 9px 6px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 5px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        background: rgba(255, 255, 255, 0.055);
        cursor: pointer;
    }

    form.mobile-loop-tile.is-primary button,
    a.mobile-loop-tile.is-primary {
        border-color: rgba(245, 207, 114, 0.55);
        box-shadow: inset 0 0 0 1px rgba(245, 207, 114, 0.20);
        background: rgba(245, 207, 114, 0.13);
    }

    .mobile-loop-tile span {
        width: 31px;
        height: 31px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        color: #11131f;
        background: linear-gradient(135deg, #f5cf72, #d49c37);
        font-size: 15px;
        font-weight: 950;
    }

    .mobile-loop-tile.route-explore span {
        background: linear-gradient(135deg, #8feaff, #46b6d8);
    }

    .mobile-loop-tile.route-battle span {
        color: #fff;
        background: linear-gradient(135deg, #ef4444, #b63247);
    }

    .mobile-loop-tile strong {
        color: #fff7df;
        font-size: 12px;
        line-height: 1.05;
    }

    .mobile-loop-tile small {
        color: rgba(247, 243, 232, 0.54);
        font-size: 10px;
        line-height: 1.1;
    }

    .mobile-ability-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .mobile-ability-grid article {
        min-height: 104px;
        padding: 10px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        background: rgba(255, 255, 255, 0.055);
    }

    .mobile-ability-grid span {
        color: rgba(247, 243, 232, 0.54);
        font-size: 11px;
        font-weight: 900;
    }

    .mobile-ability-grid strong {
        display: block;
        margin: 5px 0;
        color: #f5cf72;
        font-size: 18px;
        line-height: 1.1;
    }

    .mobile-ability-grid p {
        margin: 0;
        color: rgba(247, 243, 232, 0.62);
        font-size: 11px;
        line-height: 1.42;
    }

    body:has(.mobile-home-cover-pro) .mobile-home-action-grid button,
    body:has(.mobile-home-cover-pro) .mobile-home-action-grid a {
        min-height: 62px;
    }
}

@media (max-width: 420px) {
    .mobile-cover-title-row h1 {
        font-size: 32px;
    }

    .mobile-cover-character-panel {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .mobile-cover-avatar {
        width: 48px;
        height: 72px;
    }

    .mobile-cover-profile {
        grid-column: 1 / -1;
        width: fit-content;
        min-height: 30px;
        justify-self: end;
    }

    .mobile-cover-character-main h2 {
        font-size: 22px;
    }

    .mobile-next-step-card {
        grid-template-columns: 1fr;
    }

    .mobile-next-action {
        width: 100%;
    }

    .mobile-loop-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    form.mobile-loop-tile button,
    a.mobile-loop-tile {
        min-height: 78px;
        border-radius: 14px;
        padding: 8px 4px;
    }

    .mobile-loop-tile span {
        width: 28px;
        height: 28px;
        border-radius: 11px;
        font-size: 14px;
    }

    .mobile-loop-tile small {
        display: none;
    }

    .mobile-ability-grid {
        grid-template-columns: 1fr;
    }

    .mobile-ability-grid article {
        min-height: auto;
    }
}

/* Theme-2B: light mode coverage for the professional mobile home cover.
   This block intentionally lives after Mobile-1F so the light palette wins. */
html.theme-light .mobile-cover-stage,
html.theme-light .mobile-next-step-card,
html.theme-light .mobile-home-loop-card,
html.theme-light .mobile-home-ability-card,
html.theme-light .mobile-home-recommend-card,
html.theme-light .mobile-home-action-card {
    color: #20150b !important;
    border-color: rgba(113, 76, 28, 0.16) !important;
    background:
        radial-gradient(circle at 92% 8%, rgba(226, 185, 84, 0.22), transparent 30%),
        radial-gradient(circle at 8% 92%, rgba(10, 111, 128, 0.10), transparent 32%),
        linear-gradient(145deg, rgba(255, 252, 243, 0.96), rgba(242, 231, 210, 0.94)) !important;
    box-shadow: 0 20px 46px rgba(79, 52, 18, 0.12) !important;
}

html.theme-light .mobile-cover-stage::before {
    background:
        linear-gradient(90deg, rgba(226, 185, 84, 0.18), transparent 36%, rgba(10, 111, 128, 0.10)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 32%) !important;
}

html.theme-light .mobile-cover-topline span,
html.theme-light .mobile-next-main span,
html.theme-light .mobile-home-section-title span {
    color: #72460f !important;
}

html.theme-light .mobile-cover-kicker,
html.theme-light .mobile-cover-subtitle,
html.theme-light .mobile-next-main p,
html.theme-light .mobile-loop-tile small,
html.theme-light .mobile-ability-grid p,
html.theme-light .mobile-home-recommend-item p {
    color: rgba(32, 21, 11, 0.66) !important;
}

html.theme-light .mobile-cover-title-row h1,
html.theme-light .mobile-cover-character-main h2,
html.theme-light .mobile-next-main h2,
html.theme-light .mobile-home-section-title h3,
html.theme-light .mobile-loop-tile strong,
html.theme-light .mobile-home-recommend-item strong {
    color: #20150b !important;
    text-shadow: none !important;
}

html.theme-light .mobile-cover-status,
html.theme-light .mobile-cover-character-panel,
html.theme-light .mobile-cover-qi-block,
html.theme-light .mobile-cover-vital-grid a,
html.theme-light .mobile-ability-grid article,
html.theme-light .mobile-home-recommend-item,
html.theme-light .mobile-home-action-grid a,
html.theme-light .mobile-home-action-grid button,
html.theme-light form.mobile-loop-tile button,
html.theme-light a.mobile-loop-tile {
    color: #20150b !important;
    border-color: rgba(113, 76, 28, 0.14) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(239, 225, 199, 0.72)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

html.theme-light form.mobile-loop-tile.is-primary button,
html.theme-light a.mobile-loop-tile.is-primary {
    border-color: rgba(154, 101, 29, 0.38) !important;
    background:
        radial-gradient(circle at top right, rgba(226, 185, 84, 0.22), transparent 40%),
        linear-gradient(135deg, rgba(255, 247, 224, 0.92), rgba(238, 219, 179, 0.82)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(154, 101, 29, 0.10),
        0 12px 26px rgba(154, 101, 29, 0.12) !important;
}

html.theme-light .mobile-cover-character-main > span,
html.theme-light .mobile-cover-meter-copy,
html.theme-light .mobile-cover-vital-grid span,
html.theme-light .mobile-ability-grid span {
    color: rgba(32, 21, 11, 0.56) !important;
}

html.theme-light .mobile-cover-meter-copy strong,
html.theme-light .mobile-cover-vital-grid strong,
html.theme-light .mobile-ability-grid strong {
    color: #20150b !important;
}

html.theme-light .mobile-cover-tags strong {
    color: #2a1b0d !important;
    background: rgba(154, 101, 29, 0.10) !important;
    border: 1px solid rgba(113, 76, 28, 0.12) !important;
}

html.theme-light .mobile-cover-status span {
    color: rgba(32, 21, 11, 0.52) !important;
}

html.theme-light .mobile-cover-status strong {
    color: #72460f !important;
}

html.theme-light .mobile-cover-status.good strong {
    color: #237448 !important;
}

html.theme-light .mobile-cover-status.warning strong {
    color: #9a651d !important;
}

html.theme-light .mobile-cover-status.danger strong {
    color: #b73434 !important;
}

html.theme-light .mobile-cover-avatar,
html.theme-light .mobile-loop-tile span,
html.theme-light .mobile-home-action-grid span {
    color: #20150b !important;
    background: linear-gradient(135deg, #e2b954, #c9922e) !important;
    box-shadow: 0 12px 24px rgba(154, 101, 29, 0.16) !important;
}

html.theme-light .mobile-loop-tile.route-explore span {
    color: #06262d !important;
    background: linear-gradient(135deg, #8bdce8, #35a8bd) !important;
}

html.theme-light .mobile-loop-tile.route-battle span,
html.theme-light .mobile-home-action-grid .danger span {
    color: #fff7f2 !important;
    background: linear-gradient(135deg, #d94b4b, #a52d3c) !important;
}

html.theme-light .mobile-cover-meter {
    background: rgba(113, 76, 28, 0.14) !important;
}

html.theme-light .mobile-cover-meter i {
    background: linear-gradient(90deg, #d79f2c, #26a898) !important;
}

html.theme-light .mobile-next-step-card.route-battle {
    background:
        radial-gradient(circle at top right, rgba(183, 51, 51, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(255, 249, 241, 0.96), rgba(245, 226, 217, 0.92)) !important;
}

html.theme-light .mobile-next-step-card.route-explore {
    background:
        radial-gradient(circle at top right, rgba(10, 111, 128, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(250, 253, 250, 0.96), rgba(224, 239, 232, 0.92)) !important;
}

html.theme-light .mobile-next-step-card.route-sect {
    background:
        radial-gradient(circle at top right, rgba(104, 68, 184, 0.13), transparent 34%),
        linear-gradient(145deg, rgba(252, 249, 255, 0.96), rgba(232, 222, 245, 0.92)) !important;
}

html.theme-light .mobile-cover-topline a,
html.theme-light .mobile-cover-profile,
html.theme-light .mobile-next-action,
html.theme-light .mobile-home-section-title a,
html.theme-light .mobile-home-recommend-item > span {
    color: #20150b !important;
    border-color: rgba(113, 76, 28, 0.18) !important;
    background: linear-gradient(135deg, #e2b954, #c9922e) !important;
}

html.theme-light .mobile-home-recommend-item.danger {
    border-color: rgba(183, 51, 51, 0.22) !important;
    background:
        linear-gradient(135deg, rgba(255, 245, 242, 0.90), rgba(248, 224, 220, 0.74)) !important;
}

html.theme-light .mobile-home-recommend-item.warning {
    border-color: rgba(154, 101, 29, 0.24) !important;
    background:
        linear-gradient(135deg, rgba(255, 250, 235, 0.92), rgba(243, 226, 190, 0.74)) !important;
}

html.theme-light .mobile-home-recommend-item.good {
    border-color: rgba(36, 122, 75, 0.22) !important;
    background:
        linear-gradient(135deg, rgba(245, 255, 246, 0.92), rgba(221, 242, 223, 0.74)) !important;
}

/* =========================
   Admin-1A User Admin Panel
   ========================= */

.admin-users-hero,
.admin-users-card {
    margin-top: 20px;
}

.admin-user-table {
    display: grid;
    gap: 10px;
}

.admin-user-row {
    display: grid;
    grid-template-columns: 60px 160px 90px 100px 230px 150px 150px 260px;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--border);
}

.admin-user-head {
    color: var(--gold);
    font-weight: 900;
    background: rgba(224, 173, 69, 0.10);
}

.admin-user-row small {
    display: block;
    color: var(--muted);
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
}

.status-active {
    color: var(--success);
}

.status-banned {
    color: var(--danger);
}

.status-deleted {
    color: var(--muted);
}

.admin-user-row.status-banned {
    border-color: rgba(255, 114, 114, 0.3);
}

.admin-user-row.status-deleted {
    opacity: 0.55;
}

.admin-user-actions {
    display: grid;
    gap: 8px;
}

.admin-user-actions form {
    margin: 0;
}

.admin-user-actions button {
    padding: 9px 10px;
    font-size: 13px;
}

.reset-form {
    display: grid;
    grid-template-columns: 1fr 70px;
    gap: 6px;
}

.reset-form input {
    padding: 9px 10px;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .admin-user-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-user-head {
        display: none;
    }
}

/* =========================
   Admin Users Page Overflow Fix
   修复 /admin/users 用户列表横向撑爆
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 页面大容器不要被内容撑爆 */
.admin-users-page,
.admin-users-shell,
.admin-users-wrap,
.admin-users-section,
.admin-users-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* 用户列表外层允许横向滚动，而不是整页爆出去 */
.admin-users-table-wrap,
.admin-users-table-scroll,
.admin-users-list-wrap,
.admin-users-list-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

/* 表格 / 网格本体 */
.admin-users-table,
.admin-users-grid,
.admin-users-list {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* 如果你这页是用 grid 做表头 / 行 */
.admin-users-header,
.admin-users-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns:
    52px
    minmax(120px, 1.1fr)
    minmax(90px, 0.8fr)
    minmax(80px, 0.7fr)
    minmax(170px, 1.4fr)
    minmax(130px, 1fr)
    minmax(110px, 0.9fr)
    132px;
  gap: 12px;
  align-items: center;
}

/* 每个格子都允许缩，不要把整行撑爆 */
.admin-users-header > *,
.admin-users-row > * {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 让操作列变成窄一点的竖排按钮 */
.admin-user-actions,
.admin-users-actions,
.user-actions {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-user-actions .btn,
.admin-users-actions .btn,
.user-actions .btn,
.admin-user-actions button,
.admin-users-actions button,
.user-actions button,
.admin-user-actions form,
.admin-users-actions form,
.user-actions form {
  width: 100%;
}

/* 如果有表格也一起兜底 */
table.admin-users-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

table.admin-users-table th,
table.admin-users-table td {
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}

/* 防止右边按钮太长 */
.admin-user-actions .btn,
.admin-users-actions .btn,
.user-actions .btn,
button[class*="admin-user"],
button[class*="user-action"] {
  white-space: nowrap;
}

/* 中等屏幕开始压缩列 */
@media (max-width: 1200px) {
  .admin-users-header,
  .admin-users-row {
    grid-template-columns:
      48px
      minmax(110px, 1fr)
      minmax(80px, 0.75fr)
      minmax(75px, 0.7fr)
      minmax(150px, 1.1fr)
      minmax(120px, 0.9fr)
      minmax(100px, 0.85fr)
      120px;
    gap: 10px;
  }
}

/* 更窄一点时，允许表格横向滚动 */
@media (max-width: 980px) {
  .admin-users-table,
  .admin-users-grid,
  .admin-users-list,
  .admin-users-header,
  .admin-users-row {
    min-width: 980px;
  }
}

/* 手机时操作按钮更好按 */
@media (max-width: 640px) {
  .admin-user-actions,
  .admin-users-actions,
  .user-actions {
    gap: 10px;
  }

  .admin-user-actions .btn,
  .admin-users-actions .btn,
  .user-actions .btn,
  .admin-user-actions button,
  .admin-users-actions button,
  .user-actions button {
    min-height: 40px;
    font-size: 14px;
  }
}

/* =========================
   REAL FIX: /admin/users overflow
   命中真实 class：admin-user-row
   ========================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 整页不要横向爆 */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 后台卡片不要被内容撑爆 */
.admin-users-card,
.admin-user-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

/* 重点：覆盖旧的 1280px 固定 grid */
.admin-user-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
        42px
        minmax(90px, 1fr)
        minmax(76px, 0.75fr)
        66px
        minmax(130px, 1.35fr)
        minmax(108px, 0.95fr)
        minmax(94px, 0.85fr)
        116px !important;

    gap: 8px !important;
    align-items: center !important;

    padding: 12px !important;
}

/* 表头也一起压缩 */
.admin-user-head {
    grid-template-columns:
        42px
        minmax(90px, 1fr)
        minmax(76px, 0.75fr)
        66px
        minmax(130px, 1.35fr)
        minmax(108px, 0.95fr)
        minmax(94px, 0.85fr)
        116px !important;
}

/* 每一格都允许换行，不准撑爆 */
.admin-user-row > *,
.admin-user-head > * {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* 账号 / 角色 / 游戏角色文字压缩 */
.admin-user-row strong,
.admin-user-row small {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 操作栏固定在自己的格子内 */
.admin-user-actions {
    width: 100% !important;
    max-width: 116px !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* 操作栏里的 form 不准撑开 */
.admin-user-actions form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* 按钮全部缩进格子内 */
.admin-user-actions button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding: 8px 6px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

/* 重置密码 input + button 改成上下排列，不然一定爆 */
.reset-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.reset-form input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding: 7px 6px !important;
    font-size: 12px !important;
}

/* 删除按钮不要太大 */
.danger-action {
    width: 100% !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
}

/* 如果屏幕不够宽，改成卡片式，不再硬塞表格 */
@media (max-width: 900px) {
    .admin-user-head {
        display: none !important;
    }

    .admin-user-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 16px !important;
    }

    .admin-user-row > span {
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 10px;
        align-items: start;
    }

    .admin-user-actions {
        max-width: 100% !important;
    }
}

/* =========================
   Admin-2B User Console Polish
   ========================= */

body:has(.admin-users-page) .page {
    width: min(1360px, calc(100% - 32px));
}

.admin-users-page {
    --admin-card: rgba(19, 20, 33, 0.92);
    --admin-card-soft: rgba(255, 255, 255, 0.055);
    --admin-line: rgba(255, 255, 255, 0.11);
    --admin-text-soft: rgba(245, 241, 232, 0.68);
    --admin-cyan: #73d9e8;
    --admin-green: #8ff0b2;
    --admin-red: #ff7272;
    --admin-violet: #a990ff;
}

.admin-users-topbar {
    align-items: flex-start;
    margin-bottom: 18px;
}

.admin-users-topbar h1 {
    max-width: 760px;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.08;
}

.admin-users-kicker {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-users-alert {
    margin: 14px 0;
}

.admin-users-hero,
.admin-users-toolbar,
.admin-users-card {
    border-radius: 18px !important;
}

.admin-users-page .admin-users-hero {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    border-color: rgba(224, 173, 69, 0.20) !important;
    background:
        linear-gradient(135deg, rgba(224, 173, 69, 0.12), transparent 34%),
        linear-gradient(160deg, rgba(115, 217, 232, 0.10), transparent 45%),
        var(--admin-card) !important;
}

.admin-users-page .admin-users-hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -68px 18%;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(224, 173, 69, 0.18), rgba(115, 217, 232, 0.10), transparent);
    transform: rotate(-2deg);
}

.admin-users-hero-head {
    position: relative;
    z-index: 1;
    gap: 18px;
}

.admin-users-hero-head h2 {
    margin-bottom: 8px;
}

.admin-users-hero-head .muted strong {
    color: var(--text);
}

.admin-users-home-link {
    white-space: nowrap;
}

.admin-users-metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.admin-users-metric {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--admin-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
}

.admin-users-metric span {
    display: block;
    color: var(--admin-text-soft);
    font-size: 12px;
    font-weight: 800;
}

.admin-users-metric strong {
    display: block;
    margin-top: 8px;
    color: var(--gold);
    font-size: 30px;
    line-height: 1;
}

.admin-users-metric.is-good strong {
    color: var(--admin-green);
}

.admin-users-metric.is-warning strong {
    color: var(--admin-red);
}

.admin-users-metric.is-cyan strong {
    color: var(--admin-cyan);
}

.admin-users-metric.is-purple strong {
    color: var(--admin-violet);
}

.admin-users-page .admin-users-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) minmax(150px, 0.55fr) minmax(150px, 0.55fr) 128px;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
    padding: 16px !important;
    background: rgba(23, 24, 39, 0.76) !important;
}

.admin-users-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.admin-users-field span {
    color: var(--admin-text-soft);
    font-size: 12px;
    font-weight: 900;
}

.admin-users-field input,
.admin-users-field select {
    height: 42px;
    border-radius: 12px;
    padding: 0 13px;
}

.admin-users-reset {
    height: 42px;
    padding: 0 14px !important;
    border-radius: 12px !important;
}

.admin-users-page .admin-users-card {
    margin-top: 16px;
    padding: 0 !important;
    overflow: hidden !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(18, 19, 31, 0.90) !important;
}

.admin-users-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 20px 22px;
    border-bottom: 1px solid var(--admin-line);
}

.admin-users-card-head h2 {
    margin: 0 0 6px;
}

.admin-users-card-head p {
    margin: 0;
}

.admin-users-card-head p strong {
    color: var(--gold);
}

.admin-users-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    color: var(--admin-text-soft);
    font-size: 12px;
    font-weight: 800;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--admin-green);
    box-shadow: 0 0 0 4px rgba(143, 240, 178, 0.10);
}

.status-dot.banned {
    background: var(--admin-red);
    box-shadow: 0 0 0 4px rgba(255, 114, 114, 0.10);
}

.status-dot.deleted {
    background: var(--muted);
    box-shadow: 0 0 0 4px rgba(184, 174, 207, 0.10);
}

.admin-users-page .admin-user-table {
    display: grid !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.admin-users-page .admin-user-row {
    display: grid !important;
    grid-template-columns:
        66px
        minmax(150px, 1.1fr)
        minmax(120px, 0.75fr)
        minmax(108px, 0.68fr)
        minmax(210px, 1.35fr)
        minmax(124px, 0.74fr)
        minmax(124px, 0.74fr)
        minmax(176px, 0.9fr) !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--admin-line) !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.028) !important;
}

.admin-users-page .admin-user-row:nth-child(odd):not(.admin-user-head) {
    background: rgba(255, 255, 255, 0.045) !important;
}

.admin-users-page .admin-user-row:hover:not(.admin-user-head) {
    background: rgba(224, 173, 69, 0.075) !important;
}

.admin-users-page .admin-user-row.status-active {
    border-left-color: rgba(143, 240, 178, 0.72) !important;
}

.admin-users-page .admin-user-row.status-banned {
    border-left-color: rgba(255, 114, 114, 0.76) !important;
}

.admin-users-page .admin-user-row.status-deleted {
    border-left-color: rgba(184, 174, 207, 0.45) !important;
    opacity: 0.72 !important;
}

.admin-users-page .admin-user-head {
    position: sticky;
    top: 0;
    z-index: 2;
    color: var(--gold) !important;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    background: rgba(22, 20, 28, 0.96) !important;
    box-shadow: 0 1px 0 var(--admin-line);
}

.admin-users-page .admin-user-cell,
.admin-users-page .admin-user-head > span {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.admin-users-page .admin-user-cell > strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    line-height: 1.25;
}

.admin-users-page .admin-user-cell > small {
    display: block;
    margin-top: 4px;
    color: var(--admin-text-soft);
    font-size: 12px;
    line-height: 1.35;
}

.admin-user-id strong {
    color: var(--gold) !important;
}

.admin-empty-value {
    color: var(--muted) !important;
}

.role-pill,
.status-pill {
    display: inline-flex !important;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 900;
    white-space: normal;
}

.role-super_admin {
    border-color: rgba(224, 173, 69, 0.32);
    background: rgba(224, 173, 69, 0.12);
    color: var(--gold) !important;
}

.role-admin {
    border-color: rgba(169, 144, 255, 0.30);
    background: rgba(169, 144, 255, 0.12);
    color: var(--admin-violet) !important;
}

.role-user {
    border-color: rgba(115, 217, 232, 0.25);
    background: rgba(115, 217, 232, 0.10);
    color: var(--admin-cyan) !important;
}

.status-pill.status-active {
    border-color: rgba(143, 240, 178, 0.30);
    background: rgba(143, 240, 178, 0.10);
    color: var(--admin-green) !important;
}

.status-pill.status-banned {
    border-color: rgba(255, 114, 114, 0.35);
    background: rgba(255, 114, 114, 0.11);
    color: var(--admin-red) !important;
}

.status-pill.status-deleted {
    color: var(--muted) !important;
}

.admin-users-page .admin-user-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.admin-users-page .admin-user-actions form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.admin-users-page .admin-user-actions button,
.admin-users-page .admin-action-button {
    min-height: 34px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

.admin-users-page .admin-action-button.is-good {
    background: rgba(143, 240, 178, 0.14);
    color: var(--admin-green);
    border: 1px solid rgba(143, 240, 178, 0.28);
}

.admin-users-page .admin-action-button.is-warning {
    color: #f8d38b;
    border-color: rgba(224, 173, 69, 0.26);
}

.admin-users-page .danger-action {
    background: rgba(255, 114, 114, 0.12) !important;
    color: #ffd6d6 !important;
    border: 1px solid rgba(255, 114, 114, 0.32) !important;
}

.admin-users-page .reset-form {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.admin-users-page .reset-form input {
    height: 34px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 9px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

.admin-users-empty {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 42px 20px;
    color: var(--admin-text-soft);
    border-top: 1px solid var(--admin-line);
}

.admin-users-empty[hidden] {
    display: none;
}

.admin-users-empty strong {
    color: var(--text);
    font-size: 18px;
}

html.theme-light body:has(.admin-users-page) {
    background:
        radial-gradient(circle at top left, rgba(201, 146, 46, 0.18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(31, 130, 142, 0.10), transparent 42%),
        #f4ead7;
}

html.theme-light .admin-users-page {
    --admin-card: rgba(255, 252, 243, 0.94);
    --admin-card-soft: rgba(113, 76, 28, 0.055);
    --admin-line: rgba(113, 76, 28, 0.14);
    --admin-text-soft: rgba(32, 21, 11, 0.62);
    --admin-cyan: #127c8d;
    --admin-green: #247a4b;
    --admin-red: #b73434;
    --admin-violet: #6844b8;
}

html.theme-light .admin-users-page .admin-users-hero,
html.theme-light .admin-users-page .admin-users-toolbar,
html.theme-light .admin-users-page .admin-users-card,
html.theme-light .admin-users-metric {
    color: #20150b !important;
    border-color: var(--admin-line) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(240, 226, 199, 0.82)) !important;
    box-shadow: 0 18px 42px rgba(79, 52, 18, 0.12) !important;
}

html.theme-light .admin-users-page .admin-user-head {
    background: rgba(248, 238, 217, 0.98) !important;
}

html.theme-light .admin-users-page .admin-user-row {
    background: rgba(255, 255, 255, 0.54) !important;
}

html.theme-light .admin-users-page .admin-user-row:nth-child(odd):not(.admin-user-head) {
    background: rgba(244, 232, 207, 0.64) !important;
}

html.theme-light .admin-users-page .admin-user-cell > strong,
html.theme-light .admin-users-empty strong {
    color: #20150b;
}

@media (max-width: 1180px) {
    .admin-users-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-users-page .admin-user-row {
        grid-template-columns:
            56px
            minmax(134px, 1.05fr)
            minmax(104px, 0.72fr)
            minmax(96px, 0.66fr)
            minmax(178px, 1.18fr)
            minmax(112px, 0.72fr)
            minmax(112px, 0.72fr)
            minmax(162px, 0.9fr) !important;
        gap: 10px !important;
        padding-inline: 14px !important;
    }
}

@media (max-width: 980px) {
    body:has(.admin-users-page) .page {
        width: min(720px, calc(100% - 24px));
    }

    .admin-users-topbar {
        display: grid;
    }

    .admin-users-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-users-page .admin-users-toolbar {
        grid-template-columns: 1fr 1fr !important;
    }

    .admin-users-reset {
        grid-column: 1 / -1;
    }

    .admin-users-card-head {
        display: grid;
    }

    .admin-users-legend {
        justify-content: flex-start;
    }

    .admin-users-page .admin-user-head {
        display: none !important;
    }

    .admin-users-page .admin-user-table {
        gap: 12px !important;
        padding: 14px !important;
    }

    .admin-users-page .admin-user-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--admin-line) !important;
        border-left-width: 4px !important;
        border-radius: 16px !important;
        overflow: hidden;
    }

    .admin-users-page .admin-user-cell {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 11px 14px;
        border-bottom: 1px solid var(--admin-line);
    }

    .admin-users-page .admin-user-cell::before,
    .admin-users-page .admin-user-actions::before {
        content: attr(data-label);
        color: var(--admin-text-soft);
        font-size: 12px;
        font-weight: 900;
    }

    .admin-users-page .admin-user-cell > strong,
    .admin-users-page .admin-user-cell > small,
    .admin-users-page .admin-user-cell > .role-pill,
    .admin-users-page .admin-user-cell > .status-pill {
        grid-column: 2;
    }

    .admin-users-page .admin-user-cell > small {
        margin-top: -5px;
    }

    .admin-users-page .admin-user-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 12px 14px;
    }

    .admin-users-page .admin-user-actions::before {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    body:has(.admin-users-page) .page {
        width: min(100% - 18px, 520px);
        padding-top: 22px;
    }

    .admin-users-topbar h1 {
        font-size: 28px;
    }

    .admin-users-hero,
    .admin-users-toolbar,
    .admin-users-card {
        border-radius: 14px !important;
    }

    .admin-users-metrics,
    .admin-users-page .admin-users-toolbar {
        grid-template-columns: 1fr !important;
    }

    .admin-users-metric {
        padding: 12px 14px;
    }

    .admin-users-metric strong {
        font-size: 25px;
    }

    .admin-users-card-head {
        padding: 16px;
    }

    .admin-users-page .admin-user-table {
        padding: 10px !important;
    }

    .admin-users-page .admin-user-cell {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
    }

    .admin-users-page .admin-user-actions {
        grid-template-columns: 1fr !important;
        padding: 12px;
    }

    .admin-users-page .reset-form {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 980px) {
    .admin-users-page .admin-user-row.admin-user-head {
        display: none !important;
    }
}