/* ════════════════════════════════════════════
   AI Coding Agent Optimizer
   Studio Toriumi — sea & horizon から派生
   ════════════════════════════════════════════ */
:root{
  --bg:#EFF3F4;
  --surface:#FFFFFF;
  --sunk:#E2E9EB;
  --ink:#0C1E24;
  --muted:#4C666F;
  --faint:#8098A1;
  --line:#D2DDE0;
  --accent:#04707E;
  --accent-soft:#DCEDEF;
  --warn:#B45309;
  --warn-soft:#FDF0E0;
  --good:#04707E;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#07131A;
    --surface:#0D1D25;
    --sunk:#0A1720;
    --ink:#DFEAED;
    --muted:#92AAB3;
    --faint:#647E88;
    --line:#17313C;
    --accent:#4FD0E0;
    --accent-soft:#0C2C34;
    --warn:#F0A65C;
    --warn-soft:#2A1D0E;
    --good:#4FD0E0;
  }
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans JP",system-ui,-apple-system,sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;}
.wrap{max-width:900px;margin:0 auto;padding:0 26px 60px;}

/* ── ヘッダー・ヒーロー ── */
.bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:20px 0;flex-wrap:wrap;
}
.bar a.home{
  font-family:"JetBrains Mono",monospace;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;color:var(--accent);
}
.bar nav a{font-size:13px;text-decoration:none;color:var(--muted);}
.bar nav a:hover{color:var(--accent);}

.hero{padding:26px 0 46px;}
.mark{
  font-family:"JetBrains Mono",monospace;
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px;
}
h1{
  font-family:"M PLUS 2","Noto Sans JP",sans-serif;
  font-weight:800;
  font-size:clamp(30px,5.2vw,50px);
  line-height:1.22;
  margin:0 0 22px;
  text-wrap:balance;
}
.thesis{font-size:16.5px;color:var(--muted);max-width:52ch;margin:0;}
.thesis strong{color:var(--ink);font-weight:500;}
.thesis-en{
  font-family:"JetBrains Mono",monospace;
  font-size:12.5px;color:var(--faint);
  margin:20px 0 0;
}

.horizon{
  height:1px;background:var(--line);border:none;margin:0;
  position:relative;
}
.horizon::after{
  content:"";position:absolute;left:0;top:0;height:1px;width:74px;
  background:var(--accent);
}

/* ── タブ ── */
.tabs{
  display:flex;gap:6px;flex-wrap:wrap;
  margin:34px 0 30px;
}
.tab{
  font-family:"Noto Sans JP",sans-serif;
  font-size:13.5px;font-weight:500;
  color:var(--muted);
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 18px;
  cursor:pointer;
}
.tab:hover{color:var(--accent);border-color:var(--accent);}
.tab[aria-selected="true"]{
  color:var(--accent);
  background:var(--accent-soft);
  border-color:var(--accent);
  font-weight:700;
}

.panel h2{
  font-family:"M PLUS 2","Noto Sans JP",sans-serif;
  font-size:19px;font-weight:700;
  margin:40px 0 14px;
}
.panel-note{font-size:13.5px;color:var(--muted);margin:0 0 20px;}

/* ── フォーム ── */
.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-bottom:22px;
}
.field{display:flex;flex-direction:column;gap:6px;border:none;margin:0;padding:0;}
.f-label{font-size:12.5px;font-weight:700;color:var(--muted);}
select,input[type="number"]{
  font-family:inherit;font-size:14.5px;color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:9px 12px;
}
.radios{display:flex;gap:16px;flex-wrap:wrap;padding:8px 0 0;}
.radios label{font-size:14px;display:flex;align-items:center;gap:6px;cursor:pointer;}
input[type="radio"],input[type="checkbox"]{accent-color:var(--accent);}

.btn{
  font-family:"Noto Sans JP",sans-serif;
  font-size:14.5px;font-weight:700;
  color:var(--surface);
  background:var(--accent);
  border:none;border-radius:999px;
  padding:11px 30px;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.1);}

