:root {
  color-scheme:dark;
  --bg:#07131f;
  --panel:#0d1d2a;
  --line:#244a63;
  --text:#ebf4ff;
  --muted:#9ec1d8;
  --primary:#4ec9f5;
  --accent:#7ef0b9;
  --danger:#ff9b9b;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:linear-gradient(160deg,#07131f,#0d2230);
  color:var(--text);
  font-family:Inter,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.5;
}

.shell {
  max-width:1440px;
  margin:auto;
  padding:30px 32px;
}

a {
  color:var(--primary);
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

button,input,select,textarea {
  font:inherit;
}

button,select {
  cursor:pointer;
}

button:disabled {
  cursor:not-allowed;
  opacity:.45;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,pre:focus-visible,.upload:focus-within {
  outline:2px solid var(--accent);
  outline-offset:4px;
}

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:0 0 24px;
}

.brand {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:20px;
  font-weight:750;
  color:var(--text);
  letter-spacing:-.5px;
}

.brand img { display:block; width:161.6px; max-width:100%; height:auto; filter:brightness(0) invert(1); }

.brand span {
  font-weight:400;
  color:var(--muted);
  font-size:17px;
}

nav {
  display:flex;
  gap:24px;
  align-items:center;
}

.pill,.source {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:30px;
}

.pill {
  color:var(--accent);
  border-color:#396654;
  background:#14352e;
}

.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  padding:46px 0 30px;
}

.eyebrow {
  color:var(--primary);
  font-size:11px;
  letter-spacing:2px;
  font-weight:700;
  margin:0 0 12px;
}

h1 {
  font-size:42px;
  line-height:1.15;
  letter-spacing:-1.5px;
  font-weight:600;
  margin:0 0 16px;
}

.subtitle {
  color:var(--muted);
  line-height:1.65;
  margin:0;
}

.notice {
  max-width:345px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px 22px;
  background:#102530;
}

.notice strong {
  font-weight:500;
}

.notice p {
  color:var(--muted);
  font-size:13px;
  margin:12px 0 0;
}

.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  margin-right:9px;
}

.grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
}

.panel {
  min-width:0;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  padding:24px;
}

.panel-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.panel-title h2 {
  font-size:13px;
  font-weight:400;
  color:var(--primary);
  margin:0;
}

.panel-title h2 span {
  font-size:20px;
  font-weight:600;
  color:var(--text);
  margin-left:12px;
}

.method {
  color:var(--accent);
  font:700 11px ui-monospace,monospace;
  background:#15352f;
  padding:4px 9px;
  border-radius:5px;
}

.endpoint {
  display:block;
  background:#081622;
  border:1px solid #1b3447;
  border-radius:7px;
  padding:10px 12px;
  margin-bottom:22px;
  color:var(--muted);
  font-size:12px;
}

.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:14px;
}

label {
  font-size:12px;
  color:#d5e4ef;
  font-weight:500;
}

input,select {
  width:100%;
  border:1px solid var(--line);
  border-radius:7px;
  background:#0a1723;
  color:var(--text);
  padding:10px 12px;
  min-height:42px;
}

.row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.hint {
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
  margin:8px 0 16px;
}

.field .hint {
  margin:0;
}

.editor-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:20px 0 10px;
}

.tools {
  display:flex;
  gap:14px;
  align-items:center;
}

.text-button {
  padding:0;
  border:0;
  background:transparent;
  font-size:11px;
  font-weight:500;
  color:var(--primary);
  cursor:pointer;
}

.file-input {
  max-width:110px;
  padding:0;
  border:0;
  min-height:0;
  font-size:10px;
}

textarea,pre {
  font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;
  tab-size:2;
  border:1px solid #1e394d;
  background:#07141f;
  border-radius:8px;
  color:#bed8e9;
}

textarea {
  width:100%;
  min-height:355px;
  padding:16px;
  resize:vertical;
}

pre {
  margin:0 0 16px;
  padding:18px;
  overflow:auto;
  white-space:pre;
  min-width:0;
}

#output {
  min-height:558px;
  max-height:720px;
  flex:1;
}

.actions {
  display:flex;
  gap:12px;
  align-items:center;
}

button.primary,button.secondary {
  border-radius:7px;
  padding:11px 18px;
  font-size:12px;
  font-weight:600;
}

.primary {
  border:1px solid var(--primary);
  background:var(--primary);
  color:#052237;
}

.primary span {
  margin-left:30px;
}

.secondary {
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
}

button:hover:not(:disabled) {
  filter:brightness(1.15);
}

.error {
  margin-top:16px;
  border-left:3px solid var(--danger);
  background:#38242b;
  padding:12px;
  color:var(--danger);
  font-size:12px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.hidden {
  display:none;
}

.output-panel {
  display:flex;
  flex-direction:column;
}

.response-status {
  color:var(--muted);
  font-size:12px;
  min-height:38px;
}

.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:4px 0 5px;
}

