:root{
  --green:#2e9e5b; --green-l:#e8f6ee; --purple:#7b4fb5;
  --border:#e2e2e2; --text:#2b2b2b; --gray:#888; --bg:#f7f8fa;
}
*{box-sizing:border-box;}
body{
  margin:0;padding:28px 16px;background:var(--bg);color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC",-apple-system,sans-serif;
}
.wrap{max-width:1080px;margin:0 auto;}
h1{font-size:24px;margin:0 0 4px;}
.sub{color:var(--gray);font-size:13px;margin-bottom:18px;}

/* ===== 单位切换开关 ===== */
.unit-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:13px 16px;margin-bottom:24px;
}
.unit-bar .ugroup{display:flex;align-items:center;gap:8px;}
.unit-bar .lbl{font-size:13px;color:#555;}
.switch{
  position:relative;display:inline-flex;background:#eef1f4;
  border-radius:20px;padding:3px;cursor:pointer;user-select:none;
}
.switch span{
  position:relative;z-index:1;padding:5px 14px;font-size:13px;font-weight:600;
  color:#666;border-radius:16px;transition:.18s;
}
.switch span.on{color:#fff;}
.switch i{
  position:absolute;top:3px;left:3px;width:0;height:calc(100% - 6px);
  background:var(--green);border-radius:16px;transition:left .18s,width .18s;z-index:0;
}
.unit-tip{font-size:12px;color:var(--gray);margin-left:auto;}

/* ===== 卡片 ===== */
.card{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:22px 24px;margin-bottom:26px;box-shadow:0 2px 10px rgba(0,0,0,.03);
}
h2{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:18px;color:var(--text);margin:0 0 18px;
  padding-bottom:10px;border-bottom:1px dashed var(--border);
}
h2 .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  background:var(--green-l);color:var(--green);border:1px solid var(--green);
  font-size:12px;font-weight:700;line-height:1;
}
h2 .tag{
  font-size:11px;font-weight:400;color:var(--gray);
  background:#f2f3f5;border-radius:4px;padding:2px 8px;
}
.layout{display:flex;gap:26px;flex-wrap:wrap;}
.col{flex:1;min-width:280px;}
.panel-title{font-size:15px;font-weight:700;margin-bottom:14px;}
.m1 .panel-title{color:var(--green);}
label{display:block;font-size:13px;color:#555;margin-bottom:4px;}
.field{margin-bottom:14px;}
select,input[type=number]{
  width:100%;padding:9px 11px;font-size:15px;border:1px solid var(--border);
  border-radius:7px;background:#fff;color:var(--green);font-weight:600;
}
select:focus,input:focus{outline:none;border-color:var(--green);}
.unit{font-size:12px;color:var(--gray);margin-top:3px;}
.result{
  background:var(--green-l);border:1px dashed var(--green);
  border-radius:8px;padding:16px 18px;margin-top:6px;
}
.result-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.result label{margin:0;font-size:14px;color:#333;font-weight:600;}
.result input{
  width:150px;text-align:center;background:#fff;color:var(--green);font-size:18px;
}
.note{font-size:12px;color:var(--gray);margin-top:14px;line-height:1.7;}
.btn{
  width:100%;padding:11px;margin-top:8px;background:var(--green);color:#fff;
  border:none;border-radius:7px;font-size:15px;cursor:pointer;font-weight:600;
}
.btn:hover{opacity:.9;}
.canvas-box{text-align:center;margin-top:6px;}
canvas{max-width:100%;height:auto;}
.formula{
  background:#fafafa;border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;font-size:13px;line-height:1.9;color:#444;margin-top:10px;
}
.formula code{background:#eef1f4;padding:1px 5px;border-radius:3px;color:#b3392f;}

/* ===== 形状切换 ===== */
.shape-bar{
  display:inline-flex;background:#eef1f4;border-radius:9px;padding:3px;margin-bottom:16px;
}
.shape-bar button{
  border:none;background:transparent;padding:7px 16px;font-size:13px;font-weight:600;
  color:#666;border-radius:7px;cursor:pointer;transition:.18s;
}
.shape-bar button.on{background:var(--green);color:#fff;}
.shape-hint{font-size:12px;color:var(--gray);margin-bottom:14px;min-height:17px;}


.ref-box{
  background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:12px 16px;margin-bottom:14px;font-size:13px;color:#555;line-height:1.7;
}
.ref-box summary{cursor:pointer;font-weight:700;color:var(--purple);font-size:14px;}
.ref-box p{margin:8px 0 0;}
.ref-box table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px;}
table.vt th,table.vt td{border:1px solid var(--border);padding:7px 8px;text-align:center;}
table.vt th{background:var(--green-l);color:#333;}
.vt-note{text-align:left;font-size:12px;color:var(--gray);}
footer{text-align:center;color:var(--gray);font-size:12px;margin-top:20px;line-height:1.8;}
footer a{color:var(--green);text-decoration:underline;}
footer a:hover{color:#258a4d;}

/* ===== 顶部返回首页入口 ===== */
.top-nav{
  display:flex;justify-content:flex-end;align-items:center;gap:10px;
  padding:0 4px 10px;margin-bottom:2px;
}
.top-nav .brand{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--green);font-weight:600;
  text-decoration:none;padding:6px 12px;border-radius:8px;
  border:1px solid transparent;transition:.2s;
}
.top-nav .brand:hover{background:#eaf7ef;border-color:var(--green);}
.top-nav .brand-arrow{font-size:11px;}
.fav-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:13px;font-weight:600;font-family:inherit;
  color:#e8a33d;background:#fff8e1;border:1px solid #f0c36d;
  padding:6px 12px;border-radius:8px;transition:.2s;
}
.fav-btn:hover{background:#fdf0cd;border-color:#e8a33d;}
.fav-btn:active{transform:scale(.97);}

/* ===== 轻提示（Toast） ===== */
.toast{
  position:fixed;left:50%;top:26px;transform:translate(-50%,-16px);
  background:rgba(40,40,40,.94);color:#fff;font-size:13px;line-height:1.6;
  padding:11px 18px;border-radius:9px;max-width:88vw;text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transition:.28s;z-index:9999;pointer-events:none;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}

/* ===== 免责提示条 ===== */
.warn-banner{
  background:#fff8e1;border:1px solid #f0c36d;border-left:4px solid #e8a33d;
  color:#7a5300;border-radius:8px;padding:11px 14px;font-size:13px;line-height:1.8;
  margin:0 0 18px;
}
.warn-banner b{color:#8a5a00;}
.warn-banner a{color:#b06d00;font-weight:700;text-decoration:underline;}

/* ===== 免责声明 ===== */
.disclaimer{
  background:#fafafa;border:1px solid var(--border);border-radius:10px;
  padding:16px 20px;margin-top:26px;font-size:12px;color:#666;line-height:1.85;
}
.disclaimer h2{display:block;font-size:14px;color:#444;margin:0 0 8px;padding-bottom:0;border-bottom:none;}
.disclaimer ol{margin:0;padding-left:20px;}
.disclaimer li{margin-bottom:7px;}
.disclaimer li:last-child{margin-bottom:0;}
.disclaimer b{color:#333;}


/* ===== 新增计算器：通用 ===== */
.hint{font-size:12px;color:var(--gray);margin-top:8px;line-height:1.7;}
.force-type{font-size:13px;font-weight:700;margin-top:10px;}
.force-type.attr{color:var(--green);}
.force-type.repel{color:#e8563a;}
.pct{font-size:12px;color:var(--gray);margin-top:6px;}

/* ===== 磁场衰减曲线 ===== */
.chart-box{text-align:center;margin-top:14px;}
.chart-box canvas{
  width:100%;max-width:560px;height:auto;border:1px solid var(--border);
  border-radius:8px;background:#fff;
}

/* ===== 打印 ===== */
@media print{
  /* 不主动提供打印功能；系统打印仍保留原样 */
  .toast{display:none !important;}
}
@media(max-width:600px){
  .result input{width:100%;}
  .unit-tip{margin-left:0;}
  .switch{flex-wrap:wrap;}
}