/* ===========================================================
   钢笔画战车 · 3D 手绘坦克设计台
   界面基调：米白纸张 + 蓝黑钢笔线 + 手写感圆角
   =========================================================== */

:root{
  --paper:        #f4efe4;
  --paper-2:      #ece5d6;
  --paper-3:      #e2d9c6;
  --ink:          #23262e;
  --ink-soft:     #5a6070;
  --ink-faint:    #8e93a1;
  --line:         #23262e;
  --accent:       #b2543a;   /* 印章红 */
  --accent-2:     #3c6e8f;   /* 钢笔墨蓝 */
  --ok:           #4a7a52;
  --shadow:       0 2px 0 rgba(35,38,46,.18), 0 10px 24px -12px rgba(35,38,46,.45);
  --r:            10px;
  --panel-w:      286px;
  --font: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,system-ui,sans-serif;
  --mono: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#app{ position:fixed; inset:0; display:flex; flex-direction:column; }

/* ---------- 细颗粒纸纹（全局覆盖层） ---------- */
#app::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:99;
  opacity:.5; mix-blend-mode:multiply;
  background-image:
    radial-gradient(rgba(35,38,46,.055) 1px, transparent 1.2px),
    radial-gradient(rgba(35,38,46,.035) 1px, transparent 1.2px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 2px 3px;
}

/* =================== 顶栏 =================== */
#topbar{
  display:flex; align-items:center; gap:14px;
  padding:8px 14px;
  min-height:56px;
  background:linear-gradient(#f7f3ea,#ece5d6);
  border-bottom:2px solid var(--line);
  position:relative; z-index:30;
}
#topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:5px;
  background:repeating-linear-gradient(-45deg, rgba(35,38,46,.10) 0 2px, transparent 2px 7px);
  pointer-events:none;
}
.brand{ display:flex; align-items:center; gap:9px; padding-right:14px; border-right:1.5px dashed rgba(35,38,46,.3); }
.brand-pen{ font-size:23px; transform:translateY(-1px); }
.brand-txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand-txt strong{ font-size:15.5px; letter-spacing:.06em; }
.brand-txt small{ font-size:10.5px; color:var(--ink-faint); letter-spacing:.12em; }

.toolgroup{ display:flex; align-items:center; gap:6px; }
.toolgroup .glabel{ font-size:11px; color:var(--ink-faint); letter-spacing:.1em; }
.spacer{ flex:1; }

