/* Accent effects, motion bits, personalize board */

html[data-accent="custom"] {
  --dash-primary: var(--dash-accent-custom, #2563eb);
}

html[data-anim~="scroll"] { scroll-behavior: smooth; }
html[data-anim~="scroll"] .dash-view,
html[data-anim~="scroll"] .dash-side {
  scroll-behavior: smooth;
}

html[data-anim~="click"] .btn,
html[data-anim~="click"] .settings-choice,
html[data-anim~="click"] .settings-tab-card,
html[data-anim~="click"] .list-row,
html[data-anim~="click"] .asset-row-pro,
html[data-anim~="click"] .dash-nav button,
html[data-anim~="click"] .tool-btn,
html[data-anim~="click"] .dash-chip,
html[data-anim~="click"] .dash-metric,
html[data-anim~="click"] .chat-fab,
html[data-anim~="click"] .fab-quick {
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
html[data-anim~="click"] .btn:active,
html[data-anim~="click"] .settings-choice:active,
html[data-anim~="click"] .settings-tab-card:active,
html[data-anim~="click"] .list-row:active,
html[data-anim~="click"] .asset-row-pro:active,
html[data-anim~="click"] .dash-nav button:active,
html[data-anim~="click"] .tool-btn:active,
html[data-anim~="click"] .dash-chip:active,
html[data-anim~="click"] .dash-metric:active,
html[data-anim~="click"] .chat-fab:active,
html[data-anim~="click"] .fab-quick:active {
  transform: scale(0.97);
}

html[data-anim~="hover"] .ui-card,
html[data-anim~="hover"] .bento-card,
html[data-anim~="hover"] .settings-tab-card,
html[data-anim~="hover"] .glass-card {
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
html[data-anim~="hover"] .ui-card:hover,
html[data-anim~="hover"] .bento-card:hover,
html[data-anim~="hover"] .settings-tab-card:hover,
html[data-anim~="hover"] .glass-card:hover {
  transform: translateY(-2px);
}

html[data-anim~="page"] .view-in { animation: deskPageIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }
html:not([data-anim~="page"]) .view-in { animation: none !important; }

@keyframes deskPageIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

html[data-anim~="toast"] .toast,
html[data-anim~="toast"] .float-toast {
  animation: deskToastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes deskToastIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

html[data-anim~="cards"] .bento-card,
html[data-anim~="cards"] .settings-tab-card,
html[data-anim~="cards"] .ui-card {
  animation: deskCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html[data-anim~="cards"] .settings-tab-card:nth-child(1) { animation-delay: 0.02s; }
html[data-anim~="cards"] .settings-tab-card:nth-child(2) { animation-delay: 0.05s; }
html[data-anim~="cards"] .settings-tab-card:nth-child(3) { animation-delay: 0.08s; }
html[data-anim~="cards"] .settings-tab-card:nth-child(4) { animation-delay: 0.11s; }
html[data-anim~="cards"] .settings-tab-card:nth-child(5) { animation-delay: 0.14s; }
html[data-anim~="cards"] .settings-tab-card:nth-child(6) { animation-delay: 0.17s; }
html[data-anim~="cards"] .settings-tab-card:nth-child(7) { animation-delay: 0.2s; }
html[data-anim~="cards"] .settings-tab-card:nth-child(8) { animation-delay: 0.23s; }
@keyframes deskCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

html[data-anim~="modal"] #actionGuiHost > *,
html[data-anim~="modal"] #recvGuiHost > * {
  animation: deskModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes deskModalIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

html[data-anim~="nav"] .dash-nav button.on {
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Accent FX */
html[data-accent-fx="neon"] .btn-primary,
html[data-accent-fx="neon"] .settings-choice.on,
html[data-accent-fx="neon"] .settings-tab-card.on,
html[data-accent-fx="neon"] .dash-nav button.on {
  box-shadow: none;
}
html[data-accent-fx="pulse"] .btn-primary,
html[data-accent-fx="pulse"] .settings-swatch {
  animation: accentPulse 1.8s ease-in-out infinite;
}
@keyframes accentPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dash-primary) 0%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--dash-primary) 22%, transparent); }
}
html[data-accent-fx="aurora"] .btn-primary,
html[data-accent-fx="aurora"] .settings-choice.on .settings-swatch,
html[data-accent-fx="aurora"] .settings-tab-card.on {
  animation: accentHue 9s linear infinite;
}
html[data-accent-fx="prism"] .btn-primary,
html[data-accent-fx="prism"] .settings-choice.on {
  animation: accentHue 3.2s linear infinite;
}
@keyframes accentHue {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}
html[data-accent-fx="shimmer"] .btn-primary,
html[data-accent-fx="shimmer"] .settings-tab-card.on {
  background-image: linear-gradient(110deg, transparent 20%, color-mix(in srgb, #fff 35%, transparent) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: accentShimmer 2.4s ease infinite;
}
@keyframes accentShimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
html[data-accent-fx="halo"] .settings-choice.on,
html[data-accent-fx="halo"] .settings-tab-card.on,
html[data-accent-fx="halo"] .btn-primary {
  outline: 6px solid color-mix(in srgb, var(--dash-primary) 18%, transparent);
  outline-offset: 2px;
}
html[data-accent-fx="ember"] .btn-primary {
  animation: accentEmber 1.1s ease-in-out infinite;
}
@keyframes accentEmber {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18) saturate(1.2); }
}
html[data-accent-fx="tide"] {
  animation: accentTide 6s ease-in-out infinite;
}
@keyframes accentTide {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.35); }
}
html[data-accent-fx="laser"] .settings-choice.on::after,
html[data-accent-fx="laser"] .settings-tab-card.on::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 2px;
  background: var(--dash-primary);
  transform-origin: left;
  animation: accentLaser 1.6s ease-in-out infinite;
}
html[data-accent-fx="laser"] .settings-choice.on,
html[data-accent-fx="laser"] .settings-tab-card.on { position: relative; }
@keyframes accentLaser {
  0%, 100% { transform: scaleX(0.2); opacity: 0.4; }
  50% { transform: scaleX(1); opacity: 1; }
}
html[data-accent-fx="orbit"] .settings-choice.on,
html[data-accent-fx="orbit"] .btn-primary {
  background-image: conic-gradient(from var(--orbit, 0deg), var(--dash-primary), transparent 40%, var(--dash-primary));
  animation: accentOrbit 2.8s linear infinite;
}
@keyframes accentOrbit {
  to { --orbit: 360deg; }
}
html[data-accent-fx="spark"] .settings-choice:hover,
html[data-accent-fx="spark"] .btn-primary:hover {
  box-shadow: 0 0 0 1px var(--dash-primary), 2px -6px 0 -4px var(--dash-primary), -8px 4px 0 -5px var(--dash-primary), 10px 8px 0 -6px var(--dash-primary);
}

