:root { --ink:#1e2025; --red:#df2027; --navy:#123d72; --line:#d5d5d2; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; min-width:320px; color:var(--ink); background:linear-gradient(rgba(18,61,114,.025) 1px,transparent 1px),#f5f5f4; background-size:100% 32px; font-family:Arial,sans-serif; }
input,select { width:100%; height:42px; border:1px solid #c7c8c5; border-radius:2px; padding:0 11px; background:#fff; color:#1d1f24; font:inherit; }
input { font-family:Consolas,monospace; }
input:focus,select:focus { border-color:var(--red); outline:2px solid rgba(223,32,39,.13); }
.topbar { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:17px max(24px,calc((100vw - 1420px)/2)); border-bottom:4px solid var(--red); background:#fff; position:sticky; top:0; z-index:10; box-shadow:0 1px 0 rgba(0,0,0,.07); }
.header-title span { display:block; color:var(--red); font-size:.68rem; font-weight:800; letter-spacing:.16em; }
.header-title h1 { margin:4px 0 0; color:#17191e; font-size:clamp(1.3rem,2.3vw,1.85rem); font-weight:850; letter-spacing:-.045em; }
.brand-logo { width:168px; height:auto; max-height:64px; object-fit:contain; }
.workspace { max-width:1468px; margin:0 auto; padding:24px 24px 48px; }
.mission-card { display:grid; grid-template-columns:1fr; overflow:hidden; background:#fff; border:1px solid var(--line); border-top:3px solid var(--red); box-shadow:0 5px 18px rgba(28,30,35,.055); }
.mission-inputs,.split-panel { padding:22px 26px; }
.split-panel { border-left:1px solid var(--line); background:#f1f1ef; }
.section-title,.equation-label { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.section-title>div>span,.equation-label small,.split-heading>span,.panel-title>span { color:#7c7d82; font-size:.63rem; font-weight:800; letter-spacing:.13em; }
.section-title h2,.panel-title h2,.equation-card h2 { margin:2px 0 0; color:#202126; font-size:1.08rem; font-weight:780; letter-spacing:-.025em; }
.index,.equation-label>span,.panel-index { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; color:#fff; background:var(--red); font:700 .72rem Consolas,monospace; }
.target-controls { display:grid; grid-template-columns:1fr 1.5fr; gap:14px; }
.mode-toggle { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin-bottom:8px; padding:3px; background:#e8e8e5; border:1px solid #d1d1ce; }
.mode-toggle button { min-height:38px; border:0; background:transparent; color:#676970; font-size:.78rem; font-weight:800; cursor:pointer; }
.mode-toggle button.active { background:#fff; color:var(--red); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.mode-help { margin:0 0 15px; color:#73757b; font-size:.72rem; line-height:1.45; }
.target-controls label>span:first-child { display:block; margin-bottom:7px; color:#4f5158; font-size:.8rem; font-weight:700; }
.flow-input { display:grid; grid-template-columns:minmax(0,1fr) 104px; gap:7px; }
.split-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.split-heading strong { color:var(--navy); font-size:.83rem; }
.split-values { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:16px; margin-top:17px; }
.split-value { display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:9px; }
.split-value>span { font-size:.83rem; font-weight:800; }
.split-value strong { font:700 clamp(1.65rem,3.3vw,2.5rem)/1 Consolas,monospace; text-align:right; letter-spacing:-.06em; }
.split-value small { color:#76787e; font-size:.68rem; }
.oxidizer-value strong,.oxidizer-value>span { color:var(--red); }
.fuel-value strong,.fuel-value>span { color:var(--navy); }
.split-symbol { color:#96979a; padding-bottom:4px; }
.ratio-track { height:6px; display:flex; gap:2px; margin:19px 0 9px; background:#d9dad8; }
.oxidizer-track { width:50%; background:var(--red); transition:width .25s ease; }
.fuel-track { width:50%; background:var(--navy); transition:width .25s ease; }
.ratio-meta { display:flex; justify-content:space-between; gap:20px; color:#6e7076; font:.7rem Consolas,monospace; }
.warning { margin-top:14px; padding:11px 14px; color:#8f191d; border:1px solid #e5b5b7; border-left:4px solid var(--red); background:#fff7f7; font-size:.84rem; }
.competition-warning { border-color:#e3b3b5; background:#fff7f7; font-weight:750; }
.fluid-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.fluid-panel { background:#fff; border:1px solid var(--line); box-shadow:0 5px 18px rgba(28,30,35,.045); }
.fluid-panel.oxidizer { border-top:4px solid var(--red); }
.fluid-panel.fuel { border-top:4px solid var(--navy); }
.panel-heading { min-height:70px; display:grid; grid-template-columns:auto 1fr 132px; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.fuel .panel-index { background:var(--navy); }
.fluid-select { width:132px; font-weight:750; }
.preset-note { min-height:42px; display:flex; align-items:center; gap:10px; padding:8px 18px; border-bottom:1px solid #ddddda; background:#f1f1ef; color:#717278; font-size:.7rem; }
.preset-note strong { color:#202126; font-size:.74rem; }
.flow-model { margin-left:auto; padding-left:10px; border-left:1px solid #c9cac7; color:var(--navy); font-weight:750; }
.status { padding:4px 7px; border:1px solid; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.status.valid { color:#17633b; border-color:#9dc9b0; background:#f2fbf6; }
.status.invalid { color:#98221e; border-color:#dfaaa7; background:#fff5f4; }
.fields { display:grid; grid-template-columns:1fr 1fr; }
.field-row { min-height:82px; padding:13px 17px; border-bottom:1px solid #e1e1de; display:grid; gap:7px; }
.field-row:nth-child(odd) { border-right:1px solid #e1e1de; }
.field-label { display:flex; justify-content:space-between; color:#484a50; font-size:.77rem; font-weight:700; }
.field-label small { color:#85868b; font:500 .7rem Consolas,monospace; }
.field-control { display:grid; grid-template-columns:minmax(0,1fr) 66px; gap:7px; align-items:center; }
.field-control-select { grid-template-columns:minmax(0,1fr) 88px; }
.unit-label { color:#76787e; font-size:.68rem; text-align:center; }
.model-field { align-content:center; background:#f7f7f5; }
.model-field strong { color:var(--navy); font:700 .78rem Consolas,monospace; }
.model-field>span:last-child { color:#818287; font-size:.64rem; }
.analysis-action { margin-top:18px; min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 24px; border:1px solid var(--line); border-left:4px solid var(--red); background:#fff; box-shadow:0 5px 18px rgba(28,30,35,.045); }
.analysis-action>div>span,.result-kicker { color:var(--red); font-size:.64rem; font-weight:850; letter-spacing:.13em; }
.analysis-action h2 { margin:4px 0 5px; color:#202126; font-size:1.13rem; font-weight:800; letter-spacing:-.025em; }
.analysis-action p { margin:0; color:#74767c; font-size:.74rem; line-height:1.5; }
.analyze-button { min-width:164px; min-height:46px; padding:0 22px; border:0; border-radius:2px; background:var(--red); color:#fff; font-weight:850; letter-spacing:.025em; cursor:pointer; }
.analyze-button:hover { background:#c81920; }
.analyze-button:disabled { background:#cacac7; color:#77797e; cursor:not-allowed; }
.analysis-dialog { width:min(1120px,calc(100vw - 32px)); max-width:1120px; max-height:calc(100vh - 32px); overflow-y:auto; padding:0; border:1px solid #c8c8c4; border-radius:4px; background:#f5f5f4; color:var(--ink); box-shadow:0 24px 80px rgba(16,22,31,.28); }
.analysis-dialog::backdrop { background:rgba(20,24,31,.46); backdrop-filter:blur(3px); }
.analysis-dialog-header { position:relative; padding:24px 28px 20px; border-bottom:4px solid var(--red); background:#fff; }
.analysis-dialog-header h2 { margin:5px 0 4px; color:#1c1e23; font-size:1.5rem; font-weight:850; letter-spacing:-.04em; }
.analysis-dialog-header p { margin:0; color:#707279; font:.73rem Consolas,monospace; }
.dialog-close { position:absolute; top:13px; right:15px; width:34px; height:34px; border:0; background:transparent; color:#44464b; font-size:1.45rem; cursor:pointer; }
.result-split { margin:18px; padding:18px 20px 16px; border:1px solid #d7d7d3; background:#eeeeec; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 18px; }
.result-circuit { overflow:hidden; border:1px solid #d3d3cf; background:#fff; }
.result-circuit.oxidizer { border-top:4px solid var(--red); }
.result-circuit.fuel { border-top:4px solid var(--navy); }
.result-circuit-heading { display:flex; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid #ddddda; background:#f7f7f5; }
.result-circuit-heading span { color:#777980; font-size:.63rem; font-weight:850; letter-spacing:.11em; }
.result-circuit-heading strong { color:#202126; font-size:.75rem; }
.result-primary { display:grid; gap:4px; padding:19px 17px 17px; border-bottom:1px solid #ddddda; }
.result-primary>span { color:#74767c; font-size:.68rem; font-weight:700; }
.result-primary>strong { color:#202126; font:800 clamp(1.55rem,3vw,2.2rem) Consolas,monospace; letter-spacing:-.055em; }
.result-circuit.oxidizer .result-primary>strong { color:var(--red); }
.result-circuit.fuel .result-primary>strong { color:var(--navy); }
.result-primary small { color:#85868b; font-size:.65rem; }
.result-metrics { display:grid; grid-template-columns:repeat(3,1fr); margin:0; }
.result-metrics>div { min-width:0; padding:13px 14px; border-right:1px solid #e0e0dd; }
.result-metrics>div:last-child { border-right:0; }
.result-metrics dt { color:#7a7c82; font-size:.61rem; }
.result-metrics dd { margin:4px 0 0; overflow:hidden; color:#25272d; font:750 .83rem Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }
.result-metrics small { color:#85868b; font-size:.62rem; }
.result-schematics { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:14px 18px 18px; }
.result-note { margin:0 18px 18px; padding:11px 14px; color:#785d13; border:1px solid #dfcf9a; border-left:4px solid #c99a13; background:#fffbee; font-size:.72rem; line-height:1.5; }
.competition-result-note { color:#8f191d; border-color:#e5b5b7; border-left-color:var(--red); background:#fff7f7; font-weight:750; }
.fluid-results { display:grid; grid-template-columns:1.35fr 1fr .9fr 1fr; background:#eeeeec; border-top:1px solid #cfcfcb; }
.fluid-results>div { padding:15px 17px; border-right:1px solid #d4d4d1; display:grid; gap:3px; }
.fluid-results>div:last-child { border-right:0; }
.fluid-results span { color:#707177; font-size:.66rem; }
.fluid-results strong { color:#22242a; font:750 1.08rem Consolas,monospace; letter-spacing:-.035em; }
.fluid-results small { color:#898a8f; font-size:.63rem; }
.oxidizer .fluid-results .required strong { color:var(--red); }
.fuel .fluid-results .required strong { color:var(--navy); }
.schematic-card { margin-top:18px; display:grid; grid-template-columns:minmax(190px,.58fr) 1fr 1fr; gap:18px; align-items:stretch; padding:18px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); }
.schematic-intro { padding:8px 7px; align-self:center; }
.schematic-intro>span { color:var(--red); font-size:.64rem; font-weight:800; letter-spacing:.12em; }
.schematic-intro h2 { margin:5px 0 8px; color:#202126; font-size:1.08rem; }
.schematic-intro p { margin:0; color:#73757b; font-size:.72rem; line-height:1.5; }
.circuit-diagram { border:1px solid #ddddda; background:#f7f7f5; }
.diagram-heading { display:flex; justify-content:space-between; gap:12px; padding:9px 12px; border-bottom:1px solid #ddddda; background:#eeeeec; }
.diagram-heading span { color:#77787d; font-size:.62rem; font-weight:800; letter-spacing:.1em; }
.diagram-heading strong { color:#202126; font-size:.7rem; }
.circuit-diagram svg { display:block; width:100%; height:auto; }
.svg-label { font:600 12px Consolas,monospace; }
.svg-meta { fill:#73757b; font:600 11px Consolas,monospace; }
.equation-card { margin-top:18px; display:grid; grid-template-columns:190px minmax(360px,1fr) minmax(280px,.58fr); gap:24px; align-items:center; padding:20px 22px; background:#fff; border:1px solid var(--line); border-left:4px solid var(--red); }
.equation-label { margin:0; }
.equations { display:grid; gap:11px; }
.equations>div { display:grid; grid-template-columns:168px 1fr; align-items:center; gap:12px; }
.equations>div+div { padding-top:11px; border-top:1px solid #dededb; }
.equations>div>span { color:#72747a; font-size:.6rem; font-weight:800; letter-spacing:.08em; }
.equation { color:#23262d; font:1.02rem Georgia,'Times New Roman',serif; white-space:nowrap; }
.equation-card p { margin:0; color:#777980; font-size:.72rem; line-height:1.55; }
.engineering-note { margin:10px 4px 0; color:#6f7177; font-size:.72rem; line-height:1.5; }
.engineering-note strong { color:#8f191d; }
@media(max-width:1120px){.mission-card{grid-template-columns:1fr}.split-panel{border-left:0;border-top:1px solid var(--line)}.fluid-grid{grid-template-columns:1fr}.schematic-card{grid-template-columns:1fr 1fr}.schematic-intro{grid-column:1/-1}.equation-card{grid-template-columns:170px 1fr}.equation-card p{grid-column:1/-1}}
@media(max-width:700px){.topbar{min-height:74px;padding:13px 16px}.header-title span{display:none}.brand-logo{width:122px;max-height:52px}.header-title h1{font-size:1.05rem}.workspace{padding:14px 12px 34px}.mission-inputs,.split-panel{padding:18px 15px}.target-controls,.split-values,.fields{grid-template-columns:1fr}.split-value strong{font-size:1.9rem}.split-symbol{display:none}.panel-heading{grid-template-columns:auto 1fr}.fluid-select{grid-column:1/-1;width:100%}.preset-note{flex-wrap:wrap}.flow-model{margin-left:0}.status{margin-left:auto}.field-row:nth-child(odd){border-right:0}.analysis-action{align-items:stretch;flex-direction:column;padding:18px 16px}.analyze-button{width:100%}.analysis-dialog{width:calc(100vw - 18px);max-height:calc(100vh - 18px)}.analysis-dialog-header{padding:21px 18px 17px}.result-split{margin:12px;padding:15px}.result-grid,.result-schematics{grid-template-columns:1fr;padding-left:12px;padding-right:12px}.result-schematics{padding-top:12px;padding-bottom:12px}.result-note{margin:0 12px 12px}.result-metrics{grid-template-columns:1fr 1fr}.result-metrics>div:nth-child(2){border-right:0}.result-metrics>div:nth-child(3){grid-column:1/-1;border-top:1px solid #e0e0dd;border-right:0}.equation-card{grid-template-columns:1fr;gap:16px}.equations>div{grid-template-columns:1fr;gap:6px}.equation{overflow-x:auto;padding-bottom:4px;font-size:.94rem}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
