/* Customer Portal styling */

.auth-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  min-height: 70vh;
}

.auth-card {
  width: 100%;
  max-width: 500px;
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--border-thin) solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.auth-tabs {
  display: flex;
  border-bottom: var(--border-thin) solid var(--card-border);
  margin-bottom: 1.75rem;
  gap: 1rem;
}

.tab-btn {
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0.75rem 0.25rem;
  cursor: pointer;
  position: relative;
  transition: color 0.25s ease;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 2px;
  background-color: var(--accent-color);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.tab-btn.active {
  color: var(--theme-accent);
}

.tab-btn.active::after {
  transform: scaleX(1);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 500px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.w-full {
  width: 100%;
}

.error-msg {
  background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-destructive) 20%, transparent);
  color: var(--color-destructive);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.success-msg {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 20%, transparent);
  color: var(--color-success);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Password Strength Indicator */
.password-strength-container {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.strength-bars {
  display: flex;
  gap: 0.25rem;
  height: 4px;
}

.strength-bar {
  flex: 1;
  background-color: var(--card-border);
  border-radius: var(--radius-full);
  transition: background-color 0.3s ease;
}

.strength-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

/* Dashboard Layout */
.dashboard-wrapper {
  padding: 2rem 0;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--card-bg);
  border: var(--border-thin) solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.dashboard-sidebar {
  padding: 2rem;
}

.avatar-circle {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--accent-color), rgba(var(--accent-color-rgb), 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: var(--color-on-accent);
  font-size: 1.75rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(var(--accent-color-rgb), 0.3);
}

.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.status-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 600px) {
  .status-cards-row {
    grid-template-columns: 1fr;
  }
}

.status-card {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.25s var(--transition-bounce);
}

@media (hover: hover) and (pointer: fine) {
  .status-card:hover {
    transform: translateY(-4px);
  }
}

.status-card h4 {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.stat-number {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--accent-color);
}

.stat-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── Dashboard tab navigation (sidebar) ─────────────────────── */
.dashboard-tabs-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dash-tab-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  text-align: start;
  width: 100%;
  transition: background 0.2s ease, color 0.2s ease;
}

.dash-tab-btn:hover {
  background: rgba(var(--accent-color-rgb), 0.08);
  color: var(--text-primary);
}

.dash-tab-btn.active {
  background: rgba(var(--accent-color-rgb), 0.12);
  color: var(--accent-color);
  font-weight: 700;
}

/* Each section panel */
.dash-section {
  /* shown/hidden via JS — no extra wrapper margin needed */
}

/* Loyalty sub-tabs */
.loyalty-tab-btn {
  padding: 0.75rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.loyalty-tab-btn:hover {
  color: var(--text-primary);
}
.loyalty-tab-btn.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
}

/* ═══════════════════════════════════════════════════════════════════
   [Phase 12 ✅] TRACK.HTML — Guest Order Tracking Page
   Shell: Focus Shell (pre-submit) → Split-Panel Shell (post-submit)
   ════════════════════════════════════════════════════════════════════ */

/* ── Page body ──────────────────────────────────────────────────── */
.tk-body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  color: var(--color-text-default);
  font-family: var(--font-body);
}

/* ── Sticky header ─────────────────────────────────────────────── */
.tk-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(16px, 4vw, 40px);
  gap: 12px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}

.tk-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  flex-shrink: 0;
  transition: color var(--dur-fast, 150ms) var(--ease-standard);
}
.tk-back:hover { color: var(--color-foreground); }
.tk-back svg { flex-shrink: 0; }

.tk-shop-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--color-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.tk-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tk-ctrl-select {
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-default);
  color: var(--color-text-default);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-fast, 150ms) var(--ease-standard);
}
.tk-ctrl-select:focus { border-color: var(--color-brand-accent); }

.tk-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* [Phase 8 ✅] Was 36px square and measured 38x44 on a phone: the 44px floor
     in common.css set the height but this file loads afterwards, so its own
     min-width kept winning. 44 on both axes, here, where the rule actually is. */
  min-width: 44px;
  min-height: 44px;
  height: 36px;
  padding: 0 10px;
  background: transparent;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-full);
  color: var(--color-text-default);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  transition: background var(--dur-fast, 150ms) var(--ease-standard),
              border-color var(--dur-fast, 150ms) var(--ease-standard);
}
.tk-ctrl-btn:hover {
  background: var(--color-surface-raised);
  border-color: var(--color-border-strong);
}

/* ── Main area ─────────────────────────────────────────────────── */
.tk-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tk-hidden { display: none !important; }

/* ── PRE-SUBMIT: Focus Shell ───────────────────────────────────── */
.tk-focus-section {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--header-h, 60px));
  padding: clamp(24px, 5vh, 56px) clamp(16px, 5vw, 32px);
  overflow: hidden;
}

.tk-focus-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 15% 35%,
      color-mix(in srgb, var(--color-brand-accent) 11%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 85% 75%,
      color-mix(in srgb, var(--color-brand-accent) 7%, transparent) 0%, transparent 65%);
  pointer-events: none;
}

.tk-lookup-card {
  position: relative;
  z-index: 1;
  width: min(60vw, 560px);
  min-width: 300px;
  max-width: calc(100vw - 32px);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 5vw, 48px);
  box-shadow: var(--shadow-3);
}

.tk-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-brand-accent) 12%, transparent);
  color: var(--color-brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.tk-card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--color-foreground);
  margin: 0 0 8px;
  line-height: 1.2;
}

.tk-card-sub {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0 0 28px;
  line-height: 1.65;
}

.tk-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tk-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tk-field label {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--color-text-default);
}

.tk-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: 500;
  box-sizing: border-box;
  transition: border-color var(--dur-fast, 150ms) var(--ease-standard),
              box-shadow var(--dur-fast, 150ms) var(--ease-standard);
}
.tk-input::placeholder { color: var(--color-text-subtle); font-weight: 500; }
.tk-input:focus {
  outline: none;
  border-color: var(--color-brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-accent) 18%, transparent);
}
.tk-input-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.tk-submit-btn {
  width: 100%;
  padding: 12px 20px;
  margin-top: 4px;
  background: var(--color-brand-accent);
  color: var(--color-on-accent);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: opacity var(--dur-fast, 150ms) var(--ease-standard),
              transform var(--dur-fast, 150ms) var(--ease-standard);
}
.tk-submit-btn:hover  { opacity: 0.9; transform: translateY(-1px); }
.tk-submit-btn:active { opacity: 1;   transform: translateY(0); }

.tk-error {
  margin-top: 10px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--color-destructive);
  text-align: center;
}

/* ── POST-SUBMIT: Split-Panel Shell ────────────────────────────── */
#track-result-card { width: 100%; }

.tk-result-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(16px, 3vh, 28px) clamp(16px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.tk-poll-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-subtle);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  width: fit-content;
}
.tk-poll-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  animation: tk-pulse 1.5s ease-in-out infinite;
}
@keyframes tk-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.tk-split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 20px;
  align-items: start;
}

.tk-left-panel,
.tk-right-panel {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tk-right-panel {
  position: sticky;
  top: calc(var(--header-h, 60px) + 16px);
  max-height: calc(100dvh - var(--header-h, 60px) - 48px);
  overflow-y: auto;
}

.tk-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  gap: 8px;
}

