:root{
  --bg:#020305;
  --panel:rgba(5,8,12,.72);
  --panel-solid:#000000;
  --text:#f5f7fb;
  --muted:#91a0b4;
  --border:rgba(255,255,255,.14);
  --accent-a:#19d3ff;
  --accent-b:#a56cff;
  --accent-c:#28f59a;
  --warm:#ffd166;
  --glow:.6;
  --glass:.55;
  --radius:22px;
  --shine:.88;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;color-scheme:dark}

body{
  margin:0;
  min-height:100vh;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent-a) calc(var(--glow) * 32%), transparent), transparent 32%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--accent-b) calc(var(--glow) * 28%), transparent), transparent 34%),
    radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--accent-c) calc(var(--glow) * 18%), transparent), transparent 28%),
    radial-gradient(circle at 100% 50%, color-mix(in srgb, var(--warm) calc(var(--glow) * 12%), transparent), transparent 28%),
    linear-gradient(135deg,#010205,#05070b 45%,#010205);
}

a{color:inherit}

.app-shell{
  max-width:1480px;
  margin:0 auto;
  padding:24px;
}

.panel{
  position:relative;
  border:1px solid color-mix(in srgb, var(--accent-a) 36%, var(--border));
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),var(--panel);
  box-shadow:
    0 0 calc(16px + var(--glow) * 34px) color-mix(in srgb, var(--accent-a) calc(var(--glow) * 26%), transparent),
    0 0 calc(32px + var(--glow) * 68px) color-mix(in srgb, var(--accent-b) calc(var(--glow) * 16%), transparent),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 18px 58px rgba(0,0,0,.52);
  backdrop-filter:blur(calc(8px + var(--glass) * 14px)) saturate(1.18);
  -webkit-backdrop-filter:blur(calc(8px + var(--glass) * 14px)) saturate(1.18);
  padding:20px;
  margin-bottom:18px;
  overflow:hidden;
}

.panel::after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(120deg,rgba(255,255,255,calc(var(--shine) * .26)),rgba(255,255,255,calc(var(--shine) * .07)) 11%,transparent 26%,transparent 76%,rgba(255,255,255,calc(var(--shine) * .06))),
    radial-gradient(ellipse at center,transparent 0%,transparent 64%,color-mix(in srgb,var(--accent-a) 18%,transparent) 100%);
  opacity:var(--shine);
  mix-blend-mode:screen;
}

.panel > *{position:relative;z-index:1}

.top-nav,.hero-grid,.section-head,.actions-inline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:900;
  letter-spacing:-.02em;
}

.brand-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:12px;
  background:linear-gradient(135deg,var(--accent-a),var(--accent-b),var(--accent-c));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 22px color-mix(in srgb,var(--accent-a) 40%,transparent), inset 0 1px 0 rgba(255,255,255,.34);
}

.nav-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.nav-links a,.nav-links button,.status-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 10px;
  color:var(--muted);
  text-decoration:none;
  background:rgba(0,0,0,.35);
}

.hero-grid{margin-top:20px;align-items:center}

h1{
  margin:0;
  font-size:clamp(30px,4vw,56px);
  line-height:1;
  letter-spacing:-.05em;
}

h2{
  margin:0;
  font-size:22px;
  letter-spacing:-.025em;
}

p{line-height:1.55}
.subtitle,.section-head p,.note,.footer{color:var(--muted)}
.subtitle{max-width:900px}

.status-box{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  font-size:12px;
}

.live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent-c);
  box-shadow:0 0 16px var(--accent-c);
}

.summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.summary-card,.mini{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:14px;
  background:#000;
}

.summary-card span,.mini span,.field span{
  display:block;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.summary-card strong{
  display:block;
  margin-top:7px;
  font-size:clamp(24px,3vw,38px);
  letter-spacing:-.04em;
}

.summary-card small{
  display:block;
  margin-top:4px;
  color:var(--muted);
}

.summary-card.small strong{font-size:26px}

.add-form,.theme-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:12px;
  margin-top:14px;
  align-items:end;
}

.field input,.field select{
  width:100%;
  min-height:42px;
  margin-top:6px;
  border-radius:13px;
  border:1px solid color-mix(in srgb,var(--accent-a) 24%,rgba(255,255,255,.16));
  background:#000;
  color:var(--text);
  padding:10px 12px;
  outline:none;
  font-size:14px;
}

.field input:focus,.field select:focus{
  border-color:color-mix(in srgb,var(--accent-c) 70%,#fff);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-a) 18%,transparent),0 0 20px color-mix(in srgb,var(--accent-c) 18%,transparent);
}

select option{
  color:#000 !important;
  background:#fff !important;
}

.field-wide{grid-column:span 1}
.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

button{
  position:relative;
  min-height:42px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent-a) 35%,rgba(255,255,255,.16));
  color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.045) 48%,rgba(0,0,0,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 0 16px color-mix(in srgb,var(--accent-a) 18%,transparent),0 10px 24px rgba(0,0,0,.28);
  padding:9px 13px;
  font-weight:800;
  cursor:pointer;
}

