:root {
  --bg: #0d1220; --bg2: #131a2e; --card: #1a2238; --line: #2a3554;
  --tx: #e9edf8; --sub: #9aa7c9; --ac: #5b8cff; --ac2: #36d399;
  --warn: #fbbf24; --err: #f87171; --mark: #3b5bdb55;
  --mono: "Consolas", "SF Mono", "Cascadia Code", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  background: var(--bg); color: var(--tx); line-height: 1.75; min-height: 100vh; }
a { color: var(--ac); text-decoration: none; }
a:hover { text-decoration: underline; }

header { background: var(--bg2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50; }
.nav { max-width: 1060px; margin: 0 auto; padding: 12px 18px;
  display: flex; align-items: center; gap: 18px; }
.nav .logo { font-weight: 800; font-size: 1.08rem; color: var(--tx); }
.nav .logo:hover { text-decoration: none; }
.nav .links { margin-left: auto; display: flex; gap: 16px; font-size: .92rem; }

main { max-width: 1060px; margin: 0 auto; padding: 28px 18px 60px; }
h1 { font-size: 1.55rem; margin: 6px 0 6px; }
.lead { color: var(--sub); margin-bottom: 22px; font-size: .96rem; }
h2 { font-size: 1.12rem; margin: 30px 0 12px; border-left: 4px solid var(--ac);
  padding-left: 10px; }
h3 { font-size: 1rem; margin: 18px 0 8px; }
p { margin: 8px 0; }

.tool { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; margin: 14px 0; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .col2 { grid-template-columns: 1fr; } }

textarea, input[type=text], input[type=number], input[type=datetime-local], select {
  width: 100%; background: #0e1424; color: var(--tx); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; font-size: .95rem; font-family: var(--mono); }
textarea { min-height: 150px; resize: vertical; }
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--ac); }
label { font-size: .88rem; color: var(--sub); }
.inline { width: auto; }

button, .btn { background: var(--ac); color: #fff; border: none; border-radius: 8px;
  padding: 9px 18px; font-size: .92rem; cursor: pointer; font-weight: 600; }
button:hover, .btn:hover { filter: brightness(1.12); text-decoration: none; }
button.ghost { background: transparent; border: 1px solid var(--line); color: var(--sub); }
button.ghost:hover { border-color: var(--ac); color: var(--tx); }

.out { background: #0e1424; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; font-family: var(--mono); font-size: .9rem;
  white-space: pre-wrap; word-break: break-all; min-height: 46px; }
.out:empty::before { content: "ここに結果が表示されます"; color: #4a5575; }
mark { background: var(--mark); color: var(--tx); border-radius: 3px; padding: 0 1px; }

.ok { color: var(--ac2); } .warn { color: var(--warn); } .err { color: var(--err); }
.badge { display: inline-block; font-size: .75rem; padding: 2px 10px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--sub); }
.badge.b-ok { color: var(--ac2); border-color: var(--ac2); }
.badge.b-warn { color: var(--warn); border-color: var(--warn); }
.badge.b-err { color: var(--err); border-color: var(--err); }

table.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 10px 0; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 7px 10px; text-align: left;
  font-family: var(--mono); word-break: break-all; }
.tbl th { background: #16203a; color: var(--sub); font-family: inherit; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin: 18px 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; color: var(--tx); display: block; transition: .15s; }
.card:hover { border-color: var(--ac); transform: translateY(-2px); text-decoration: none; }
.card .ic { font-size: 1.5rem; }
.card .t { font-weight: 700; margin: 6px 0 4px; }
.card .d { color: var(--sub); font-size: .85rem; line-height: 1.55; }

.note { background: #16203a; border-left: 4px solid var(--ac); border-radius: 0 8px 8px 0;
  padding: 10px 14px; font-size: .88rem; color: var(--sub); margin: 14px 0; }
.kv { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.kv .item { background: #0e1424; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 14px; font-size: .85rem; }
.kv .item b { display: block; font-size: 1.15rem; color: var(--ac); font-family: var(--mono); }

.diffline { display: block; padding: 1px 8px; border-radius: 3px; }
.d-add { background: #11341f; color: #7ee2a8; }
.d-del { background: #3a1620; color: #f3a0b0; }
.d-ctx { color: var(--sub); }

.result-item { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  margin: 10px 0; background: #151d33; }
.result-item .et { font-family: var(--mono); font-size: .9rem; color: var(--warn);
  word-break: break-all; }
.result-item .cause { margin-top: 8px; font-size: .9rem; }
.result-item .fix { margin-top: 4px; font-size: .9rem; }
.result-item .fix b, .result-item .cause b { color: var(--ac2); }

.score-ring { font-size: 2.6rem; font-weight: 800; font-family: var(--mono); }

footer { border-top: 1px solid var(--line); color: var(--sub); font-size: .82rem; }
.foot-in { max-width: 1060px; margin: 0 auto; padding: 22px 18px; }
.foot-in a { color: var(--sub); margin-right: 14px; }
.copybtn { font-size: .8rem; padding: 5px 12px; }