:root {
            --bg-outer: #161616;
            --bg-app: #181818;
            --bg-panel: #1d1d1d;
            --bg-card: #232323;
            --bg-raised: #282828;
            --bg-hover: #2c2c2c;
            --line: #2c2c2c;
            --line-soft: #262626;
            --line-control: #3a3a3a;
            --line-hover: #4d4d4d;
            --txt-strong: #d8d8d8;
            --txt: #a8a8a8;
            --txt-dim: #7d7d7d;
            --txt-faint: #565656;
            --gold: #c8b078;
            --gold-bright: #e0cd96;
            --gold-deep: #8a7c54;
            --gold-tint: rgba(200,176,120,.13);
            --green: #7aa878; --red: #c86a6a; --blue: #6a92b0;
            --radius: 4px;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background-color: var(--bg-outer);
            font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "STHeiti", sans-serif;
            color: var(--txt);
            min-height: 100vh;
            display: flex; justify-content: center; align-items: center;
            user-select: none; -webkit-user-select: none; letter-spacing: 0.5px;
        }
        #gameViewport {
            width: 1140px; height: 574px;
            max-width: 100vw; max-height: 100vh;
            background-color: var(--bg-outer);
            border: 1px solid var(--line-control); border-radius: 3px;
            box-shadow: 0 10px 48px rgba(0,0,0,0.66), inset 0 0 0 1px rgba(255,255,255,0.02);
            position: relative; overflow: hidden;
            display: flex; align-items: center; justify-content: center;
        }
        .game-container {
            width: 1140px; height: 574px;
            background-color: var(--bg-app);
            display: flex; flex-direction: column;
            overflow: hidden; position: relative;
            flex: 0 0 auto;
        }
        .map-quicktools {
            position: absolute; right: 10px; bottom: 12px; z-index: 30;
            display: flex; flex-direction: column; gap: 6px; pointer-events: auto;
        }
        /* 出征/进军点选目标提示条 */
        .pick-hint {
            position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
            z-index: 31; display: none; align-items: center; gap: 12px;
            padding: 7px 14px; white-space: nowrap; pointer-events: auto;
            background: rgba(24,24,24,.92); border: 1px solid var(--gold-deep); border-radius: 999px;
            box-shadow: 0 3px 12px rgba(0,0,0,.55);
        }
        .pick-hint.show { display: flex; }
        .pick-hint-t { font-size: 11px; color: var(--gold-bright); letter-spacing: 1px; }
        .pick-hint-x { font-size: 10px; color: var(--txt-dim); cursor: pointer; padding: 1px 6px; border-left: 1px solid var(--line); }
        .pick-hint-x:hover { color: var(--red); }
        #mapArea.pick-mode { cursor: crosshair; }
        #mapArea.pick-mode #mapCitiesContainer { cursor: pointer; }
        .mqt-btn {
            min-width: 46px; padding: 6px 10px; font-size: 11px; letter-spacing: 2px;
            color: #cfcfcf; background: rgba(28,28,28,.86);
            border: 1px solid #4a4a4a; border-radius: 3px; cursor: pointer;
            line-height: 1.2; text-align: center; user-select: none;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.4);
        }
        .mqt-btn:hover { background: #343434; border-color: #6c6c6c; color: #f2f2f2; }
        .mqt-btn:active { background: #2a2a2a; }
        .mqt-btn.mqt-icon { padding: 4px; width: 30px; height: 30px; min-width: 0; display: flex; align-items: center; justify-content: center; }
        .mqt-btn.mqt-icon svg { width: 16px; height: 16px; display: block; }
        /* M18 工事位开关：开启态用暖金描边与图标，与定位按钮区分 */
        .mqt-btn.mqt-on { background: #3a3c2e; border-color: #8d8a6a; color: #e2dcc4; }
        .mqt-btn.mqt-on svg { stroke: #e2dcc4; }
        .mqt-btn.mqt-on svg circle { fill: #e2dcc4; }
        .top-bar {
            display: flex; align-items: center; justify-content: space-between;
            padding: 6px 12px;
            background: linear-gradient(180deg, #212121, #1d1d1d);
            border-bottom: 1px solid var(--line);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
            gap: 4px; flex-wrap: wrap; min-height: 40px;
        }
        .server-info {
            position: relative; font-size: 10px; color: var(--txt); letter-spacing: 1px;
            white-space: nowrap; padding-left: 8px; font-weight: bold;
        }
        .server-info::before {
            content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
            width: 3px; height: 11px; border-radius: 1px; background: var(--gold);
            box-shadow: 0 0 6px rgba(200,176,120,.45);
        }
        .resources { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
        .resource-item { display: flex; align-items: center; gap: 3px; font-size: 10px; white-space: nowrap; }
        .resource-icon {
            width: 16px; height: 16px; border-radius: 3px;
            display: flex; align-items: center; justify-content: center;
            font-size: 7px; font-weight: bold;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
        }
        .res-wood .resource-icon { background-color: #3a4a2e; color: #8aaa6a; border: 1px solid #4a5a3e; }
        .res-stone .resource-icon { background-color: #3a3630; color: #a89878; border: 1px solid #4a4640; }
        .res-iron .resource-icon { background-color: #2e2e36; color: #9898a8; border: 1px solid #3e3e46; }
        .res-grain .resource-icon { background-color: #3a3a2a; color: #a0a068; border: 1px solid #4a4a3a; }
        .res-coin .resource-icon { background-color: #4a3f20; color: #c8a860; border: 1px solid #5a4f30; }
        .res-soldier .resource-icon { background-color: #3a2e2e; color: #aa8a8a; border: 1px solid #4a3e3e; }
        .resource-value { font-weight: bold; font-size: 11px; color: var(--txt-strong); font-variant-numeric: tabular-nums; }
        .resource-value.warn { color: #e6c484; text-shadow: 0 0 5px rgba(224,184,112,0.32); cursor: help; }
        .resource-cap { font-size: 8px; color: var(--txt-faint); font-variant-numeric: tabular-nums; }
        .resource-label { font-size: 8px; color: var(--txt-dim); font-variant-numeric: tabular-nums; }
        .resource-label.neg { color: #c87a6a; font-weight: bold; }
        .main-content { display: flex; flex: 1; min-height: 500px; position: relative; }
        .side-panel-left {
            width: 216px; min-width: 198px; background-color: var(--bg-panel);
            border-right: 1px solid var(--line); display: flex; flex-direction: column;
            gap: 1px; overflow: hidden; font-size: 10px;
        }
        .side-panel-left > .panel-section { flex: 0 0 auto; }
        .panel-section { padding: 7px 9px 8px; border-bottom: 1px solid var(--line-soft); }
        .panel-section-title {
            position: relative; font-size: 8px; color: #9a9484; letter-spacing: 2px;
            margin-bottom: 5px; font-weight: bold; padding-left: 7px;
        }
        .panel-section-title::before {
            content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
            width: 2px; height: 8px; border-radius: 1px; background: var(--gold); opacity: .82;
        }
        .lord-info { display: flex; align-items: center; gap: 7px; padding: 9px 9px 8px; border-bottom: 1px solid var(--line-soft); }
        .lord-avatar {
            width: 32px; height: 32px; border-radius: 50%; background-color: #26231d;
            border: 2px solid var(--gold-deep); display: flex; align-items: center; justify-content: center;
            font-size: 12px; color: var(--gold); flex-shrink: 0;
            box-shadow: 0 0 0 2px rgba(200,176,120,.10), inset 0 1px 0 rgba(255,255,255,.05);
        }
        .lord-name { font-size: 11px; font-weight: bold; color: var(--txt-strong); letter-spacing: 1px; }
        .lord-level { color: var(--txt-dim); font-size: 8px; margin-top: 1px; }
        .stat-row { display: flex; justify-content: space-between; padding: 1.5px 0; font-size: 9px; color: var(--txt-dim); }
        .stat-val { color: var(--txt); font-variant-numeric: tabular-nums; }
        .order-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 1.5px 0; font-size: 9px; color: var(--txt-dim); cursor: help;
        }
        .order-row .order-hint {
            font-size: 8px; color: var(--green); opacity: 0; transition: opacity 0.15s;
            min-width: 70px; text-align: right;
        }
        .order-row:hover .order-hint { opacity: 1; }
        .order-hint.full { color: #666; }
        .map-area {
            flex: 1; background-color: #1a1a1a; position: relative; overflow: hidden;
            cursor: grab; min-width: 400px;
            background-image: radial-gradient(circle, #232323 1px, transparent 1px);
            background-size: 20px 20px;
        }
        .map-area:active { cursor: grabbing; }
        #mapWorld {
            position: absolute; top: 0; left: 0; transform-origin: 0 0;
            will-change: transform;
        }
        #mapCitiesContainer { position: absolute; inset: 0; pointer-events: none; }
        .map-grid-overlay {
            position: absolute; inset: 0; pointer-events: none;
            background: linear-gradient(to right, #2a2a2a 1px, transparent 1px),
                        linear-gradient(to bottom, #2a2a2a 1px, transparent 1px);
            background-size: 40px 40px; opacity: 0.4;
        }
        .map-routes {
            display: none;
            position: absolute; inset: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 0; overflow: visible;
        }
        .map-main-canvas {
            position: absolute; top: 0; left: 0;
            pointer-events: none; z-index: 2;
        }
        .route-line {
            vector-effect: non-scaling-stroke;
            fill: none;
            transition: opacity 0.15s;
        }
        .route-line.side-player  { stroke: #5a8a5a; }
        .route-line.side-enemy   { stroke: #7a3a3a; }
        .route-line.side-ally    { stroke: #3a608a; }
        .route-line.side-neutral { stroke: #3a3a3a; opacity: 0.65; }
        .route-line.highlighted {
            filter: brightness(1.4) drop-shadow(0 0 2px currentColor);
        }
        .route-hit {
            stroke: rgba(0,0,0,0.001);
            stroke-width: 12;
            fill: none;
            pointer-events: stroke;
            cursor: pointer;
            vector-effect: non-scaling-stroke;
        }
        .map-troop-canvas {
            position: absolute; inset: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 4;
        }
        .map-label {
            position: absolute; top: 7px; left: 10px; font-size: 8px;
            color: #444; letter-spacing: 2px; pointer-events: none; z-index: 2;
        }
        .minimap-wrap {
            position: absolute; top: 8px; right: 10px; width: 140px; height: 80px;
            z-index: 6; overflow: hidden; cursor: crosshair;
            background-color: rgba(16,16,18,0.82);
            border: 1px solid rgba(200,176,120,0.32); border-radius: 5px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.45);
        }
        .minimap-wrap canvas { display: block; width: 140px; height: 80px; }
        /* ===== v4.45 需求5：军情栏（小地图正下方，暗色战术风格；>5 条出滚动条）=====
           item 高度约 19px × 5 ≈ 95px，所以 .nf-list 固定 95px 高，第 6 条起滚动查看 */
        .notice-feed {
            position: absolute; top: 94px; right: 10px; width: 140px;
            z-index: 6; overflow: hidden;
            background-color: rgba(16,16,18,0.86);
            border: 1px solid rgba(200,176,120,0.22); border-radius: 4px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.45);
        }
        .nf-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 3px 6px; font-size: 8px; letter-spacing: 2px; color: var(--gold);
            background: rgba(200,176,120,0.08); border-bottom: 1px solid #2b2b2b;
        }
        .nf-count { font-size: 7px; letter-spacing: 0; color: #7d7d7d; }
        .nf-list { max-height: 95px; overflow-y: auto; overflow-x: hidden; }
        .nf-list::-webkit-scrollbar { width: 3px; }
        .nf-list::-webkit-scrollbar-track { background: transparent; }
        .nf-list::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 2px; }
        .nf-item {
            display: flex; align-items: center; gap: 4px; padding: 3px 5px;
            cursor: pointer; border-left: 2px solid transparent;
            transition: background-color .12s;
        }
        .nf-item + .nf-item { border-top: 1px solid rgba(255,255,255,0.045); }
        .nf-item:hover { background: rgba(200,176,120,0.10); }
        .nf-item:active { background: rgba(200,176,120,0.18); }
        .nf-k {
            flex: 0 0 auto; font-size: 7.5px; line-height: 11px; padding: 0 2px;
            border: 1px solid; border-radius: 2px; letter-spacing: 0;
        }
        .nf-t { flex: 1 1 auto; min-width: 0; font-size: 8px; color: #cfcabd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .nf-s { flex: 0 0 auto; font-size: 7px; color: #6f6f6f; }
        .nf-item.k-fight { border-left-color: #c86a6a; }
        .nf-item.k-fight .nf-k { color: #e08b8b; border-color: #6d3c3c; background: rgba(200,106,106,0.10); }
        .nf-item.k-besieged { border-left-color: #d0a04a; }
        .nf-item.k-besieged .nf-k { color: #e0c07a; border-color: #6d5a2c; background: rgba(208,160,74,0.10); }
        .nf-item.k-siege { border-left-color: #8fb6d8; }
        .nf-item.k-siege .nf-k { color: #9fc0da; border-color: #3b4e5e; background: rgba(143,182,216,0.10); }
        .nf-item.k-incoming { border-left-color: #a07ad0; }
        .nf-item.k-incoming .nf-k { color: #c3a7e4; border-color: #4f3d6b; background: rgba(160,122,208,0.10); }
        /* v4.48 需求3：盟友 / 附庸的城池被攻击 —— 青绿配色，与我方（金/紫）明确区分 */
        .nf-item.k-allyBesieged, .nf-item.k-allyIncoming { border-left-color: #4fae9a; }
        .nf-item.k-allyBesieged .nf-k, .nf-item.k-allyIncoming .nf-k {
            color: #85d9c6; border-color: #2d6a5f; background: rgba(79,174,154,0.12);
        }
        .nf-item.k-allyBesieged .nf-s, .nf-item.k-allyIncoming .nf-s { color: #5d9089; }
        /* v4.5x 需求6：我方防御工事（望楼/拒马）正被敌军拆除 —— 橙红警示配色 */
        .nf-item.k-dismantle { border-left-color: #d0784a; }
        .nf-item.k-dismantle .nf-k { color: #e0a07a; border-color: #6d4a2c; background: rgba(208,120,74,0.12); }
        .nf-item.k-dismantle .nf-s { color: #c98a5d; }
        .terrain-legend {
            position: absolute; top: 24px; left: 10px; right: auto; font-size: 7px;
            color: #7a7a7a; pointer-events: none; z-index: 5;   /* 高于部队/行军图标层（map-troop-canvas z-index 4），行军图标不压图例 */
            background-color: rgba(18,18,18,0.88); border: 1px solid #343434;
            padding: 5px 7px; border-radius: 3px; letter-spacing: 0.5px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.4);
        }
        .terrain-legend-row { display: flex; align-items: center; gap: 6px; padding: 1.5px 0; }
        .terrain-legend-swatch {
            display: inline-block; width: 14px; height: 0;
            border-radius: 1px; border-top-style: solid;
        }
        .terrain-legend-row svg { display: block; flex: 0 0 auto; }
        .tl-group-title { font-size: 6px; color: #8a8474; letter-spacing: 1px; margin-bottom: 3px; font-weight: bold; }
        .tl-group-title--gap { margin-top: 6px; padding-top: 5px; border-top: 1px solid #2c2c2c; }
        .tl-name { color: #9c9c9c; white-space: nowrap; }
        .tl-name--key { color: #dcc590; }
        .tl-rate { margin-left: auto; padding-left: 10px; font-size: 6px; color: #626262; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .tl-rate--key { color: #c8a86a; }
        .unit-pick { display: flex; gap: 6px; margin-top: 4px; }
        .unit-btn {
            flex: 1; background: #222; border: 1px solid #3a3a3a; border-radius: 2px;
            padding: 6px 4px; cursor: pointer; color: #adadad;
            display: flex; flex-direction: column; align-items: center; gap: 2px;
            transition: background-color 0.15s, border-color 0.15s, color 0.15s;
        }
        .unit-btn .ub-name { font-size: 10px; font-weight: bold; letter-spacing: 2px; }
        .unit-btn .ub-sub { font-size: 7px; color: #888; line-height: 1.3; }
        .unit-btn:hover { border-color: #5c5c5c; color: #ccc; }
        .unit-btn.is-active {
            background: #3a3a3a; border-color: #8a8a8a; color: #f2f2f2;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset;
        }
        .unit-btn.is-active .ub-sub { color: #c6c6c6; }
        /* v4.50 需求3：兵种评级小标（界面只显示 S/A/B/C/D，数值仅用于结算） */
        .ug {
            display: inline-block; min-width: 8px; padding: 0 1px; margin: 0 1px;
            font-size: 8px; font-weight: bold; line-height: 1.15; text-align: center;
            font-variant-numeric: tabular-nums; border-radius: 2px;
        }
        .ug-S { color: #f0cf78; text-shadow: 0 0 5px rgba(240,207,120,.45); }
        .ug-A { color: #d8c39a; }
        .ug-B { color: #a9b0a2; }
        .ug-C { color: #8a8578; }
        .ug-D { color: #a3706a; }
        .unit-hint { font-size: 8px; margin-top: 5px; color: #9a9a9a; }
        .unit-hint.is-set { color: #8a9a7a; }
        /* 整页面板（强征／招募／内政／玩家／同盟／建设／排行榜）统一暗底战术地图风：
           中性炭灰底 + 极淡点阵（与地图区同纹理），不再使用暖褐／偏黄渐变 */
        .internal-view {
            position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column;
            background-color: #151515;
            background-image:
                linear-gradient(180deg, rgba(30,30,30,.92) 0%, rgba(17,17,17,.97) 100%),
                radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 1px);
            background-size: auto, 22px 22px;
            padding: 12px 14px; overflow-y: auto;
        }
        .internal-view.show { display: flex; }
        /* 整页标题：左侧金色旗标 + 细分隔线（同地图面板标题语言） */
        .internal-view > .modal-title,
        .internal-view .page-title {
            position: relative; font-size: 13px; color: #dedacf; font-weight: bold;
            letter-spacing: 4px; padding: 0 0 8px 11px; margin-bottom: 9px;
            border-bottom: 1px solid #2a2a2a;
        }
        .internal-view > .modal-title::before,
        .internal-view .page-title::before {
            content: ''; position: absolute; left: 0; top: 1px;
            width: 3px; height: 12px; border-radius: 1px; background: var(--gold);
            box-shadow: 0 0 6px rgba(200,176,120,.42);
        }
        .internal-view > .modal-info {
            font-size: 8.5px; color: #8b8b8b; line-height: 1.8; margin-bottom: 9px; max-width: 100%;
        }
        .iv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex: 0 0 auto; }
        .iv-title {
            font-size: 13px; color: #dedacf; font-weight: bold; letter-spacing: 3px;
            padding-left: 9px; border-left: 3px solid var(--gold-deep);
        }
        .iv-head-ops { display: flex; align-items: center; gap: 8px; }
        .iv-head-ops .iv-test { color: #d98a6a; border-color: #5c3c32; }
        .iv-head-ops .iv-test:hover { color: #e8a084; border-color: #7c4c3c; background: #3a241e; }
        .iv-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
        /* v4.2.1 内政：3 武将位 + 军师 + 建设（建设并入内政） */
        .iv-body-grid { gap: 8px; }
        /* 需求：内政改版——军师在上、建设在下（v4.31：军师按内容自适应，整页可滚，不再被固定比例裁切） */
        .iv-body-2 { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 0 0 auto; }
        .iv-body-2 > .iv-col { flex: 0 0 auto; min-height: 0; }
        .iv-body-2 > .iv-col:first-child { flex: 0 0 auto; max-height: none; }
        .iv-body-2 > .iv-col:last-child { flex: 1 1 auto; }
        .iv-body-2 .iv-col-body { flex: 1 1 auto; min-height: 0; }
        /* v4.31：列底部固定按钮栏（更换／撤下），不随内容滚动、不会被技能卡盖住 */
        .iv-col > .iv-actions-bar {
            flex: 0 0 auto; margin-top: 8px; padding-top: 8px;
            border-top: 1px solid #262626; background-color: #1a1a1a;
        }
        .iv-body-2 .iv-col-body::-webkit-scrollbar { width: 5px; }
        .iv-body-2 .iv-col-body::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .iv-gens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 0 0 auto; }
        .iv-slot { padding: 8px 9px 9px; }
        .iv-lower { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 8px; align-items: stretch; flex: 0 0 auto; }
        .iv-hero-slim { padding: 8px 9px 9px; }
        .iv-hero-title-slim { font-size: 8px; color: #8a8474; margin-top: 2px; }
        .iv-status-slim { margin-top: 5px; font-size: 8px; line-height: 1.5; }
        .iv-slot .iv-skills { margin-top: 5px; }
        .iv-slot .iv-actions { margin-top: 7px; gap: 5px; }
        .iv-slot .iv-actions button { padding: 2px 4px; font-size: 8.5px; }
        .iv-slot .iv-hero-name { font-size: 11px; }
        .iv-slot .iv-fame { margin-top: 4px; gap: 4px; }
        .iv-slot .iv-fame-num { display: none; }
        .iv-build { padding: 8px 10px 9px; }
        .iv-bd-list { display: flex; flex-direction: column; gap: 1px; }
        .iv-bd-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; border-bottom: 1px solid #222; }
        .iv-bd-row:last-child { border-bottom: none; }
        .iv-bd-txt { flex: 1 1 auto; min-width: 0; }
        .iv-bd-l1 { display: flex; align-items: baseline; gap: 5px; font-size: 8.5px; color: #c9c4b6; line-height: 1.3; }
        .iv-bd-l1 b { color: #dedacf; font-weight: normal; }
        .iv-bd-l1 span { color: #8aa0c0; font-size: 8px; }
        .iv-bd-l1 em { color: #7d7d7d; font-style: normal; font-size: 7.5px; margin-left: auto; white-space: nowrap; }
        .iv-bd-l1 .iv-bd-max { margin-left: 0; color: #5a5a5a; font-size: 7px; }
        .iv-bd-sub {
            font-size: 7.5px; color: #8a8474; letter-spacing: 2px;
            margin: 5px 0 2px; padding-bottom: 2px; border-bottom: 1px solid #262626;
        }
        .iv-bd-sub:first-child { margin-top: 0; }
        .iv-build .iv-col-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #383838 transparent; }
        .iv-bd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
        .iv-build .iv-col-body::-webkit-scrollbar { width: 5px; }
        .iv-build .iv-col-body::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .iv-bd-l2 { font-size: 7px; color: #5f5f5f; margin-top: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .iv-bd-row .btn-confirm, .iv-bd-row .btn-cancel { flex: 0 0 auto; padding: 1px 7px; font-size: 8px; }
        .iv-head-ops { display: flex; align-items: center; gap: 6px; }
        .iv-wander-row {
            display: flex; justify-content: space-between; align-items: center; gap: 8px;
            margin-top: 2px; padding-top: 8px; border-top: 1px solid #2a2a2a;
            font-size: 8px; color: #8a8a8a; line-height: 1.6;
        }
        .iv-col {
            flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column;
            background: #1a1a1a; border: 1px solid #2b2b2b; border-radius: 3px; padding: 10px 12px 12px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.022);
        }
        .iv-col-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid #262626; }
        .iv-col-title { font-size: 12px; color: #d2cec2; font-weight: bold; letter-spacing: 2px; }
        .iv-col-tag { font-size: 8px; color: #888; }
        .iv-col-body { flex: 0 0 auto; width: 100%; max-width: none; }
        .iv-empty {
            font-size: 9px; color: #777; text-align: center; padding: 24px 0;
            border: 1px dashed #3a3a3a; border-radius: 3px; margin-bottom: 10px;
        }
        .iv-hero { border: 1px solid #2e2e2e; background: #1e1e1e; border-radius: 3px; padding: 10px 11px; }
        .iv-hero-r1 { display: flex; align-items: center; gap: 6px; }
        .iv-hero-name { font-size: 12px; color: #e4e0d6; font-weight: bold; letter-spacing: 1px; }
        .iv-force-tag { font-size: 7px; color: #a8a8a8; border: 1px solid #4a4a4a; border-radius: 2px; padding: 0 4px; line-height: 14px; }
        /* 阵营色标：魏蓝／蜀绿／吴赭／群灰（只做描边与淡底，不铺黄色块） */
        .iv-force-tag.f-wei { color: #9cb8d0; border-color: rgba(106,146,176,.55); background: rgba(106,146,176,.12); }
        .iv-force-tag.f-shu { color: #a6c69e; border-color: rgba(122,168,120,.52); background: rgba(122,168,120,.12); }
        .iv-force-tag.f-wu  { color: #d59a8c; border-color: rgba(198,108,92,.50); background: rgba(198,108,92,.12); }
        .iv-force-tag.f-qun { color: #b8b2a4; border-color: rgba(160,152,132,.45); background: rgba(160,152,132,.10); }
        .iv-hero-title { font-size: 8px; color: #999; margin-left: auto; }
        .iv-skills { margin-top: 7px; }
        .iv-status { font-size: 8.5px; color: #a0a0a0; margin-top: 8px; line-height: 1.7; }
        .iv-actions { display: flex; gap: 8px; margin-top: 9px; }
        .iv-actions button { flex: 1; }
        .iv-sadou-card { margin-top: 7px; border: 1px solid #3a3a3a; background: rgba(255,255,255,0.03); border-radius: 3px; padding: 6px 8px; }
        .iv-sadou-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
        .iv-sadou-badge { font-size: 8px; color: #c0c0c0; background: rgba(255,255,255,0.06); border: 1px solid #4a4a4a; border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
        .iv-sadou-gain { font-size: 9.5px; color: #e2e2e2; font-weight: bold; white-space: nowrap; }
        .iv-sadou-cost { font-size: 8px; color: #b0b0b0; margin-top: 4px; line-height: 1.5; }
        .iv-sadou-hint { font-size: 7.5px; color: #7a7a7a; margin-top: 3px; line-height: 1.5; }
        .iv-fame { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
        .iv-fame-rank { font-size: 8.5px; color: #d8b878; font-weight: bold; letter-spacing: .5px; white-space: nowrap; }
        .iv-fame-bar { flex: 1; height: 5px; background: #141414; border: 1px solid #333; border-radius: 3px; overflow: hidden; }
        .iv-fame-bar i { display: block; height: 100%; background: linear-gradient(90deg,#8a6f38,#c8a45a); border-radius: 3px; }
        .iv-fame-num { font-size: 7.5px; color: #8a8474; white-space: nowrap; font-variant-numeric: tabular-nums; }
        /* M5 外交 / 排行榜 面板（暗底中性灰，金色只做小面积描边） */
        .m5-sec {
            position: relative; font-size: 9px; color: #949494; letter-spacing: 2px;
            margin: 10px 0 6px; padding: 0 0 5px 8px; border-bottom: 1px solid #2a2a2a;
        }
        .m5-sec::before {
            content: ''; position: absolute; left: 0; top: 2px; width: 2px; height: 8px;
            border-radius: 1px; background: var(--gold-deep);
        }
        .m5-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
            padding: 5px 8px; border: 1px solid #2a2a2a; background: #1b1b1b; border-radius: 2px; margin: 2px 0;
            transition: border-color .15s, background .15s; }
        .m5-row:hover { border-color: #3d3d3d; background: #1f1f1f; }
        .m5-row.m5-me { border-color: #5c5340; background: #202020; box-shadow: inset 2px 0 0 rgba(200,176,120,.55); }
        .m5-txt { font-size: 9px; color: #bbb; }
        .m5-acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
        .m5-tabs { display: flex; gap: 5px; margin-bottom: 8px; }
        .m5-tab { padding: 3px 12px; font-size: 9px; color: #8f8f8f; background: #1b1b1b;
            border: 1px solid #333; border-radius: 2px; cursor: pointer; letter-spacing: 1px;
            transition: color .15s, border-color .15s, background .15s; }
        .m5-tab:hover { color: #ccc; border-color: #4a4a4a; background: #212121; }
        .m5-tab.on { color: var(--gold-bright); background: #262626; border-color: #6a6046;
            box-shadow: inset 0 -1px 0 rgba(200,176,120,.3); }
        .skill-tag {
            position: relative; display: inline-block; font-size: 8px; color: #b0b0b0;
            background: rgba(255,255,255,0.045); border: 1px solid #444; border-radius: 2px;
            padding: 2px 6px; margin: 3px 5px 0 0; cursor: help;
        }
        .skill-tag:hover, .skill-tag:focus { color: #ddd; background: rgba(255,255,255,0.075); border-color: #666; }
        .skill-tag .skill-role { color: #777; margin-right: 3px; }
        .skill-tag .skill-desc { display: none !important; }
        #skillTip {
            display: none; position: fixed; z-index: 9999; pointer-events: none;
            width: 252px; max-width: calc(100vw - 16px); max-height: 70vh; overflow-y: auto;
            background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 2px;
            padding: 9px 11px; font-size: 9px; line-height: 1.78; color: #c8c8c8; text-align: left;
            font-weight: normal; white-space: normal; box-shadow: 0 12px 30px rgba(0,0,0,0.7);
        }
        #skillTip b { color: #e6e6e6; font-weight: bold; }
        /* 需求1：资源项悬浮明细面板（此前只写了 JS 渲染，缺样式导致面板无法显示） */
        #resTip {
            display: none; position: fixed; z-index: 9999; pointer-events: none;
            width: 236px; max-width: calc(100vw - 16px); max-height: 70vh; overflow-y: auto;
            background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 2px;
            padding: 9px 11px; font-size: 9px; line-height: 1.78; color: #c8c8c8; text-align: left;
            font-weight: normal; white-space: normal; box-shadow: 0 12px 30px rgba(0,0,0,0.7);
        }
        #resTip.show { display: block; }
        #resTip .rt-title { color: #e6e6e6; font-weight: bold; margin-bottom: 5px; }
        #resTip .rt-row { display: flex; justify-content: space-between; gap: 10px; }
        #resTip .rt-row span:first-child { color: var(--txt-dim); }
        #resTip .rt-row span:last-child { font-variant-numeric: tabular-nums; }
        #resTip .rt-in { color: var(--txt-strong); }
        #resTip .rt-out { color: #c87a6a; font-weight: bold; }
        #resTip .rt-net { margin-top: 5px; padding-top: 5px; border-top: 1px solid #333; display: flex; justify-content: space-between; gap: 10px; }
        #resTip .rt-eta { margin-top: 3px; color: var(--txt-faint); }
        .gp-list { display: flex; flex-direction: column; gap: 7px; margin: 7px 0; }
        .gp-card { border: 1px solid #3a3a3a; background: #1d1d1d; border-radius: 3px; padding: 8px 10px; cursor: pointer; }
        .gp-card:hover { border-color: #5a5a5a; }
        .gp-card.is-pick { border-color: #8a8a8a; background: rgba(255,255,255,0.07); box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset; }
        .gp-card.gp-disabled { opacity: 0.45; cursor: not-allowed; }
        .gp-card.gp-recruitable { border-color: #6a6a6a; background: #202020; }
        .gp-card.gp-recruitable:hover { border-color: #9a9a9a; background: #262626; }
        .gp-card.gp-recruitable .gp-cur { color: #c8c8c8; }
        .gp-card.gp-locked { opacity: .4; filter: grayscale(.75); cursor: not-allowed; }
        .gp-card.gp-locked:hover { border-color: #3a3a3a; background: #1d1d1d; }
        .gp-lock-lbl { color: #8a6a60 !important; }
        .gp-r1 { display: flex; align-items: center; }
        .gp-name { font-size: 11px; color: #e2e2e2; font-weight: bold; }
        .gp-cur { font-size: 8px; color: #a8a8a8; margin-left: 7px; }
        .gp-meta { font-size: 8px; color: #8a8a8a; margin-top: 4px; line-height: 1.6; }
        .map-city {
            position: absolute;
            width: 30px; height: 30px;
            transform: translate(-50%, -50%);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            z-index: 10;
            pointer-events: auto;
        }
        .map-city:hover { z-index: 12; }
        .map-city.ally { cursor: default; }
        .map-city-inner {
            width: 24px; height: 24px;
            border-radius: 2px;
            background-color: #2a2a2a;
            display: flex; align-items: center; justify-content: center;
            font-size: 6px; color: #999; line-height: 1;
            position: relative;
            box-sizing: border-box;
        }
        .map-city.tier-city .map-city-inner { border: 2px solid #4a4a4a; }
        .map-city.tier-county .map-city-inner { border: 2px solid #4a4a4a; }
        .map-city.tier-county .map-city-inner::before {
            content: '';
            position: absolute;
            inset: -5px;
            border: 1px solid #4a4a4a;
            border-radius: 3px;
            pointer-events: none;
        }
        .map-city.tier-zhou .map-city-inner { border: 2px solid #7a7a7a; }
        .map-city.tier-zhou .map-city-inner::before {
            content: '';
            position: absolute;
            inset: -5px;
            border: 1px solid #7a7a7a;
            border-radius: 3px;
            box-shadow: 0 0 0 3px rgba(160,160,160,0.12);
            pointer-events: none;
        }
        .map-city.tier-zhou.player .map-city-inner::before,
        .map-city.tier-zhou.occupied .map-city-inner::before { border-color: #5a7a5a; }
        .map-city.tier-zhou.enemy .map-city-inner::before { border-color: #7a3a3a; }
        .map-city.tier-zhou.ally .map-city-inner::before { border-color: #3a5a7a; }
        .map-city.tier-pass .map-city-inner { border: 2px dashed #4a4a4a; }
        .map-city.player .map-city-inner,
        .map-city.occupied .map-city-inner {
            border-color: #5a7a5a;
            background-color: #2a342a;
            color: #a0c0a0;
        }
        .map-city.tier-county.player   .map-city-inner::before,
        .map-city.tier-county.occupied .map-city-inner::before { border-color: #5a7a5a; }
        .map-city.enemy .map-city-inner {
            border-color: #7a3a3a;
            background-color: #2a1a1a;
            color: #b08080;
        }
        .map-city.tier-county.enemy .map-city-inner::before { border-color: #7a3a3a; }
        .map-city.ally .map-city-inner {
            border-color: #3a5a7a;
            background-color: #1a2a3a;
            color: #80a0c0;
        }
        .map-city.tier-county.ally .map-city-inner::before { border-color: #3a5a7a; }
        .map-city.neutral .map-city-inner {
            border-color: #4a4a4a;
            background-color: #222222;
            color: #888888;
        }
        .map-city.tier-county.neutral .map-city-inner::before { border-color: #4a4a4a; }
        .map-city.upgraded .map-city-inner { border-width: 3px; }
        .map-city.unreachable { opacity: 0.42; }
        .map-city.unreachable:hover { opacity: 1; }
        .map-city.key-target .map-city-inner { animation: pulse-key 1s infinite; }
        @keyframes pulse-key {
            0%, 100% { box-shadow: 0 0 0 0 rgba(208,160,64,0.85); }
            50% { box-shadow: 0 0 0 9px rgba(208,160,64,0); }
        }
        .map-city.sieging .map-city-inner { animation: pulse-siege 1.2s infinite; }
        @keyframes pulse-siege {
            0%, 100% { box-shadow: 0 0 0 0 rgba(200,80,80,0.7); }
            50% { box-shadow: 0 0 0 6px rgba(200,80,80,0); }
        }
        .map-city.transferring .map-city-inner { animation: pulse-transfer 1.2s infinite; }
        @keyframes pulse-transfer {
            0%, 100% { box-shadow: 0 0 0 0 rgba(100,150,180,0.6); }
            50% { box-shadow: 0 0 0 6px rgba(100,150,180,0); }
        }
        .map-city.sallying .map-city-inner { animation: pulse-sally 1.2s infinite; }
        @keyframes pulse-sally {
            0%, 100% { box-shadow: 0 0 0 0 rgba(220,140,60,0.7); }
            50% { box-shadow: 0 0 0 6px rgba(220,140,60,0); }
        }
        .map-city-name {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 7px; color: #666; white-space: nowrap;
            margin-top: 2px; pointer-events: none;
        }
        .map-city.player .map-city-name,
        .map-city.occupied .map-city-name { color: #8aaa8a; }
        .map-city.enemy .map-city-name { color: #a08080; }
        .map-city.ally .map-city-name { color: #8098b0; }
        .side-panel-right {
            width: 208px; min-width: 190px; background-color: var(--bg-panel);
            border-left: 1px solid var(--line); display: flex; flex-direction: column;
            gap: 1px; overflow-y: auto; font-size: 10px;
        }
        .troop-card {
            position: relative; display: flex; margin: 0 0 6px;
            border: 1px solid #2c2c2c; border-radius: 6px; overflow: hidden;
            background: #232323;
            cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
        }
        .troop-card.is-active:hover { border-color: #4a4a4a; background: #292929; }
        .troop-card.is-focused { border-color: #6a6044; box-shadow: 0 0 0 1px rgba(255,208,100,.28); }
        .troop-card.is-focused .tc-bar { filter: brightness(1.3); }
        .troop-card.ts-idle { cursor: default; background: #1e1e1e; border-color: #292929; }
        .tc-bar { flex: 0 0 3px; width: 3px; align-self: stretch; background: #555; }
        .tc-main { flex: 1 1 auto; min-width: 0; padding: 6px 10px 7px; }
        .tc-r1 { display: flex; align-items: center; gap: 1px; min-width: 0; }
        /* v4.44 需求1：右侧部队卡兵种徽标可点击切换兵种（专属兵种/外出部队为不可点击态） */
        .tc-unit.is-switchable { cursor: pointer; transition: filter .15s, box-shadow .15s; }
        .tc-unit.is-switchable:hover { filter: brightness(1.4); box-shadow: 0 0 0 1px rgba(216,168,80,.5); }
        .tc-unit.is-locked { cursor: not-allowed; opacity: .7; }
        .tc-ops { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 2px; white-space: nowrap; }
        .tc-name { flex: 0 1 auto; min-width: 0; font-size: 10.5px; font-weight: bold; color: #d6d6d6; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .tc-badge { flex: 0 0 auto; font-size: 8.5px; line-height: 16px; padding: 0 4px; border-radius: 8px; border: 1px solid; font-weight: bold; letter-spacing: 1px; white-space: nowrap; }
        .tc-troops { flex: 0 0 auto; font-size: 10px; font-weight: bold; color: #e6dcbc; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .tc-troops::before { content: "兵"; font-size: 8px; font-weight: normal; color: #7a7a7a; margin-right: 2px; }
        .tc-troops.is-empty { color: #4d4d4d; font-weight: normal; }
        .tc-retreat {
            flex: 0 0 auto; min-width: 22px; text-align: center; font-size: 9px; line-height: 19px; padding: 0 3px; border-radius: 4px; white-space: nowrap;
            border: 1px solid #6e3c38; background: rgba(190,80,70,.14); color: #e08a80; font-weight: bold;
            cursor: pointer; transition: background .15s, border-color .15s, color .15s;
        }
        .tc-retreat:hover { background: rgba(200,70,60,.34); border-color: #a05048; color: #ffb0a6; }
        .tc-hold, .tc-resume, .tc-build {
            flex: 0 0 auto; min-width: 22px; text-align: center; font-size: 9px; line-height: 19px; padding: 0 3px; border-radius: 4px; font-weight: bold; white-space: nowrap;
            cursor: pointer; transition: background .15s, border-color .15s, color .15s;
        }
        .tc-hold { border: 1px solid #3f6678; background: rgba(106,154,170,.15); color: #8fc0d0; }
        .tc-hold:hover { background: rgba(106,154,170,.34); border-color: #5a8fa0; color: #bfe2ec; }
        .tc-build { border: 1px solid #6b5a33; background: rgba(200,164,90,.16); color: #c8a45a; }
        .tc-build:hover { background: rgba(200,164,90,.36); border-color: #8f7740; color: #e0c07a; }
        .tc-resume { border: 1px solid #4a7a4e; background: rgba(111,191,115,.15); color: #8fd694; }
        .tc-resume:hover { background: rgba(111,191,115,.34); border-color: #5fa366; color: #c0f0c4; }
        .tc-r2 { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-top: 3px; }
        .tc-target { flex: 1; min-width: 0; font-size: 9px; color: #acacac; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .tc-target b { font-weight: normal; margin-right: 2px; }
        .tc-idle-sub { color: #5c5c5c; }
        .tc-time { flex: 0 0 auto; font-size: 9px; line-height: 16px; padding: 0 6px; border-radius: 4px; color: #c8c2b0; background: rgba(0,0,0,.28); font-variant-numeric: tabular-nums; }
        .tc-prog { height: 3px; border-radius: 2px; background: rgba(255,255,255,.07); margin-top: 5px; overflow: hidden; }
        .tc-prog i { display: block; height: 100%; border-radius: 2px; }
        .ts-idle .tc-bar { background: #4a4a4a; }
        .ts-idle .tc-badge { color: #9a9a9a; border-color: rgba(150,150,150,.28); background: rgba(150,150,150,.10); }
        .ts-march .tc-bar { background: #6fbf73; box-shadow: 0 0 5px rgba(111,191,115,.4); }
        .ts-march .tc-badge { color: #7fd684; border-color: rgba(111,191,115,.40); background: rgba(111,191,115,.13); }
        .ts-march .tc-target b { color: #7fd684; }
        .ts-march .tc-prog i { background: linear-gradient(90deg, #4f9a55, #7fd684); }
        .ts-return .tc-bar { background: #d0a04a; box-shadow: 0 0 5px rgba(208,160,74,.4); }
        .ts-return .tc-badge { color: #e0b766; border-color: rgba(208,160,74,.40); background: rgba(208,160,74,.13); }
        .ts-return .tc-target b { color: #e0b766; }
        .ts-return .tc-prog i { background: linear-gradient(90deg, #a87e34, #e0b766); }
        .ts-fight .tc-bar { background: #e06a5e; box-shadow: 0 0 5px rgba(224,106,94,.42); }
        .ts-fight .tc-badge { color: #ec8a7e; border-color: rgba(224,106,94,.42); background: rgba(224,106,94,.14); }
        .ts-fight .tc-target b { color: #ec8a7e; }
        .ts-fight .tc-prog i { background: linear-gradient(90deg, #b0483c, #ec8a7e); }
        .ts-hold .tc-bar { background: #5f9bb0; box-shadow: 0 0 5px rgba(95,155,176,.4); }
        .ts-hold .tc-badge { color: #86c0d4; border-color: rgba(95,155,176,.42); background: rgba(95,155,176,.14); }
        .ts-hold .tc-target b { color: #86c0d4; }
        .ts-hold .tc-prog i { background: linear-gradient(90deg, #3f7488, #86c0d4); }
        .troop-card.hero-card { border-color: #6a5526; background: #241f14; }
        .troop-card.hero-card:hover { border-color: #8a6f32; background: #2a2416; }
        .troop-card.hero-card .tc-bar { background: #e8c45e; box-shadow: 0 0 5px rgba(232,196,94,.42); }
        .troop-card.hero-card .tc-name { color: #ecd48a; }
        .h-badge-station { color: #e8c45e !important; border-color: rgba(232,196,94,.45) !important; background: rgba(232,196,94,.14) !important; }
        .tc-r3 { display: flex; align-items: center; gap: 6px; margin-top: 5px; min-width: 0; }
        .tc-skill-name { flex: 0 1 auto; min-width: 0; font-size: 8px; color: #8a7a5a; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .tc-hj {
            margin-left: auto; flex: 1 1 auto; min-width: 0; max-width: 100%; font-size: 8.5px; line-height: 18px; padding: 0 6px;
            border-radius: 4px; cursor: pointer; font-weight: bold; letter-spacing: .5px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; text-align: center;
            transition: background .15s, border-color .15s, color .15s;
        }
        .tc-hj.is-on { border: 1px solid #7a7a7a; background: rgba(255,255,255,.14); color: #ececec; }
        .tc-hj.is-on:hover { background: rgba(255,255,255,.22); border-color: #9a9a9a; }
        .tc-hj.is-off { border: 1px solid #444; background: rgba(120,120,120,.10); color: #8f8f8f; }
        .tc-hj.is-off:hover { border-color: #666; color: #bbb; }
        .tc-hj.is-disabled { opacity: .5; cursor: not-allowed; }
        .tc-hero-march {
            flex: 0 0 auto; min-width: 26px; text-align: center; font-size: 9px; line-height: 19px; padding: 0 6px; border-radius: 2px; white-space: nowrap;
            border: 1px solid #555; background: #2a2a2a; color: #ccc;
            cursor: pointer; font-weight: bold; letter-spacing: 1px; transition: background .15s, border-color .15s, color .15s;
        }
        .tc-hero-march:hover { background: #333; border-color: #777; color: #eee; }
        .tc-herolv { flex: 0 6 auto; min-width: 0; font-size: 7px; line-height: 13px; color: #9a9a9a; border: 1px solid #4a4a4a; border-radius: 2px; padding: 0 2px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .bottom-bar {
            display: flex; align-items: center; gap: 6px; padding: 4px 24px 4px 10px;
            background: linear-gradient(0deg, #212121, #1d1d1d);
            border-top: 1px solid var(--line);
            box-shadow: inset 0 -1px 0 rgba(255,255,255,0.03);
            font-size: 9px; color: var(--txt-dim); flex-wrap: wrap; min-height: 32px;
        }
        .bottom-btn {
            padding: 3px 11px; font-size: 9px; background-color: transparent;
            border: 1px solid #303030; color: var(--txt-dim); cursor: pointer;
            letter-spacing: 1px; transition: border-color 0.15s, color 0.15s, background-color 0.15s;
            white-space: nowrap; border-radius: 3px;
        }
        .bottom-btn:hover { border-color: var(--line-hover); color: var(--txt-strong); background-color: var(--bg-raised); }
        .bottom-btn.active { border-color: var(--gold-deep); color: var(--gold-bright); background-color: var(--gold-tint); }
        .bottom-btn.notify {
            border-color: var(--gold-deep); color: var(--gold-bright); background-color: var(--gold-tint);
            animation: btn-notify 1.1s infinite;
        }
        @keyframes btn-notify {
            0%, 100% { box-shadow: 0 0 0 0 rgba(208,160,64,0.75); }
            50% { box-shadow: 0 0 0 5px rgba(208,160,64,0); }
        }
        .troop-status { display: flex; gap: 10px; align-items: center; font-size: 9px; margin-left: auto; color: var(--txt-dim); }
        .troop-status span { font-variant-numeric: tabular-nums; }
        .troop-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin-right: 3px; }
        .dot-idle { background-color: #6a6a6a; }
        .dot-marching { background-color: var(--gold); }
        .dot-fighting { background-color: #d0605a; }
        .march-progress {
            position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
            background-color: rgba(20,20,20,0.94); border: 1px solid var(--line-control); padding: 6px 11px;
            font-size: 8px; color: var(--txt-dim); letter-spacing: 1px;
            display: flex; align-items: center; gap: 7px; z-index: 3; border-radius: var(--radius);
            box-shadow: 0 6px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
        }
        .progress-bar-outer { width: 80px; height: 3.5px; background-color: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
        .progress-bar-inner { height: 100%; width: 0%; border-radius: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .2s linear; }
        .progress-bar-inner.sieging { background: linear-gradient(90deg, #a8443c, #e07064); }
        .tooltip {
            position: absolute; background-color: rgba(20,20,20,0.97); border: 1px solid var(--line-control);
            padding: 7px 10px; font-size: 8px; color: var(--txt); pointer-events: none;
            z-index: 30; white-space: nowrap; border-radius: var(--radius); display: none; line-height: 1.55;
            max-width: 300px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
        }
        /* v4.45：部队悬浮窗「效果」等长描述允许换行，不再顶出窗口右边缘 */
        .tooltip .tip-wrap, .tooltip .tip-wrap * {
            white-space: normal; overflow-wrap: anywhere; word-break: break-word;
        }
        .modal-overlay {
            position: fixed; inset: 0; background-color: rgba(0,0,0,0.65);
            z-index: 40; display: none; align-items: center; justify-content: center;
        }
        .modal-overlay.show { display: flex; }
        .modal-panel {
            background-color: #1e1e1e;
            border: 1px solid #3a3a3a; padding: 12px 16px;
            min-width: 320px; max-width: 92vw; max-height: 85vh; overflow-y: auto;
            border-radius: 2px; letter-spacing: 0.4px;
            box-shadow: 0 12px 34px rgba(0,0,0,0.6);
        }
        .modal-title {
            position: static; font-size: 11px; color: #c0c0c0; letter-spacing: 1px;
            margin-bottom: 8px; padding: 0 0 6px 0; border-bottom: 1px solid #2a2a2a;
        }
        .modal-title::before { content: none; }
        .modal-info { font-size: 8px; color: #888; line-height: 1.6; margin-bottom: 8px; }
        .modal-btn-row { display: flex; gap: 6px; justify-content: flex-end; }
        .btn-confirm {
            padding: 5px 16px; font-size: 9px;
            background-color: #2a2a2a;
            border: 1px solid #555; color: #ccc; cursor: pointer;
            letter-spacing: 1px; border-radius: 2px;
            transition: background-color 0.15s, border-color 0.15s, color 0.15s;
        }
        .btn-confirm:hover { background-color: #333; border-color: #777; color: #eee; }
        .btn-confirm:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
        .btn-cancel {
            padding: 5px 16px; font-size: 9px; background-color: transparent;
            border: 1px solid #3a3a3a; color: #888; cursor: pointer;
            letter-spacing: 1px; border-radius: 2px; transition: border-color 0.15s, color 0.15s;
        }
        .btn-cancel:hover { border-color: #5a5a5a; color: #bbb; }
        .btn-sally {
            padding: 5px 16px; font-size: 9px; background-color: #2a1a1a;
            border: 1px solid #8a5a3a; color: #e0a060; cursor: pointer;
            letter-spacing: 1px; border-radius: 2px; transition: all 0.15s;
        }
        .btn-sally:hover { background-color: #3a2020; border-color: #c08050; color: #ffb070; }
        #logContainer { scrollbar-width: thin; scrollbar-color: #383838 transparent; }
        #logContainer::-webkit-scrollbar { width: 5px; }
        #logContainer::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        #logContainer::-webkit-scrollbar-thumb:hover { background: #4d4d4d; }
        #logContainer::-webkit-scrollbar-track { background: transparent; }
        .log-entry {
            position: relative; display: flex; align-items: flex-start; gap: 5px;
            font-size: 7px; color: #787878; line-height: 1.45;
            padding: 3px 6px 3px 5px;
            border-bottom: 1px solid rgba(255,255,255,0.028);
        }
        .log-entry::before {
            content: ''; flex: 0 0 auto; width: 4px; height: 4px; margin-top: 3.5px;
            border-radius: 50%; background: #565656;
        }
        .log-entry:hover { background: rgba(255,255,255,0.03); }
        .log-entry.victory { color: #8fae8a; }
        .log-entry.victory::before { background: #7aa878; }
        .log-entry.defeat { color: #d07a7a; }
        .log-entry.defeat::before { background: #c86a6a; }
        .log-entry.occupy { color: #dcc793; font-weight: bold; }
        .log-entry.occupy::before { background: #c8b078; }
        .log-entry.battle { color: #d99a6a; }
        .log-entry.battle::before { background: #d09060; }
        .log-entry.transfer { color: #7aacb8; }
        .log-entry.transfer::before { background: #6a9aaa; }
        .log-entry.warn { color: #d8ac5e; }
        .log-entry.warn::before { background: #d0a050; }
        .log-empty { font-size: 7px; color: #3e3e3e; text-align: center; padding: 14px 0; letter-spacing: 1px; }
        .log-tabbar { display: flex; gap: 3px; padding-left: 0; letter-spacing: 0; }
        .log-tabbar::before { content: none; }
        .log-tab {
            font-size: 8px; color: #7a7568; letter-spacing: .5px; cursor: pointer;
            padding: 1px 6px; border-radius: 2px; transition: color .15s, background .15s;
        }
        .log-tab:hover { color: #b8b2a4; }
        .log-tab.active { color: #cfc8b8; background: rgba(255,255,255,0.06); }
        /* ===== 聊天区（战报／全局／同盟／私信）：左栏同盟信息下方，占满剩余高度、内部滚动 ===== */
        #chatSection {
            flex: 1 1 auto; min-height: 148px; display: flex; flex-direction: column;
            padding-bottom: 8px; border-bottom: none;
        }
        #chatSection .log-tabbar { flex: 0 0 auto; margin-bottom: 6px; }
        #logContainer, #chatContainer { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
        #logContainer { scrollbar-width: thin; scrollbar-color: #383838 transparent; }
        #logContainer::-webkit-scrollbar, #chatContainer::-webkit-scrollbar { width: 5px; }
        #logContainer::-webkit-scrollbar-thumb, #chatContainer::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        #logContainer::-webkit-scrollbar-thumb:hover, #chatContainer::-webkit-scrollbar-thumb:hover { background: #4d4d4d; }
        #logContainer::-webkit-scrollbar-track, #chatContainer::-webkit-scrollbar-track { background: transparent; }
        .chat-entry {
            font-size: 7.5px; line-height: 1.55; padding: 3px 4px; color: #8a8a8a;
            border-bottom: 1px solid rgba(255,255,255,0.028); word-break: break-word;
        }
        .chat-entry:hover { background: rgba(255,255,255,0.03); }
        .chat-name { color: #c8b078; margin-right: 4px; }
        .chat-name.clickable { cursor: pointer; text-decoration: underline dotted; }
        .chat-name.clickable:hover { color: #e0cc94; }
        .chat-city-link { color: #9fd0a8; cursor: pointer; text-decoration: underline dotted; }
        .chat-city-link:hover { color: #c4e8c8; }
        .chat-guild { color: #7aacb8; margin-right: 3px; }
        .chat-text { color: #b0b0b0; }
        .chat-me .chat-text { color: #9ab89a; }
        /* 系统 / 世界公告（战役、合纵） */
        .chat-sys { border-left: 2px solid #6a5a3a; background: rgba(120,100,60,0.07); padding-left: 4px; }
        .chat-sys .chat-sys-tag { color: #d8b060; font-weight: bold; margin-right: 5px; }
        .chat-sys .chat-text { color: #d6c9a8; }
        .chat-sys.sys-campaign { border-left-color: #c0603c; background: rgba(170,70,50,0.10); }
        .chat-sys.sys-campaign .chat-sys-tag { color: #e08a5c; }
        .chat-sys.sys-campaign .chat-text { color: #e8b890; }
        .chat-sys.sys-coalition { border-left-color: #6a7ab0; background: rgba(80,100,160,0.09); }
        .chat-sys.sys-coalition .chat-sys-tag { color: #8fa0d8; }
        .chat-sys.sys-coalition .chat-text { color: #b0bcd8; }
        /* v4.49 需求4：史书通告（灭国/州府易主/大会战）金色偏冷，区别于战役红与合纵蓝 */
        .chat-sys.sys-chronicle { border-left-color: #a89155; background: rgba(160,140,80,0.09); }
        .chat-sys.sys-chronicle .chat-sys-tag { color: #cdb877; }
        .chat-sys.sys-chronicle .chat-text { color: #d8ccae; }
        #chatSection .chat-input-row { display: flex; flex: 0 0 auto; gap: 4px; margin-top: 5px; }
        .chat-input {
            flex: 1; min-width: 0; padding: 4px 6px; font-size: 8px;
            background-color: #1a1a1a; color: #bbb; border: 1px solid #3a3a3a;
            border-radius: 2px; outline: none;
        }
        .chat-input:focus { border-color: #5c5c5c; }
        .chat-send {
            padding: 4px 9px; font-size: 8px; background-color: #2a2a2a;
            border: 1px solid #555; color: #ccc; cursor: pointer;
            letter-spacing: 1px; border-radius: 2px; transition: all 0.15s;
        }
        .chat-send:hover { background-color: #333; border-color: #777; color: #eee; }
        .chat-invite {
            padding: 4px 5px; font-size: 8px; background-color: #2a2a2a;
            border: 1px solid #555; color: #a8c4a8; cursor: pointer;
            letter-spacing: 0; border-radius: 2px; transition: all 0.15s;
        }
        .chat-invite:hover { background-color: #333; border-color: #777; color: #cfe0cf; }
        .pm-peer-row { display: flex; align-items: center; gap: 6px; font-size: 9px; margin-bottom: 5px; }

        /* ===== 玩家名片（点击聊天玩家名）：五维雷达 + 私信入口 ===== */
        .pc-box { width: 452px; max-width: 92vw; }
        .pc-head { display: flex; align-items: center; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid #2a2a2a; }
        .pc-name {
            position: relative; padding-left: 10px; font-size: 14px; font-weight: bold;
            color: #e2ded2; letter-spacing: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .pc-name::before {
            content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
            width: 3px; height: 12px; border-radius: 1px; background: var(--gold);
            box-shadow: 0 0 6px rgba(200,176,120,.42);
        }
        .pc-tag {
            flex: 0 0 auto; font-size: 8px; line-height: 15px; padding: 0 5px;
            border: 1px solid #3a3a3a; border-radius: 2px; color: #9a9a9a; background: #1b1b1b;
        }
        .pc-tag.guild { color: #7aacb8; border-color: rgba(122,172,184,.4); background: rgba(122,172,184,.08); }
        .pc-tag.ally  { color: #a6b6cc; border-color: rgba(122,168,200,.4); background: rgba(122,168,200,.08); }
        .pc-tag.cap   { color: #c07a6a; border-color: rgba(192,122,106,.4); background: rgba(192,122,106,.08); }
        .pc-x { margin-left: auto; white-space: nowrap; }
        .pc-meta {
            display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px;
            font-size: 8px; color: #8f8f8f; line-height: 1.7;
        }
        .pc-meta b { color: #dedacf; font-weight: normal; font-variant-numeric: tabular-nums; }
        .pc-meta b.hot { color: var(--gold-bright); text-shadow: 0 0 6px rgba(200,176,120,.45); }
        .pc-main { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
        .pc-main .cv-radar { flex: 0 0 auto; }
        .pc-legend { flex: 1 1 auto; min-width: 0; }
        .pc-lg-row { display: flex; align-items: center; gap: 5px; font-size: 8px; padding: 4px 0; }
        .pc-lg-name { flex: 0 0 auto; width: 24px; color: #9a9a9a; letter-spacing: 1px; }
        .pc-lg-bar { flex: 1 1 auto; height: 4px; background: #121212; border: 1px solid #2c2c2c; border-radius: 2px; overflow: hidden; }
        .pc-lg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6a5f42, #c8b078); }
        .pc-lg-val { flex: 0 0 auto; width: 84px; text-align: right; color: #cfcabd; font-variant-numeric: tabular-nums; }
        .pc-lg-val em { color: #6f6f6f; font-style: normal; }
        .pc-lg-val.over { color: #e0cd96; }
        .pc-sec {
            font-size: 8px; color: #8f8f8f; letter-spacing: 2px;
            margin-top: 8px; padding-bottom: 4px; border-bottom: 1px solid #262626;
        }
        .pc-gens { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
        .pc-gen {
            display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px;
            background: #1b1b1b; border: 1px solid #2e2e2e; border-radius: 2px;
            font-size: 9px; color: #d6d2c6;
        }
        .pc-gen em { font-style: normal; font-size: 7.5px; color: #7d7d7d; }
        .pc-gen-none { font-size: 8px; color: #5f5f5f; letter-spacing: 1px; }
        .pc-loading {
            padding: 40px 10px; text-align: center; font-size: 9px; color: #7d7d7d; letter-spacing: 1px;
        }
        /* ===== M8 招募整页：顶部状态条 + 阵营筛选 + 名将网格 + 右侧详情（暗底战术地图风） ===== */
        .hr-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 9px; }
        .hr-top {
            display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
            padding-bottom: 9px; border-bottom: 1px solid #2a2a2a; flex: 0 0 auto;
        }
        .hr-top-l { min-width: 0; }
        .hr-title {
            position: relative; font-size: 14px; letter-spacing: 4px; color: #dedacf;
            font-weight: bold; padding-left: 11px; line-height: 1.2;
        }
        .hr-title::before {
            content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
            width: 3px; height: 13px; border-radius: 1px; background: var(--gold);
            box-shadow: 0 0 6px rgba(200,176,120,.42);
        }
        .hr-sub { font-size: 8.5px; color: #7f7f7f; line-height: 1.7; margin-top: 4px; padding-left: 11px; }
        .hr-top-r { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
        .hr-token {
            display: flex; align-items: baseline; gap: 4px; padding: 4px 9px;
            font-size: 8px; letter-spacing: 1px; color: #8a8474; background: #1a1a1a;
            border: 1px solid #333; border-radius: 3px; white-space: nowrap;
        }
        .hr-token b { font-size: 13px; color: var(--gold-bright); font-variant-numeric: tabular-nums; line-height: 1; }
        .hr-draw {
            padding: 6px 15px; font-size: 9px; letter-spacing: 2px; font-family: inherit;
            color: var(--gold-bright); background: rgba(200,176,120,.10);
            border: 1px solid var(--gold-deep); border-radius: 3px; cursor: pointer;
            transition: background .15s, border-color .15s, color .15s; white-space: nowrap;
        }
        .hr-draw:hover:not(:disabled) { background: rgba(200,176,120,.2); border-color: var(--gold); color: #f2e2b4; }
        .hr-draw:disabled { opacity: .38; cursor: not-allowed; }
        .hr-draw.is-drawing { opacity: .55; cursor: progress; color: #b0a98e; border-color: #4a4a4a; background: #262626; }
        .hr-toolbar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; flex: 0 0 auto; }
        .hr-tab {
            padding: 3px 10px; font-size: 9px; letter-spacing: 1px; font-family: inherit;
            color: #8c8c8c; background: #1b1b1b; border: 1px solid #313131; border-radius: 2px;
            cursor: pointer; transition: color .15s, border-color .15s, background .15s;
        }
        .hr-tab:hover { color: #d2d2d2; border-color: #4a4a4a; background: #212121; }
        .hr-tab.on { color: var(--gold-bright); background: #262626; border-color: #6a6046;
            box-shadow: inset 0 -1px 0 rgba(200,176,120,.3); }
        .hr-tab .n { font-size: 8px; color: #6f6f6f; margin-left: 3px; }
        .hr-tab.on .n { color: #b09a68; }
        .hr-count { margin-left: auto; font-size: 8px; color: #6f6f6f; letter-spacing: 1px; white-space: nowrap; }
        .hr-body { display: flex; gap: 10px; flex: 1 1 auto; min-height: 0; align-items: stretch; }
        /* v4.7：双列小卡过于拥挤、武将显示不完全 → 改单列大卡，一行一将完整展示 */
        .hr-list {
            flex: 0 0 46%; min-width: 0; max-height: none;
            display: flex; flex-direction: column;
            gap: 7px; overflow-y: auto; padding: 2px 6px 2px 1px;
            scrollbar-width: thin; scrollbar-color: #383838 transparent;
        }
        .hr-list::-webkit-scrollbar { width: 5px; }
        .hr-list::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .hr-tile {
            position: relative; flex: 0 0 auto; overflow: hidden; padding: 10px 14px 10px 16px;
            background: #1b1b1b; border: 1px solid #2c2c2c; border-radius: 3px; cursor: pointer;
            transition: border-color .15s, background .15s, box-shadow .15s;
        }
        .hr-tile::before {
            content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #3a3a3a;
        }
        .hr-tile.f-wei::before { background: #5a7f9a; }
        .hr-tile.f-shu::before { background: #6a9468; }
        .hr-tile.f-wu::before  { background: #a86a5c; }
        .hr-tile.f-qun::before { background: #7d7663; }
        .hr-tile:hover { border-color: #464646; background: #202020; }
        .hr-tile.is-view { border-color: #6a6046; background: #232220;
            box-shadow: inset 0 0 0 1px rgba(200,176,120,.12); }
        .hr-tile-r1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
        .hr-tile .iv-force-tag { flex: 0 0 auto; font-size: 8.5px; line-height: 17px; padding: 0 7px; }
        .hr-tile-name {
            font-size: 14.5px; font-weight: bold; color: #c4c4c4; letter-spacing: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .hr-tile.is-own .hr-tile-name { color: #e0dcd0; }
        .hr-tile-title {
            flex: 1 1 auto; min-width: 0; font-size: 9px; color: #6f6f6f; letter-spacing: .5px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .hr-tile-dot {
            flex: 0 0 auto; margin-left: auto; width: 5px; height: 5px; border-radius: 50%; background: #4a4a4a;
        }
        .hr-tile.is-own .hr-tile-dot { background: #7aa878; box-shadow: 0 0 5px rgba(122,168,120,.55); }
        .hr-tile-meta {
            font-size: 9.5px; color: #767676; margin-top: 5px; line-height: 1.6;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .hr-tile.is-own .hr-tile-meta { color: #8a8a7e; }
        .hr-empty {
            grid-column: 1 / -1; padding: 26px 10px; text-align: center;
            font-size: 8px; color: #5a5a5a; letter-spacing: 1px;
            border: 1px dashed #333; border-radius: 3px;
        }
        .hr-side {
            flex: 1 1 auto; min-width: 0; max-height: none; overflow-y: auto;
            background: #1a1a1a; border: 1px solid #2b2b2b; border-radius: 3px; padding: 10px 12px 12px;
            scrollbar-width: thin; scrollbar-color: #383838 transparent;
        }
        .hr-side::-webkit-scrollbar { width: 5px; }
        .hr-side::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .hr-detail-h { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #262626; }
        .hr-detail-h b { font-size: 15px; color: #e6e2d6; letter-spacing: 2px; }
        .hr-detail-title { font-size: 8px; color: #8a8474; margin-left: auto; white-space: nowrap; }
        .hr-detail-meta { font-size: 8px; color: #8c8c8c; margin-top: 7px; line-height: 1.7; }
        .hr-detail-own { color: #8fae8a; }
        .hr-detail-none { color: #9a8f78; }
        .hr-skill { margin-top: 8px; border-top: 1px solid #262626; padding-top: 7px; }
        .hr-skill-name {
            font-size: 8px; color: #c8b078; margin-bottom: 4px; letter-spacing: 1px;
            display: flex; align-items: center; gap: 5px;
        }
        .hr-skill-name::before {
            content: ''; width: 2px; height: 8px; background: var(--gold-deep); border-radius: 1px;
        }
        .hr-skill-desc { font-size: 8px; color: #969696; line-height: 1.85; }
        .hr-skill-desc b { color: #cdc7b8; font-weight: normal; }
        .hr-detail-empty {
            display: flex; align-items: center; justify-content: center; height: 100%;
            min-height: 150px; padding: 18px 12px; text-align: center;
            font-size: 8px; color: #555; letter-spacing: 1px; line-height: 1.9;
        }
        .hr-foot {
            display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
            padding-top: 8px; border-top: 1px solid #262626;
        }
        .hr-foot-hint { font-size: 8px; color: #6f6f6f; line-height: 1.6; margin-left: auto; text-align: right; }
        .hr-tile.is-drawn {
            border-color: var(--gold); background: rgba(200,176,120,.12);
            animation: hr-draw .9s ease-out 1;
        }
        @keyframes hr-draw {
            0% { border-color: var(--gold-bright); transform: scale(1); box-shadow: 0 0 0 0 rgba(200,176,120,.55); }
            40% { transform: scale(1.045); box-shadow: 0 0 0 6px rgba(200,176,120,.22); }
            100% { border-color: var(--gold); transform: scale(1); box-shadow: 0 0 0 0 rgba(200,176,120,0); }
        }

        /* ===== 任命名将选择：按阵营分组筛选 + 双列卡片（替代一长条列表） ===== */
        .assign-box { width: 552px; max-width: 88vw; }
        .assign-city { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; }
        .assign-city > span { font-size: 9px; color: #8c8c8c; white-space: nowrap; letter-spacing: 1px; }
        .assign-city .city-select { flex: 1; min-width: 0; margin: 0; }
        .assign-tabs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 9px 0 7px; }
        .assign-tab {
            display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
            font-size: 9px; letter-spacing: 1px; font-family: inherit; cursor: pointer;
            color: #8c8c8c; background: #1b1b1b; border: 1px solid #313131; border-radius: 2px;
            transition: color .15s, border-color .15s, background .15s;
        }
        .assign-tab:hover { color: #d2d2d2; border-color: #4a4a4a; background: #212121; }
        .assign-tab.on { color: var(--gold-bright); background: #262626; border-color: #6a6046;
            box-shadow: inset 0 -1px 0 rgba(200,176,120,.3); }
        .assign-tab .n { font-size: 8px; color: #6f6f6f; }
        .assign-tab.on .n { color: #b09a68; }
        .assign-scroll { position: relative; }
        /* 列表可滚动时底部渐隐，提示还有更多名将（滚到底自动消失） */
        .assign-scroll::after {
            content: ''; position: absolute; left: 0; right: 6px; bottom: 0; height: 24px;
            pointer-events: none; opacity: 0; transition: opacity .15s;
            background: linear-gradient(180deg, rgba(30,30,30,0), rgba(30,30,30,.97));
        }
        .assign-scroll.is-more::after { opacity: 1; }
        .assign-grid {
            display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
            max-height: min(48vh, 312px); overflow-y: auto; padding: 1px 3px 1px 1px;
            scrollbar-width: thin; scrollbar-color: #383838 transparent;
        }
        .assign-grid::-webkit-scrollbar { width: 5px; }
        .assign-grid::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .assign-card {
            position: relative; overflow: hidden; padding: 7px 8px 6px 10px;
            background: #1b1b1b; border: 1px solid #2c2c2c; border-radius: 3px; cursor: pointer;
            transition: border-color .15s, background .15s, box-shadow .15s;
        }
        .assign-card::before {
            content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #3a3a3a;
        }
        .assign-card.f-wei::before { background: #5a7f9a; }
        .assign-card.f-shu::before { background: #6a9468; }
        .assign-card.f-wu::before  { background: #a86a5c; }
        .assign-card.f-qun::before { background: #7d7663; }
        .assign-card:hover { border-color: #464646; background: #202020; }
        .assign-card.is-pick {
            border-color: var(--gold); background: #232220;
            box-shadow: inset 0 0 0 1px rgba(200,176,120,.18);
        }
        .assign-card.is-pick::after {
            content: ''; position: absolute; right: 6px; bottom: 6px; width: 6px; height: 6px;
            border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
            transform: rotate(45deg); opacity: .9;
        }
        .assign-card.is-off { opacity: .4; cursor: not-allowed; filter: grayscale(.5); }
        .assign-card.is-off:hover { border-color: #2c2c2c; background: #1b1b1b; }
        .assign-card.is-off::after { content: none; }
        .ac-r1 { display: flex; align-items: center; gap: 5px; min-width: 0; }
        .ac-name {
            font-size: 11px; font-weight: bold; color: #dedede; letter-spacing: 1px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .ac-state {
            margin-left: auto; flex: 0 0 auto; font-size: 8px; color: #9a8f78;
            white-space: nowrap; letter-spacing: .5px;
        }
        .ac-meta {
            font-size: 8px; color: #7d7d7d; margin-top: 3px; line-height: 1.5;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .assign-card .iv-skills { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 0 4px; }
        .assign-card .skill-tag { margin: 2px 0 0; font-size: 7.5px; }
        .assign-empty {
            grid-column: 1 / -1; padding: 20px 10px; text-align: center;
            font-size: 8px; color: #5a5a5a; letter-spacing: 1px;
            border: 1px dashed #333; border-radius: 3px;
        }

        /* ===== 历程整页：五维战功雷达 + 名将歼敌榜 + 势力虎符里程碑 ===== */
        .cv-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 9px; }
        .cv-head {
            display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
            padding-bottom: 8px; border-bottom: 1px solid #2a2a2a;
        }
        .cv-title {
            position: relative; padding-left: 11px; font-size: 13px; color: #dedacf;
            font-weight: bold; letter-spacing: 4px;
        }
        .cv-title::before {
            content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
            width: 3px; height: 13px; border-radius: 1px; background: var(--gold);
            box-shadow: 0 0 6px rgba(200,176,120,.42);
        }
        .cv-head-sub { font-size: 8px; color: #6f6f6f; letter-spacing: 1px; }
        .cv-back { margin-left: auto; white-space: nowrap; }
        .cv-body { display: flex; gap: 10px; flex: 1 1 auto; min-height: 0; }
        .cv-panel {
            background: #1a1a1a; border: 1px solid #2b2b2b; border-radius: 3px; padding: 9px 11px 10px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.022);
        }
        .cv-panel-t {
            display: flex; align-items: center; gap: 6px; width: 100%;
            font-size: 9px; color: #c9c4b6; letter-spacing: 2px;
            padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid #262626;
        }
        .cv-panel-t::before { content: ''; width: 2px; height: 9px; border-radius: 1px; background: var(--gold-deep); }
        .cv-panel-tip { margin-left: auto; font-size: 8px; color: #6f6f6f; letter-spacing: 0; }
        .cv-left { flex: 0 0 292px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
        .cv-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
        .cv-radar { display: block; margin: 2px 0 0; }
        .cv-legend { width: 100%; margin-top: 2px; }
        .cv-lg-row { display: flex; align-items: center; gap: 6px; font-size: 8px; padding: 3px 0; }
        .cv-lg-name { flex: 0 0 auto; width: 58px; color: #8f8f8f; letter-spacing: .5px; white-space: nowrap; }
        .cv-lg-bar { flex: 1 1 auto; height: 3px; background: #151515; border: 1px solid #2c2c2c; border-radius: 2px; overflow: hidden; }
        .cv-lg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6a5f42, #c8b078); }
        .cv-lg-val { flex: 0 0 auto; width: 74px; text-align: right; color: #cfcabd; font-variant-numeric: tabular-nums; }
        .cv-rank-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
        .cv-rank-list {
            flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px;
            scrollbar-width: thin; scrollbar-color: #383838 transparent;
        }
        .cv-rank-list::-webkit-scrollbar { width: 5px; }
        .cv-rank-list::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .cv-row {
            display: flex; align-items: center; gap: 6px; padding: 4px 6px;
            border-bottom: 1px solid #232323; font-size: 9px;
        }
        .cv-row:last-child { border-bottom: none; }
        .cv-row:hover { background: #1f1f1f; }
        .cv-rank { flex: 0 0 14px; text-align: center; font-size: 8px; color: #6f6f6f; font-variant-numeric: tabular-nums; }
        .cv-rank.top { color: var(--gold-bright); }
        .cv-gname { flex: 0 0 auto; color: #d6d2c6; letter-spacing: 1px; white-space: nowrap; }
        .cv-bar { flex: 1 1 auto; min-width: 18px; height: 3px; background: #151515; border-radius: 2px; overflow: hidden; }
        .cv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5a5238, #c8b078); }
        .cv-num { flex: 0 0 auto; width: 66px; text-align: right; color: #cfcabd; font-variant-numeric: tabular-nums; }
        .cv-empty { padding: 22px 8px; text-align: center; font-size: 8px; color: #5f5f5f; line-height: 1.9; }
        .cv-foot-note { font-size: 7.5px; color: #5f5f5f; padding-top: 5px; margin-top: 4px; border-top: 1px solid #232323; line-height: 1.6; }
        .cv-tiger-panel { flex: 0 0 auto; }
        .cv-tiers { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 5px; }
        .cv-tier {
            font-size: 8px; padding: 1px 6px; border: 1px solid #313131; border-radius: 2px;
            color: #6f6f6f; background: #1b1b1b; font-variant-numeric: tabular-nums; letter-spacing: .5px;
        }
        .cv-tier.on { color: #14120b; background: var(--gold); border-color: var(--gold); font-weight: bold; }
        .cv-tier.next { color: var(--gold-bright); border-color: #6a6046; background: #242320; }
        .cv-tiger-hint { font-size: 8px; color: #7f7f7f; letter-spacing: .5px; }
        .cv-tiger-hint b { color: #c8b078; font-weight: bold; }
        /* 历程页签：个人历程 / 天下大势 */
        .cv-tabs { display: flex; gap: 4px; flex: 0 0 auto; }
        .cv-tab {
            padding: 4px 14px; font-size: 9px; letter-spacing: 2px; color: #7c7c7c; cursor: pointer;
            background: #191919; border: 1px solid #2b2b2b; border-radius: 2px;
            transition: color .12s, border-color .12s, background .12s;
        }
        .cv-tab:hover { color: #b9b4a8; border-color: #3a3a3a; background: #1e1e1e; }
        .cv-tab.active { color: #14120b; background: var(--gold); border-color: var(--gold); font-weight: bold; }

        /* ===== v4.51 需求4：世界史书重绘（历程页第三页签）=====
           旧版每条是"深色卡片块"，首条尤其像一整块黑板；标签/日期还各带方框，"第N日"也显得又高又抢眼。
           新版改成编年体列表：透明底 + 发丝分隔线 + 左侧一抹淡色书签条；
           标签与日期压成行首小字（去框、缩行高），操作按钮平时隐去、悬停才出现。 */
        .ch-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
        .ch-top { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 0 2px; }
        .ch-sum { font-size: 8px; color: #6f6f6f; letter-spacing: .5px; }
        .ch-chips { display: flex; gap: 4px; margin-left: auto; }
        .ch-chip {
            padding: 2px 9px; font-size: 8px; letter-spacing: 1.5px; color: #7c7c7c; cursor: pointer;
            background: transparent; border: 1px solid #2e2e2e; border-radius: 2px;
            transition: color .12s, border-color .12s, background .12s;
        }
        .ch-chip:hover { color: #b9b4a8; border-color: #3f3f3f; background: rgba(255,255,255,.03); }
        .ch-chip.active { color: #14120b; background: var(--gold); border-color: var(--gold); font-weight: bold; }
        .ch-feed {
            flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 4px 0 0;
            display: flex; flex-direction: column; gap: 0;
            scrollbar-width: thin; scrollbar-color: #383838 transparent;
        }
        .ch-feed::-webkit-scrollbar { width: 5px; }
        .ch-feed::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .ch-entry {
            position: relative; padding: 7px 8px 8px 12px;
            background: transparent; border: 0; border-radius: 0;
        }
        .ch-entry + .ch-entry { border-top: 1px solid #232323; }
        .ch-entry:hover { background: rgba(255,255,255,.02); }
        /* 左侧书签条：只到条目上下内缩处，不再是整块底色 */
        .ch-entry::before {
            content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
            border-radius: 1px; background: #343434;
        }
        .ch-entry.k-war::before { background: #8a5a4a; }
        .ch-entry.k-politics::before { background: #6a5a86; }
        .ch-entry.k-trend::before { background: var(--gold-deep); }
        .ch-entry.k-daily::before { background: #6f6444; }
        /* 行首小字：去框、压行高，"第N日"只是淡淡的一行注脚 */
        .ch-entry-head { display: flex; align-items: center; gap: 6px; margin: 0 0 1px; line-height: 1.15; }
        .ch-tag {
            font-size: 7px; letter-spacing: 1px; color: #b9a86a;
            border: 0; background: none; padding: 0;
        }
        .ch-entry.k-war .ch-tag { color: #c08f76; }
        .ch-entry.k-politics .ch-tag { color: #a392c6; }
        .ch-entry.k-trend .ch-tag { color: var(--gold-bright); }
        .ch-day { font-size: 7px; color: #707070; letter-spacing: .3px; font-variant-numeric: tabular-nums; }
        .ch-day::before { content: '·'; margin-right: 4px; color: #4a4a4a; }
        /* v4.54：州府/关隘易主 —— 史书里以金色书签条 + 「要冲」标记，与普通破城区分 */
        .ch-entry.ch-major { background: linear-gradient(90deg, rgba(200,176,120,.07), rgba(200,176,120,0) 70%); }
        .ch-entry.ch-major::before { background: var(--gold-bright); box-shadow: 0 0 5px rgba(216,191,138,.55); }
        .ch-entry.ch-major .ch-tag, .ch-tag-major { color: var(--gold-bright); }
        .ch-major-mark {
            font-size: 7px; letter-spacing: 1px; padding: 0 3px; border-radius: 1px;
            color: #1a1710; background: linear-gradient(180deg, #dcc794, #bfa870);
        }
        /* 操作按钮：常态是极淡的一行小字（不做方框，避免又变成小黑块），悬停整条时才提亮 */
        .ch-ops { margin-left: auto; display: flex; gap: 2px; opacity: .5; transition: opacity .12s; }
        .ch-entry:hover .ch-ops, .ch-entry:focus-within .ch-ops { opacity: 1; }
        .ch-op {
            font-size: 7px; padding: 0 5px; color: #8d8a80; background: transparent;
            border: 1px solid transparent; border-radius: 2px; cursor: pointer; letter-spacing: 1px;
        }
        .ch-op:hover { color: var(--gold-bright); border-color: #4a4332; }
        @media (hover: none) { .ch-ops { opacity: 1; } }
        .ch-title { font-size: 9.5px; color: #dcd8cc; letter-spacing: .5px; line-height: 1.55; font-weight: bold; }
        .ch-entry.k-daily .ch-title { color: #c8b078; }
        .ch-text { margin-top: 2px; font-size: 8px; color: #9d998f; line-height: 1.75; letter-spacing: .3px; }

        /* ===== 天下大势：全服事件链 ===== */
        .wt-body {
            flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 3px;
            display: flex; flex-direction: column; gap: 8px;
            scrollbar-width: thin; scrollbar-color: #383838 transparent;
        }
        .wt-body::-webkit-scrollbar { width: 5px; }
        .wt-body::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .wt-settle {
            display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
            padding: 8px 12px; border-radius: 3px;
            background: linear-gradient(90deg, rgba(200,176,120,.14), rgba(200,176,120,.02));
            border: 1px solid #6a6046;
        }
        .wt-settle-t { font-size: 9px; letter-spacing: 3px; color: var(--gold-bright); }
        .wt-settle-n { font-size: 10px; color: #dedacf; letter-spacing: 1px; }
        .wt-hero {
            display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
            padding: 9px 12px; border-radius: 3px; background: #1a1a1a;
            border: 1px solid #2b2b2b; box-shadow: inset 0 1px 0 rgba(255,255,255,.022);
        }
        .wt-hero-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .wt-hero-name { font-size: 11px; color: #dedacf; letter-spacing: 3px; font-weight: bold; }
        .wt-hero-sub { font-size: 8px; color: #6f6f6f; letter-spacing: .5px; }
        .wt-hero-time {
            margin-left: auto; flex: 0 0 auto; font-size: 10px; color: var(--gold-bright);
            letter-spacing: 1px; font-variant-numeric: tabular-nums;
        }
        .wt-list { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
        .wt-item {
            display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px;
            background: #181818; border: 1px solid #262626; border-radius: 3px;
            border-left: 2px solid #303030;
        }
        .wt-item.live { background: #1d1c18; border-color: #3b382c; border-left-color: var(--gold); }
        .wt-item.done { background: #171717; border-left-color: #4d4735; opacity: .72; }
        .wt-item.off { opacity: .42; }
        .wt-item.wait { border-left-color: #3d3a30; }
        .wt-no { flex: 0 0 14px; font-size: 10px; color: #6f6f6f; line-height: 1.5; text-align: center; }
        .wt-item.live .wt-no { color: var(--gold-bright); }
        .wt-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .wt-top { display: flex; align-items: center; gap: 8px; }
        .wt-name { font-size: 9.5px; color: #d6d2c6; letter-spacing: 1.5px; }
        .wt-item.live .wt-name { color: #eae5d8; }
        .wt-state { margin-left: auto; font-size: 7.5px; color: #6f6f6f; letter-spacing: .5px; }
        .wt-item.live .wt-state { color: var(--gold-bright); }
        .wt-item.done .wt-state { color: #8b8264; }
        .wt-cond { font-size: 8px; color: #7f7f7f; line-height: 1.55; }
        .wt-reward { color: #a99a74; }
        .wt-prog-line { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
        .wt-bar { flex: 1 1 auto; height: 3px; background: #151515; border: 1px solid #2c2c2c; border-radius: 2px; overflow: hidden; }
        .wt-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6a5f42, #c8b078); }
        .wt-prog { flex: 0 0 auto; font-size: 8px; color: #cfcabd; font-variant-numeric: tabular-nums; }
        .wt-extra { margin-top: 3px; font-size: 8px; color: #a99a74; letter-spacing: .5px; }
        .wt-feed { flex: 0 0 auto; padding: 8px 11px; background: #181818; border: 1px solid #262626; border-radius: 3px; }
        .wt-feed-t {
            font-size: 8.5px; color: #c9c4b6; letter-spacing: 2px; padding-bottom: 5px;
            margin-bottom: 4px; border-bottom: 1px solid #262626;
        }
        .wt-feed-row { display: flex; align-items: flex-start; gap: 6px; font-size: 8px; color: #8f8f8f; padding: 2.5px 0; line-height: 1.55; }
        .wt-feed-dot { flex: 0 0 4px; width: 4px; height: 4px; margin-top: 5px; border-radius: 50%; background: #5c5341; }

        /* ===== 战报中心：近期战斗列表 + 复盘详情 ===== */
        .bc-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 8px; }
        .bc-stat { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 8.5px; color: #8f8f8f; letter-spacing: .5px; }
        .bc-stat b { font-size: 10px; color: #dedacf; }
        .bc-stat b.hot { color: var(--gold-bright); text-shadow: 0 0 6px rgba(200,176,120,.45); }
        .bc-stat-sep { color: #3a3a3a; }
        .bc-tabs { display: flex; gap: 5px; flex: 0 0 auto; }
        .bc-tab {
            padding: 3px 10px; font-size: 9px; letter-spacing: 1px; font-family: inherit; cursor: pointer;
            color: #8c8c8c; background: #1b1b1b; border: 1px solid #313131; border-radius: 2px;
            transition: color .15s, border-color .15s, background .15s;
        }
        .bc-tab:hover { color: #d2d2d2; border-color: #4a4a4a; background: #212121; }
        .bc-tab.on { color: var(--gold-bright); background: #262626; border-color: #6a6046; box-shadow: inset 0 -1px 0 rgba(200,176,120,.3); }
        .bc-body { display: flex; gap: 10px; flex: 1 1 auto; min-height: 0; }
        .bc-list {
            flex: 0 0 46%; min-width: 0; overflow-y: auto; padding: 1px 3px 1px 1px;
            scrollbar-width: thin; scrollbar-color: #383838 transparent;
        }
        .bc-list::-webkit-scrollbar { width: 5px; }
        .bc-list::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .bc-row {
            position: relative; display: flex; align-items: stretch; overflow: hidden; cursor: pointer;
            background: #1b1b1b; border: 1px solid #2a2a2a; border-radius: 3px; margin-bottom: 4px;
            transition: border-color .15s, background .15s;
        }
        .bc-row:hover { border-color: #464646; background: #202020; }
        .bc-row.on { border-color: #6a6046; background: #232220; }
        .bc-row-bar { flex: 0 0 2px; width: 2px; }
        .bc-row-main { flex: 1 1 auto; min-width: 0; padding: 4px 7px 5px; }
        .bc-row-r1 { display: flex; align-items: center; gap: 6px; }
        .bc-row-grade { font-size: 10px; font-weight: bold; letter-spacing: 1px; }
        /* v4.45 需求2：同盟战报——列表行与详情里的"友军·某某"标记 */
        .bc-row-ally { font-size: 7.5px; color: #8fb6d8; border: 1px solid #3d5266; border-radius: 2px; padding: 0 3px; white-space: nowrap; }
        .bc-tab.ally { color: #9fc0da; border-color: #3b4e5e; }
        .bc-tab.ally.on { color: #cfe6f8; background: #22303a; border-color: #5b8299; box-shadow: inset 0 -1px 0 rgba(143,182,216,.35); }
        .bc-row-streak { font-size: 7.5px; color: var(--gold-bright); border: 1px solid #6a6046; border-radius: 2px; padding: 0 3px; }
        .bc-row-ago { margin-left: auto; font-size: 7.5px; color: #6f6f6f; white-space: nowrap; }
        .bc-row-r2 { font-size: 8.5px; color: #a9a9a9; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .bc-row-r3 { font-size: 8px; color: #7d7d7d; margin-top: 1px; font-variant-numeric: tabular-nums; }
        .bc-detail {
            flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 9px 11px;
            background: #1a1a1a; border: 1px solid #2b2b2b; border-radius: 3px;
            scrollbar-width: thin; scrollbar-color: #383838 transparent;
        }
        .bc-detail::-webkit-scrollbar { width: 5px; }
        .bc-detail::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .bc-d-head { display: flex; align-items: center; gap: 6px; }
        .bc-grade { font-size: 13px; font-weight: bold; letter-spacing: 2px; border-bottom: 2px solid; padding-bottom: 1px; }
        .bc-d-tag { font-size: 7.5px; color: #9a9a9a; border: 1px solid #3a3a3a; border-radius: 2px; padding: 0 4px; line-height: 14px; }
        .bc-d-tag.streak { color: var(--gold-bright); border-color: #6a6046; }
        .bc-d-tag.ally { color: #9fc0da; border-color: #3b4e5e; }
        .bc-d-ago { margin-left: auto; font-size: 7.5px; color: #6f6f6f; }
        .bc-d-place { font-size: 9px; color: #cfcabd; margin-top: 7px; line-height: 1.6; }
        .bc-d-opp { color: #8f8f8f; margin-left: 6px; }
        .bc-d-nums { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 8.5px; color: #8f8f8f; margin-top: 5px; }
        .bc-d-nums b { color: #dedacf; font-variant-numeric: tabular-nums; }
        .bc-d-sec {
            font-size: 8px; color: #8f8f8f; letter-spacing: 2px;
            margin-top: 9px; padding-bottom: 4px; border-bottom: 1px solid #262626;
        }
        .bc-d-units { margin-top: 3px; }
        .bc-unit { display: flex; align-items: center; gap: 6px; font-size: 8px; padding: 2.5px 0; border-bottom: 1px solid #202020; }
        .bc-unit.mine .bc-u-name { color: #c8c0a8; }
        .bc-u-name { flex: 0 0 76px; color: #b9b9b9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        /* v4.51 需求1：战报显示"哪支部队 / 哪位武将" */
        .bc-row-troop { color: #c8b078; margin-right: 6px; }
        .bc-u-troop { flex: 0 0 auto; max-width: 104px; color: #c8b078; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .bc-d-troop { margin-left: 8px; color: #cbb87a; }
        .bc-u-type { flex: 0 0 44px; color: #9a9384; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .bc-u-num { flex: 0 0 96px; color: #a8a8a8; font-variant-numeric: tabular-nums; }
        .bc-u-loss { flex: 0 0 62px; text-align: right; color: #c07a6a; font-variant-numeric: tabular-nums; }
        .bc-u-left { flex: 1 1 auto; text-align: right; color: #8a8474; white-space: nowrap; }
        .bc-d-events { margin-top: 3px; max-height: 108px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #383838 transparent; }
        .bc-d-events::-webkit-scrollbar { width: 5px; }
        .bc-d-events::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .bc-ev { font-size: 8px; color: #8f8f8f; line-height: 1.75; }
        /* ===== v4.38 战斗详情：总览对比 / 兵力曲线 / 部队明细 / 状态效果 ===== */
        .br-meta { font-size: 9px; line-height: 1.9; color: #a9a9a9; }
        .br-meta b { color: #e3c486; }
        .br-cmp { display: flex; gap: 8px; margin-top: 5px; align-items: stretch; flex-wrap: wrap; }
        .br-side {
            flex: 1 1 210px; min-width: 180px; background: #1b1b1b; border: 1px solid #2c2c2c;
            border-left-width: 2px; border-radius: 2px; padding: 6px 8px 7px;
        }
        .br-side.my { border-left-color: #b9a86a; }
        .br-side.en { border-left-color: #b06a5a; }
        .br-side-h {
            display: flex; align-items: center; gap: 5px; font-size: 9px; color: #d5cfbf; letter-spacing: 1px;
            padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid #262626;
        }
        .br-side-h .br-badge { font-size: 7px; padding: 0 4px; line-height: 13px; border: 1px solid #3a3a3a; color: #9a9a9a; border-radius: 2px; }
        .br-side-h .br-badge.my { color: #d8c48a; border-color: #5c5341; }
        .br-side-h .br-badge.en { color: #cf8d7c; border-color: #5a3a34; }
        .br-side-h .br-n { margin-left: auto; font-size: 7.5px; color: #777; }
        .br-kv { display: flex; align-items: baseline; gap: 4px; font-size: 8px; color: #8f8f8f; line-height: 1.85; }
        .br-kv .k { flex: 0 0 62px; color: #7a7a7a; }
        .br-kv .v { color: #dedacf; font-variant-numeric: tabular-nums; }
        .br-kv .v.loss { color: #c07a6a; }
        .br-kv .v.gain { color: #8fb98a; }
        .br-mid {
            flex: 0 0 126px; display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 3px; background: #181818; border: 1px solid #2b2b2b; border-radius: 2px; padding: 6px;
        }
        .br-mid .t { font-size: 7.5px; color: #777; letter-spacing: 2px; }
        .br-mid .v { font-size: 15px; color: #d8c48a; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
        .br-mid .s { font-size: 7.5px; color: #7d7d7d; text-align: center; line-height: 1.6; }
        .br-chart { margin-top: 4px; background: #161616; border: 1px solid #262626; border-radius: 2px; padding: 4px 6px 2px; }
        .br-chart svg { display: block; width: 100%; height: auto; }
        .br-legend { display: flex; align-items: center; gap: 10px; font-size: 7.5px; color: #8a8474; padding: 1px 2px 3px; }
        .br-legend .dot { display: inline-block; width: 8px; height: 2px; vertical-align: middle; margin-right: 3px; }
        .br-table { width: 100%; border-collapse: collapse; font-size: 8px; margin-top: 4px; }
        .br-table th {
            font-weight: normal; color: #8a8474; text-align: left; padding: 2px 4px;
            border-bottom: 1px solid #2a2a2a; white-space: nowrap;
        }
        .br-table td { padding: 3px 4px; border-bottom: 1px solid #1f1f1f; color: #b9b9b9; white-space: nowrap; }
        .br-table tr.mine td { background: rgba(200,176,120,.045); }
        .br-table tr.mine td:first-child { color: #d3c9a9; }
        .br-table .num { text-align: right; font-variant-numeric: tabular-nums; }
        .br-table .loss { color: #c07a6a; }
        .br-table .gain { color: #8fb98a; }
        .br-table .dim { color: #6f6f6f; }
        .br-sub { font-size: 7.5px; color: #777; margin-left: 6px; }
        .br-st-wrap { margin-top: 4px; }
        .br-st-row { padding: 4px 0; border-bottom: 1px solid #1f1f1f; }
        .br-st-h { font-size: 8.5px; color: #b9b9b9; }
        .br-st-h .u { color: #9a9384; margin-left: 5px; }
        .br-st-h .side { margin-left: 5px; font-size: 7px; color: #777; }
        .br-st-line { display: flex; align-items: flex-start; gap: 5px; margin-top: 3px; }
        .br-st-line > .lb { flex: 0 0 58px; font-size: 7.5px; color: #777; padding-top: 1px; }
        .br-st-list { display: flex; flex-wrap: wrap; gap: 3px; flex: 1 1 auto; }
        .br-st {
            font-size: 7.5px; line-height: 15px; padding: 0 5px; border: 1px solid #3a3a3a;
            border-radius: 2px; color: #a8a8a8; background: #1e1e1e;
        }
        .br-st.b { color: #d8c48a; border-color: #5c5341; background: rgba(200,176,120,.07); }
        .br-st.d { color: #cf8d7c; border-color: #5a3a34; background: rgba(200,90,70,.07); }
        .br-st.n { color: #9fb0a8; border-color: #3a4a44; }
        .br-empty-line { font-size: 7.5px; color: #5f5f5f; line-height: 15px; }
        /* ===== v4.45 战报图例化：兵力条 / 关键数据块 / 攻守解读 / 阵营标 ===== */
        .bc-bars { margin-top: 3px; }
        .bc-bar { margin-top: 4px; }
        .bc-bar-h { display: flex; align-items: baseline; gap: 8px; font-size: 8px; color: #8f8f8f; }
        .bc-bar-t { flex: 0 0 74px; color: #a9a9a9; letter-spacing: 1px; }
        .bc-bar.my .bc-bar-t { color: #d3c9a9; }
        .bc-bar.en .bc-bar-t { color: #cf8d7c; }
        .bc-bar-n { flex: 1 1 auto; color: #b9b9b9; font-variant-numeric: tabular-nums; }
        .bc-bar-p { flex: 0 0 auto; color: #777; font-variant-numeric: tabular-nums; }
        .bc-bar-track {
            height: 5px; margin-top: 2px; background: #222; border: 1px solid #2c2c2c;
            border-radius: 2px; overflow: hidden;
        }
        .bc-bar-track i { display: block; height: 100%; }
        .bc-bar.my .bc-bar-track i { background: linear-gradient(90deg, #6f6247, #c8b078); }
        .bc-bar.en .bc-bar-track i { background: linear-gradient(90deg, #5a352e, #b06a5a); }
        .bc-kpi { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
        .bc-kpi .k {
            flex: 1 1 100px; min-width: 90px; background: #1b1b1b; border: 1px solid #2c2c2c;
            border-radius: 2px; padding: 5px 8px 6px;
        }
        .bc-kpi .t { display: block; font-size: 7.5px; color: #7a7a7a; letter-spacing: 1px; }
        .bc-kpi .v { display: block; font-size: 14px; color: #d8c48a; font-variant-numeric: tabular-nums; line-height: 1.35; }
        .bc-kpi .s { display: block; font-size: 7.5px; color: #8a8474; line-height: 1.6; }
        .bc-u-role {
            flex: 0 0 14px; text-align: center; font-size: 7px; line-height: 13px; border-radius: 2px;
            border: 1px solid #3a3a3a; color: #9a9a9a;
        }
        .bc-u-loss { position: relative; padding-bottom: 3px; flex: 0 0 96px; }
        .bc-u-loss i {
            position: absolute; left: 0; bottom: 0; height: 2px; display: block;
            background: rgba(192, 122, 106, .5); border-radius: 1px;
        }
        .bc-u-loss em { font-style: normal; }
        /* 损失条加宽后让「离场」列可截断，避免窄窗口下 nowrap 文本溢出到面板外 */
        .bc-unit .bc-u-left { overflow: hidden; text-overflow: ellipsis; }
        .bc-d-actions { margin-top: 9px; text-align: right; }
        .bc-detail-btn {
            font-family: inherit; font-size: 8px; letter-spacing: 1px; cursor: pointer;
            color: #d8c48a; background: #222; border: 1px solid #5c5341; border-radius: 2px;
            padding: 4px 10px;
        }
        .bc-detail-btn:hover { background: #2a2a2a; border-color: #8a7a52; }
        /* v4.45 需求1：详情操作区按钮并排（定位按钮已于 v4.47 需求4 移到标题右上角） */
        .bc-detail-btn + .bc-detail-btn { margin-left: 6px; }
        .br-brief {
            margin-top: 7px; padding: 6px 9px; background: #1b1b1b; border: 1px solid #2c2c2c;
            border-left-width: 2px; border-radius: 2px; font-size: 8.5px; line-height: 1.75; color: #a9a9a9;
        }
        .br-brief.win { border-left-color: #b9a86a; }
        .br-brief.lose { border-left-color: #b06a5a; }
        .br-brief-t { color: #d5cfbf; }
        .br-brief-t b { color: #e3c486; }
        .br-brief-v { margin-top: 3px; font-size: 9px; letter-spacing: .5px; }
        .br-brief.win .br-brief-v { color: #d8c48a; }
        .br-brief.lose .br-brief-v { color: #cf8d7c; }
        .br-brief-r { margin-top: 3px; color: #8f8f8f; font-variant-numeric: tabular-nums; }
        .br-side-tag {
            font-size: 7px; line-height: 13px; padding: 0 4px; border-radius: 2px;
            border: 1px solid #3a3a3a; color: #9a9a9a;
        }
        .br-note { font-size: 7.5px; color: #6f6f6f; margin-top: 4px; line-height: 1.7; }
        .bc-empty {
            display: flex; align-items: center; justify-content: center; height: 100%; min-height: 120px;
            text-align: center; font-size: 8px; color: #5f5f5f; line-height: 1.9;
        }
        .btn-confirm.is-drawing {
            opacity: .5; cursor: progress; color: var(--txt-dim);
            border-color: #4a4a4a; background-color: #262626;
        }
        .notification-toast {
            position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
            background-color: #1a1a1a; border: 1px solid #444; padding: 7px 14px;
            font-size: 9px; color: #bbb; letter-spacing: 1px; z-index: 30;
            pointer-events: none; opacity: 0; transition: opacity 0.3s; border-radius: 2px;
            max-width: 80vw; text-align: center;
        }
        .notification-toast.show { opacity: 1; }
        .notification-toast.warn { border-color: #c89540; color: #e0b870; }
        .soldier-slider {
            width: 100%; margin: 6px 0; height: 4px;
            -webkit-appearance: none; appearance: none;
            background: #2a2a2a; border-radius: 2px; outline: none;
        }
        .soldier-slider::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 12px; height: 12px; border-radius: 50%;
            background: #666; border: 1px solid #888; cursor: pointer;
        }
        .soldier-slider::-moz-range-thumb {
            width: 12px; height: 12px; border-radius: 50%;
            background: #666; border: 1px solid #888; cursor: pointer;
        }
        .quick-btn {
            padding: 3px 9px; font-size: 8px; background-color: #222;
            border: 1px solid #3a3a3a; color: #999; cursor: pointer;
            border-radius: 2px; margin-right: 4px; transition: border-color 0.15s, color 0.15s, background-color 0.15s;
        }
        .quick-btn:hover { border-color: #5c5c5c; color: #ccc; background-color: rgba(255,255,255,0.04); }
        .city-select {
            width: 100%; padding: 5px 7px; font-size: 9px;
            background-color: #1a1a1a; color: #bbb; border: 1px solid #3a3a3a;
            border-radius: 2px; margin: 4px 0; outline: none;
        }
        .city-select:focus { border-color: #5c5c5c; }
        /* v4.31：编成部队的驻扎城池行（替代下拉框，改在地图上点选） */
        .sn-city-row {
            display: flex; align-items: center; gap: 8px;
            padding: 7px 9px; margin: 4px 0;
            background-color: #1a1a1a; border: 1px solid #3a3a3a; border-radius: 2px;
        }
        .sn-city-row.is-set { border-color: #4b4436; background: linear-gradient(180deg, #1e1c17, #171614); }
        .sn-city-row .sn-city-name { font-size: 11px; font-weight: bold; color: #d8cfa8; letter-spacing: .5px; }
        .sn-city-row .sn-city-sub { flex: 1 1 auto; font-size: 8.5px; color: #7a7568; }
        .sn-city-row .sn-city-pick {
            flex: 0 0 auto; font-size: 9px; padding: 4px 10px; border-radius: 2px; cursor: pointer;
            background-color: #24211a; border: 1px solid #5a4f35; color: #d8c07a;
            transition: background-color .15s, border-color .15s, color .15s;
        }
        .sn-city-row .sn-city-pick:hover { background-color: #302b20; border-color: #8a7442; color: #f0dca0; }
        button:focus, select:focus, input:focus, .soldier-slider:focus { outline: none; }
        .terrain-info {
            font-size: 8px; padding: 6px 8px; margin: 6px 0;
            border: 1px solid #3a3a3a; background-color: #1a1a1a;
            border-radius: 2px; line-height: 1.55; color: #888;
        }
        .tier-badge {
            display: inline-block; font-size: 7px; padding: 1px 5px;
            border-radius: 3px; margin-left: 4px; line-height: 1.5;
        }
        .tier-zhou-badge { background-color: var(--gold-tint); color: var(--gold-bright); border: 1px solid var(--gold-deep); }
        .tier-county-badge { background-color: #2c2c2c; color: #c4c4c4; border: 1px solid #4a4a4a; }
        .tier-city-badge { background-color: #262626; color: #9a9a9a; border: 1px solid #3e3e3e; }
        .tier-pass-badge { background-color: #262626; color: #9a9a9a; border: 1px dashed #4d4d4d; }
        .buff-badge-siege { background-color: #3a2a1a; color: #e8b072; border: 1px solid #6a462c; border-radius: 3px; }
        .buff-badge-fall { background-color: #3a1a1a; color: #e68a8a; border: 1px solid #6a3030; border-radius: 3px; }
        /* v4.46 需求8：【警戒】徽标——失城后其余城池耐久上限 +30%/层、60 分钟内有效 */
        .buff-badge-alert { background-color: #3a2f14; color: #e8c88a; border: 1px solid #6a5526; border-radius: 3px; }
        .tier-desc-box {
            font-size: 8px; padding: 7px 9px; margin: 6px 0;
            background-color: #1c1c1c; border: 1px solid var(--line-soft);
            border-radius: 3px; line-height: 1.65; color: var(--txt-dim);
        }
        .tier-desc-box .tier-tag {
            font-weight: bold; margin-right: 4px; color: var(--gold-bright);
        }
        .buff-desc-box {
            font-size: 8px; padding: 6px 8px; margin: 4px 0;
            background-color: #1c1c1c; border: 1px solid var(--line-soft);
            border-radius: 3px; line-height: 1.65; color: var(--txt-dim);
            white-space: normal; max-width: 230px; box-sizing: border-box;
            overflow-wrap: break-word; word-break: break-word;
        }
        .buff-desc-box .buff-tag {
            color: var(--gold); font-weight: bold; margin-right: 4px;
        }
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #4d4d4d; }

        /* ===== M3 选州悬浮窗（暗底风格） ===== */
        .ss-overlay {
            position: fixed; inset: 0; z-index: 4000;
            background: rgba(10, 10, 10, 0.92);
            display: flex; align-items: center; justify-content: center;
            font-family: "Microsoft YaHei", sans-serif;
        }
        .ss-panel {
            width: min(760px, 92vw); max-height: 90vh; overflow-y: auto;
            background: var(--bg-app); border: 1px solid var(--line);
            border-radius: 6px; padding: 22px 24px 20px;
            box-shadow: 0 12px 48px rgba(0, 0, 0, .6);
        }
        .ss-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
        .ss-bar { width: 3px; height: 16px; background: var(--gold); border-radius: 2px; }
        .ss-title { font-size: 15px; letter-spacing: 4px; color: var(--gold-bright); font-weight: bold; }
        .ss-desc { font-size: 11px; color: var(--txt-dim); line-height: 1.7; margin-bottom: 14px; }
        .ss-field { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
        .ss-field > span { font-size: 11px; color: var(--txt); white-space: nowrap; }
        .ss-field input {
            flex: 1; background: #141414; border: 1px solid var(--line-control);
            color: var(--txt-strong); font-size: 12px; padding: 8px 10px;
            border-radius: 3px; outline: none; font-family: inherit;
        }
        .ss-field input:focus { border-color: var(--gold-deep); }
        .ss-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
        .ss-card {
            display: flex; flex-direction: column; gap: 3px;
            background: var(--bg-card); border: 1px solid var(--line);
            border-radius: 4px; padding: 10px 8px; cursor: pointer;
            color: var(--txt); font-family: inherit; text-align: left;
            transition: border-color .15s, background .15s;
        }
        .ss-card:hover:not(.ss-disabled) { border-color: var(--gold-deep); background: var(--bg-hover); }
        .ss-k { font-size: 13px; color: var(--txt-strong); letter-spacing: 2px; }
        .ss-sub { font-size: 10px; color: var(--txt-faint); min-height: 13px; }
        .ss-free { font-size: 10px; color: var(--green); margin-top: 2px; }
        .ss-card.ss-disabled { opacity: .4; cursor: not-allowed; }
        .ss-card.ss-disabled .ss-free { color: var(--txt-faint); }
        .ss-err { min-height: 16px; margin-top: 10px; font-size: 11px; color: var(--red); }
        .ss-card.ss-active { border-color: var(--gold-deep); background: var(--gold-tint); }
        .ss-confirm {
            display: block; width: 100%; margin-top: 14px; padding: 10px 0;
            background: var(--gold-tint); border: 1px solid var(--gold-deep); border-radius: 3px;
            color: var(--gold-bright); font-size: 13px; letter-spacing: 4px; cursor: pointer;
            font-family: inherit; transition: border-color .15s, opacity .15s;
        }
        .ss-confirm:hover:not(:disabled) { border-color: var(--gold); }
        .ss-confirm:disabled { opacity: .4; cursor: not-allowed; }
        .ss-back {
            display: block; width: 100%; margin-top: 8px; padding: 7px 0;
            background: none; border: 1px solid var(--line); border-radius: 3px;
            color: var(--txt-dim); font-size: 11px; letter-spacing: 2px; cursor: pointer;
            font-family: inherit; transition: border-color .15s, color .15s;
        }
        .ss-back:hover { border-color: var(--gold-deep); color: var(--txt); }
        .ss-map {
            position: relative; width: 100%; aspect-ratio: 10850 / 6210; margin-bottom: 14px;
            background: radial-gradient(120% 120% at 50% 38%, #202020 0%, #151515 100%);
            border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
        }
        .ss-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
        .ss-map .ss-card {
            position: absolute; width: 78px; padding: 5px 5px; transform: translate(-50%, -50%);
            align-items: center; text-align: center; z-index: 1;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
        }
        .ss-map .ss-card .ss-k { font-size: 12px; letter-spacing: 1px; }
        @media (max-width: 560px) { .ss-grid { grid-template-columns: repeat(2, 1fr); } }

        /* M6：断线重连浮层 */
        .reconnect-overlay {
            position: fixed; inset: 0; z-index: 5000; display: none;
            align-items: center; justify-content: center; background: rgba(10, 10, 10, 0.68);
            font-family: "Microsoft YaHei", sans-serif;
        }
        .reconnect-overlay.show { display: flex; }
        .reconnect-box {
            display: flex; align-items: center; gap: 10px;
            background: var(--bg-app); border: 1px solid var(--line);
            border-radius: 6px; padding: 16px 24px; box-shadow: 0 12px 48px rgba(0, 0, 0, .6);
        }
        .reconnect-txt { font-size: 13px; letter-spacing: 2px; color: var(--gold-bright); }
        .reconnect-spin {
            width: 14px; height: 14px; border-radius: 50%;
            border: 2px solid var(--gold-deep); border-top-color: transparent;
            animation: reconnect-spin .8s linear infinite;
        }
        @keyframes reconnect-spin { to { transform: rotate(360deg); } }
        /* 封禁提示（常驻，不再重连） */
        .banned-overlay {
            position: fixed; inset: 0; z-index: 5200; display: none;
            align-items: center; justify-content: center; background: rgba(8, 8, 8, 0.86);
            font-family: "Microsoft YaHei", sans-serif;
        }
        .banned-overlay.show { display: flex; }
        .banned-box {
            min-width: 300px; max-width: 420px; text-align: center;
            background: #1b1917; border: 1px solid #4a3b32;
            border-radius: 6px; padding: 24px 28px;
            box-shadow: 0 16px 54px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .03);
        }
        .banned-title { font-size: 14px; letter-spacing: 5px; color: #d9917f; font-weight: bold; }
        .banned-text { font-size: 11px; color: #c9c1b6; margin-top: 12px; letter-spacing: 1px; line-height: 1.8; }
        .banned-reason {
            font-size: 10px; color: #9a8f84; margin-top: 8px; line-height: 1.7;
            padding: 6px 8px; background: #221e1b; border: 1px solid #332b26; border-radius: 3px;
        }
        .banned-hint { font-size: 9px; color: #6a6259; margin-top: 14px; letter-spacing: 1px; }
        /* ===== 城中城：洛阳内城页 ===== */
        .ic-head-stat { flex: 1 1 auto; font-size: 10px; color: #9a9a90; letter-spacing: 1px; }
        .iv-btn {
            background: #232323; border: 1px solid #3a3a3a; color: #c0c0c0;
            font-size: 11px; padding: 4px 12px; border-radius: 3px; cursor: pointer;
        }
        .iv-btn:hover { background: #2e2e2e; color: #f0f0ea; border-color: #5a5a5a; }
        .ic-body { display: flex; gap: 0; flex: 1 1 auto; min-height: 0; align-items: flex-start; justify-content: center; }
        .ic-map { position: relative; flex: 0 0 auto; margin: 0 auto; height: 440px; }
        .ic-map canvas {
            width: 690px; height: 440px; display: block;
            background: #12110d; cursor: grab; touch-action: none; user-select: none;
        }
        .ic-hint { position: absolute; left: 8px; right: 8px; bottom: 6px; font-size: 9px; color: rgba(140,140,132,0.75); letter-spacing: 1px; pointer-events: none; }
        .ic-side {
            flex: 1 1 auto; min-width: 0; height: 450px; overflow-y: auto;
            background: #1b1b1b; border: 1px solid #3a3a3a; border-radius: 3px; padding: 10px 12px;
        }
        .ic-side-title { font-size: 13px; color: #d8d4c8; font-weight: bold; letter-spacing: 2px; margin-bottom: 8px; }
        .ic-side-note { font-size: 10px; color: #8e8e84; line-height: 1.7; margin: 6px 0 10px; }
        .ic-side-row { display: flex; justify-content: space-between; font-size: 11px; color: #9a9a90; padding: 4px 0; border-bottom: 1px solid #262626; }
        .ic-side-row b { color: #d8d4c8; font-weight: normal; }
        .ic-gates { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
        .ic-gate-row {
            display: flex; align-items: center; gap: 8px; font-size: 11px; color: #b8b8ae;
            background: #202020; border: 1px solid #333; border-radius: 3px; padding: 5px 8px; cursor: pointer;
        }
        .ic-gate-row:hover { border-color: #6a6a5a; background: #262622; }
        .ic-gate-dir { width: 16px; color: #8a8a80; }
        .ic-gate-name { flex: 1 1 auto; color: #d8d4c8; }
        .ic-gate-num { font-size: 10px; color: #9a9a90; }
        .ic-act {
            width: 100%; margin-top: 12px; background: #2f3a2c; border: 1px solid #4a6a4a; color: #d8e0c8;
            font-size: 11px; padding: 7px 10px; border-radius: 3px; cursor: pointer; letter-spacing: 1px;
        }
        .ic-act:hover { background: #3a4a36; border-color: #6a8a5a; }
        .own-player, .own-occupied { color: #8fbf8a; }
        .own-enemy { color: #cf8a80; }
        .own-ally { color: #8aa6c8; }
        .own-neutral { color: #9a9a90; }
        .ic-gate-own { font-size: 10px; }

        /* ===== v4.3 征兵页 ===== */
        .ru-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 9px; }
        .ru-head {
            display: flex; align-items: baseline; flex-wrap: wrap; row-gap: 4px; gap: 10px; flex: 0 0 auto;
            padding-bottom: 8px; border-bottom: 1px solid #2a2a2a;
        }
        .ru-title {
            position: relative; padding-left: 11px; font-size: 13px; color: #dedacf;
            font-weight: bold; letter-spacing: 4px;
        }
        .ru-title::before {
            content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
            width: 3px; height: 13px; border-radius: 1px; background: var(--gold);
            box-shadow: 0 0 6px rgba(200,176,120,.42);
        }
        .ru-sub { font-size: 8px; color: #6f6f6f; letter-spacing: .5px; }
        .ru-drill { font-size: 8.5px; color: #a89a78; letter-spacing: .5px; white-space: nowrap; }
        .ru-back { margin-left: auto; white-space: nowrap; }
        .ru-cost { font-size: 9px; color: #a89a78; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
        .ru-cost b { color: #cfc8b8; font-weight: normal; font-variant-numeric: tabular-nums; }
        .ru-rate { font-size: 8px; color: #7d7d7d; }
        .ru-job { font-size: 9px; color: #8f8f8f; min-height: 14px; }
        .ru-job b { color: var(--gold-bright); font-weight: normal; }
        .ru-idle { color: #5f5f5f; }
        .ru-full { color: #c89540; }
        .ru-prog { height: 3px; background: #131313; border: 1px solid #2c2c2c; border-radius: 2px; overflow: hidden; }
        .ru-prog i { display: block; height: 100%; background: linear-gradient(90deg, #6a5f42, #c8b078); transition: width .3s linear; }
        /* 顶部：当前征兵资源消耗 + 耗尽预估 */
        .ru-drain {
            flex: 0 0 auto; font-size: 8.5px; color: #8f8f8f; line-height: 1.6;
            padding: 5px 9px; background: #191919; border: 1px solid #262626; border-radius: 3px;
        }
        .ru-drain b { color: #cfcabd; font-weight: normal; font-variant-numeric: tabular-nums; }
        .ru-drain b.ru-eta { color: #c89540; }
        .ru-note { font-size: 8px; color: #6f6f6f; line-height: 1.7; flex: 0 0 auto; }
        .ru-note b { color: #a89a78; font-weight: normal; }

        /* ===== v4.9 征兵页：预备兵存量与「征预备兵」合并为顶部一排 ===== */
        .ru-topline { flex: 0 0 auto; }
        .ru-top {
            display: flex; flex-direction: column; gap: 5px; padding: 9px 13px 0; overflow: hidden;
            background: linear-gradient(180deg, #1d1c19, #181817);
            border: 1px solid #34302a; border-radius: 3px;
        }
        .ru-top.is-busy { border-color: #5c5340; box-shadow: inset 0 0 0 1px rgba(200,176,120,.10); }
        .ru-top-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; row-gap: 4px; }
        .ru-top-tag { font-size: 9px; color: #8e887a; letter-spacing: 1.5px; }
        .ru-top-v { font-size: 19px; color: var(--gold-bright); font-variant-numeric: tabular-nums; line-height: 1; }
        .ru-top-v em { font-style: normal; font-size: 9px; color: #6f6f6f; }
        .ru-top-hint { font-size: 8px; color: #6a655a; line-height: 1.6; }
        .ru-top-acts { margin-left: auto; display: flex; gap: 6px; align-self: center; }
        .ru-top-acts button { min-width: 64px; padding: 4px 10px; font-size: 9.5px; }
        .ru-top .ru-prog { margin: 0 -13px; border: 0; border-top: 1px solid #2c2c2c; border-radius: 0; height: 3px; }
        .ru-body { display: flex; gap: 10px; flex: 1 1 auto; min-height: 0; }
        .ru-col-l {
            flex: 0 0 42%; min-width: 246px; max-width: 340px; display: flex; flex-direction: column; min-height: 0;
            overflow-y: auto; scrollbar-width: thin; scrollbar-color: #383838 transparent;
            background: #171717; border: 1px solid #2b2b2b; border-radius: 3px; padding: 8px 10px 9px;
        }
        .ru-col-l::-webkit-scrollbar { width: 5px; }
        .ru-col-l::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .ru-col-r { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: #171717; border: 1px solid #2b2b2b; border-radius: 3px; padding: 8px 10px 9px; }
        .ru-sec-h { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; gap: 9px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid #262626; flex: 0 0 auto; }
        .ru-sec-h > span:first-child { font-size: 10px; color: #c9c4b6; letter-spacing: 2px; }
        .ru-sec-h > span:first-child b { color: var(--gold-bright); font-weight: normal; font-size: 12px; }
        .ru-sec-h > span:first-child em { font-style: normal; font-size: 8px; color: #6f6f6f; }
        .ru-sec-sub { font-size: 8px; color: #6a655a; }
        .ru-sec-btn { margin-left: auto; padding: 4px 10px; font-size: 8.5px; white-space: nowrap; }
        .ru-units { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: #383838 transparent; padding-right: 2px; }
        /* ===== v4.9：左栏武将任命 / 右栏普通部队编制，两栏独立滚动 ===== */
        .ru-heroes { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
        .ru-hero-card {
            display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; min-width: 0;
            background: #1b1b1b; border: 1px solid #2c2c2c; border-radius: 3px;
        }
        .ru-hero-card.is-empty { border-style: dashed; border-color: #2a2a2a; background: #171717; }
        .ru-hero-top { display: flex; align-items: center; gap: 5px; min-width: 0; flex-wrap: wrap; }
        .ru-hero-name { font-size: 11px; color: #d8d3c4; letter-spacing: 1px; }
        .ru-hero-card.is-empty .ru-hero-name { color: #6f6f6f; }
        .ru-hero-lv { margin-left: auto; font-size: 8px; color: #8a8474; white-space: nowrap; }
        .ru-hero-tag { font-style: normal; font-size: 8px; color: #c89540; border: 1px solid #4a4030; border-radius: 2px; padding: 0 3px; white-space: nowrap; }
        .ru-hero-st { font-size: 8.5px; color: #8b8b8b; line-height: 1.5; min-height: 26px; }
        .ru-hero-st b { color: #cfc8b8; font-weight: normal; font-variant-numeric: tabular-nums; }
        .ru-hero-card.is-empty .ru-hero-st { display: flex; align-items: center; justify-content: center; color: #5f5f5f; letter-spacing: 2px; }
        .ru-hero-acts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; }
        .ru-hero-acts button { flex: 1 1 0; padding: 3px 4px; font-size: 8.5px; white-space: nowrap; }
        .ru-units::-webkit-scrollbar { width: 5px; }
        .ru-units::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .ru-unit {
            display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 7px 9px;
            background: #1b1b1b; border: 1px solid #2c2c2c; border-radius: 3px; min-width: 0;
        }
        .ru-unit.is-out { border-color: #4a4030; background: #1d1b17; }
        .ru-unit-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
        .ru-unit-acts {
            display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
            justify-content: flex-end; padding-top: 4px; border-top: 1px dashed #262626;
        }
        .ru-unit-acts .ru-unit-st { margin-right: auto; }
        .ru-unit-badge {
            flex: 0 0 auto; min-width: 17px; text-align: center; font-size: 9.5px; line-height: 16px;
            font-weight: bold; border-radius: 3px; border: 1px solid #9aa2aa66; background: #9aa2aa1a;
        }
        .ru-unit-name { flex: 0 0 auto; font-size: 10px; color: #d6d1c4; letter-spacing: 1px; white-space: nowrap; }
        .ru-unit-num { flex: 0 0 auto; font-size: 11px; color: #e2ddd0; font-variant-numeric: tabular-nums; }
        .ru-unit-num em { font-style: normal; font-size: 8px; color: #6f6f6f; }
        .ru-unit-bar { flex: 1 1 auto; min-width: 30px; height: 3px; background: #131313; border: 1px solid #2c2c2c; border-radius: 2px; overflow: hidden; }
        .ru-unit-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6a5f42, #c8b078); }
        .ru-unit-st { flex: 0 0 auto; font-size: 8px; color: #8a8474; white-space: nowrap; }
        .ru-unit-btn { flex: 0 0 auto; padding: 3px 8px; font-size: 8px; white-space: nowrap; }
        .ru-unit-empty { padding: 22px 10px; text-align: center; font-size: 8.5px; color: #5f5f5f; letter-spacing: 1px; border: 1px dashed #2f2f2f; border-radius: 3px; line-height: 1.9; }

        /* ===== v4.6 出征/出城：部队选择卡 ===== */
        .mu-list { display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow-y: auto; margin-top: 4px; scrollbar-width: thin; scrollbar-color: #383838 transparent; }
        .mu-list::-webkit-scrollbar { width: 5px; }
        .mu-list::-webkit-scrollbar-thumb { background: #383838; border-radius: 3px; }
        .mu-card {
            display: flex; align-items: center; gap: 8px; padding: 7px 9px; font-family: inherit; text-align: left;
            background: #1b1b1b; border: 1px solid #2c2c2c; border-radius: 3px; cursor: pointer;
            transition: border-color .15s, background .15s;
        }
        .mu-card:hover:not(:disabled) { border-color: #4a4a4a; background: #202020; }
        .mu-card.is-active { border-color: #6a6046; background: #232220; box-shadow: inset 0 0 0 1px rgba(200,176,120,.12); }
        .mu-card:disabled { opacity: .4; cursor: not-allowed; }
        .mu-badge {
            flex: 0 0 auto; min-width: 17px; text-align: center; font-size: 9.5px; line-height: 16px;
            font-weight: bold; border-radius: 3px; border: 1px solid #9aa2aa66; background: #9aa2aa1a;
        }
        .mu-name { flex: 0 0 auto; font-size: 10px; color: #d6d1c4; letter-spacing: 1px; white-space: nowrap; }
        .mu-num { margin-left: auto; font-size: 10.5px; color: #cfc8b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .mu-num em { font-style: normal; font-size: 8px; color: #6f6f6f; }
        .mu-empty {
            padding: 18px 10px; text-align: center; font-size: 8.5px; color: #7a756a;
            border: 1px dashed #333; border-radius: 3px; line-height: 1.9;
        }
        .mu-empty span { color: #5f5f5f; font-size: 8px; }
        .mu-tip { font-size: 8px; color: #6a655a; margin-top: 5px; }

        /* ===== v4.6 右侧部队状态：普通部队编制卡 ===== */
        .squad-card .tc-name { color: #cfc8b8; }
        .squad-card .tc-troops.is-full { color: #c8b078; }
        .tc-sq-draft, .tc-sq-march, .tc-sq-disband {
            font-family: inherit; font-size: 8px; padding: 2px 6px; line-height: 1.3; cursor: pointer;
            color: #bfb8a6; background: #232323; border: 1px solid #3a3a3a; border-radius: 2px;
        }
        .tc-sq-draft:hover, .tc-sq-march:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
        .tc-sq-disband:hover { color: #c88a7a; border-color: #5a3a34; }
        .tc-sq-draft.is-disabled { opacity: .4; cursor: not-allowed; }
        /* ===== v4.29 征兵中：按钮外圈一圈环绕流转的高光（点【征兵】后一直转到满员/停征） ===== */
        @property --recruitAng { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
        .tc-sq-draft.is-on, .tc-hj.is-on { position: relative; box-shadow: 0 0 6px rgba(232,196,94,.16); }
        .tc-sq-draft.is-on { color: var(--gold-bright); border-color: #6b5a33; background: rgba(200,164,90,.14); }
        .tc-sq-draft.is-on::after, .tc-hj.is-on::after {
            content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
            background: conic-gradient(from var(--recruitAng),
                        rgba(232,196,94,0) 0deg, rgba(232,196,94,0) 190deg,
                        rgba(232,196,94,.35) 250deg, #f2d894 298deg,
                        #ffffff 318deg, #e8c45e 334deg, rgba(232,196,94,0) 360deg);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
                    mask-composite: exclude;
            filter: drop-shadow(0 0 1.5px rgba(240,214,142,.8));
            animation: recruitSweep 1.9s linear infinite;
        }
        @keyframes recruitSweep { to { --recruitAng: 360deg; } }
        .squad-idle-note { font-size: 8px; color: #5f5f5f; text-align: center; padding: 5px 0 2px; letter-spacing: .5px; }
        .squad-idle-note b { color: #9a8f78; font-weight: normal; }

        /* ===== 战报中心：评级说明 ===== */
        .bc-legend {
            display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; flex: 0 0 auto;
            font-size: 8px; color: #6f6f6f; padding: 4px 2px 0;
        }
        .bc-lg-h { color: #8f8f8f; letter-spacing: .5px; }
        .bc-lg { white-space: nowrap; }
        /* 战报分享 */
        .bc-share {
            margin-left: 6px; padding: 1px 8px; font-size: 8px; font-family: inherit; letter-spacing: 1px;
            color: #c8b078; background: rgba(200,176,120,.10); border: 1px solid var(--gold-deep);
            border-radius: 2px; cursor: pointer; transition: background .15s, color .15s;
        }
        .bc-share:hover { background: rgba(200,176,120,.2); color: #f2e2b4; }
        /* v4.47 需求4：「定位」移到战报标题右上角、分享左侧，尺寸与分享完全一致，仅换冷色区分 */
        .bc-share.locate {
            color: #b9c9da; background: rgba(143,182,216,.10); border-color: #3f4c5a;
        }
        .bc-share.locate:hover { background: rgba(143,182,216,.2); color: #d8e6f2; border-color: #6b8299; }
        .share-preview {
            margin: 8px 0 4px; padding: 8px 10px; font-size: 10px; line-height: 1.7; color: #dedacf;
            background: #171717; border: 1px solid #2c2c2c; border-radius: 3px; word-break: break-all;
        }
        .share-ch { display: flex; gap: 7px; margin-top: 8px; }
        .share-btn {
            flex: 1 1 0; padding: 7px 4px; font-size: 10px; font-family: inherit; letter-spacing: 1px;
            color: #cfcabd; background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 3px; cursor: pointer;
            transition: background .15s, border-color .15s, color .15s;
        }
        .share-btn:hover:not(:disabled) { background: #262626; border-color: #6a6046; color: var(--gold-bright); }
        .share-btn:disabled { opacity: .4; cursor: not-allowed; }

        /* ===== 世界公告横幅（战役 / 合纵）===== */
        .world-banner {
            position: fixed; left: 50%; top: 76px; transform: translate(-50%, -14px);
            max-width: min(720px, 92vw); padding: 9px 18px 9px 14px;
            display: flex; align-items: flex-start; gap: 8px;
            background: linear-gradient(180deg, rgba(30,26,20,0.97), rgba(18,16,13,0.97));
            border: 1px solid #6a5a3a; border-radius: 3px;
            box-shadow: 0 6px 22px rgba(0,0,0,0.55);
            font-size: 12px; line-height: 1.55; letter-spacing: 0.3px;
            opacity: 0; pointer-events: none; transition: opacity .28s ease, transform .28s ease;
            z-index: 9000;
        }
        .world-banner.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
        .world-banner .wb-icon { flex: 0 0 auto; font-size: 14px; line-height: 1.4; color: #d8b060; }
        .world-banner .wb-text { color: #d6c9a8; }
        .world-banner.wb-campaign { border-color: #a3442e; background: linear-gradient(180deg, rgba(46,24,18,0.97), rgba(26,14,11,0.97)); }
        .world-banner.wb-campaign .wb-icon { color: #f08a5c; }
        .world-banner.wb-campaign .wb-text { color: #f0bc96; }
        .world-banner.wb-coalition { border-color: #46598c; background: linear-gradient(180deg, rgba(22,26,44,0.97), rgba(14,16,26,0.97)); }
        .world-banner.wb-coalition .wb-icon { color: #8fa8e0; }
        .world-banner.wb-coalition .wb-text { color: #b8c6e4; }
        .world-banner .chat-city-link { pointer-events: auto; }

        /* ===== 战役标识详情 ===== */
        .tier-badge.cam-small { background: rgba(180,130,50,.25); border: 1px solid rgba(220,170,70,.6); color: #e8c070; }
        .tier-badge.cam-mid   { background: rgba(190,100,50,.25); border: 1px solid rgba(230,140,80,.6); color: #f0a070; }
        .tier-badge.cam-big   { background: rgba(200,70,45,.28); border: 1px solid rgba(255,110,80,.7); color: #ff9870; }
        .cam-row { display: flex; align-items: center; gap: 5px; padding: 1px 0; }
        .cam-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
        .cam-fac { flex: 1 1 auto; }
        .cam-kill { color: #c8a878; font-variant-numeric: tabular-nums; }

        /* ===== v4.9 新手教程（舆图-8）：气泡 / 地图金圈 / DOM 脉冲高亮 ===== */
        /* ===== v4.10 新手教程（舆图-8）：台词气泡 + 目标栏 + 地图金圈 + DOM 脉冲 ===== */
        .tut-npc {
            --tut-speaker: #9ab;
            position: absolute; left: 50%; bottom: 40px; z-index: 60;
            width: 400px; max-width: 62%;
            padding: 10px 14px 9px 17px; border-radius: 8px;
            background: linear-gradient(180deg, rgba(17, 16, 14, 0.95), rgba(9, 9, 8, 0.97));
            border: 1px solid rgba(200, 176, 120, 0.30);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
            cursor: pointer; user-select: none; -webkit-user-select: none;
            transform: translateX(-50%);
            animation: tutIn 0.22s ease-out;
        }
        @keyframes tutIn {
            from { opacity: 0; transform: translateX(-50%) translateY(7px); }
            to   { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        .tut-npc.is-modal { left: 12px; transform: none; bottom: 12px; width: 276px; max-width: 34%; }
        .tut-bar {
            position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px;
            border-radius: 0 2px 2px 0; background: var(--tut-speaker);
            box-shadow: 0 0 9px var(--tut-speaker);
        }
        .tut-head { display: flex; align-items: baseline; gap: 9px; padding-right: 58px; margin-bottom: 5px; }
        .tut-name { font-size: 11px; font-weight: bold; letter-spacing: 3px; color: #9ab; }
        .tut-step { font-size: 9px; color: #6b6659; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
        .tut-step b { color: #c8b078; font-weight: normal; }
        .tut-text {
            font-size: 12.5px; line-height: 1.85; color: #e9e5d9;
            min-height: 46px; letter-spacing: 0.3px; word-break: break-word;
        }
        .tut-goal {
            display: flex; align-items: flex-start; gap: 6px; margin-top: 8px;
            padding: 5px 8px; border-radius: 4px;
            background: rgba(200, 176, 120, 0.09);
            border-left: 2px solid rgba(200, 176, 120, 0.62);
            font-size: 10px; line-height: 1.65; color: #d6c8a4;
        }
        .tut-goal i { font-style: normal; color: #c8b078; line-height: 1.6; }
        .tut-foot { display: flex; justify-content: flex-end; align-items: center; height: 13px; margin-top: 3px; }
        .tut-hint { font-size: 9px; color: #7a7464; letter-spacing: 1px; }
        .tut-hint.is-ready { color: #e0cd96; font-size: 10px; letter-spacing: 1.5px; cursor: pointer; animation: tutBlink 1.3s ease-in-out infinite; }
        @keyframes tutBlink { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
        .tut-skip {
            position: absolute; right: 11px; top: 9px; padding: 0;
            background: none; border: 0; cursor: pointer;
            font-size: 8.5px; color: #7a7464; letter-spacing: 0.5px;
        }
        .tut-skip:hover { color: #c8b078; }
        /* 收起态：只留名字 + 目标，把地图让出来 */
        .tut-npc[data-mode="compact"] { width: 306px; padding-bottom: 7px; }
        .tut-npc[data-mode="compact"] .tut-text,
        .tut-npc[data-mode="compact"] .tut-skip { display: none; }
        .tut-npc[data-mode="compact"] .tut-head { margin-bottom: 0; padding-right: 0; }
        .tut-npc[data-mode="compact"] .tut-goal { margin-top: 5px; }
        .tut-ring {
            position: absolute; pointer-events: none; z-index: 12; border-radius: 50%;
            border: 2px solid rgba(212, 175, 55, 0.9);
            animation: tutRing 1.4s ease-in-out infinite;
        }
        @keyframes tutRing {
            0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45); }
            50%      { box-shadow: 0 0 0 9px rgba(212, 175, 55, 0); }
        }
        .tut-pulse {
            animation: tutPulse 1.5s ease-in-out infinite;
            outline: 2px solid rgba(212, 175, 55, 0.85); outline-offset: 2px; border-radius: 3px;
        }
        @keyframes tutPulse {
            0%, 100% { outline-color: rgba(212, 175, 55, 0.85); }
            50%      { outline-color: rgba(212, 175, 55, 0.16); }
        }

        /* ===== v4.15 部队页：武将上阵下拉 / 部队卡上的武将标签 ===== */
        .ru-hero-sel {
            flex: 0 0 auto; max-width: 128px; height: 20px; margin: 0 2px;
            background: rgba(14, 14, 14, 0.92); color: #d8cfae;
            border: 1px solid rgba(200, 176, 120, 0.34); border-radius: 3px;
            font-size: 10.5px; padding: 0 2px; cursor: pointer;
            font-family: inherit;
        }
        .ru-hero-sel:hover { border-color: rgba(212, 175, 55, 0.72); }
        .ru-unit.has-hero .ru-unit-name { color: #e8d8a8; }
        .tc-hero {
            display: inline-block; margin: 0 3px; padding: 0 4px;
            font-size: 9.5px; line-height: 14px; border-radius: 3px;
            color: #e8d49a; border: 1px solid rgba(212, 175, 55, 0.45);
            background: rgba(212, 175, 55, 0.10); white-space: nowrap;
        }
        .ru-body.is-single { grid-template-columns: 1fr; }

        /* ===== v4.16 部队页武将槽（卡牌式上阵，替代下拉框） ===== */
        .ru-hero-chip {
            display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
            height: 21px; padding: 0 5px 0 7px; margin: 0 2px;
            border-radius: 3px; cursor: pointer; white-space: nowrap;
            font-size: 10.5px; line-height: 19px;
            color: #e8d49a; border: 1px solid rgba(200, 176, 120, 0.42);
            background: linear-gradient(180deg, rgba(200,176,120,0.16), rgba(200,176,120,0.06));
        }
        .ru-hero-chip b { font-weight: normal; letter-spacing: 0.5px; }
        .ru-hero-chip .hc-ex { font-style: normal; font-size: 8px; color: #93a08a; }
        .ru-hero-chip i {
            font-style: normal; font-size: 11px; line-height: 1;
            color: #8a8474; margin-left: 1px;
        }
        .ru-hero-chip:hover { border-color: rgba(212, 175, 55, 0.8); background: linear-gradient(180deg, rgba(212,175,55,0.24), rgba(212,175,55,0.08)); }
        .ru-hero-chip:hover i { color: #e07a5f; }
        .ru-hero-add {
            flex: 0 0 auto; height: 21px; padding: 0 8px; margin: 0 2px;
            border-radius: 3px; cursor: pointer; white-space: nowrap;
            font-size: 10px; color: #7f8a94; background: transparent;
            border: 1px dashed rgba(140, 150, 160, 0.45);
            font-family: inherit;
        }
        .ru-hero-add:hover { color: #e8d49a; border-color: rgba(212, 175, 55, 0.75); background: rgba(212,175,55,0.06); }

        /* ===== v4.17 部队卡：上阵武将后的样式（名字改成武将名 + 金色左标） ===== */
        .troop-card.is-hero { border-left: 2px solid rgba(212, 175, 55, 0.55); }
        .tc-name.is-hero { color: #e8d49a; letter-spacing: 0.5px; }
        .tc-sqn { font-size: 8.5px; color: #6f6a5c; margin: 0 3px; letter-spacing: 0; }

/* ===== v4.52 失城汇总弹窗（合并展示，逐条定位） ===== */
.lost-list { max-height: 46vh; overflow-y: auto; margin: 8px 0 4px; border-top: 1px solid #2e2e2e; }
.lost-row {
    display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto 46px;
    align-items: center; gap: 8px; padding: 6px 4px; font-size: 10px;
    border-bottom: 1px solid #242424;
}
.lost-row:hover { background: rgba(200, 176, 120, .05); }
.lost-idx { color: #6a6458; font-size: 9px; text-align: right; }
.lost-name { color: #d8cfb8; letter-spacing: .5px; }
.lost-name em { font-style: normal; font-size: 8.5px; color: #7d7768; margin-left: 5px; }
.lost-by { color: #9a9a94; font-size: 9.5px; }
.lost-by b { color: #c08a72; font-weight: 400; }
.lost-time { color: #6f695c; font-size: 9px; min-width: 54px; text-align: right; }
.lost-locate {
    height: 20px; padding: 0 6px; font-size: 9px; font-family: inherit; cursor: pointer;
    color: #d8c590; background: rgba(200, 176, 120, .10);
    border: 1px solid #5c5340; border-radius: 2px;
}
.lost-locate:hover { color: #1a1710; background: linear-gradient(180deg, #dcc794, #bfa870); border-color: #a8925e; }

/* ============================================================
   v4.55 登录战报面板（进游戏先看战况 → 开始征战）
   ============================================================ */
.welcome-mask {
    position: fixed; inset: 0; z-index: 9800; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: radial-gradient(120% 100% at 50% 0%, #171716 0%, #0d0d0e 55%, #08080a 100%);
}
/* 进出场只动面板本身（整层不做透明度动画，避免低性能环境里停在半透明帧） */
.welcome-mask .wl-shell { animation: wlPop .26s cubic-bezier(.2,.8,.3,1) both; }
.welcome-mask.out { pointer-events: none; }
.welcome-mask.out .wl-shell { animation: wlOut .28s ease-in both; }
@keyframes wlPop { from { transform: translateY(10px) scale(.985); } to { transform: none; } }
@keyframes wlOut { from { transform: none; } to { transform: translateY(6px); } }
.wl-shell {
    width: 100%; max-width: 880px; max-height: calc(100vh - 48px); overflow-y: auto;
    padding: 24px 30px 20px; position: relative;
    background: linear-gradient(180deg, rgba(26,26,27,.98), rgba(20,20,21,.98));
    border: 1px solid var(--gold-deep); border-radius: 3px;
    box-shadow: 0 26px 70px rgba(0,0,0,.75), inset 0 0 60px rgba(200,176,120,.04);
}
.wl-shell::-webkit-scrollbar { width: 6px; }
.wl-shell::-webkit-scrollbar-thumb { background: #34322b; border-radius: 3px; }
.wl-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wl-brand b {
    display: block; font-family: "STZhongsong", "Songti SC", "SimSun", serif;
    font-size: 15px; letter-spacing: 7px; color: var(--gold-bright); font-weight: 400;
}
.wl-brand em {
    display: block; margin-top: 3px; font-style: normal;
    font-size: 7px; letter-spacing: 2.4px; color: #6a6458;
}
.wl-start {
    flex: 0 0 auto; height: 30px; padding: 0 16px; cursor: pointer; font-family: inherit;
    font-size: 11px; letter-spacing: 3px; color: #1b1710;
    background: linear-gradient(180deg, #e0cd96, #bfa870);
    border: 1px solid #a8925e; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 4px 14px rgba(200,176,120,.16);
    transition: filter .15s, transform .15s;
}
.wl-start i { font-style: normal; margin-left: 4px; letter-spacing: 0; }
.wl-start:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wl-hello { margin: 16px 0 4px; padding-bottom: 14px; border-bottom: 1px solid #2a2823; }
.wl-hello-t {
    font-family: "STZhongsong", "Songti SC", "SimSun", serif;
    font-size: 20px; letter-spacing: 3px; color: #ece2c8;
}
.wl-hello-s { margin-top: 7px; font-size: 10.5px; letter-spacing: 1px; color: #8d8776; }
.wl-hello-s b { color: var(--gold-bright); font-weight: 400; }
.wl-tags { margin-top: 10px; display: flex; gap: 7px; flex-wrap: wrap; }
.wl-tag {
    font-size: 9px; letter-spacing: 1px; padding: 2px 8px; border-radius: 2px;
    color: #b8a878; background: rgba(200,176,120,.08); border: 1px solid #403a2c;
}
.wl-sec-t {
    margin: 16px 0 8px; font-size: 10px; letter-spacing: 2.5px; color: #c8b98e;
    display: flex; align-items: baseline; gap: 8px;
}
.wl-sec-t .wl-tip { font-size: 8.5px; letter-spacing: .5px; color: #6a6458; }

/* —— 热力图 —— */
.wl-heat-grid { display: flex; gap: 3px; max-width: 100%; }
.wc-week { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; }
.wc-cell {
    display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; max-height: 24px; border-radius: 2px;
    background: #1e1e20; border: 1px solid #262626;
}
/* v4.59：未入局的天保留淡格线，让新玩家也能看到完整热力图 */
.wc-cell.pre { background: #171719; border-color: #1f1f22; box-shadow: none; }
.wc-cell.on { background: rgba(200,176,120,.42); border-color: rgba(200,176,120,.55); }
.wc-cell.on.hot { background: #d8c08a; border-color: #e6d3a4; }
.wc-cell.today { box-shadow: 0 0 0 1px #e6d3a4; }
.wl-heat-foot {
    margin-top: 7px; display: flex; align-items: center; gap: 4px; justify-content: flex-end;
    font-size: 8.5px; color: #6a6458;
}
.wl-heat-foot .wc-cell { width: 9px; height: 9px; }
/* —— 昨日战报卡 —— */
.wl-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wl-card {
    padding: 9px 10px 8px; background: rgba(255,255,255,.015);
    border: 1px solid #2a2a28; border-left: 2px solid #4a4335; border-radius: 2px;
}
.wl-card .wl-k { display: block; font-size: 9px; letter-spacing: 1.2px; color: #7d7768; }
.wl-card .wl-v {
    display: inline-block; margin-top: 6px; font-size: 22px; line-height: 1;
    color: #e6d9b4; font-weight: 400; font-variant-numeric: tabular-nums;
}
.wl-card .wl-u { font-size: 8.5px; color: #6a6458; margin-left: 3px; }

/* —— 生涯累计 —— */
.wl-total {
    display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 9px 11px;
    border: 1px solid #26262a; border-radius: 2px; background: rgba(255,255,255,.012);
}
.wl-total span { font-size: 9.5px; color: #7d7768; letter-spacing: .5px; }
.wl-total i { font-style: normal; margin-right: 5px; color: #6a6458; }
.wl-total b { color: #d3c6a4; font-weight: 400; font-variant-numeric: tabular-nums; }
.wl-foot {
    margin-top: 16px; padding-top: 12px; border-top: 1px solid #26241f;
    font-size: 9.5px; letter-spacing: 1px; color: #78716a; text-align: center;
}
@media (max-width: 620px) {
    .wl-shell { padding: 16px 14px 14px; }
    .wl-hello-t { font-size: 16px; letter-spacing: 2px; }
    .wl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wc-cell { width: 8px; height: 8px; }
}

/* v4.55 面板：热力图与「当前势力」并排 */
.wl-heat-row { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 16px; align-items: start; }
.wl-heat-row .wl-sec-t { margin-top: 0; }
.wl-side {
    padding: 2px 10px 8px; border-left: 1px solid #26241f;
}
.wl-mini { display: flex; align-items: baseline; gap: 5px; padding: 3px 0; font-size: 9.5px; }
.wl-mini i { font-style: normal; color: #6f695c; letter-spacing: .8px; min-width: 30px; }
.wl-mini b { color: #e0d2ac; font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; }
.wl-mini em { font-style: normal; font-size: 8.5px; color: #5f5a50; }
@media (max-width: 620px) {
    .wl-heat-row { grid-template-columns: 1fr; }
    .wl-side { border-left: 0; border-top: 1px solid #26241f; padding-left: 0; display: flex; gap: 14px; flex-wrap: wrap; }
    .wl-side .wl-sec-t { display: none; }
}

.wl-quiet {
    margin-top: 8px; padding: 7px 10px; font-size: 9.5px; letter-spacing: 1px; color: #7d7466;
    border: 1px dashed #33302a; border-radius: 2px; background: rgba(255,255,255,.012);
}

/* ============================================================
   v4.57 登录面板改版：整体质感 + 离线报告卡
   ============================================================ */
.wl-shell { position: relative; }
/* 顶部一道金线（面板"盖章"感），内侧一圈极淡描边避免大块黑面 */
.wl-shell::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(224,205,150,.8) 22%, rgba(224,205,150,.8) 78%, transparent);
}
.wl-shell::after {
    content: ''; position: absolute; inset: 5px; pointer-events: none; border-radius: 2px;
    border: 1px solid rgba(200,176,120,.055);
}

/* 问候区左侧金色竖条 */
.wl-hello { position: relative; padding-left: 13px; }
.wl-hello::before {
    content: ''; position: absolute; left: 0; top: 3px; bottom: 15px; width: 2px;
    background: linear-gradient(180deg, rgba(224,205,150,.95), rgba(224,205,150,.04));
}

/* 分区标题：小菱形 */
.wl-sec-t::before {
    content: ''; width: 5px; height: 5px; flex: 0 0 auto; transform: rotate(45deg);
    background: rgba(200,176,120,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    position: relative; top: -1px;
}

/* —— 离线报告卡 —— */
.wl-away {
    margin: 14px 0 6px; border: 1px solid #3b3427; border-radius: 3px; overflow: hidden;
    background: linear-gradient(180deg, rgba(58,48,30,.36), rgba(28,25,19,.55));
    box-shadow: inset 0 1px 0 rgba(224,205,150,.07), 0 6px 18px rgba(0,0,0,.28);
}
.wl-away.has-loss {
    border-color: #5b3a30;
    background: linear-gradient(180deg, rgba(78,45,34,.38), rgba(32,23,19,.58));
    box-shadow: inset 0 1px 0 rgba(224,150,120,.10), 0 6px 18px rgba(0,0,0,.32);
}
.wl-away-h {
    display: flex; align-items: baseline; gap: 10px; padding: 8px 12px;
    border-bottom: 1px solid rgba(200,176,120,.10);
}
.wl-away.has-loss .wl-away-h { border-bottom-color: rgba(200,120,90,.14); }
.wl-away-t {
    font-family: "STZhongsong", "Songti SC", "SimSun", serif;
    font-size: 11px; letter-spacing: 4px; color: #e0cd96; padding-right: 2px;
}
.wl-away.has-loss .wl-away-t { color: #e5a88c; }
.wl-away-s { font-size: 10px; letter-spacing: .5px; color: #8d8776; }
.wl-away-s b { color: #e6d9b4; font-weight: 400; }
.wl-away-body { padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 9px; }
.wl-away-res { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.wl-away-cap { font-size: 9px; letter-spacing: .5px; color: #8a8068; text-align: right; }
.wl-ar {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 6px 9px 7px; border: 1px solid rgba(255,255,255,.055); border-radius: 2px;
    background: rgba(0,0,0,.24);
}
.wl-ar i { font-style: normal; font-size: 9px; letter-spacing: 1.5px; color: #8d8776; }
.wl-ar b { font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wl-lost-h {
    font-size: 9.5px; letter-spacing: 1px; color: #a07c66; margin-bottom: 6px;
    display: flex; align-items: baseline; gap: 8px;
}
.wl-lost-h b { font-size: 13px; font-weight: 400; color: #e0937a; font-variant-numeric: tabular-nums; }
.wl-lost-h span { font-size: 8.5px; color: #6a6458; letter-spacing: 0; }
.wl-lost-h span::before { content: '·'; margin-right: 5px; color: #4e4a42; }
.wl-lost-ok { font-size: 10px; letter-spacing: .5px; color: #7f8d72; }
.wl-lost-ok b { color: #9fc08a; font-weight: 400; }
.wl-lost-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wl-lost-chip {
    cursor: pointer; padding: 3px 8px; border-radius: 2px; font-size: 10px; color: #d6a892;
    background: rgba(160,80,60,.12); border: 1px solid rgba(180,100,80,.32);
    transition: background .15s, border-color .15s, color .15s;
}
.wl-lost-chip em { font-style: normal; font-size: 8px; color: #8a6a5e; margin-left: 5px; }
.wl-lost-chip:hover { background: rgba(200,110,80,.24); border-color: rgba(220,140,110,.62); color: #ffd9c8; }

/* 战报卡 / 势力栏：轻微交互反馈，避免"一坨静态框" */
.wl-card { transition: background .15s, border-left-color .15s; }
.wl-card:hover { background: rgba(224,205,150,.05); border-left-color: #8a7a52; }
.wl-mini { border-bottom: 1px dashed rgba(255,255,255,.045); }
.wl-mini:last-child { border-bottom: 0; }
.wl-start { box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 4px 14px rgba(200,176,120,.16); }
.wl-start:active { transform: translateY(0); filter: brightness(.96); }

@media (max-width: 620px) {
    .wl-away-res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wl-away-h { flex-wrap: wrap; gap: 2px 10px; }
}