@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&display=swap');

/* ================================================================
   THEME — CSS custom properties (single source of truth)
   Change these values to re-theme the entire application.
   ================================================================ */
:root {
  /* Brand — navy + red sports identity */
  --ts-primary:        19 37 74;      /* navy      #13254a */
  --ts-primary-light:  226 232 243;   /* navy-100  #e2e8f3 */
  --ts-primary-dark:   13 27 56;      /* navy-900  #0d1b38 */
  --ts-accent:         220 38 38;     /* red-600   #dc2626 */

  /* Semantic status */
  --ts-success:        22 163 74;     /* green-600 #16a34a */
  --ts-warning:        234 179 8;     /* amber-500 #eab308 */
  --ts-danger:         220 38 38;     /* red-600   #dc2626 */
  --ts-info:           59 130 246;    /* blue-500  #3b82f6 */

  /* Surfaces */
  --ts-bg:             255 255 255;
  --ts-surface:        249 250 251;   /* gray-50 */
  --ts-surface-secondary: 243 244 246; /* gray-100 */
  --ts-surface-hover:  243 244 246;
  --ts-surface-active: 229 231 235;   /* gray-200 */

  /* Borders */
  --ts-border:         229 231 235;   /* gray-200 */
  --ts-border-subtle:  243 244 246;   /* gray-100 */
  --ts-border-strong:  209 213 219;   /* gray-300 */

  /* Text */
  --ts-text:           19 37 74;      /* navy — matches primary */
  --ts-text-secondary: 75 85 99;      /* gray-600 */
  --ts-text-muted:     156 163 175;   /* gray-400 */
  --ts-text-disabled:  209 213 219;   /* gray-300 */
  --ts-text-inverse:   255 255 255;
}

/* ================================================================
   BASE LAYER — element defaults
   ================================================================ */
