/* ============================================================
   KINDAR UI — Design System v1.0
   kindar.app · March 2026
   
   USAGE FOR QODER:
   Import this file in your component or page:
   @import 'kindar-ui.css';  (or link in HTML)
   
   Then use BEM-style class names as documented.
   All tokens are CSS custom properties (--kd-*)
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* --- BRAND COLORS --- */
  --kd-pink:          #E91E8C;
  --kd-pink-light:    #F06292;
  --kd-pink-pale:     #FCE4F0;
  --kd-purple:        #7B2FBE;
  --kd-purple-light:  #9C4FD6;
  --kd-purple-pale:   #EDE7F6;

  /* --- GRADIENT --- */
  --kd-grad:          linear-gradient(135deg, #E91E8C 0%, #7B2FBE 100%);
  --kd-grad-soft:     linear-gradient(135deg, #F06292 0%, #9C4FD6 100%);
  --kd-grad-pale:     linear-gradient(135deg, #FCE4F0 0%, #EDE7F6 100%);

  /* --- NEUTRALS LIGHT THEME --- */
  --kd-bg:            #FFFAF9;
  --kd-surface:       #FFFFFF;
  --kd-surface-2:     #F7F2F5;
  --kd-border:        #EDE0E8;
  --kd-border-strong: #D4B8CC;
  --kd-text:          #1A0F1A;
  --kd-text-2:        #5C4A58;
  --kd-text-3:        #9B8494;

  /* --- DARK THEME OVERRIDES (applied via .kd-dark or [data-theme="dark"]) --- */
  --kd-bg-dark:       #0D0A12;
  --kd-surface-dark:  #13101C;
  --kd-surface-2-dark:#1C1728;
  --kd-border-dark:   rgba(255,255,255,0.08);
  --kd-text-dark:     #F0ECF8;
  --kd-text-2-dark:   rgba(240,236,248,0.6);
  --kd-text-3-dark:   rgba(240,236,248,0.35);

  /* --- SEMANTIC --- */
  --kd-success:       #22C55E;
  --kd-warning:       #F59E0B;
  --kd-error:         #EF4444;
  --kd-info:          #3B82F6;

  /* --- SPACING (8pt grid) --- */
  --kd-space-1:       4px;
  --kd-space-2:       8px;
  --kd-space-3:       12px;
  --kd-space-4:       16px;
  --kd-space-5:       20px;
  --kd-space-6:       24px;
  --kd-space-8:       32px;
  --kd-space-10:      40px;
  --kd-space-12:      48px;
  --kd-space-16:      64px;
  --kd-space-20:      80px;

  /* --- RADIUS --- */
  --kd-radius-sm:     8px;
  --kd-radius-md:     12px;
  --kd-radius-lg:     16px;
  --kd-radius-xl:     24px;
  --kd-radius-full:   9999px;

  /* --- TYPOGRAPHY --- */
  --kd-font-sans:     'DM Sans', 'Helvetica Neue', sans-serif;
  --kd-font-mono:     'DM Mono', 'Courier New', monospace;

  --kd-text-xs:       11px;
  --kd-text-sm:       13px;
  --kd-text-md:       15px;
  --kd-text-lg:       17px;
  --kd-text-xl:       20px;
  --kd-text-2xl:      24px;
  --kd-text-3xl:      32px;
  --kd-text-4xl:      40px;
  --kd-text-5xl:      52px;

  --kd-weight-regular: 400;
  --kd-weight-medium:  500;
  --kd-weight-semibold:600;
  --kd-weight-bold:    700;

  --kd-leading-tight:  1.2;
  --kd-leading-snug:   1.4;
  --kd-leading-normal: 1.6;
  --kd-leading-relaxed:1.8;

  /* --- SHADOWS --- */
  --kd-shadow-sm:  0 1px 3px rgba(123,47,190,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --kd-shadow-md:  0 4px 16px rgba(123,47,190,0.12), 0 2px 4px rgba(0,0,0,0.06);
  --kd-shadow-lg:  0 12px 40px rgba(123,47,190,0.16), 0 4px 8px rgba(0,0,0,0.08);
  --kd-shadow-glow:0 0 32px rgba(233,30,140,0.25);

  /* --- ANIMATION --- */
  --kd-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --kd-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --kd-duration-fast:  120ms;
  --kd-duration-base:  200ms;
  --kd-duration-slow:  350ms;

  /* --- Z-INDEX --- */
  --kd-z-base:     0;
  --kd-z-raised:   10;
  --kd-z-dropdown: 100;
  --kd-z-sticky:   200;
  --kd-z-modal:    500;
  --kd-z-toast:    900;
}

/* Dark theme class */
.kd-dark, [data-theme="dark"] {
  --kd-bg:       var(--kd-bg-dark);
  --kd-surface:  var(--kd-surface-dark);
  --kd-surface-2:var(--kd-surface-2-dark);
  --kd-border:   var(--kd-border-dark);
  --kd-text:     var(--kd-text-dark);
  --kd-text-2:   var(--kd-text-2-dark);
  --kd-text-3:   var(--kd-text-3-dark);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

.kd-root {
  font-family: var(--kd-font-sans);
  font-size: var(--kd-text-md);
  line-height: var(--kd-leading-normal);
  color: var(--kd-text);
  background: var(--kd-bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

.kd-display {
  font-size: var(--kd-text-5xl);
  font-weight: var(--kd-weight-bold);
  line-height: var(--kd-leading-tight);
  letter-spacing: -2px;
  background: var(--kd-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kd-h1 {
  font-size: var(--kd-text-4xl);
  font-weight: var(--kd-weight-bold);
  line-height: var(--kd-leading-tight);
  letter-spacing: -1.5px;
  color: var(--kd-text);
}

.kd-h2 {
  font-size: var(--kd-text-3xl);
  font-weight: var(--kd-weight-bold);
  line-height: var(--kd-leading-snug);
  letter-spacing: -1px;
  color: var(--kd-text);
}

.kd-h3 {
  font-size: var(--kd-text-2xl);
  font-weight: var(--kd-weight-semibold);
  line-height: var(--kd-leading-snug);
  letter-spacing: -0.5px;
  color: var(--kd-text);
}

.kd-h4 {
  font-size: var(--kd-text-xl);
  font-weight: var(--kd-weight-semibold);
  line-height: var(--kd-leading-snug);
  color: var(--kd-text);
}

.kd-body-lg  { font-size: var(--kd-text-lg);  line-height: var(--kd-leading-normal); color: var(--kd-text); }
.kd-body     { font-size: var(--kd-text-md);  line-height: var(--kd-leading-normal); color: var(--kd-text); }
.kd-body-sm  { font-size: var(--kd-text-sm);  line-height: var(--kd-leading-normal); color: var(--kd-text-2); }
.kd-caption  { font-size: var(--kd-text-xs);  line-height: var(--kd-leading-snug);  color: var(--kd-text-3);
               font-family: var(--kd-font-mono); letter-spacing: 0.08em; }
.kd-label    { font-size: var(--kd-text-xs);  font-weight: var(--kd-weight-medium);
               letter-spacing: 0.12em; text-transform: uppercase;
               color: var(--kd-text-3); font-family: var(--kd-font-mono); }

.kd-text-gradient {
  background: var(--kd-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kd-text-muted  { color: var(--kd-text-2); }
.kd-text-subtle { color: var(--kd-text-3); }

/* ============================================================
   4. BUTTONS
   ============================================================ */

.kd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kd-space-2);
  font-family: var(--kd-font-sans);
  font-weight: var(--kd-weight-semibold);
  font-size: var(--kd-text-sm);
  line-height: 1;
  border: none;
  cursor: pointer;
  border-radius: var(--kd-radius-full);
  padding: 12px var(--kd-space-6);
  transition: all var(--kd-duration-base) var(--kd-ease);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

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

/* Primary */
.kd-btn--primary {
  background: var(--kd-grad);
  color: #fff;
  box-shadow: 0 4px 16px rgba(233,30,140,0.3);
}
.kd-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(233,30,140,0.4);
}
.kd-btn--primary:active:not(:disabled) { transform: translateY(0); }

/* Secondary */
.kd-btn--secondary {
  background: transparent;
  color: var(--kd-pink);
  border: 1.5px solid var(--kd-pink);
}
.kd-btn--secondary:hover:not(:disabled) {
  background: var(--kd-pink-pale);
}

/* Ghost */
.kd-btn--ghost {
  background: transparent;
  color: var(--kd-text-2);
  border: 1.5px solid var(--kd-border);
}
.kd-btn--ghost:hover:not(:disabled) {
  background: var(--kd-surface-2);
  color: var(--kd-text);
  border-color: var(--kd-border-strong);
}

/* Danger */
.kd-btn--danger {
  background: transparent;
  color: var(--kd-error);
  border: 1.5px solid var(--kd-error);
}
.kd-btn--danger:hover:not(:disabled) { background: rgba(239,68,68,0.08); }

/* Sizes */
.kd-btn--sm { font-size: var(--kd-text-xs); padding: 8px var(--kd-space-4); }
.kd-btn--lg { font-size: var(--kd-text-md); padding: 16px var(--kd-space-8); }

/* Icon only */
.kd-btn--icon { padding: 10px; border-radius: var(--kd-radius-md); }
.kd-btn--icon.kd-btn--sm { padding: 7px; }
.kd-btn--icon.kd-btn--lg { padding: 14px; }

/* ============================================================
   5. CARDS
   ============================================================ */

.kd-card {
  background: var(--kd-surface);
  border: 1px solid var(--kd-border);
  border-radius: var(--kd-radius-xl);
  padding: var(--kd-space-6);
  box-shadow: var(--kd-shadow-sm);
}

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

.kd-card--interactive {
  cursor: pointer;
  transition: all var(--kd-duration-base) var(--kd-ease);
}
.kd-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--kd-shadow-lg);
  border-color: var(--kd-pink-light);
}

.kd-card--gradient {
  background: var(--kd-grad-pale);
  border-color: var(--kd-pink-pale);
}

/* Profile card (swipe) */
.kd-profile-card {
  border-radius: var(--kd-radius-xl);
  overflow: hidden;
  box-shadow: var(--kd-shadow-lg);
  position: relative;
  aspect-ratio: 3/4;
  background: var(--kd-surface-2);
}

.kd-profile-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kd-profile-card__overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--kd-space-6);
  background: linear-gradient(to top, rgba(13,10,18,0.95) 0%, transparent 100%);
}

.kd-profile-card__name {
  font-size: var(--kd-text-2xl);
  font-weight: var(--kd-weight-bold);
  color: #fff;
  line-height: 1.2;
}

.kd-profile-card__meta {
  font-size: var(--kd-text-sm);
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
}

.kd-profile-card__tags {
  margin-top: var(--kd-space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--kd-space-2);
}

/* Like/Dislike overlays */
.kd-profile-card__like,
.kd-profile-card__nope {
  position: absolute;
  top: var(--kd-space-6);
  padding: 6px 16px;
  border-radius: var(--kd-radius-sm);
  font-weight: var(--kd-weight-bold);
  font-size: var(--kd-text-xl);
  letter-spacing: 2px;
  opacity: 0;
  transition: opacity var(--kd-duration-fast);
  border: 3px solid;
}
.kd-profile-card__like  { right: var(--kd-space-6); color: #4ADE80; border-color: #4ADE80; transform: rotate(12deg); }
.kd-profile-card__nope  { left: var(--kd-space-6);  color: #F87171; border-color: #F87171; transform: rotate(-12deg); }

/* ============================================================
   6. INPUTS & FORMS
   ============================================================ */

.kd-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--kd-space-2);
}

.kd-label-text {
  font-size: var(--kd-text-sm);
  font-weight: var(--kd-weight-medium);
  color: var(--kd-text-2);
}

.kd-input {
  font-family: var(--kd-font-sans);
  font-size: var(--kd-text-md);
  color: var(--kd-text);
  background: var(--kd-surface);
  border: 1.5px solid var(--kd-border);
  border-radius: var(--kd-radius-lg);
  padding: 12px var(--kd-space-4);
  outline: none;
  width: 100%;
  transition: border-color var(--kd-duration-fast) var(--kd-ease),
              box-shadow var(--kd-duration-fast) var(--kd-ease);
}

.kd-input::placeholder { color: var(--kd-text-3); }

.kd-input:focus {
  border-color: var(--kd-pink);
  box-shadow: 0 0 0 3px rgba(233,30,140,0.12);
}

.kd-input--error {
  border-color: var(--kd-error);
}
.kd-input--error:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}

.kd-input-hint {
  font-size: var(--kd-text-xs);
  color: var(--kd-text-3);
}
.kd-input-hint--error { color: var(--kd-error); }

/* Input with icon */
.kd-input-wrap {
  position: relative;
}
.kd-input-wrap .kd-input { padding-left: 44px; }
.kd-input-wrap__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--kd-text-3);
  display: flex;
  align-items: center;
}

/* Textarea */
.kd-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: var(--kd-leading-normal);
}

