body{margin:0;font-family:Arial,sans-serif;background:#f7f9fc;color:#333}
*{box-sizing:border-box}

/* HEADER */
.site-header{position:sticky;top:0;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:15px 40px;box-shadow:0 2px 10px rgba(0,0,0,.05);z-index:100}
.logo{font-weight:700;font-size:18px;color:#1e88e5}
.main-nav{display:flex;align-items:center}

/* Pair buttons */
.pair-switch .pair-btn{margin-left:10px;padding:6px 14px;border:1px solid #1e88e5;background:#fff;color:#1e88e5;border-radius:20px;cursor:pointer;font-size:13px;transition:.2s;line-height:1}
.pair-switch .pair-btn:hover{background:#1e88e5;color:#fff}
.pair-switch .pair-btn.is-active{background:#1e88e5;color:#fff}

/* Section */
.section{padding:0 40px;max-width:1200px;margin:auto}
.section h2{margin:0 0 25px 0;font-size:22px;color:#1e88e5}

/* Timeframe */
.timeframe-buttons{margin-bottom:15px}
.timeframe-buttons button{padding:6px 12px;margin-right:8px;border:1px solid #1e88e5;background:#fff;color:#1e88e5;border-radius:4px;cursor:pointer;font-size:13px;transition:.2s}
.timeframe-buttons button:hover{background:#1e88e5;color:#fff}

/* Panels */
.duo-grid{display:flex;gap:12px;padding-top:10px;padding-bottom:30px}
.panel{flex:1 1 0;background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.05);padding:40px;position:relative}

/* CTA top right */
.signal-affiliate.signal-affiliate--topright{position:absolute;top:18px;right:18px}
.affiliate-btn{display:inline-block;padding:8px 16px;font-size:13px;border:1px solid #1e88e5;color:#1e88e5;text-decoration:none;border-radius:4px;transition:.2s;background:#fff}
.affiliate-btn:hover{background:#1e88e5;color:#fff}

/* SignalBox */
.signal-box{padding:18px;border-radius:10px;width:100%;border:1px solid rgba(30,136,229,.18);background:#fbfdff}
.signal-box--strong{box-shadow:0 10px 28px rgba(0,0,0,.08)}
.signal-box.buy{background:linear-gradient(180deg,#e7f3ff 0%,#fff 100%);border-color:rgba(0,187,119,.25)}
.signal-box.sell{background:linear-gradient(180deg,#ffecee 0%,#fff 100%);border-color:rgba(221,51,51,.25)}
.signal-box.wait{background:linear-gradient(180deg,#f3f6fb 0%,#fff 100%);border-color:rgba(85,85,85,.18)}

.signal-box__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.signal-badgeWrap{display:flex;align-items:center;gap:10px}
.signal-badge{display:inline-block;font-weight:700;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(30,136,229,.18);background:#fff;color:#1e88e5;letter-spacing:.5px}
.signal-badge--buy{border-color:rgba(0,187,119,.28);color:#0b7;background:rgba(0,187,119,.06)}
.signal-badge--sell{border-color:rgba(221,51,51,.28);color:#d33;background:rgba(221,51,51,.06)}
.signal-badge--wait{border-color:rgba(85,85,85,.2);color:#555;background:rgba(85,85,85,.06)}
.signal-sub{font-size:12px;color:#5b6b7a}
.signal-pair{font-weight:700;color:#1e88e5}

.signal-main{margin-bottom:12px}
.signal-type{font-size:34px;font-weight:700;margin-bottom:6px;letter-spacing:.5px}
.signal-price{font-size:22px;font-weight:700}
.signal-time{font-size:12px;color:#666;margin-top:2px}

/* Entry/TP/SL */
.signal-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;margin-bottom:14px}
.signal-level{border:1px solid rgba(30,136,229,.14);border-radius:8px;padding:10px 12px;background:rgba(255,255,255,.7)}
.signal-level__k{font-size:12px;color:#4b6b88;margin-bottom:6px}
.signal-level__v{font-size:15px;font-weight:700;color:#1e88e5}

/* Recent trades */
.recentTrades{border-top:1px dashed rgba(30,136,229,.18);padding-top:12px}
.recentTrades__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.recentTrades__title{font-weight:700;color:#1e88e5}
.recentTrades__meta{display:flex;gap:10px;font-size:12px;color:#5b6b7a}
.recentTrades__list{display:grid;grid-template-columns:1fr;gap:8px}

/* 5列（Reason追加） */
.recentTrades__row{
  display:grid;
  grid-template-columns:70px 130px 1fr 80px 70px;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid rgba(30,136,229,.12);
  border-radius:8px;
  background:rgba(255,255,255,.75)
}
.recentTrades__tag{display:inline-block;text-align:center;font-weight:700;font-size:12px;padding:5px 8px;border-radius:999px;border:1px solid rgba(85,85,85,.18);color:#555;background:rgba(85,85,85,.06)}
.recentTrades__tag--buy{border-color:rgba(0,187,119,.28);color:#0b7;background:rgba(0,187,119,.06)}
.recentTrades__tag--sell{border-color:rgba(221,51,51,.28);color:#d33;background:rgba(221,51,51,.06)}
.recentTrades__time{font-size:12px;color:#5b6b7a}
.recentTrades__px{font-size:12px;color:#333}
.recentTrades__res{text-align:right;font-weight:700;font-size:12px}
.recentTrades__res--win{color:#0b7}
.recentTrades__res--loss{color:#d33}
.recentTrades__reason{font-size:12px;color:#5b6b7a;text-align:right}
.recentTrades__empty{font-size:12px;color:#666;padding:10px 0}

/* Backtest metrics */
.backtest-metrics{display:grid;grid-template-columns:1fr;gap:14px}
.metric{border:1px solid rgba(30,136,229,.18);border-radius:6px;padding:14px 16px;background:#fbfdff}
.metric-label{font-size:12px;color:#4b6b88;margin-bottom:6px}
.metric-value{font-size:18px;font-weight:700;color:#1e88e5}

/* ===== Backtest History (scroll) ===== */
.btHistorySection{padding-bottom:80px}
.btHistoryBox{
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  padding:18px 18px 14px 18px;
  border:1px solid rgba(30,136,229,.12);
}
.btHistoryHead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:10px
}
.btHistoryPair{font-weight:700;color:#1e88e5}
.btHistoryNote{font-size:12px;color:#5b6b7a;margin-left:8px}
.btHistoryHead__right{display:flex;gap:12px;font-size:12px;color:#5b6b7a}

/* 高さ固定でスクロール */
.btHistoryScroll{
  max-height:360px;
  overflow-y:auto;
  border-radius:8px;
  border:1px solid rgba(30,136,229,.12);
  background:#fbfdff
}
.btHistoryTable{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  background:#fff
}
.btHistoryTable thead th{
  position:sticky;
  top:0;
  background:#f3f7ff;
  color:#4b6b88;
  text-align:left;
  padding:10px 10px;
  border-bottom:1px solid rgba(30,136,229,.12)
}
.btHistoryTable tbody td{
  padding:9px 10px;
  border-bottom:1px solid rgba(30,136,229,.08);
  white-space:nowrap;
}
.btHistoryTable tbody tr.is-win td{background:rgba(0,187,119,.04)}
.btHistoryTable tbody tr.is-loss td{background:rgba(221,51,51,.04)}
.btHistoryEmpty{padding:14px 10px;color:#666;text-align:center}

/* Responsive */
@media (max-width:768px){
  .site-header{padding:12px 16px}
  .main-nav{flex-wrap:wrap;justify-content:flex-end;gap:8px}
  .pair-switch .pair-btn{margin-left:0}
  .section{padding:50px 16px}
  .duo-grid{flex-direction:column;gap:12px;padding-top:20px;padding-bottom:20px}
  .panel{padding:24px 18px}
  .signal-affiliate.signal-affiliate--topright{position:static;margin-bottom:12px;text-align:right}
  .signal-levels{grid-template-columns:1fr}

  .recentTrades__row{
    grid-template-columns:70px 1fr;
    grid-auto-rows:auto;
  }
  .recentTrades__time{grid-column:2/3;text-align:left}
  .recentTrades__px{grid-column:1/3}
  .recentTrades__res{grid-column:1/3;text-align:left}
  .recentTrades__reason{grid-column:1/3;text-align:left}
  .btHistoryHead{flex-direction:column;align-items:flex-start}
  .btHistoryHead__right{flex-wrap:wrap}
  .btHistoryScroll{max-height:320px}
}

/* ===== Backtest History (scroll) ===== */
.btHistorySection{padding-bottom:80px}
.btHistoryBox{
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  padding:18px 18px 14px 18px;
  border:1px solid rgba(30,136,229,.12);
}
.btHistoryHead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:10px
}
.btHistoryPair{font-weight:700;color:#1e88e5}
.btHistoryNote{font-size:12px;color:#5b6b7a;margin-left:8px}
.btHistoryHead__right{display:flex;gap:12px;font-size:12px;color:#5b6b7a}

/* 高さ固定でスクロール */
.btHistoryScroll{
  max-height:360px;
  overflow-y:auto;
  border-radius:8px;
  border:1px solid rgba(30,136,229,.12);
  background:#fbfdff
}
.btHistoryTable{width:100%;border-collapse:collapse;font-size:12px;background:#fff}
.btHistoryTable thead th{
  position:sticky;
  top:0;
  background:#f3f7ff;
  color:#4b6b88;
  text-align:left;
  padding:10px 10px;
  border-bottom:1px solid rgba(30,136,229,.12)
}
.btHistoryTable tbody td{
  padding:9px 10px;
  border-bottom:1px solid rgba(30,136,229,.08);
  white-space:nowrap;
}
.btHistoryTable tbody tr.is-win td{background:rgba(0,187,119,.04)}
.btHistoryTable tbody tr.is-loss td{background:rgba(221,51,51,.04)}
.btHistoryEmpty{padding:14px 10px;color:#666;text-align:center}

/* 直近5トレード Reason列（スマホ） */
@media (max-width:768px){
  .btHistoryHead{flex-direction:column;align-items:flex-start}
  .btHistoryHead__right{flex-wrap:wrap}
  .btHistoryScroll{max-height:320px}
}

/* Signal を 1.5倍、Backtest を半分（Signal:Backtest=3:2） */
.duo-grid { align-items: stretch; }

.duo-grid .signal-section { flex: 4 1 0; }
.duo-grid .backtest-section { flex: 2 1 0; }