/*
  Programe-se UI Library
  Single-file CSS design system inspired by the supplied visual direction.
  No external CSS dependencies.
*/

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
  color-scheme: dark;

  --ps-forest-950: #08140d;
  --ps-forest-900: #0d1f13;
  --ps-forest-850: #102718;
  --ps-forest-800: #14321d;
  --ps-forest-750: #183b22;
  --ps-forest-700: #1d4829;
  --ps-forest-650: #245633;

  --ps-cream-50: #fffdf5;
  --ps-cream-100: #f7f0d8;
  --ps-cream-150: #f1e8c8;
  --ps-cream-200: #e9ddb6;
  --ps-cream-300: #d7c999;
  --ps-cream-500: #a89263;

  --ps-gold-300: #f0cc62;
  --ps-gold-400: #e6b83f;
  --ps-gold-500: #d6a329;
  --ps-gold-600: #b78117;

  --ps-red-400: #e5433f;
  --ps-red-500: #cb2f2c;
  --ps-red-600: #ad201f;
  --ps-red-700: #861817;

  --ps-ink: #0d1710;
  --ps-white: #ffffff;
  --ps-black: #050706;
  --ps-success: #6fb66d;
  --ps-warning: #e0a433;
  --ps-info: #67a7bb;

  --ps-bg: var(--ps-forest-950);
  --ps-bg-soft: var(--ps-forest-900);
  --ps-surface: rgba(21, 50, 30, 0.74);
  --ps-surface-strong: #132e1b;
  --ps-surface-elevated: #193b23;
  --ps-surface-cream: var(--ps-cream-100);
  --ps-text: var(--ps-cream-100);
  --ps-text-muted: #c8c1a7;
  --ps-text-subtle: #948d78;
  --ps-text-inverse: #122016;
  --ps-primary: var(--ps-gold-400);
  --ps-primary-strong: var(--ps-gold-500);
  --ps-accent: var(--ps-red-500);
  --ps-border: rgba(231, 190, 68, 0.22);
  --ps-border-strong: rgba(231, 190, 68, 0.46);
  --ps-divider: rgba(247, 240, 216, 0.12);

  --ps-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.16);
  --ps-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.16);
  --ps-shadow-md: 0 18px 50px rgba(0, 0, 0, 0.25);
  --ps-shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.38);
  --ps-ring: 0 0 0 3px rgba(230, 184, 63, 0.18);

  --ps-radius-xs: 6px;
  --ps-radius-sm: 10px;
  --ps-radius-md: 14px;
  --ps-radius-lg: 20px;
  --ps-radius-xl: 28px;
  --ps-radius-pill: 999px;

  --ps-space-1: 4px;
  --ps-space-2: 8px;
  --ps-space-3: 12px;
  --ps-space-4: 16px;
  --ps-space-5: 20px;
  --ps-space-6: 24px;
  --ps-space-7: 28px;
  --ps-space-8: 32px;
  --ps-space-10: 40px;
  --ps-space-12: 48px;
  --ps-space-16: 64px;
  --ps-space-20: 80px;

  --ps-font-display: Georgia, 'Times New Roman', serif;
  --ps-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ps-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ps-text-xs: 0.75rem;
  --ps-text-sm: 0.875rem;
  --ps-text-base: 1rem;
  --ps-text-lg: 1.125rem;
  --ps-text-xl: 1.35rem;
  --ps-text-2xl: clamp(1.6rem, 2vw, 2.15rem);
  --ps-text-3xl: clamp(2rem, 4vw, 3.25rem);
  --ps-text-4xl: clamp(2.6rem, 6vw, 5rem);

  --ps-content: 1480px;
  --ps-sidebar: 250px;
  --ps-aside: 340px;
  --ps-topbar: 78px;
  --ps-bottom-nav: 74px;

  --ps-transition-fast: 140ms ease;
  --ps-transition: 220ms cubic-bezier(.2, .7, .2, 1);
}

/* =========================================================
   2. RESET + BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Kill the mobile tap highlight (blue/gray block on touch) everywhere. */
* { -webkit-tap-highlight-color: transparent; }
/* Interactive controls shouldn't turn into a text selection when clicked. */
a, button, label, summary,
[role="button"], [data-icon], .ps-icon,
.ps-tab, .ps-pill, .ps-chip, .ps-nav-item {
  -webkit-user-select: none;
  user-select: none;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--ps-font-body);
  font-size: var(--ps-text-base);
  line-height: 1.5;
  color: var(--ps-text);
  background:
    radial-gradient(circle at 8% 4%, rgba(214, 163, 41, .08), transparent 28%),
    radial-gradient(circle at 96% 92%, rgba(203, 47, 44, .08), transparent 30%),
    var(--ps-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--ps-divider); margin: var(--ps-space-6) 0; }
::selection { color: var(--ps-ink); background: var(--ps-gold-300); }
:focus-visible { outline: none; box-shadow: var(--ps-ring); }

body.ps-no-scroll { overflow: hidden; }

/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */
.ps-display,
.ps-h1, .ps-h2, .ps-h3, .ps-h4 {
  margin: 0;
  font-family: var(--ps-font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.ps-display { font-size: var(--ps-text-4xl); }
.ps-h1 { font-size: var(--ps-text-3xl); }
.ps-h2 { font-size: var(--ps-text-2xl); }
.ps-h3 { font-size: var(--ps-text-xl); }
.ps-h4 { font-size: var(--ps-text-lg); }
.ps-body { margin: 0; color: var(--ps-text); }
.ps-muted { color: var(--ps-text-muted); }
.ps-subtle { color: var(--ps-text-subtle); }
.ps-gold { color: var(--ps-primary); }
.ps-red { color: var(--ps-accent); }
.ps-small { font-size: var(--ps-text-sm); }
.ps-tiny { font-size: var(--ps-text-xs); }
.ps-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--ps-primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ps-kicker::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
}
.ps-link {
  color: var(--ps-primary);
  font-weight: 700;
  transition: color var(--ps-transition-fast);
}
.ps-link:hover { color: var(--ps-gold-300); }

/* =========================================================
   4. ICONS
   ========================================================= */
.ps-icon {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.ps-icon-lg { width: 1.5em; height: 1.5em; }
.ps-icon-xl { width: 2em; height: 2em; }

/* =========================================================
   5. LOGO / BRAND
   ========================================================= */
.ps-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ps-brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
}
.ps-brand-wordmark {
  white-space: nowrap;
  font-family: var(--ps-font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ps-gold-300);
}
.ps-brand-wordmark span { color: var(--ps-red-400); }

/* =========================================================
   6. BUTTONS
   ========================================================= */
.ps-btn {
  --btn-bg: transparent;
  --btn-border: var(--ps-border-strong);
  --btn-color: var(--ps-text);
  appearance: none;
  border: 1px solid var(--btn-border);
  border-radius: var(--ps-radius-sm);
  background: var(--btn-bg);
  color: var(--btn-color);
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 750;
  cursor: pointer;
  transition: transform var(--ps-transition-fast), background var(--ps-transition-fast), border-color var(--ps-transition-fast), color var(--ps-transition-fast), box-shadow var(--ps-transition-fast);
}
.ps-btn:hover { transform: translateY(-1px); border-color: var(--ps-primary); }
.ps-btn:active { transform: translateY(0); }
.ps-btn[disabled], .ps-btn.is-disabled { opacity: .48; pointer-events: none; }
.ps-btn-primary {
  --btn-bg: linear-gradient(180deg, var(--ps-red-400), var(--ps-red-600));
  --btn-border: var(--ps-red-500);
  --btn-color: #fff8e7;
  box-shadow: 0 10px 28px rgba(203, 47, 44, .2);
}
.ps-btn-primary:hover { border-color: var(--ps-red-400); box-shadow: 0 12px 34px rgba(203, 47, 44, .3); }
.ps-btn-gold {
  --btn-bg: linear-gradient(180deg, var(--ps-gold-300), var(--ps-gold-500));
  --btn-border: var(--ps-gold-400);
  --btn-color: var(--ps-ink);
}
.ps-btn-ghost { --btn-border: transparent; --btn-color: var(--ps-text-muted); }
.ps-btn-ghost:hover { background: rgba(247, 240, 216, .06); color: var(--ps-text); }
.ps-btn-outline { --btn-border: var(--ps-primary); --btn-color: var(--ps-primary); }
.ps-btn-soft { --btn-bg: rgba(247, 240, 216, .07); --btn-border: var(--ps-border); }
.ps-btn-sm { min-height: 36px; padding: 7px 12px; font-size: .86rem; }
.ps-btn-lg { min-height: 52px; padding: 13px 20px; border-radius: var(--ps-radius-md); }
.ps-btn-block { width: 100%; }
.ps-icon-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--ps-text-muted);
  background: transparent;
  cursor: pointer;
  transition: var(--ps-transition-fast);
}
.ps-icon-btn:hover { color: var(--ps-primary); background: rgba(247, 240, 216, .07); border-color: var(--ps-border); }
.ps-icon-btn.is-active, .ps-icon-btn[aria-pressed='true'] { color: var(--ps-red-400); }

