:root{
  --bg:#090f1a;
  --ink:#d9e6ff;
  --muted:#9fb0cc;
  --line:#223147;
  --accent:#6aa7ff;
  --good:#6bd38a;
  --warn:#ffd36a;
  --chip:#101a2a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  color:var(--ink);
  background:radial-gradient(1200px 600px at 30% -10%, #0f1b34 0%, #0b1322 55%, #08101c 100%) fixed;
}

.wrap{
  max-width:960px;
  margin:32px auto;
  padding:0 18px 60px;
}

.top{text-align:center;margin-bottom:16px}
.top h1{margin:0 0 6px;font-size:34px;letter-spacing:.3px}
.top .sub{margin:2px 0;color:var(--muted)}

.card{
  background:linear-gradient(180deg,#0a1423,#0a1220);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  padding:18px;
  margin-bottom:16px;
}

.step{margin:0 0 10px;font-size:16px;color:var(--muted);letter-spacing:.2px}

.grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.fetch-grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr auto;
}
.fetch-grid .full{grid-column:1/-1}

label{display:grid;gap:6px;color:var(--muted);font-size:14px}
label .alt{opacity:.8;margin-left:6px}
label.full{grid-column:1/-1}
small{color:var(--muted);opacity:.9}

input,button{
  font:inherit;color:inherit;
  background:#0d1a2b;border:1px solid var(--line);
  border-radius:12px;padding:12px 12px;
  transition:border-color .15s ease, transform .02s ease;
  outline:none;
}
input:focus{border-color:var(--accent)}
.row{display:flex;gap:10px;align-items:center}

button.primary{
  cursor:pointer;
  font-weight:800;
  background:linear-gradient(180deg,#3680ff,#2354c7);
  border-color:transparent;
  padding:12px 16px;
}
button.primary:hover{filter:brightness(1.05)}
button.ghost{cursor:pointer;background:transparent;border-style:dashed}

.actions{margin-top:10px;text-align:right}

.tag{
  background:var(--chip);
  border:1px solid var(--line);
  border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;font-size:12px;color:var(--ink);
}

.backup{margin-top:12px}
.backup summary{cursor:pointer;color:var(--ink);font-weight:700}
.backup[open]{border-top:1px dashed var(--line);padding-top:12px;margin-top:14px}

.hide{display:none}

/* status */
.status{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--chip);
  color:var(--ink);
  font-size:14px;
}
.status.ok{border-color:#2f5f3d;background:linear-gradient(180deg,#11221a,#0e171a)}
.status.warn{border-color:#5e4b1d}

/* output */
.head{display:flex;gap:12px;align-items:center;justify-content:space-between}
.head h2{margin:0;font-size:20px}
.badges{display:flex;gap:10px;align-items:stretch}
.badge{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#0b1729,#0a1423);
  border-radius:14px;padding:10px 12px;min-width:190px
}
.badge .k{color:var(--muted);font-size:12px}
.badge .v{font-weight:800;margin:4px 0}
.badge .s{color:var(--muted)}

.chart{margin-top:10px}
svg{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);
  border-radius:14px;background:#0c1320
}
.gridline{stroke:#1b2940;stroke-width:1}
.path{fill:none;stroke:var(--good);stroke-width:4}
.currMark{fill:var(--accent)}
.projMark{fill:var(--good)}
.axis{display:flex;justify-content:space-between;margin-top:6px;color:var(--muted);font-size:12px}

.foot{margin-top:14px;color:var(--muted);text-align:center}

@media (max-width:480px){
  .top h1{font-size:28px}
  .badge .v{font-size:14px}
  .fetch-grid{grid-template-columns:1fr}
}