/* ==========================================================================
   tools/ 工具集三页共用样式
   - 仅新增本页专属类（前缀 tls-），不覆盖 styles.css 的全站组件层 cp-*
   - 计算器是纯前端原生 JS，无第三方依赖、不联网
   ========================================================================== */

/* ---------- 深色首屏（每页仅此一处深色区） ---------- */
.tls-hero{position:relative;padding:calc(var(--envbar-h) + 11rem) 0 9rem;min-height:52rem;color:#f5f6fa;overflow:hidden;background:#002438}
.tls-hero picture{position:absolute;inset:0;z-index:0;display:block}
.tls-hero img{width:100%;height:100%;object-fit:cover;display:block}
.tls-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(1,16,28,.93) 20%,rgba(0,35,56,.66) 58%,rgba(0,36,56,.32))}
.tls-hero .container{position:relative;z-index:2;max-width:860px}
.tls-hero .eyebrow{color:#8fd6dd}
.tls-hero h1{font-size:clamp(26px,4.6vw,50px);font-weight:600;line-height:1.2;margin:1rem 0 1.4rem;color:#f5f6fa}
.tls-hero h1 b{color:#8fd6dd;font-weight:700}
.tls-hero p{color:#e2e4eb;font-size:1.6rem;line-height:1.75;max-width:64rem}

/* ---------- 版式辅助 ---------- */
.tls-narrow{max-width:96rem;margin-inline:auto}
.tls-center{text-align:center}
.tls-center .btn{margin-top:2.4rem}
.tls-lead-note{margin-top:2rem;font-size:1.35rem;line-height:1.75;color:#57768f;border-top:1px dashed var(--line);padding-top:1.6rem}

/* ---------- 工具入口卡片内的“适用 / 输入 / 输出”三行 ---------- */
.tls-card{display:flex;flex-direction:column}
.tls-spec{margin-top:1.6rem;display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.4rem;font-size:1.35rem;line-height:1.7}
.tls-spec dt{font-family:var(--font-mono);font-size:1.15rem;letter-spacing:.06em;color:var(--cyan-ink);padding-top:.25rem;white-space:nowrap}
.tls-spec dd{margin:0;color:#505050}
.tls-card-foot{margin-top:auto;padding-top:1.4rem;border-top:.05rem solid rgba(219,230,238,.8);display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center}
.tls-card-foot .tls-go{font-family:var(--font-mono);font-size:1.25rem;color:var(--cyan-ink);letter-spacing:.04em}

/* ---------- 图文两栏 ---------- */
.tls-duo{display:grid;grid-template-columns:1fr 1fr;gap:3.2rem;align-items:center}
@media(max-width:900px){.tls-duo{grid-template-columns:1fr}}
.tls-duo picture img{width:100%;height:auto;border-radius:var(--radius-card);box-shadow:var(--shadow-card);display:block}

/* ---------- 卡片内次级按钮（浅底描边，不用深色主按钮抢层级） ---------- */
.tls-btn{display:inline-flex;align-items:center;gap:.6rem;padding:1.1rem 2rem;font-size:1.45rem;font-weight:500;line-height:1;border-radius:var(--radius-pill);border:.1rem solid rgba(14,147,163,.32);color:var(--cyan-ink);background:rgba(14,147,163,.06);transition:border-color .15s ease,background-color .15s ease}
.tls-btn:hover{border-color:rgba(14,147,163,.58);background:rgba(14,147,163,.1)}
.tls-btn .tls-arrow{font-weight:700}

/* ---------- 页内互链条 ---------- */
.tls-links{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.4rem}
@media(max-width:900px){.tls-links{grid-template-columns:1fr}}
.tls-link{display:block;border:.05rem solid var(--line);border-radius:var(--radius-tile);padding:1.6rem 1.8rem;background:#fff;transition:border-color .15s ease}
.tls-link:hover{border-color:rgba(14,147,163,.45)}
.tls-link b{display:block;font-size:1.45rem;color:#0a2540}
.tls-link span{display:block;margin-top:.4rem;font-size:1.3rem;line-height:1.6;color:#57768f}

/* ---------- 公式块：页面上可见、可核查 ---------- */
.tls-formula{border:.05rem solid var(--line);border-left:.3rem solid var(--cyan);border-radius:var(--radius-tile);background:#f6fafd;padding:2.2rem 2.4rem;margin-top:2rem}
.tls-formula h3{font-size:1.55rem;font-weight:600;color:#0a2540;margin-bottom:1.4rem}
.tls-formula dl{display:grid;grid-template-columns:auto 1fr;gap:1rem 1.8rem;margin:0}
.tls-formula dt,.tls-formula dd{min-width:0}
@media(max-width:760px){
.tls-formula dl{grid-template-columns:1fr;gap:.3rem 0}
}
.tls-formula dt{font-family:var(--font-mono);font-size:1.25rem;color:var(--cyan-ink);white-space:nowrap;line-height:1.7}
.tls-formula dd{margin:0;font-size:1.35rem;line-height:1.75;color:#505050}
.tls-formula code{font-family:var(--font-mono);font-size:1.22rem;color:#0a2540;background:#fff;border:.05rem solid var(--line);border-radius:.4rem;padding:.1rem .5rem;white-space:nowrap}
.tls-formula .tls-sym{font-family:var(--font-mono);font-size:1.25rem;color:#0a2540}
/* 窄屏：长公式允许折行，避免撑出横向滚动条（必须放在上面基础规则之后） */
@media(max-width:760px){
.tls-formula dt{white-space:normal}
.tls-formula code{white-space:normal;overflow-wrap:anywhere}
}

/* ---------- 计算器 ---------- */
.tls-calc{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start}
.tls-calc > *{min-width:0}
@media(max-width:900px){.tls-calc{grid-template-columns:1fr}}
.tls-panel{border:.05rem solid var(--line);border-radius:var(--radius-card);background:#fff;padding:2.6rem 2.8rem;box-shadow:var(--shadow-card);min-width:0}
@media(max-width:600px){.tls-panel{padding:2rem 1.8rem}}
.tls-panel h2{font-size:1.7rem;font-weight:600;color:#0a2540;margin-bottom:.6rem}
.tls-panel > p{font-size:1.3rem;line-height:1.7;color:#57768f;margin-bottom:1.8rem}
.tls-field{margin-bottom:1.9rem}
.tls-field > label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:1.4rem;color:#0a2540}
.tls-field output{font-family:var(--font-mono);font-weight:600;color:var(--cyan-ink)}
.tls-field input[type=range]{width:100%;margin-top:.9rem;accent-color:var(--cyan)}
.tls-field input[type=number],.tls-field select{width:100%;margin-top:.9rem;padding:.9rem 1.1rem;font-family:inherit;font-size:1.4rem;color:#0a2540;border:.05rem solid var(--line-2);border-radius:.6rem;background:#fff}
.tls-field input[type=number]:focus,.tls-field select:focus{border-color:var(--cyan)}
.tls-hint{display:block;margin-top:.6rem;font-size:1.2rem;line-height:1.65;color:#57768f}
.tls-sub{display:block;margin:2.2rem 0 1.4rem;font-family:var(--font-mono);font-size:1.15rem;letter-spacing:.1em;color:var(--cyan-ink);text-transform:uppercase;border-top:.05rem solid var(--line);padding-top:1.6rem}
.tls-fieldset{border:0;padding:0;margin:0}

/* ---------- 结果 ---------- */
.tls-row{display:flex;justify-content:space-between;gap:1.4rem;padding:1.05rem 0;border-bottom:.05rem solid #edf2f7;font-size:1.42rem;color:#22435c}
.tls-row:last-of-type{border-bottom:none}
.tls-row b{font-family:var(--font-mono);color:#0a2540;text-align:right}
.tls-row .tls-range{font-family:var(--font-mono);color:#0a2540;text-align:right}
.tls-row[hidden],.tls-field[hidden]{display:none}
.tls-total{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;margin-top:1.6rem;padding:1.5rem 1.8rem;border-radius:var(--radius-tile);background:#002438;color:#fff;font-size:1.4rem}
.tls-total b{font-family:var(--font-mono);color:#8fd6dd;font-size:1.65rem;text-align:right;line-height:1.4}
.tls-verdict{margin-top:1.8rem;padding:1.6rem 1.8rem;border:.05rem solid var(--line);border-radius:var(--radius-tile);background:#f6fafd}
.tls-verdict h3{font-size:1.45rem;font-weight:600;color:#0a2540;margin-bottom:.8rem}
.tls-verdict p{font-size:1.35rem;line-height:1.75;color:#505050}
.tls-verdict ul{margin-top:.8rem}
.tls-verdict li{font-size:1.32rem;line-height:1.75;color:#505050;padding-left:1.5rem;position:relative}
.tls-verdict li + li{margin-top:.5rem}
.tls-verdict li:before{content:"";position:absolute;left:0;top:.78rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--cyan)}
.tls-badge{display:inline-block;font-family:var(--font-mono);font-size:1.1rem;letter-spacing:.08em;color:var(--cyan-ink);border:.05rem solid var(--cyan-border);border-radius:.4rem;padding:.25rem .7rem;margin-bottom:1.2rem}
.tls-note{font-size:1.28rem;line-height:1.75;color:#57768f;margin-top:1.8rem;padding-top:1.5rem;border-top:1px dashed var(--line)}

/* ---------- 假设与边界条件 ---------- */
.tls-bounds{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem 2.6rem;margin-top:2.2rem}
@media(max-width:900px){.tls-bounds{grid-template-columns:1fr}}
.tls-bounds li{font-size:1.35rem;line-height:1.8;color:#505050;padding-left:1.6rem;position:relative}
.tls-bounds li:before{content:"";position:absolute;left:0;top:.8rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--cyan)}
.tls-bounds b{color:#0a2540;font-weight:600}

/* ---------- 档位表 ---------- */
.tls-tier-note{margin-top:1.6rem;font-size:1.28rem;line-height:1.75;color:#57768f}
.tls-row-hit{background:rgba(14,147,163,.06)}
.tls-row-hit td{font-weight:600}