/* 拉格朗日模拟器 · 录入器样式
   视觉取向：编程猫/Scratch 式积木块 —— 左侧色条 + 圆角卡片 + 拖拽手柄 */

:root{
  --bg:#eef1f7;
  --card:#ffffff;
  --line:#d9dfeb;
  --ink:#1e2433;
  --ink2:#5a6478;
  --ink3:#8b95a8;

  --sys:#7c5cff;
  --sys-bg:#f3f0ff;
  --weapon:#ff8c42;
  --weapon-bg:#fff5ed;
  --strat:#1fb46b;
  --strat-bg:#eefaf3;
  --effect:#e94f8a;
  --effect-bg:#fdeef4;
  --hull:#2f8dfb;
  --hull-bg:#eef5ff;
  --hangar:#00a3b4;
  --hangar-bg:#e9f8fa;

  --ok:#1fb46b;
  --warn:#e8a013;
  --bad:#e5484d;
}

*{box-sizing:border-box}
/* 关键：作者样式里的 display:flex/grid 会盖掉浏览器默认的 [hidden]{display:none}，
   所以必须强制一次。否则 hidden 元素其实还显示着，会把顶栏挤爆、标签页点不到 */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.55 "PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
code{font-family:Consolas,"Courier New",monospace;font-size:12px}

/* ---------------- 顶栏 ---------------- */
#topbar{
  height:58px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,#7c5cff,#2f8dfb);color:#fff;font-weight:700;font-size:17px;
}
.t1{font-weight:700;font-size:14px;letter-spacing:.3px}
.t2{font-size:11px;color:var(--ink3)}
.topbar-actions{display:flex;gap:8px;flex-wrap:wrap}

