/* ======================================================================
   555 定时器参数计算器 · 独立设计（PCB 阻焊绿 + 金色走线主题）
   浅色 = 米白丝印面 + 阻焊绿；深色 = 深夜电路板 + 亮金走线
   ====================================================================== */
.tm{
  --ink:#12301f; --sub:#4c6657; --faint:#8aa094;
  --bg:#eef2ea; --card:#ffffff; --card2:#eef4ee; --line:#d3e0d5; --line2:#e2ebe2;
  --pri:#0e7a4a; --pri-2:#159a5f; --pri-soft:#e0f2e8; --pri-ink:#0a5c38;
  --gold:#a8770a; --gold-2:#d4a72c; --gold-soft:#f8efd8;
  --ok:#2e7d46; --warn:#a86a10; --err:#b42323;
  --board:#0c3a26; --trace:#ffd166;
  --r:12px;
  --shadow:0 1px 2px rgba(18,48,31,.07),0 10px 26px rgba(18,48,31,.08);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px; line-height:1.7;
  background:
    radial-gradient(circle at 12px 12px, rgba(14,122,74,.10) 0 3px, transparent 4px) 0 0/48px 48px,
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .tm{
  --ink:#dcefe2; --sub:#9fc0ad; --faint:#6b8a77;
  --bg:#0a140f; --card:#101d16; --card2:#15261d; --line:#24402f; --line2:#1c3326;
  --pri:#34d399; --pri-2:#6ee7b7; --pri-soft:rgba(52,211,153,.12); --pri-ink:#a7f3d0;
  --gold:#d4a72c; --gold-2:#ffd166; --gold-soft:rgba(212,167,44,.12);
  --ok:#6cc78a; --warn:#e3b34f; --err:#f87171;
  --board:#081d13; --trace:#ffd166;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.4);
  background:
    radial-gradient(circle at 12px 12px, rgba(52,211,153,.08) 0 3px, transparent 4px) 0 0/48px 48px,
    var(--bg);
}
.tm *{box-sizing:border-box;}
.tm-wrap{max-width:1140px;margin:0 auto;}
.tm-mono{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}

/* ---------- Hero：PCB 板卡 ---------- */
.tm-hero{margin-top:22px;background:linear-gradient(150deg,var(--board),#0a2b1c);border:1px solid var(--pri);border-radius:var(--r);box-shadow:var(--shadow);padding:24px 28px;position:relative;overflow:hidden;}
.tm-hero:before{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,transparent 0 46px,var(--trace) 46px 47px,transparent 47px 120px),
  linear-gradient(0deg,transparent 0 30px,rgba(255,209,102,.25) 30px 31px,transparent 31px 90px);
  opacity:.16;}
.tm-hero h1{margin:0 0 6px;font-size:clamp(22px,3.4vw,30px);font-weight:900;color:#f2fff7;position:relative;}
.tm-hero p{margin:0;color:#a9d3bc;font-size:14.5px;max-width:780px;position:relative;}
.tm-hero b{color:var(--trace);font-weight:800;}
.tm-fid{position:absolute;right:20px;top:18px;width:34px;height:34px;border-radius:50%;border:6px solid rgba(255,209,102,.5);}

/* ---------- 工作台 ---------- */
.tm-desk{display:grid;grid-template-columns:420px 1fr;gap:18px;margin-top:18px;}
@media (max-width:940px){.tm-desk{grid-template-columns:1fr;}}
.tm-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;}
.tm-card h2{margin:0 0 10px;font-size:16px;font-weight:900;display:flex;align-items:center;gap:8px;}
.tm-card h2 .tm-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--pri);color:#fff;font-size:12px;font-weight:900;}
:root[data-theme="dark"] .tm-card h2 .tm-num{color:#062016;}
.tm-modes{display:flex;gap:8px;margin-bottom:14px;}
.tm-mode{flex:1;border:1px solid var(--line);background:var(--card2);color:var(--sub);border-radius:10px;padding:9px 0;font-size:14px;font-weight:800;cursor:pointer;transition:all .15s;}
.tm-mode.on{background:var(--pri);border-color:var(--pri);color:#fff;}
:root[data-theme="dark"] .tm-mode.on{color:#062016;}
.tm-field{display:grid;grid-template-columns:1fr 110px;gap:8px;margin-bottom:11px;}
.tm-field label{grid-column:1/-1;font-size:13px;font-weight:700;color:var(--sub);margin-bottom:-2px;}
.tm-field input,.tm-field select{padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:14px;outline:none;}
.tm-field input:focus,.tm-field select:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.tm-formula{background:var(--gold-soft);border:1px dashed var(--gold);border-radius:9px;padding:8px 12px;font-size:13px;color:var(--ink);margin-bottom:12px;}
.tm-formula b{color:var(--gold);}
.tm-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.tm-btn{border:none;border-radius:10px;padding:9px 16px;font-size:13.5px;font-weight:800;cursor:pointer;transition:all .15s;}
.tm-btn-go{background:var(--pri);color:#fff;}
:root[data-theme="dark"] .tm-btn-go{color:#062016;}
.tm-btn-go:hover{background:var(--pri-2);}
.tm-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.tm-checks{margin-top:10px;}
.tm-check{font-size:12.5px;border-radius:8px;padding:6px 10px;margin-bottom:6px;font-weight:600;}
.tm-check.ok{background:var(--pri-soft);color:var(--pri-ink);}
.tm-check.warn{background:var(--gold-soft);color:var(--warn);}
.tm-check.err{background:#fbeaea;color:var(--err);}
:root[data-theme="dark"] .tm-check.err{background:rgba(248,113,113,.12);}

/* ---------- 结果 ---------- */
.tm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px;}
.tm-kpi{background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;}
.tm-kpi span{display:block;font-size:12px;color:var(--sub);font-weight:700;}
.tm-kpi b{font-size:20px;font-weight:900;color:var(--pri-ink);font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}
.tm-kpi em{font-style:normal;font-size:12px;color:var(--faint);}
.tm-wave{background:var(--board);border-radius:10px;padding:8px;margin-bottom:12px;}
.tm-wave svg{width:100%;height:auto;display:block;}
.tm-e24{font-size:13px;}
.tm-e24 table{width:100%;border-collapse:collapse;}
.tm-e24 th,.tm-e24 td{border:1px solid var(--line2);padding:5px 9px;text-align:left;font-size:12.5px;}
.tm-e24 th{background:var(--card2);white-space:nowrap;}
.tm-e24 td b{color:var(--gold);}
.tm-msg{margin-top:10px;font-size:13px;min-height:18px;font-weight:700;}
.tm-msg.ok{color:var(--ok);}
.tm-msg.err{color:var(--err);}

/* ---------- FAQ ---------- */
.tm-faq{margin-top:32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);}
.tm-faq h2{margin:0 0 12px;font-size:19px;font-weight:900;}
.tm-faq h3{margin:18px 0 6px;font-size:15.5px;font-weight:800;color:var(--pri-ink);}
.tm-faq p{margin:0;color:var(--sub);font-size:14px;}
.tm-faq p b{color:var(--ink);}