@import url("./fonts/fonts.css");

/* HyperEcho — Hyperliquid-inspired glassmorphism design system. */
:root {
  --bg: #0A0A0B;
  --glass: rgba(22, 22, 26, 0.55);
  --glass-2: rgba(22, 22, 26, 0.42);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 34px rgba(0, 0, 0, 0.4);
  --accent-rgb: 79, 202, 168;
  --accent2-rgb: 65, 164, 178;
  --accent: #55D5B2;
  --accent2: #46ADBC;
  --accent-l: #91E7CF;
  --accent-ink: #08221C;
  --accent-grad: linear-gradient(135deg, #58D5B3 0%, #4BC3AD 52%, #46ADBC 100%);
  --accent-glass: linear-gradient(135deg, rgba(79, 202, 168, .20), rgba(65, 164, 178, .10));
  --green: #3FCF8E; --green-l: #86E3B6;
  --red: #FF5C5C; --red-l: #FF8A8A;
  --amber: #E7C56F;
  --blue: #5E9BFF; --blue-l: #9DC0FF;
  --gray: #7A7A82;
  --t1: #F5F5F7; --t2: #9A9AA2; --t3: #7A7A82; --t4: #5E5E66;
  --sans: "MiSans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important; }
body {
  background: var(--bg); color: var(--t1); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
#root { height: 100vh; height: 100dvh; }

/* fixed glow layer behind the glass */
.glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 600px at 88% -8%, rgba(var(--accent-rgb), 0.17), transparent 60%),
    radial-gradient(800px 600px at -6% 108%, rgba(var(--accent2-rgb), 0.09), transparent 55%);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--green-l); } .down { color: var(--red-l); }

/* ---------- collection schedule ---------- */
.collection-schedule-overlay { padding: 22px; background: rgba(3,4,5,.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal.collection-schedule-modal { width: min(700px, calc(100vw - 44px)); max-height: min(760px, calc(100dvh - 44px));
  padding: 0; overflow: hidden; display: flex; flex-direction: column; border-radius: 19px;
  background: linear-gradient(155deg, rgba(23,25,27,.98), rgba(13,14,17,.98));
  border-color: rgba(255,255,255,.09); box-shadow: inset 0 1px rgba(255,255,255,.065),
    0 32px 90px rgba(0,0,0,.64), 0 0 60px rgba(var(--accent-rgb),.035); }
.collection-schedule-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding: 21px 22px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.modal.collection-schedule-modal .collection-schedule-head h3 { margin: 0 0 5px; font-size: 17px; letter-spacing: -.01em; }
.modal.collection-schedule-modal .collection-schedule-head p { margin: 0; color: var(--t3); font-size: 11.5px; }
.collection-schedule-close { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  margin: -4px -4px 0 0; padding: 0 0 2px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--t3); font: 300 23px/1 var(--sans); cursor: pointer; }
.collection-schedule-close:hover { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.05); color: var(--t1); }
.collection-schedule-close:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.65); outline-offset: 2px; }
.collection-schedule-body { min-height: 0; padding: 17px 22px 20px; overflow-y: auto; }
.schedule-effective-note { display: flex; align-items: center; gap: 9px; min-height: 35px; padding: 8px 11px;
  margin-bottom: 13px; border: 1px solid rgba(var(--accent-rgb),.12); border-radius: 10px;
  background: rgba(var(--accent-rgb),.045); }
.schedule-effective-note > span { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 9px rgba(var(--accent-rgb),.45); }
.modal.collection-schedule-modal .schedule-effective-note p { margin: 0; color: var(--t3); font-size: 10.5px; line-height: 1.45; }
.schedule-effective-note p b { color: var(--t2); font-weight: 600; }
.schedule-effective-note.active { border-color: rgba(231,197,111,.16); background: rgba(231,197,111,.05); }
.schedule-effective-note.active > span { background: var(--amber); box-shadow: 0 0 9px rgba(231,197,111,.42); }
.schedule-common-time { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 62px;
  padding: 9px 10px 9px 14px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px; background: rgba(255,255,255,.025); }
.schedule-common-time span { display: block; margin-bottom: 4px; color: var(--t2); font-size: 11.5px; font-weight: 600; }
.schedule-common-time small { display: block; color: var(--t4); font: 9.5px/1.4 var(--mono); }
.schedule-time-trigger { display: grid; grid-template-columns: 34px 10px 34px 18px; align-items: center;
  justify-content: center; min-width: 128px; height: 42px; padding: 0 8px; appearance: none;
  border: 1px solid rgba(255,255,255,.085); border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(0,0,0,.16));
  color: var(--t1); box-shadow: inset 0 1px rgba(255,255,255,.045); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.schedule-time-trigger:hover { border-color: rgba(var(--accent-rgb),.24); background: rgba(255,255,255,.055); }
.schedule-time-trigger.open { border-color: rgba(var(--accent-rgb),.34); background: rgba(var(--accent-rgb),.045);
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 5px 18px rgba(0,0,0,.12); }
.schedule-time-trigger:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.72); outline-offset: 2px; }
.schedule-time-trigger span { color: var(--t1); text-align: center; font: 680 16px/1 var(--mono); }
.schedule-time-trigger b { color: var(--accent-l); font: 650 15px/1 var(--mono); }
.schedule-time-trigger i { width: 6px; height: 6px; margin: -3px 0 0 4px;
  border-right: 1.5px solid var(--t3); border-bottom: 1.5px solid var(--t3);
  transform: rotate(45deg); transition: transform .15s, border-color .15s; }
.schedule-time-trigger.open i { border-color: var(--accent-l); transform: translateY(3px) rotate(225deg); }

.time-wheel-popover { position: fixed; z-index: 80; isolation: isolate; width: 220px; padding: 9px 9px 10px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
  background: linear-gradient(150deg, rgba(28,31,32,.74), rgba(12,13,15,.70));
  box-shadow: inset 0 1px rgba(255,255,255,.075), 0 20px 52px rgba(0,0,0,.56),
    0 0 36px rgba(var(--accent-rgb),.025); backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%); animation: time-wheel-in .14s ease-out; }
.time-wheel-popover::before { content: ""; position: absolute; z-index: -1; top: -68px; right: -48px;
  width: 150px; height: 118px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--accent-rgb),.12), transparent 68%); filter: blur(8px); }
@keyframes time-wheel-in { from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); } }
.time-wheel-head { height: 29px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 7px; border-bottom: 1px solid rgba(255,255,255,.065); }
.time-wheel-head > div { display: flex; align-items: center; gap: 7px; }
.time-wheel-head b { color: var(--t2); font-size: 9.5px; font-weight: 620; }
.time-wheel-head span { padding: 2px 5px; border-radius: 5px; color: var(--accent-l);
  background: rgba(var(--accent-rgb),.075); font: 700 7.5px/1 var(--mono); letter-spacing: .06em; }
.time-wheel-head button { padding: 3px 5px; border: 0; background: transparent; color: var(--accent-l);
  font: 650 9.5px/1 var(--sans); cursor: pointer; }
.time-wheel-head button:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.62); outline-offset: 1px; border-radius: 5px; }
.time-wheel-body { position: relative; display: grid; grid-template-columns: 1fr 16px 1fr; align-items: end; padding-top: 7px; }
.time-wheel-column { position: relative; z-index: 1; }
.time-wheel-column-label { display: block; height: 16px; color: var(--t4); text-align: center;
  font: 590 8.5px/16px var(--sans); letter-spacing: .08em; }
.time-wheel-track { position: relative; height: 160px; overflow: hidden; }
.time-wheel-selection { position: absolute; z-index: 0; top: 87px; right: 3px; left: 3px; height: 32px;
  border-top: 1px solid rgba(var(--accent-rgb),.18); border-bottom: 1px solid rgba(var(--accent-rgb),.14);
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.075) 24%,
    rgba(var(--accent2-rgb),.065) 76%, transparent); box-shadow: 0 0 24px rgba(var(--accent-rgb),.035); }
.time-wheel-list { position: relative; z-index: 1; height: 160px; padding: 64px 0; overflow-x: hidden;
  overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none;
  touch-action: pan-y; mask-image: linear-gradient(to bottom, transparent 0, #000 27%, #000 73%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 27%, #000 73%, transparent 100%); }
.time-wheel-list::-webkit-scrollbar { display: none; }
.time-wheel-option { display: block; width: 100%; height: 32px; padding: 0; border: 0;
  scroll-snap-align: center; background: transparent; color: var(--t3); text-align: center;
  font: 610 15.5px/32px var(--mono); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: color .12s, opacity .12s, transform .12s; }
.time-wheel-option:hover { color: var(--t2); }
.time-wheel-option[aria-selected="true"] { color: var(--accent-l); font-weight: 720;
  text-shadow: 0 0 14px rgba(var(--accent-rgb),.16); transform: scale(1.035); }
.time-wheel-option:focus-visible { outline: 1px solid rgba(var(--accent-rgb),.62); outline-offset: -4px; border-radius: 8px; }
.time-wheel-colon { position: relative; z-index: 2; align-self: center; margin-top: 16px;
  color: rgba(var(--accent-rgb),.68); text-align: center; font: 680 15px/1 var(--mono); }
.schedule-plan-list { display: grid; gap: 10px; }
.schedule-plan-card { overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 13px;
  background: rgba(7,8,10,.28); box-shadow: inset 0 1px rgba(255,255,255,.02); }
.schedule-plan-main { min-height: 73px; padding: 13px 14px; display: grid;
  grid-template-columns: minmax(260px,1fr) 148px 44px; align-items: center; gap: 16px; }
.schedule-row-copy strong { display: block; margin-bottom: 5px; font-size: 13.5px; }
.schedule-row-copy span { color: var(--t3); font-size: 11px; }
.schedule-next { min-width: 0; }
.schedule-next span { display: block; margin-bottom: 4px; color: var(--t4); font-size: 10px; }
.schedule-next b { color: var(--t2); font-size: 11px; font-weight: 560; white-space: nowrap; }
.schedule-switch { position: relative; width: 44px; height: 25px; padding: 0; border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; background: rgba(255,255,255,.09); cursor: pointer; transition: .18s ease; }
.schedule-switch span { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: #aaa; box-shadow: 0 2px 5px rgba(0,0,0,.4); transition: transform .18s ease, background .18s ease; }
.schedule-switch.on { border-color: rgba(var(--accent-rgb),.32); background: rgba(var(--accent-rgb),.72); }
.schedule-switch.on span { transform: translateX(19px); background: #f1fff9; }
.schedule-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.schedule-full-controls { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: end;
  gap: 18px; padding: 13px 14px 14px; background: rgba(0,0,0,.14);
  border-top: 1px solid rgba(255,255,255,.05); }
.schedule-frequency > span, .schedule-weekdays > span { display: block; margin-bottom: 8px;
  color: var(--t4); font-size: 10px; }
.schedule-segment { display: flex; border: 1px solid var(--glass-border); border-radius: 9px; overflow: hidden; }
.schedule-segment button { min-width: 76px; height: 34px; padding: 0 14px; border: 0; border-right: 1px solid var(--glass-border);
  background: transparent; color: var(--t3); cursor: pointer; }
.schedule-segment button:last-child { border-right: 0; }
.schedule-segment button.on { background: rgba(var(--accent-rgb),.14); color: var(--accent-l); }
.schedule-weekdays > div { display: flex; gap: 6px; }
.schedule-weekdays button { width: 35px; height: 34px; padding: 0; border: 1px solid var(--glass-border); border-radius: 8px;
  color: var(--t3); background: transparent; cursor: pointer; }
.schedule-weekdays button.on { color: var(--accent-ink); border-color: rgba(var(--accent-rgb),.5);
  background: var(--accent); font-weight: 700; }
.schedule-preview-copy { min-width: 0; }
.schedule-preview-copy > span { display: block; margin-bottom: 8px; color: var(--t4); font-size: 10px; }
.schedule-preview-copy b { display: block; overflow: hidden; color: var(--t2); font-size: 11px;
  text-overflow: ellipsis; white-space: nowrap; }
.schedule-preview-copy small { display: block; min-height: 13px; margin-top: 6px; color: var(--t4); font-size: 9.5px; }
.schedule-preview-copy small em { font-style: normal; }
.collection-schedule-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 76px; padding: 14px 22px 15px; border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(7,8,10,.32); }
.collection-schedule-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.collection-schedule-actions .btn { min-width: 80px; justify-content: center; }
.schedule-save { min-width: 98px !important; }
.schedule-ok { color: var(--green-l); font-size: 11px; }
.schedule-error { color: var(--red-l); font-size: 11px; }

@media (max-width: 560px) {
  .collection-schedule-overlay { align-items: flex-end; padding: 0; }
  .modal.collection-schedule-modal { width: 100%; max-width: none; max-height: calc(100dvh - 14px);
    border-radius: 18px 18px 0 0; }
  .collection-schedule-head { padding: 18px 16px 15px; }
  .collection-schedule-body { padding: 14px 16px 17px; }
  .schedule-plan-main { grid-template-columns: minmax(0, 1fr) 44px; gap: 11px 14px; }
  .schedule-next { grid-column: 1; grid-row: 2; }
  .schedule-switch { grid-column: 2; grid-row: 1 / span 2; }
  .schedule-full-controls { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .schedule-weekdays > div { justify-content: space-between; gap: 4px; }
  .schedule-weekdays button { width: 32px; }
  .collection-schedule-footer { align-items: flex-start; flex-direction: column; gap: 13px; padding: 13px 16px 16px; }
  .collection-schedule-actions { width: 100%; }
  .collection-schedule-actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .time-wheel-popover { animation: none; }
  .time-wheel-option, .schedule-time-trigger i { transition: none; }
}

/* ---------- login ---------- */
.login-shell { position: relative; z-index: 1; height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  width: 360px; padding: 32px 28px; border-radius: 20px;
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.login-brand img { width: 48px; height: 38px; filter: drop-shadow(0 7px 18px rgba(var(--accent-rgb), .18)); }
.login-brand > div { display: block; }
.login-brand b { color: var(--t1); font: 700 17px/1 var(--mono); letter-spacing: .16em; }
.login-brand b em { color: var(--accent); font-style: normal; }
.login-card h1 { font-size: 18px; margin: 0 0 2px; }
.login-card p { color: var(--t3); font-size: 12px; margin: 0 0 22px; }
.login-card input {
  width: 100%; height: 42px; padding: 0 14px; border-radius: 11px; margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--glass-border); color: var(--t1);
  font-family: var(--mono); outline: none;
}
.login-card input:focus { border-color: var(--accent); }
.login-card .err { color: var(--red-l); font-size: 12px; margin: 0 0 10px; }

/* ---------- app shell ---------- */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 100vh; height: 100dvh; min-width: 0; }

/* sidebar */
.side { padding: 22px 16px; border-right: 1px solid var(--glass-border);
  background: var(--glass-2); backdrop-filter: blur(20px); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; margin-bottom: 27px; padding: 1px 5px 0; }
.brand-mark { width: 40px; height: 32px; flex: 0 0 auto; filter: drop-shadow(0 7px 16px rgba(var(--accent-rgb), .17)); }
.brand-copy { min-width: 0; }
.brand-copy b { display: flex; align-items: center; gap: 7px; color: var(--t1); font: 700 14px/1 var(--mono); letter-spacing: .12em; }
.brand-copy b em { color: var(--accent); font-style: normal; }
.nav-group { font-size: 10px; letter-spacing: 1.4px; color: var(--t4); text-transform: uppercase;
  margin: 16px 8px 8px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px;
  color: var(--t2); font-size: 13.5px; cursor: pointer; margin-bottom: 2px; transition: background .15s, color .15s; }
.nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--t1); }
.nav-item.disabled { cursor: not-allowed; opacity: .38; }
.nav-item.disabled:hover { background: transparent; color: var(--t3); }
.nav-item.active { background: var(--accent-grad); color: var(--accent-ink); font-weight: 600;
  box-shadow: 0 6px 18px rgba(28, 133, 112, .16); }
.nav-item svg { width: 17px; height: 17px; opacity: .9; }
.ext-link { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--t3); opacity: .6; transition: color .15s, opacity .15s; }
.ext-link:hover { color: var(--accent); opacity: 1; }
.ext-link svg { width: 12px; height: 12px; }
.nav-count { margin-left: auto; font-size: 12px; font-weight: 600; line-height: 1; min-width: 18px;
  text-align: center; padding: 3px 7px; border-radius: 9px; background: rgba(255, 255, 255, .08); color: var(--t2); }
