/* Restored stylish header & tabs (gradient pill) */
:root {
  --bg: #f6f8fb;
  --brand-color: #0b1220;
  --muted: #6b7280;
  --accent1: #4f46e5;
  --accent2: #06b6d4;
  --tab-bg: linear-gradient(135deg,var(--accent1),var(--accent2));
}

*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;margin:0;background:var(--bg);color:var(--brand-color)}
.topbar{position:sticky;top:0;z-index:1200;background:rgba(255,255,255,0.98);backdrop-filter:blur(6px);border-bottom:０px solid rgba(15,23,36,0.06)}
.topbar .wrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 18px}
.brand{font-weight:700;color:var(--brand-color);text-decoration:none;font-size:1.05rem;padding:6px 8px;border-radius:8px}
.tabs{display:flex;gap:8px;margin-left:auto;align-items:center}

/* Tab style */
.tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  transition:transform .12s ease, box-shadow .12s ease, color .12s;
  position:relative;
  overflow:visible;
  background:transparent;
  border:1px solid transparent;
}
.tab:hover{
  transform:translateY(-2px) scale(1.01);
  color:#07263a;
  box-shadow:0 6px 18px rgba(13,38,59,0.08);
  background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
}

/* Active tab with gradient pill and underline animation */
.tab.active{
  color:white;
  background:var(--tab-bg);
  box-shadow: 0 8px 24px rgba(15,23,36,0.12), inset 0 -2px 8px rgba(255,255,255,0.06);
}
.tab.active::after{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  width:8px;
  height:8px;
  background:var(--accent2);
  border-radius:50%;
  box-shadow:0 6px 14px rgba(6,182,212,0.18);
}

