:root {
  --bg: #0b1020;
  --panel: #151b2e;
  --panel2: #1d2540;
  --fg: #e8ecf6;
  --muted: #93a0be;
  --line: #2a3454;
  --ok: #35c98a;
  --ng: #ff6b6b;
  --warn: #ffc857;
  --accent: #5b9cff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* ホーム画面起動時のセーフエリア対応 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.wrap { max-width: 720px; margin: 0 auto; padding: 16px 16px 64px; }

h1 { font-size: 20px; margin: 8px 0 4px; }
h2 { font-size: 16px; margin: 24px 0 8px; color: var(--accent); }
p  { margin: 8px 0; }
.sub { color: var(--muted); font-size: 13px; margin-top: 0; }

a { color: var(--accent); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin: 12px 0;
}

.card.step { border-left: 3px solid var(--accent); }

button, .btn {
  display: inline-block;
  width: 100%;
  padding: 14px 16px;
  margin: 6px 0;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
button.secondary, .btn.secondary { background: var(--panel2); border: 1px solid var(--line); }
button:disabled { opacity: .4; }
button:active { transform: translateY(1px); }

input[type=text], input[type=url], select {
  width: 100%;
  padding: 12px;
  margin: 6px 0;
  font-size: 16px; /* 16px 未満だと iOS が自動ズームする */
  font-family: inherit;
  color: var(--fg);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.kv { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv td { padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kv td:first-child { color: var(--muted); width: 44%; }
.kv td:last-child { word-break: break-all; font-family: ui-monospace, Menlo, monospace; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.ok   { background: rgba(53,201,138,.15); color: var(--ok); }
.badge.ng   { background: rgba(255,107,107,.15); color: var(--ng); }
.badge.warn { background: rgba(255,200,87,.15);  color: var(--warn); }
.badge.na   { background: rgba(147,160,190,.15); color: var(--muted); }

.log {
  background: #060a16;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 45vh;
  overflow-y: auto;
}
.log .t   { color: var(--muted); }
.log .e   { color: var(--ng); }
.log .g   { color: var(--ok); }
.log .w   { color: var(--warn); }

.target {
  background: var(--panel2);
  border-radius: 8px;
  padding: 12px;
  font-size: 18px;
  text-align: center;
  margin: 10px 0;
}

.note { font-size: 13px; color: var(--muted); }
.note strong { color: var(--warn); }

.bar { height: 8px; background: var(--panel2); border-radius: 4px; overflow: hidden; margin: 8px 0; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

.level { height: 28px; background: var(--panel2); border-radius: 6px; overflow: hidden; }
.level > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ok), var(--warn), var(--ng)); }

ol { padding-left: 20px; }
ol li { margin: 6px 0; }
code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; font-size: 13px; }