/* ================================================================
   CaluPet Design System -- main.css
   Single-file CSS: tokens, base, layout, components, utilities.
   Font: Inter (NOT Montserrat)
   Base unit: 4 px (rem-based)
   ================================================================ */


/* ================================================================
   1. TOKENS -- CSS Custom Properties
   ================================================================ */

:root {
  /* -- Core Brand Colors ---------------------------------------- */
  --color-cream:  #F0EEE9;
  --color-petrol: #004860;
  --color-orange: #FB914A;

  /* -- Extended Palette ----------------------------------------- */
  --color-petrol-light: #337D96;
  --color-petrol-dark:  #002D3E;
  --color-orange-light: #FDB882;
  --color-teal:         #2A9D8F;
  --color-coral:        #E76F51;
  --color-amber:        #F4A261;

  /* -- RGB Channels (for alpha compositing) --------------------- */
  --color-cream-rgb:  240, 238, 233;
  --color-petrol-rgb: 0, 72, 96;
  --color-orange-rgb: 251, 145, 74;

  /* -- Semantic Colors ------------------------------------------ */
  --color-success: var(--color-teal);
  --color-error:   var(--color-coral);
  --color-warning: var(--color-amber);
  --color-info:    var(--color-petrol-light);

  /* -- Surface Colors (Light Mode) ------------------------------ */
  --color-bg:              var(--color-cream);
  --color-surface:         #FFFFFF;
  --color-surface-alt:     #F7F5F1;
  --color-surface-dim:     #E8E6E1;
  --color-text-primary:    var(--color-petrol);
  --color-text-secondary:  var(--color-petrol-light);
  --color-outline:         rgba(0, 72, 96, 0.12);
  --color-outline-strong:  rgba(0, 72, 96, 0.25);
  --color-card:            #FFFFFF;
  --color-card-border:     rgba(0, 72, 96, 0.12);
  /* Aliases referenced by component inline styles. Previously UNDEFINED, so a
     `var(--color-x, #light)` fallback hardcoded a light value that bypassed the
     theme — borders + error/danger text rendered light-on-light / dark-red-on-
     dark in dark mode. Defined here (light values = the former fallbacks, so
     light mode is unchanged) and overridden in the dark block below. */
  --color-border:          #E7E5DD;
  --color-danger:          #C0392B;
  --color-on-primary:      #FFFFFF;

  /* -- Special Colors ------------------------------------------- */
  --color-premium-gold: #D4A853;
  --color-gold:         #F4C96D;
  --color-silver:       #C0C0C0;
  --color-bronze:       #CD7F32;

  /* -- Chart Categorical Palette -------------------------------- */
  --chart-1: #004860;
  --chart-2: #FB914A;
  --chart-3: #337D96;
  --chart-4: #FDB882;
  --chart-5: #2A9D8F;
  --chart-6: #E76F51;
  --chart-7: #002D3E;
  --chart-8: #F4A261;

  /* -- Typography ----------------------------------------------- */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.563rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-3xl:  3.052rem;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  --tracking-tight:  -0.5px;
  --tracking-snug:   -0.25px;
  --tracking-normal:  0;
  --tracking-wide:    0.1px;
  --tracking-wider:   0.2px;

  /* -- Spacing (4 px base) -------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* -- Layout --------------------------------------------------- */
  --sidebar-width-collapsed: 72px;
  --sidebar-width-expanded:  260px;
  --topbar-height:           64px;
  --page-padding:            32px;
  --card-gap:                12px;
  --section-gap:             24px;

  /* -- Border Radius -------------------------------------------- */
  --radius-xs:   3px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* -- Shadows -------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(0, 72, 96, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 72, 96, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 72, 96, 0.15);
  --shadow-xl: 0 12px 36px rgba(0, 72, 96, 0.18);

  /* -- Motion / Animation --------------------------------------- */
  --duration-0:   0ms;
  --duration-100: 100ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* -- Glass Effects -------------------------------------------- */
  --glass-bg:     rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur:   blur(20px) saturate(1.4);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.06),
                  inset 0 1px 0 rgba(255, 255, 255, 0.2);
}


/* -- Dark Mode Override ----------------------------------------- */

[data-theme="dark"],
.dark {
  --color-bg:             #002D3E;
  --color-surface:        #0A3A4F;
  --color-surface-alt:    #0F4560;
  --color-surface-dim:    #001E2B;
  --color-text-primary:   var(--color-cream);
  --color-text-secondary: #A8C5D0;
  --color-outline:        rgba(240, 238, 233, 0.12);
  --color-outline-strong: rgba(240, 238, 233, 0.25);
  --color-card:           #0A3A4F;
  --color-card-border:    rgba(240, 238, 233, 0.12);
  --color-error:          #FF8A6A;
  /* Dark overrides for the component-inline aliases (see :root). Border tracks
     the theme outline; danger tracks the dark error tone so validation text +
     the delete button read on a dark surface. `--color-on-primary` stays white
     (text on a petrol/coral fill, correct in both themes). */
  --color-border:         rgba(240, 238, 233, 0.12);
  --color-danger:         #FF8A6A;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.35);

  --glass-bg:     rgba(0, 0, 0, 0.25);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur:   blur(24px) saturate(1.2);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.12),
                  inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* -- Reduced Motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-100: 0ms;
    --duration-200: 0ms;
    --duration-300: 0ms;
    --duration-500: 0ms;
    --duration-700: 0ms;
  }
}


/* ================================================================
   2. BASE -- Reset, Typography, Global Styles
   ================================================================ */

/* -- Reset ------------------------------------------------------ */

/* W1 parity (contract §79.AM / f843a1a, §W-α scoping decision): the demo's
   bare-global reset/base/link/heading/selection/scrollbar rules are scoped
   under a dedicated `.cds` root so they NEVER bleed into the kept
   `/walks` + `/walks/:id` bodies. `/walks` is itself shell-wrapped (§d), so
   a naive `.app-shell` scope would NOT exempt it — `.cds` is applied only to
   the demo-styled subtree (shell chrome + new/stub pages) at the main.rs
   router level, and the walks bodies are rendered OUTSIDE any `.cds`
   ancestor. `:root` / `[data-theme]` / `@media` token blocks below stay
   GLOBAL (CSS-var declarations only — visually inert until referenced); all
   class-based component/layout rules stay unscoped (inert for the walks
   views, which use inline styles + Tailwind utilities, never these classes).
   "walks UNCHANGED" coherence invariant holds with zero walks-body edits. */
.cds *,
.cds *::before,
.cds *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cds {
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -- Theme transition on all elements --------------------------- */

.cds * {
  transition:
    background-color var(--duration-200) ease-in-out,
    color var(--duration-200) ease-in-out,
    border-color var(--duration-200) ease-in-out;
}

/* -- Typography scale classes ----------------------------------- */

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.font-light    { font-weight: var(--font-weight-light); }
.font-regular  { font-weight: var(--font-weight-regular); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }
.font-black    { font-weight: var(--font-weight-black); }

/* -- Headings --------------------------------------------------- */

.cds h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.cds h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.cds h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.cds h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.cds h5 {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
}

.cds h6 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
}

/* -- Links ------------------------------------------------------ */

.cds a {
  color: var(--color-orange);
  text-decoration: none;
}

.cds a:hover {
  text-decoration: underline;
}

/* -- Selection -------------------------------------------------- */

.cds ::selection {
  background: rgba(251, 145, 74, 0.2);
}

/* -- Scrollbar Styling ------------------------------------------ */

.cds ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.cds ::-webkit-scrollbar-track {
  background: var(--color-outline);
  border-radius: 3px;
}

.cds ::-webkit-scrollbar-thumb {
  background: var(--color-petrol-light);
  border-radius: 3px;
}

.cds ::-webkit-scrollbar-thumb:hover {
  background: var(--color-petrol);
}


/* ================================================================
   3. LAYOUT -- App Shell, Sidebar, Topbar, Grids
   ================================================================ */

/* -- App Shell -------------------------------------------------- */

.app-shell {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 100vh;
}

/* -- Sidebar ---------------------------------------------------- */

.sidebar {
  width: var(--sidebar-width-expanded);
  background: var(--color-surface);
  border-right: 1px solid var(--color-outline);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width var(--duration-300) var(--ease-default);
  display: flex;
  flex-direction: column;
  z-index: 50;
}

.sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
}

.sidebar.collapsed .sidebar-label {
  display: none;
}

.sidebar.collapsed .pet-switcher {
  justify-content: center;
}

.sidebar-header {
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-outline);
}

.sidebar-divider {
  height: 1px;
  background: var(--color-outline);
  margin: var(--space-2) var(--space-3);
}

/* -- Topbar ----------------------------------------------------- */

.topbar {
  height: var(--topbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-outline);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* -- Main Area -------------------------------------------------- */

.main-area {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

.main-content {
  padding: var(--page-padding);
  overflow-y: auto;
  background: var(--color-bg);
  min-height: calc(100vh - var(--topbar-height));
}

/* -- Bento Grid ------------------------------------------------- */

.bento-grid {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(3, 1fr);
}

.bento-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.bento-span-2 {
  grid-column: span 2;
}

.bento-span-3 {
  grid-column: span 3;
}

/* -- Split Pane ------------------------------------------------- */

.split-pane {
  display: grid;
  gap: 0;
}

/* -- Page Header ------------------------------------------------ */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--section-gap);
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* -- Content Section -------------------------------------------- */

.content-section {
  margin-bottom: var(--section-gap);
}

/* -- Pet Switcher ----------------------------------------------- */

.pet-switcher {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  overflow-x: auto;
  align-items: center;
}

.pet-avatar-ring {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  padding: 2px;
  cursor: pointer;
  transition: border-color var(--duration-200) var(--ease-default);
  flex-shrink: 0;
}

.pet-avatar-ring.active {
  border-color: var(--color-orange);
}

.pet-avatar-ring img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}


/* ================================================================
   4. COMPONENTS
   ================================================================ */

/* ── Buttons ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  cursor: pointer;
  font-weight: var(--font-weight-bold);
  font-family: inherit;
  border-radius: var(--radius-md);
  transition:
    background-color var(--duration-200) var(--ease-default),
    filter var(--duration-200) var(--ease-default),
    box-shadow var(--duration-200) var(--ease-default);
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-orange);
  color: var(--color-petrol);
  height: 48px;
  padding: 0 var(--space-6);
  font-size: 16px;
}

.btn-primary:hover {
  filter: brightness(0.92);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-petrol-dark);
  border: 1px solid var(--color-petrol);
  height: 48px;
  padding: 0 var(--space-6);
  font-size: 16px;
}

[data-theme="dark"] .btn-secondary,
.dark .btn-secondary {
  color: var(--color-cream);
  border-color: var(--color-cream);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-orange);
}

.btn-ghost:hover {
  background-color: rgba(251, 145, 74, 0.08);
}

.btn-destructive {
  background-color: var(--color-coral);
  color: #FFFFFF;
}

.btn-sm {
  height: 36px;
  padding: 0 var(--space-4);
  font-size: 14px;
}

.btn-md {
  height: 48px;
  font-size: 16px;
}

.btn-lg {
  height: 56px;
  padding: 0 var(--space-8);
  font-size: 18px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ── Cards ────────────────────────────────────────────────────── */

.card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  border: 1px solid var(--color-card-border);
}

.card-elevated {
  box-shadow: var(--shadow-md);
}

