:root { --ink:#18232b; --muted:#697984; --line:#d5dde2; --canvas:#edf1f3; --surface:#fff; --surface-alt:#f6f8f9; --red:#cc0000; --red-soft:#fce9e9; --teal:#007c83; --teal-soft:#e4f4f3; --amber:#a65a00; --amber-soft:#fff4df; --shadow:0 1px 4px rgba(18,35,46,.08); }
    * { box-sizing:border-box; }
    body { margin:0; min-width:320px; background:#dde4e8; color:var(--ink); font-family:Bahnschrift,"DIN Alternate","Trebuchet MS",sans-serif; }
    button,input,select { font:inherit; }
    button { cursor:pointer; }
    button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
    .app { min-height:100vh; max-width:1760px; margin:auto; display:grid; grid-template-rows:minmax(0,1fr) 27px; background:var(--canvas); box-shadow:0 0 28px rgba(18,32,43,.16); }
    .shell { min-height:0; display:grid; grid-template-columns:304px minmax(0,1fr); }
    .controls { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; border-right:1px solid var(--line); background:var(--surface); }
    .brand { display:flex; align-items:center; gap:12px; min-height:58px; padding:13px 19px; border-bottom:3px solid var(--red); background:#fff; }
    .ti-logo { display:block; width:188px; height:25px; object-fit:contain; object-position:left center; }
    .icon-button { display:grid; place-items:center; width:32px; height:32px; border:1px solid #c9d2d8; border-radius:3px; background:var(--surface-alt); color:#40525e; font-size:16px; }
    .icon-button:hover { border-color:var(--red); color:var(--red); }
    #theme-toggle { margin-left:auto; }
    .controls-content { overflow-y:auto; padding:20px 19px 24px; }
    h1 { margin:0; color:#202c34; font-size:19px; line-height:1.08; letter-spacing:0; }
    .subtitle { margin:7px 0 18px; color:#7c8992; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
    .input-section { padding:15px 0 13px; border-top:1px solid #e1e6e9; }
    .section-title { display:flex; justify-content:space-between; margin-bottom:10px; color:#283943; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
    .field { margin-bottom:9px; }
    label { display:flex; justify-content:space-between; margin-bottom:4px; color:#4f606b; font-size:10px; font-weight:700; }
    label span { color:#929ca3; font-weight:600; }
    input,select { width:100%; height:33px; border:1px solid #c7d1d7; border-radius:3px; padding:0 9px; background:var(--surface); color:#1d2a32; font-size:11px; }
    input:hover,select:hover { border-color:#889aa5; }
    input:focus,select:focus { border-color:var(--teal); box-shadow:0 0 0 2px rgba(0,124,131,.12); }
    input:disabled { border-color:#d2dade; background:#e7ecef; color:#7d8991; cursor:not-allowed; opacity:1; }
    .input-row { display:grid; grid-template-columns:1fr 66px; }
    .input-row input { border-radius:3px 0 0 3px; }
    .unit { display:grid; place-items:center; height:33px; border:1px solid #c7d1d7; border-left:0; border-radius:0 3px 3px 0; background:var(--surface-alt); color:#69747b; font-size:9px; font-weight:800; }
    .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 9px; }
    .mode-control { display:flex; align-items:center; justify-content:center; gap:8px; height:30px; margin-bottom:9px; color:#6a777e; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
    .mode-toggle { position:relative; width:42px; height:22px; border:0; border-radius:11px; padding:0; background:#25323a; transition:background .15s ease; }
    .mode-toggle span { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#f4f7f8; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s ease; }
    .mode-toggle.active { background:var(--teal); }
    .mode-toggle.active span { transform:translateX(20px); }
    .mode-note { margin:-4px 0 10px; color:#7a878f; font-size:9px; line-height:1.35; text-align:center; }
    .advanced-link-fields { padding:10px 9px 1px; margin-top:1px; border:1px solid #c6d6d8; border-left:3px solid var(--teal); background:var(--teal-soft); }
    .checkbox-input { display:grid; grid-template-columns:18px 1fr; align-items:center; gap:3px; height:33px; margin:0; border:1px solid #c7d1d7; border-radius:3px; padding:0 9px; background:var(--surface); color:#67747b; font-size:10px; }
    .checkbox-input input { width:14px; height:14px; margin:0; accent-color:var(--teal); }
    .checkbox-input output { justify-self:end; font-weight:800; }
    .checkbox-input.text-value { grid-template-columns:18px minmax(0,1fr); }
    .preset-row { display:grid; grid-template-columns:1fr 1fr 1fr; height:34px; margin-bottom:9px; border:1px solid #cad4da; border-radius:4px; background:#eef2f4; }
    .preset-row button { border:0; background:transparent; color:#6a7379; font-size:9px; font-weight:700; }
    .preset-row button.active { margin:2px; border-radius:2px; background:var(--surface); box-shadow:0 1px 3px rgba(20,33,43,.17); color:var(--red); }
    .reset-button { width:100%; height:33px; border:1px solid #c7d1d7; border-radius:3px; background:var(--surface); color:#455761; font-size:10px; font-weight:800; }
    .reset-button:hover { border-color:var(--red); background:var(--red-soft); color:var(--red); }
    .workspace { min-width:0; min-height:0; display:grid; grid-template-rows:76px minmax(310px,1fr) 272px; gap:12px; padding:16px; }
    .summary { display:grid; grid-template-columns:1.15fr 1fr 1fr 1fr auto; overflow:hidden; border:1px solid var(--line); border-top:3px solid var(--red); background:var(--surface); box-shadow:var(--shadow); }
    .metric { min-width:0; padding:13px 15px; border-right:1px solid #e8ecef; }
    .metric-label { margin-bottom:4px; color:#78858d; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
    .metric-value { overflow:hidden; color:#1c2b34; font-size:18px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
    .metric-value small { color:var(--muted); font-size:10px; font-weight:600; }
    .metric-value.accent { color:var(--teal); }
    .actions { display:flex; align-items:center; gap:7px; padding:0 12px; background:var(--surface-alt); }
    .actions button { height:32px; border:1px solid #c7d1d7; border-radius:3px; background:var(--surface); color:var(--red); font-size:9px; font-weight:800; }
    .actions .export { padding:0 11px; }
    .actions button:hover { border-color:var(--red); background:var(--red-soft); }
    .panel { min-width:0; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
    .diagram-panel { min-height:0; display:grid; grid-template-rows:45px minmax(0,1fr); }
    .panel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 15px; border-bottom:1px solid #e1e6e9; }
    .panel-title { color:#344650; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
    .panel-note { color:#7a878f; font-size:9px; }
    .lane-workspace { min-height:0; display:grid; grid-template-columns:minmax(230px,.7fr) minmax(340px,1.3fr); gap:25px; align-items:center; padding:22px 30px; overflow:auto; background-image:linear-gradient(#eef2f4 1px,transparent 1px),linear-gradient(90deg,#eef2f4 1px,transparent 1px); background-size:24px 24px; }
    .transport { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:15px; }
    .transport-node { min-width:0; border:1px solid #cbd7dc; border-top:3px solid var(--teal); padding:18px; background:var(--surface); box-shadow:0 2px 8px rgba(18,35,46,.09); }
    .node-eyebrow { color:#7c8991; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
    .node-value { margin-top:5px; color:#263740; font-size:19px; font-weight:800; }
    .node-detail { margin-top:4px; color:#74828b; font-size:9px; line-height:1.4; }
    .flow-arrow { color:var(--red); font-size:24px; font-weight:900; }
    .lanes { display:grid; gap:8px; min-width:330px; }
    .lane { display:grid; grid-template-columns:55px minmax(150px,1fr) 100px; align-items:center; gap:10px; min-height:31px; }
    .lane-label { color:#55656f; font-size:9px; font-weight:800; text-transform:uppercase; }
    .lane-track { position:relative; height:9px; overflow:hidden; border:1px solid #bad5d5; background:#e5f0f0; }
    .lane-track::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--teal),#2c9da0); transform-origin:left; animation:lane-in .55s ease-out both; }
    .lane:nth-child(2) .lane-track::after { animation-delay:.05s; }
    .lane:nth-child(3) .lane-track::after { animation-delay:.1s; }
    .lane:nth-child(4) .lane-track::after { animation-delay:.15s; }
    .lane-rate { color:#253640; font-size:10px; font-weight:800; text-align:right; white-space:nowrap; }
    @keyframes lane-in { from { transform:scaleX(0); } to { transform:scaleX(1); } }
    .results { min-height:0; display:grid; grid-template-rows:43px minmax(0,1fr); overflow:hidden; }
    .results-header { display:flex; align-items:flex-end; justify-content:space-between; padding:0 15px; border-bottom:1px solid var(--line); }
    .tabs { display:flex; gap:25px; height:43px; overflow-x:auto; }
    .tab { height:43px; border:0; border-bottom:3px solid transparent; padding:14px 0 0; background:transparent; color:#717d84; font-size:9px; font-weight:800; white-space:nowrap; }
    .tab.active { border-bottom-color:var(--red); color:var(--red); }
    .result-meta { align-self:center; color:#6a7a84; font-size:9px; font-weight:700; }
    .results-content { min-height:0; overflow:auto; }
    table { width:100%; min-width:640px; border-collapse:collapse; table-layout:fixed; font-size:10px; }
    th { height:30px; border-bottom:1px solid var(--line); background:var(--surface-alt); color:#64747e; text-align:left; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
    td { height:31px; border-bottom:1px solid #edf0f2; color:#33444e; }
    th,td { padding:0 13px; }
    tr:hover td { background:#f7fafb; }
    .protocol { display:inline-block; min-width:55px; border-left:3px solid var(--teal); padding-left:7px; font-weight:800; }
    .protocol.legacy { border-left-color:var(--amber); }
    .sysref-grid { display:grid; grid-template-columns:180px repeat(6,minmax(90px,1fr)); min-width:760px; }
    .sysref-grid > div { min-height:43px; display:flex; align-items:center; padding:0 12px; border-right:1px solid #e8ecef; border-bottom:1px solid #e8ecef; color:#344650; font-size:10px; }
    .sysref-grid .grid-header { min-height:30px; background:var(--surface-alt); color:#667680; font-size:8px; font-weight:800; text-transform:uppercase; }
    .sysref-grid .row-label { font-weight:800; }
    .equations { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:16px; }
    .equation { border-left:3px solid var(--teal); padding:8px 12px; background:var(--surface-alt); }
    .equation:nth-child(2n) { border-left-color:var(--amber); }
    .equation-name { margin-bottom:5px; color:#677680; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
    .equation-code { color:#24343d; font-family:Consolas,"Courier New",monospace; font-size:11px; line-height:1.45; }
    .error-state { display:grid; place-items:center; height:100%; min-height:160px; padding:25px; color:#9a2200; text-align:center; }
    footer { display:flex; align-items:center; justify-content:space-between; padding:0 15px; border-top:1px solid var(--line); background:#f4f6f7; color:#6c7b84; font-size:9px; }
    footer strong { color:#344650; }
    .app.dark { --ink:#e4ecef; --muted:#9aabb4; --line:#35444d; --canvas:#111920; --surface:#1b262e; --surface-alt:#202d35; --red-soft:#3a2125; --teal:#59c5c5; --teal-soft:#213b3d; --amber:#efad58; --amber-soft:#3b3022; --shadow:0 1px 4px rgba(0,0,0,.25); }
    .app.dark .controls,.app.dark .panel,.app.dark .summary { border-color:var(--line); background:var(--surface); }
    .app.dark h1,.app.dark .metric-value,.app.dark .node-value,.app.dark .lane-rate,.app.dark .equation-code { color:#eaf1f4; }
    .app.dark .input-section,.app.dark .panel-header,.app.dark .results-header { border-color:var(--line); }
    .app.dark .advanced-link-fields { border-color:#3d6667; background:#1c3538; }
    .app.dark .checkbox-input { border-color:#475963; background:#121b21; color:#cbd7dc; }
    .app.dark label,.app.dark .section-title,.app.dark .panel-title { color:#c2ced4; }
    .app.dark input,.app.dark select,.app.dark .reset-button,.app.dark .icon-button,.app.dark .actions button { border-color:#475963; background:#121b21; color:#dce7eb; }
    .app.dark input:disabled { border-color:#3b4a53; background:#2a353d; color:#8f9da5; }
    .app.dark .unit,.app.dark .actions,.app.dark .preset-row,.app.dark .equation { border-color:#475963; background:var(--surface-alt); }
    .app.dark .preset-row button { color:#aebbc2; }
    .app.dark .preset-row button.active { background:#30404a; color:#ff8585; }
    .app.dark .lane-workspace { background-color:#182229; background-image:linear-gradient(#25323a 1px,transparent 1px),linear-gradient(90deg,#25323a 1px,transparent 1px); }
    .app.dark .transport-node { border-color:#40535d; background:#1b262e; }
    .app.dark .lane-track { border-color:#3d6667; background:#243b3d; }
    .app.dark th,.app.dark .sysref-grid .grid-header { background:var(--surface-alt); color:#a8b7bf; }
    .app.dark td,.app.dark .sysref-grid > div { border-color:#2d3a42; color:#d5e0e4; }
    .app.dark tr:hover td { background:#202d35; }
    .app.dark footer { border-color:var(--line); background:#172128; color:#9aabb4; }
    .app.dark footer strong { color:#d9e4e8; }
    @media (max-width:1050px) { .shell { grid-template-columns:270px minmax(0,1fr); } .workspace { grid-template-rows:auto 370px 270px; padding:12px; } .summary { grid-template-columns:repeat(2,1fr); } .actions { min-height:51px; grid-column:1/-1; justify-content:flex-end; border-top:1px solid var(--line); } .lane-workspace { grid-template-columns:1fr; gap:18px; } }
    @media (max-width:720px) { body { background:var(--canvas); } .shell { display:block; } .controls { display:block; overflow:visible; border-right:0; border-bottom:1px solid var(--line); } .controls-content { overflow:visible; } .workspace { grid-template-rows:auto auto 300px; gap:8px; padding:8px; } .metric { min-height:66px; } .lane-workspace { padding:20px 15px; } .transport { grid-template-columns:1fr; gap:8px; } .flow-arrow { transform:rotate(90deg); justify-self:center; } .lanes { min-width:420px; } .equations { grid-template-columns:1fr; } footer span:last-child { display:none; } }