/* =========================================================
   Scentyo – Premium Design System
   Fonts: Cormorant Garamond (display) + Inter (UI) — loaded in layout.phtml
   ========================================================= */

:root {
  /* ---- Brand Palette ---- */
  --ivory:      #FAFAF8;
  --warm-white: #F5F3EF;
  --parchment:  #EDE8DF;
  --stone:      #C4B8A8;
  --espresso:   #1A1410;
  --amber:      #C9972E;
  --blush:      #E8C4B8;
  --sage:       #A8B8A4;
  --lavender:   #C4B8D4;
  --coral:      #D4826A;

  /* ---- Legacy aliases (some templates use --purple etc.) ---- */
  --purple:       var(--espresso);
  --purple-dark:  var(--espresso);
  --purple-light: var(--stone);
  --gold:         var(--amber);
  --bg:           var(--ivory);
  --card-bg:      var(--warm-white);
  --text:         var(--espresso);
  --muted:        var(--stone);
  --border:       var(--parchment);

  /* ---- Radius ---- */
  --r-xs: 6px;
  --r-s:  12px;
  --r-m:  20px;
  --r-l:  28px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 3px rgba(26,20,16,.06), 0 1px 2px rgba(26,20,16,.04);
  --shadow-s:  0 4px 12px rgba(26,20,16,.08), 0 2px 4px rgba(26,20,16,.04);
  --shadow-m:  0 8px 24px rgba(26,20,16,.10), 0 4px 8px rgba(26,20,16,.06);
  --shadow-l:  0 16px 48px rgba(26,20,16,.12), 0 8px 16px rgba(26,20,16,.06);

  /* ---- Nav heights ---- */
  --bottom-nav-h: 72px;
  --nav-h:        52px;

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ---- Easing ---- */
  --spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

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

@keyframes ping {
  0%   { transform: scale(1); opacity: .6; }
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   BASE
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body.scentyo-body {
  background-color: var(--ivory);
  color: var(--espresso);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   TOP NAVBAR
   ========================================================= */

.scentyo-navbar {
  background: rgba(250,250,248,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--parchment);
  box-shadow: none;
  min-height: var(--nav-h);
  padding: 0 16px;
}

.scentyo-navbar .navbar-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--espresso) !important;
  letter-spacing: .02em;
}

.scentyo-navbar .navbar-brand i {
  color: var(--amber);
}

.text-purple { color: var(--amber) !important; }

.btn-light.text-purple {
  background: var(--espresso) !important;
  color: var(--ivory) !important;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-s);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: opacity 150ms;
}

.btn-light.text-purple:hover { opacity: .82; }

/* =========================================================
   MAIN AREA
   ========================================================= */

.scentyo-main {
  padding: 0 0 2rem;
  min-height: calc(100vh - var(--nav-h));
}

.scentyo-main.has-bottom-nav {
  padding-bottom: calc(var(--bottom-nav-h) + 1.5rem);
}

/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-h);
  background: rgba(250,250,248,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--parchment);
  display: flex;
  align-items: stretch;
  z-index: 1030;
  box-shadow: 0 -4px 24px rgba(26,20,16,.06);
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--stone);
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: color 200ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  padding: 4px 0 10px;
  position: relative;
}

.bottom-nav-item i {
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 200ms var(--spring);
}

.bottom-nav-item.active { color: var(--espresso); }
.bottom-nav-item.active i { transform: scale(1.12); }

/* Amber dot below active icon */
.bottom-nav-item::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--amber);
  transition: transform 200ms var(--spring);
}

.bottom-nav-item.active::after { transform: translateX(-50%) scale(1); }

/* =========================================================
   FLASH MESSAGES
   ========================================================= */

.container-fluid .alert {
  border: none;
  border-radius: var(--r-s);
  font-size: .875rem;
  font-weight: 500;
}

.alert-success {
  background: rgba(168,184,164,.15);
  color: #2D6140;
  border-left: 3px solid var(--sage) !important;
}

.alert-danger {
  background: rgba(212,130,106,.12);
  color: #8B3A28;
  border-left: 3px solid var(--coral) !important;
}

