:root{
  --pageBg:#002D89;
  --pageBgDeep:#001f63;

  --panel:rgba(255,255,255,0.08);
  --panelStrong:rgba(255,255,255,0.12);
  --line:rgba(232,236,255,0.16);

  --text:#e8ecff;
  --muted:rgba(232,236,255,0.74);

  --accent-yellow:#FFFF00;
  --accent-orange:#ED7D31;
  --accent-red:#FF0000;
  --accent-green:#00B050;
  --accent-cyan:#00B0F0;
  --accent-purple:#7030A0;

  --btnBg:#7aa2ff;
  --btnText:#0b1020;
  --btnRadius:12px;
  --radius:14px;
  --shadow:0 10px 24px rgba(0,0,0,0.28);

  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing:border-box; }
html, body{ min-height:100%; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 28%),
    linear-gradient(180deg, var(--pageBg) 0%, var(--pageBgDeep) 100%);
}

.app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.topbar{
  min-height:64px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(0,45,137,0.72);
  backdrop-filter:blur(8px);
  position:sticky;
  top:0;
  z-index:100;
}

.topbar-left,
.topbar-right{
  display:flex;
  align-items:center;
}

.topbar-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:0;
}

.brand{
  font-weight:700;
  letter-spacing:0.2px;
  font-size:clamp(18px, 2.2vw, 24px);
}

.subbrand{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.badge{
  font-size:12px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--text);
  background:rgba(255,255,255,0.08);
}

.page-shell{
  width:min(1180px, calc(100% - 24px));
  margin:12px auto 24px;
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
  overflow:hidden;
}

.panel-inner{
  padding:16px;
}

.intro-copy{
  padding:18px 20px;
}

.page-title{
  margin:0;
  font-size:clamp(24px, 3.1vw, 36px);
  line-height:1.14;
}

.lead{
  margin:10px 0 0;
  color:var(--muted);
  max-width:80ch;
}

.section-title{
  font-size:15px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--accent-yellow);
}

label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}

.inline-label{
  margin:0;
  font-weight:500;
}

input[type="datetime-local"],
input[type="number"],
input[type="text"],
select{
  width:100%;
  min-height:38px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.10);
  color:var(--text);
}

