/* Deengen live data components (board, chips, sparklines, drawer, gauge,
   ticker tape, skeletons). Builds on deengen.css tokens. */

/* ---------- verdict chips & badges ---------- */
.dgl-chip{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;
  padding:3px 9px 3px 8px;border-radius:999px;border:1px solid var(--line-2);white-space:nowrap;line-height:1.5}
.dgl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:currentColor}
.dgl-pass{color:var(--mint);border-color:rgba(105,240,192,.3);background:rgba(105,240,192,.06)}
.dgl-pass .dgl-dot{box-shadow:0 0 8px var(--mint)}
.dgl-rev{color:var(--amber);border-color:rgba(242,196,90,.3);background:rgba(242,196,90,.06)}
.dgl-fail{color:var(--crimson);border-color:rgba(255,111,111,.3);background:rgba(255,111,111,.06)}
.dgl-sc{display:inline-flex;align-items:center;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.04em;
  color:var(--cyan);border:1px solid rgba(55,212,226,.32);background:rgba(55,212,226,.06);border-radius:5px;padding:1px 6px;white-space:nowrap;text-transform:uppercase}
.dgl-stamp{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--faint);letter-spacing:.02em}
.dgl-up{color:var(--mint)} .dgl-down{color:var(--crimson)} .dgl-flat{color:var(--muted)}
.dgl-src{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--faint)}
.dgl-src a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.dgl-live{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}
.dgl-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:dglpulse 2s infinite}
.dgl-live.stale::before{background:var(--amber);box-shadow:none;animation:none}
.dgl-live.err::before{background:var(--crimson);box-shadow:none;animation:none}
@keyframes dglpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- sparkline ---------- */
.dgl-spark{display:block;overflow:visible}
.dgl-linechart{width:100%}
.dgl-linechart .dgl-spark{width:100%;height:220px}
.dgl-lc-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);margin-bottom:10px}
.dgl-empty{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--faint);padding:24px;text-align:center}

/* ---------- skeleton shimmer ---------- */
.dgl-skel{display:inline-block;height:12px;width:70px;border-radius:5px;vertical-align:middle;
  background:linear-gradient(90deg,var(--panel-2) 0%,var(--panel-3) 40%,#1c252c 50%,var(--panel-3) 60%,var(--panel-2) 100%);
  background-size:300% 100%;animation:dglshim 1.4s ease-in-out infinite}
.dgl-skel.w40{width:40px}.dgl-skel.w90{width:90px}.dgl-skel.w110{width:110px}.dgl-skel.full{width:100%}
.dgl-skel.tall{height:28px}
@keyframes dglshim{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---------- global strip ---------- */
.dgl-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dgl-stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;min-width:0}
.dgl-stat .l{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.dgl-stat .v{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dgl-stat .d{font-family:'IBM Plex Mono',monospace;font-size:12px;margin-top:2px;color:var(--muted)}
.dgl-stat.fng{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center}
.dgl-stat.fng .l{grid-column:1/-1}
.dgl-gauge{width:96px;height:56px;display:block}
.dgl-gauge-v{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;line-height:1.1}
.dgl-gauge-lbl{font-size:12px;color:var(--muted)}
.dgl-fng-spark{grid-column:1/-1;min-width:0;overflow:hidden}
.dgl-fng-note{grid-column:1/-1;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--faint)}
.dgl-fng-spark .dgl-spark{width:100%;height:26px}
.dgl-strip-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px}

/* ---------- ticker tape ---------- */
.dgl-tape{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);padding:11px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.dgl-tape-track{display:flex;gap:34px;width:max-content;white-space:nowrap;animation:dgltape 70s linear infinite;padding-left:24px}
.dgl-tape:hover .dgl-tape-track,.dgl-tape:focus-within .dgl-tape-track{animation-play-state:paused}
.dgl-tape-item{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted)}
.dgl-tape-item b{color:var(--text);font-weight:600}
.dgl-tape-item .dgl-dot{width:6px;height:6px}
.dgl-tape-item .dgl-dot.dgl-pass{background:var(--mint)}.dgl-tape-item .dgl-dot.dgl-rev{background:var(--amber)}.dgl-tape-item .dgl-dot.dgl-fail{background:var(--crimson)}
@keyframes dgltape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .dgl-tape{overflow-x:auto}
  .dgl-tape-track{animation:none}
  .dgl-skel{animation:none}
  .dgl-live::before{animation:none}
}