/* =========================================================
   7. FORM CONTROLS
   ========================================================= */
.ps-field { display: grid; gap: 8px; }
.ps-label { color: var(--ps-cream-200); font-size: var(--ps-text-sm); font-weight: 700; }
.ps-helper { color: var(--ps-text-subtle); font-size: var(--ps-text-xs); }
.ps-control {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  background: rgba(8, 20, 13, .52);
  color: var(--ps-text);
  padding: 10px 13px;
  transition: border-color var(--ps-transition-fast), box-shadow var(--ps-transition-fast), background var(--ps-transition-fast);
}
.ps-control:hover { border-color: rgba(231, 190, 68, .36); }
.ps-control:focus { outline: none; border-color: var(--ps-primary); box-shadow: var(--ps-ring); background: rgba(8, 20, 13, .8); }
.ps-control::placeholder { color: #857f6f; }
select.ps-control { cursor: pointer; }
textarea.ps-control { min-height: 110px; resize: vertical; }
.ps-search {
  position: relative;
  display: flex;
  align-items: center;
}
.ps-search .ps-icon {
  position: absolute;
  left: 14px;
  color: #605c51;
  z-index: 2;
}
.ps-search input {
  width: 100%;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--ps-radius-pill);
  padding: 10px 42px 10px 42px;
  color: #273229;
  background: var(--ps-cream-100);
  box-shadow: var(--ps-shadow-xs);
}
.ps-search input::placeholder { color: #767063; }
.ps-search input:focus { outline: none; border-color: var(--ps-gold-400); box-shadow: var(--ps-ring); }

.ps-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.ps-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ps-switch-track {
  width: 44px;
  height: 26px;
  padding: 3px;
  border: 1px solid var(--ps-border-strong);
  border-radius: var(--ps-radius-pill);
  background: rgba(247, 240, 216, .08);
  transition: var(--ps-transition);
}
.ps-switch-track::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ps-cream-200);
  transition: transform var(--ps-transition);
}
.ps-switch input:checked + .ps-switch-track { background: var(--ps-gold-500); border-color: var(--ps-gold-400); }
.ps-switch input:checked + .ps-switch-track::after { transform: translateX(18px); background: var(--ps-ink); }

/* =========================================================
   8. CHIPS / BADGES / TAGS
   ========================================================= */
.ps-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 1px 4px;
  scrollbar-width: none;
}
.ps-chip-row::-webkit-scrollbar { display: none; }
.ps-chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid var(--ps-border-strong);
  border-radius: var(--ps-radius-pill);
  background: rgba(8, 20, 13, .36);
  color: var(--ps-text-muted);
  font-family: inherit;
  font-size: .84rem;
  line-height: 1.2;
  cursor: pointer;
  transition: var(--ps-transition-fast);
}
.ps-chip:hover { color: var(--ps-text); border-color: var(--ps-primary); }
.ps-chip.is-active, .ps-chip[aria-pressed='true'] { color: #fff7e2; background: var(--ps-red-500); border-color: var(--ps-red-500); }
.ps-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--ps-red-500);
  color: white;
  font-size: .69rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.ps-badge-gold { background: var(--ps-gold-400); color: var(--ps-ink); }
.ps-badge-soft { background: rgba(247,240,216,.1); color: var(--ps-cream-200); border: 1px solid var(--ps-border); }
.ps-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: .75rem;
  color: var(--ps-primary);
  background: rgba(230,184,63,.08);
}

/* =========================================================
   9. SURFACES / CARDS
   ========================================================= */
.ps-card {
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-lg);
  background: linear-gradient(180deg, rgba(23, 56, 33, .9), rgba(13, 31, 19, .9));
  box-shadow: var(--ps-shadow-sm);
  overflow: hidden;
}
.ps-card-body { padding: var(--ps-space-5); }
.ps-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ps-space-4);
  padding: var(--ps-space-5) var(--ps-space-5) 0;
}
.ps-card-footer {
  padding: var(--ps-space-4) var(--ps-space-5);
  border-top: 1px solid var(--ps-divider);
}
.ps-card-cream { background: var(--ps-cream-100); color: var(--ps-text-inverse); border-color: rgba(13, 23, 16, .08); }
.ps-card-flat { box-shadow: none; background: rgba(247,240,216,.03); }

/* =========================================================
   10. EVENT ART (zero-image placeholders)
   ========================================================= */
