/* ============================================================
   Coindaily - Long/Short Ratio page
   Complements styles.css + indicator-page.css.
   ============================================================ */

/* ---------- asset control bar ---------- */
.ls-control { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px 0 18px; flex-wrap: wrap; }
.ls-assets { display: flex; gap: 1px; background: var(--hairline-2); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.ls-assets button { display: flex; align-items: center; gap: 7px; padding: 7px 13px; background: var(--panel); font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--tx-dim); transition: .12s; }
.ls-assets button img { width: 16px; height: 16px; border-radius: 50%; }
.ls-assets button:hover { color: var(--tx-hi); }
.ls-assets button.active { color: var(--amber); background: rgba(201,154,75,.07); }
.ls-updated { font-family: var(--mono); font-size: 11px; color: var(--tx-dim); }
.ls-updated .dotlive { width: 6px; height: 6px; border-radius: 50%; background: var(--up); display: inline-block; margin-right: 6px; animation: lspulse 2s infinite; }
@keyframes lspulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- section 1: taker volume + sentiment ---------- */
.ls-grid2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-bottom: 18px; }
.tv-body { padding: 20px; }
.tv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tv-card { border: 1px solid var(--hairline); border-radius: var(--r); padding: 16px 17px; position: relative; overflow: hidden; }
.tv-card.long { background: linear-gradient(135deg, rgba(79,158,124,.10), rgba(79,158,124,.02)); border-color: rgba(79,158,124,.28); }
.tv-card.short { background: linear-gradient(135deg, rgba(190,94,108,.10), rgba(190,94,108,.02)); border-color: rgba(190,94,108,.28); }
.tv-card .l { font-size: 11px; color: var(--tx-dim); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 6px; }
.tv-card .l .dot { width: 7px; height: 7px; border-radius: 50%; }
.tv-card.long .l .dot { background: var(--up); } .tv-card.short .l .dot { background: var(--down); }
.tv-card .v { font-family: var(--mono); font-size: 27px; font-weight: 700; letter-spacing: -0.02em; margin-top: 9px; line-height: 1; }
.tv-card.long .v { color: var(--up); } .tv-card.short .v { color: var(--down); }
.tv-card .p { font-family: var(--mono); font-size: 12px; color: var(--tx-mid); margin-top: 7px; }
.tv-split { height: 10px; border-radius: 6px; overflow: hidden; display: flex; margin: 20px 0 9px; }
.tv-split .lo { background: var(--up); } .tv-split .sh { background: var(--down); }
.tv-legend { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; }
.tv-legend .up { color: var(--up); } .tv-legend .down { color: var(--down); }

.sent-body { display: flex; align-items: center; gap: 22px; padding: 22px; flex-wrap: wrap; }
.sent-donut { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.sent-donut svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.sent-donut .ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sent-donut .ctr .big { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--up); line-height: 1; }
.sent-donut .ctr .lab { font-size: 10px; color: var(--tx-dim); text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; }
.sent-list { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 9px; }
.sent-row { display: grid; grid-template-columns: 92px 1fr 38px; align-items: center; gap: 10px; font-size: 11.5px; }
.sent-row .nm { color: var(--tx-mid); }
.sent-row .track { height: 6px; background: var(--hairline-2); border-radius: 4px; overflow: hidden; }
.sent-row .track i { display: block; height: 100%; border-radius: 4px; }
.sent-row .pc { font-family: var(--mono); font-size: 11px; color: var(--tx-hi); text-align: right; }

