:root {
      color-scheme: dark;
      --bg: #08111f; --panel: #101c2e; --panel-2: #14243a; --line: #263a54;
      --surface: #0e1a2a; --surface-soft: #13243d;
      --text: #edf4ff; --muted: #9cb0c9; --accent: #38bdf8; --accent-2: #22d3a3;
      --warning: #fbbf24; --danger: #fb7185; --ok: #34d399; --shadow: 0 16px 45px #02061766;
    }
    * { box-sizing: border-box; }
    body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 90% -10%, #164e6338, transparent 36%), radial-gradient(circle at 5% 5%, #1a2f4f55, transparent 36%), var(--bg); color: var(--text); font: 15px/1.5 "Manrope", "Avenir Next", "Segoe UI", sans-serif; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    .shell { width: min(1380px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 60px; }
    .hidden { display: none !important; }
    .login-wrap { min-height: calc(100vh - 88px); display: grid; place-items: center; }
    .login-card { width: min(430px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, #13233a, #0d1829); box-shadow: var(--shadow); }
    .eyebrow { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    h1, h2, p { margin-top: 0; }
    h1 { margin-bottom: 6px; font-size: clamp(25px, 4vw, 36px); letter-spacing: -.035em; }
    .muted { color: var(--muted); }
    label { display: grid; gap: 7px; margin: 18px 0; color: #c8d6e8; font-weight: 650; }
    input { width: 100%; padding: 12px 14px; color: var(--text); background: #081321; border: 1px solid var(--line); border-radius: 11px; outline: none; }
    input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #38bdf826; }
    .button { padding: 10px 15px; color: #04121c; background: var(--accent); border: 0; border-radius: 10px; font-weight: 800; }
    .button.secondary { color: var(--text); background: var(--panel-2); border: 1px solid var(--line); }
    .button:disabled { cursor: wait; opacity: .65; }
    .login-card .button { width: 100%; margin-top: 8px; padding: 13px; }
    .error-box { margin-top: 15px; padding: 11px 13px; color: #fecdd3; background: #88133740; border: 1px solid #fb718555; border-radius: 10px; }
    .dashboard-loading { display: grid; justify-items: center; gap: 12px; margin: 18px 0 24px; padding: 34px 20px; border: 1px solid var(--line); border-radius: 15px; color: var(--muted); background: var(--panel); text-align: center; }
    .dashboard-loading-spinner { width: 42px; height: 42px; border: 4px solid #ffffff1f; border-top-color: var(--accent); border-radius: 50%; animation: dashboard-loading-spin .85s linear infinite; }
    .dashboard-loading strong { color: var(--text); font-size: 17px; }
    .dashboard-loading p { max-width: 520px; margin: -5px 0 0; }
    @keyframes dashboard-loading-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .dashboard-loading-spinner { animation: none; } }
    .submit-panel { margin-bottom: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
    .submit-panel form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
    .submit-panel label { flex: 1 1 360px; margin: 0; }
    .client-start { display: grid; gap: 16px; }
    .client-balance { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
    .client-balance span { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .client-balance strong { font-size: 32px; font-variant-numeric: tabular-nums; }
    #clientAnalyzeForm { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--line); }
    .submit-status { width: 100%; margin-top: 2px; color: var(--muted); }
    .submit-status.error { color: #fecdd3; }
    .submit-status.success { color: #bbf7d0; }
    .azure-warning { margin: 0 0 14px; padding: 11px 13px; color: #fde68a; background: #713f1244; border: 1px solid #fbbf2466; border-radius: 10px; }
    .azure-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
    .azure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
    .azure-card { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #081321; }
    .azure-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .azure-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .azure-jobs { overflow-x: auto; margin-top: 14px; }
    .azure-create { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 14px; }
    .azure-create label { flex: 1 1 280px; margin: 0; }
    .download-details { display: grid; gap: 7px; margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #081321; }
    .download-details code { overflow-wrap: anywhere; color: #bae6fd; }
    .download-steps { margin: 12px 0 16px; padding-left: 22px; color: #c8d6e8; }
    .topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
    .brand { display: grid; gap: 6px; }
    .toolbar { flex: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
    .toolbar .button { margin: 0; white-space: nowrap; }
    .manager-actions { display: contents; }
    .live { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
    .live::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--ok); box-shadow: 0 0 0 5px #34d39916; }
    .summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
    .summary-card { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #0f1c2dce; box-shadow: 0 8px 28px #02061735; }
    .summary-card .label { color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
    .summary-card .value { margin-top: 5px; font-size: 27px; font-weight: 800; letter-spacing: -.03em; }
    .summary-card .detail { margin-top: 5px; color: var(--muted); font-size: 12px; }
    .client-scope .summary-card { position: relative; overflow: hidden; }
    .client-scope .summary-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ''; background: var(--accent); }
    .client-scope .summary-card:nth-child(3)::before { background: #a78bfa; }
    .client-scope .summary-card:nth-child(4)::before { background: #38bdf8; }
    .client-scope .summary-card:nth-child(5)::before { background: #34d399; }
    .capacity-card { grid-column: 1 / -1; }
    .node-capacity { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
    .node-capacity-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #081321; }
    .node-capacity-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
    .node-capacity-item strong { display: block; }
    .node-capacity-item span { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .node-state { flex: 0 0 auto; padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px !important; font-weight: 850; letter-spacing: .06em; line-height: 1.5; }
    .node-state.ok { color: #bbf7d0; border-color: #34d39966; background: #064e3b66; }
    .node-state.busy { color: #bae6fd; border-color: #38bdf866; background: #0c4a6e66; }
    .node-state.warning { color: #fde68a; border-color: #fbbf2466; background: #713f1266; }
    .node-state.danger { color: #fecdd3; border-color: #fb718566; background: #88133766; }
    .node-state.unknown { color: var(--muted); }
    .schedule-panel { margin-bottom: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #0f1c2dce; box-shadow: 0 8px 28px #02061735; }
    .schedule-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
    .schedule-head h2 { margin: 0; font-size: 19px; }
    .schedule-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; color: var(--muted); font-size: 12px; }
    .schedule-legend span { display: inline-flex; align-items: center; gap: 6px; }
    .schedule-legend i { width: 18px; height: 8px; border-radius: 4px; background: var(--accent); }
    .schedule-legend i.today { height: 14px; background: #fb718533; border: 1px solid #fb718588; }
    .schedule-legend i.now { width: 1px; height: 14px; margin: 0 8px; border-radius: 0; background: #fde04799; box-shadow: 0 0 4px #fde04740; }
    .schedule-scroll { overflow-x: auto; padding-bottom: 5px; }
    .schedule-chart { min-width: 0; --schedule-label-width: 108px; --schedule-column-gap: 8px; }
    .schedule-axis, .schedule-row { display: grid; grid-template-columns: var(--schedule-label-width) minmax(620px, 1fr); gap: var(--schedule-column-gap); }
    .schedule-axis { margin-bottom: 6px; color: var(--muted); font-size: 11px; }
    .schedule-axis-track, .schedule-track { position: relative; }
    .schedule-axis-track { height: 52px; border-bottom: 1px solid var(--line); }
    .schedule-week { position: absolute; top: 0; height: 25px; padding: 3px 6px; overflow: hidden; border-left: 1px solid #38bdf877; color: #bae6fd; font-weight: 750; white-space: nowrap; }
    .schedule-day { position: absolute; bottom: 0; height: 27px; padding-top: 5px; border-left: 1px solid #263a5488; color: var(--muted); text-align: center; white-space: nowrap; }
    .schedule-day.weekend { background: #ffffff08; }
    .schedule-node { margin: 15px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line); color: #dbeafe; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
    .schedule-row { min-height: 54px; align-items: center; }
    .schedule-label strong, .schedule-label span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .schedule-label span { color: var(--muted); font-size: 11px; }
    .schedule-track { height: 28px; border-radius: 7px; background: #081321; box-shadow: inset 0 0 0 1px #263a5466; }
    .schedule-bar { position: absolute; z-index: 2; top: 4px; height: 20px; min-width: 3px; border-radius: 5px; background: var(--node-color, var(--accent)); box-shadow: 0 3px 10px #02061788; }
    .schedule-bar.open { background: repeating-linear-gradient(135deg, var(--node-color, var(--accent)) 0 7px, #ffffff22 7px 11px); }
    .schedule-day-grid { position: absolute; z-index: 0; top: 0; bottom: 0; border-left: 1px solid #263a5466; pointer-events: none; }
    .schedule-day-grid.weekend { background: #ffffff08; }
    .schedule-today-band { position: absolute; z-index: 1; top: 0; bottom: 0; background: #fb71851f; border-left: 1px solid #fb718588; border-right: 1px solid #fb718588; pointer-events: none; }
    .schedule-now-line { position: absolute; z-index: 3; top: 0; bottom: 0; width: 1px; background: #fde04799; box-shadow: 0 0 4px #fde04740; pointer-events: none; }
    .schedule-empty { padding: 14px; color: var(--muted); text-align: center; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
    .section-head h2 { margin-bottom: 0; font-size: 19px; }
    .updated { color: var(--muted); font-size: 13px; }
    .jobs { display: grid; gap: 14px; }
    .job { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg, #101e31, #0d1828); box-shadow: 0 8px 28px #02061735; }
    .job.azure-job { border-color: #38bdf84d; background: linear-gradient(145deg, #111d31, #0b1626 62%, #0d2230); box-shadow: 0 14px 38px #02061766, 0 0 0 1px #38bdf80a; }
    .job.azure-job .job-head { background: linear-gradient(90deg, #16243a, #102331 70%, #12322955); }
    .job.azure-job .resource-group { background: linear-gradient(145deg, #8b5cf60d, transparent 72%); }
    .job.azure-job .progress-group { background: linear-gradient(145deg, #38bdf80c, transparent 72%); }
    .job.azure-job .cost-group { background: linear-gradient(145deg, #34d39911, transparent 72%); }
    .job.azure-job .resource-group .group-title { color: #c4b5fd; }
    .job.azure-job .progress-group .group-title { color: #7dd3fc; }
    .job.azure-job .cost-group .group-title { color: #6ee7b7; }
    .job.azure-job .kv dd { overflow-wrap: anywhere; }
    .job.error { border-color: #fb718577; }
    .job.warning { border-color: #fbbf245e; }
    .job-head { display: flex; justify-content: space-between; gap: 16px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
    .job-head-actions { display: flex; align-items: center; gap: 9px; }
    .job-action { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel-2); font-weight: 750; }
    .job-action.stop { border-color: #fb718566; color: #fecdd3; }
    .job-action.cancel { border-color: #fbbf2466; color: #fde68a; }
    .job-action.launch { border-color: #34d39966; color: #bbf7d0; }
    .job-action.delete { border-color: #fb718566; color: #fecdd3; }
    .job-action:disabled { cursor: wait; opacity: .55; }
    .action-pending { color: var(--muted); font-size: 12px; font-weight: 750; }
    .job-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .job-title h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
    .job-id { color: var(--muted); font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
    .badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 99px; color: #bbf7d0; background: #064e3b80; font-size: 11px; font-weight: 850; letter-spacing: .05em; }
    .badge.pending { color: #fde68a; background: #78350f88; }
    .badge.other { color: #cbd5e1; background: #334155; }
    .health { width: 10px; height: 10px; margin-top: 7px; border-radius: 99px; background: var(--ok); box-shadow: 0 0 0 5px #34d39913; }
    .warning .health { background: var(--warning); box-shadow: 0 0 0 5px #fbbf2413; }
    .error .health { background: var(--danger); box-shadow: 0 0 0 5px #fb718513; }
    .job-body { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 0; }
    .group { min-width: 0; padding: 18px 19px; border-right: 1px solid var(--line); }
    .group:last-child { border-right: 0; }
    .group-title { margin-bottom: 12px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; margin: 0; }
    .kv dt { color: var(--muted); }
    .kv dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
    .meter { height: 7px; margin: 13px 0 5px; overflow: hidden; background: #07101c; border-radius: 99px; }
    .meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: inherit; }
    .meter.high span { background: linear-gradient(90deg, var(--warning), var(--danger)); }
    .history-chart { display: block; width: 100%; height: 54px; margin-top: 10px; border: 1px solid #263a5488; border-radius: 7px; background: #081321; }
    .history-chart polyline { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
    .history-chart.warning polyline { stroke: var(--warning); }
    .diagnostic-details { margin-top: 13px; border: 1px solid var(--line); border-radius: 9px; background: #08132188; }
    .diagnostic-details > summary { padding: 9px 11px; }
    .diagnostic-details > .kv { padding: 0 11px 12px; }
    .diagnostic-details .history-chart { width: calc(100% - 22px); margin-right: 11px; margin-left: 11px; }
    .diagnostic-details > .muted { display: block; padding: 0 11px 11px; }
    .alerts { margin: 0; padding: 13px 19px 14px 38px; color: #fde68a; background: #78350f29; border-top: 1px solid #fbbf2438; }
    .error .alerts { color: #fecdd3; background: #88133728; border-color: #fb718544; }
    details { border-top: 1px solid var(--line); }
    summary { padding: 12px 19px; color: var(--muted); cursor: pointer; user-select: none; }
    .process-wrap { overflow-x: auto; padding: 0 19px 16px; }
    .file-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 19px 16px; }
    .file-link { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--accent); background: #081321; }
    .modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 22px; background: #020617cc; }
    .modal-card { display: flex; flex-direction: column; width: min(1100px, 100%); max-height: calc(100vh - 44px); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
    .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
    .modal-head h2 { margin: 0; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
    .modal-body { min-height: 0; overflow: auto; padding: 18px; }
    .modal-actions { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--line); }
    .file-editor { display: block; width: 100%; min-height: min(65vh, 720px); resize: vertical; padding: 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: #06101d; font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
    .file-editor[readonly] { color: #cbd5e1; }
    .chart-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 14px; }
    .chart-tools > label { flex: 1 1 320px; margin: 0; }
    .chart-tools select { width: 100%; padding: 10px 12px; color: var(--text); background: #081321; border: 1px solid var(--line); border-radius: 9px; }
    .csv-criterion-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
    .csv-criterion-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 7px 10px; border: 1px solid #ef444466; border-radius: 9px; color: #fecaca; background: #7f1d1d33; cursor: pointer; }
    .csv-criterion-toggle input { width: 17px; height: 17px; margin: 0; accent-color: #ef4444; }
    .csv-criterion-toggle:has(input:disabled) { cursor: default; opacity: .5; }
    .csv-criterion-field { min-width: 190px; margin: 0; color: #c8d6e8; font-size: 12px; }
    .csv-criterion-input { display: flex; align-items: center; min-height: 40px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #081321; }
    .csv-criterion-input input { width: 128px; min-width: 0; padding: 9px 10px; color: var(--text); background: transparent; border: 0; outline: 0; font-variant-numeric: tabular-nums; }
    .csv-criterion-unit { min-width: 50px; padding: 0 10px 0 2px; color: var(--muted); font-weight: 800; white-space: nowrap; }
    .chart-wrap { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #06101d; }
    #csvCanvas, #ventilationCanvas { display: block; width: 100%; height: auto; aspect-ratio: 20 / 9; background: #fff; }
    .file-status { flex: 1; color: var(--muted); font-size: 13px; }
    .slice-render-card { width: min(1380px, 100%); }
    .slice-render-card form { display: flex; flex: 1 1 auto; min-height: 0; }
    .slice-render-card .modal-body { flex: 1 1 auto; min-width: 0; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .slice-render-layout { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: 16px; align-items: start; }
    .slice-render-controls { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #081321; }
    .slice-render-controls label { margin: 0 0 14px; }
    .slice-render-controls select, .slice-render-controls input { width: 100%; padding: 10px 12px; color: var(--text); background: #06101d; border: 1px solid var(--line); border-radius: 9px; }
    .slice-render-controls select:focus, .slice-render-controls input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px #38bdf826; }
    .slice-render-bounds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .slice-render-toggle { display: flex; align-items: center; gap: 9px; color: #c8d6e8; font-size: 13px; }
    .slice-render-controls .slice-render-toggle input { width: auto; margin: 0; accent-color: var(--accent); }
    .smokeview-defaults-card { width: min(1260px, 100%); }
    .smokeview-defaults-intro { margin-bottom: 14px; }
    .smokeview-defaults-grid { display: grid; gap: 8px; min-width: 900px; }
    .smokeview-defaults-scroll { overflow-x: auto; }
    .smokeview-defaults-row { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(90px, .65fr) minmax(90px, .65fr) minmax(170px, 1.25fr) minmax(135px, .9fr) minmax(210px, 1.35fr); gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #081321; }
    .smokeview-defaults-row.header { color: var(--muted); background: transparent; border: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; }
    .smokeview-defaults-row input, .smokeview-defaults-row select { width: 100%; padding: 9px 10px; color: var(--text); background: #06101d; border: 1px solid var(--line); border-radius: 8px; }
    .smokeview-defaults-quantity { overflow-wrap: anywhere; font-weight: 750; }
    .smokeview-defaults-highlights { display: grid; gap: 5px; }
    .smokeview-defaults-highlights label { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; }
    .smokeview-defaults-highlights input { width: auto; accent-color: var(--accent); }
    .production-warning { padding: 13px 14px; color: #fde68a; background: #713f1238; border: 1px solid #fbbf2466; border-radius: 10px; }
    .performance-criteria-card { width: min(1380px, 100%); }
    .performance-project-tools { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 16px; align-items: end; margin-bottom: 15px; }
    .performance-project-tools label { margin: 0; }
    .performance-project-tools select { width: 100%; padding: 10px 12px; color: var(--text); background: #06101d; border: 1px solid var(--line); border-radius: 9px; }
    .performance-scenarios { display: flex; flex-wrap: wrap; gap: 7px; }
    .performance-scenario { padding: 5px 9px; border: 1px solid #34d39966; border-radius: 999px; color: #bbf7d0; background: #064e3b55; font-size: 12px; }
    .performance-scenario.incomplete { color: #fde68a; border-color: #fbbf2466; background: #713f1244; }
    .performance-criteria-scroll { overflow-x: auto; }
    .performance-criteria-grid { display: grid; gap: 10px; min-width: 860px; }
    .performance-criterion-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #081321; }
    .performance-criterion-fields { display: grid; gap: 10px; }
    .performance-criterion-main { display: grid; grid-template-columns: minmax(260px, 1.6fr) minmax(110px, .5fr) minmax(145px, .65fr) minmax(120px, .55fr); gap: 10px; align-items: end; }
    .performance-criterion-fields label { margin: 0; color: var(--muted); font-size: 12px; font-weight: 750; }
    .performance-criterion-slice { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.7fr); gap: 10px; align-items: end; }
    .performance-scenario-slices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
    .performance-threshold-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; }
    .performance-threshold-unit { color: #bae6fd; font-size: 12px; font-weight: 800; }
    .performance-code { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #38bdf866; border-radius: 10px; color: #bae6fd; background: #0c4a6e55; font-weight: 900; }
    .performance-criterion-row textarea, .performance-criterion-row input, .performance-criterion-row select { width: 100%; padding: 9px 10px; color: var(--text); background: #06101d; border: 1px solid var(--line); border-radius: 8px; }
    .performance-criterion-row textarea { min-height: 58px; resize: vertical; }
    .performance-status { flex: 1 1 420px; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #081321; }
    .performance-status.error { color: #fecdd3; border-color: #fb718566; background: #7f1d1d44; }
    .performance-status.success { color: #bbf7d0; border-color: #34d39966; background: #064e3b55; }
    .egress-card { width: min(1180px, 100%); }
    .egress-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
    .egress-intro p { margin: 0; }
    .egress-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
    .egress-led-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 10px; border: 1px solid #fb923c66; border-radius: 9px; color: #fed7aa; background: #7c2d1244; font-weight: 800; cursor: pointer; }
    .egress-led-toggle input { width: 17px; height: 17px; margin: 0; accent-color: #f97316; }
    .egress-led-toggle small { color: #fdba74; font-size: 11px; font-weight: 700; }
    .egress-led-toggle:has(input:disabled) { cursor: default; opacity: .6; }
    .egress-rset-button { border-color: #fbbf2466; color: #fef3c7; background: #78350f55; }
    .egress-rset-editor { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: -3px 0 15px; padding: 12px; border: 1px solid #fbbf2455; border-radius: 11px; background: #78350f26; }
    .egress-rset-editor label { flex: 1 1 300px; color: #fde68a; font-size: 12px; font-weight: 850; }
    .egress-rset-editor input { width: 100%; margin-top: 6px; padding: 9px 10px; color: var(--text); background: #06101d; border: 1px solid #fbbf2466; border-radius: 8px; }
    .egress-rset-analysis { margin: 0 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #081321; }
    .egress-rset-analysis-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 13px; }
    .egress-rset-analysis-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
    .egress-rset-result { padding: 5px 9px; border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 900; }
    .egress-rset-result.safe { color: #bbf7d0; border-color: #34d39966; background: #064e3b55; }
    .egress-rset-result.danger { color: #fecdd3; border-color: #fb718566; background: #7f1d1d55; }
    .egress-rset-result.neutral { color: #dbeafe; border-color: #60a5fa66; background: #1e3a5f55; }
    #egressRsetChart { display: block; width: 100%; height: auto; aspect-ratio: 80 / 23; background: #fff; }
    .egress-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr); gap: 16px; align-items: start; }
    .egress-panel { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #081321; }
    .egress-building { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 11px 13px; border: 1px solid #38bdf866; border-radius: 11px; color: #dbeafe; background: #0c4a6e44; font-size: 17px; font-weight: 850; }
    .egress-building::before { content: "▾"; color: var(--accent); }
    .egress-floor { margin: 0 0 10px 22px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
    .egress-floor-head { display: flex; align-items: center; gap: 8px; padding: 10px 11px; border-bottom: 1px solid var(--line); }
    .egress-floor-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .egress-small-action { display: inline-grid; place-items: center; min-width: 31px; height: 30px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--panel-2); font-weight: 800; }
    .egress-small-action.danger { color: #fecdd3; border-color: #fb718566; }
    .egress-small-action:disabled { cursor: default; opacity: .4; }
    .egress-dropzone { display: grid; gap: 8px; min-height: 58px; padding: 10px; transition: border-color .15s, background .15s; }
    .egress-dropzone.drag-over { background: #0c4a6e55; box-shadow: inset 0 0 0 2px #38bdf888; }
    .ventilation-list { transition: border-color .15s, background .15s; }
    .ventilation-list.drag-over { background: #0c4a6e55; box-shadow: inset 0 0 0 2px #38bdf888; }
    .egress-device { display: grid; grid-template-columns: minmax(0, 1fr) minmax(125px, .55fr); gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid #334b67; border-radius: 9px; background: #12223a; }
    .egress-device[draggable="true"] { cursor: grab; }
    .egress-device[draggable="true"]:active { cursor: grabbing; }
    .egress-device.dragging, .ventilation-device.dragging { opacity: .48; box-shadow: 0 8px 22px #02061788; }
    .egress-device strong, .egress-device > div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .egress-device > div > span { color: var(--muted); font-size: 12px; }
    .egress-device strong .aset-value { display: inline; color: #fde68a; font-size: inherit; }
    .egress-device select { width: 100%; padding: 7px 8px; color: var(--text); background: #06101d; border: 1px solid var(--line); border-radius: 7px; }
    .egress-unassigned .egress-device { grid-template-columns: 1fr; }
    .egress-unassigned .egress-device strong { overflow: visible; text-overflow: clip; white-space: normal; }
    .egress-empty { display: grid; min-height: 38px; place-items: center; color: var(--muted); border: 1px dashed #334b67; border-radius: 8px; font-size: 12px; text-align: center; }
    .egress-warning { margin: 8px 10px 10px; color: #fde68a; font-size: 12px; }
    .aset-value { color: #fde68a; }
    .aset-baseline { color: #cbd5e1; }
    .aset-led { color: #fb923c; font-weight: 900; }
    .ventilation-card { width: min(1260px, 100%); }
    .ventilation-intro { margin-bottom: 10px; }
    .ventilation-intro p { margin: 0; }
    .ventilation-selector { padding-top: 15px; border-top: 1px solid var(--line); }
    .ventilation-selector-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .ventilation-selector-head .group-title { margin-bottom: 4px; }
    .ventilation-selector-head p { margin: 0; }
    .ventilation-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
    .ventilation-mode-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 10px; border: 1px solid #38bdf866; border-radius: 9px; color: #bae6fd; background: #0c4a6e44; font-weight: 800; cursor: pointer; }
    .ventilation-mode-toggle input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
    .ventilation-mode-toggle small { color: var(--muted); font-size: 11px; font-weight: 700; }
    .ventilation-mode-toggle:has(input:disabled) { cursor: default; opacity: .6; }
    .ventilation-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
    .ventilation-panel { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #081321; }
    .ventilation-panel.inlets { border-color: #00b45a66; }
    .ventilation-panel.outlets { border-color: #00aeef66; }
    .ventilation-list { display: grid; gap: 8px; min-height: 58px; }
    .ventilation-device { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .65fr); gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid #334b67; border-radius: 9px; background: #12223a; }
    .ventilation-device[draggable="true"] { cursor: grab; }
    .ventilation-device[draggable="true"]:active { cursor: grabbing; }
    .ventilation-device strong, .ventilation-device span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ventilation-device span { color: var(--muted); font-size: 11px; }
    .ventilation-device select { width: 100%; padding: 7px 8px; color: var(--text); background: #06101d; border: 1px solid var(--line); border-radius: 7px; }
    .ventilation-chart { width: min(1062px, 100%); margin: 0 auto 18px; }
    .ventilation-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 9px; }
    .ventilation-chart-head .group-title { margin: 0 auto 0 0; }
    .ventilation-latest { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
    .ventilation-latest span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: #c8d6e8; background: #081321; font-size: 12px; }
    .ventilation-latest .outlet { border-color: #00aeef66; }
    .ventilation-latest .inlet { border-color: #00b45a66; }
    .button.danger { color: #fff1f2; background: #9f1239; border: 1px solid #fb718588; }
    .slice-ini-note { margin-top: 16px; padding: 12px; border: 1px solid #38bdf844; border-radius: 10px; color: #c8d6e8; background: #0c4a6e33; font-size: 12px; }
    .slice-ini-note strong { display: block; margin-bottom: 4px; color: #bae6fd; }
    .slice-render-preview { min-width: 0; }
    .slice-stage { position: relative; display: grid; place-items: center; width: 100%; min-height: min(64vh, 720px); overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, #0b1727, #06101d); }
    .slice-stage::before { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(#38bdf81f 1px, transparent 1px), linear-gradient(90deg, #38bdf81f 1px, transparent 1px); background-size: 44px 44px; }
    .slice-stage.ready { border-color: #34d39977; }
    .slice-placeholder { position: relative; z-index: 1; width: min(470px, 82%); text-align: center; }
    .slice-placeholder-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 14px; border: 1px solid #38bdf866; border-radius: 18px; color: var(--accent); background: #0c4a6e66; font-size: 27px; }
    .slice-placeholder h3 { margin: 0 0 6px; font-size: 20px; }
    .slice-render-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .slice-render-meta span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: #c8d6e8; background: #081321; font-size: 11px; }
    .slice-render-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
    .slice-render-actions .file-status { min-width: min(100%, 260px); margin-right: auto; }
    .slice-render-image { position: relative; z-index: 2; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; background: white; }
    .slice-sequence-nav { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px; pointer-events: none; }
    .slice-sequence-nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #e2e8f099; border-radius: 999px; color: white; background: #020617b8; box-shadow: 0 4px 16px #02061788; font-size: 25px; pointer-events: auto; }
    .slice-sequence-nav button:disabled { opacity: .28; cursor: default; }
    .slice-sequence-position { align-self: flex-end; max-width: calc(100% - 120px); overflow: hidden; padding: 6px 10px; border: 1px solid #e2e8f066; border-radius: 999px; color: white; background: #020617c7; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th, td { padding: 8px 10px; border-bottom: 1px solid #263a5488; text-align: right; }
    th:first-child, td:first-child { text-align: left; }
    th { color: var(--muted); font-size: 11px; text-transform: uppercase; }
    .empty { padding: 40px 20px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; }
    @media (max-width: 900px) {
      .summary, .azure-summary { grid-template-columns: repeat(2, 1fr); }
      .azure-grid { grid-template-columns: 1fr; }
      .node-capacity { grid-template-columns: repeat(2, 1fr); }
      .job-body { grid-template-columns: 1fr; }
      .group { border-right: 0; border-bottom: 1px solid var(--line); }
      .group:last-child { border-bottom: 0; }
      .slice-render-layout { grid-template-columns: 1fr; }
      .egress-layout { grid-template-columns: 1fr; }
      .ventilation-layout { grid-template-columns: 1fr; }
    }
    .slice-render-preview { min-width: 0; }
    .slice-stage { min-height: 300px; aspect-ratio: 16 / 9; }
    @media (max-width: 860px) {
      .topbar { flex-direction: column; }
      .toolbar { justify-content: flex-start; width: 100%; }
      .toolbar .button { flex: 1 1 190px; }
      .slice-render-layout { grid-template-columns: 1fr; }
      .slice-render-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
      .slice-render-controls label, .slice-render-controls .slice-ini-note { min-width: 0; }
      .slice-render-controls .slice-render-bounds { grid-column: 1 / -1; }
      .slice-render-controls .slice-render-toggle, .slice-render-controls .slice-ini-note { grid-column: 1 / -1; }
    }
    @media (max-width: 600px) {
      .shell { width: min(100% - 20px, 1380px); padding-top: 18px; }
      .toolbar .button { flex-basis: 100%; }
      .summary { grid-template-columns: 1fr 1fr; }
      .job-head { padding: 15px; }
      .group { padding: 15px; }
      .job-head { align-items: flex-start; }
      .job-head-actions { flex-wrap: wrap; justify-content: flex-end; }
      .egress-floor { margin-left: 0; }
      .egress-device { grid-template-columns: 1fr; }
      .ventilation-device { grid-template-columns: 1fr; }
      .modal { padding: 0; }
      .modal-card { max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
      .modal-head { padding: 13px 14px; }
      .modal-body { padding: 14px; }
      .slice-render-card .modal-body { padding: 10px; }
      .slice-render-controls { grid-template-columns: 1fr; padding: 13px; }
      .slice-render-controls .slice-render-bounds { grid-template-columns: 1fr 1fr; }
      .slice-stage { min-height: 0; }
      .slice-render-actions { align-items: stretch; }
      .slice-render-actions .file-status { min-width: 100%; }
      .slice-render-actions .button { flex: 1 1 145px; }
    }

    :root {
      --bg: #07090e; --panel: #0f172a; --panel-2: #182235; --line: #2b3445;
      --surface: #0d121c; --surface-soft: #182235;
      --text: #f8fafc; --muted: #94a3b8; --accent: #ff6b00; --accent-2: #00f2fe;
      --warning: #f59e0b; --danger: #ef4444; --ok: #10b981;
      --shadow: 0 20px 50px #00000073;
    }
    body {
      background: radial-gradient(circle at 0 0, #ff6b0014, transparent 38%), radial-gradient(circle at 100% 100%, #00f2fe0d, transparent 36%), var(--bg);
      font-family: "Avenir Next", "Segoe UI", sans-serif;
    }
    ::-webkit-scrollbar { width: 7px; height: 7px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { border-radius: 8px; background: #334155; }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
    .shell { width: min(1480px, calc(100% - 40px)); }
    .topbar { align-items: center; padding: 18px 0 22px; border-bottom: 1px solid #ffffff12; }
    .brand { gap: 3px; }
    .eyebrow { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; }
    h1 { letter-spacing: -.045em; }
    .toolbar { flex: 0 1 auto; }
    .toolbar-groups { gap: 0; border: 1px solid #ffffff14; border-radius: 10px; overflow: hidden; background: #0b1019; }
    .toolbar-group { min-width: 0; padding: 8px; border: 0; border-right: 1px solid #ffffff12; border-radius: 0; background: transparent; box-shadow: none; }
    .toolbar-group:last-child { border-right: 0; }
    .toolbar-title { margin: 0 4px 6px; color: #708099; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
    .toolbar-actions { gap: 5px; }
    .toolbar-group .button { min-height: 34px; padding: 7px 10px; border-radius: 6px; font-size: 12px; }
    .toolbar-group .button.primary, .button { color: #1a0c02; background: linear-gradient(135deg, #ff6b00, #ff9d00); box-shadow: 0 5px 15px #ff6b003d; }
    .toolbar-group .button.secondary, .button.secondary { color: #dce5f0; border-color: #ffffff14; background: #ffffff0b; box-shadow: none; }
    .button:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
    .summary { gap: 10px; }
    .summary-card, .schedule-panel, .submit-panel, .job { border-color: #ffffff14; border-radius: 10px; background: linear-gradient(145deg, #161d2dbf, #0d121dcc); box-shadow: none; }
    .summary-card { position: relative; overflow: hidden; }
    .summary-card::before, .job::before { content: ""; position: absolute; top: 0; right: 20%; left: 20%; height: 1px; background: linear-gradient(90deg, transparent, #ffffff42, transparent); }
    .summary-card .label, .group-title { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; letter-spacing: .12em; }
    .summary-card .value { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
    .summary > .summary-card:not(.capacity-card),
    .summary > .summary-card:not(.capacity-card) .label,
    .summary > .summary-card:not(.capacity-card) .value { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    .job { position: relative; }
    .job:hover { border-color: #ffffff2b; background: linear-gradient(145deg, #1b2538d9, #0d121de6); }
    .job-head { border-bottom-color: #ffffff12; }
    .job-action { border-radius: 6px; border-color: #ffffff14; background: #ffffff09; }
    .badge { border: 1px solid #10b98155; border-radius: 5px; color: #6ee7b7; background: #10b98118; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
    .badge.pending { border-color: #f59e0b55; color: #fcd34d; background: #f59e0b18; }
    .badge.other { border-color: #94a3b855; background: #94a3b818; }
    .meter span { background: linear-gradient(90deg, var(--accent), #ffb000); }
    .history-chart { border-color: #00f2fe33; background: #05070a; }
    .history-chart polyline { stroke: var(--accent-2); filter: drop-shadow(0 2px 5px #00f2fe33); }
    .schedule-panel, .submit-panel { background: #121927b8; }
    .node-capacity-item, .azure-card, .slice-render-controls { border-color: #ffffff14; background: #080d15; }
    .modal { background: #03050ae8; backdrop-filter: blur(8px); }
    .modal-card { border-color: #ffffff1c; border-radius: 12px; background: #0f172a; }
    .slice-stage { border: 1px solid #ff6b0055; box-shadow: 0 0 0 1px #00f2fe12, 0 16px 35px #00000066; }
    .slice-render-image { background: #fff; }
    @media (max-width: 860px) { .topbar { align-items: stretch; } .toolbar-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 600px) { .shell { width: min(100% - 24px, 1480px); } .topbar { padding-top: 8px; } .toolbar-groups { border-radius: 8px; } .toolbar-group { border-right: 0; border-bottom: 1px solid #ffffff12; } .toolbar-group:last-child { border-bottom: 0; } .toolbar-group .button { flex: 1 1 115px; } }