.card-interactive {
  cursor: pointer;
  transition:
    box-shadow var(--duration-200) var(--ease-default),
    transform var(--duration-200) var(--ease-default);
}

.card-interactive:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card-bordered {
  background: transparent;
  border: 1px solid var(--color-outline);
  box-shadow: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.card-title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.card-body {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}


/* ── Input ────────────────────────────────────────────────────── */

.input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-surface);
  transition:
    border-color var(--duration-200) var(--ease-default),
    box-shadow var(--duration-200) var(--ease-default);
}

.input:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(251, 145, 74, 0.15);
}

.input-error {
  border-color: var(--color-error);
}

.input-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.input-error-text {
  color: var(--color-error);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

.input-search {
  padding-left: 40px;
}


/* ── Badge ────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.badge-success {
  background: rgba(42, 157, 143, 0.12);
  color: var(--color-teal);
}

.badge-warning {
  background: rgba(244, 162, 97, 0.12);
  color: var(--color-amber);
}

.badge-error {
  background: rgba(231, 111, 81, 0.12);
  color: var(--color-coral);
}

.badge-info {
  background: rgba(0, 72, 96, 0.08);
  color: var(--color-petrol);
}

.badge-default {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
}

.badge-count {
  min-width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-coral);
  color: #FFFFFF;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  font-weight: var(--font-weight-bold);
}


/* ── Avatar ───────────────────────────────────────────────────── */

.avatar {
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-surface-alt);
}

.avatar-sm { width: 24px; height: 24px; }
.avatar-md { width: 32px; height: 32px; }
.avatar-lg { width: 48px; height: 48px; }
.avatar-xl { width: 80px; height: 80px; }

.avatar-stack {
  display: flex;
}

.avatar-stack .avatar {
  margin-left: -8px;
  border: 2px solid var(--color-surface);
}

.avatar-stack .avatar:first-child {
  margin-left: 0;
}


/* ── Table ────────────────────────────────────────────────────── */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-outline);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-outline);
  color: var(--color-text-primary);
  vertical-align: middle;
}

.table tr:hover td {
  background: var(--color-surface-alt);
}

.table-compact th,
.table-compact td {
  padding: var(--space-2) var(--space-3);
}

.table-striped tbody tr:nth-child(even) td {
  background: var(--color-surface-alt);
}

.table-clickable tr {
  cursor: pointer;
}


/* ── Tabs ─────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  border-bottom: 2px solid var(--color-outline);
  gap: var(--space-1);
  overflow-x: auto;
}

.tab-item {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--duration-200) var(--ease-default),
              border-color var(--duration-200) var(--ease-default);
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
  font-size: var(--text-base);
}

.tab-item:hover {
  color: var(--color-text-primary);
}

.tab-item.active {
  color: var(--color-orange);
  border-bottom-color: var(--color-orange);
}

.tabs-pill {
  border-bottom: none;
  gap: var(--space-2);
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: 4px;
}

.tabs-pill .tab-item {
  border-bottom: none;
  border-radius: var(--radius-md);
  margin-bottom: 0;
}

.tabs-pill .tab-item.active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}


/* ── Chip ─────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  cursor: pointer;
  border: 1px solid var(--color-outline);
  background: transparent;
  color: var(--color-text-secondary);
  transition:
    border-color var(--duration-200) var(--ease-default),
    background-color var(--duration-200) var(--ease-default),
    color var(--duration-200) var(--ease-default);
  font-family: inherit;
}

.chip:hover {
  border-color: var(--color-outline-strong);
}

.chip.selected {
  background: var(--color-orange);
  color: var(--color-petrol);
  border-color: var(--color-orange);
  font-weight: var(--font-weight-semibold);
}


/* ── Modal ────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-sm { width: 400px; }
.modal-md { width: 600px; }
.modal-lg { width: 800px; }

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 24px;
}

.modal-title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}


/* ── Toast ────────────────────────────────────────────────────── */

.toast {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  min-width: 300px;
  max-width: 500px;
}

.toast-success {
  background: var(--color-teal);
  color: #FFFFFF;
}

.toast-error {
  background: var(--color-coral);
  color: #FFFFFF;
}

.toast-info {
  background: var(--color-petrol);
  color: var(--color-cream);
}

.toast-warning {
  background: var(--color-amber);
  color: var(--color-petrol);
}


/* ── Progress Bar ─────────────────────────────────────────────── */

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-orange);
  border-radius: var(--radius-full);
  transition: width var(--duration-500) ease-out;
}

.progress-bar.progress-sm {
  height: 4px;
}

.progress-bar.progress-lg {
  height: 12px;
}


/* ── Stat Card ────────────────────────────────────────────────── */

.stat-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
}

.stat-card-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-black);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

.stat-card-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.stat-card-trend {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-1);
}

.stat-card-trend.up {
  color: var(--color-teal);
}

.stat-card-trend.down {
  color: var(--color-coral);
}

.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: var(--space-2);
}


/* ── Sidebar Item ─────────────────────────────────────────────── */

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: var(--font-weight-regular);
  transition: background-color var(--duration-200) var(--ease-default);
  cursor: pointer;
  position: relative;
  font-size: var(--text-base);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-item:hover {
  color: var(--color-text-primary);
  background: rgba(0, 72, 96, 0.05);
  text-decoration: none;
}

.sidebar-item.active {
  color: var(--color-orange);
  background: rgba(251, 145, 74, 0.12);
  font-weight: var(--font-weight-semibold);
}

.sidebar-item .icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Dark mode: lighten sidebar icons (dark teal PNGs on dark background) */
[data-theme="dark"] .sidebar-item .icon {
  filter: invert(100%) sepia(0%) saturate(0%) brightness(200%);
  opacity: 0.7;
}

[data-theme="dark"] .sidebar-item:hover .icon {
  opacity: 1;
}

[data-theme="dark"] .sidebar-item.active .icon {
  filter: invert(65%) sepia(60%) saturate(500%) hue-rotate(340deg) brightness(110%);
  opacity: 1;
}

.sidebar-item .badge-count {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
}


/* ── Glass Panel ──────────────────────────────────────────────── */

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}


/* ── Empty State ──────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  gap: var(--space-4);
}

.empty-state img {
  width: 200px;
  height: auto;
  opacity: 0.8;
}

.empty-state h3 {
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}

.empty-state p {
  color: var(--color-text-secondary);
  max-width: 400px;
}


/* ── Tooltip ──────────────────────────────────────────────────── */

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-petrol-dark);
  color: var(--color-cream);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-200) var(--ease-default);
}

.tooltip:hover::after {
  opacity: 1;
}


/* ── Toggle Switch ────────────────────────────────────────────── */

.toggle-switch {
  width: 48px;
  height: 26px;
  background: var(--color-surface-dim);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: background-color var(--duration-200) var(--ease-default);
  border: none;
  flex-shrink: 0;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  top: 2px;
  left: 2px;
  transition: transform var(--duration-200) var(--ease-default);
  box-shadow: var(--shadow-sm);
}

.toggle-switch.on {
  background: var(--color-orange);
}

.toggle-switch.on::after {
  transform: translateX(22px);
}


/* ── Search Pill ──────────────────────────────────────────────── */

.search-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  border: 1px solid var(--color-outline);
  transition: border-color var(--duration-200) var(--ease-default);
}

.search-pill:hover {
  border-color: var(--color-outline-strong);
}

.search-pill kbd {
  font-size: var(--text-xs);
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-outline);
  font-family: inherit;
}


/* ── Notification & Online Dots ───────────────────────────────── */

.notification-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-coral);
  display: inline-block;
}

.online-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-teal);
  border: 2px solid var(--color-surface);
  position: absolute;
  bottom: 0;
  right: 0;
}


/* ── Divider ──────────────────────────────────────────────────── */

.divider {
  height: 1px;
  background: var(--color-outline);
  margin: var(--space-4) 0;
}


/* ── Map Placeholder ──────────────────────────────────────────── */

.map-placeholder {
  width: 100%;
  height: 300px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  border: 2px dashed var(--color-outline);
}

/* ── Map Container (Mapbox GL) ───────────────────────────────── */

.map-container {
  width: 100%;
  height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.map-container .mapboxgl-map {
  border-radius: inherit;
}

.map-container-sm {
  height: 120px;
}

.map-container-md {
  height: 300px;
}

.map-container-lg {
  height: 400px;
}

.map-container-xl {
  height: 500px;
}

/* ── CSS Map Placeholders ──────────────────────────────────────── */

.css-map {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.css-map-sm  { height: 120px; }
.css-map-md  { height: 300px; }
.css-map-lg  { height: 400px; }
.css-map-xl  { height: 500px; }

/* -- Route card mini-map ---------------------------------------- */

.css-map-route {
  background: linear-gradient(
    var(--css-map-angle, 135deg),
    #004860 0%,
    #337D96 30%,
    #2A9D8F 50%,
    #d7e5dc 70%,
    #F0EEE9 100%
  );
  position: relative;
}

/* Subtle topo-grid overlay */
.css-map-route::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,   transparent, transparent 23px, rgba(255,255,255,0.07) 23px, rgba(255,255,255,0.07) 24px),
    repeating-linear-gradient(90deg,  transparent, transparent 23px, rgba(255,255,255,0.07) 23px, rgba(255,255,255,0.07) 24px);
  pointer-events: none;
}

/* Dotted route path */
.css-map-route-path {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.css-map-route-path svg {
  width: 100%;
  height: 100%;
}

.css-map-route-path svg path {
  fill: none;
  stroke: var(--color-orange);
  stroke-width: 3;
  stroke-dasharray: 8 6;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 3px rgba(251, 145, 74, 0.4));
}

/* Pin marker */
.css-map-pin {
  position: absolute;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  z-index: 2;
  animation: css-map-pin-drop 0.4s ease-out;
}

@keyframes css-map-pin-drop {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* -- Lost Pet map ------------------------------------------------ */

.css-map-lost {
  background:
    radial-gradient(circle at 35% 45%, rgba(231, 111, 81, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 70% 30%, rgba(231, 111, 81, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 55% 70%, rgba(231, 111, 81, 0.10) 0%, transparent 30%),
    linear-gradient(160deg, #004860 0%, #337D96 35%, #2A9D8F 55%, #d7e5dc 80%, #F0EEE9 100%);
  position: relative;
}

.css-map-lost::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,   transparent, transparent 30px, rgba(255,255,255,0.06) 30px, rgba(255,255,255,0.06) 31px),
    repeating-linear-gradient(90deg,  transparent, transparent 30px, rgba(255,255,255,0.06) 30px, rgba(255,255,255,0.06) 31px);
  pointer-events: none;
}

/* Street-like lines */
.css-map-lost::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg,   transparent 48%, rgba(255,255,255,0.10) 48%, rgba(255,255,255,0.10) 52%, transparent 52%),
    linear-gradient(90deg,  transparent 38%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0.08) 42%, transparent 42%),
    linear-gradient(45deg,  transparent 46%, rgba(255,255,255,0.05) 46%, rgba(255,255,255,0.05) 54%, transparent 54%);
  pointer-events: none;
}

/* Alert pulse ring for lost pet pins */
.css-map-alert-pin {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.css-map-alert-pin::before {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(231, 111, 81, 0.25);
  animation: alert-pulse 2s ease-out infinite;
}

.css-map-alert-pin .pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-coral);
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}

@keyframes alert-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* -- Walk history map -------------------------------------------- */