.ps-event-art {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  isolation: isolate;
  background: #2e1913;
}
.ps-event-art::before,
.ps-event-art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ps-event-art::before {
  z-index: -2;
  background:
    radial-gradient(circle at 48% 58%, rgba(234, 152, 57, .52) 0 3%, transparent 4%),
    radial-gradient(circle at 56% 57%, rgba(240, 182, 83, .36) 0 3%, transparent 4%),
    radial-gradient(circle at 40% 58%, rgba(229, 125, 45, .32) 0 3%, transparent 4%),
    linear-gradient(90deg, transparent 0 10%, rgba(255, 185, 88, .12) 11% 12%, transparent 13% 27%, rgba(255, 185, 88, .1) 28% 29%, transparent 30%),
    radial-gradient(ellipse at 50% 100%, #442217 0 26%, transparent 27%),
    linear-gradient(160deg, #130d0b 0 22%, #5f2a18 60%, #0d110c 100%);
  transform: scale(1.03);
}
.ps-event-art::after {
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 9, 5, .03) 40%, rgba(4, 9, 5, .93) 100%);
}
.ps-art-music::before {
  background:
    radial-gradient(circle at 35% 38%, rgba(216,59,52,.7), transparent 19%),
    radial-gradient(circle at 66% 50%, rgba(230,184,63,.42), transparent 22%),
    repeating-linear-gradient(115deg, transparent 0 25px, rgba(255,255,255,.025) 26px 27px),
    linear-gradient(135deg, #3d0c16, #151c11 58%, #66410f);
}
.ps-art-food::before {
  background:
    radial-gradient(circle at 52% 48%, #da9c3b 0 9%, transparent 10%),
    radial-gradient(circle at 43% 45%, #9a251f 0 7%, transparent 8%),
    radial-gradient(circle at 60% 43%, #59691e 0 7%, transparent 8%),
    radial-gradient(ellipse at 50% 60%, #f0d59c 0 23%, #3b2617 24% 29%, transparent 30%),
    linear-gradient(160deg, #192015, #583619);
}
.ps-art-culture::before {
  background:
    linear-gradient(90deg, transparent 15%, rgba(232,190,76,.22) 16% 18%, transparent 19% 81%, rgba(232,190,76,.18) 82% 84%, transparent 85%),
    radial-gradient(circle at 50% 30%, rgba(230,184,63,.24), transparent 26%),
    linear-gradient(135deg, #101f15, #493015 63%, #861817);
}
.ps-art-kids::before {
  background:
    radial-gradient(circle at 20% 30%, rgba(229,67,63,.5), transparent 16%),
    radial-gradient(circle at 70% 25%, rgba(230,184,63,.45), transparent 20%),
    radial-gradient(circle at 50% 75%, rgba(103,167,187,.35), transparent 24%),
    linear-gradient(135deg, #102b1a, #3b3614 65%, #661b16);
}
.ps-art-label {
  position: absolute;
  inset: auto 16px 15px;
  z-index: 2;
  display: grid;
  gap: 4px;
}
.ps-art-label strong { font-family: var(--ps-font-display); font-size: 1.25rem; }
.ps-art-label span { color: rgba(255,255,255,.75); font-size: .8rem; }

/* =========================================================
   11. EVENT CARDS
   ========================================================= */
.ps-event-card {
  position: relative;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-lg);
  overflow: hidden;
  background: var(--ps-surface-strong);
  box-shadow: var(--ps-shadow-sm);
  transition: transform var(--ps-transition), border-color var(--ps-transition), box-shadow var(--ps-transition);
}
.ps-event-card:hover { transform: translateY(-3px); border-color: var(--ps-border-strong); box-shadow: var(--ps-shadow-md); }
.ps-event-card .ps-event-art { min-height: 220px; }
.ps-event-card-content { padding: 16px; display: grid; gap: 10px; }
.ps-event-card-title { font-family: var(--ps-font-display); font-size: 1.23rem; line-height: 1.15; }
.ps-event-card-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--ps-text-muted); font-size: .84rem; }
.ps-event-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-event-card-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(8,20,13,.66);
  backdrop-filter: blur(10px);
  color: white;
  cursor: pointer;
}
.ps-event-card-fav:hover, .ps-event-card-fav[aria-pressed='true'] { color: var(--ps-red-400); border-color: rgba(229,67,63,.5); }
.ps-event-card-badge { position: absolute; top: 14px; left: 14px; z-index: 3; }

.ps-event-row {
  display: grid;
  grid-template-columns: 116px 1fr auto;
  align-items: stretch;
  min-height: 98px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  overflow: hidden;
  background: var(--ps-cream-100);
  color: var(--ps-text-inverse);
}
.ps-event-row .ps-event-art { min-height: 98px; }
.ps-event-row-content { padding: 12px 14px; min-width: 0; }
.ps-event-row-title { margin: 0 0 5px; font-family: var(--ps-font-display); font-size: 1rem; line-height: 1.15; }
.ps-event-row-meta { margin: 0; color: #4c584d; font-size: .77rem; }
.ps-event-row-action { padding: 8px; display: flex; align-items: center; }

/* =========================================================
   13. SECTION HELPERS
   ========================================================= */
.ps-section { display: grid; gap: var(--ps-space-4); }
.ps-section + .ps-section { margin-top: var(--ps-space-8); }
.ps-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--ps-space-4);
}
.ps-section-title { font-family: var(--ps-font-display); font-size: 1.35rem; font-weight: 600; }
.ps-section-subtitle { margin: 4px 0 0; color: var(--ps-text-muted); font-size: .9rem; }
.ps-stack { display: grid; gap: var(--ps-space-4); }
.ps-stack-sm { display: grid; gap: var(--ps-space-2); }
.ps-stack-lg { display: grid; gap: var(--ps-space-6); }
.ps-inline { display: flex; align-items: center; gap: var(--ps-space-3); flex-wrap: wrap; }
.ps-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-4); }

/* =========================================================
   14. APP SHELL
   ========================================================= */
.ps-app {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: calc(var(--ps-bottom-nav) + env(safe-area-inset-bottom, 0px));
}
.ps-sidebar { display: none; }
.ps-app-main { min-width: 0; }
.ps-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 66px;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(8, 20, 13, .84);
  border-bottom: 1px solid var(--ps-divider);
  backdrop-filter: blur(16px) saturate(130%);
}
.ps-topbar-inner {
  width: min(100%, 1040px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ps-topbar-title { font-family: var(--ps-font-display); font-size: 1.55rem; }
.ps-topbar-actions { display: flex; align-items: center; gap: 6px; }
.ps-page {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 20px 16px 34px;
}
.ps-page-wide { width: min(100%, 1220px); }
.ps-page-head { display: grid; gap: 10px; margin-bottom: 20px; }
.ps-page-head-row { display: flex; align-items: start; justify-content: space-between; gap: 18px; }

.ps-bottom-nav {
  position: fixed !important;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  min-height: var(--ps-bottom-nav);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  background: rgba(8, 20, 13, .94);
  border-top: 1px solid var(--ps-border);
  backdrop-filter: blur(18px);
}
.ps-nav-item {
  min-width: 0;
  padding: 7px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ps-text-subtle);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  font-size: .68rem;
  cursor: pointer;
  transition: var(--ps-transition-fast);
}
.ps-nav-item .ps-icon { width: 21px; height: 21px; }
.ps-nav-item:hover { color: var(--ps-text); }
.ps-nav-item.is-active, .ps-nav-item[aria-current='page'] { color: var(--ps-primary); }

.ps-desktop-aside { display: none; }

/* =========================================================
   15. DESKTOP SHELL — intentionally desktop-native
   ========================================================= */
@media (min-width: 960px) {
  .ps-app {
    grid-template-columns: var(--ps-sidebar) minmax(0, 1fr);
    padding-bottom: 0;
  }
  .ps-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 16px 18px;
    background:
      linear-gradient(180deg, rgba(25,59,35,.66), rgba(8,20,13,.96)),
      var(--ps-forest-950);
    border-right: 1px solid var(--ps-border);
  }
  .ps-sidebar-brand { padding: 0 8px 16px; border-bottom: 1px solid var(--ps-divider); }
  .ps-sidebar-nav { display: grid; gap: 5px; }
  .ps-sidebar-link {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ps-text-muted);
    font-weight: 650;
    transition: var(--ps-transition-fast);
  }
  .ps-sidebar-link:hover { color: var(--ps-text); background: rgba(247,240,216,.06); }
  .ps-sidebar-link.is-active, .ps-sidebar-link[aria-current='page'] {
    color: var(--ps-cream-50);
    background: linear-gradient(90deg, rgba(203,47,44,.95), rgba(173,32,31,.7));
    box-shadow: inset 3px 0 0 var(--ps-gold-300), 0 9px 24px rgba(203,47,44,.12);
  }
  .ps-sidebar-link .ps-icon { color: var(--ps-primary); }
  .ps-sidebar-link.is-active .ps-icon, .ps-sidebar-link[aria-current='page'] .ps-icon { color: var(--ps-cream-50); }
  .ps-sidebar-spacer { flex: 1; }
  .ps-user-card {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    background: rgba(247,240,216,.035);
  }
  .ps-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--ps-gold-500), var(--ps-red-500));
    color: white;
    font-family: var(--ps-font-display);
    font-weight: 700;
  }
  .ps-user-card strong, .ps-user-card span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ps-user-card span { color: var(--ps-text-subtle); font-size: .74rem; }
  .ps-bottom-nav { display: none !important; }
  .ps-app { padding-bottom: 0 !important; }
  .ps-topbar { min-height: var(--ps-topbar); padding: 14px 28px; }
  .ps-topbar-inner { width: 100%; max-width: none; }
  .ps-page { width: 100%; max-width: none; padding: 28px; }
  .ps-main-with-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, var(--ps-aside));
    gap: 28px;
    align-items: start;
  }
  .ps-desktop-aside, .ps-events-aside {
    display: block;
    position: sticky;
    top: calc(var(--ps-topbar) + 24px);
  }
}