/* =========================================================
   PAGE HEADER
   ========================================================= */

.page-header {
  padding: 20px 16px 12px;
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--espresso);
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.15;
}

.page-header .subtitle {
  font-size: .8125rem;
  color: var(--stone);
  margin-top: 2px;
}

/* =========================================================
   DASHBOARD – GREETING
   ========================================================= */

.greeting-time {
  font-size: .8125rem;
  color: var(--stone);
  font-weight: 400;
  margin-bottom: 1px;
}

.greeting-name {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--espresso);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.01em;
}

/* =========================================================
   HERO RECOMMENDATION CARD
   ========================================================= */

.rec-card {
  border-radius: var(--r-l);
  overflow: hidden;
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(160deg, #2A1E14 0%, #1A1410 100%);
  box-shadow: var(--shadow-m);
  cursor: pointer;
  text-decoration: none;
}

/* Shimmer sweep */
.rec-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.07) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: shimmer 4s ease infinite;
  z-index: 1;
  pointer-events: none;
}

.rec-card-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: .5;
}

.rec-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(26,20,16,0) 25%,
    rgba(26,20,16,.8) 100%
  );
}

.rec-card-body {
  position: relative;
  z-index: 2;
  padding: 20px;
}

.rec-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rec-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  position: relative;
}

.rec-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  animation: ping 2s cubic-bezier(0,0,.2,1) infinite;
  opacity: .45;
}

.rec-name {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 2px;
}

.rec-brand {
  font-size: .8125rem;
  color: rgba(255,255,255,.72);
  margin-bottom: 14px;
}

.rec-cta {
  font-size: .78rem;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rec-weather-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .74rem;
  color: rgba(255,255,255,.88);
  font-weight: 500;
  border: 1px solid rgba(255,255,255,.12);
}

/* =========================================================
   STAT TILES
   ========================================================= */

.stat-tile {
  background: var(--warm-white);
  border: 1px solid var(--parchment);
  border-radius: var(--r-m);
  padding: 14px 10px;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 200ms, transform 150ms var(--spring);
  -webkit-tap-highlight-color: transparent;
  display: block;
  text-decoration: none;
}

.stat-tile:active { transform: scale(.97); }
.stat-tile:hover  { box-shadow: var(--shadow-s); }

.stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--espresso);
  line-height: 1;
  animation: countUp .45s var(--ease-out) both;
}

.stat-label {
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--stone);
  margin-top: 4px;
}

/* =========================================================
   WEATHER MOOD
   ========================================================= */

.weather-btn {
  border-radius: var(--r-s);
  border: 1.5px solid var(--parchment);
  padding: 10px 6px;
  font-size: .78rem;
  font-weight: 600;
  background: var(--warm-white);
  color: var(--stone);
  transition: all 200ms var(--ease-out);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}

.weather-btn i { font-size: 1.15rem; }
.weather-btn.active {
  border-color: var(--espresso);
  background: var(--espresso);
  color: var(--ivory);
}
.weather-btn:hover:not(.active) {
  border-color: var(--espresso);
  color: var(--espresso);
}

/* =========================================================
   SECTION HEADER
   ========================================================= */

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

.section-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--stone);
}

.section-link {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--espresso);
  text-decoration: none;
  transition: opacity 150ms;
}

.section-link:hover { opacity: .55; }

/* =========================================================
   PERFUME CARDS (grid)
   ========================================================= */

.perfume-card {
  background: var(--warm-white);
  border: 1px solid var(--parchment);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: box-shadow 200ms var(--ease-out), transform 180ms var(--spring);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.perfume-card:hover  { box-shadow: var(--shadow-m); }
.perfume-card:active { transform: scale(.97); }

.perfume-card-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top center;
  background: var(--parchment);
  display: block;
}

.perfume-card-img-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, var(--parchment) 0%, var(--warm-white) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--stone);
}

.perfume-card-body { padding: 10px 12px 14px; }

.perfume-card-brand {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--stone);
  margin-bottom: 3px;
}

.perfume-card-name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--espresso);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
   PERFUME GRID
   ========================================================= */