.css-map-walks {
  background: linear-gradient(
    145deg,
    #004860 0%,
    #1a6b7f 20%,
    #2A9D8F 45%,
    #7bc4b8 65%,
    #d7e5dc 85%,
    #F0EEE9 100%
  );
  position: relative;
}

.css-map-walks::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,   transparent, transparent 28px, rgba(255,255,255,0.06) 28px, rgba(255,255,255,0.06) 29px),
    repeating-linear-gradient(90deg,  transparent, transparent 28px, rgba(255,255,255,0.06) 28px, rgba(255,255,255,0.06) 29px);
  pointer-events: none;
}

/* Multiple route traces for walks map */
.css-map-walks-routes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.css-map-walks-routes svg {
  width: 100%;
  height: 100%;
}

.css-map-walks-routes svg path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.css-map-walks-routes svg path:nth-child(1) { stroke: var(--color-orange); stroke-dasharray: 6 4; }
.css-map-walks-routes svg path:nth-child(2) { stroke: var(--color-teal);   stroke-dasharray: 8 5; opacity: 0.5; }
.css-map-walks-routes svg path:nth-child(3) { stroke: var(--color-amber);  stroke-dasharray: 4 6; opacity: 0.4; }

/* Label overlay in map */
.css-map-label {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  background: rgba(0, 72, 96, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  z-index: 3;
  letter-spacing: 0.02em;
}


/* ================================================================
   5. UTILITIES
   ================================================================ */

/* -- Flexbox ---------------------------------------------------- */

.flex      { display: flex; }
.flex-col  { flex-direction: column; }
.flex-row  { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }

.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }

.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-start   { justify-content: flex-start; }

/* -- Gap -------------------------------------------------------- */

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* -- Padding ---------------------------------------------------- */

.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* -- Margin ----------------------------------------------------- */

.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* -- Sizing ----------------------------------------------------- */

.w-full     { width: 100%; }
.h-full     { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* -- Text Alignment --------------------------------------------- */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* -- Text Overflow ---------------------------------------------- */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- Visibility ------------------------------------------------- */

.hidden {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* -- Border Radius ---------------------------------------------- */

.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* -- Overflow --------------------------------------------------- */

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* -- Positioning ------------------------------------------------ */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* -- Z-Index ---------------------------------------------------- */

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* -- Cursor ----------------------------------------------------- */

.cursor-pointer { cursor: pointer; }

/* -- Transition ------------------------------------------------- */

.transition-all {
  transition: all var(--duration-200) var(--ease-default);
}

/* -- Opacity ---------------------------------------------------- */

.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }


/* ================================================================
   6. RESPONSIVE BREAKPOINTS
   ================================================================ */

@media (max-width: 1439px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sidebar:not(.collapsed) {
    width: var(--sidebar-width-collapsed);
  }

  .sidebar:not(.collapsed) .sidebar-label {
    display: none;
  }
}

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

  .sidebar {
    display: none;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   7. ANIMATIONS -- Keyframes, Entry Effects, Transitions
   ================================================================ */

/* -- Entry Keyframes -------------------------------------------- */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  60% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes expandWidth {
  from { width: 0; }
  to { width: 100%; }
}

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

/* -- Continuous Animations -------------------------------------- */

@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

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

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(251, 145, 74, 0.2),
                0 0 15px rgba(251, 145, 74, 0.1);
  }
  50% {
    box-shadow: 0 0 10px rgba(251, 145, 74, 0.4),
                0 0 30px rgba(251, 145, 74, 0.2);
  }
}

@keyframes borderGlow {
  0%, 100% {
    border-color: rgba(251, 145, 74, 0.3);
  }
  50% {
    border-color: rgba(251, 145, 74, 0.8);
  }
}

@keyframes rotateGradient {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(251, 145, 74, 0.4);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(251, 145, 74, 0);
  }
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 200%; }
}

@keyframes slideProgress {
  from { width: 0; }
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

/* -- Entry Animation Classes ------------------------------------ */

.fade-in {
  animation: fadeIn var(--duration-500) var(--ease-out) both;
}

.slide-up {
  animation: fadeInUp var(--duration-500) var(--ease-out) both;
}

.slide-down {
  animation: fadeInDown var(--duration-500) var(--ease-out) both;
}

.slide-left {
  animation: fadeInLeft var(--duration-500) var(--ease-out) both;
}

.slide-right {
  animation: fadeInRight var(--duration-500) var(--ease-out) both;
}

.scale-in {
  animation: scaleIn var(--duration-500) var(--ease-out) both;
}

.pop-in {
  animation: popIn var(--duration-500) var(--ease-spring) both;
}

.blur-in {
  animation: blurIn var(--duration-500) var(--ease-out) both;
}

.bounce-in {
  animation: bounceIn var(--duration-700) var(--ease-spring) both;
}

/* -- Stagger Delay Classes -------------------------------------- */

.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }
.stagger-5 { animation-delay: 250ms; }
.stagger-6 { animation-delay: 300ms; }
.stagger-7 { animation-delay: 350ms; }
.stagger-8 { animation-delay: 400ms; }
.stagger-9 { animation-delay: 450ms; }
.stagger-10 { animation-delay: 500ms; }
.stagger-11 { animation-delay: 550ms; }
.stagger-12 { animation-delay: 600ms; }

/* -- Duration Modifiers ----------------------------------------- */

.anim-fast { animation-duration: var(--duration-200); }
.anim-normal { animation-duration: var(--duration-300); }
.anim-slow { animation-duration: var(--duration-700); }

/* -- Continuous Animation Classes ------------------------------- */

.pulse-soft {
  animation: pulseSoft 2.5s ease-in-out infinite;
}

.float {
  animation: float 3s ease-in-out infinite;
}

