/* style.css — Injective Portfolio v2.0.2 (FULL FILE) */

:root{
  --bg-dark:#000;
  --fg-dark:#f9fafb;
  --muted-dark: rgba(249,250,251,.70);

  --bg-light:#e7eaf0;
  --fg-light:#0f172a;
  --muted-light: rgba(15,23,42,.62);

  --card-dark-a:#0b1220;
  --card-dark-b:#111c2f;

  --card-light-a:#f0f2f6;
  --card-light-b:#e6eaf2;

  --bar-dark: rgba(255,255,255,0.08);
  --bar-light: rgba(15,23,42,0.06);

  --radius: 18px;
  --radius-sm: 14px;

  --green:#22c55e;
  --red:#ef4444;
  --amber:#f59e0b;
  --blue:#3b82f6;
  --yellow:#facc15;

  --gap: 1.05rem;
  --pad: 14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg-dark);
  color: var(--fg-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
body[data-theme="light"]{
  background: var(--bg-light);
  color: var(--fg-light);
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px;
}
@media (max-width: 520px){
  .container{ padding: 10px; }
}

/* ===== Header ===== */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px 0 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.20));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body[data-theme="light"] .header{
  background: linear-gradient(180deg, rgba(231,234,240,.86), rgba(231,234,240,.40));
}

.header-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 10px;
}
.header-left{ justify-self: start; }
.header-center{ justify-self: center; text-align:center; }
.header-right{ justify-self: end; }

@media (max-width: 520px){
  .header-grid{
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  }
}

.menu-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  font-weight: 900;
  font-size: 1.2rem;
}
body[data-theme="light"] .menu-btn{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }

.header-center{ text-align:center; }
.brand-title{
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: .2px;
  font-weight: 950;
  line-height: 1.1;
  display:inline-flex;
  align-items:center;
  gap: 6px;
}
.brand-title .dot{
  color: var(--yellow);
  text-shadow: 0 0 18px rgba(250,204,21,.35);
}
.brand-title .title-full{
  background: linear-gradient(90deg, #facc15, #60a5fa, #22c55e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-title .title-compact{
  display:none;
  background: linear-gradient(90deg, #facc15, #60a5fa, #22c55e);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.subtitle{
  margin-top: 4px;
  font-size: .90rem;
  opacity: .72;
}

.header-meta-right{
  margin-top: 8px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:center;
}
.address-display{ display:flex; align-items:center; gap:8px; }
.address-display .tag{
  display:inline-flex;
  gap: 6px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  font-size: .85rem;
}
body[data-theme="light"] .address-display{ display:flex; align-items:center; gap:8px; }
.address-display .tag{
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.10);
}


/* ===== Wallet row (header) + copy button ===== */
.wallet-row{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}
.wallet-row .address-display{ min-width:0; }
.addr-copy,
.wallet-copy{
  width:38px; height:38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
  display:grid;
  place-items:center;
  cursor:pointer;
  flex: 0 0 auto;
}
body[data-theme="light"] .addr-copy,
.wallet-copy{
  border-color: rgba(15,23,42,.14);
  background: rgba(15,23,42,.06);
}
.addr-copy:active,
.wallet-copy:active{ transform: scale(.98); }
.addr-copy.copied,
.wallet-copy.copied{
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 0 22px rgba(34,197,94,.22);
}


.connection-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-weight: 800;
  font-size: .86rem;
}
body[data-theme="light"] .connection-status{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
}
.status-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--red);
  animation: statusPulse 1.15s ease-in-out infinite;
}

/* ===== Search (non invasiva, espande verso sinistra) ===== */
.search-wrap{
  margin-left: auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap: 8px;
  position: relative;
}
.icon-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  display:grid;
  place-items:center;
}
body[data-theme="light"] .icon-btn{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }

/* icona lente (CSS) */
.icon-search{
  width: 18px; height: 18px;
  display:block;
  position: relative;
  border: 2px solid currentColor;
  border-radius: 999px;
  opacity:.95;
}
.icon-search:after{
  content:"";
  position:absolute;
  width: 10px; height: 2px;
  background: currentColor;
  right: -7px; bottom: -4px;
  transform: rotate(45deg);
  border-radius: 2px;
  opacity:.95;
}

#addressInput{
  width: 0px;
  opacity: 0;
  padding: 0;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: inherit;
  outline: none;
  transition: width .22s ease, opacity .16s ease, padding .18s ease;
  transform-origin: right center; /* espande da destra verso sinistra */
}
body[data-theme="light"] #addressInput{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.55);
}
.search-wrap.open #addressInput{
  width: 340px;
  opacity: 1;
  padding: 0 12px;
}
@media (max-width: 520px){
  .search-wrap.open #addressInput{ width: min(72vw, 330px); }
}

/* quando search open: titolo compatto e senza subtitle */
body.search-open .brand-title .title-full{ display:none; }
body.search-open .brand-title .title-compact{ display:inline; }
body.search-open .subtitle{ display:none; }

/* ===== Drawer ===== */
.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 80;
}
.drawer{
  position: fixed;
  top: 0; left: 0;
  width: 290px;
  height: 100%;
  background: rgba(10,14,20,.88);
  border-right: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .20s ease;
  z-index: 90;
  display:flex;
  flex-direction: column;
}
body[data-theme="light"] .drawer{
  background: rgba(255,255,255,.82);
  border-right-color: rgba(15,23,42,.10);
}
body.drawer-open .backdrop{ opacity:1; pointer-events:auto; }
body.drawer-open .drawer{ transform: translateX(0); }

.drawer-top{
  padding: 14px;
  display:flex;
  justify-content: space-between;
  align-items:center;
}
.drawer-title{ font-weight: 950; font-size: 1.05rem; }
.drawer-toggles{ display:flex; gap: 8px; }
.toggle-btn{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: inherit;
  font-size: 1.05rem;
}
body[data-theme="light"] .toggle-btn{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }

.drawer-nav{
  padding: 10px 14px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.nav-item{
  text-align:left;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: inherit;
  font-weight: 900;
  letter-spacing: .3px;
}
body[data-theme="light"] .nav-item{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }
.nav-item.active{
  border-color: rgba(250,204,21,.35);
  box-shadow: 0 0 0 2px rgba(250,204,21,.10) inset;
}
.nav-spacer{ flex:1; }
.settings-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.nav-version{
  opacity:.75;
  font-weight: 900;
  font-size: .85rem;
}
.drawer-foot{
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}
body[data-theme="light"] .drawer-foot{ border-top-color: rgba(15,23,42,.10); }
.drawer-hint{ font-weight: 900; opacity:.85; }
.drawer-meta{ margin-top: 10px; display:flex; flex-direction:column; gap: 8px; }
.drawer-meta-row{ display:flex; justify-content:space-between; gap:10px; font-size:.9rem; }
.drawer-meta-label{ opacity:.72; }
.drawer-meta-value{ font-weight: 900; display:flex; align-items:center; gap:8px; }
.cloud-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--amber);
}
.cloud-dot.ok{ background: var(--green); }
.cloud-dot.saving{ background: var(--amber); }
.cloud-dot.err{ background: var(--red); }

