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

:root{
  --paper:      #f4efe4;
  --paper-2:    #ece5d6;
  --paper-3:    #e2d9c6;
  --ink:        #23262e;
  --ink-soft:   #5a6070;
  --ink-faint:  #8e93a1;
  --accent:     #b2543a;   /* 印章红 */
  --accent-2:   #3c6e8f;   /* 钢笔墨蓝 */
  --ok:         #4a7a52;
  --r:          10px;
  --panel-w:    292px;
  --panel-r:    268px;

  /* ---- 可换肤的界面色（由主题 JS 覆写） ---- */
  --card:        #fbf8f1;
  --card-hi:     #ffffff;
  --card-t:      rgba(251,248,241,.80);
  --panel-a:     #f7f3ea;
  --panel-b:     #efe8d9;
  --panel-head-a:#fbf8f1;
  --panel-head-b:#f1ebdd;
  --track:       #e7e0d1;
  --float-bg:    rgba(251,248,241,.92);
  --sel-bg:      #e9f0f6;
  --sel-ink:     #1d4560;
  --grain:       rgba(35,38,46,.055);
  --grain2:      rgba(35,38,46,.032);
  --stripe:      rgba(35,38,46,.10);
  --hair:        rgba(35,38,46,.17);
  --hair-2:      rgba(35,38,46,.32);
  --hover:       rgba(35,38,46,.05);
  --shadow-c:    rgba(35,38,46,.22);
  --note-good:   #e6f0e4;
  --note-bad:    #f6e3dd;
  --note-mid:    #f2ecd9;
  --font: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,system-ui,sans-serif;
  --hand: "Bradley Hand","Segoe Print","Comic Sans MS","Chalkboard SE",var(--font);
}

