:root{
  --bg:#f7f9ff;
  --panel:#ffffff;
  --text:#0b1020;
  --muted:#5b6b8a;
  --border:#e4eaf6;

  --primary:#1652f0;
  --accent:#2b7cff;

  --ok:#1652f0;
  --danger:#d92d20;

  --chip:#1652f0;

  --buy-bg:#eef4ff;
  --buy-br:#cfe0ff;
  --buy-fg:#0b2a7a;

  --sell-bg:#fff1f1;
  --sell-br:#ffd0d0;
  --sell-fg:#8a1f1f;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background: var(--bg);
  line-height:1.5;
}

.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px clamp(16px,5vw,36px);
  position:sticky;top:0;background:rgba(247,249,255,.9);
  z-index:10;border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:36px;height:36px;border-radius:10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(43,124,255,.85), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(22,82,240,.85), transparent 45%),
    #ffffff;
  border:1px solid var(--border);
  display:grid;place-items:center;font-weight:900;color:#0b1020;
  box-shadow:0 0 0 1px rgba(22,82,240,.08) inset, 0 10px 22px rgba(11,16,32,.06);
}
.logo-img{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--border);object-fit:cover;
  box-shadow:0 0 0 1px rgba(22,82,240,.08) inset, 0 10px 22px rgba(11,16,32,.06);
}
.title h1{margin:0;font-size:1.25rem;letter-spacing:.2px}
.subtitle{margin:2px 0 0;color:var(--muted);font-size:.9rem}

.controls{
  display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:12px;align-items:end;
}
@media (max-width:1200px){
  .controls{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(180px,max-content));justify-items:start;}
}
.control{display:flex;flex-direction:column;gap:6px}
.label{color:var(--muted);font-size:.8rem}
.input-wrap{position:relative;display:flex;align-items:center;}
.input-wrap input{
  width:100px;padding:8px 28px 8px 10px;border-radius:10px;background:#ffffff;color:var(--text);
  border:1px solid var(--border);outline:none;
  box-shadow:0 1px 0 rgba(11,16,32,.03);
}
.input-wrap input:focus{
  border-color:#cfe0ff;
  box-shadow:0 0 0 3px rgba(22,82,240,.12);
}
.suffix{position:absolute;right:8px;color:var(--muted);font-size:.9rem}

.sign-btn{
  margin-left:12px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(22,82,240,.18);
  color:#ffffff;
}
.sign-btn:hover{
  box-shadow:0 0 0 3px rgba(22,82,240,.14), 0 16px 30px rgba(22,82,240,.12);
}

.dropdown{ position:relative; width:clamp(220px,28vw,340px); }
.dropdown>summary{
  list-style:none;cursor:pointer;border:1px solid var(--border);background:#ffffff;
  padding:8px 12px;border-radius:10px;user-select:none;width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 1px 0 rgba(11,16,32,.03);
}
.dropdown[open]>summary{ box-shadow:0 0 0 3px rgba(22,82,240,.12); border-color:#cfe0ff; }
.dropdown .menu{
  position:absolute;top:110%;left:0;width:clamp(220px,28vw,340px);max-height:60vh;overflow:auto;
  background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:8px;display:grid;gap:6px;z-index:20;
  box-shadow:0 14px 34px rgba(11,16,32,.10);
}
.menu-item{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:8px}
.menu-item:hover{ background:#f1f6ff; }

.chip{
  padding:6px 10px;border-radius:999px;
  background:linear-gradient(90deg, rgba(22,82,240,.14), rgba(43,124,255,.14));
  color:var(--primary);font-weight:800;font-size:.8rem;border:1px solid #cfe0ff;
}

.btn{
  padding:10px 14px;border-radius:10px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  color:#ffffff;border:1px solid rgba(22,82,240,.18);cursor:pointer;font-weight:700;
  transition:transform .08s ease, box-shadow .2s ease;
}
.btn:hover{ box-shadow:0 0 0 3px rgba(22,82,240,.14), 0 16px 30px rgba(22,82,240,.12); }
.btn:active{ transform:translateY(1px); }

.container{
  max-width:1180px;margin:0 auto;padding:16px clamp(16px,5vw,36px) 48px;
  display:grid;grid-template-columns:1fr;gap:16px;
}
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 16px 20px;
  box-shadow:0 10px 26px rgba(11,16,32,.05);
}
.panel-header{display:flex;justify-content:space-between;align-items:end;margin-bottom:8px}
.panel h2{margin:0;font-size:1.05rem}
.status{color:var(--muted);font-size:.9rem}

.table-wrap{overflow:hidden;border-radius:12px;border:1px solid var(--border);background:#ffffff}
.table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}
.table thead th{
  text-align:left;padding:12px;background:#f3f6ff;color:#23304a;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1;font-weight:700
}
.table th.num,.table td.num{text-align:right}
.table th.center,.table td.center{text-align:center}
.table tbody td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}