/* ---------- board ---------- */
.dgl-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.dgl-filters{display:flex;flex-wrap:wrap;gap:8px}
.dgl-filters .chip{padding:6px 11px}
.dgl-filters .chip .n{color:var(--faint);font-size:11px}
.dgl-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.dgl-controls .srch{max-width:340px}
.dgl-controls select{background:var(--panel);border:1px solid var(--line-2);border-radius:9px;padding:9px 12px;color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:13px;max-width:100%}
.dgl-controls select:focus,.dgl-controls input:focus{outline:2px solid rgba(105,240,192,.5);outline-offset:1px}
.dgl-board-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);max-width:100%}
.dgl-board{width:100%;border-collapse:separate;border-spacing:0;font-family:'IBM Plex Mono',monospace;font-size:13px;min-width:820px}
.dgl-board th{position:sticky;top:0;background:var(--panel);text-align:right;color:var(--faint);font-weight:500;padding:0;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;z-index:2}
.dgl-board th.l,.dgl-board td.l{text-align:left}
.dgl-board th button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:5px;width:100%;box-sizing:border-box;padding:12px 14px}
.dgl-board th.l button{justify-content:flex-start}
.dgl-board th button:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
.dgl-board th span.h{display:block;padding:12px 14px}
.dgl-board th .arr{opacity:.35;font-size:10px}
.dgl-board th[aria-sort=ascending] .arr,.dgl-board th[aria-sort=descending] .arr{opacity:1;color:var(--mint)}
.dgl-board td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;vertical-align:middle}
.dgl-board tbody tr{cursor:pointer;transition:background .12s}
.dgl-board tbody tr:hover,.dgl-board tbody tr:focus-within{background:var(--panel-2)}
.dgl-board tbody tr:last-child td{border-bottom:none}
.dgl-board tbody tr.sel{background:rgba(105,240,192,.05);box-shadow:inset 2px 0 0 var(--mint)}
/* sticky asset column on narrow screens */
.dgl-board .stick{position:sticky;left:0;background:var(--panel);z-index:1}
.dgl-board thead .stick{z-index:3}
.dgl-board tbody tr:hover .stick,.dgl-board tbody tr:focus-within .stick{background:var(--panel-2)}
.dgl-asset{display:flex;align-items:center;gap:10px;min-width:0}
.dgl-asset button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0}
.dgl-asset button:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px}
.dgl-asset .s{font-weight:600;color:var(--text);display:flex;align-items:center;gap:7px}
.dgl-asset .n{font-family:'Inter',sans-serif;font-size:12px;color:var(--faint);max-width:150px;overflow:hidden;text-overflow:ellipsis}
.dgl-rank{color:var(--faint);font-size:11px;width:22px;text-align:right;flex-shrink:0}
.dgl-board .spk{width:124px}
.dgl-board .spk .dgl-spark{margin-left:auto}
.dgl-board-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.dgl-scrollhint{display:none;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--faint)}

/* locked reasoning */
.dgl-lock{position:relative;border:1px dashed var(--line-2);border-radius:10px;padding:16px;overflow:hidden}
.dgl-lock .ghost{filter:blur(5px);opacity:.55;user-select:none;pointer-events:none}
.dgl-lock .ghost i{display:block;height:9px;border-radius:4px;background:var(--line-2);margin:10px 0}
.dgl-lock .over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;
  background:linear-gradient(180deg,rgba(12,16,20,.35),rgba(12,16,20,.92))}
.dgl-lock .over p{font-size:13.5px;color:var(--text);max-width:320px}