.perfume-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 16px;
}

@media (min-width: 576px) {
  .perfume-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .perfume-grid { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   SAMPLE PROGRESS BAR
   ========================================================= */

.sample-progress .progress {
  height: 6px;
  border-radius: 999px;
  background: var(--parchment);
  overflow: hidden;
}

.sample-progress .progress-bar {
  border-radius: 999px;
  transition: width .7s var(--ease-out);
}

/* Color states (applied via inline style OR JS class) */
.progress-bar { background: linear-gradient(90deg, var(--amber), #E8B84B); }
.progress-high { background: linear-gradient(90deg, var(--sage), #8DB889) !important; }
.progress-mid  { background: linear-gradient(90deg, var(--amber), #E8B84B) !important;
                 box-shadow: 0 0 8px rgba(201,151,46,.35); }
.progress-low  { background: linear-gradient(90deg, var(--coral), #E0977D) !important; }

.sample-ml-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.sample-remaining {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  color: var(--espresso);
}

.sample-label-text {
  font-size: .7rem;
  color: var(--stone);
}

/* =========================================================
   LIST CARDS (Samples, Testing, Wishlist, Disliked)
   ========================================================= */

.list-card {
  background: var(--warm-white);
  border: 1px solid var(--parchment);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 200ms var(--ease-out), transform 150ms var(--spring);
}

.list-card:active { transform: scale(.99); }
.list-card:hover  { box-shadow: var(--shadow-s); }

.list-card-img {
  width: 84px;
  min-height: 100px;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
  background: var(--parchment);
  display: block;
}

.list-card-img-placeholder {
  width: 84px;
  min-height: 100px;
  background: linear-gradient(160deg, var(--parchment) 0%, var(--warm-white) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--stone);
  flex-shrink: 0;
}

.list-card-body {
  padding: 12px 14px;
  flex: 1;
  min-width: 0;
}

.list-card-brand {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--stone);
  margin-bottom: 3px;
}

.list-card-name {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--espresso);
  line-height: 1.25;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-card-note {
  font-size: .775rem;
  color: var(--stone);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}

/* =========================================================
   TAB NAV (Collection / Samples / Top 10)
   ========================================================= */

.scentyo-tabs {
  display: flex;
  background: var(--ivory);
  border-bottom: 1px solid var(--parchment);
  position: sticky;
  top: var(--nav-h);
  z-index: 10;
}

.scentyo-tab {
  flex: 1;
  text-align: center;
  padding: 13px 6px;
  font-weight: 600;
  font-size: .8rem;
  text-decoration: none !important;
  color: var(--stone);
  border-bottom: 2.5px solid transparent;
  transition: color 200ms, border-color 200ms;
  letter-spacing: .02em;
}

.scentyo-tab.active {
  color: var(--espresso);
  border-bottom-color: var(--amber);
}

.scentyo-tab i { font-size: .9rem; }

/* =========================================================
   PRIORITY BADGES
   ========================================================= */

.priority-high {
  background: rgba(212,130,106,.14);
  color: #8B3A28;
  border: 1px solid rgba(212,130,106,.3);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-block;
}

.priority-medium {
  background: rgba(201,151,46,.12);
  color: #8B6220;
  border: 1px solid rgba(201,151,46,.25);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-block;
}

.priority-low {
  background: var(--parchment);
  color: var(--stone);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-block;
}

.priority-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 22px 2px 9px;
  font-size: .62rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='currentColor' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.priority-select:focus { box-shadow: 0 0 0 2px rgba(100,70,50,.15); }
.priority-select.priority-high   { background-color: rgba(212,130,106,.14); color: #8B3A28; border: 1px solid rgba(212,130,106,.3); }
.priority-select.priority-medium { background-color: rgba(201,151,46,.12);  color: #8B6220; border: 1px solid rgba(201,151,46,.25); }
.priority-select.priority-low    { background-color: var(--parchment);       color: var(--stone); border: 1px solid rgba(150,140,130,.2); }

/* =========================================================
   BADGE OVERRIDES
   ========================================================= */

.badge {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: var(--r-xs);
}

.badge.bg-secondary  { background: var(--parchment) !important; color: var(--espresso) !important; }
.badge.bg-info       { background: rgba(168,184,164,.2) !important; color: #3D5A39 !important; }
.badge.bg-warning,
.badge.bg-warning.text-dark { background: rgba(201,151,46,.15) !important; color: #8B6220 !important; }
.badge.bg-danger     { background: rgba(212,130,106,.15) !important; color: #8B3A28 !important; }
.badge.bg-success    { background: rgba(122,174,138,.2) !important; color: #2D6140 !important; }

/* =========================================================
   NOTE CHIPS (fragrance notes)
   ========================================================= */

.note-badge {
  display: inline-flex;
  align-items: center;
  background: var(--warm-white);
  border: 1px solid var(--parchment);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .75rem;
  color: var(--espresso);
  margin: 2px;
  font-weight: 400;
  white-space: nowrap;
}

.note-badge-top    { background: rgba(232,196,184,.2); border-color: rgba(232,196,184,.5); }
.note-badge-middle { background: rgba(168,184,164,.15); border-color: rgba(168,184,164,.4); }
.note-badge-base   { background: rgba(196,184,212,.15); border-color: rgba(196,184,212,.4); }

/* =========================================================
   BUTTONS (primary, secondary, ghost, overrides)
   ========================================================= */

.btn-purple {
  background: var(--espresso);
  color: var(--ivory);
  border: none;
  border-radius: var(--r-s);
  padding: 11px 20px;
  font-weight: 600;
  font-size: .9375rem;
  font-family: var(--font-ui);
  line-height: 1;
  transition: opacity 200ms, transform 150ms var(--spring);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.btn-purple:hover   { color: var(--ivory); opacity: .85; }
.btn-purple:active  { transform: scale(.97); color: var(--ivory); }
.btn-purple:focus   { box-shadow: 0 0 0 3px rgba(26,20,16,.18); color: var(--ivory); }

.btn-outline-purple {
  border: 1.5px solid var(--parchment);
  color: var(--espresso);
  border-radius: var(--r-s);
  padding: 10px 18px;
  font-weight: 600;
  background: transparent;
  transition: background 200ms, border-color 200ms, color 200ms;
  font-family: var(--font-ui);
  cursor: pointer;
}

.btn-outline-purple:hover { background: var(--espresso); color: var(--ivory); border-color: var(--espresso); }

/* Override Bootstrap action buttons used in list cards */
.btn-sm.btn-outline-secondary {
  border-color: var(--parchment) !important;
  color: var(--stone) !important;
  border-radius: var(--r-xs) !important;
  font-size: .75rem !important;
  padding: 5px 10px !important;
  background: transparent !important;
}
.btn-sm.btn-outline-secondary:hover { background: var(--parchment) !important; color: var(--espresso) !important; }

.btn-sm.btn-outline-warning {
  border-color: rgba(201,151,46,.3) !important;
  color: #8B6220 !important;
  border-radius: var(--r-xs) !important;
  font-size: .75rem !important;
  padding: 5px 10px !important;
  background: rgba(201,151,46,.08) !important;
}
.btn-sm.btn-outline-warning:hover { background: rgba(201,151,46,.15) !important; }

.btn-sm.btn-outline-success {
  border-color: rgba(122,174,138,.3) !important;
  color: #2D6140 !important;
  border-radius: var(--r-xs) !important;
  font-size: .75rem !important;
  padding: 5px 10px !important;
  background: rgba(122,174,138,.1) !important;
}
.btn-sm.btn-outline-success:hover { background: rgba(122,174,138,.2) !important; }

.btn-sm.btn-outline-info {
  border-color: rgba(168,184,164,.3) !important;
  color: #3D5A39 !important;
  border-radius: var(--r-xs) !important;
  font-size: .75rem !important;
  padding: 5px 10px !important;
  background: rgba(168,184,164,.1) !important;
}
.btn-sm.btn-outline-info:hover { background: rgba(168,184,164,.2) !important; }

.btn-sm.btn-outline-danger {
  border-color: rgba(212,130,106,.3) !important;
  color: #8B3A28 !important;
  border-radius: var(--r-xs) !important;
  font-size: .75rem !important;
  padding: 5px 10px !important;
  background: rgba(212,130,106,.08) !important;
}
.btn-sm.btn-outline-danger:hover { background: rgba(212,130,106,.15) !important; }

.btn-sm.btn-success {
  background: var(--sage) !important;
  border-color: var(--sage) !important;
  color: #1A3320 !important;
  border-radius: var(--r-xs) !important;
  font-size: .75rem !important;
  padding: 5px 10px !important;
}

.btn-sm.btn-danger {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #fff !important;
  border-radius: var(--r-xs) !important;
  font-size: .75rem !important;
  padding: 5px 10px !important;
}

/* Transition action buttons (perfume detail) */
.transition-actions .btn {
  border-radius: var(--r-xs) !important;
  font-size: .8rem !important;
  padding: 6px 12px !important;
}

/* =========================================================
   FORM CONTROLS
   ========================================================= */

.form-control, .form-select {
  border-radius: var(--r-s);
  border: 1.5px solid var(--parchment);
  padding: 11px 14px;
  font-size: .9375rem;
  font-family: var(--font-ui);
  background: var(--warm-white);
  color: var(--espresso);
  transition: border-color 200ms, box-shadow 200ms;
}

.form-control::placeholder { color: var(--stone); }
.form-select { background-color: var(--warm-white); }

.form-control:focus, .form-select:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(201,151,46,.14);
  background: var(--warm-white);
  color: var(--espresso);
  outline: none;
}

.form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--espresso);
  margin-bottom: 6px;
}

.import-url-input  { border-radius: var(--r-s) 0 0 var(--r-s) !important; }
.import-url-btn    { border-radius: 0 var(--r-s) var(--r-s) 0 !important; }

/* =========================================================
   CARD (Bootstrap override)
   ========================================================= */

.card {
  background: var(--warm-white) !important;
  border: 1px solid var(--parchment) !important;
  border-radius: var(--r-m) !important;
  box-shadow: var(--shadow-xs) !important;
}

.card-body { padding: 16px; }

/* =========================================================
   EMPTY STATES
   ========================================================= */

.empty-state {
  text-align: center;
  padding: 48px 24px;
  animation: fadeUp .4s var(--ease-out) both;
}

.empty-icon {
  font-size: 3.5rem;
  color: var(--stone);
  opacity: .45;
  margin-bottom: 16px;
  display: block;
}

.empty-state h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--espresso);
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--stone);
  font-size: .875rem;
  max-width: 240px;
  margin: 0 auto 20px;
  line-height: 1.65;
}

/* =========================================================
   AUTH PAGES
   ========================================================= */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--ivory);
}

.auth-logo {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  color: var(--espresso);
  letter-spacing: -.01em;
  margin-bottom: 4px;
  line-height: 1;
}

.auth-logo i { color: var(--amber); }

.auth-tagline {
  font-size: .875rem;
  color: var(--stone);
  margin-bottom: 32px;
  letter-spacing: .02em;
}

.auth-card {
  background: var(--warm-white);
  border-radius: var(--r-l);
  padding: 28px 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-m);
  border: 1px solid var(--parchment);
}

/* =========================================================
   PERFUME DETAIL PAGE
   ========================================================= */

.perfume-hero {
  height: 52vw;
  max-height: 300px;
  min-height: 190px;
  overflow: hidden;
  background: var(--parchment);
  position: relative;
}

.perfume-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.perfume-hero-placeholder {
  height: 52vw;
  max-height: 300px;
  min-height: 190px;
  background: linear-gradient(160deg, var(--parchment) 0%, var(--warm-white) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  color: var(--stone);
}

.perfume-detail-body {
  background: var(--ivory);
  border-radius: var(--r-l) var(--r-l) 0 0;
  margin-top: -24px;
  position: relative;
  z-index: 2;
  padding: 24px 16px 16px;
}

.perfume-detail-brand {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--stone);
  margin-bottom: 4px;
}

.perfume-detail-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--espresso);
  line-height: 1.15;
  margin-bottom: 2px;
  letter-spacing: -.01em;
}

.perfume-detail-perfumer {
  font-size: .8125rem;
  color: var(--stone);
  margin-bottom: 16px;
  font-style: italic;
}

.notes-section-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--stone);
  margin-bottom: 10px;
}

.notes-tier {
  margin-bottom: 12px;
}

.notes-tier-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--stone);
  margin-bottom: 5px;
}

