/* ══════════════════════════════════════════════════════════════
   nfs-skin.css — 竞速风格皮肤层（与 windtunnel/css/nfs.css 同语言）
   只覆盖视觉：底色/辉光/斜切/速度线。不改布局、不改文字、不改交互。
   注意：.panel-card / #demoBanner 等被 JS 写 transform 的元素一律不用
   transform，只动边框/背景/滤镜，避免拖拽与动画冲突。
   ══════════════════════════════════════════════════════════════ */
:root {
  --nfs-cyan: #22d3ee;
  --nfs-amber: #ffb020;
  --nfs-hot: #ff3b30;
  --nfs-ink: #eaf6ff;
  --nfs-line: #22384c;
  --nfs-btn: linear-gradient(180deg, #17222f, #101823);
}

/* ── 全局底色：深海军蓝径向渐变 ── */
body {
  background: radial-gradient(120% 90% at 50% 24%, #0e1826 0%, #080d15 58%, #05080d 100%);
}

/* ── 画布舞台：暗角（垫在 SVG 之下；斜向速度线已按需求移除）── */
#stage-wrap { background: #070c13; }
#stage-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(85% 70% at 50% 42%, transparent 46%, rgba(0,0,0,.5) 100%);
}
#stage-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.05) 3px 4px);
}

/* ── 顶栏：暗色玻璃 + 青/琥珀双色描边 ── */
#topbar {
  background: linear-gradient(180deg, rgba(14,24,38,.96), rgba(7,12,19,.96));
  border-bottom: 1px solid var(--nfs-line);
  box-shadow: 0 1px 0 rgba(34,211,238,.06), 0 8px 30px rgba(0,0,0,.5);
}
#topbar::after {
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.65) 28%, rgba(255,176,32,.55) 72%, transparent);
  height: 2px; bottom: -2px;
}
#topbar .logo span {
  font-style: italic; font-weight: 800; letter-spacing: 2.5px;
  color: var(--nfs-ink);
  text-shadow: 0 0 16px rgba(34,211,238,.35);
}
#topbar .logo .ver {
  display: inline-block;
  color: var(--nfs-amber);
  transform: skewX(-10deg);
  border: 1px solid rgba(255,176,32,.4);
  background: rgba(255,176,32,.08);
  text-shadow: 0 0 10px rgba(255,176,32,.5);
}
#projectSelect {
  background: #101a26; border: 1px solid var(--nfs-line); color: var(--nfs-ink);
  transform: skewX(-8deg);
}
#projectSelect option { transform: none; }

/* ── 按钮：斜切平行四边形 + 霓虹悬停 ── */
#topbar .btn, #actBar .btn {
  transform: skewX(-8deg);
  border: 1px solid #33445c; color: #b6cadf;
  background: var(--nfs-btn);
  letter-spacing: 1.5px;
  transition: border-color .2s, color .2s, box-shadow .2s, background .2s;
}
#topbar .btn:hover, #actBar .btn:hover {
  border-color: var(--nfs-cyan); color: #d8f8ff;
  box-shadow: 0 0 16px rgba(34,211,238,.28), inset 0 0 12px rgba(34,211,238,.08);
}
#actBar .btn.primary {
  background: linear-gradient(135deg, #0e7490, #155e75);
  border-color: #22d3ee; color: #eafcff;
}
#actBar .btn.primary:hover {
  box-shadow: 0 0 26px rgba(34,211,238,.5), inset 0 0 18px rgba(34,211,238,.16);
}
#actBar .btn.danger {
  border-color: #6e2a24; color: #ffb3a8;
  background: linear-gradient(180deg, #2b1512, #1d0e0c);
}
#actBar .btn.danger:hover {
  border-color: var(--nfs-hot); color: #ffd9d4;
  box-shadow: 0 0 16px rgba(255,59,48,.3);
}