.tk-panel-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-text-muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tk-search-again {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-full);
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--dur-fast, 150ms) var(--ease-standard);
}
.tk-search-again:hover {
  color: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
  background: color-mix(in srgb, var(--color-brand-accent) 7%, transparent);
}

.tk-print-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-text-muted);
  background: transparent;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--dur-fast, 150ms) var(--ease-standard);
}
.tk-print-btn:hover {
  color: var(--color-foreground);
  border-color: var(--color-border-strong);
}

/* Progress stepper */
.tk-progress-wrap { padding: 20px 18px 24px; }

.tk-stepper { display: flex; flex-direction: column; }

.tk-step {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  position: relative;
  padding-bottom: 24px;
}
.tk-step:last-child { padding-bottom: 0; }

.tk-step:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 15px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: var(--color-border-default);
}
.tk-step.step-done:not(:last-child)::after {
  background: var(--color-brand-accent);
}

.tk-step-node {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  z-index: 1;
  transition: all var(--dur-standard, 250ms) var(--ease-standard);
}
.tk-step.step-done .tk-step-node {
  background: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
  color: var(--color-on-accent);
}
.tk-step.step-current .tk-step-node {
  background: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
  color: var(--color-on-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand-accent) 22%, transparent);
}

.tk-step-info { padding-top: 4px; flex: 1; min-width: 0; }

.tk-step-label {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.tk-step.step-done .tk-step-label,
.tk-step.step-current .tk-step-label {
  color: var(--color-foreground);
  font-weight: 700;
}

.tk-step-sub {
  font-size: 0.76rem;
  color: var(--color-text-subtle);
  font-weight: 500;
  margin-top: 2px;
  font-family: var(--font-body);
}

.tk-step-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-brand-accent);
  background: color-mix(in srgb, var(--color-brand-accent) 12%, transparent);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-top: 5px;
}

.tk-status-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
}
.tk-status-banner.cancelled {
  background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-destructive) 35%, transparent);
  color: var(--color-destructive);
}
.tk-status-banner.stalled {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-warning) 35%, transparent);
  color: var(--color-warning);
}

/* Receipt */
.tk-receipt-wrap { padding: 18px; }

.tk-receipt-id-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.77rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: var(--border-thin) dashed var(--color-border-default);
  font-family: var(--font-body);
}
.tk-receipt-id-row strong {
  font-family: var(--font-mono);
  color: var(--color-foreground);
  font-weight: 700;
  font-size: 0.8rem;
}

.tk-receipt-meta {
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  margin-bottom: 14px;
  font-size: 0.8rem;
  line-height: 1.85;
  font-family: var(--font-body);
}
.tk-receipt-meta-label { color: var(--color-text-muted); font-weight: 500; }
.tk-receipt-meta-value { color: var(--color-foreground); font-weight: 600; }
.tk-receipt-platform { color: var(--color-brand-accent); font-weight: 700; text-transform: capitalize; }

.tk-receipt-gift-msg {
  margin-top: 7px;
  padding-top: 7px;
  border-top: var(--border-thin) solid var(--color-border-subtle);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.tk-receipt-gift-msg strong { font-style: normal; font-weight: 700; color: var(--color-success); }

.tk-receipt-delivery {
  margin-top: 7px;
  padding-top: 7px;
  border-top: var(--border-thin) solid var(--color-border-subtle);
  font-weight: 600;
  color: var(--color-foreground);
  font-size: 0.8rem;
}
.tk-receipt-delivery-label { color: var(--color-brand-accent); }

.tk-receipt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.81rem;
  margin-bottom: 10px;
}
.tk-receipt-table th {
  padding-bottom: 7px;
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-body);
  border-bottom: var(--border-thin) solid var(--color-border-default);
}
.tk-receipt-table th:last-child { text-align: end; }

.tk-receipt-item-row td { padding: 6px 0; vertical-align: top; }
.tk-receipt-item-name {
  display: block;
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 800;
  color: var(--color-foreground);
}
.tk-receipt-item-qty {
  font-size: 0.77rem;
  color: var(--color-text-muted);
  font-weight: 500;
  font-family: var(--font-body);
  margin-inline-start: 3px;
}
.tk-receipt-item-price {
  text-align: end;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-brand-accent);
  white-space: nowrap;
  padding-inline-start: 12px;
}

.tk-receipt-breakdown { border-top: var(--border-thin) solid var(--color-border-default); padding-top: 10px; }

.tk-receipt-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  margin-bottom: 5px;
  gap: 8px;
}
.tk-breakdown-label { color: var(--color-text-muted); font-weight: 500; font-family: var(--font-body); }
.tk-breakdown-value { font-family: var(--font-mono); color: var(--color-text-default); font-weight: 600; white-space: nowrap; }
.tk-breakdown-gift .tk-breakdown-label,
.tk-breakdown-gift .tk-breakdown-value { color: var(--color-success); }
.tk-breakdown-discount .tk-breakdown-label,
.tk-breakdown-discount .tk-breakdown-value { color: var(--color-destructive); }

.tk-receipt-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  margin-top: 6px;
  border-top: var(--border-thin) dashed var(--color-border-default);
  gap: 8px;
}
.tk-total-label { font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; color: var(--color-foreground); }
.tk-total-value { font-family: var(--font-mono); font-size: 1rem; font-weight: 800; color: var(--color-brand-accent); white-space: nowrap; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .tk-split { grid-template-columns: 1fr; }
  .tk-right-panel { position: static; max-height: none; overflow-y: visible; }
}

@media (max-width: 639px) {
  .tk-lookup-card {
    width: 100%; min-width: 0; max-width: 100%;
    border-radius: var(--radius-lg);
    padding: 22px 18px;
  }
  .tk-result-inner { padding: 12px; }
  /* [Phase 8 ✅] Hiding the label left a bare 15x15 icon as the only way back.
     The label still goes — the arrow just keeps a thumb-sized hit area. */
  .tk-back span { display: none; }
  .tk-back {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .tk-shop-name { max-width: 140px; font-size: 0.82rem; }
}

/* ── Print ─────────────────────────────────────────────────────── */
@media print {
  .tk-header, .tk-focus-section, .tk-poll-bar,
  .tk-left-panel { display: none !important; }
  .tk-right-panel {
    border: none; box-shadow: none;
    position: static; max-height: none; overflow-y: visible;
  }
  .tk-split { display: block; }
  .tk-receipt-wrap { padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   [Phase 13 ✅] LOGIN + REGISTER — Split-Panel Shell (account.html)
   [Phase 14 ✅] ACCOUNT DASHBOARD SHELL — sidebar + topbar + content
   [Phase 15 ✅] PROFILE SECTION — identity block + editable form
   ════════════════════════════════════════════════════════════════════ */

/* ── Page scaffold ──────────────────────────────────────────────── */
.ac-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  color: var(--color-text-default);
  font-family: var(--font-body);
}

/* ── Global sticky header ───────────────────────────────────────── */
.ac-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(16px, 4vw, 40px);
  gap: 12px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  flex-shrink: 0;
}

.ac-header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  min-width: 0;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color var(--dur-fast, 150ms) var(--ease-standard);
}
.ac-header-brand:hover { color: var(--color-foreground); }