*{ 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:200;
  opacity:.55; mix-blend-mode:multiply;
  background-image:
    radial-gradient(var(--grain) 1px, transparent 1.2px),
    radial-gradient(var(--grain2) 1px, transparent 1.2px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 2px 3px;
}

/* =================== 顶栏 =================== */
#topbar{
  display:flex; align-items:center; gap:12px;
  padding:8px 14px; min-height:58px;
  background:linear-gradient(var(--panel-head-a),var(--panel-head-b));
  border-bottom:2px solid var(--ink);
  position:relative; z-index:30; flex-wrap:wrap;
}
#topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:5px;
  background:repeating-linear-gradient(-45deg, var(--stripe) 0 2px, transparent 2px 7px);
  pointer-events:none;
}
.brand{ display:flex; align-items:center; gap:9px; padding-right:12px; border-right:1.5px dashed var(--hair-2); }
.brand-pen{ font-size:22px; 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:var(--card); border:1.6px solid var(--ink);
  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 var(--shadow-c);
  transition:transform .07s ease, background .15s ease, box-shadow .07s;
}
.tbtn:hover{ background:var(--card-hi); transform:translate(-1px,-1px); box-shadow:2.5px 2.5px 0 var(--shadow-c); }
.tbtn:active{ transform:translate(1px,1px); box-shadow:.5px .5px 0 var(--shadow-c); }
.tbtn.on{ background:var(--sel-bg); border-color:var(--accent-2); color:var(--sel-ink); }
.tbtn.primary{ background:var(--accent); color:#fdf6ef; border-color:#7d3927; }
.tbtn.primary:hover{ background:#c25f43; }
.tbtn.ghost{ background:transparent; border-style:dashed; }
.tbtn.tiny{ font-size:11.5px; padding:4px 8px; }

.mini{
  border:1.5px solid var(--ink); background:var(--card); border-radius:6px;
  width:22px; height:22px; line-height:1; cursor:pointer; color:var(--ink);
  font-size:12px; padding:0; flex:0 0 auto;
}
.mini:hover{ background:var(--card-hi); }

.nameinput{
  font-family:var(--hand); font-size:13.5px; letter-spacing:.05em;
  width:104px; padding:5px 8px; color:var(--ink); background:var(--card);
  border:1.6px solid var(--ink);
  border-radius:7px 4px 8px 5px / 5px 8px 4px 7px;
  box-shadow:inset 1px 1px 0 rgba(35,38,46,.08);
}
.nameinput:focus{ outline:none; background:var(--card-hi); box-shadow:0 0 0 2px var(--sel-bg); }

.chips{ display:flex; gap:5px; flex-wrap:wrap; }
.chip{
  font-family:var(--font); font-size:11.5px; color:var(--ink);
  background:var(--card); border:1.4px solid var(--ink); opacity:.82;
  border-radius:11px 9px 12px 8px / 8px 12px 9px 11px;
  padding:3.5px 10px; cursor:pointer; white-space:nowrap;
  transition:transform .07s, background .15s, opacity .15s;
}
.chip:hover{ background:var(--card-hi); transform:translateY(-1px); opacity:1; }
.chip.on{ background:var(--sel-bg); border-color:var(--accent-2); color:var(--sel-ink); opacity:1; box-shadow:1.5px 1.5px 0 var(--shadow-c); }
.chip:active{ transform:translateY(1px); }

/* =================== 主体三栏 =================== */
#stage{ flex:1; display:flex; min-height:0; position:relative; z-index:10; }

.panel{
  width:var(--panel-w); flex:0 0 var(--panel-w);
  display:flex; flex-direction:column; min-height:0;
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  border-right:2px solid var(--ink);
  transition:flex-basis .18s ease, width .18s ease, opacity .18s ease;
}
.panel.right{ width:var(--panel-r); flex:0 0 var(--panel-r); border-right:none; border-left:2px solid var(--ink); }
.panel.collapsed{ flex-basis:0; width:0; overflow:hidden; opacity:0; border-width:0; }

.panel-head{
  display:flex; align-items:center; gap:6px; padding:9px 12px;
  border-bottom:1.6px solid var(--ink);
  background:linear-gradient(var(--panel-head-a),var(--panel-head-b));
}
.panel-head h2{ font-size:13px; margin:0; letter-spacing:.14em; flex:1; }
.head-tools{ display:flex; gap:5px; }

.panel-body{ flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 10px 14px; }
.panel-foot{ border-top:1.4px dashed var(--hair-2); padding:7px 12px; }
.hint{ font-size:10.5px; color:var(--ink-faint); line-height:1.5; }

.panel-body::-webkit-scrollbar{ width:9px; }
.panel-body::-webkit-scrollbar-track{ background:var(--hover); }
.panel-body::-webkit-scrollbar-thumb{
  background:var(--track); border:1.4px solid var(--ink); border-radius:6px;
}
.panel-body::-webkit-scrollbar-thumb:hover{ background:var(--card-hi); }

/* =================== 参数分组 =================== */
.pgroup{ margin-bottom:9px; border:1.5px solid rgba(35,38,46,.55); border-radius:9px 6px 10px 7px / 7px 10px 6px 9px; background:var(--card-t); }
.pgroup-head{
  width:100%; display:flex; align-items:center; gap:7px; cursor:pointer;
  background:none; border:none; font-family:var(--font); color:var(--ink);
  padding:7px 10px; font-size:12.5px; letter-spacing:.08em;
}
.pgroup-head:hover{ background:var(--hover); }
.pgi{ font-size:13px; color:var(--accent-2); width:15px; text-align:center; }
.pgn{ flex:1; text-align:left; font-weight:600; }
.pgx{ font-size:10px; color:var(--ink-faint); transition:transform .18s; }
.pgroup.folded .pgx{ transform:rotate(-90deg); }
.pgroup.folded .pgroup-body{ display:none; }
.pgroup-body{ padding:2px 10px 9px; }

.prow{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:2px 8px; padding:5px 0 6px;
  border-bottom:1px dashed var(--hair);
}
.prow:last-child{ border-bottom:none; }
.plabel{ font-size:12px; color:var(--ink-soft); }
.pval{
  font-family:var(--hand); font-size:12.5px; color:var(--accent-2);
  min-width:52px; text-align:right; letter-spacing:.02em;
}
.prange{
  grid-column:1 / -1; -webkit-appearance:none; appearance:none;
  width:100%; height:16px; background:transparent; margin:2px 0 0; cursor:grab;
}
.prange:active{ cursor:grabbing; }
.prange::-webkit-slider-runnable-track{
  height:6px; background:var(--track); border:1.4px solid var(--ink);
  border-radius:6px 4px 7px 5px / 5px 7px 4px 6px;
}
.prange::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; margin-top:-6.2px;
  background:var(--card-hi); border:1.6px solid var(--ink);
  border-radius:50% 46% 52% 48% / 48% 52% 46% 52%;
  box-shadow:1.2px 1.2px 0 var(--shadow-c);
}
.prange::-moz-range-track{ height:6px; background:var(--track); border:1.4px solid var(--ink); border-radius:6px; }
.prange::-moz-range-thumb{ width:14px; height:14px; background:var(--card-hi); border:1.6px solid var(--ink); border-radius:50%; }

.pcolor{
  -webkit-appearance:none; appearance:none; width:38px; height:21px;
  border:1.6px solid var(--ink); border-radius:6px 4px 7px 5px / 5px 7px 4px 6px;
  background:var(--card-hi); padding:0; cursor:pointer;
  box-shadow:1.2px 1.2px 0 var(--shadow-c);
}
.pcolor::-webkit-color-swatch-wrapper{ padding:2px; }
.pcolor::-webkit-color-swatch{ border:none; border-radius:3px; }

/* =================== 视口 =================== */
#viewport{ flex:1; position:relative; min-width:0; background:var(--paper); overflow:hidden; }
#scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#annot{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }

#viewportOverlay{ position:absolute; inset:10px; pointer-events:none; }
.corner{ position:absolute; width:20px; height:20px; border:2px solid var(--hair-2); }
.corner.tl{ top:0; left:0; border-right:none; border-bottom:none; }
.corner.tr{ top:0; right:0; border-left:none; border-bottom:none; }
.corner.bl{ bottom:0; left:0; border-right:none; border-top:none; }
.corner.br{ bottom:0; right:0; border-left:none; border-top:none; }

.float{ position:absolute; z-index:12; }
#viewbar{
  left:50%; transform:translateX(-50%); bottom:14px;
  display:flex; gap:5px; padding:5px 7px;
  background:var(--float-bg); border:1.6px solid var(--ink);
  border-radius:11px 8px 12px 9px / 9px 12px 8px 11px;
  box-shadow:2px 2px 0 var(--shadow-c);
}
.vbtn{
  font-family:var(--font); font-size:11.5px; color:var(--ink);
  background:transparent; border:1.4px solid transparent; border-radius:7px;
  padding:4px 9px; cursor:pointer;
}
.vbtn:hover{ background:var(--hover); }
.vbtn.on{ background:var(--sel-bg); border-color:var(--accent-2); color:var(--sel-ink); }