/* ── 結果カード ── */
.result{margin-top:26px;}
.rec-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:12px;
  padding:22px 24px;
}
.rec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
.rec-rank{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--accent);letter-spacing:.18em;}
.rec-name{font-family:"M PLUS 2","Noto Sans JP",sans-serif;font-size:24px;font-weight:800;}
.rec-score{
  font-family:"JetBrains Mono",monospace;
  font-size:13px;color:var(--muted);margin-left:auto;
}
.rec-why{margin:10px 0 0;padding:0;list-style:none;font-size:14px;}
.rec-why li{padding-left:1.3em;position:relative;}
.rec-why li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700;}
.rec-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.stat .s-label{font-size:11.5px;color:var(--faint);display:block;}
.stat .s-value{font-family:"JetBrains Mono",monospace;font-size:16px;font-weight:600;}

.alt-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 18px;
  margin-top:10px;
  font-size:14px;
}
.alt-name{font-weight:700;min-width:9.5em;}
.alt-bar{
  flex:1;min-width:120px;height:6px;
  background:var(--sunk);border-radius:3px;overflow:hidden;
}
.alt-bar i{display:block;height:100%;background:var(--accent);opacity:.55;}
.alt-meta{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);}

.warn-box{
  background:var(--warn-soft);
  border:1px solid var(--warn);
  border-radius:10px;
  padding:12px 18px;
  margin-top:12px;
  font-size:14px;
  color:var(--warn);
}

/* ── 残りタスクの行 ── */
.rm-rows{display:flex;flex-direction:column;gap:12px;margin-bottom:8px;}
.rm-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px 18px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 18px;
}
.rm-row .rm-name{font-weight:700;font-size:14.5px;}
.rm-row .rm-name small{display:block;font-weight:400;font-size:12px;color:var(--faint);}
.rm-row select{font-size:13px;padding:5px 8px;width:auto;}
.rm-usage{display:flex;align-items:center;gap:10px;grid-column:2/4;}
.rm-usage input[type="range"]{flex:1;accent-color:var(--accent);}
.rm-usage output{font-family:"JetBrains Mono",monospace;font-size:13px;min-width:3.2em;text-align:right;}
.rm-remain{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);}

/* ── 組み合わせ結果 ── */
.combo{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 18px;
  margin-top:10px;
}
.combo.best{border-left:4px solid var(--accent);}
.combo-tag{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--accent);letter-spacing:.14em;}
.combo-items{font-size:14px;font-weight:500;flex:1;min-width:200px;}
.combo-items small{display:block;color:var(--muted);font-weight:400;}
.combo-tasks{font-family:"JetBrains Mono",monospace;font-size:15px;font-weight:600;}
.combo-tasks small{display:block;font-size:11px;color:var(--faint);font-weight:400;}
.delta-up{color:var(--good);font-weight:700;}
.delta-down{color:var(--warn);}

/* ── 表 ── */
.table-scroll{overflow-x:auto;}
.tbl{border-collapse:collapse;width:100%;font-size:13.5px;}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;white-space:nowrap;}
.tbl th{font-size:12px;color:var(--muted);font-weight:700;border-bottom-width:2px;}
.tbl td.num{font-family:"JetBrains Mono",monospace;}
.tbl tr.group th{padding-top:22px;color:var(--accent);font-size:12.5px;letter-spacing:.08em;}
.conf{
  font-size:10.5px;border:1px solid var(--line);border-radius:4px;
  padding:1px 6px;color:var(--muted);margin-left:4px;
}

.notes .note{font-size:13.5px;color:var(--muted);margin:8px 0;}
.notes .note strong{color:var(--ink);}
.sources{padding-left:1.4em;font-size:13px;}
.sources li{margin:4px 0;}
.asof{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--faint);}

.foot{margin-top:70px;}
.foot p{font-size:12.5px;color:var(--faint);margin-top:20px;}

@media (max-width:560px){
  .wrap{padding:0 18px 50px;}
  .rec-stats{gap:16px;}
  .rm-row{grid-template-columns:1fr;gap:6px;}
  .rm-usage{grid-column:1;}
}

/* ── ⑤ 勢力図 ── */
.mo-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;}
.btn-sub{padding:.5rem .9rem;font-size:.85rem;flex:none;}
.mo-badge{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--accent);color:var(--bg);font-size:.72rem;font-weight:700;vertical-align:1px;white-space:nowrap;}
.mo-bar{position:relative;height:8px;border-radius:999px;background:var(--line);min-width:90px;}
.mo-bar i{position:absolute;top:0;bottom:0;left:0;border-radius:999px;background:var(--accent);}
.mo-status{margin-top:10px;color:var(--faint);font-size:.85rem;line-height:1.7;}
.mo-sub{color:var(--faint);font-size:.8rem;margin-right:6px;}