:root {
  color-scheme: dark;
  --bg: #050814;
  --panel: rgba(15, 23, 42, 0.86);
  --panel2: rgba(2, 6, 23, 0.72);
  --line: rgba(148, 163, 184, 0.22);
  --line2: rgba(125, 211, 252, 0.28);
  --text: #e5eefb;
  --muted: #94a3b8;
  --strong: #ffffff;
  --cyan: #67e8f9;
  --blue: #60a5fa;
  --amber: #f6c453;
  --red: #fb7185;
  --green: #86efac;
  --violet: #c4b5fd;
  --radius: 22px;
  --shadow: 0 22px 80px rgba(0, 0, 0, 0.35);
  --finhud-bridge-height: 44px;
  --finhud-local-nav-height: 44px;
  --finhud-sticky-gap: 12px;
  --finhud-sticky-bottom-gap: 18px;
  --finhud-sticky-top: calc(var(--finhud-bridge-height) + var(--finhud-local-nav-height) + var(--finhud-sticky-gap));
  --finhud-scroll-margin-top: calc(var(--finhud-sticky-top) + 12px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(96, 165, 250, 0.18), transparent 26rem),
    radial-gradient(circle at 80% 15%, rgba(34, 211, 238, 0.13), transparent 30rem),
    linear-gradient(180deg, #07101f 0%, var(--bg) 52%, #020617 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: #7dd3fc; }
button, input, select, textarea { font: inherit; }
button, .file-button {
  appearance: none;
  border: 1px solid rgba(125, 211, 252, 0.34);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.72));
  color: var(--text);
  padding: 0.62rem 0.86rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
}
button:hover, button:focus-visible, .file-button:hover, .file-button:focus-within { outline: 2px solid rgba(125, 211, 252, 0.55); outline-offset: 2px; background: rgba(14, 116, 144, 0.28); }
button.danger { border-color: rgba(251, 113, 133, 0.46); color: #fecdd3; }
input, select, textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(2, 6, 23, 0.72);
  color: var(--text);
  border-radius: 12px;
  padding: 0.5rem 0.56rem;
}
label { display: grid; gap: 0.32rem; color: #cbd5e1; font-weight: 700; font-size: 0.88rem; }
.file-button { display: inline-flex; align-items: center; gap: 0.35rem; position: relative; overflow: hidden; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: clamp(1.1rem, 2.2vw, 1.65rem) clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid rgba(125, 211, 252, 0.16);
  background: rgba(2, 6, 23, 0.62);
}
.brand-block h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: 0.95; letter-spacing: -0.07em; color: #fff; }
.topbar-subtitle { margin: 0.35rem 0 0; color: #cbd5e1; max-width: 62ch; }
.eyebrow { margin: 0 0 0.32rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 900; }
.top-actions, .button-row, .quick-actions, .export-row { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; }
.status-pill, .mini-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(125, 211, 252, 0.28);
  background: rgba(14, 116, 144, 0.18);
  color: #cffafe;
  padding: 0.42rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}
.status-pill.caution { border-color: rgba(246, 196, 83, 0.42); background: rgba(246, 196, 83, 0.13); color: #fde68a; }
.main-nav {
  position: sticky;
  top: var(--finhud-bridge-height);
  z-index: 50;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.58rem clamp(1rem, 3vw, 2rem);
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.main-nav a { color: #cbd5e1; text-decoration: none; font-weight: 800; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 999px; padding: 0.42rem 0.7rem; white-space: nowrap; }
.main-nav a:hover, .main-nav a:focus-visible { color: #fff; border-color: rgba(125, 211, 252, 0.5); }
.page-shell { width: min(1760px, calc(100% - 1.2rem)); margin: 0 auto; padding: 1rem 0 3rem; }
.hero-panel, .section-card, .boundary-strip {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.72));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-panel { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.95fr); gap: 1rem; align-items: center; padding: clamp(1rem, 2.2vw, 1.4rem); }
.hero-panel h2, .section-heading h2 { margin: 0; color: var(--strong); letter-spacing: -0.035em; }
.hero-panel p, .section-heading p { color: #cbd5e1; line-height: 1.55; }
.quick-actions { justify-content: flex-end; }
.boundary-strip { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.85rem 0; padding: 0.7rem; }
.boundary-strip span { border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(15, 23, 42, 0.8); border-radius: 999px; padding: 0.4rem 0.62rem; color: #dbeafe; font-size: 0.82rem; font-weight: 800; }
.workbench-grid { display: grid; grid-template-columns: minmax(320px, 0.85fr) minmax(520px, 1.55fr) minmax(300px, 0.7fr); gap: 0.85rem; align-items: start; }
.section-card { padding: clamp(0.9rem, 1.6vw, 1.15rem); margin-bottom: 0.85rem; }
.section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 0.85rem; }
.compact-heading h2 { font-size: 1.25rem; }
.compact-heading p { margin: 0.25rem 0 0; }
.params-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; margin-bottom: 0.75rem; }
details { border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(15, 23, 42, 0.52); border-radius: 16px; margin: 0.55rem 0; overflow: hidden; }
summary { cursor: pointer; padding: 0.72rem 0.78rem; font-weight: 900; color: #e0f2fe; display: flex; justify-content: space-between; align-items: center; }
details > div { padding: 0.65rem; border-top: 1px solid rgba(148, 163, 184, 0.14); }
.table-scroll, .mini-table-wrap { overflow: auto; max-width: 100%; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.12); }
table { width: 100%; border-collapse: collapse; font-size: 0.84rem; min-width: 760px; }
th, td { border-bottom: 1px solid rgba(148, 163, 184, 0.12); padding: 0.48rem; text-align: left; vertical-align: top; }
th { position: sticky; top: 0; z-index: 1; background: rgba(15, 23, 42, 0.98); color: #bae6fd; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
td input, td select { min-width: 90px; padding: 0.35rem; font-size: 0.8rem; }
.row-actions { display: flex; gap: 0.35rem; }
.row-actions button { padding: 0.35rem 0.5rem; font-size: 0.75rem; }
.inputs-panel,
.warnings-panel {
  max-height: calc(100dvh - var(--finhud-sticky-top) - var(--finhud-sticky-bottom-gap));
  overflow: auto;
  position: sticky;
  top: var(--finhud-sticky-top);
}
.inputs-panel { min-width: 0; }
.warnings-panel { min-width: 0; }
.graph-panel { min-width: 0; }
.graph-options, .event-type-controls, .trace-controls { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin: 0.55rem 0; }
.graph-options label, .trace-controls label, .event-type-controls label { display: flex; align-items: center; flex-direction: row; gap: 0.35rem; width: auto; }
.graph-options input[type="checkbox"], .trace-controls input[type="checkbox"], .event-type-controls input[type="checkbox"] { width: auto; }
.canvas-wrap { position: relative; width: 100%; min-height: 430px; border: 1px solid rgba(125, 211, 252, 0.2); border-radius: 18px; background: linear-gradient(180deg, rgba(2, 6, 23, 0.72), rgba(15, 23, 42, 0.68)); overflow: hidden; }
#finhudGraph { width: 100%; height: min(62vh, 640px); min-height: 430px; display: block; }
.warnings-list { display: grid; gap: 0.55rem; }
.warning-item { padding: 0.65rem; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(15, 23, 42, 0.58); }
.warning-item strong { display: block; color: #fff; }
.warning-item small { color: var(--muted); }
.warning-item.error { border-color: rgba(251, 113, 133, 0.55); background: rgba(127, 29, 29, 0.2); }
.warning-item.warning { border-color: rgba(246, 196, 83, 0.5); background: rgba(120, 53, 15, 0.17); }
.warning-item.info { border-color: rgba(125, 211, 252, 0.3); }
.boundary-note { margin-top: 0.8rem; padding: 0.8rem; border-left: 3px solid var(--amber); border-radius: 12px; background: rgba(246, 196, 83, 0.08); color: #fde68a; line-height: 1.45; }
.metrics-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 0.65rem; margin-bottom: 0.8rem; }
.metric-card { border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 16px; padding: 0.75rem; background: rgba(15, 23, 42, 0.58); }
.metric-card span { color: var(--muted); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; }
.metric-card strong { display: block; color: #fff; margin-top: 0.25rem; font-size: 1.1rem; }

.results-card { padding: 0; overflow: hidden; }
.results-collapsible { margin: 0; border: 0; border-radius: var(--radius); background: transparent; }
.results-collapsible > summary {
  padding: clamp(0.9rem, 1.6vw, 1.15rem);
  border-left: 4px solid var(--cyan);
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.11), rgba(15, 23, 42, 0.34) 45%, transparent);
  list-style: none;
}
.results-collapsible > summary::-webkit-details-marker { display: none; }
.results-collapsible > summary::before {
  content: "▸";
  margin-right: 0.55rem;
  color: var(--cyan);
  transition: transform 0.16s ease;
}
.results-collapsible[open] > summary::before { transform: rotate(90deg); }
.summary-title-block { display: grid; gap: 0.16rem; }
.summary-title-block strong { color: var(--strong); font-size: 1.25rem; letter-spacing: -0.025em; }
.summary-title-block small { color: var(--muted); font-weight: 700; line-height: 1.35; }
.results-body { padding: clamp(0.9rem, 1.6vw, 1.15rem); border-top: 1px solid rgba(148, 163, 184, 0.14); }
.collapse-hint { color: #cffafe; border-color: rgba(103, 232, 249, 0.34); background: rgba(8, 145, 178, 0.12); }

.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.about-grid article { border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 16px; padding: 0.85rem; background: rgba(15, 23, 42, 0.5); }
.about-grid h3 { margin: 0 0 0.45rem; color: #e0f2fe; }
.about-grid p { color: #cbd5e1; line-height: 1.55; }
.empty-state { padding: 0.75rem; color: var(--muted); border: 1px dashed rgba(148, 163, 184, 0.24); border-radius: 12px; }
#quickStart,
#scenarioSection,
#graphSection,
#warningsSection,
#resultsSection,
#aboutSection {
  scroll-margin-top: var(--finhud-scroll-margin-top);
}
@media (max-width: 1260px) { .workbench-grid { grid-template-columns: 1fr; } .inputs-panel, .warnings-panel { position: static; max-height: none; } .hero-panel { grid-template-columns: 1fr; } .quick-actions { justify-content: flex-start; } }
@media (max-width: 860px) { .main-nav { top: 0; } }
@media (max-width: 760px) { .topbar { align-items: stretch; flex-direction: column; } .main-nav { position: static; } .params-grid, .metrics-grid, .about-grid { grid-template-columns: 1fr; } #finhudGraph { min-height: 360px; height: 420px; } .section-heading { flex-direction: column; } .page-shell { width: min(100% - 0.55rem, 1760px); } table { min-width: 650px; } }