/* Select */
.kd-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B8494' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* ============================================================
   7. BADGES & TAGS
   ============================================================ */

.kd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--kd-text-xs);
  font-weight: var(--kd-weight-medium);
  padding: 3px 10px;
  border-radius: var(--kd-radius-full);
  white-space: nowrap;
}

.kd-badge--primary   { background: var(--kd-pink-pale);   color: var(--kd-pink); }
.kd-badge--purple    { background: var(--kd-purple-pale);  color: var(--kd-purple); }
.kd-badge--success   { background: rgba(34,197,94,0.12);   color: #16A34A; }
.kd-badge--warning   { background: rgba(245,158,11,0.12);  color: #D97706; }
.kd-badge--error     { background: rgba(239,68,68,0.12);   color: #DC2626; }
.kd-badge--neutral   { background: var(--kd-surface-2);    color: var(--kd-text-2);
                       border: 1px solid var(--kd-border); }

.kd-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--kd-text-xs);
  font-weight: var(--kd-weight-medium);
  padding: 5px 12px;
  border-radius: var(--kd-radius-full);
  background: var(--kd-surface-2);
  color: var(--kd-text-2);
  border: 1px solid var(--kd-border);
  cursor: default;
  transition: all var(--kd-duration-fast) var(--kd-ease);
}

.kd-tag--active, .kd-tag:hover {
  background: var(--kd-pink-pale);
  color: var(--kd-pink);
  border-color: var(--kd-pink-light);
}

/* ============================================================
   8. AVATAR
   ============================================================ */

.kd-avatar {
  border-radius: var(--kd-radius-full);
  overflow: hidden;
  background: var(--kd-grad-pale);
  border: 2px solid var(--kd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--kd-weight-bold);
  color: var(--kd-pink);
  flex-shrink: 0;
}

.kd-avatar img { width: 100%; height: 100%; object-fit: cover; }

.kd-avatar--xs  { width: 24px;  height: 24px;  font-size: 10px; }
.kd-avatar--sm  { width: 32px;  height: 32px;  font-size: 12px; }
.kd-avatar--md  { width: 40px;  height: 40px;  font-size: 14px; }
.kd-avatar--lg  { width: 56px;  height: 56px;  font-size: 18px; }
.kd-avatar--xl  { width: 80px;  height: 80px;  font-size: 24px; }
.kd-avatar--2xl { width: 112px; height: 112px; font-size: 32px; }

.kd-avatar--online { position: relative; }
.kd-avatar--online::after {
  content: '';
  position: absolute;
  bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--kd-success);
  border: 2px solid var(--kd-bg);
}