/* 演示按钮：斜切 + 青色系 */
.dbtn {
  transform: skewX(-8deg);
  border: 1px solid #33445c; color: #b6cadf;
  background: var(--nfs-btn);
  letter-spacing: 1px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.dbtn:hover {
  border-color: var(--nfs-cyan); color: #d8f8ff;
  box-shadow: 0 0 14px rgba(34,211,238,.3), inset 0 0 10px rgba(34,211,238,.07);
}
.dbtn.active {
  border-color: var(--nfs-cyan); color: #eafcff;
  background: linear-gradient(180deg, rgba(34,211,238,.22), rgba(34,211,238,.08));
  box-shadow: 0 0 18px rgba(34,211,238,.35);
}
.dbtn.busy { opacity: .3; filter: grayscale(1); }
.dbtn:active { transform: skewX(-8deg) scale(.96); }
.dbtn.dbtn-reset { border-style: dashed; }

/* 分组芯片：斜切小色块 */
.chip {
  transform: skewX(-8deg);
  border: 1px solid #2c3f57; background: var(--nfs-btn); color: #c2d4e6;
  letter-spacing: 1px;
  transition: border-color .2s, box-shadow .2s;
}
.chip:hover { border-color: var(--nfs-amber); color: #ffe3ad; box-shadow: 0 0 12px rgba(255,176,32,.22); }
.chip-clear { color: #8fb2c9; }

/* ── 浮动卡片：切角 + 青色侧灯 + 辉光（不用 transform：拖拽归 JS 管）── */
#grpBar, #demoBar, #domainLegend, #actBar {
  background: linear-gradient(200deg, rgba(13,26,40,.94), rgba(8,14,22,.95));
  border: 1px solid var(--nfs-line);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  box-shadow: 0 6px 28px rgba(0,0,0,.55), inset 0 1px 0 rgba(120,230,255,.06);
}
#actBar { border-left: 3px solid var(--nfs-amber); }
#grpBar, #demoBar, #domainLegend { border-left: 3px solid var(--nfs-cyan); }
.panel-card .pc-head { border-bottom: 1px solid rgba(34,211,238,.12); }
.gb-title, .dl-title {
  font-weight: 800; letter-spacing: 2.5px; color: var(--nfs-ink);
  text-shadow: 0 0 12px rgba(34,211,238,.3);
}
#actBar .gb-title { text-shadow: 0 0 12px rgba(255,176,32,.35); }

/* ── 实时数据卡：斜体数字 + 辉光 ── */
#hud { gap: 8px; }
.hud-card {
  background: linear-gradient(200deg, rgba(13,26,40,.92), rgba(8,14,22,.94));
  border: 1px solid var(--nfs-line);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  border-left: 3px solid var(--nfs-cyan);
}
.hud-card .hc-num {
  font-style: italic; font-weight: 800; letter-spacing: 1px; color: var(--nfs-ink);
  text-shadow: 0 0 14px rgba(34,211,238,.45);
}
.hud-card:nth-of-type(2) .hc-num { text-shadow: 0 0 14px rgba(255,176,32,.5); }

/* ── 元器件库 ── */
#library {
  background: linear-gradient(90deg, rgba(11,20,32,.96), rgba(8,14,22,.94));
  border-right: 1px solid var(--nfs-line);
}
#libTitle {
  font-weight: 800; letter-spacing: 3px; color: var(--nfs-ink);
  text-shadow: 0 0 12px rgba(34,211,238,.3);
  border-bottom: 1px solid rgba(34,211,238,.14);
}
.libSearch {
  background: #0d1622 !important; border: 1px solid var(--nfs-line) !important; color: var(--nfs-ink) !important;
}
.lib-cat { color: #5d7d95; letter-spacing: 2.5px; }
.cmp-card { border-color: #24364b; transition: border-color .18s, box-shadow .18s; }
.cmp-card:hover {
  border-color: var(--nfs-cyan);
  box-shadow: 0 0 14px rgba(34,211,238,.22), inset 0 0 10px rgba(34,211,238,.05);
}

/* ── 属性面板 / 缩放 / 画布提示 ── */
#props {
  background: linear-gradient(270deg, rgba(12,21,34,.95), rgba(8,14,22,.93));
  border-left: 1px solid var(--nfs-line);
}
#props .fp-head h3 { letter-spacing: 2.5px; color: var(--nfs-ink); }
#zoomCtl button {
  border: 1px solid #33445c; background: var(--nfs-btn); color: #b6cadf;
  transform: skewX(-8deg); transition: border-color .2s, box-shadow .2s;
}
#zoomCtl button:hover {
  border-color: var(--nfs-cyan); color: #d8f8ff;
  box-shadow: 0 0 12px rgba(34,211,238,.28);
}
#viewInfo { color: var(--nfs-amber); font-family: Consolas, monospace; }
#canvasTip { color: #5d7d95; letter-spacing: 1px; }

