*{box-sizing:border-box}
:root{
  --bg:#eef2f6;--panel:#fff;--line:#c9d1da;--line2:#e3e8ee;
  --text:#111827;--muted:#667085;--blue:#123b66;--blue2:#0b6cf2;
  --green:#0f8a45;--red:#c62828;
}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic UI",sans-serif}
.topbar{min-height:48px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:6px 16px;position:sticky;top:0;z-index:20}
.brand{font-size:18px;font-weight:900}.topright{display:flex;align-items:center;gap:10px;font-size:11px}.topright input{height:30px;border:0;border-radius:4px;padding:0 7px}
.main-nav{display:flex;gap:4px}.nav-link{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.45);padding:5px 10px;border-radius:4px;font-size:12px;font-weight:800}.nav-link.active{background:#fff;color:var(--blue);border-color:#fff}
.wrap{max-width:1400px;margin:auto;padding:10px 12px 32px}.hidden{display:none!important}.api-warning{background:#ffe8e8;color:#991b1b;border:1px solid #efb0b0;padding:7px 10px;margin-bottom:8px;font-size:12px;font-weight:800}
.view-tabs{display:flex;gap:6px;margin-bottom:8px}.view-tab{border:1px solid var(--line);background:#fff;color:#344054;padding:8px 24px;border-radius:5px;font-size:15px;font-weight:900;cursor:pointer}.view-tab.active{background:var(--blue2);border-color:var(--blue2);color:#fff}
.mode-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.source-tabs{display:flex;gap:5px}.source-tab{border:1px solid var(--line);background:#fff;color:#344054;padding:8px 18px;border-radius:999px;font-size:13px;font-weight:900;cursor:pointer}.source-tab.active{background:#163f69;border-color:#163f69;color:#fff}.mode-note{font-size:11px;color:var(--muted);font-weight:700;text-align:right}
.summary{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:8px}.sum{background:#fff;border:1px solid var(--line);padding:9px 11px;min-height:70px}.sum .k{font-size:11px;color:var(--muted);font-weight:700}.sum .v{font-size:21px;font-weight:900;margin-top:2px;white-space:nowrap}.sum-sub{font-size:10px;color:var(--muted);font-weight:800;margin-top:2px}.plus{color:var(--green)}.minus{color:var(--red)}
.panel{background:var(--panel);border:1px solid var(--line);margin-bottom:8px}.chart-panel{padding:12px}.panel-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:7px}.panel-head h1{font-size:20px;margin:0}.subtext{font-size:11px;color:var(--muted);margin-top:2px}.availability{font-size:12px;color:#475467;font-weight:800;text-align:right}
.chart-wrap{position:relative;height:500px;border-top:1px solid var(--line2);overflow:hidden}canvas{display:block;width:100%;height:100%}.tooltip{position:absolute;z-index:5;pointer-events:none;min-width:180px;max-width:280px;background:rgba(17,24,39,.94);color:#fff;border-radius:5px;padding:7px 9px;font-size:11px;line-height:1.45;box-shadow:0 4px 14px rgba(0,0,0,.22)}.tooltip strong{font-size:12px}.tooltip .tplus{color:#8ce3ad}.tooltip .tminus{color:#ff9b9b}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:11px;color:#475467}.legend-item{display:flex;align-items:center;gap:5px}.swatch{display:inline-block;width:22px;height:3px;border-radius:99px}.swatch.avg{height:5px;background:var(--blue2)}.swatch.days{background:rgba(88,120,180,.35)}.swatch.pos{background:var(--green)}.swatch.neg{background:var(--red)}
.info-panel{padding:9px 12px}.info-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px}.info-row span{color:var(--muted)}.info-note{font-size:10px;color:#7a8492;border-top:1px solid var(--line2);padding-top:6px;margin-top:4px}
.stat-panel{padding:10px 12px}.intraday-stats{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.mini-stat{border-right:1px solid var(--line2);padding:3px 9px}.mini-stat:last-child{border-right:0}.mini-stat span,.mini-stat small{display:block;color:var(--muted);font-size:10px}.mini-stat strong{display:block;font-size:16px;margin:2px 0}.daily-breakdown{overflow:auto}.daily-breakdown table{width:100%;border-collapse:collapse;font-size:12px}.daily-breakdown th,.daily-breakdown td{padding:7px 9px;border-bottom:1px solid var(--line2);text-align:right;white-space:nowrap}.daily-breakdown th:first-child,.daily-breakdown td:first-child{text-align:left}.daily-breakdown th{color:var(--muted);font-size:10px}.empty{padding:12px;color:var(--muted);text-align:center}
@media(max-width:1050px){.summary{grid-template-columns:repeat(3,1fr)}.chart-wrap{height:450px}.intraday-stats{grid-template-columns:repeat(4,1fr)}}
@media(max-width:650px){.topbar{align-items:flex-start;gap:7px;padding:7px 10px}.brand{font-size:16px}.topright{justify-content:flex-end;flex-wrap:wrap;gap:5px}.mode-row{align-items:flex-start;flex-direction:column}.mode-note{text-align:left}.source-tabs{width:100%}.source-tab{flex:1;padding:8px 7px}.summary{grid-template-columns:repeat(2,1fr)}.sum .v{font-size:18px}.view-tab{flex:1}.chart-wrap{height:390px}.panel-head{align-items:flex-start;flex-direction:column}.availability{text-align:left}.intraday-stats{grid-template-columns:repeat(2,1fr)}.wrap{padding:8px 8px 24px}}

/* PROFIT_ORIGINAL_LAYOUT_V1_START */

/*
  Applies ONLY while profit is selected.
  These are the layout values from before
  the graph-width work.
*/

body.profit-original-layout-v1 main.wrap{
  max-width:1400px!important;
  width:auto!important;

  margin-left:auto!important;
  margin-right:auto!important;

  padding-left:12px!important;
  padding-right:12px!important;
}


body.profit-original-layout-v1 .chart-panel{
  width:auto!important;
  max-width:none!important;

  margin-left:0!important;
  margin-right:0!important;

  padding:12px!important;

  box-sizing:border-box!important;
}


body.profit-original-layout-v1 #chartWrap{
  position:relative!important;

  width:auto!important;
  max-width:none!important;

  height:500px!important;

  margin-left:0!important;
  margin-right:0!important;

  border-top:
    1px solid var(--line2)
    !important;

  overflow:hidden!important;
}


body.profit-original-layout-v1 #profitChart{
  width:100%!important;
  height:100%!important;

  max-width:none!important;

  margin:0!important;
}

/* PROFIT_ORIGINAL_LAYOUT_V1_END */

/* ANALYSIS_PC_GRAPH_SIZE_V2_START */

/*
  PC (デスクトップ幅) だけグラフ表示領域を以前の大きさへ戻す。
  1050px 以下 (タブレット / スマホ) の既存レスポンシブ指定は一切変更しない。
  表示領域のみ。データ点数・期間・集計値は変更しない。
*/
@media (min-width:1051px){

  .chart-panel,
  body.profit-original-layout-v1 .chart-panel{
    width:calc(100vw - 24px)!important;
    max-width:none!important;

    margin-left:50%!important;
    margin-right:0!important;

    transform:
      translateX(-50%)
      !important;
  }

  .chart-wrap,
  body.profit-original-layout-v1 #chartWrap{
    width:100%!important;
    max-width:none!important;

    height:
      clamp(
        620px,
        68vh,
        820px
      )
      !important;
  }

  .chart-wrap canvas,
  body.profit-original-layout-v1 #chartWrap canvas{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
  }
}

/* ANALYSIS_PC_GRAPH_SIZE_V2_END */

/* UI_ANALYSIS_KPI_EXPANSION_20260915_START
   KPI カードを 6 枠固定から 16 枠へ拡張する。既存の .sum / .sum .k / .sum .v /
   .sum-sub / .plus / .minus の見た目はそのまま使い、列数と的中率の強調だけ足す。
   グラフ・LIVE 画面の CSS には触らない。 */
@media (min-width:1051px){
  .summary{
    grid-template-columns:repeat(4,1fr)!important;
    gap:7px!important;
  }
}
@media (min-width:651px) and (max-width:1050px){
  .summary{grid-template-columns:repeat(3,1fr)!important}
}
@media (max-width:650px){
  /* スマホは 2 列固定。横スクロールを出さない。 */
  .summary{grid-template-columns:repeat(2,1fr)!important}
  .sum{padding:8px 9px;min-height:64px}
  .sum .v{font-size:17px}
  .sum .k{font-size:10px}
  .sum-sub{font-size:9px}
}
.sum .v{
  /* 長い数値でカードからはみ出さない */
  overflow:hidden;
  text-overflow:ellipsis;
}
/* 今回いちばん重要な 2 指標。補助文字ではなく常時見える KPI カードにする。 */
.sum-hl{
  border-color:#0b6cf2;
  background:#f2f7ff;
  box-shadow:inset 0 0 0 1px rgba(11,108,242,.18);
}
.sum-hl .k{color:#0b4fb0}
.sum-hl .v{color:#0b3f86;font-size:24px}
.sum-hl .sum-sub{color:#3b6ba8}
@media (max-width:650px){
  .sum-hl .v{font-size:19px}
}
/* UI_ANALYSIS_KPI_EXPANSION_20260915_END */

/* UI_ANALYSIS_KPI_COMPACT_20261001_START
   ユーザー指示「損益～最大1R損失までのスペースが大きすぎる。小さく調整」。
   16 枠・並び順・列数 (PC 4 / タブレット 3 / スマホ 2)・値は変更しない。
   カード内を「項目名 左 / 値 右」の 1 行にして高さだけ詰める。 */
.summary{gap:5px!important;margin-bottom:8px}
.sum{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:8px;
  padding:5px 10px;
  min-height:0;
}
.sum .k{grid-column:1;grid-row:1;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum .v{grid-column:2;grid-row:1 / span 2;margin-top:0;font-size:20px;line-height:1.15;text-align:right}
.sum-sub{grid-column:1;grid-row:2;margin-top:0;font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum-hl .v{font-size:21px}
.sum{min-height:40px}
.sum:not(:has(.sum-sub)) .k{grid-row:1 / span 2}
@media (max-width:650px){
  .sum{padding:5px 8px;min-height:36px}
  .sum .k{font-size:10px}
  .sum .v{font-size:16px}
  .sum-hl .v{font-size:17px}
  .sum-sub{font-size:9px}
}
/* UI_ANALYSIS_KPI_COMPACT_20261001_END */