/* ============================================================
   红警社区 · 公共样式（作战控制台设计系统）
   ============================================================ */
:root{
  --bg:#14170F;
  --bg-2:#1B1F14;
  --panel:#202516;
  --line:#3A4128;
  --line-soft:#2B311D;
  --red:#D5382C;
  --red-deep:#A3241B;
  --green:#A6C94A;
  --ink:#E9E2CC;
  --muted:#9AA085;
  --gold:#D9A441;
  --hazard:#E0B93B;
  --blue:#5B9BD5;
  --purple:#9B6FD8;
  --disp:'ZCOOL QingKe HuangYou','PingFang SC','Microsoft YaHei','SimHei',sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:'IBM Plex Mono',Consolas,Monaco,'Sarasa Mono SC',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  overflow-x:hidden;
  background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:15px;line-height:1.7;
  background-image:
    linear-gradient(rgba(214,56,44,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(214,56,44,.03) 1px,transparent 1px);
  background-size:48px 48px;
}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold)!important;outline-offset:3px!important}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* ---------- 系统状态条 ---------- */
.sysbar{background:#0E100A;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.sysbar .wrap{display:flex;justify-content:space-between;align-items:center;height:32px;gap:12px}
.sysbar .l{display:flex;gap:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sysbar .r{display:flex;gap:18px;white-space:nowrap}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:1px;box-shadow:0 0 6px rgba(166,201,74,.7)}
.sysbar b{color:var(--ink);font-weight:600}

/* ---------- 导航 ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(20,23,15,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;height:64px;gap:32px}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.star{width:34px;height:34px;display:grid;place-items:center;background:var(--red);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.logo-name{font-family:var(--disp);font-size:22px;letter-spacing:.12em;color:var(--ink)}
.logo-name em{font-style:normal;color:var(--red)}
.nav-links{display:flex;gap:4px;flex:1}
.nav-links a{padding:8px 14px;font-size:14px;color:var(--muted);border:1px solid transparent;letter-spacing:.06em}
.nav-links a:hover{color:var(--ink);background:var(--bg-2);border-color:var(--line-soft)}
.nav-links a.on{color:var(--ink);background:var(--bg-2);border-color:var(--red)}
.nav-cta{flex-shrink:0;background:var(--red);color:#fff;font-weight:700;font-size:13px;padding:9px 18px;letter-spacing:.08em;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:.1em;padding:12px 24px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);cursor:pointer}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-deep)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--muted);background:var(--bg-2)}

/* ---------- 页头与布局 ---------- */
.page-head{border-bottom:1px solid var(--line);position:relative;padding:32px 0 60px}
.crumb{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.12em;margin-bottom:24px}
.crumb a:hover{color:var(--green)}
.crumb i{font-style:normal;color:var(--red);margin:0 8px}

/* 单位详情两列面板 */
.unit-grid{display:grid;grid-template-columns:360px 1fr;gap:36px;align-items:start}

/* 左侧：游戏展示视窗与图标 */
.u-preview-card{border:1px solid var(--line);background:var(--panel);position:relative;padding:16px;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.u-img-frame{position:relative;width:100%;aspect-ratio:4/3;background:#080A06;border:1px solid var(--line-soft);overflow:hidden;display:flex;align-items:center;justify-content:center}
.u-img-frame img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) brightness(.95)}
.u-img-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(20,23,15,.85));pointer-events:none}
.u-hud-tag{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:10px;color:var(--green);background:rgba(14,16,10,.85);border:1px solid rgba(166,201,74,.4);padding:2px 8px;z-index:2;letter-spacing:.1em}
.u-hud-cost{position:absolute;bottom:10px;right:10px;font-family:var(--mono);font-size:18px;font-weight:700;color:var(--gold);background:rgba(14,16,10,.85);border:1px solid rgba(217,164,65,.4);padding:2px 10px;z-index:2}