@layer base {
  h1 { @apply font-display text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight text-ts-text mb-2; }
  h2 { @apply font-display text-xl sm:text-2xl lg:text-3xl font-semibold tracking-tight text-ts-text; }
  h3 { @apply font-display text-lg sm:text-xl lg:text-2xl font-semibold text-ts-text; }
  h4 { @apply font-display text-base sm:text-lg lg:text-xl font-medium text-ts-text; }
  h5 { @apply font-display text-base lg:text-lg font-medium text-ts-text; }
  h6 { @apply font-display text-sm lg:text-base font-medium text-ts-text-secondary uppercase; }

  label {
    @apply block text-sm font-medium text-ts-text-secondary mb-1;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea {
    @apply w-full rounded-md border border-ts-border-strong bg-ts-bg px-3 py-2 text-sm
           text-ts-text placeholder-ts-text-muted shadow-sm
           focus:border-ts-primary focus:ring-1 focus:ring-ts-primary
           transition-colors duration-150;
  }

  input[type="checkbox"] {
    @apply h-4 w-4 rounded border-ts-border-strong text-ts-primary focus:ring-ts-primary;
  }

  input[type="radio"] {
    @apply h-4 w-4 border-ts-border-strong text-ts-primary focus:ring-ts-primary;
  }

  input:disabled, select:disabled, textarea:disabled, button:disabled {
    @apply opacity-50 cursor-not-allowed;
  }
}

/* ================================================================
   COMPONENT LAYER — ts- BEM library
   ================================================================ */
@layer components {

  /* ------ Layout ------ */
  .ts-container      { @apply max-w-[1400px] mx-auto px-4 sm:px-8 lg:px-12; }
  .ts-container-full { @apply w-full px-4 sm:px-8 lg:px-12; }
  .ts-section        { @apply py-6; }
  .ts-subtitle       { @apply text-ts-text-muted mb-2; }

  .ts-link { @apply underline; }

  /* ------ Page Header ------ */
  .ts-page-header {
    @apply flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6;
  }
  .ts-page-header__title   { @apply text-xl sm:text-4xl font-display text-ts-text mb-0; }
  .ts-page-header__desc    { @apply text-sm text-ts-text-muted mt-1; }
  .ts-page-header__actions { @apply flex items-center gap-2 flex-shrink-0; }

  /* ------ Breadcrumb ------ */
  .ts-breadcrumb {
    @apply bg-ts-bg border-b border-ts-border fixed w-full top-[75px] z-30;
  }
  .ts-breadcrumb__inner {
    @apply flex items-center space-x-2 font-display uppercase text-sm text-ts-text-muted py-3;
  }
  .ts-breadcrumb__spacer { @apply h-[44px]; }
  .ts-breadcrumb--admin {
    @apply bg-ts-bg border-b border-ts-border;
  }
  .ts-breadcrumb__link  { @apply hover:text-ts-primary transition-colors; }
  .ts-breadcrumb__sep   { @apply size-4 text-ts-text-disabled; }

  /* ------ Section Title (unified) ------ */
  .ts-section-title     { @apply text-base font-semibold text-ts-text mb-4 flex items-center gap-2; }
  .ts-section-title--lg { @apply text-lg; }

  /* ------ Buttons: base + solid variants ------ */
  .ts-btn {
    @apply inline-flex items-center justify-center gap-2
           px-4 py-2 rounded-md font-medium
           border border-transparent
           focus:outline-none focus:ring-2 focus:ring-offset-2
           transition-all duration-150 font-display text-lg uppercase;
  }

  .ts-btn--primary    { @apply bg-ts-primary text-ts-text-inverse hover:bg-ts-primary-dark focus:ring-ts-primary active:scale-[0.98]; }
  .ts-btn--accent     { @apply bg-ts-accent  text-ts-text-inverse hover:brightness-90  focus:ring-ts-accent active:scale-[0.98]; }
  .ts-btn--success    { @apply bg-ts-success  text-ts-text-inverse hover:brightness-90  focus:ring-ts-success; }
  .ts-btn--danger     { @apply bg-ts-danger   text-ts-text-inverse hover:brightness-90  focus:ring-ts-danger; }
  .ts-btn--warning    { @apply bg-ts-warning  text-ts-text         hover:brightness-90  focus:ring-ts-warning; }
  .ts-btn--info       { @apply bg-ts-info     text-ts-text-inverse hover:brightness-90  focus:ring-ts-info; }
  .ts-btn--secondary  { @apply bg-ts-surface-active text-ts-text hover:bg-ts-border-strong focus:ring-ts-border-strong; }
  .ts-btn--dark       { @apply bg-ts-text     text-ts-text-inverse hover:bg-ts-text-secondary focus:ring-ts-text; }
  .ts-btn--light      { @apply bg-ts-bg border-ts-border text-ts-text hover:bg-ts-surface focus:ring-ts-border; }
  .ts-btn--ghost      { @apply bg-transparent text-ts-text-secondary hover:bg-ts-surface-hover focus:ring-ts-border; }

  /* CTA (call-to-action) */
  .ts-btn--cta {
    @apply rounded-md bg-ts-primary px-3.5 py-2.5 text-sm font-semibold text-ts-text-inverse shadow-sm
           hover:bg-ts-primary-dark focus-visible:outline focus-visible:outline-2
           focus-visible:outline-offset-2 focus-visible:outline-ts-primary
           active:scale-[0.98] transition-all;
  }

  .ts-btn--cta-link {
    @apply text-sm font-semibold leading-6 text-ts-text;
  }

  /* Buttons: outline variants */
  .ts-btn--outline           { @apply bg-transparent border-ts-border text-ts-text hover:bg-ts-surface focus:ring-ts-border; }
  .ts-btn--outline-primary   { @apply bg-transparent border-ts-primary text-ts-primary hover:bg-ts-primary-light focus:ring-ts-primary; }
  .ts-btn--outline-success   { @apply bg-transparent border-ts-success text-ts-success hover:bg-green-50 focus:ring-ts-success; }
  .ts-btn--outline-danger    { @apply bg-transparent border-ts-danger  text-ts-danger  hover:bg-red-50   focus:ring-ts-danger; }
  .ts-btn--outline-secondary { @apply bg-transparent border-ts-border-strong text-ts-text-secondary hover:bg-ts-surface focus:ring-ts-border; }
  .ts-btn--outline-dark      { @apply bg-transparent border-ts-text   text-ts-text   hover:bg-ts-surface-secondary focus:ring-ts-text; }
  .ts-btn--outline-light     { @apply bg-transparent border-ts-border text-ts-text-secondary hover:bg-ts-surface focus:ring-ts-border; }

  /* Buttons: sizes */
  .ts-btn--sm   { @apply px-2.5 py-1.5 text-xs rounded-md; }
  .ts-btn--lg   { @apply px-5 py-3 text-base rounded-lg; }
  .ts-btn--icon { @apply w-9 h-9 p-0 justify-center rounded-md; }

  /* Buttons: disabled */
  .ts-btn:disabled { @apply opacity-60 cursor-not-allowed; }

  /* Buttons: loading */
  .ts-btn--loading {
    @apply relative pointer-events-none;
  }
  .ts-btn--loading::after {
    content: '';
    @apply absolute inset-0 flex items-center justify-center;
    background: inherit;
    border-radius: inherit;
  }
  .ts-btn--loading > * { @apply invisible; }
  .ts-btn--loading::before {
    content: '';
    @apply absolute w-4 h-4 border-2 border-current border-t-transparent rounded-full;
    animation: spin 0.6s linear infinite;
  }

  /* ------ Key-Value Row (unified) ------ */
  .ts-kv             { @apply flex justify-between py-2 border-b border-ts-border last:border-b-0; }
  .ts-kv__label      { @apply text-sm text-ts-text-secondary; }
  .ts-kv__value      { @apply text-sm font-medium text-ts-text text-right; }
  .ts-kv--stacked    { @apply flex-col gap-0.5; }
  .ts-kv--stacked .ts-kv__value { @apply text-left; }
  .ts-kv--icon       { @apply flex items-start gap-2 border-b-0 py-1; }
  .ts-kv--icon .ts-kv__icon { @apply size-5 text-ts-text-muted mt-0.5 flex-shrink-0; }

  /* ------ Table ------ */
  .ts-table                                { @apply w-full border-collapse text-sm text-left text-ts-text-secondary; }
  .ts-table thead                          { @apply bg-ts-surface-secondary text-ts-text; }
  .ts-table th                             { @apply px-6 py-3 text-left text-xs font-medium text-ts-text-muted uppercase tracking-wider; }
  .ts-table thead th:last-child            { @apply text-right; }
  .ts-table tbody td:last-child            { @apply text-right; }
  .ts-table tbody td:last-child > .flex    { @apply justify-end; }
  .ts-table tbody                          { @apply bg-ts-bg divide-y divide-ts-border; }
  .ts-table tbody td                       { @apply border-b border-ts-border px-6 py-4 whitespace-nowrap; }
  .ts-table tbody tr:hover                 { @apply bg-ts-surface; }
  .ts-table--striped tbody tr:nth-child(even) { @apply bg-ts-surface; }
  .ts-table--bordered th, .ts-table--bordered td { @apply border border-ts-border-strong; }
  .ts-table--sm th, .ts-table--sm td       { @apply px-2 py-1 text-xs; }

  /* ------ Card ------ */
  .ts-card          { @apply bg-ts-bg rounded-lg border border-ts-border shadow-sm overflow-hidden; }
  .ts-card__header  { @apply px-5 py-3 border-b border-ts-border bg-ts-surface; }
  .ts-card__body    { @apply p-5; }
  .ts-card__footer  { @apply px-5 py-3 border-t border-ts-border bg-ts-surface; }
  .ts-card__title   { @apply text-base font-semibold text-ts-text; }
  .ts-card__text    { @apply text-sm text-ts-text-secondary; }

  /* ------ Badge ------ */
  .ts-badge             { @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium; }
  .ts-badge--primary    { @apply bg-ts-primary-light text-ts-primary-dark; }
  .ts-badge--success    { @apply bg-green-100  text-green-800; }
  .ts-badge--danger     { @apply bg-red-100    text-red-800; }
  .ts-badge--warning    { @apply bg-yellow-100 text-yellow-800; }
  .ts-badge--info       { @apply bg-blue-100   text-blue-800; }
  .ts-badge--secondary  { @apply bg-ts-surface-secondary text-ts-text-secondary; }
  .ts-badge--trainer    { @apply bg-purple-100 text-purple-800; }
  .ts-badge--specialist { @apply bg-green-100  text-green-800; }

  /* ------ Alert ------ */
  .ts-alert           { @apply px-4 py-3 rounded-md text-sm mb-4; }
  .ts-alert--info     { @apply bg-ts-primary-light text-ts-primary-dark border border-ts-primary/20; }
  .ts-alert--success  { @apply bg-green-50  text-green-700  border border-green-200; }
  .ts-alert--warning  { @apply bg-yellow-50 text-yellow-700 border border-yellow-200; }
  .ts-alert--danger   { @apply bg-red-50    text-red-700    border border-red-200; }

  /* ------ Modal ------ */
  .ts-modal           { @apply fixed inset-0 z-50 flex items-center justify-center hidden; }
  .ts-modal--active   { @apply flex; }
  .ts-modal__overlay  { @apply fixed inset-0 bg-black bg-opacity-50; }
  .ts-modal__dialog   { @apply relative bg-ts-bg rounded-lg shadow-xl max-w-lg w-full mx-4 z-10; }
  .ts-modal__header   { @apply flex items-center justify-between px-6 py-4 border-b border-ts-border; }
  .ts-modal__body     { @apply px-6 py-4; }
  .ts-modal__footer   { @apply flex items-center justify-end gap-2 px-6 py-4 border-t border-ts-border; }
  .ts-modal__close    { @apply text-ts-text-muted hover:text-ts-text-secondary transition-colors; }

  /* ------ Form ------ */
  .ts-form-group       { @apply mb-4; }
  .ts-form-check        { @apply flex items-center gap-2; }
  .ts-form-check label  { @apply mb-0 text-sm font-normal text-ts-text-secondary; }
  .ts-form-check__input { @apply h-4 w-4 rounded border-ts-border-strong text-ts-primary focus:ring-ts-primary shrink-0; }
  .ts-form-check__label { @apply text-sm text-ts-text-secondary leading-snug; }
  .ts-form-hint        { @apply mt-1 text-xs text-ts-text-muted; }
  .ts-form-date        { @apply flex items-center gap-3; }
  .ts-form-date__field { @apply flex-1; }
  .ts-form-date__sep   { @apply text-ts-text-muted text-sm font-medium; }
  .ts-input-group      { @apply flex items-stretch; }
  .ts-input-group input { @apply rounded-none first:rounded-l-md last:rounded-r-md; }
  .ts-input-group__text { @apply inline-flex items-center px-3 text-sm text-ts-text-secondary bg-ts-surface-secondary border border-ts-border-strong; }

  /* ------ List ------ */
  .ts-list        { @apply divide-y divide-ts-border border border-ts-border rounded-lg overflow-hidden; }
  .ts-list__item  { @apply px-4 py-3 bg-ts-bg; }
  .ts-list__item:hover { @apply bg-ts-surface; }

  /* ------ Image ------ */
  .ts-img--fluid  { @apply max-w-full h-auto; }
  .ts-img--circle { @apply rounded-full object-cover; }

  /* ------ Avatar ------ */
  .ts-avatar        { @apply rounded-full object-cover flex-shrink-0; }
  .ts-avatar--xs    { @apply w-8 h-8; }
  .ts-avatar--sm    { @apply w-10 h-10; }
  .ts-avatar--md    { @apply w-12 h-12; }
  .ts-avatar--lg    { @apply w-14 h-14; }
  .ts-avatar--xl    { @apply w-16 h-16; }

  .ts-avatar-placeholder {
    @apply rounded-full bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center flex-shrink-0;
  }
  .ts-avatar-placeholder span { @apply text-ts-text-inverse font-bold; }
  .ts-avatar-placeholder--xs  { @apply w-8 h-8; }
  .ts-avatar-placeholder--xs span { @apply text-xs; }
  .ts-avatar-placeholder--sm  { @apply w-10 h-10; }
  .ts-avatar-placeholder--sm span { @apply text-sm; }
  .ts-avatar-placeholder--md  { @apply w-12 h-12; }
  .ts-avatar-placeholder--md span { @apply text-sm; }
  .ts-avatar-placeholder--lg  { @apply w-14 h-14; }
  .ts-avatar-placeholder--lg span { @apply text-base; }
  .ts-avatar-placeholder--xl  { @apply w-16 h-16; }
  .ts-avatar-placeholder--xl span { @apply text-xl; }
  .ts-avatar-placeholder--neutral {
    @apply bg-ts-surface-active;
    background-image: none;
  }
  .ts-avatar-placeholder--neutral span { @apply text-ts-text-muted; }

  /* ------ Navigation ------ */
  .ts-nav                { @apply bg-ts-bg fixed w-full top-0 z-40 border-b border-ts-border; }
  .ts-nav__bar           { @apply ts-container-full py-3 flex justify-between items-center; }
  .ts-nav__brand         { @apply flex items-center gap-2 shrink-0; }
  .ts-nav__brand-name    { @apply text-xl font-black text-ts-text uppercase tracking-tight; }
  .ts-nav__brand-sub     { @apply text-[10px] font-bold text-ts-accent uppercase tracking-widest; }
  .ts-nav__search        { @apply flex-1 lg:mx-8; }
  .ts-nav__links         { @apply hidden md:flex space-x-8 lg:space-x-10 items-center; }
  .ts-nav__item          { @apply font-display text-xl font-semibold text-ts-text uppercase tracking-wide hover:text-ts-accent transition-colors no-underline; }
  .ts-nav__item--active  { @apply text-ts-accent; }
  .ts-nav__icon          { @apply inline-block size-4; }
  .ts-nav__dot           { @apply inline-block rounded-full bg-ts-danger w-2 h-2; }
  .ts-nav__divider       { @apply w-px h-5 bg-ts-border-strong; }
  .ts-nav__toggle        { @apply text-ts-text-secondary focus:outline-none p-2.5 ml-3 rounded-md hover:bg-ts-surface-hover active:bg-ts-surface-active transition-colors; }
  .ts-nav__auth          { @apply flex items-center gap-4; }

  /* Nav avatar (desktop) */
  .ts-nav__avatar              { @apply w-8 h-8 rounded-full object-cover border-2 border-ts-border transition; }
  .ts-nav__avatar-placeholder  {
    @apply w-8 h-8 rounded-full bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center border-2 border-ts-border transition;
  }
  .ts-nav__avatar-placeholder span { @apply text-ts-text-inverse text-sm font-bold; }
  .group:hover .ts-nav__avatar             { @apply border-ts-accent; }
  .group:hover .ts-nav__avatar-placeholder { @apply border-ts-accent; }
  .ts-nav__user-name { @apply font-display text-ts-text-secondary hidden lg:inline; }

  /* Nav dropdown */
  .ts-nav-dropdown           { @apply relative; }
  .ts-nav-dropdown__trigger  { @apply flex items-center gap-2 focus:outline-none cursor-pointer; }
  .ts-nav-dropdown__menu     {
    @apply absolute right-0 top-full pt-2 w-64 opacity-0 invisible transition-all duration-200 z-50;
  }
  .ts-nav-dropdown__menu-inner {
    @apply bg-ts-bg rounded-lg shadow-lg border border-ts-border overflow-hidden;
  }
  .group:hover .ts-nav-dropdown__menu { @apply opacity-100 visible; }
  .ts-nav-dropdown__header   { @apply px-4 py-3 border-b border-ts-border-subtle; }
  .ts-nav-dropdown__name     { @apply font-display text-ts-text; }
  .ts-nav-dropdown__email    { @apply text-xs text-ts-text-muted truncate; }
  .ts-nav-dropdown__section  { @apply py-1; }
  .ts-nav-dropdown__section--bordered { @apply py-1 border-t border-ts-border-subtle; }
  .ts-nav-dropdown__label    { @apply px-4 pt-2 pb-1 text-xs font-display uppercase tracking-wider; }
  .ts-nav-dropdown__label--gray { @apply text-ts-text-muted; }
  .ts-nav-dropdown__label--blue { @apply text-ts-primary; }
  .ts-nav-dropdown__label--red  { @apply text-ts-danger; }
  .ts-nav-dropdown__link     { @apply flex items-center gap-3 px-4 py-2 text-sm text-ts-text-secondary hover:bg-ts-surface transition; }
  .ts-nav-dropdown__icon     { @apply size-4 text-ts-text-muted; }
  .ts-nav-dropdown__icon--blue { @apply text-ts-accent; }
  .ts-nav-dropdown__icon--red  { @apply text-ts-danger; }
  .ts-nav-dropdown__logout   { @apply flex items-center gap-3 w-full px-4 py-2 text-sm text-ts-danger hover:bg-red-50 transition rounded-b-lg; }

  /* Nav mobile menu */
  .ts-nav-mobile {
    @apply lg:hidden bg-ts-bg shadow-lg overflow-hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
    opacity: 0;
  }
  .ts-nav-mobile.ts-nav-mobile--open {
    max-height: calc(100vh - 75px);
    opacity: 1;
    overflow-y: auto;
    transition: max-height 0.35s ease-in, opacity 0.2s ease-in;
  }
  .ts-nav-mobile__link         { @apply block px-4 py-3 text-ts-text-secondary hover:text-ts-primary hover:bg-ts-surface transition-colors; }
  .ts-nav-mobile__link--danger { @apply block px-4 py-3 text-ts-danger hover:brightness-90 hover:bg-red-50 transition-colors; }
  .ts-nav-mobile__divider      { @apply border-t border-ts-border mt-2 pt-2; }
  .ts-nav-mobile__divider--sm  { @apply border-t border-ts-border-subtle mt-1 pt-1; }
  .ts-nav-mobile__lang         { @apply border-t border-ts-border mt-1 pt-1 px-4 py-2; }
  .ts-nav-mobile__user         { @apply flex items-center gap-3 px-4 py-2; }
  .ts-nav-mobile__user-name    { @apply text-sm font-semibold text-ts-text; }
  .ts-nav-mobile__avatar       { @apply w-8 h-8 rounded-full object-cover; }
  .ts-nav-mobile__avatar-placeholder {
    @apply w-8 h-8 rounded-full bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center;
  }
  .ts-nav-mobile__avatar-placeholder span { @apply text-ts-text-inverse text-xs font-bold; }
  .ts-nav-mobile__label        { @apply px-4 py-1 text-xs font-semibold text-ts-primary uppercase; }
  .ts-nav-mobile__logout       { @apply block w-full text-left px-4 py-2 text-ts-danger hover:brightness-90; }

  /* Nav admin dark variant */
  .ts-nav--admin               { @apply bg-gray-900 border-b-gray-800; backdrop-filter: none; }
  .ts-nav__brand-name--admin   { @apply text-white text-lg; }
  .ts-nav__item--admin         { @apply text-gray-300 hover:text-white; }
  .ts-nav__toggle--admin       { @apply text-gray-300 hover:bg-gray-800; }
  .ts-btn--admin-logout        { @apply text-gray-300 hover:text-white hover:bg-gray-800; }
  .ts-nav-mobile--admin        { @apply bg-gray-900; }
  .ts-nav-mobile__link--admin  { @apply text-gray-300 hover:text-white hover:bg-gray-800; }

  /* ------ Footer ------ */
  .ts-footer {
    @apply bg-ts-bg text-sm pt-12 pb-0 border-t border-ts-border;
  }
  .ts-footer__inner      { @apply ts-container-full; }
  .ts-footer__columns    { @apply grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-8 mb-10; }
  .ts-footer__brand      { @apply col-span-2 sm:col-span-3 lg:col-span-1 mb-2 lg:mb-0; }
  .ts-footer__brand-name { @apply font-display italic text-lg font-black text-ts-text uppercase tracking-tight; }
  .ts-footer__brand-sub  { @apply italic text-[10px] font-bold uppercase tracking-widest; color: rgb(var(--ts-accent)); }
  .ts-footer__heading    { @apply font-bold text-ts-text mb-3 text-xs uppercase tracking-wider; }
  .ts-footer__links      { @apply list-none p-0 m-0 space-y-2; }
  .ts-footer__links a    { @apply text-ts-text-secondary no-underline hover:text-ts-text transition-colors duration-150; }
  .ts-footer__social     { @apply flex gap-4 mt-4; }
  .ts-footer__social a   { @apply text-ts-text-secondary hover:text-ts-text transition-colors; }
  .ts-footer__newsletter { @apply mt-1; }
  .ts-footer__newsletter-text { @apply text-sm text-ts-text-secondary mb-3; }
  .ts-footer__newsletter-form {
    @apply flex items-center border border-ts-border rounded-md overflow-hidden;
  }
  .ts-footer__newsletter-input {
    @apply flex-1 px-3 py-2.5 text-sm border-0 bg-transparent text-ts-text
           placeholder:text-ts-text-muted focus:ring-0 focus:outline-none;
  }
  .ts-footer__newsletter-btn {
    @apply bg-ts-primary text-ts-text-inverse p-2.5 hover:bg-ts-primary-dark transition-colors shrink-0;
  }
  .ts-footer__bottom {
    @apply text-center text-ts-text-muted text-xs py-4;
  }
  .ts-footer__stripe {
    @apply w-full h-1;
    background: rgb(var(--ts-accent));
  }

  /* ------ Footer (Admin) ------ */
  .ts-footer-admin        { @apply bg-gray-800 text-gray-400 text-xs py-2 px-4 mt-auto sticky bottom-0 z-20; }
  .ts-footer-admin__inner { @apply flex flex-wrap items-center justify-center gap-x-1 gap-y-0.5; }
  .ts-footer-admin__sep   { @apply text-gray-600; }

  /* ------ Pagination (Kaminari) ------ */
  .ts-pagination {
    @apply flex justify-center my-8 py-2;
  }
  .ts-pagination * {
    @apply px-3 py-2 mx-1 text-ts-text-secondary no-underline rounded-md;
  }
  .ts-pagination a {
    @apply bg-ts-surface-active;
  }
  .ts-pagination a:hover {
    @apply text-ts-text-inverse bg-ts-text-secondary;
  }
  .ts-pagination .active a {
    @apply bg-ts-primary text-ts-text-inverse;
  }

  /* ------ Pagination (Pagy) ------ */
  .ts-pagy {
    @apply flex space-x-1 font-display text-lg text-ts-text-muted;
  }
  .ts-pagy a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-white;
  }
  .ts-pagy a:not(.gap):hover {
    @apply bg-ts-primary-light text-ts-primary;
  }
  .ts-pagy a:not(.gap):not([href]) {
    @apply text-ts-text-disabled bg-ts-surface-secondary cursor-default;
  }
  .ts-pagy a.current {
    @apply text-white bg-ts-primary;
  }
  .ts-pagy label {
    @apply inline-block whitespace-nowrap bg-ts-surface-active rounded-md px-3 py-0.5;
  }
  .ts-pagy label input {
    @apply bg-ts-surface-secondary border-none rounded-md;
  }
  .ts-pagy a:first-child,
  .ts-pagy a:last-child {
    @apply text-ts-primary;
  }

  /* ------ Toast Notifications ------ */
  .ts-toast-container {
    @apply fixed top-4 right-4 z-[99999] flex flex-col gap-3 w-full max-w-sm px-4 sm:px-0;
    pointer-events: none;
  }
  .ts-toast {
    @apply rounded-lg shadow-lg border p-5;
    pointer-events: auto;
  }
  .ts-toast--notice  { @apply bg-ts-primary-light border-ts-primary/20 text-ts-primary-dark; }
  .ts-toast--success { @apply bg-green-50 border-green-200 text-green-800; }
  .ts-toast--error   { @apply bg-red-50 border-red-200 text-red-800; }
  .ts-toast--alert   { @apply bg-red-50 border-red-200 text-red-800; }
  .ts-toast--warning { @apply bg-yellow-50 border-yellow-200 text-yellow-800; }
  .ts-toast--info    { @apply bg-blue-50 border-blue-200 text-blue-800; }
  .ts-toast__inner   { @apply flex items-start; }
  .ts-toast__icon    { @apply size-6 shrink-0; }
  .ts-toast__icon--notice  { @apply text-ts-primary; }
  .ts-toast__icon--success { @apply text-green-600; }
  .ts-toast__icon--error,
  .ts-toast__icon--alert   { @apply text-red-600; }
  .ts-toast__icon--warning { @apply text-yellow-600; }
  .ts-toast__icon--info    { @apply text-blue-600; }
  .ts-toast__body    { @apply ml-3 flex-1 text-xl font-display font-bold uppercase tracking-wide; }
  .ts-toast__close   {
    @apply ml-4 shrink-0 inline-flex rounded-lg p-1 transition-colors duration-200
           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ts-primary;
  }
  .ts-toast__close--notice  { @apply text-ts-primary/50 hover:text-ts-primary hover:bg-ts-primary/10; }
  .ts-toast__close--success { @apply text-green-400 hover:text-green-600 hover:bg-green-100; }
  .ts-toast__close--error,
  .ts-toast__close--alert   { @apply text-red-400 hover:text-red-600 hover:bg-red-100; }
  .ts-toast__close--warning { @apply text-yellow-400 hover:text-yellow-600 hover:bg-yellow-100; }
  .ts-toast__close--info    { @apply text-blue-400 hover:text-blue-600 hover:bg-blue-100; }
  .ts-toast__progress {
    @apply absolute bottom-0 left-0 h-0.5 rounded-b-lg transition-all ease-linear;
  }
  .ts-toast__progress--notice  { @apply bg-ts-primary/30; }
  .ts-toast__progress--success { @apply bg-green-300; }
  .ts-toast__progress--error,
  .ts-toast__progress--alert   { @apply bg-red-300; }
  .ts-toast__progress--warning { @apply bg-yellow-300; }
  .ts-toast__progress--info    { @apply bg-blue-300; }

  /* ------ Sidebar ------ */
  .ts-sidebar                                { @apply w-64; }
  .ts-sidebar--collapsed                     { @apply w-16; }
  .ts-sidebar--collapsed .ts-sidebar__text,
  .ts-sidebar--collapsed .ts-sidebar__brand-text { @apply hidden; }
  .ts-sidebar--collapsed .ts-sidebar__link   { @apply justify-center px-2; }
  .ts-sidebar--expanded                      { /* default width via .ts-sidebar */ }
  .ts-sidebar__link {
    @apply flex items-center gap-3 px-3 py-2 rounded-lg text-sm
           text-gray-300 hover:bg-gray-800 hover:text-white
           transition-colors duration-150 no-underline;
  }
  .ts-sidebar__link--active { @apply bg-gray-800 text-white; }
  .ts-sidebar__icon         { @apply size-5 flex-shrink-0; }
  .ts-sidebar__text         { @apply whitespace-nowrap overflow-hidden; }

  /* ------ Profile ------ */
  .ts-profile              { @apply -mt-20 relative z-10; }
  .ts-profile__grid        { @apply grid grid-cols-1 lg:grid-cols-3 gap-6; }
  .ts-profile__sidebar     { @apply lg:col-span-1; }
  .ts-profile__main        { @apply lg:col-span-2 space-y-6; }

  .ts-profile-card         { @apply bg-ts-bg rounded-lg border border-ts-border shadow-sm overflow-hidden sticky top-6; }
  .ts-profile-card__avatar { @apply relative bg-gradient-to-br from-ts-primary-light to-ts-surface p-6 text-center; }
  .ts-profile-card__avatar-img {
    @apply w-40 h-40 rounded-full border-4 border-ts-bg shadow-md object-cover mx-auto;
  }
  .ts-profile-card__avatar-placeholder {
    @apply w-40 h-40 rounded-full border-4 border-ts-bg shadow-md
           bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center mx-auto;
  }
  .ts-profile-card__avatar-placeholder span { @apply text-ts-text-inverse text-4xl font-bold; }
  .ts-profile-card__verified { @apply absolute bottom-2 right-1; }
  .ts-profile-card__body   { @apply p-6; }
  .ts-profile-card__name   { @apply text-xl font-bold text-ts-text text-center mb-2; }
  .ts-profile-card__location { @apply text-ts-text-muted text-sm text-center mb-3; }
  .ts-profile-card__headline { @apply text-ts-text-secondary text-center mb-2 font-medium; }
  .ts-profile-card__badges { @apply flex items-center justify-center gap-2 mb-4 flex-wrap; }
  .ts-profile-card__actions { @apply space-y-3; }

  .ts-profile-stats        { @apply grid grid-cols-2 gap-3 mb-6 pt-4 border-t border-ts-border-subtle; }
  .ts-profile-stats__item  { @apply text-center p-3 rounded-md; }
  .ts-profile-stats__item--blue   { @apply bg-gradient-to-br from-ts-primary-light to-ts-surface; }
  .ts-profile-stats__item--green  { @apply bg-gradient-to-br from-green-50 to-emerald-50; }
  .ts-profile-stats__item--purple { @apply bg-gradient-to-br from-purple-50 to-pink-50; }
  .ts-profile-stats__item--orange { @apply bg-gradient-to-br from-yellow-50 to-orange-50; }
  .ts-profile-stats__value { @apply text-2xl font-bold; }
  .ts-profile-stats__label { @apply text-xs text-ts-text-secondary mt-1; }

  .ts-profile-section      { @apply bg-ts-bg rounded-lg border border-ts-border shadow-sm overflow-hidden p-6; }
  .ts-profile-section__title { @apply text-lg font-semibold text-ts-text mb-4 flex items-center; }
  .ts-profile-section__title--lg { @apply mb-6; }

  .ts-profile-cta          {
    @apply bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200
           rounded-lg p-6 flex items-center justify-between;
  }
  .ts-profile-cta__content { @apply flex items-center; }
  .ts-profile-cta__title   { @apply text-lg font-bold text-green-900; }
  .ts-profile-cta__text    { @apply text-green-700; }

  .ts-profile-info-list    { @apply space-y-3; }
  .ts-profile-info-list li { @apply flex items-start text-ts-text-secondary; }
  .ts-profile-info-list__icon { @apply text-ts-primary mr-3 text-xl; }

  .ts-profile-gallery      { @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4; }
  .ts-profile-gallery__item {
    @apply relative bg-ts-surface
           rounded-md overflow-hidden border border-ts-border
           hover:border-ts-accent hover:shadow-md transition-all duration-200 cursor-pointer;
  }
  .ts-profile-gallery__item--green { @apply hover:border-green-400; }
  .ts-profile-gallery__overlay {
    @apply absolute inset-0 bg-black bg-opacity-0
           transition duration-200 flex justify-center items-center
           opacity-0;
  }
  .group:hover .ts-profile-gallery__overlay { @apply bg-opacity-50 opacity-100; }
  .ts-profile-gallery__btn {
    @apply px-4 py-2 bg-ts-bg text-ts-text font-semibold rounded-md hover:bg-ts-surface transition;
  }

  .ts-profile-people       { @apply flex flex-wrap gap-4; }
  .ts-profile-people__item { @apply flex flex-col items-center; }
  .ts-profile-people__avatar {
    @apply w-16 h-16 rounded-full border-2 border-ts-border transition object-cover;
  }
  .ts-profile-people__placeholder {
    @apply w-16 h-16 rounded-full border-2 border-ts-border transition
           flex items-center justify-center;
  }
  .ts-profile-people__placeholder--blue   { @apply bg-gradient-to-br from-ts-accent to-ts-primary; }
  .ts-profile-people__placeholder--green  { @apply bg-gradient-to-br from-green-400 to-emerald-500; }
  .ts-profile-people__placeholder--purple { @apply bg-gradient-to-br from-purple-400 to-pink-500; }
  .ts-profile-people__placeholder span { @apply text-ts-text-inverse text-xl font-bold; }
  .ts-profile-people__name { @apply mt-2 text-sm text-ts-text-secondary text-center transition; }

  /* group-hover interactions for people items */
  .group:hover .ts-profile-people__avatar--blue   { @apply border-ts-accent; }
  .group:hover .ts-profile-people__avatar--green  { @apply border-green-400; }
  .group:hover .ts-profile-people__avatar--purple { @apply border-purple-400; }
  .group:hover .ts-profile-people__placeholder--blue   { @apply border-ts-accent; }
  .group:hover .ts-profile-people__placeholder--green  { @apply border-green-400; }
  .group:hover .ts-profile-people__placeholder--purple { @apply border-purple-400; }
  .group:hover .ts-profile-people__name--blue   { @apply text-ts-primary; }
  .group:hover .ts-profile-people__name--green  { @apply text-green-600; }
  .group:hover .ts-profile-people__name--purple { @apply text-purple-600; }

  .ts-profile-event-link {
    @apply block p-4 rounded-md border border-ts-border
           hover:border-ts-accent hover:bg-ts-primary-light transition no-underline;
  }
  .ts-profile-event-link__title  { @apply font-semibold text-ts-text; }
  .ts-profile-event-link__time   { @apply text-sm text-ts-text-muted mt-1; }
  .ts-profile-event-link__venue  { @apply text-xs text-ts-text-muted mt-1; }
  .group:hover .ts-profile-event-link__title { @apply text-ts-primary; }

  /* ------ Profile Detail (show page) ------ */
  .ts-pro-detail                    { @apply ts-container-full py-6; }
  .ts-pro-detail__grid              { @apply grid grid-cols-1 lg:grid-cols-3 gap-6; }
  .ts-pro-detail__main              { @apply lg:col-span-2 space-y-6; }
  .ts-pro-detail__sidebar           { @apply space-y-6; }

  /* Block title — accent-colored section heading */
  .ts-pro-detail__title             { @apply text-xl font-display text-ts-primary uppercase tracking-wider mb-4; }
  .ts-pro-detail__title--flex       { @apply flex items-center; }
  .ts-pro-detail__subtitle          { @apply text-xs font-display uppercase tracking-wider text-ts-text-muted font-semibold; }

  /* Hero card */
  .ts-pro-detail__hero              { @apply ts-card rounded-xl overflow-hidden; }
  .ts-pro-detail__hero-grid         { @apply grid grid-cols-1 md:grid-cols-2 gap-0; }
  .ts-pro-detail__hero-photo        { @apply relative bg-ts-surface overflow-hidden rounded-xl; }
  .ts-pro-detail__hero-photo img    { @apply w-full h-full max-h-[500px] object-cover; }
  .ts-pro-detail__hero-placeholder  { @apply w-full h-full min-h-[300px] flex items-center justify-center bg-gradient-to-br from-ts-primary-light to-ts-surface-secondary; }
  .ts-pro-detail__hero-placeholder span { @apply text-6xl font-bold text-ts-primary/30; }

  /* Photo strip (thumbnails below hero photo) */
  .ts-pro-detail__photo-strip       { @apply grid grid-cols-3 gap-2 mt-2; }
  .ts-pro-detail__photo-strip-thumb {
    @apply aspect-[4/3] rounded-lg overflow-hidden cursor-pointer transition
           hover:opacity-80;
  }
  .ts-pro-detail__photo-strip-thumb img { @apply w-full h-full object-cover; }
  .ts-pro-detail__photo-strip-thumb--more { @apply relative; }
  .ts-pro-detail__hero-info         { @apply p-6 md:p-8 flex flex-col justify-center; }
  .ts-pro-detail__hero-label        { @apply text-xs font-display uppercase tracking-wider text-ts-accent font-semibold mb-1 flex items-center gap-1; }
  .ts-pro-detail__hero-name         { @apply text-4xl md:text-6xl font-display text-ts-text uppercase tracking-tight mb-1; }
  .ts-pro-detail__hero-meta         { @apply flex flex-wrap items-center gap-2 text-sm text-ts-text-muted mb-4; }
  .ts-pro-detail__hero-bio          { @apply text-sm text-ts-text-secondary leading-relaxed mb-5; }
  .ts-pro-detail__hero-badges       { @apply flex flex-wrap gap-2 mb-5; }

  /* Follow overlay button */
  .ts-pro-detail__follow-btn {
    @apply absolute top-3 right-3 w-10 h-10 rounded-full bg-white/80 hover:bg-white
           flex items-center justify-center shadow transition no-underline;
  }

  /* Stats bar (inside hero) */
  .ts-pro-detail__stats-bar         { @apply grid grid-cols-2 sm:grid-cols-4 gap-3 pt-4 border-t border-ts-border-subtle; }
  .ts-pro-detail__stat              { @apply flex flex-col items-center justify-center text-center gap-1; }
  .ts-pro-detail__stat-icon         { @apply size-8 text-ts-text-muted shrink-0; }
  .ts-pro-detail__stat-value        { @apply font-display text-ts-text-secondary text-4xl; }
  .ts-pro-detail__stat-label        { @apply text-xs text-ts-text-muted; }

  /* Thumbnail gallery strip */
  .ts-pro-detail__gallery           { @apply flex gap-3 overflow-x-auto pb-1; }
  .ts-pro-detail__gallery-thumb {
    @apply shrink-0 w-28 h-20 rounded-lg overflow-hidden border border-ts-border
           hover:border-ts-primary transition cursor-pointer;
  }
  .ts-pro-detail__gallery-thumb img { @apply w-full h-full object-cover; }
  .ts-pro-detail__gallery-more {
    @apply shrink-0 w-28 h-20 rounded-lg overflow-hidden border border-ts-border
           relative cursor-pointer;
  }
  .ts-pro-detail__gallery-more img  { @apply w-full h-full object-cover brightness-50; }
  .ts-pro-detail__gallery-more-label {
    @apply absolute inset-0 flex flex-col items-center justify-center text-white font-bold;
  }

  /* Content block (card with padding) */
  .ts-pro-detail__block             { @apply ts-card rounded-xl p-6; }

  /* Dot list (experience entries) */
  .ts-pro-detail__dot-list          { @apply grid grid-cols-1 sm:grid-cols-2 gap-4; }
  .ts-pro-detail__dot-item          { @apply flex items-start gap-2; }
  .ts-pro-detail__dot               { @apply mt-1.5 w-2 h-2 rounded-full bg-ts-accent shrink-0; }

  /* Service chip card */
  .ts-pro-detail__service           { @apply flex items-start gap-3 p-3 rounded-lg bg-ts-surface; }
  .ts-pro-detail__service-icon      { @apply size-5 text-ts-accent shrink-0 mt-0.5; }

  /* Credential entry (icon + text) */
  .ts-pro-detail__credential        { @apply flex items-start gap-3; }
  .ts-pro-detail__credential-icon   { @apply size-5 text-ts-accent shrink-0 mt-0.5; }

  /* Info bar (divided row) */
  .ts-pro-detail__info-bar {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4
           divide-y sm:divide-y-0 sm:divide-x divide-ts-border-subtle;
  }
  .ts-pro-detail__info-item         { @apply flex items-center gap-3 pt-4 sm:pt-0 sm:pl-4 first:pt-0 first:pl-0; }
  .ts-pro-detail__info-icon         { @apply size-5 text-ts-text-muted shrink-0; }

  /* Event row link */
  .ts-pro-detail__event-link {
    @apply flex items-center gap-4 p-3 rounded-lg hover:bg-ts-surface transition no-underline;
  }

  /* Tag pill */
  .ts-pro-detail__tag {
    @apply text-xs font-medium px-2.5 py-1 rounded-full border border-ts-border text-ts-text-secondary;
  }

  /* Free trial banner */
  .ts-pro-detail__free-trial {
    @apply mt-4 p-3 bg-green-50 rounded-lg border border-green-200 text-center;
  }
  .ts-pro-detail__free-trial p      { @apply text-sm font-semibold text-green-800; }

  /* ------ Landing / Homepage ------ */
  .ts-hero {
    @apply relative w-full bg-ts-bg z-20;
  }
  .ts-hero--fullscreen    { @apply min-h-screen; }
  .ts-hero__inner {
    @apply flex flex-col lg:flex-row items-stretch min-h-[480px] lg:min-h-[540px];
  }
  /* Left: text content */
  .ts-hero__content {
    @apply relative z-10 flex flex-col justify-center
           px-6 sm:px-10 lg:px-16 xl:px-24 py-12 lg:py-16
           w-full lg:w-1/2 shrink-0;
  }
  .ts-hero__title {
    @apply font-display text-4xl sm:text-5xl lg:text-[4rem] xl:text-7xl
           font-extrabold tracking-tight text-ts-text leading-[0.95] mb-0 uppercase;
  }
  .ts-hero__text {
    @apply mt-6 text-base leading-relaxed text-ts-text-secondary max-w-md;
  }
  /* Right: image + stripe */
  .ts-hero__image {
    @apply relative w-full lg:w-1/2 min-h-[280px] lg:min-h-0;
  }
  .ts-hero__image img {
    @apply absolute inset-0 w-full h-full object-cover;
  }
  /* Diagonal stripes — bottom-right corner */
  .ts-hero__stripes {
    @apply absolute bottom-0 right-0 z-10 pointer-events-none;
    width: 45%;
    height: 40%;
  }
  .ts-hero__stripes > div { @apply absolute inset-0; }
  .ts-hero__stripes-2 { background: rgb(var(--ts-primary) / 0.7);  clip-path: polygon(100% 10%, 100% 100%, 12% 100%); }
  .ts-hero__stripes-3 { background: rgb(var(--ts-bg) / 0.5);     clip-path: polygon(100% 25%, 100% 100%, 27% 100%); }
  .ts-hero__stripes-4 { background: rgb(var(--ts-primary) / 0.7); clip-path: polygon(100% 40%, 100% 100%, 42% 100%); }
  .ts-hero__stripes-5 { background: rgb(var(--ts-bg) / 0.5);     clip-path: polygon(100% 55%, 100% 100%, 56% 100%); }
  .ts-hero__stripes-6 { background: rgb(var(--ts-accent) / 0.7); clip-path: polygon(100% 68%, 100% 100%, 68% 100%); }
  /* Gradient fade on left edge of image (white → transparent) */
  .ts-hero__image::before {
    content: '';
    @apply absolute inset-y-0 left-0 z-10 hidden lg:block;
    width: 200px;
    background: linear-gradient(to right, rgb(var(--ts-bg)) 0%, rgb(var(--ts-bg) / 0.7) 40%, transparent 100%);
  }

  .ts-hero__bg            { @apply absolute inset-0 z-0; }
  .ts-hero__bg-img        { @apply w-full h-full object-cover; }
  .ts-hero__overlay       { @apply absolute inset-0 bg-gradient-to-b from-black/60 via-black/45 to-black/70; }
  .ts-hero__location-badge { @apply inline-flex items-center gap-1.5 mt-6 rounded-full bg-white/15 backdrop-blur-sm px-4 py-1.5 text-sm font-medium text-white/90 ring-1 ring-white/25; }
  .ts-hero__location-link  { @apply text-white underline underline-offset-2 hover:text-white/80 transition-colors; }

  /* Hero variant: article / content page */
  .ts-hero--bordered       { @apply border-b border-ts-border; }
  .ts-hero--compact        { @apply bg-gray-50; }
  .ts-hero--compact .ts-hero__inner { min-height: auto; }
  .ts-hero--compact .ts-hero__content { @apply py-8 lg:py-10 w-full lg:w-full; }
  .ts-hero__category       { @apply text-xs font-display font-bold uppercase tracking-widest text-ts-accent mb-3; }
  .ts-hero__author         { @apply flex items-center gap-3 mt-6; }
  .ts-hero__author-avatar  { @apply w-10 h-10 rounded-full object-cover ring-2 ring-ts-border; }
  .ts-hero__author-name    { @apply font-display text-ts-text; }
  .ts-hero__author-role    { @apply text-xs text-ts-text-muted; }
  .ts-hero__meta           { @apply flex flex-wrap items-center gap-4 text-xs text-ts-text-muted mt-4; }
  .ts-hero__meta-item      { @apply flex items-center gap-1; }
  .ts-hero__meta-dot       { @apply text-ts-text-disabled; }

  .ts-hero__search        { @apply mt-10 max-w-xl relative z-30; }
  .ts-hero__search-form   {
    @apply flex items-stretch bg-ts-bg rounded-lg border border-ts-border-strong shadow-md;
  }
  .ts-hero__search-group  {
    @apply flex-1 flex items-center gap-3 px-4 sm:px-5 py-4 border-r border-ts-border cursor-pointer min-w-0;
  }
  .ts-hero__search-group:last-of-type { @apply border-r-0; }
  .ts-hero__search-icon   { @apply size-5 text-ts-text-muted shrink-0; }
  .ts-hero__search-label  { @apply text-[11px] font-bold text-ts-text uppercase tracking-wide leading-none mb-1; }
  .ts-hero__search-value  { @apply text-sm text-ts-text-muted leading-tight; }
  .ts-hero__search-chevron { @apply size-4 text-ts-text-muted shrink-0 ml-auto; }
  .ts-hero__search-input  {
    @apply w-full border-0 bg-transparent text-sm text-ts-text leading-tight
           placeholder:text-ts-text-muted focus:ring-0 focus:outline-none p-0;
  }
  .ts-hero__search-submit {
    @apply bg-ts-primary text-ts-text-inverse w-14 flex items-center justify-center
           hover:bg-ts-primary-dark transition-colors shrink-0 rounded-r-lg;
  }
  /* Hero dropdown panel */
  .ts-hero__dropdown {
    @apply absolute top-full left-0 right-0 mt-1 bg-ts-bg border border-ts-border rounded-lg shadow-lg
           z-50 py-2 max-h-64 overflow-y-auto;
  }
  .ts-hero__dropdown-item {
    @apply flex items-center gap-3 px-4 py-2.5 text-sm text-ts-text-secondary
           hover:bg-ts-surface cursor-pointer transition-colors select-none;
  }
  .ts-hero__dropdown-item input[type="checkbox"] {
    @apply shrink-0;
  }

  /* ------ Brand Accent (// marks) ------ */
  .ts-brand-mark {
    @apply inline-flex items-stretch gap-[3px] mr-1.5;
  }
  .ts-brand-mark__bar {
    @apply rounded-sm;
    transform: skewX(-12deg);
  }
  .ts-brand-mark__bar--thick {
    @apply w-[5px];
    background: rgb(var(--ts-primary));
  }
  .ts-brand-mark__bar--thin {
    @apply w-[2px];
    background: rgb(var(--ts-primary));
  }
  .ts-brand-mark__bar--accent {
    @apply w-[3.5px];
    background: rgb(var(--ts-accent));
  }

  /* ------ Brand Logo (// TEAMSPORT + subtitle) ------ */
  .ts-brand-logo {
    @apply flex items-center gap-1;
  }
  .ts-brand-logo__text {
    @apply flex flex-col leading-none italic;
  }
  .ts-brand-logo__name {
    @apply font-display text-4xl font-bold tracking-tight;
    color: rgb(var(--ts-primary));
  }
  .ts-brand-logo__sub {
    @apply text-[12px] font-bold uppercase tracking-[0.2em] mt-0.5;
    color: rgb(var(--ts-accent));
  }

  /* ------ Action Cards (I'm a Trainer / Add Event / Add Gym) ------ */
  .ts-action-cards        { @apply grid grid-cols-1 sm:grid-cols-3 gap-4 my-10; }
  .ts-action-card {
    @apply flex items-center gap-4 px-5 py-4 bg-ts-bg border border-ts-border rounded-lg
           hover:shadow-md hover:border-ts-border-strong transition-all duration-200 no-underline text-inherit;
  }
  .ts-action-card__icon   { @apply size-10 shrink-0; color: rgb(var(--ts-accent)); }
  .ts-action-card__body   { @apply flex-1 min-w-0; }
  .ts-action-card__title  { @apply font-display text-lg font-bold text-ts-text uppercase tracking-wide; }
  .ts-action-card__desc   { @apply text-xs text-ts-text-muted mt-0.5; }
  .ts-action-card__arrow  { @apply size-5 text-ts-text-muted shrink-0; }

  /* Dark variant (bottom CTA bar) */
  .ts-action-cards--dark {
    @apply gap-0 my-0 rounded-xl overflow-hidden;
  }
  .ts-action-cards--dark .ts-action-card {
    @apply rounded-none border-0 py-5 px-6;
    background: rgb(var(--ts-primary));
  }
  .ts-action-cards--dark .ts-action-card:hover {
    background: rgb(var(--ts-primary-dark));
    @apply shadow-none;
  }
  .ts-action-cards--dark .ts-action-card + .ts-action-card {
    border-left: 1px solid rgb(var(--ts-bg) / 0.15);
  }
  .ts-action-cards--dark .ts-action-card__icon   { @apply text-white/70; }
  .ts-action-cards--dark .ts-action-card__title  { @apply text-white; }
  .ts-action-cards--dark .ts-action-card__desc   { @apply text-white/60; }
  .ts-action-cards--dark .ts-action-card__arrow  { @apply text-white/50; }

  /* ------ Sport Category Icons ------ */
  .ts-sport-categories {
    @apply flex items-center justify-between w-full overflow-x-auto py-2 border-b border-ts-border;
    scrollbar-width: none;
  }
  .ts-sport-categories::-webkit-scrollbar { display: none; }
  .ts-sport-category {
    @apply flex-1 flex flex-col items-center justify-center gap-2.5 shrink-0 cursor-pointer no-underline text-ts-text-secondary
           pb-2 transition-all duration-200
           border-r border-ts-border last:border-r-0;
  }
  .ts-sport-category:hover {
    @apply text-ts-primary;
  }
  .ts-sport-category:hover .ts-sport-category__label {
    border-bottom: 2px solid rgb(var(--ts-accent));
  }
  .ts-sport-category--active { @apply text-ts-primary; }
  .ts-sport-category__icon { @apply size-10; }
  .ts-sport-category__label {
    @apply font-display text-xl font-semibold uppercase tracking-widest pb-1;
    border-bottom: 2px solid transparent;
  }
  .ts-sport-category--active .ts-sport-category__label {
    border-bottom: 2px solid rgb(var(--ts-accent));
  }

  /* ------ Content Section (sidebar title + main content) ------ */
  .ts-content-section     { @apply flex flex-col lg:flex-row gap-8 py-10 lg:py-14 border-b border-ts-border; }
  .ts-content-section:last-child { @apply border-b-0; }
  .ts-content-section__sidebar {
    @apply lg:w-60 shrink-0;
  }
  .ts-content-section__title {
    @apply font-display text-2xl sm:text-3xl font-extrabold text-ts-text uppercase leading-tight mb-3;
  }
  .ts-content-section__desc { @apply text-sm text-ts-text-secondary mb-4; }
  .ts-content-section__link {
    @apply text-xs font-bold uppercase tracking-wider text-ts-text hover:text-ts-accent
           inline-flex items-center gap-1 no-underline transition-colors;
  }
  .ts-content-section__main { @apply flex-1 min-w-0; }

  /* ------ Place Card (horizontal scroll style) ------ */
  .ts-place-card {
    @apply flex-shrink-0 w-56 no-underline text-inherit;
  }
  .ts-place-card__image {
    @apply relative h-36 rounded-lg overflow-hidden bg-ts-surface-secondary mb-2;
  }
  .ts-place-card__image img { @apply w-full h-full object-cover; }
  .ts-place-card__badge {
    @apply absolute top-2 left-2 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider
           text-ts-text-inverse rounded;
  }
  .ts-place-card__name  { @apply text-sm font-bold text-ts-text; }
  .ts-place-card__meta  { @apply text-xs text-ts-text-muted mt-0.5; }

  /* ------ Event Row (date stack + info) ------ */
  .ts-event-row {
    @apply flex items-stretch gap-5 h-28 border-b border-ts-border last:border-b-0 no-underline text-inherit overflow-hidden transition-colors duration-300;
  }
  .ts-event-row__date {
    @apply text-center shrink-0 w-14 bg-gray-100 p-2 self-center;
  }
  .ts-event-row__day    { @apply text-4xl font-display text-ts-text leading-none; }
  .ts-event-row__month  { @apply text-xs font-bold uppercase text-ts-text-secondary; }
  .ts-event-row__year   { @apply text-xs text-ts-text-muted; }
  .ts-event-row__body   { @apply flex-1 min-w-0 self-center py-5; }
  .ts-event-row__cat    { @apply text-[10px] font-bold uppercase tracking-wider text-ts-accent; }
  .ts-event-row__title  { @apply text-4xl italic font-display text-ts-text; }
  .ts-event-row__meta   { @apply text-xs text-ts-text-muted mt-0.5; }
  .ts-event-row__image-wrap {
    @apply hidden sm:block w-[40%] h-full shrink-0 relative overflow-hidden;
  }
  .ts-event-row__image-wrap::before {
    content: '';
    @apply absolute inset-0 z-10 transition-opacity duration-300;
    background: linear-gradient(to right, theme('colors.white') 0%, transparent 40%, transparent 60%, theme('colors.white') 100%);
  }
  .ts-event-row:hover .ts-event-row__image-wrap::before { @apply opacity-0; }
  .ts-event-row__image  { @apply w-full h-full object-cover grayscale transition-all duration-300; }
  .ts-event-row:hover .ts-event-row__image { @apply grayscale-0; }
  .ts-event-row__arrow  { @apply size-5 text-ts-text-muted shrink-0 self-center; }

  .ts-events-wrapper    {
      @apply border-[1px] border-gray-200 rounded-lg px-4 mx-4;
  } 
  /* ------ Article Card ------ */
  .ts-article-card {
    @apply block no-underline text-inherit transition-all duration-200 hover:-translate-y-0.5;
  }
  .ts-article-card__image {
    @apply relative h-48 rounded-xl overflow-hidden bg-ts-surface-secondary mb-3;
  }
  .ts-article-card__image img { @apply w-full h-48 object-cover transition-transform duration-300; }
  .ts-article-card:hover .ts-article-card__image img { @apply scale-105; }
  .ts-article-card__badge {
    @apply absolute bottom-3 left-3 px-2.5 py-1 text-[10px] font-display font-bold uppercase tracking-wider
           text-ts-text-inverse rounded-md;
    background: rgb(var(--ts-primary));
  }
  .ts-article-card__date     { @apply text-xs font-bold uppercase tracking-wider text-ts-primary mb-1; }
  .ts-article-card__title    { @apply font-display text-lg font-bold text-ts-text leading-tight mb-2; }
  .ts-article-card:hover .ts-article-card__title { @apply text-ts-primary; }
  .ts-article-card__excerpt  { @apply text-sm text-ts-text-secondary leading-relaxed line-clamp-2 mb-3; }
  .ts-article-card__meta     { @apply flex items-center justify-between text-xs text-ts-text-muted; }
  .ts-article-card__reading-time { @apply flex items-center gap-1; }
  .ts-article-card__bookmark { @apply size-4 text-ts-text-muted transition-colors; }
  .ts-article-card:hover .ts-article-card__bookmark { @apply text-ts-primary; }

  /* ------ Article Listing (index page) ------ */
  .ts-article-listing__header  { @apply flex flex-col md:flex-row md:items-start md:justify-between gap-6 mb-8; }
  .ts-article-listing__search  { @apply flex flex-col gap-3 w-full md:w-auto md:min-w-[280px] shrink-0; }
  .ts-article-listing__search-form { @apply relative; }
  .ts-article-listing__search-input { @apply w-full pr-10; }
  .ts-article-listing__search-btn {
    @apply absolute right-3 top-1/2 -translate-y-1/2 text-ts-text-muted hover:text-ts-primary transition-colors;
  }
  .ts-article-listing__grid    { @apply grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-8; }

  /* ------ Article Show (body + sidebar) ------ */
  .ts-article-show           { @apply grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 items-start; }
  .ts-article-show__body     { @apply lg:col-span-2; }
  .ts-article-show__sidebar  { @apply space-y-6 lg:sticky lg:top-20 lg:self-start; }
  .ts-article-show__toc      { @apply space-y-2; }
  .ts-article-show__toc-link { @apply block text-sm text-ts-text-secondary hover:text-ts-primary no-underline transition-colors py-1; }
  .ts-article-show__share    { @apply flex gap-3; }
  .ts-article-show__share-btn {
    @apply w-12 h-12 rounded-full border border-ts-border flex items-center justify-center
           text-ts-text-secondary hover:text-ts-primary hover:border-ts-primary transition-colors no-underline;
  }
  .ts-article-show__newsletter      { @apply bg-ts-bg rounded-lg border border-ts-border shadow-sm p-5; }
  .ts-article-show__newsletter-header { @apply flex items-center gap-3 mb-2; }
  .ts-article-show__newsletter-icon { @apply size-8 text-ts-primary shrink-0; }
  .ts-article-show__related        { @apply space-y-4; }
  .ts-article-show__related-item   { @apply flex gap-3 no-underline text-inherit; }
  .ts-article-show__related-image  { @apply w-20 h-16 rounded-lg object-cover shrink-0 bg-ts-surface-secondary; }
  .ts-article-show__related-cat    { @apply text-[10px] font-display font-bold uppercase tracking-wider text-ts-accent; }
  .ts-article-show__related-title  { @apply text-sm font-display font-bold text-ts-text leading-tight transition-colors; }
  .ts-article-show__related-item:hover .ts-article-show__related-title { @apply text-ts-primary; }
  .ts-article-show__related-meta   { @apply text-xs text-ts-text-muted mt-1; }

  /* ------ About Page ------ */
  .ts-about-pillars          { @apply grid grid-cols-2 md:grid-cols-4 gap-8 text-center; }
  .ts-about-pillars__icon    { @apply size-10 text-ts-primary mx-auto mb-3; }
  .ts-about-pillars__title   { @apply font-display uppercase text-xl mb-2; }
  .ts-about-pillars__text    { @apply text-xs text-ts-text-secondary; }

  .ts-about-story            { @apply grid grid-cols-1 lg:grid-cols-2 gap-10; }
  .ts-about-story__title     { @apply font-display uppercase text-lg mb-4; }
  .ts-about-story__text      { @apply text-ts-text-secondary leading-relaxed mb-4; }
  .ts-about-story__fact      { @apply flex items-center gap-4 py-3 border-b border-ts-border; }
  .ts-about-story__fact:last-child { @apply border-b-0; }
  .ts-about-story__fact-icon { @apply size-6 text-ts-primary shrink-0; }
  .ts-about-story__fact-label { @apply font-display uppercase text-sm text-ts-text; }
  .ts-about-story__fact-value { @apply ml-auto font-semibold text-ts-text; }

  .ts-join-community         { @apply py-12 text-center; }
  .ts-join-community__title  { @apply font-display uppercase text-2xl mb-2; }
  .ts-join-community__text   { @apply text-ts-text-secondary max-w-lg mx-auto mb-8; }
  .ts-join-community__grid   { @apply grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto; }
  .ts-join-community__card   { @apply flex flex-col; }
  .ts-join-community__body   { @apply text-center space-y-3 flex flex-col flex-1; }
  .ts-join-community__icon   { @apply size-10 text-ts-primary mx-auto; }
  .ts-join-community__name   { @apply font-display uppercase text-sm; }
  .ts-join-community__desc   { @apply text-xs text-ts-text-muted flex-1; }
  .ts-join-community__btn    { @apply mt-auto; }

  /* ------ Stats Bar ------ */
  .ts-stats-bar           { @apply mt-8 flex justify-center gap-8 sm:gap-14 border-t border-white/20 pt-6; }
  .ts-stats-bar__item     { @apply flex flex-col items-center; }
  .ts-stats-bar__number   { @apply text-2xl sm:text-3xl font-bold text-white; }
  .ts-stats-bar__label    { @apply text-xs sm:text-sm text-gray-300 mt-0.5; }

  .ts-hero__pills         { @apply mt-6 flex flex-wrap justify-center gap-2; }
  .ts-hero__pill-item     { @apply rounded-full px-4 py-2 text-sm font-medium text-white bg-white/15 ring-1 ring-white/30 hover:bg-white/25 hover:ring-white/50 backdrop-blur-sm transition-all duration-200 no-underline; }

  .ts-testimonial          { @apply bg-ts-bg rounded-lg p-6 shadow-sm ring-1 ring-ts-border-subtle flex flex-col; }
  .ts-testimonial__stars   { @apply flex gap-0.5 mb-3; }
  .ts-testimonial__body    { @apply text-ts-text-secondary leading-relaxed flex-1; }
  .ts-testimonial__footer  { @apply flex items-center gap-3 mt-4 pt-4 border-t border-ts-border-subtle; }
  .ts-testimonial__avatar  { @apply w-10 h-10 rounded-full object-cover; }
  .ts-testimonial__author  { @apply text-sm font-semibold text-ts-text; }
  .ts-testimonial__location { @apply text-xs text-ts-text-muted; }

  .ts-landing-section     { @apply py-12 sm:py-16; }
  .ts-landing-section--alt { @apply bg-ts-surface; }
  .ts-landing-section__heading { @apply text-2xl md:text-3xl font-bold text-ts-text mb-8 sm:mb-12; }
  .ts-landing-section__heading-icon { @apply inline-block size-10 sm:size-12; }
  .ts-landing-section__grid { @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-5; }
  .ts-landing-section__grid--4 { @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5; }
  .ts-landing-section__grid--3 { @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6; }

  .ts-landing-steps        { @apply grid grid-cols-1 md:grid-cols-3 gap-8; }
  .ts-landing-steps__item  { @apply relative text-center; }
  .ts-landing-steps__number { @apply inline-flex items-center justify-center w-12 h-12 rounded-full bg-ts-primary text-white text-xl font-bold mb-4; }
  .ts-landing-steps__title { @apply text-lg font-semibold text-ts-text mb-2; }
  .ts-landing-steps__text  { @apply text-ts-text-secondary leading-relaxed; }

  .ts-landing-faq          { @apply max-w-3xl mx-auto divide-y divide-ts-border; }
  .ts-landing-faq__item    { @apply py-5; }
  .ts-landing-faq__question { @apply flex items-center justify-between w-full text-left text-lg font-medium text-ts-text cursor-pointer hover:text-ts-primary transition-colors; }
  .ts-landing-faq__chevron { @apply size-5 text-ts-text-muted transition-transform duration-200; }
  .ts-landing-faq__answer  { @apply mt-3 text-ts-text-secondary leading-relaxed; }

  .ts-pricing-grid          { @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6; }
  .ts-pricing-card          { @apply relative flex flex-col rounded-lg border border-ts-border bg-ts-bg p-6 shadow-sm transition-shadow hover:shadow-md; }
  .ts-pricing-card--featured { @apply border-ts-primary ring-2 ring-ts-primary; }
  .ts-pricing-card__badge   { @apply absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-ts-primary px-3 py-0.5 text-xs font-semibold text-ts-text-inverse; }
  .ts-pricing-card__title   { @apply text-xl font-bold text-ts-text; }
  .ts-pricing-card__price   { @apply mt-4 flex items-baseline gap-1; }
  .ts-pricing-card__amount  { @apply text-4xl font-bold tracking-tight text-ts-text; }
  .ts-pricing-card__interval { @apply text-sm text-ts-text-muted; }
  .ts-pricing-card__desc    { @apply mt-3 text-sm text-ts-text-secondary leading-relaxed; }
  .ts-pricing-card__features { @apply mt-6 space-y-3 flex-1; }
  .ts-pricing-card__feature { @apply flex items-start gap-2 text-sm text-ts-text-secondary; }
  .ts-pricing-card__check   { @apply size-4 text-ts-primary shrink-0 mt-0.5; }
  .ts-pricing-card__x       { @apply size-4 text-ts-text-disabled shrink-0 mt-0.5; }
  .ts-pricing-card__cta     { @apply mt-8; }

  .ts-index-tabs__list     { @apply flex flex-wrap gap-2 mb-10; }
  .ts-index-tabs__tab      { @apply px-5 py-2.5 rounded-md text-lg uppercase font-display text-ts-text-secondary bg-ts-surface-secondary border border-ts-border transition-colors duration-200 hover:bg-ts-surface-active cursor-pointer; }
  .ts-index-tabs__tab--active { @apply bg-ts-primary text-white border-ts-primary hover:bg-ts-primary-dark; }

  .ts-cta                 { @apply py-16 sm:py-24; }
  .ts-cta--centered       { @apply mx-auto max-w-3xl text-center; }
  .ts-cta--split          { @apply lg:flex lg:items-center lg:justify-between; }
  .ts-cta__eyebrow        { @apply text-base font-semibold leading-7 text-ts-primary; }
  .ts-cta__title          { @apply text-2xl font-bold tracking-tight text-ts-text sm:text-3xl lg:text-4xl; }
  .ts-cta__title--xl      { @apply mt-2 text-3xl font-bold tracking-tight text-ts-text sm:text-5xl lg:text-6xl; }
  .ts-cta__text           { @apply mx-auto mt-4 max-w-xl text-base sm:text-lg leading-relaxed text-ts-text-secondary; }
  .ts-cta__actions        { @apply mt-8 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-x-6; }
  .ts-cta__actions--left  { @apply mt-8 flex flex-col sm:flex-row items-center gap-4 sm:gap-x-6 lg:mt-0 lg:flex-shrink-0; }

  /* ------ Listing Page ------ */
  .ts-listing             { @apply flex flex-col lg:flex-row gap-6 mt-4; }
  .ts-listing__sidebar    { @apply w-full lg:w-64 shrink-0; }
  .ts-listing__sidebar-inner { @apply lg:sticky lg:top-20 space-y-2 border border-ts-border p-4 rounded-lg; }

  /* Filter drawer (mobile collapsible) */
  .ts-filter-toggle {
    @apply flex items-center justify-between w-full px-4 py-3
           bg-ts-bg border border-ts-border rounded-md text-sm font-medium text-ts-text-secondary
           lg:hidden;
  }
  .ts-filter-toggle__icon { @apply size-5 text-ts-text-muted transition-transform duration-200; }
  .ts-filter-drawer {
    @apply overflow-hidden lg:!max-h-none lg:!opacity-100;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
  }
  .ts-filter-drawer--open {
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.35s ease-in, opacity 0.2s ease-in;
  }
  @media (min-width: 1024px) {
    .ts-filter-drawer {
      max-height: none !important;
      opacity: 1 !important;
    }
  }
  .ts-listing__main       { @apply flex-1 min-w-0; }
  .ts-listing__search     { @apply flex space-x-2 mb-4; }
  .ts-listing__search-input {
    @apply flex-1 px-3 py-2 border border-ts-border-strong rounded-md
           focus:outline-none focus:ring focus:ring-ts-primary/30 focus:border-ts-primary text-sm transition-colors;
  }
  .ts-listing__meta       { @apply text-sm text-ts-text-muted mb-3; }
  .ts-listing__grid       { @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 sm:gap-6; }

  /* ------ Detail Page ------ */
  .ts-detail              { @apply grid grid-cols-1 lg:grid-cols-3 gap-8; }
  .ts-detail__main        { @apply lg:col-span-2 space-y-6; }
  .ts-detail__sidebar     { @apply space-y-6; }
  .ts-detail-section      { @apply bg-ts-bg rounded-lg border border-ts-border shadow-sm overflow-hidden p-6; }
  .ts-detail-section__title { @apply text-lg font-semibold text-ts-text mb-3; }
  .ts-detail-label        { @apply text-ts-text-muted text-xs uppercase tracking-wide mb-1; }
  .ts-detail-inline       { @apply flex items-center gap-4; }
  .ts-detail-inline__img  { @apply w-16 h-16 rounded-md object-cover; }
  .ts-detail-inline__avatar {
    @apply w-14 h-14 rounded-full object-cover ring-2 ring-ts-border transition;
  }
  .group:hover .ts-detail-inline__avatar { @apply ring-ts-accent; }
  .ts-detail-inline__name { @apply font-semibold text-ts-text transition; }
  .group:hover .ts-detail-inline__name   { @apply text-ts-primary; }

  /* ------ Booking ------ */
  .ts-booking              { @apply bg-ts-bg shadow-sm border border-ts-border rounded-lg overflow-hidden; }
  .ts-booking__banner      { @apply text-ts-text-inverse px-6 py-4; }
  .ts-booking__banner-inner { @apply flex items-center justify-between; }
  .ts-booking__banner-title { @apply text-xl font-bold text-ts-text-inverse; }
  .ts-booking__banner-ref  { @apply text-sm opacity-80; }
  .ts-booking__body        { @apply p-6 space-y-6; }

  .ts-booking__person      { @apply flex items-center gap-4; }
  .ts-booking__person--sm  { @apply gap-3; }
  .ts-booking__avatar      { @apply w-14 h-14 rounded-full object-cover; }
  .ts-booking__avatar--sm  { @apply w-10 h-10; }
  .ts-booking__avatar-placeholder {
    @apply w-14 h-14 rounded-full bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center;
  }
  .ts-booking__avatar-placeholder span { @apply text-ts-text-inverse text-lg font-bold; }
  .ts-booking__person-name { @apply font-semibold text-base; }
  .ts-booking__person-role { @apply text-ts-text-muted text-sm; }

  .ts-booking__grid        { @apply grid grid-cols-2 gap-4; }
  .ts-booking__detail      { @apply bg-ts-surface rounded-md p-4; }
  .ts-booking__detail-label { @apply text-sm text-ts-text-muted; }
  .ts-booking__detail-value { @apply font-semibold; }
  .ts-booking__detail-value--lg { @apply font-semibold text-lg; }

  .ts-booking__section     { @apply border-t border-ts-border pt-4; }
  .ts-booking__section-title { @apply font-semibold text-ts-text mb-2; }

  .ts-booking__cancel-box  { @apply bg-red-50 border border-red-200 rounded-md p-4; }
  .ts-booking__cancel-label { @apply text-sm text-ts-danger font-medium; }
  .ts-booking__cancel-text { @apply text-red-800; }

  .ts-booking__actions     { @apply border-t border-ts-border pt-4 flex flex-wrap gap-3; }

  /* ------ Admin Panel ------ */
  /* ------ Bulk Actions Bar ------ */
  .ts-bulk-bar {
    @apply inline-flex items-center gap-3 bg-ts-bg shadow-sm rounded-md px-4 py-2 mb-4 border border-ts-border;
  }

  .ts-admin-panel          { @apply bg-ts-bg shadow-sm border border-ts-border rounded-lg p-6; }
  .ts-admin-panel__title   { @apply text-lg font-semibold text-ts-text mb-4; }
  .ts-admin-panel__icon    { @apply size-5 text-ts-primary mr-2; }

  /* ------ Admin Detail Row (key-value pair) ------ */
  .ts-detail-row           { @apply flex justify-between border-b border-ts-border pb-2; }
  .ts-detail-row:last-child { @apply border-b-0; }
  .ts-detail-row__label    { @apply text-ts-text-secondary font-medium; }
  .ts-detail-row__value    { @apply text-ts-text; }

  /* ------ Admin Info Row (icon + label/value) ------ */
  .ts-info-row             { @apply flex items-start; }
  .ts-info-row__icon       { @apply size-5 text-ts-text-muted mr-2 mt-0.5; }
  .ts-info-row__label      { @apply text-ts-text-secondary font-medium; }
  .ts-info-row__value      { @apply text-ts-text; }

  /* ------ Admin Activity Item ------ */
  .ts-activity             { @apply flex items-start p-3 bg-ts-surface rounded-md hover:shadow-sm transition; }
  .ts-activity__icon       { @apply flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center mr-3; }
  .ts-activity__title      { @apply font-medium text-ts-text; }
  .ts-activity__time       { @apply text-xs text-ts-text-muted mt-1; }

  /* ------ Admin Social Row ------ */
  .ts-social-row           { @apply flex items-center p-2 bg-ts-surface rounded-md; }
  .ts-social-row__avatar   { @apply w-8 h-8 rounded-full object-cover mr-2; }
  .ts-social-row__placeholder {
    @apply w-8 h-8 rounded-full flex items-center justify-center mr-2;
  }
  .ts-social-row__placeholder span { @apply text-ts-text-inverse font-semibold text-xs; }
  .ts-social-row__name     { @apply text-sm font-medium text-ts-text; }

  /* ------ User Selector ------ */
  .ts-user-selector          { @apply relative; }
  .ts-user-selector__dropdown {
    @apply absolute z-20 mt-1 w-full bg-ts-bg rounded-lg shadow-lg border border-ts-border
           max-h-64 overflow-y-auto;
  }
  .ts-user-selector__result {
    @apply flex items-center gap-3 w-full px-4 py-2.5 text-left
           hover:bg-ts-surface transition cursor-pointer;
  }
  .ts-user-selector__chosen {
    @apply flex items-center gap-3 p-3 bg-ts-surface rounded-md border border-ts-border;
  }

  /* ------ Form: checkbox card modifier ------ */
  .ts-form-check--card {
    @apply p-2 rounded-md border border-ts-border hover:border-ts-accent transition cursor-pointer;
  }

  /* ------ Form: file input ------ */
  .ts-form-file {
    @apply block w-full text-sm text-ts-text-muted
           file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0
           file:bg-ts-primary-light file:text-ts-primary-dark hover:file:bg-ts-primary/10;
  }

  /* ------ Gallery Thumb ------ */
  .ts-gallery-thumb        { @apply relative; }
  .ts-gallery-thumb__img   { @apply h-20 w-full object-cover rounded; }
  .ts-gallery-thumb__delete {
    @apply absolute top-1 right-1 bg-red-600 text-white text-xs px-1 rounded
           opacity-0 transition;
  }
  .group:hover .ts-gallery-thumb__delete { @apply opacity-100; }

  /* ------ Inline Gallery (horizontal scroll + fullscreen) ------ */
  .ts-inline-gallery {
    @apply relative my-6;
  }
  .ts-inline-gallery__track {
    @apply flex gap-3 overflow-x-auto scroll-smooth pb-2;
    scrollbar-width: thin;
    scrollbar-color: theme('colors.gray.300') transparent;
  }
  .ts-inline-gallery__track::-webkit-scrollbar { height: 6px; }
  .ts-inline-gallery__track::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
  }
  .ts-inline-gallery__slide {
    @apply flex-shrink-0;
  }
  .ts-inline-gallery__img {
    @apply h-48 w-auto rounded-lg object-cover cursor-pointer
           transition hover:opacity-90 hover:shadow-lg;
  }
  .ts-inline-gallery__arrow {
    @apply absolute top-1/2 -translate-y-1/2 z-10
           bg-white/80 backdrop-blur-sm rounded-full p-1.5 shadow
           text-gray-700 hover:bg-white hover:text-gray-900 transition;
  }
  .ts-inline-gallery__arrow--left  { @apply left-2;  }
  .ts-inline-gallery__arrow--right { @apply right-2; }

  /* Fullscreen overlay */
  .ts-inline-gallery__fullscreen {
    @apply fixed inset-0 z-50 flex items-center justify-center
           bg-black/80 backdrop-blur-sm;
  }
  .ts-inline-gallery__fullscreen-close {
    @apply absolute top-4 right-4 text-white hover:text-gray-300 transition z-10;
  }
  .ts-inline-gallery__fullscreen-img {
    @apply max-h-[90vh] max-w-[90vw] object-contain rounded-lg shadow-2xl;
  }
  .ts-inline-gallery__fullscreen-arrow {
    @apply absolute top-1/2 -translate-y-1/2 text-white/70 hover:text-white
           transition p-2;
  }
  .ts-inline-gallery__fullscreen-arrow--left  { @apply left-4;  }
  .ts-inline-gallery__fullscreen-arrow--right { @apply right-4; }
  .ts-inline-gallery__fullscreen-counter {
    @apply absolute bottom-6 left-1/2 -translate-x-1/2
           text-white/80 text-sm font-medium;
  }

  /* ------ User Cell (table avatar + name row) ------ */
  .ts-user-cell              { @apply flex items-center gap-3; }
  .ts-user-cell__avatar      { @apply w-10 h-10 rounded-full object-cover flex-shrink-0; }
  .ts-user-cell__placeholder {
    @apply w-10 h-10 rounded-full bg-ts-surface-active flex items-center justify-center flex-shrink-0;
  }
  .ts-user-cell__placeholder span { @apply text-ts-text-muted text-sm font-medium; }
  .ts-user-cell__name        { @apply font-medium text-ts-text; }
  .ts-user-cell__email       { @apply text-xs text-ts-text-muted; }

  /* ------ Cookie Consent Banner ------ */
  .ts-cookie-banner {
    @apply fixed bottom-0 left-0 right-0 z-50 bg-ts-bg border-t border-ts-border shadow-lg p-4;
  }
  .ts-cookie-banner__inner {
    @apply max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4;
  }
  .ts-cookie-banner__text {
    @apply flex-1;
  }
  .ts-cookie-banner__title {
    @apply font-semibold text-ts-text text-sm mb-1;
  }
  .ts-cookie-banner__description {
    @apply text-sm text-ts-text-secondary;
  }
  .ts-cookie-banner__actions {
    @apply flex flex-wrap gap-2 shrink-0;
  }

  /* ------ Cookie Consent Modal ------ */
  .ts-cookie-modal {
    @apply fixed inset-0 z-50 items-center justify-center;
  }
  .ts-cookie-modal__overlay {
    @apply fixed inset-0 bg-black bg-opacity-50;
  }
  .ts-cookie-modal__dialog {
    @apply relative bg-white rounded-lg shadow-xl max-w-md w-full mx-4 z-10;
  }
  .ts-cookie-modal__header {
    @apply flex items-center justify-between px-6 py-4 border-b border-ts-border;
  }
  .ts-cookie-modal__title {
    @apply text-lg font-semibold text-ts-text;
  }
  .ts-cookie-modal__body {
    @apply px-6 py-4 space-y-4 max-h-80 overflow-y-auto;
  }
  .ts-cookie-modal__footer {
    @apply flex justify-end px-6 py-4 border-t border-ts-border;
  }
  .ts-cookie-modal__category {
    @apply border border-ts-border rounded-md p-3;
  }
  .ts-cookie-modal__category-header {
    @apply flex items-start justify-between gap-4;
  }
  .ts-cookie-modal__category-name {
    @apply font-medium text-sm text-ts-text;
  }
  .ts-cookie-modal__category-desc {
    @apply text-xs text-ts-text-muted mt-1;
  }
  .ts-cookie-modal__toggle {
    @apply shrink-0 pt-0.5;
  }
  .ts-cookie-modal__toggle--locked {
    @apply opacity-60;
  }
  .ts-cookie-modal__checkbox {
    @apply h-5 w-5 rounded border-ts-border-strong text-ts-primary focus:ring-ts-primary;
  }

  /* ------ Dashboard ------ */
  .ts-dashboard                    { @apply space-y-6; }
  .ts-dashboard__top               { @apply grid grid-cols-1 md:grid-cols-2 gap-6; }
  .ts-dashboard__section           { @apply bg-ts-bg rounded-lg border border-ts-border shadow-sm p-6; }
  .ts-dashboard__section-title     { @apply text-lg font-display text-ts-text mb-4 flex items-center gap-2; }
  .ts-dashboard__section-subtitle  { @apply text-sm text-ts-text-muted mb-4; }
  .ts-dashboard__quick-links       { @apply flex flex-wrap gap-2 mt-4; }
  .ts-dashboard__stat-grid         { @apply grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4; }
  .ts-dashboard__location-group    { @apply mb-4; }
  .ts-dashboard__location-group-title { @apply text-sm font-medium text-ts-text-secondary mb-2; }
  .ts-dashboard__location-row      { @apply flex items-center justify-between py-2 border-b border-ts-border-subtle last:border-0; }
  .ts-dashboard__location-name     { @apply font-medium text-ts-text; }
  .ts-dashboard__location-meta     { @apply flex items-center gap-2; }
  .ts-dashboard__empty             { @apply bg-ts-surface border border-ts-border rounded-md p-6 text-center text-ts-text-muted; }
  .ts-dashboard__account-header    { @apply flex items-center gap-4 mb-4; }
  .ts-dashboard__account-avatar    { @apply w-16 h-16 rounded-full object-cover border-2 border-ts-border; }
  .ts-dashboard__account-avatar-placeholder {
    @apply w-16 h-16 rounded-full bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center border-2 border-ts-bg shadow;
  }
  .ts-dashboard__account-avatar-placeholder span { @apply text-ts-text-inverse text-xl font-bold; }
  .ts-dashboard__account-info      { @apply flex-1; }
  .ts-dashboard__account-name      { @apply text-lg font-bold text-ts-text; }
  .ts-dashboard__account-email     { @apply text-sm text-ts-text-muted; }
  .ts-dashboard__account-badges    { @apply flex flex-wrap gap-1.5 mt-2; }
  .ts-dashboard__meta-grid         { @apply grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4 text-sm; }
  .ts-dashboard__meta-item         { @apply flex items-center gap-2 text-ts-text-secondary; }
  .ts-dashboard__meta-label        { @apply text-ts-text-muted; }
  .ts-dashboard__pro-stats         { @apply grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4; }
  .ts-dashboard__pro-stat          { @apply text-center p-3 bg-ts-surface rounded-md; }
  .ts-dashboard__pro-stat-value    { @apply text-xl font-bold text-ts-text; }
  .ts-dashboard__pro-stat-label    { @apply text-xs text-ts-text-muted mt-1; }

  /* ------ Pipeline / CRM ------ */
  .ts-pipeline                        { @apply overflow-x-auto pb-4; }
  .ts-pipeline__columns               { @apply flex gap-4 min-w-max; }
  .ts-pipeline__column                { @apply w-64 flex-shrink-0 bg-ts-surface rounded-lg border border-ts-border; }
  .ts-pipeline__column-header         { @apply px-3 py-2.5 border-b border-ts-border bg-ts-bg rounded-t-lg; }
  .ts-pipeline__column-title          { @apply text-sm font-semibold text-ts-text-secondary flex items-center; }
  .ts-pipeline__column-body           { @apply p-2 space-y-2 min-h-[120px] transition-colors duration-150; }
  .ts-pipeline__column-body--dragover { @apply bg-ts-primary-light border-2 border-dashed border-ts-accent rounded-b-lg; }
  .ts-pipeline__card {
    @apply bg-ts-bg rounded-md border border-ts-border p-3 shadow-sm
           cursor-grab hover:shadow-md transition;
  }
  .ts-pipeline__card--dragging        { @apply opacity-50 rotate-2 shadow-lg; }
  .ts-pipeline__card--lost            { @apply opacity-70 cursor-default; }
  .ts-pipeline__card-header           { @apply flex items-center justify-between mb-1; }
  .ts-pipeline__card-name             { @apply text-sm font-medium text-ts-text; }
  .ts-pipeline__card-source           { @apply text-[11px] text-ts-text-muted; }
  .ts-pipeline__card-date             { @apply text-[11px] text-ts-text-muted mt-1; }
  .ts-pipeline__card-link             { @apply text-[11px] text-ts-primary hover:text-ts-primary-dark mt-1 inline-block; }
  .ts-pipeline__lost                  { @apply border border-ts-border rounded-md p-4 bg-ts-surface; }
  .ts-pipeline__lost-title            { @apply text-sm font-medium text-ts-text-secondary cursor-pointer; }
  .ts-pipeline__lost-grid             { @apply grid grid-cols-2 md:grid-cols-4 gap-2; }

  /* ------ Featured / Sponsored ------ */
  .ts-featured-section__title {
    @apply text-sm font-semibold uppercase tracking-wide text-amber-600 mb-3 flex items-center gap-1.5;
  }
  .ts-featured-badge {
    @apply absolute top-3 left-3 z-10 inline-flex items-center gap-1
           bg-amber-500 text-white text-xs font-bold uppercase tracking-wide
           px-2 py-0.5 rounded-full shadow-sm;
  }

  /* ------ Email Protect ------ */
  .ts-email-reveal {
    @apply inline-flex items-center gap-1 text-sm text-ts-primary
           border border-ts-primary/30 rounded px-2 py-0.5
           hover:bg-ts-primary-light cursor-pointer transition;
  }

  /* ------ Chat ------ */
  .ts-chat-layout            { @apply flex; height: calc(100vh - 75px); }
  .ts-chat-sidebar           { @apply w-full lg:w-80 border-r border-ts-border flex flex-col bg-ts-bg overflow-y-auto flex-shrink-0; }
  .ts-chat-main              { @apply flex-1 flex flex-col bg-ts-surface min-w-0; }
  .ts-chat-header            { @apply flex items-center gap-3 px-4 py-3 bg-ts-bg border-b border-ts-border flex-shrink-0; }
  .ts-chat-messages          { @apply flex-1 overflow-y-auto px-4 py-4 space-y-1; }
  .ts-chat-input             { @apply flex items-center gap-2 px-4 py-3 bg-ts-bg border-t border-ts-border flex-shrink-0; }
  .ts-chat-input__field      { @apply flex-1 border-ts-border-strong rounded-full px-4 py-2 text-sm focus:ring-ts-primary focus:border-ts-primary; }
  .ts-chat-input__send       { @apply bg-ts-primary text-white rounded-full p-2 hover:bg-ts-primary-dark transition cursor-pointer; }

  /* Contact list items */
  .ts-chat-contact           { @apply flex items-center gap-3 px-4 py-3 hover:bg-ts-surface border-b border-ts-border-subtle no-underline transition; }
  .ts-chat-contact--active   { @apply bg-ts-primary-light hover:bg-ts-primary-light; }
  .ts-chat-contact__avatar   { @apply w-12 h-12 rounded-full object-cover flex-shrink-0; }
  .ts-chat-contact__avatar-placeholder {
    @apply w-12 h-12 rounded-full bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center flex-shrink-0;
  }
  .ts-chat-contact__avatar-placeholder span { @apply text-white text-sm font-bold; }
  .ts-chat-contact__info     { @apply flex-1 min-w-0; }
  .ts-chat-contact__header   { @apply flex items-center justify-between; }
  .ts-chat-contact__name     { @apply text-sm font-semibold text-ts-text; }
  .ts-chat-contact__time     { @apply text-xs text-ts-text-muted flex-shrink-0 ml-2; }
  .ts-chat-contact__preview  { @apply flex items-center justify-between mt-0.5; }
  .ts-chat-contact__text     { @apply text-sm text-ts-text-muted truncate; }
  .ts-chat-contact__badge    {
    @apply ml-2 px-1.5 py-0.5 rounded-full text-xs font-bold leading-none
           bg-ts-primary text-white flex-shrink-0;
  }

  /* Message bubbles */
  .ts-chat-bubble            { @apply max-w-[75%] w-fit rounded-2xl px-4 py-2; }
  .ts-chat-bubble--mine      { @apply ml-auto bg-ts-primary text-white rounded-br-sm; }
  .ts-chat-bubble--theirs    { @apply mr-auto bg-ts-bg text-ts-text rounded-bl-sm shadow-sm; }
  .ts-chat-bubble--system    { @apply mx-auto bg-transparent text-ts-text-muted text-center text-xs rounded-lg max-w-[90%] shadow-none; }
  .ts-chat-bubble__body      { @apply text-sm leading-relaxed break-words; }
  .ts-chat-bubble__meta      { @apply flex items-center justify-end gap-1 mt-0.5; }
  .ts-chat-bubble__time      { @apply text-[10px] opacity-70; }
  .ts-chat-bubble__status    { @apply inline-flex; }

  /* ------ Skeleton Loading ------ */
  .ts-skeleton {
    @apply rounded-md bg-ts-surface-active animate-shimmer;
    background-image: linear-gradient(90deg, rgb(var(--ts-surface-active)) 0%, rgb(var(--ts-surface-secondary)) 40%, rgb(var(--ts-surface-active)) 80%);
    background-size: 800px 100%;
  }
  .ts-skeleton--text   { @apply h-4 w-3/4; }
  .ts-skeleton--title  { @apply h-6 w-1/2; }
  .ts-skeleton--avatar { @apply h-12 w-12 rounded-full; }
  .ts-skeleton--card   { @apply h-64 w-full; }
  .ts-skeleton--img    { @apply h-48 w-full; }

  /* ------ Fade In (for lazy-loaded sections) ------ */
  .ts-fade-in { @apply animate-fade-in-up; }

  /* ------ Empty State ------ */
  .ts-empty-state {
    @apply text-center py-12 px-6;
  }
  .ts-empty-state__icon {
    @apply mx-auto w-16 h-16 text-ts-text-disabled mb-4;
  }
  .ts-empty-state__title {
    @apply text-lg font-semibold text-ts-text mb-2;
  }
  .ts-empty-state__text {
    @apply text-sm text-ts-text-muted max-w-sm mx-auto mb-6;
  }
  .ts-empty-state__action {
    @apply inline-flex;
  }

  /* ------ Horizontal Scroll Track ------ */
  .ts-scroll-wrap { @apply relative; }
  .ts-scroll-track {
    @apply flex gap-4 overflow-x-auto scroll-smooth;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
  }
  .ts-scroll-track::-webkit-scrollbar { display: none; } /* Chrome/Safari */

  .ts-scroll-arrow {
    @apply absolute top-1/2 -translate-y-1/2 z-10
           w-10 h-10 flex items-center justify-center
           bg-ts-bg border border-ts-border rounded-full shadow-md
           text-ts-text-secondary hover:text-ts-text hover:shadow-lg
           transition-all duration-150 cursor-pointer;
  }
  .ts-scroll-arrow--left  { @apply -left-4; }
  .ts-scroll-arrow--right { @apply -right-4; }
  .ts-scroll-arrow--hidden { @apply opacity-0 pointer-events-none; }

  /* ------ Location Card (BEM) ------ */
  .ts-location-card {
    @apply w-full bg-ts-bg shadow-sm rounded-lg overflow-hidden cursor-pointer
           flex flex-col border border-ts-border-subtle
           transition-all duration-200 hover:-translate-y-1 hover:shadow-md;
  }
  .ts-scroll-track .ts-location-card {
    @apply w-72 shrink-0;
  }
  .ts-scroll-track .ts-pro-card {
    @apply w-72 shrink-0;
  }
  .ts-scroll-track .ts-article-card {
    @apply w-60 shrink-0;
  }
  .ts-location-card--featured { @apply ring-2 ring-amber-300; }
  .ts-location-card__image    { @apply relative h-48 bg-ts-surface-secondary; }
  .ts-location-card__image img { @apply w-full h-full object-cover; }
  .ts-location-card__body     { @apply px-5 py-4 flex flex-col flex-1; }
  .ts-location-card__title    { @apply text-xl font-display uppercase; }
  .ts-location-card__meta     { @apply text-ts-primary font-sans text-sm mt-1; }
  .ts-location-card__rating   { @apply flex items-center mt-auto pt-4; }

  /* ------ Professional Card (BEM) ------ */
  .ts-pro-card {
    @apply w-full bg-white shadow-sm rounded-xl overflow-hidden
           flex flex-col border border-gray-100
           transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
  }
  .ts-pro-card__cover         { @apply h-24 bg-gradient-to-r from-ts-primary-light to-ts-surface-secondary; }
  .ts-pro-card__avatar-wrap   { @apply flex justify-center -mt-[70px] relative; }
  .ts-pro-card__avatar        { @apply w-[130px] h-[130px] object-cover rounded-full border-4 border-white shadow-md; }
  .ts-pro-card__avatar-placeholder {
    @apply w-[130px] h-[130px] rounded-full border-4 border-white shadow-md
           bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center;
  }
  .ts-pro-card__body          { @apply text-center px-5 py-4 flex-grow; }
  .ts-pro-card__name          { @apply text-xl font-bold text-ts-text font-display; }
  .ts-pro-card__headline      { @apply text-ts-text-muted text-sm mt-1; }
  .ts-pro-card__stats         { @apply px-5 py-3 border-t border-ts-border-subtle flex gap-4 justify-center text-center; }
  .ts-pro-card__stat-value    { @apply text-ts-text font-display text-2xl; }
  .ts-pro-card__stat-label    { @apply text-ts-text-muted text-xs; }
  .ts-pro-card__action        { @apply px-5 py-4 mt-auto; }
  .ts-pro-card__btn {
    @apply block w-full text-center border border-ts-primary text-ts-primary
           px-4 py-2 rounded-lg font-semibold
           hover:bg-ts-primary hover:text-white transition-all duration-200;
  }

  /* ------ Event Card (BEM) ------ */
  .ts-event-card {
    @apply bg-ts-bg rounded-lg border border-ts-border-subtle shadow-sm
           flex flex-col overflow-hidden
           transition-all duration-300 hover:-translate-y-1 hover:shadow-lg no-underline text-inherit;
  }
  .ts-event-card__image       { @apply relative h-40 bg-gradient-to-br from-ts-surface to-ts-surface-secondary; }
  .ts-event-card__image img   { @apply absolute inset-0 w-full h-full object-cover; }
  .ts-event-card__body        { @apply p-5 flex flex-col flex-1; }
  .ts-event-card__title       { @apply text-lg font-semibold text-ts-text mb-2; }
  .ts-event-card__info        { @apply space-y-1.5 text-sm text-ts-text-muted; }
  .ts-event-card__link        { @apply mt-auto pt-4 text-sm font-medium text-ts-primary; }

  /* ------ Auth Pages (login / register / edit account) ------ */
  .ts-auth {
    @apply min-h-screen flex items-center justify-center py-12 px-4;
    background: linear-gradient(135deg, rgb(var(--ts-primary-light)) 0%, rgb(var(--ts-bg)) 50%, rgb(var(--ts-surface)) 100%);
  }
  .ts-auth__container     { @apply w-full max-w-md; }
  .ts-auth__header        { @apply text-center mb-8; }
  .ts-auth__subtitle      { @apply mt-2 text-sm text-ts-text-muted; }
  .ts-auth__card          { @apply bg-ts-bg border border-ts-border rounded-lg shadow-sm p-8; }
  .ts-auth__title         { @apply text-xl font-bold text-ts-text mb-6; }
  .ts-auth__field         { @apply mb-5; }
  .ts-auth__field-hint    { @apply text-xs text-ts-text-muted mt-1; }
  .ts-auth__field-row     { @apply flex justify-between items-center; }
  .ts-auth__link          { @apply text-xs text-ts-primary hover:text-ts-primary-dark transition-colors; }
  .ts-auth__submit        { @apply ts-btn ts-btn--primary w-full py-2.5 mt-2; }
  .ts-auth__divider       { @apply flex items-center gap-3 my-6; }
  .ts-auth__divider-line  { @apply flex-1 h-px bg-ts-border; }
  .ts-auth__divider-text  { @apply text-xs text-ts-text-muted uppercase tracking-wider font-medium; }
  .ts-auth__footer        { @apply text-center mt-6 text-sm text-ts-text-muted; }
  .ts-auth__footer a      { @apply font-semibold text-ts-primary hover:text-ts-primary-dark transition-colors; }
  .ts-auth__danger        { @apply mt-10 pt-6 border-t border-ts-border; }
  .ts-auth__danger-title  { @apply text-sm font-semibold text-ts-text mb-2; }
  .ts-auth__danger-text   { @apply text-sm text-ts-text-muted mb-3; }
}

