/* ══════════════════ Header ══════════════════ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--clr-bg) 82%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--clr-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
}

.brand-name {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-dim);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { width: 19px; height: 19px; }

.status-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--clr-border);
  font-size: 0.72rem;
  color: var(--clr-muted);
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--clr-muted);
}

.status-chip.live { color: var(--clr-up); border-color: rgba(34,197,94,0.35); }
.status-chip.live .status-dot { background: var(--clr-up); box-shadow: 0 0 6px var(--clr-up); animation: pulse-dot 2s ease-in-out infinite; }
.status-chip.error { color: var(--clr-down); border-color: rgba(244,63,94,0.35); }
.status-chip.error .status-dot { background: var(--clr-down); }

@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ══════════════════ Search ══════════════════ */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  margin-top: 14px;
  transition: border-color var(--dur-fast) var(--ease);
}

.search-bar:focus-within { border-color: var(--brand-violet); }
.search-bar svg { width: 18px; height: 18px; color: var(--clr-muted); flex-shrink: 0; }

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.95rem;
  min-width: 0;
}

.search-input::placeholder { color: var(--clr-muted); }

/* ══════════════════ Section headers ══════════════════ */
.section {
  margin-top: 24px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title {
  font-size: 0.95rem;
  font-weight: 700;
}

.section-link {
  font-size: 0.78rem;
  color: var(--brand-violet-2);
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ══════════════════ Favorites row ══════════════════ */
.hscroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  margin: 0 -16px;
  padding-inline: 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hscroll::-webkit-scrollbar { display: none; }

.fav-empty {
  width: 100%;
  padding: 20px;
  text-align: center;
  color: var(--clr-muted);
  font-size: 0.82rem;
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-lg);
}

.fav-chip {
  scroll-snap-align: start;
  flex-shrink: 0;
  min-width: 128px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.fav-chip:active { transform: scale(0.97); }

.fav-chip-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.asset-icon.fav-chip-icon { width: 26px; height: 26px; border-radius: 8px; font-size: 0.85rem; }
.fav-chip-name { font-size: 0.78rem; color: var(--clr-text-dim); font-weight: 600; }
.fav-chip-price { font-size: 1rem; font-weight: 700; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.fav-chip-delta { margin-top: 4px; font-size: 0.72rem; }

/* ══════════════════ Asset card ══════════════════ */
/* Two-up by default (mobile included) so lists need far less scrolling;
   widened at larger breakpoints in pages.css. */
.asset-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-items: start;
}

.asset-card {
  position: relative;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}

.asset-card:active { transform: scale(0.985); }

.asset-card.loaded {
  box-shadow: var(--shadow-md);
}

.asset-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.asset-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.asset-meta { flex: 1; min-width: 0; }
.asset-name { font-size: 0.95rem; font-weight: 700; }
.asset-sub { font-size: 0.72rem; color: var(--clr-muted); direction: ltr; display: inline-block; letter-spacing: 0.5px; }

.asset-fav-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-muted);
  flex-shrink: 0;
}

.asset-fav-btn svg { width: 19px; height: 19px; transition: transform var(--dur-fast) var(--ease-spring); }
.asset-fav-btn.active { color: var(--brand-orange); }
.asset-fav-btn.active svg { transform: scale(1.15); fill: currentColor; }

.asset-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.asset-price {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  direction: ltr;
  font-variant-numeric: tabular-nums;
  min-height: 1.9rem;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.asset-price-unit { font-size: 0.72rem; font-weight: 500; color: var(--clr-muted); }

.delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 700;
  direction: ltr;
  white-space: nowrap;
  flex-shrink: 0;
}

.delta-chip svg { width: 11px; height: 11px; }
.delta-chip.up { color: var(--clr-up); background: var(--clr-up-bg); }
.delta-chip.down { color: var(--clr-down); background: var(--clr-down-bg); }
.delta-chip.flat { color: var(--clr-muted); background: var(--clr-surface-2); }

.asset-sparkline { margin-top: 10px; height: 34px; width: 100%; }
.asset-sparkline svg { width: 100%; height: 100%; display: block; }

/* Race detail (collapsible) */
.race-toggle {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--clr-muted);
  width: 100%;
}