button:hover{transform:translateY(-1px);border-color:var(--accent-c)}
button.danger{border-color:rgba(255,77,109,.38)}
button:disabled{opacity:.55;cursor:not-allowed;transform:none}

.message{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.14);
  background:#000;
  border-radius:14px;
  padding:12px;
  color:var(--muted);
}

.empty-state{text-align:center}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-bottom:18px;
}

.token-card{
  margin:0;
}

.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.token-title{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.03em;
}

.token-sub{
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
  overflow-wrap:anywhere;
}

.badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.badge{
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:6px 8px;
  background:#000;
  color:var(--muted);
  font-size:12px;
}

.price-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:14px;
}

.price{
  font-size:30px;
  font-weight:950;
  letter-spacing:-.045em;
}

.positive{color:var(--accent-c)!important}
.negative{color:#ff4d6d!important}
.warning{color:var(--warm)!important}

.mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.mini strong{
  display:block;
  margin-top:6px;
  font-size:16px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.holding-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
}

.card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.card-actions a,.card-actions button{
  min-height:34px;
  font-size:12px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.budget-row{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:12px;
  align-items:end;
  margin-top:14px;
}

.table-wrap{
  overflow:auto;
  margin-top:14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:#000;
}

table{
  min-width:980px;
  width:100%;
  border-collapse:collapse;
  background:#000;
}

th,td{
  padding:12px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.10);
  font-size:13px;
}

th{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
}

td input{
  width:95px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:#000;
  color:var(--text);
  padding:8px;
}

.charts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.chart-card h2{margin-bottom:12px}

.chart-box{
  height:290px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:#000;
  padding:10px;
}

.chart-box.large{height:390px}
.allocation-chart-box{height:320px;padding:14px}
canvas{width:100%!important;height:100%!important}

.chart-controls .field.compact{
  min-width:180px;
}

.footer{
  text-align:center;
  font-size:12px;
  margin:20px 0 0;
}

.footer a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.24)}

@media (max-width:1100px){
  .summary-grid,.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .add-form,.theme-grid{grid-template-columns:1fr 1fr}
  .charts-grid{grid-template-columns:1fr}
}

@media (max-width:720px){
  .app-shell{padding:14px}
  .panel{padding:16px}
  .summary-grid,.cards-grid,.add-form,.theme-grid,.budget-row,.holding-grid{grid-template-columns:1fr}
  .hero-grid,.section-head,.top-nav{display:block}
  .nav-links,.status-box,.actions-inline{margin-top:12px;justify-content:flex-start}
  .mini-grid{grid-template-columns:1fr}
  .chart-box.large{height:330px}
}


/* === Solid black interiors + solid-color theme glow v2 ===
   User preference:
   - Black interiors for panels, cards, pills, buttons, tables, chart boxes, and form areas.
   - Selected solid theme color glows inside the area and around borders.
   - No color-filled translucent surfaces.
   - No roundness control; radius is fixed at 22px. */

:root{
  --panel:#000000;
  --panel-solid:#000000;
  --border:rgba(255,255,255,.14);
  --radius:22px;
}

/* Page keeps theme atmosphere, but all content surfaces stay black. */
body{
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent-a) calc(var(--glow) * 30%), transparent), transparent 34%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--accent-a) calc(var(--glow) * 24%), transparent), transparent 36%),
    linear-gradient(135deg,#000000,#050505 48%,#000000) !important;
}

/* Main areas/cards: black base with inner theme glow. */
.panel,
.token-card,
.summary-card,
.mini,
.badge,
.status-pill,
.nav-links a,
.table-wrap,
.chart-box,
.field input,
.field select,
td input,
.message{
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--accent-a) calc(var(--glow) * 16%), transparent) 0%,
      color-mix(in srgb, var(--accent-a) calc(var(--glow) * 8%), transparent) 28%,
      transparent 68%
    ),
    #000000 !important;
  border-color:color-mix(in srgb, var(--accent-a) calc(34% + var(--glow) * 28%), rgba(255,255,255,.14)) !important;
  box-shadow:
    inset 0 0 calc(16px + var(--glow) * 28px) color-mix(in srgb, var(--accent-a) calc(var(--glow) * 22%), transparent),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 calc(12px + var(--glow) * 24px) color-mix(in srgb, var(--accent-a) calc(var(--glow) * 22%), transparent),
    0 16px 52px rgba(0,0,0,.56) !important;
}

/* Panel shine becomes a black-glass reflection with theme glow, not white/color fill. */
.panel::after{
  content:"" !important;
  pointer-events:none !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--accent-a) calc(var(--glow) * 18%), transparent) 0%,
      transparent 54%
    ),
    linear-gradient(120deg,
      rgba(255,255,255,calc(var(--shine) * .10)) 0%,
      rgba(255,255,255,calc(var(--shine) * .035)) 9%,
      transparent 22%,
      transparent 80%,
      rgba(255,255,255,calc(var(--shine) * .035)) 100%
    ) !important;
  opacity:1 !important;
  mix-blend-mode:screen !important;
}

