/* 一覧と検定で共通の見た目。色はロゴ（紺の地に、シアンとマゼンタのネオン、金の文字）から取った */
:root {
  --bg: #060A1F; --panel: #10162F; --panel-on: #1A2247; --line: #2A3358;
  --ink: #FAF7F0; --muted: #B7C1DA; --gold: #FFC93D; --cyan: #27C8FF; --magenta: #FF2E6E;
  --blue: #3D7BFF; --red: #FF5A6A;
  --neon: linear-gradient(115deg, var(--cyan), #7A5CFF 45%, var(--magenta) 75%, var(--gold));
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); font-family: var(--font); line-height: 1.7; }
/* ロゴの背景と同じ、縦のストライプと左上・右下の光。スクロールしても動かない */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(60rem 36rem at 0% -8%, rgba(39, 200, 255, .2), transparent 62%),
    radial-gradient(60rem 36rem at 100% 108%, rgba(255, 46, 110, .2), transparent 62%),
    repeating-linear-gradient(90deg, rgba(120, 150, 255, .05) 0 1px, transparent 1px 26px),
    var(--bg);
}
main { max-width: 640px; margin: 0 auto; padding: 20px 16px 56px; }
h1 { font-size: 30px; line-height: 1.3; font-weight: 900; margin: 8px 0 6px; }
h2 { font-size: 20px; margin: 28px 0 8px; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.gold {
  background: linear-gradient(180deg, #FFF3B0, var(--gold) 55%, #F08A24);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kicker { color: var(--gold); font-weight: 700; letter-spacing: .14em; font-size: 13px; }
.note { color: var(--muted); font-size: 14px; }

.card { background: rgba(16, 22, 47, .88); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 16px 0; }
/* 枠だけネオンにする。中の色は --panel のまま */
.neon {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--neon) border-box;
  box-shadow: 0 0 26px rgba(39, 200, 255, .16), 0 0 44px rgba(255, 46, 110, .12);
}

button { font: inherit; cursor: pointer; border-radius: 10px; }
button:disabled { opacity: .4; cursor: default; }
.primary {
  display: block; width: 100%; padding: 14px 20px; border: 0; border-radius: 10px; text-align: center;
  background: linear-gradient(180deg, #5A90FF, #2F66F0); color: #fff; font-weight: 700; font-size: 17px;
  box-shadow: 0 0 20px rgba(61, 123, 255, .45);
  transition: box-shadow .15s, transform .15s;
}
.primary:hover { box-shadow: 0 0 30px rgba(61, 123, 255, .75); transform: translateY(-1px); }
.ghost { background: rgba(6, 10, 31, .6); color: var(--ink); border: 1px solid var(--line); padding: 10px 16px; }
.ghost:hover:not(:disabled) { border-color: var(--cyan); }

/* 上の帯。どの画面からも一覧へ戻れる */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 14px; }
.brand img { width: 40px; height: 40px; border-radius: 50%; display: block; }

/* チャンネル登録の案内。一覧と結果の画面で同じ形にする */
.follow h2 { margin: 0 0 4px; font-weight: 900; }
.follow p { margin: 0 0 14px; }
.icon { width: 22px; height: 22px; display: block; flex: none; }
.subscribe { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.sns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.sns a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; font-size: 12px; color: var(--ink);
         text-decoration: none; background: rgba(6, 10, 31, .6); border: 1px solid var(--line); border-radius: 10px; }
.sns a:hover { border-color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}