/* 侧栏图标列表 */
.u-icon-row{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.u-game-icon{width:60px;height:48px;background:var(--bg-2);border:2px solid var(--gold);display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--gold);font-weight:700;position:relative;flex-shrink:0}
.u-game-icon::before{content:"ICON";position:absolute;top:2px;left:2px;font-size:8px;opacity:.6}
.u-icon-meta{font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.5}
.u-icon-meta b{color:var(--ink);font-weight:600}

/* 右侧：主体数据与描述 */
.detail-wrap{position:relative}
.detail-wrap .u-tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:4px 10px;margin-bottom:14px}
.detail-wrap .u-tag i{font-style:normal;width:8px;height:8px;background:var(--muted)}
.u-tag.f-sov{color:var(--red);border-color:rgba(213,56,44,.45)}
.u-tag.f-sov i{background:var(--red)}
.u-tag.f-ali{color:#5B9BD5;border-color:rgba(91,155,213,.45)}
.u-tag.f-ali i{background:#5B9BD5}
.u-tag.f-yur{color:#9B6FD8;border-color:rgba(155,111,216,.45)}
.u-tag.f-yur i{background:#9B6FD8}

.detail-wrap h1{font-family:var(--disp);font-weight:400;font-size:clamp(36px,4vw,48px);line-height:1.1;letter-spacing:.06em}
.detail-wrap .u-en{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.18em;margin-top:6px}
.detail-wrap .u-quote{font-size:13.5px;color:var(--muted);font-style:italic;margin-top:14px;padding-left:14px;border-left:2px solid var(--red)}
.detail-wrap .u-quote b{color:var(--green);font-style:normal;font-weight:600}

/* 属性仪表网格 */
.u-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.u-stat-box{background:var(--panel);border:1px solid var(--line);padding:12px 14px}
.u-stat-box .k{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.14em}
.u-stat-box .v{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--ink);margin-top:2px}
.u-stat-box .v.wide{font-size:13px;font-family:var(--body);margin-top:4px;color:var(--muted)}

.u-desc{font-size:14.5px;color:var(--ink);line-height:1.8;margin-top:24px;background:var(--panel);border:1px solid var(--line);padding:18px 20px}
.u-desc b{color:var(--gold);font-weight:600}

/* 克制列表 */
.u-rel{margin-top:28px}
.u-rel h3{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--green);margin-bottom:12px}
.rel{display:flex;align-items:center;gap:14px;padding:10px 14px;border:1px solid var(--line);background:var(--panel);margin-bottom:8px;font-size:13px}
.rel .rw{font-weight:700;color:var(--ink);min-width:130px}
.rel .ry{color:var(--muted);flex:1}
.rel.up{border-left:3px solid var(--green)}
.rel.up .rw{color:var(--green)}
.rel.down{border-left:3px solid var(--red)}
.rel.down .rw{color:var(--red)}
.rel .rd{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted)}

.u-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

@media(max-width:960px){
  .unit-grid{grid-template-columns:1fr}
  .u-preview-card{max-width:480px;margin:0 auto}
}
@media(max-width:640px){
  .u-stats{grid-template-columns:1fr 1fr}
  .rel{flex-direction:column;align-items:flex-start;gap:4px}
  .rel .rw{min-width:0}
}
@media(max-width:640px){
  .nav .wrap{gap:8px}
  .star{width:26px;height:26px}
  .logo{gap:8px}
  .logo-name{font-size:16px;letter-spacing:.08em}
  .nav-links{min-width:0;gap:2px}
  .nav-links a{padding:7px 7px;font-size:13px;white-space:nowrap}
  .nav-cta{padding:8px 12px;font-size:12px}
  .nav-user{gap:6px}
  .nav-user b{max-width:56px}
  .nav-user a{padding:5px 8px;font-size:11px}
}

/* 未找到状态 */
.empty-u{padding:60px 0;text-align:center;color:var(--muted)}
.empty-u h2{font-family:var(--disp);font-weight:400;font-size:26px;color:var(--ink);margin-bottom:10px}