@media (min-width: 1280px) {
  :root { --ps-sidebar: 270px; --ps-aside: 370px; }
  .ps-page { padding: 32px 38px 48px; }
  .ps-feature-grid { grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); }
}

/* =========================================================
   16. HOME / FEATURE LAYOUTS
   ========================================================= */
.ps-feature-grid { display: grid; gap: 18px; }
.ps-feature-card {
  position: relative;
  min-height: 330px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-xl);
  overflow: hidden;
  background: var(--ps-forest-900);
  box-shadow: var(--ps-shadow-md);
}
.ps-feature-card .ps-event-art { min-height: 330px; height: 100%; }
.ps-feature-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 58px 22px 22px;
  background: linear-gradient(180deg, transparent, rgba(6,13,8,.95) 66%);
  display: grid;
  gap: 9px;
}
.ps-feature-title { max-width: 700px; font-family: var(--ps-font-display); font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.03; }
.ps-feature-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--ps-text-muted); font-size: .86rem; }
.ps-mini-stack { display: grid; gap: 12px; }
.ps-mini-card {
  min-height: 100px;
  display: grid;
  grid-template-columns: 100px minmax(0,1fr);
  overflow: hidden;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  background: rgba(247,240,216,.04);
}
.ps-mini-card .ps-event-art { min-height: 100%; }
.ps-mini-content { padding: 12px; display: grid; align-content: center; gap: 5px; }
.ps-mini-content strong { font-family: var(--ps-font-display); line-height: 1.13; }
.ps-mini-content span { color: var(--ps-text-muted); font-size: .78rem; }

.ps-event-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .ps-event-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1400px) { .ps-event-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* =========================================================
   17. INLINE FILTERS (city + date shortcuts on the Events page)
   ========================================================= */
.ps-filters-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  margin-top: 12px;
}
.ps-filters-inline .ps-field { display: grid; gap: 6px; margin: 0; }
.ps-field .ps-label.ps-small { color: var(--ps-text-subtle); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
/* City stays discreet: it should not eat the whole row. */
.ps-field-city { flex: 0 1 240px; min-width: 180px; }
.ps-field-city .ps-control { min-height: 40px; }
.ps-field-dates { flex: 1 1 auto; min-width: 0; }

/* Date shortcuts wrap onto multiple lines instead of scrolling horizontally,
   so no accidental horizontal scrollbar appears. */
.ps-date-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-date-pill {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-pill);
  background: transparent;
  color: var(--ps-text-muted);
  font: inherit;
  font-size: .84rem;
  line-height: 1.2;
  cursor: pointer;
  transition: var(--ps-transition-fast);
}
.ps-date-pill:hover { color: var(--ps-text); border-color: var(--ps-primary); }
.ps-date-pill.is-active { background: rgba(230,184,63,.12); color: var(--ps-primary); border-color: var(--ps-primary); }

/* Event-type cards: small visual buttons (icon + label). Between a chip and a
   full card. Several fit per row on desktop; wrap on mobile without h-scroll. */
.ps-field-types { margin-top: 14px; }
.ps-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.ps-type-card {
  min-height: 74px;
  padding: 12px 8px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px solid var(--ps-border-strong);
  border-radius: var(--ps-radius-md);
  background: rgba(15, 38, 22, .55);
  color: var(--ps-text-muted);
  font: inherit;
  font-size: .8rem;
  text-align: center;
  cursor: pointer;
  transition: var(--ps-transition-fast);
}
.ps-type-card:hover { color: var(--ps-text); border-color: var(--ps-primary); }
.ps-type-card .ps-icon { width: 22px; height: 22px; }
.ps-type-card-label { line-height: 1.1; }
.ps-type-card.is-active, .ps-type-card[aria-pressed='true'] {
  color: #fff7e2;
  background: var(--ps-red-500);
  border-color: var(--ps-red-500);
}
.ps-type-card.is-active .ps-icon { color: #fff7e2; }
@media (min-width: 620px) {
  .ps-type-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
}

/* =========================================================
   18. DETAILS PAGE
   ========================================================= */
.ps-detail-hero {
  position: relative;
  min-height: 420px;
  border-radius: 0 0 var(--ps-radius-xl) var(--ps-radius-xl);
  overflow: hidden;
  margin: -20px -16px 22px;
}
.ps-detail-hero .ps-event-art { min-height: 420px; height: 100%; }
.ps-detail-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,20,13,.12), rgba(8,20,13,.18) 38%, rgba(8,20,13,.96));
  pointer-events: none;
}
.ps-detail-hero-content {
  position: absolute;
  z-index: 2;
  inset: auto 18px 22px;
  display: grid;
  gap: 10px;
}
.ps-detail-title { font-family: var(--ps-font-display); font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1; }
.ps-detail-actions { position: absolute; z-index: 3; top: 18px; right: 18px; display: flex; gap: 8px; }
.ps-detail-actions .ps-icon-btn { background: rgba(8,20,13,.7); border-color: rgba(255,255,255,.14); color: white; backdrop-filter: blur(10px); }
.ps-detail-list { display: grid; gap: 0; }
.ps-detail-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ps-divider);
}
.ps-detail-item:last-child { border-bottom: 0; }
.ps-detail-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--ps-primary);
  background: rgba(230,184,63,.08);
}
.ps-detail-item strong { display: block; margin-bottom: 3px; }
.ps-detail-item p { margin: 0; color: var(--ps-text-muted); font-size: .9rem; }
.ps-sticky-cta {
  position: sticky;
  bottom: calc(var(--ps-bottom-nav) + 10px);
  z-index: 20;
  padding: 8px;
  border-radius: var(--ps-radius-md);
  background: rgba(8,20,13,.78);
  backdrop-filter: blur(14px);
}
@media (min-width: 960px) {
  .ps-detail-hero { margin: 0 0 26px; border-radius: var(--ps-radius-xl); min-height: 500px; }
  .ps-detail-hero .ps-event-art { min-height: 500px; }
  .ps-detail-hero-content { inset: auto 30px 30px; max-width: 840px; }
  .ps-sticky-cta { position: static; padding: 0; background: transparent; backdrop-filter: none; }
}

