:root {
  --bg: #070910; --panel: #0f131c; --panel2: #151a26; --line: #232a3a;
  --fg: #e6e9f2; --dim: #8b93a7; --accent: #5aa9ff; --warm: #ffa24a; --good: #6ee7a8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
body { display: flex; flex-direction: column; min-height: 100vh; }
header { display: flex; align-items: center; gap: 18px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
header h1 { font-size: 17px; margin: 0; font-weight: 650; letter-spacing: .2px; }
.tabs { display: flex; gap: 4px; }
.tabs a { border: 1px solid transparent; color: var(--dim); padding: 6px 12px;
  border-radius: 8px; text-decoration: none; }
.tabs a:hover { color: var(--fg); }
.tabs a.active { color: var(--fg); background: var(--panel2); border-color: var(--line); }
main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; }
.stage { display: flex; flex-direction: column; gap: 12px; padding: 14px; min-width: 0; }
.tunnel-wrap { flex: 1; min-height: 240px; display: flex; align-items: center; justify-content: center; }
.tunnel { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.tunnel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#overlay { cursor: crosshair; touch-action: none; }
#overlay.edit { cursor: default; }
#overlay.grab { cursor: grabbing; }
.flowtag { position: absolute; left: 10px; top: 8px; font-size: 12px; color: var(--dim); pointer-events: none; }
.bottom { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.readouts { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 8px; align-content: start; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.stat .k { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }
.stat .v { font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 600; }
.stat.cl .v { color: var(--accent); } .stat.cd .v { color: var(--warm); }
.chart-box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; position: relative; min-height: 150px; }
#chart { position: absolute; inset: 0; width: 100%; height: 100%; }
aside { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; padding: 6px 16px 24px; }
details { border-bottom: 1px solid var(--line); padding: 10px 0; }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
summary::after { content: "▾"; color: var(--dim); }
details:not([open]) summary::after { content: "▸"; }
.row { margin-top: 10px; }
.row label { display: flex; justify-content: space-between; font-size: 13px; color: var(--dim); margin-bottom: 3px; }
.row label output { color: var(--fg); font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; accent-color: var(--accent); }
input[type=range]:disabled { opacity: .35; }
select, input[type=number] { width: 100%; background: var(--panel2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; font: inherit; }
.btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.btn { background: var(--panel2); border: 1px solid var(--line); color: var(--fg); border-radius: 8px;
  padding: 7px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.btn:hover { border-color: #3a4560; }
.btn.on { background: #1d3354; border-color: var(--accent); }
.check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--dim); }
.note { font-size: 12px; color: var(--dim); margin-top: 8px; }
.shape-name { font-size: 13px; margin-top: 8px; color: var(--good); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#error { display: none; margin: 40px auto; max-width: 560px; padding: 16px; border: 1px solid #6b2a2a;
  background: #2a1212; border-radius: 10px; }
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  aside { border-left: 0; border-top: 1px solid var(--line); }
  .bottom { grid-template-columns: 1fr; }
}

/* Fläktsidan */
.stage.scroll { overflow-y: auto; }
.fan-page main { height: calc(100vh - 53px); }
.view3d { position: relative; flex: none; height: min(58vh, 560px); min-height: 300px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); }
.view3d canvas { display: block; }
.view-tag { position: absolute; left: 10px; top: 8px; font-size: 12px; color: var(--dim); pointer-events: none; }
.fan-results { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 8px; }
.stat.big .v { font-size: 26px; color: var(--good); }
.stat .sub { font-size: 12px; color: var(--dim); }
.warn { display: none; padding: 9px 12px; border-radius: 10px; border: 1px solid #6b4a1f; background: #2a1f10; color: #ffcf8a; font-size: 13px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; }
.panel-box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.box-title { font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.box-title .dim { font-weight: 400; font-size: 12px; color: var(--dim); }
.radial-box { position: relative; height: 210px; }
#radial { position: absolute; inset: 0; width: 100%; height: 100%; }
.cascade { position: relative; width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.cascade canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 1200px) {
  .fan-results { grid-template-columns: repeat(2, 1fr); }
  .stat.big { grid-column: 1 / -1; }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .fan-page main { height: auto; }
}

/* 3D-dialog */
.dlg { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); color: var(--fg); }
.dlg::backdrop { background: rgba(0, 0, 0, .6); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { font-size: 16px; margin: 0; }
.dlg-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; }
.dlg-view { position: relative; height: min(70vh, 560px); background: #0b0e16; }
.dlg-view canvas { display: block; width: 100% !important; height: 100% !important; }
.dlg-side { padding: 4px 14px 16px; overflow-y: auto; max-height: min(70vh, 560px); }
.slice-canvas { width: 100%; height: 150px; margin-top: 10px; border-radius: 8px; border: 1px solid var(--line); display: block; }
.btn:disabled { opacity: .45; cursor: default; }
@media (max-width: 800px) {
  .dlg-body { grid-template-columns: 1fr; }
  .dlg-view { height: 300px; }
  .dlg-side { max-height: none; }
}