.nav-item:hover .nav-count { color: var(--t1); }
.nav-item.active .nav-count { background: rgba(0, 44, 36, .14); color: var(--accent-ink); }
.side .spacer { flex: 1; }
.logout { display: flex; align-items: center; gap: 11px; color: var(--t3); font-size: 12.5px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.logout svg { width: 17px; height: 17px; flex-shrink: 0; }
.logout:hover { background: rgba(255, 255, 255, 0.04); color: var(--t2); }

/* main */
.main { overflow-y: auto; padding: 0; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px 14px;
  position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, rgba(10,10,11,.92), rgba(10,10,11,.6) 70%, transparent);
  backdrop-filter: blur(6px); }
.crumb { font-size: 11px; color: var(--t3); }
.crumb-live { color: var(--red-l); font-weight: 700; letter-spacing: .04em; }
.execution-health { position: relative; flex: 0 0 168px; width: 168px; height: 38px; z-index: 8; }
.execution-rings-status {
  position: relative; isolation: isolate; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--accent-l);
  font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.execution-rings-status:hover { filter: brightness(1.08); }
.execution-rings-status:focus-visible { outline: 0; filter: brightness(1.14) drop-shadow(0 0 7px rgba(var(--accent-rgb),.28)); }
.execution-rings-status.live,
.execution-rings-status.paper { color: var(--accent-l); }
.execution-rings-status.paused { color: var(--amber); }
.execution-rings-status.stopped { color: var(--t2); }
.execution-rings-status.check { color: var(--red-l); }
.execution-rings-canvas { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; opacity: .94; }
.execution-rings-status.stopped .execution-rings-canvas,
.execution-rings-status.paused .execution-rings-canvas,
.execution-rings-status.check .execution-rings-canvas { opacity: .62; }
.execution-rings-label {
  position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px;
  color: currentColor; text-shadow: 0 1px 5px #000, 0 0 10px #050807, 0 0 16px rgba(var(--accent-rgb),.2);
  white-space: nowrap; pointer-events: none;
}
.execution-rings-label i { font: 800 9px/1 var(--mono); letter-spacing: -.12em; }
.execution-rings-label b { font: 760 10px/1 var(--mono); letter-spacing: .09em; }
.execution-rings-label em { margin: 0 1px; color: currentColor; opacity: .56; font: 600 8px/1 var(--mono); font-style: normal; }
.execution-rings-label small { color: currentColor; font: 650 8px/1 var(--sans); letter-spacing: .015em; }
.execution-rings-status.health-warning { color: var(--amber); }
.execution-rings-status.health-critical { color: var(--red-l); }
.execution-rings-status.health-inactive:not(.live):not(.paper) { color: var(--t2); }

.execution-diagnostics {
  position: absolute; top: calc(100% + 10px); right: -76px; width: min(420px, calc(100vw - 32px));
  padding: 15px 16px 12px; border: 1px solid rgba(255,255,255,.075); border-radius: 13px;
  color: var(--t1); background: rgba(18,18,21,.88); box-shadow: 0 18px 48px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.055);
  backdrop-filter: blur(24px) saturate(132%); -webkit-backdrop-filter: blur(24px) saturate(132%);
}
.execution-diagnostics-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.execution-diagnostics-head b { font-size: 13px; font-weight: 670; }
.execution-diagnostics-head span { color: var(--t3); font: 500 10px/1 var(--mono); white-space: nowrap; }
.execution-diagnostics-summary { margin-top: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.065);
  color: var(--t2); font-size: 12px; font-weight: 650; }
.execution-diagnostics-summary.healthy { color: var(--green-l); }
.execution-diagnostics-summary.warning { color: var(--amber); }
.execution-diagnostics-summary.critical { color: var(--red-l); }
.execution-diagnostics-list { padding: 6px 0 8px; }
.execution-diagnostics-row { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; align-items: baseline;
  gap: 8px; min-height: 31px; padding: 7px 0; }
.execution-diagnostics-row > span { color: var(--t3); font-size: 11.5px; }
.execution-diagnostics-row > b { color: var(--t1); font: 620 11.5px/1.3 var(--mono); text-align: left; }
.execution-diagnostics-row > b.warning { color: var(--amber); }
.execution-diagnostics-row > b.critical { color: var(--red-l); }
.execution-diagnostics-row > small { color: var(--t3); font: 500 10px/1.3 var(--mono); text-align: right; white-space: nowrap; }
.execution-diagnostics-issue { display: flex; align-items: center; gap: 10px; padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.065); font-size: 11px; }
.execution-diagnostics-issue span { color: var(--t3); }
.execution-diagnostics-issue b { color: var(--t2); font-weight: 600; }
.execution-diagnostics-issue.has-issue b { color: var(--red-l); }
.title { font-size: 21px; font-weight: 650; margin-top: 2px; }
.title-accent { color: var(--accent); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.mobile-nav { display: none; }
.pull-refresh { display: none; }

/* pills / badges */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.tint { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; font-family: var(--mono); }
.tint-green { background: rgba(63, 207, 142, .14); color: var(--green-l); }
.tint-red { background: rgba(255, 92, 92, .14); color: var(--red-l); }
.tint-blue { background: rgba(94, 155, 255, .14); color: var(--blue-l); }
.tint-amber { background: rgba(255, 178, 122, .14); color: var(--amber); }
.tint-gray { background: rgba(122, 122, 130, .16); color: var(--t2); }

/* buttons */
.btn { border: 1px solid var(--glass-border); background: rgba(255, 255, 255, .05); color: var(--t1);
  padding: 8px 16px; border-radius: 11px; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans);
  transition: filter .15s, background .15s, border-color .15s, box-shadow .15s, transform .15s; }
.btn:hover { background: rgba(255, 255, 255, .09); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.72); outline-offset: 2px; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
/* Async buttons keep their resting geometry: the original content remains in flow while the
   loading indicator is visually centered over it. Never swap in wider progress copy. */
.btn[aria-busy="true"] { position: relative; color: transparent; }
.btn[aria-busy="true"] > :not(.spin) { visibility: hidden; }
.btn[aria-busy="true"] > .spin { position: absolute; inset: 0; margin: auto; visibility: visible; }
.btn-accent { background: var(--accent-grad); border: none; color: var(--accent-ink);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 7px 20px rgba(28, 133, 112, .15); }
.btn-accent:hover { filter: brightness(1.08); }
.btn-pill { min-height: 30px; padding: 0 14px; border-radius: 999px; font-size: 11.5px; }
.btn-pill svg { width: 13px; height: 13px; }
/* prominent GREEN primary (same treatment as btn-accent, green instead of coral) — the "go/启动" action.
   gradient + shadow per the design handoff applyBtnStyle, so 启动/恢复 carry 暂停's weight, not a weak tint. */
