/* Arbitrage page — premium design */
.arbitrage-page{max-width:var(--page-width,1360px);}


/* ─── Live indicator ─── */
.live-indicator{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--c-positive);text-transform:uppercase;
}
.live-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--c-positive);
  box-shadow:0 0 6px color-mix(in srgb, var(--c-positive) 60%, transparent);
  animation:live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.4;transform:scale(.7);}
}

/* ─── Refresh (reserved, no HTML yet) ─── */

/* ─── Checkbox control ─── */
.control-checkbox{
  display:flex;align-items:center;gap:6px;cursor:pointer;
  flex-direction:row-reverse;
}
.control-checkbox input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--accent);cursor:pointer;
}
.control-checkbox .label{margin-bottom:0;}

/* ─── Summary bar ─── */
.summary-bar{
  display:flex;align-items:center;gap:8px;
  padding:6px 14px;
  font-size:11px;font-weight:600;
  color:var(--muted);
  letter-spacing:.02em;
}
.summary-stat{display:inline-flex;align-items:center;gap:4px;}
.summary-stat strong{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;}
.summary-sep{width:1px;height:12px;background:color-mix(in srgb, var(--border) 50%, transparent);}

/* ─── Table ─── */
#arbitrageTable{min-width:780px;border-collapse:separate;border-spacing:0;}

/* Sticky header */
#arbitrageTable thead{position:sticky;top:0;z-index:3;}
#arbitrageTable thead th{
  background:color-mix(in srgb, var(--bg-elev) 95%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid color-mix(in srgb, var(--border) 50%, transparent);
  padding:8px 8px;
  font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}
/* Shrink-to-content columns (width:1% trick) — Pair stays flexible */
.th-coin{width:1%;white-space:nowrap;}
.th-pair{}
.th-price{width:1%;white-space:nowrap;}
.th-funding{width:1%;white-space:nowrap;}
.th-spread{width:1%;white-space:nowrap;}
.th-open{width:1%;white-space:nowrap;}
#arbitrageTable td{white-space:nowrap;}

/* Sort indicators */
#arbitrageTable th.sortable{cursor:pointer;user-select:none;transition:color .12s;}
#arbitrageTable th.sortable:hover{color:var(--accent);}
#arbitrageTable th.sort-active{color:var(--accent);}
#arbitrageTable th.sort-active::after{
  content:'';display:inline-block;
  width:0;height:0;margin-left:5px;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;
}
#arbitrageTable th.sort-asc::after{border-bottom:5px solid var(--accent);}
#arbitrageTable th.sort-desc::after{border-top:5px solid var(--accent);}

/* ─── Row design ─── */
#arbitrageTable tbody tr{
  cursor:pointer;
  transition:background .12s,border-color .12s;
  border-left:3px solid transparent;
}
#arbitrageTable tbody tr:hover{
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  border-left-color:var(--accent);
}
#arbitrageTable tbody td{
  padding:6px 8px;
  border-bottom:1px solid color-mix(in srgb, var(--border) 30%, transparent);
  vertical-align:middle;
}
.row-selected{
  background:color-mix(in srgb, var(--accent) 8%, transparent) !important;
  border-left-color:var(--accent) !important;
}

/* Row fade-in animation */
@keyframes row-fade-in{
  from{opacity:0;transform:translateY(4px);}
  to{opacity:1;transform:translateY(0);}
}
#arbitrageTable tbody tr:not(.empty-state){
  animation:row-fade-in .25s ease-out both;
}

/* ─── Pair cell ─── */
.pair-cell{display:flex;flex-direction:column;gap:2px;}
.pair-leg{display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap;}
.leg-pill{
  padding:2px 0;
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.03em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  flex:0 0 44px;
  text-transform:uppercase;
}
.leg-pill.short{
  color:var(--c-negative);
  background:color-mix(in srgb, var(--c-negative) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--c-negative) 20%, transparent);
}
.leg-pill.long{
  color:var(--c-positive);
  background:color-mix(in srgb, var(--c-positive) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--c-positive) 20%, transparent);
}
.leg-pill.spot{
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.exchange-quote{color:var(--muted);font-size:11px;}

/* Compact exchange icons */
.arbitrage-page .exchange-icon,
.arbitrage-page .exchange-fallback{width:16px;height:16px;flex:0 0 16px;}

/* ─── Fund split in table ─── */
.fund-split{display:flex;flex-direction:column;gap:1px;}
.fund-line{display:flex;align-items:baseline;gap:3px;font-size:12px;line-height:1.3;}
.fund-label{
  font-size:10px;font-weight:700;
  color:var(--muted);text-transform:uppercase;
  min-width:12px;
}
.fund-line.long .fund-value{color:var(--c-positive);}
.fund-line.short .fund-value{color:var(--c-negative);}
.fund-line.spot .fund-value{color:var(--accent);}
.fund-value{font-weight:600;font-variant-numeric:tabular-nums;}

/* Interval badge */
.interval-badge{
  font-size:10px;font-weight:600;
  color:var(--muted);opacity:.65;
}

/* Countdown timer */
.fund-timer{
  font-size:10px;font-weight:600;
  color:var(--muted);opacity:.6;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.fund-timer.soon{color:var(--c-negative);opacity:.9;}

/* Price value */
.price-value{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);font-size:11px;}

/* Rate coloring — shared via styles.css; .rate-neutral added there */

/* ─── Column styles ─── */
/* ─── Combined spread column ─── */
#arbitrageTable td.td-spread{
  font-variant-numeric:tabular-nums;
}
.spread-primary{
  font-weight:700;font-size:13px;line-height:1.2;
}
.spread-secondary{
  font-size:11px;color:var(--muted);opacity:.7;line-height:1.2;
}
.spread-swap{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-left:3px;
  border:none;background:none;cursor:pointer;
  color:var(--muted);font-size:10px;opacity:.5;
  transition:opacity .12s,color .12s;
  vertical-align:middle;padding:0;
}
.spread-swap:hover{opacity:1;color:var(--accent);}