/* ===== Cards / Layout ===== */
.pages{ padding: 10px 0 60px; }
.page{ display:none; }
.page.active{ display:block; }

.cards-wrapper{
  display:flex;
  flex-direction: column;
  gap: var(--gap);
}
.card{
  border-radius: var(--radius);
  padding: var(--pad);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  position: relative;
}
body[data-theme="light"] .card{
  background: linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.02));
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 10px 30px rgba(15,23,42,.10);
}

.label{ opacity:.75; font-weight: 900; letter-spacing:.3px; }
.value-row{ margin-top: 8px; font-weight: 950; font-size: 1.75rem; }
.sub-row{ margin-top: 6px; opacity:.78; font-weight: 800; }
.card-tools{
  position:absolute;
  top: 12px;
  right: 12px;
  display:flex;
  gap: 8px;
}
.card-expand{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  font-size: 1.05rem;
}
body[data-theme="light"] .card-expand{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }

.card.fullscreen{
  position: fixed !important;
  inset: 12px;
  z-index: 200;
  overflow: hidden;
}

/* ===== Bars (più grandi, % al centro) ===== */
.bar-container{
  margin-top: 12px;
  height: 18px;
  border-radius: 999px;
  background: var(--bar-dark);
  position: relative;
  overflow: hidden;
}
body[data-theme="light"] .bar-container{ background: var(--bar-light); }

.bar-fill{
  position:absolute;
  top:0; bottom:0;
  left:0;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,197,94,.70), rgba(16,185,129,.34));
  box-shadow:
    0 0 24px rgba(34,197,94,.40),
    0 0 64px rgba(34,197,94,.26),
    0 0 110px rgba(34,197,94,.12);
  filter: saturate(1.20);
  overflow:hidden;
}
.bar-fill::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(250,204,21,.22), rgba(255,255,255,.08));
  opacity: .55;
  pointer-events:none;
}
.bar-fill::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg, rgba(250,204,21,0) 0%, rgba(250,204,21,.55) 50%, rgba(250,204,21,0) 100%);
  filter: blur(10px);
  opacity: .55;
  transform: translateX(-60%);
  pointer-events:none;
  animation: var(--beam-anim) 1.6s ease-in-out infinite;
}
@keyframes beamSweep{
  0%{ transform: translateX(-60%); opacity:.35; }
  50%{ transform: translateX(10%); opacity:.70; }
  100%{ transform: translateX(-60%); opacity:.35; }
}
  50%{ transform: translateX(10px); opacity:1; }
  100%{ transform: translateX(-10px); opacity:.70; }
}
.bar-line{
  position:absolute;
  top: -6px;
  width: 2px;
  height: 30px;
  background: rgba(250,204,21,.92);
  left: 50%;
}
.bar-pct{
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  font-weight: 950;
  font-size: .86rem;
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  color: rgba(249,250,251,.95);
  pointer-events:none;
}
body[data-theme="light"] .bar-pct{
  color: rgba(15,23,42,.90);
  text-shadow:none;
}

.bar-values{
  margin-top: 8px;
  display:flex;
  justify-content: space-between;
  font-weight: 850;
  opacity:.75;
  font-size: .90rem;
}

/* keep 0 left + target right, gear centered */
.bar-values .left{ order:0; }
.bar-values .target-gear{ order:1; margin: 0 auto; padding: 0 8px; }
.bar-values .right{ order:2; }


.perf{ display:flex; align-items:center; gap: 8px; }
.arrow{ font-weight: 950; opacity:.85; }
.arrow.up{ color: var(--green); }
.arrow.down{ color: var(--red); }
.arrow.flat{ opacity:.55; }
.pct{ font-weight: 950; }
.pct.up{ color: var(--green); }
.pct.down{ color: var(--red); }
.pct.flat{ opacity:.65; }

/* ===== Net Worth ===== */
.networth-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.networth-top2{
  margin-top: 10px;
  display:flex;
  gap: 10px;
}
.nw-scale-btn, .nw-live-btn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  font-weight: 950;
  letter-spacing: .2px;
}
body[data-theme="light"] .nw-scale-btn,
body[data-theme="light"] .nw-live-btn{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
}
.nw-live-btn.active{
  box-shadow: 0 0 0 2px rgba(250,204,21,.12) inset;
  border-color: rgba(250,204,21,.35);
}