.personalize-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.personalize-board > .ui-card.personalize-wide { grid-column: 1 / -1; }
.accent-wheel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--dash-line);
  border-radius: 16px;
  background: var(--dash-bg);
}
.accent-wheel-row input[type="color"] {
  width: 52px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.accent-wheel-row .accent-hex {
  width: 110px;
  font-family: ui-monospace, monospace;
}
.anim-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.anim-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--dash-line);
  border-radius: 14px;
  background: var(--dash-bg);
}
.anim-row b { display: block; font-size: 13px; }
.anim-row small { display: block; margin-top: 2px; color: var(--dash-muted); font-size: 11px; }
.anim-row .anim-kind {
  display: inline-block;
  margin-right: 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dash-primary);
}
.fx-preview {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dash-primary);
  flex: none;
}

@media (max-width: 900px) {
  .personalize-board { grid-template-columns: 1fr; }
  .personalize-board > .ui-card.personalize-wide { grid-column: auto; }
}

/* Personalization studio */
.fx-studio { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.fx-studio-masters,
.fx-studio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.fx-master {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}
.fx-master > span,
.fx-mini > span {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dash-muted);
  font-weight: 700;
}
.fx-seg {
  display: inline-flex;
  border: 1px solid var(--dash-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--dash-bg);
}
.fx-seg button {
  border: 0;
  background: transparent;
  color: var(--dash-text);
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.fx-seg button + button { border-left: 1px solid var(--dash-line); }
.fx-seg button.on {
  background: var(--dash-primary);
  color: #fff;
}
.fx-seg-sm button { padding: 6px 10px; font-size: 12px; }
.fx-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fx-cat-pill {
  border: 1px solid var(--dash-line);
  background: var(--dash-bg);
  color: inherit;
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.fx-cat-pill.on {
  background: var(--dash-primary);
  color: #fff;
  border-color: transparent;
}
.pz-block + .pz-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--dash-line);
}
.pz-block h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 750;
}
.pz-block > .app-muted { margin: 0 0 10px; }
.fx-master select,
.fx-mini select,
.fx-preset-name {
  height: 38px;
  border: 1px solid var(--dash-line);
  border-radius: 12px;
  background: var(--dash-bg);
  color: inherit;
  padding: 0 10px;
  font: inherit;
}
.fx-filter-bar {
  flex: 1;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--dash-line);
  border-radius: 12px;
  background: var(--dash-bg);
  font-size: 13px;
  font-weight: 650;
}
.fx-list {
  max-height: 520px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}