#toggles{
  top:12px; right:12px; display:flex; gap:5px; flex-wrap:wrap;
  justify-content:flex-end; max-width:calc(100% - 260px);
}
#toggles .tbtn{ background:var(--float-bg); }

#viewhint{
  right:14px; bottom:16px; font-size:10.5px; color:var(--ink-faint);
  background:var(--float-bg); padding:3px 8px; border-radius:8px;
  pointer-events:none;
}

#toast{
  left:50%; top:16px; transform:translate(-50%,-14px);
  background:var(--ink); color:var(--paper); font-size:12px;
  padding:6px 14px; border-radius:9px 7px 10px 8px / 8px 10px 7px 9px;
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
  z-index:20; white-space:nowrap;
}
#toast.show{ opacity:.94; transform:translate(-50%,0); }

/* =================== 指标面板 =================== */
.specrows{ display:flex; flex-direction:column; gap:0; }
.specrow{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:5.5px 2px; border-bottom:1px dashed var(--hair);
  font-size:12px; color:var(--ink-soft);
}
.specrow b{ font-family:var(--hand); font-size:13.5px; color:var(--ink); letter-spacing:.02em; }
.sub{ font-size:11.5px; letter-spacing:.14em; color:var(--ink-faint); margin:14px 0 7px; font-weight:600; }
.notes{ display:flex; flex-direction:column; gap:6px; }
.note{ display:flex; gap:7px; font-size:11.5px; line-height:1.55; color:var(--ink-soft); }
.note i{
  font-style:normal; flex:0 0 auto; width:19px; height:19px; line-height:18px; text-align:center;
  border:1.4px solid var(--ink); border-radius:5px; font-size:10.5px; color:var(--ink);
  background:var(--card);
}
.note.good i{ background:var(--note-good); border-color:#3f6b47; color:var(--ink); }
.note.bad  i{ background:var(--note-bad); border-color:#8c4433; color:var(--ink); }
.note.mid  i{ background:var(--note-mid); border-color:#8a7a45; color:var(--ink); }
.note.note i{ background:var(--sel-bg); border-color:var(--accent-2); color:var(--sel-ink); }

/* =================== 指南弹窗 =================== */
.modal{
  position:fixed; inset:0; z-index:300; display:none;
  align-items:center; justify-content:center;
  background:rgba(35,38,46,.42); backdrop-filter:blur(1.5px);
}
.modal.show{ display:flex; }
.modal-box{
  width:min(640px, 92vw); max-height:84vh; display:flex; flex-direction:column;
  background:linear-gradient(var(--panel-head-a),var(--panel-b));
  border:2px solid var(--ink);
  border-radius:14px 10px 15px 11px / 11px 15px 10px 14px;
  box-shadow:6px 6px 0 var(--shadow-c);
}
.modal-head{
  display:flex; align-items:center; padding:11px 14px;
  border-bottom:1.8px solid var(--ink);
}
.modal-head h2{ margin:0; font-size:14px; letter-spacing:.16em; flex:1; }
.modal-body{ padding:14px 18px 20px; overflow-y:auto; font-size:12.5px; line-height:1.75; color:var(--ink-soft); }
.modal-body h3{ font-size:12px; letter-spacing:.14em; color:var(--ink); margin:16px 0 6px; }
.modal-body p{ margin:6px 0; }
.modal-body ul{ margin:6px 0; padding-left:18px; }
.modal-body li{ margin:3px 0; }
.modal-body b{ color:var(--ink); }
.keygrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:5px 14px; }
.keygrid span{ font-size:11.5px; }
kbd{
  font-family:var(--hand); font-size:11.5px; background:var(--card-hi);
  border:1.4px solid var(--ink); border-radius:5px; padding:1px 5px;
  box-shadow:1px 1px 0 var(--shadow-c); margin:0 1px;
}

/* =================== 窄屏 =================== */
@media (max-width: 1180px){
  :root{ --panel-w:250px; --panel-r:236px; }
  .brand-txt small{ display:none; }
}
@media (max-width: 900px){
  #stage{ flex-direction:column; }
  .panel{ width:auto; flex:0 0 42vh; border-right:none; border-bottom:2px solid var(--ink); }
  .panel.right{ width:auto; flex:0 0 34vh; border-left:none; border-top:2px solid var(--ink); border-bottom:none; }
}

/* =================== 参数里的选项行 =================== */
.pchoices{ grid-column:1 / -1; display:flex; gap:5px; flex-wrap:wrap; margin-top:3px; }
.pchoice{
  font-family:var(--font); font-size:11px; color:var(--ink); opacity:.75;
  background:var(--card); border:1.4px solid var(--ink);
  border-radius:9px 7px 10px 8px / 8px 10px 7px 9px;
  padding:3px 9px; cursor:pointer; white-space:nowrap;
  transition:transform .07s, background .15s, opacity .15s;
}
.pchoice:hover{ background:var(--card-hi); transform:translateY(-1px); opacity:1; }
.pchoice.on{
  background:var(--sel-bg); border-color:var(--accent-2); color:var(--sel-ink);
  opacity:1; box-shadow:1.2px 1.2px 0 var(--shadow-c);
}

/* 换肤时整页平滑过渡 */
body,.panel,#topbar,.tbtn,.chip,.pgroup,.modal-box{ transition:background .22s ease, color .22s ease, border-color .22s ease; }