.networth-metrics{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.networth-usd{
  font-size: 2.05rem;
  font-weight: 950;
}
.networth-pnl{
  font-weight: 950;
  opacity:.85;
}
.networth-pnl.good{ color: var(--green); }
.networth-pnl.bad{ color: var(--red); }
.networth-pnl.flat{ opacity:.65; }

.networth-chart{
  position: relative;
  margin-top: 10px;
  height: 220px;
}
@media (max-width: 520px){
  .networth-chart{ height: 200px; }
}
.networth-tf{ margin-top: 10px; }
.tf-switch{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tf-btn{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  font-weight: 950;
  font-size: .86rem;
}

.tf-btn:disabled,
.tf-btn.locked{
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(30%);
}
body[data-theme="light"] .tf-btn{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }
.tf-btn.active{
  border-color: rgba(250,204,21,.40);
  box-shadow: 0 0 0 2px rgba(250,204,21,.12) inset;
}

.networth-foot{ margin-top: 12px; }
.nw-mini{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
}
body[data-theme="light"] .nw-mini{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }
.nw-mini-left{ display:flex; align-items:center; gap: 10px; }
.nw-coin-logo-img{ width: 22px; height: 22px; border-radius: 6px; }
.nw-mini-title{ font-weight: 950; }
.nw-mini-sub{ opacity:.70; font-weight: 800; font-size: .88rem; margin-top: 2px; }
.nw-mini-qty{ font-weight: 950; }

/* ===== Charts area ===== */
.stake-chart-wrap, .reward-chart-wrap{
  position: relative;
  margin-top: 12px;
  height: 220px;
}
.chart-card{
  position: relative;
  margin-top: 12px;
  height: 260px;
}

@media (max-width: 520px){
  .stake-chart-wrap, .reward-chart-wrap{ height: 200px; }
  .chart-card{ height: 230px; }
}
canvas{ width:100% !important; height:100% !important; }

/* readout pill */
.chart-readout{
  position:absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: .86rem;
  letter-spacing: .2px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  max-width: 86%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-theme="light"] .chart-readout{
  background: rgba(255,255,255,.66);
  border-color: rgba(15,23,42,.10);
}
@media (max-width: 520px){
  .chart-readout{ top: 8px; right: 8px; font-size: .82rem; padding: 6px 9px; }
}

/* Price chart overlay */
.chart-overlay{
  position:absolute;
  top: 10px;
  left: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 950;
  display:none;
  z-index: 5;
}
.chart-overlay.show{ display:inline-flex; }
body[data-theme="light"] .chart-overlay{
  background: rgba(255,255,255,.70);
  border-color: rgba(15,23,42,.10);
}

/* Rewards tools */
.reward-tools{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.mini-btn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  font-weight: 950;
}
body[data-theme="light"] .mini-btn{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }
.mini-select-wrap{ display:flex; align-items:center; gap: 8px; }
.mini-select-label{ opacity:.75; font-weight: 900; }
.mini-select{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  font-weight: 900;
}
body[data-theme="light"] .mini-select{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }

/* Rewards timeline */
.reward-timeline{ margin-top: 10px; }
.reward-timeline input[type="range"]{ width: 100%; }
.reward-timeline-meta{ margin-top: 6px; opacity:.78; font-weight: 850; }

/* ===== Events page ===== */
.events-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.events-title h2{ margin:0; font-size:1.25rem; }
.events-sub{ margin-top: 4px; opacity:.72; font-weight: 800; }
.events-clear{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  font-weight: 950;
}
body[data-theme="light"] .events-clear{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }

.events-card{
  border-radius: var(--radius);
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
body[data-theme="light"] .events-card{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }

.events-table-wrap{
  overflow:auto;
  border-radius: 14px;
}
.events-table{
  width:100%;
  border-collapse: collapse;
  min-width: 520px;
}
.events-table th, .events-table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align:left;
  font-weight: 850;
}
body[data-theme="light"] .events-table th,
body[data-theme="light"] .events-table td{ border-bottom-color: rgba(15,23,42,.08); }
.events-table th{ opacity:.75; font-weight: 950; }
.events-empty{ padding: 14px; opacity:.72; font-weight: 850; }

/* ===== Toast ===== */
.toast-host{
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display:flex;
  flex-direction: column;
  gap: 10px;
  pointer-events:none;
}
.toast{
  width: min(520px, calc(100vw - 20px));
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body[data-theme="light"] .toast{
  background: rgba(255,255,255,.80);
  border-color: rgba(15,23,42,.12);
}
.toast-row{ display:flex; justify-content:space-between; gap: 10px; }
.toast-title{ font-weight: 950; }
.toast-sub{ margin-top: 6px; opacity:.78; font-weight: 850; }

/* ===== Coming soon ===== */
.coming-soon{
  position: fixed;
  inset: 0;
  display:none;
  place-items:center;
  z-index: 150;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.coming-soon.show{ display:grid; }
.coming-card{
  width: min(460px, calc(100vw - 24px));
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
}
body[data-theme="light"] .coming-card{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.80);
}
.coming-title{ font-weight: 950; font-size: 1.2rem; }
.coming-sub{ margin-top: 8px; opacity:.78; font-weight: 850; }
.coming-close{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: inherit;
  font-weight: 950;
}

/* ===== Footer ===== */
.last-update{
  margin-top: 14px;
  text-align:center;
  opacity:.75;
  font-weight: 850;
}
.pro-footer{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
body[data-theme="light"] .pro-footer{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }
.pro-pill{ font-weight: 950; }
.pro-dot{ opacity:.55; }
.pro-meta{ font-weight: 900; opacity:.80; }
.cloud-points{ opacity:.75; }

/* ===== SETTINGS ===== */
.page-settings .settings-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom: 14px;
}
.page-settings h2{ margin:0; font-size:1.25rem; letter-spacing:.2px; }
.page-settings .settings-sub{ opacity:.72; font-size:.92rem; margin-top:4px; }

.settings-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
body[data-theme="light"] .settings-card{
  background: linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.02));
  border-color: rgba(15,23,42,.10);
}

.settings-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.settings-row:first-child{ border-top: 0; padding-top: 2px; }
body[data-theme="light"] .settings-row{ border-top-color: rgba(15,23,42,.08); }

.settings-label{ opacity:.75; font-size:.92rem; font-weight: 850; }
.settings-value{ font-weight: 900; font-size:.95rem; text-align:right; }

.settings-accordion{ border-radius: var(--radius); overflow:hidden; }
.acc-head{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-weight: 950;
}
body[data-theme="light"] .acc-head{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
}
.acc-caret{ opacity:.75; transition: transform .18s ease; }
.acc-head[aria-expanded="true"] .acc-caret{ transform: rotate(180deg); }
.acc-body{ margin-top: 10px; }
.acc-body[aria-hidden="true"]{ display:none; }

.settings-block-title{
  font-weight: 950;
  margin-bottom: 10px;
  opacity: .92;
}

/* Cloud monitor */
.cloud-monitor{ display:flex; gap:12px; align-items:flex-start; }
.cloud-dot-big{
  width: 14px; height: 14px; border-radius: 999px;
  margin-top: 4px;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(245,158,11,.35);
}
.cloud-dot-big.ok{ background: var(--green); animation: dotPulse 1.2s infinite; }
.cloud-dot-big.saving{ background: var(--amber); animation: dotPulse 1.0s infinite; }
.cloud-dot-big.err{ background: var(--red); animation: dotPulse 1.1s infinite; }

@keyframes dotPulse{
  0%{ box-shadow: 0 0 0 0 rgba(250,204,21,.20); }
  70%{ box-shadow: 0 0 0 10px rgba(250,204,21,0); }
  100%{ box-shadow: 0 0 0 0 rgba(250,204,21,0); }
}
.cloud-monitor-state{ font-weight: 950; font-size: 1.02rem; }
.cloud-monitor-sub, .cloud-monitor-sub2{ opacity:.78; font-size:.92rem; margin-top:4px; font-weight: 850; }
.cloud-monitor-sub .sep{ margin: 0 6px; opacity:.55; }


/* =========================================================
   v2.0.2 • Integrations (privacy + events pro + targets + APR + validator + price TF)
   (appended – no reordering)
   ========================================================= */

/* --- Privacy mode (targeted: blur only per-address fields) --- */
body.privacy-on .private{
  filter: blur(7px);
  opacity: .35;
}
body.privacy-on .label,
body.privacy-on .card-tools,
body.privacy-on .tf-switch,
body.privacy-on .reward-tools,
body.privacy-on .reward-timeline,
body.privacy-on .events-toolbar,
body.privacy-on .events-clear,
body.privacy-on .menu-btn,
body.privacy-on .drawer,
body.privacy-on .header,
body.privacy-on .pro-footer{
  filter: none !important;
  opacity: 1 !important;
}

/* --- Net Worth: show only LIN/LOG near price (hide LIVE toggle) --- */
#nwLiveToggle{ display:none !important; }
.networth-card{ position: relative; }
.networth-top2{
  position:absolute;
  right: 12px;
  top: 78px;
  margin: 0;
  gap: 0;
}
@media (max-width: 520px){
  .networth-top2{ top: 72px; }
}
.networth-top2 .nw-scale-btn{ padding: 8px 10px; border-radius: 999px; font-size: .86rem; }

/* --- Price card: make info smaller + elegant --- */
.price-card .sub-row.perf{
  margin-top: 8px;
  font-size: .82rem;
  opacity: .78;
}
.price-card .bar-values{
  font-size: .80rem;
  opacity: .70;
}

/* --- Targets gear --- */
.target-gear{
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 0 0 10px;
  cursor: pointer;
  opacity: .85;
}
.target-gear:hover{ opacity: 1; transform: translateY(-1px); }
.bar-values{ align-items:center; }

/* --- Modal --- */
.modal{ position: fixed; inset: 0; display:none; z-index: 260; }
.modal.show{ display:block; }
.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.modal-card{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 24px));
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(14px);
  padding: 14px;
}
body[data-theme="light"] .modal-card{
  background: rgba(255,255,255,.88);
  border-color: rgba(15,23,42,.12);
}
.modal-head{ display:flex; justify-content: space-between; align-items:center; gap:10px; }
.modal-title{ font-weight: 950; font-size: 1.05rem; }
.modal-close{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: inherit;
  font-weight: 950;
}
body[data-theme="light"] .modal-close{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }
.modal-body{ margin-top: 12px; }
.modal-row{ display:flex; flex-direction: column; gap: 8px; }
.modal-label{ opacity:.75; font-weight: 900; font-size: .92rem; }
.modal-input{
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  padding: 0 12px;
  font-weight: 950;
  outline: none;
}
body[data-theme="light"] .modal-input{ border-color: rgba(15,23,42,.12); background: rgba(15,23,42,.04); }
.modal-actions{ margin-top: 12px; display:flex; justify-content:flex-end; }
.modal-btn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: inherit;
  font-weight: 950;
}
body[data-theme="light"] .modal-btn{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }

/* --- APR + Validator --- */
.apr-chart-wrap{ position: relative; margin-top: 12px; height: 190px; }
@media (max-width: 520px){ .apr-chart-wrap{ height: 180px; } }
.validator-card .value-row{ font-size: 1.35rem; }
.validator-card #validatorMeta{ font-size: .90rem; opacity:.78; }

/* --- Events PRO toolbar + pills --- */
.events-toolbar{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.events-search{
  flex: 1 1 220px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  padding: 0 12px;
  font-weight: 850;
  outline: none;
}
body[data-theme="light"] .events-search{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }
.events-select{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  padding: 0 10px;
  font-weight: 900;
}
body[data-theme="light"] .events-select{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }
.events-count{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-weight: 950;
  opacity: .88;
}
body[data-theme="light"] .events-count{ border-color: rgba(15,23,42,.10); background: rgba(15,23,42,.04); }

.ev-badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: .78rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
body[data-theme="light"] .ev-badge{ border-color: rgba(15,23,42,.12); background: rgba(15,23,42,.04); }
.ev-badge.up{ border-color: rgba(34,197,94,.35); box-shadow: 0 0 0 2px rgba(34,197,94,.10) inset; }
.ev-badge.down{ border-color: rgba(239,68,68,.35); box-shadow: 0 0 0 2px rgba(239,68,68,.10) inset; }
.ev-badge.neu{ border-color: rgba(250,204,21,.28); box-shadow: 0 0 0 2px rgba(250,204,21,.10) inset; }

.pill{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: .78rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.pill.ok{ border-color: rgba(34,197,94,.35); color: var(--green); }
.pill.pending{ border-color: rgba(245,158,11,.35); color: var(--amber); }
.pill.err{ border-color: rgba(239,68,68,.35); color: var(--red); }
.pill.done{ border-color: rgba(59,130,246,.28); color: var(--blue); }

.ev-title{ font-weight: 950; }
.ev-detail{ margin-top: 6px; opacity: .78; font-weight: 850; }
.ev-id{ margin-top: 6px; opacity: .55; font-weight: 900; font-size: .78rem; }

/* --- Cloud status text colors --- */
.cloud-ok{ color: var(--green) !important; }
.cloud-saving{ color: var(--amber) !important; }
.cloud-err{ color: var(--red) !important; }



/* =========================================================
   v2.0.2 • Final patches (click-only readouts + spacing + bar labels + price scale)
   ========================================================= */

/* Chart readouts: show only during interaction */
.chart-readout{
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
}
.chart-readout.show{
  opacity: 1;
  transform: none;
}

/* Bars: keep 0 left and target right under bar, gear centered */
.bar-values{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 8px;
}
.bar-values .left{ grid-column: 1; justify-self: start; }
.bar-values .right{ grid-column: 3; justify-self: end; }
.bar-values .target-gear{ grid-column: 2; justify-self: center; margin: 0; }

/* Make the 1D Price Chart card taller for readability */
.stake-chart-wrap, .reward-chart-wrap{ height: 220px; }
.chart-card{ height: 260px; }
@media (max-width: 520px){
  .stake-chart-wrap, .reward-chart-wrap{ height: 210px; }
  .chart-card{ height: 240px; }
}


/* Price chart timeframes */
.price-tf{ margin-top: 10px; }



/* ===== Connection status (top-right) ===== */
.connection-status{
  position: relative;
}
.connection-status.conn-offline .status-dot{
  background: var(--red) !important;
  box-shadow: 0 0 0 0 rgba(239,68,68,.45), 0 0 18px rgba(239,68,68,.35);
}
.connection-status.conn-loading .status-dot{
  background: var(--amber) !important;
  box-shadow: 0 0 0 0 rgba(245,158,11,.45), 0 0 18px rgba(245,158,11,.35);
}
.connection-status.conn-online .status-dot{
  background: var(--green) !important;
  box-shadow: 0 0 0 0 rgba(34,197,94,.45), 0 0 18px rgba(34,197,94,.35);
}
@keyframes statusPulse{
  0%{ transform: scale(1); filter: brightness(1); }
  45%{ transform: scale(1.25); filter: brightness(1.18); }
  100%{ transform: scale(1); filter: brightness(1); }
}

/* ===== Card order UI (Settings) ===== */
.card-order-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.order-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
body[data-theme="light"] .order-row{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
}
.order-name{
  font-weight: 950;
  letter-spacing: .2px;
}
.order-actions{
  display:flex;
  gap: 8px;
}
.order-btn{
  width: 38px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  font-weight: 950;
}
body[data-theme="light"] .order-btn{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
}
.order-btn:active{ transform: translateY(1px); }

.card-order-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 12px;
}
.mini-btn.primary{
  border-color: rgba(250,204,21,.30);
  background: rgba(250,204,21,.14);
}
body[data-theme="light"] .mini-btn.primary{
  border-color: rgba(245,158,11,.28);
  background: rgba(245,158,11,.12);
}

/* ===== Total reward accumulate ===== */
.totalreward-card .micro-hint{
  margin-top: 10px;
  opacity:.70;
  font-weight: 850;
  font-size: .88rem;
}

/* Ensure Advanced settings header stays readable in all themes */
.acc-head{
  color: inherit;
  opacity: 1;
}

/* ===== View mode: PRO / LITE ===== */
body[data-view="pro"]{}

/* LITE = solo numeri, layout più compatto */
body[data-view="lite"] .cards-wrapper{ gap: .78rem; }
body[data-view="lite"] .card{ padding: 12px; }
body[data-view="lite"] .value-row{ font-size: 1.55rem; }
body[data-view="lite"] .sub-row{ margin-top: 4px; }

/* Nascondi elementi "pro" (grafici/barre/controlli) */
body[data-view="lite"] .card-tools,
body[data-view="lite"] .bar-container,
body[data-view="lite"] .bar-values,
body[data-view="lite"] .stake-chart-wrap,
body[data-view="lite"] .reward-chart-wrap,
body[data-view="lite"] .apr-chart-wrap,
body[data-view="lite"] .networth-chart,
body[data-view="lite"] .networth-tf,
body[data-view="lite"] .networth-top2,
body[data-view="lite"] #priceChartCard,
body[data-view="lite"] .tf-switch,
body[data-view="lite"] .chart-overlay,
body[data-view="lite"] canvas{
  display:none !important;
}

body[data-view="lite"] .reward-tools,
body[data-view="lite"] .reward-timeline,
body[data-view="lite"] .reward-estimates,
body[data-view="lite"] .stake-tools,
body[data-view="lite"] .stake-timeline{
  display:none !important;
}


/* Net Worth in LITE: spazio coerente */
body[data-view="lite"] .networth-metrics{ margin-top: 8px; }

/* ===== 1D Price Chart: keep timeframe buttons inside the card ===== */
#priceChartCard{
  height: auto !important;         /* let it grow to fit */
  min-height: 320px;
  padding-bottom: 14px;
}
#priceChartCard #priceChart{
  height: 260px !important;        /* fixed plot area so tf buttons don't overflow */
}
#priceChartCard .price-tf{
  margin-top: 12px;
}
@media (max-width: 520px){
  #priceChartCard{ min-height: 300px; }
  #priceChartCard #priceChart{ height: 230px !important; }
}