.btn-go { background: linear-gradient(135deg, #55E5AD, #2EAD80); border: none; color: #06231B;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 6px 18px rgba(69, 217, 161, .24); }
.btn-go:hover { filter: brightness(1.08); }
/* prominent RED primary: identical geometry and interaction weight to accent/go, with hue alone carrying
   the destructive meaning. Keep secondary destructive affordances on the quieter btn-danger treatment. */
.btn-stop { background: linear-gradient(135deg, #FF4D57, #D72F3B); border: none; color: #fff;
  box-shadow: 0 6px 18px rgba(239, 54, 66, .3); }
.btn-stop:hover { filter: brightness(1.08); box-shadow: 0 8px 22px rgba(239, 54, 66, .36); }
.btn-green { background: rgba(63, 207, 142, .16); border-color: rgba(63,207,142,.3); color: var(--green-l); }
.btn-danger { background: rgba(255, 92, 92, .14); border-color: rgba(255, 92, 92, .3); color: var(--red-l); padding: 6px 12px; font-size: 12px; }
.btn-danger:hover { background: rgba(255, 92, 92, .22); }
.btn:disabled { opacity: .55; cursor: default; }
/* compact size modifier for in-table gradient buttons (e.g. 平仓 = .btn .btn-stop .btn-sm) */
.btn-sm { padding: 2px 8px; font-size: 10.5px; border-radius: 7px; gap: 3px; box-shadow: 0 2px 6px rgba(226, 82, 74, .22); }
.btn-sm svg { width: 11px; height: 11px; }
.btn-close-primary { color: var(--accent-ink); background: var(--accent-grad);
  border-color: rgba(var(--accent-rgb),.32);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 6px 18px rgba(var(--accent-rgb),.19);
  white-space: nowrap; }
.btn-close-primary:hover { background: var(--accent-grad); border-color: rgba(var(--accent-rgb),.46);
  filter: brightness(1.08);
  box-shadow: inset 0 1px rgba(255,255,255,.27), 0 8px 22px rgba(var(--accent-rgb),.26); }
.btn-close-primary.btn-sm {
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 3px 10px rgba(var(--accent-rgb),.2); }
.observer-controls { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.observer-control-btn { width: 42px; min-width: 42px; height: 28px; padding: 0; border-radius: 999px;
  justify-content: center; gap: 0; box-shadow: inset 0 1px rgba(255,255,255,.12); }
.observer-control-btn svg { width: 13px; height: 13px; }
.observer-control-btn .spin { width: 12px; height: 12px; border-width: 1.5px; }
.observer-play-btn,
.observer-pause-btn,
.observer-stop-btn { color: var(--accent-ink); border-color: rgba(var(--accent-rgb),.32);
  background: var(--accent-grad);
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 5px 15px rgba(var(--accent-rgb),.2); }
.observer-play-btn:hover,
.observer-pause-btn:hover,
.observer-stop-btn:hover { color: var(--accent-ink); border-color: rgba(var(--accent-rgb),.46);
  background: var(--accent-grad); filter: brightness(1.08);
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 6px 18px rgba(var(--accent-rgb),.27); }
.observer-control-btn:disabled { opacity: .45; box-shadow: none; }
.observer-stop-btn:disabled { color: var(--t4); border-color: rgba(255,255,255,.06);
  background: rgba(255,255,255,.035); opacity: .72; }
/* Shared compact icon action for operator-owned favourites/locks. */
.btn-star { width: 27px; height: 27px; padding: 0; justify-content: center; gap: 0; border-radius: 8px;
  border-color: transparent; background: transparent; color: var(--t4); font-family: var(--sans);
  font-size: 20px; font-weight: 500; line-height: 1; box-shadow: none; }
.btn-star:hover { color: var(--amber); background: rgba(255,178,122,.08); }
.btn-star.on { color: #f4bd4a; background: rgba(244,189,74,.10); text-shadow: 0 0 12px rgba(244,189,74,.34); }
.btn-star.on:hover { background: rgba(244,189,74,.16); }
.positions-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.coin-ban-btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; padding: 0; border: 0; background: transparent;
  color: var(--t3); opacity: .58; vertical-align: -3px; cursor: pointer;
  transition: color .12s, opacity .12s, transform .12s; }
.coin-ban-btn:hover { color: var(--red-l); opacity: 1; transform: translateY(-1px); }
.coin-ban-btn.on { color: var(--red-l); opacity: .82; cursor: pointer; }
.coin-ban-btn.on:hover { opacity: 1; transform: translateY(-1px); }
.coin-ban-btn:disabled { opacity: .55; cursor: default; }
.coin-ban-btn svg { width: 14px; height: 14px; }
.coin-ban-btn .spin { width: 11px; height: 11px; border-width: 1.5px; }
.coin-ban-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 30;
  transform: translateX(-50%) translateY(2px); padding: 5px 8px; border-radius: 7px;
  background: rgba(20,20,24,.96); border: 1px solid rgba(255,255,255,.12);
  color: var(--t1); box-shadow: 0 8px 24px rgba(0,0,0,.28); font-family: var(--font);
  font-size: 11px; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity .12s, transform .12s; }
.coin-ban-tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(20,20,24,.96); }
.coin-ban-btn:hover .coin-ban-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
/* the % picker chips in the confirm modal */
.close-pop-row { display: flex; gap: 6px; }
/* history row → expandable fill-by-fill detail (源 vs 我们) */
.row-caret { display: inline-block; color: var(--t3); font-size: 10px; transition: transform .15s; margin-right: 2px; }
tr.row-open { background: rgba(255, 255, 255, .03); }
tr.detail-row > td { padding: 0 !important; background: rgba(255, 255, 255, .015); border-top: none; }
.pos-detail { padding: 14px 18px 16px; background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 46%); }
.pos-detail-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.pos-detail-stat { min-width: 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,.055); border-radius: 10px;
  background: rgba(255,255,255,.025); }
.pos-detail-stat > span { display: block; margin-bottom: 6px; color: var(--t3); font-size: 10px; font-weight: 600;
  letter-spacing: .35px; white-space: nowrap; }
.pos-detail-stat b { display: flex; align-items: baseline; gap: 7px; min-width: 0; color: var(--t1);
  font-family: var(--mono); font-size: 14px; font-weight: 650; white-space: nowrap; }
.pos-detail-stat b small { color: var(--t3); font-family: var(--mono); font-size: 10px; font-weight: 500; }
.pos-detail-stat b.up { color: var(--green-l); }
.pos-detail-stat b.down { color: var(--red-l); }
.pos-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 2px 7px; }
.pos-detail-section-head h4 { margin: 0; color: var(--t1); font-size: 12px; font-weight: 650; letter-spacing: .2px; }
.pos-detail-section-head span { color: var(--t3); font-family: var(--mono); font-size: 10px; }
.fills-tbl { width: 100%; border-collapse: collapse; }
.fills-tbl th { font-size: 11px; color: var(--t3); text-align: left; padding: 4px 10px; font-weight: 500; }
.fills-tbl td { padding: 5px 10px; font-size: 12px; border-top: 1px solid var(--glass-border); }
.fills-tbl th.num, .fills-tbl td.num { text-align: right; }
.fill-skipped { background: rgba(255, 92, 92, .06); }
.audit-box { padding: 12px 18px 14px; }
.audit-event { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.audit-event:last-child { border-bottom: none; }
.audit-meta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
  color: var(--t3); font-family: var(--mono); font-size: 11.5px; text-align: right; }
/* reusable clickable section header for collapsible blocks (tier cards, add-strategy blocks, …) */
.expand-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; margin-top: 4px; cursor: pointer;
  border-radius: 10px; background: rgba(255, 255, 255, .035); border: 1px solid var(--glass-border);
  transition: background .15s, border-color .15s; }
.expand-head:hover { background: rgba(255, 255, 255, .07); }
.expand-head.open { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.expand-body { border: 1px solid rgba(255, 255, 255, .12); border-top: none; border-radius: 0 0 10px 10px;
  padding: 2px 12px 6px; background: rgba(255, 255, 255, .012); }
.pct-chip { flex: 1; padding: 6px 0; border-radius: 8px; font-size: 12px; font-family: var(--mono); cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-border); color: var(--t2); }
.pct-chip:hover { background: rgba(255, 255, 255, .1); }
.pct-chip.on { background: rgba(var(--accent2-rgb), .16); border-color: rgba(var(--accent2-rgb), .48); color: #93DCE3; }
.spin { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* global system status cards */
.system-strip { display: flex; gap: 10px; padding: 0 26px 14px; flex-wrap: wrap; }
.strip-item { display: flex; flex: 1 1 116px; min-width: 116px; min-height: 56px; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 3px; padding: 8px 14px; border-radius: 13px;
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }
.strip-item span { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .5px; }
.strip-item b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono);
  font-size: 16px; line-height: 1.2; font-weight: 600; color: var(--t1); white-space: nowrap; }
.strip-item b.up { color: var(--green-l); }
.strip-item b.down { color: var(--red-l); }
.strip-item.strip-scanner { gap: 2px; }
.strip-scanner-title { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.strip-scanner-title .dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; }
.strip-scanner-values { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; width: 100%; min-width: 0; }
.strip-scanner-values b { min-width: 0; font-size: 11px; text-overflow: ellipsis; }
.strip-scanner-values small { color: var(--t3); font-family: var(--mono); font-size: 8px; white-space: nowrap; }
.strip-scanner-line { width: 100%; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.strip-scanner-line.active { background: linear-gradient(90deg, rgba(63,207,142,.18), var(--green), rgba(63,207,142,.18)); background-size: 180% 100%; animation: scannerSweep 1.8s ease-in-out infinite; }
.strip-scanner-line.stale { background: var(--red); opacity: .75; }
@keyframes scannerSweep { 0%,100% { background-position: 100% 0; opacity: .55; } 50% { background-position: 0 0; opacity: 1; } }

/* content */
.content { padding: 4px 26px 40px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 18px; padding: 17px 18px;
  box-shadow: var(--glass-shadow); backdrop-filter: blur(20px) saturate(140%); }
.card-lbl { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: .6px; }
.kpi { font-family: var(--mono); font-size: 28px; font-weight: 700; margin: 8px 0 4px; }
.kpi-sub { font-size: 12px; color: var(--t2); display: flex; gap: 8px; align-items: center; }
.section-h { display: flex; align-items: center; justify-content: space-between; margin: 22px 2px 12px; }
.section-h h2 { font-size: 15px; margin: 0; font-weight: 650; }
.wallets-head-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.portfolio-replay-kpi { display: inline-flex; align-items: center; gap: 6px; height: 27px; white-space: nowrap; }
.portfolio-replay-kpi span { color: var(--t3); font-size: 12px; }
.portfolio-replay-kpi b { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.portfolio-replay-kpi i { color: var(--t3); font-family: var(--mono); font-size: 11px; font-style: normal; }
.muted { color: var(--t3); font-size: 12px; }
.wallet-alert { padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; color: var(--amber);
  background: rgba(255,178,122,.08); border: 1px solid rgba(255,178,122,.2); font-size: 12px; }

/* overview */
.overview-alert { display: grid; grid-template-columns: 1.5fr .9fr .9fr 1fr; gap: 8px; margin-bottom: 14px;
  padding: 9px; border-radius: 16px; background: rgba(255,255,255,.026); border: 1px solid var(--glass-border); }
.overview-alert > div { min-width: 0; padding: 8px 10px; border-radius: 11px; background: rgba(255,255,255,.028); }
.overview-alert span { display: block; margin-bottom: 4px; color: var(--t3); font-size: 10px; text-transform: uppercase; letter-spacing: .45px; }
.overview-alert b { display: block; font-family: var(--mono); color: var(--t1); font-size: 13px; line-height: 1.28; }
.overview-kpis .card { min-height: 111px; }
.overview-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr;
  gap: 14px; margin-top: 14px; align-items: stretch; }
.overview-panels > .card { min-width: 0; height: 100%; }
.overview-panel-title { margin: 0; color: var(--t1); font-size: 15px; font-weight: 650; line-height: 1.35; }
.contrib-card { display: flex; flex-direction: column; min-width: 0; }
.contrib-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.contrib-total { text-align: right; }
.contrib-total span { display: block; margin-bottom: 4px; color: var(--t3); font-size: 10px; text-transform: uppercase; letter-spacing: .45px; }
.contrib-total b { font-family: var(--mono); font-size: 18px; }
.contrib-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.contrib-lane { min-width: 0; }
.contrib-lane-title { display: flex; align-items: center; gap: 7px; color: var(--t2); font-size: 12px; font-weight: 650; margin-bottom: 7px; }
.contrib-lane-title .dot { width: 7px; height: 7px; border-radius: 50%; }
.contrib-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 7px 0; border-top: 1px solid rgba(255,255,255,.04); }
.contrib-row:first-of-type { border-top: none; }
.contrib-row span { color: var(--t3); font-family: var(--mono); font-size: 11px; }
.contrib-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.contrib-row strong { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.contrib-row em { grid-column: 2 / 4; color: var(--t3); font-style: normal; font-size: 11px; }
.contrib-empty { padding: 12px 0; color: var(--t4); font-size: 12px; }
.recent-copies-card { display: flex; min-width: 0; flex-direction: column; }
.recent-copies-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.recent-copies-head > span { color: var(--t3); font-family: var(--mono); font-size: 10px; }
.recent-copies-table { width: 100%; background: transparent; }
.recent-copies-table table { table-layout: fixed; }
.recent-copies-table th:nth-child(1) { width: 19%; }
.recent-copies-table th:nth-child(2) { width: 13%; }
.recent-copies-table th:nth-child(3) { width: 20%; }
.recent-copies-table th:nth-child(4) { width: 22%; }
.recent-copies-table th:nth-child(5) { width: 26%; }
.recent-copies-table td, .recent-copies-table th { padding-left: 5px; padding-right: 5px; white-space: nowrap; }
.recent-copies-table th { font-size: 10px; }
.recent-copies-table td { font-size: 11px; }

/* equity chart */
.chart-card { margin-top: 14px; }
.range-tabs { display: flex; gap: 4px; }
.range-tabs button { background: transparent; border: 1px solid transparent; color: var(--t3); font-size: 12px;
  padding: 4px 11px; border-radius: 9px; cursor: pointer; font-family: var(--mono); }
.range-tabs button.on { background: rgba(255,255,255,.07); color: var(--t1); border-color: var(--glass-border); }
.wallets-head-actions .range-tabs button { height: 27px; }

/* bars */
.bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 12px; }
.bar-row .bl { width: 96px; color: var(--t2); }
.bar-track { flex: 1; height: 8px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; }
.bar-row .bv { width: 56px; text-align: right; font-family: var(--mono); color: var(--t2); }