/* page-tabs */
.page-tabs { position: sticky; top: 64px; z-index:1100; background: rgba(255,255,255,0.97); border-bottom:1px solid rgba(0,0,0,0.04); }
.page-tabs .wrap{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:8px 18px; gap:12px; }
.page-nav { display:flex; gap:8px; align-items:center; }
.page-tab { background:#fff; border:1px solid #ddd; padding:8px 12px; border-radius:6px; font-weight:700; cursor:pointer; }
.page-tab.active { background:#f3f3f3; box-shadow:0 6px 18px rgba(0,0,0,0.04); transform:translateY(-2px); }
.page-controls { display:flex; gap:12px; align-items:center; }

/* layout */
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.controls{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}

.page-title{font-size:48px;margin:18px 0}
.codeBlock{background:#0b1220;color:#e6eef8;padding:12px;overflow:auto;max-height:60vh;white-space:pre-wrap;border-radius:8px}
.script-actions{margin-bottom:8px;display:flex;gap:8px;align-items:center}

/* Title centered inside page-tabs */
.page-title-in-tabs { flex: 1; text-align:center; }
.page-title-in-tabs h1 { margin: 6px 0; font-size:1.4rem; font-weight:800; color:var(--brand-color); }
.page-tabs .wrap .left{ display:flex; align-items:center; }



/* mode buttons (replacement for page-tabs) */
.mode-buttons { display:flex; gap:10px; align-items:center; background: transparent; padding:6px 0; }
.mode-button { padding:8px 14px; background:#fff; border:1px solid rgba(15,23,36,0.06); border-radius:8px; font-weight:700; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,0.02); transition:transform .08s; }
.mode-button:hover { transform:translateY(-2px); }
.mode-button.active { background: linear-gradient(90deg,#4f46e5,#06b6d4); color:#fff; box-shadow:0 10px 24px rgba(15,23,36,0.08); }

/* =============================
   THEME TOKENS（ここだけ変えれば全体が変わる）
   ============================= */
:root{
  /* 背景/文字 */
  --bg: #1a1a1a;        /* ダークグレー（ページ背景） */
  --fg: #e6e6e6;        /* 基本文字 */
  --muted: #a3a3a3;     /* サブ文字 */

  /* 面/枠線（カードやボックス） */
  --surface:   #000000; /* ブラック（カード面） */
  --surface-2: #0a0a0a; /* さらに暗い面（必要時） */
  --border-rgb: 255,255,255; /* 枠線は白ベースを薄い不透明度で */

  /* アクセント（そのままでもOK。必要なら調整） */
  --accent1: #e11d48;   /* マゼンタ */
  --accent2: #60a5fa;   /* ブルー */
  --tab-bg: linear-gradient(135deg, var(--accent1), var(--accent2));
}
/* =============================
   THEME OVERRIDES（後挿入CSSやインライン<style>をCSSだけで上書き）
   ============================= */
body{ background:var(--bg) !important; color:var(--fg) !important; }

/* ヘッダ/タブ */
.topbar{
  background:rgba(10,14,25,.88) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:0px solid rgba(var(--border-rgb),.14) !important;
}
.brand{ color:var(--fg) !important; }
.tab{ color:var(--muted) !important; }
.tab.active{ background:var(--tab-bg) !important; color:#fff !important; }
.tab.active::after{
  background:var(--accent2) !important;
  box-shadow:0 6px 14px rgba(96,165,250,.18) !important;
}

/* セグメント（トグル） */
.seg{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(var(--border-rgb),.18) !important; }
.seg button{ background:transparent !important; color:var(--muted) !important; }
.seg button.active{
  background:linear-gradient(90deg,var(--accent1),var(--accent2)) !important;
  color:#fff !important;
}

/* カード類（options.htmlの.card / home.jsの.analysis-card などを一括） */
.card,
.subcard,
.analysis-card,
.summary-box,
.tv-holder{
  background:var(--surface) !important;
  border:1px solid rgba(var(--border-rgb),.18) !important;
  color:var(--fg) !important;
}
.card .hd,
.subcard .hd,
.analysis-card .hd{
  border-bottom:1px solid rgba(var(--border-rgb),.12) !important;
}

.muted{ color:var(--muted) !important; }

/* セレクト/入力 */
.card .hd .controls select,
.card select,
.card input{
  background:#0b1220 !important;
  color:var(--fg) !important;
  border:1px solid rgba(var(--border-rgb),.24) !important;
}

/* リンク/強調 */
a, .link{ color:var(--accent2) !important; }
.kpi-strong, .badge--accent{ color:var(--accent1) !important; }

/* 全タブを黒地、非選択はサブ色、枠や影は消す */
.tab{
  background:#000 !important;
  color:var(--muted) !important;
  border:none !important;
  box-shadow:none !important;
}



/* 縁どり（擬似要素や装飾ライン）を完全に無効化 */
.tab::after,
.tab.active::after{
  content:none !important;
  display:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* 置かなくても動きます。ページ共通の見た目を整えたいときだけ */
.legend { display:flex; flex-wrap:wrap; gap:8px; font-size:12px; }
.legend .item { display:inline-flex; align-items:center; gap:6px; padding:4px 8px;
  border:1px solid #29415d; border-radius:999px; background:#1b2737; cursor:pointer; }
.legend .sw { width:10px; height:10px; border-radius:2px; }

.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#legend-a{ display:flex; flex-wrap:wrap; gap:8px; }
#legend-a .pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border:1px solid #29415d; border-radius:999px;
  background:#0f172a; color:#cbd5e1; cursor:pointer;
}
#legend-a .pill.on{ background:#1e293b; }
#legend-a .sw{ width:10px; height:10px; border-radius:2px; display:inline-block; }
/* カード見出しを左右に配置して、レジェンドを右上へ */
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;  /* ← 右側に #legend-a を寄せる */
  gap:12px;
}

/* レジェンドの見た目（ボタン） */
#legend-a{ display:flex; flex-wrap:wrap; gap:8px; }
#legend-a .pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px;
  border:1px solid #29415d;
  .card-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  #legend-a{
    display:flex; gap:8px; padding:6px; border-radius:12px;
    background:rgba(11,17,27,.6); border:1px solid #213046;
  }
  #legend-a .pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px; border-radius:10px; border:1px solid #29415d;
    background:#0f172a; color:#cbd5e1; cursor:pointer; user-select:none;
    font-size:12px; line-height:1;
  }
  #legend-a .pill.on{ background:#1e293b; }
  #legend-a .dot{ width:10px; height:10px; border-radius:6px; display:inline-block; }
  /* カード内で絶対配置できるように */
  .card { position: relative; }

  .card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .card-head h3{ margin:0; }
  #legend-a{ display:flex; flex-wrap:wrap; gap:8px; }

  /* === Responsive Tabs v2 (phones: 1-row scroll, tablet/PC: wrap up to 2 rows) === */
  .topbar .wrap{
    flex-wrap: wrap;              /* 2行になる余地を作る */
    align-items: center;
  }

  /* スマホ：横スクロール1行（チップを縮めず流す） */
  .tabs{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    max-width:100%;
    flex-wrap: nowrap;            /* 1行固定 */
    overflow-x: auto;             /* 横に流す */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 2px 0;

    /* スクロールの両端フェード（ヒント） */
    mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
  }

  .tab{
    white-space: nowrap;          /* 折り返さず“縦長化”を防ぐ */
    writing-mode: horizontal-tb !important;  /* 念のため縦書きを無効 */
    height: auto;
    line-height: 1;
    padding: 10px 14px;
    scroll-snap-align: start;
  }

  /* タブレット以上：自動で折り返し（最大2行） */
  @media (min-width:560px){
    .tabs{
      overflow: visible;
      flex-wrap: wrap;            /* 折り返しON */
      row-gap: 8px;
      /* 2行まで（タブの高さ ≈36px + 行間8px を想定） */
      max-height: calc((36px + 8px) * 2);
      mask: none;
      -webkit-mask-image: none;
    }
    /* 2行時のアクティブ下点位置 微調整（使っているなら） */
    .tab.active::after{ bottom: -6px; }
  }

  /* レイアウト：中幅ではタブをブランドの下段にフル幅で配置 */
  @media (min-width:560px) and (max-width:959px){
    .tabs{ flex: 0 0 100%; order: 2; margin-left: 0; }
  }

  /* デスクトップ：ブランド左／タブ右に寄せる（1段でも2段でもOK） */
  @media (min-width:960px){
    .tabs{ margin-left:auto; flex: 0 1 auto; }
  }
  /* === Tabs: CSS-only responsive === */
  /* 基本：縦長化(縦書き風)の元凶を止める */
  .topbar .tab,
  .topbar .tab *{
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
  }

  /* スマホ幅：横スクロール1列 */
  @media (max-width: 559.98px){
    .topbar .tabs{
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap !important;         /* 1行固定 */
      overflow-x: auto !important;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      padding: 2px 0;
    }
    .topbar .tab{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 10px 14px;
      scroll-snap-align: start;
    }
  }

  /* 560px以上：自動で折り返し（最大2行相当に見える高さ制御） */
  @media (min-width: 560px){
    .topbar .tabs{
      display: flex;
      align-items: center;
      gap: 8px;
      overflow: visible !important;
      flex-wrap: wrap !important;            /* 折り返しON */
      row-gap: 8px;
      max-height: calc((36px + 8px) * 2);    /* 2行分の高さ目安 */
    }
  }
  /* === Tabs: CSS-only responsive override === */
  /* 文字が縦に折れないように固定（CJKは1文字ごとに折れやすいので重要） */
  #site-header .tab { white-space: nowrap; }

  /* スマホ幅：横スクロール1列にして“縦長タブ化”を防止 */
  @media (max-width: 559.98px){
    #site-header .tabs{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap: nowrap;              /* 1行固定 */
      overflow-x: auto;               /* 横に流す */
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      padding: 2px 0;
    }
    #site-header .tab{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:36px;
      padding:10px 14px;
      scroll-snap-align:start;
    }
  }

  /* 560px以上：自動で折り返し（実質2行まで見える高さに） */
  @media (min-width: 560px){
    #site-header .tabs{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap: wrap;                /* 折り返しON */
      row-gap: 8px;
      max-height: calc((36px + 8px) * 2);
      overflow: visible;
    }
  }
  /* === Global background (unify to the light gray used on オプション（日別）) === */
  /* Put this at the VERY END of /style.css */
  :root{
    /* オプション（日別）と同じ系統のライトグレー */
    --bg: #f6f8fb !important;
  }

  /* ページ背景を統一。文字色はベースの brand-color を使う */
  body{
    background: var(--bg) !important;
    color: var(--brand-color) !important;
  }

  /* 上のタブ帯（ヘッダーの帯）を完全な黒に */
  .topbar{
    background: #000 !important;
    border-bottom: 0 !important;
  }

  /* タブの“ピル”自体は透明（＝黒い帯の上に載る）/ アクティブは既存のグラデ維持 */
  .tab{ background: transparent !important; }
  .tab.active{ background: var(--tab-bg) !important; color:#fff !important; }

  /* もしタブ下の点( ::after )を消したいままなら以下を残す／出したければこの2行は消す */
  // .tab::after, .tab.active::after{ content:none !important; display:none !important; }
  
  
  
  
  
  
  
  
  
  
  
  /* === Global overrides (最後尾に置く) ======================== */

  /* 1) 背景を一括でライトグレーに固定（オプション（日別）準拠） */
  :root{
    --bg: #0a2b5c !important;         /* ← これで各ページの :root --bg を踏み越える */
    --brand-color: #0b1220 !important; /* 読みやすい本文色 */
  }
  body{
    background: var(--bg) !important;
    color: var(--brand-color) !important;
  }

  /* 2) 上のタブ帯（ヘッダー）を完全な黒に固定 */
  #site-header > .topbar,
  .topbar{
    background: #000 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 0 !important;
  }

  /* （任意）タブの“ピル”はそのままでもOK。黒帯の上でスッキリ見せたい場合は透明に */
  #site-header .tab{ background: transparent !important; }
  /* アクティブの見た目は現状維持（グラデ）なら下行は不要。
     黒ピルにしたい場合だけ次の1行を有効化： */
  /* #site-header .tab.active{ background:#000 !important; color:#fff !important; } */
  /* ===== Tabs/Topbar FINAL OVERRIDES ===== */
  /* ヘッダー帯を完全な黒に（半透明＆ブラーも無効化）*/
  html body header.topbar,
  #site-header > .topbar,
  .topbar{
    background: #000 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 0 !important;
  }

  /* タブ自体の“ピル”背景を消して黒帯の上に載せる */
  #site-header .tab{
    background: transparent !important;
    color: inherit !important;
  }

  /* アクティブだけ黒ピルにしたい場合（好みでON/OFF） */
  #site-header .tab.active{
    background: #000 !important;
    color: #fff !important;
  }

  /* もしタブに影/枠が付いて藍っぽく見える場合は消す */
  #site-header .tab,
  #site-header .tab.active{
    box-shadow: none !important;
    border: 0 !important;
  }
  /* ===== FINAL OVERRIDE for topbar ===== */
  #site-header > .topbar,
  html body header.topbar,
  .topbar{
    background: #000 !important;      /* 完全な黒 */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;  /* ぼかし無効化（半透明に見えるのを防止） */
    border-bottom: 0 !important;
  }
  /* ===== Unify all cards to summary.js look (FINAL OVERRIDES) ===== */
  :root{
    /* summary.js のカード調に合わせるトークン */
    --card-bg: #111318;
    --card-bd: rgba(255,255,255,.10);
    --card-fg: #e6e6e6;
    --card-muted: #a3a3a3;
    --card-radius: 14px;
    --card-shadow: 0 10px 24px rgba(15,23,36,.18), inset 0 -1px 0 rgba(255,255,255,.03);

    /* 既存参照用の別名もまとめてマップ */
    --surface: var(--card-bg) !important;
    --bd: var(--card-bd) !important;
    --text: var(--card-fg) !important;
    --muted: var(--card-muted) !important;
  }

  /* どのページの .card / .metric-card でも同じ見た目にする */
  html body .card,
  html body section.card,
  html body .metric-card{
    background: var(--card-bg) !important;
    color: var(--card-fg) !important;
    border: 1px solid var(--card-bd) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
  }

  /* ヘッダー線・本文余白などの体裁も統一（必要に応じて） */
  html body .card .hd{ padding:10px 12px !important; border-bottom:1px solid var(--card-bd) !important; }
  html body .card .body{ padding:10px 12px !important; }
  html body .muted{ color: var(--card-muted) !important; }

  /* optionflow の“数値キー”箱やバッジ類もカード調に寄せる（任意） */
  html body .k{
    background: var(--card-bg) !important;
    border: 1px solid var(--card-bd) !important;
    border-radius: 10px !important;
  }
  html body .tag{
    background: transparent !important;
    border: 1px solid var(--card-bd) !important;
    color: var(--card-fg) !important;
  }