.shimmer-bg {
  background: linear-gradient(
    90deg,
    var(--color-surface-alt) 25%,
    var(--color-surface) 50%,
    var(--color-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.glow-pulse {
  animation: glowPulse 2s ease-in-out infinite;
}

.border-glow {
  animation: borderGlow 2s ease-in-out infinite;
}

.breathe {
  animation: breathe 3s ease-in-out infinite;
}

.ripple-effect {
  animation: ripple 1.5s ease-out infinite;
}

.wiggle {
  animation: wiggle 0.5s ease-in-out;
}

/* -- Progress Animations ---------------------------------------- */

.progress-fill-animated {
  animation: slideProgress var(--duration-700) var(--ease-out) both;
}

.counter-animate {
  animation: countUp var(--duration-500) var(--ease-out) both;
}

/* ================================================================
   8. HOVER EFFECTS -- Interactive Micro-Interactions
   ================================================================ */

.hover-lift {
  transition:
    transform var(--duration-300) var(--ease-spring),
    box-shadow var(--duration-300) var(--ease-default);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-lift:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.hover-glow {
  transition:
    box-shadow var(--duration-300) var(--ease-default);
}

.hover-glow:hover {
  box-shadow: 0 0 0 3px rgba(251, 145, 74, 0.15),
              var(--shadow-md);
}

.hover-scale {
  transition: transform var(--duration-200) var(--ease-spring);
}

.hover-scale:hover {
  transform: scale(1.03);
}

.hover-scale:active {
  transform: scale(0.98);
}

.hover-shine {
  position: relative;
  overflow: hidden;
}

.hover-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: none;
  pointer-events: none;
}

.hover-shine:hover::after {
  animation: shine 0.6s ease-out;
}

.hover-border-orange {
  transition: border-color var(--duration-200) var(--ease-default);
}

.hover-border-orange:hover {
  border-color: var(--color-orange) !important;
}

.hover-bg-subtle {
  transition: background-color var(--duration-200) var(--ease-default);
}

.hover-bg-subtle:hover {
  background-color: rgba(var(--color-petrol-rgb), 0.04);
}

.hover-text-orange {
  transition: color var(--duration-200) var(--ease-default);
}

.hover-text-orange:hover {
  color: var(--color-orange);
}

/* ================================================================
   9. LIQUID GLASS -- Glassmorphism Effects
   ================================================================ */

.glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
}

.dark .glass-card,
[data-theme="dark"] .glass-card {
  background: rgba(0, 45, 62, 0.55);
  border: 1px solid rgba(240, 238, 233, 0.08);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.glass-card-strong {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.06),
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
}

.dark .glass-card-strong,
[data-theme="dark"] .glass-card-strong {
  background: rgba(0, 45, 62, 0.7);
  border: 1px solid rgba(240, 238, 233, 0.12);
}

/* Animated specular "reflect" — a glint that periodically sweeps across a
   glass surface (place-detail hero). Parent must be position:relative +
   overflow:hidden. The moving streak is the ::before; the loop spends most of
   its time idle (glint visible ~0-26%) so it reads as a crystal glance of
   light, NOT a skeleton-loading shimmer. */
.cp-glass-glint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cp-glass-glint::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -60%;
  width: 45%;
  height: 160%;
  transform: rotate(8deg);
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  animation: cp-glass-glint-sweep 6.5s ease-in-out infinite;
}

@keyframes cp-glass-glint-sweep {
  0% { left: -60%; opacity: 0; }
  6% { opacity: 1; }
  26% { left: 130%; opacity: 1; }
  34% { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-glass-glint::before { animation: none; opacity: 0; }
}

.glass-sidebar {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    4px 0 30px rgba(0, 0, 0, 0.03),
    inset -1px 0 0 rgba(255, 255, 255, 0.5);
}

.dark .glass-sidebar,
[data-theme="dark"] .glass-sidebar {
  background: rgba(0, 45, 62, 0.65);
  border-right: 1px solid rgba(240, 238, 233, 0.06);
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
}

.glass-topbar {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.03),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

.dark .glass-topbar,
[data-theme="dark"] .glass-topbar {
  background: rgba(0, 45, 62, 0.65);
  border-bottom: 1px solid rgba(240, 238, 233, 0.06);
}

.glass-input {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.dark .glass-input,
[data-theme="dark"] .glass-input {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-badge {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
}

.glass-pill {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
}

.dark .glass-pill,
[data-theme="dark"] .glass-pill {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ================================================================
   10. SPECIAL EFFECTS -- Gradients, Overlays, Decorative
   ================================================================ */

/* -- Animated Gradient Background ------------------------------- */

.hero-gradient {
  background: linear-gradient(
    135deg,
    var(--color-petrol) 0%,
    var(--color-petrol-light) 40%,
    var(--color-teal) 70%,
    var(--color-orange) 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 8s ease-in-out infinite;
}

.hero-gradient-warm {
  background: linear-gradient(
    135deg,
    var(--color-orange) 0%,
    var(--color-coral) 30%,
    var(--color-amber) 70%,
    var(--color-orange-light) 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 6s ease-in-out infinite;
}

/* -- Text Gradient ---------------------------------------------- */

.text-gradient {
  background: linear-gradient(
    135deg,
    var(--color-petrol) 0%,
    var(--color-teal) 50%,
    var(--color-orange) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease-in-out infinite;
}

.text-gradient-warm {
  background: linear-gradient(
    135deg,
    var(--color-orange) 0%,
    var(--color-coral) 50%,
    var(--color-amber) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* -- Decorative Orbs -------------------------------------------- */

.orb-decoration {
  position: relative;
  overflow: hidden;
}

.orb-decoration::before,
.orb-decoration::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(80px);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.orb-decoration::before {
  width: 300px;
  height: 300px;
  background: var(--color-orange);
  top: -100px;
  right: -100px;
}

.orb-decoration::after {
  width: 250px;
  height: 250px;
  background: var(--color-teal);
  bottom: -80px;
  left: -80px;
}

/* -- Noise Overlay --------------------------------------------- */

.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

/* -- Frosted Divider ------------------------------------------- */

.divider-glass {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  margin: var(--space-4) 0;
}

.dark .divider-glass,
[data-theme="dark"] .divider-glass {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
}

/* -- Badge Glow ------------------------------------------------ */

.badge-glow-success {
  box-shadow: 0 0 8px rgba(42, 157, 143, 0.3);
}

.badge-glow-warning {
  box-shadow: 0 0 8px rgba(244, 162, 97, 0.3);
}

.badge-glow-error {
  box-shadow: 0 0 8px rgba(231, 111, 81, 0.3);
}

.badge-glow-orange {
  box-shadow: 0 0 8px rgba(251, 145, 74, 0.3);
}

/* -- Number Counter -------------------------------------------- */

.stat-value-animate {
  animation: countUp var(--duration-700) var(--ease-out) both;
  display: inline-block;
}

/* -- Skeleton Loading ------------------------------------------ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-alt) 25%,
    var(--color-surface-dim) 50%,
    var(--color-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.skeleton-text {
  height: 1em;
  width: 100%;
  margin-bottom: var(--space-2);
}

.skeleton-circle {
  border-radius: var(--radius-full);
}

.skeleton-card {
  height: 120px;
  width: 100%;
}

/* ================================================================
   11. ENHANCED EXISTING COMPONENTS -- Glass Upgrades
   ================================================================ */

/* -- Sidebar Glass Upgrade -------------------------------------- */

.sidebar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-right: 1px solid rgba(0, 72, 96, 0.08);
  box-shadow:
    4px 0 30px rgba(0, 0, 0, 0.04),
    inset -1px 0 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .sidebar,
.dark .sidebar {
  background: rgba(10, 58, 79, 0.75);
  border-right: 1px solid rgba(240, 238, 233, 0.06);
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
}

/* -- Topbar Glass Upgrade --------------------------------------- */

.topbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(0, 72, 96, 0.08);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .topbar,
.dark .topbar {
  background: rgba(10, 58, 79, 0.75);
  border-bottom: 1px solid rgba(240, 238, 233, 0.06);
}

/* -- Card Glass Upgrade ----------------------------------------- */

.card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(0, 72, 96, 0.08);
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition:
    transform var(--duration-300) var(--ease-spring),
    box-shadow var(--duration-300) var(--ease-default),
    border-color var(--duration-200) var(--ease-default);
}

[data-theme="dark"] .card,
.dark .card {
  background: rgba(10, 58, 79, 0.55);
  border: 1px solid rgba(240, 238, 233, 0.08);
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* -- Card Interactive Glass Upgrade ----------------------------- */

.card-interactive {
  cursor: pointer;
  transition:
    transform var(--duration-300) var(--ease-spring),
    box-shadow var(--duration-300) var(--ease-default),
    border-color var(--duration-200) var(--ease-default);
}

.card-interactive:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border-color: rgba(251, 145, 74, 0.2);
}

.card-interactive:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* -- Stat Card Glass Upgrade ------------------------------------ */

.stat-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(0, 72, 96, 0.08);
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition:
    transform var(--duration-300) var(--ease-spring),
    box-shadow var(--duration-300) var(--ease-default);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .stat-card,
.dark .stat-card {
  background: rgba(10, 58, 79, 0.5);
  border: 1px solid rgba(240, 238, 233, 0.08);
}

/* -- Search Pill Glass Upgrade ---------------------------------- */

.search-pill {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition:
    border-color var(--duration-200) var(--ease-default),
    box-shadow var(--duration-200) var(--ease-default),
    background-color var(--duration-200) var(--ease-default);
}

.search-pill:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(251, 145, 74, 0.2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* -- Sidebar Item Hover Enhancement ----------------------------- */

.sidebar-item {
  transition:
    background-color var(--duration-200) var(--ease-default),
    transform var(--duration-200) var(--ease-spring),
    color var(--duration-200) var(--ease-default);
}

.sidebar-item:hover {
  transform: translateX(3px);
  background: rgba(0, 72, 96, 0.06);
}

.sidebar-item.active {
  background: rgba(251, 145, 74, 0.12);
  box-shadow: inset 3px 0 0 var(--color-orange);
}

/* -- Button Press Effect ---------------------------------------- */

.btn {
  transition:
    background-color var(--duration-200) var(--ease-default),
    filter var(--duration-200) var(--ease-default),
    box-shadow var(--duration-200) var(--ease-default),
    transform var(--duration-100) var(--ease-default);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  box-shadow: 0 2px 8px rgba(251, 145, 74, 0.25);
}

.btn-primary:hover {
  box-shadow: 0 4px 16px rgba(251, 145, 74, 0.35);
}

/* -- Pet Avatar Ring Animation ---------------------------------- */

.pet-avatar-ring {
  transition:
    border-color var(--duration-200) var(--ease-default),
    transform var(--duration-200) var(--ease-spring),
    box-shadow var(--duration-200) var(--ease-default);
}

.pet-avatar-ring:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pet-avatar-ring.active {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(251, 145, 74, 0.2);
}

/* -- Tab Item Animation ----------------------------------------- */

.tab-item {
  transition:
    color var(--duration-200) var(--ease-default),
    border-color var(--duration-200) var(--ease-default),
    background-color var(--duration-200) var(--ease-default),
    transform var(--duration-200) var(--ease-spring);
}

.tab-item:hover {
  transform: translateY(-1px);
}

/* -- Badge Animation -------------------------------------------- */

.badge {
  transition:
    transform var(--duration-200) var(--ease-spring),
    box-shadow var(--duration-200) var(--ease-default);
}

.badge:hover {
  transform: scale(1.05);
}

/* -- Chip Selection Animation ----------------------------------- */

.chip {
  transition:
    border-color var(--duration-200) var(--ease-default),
    background-color var(--duration-200) var(--ease-default),
    color var(--duration-200) var(--ease-default),
    transform var(--duration-200) var(--ease-spring);
}

.chip:hover {
  transform: translateY(-1px);
}

.chip.selected {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(251, 145, 74, 0.25);
}

/* -- Toggle Switch Enhance -------------------------------------- */

.toggle-switch {
  transition:
    background-color var(--duration-200) var(--ease-default),
    box-shadow var(--duration-200) var(--ease-default);
}

.toggle-switch.on {
  box-shadow: 0 0 8px rgba(251, 145, 74, 0.3);
}

/* -- Modal Glass Enhancement ------------------------------------ */

.modal-backdrop {
  animation: fadeIn var(--duration-300) var(--ease-out) both;
}

.modal-content {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: scaleIn var(--duration-300) var(--ease-spring) both;
}

[data-theme="dark"] .modal-content,
.dark .modal-content {
  background: rgba(10, 58, 79, 0.85);
  border: 1px solid rgba(240, 238, 233, 0.1);
}

/* -- Toast Animation -------------------------------------------- */

.toast {
  animation: fadeInRight var(--duration-300) var(--ease-spring) both;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* -- Notification Dot Pulse ------------------------------------- */

.notification-dot {
  animation: pulseSoft 2s ease-in-out infinite;
}

.badge-count {
  animation: popIn var(--duration-300) var(--ease-spring) both;
}

/* -- Progress Bar Enhancement ----------------------------------- */

.progress-fill {
  transition: width var(--duration-700) var(--ease-spring);
  background: linear-gradient(
    90deg,
    var(--color-orange),
    var(--color-amber)
  );
}

/* -- Scrollbar Glass -------------------------------------------- */

.cds ::-webkit-scrollbar-track {
  background: rgba(0, 72, 96, 0.04);
}

.cds ::-webkit-scrollbar-thumb {
  background: rgba(0, 72, 96, 0.15);
  border-radius: 3px;
}

.cds ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 72, 96, 0.25);
}

/* ================================================================
   12. PAGE-LEVEL ANIMATION PATTERNS
   ================================================================ */

/* -- Page Enter ------------------------------------------------- */

.page-enter {
  animation: fadeInUp var(--duration-500) var(--ease-out) both;
}

/* -- Bento Grid Stagger ----------------------------------------- */

.bento-grid > * {
  animation: fadeInUp var(--duration-500) var(--ease-out) both;
}

.bento-grid > *:nth-child(1) { animation-delay: 0ms; }
.bento-grid > *:nth-child(2) { animation-delay: 60ms; }
.bento-grid > *:nth-child(3) { animation-delay: 120ms; }
.bento-grid > *:nth-child(4) { animation-delay: 180ms; }
.bento-grid > *:nth-child(5) { animation-delay: 240ms; }
.bento-grid > *:nth-child(6) { animation-delay: 300ms; }
.bento-grid > *:nth-child(7) { animation-delay: 360ms; }
.bento-grid > *:nth-child(8) { animation-delay: 420ms; }
.bento-grid > *:nth-child(9) { animation-delay: 480ms; }
.bento-grid > *:nth-child(10) { animation-delay: 540ms; }
.bento-grid > *:nth-child(11) { animation-delay: 600ms; }
.bento-grid > *:nth-child(12) { animation-delay: 660ms; }

/* -- Sidebar Item Stagger --------------------------------------- */

.sidebar-nav .sidebar-item:nth-child(1) { animation: fadeInLeft var(--duration-300) var(--ease-out) both; animation-delay: 50ms; }
.sidebar-nav .sidebar-item:nth-child(2) { animation: fadeInLeft var(--duration-300) var(--ease-out) both; animation-delay: 100ms; }
.sidebar-nav .sidebar-item:nth-child(3) { animation: fadeInLeft var(--duration-300) var(--ease-out) both; animation-delay: 150ms; }
.sidebar-nav .sidebar-item:nth-child(4) { animation: fadeInLeft var(--duration-300) var(--ease-out) both; animation-delay: 200ms; }
.sidebar-nav .sidebar-item:nth-child(5) { animation: fadeInLeft var(--duration-300) var(--ease-out) both; animation-delay: 250ms; }
.sidebar-nav .sidebar-item:nth-child(6) { animation: fadeInLeft var(--duration-300) var(--ease-out) both; animation-delay: 300ms; }
.sidebar-nav .sidebar-item:nth-child(7) { animation: fadeInLeft var(--duration-300) var(--ease-out) both; animation-delay: 350ms; }
.sidebar-nav .sidebar-item:nth-child(8) { animation: fadeInLeft var(--duration-300) var(--ease-out) both; animation-delay: 400ms; }
.sidebar-nav .sidebar-item:nth-child(9) { animation: fadeInLeft var(--duration-300) var(--ease-out) both; animation-delay: 450ms; }
.sidebar-nav .sidebar-item:nth-child(10) { animation: fadeInLeft var(--duration-300) var(--ease-out) both; animation-delay: 500ms; }
.sidebar-nav .sidebar-item:nth-child(11) { animation: fadeInLeft var(--duration-300) var(--ease-out) both; animation-delay: 550ms; }

/* -- Pet Switcher Pop In ---------------------------------------- */

.pet-switcher .pet-avatar-ring {
  animation: popIn var(--duration-300) var(--ease-spring) both;
}

.pet-switcher .pet-avatar-ring:nth-child(1) { animation-delay: 100ms; }
.pet-switcher .pet-avatar-ring:nth-child(2) { animation-delay: 170ms; }
.pet-switcher .pet-avatar-ring:nth-child(3) { animation-delay: 240ms; }
.pet-switcher .pet-avatar-ring:nth-child(4) { animation-delay: 310ms; }

/* -- List Item Stagger (generic) -------------------------------- */

.list-animate > * {
  animation: fadeInUp var(--duration-300) var(--ease-out) both;
}

.list-animate > *:nth-child(1) { animation-delay: 0ms; }
.list-animate > *:nth-child(2) { animation-delay: 50ms; }
.list-animate > *:nth-child(3) { animation-delay: 100ms; }
.list-animate > *:nth-child(4) { animation-delay: 150ms; }
.list-animate > *:nth-child(5) { animation-delay: 200ms; }
.list-animate > *:nth-child(6) { animation-delay: 250ms; }
.list-animate > *:nth-child(7) { animation-delay: 300ms; }
.list-animate > *:nth-child(8) { animation-delay: 350ms; }
.list-animate > *:nth-child(9) { animation-delay: 400ms; }
.list-animate > *:nth-child(10) { animation-delay: 450ms; }

/* -- Stat Counter Stagger --------------------------------------- */

.stats-row > * {
  animation: scaleIn var(--duration-500) var(--ease-spring) both;
}

.stats-row > *:nth-child(1) { animation-delay: 0ms; }
.stats-row > *:nth-child(2) { animation-delay: 80ms; }
.stats-row > *:nth-child(3) { animation-delay: 160ms; }
.stats-row > *:nth-child(4) { animation-delay: 240ms; }

/* -- Gamification Section ---------------------------------------- */

.coins-display {
  animation: bounceIn var(--duration-700) var(--ease-spring) both;
}

/* -- Chat Message Stagger --------------------------------------- */

.messages-list > * {
  animation: fadeInUp var(--duration-200) var(--ease-out) both;
}

.messages-list > *:nth-child(1) { animation-delay: 0ms; }
.messages-list > *:nth-child(2) { animation-delay: 40ms; }
.messages-list > *:nth-child(3) { animation-delay: 80ms; }
.messages-list > *:nth-child(4) { animation-delay: 120ms; }
.messages-list > *:nth-child(5) { animation-delay: 160ms; }
.messages-list > *:nth-child(6) { animation-delay: 200ms; }
.messages-list > *:nth-child(7) { animation-delay: 240ms; }
.messages-list > *:nth-child(8) { animation-delay: 280ms; }

/* -- Topbar Entrance -------------------------------------------- */

.topbar {
  animation: fadeInDown var(--duration-300) var(--ease-out) both;
}

/* -- Sidebar Entrance ------------------------------------------- */

.sidebar {
  animation: fadeInLeft var(--duration-300) var(--ease-out) both;
}

/* ================================================================
   KaluAI Branding Components
   ================================================================ */

/* -- KaluAI Badge Pill ------------------------------------------ */
.kaluai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(var(--color-orange-rgb), 0.15);
  border-radius: 12px;
  font-weight: 600;
  color: var(--color-orange);
  font-size: var(--text-xs);
  line-height: 1;
}

.kaluai-badge--standard {
  gap: 6px;
  padding: 6px 10px;
  font-size: var(--text-sm);
}

.kaluai-badge img {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: cover;
}

.kaluai-badge--standard img {
  width: 18px;
  height: 18px;
}

/* -- KaluAI Wordmark -------------------------------------------- */
.kaluai-wordmark {
  font-family: var(--font-family);
  font-weight: 700;
  letter-spacing: -0.3px;
  font-size: var(--text-md);
}

.kaluai-wordmark .k,
.kaluai-wordmark .ai {
  color: var(--color-orange);
}

.kaluai-wordmark .alu {
  color: var(--color-text-primary);
}

/* -- KaluAI Avatar ---------------------------------------------- */
.kaluai-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(var(--color-orange-rgb), 0.12);
  flex-shrink: 0;
}

.kaluai-avatar--sm {
  width: 32px;
  height: 32px;
}

.kaluai-avatar--lg {
  width: 48px;
  height: 48px;
}

/* -- KaluAI Chat Header ----------------------------------------- */
.kaluai-chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-outline);
}

.kaluai-status {
  font-size: var(--text-xs);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  gap: 4px;
}

.kaluai-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-teal);
  display: inline-block;
}

/* ── Pet Wizard ─────────────────────────────────────────────────── */

.wizard-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: 0 var(--space-4);
}

.wizard-progress-step {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-outline);
  transition: background var(--duration-300) var(--ease-default);
}

.wizard-progress-step.completed {
  background: var(--color-orange);
}

.wizard-progress-step.active {
  background: var(--color-orange);
  box-shadow: 0 0 8px rgba(251, 145, 74, 0.4);
}

.wizard-step-label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.wizard-step-label.active {
  color: var(--color-orange);
}

.wizard-body {
  min-height: 360px;
  padding: var(--space-4) var(--space-6);
}

.wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-outline);
  gap: var(--space-3);
}