.table tbody td:nth-child(1){width:96px;}
.table tbody td:nth-child(2){width:240px;}
.table tbody td:nth-child(3){width:180px;}
.table tbody td:nth-child(4){width:240px;}
.table tbody td:nth-child(5){width:180px;}
.table tbody td:nth-child(6){width:100px;}
.table tbody td:nth-child(7){width:130px;}

.table thead th:nth-child(3),
.table tbody td:nth-child(3),
.table thead th:nth-child(5),
.table tbody td:nth-child(5){
  text-align:left !important;
  padding-left:12px !important;
  padding-right:12px !important;
}

.venue-cell .venue-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.venue-cell .venue-chain{color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table tbody tr:hover{ background:#f6f9ff; }

.price{font-variant-numeric:tabular-nums;margin:0}
.spread{font-weight:900}
.spread.positive{ color:var(--ok); }
.spread.negative{ color:var(--danger); }

.price-cell{ display:flex;flex-direction:column;align-items:flex-start;gap:8px; min-width:0; }
.actions-inline{display:flex;gap:8px;flex-wrap:wrap}
.action-btn{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);
  background:#ffffff;color:var(--text);cursor:pointer;font-size:.83rem;text-decoration:none;font-weight:700
}
.action-btn:hover{ box-shadow:0 0 0 3px rgba(22,82,240,.10); border-color:#cfe0ff; }
.action-btn.buy{background:var(--buy-bg);border-color:var(--buy-br);color:var(--buy-fg)}
.action-btn.sell{background:var(--sell-bg);border-color:var(--sell-br);color:var(--sell-fg)}
.action-btn.disabled{opacity:.45;pointer-events:none}

.expand-cell{text-align:center;}
.expand-btn{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;border:1px solid var(--border);
  background:#ffffff;color:var(--text);cursor:pointer;font-size:.85rem;font-weight:700;
}
.expand-btn:hover{ box-shadow:0 0 0 3px rgba(22,82,240,.10); border-color:#cfe0ff; }
.expand-btn svg{width:14px;height:14px;transition:transform .15s ease;color:var(--primary)}
.expand-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.table td.row-details{ padding:0 !important; }
.row-details{display:none;background:#f3f6ff;border-top:1px dashed #cfe0ff}
.row-details .list{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:10px 12px 12px 12px;
  justify-items:stretch;align-items:stretch;width:100%;grid-auto-rows:1fr;
}
@media (max-width:1400px){ .row-details .list{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:1100px){ .row-details .list{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:850px){  .row-details .list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){  .row-details .list{ grid-template-columns:1fr; } }

.pill{
  width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border-radius:10px;border:1px solid var(--border);
  background:#ffffff;color:var(--text);text-decoration:none;
  transition:box-shadow .15s ease, border-color .15s ease, background .15s ease, transform .05s ease;
  min-height:42px;
}
.pill:hover{ box-shadow:0 0 0 3px rgba(22,82,240,.10); border-color:#cfe0ff; }
.pill:active{ transform:translateY(1px) }
.pill .left{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.pill .left .name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem}
.pill .left .chain{color:var(--muted);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill .price{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text);font-size:.85rem}

.badges{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.badge{
  font-size:.65rem;font-weight:900;padding:2px 6px;border-radius:999px;border:1px solid var(--border);
  background:#f1f6ff;color:#0b2a7a;
}

.pill.status-low{
  border-color:#bcd3ff;background:#eef4ff;
  box-shadow:0 0 0 1px rgba(22,82,240,.08), 0 0 18px rgba(22,82,240,.08) inset;
}
.pill.status-low .badge{background:#e6efff;border-color:#bcd3ff;color:#0b2a7a}
.pill.status-high{
  border-color:#ffd0d0;background:#fff1f1;
  box-shadow:0 0 0 1px rgba(217,45,32,.08), 0 0 18px rgba(217,45,32,.06) inset;
}
.pill.status-high .badge{background:#ffe8e8;border-color:#ffd0d0;color:#8a1f1f}

.assumptions{margin:0;padding-left:18px;color:#3b4a67}
.assumptions li{margin:6px 0}

.footer{
  position:fixed;bottom:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px clamp(16px,5vw,36px);
  background:rgba(247,249,255,.92);
  border-top:1px solid var(--border);
  color:#3b4a67;z-index:50;
  backdrop-filter: blur(8px);
}
.foot-actions{display:flex;gap:10px;align-items:center}
.footer a{ color:var(--primary); text-decoration:none; font-weight:700; }
.footer a:hover{ text-decoration:underline; }

@media (max-width:900px){
  .label{font-size:.75rem}
  .controls{gap:8px}
  .panel{padding:12px 12px 14px}
}
@media (max-width:720px){
  .header{flex-direction:column;align-items:flex-start;gap:10px}
  .controls{width:100%;grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:10px}
  .control{width:100%}
  .dropdown{width:100%}
  .dropdown .menu{width:min(92vw,360px)}
  .btn{width:100%;padding:9px 12px}
  .btn#refresh{order:1;width:100%}
  .sign-btn{order:2;width:100%;margin-left:0;text-align:center}
}
@media (max-width:680px){
  .table-wrap{border:0}
  .table{display:block}
  .table thead{display:none}
  .table tbody{display:block}
  .table tbody tr{
    display:block;background:var(--panel);border:1px solid var(--border);border-radius:12px;margin:10px 0;padding:8px 10px;
    box-shadow:0 10px 22px rgba(11,16,32,.05);
  }
  .table tbody td{
    display:flex;gap:8px;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:0;
  }
  .table tbody td:nth-child(1)::before{ content:"Token"; color:var(--muted); }
  .table tbody td:nth-child(2)::before{ content:"Lowest Venue"; color:var(--muted); }
  .table tbody td:nth-child(3)::before{ content:"Price (Low)"; color:var(--muted); }
  .table tbody td:nth-child(4)::before{ content:"Highest Venue"; color:var(--muted); }
  .table tbody td:nth-child(5)::before{ content:"Price (High)"; color:var(--muted); }
  .table tbody td:nth-child(6)::before{ content:"Spread %"; color:var(--muted); }
  .table tbody td:nth-child(7)::before{ content:"Venues"; color:var(--muted); }

  .venue-cell .venue-chain{ display:none; }
  .venue-cell .venue-name{ font-size:.95rem; }

  .price-cell{ flex-direction:row; align-items:center; gap:8px; }
  .price-cell .price{ font-size:.95rem; }

  .action-btn{ padding:4px 8px; font-size:.76rem; border-radius:6px; }

  .table td.row-details, .row-details{ display:none !important; }

  .expand-btn{
    background:#f3f6ff;color:#6a7aa0;cursor:not-allowed;position:relative;
    border-color:#dbe5fb;
  }
  .expand-btn::after{
    content:"Feature only available on desktop";
    position:absolute;top:120%;left:50%;transform:translateX(-50%);
    background:#ffffff;color:#23304a;font-size:.75rem;padding:6px 10px;border-radius:6px;border:1px solid var(--border);
    white-space:nowrap;display:none;z-index:50;
    box-shadow:0 10px 22px rgba(11,16,32,.08);
  }
  .expand-btn:active::after, .expand-btn:focus::after{ display:block; }

  .row-details .list{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .pill{ padding:6px 8px; min-height:36px; }
  .pill .left .name{ font-size:.78rem; }
  .pill .left .chain{ display:none; }
  .pill .price{ font-size:.8rem; }
}
@media (max-width:420px){
  .table tbody td::before{ flex:0 0 38%; font-size:.7rem; }
  .price-cell .price{ font-size:.9rem; }
  .controls{ grid-template-columns:1fr; }
  .dropdown .menu{ width:94vw; }
  .footer{ padding:16px; }
}

.pill-mini{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  background:#ffffff;border:1px solid var(--border);color:#23304a;text-decoration:none;font-size:.82rem;line-height:1;cursor:pointer;
  transition:box-shadow .2s ease, transform .06s ease, border-color .2s ease;
  box-shadow:0 1px 0 rgba(11,16,32,.03);
}
.pill-mini:hover{ box-shadow:0 0 0 3px rgba(22,82,240,.10); border-color:#cfe0ff; }
.pill-mini:active{ transform:translateY(1px) }

.ca-pill .ca-label{ color:var(--muted); }
.copy-ic{ opacity:.9; color:var(--primary); }

.ca-pill[data-state="copied"]::after{
  content:"Copied!";
  position:absolute; transform:translateY(-160%);
  background:#ffffff;border:1px solid var(--border);color:#23304a;
  padding:4px 8px;border-radius:6px;font-size:.75rem; white-space:nowrap;
  box-shadow:0 10px 22px rgba(11,16,32,.08);
}

.x-pill{ color:var(--primary); }
.x-pill .x-label{ display:none; }

@media (max-width:560px){
  .footer{flex-direction:column;gap:12px;text-align:center}
  .foot-actions{justify-content:center;flex-wrap:wrap}
  .x-pill .x-label{display:inline}
}

.controls,.control,.dropdown{ min-width:0; }
.dropdown>summary{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
@media (max-width:720px){
  .controls{ width:100%; }
  .control,.dropdown{ min-width:0; }
}

.ai-panel{
  overflow:hidden;
}

.ai-status{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.8rem;
  font-weight:700;
  color:var(--primary);
}

.ai-status .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 0 rgba(22,82,240,.6);
  animation:pulse 1.6s infinite;
}

@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(22,82,240,.6); }
  70%{ box-shadow:0 0 0 10px rgba(22,82,240,0); }
  100%{ box-shadow:0 0 0 0 rgba(22,82,240,0); }
}

.ai-console{
  margin-top:12px;
  background:#f3f6ff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.78rem;
  color:#23304a;
  max-height:180px;
  overflow:hidden;
  position:relative;
}

.ai-console::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:40px;
  background:linear-gradient(to top, #f3f6ff, transparent);
  pointer-events:none;
}

.ai-console .line{
  line-height:1.5;
  opacity:0;
  animation:fadeIn .3s forwards;
}

@keyframes fadeIn{
  to{ opacity:1; }
}