.fx-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 118px 168px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--dash-line);
  border-radius: 14px;
  background: var(--dash-bg);
}
.fx-row-icon { font-size: 18px; text-align: center; }
.fx-row-copy b { font-size: 13px; font-weight: 650; }
.fx-mini { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fx-mini-wide { grid-column: 1 / -1; }
.fx-mini textarea {
  width: 100%;
  border: 1px solid var(--dash-line);
  border-radius: 12px;
  background: var(--dash-bg);
  color: inherit;
  padding: 8px 10px;
  font: 12px/1.4 ui-monospace, monospace;
  resize: vertical;
}
.fx-profile-extras {
  border: 1px dashed var(--dash-line);
  border-radius: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--dash-primary) 6%, var(--dash-bg));
}
.fx-extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.fx-studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.fx-preset-name { width: 150px; }
.fx-studio-status {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--dash-line);
  background: color-mix(in srgb, var(--dash-panel) 88%, transparent);
  backdrop-filter: blur(12px);
  font-size: 12px;
  color: var(--dash-muted);
}
.fx-studio-status.flash {
  color: var(--dash-primary);
  border-color: color-mix(in srgb, var(--dash-primary) 45%, var(--dash-line));
}
@media (max-width: 820px) {
  .fx-row { grid-template-columns: 32px minmax(0, 1fr); }
  .fx-row .fx-mini { grid-column: 1 / -1; }
}