.stats>div {
  background:#102634;
  border:1px solid #1d3b4c;
  border-radius:8px;
  padding:14px;
}

.stats span {
  display:block;
  color:var(--muted);
  font-size:11px;
}

.stats strong {
  display:block;
  font-size:24px;
  font-weight:500;
  margin-top:8px;
}

.source.fixture {
  color:var(--accent);
}

.source.simulation {
  color:var(--primary);
}

.result-visual { margin:20px 0; overflow-wrap:anywhere; }
.result-visual h3 { font-size:15px; margin:20px 0 8px; }
.result-visual .result-product { font-size:21px; margin-top:0; }
.result-visual select { margin-top:7px; font-size:12px; }
.result-total { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; margin:18px 0; padding:18px; background:#102e39; border-radius:10px; }
.result-total>span:first-child { width:100%; color:var(--muted); font-size:12px; }
.result-total strong { font-size:32px; line-height:1.2; color:var(--accent); }
.result-detail { font-size:12px; color:var(--muted); margin:8px 0; }
.result-detail strong { color:var(--text); font-weight:500; }
.result-warning { border-left:3px solid #f3c577; padding:10px; color:#f3c577; font-size:12px; }
.stage-list { display:grid; gap:6px; }
.stage-button { display:grid; grid-template-columns:1fr auto; gap:7px; padding:10px; border:1px solid transparent; border-radius:7px; background:#0a1723; color:var(--text); text-align:left; width:100%; }
.stage-button[aria-pressed="true"] { border-color:var(--primary); background:#173446; }
.stage-name,.stage-value { font-size:12px; }
.stage-value { color:var(--muted); text-align:right; }
.stage-track { grid-column:1 / -1; height:5px; border-radius:4px; background:#203646; overflow:hidden; }
.stage-fill { display:block; height:100%; background:var(--primary); }
.stage-fill.negative { background:#f3c577; }
.process-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.result-visual .process-card { border:1px solid var(--line); border-radius:8px; padding:12px; margin:8px 0; }
.process-card summary { color:var(--text); }
.process-card summary strong { font-weight:500; }
.process-card summary .process-impact { display:block; float:none; font-size:12px; margin-top:5px; color:var(--accent); }
.result-section { margin-top:18px; }
.mapping-card { padding:10px 0; border-bottom:1px solid var(--line); }
.mapping-card h4 { margin:8px 0; font-size:13px; }
.mapping-card a { font-size:12px; }
.result-notes { padding-left:20px; font-size:12px; color:var(--muted); }
.result-notes li { margin:10px 0; }
.output-panel .json-section { margin:8px 0 18px; }
.json-section #output { min-height:250px; max-height:500px; }
.grid { align-items:start; }
@media(max-width:600px) {
  .stage-button { grid-template-columns:1fr; }
  .stage-value { text-align:left; }
  .result-total strong { font-size:28px; }
}

details {
  border-top:1px solid var(--line);
  padding-top:12px;
  margin-top:auto;
}

summary {
  cursor:pointer;
  color:var(--muted);
  font-size:12px;
}

summary span {
  float:right;
}

#history {
  padding-left:20px;
  color:var(--muted);
  font-size:11px;
  max-height:150px;
  overflow:auto;
}

.quickstart {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-top:24px;
  padding:28px;
}

.quickstart h2 {
  font-size:22px;
  margin:0 0 12px;
}

.quickstart>div { min-width:0; }

.quickstart .subtitle {
  font-size:13px;
}

.quickstart pre {
  font-size:11px;
  margin:0;
}

.links {
  display:flex;
  gap:10px 20px;
  flex-wrap:wrap;
  font-size:11px;
  margin-top:20px;
}

footer {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:11px;
  padding:28px 0 8px;
}

footer span {
  opacity:.7;
}

@media(min-width:1300px) {
  textarea {
    min-height:395px;
  }
}

@media(max-width:950px) {
  .grid,.quickstart {
    grid-template-columns:1fr;
  }
  .intro {
    align-items:flex-start;
  }
  .notice {
    max-width:290px;
  }
  #output {
    min-height:350px;
    max-height:600px;
  }
}

@media(max-width:600px) {
  .shell {
    padding:20px 14px;
  }
  .topbar,.intro {
    flex-direction:column;
    align-items:flex-start;
  }
  .topbar {
    gap:14px;
  }
  nav {
    gap:20px;
  }
  .intro {
    gap:20px;
    padding:30px 0 22px;
  }
  h1 {
    font-size:34px;
  }
  .notice {
    max-width:none;
    width:100%;
  }
  .panel {
    padding:18px;
  }
  .row {
    grid-template-columns:1fr;
    gap:0;
  }
  .stats {
    gap:7px;
  }
  .stats>div {
    padding:10px;
  }
  .stats span {
    font-size:10px;
  }
  .tools {
    gap:10px;
  }
  .file-input {
    max-width:80px;
  }
  .quickstart {
    padding:20px;
  }
  footer {
    gap:20px;
  }
  .brand span {
    font-size:15px;
  }
}