/* ── 状态栏：扫描线 + 斜体出品 ── */
#statusbar {
  background: linear-gradient(0deg, rgba(7,12,19,.97), rgba(12,20,32,.95));
  border-top: 1px solid var(--nfs-line);
  box-shadow: 0 -1px 0 rgba(34,211,238,.08), 0 -10px 30px rgba(0,0,0,.45);
}
#statusbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(34,211,238,.02) 3px 4px);
}
#creditText, #statusbar .credit {
  font-style: italic; letter-spacing: 1.5px; color: #8fb2c9;
}

/* ── 演示横幅（JS 控制 transform，只改配色辉光）── */
#demoBanner {
  background: linear-gradient(200deg, rgba(13,26,40,.96), rgba(8,14,22,.96));
  border: 1px solid var(--nfs-cyan);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  box-shadow: 0 0 34px rgba(34,211,238,.3), 0 10px 40px rgba(0,0,0,.6);
}
#demoBanner.ok { border-color: #52ff9a; box-shadow: 0 0 34px rgba(82,255,154,.3), 0 1px 0 rgba(82,255,154,.4); }
#demoBanner .db-title { color: var(--nfs-ink); letter-spacing: 1.5px; }
#demoBanner .db-step { color: #9fd8ea; }

/* ── 开机画面：NFS 主场（LOGO 竞速大字 + 透视地台；斜向速度线已按需求移除）── */
#boot {
  background: radial-gradient(120% 90% at 50% 30%, #0e1826 0%, #070c13 62%, #04070c 100%);
}
.boot-inner { position: relative; z-index: 1; }
#boot::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background-image:
    linear-gradient(rgba(34,211,238,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(560px) rotateX(38deg) translateY(16%) scale(1.6);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, rgba(0,0,0,.85), transparent 70%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.85), transparent 70%);
}
.boot-logo {
  font-size: 44px; font-weight: 900; font-style: italic; letter-spacing: 8px;
  color: #fff; transform: skewX(-8deg);
  text-shadow: 0 0 30px rgba(34,211,238,.75), 0 0 80px rgba(34,211,238,.35);
  animation: nfsLogoGlow 2.6s ease-in-out infinite;
}
@keyframes nfsLogoGlow {
  0%, 100% { text-shadow: 0 0 30px rgba(34,211,238,.75), 0 0 80px rgba(34,211,238,.35); }
  50% { text-shadow: 0 0 14px rgba(34,211,238,.5), 0 0 110px rgba(34,211,238,.6); }
}
.boot-title {
  font-style: italic; font-weight: 700; letter-spacing: 4px; color: var(--nfs-ink);
  text-shadow: 0 0 18px rgba(34,211,238,.35);
}
.boot-tags span {
  transform: skewX(-10deg);
  border: 1px solid rgba(34,211,238,.35);
  background: rgba(34,211,238,.08);
  color: var(--nfs-ink); letter-spacing: 1.5px;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .boot-tags span {
    border-color: color-mix(in srgb, var(--tc) 55%, #22384c);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 16%, transparent), transparent);
  }
}
.boot-bar {
  width: 340px; height: 5px; background: #101c29; border: 1px solid var(--nfs-line);
}
.boot-bar i {
  background: linear-gradient(90deg, var(--nfs-cyan), #7dd3fc 55%, var(--nfs-amber));
  box-shadow: 0 0 16px rgba(34,211,238,.8), 0 0 34px rgba(34,211,238,.4);
}
.boot-list { font-family: Consolas, monospace; letter-spacing: 1px; }
.boot-st { color: #5d7d95; letter-spacing: 4px; font-family: Consolas, monospace; }
.boot-li b { color: var(--nfs-cyan); }

/* ── 弹窗：顶部双色光带 + 辉光（不用切角：右上角是关闭按钮）── */
.hm-card {
  position: relative;
  background: linear-gradient(200deg, rgba(13,26,40,.97), rgba(8,14,22,.97));
  border: 1px solid var(--nfs-line);
  box-shadow: 0 0 60px rgba(0,0,0,.7), 0 0 40px rgba(34,211,238,.08);
}
.hm-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.8) 25%, rgba(255,176,32,.65) 75%, transparent);
}
.hm-card .hm-head { border-bottom: 1px solid rgba(34,211,238,.16); }
.hm-title { font-weight: 800; letter-spacing: 2px; color: var(--nfs-ink); text-shadow: 0 0 12px rgba(34,211,238,.3); }
.hm-card .hm-foot { border-top: 1px solid rgba(34,211,238,.12); }
#realCarOk, #helpOk, #safetyAck, #fspBtn {
  transform: skewX(-8deg);
  background: linear-gradient(135deg, #0e7490, #155e75);
  border: 1px solid var(--nfs-cyan); color: #eafcff; letter-spacing: 2px;
}
#realCarOk:hover, #helpOk:hover, #safetyAck:hover, #fspBtn:hover {
  box-shadow: 0 0 26px rgba(34,211,238,.5), inset 0 0 16px rgba(34,211,238,.14);
}