/* ============================================================
   9. NAVIGATION
   ============================================================ */

/* Bottom tab bar (mobile) */
.kd-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--kd-surface);
  border-top: 1px solid var(--kd-border);
  padding: var(--kd-space-2) 0 var(--kd-space-4);
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--kd-z-sticky);
}

.kd-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--kd-space-2) var(--kd-space-4);
  cursor: pointer;
  border-radius: var(--kd-radius-md);
  transition: all var(--kd-duration-fast) var(--kd-ease);
  color: var(--kd-text-3);
  text-decoration: none;
  font-size: var(--kd-text-xs);
  font-weight: var(--kd-weight-medium);
  min-width: 56px;
}

.kd-tabbar__item--active {
  color: var(--kd-pink);
}

.kd-tabbar__icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}

/* Center FAB tab */
.kd-tabbar__item--fab {
  width: 52px; height: 52px;
  border-radius: var(--kd-radius-full);
  background: var(--kd-grad);
  color: white;
  box-shadow: var(--kd-shadow-glow);
  margin-top: -16px;
  padding: 0;
  justify-content: center;
  font-size: 22px;
}

/* Header / Topbar (web + dashboard) */
.kd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--kd-space-8);
  height: 64px;
  background: var(--kd-surface);
  border-bottom: 1px solid var(--kd-border);
  position: sticky;
  top: 0;
  z-index: var(--kd-z-sticky);
}