/* Pills/links/buttons: black interiors with theme rim/glow only. */
button,
.card-actions a,
.card-actions button,
.actions-inline button,
.form-actions button{
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--accent-a) calc(var(--glow) * 18%), transparent) 0%,
      transparent 68%
    ),
    #000000 !important;
  border-color:color-mix(in srgb, var(--accent-a) calc(42% + var(--glow) * 24%), rgba(255,255,255,.15)) !important;
  color:var(--text) !important;
  box-shadow:
    inset 0 0 calc(10px + var(--glow) * 18px) color-mix(in srgb, var(--accent-a) calc(var(--glow) * 22%), transparent),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 calc(8px + var(--glow) * 18px) color-mix(in srgb, var(--accent-a) calc(var(--glow) * 24%), transparent),
    0 10px 24px rgba(0,0,0,.36) !important;
}

button:hover,
.card-actions a:hover,
.card-actions button:hover{
  border-color:color-mix(in srgb, var(--accent-a) 78%, #ffffff) !important;
  box-shadow:
    inset 0 0 calc(14px + var(--glow) * 24px) color-mix(in srgb, var(--accent-a) calc(var(--glow) * 32%), transparent),
    0 0 calc(14px + var(--glow) * 28px) color-mix(in srgb, var(--accent-a) calc(var(--glow) * 40%), transparent),
    0 12px 28px rgba(0,0,0,.42) !important;
}

/* Summary/subcards are solid black. */
.summary-card,
.mini,
.table-wrap,
.chart-box,
.message{
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--accent-a) calc(var(--glow) * 12%), transparent),
      transparent 62%
    ),
    #000000 !important;
}

/* Inputs/selects must stay readable and never inherit a light fill. */
.field input,
.field select,
td input{
  color:#f5f7fb !important;
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--accent-a) calc(var(--glow) * 10%), transparent),
      transparent 64%
    ),
    #000000 !important;
}

select option,
#themeSelect option,
#chainSelect option,
#modeSelect option,
#chartWidgetSelect option,
#chartModeSelect option{
  color:#000000 !important;
  background:#ffffff !important;
}

/* Brand icon uses the selected solid color but keeps black core. */
.brand-icon{
  background:
    radial-gradient(circle at center, var(--accent-a), color-mix(in srgb, var(--accent-a) 50%, #000000) 45%, #000000 100%) !important;
  color:#ffffff !important;
}

/* Table cells and rows solid black, no washed gradients. */
table,
tbody,
thead,
tr,
td,
th{
  background:#000000 !important;
}

/* Theme grid is now 4 controls after removing roundness; keep layout balanced. */
.theme-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

/* Mobile keeps controls stacked. */
@media (max-width:1100px){
  .theme-grid{grid-template-columns:1fr 1fr !important}
}
@media (max-width:720px){
  .theme-grid{grid-template-columns:1fr !important}
}


/* === MVP v4: themed button text with chart changes reverted ===
   Built from MVP v2 so the chart-container/object changes from v3 are removed.
   Buttons keep a glossy 3D feel, but chart boxes return to MVP v2 styling. */

button,
.card-actions a,
.card-actions button,
.actions-inline button,
.form-actions button,
.nav-links a,
.status-pill,
.badge{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  color:var(--accent-a) !important;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--accent-a) 55%, transparent),
    0 1px 0 rgba(0,0,0,.85) !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.050) 42%,
      rgba(0,0,0,.28) 43%,
      rgba(0,0,0,.68) 100%
    ),
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--accent-a) calc(var(--glow) * 18%), transparent),
      transparent 68%
    ),
    #000000 !important;
  border-color:color-mix(in srgb, var(--accent-a) calc(42% + var(--glow) * 24%), rgba(255,255,255,.14)) !important;
  border-top-color:rgba(255,255,255,.36) !important;
  border-bottom-color:rgba(0,0,0,.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 8px 18px rgba(255,255,255,.040),
    inset 0 -10px 18px rgba(0,0,0,.58),
    0 1px 0 rgba(255,255,255,.10),
    0 6px 0 rgba(0,0,0,.34),
    0 12px 24px rgba(0,0,0,.50),
    0 0 calc(10px + var(--glow) * 20px) color-mix(in srgb, var(--accent-a) calc(var(--glow) * 30%), transparent) !important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}

button::before,
.card-actions a::before,
.card-actions button::before,
.actions-inline button::before,
.form-actions button::before,
.nav-links a::before,
.status-pill::before,
.badge::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:8%;
  height:40%;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.08),transparent);
  opacity:calc(.72 * var(--shine));
  z-index:-1;
}