/* ===== Beam direction (LTR / RTL) ===== */
.bar-fill{ position:relative; }
.bar-fill::after{ width:160%; }

/* Default LTR if nothing set */
.bar-fill{ --beam-anim: beamSweepLTR; }
.bar-fill::after{ animation: var(--beam-anim) 1.6s ease-in-out infinite; }

.bar-fill[data-beam="ltr"]{ --beam-anim: beamSweepLTR; }
.bar-fill[data-beam="rtl"]{ --beam-anim: beamSweepRTL; }

@keyframes beamSweepLTR{
  0%{ transform: translateX(-100%); opacity:.30; }
  100%{ transform: translateX(0%); opacity:.70; }
}
@keyframes beamSweepRTL{
  0%{ transform: translateX(0%); opacity:.30; }
  100%{ transform: translateX(-100%); opacity:.70; }
}
  50%{ transform: translateX(-10%); opacity:.75; }
  100%{ transform: translateX(-70%); opacity:.35; }
}



/* ===== Market ticker (top) ===== */
.market-ticker{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 .65rem 0;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}
body.light .market-ticker{
  background: rgba(15,23,42,.035);
  border-color: rgba(15,23,42,.10);
}
.market-ticker::before,
.market-ticker::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 34px;
  pointer-events:none;
  z-index: 2;
}
.market-ticker::before{
  left:0;
  background: linear-gradient(90deg, rgba(2,6,23,.92), rgba(2,6,23,0));
}
.market-ticker::after{
  right:0;
  background: linear-gradient(270deg, rgba(2,6,23,.92), rgba(2,6,23,0));
}
body.light .market-ticker::before{
  background: linear-gradient(90deg, rgba(248,250,252,.96), rgba(248,250,252,0));
}
body.light .market-ticker::after{
  background: linear-gradient(270deg, rgba(248,250,252,.96), rgba(248,250,252,0));
}

.ticker-viewport{
  overflow: hidden;
}
.ticker-track{
  display:flex;
  align-items:center;
  gap: 18px;
  padding: .6rem .9rem;
  white-space: nowrap;
  will-change: transform;
  animation: tickerMove var(--ticker-dur, 42s) linear infinite;
}
.ticker-track.js-ticker{
  animation: none !important;
}

.market-ticker:hover .ticker-track{
  animation-play-state: paused;
}
@keyframes tickerMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation: none; }
}

.ticker-item{
  display:flex;
  align-items:baseline;
  gap: .55rem;
  font-variant-numeric: tabular-nums;
}
.ticker-k{
  font-size: .74rem;
  letter-spacing:.10em;
  text-transform: uppercase;
  opacity: .72;
}
.ticker-v{
  display:flex;
  align-items:baseline;
  gap: .4rem;
  font-size: .95rem;
  font-weight: 900;
}
.ticker-v .arrow{ font-size: .84rem; }
.ticker-v .pct{
  font-size: .78rem;
  font-weight: 950;
  opacity: .85;
}
.ticker-v .num{
  font-weight: 950;
}

.ticker-v .num.text{
  display:inline-block;
  max-width: 220px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 520px){
  .ticker-v .num.text{ max-width: 140px; }
}
@media (max-width: 520px){
  .ticker-track{ padding: .55rem .75rem; gap: 14px; }
  .ticker-v{ font-size: .92rem; }
  .ticker-k{ font-size: .70rem; }
}

}

/* ===== Mobile search: no overlap with centered title ===== */
@media (max-width: 560px){
  .header-center{ padding: 0 64px; } /* space for menu + search */
  .search-wrap{ max-width: 44px; }
  .search-wrap input{
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin-left: 0 !important;
  }
  .search-wrap.open{ max-width: none; }
  .search-wrap.open input{
    width: min(62vw, 320px) !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin-left: 8px !important;
  }
  body.light .search-wrap.open input{
    border-color: rgba(15,23,42,.16) !important;
  }
}

/* ===== Drawer: hidden by default, opens on menu icon ===== */
.drawer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: min(320px, 86vw);
  transform: translateX(-110%);
  transition: transform .22s ease;
  z-index: 60;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.drawer-open .drawer{
  transform: translateX(0);
}
.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 50;
}
body.drawer-open .backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* ===== Bars: stronger luminous glow everywhere ===== */
.bar-container{
  position: relative;
  overflow: hidden;
}
.bar-fill{
  box-shadow:
    0 0 18px rgba(250,204,21,.26),
    0 0 34px rgba(56,189,248,.16),
    0 0 52px rgba(236,72,153,.10);
}
body.light .bar-fill{
  box-shadow:
    0 0 16px rgba(59,130,246,.20),
    0 0 26px rgba(34,197,94,.14),
    0 0 44px rgba(249,115,22,.10);
}
.bar-line{
  box-shadow: 0 0 18px rgba(250,204,21,.28);
}
.open-marker{
  box-shadow: 0 0 14px rgba(250,204,21,.30);
}


/* ===== Mobile: when search is open, shrink & move title left ===== */
@media (max-width: 560px){
  body.searching .header-center{
    grid-column: 1;
    justify-self: start;
    text-align: left;
    padding: 0 0 0 8px;
  }
  body.searching .brand-title .title-full{ display:none; }
  body.searching .brand-title .title-compact{ display:inline; }
  body.searching .subtitle{ display:none; }
}

/* ===== Bars (glow + beam, clipped to fill) ===== */
.bar-container{
  margin-top: 12px;
  height: 18px;
  border-radius: 999px;
  background: var(--bar-dark);
  position: relative;
  overflow: hidden;
}
body[data-theme="light"] .bar-container{ background: var(--bar-light); }

