:root {
  --bg:#0e1116; --panel:#1c222b; --accent:#4cc9f0; --accent2:#ff9f1c; --text:#e6e6e6; --danger:#ef476f; --good:#06d6a0; --warn:#ffd166; --mono: 'JetBrains Mono', monospace;
  --center-gap: 14px;
  --arrow-nudge: 1.75px;
  --arr-size: 20px;
  --content-col: 40%;
  --ex-links-width: 36px;
  --row-gap: 10px;
  --search-offset-x: 0px;
  --search-right-trim: 44px;
  --src-scrollbar: 8px;
  font-family: system-ui, Arial, sans-serif;
}
body {margin:0; background:var(--bg); color:var(--text); scrollbar-gutter: stable both-edges;} 

/* Zero subscript for prices like 0.0{4}1234 */
.zero-sub { font-size: 0.7em; color: #888; vertical-align: baseline; }

header {padding:12px 16px 12px 16px; background:var(--panel); border-bottom:1px solid #223041;} 
.brand{display:flex; align-items:center; gap:12px;}
header h1 {margin:0; font-size:20px; letter-spacing:1px; color:var(--text);}
.header-row{display:grid; grid-template-columns: 1fr calc(var(--content-col) - (var(--ex-links-width) + var(--row-gap) + var(--search-right-trim))) 1fr; align-items:center; column-gap:12px;}
.header-search{display:flex; justify-content:flex-start}
.header-search{ margin-left: 0; padding-right: var(--search-right-trim); box-sizing: border-box; }
.input-search{width:100%; max-width:100%; text-align:left}
.toolbar{margin-top:12px; padding-top:12px; border-top:1px solid #223041; display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.group{display:flex; flex-direction:column; gap:6px}
.group.grow{flex:1}
.lbl{font-size:12px; opacity:.8}
.select,.input{background:#0f141b; border:1px solid #2a3644; color:var(--text); padding:8px 10px; border-radius:6px;}
.src-multi-box{max-height:180px; overflow:auto; padding:6px 8px; border:1px solid #2a3644; border-radius:6px; background:#0f141b; width:220px; display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
.src-multi-box .src-search{position:sticky; top:0; left:0; right:0; background:#0f141b; z-index:1; padding: 0 calc(8px + var(--src-scrollbar)) 6px 8px;}
.src-multi-box .src-search .input{width:100%; box-sizing:border-box; border-radius:6px; margin:0}
.src-multi-box .src-list{display:flex; flex-direction:column; gap:6px; width:100%}
.src-multi-box .src-item{display:flex; align-items:center; gap:8px; padding:2px 2px; border:none; background:transparent; border-radius:6px}
.src-multi-box .src-item input{accent-color:var(--accent)}
.src-multi-box .src-item span{font-weight:600}
.src-multi-box{scrollbar-width:thin; scrollbar-color:#2a3644 transparent}
.src-multi-box::-webkit-scrollbar{width:var(--src-scrollbar)}
.src-multi-box::-webkit-scrollbar-thumb{background:#2a3644; border-radius:6px}
.src-multi-box::-webkit-scrollbar-track{background:transparent}
.chips label{background:#0f141b; border:1px solid #2a3644; padding:6px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:6px}
.src-multi-box .src-item{border:none; background:transparent; padding:4px 4px; border-radius:6px}
.src-multi-box .src-item:hover{background:#101822}
.src-multi-box.chips label{display:inline-flex; width:auto; justify-content:flex-start; align-self:flex-start}
.chips input{accent-color:var(--accent)}
.input-unit{ position:relative; display:block; }
.input-unit > .input{ width:100%; padding-right:40px; box-sizing:border-box; }
.input-unit > .unit-select{
  position:absolute; right:8px; left:auto; top:1px; bottom:1px; transform:none;
  background:transparent; color:var(--text);
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  border:none !important; outline:none !important; box-shadow:none !important; border-radius:0;
  border-left:1px solid #2a3644 !important;
  padding:0 32px 0 8px; min-width:36px; height:auto; line-height:normal; font: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%239fb7cc'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size:20px 20px;
}
.input-unit > .unit-select::-ms-expand{ display:none; }
.input-unit > .unit-select:focus{ outline:none; box-shadow:none; }
.input-unit select option{ background:#0f141b; color:var(--text); }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
input[type=number]{
  -moz-appearance: textfield;
  appearance: textfield;
}
button, .btn {background:#1a1a1a; border:1px solid #333; color:#999; padding:6px 14px; border-radius:6px; cursor:pointer; font-weight:600; transition: all 0.15s ease;}
button:hover, .btn:hover {background:#252525; color:#ccc; border-color:#444;} 
button:active, .btn:active {transform:scale(.96);} 
.btn-ghost{background:transparent; color:#888; border:1px solid #333;}
.btn-ghost:hover{background:#1a1a1a; color:#ccc;}
.btn-danger{background:#3a2020; color:#ff6b6b; border-color:#5c2a2a;}
.btn-danger:hover{background:#4a2525; color:#ff8080;}
.status {padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; background:#333;}
.status.connected {background:var(--good); color:#062d21;}
.status.error {background:var(--danger);} .status.connecting {background:var(--warn); color:#222;}
main {padding:10px 16px;}
/* Cards Grid */
.cards-grid{ display:grid; grid-template-columns: 1fr; gap:14px; align-items:stretch; justify-items:center; }
.card-row{ position:relative; width:var(--content-col); display:flex; align-items:stretch; gap:var(--row-gap); }
.card-row .drag-handle{ position:absolute; left:-28px; top:50%; transform:translateY(-50%); width:18px; height:18px; display:none; cursor:grab; border-radius:4px; }
.card-row .drag-handle::before{ content:''; position:absolute; left:0; right:0; top:4px; height:2px; background:#55657a; border-radius:2px; box-shadow: 0 4px 0 #55657a, 0 8px 0 #55657a; }
.card-row.is-pinned .drag-handle{ display:block; }
.card-row .drag-handle:active{ cursor:grabbing; filter:brightness(1.1); }
.card-row.dragging{ opacity:.8; }
.card{background:var(--panel); border:1px solid #223041; border-radius:12px; padding:12px; padding-bottom:36px; display:flex; flex-direction:column; gap:8px; width:40%; position:relative;}
.card-row .card{ width:100%; }
.card::after{
  content:'';
  position:absolute;
  left:50%;
  top:10px;
  bottom:10px;
  width:1px;
  transform:translateX(-0.5px);
  background:linear-gradient(to bottom, transparent 0, #35465b 12px, #35465b calc(100% - 12px), transparent 100%);
  opacity:.8;
  pointer-events:none;
  z-index:0;
}
.card-header{display:flex; align-items:center; justify-content:space-between}
.card-title{display:flex; align-items:center; gap:10px; font-weight:700}
.ticker{font-family:var(--mono); letter-spacing:.5px}
.card-actions{position:absolute; top:6px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3}
.card-actions .arrTopL{ align-self:center; font-size:14px; line-height:1; margin-right:4px; }
.card-actions .arrTopR{ align-self:center; font-size:14px; line-height:1; margin-left:4px; }
.act{background:#1a1a1a; color:#888; border:1px solid #333; border-radius:8px; padding:4px 8px; font-size:12px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition: all 0.15s ease;}
.act svg{width:14px; height:14px; flex-shrink:0;}
.act:hover{background:#252525; color:#bbb; border-color:#444;}
.act.active{background:#333; color:#fff; border-color:#555;}
.act.act-block.active{background:#3a2020; color:#ff6b6b; border-color:#5c2a2a;}
.act.act-fav.active{background:#3a3020; color:#ffd93d; border-color:#5c4a2a;}
.act.act-fav.active svg{fill:currentColor;}
.pill{padding:2px 8px; border-radius:999px; font-size:12px; background:#15202b; border:1px solid #2a3644}
.sources{display:flex; align-items:center; justify-content:center; position:relative; gap:8px; opacity:.9; min-height:26px; padding-top:10px; z-index:2}
.sources{position:relative}
.sources .mid{position:static; display:block; width:100%; height:0; font-size:12px; opacity:.95}
.sources .mid .sep{position:absolute; left:50%; top:calc(50% - var(--arrow-nudge)); transform:translate(-50%,-50%) scale(1.75); opacity:.8; line-height:1; display:inline-block; will-change: transform}
.sources .mid .midLW{position:absolute; top:50%; right:calc(50% + var(--center-gap)); transform:translateY(-50%); display:flex; align-items:center; gap:6px}
.sources .mid .midRW{position:absolute; top:50%; left:calc(50% + var(--center-gap)); transform:translateY(-50%); display:flex; align-items:center; gap:6px}
.sources .mid .midL{position:static}
.sources .mid .midR{position:static}
.sources .mid .arr{display:none; font-size:var(--arr-size); line-height:1; vertical-align:middle; pointer-events:none; z-index:2; font-family: var(--mono);}
.sources.show-arrows .mid .arr{display:inline-block}
.sources.show-arrows .mid .midLW .arr{margin-right:4px}
.sources.show-arrows .mid .midRW .arr{margin-left:4px}
.arr.up{color:var(--good); display:inline-block;}
.arr.down{color:var(--danger)}
.pct{font-weight:900; font-size:18px}
.pct.pos{color:var(--good)}
.pct.neg{color:var(--danger)}
.row{display:flex; gap:0; justify-content:space-between; font-family:var(--mono)}
.row .kv{flex:1; display:grid; grid-template-columns: 1fr; align-content:start; row-gap:6px}
.row .kv .price{display:flex; flex-direction:column; gap:4px}

.kvL{ display:grid; grid-template-columns: auto 1fr; grid-auto-rows:min-content; column-gap:12px; }
.kvR{ display:grid; grid-template-columns: 1fr auto; grid-auto-rows:min-content; column-gap:12px; }

.kvL .price{ grid-column:2; grid-row:1; }
.kvL .fund{  grid-column:2; grid-row:2; align-items:flex-end; }
.kvL .fund-time{ grid-column:2; grid-row:3; align-items:flex-end; }
.kvL .vol{   grid-column:1; grid-row:1; }
.kvL .lim{   grid-column:1; grid-row:2; }
.kvL .liq{   grid-column:1; grid-row:2; }

.kvR .price{ grid-column:1; grid-row:1; }
.kvR .fund{  grid-column:1; grid-row:2; align-items:flex-start; }
.kvR .fund-time{ grid-column:1; grid-row:3; align-items:flex-start; }
.kvR .vol{   grid-column:2; grid-row:1; }
.kvR .lim{   grid-column:2; grid-row:2; }
.kvR .liq{   grid-column:2; grid-row:2; }
.kvL .chain{ grid-column:1 !important; grid-row:3 !important; }
.kvR .chain{ grid-column:2 !important; grid-row:3 !important; }
.kv .k{opacity:.9; font-size:12px; color:var(--accent); font-weight:700}
.kv .v{font-size:14px; font-weight:600}
.fund{margin-top:4px; display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.fk{font-size:12px; opacity:.9; color:var(--accent); font-weight:700}
.fv{font-size:12px; font-weight:700}
.fv.pos{color:var(--good)}
.fv.neg{color:var(--danger)}
.fund-time{margin-top:2px; display:flex; flex-direction:column; gap:2px}
.ftk{font-size:12px; opacity:.85; color:#9fb7cc; font-weight:600}
.ftv{font-size:12px; font-weight:700; letter-spacing:.3px}
.vol{margin-top:4px; display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.vk{font-size:12px; opacity:.9; color:var(--accent); font-weight:700}
.vv{font-size:12px; font-weight:700}
.lim{margin-top:4px; display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.limk{font-size:12px; opacity:.9; color:var(--accent); font-weight:700}
.limv{font-size:12px; font-weight:700}
.liq{margin-top:4px; display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.liqk{font-size:12px; opacity:.9; color:var(--accent); font-weight:700}
.liqv{font-size:12px; font-weight:700}
.contract-row{display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.05)}
.contract-label{font-size:12px; opacity:.9; color:var(--accent); font-weight:700}
.contract-value{font-size:12px; font-weight:700; font-family:var(--mono); cursor:pointer; transition:all .15s}
.contract-value:hover{opacity:.7}
.contract-value.copied{color:#78e3b7}
.ca{margin-top:4px; display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.cak{font-size:12px; opacity:.9; color:var(--accent); font-weight:700}
.cav{font-size:12px; font-weight:700; font-family:var(--mono); cursor:pointer; transition:all .15s}
.cav:hover{opacity:.7}
.cav.copied{color:#78e3b7}
.kvL .cak, .kvL .cav{ align-self:flex-start; text-align:left; }
.kvR .cak, .kvR .cav{ align-self:flex-end; text-align:right; }
.dex-update{margin-top:4px; display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.dexk{font-size:11px; opacity:.7; color:#888}
.dexv{font-size:11px; font-weight:600; font-family:var(--mono)}
.kvL .dexk, .kvL .dexv{ align-self:flex-start; text-align:left; }
.kvR .dexk, .kvR .dexv{ align-self:flex-end; text-align:right; }
.chain{margin-top:4px; display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.chaink{font-size:12px; opacity:.9; color:var(--accent); font-weight:700}
.chainwrap{position:relative; width:auto; display:inline-block;}
.kvR .chainwrap{ margin-left:auto; }
.chainbox{height:20px; border-radius:6px; background:linear-gradient(90deg, rgba(16,22,29,.7), rgba(20,26,34,.7)); border:1px solid #2a3644; filter: blur(0.3px); backdrop-filter: blur(3px); cursor:default}
.chainpanel{position:absolute; top:100%; left:0; margin-top:6px; background:#0f141b; border:1px solid #2a3644; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.35); padding:8px; min-width:220px; z-index:20; display:none}
.kvR .chainpanel{ left:auto; right:0; }
.chainwrap:hover .chainpanel{display:block}
.chainwrap.hovering .chainpanel{display:block}
.tbl{display:grid; grid-template-columns: 1fr auto auto; gap:6px 10px; align-items:center}
.th{font-size:11px; color:#9fb7cc; opacity:.9}
.td{font-size:12px; font-weight:600}
.ok{color:#78e3b7}
.no{color:#f0a8a8}
.tbl .th:nth-child(2), .tbl .th:nth-child(3){ text-align:center; justify-self:center; }
.tbl .td:nth-child(3n+2),
.tbl .td:nth-child(3n)
{ text-align:center; justify-self:center; }
.row .kv:first-child .fund{ align-items:flex-end; }
.row .kv:first-child .v{ align-self:flex-end; text-align:right; }
.row .kv:first-child .k{ align-self:flex-end; text-align:right; }
.row .kv:first-child .vol{ align-items:flex-start; }
.row .kv:first-child .fund-time{ align-items:flex-end; }

.kvL{ padding-left:12px; padding-right: var(--center-gap); }
.kvR{ padding-right:12px; padding-left: var(--center-gap); }

.kvL .vk, .kvL .vv, .kvL .limk, .kvL .limv, .kvL .liqk, .kvL .liqv{ align-self:flex-start; text-align:left; }
.kvR .vk, .kvR .vv, .kvR .limk, .kvR .limv, .kvR .liqk, .kvR .liqv{ align-self:flex-end; text-align:right; }
.kvL .chaink{ align-self:flex-start; text-align:left; }
.kvR .chaink{ align-self:flex-end; text-align:right; }
.kvL .fund-time .ftk, .kvL .fund-time .ftv{ text-align:right; }
.kvR .fund-time .ftk, .kvR .fund-time .ftv{ text-align:left; }

.row .kv .vol, .row .kv .lim, .row .kv .liq, .row .kv .fund-time{ margin-top:0; }
.row .kv:first-child{ padding-right: var(--center-gap); }
.row .kv:last-child{ padding-left: var(--center-gap); }
.meta{position:absolute; right:12px; bottom:12px; font-size:12px; opacity:.85; background:rgba(20,26,34,.6); padding:2px 6px; border-radius:6px; backdrop-filter: blur(2px)}
.flash {animation: flashBg .6s linear 1}
@keyframes flashBg { from{box-shadow:0 0 0 0 rgba(76,201,240,.6)} to{box-shadow:0 0 0 10px rgba(76,201,240,0)} }
.pct-pos{color:var(--good);} .pct-neg{color:var(--danger);} .pct-zero{color:var(--text); opacity:.6;}
footer {padding:8px 16px; background:#141a22; font-size:12px; color:#8899aa;}
@media (max-width:880px){ .toolbar{gap:8px} }

/* Mobile responsive styles */
@media (max-width: 768px) {
  :root {
    --content-col: 90%;
  }
  
  body {
    padding: 8px;
  }
  
  header {
    padding: 10px 12px;
  }
  
  .header-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .header-search {
    padding-right: 0;
    margin-left: 0;
  }
  
  .input-search {
    width: 100%;
  }
  
  .toolbar {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }
  
  .toolbar .group {
    width: 100%;
    min-width: unset !important;
  }
  
  .cards-grid {
    gap: 12px;
  }
  
  .card-row {
    width: 95%;
  }
  
  .card {
    padding: 10px;
    padding-bottom: 30px;
  }
  
  .pct {
    font-size: 16px;
  }
  
  .kv .v {
    font-size: 12px;
  }
  
  .kv .k {
    font-size: 11px;
  }
  
  main {
    padding: 8px;
  }
}

@media (max-width: 480px) {
  :root {
    --content-col: 98%;
  }
  
  .toolbar .chips label {
    padding: 5px 8px;
    font-size: 11px;
  }
  
  .card-row {
    width: 100%;
  }
  
  .ex-links a {
    width: 30px;
    height: 30px;
  }
  
  .ex-links a img, .ex-links a svg {
    width: 18px;
    height: 18px;
  }
}

.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000}
.modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(520px, 92vw); background:#0f141b; color:#e6e6e6; border:1px solid #2a3644; border-radius:10px; z-index:1001; display:flex; flex-direction:column; max-height:70vh}
.modal[hidden], .modal-backdrop[hidden]{ display:none !important; }
.modal-header{display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid #223041}
.modal-title{font-weight:700}
.modal-content{padding:8px 12px; overflow:auto}
.modal-footer{display:flex; justify-content:flex-end; padding:8px 12px; border-top:1px solid #223041}
.list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.list li{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px dashed #223041}
.btn{background:var(--accent2); color:#111; border:none; border-radius:6px; padding:6px 10px; cursor:pointer; font-weight:600}
.btn-ghost{background:transparent; color:#e6e6e6; border:1px solid #2a3644}
.btn-danger{background:#c04a5b; color:#fff}
.btn-small{padding:4px 8px; font-size:12px}

.ex-links{position:relative; right:auto; top:auto; bottom:auto; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; z-index:1; align-self:stretch; height:100%; }
.ex-links a{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#0f141b; border:1px solid #2a3644; box-shadow:0 2px 6px rgba(0,0,0,.35); overflow:hidden}
.ex-links a:hover{filter:brightness(1.1)}
.ex-links a img,.ex-links a svg{width:22px; height:22px; display:block; object-fit:contain}
.ex-links a.token-detail-link{border-color:rgba(0,212,255,0.3); color:#00d4ff}
.ex-links a.token-detail-link:hover{background:rgba(0,212,255,0.1); border-color:rgba(0,212,255,0.5)}
.ex-links .ex-search{ width:36px; height:36px; border-radius:50%; border:1px solid #2a3644; background:#0f141b; color:#9fb7cc; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.35); cursor:pointer; position:absolute; right:0; top:12px; z-index:2; }
.ex-links .ex-search::before{ content:'\1F50D'; font-size:14px; line-height:1; }
.ex-links .ex-search:hover{ filter:brightness(1.1); }

.zc{ color:#8899aa; font-size:.75em; line-height:1; }

/* Chain Status hover panel (like Python project) */
.chain{margin-top:4px; display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.chaink{font-size:12px; opacity:.9; color:var(--accent); font-weight:700}
.chainwrap{position:relative; width:auto; display:inline-block;}
.kvR .chainwrap{ margin-left:auto; }
.chainbox{height:20px; border-radius:6px; background:linear-gradient(90deg, rgba(16,22,29,.7), rgba(20,26,34,.7)); border:1px solid #2a3644; filter: blur(0.3px); backdrop-filter: blur(3px); cursor:default}
.chainpanel{position:absolute; top:100%; left:0; margin-top:6px; background:#0f141b; border:1px solid #2a3644; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.35); padding:8px; min-width:220px; z-index:20; display:none}
.kvR .chainpanel{ left:auto; right:0; }
.chainwrap:hover .chainpanel{display:block}
.chainwrap.hovering .chainpanel{display:block}
.tbl{display:grid; grid-template-columns: 1fr auto auto; gap:6px 10px; align-items:center}
.th{font-size:11px; color:#9fb7cc; opacity:.9}
.td{font-size:12px; font-weight:600}
.ok{color:#78e3b7}
.no{color:#f0a8a8}
.tbl .th:nth-child(2), .tbl .th:nth-child(3){ text-align:center; justify-self:center; }
.tbl .td:nth-child(3n+2),
.tbl .td:nth-child(3n){ text-align:center; justify-self:center; }

/* Modal windows */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000}
.modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(420px, 92vw); background:var(--panel); color:var(--text); border:1px solid #223041; border-radius:12px; z-index:1001; display:flex; flex-direction:column; max-height:70vh}
.modal[hidden], .modal-backdrop[hidden]{ display:none !important; }
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid #223041}
.modal-title{font-weight:700; font-size:16px;}
.modal-content{padding:12px 16px; overflow:auto; flex:1;}
.modal-footer{display:flex; justify-content:flex-end; padding:12px 16px; border-top:1px solid #223041}
.list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.list li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; background:#0f141b; border-radius:6px; border:1px solid #223041}
.list li span{font-weight:600; font-family:var(--mono);}
.btn-small{padding:4px 10px; font-size:11px;}