:root { color-scheme: dark; --bg:#07100f; --panel:#101c1a; --line:#263936; --ink:#ecf5f1; --muted:#91a7a1; --accent:#80e0b6; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 80% 0,#16332c 0,transparent 32rem),var(--bg); color:var(--ink); font:15px/1.5 system-ui,sans-serif; }
main { width:min(980px,calc(100% - 32px)); margin:60px auto; }
header { margin-bottom:32px; } h1 { font-size:clamp(2.3rem,6vw,4.6rem); line-height:.95; letter-spacing:-.06em; margin:.15em 0; max-width:700px; } h2,h3,p { margin-top:0; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-weight:700; font-size:.75rem; }
header>p:last-child,.section-title span { color:var(--muted); }
.panel { background:color-mix(in srgb,var(--panel) 94%,transparent); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 20px 60px #0004; }
.section-title { display:flex; justify-content:space-between; align-items:baseline; }
.phasor-grid { display:grid; grid-template-columns:.5fr repeat(4,1fr); gap:10px; align-items:center; margin-top:10px; }
.labels { color:var(--muted); font-size:.74rem; text-transform:uppercase; }
input,select { width:100%; border:1px solid var(--line); background:#091310; color:var(--ink); border-radius:8px; padding:11px; font:inherit; }
.form-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:end; }
.field-note { color:var(--muted); margin:0; grid-column:span 2; align-self:center; }
fieldset { border:1px solid var(--line); border-radius:9px; display:flex; gap:12px; color:var(--muted); } fieldset label { display:flex; gap:5px; align-items:center; } fieldset input { width:auto; }
.arrow { text-align:center; color:var(--accent); font-size:1.5rem; padding:12px; }.arrow span { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; }
.settings { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:16px; margin-top:16px; }
label { color:var(--muted); } label input { display:block; margin-top:6px; }
button { border:0; border-radius:9px; padding:12px 20px; background:var(--accent); color:#062019; font-weight:800; cursor:pointer; }
#error { color:#ff9b92; margin:12px 0; }.hidden { display:none; }
.report-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-top:28px; }.report-heading h2,.report-heading p { margin-bottom:0; }.report-heading #report-meta { color:var(--muted); font-size:.85rem; }
.direction-card { text-align:center; margin:30px 0 16px; padding:28px; border:1px solid var(--line); border-radius:16px; background:#0b1714; }
.direction-card p,.direction-card small { color:var(--muted); display:block; }.direction-card strong { font-size:2.2rem; color:var(--accent); }
[data-value="REVERSE"] { color:#ff9b92!important; } [data-value="UNDEFINED"],[data-value="NO_PICKUP"] { color:#ffd27c!important; }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.result-grid output { color:var(--accent); font-size:1.1rem; }
.combination-panel { margin-top:16px; }.table-scroll { overflow-x:auto; }.combination-table { width:100%; border-collapse:collapse; text-align:center; }.combination-table th,.combination-table td { padding:12px; border:1px solid var(--line); }.combination-table thead th,.combination-table tbody th { color:var(--muted); background:#091310; }.combination-table strong { color:var(--accent); }
.phase-table { margin-top:16px; }.phase-table #phase-values>div { display:grid; grid-template-columns:.3fr repeat(4,1fr); gap:12px; padding:10px 0; border-top:1px solid var(--line); }.phase-table span { color:var(--muted); font-size:.85rem; }
.vector-panel { margin-top:16px; }.vector-layout { display:grid; grid-template-columns:minmax(280px,480px) 1fr; gap:28px; align-items:center; justify-content:center; }
#vector-chart { display:block; width:100%; max-height:480px; overflow:visible; }.operate-zone { fill:#42d98b; fill-opacity:.25; stroke:#42d98b; stroke-opacity:.55; stroke-width:1; }
.chart-ring,.chart-axis { fill:none; stroke:#49605b; stroke-width:1; vector-effect:non-scaling-stroke; }.chart-ring.minor { stroke-dasharray:3 4; opacity:.55; }.chart-axis { opacity:.7; }
.characteristic-line { stroke:#2797ff; stroke-width:2; stroke-dasharray:6 4; vector-effect:non-scaling-stroke; }
.angle-labels,.label-u,.label-i { font:8px system-ui,sans-serif; fill:var(--muted); }.label-u { fill:#63b3ff; font-weight:800; }.label-i { fill:#ffb45e; font-weight:800; }
.vector-u,.vector-i { stroke-width:3; vector-effect:non-scaling-stroke; }.vector-u { stroke:#63b3ff; }.vector-i { stroke:#ffb45e; }.chart-origin { fill:var(--ink); }
.chart-legend p { color:var(--muted); display:flex; align-items:center; gap:9px; }.chart-legend i { display:inline-block; width:24px; height:4px; border-radius:4px; }.chart-legend .zone-key { height:15px; background:rgba(66,217,139,.25); border:1px solid rgba(66,217,139,.55); }.characteristic-key { height:0!important; border-top:2px dashed #2797ff; }.u-key { background:#63b3ff; }.i-key { background:#ffb45e; }
@media(max-width:700px) { main{margin:30px auto}.form-grid,.result-grid{grid-template-columns:1fr}.phase-table #phase-values>div{grid-template-columns:1fr}.section-title{display:block} }
@media(max-width:700px) { .vector-layout { grid-template-columns:1fr; }.chart-legend { display:flex; flex-wrap:wrap; gap:0 16px; } }
@media print {
  :root { color-scheme:light; --bg:#fff; --panel:#fff; --line:#c9d0ce; --ink:#111; --muted:#4d5956; --accent:#08734e; }
  @page { size:A4; margin:12mm; }
  body { background:#fff; color:#111; font-size:10pt; }
  main { width:100%; margin:0; }
  body>main>header,#analysis-form,#error,#save-pdf,.arrow { display:none!important; }
  .exclude-from-report { display:none!important; }
  .results.hidden { display:none!important; }
  .report-heading { margin:0 0 8mm; }
  .panel,.direction-card { background:#fff; box-shadow:none; break-inside:avoid; }
  .direction-card { margin:0 0 5mm; padding:12px; }
  .direction-card strong { font-size:20pt; }
  .result-grid,.vector-layout { gap:4mm; }
  .combination-panel,.vector-panel,.phase-table { margin-top:5mm; }
  #vector-chart { max-height:105mm; }
  .chart-legend { font-size:8pt; }
  .phase-table #phase-values>div { grid-template-columns:.25fr repeat(4,1fr); gap:5px; }
  .phase-table span { font-size:7.5pt; }
}