/* tables */
.tbl-wrap { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden;
  backdrop-filter: blur(20px); }
/* filter dropdowns (history list etc.) */
.hfilters { display: flex; gap: 8px; }
.fdrop { height: 32px; padding: 0 30px 0 12px; border-radius: 9px; font-size: 12.5px; cursor: pointer;
  color: var(--t1); background: var(--glass-2); border: 1px solid var(--glass-border); outline: none;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7A82' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; }
.fdrop:hover { border-color: var(--accent); color: var(--t1); }
.fdrop option { background: #16161a; color: var(--t1); }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th { text-align: left; padding: 11px 14px; color: var(--t3); font-weight: 600; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--glass-border); }
tbody td { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.04); font-family: var(--mono); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255,255,255,.03); }
th.num, td.num { text-align: right; }   /* numeric headers must right-align to line up with their values */
th.sortable { cursor: pointer; user-select: none; transition: color .12s; }
th.sortable:hover { color: var(--t1); }
.sort-ind { font-size: 9px; opacity: .45; margin-left: 2px; }
th.sortable:hover .sort-ind { opacity: .85; }
.sort-ind.active { opacity: 1; color: var(--accent); }
.mark-price-head { text-align: center; }
.mark-price-cell { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 100%; white-space: nowrap; }
.price-delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono);
  font-size: 10.5px; font-weight: 700; line-height: 1; }
.price-delta.flat { color: var(--t4); font-weight: 500; }
.price-delta i { display: inline-block; width: 0; height: 0; }
.price-delta i.rise { border-right: 4px solid transparent; border-bottom: 6px solid currentColor; border-left: 4px solid transparent; }
.price-delta i.fall { border-top: 6px solid currentColor; border-right: 4px solid transparent; border-left: 4px solid transparent; }
.addr { color: var(--t2); font-size: 11.5px; }
.addr-with-new { display: inline-flex; align-items: flex-start; gap: 5px; white-space: nowrap; }
.addr-copy-btn { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 1px 0; margin: -1px 0;
  border: 0; border-bottom: 1px dashed transparent; background: transparent; color: inherit;
  font: inherit; line-height: inherit; cursor: pointer; transition: color .15s, border-color .15s; }
.addr-copy-btn:hover { color: var(--green-l); border-bottom-color: currentColor; }
.addr-copy-btn:focus-visible { color: var(--green-l); outline: 2px solid rgba(63,207,142,.4);
  outline-offset: 3px; border-radius: 2px; }
.addr-copy-btn.copied { color: var(--green-l); }
.addr-copy-btn.failed { color: var(--red-l); }
.addr-copy-label.hidden { visibility: hidden; }
.addr-copy-icon { display: inline-flex; width: 14px; height: 14px; color: var(--t3); opacity: .72;
  transition: color .15s, opacity .15s, transform .15s; }
.addr-copy-icon svg { width: 100%; height: 100%; }
.addr-copy-btn:hover .addr-copy-icon, .addr-copy-btn:focus-visible .addr-copy-icon {
  color: var(--green-l); opacity: 1; transform: translateY(-1px); }
.addr-copy-icon.hidden { visibility: hidden; }
.addr-copy-feedback { position: absolute; inset: 0; display: inline-flex; align-items: center;
  justify-content: flex-start; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.new-wallet-badge { position: relative; top: -5px; display: inline-flex; align-items: center; height: 14px;
  padding: 0 5px; border-radius: 999px; border: 1px solid rgba(63,207,142,.24);
  background: rgba(63,207,142,.09); color: var(--green-l); font-family: var(--mono);
  font-size: 8.5px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 1px rgba(0,0,0,.16); }
.rankbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px;
  border-radius: 6px; background: rgba(255,255,255,.06); color: var(--t2); font-size: 11px; padding: 0 6px; }
.wallet-rank-cell { display: inline-flex; align-items: center; gap: 5px; min-width: 54px; }
.drop-record-table { min-width: 720px; }
.drop-record-table tbody tr { cursor: default; }
.drop-record-time { color: var(--t2); font-size: 12px; white-space: nowrap; }
.drop-record-reason { color: var(--t2); font-size: 12px; }
.drop-record-count { margin-top: 3px; font-size: 11px; }
.row-off { opacity: .5; }

/* sparkline */
.spark { display: inline-block; vertical-align: middle; }

/* toggle */
.toggle { width: 38px; height: 22px; border-radius: 12px; background: rgba(255,255,255,.12); position: relative; cursor: pointer; transition: background .18s; }
.toggle.on { background: var(--green); }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .18s; }
.toggle.on .knob { left: 18px; }

/* drawer */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 30; animation: fade .22s; }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; z-index: 31; padding: 24px;
  background: rgba(18,18,22,.92); border-left: 1px solid var(--glass-border); backdrop-filter: blur(24px);
  overflow-y: auto; animation: slide .26s; }
@keyframes slide { from { transform: translateX(30px); opacity: .4; } }
.drawer h3 { margin: 0 0 4px; font-size: 16px; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.drawer-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.06); color: var(--t2); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; flex: 0 0 auto; transition: background .15s, color .15s; }
.drawer-close:hover { background: rgba(255,255,255,.1); color: var(--t1); }
.drawer-close svg { width: 16px; height: 16px; }
.wallet-drawer { width: min(500px, calc(100vw - 48px)); }
.wallet-drawer-head h3 { font-family: var(--mono); font-size: 19px; letter-spacing: -.03em; }
.wallet-liquid-card { border: 1px solid rgba(255,255,255,.075); border-radius: 17px;
  background: rgba(16,17,20,.66); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 34px rgba(0,0,0,.22);
  backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%); }
.wallet-liquid-card h4 { margin: 0; color: var(--t1); font-size: 14px; font-weight: 700; }
.wallet-performance-card { padding: 16px; margin-bottom: 12px; }
.wallet-metric-group { margin-top: 16px; }
.wallet-group-label { margin-bottom: 8px; color: var(--t3); font-size: 11.5px; font-weight: 500; }
.wallet-live-group { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.055); }
.wallet-replay-grid, .wallet-live-grid { display: grid; gap: 8px; }
.wallet-replay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wallet-live-grid { grid-template-columns: 1.45fr .85fr .85fr; }
.wallet-metric-card { min-width: 0; padding: 11px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px;
  background: rgba(8,9,11,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.wallet-metric-card > span { display: block; margin-bottom: 7px; color: var(--t3); font-size: 10.5px; }
.wallet-metric-card > b { display: block; color: var(--t1); font: 650 19px/1.05 var(--mono); letter-spacing: -.035em; }
.wallet-replay-grid .wallet-metric-card > b { font-size: 21px; }
.wallet-metric-card > b.up { color: var(--green-l); }
.wallet-metric-card > b.down { color: var(--red-l); }
.wallet-metric-card em { display: block; margin-top: 7px; color: var(--t3); font: normal 9.5px/1.35 var(--sans); white-space: nowrap; }
.wallet-metric-card em i { font-style: normal; font-family: var(--mono); }
.wallet-history-card { overflow: hidden; }
.wallet-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 15px 11px; }
.wallet-history-head h4 span { color: var(--t2); font-weight: 500; }
.wallet-history-head small { color: var(--t4); font-size: 9.5px; white-space: nowrap; }
.wallet-history-table { overflow-x: auto; }
.wallet-history-table table { min-width: 430px; }
.wallet-history-table thead th { padding: 10px 12px; background: rgba(6,7,9,.18); }
.wallet-history-table tbody td { padding: 10px 12px; }
.wallet-history-row { cursor: pointer; }
.wallet-expand-indicator, .wallet-floating-mark { color: var(--t4); font-size: 9px; }
.wallet-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 11px 13px 10px; border-top: 1px solid rgba(255,255,255,.055); }
.wallet-pagination button { min-height: 32px; border: 0; background: transparent; color: var(--t1); font: 600 11.5px var(--sans); cursor: pointer; }
.wallet-pagination button:first-child { justify-self: start; }
.wallet-pagination button:last-of-type { justify-self: end; }
.wallet-pagination button:disabled { color: var(--t4); cursor: default; }
.wallet-pagination > span { color: var(--t1); font-size: 11.5px; }
.wallet-pagination small { grid-column: 1 / -1; text-align: center; color: var(--t4); font-size: 10px; }

/* modal */
.modal { width: 380px; padding: 22px; border-radius: 18px; background: rgba(20,20,24,.96);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); z-index: 41; animation: fade .2s; }
.modal h3 { margin: 0 0 8px; font-size: 16px; }
.modal p { color: var(--t2); font-size: 13px; line-height: 1.5; }
.modal-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); z-index: 40; animation: fade .2s; }
.modal.wallet-exit-modal { width: min(470px, calc(100vw - 44px)); }
.wallet-exit-address { margin: 0 0 14px; color: var(--t3) !important; font: 11px/1.4 var(--mono) !important; }
.wallet-exit-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.wallet-exit-option { min-width: 0; min-height: 92px; display: grid; grid-template-columns: 15px minmax(0,1fr);
  align-items: start; gap: 9px; padding: 12px; border: 1px solid rgba(255,255,255,.075); border-radius: 11px;
  background: rgba(255,255,255,.025); cursor: pointer; transition: border-color .15s, background .15s; }
.wallet-exit-option:hover { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.04); }
.wallet-exit-option.on { border-color: rgba(var(--accent-rgb),.38); background: rgba(var(--accent-rgb),.075); }
.wallet-exit-option.danger.on { border-color: rgba(255,92,92,.34); background: rgba(255,92,92,.07); }
.wallet-exit-option input { width: 14px; height: 14px; margin: 2px 0 0; accent-color: var(--accent); }
.wallet-exit-option.danger input { accent-color: var(--red-l); }
.wallet-exit-option span { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wallet-exit-option b { color: var(--t1); font-size: 12.5px; font-weight: 650; }
.wallet-exit-option small { color: var(--t3); font-size: 10.5px; line-height: 1.5; }
.wallet-blacklist-reason-field { margin-top: 10px; padding: 11px 12px; border: 1px solid rgba(255,92,92,.16);
  border-radius: 11px; background: rgba(255,92,92,.035); }
.wallet-blacklist-reason-field > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.wallet-blacklist-reason-field label { color: var(--t2); font-size: 11.5px; font-weight: 650; }
.wallet-blacklist-reason-field > div span { color: var(--t4); font: 10px/1 var(--mono); }
.wallet-blacklist-reason-field input { width: 100%; height: 35px; padding: 0 10px; border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px; outline: 0; background: rgba(0,0,0,.28); color: var(--t1); font: 12px var(--sans); }
.wallet-blacklist-reason-field input:focus { border-color: rgba(255,92,92,.42); box-shadow: 0 0 0 3px rgba(255,92,92,.07); }
.wallet-blacklist-reason-field input:disabled { opacity: .55; }
.wallet-blacklist-reason-field > small { display: block; margin-top: 7px; color: var(--t4); font-size: 9.5px; line-height: 1.45; }
.wallet-exit-error { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,92,92,.08);
  color: var(--red-l); font-size: 11px; }
.wallet-exit-cancel-temporary { margin-right: auto; color: var(--t2); }

.empty { text-align: center; color: var(--t3); padding: 40px; font-size: 13px; }
.loading { color: var(--t3); padding: 30px; font-size: 13px; }

