/* ==========================================================================
   My account — hero, tabs, and the handful of small components (stat tiles,
   segmented control, code block, steps, key/session rows) the four tabs share.
   Built from the project's own tokens/components (.card/.btn/.badge/.field-*),
   not the visual reference's own hardcoded palette — only the layout density
   and component shapes follow the reference closely.
   ========================================================================== */
.account-tabs {
  display: flex;
  /* Not stretch: a tab holding a count badge would otherwise set the height for the
     whole row, and the sliding pill is drawn to the tab it covers. */
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem;
  margin: 1rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
.account-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Fixed, not a minimum, and matching .dm-view-tab (0.5rem padding + 0.85rem text):
     every tab strip in the product is one height, whatever a tab happens to contain. */
  height: 2.05rem;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0 0.9rem;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease);
}
.account-tab .icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.account-tab:hover { color: var(--color-text); background: var(--color-primary-bg); }
.account-tab.is-active {
  color: var(--color-on-primary);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--color-primary-hover) 25%, transparent);
}
.account-panel { animation: accountPanelIn 0.2s var(--ease); }
@keyframes accountPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .account-panel { animation: none; }
}

.account-grid-2col {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.75fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1024px) {
  .account-grid-2col { grid-template-columns: 1fr; }
}

.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat-tile {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}
.stat-tile span { display: block; color: var(--color-text-faint); font-size: 0.68rem; }
.stat-tile strong { display: block; margin-top: 0.4rem; font-size: 0.85rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }


/* История заказов: фильтр-чипы и пагинация */
.order-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.order-filter-chip {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  color: var(--color-text-muted); background: var(--color-surface-muted);
  border: 1px solid var(--color-border); text-decoration: none; white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s;
}
.order-filter-chip:hover { color: var(--color-text); border-color: var(--color-primary); }
.order-filter-chip.is-active {
  color: #fff; background: var(--color-primary); border-color: var(--color-primary);
}
.order-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.order-pager-info { font-size: 12px; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.order-pager-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); text-decoration: none; transition: color .15s, border-color .15s, background .15s;
}
.order-pager-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.order-pager-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.order-pager-btn.is-disabled { opacity: .4; pointer-events: none; }