.race-toggle svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.race-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.race-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.race-detail.open { grid-template-rows: 1fr; }
.race-detail-inner { overflow: hidden; }

.server-race {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}

.server-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-2);
  border: 1px solid transparent;
  font-size: 0.78rem;
}

.server-item.winner { border-color: rgba(34,197,94,0.35); background: var(--clr-up-bg); }
.server-name { color: var(--clr-muted); flex: 1; }
.server-time { font-size: 0.72rem; font-weight: 700; direction: ltr; font-variant-numeric: tabular-nums; color: var(--clr-muted); }
.server-item.winner .server-time { color: var(--clr-up); }
.race-divider { width: 1px; height: 22px; background: var(--clr-border); flex-shrink: 0; }

/* Skeleton */
.skeleton {
  display: inline-block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--clr-surface-2) 25%, var(--clr-border-hover) 50%, var(--clr-surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@keyframes border-pulse {
  0%, 100% { border-color: var(--clr-border); }
  50% { border-color: var(--clr-border-hover); }
}

.asset-card.fetching { animation: border-pulse 1.2s ease-in-out infinite; }

/* Coming-soon placeholder card: same shell, no live data yet */
.asset-card.is-soon { opacity: 0.62; }
.asset-card.is-soon .asset-icon { background: var(--clr-surface-2) !important; border-color: var(--clr-border) !important; color: var(--clr-muted) !important; }
.soon-pill {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--clr-surface-2);
  color: var(--clr-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

/* ══════════════════ Empty state ══════════════════ */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--clr-muted);
}

.empty-state-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  color: var(--brand-violet-2);
}

.empty-state-icon svg { width: 30px; height: 30px; }
.empty-state-title { font-size: 1rem; font-weight: 700; color: var(--clr-text); margin-bottom: 6px; }
.empty-state-text { font-size: 0.85rem; line-height: 1.7; max-width: 280px; margin: 0 auto; }

/* ══════════════════ Buttons ══════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 700;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  min-height: 48px;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-violet), var(--brand-violet-2));
  color: #fff;
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
}

.btn-ghost { color: var(--brand-violet-2); }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn-block { width: 100%; }

/* ══════════════════ Tabs (converter hub) ══════════════════ */
.tabbar {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabbar::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 1;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--clr-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.tab-btn.active {
  background: linear-gradient(135deg, var(--brand-violet), var(--brand-violet-2));
  color: #fff;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-in var(--dur) var(--ease) both; }

/* ══════════════════ Converter card ══════════════════ */
.calc-card {
  padding: 20px;
  border-radius: var(--radius-xl);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-md);
}

.field-label {
  font-size: 0.78rem;
  color: var(--clr-muted);
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.input-group {
  display: flex;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  background: var(--clr-surface-2);
  transition: border-color var(--dur-fast) var(--ease);
}

.input-group:focus-within { border-color: var(--brand-violet); }

.input-group input, .input-group .result-value {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 600;
  direction: ltr;
  text-align: right;
}

.input-group .result-value { color: var(--brand-violet-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.input-group select {
  background: var(--clr-surface-2);
  border: none;
  border-inline-start: 1px solid var(--clr-border);
  outline: none;
  padding: 0 12px;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
  max-width: 118px;
}

.input-group select option { background: var(--clr-bg-elevated); color: var(--clr-text); }

.swap-row {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.swap-btn {
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
  color: var(--clr-muted);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}

.swap-btn:active { transform: rotate(180deg) scale(0.92); color: var(--brand-violet-2); }
.swap-btn svg { width: 18px; height: 18px; }

.rate-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--clr-border);
  font-size: 0.8rem;
  color: var(--clr-muted);
  text-align: center;
}

.calc-hint { font-size: 0.76rem; color: var(--clr-muted); text-align: center; margin-top: 6px; }

.field-row { display: flex; gap: 10px; }
.field-row .field-col { flex: 1; min-width: 0; }

/* ══════════════════ Settings ══════════════════ */
.settings-group {
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  margin-bottom: 16px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--clr-border);
}

.settings-row:last-child { border-bottom: none; }

.settings-row-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--clr-surface-2);
  color: var(--brand-violet-2);
  flex-shrink: 0;
}