#toastHost {
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
#toastHost .toast {
  position: static;
  transform: none;
  pointer-events: auto;
  animation: deskToastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html[data-fx~="toastSlide"] #toastHost .toast {
  animation: fxToastSlide 0.35s ease both;
}
@keyframes fxToastSlide {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

/* New motion + feedback */
html[data-fx~="scrollSmooth"] { scroll-behavior: smooth; }
html[data-fx~="scrollSmooth"] .dash-view,
html[data-fx~="scrollSmooth"] .dash-side { scroll-behavior: smooth; }
html[data-fx~="pageEnter"] .view-in { animation: deskPageIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }
html[data-fx~="pageZoom"] .view-in { animation: fxPageZoom 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes fxPageZoom {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}
html[data-fx~="pageExit"] .view-out { animation: fxPageOut 0.28s ease both; }
@keyframes fxPageOut {
  to { opacity: 0; transform: translateY(-10px); }
}
html[data-fx~="hoverLift"] .ui-card:hover,
html[data-fx~="hoverLift"] .bento-card:hover,
html[data-fx~="hoverLift"] .glass-card:hover { transform: translateY(-2px); }
html[data-fx~="hoverGlow"] .ui-card:hover,
html[data-fx~="hoverGlow"] .btn:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dash-primary) 40%, transparent), 0 10px 28px color-mix(in srgb, var(--dash-primary) 18%, transparent);
}
html[data-fx~="hoverScale"] .list-row:hover,
html[data-fx~="hoverScale"] .settings-choice:hover,
html[data-fx~="hoverScale"] .dash-nav button:hover { transform: scale(1.02); }
html[data-fx~="clickSquish"] .btn:active,
html[data-fx~="clickSquish"] .settings-choice:active,
html[data-fx~="clickSquish"] .list-row:active { transform: scale(0.97); }
html[data-fx~="clickRipple"] .btn.fx-ripple-run,
html[data-fx~="clickRipple"] .settings-choice.fx-ripple-run {
  animation: fxRipple 0.45s ease;
}
@keyframes fxRipple {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dash-primary) 45%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
html[data-fx~="cardStagger"] .ui-card,
html[data-fx~="cardStagger"] .bento-card,
html[data-fx~="cardStagger"] .settings-tab-card {
  animation: deskCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html[data-fx~="cardTilt"] .ui-card:hover {
  transform: perspective(700px) rotateX(var(--fx-tilt-y, 0deg)) rotateY(var(--fx-tilt-x, 0deg));
}
html[data-fx~="modalScale"] #actionGuiHost > *,
html[data-fx~="modalScale"] #recvGuiHost > * { animation: deskModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
html[data-fx~="modalSlide"] #actionGuiHost > *,
html[data-fx~="modalSlide"] #recvGuiHost > * { animation: fxModalSlide 0.32s ease both; }
@keyframes fxModalSlide {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
html[data-fx~="modalBlur"] #actionGuiHost,
html[data-fx~="modalBlur"] #recvGuiHost { backdrop-filter: blur(10px); }
html[data-fx~="listStagger"] .ledger-row,
html[data-fx~="listStagger"] .list-row,
html[data-fx~="listStagger"] .asset-row-pro {
  animation: deskCardIn 0.4s ease both;
}
html[data-fx~="listStagger"] .ledger-row:nth-child(n) { animation-delay: 0.03s; }
html[data-fx~="loadSkeleton"] .skeleton { animation: fxSkeleton 1.2s ease infinite; }
@keyframes fxSkeleton {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
html[data-fx~="loadProgress"] progress::-webkit-progress-value,
html[data-fx~="loadProgress"] .progress > span {
  transition: width 0.6s ease;
}
html[data-fx~="dropdownExpand"] .pop,
html[data-fx~="dropdownExpand"] .fab-menu {
  transform-origin: top right;
  animation: fxDrop 0.2s ease both;
}
@keyframes fxDrop {
  from { opacity: 0; transform: scaleY(0.86); }
  to { opacity: 1; transform: none; }
}
html[data-fx~="scrollParallax"] .dash-view { background-attachment: fixed; }
html[data-fx~="scrollSnap"] .dash-view { scroll-snap-type: y proximity; }
html[data-fx~="scrollSnap"] .page-section { scroll-snap-align: start; }

html[data-fx~="sidebarEase"] .dash-nav button.on {
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
html[data-fx~="sidebarSticky"] .dash-side { position: sticky; top: 0; }
html[data-fx~="tabUnderline"] .settings-tab-card.on {
  box-shadow: inset 0 -2px 0 var(--dash-primary);
}
html[data-fx~="tabUnderline"] .dash-nav button.on {
  box-shadow: none;
}
html[data-fx~="headerSticky"] .dash-top { position: sticky; top: 0; z-index: 12; }
html[data-fx~="headerShrink"] .dash-top { transition: padding 0.2s ease; }
html[data-fx~="pageHighlight"] .settings-tab-card.on { outline: 2px solid color-mix(in srgb, var(--dash-primary) 50%, transparent); }

html[data-fx~="btnSuccessPulse"] .btn-primary { transition: box-shadow 0.2s ease; }
html[data-fx~="btnSquish"] .btn:active { transform: scale(0.97); }
html[data-fx~="inputFocusGlow"] input:focus,
html[data-fx~="inputFocusGlow"] select:focus,
html[data-fx~="inputFocusGlow"] textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dash-primary) 28%, transparent);
  outline: none;
}
html[data-fx~="inputFocusGlow"] .dash-search input:focus {
  box-shadow: none;
}
html[data-fx~="inputShake"].fx-invalid,
html[data-fx~="inputShake"] input:invalid { animation: fxShake 0.35s ease; }
@keyframes fxShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
html[data-fx~="inputSuccess"] input:valid:not(:placeholder-shown) {
  border-color: #16a34a;
}
html[data-fx~="toggleGlow"] input[type="checkbox"]:checked + *,
html[data-fx~="checkBounce"] input[type="checkbox"]:checked { animation: fxBounce 0.35s ease; }
@keyframes fxBounce {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.12); }
  100% { transform: none; }
}
html[data-fx~="statusPulse"] .live-dot,
html[data-fx~="heartbeat"] .live-dot { animation: fxPulseDot 1.4s ease infinite; }
@keyframes fxPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.35); }
}
html[data-fx~="statusTransition"] .badge,
html[data-fx~="statusTransition"] .n-count { transition: background 0.35s ease, color 0.35s ease; }