/* 手绘按钮 */
.tbtn{
  font-family:var(--font); font-size:12.5px; color:var(--ink);
  background:#fbf8f1; border:1.6px solid var(--line);
  border-radius:8px 5px 9px 6px / 6px 9px 5px 8px;
  padding:6px 11px; cursor:pointer; white-space:nowrap;
  box-shadow:1.5px 1.5px 0 rgba(35,38,46,.22);
  transition:transform .07s ease, background .15s ease, box-shadow .07s;
}
.tbtn:hover{ background:#fff; transform:translate(-1px,-1px); box-shadow:2.5px 2.5px 0 rgba(35,38,46,.24); }
.tbtn:active{ transform:translate(1px,1px); box-shadow:.5px .5px 0 rgba(35,38,46,.3); }
.tbtn.on{ background:#e9f0f6; border-color:var(--accent-2); color:#1d4560; }
.tbtn.primary{ background:var(--accent); color:#fdf6ef; border-color:#7d3927; }
.tbtn.primary:hover{ background:#c25f43; }
.tbtn.ghost{ background:transparent; border-style:dashed; }
.mini{
  border:1.5px solid var(--line); background:#fbf8f1; border-radius:6px;
  width:22px; height:22px; line-height:1; cursor:pointer; color:var(--ink);
  font-size:13px; padding:0;
}
.mini:hover{ background:#fff; }

/* 预设 chips */
.chips{ display:flex; gap:5px; align-items:center; }
.chips.wrap{ flex-wrap:wrap; margin-top:8px; }
.chip{
  font-size:11.5px; padding:4px 9px; cursor:pointer;
  border:1.4px solid var(--line); border-radius:20px 18px 20px 17px;
  background:#fbf8f1; color:var(--ink); white-space:nowrap;
}
.chip:hover{ background:#fff; }
.chip.on{ background:var(--accent-2); border-color:#28536d; color:#f5fbff; }

/* =================== 主区 =================== */
#stage{ flex:1; display:flex; min-height:0; position:relative; }

.panel{
  width:var(--panel-w); flex:0 0 var(--panel-w);
  display:flex; flex-direction:column; min-height:0;
  background:linear-gradient(180deg,#f8f4ec,#efe8da);
  position:relative; z-index:20;
}
#leftPanel{ border-right:2px solid var(--line); }
#rightPanel{ border-left:2px solid var(--line); }
.panel.collapsed{ flex-basis:34px; width:34px; }
.panel.collapsed .panel-body,
.panel.collapsed .panel-foot,
.panel.collapsed h2{ display:none; }
.panel.collapsed .panel-head{ justify-content:center; }

.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border-bottom:1.5px solid var(--line);
  background:repeating-linear-gradient(90deg, rgba(35,38,46,.05) 0 1px, transparent 1px 6px);
}
.panel-head h2{ margin:0; font-size:13px; letter-spacing:.14em; font-weight:600; }
.panel-body{ flex:1; overflow-y:auto; overflow-x:hidden; padding:10px 12px 16px; }
.panel-foot{ border-top:1.5px dashed rgba(35,38,46,.35); padding:8px 12px 11px; }
.hint{ font-size:10.5px; color:var(--ink-faint); line-height:1.5; }
.wide{ width:100%; font-family:var(--font); font-size:12px; padding:7px; cursor:pointer;
  border:1.5px dashed var(--line); background:transparent; border-radius:8px; color:var(--ink); }
.wide:hover{ background:#fff; }

/* 滚动条 */
.panel-body::-webkit-scrollbar{ width:9px; }
.panel-body::-webkit-scrollbar-thumb{ background:rgba(35,38,46,.25); border-radius:9px; border:2px solid transparent; background-clip:content-box; }
.panel-body::-webkit-scrollbar-track{ background:transparent; }

/* --------- 零件卡片 --------- */
.partlist{ display:flex; flex-direction:column; gap:7px; }
.pcard{
  display:flex; align-items:center; gap:9px;
  border:1.6px solid var(--line); border-radius:9px 7px 10px 8px / 8px 10px 7px 9px;
  background:#fbf8f1; padding:7px 9px; cursor:pointer; text-align:left;
  box-shadow:1.5px 1.5px 0 rgba(35,38,46,.14);
  transition:transform .07s, box-shadow .07s, background .15s;
  font-family:var(--font); color:var(--ink); width:100%;
}
.pcard:hover{ transform:translate(-1px,-1px); box-shadow:2.5px 2.5px 0 rgba(35,38,46,.2); background:#fff; }
.pcard.on{ background:#eef4f9; border-color:var(--accent-2); }
.pcard .ico{ font-size:17px; width:22px; text-align:center; filter:saturate(.8); }
.pcard .meta{ flex:1; min-width:0; }
.pcard .nm{ font-size:12.5px; font-weight:600; }
.pcard .ds{ font-size:10px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard .eye{ font-size:12px; opacity:.55; padding:2px 3px; border-radius:4px; }
.pcard .eye:hover{ opacity:1; background:rgba(35,38,46,.08); }
.pcard .eye.off{ opacity:.3; text-decoration:line-through; }

/* --------- 参数滑块 --------- */
.pgroup{ margin-bottom:11px; }
.pgroup > .gname{
  font-size:10.5px; letter-spacing:.14em; color:var(--ink-soft); margin:12px 0 6px;
  border-bottom:1px dashed rgba(35,38,46,.3); padding-bottom:3px;
}
.pgroup:first-child > .gname{ margin-top:2px; }
.row{ margin-bottom:9px; }
.row .rhead{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:3px; }
.row .rname{ font-size:11.5px; color:var(--ink); }
.row .rval{ font-family:var(--mono); font-size:10.5px; color:var(--accent); background:rgba(178,84,58,.08);
  padding:1px 5px; border-radius:4px; }
.row .rdesc{ font-size:9.5px; color:var(--ink-faint); margin-top:3px; line-height:1.45; }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:16px; background:transparent; cursor:ew-resize; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:3px;
  background:linear-gradient(90deg, rgba(60,110,143,.55), rgba(35,38,46,.22));
  border:1px solid rgba(35,38,46,.35);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:13px; height:13px; margin-top:-5.5px;
  background:#fbf8f1; border:1.7px solid var(--line); border-radius:50% 46% 52% 48%;
  box-shadow:1px 1px 0 rgba(35,38,46,.25);
}
input[type=range]:active::-webkit-slider-thumb{ background:var(--accent); border-color:#7d3927; }

.toggle{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.toggle .tname{ font-size:11.5px; }
.switch{
  width:38px; height:19px; border:1.6px solid var(--line); border-radius:12px;
  background:#e6dfd0; position:relative; cursor:pointer; flex:0 0 auto;
}
.switch::after{
  content:""; position:absolute; top:1.5px; left:2px; width:12px; height:12px;
  border-radius:50% 46% 50% 48%; background:var(--ink); transition:transform .16s ease;
}
.switch.on{ background:#cfe0ec; border-color:var(--accent-2); }
.switch.on::after{ transform:translateX(18px); background:var(--accent-2); }

/* 取色 / 色板 */
.swatchRow{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.sw{
  width:26px; height:26px; border:1.6px solid var(--line); cursor:pointer;
  border-radius:7px 5px 8px 6px / 6px 8px 5px 7px;
  box-shadow:1px 1px 0 rgba(35,38,46,.2);
}
.sw:hover{ transform:translate(-1px,-1px); }
.sw.on{ outline:2px solid var(--accent); outline-offset:1.5px; }
.colorInput{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.colorInput input[type=color]{
  width:44px; height:26px; padding:0; border:1.6px solid var(--line); background:#fff;
  border-radius:6px; cursor:pointer;
}
.colorInput .cl{ font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); }

/* 页签 */
.tabs{ display:flex; gap:4px; margin-bottom:12px; }
.tabs button{
  flex:1; font-family:var(--font); font-size:11.5px; padding:6px 0; cursor:pointer;
  border:1.5px solid var(--line); background:#fbf8f1; color:var(--ink);
  border-radius:7px 5px 8px 6px / 6px 8px 5px 7px;
}
.tabs button:hover{ background:#fff; }
.tabs button.on{ background:var(--ink); color:var(--paper); }
.paneTitle{ display:flex; align-items:center; justify-content:space-between; margin:2px 0 10px; }
.paneTitle span:first-child{ font-size:13px; font-weight:600; }
.badge{ font-size:10px; padding:2px 7px; border-radius:10px; background:rgba(60,110,143,.14); color:#2b5876; border:1px solid rgba(60,110,143,.4); }

.divider{ display:flex; align-items:center; gap:8px; margin:16px 0 9px; }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:rgba(35,38,46,.28); }
.divider span{ font-size:10.5px; color:var(--ink-soft); letter-spacing:.12em; }

.sellist{ display:flex; flex-direction:column; gap:5px; }
.selrow{ display:flex; align-items:center; gap:7px; font-size:11.5px; padding:4px 6px;
  border-radius:6px; cursor:pointer; border:1.3px solid transparent; }
.selrow:hover{ background:#fff; border-color:rgba(35,38,46,.25); }
.selrow.on{ background:#eef4f9; border-color:var(--accent-2); }
.selrow .nm{ flex:1; }
.selrow .vv{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); }

/* --------- 战力评估 --------- */
.combatstats{ display:flex; flex-direction:column; gap:6px; }
.crow{ display:flex; align-items:center; gap:8px; font-size:11.5px; }
.crow .cn{ width:48px; flex:0 0 48px; color:var(--ink-soft); }
.crow .cb{ flex:1; height:8px; border:1.4px solid var(--line); border-radius:5px; overflow:hidden;
  background:repeating-linear-gradient(-45deg, rgba(35,38,46,.08) 0 2px, transparent 2px 5px); }
.crow .cb i{ display:block; height:100%; background:var(--ink); transition:width .12s; }
.crow .cv{ width:62px; flex:0 0 62px; text-align:right; font-family:var(--mono); font-size:10px; color:var(--ink); white-space:nowrap; }
.crow.hl .cb i{ background:var(--accent); }
.cnote{ font-size:10.5px; color:var(--ink-faint); line-height:1.6; margin-top:4px; }
.cnote a{ color:var(--accent); text-decoration:none; border-bottom:1px dashed var(--accent); }

/* =================== 视口 =================== */
#viewport{ flex:1; position:relative; min-width:0; background:radial-gradient(ellipse at 50% 42%, #fbf8f1 0%, #ece5d6 62%, #ddd3bf 100%); }
#scene{ display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
#scene:active{ cursor:grabbing; }

#viewportOverlay{ position:absolute; inset:10px; pointer-events:none; }
.corner{ position:absolute; width:22px; height:22px; border:2px solid rgba(35,38,46,.35); }
.corner.tl{ top:0; left:0; border-right:0; border-bottom:0; }
.corner.tr{ top:0; right:0; border-left:0; border-bottom:0; }
.corner.bl{ bottom:0; left:0; border-right:0; border-top:0; }
.corner.br{ bottom:0; right:0; border-left:0; border-top:0; }

#selectedTag{
  position:absolute; padding:3px 9px; font-size:11px; pointer-events:none;
  background:#23262e; color:#f7f3ea; border-radius:6px; transform:translate(-50%,-140%);
  white-space:nowrap; box-shadow:0 4px 10px -4px rgba(0,0,0,.6); z-index:8;
}
#selectedTag::after{
  content:""; position:absolute; left:50%; bottom:-5px; margin-left:-4px;
  border:4px solid transparent; border-top-color:#23262e;
}

/* ---------- 动画控制条 ---------- */
#animbar{
  position:absolute; left:14px; top:14px; z-index:12;
  display:flex; flex-direction:column; gap:5px;
  padding:7px 9px 6px;
  background:rgba(251,248,241,.9); backdrop-filter:blur(2px);
  border:1.6px solid var(--line);
  border-radius:11px 8px 12px 9px / 9px 12px 8px 11px;
  box-shadow:var(--shadow);
}
#animbar .arow{ display:flex; align-items:center; gap:4px; }
#animbar .asep{ width:1px; align-self:stretch; background:rgba(35,38,46,.25); margin:1px 4px; }
.abtn{
  display:flex; align-items:center; gap:4px;
  font-family:var(--font); font-size:11.5px; color:var(--ink);
  background:transparent; border:1.4px solid transparent; border-radius:7px 5px 8px 6px;
  padding:4px 8px; cursor:pointer; transition:background .12s, transform .07s;
}
.abtn i{ font-style:normal; font-size:13px; line-height:1; }
.abtn:hover{ background:rgba(35,38,46,.08); }
.abtn:active{ transform:translateY(1px); }
.abtn.on{ background:var(--ink); color:var(--paper); }
.abtn.on i{ filter:grayscale(.2); }
.abtn.hot{ background:var(--accent); color:#fdf6ef; border-color:#7d3927; }
.abtn.hot:hover{ background:#c25f43; }
.abtn.icon{ padding:4px 7px; }
.abtn.muted i{ opacity:.4; }
#animbar .areadout{
  font-family:var(--mono); font-size:10px; color:var(--ink-soft); letter-spacing:.02em;
  border-top:1px dashed rgba(35,38,46,.28); padding-top:4px; white-space:nowrap;
}

#viewbar{
  position:absolute; left:50%; transform:translateX(-50%); bottom:44px;
  display:flex; gap:3px; padding:4px; z-index:10;
  background:rgba(251,248,241,.9); border:1.6px solid var(--line);
  border-radius:10px 8px 11px 9px / 9px 11px 8px 10px;
  box-shadow:var(--shadow); backdrop-filter:blur(2px);
}
#viewbar button{
  font-family:var(--font); font-size:11.5px; min-width:30px; padding:5px 7px; cursor:pointer;
  border:1.4px solid transparent; background:transparent; border-radius:6px; color:var(--ink);
}
#viewbar button:hover{ background:rgba(35,38,46,.08); }
#viewbar button.on{ background:var(--ink); color:var(--paper); }
#viewbar .vsep{ width:1px; background:rgba(35,38,46,.28); margin:2px 3px; }

#statline{
  position:absolute; left:14px; bottom:11px; display:flex; align-items:center; gap:8px;
  font-size:10.5px; color:var(--ink-soft); font-family:var(--mono);
  background:rgba(251,248,241,.72); padding:3px 9px; border-radius:6px;
  border:1px dashed rgba(35,38,46,.3); pointer-events:none;
}
#statline .dot{ width:4px; height:4px; border-radius:50%; background:var(--accent); }

/* =================== 弹层 =================== */
.modal{ position:absolute; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  background:rgba(35,38,46,.42); backdrop-filter:blur(3px); }
.modal[hidden]{ display:none; }
#toast[hidden]{ display:none; }
.modal-card{
  width:min(540px,88vw); background:var(--paper); border:2px solid var(--line);
  border-radius:14px 10px 15px 11px / 11px 15px 10px 14px;
  padding:22px 24px; box-shadow:6px 6px 0 rgba(35,38,46,.3);
}
.modal-card h3{ margin:0 0 12px; font-size:16px; letter-spacing:.06em; }
.modal-card ul{ margin:0 0 18px; padding-left:18px; }
.modal-card li{ font-size:12.5px; line-height:1.85; color:var(--ink-soft); }
.modal-card b{ color:var(--ink); }

.toast{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); font-size:12px; padding:8px 16px;
  border-radius:20px; z-index:130; box-shadow:0 8px 20px -8px rgba(0,0,0,.7);
  animation:pop .2s ease;
}
@keyframes pop{ from{ opacity:0; transform:translate(-50%,10px);} to{ opacity:1; transform:translate(-50%,0);} }

@media (max-width: 1120px){
  :root{ --panel-w: 244px; }
  .brand-txt small{ display:none; }
}
@media (max-width: 900px){
  #leftPanel{ position:absolute; left:0; top:0; bottom:0; }
  #rightPanel{ position:absolute; right:0; top:0; bottom:0; }
}