*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--brand:#0f2744;--brand-mid:#1a3d6b;--brand-light:#2563a8;--accent:#e8a020;--accent-light:#fef3dc;--surface:#f5f7fa;--surface2:#edf0f5;--border:#d8dde8;--border-soft:#e8ebf2;--text:#111827;--text-mid:#374151;--muted:#6b7c93;--white:#ffffff;--radius-sm:4px;--radius:8px;--radius-lg:12px;--font:'DM Sans',system-ui,sans-serif;--font-mono:'DM Mono',monospace}
body{font-family:var(--font);background:var(--surface);color:var(--text);font-size:14px;min-height:100vh;padding:32px 20px 60px}
.page-wrapper{max-width:860px;margin:0 auto}
.header{background:var(--brand);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:20px 28px;display:flex;align-items:center;gap:18px}
.header img{height:40px;object-fit:contain;filter:brightness(0) invert(1)}
.header-logo-fallback{display:none;color:var(--white);font-size:20px;font-weight:600;letter-spacing:.06em}
.header-sep{width:1px;height:36px;background:rgba(255,255,255,.2)}
.header-meta{display:flex;flex-direction:column;gap:2px}
.header-meta span:first-child{color:rgba(255,255,255,.95);font-size:15px;font-weight:600}
.header-meta span:last-child{color:rgba(255,255,255,.45);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.tabs{background:var(--brand-mid);display:flex;padding:0 28px;gap:4px;border-bottom:3px solid var(--accent)}
.tab{background:transparent;border:none;color:rgba(255,255,255,.55);padding:13px 22px;font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:all .15s;display:flex;align-items:center;gap:8px}
.tab:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.08)}
.tab.active{background:var(--white);color:var(--brand);font-weight:600}
.body{background:var(--white);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:28px}
.panel{display:none}.panel.active{display:block}
.section-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.section-head-bar{width:3px;height:20px;background:var(--accent);border-radius:2px;flex-shrink:0}
.section-head span{font-size:11px;font-weight:600;color:var(--brand-light);text-transform:uppercase;letter-spacing:.1em}
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px}
.type-btn{padding:11px 8px;border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;background:var(--surface);text-align:center;font-family:var(--font);font-size:12px;font-weight:500;color:var(--muted);transition:all .15s;line-height:1.5;display:flex;align-items:center;justify-content:space-between}
.type-btn:hover{border-color:var(--brand-light);color:var(--brand-light);background:#f0f4ff}
.type-btn.active{border-color:var(--brand-light);background:var(--brand-light);color:var(--white)}
.type-icon{display:block;font-size:18px;line-height:1}
.type-tag{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
.type-btn.active .type-tag{color:rgba(255,255,255,.65)}
.diag-oa{display:none;margin-bottom:22px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-soft)}
.diag-oa.active{display:block}
.diag-wt{margin-bottom:22px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-soft)}
.fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.input-row{display:flex;align-items:stretch}
.param-badge{background:var(--brand);color:var(--white);min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-style:italic;border-radius:var(--radius) 0 0 var(--radius);flex-shrink:0}
.field input,.field select{flex:1;height:38px;border:1.5px solid var(--border);border-left:none;padding:0 11px;font-family:var(--font);font-size:13px;color:var(--text);background:var(--white);outline:none;transition:border-color .15s;min-width:0}
.field input:focus{border-color:var(--brand-light)}
.field input.no-rr{border-radius:0}
.field input.rr{border-radius:0 var(--radius) var(--radius) 0}
.unit-sfx{height:38px;background:var(--surface2);border:1.5px solid var(--border);border-left:none;border-radius:0 var(--radius) var(--radius) 0;padding:0 10px;display:flex;align-items:center;font-size:12px;color:var(--muted);font-weight:500;white-space:nowrap}
.full-col{grid-column:1/-1}
.divider{height:1px;background:var(--border-soft);margin:20px 0}
.result-strip{background:var(--brand);border-radius:var(--radius);padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:4px}
.result-main{display:flex;flex-direction:column;gap:4px}
.result-lbl{color:rgba(255,255,255,.55);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.09em}
.result-val{color:var(--white);font-size:34px;font-weight:600;letter-spacing:-.02em;font-family:var(--font-mono)}
.result-unit{color:var(--accent);font-size:16px;font-weight:600}
.result-empty{color:rgba(255,255,255,.3);font-size:15px;font-style:italic;padding:8px 0;display:block}
.formula-box{text-align:right;flex-shrink:0}
.formula-lbl{color:rgba(255,255,255,.35);font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.formula-val{color:rgba(255,255,255,.65);font-size:12px;font-family:var(--font-mono);background:rgba(255,255,255,.08);padding:6px 10px;border-radius:var(--radius-sm);max-width:200px;word-break:break-all}
.transfer-btn{background:var(--accent);border:none;color:var(--brand);font-family:var(--font);font-size:12px;font-weight:700;padding:9px 18px;border-radius:var(--radius);cursor:pointer;margin-top:12px;display:none;transition:background .15s}
.transfer-btn:hover{background:#d4911a}
.info-box{background:#f0f4ff;border-left:3px solid var(--brand-light);border-radius:0 var(--radius) var(--radius) 0;padding:12px 16px;font-size:12.5px;color:var(--brand-mid);line-height:1.65;margin-bottom:22px}
.mat-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.mat-chip{padding:7px 15px;border:1.5px solid var(--border);border-radius:20px;font-family:var(--font);font-size:12px;font-weight:500;cursor:pointer;color:var(--muted);background:var(--white);transition:all .15s}
.mat-chip:hover{border-color:var(--brand-light);color:var(--brand-light)}
.mat-chip.active{border-color:var(--brand-light);color:var(--brand-light);background:#eef3ff;font-weight:600}
.wt-result-strip{background:var(--brand);border-radius:var(--radius);padding:22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:4px}
.wres{display:flex;flex-direction:column;gap:5px}
.wres+.wres{border-left:1px solid rgba(255,255,255,.15);padding-left:20px}
.wres-lbl{color:rgba(255,255,255,.5);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.09em}
.wres-val{color:var(--white);font-size:30px;font-weight:600;font-family:var(--font-mono);letter-spacing:-.02em}
.wres-unit{color:var(--accent);font-size:14px;font-weight:600;margin-left:4px}
.wres-sub{color:rgba(255,255,255,.3);font-size:11px;margin-top:2px}
.type-container{display:inline-block;border:1px solid;margin:10px;width:100px;padding:5px;box-sizing:content-box;flex-shrink:0}
.type-container+div{flex-grow:1}
d:before,o:before{content:'';width:25px;height:5px;display:inline-block;background:#6b7c93;line-height:0;margin:1px 0}
o:before{border-radius:7px}
.type-btn.active d:before,.type-btn.active o:before{background-color:white}
.lh-0{line-height:0}
@media(max-width:540px){
  .type-grid{grid-template-columns:repeat(1,1fr)}
  .fields-grid{grid-template-columns:1fr}
  .wt-result-strip{grid-template-columns:1fr}
  .wres+.wres{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.15);padding-top:16px}
  .result-strip{flex-direction:column;align-items:flex-start}
  .tabs{padding:0 12px}
  .tab{padding:11px 12px;font-size:12px}
  body{padding:16px 12px 40px}
  .header,.body{padding:16px}
}