.settings-row-icon svg { width: 18px; height: 18px; }
.settings-row-label { flex: 1; font-size: 0.88rem; font-weight: 600; }
.settings-row-sub { font-size: 0.72rem; color: var(--clr-muted); margin-top: 2px; }

/* Toggle switch */
.switch {
  position: relative;
  width: 46px; height: 27px;
  border-radius: var(--radius-pill);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  flex-shrink: 0;
  transition: background var(--dur) var(--ease);
}

.switch::after {
  content: '';
  position: absolute;
  top: 2px; inset-inline-start: 2px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: inset-inline-start var(--dur) var(--ease-spring);
}

.switch.on { background: linear-gradient(135deg, var(--brand-violet), var(--brand-violet-2)); }
.switch.on::after { inset-inline-start: 21px; }

/* Segmented control (theme picker) */
.segmented {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
}

.segmented button {
  flex: 1;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clr-muted);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}

.segmented button.active { background: var(--clr-bg-elevated); color: var(--clr-text); box-shadow: var(--shadow-sm); }
.segmented button svg { width: 15px; height: 15px; }

.about-block {
  text-align: center;
  padding: 24px 16px;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.9;
}

/* ══════════════════ Bottom nav ══════════════════ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--clr-bg) 88%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-top: 1px solid var(--clr-border);
}

.bottom-nav-inner {
  width: 100%;
  max-width: var(--page-max-w);
  display: flex;
  height: var(--bottom-nav-h);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 600;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}

.nav-item svg { width: 22px; height: 22px; transition: transform var(--dur-fast) var(--ease-spring); }
.nav-item:active svg { transform: scale(0.85); }
.nav-item.active { color: var(--brand-violet-2); }

.nav-item.active::before {
  content: '';
  position: absolute;
  top: 2px;
  width: 28px; height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand-violet), var(--brand-violet-2));
}

/* ══════════════════ Side nav (laptop/desktop) ══════════════════ */
/* Hidden by default (mobile uses .bottom-nav); shown at the desktop
   breakpoint in pages.css, which also hides .bottom-nav. */
.side-nav {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: var(--sidenav-w);
  padding: 22px 14px;
  background: color-mix(in srgb, var(--clr-bg) 92%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-left: 1px solid var(--clr-border);
  z-index: 30;
}

.side-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--clr-border);
}

.side-nav-brand img { width: 32px; height: 32px; border-radius: 9px; }
.side-nav-brand span { font-weight: 800; font-size: 1.05rem; }

.side-nav .nav-item {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
}

.side-nav .nav-item:hover { background: var(--clr-surface); }
.side-nav .nav-item.active { background: var(--clr-surface-2); }
.side-nav .nav-item.active::before { display: none; }
.side-nav .nav-item svg { width: 20px; height: 20px; }

/* ══════════════════ Toast ══════════════════ */
.toast {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 14px);
  inset-inline: 16px;
  max-width: calc(var(--page-max-w) - 32px);
  margin: 0 auto;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  background: var(--clr-bg-elevated);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-lg);
  font-size: 0.82rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(140%);
  transition: transform var(--dur) var(--ease-spring);
}

.toast.show { transform: translateY(0); }

/* ══════════════════ Compact asset cards (phones, 2-up) ══════════════════ */
@media (max-width: 699px) {
  .asset-card { padding: 12px; }
  .asset-card-row { gap: 8px; }
  .asset-icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
  .asset-name { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .asset-sub { font-size: 0.64rem; }
  .asset-fav-btn { width: 26px; height: 26px; }
  .asset-fav-btn svg { width: 16px; height: 16px; }
  .asset-price-row { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 10px; }
  .asset-price { font-size: 1.1rem; min-height: 1.3rem; }
  .asset-price-unit { font-size: 0.64rem; }
  .delta-chip { font-size: 0.68rem; padding: 3px 7px; }
  .asset-sparkline { height: 24px; margin-top: 8px; }
  .race-toggle span { display: none; }
  .race-toggle { padding-top: 8px; margin-top: 8px; gap: 0; }
  .server-race { gap: 6px; }
  .server-item { padding: 6px 7px; font-size: 0.68rem; gap: 4px; }
  .server-name { display: none; }
  .soon-pill { margin-top: 10px; font-size: 0.66rem; padding: 4px 8px; }
}