/* ---------- exchange L/S ratio cards ---------- */
.ls-ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ls-ex-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.ls-ex-card .exh { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.ls-ex-card .exh img { width: 22px; height: 22px; border-radius: 50%; background: #16171b; }
.ls-ex-card .exh .nm { font-size: 13.5px; font-weight: 600; color: var(--tx-hi); }
.ls-ex-card .exh .rt { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--tx-mid); }
.ls-ex-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline-2); }
.ls-ex-row:last-child { border-bottom: none; }
.ls-ex-row .ty { font-size: 12px; color: var(--tx-mid); }
.ls-ex-row .rv { font-family: var(--mono); font-size: 12.5px; color: var(--tx-hi); }
.tag { font-family: var(--mono); font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tag.bull { color: var(--up); background: var(--up-bg); }
.tag.sbull { color: #7FA86B; background: rgba(127,168,107,.12); }
.tag.neut { color: var(--amber); background: rgba(201,154,75,.12); }
.tag.bear { color: var(--down); background: var(--down-bg); }
.tag.xbear { color: #fff; background: rgba(190,94,108,.55); }

/* ---------- exchanges breakdown table ---------- */
.ls-table, .fut-table { width: 100%; border-collapse: collapse; }
.ls-table thead th, .fut-table thead th { text-align: right; font-size: 10px; color: var(--tx-dim); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; padding: 12px 14px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.ls-table th:nth-child(1), .ls-table th:nth-child(2), .ls-table td:nth-child(1), .ls-table td:nth-child(2) { text-align: left; }
.ls-table td { padding: 12px 14px; border-bottom: 1px solid var(--hairline-2); text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--tx); }
.ls-table tbody tr:last-child td { border-bottom: none; }
.ls-table tbody tr:hover, .fut-table tbody tr:hover { background: rgba(255,255,255,.018); }
.ex-name { display: flex; align-items: center; gap: 10px; }
.ex-name img { width: 20px; height: 20px; border-radius: 50%; background: #16171b; }
.ex-name .s { font-family: var(--sans); font-weight: 600; color: var(--tx-hi); }
.lsbar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; min-width: 130px; }
.lsbar .lo { background: var(--up); } .lsbar .sh { background: var(--down); }
.lsbar-wrap { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.lsbar-wrap .pct { font-family: var(--mono); font-size: 11px; min-width: 34px; }

/* ---------- large trades feed ---------- */
.lt-head, .lt-row { display: grid; grid-template-columns: 1.1fr 70px 1fr 1fr 70px; align-items: center; gap: 10px; padding: 10px 16px; }
.lt-head { font-size: 10px; color: var(--tx-dim); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--hairline); }
.lt-head span:nth-child(n+2), .lt-row span:nth-child(n+2) { text-align: right; }
.lt-row { border-bottom: 1px solid var(--hairline-2); font-family: var(--mono); font-size: 12px; color: var(--tx); }
.lt-row:last-child { border-bottom: none; }
.lt-row.flash { animation: ltflash .9s ease-out; }
@keyframes ltflash { from { background: rgba(201,154,75,.10); } to { background: transparent; } }
.lt-pair { display: flex; align-items: center; gap: 8px; font-family: var(--sans); }
.lt-pair img { width: 18px; height: 18px; border-radius: 50%; background: #16171b; }
.lt-pair .s { font-weight: 600; color: var(--tx-hi); font-size: 12px; }
.lt-side { font-weight: 700; }
.lt-side.long { color: var(--up); } .lt-side.short { color: var(--down); }

/* ---------- futures table ---------- */
.fut-table td { padding: 12px 14px; border-bottom: 1px solid var(--hairline-2); text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--tx); white-space: nowrap; }
.fut-table th:nth-child(1), .fut-table th:nth-child(2), .fut-table td:nth-child(1), .fut-table td:nth-child(2) { text-align: left; }
.fut-table th:last-child, .fut-table td:last-child { text-align: center; }
.fut-table tbody tr:last-child td { border-bottom: none; }
.fut-table td .rk { color: var(--tx-faint); font-size: 11px; }
.fut-asset { display: flex; align-items: center; gap: 10px; }
.fut-asset img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #16171b; }
.fut-asset .s { font-family: var(--sans); font-weight: 600; color: var(--tx-hi); }
.fut-asset .n { font-family: var(--sans); font-size: 10px; color: var(--tx-dim); }
.fut-ratio { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.fut-ratio .lsbar { min-width: 96px; }
.fut-exrow { display: flex; gap: 6px; justify-content: center; }

@media (max-width: 920px) {
  .ls-grid2, .ls-ex-grid { grid-template-columns: 1fr; }
  .fut-table .col-hide, .ls-table .col-hide { display: none; }
}

/* ============================================================
   Loading skeleton - shimmer the live values until the real
   CoinGlass positioning lands (never flash modelled numbers).
   ============================================================ */
@keyframes ls-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
body.ls-loading #ls-now, body.ls-loading #ls-ratio, body.ls-loading #ls-longp,
body.ls-loading #ls-shortp, body.ls-loading #ls-zone, body.ls-loading #ls-mean,
body.ls-loading #tv-long, body.ls-loading #tv-short, body.ls-loading #tv-leg-l,
body.ls-loading #tv-leg-s, body.ls-loading #mc-now, body.ls-loading #ac-now {
  color: transparent !important; border-radius: 5px;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--elevated) 37%, var(--panel-2) 63%);
  background-size: 400% 100%; animation: ls-shimmer 1.3s ease-in-out infinite;
}
body.ls-loading #mc-wrap, body.ls-loading #ac-wrap,
body.ls-loading #sent-donut, body.ls-loading #ls-ex-cards { position: relative; }
body.ls-loading #mc-wrap::after, body.ls-loading #ac-wrap::after,
body.ls-loading #sent-donut::after, body.ls-loading #ls-ex-cards::after {
  content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; z-index: 4;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--elevated) 37%, var(--panel-2) 63%);
  background-size: 400% 100%; animation: ls-shimmer 1.3s ease-in-out infinite;
}
body.ls-loading #ls-marker { visibility: hidden; }
body.ls-loading #ls-ex-table { visibility: hidden; }