.btn{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:7px 13px;border-radius:8px;cursor:pointer;font-size:13px;
  transition:.13s;white-space:nowrap;
}
.btn:hover{background:#f4f6fb;border-color:#c3ccdd}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--sys);border-color:var(--sys);color:#fff}
.btn.primary:hover{background:#6a49f5}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.ok:disabled{background:#c8d0de;border-color:#c8d0de;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink2)}
.btn.tiny{padding:3px 9px;font-size:11px}
.btn.danger{color:var(--bad);border-color:#f3c9ca}
.btn.danger:hover{background:#fdf0f0}

/* ---------------- 三栏布局 ---------------- */
#layout{
  display:grid;grid-template-columns:250px minmax(0,1fr) 360px;
  gap:14px;padding:14px;align-items:start;
  height:calc(100vh - 58px);
}

/* ---------------- 侧栏 ---------------- */
#sidebar{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  display:flex;flex-direction:column;height:100%;overflow:hidden;
}
.side-head{padding:12px;border-bottom:1px solid var(--line)}
#search{
  width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  font-size:13px;outline:none;
}
#search:focus{border-color:var(--sys)}
.side-count{font-size:11px;color:var(--ink3);margin-top:6px}
.ship-list{flex:1;overflow-y:auto;padding:8px}
.ship-item{
  padding:8px 10px;border-radius:8px;cursor:pointer;margin-bottom:4px;
  border:1px solid transparent;transition:.12s;
}
.ship-item:hover{background:#f5f7fc}
.ship-item.active{background:var(--sys-bg);border-color:#d8cfff}
.ship-item .nm{font-weight:600;font-size:13px}
.ship-item .mt{font-size:11px;color:var(--ink3);display:flex;gap:6px;margin-top:2px}
.chip{
  display:inline-block;padding:0 6px;border-radius:5px;background:#eef1f7;
  color:var(--ink2);font-size:10px;line-height:16px;
}
.side-foot{padding:10px 12px;border-top:1px solid var(--line);background:#fafbfe}
.side-foot .hint{font-size:10px;color:var(--ink3);margin-bottom:3px}
.side-foot code{color:var(--ink2);word-break:break-all}

/* ---------------- 编辑区 ---------------- */
#editor{height:100%;overflow-y:auto;padding-right:4px}
.empty-state{
  background:#fff;border:1px dashed var(--line);border-radius:12px;
  padding:70px 30px;text-align:center;color:var(--ink3);
}
.empty-icon{font-size:44px;margin-bottom:10px}
.empty-state h2{margin:0 0 8px;color:var(--ink2);font-size:18px}
.empty-state p{margin:0;font-size:13px;line-height:1.9}

/* 积木块通用 */
.block{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  margin-bottom:12px;overflow:hidden;border-left:5px solid var(--line);
}
.block > .bhead{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:#fafbfe;border-bottom:1px solid var(--line);
}
.block > .bbody{padding:12px}
.block.hull{border-left-color:var(--hull)}   .block.hull > .bhead{background:var(--hull-bg)}
.block.sys{border-left-color:var(--sys)}     .block.sys > .bhead{background:var(--sys-bg)}
.block.weapon{border-left-color:var(--weapon)} .block.weapon > .bhead{background:var(--weapon-bg)}
.block.strat{border-left-color:var(--strat)} .block.strat > .bhead{background:var(--strat-bg)}
.block.effect{border-left-color:var(--effect)} .block.effect > .bhead{background:var(--effect-bg)}
.block.hangar{border-left-color:var(--hangar)} .block.hangar > .bhead{background:var(--hangar-bg)}

.block.off{opacity:.5}
.block.off > .bhead{filter:grayscale(.6)}

.drag{
  cursor:grab;color:var(--ink3);font-size:15px;user-select:none;
  padding:0 2px;letter-spacing:-2px;
}
.drag:active{cursor:grabbing}
.block.dragging{opacity:.35}
.block.drop-above{box-shadow:0 -3px 0 var(--sys)}
.block.drop-below{box-shadow:0 3px 0 var(--sys)}

.btitle{
  font-weight:700;font-size:13px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.btitle input{
  font-weight:700;font-size:13px;border:1px solid transparent;background:transparent;
  border-radius:6px;padding:2px 6px;width:100%;max-width:280px;
}
.btitle input:hover{border-color:var(--line);background:#fff}
.btitle input:focus{border-color:var(--sys);background:#fff;outline:none}
.badge{
  font-size:10px;padding:1px 7px;border-radius:20px;background:#eef1f7;
  color:var(--ink2);white-space:nowrap;
}
.badge.sys{background:#e6e0ff;color:#5b3fd6}
.badge.weapon{background:#ffe8d6;color:#c25c17}
.badge.strat{background:#d9f5e6;color:#0f8b50}
.badge.effect{background:#fcdfeb;color:#c02a67}

/* 字段栅格 */
.grid{display:grid;gap:10px 14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1400px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}

.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.fld > span{font-size:11px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld input[type=text],.fld input[type=number],.fld select{
  padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px;
  outline:none;background:#fff;width:100%;min-width:0;
}
.fld input:focus,.fld select:focus{border-color:var(--sys);box-shadow:0 0 0 3px #7c5cff1a}

/* 滑块行 */
.sld{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:6px;align-items:center}
.sld input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;
  background:#e2e7f0;outline:none;cursor:pointer;
}
.sld input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:#fff;border:2px solid var(--sys);cursor:grab;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.sld input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.12)}
.sld input[type=number]{padding:4px 6px;font-size:12px;text-align:right}

/* 命中率表 */
.hitwrap{
  border:1px solid var(--line);border-radius:9px;padding:10px;background:#fcfdff;
}
.hitwrap .hint{font-size:11px;color:var(--ink3);margin-bottom:8px}
.hitgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
@media(max-width:1200px){.hitgrid{grid-template-columns:1fr}}
.hitrow{display:grid;grid-template-columns:52px minmax(0,1fr) 62px 68px;gap:8px;align-items:center}
.hitrow > label{font-size:12px;color:var(--ink2)}
.hitrow.na{opacity:.62}
.hitrow.na > label{color:#b5343a;text-decoration:line-through}
.hitrow input:disabled{background:#f2f4f8;color:#a8b0c0}

/* 序列编辑器 */
.seq{display:flex;flex-direction:column;gap:6px}
.seqtier{
  display:flex;align-items:center;gap:8px;background:#fbfcfe;
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;flex-wrap:wrap;
}
.seqtier .no{
  font-size:11px;font-weight:700;color:#fff;background:var(--sys);
  border-radius:5px;padding:1px 7px;
}
.seqchip{
  border:1px solid var(--line);background:#fff;border-radius:6px;
  padding:2px 8px;font-size:12px;cursor:pointer;user-select:none;transition:.1s;
}
.seqchip:hover{border-color:var(--sys)}
.seqchip.on{background:var(--sys);border-color:var(--sys);color:#fff;font-weight:600}

/* 子块容器 */
.sub{margin-top:10px;padding-left:10px;border-left:2px dashed #e2e7f0}
.sub-title{
  font-size:11px;color:var(--ink3);margin:10px 0 6px;
  display:flex;align-items:center;gap:8px;
}
.sub-title::after{content:"";flex:1;height:1px;background:var(--line)}

.addrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.add{
  border:1px dashed #c3ccdd;background:#fff;color:var(--ink2);
  padding:5px 12px;border-radius:8px;cursor:pointer;font-size:12px;transition:.12s;
}
.add:hover{border-color:var(--sys);color:var(--sys);background:var(--sys-bg)}

/* 行内小控件 */
.inline{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2)}
.switch{
  position:relative;width:34px;height:19px;border-radius:20px;background:#d5dbe7;
  cursor:pointer;transition:.15s;flex:none;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.switch.on{background:var(--ok)}
.switch.on::after{transform:translateX(15px)}

.xbtn{
  border:none;background:transparent;color:var(--ink3);cursor:pointer;
  font-size:15px;line-height:1;padding:3px 6px;border-radius:6px;
}
.xbtn:hover{background:#f0f2f7;color:var(--bad)}

/* 策略影响项 */
.mod{
  display:grid;grid-template-columns:minmax(0,1.2fr) 62px 86px 74px 26px;
  gap:7px;align-items:center;margin-bottom:6px;
}
@media(max-width:1200px){.mod{grid-template-columns:1fr 60px 80px 60px 26px}}

/* ---------------- 右侧属性面板 ---------------- */
#panel{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  height:100%;display:flex;flex-direction:column;overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;border-bottom:1px solid var(--line);background:#fafbfe;
}
.panel-head h3{margin:0;font-size:14px}
.panel-scroll{flex:1;overflow-y:auto;padding:12px}
.pblock{margin-bottom:16px}
.pblock h4{
  margin:0 0 8px;font-size:12px;color:var(--ink2);font-weight:700;
  padding-bottom:5px;border-bottom:1px solid var(--line);
}
.pnote{font-weight:400;color:var(--ink3);font-size:10px}

.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.stat{
  background:#f8fafd;border:1px solid #e8edf6;border-radius:8px;padding:6px 9px;
}
.stat .k{font-size:10px;color:var(--ink3)}
.stat .v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .v small{font-size:10px;font-weight:400;color:var(--ink3);margin-left:2px}
.stat.hl{background:var(--sys-bg);border-color:#ddd4ff}
.stat.hl .v{color:#5b3fd6}

.wcard{
  border:1px solid var(--line);border-radius:9px;padding:9px;margin-bottom:9px;
  background:#fcfdff;
}
.wcard .wn{font-weight:700;font-size:12.5px;margin-bottom:2px}
.wcard .ws{font-size:10.5px;color:var(--ink3);margin-bottom:7px}
.wmetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:8px}
.wmetrics .m{background:#fff;border:1px solid #e8edf6;border-radius:6px;padding:4px 6px}
.wmetrics .m .k{font-size:9.5px;color:var(--ink3)}
.wmetrics .m .v{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.hitbar{display:flex;flex-wrap:wrap;gap:4px}
.hitpill{
  font-size:10.5px;background:#eef4ff;border:1px solid #dbe6fb;color:#2b5cab;
  border-radius:20px;padding:1px 8px;font-variant-numeric:tabular-nums;
}
.hitpill.low{background:#fdeeee;border-color:#f7d5d5;color:#b5343a}
.hitpill.high{background:#eafaf1;border-color:#cdf0dd;color:#0f8b50}
.hitpill.na{background:#f0f2f7;border-color:#e0e4ee;color:#9aa4b8}

.sysrow{
  display:flex;justify-content:space-between;gap:8px;font-size:11.5px;
  padding:5px 8px;border-radius:7px;background:#f8fafd;margin-bottom:4px;
  border:1px solid #e8edf6;
}
.sysrow.down{background:#fdeeee;border-color:#f7d5d5;color:#b5343a}
.sysrow.cmd{background:#fff4e6;border-color:#f5d9b3}

#problem-list{font-size:12px}
.prob{
  padding:6px 9px;border-radius:7px;background:#fff8e8;border:1px solid #f5e3bb;
  color:#8a6410;margin-bottom:5px;line-height:1.5;
}
.prob.err{background:#fdeeee;border-color:#f7d5d5;color:#a8292e}
.prob.none{background:#eafaf1;border-color:#cdf0dd;color:#0f8b50}

/* ---------------- 策略库弹窗 ---------------- */
.modal-box.wide{width:900px;max-width:94vw;display:flex;flex-direction:column;max-height:88vh}
.libhead{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.libhead h3{margin:0;flex:1}
.libhead select{padding:6px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px}
.liblist{
  flex:1;overflow-y:auto;margin-top:8px;
  border:1px solid var(--line);border-radius:10px;padding:8px;background:#fbfcfe;
}
.libitem{
  padding:9px 12px;border-radius:9px;cursor:pointer;border:1px solid transparent;
  margin-bottom:5px;background:#fff;transition:.12s;
}
.libitem:hover{border-color:var(--strat);background:var(--strat-bg);transform:translateX(2px)}
.libitem .ln{font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px}
.libitem .lc{
  font-size:10px;font-weight:400;background:#e6f6ec;color:#0f8b50;
  border-radius:20px;padding:1px 8px;
}
.libitem .ld{font-size:12px;color:var(--ink2);margin-top:3px;line-height:1.55}
.libitem .lm{font-size:10.5px;color:var(--ink3);margin-top:3px}

/* 对空三词条卡片 */
.aacard{
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;cursor:pointer;
  background:#fbfcfe;transition:.13s;
}
.aacard:hover{border-color:#7ab6f5;background:#f2f8ff}
.aacard.on{border-color:#2f8dfb;background:#eef5ff;box-shadow:0 0 0 2px #2f8dfb22}
.aacard .aatitle{font-weight:700;font-size:13px;color:#2064c0;margin-bottom:4px}
.aacard .aadesc{font-size:12px;color:var(--ink);line-height:1.6}
.aacard .aaex{font-size:11px;color:#2b5cab;margin-top:6px;line-height:1.5;
  background:#eaf2ff;border-radius:6px;padding:4px 7px}
.aacard .aamyth{font-size:11px;color:#9a6212;margin-top:5px;line-height:1.5;
  background:#fff8e8;border-radius:6px;padding:4px 7px;border:1px solid #f5e3bb}
.aacard .aadoc{font-size:10.5px;color:var(--ink3);margin-top:5px;line-height:1.5;font-style:italic}

/* 效果卡里的内联开关 */
.block.strat .grid.g4 > .inline{align-self:end;padding-bottom:6px}

/* ---------------- 弹窗 / 提示 ---------------- */
.modal{
  position:fixed;inset:0;background:rgba(20,26,40,.42);display:grid;place-items:center;z-index:200;
}
.modal[hidden]{display:none}
.modal-box{
  background:#fff;border-radius:14px;padding:20px;width:400px;max-width:92vw;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.modal-box h3{margin:0 0 14px;font-size:16px}
.modal-box .fld{margin-bottom:11px}
.modal-note{font-size:11px;color:var(--ink3);margin:4px 0 14px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px}

.toast{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);
  background:#232a3a;color:#fff;padding:9px 20px;border-radius:9px;font-size:13px;
  opacity:0;pointer-events:none;transition:.22s;z-index:300;max-width:80vw;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:#b5343a}
.toast.ok{background:#127a48}

/* 顶部持久错误条 */
#fatal-bar{
  display:flex;align-items:center;gap:12px;justify-content:center;
  background:#b5343a;color:#fff;padding:9px 16px;font-size:13px;
  position:sticky;top:0;z-index:400;
}
#fatal-bar .fb-msg{flex:0 1 auto}
#fatal-bar .btn{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff;
}
#fatal-bar .btn:hover{background:rgba(255,255,255,.28)}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c9d1e0;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#adb8cc}
::-webkit-scrollbar-track{background:transparent}

/* 只读部署（星港 /sim/）的提示条。默认 hidden，由 app.js 的 applyReadonly() 打开 */
#ro-note{
  padding:7px 16px;font-size:12.5px;line-height:1.5;color:#8a6d1f;
  background:#fff8e6;border-bottom:1px solid #f0e0b0;
  display:flex;align-items:center;gap:8px;
}
#ro-note[hidden]{display:none}
#ro-note::before{
  content:"只读";flex:none;font-size:11px;letter-spacing:.08em;
  padding:1px 6px;border-radius:3px;background:#e8a013;color:#fff;
}