:root {
  --bg-primary:#0E1117; --bg-card:#1E222D; --bg-card-hover:#252A37;
  --border:#2E323D; --text-primary:#FFFFFF; --text-muted:#8B8FA8;
  --green:#4CAF50; --green-bg:#1E4620; --yellow:#FFC107; --yellow-bg:#4A3B10;
  --red:#F44336; --red-bg:#4A1E1E; --blue:#2196F3; --blue-bg:#1A2A40; --accent:#3D7EFF;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif; background:var(--bg-primary); color:var(--text-primary); min-height:100vh; }

/* ログイン */
.login-container { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#0E1117,#1a1f2e); padding:20px; }
.login-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:48px 40px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.login-logo { font-size:56px; text-align:center; margin-bottom:12px; }
.login-title { font-size:28px; font-weight:700; text-align:center; margin-bottom:6px; }
.login-subtitle { text-align:center; color:var(--text-muted); margin-bottom:36px; font-size:14px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; color:var(--text-muted); margin-bottom:8px; font-weight:500; }
.form-group input { width:100%; padding:12px 16px; background:var(--bg-primary); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); font-size:15px; outline:none; transition:border-color .2s; }
.form-group input:focus { border-color:var(--accent); }
.btn-primary { width:100%; padding:13px; background:var(--accent); border:none; border-radius:8px; color:white; font-size:15px; font-weight:600; cursor:pointer; margin-top:8px; transition:background .2s; }
.btn-primary:hover { background:#2d6ee0; }
.btn-primary:disabled { background:#555; cursor:not-allowed; }
.error-msg { background:var(--red-bg); color:var(--red); border:1px solid var(--red); border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:14px; }

/* ヘッダー */
.header { display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background:var(--bg-card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; flex-wrap:wrap; gap:12px; }
.header-left { display:flex; align-items:center; gap:14px; }
.header-icon { font-size:36px; }
.header-title { font-size:20px; font-weight:700; margin-bottom:2px; }
.header-sub { font-size:12px; color:var(--text-muted); }
.header-right { display:flex; align-items:center; gap:12px; }
.user-badge { background:var(--blue-bg); color:var(--blue); border:1px solid var(--blue); border-radius:20px; padding:5px 14px; font-size:13px; }
.btn-logout { background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:8px; padding:7px 16px; font-size:13px; cursor:pointer; transition:border-color .2s,color .2s; }
.btn-logout:hover { border-color:var(--red); color:var(--red); }

/* タブナビ */
.tab-nav { display:flex; background:var(--bg-card); border-bottom:1px solid var(--border); padding:0 32px; gap:4px; }
.tab-btn { background:transparent; border:none; color:var(--text-muted); padding:14px 20px; font-size:14px; font-weight:500; cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; white-space:nowrap; }
.tab-btn:hover { color:var(--text-primary); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }

/* メイン */
.main-content { max-width:1400px; margin:0 auto; padding:32px 24px; }
.tab-content { }

/* KPIカード */
.kpi-grid,.analytics-kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:28px; }
.kpi-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:24px 20px; text-align:center; transition:transform .2s; }
.kpi-card:hover { transform:translateY(-2px); }
.kpi-green { border-left:4px solid var(--green); }
.kpi-yellow { border-left:4px solid var(--yellow); }
.kpi-red { border-left:4px solid var(--red); }
.kpi-blue { border-left:4px solid var(--blue); }
.kpi-icon { font-size:28px; margin-bottom:10px; }
.kpi-value { font-size:32px; font-weight:800; margin-bottom:6px; }
.kpi-label { font-size:13px; color:var(--text-muted); }

/* フィルターバー */
.filter-bar { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.filter-label { font-size:14px; color:var(--text-muted); }
.filter-btn,.result-filter-btn { background:var(--bg-card); border:1px solid var(--border); color:var(--text-muted); border-radius:20px; padding:6px 18px; font-size:13px; cursor:pointer; transition:all .2s; }
.filter-btn:hover,.filter-btn.active,.result-filter-btn:hover,.result-filter-btn.active { background:var(--accent); border-color:var(--accent); color:white; }
.date-filter { display:flex; align-items:center; gap:6px; margin-left:8px; }
.date-input { background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); border-radius:8px; padding:6px 10px; font-size:13px; cursor:pointer; }
.date-input:focus { outline:none; border-color:var(--accent); }
.date-sep { color:var(--text-muted); font-size:13px; }
.btn-clear { background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:8px; padding:6px 12px; font-size:12px; cursor:pointer; transition:all .2s; }
.btn-clear:hover { border-color:var(--red); color:var(--red); }
.last-updated { margin-left:auto; font-size:12px; color:var(--text-muted); }

/* テーブル */
.table-section { margin-bottom:36px; }
.section-title { font-size:18px; font-weight:600; margin-bottom:16px; }
.table-wrapper { overflow-x:auto; border-radius:12px; border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; background:var(--bg-card); }
thead th { background:#161B27; padding:14px 16px; text-align:left; font-size:13px; color:var(--text-muted); font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--bg-card-hover); }
tbody td { padding:12px 16px; font-size:14px; vertical-align:middle; }
.loading-cell { text-align:center; color:var(--text-muted); padding:40px !important; }

/* 確率バー */
.prob-bar-wrap { display:flex; align-items:center; gap:8px; min-width:100px; }
.prob-bar-bg { flex:1; height:7px; background:var(--border); border-radius:4px; overflow:hidden; }
.prob-bar-fill { height:100%; border-radius:4px; }
.prob-home { background:var(--blue); }
.prob-draw { background:var(--text-muted); }
.prob-away { background:var(--yellow); }
.prob-text { font-size:13px; font-weight:600; min-width:38px; }

/* バッジ */
.bet-badge { display:inline-block; padding:4px 12px; border-radius:12px; font-size:12px; font-weight:700; white-space:nowrap; }
.badge-single { background:var(--green-bg); color:var(--green); }
.badge-double { background:var(--yellow-bg); color:var(--yellow); }
.badge-triple { background:var(--red-bg); color:var(--red); }
.badge-skip { background:var(--bg-primary); color:var(--text-muted); }
.hit-badge { display:inline-block; padding:4px 12px; border-radius:12px; font-size:12px; font-weight:700; }
.badge-hit { background:var(--green-bg); color:var(--green); }
.badge-miss { background:var(--red-bg); color:var(--red); }
.badge-pending { background:#2a2a1e; color:#FFC107; }
.result-badge { display:inline-block; padding:3px 10px; border-radius:8px; font-size:12px; background:var(--bg-primary); color:var(--text-muted); }

/* グラフ */
.chart-section { margin-bottom:36px; }
.chart-container { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:24px; max-height:380px; display:flex; align-items:center; justify-content:center; }
.analytics-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:0; }

/* info box */
.info-box { background:var(--blue-bg); border:1px solid var(--blue); border-radius:8px; padding:12px 16px; font-size:13px; color:var(--blue); }

/* フッター */
.footer { text-align:center; padding:24px; color:var(--text-muted); font-size:12px; border-top:1px solid var(--border); }

/* レスポンシブ */
@media (max-width:768px) {
  .analytics-grid { grid-template-columns:1fr; }
  .tab-nav { padding:0 12px; }
  .tab-btn { padding:12px 12px; font-size:13px; }
  .header { padding:14px 16px; }
  .main-content { padding:20px 12px; }
}
@media (max-width:480px) {
  .date-filter { flex-wrap:wrap; }
  .kpi-value { font-size:26px; }
  .login-card { padding:32px 20px; }
}