button:hover,
.card-actions a:hover,
.card-actions button:hover,
.actions-inline button:hover,
.form-actions button:hover,
.nav-links a:hover{
  color:color-mix(in srgb, var(--accent-a) 82%, #ffffff) !important;
  transform:translateY(-2px);
  filter:brightness(1.1) saturate(1.08);
  border-color:color-mix(in srgb, var(--accent-a) 78%, #ffffff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 9px 20px rgba(255,255,255,.060),
    inset 0 -10px 18px rgba(0,0,0,.56),
    0 1px 0 rgba(255,255,255,.12),
    0 8px 0 rgba(0,0,0,.38),
    0 16px 32px rgba(0,0,0,.58),
    0 0 calc(16px + var(--glow) * 30px) color-mix(in srgb, var(--accent-a) calc(var(--glow) * 44%), transparent) !important;
}

button:active,
.card-actions a:active,
.card-actions button:active,
.actions-inline button:active,
.form-actions button:active,
.nav-links a:active{
  transform:translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 5px 14px rgba(255,255,255,.035),
    inset 0 -8px 18px rgba(0,0,0,.62),
    0 3px 0 rgba(0,0,0,.42),
    0 8px 18px rgba(0,0,0,.45),
    0 0 calc(8px + var(--glow) * 18px) color-mix(in srgb, var(--accent-a) calc(var(--glow) * 28%), transparent) !important;
}


/* === MVP v5: solid glowing theme edge for every button/action pill ===
   Adds a crisp selected-theme border ring + outer glow while preserving
   the black-glass 3D button body from MVP v4. */

button,
.card-actions a,
.card-actions button,
.actions-inline button,
.form-actions button,
.nav-links a,
.status-pill,
.badge{
  border:2px solid var(--accent-a) !important;
  outline:1px solid color-mix(in srgb, var(--accent-a) 58%, transparent) !important;
  outline-offset:2px !important;
  color:var(--accent-a) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 8px 18px rgba(255,255,255,.040),
    inset 0 -10px 18px rgba(0,0,0,.58),
    inset 0 0 14px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 26%), transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-a) 86%, transparent),
    0 0 10px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 45%), transparent),
    0 0 22px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 34%), transparent),
    0 6px 0 rgba(0,0,0,.34),
    0 12px 24px rgba(0,0,0,.50) !important;
}

/* Creates a bright solid edge line that does not block clicks. */
button::after,
.card-actions a::after,
.card-actions button::after,
.actions-inline button::after,
.form-actions button::after,
.nav-links a::after,
.status-pill::after,
.badge::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  border:1px solid color-mix(in srgb, var(--accent-a) 86%, #ffffff) !important;
  box-shadow:
    inset 0 0 8px color-mix(in srgb, var(--accent-a) 46%, transparent),
    0 0 10px color-mix(in srgb, var(--accent-a) 56%, transparent) !important;
  opacity:.92 !important;
  z-index:1 !important;
  background:linear-gradient(120deg,
    rgba(255,255,255,.16),
    transparent 22%,
    transparent 74%,
    color-mix(in srgb, var(--accent-a) 18%, transparent)
  ) !important;
  mix-blend-mode:screen !important;
}

/* Keep the glossy top highlight above the black body but below readable text. */
button::before,
.card-actions a::before,
.card-actions button::before,
.actions-inline button::before,
.form-actions button::before,
.nav-links a::before,
.status-pill::before,
.badge::before{
  z-index:1 !important;
}

/* Keep visible label content above pseudo-element glow layers. */
button,
.card-actions a,
.card-actions button,
.actions-inline button,
.form-actions button,
.nav-links a,
.status-pill,
.badge{
  text-shadow:
    0 0 10px color-mix(in srgb, var(--accent-a) 74%, transparent),
    0 1px 0 rgba(0,0,0,.90) !important;
}

/* Stronger edge on hover/focus for clear interactivity. */
button:hover,
button:focus-visible,
.card-actions a:hover,
.card-actions a:focus-visible,
.card-actions button:hover,
.card-actions button:focus-visible,
.actions-inline button:hover,
.actions-inline button:focus-visible,
.form-actions button:hover,
.form-actions button:focus-visible,
.nav-links a:hover,
.nav-links a:focus-visible{
  border-color:color-mix(in srgb, var(--accent-a) 80%, #ffffff) !important;
  outline-color:color-mix(in srgb, var(--accent-a) 76%, #ffffff) !important;
  color:color-mix(in srgb, var(--accent-a) 72%, #ffffff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 9px 20px rgba(255,255,255,.060),
    inset 0 -10px 18px rgba(0,0,0,.56),
    inset 0 0 18px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 36%), transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-a) 100%, transparent),
    0 0 14px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 64%), transparent),
    0 0 34px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 48%), transparent),
    0 8px 0 rgba(0,0,0,.38),
    0 16px 32px rgba(0,0,0,.58) !important;
}

/* Active press keeps solid edge instead of dimming. */
button:active,
.card-actions a:active,
.card-actions button:active,
.actions-inline button:active,
.form-actions button:active,
.nav-links a:active{
  border-color:var(--accent-a) !important;
  outline-color:color-mix(in srgb, var(--accent-a) 58%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 5px 14px rgba(255,255,255,.035),
    inset 0 -8px 18px rgba(0,0,0,.62),
    inset 0 0 12px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 26%), transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-a) 82%, transparent),
    0 0 10px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 42%), transparent),
    0 3px 0 rgba(0,0,0,.42),
    0 8px 18px rgba(0,0,0,.45) !important;
}