/* =========================================================
   19. PROFILE / STATS / LISTS
   ========================================================= */
.ps-profile-hero {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 18px;
  align-items: center;
}
.ps-profile-avatar {
  width: 78px;
  height: 78px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-family: var(--ps-font-display);
  font-size: 2rem;
  background: linear-gradient(145deg, var(--ps-gold-500), var(--ps-red-600));
  box-shadow: var(--ps-shadow-sm);
}
.ps-stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.ps-stat {
  padding: 16px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  background: rgba(247,240,216,.035);
}
.ps-stat strong { display: block; font-family: var(--ps-font-display); font-size: 1.7rem; color: var(--ps-primary); }
.ps-stat span { color: var(--ps-text-muted); font-size: .8rem; }
.ps-list { border: 1px solid var(--ps-border); border-radius: var(--ps-radius-md); overflow: hidden; }
.ps-list-item {
  min-height: 58px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--ps-divider);
  background: rgba(247,240,216,.025);
}
.ps-list-item:last-child { border-bottom: 0; }
.ps-list-item:hover { background: rgba(247,240,216,.05); }
.ps-list-item-content { flex: 1; min-width: 0; }
.ps-list-item-content strong, .ps-list-item-content span { display: block; }
.ps-list-item-content span { margin-top: 2px; color: var(--ps-text-subtle); font-size: .8rem; }

/* =========================================================
   20. CALENDAR
   ========================================================= */
.ps-calendar { border: 1px solid var(--ps-border); border-radius: var(--ps-radius-lg); overflow: hidden; background: rgba(247,240,216,.025); }
.ps-calendar-head { padding: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ps-divider); }
.ps-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.ps-calendar-weekday, .ps-calendar-day { min-height: 42px; display: grid; place-items: center; border-right: 1px solid var(--ps-divider); border-bottom: 1px solid var(--ps-divider); font-size: .78rem; }
.ps-calendar-weekday:nth-child(7n), .ps-calendar-day:nth-child(7n) { border-right: 0; }
.ps-calendar-weekday { min-height: 34px; color: var(--ps-text-subtle); background: rgba(247,240,216,.035); }
.ps-calendar-day { position: relative; cursor: pointer; color: var(--ps-text-muted); }
.ps-calendar-day:hover { background: rgba(247,240,216,.05); color: var(--ps-text); }
.ps-calendar-day.is-today { color: var(--ps-ink); background: var(--ps-gold-400); font-weight: 800; }
/* Selection states derived from filters.dateFrom/dateTo. They can coexist with
   is-today and has-event. Range fill is a soft tint; the endpoints are strong. */
.ps-calendar-day.in-range { background: rgba(203,47,44,.18); color: var(--ps-cream-50); }
.ps-calendar-day.is-selected { background: var(--ps-red-500); color: #fff7e2; font-weight: 800; box-shadow: inset 0 0 0 1px var(--ps-red-400); }
.ps-calendar-day.is-selected.is-today { color: #fff7e2; }
.ps-calendar-day.has-event::after { content: ''; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--ps-red-400); }
/* Keep the event dot visible on selected/today backgrounds. */
.ps-calendar-day.is-today.has-event::after { background: var(--ps-forest-950); }
.ps-calendar-day.is-selected.has-event::after { background: var(--ps-gold-300); }

/* Agenda "Próximos dias": clickable date + event title share one row. */
.ps-agenda-row { gap: 10px; }
.ps-agenda-date { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; font-size: .8rem; white-space: nowrap; }
.ps-agenda-date:disabled { color: var(--ps-text-subtle); cursor: default; }
.ps-agenda-title { text-align: right; }

/* Events sidebar: single column on mobile (just the calendar), sticky lateral
   column on desktop (handled in the 960px block above). On mobile the whole
   aside is hidden and the calendar is relocated into the agenda modal (which
   also holds the "próximos dias" list); the aside becomes the sidebar at
   >=960px. */
.ps-events-aside { display: none; }

/* Mobile: a trigger button below the filters that opens the agenda modal. */
.ps-agenda-dropdown {
  margin-top: 14px;
  border: 1px solid var(--ps-border-strong);
  border-radius: var(--ps-radius-lg);
  background: rgba(15, 38, 22, .6);
  overflow: hidden;
}
.ps-agenda-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  border: 0;
  background: transparent;
  color: var(--ps-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ps-agenda-cta-icon { color: var(--ps-primary); }
.ps-agenda-cta-icon .ps-icon { width: 22px; height: 22px; }
.ps-agenda-cta-text { flex: 1; display: grid; gap: 1px; }
.ps-agenda-cta-text strong { font-family: var(--ps-font-display); }
.ps-agenda-cta-text span { color: var(--ps-text-muted); font-size: .8rem; }
.ps-agenda-dropdown-caret { color: var(--ps-text-subtle); transition: transform var(--ps-transition-fast); }
.ps-agenda-dropdown.is-open .ps-agenda-dropdown-caret { transform: rotate(90deg); }

/* Agenda modal body: calendar sits flush at the top (the modal is the frame),
   the "próximos dias" list follows, separated by a divider. */
.ps-modal-agenda .ps-modal-body { padding: 0; overflow-x: hidden; }
.ps-modal-agenda [data-ps-calendar-slot] { width: 100%; min-width: 0; }
.ps-modal-agenda .ps-calendar {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ps-modal-agenda .ps-calendar-head { padding: 14px 15px; border-bottom: 0; }
/* Right borders on the last column would push the grid 1px past the edge and,
   with the modal's overflow, clip the first column. Keep the grid inside. */
.ps-modal-agenda .ps-calendar-grid { border-top: 1px solid var(--ps-divider); max-width: 100%; }
.ps-agenda-dropdown-list {
  display: grid;
  gap: 6px;
  padding: 14px 15px 16px;
  border-top: 1px solid var(--ps-divider);
}
.ps-agenda-dropdown-list:empty { display: none; }

@media (min-width: 960px) {
  /* Desktop: the sidebar column shows calendar + agenda; the trigger is gone. */
  .ps-events-aside { display: block; margin-top: 0; }
  .ps-agenda-dropdown { display: none; }
}

/* Agenda list content (modal): events grouped by day. */
.ps-agenda-sheet-group { display: grid; gap: 4px; }
.ps-agenda-sheet-group + .ps-agenda-sheet-group { margin-top: 10px; }
.ps-agenda-sheet-date {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; padding: 6px 0;
  color: var(--ps-primary); font: inherit; font-weight: 700; cursor: pointer;
}
.ps-agenda-sheet-date .ps-icon { width: 16px; height: 16px; }
.ps-agenda-sheet-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--ps-radius-md);
  border: 1px solid var(--ps-divider);
  color: inherit; text-decoration: none;
}
.ps-agenda-sheet-row:hover { border-color: var(--ps-primary); background: rgba(247,240,216,.04); }
.ps-agenda-sheet-time { flex: 0 0 auto; min-width: 46px; color: var(--ps-primary); font-weight: 700; font-size: .85rem; }
.ps-agenda-sheet-title { display: grid; gap: 1px; min-width: 0; }

/* =========================================================
   21. MODAL / DRAWER / TOAST
   ========================================================= */
.ps-backdrop {
  position: fixed;
  inset: 0;
  /* Modais/bottom-sheets devem ficar acima da navegação mobile fixa. */
  z-index: 200;
  display: grid;
  place-items: end center;
  background: rgba(1,5,3,.66);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ps-transition);
}
.ps-backdrop.is-open { opacity: 1; pointer-events: auto; }
.ps-modal {
  width: min(100%, 640px);
  max-height: min(86vh, 760px);
  overflow: auto;
  border: 1px solid var(--ps-border-strong);
  border-radius: var(--ps-radius-xl) var(--ps-radius-xl) 0 0;
  background: var(--ps-forest-900);
  box-shadow: var(--ps-shadow-lg);
  transform: translateY(24px);
  transition: transform var(--ps-transition);
}
.ps-backdrop.is-open .ps-modal { transform: translateY(0); }
.ps-modal-head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ps-divider); }
.ps-modal-body { padding: 20px; }
.ps-modal-foot { padding: 16px 20px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--ps-divider); }
@media (min-width: 720px) {
  .ps-backdrop { place-items: center; padding: 24px; }
  .ps-modal { border-radius: var(--ps-radius-xl); }
}


