.calc{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); margin:30px 0 10px; border:1px solid var(--line); border-radius:18px; background:var(--box); overflow:hidden; }
.calc-in{ padding:22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px; align-content:start; margin:0; }
.fld{ display:grid; gap:6px; align-content:start; min-width:0; }
.fld.full{ grid-column:1/-1; }
.fld label, .fld .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.fld small{ font-size:12px; color:var(--faint); }
.inp{ position:relative; }
.fld input, .fld select{ width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--ink); color:var(--bone); font:400 16px/1 var(--mono); font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.fld input::-webkit-outer-spin-button, .fld input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.inp span + input, .inp input:has(+ span){ padding-right:64px; }
.inp span{ position:absolute; right:12px; top:50%; transform:translateY(-50%); font:12px var(--mono); color:var(--faint); pointer-events:none; }
.fld select{ font-family:var(--body); cursor:pointer; }
.fld input:focus, .fld select:focus{ outline:none; border-color:var(--a2); box-shadow:0 0 0 3px rgba(255,122,80,.18); }
.seg{ position:relative; display:flex; gap:3px; height:44px; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--ink); }
.seg input{ position:absolute; top:0; left:0; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.seg label{ flex:1; display:grid; place-items:center; border-radius:7px; cursor:pointer; font:600 14px var(--body); color:var(--muted); }
.seg input:checked + label{ background:var(--box-hi); box-shadow:inset 0 0 0 1px var(--line); color:var(--bone); }
.seg input:checked + .o-long{ color:var(--go); }
.seg input:checked + .o-short{ color:var(--a3); }
.seg input:focus-visible + label{ outline:2px solid var(--a1); outline-offset:1px; }
.calc-out{ padding:22px; display:grid; gap:14px; align-content:start; border-left:1px solid var(--line); background:linear-gradient(180deg,var(--box-hi),var(--box)); }
.big small{ display:flex; gap:10px; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.big output{ display:block; margin-top:4px; font-family:var(--display); font-weight:700; font-size:clamp(32px,4.6vw,44px); line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--bone); overflow-wrap:anywhere; }
.big.two output{ font-size:clamp(24px,3.2vw,30px); }
.big .sub{ display:block; margin-top:4px; font-size:14px; color:var(--muted); }
.up{ color:var(--go) !important; } .dn{ color:var(--a3) !important; }
.dir{ padding:2px 8px; border:1px solid currentColor; border-radius:999px; letter-spacing:.08em; }
.rows{ margin:0; display:grid; }
.rows div{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:9px 0; border-top:1px solid var(--line-soft); font-size:14px; }
.rows dt{ color:var(--muted); }
.rows dd{ margin:0; text-align:right; font-family:var(--mono); font-size:13px; color:var(--bone); font-variant-numeric:tabular-nums; }
.warn{ margin:0; padding:10px 12px; border:1px solid rgba(255,77,109,.35); border-radius:10px; background:rgba(255,77,109,.08); color:#ffc2cc; font-size:14px; max-width:none; }
.calc-foot{ margin:6px 0 0; font-size:13px; color:var(--faint); max-width:none; }
.formula{ margin:14px 0; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--box); color:var(--bone); font:13.5px/1.7 var(--mono); overflow-x:auto; white-space:pre; }
.tcards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:28px; }
.tcard{ display:grid; gap:6px; align-content:start; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--box); color:var(--bone); text-decoration:none; }
.tcard:hover{ border-color:var(--a2); }
.tcard small{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--a1); }
.tcard b{ font-family:var(--display); font-size:19px; line-height:1.2; }
.tcard span{ font-size:14px; color:var(--muted); }
.fld textarea{ width:100%; min-height:250px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--ink); color:var(--bone); font:13px/1.6 var(--mono); resize:vertical; }
.fld textarea:focus{ outline:none; border-color:var(--a2); box-shadow:0 0 0 3px rgba(255,122,80,.18); }
.acts{ display:flex; flex-wrap:wrap; gap:8px; }
.acts button{ height:36px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--box-hi); color:var(--bone); font:600 13px var(--body); cursor:pointer; }
.acts button:hover{ border-color:var(--a2); }
.gate{ margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; color:var(--muted); max-width:none; }
.gate.pass{ border-color:rgba(126,226,168,.4); background:rgba(126,226,168,.08); color:#c9f3da; }
.gate.watch{ border-color:rgba(255,201,122,.45); background:rgba(255,201,122,.08); color:#ffe2b8; }
.gate.fail{ border-color:rgba(255,77,109,.35); background:rgba(255,77,109,.08); color:#ffc2cc; }
.fig{ margin:0; display:grid; gap:6px; }
.fig figcaption{ font-size:12px; color:var(--faint); }
.chart{ display:block; width:100%; max-width:100%; height:auto; overflow:visible; }
.fld .seg label{ text-transform:none; letter-spacing:0; white-space:nowrap; font:600 13px var(--body); padding:0 6px; }
.chart .grid{ stroke:var(--line-soft); stroke-width:1; }
.chart .ax{ stroke:var(--line); stroke-width:1; }
.chart .diag{ stroke:var(--faint); stroke-width:1; stroke-dasharray:4 4; }
.chart text{ fill:var(--muted); font:10px var(--mono); }
.chart .lb{ fill:var(--bone); }
.chart .pt{ fill:var(--a1); fill-opacity:.85; stroke:var(--ink); stroke-width:1; }
.chart .mk{ fill:var(--go); stroke:var(--ink); stroke-width:1; }
.chart .ln{ fill:none; stroke:var(--a2); stroke-width:2; }
@media (max-width:760px){ .calc{ grid-template-columns:minmax(0,1fr); } .calc-out{ border-left:0; border-top:1px solid var(--line); } .tcards{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:420px){ .calc-in{ grid-template-columns:minmax(0,1fr); } .calc-in, .calc-out{ padding:18px 16px; } }