:root { font-family: "Segoe UI", "Microsoft JhengHei", sans-serif; color: #17202a; background: #eef3f7; }
* { box-sizing: border-box; }
body { margin: 0; }
header { color: white; background: linear-gradient(120deg, #0e4d78, #1579a6); padding: 22px 32px; }
header h1 { margin: 0 0 5px; font-size: 25px; } header p { margin: 0; opacity: .85; }
main { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(560px, 1.35fr); gap: 18px; padding: 18px; max-width: 1280px; margin: auto; }
.panel { background: white; border: 1px solid #d7e0e8; border-radius: 12px; padding: 18px; box-shadow: 0 3px 14px #18344d12; }
.inputs { grid-column: 1; } h2 { margin: 0 0 14px; font-size: 18px; color: #163f5b; }
.fixed { background: #edf7fb; border-left: 4px solid #1591bd; padding: 10px; font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
label { display: block; font-size: 13px; color: #405363; margin: 8px 0 4px; }
input, select, textarea, button { width: 100%; font: inherit; border-radius: 7px; border: 1px solid #aebdca; padding: 8px 10px; }
textarea { height: 130px; resize: vertical; font-family: Consolas, monospace; font-size: 12px; }
.buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.output-buttons { grid-template-columns: 1fr 1fr; }.output-buttons #export { grid-column: 1 / -1; }
button { border: 0; cursor: pointer; color: white; background: #1479a6; font-weight: 600; } button.secondary { color: #14709a; background: #e6f1f6; }
table { width: 100%; border-collapse: collapse; font-size: 14px; } th { color: #526574; background: #f2f6f9; } th, td { padding: 10px; border-bottom: 1px solid #e1e8ee; text-align: center; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 12px; }.verified { background: #def4e7; color: #18733d; }.estimated { background: #fff0cd; color: #8a5b00; }
.note { margin: 12px 0 0; color: #687b89; font-size: 12px; }.error { color: #b42318; min-height: 20px; }
#thermal-chart { width: 100%; height: 280px; }.axis { stroke: #617585; stroke-width: 1.5; }.curve { fill: none; stroke: #147dac; stroke-width: 3; }.point { fill: #147dac; }.value, .axis-label { fill: #516573; font-size: 12px; }
.basic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }.inputs { grid-row: 2; }.fan-tools { grid-column: 1 / -1; }.results { grid-column: 2; grid-row: 2; }.thermal { grid-column: 1 / -1; }.section-heading p { margin: -8px 0 10px; color: #657887; font-size: 13px; }
.engineering-map { grid-column: 1 / -1; grid-row: 1; }.map-heading { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 12px; }.map-heading h2 { margin-bottom: 5px; }.map-heading p { margin: 0; color: #657887; font-size: 13px; }.map-key { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }.map-key span,.field-tag,.output-tag { display: inline-block; border-radius: 5px; padding: 2px 6px; font-size: 11px; font-weight: 700; margin-right: 5px; vertical-align: 1px; }.key-input,.field-tag { background: #dff2fa; color: #08688d; }.key-output,.output-tag { background: #ffe1dc; color: #a7322c; }.key-fixed { background: #e9edf0; color: #4f606b; }.schematic-layout { display: grid; grid-template-columns: minmax(620px, 2.2fr) minmax(260px, .8fr); gap: 18px; align-items: stretch; }.assembly-svg { width: 100%; min-height: 420px; background: linear-gradient(#f9fcfe,#eef5f8); border: 1px solid #cbd9e2; border-radius: 9px; }.assembly-svg text { font-family: "Segoe UI","Microsoft JhengHei",sans-serif; }#fan-assembly { transition: opacity .2s; }#fan-assembly.inactive { opacity: .28; }.fan-opening { fill: #e7eef2; stroke: #617988; stroke-width: 2; }.fan-hub { fill: #253f4f; stroke: #172f3d; stroke-width: 2; }.fan-blade { fill: #456f84; stroke: #294e61; stroke-width: 1.5; }.fan-bracket { fill: none; stroke: #536b79; stroke-width: 7; stroke-linejoin: round; }.bracket-fastener { fill: #263f4e; stroke: #dce5ea; stroke-width: 2; }.fan-wire { fill: none; stroke: #5c3f33; stroke-width: 3; }.air-arrow { fill: none; stroke: #1782ad; stroke-width: 4; marker-end: url(#arrow-blue); }.air-label { fill: #08709a; font-size: 13px; font-weight: 600; }.metal-stroke { stroke: #647987; stroke-width: 2; }#heatsink.copper .metal-stroke { fill: #c7835f; stroke: #81503a; }.part-title { fill: #263c49; font-size: 15px; font-weight: 600; }.part-label,.dim-text { fill: #485e6b; font-size: 13px; }.tim-label { fill: #8a5700; font-size: 12px; font-weight: 700; }.tim-layer { fill: #f2b643; stroke: #a86b00; stroke-width: 1.5; }.insulation { fill: #34424b; stroke: #18242b; stroke-width: 2; }.insulation-label { fill: #fff; font-size: 15px; font-weight: 700; letter-spacing: .4px; }.dimension { stroke: #607987; stroke-width: 1.3; }.heat-arrow { stroke: #d94841; stroke-width: 5; marker-end: url(#arrow-red); }.heat-arrow.thin { stroke-width: 3; }.heat-label { fill: #b82f29; font-size: 15px; font-weight: 700; }.thermocouple { fill: #d94841; stroke: white; stroke-width: 2; }.tc-wire { fill: none; stroke: #d94841; stroke-width: 2.5; }.sensor { fill: #1680a9; stroke: white; stroke-width: 2; }.sensor-wire { stroke: #1680a9; stroke-width: 2.5; }.callout line { stroke-width: 1.5; }.callout circle { stroke-width: 2; }.callout-id { font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }.callout-label { font-size: 13px; font-weight: 700; dominant-baseline: central; }.input-callout line,.input-callout circle { stroke: #0b789f; }.input-callout circle { fill: #e0f4fb; }.input-callout text { fill: #075e7e; }.output-callout line,.output-callout circle { stroke: #bf3a34; }.output-callout circle { fill: #ffe6e2; }.output-callout text { fill: #9c2c27; }.mapping-list { background: #f6f9fb; border: 1px solid #d4e0e7; border-radius: 9px; padding: 12px; }.mapping-list h3 { margin: 3px 0 8px; color: #244a62; font-size: 14px; }.mapping-list h3:not(:first-child) { margin-top: 14px; }.mapping-item { display: grid; grid-template-columns: 47px 1fr; gap: 2px 8px; padding: 7px 0; border-bottom: 1px solid #dfe7ec; font-size: 12px; }.mapping-item b { grid-row: 1 / 3; align-self: center; justify-self: start; background: #dff2fa; color: #08688d; border-radius: 5px; padding: 4px 7px; }.mapping-item strong { color: #526674; font-weight: 600; }.mapping-item.output b { background: #ffe1dc; color: #a7322c; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }.toolbar button { width: auto; padding: 8px 13px; }.pq-layout { display: grid; grid-template-columns: minmax(540px, 1.5fr) minmax(220px, .55fr); gap: 16px; align-items: start; }.table-scroll { overflow-x: auto; border: 1px solid #b9ccda; border-radius: 9px; }.pq-table { margin: 0; }.pq-table th { background: #1f5a82; color: white; }.pq-table td { background: #f4f8fb; padding: 6px; }.pq-table td:first-child { width: 42px; }.pq-table td:nth-child(2) { width: 58px; }.pq-table input[type="number"] { background: #eaf3fa; text-align: right; }.pq-table input[type="radio"] { width: auto; }.fan-parameters { background: #f4f8fb; border-radius: 9px; padding: 12px; }.fan-parameters h3 { margin: 0 0 8px; color: #1f5a82; }.pq-chart-wrap { margin-top: 18px; border-top: 1px solid #dbe4eb; padding-top: 16px; }.pq-chart-wrap h2 { text-align: center; }.pq-chart-wrap svg { width: 100%; max-height: 500px; }.grid { stroke: #d7e1e9; stroke-width: 1; }.tick { fill: #526574; font-size: 11px; }.pq-reference { fill: none; stroke: #297aba; stroke-width: 3; }.pq-reference-point { fill: #f29932; }.pq-estimated { fill: none; stroke: #269a4b; stroke-width: 3; }.pq-estimated-point { fill: #e34e49; }.target-star,.target-inline { fill: #1c84b6; font-size: 25px; }.legend rect { fill: #fff; stroke: #bac8d3; opacity: .94; }.legend text { fill: #334955; font-size: 11px; }.target-inline { font-size: 17px; }.mode-note { display: inline-block; margin: 0 0 10px !important; padding: 7px 10px; border-radius: 7px; background: #fff2cc; color: #795400 !important; font-weight: 600; }
dialog { border: 0; border-radius: 12px; padding: 20px; width: min(560px, 90vw); box-shadow: 0 10px 40px #13293d55; }dialog::backdrop { background: #17324788; }dialog textarea { height: 260px; }
.callout path { fill: none; stroke-width: 1.5; }.input-callout path { stroke: #0b789f; }
.schematic-layout { grid-template-columns: minmax(620px, 3fr) minmax(275px, 1.05fr); align-items: stretch; }.visual-stack { display: grid; gap: 12px; min-width: 0; }.assembly-svg { min-height: 0; display: block; }.embedded-thermal { border: 1px solid #d4e0e7; border-radius: 9px; background: #fbfdfe; padding: 12px 14px 4px; }.embedded-thermal h2 { margin-bottom: 2px; font-size: 16px; }.embedded-thermal #thermal-chart { height: 230px; display: block; }.mapping-list { align-self: stretch; }.fan-tools[hidden] { display: none; }.fan-tools { grid-row: 3; }.inputs,.results { align-self: start; }
@media (max-width: 1000px) { .schematic-layout { grid-template-columns: 1fr; }.assembly-svg { min-height: 0; } }
@media (max-width: 900px) { main { grid-template-columns: 1fr; }.inputs,.results,.thermal,.fan-tools,.engineering-map { grid-column: 1; grid-row: auto; }.basic-grid,.pq-layout { grid-template-columns: 1fr; }.map-heading { flex-direction: column; }.map-key { justify-content: flex-start; } }