.ac-shop-name {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.ac-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Phase 13: Auth Split-Panel Shell ──────────────────────────── */
/* JS sets display:flex on #auth-panel — .au-outer defines the rest */
.au-outer {
  flex: 1;
  flex-direction: row;
  align-items: stretch;
  min-height: calc(100dvh - var(--header-h, 60px));
}

.au-form-panel {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vh, 56px) clamp(24px, 5vw, 56px);
  background: var(--color-background);
  overflow-y: auto;
}

.au-form-inner {
  width: 100%;
  max-width: 400px;
}

.au-brand-panel {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border-inline-start: var(--border-thin) solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animated gradient mesh */
.au-brand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 25% 25%,
      color-mix(in srgb, var(--color-brand-accent) 22%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 55% 65% at 75% 70%,
      color-mix(in srgb, var(--color-brand-accent) 14%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 60% 10%,
      color-mix(in srgb, var(--color-brand-accent) 9%, transparent) 0%, transparent 55%);
  animation: au-mesh-drift 10s ease-in-out infinite alternate;
}
@keyframes au-mesh-drift {
  0%   { opacity: 0.75; transform: scale(1); }
  100% { opacity: 1;    transform: scale(1.06) translateY(-6px); }
}

/* Geometric ring accent (bottom-end) */
.au-brand-panel::after {
  content: '';
  position: absolute;
  inset-inline-end: -72px;
  bottom: -72px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--color-brand-accent) 18%, transparent);
  pointer-events: none;
}

.au-brand-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  text-align: center;
}

.au-brand-icon {
  width: 72px;
  height: 72px;
  background: color-mix(in srgb, var(--color-brand-accent) 14%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-brand-accent) 28%, transparent);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-accent);
  margin-bottom: 24px;
}

.au-brand-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin-bottom: 10px;
}

.au-brand-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: var(--color-foreground);
  margin: 0 0 12px;
  line-height: 1.2;
}

.au-brand-sub {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-text-muted);
  max-width: 280px;
  line-height: 1.75;
  margin: 0 0 32px;
}

.au-brand-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 260px;
}

.au-brand-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--color-surface-raised) 75%, transparent);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  backdrop-filter: blur(8px);
  text-align: start;
}

.au-brand-badge-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-brand-accent) 12%, transparent);
  color: var(--color-brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.au-brand-badge-text {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-text-default);
  line-height: 1.35;
}

/* Tab overrides in auth context */
.au-outer .auth-tabs { border-bottom-color: var(--color-border-default); margin-bottom: 24px; }
.au-outer .tab-btn   { color: var(--color-text-muted); font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; }
.au-outer .tab-btn.active { color: var(--color-brand-accent); }
.au-outer .tab-btn::after { background-color: var(--color-brand-accent); }

/* Form elements in auth context — token-based */
.au-outer .form-group { gap: 5px; }
.au-outer .form-group label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-default);
}
.au-outer .form-input {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-foreground);
  transition: border-color var(--dur-fast, 150ms) var(--ease-standard),
              box-shadow var(--dur-fast, 150ms) var(--ease-standard);
}
.au-outer .form-input::placeholder { color: var(--color-text-subtle); font-weight: 500; }
.au-outer .form-input:focus {
  border-color: var(--color-brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-accent) 15%, transparent);
  outline: none;
}

/* Password show/hide */
.au-pwd-wrap { position: relative; }
.au-pwd-wrap .form-input { padding-inline-end: 2.4rem; box-sizing: border-box; width: 100%; }
.au-pwd-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  transition: color var(--dur-fast, 150ms) var(--ease-standard);
}
.au-pwd-toggle:hover { color: var(--color-foreground); }

/* Primary buttons in auth context */
.au-outer .primary-btn {
  font-family: var(--font-body);
  font-weight: 700;
  background: var(--color-brand-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-md);
  padding: 11px 20px;
  font-size: 0.93rem;
  border: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: opacity var(--dur-fast, 150ms) var(--ease-standard),
              transform var(--dur-fast, 150ms) var(--ease-standard);
}
.au-outer .primary-btn:hover  { opacity: 0.9; transform: translateY(-1px); }
.au-outer .primary-btn:active { opacity: 1; transform: none; }
.au-outer .primary-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Error/success with tokens */
.au-outer .error-msg {
  background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-destructive) 30%, transparent);
  color: var(--color-destructive);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 500;
}

/* Strength bars */
.au-outer .strength-bar { background: var(--color-border-default); }

/* Section divider label */
.au-form-section-label {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-subtle);
  margin: 6px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.au-form-section-label::before,
.au-form-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-subtle);
}

/* Phone: brand panel collapses to 30dvh hero at top */
@media (max-width: 767px) {
  .au-outer { flex-direction: column; }
  .au-brand-panel {
    flex: 0 0 auto;
    height: 30dvh;
    min-height: 160px;
    border-inline-start: none;
    border-bottom: var(--border-thin) solid var(--color-border-subtle);
  }
  .au-brand-panel::after { display: none; }
  .au-form-panel { flex: 1; align-items: flex-start; overflow-y: auto; padding: 20px 16px 32px; }
  .au-form-inner { max-width: 100%; }
  .au-brand-inner { padding: 16px 20px; }
  .au-brand-icon { width: 44px; height: 44px; margin-bottom: 10px; }
  .au-brand-eyebrow { display: none; }
  .au-brand-headline { font-size: 1.2rem; margin-bottom: 4px; }
  .au-brand-sub, .au-brand-badges { display: none; }
}

/* ── Phase 14: Dashboard Shell ─────────────────────────────────── */
/* JS sets display:block on #dashboard-panel */
.da-outer {
  min-height: calc(100dvh - var(--header-h, 60px));
  background: var(--color-background);
}

/* [Phase 13 ✅] `1fr` is `minmax(auto, 1fr)`, so the track can never shrink
   below its content's min-content width. `.da-chip-nav` is a 408px flex row of
   four chips; it scrolls, but a scroll container still reports its full
   min-content width upward. The track therefore blew out to 408px inside a
   375px phone and `overflow-x: clip` on <body> silently ate the difference —
   a third of every dashboard panel, in both languages. minmax(0, …) plus
   min-width:0 down the chain is the fix; do not write a bare `1fr` here. */
.da-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w, 240px) minmax(0, 1fr);
  min-height: calc(100dvh - var(--header-h, 60px));
  align-items: start;
}

/* Sidebar */
.da-sidebar {
  position: sticky;
  top: var(--header-h, 60px);
  height: calc(100dvh - var(--header-h, 60px));
  overflow-y: auto;
  overflow-x: hidden;
  border-inline-end: var(--border-thin) solid var(--color-border-subtle);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 10;
}

.da-sidebar-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 12px;
}

.da-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}

/* Avatar override for new token system */
.da-sidebar .avatar-circle,
.pf-identity .avatar-circle {
  background: linear-gradient(135deg, var(--color-brand-accent),
    color-mix(in srgb, var(--color-brand-accent) 60%, transparent));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-brand-accent) 28%, transparent);
}

.da-welcome {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-foreground);
  margin: 10px 0 3px;
  line-height: 1.3;
}

.da-joindate {
  font-size: 0.71rem;
  font-weight: 500;
  color: var(--color-text-subtle);
  margin: 0;
}

/* Sidebar nav */
.da-sidebar .dashboard-tabs-nav { margin-top: 12px; flex: 1; }