html.fx-cursor-custom, html.fx-cursor-custom * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='8' cy='8' r='6' fill='%232563eb'/%3E%3C/svg%3E") 8 8, auto; }
.fx-cursor-trail {
  position: fixed;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 80;
  background: radial-gradient(circle, color-mix(in srgb, var(--dash-primary) 70%, #fff), transparent 70%);
  opacity: 0;
  transition: opacity 0.2s ease, left 0.08s linear, top 0.08s linear;
}
.fx-cursor-trail.on { opacity: 0.7; }
html[data-fx~="bgGradient"] body.dash-body {
  background-image: linear-gradient(120deg, color-mix(in srgb, var(--dash-primary) 18%, transparent), transparent 42%, color-mix(in srgb, var(--dash-primary) 10%, transparent));
  background-size: 200% 200%;
  animation: fxBgShift 12s ease infinite;
}
@keyframes fxBgShift {
  0%, 100% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
}
html[data-fx~="bgParticles"] body.dash-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--dash-primary) 35%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: fxFloat 16s linear infinite;
  opacity: 0.35;
}
@keyframes fxFloat { to { background-position: 42px 42px; } }
html[data-fx~="bgStars"][data-theme="dark"] body.dash-body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent);
  opacity: 0.35;
}
html.fx-glass-boost .glass-card,
html[data-fx~="bgGlass"] .glass-card {
  background: color-mix(in srgb, var(--dash-panel) 55%, transparent);
  backdrop-filter: blur(18px);
}
html.fx-seasonal .dash-top {
  box-shadow: inset 0 2px 0 color-mix(in srgb, #fb7185 55%, var(--dash-primary));
}
.fx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 90;
  background: var(--dash-primary);
}
.fx-back-top {
  position: fixed;
  right: 20px;
  bottom: 160px;
  z-index: 28;
  display: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--dash-panel);
  color: inherit;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  cursor: pointer;
}
.fx-back-top.show { display: inline-flex; }
html[data-fx~="notifPop"] .n-count:not(.hidden) { animation: fxBounce 0.45s ease; }
html[data-fx~="emptyAnim"] .empty-inline { animation: fxSkeleton 2s ease infinite; }

/* Profile */
#sideProfileName { color: var(--profile-text, inherit); }
html[data-profile-font="serif"] #sideProfileName { font-family: Georgia, "Times New Roman", serif; }
html[data-profile-font="mono"] #sideProfileName { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
html[data-profile-font="display"] #sideProfileName { font-family: "Playfair Display", Georgia, serif; letter-spacing: 0.01em; }
html[data-fx~="textGradient"] #sideProfileName,
html[data-name-fx="nameGradient"] #sideProfileName {
  background: linear-gradient(90deg, var(--dash-primary), #fff, var(--dash-primary));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-name-fx="nameSoftShadow"] #sideProfileName { text-shadow: 0 6px 16px rgba(0,0,0,0.35); }
html[data-name-fx="nameHardDrop"] #sideProfileName { text-shadow: 3px 3px 0 rgba(0,0,0,0.55); }
html[data-name-fx="nameEmbossed"] #sideProfileName { text-shadow: 0 1px 0 #fff, 0 -1px 0 #000; }
html[data-name-fx="nameOutline"] #sideProfileName,
html[data-fx~="textOutline"] #sideProfileName { -webkit-text-stroke: 1px var(--dash-primary); color: transparent; }
html[data-name-fx="nameNeon"] #sideProfileName,
html[data-fx~="textGlow"] #sideProfileName {
  color: #fff;
  text-shadow: 0 0 8px var(--dash-primary), 0 0 18px var(--dash-primary);
}
html[data-name-fx="nameAurora"] #sideProfileName { animation: accentHue 8s linear infinite; }
html[data-name-fx="nameInner"] #sideProfileName { text-shadow: 0 0 12px #fff, 0 0 2px var(--dash-primary); }
html[data-name-fx="namePulse"] #sideProfileName { animation: fxNamePulse 1.8s ease-in-out infinite; }
@keyframes fxNamePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}
html[data-name-fx="nameSheen"] #sideProfileName {
  background-image: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.7) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: accentShimmer 2.4s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-name-fx="nameSparkle"] #sideProfileName { animation: fxSpark 1.4s ease infinite; }
