:root {
  --ux-press-duration: 140ms;
  --ux-toggle-duration: 220ms;
  --ux-glow-duration: 800ms;
  --ux-ease-out: cubic-bezier(.2,.78,.24,1);
  --ux-focus-ring: rgba(16,190,94,.38);
}

/* Home-screen app pull-to-refresh. Normal browser tabs keep their native gesture. */
.app-pull-refresh {
  --pull-distance:0px;
  position:fixed;
  z-index:20000;
  top:max(10px, env(safe-area-inset-top));
  left:50%;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 15px 0 11px;
  border:1px solid rgba(10,151,77,.24);
  border-radius:999px;
  color:#087943;
  background:rgba(250,255,252,.92);
  box-shadow:0 10px 30px rgba(7,72,43,.18), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, calc(-64px + min(var(--pull-distance), 96px))) scale(.94);
  transition:opacity 150ms ease, transform 150ms var(--ux-ease-out), background 150ms ease;
}

.app-pull-refresh.is-visible {
  opacity:1;
  transform:translate(-50%, calc(-54px + min(var(--pull-distance), 96px))) scale(1);
}

.app-pull-refresh strong { font-size:.78rem; font-weight:900; white-space:nowrap; letter-spacing:.01em; }
.app-pull-refresh-icon { display:grid; width:23px; height:23px; place-items:center; border-radius:50%; background:rgba(11,171,86,.12); }
.app-pull-refresh-icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform 180ms ease; }
.app-pull-refresh.is-armed { color:#fff; border-color:rgba(8,130,65,.5); background:linear-gradient(135deg,rgba(7,116,71,.96),rgba(12,185,91,.96)); }
.app-pull-refresh.is-armed .app-pull-refresh-icon { background:rgba(255,255,255,.18); }
.app-pull-refresh.is-armed .app-pull-refresh-icon svg { transform:rotate(135deg); }
.app-pull-refresh.is-refreshing .app-pull-refresh-icon svg { animation:app-pull-refresh-spin .72s linear infinite; }
.app-pull-refresh.is-complete { color:#fff; background:linear-gradient(135deg,rgba(7,116,71,.96),rgba(12,185,91,.96)); }
.app-pull-refresh.is-error { color:#a33b22; border-color:rgba(194,83,44,.28); background:rgba(255,248,245,.94); }
html[data-theme="dark"] .app-pull-refresh { color:#82e7ad; border-color:rgba(92,220,146,.25); background:rgba(15,28,23,.92); box-shadow:0 12px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06); }
html[data-theme="dark"] .app-pull-refresh.is-armed,
html[data-theme="dark"] .app-pull-refresh.is-complete { color:#fff; background:linear-gradient(135deg,rgba(5,79,62,.97),rgba(8,155,79,.97)); }
html[data-theme="dark"] .app-pull-refresh.is-error { color:#ffad92; border-color:rgba(255,137,103,.24); background:rgba(48,25,21,.94); }
@keyframes app-pull-refresh-spin { to { transform:rotate(360deg); } }

/* Every interactive surface responds immediately without the delayed iOS tap flash. */
:where(button, a[href], [role="button"], [role="tab"], [role="switch"]) {
  -webkit-tap-highlight-color: rgba(16,190,94,.13);
  touch-action: manipulation;
}

:where(button:not(:disabled), a[href], [role="button"], [role="tab"], [role="switch"]):focus-visible {
  outline: 3px solid var(--ux-focus-ring);
  outline-offset: 3px;
}

:where(button:not(:disabled), a[href], [role="button"], [role="tab"], [role="switch"]):not([data-no-press-feedback]):active {
  filter: brightness(.96) saturate(1.04);
}

/* Main actions share the same short, restrained press depth. */
:where(
  .theme-toggle,
  .music-toggle,
  .demo-trade-toggle,
  .demo-side-button,
  .demo-close-button,
  .demo-retry-button,
  .feature-cta,
  .gainers-toggle,
  .indicator-toggle,
  .install-app-button,
  .column-picker-toggle,
  .column-picker-options button,
  .edit-button,
  .reorder-done-button,
  .learning-card,
  .stock-feature-link,
  .stock-demo-toggle,
  .stock-demo-side,
  .stock-demo-close,
  .stock-demo-retry,
  .power-save-toggle,
  .currency-switch button,
  .chart-mode-switch button,
  .category-tabs button,
  .range-tabs button,
  .stock-chart-mode button,
  .stock-column-toggle,
  .stock-learning-card,
  .stock-partner-link,
  .board-icon-link,
  .traffic-tabs button,
  .owner-bar button,
  .login-panel button
) {
  transition-duration: var(--ux-press-duration);
  transition-timing-function: var(--ux-ease-out);
}

:where(
  .theme-toggle,
  .music-toggle,
  .demo-trade-toggle,
  .demo-side-button,
  .demo-close-button,
  .demo-retry-button,
  .feature-cta,
  .gainers-toggle,
  .indicator-toggle,
  .install-app-button,
  .column-picker-toggle,
  .column-picker-options button,
  .edit-button,
  .reorder-done-button,
  .learning-card,
  .stock-feature-link,
  .stock-demo-toggle,
  .stock-demo-side,
  .stock-demo-close,
  .stock-demo-retry,
  .power-save-toggle,
  .currency-switch button,
  .chart-mode-switch button,
  .category-tabs button,
  .range-tabs button,
  .stock-chart-mode button,
  .stock-column-toggle,
  .stock-learning-card,
  .stock-partner-link,
  .board-icon-link,
  .traffic-tabs button,
  .owner-bar button,
  .login-panel button
):active {
  transform: translateY(1px) scale(.985);
}

/* Expand/collapse controls use one tempo across both boards. */
.demo-trade-toggle-arrow,
.gainers-toggle-arrow,
.learning-hub-chevron,
.stock-demo-arrow,
.stock-learning-chevron,
.power-save-thumb,
.power-save-toggle > span {
  transition-duration: var(--ux-toggle-duration);
  transition-timing-function: var(--ux-ease-out);
}

.learning-hub-collapse,
.stock-learning-collapse {
  transition-duration: var(--ux-toggle-duration), var(--ux-toggle-duration);
  transition-timing-function: var(--ux-ease-out), ease-out;
}

@keyframes ux-panel-reveal {
  from { opacity:0; transform:translateY(-5px) scale(.995); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

#demoTradePanel:not([hidden]),
#stock-demo-panel:not([hidden]),
#detail-panel:not([hidden]),
.gainers-list[aria-hidden="false"],
.column-picker.is-open .column-picker-options,
.stock-column-picker.is-open .stock-column-picker-options,
dialog[open] > * {
  animation: ux-panel-reveal var(--ux-toggle-duration) var(--ux-ease-out) both;
}

/* Live-value feedback: one 0.8 second pulse everywhere. */
.demo-balance-value.balance-flash-up,
.demo-balance-value.balance-flash-down,
.stock-demo-flash-up,
.stock-demo-flash-down,
.metric strong.is-value-up,
.coin-card.tick-up .tick-arrow,
.coin-card.tick-down .tick-arrow,
.coin-card.tick-up .change,
.coin-card.tick-down .change,
.market-card.tick-up .tick-arrow,
.market-card.tick-down .tick-arrow,
.market-card.tick-up .market-change,
.market-card.tick-down .market-change,
.market-card.tick-up .change,
.market-card.tick-down .change {
  animation-duration: var(--ux-glow-duration) !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ux-press-duration: 0ms;
    --ux-toggle-duration: 0ms;
    --ux-glow-duration: 0ms;
  }

  :where(button:not(:disabled), a[href], [role="button"], [role="tab"], [role="switch"]):not([data-no-press-feedback]):active {
    transform: none;
  }

  #demoTradePanel:not([hidden]),
  #stock-demo-panel:not([hidden]),
  #detail-panel:not([hidden]),
  .gainers-list[aria-hidden="false"],
  .column-picker.is-open .column-picker-options,
  .stock-column-picker.is-open .stock-column-picker-options,
  dialog[open] > * {
    animation: none;
  }

  .app-pull-refresh,
  .app-pull-refresh-icon svg { transition:none; animation:none !important; }
}