/* Fill */
.bar-fill{
  position:absolute;
  top:0; bottom:0;
  left:0;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,197,94,.75), rgba(16,185,129,.30));
  box-shadow:
    0 0 16px rgba(250,204,21,.22),
    0 0 28px rgba(34,197,94,.22),
    0 0 52px rgba(34,197,94,.12);
  filter: saturate(1.25);
  overflow:hidden; /* IMPORTANT: clip beam to fill width */
  --beam-anim: beamSweepLTR;
}

/* Variants */
.stake-fill{
  background: linear-gradient(90deg, rgba(34,197,94,.80), rgba(16,185,129,.34));
  box-shadow: 0 0 18px rgba(34,197,94,.34), 0 0 52px rgba(34,197,94,.16);
}
.reward-fill{
  background: linear-gradient(90deg, rgba(56,189,248,.80), rgba(59,130,246,.28));
  box-shadow: 0 0 18px rgba(56,189,248,.32), 0 0 56px rgba(56,189,248,.16);
}
/* price timeframe bars (center-based) */
.price-bar-container .bar-fill,
.week-bar-container .bar-fill,
.month-bar-container .bar-fill,
.year-bar-container .bar-fill,
.annual-bar-container .bar-fill{
  background: linear-gradient(90deg, rgba(250,204,21,.78), rgba(59,130,246,.22));
  box-shadow: 0 0 16px rgba(250,204,21,.30), 0 0 52px rgba(250,204,21,.16);
}

/* Soft sheen over the fill */
.bar-fill::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
  opacity: .55;
  pointer-events:none;
}

/* Moving beam (continuous, no visible restart) */
.bar-fill::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: repeating-linear-gradient(90deg,
    rgba(250,204,21,0) 0%,
    rgba(250,204,21,0) 32%,
    rgba(250,204,21,.62) 45%,
    rgba(250,204,21,0) 58%,
    rgba(250,204,21,0) 100%
  );
  background-size: 240px 100%;
  filter: blur(10px);
  opacity: .52;
  pointer-events:none;
  animation: var(--beam-anim) 1.65s linear infinite;
}

/* Default LTR (can be flipped from JS with data-beam="rtl") */
.bar-fill{ --beam-anim: beamFlowLTR; }
.bar-fill[data-beam="ltr"]{ --beam-anim: beamFlowLTR; }
.bar-fill[data-beam="rtl"]{ --beam-anim: beamFlowRTL; }

@keyframes beamFlowLTR{
  from{ background-position: 0 0; }
  to{ background-position: -240px 0; }
}
@keyframes beamFlowRTL{
  from{ background-position: 0 0; }
  to{ background-position: 240px 0; }
}
  100%{ transform: translateX(-100%); opacity:.72; }
}

/* Center/open line for price bars */
.bar-line{
  position:absolute;
  top: -6px;
  width: 2px;
  height: 30px;
  background: rgba(250,204,21,.92);
  left: 50%;
  box-shadow: 0 0 18px rgba(250,204,21,.30);
}
.open-marker{
  position:absolute;
  top:-5px;
  left:50%;
  transform: translateX(-50%);
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(250,204,21,.92);
  box-shadow: 0 0 14px rgba(250,204,21,.32);
}

/* % label on stake/reward */
.bar-pct{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  color: rgba(249,250,251,.92);
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
  pointer-events:none;
}
body[data-theme="light"] .bar-pct{ color: rgba(15,23,42,.92); text-shadow:none; }


/* ===== Footer ===== */
.app-footer{
  text-align:center;
  padding: 18px 12px 26px;
  font-size: .92rem;
  opacity: .65;
}

/* ===== Layout tweak: give more vertical space to Net Worth + Price Chart (no structure changes) ===== */
.networth-chart{ height: 270px; }
#priceChartCard{ min-height: 340px; }
#priceChart{ height: 260px !important; }

@media (max-width: 560px){
  .networth-chart{ height: 255px; }
  #priceChartCard{ min-height: 360px; } /* more room for tf row on mobile */
  #priceChart{ height: 250px !important; }
}
/* Flash green feedback (new rewards / positive updates) */
.flash-green{
  animation: flashGreen 950ms ease-out 1;
}
@keyframes flashGreen{
  0%{ color: inherit; text-shadow: none; }
  10%{ color: var(--green); text-shadow: 0 0 14px rgba(34,197,94,.55); }
  60%{ color: var(--green); text-shadow: 0 0 10px rgba(34,197,94,.40); }
  100%{ color: inherit; text-shadow: none; }
}


/* Tools section */
#pageTools .page-title{ font-size:1.05rem; font-weight:800; margin: 0 0 .75rem; }
.tools-card .card-h{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.tools-row{ display:flex; align-items:center; gap:.75rem; margin-top:.65rem; }
.tools-label{ font-weight:800; opacity:.9; min-width:3rem; }
.tools-input{ flex:1; padding:.7rem .85rem; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.22); color:inherit; font-size:1rem; outline:none; }
.tools-input:focus{ border-color: rgba(250,204,21,.65); box-shadow:0 0 0 3px rgba(250,204,21,.15); }
.tools-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.7rem; margin-top:.75rem; }
.tools-kv{ padding:.6rem .7rem; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); }
.tools-k{ font-size:.78rem; opacity:.75; font-weight:800; }
.tools-v{ font-size:1.05rem; font-weight:900; margin-top:.1rem; }
.tools-fg-top{ display:flex; align-items:center; gap:.9rem; margin-top:.5rem; }
.tools-fg-score{ font-size:2.2rem; font-weight:1000; letter-spacing:-.5px; }
.tools-fg-label{ font-weight:900; }
.tools-fg-upd{ opacity:.7; font-size:.85rem; margin-top:.1rem; }
.tools-chart-wrap{ margin-top:.75rem; padding:.4rem; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.16); }
.tools-tf{ display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.55rem; }
.tf-btn{ padding:.4rem .7rem; }
.tf-btn.active{ box-shadow:0 0 0 2px rgba(250,204,21,.22) inset; }
.tools-vol{ display:grid; grid-template-columns: 1.3fr .95fr; gap:1rem; margin-top:.8rem; }
.tools-vol-track{ position:relative; height:16px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; border:1px solid rgba(255,255,255,.12); }
.tools-vol-fill{ position:absolute; inset:0 auto 0 0; width:0%; background:rgba(250,204,21,.55); transition: width .55s cubic-bezier(.22,1,.36,1); }
.tools-vol-needle{ position:absolute; top:-7px; width:3px; height:30px; left:0%; background:rgba(249,250,251,.9); border-radius:999px; transform: translateX(-50%); transition:left .55s cubic-bezier(.22,1,.36,1); box-shadow:0 0 10px rgba(249,250,251,.35); }
.tools-vol-labels{ display:flex; justify-content:space-between; margin-top:.45rem; font-size:.78rem; opacity:.75; font-weight:800; }
@media (max-width: 820px){
  .tools-vol{ grid-template-columns: 1fr; }
}


/* ===== Tools PRO layout ===== */
.tools-wrap{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: var(--gap, 1.05rem);
}
#toolsConverterCard{ grid-column: span 6; }
#toolsFgCard{ grid-column: span 6; }
#toolsVolCard{ grid-column: span 12; }