/* ─── Coin cell ─── */
.coin-cell{display:flex;align-items:center;gap:8px;}
.coin-name{font-weight:700;font-size:13px;letter-spacing:.01em;}
.coin-actions{display:flex;gap:3px;margin-left:auto;opacity:0;transition:opacity .15s;}
#arbitrageTable tbody tr:hover .coin-actions{opacity:1;}
.coin-actions .glass-button{
  padding:3px 6px;
  font-size:10px;
  font-weight:700;
  backdrop-filter:none;
  box-shadow:none;
  border-radius:6px;
  min-width:22px;
}
.coin-actions .glass-button:hover{
  background:color-mix(in srgb, var(--accent) 15%, transparent);
  color:var(--accent);
}


/* ─── History modal status grid ─── */
.arb-history-status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.arb-history-leg{
  padding:10px 12px;
  border-radius:12px;
  background:color-mix(in srgb, var(--bg-elev) 85%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size:12px;
}
.arb-history-leg .leg-title{font-weight:700;margin-bottom:6px;font-size:13px;}
.arb-history-leg .leg-detail{color:var(--muted);font-size:11px;line-height:1.6;}

/* ─── Builder ─── */
.builder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px;}
.builder-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.builder-status{font-size:11px;color:var(--muted);min-height:16px;}
.builder-status.is-error{color:var(--c-negative);}
.builder-status.is-success{color:var(--c-positive);}
.builder-result{display:flex;flex-direction:column;gap:8px;padding-top:8px;}
.builder-link{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:8px 10px;border-radius:12px;
  background:color-mix(in srgb, var(--bg-elev) 85%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size:12px;
}
.builder-link a{color:inherit;text-decoration:none;overflow-wrap:anywhere;}
.builder-link a:hover{color:var(--accent);}

/* ─── Mobile cards ─── */
.card-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:10px;
  padding:8px 2px 12px;
}
.card-list .empty-state{grid-column:1/-1;text-align:center;color:var(--muted);padding:18px 12px;}
.data-card{
  padding:14px;border-radius:16px;
  background:color-mix(in srgb, var(--bg-elev) 85%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow:var(--glass-shadow);
  display:flex;flex-direction:column;gap:10px;
  cursor:pointer;
  transition:border-color .15s,transform .12s;
}
.data-card:hover{
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border));
  transform:translateY(-1px);
}
.card-header{display:flex;align-items:center;justify-content:space-between;}
.card-title{font-weight:700;font-size:14px;}
.card-apr{font-weight:800;font-size:14px;}
.card-metrics{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:12px;}
.card-metric-label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em;}
.card-metric-value{font-weight:600;font-variant-numeric:tabular-nums;}

/* Card fade-in */
@keyframes card-fade-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
.data-card{animation:card-fade-in .3s ease-out both;}

/* ─── Shimmer skeleton ─── */
@keyframes shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}
.top-loading-skeleton span{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--border) 30%, transparent) 25%,
    color-mix(in srgb, var(--border) 60%, transparent) 50%,
    color-mix(in srgb, var(--border) 30%, transparent) 75%
  );
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
}

/* ─── Empty state ─── */
.empty-state td.empty{
  text-align:center;
  color:var(--muted);
  font-size:13px;
  padding:32px 16px;
}

/* ─── Contract links ─── */
.contract-link{
  color:inherit;
  text-decoration:none;
  transition:color .12s;
}
.contract-link:hover{color:var(--accent);}

/* ─── Responsive ─── */
@media (max-width: 960px){
  .arbitrage-page{max-width:100%;}
  #arbitrageTable{display:none;}
  #cardList{display:grid !important;}
  .arb-history-status-grid{grid-template-columns:1fr;}
  .nav-links{gap:4px;}
  .controls-row{flex-wrap:wrap;}
}

@media (max-width: 480px){
  .card-list{grid-template-columns:1fr;}
  .glass-toolbar{flex-direction:column;gap:12px;align-items:stretch;}
  .actions{justify-content:center;flex-wrap:wrap;}
}