/* ============================================================
   Material Design 3 — Complete Design System
   ============================================================ */
:root {
  --md-primary: #0b57d0;
  --md-on-primary: #ffffff;
  --md-primary-container: #d3e3fd;
  --md-on-primary-container: #041e49;
  --md-secondary-container: #dde3ea;
  --md-on-secondary-container: #151c24;
  --md-surface: #faf9fd;
  --md-surface-dim: #d9d9dd;
  --md-surface-container: #efedf1;
  --md-surface-container-high: #e9e7ec;
  --md-surface-container-highest: #e3e2e6;
  --md-on-surface: #1b1b1f;
  --md-on-surface-variant: #44474e;
  --md-outline: #74777f;
  --md-outline-variant: #c4c6d0;
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-success: #1e6d32;
  --md-elevation-1: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3);
  --md-elevation-2: 0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3);
  --md-shape-corner-xl: 28px;
  --md-shape-corner-l: 16px;
  --md-shape-corner-m: 12px;
  --md-shape-corner-s: 8px;
  --md-shape-corner-full: 1000px;
  --md-motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-motion-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
}

[data-theme="dark"] {
  --md-primary: #a8c7fa;
  --md-on-primary: #062e6f;
  --md-primary-container: #0842a0;
  --md-on-primary-container: #d3e3fd;
  --md-secondary-container: #3e4759;
  --md-on-secondary-container: #dae2f9;
  --md-surface: #121316;
  --md-surface-dim: #121316;
  --md-surface-container: #201f23;
  --md-surface-container-high: #2b2a2e;
  --md-surface-container-highest: #363539;
  --md-on-surface: #e3e2e6;
  --md-on-surface-variant: #c4c6d0;
  --md-outline: #8e9099;
  --md-outline-variant: #44474e;
  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
}

/* Green MD3 */
[data-color="green"] {
  --md-primary: #146c2e; --md-on-primary: #ffffff;
  --md-primary-container: #a2f5ab; --md-on-primary-container: #002106;
}
[data-theme="dark"][data-color="green"] {
  --md-primary: #87d891; --md-on-primary: #003912;
  --md-primary-container: #00531f; --md-on-primary-container: #a2f5ab;
}

/* Purple MD3 */
[data-color="purple"] {
  --md-primary: #6f43c0; --md-on-primary: #ffffff;
  --md-primary-container: #ebddff; --md-on-primary-container: #250058;
}
[data-theme="dark"][data-color="purple"] {
  --md-primary: #d0bcff; --md-on-primary: #3d008f;
  --md-primary-container: #5727a6; --md-on-primary-container: #ebddff;
}

/* Rose / Red MD3 */
[data-color="red"] {
  --md-primary: #b3261e; --md-on-primary: #ffffff;
  --md-primary-container: #f9dedc; --md-on-primary-container: #410e0b;
}
[data-theme="dark"][data-color="red"] {
  --md-primary: #f2b8b5; --md-on-primary: #601410;
  --md-primary-container: #8c1d18; --md-on-primary-container: #f9dedc;
}

/* Orange MD3 */
[data-color="orange"] {
  --md-primary: #e65100; --md-on-primary: #ffffff;
  --md-primary-container: #ffdbcc; --md-on-primary-container: #2c1600;
}
[data-theme="dark"][data-color="orange"] {
  --md-primary: #ffb599; --md-on-primary: #5a1c00;
  --md-primary-container: #8a2e00; --md-on-primary-container: #ffdbcc;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html { 
  -webkit-text-size-adjust: 100%; 
}
body {
  font-family: 'Outfit', -apple-system, 'Segoe UI', sans-serif;
  background: var(--md-surface); 
  color: var(--md-on-surface);
  height: 100vh; 
  width: 100%; 
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 0; height: 0; }
input, select, button { font-family: inherit; }

/* ============================================================
   App Shell — Mobile First Design
   ============================================================ */
