:root {
  /* Material 3 Tonal Palettes (Purple/Violet Theme) */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;
  
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;
  
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #31111D;
  
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  
  --md-sys-color-background: #FFFBFE;
  --md-sys-color-on-background: #1C1B1F;
  
  --md-sys-color-surface: #FFFBFE;
  --md-sys-color-on-surface: #1C1B1F;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  
  --md-sys-color-outline: #79747E;
  
  /* Spacing & Elevation */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px; /* M3 FAB & Buttons */
  
  --shadow-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --shadow-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  line-height: 1.5;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

/* Mobile Frame Emulator */
.app-container {
  width: 100%;
  max-width: 412px; /* Standard Android Width */
  background: var(--md-sys-color-surface);
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/* Typography - M3 Scale */
.display-large { font-size: 57px; line-height: 64px; letter-spacing: -0.25px; font-weight: 400; }
.headline-large { font-size: 32px; line-height: 40px; font-weight: 400; }
.headline-medium { font-size: 28px; line-height: 36px; font-weight: 400; }
.headline-small { font-size: 24px; line-height: 32px; font-weight: 400; }
.title-large { font-size: 22px; line-height: 28px; font-weight: 400; }
.title-medium { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px; }
.title-small { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px; }
.body-large { font-size: 16px; line-height: 24px; letter-spacing: 0.5px; }
.body-medium { font-size: 14px; line-height: 20px; letter-spacing: 0.25px; }
.label-large { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px; }

/* Components */
.top-app-bar {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  gap: var(--space-md);
  background: var(--md-sys-color-surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.bottom-nav {
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--md-sys-color-surface-variant);
  border-top: 1px solid var(--md-sys-color-outline);
  position: sticky;
  bottom: 0;
  padding-bottom: 8px; /* Safe area */
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--md-sys-color-on-surface-variant);
  flex: 1;
}

.nav-item.active {
  color: var(--md-sys-color-on-secondary-container);
}

.nav-icon-container {
  width: 64px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
}

.active .nav-icon-container {
  background: var(--md-sys-color-secondary-container);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-xl);
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  gap: var(--space-sm);
}

.btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.btn-secondary {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-primary);
}

.btn-text {
  background: transparent;
  color: var(--md-sys-color-primary);
}

.card {
  background: var(--md-sys-color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline);
  margin-bottom: var(--space-md);
}

.card-elevated {
  border: none;
  box-shadow: var(--shadow-1);
}

.input-field {
  width: 100%;
  margin-bottom: var(--space-md);
}

.input-field label {
  display: block;
  margin-bottom: 4px;
  color: var(--md-sys-color-on-surface-variant);
}

.input-field input {
  width: 100%;
  height: 56px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-xs);
  border: 1px solid var(--md-sys-color-outline);
  background: transparent;
  font-size: 16px;
}

.input-field input:focus {
  outline: 2px solid var(--md-sys-color-primary);
  border-color: transparent;
}

/* Placeholders */
.placeholder-image {
  background: var(--md-sys-color-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-on-surface-variant);
  width: 100%;
  aspect-ratio: 1;
}

.placeholder-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--md-sys-color-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-on-primary-container);
  font-weight: bold;
}

/* Layout Utilities */
.section-padding { padding: var(--space-md); }
.horizontal-scroll {
  display: flex;
  overflow-x: auto;
  gap: var(--space-md);
  padding: 0 var(--space-md) var(--space-md);
  scrollbar-width: none;
}
.horizontal-scroll::-webkit-scrollbar { display: none; }

/* Specific Components */
.category-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-width: 80px;
}

.category-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--md-sys-color-secondary-container);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gift-card {
  min-width: 160px;
  width: 160px;
}

.gift-card-img {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: #eee;
}

.wishlist-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-1);
}

.badge {
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}

.badge-success { background: #C4EED0; color: #072711; }
.badge-pending { background: #FFE082; color: #3E2723; }

.divider {
  height: 1px;
  background: var(--md-sys-color-outline);
  opacity: 0.2;
  margin: var(--space-md) 0;
}