.kd-header__logo {
  display: flex;
  align-items: center;
  gap: var(--kd-space-3);
  text-decoration: none;
  font-size: var(--kd-text-xl);
  font-weight: var(--kd-weight-bold);
  letter-spacing: -0.5px;
}

.kd-header__logo .kin { background: var(--kd-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.kd-header__logo .dar { color: var(--kd-purple); }

.kd-header__nav {
  display: flex;
  align-items: center;
  gap: var(--kd-space-1);
}

.kd-nav-link {
  font-size: var(--kd-text-sm);
  font-weight: var(--kd-weight-medium);
  color: var(--kd-text-2);
  text-decoration: none;
  padding: var(--kd-space-2) var(--kd-space-4);
  border-radius: var(--kd-radius-md);
  transition: all var(--kd-duration-fast) var(--kd-ease);
}
.kd-nav-link:hover    { color: var(--kd-text); background: var(--kd-surface-2); }
.kd-nav-link--active  { color: var(--kd-pink); background: var(--kd-pink-pale); }

/* Sidebar (dashboard) */
.kd-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--kd-surface);
  border-right: 1px solid var(--kd-border);
  padding: var(--kd-space-6) var(--kd-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--kd-space-1);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.kd-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--kd-space-3);
  padding: 10px var(--kd-space-3);
  border-radius: var(--kd-radius-md);
  font-size: var(--kd-text-sm);
  font-weight: var(--kd-weight-medium);
  color: var(--kd-text-2);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--kd-duration-fast) var(--kd-ease);
}