.da-sidebar .dash-tab-btn {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
  padding: 9px 12px;
  border-radius: var(--radius-md);
  gap: 10px;
  transition: background var(--dur-fast, 150ms) var(--ease-standard),
              color var(--dur-fast, 150ms) var(--ease-standard),
              border-color var(--dur-fast, 150ms) var(--ease-standard);
  border-inline-start: 2px solid transparent;
}

.da-sidebar .dash-tab-btn:hover {
  background: color-mix(in srgb, var(--color-brand-accent) 8%, transparent);
  color: var(--color-text-default);
}

.da-sidebar .dash-tab-btn.active {
  background: color-mix(in srgb, var(--color-brand-accent) 12%, transparent);
  color: var(--color-brand-accent);
  font-weight: 700;
  border-inline-start-color: var(--color-brand-accent);
  padding-inline-start: 10px;
}

.da-logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-destructive) 35%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-destructive);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 9px 12px;
  cursor: pointer;
  width: 100%;
  margin-top: 16px;
  transition: background var(--dur-fast, 150ms) var(--ease-standard);
}
.da-logout-btn:hover { background: color-mix(in srgb, var(--color-destructive) 8%, transparent); }

/* Main area */
.da-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--header-h, 60px));
  min-width: 0; /* [Phase 13 ✅] see .da-shell — grid + flex items both default
                   to min-width:auto, so the chip rail's width propagates up
                   through every level unless each one is told it may shrink. */
}

.da-topbar {
  height: 48px;
  display: flex;
  align-items: center;
  padding-inline: 20px;
  gap: 12px;
  background: var(--color-surface);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  flex-shrink: 0;
  position: sticky;
  top: var(--header-h, 60px);
  z-index: 5;
}

.da-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast, 150ms) var(--ease-standard);
}
.da-hamburger:hover { background: var(--color-surface-raised); }

.da-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  color: var(--color-text-subtle);
}

.da-breadcrumb-sep { color: var(--color-text-subtle); flex-shrink: 0; }

.da-breadcrumb-current {
  color: var(--color-foreground);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.da-topbar-end { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.da-account-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  padding: 3px 10px 3px 3px;
}

.da-chip-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-brand-accent);
  color: var(--color-on-accent);
  font-size: 0.63rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.da-chip-name {
  font-family: var(--font-body);
  font-size: 0.77rem;
  font-weight: 800;
  color: var(--color-text-default);
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile chip nav (sub-header tabs) */
.da-chip-nav {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-surface);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  overflow-x: auto;
  flex-shrink: 0;
  min-width: 0; /* [Phase 13 ✅] the rail scrolls; without this it also widens
                   its ancestors to its full 408px content width. */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: calc(var(--header-h, 60px) + 48px);
  z-index: 4;
}
.da-chip-nav::-webkit-scrollbar { display: none; }

.da-chip-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 6px 14px;
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.79rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  scroll-snap-align: start;
  transition: all var(--dur-fast, 150ms) var(--ease-standard);
}
.da-chip-btn.active {
  background: color-mix(in srgb, var(--color-brand-accent) 12%, transparent);
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
}

.da-content-area {
  flex: 1;
  padding: clamp(16px, 2vw, 28px);
}

/* Mobile sidebar overlay */
.da-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.5);
  z-index: 99;
  backdrop-filter: blur(4px);
}
.da-sidebar-overlay.active { display: block; }

/* Section helpers */
.da-section-header { margin-bottom: 20px; }
.da-section-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-foreground);
  margin: 0 0 4px;
}
.da-section-sub {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0;
}

/* Form elements in dashboard context */
.da-content-area .form-group { gap: 5px; }
.da-content-area .form-group label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-default);
}
.da-content-area .form-input {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-foreground);
  transition: border-color var(--dur-fast, 150ms) var(--ease-standard),
              box-shadow var(--dur-fast, 150ms) var(--ease-standard);
}
.da-content-area .form-input:focus {
  border-color: var(--color-brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-accent) 15%, transparent);
  outline: none;
}
.da-content-area .form-input::placeholder { color: var(--color-text-subtle); font-weight: 500; }

/* Responsive: mobile sidebar off-canvas */
@media (max-width: 1023px) {
  .da-shell { grid-template-columns: 1fr; }

  .da-sidebar {
    position: fixed;
    top: var(--header-h, 60px);
    inset-inline-start: calc(-1 * var(--sidebar-w, 240px));
    height: calc(100dvh - var(--header-h, 60px));
    z-index: 100;
    width: var(--sidebar-w, 240px);
    transition: inset-inline-start var(--dur-standard, 250ms) var(--ease-standard);
    box-shadow: var(--shadow-3);
  }
  .da-sidebar.is-open { inset-inline-start: 0; }

  .da-hamburger { display: flex; }
  .da-chip-nav  { display: flex; }

  .da-content-area { padding: 16px; }
}

/* ── Phase 15: Profile Section ─────────────────────────────────── */
.pf-grid {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 20px;
  align-items: start;
}

/* Identity block */
.pf-identity {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: sticky;
  top: calc(var(--header-h, 60px) + 48px + 20px);
}

.pf-id-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-foreground);
  margin: 10px 0 2px;
  line-height: 1.3;
}

.pf-id-email {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--color-text-muted);
  word-break: break-all;
  margin-bottom: 4px;
}

.pf-id-date {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text-subtle);
  margin-bottom: 0;
}

/* Storage bar */
.pf-storage-wrap {
  width: 100%;
  border-top: var(--border-thin) solid var(--color-border-subtle);
  padding-top: 14px;
  margin-top: 14px;
}

.pf-storage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}

.pf-storage-label-text {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.pf-storage-track {
  height: 5px;
  background: var(--color-border-default);
  border-radius: var(--radius-full);
  overflow: hidden;
}

/* #storage-bar is the fill bar — JS sets width via inline style */
.pf-storage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand-accent), var(--color-success));
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 0.45s cubic-bezier(0, 0, 0.2, 1);
}

.pf-storage-meta {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--color-text-subtle);
  margin-top: 5px;
  text-align: center;
}

/* Form column */
.pf-form-col { display: flex; flex-direction: column; gap: 0; }

/* Form section card */
.pf-form-section {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
.pf-form-section:last-child { margin-bottom: 0; }

.pf-form-section-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  background: var(--color-surface-raised);
}

.pf-form-section-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-brand-accent) 10%, transparent);
  color: var(--color-brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pf-form-section-title {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-foreground);
  margin: 0;
}

.pf-section-badge {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-subtle);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}

.pf-form-section-body { padding: 16px 18px; }

/* Locked (read-only) field */
.pf-locked-field { position: relative; }
.pf-locked-field .form-input {
  padding-inline-end: 2.4rem;
  background: color-mix(in srgb, var(--color-surface-raised) 60%, transparent);
  border-style: dashed;
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.pf-lock-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 10px;
  color: var(--color-text-subtle);
  pointer-events: none;
}

/* Prefixed input (@ symbol) */
.pf-prefix-wrap { position: relative; }
.pf-prefix-wrap .form-input { padding-inline-start: 1.7rem; box-sizing: border-box; }
.pf-prefix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: 10px;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}

/* Save row — used as class="pf-form-section pf-save-row"; pf-form-section provides card styling */
.pf-save-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 18px;
}

/* profile-success styled as compact pill when visible */
.pf-save-row .success-msg {
  border-radius: var(--radius-full);
  padding: 5px 14px;
  font-size: 0.78rem;
  margin: 0;
  flex-shrink: 0;
}
.pf-save-row .error-msg {
  margin: 0;
  font-size: 0.8rem;
  flex: 1;
}