/* Species selection cards */
.species-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 2px solid var(--color-outline);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-200) var(--ease-default);
  background: var(--color-surface);
  min-height: 140px;
}

.species-card:hover {
  border-color: var(--color-orange);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.species-card.selected {
  border-color: var(--color-orange);
  background: rgba(251, 145, 74, 0.08);
  box-shadow: 0 0 0 3px rgba(251, 145, 74, 0.15);
}

.species-card .species-icon {
  font-size: 48px;
  line-height: 1;
}

.species-card .species-label {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Breed selection */
.breed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
  padding-right: var(--space-2);
}

.breed-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-200) var(--ease-default);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.breed-option:hover {
  border-color: var(--color-orange);
  background: rgba(251, 145, 74, 0.04);
}

.breed-option.selected {
  border-color: var(--color-orange);
  background: rgba(251, 145, 74, 0.08);
  color: var(--color-orange);
}

.breed-option .breed-check {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--duration-200);
  font-size: 12px;
}

.breed-option.selected .breed-check {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: white;
}

/* Form fields for wizard */
.wizard-field {
  margin-bottom: var(--space-4);
}

.wizard-field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.wizard-field .input {
  width: 100%;
}

/* Chip selector (for size, color, gender) */
.chip-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip-selector .chip {
  cursor: pointer;
  transition: all var(--duration-200);
  user-select: none;
}

.chip-selector .chip:hover {
  border-color: var(--color-orange);
}

.chip-selector .chip.selected {
  background: rgba(251, 145, 74, 0.12);
  border-color: var(--color-orange);
  color: var(--color-orange);
}

/* Wizard celebration */
.wizard-celebration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  gap: var(--space-4);
}

.wizard-celebration .celebration-icon {
  font-size: 72px;
  animation: bounceIn var(--duration-700) var(--ease-spring) both;
}

.wizard-celebration h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.wizard-celebration .pet-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-outline);
}

.wizard-celebration .pet-summary .summary-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(251, 145, 74, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* ── Enhanced Pet Card ──────────────────────────────────────────── */

.pet-card-hero {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.pet-card-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-500) var(--ease-default);
}

.pet-card-hero:hover img {
  transform: scale(1.05);
}

.pet-card-hero .pet-avatar-overlay {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.pet-card-hero .pet-avatar-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-card-hero .pet-active-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-orange);
  color: var(--color-petrol);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-sm);
}

.pet-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pet-quick-stats .mini-stat {
  text-align: center;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.pet-quick-stats .mini-stat .mini-stat-value {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.pet-quick-stats .mini-stat .mini-stat-label {
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

.pet-temperament {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-2);
}

.pet-temperament .chip {
  font-size: 10px;
  padding: 1px var(--space-2);
}

.pet-card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pet-card-actions .btn {
  flex: 1;
  font-size: var(--text-xs);
  padding: var(--space-2);
  height: auto;
}

/* ── Pet Page Hero ──────────────────────────────────────────────── */

.pet-page-hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--section-gap);
}

.pet-page-hero-bg {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

.pet-page-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6) var(--space-8);
  background: linear-gradient(transparent, rgba(0, 48, 60, 0.85));
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
}

.pet-page-hero-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  border: 3px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  flex-shrink: 0;
}

.pet-page-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-page-hero-info {
  flex: 1;
  color: #fff;
}

.pet-page-hero-info h1 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-1) 0;
  color: #fff;
}

.pet-page-hero-info p {
  margin: 0;
  opacity: 0.8;
  font-size: var(--text-sm);
}

.pet-page-hero-actions {
  display: flex;
  gap: var(--space-2);
}

/* ── Add Pet Card (in grid) ─────────────────────────────────────── */

.add-pet-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 380px;
  border: 2px dashed var(--color-outline);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-300) var(--ease-default);
  background: transparent;
  color: var(--color-text-secondary);
}

.add-pet-card:hover {
  border-color: var(--color-orange);
  background: rgba(251, 145, 74, 0.04);
  color: var(--color-orange);
  transform: translateY(-2px);
}

.add-pet-card .add-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: rgba(251, 145, 74, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: all var(--duration-300);
}

.add-pet-card:hover .add-icon {
  background: rgba(251, 145, 74, 0.15);
  transform: scale(1.1);
}

.add-pet-card .add-label {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
}

.add-pet-card .add-sublabel {
  font-size: var(--text-xs);
}

/* ── Family Stats Banner ────────────────────────────────────────── */

.family-stats-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--card-gap);
  margin-bottom: var(--section-gap);
}

.family-stats-banner .stat-card {
  text-align: center;
}

/* ================================================================
   REDESIGN 2026 -- Hero Sections, Enhanced Cards, Desktop Layouts
   ================================================================ */

/* ── Hero Section ────────────────────────────────────────────── */

.hero-section {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: var(--space-10) var(--space-8);
  margin-bottom: var(--section-gap);
}

.hero-section-gradient {
  background: linear-gradient(135deg, var(--color-petrol) 0%, var(--color-petrol-dark) 40%, #0a4a5e 70%, var(--color-teal) 100%);
  color: var(--color-cream);
}

.hero-section-warm {
  background: linear-gradient(135deg, var(--color-orange) 0%, #e07830 50%, var(--color-coral) 100%);
  color: white;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(251, 145, 74, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 20% 80%, rgba(42, 157, 143, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.hero-title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
  position: relative;
}

.hero-subtitle {
  font-size: var(--text-md);
  opacity: 0.85;
  max-width: 500px;
  line-height: var(--leading-relaxed);
  position: relative;
}

.hero-stats {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-6);
  position: relative;
}

.hero-stat {
  text-align: center;
}

.hero-stat-value {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-black);
}

.hero-stat-label {
  font-size: var(--text-xs);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* ── Floating Decorations for Heroes ─────────────────────────── */

.hero-decoration {
  position: absolute;
  font-size: 48px;
  opacity: 0.15;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}

.hero-decoration:nth-child(1) { top: 15%; right: 10%; animation-delay: 0s; }
.hero-decoration:nth-child(2) { top: 60%; right: 25%; animation-delay: 1.5s; font-size: 36px; }
.hero-decoration:nth-child(3) { top: 30%; right: 40%; animation-delay: 3s; font-size: 28px; }

/* ── Featured Event Card ─────────────────────────────────────── */

.event-card-featured {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration-300) var(--ease-spring),
              box-shadow var(--duration-300) var(--ease-default);
}

.event-card-featured:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.event-card-featured-image {
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.event-card-featured-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 40%, transparent 70%);
}

.event-card-featured-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  color: white;
  z-index: 1;
}

.event-card-featured-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.event-card-featured-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  opacity: 0.9;
}