.kd-sidebar__item:hover    { color: var(--kd-text); background: var(--kd-surface-2); }
.kd-sidebar__item--active  { color: var(--kd-pink); background: var(--kd-pink-pale);
                             font-weight: var(--kd-weight-semibold); }

.kd-sidebar__section-label {
  font-size: var(--kd-text-xs);
  font-weight: var(--kd-weight-medium);
  color: var(--kd-text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--kd-font-mono);
  padding: var(--kd-space-4) var(--kd-space-3) var(--kd-space-2);
}

/* ============================================================
   10. CHAT
   ============================================================ */

.kd-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kd-chat__header {
  display: flex;
  align-items: center;
  gap: var(--kd-space-3);
  padding: var(--kd-space-4) var(--kd-space-5);
  border-bottom: 1px solid var(--kd-border);
}

.kd-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--kd-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--kd-space-3);
}

.kd-message {
  display: flex;
  flex-direction: column;
  max-width: 72%;
}

.kd-message--out { align-self: flex-end; align-items: flex-end; }
.kd-message--in  { align-self: flex-start; align-items: flex-start; }

.kd-message__bubble {
  padding: 10px 14px;
  border-radius: var(--kd-radius-lg);
  font-size: var(--kd-text-md);
  line-height: var(--kd-leading-snug);
}