/* ---------- other markets list (stocks / ETFs / commodities) ---------- */
.dgl-olist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.dgl-ocard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0;transition:border-color .15s}
.dgl-ocard:hover{border-color:var(--line-2)}
.dgl-ocard:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.dgl-ocard .t{min-width:0}
.dgl-ocard .s{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13.5px}
.dgl-ocard .n{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dgl-ocard .g{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}

/* ---------- drawer / bottom sheet ---------- */
.dgl-scrim{position:fixed;inset:0;background:rgba(3,5,6,.62);backdrop-filter:blur(2px);z-index:110;opacity:0;pointer-events:none;transition:opacity .2s}
.dgl-scrim.open{opacity:1;pointer-events:auto}
.dgl-drawer{position:fixed;top:0;right:0;bottom:0;width:min(600px,100vw);background:var(--bg);border-left:1px solid var(--line-2);z-index:111;
  transform:translateX(102%);transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s linear .26s;display:flex;flex-direction:column;visibility:hidden}
.dgl-drawer.open{transform:none;visibility:visible;transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.dgl-drawer.dragging,.dgl-msheet.dragging{transition:none}
.dgl-dhead{position:relative;display:flex;align-items:center;gap:12px;padding:16px 20px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.dgl-dtitle{min-width:0;flex:1}
.dgl-grab{display:none}
.dgl-dhead h2{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dgl-dhead .sub{color:var(--muted);font-size:13px;margin-top:3px}
.dgl-close{all:unset;cursor:pointer;width:36px;height:36px;border-radius:8px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0}
.dgl-close:hover{color:var(--text);border-color:var(--mint)}
.dgl-close:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.dgl-dbody{overflow-y:auto;padding:18px 20px 28px;flex:1;overscroll-behavior:contain}
.dgl-dsec{margin-top:20px}
.dgl-dsec:first-child{margin-top:0}
.dgl-dsec h3{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;display:flex;justify-content:space-between;gap:10px}
.dgl-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.dgl-kv>div{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 11px;min-width:0}
.dgl-kv .l{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.dgl-kv .v{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dgl-tv{height:380px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.dgl-tv.mini{height:240px}
.dgl-tv.fallback{height:auto;padding:14px}
.dgl-crit{padding:10px 0;border-bottom:1px solid var(--line)}
.dgl-crit:last-child{border-bottom:none}
.dgl-crit .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.dgl-crit .nm{font-weight:600;font-size:14px}
.dgl-crit .ds{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--faint)}
.dgl-crit .sc{font-family:'IBM Plex Mono',monospace;font-size:13px}
.dgl-note{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-size:14px;line-height:1.6}
.dgl-why{font-size:13.5px;color:var(--muted);line-height:1.65}
.dgl-why b{color:var(--text)}
.dgl-links{display:flex;flex-wrap:wrap;gap:8px}
.dgl-cta{border:1px solid rgba(105,240,192,.3);background:linear-gradient(135deg,rgba(105,240,192,.08),rgba(55,212,226,.04));border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.dgl-cta p{font-size:14px}
.dgl-disc{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--faint);line-height:1.6;border-top:1px solid var(--line);padding-top:14px;margin-top:20px}
.dgl-seg{display:inline-flex;gap:4px;background:var(--panel);border:1px solid var(--line-2);border-radius:8px;padding:3px}
.dgl-seg button{all:unset;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);padding:4px 9px;border-radius:5px}
.dgl-seg button[aria-pressed=true]{background:rgba(105,240,192,.12);color:var(--mint)}
.dgl-seg button:focus-visible{outline:2px solid var(--mint)}
body.dgl-noscroll{overflow:hidden}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .dgl-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .dgl-drawer{top:auto;left:0;right:0;width:100%;height:92vh;height:92dvh;border-left:none;border-top:1px solid var(--line-2);border-radius:18px 18px 0 0;transform:translateY(102%);box-shadow:0 -20px 50px rgba(0,0,0,.45)}
  .dgl-drawer.open{transform:none}
  .dgl-dhead{border-radius:18px 18px 0 0;padding:24px 16px 12px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
  .dgl-grab{display:block;position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--line-2)}
  .dgl-dhead h2{font-size:18px;gap:6px 8px}
  .dgl-dhead h2 .dgl-chip{font-size:10.5px;padding:2px 8px 2px 7px}
  .dgl-dhead h2 .dgl-sc{font-size:9.5px}
  .dgl-tv{height:320px}
}
@media(max-width:420px){
  .dgl-stat{padding:13px 14px}
  .dgl-stat .v{font-size:18px}
  .dgl-gauge{width:80px;height:47px}
  .dgl-board{min-width:700px}
  .dgl-board td,.dgl-board th button{padding-left:10px;padding-right:10px}
  .dgl-asset .n{max-width:96px}
  .dgl-dbody{padding:16px 16px 24px}
  .dgl-dhead{padding-left:16px;padding-right:16px}
}

/* ---------- page helpers ---------- */
.dgl-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dgl-hero-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:18px}
.dgl-sec{padding:28px 0}
.dgl-h2{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.dgl-lead{color:var(--muted);font-size:15.5px;margin-top:8px;max-width:680px}
.dgl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dgl-cards .card{padding:22px}
.dgl-cards .card p{color:var(--muted);font-size:14.5px;line-height:1.65}
.dgl-cards .card p+p{margin-top:10px}
@media(max-width:900px){.dgl-cards{grid-template-columns:1fr}}
@media (max-width:620px){.dgl-board th:nth-child(4),.dgl-board td:nth-child(4),.dgl-board th:nth-child(5),.dgl-board td:nth-child(5),.dgl-board th:nth-child(6),.dgl-board td:nth-child(6){display:none}}

/* ============================================================
   App layer: watchlist, phone list, sheets, pull-to-refresh
   ============================================================ */

/* ---------- star / watchlist ---------- */
.dgl-star{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;color:var(--faint);flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:color .15s,background .15s}
.dgl-star svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;transition:fill .15s}
.dgl-star:hover{color:var(--text)}
.dgl-star[aria-pressed=true]{color:var(--amber)}
.dgl-star[aria-pressed=true] svg{fill:currentColor}
.dgl-star:focus-visible{outline:2px solid var(--mint);outline-offset:1px}
.dgl-star.pop svg{animation:dglpop .38s cubic-bezier(.3,1.7,.5,1)}
.dgl-star.lg{width:38px;height:38px;border:1px solid var(--line-2);border-radius:8px}
.dgl-star.lg svg{width:18px;height:18px}
.dgl-star.lg[aria-pressed=true]{border-color:rgba(242,196,90,.45);background:rgba(242,196,90,.08)}
@keyframes dglpop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.dgl-filters .chip .dgl-chip-star{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;flex-shrink:0}
.dgl-filters .chip.on .dgl-chip-star{fill:currentColor}
.dgl-asset .dgl-star{margin-inline-end:-4px}

/* ---------- logo-less monogram ---------- */
.dgl-mono{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:11.5px;letter-spacing:-.03em;line-height:1;
  border:1px solid var(--line-2);color:var(--muted);background:var(--panel-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.dgl-mono[data-len="1"],.dgl-mono[data-len="2"]{font-size:13px}
.dgl-mono.dgl-pass{color:var(--mint);border-color:rgba(105,240,192,.38);background:radial-gradient(circle at 30% 22%,rgba(105,240,192,.2),rgba(105,240,192,.05) 70%)}
.dgl-mono.dgl-rev{color:var(--amber);border-color:rgba(242,196,90,.38);background:radial-gradient(circle at 30% 22%,rgba(242,196,90,.2),rgba(242,196,90,.05) 70%)}
.dgl-mono.dgl-fail{color:var(--crimson);border-color:rgba(255,111,111,.38);background:radial-gradient(circle at 30% 22%,rgba(255,111,111,.2),rgba(255,111,111,.05) 70%)}
.dgl-chip.sm{font-size:10px;padding:1px 7px 1px 6px;gap:5px}
.dgl-chip.sm .dgl-dot{width:5px;height:5px}

/* ---------- 24h pill & price flash ---------- */
.dgl-pill{direction:ltr;unicode-bidi:isolate;display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:6px;white-space:nowrap;line-height:1.45}
.dgl-pill.dgl-up{background:rgba(105,240,192,.12)}
.dgl-pill.dgl-down{background:rgba(255,111,111,.13)}
.dgl-pill.dgl-flat{background:var(--panel-2)}
@keyframes dglFlashUp{0%{background-color:rgba(105,240,192,.28);color:var(--mint)}100%{background-color:transparent}}
@keyframes dglFlashDown{0%{background-color:rgba(255,111,111,.26);color:var(--crimson)}100%{background-color:transparent}}
.dgl-flash-up{animation:dglFlashUp 1.4s ease-out}
.dgl-flash-down{animation:dglFlashDown 1.4s ease-out}

/* ---------- sticky segmented filter bar + search ---------- */
.dgl-fbar{position:sticky;top:var(--dgl-top,64px);z-index:40;margin:0 -24px 12px;padding:10px 24px;
  background:rgba(6,8,10,.88);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.dgl-fbar-in{display:flex;align-items:center;gap:10px}
.dgl-fbar .dgl-filters{flex:1;min-width:0}
.dgl-fbar .srch{flex:0 1 280px;min-width:0;padding:8px 12px}
.dgl-qcancel{all:unset;display:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--mint);padding:8px 4px;white-space:nowrap}
.dgl-qcancel:focus-visible{outline:2px solid var(--mint);border-radius:4px}
.dgl-srch input::-webkit-search-cancel-button{filter:invert(.6)}

/* ---------- controls row ---------- */
.dgl-ctl{all:unset;box-sizing:border-box;cursor:pointer;display:none;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line-2);border-radius:9px;padding:9px 12px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--text);white-space:nowrap}
.dgl-ctl svg{width:15px;height:15px;color:var(--muted);flex-shrink:0}
.dgl-ctl:focus-visible{outline:2px solid var(--mint);outline-offset:1px}
.dgl-grow{flex:1}
.dgl-ago{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--faint);white-space:nowrap}
.dgl-refresh svg,.dgl-mini-refresh svg{width:15px;height:15px}
.dgl-refresh.spin svg,.dgl-mini-refresh.spin svg{animation:dglspin .8s linear infinite}
.dgl-refresh:disabled{opacity:.7;cursor:progress}
@keyframes dglspin{to{transform:rotate(360deg)}}

/* ---------- phone app list (cards) ---------- */
.dgl-list{display:none;list-style:none;margin:0 -24px;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dgl-item{position:relative;display:flex;align-items:stretch;border-bottom:1px solid var(--line);background:transparent}
.dgl-item:last-child{border-bottom:none}
.dgl-item.sel{background:rgba(105,240,192,.04)}
.dgl-item .dgl-star{width:40px;height:auto;align-self:stretch;border-radius:0;padding-inline-start:6px}
.dgl-item-main{all:unset;box-sizing:border-box;flex:1;min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr) 48px auto;align-items:center;column-gap:10px;
  padding-block:10px;padding-inline:0 16px;min-height:64px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s}
.dgl-item-main:active{background:var(--panel-2)}
.dgl-item-main:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
.dgl-item-id{min-width:0;display:flex;flex-direction:column;gap:4px;line-height:1.2}
.dgl-item-id .l1{display:flex;align-items:center;gap:7px;min-width:0}
.dgl-item-id .l1 b{font-family:'IBM Plex Mono',monospace;font-size:14.5px;font-weight:600;color:var(--text);flex-shrink:0}
.dgl-item-id .nm{font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dgl-item-id .l2{display:flex;align-items:center;gap:6px;min-width:0}
.dgl-item-id .l2 .dgl-chip{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;min-width:0;line-height:1.45}
.dgl-item-id .l2 .dgl-chip .dgl-dot{display:inline-block;vertical-align:middle;margin-inline-end:5px;margin-top:-2px}
.dgl-item-id .dgl-sc{font-size:9.5px;padding:0 5px;flex-shrink:0;line-height:1.5}
.dgl-item-spk{display:block;min-width:0}
.dgl-item-spk .dgl-spark{width:100%;height:26px}
.dgl-item-px{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:74px;text-align:end;line-height:1.2}
.dgl-item-px .p{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;letter-spacing:-.01em;padding:1px 5px;margin:-1px -5px;border-radius:5px}
.dgl-item-empty,.dgl-item-more{list-style:none}
.dgl-emptywl{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:36px 20px;color:var(--muted);font-family:'Inter',sans-serif;white-space:normal}
.dgl-emptywl svg{width:30px;height:30px;fill:none;stroke:var(--amber);stroke-width:1.5;stroke-linejoin:round}
.dgl-emptywl p{max-width:340px;font-size:14px;line-height:1.55}
.dgl-more{display:block;padding:14px 16px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--mint)}
.dgl-board .dgl-morerow td{padding:0}

/* ---------- other markets cards with star ---------- */
.dgl-ocard-w{display:flex;align-items:stretch;background:var(--panel);border:1px solid var(--line);border-radius:10px;min-width:0;transition:border-color .15s}
.dgl-ocard-w:hover{border-color:var(--line-2)}
.dgl-ocard-w .dgl-star{width:38px;height:auto;align-self:stretch;border-radius:10px 0 0 10px}
[dir=rtl] .dgl-ocard-w .dgl-star{border-radius:0 10px 10px 0}
.dgl-ocard-w .dgl-ocard{flex:1;border:none;background:none;padding-inline-start:2px;justify-content:flex-start}
.dgl-ocard-w .dgl-ocard .t{flex:1}
.dgl-ocard .dgl-mono{width:34px;height:34px;font-size:10.5px}

/* ---------- pulse strip extras ---------- */
.dgl-stat.upd{display:none}
.dgl-dots{display:none}
.dgl-mini-refresh{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--mint);border:1px solid rgba(105,240,192,.3);background:rgba(105,240,192,.06);border-radius:8px;padding:6px 10px;align-self:flex-start}
.dgl-mini-refresh:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* ---------- pull to refresh ---------- */
.dgl-ptr{display:none}
html.dgl-ptr-on,html.dgl-ptr-on body{overscroll-behavior-y:contain}

/* ---------- drawer: big price, tabs, chart range, about ---------- */
.dgl-dprice .dgl-bigpx{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dgl-bigpx .p{font-family:'IBM Plex Mono',monospace;font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1;border-radius:6px;padding:0 2px;margin:0 -2px}
.dgl-bigpx .dgl-pill{font-size:12.5px;padding:3px 9px}
.dgl-dago{margin-top:8px}
.dgl-tabs{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--panel);border:1px solid var(--line-2);border-radius:10px;padding:3px;margin:18px 0 0;box-shadow:0 -10px 0 6px var(--bg),0 6px 0 6px var(--bg)}
.dgl-tabs button{all:unset;box-sizing:border-box;position:relative;z-index:1;text-align:center;cursor:pointer;padding:8px 6px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted);border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.dgl-tabs button[aria-selected=true]{color:var(--mint)}
.dgl-tabs button:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
.dgl-tabs .ind{position:absolute;top:3px;bottom:3px;width:calc((100% - 6px) / 3);inset-inline-start:calc(3px + var(--i,0) * (100% - 6px) / 3);background:var(--panel-3);border:1px solid var(--line-2);border-radius:7px;transition:inset-inline-start .26s cubic-bezier(.2,.8,.2,1)}
.dgl-pane{padding-top:16px}
.dgl-pane[hidden]{display:none}
.dgl-tf{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none}
.dgl-tf::-webkit-scrollbar{display:none}
.dgl-tf button{all:unset;box-sizing:border-box;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);padding:6px 11px;border-radius:7px;border:1px solid transparent;white-space:nowrap}
.dgl-tf button:hover{color:var(--text)}
.dgl-tf button[aria-pressed=true]{background:rgba(105,240,192,.12);color:var(--mint);border-color:rgba(105,240,192,.25)}
.dgl-tf button.tv{margin-inline-start:auto;border-color:var(--line-2)}
.dgl-tf button:focus-visible{outline:2px solid var(--mint)}
.dgl-scrub{display:none;position:absolute;inset:0;pointer-events:none}
.dgl-scrub .ln{position:absolute;width:1px;background:var(--line-2)}
.dgl-scrub .dt{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--text);box-shadow:0 0 0 4px rgba(105,240,192,.25)}
.dgl-scrub .tip{position:absolute;transform:translateY(-100%);font-family:'IBM Plex Mono',monospace;font-size:11px;background:var(--panel-3);border:1px solid var(--line-2);border-radius:6px;padding:3px 7px;white-space:nowrap;color:var(--text)}
.dgl-about{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);margin:0}
.dgl-about>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.dgl-about>div:last-child{border-bottom:none}
.dgl-about dt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
.dgl-about dd{margin:0;font-size:14px;text-align:end;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.dgl-about .f,.dgl-linkrow .f{color:var(--faint)}
.dgl-pane .dgl-links{flex-direction:column}
.dgl-linkrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text);transition:border-color .15s}
.dgl-linkrow:hover{border-color:var(--mint)}
.dgl-linkrow .k{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.dgl-linkrow .v{display:block;font-size:14px;margin-top:2px}
.dgl-memb{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--mint);border:1px solid rgba(105,240,192,.35);border-radius:5px;padding:0 6px;margin-inline-start:6px;vertical-align:2px}