@keyframes fxSpark {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 8px var(--dash-primary)); }
}
html[data-name-fx="nameRainbow"] #sideProfileName { animation: accentHue 2.4s linear infinite; }
html[data-name-fx="nameFloat"] #sideProfileName { animation: fxFloatName 2.8s ease-in-out infinite; }
@keyframes fxFloatName {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
html[data-name-fx="nameGlitch"] #sideProfileName { animation: fxGlitch 2.2s steps(2) infinite; }
@keyframes fxGlitch {
  0%, 90%, 100% { text-shadow: none; transform: none; }
  92% { text-shadow: 2px 0 #f00, -2px 0 #0ff; transform: translateX(1px); }
}
html[data-name-fx="nameTypewriter"] #sideProfileName,
html[data-fx~="bioTypewriter"] .settings-control-note {
  overflow: hidden;
  white-space: nowrap;
  animation: fxType 1.8s steps(18) both;
}
@keyframes fxType {
  from { width: 0; }
  to { width: 100%; }
}
html[data-name-fx="nameWave"] #sideProfileName { animation: fxFloatName 1.1s ease-in-out infinite; }
html[data-name-fx="nameTilt"] #sideProfileName {
  transform: perspective(400px) rotateX(var(--fx-tilt-y, 0deg)) rotateY(var(--fx-tilt-x, 0deg));
}

.name-css-actions { margin-top: 4px; }
.name-css-picks { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }

html[data-name-cmd]:not([data-name-cmd="none"]) #sideProfileName {
  animation: none !important;
  background-image: none;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: none;
  transform: none;
  color: inherit;
}
html[data-name-cmd]:not([data-name-cmd="none"]):not([data-name-cmd="goldFlakes"]) .side-profile-first {
  position: relative;
  display: inline-block;
  font-weight: 700;
  isolation: isolate;
}
html[data-name-cmd="glitter"] .side-profile-first::after,
html[data-name-cmd="frost"] .side-profile-first::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  pointer-events: none;
}