.personal-note-card {
  background: var(--warm-white);
  border: 1px solid var(--parchment);
  border-radius: var(--r-m);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.personal-note-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--stone);
  margin-bottom: 6px;
}

.dislike-reason-card {
  background: rgba(212,130,106,.07);
  border: 1px solid rgba(212,130,106,.25);
  border-radius: var(--r-m);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.dislike-reason-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--coral);
  margin-bottom: 6px;
}

/* =========================================================
   TOP 10 RANK BADGES (Collection)
   ========================================================= */

.perfume-card-wrap { position: relative; }

.top-rank-badge {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  background: var(--espresso);
  color: var(--ivory);
  font-size: .6rem;
  font-weight: 700;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--font-mono);
}

.top10-toggle-form {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  margin: 0;
}

.top10-btn {
  background: rgba(250,250,248,.88);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--stone);
  font-size: .9rem;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: color 150ms, background 150ms;
}

.top10-btn.active { color: var(--amber); }
.top10-btn:hover  { background: var(--warm-white); color: var(--espresso); }

/* =========================================================
   PRICE TAG
   ========================================================= */

.price-tag {
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* =========================================================
   PROFILE
   ========================================================= */

.profile-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--espresso);
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* =========================================================
   UTILITIES
   ========================================================= */

.text-gold    { color: var(--amber) !important; }
.text-stone   { color: var(--stone) !important; }
.text-coral   { color: var(--coral) !important; }
.text-sage    { color: var(--sage) !important; }
.bg-purple    { background: var(--espresso) !important; }
.rounded-xl   { border-radius: var(--r-m) !important; }
.rounded-2xl  { border-radius: var(--r-l) !important; }
.font-display { font-family: var(--font-display) !important; }
.font-mono    { font-family: var(--font-mono) !important; }