/* Active filter summary chips shown above the results grid. */
.ps-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ps-active-filters .ps-tag { text-transform: none; }
.ps-toast-stack { position: fixed; right: 14px; bottom: calc(var(--ps-bottom-nav) + 14px); z-index: 300; display: grid; gap: 10px; width: min(390px, calc(100vw - 28px)); }
.ps-toast {
  padding: 13px 14px;
  border: 1px solid var(--ps-border-strong);
  border-radius: var(--ps-radius-md);
  background: #172f1d;
  box-shadow: var(--ps-shadow-md);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  animation: ps-toast-in .25s ease both;
}
.ps-toast-icon { color: var(--ps-primary); }
.ps-toast strong { display: block; margin-bottom: 2px; }
.ps-toast p { margin: 0; color: var(--ps-text-muted); font-size: .82rem; }
@keyframes ps-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (min-width: 960px) { .ps-toast-stack { bottom: 18px; right: 20px; } }

/* =========================================================
   22. EMPTY / SKELETON
   ========================================================= */
.ps-empty { padding: 42px 20px; text-align: center; border: 1px dashed var(--ps-border-strong); border-radius: var(--ps-radius-lg); background: rgba(247,240,216,.02); }
.ps-empty-icon { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center; color: var(--ps-primary); background: rgba(230,184,63,.08); }
.ps-skeleton { position: relative; overflow: hidden; border-radius: 8px; background: rgba(247,240,216,.06); }
.ps-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: ps-shimmer 1.4s infinite; }
@keyframes ps-shimmer { to { transform: translateX(100%); } }

/* =========================================================
   23. SHOWCASE / DOCS
   ========================================================= */
.ps-docs {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}
.ps-docs-nav { display: none; }
.ps-docs-main { width: min(100%, 1180px); margin: 0 auto; padding: 28px 18px 64px; }
.ps-docs-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 64px);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-xl);
  background:
    radial-gradient(circle at 80% 20%, rgba(203,47,44,.26), transparent 26%),
    radial-gradient(circle at 12% 80%, rgba(230,184,63,.16), transparent 28%),
    linear-gradient(145deg, #17331e, #0b1b10 66%, #2d1512);
  box-shadow: var(--ps-shadow-lg);
}
.ps-docs-hero-grid { display: grid; gap: 28px; align-items: center; }
.ps-docs-phone {
  width: min(100%, 330px);
  margin: 0 auto;
  padding: 10px;
  border-radius: 42px;
  background: linear-gradient(180deg, #151a16, #020403);
  border: 1px solid #5e625b;
  box-shadow: 0 32px 70px rgba(0,0,0,.46);
}
.ps-docs-phone-screen { min-height: 575px; overflow: hidden; border-radius: 34px; border: 1px solid #2c342e; background: var(--ps-forest-900); }
.ps-docs-section { margin-top: 50px; }
.ps-docs-section-head { margin-bottom: 20px; display: grid; gap: 5px; }
.ps-docs-component-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ps-docs-sample { padding: 22px; border: 1px solid var(--ps-border); border-radius: var(--ps-radius-lg); background: rgba(247,240,216,.025); }
.ps-token-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.ps-token { min-height: 86px; border-radius: var(--ps-radius-md); overflow: hidden; border: 1px solid var(--ps-border); }
.ps-token-swatch { height: 50px; }
.ps-token-label { padding: 8px 10px; background: rgba(8,20,13,.8); font-size: .72rem; color: var(--ps-text-muted); }
.ps-code {
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  background: #061009;
  color: #e6e0c8;
  font: .78rem/1.6 var(--ps-font-mono);
}
@media (min-width: 900px) {
  .ps-docs { grid-template-columns: 230px minmax(0,1fr); }
  .ps-docs-nav {
    position: sticky;
    top: 0;
    height: 100vh;
    display: block;
    padding: 24px 14px;
    border-right: 1px solid var(--ps-border);
    background: #09180e;
    overflow-y: auto;
  }
  .ps-docs-nav-links { display: grid; gap: 3px; margin-top: 22px; }
  .ps-docs-nav a { padding: 8px 10px; border-radius: 9px; color: var(--ps-text-muted); font-size: .84rem; }
  .ps-docs-nav a:hover { background: rgba(247,240,216,.05); color: var(--ps-primary); }
  .ps-docs-main { padding: 30px 34px 90px; }
  .ps-docs-hero-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .ps-docs-component-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ps-token-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

/* =========================================================
   24. RESPONSIVE HELPERS
   ========================================================= */
.ps-only-mobile { display: initial; }
.ps-only-desktop { display: none !important; }
@media (min-width: 960px) {
  .ps-only-mobile { display: none !important; }
  .ps-only-desktop { display: initial !important; }
}
@media (max-width: 520px) {
  .ps-event-row { grid-template-columns: 92px minmax(0,1fr) 42px; }
  /* City selector spans the row on small screens for a comfortable tap target. */
  .ps-field-city { flex-basis: 100%; }
}

/* =========================================================
   25. UTILITIES
   ========================================================= */
.ps-w-full { width: 100%; }
.ps-text-center { text-align: center; }
.ps-m-0 { margin: 0 !important; }
.ps-mt-1 { margin-top: 4px !important; }
.ps-mt-2 { margin-top: 8px !important; }
.ps-mt-3 { margin-top: 12px !important; }
.ps-mt-4 { margin-top: 16px !important; }
.ps-mt-6 { margin-top: 24px !important; }
.ps-mt-8 { margin-top: 32px !important; }
.ps-mb-0 { margin-bottom: 0 !important; }
.ps-mb-2 { margin-bottom: 8px !important; }
.ps-mb-4 { margin-bottom: 16px !important; }
.ps-p-0 { padding: 0 !important; }
.ps-hidden { display: none !important; }
.ps-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.ps-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-grow { flex: 1 1 auto; }
.ps-divider { height: 1px; background: var(--ps-divider); }

/* =========================================================
   26. MOTION / ACCESSIBILITY
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (prefers-contrast: more) {
  :root { --ps-border: rgba(240,204,98,.55); --ps-divider: rgba(247,240,216,.28); }
}

/* =========================================================
   27. APP ADDITIONS (forms, favorite active, centered bottom nav)
   ========================================================= */
.ps-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ps-space-4); }
@media (max-width: 520px) { .ps-form-row { grid-template-columns: 1fr; } }
.ps-gap-sm { gap: var(--ps-space-2) !important; }
.ps-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ps-text-muted);
  font-size: .9rem;
  cursor: pointer;
}
.ps-check input { width: 18px; height: 18px; accent-color: var(--ps-primary); }