/* ---------- discovery ---------- */
.discovery-page { padding-top: 8px; }
.discovery-glass { border: 1px solid rgba(255,255,255,.075); background: rgba(20,20,23,.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 12px 34px rgba(0,0,0,.24);
  backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%); }
.scan-command { min-height: 160px; display: grid; grid-template-columns: minmax(250px,.95fr) minmax(230px,.85fr) minmax(440px,2fr);
  align-items: stretch; overflow: hidden; border-radius: 19px; }
.scan-command-state, .scan-command-stage, .scan-command-progress { min-width: 0; padding: 24px 28px; }
.scan-command-state { display: flex; align-items: center; gap: 20px; }
.scan-command-stage, .scan-command-progress { border-left: 1px solid rgba(255,255,255,.075); }
.scan-command-glyph { width: 60px; height: 60px; flex: 0 0 60px; display: grid; place-items: center;
  color: var(--accent); border-radius: 50%; background: rgba(var(--accent-rgb),.055);
  border: 1px solid rgba(var(--accent-rgb),.23); box-shadow: inset 0 0 20px rgba(var(--accent-rgb),.04); }
.scan-command-glyph svg { width: 25px; height: 25px; }
.scan-command-copy, .scan-command-stage { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.scan-command-copy > span, .scan-command-stage > span, .scan-command-progress-head span { color: var(--t3); font-size: 10.5px; }
.scan-command-copy > strong, .scan-command-stage > strong { display: flex; align-items: center; gap: 9px; margin-top: 7px;
  color: var(--accent); font-size: 16px; font-weight: 700; white-space: nowrap; }
.scan-live-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 10px currentColor; animation: pulse 1.4s infinite; }
.scan-command-copy > small, .scan-command-stage > small { margin-top: 22px; color: var(--t3); font-size: 10px; }
.scan-command-copy > b, .scan-command-stage > b { margin-top: 6px; color: var(--t1); font-size: 12px; font-weight: 500; }
.scan-command-stage > b { color: var(--green-l); }
.scan-command-stage > b.scan-heartbeat-stale { color: var(--red-l); }
.scan-command-progress { display: flex; flex-direction: column; justify-content: center; }
.scan-source-control { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.scan-source-copy { min-width: 0; display: grid; gap: 4px; }
.scan-source-copy > span { color: var(--t3); font-size: 10px; }
.scan-source-copy small { color: var(--t4); font-size: 10px; white-space: nowrap; }
.scan-source-copy b { color: var(--t1); font: 600 10px var(--mono); }
.scan-source-segment { flex: 0 0 auto; display: inline-flex; padding: 3px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; background: rgba(0,0,0,.2); }
.scan-source-segment button { height: 25px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent;
  color: var(--t3); font: 600 9.5px var(--sans); cursor: pointer; }
.scan-source-segment button.on { background: rgba(var(--accent-rgb),.16); color: var(--accent-l); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.18); }
.scan-source-segment button:disabled { cursor: default; opacity: .42; }
.scan-source-segment button.on:disabled { opacity: .72; }
.scan-source-hint, .scan-source-fallback, .scan-source-error { margin: -5px 0 9px; font-size: 9.5px; line-height: 1.35; }
.scan-source-hint { color: var(--t4); }
.scan-source-hint button { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
.scan-source-fallback { color: var(--amber); }
.scan-source-error { color: var(--red-l); }
.scan-command-progress-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.scan-command-progress-head > div { min-width: 0; }
.scan-command-progress-head strong { display: block; margin-top: 7px; color: var(--t1); font-size: 16px; font-weight: 500; }
.scan-command-progress-head strong em { color: var(--accent); font-size: 22px; font-style: normal; font-weight: 750; }
.scan-command-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.scan-schedule-link { position: relative; padding: 4px 0; border: 0; background: transparent; color: var(--t3);
  font: 560 10.5px/1.2 var(--sans); white-space: nowrap; cursor: pointer;
  transition: color .15s ease; }
.scan-schedule-link::after { content: ""; position: absolute; right: 0; bottom: 1px; left: 0; height: 1px;
  background: currentColor; opacity: .32; transition: opacity .15s ease; }
.scan-schedule-link:hover { color: var(--accent-l); }
.scan-schedule-link:hover::after { opacity: .7; }
.scan-schedule-link:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.65); outline-offset: 4px; border-radius: 2px; }
.scan-command-action { flex: 0 0 auto; min-width: 148px; justify-content: center; }
.scan-progress-track { position: relative; width: 100%; height: 3px; overflow: visible; border-radius: 99px;
  background: rgba(255,255,255,.11); }
.scan-progress-track > span { position: absolute; inset: 0 auto 0 0; min-width: 0; border-radius: inherit;
  background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),.26); transition: width .4s ease; }
.scan-progress-stages { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: 12px; color: var(--t4); font-size: 9px; }
.scan-progress-stages span { text-align: center; white-space: nowrap; }
.scan-progress-stages span:first-child { text-align: left; }
.scan-progress-stages span:last-child { text-align: right; }
.scan-progress-stages span.active { color: var(--t2); }
.discovery-section { margin-top: 22px; }
.discovery-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 11px; }
.discovery-section-head h2 { margin: 0; color: var(--t1); font-size: 15px; font-weight: 650; }
.discovery-section-head span { color: var(--t4); font-family: var(--mono); font-size: 9.5px; }
.funnel-shell { overflow: hidden; padding: 24px 28px; border-radius: 19px; }
.funnel { display: flex; align-items: center; }
.funnel-complete { gap: 0; overflow-x: auto; scrollbar-width: none; }
.funnel-complete::-webkit-scrollbar { display: none; }
.funnel-stage { flex: 1 1 0; min-width: 116px; padding: 10px 12px; background: transparent; border: 0;
  box-shadow: none; text-align: left; }
.funnel-stage-head { display: flex; align-items: center; justify-content: space-between; min-height: 9px; margin-bottom: 12px; }
.funnel-stage-index { font: 600 9px/1 var(--mono); letter-spacing: .12em; color: var(--t4); }
.funnel-stage .fn { color: var(--t1); font: 720 25px/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.funnel-stage .fl { margin-top: 10px; color: var(--t2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.funnel-stage .fd { margin-top: 5px; color: var(--t4); font-size: 9.5px; letter-spacing: .025em; }
.funnel-stage.is-final { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.funnel-stage.is-final .fn { color: var(--accent); text-shadow: none; }
.funnel-connector { flex: 0 0 clamp(74px,7vw,120px); min-width: 74px; text-align: center; }
.funnel-connector-line { display: flex; align-items: center; width: 100%; color: var(--t4); }
.funnel-connector-line::before { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.funnel-connector-line svg { width: 15px; height: 15px; margin-left: -2px; }
.funnel-connector strong { display: block; margin-top: 7px; color: var(--amber); font: 650 10px/1 var(--mono); }
.funnel-connector small { display: block; margin-top: 5px; color: var(--t4); font: 9px/1 var(--mono); white-space: nowrap; }
.funnel-consistency-note { margin-top: 14px; padding-top: 10px; color: var(--amber); border-top: 1px solid rgba(255,255,255,.055);
  font-size: 10px; }
.scan-history-wrap { overflow-x: auto; border-radius: 17px; }
.scan-history-table { min-width: 820px; table-layout: auto; }
.scan-history-table thead th { background: rgba(255,255,255,.012); }
.scan-history-table tbody tr { transition: background .15s ease; }
.scan-history-table tbody tr.scan-run-failed { background: rgba(255,92,92,.018); }
.scan-history-table .scan-run-state { width: 42px; padding-left: 18px; padding-right: 4px; text-align: center; }
.scan-history-table .scan-run-state > span { display: inline-flex; color: var(--accent); }
.scan-history-table .scan-run-failed .scan-run-state > span { color: var(--red-l); }
.scan-history-table .scan-run-state svg { width: 16px; height: 16px; }
.scan-run-kind { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; font-family: var(--sans);
  font-size: 10.5px; font-weight: 650; white-space: nowrap; }
.scan-run-kind.is-light { color: var(--green-l); background: rgba(63,207,142,.09); border: 1px solid rgba(63,207,142,.09); }
.scan-run-kind.is-full { color: var(--blue-l); background: rgba(94,155,255,.09); border: 1px solid rgba(94,155,255,.09); }
/* ---------- scan mask ---------- */
.mask { position: fixed; inset: 0; z-index: 60; background: rgba(8,8,10,.86); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; animation: fade .3s; }
.radar { width: 150px; height: 150px; border-radius: 50%; position: relative; margin-bottom: 24px;
  background: radial-gradient(circle, rgba(var(--accent-rgb),.10), transparent 70%); border: 1px solid rgba(var(--accent-rgb),.25); }
.radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--accent-rgb),.5), transparent 35%); animation: spin 1.5s linear infinite; }
.radar::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--accent); }
.mask h2 { font-size: 20px; margin: 0 0 6px; }
.mask .sub { color: var(--t2); font-size: 13px; margin-bottom: 20px; font-family: var(--mono); }
.mask-prog { width: 420px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 8px; }
.mask-prog .pf { height: 100%; background: var(--accent-grad); transition: width .4s; }
.mask-meta { display: flex; gap: 22px; font-family: var(--mono); font-size: 12px; color: var(--t2); margin-bottom: 22px; }
.stage-list { display: flex; flex-direction: column; gap: 8px; width: 320px; }
.stage-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t3); }
.stage-item.done { color: var(--green-l); } .stage-item.active { color: var(--t1); }
.stage-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.stage-item.active .stage-dot { border-color: var(--accent); color: var(--accent); }
.mask-stop-zone { width: 360px; margin-top: 22px; text-align: center; }
.mask-stop-confirm { padding: 12px; border-radius: 13px; border: 1px solid rgba(255,92,92,.28);
  background: rgba(255,92,92,.075); }
.mask-stop-confirm p { margin: 0 0 10px; color: var(--t2); font-size: 12px; line-height: 1.45; }
.mask-stop-confirm > div { display: flex; justify-content: center; gap: 8px; }
.mask-stop-confirm .btn { justify-content: center; }
.mask-stop-error { margin-top: 8px; color: var(--red-l); font-size: 12px; }
.mask-lock { margin-top: 12px; font-size: 11px; color: var(--t4); letter-spacing: .5px; }
.mask-source { margin-top: 7px; color: var(--t3); font: 10px var(--mono); }
.mask-source.fallback { color: var(--amber); }

/* ---------- settings ---------- */
/* Settings navigation is one compact glass toolbar instead of detached folder tabs. */
.settings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px;
  padding: 4px; border: 1px solid var(--glass-border); border-radius: 13px; background: rgba(22,22,26,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045); backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%); }
.tabs { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tab { appearance: none; padding: 7px 14px; font-family: var(--sans); font-size: 12.5px; cursor: pointer;
  color: var(--t2); font-weight: 550; background: transparent; border: 1px solid transparent; border-radius: 10px;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.tab:hover { color: var(--t1); background: rgba(255,255,255,.045); }
.tab:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.65); outline-offset: 2px; }
.tab.on { color: var(--accent-l); border-color: rgba(var(--accent-rgb),.22);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.16), rgba(var(--accent2-rgb),.08));
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 6px 18px rgba(0,0,0,.16); font-weight: 650; }
.settings-reset { flex: 0 0 auto; padding: 6px 11px; border-radius: 9px; color: var(--t2); font-size: 11.5px; }
.settings-surface { padding: 14px; border: 1px solid var(--glass-border); border-radius: 15px;
  background: rgba(18,18,22,.46); box-shadow: var(--glass-shadow); backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%); }
.settings-surface.is-locked { pointer-events: none; user-select: none; opacity: .48; filter: saturate(.7); }
.settings-process-lock { min-height: 34px; margin-bottom: 7px; padding: 7px 10px; display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(231,197,111,.18); border-radius: 10px; background: rgba(231,197,111,.055);
  color: var(--amber); font-size: 11px; }