#profile-save-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  background: var(--color-brand-accent);
  color: var(--color-on-accent);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--dur-fast, 150ms) var(--ease-standard),
              transform var(--dur-fast, 150ms) var(--ease-standard);
}
#profile-save-btn:hover  { opacity: 0.9; transform: translateY(-1px); }
#profile-save-btn:active { opacity: 1; transform: none; }
#profile-save-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Responsive: tablet — identity block goes horizontal */
@media (max-width: 1199px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-identity {
    position: static;
    flex-direction: row;
    text-align: start;
    align-items: flex-start;
    gap: 16px;
  }
  .pf-identity-details { flex: 1; min-width: 0; }
  .pf-storage-wrap { margin-top: 10px; padding-top: 10px; }
}

/* Phone — stacked, sticky save button */
@media (max-width: 639px) {
  .pf-identity {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .pf-identity-details { width: 100%; }
  .pf-save-row {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0);
    border-radius: 0;
    border: none;
    border-top: var(--border-thin) solid var(--color-border-subtle);
    z-index: 10;
    background: color-mix(in srgb, var(--color-surface) 95%, transparent);
    backdrop-filter: blur(8px);
  }
  #profile-save-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   POLISH LAYER — Phases 13-15: Sub-animations, UI refinements, SVG
   ═══════════════════════════════════════════════════════════════════════ */

/* ── P13: Liquid animated gradient via @property ─────────────────────── */
@property --au-gx1 { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --au-gy1 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --au-gx2 { syntax: '<percentage>'; inherits: false; initial-value: 70%; }
@property --au-gy2 { syntax: '<percentage>'; inherits: false; initial-value: 80%; }

/* Override static mesh — liquid dual-radial that animates stop positions */
.au-brand-panel::before {
  background:
    radial-gradient(ellipse 62% 55% at var(--au-gx1) var(--au-gy1),
      color-mix(in srgb, var(--color-brand-accent) 28%, transparent),
      transparent 72%),
    radial-gradient(ellipse 56% 52% at var(--au-gx2) var(--au-gy2),
      color-mix(in srgb, var(--color-brand-accent) 16%, transparent),
      transparent 68%);
  animation: au-liquid-1 9s ease-in-out infinite alternate,
             au-liquid-2 13s ease-in-out infinite alternate-reverse;
  opacity: 1;
  transform: none;
}
@keyframes au-liquid-1 {
  0%   { --au-gx1: 25%; --au-gy1: 18%; }
  50%  { --au-gx1: 44%; --au-gy1: 38%; }
  100% { --au-gx1: 30%; --au-gy1: 58%; }
}
@keyframes au-liquid-2 {
  0%   { --au-gx2: 74%; --au-gy2: 78%; }
  50%  { --au-gx2: 56%; --au-gy2: 56%; }
  100% { --au-gx2: 82%; --au-gy2: 28%; }
}

/* ── P13: Floating geometric shapes ──────────────────────────────────── */
.au-brand-floats {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.au-float { position: absolute; pointer-events: none; }

.au-float-1 {
  width: 112px; height: 112px;
  top: 11%; inset-inline-start: 13%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-brand-accent) 9%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-brand-accent) 20%, transparent);
  animation: au-drift-1 17s ease-in-out infinite;
}
.au-float-2 {
  width: 66px; height: 66px;
  top: 50%; inset-inline-end: 11%;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-brand-accent) 7%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-brand-accent) 14%, transparent);
  animation: au-drift-2 21s ease-in-out infinite;
  transform: rotate(22deg);
}
.au-float-3 {
  width: 40px; height: 40px;
  bottom: 20%; inset-inline-start: 30%;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-brand-accent) 6%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-brand-accent) 12%, transparent);
  animation: au-drift-3 14s ease-in-out infinite;
}

@keyframes au-drift-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-22px) rotate(7deg); }
  66%       { transform: translateY(11px) rotate(-4deg); }
}
@keyframes au-drift-2 {
  0%, 100% { transform: rotate(22deg) translateY(0); }
  42%       { transform: rotate(33deg) translateY(16px); }
  72%       { transform: rotate(15deg) translateY(-10px); }
}
@keyframes au-drift-3 {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%       { transform: rotate(18deg) scale(1.2); }
}

/* ── P13: Brand icon outer ring pulse ───────────────────────────────── */
.au-brand-icon { position: relative; }
.au-brand-icon::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: calc(var(--radius-xl) + 8px);
  border: 1.5px solid color-mix(in srgb, var(--color-brand-accent) 26%, transparent);
  animation: au-icon-ring 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes au-icon-ring {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.08); }
}

/* ── P13: Form fields staggered entrance ────────────────────────────── */
@keyframes au-field-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.au-form-inner .auth-tabs {
  animation: au-field-up 0.32s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.03s;
}
.au-form-inner .form-group {
  animation: au-field-up 0.32s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both;
}
.au-form-inner .form-group:nth-child(1) { animation-delay: 0.06s; }
.au-form-inner .form-group:nth-child(2) { animation-delay: 0.11s; }
.au-form-inner .form-group:nth-child(3) { animation-delay: 0.16s; }
.au-form-inner .form-group:nth-child(4) { animation-delay: 0.21s; }
.au-form-inner .form-group:nth-child(5) { animation-delay: 0.26s; }
.au-form-inner .form-group:nth-child(6) { animation-delay: 0.31s; }
.au-form-inner .form-group:nth-child(7) { animation-delay: 0.36s; }

.au-form-inner .au-form-section-label {
  animation: au-field-up 0.32s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.08s;
}

/* ── P13: Submit button icon nudge ──────────────────────────────────── */
.au-outer .primary-btn .btn-icon {
  transition: transform var(--dur-fast, 150ms) var(--ease-standard);
  flex-shrink: 0;
}
.au-outer .primary-btn:hover .btn-icon { transform: translateX(3px); }

/* ── P13: Input focus left accent ───────────────────────────────────── */
.au-outer .form-input { border-inline-start-width: 2px; }
.au-outer .form-input:focus { border-inline-start-color: var(--color-brand-accent); }

/* ── P13: Brand badges staggered entrance ───────────────────────────── */
@keyframes au-badge-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}
.au-brand-badge:nth-child(1) {
  animation: au-badge-in 0.36s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.22s;
}
.au-brand-badge:nth-child(2) {
  animation: au-badge-in 0.36s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.34s;
}
.au-brand-badge:nth-child(3) {
  animation: au-badge-in 0.36s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.46s;
}

/* ── P14: Sidebar active indicator — animated ::before line ─────────── */
.da-sidebar .dash-tab-btn { position: relative; overflow: hidden; }
.da-sidebar .dash-tab-btn::before {
  content: '';
  position: absolute;
  inset-block: 20%;
  inset-inline-start: 0;
  width: 2px;
  background: var(--color-brand-accent);
  border-radius: 1px;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.2s var(--ease-decel, cubic-bezier(0,0,0.2,1));
}
.da-sidebar .dash-tab-btn.active::before { transform: scaleY(1); }
/* ::before handles the accent — hide the static border */
.da-sidebar .dash-tab-btn.active { border-inline-start-color: transparent; }