/* ── 日志抽屉 / 提示条 ── */
#logDrawer {
  background: linear-gradient(180deg, rgba(10,18,30,.97), rgba(7,12,19,.97));
  border-bottom: 1px solid var(--nfs-line);
  border-left: 3px solid var(--nfs-cyan);
}
#logDrawer .ld-head span { letter-spacing: 2px; color: var(--nfs-ink); }
#log .t { color: #5d7d95; }
#toast {
  background: linear-gradient(200deg, #17222f, #101823);
  border: 1px solid var(--nfs-cyan); color: var(--nfs-ink);
  transform: translateX(-50%) skewX(-6deg);
  box-shadow: 0 0 26px rgba(34,211,238,.35);
}

/* ── 引导卡 ── */
#tourCard {
  background: linear-gradient(200deg, rgba(13,26,40,.97), rgba(8,14,22,.97));
  border: 1px solid var(--nfs-line);
  border-left: 3px solid var(--nfs-amber);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
#tourNext, #tourPrev, #tourSkip {
  transform: skewX(-8deg); letter-spacing: 1.5px;
  border: 1px solid #33445c; background: var(--nfs-btn); color: #b6cadf;
}
#tourNext { background: linear-gradient(135deg, #0e7490, #155e75); border-color: var(--nfs-cyan); color: #eafcff; }
#tourNext:hover { box-shadow: 0 0 22px rgba(34,211,238,.45); }
#tourPrev:hover, #tourSkip:hover { border-color: var(--nfs-cyan); color: #d8f8ff; }
#tourStepNo {
  font-family: Consolas, monospace; font-weight: 700; color: var(--nfs-amber);
  border: 1px solid rgba(255,176,32,.4); background: rgba(255,176,32,.08);
  padding: 1px 8px; letter-spacing: 2px;
}
.tc-head { letter-spacing: 2px; }
.tc-head .tc-brand { font-family: Consolas, monospace; color: var(--nfs-cyan); letter-spacing: 3px; }
#tourTitle { font-style: italic; font-weight: 800; letter-spacing: 1.5px; color: var(--nfs-ink); text-shadow: 0 0 12px rgba(34,211,238,.3); }

/* ── 全屏教学模式提示卡 ── */
.fsp-card {
  background: linear-gradient(200deg, rgba(13,26,40,.97), rgba(8,14,22,.97));
  border: 1px solid var(--nfs-line);
  box-shadow: 0 0 60px rgba(0,0,0,.7), 0 0 44px rgba(34,211,238,.1);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.fsp-ico { text-shadow: 0 0 26px rgba(34,211,238,.7); }
.fsp-t { font-style: italic; font-weight: 800; letter-spacing: 3px; color: var(--nfs-ink); text-shadow: 0 0 14px rgba(34,211,238,.4); }

/* ── 安全警示卡：琥珀警示带 ── */
.hm-card.safety-card { border-left: 3px solid var(--nfs-amber); }
.hm-card.safety-card::before {
  background: linear-gradient(90deg, transparent, rgba(255,176,32,.85) 25%, rgba(255,59,48,.6) 75%, transparent);
}

.rh-dev-ok { border: 1px solid rgba(82,255,154,.45); background: rgba(82,255,154,.08); }
.rh-dev-warn { border: 1px solid rgba(255,176,32,.45); background: rgba(255,176,32,.08); }
/* ── 状态灯 / 日志滚动条 ── */
.sled.on { box-shadow: 0 0 10px currentColor, 0 0 22px currentColor; }
#logTicker { color: #9fd8ea; }
#logDrawer #log::-webkit-scrollbar-thumb { background: #2c4258; }

/* ── 操作指引编号：青色斜块 ── */
#propBody .g-step b {
  background: linear-gradient(135deg, #0e7490, #155e75);
  border: 1px solid rgba(34,211,238,.5);
  border-radius: 4px;
  transform: skewX(-8deg);
  box-shadow: 0 0 10px rgba(34,211,238,.25);
}