.kd-message--out .kd-message__bubble {
  background: var(--kd-grad);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.kd-message--in .kd-message__bubble {
  background: var(--kd-surface-2);
  color: var(--kd-text);
  border: 1px solid var(--kd-border);
  border-bottom-left-radius: 4px;
}

.kd-message__time {
  font-size: var(--kd-text-xs);
  color: var(--kd-text-3);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kd-chat__input-area {
  padding: var(--kd-space-4) var(--kd-space-5);
  border-top: 1px solid var(--kd-border);
  display: flex;
  gap: var(--kd-space-3);
  align-items: flex-end;
}

.kd-chat__input {
  flex: 1;
  border-radius: var(--kd-radius-xl);
  resize: none;
  max-height: 120px;
}

/* ============================================================
   11. EVENT CARD
   ============================================================ */

.kd-event-card {
  border-radius: var(--kd-radius-xl);
  background: var(--kd-surface);
  border: 1px solid var(--kd-border);
  overflow: hidden;
  transition: all var(--kd-duration-base) var(--kd-ease);
  cursor: pointer;
}
.kd-event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--kd-shadow-md);
  border-color: var(--kd-pink-light);
}

.kd-event-card__map {
  height: 140px;
  background: var(--kd-grad-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.kd-event-card__body { padding: var(--kd-space-5); }

.kd-event-card__title {
  font-size: var(--kd-text-lg);
  font-weight: var(--kd-weight-semibold);
  color: var(--kd-text);
  margin-bottom: var(--kd-space-2);
}

.kd-event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kd-space-3);
  font-size: var(--kd-text-sm);
  color: var(--kd-text-2);
}

.kd-event-card__footer {
  padding: var(--kd-space-3) var(--kd-space-5);
  border-top: 1px solid var(--kd-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kd-avatar-stack {
  display: flex;
}
.kd-avatar-stack .kd-avatar {
  margin-left: -8px;
  border: 2px solid var(--kd-bg);
}
.kd-avatar-stack .kd-avatar:first-child { margin-left: 0; }

/* ============================================================
   12. MATCH NOTIFICATION / MODAL
   ============================================================ */

.kd-match-banner {
  background: var(--kd-grad);
  border-radius: var(--kd-radius-xl);
  padding: var(--kd-space-8) var(--kd-space-6);
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.kd-match-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15) 0%, transparent 60%),
              radial-gradient(circle at 70% 80%, rgba(255,255,255,0.08) 0%, transparent 50%);
}

.kd-match-banner__avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kd-space-4);
  margin-bottom: var(--kd-space-5);
  position: relative;
}

.kd-match-banner__heart {
  font-size: 28px;
  animation: kd-pulse 1.2s ease-in-out infinite;
}

.kd-match-banner__title {
  font-size: var(--kd-text-3xl);
  font-weight: var(--kd-weight-bold);
  margin-bottom: var(--kd-space-2);
  position: relative;
}

.kd-match-banner__sub {
  font-size: var(--kd-text-md);
  opacity: 0.85;
  position: relative;
  margin-bottom: var(--kd-space-6);
}

/* ============================================================
   13. ONBOARDING STEPS
   ============================================================ */

.kd-steps {
  display: flex;
  align-items: center;
  gap: var(--kd-space-2);
  justify-content: center;
}

.kd-step {
  height: 4px;
  border-radius: var(--kd-radius-full);
  background: var(--kd-border);
  transition: all var(--kd-duration-slow) var(--kd-ease);
}

.kd-step--done    { width: 24px; background: var(--kd-pink-light); }
.kd-step--active  { width: 40px; background: var(--kd-grad); }
.kd-step--pending { width: 16px; }

/* ============================================================
   14. MAP PIN & RADIUS
   ============================================================ */

