:root {
  --bg: #14181f;
  --surface: #1c2230;
  --border: #454e60;
  --text: #e7ebf3;
  --text-sub: #9aa5b8;
  --accent: #4c8dff;
  --accent-hover: #6ea1ff;
  --ok-bg: #103322;
  --ok-border: #1e5c3a;
  --err-bg: #3a1414;
  --err-border: #7a2323;
  --err-text: #ff6b6b;
  --loading-bg: #3a331a;
}
* { box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.2;
  font-size: 20px;
  font-weight: bold;
}
.container {
  padding: 0;
  height: 100vh;
  height: 100dvh; /* モバイルのアドレスバー伸縮に追従 */
  display: flex;
  flex-direction: column;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  max-width: calc(100vw - 40px);
}
.toolbar-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.toolbar-progress.active { opacity: 1; }
.toolbar-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.25s ease;
}
.toolbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.save-indicator {
  display: none;
}
.save-indicator.saved { color: #16a34a; }
button {
  font: inherit;
  font-size: 16px;
  font-weight: bold;
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.35);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) { background: #f8fafc; }
.btn-sync {
  font-size: 13px;
  padding: 4px 12px;
}
.btn-danger {
  background: var(--surface);
  color: var(--err-text);
  border-color: var(--err-border);
  font-size: 13px;
  padding: 4px 12px;
}
.btn-danger:hover:not(:disabled) { background: var(--err-bg); }
.icon-btn {
  background: none;
  border: none;
  box-shadow: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
}
.icon-btn:hover:not(:disabled) { background: none; color: var(--accent-hover); }
.icon-btn.hidden { display: none; }
.search-icon { width: 22px; height: 22px; }
.search-input {
  display: none;
  width: 140px;
  font: inherit;
  font-size: 14px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.search-input.active { display: inline-block; }
.search-input:focus {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  border-color: var(--accent);
}
#status {
  display: none;
}
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: none;
}
.spinner.active { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.table-wrap {
  background: var(--surface);
  overflow: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: none;
}
.table-wrap::-webkit-scrollbar {
  display: none;
}
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td {
  padding: 4px 6px;
  font-size: 19px;
  font-weight: bold;
  text-align: right;
  border: none;
  border-right: 2px solid #6b7690;
  border-bottom: 2px solid #6b7690;
  white-space: nowrap;
  background: #000000;
  color: var(--text-sub);
}
th:first-child, td:first-child { border-left: 2px solid #6b7690; }
thead th { border-top: 2px solid #6b7690; }
th {
  background: #000000;
  color: var(--text-sub);
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  letter-spacing: 0.02em;
  padding: 6px 6px;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: #fff; }
th.sortable .sort-arrow { position: absolute; top: 2px; right: 3px; font-size: 10px; line-height: 1; color: var(--text-sub); }
th.sortable.sort-asc .sort-arrow::after { content: '▲'; }
th.sortable.sort-desc .sort-arrow::after { content: '▼'; }
/* 相場列: クリックで循環選択した先頭局面を、その局面色の丸で見出し右上に表示 */
th[data-sort="marketPhase"] .sort-arrow { font-size: 14px; }
th[data-sort="marketPhase"].phase-kinyu .sort-arrow::after { content: '●'; color: #60a5fa; }
th[data-sort="marketPhase"].phase-gyoseki .sort-arrow::after { content: '●'; color: #ff8f5e; }
th[data-sort="marketPhase"].phase-gyaku-kinyu .sort-arrow::after { content: '●'; color: #c084fc; }
th[data-sort="marketPhase"].phase-gyaku-gyoseki .sort-arrow::after { content: '●'; color: #4ade80; }
th[data-sort="styleCell"].style-garp .sort-arrow::after { content: '●'; color: #4ade80; }
th[data-sort="styleCell"].style-growth .sort-arrow::after { content: '●'; color: #ff8f5e; }
th[data-sort="styleCell"].style-value .sort-arrow::after { content: '●'; color: #60a5fa; }
th[data-sort="styleCell"].style-blend .sort-arrow::after { content: '●'; color: var(--text-sub); }
th.hold-toggle { cursor: pointer; user-select: none; }
th.hold-toggle:hover { color: #fff; }
th.hold-toggle .sort-arrow { position: absolute; top: 2px; right: 3px; font-size: 10px; line-height: 1; color: var(--text-sub); }
th.hold-toggle.active { color: var(--accent); }
th.hold-toggle.active .sort-arrow::after { content: '▲'; }
th.narrow-col, td.revGrowth0, td.revGrowth1, td.equityRatio, td.change1m, td.change3m, td.change1y, td.payoutRatio, td.netCashRatio, td.turnover, td.opMargin, td.high52, td.targetUpside { padding-left: 3px; padding-right: 3px; }
th.narrow-col { max-width: 40px; }
th[data-sort="equityRatio"] { max-width: 60px; }
th[data-sort^="change"] { max-width: 60px; }
/* スコア計算に使われる指標列の見出し上部の緑線（太さ3px） */
th[data-sort="per"], th[data-sort="pbr"], th[data-sort="peg"], th[data-sort="roe"], th[data-sort="roa"],
th[data-sort="eps"], th[data-sort="forecastEps0"], th[data-sort="forecastEps1"],
th[data-sort="revGrowth0"], th[data-sort="revGrowth1"], th[data-sort="dividend"],
th[data-sort="payoutRatio"], th[data-sort="shortPct"], th[data-sort="equityRatio"],
th[data-sort="netCashRatio"], th[data-sort="marketCap"], th[data-sort="turnover"],
th[data-sort="weeklyRsi"], th[data-sort="change1m"], th[data-sort="change3m"], th[data-sort="change1y"],
th[data-sort="opMargin"], th[data-sort="high52"], th[data-sort="targetUpside"],
th[data-sort="sectorMom"],
th.earnings-col {
  border-top-width: 3px;
  border-top-color: #4caf50;
}
/* スコア列自体は見出しセルの上下左右を同じ太さ3pxの緑枠で囲んで区別する */
th[data-sort="score"] {
  border-style: solid;
  border-width: 3px;
  border-color: #4caf50;
}
th .unit {
  display: block;
  font-weight: bold;
  font-size: 13px;
  color: #7b8598;
}
tbody tr:hover td { background: #232a3a; }
td.code-cell { text-align: center; padding-left: 2px; padding-right: 2px; }
td.hold-cell { text-align: center; padding-left: 4px; padding-right: 4px; }
input.holdRadio {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  vertical-align: middle;
}
input.holdRadio:hover { border-color: var(--text-sub); }
input.holdRadio:checked {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 42%, transparent 48%);
}
td.name, th.name-col {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
}
th.name-col { z-index: 2; }
td.name { text-align: left; min-width: 112px; max-width: 112px; overflow: hidden; white-space: nowrap; }
a.nameLink { color: inherit; text-decoration: none; }
a.nameLink:hover { color: var(--accent-hover); text-decoration: underline; }
td.name2 { text-align: left; min-width: 200px; max-width: 200px; overflow: hidden; white-space: nowrap; }
th.name-col-2 { min-width: 200px; }
td.exchange { text-align: center; font-weight: bold; }
td.exchange.market-NQ { color: #16a34a; }
td.exchange.market-NY { color: #60a5fa; }
td.exchange.market-AM { color: #eab308; }
td.sector {
  text-align: center;
  font-size: 17px;
  color: var(--text-sub);
  max-width: 110px;
  overflow: hidden;
  cursor: pointer;
  text-overflow: ellipsis;
}
td.sector:hover { color: var(--accent-hover); text-decoration: underline; }
a.priceLink { color: inherit; text-decoration: none; }
a.priceLink:hover { text-decoration: underline; }
input.codeInput {
  width: 76px;
  text-align: center;
  font-size: 19px;
  font-weight: bold;
  padding: 4px 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-sub);
}
input.codeInput:focus {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  border-color: var(--accent);
}
td.memo-cell { padding-left: 4px; padding-right: 4px; overflow: visible; position: relative; }
input.memoInput {
  width: 160px;
  padding: 4px 6px;
  font-size: 17px;
  font-weight: bold;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-sub);
}
input.memoInput:focus {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  border-color: var(--accent);
}
td.memo-cell[data-memo]:not([data-memo=""]):focus-within::after {
  content: attr(data-memo);
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  z-index: 50;
  background: #1a2233;
  color: #f1f5f9;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 480px;
  min-width: 200px;
}
tr.loading td { background: var(--loading-bg) !important; }
tr.done td { background: #000000 !important; }
tr.error td { background: var(--err-bg) !important; }
tr.search-hit td { background: #2a3550 !important; box-shadow: inset 0 0 0 1px var(--accent); }
.err-msg { color: var(--err-text); font-size: 14px; }
.price { font-variant-numeric: tabular-nums; font-weight: 600; }
/* バリュー/グロース判定列（型） */
td.styleCell { text-align: center; font-size: 15px; font-weight: bold; white-space: nowrap; }
td.styleCell.style-garp { color: #4ade80; }   /* 割安×成長の両取り=緑 */
td.styleCell.style-growth { color: #ff8f5e; } /* グロース=オレンジ */
td.styleCell.style-value { color: #60a5fa; }  /* バリュー=青 */
td.styleCell.style-blend { color: var(--text-sub); }
/* β列（S&P500に対する感応度） */
td.beta.beta-high { color: #ff8f5e; }  /* 高β=市場より値動き大=オレンジ */
td.beta.beta-low { color: #4ade80; }   /* 低β=ディフェンシブ=緑 */
/* セクターローテーション列（業種ETFのTOPIX比相対モメンタムによるラベル） */
td.sectorMom { text-align: center; white-space: nowrap; font-size: 15px; font-weight: bold; }
td.sectorMom.sector-strong { color: #4ade80; }  /* セクターがTOPIXより強い=追い風=緑 */
td.sectorMom.sector-weak { color: #ff6b6b; }    /* セクターがTOPIXより弱い=逆風=赤 */
td.sectorMom.sector-neutral { color: var(--text-sub); }
/* 得意相場列（相場サイクル4局面のどこで買われやすい業種か） */
td.marketPhase { text-align: center; white-space: nowrap; font-size: 15px; font-weight: bold; }
td.marketPhase.phase-kinyu { color: #60a5fa; }         /* 金融相場（緩和・金利敏感）=青 */
td.marketPhase.phase-gyoseki { color: #ff8f5e; }       /* 業績相場（シクリカル）=オレンジ */
td.marketPhase.phase-gyaku-kinyu { color: #c084fc; }   /* 逆金融相場（利上げ恩恵）=紫 */
td.marketPhase.phase-gyaku-gyoseki { color: #4ade80; } /* 逆業績相場（ディフェンシブ）=緑 */
td.neg { color: #ff6b6b; }
.estimate-mark { color: #ff6b6b; font-weight: bold; }
td.pos { color: #4ade80; }
/* 予想EPSの前期比マーカー（テキストに含めるとソート・スコアの数値パースが壊れるためCSSで付与） */
td.up::before { content: '▲'; font-size: 0.65em; margin-right: 1px; }
td.down::before { content: '▼'; font-size: 0.65em; margin-right: 1px; }
/* 列見出しの用語解説ツールチップ（ネイティブtitleは文字サイズを変更できないため自前実装）
   thはposition:stickyで固定されており、stickyは絶対配置の基準になるためrelativeへの変更は不要
   （relativeにするとヘッダー固定が壊れて表示が崩れる） */
th[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  z-index: 100;
  background: #1a2233;
  color: #f1f5f9;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  white-space: normal;
  text-align: left;
  max-width: 260px;
  min-width: 180px;
  cursor: default;
}

/* ── スコア内訳ポップアップ ─────────────────────────────── */
td.score { cursor: pointer; }
td.score:not(:empty):hover { text-decoration: underline; }

.score-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
  padding: 12px;
  overscroll-behavior: none;
}
.score-popup-overlay.open { display: flex; }
.score-popup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  width: 100%;
  max-width: 720px;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: none;
  padding: 14px 16px 16px;
}
.score-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: sticky;
  top: -14px; /* .score-popupのpadding分を打ち消して上端に貼り付く */
  background: var(--surface);
  padding: 14px 0 8px;
  margin-top: -14px;
}
.score-popup-title { font-size: 19px; }
.score-popup-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  padding: 4px 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.score-popup-close:hover { background: var(--border); }
.score-popup-note {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.5;
  margin-bottom: 10px;
}
.score-popup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.score-popup-table th, .score-popup-table td {
  border: 1px solid var(--border);
  padding: 5px 8px;
  text-align: left;
  font-weight: bold;
}
.score-popup-table th { background: #232c3f; font-size: 14px; white-space: nowrap; }
.score-popup-table th .unit { display: block; font-size: 14px; color: var(--text-sub); }
.score-popup-table td.num { text-align: right; white-space: nowrap; }
.score-popup-table td.basis { font-size: 14px; color: var(--text-sub); }
.score-popup-group td {
  background: #232c3f;
  color: var(--accent-hover);
  font-size: 14px;
  padding: 4px 8px;
}
.score-popup-total td { background: #232c3f; font-size: 16px; }
.score-popup-table td.pt-good { color: #4ade80; }
.score-popup-table td.pt-bad { color: var(--err-text); }
.score-popup-table td.pt-missing { color: var(--text-sub); }