.event-card-featured .rsvp-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,72,96,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-300) var(--ease-default);
  z-index: 2;
}

.event-card-featured:hover .rsvp-overlay {
  opacity: 1;
}

/* ── Date Badge (Glassmorphic) ───────────────────────────────── */

.date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  min-width: 52px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.date-badge-day {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-black);
  color: var(--color-petrol);
  line-height: 1;
}

.date-badge-month {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

[data-theme="dark"] .date-badge {
  background: rgba(10, 58, 79, 0.9);
}

[data-theme="dark"] .date-badge-day {
  color: var(--color-cream);
}

/* ── Event Card Compact (Horizontal) ─────────────────────────── */

.event-card-compact {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration-300) var(--ease-spring),
              box-shadow var(--duration-300) var(--ease-default);
}

.event-card-compact:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.event-card-compact-image {
  height: 100%;
  min-height: 120px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.event-card-compact-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.event-card-compact-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}

/* ── Calendar Strip ──────────────────────────────────────────── */

.calendar-strip {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
  min-width: 56px;
  transition: all var(--duration-200) var(--ease-default);
  border: 1px solid transparent;
  background: var(--color-surface);
}

.calendar-day:hover {
  border-color: var(--color-outline-strong);
  background: var(--color-surface-alt);
}

.calendar-day.active {
  background: var(--color-orange);
  color: var(--color-petrol);
  border-color: var(--color-orange);
}

.calendar-day.active .calendar-day-name {
  color: var(--color-petrol);
  opacity: 0.8;
}

.calendar-day-name {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.calendar-day-number {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  margin-top: 2px;
}

.calendar-day-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-teal);
  margin-top: 4px;
}

.calendar-day.active .calendar-day-dot {
  background: var(--color-petrol);
}

/* ── Story Circles ───────────────────────────────────────────── */

.story-bar {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

.story-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  flex-shrink: 0;
}

.story-circle-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(var(--color-orange) 0%, var(--color-teal) 33%, var(--color-orange) 66%, var(--color-teal) 100%);
  transition: transform var(--duration-200) var(--ease-spring);
}

.story-circle:hover .story-circle-ring {
  transform: scale(1.08);
}

.story-circle-ring.viewed {
  background: var(--color-outline);
}

.story-circle-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-surface);
}

.story-circle-name {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  max-width: 64px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Community Stats Row ─────────────────────────────────────── */

.community-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.community-stat-card {
  text-align: center;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .community-stat-card {
  background: rgba(0, 45, 62, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.community-stat-icon {
  font-size: 24px;
  margin-bottom: var(--space-1);
}

.community-stat-value {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-black);
  color: var(--color-text-primary);
}

.community-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* ── Three Column Layout ─────────────────────────────────────── */

.three-col-layout {
  display: grid;
  grid-template-columns: 1fr 300px 260px;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 1439px) {
  .three-col-layout {
    grid-template-columns: 1fr 280px;
  }
  .three-col-layout > :nth-child(2) {
    display: none;
  }
}

@media (max-width: 1023px) {
  .three-col-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Write Post Card ─────────────────────────────────────────── */

.write-post-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  margin-bottom: var(--space-4);
  cursor: text;
  transition: border-color var(--duration-200) var(--ease-default);
}

.write-post-card:hover {
  border-color: var(--color-outline-strong);
}

[data-theme="dark"] .write-post-card {
  background: rgba(0, 45, 62, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.write-post-placeholder {
  flex: 1;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* ── Enhanced Feed Card ──────────────────────────────────────── */

.feed-card {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color var(--duration-200) var(--ease-default);
}

.feed-card:hover {
  border-color: var(--color-outline-strong);
}

[data-theme="dark"] .feed-card {
  background: rgba(0, 45, 62, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.feed-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.feed-card-author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.feed-card-author-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
}

.feed-card-time {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.feed-card-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--space-3) 0;
  max-height: 300px;
}

.feed-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-500) var(--ease-default);
}

.feed-card-image:hover img {
  transform: scale(1.03);
}

.feed-card-engagement {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-outline);
}

.feed-card-action {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  transition: all var(--duration-200) var(--ease-default);
}

.feed-card-action:hover {
  background: rgba(251, 145, 74, 0.08);
  color: var(--color-orange);
}

.feed-card-action.liked {
  color: var(--color-coral);
}

/* ── Group Card Enhanced ─────────────────────────────────────── */

.group-card-enhanced {
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration-300) var(--ease-spring),
              box-shadow var(--duration-300) var(--ease-default);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.group-card-enhanced:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .group-card-enhanced {
  background: rgba(0, 45, 62, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.group-card-banner {
  height: 100px;
  background: linear-gradient(135deg, var(--color-petrol) 0%, var(--color-teal) 100%);
  position: relative;
  overflow: hidden;
}

.group-card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  border: 3px solid var(--color-surface);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  margin-top: -28px;
  margin-left: var(--space-4);
}

.group-card-body {
  padding: var(--space-2) var(--space-4) var(--space-4);
}

.group-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
}

.group-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.group-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Category Cards Row (CaluPlatz) ──────────────────────────── */

.category-cards-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  cursor: pointer;
  min-width: 110px;
  transition: all var(--duration-200) var(--ease-default);
  border: 1px solid var(--color-outline);
  background: var(--color-surface);
}

.category-card:hover {
  border-color: var(--color-orange);
  background: rgba(251, 145, 74, 0.04);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.category-card.active {
  border-color: var(--color-orange);
  background: rgba(251, 145, 74, 0.08);
  box-shadow: 0 0 0 2px rgba(251, 145, 74, 0.2);
}

.category-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.category-card-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.category-card-count {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* ── Provider Card Enhanced ──────────────────────────────────── */

.provider-card-featured {
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration-300) var(--ease-spring),
              box-shadow var(--duration-300) var(--ease-default);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.provider-card-featured:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .provider-card-featured {
  background: rgba(0, 45, 62, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.provider-card-hero {
  height: 160px;
  position: relative;
  overflow: hidden;
}

.provider-card-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-card-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-petrol) 0%, var(--color-teal) 100%);
}

.provider-card-hero .provider-avatar-ring {
  position: absolute;
  bottom: -24px;
  left: var(--space-4);
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  border: 3px solid var(--color-surface);
  overflow: hidden;
  background: var(--color-surface);
}

.provider-card-hero .provider-avatar-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-card-body {
  padding: var(--space-8) var(--space-4) var(--space-4);
}

.provider-card-name {
  font-weight: var(--font-weight-bold);
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.provider-card-rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-1) 0;
}

.provider-card-rating-stars {
  color: var(--color-amber);
  font-size: var(--text-sm);
}

.provider-card-rating-text {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.provider-card-rating-count {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.provider-card-services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0;
}

.provider-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-outline);
  margin-top: var(--space-3);
}

.provider-card-availability {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
}

.availability-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.availability-dot.available {
  background: var(--color-teal);
  box-shadow: 0 0 6px rgba(42, 157, 143, 0.4);
  animation: pulseSoft 2s ease-in-out infinite;
}

.availability-dot.unavailable {
  background: var(--color-surface-dim);
}

/* ── Search Bar Enhanced ─────────────────────────────────────── */

.search-bar-hero {
  position: relative;
  max-width: 600px;
}

.search-bar-hero input {
  width: 100%;
  height: 56px;
  padding: 0 var(--space-6) 0 52px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  color: inherit;
  font-size: var(--text-base);
  font-family: inherit;
  transition: all var(--duration-200) var(--ease-default);
}

.search-bar-hero input::placeholder {
  color: inherit;
  opacity: 0.6;
}

.search-bar-hero input:focus {
  outline: none;
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.1);
}

.search-bar-hero-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  opacity: 0.7;
}

/* On light surface variant */
.search-bar-surface input {
  background: var(--color-surface);
  border-color: var(--color-outline);
  color: var(--color-text-primary);
}

.search-bar-surface input::placeholder {
  color: var(--color-text-secondary);
}

.search-bar-surface input:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(251, 145, 74, 0.15);
  background: var(--color-surface);
}

/* ── Section Headers ─────────────────────────────────────────── */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.section-link {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-orange);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.section-link:hover {
  text-decoration: underline;
}

/* ── AI Chat Enhanced ────────────────────────────────────────── */

.ai-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-6);
  align-items: start;
  min-height: calc(100vh - var(--topbar-height) - var(--page-padding) * 2 - 120px);
}

@media (max-width: 1200px) {
  .ai-layout {
    grid-template-columns: 1fr;
  }
}

.ai-chat-container {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  min-height: 600px;
  max-height: calc(100vh - var(--topbar-height) - var(--page-padding) * 2 - 120px);
}

[data-theme="dark"] .ai-chat-container {
  background: rgba(0, 45, 62, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-outline);
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ai-message {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  max-width: 85%;
}

.ai-message-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.ai-message-bubble.ai {
  background: var(--color-surface-alt);
  border-top-left-radius: var(--radius-xs);
}

.ai-message-bubble.user {
  background: var(--color-orange);
  color: white;
  border-top-right-radius: var(--radius-xs);
  margin-left: auto;
}

.ai-quick-replies {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.ai-chat-input {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-outline);
}

/* ── AI Sidebar Panel ────────────────────────────────────────── */

.ai-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.insight-card-priority {
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}

.insight-card-priority.severity-warning {
  background: linear-gradient(135deg, rgba(244, 162, 97, 0.12) 0%, rgba(244, 162, 97, 0.04) 100%);
  border: 1px solid rgba(244, 162, 97, 0.2);
}

.insight-card-priority.severity-good {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.12) 0%, rgba(42, 157, 143, 0.04) 100%);
  border: 1px solid rgba(42, 157, 143, 0.2);
}

.insight-card-priority.severity-info {
  background: linear-gradient(135deg, rgba(0, 72, 96, 0.08) 0%, rgba(0, 72, 96, 0.02) 100%);
  border: 1px solid rgba(0, 72, 96, 0.15);
}

.insight-card-priority.severity-reminder {
  background: linear-gradient(135deg, rgba(251, 145, 74, 0.12) 0%, rgba(251, 145, 74, 0.04) 100%);
  border: 1px solid rgba(251, 145, 74, 0.2);
}

.insight-card-enhanced {
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all var(--duration-300) var(--ease-default);
  position: relative;
  overflow: hidden;
}

.insight-card-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.insight-card-enhanced.severity-warning::before { background: var(--color-amber); }
.insight-card-enhanced.severity-good::before { background: var(--color-teal); }
.insight-card-enhanced.severity-info::before { background: var(--color-petrol); }
.insight-card-enhanced.severity-reminder::before { background: var(--color-orange); }

[data-theme="dark"] .insight-card-enhanced {
  background: rgba(0, 45, 62, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.insight-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.insight-card-icon.severity-warning { background: rgba(244, 162, 97, 0.15); }
.insight-card-icon.severity-good { background: rgba(42, 157, 143, 0.15); }
.insight-card-icon.severity-info { background: rgba(0, 72, 96, 0.1); }
.insight-card-icon.severity-reminder { background: rgba(251, 145, 74, 0.15); }

/* ── Event Detail Hero ───────────────────────────────────────── */

.event-detail-hero {
  position: relative;
  height: 300px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.event-detail-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-detail-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 40%, transparent 70%);
}

.event-detail-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-8);
  z-index: 1;
  color: white;
}

.event-detail-hero-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-black);
  margin-bottom: var(--space-2);
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.event-detail-hero-badges {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* ── Pulse Indicator ─────────────────────────────────────────── */

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-teal);
  position: relative;
}

