/* The Short Interest panel (showcase/chapters/shorts/_si.html, short-si.js), the "si" tab of the Short
   Interest & Volume chapter on /how-it-works/. One app window with the two pages of the real tool:
     Leaderboard  intrinio_stock/templates/stock_data/short_interest_leaderboard.html: filter card
                  (.si-filter-card :26-40, inputs :51-74, Apply / Reset :77-93, Filter Columns :96-104),
                  sliders (:115-159), Info (:162-168), sort tabs (.si-nav :171-184, active #ff8c00), table
                  card and table (:187-219), watermark (:234-240).
     Ticker page  stock_data/short_interest.html: metric boxes (:7-12), chart cards (:13), sidebar items
                  (:14-16), search box (:17), chart colours (:845-1021), gauge colours (:572-577).
   The panel around it uses landing.css tokens. Everything is shi-* and scoped under .shi so it beats
   landing.css's element reset. JS state classes on .shi: is-ready, is-nodata, is-still, is-paused; on
   its parts: is-on, is-new, is-pick, is-leaving, is-moving, is-entering, is-tip, is-press, is-idle,
   is-stopped. Only transform and opacity animate in CSS; the charts and the needle are moved by
   short-si.js. Reduced motion (landing.css section 13, plus .is-still) and .is-paused stop it all. */