select option,
datalist option{
  color:#111318;
  background:#ffffff;
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

.btn{
  min-height:38px;
  padding:9px 14px;
  border:none;
  border-radius:var(--btnRadius);
  background:var(--btnBg);
  color:var(--btnText);
  cursor:pointer;
  box-shadow:var(--shadow);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  line-height:1.2;
}

.btn:hover{ filter:brightness(1.05); }

.btn-secondary{
  background:rgba(255,255,255,0.12);
  color:var(--text);
  border:1px solid var(--line);
}

.back-btn{
  min-height:34px;
  padding:8px 12px;
}

.tool-grid{
  display:grid;
}

.two-cols{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.three-cols{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.span-all{ grid-column:1 / -1; }
.gap-lg{ gap:20px; }
.gap-md{ gap:16px; }
.mt-12{ margin-top:12px; }
.mt-16{ margin-top:16px; }

.button-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.align-end{
  align-self:end;
}

.results-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.result-tile{
  background:rgba(0,0,0,0.18);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
}

.k{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.v{
  font-size:clamp(18px, 3vw, 28px);
  font-variant-numeric:tabular-nums;
  margin-top:4px;
}

.compact-value{
  font-size:18px;
}

.sub{
  color:var(--muted);
  margin-top:6px;
  font-size:14px;
}

.mono{
  font-family:var(--mono);
  white-space:pre-wrap;
}

.mono-inline{
  font-family:var(--mono);
}

.small{
  font-size:12px;
  color:var(--muted);
}

.error{
  color:#ffb3b3;
  margin-top:10px;
  min-height:1.2em;
}

.checkrow{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

.tip{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.tip-btn{
  background:rgba(255,255,255,0.14);
  border:1px solid var(--line);
  color:var(--text);
  width:20px;
  height:20px;
  border-radius:50%;
  font-size:12px;
  line-height:18px;
  text-align:center;
  cursor:help;
  user-select:none;
  padding:0;
}

.tip-content{
  position:absolute;
  left:28px;
  top:-4px;
  display:none;
  width:min(340px, 78vw);
  background:rgba(0,31,99,0.98);
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  box-shadow:var(--shadow);
  z-index:20;
}

.tip:focus-within .tip-content,
.tip:hover .tip-content{
  display:block;
}

.tip-content p{
  margin:0 0 6px;
  font-size:13px;
  color:var(--text);
}

.tip-content ul{
  margin:0 0 0 18px;
  padding:0;
  font-size:13px;
  color:var(--text);
}

.tip-content li{ margin:2px 0; }

.scan-control-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:flex-end;
}

.scan-control{
  min-width:180px;
  flex:1 1 200px;
}

.scan-results{
  min-height:2.6em;
  padding:12px;
  background:rgba(0,0,0,0.14);
  border:1px solid var(--line);
  border-radius:12px;
}

canvas{
  width:100%;
  height:260px;
  background:rgba(0,0,0,0.16);
  border:1px solid var(--line);
  border-radius:12px;
  display:block;
}

.chart-label{
  margin-bottom:6px;
}

.legend{
  margin-top:8px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.legend .min,
.min-line{ color:#3bd16f; font-weight:600; }
.legend .max,
.max-line{ color:#ff7272; font-weight:600; }
.legend .now{ color:#6aa7ff; font-weight:600; }
.min-dist,
.min-dist-line{ color:#1e8f5a; font-weight:600; }
.max-dist,
.max-dist-line{ color:#b22222; font-weight:600; }

.legend-scatter{
  text-align:center;
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
}

.swatch{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin:0 6px -1px 8px;
  vertical-align:middle;
  border:1px solid #0003;
}

.sw-now{ background:#6aa7ff; }
.sw-path{ background:#7aa2ff; }
.sw-grad-a{ background:#6aa7ff; }
.sw-grad-b{ background:#ff86c8; }
.sw-min{ background:#3bd16f; }
.sw-max{ background:#ff7272; }
.sw-mind{ background:#1e8f5a; }
.sw-maxd{ background:#b22222; }

.footer-note{
  margin:14px 4px 0;
}

.page-header{
  position: sticky;
  top: 0;
  z-index: 100;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;

  margin-bottom: 18px;
  padding: 12px clamp(10px, 2vw, 20px);

  background: #002D89;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.header-side{
  display: flex;
  align-items: center;
}

.header-left{
  justify-content: flex-start;
}

.header-right{
  justify-content: flex-end;
}

.page-title{
  margin: 0;
  text-align: center;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.nav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;

  background: #7aa2ff;
  color: #0b1020;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.nav-btn:hover{
  filter: brightness(1.05);
}

.nav-btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.header-spacer{
  display: inline-block;
  min-width: 92px; /* roughly matches a future Explanation button */
  min-height: 42px;
}

@media (max-width: 700px){
  .page-header{
    gap: 10px;
    margin-bottom: 14px;
  }

  .page-title{
    font-size: clamp(1.05rem, 4.2vw, 1.45rem);
  }

  .nav-btn{
    min-height: 40px;
    padding: 7px 12px;
    font-size: 0.95rem;
  }

  .header-spacer{
    min-width: 92px;
    min-height: 40px;
  }
}

@media (max-width: 920px){
  .two-cols,
  .three-cols{
    grid-template-columns:1fr;
  }

  .topbar{
    grid-template-columns:1fr;
    justify-items:center;
  }

  .topbar-left,
  .topbar-right{
    width:100%;
    justify-content:center;
  }

  .page-shell{
    width:min(100%, calc(100% - 16px));
    margin:8px auto 20px;
  }
}

@media (max-width: 640px){
  .panel-inner,
  .intro-copy{
    padding:14px;
  }

  .button-row .btn,
  .button-row .btn-secondary,
  .back-btn{
    width:100%;
  }

  .checkrow{
    align-items:flex-start;
  }

  .badge{
    display:none;
  }
}