:root{
  --brand:#1f6feb;
  --brand-600:#1a5ed0;
  --accent:#2ecc71;
  --buy:#ff6a3d;
  --bg:#0b0f14;
  --surface:#121820;
  --card:#17202b;
  --text:#e6edf3;
  --muted:#9aa7b2;
  --border:#253041;
  --shadow:0 8px 24px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#0b0f14 0%,#0d131b 60%,#0f1622 100%);
  color:var(--text);
  font-family: "Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.container{width:min(1200px,92%);margin-inline:auto}
.section{padding:40px 0}
h1,h2,h3{line-height:1.25;margin:0 0 12px}
h1{font-size:clamp(22px,2.4vw,32px)}
h2{font-size:clamp(18px,2vw,24px)}

a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-600)}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1rem;border-radius:10px;border:1px solid var(--border);
  background:rgba(31,111,235,.1);color:var(--text);
  transition:.15s box-shadow,.15s transform,.15s background;
}
.btn:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.btn.brand{background:var(--brand);border-color:transparent}
.btn.brand:hover{background:var(--brand-600)}
.btn.accent{background:var(--accent);color:#08140c;border-color:transparent}
.btn.buy{background:var(--buy);color:white;border-color:transparent}

.badge{display:inline-block;padding:.2rem .55rem;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.85rem}

.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(18px);
  background:linear-gradient(180deg,rgba(9,14,20,.9),rgba(9,14,20,.6));
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.8rem 0}
.brand{
  display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:.2px
}
.brand img{width:28px;height:28px;border-radius:8px}
.menu{display:flex;gap:.4rem;flex-wrap:wrap}
.menu a{padding:.5rem .75rem;border-radius:10px;color:var(--muted)}
.menu a[aria-current="page"],.menu a:hover{background:rgba(37,48,65,.6);color:var(--text)}

.hero{padding:36px 0 10px}
.hero p{color:var(--muted);margin:.5rem 0 0}

.grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(12,1fr)
}
.card{
  grid-column:span 12;
  background:linear-gradient(180deg,#121a24,#0f1622 90%);
  border:1px solid var(--border);border-radius:16px;padding:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.25)
}
.card:hover{box-shadow:0 10px 26px rgba(0,0,0,.3)}
.card-header{display:flex;align-items:flex-start;gap:14px}
.card img.thumb{width:84px;height:84px;border-radius:12px;object-fit:cover;border:1px solid var(--border)}
.card h3{margin:0;font-size:18px}
.card .meta{display:flex;flex-wrap:wrap;gap:.35rem .5rem;color:var(--muted);font-size:.9rem}
.card .actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.kpis{display:flex;gap:10px;flex-wrap:wrap;margin-top:.6rem}
.kpi{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:.5rem .7rem}
.kpi .label{color:var(--muted);font-size:.8rem}
.kpi .val{font-weight:700}

@media (min-width:640px){
  .card{padding:18px}
}
@media (min-width:768px){
  .card{grid-column:span 6}
}
@media (min-width:1100px){
  .card{grid-column:span 4}
}

.field{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:.55rem .7rem}
.input{all:unset;inline-size:100%;font-size:1rem;color:var(--text)}
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap}

.footer{margin-top:40px;border-top:1px solid var(--border);color:var(--muted);padding:22px 0}

/* ===== ベース変数 ===== */
:root {
  --brand:#1f6feb;
  --brand-600:#1a5ed0;
  --accent:#2ecc71;
  --buy:#ff6a3d;
  --bg:#0b0f14;
  --surface:#121820;
  --card:#17202b;
  --text:#e6edf3;
  --muted:#9aa7b2;
  --border:#253041;
  --shadow:0 8px 24px rgba(0,0,0,.25);
}

/* ===== リセット系 ===== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  background: linear-gradient(180deg,#0b0f14 0%,#0d131b 60%,#0f1622 100%);
  color: var(--text);
  font-family: "Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ===== コンテナ・セクション ===== */
.container { width: min(1200px,92%); margin-inline: auto; }
.section { padding: 40px 0; }

/* ===== 見出し ===== */
h1,h2,h3 { line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: clamp(22px,2.4vw,32px); }
h2 { font-size: clamp(18px,2vw,24px); }

/* ===== リンク ===== */
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-600); }

/* ===== ボタン共通 ===== */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem; border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(31,111,235,.1); color: var(--text);
  transition: .15s box-shadow, .15s transform, .15s background;
}
.btn:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.btn.brand { background: var(--brand); border-color: transparent; }
.btn.brand:hover { background: var(--brand-600); }
.btn.accent { background: var(--accent); color: #08140c; border-color: transparent; }
.btn.buy { background: var(--buy); color: white; border-color: transparent; }

/* ===== バッジ ===== */
.badge {
  display: inline-block; padding: .2rem .55rem;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: .85rem;
}

/* ===== ナビバー ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(18px);
  background: linear-gradient(180deg,rgba(9,14,20,.9),rgba(9,14,20,.6));
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: .8rem 0;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.menu { display: flex; gap: .4rem; flex-wrap: wrap; }
.menu a { padding: .5rem .75rem; border-radius: 10px; color: var(--muted); }
.menu a[aria-current="page"], .menu a:hover {
  background: rgba(37,48,65,.6); color: var(--text);
}

/* ===== ヒーロー ===== */
.hero { padding: 36px 0 10px; }
.hero p { color: var(--muted); margin: .5rem 0 0; }

/* ===== グリッド ===== */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(12,1fr); }
@media (min-width:768px) { .card { grid-column: span 6; } }
@media (min-width:1100px) { .card { grid-column: span 4; } }

/* ===== カード ===== */
.card {
  grid-column: span 12;
  background: linear-gradient(180deg,#121a24,#0f1622 90%);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.3); }
.card-header { display: flex; align-items: flex-start; gap: 14px; }
.card img.thumb {
  width: 84px; height: 84px; border-radius: 12px;
  object-fit: cover; border: 1px solid var(--border);
}
.card h3 { margin: 0; font-size: 18px; }
.card .meta {
  display: flex; flex-wrap: wrap; gap: .35rem .5rem;
  color: var(--muted); font-size: .9rem;
}
.card .actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }

/* ===== KPI ===== */
.kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-top: .6rem; }
.kpi {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 12px; padding: .5rem .7rem;
}
.kpi .label { color: var(--muted); font-size: .8rem; }
.kpi .val { font-weight: 700; }

/* ===== フィールド・ツールバー ===== */
.field {
  display: flex; align-items: center; gap: .6rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 12px; padding: .55rem .7rem;
}
.input { all: unset; inline-size: 100%; font-size: 1rem; color: var(--text); }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ===== フッター ===== */
.footer {
  margin-top: 40px; border-top: 1px solid var(--border);
  color: var(--muted); padding: 22px 0;
}

/* ===== 詳細ページ専用 ===== */
.detail-page {
  background: linear-gradient(180deg,#121a24,#0f1622 90%);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow); color: var(--text);
}
.detail-page h1, .detail-page h2 { margin: 0 0 10px; }
.detail-meta { color: var(--muted); }
@media (max-width:768px) {
  body { font-size: 16px; }
}

/* ===== ミニレーダーキャンバス ===== */
.mini-radar {
  display: block;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}

.container.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}