/* Danger buttons keep red intent but still get a theme rim underneath. */
button.danger,
.card-actions button.danger,
.form-actions button.danger{
  border-color:#ff4d6d !important;
  outline-color:color-mix(in srgb, var(--accent-a) 58%, transparent) !important;
  color:#ff4d6d !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 0 14px rgba(255,77,109,.28),
    0 0 0 1px rgba(255,77,109,.85),
    0 0 12px rgba(255,77,109,.42),
    0 0 24px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 26%), transparent),
    0 6px 0 rgba(0,0,0,.34),
    0 12px 24px rgba(0,0,0,.50) !important;
}


/* === MVP v6: flatter thin-glow actionable buttons + plain non-action pills ===
   - Thinner glowing border on actionable buttons.
   - Removes raised 3D border/ledge effect from buttons.
   - Non-actionable status/badge pills become plain rectangles with no glowing edge.
   - DexScreener/card action links use rounded-square button shape. */

/* Actionable controls only */
button,
.card-actions a,
.card-actions button,
.actions-inline button,
.form-actions button,
.nav-links a{
  border:1px solid color-mix(in srgb, var(--accent-a) 62%, rgba(255,255,255,.14)) !important;
  outline:none !important;
  outline-offset:0 !important;
  border-radius:12px !important;
  color:var(--accent-a) !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.095),
      rgba(255,255,255,.030) 46%,
      rgba(0,0,0,.56)
    ),
    #000000 !important;
  text-shadow:
    0 0 6px color-mix(in srgb, var(--accent-a) 44%, transparent),
    0 1px 0 rgba(0,0,0,.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 8px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 14%), transparent),
    0 0 6px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 28%), transparent),
    0 6px 14px rgba(0,0,0,.34) !important;
  transform:none !important;
}

/* Thin internal rim only, no thick glowing edge */
button::after,
.card-actions a::after,
.card-actions button::after,
.actions-inline button::after,
.form-actions button::after,
.nav-links a::after{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:10px !important;
  pointer-events:none !important;
  border:1px solid color-mix(in srgb, var(--accent-a) 42%, transparent) !important;
  box-shadow:none !important;
  background:linear-gradient(120deg, rgba(255,255,255,.08), transparent 28%, transparent 74%, rgba(255,255,255,.035)) !important;
  opacity:calc(.62 * var(--shine)) !important;
  mix-blend-mode:screen !important;
  z-index:1 !important;
}

/* Keep a small gloss strip, not 3D bevel */
button::before,
.card-actions a::before,
.card-actions button::before,
.actions-inline button::before,
.form-actions button::before,
.nav-links a::before{
  content:"" !important;
  position:absolute !important;
  left:10% !important;
  right:10% !important;
  top:8% !important;
  height:32% !important;
  border-radius:9px !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.055), transparent) !important;
  opacity:calc(.56 * var(--shine)) !important;
  z-index:1 !important;
}

/* Action hover: thin glow only, no raised 3D movement */
button:hover,
button:focus-visible,
.card-actions a:hover,
.card-actions a:focus-visible,
.card-actions button:hover,
.card-actions button:focus-visible,
.actions-inline button:hover,
.actions-inline button:focus-visible,
.form-actions button:hover,
.form-actions button:focus-visible,
.nav-links a:hover,
.nav-links a:focus-visible{
  transform:none !important;
  border-color:color-mix(in srgb, var(--accent-a) 76%, #ffffff) !important;
  color:color-mix(in srgb, var(--accent-a) 78%, #ffffff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 10px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 18%), transparent),
    0 0 8px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 36%), transparent),
    0 7px 16px rgba(0,0,0,.36) !important;
  filter:brightness(1.04) !important;
}

/* Active: no press-down 3D ledge */
button:active,
.card-actions a:active,
.card-actions button:active,
.actions-inline button:active,
.form-actions button:active,
.nav-links a:active{
  transform:none !important;
  filter:brightness(.95) !important;
  box-shadow:
    inset 0 0 8px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 16%), transparent),
    0 0 5px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 26%), transparent),
    0 4px 10px rgba(0,0,0,.32) !important;
}

/* Danger buttons: thin red edge, no 3D border */
button.danger,
.card-actions button.danger,
.form-actions button.danger{
  border:1px solid rgba(255,77,109,.70) !important;
  color:#ff4d6d !important;
  outline:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 8px rgba(255,77,109,.16),
    0 0 6px rgba(255,77,109,.30),
    0 6px 14px rgba(0,0,0,.34) !important;
}

/* Non-actionable pills/badges: rectangular, no glowing border/edge */
.status-pill,
.badge{
  border:1px solid rgba(255,255,255,.13) !important;
  outline:none !important;
  outline-offset:0 !important;
  border-radius:8px !important;
  color:var(--muted) !important;
  background:#000000 !important;
  text-shadow:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
  transform:none !important;
}