.pulse-dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--color-teal);
  animation: pulseSoft 2s ease-in-out infinite;
  opacity: 0.5;
}

/* ── Verified Badge ──────────────────────────────────────────── */

.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-teal);
  color: white;
  font-size: 10px;
  flex-shrink: 0;
}

/* ── Filter Bar Inline ───────────────────────────────────────── */

.filter-bar-inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.filter-bar-inline .filter-select {
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23337D96' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.filter-bar-inline .filter-select:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(251, 145, 74, 0.15);
}

.filter-bar-inline .filter-count {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-left: auto;
}

/* ── Trending Card ───────────────────────────────────────────── */

.trending-card {
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .trending-card {
  background: rgba(0, 45, 62, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.trending-tag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  cursor: pointer;
  transition: color var(--duration-200) var(--ease-default);
}

.trending-tag:hover {
  color: var(--color-orange);
}

.trending-tag-rank {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  min-width: 20px;
}

.trending-tag-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
}

.trending-tag-count {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-left: auto;
}

/* ── Walk Section ─────────────────────────────────────────────── */

.walk-card-featured {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all var(--duration-300) var(--ease-default);
}

[data-theme="dark"] .walk-card-featured {
  background: rgba(0, 45, 62, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.walk-card-featured:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.walk-card-featured-map {
  position: relative;
  min-height: 180px;
  background: linear-gradient(135deg, var(--color-petrol) 0%, var(--color-teal) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.walk-card-featured-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,100 Q50,40 100,80 T180,60' stroke='rgba(255,255,255,0.3)' fill='none' stroke-width='3' stroke-dasharray='8,4'/%3E%3C/svg%3E") center/cover no-repeat;
  opacity: 0.5;
}

.walk-card-featured-avatar {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid white;
  object-fit: cover;
  z-index: 1;
  box-shadow: var(--shadow-md);
}

.walk-card-featured-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.walk-card-featured-stats {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.walk-card-featured-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.walk-card-featured-stat-value {
  font-weight: var(--font-weight-bold);
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.walk-card-featured-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.walk-card-compact {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all var(--duration-300) var(--ease-default);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .walk-card-compact {
  background: rgba(0, 45, 62, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.walk-card-compact:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.walk-card-compact::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.walk-card-compact.type-casual::before { background: var(--color-teal); }
.walk-card-compact.type-exercise::before { background: var(--color-orange); }
.walk-card-compact.type-training::before { background: var(--color-petrol); }

.walk-card-compact-map-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-petrol) 0%, var(--color-teal) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: white;
}

.walk-detail-hero {
  position: relative;
  height: 420px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

/* Scrim + content sit OVER the map; pointer-events:none lets the map below
   receive drag/zoom/rotate gestures across the whole hero (the overlay is
   non-interactive text/badges, so it gives up the cursor). Without this the
   map was un-pannable everywhere the overlay covered. */
.walk-detail-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 38%, transparent 62%);
  pointer-events: none;
}

.walk-detail-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-8);
  z-index: 1;
  color: white;
  pointer-events: none;
}

.walk-detail-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.activity-heatmap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.activity-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.activity-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  transition: transform var(--duration-200) var(--ease-default);
  cursor: default;
  min-width: 16px;
}

.activity-cell:hover {
  transform: scale(1.3);
}

.activity-cell.level-0 { background: var(--color-surface-dim); }
.activity-cell.level-1 { background: rgba(42, 157, 143, 0.3); }
.activity-cell.level-2 { background: rgba(42, 157, 143, 0.6); }
.activity-cell.level-3 { background: var(--color-teal); }

.activity-heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.activity-heatmap-legend-cell {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-xs);
}

/* ── Gamification Section ─────────────────────────────────────── */

.rewards-hero {
  background: linear-gradient(135deg, var(--color-petrol) 0%, var(--color-teal) 40%, var(--color-orange) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.rewards-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.xp-bar {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-amber), var(--color-orange));
  border-radius: var(--radius-full);
  transition: width var(--duration-700) var(--ease-out);
  position: relative;
}

.xp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  animation: xpShimmer 2s ease-in-out infinite;
}

@keyframes xpShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.level-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
}

.challenge-card-featured {
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  overflow: hidden;
  color: white;
}

.challenge-card-featured.category-distance {
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-petrol) 100%);
}
.challenge-card-featured.category-streak {
  background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-coral) 100%);
}
.challenge-card-featured.category-parks {
  background: linear-gradient(135deg, var(--color-petrol) 0%, var(--color-teal) 100%);
}
.challenge-card-featured.category-social {
  background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-orange) 100%);
}

.challenge-progress-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.challenge-progress-ring svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.challenge-progress-ring circle {
  fill: none;
  stroke-width: 5;
}

.challenge-progress-ring .ring-bg {
  stroke: rgba(255, 255, 255, 0.2);
}

.challenge-progress-ring .ring-fill {
  stroke: white;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--duration-700) var(--ease-out);
}

.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
}

.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  min-width: 140px;
  text-align: center;
  transition: transform var(--duration-300) var(--ease-default);
}

.podium-place:hover {
  transform: translateY(-4px);
}

.podium-first {
  background: linear-gradient(180deg, rgba(244, 201, 109, 0.2) 0%, rgba(244, 201, 109, 0.05) 100%);
  border: 1px solid rgba(244, 201, 109, 0.3);
  padding-bottom: var(--space-8);
  order: 2;
}

.podium-second {
  background: linear-gradient(180deg, rgba(192, 192, 192, 0.15) 0%, rgba(192, 192, 192, 0.05) 100%);
  border: 1px solid rgba(192, 192, 192, 0.2);
  padding-bottom: var(--space-6);
  order: 1;
}

.podium-third {
  background: linear-gradient(180deg, rgba(205, 127, 50, 0.15) 0%, rgba(205, 127, 50, 0.05) 100%);
  border: 1px solid rgba(205, 127, 50, 0.2);
  padding-bottom: var(--space-4);
  order: 3;
}

.podium-medal {
  font-size: var(--text-2xl);
}

.podium-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid;
}

.podium-first .podium-avatar { border-color: var(--color-gold); }
.podium-second .podium-avatar { border-color: var(--color-silver); }
.podium-third .podium-avatar { border-color: var(--color-bronze); }

.podium-name {
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
}

.podium-distance {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.podium-crown {
  font-size: var(--text-xl);
  position: absolute;
  top: -16px;
}

.badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  text-align: center;
  transition: all var(--duration-300) var(--ease-default);
}

.badge-card:hover {
  transform: scale(1.05);
}

.badge-card-earned {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 2px solid transparent;
}

[data-theme="dark"] .badge-card-earned {
  background: rgba(0, 45, 62, 0.55);
}

.badge-card-earned.rarity-common { border-color: var(--color-surface-dim); }
.badge-card-earned.rarity-rare { border-color: var(--color-teal); box-shadow: 0 0 12px rgba(42, 157, 143, 0.2); }
.badge-card-earned.rarity-epic { border-color: var(--color-orange); box-shadow: 0 0 12px rgba(251, 145, 74, 0.2); }
.badge-card-earned.rarity-legendary {
  border-image: linear-gradient(135deg, var(--color-gold), var(--color-orange), var(--color-teal)) 1;
  box-shadow: 0 0 20px rgba(244, 201, 109, 0.3);
}

.badge-card-locked {
  background: var(--color-surface-dim);
  border: 2px solid var(--color-outline);
  opacity: 0.6;
  filter: grayscale(0.8);
}

.badge-card-locked:hover {
  opacity: 0.8;
  filter: grayscale(0.4);
}

.badge-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.badge-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.coin-balance-large {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-black);
  background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.transaction-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all var(--duration-200) var(--ease-default);
}

[data-theme="dark"] .transaction-card {
  background: rgba(0, 45, 62, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.transaction-card:hover {
  transform: translateX(4px);
}

.transaction-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.transaction-icon.earned {
  background: rgba(42, 157, 143, 0.15);
}

.transaction-icon.spent {
  background: rgba(231, 111, 81, 0.15);
}

.transaction-amount {
  font-weight: var(--font-weight-bold);
  margin-left: auto;
  flex-shrink: 0;
}

.transaction-amount.positive { color: var(--color-teal); }
.transaction-amount.negative { color: var(--color-coral); }

.streak-fire {
  background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-coral) 50%, var(--color-amber) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.streak-fire::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at bottom center, rgba(255,255,255,0.15) 0%, transparent 60%);
}

/* ── Messaging Section ────────────────────────────────────────── */

.messages-layout {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  height: calc(100vh - var(--topbar-height) - var(--page-padding) * 2);
  gap: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .messages-layout {
  background: rgba(0, 45, 62, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.conversation-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--color-outline);
}

.conversation-list-header {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-outline);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 1;
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--duration-200) var(--ease-default);
  border-left: 3px solid transparent;
  position: relative;
}

.conversation-item:hover {
  background: rgba(0, 72, 96, 0.04);
}

[data-theme="dark"] .conversation-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.conversation-item-active {
  background: rgba(251, 145, 74, 0.08);
  border-left-color: var(--color-orange);
}

[data-theme="dark"] .conversation-item-active {
  background: rgba(251, 145, 74, 0.12);
}

.conversation-item-pinned::before {
  content: '\uD83D\uDCCC';
  position: absolute;
  top: var(--space-1);
  right: var(--space-2);
  font-size: 10px;
  opacity: 0.5;
}

.conversation-avatar-stack {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.conversation-avatar-stack img {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-surface);
}

.conversation-avatar-stack img:nth-child(1) { top: 0; left: 0; z-index: 3; }
.conversation-avatar-stack img:nth-child(2) { top: 8px; left: 16px; z-index: 2; }
.conversation-avatar-stack img:nth-child(3) { top: 16px; left: 4px; z-index: 1; }

.chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-outline);
}

.chat-header-actions {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.chat-header-action {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--duration-200) var(--ease-default);
  font-size: 16px;
}

.chat-header-action:hover {
  background: var(--color-surface-dim);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.message-row {
  display: flex;
  gap: var(--space-2);
  max-width: 75%;
}

.message-row.mine {
  margin-left: auto;
  flex-direction: row-reverse;
}

.message-bubble-mine {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
  background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-coral) 100%);
  color: white;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  word-wrap: break-word;
}

.message-bubble-other {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  word-wrap: break-word;
}

[data-theme="dark"] .message-bubble-other {
  background: rgba(0, 45, 62, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.message-date-separator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}

.message-date-separator::before,
.message-date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-outline);
}

.chat-input-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-outline);
}

.chat-input-bar input {
  flex: 1;
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--duration-200), box-shadow var(--duration-200);
}

[data-theme="dark"] .chat-input-bar input {
  background: rgba(0, 45, 62, 0.4);
}

.chat-input-bar input:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(251, 145, 74, 0.15);
}

.chat-input-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-200) var(--ease-default);
  font-size: 16px;
  flex-shrink: 0;
}

.chat-input-btn.send {
  background: var(--color-orange);
  color: white;
}

.chat-input-btn.send:hover {
  background: var(--color-coral);
  transform: scale(1.05);
}

.chat-input-btn.secondary {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
}

.chat-input-btn.secondary:hover {
  background: var(--color-surface-dim);
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.typing-indicator-dots {
  display: flex;
  gap: 3px;
}

.typing-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-indicator-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.contact-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  border-left: 1px solid var(--color-outline);
  overflow-y: auto;
}

