/* ============================================================
 * OnHand RF（手边）· 射频衰减器设计器 · 全局样式
 * 设计令牌 → 布局 → 组件 → 状态 → 响应式
 * ============================================================ */
:root{
  --bg:#f6f7f9; --card:#fff; --ink:#171a1f; --ink2:#4a5160; --ink3:#828a98;
  --line:#e3e6eb; --line2:#d0d5dd;
  --accent:#1f6feb; --accent-hover:#1a5fd0; --accent-soft:#eaf2ff;
  --green:#1a7f52; --green-soft:#e6f5ed;
  --amber:#a86400; --amber-soft:#fdf1e0;
  --red:#b3261e; --red-soft:#fceae8;
  --mono:"SFMono-Regular",Consolas,Menlo,monospace;
  --radius:10px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px;line-height:1.6;}
.wrap{max-width:1180px;margin:0 auto;padding:24px 20px 40px;}

/* ---------- 页头页脚 ---------- */
.site-head{position:relative;}
.site-head h1{font-size:22px;margin:0 0 4px;}
.site-head .sub{color:var(--ink3);font-size:12.5px;margin-bottom:18px;}

/* 品牌标识 */
.site-head h1 .brand{color:var(--accent);letter-spacing:.3px;}
.site-head h1 .brand-cn{color:var(--ink3);font-size:13px;font-weight:500;margin-left:7px;
  padding:0 6px;border:1px solid var(--line2);border-radius:4px;vertical-align:1px;}
.site-head h1 .dot{color:var(--line2);font-weight:400;margin:0 9px;}
html[lang="en"] .site-head h1 .brand-cn{display:none;}
.foot-brand{letter-spacing:.2px;}
.site-foot .foot-brand b{color:var(--accent);}
.foot-brand .foot-cn{margin-left:6px;font-size:11px;padding:0 5px;
  border:1px solid var(--line2);border-radius:3px;vertical-align:1px;}
.foot-brand .dot{margin:0 8px;color:var(--line2);}
html[lang="en"] .foot-brand .foot-cn{display:none;}

/* 语言切换 */
.lang{position:absolute;top:0;right:0;display:flex;background:#fff;
  border:1px solid var(--line2);border-radius:6px;overflow:hidden;}
.lang-btn{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--ink3);
  font:inherit;font-size:12px;line-height:1.4;padding:4px 11px;cursor:pointer;}