/* ---------- small bottom sheet (sort) ---------- */
.dgl-msheet{display:none}

/* ---------- local toast fallback ---------- */
.dgl-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:130;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);width:max-content;
  background:var(--panel-3);border:1px solid var(--line-2);color:var(--text);border-radius:12px;padding:10px 10px 10px 16px;box-shadow:0 16px 40px rgba(0,0,0,.5);font-size:14px;
  opacity:0;transform:translate(-50%,20px);pointer-events:none;transition:opacity .2s,transform .24s cubic-bezier(.2,.8,.2,1)}
.dgl-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dgl-toast.success{border-color:rgba(105,240,192,.35)}
.dgl-toast .m{min-width:0}
.dgl-toast button{all:unset;cursor:pointer;flex-shrink:0;font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;color:var(--mint);padding:6px 10px;border-radius:7px}
.dgl-toast button:hover,.dgl-toast button:focus-visible{background:rgba(105,240,192,.1)}

/* ---------- phones: app layout ---------- */
@media(max-width:720px){
  /* pulse strip -> swipeable cards */
  .dgl-strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,74%);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 -24px;padding:2px 16px 4px;scroll-padding-inline:16px;gap:10px;scrollbar-width:none}
  .dgl-strip::-webkit-scrollbar{display:none}
  .dgl-stat{scroll-snap-align:start;border-radius:14px;padding:14px 16px}
  .dgl-stat.fng{grid-template-columns:auto 1fr;gap:2px 12px}
  .dgl-stat.fng .dgl-gauge{width:76px;height:44px}
  .dgl-fng-spark .dgl-spark{height:22px}
  .dgl-stat.upd{display:flex;flex-direction:column}
  .dgl-stat.upd .v{font-size:20px}
  .dgl-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
  .dgl-dots i{display:block;width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:width .2s,background .2s}
  .dgl-dots i.on{width:18px;background:var(--mint)}
  .dgl-strip-foot{justify-content:center;text-align:center}
  .dgl-strip-foot #gUpdated{display:none}

  /* filter bar: horizontally scrolling segments, search collapses to an icon */
  .dgl-fbar{margin:0 -24px 10px;padding:8px 16px}
  .dgl-fbar .dgl-filters{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;gap:7px;
    margin-inline-start:-16px;padding-inline-start:16px;scroll-padding-inline:16px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  [dir=rtl] .dgl-fbar .dgl-filters{-webkit-mask-image:linear-gradient(270deg,#000 88%,transparent);mask-image:linear-gradient(270deg,#000 88%,transparent)}
  .dgl-fbar .dgl-filters::-webkit-scrollbar{display:none}
  .dgl-fbar .dgl-filters .chip{flex-shrink:0;scroll-snap-align:start;padding:7px 12px}
  .dgl-fbar .srch{flex:0 0 40px;width:40px;height:38px;padding:0;justify-content:center;gap:0;cursor:pointer;transition:flex-basis .2s}
  .dgl-fbar .srch input{width:0;min-width:0;padding:0;opacity:0;font-size:16px}
  .dgl-fbar.searching .dgl-filters{display:none}
  .dgl-fbar.searching .srch{flex:1 1 auto;width:auto;padding:0 12px;justify-content:flex-start;gap:9px;cursor:text;border-color:rgba(105,240,192,.45)}
  .dgl-fbar.searching .srch input{width:100%;opacity:1}
  .dgl-fbar.searching .dgl-qcancel{display:block}

  .dgl-controls{gap:8px;flex-wrap:wrap}
  .dgl-controls select{flex:1 1 0;min-width:0;padding:9px 8px;font-size:12.5px}
  .dgl-ctl{display:inline-flex;font-size:12.5px;padding:9px 10px;gap:6px}
  .dgl-controls .dgl-grow{display:none}
  .dgl-controls .dgl-refresh{width:40px;height:38px;padding:0}
  .dgl-controls .dgl-refresh span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .dgl-controls .dgl-ago{order:9;flex-basis:100%;text-align:end;margin-top:-1px}

  /* table -> app list */
  .dgl-board-wrap{display:none}
  .dgl-list{display:block}
  .dgl-scrollhint{display:none}
  .dgl-board-foot{justify-content:flex-end}

  /* pull to refresh indicator */
  .dgl-ptr{display:flex;position:fixed;left:50%;top:var(--dgl-top,64px);z-index:56;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;
    background:var(--panel-2);border:1px solid var(--line-2);box-shadow:0 10px 26px rgba(0,0,0,.45);opacity:0;pointer-events:none;
    transform:translate(-50%,calc(var(--d,0px) - 56px));transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s}
  .dgl-ptr.pulling{transition:none;opacity:1}
  .dgl-ptr.loading{opacity:1}
  .dgl-ptr-in{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--mint);background:rgba(105,240,192,.1);transition:background .15s,color .15s}
  .dgl-ptr-in svg{width:16px;height:16px;transform:rotate(var(--r,0deg))}
  .dgl-ptr.ready .dgl-ptr-in,.dgl-ptr.loading .dgl-ptr-in{background:var(--mint);color:#04130D}
  .dgl-ptr.loading .dgl-ptr-in svg{animation:dglspin .8s linear infinite}
  .dgl-ptr-t{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);white-space:nowrap}

  /* drawer body as sheet */
  .dgl-dbody{padding:16px 16px calc(28px + env(safe-area-inset-bottom))}
  .dgl-bigpx .p{font-size:26px}
  .dgl-kv>div{padding:8px 10px}

  /* sort sheet */
  .dgl-msheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:112;background:var(--panel);border-top:1px solid var(--line-2);border-radius:18px 18px 0 0;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px rgba(0,0,0,.45);
    transform:translateY(102%);visibility:hidden;transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s linear .26s}
  .dgl-msheet.open{transform:none;visibility:visible;transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  .dgl-msheet-head{position:relative;padding:24px 20px 10px;touch-action:none;cursor:grab}
  .dgl-msheet-head h2{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
  .dgl-sortopts button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:15px 20px;font-size:15.5px;color:var(--text);cursor:pointer;border-top:1px solid var(--line);-webkit-tap-highlight-color:transparent}
  .dgl-sortopts button:active,.dgl-sortopts button:focus-visible{background:var(--panel-2);outline:none}
  .dgl-sortopts button[aria-checked=true]{color:var(--mint)}
  .dgl-sortopts .dir{font-family:'IBM Plex Mono',monospace;color:var(--mint)}
  .dgl-sortopts .ck{width:18px;height:18px;margin-inline-start:auto;color:var(--mint);opacity:0}
  .dgl-sortopts button[aria-checked=true] .ck{opacity:1}

  .dgl-toast{bottom:calc(86px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  .dgl-item-main{grid-template-columns:36px minmax(0,1fr) auto}
  .dgl-item-spk{display:none}
  .dgl-mono{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .dgl-flash-up,.dgl-flash-down,.dgl-star.pop svg{animation:none}
  .dgl-ptr,.dgl-drawer,.dgl-msheet,.dgl-toast,.dgl-tabs .ind{transition:none}
  .dgl-refresh.spin svg,.dgl-mini-refresh.spin svg,.dgl-ptr.loading .dgl-ptr-in svg{animation-duration:2.4s}
}

/* numbers stay left-to-right inside RTL pages */
.dgl-item-px .p,.dgl-bigpx .p,.dgl-board td,.dgl-kv .v,.dgl-stat .v,.dgl-stat .d,.dgl-tape-item,.dgl-lc-meta span{unicode-bidi:plaintext}
.dgl-item-px .p,.dgl-bigpx .p{direction:ltr;unicode-bidi:isolate}
.dgl-tape-item{direction:ltr}
/* app-feel: compact hero on phones so the live list shows above the fold */
@media (max-width:720px){
  .mk-hero{padding:14px 0 4px!important}
  .mk-hero .crumbs,.mk-hero .wrap>p{display:none}
  .mk-hero h1{font-size:24px!important;margin:0!important}
}
.dgl-tape{direction:ltr}

.mk-ins{margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12.5px}
.mk-ins a{text-decoration:none}
.mk-ins a:hover{text-decoration:underline}