/* Favorite active state also via .is-active (JS toggles it) */
.ps-event-card-fav.is-active { color: var(--ps-red-400); border-color: rgba(229,67,63,.5); }

/* Bottom nav: center the items instead of a rigid 5-col grid so hiding
   entries (e.g. the "Mais" button) keeps the remaining items centered.
   Scoped below the desktop breakpoint so it never re-shows the bar on
   desktop, where the sidebar is the only navigation. */
@media (max-width: 959.98px) {
  .ps-bottom-nav {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 4px;
    /* Keep the bar pinned to the visual viewport while the page scrolls. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  .ps-bottom-nav .ps-nav-item { flex: 0 1 96px; max-width: 120px; }
}

/* ========================================================
   Fieldsets, endereço postal, upload de capa
   Adicionados para o formulário de perfil, evento e admin de usuário.
   ======================================================== */

.ps-fieldset {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  padding: 12px 14px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, .015);
}
.ps-fieldset > legend {
  padding: 0 6px;
  color: var(--ps-muted, #6b7280);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
.ps-fieldset .ps-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.ps-fieldset .ps-field-cep { grid-column: span 2; }
.ps-fieldset .ps-field-uf { max-width: 96px; }

@media (max-width: 560px) {
  .ps-fieldset .ps-form-row {
    grid-template-columns: 1fr;
  }
  .ps-fieldset .ps-field-cep,
  .ps-fieldset .ps-field-uf { grid-column: auto; max-width: none; }
}

/* File picker (upload de capa): dashed zone + preview + ações */
.ps-file-picker {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 2px dashed rgba(0, 0, 0, .18);
  background: rgba(0, 0, 0, .02);
  transition: border-color .15s ease, background .15s ease;
}
.ps-file-picker.is-dragover {
  border-color: var(--ps-primary, #f59e0b);
  background: rgba(245, 158, 11, .08);
}

.ps-file-picker-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
  padding: 12px;
  color: inherit;
  transition: background .15s ease;
}
.ps-file-picker-empty:hover { background: rgba(0, 0, 0, .04); }
.ps-file-picker-empty strong { font-weight: 600; }
.ps-file-picker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
}
.ps-file-picker-icon .ps-icon { width: 20px; height: 20px; }

.ps-file-picker-preview {
  position: absolute;
  inset: 0;
}
.ps-file-picker-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ps-file-picker-actions {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  gap: 6px;
  background: rgba(0, 0, 0, .55);
  padding: 4px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
}
.ps-file-picker-actions .ps-btn { cursor: pointer; }

/* Tema escuro do app: bordas mais claras para contrastar com o fundo */
@media (prefers-color-scheme: dark) {
  .ps-file-picker {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .02);
  }
  .ps-file-picker-empty:hover { background: rgba(255, 255, 255, .04); }
  .ps-file-picker-icon { background: rgba(255, 255, 255, .08); }
}

/* ========================================================
   Collapsible <details> usado no endereço postal
   ======================================================== */

.ps-details {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  background: rgba(0, 0, 0, .015);
  /* Never overflow the parent card/flex container in narrow viewports */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
/* Form and card children should be free to shrink below their intrinsic size */
.ps-card-body, .ps-modal-body, form { min-width: 0; }
.ps-card-body > *, .ps-modal-body > *, form > * { min-width: 0; max-width: 100%; }

.ps-details-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* Remove o marcador nativo em todos os navegadores */
.ps-details-summary::-webkit-details-marker { display: none; }
.ps-details-summary::marker { content: ''; }

.ps-details-summary > .ps-kicker { flex: 0 0 auto; }

.ps-details-summary-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .95rem;
}

.ps-details-caret {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform .18s ease;
  opacity: .7;
}
.ps-details[open] > .ps-details-summary .ps-details-caret {
  transform: rotate(90deg);
}

.ps-details-body {
  padding: 4px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(0, 0, 0, .06);
  min-width: 0;
}

/* As linhas em grid dos endereços mantêm o mesmo comportamento */
.ps-details-body .ps-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  min-width: 0;
}
.ps-details-body .ps-form-row > * { min-width: 0; }

/* Linha CEP + Número: grid fixo para o Número não estourar */
.ps-details-body .ps-cep-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 130px);
}
.ps-details-body .ps-cep-row .ps-field-cep { grid-column: auto; }

.ps-details-body .ps-field-uf { max-width: 96px; }

@media (max-width: 560px) {
  .ps-details-body .ps-form-row {
    grid-template-columns: 1fr;
  }
  .ps-details-body .ps-cep-row {
    /* CEP + Número lado a lado, mas com mínimos bem pequenos para caber
       em telas estreitas (~320px de conteúdo do card). */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
  .ps-details-body .ps-field-uf { max-width: 72px; }
}

/* Também limita o summary: some com overflow feio quando o endereço é grande */
.ps-details-summary { flex-wrap: wrap; row-gap: 4px; }
.ps-details-summary > .ps-kicker { flex: 0 0 100%; }

/* ========================================================
   Capa do evento renderizada como background-image no ps-event-art
   ======================================================== */

.ps-event-art.has-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Ao ter capa real, escurece a base gradient para melhorar contraste do texto */
.ps-event-art.has-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, transparent 100%);
  pointer-events: none;
}

/* Botão "Voltar" da página de detalhes: pílula distintiva acima do hero */
.ps-detail-back {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(8, 20, 13, .55);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--ps-cream-100, #f7f0d8);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  backdrop-filter: blur(8px);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.ps-detail-back:hover {
  background: rgba(8, 20, 13, .8);
  border-color: rgba(255, 255, 255, .22);
  transform: translateX(-2px);
}
.ps-detail-back .ps-icon { width: 18px; height: 18px; }

/* ========================================================
   Avatares: fundo estável, letra centralizada, picture Google
   ======================================================== */
.ps-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #b45309, #7c2d12);
  color: #fff;
  font-family: var(--ps-font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}
.ps-profile-avatar {
  overflow: hidden;
  position: relative;
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
  background-size: cover;
  background-position: center;
}
.ps-avatar.has-picture,
.ps-profile-avatar.has-picture {
  background-image: var(--ps-avatar-image, none);
  color: transparent;
}
.ps-avatar.has-picture::first-line,
.ps-profile-avatar.has-picture::first-line { color: transparent; }

/* ========================================================
   Share link input inside share-modal
   ======================================================== */

.ps-share-link {
  display: flex;
  min-width: 0;
}
.ps-share-link input {
  cursor: text;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92rem;
}

/* ========================================================
   Ações de card (fav + share) e linha editável em "Meus eventos"
   ======================================================== */

.ps-event-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  gap: 8px;
  z-index: 4;
}
/* Buttons inside the actions group are static (the group itself is absolute).
   Override the standalone rules that would otherwise re-anchor each one to
   top/right of the art. Same applies to the detail-page hero actions. */
.ps-event-card-actions > .ps-event-card-fav,
.ps-event-card-actions > .ps-event-card-share,
.ps-detail-actions > .ps-event-card-fav,
.ps-detail-actions > .ps-icon-btn {
  position: static;
  top: auto;
  right: auto;
}