.lang-btn+.lang-btn{border-left:1px solid var(--line2);}
.lang-btn:hover{color:var(--accent);}
.lang-btn.on{background:var(--accent);color:#fff;}
.lang-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.site-foot{border-top:1px solid var(--line);margin-top:34px;padding:18px 4px 8px;
  color:var(--ink3);font-size:12px;}
.site-foot b{color:var(--ink2);}
.site-foot p{margin:4px 0;}

/* ---------- 页签 ---------- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{padding:9px 16px;border:none;background:none;cursor:pointer;font-size:14px;white-space:nowrap;
  color:var(--ink2);border-bottom:2px solid transparent;font-family:inherit;}
.tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:500;}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.panel{display:none;} .panel.on{display:block;}

/* ---------- 卡片与网格 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:14px;}
.card h3{font-size:14px;margin:0 0 12px;font-weight:600;}
.card h4{font-size:13px;margin:16px 0 8px;font-weight:600;color:var(--ink2);}
.grid{display:grid;gap:10px 14px;}
.g4{grid-template-columns:repeat(4,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}

/* ---------- 表单 ---------- */
label{display:block;font-size:12px;color:var(--ink3);margin-bottom:3px;}
input,select{width:100%;padding:6px 8px;border:1px solid var(--line2);border-radius:6px;
  font-size:13px;font-family:inherit;background:#fff;color:var(--ink);}
input[type=checkbox]{width:auto;accent-color:var(--accent);}
input:focus,select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent);}
input.invalid,select.invalid{border-color:var(--red);background:#fff5f4;}
input.invalid:focus{outline-color:var(--red-soft);}
.field-err{font-size:11.5px;color:var(--red);margin-top:2px;min-height:0;}
button.act{background:var(--accent);color:#fff;border:none;padding:8px 18px;border-radius:6px;
  cursor:pointer;font-size:13px;font-family:inherit;margin-top:12px;transition:background .15s;}
button.act:hover{background:var(--accent-hover);}
button.act:disabled{opacity:.6;cursor:wait;}
button.ghost{background:#fff;color:var(--accent);border:1px solid var(--accent);padding:7px 14px;
  border-radius:6px;cursor:pointer;font-size:13px;font-family:inherit;margin-top:12px;margin-left:8px;}
button.ghost:hover{background:var(--accent-soft);}
.btn-row{display:flex;align-items:center;flex-wrap:wrap;gap:0;}

/* ---------- 表格 ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px;}
table.plain{min-width:0;}
th{background:#f2f4f7;text-align:left;padding:7px 9px;font-weight:600;
  border-bottom:1px solid var(--line);white-space:nowrap;}
td{padding:7px 9px;border-bottom:1px solid var(--line);color:var(--ink2);}
tr:last-child td{border-bottom:none;}
tr.sel{background:var(--accent-soft);}
tr.clickable{cursor:pointer;} tr.clickable:hover{background:#f5f8fd;}

/* ---------- 指标与标签 ---------- */
.mono{font-family:var(--mono);}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.metric{background:#f8f9fb;border-radius:8px;padding:10px 12px;}
.metric .k{font-size:11.5px;color:var(--ink3);}
.metric .v{font-size:18px;font-weight:600;margin-top:2px;font-family:var(--mono);word-break:break-all;}
.metric .u{font-size:11px;color:var(--ink3);font-weight:400;}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:10px;margin-left:5px;white-space:nowrap;}
.tag-best{background:var(--green-soft);color:var(--green);}
.tag-naive{background:var(--amber-soft);color:var(--amber);}
.tag-warn{background:var(--red-soft);color:var(--red);}

/* ---------- 消息条 ---------- */
.msg{padding:9px 12px;border-radius:0 6px 6px 0;font-size:12.5px;color:var(--ink2);margin:10px 0;}
.msg.ok{background:var(--green-soft);border-left:3px solid var(--green);}
.msg.warn{background:var(--amber-soft);border-left:3px solid var(--amber);}
.msg.err{background:var(--red-soft);border-left:3px solid var(--red);}
.hint{font-size:12px;color:var(--ink3);margin-top:6px;}

/* ---------- 空状态与加载态 ---------- */
.empty{border:1.5px dashed var(--line2);border-radius:var(--radius);padding:26px 18px;
  text-align:center;color:var(--ink3);font-size:13px;background:#fbfcfd;}
.empty .ic{font-size:22px;display:block;margin-bottom:6px;}
.loading{display:flex;align-items:center;gap:10px;padding:22px 6px;color:var(--ink3);font-size:13px;}
.spin{width:16px;height:16px;border:2px solid var(--line2);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;flex:none;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- 电路图 ---------- */
.schem{width:100%;max-width:340px;display:block;margin:2px auto;height:auto;}
svg.schem text{font-family:inherit;}

/* ---------- 封装警示芯片 ---------- */
.pkg{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:10px;font-weight:600;white-space:nowrap;}
.pkg-ok{background:var(--green-soft);color:var(--green);}
.pkg-marg{background:var(--amber-soft);color:var(--amber);}
.pkg-bad{background:var(--red-soft);color:var(--red);}

/* ---------- 方案卡片（库存求解） ---------- */
.plan{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px;}
.plan.best{border-color:var(--accent);background:#f8fbff;}
.plan-h{font-size:13px;font-weight:600;margin-bottom:6px;}

/* ---------- 其他 ---------- */
canvas.hist{width:100%;height:190px;display:block;}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:12.5px;padding:8px 16px;border-radius:20px;
  opacity:0;transition:opacity .25s;pointer-events:none;z-index:99;}
.toast.show{opacity:.92;}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .g4,.g3{grid-template-columns:1fr 1fr;}
  .g2{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .wrap{padding:16px 12px 32px;}
  .g4,.g3,.g2{grid-template-columns:1fr;}
  .site-head h1{font-size:19px;}
  .site-head{padding-right:0;}
  .lang{position:static;display:inline-flex;margin-bottom:10px;}
  .card{padding:14px 14px;}
  .metric .v{font-size:16px;}
}

/* ---------- 打印 ---------- */
@media print{
  .tabs,.lang,button.act,button.ghost{display:none;}
  .panel{display:block !important;}
  body{background:#fff;}
}