:root { --bg:#0b1020; --card:#121a33; --text:#e7ecff; --muted:#aab3da; --line:#22305f; --btn:#2d6cdf; }
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  background:linear-gradient(180deg,#0b1020 0%, #0a0f1f 100%);
  color:var(--text);
}
.wrap { max-width: 980px; margin: 0 auto; padding: 16px; }
.card {
  background:rgba(18,26,51,.92);
  border:1px solid rgba(34,48,95,.9);
  border-radius:14px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
h1 { font-size: 18px; margin:0 0 10px; }
.muted { color:var(--muted); font-size:13px; line-height:1.6; }
.small { font-size:12px; color:var(--muted); }
.warn { color:#ffd7a8; }
.ok { color:#b7ffcf; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.grid { display:grid; gap:12px; margin-top:14px; }
@media (min-width: 860px){ .grid { grid-template-columns: 1.1fr .9fr; } }

.row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0;
  border-bottom:1px dashed rgba(34,48,95,.8);
}
.row:last-child{ border-bottom:none; }
.label { font-weight:600; }

input[type="range"] { width: 56%; }
.num { min-width: 44px; text-align:right; font-variant-numeric: tabular-nums; }

.pill { display:inline-flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pill label {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid rgba(34,48,95,.9);
  border-radius:999px;
  background:rgba(0,0,0,.15);
  cursor:pointer;
  user-select:none;
}
.pill input { accent-color: var(--btn); }

.select {
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(34,48,95,.9);
  background:rgba(0,0,0,.2);
  color:var(--text);
}
.w-180 { max-width:180px; }
.w-220 { max-width:220px; }

.btns { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
button { border:none; border-radius:12px; padding:12px 14px; cursor:pointer; font-weight:700; }
.primary { background: var(--btn); color:white; }
.secondary { background: rgba(31,42,85,.95); color: var(--text); border:1px solid rgba(34,48,95,.9); }
.ghost { background: transparent; color: var(--text); border:1px solid rgba(34,48,95,.9); }

details {
  border:1px solid rgba(34,48,95,.9);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(0,0,0,.14);
}
summary { cursor:pointer; font-weight:700; }

pre, textarea {
  width:100%;
  background:rgba(0,0,0,.35);
  color:var(--text);
  border:1px solid rgba(34,48,95,.9);
  border-radius:12px;
  padding:12px;
  overflow:auto;
}
textarea { min-height: 170px; resize: vertical; }

.kpi { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.kpi .box { padding:10px 12px; border:1px solid rgba(34,48,95,.9); border-radius:12px; background:rgba(0,0,0,.12); }
.kpi .box b { font-size:16px; }

.footer { margin-top:12px; font-size:12px; color:var(--muted); }
.sitefoot { margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; color:var(--muted); font-size:12px; }

.mt-8 { margin-top:8px; }
.mt-12 { margin-top:12px; }
.mt-14 { margin-top:14px; }