/* Arbitrage page — premium design */
.arbitrage-page{max-width:1200px;}
@media (min-width:1280px){.arbitrage-page{max-width:1360px;}}

/* Favorites */
.arb-fav-btn{opacity:0.35;transition:opacity .15s,color .15s;}
.arb-fav-btn:hover{opacity:0.7;}
.arb-fav-btn.is-fav{opacity:1;color:#ffd54f !important;text-shadow:0 0 4px rgba(255,213,79,.4);}

/* Funding timer */
.funding-timer{font-size:10px;color:var(--muted,#888);font-variant-numeric:tabular-nums;}

/* Rate display */
.rate-main{font-size:13px;font-weight:600;line-height:1.3;}
.rate-sub{font-size:10px;color:var(--muted,#888);line-height:1.2;margin-top:1px;}

/* Fund rows (stacked vertically, one line per leg) */
.fund-row{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;line-height:18px;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* Nav links */
.nav-links{display:flex;gap:6px;align-items:center;}
.nav-link{
  padding:6px 12px;
  border-radius:var(--r-pill);
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  color:var(--muted);
  border:1px solid transparent;
  transition:color .15s,border-color .15s,background .15s;
}
.nav-link:hover{color:var(--text);}
.nav-link.active{
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 40%, transparent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ─── Live indicator ─── */
.live-indicator{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  color:#1dd1a1;text-transform:uppercase;
}
.live-dot{
  width:7px;height:7px;border-radius:50%;
  background:#1dd1a1;
  box-shadow:0 0 6px rgba(29,209,161,.6);
  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 speed selector ─── */
.refresh-control{min-width:auto !important;}
.refresh-speed-group{
  display:flex;gap:2px;
  background:color-mix(in srgb, var(--bg-elev) 60%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius:10px;padding:2px;
}
.refresh-speed-btn{
  padding:4px 8px;border:none;border-radius:8px;
  font-size:11px;font-weight:700;cursor:pointer;
  background:transparent;color:var(--muted);
  transition:all .15s;
}
.refresh-speed-btn:hover{color:var(--text);}
.refresh-speed-btn.active{
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  color:var(--accent);
  box-shadow:0 1px 4px rgba(255,213,79,.15);
}

/* ─── 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{width:100%;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:10px 12px;
  white-space:nowrap;
}
.th-coin{width:1%;}
.th-pair{}
.th-apr{width:1%;}
.th-fund{width:1%;}
.th-open{width:1%;}

/* 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:4px 10px;
  border-bottom:1px solid color-mix(in srgb, var(--border) 30%, transparent);
  vertical-align:middle;
  white-space:nowrap;
}
.row-selected{
  background:color-mix(in srgb, var(--accent) 8%, transparent) !important;
  border-left-color:var(--accent) !important;
}

/* Row fade-in animation (first load only) */
@keyframes row-fade-in{
  from{opacity:0;transform:translateY(4px);}
  to{opacity:1;transform:translateY(0);}
}
#arbitrageTable.first-render 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:11px;line-height:18px;white-space:nowrap;}
.pair-leg .exchange-cell{gap:3px;min-width:0;flex:0 1 auto;}
.pair-leg .exchange-safe-badge,
.pair-leg .exchange-bypass-badge,
.pair-leg .exchange-verified-badge,
.pair-leg .exchange-degraded-badge{width:12px;height:12px;font-size:9px;}
.leg-price{
  font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.leg-contract{
  font-size:10px;color:var(--muted);opacity:.8;
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'Courier New',monospace;
}
.leg-contract-card{
  font-size:10px;color:var(--muted);opacity:.8;
  font-family:'Courier New',monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ─── Rate /8h sub-line ─── */
.rate-8h{
  font-size:9px;color:var(--muted);opacity:.7;
  margin-top:1px;font-variant-numeric:tabular-nums;
}
.leg-pill{
  padding:2px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.03em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  text-transform:uppercase;
}
.leg-pill.short{
  color:#ff6b6b;
  background:rgba(255,107,107,.1);
  border:1px solid rgba(255,107,107,.2);
}
.leg-pill.long{
  color:#1dd1a1;
  background:rgba(29,209,161,.1);
  border:1px solid rgba(29,209,161,.2);
}
.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:2px;}

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

/* ─── Rate coloring ─── */
.rate-positive{color:#1dd1a1;}
.rate-negative{color:#ff6b6b;}
.rate-neutral{color:var(--muted);}

/* APR column — more prominent */
.rate-main{font-weight:700;font-variant-numeric:tabular-nums;}

/* ─── 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);
}

/* ─── Dropdown ─── */
.dropdown{position:relative;}
.dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:240px;
  max-height:min(360px, 60vh);
  overflow:auto;
  overscroll-behavior:contain;
  padding:10px;
  border-radius:14px;
  z-index:10;
  background:color-mix(in srgb, var(--bg-elev) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(12px);
}
.dropdown-actions{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;}
.dropdown-list{display:flex;flex-direction:column;gap:4px;}
.dropdown-item{display:flex;align-items:center;gap:8px;font-size:12px;}

.ghost-button{
  background:transparent;
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  padding:5px 10px;
  border-radius:10px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  color:var(--text);
  transition:all .12s;
}
.ghost-button:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--border));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:#ff6b6b;}
.builder-status.is-success{color:#1dd1a1;}
.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) !important;}

/* ─── 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;}
  .refresh-control{order:10;}
}

@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;}
}