/* ============================================================
   落星 Starfall · 共享样式（index / combat / shop 三页统一）
   深蓝星空渐变 + 玻璃卡片风格。纯原生 CSS，零依赖、无构建。
   ============================================================ */
:root {
  --bg1: #0b1026;
  --bg2: #1a2a6c;
  --bg3: #274690;
  --text: #e8ecff;
  --muted: #b6c2e0;
  --dim: #5a6b96;
  --accent: #00b4ff;
  --accent-gold: #ffd966;
  --accent-strong: #6d9bff;
  --gold: #ffd966;
  --green: #7bed9f;
  --red: #ff6b81;
  --orange: #ffb86b;
  --card-bg: rgba(255, 255, 255, 0.07);
  --card-border: rgba(255, 255, 255, 0.15);
  --radius: 18px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }

/* ============================================================
   全局滚动条（2026-08-05 用户实测反馈：左导航/窗口列表滚动条突兀）
   窄条 + 深蓝渐变 + hover 高亮，符合游戏深蓝星空风格。
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(11, 16, 38, 0.4); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3a6df0, #274690); border-radius: 4px; border: 1px solid rgba(138, 180, 255, 0.4); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #4a7df8, #3759a0); }
* { scrollbar-width: thin; scrollbar-color: #274690 rgba(11, 16, 38, 0.4); }

html, body { margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #c9dcff; }

.container { max-width: 1080px; margin: 0 auto; padding: 24px 20px 64px; }

/* ---------- 顶栏 ---------- */
header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
header.top h1 { margin: 0; font-size: 24px; letter-spacing: 1px; }
.tag { color: var(--accent); font-size: 12px; letter-spacing: 4px; margin-top: 2px; }
.back {
  display: inline-block;
  font-size: 13px;
  padding: 7px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--muted);
  transition: background 0.2s;
}
.back:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  backdrop-filter: blur(8px);
}
.card h2 { margin: 0 0 12px; font-size: 17px; letter-spacing: 1px; color: #fff; }
.card h2 small { color: var(--dim); font-weight: normal; letter-spacing: 0; font-size: 12px; margin-left: 8px; }
.card p { color: var(--muted); }

/* 首页入口卡片 */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 20px; }
.link-card {
  display: block;
  padding: 26px 24px;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.link-card:hover { transform: translateY(-3px); border-color: var(--accent); background: rgba(255, 255, 255, 0.11); }
.link-card .icon { font-size: 30px; margin-bottom: 10px; }
.link-card h3 { margin: 0 0 8px; font-size: 18px; color: #fff; letter-spacing: 1px; }
.link-card p { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.link-card .go { font-size: 13px; color: var(--accent); font-weight: 600; }

/* 首页 · 主入口「进入游戏」（GDD-23 C5：登录默认进 game.html 复合体） */
.link-card.hero-game {
  border-color: rgba(138, 180, 255, 0.55);
  background: linear-gradient(150deg, rgba(58, 109, 240, 0.22), rgba(39, 70, 144, 0.18));
  grid-column: 1 / -1;
}
.link-card.hero-game:hover { border-color: var(--accent); background: linear-gradient(150deg, rgba(58, 109, 240, 0.32), rgba(39, 70, 144, 0.26)); }
.link-card.hero-game .go { color: #fff; font-size: 15px; }

.hero { text-align: center; padding: 28px 24px; }
.hero h2 { font-size: 20px; letter-spacing: 3px; }

.status {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(46, 213, 115, 0.12);
  border: 1px solid rgba(46, 213, 115, 0.35);
  border-radius: var(--radius-sm);
  color: var(--green);
  font-size: 13px;
}
.status.warn { background: rgba(255, 184, 107, 0.12); border-color: rgba(255, 184, 107, 0.4); color: var(--orange); }
.status.err { background: rgba(255, 107, 129, 0.12); border-color: rgba(255, 107, 129, 0.4); color: var(--red); }

.footer { margin-top: 36px; color: var(--dim); font-size: 12px; text-align: center; }

/* ---------- 通用小组件 ---------- */
.btn {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.btn:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--accent); }
.btn.primary { background: linear-gradient(135deg, #3a6df0, #274690); border-color: rgba(138, 180, 255, 0.6); color: #fff; }
.btn.primary:hover { filter: brightness(1.12); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.badge.hot { border-color: rgba(255, 209, 102, 0.5); color: var(--gold); background: rgba(255, 209, 102, 0.1); }
.badge.res { border-color: rgba(138, 180, 255, 0.5); color: var(--accent); background: rgba(138, 180, 255, 0.1); }

.err { color: var(--red); font-size: 13px; }
.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }

input[type="text"], input[type="number"], select {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
input:focus, select:focus { border-color: var(--accent); }

/* ============================================================
   combat.html · 战力对比
   ============================================================ */
.power-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.power-card { padding: 18px 20px; }
.power-card .pname { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.power-card .pbig { font-size: 26px; font-weight: 700; letter-spacing: 1px; }
.power-card.att .pbig { color: var(--accent); }
.power-card.def .pbig { color: var(--orange); }
.power-card .pstats { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.power-bar-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); margin-top: 12px; overflow: hidden; }
.power-bar-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease; }
.power-card.att .power-bar-fill { background: linear-gradient(90deg, #4a7dff, #8ab4ff); }
.power-card.def .power-bar-fill { background: linear-gradient(90deg, #ff9f43, #ffb86b); }
.power-vs { display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--dim); }
.prediction {
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(138, 180, 255, 0.4);
  background: rgba(138, 180, 255, 0.1);
  font-size: 14px;
  text-align: center;
}
.prediction b { color: var(--accent); }

/* ============================================================
   combat.html · 战场回放
   ============================================================ */
.arena { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 10px; align-items: stretch; }

/* ---- v1.1 平面自由 2D 战场（gdd/14 §3.1：两张舰队卡的移动轨迹/位置点） ---- */
.battlefield-wrap { position: relative; margin-bottom: 14px; }
.battlefield-wrap canvas {
  display: block; width: 100%; height: auto;
  background:
    radial-gradient(circle at 50% 50%, rgba(60, 90, 160, 0.12), rgba(10, 16, 32, 0.25) 60%, rgba(6, 10, 22, 0.4)),
    repeating-radial-gradient(circle at 50% 50%, rgba(120, 160, 255, 0.05) 0 1px, transparent 1px 10%);
  border: 1px solid rgba(120, 160, 255, 0.22);
  border-radius: 10px;
}
.battlefield-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  margin-top: 8px; font-size: 12px; color: var(--dim, #9aa7c4);
}
.battlefield-legend .lg-att { color: #7bb2ff; }
.battlefield-legend .lg-def { color: #ff9a8a; }
.battlefield-legend .lg-anc { color: #ffd76a; }
.fleet-card { position: relative; padding: 16px 18px; overflow: hidden; }
.fleet-card.attacker { border-color: rgba(138, 180, 255, 0.4); }
.fleet-card.defender { border-color: rgba(255, 184, 107, 0.4); }
.fleet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fleet-name { font-size: 15px; font-weight: 700; color: #fff; }
.fleet-sub { font-size: 11px; color: var(--dim); }
.fleet-count { font-size: 12px; color: var(--muted); }
.ehp-track { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; position: relative; }
.ehp-fill { height: 100%; width: 100%; border-radius: 999px; transition: width 0.25s linear; }
.fleet-card.attacker .ehp-fill { background: linear-gradient(90deg, #3a6df0, #7bb2ff); }
.fleet-card.defender .ehp-fill { background: linear-gradient(90deg, #e07b39, #ffb86b); }
.ehp-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.ship-grid { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 6px; min-height: 26px; }
.ship {
  width: 14px; height: 14px;
  border-radius: 3px;
  transform: rotate(45deg);
  transition: opacity 0.4s, transform 0.4s;
  position: relative;
}
.fleet-card.attacker .ship { background: linear-gradient(135deg, #7bb2ff, #3a6df0); box-shadow: 0 0 6px rgba(74, 125, 255, 0.7); }
.fleet-card.defender .ship { background: linear-gradient(135deg, #ffcf9a, #e07b39); box-shadow: 0 0 6px rgba(255, 155, 67, 0.7); }
.ship.dead { opacity: 0.12; transform: rotate(45deg) scale(0.6); box-shadow: none; filter: grayscale(1); }
.ship.dead::after {
  content: "💥"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg) scale(1.6);
  font-size: 9px; opacity: 0.9;
}
.fleet-stats { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 6px; flex-wrap: wrap; }
.fleet-stats b { color: var(--text); }
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx {
  position: absolute; top: 40%;
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
  animation: fxFloat 0.9s ease-out forwards;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.fx.hit { color: #ffd166; }
.fx.ciws { color: #7bed9f; }
.fx.board { color: #ff6b81; }
.fx.destroy { color: #ff6b81; font-size: 18px; }
@keyframes fxFloat {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-46px); opacity: 0; }
}
.vs-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.vs-badge {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.outcome-banner {
  margin-top: 14px; padding: 14px 18px; text-align: center;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 209, 102, 0.5);
  background: rgba(255, 209, 102, 0.1);
  color: var(--gold);
  font-size: 15px; font-weight: 700; letter-spacing: 1px;
  display: none;
}
.tactical-note { font-size: 12px; color: var(--dim); margin-top: 8px; }

/* 时间线 + 控制 */
.timeline { margin-top: 18px; }
.progress-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #3a6df0, #8ab4ff); transition: width 0.15s linear; }
.tick-label { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); }
.controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.controls .spacer { flex: 1; }
.seed-line { font-size: 13px; color: var(--muted); margin-top: 12px; word-break: break-all; }
.seed-line b { color: var(--accent); }

/* 事件日志 */
.log {
  margin-top: 16px;
  max-height: 260px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--muted);
}
.log div { padding: 1px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.05); }
.log .log-tick { color: var(--accent); }

/* ============================================================
   shop.html
   ============================================================ */
.promo-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 209, 102, 0.5);
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.14), rgba(255, 184, 107, 0.06));
}
.promo-banner .p-icon { font-size: 22px; }
.promo-banner .p-text { flex: 1; min-width: 200px; }
.promo-banner .p-text .p-title { color: var(--gold); font-weight: 700; }
.promo-banner .p-price { font-size: 13px; }
.promo-banner .p-price s { color: var(--dim); margin-right: 8px; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.item-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.item-card .i-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.item-card .i-name { font-size: 15px; font-weight: 700; color: #fff; }
.item-card .i-desc { font-size: 12px; color: var(--muted); flex: 1; min-height: 48px; }
.item-card .i-price { font-size: 16px; font-weight: 700; color: var(--gold); }
.item-card .i-price s { font-size: 12px; color: var(--dim); font-weight: normal; margin-left: 6px; }
.item-card .i-meta { font-size: 12px; color: var(--dim); }
.item-card .buy { margin-top: auto; }

/* 下单面板 */
.order-panel { margin-top: 18px; }
.order-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.order-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.order-field input, .order-field select { min-width: 200px; }
.order-result { margin-top: 12px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; }
.order-result.ok { border: 1px solid rgba(46, 213, 115, 0.4); background: rgba(46, 213, 115, 0.1); color: var(--green); }
.order-result.bad { border: 1px solid rgba(255, 107, 129, 0.4); background: rgba(255, 107, 129, 0.1); color: var(--red); }
.order-result pre { margin: 8px 0 0; font-size: 12px; color: var(--muted); white-space: pre-wrap; word-break: break-all; }
.hint { font-size: 12px; color: var(--dim); margin-top: 8px; }

/* ============================================================
   shop.html v2 · 玩家条 + 陈列架 + 弹层
   ============================================================ */
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#playerBadge { cursor: default; color: var(--text); }
#playerBadge b { color: var(--accent); }

.player-bar { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; margin-bottom: 18px; }
.player-col { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.player-col .p-label { font-size: 12px; color: var(--dim); letter-spacing: 1px; }
.player-col .p-row { display: flex; gap: 8px; align-items: center; }
.player-col .p-row input { flex: 1; min-width: 220px; }
.balance-col { align-items: flex-end; }
.balance { display: flex; gap: 14px; align-items: baseline; font-size: 20px; font-weight: 700; }
.balance .premium { color: var(--gold); }
.balance .credits { color: var(--accent); font-size: 14px; font-weight: normal; }
.recharge { width: 100%; }

.shelf { margin-bottom: 26px; }
.shelf-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}
.shelf-icon { font-size: 22px; }
.shelf-name { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 1px; }
.shelf-desc { font-size: 12px; color: var(--dim); flex: 1; min-width: 160px; }
.shelf-empty { padding: 10px 2px; }

.item-card .i-icon { font-size: 30px; line-height: 1; }
.item-card .i-head { margin-top: 2px; }
.item-card .buy { margin-top: auto; width: 100%; }

.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  padding: 12px 22px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; z-index: 99; max-width: 86vw;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.toast.ok { background: rgba(46, 213, 115, 0.18); border: 1px solid rgba(46, 213, 115, 0.55); color: var(--green); }
.toast.bad { background: rgba(255, 107, 129, 0.18); border: 1px solid rgba(255, 107, 129, 0.55); color: var(--red); }

/* ============================================================
   admin.html v2 · 管理后台
   ============================================================ */
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-title h2 { margin: 0; }
.sub-title { margin: 20px 0 10px; font-size: 15px; letter-spacing: 1px; color: #fff; }

.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); vertical-align: middle; }
.admin-table th { color: var(--dim); font-weight: 600; font-size: 12px; letter-spacing: 1px; }
.admin-table tr:hover td { background: rgba(255, 255, 255, 0.04); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.ops { white-space: nowrap; }
.price-input { width: 84px; padding: 5px 8px; font-size: 13px; }
.btn.mini { padding: 4px 9px; font-size: 12px; margin-right: 6px; }
.btn.mini:disabled { opacity: 0.3; cursor: not-allowed; }

.promo-form { margin-bottom: 6px; }
.promo-row {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  padding: 10px 14px; margin-bottom: 8px;
  border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.04);
}
.promo-row .promo-meta { flex: 1; min-width: 260px; font-size: 13px; }
.promo-row .promo-meta s { color: var(--dim); margin-left: 6px; }

/* ============================================================
   shop.html v3 · 搜索筛选 + 分类收起 + 数量选择框
   ============================================================ */
.search-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.search-input { flex: 1; min-width: 220px; }
.search-select { min-width: 160px; }

/* 分类收起/展开 */
.shelf-toggle { cursor: pointer; user-select: none; border-radius: var(--radius-sm); padding: 4px 6px; margin: -4px -6px; }
.shelf-toggle:hover { background: rgba(255, 255, 255, 0.05); }
.shelf-chevron { display: inline-block; width: 16px; color: var(--accent); transition: transform 0.15s; }
.shelf.collapsed .shop-grid { display: none; }
.shelf.collapsed .shelf-head { border-bottom-color: transparent; margin-bottom: 0; }

/* 商品卡图片（改图后优先展示 imageUrl；无图回退 emoji） */
.item-card .i-img {
  width: 100%; height: 96px; object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.04);
}

/* 数量选择弹层 */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 25, 0.72);
  backdrop-filter: blur(4px);
}
.modal-box {
  width: min(380px, 90vw);
  background: linear-gradient(150deg, #17204a, #0d1433);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
.modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.modal-head h3 { margin: 0; font-size: 17px; color: #fff; letter-spacing: 1px; }
.qty-item-icon { font-size: 26px; }
.qty-info { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.qty-row { display: flex; align-items: center; gap: 10px; justify-content: center; }
.qty-btn { width: 46px; height: 46px; font-size: 22px; line-height: 1; padding: 0; }
#qtyInput {
  width: 92px; height: 46px; text-align: center; font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.qty-price { text-align: center; margin: 14px 0 6px; font-size: 16px; }
.qty-price b { color: var(--gold); font-size: 19px; }
.qty-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.qty-actions .btn { min-width: 92px; }

/* ============================================================
   E2 批 8 · 账号：登录/注册覆盖层（深蓝星空一致 · 手机窄屏适配）
   ============================================================ */
.auth-overlay {
  /* ★ 2026-08-05 登录覆盖层修复：默认隐藏，由 .show 类显示；
     position:fixed; inset:0 保证全屏覆盖居中（深蓝星空渐变） */
  position: fixed; inset: 0; z-index: 9990;
  display: none;
  align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 30% 18%, rgba(58, 109, 240, 0.22), transparent 55%),
    radial-gradient(ellipse at 75% 85%, rgba(39, 70, 144, 0.25), transparent 60%),
    linear-gradient(160deg, #0b1026 0%, #1a2a6c 55%, #274690 100%);
  backdrop-filter: blur(3px);
  padding: 16px;
}
.auth-overlay.show { display: flex; }
.auth-box {
  width: min(400px, 94vw);
  background: linear-gradient(165deg, rgba(39, 70, 144, 0.62), rgba(11, 16, 38, 0.94));
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 26px 26px 20px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
}
.auth-head { text-align: center; margin-bottom: 16px; }
.auth-head h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: 3px; color: #fff; }
.auth-sub { color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-tab {
  flex: 1; padding: 9px 0; text-align: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); color: var(--muted); font-size: 14px; transition: all 0.15s;
}
.auth-tab:hover { color: var(--text); border-color: var(--accent); }
.auth-tab.active {
  background: linear-gradient(135deg, #3a6df0, #274690);
  border-color: rgba(138, 180, 255, 0.6); color: #fff; font-weight: 600;
}
.auth-form { display: flex; flex-direction: column; gap: 11px; }
.auth-row { display: flex; flex-direction: column; gap: 4px; }
.auth-row label { font-size: 12px; color: var(--muted); }
.auth-row input {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--card-border); background: rgba(11, 16, 38, 0.62);
  color: var(--text); font-size: 14px; transition: border-color 0.15s;
}
.auth-row input::placeholder { color: var(--dim); }
.auth-row input:focus { outline: none; border-color: var(--accent); }
.auth-hint { font-size: 12px; color: var(--dim); min-height: 16px; }
.auth-hint.ok { color: var(--green); }
.auth-err { min-height: 18px; font-size: 12px; color: var(--red); }
.auth-submit { width: 100%; padding: 12px 0; font-size: 15px; margin-top: 2px; }
.auth-foot { margin-top: 14px; text-align: center; font-size: 11px; color: var(--dim); }
/* ★ 2026-08-05 注册验证码：邮箱输入 + 「获取验证码」按钮同行（手机窄屏按钮整行触控） */
.auth-code-line { display: flex; gap: 8px; align-items: stretch; }
.auth-code-line input { flex: 1; min-width: 0; }
.auth-code-btn {
  flex: 0 0 auto; white-space: nowrap;
  padding: 0 14px; border-radius: var(--radius-sm);
  background: rgba(58, 109, 240, 0.16); border: 1px solid rgba(138, 180, 255, 0.5);
  color: var(--accent); font-size: 13px; cursor: pointer;
  transition: all 0.15s;
}
.auth-code-btn:hover:not(:disabled) { background: rgba(58, 109, 240, 0.3); color: #fff; }
.auth-code-btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 767px) {
  .auth-box { padding: 20px 16px; }
  .auth-head h1 { font-size: 21px; }
  .auth-code-btn { min-height: 44px; padding: 0 16px; }
}

/* ============================================================
   admin.html v3 · 资产改名改图
   ============================================================ */
.asset-img-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.asset-url { flex: 1; min-width: 180px; }
.asset-preview-wrap { display: inline-flex; align-items: center; }
.asset-preview { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--card-border); }
.asset-noimg { font-size: 12px; color: var(--dim); }
.asset-name { min-width: 140px; }

/* ============================================================
   starmap.html · 星图（太空事件点与星图交互 · GDD-21）
   深蓝星空渐变延续；大按钮、≤2 层交互（操作简化原则）
   ============================================================ */
.starmap-layout { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 16px; margin-top: 16px; align-items: start; }
@media (max-width: 940px) { .starmap-layout { grid-template-columns: 1fr; } }

/* 星图画布 */
.map-panel {
  position: relative;
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(74, 125, 255, 0.10), transparent 60%),
    radial-gradient(900px 420px at 80% 85%, rgba(255, 107, 129, 0.07), transparent 60%),
    rgba(2, 6, 22, 0.62);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 540px;
}
#starSvg { display: block; width: 100%; height: 540px; cursor: grab; touch-action: none; }
#starSvg.dragging { cursor: grabbing; }
/* ★ 航道可见性修复（2026-08-05 星图空白）：non-scaling-stroke 让航道在全图比例下也可见 */
.star-lane { stroke: rgba(138, 180, 255, 0.30); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.star-lane.hover { stroke: rgba(138, 180, 255, 0.65); stroke-width: 2.5px; }
.star-node { cursor: pointer; transition: filter 0.12s; }
.star-node:hover { filter: brightness(1.5); }
.star-node .halo { fill: none; stroke-width: 6; opacity: 0; }
.star-node.selected .halo { opacity: 1; }
.star-node text { fill: #e8ecff; font-size: 1700px; pointer-events: none; paint-order: stroke; stroke: rgba(2, 6, 22, 0.85); stroke-width: 900px; font-weight: 600; }
.star-node.dim { opacity: 0.45; }
.star-node .home-tag { font-size: 1500px; fill: var(--gold); paint-order: stroke; stroke: rgba(2, 6, 22, 0.9); stroke-width: 800px; }
.star-node .ep-dot { pointer-events: none; }
.star-node .ep-dot text { font-size: 1300px; }
.star-marker { pointer-events: none; }

/* ---- 星图舰队标记（2026-08-05 用户实测反馈 #4：可点击变更航向/目的地） ---- */
.fleet-marker { cursor: pointer; }
.fleet-marker .fm-core { transition: filter 0.12s; }
.fleet-marker:hover .fm-core { filter: brightness(1.5); }
.fleet-marker .fm-arrow { stroke: #7bed9f; stroke-width: 700px; vector-effect: non-scaling-stroke; opacity: 0.85; }
.fleet-marker .fm-arrowhead { fill: #7bed9f; }
.fleet-marker .fm-name {
  fill: #d7ffea; font-size: 1900px; font-weight: 700;
  paint-order: stroke; stroke: rgba(2, 6, 22, 0.9); stroke-width: 700px;
}
.fleet-marker .fm-state {
  fill: #b6c2e0; font-size: 1500px;
  paint-order: stroke; stroke: rgba(2, 6, 22, 0.9); stroke-width: 600px;
}
.fleet-marker.fm-highlight .fm-core { animation: fmPulse 1.2s ease-in-out infinite; }
@keyframes fmPulse {
  0%, 100% { filter: drop-shadow(0 0 1200px rgba(123, 237, 159, 0.55)); }
  50% { filter: drop-shadow(0 0 2600px rgba(123, 237, 159, 1)); }
}

.map-tools {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
}
.map-tools .zoom-btn {
  width: 44px; height: 44px; font-size: 20px; line-height: 1; padding: 0;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--card-border);
  color: var(--text); cursor: pointer; user-select: none;
}
.map-tools .zoom-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: var(--accent); }
.map-tools .zoom-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.zoom-level-pill {
  position: absolute; top: 14px; left: 14px; z-index: 5;
  padding: 6px 14px; border-radius: 999px; font-size: 13px; letter-spacing: 1px;
  background: rgba(10, 16, 44, 0.72); border: 1px solid var(--card-border); color: var(--accent);
}
.map-hint {
  position: absolute; left: 14px; bottom: 12px; right: 14px; z-index: 5;
  font-size: 12px; color: var(--dim); pointer-events: none; text-align: center;
}
.map-loading {
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 22, 0.55); color: var(--muted); font-size: 14px; letter-spacing: 2px;
}
/* ★ 2026-08-05 空态/错误提示（星图加载失败显示错误信息而不是白屏） */
.map-error {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(2, 6, 22, 0.82); color: var(--text); text-align: center; padding: 20px;
}
.map-error .me-title { font-size: 16px; color: var(--red); letter-spacing: 1px; }
.map-error .me-msg { font-size: 13px; color: var(--muted); max-width: 70%; word-break: break-all; }
.map-error .btn { min-height: 42px; padding: 0 20px; }

/* 玩家条 */
.player-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 16px; }
.player-col { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); min-width: 240px; }
.player-col input { min-width: 240px; }
.fleet-status { font-size: 12px; color: var(--muted); }
.fleet-status b { color: var(--accent); }
.fleet-status .at { color: var(--gold); }

/* 右侧面板 */
.side-panel { display: flex; flex-direction: column; gap: 14px; }
.side-card { padding: 16px 18px; }
.side-card h3 { margin: 0 0 10px; font-size: 15px; color: #fff; letter-spacing: 1px; }
.side-card h3 small { color: var(--dim); font-weight: normal; font-size: 11px; margin-left: 6px; }
.node-name { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.node-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.node-meta .badge { font-size: 11px; }

/* 朝向选择：8 方位环 + 自动 */
.heading-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.heading-pick .hd-btn { padding: 8px 4px; font-size: 13px; border-radius: var(--radius-sm); }
.heading-pick .hd-btn.active { border-color: var(--accent); background: rgba(138, 180, 255, 0.16); color: #fff; }
.heading-pick .hd-auto { grid-column: span 3; }

/* 飞行方式 */
.flight-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.flight-pick .fl-btn { padding: 9px 4px; font-size: 12px; line-height: 1.35; border-radius: var(--radius-sm); }
.flight-pick .fl-btn.active { border-color: var(--accent); background: rgba(138, 180, 255, 0.16); color: #fff; }
.flight-pick .fl-btn small { display: block; font-size: 10px; color: var(--dim); margin-top: 2px; }
.flight-pick .fl-btn.active small { color: var(--accent); }
.flight-pick .fl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.eta-line { font-size: 12px; color: var(--muted); margin: 6px 0 10px; }
.eta-line b { color: var(--gold); }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; }
.action-row .btn { flex: 1; min-height: 44px; }

/* 事件点列表 */
.event-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.event-item {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04); cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.event-item:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--accent); }
.event-item.selected { border-color: var(--gold); background: rgba(255, 209, 102, 0.08); }
.event-item .e-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.event-item .e-title { font-size: 13px; font-weight: 700; color: #fff; flex: 1; min-width: 120px; }
.event-item .e-summary { font-size: 12px; color: var(--muted); }
.event-item .e-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.event-item .e-goto { font-size: 12px; color: var(--accent); font-weight: 600; margin-left: auto; }
.badge.pri0 { border-color: rgba(138, 180, 255, 0.55); color: var(--accent); background: rgba(138, 180, 255, 0.12); }
.badge.pri1 { border-color: rgba(255, 209, 102, 0.55); color: var(--gold); background: rgba(255, 209, 102, 0.12); }
.badge.pri2 { border-color: rgba(255, 107, 129, 0.55); color: var(--red); background: rgba(255, 107, 129, 0.12); }
.badge.battle { border-color: rgba(255, 107, 129, 0.7); color: #fff; background: rgba(255, 107, 129, 0.28); }
.badge.friendly { border-color: rgba(123, 237, 159, 0.55); color: var(--green); background: rgba(123, 237, 159, 0.1); }
.badge.hostile { border-color: rgba(255, 107, 129, 0.55); color: var(--red); background: rgba(255, 107, 129, 0.1); }
.badge.truce { border-color: rgba(255, 209, 102, 0.55); color: var(--gold); background: rgba(255, 209, 102, 0.1); }

/* 航线规划 */
.waypoint-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; max-height: 200px; overflow-y: auto; }
.waypoint-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--card-border); border-radius: var(--radius-sm); font-size: 13px;
}
.waypoint-row .wp-mode { font-size: 11px; color: var(--dim); }
.waypoint-row .wp-rm { cursor: pointer; color: var(--red); font-size: 12px; padding: 2px 6px; }
.waypoint-row .wp-rm:hover { background: rgba(255, 107, 129, 0.15); border-radius: 6px; }

/* 区域玩家 */
.zone-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.player-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}
.player-row .p-id { flex: 1; min-width: 90px; font-size: 13px; font-weight: 600; color: #fff; word-break: break-all; }
.player-row .p-faction { font-size: 11px; color: var(--dim); }
.player-row .p-ops { display: flex; gap: 6px; }
.player-row .p-ops .btn { min-width: 0; padding: 7px 10px; font-size: 12px; flex: 0 0 auto; }
.player-row.self { border-color: rgba(138, 180, 255, 0.45); }

/* 通知日志 */
.notice-log {
  max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; color: var(--muted);
}
.notice-log .n-line { padding: 3px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.06); }
.notice-log .n-line.ok { color: var(--green); }
.notice-log .n-line.bad { color: var(--red); }
.notice-log .n-line.war { color: var(--orange); font-weight: 700; }

/* 模态（复用 shop modal 变量，微调宽度） */
.modal-box.wide { width: min(460px, 92vw); }
.form-row { display: flex; gap: 8px; align-items: center; margin: 10px 0 6px; flex-wrap: wrap; }
.form-row label { font-size: 12px; color: var(--muted); min-width: 90px; }
.form-row input { flex: 1; min-width: 180px; }
.hint { font-size: 12px; color: var(--dim); margin-top: 6px; }

/* ============================================================
   starmap.html · B-2b 星图交互层（GDD-25 §J · 2026-08-05）
   天体层级 / 图标反缩放 / 路径虚线 / 天体详情条 / 事件搜索 / 操作按钮
   （与 starmap.html 内联样式同源，双写保证任一方加载均生效）
   ============================================================ */
/* ---- 天体层 ---- */
#bodyLayer { pointer-events: none; }
.body-node { cursor: pointer; transition: filter 0.12s; pointer-events: all; }
.body-node:hover { filter: brightness(1.45); }
.body-node .bn-halo { fill: none; stroke-width: 8; opacity: 0; }
.body-node.selected .bn-halo { opacity: 1; }
.body-node text { fill: #e8ecff; font-size: 1500px; pointer-events: none; paint-order: stroke; stroke: rgba(2, 6, 22, 0.85); stroke-width: 800px; font-weight: 700; }
.body-node .safe-badge { font-size: 1500px; pointer-events: none; paint-order: stroke; stroke: rgba(2, 6, 22, 0.9); stroke-width: 700px; }
/* ---- 小行星带高亮 + 碎石 ---- */
.belt-ring { fill: none; stroke: #c39bff; stroke-width: 3; stroke-dasharray: 26 16; vector-effect: non-scaling-stroke; transition: stroke 0.2s, filter 0.2s; }
.belt-ring.highlight { stroke: #e0c9ff; stroke-width: 5; filter: drop-shadow(0 0 1200px rgba(195, 155, 255, 0.85)); }
.belt-rubble { pointer-events: none; }
/* ---- 路径虚线（舰队 MOVING/JUMPING + 惯性偏转弧线）---- */
.fleet-path { fill: none; stroke: rgba(123, 237, 159, 0.55); stroke-width: 3; stroke-dasharray: 18 14; vector-effect: non-scaling-stroke; animation: pathFlow 1.6s linear infinite; }
.fleet-path.deflect { stroke: rgba(255, 209, 102, 0.85); stroke-width: 4; }
@keyframes pathFlow { to { stroke-dashoffset: -64; } }
/* ---- 图标层（不随缩放变化）---- */
#iconLayer { pointer-events: none; }
.fleet-marker { cursor: pointer; pointer-events: all; }
.fleet-marker .fm-ring { fill: rgba(2, 6, 22, 0.55); stroke: #7bed9f; stroke-width: 2; vector-effect: non-scaling-stroke; }
.fleet-marker .fm-img { pointer-events: none; }
.fleet-marker .fm-arrow { stroke: #7bed9f; stroke-width: 3; vector-effect: non-scaling-stroke; opacity: 0.85; }
.fleet-marker .fm-arrowhead { fill: #7bed9f; }
.fleet-marker .fm-name { fill: #d7ffea; font-size: 13px; font-weight: 700; paint-order: stroke; stroke: rgba(2, 6, 22, 0.9); stroke-width: 4px; text-anchor: middle; }
.fleet-marker .fm-state { fill: #b6c2e0; font-size: 11px; text-anchor: middle; paint-order: stroke; stroke: rgba(2, 6, 22, 0.9); stroke-width: 3px; }
.fleet-marker.fm-halting .fm-ring { stroke: #ffd166; }
.fleet-marker.fm-halting .fm-state { fill: #ffd166; }
.fleet-marker.fm-highlight .fm-ring { animation: fmPulse 1.2s ease-in-out infinite; }
.bld-icon { cursor: pointer; pointer-events: all; }
.bld-icon .bi-core { transition: filter 0.12s; }
.bld-icon:hover .bi-core { filter: brightness(1.5); }
.bld-icon .bi-name { fill: #ffe9c2; font-size: 11px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: rgba(2, 6, 22, 0.9); stroke-width: 3px; pointer-events: none; }
/* ---- 天体详情条（月球轨道：PC 左→右 / 手机 上→下）---- */
#bodyDetail { position: absolute; left: 14px; bottom: 14px; z-index: 7; display: none; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(7, 12, 34, 0.88); border: 1px solid rgba(138, 180, 255, 0.35); backdrop-filter: blur(4px); max-width: min(640px, calc(100% - 28px)); }
#bodyDetail.open { display: flex; }
#bodyDetail .bd-head { display: flex; align-items: center; gap: 10px; }
#bodyDetail .bd-title { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 1px; }
#bodyDetail .bd-close { margin-left: auto; cursor: pointer; color: var(--muted); font-size: 14px; padding: 2px 8px; }
#bodyDetail .bd-track { display: flex; flex-direction: row; align-items: center; gap: 12px; overflow-x: auto; padding: 4px 2px; }
.bd-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; min-width: 64px; padding: 6px 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); transition: background 0.12s, border-color 0.12s; }
.bd-chip:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--accent); }
.bd-chip.selected { border-color: var(--gold); background: rgba(255, 209, 102, 0.10); }
.bd-chip .bc-orb { font-size: 9px; color: var(--dim); }
.bd-chip .bc-name { font-size: 11px; color: #fff; font-weight: 600; }
.bd-chip .bc-name .safe { color: #7bed9f; }
/* ---- 事件搜索框 ---- */
.event-search { display: flex; gap: 6px; margin-bottom: 8px; }
.event-search input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 12px; border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.25); color: var(--text); }
.event-search input:focus { border-color: var(--accent); outline: none; }
.event-search .es-clear { flex: 0 0 auto; }
/* ---- 操作按钮 ---- */
.ops-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ops-row .btn { flex: 1 1 auto; min-height: 42px; }
/* ---- 手机：行星放大后卫星向下排列 ---- */
@media (max-width: 767px) {
  #bodyDetail { left: 8px; right: 8px; bottom: 8px; max-width: calc(100% - 16px); }
  #bodyDetail .bd-track { flex-direction: column; align-items: stretch; max-height: 30vh; overflow-y: auto; }
  .bd-chip { flex-direction: row; justify-content: flex-start; gap: 10px; min-width: 0; padding: 10px 12px; }
  .bd-chip .bc-orb { margin-left: auto; }
}


/* ============================================================
   game.html · 游戏复合体壳（GDD-23 §3/§6.2）
   顶栏 + 左按钮栏 + 中央场景 + 右信息栏 + 右下操作面板 + 窗口层
   ============================================================ */
.game-body { overflow: hidden; height: 100vh; }
#shell { display: flex; flex-direction: column; height: 100vh; min-height: 480px; }

/* ---- 顶栏（48px 常驻） ---- */
#topbar {
  height: 48px; flex: 0 0 48px;
  display: flex; align-items: center; gap: 14px;
  /* ★ A-2 2026-08-06：头像贴最左 0px 起点（左侧 padding 置 0，右侧保留） */
  padding: 0 14px 0 0;
  background: rgba(7, 12, 34, 0.82);
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(6px);
  z-index: 20;
}
.tb-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.faction-badge { font-size: 20px; line-height: 1; filter: drop-shadow(0 0 6px rgba(138, 180, 255, 0.6)); }
/* ---- ★ A-2 顶栏头像（最左，替换原用户编号位置）+ 悬停玩家信息弹层 ---- */
.player-avatar {
  /* ★ A-2 2026-08-06：36×36 圆形（批 A-2-1 需求）；PC + 移动端统一 */
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
  border: 1px solid rgba(138, 180, 255, 0.5);
  box-shadow: 0 0 6px rgba(138, 180, 255, 0.4);
  background: rgba(10, 16, 44, 0.6);
  cursor: pointer;
}
.player-avatar:hover { border-color: var(--accent); }
.player-info-tip {
  position: fixed; left: 10px; top: 56px; z-index: 80;
  min-width: 196px; max-width: 300px;
  padding: 10px 12px;
  border: 1px solid rgba(138, 180, 255, 0.38);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(23, 32, 74, 0.98), rgba(13, 20, 51, 0.99));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  font-size: 12px; color: var(--text);
}
.player-info-tip .pit-name { font-weight: 700; color: #fff; letter-spacing: 1px; margin-bottom: 4px; }
.player-info-tip .pit-row { margin-top: 2px; color: var(--muted); }
.player-info-tip .pit-row b { color: #cfe0ff; }
.player-info-tip .pit-row.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.player-name { font-weight: 700; color: #fff; letter-spacing: 1px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-resources { display: flex; align-items: center; gap: 14px; flex: 1; justify-content: center; flex-wrap: wrap; }
.res-item { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.res-item i { font-style: normal; }
.res-item b { color: var(--text); font-weight: 600; }
.tb-right { display: flex; align-items: center; gap: 8px; }
/* ★ 2026-08-06 Starfall管理入口（文字链接，非图标按钮；点击打开 admin.html，其自带 ADMIN_TOKEN 鉴权门） */
.admin-entry {
  display: inline-flex; align-items: center;
  padding: 4px 8px; border-radius: var(--radius-sm);
  border: 1px solid rgba(138, 180, 255, 0.35); background: rgba(13, 18, 34, 0.6);
  color: rgba(184, 194, 224, 0.9); font-size: 12px; text-decoration: none; white-space: nowrap;
}
.admin-entry:hover { color: #fff; border-color: rgba(138, 180, 255, 0.8); }
/* ★ 2026-08-05 用户实测反馈：顶部场景 pill 已移除（场景切换改由 🪐 星球 / 🚀 舰队窗口驱动） */
.sys-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--card-border); background: var(--card-bg);
  color: var(--muted); cursor: pointer; font-size: 14px;
}
.sys-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---- 舞台 ---- */
#stage { flex: 1; display: flex; min-height: 0; }

/* ---- 左按钮栏（56px） ---- */
#leftBar {
  width: 64px; flex: 0 0 64px;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 10px 6px;
  background: rgba(7, 12, 34, 0.6);
  border-right: 1px solid var(--card-border);
  overflow-y: auto;
  z-index: 10;
}
.bar-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 7px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text); cursor: pointer; font-family: inherit; font-size: 11px;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.bar-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--accent); transform: translateY(-1px); }
.bar-btn .bar-icon { font-size: 20px; line-height: 1; }
.bar-btn .bar-label { color: var(--muted); letter-spacing: 0.5px; }
.min-bar { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.12); }
.min-chip {
  height: 30px; border: 1px solid var(--card-border); border-radius: 8px;
  background: rgba(255, 255, 255, 0.08); color: var(--text);
  cursor: pointer; font-size: 14px;
}
.min-chip:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.16); }

/* ---- 中央主场景 ---- */
#sceneHost { flex: 1; position: relative; min-width: 0; overflow: hidden; }
.scene { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; }
.scene.active { display: flex; }
.scene-title { font-size: 22px; font-weight: 700; letter-spacing: 3px; color: rgba(255, 255, 255, 0.9); text-shadow: 0 0 18px rgba(138, 180, 255, 0.35); }
.scene-sub { font-size: 13px; color: var(--dim); letter-spacing: 1px; }
.scene-fleet { font-size: 12px; color: var(--muted); margin-top: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--card-border); background: rgba(7, 12, 34, 0.55); }

/* 太空场景：CSS 星空（确定性生成） */
.scene-space {
  background:
    radial-gradient(1100px 520px at 22% 12%, rgba(74, 125, 255, 0.13), transparent 60%),
    radial-gradient(900px 460px at 82% 88%, rgba(255, 107, 129, 0.08), transparent 60%),
    linear-gradient(160deg, #070c22 0%, #0d1433 55%, #1a2a6c 100%);
}
.scene-space .star {
  position: absolute; border-radius: 50%;
  background: #e8ecff;
  opacity: 0.55;
  box-shadow: 0 0 4px rgba(232, 236, 255, 0.8);
}
.scene-space .star.tw { animation: starTwinkle 3.2s ease-in-out infinite; }
@keyframes starTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.25); }
}
.scene-space .scene-title, .scene-space .scene-sub { position: relative; z-index: 2; }

/* 空间站场景 */
.scene-station {
  background:
    radial-gradient(760px 400px at 50% 30%, rgba(255, 209, 102, 0.10), transparent 62%),
    linear-gradient(160deg, #0d1433 0%, #151e45 60%, #1a2a6c 100%);
}
.scene-station-svg { margin-top: 6px; opacity: 0.95; }

/* ---- 右信息栏 ---- */
#rightPanel {
  width: 210px; flex: 0 0 210px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px;
  background: rgba(7, 12, 34, 0.6);
  border-left: 1px solid var(--card-border);
  overflow-y: auto;
  z-index: 10;
}
@media (max-width: 1279px) { #rightPanel { display: none; } }
.rp-card { padding: 10px 12px; }
.rp-card h4 { margin: 0 0 6px; font-size: 13px; color: #fff; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
.rp-card h4 small { color: var(--dim); font-weight: normal; }
.rp-body { font-size: 12px; }
.rp-card .notice-log { max-height: 150px; }

/* ---- 右下操作面板（大按钮 ≥48px） ---- */
#opPanel {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 8px 14px;
  background: rgba(7, 12, 34, 0.82);
  border-top: 1px solid var(--card-border);
  z-index: 20;
}
.op-group { display: flex; gap: 10px; flex-wrap: wrap; }
.op-btn {
  min-width: 76px; min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(74, 109, 240, 0.22), rgba(39, 70, 144, 0.22));
  color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: 1px;
  cursor: pointer; font-family: inherit;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.op-btn:hover { background: rgba(138, 180, 255, 0.2); border-color: var(--accent); transform: translateY(-1px); }

/* ---- ★ v1.4 战术姿态（gdd/14 §3.3.6）：子菜单 + 姿态徽标 ---- */
#opPanel { position: relative; }
.op-submenu {
  position: absolute;
  right: 10px;
  bottom: calc(100% + 8px);
  z-index: 40;
  min-width: 190px;
  padding: 8px;
  border: 1px solid rgba(138, 180, 255, 0.38);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(23, 32, 74, 0.98), rgba(13, 20, 51, 0.99));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
/* ★ PC 默认正序 column（战术菜单二级不脱离：A-2 只允许在手机端 @media 内 column-reverse，
   不得把翻转带到桌面端 —— 见 tactic-ui.test.js TUI-7 静态守卫） */
.op-submenu-l1, .op-submenu-l2 { display: flex; flex-direction: column; gap: 4px; }
.op-submenu-item {
  min-height: 40px;
  padding: 6px 12px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 6px;
  transition: background 0.12s, border-color 0.12s;
}
.op-submenu-item:hover { background: rgba(138, 180, 255, 0.2); border-color: var(--accent); }
.op-submenu-orbit.active { border-color: var(--accent); background: rgba(138, 180, 255, 0.22); }
.op-submenu-arrow { margin-left: auto; color: var(--muted); font-size: 10px; }
/* 姿态徽标（操作面板右下角，gdd/14 §3.3.6.5） */
.tactic-badge {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgba(74, 109, 240, 0.6);
  border-radius: 999px;
  background: rgba(74, 109, 240, 0.18);
  color: #cfe0ff; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.tactic-badge:hover { background: rgba(74, 109, 240, 0.32); }
/* WIN_FLEET 舰队卡片姿态徽标 */
.tactic-badge-fl {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 8px;
  border: 1px solid rgba(74, 109, 240, 0.55);
  border-radius: 999px;
  background: rgba(74, 109, 240, 0.16);
  color: #cfe0ff; font-size: 11px; font-weight: 700;
}

/* ---- 底栏（24px） ---- */
#statusBar {
  height: 28px; flex: 0 0 28px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  font-size: 12px; color: var(--dim);
  background: rgba(7, 12, 34, 0.82);
  border-top: 1px solid var(--card-border);
  z-index: 20;
}
#statusBar .status-spacer { flex: 1; }

/* ============================================================
   game.html · 窗口系统（WindowHost / WindowStack）
   ============================================================ */
#windowLayer { position: fixed; inset: 0; pointer-events: none; z-index: 500; }
#windowLayer .win { pointer-events: auto; }

.win {
  position: fixed;
  display: flex; flex-direction: column;
  border: 1px solid rgba(138, 180, 255, 0.38);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(23, 32, 74, 0.96), rgba(13, 20, 51, 0.97));
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  min-width: 300px; min-height: 200px;
}
.win-focused { border-color: rgba(138, 180, 255, 0.75); box-shadow: 0 18px 56px rgba(0, 0, 0, 0.65), 0 0 18px rgba(138, 180, 255, 0.16); }
.win-max { border-radius: 0; }

.win-bar {
  flex: 0 0 34px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 0 12px;
  background: rgba(10, 16, 44, 0.9);
  border-bottom: 1px solid rgba(138, 180, 255, 0.22);
  cursor: grab; user-select: none;
}
.win-bar:active { cursor: grabbing; }
.win-title { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-ops { display: flex; gap: 2px; }
.win-op {
  width: 28px; height: 26px; line-height: 1;
  border: none; border-radius: 6px;
  background: transparent; color: var(--muted);
  font-size: 14px; cursor: pointer;
}
.win-op:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.win-op[data-op="close"]:hover { background: rgba(255, 107, 129, 0.85); color: #fff; }

.win-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.win-iframe { flex: 1; width: 100%; height: 100%; border: 0; background: #0b1026; }
.win-pad { flex: 1; overflow-y: auto; padding: 12px 14px; font-size: 13px; }
.win-pad h4 { margin: 12px 0 8px; font-size: 13px; color: #fff; letter-spacing: 1px; }
.win-pad h4 small { color: var(--dim); font-weight: normal; }

/* 原生窗口通用块 */
.pf-block {
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px; line-height: 1.7;
}
.pf-block b { color: var(--accent); }

/* ============================================================
   市场窗口（EVE 布局，2026-08-04 重做：左栏类别 + 右上卖单 + 右下买单）
   ============================================================ */
.win-pad.mkt-eve {
  overflow: hidden;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Tab 栏 */
.mkt-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}
.mkt-tab {
  padding: 6px 14px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.mkt-tab:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.mkt-tab.active {
  background: linear-gradient(135deg, #3a6df0, #274690);
  border-color: rgba(138, 180, 255, 0.6);
  color: #fff;
}
.mkt-tabs-spacer { flex: 1; }

/* 面板（默认 flex 列；JS 用内联 display:none 隐藏非活动 Tab） */
.mkt-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* 挂单市场主布局：左栏 + 右侧上下两块 */
.mkt-browse { flex: 1; min-height: 0; display: flex; gap: 10px; }
.mkt-side {
  flex: 0 0 176px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.mkt-search { width: 100%; }
.mkt-cats {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 2px;
}
.mkt-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.mkt-cat:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.mkt-cat.active {
  background: rgba(138, 180, 255, 0.14);
  border-color: rgba(138, 180, 255, 0.4);
  color: #fff;
}
.mkt-cat-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-cat-count {
  font-size: 11px;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  padding: 1px 8px;
}

.mkt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mkt-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mkt-balance { white-space: nowrap; }

.mkt-board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.mkt-board-block {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mkt-board-block h5 {
  flex: 0 0 auto;
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text);
}
.mkt-board-block h5 small { color: var(--dim); font-weight: normal; }

/* 表格（信息密度高：12px 字号 + 粘性表头） */
.mkt-tbl-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: rgba(7, 12, 34, 0.5);
}
.mkt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.mkt-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 7px 10px;
  background: rgba(16, 24, 58, 0.97);
  border-bottom: 1px solid var(--card-border);
  color: var(--dim);
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 11px;
  white-space: nowrap;
}
.mkt-table th.num, .mkt-table td.num { text-align: right; }
.mkt-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}
.mkt-table tbody tr:last-child td { border-bottom: none; }
.mkt-table tbody tr:hover td { background: rgba(255, 255, 255, 0.05); }
.mkt-row-sel { cursor: pointer; }
.mkt-row-sel:hover td { background: rgba(138, 180, 255, 0.10) !important; }
.mkt-empty { text-align: center; padding: 18px 10px !important; color: var(--dim); }
.mkt-name { color: var(--text); }
.mkt-price { color: var(--gold); font-variant-numeric: tabular-nums; }
.mkt-amount { color: var(--accent); font-variant-numeric: tabular-nums; }
.mkt-time { color: var(--dim); font-size: 11px; }
.badge.sell { border-color: rgba(255, 107, 129, 0.55); color: var(--red); background: rgba(255, 107, 129, 0.12); }
.badge.buy { border-color: rgba(123, 237, 159, 0.55); color: var(--green); background: rgba(123, 237, 159, 0.12); }

/* 交易记录组合筛选 */
.mkt-filters {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 8px;
}
.mkt-filters label { font-size: 12px; color: var(--dim); }
.mkt-filters input[type="text"] { width: 130px; }
.mkt-filters input[type="date"] { padding: 6px 8px; font-size: 12px; }
.mkt-filters select { padding: 6px 8px; font-size: 12px; }

/* 创建订单弹层（窗口内覆盖层，EVE 风格深色模态） */
.mkt-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 6, 20, 0.68);
  z-index: 30;
  border-radius: 12px;
}
.mkt-modal-box {
  width: 440px;
  max-width: calc(100% - 24px);
  background: linear-gradient(150deg, rgba(23, 32, 74, 0.99), rgba(13, 20, 51, 0.99));
  border: 1px solid rgba(138, 180, 255, 0.45);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.7);
}
.mkt-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mkt-modal-head b { font-size: 14px; letter-spacing: 1px; }
.mkt-modal-ops { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.mo-item-search { position: relative; flex: 1; min-width: 0; }
.mo-item-search > input { width: 100%; }
.mo-item-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 240px;
  overflow-y: auto;
  background: #101a44;
  border: 1px solid rgba(138, 180, 255, 0.4);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.mo-item-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.mo-item-opt:last-child { border-bottom: none; }
.mo-item-opt:hover { background: rgba(138, 180, 255, 0.16); }
.mo-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-opt-meta { color: var(--dim); font-size: 11px; white-space: nowrap; }
.mo-item-drop-empty { padding: 10px; text-align: center; font-size: 12px; }
.mkt-modal .hint.ok { color: var(--green); }

/* 仓库窗口（WIN_WAREHOUSE · GDD-25 §L） */
.wh-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.wh-filters label { font-size: 12px; color: var(--dim); }
.wh-filters input[type="text"] { width: 150px; }
.wh-filters select { padding: 6px 8px; font-size: 12px; background: #101632; color: var(--text); border: 1px solid var(--card-border); border-radius: 4px; }
.wh-hint { font-size: 11px; margin-bottom: 8px; }
.wh-body { flex: 1; min-height: 0; overflow-y: auto; }
.wh-group { margin: 12px 0 6px; font-size: 13px; color: #fff; letter-spacing: 1px; }
.wh-group small { color: var(--dim); font-weight: normal; }
.wh-empty { text-align: center; padding: 28px 10px; color: var(--dim); }
.wh-fish-row { cursor: pointer; }
.wh-fish-row:hover td { background: rgba(123, 237, 159, 0.08) !important; }
.wh-sell { white-space: nowrap; }
.wh-fish-detail { margin-top: 4px; }
.wh-fish-detail .form-row label { min-width: 84px; }
.wh-fish-detail .ok { color: var(--green); }
.wh-fish-detail .err { color: var(--red); }

/* 商城角色只读展示（GDD-25 §K：账号=角色，不显示编号） */
.role-name { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 1px; }

/* 装扮窗口（WIN_AVATAR · gdd/10 §8.7 外观配装） */
.av-body { display: flex; gap: 14px; align-items: flex-start; }
.av-preview-col { flex: 0 0 150px; text-align: center; }
.av-preview {
  width: 132px; height: 150px; margin: 0 auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  background: radial-gradient(circle at 50% 28%, rgba(138, 180, 255, 0.18), rgba(11, 16, 38, 0.92));
  position: relative;
}
.av-preview .av-hair {
  position: absolute; left: 50%; top: 30px; transform: translateX(-50%);
  width: 74px; height: 30px; border-radius: 50% 50% 42% 42%;
  background: var(--hair, #282018);
  border: 1px solid rgba(0, 0, 0, 0.3);
}
.av-preview .av-head {
  position: absolute; left: 50%; top: 46px; transform: translateX(-50%);
  width: 62px; height: 68px; border-radius: 46% 46% 52% 52%;
  background: var(--skin, #ffe0c4);
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.av-preview .av-eye { position: absolute; top: 70px; width: 9px; height: 8px; border-radius: 50%; background: var(--eye, #604020); }
.av-preview .av-eye.l { left: calc(50% - 15px); }
.av-preview .av-eye.r { left: calc(50% + 6px); }
.av-main-col { flex: 1; min-width: 0; }
.av-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.av-slot {
  border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  padding: 8px; background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
}
.av-slot h5 { margin: 0 0 4px; font-size: 12px; color: var(--gold); }
.av-slot h5 small { color: var(--dim); font-weight: normal; }
.av-slot .av-cur { font-size: 12px; color: var(--muted); min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-slot select { width: 100%; margin: 5px 0; font-size: 12px; background: #101632; color: var(--text); border: 1px solid var(--card-border); border-radius: 4px; }
.av-slot .av-ops { display: flex; gap: 6px; }
.av-empty { font-size: 11px; color: var(--dim); margin-top: 5px; line-height: 1.4; }
.av-color { display: flex; align-items: center; gap: 6px; margin: 7px 0; flex-wrap: wrap; }
.av-cname { width: 42px; font-size: 12px; color: var(--muted); }
.av-chan { font-size: 10px; color: var(--dim); width: 12px; }
.av-color input[type=range] { flex: 1; min-width: 54px; accent-color: var(--accent); }
.av-hex { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 56px; }
.av-swatch { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: #fff; }

/* 游戏壳内模态/toast 层级（高于窗口层） */
.game-body .modal { z-index: 1300; }
.game-body .toast { z-index: 1400; }


/* ============================================================
   WIN_ASSETS / WIN_FLEET（GDD-23 §4.2 v1.1 主菜单 🪐/🚀 常驻窗口）
   ============================================================ */
/* ★ 2026-08-05 用户实测反馈 #3/#4：星球资产行 / 舰队行整行可点击切换场景（cursor:pointer） */
.asset-row, .fl-row { cursor: pointer; transition: background 0.12s; }
.asset-row:hover, .fl-row:hover { background: rgba(255, 255, 255, 0.06); }
.asset-row .mkt-item, .fl-row .mkt-item { flex: 1; min-width: 0; line-height: 1.5; }
.asset-row .asset-enter { flex: 0 0 auto; }

/* 舰队行：成员舰/Berth 双行信息 + 操作按钮组 */
.fl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; }
.fl-row .mkt-qty { line-height: 1.5; font-size: 12px; }
/* ★ v1.4 舰载佣兵（gdd/13 §3.6）：巷道佣兵池 / 舰队佣兵条展示 */
.merc-pool { display: block; font-size: 11px; margin-top: 2px; }
.fl-ops { display: flex; gap: 6px; flex: 0 0 auto; }
.fl-rename-box { display: flex; align-items: center; gap: 6px; width: 100%; padding-top: 6px; }
.fl-rename-box input { flex: 1; min-width: 120px; }

/* 星图直往目标选择 */
#flTargetFleet, #flTargetNode { background: #101632; color: var(--text); border: 1px solid var(--card-border); border-radius: 4px; padding: 6px 8px; font-size: 12px; }

/* 移动建筑卡片（starmap.html 侧栏，GDD-21 §3.8 基础显示） */
#mobCard .event-item { margin-bottom: 8px; }
#mobCard .e-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#mobCard .e-goto { font-size: 12px; color: var(--gold); font-weight: 600; margin-left: auto; }

/* ============================================================
   PC + 手机自适应（2026-08-04 · 响应式改造）
   断点：≥1280 PC / 768–1279 平板 / <768 手机竖屏
   原则：纯前端 CSS 断点 + game.js 少量布局逻辑；手机端所有功能
         重新布局而非隐藏；保持深蓝星空视觉，追加 media queries。
   ============================================================ */

/* ---------- 平板 768–1279（右栏折叠已在既有规则上调至 1279） ---------- */
@media (min-width: 768px) and (max-width: 1279px) {
  /* 窗口内容触控滚动（窗口尺寸由 game.js 按 92% 宽居中定位） */
  .win-pad { -webkit-overflow-scrolling: touch; }
  .mkt-tbl-wrap { -webkit-overflow-scrolling: touch; }
}

/* ---------- 手机 <768（竖屏） ---------- */
@media (max-width: 767px) {
  /* 壳：100dvh 适配移动浏览器地址栏；小屏不裁剪 */
  html, body { overscroll-behavior: none; }
  .game-body { height: 100vh; height: 100dvh; }
  #shell {
    height: 100vh; height: 100dvh;
    min-height: 0;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  #stage { min-height: 0; }
  .btn, .bar-btn, .op-btn, .mkt-tab, .mkt-cat, .zoom-btn, .qty-btn, .win-op, .min-chip { touch-action: manipulation; }

  /* ---- 顶栏压缩：玩家名 + 资源省略显示 ---- */
  /* ★ A-2 2026-08-06：移动端同样头像贴最左 0px（左 padding 置 0）+ 36px 圆头像 */
  #topbar { height: 44px; flex: 0 0 44px; padding: 0 8px 0 0; gap: 8px; }
  .tb-left { gap: 6px; min-width: 0; }
  .faction-badge { font-size: 17px; }
  .player-avatar { width: 36px; height: 36px; }
  .player-info-tip { left: 6px; top: 50px; }
  .player-name { max-width: 92px; font-size: 13px; }
  .btn.mini { padding: 6px 10px; font-size: 12px; min-height: 40px; }
  .tb-resources { gap: 5px; justify-content: flex-end; }
  .res-item { font-size: 11px; gap: 2px; }
  .res-item b {
    display: inline-block; vertical-align: bottom;
    max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px;
  }
  /* ★ 2026-08-05 顶部场景 pill 已整体移除（含手机端兜底规则一并删除） */
  .sys-btn { width: 36px; height: 36px; font-size: 13px; }
  /* ★ 2026-08-06 三大系统入口：移动端顶栏压缩为紧凑按钮，避免 3 枚 .btn.mini 溢出 */
  .tb-right .entry-link { padding: 4px 6px; font-size: 11px; min-height: 0; }

  /* ---- 左按钮栏 → 底部悬浮导航栏（图标横排；横向滚动 = 「更多」） ---- */
  #leftBar {
    position: fixed; left: 0; right: 0; bottom: 0;
    width: auto; flex: none;
    height: auto; min-height: 56px;
    flex-direction: row; align-items: center;
    gap: 4px;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
    border-right: none;
    border-top: 1px solid var(--card-border);
    overflow-x: auto; overflow-y: hidden;
    background: rgba(7, 12, 34, 0.94);
    backdrop-filter: blur(10px);
    -webkit-overflow-scrolling: touch;
    z-index: 60;
  }
  .bar-btn {
    flex: 0 0 auto;
    min-width: 58px; min-height: 48px;   /* 触控目标 ≥48px */
    padding: 5px 10px; gap: 4px;
    border-radius: 10px;
  }
  .bar-btn .bar-icon { font-size: 19px; }
  .bar-btn .bar-label { font-size: 10px; letter-spacing: 0; }
  .min-bar {
    margin-top: 0; flex-direction: row; gap: 4px;
    padding: 0 0 0 6px; border-top: none;
    border-left: 1px dashed rgba(255, 255, 255, 0.14);
    margin-left: 2px;
  }
  .min-chip { width: 40px; height: 40px; flex: 0 0 auto; font-size: 16px; }

  /* ---- 中央场景 ---- */
  .scene-title { font-size: 18px; letter-spacing: 2px; }
  .scene-sub { font-size: 12px; }
  .scene-station-svg svg { width: 240px; height: auto; }
  #rightPanel { display: none; }

  /* ---- 操作面板：自适应高度 + 按钮网格化（≥48px 触控目标） ---- */
  #opPanel { padding: 6px 8px; justify-content: stretch; gap: 6px; }
  .op-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
  .op-btn { min-width: 0; min-height: 48px; padding: 6px 4px; font-size: 12px; letter-spacing: 0.5px; }

  /* ---- 战术子菜单 → 朝上展开（★ A-3 2026-08-06：菜单在按钮上方弹出，不挡下方信息；
        原底部 sheet 会盖住底部信息区；gdd/14 §3.3.6.5 少层级交互不变） ---- */
  .op-submenu {
    position: absolute;
    left: auto; right: 8px; bottom: calc(100% + 8px);
    width: min(250px, calc(100vw - 24px)); max-width: none;
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(138, 180, 255, 0.38);
    border-left: 1px solid rgba(138, 180, 255, 0.38);
    border-right: 1px solid rgba(138, 180, 255, 0.38);
    border-bottom: 1px solid rgba(138, 180, 255, 0.38);
    padding: 8px;
    max-height: 60vh; overflow-y: auto;
  }
  .op-submenu-item { min-height: 48px; font-size: 14px; }
  /* ★ A-2-2 2026-08-06：手机端菜单朝上展开时内容上下翻转（flex column-reverse）——
     一级「靠近」贴近按钮、逐级朝上堆叠；二级半径同理（当前距离贴近按钮） */
  .op-submenu-l1, .op-submenu-l2 { flex-direction: column-reverse; }
  .tactic-badge { font-size: 11px; padding: 3px 8px; }

  /* ---- 底栏压缩 ---- */
  #statusBar { height: 24px; flex: 0 0 24px; font-size: 11px; padding: 0 8px; gap: 10px; }
  #statusBar .muted { display: none; }
  #statusBar .back { font-size: 11px; padding: 2px 8px; }

  /* ---- 窗口：全屏化（顶部标题+关闭条），无拖拽 ---- */
  .win, .win.win-max, .win.win-mobile {
    position: fixed;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    min-width: 0;
    border-radius: 0;
    border: none;
  }
  .win-bar { flex: 0 0 44px; cursor: default; }
  .win-bar:active { cursor: default; }
  .win-title { font-size: 14px; }
  .win-op { width: 40px; height: 36px; font-size: 16px; }
  .win-pad { padding: 10px 12px; -webkit-overflow-scrolling: touch; }
  .win-iframe { -webkit-overflow-scrolling: touch; }

  /* ---- 市场 EVE 布局 → 纵向堆叠（左栏→顶部横向类别标签；右上/右下→上下两块可滚动） ---- */
  .mkt-eve { gap: 6px; }
  .mkt-tabs { gap: 4px; overflow-x: auto; }
  .mkt-tab { flex: 0 0 auto; min-height: 40px; }
  .mkt-browse { flex-direction: column; gap: 6px; }
  .mkt-side { flex: 0 0 auto; flex-direction: column; gap: 4px; }
  .mkt-search { width: 100%; }
  .mkt-cats {
    flex: 0 0 auto; flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    padding-bottom: 4px;
  }
  .mkt-cat { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }
  .mkt-main { flex: 1; min-height: 0; gap: 6px; }
  .mkt-actions { gap: 6px; }
  .mkt-board { gap: 6px; }
  .mkt-board-block { flex: 1 1 50%; min-height: 0; }
  .mkt-tbl-wrap { max-height: none; -webkit-overflow-scrolling: touch; }
  .mkt-table-wide { min-width: 560px; }   /* 宽表（我的挂单/交易记录）横向滚动不溢出 */
  .mkt-filters { gap: 4px; }
  .mkt-filters input[type="text"] { width: 100%; min-width: 0; }
  .mkt-filters input[type="date"] { flex: 1 1 auto; min-width: 0; }

  /* 创建订单弹层 → 底部 sheet（窗口内覆盖层） */
  .mkt-modal { align-items: flex-end; border-radius: 0; }
  .mkt-modal-box {
    width: 100%; max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    max-height: 92vh; overflow-y: auto;
  }

  /* ---- 通用 modal → 底部 sheet（game 切玩家 / shop 数量 / starmap 确认） ---- */
  .modal { align-items: flex-end; }
  .modal-box, .modal-box.wide {
    width: 100vw; max-width: 100vw;
    border-radius: 18px 18px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 88vh; overflow-y: auto;
  }

  /* ---- WIN_FLEET / WIN_ASSETS / 联系人 / 任务 列表卡片化 ---- */
  .mkt-list { font-size: 13px; }
  .mkt-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
  }
  .mkt-item { flex: 1 1 120px; min-width: 0; }
  .mkt-qty { flex: 1 1 100%; }
  .fl-row { padding: 12px; }
  .fl-ops { flex: 1 1 100%; justify-content: flex-end; }
  .fl-ops .btn { min-height: 40px; }
  .asset-row .mkt-item { flex: 1 1 auto; }

  /* ---- 装扮窗口：预览列置顶、槽位单列 ---- */
  .av-body { flex-direction: column; align-items: center; }
  .av-preview-col { flex: none; }
  .av-slots { grid-template-columns: 1fr; }
  .av-main-col { width: 100%; }

  /* ---- 表单与通用按钮触控目标 ≥44px ---- */
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .form-row input, .form-row select { min-height: 40px; font-size: 14px; }
  .pf-block { font-size: 13px; }

  /* 游戏壳内 toast：抬升到底部导航之上（独立页无底部导航，保持 32px） */
  .game-body .toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 独立页窄屏适配（starmap / shop / combat / admin / index） ---------- */
@media (max-width: 767px) {
  .container { padding: 14px 12px 84px; }
  header.top { gap: 10px; }
  header.top h1 { font-size: 19px; }

  /* combat.html：战力对比 + 战场 纵向堆叠 */
  .power-grid { grid-template-columns: 1fr; }
  .power-vs { padding: 4px 0; }
  .arena { grid-template-columns: 1fr; }
  .vs-col { flex-direction: row; gap: 4px; }
  .controls .btn { flex: 1 1 auto; min-width: 0; }
  .fleet-stats { gap: 10px; }
  .prediction { font-size: 13px; }

  /* shop.html：单列陈列 + 弹层 sheet + 输入自适应 */
  .player-bar { gap: 12px; }
  .balance-col { align-items: flex-start; }
  .balance { font-size: 17px; }
  .search-row { gap: 8px; }
  .search-input, .search-select { min-width: 0; flex: 1 1 100%; }
  .shop-grid { grid-template-columns: 1fr; gap: 12px; }
  .item-card .i-desc { min-height: 0; }
  .item-card .i-img { height: 120px; }
  .promo-banner .p-text { min-width: 0; flex: 1 1 100%; }
  .shelf-desc { flex: 1 1 100%; min-width: 0; }
  .order-row > .order-field { flex: 1 1 100%; }
  .order-field input, .order-field select { min-width: 0; width: 100%; }

  /* starmap.html：地图高度自适应 + 大触控目标（捏合/按钮缩放已有） */
  .map-panel { min-height: 48vh; }
  #starSvg { height: 48vh; }
  .map-tools { top: 10px; right: 10px; gap: 6px; }
  .zoom-level-pill { top: 10px; left: 10px; font-size: 11px; padding: 5px 10px; }
  .map-hint { display: none; }
  .event-list { max-height: 40vh; }
  .heading-pick .hd-btn, .flight-pick .fl-btn { min-height: 44px; }
  .action-row .btn { min-height: 44px; }

  /* admin.html：宽表横向滚动不挤压 */
  .admin-table { min-width: 640px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .asset-preview { width: 36px; height: 36px; }
  .promo-row .promo-meta { min-width: 0; flex: 1 1 100%; }
}

/* ============================================================
   批 7：AI 生成资产客户端接线（2026-08-05）
   · 全局水印裁切：client/assets/ 下 AI 生成图右下角
     「AI生成 WORKBUDDY」水印，用 clip-path 裁掉右下三角，
     不动图像本身。选择器用 img[src*="assets/"]（超集）：
     相对路径 assets/… 与绝对路径 /game/assets/… 均命中
     （任务原稿 img[src*="/assets/"] 匹配不到相对路径，已放宽）。
   · 资产缩略图类：.win-asset-icon / .deco-thumb / .ship-thumb
   ============================================================ */
img[src*="assets/"] {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 86% 100%, 0 100%);
}

/* 窗口标题/按钮栏图标（4 个带图窗口：星图/市场/舰队/星球） */
.win-asset-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 6px;
}
/* 最小化 chip 高度 30px，图标收敛为 22px 避免撑高 */
.min-chip .win-asset-icon { width: 22px; height: 22px; }

/* 装扮槽装饰缩略图（48×48） */
.deco-thumb {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 1px solid var(--card-border);
  padding: 2px;
  background: #101632;
  border-radius: 8px;
  box-sizing: border-box;
  vertical-align: middle;
}
/* 装扮槽缩略图行（卡内顶部 flex 行） */
.av-thumb-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
/* 未装备槽位「空」占位盒（与 .deco-thumb 同尺寸） */
.deco-thumb-empty {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; box-sizing: border-box;
  border: 1px dashed var(--card-border);
  border-radius: 8px;
  background: #0d1220;
  color: var(--dim); font-size: 12px;
}

/* 舰队/战斗舰船缩略图（左侧 64px） */
.ship-thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: rgba(7, 12, 34, 0.55);
  flex: 0 0 auto;
  vertical-align: middle;
}

/* ============================================================
   2026-08-05 一键配装 + 配装模板 + 空间站红标
   ============================================================ */
/* 配装完整度徽标：✓ 完整（绿）/ ⚠ 未完成（红） */
.fit-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px;
  font-size: 11px; line-height: 1; padding: 0 5px; box-sizing: border-box;
  margin: 0 2px; cursor: default; vertical-align: middle;
  border: 1px solid transparent;
}
.fit-badge.ok  { background: rgba(123, 237, 159, 0.16); border-color: rgba(123, 237, 159, 0.5);  color: var(--green); }
.fit-badge.warn{ background: rgba(255, 107, 129, 0.18); border-color: rgba(255, 107, 129, 0.55); color: var(--red); }
.fit-badge.ship{ font-size: 12px; min-width: 34px; height: 20px; border-radius: 10px; }

/* 配装窗口槽位行 */
.fit-slot-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 4px; border-bottom: 1px solid rgba(138, 180, 255, 0.12);
}
.fit-slot-label { flex: 0 0 72px; color: var(--accent); font-size: 12px; }
.fit-slot-cur { flex: 0 0 170px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-slot-sel { flex: 1.2; min-width: 0; }
.fit-pwr { font-size: 12px; color: var(--muted); }
.fit-pwr b.over { color: var(--red); }

/* 一键配装面板 */
.batch-fit-panel {
  margin-top: 8px; padding: 8px 10px;
  background: rgba(7, 12, 34, 0.55); border: 1px solid rgba(138, 180, 255, 0.2);
  border-radius: 8px;
}
.batch-fit-panel .missing-line { font-size: 12px; color: var(--red); }

/* 空间站停靠舰队（红标视图） */
.station-ships {
  margin-top: 4px; padding: 6px 8px;
  background: rgba(7, 12, 34, 0.5); border: 1px solid rgba(138, 180, 255, 0.16);
  border-radius: 8px; font-size: 12px;
}
.station-ships .ss-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.station-ships .ss-empty { color: var(--muted); padding: 2px 0; }

/* ★ 2026-08-08 空间站半价维修坞 */
.station-repair {
  margin-top: 4px; padding: 6px 8px;
  background: rgba(34, 12, 7, 0.5); border: 1px solid rgba(255, 180, 138, 0.18);
  border-radius: 8px; font-size: 12px;
}
.station-repair .rp-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; flex-wrap: wrap; }
.station-repair .rp-name { font-weight: 600; }
.station-repair .rp-state { padding: 0 6px; border-radius: 6px; font-size: 11px; }
.station-repair .rp-state.wreck { background: rgba(255, 80, 80, 0.18); color: #ff8a8a; }
.station-repair .rp-state.damaged { background: rgba(255, 180, 80, 0.18); color: #ffc66e; }
.station-repair .rp-cost { color: #ffd9a8; }
.station-repair .rp-empty { color: var(--muted); padding: 2px 0; }

/* 舰队卡片：每舰配装徽标行 */
.fleet-fit-line { font-size: 11px; color: var(--muted); margin-top: 2px; }
.fleet-fit-line .fit-badge { margin-right: 3px; }

/* ============================================================
   gdd/22 §3 v1.1 · 教程叙事引导箭头/高亮层（M-22-5）
   tutGuideLayer 固定层（指针事件穿透）+ 脉冲箭头 + 说明气泡
   ============================================================ */
.tut-guide-layer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
}
.tut-arrow {
  position: absolute;
  pointer-events: none;
}
/* 箭头头：旋转 45° 的金色菱形 + 脉冲动画（rotate 与 scale 同写进 keyframes 保持方向） */
.tut-arrow::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #ffd166;
  border: 1px solid rgba(255, 180, 60, 0.9);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(255, 209, 102, 0.85);
  animation: tut-pulse 1.1s ease-in-out infinite;
}
.tut-arrow-top::before { left: -8px; top: 0; }
.tut-arrow-bottom::before { left: -8px; top: -30px; }
.tut-arrow-right::before { left: 0; top: -8px; }
/* 定位：top=目标上方（箭头朝下指目标）；bottom=目标下方；right=目标右侧 */
.tut-arrow-top { transform: translate(-50%, -36px); }
.tut-arrow-bottom { transform: translate(-50%, 18px); }
.tut-arrow-right { transform: translate(22px, -50%); }
.tut-guide-label {
  position: absolute;
  min-width: 170px;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(10, 14, 30, 0.92);
  border: 1px solid rgba(255, 209, 102, 0.65);
  color: #ffe9b8;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.35);
  white-space: normal;
}
.tut-arrow-top .tut-guide-label { left: -85px; top: 26px; }
.tut-arrow-bottom .tut-guide-label { left: -85px; bottom: 30px; }
.tut-arrow-right .tut-guide-label { left: 24px; top: -8px; }
@keyframes tut-pulse {
  0%, 100% { transform: rotate(45deg) scale(1); opacity: 1; }
  50% { transform: rotate(45deg) scale(1.3); opacity: 0.65; }
}

/* ============================================================
   ★ B-3 参考图风格融入（2026-08-06）：RTS 舰队选区 + 状态卡
   - 主色：#00b4ff（银英传式蓝）+ #ffd966（高亮黄）；字体系统 sans-serif
   - 舰队行选中：蓝色圆形光圈套在舰船缩略图外（RTS 选区）
   - 选中舰队状态卡（参考图左下角）：状态条（货仓/佣兵/成员舰）
   只叠加新样式，不重写既有规则
   ============================================================ */
.fl-row.selected {
  border-color: rgba(0, 180, 255, 0.75) !important;
  background: rgba(0, 180, 255, 0.09) !important;
}
.fl-row .ship-thumb {
  border-radius: 50%;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.fl-row.selected .ship-thumb {
  border-color: rgba(0, 180, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.85), 0 0 16px rgba(0, 180, 255, 0.55);
}
/* 选中舰队状态卡（舰队窗口底部，参考图左下角状态条风格） */
.fl-status-card {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(7, 12, 34, 0.72);
  border: 1px solid rgba(0, 180, 255, 0.4);
  box-shadow: 0 0 14px rgba(0, 180, 255, 0.18);
}
.fl-status-card .fsc-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.fl-status-card .fsc-title { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 1px; }
/* ★ B-2：等级徽标（银英蓝底 + 高亮黄字，参考图左下角「等级 + 状态条」） */
.fl-status-card .fsc-lv {
  font-size: 11px; font-weight: 700; color: #0a1428;
  background: linear-gradient(135deg, #00b4ff, #7fd4ff);
  border-radius: 6px; padding: 2px 8px; letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(0, 180, 255, 0.55);
}
.fl-status-card .fsc-state { font-size: 11px; color: #7fd4ff; margin-left: auto; }
.fl-status-card .fsc-row { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.fl-status-card .fsc-row b { color: #e8ecff; }
.fl-status-bar {
  height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.10);
  overflow: hidden; margin: 3px 0 8px;
}
.fl-status-bar > i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #00b4ff, #7fd4ff);
}
/* ★ B-2：血条（结构/编队满载度）—— 绿→红健康条 */
.fl-status-bar.hp > i {
  background: linear-gradient(90deg, #7bed9f, #35c46f);
}
.fl-status-bar.hp > i.warn { background: linear-gradient(90deg, #ffd966, #ffe9b8); }
.fl-status-bar.hp > i.over { background: linear-gradient(90deg, #ff6b81, #ff9aa8); }
/* ★ B-2：护盾条（佣兵充足度）—— 银英蓝 */
.fl-status-bar.shield > i {
  background: linear-gradient(90deg, #00b4ff, #7fd4ff);
}
.fl-status-bar.shield > i.warn { background: linear-gradient(90deg, #ffd966, #ffe9b8); }
.fl-status-bar.shield > i.over { background: linear-gradient(90deg, #ff6b81, #ff9aa8); }
/* 货仓条（保留既有） */
.fl-status-bar.cargo > i { background: linear-gradient(90deg, #00b4ff, #7fd4ff); }
.fl-status-bar.cargo > i.over { background: linear-gradient(90deg, #ff6b81, #ff9aa8); }
.fl-status-bar > i.warn { background: linear-gradient(90deg, #ffd966, #ffe9b8); }
.fl-status-bar > i.over { background: linear-gradient(90deg, #ff6b81, #ff9aa8); }
.fl-status-card .fsc-empty { color: var(--dim); font-size: 12px; }
/* 移动端：状态卡满宽 + 更大触控 */
@media (max-width: 767px) {
  .fl-status-card { padding: 12px; }
  .fl-row.selected .ship-thumb { box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.9), 0 0 18px rgba(0, 180, 255, 0.6); }
}

/* ============================================================
   ★ 批 C-3：技能系统客户端（WIN_SKILLS · GDD-26）
   复用 .card/.modal/.toast/.win-pad/.mkt-modal；仅补队列/进度/选择器布局
   ============================================================ */
.skui { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.skui-tabs { display: flex; gap: 6px; border-bottom: 1px solid rgba(138, 180, 255, 0.22); padding-bottom: 8px; }
.skui-tab {
  padding: 6px 14px; border: 1px solid rgba(138, 180, 255, 0.35); border-radius: 8px;
  background: rgba(255, 255, 255, 0.04); color: var(--muted); font-size: 13px; cursor: pointer;
}
.skui-tab.active { background: rgba(138, 180, 255, 0.16); color: #fff; border-color: rgba(138, 180, 255, 0.7); }
.skui-pane { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.skui-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.skui-actions label { font-size: 12px; color: var(--muted); }
.skui-actions select { flex: 1; min-width: 200px; }
.skui-queue { display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.skui-empty { padding: 22px 10px; text-align: center; border: 1px dashed rgba(138, 180, 255, 0.3); border-radius: 10px; }
.skui-q-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border: 1px solid rgba(138, 180, 255, 0.28); border-radius: 10px; background: rgba(255, 255, 255, 0.04);
}
.skui-q-item.skui-q-head { border-color: rgba(255, 209, 102, 0.55); background: rgba(255, 209, 102, 0.07); }
.skui-q-main { flex: 1; min-width: 0; }
.skui-q-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.skui-q-name { font-weight: 700; color: #fff; }
.skui-q-sub { font-size: 12px; margin: 2px 0 4px; }
.skui-progress {
  height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); overflow: hidden; margin: 2px 0 2px;
}
.skui-progress-fill {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #00b4ff, #7fd4ff);
}
.skui-q-item.skui-q-head .skui-progress-fill { background: linear-gradient(90deg, #ffd966, #ffe9b8); }
.skui-q-pct { font-size: 11px; text-align: right; }
.skui-q-ops { display: flex; flex-direction: column; gap: 4px; }
.skui-pool-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px;
  border: 1px solid rgba(138, 180, 255, 0.3); border-radius: 10px; background: rgba(138, 180, 255, 0.08);
}
.skui-pool-bar b { color: var(--accent); }
.skui-log { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.skui-log-line {
  padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.04);
  font-size: 12px; line-height: 1.6; color: #d8e0f4; font-family: var(--mono, monospace);
}
.skui-pool-card.card { padding: 12px 14px; }
.skui-balance { color: var(--gold); font-size: 16px; }
/* 添加技能选择器（弹层内分组列表） */
.skui-pick-box { width: 520px; max-height: 86vh; display: flex; flex-direction: column; }
.skui-pick-box > input { margin: 4px 0 8px; }
.skui-pick-list { overflow-y: auto; max-height: 54vh; padding-right: 4px; }
.skui-pick-group { margin: 8px 0 4px; font-size: 12px; color: var(--accent); letter-spacing: 1px; }
.skui-pick-group small { color: var(--dim); }
.skui-pick-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.skui-pick-item {
  text-align: left; padding: 6px 8px; font-size: 12px; border-radius: 7px;
  border: 1px solid rgba(138, 180, 255, 0.35); background: rgba(255, 255, 255, 0.04); color: #dfe6fb; cursor: pointer;
}
.skui-pick-item:hover:not(.disabled) { background: rgba(138, 180, 255, 0.16); }
.skui-pick-item.disabled { opacity: 0.45; cursor: not-allowed; }
/* 移动端：选择器底部 sheet（沿用 .mkt-modal 底部 sheet 覆盖） */
@media (max-width: 767px) {
  .skui-pick-box { width: 100%; }
  .skui-q-ops { flex-direction: row; justify-content: flex-end; }
}