.contact-sidebar-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-outline);
}

.contact-sidebar-section {
  width: 100%;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-outline);
}

.contact-sidebar-section-title {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.message-read-receipt {
  font-size: 11px;
  margin-top: 2px;
  text-align: right;
}

.message-read-receipt.sent { color: var(--color-text-secondary); opacity: 0.5; }
.message-read-receipt.read { color: var(--color-teal); }

/* ─── Explore pin popup — "pokédex" glass card ────────────────────────────────
   Scoped under .cp-place-popup so it ONLY restyles this Mapbox popup, never any
   other map chrome. The header is tinted per-category via the inline
   --cp-accent custom property set in js/mapbox.js (_buildPlacePopup), so a
   single rule covers all 14 categories. Body uses an opaque-ish frosted glass
   for legibility over a busy map; dark mode overrides the surface only. */
.cp-place-popup .mapboxgl-popup-content {
  width: 248px;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg, 16px);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-lg, 0 8px 36px rgba(0, 72, 96, 0.16));
  font-family: var(--font-family);
}
[data-theme="dark"] .cp-place-popup .mapboxgl-popup-content {
  background: rgba(10, 58, 79, 0.9);
  border: 1px solid rgba(240, 238, 233, 0.1);
}
/* No tip — a clean floating card (sidesteps the per-anchor triangle-colour dance). */
.cp-place-popup .mapboxgl-popup-tip { display: none; }
.cp-place-popup .mapboxgl-popup-close-button {
  z-index: 1;
  top: 3px;
  right: 4px;
  width: 24px;
  height: 24px;
  color: #fff;
  font-size: 19px;
  line-height: 1;
  opacity: 0.9;
}
.cp-place-popup .mapboxgl-popup-close-button:hover {
  background: transparent;
  opacity: 1;
}

.cp-pop-head {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: 10px 14px;
  color: #fff;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cp-accent, #004860) 85%, #000),
    var(--cp-accent, #004860)
  );
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.cp-pop-glyph { font-size: 1.1rem; line-height: 1; }
.cp-pop-cat {
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cp-pop-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px 12px;
}
.cp-pop-name {
  font-weight: var(--font-weight-bold, 700);
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--color-text-primary, #004860);
}
.cp-pop-stars {
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: var(--color-amber, #f4a261);
}
.cp-pop-addr {
  font-size: var(--text-sm, 0.8rem);
  line-height: 1.3;
  color: var(--color-text-secondary, #7a8b99);
}
.cp-pop-tag {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.66rem;
  font-weight: var(--font-weight-semibold, 600);
  text-transform: capitalize;
  background: color-mix(in srgb, var(--color-petrol, #004860) 8%, transparent);
  color: var(--color-text-secondary, #7a8b99);
}
[data-theme="dark"] .cp-pop-tag {
  background: rgba(240, 238, 233, 0.1);
  color: var(--color-text-secondary);
}
.cp-pop-btn {
  margin-top: 8px;
  width: 100%;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md, 12px);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: var(--font-weight-bold, 700);
  background: var(--color-orange, #fb914a);
  color: var(--color-petrol, #004860);
  transition: filter var(--duration-200, 200ms) var(--ease-default, ease);
}
.cp-pop-btn:hover { filter: brightness(0.93); }

/* ─── Explore split layout — ClassPass-style map + scrollable results (PR2) ────
   Mobile: single column, map on top (~46vh) + list below. Desktop (≥900px): a
   grid with the map pane beside an independently-scrolling results column. */
.cp-explore-split {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}
.cp-explore-map {
  position: relative;
  width: 100%;
  height: 46vh;
  min-height: 20rem;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--color-surface-dim);
  box-shadow: 0 2px 12px rgba(0, 72, 96, 0.08);
}
.cp-explore-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}
.cp-explore-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
}
.cp-explore-count {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold, 600);
  white-space: nowrap;
}
.cp-explore-hint {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary);
}
.cp-explore-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}
@media (min-width: 900px) {
  .cp-explore-split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-5, 1.25rem);
    /* Fixed-height split so the results column scrolls independently of the map
       pane. ~9rem ≈ the app top bar + page padding. */
    height: calc(100vh - 9rem);
    min-height: 32rem;
  }
  .cp-explore-map {
    height: 100%;
  }
  .cp-explore-list {
    overflow-y: auto;
    padding-right: var(--space-2, 0.5rem);
  }
}

/* Result card — per-category accent border + hover/active lift (PR2). The
   --cp-accent custom property is set inline per card from place_category_theme. */
.cp-place-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-4, 1rem);
  text-decoration: none;
  color: inherit;
  border-left: 4px solid var(--cp-accent, var(--color-orange, #fb914a));
  transition:
    transform var(--duration-200, 200ms) var(--ease-default, ease),
    box-shadow var(--duration-200, 200ms) var(--ease-default, ease);
}
.cp-place-card:hover,
.cp-place-card.cp-card-active {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 72, 96, 0.16);
}
.cp-place-card.cp-card-active {
  outline: 2px solid color-mix(in srgb, var(--cp-accent, #fb914a) 55%, transparent);
  outline-offset: -1px;
}
.cp-place-tag {
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
  background: color-mix(in srgb, var(--color-petrol, #004860) 8%, transparent);
  color: var(--color-text-secondary);
  font-size: 0.66rem;
  font-weight: var(--font-weight-semibold, 600);
  text-transform: capitalize;
  white-space: nowrap;
}
[data-theme="dark"] .cp-place-tag {
  background: rgba(240, 238, 233, 0.1);
}

/* City search overlay (PR3) — glass input + suggestion dropdown over the map. */
.cp-search {
  position: absolute;
  top: var(--space-4, 1rem);
  left: var(--space-4, 1rem);
  right: var(--space-4, 1rem);
  max-width: 22rem;
  z-index: 3;
}
.cp-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 8px);
  font-family: inherit;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-primary);
  box-shadow: 0 2px 12px rgba(0, 72, 96, 0.12);
}
.cp-search-input::placeholder {
  color: var(--color-text-secondary);
}
.cp-search-drop {
  list-style: none;
  margin: var(--space-1, 0.25rem) 0 0 0;
  padding: var(--space-1, 0.25rem);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-lg, 0 8px 36px rgba(0, 72, 96, 0.16));
  border: 1px solid var(--color-outline, rgba(0, 72, 96, 0.1));
  max-height: 16rem;
  overflow-y: auto;
}
.cp-search-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-sm, 6px);
  font-family: inherit;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-primary);
}
.cp-search-item:hover {
  background: color-mix(in srgb, var(--color-orange, #fb914a) 16%, transparent);
}
.cp-search-empty {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary);
}

/* ── Per-pet activity grid (pet-parity-design.md §7.1, ADR-0092 §4) ───────────
   Two surfaces from one design language: the full monthly grid (its own
   .glass-card on `/pets/:id`) and the minimalist last-30-day strip (inside
   the health summary card). Brand-orange alpha ramp 0/0.25/0.50/0.85; today
   is bordered with the teal accent; dark-mode flips the empty-cell base to
   the dim surface. Mirrors the mobile `ActivityCalendarHeatmap` widget. */
.act-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  gap: var(--space-3);
}
.act-grid-title {
  margin: 0;
  font: 700 var(--text-md)/1.2 Inter, sans-serif;
  color: var(--color-text-primary);
}
.act-grid-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.act-grid-period {
  min-width: 6.5em;
  text-align: center;
  font: 600 var(--text-sm)/1 Inter, sans-serif;
  color: var(--color-text-primary);
}
.act-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--color-outline, rgba(0, 72, 96, 0.18));
  background: transparent;
  color: var(--color-text-secondary);
  font: 700 16px/1 Inter, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.act-nav-btn:hover:not([disabled]) {
  color: var(--color-orange);
  border-color: var(--color-orange);
}
.act-nav-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}
.act-day-headers {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 4px;
}
.act-day-header {
  text-align: center;
  font: 500 10px/1 Inter, sans-serif;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
}
.act-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.act-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.7 / 1;
  border-radius: 3px;
  background: rgba(var(--color-orange-rgb, 251, 145, 74), 0);
  font: 500 9px/1 Inter, sans-serif;
  color: var(--color-text-secondary);
  user-select: none;
}
.act-day-num {
  display: inline-block;
  line-height: 1;
}
.act-empty {
  background: transparent;
}
.act-i0 {
  background: rgba(0, 72, 96, 0.06);
}
.act-i1 {
  background: rgba(var(--color-orange-rgb, 251, 145, 74), 0.25);
  color: var(--color-text-primary);
  font-weight: 600;
}
.act-i2 {
  background: rgba(var(--color-orange-rgb, 251, 145, 74), 0.5);
  color: var(--color-ink-on-orange, #3a2410);
  font-weight: 600;
}
.act-i3 {
  background: rgba(var(--color-orange-rgb, 251, 145, 74), 0.85);
  color: var(--color-ink-on-orange, #3a2410);
  font-weight: 700;
}
.act-today {
  outline: 1.5px solid var(--color-teal, #2a9d8f);
  outline-offset: -1.5px;
}
.act-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-3);
}
.act-legend-label {
  font: 500 10px/1 Inter, sans-serif;
  color: var(--color-text-secondary);
}
.act-legend-swatch {
  width: 12px;
  height: 7px;
  aspect-ratio: auto;
  border-radius: 2px;
}
/* Mini strip — health-card variant. No nav, no day numbers, no labels in
   the cells; cells are smaller and the row is a single horizontal strip. */
.act-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-3);
}
.act-mini-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 500 var(--text-xs)/1.2 Inter, sans-serif;
  color: var(--color-text-secondary);
}
.act-mini-meta-num {
  font-weight: 700;
  color: var(--color-orange);
  font-size: var(--text-sm);
}
.act-mini-meta-sep {
  opacity: 0.4;
  padding: 0 2px;
}
.act-mini-row {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 2px;
}
.act-mini-cell {
  height: 10px;
  border-radius: 2px;
  background: rgba(0, 72, 96, 0.06);
}
.act-mini-cell.act-i1 { background: rgba(var(--color-orange-rgb, 251, 145, 74), 0.25); }
.act-mini-cell.act-i2 { background: rgba(var(--color-orange-rgb, 251, 145, 74), 0.5); }
.act-mini-cell.act-i3 { background: rgba(var(--color-orange-rgb, 251, 145, 74), 0.85); }
.act-mini-cell.act-today {
  outline: 1px solid var(--color-teal, #2a9d8f);
  outline-offset: -1px;
}
/* Dark mode: empty cells flip to the dim surface so the orange ramp stays
   the only signal. */
.dark .act-i0,
[data-theme="dark"] .act-i0,
.dark .act-mini-cell,
[data-theme="dark"] .act-mini-cell {
  background: rgba(255, 255, 255, 0.06);
}
.dark .act-mini-cell.act-i1,
[data-theme="dark"] .act-mini-cell.act-i1 {
  background: rgba(var(--color-orange-rgb, 251, 145, 74), 0.3);
}
.dark .act-mini-cell.act-i2,
[data-theme="dark"] .act-mini-cell.act-i2 {
  background: rgba(var(--color-orange-rgb, 251, 145, 74), 0.55);
}
.dark .act-mini-cell.act-i3,
[data-theme="dark"] .act-mini-cell.act-i3 {
  background: rgba(var(--color-orange-rgb, 251, 145, 74), 0.85);
}