#appShell {
  width: 100%; height: 100vh;
  display: flex; flex-direction: column; position: relative;
  background: var(--md-surface);
  animation: appIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes appIn {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   Top App Bar (M3)
   ============================================================ */
.top-app-bar {
  height: 64px; padding: 0 16px; display: flex; align-items: center;
  justify-content: space-between; flex-shrink: 0;
  position: sticky; top: 0; z-index: 100; background: var(--md-surface);
}
.top-app-bar h1 { font-size: 22px; font-weight: 700; color: var(--md-primary); margin: 0; }
.icon-btn {
  width: 48px; height: 48px; border-radius: 50%; border: none; background: none;
  color: var(--md-on-surface-variant); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: background 0.2s;
}
.icon-btn:hover { background: var(--md-surface-container-high); }
.icon-btn:active { background: var(--md-surface-container-highest); }
.icon-btn svg { width: 24px; height: 24px; fill: currentColor; }
#editBtn { display: none; }
#pageCodes.active ~ .fab-container #editBtn,
#pageCodes.active #editBtn { display: flex; }

/* ============================================================
   Content Area
   ============================================================ */
.content-wrapper { flex: 1; overflow: hidden; position: relative; }
.content { position: absolute; inset: 0; overflow-y: auto; padding: 0 16px 16px; }

/* ---- Search Bar ---- */
.search-bar {
  height: 48px; background: var(--md-surface-container-high);
  border-radius: var(--md-shape-corner-full); display: flex;
  align-items: center; padding: 0 16px; gap: 12px; margin-bottom: 16px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid transparent; flex-shrink: 0;
}
.search-bar:focus-within {
  background: var(--md-surface-container-highest);
  border-color: var(--md-primary);
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.search-bar svg { width: 20px; height: 20px; fill: var(--md-outline); flex-shrink: 0; }
.search-bar input {
  flex: 1; border: none; background: none; font-size: 16px;
  color: var(--md-on-surface); outline: none;
}
.search-bar input::placeholder { color: var(--md-outline); }

/* ---- Status Card ---- */
.status-card {
  background: var(--md-primary); color: var(--md-on-primary);
  border-radius: var(--md-shape-corner-xl); padding: 24px; margin-bottom: 20px;
  display: flex; justify-content: space-between; align-items: center;
}
.status-card .label { font-size: 12px; opacity: 0.85; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.status-card .value { font-size: 24px; font-weight: 700; margin-top: 2px; }
.status-stats { display: flex; gap: 32px; text-align: center; }
.status-stats .num { font-size: 20px; font-weight: 700; }
.status-stats .sub { font-size: 11px; opacity: 0.7; }

/* ---- Color Theme Chips ---- */
.color-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: transparent;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.color-btn.active { color: #fff; transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.color-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* ---- Account Card ---- */
.account-card {
  background: var(--md-surface-container); border-radius: var(--md-shape-corner-l);
  padding: 16px 20px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px;
  cursor: pointer; position: relative; border: 2px solid transparent;
  transition: transform 0.15s var(--md-motion-standard), background 0.15s, border-color 0.15s;
}
.account-card:active { transform: scale(0.97); }
.account-card.selected { border-color: var(--md-primary); background: var(--md-primary-container); }
.account-card .avatar {
  width: 44px; height: 44px; border-radius: var(--md-shape-corner-m);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.account-card .details { flex: 1; min-width: 0; }
.account-card .acct-name {
  font-size: 14px; font-weight: 600; color: var(--md-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-card .acct-issuer { font-size: 12px; color: var(--md-outline); }
.account-card .otp-code {
  font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 700;
  color: var(--md-primary); letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}
.account-card .otp-code.expiring { color: var(--md-error); animation: blink 0.8s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
.account-card .timer { font-size: 12px; font-weight: 700; color: var(--md-outline); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }

.progress-track {
  position: absolute; bottom: 0; left: 20px; right: 20px; height: 3px;
  background: var(--md-outline-variant); border-radius: 2px; overflow: hidden;
}
.progress-fill { height: 100%; background: var(--md-primary); border-radius: 2px; transition: width 1s linear; }

/* ---- Google-style Circular Countdown ---- */
.circular-timer {
  width: 36px; height: 36px; flex-shrink: 0; position: relative;
}
.circular-timer svg { width: 36px; height: 36px; transform: rotate(-90deg); }
.circular-timer .ring-bg { fill: none; stroke: var(--md-outline-variant); stroke-width: 3; }
.circular-timer .ring-fg { fill: none; stroke: var(--md-primary); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.circular-timer .ring-fg.expiring { stroke: var(--md-error); }
.circular-timer .ct-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--md-on-surface);
  font-variant-numeric: tabular-nums;
}
.circular-timer .ct-text.expiring { color: var(--md-error); }

/* ---- Empty State ---- */
.empty-state { text-align: center; padding: 80px 20px 40px; }
.empty-state svg { width: 64px; height: 64px; fill: var(--md-outline-variant); margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; margin-bottom: 8px; color: var(--md-on-surface); }
.empty-state p { font-size: 14px; color: var(--md-outline); }

/* ---- Group Filter Chips ---- */
.group-chips { 
  display: flex; 
  justify-content: center; 
  gap: 8px; 
  overflow-x: auto; 
  padding: 0 0 12px; 
  scrollbar-width: none;
  flex-wrap: wrap;
}
.group-chips::-webkit-scrollbar { display: none; }
.group-chip {
  flex-shrink: 0; height: 32px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--md-outline);
  background: none; color: var(--md-on-surface); font-size: 13px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center;
}
.group-chip.active { background: var(--md-primary); color: var(--md-on-primary); border-color: var(--md-primary); }

/* ---- Selection Toolbar ---- */
.sel-toolbar {
  position: absolute; top: 0; left: 0; right: 0; height: 64px;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  display: flex; align-items: center; padding: 0 8px; gap: 8px; z-index: 200;
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sel-toolbar.active { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* ============================================================
   Page Views (Settings / Sync)
   ============================================================ */
.page { display: none; }
.page.active { 
  display: block; 
  animation: pageGlideIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; 
}
@keyframes pageGlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.settings-group { margin-bottom: 24px; }
.settings-group-title { font-size: 14px; font-weight: 700; color: var(--md-primary); padding: 8px 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.settings-item {
  display: flex; align-items: center; gap: 16px; padding: 16px;
  border-radius: var(--md-shape-corner-m); cursor: pointer;
}
.settings-item:active { background: var(--md-surface-container-high); }
.settings-item svg { width: 24px; height: 24px; fill: var(--md-on-surface-variant); flex-shrink: 0; }
.settings-item .si-text { flex: 1; }
.settings-item .si-title { font-size: 16px; font-weight: 500; }
.settings-item .si-desc { font-size: 13px; color: var(--md-outline); margin-top: 2px; }

/* M3 Switch */
.m3-switch { position: relative; width: 52px; height: 32px; flex-shrink: 0; }
.m3-switch input { opacity: 0; width: 0; height: 0; }
.m3-switch .track {
  position: absolute; inset: 0; border-radius: 16px; border: 2px solid var(--md-outline);
  background: var(--md-surface-container-highest); transition: 0.3s;
}
.m3-switch .thumb {
  position: absolute; top: 6px; left: 6px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--md-outline); transition: 0.3s;
}
.m3-switch input:checked ~ .track { background: var(--md-primary); border-color: var(--md-primary); }
.m3-switch input:checked ~ .thumb { left: 26px; background: var(--md-on-primary); }

/* ============================================================
   Bottom Navigation Bar (M3)
   ============================================================ */
.bottom-nav {
  height: 80px; background: var(--md-surface-container);
  display: flex; flex-shrink: 0;
  border-top: 1px solid var(--md-outline-variant); z-index: 800;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-dest {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; cursor: pointer;
  color: var(--md-on-surface-variant); position: relative;
}
.nav-dest.active { color: var(--md-on-surface); }
.nav-indicator {
  width: 64px; height: 32px; border-radius: 16px; display: flex;
  align-items: center; justify-content: center; transition: background 0.3s var(--md-motion-emphasized);
}
.nav-dest.active .nav-indicator { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.nav-dest svg { width: 24px; height: 24px; fill: currentColor; }
.nav-dest span { font-size: 12px; font-weight: 600; }

/* ============================================================
   FAB (M3)
   ============================================================ */
.fab-container { position: absolute; bottom: 96px; right: 16px; z-index: 700; }
.fab {
  width: 56px; height: 56px; border-radius: var(--md-shape-corner-l);
  border: none; background: var(--md-primary-container); color: var(--md-on-primary-container);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--md-elevation-2); cursor: pointer; pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;
}
.fab:active { transform: scale(0.85) rotate(-10deg); box-shadow: var(--md-elevation-1); }
.fab svg { width: 24px; height: 24px; fill: currentColor; }

/* ============================================================
   Modal / Dialog / Bottom Sheet (M3)
   ============================================================ */
.scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px); z-index: 9000;
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s;
}
.scrim.active { display: flex; opacity: 1; }

.m3-dialog {
  background: var(--md-surface-container-high); border-radius: var(--md-shape-corner-xl);
  padding: 24px; width: calc(100% - 48px); max-width: 360px;
  box-shadow: var(--md-elevation-2);
  transform: scale(0.85); opacity: 0;
  transition: transform 0.35s var(--md-motion-emphasized), opacity 0.25s;
}
.scrim.active .m3-dialog { transform: scale(1); opacity: 1; }

.m3-dialog h2 { font-size: 24px; font-weight: 700; margin-bottom: 16px; }
.m3-dialog p { font-size: 14px; color: var(--md-on-surface-variant); line-height: 1.5; }

/* ---- Bottom Sheet ---- */
.bottom-sheet-container {
  position: fixed; inset: 0; z-index: 9000; display: none;
}
.bottom-sheet-container.active { display: block; }
.bottom-sheet-scrim { 
  position: absolute; inset: 0; background: rgba(0,0,0,0.4); 
  backdrop-filter: blur(8px); transition: opacity 0.3s;
  pointer-events: auto;
  cursor: pointer;
}
.bottom-sheet {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
  width: 100%; max-width: 520px;
  background: var(--md-surface-container-low, var(--md-surface-container));
  border-radius: var(--md-shape-corner-xl) var(--md-shape-corner-xl) 0 0;
  padding: 0 24px 32px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}
.bottom-sheet-container.active .bottom-sheet { transform: translateX(-50%) translateY(0); }
.bottom-sheet .handle {
  width: 32px; height: 4px; border-radius: 2px; background: var(--md-outline-variant);
  margin: 12px auto 24px;
}

/* ---- Text Fields (M3 Outlined) ---- */
.m3-text-field { position: relative; margin-bottom: 16px; width: 100%; }
.m3-text-field input, .m3-text-field select {
  width: 100%; height: 56px; border-radius: var(--md-shape-corner-s);
  border: 1px solid var(--md-outline); background: none;
  color: var(--md-on-surface); padding: 16px; font-size: 16px;
  transition: border-color 0.2s;
}
.m3-text-field input:focus, .m3-text-field select:focus { border-color: var(--md-primary); border-width: 2px; }
.m3-text-field label {
  position: absolute; left: 16px; top: 16px;
  color: var(--md-on-surface-variant); font-size: 16px;
  pointer-events: none; transition: 0.15s var(--md-motion-standard);
  background: var(--md-surface-container-low, var(--md-surface-container)); padding: 0;
}
.m3-text-field input:focus ~ label,
.m3-text-field input:not(:placeholder-shown) ~ label,
.m3-text-field select ~ label {
  top: -8px; left: 12px; font-size: 12px; padding: 0 4px;
  font-weight: 600;
}
.m3-text-field input:focus ~ label,
.m3-text-field select:focus ~ label { color: var(--md-primary); }
.m3-text-field input:not(:focus):not(:placeholder-shown) ~ label,
.m3-text-field select:not(:focus) ~ label { color: var(--md-on-surface-variant); }

/* Modern Select Dropdown - Material Design 3 Custom Style */
.modern-select-with-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.modern-select-with-label .ms-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--md-primary);
  padding-left: 4px;
  text-align: center;
}
.modern-select {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
/* Custom Select Button (replaces native select) */
.custom-select-trigger {
  width: 100%;
  max-width: 140px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid var(--md-outline-variant);
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  font-size: 13px;
  font-weight: 500;
  padding: 0 40px 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--md-motion-standard);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  user-select: none;
  position: relative;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 10;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.custom-select-trigger:hover {
  background: var(--md-surface-container-high);
  border-color: var(--md-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 11;
}
.custom-select-trigger.active {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 4px rgba(11, 87, 208, 0.15);
  background: var(--md-surface-container);
  z-index: 11;
}
.custom-select-trigger::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--md-on-surface-variant);
  transition: transform 0.3s var(--md-motion-standard);
  pointer-events: none;
}
.custom-select-trigger.active::after {
  transform: rotate(180deg);
  border-top-color: var(--md-primary);
}
/* Dropdown Menu */
.custom-select-menu {
  position: fixed;
  min-width: 140px;
  max-width: 200px;
  background: var(--md-surface-container);
  border-radius: 12px;
  border: 2px solid var(--md-outline-variant);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transform-origin: top center;
  transition: all 0.2s var(--md-motion-emphasized);
  z-index: 100001;
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.custom-select-menu.open {
  opacity: 1;
  pointer-events: auto;
}
.custom-select-option {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--md-on-surface);
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
  border-bottom: 1px solid var(--md-outline-variant);
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.custom-select-option:last-child {
  border-bottom: none;
}
.custom-select-option:hover {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.custom-select-option.selected {
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-weight: 600;
}
.custom-select-option:active {
  transform: scale(0.98);
}
/* Dark mode support */
[data-theme="dark"] .custom-select-trigger {
  background: var(--md-surface-container-highest);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="dark"] .custom-select-trigger:hover {
  background: var(--md-surface-container-high);
}
[data-theme="dark"] .custom-select-menu {
  background: var(--md-surface-container);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
[data-theme="dark"] .custom-select-option:hover {
  background: var(--md-primary-container);
}

/* ---- Buttons (M3) ---- */
.m3-btn {
  height: 40px; border-radius: 20px; border: none; font-weight: 600;
  font-size: 14px; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; padding: 0 24px;
  transition: all 0.15s var(--md-motion-standard);
}
.m3-btn:active { transform: scale(0.95); }
.m3-btn-filled { background: var(--md-primary); color: var(--md-on-primary); }
.m3-btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.m3-btn-text { background: none; color: var(--md-primary); }
.m3-btn-error { background: var(--md-error-container); color: var(--md-error); }

/* ---- Numpad (M3 Corrected) ---- */
.numpad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center; }
.num-key {
  width: 72px; height: 72px; border-radius: 50%; border: none;
  background: var(--md-surface-container-highest); color: var(--md-on-surface);
  font-size: 24px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s var(--md-motion-standard);
}
.num-key:active { transform: scale(0.85); background: var(--md-primary-container); color: var(--md-primary); }
.num-key.empty { background: none; pointer-events: none; }
.num-key svg { width: 24px; height: 24px; fill: currentColor; }

.pin-dots { display: flex; gap: 16px; justify-content: center; margin: 24px 0 32px; }
.pin-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--md-outline); transition: 0.2s var(--md-motion-standard);
}
.pin-dot.filled { background: var(--md-primary); border-color: var(--md-primary); }

/* ---- Toast ---- */
.toast-container { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 99999; }
.toast {
  background: var(--md-on-surface); color: var(--md-surface);
  padding: 12px 24px; border-radius: var(--md-shape-corner-m);
  font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 12px;
  box-shadow: var(--md-elevation-2); white-space: nowrap;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s var(--md-motion-emphasized);
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast svg { width: 20px; height: 20px; fill: var(--md-primary); flex-shrink: 0; }

/* ---- QR Scanner ---- */
.qr-scanner {
  position: fixed; inset: 0; background: #000; z-index: 20000;
  display: none; flex-direction: column;
}
.qr-scanner.active { display: flex; }
.qr-scanner video { flex: 1; width: 100%; object-fit: cover; }
.qr-scanner .viewfinder {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 220px; height: 220px; border: 3px solid rgba(255,255,255,0.7);
  border-radius: 24px; box-shadow: 0 0 0 2000px rgba(0,0,0,0.5);
}
/* ============================================================
   Coach-Marks Interactive Tutorial
   ============================================================ */
.coach-overlay {
  position: fixed; inset: 0; z-index: 25000;
  background: rgba(0,0,0,0.65);
  transition: opacity 0.4s var(--md-motion-emphasized);
  pointer-events: none;
}
.coach-overlay.hidden, .coach-highlight.hidden, .coach-card.hidden {
  opacity: 0; pointer-events: none;
}

.coach-highlight {
  position: fixed; z-index: 25001;
  border-radius: 16px;
  box-shadow: 0 0 0 4px var(--md-primary), 0 0 0 3000px rgba(0,0,0,0.6);
  transition: all 0.5s var(--md-motion-emphasized);
  pointer-events: none;
  animation: coachPulse 2s ease-in-out infinite;
}
@keyframes coachPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--md-primary), 0 0 0 3000px rgba(0,0,0,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(11,87,208,0.4), 0 0 0 3000px rgba(0,0,0,0.6); }
}

.coach-card {
  position: fixed; z-index: 25002;
  background: var(--md-surface); border-radius: 20px;
  padding: 24px; max-width: 320px; width: calc(100% - 48px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  transition: all 0.4s var(--md-motion-emphasized);
  animation: coachFadeIn 0.4s var(--md-motion-emphasized);
  pointer-events: auto;
}
@keyframes coachFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.coach-card .coach-step {
  display: inline-block; background: var(--md-primary); color: var(--md-on-primary);
  font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 100px;
  margin-bottom: 10px;
}
.coach-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; color: var(--md-on-surface); }
.coach-card p { font-size: 14px; color: var(--md-on-surface-variant); line-height: 1.6; margin-bottom: 16px; }
.coach-card .coach-btns { display: flex; justify-content: flex-end; gap: 8px; }
.coach-card .coach-dots { display: flex; gap: 6px; margin-bottom: 16px; }
.coach-card .coach-dots .d {
  width: 6px; height: 6px; border-radius: 50%; background: var(--md-outline-variant);
}
.coach-card .coach-dots .d.on { background: var(--md-primary); width: 16px; border-radius: 3px; }