/* ── P14: Dashboard section fade-in (class toggled by inline script) ── */
@keyframes da-section-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.dash-section.da-entering {
  animation: da-section-fade 0.22s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both;
}

/* ── P14: Topbar scroll shadow ──────────────────────────────────────── */
.da-topbar {
  transition: box-shadow var(--dur-fast, 150ms) var(--ease-standard),
              border-bottom-color var(--dur-fast, 150ms) var(--ease-standard);
}
.da-topbar.scrolled {
  box-shadow: var(--shadow-1);
  border-bottom-color: var(--color-border-default);
}

/* ── P14: Avatar entrance ───────────────────────────────────────────── */
@keyframes da-avatar-appear {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
.da-sidebar .avatar-circle {
  animation: da-avatar-appear 0.4s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.06s;
}

/* ── P14: Sidebar tab stagger ───────────────────────────────────────── */
.da-sidebar .dash-tab-btn:nth-child(1) {
  animation: au-field-up 0.28s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.05s;
}
.da-sidebar .dash-tab-btn:nth-child(2) {
  animation: au-field-up 0.28s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.11s;
}
.da-sidebar .dash-tab-btn:nth-child(3) {
  animation: au-field-up 0.28s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.17s;
}
.da-sidebar .dash-tab-btn:nth-child(4) {
  animation: au-field-up 0.28s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.23s;
}

/* ── P14: Account chip hover refinement ─────────────────────────────── */
.da-account-chip {
  cursor: default;
  transition: background var(--dur-fast, 150ms) var(--ease-standard),
              box-shadow var(--dur-fast, 150ms) var(--ease-standard);
}
.da-account-chip:hover {
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}

/* ── P15: Profile section card stagger ──────────────────────────────── */
@keyframes pf-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.pf-form-col .pf-form-section:nth-child(1) {
  animation: pf-card-in 0.35s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.04s;
}
.pf-form-col .pf-form-section:nth-child(2) {
  animation: pf-card-in 0.35s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.10s;
}
.pf-form-col .pf-form-section:nth-child(3) {
  animation: pf-card-in 0.35s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.16s;
}
.pf-form-col .pf-form-section:nth-child(4) {
  animation: pf-card-in 0.35s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.22s;
}

/* ── P15: Identity block entrance ───────────────────────────────────── */
.pf-identity {
  animation: au-field-up 0.4s var(--ease-decel, cubic-bezier(0,0,0.2,1)) both 0.02s;
}

/* ── P15: Section card hover lift ───────────────────────────────────── */
.pf-form-section {
  transition: border-color var(--dur-fast, 150ms) var(--ease-standard),
              box-shadow var(--dur-fast, 150ms) var(--ease-standard);
}
.pf-form-section:not(.pf-save-row):hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-1);
}

/* ── P15: Section icon subtle rotate on hover ───────────────────────── */
.pf-form-section-icon {
  transition: transform 0.25s var(--ease-standard, ease);
  will-change: transform;
}
.pf-form-section:hover .pf-form-section-icon { transform: rotate(8deg); }

/* ── P15: Locked field shimmer ──────────────────────────────────────── */
@keyframes pf-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.pf-locked-field .form-input:disabled {
  background: linear-gradient(
    90deg,
    var(--color-surface-raised) 20%,
    color-mix(in srgb, var(--color-border-default) 50%, var(--color-surface-raised)) 50%,
    var(--color-surface-raised) 80%
  );
  background-size: 200% 100%;
  animation: pf-shimmer 3s ease-in-out infinite;
}

/* ── P15: Storage bar glow pulse ────────────────────────────────────── */
@keyframes pf-bar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-brand-accent) 0%, transparent); }
  50%       { box-shadow: 0 0 10px 2px color-mix(in srgb, var(--color-brand-accent) 22%, transparent); }
}
.pf-storage-fill { animation: pf-bar-pulse 3.4s ease-in-out infinite; }

/* ── P15: Save button icon scale ────────────────────────────────────── */
#profile-save-btn svg {
  transition: transform var(--dur-fast, 150ms) var(--ease-standard);
  flex-shrink: 0;
}
#profile-save-btn:hover svg { transform: scale(1.18); }

/* ── Reduced motion — disable all polish animations ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .au-float,
  .au-brand-panel::before,
  .au-brand-icon::after,
  .au-form-inner .form-group,
  .au-form-inner .auth-tabs,
  .au-form-inner .au-form-section-label,
  .au-brand-badge,
  .da-sidebar .avatar-circle,
  .da-sidebar .dash-tab-btn,
  .dash-section.da-entering,
  .pf-form-col .pf-form-section,
  .pf-identity,
  .pf-storage-fill,
  .pf-locked-field .form-input:disabled { animation: none !important; }

  .da-sidebar .dash-tab-btn::before { transition: none !important; }
  .da-topbar { transition: none !important; }

  .au-outer .primary-btn .btn-icon,
  .pf-form-section-icon,
  #profile-save-btn svg,
  .da-account-chip,
  .pf-form-section { transition: none !important; }

  .au-outer .primary-btn:hover .btn-icon,
  .pf-form-section:hover .pf-form-section-icon,
  #profile-save-btn:hover svg { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 16 — Order History + Tracking Modal [account.html ✅]
   ═══════════════════════════════════════════════════════════════════════ */

/* ── P16: Order card list ────────────────────────────────────────────── */
.oh-list { display: flex; flex-direction: column; gap: 10px; }

.oh-card {
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--dur-fast, 150ms) var(--ease-standard),
              box-shadow var(--dur-fast, 150ms) var(--ease-standard);
}
.oh-card:hover { border-color: var(--color-border-default); box-shadow: var(--shadow-1); }

.oh-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap;
}
.oh-card-row:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }

.oh-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.oh-order-id {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-foreground);
  white-space: nowrap;
}
.oh-date { font-size: 0.77rem; color: var(--color-text-muted); white-space: nowrap; }
.oh-items-preview {
  font-size: 0.77rem;
  color: var(--color-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.oh-total {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-brand-accent);
  white-space: nowrap;
}

/* Status pills */
.oh-status-pill {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: var(--border-thin) solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.oh-status-pending, .oh-status-stalled {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.oh-status-confirmed, .oh-status-approved {
  color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}
.oh-status-shipping {
  color: var(--color-accent);
  background: color-mix(in srgb, #8b5cf6 10%, transparent);
  border-color: color-mix(in srgb, #8b5cf6 30%, transparent);
}
.oh-status-delivered, .oh-status-completed {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.oh-status-cancelled {
  color: var(--color-destructive);
  background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-destructive) 30%, transparent);
}

.oh-chevron {
  color: var(--color-text-subtle);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-decel, cubic-bezier(0,0,0.2,1));
}
.oh-card.is-open .oh-chevron { transform: rotate(180deg); }

.oh-expand-panel {
  display: none;
  padding: 0 16px 16px;
  border-top: var(--border-thin) solid var(--color-border-subtle);
}
.oh-card.is-open .oh-expand-panel { display: block; }

.oh-items-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 12px 0; }
.oh-items-table th {
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 4px;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  text-align: start;
}
.oh-items-table td {
  padding: 8px 4px;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  color: var(--color-text-default);
  vertical-align: top;
}
.oh-items-table tr:last-child td { border-bottom: none; }
.oh-item-qty { color: var(--color-text-muted); font-size: 0.78rem; }
.oh-price-cell {
  text-align: end;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-brand-accent);
  white-space: nowrap;
}

.oh-track-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--color-brand-accent);
  background: transparent;
  color: var(--color-brand-accent);
  cursor: pointer;
  transition: background var(--dur-fast, 150ms) var(--ease-standard),
              color var(--dur-fast, 150ms) var(--ease-standard);
}
.oh-track-btn:hover { background: var(--color-brand-accent); color: var(--color-on-accent); }