.settings-process-lock .dot { width: 6px; height: 6px; flex: 0 0 auto; background: var(--amber); box-shadow: 0 0 8px rgba(231,197,111,.44); }
.settings-section + .settings-section { margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.settings-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 2px 8px; }
.settings-section-head > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.settings-section-head b { color: var(--t1); font-size: 13.5px; font-weight: 650; }
.settings-section-head span { color: var(--t3); font-size: 11.5px; font-weight: 400; }
.settings-section-head-row { align-items: flex-end; }
.settings-param-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.settings-param-grid > div { min-width: 0; }
.settings-param-grid > div > .prow { height: 100%; min-height: 88px; display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 5px 9px; align-items: start;
  padding: 10px 11px; border: 1px solid rgba(255,255,255,.065); border-radius: 11px;
  background: rgba(255,255,255,.022); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.settings-param-grid > div > .prow:hover { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
.settings-param-grid > div > .prow .lvl-dot { margin-top: 4px; }
.settings-param-grid > div > .prow .pn { width: auto; min-width: 0; }
.settings-param-grid > div > .prow .pctl { grid-column: 3; grid-row: 1; align-self: start; }
.settings-param-grid > div > .prow .pd { grid-column: 2 / 4; line-height: 1.42; }
.settings-param-grid > div > .prow.dirty { border-color: rgba(var(--accent-rgb),.28); background: rgba(var(--accent-rgb),.065); }
.settings-wide-card { margin-top: 0; border: 1px solid rgba(255,255,255,.065); border-radius: 11px;
  background: rgba(255,255,255,.022); overflow: hidden; }
.settings-wide-card .coin-blacklist-row { min-height: 48px; border: none; padding: 7px 10px; align-items: center; gap: 10px; }
.settings-wide-card .coin-blacklist-row .pn { width: 150px; }
.settings-wide-card .coin-blacklist-row .pd { max-width: 480px; line-height: 1.4; }
.settings-wide-card .coin-blacklist-ctl { flex: 1 1 660px; min-width: min(620px, 48vw); }
.wallet-blacklist-block { border-top: 1px solid rgba(255,255,255,.055); }
.wallet-blacklist-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 8px 10px; }
.wallet-blacklist-head > div { min-width: 0; display: flex; align-items: baseline; gap: 14px; }
.wallet-blacklist-head > div b { flex: 0 0 auto; color: var(--t1); font-size: 13.5px; font-weight: 600; }
.wallet-blacklist-head > div span { min-width: 0; color: var(--t3); font-size: 11.5px; line-height: 1.4; }
.wallet-blacklist-list { border-top: 1px solid rgba(255,255,255,.04); }
.wallet-blacklist-item { min-height: 42px; display: grid; grid-template-columns: minmax(340px,1.4fr) 142px minmax(150px,1fr) 24px;
  align-items: center; gap: 12px; padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.04); }
.wallet-blacklist-item:last-child { border-bottom: 0; }
.wallet-blacklist-address { min-width: 0; padding: 0; border: 0; outline: 0; overflow: hidden; text-overflow: ellipsis;
  background: transparent; color: var(--t1); font-size: 11px; text-align: left; white-space: nowrap; cursor: copy; }
.wallet-blacklist-address:hover { color: var(--accent-l); }
.wallet-blacklist-address:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.58); outline-offset: 3px; border-radius: 3px; }
.wallet-blacklist-time { color: var(--t4); font-size: 9.5px; white-space: nowrap; }
.wallet-blacklist-reason { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--t2);
  font-size: 11.5px; white-space: nowrap; }
.wallet-blacklist-remove { width: 22px; height: 22px; margin: 0; justify-self: end; color: var(--t3); opacity: .78; }
.wallet-blacklist-remove b { font: 750 19px/1 var(--sans); }
.wallet-blacklist-error { margin: 0 10px 8px; padding: 7px 9px; border-radius: 8px;
  background: rgba(255,92,92,.08); color: var(--red-l); font-size: 11px; }
.wallet-blacklist-empty { min-height: 58px; display: flex; align-items: center; justify-content: center;
  padding: 14px; color: var(--t4); font-size: 11.5px; }
.wallet-blacklist-empty.loading { color: var(--t3); }
.wallet-blacklist-load-error { gap: 10px; color: var(--red-l); }
.wallet-blacklist-load-error button { padding: 0; border: 0; background: transparent; color: var(--accent-l);
  font: 600 10.5px var(--sans); cursor: pointer; }
.wallet-blacklist-pages { min-height: 42px; display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 6px 10px; border-top: 1px solid rgba(255,255,255,.04); }
.wallet-blacklist-pages .btn { min-height: 28px; padding: 4px 9px; border-radius: 8px; font-size: 10.5px; }
.wallet-blacklist-pages > span { font-size: 10px; }
.settings-margin-card { min-height: 52px; margin-bottom: 8px; padding: 8px 10px; display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  border: 1px solid rgba(var(--accent-rgb),.12); border-radius: 11px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.055), rgba(255,255,255,.015));
  transition: border-color .15s, background .15s; }
.settings-margin-card.dirty { border-color: rgba(var(--accent-rgb),.32); background: rgba(var(--accent-rgb),.07); }
.settings-margin-card.invalid { border-color: rgba(255,92,92,.36); background: rgba(255,92,92,.07); }
.settings-margin-copy { min-width: 0; display: flex; align-items: baseline; gap: 14px; }
.settings-margin-copy b { flex: 0 0 auto; color: var(--t1); font-size: 13px; font-weight: 650; }
.settings-margin-copy span { min-width: 0; color: var(--t3); font-size: 11.5px; line-height: 1.4; }
.settings-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 360px));
  justify-content: start; gap: 7px; }
.settings-tier-card { min-width: 0; padding: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px;
  background: rgba(255,255,255,.022); box-shadow: inset 0 1px rgba(255,255,255,.025);
  transition: border-color .15s, background .15s; }
.settings-tier-card:hover { border-color: rgba(255,255,255,.11); background: rgba(255,255,255,.03); }
.settings-tier-head { min-width: 0; margin-bottom: 8px; }
.settings-tier-copy { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr);
  align-items: center; gap: 4px 8px; }
.settings-tier-subtitle { min-width: 0; color: var(--t3); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-tier-exposure { grid-column: 1 / -1; min-width: 0; color: var(--t4); font-size: 9.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-tier-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.settings-tier-control { min-width: 0; }
.settings-tier-control > label { display: block; margin-bottom: 5px; color: var(--t4); font-size: 9.5px; font-weight: 600;
  letter-spacing: .04em; white-space: nowrap; }
.settings-direct-input { width: 100%; min-width: 0; height: 32px; display: flex; align-items: center;
  border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(0,0,0,.25);
  transition: border-color .15s, background .15s, box-shadow .15s; overflow: hidden; }
.settings-direct-input:hover { border-color: rgba(255,255,255,.15); background: rgba(0,0,0,.32); }
.settings-direct-input:focus-within { border-color: rgba(var(--accent-rgb),.52); background: rgba(0,0,0,.36);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.08); }
.settings-direct-input.dirty { border-color: rgba(var(--accent-rgb),.34); background: rgba(var(--accent-rgb),.055); }
.settings-direct-input.invalid { border-color: rgba(255,92,92,.48); background: rgba(255,92,92,.065); }
.settings-direct-input input { min-width: 0; width: 100%; height: 100%; padding: 0 4px 0 9px; appearance: textfield;
  border: 0; outline: 0; background: transparent; color: var(--t1); font: 650 13px/1 var(--mono); text-align: right; }
.settings-direct-input input::-webkit-inner-spin-button,
.settings-direct-input input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.settings-direct-input input:disabled { opacity: .5; }
.settings-direct-input > span { flex: 0 0 auto; min-width: 20px; padding-right: 8px; color: var(--t3);
  font: 10.5px/1 var(--mono); text-align: left; }
.settings-margin-card > .settings-direct-input { width: 86px; }
.settings-strategy-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.settings-strategy-card { min-width: 0; }
.settings-strategy-card.open { grid-column: auto; }
.settings-strategy-card > .expand-head { min-height: 48px; margin: 0; padding: 7px 10px; }
.settings-strategy-card.open > .expand-head { min-height: 48px; }
.devmode { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); margin: 0 0 6px auto; }

.prow { display: flex; align-items: center; gap: 14px; padding: 7px 16px; border-bottom: 1px solid rgba(255,255,255,.04); }
.prow:last-child { border-bottom: none; }
.prow.dirty { background: rgba(var(--accent-rgb),.07); }
.lvl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.24); }
.prow .pn { width: 220px; }
.prow .pn b { font-size: 13.5px; font-weight: 600; }
.prow .pd { flex: 1; font-size: 12px; color: var(--t3); }
.prow .pctl { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.range-row { background: rgba(255,255,255,.018); }
.range-row.invalid { border-color: rgba(255,92,92,.32); background: rgba(255,92,92,.07); }
.range-row .pd { max-width: 680px; }
.range-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 190px; }
.range-ctl > span { color: var(--t4); font-size: 11px; }
.coin-blacklist-row { align-items: center; }
.coin-blacklist-ctl { min-width: min(620px, 48vw); align-items: stretch !important; }
.coin-list-inline { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.coin-list-inline:has(.coin-tags.expanded) { align-items: flex-start; }
.coin-list-meta { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.coin-count { color: var(--t4); font-size: 10.5px; white-space: nowrap; }
.coin-count b { color: var(--t2); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.coin-list-toggle { padding: 0; border: 0; background: transparent; color: var(--accent); font-family: var(--sans);
  font-size: 10.5px; cursor: pointer; }
.coin-list-toggle:hover { color: var(--accent-l); }
.coin-tags { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex: 0 1 auto;
  flex-wrap: nowrap; min-height: 28px; }
.coin-tags.expanded { flex: 1 1 360px; max-height: 96px; overflow-y: auto; align-content: flex-start;
  flex-wrap: wrap; padding: 1px 4px 1px 0; }
.coin-tags.expanded::-webkit-scrollbar { width: 4px; }
.coin-tags.expanded::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(var(--accent-rgb),.24); }
.coin-empty { color: var(--t4); font-size: 12px; padding: 4px 0; }
.coin-tag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px 4px 9px; border-radius: 8px;
  border: 1px solid rgba(255,92,92,.25); background: rgba(255,92,92,.10); color: var(--red-l);
  font-family: var(--mono); font-size: 12px; cursor: pointer; }
.coin-tag b { color: var(--t2); font-size: 13px; line-height: 1; }
.coin-tag:hover { background: rgba(255,92,92,.17); border-color: rgba(255,92,92,.42); }
.coin-tag:disabled { opacity: .55; cursor: default; }
.coin-more { flex: 0 0 auto; height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(var(--accent-rgb),.18);
  background: rgba(var(--accent-rgb),.07); color: var(--accent-l); font: 600 11px/1 var(--mono); cursor: pointer; }
.coin-more:hover { border-color: rgba(var(--accent-rgb),.34); background: rgba(var(--accent-rgb),.12); }
.coin-add { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 5px; }
.coin-add input { width: 150px; height: 28px; padding: 0 8px; border-radius: 8px; background: rgba(0,0,0,.28);
  border: 1px solid var(--glass-border); color: var(--t1); font-family: var(--mono); font-size: 12px; outline: none; text-transform: uppercase; }
.coin-add input:focus { border-color: var(--accent); }
.deploy-row { border-top: 1px solid rgba(255,255,255,.045); border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 10px;
  margin-bottom: 8px; background: rgba(255,255,255,.025); }
.param-errors { margin: 0 0 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,92,92,.32);
  background: rgba(255,92,92,.08); color: var(--red-l); font-size: 12px; line-height: 1.5; }
.param-inline-note { margin: -2px 12px 10px 42px; color: var(--t3); font-size: 11.5px; line-height: 1.55; }
.pinput { width: 64px; height: 30px; padding: 0 9px; border-radius: 8px; background: rgba(0,0,0,.25);
  border: 1px solid var(--glass-border); color: var(--t1); font-family: var(--mono); font-size: 13px; outline: none; text-align: right; }
.pinput:focus { border-color: var(--accent); }
.pinput:disabled { opacity: .5; }
/* inline edit-in-place: looks like text with a faint tint, click → input, blur/Enter commits */
.ev { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 11px; border-radius: 8px;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--t1);
  cursor: text; background: rgba(255,255,255,.035); border: 1px solid transparent;
  transition: background .12s, border-color .12s; white-space: nowrap; }
.ev:hover { background: rgba(255,255,255,.08); border-color: var(--glass-border); }
.ev-u { font-style: normal; font-size: 11px; color: var(--t3); }
.ev-empty { color: var(--t4); }
.ev-ro { background: none; cursor: default; color: var(--t2); padding-right: 0; }
.ev-input { width: 108px; height: 30px; padding: 0 10px; border-radius: 8px; background: rgba(0,0,0,.32);
  border: 1px solid var(--accent); color: var(--t1); font-family: var(--mono); font-size: 13px;
  outline: none; text-align: right; }