.side-profile-flake-gif {
  display: none;
}
html[data-name-cmd="goldFlakes"] .side-profile-first {
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: #FFD700 !important;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}
html[data-name-cmd="goldFlakes"] .side-profile-flake-gif {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  image-rendering: pixelated;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

html[data-name-cmd="neonGold"] .side-profile-first {
  color: #FFD700 !important;
  text-shadow: 0 0 6px #ffd700, 0 0 16px #f59e0b, 0 0 28px rgba(255, 215, 0, 0.7);
}

html[data-name-cmd="chrome"] .side-profile-first {
  background-image: linear-gradient(180deg, #fff 0%, #cfd8e3 38%, #fff 52%, #8b95a5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4));
}

html[data-name-cmd="fire"] .side-profile-first {
  background-image: linear-gradient(90deg, #ff6a00, #ffd200, #ff1a00, #ff6a00);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: goldFlakePan 3s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255, 80, 0, 0.55));
}

html[data-name-cmd="ice"] .side-profile-first {
  background-image: linear-gradient(90deg, #e0f2fe, #7dd3fc, #38bdf8, #e0f2fe);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: goldFlakePan 5s linear infinite;
  filter: drop-shadow(0 0 8px rgba(125, 211, 252, 0.55));
}

html[data-name-cmd="holographic"] .side-profile-first {
  background-image: linear-gradient(90deg, #fb7185, #a78bfa, #38bdf8, #4ade80, #fbbf24, #fb7185);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: goldFlakePan 4s linear infinite;
}

html[data-name-cmd="glitter"] .side-profile-first {
  color: #f8fafc !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.45);
}
html[data-name-cmd="glitter"] .side-profile-first::after {
  background-image:
    radial-gradient(circle at 15% 30%, #fff 0.07em, transparent 0.1em),
    radial-gradient(circle at 55% 18%, #fde68a 0.06em, transparent 0.09em),
    radial-gradient(circle at 78% 70%, #fff 0.08em, transparent 0.11em),
    radial-gradient(circle at 32% 82%, #e9d5ff 0.06em, transparent 0.09em);
  background-size: 1.4em 1em;
  animation: goldFlakePan 2.8s linear infinite;
}

html[data-name-cmd="lava"] .side-profile-first {
  background-image: linear-gradient(90deg, #7f1d1d, #fb7185, #f97316, #7f1d1d);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: goldFlakePan 4.5s linear infinite;
  filter: drop-shadow(0 0 8px rgba(251, 113, 133, 0.5));
}

html[data-name-cmd="electric"] .side-profile-first {
  color: #7dd3fc !important;
  text-shadow: 0 0 6px #38bdf8, 0 0 18px #2563eb;
  animation: fxNamePulse 0.9s ease-in-out infinite;
}

html[data-name-cmd="candy"] .side-profile-first {
  background-image: linear-gradient(90deg, #fb7185, #f472b6, #c084fc, #fb7185);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: goldFlakePan 3.6s linear infinite;
}

html[data-name-cmd="outlineGold"] .side-profile-first {
  color: transparent !important;
  -webkit-text-stroke: 1.2px #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

html[data-name-cmd="sheen"] .side-profile-first {
  background-image: linear-gradient(110deg, #94a3b8 12%, #f8fafc 45%, #fff 50%, #94a3b8 88%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: goldFlakePan 2.4s ease infinite;
}

html[data-name-cmd="matrix"] .side-profile-first {
  color: #4ade80 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-shadow: 0 0 6px #22c55e, 0 0 16px rgba(34, 197, 94, 0.55);
  letter-spacing: 0.04em;
}

html[data-name-cmd="frost"] .side-profile-first {
  color: #e2e8f0 !important;
  text-shadow: 0 0 8px rgba(226, 232, 240, 0.55);
}
html[data-name-cmd="frost"] .side-profile-first::after {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.9) 0.05em, transparent 0.08em),
    radial-gradient(circle at 70% 40%, rgba(186, 230, 253, 0.9) 0.06em, transparent 0.09em),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,0.75) 0.05em, transparent 0.08em);
  background-size: 1.2em 1em;
  animation: goldFlakePan 9s linear infinite;
}

@keyframes goldFlakePan {
  from { background-position: 0 50%; }
  to { background-position: 1.7em 50%; }
}
html[data-motion="off"] .side-profile-first,
html[data-motion="reduced"] .side-profile-first,
html[data-motion="off"] .side-profile-first::after,
html[data-motion="reduced"] .side-profile-first::after {
  animation: none;
}

html[data-fx~="textShadow"] #sideProfileName { text-shadow: 0 8px 18px rgba(0,0,0,0.4); }
html[data-fx~="textEffects"] #sideProfileName { letter-spacing: 0.08em; font-weight: 800; }
html[data-fx~="textHover"] #sideProfileName { transition: transform 0.2s ease, color 0.2s ease; }
html[data-fx~="textHover"] #sideProfileName:hover { transform: scale(1.04); color: var(--dash-primary); }
html[data-fx~="textAnim"] #sideProfileName { animation: fxNamePulse 2s ease-in-out infinite; }

html[data-avatar-fx="avatarGlow"] #avatarBtn,
html[data-fx~="avatarGlow"] #avatarBtn { box-shadow: 0 0 0 2px var(--dash-primary), 0 0 18px var(--dash-primary); }
html[data-avatar-fx="avatarPulse"] #avatarBtn { animation: fxNamePulse 1.6s ease-in-out infinite; }
html[data-avatar-fx="avatarRotate"] #avatarBtn:hover { transform: rotate(12deg) scale(1.05); }
html[data-avatar-fx="avatarBounce"] #avatarBtn { animation: fxFloatName 1.4s ease-in-out infinite; }
html[data-avatar-fx="avatarSparkle"] #avatarBtn { animation: fxSpark 1.5s ease infinite; }
html[data-avatar-fx="avatarRainbow"] #avatarBtn { animation: accentHue 3s linear infinite; }
html[data-fx~="avatarOnline"] #avatarBtn { box-shadow: 0 0 0 2px #22c55e; }
html[data-avatar-fx="avatarNeon"] #avatarBtn {
  box-shadow: 0 0 0 2px #22d3ee, 0 0 22px #22d3ee;
}
html[data-avatar-fx="avatarGold"] #avatarBtn {
  box-shadow: 0 0 0 2px #FFD700, 0 0 18px rgba(255, 215, 0, 0.65);
}
html[data-avatar-fx="avatarHolo"] #avatarBtn { animation: accentHue 3s linear infinite; box-shadow: 0 0 0 2px #a78bfa, 0 0 16px #38bdf8; }

html[data-fx~="cardGradient"] .side-profile {
  background: linear-gradient(180deg, color-mix(in srgb, var(--dash-primary) 22%, transparent), transparent);
  border-radius: 16px;
}
html[data-fx~="cardGlow"] .side-profile { box-shadow: none; }
html[data-fx~="cardBorder"] .side-profile { border: none; }
html[data-fx~="cardGlass"] .side-profile { backdrop-filter: blur(12px); }
html[data-card-cmd="gradient"] .side-profile {
  background: linear-gradient(180deg, color-mix(in srgb, var(--dash-primary) 28%, transparent), transparent);
  border-radius: 16px;
}
html[data-card-cmd="glow"] .side-profile { box-shadow: none; }
html[data-card-cmd="neon"] .side-profile {
  border: none;
  box-shadow: none;
}
html[data-card-cmd="gold"] .side-profile {
  border: none;
  box-shadow: none;
}
html[data-card-cmd="holographic"] .side-profile {
  border: none;
  animation: none;
}
html[data-card-cmd="lava"] .side-profile {
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.45), transparent);
  border: none;
}
html[data-card-cmd="ice"] .side-profile {
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.22), transparent);
  border: none;
  backdrop-filter: blur(12px);
}

.side-profile-badge { background: var(--badge-color, transparent); }
html[data-rank-style="pill"] .side-profile-badge { border-radius: 999px; padding: 2px 8px; background: var(--badge-color, var(--dash-primary)); color: #fff; }
html[data-rank-style="outline"] .side-profile-badge { border: 1px solid var(--badge-color, var(--dash-primary)); background: transparent; }
html[data-rank-style="neon"] .side-profile-badge {
  color: #fff;
  background: var(--badge-color, var(--dash-primary));
  box-shadow: 0 0 12px var(--badge-color, var(--dash-primary));
}
html[data-rank-style="glass"] .side-profile-badge {
  background: color-mix(in srgb, var(--badge-color, var(--dash-primary)) 30%, transparent);
  backdrop-filter: blur(8px);
}
html[data-rank-style="gold"] .side-profile-badge {
  background: linear-gradient(180deg, #ffe08a, #c9a227);
  color: #3f2d00;
  border-radius: 999px;
  padding: 2px 8px;
}
html[data-rank-style="chrome"] .side-profile-badge {
  background: linear-gradient(180deg, #fff, #94a3b8);
  color: #0f172a;
  border-radius: 999px;
  padding: 2px 8px;
}
html[data-rank-style="stamp"] .side-profile-badge {
  border: 1.5px dashed #ef4444;
  color: #ef4444;
  background: transparent;
  border-radius: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-badge-fx="pulse"] .side-profile-badge { animation: fxNamePulse 1.6s ease-in-out infinite; }
html[data-badge-fx="shimmer"] .side-profile-badge { animation: accentShimmer 2s ease infinite; background-size: 220% 100%; }
html[data-badge-fx="rainbow"] .side-profile-badge { animation: accentHue 3s linear infinite; }
html[data-badge-fx="glow"] .side-profile-badge { box-shadow: 0 0 14px var(--badge-color, var(--dash-primary)); }
html[data-badge-fx="bounce"] .side-profile-badge { animation: fxBounce 1.2s ease infinite; }
html[data-badge-fx="flicker"] .side-profile-badge { animation: fxBadgeFlicker 1.1s steps(2) infinite; }
html[data-badge-fx="heartbeat"] .side-profile-badge { animation: fxBadgeHeart 1.4s ease infinite; }
html[data-badge-fx="metallic"] .side-profile-badge {
  background-image: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: goldFlakePan 2.2s linear infinite;
}
@keyframes fxBadgeFlicker {
  0%, 80%, 100% { opacity: 1; }
  85% { opacity: 0.35; }
}
@keyframes fxBadgeHeart {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.12); }
  40% { transform: scale(1); }
  55% { transform: scale(1.08); }
}

html[data-fx~="statsPulse"] .settings-control-stats b { animation: fxNamePulse 2s ease infinite; }
html[data-fx~="bioFade"] .settings-control-note { animation: deskPageIn 0.6s ease both; }

html[data-motion="reduced"] .fx-cursor-trail,
html[data-motion="off"] .fx-cursor-trail { display: none !important; }