.oh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 3rem 1rem;
  text-align: center;
}
.oh-empty-icon { color: var(--color-border-strong); }
.oh-empty-title { font-size: 0.95rem; font-weight: 800; color: var(--color-text-default); margin: 0; }
.oh-empty-sub { font-size: 0.82rem; color: var(--color-text-muted); margin: 0; }

@keyframes oh-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.oh-skeleton-card {
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.oh-skeleton-line {
  height: 12px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    90deg,
    var(--color-border-subtle) 0%,
    var(--color-surface-raised) 50%,
    var(--color-border-subtle) 100%
  );
  background-size: 200% 100%;
  animation: oh-shimmer 1.8s ease-in-out infinite;
}

/* ── P16: Tracking Modal ─────────────────────────────────────────────── */
.tm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, #020617 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}
.tm-panel {
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 620px;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-4);
  overflow: hidden;
}
.tm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  flex-shrink: 0;
  gap: 12px;
}
.tm-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--color-foreground);
}
.tm-order-id-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--color-brand-accent) 10%, transparent);
  color: var(--color-brand-accent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-brand-accent) 25%, transparent);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}
.tm-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--color-border-subtle);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast, 150ms) var(--ease-standard),
              color var(--dur-fast, 150ms) var(--ease-standard);
}
.tm-close-btn:hover { background: var(--color-surface); color: var(--color-foreground); }
.tm-body { overflow-y: auto; flex: 1; }

@media (max-width: 639.98px) {
  .tm-panel {
    max-height: 94dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 17 — Wishlist Grid [account.html ✅]
   ═══════════════════════════════════════════════════════════════════════ */

#wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.wl-card {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-fast, 150ms) var(--ease-standard),
              box-shadow var(--dur-fast, 150ms) var(--ease-standard),
              transform var(--dur-fast, 150ms) var(--ease-standard);
}
.wl-card:hover { border-color: var(--color-border-default); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.wl-img-wrap { aspect-ratio: 4/5; overflow: hidden; background: var(--color-surface-raised); }
.wl-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.3s var(--ease-standard);
}
.wl-card:hover .wl-img { transform: scale(1.04); }
.wl-meta { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wl-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-foreground);
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wl-price { font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; color: var(--color-brand-accent); margin: 0; }
.wl-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
.wl-view-btn {
  flex: 1;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius-sm);
  background: var(--color-brand-accent);
  color: var(--color-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-fast, 150ms) var(--ease-standard);
}
.wl-view-btn:hover { opacity: 0.88; }
.wl-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-destructive) 35%, transparent);
  background: color-mix(in srgb, var(--color-destructive) 6%, transparent);
  color: var(--color-destructive);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
  transition: background var(--dur-fast, 150ms) var(--ease-standard);
}
.wl-remove-btn:hover { background: color-mix(in srgb, var(--color-destructive) 12%, transparent); }
.wl-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 3rem 1rem; text-align: center;
}
.wl-empty-icon { color: var(--color-border-strong); }
.wl-empty-title { font-size: 0.95rem; font-weight: 800; color: var(--color-text-default); margin: 0; }
.wl-empty-sub { font-size: 0.82rem; color: var(--color-text-muted); margin: 0; }

@media (max-width: 479.98px) {
  #wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 18 — Loyalty Section [account.html ✅]
   ═══════════════════════════════════════════════════════════════════════ */

.ly-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  background: color-mix(in srgb, var(--color-brand-accent) 8%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-brand-accent) 20%, transparent);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 22px;
}
.ly-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-brand-accent) 14%, transparent);
  color: var(--color-brand-accent);
  flex-shrink: 0;
}
.ly-points-label { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 500; margin-bottom: 3px; }
.ly-points-val { font-family: var(--font-mono); font-size: 2rem; font-weight: 800; color: var(--color-foreground); line-height: 1; }
.ly-points-val span { font-size: 1rem; font-weight: 500; color: var(--color-text-muted); }

.ly-tabs {
  display: flex;
  gap: 2px;
  border-bottom: var(--border-thin) solid var(--color-border-default);
  margin-bottom: 18px;
}
.ly-tab-btn {
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--dur-fast, 150ms) var(--ease-standard),
              border-bottom-color var(--dur-fast, 150ms) var(--ease-standard);
}
.ly-tab-btn.active { color: var(--color-brand-accent); border-bottom-color: var(--color-brand-accent); }
.ly-tab-btn:hover:not(.active) { color: var(--color-text-default); }

.ly-ticket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ly-ticket-card {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--dur-fast, 150ms) var(--ease-standard),
              box-shadow var(--dur-fast, 150ms) var(--ease-standard);
}
.ly-ticket-card:hover:not(.is-disabled) {
  border-color: color-mix(in srgb, var(--color-brand-accent) 40%, transparent);
  box-shadow: var(--shadow-1);
}
.ly-ticket-card.is-disabled { opacity: 0.5; }
.ly-ticket-label { font-size: 0.9rem; font-weight: 700; color: var(--color-foreground); margin: 0; }
.ly-ticket-details { font-size: 0.78rem; color: var(--color-text-muted); margin: 0; }
.ly-ticket-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; gap: 8px; }
.ly-ticket-cost { font-family: var(--font-mono); font-weight: 700; font-size: 0.88rem; color: var(--color-brand-accent); }
.ly-redeem-btn {
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--color-brand-accent);
  background: transparent;
  color: var(--color-brand-accent);
  cursor: pointer;
  transition: background var(--dur-fast, 150ms) var(--ease-standard),
              color var(--dur-fast, 150ms) var(--ease-standard);
}
.ly-redeem-btn:hover:not(:disabled) { background: var(--color-brand-accent); color: var(--color-on-accent); }
.ly-redeem-btn:disabled { cursor: not-allowed; opacity: 0.5; }

.ly-success {
  margin-top: 20px;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 30%, transparent);
  border-radius: var(--radius-md);
}
.ly-success-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-success);
  margin-bottom: 5px;
}
.ly-success-sub { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 12px; }
.ly-coupon-row { display: flex; gap: 8px; align-items: center; }
.ly-coupon-input {
  flex: 1;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  padding: 8px 12px;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-foreground);
  text-align: center;
  outline: none;
}
.ly-copy-btn {
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
  background: var(--color-brand-accent);
  color: var(--color-on-accent);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--dur-fast, 150ms) var(--ease-standard);
}
.ly-copy-btn:hover { opacity: 0.88; }