/* ================================================================
   REDUCED MOTION — respect user preference
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ts-skeleton {
    animation: none !important;
    background-image: none !important;
  }
}

/* Admin rich-text editor height */
#admin-main trix-editor {
  min-height: 20em;
}

/* Trix editor heading buttons */
.trix-button--heading2,
.trix-button--heading3,
.trix-button--heading4 {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  width: 2.5em;
}

/* Trix editor heading styles */
trix-editor h1 { font-size: 1.75em; font-weight: 700; line-height: 1.3; margin: 0.5em 0; }
trix-editor h2 { font-size: 1.4em; font-weight: 700; line-height: 1.3; margin: 0.4em 0; }
trix-editor h3 { font-size: 1.15em; font-weight: 600; line-height: 1.3; margin: 0.3em 0; }
trix-editor h4 { font-size: 1em; font-weight: 600; line-height: 1.3; margin: 0.25em 0; }

/* Trix editor list bullets */
trix-editor ul {
  list-style: disc;
  padding-left: 1.5em;
}
trix-editor ol {
  list-style: decimal;
  padding-left: 1.5em;
}
trix-editor ul li,
trix-editor ol li {
  margin-left: 0;
}

/* Leaflet override */
.leaflet-attribution-flag {
  display: none;
}

/* Leaflet MarkerCluster — uses brand teal */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: rgb(var(--ts-primary) / 0.3);
  border-radius: 50%;
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;
  text-align: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background-color: rgb(var(--ts-primary) / 0.8);
  line-height: 30px;
}

.marker-cluster-medium {
  background-color: rgb(var(--ts-primary) / 0.4);
}

.marker-cluster-medium div {
  width: 36px;
  height: 36px;
  margin-left: 2px;
  margin-top: 2px;
  line-height: 36px;
  font-size: 14px;
  background-color: rgb(var(--ts-primary-dark) / 0.85);
}

.marker-cluster-large {
  background-color: rgb(var(--ts-primary-dark) / 0.45);
}

.marker-cluster-large div {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  background-color: rgb(var(--ts-primary-dark) / 0.9);
}

.marker-cluster {
  background-clip: padding-box;
}

.custom-map-marker {
  background: none !important;
  border: none !important;
}

/* ================================================================
   TOAST ANIMATIONS — outside @layer so keyframes are always emitted
   ================================================================ */
@keyframes ts-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ts-toast-out {
    0%   { opacity: 1; }
    60%  { opacity: 0.7; }
    100% { opacity: 0; }
}
.ts-toast--animate-in  { animation: ts-toast-in 0.5s ease-out forwards; }
.ts-toast--animate-out { animation: ts-toast-out 0.5s ease-in forwards !important; }