/* Horizontal scroll row */
.h-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; flex-shrink: 0; }

hr.divider {
  border: none;
  border-top: 1px solid var(--parchment);
  margin: 16px 0;
}

/* Skeleton loading */
@keyframes skeletonShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.skeleton {
  background: linear-gradient(90deg, var(--parchment) 0%, var(--warm-white) 50%, var(--parchment) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
  border-radius: var(--r-xs);
}

/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   PWA INSTALL BANNER
   ========================================================= */

.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1060;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}

.pwa-install-banner.pwa-banner--visible {
  transform: translateY(0);
  pointer-events: auto;
}

/* Push banner above bottom nav when logged in */
.has-bottom-nav ~ .pwa-install-banner,
body:has(.bottom-nav) .pwa-install-banner {
  bottom: 123px;
}

.pwa-install-banner__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 12px;
  padding: 12px 14px;
  background: var(--warm-white);
  border: 1.5px solid var(--parchment);
  border-radius: var(--r-m);
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
}

.pwa-install-banner__icon {
  font-size: 1.4rem;
  color: var(--amber);
  flex-shrink: 0;
  line-height: 1;
}

.pwa-install-banner__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.pwa-install-banner__text strong {
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--stone);
}

.pwa-install-banner__text span {
  font-size: .78rem;
  color: var(--stone);
  opacity: .7;
}

.pwa-install-banner__cta {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: .82rem;
  font-weight: 600;
  background: var(--amber);
  color: var(--warm-white);
  border: none;
  border-radius: var(--r-s);
  cursor: pointer;
  transition: opacity .15s;
}

.pwa-install-banner__cta:hover {
  opacity: .85;
}

.pwa-install-banner__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--stone);
  opacity: .5;
  cursor: pointer;
  border-radius: var(--r-xs);
  padding: 0;
  font-size: 1.1rem;
}

.pwa-install-banner__close:hover {
  opacity: 1;
}