.ly-my-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ly-my-ticket-card {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ly-my-ticket-top { display: flex; justify-content: space-between; align-items: center; }
.ly-my-status-pill {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: var(--border-thin) solid;
}
.ly-my-status-active {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.ly-my-status-used {
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent);
}
.ly-my-status-expired {
  color: var(--color-destructive);
  background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-destructive) 30%, transparent);
}
.ly-my-expiry { font-size: 0.72rem; color: var(--color-text-subtle); }
.ly-my-details { font-size: 0.85rem; font-weight: 600; color: var(--color-text-default); margin: 0; }
.ly-code-row { display: flex; gap: 6px; align-items: center; }
.ly-code-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 8px;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-foreground);
  text-align: center;
  outline: none;
  cursor: text;
}
.ly-copy-code-btn {
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--color-border-default);
  background: var(--color-surface-raised);
  color: var(--color-text-default);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast, 150ms) var(--ease-standard),
              color var(--dur-fast, 150ms) var(--ease-standard);
}
.ly-copy-code-btn:hover { border-color: var(--color-brand-accent); color: var(--color-brand-accent); }

/* ── Extend reduced-motion to P16-18 ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .oh-skeleton-line { animation: none !important; }
  .oh-chevron,
  .wl-card, .oh-card, .ly-ticket-card,
  .wl-img, .oh-track-btn, .ly-redeem-btn,
  .ly-tab-btn, .ly-copy-btn, .wl-view-btn,
  .tm-close-btn { transition: none !important; }
  .wl-card:hover { transform: none !important; }
  .wl-card:hover .wl-img { transform: none !important; }
}

/* ── Tracking Modal — stepper centering + animations + icon polish ── */

/* 1. Center stepper column inside modal body */
.tm-body .tk-progress-wrap {
  display: flex;
  justify-content: center;
  padding: 28px 24px 24px;
}
.tm-body .tk-stepper {
  width: 100%;
  max-width: 230px;
  margin-inline: auto;
}

/* 2a. Current step node: expanding ring pulse */
@keyframes tk-node-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-accent) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-brand-accent) 0%, transparent),
                0 0 0 4px color-mix(in srgb, var(--color-brand-accent) 15%, transparent);
  }
}
.tm-body .tk-step.step-current .tk-step-node {
  animation: tk-node-pulse 2s ease-in-out infinite;
}

/* 2b. Done connector line: flowing shimmer top → bottom */
@keyframes tk-line-flow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}
.tm-body .tk-step.step-done:not(:last-child)::after {
  background: linear-gradient(
    180deg,
    var(--color-brand-accent) 0%,
    color-mix(in srgb, var(--color-brand-accent) 40%, transparent) 50%,
    var(--color-brand-accent) 100%
  );
  background-size: 100% 300%;
  animation: tk-line-flow 1.8s linear infinite;
}

/* 3. Current step icon: gentle bob */
@keyframes tk-icon-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-2px) scale(1.1); }
}
.tm-body .tk-step.step-current .tk-step-node svg {
  animation: tk-icon-bob 1.8s ease-in-out infinite;
}

/* 4. Done step icon: subtle breathe */
@keyframes tk-icon-breathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}
.tm-body .tk-step.step-done .tk-step-node svg {
  animation: tk-icon-breathe 2.4s ease-in-out infinite;
}

/* 5. Receipt table headers: mono font + explicit alignment */
.tm-body .tk-receipt-table th {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: start;
  vertical-align: middle;
}
.tm-body .tk-receipt-table th:last-child {
  text-align: end;
}
.tm-body .tk-receipt-table th svg {
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 4px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Disable all tracking modal animations for reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .tm-body .tk-step.step-current .tk-step-node,
  .tm-body .tk-step.step-done:not(:last-child)::after,
  .tm-body .tk-step.step-current .tk-step-node svg,
  .tm-body .tk-step.step-done .tk-step-node svg { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   [Phase 13 ✅] Phone header fit — 375px and 320px
   The header row is brand + currency + language + theme, none of it
   shrinkable, and the language pill is wider in Arabic ("العربية" beats
   "English"). At 375px that came to 360px of content in 343px of box, so
   the theme toggle was clipped at the left edge under RTL. Tighten the
   gutter and the pill padding rather than dropping a control — every one
   of them keeps its 44px touch floor, which is set on min-height, not on
   the padding this block touches.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* track.html links this stylesheet and .tk-header is the same shape as
     .ac-header — same three controls, same overflow, so it gets the same
     treatment rather than a second copy of it. */
  .ac-header,
  .tk-header {
    /* `max()` folds in the landscape notch inset — see the note beside the
       safe-area block in common.css for why it cannot live there. */
    padding-inline-start: max(12px, env(safe-area-inset-left));
    padding-inline-end: max(12px, env(safe-area-inset-right));
    gap: 8px;
  }
  .ac-header-controls,
  .tk-header-controls { gap: 5px; }

  /* The brand is the only thing that may give, and only after the controls
     have. It never truncates at 375px; at 320px it clips from the logical
     end in both directions — `ellipsis` is deliberately not used here,
     because under RTL it eats the START of the string (Phase 9 lesson). */
  .ac-header-brand { flex-shrink: 1; min-width: 0; overflow: hidden; }
  .ac-header-brand .shop-name-title {
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
  }
  /* track.html carries a third item in the row: back link + shop name +
     controls. The SHOP NAME is the one that gives — it is also in the page
     title and on the receipt — while the back link keeps a floor, because it
     is the only navigation on the page. An earlier pass let .tk-back shrink
     too and it collapsed to 13px wide: a 44px-tall target you cannot hit. */
  .tk-back {
    flex: 0 0 auto;
    min-width: 44px;
    overflow: hidden;
  }
  .tk-shop-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
  }

  .tk-ctrl-btn { padding: 0 9px; font-size: 0.74rem; }
  .tk-ctrl-select { padding: 5px 8px; font-size: 0.74rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   [Phase 13 ✅] Touch-target floor — 44×44, measured not assumed
   Every selector below was measured under 44px on a 375px phone by the
   Phase 13 harness, in both languages. Note the pattern: Arabic renders
   these 4–5px taller than English (43 vs 38 on the dashboard tabs), so
   English is always the failing case and a floor set here serves both.

   `common.css` carries a global 44px baseline, but it loads FIRST — a
   component rule in this file beats it every time. The floor has to be
   restated where the component actually lives, which is why this block
   exists rather than a wider selector upstream.

   Native checkboxes and radios are deliberately absent: their hit area is
   the wrapping <label>, which already clears 44px. The harness models that
   and reported none — a checker that does not will flag every one of them.
   ══════════════════════════════════════════════════════════════════════ */
.da-hamburger {
  width: 44px;
  height: 44px;
}

.da-chip-btn {
  min-height: 44px;
  padding-block: 0;
}

.dash-tab-btn,
.da-logout-btn,
.loyalty-tab-btn,
.ly-tab-btn,
#profile-save-btn {
  min-height: 44px;
}

/* ≥8px between adjacent targets (Apple HIG / Material). The dashboard tab
   column and the chip rail both sat at 4–6px. */
.da-chip-nav { gap: 8px; }
.dashboard-tabs-nav { gap: 8px; }

/* ══════════════════════════════════════════════════════════════════════
   [Phase 13 ✅] Phone topbar — the breadcrumb wins the space fight
   At 375px the row is hamburger + breadcrumb + avatar + customer name.
   In Arabic the name chip took 157px and squeezed «الملف الشخصي» down to
   «الملـ…» — three characters of the label telling the merchant's customer
   where they are. The name is redundant on a phone: the profile card two
   rows below shows the same avatar and the same name at full size, so the
   chip keeps its avatar (identity at a glance) and folds the text away.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .da-chip-name { display: none; }
  .da-breadcrumb { min-width: 0; flex: 1; }
  .da-breadcrumb-current { min-width: 0; }
}