.punit { display: inline-flex; align-items: center; justify-content: flex-start; width: 16px; flex: none;
  font-size: 11px; color: var(--t3); }   /* inline-flex so width applies → every control gets the same 16px slot → 右缘对齐 */
.plock { color: var(--t4); font-size: 12px; }
.peffect { font-size: 11.5px; color: var(--t3); padding: 4px 0 10px 240px; line-height: 1.6; }
.eff-up { color: var(--green-l); } .eff-dn { color: var(--red-l); }

/* follow-line live wallet-count hint */
.score-hint { font-size: 12px; color: var(--t2); padding: 8px 16px 12px 42px;
  background: rgba(var(--accent-rgb), .05); border-bottom: 1px solid rgba(255,255,255,.04); }
.score-hint b { color: var(--t1); font-variant-numeric: tabular-nums; }
/* sub-section heading inside the params list */
.psec-h { display: flex; flex-direction: column; gap: 2px; padding: 16px 4px 8px;
  border-top: 1px solid var(--glass-border); margin-top: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--t1); }
.psec-h span { font-weight: 400; font-size: 11px; color: var(--t3); }
.psec-h-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.psec-title-block { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.psec-switch { flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; padding: 5px 8px 5px 10px;
  border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); }
.psec-switch span { color: var(--t2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.psec-switch.dirty { border-color: rgba(var(--accent-rgb),.45); background: rgba(var(--accent-rgb),.08); }

.apply-bar { position: sticky; bottom: 0; margin: 16px -26px -40px; padding: 14px 26px;
  background: rgba(18,18,22,.95); border-top: 1px solid var(--glass-border); backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: space-between; animation: rise .25s; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.apply-bar .ab-l { font-size: 13px; color: var(--t2); }

@media (min-width: 861px) and (max-width: 1320px) {
  .system-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip-item { min-width: 0; }
  .pos-detail-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-param-grid, .settings-param-grid-scanner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-wide-card .coin-blacklist-row { display: grid; grid-template-columns: 10px 180px minmax(0, 1fr); }
  .settings-wide-card .coin-blacklist-row .pctl { grid-column: 3; min-width: 0; width: 100%; }
  .settings-wide-card .coin-list-inline, .settings-wide-card .coin-tags, .settings-wide-card .coin-add { justify-content: flex-start; }
  .wallet-blacklist-item { grid-template-columns: minmax(300px,1.3fr) 136px minmax(120px,1fr) 24px; }
}

.settings-replay-inline { min-width: 0; min-height: 34px; margin: 9px 2px 0; padding-top: 9px;
  display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.055); }
.settings-replay-action { flex: 0 0 auto; min-width: 0; height: 27px; padding: 0 9px; border-radius: 8px;
  color: var(--accent-l); border-color: rgba(var(--accent-rgb),.2); background: rgba(var(--accent-rgb),.07);
  font-size: 10.5px; font-weight: 650; }
.settings-replay-action:hover:not(:disabled) { border-color: rgba(var(--accent-rgb),.38); background: rgba(var(--accent-rgb),.12); }
.settings-replay-inline-copy { min-width: 0; display: flex; align-items: baseline; gap: 0; overflow: hidden;
  color: var(--t3); font-size: 11px; line-height: 1.4; white-space: nowrap; }
.settings-replay-inline-copy > span { flex: 0 0 auto; }
.settings-replay-inline-copy > span::before { content: "·"; margin: 0 7px; color: var(--t4); }
.settings-replay-inline-copy strong { color: var(--t1); font-family: var(--mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums; }
.settings-replay-inline-copy strong.up { color: var(--green-l); }
.settings-replay-inline-copy strong.down { color: var(--red-l); }
.settings-replay-verdict { flex: 0 0 auto; color: var(--t2); font-size: 11px; font-weight: 700; }
.settings-replay-verdict.passed { color: var(--green-l); }
.settings-replay-verdict.failed, .settings-replay-inline-copy.failed { color: var(--red-l); }
.settings-replay-prompt { overflow: hidden; text-overflow: ellipsis; color: var(--amber); }
.settings-replay-prompt::before { display: none; }

@media (max-width: 860px) {
  html, body { min-height: 100%; }
  body { overflow: hidden; }
  .glow {
    background:
      radial-gradient(560px 420px at 80% -12%, rgba(var(--accent-rgb), 0.15), transparent 62%),
      radial-gradient(520px 440px at -20% 108%, rgba(var(--accent2-rgb), 0.09), transparent 58%);
  }

  .login-shell { height: 100dvh; padding: 18px; }
  .login-card { width: 100%; max-width: 380px; border-radius: 16px; padding: 28px 22px; }
  .shell { display: block; height: 100dvh; overflow: hidden; }
  .side { display: none; }
  .pull-refresh {
    --pull-distance: 0px;
    --pull-progress: 0;
    position: fixed;
    top: calc(8px + env(safe-area-inset-top));
    left: 50%;
    z-index: 24;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 4px 12px 4px 6px;
    border: 1px solid rgba(var(--accent-rgb), .24);
    border-radius: 999px;
    color: var(--accent-l);
    background: rgba(14, 28, 25, .92);
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 9px 24px rgba(0,0,0,.34);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    font: 650 11px/1 var(--sans);
    letter-spacing: .02em;
    opacity: var(--pull-progress);
    pointer-events: none;
    transform: translate(-50%, calc(-48px + var(--pull-distance)));
    transition: opacity .12s ease, transform .12s ease, border-color .12s ease;
  }
  .pull-refresh.armed { border-color: rgba(var(--accent-rgb), .54); color: var(--accent-ink); background: var(--accent-grad); }
  .pull-refresh.refreshing { opacity: 1; transform: translate(-50%, 0); }
  .pull-refresh-glyph {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--accent-ink);
    background: var(--accent-grad);
    box-shadow: inset 0 1px rgba(255,255,255,.22);
  }
  .pull-refresh-glyph svg { width: 13px; height: 13px; transition: transform .18s ease; }
  .pull-refresh.armed .pull-refresh-glyph { color: var(--accent); background: rgba(4, 39, 31, .82); }
  .pull-refresh.armed .pull-refresh-glyph svg { transform: rotate(180deg); }
  .pull-refresh.refreshing .pull-refresh-glyph svg { animation: spin .72s linear infinite; }
  .main {
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .topbar {
    position: sticky;
    top: 0;
    padding: 14px 14px 10px;
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(10,10,11,.97), rgba(10,10,11,.82) 78%, transparent);
  }
  .topbar > div:first-child { min-width: 0; width: 100%; }
  .crumb { font-size: 10px; }
  .title { font-size: 18px; line-height: 1.25; white-space: normal; }
  .topbar-right {
    width: 100%;
    gap: 8px;
    overflow: visible;
    flex-wrap: wrap;
    padding-bottom: 2px;
  }
  .mobile-nav::-webkit-scrollbar,
  .tabs::-webkit-scrollbar { display: none; }
  .topbar-right .pill,
  .topbar-right .btn { flex: 0 0 auto; }
  .execution-health { flex-basis: 168px; width: 168px; height: 36px; }
  .execution-diagnostics { position: fixed; z-index: 24; top: 88px; left: 14px; right: 14px;
    width: auto; max-height: calc(100dvh - 174px); overflow-y: auto; background: rgba(14,14,17,.96); }
  .execution-diagnostics-row { grid-template-columns: 78px minmax(0,1fr); gap: 5px 8px; }
  .execution-diagnostics-row > small { grid-column: 2; text-align: left; white-space: normal; }
  .topbar-right .pill { padding: 5px 10px; }
  .topbar-right .btn:not(.observer-control-btn) { min-width: 128px !important; padding: 8px 12px; }

  .system-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 14px 12px;
  }
  .strip-item { min-width: 0; min-height: 54px; border-radius: 12px; padding: 8px 10px; }
  .strip-item b { font-size: 15px; }

  .content { padding: 2px 14px 24px; }
  .grid4,
  .grid2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .overview-panels,
  .contrib-split { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .overview-panels { grid-auto-rows: auto; }
  .overview-alert { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .overview-alert { margin-bottom: 10px; padding: 8px; }
  .contrib-head { align-items: flex-start; }
  .recent-copies-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card { border-radius: 14px; padding: 14px; }
  .kpi { font-size: 23px; }
  .kpi-sub { flex-wrap: wrap; }
  .section-h { align-items: flex-start; gap: 10px; flex-direction: column; margin: 16px 0 10px; }
  .section-h h2 { line-height: 1.35; }
  .wallets-section-h { width: 100%; }
  .wallets-head-actions { width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; gap: 8px; }
  .portfolio-replay-kpi { width: 100%; height: auto; min-height: 0; padding: 9px 10px; flex-wrap: wrap;
    white-space: normal; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--glass-border); }
  .portfolio-replay-kpi span { flex: 1 0 100%; line-height: 1.35; }
  .portfolio-replay-kpi b { font-size: 15px; }
  .wallets-head-actions .range-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px; overflow: visible; padding-bottom: 0; }
  .wallets-head-actions .range-tabs button { width: 100%; height: 34px; }
  .positions-title-row { width: 100%; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .range-tabs,
  .hfilters {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .range-tabs button { flex: 0 0 auto; }
  .hfilters { flex-wrap: nowrap; }
  .fdrop { flex: 0 0 auto; min-width: 145px; }

  .tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { min-width: 720px; }
  thead th { padding: 10px 12px; }
  tbody td { padding: 10px 12px; }
  .fills-tbl { min-width: 620px; }
  .pos-detail { padding: 12px; }
  .pos-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

  .bar-row { gap: 8px; }
  .bar-row .bl { width: 72px; }
  .bar-row .bv { width: 48px; }
  .discovery-page { padding-top: 4px; }
  .scan-command { grid-template-columns: minmax(0,1fr); border-radius: 15px; }
  .scan-command-state, .scan-command-stage, .scan-command-progress { padding: 18px; }
  .scan-command-stage, .scan-command-progress { border-left: 0; border-top: 1px solid rgba(255,255,255,.065); }
  .scan-command-state { gap: 15px; }
  .scan-command-glyph { width: 50px; height: 50px; flex-basis: 50px; }
  .scan-command-copy > small, .scan-command-stage > small { margin-top: 14px; }
  .scan-source-control { align-items: flex-start; flex-direction: column; }
  .scan-source-segment { width: 100%; }
  .scan-source-segment button { flex: 1; }
  .scan-command-progress-head { flex-direction: column; margin-bottom: 18px; }
  .scan-command-actions { width: 100%; align-items: stretch; flex-direction: column-reverse; gap: 10px; }
  .scan-schedule-link { align-self: center; }
  .scan-command-action { width: 100%; }
  .scan-progress-stages { font-size: 8px; }
  .discovery-section { margin-top: 17px; }
  .funnel { flex-direction: column; align-items: stretch; }
  .funnel-shell { padding: 14px 16px; border-radius: 15px; }
  .funnel-stage { flex: 0 0 auto; width: 100%; min-width: 0; padding: 11px 10px; text-align: center; }
  .funnel-stage-head { max-width: 190px; margin-left: auto; margin-right: auto; }
  .funnel-connector { flex: 0 0 42px; min-width: 0; width: 100%; height: 42px; display: grid;
    grid-template-columns: 1fr auto auto 1fr; grid-template-rows: repeat(2,auto); align-items: center; gap: 2px 8px; }
  .funnel-connector-line { grid-column: 2; grid-row: 1 / 3; width: 26px; transform: rotate(90deg); }
  .funnel-connector-line::before { display: none; }
  .funnel-connector strong { grid-column: 3; grid-row: 1; align-self: end; margin-top: 0; }
  .funnel-connector small { grid-column: 3; grid-row: 2; align-self: start; margin-top: 0; }
  .scan-history-wrap { margin: 0; }
  .tabs {
    overflow-x: auto;
    overflow-y: hidden;
    gap: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .settings-toolbar { align-items: stretch; gap: 5px; margin-bottom: 9px; padding: 4px; }
  .tab { flex: 0 0 auto; padding: 8px 11px; font-size: 11.5px; }
  .settings-reset { padding: 6px 8px; font-size: 0; }
  .settings-reset::before { content: "↺"; font-size: 13px; }
  .settings-surface { padding: 13px; border-radius: 14px; }
  .settings-section + .settings-section { margin-top: 18px; padding-top: 16px; }
  .settings-section-head, .settings-section-head-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .settings-param-grid, .settings-param-grid-scanner { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .prow {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 6px 10px;
    align-items: start;
    padding: 12px;
  }
  .prow .pn { width: auto; min-width: 0; }
  .prow .pd { grid-column: 2; font-size: 11.5px; line-height: 1.45; }
  .prow .pctl { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .settings-param-grid > div > .prow { min-height: 0; grid-template-columns: 10px minmax(0, 1fr) auto;
    grid-template-rows: auto auto; padding: 12px; }
  .settings-param-grid > div > .prow .pctl { grid-column: 3; grid-row: 1; }
  .settings-param-grid > div > .prow .pd { grid-column: 2 / 4; }
  .settings-wide-card .coin-blacklist-row { align-items: start; }
  .settings-wide-card .coin-blacklist-row .pn { width: auto; }
  .settings-wide-card .coin-blacklist-row .pd { max-width: none; }
  .coin-blacklist-ctl { min-width: 0; width: 100%; }
  .coin-list-inline { flex-wrap: wrap; justify-content: flex-start; }
  .coin-list-meta { width: 100%; }
  .coin-tags, .coin-add { justify-content: flex-start; }
  .coin-tags { overflow: hidden; }
  .coin-tags.expanded { flex-basis: 100%; }
  .coin-add input { width: min(180px, 100%); }
  .wallet-blacklist-head { align-items: flex-start; }
  .wallet-blacklist-head > div { align-items: flex-start; flex-direction: column; gap: 3px; }
  .wallet-blacklist-item { grid-template-columns: minmax(0,1fr) 24px; gap: 4px 10px; padding: 9px 10px; }
  .wallet-blacklist-address { grid-column: 1; grid-row: 1; font-size: 10.5px; }
  .wallet-blacklist-remove { grid-column: 2; grid-row: 1 / 3; }
  .wallet-blacklist-time { grid-column: 1; grid-row: 2; }
  .wallet-blacklist-reason { grid-column: 1 / 3; grid-row: 3; margin-top: 3px; white-space: normal; line-height: 1.4; }
  .wallet-blacklist-pages { justify-content: space-between; }
  .range-ctl { grid-column: 2; justify-content: flex-start; min-width: 0; flex-wrap: wrap; }
  .deploy-row { margin: 0 0 8px; }
  .peffect { padding: 4px 12px 10px 32px; }
  .score-hint { padding: 9px 12px 12px 32px; }
  .psec-h,
  .psec-h-row { padding: 14px 4px 8px; flex-direction: column; align-items: flex-start; }
  .psec-switch { align-self: stretch; justify-content: space-between; }
  .settings-margin-card { grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; padding: 10px; }
  .settings-margin-copy { align-items: flex-start; flex-direction: column; gap: 3px; }
  .settings-tier-grid, .settings-strategy-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-replay-inline { align-items: flex-start; }
  .settings-replay-inline-copy { flex-wrap: wrap; overflow: visible; white-space: normal; row-gap: 3px; }
  .settings-strategy-card.open { grid-column: auto; }
  .settings-tier-head { min-height: 0; }
  .settings-tier-subtitle, .settings-tier-exposure { white-space: normal; }
  .expand-head { align-items: flex-start; gap: 7px; flex-wrap: wrap; padding: 11px 10px; }
  .expand-head .muted { flex-basis: 100%; margin-left: 19px !important; }
  .expand-body { padding: 2px 8px 6px; }
  .drawer {
    width: 100%;
    max-width: none;
    padding: 18px 14px calc(96px + env(safe-area-inset-bottom));
    border-left: none;
  }
  .drawer-head {
    position: sticky;
    top: -18px;
    z-index: 2;
    margin: -18px -14px 16px;
    padding: calc(18px + env(safe-area-inset-top)) 14px 12px;
    background: linear-gradient(180deg, rgba(18,18,22,.98), rgba(18,18,22,.92));
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
  }
  .drawer-close { width: 38px; height: 38px; border-radius: 12px; color: var(--t1); }
  .drawer .card { padding: 13px; }
  .wallet-performance-card { padding: 14px; }
  .wallet-metric-group { margin-top: 14px; }
  .wallet-live-grid { grid-template-columns: 1.4fr .82fr .82fr; gap: 6px; }
  .wallet-metric-card { padding: 10px; }
  .wallet-metric-card > span { font-size: 10px; }
  .wallet-metric-card > b { font-size: 17px; }
  .wallet-replay-grid .wallet-metric-card > b { font-size: 20px; }
  .wallet-metric-card em { font-size: 9px; white-space: normal; }
  .wallet-pnl-card em { font-size: 8.2px; white-space: nowrap; }
  .wallet-history-head small { display: none; }
  .wallet-history-table table { min-width: 0; table-layout: fixed; }
  .wallet-history-table th, .wallet-history-table td { padding-left: 5px; padding-right: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wallet-history-table tbody td { font-size: 11px; }
  .wallet-history-table .tint { padding-left: 7px; padding-right: 7px; }
  .wallet-history-table th:nth-child(1), .wallet-history-table td:nth-child(1) { width: 27%; }
  .wallet-history-table th:nth-child(2), .wallet-history-table td:nth-child(2) { width: 14%; }
  .wallet-history-table th:nth-child(3), .wallet-history-table td:nth-child(3) { width: 25%; }
  .wallet-history-table th:nth-child(4), .wallet-history-table td:nth-child(4) { width: 19%; }
  .wallet-history-table th:nth-child(5), .wallet-history-table td:nth-child(5) { width: 15%; }
  .modal {
    width: calc(100vw - 28px);
    max-width: 380px;
    padding: 20px;
    border-radius: 15px;
  }
  .modal.wallet-exit-modal { width: calc(100vw - 28px); max-width: 470px; }
  .wallet-exit-options { grid-template-columns: minmax(0,1fr); }
  .wallet-exit-option { min-height: 0; }
  .wallet-exit-cancel-temporary { margin-right: 0; }
  .modal-row { flex-direction: column-reverse; }
  .modal-row .btn { justify-content: center; }
  .mask { padding: 22px; text-align: center; }
  .mask-prog,
  .stage-list,
  .mask-stop-zone { width: min(100%, 340px); }
  .mask-meta { flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
  .mask-stop-confirm > div { flex-direction: column-reverse; }

  .apply-bar {
    left: 0;
    right: 0;
    margin: 14px -14px -24px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .apply-bar > div:last-child { justify-content: flex-end; }

  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(15, 15, 18, .94);
    border-top: 1px solid var(--glass-border);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    scrollbar-width: none;
  }
  .mobile-nav-item {
    position: relative;
    flex: 0 0 72px;
    height: 54px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    color: var(--t2);
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .mobile-nav-item svg { width: 18px; height: 18px; }
  .mobile-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-nav-item b {
    position: absolute;
    top: 5px;
    right: 9px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 16px;
  }
  .mobile-nav-item.active {
    color: var(--accent-ink);
    background: var(--accent-grad);
    box-shadow: 0 8px 20px rgba(28, 133, 112, .16);
  }
  .mobile-nav-item.active b { background: rgba(0, 44, 36, .14); color: var(--accent-ink); }
  .mobile-logout { color: var(--t3); }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .pull-refresh,
  .pull-refresh-glyph svg { transition: none; }
}

@media (max-width: 430px) {
  .card-lbl { font-size: 10.5px; }
  .mobile-nav-item { flex-basis: 66px; }
}

/* ---------- execution account console ---------- */
.account-tab { color: var(--amber); }
.account-settings { display: grid; gap: 10px; padding-bottom: 18px; }
.account-loading { padding: 42px; color: var(--t3); text-align: center; }
.execution-mode-control { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 30px;
  padding: 0 3px; color: var(--t4); font: 10px var(--mono); white-space: nowrap; }
.execution-mode-control > span { transition: color .18s ease; }
.execution-mode-control > span.active { color: var(--t2); }
.execution-mode-control .live-label { color: #8f6969; }
.execution-mode-control .live-label.active { color: var(--red-l); }
.execution-toggle {
  position: relative; width: 38px; height: 21px; padding: 0; border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; background: rgba(63,207,142,.13); cursor: pointer; transition: .18s ease;
}
.execution-toggle i {
  position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--green-l); box-shadow: 0 1px 5px rgba(0,0,0,.5); transition: transform .18s ease, background .18s ease;
}
.execution-toggle.on { border-color: rgba(255,92,92,.3); background: rgba(255,92,92,.16); }
.execution-toggle.on i { transform: translateX(17px); background: var(--red-l); }
.execution-toggle:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.7); outline-offset: 2px; }
.execution-toggle:disabled { cursor: default; opacity: .45; }
.account-error-banner { padding: 10px 13px; border: 1px solid rgba(255,92,92,.24); border-radius: 10px; background: rgba(255,92,92,.085); color: var(--red-l); font-size: 11px; }
.live-account-card, .quicknode-account-card { padding: 4px 12px; border: 1px solid var(--glass-border);
  border-radius: 12px; background: var(--glass); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.account-kicker { color: var(--t4); font: 650 8px/1 var(--mono); letter-spacing: .16em; }
.account-card-head { width: 100%; display: grid; grid-template-columns: 12px minmax(0,1fr) auto; align-items: center;
  gap: 8px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.account-card-head:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.62); outline-offset: 5px; border-radius: 8px; }
.account-card-caret { color: var(--t3); font: 10px/1 var(--mono); }
.account-card-title { min-width: 0; display: block; }
.account-card-title strong { display: block; margin-top: 2px; font-size: 14px; line-height: 1.15; }
.account-state-chip { padding: 4px 7px; border-radius: 7px; background: rgba(122,122,130,.13); color: var(--t3); font: 650 8.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.account-state-chip.verified, .account-state-chip.passed { color: var(--green-l); background: rgba(63,207,142,.12); }
.account-state-chip.error, .account-state-chip.failed, .account-state-chip.expired, .account-state-chip.revoked, .account-state-chip.fallback { color: var(--red-l); background: rgba(255,92,92,.12); }
.account-state-chip.encrypted { color: var(--amber); background: rgba(255,178,122,.1); }
.live-account-form { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: 10px; }
.live-account-form label { display: grid; gap: 6px; color: var(--t3); font-size: 10.5px; }
.live-account-form input {
  width: 100%; height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px;
  background: rgba(0,0,0,.28); color: var(--t1); outline: none; font: 11px var(--mono);
}
.live-account-form input:focus { border-color: rgba(var(--accent-rgb),.62); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08); }
.live-account-form input:disabled { opacity: .5; }
.account-card-actions { display: flex; justify-content: flex-end; align-items: center; gap: 7px; margin-top: 10px; }
.account-card-actions .btn { min-height: 32px; padding-top: 6px; padding-bottom: 6px; }
.account-inline-message { margin-top: 11px; padding: 8px 10px; border-radius: 8px; font-size: 11px; }
.account-inline-message.ok { color: var(--green-l); background: rgba(63,207,142,.09); }
.account-inline-message.error { color: var(--red-l); background: rgba(255,92,92,.09); }
.account-inline-message.warning { color: var(--amber); background: rgba(255,178,122,.09); }
.quicknode-card-head .account-card-title strong { margin-top: 2px; }
.quicknode-card-status { display: flex; align-items: center; gap: 9px; }
.quicknode-card-status small { color: var(--t4); font: 9px var(--mono); }
.quicknode-endpoint-field { margin-top: 9px; }
.quicknode-endpoint-field label { display: grid; gap: 5px; min-width: 0; color: var(--t3); font-size: 10px; }
.quicknode-endpoint-field input {
  width: 100%; height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px;
  background: rgba(0,0,0,.28); color: var(--t1); outline: none; font: 11px var(--mono);
}
.quicknode-endpoint-field input:focus { border-color: rgba(var(--accent-rgb),.62); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08); }
.quicknode-endpoint-field input:disabled { opacity: .5; cursor: not-allowed; }
.quicknode-endpoint-help { margin-top: 6px; color: var(--t4); font-size: 9.5px; line-height: 1.45; }
@media (max-width: 680px) {
  .live-account-card, .quicknode-account-card { padding: 5px 10px; }
  .quicknode-card-status { align-items: flex-end; flex-direction: column; gap: 5px; }
}