/* Remove pseudo-element glow from non-action pills */
.status-pill::before,
.status-pill::after,
.badge::before,
.badge::after{
  display:none !important;
  content:none !important;
}

/* DexScreener/card action links specifically: rounded square like all other card buttons */
.card-actions a,
.card-actions button{
  border-radius:12px !important;
  min-height:36px !important;
  padding:8px 11px !important;
}

/* Navigation can be rounded-square too, not pill-shaped */
.nav-links a{
  border-radius:12px !important;
}


/* === MVP v7: subtle selected-theme gradients for actionable buttons ===
   Applies only to clickable/actionable controls.
   Non-action status pills and badges stay plain rectangles from MVP v6. */

button,
.card-actions a,
.card-actions button,
.actions-inline button,
.form-actions button,
.nav-links a{
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-a) 16%, #000000) 0%,
      #000000 34%,
      color-mix(in srgb, var(--accent-a) 10%, #000000) 68%,
      color-mix(in srgb, var(--accent-a) 18%, #000000) 100%
    ),
    radial-gradient(ellipse at 50% 0%,
      color-mix(in srgb, var(--accent-a) calc(var(--glow) * 18%), transparent),
      transparent 62%
    ),
    #000000 !important;
  border-color:color-mix(in srgb, var(--accent-a) 64%, rgba(255,255,255,.14)) !important;
  color:var(--accent-a) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 0 9px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 15%), transparent),
    0 0 6px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 28%), transparent),
    0 6px 14px rgba(0,0,0,.34) !important;
}

/* Subtle gloss line stays, but now follows the theme softly. */
button::before,
.card-actions a::before,
.card-actions button::before,
.actions-inline button::before,
.form-actions button::before,
.nav-links a::before{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.18),
      color-mix(in srgb, var(--accent-a) 10%, rgba(255,255,255,.045)),
      transparent
    ) !important;
}

/* Thin inner rim with very subtle theme tint. */
button::after,
.card-actions a::after,
.card-actions button::after,
.actions-inline button::after,
.form-actions button::after,
.nav-links a::after{
  border-color:color-mix(in srgb, var(--accent-a) 46%, transparent) !important;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,.055),
      transparent 30%,
      transparent 72%,
      color-mix(in srgb, var(--accent-a) 10%, transparent)
    ) !important;
}