.pro-card{
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.30);
}
.tools-card .card-h{
  padding-bottom:.55rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom:.7rem;
}
.tools-chart-wrap{ height: 170px; }
.tools-chart-wrap canvas{ width:100% !important; height:100% !important; display:block; }

.tools-fg-score{
  line-height:1;
}
.tools-fg-score{
  font-variant-numeric: tabular-nums;
}
.tools-vol-track{
  height:18px;
}
.tools-vol-fill{
  background: linear-gradient(90deg, rgba(34,197,94,.55), rgba(250,204,21,.60), rgba(239,68,68,.55));
}
@media (max-width: 980px){
  #toolsConverterCard,#toolsFgCard{ grid-column: span 12; }
}


/* Cloud Sync status pill */
.cloud-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.28rem .55rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:800;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.cloud-pill::before{
  content:"";
  width:9px;height:9px;border-radius:999px;
  background: rgba(255,255,255,.25);
}
.cloud-pill.online::before{ background: var(--green, #22c55e); box-shadow:0 0 10px rgba(34,197,94,.55); }
.cloud-pill.loading::before{ background: var(--yellow, #facc15); box-shadow:0 0 10px rgba(250,204,21,.55); }
.cloud-pill.offline::before{ background: var(--red, #ef4444); box-shadow:0 0 10px rgba(239,68,68,.55); }


/* Fear & Greed bar */
.fg-bar{ margin-top:.75rem; }
.fg-track{
  position:relative;
  height:18px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}
.fg-fill{
  position:absolute; inset:0 auto 0 0;
  width:0%;
  background: linear-gradient(90deg,
    rgba(239,68,68,.55),
    rgba(245,158,11,.55),
    rgba(250,204,21,.55),
    rgba(34,197,94,.55),
    rgba(59,130,246,.55)
  );
  transition: width .55s cubic-bezier(.22,1,.36,1);
}
.fg-needle{
  position:absolute;
  top:-7px;
  width:3px;
  height:30px;
  left:0%;
  background: rgba(249,250,251,.9);
  border-radius:999px;
  transform: translateX(-50%);
  transition: left .55s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 10px rgba(249,250,251,.35);
}
.fg-labels{
  display:flex;
  justify-content:space-between;
  margin-top:.45rem;
  font-size:.78rem;
  opacity:.75;
  font-weight:800;
  gap:.5rem;
}
.fg-labels span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* ===== Fear & Greed PRO alignment ===== */
#toolsFgCard{ overflow:hidden; }
#toolsFgCard .tools-fg-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.9rem;
  flex-wrap:nowrap;
}
#toolsFgCard .tools-fg-score{
  flex:0 0 auto;
  min-width:3.2rem;
  text-align:left;
}
#toolsFgCard .tools-fg-meta{
  flex:1 1 auto;
  min-width:0;
}
#toolsFgCard .tools-fg-label{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#toolsFgCard .tools-fg-upd{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#toolsFgCard .fg-tf{
  margin-top:.7rem;
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}
#toolsFgCard .fg-bar{ margin-top:.75rem; }
#toolsFgCard .fg-track{ width:100%; }
#toolsFgCard .fg-labels{
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  margin-top:.45rem;
  width:100%;
}
#toolsFgCard .fg-labels span{
  flex:1 1 0;
  text-align:center;
  font-size:.74rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width: 420px){
  #toolsFgCard .tools-fg-top{ gap:.65rem; }
  #toolsFgCard .tools-fg-score{ font-size:1.9rem; }
  #toolsFgCard .fg-labels span{ font-size:.68rem; }
}


/* ================= Extras: Fees + Price arrow + ATH/ATL blink ================= */
.arrow.dir{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:.55rem;
  font-size:1.05rem;
  transform: translateY(-1px);
  opacity:.9;
}
.arrow.dir.up{ color: var(--green); }
.arrow.dir.down{ color: var(--red); }
.arrow.dir.flat{ color: rgba(249,250,251,.55); }

@keyframes blinkYellow{
  0%, 49% { color: var(--yellow); text-shadow: 0 0 10px rgba(250,204,21,.35); }
  50%, 100% { color: rgba(250,204,21,.18); text-shadow: none; }
}
.blink-yellow{
  animation: blinkYellow .9s steps(2,end) infinite;
}

.fees-card .micro-hint{ margin-top:.2rem; }
.fees-card .reward-chart-wrap{ margin-top:.55rem; height: 170px; }
.fees-card .mini-value{ font-variant-numeric: tabular-nums; }

.flash-yellow{ animation: flashYellow .7s ease; }
@keyframes flashYellow{
  0%{ box-shadow: 0 0 0 rgba(250,204,21,0); }
  40%{ box-shadow: 0 0 18px rgba(250,204,21,.55); }
  100%{ box-shadow: 0 0 0 rgba(250,204,21,0); }
}


/* ================= Backup & Restore ================= */
#cardBackup .settings-value{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; justify-content:flex-end; }
#cardBackup .settings-file{
  width: 220px;
  max-width: 62vw;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: inherit;
}
body[data-theme="light"] #cardBackup .settings-file{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
}
@media (max-width: 420px){
  #cardBackup .settings-file{ width: 100%; max-width: 100%; }
  #cardBackup .settings-value{ justify-content:flex-start; }
}


/* ===== PATCH: Market ticker mobile overflow + no side fade ===== */
.market-ticker::before,
.market-ticker::after{
  content:none !important;
  display:none !important;
}

html, body{
  overflow-x: hidden;
}

.market-ticker,
.ticker-viewport{
  width: 100%;
  max-width: 100%;
}

.ticker-viewport{
  position: relative;
  contain: layout paint;
}

.ticker-track{
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

/* Wallet copy button (in header) */
.address-display{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
}
.address-display .addr-copy{
  width: 34px;
  height: 34px;
  border-radius: 12px;
}



/* =========================================================
   v2.0.2 • UI patches (dual timeline + reward estimates + refresh icon)
   ========================================================= */

.conn-refresh{
  width: 34px;
  height: 34px;
  margin-left: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  display: none;
  place-items: center;
  cursor: pointer;
  font-weight: 950;
  line-height: 1;
}
body[data-theme="light"] .conn-refresh{
  border-color: rgba(15,23,42,.14);
  background: rgba(15,23,42,.06);
}
.connection-status.has-refresh .conn-refresh{ display: grid; }
.connection-status .conn-refresh:active{ transform: scale(.98); }
.connection-status.conn-offline .conn-refresh{ opacity: .70; }
.connection-status.conn-loading .conn-refresh{ opacity: .80; }

/* Dual range slider (two handles) */
.dual-range{
  position: relative;
  height: 34px;
  width: 100%;
  margin-top: 2px;
}
.dual-track{
  position:absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
}
body[data-theme="light"] .dual-track{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.10);
}
.dual-fill{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  border-radius: 999px;
  left: 0;
  width: 0%;
  background: rgba(250,204,21,.28);
  box-shadow: 0 0 18px rgba(250,204,21,.14);
  pointer-events: none;
}
.dual-range-input{
  position:absolute;
  left: 0; top: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  touch-action: none;
}