.kd-map-pin {
  width: 40px; height: 40px;
  border-radius: var(--kd-radius-full) var(--kd-radius-full) var(--kd-radius-full) 0;
  background: var(--kd-grad);
  transform: rotate(-45deg);
  box-shadow: var(--kd-shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kd-map-pin__inner {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: white;
  transform: rotate(45deg);
}

/* ============================================================
   15. DIVIDER & SPACING UTILITIES
   ============================================================ */

.kd-divider {
  border: none;
  border-top: 1px solid var(--kd-border);
  margin: var(--kd-space-4) 0;
}

.kd-divider--labeled {
  display: flex;
  align-items: center;
  gap: var(--kd-space-3);
  font-size: var(--kd-text-xs);
  color: var(--kd-text-3);
  font-family: var(--kd-font-mono);
}
.kd-divider--labeled::before,
.kd-divider--labeled::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--kd-border);
}

/* Spacing helpers */
.kd-stack   { display: flex; flex-direction: column; }
.kd-cluster { display: flex; flex-wrap: wrap; align-items: center; }
.kd-gap-1 { gap: var(--kd-space-1); }
.kd-gap-2 { gap: var(--kd-space-2); }
.kd-gap-3 { gap: var(--kd-space-3); }
.kd-gap-4 { gap: var(--kd-space-4); }
.kd-gap-6 { gap: var(--kd-space-6); }
.kd-gap-8 { gap: var(--kd-space-8); }

/* ============================================================
   16. SLIDER (radius picker)
   ============================================================ */

.kd-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--kd-radius-full);
  background: linear-gradient(to right, var(--kd-pink) 0%, var(--kd-pink) var(--value, 50%), var(--kd-border) var(--value, 50%), var(--kd-border) 100%);
  outline: none;
  cursor: pointer;
}

.kd-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--kd-grad);
  box-shadow: 0 2px 8px rgba(233,30,140,0.4);
  cursor: grab;
  transition: transform var(--kd-duration-fast) var(--kd-ease);
}
.kd-slider::-webkit-slider-thumb:active { transform: scale(1.2); cursor: grabbing; }

/* ============================================================
   17. TOAST / ALERTS
   ============================================================ */

.kd-toast {
  display: flex;
  align-items: center;
  gap: var(--kd-space-3);
  padding: var(--kd-space-4) var(--kd-space-5);
  border-radius: var(--kd-radius-lg);
  font-size: var(--kd-text-sm);
  font-weight: var(--kd-weight-medium);
  box-shadow: var(--kd-shadow-lg);
  max-width: 360px;
  background: var(--kd-surface);
  border: 1px solid var(--kd-border);
  color: var(--kd-text);
}

.kd-toast--success { border-left: 3px solid var(--kd-success); }
.kd-toast--error   { border-left: 3px solid var(--kd-error);   }
.kd-toast--warning { border-left: 3px solid var(--kd-warning);  }
.kd-toast--match   { background: var(--kd-grad); color: white; border: none; }

/* ============================================================
   18. ANIMATIONS
   ============================================================ */

@keyframes kd-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

@keyframes kd-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes kd-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes kd-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes kd-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.kd-animate-fade-up { animation: kd-fade-up var(--kd-duration-slow) var(--kd-ease) both; }
.kd-animate-fade-in { animation: kd-fade-in var(--kd-duration-base) var(--kd-ease) both; }
.kd-animate-pulse   { animation: kd-pulse 1.5s ease-in-out infinite; }

/* Stagger helpers */
.kd-stagger > *:nth-child(1) { animation-delay: 0ms; }
.kd-stagger > *:nth-child(2) { animation-delay: 60ms; }
.kd-stagger > *:nth-child(3) { animation-delay: 120ms; }
.kd-stagger > *:nth-child(4) { animation-delay: 180ms; }
.kd-stagger > *:nth-child(5) { animation-delay: 240ms; }

/* Loading spinner */
.kd-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--kd-border);
  border-top-color: var(--kd-pink);
  border-radius: 50%;
  animation: kd-spin 0.7s linear infinite;
}
.kd-spinner--sm { width: 14px; height: 14px; }
.kd-spinner--lg { width: 32px; height: 32px; border-width: 3px; }