/* Hover keeps the same flat style, just increases the theme gradient slightly. */
button:hover,
button:focus-visible,
.card-actions a:hover,
.card-actions a:focus-visible,
.card-actions button:hover,
.card-actions button:focus-visible,
.actions-inline button:hover,
.actions-inline button:focus-visible,
.form-actions button:hover,
.form-actions button:focus-visible,
.nav-links a:hover,
.nav-links a:focus-visible{
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-a) 22%, #000000) 0%,
      #000000 32%,
      color-mix(in srgb, var(--accent-a) 14%, #000000) 68%,
      color-mix(in srgb, var(--accent-a) 24%, #000000) 100%
    ),
    radial-gradient(ellipse at 50% 0%,
      color-mix(in srgb, var(--accent-a) calc(var(--glow) * 24%), transparent),
      transparent 64%
    ),
    #000000 !important;
  border-color:color-mix(in srgb, var(--accent-a) 76%, #ffffff) !important;
}

/* Danger actions keep red identity with a subtle red gradient, not the main theme fill. */
button.danger,
.card-actions button.danger,
.form-actions button.danger{
  background:
    linear-gradient(135deg,
      rgba(255,77,109,.18),
      #000000 36%,
      rgba(255,77,109,.10) 68%,
      rgba(255,77,109,.16)
    ),
    #000000 !important;
  border-color:rgba(255,77,109,.70) !important;
  color:#ff4d6d !important;
}

/* Explicitly preserve non-actionable pill/badge rectangle styling. */
.status-pill,
.badge{
  background:#000000 !important;
  color:var(--muted) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}


/* === MVP v8: sharper lighter theme-tinted button text ===
   Button labels use a lighter version of the selected theme color for clarity.
   Hover/focus brightens text and glow without changing the flatter button shape. */

button,
.card-actions a,
.card-actions button,
.actions-inline button,
.form-actions button,
.nav-links a{
  color:color-mix(in srgb, var(--accent-a) 72%, #ffffff) !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  text-shadow:
    0 0 5px color-mix(in srgb, var(--accent-a) 58%, transparent),
    0 0 10px color-mix(in srgb, var(--accent-a) 26%, transparent),
    0 1px 0 rgba(0,0,0,.95) !important;
}

/* Inner button rim follows a lighter theme shade so the text and edge feel sharper together. */
button::after,
.card-actions a::after,
.card-actions button::after,
.actions-inline button::after,
.form-actions button::after,
.nav-links a::after{
  border-color:color-mix(in srgb, var(--accent-a) 56%, #ffffff 10%) !important;
}

/* Hover/focus: slightly brighter text, cleaner glow, no movement added. */
button:hover,
button:focus-visible,
.card-actions a:hover,
.card-actions a:focus-visible,
.card-actions button:hover,
.card-actions button:focus-visible,
.actions-inline button:hover,
.actions-inline button:focus-visible,
.form-actions button:hover,
.form-actions button:focus-visible,
.nav-links a:hover,
.nav-links a:focus-visible{
  color:color-mix(in srgb, var(--accent-a) 54%, #ffffff) !important;
  text-shadow:
    0 0 6px color-mix(in srgb, var(--accent-a) 78%, transparent),
    0 0 14px color-mix(in srgb, var(--accent-a) 46%, transparent),
    0 1px 0 rgba(0,0,0,1) !important;
}

/* Active keeps the lighter readable text while dimming only slightly. */
button:active,
.card-actions a:active,
.card-actions button:active,
.actions-inline button:active,
.form-actions button:active,
.nav-links a:active{
  color:color-mix(in srgb, var(--accent-a) 66%, #ffffff) !important;
  text-shadow:
    0 0 4px color-mix(in srgb, var(--accent-a) 48%, transparent),
    0 1px 0 rgba(0,0,0,.95) !important;
}

/* Danger actions also get a lighter red font for sharper readability. */
button.danger,
.card-actions button.danger,
.form-actions button.danger{
  color:color-mix(in srgb, #ff4d6d 72%, #ffffff) !important;
  text-shadow:
    0 0 5px rgba(255,77,109,.62),
    0 0 10px rgba(255,77,109,.26),
    0 1px 0 rgba(0,0,0,.95) !important;
}

button.danger:hover,
.card-actions button.danger:hover,
.form-actions button.danger:hover,
button.danger:focus-visible,
.card-actions button.danger:focus-visible,
.form-actions button.danger:focus-visible{
  color:color-mix(in srgb, #ff4d6d 54%, #ffffff) !important;
  text-shadow:
    0 0 6px rgba(255,77,109,.78),
    0 0 14px rgba(255,77,109,.45),
    0 1px 0 rgba(0,0,0,1) !important;
}


/* === MVP v9: non-bold button fonts + theme-following Clear/Remove ===
   Makes actionable control labels less bold and removes the red danger styling.
   Clear and Remove now follow the selected theme like all other action buttons. */

button,
.card-actions a,
.card-actions button,
.actions-inline button,
.form-actions button,
.nav-links a{
  font-weight:500 !important;
  letter-spacing:.005em !important;
}

/* Make danger actions theme-following instead of red. */
button.danger,
.card-actions button.danger,
.form-actions button.danger{
  color:color-mix(in srgb, var(--accent-a) 72%, #ffffff) !important;
  border:1px solid color-mix(in srgb, var(--accent-a) 64%, rgba(255,255,255,.14)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-a) 16%, #000000) 0%,
      #000000 34%,
      color-mix(in srgb, var(--accent-a) 10%, #000000) 68%,
      color-mix(in srgb, var(--accent-a) 18%, #000000) 100%
    ),
    radial-gradient(ellipse at 50% 0%,
      color-mix(in srgb, var(--accent-a) calc(var(--glow) * 18%), transparent),
      transparent 62%
    ),
    #000000 !important;
  text-shadow:
    0 0 5px color-mix(in srgb, var(--accent-a) 58%, transparent),
    0 0 10px color-mix(in srgb, var(--accent-a) 26%, transparent),
    0 1px 0 rgba(0,0,0,.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 0 9px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 15%), transparent),
    0 0 6px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 28%), transparent),
    0 6px 14px rgba(0,0,0,.34) !important;
}

/* Hover/focus for Clear and Remove follows the active theme. */
button.danger:hover,
.card-actions button.danger:hover,
.form-actions button.danger:hover,
button.danger:focus-visible,
.card-actions button.danger:focus-visible,
.form-actions button.danger:focus-visible{
  color:color-mix(in srgb, var(--accent-a) 54%, #ffffff) !important;
  border-color:color-mix(in srgb, var(--accent-a) 76%, #ffffff) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-a) 22%, #000000) 0%,
      #000000 32%,
      color-mix(in srgb, var(--accent-a) 14%, #000000) 68%,
      color-mix(in srgb, var(--accent-a) 24%, #000000) 100%
    ),
    radial-gradient(ellipse at 50% 0%,
      color-mix(in srgb, var(--accent-a) calc(var(--glow) * 24%), transparent),
      transparent 64%
    ),
    #000000 !important;
  text-shadow:
    0 0 6px color-mix(in srgb, var(--accent-a) 78%, transparent),
    0 0 14px color-mix(in srgb, var(--accent-a) 46%, transparent),
    0 1px 0 rgba(0,0,0,1) !important;
}

/* Active state for danger actions remains theme-following. */
button.danger:active,
.card-actions button.danger:active,
.form-actions button.danger:active{
  color:color-mix(in srgb, var(--accent-a) 66%, #ffffff) !important;
  border-color:var(--accent-a) !important;
}


/* === MVP v10: push-button hover/active effects on actionable controls ===
   Applies only to clickable/actionable controls.
   Non-action status pills and badges remain plain rectangles. */

button,
.card-actions a,
.card-actions button,
.actions-inline button,
.form-actions button,
.nav-links a{
  transform:translateY(0) scale(1) !important;
  transition:
    transform .11s ease,
    box-shadow .11s ease,
    filter .11s ease,
    border-color .11s ease,
    background .11s ease,
    color .11s ease !important;
  will-change:transform, box-shadow;
}

/* Hover makes the control feel like a real push button ready to press:
   tiny downward movement, tighter shadow, brighter edge. */
button:hover,
button:focus-visible,
.card-actions a:hover,
.card-actions a:focus-visible,
.card-actions button:hover,
.card-actions button:focus-visible,
.actions-inline button:hover,
.actions-inline button:focus-visible,
.form-actions button:hover,
.form-actions button:focus-visible,
.nav-links a:hover,
.nav-links a:focus-visible{
  transform:translateY(1px) scale(.995) !important;
  filter:brightness(1.08) saturate(1.06) !important;
  border-color:color-mix(in srgb, var(--accent-a) 82%, #ffffff) !important;
  color:color-mix(in srgb, var(--accent-a) 50%, #ffffff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 11px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 22%), transparent),
    inset 0 5px 10px rgba(255,255,255,.035),
    inset 0 -7px 14px rgba(0,0,0,.48),
    0 0 8px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 38%), transparent),
    0 4px 10px rgba(0,0,0,.40) !important;
}

/* Active click pushes further inward. */
button:active,
.card-actions a:active,
.card-actions button:active,
.actions-inline button:active,
.form-actions button:active,
.nav-links a:active{
  transform:translateY(3px) scale(.985) !important;
  filter:brightness(.96) saturate(1.03) !important;
  color:color-mix(in srgb, var(--accent-a) 62%, #ffffff) !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.72),
    inset 0 0 12px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 20%), transparent),
    inset 0 -2px 8px rgba(255,255,255,.035),
    0 0 5px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 28%), transparent),
    0 2px 6px rgba(0,0,0,.34) !important;
}

/* Keyboard focus keeps push affordance visible. */
button:focus-visible,
.card-actions a:focus-visible,
.card-actions button:focus-visible,
.actions-inline button:focus-visible,
.form-actions button:focus-visible,
.nav-links a:focus-visible{
  outline:1px solid color-mix(in srgb, var(--accent-a) 76%, #ffffff) !important;
  outline-offset:3px !important;
}

/* Theme-following Clear/Remove buttons also get the same push behavior. */
button.danger:hover,
.card-actions button.danger:hover,
.form-actions button.danger:hover,
button.danger:focus-visible,
.card-actions button.danger:focus-visible,
.form-actions button.danger:focus-visible{
  transform:translateY(1px) scale(.995) !important;
  color:color-mix(in srgb, var(--accent-a) 50%, #ffffff) !important;
  border-color:color-mix(in srgb, var(--accent-a) 82%, #ffffff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 11px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 22%), transparent),
    inset 0 5px 10px rgba(255,255,255,.035),
    inset 0 -7px 14px rgba(0,0,0,.48),
    0 0 8px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 38%), transparent),
    0 4px 10px rgba(0,0,0,.40) !important;
}

button.danger:active,
.card-actions button.danger:active,
.form-actions button.danger:active{
  transform:translateY(3px) scale(.985) !important;
  color:color-mix(in srgb, var(--accent-a) 62%, #ffffff) !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.72),
    inset 0 0 12px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 20%), transparent),
    inset 0 -2px 8px rgba(255,255,255,.035),
    0 0 5px color-mix(in srgb, var(--accent-a) calc(var(--glow) * 28%), transparent),
    0 2px 6px rgba(0,0,0,.34) !important;
}

/* Explicitly prevent non-actionable pills/badges from inheriting push effects. */
.status-pill,
.badge,
.status-pill:hover,
.badge:hover{
  transform:none !important;
  filter:none !important;
  transition:none !important;
  outline:none !important;
}


/* === MVP v26: manual refresh controls === */
.chart-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.chart-card-head h2{margin:0;}
.small-action{
  padding:9px 12px;
  min-height:34px;
  font-size:.82rem;
  white-space:nowrap;
}
.card-actions button[data-refresh-widget]{
  border-color:color-mix(in srgb, var(--accent-a) 70%, rgba(255,255,255,.22));
}
@media (max-width: 620px){
  .chart-card-head{align-items:flex-start;flex-direction:column;}
  .small-action{width:100%;}
}


/* Header refresh-all button uses the same pill/nav styling as header links. */
.nav-links button{
  font:inherit;
  cursor:pointer;
}
.nav-links button:disabled{
  cursor:not-allowed;
  opacity:.66;
}
.nav-links button:hover,
.nav-links button:focus-visible{
  color:#fff;
}