.shi {
  --shi-p: #6759d1; --shi-p2: #a78bfa; --shi-p3: #c4b5fd; --shi-ice: #e0e0ff; --shi-cyan: #0dcaf0;
  --shi-bg: #17162b; --shi-text: #e0e0ff; --shi-muted: #94a3b8; --shi-dim: #8a86ad;
  --shi-red: #ef4444; --shi-green: #22c55e; --shi-orange: #ff8c00;
  --shi-card: linear-gradient(145deg, #1e1e38 0%, #252545 100%);
  --shi-h: 700px;
  position: relative; min-width: 0;
}
html:not(.js) .shi-js, .shi-js, .shi.is-nodata .shi-js { display: none !important; }
.shi.is-ready:not(.is-nodata) .shi-controls.shi-js { display: flex !important; }
.shi.is-ready:not(.is-nodata) .shi-back.shi-js { display: inline-flex !important; }

/* ---- panel head ---- */
.shi-head { max-width: 72ch; margin: 0 auto var(--lp-sp-5); text-align: center; }
.shi .shi-title { margin: 0; color: var(--lp-text); font: 700 var(--lp-fs-lg)/1.25 var(--lp-font-title); letter-spacing: -.01em; }
.shi .shi-lead { margin: var(--lp-sp-2) 0 0; color: var(--lp-muted); font-size: var(--lp-fs-base); line-height: 1.6; }

/* ---- the window ---- */
.shi-window {
  position: relative; overflow: hidden; min-width: 0;
  border: 1px solid var(--lp-border-strong); border-radius: 16px; background: var(--shi-bg);
  box-shadow: var(--lp-shadow), 0 0 80px color-mix(in srgb, var(--lp-primary) 10%, transparent);
}
.shi-bar {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px;
  background: #0c0a17; border-bottom: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; overflow: hidden;
}
.shi-lights { display: inline-flex; gap: 6px; flex: none; }
.shi-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.shi-lights i + i { background: #febc2e; }
.shi-lights i + i + i { background: #28c840; }
.shi .shi-back {
  flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
  background: none; color: #c9c5ea; cursor: pointer;
}
.shi .shi-back:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: #fff; }
.shi .shi-back:disabled { opacity: .3; cursor: default; }
.shi-bar-tab { flex: none; overflow: hidden; text-overflow: ellipsis; max-width: 40%; padding: 4px 12px; border-radius: 8px 8px 0 0; background: var(--shi-bg); color: #a7a3c9; font-size: 12px; }
.shi-bar-tab b { color: #f4f2ff; font-weight: 800; letter-spacing: -.01em; }
.shi-bar-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #8e8ab4; font: 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.shi-scroll {
  position: relative; height: var(--shi-h); overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .45) transparent;
  background: radial-gradient(900px 420px at 92% -10%, rgba(103, 89, 209, .14), transparent 60%), var(--shi-bg);
}
@media (min-width: 1000px) { .shi-scroll { overscroll-behavior: contain; } }
.shi-app { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 0 16px 18px; color: var(--shi-text); font: 400 13px/1.45 var(--lp-font); }
.shi .shi-app p { margin: 0; }
.shi-view { display: flex; flex-direction: column; gap: 14px; min-width: 0; outline: none; }
.shi-view.is-new { animation: shi-in .3s var(--lp-ease) both; }

/* green page header, as on the member pages */
.shi-pghead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 -16px; padding: 12px 18px;
  background: linear-gradient(90deg, #5aae8c, #6dbf9d); color: #fff;
}
.shi .shi-pgname { color: #fff; font: 700 17px/1.25 var(--lp-font-title); letter-spacing: -.01em; }
.shi-pghead .lp-tier { --lp-tier-c: #fff3d6; background: rgba(12, 5, 32, .35); border-color: rgba(255, 255, 255, .45); }
.shi-pghead .shi-sample { margin-left: auto; background: rgba(12, 5, 32, .35); border-color: rgba(255, 255, 255, .45); color: #fff; }

/* ---- filter card (si-filter-card) ---- */
.shi-filter, .shi-tcard {
  position: relative; padding: 16px 18px; border: 1px solid var(--shi-p); border-radius: 16px;
  background: var(--shi-card); box-shadow: 0 0 20px rgba(103, 89, 209, .15);
}
.shi-filter::before, .shi-tcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, #6759d1, #c4b5fd, #6759d1);
}
.shi-frow { display: grid; grid-template-columns: 1.6fr 1.6fr 1fr 1fr 1.2fr; gap: 10px; }
.shi .shi-fin, .shi .shi-fbtn {
  display: inline-flex; align-items: center; min-width: 0; height: 36px; padding: 0 12px; border-radius: 8px; overflow: hidden; white-space: nowrap;
  border: 1px solid rgba(102, 126, 234, .3); background: rgba(102, 126, 234, .12); color: rgba(255, 255, 255, .9);
  font: 500 13px/1 var(--lp-font);
}
.shi .shi-fin--search { text-transform: uppercase; outline: none; }
.shi .shi-fin--search::placeholder { color: rgba(255, 255, 255, .4); }
.shi .shi-fin--search:focus { border-color: rgba(102, 126, 234, .7); background: rgba(102, 126, 234, .22); box-shadow: 0 0 0 3px rgba(102, 126, 234, .2); }
.shi .shi-fin--dd { justify-content: space-between; }
.shi .shi-fin--dd::after { content: ""; flex: none; margin-left: 10px; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; opacity: .7; }
.shi .shi-fin--sm { display: inline-flex; height: 28px; min-width: 110px; vertical-align: middle; }
.shi .shi-fbtn { justify-content: center; font-weight: 600; cursor: pointer; }
.shi .shi-fbtn--apply { background: rgba(103, 89, 209, .45); border-color: var(--shi-p); color: #fff; }
.shi .shi-fbtn--apply:hover { background: var(--shi-p); }
.shi .shi-fbtn--reset { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); color: #f87171; }
.shi .shi-fbtn--reset:hover { background: rgba(239, 68, 68, .22); border-color: #ef4444; }
.shi .shi-fbtn--cols { justify-content: space-between; background: rgba(76, 214, 143, .18); border-color: #4CD68F; color: #fff; cursor: default; }
.shi .shi-fbtn--cols::after { content: ""; margin-left: 10px; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.shi .shi-settle { margin-top: 12px; color: rgba(255, 255, 255, .8); font-size: 12.5px; }

/* sliders (:115-159) */
.shi-sliders { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 22px; margin-top: 14px; }
.shi-sl { display: flex; flex-direction: column; gap: 7px; padding: 4px 6px; margin: -4px -6px; border-radius: 10px; transition: background .3s var(--lp-ease), box-shadow .3s var(--lp-ease); }
.shi-sl.is-on { background: rgba(103, 89, 209, .14); box-shadow: 0 0 0 1px rgba(167, 139, 250, .45); }
.shi .shi-sl-l { color: var(--shi-p3); font-size: 10.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; }
.shi-sl-row { display: inline-flex; align-items: center; gap: 10px; }
.shi .shi-range {
  -webkit-appearance: none; appearance: none; width: 150px; height: 6px; margin: 0; border-radius: 10px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, rgba(167, 139, 250, .55) var(--shi-fill, 0%), #334155 var(--shi-fill, 0%));
}
.shi .shi-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, #6759d1, #a78bfa); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(103, 89, 209, .5);
}
.shi .shi-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer; box-sizing: border-box;
  background: linear-gradient(135deg, #6759d1, #a78bfa); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(103, 89, 209, .5);
}
.shi .shi-range:focus-visible { box-shadow: 0 0 0 3px rgba(196, 163, 255, .45); }
.shi-sl-track { position: relative; display: inline-block; width: 150px; height: 6px; border-radius: 10px; background: #334155; }
.shi-sl-track i { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: linear-gradient(135deg, #6759d1, #a78bfa); border: 3px solid #fff; box-sizing: border-box; }
.shi-pill {
  min-width: 52px; padding: 5px 12px; border-radius: 8px; text-align: center;
  background: rgba(103, 89, 209, .35); border: 1px solid var(--shi-p); color: #fff;
  font: 700 12.5px/1.2 var(--lp-font); font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(103, 89, 209, .3);
}
.shi .shi-infobtn {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  background: rgba(103, 89, 209, .35); border: 1px solid var(--shi-p2); color: #fff; font: 600 12px/1.2 var(--lp-font);
}
.shi .shi-infobtn:hover, .shi .shi-infobtn[aria-expanded="true"] { background: var(--shi-p); border-color: var(--shi-p); }
.shi-infoi { font-weight: 800; font-style: italic; }
.shi-info { margin-top: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(103, 89, 209, .3); background: rgba(103, 89, 209, .08); }
.shi .shi-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; margin: 0; }
.shi .shi-dl dt { color: var(--shi-p3); font-size: 12px; font-weight: 700; }
.shi .shi-dl dd { margin: 2px 0 0; color: #d4d4f8; font-size: 12.5px; line-height: 1.5; }

/* sort tabs (si-nav) */
.shi-sorts { display: flex; flex-wrap: wrap; gap: 6px; }
.shi .shi-sort {
  padding: 7px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(169, 158, 245, .2); color: #c9cfe0; background: rgba(255, 255, 255, .03);
  font: 600 12px/1.3 var(--lp-font);
  transition: background .2s var(--lp-ease), border-color .2s var(--lp-ease), color .2s var(--lp-ease);
}
.shi .shi-sort:hover { border-color: rgba(169, 158, 245, .45); color: var(--shi-p3); background: rgba(169, 158, 245, .08); }
.shi .shi-sort[aria-pressed="true"], .shi .shi-sort--on { background: var(--shi-orange); border-color: var(--shi-orange); color: #fff; }

/* table card and table (si-table-card, #leaderboard-table) */
.shi-tcard { padding: 14px; overflow: hidden; }
.shi-wmark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; user-select: none; white-space: nowrap;
  color: rgba(255, 255, 255, .035); font: 700 40px/1 var(--lp-font); z-index: 1;
}
.shi-twrap {
  position: relative; overflow-x: auto; border-radius: 10px; outline: none;
  scrollbar-width: thin; scrollbar-color: #6759d1 rgba(103, 89, 209, .15);
}
.shi-twrap:focus-visible { box-shadow: 0 0 0 2px var(--lp-accent); }
.shi .shi-table { width: 100%; min-width: 1120px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.shi .shi-table caption { padding: 0; }
.shi .shi-table th {
  padding: 10px 11px; text-align: left; vertical-align: middle; min-width: 70px; max-width: 120px;
  background: #6759d1; color: #fff; font: 700 10.5px/1.3 var(--lp-font); letter-spacing: .6px; text-transform: uppercase;
}
.shi .shi-table td { padding: 9px 11px; color: var(--shi-text); font-size: 12.5px; white-space: nowrap; border-bottom: 1px solid rgba(103, 89, 209, .2); background: #201f3d; }
.shi .shi-table tbody tr:nth-child(even) td { background: #26244a; }
.shi .shi-table tbody tr:hover td, .shi .shi-table tbody tr.is-pick td { background: #34306a; }
.shi .shi-table tbody tr.is-moving { transition: transform .45s var(--lp-ease); }
.shi .shi-table tbody tr.is-entering { animation: shi-in .4s var(--lp-ease) both; }
.shi .shi-table tbody tr.is-leaving { opacity: 0; transition: opacity .22s var(--lp-ease); }
/* the sorted column: a soft tint */
.shi-table[data-shi-sort="si"] td[data-shi-k="si"], .shi-table[data-shi-sort="chgp"] td[data-shi-k="chgp"],
.shi-table[data-shi-sort="dtc"] td[data-shi-k="dtc"], .shi-table[data-shi-sort="br"] td[data-shi-k="br"],
.shi-table[data-shi-sort="ftdp"] td[data-shi-k="ftdp"], .shi-table[data-shi-sort="synr"] td[data-shi-k="synr"],
.shi-table[data-shi-sort="synv"] td[data-shi-k="synv"], .shi-table[data-shi-sort="util"] td[data-shi-k="util"] {
  box-shadow: inset 0 0 0 999px rgba(255, 140, 0, .09); font-weight: 700;
}
.shi-table[data-shi-sort="si"] th[data-shi-k="si"], .shi-table[data-shi-sort="chgp"] th[data-shi-k="chgp"],
.shi-table[data-shi-sort="dtc"] th[data-shi-k="dtc"], .shi-table[data-shi-sort="br"] th[data-shi-k="br"],
.shi-table[data-shi-sort="ftdp"] th[data-shi-k="ftdp"], .shi-table[data-shi-sort="synr"] th[data-shi-k="synr"],
.shi-table[data-shi-sort="synv"] th[data-shi-k="synv"], .shi-table[data-shi-sort="util"] th[data-shi-k="util"] {
  box-shadow: inset 0 -3px 0 var(--shi-orange);
}
/* rank and symbol stay put while the table scrolls sideways */
.shi .shi-table th:nth-child(1), .shi .shi-table td.shi-rank { position: sticky; left: 0; z-index: 2; width: 46px; min-width: 46px; max-width: 46px; }
.shi .shi-table th:nth-child(2), .shi .shi-table td.shi-symc { position: sticky; left: 46px; z-index: 2; min-width: 76px; box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .55); }
.shi .shi-rank { color: #a6a3c8; font-weight: 700; }
.shi .shi-sym {
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--shi-cyan); text-decoration: underline; text-underline-offset: 2px;
  font: 700 13px/1.3 var(--lp-font);
}
.shi .shi-sym:hover { color: #7fe3f7; }
.shi .shi-up { color: #f87171; }
.shi .shi-dn { color: #4ade80; }
.shi .shi-empty td { padding: 36px 16px; text-align: center; color: var(--shi-dim); }
.shi .shi-count { margin-top: 10px; color: var(--shi-muted); font-size: 12px; }

/* row tooltip */
.shi-rtip {
  position: absolute; top: 0; left: 0; z-index: 4; min-width: 220px; padding: 9px 11px; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid rgba(13, 202, 240, .4); border-radius: 8px; background: rgba(20, 20, 40, .96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); color: rgba(224, 224, 255, .88); font: 500 12px/1.5 var(--lp-font);
  opacity: 0; transition: opacity .15s var(--lp-ease);
}
.shi-rtip.is-on { opacity: 1; }
.shi-rtip b { color: var(--shi-cyan); font-weight: 700; }
.shi-rtip-row { display: flex; gap: 14px; white-space: nowrap; }
.shi-rtip-row em { margin-left: auto; color: #fff; font-style: normal; font-weight: 700; }
.shi-rtip-hint { margin-top: 3px; color: var(--shi-dim); font-size: 11px; }

/* ---- ticker page ---- */
.shi-tkhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 4px; }
.shi .shi-tktitle { color: #fff; font: 800 26px/1.15 var(--lp-font); letter-spacing: -.5px; outline: none; }
.shi .shi-tktitle:focus-visible { box-shadow: 0 0 0 2px var(--lp-accent); border-radius: 6px; }
.shi-tpx { font-variant-numeric: tabular-nums; }
.shi-tktools { display: inline-flex; align-items: center; gap: 10px; }
.shi-ibtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #6366f1; color: #fff; font: italic 800 13px/1 Georgia, serif; }
.shi-tkin { display: inline-flex; align-items: center; width: 180px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); color: #fff; font-size: 13px; }
.shi-go { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 8px; background: #6759d1; color: #fff; font-weight: 700; font-size: 13px; }

.shi-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shi-kpi, .shi-card, .shi-gcard, .shi-tile { position: relative; min-width: 0; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.shi-kpi { overflow: hidden; padding: 16px 12px 14px; text-align: center; }
.shi-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #3b82f6, #8b5cf6); }
.shi .shi-kpi-l { color: rgba(255, 255, 255, .6); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.shi .shi-kpi-v { margin-top: 6px; color: #fff; font: 800 24px/1.15 var(--lp-font); font-variant-numeric: tabular-nums; white-space: nowrap; }

.shi-tkgrid {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px;
  grid-template-areas: "trend side" "duo side" "chg side";
}
.shi-card--trend { grid-area: trend; }
.shi-side { grid-area: side; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.shi-duo { grid-area: duo; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.shi-card--chg { grid-area: chg; }
.shi-card { padding: 14px 12px 10px; }
.shi .shi-ct { margin-bottom: 6px; color: #fff; font: 700 14px/1.3 var(--lp-font); }
.shi .shi-ct--c { text-align: center; }
.shi-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-bottom: 6px; color: rgba(255, 255, 255, .85); font-size: 11.5px; }
.shi-lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.shi-sw { display: inline-block; width: 22px; height: 9px; border-radius: 2px; }
.shi-sw--ln { height: 3px; }
.shi-stage { position: relative; outline: none; border-radius: 6px; }
.shi-stage:focus-visible { box-shadow: 0 0 0 2px var(--lp-accent); }
.shi-plot { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
.shi-plot text, .shi-psvg text, .shi-gauge text { font-family: var(--lp-font); }
.shi .shi-tk { fill: rgba(255, 255, 255, .72); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.shi .shi-tk.is-on { fill: #fff; font-weight: 700; }
.shi .shi-tk--dtc { fill: #a78bfa; }
.shi .shi-tk--pos { fill: #60a5fa; }
.shi .shi-tk--ftd { fill: #a78bfa; }
.shi .shi-wm { fill: rgba(211, 211, 211, .14); font-size: 15px; }
.shi-hl { fill: rgba(196, 181, 253, .08); opacity: 0; }
.shi-hl.is-on { opacity: 1; }
.shi-dot { opacity: 0; transition: opacity .2s var(--lp-ease); }
.shi-card--trend .shi-dot[fill="#8b5cf6"] { opacity: .9; }
.shi-dot.is-on { opacity: 1; stroke: #fff; stroke-width: 2; }

/* chart tooltip */
.shi-tip {
  position: absolute; top: 0; left: 0; z-index: 3; min-width: 170px; padding: 8px 10px; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: rgba(15, 18, 38, .95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); color: rgba(224, 224, 255, .88); font: 500 12px/1.5 var(--lp-font);
  opacity: 0; transition: opacity .15s var(--lp-ease);
}
.shi-stage.is-tip .shi-tip { opacity: 1; }
.shi-tip b { display: block; margin-bottom: 2px; color: #fff; font-weight: 700; }
.shi-tip-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.shi-tip-row i { flex: none; width: 9px; height: 9px; border-radius: 2px; }
.shi-tip-row em { margin-left: auto; padding-left: 12px; color: #fff; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

/* gauge and tiles (short-sidebar) */
.shi-gcard { padding: 12px 10px 10px; text-align: center; }
.shi-gauge { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; overflow: visible; }
.shi .shi-glab { fill: #fff; font-size: 8.5px; font-weight: 600; letter-spacing: .3px; }
.shi-needle { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .35)); }
.shi .shi-glevel { margin-top: -18px; font: 800 18px/1.2 var(--lp-font); letter-spacing: .5px; text-shadow: 0 0 10px currentColor; opacity: 0; transform: translateY(4px); transition: opacity .35s var(--lp-ease), transform .35s var(--lp-ease); }
.shi .shi-glevel.is-on { opacity: 1; transform: none; }
.shi .shi-glevel.shi-lv0 { color: #22c55e; } .shi .shi-glevel.shi-lv1 { color: #eab308; }
.shi .shi-glevel.shi-lv2 { color: #f97316; } .shi .shi-glevel.shi-lv3 { color: #ef4444; }
.shi .shi-gnote { margin-top: 6px; color: var(--shi-muted); font-size: 11px; line-height: 1.45; }
.shi-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.shi-tile { padding: 9px 12px; border-radius: 8px; }
.shi-tile.is-entering { animation: shi-in .4s var(--lp-ease) both; }
.shi .shi-tile-l { color: rgba(255, 255, 255, .65); font-size: 11.5px; }
.shi .shi-tile-v { color: #fff; font: 700 17px/1.25 var(--lp-font); font-variant-numeric: tabular-nums; white-space: nowrap; }

.shi-hcard { padding-bottom: 12px; }
.shi .shi-htable { min-width: 1500px; }
.shi .shi-htable th { text-align: right; }
.shi .shi-htable thead th:first-child { text-align: left; }
.shi .shi-htable tbody th { position: sticky; left: 0; z-index: 2; padding: 9px 11px; text-align: left; white-space: nowrap; background: #201f3d; color: #fff; font: 600 12.5px/1.3 var(--lp-font); text-transform: none; letter-spacing: 0; box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .55); }
.shi .shi-htable thead th:first-child { position: sticky; left: 0; z-index: 3; }
.shi .shi-htable td { text-align: right; }
.shi .shi-htable tbody tr:nth-child(even) th { background: #26244a; }
.shi .shi-foot { color: var(--shi-dim); font-size: 11.5px; text-align: center; }

/* ---- the poster (no JS) ---- */
.shi .shi-psec { margin-top: 6px; color: var(--shi-p3); font: 700 11.5px/1.3 var(--lp-font); letter-spacing: 1.1px; text-transform: uppercase; }
.shi-pgrid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; }
.shi-psvg { display: block; width: 100%; height: auto; }
.shi-pgrid .shi-gcard .shi-glevel { opacity: 1; transform: none; }

/* ---- below the window: autoplay status, Replay, Pause ---- */
.shi-controls { flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--lp-sp-2); margin-top: var(--lp-sp-4); }
.shi-auto {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 2px;
  border: 1px solid var(--lp-border); border-radius: var(--lp-r-pill); background: var(--lp-surface-2);
  color: var(--lp-muted); font-size: var(--lp-fs-xs); font-weight: 600; white-space: nowrap;
}
.shi-auto-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-green); }
.shi-auto.is-idle .shi-auto-dot, .shi-auto.is-stopped .shi-auto-dot { background: var(--lp-amber); }
.shi-auto-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--lp-text) 10%, transparent); }
.shi-auto-bar i { display: block; height: 100%; background: var(--lp-primary); transform-origin: 0 50%; transform: scaleX(0); }
.shi-auto.is-idle .shi-auto-bar i, .shi-auto.is-stopped .shi-auto-bar i { background: var(--lp-amber); }
.shi-ico-play, .shi.is-paused .shi-ico-pause { display: none; }
.shi.is-paused .shi-ico-play { display: inline; }
.shi.is-ready.is-still .shi-controls.shi-js { display: none !important; }

/* ---- focus, press, motion ---- */
.shi :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.shi .shi-stage:focus-visible, .shi .shi-twrap:focus-visible, .shi .shi-tktitle:focus-visible { outline: none; }
.shi .is-press { transform: scale(.94); transition: transform .12s var(--lp-ease); }
@keyframes shi-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.shi.is-paused *, .shi.is-paused *::before, .shi.is-paused *::after { animation-play-state: paused !important; }
.shi.is-still *, .shi.is-still *::before, .shi.is-still *::after { animation: none !important; transition: none !important; }

/* ---- smaller screens ---- */
@media (max-width: 999px) {
  .shi-frow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shi-frow .shi-fin--search { grid-column: 1 / -1; }
  .shi-tkgrid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "trend" "side" "duo" "chg"; }
  .shi-side { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: start; }
  .shi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shi-pgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .shi { --shi-h: 600px; }
  .shi-app { padding: 0 10px 14px; gap: 12px; }
  .shi-pghead { margin: 0 -10px; padding: 10px 12px; }
  .shi-pghead .shi-sample { margin-left: 0; }
  .shi-bar-url { display: none; }
  .shi-bar-tab { max-width: none; }
  .shi-filter, .shi-tcard { padding: 12px; }
  .shi-sliders { gap: 12px; }
  .shi-sl { flex: 1 1 100%; }
  .shi .shi-range { flex: 1; width: auto; min-width: 0; }
  .shi-sl-row { display: flex; }
  .shi .shi-infobtn { margin-left: 0; }
  .shi .shi-dl { grid-template-columns: minmax(0, 1fr); }
  .shi .shi-sort { padding: 6px 10px; font-size: 11.5px; }
  .shi-kpis { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .shi .shi-kpi-v { font-size: 21px; }
  .shi .shi-tktitle { font-size: 22px; }
  .shi-tkin { width: 110px; }
  .shi-side { grid-template-columns: minmax(0, 1fr); }
  .shi-duo { grid-template-columns: minmax(0, 1fr); }
  .shi-card { padding: 12px 8px 8px; }
  .shi-wmark { font-size: 26px; }
}