/* On the detail page hero, active fav also fills red — override the default
   white color from .ps-detail-actions .ps-icon-btn. */
.ps-detail-actions .ps-icon-btn.is-active,
.ps-detail-actions .ps-icon-btn[aria-pressed='true'] {
  color: var(--ps-red-400, #ff5c5c);
  border-color: rgba(229, 67, 63, .6);
  background: rgba(229, 67, 63, .28);
}
.ps-detail-actions .ps-icon-btn.is-active .ps-icon,
.ps-detail-actions .ps-icon-btn[aria-pressed='true'] .ps-icon {
  fill: currentColor;
  stroke: currentColor;
}

/* Reuse the same visual style used by the fav button for the share button */
.ps-event-card-share {
  background: rgba(8, 20, 13, .66);
  border: 1px solid rgba(255, 255, 255, .14);
  color: white;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background .15s ease, transform .15s ease, color .15s ease;
}
.ps-event-card-share:hover { background: rgba(8, 20, 13, .82); color: var(--ps-primary, #f59e0b); }

/* Filled heart when active (aria-pressed or is-active class) */
.ps-event-card-fav.is-active,
.ps-event-card-fav[aria-pressed='true'] {
  color: var(--ps-red-400, #ff5c5c);
  border-color: rgba(229, 67, 63, .6);
  background: rgba(229, 67, 63, .18);
}
.ps-event-card-fav.is-active .ps-icon,
.ps-event-card-fav[aria-pressed='true'] .ps-icon {
  fill: currentColor;
  stroke: currentColor;
}
/* Same treatment for the icon-btn used on the detail page hero */
.ps-icon-btn.ps-event-card-fav.is-active .ps-icon,
.ps-icon-btn.ps-event-card-fav[aria-pressed='true'] .ps-icon,
.ps-icon-btn.is-active .ps-icon[data-icon-heart],
.ps-icon-btn[aria-pressed='true'] > .ps-icon {
  /* Fallback: any icon-btn that becomes active fills its icon */
  fill: currentColor;
}

/* Meus eventos: content becomes a link → cursor + hover cue */
.ps-list-item-edit {
  cursor: pointer;
  transition: color .15s ease;
}
.ps-list-item-edit:hover strong { color: var(--ps-primary, #f59e0b); }

/* ========================================================
   Botão Google (destaque no modal de auth) + divisor "ou"
   ======================================================== */

.ps-btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  color: #202124;
  border: 1px solid #dadce0;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.ps-btn-google:hover {
  background: #f7f7f7;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .18);
}
.ps-btn-google:active { transform: translateY(1px); }
.ps-btn-google .ps-google-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}

.ps-divider-or {
  position: relative;
  text-align: center;
  color: var(--ps-text-subtle, rgba(255,255,255,.5));
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 4px 0 2px;
}
.ps-divider-or::before,
.ps-divider-or::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 24px);
  height: 1px;
  background: rgba(255, 255, 255, .12);
}
.ps-divider-or::before { left: 0; }
.ps-divider-or::after { right: 0; }
.ps-divider-or span { padding: 0 8px; background: transparent; }

/* ========================================================
   Placeholder único para eventos sem capa
   ========================================================
   Substitui as variações por categoria (ps-art-music, ps-art-food etc.)
   por um único fundo tema Programe-se com o logo em marca d'água. */

/* Sem capa: usa a imagem padrão cover.png (logo Programe-se) contida sobre a
   base escura do tema, preservando o logo inteiro (sem corte). O ::before e o
   ::after herdados ficam atrás (z-index negativo), então o logo do
   background-image aparece por cima; só neutralizamos o gradiente de categoria
   e mantemos um leve degradê inferior para leitura do texto sobreposto. */
.ps-event-art.is-fallback {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #16110a;
}
/* IMPORTANTE: os pseudo-elementos herdados usam z-index negativo e são
   desenhados ACIMA do background do próprio elemento, mas ABAIXO do conteúdo.
   Portanto o ::before precisa ser transparente para não cobrir a imagem
   cover.png (aplicada como background-image inline no elemento). */
.ps-event-art.is-fallback::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(240, 182, 83, .12) 0%, transparent 45%),
    radial-gradient(ellipse at 78% 82%, rgba(203, 47, 44, .12) 0%, transparent 50%);
  transform: none;
}
.ps-event-art.is-fallback::after {
  background: linear-gradient(180deg, rgba(4, 9, 5, 0) 62%, rgba(4, 9, 5, .5) 100%);
}

/* =========================================================
   35. SMOOTH APP LOADING / CONTENT REVEAL
   Keeps async auth/data hydration from flashing half-ready UI.
   ========================================================= */
html.ps-booting .ps-app {
  opacity: 0;
  visibility: hidden;
}
html.ps-ready .ps-app {
  animation: ps-app-ready .28s ease both;
}
html.ps-booting body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  background:
    radial-gradient(circle at 20% 20%, rgba(230,184,63,.08), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(203,47,44,.07), transparent 34%),
    var(--ps-bg);
}
html.ps-booting body::after {
  content: '';
  position: fixed;
  z-index: 9999;
  width: 34px;
  height: 34px;
  left: calc(50% - 17px);
  top: calc(50% - 17px);
  border: 3px solid rgba(247,240,216,.12);
  border-top-color: var(--ps-primary);
  border-radius: 50%;
  animation: ps-loader-spin .75s linear infinite;
}
@keyframes ps-loader-spin { to { transform: rotate(360deg); } }
@keyframes ps-app-ready { from { opacity: 0; } to { opacity: 1; } }

.ps-content-loading {
  position: relative;
  min-height: 24px;
  opacity: .58;
  transition: opacity 160ms ease;
  pointer-events: none;
}
.ps-content-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(247,240,216,.025), transparent);
  animation: ps-loading-sweep 1.25s ease-in-out infinite;
}
.ps-content-reveal { animation: ps-content-reveal .22s ease both; }
.ps-view-enter { animation: ps-view-enter .2s ease both; }
@keyframes ps-loading-sweep { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes ps-content-reveal { from { opacity: .55; } to { opacity: 1; } }
@keyframes ps-view-enter { from { opacity: .72; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.ps-skeleton-card { pointer-events: none; transform: none !important; }
.ps-skeleton-card .ps-event-card-content { min-height: 132px; align-content: start; }
.ps-skeleton-art { min-height: 220px; border-radius: 0; }
.ps-skeleton-line { height: 12px; width: 72%; }
.ps-skeleton-line-sm { width: 38%; }
.ps-skeleton-line-lg { height: 18px; width: 88%; }
.ps-skeleton-fill { width: 100%; height: 100%; min-height: inherit; border-radius: inherit; }
.ps-skeleton-feature { min-height: 330px; overflow: hidden; pointer-events: none; }
.ps-skeleton-mini { pointer-events: none; }
.ps-skeleton-mini .ps-skeleton-fill { min-height: 100px; border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  html.ps-ready .ps-app, .ps-content-reveal, .ps-view-enter { animation: none !important; }
}
.ps-skeleton-list-item { pointer-events: none; }
.ps-skeleton-list-item .ps-list-item-content { gap: 9px; }
.ps-skeleton-action { width: 76px; height: 34px; border-radius: var(--ps-radius-sm); }