/* Allow grabbing either thumb even with overlapped inputs */
.dual-range-input::-webkit-slider-thumb{ pointer-events: auto; }
.dual-range-input::-moz-range-thumb{ pointer-events: auto; }

.dual-range-input.start{ z-index: 2; }
.dual-range-input.end{ z-index: 3; }

.dual-range-input::-webkit-slider-runnable-track{
  width: 100%;
  height: 34px;
  background: transparent;
  border: none;
}
.dual-range-input::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(250,204,21,.92);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 0 14px rgba(250,204,21,.35);
  margin-top: 9px;
  cursor: pointer;
}
.dual-range-input.start::-webkit-slider-thumb{
  background: rgba(249,250,251,.72);
  box-shadow: 0 0 12px rgba(249,250,251,.18);
}
body[data-theme="light"] .dual-range-input.start::-webkit-slider-thumb{
  background: rgba(15,23,42,.70);
  border-color: rgba(255,255,255,.70);
  box-shadow: 0 0 12px rgba(15,23,42,.12);
}

.dual-range-input::-moz-range-track{
  width: 100%;
  height: 34px;
  background: transparent;
  border: none;
}
.dual-range-input::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(250,204,21,.92);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 0 14px rgba(250,204,21,.35);
  cursor: pointer;
}
.dual-range-input.start::-moz-range-thumb{
  background: rgba(249,250,251,.72);
  box-shadow: 0 0 12px rgba(249,250,251,.18);
}
body[data-theme="light"] .dual-range-input.start::-moz-range-thumb{
  background: rgba(15,23,42,.70);
  border-color: rgba(255,255,255,.70);
  box-shadow: 0 0 12px rgba(15,23,42,.12);
}

/* Reward estimates section */
.reward-estimates{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
body[data-theme="light"] .reward-estimates{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
}
.est-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.est-title{ font-weight: 950; letter-spacing: .2px; }
.est-sub{ opacity: .72; font-weight: 850; font-size: .84rem; }

.est-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 900px){
  .est-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .est-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.est-item{
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
body[data-theme="light"] .est-item{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
}
.est-item .k{ opacity:.72; font-weight: 900; font-size: .82rem; }
.est-item .v{ margin-top: 5px; font-weight: 950; }
.est-item .u{ margin-top: 3px; opacity: .75; font-weight: 850; font-size: .82rem; }

/* Make Rewards card breathe a bit more */
.rewards-card .reward-chart-wrap{ height: 240px; }
@media (max-width: 520px){
  .rewards-card .reward-chart-wrap{ height: 230px; }
}


/* =========================================================
   v2.0.2 • Total Asset Management (TAM) card
   ========================================================= */
.tam-mini{ margin-top: 10px; }
.tam-mini .nw-mini-right{
  display:flex;
  flex-direction: column;
  align-items:flex-end;
  justify-content:center;
  gap: 4px;
  text-align:right;
}
.tam-mini .nw-mini-qty{ font-size: 1.38rem; letter-spacing:.2px; }
@media (max-width: 520px){
  .tam-mini .nw-mini-qty{ font-size: 1.28rem; }
}
.tam-usd{
  font-weight: 900;
  opacity: .80;
  font-size: .98rem;
  white-space: nowrap;
}
.tam-usd .muted{ opacity:.65; margin-right: 6px; }

.tam-card .tam-chart-wrap{
  margin-top: 12px;
  height: 170px;
}
@media (max-width: 520px){
  .tam-card .tam-chart-wrap{ height: 160px; }
}



/* =========================================================
   v2.0.2 • Lightweight premium border pulse (performance-safe)
   Only border pulses (0% -> 100% -> 0%), no inner beam/fill
   ========================================================= */
:root{
  --card-fx-speed: 7.8s;
}

/* Keep existing accent colors per card and replace heavy comet effect with a light pulse */
.card{
  position: relative;
  isolation: isolate;
}

/* Per-card accent colors (RGB triplets) */
.card{ --accent: 59 130 246; }
#netWorthCard{ --accent: 59 130 246; }      /* blue */
#availableCard{ --accent: 6 182 212; }      /* cyan */
#stakedCard{ --accent: 34 197 94; }         /* green */
#rewardsCard{ --accent: 16 185 129; }       /* emerald */
#totalRewardsAccCard{ --accent: 168 85 247; } /* purple */
#feesCard{ --accent: 245 158 11; }          /* amber */
#aprCard{ --accent: 139 92 246; }           /* violet */
#validatorCard{ --accent: 99 102 241; }     /* indigo */
#tamCard{ --accent: 20 184 166; }           /* teal */
#injPriceCard{ --accent: 250 204 21; }      /* yellow */
#priceChartCard{ --accent: 96 165 250; }    /* sky */
#toolsConverterCard{ --accent: 244 114 182; } /* pink */
#toolsFgCard{ --accent: 251 146 60; }       /* orange */
#toolsVolCard{ --accent: 239 68 68; }       /* red */

/* Disable older heavy FX layers if present */
.card::after{
  display: none !important;
}

.card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  border: 1px solid rgb(var(--accent, 59 130 246) / 0.18);
  opacity: 0.18;
  box-shadow:
    0 0 0 0 rgb(var(--accent, 59 130 246) / 0),
    inset 0 0 0 0 rgb(var(--accent, 59 130 246) / 0);
  animation: cardBorderPulseSoft var(--card-fx-speed, 7.8s) cubic-bezier(.40,0,.20,1) infinite;
  animation-delay: 0s;
  will-change: opacity, box-shadow, border-color;
}

@keyframes cardBorderPulseSoft{
  0%, 100%{
    opacity: .10;
    border-color: rgb(var(--accent, 59 130 246) / .12);
    box-shadow:
      0 0 0 0 rgb(var(--accent, 59 130 246) / 0),
      inset 0 0 0 0 rgb(var(--accent, 59 130 246) / 0);
  }
  45%{
    opacity: .98;
    border-color: rgb(var(--accent, 59 130 246) / .98);
    box-shadow:
      0 0 14px 0 rgb(var(--accent, 59 130 246) / .28),
      inset 0 0 0.5px 0 rgb(var(--accent, 59 130 246) / .20);
  }
  62%{
    opacity: .66;
    border-color: rgb(var(--accent, 59 130 246) / .56);
    box-shadow:
      0 0 8px 0 rgb(var(--accent, 59 130 246) / .16),
      inset 0 0 0 0 rgb(var(--accent, 59 130 246) / .08);
  }
}

/* Sync all cards together (same phase/time) for a homogeneous pulse */
.card{ --card-fx-phase: 0s; }

/* FX OFF from settings */
body[data-card-fx="off"] .card::before{
  animation: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

@media (prefers-reduced-motion: reduce){
  .card::before{
    animation-duration: calc(var(--card-fx-speed, 7.8s) * 1.8) !important;
  }
}


/* target modal helper text */
.modal-help{ margin-top:.45rem; font-size:.82rem; opacity:.78; line-height:1.3; }