/* ============================================================
   LoveLynk - Design System Premium
   Palette : Rose chaud × Corail × Nuit profonde
   ============================================================ */

:root {
  --ll-primary:    #FF4B6E;
  --ll-primary-d:  #E03056;
  --ll-coral:      #FF8660;
  --ll-gold:       #FFD166;
  --ll-dark:       #0D0D1A;
  --ll-dark2:      #15152A;
  --ll-dark3:      #1E1E35;
  --ll-surface:    #22223A;
  --ll-border:     rgba(255,255,255,.08);
  --ll-text:       #F0EEF8;
  --ll-: #8882A8;
  --ll-radius:     14px;
  --ll-radius-sm:  8px;
  --ll-shadow:     0 8px 32px rgba(0,0,0,.4);
  --ll-glow:       0 0 40px rgba(255,75,110,.25);
  --navbar-h:      64px;
  --ll-app-height: 100dvh;
}

/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ll-dark);
  color: var(--ll-text);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: .9375rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x: hidden;
}

a { color: var(--ll-primary); text-decoration: none; }
a:hover { color: var(--ll-coral); }

img { max-width: 100%; height: auto; }
iframe, video, canvas, svg { max-width: 100%; }
input, select, textarea, button { font: inherit; }
button, [role="button"], a, input, select, textarea { touch-action: manipulation; }

/* ─── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ll-dark2); }
::-webkit-scrollbar-thumb { background: var(--ll-surface); border-radius: 3px; }

/* ─── Typography ───────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Clash Display', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  color: var(--ll-text);
}

.ll-display {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  background: linear-gradient(135deg, #fff 30%, var(--ll-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Navbar ───────────────────────────────────────────────── */
.ll-navbar {
  background: rgba(13,13,26,.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ll-border);
  height: var(--navbar-h);
  padding: 0 1rem;
}

.ll-brand { display: flex; align-items: center; gap: .5rem; }
.ll-logo-icon { font-size: 1.4rem; }
.ll-logo-text {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--ll-primary), var(--ll-coral));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ll-nav-link {
  color: var(--ll-) !important;
  font-weight: 500;
  padding: .45rem .8rem !important;
  border-radius: var(--ll-radius-sm);
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.ll-nav-link:hover, .ll-nav-link.active {
  color: var(--ll-text) !important;
  background: var(--ll-surface);
}
.ll-nav-link.active { color: var(--ll-primary) !important; }

.ll-count {
  background: var(--ll-surface);
  color: var(--ll-text);
  font-size: .7rem;
  padding: .1rem .4rem;
  border-radius: 20px;
  font-weight: 600;
}
.ll-count--red { background: var(--ll-primary); }

.ll-nav-icon-btn {
  background: none;
  border: none;
  color: var(--ll-);
  font-size: 1.2rem;
  cursor: pointer;
  padding: .4rem;
  border-radius: 50%;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ll-nav-icon-btn:hover { color: var(--ll-text); background: var(--ll-surface); }
.ll-nav-icon-btn.active {
  color: var(--ll-text);
  background: var(--ll-surface);
}

.ll-badge {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--ll-primary);
  color: #fff;
  font-size: .6rem;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  padding: 0 3px;
}

.ll-premium-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .35rem .8rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
}

.ll-upgrade-btn {
  background: linear-gradient(135deg, var(--ll-primary), var(--ll-coral));
  color: #fff !important;
  font-size: .8rem;
  font-weight: 700;
  padding: .4rem 1rem;
  border-radius: 20px;
  transition: all .2s;
  white-space: nowrap;
}
.ll-upgrade-btn:hover { opacity: .88; transform: translateY(-1px); }

.ll-avatar-btn { background: none; border: none; padding: 0; cursor: pointer; }
.ll-avatar-nav {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ll-primary);
  transition: transform .2s;
}
.ll-avatar-nav:hover { transform: scale(1.08); }

/* ─── Dropdowns ────────────────────────────────────────────── */
.ll-notif-dropdown, .ll-user-dropdown {
  background: var(--ll-dark2) !important;
  border: 1px solid var(--ll-border) !important;
  border-radius: var(--ll-radius) !important;
  box-shadow: var(--ll-shadow) !important;
}

.ll-notif-dropdown {
  width: min(320px, calc(100vw - 1rem));
  min-width: unset !important;
}

.ll-user-dropdown {
  max-width: min(280px, calc(100vw - 1rem));
}

.ll-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--ll-border);
  font-weight: 600;
}
.ll-notif-mark-read { font-size: .78rem; color: var(--ll-primary); }

.ll-notif-list { max-height: 340px; overflow-y: auto; }

.ll-notif-item {
  display: flex;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--ll-border);
  transition: background .15s;
}
.ll-notif-item:hover { background: var(--ll-surface); }
.ll-notif-item.unread { background: rgba(255,75,110,.06); }
.ll-notif-icon { font-size: 1.4rem; flex-shrink: 0; }
.ll-notif-body p { margin: 0; font-size: .85rem; }
.ll-notif-body span { font-size: .75rem; color: var(--ll-); }

.ll-notif-page-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--ll-border);
  color: var(--ll-text);
  text-decoration: none;
  transition: background .15s ease;
}

.ll-notif-page-item:hover {
  background: var(--ll-surface);
  color: var(--ll-text);
}

.ll-notif-page-item.unread {
  background: rgba(255,75,110,.06);
}

.ll-notif-page-item .ll-notif-body {
  flex: 1;
  min-width: 0;
}

.ll-notif-page-item .ll-notif-body p {
  font-size: .92rem;
}

.ll-notif-page-item .ll-notif-body span {
  font-size: .78rem;
}

.ll-notif-pill {
  flex-shrink: 0;
  background: rgba(255,75,110,.15);
  color: var(--ll-primary);
  border: 1px solid rgba(255,75,110,.2);
  font-size: .7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .25rem .55rem;
}

.ll-dropdown-header {
  padding: .75rem 1rem;
  display: flex; flex-direction: column;
}
.ll-dropdown-header strong { color: var(--ll-text); }
.ll-dropdown-header span { font-size: .8rem; color: var(--ll-); }

.ll-user-dropdown .dropdown-item {
  color: var(--ll-) !important;
  padding: .5rem 1rem;
  font-size: .88rem;
  transition: all .15s;
  border-radius: var(--ll-radius-sm);
  margin: 0 .25rem;
}
.ll-user-dropdown .dropdown-item:hover {
  background: var(--ll-surface) !important;
  color: var(--ll-text) !important;
}
.ll-user-dropdown .dropdown-item.text-danger:hover {
  background: rgba(255,75,110,.12) !important;
  color: var(--ll-primary) !important;
}
.ll-user-dropdown .dropdown-divider { border-color: var(--ll-border); }

/* ─── Cards ────────────────────────────────────────────────── */
.ll-card {
  background: var(--ll-dark2);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.ll-card:hover { transform: translateY(-4px); box-shadow: var(--ll-shadow); }

/* ─── Buttons ──────────────────────────────────────────────── */
.ll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 1.4rem;
  border-radius: 40px;
  font-weight: 600;
  font-size: .9rem;
  border: none;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.ll-btn-primary {
  background: linear-gradient(135deg, var(--ll-primary), var(--ll-coral));
  color: #fff;
  box-shadow: 0 4px 20px rgba(255,75,110,.35);
}
.ll-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(255,75,110,.5); color: #fff; }

.ll-btn-outline {
  background: transparent;
  border: 1px solid var(--ll-border);
  color: var(--ll-);
}
.ll-btn-outline:hover { border-color: var(--ll-primary); color: var(--ll-primary); background: rgba(255,75,110,.06); }

.ll-btn-ghost {
  background: var(--ll-surface);
  color: var(--ll-text);
}
.ll-btn-ghost:hover { background: var(--ll-dark3); }

.ll-btn-danger {
  background: rgba(239,68,68,.15);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.25);
}
.ll-btn-danger:hover { background: rgba(239,68,68,.25); }

.ll-btn-lg { padding: .8rem 2rem; font-size: 1rem; }
.ll-btn-sm { padding: .4rem .9rem; font-size: .8rem; }
.ll-btn-icon { width: 42px; height: 42px; padding: 0; border-radius: 50%; }

/* ─── Forms ────────────────────────────────────────────────── */
.ll-form-control, .ll-select {
  background: var(--ll-dark3) !important;
  border: 1px solid var(--ll-border) !important;
  border-radius: var(--ll-radius-sm) !important;
  color: var(--ll-text) !important;
  padding: .65rem 1rem !important;
  font-size: .9rem !important;
  transition: border-color .2s, box-shadow .2s !important;
  width: 100%;
}
.ll-form-control:focus, .ll-select:focus {
  border-color: var(--ll-primary) !important;
  box-shadow: 0 0 0 3px rgba(255,75,110,.15) !important;
  outline: none !important;
}
.ll-form-control::placeholder { color: var(--ll-) !important; }

textarea.ll-form-control { resize: vertical; min-height: 100px; }

.ll-form-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ll-);
  margin-bottom: .35rem;
  display: block;
}

/* ─── Profile Cards (Discover) ─────────────────────────────── */
.ll-profile-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3/4;
  max-width: 360px;
  width: 100%;
  cursor: grab;
  user-select: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.ll-swipe-container {
  position: relative;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-profile-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ll-profile-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 1.5rem 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
}

.ll-profile-card-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.ll-profile-card-info {
  font-size: .85rem;
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.ll-action-btns {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.ll-action-btn {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

.ll-action-btn-dislike { background: var(--ll-dark3); color: #ef4444; }
.ll-action-btn-like    { background: linear-gradient(135deg, var(--ll-primary), var(--ll-coral)); color: #fff; }
.ll-action-btn-super   { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }

.ll-action-btn:hover { transform: scale(1.12); }
.ll-action-btn-like:hover    { box-shadow: 0 6px 28px rgba(255,75,110,.6); }
.ll-action-btn-dislike:hover { box-shadow: 0 6px 28px rgba(239,68,68,.3); }

/* Swipe animations */
.ll-card-swipe-right { animation: swipeRight .35s ease forwards; }
.ll-card-swipe-left  { animation: swipeLeft  .35s ease forwards; }

@keyframes swipeRight {
  to { transform: translateX(150%) rotate(20deg); opacity: 0; }
}
@keyframes swipeLeft {
  to { transform: translateX(-150%) rotate(-20deg); opacity: 0; }
}

/* Like/Dislike labels on swipe */
.ll-swipe-label {
  position: absolute;
  top: 40px;
  font-size: 2rem;
  font-weight: 900;
  border: 4px solid;
  border-radius: 8px;
  padding: .2rem .8rem;
  opacity: 0;
  transition: opacity .15s;
  z-index: 10;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.ll-swipe-label.like   { left: 20px;  color: #4ade80; border-color: #4ade80; }
.ll-swipe-label.nope   { right: 20px; color: #ef4444; border-color: #ef4444; }

/* ─── Chat ─────────────────────────────────────────────────── */
.ll-chat-layout {
  display: flex;
  height: calc(var(--ll-app-height) - var(--navbar-h));
  min-height: calc(var(--ll-app-height) - var(--navbar-h));
  overflow: hidden;
}

.ll-page-chat {
  height: var(--ll-app-height);
  overflow: hidden;
}

.ll-page-chat .ll-footer {
  display: none;
}

.ll-chat-sidebar {
  width: 320px;
  min-width: 280px;
  background: var(--ll-dark2);
  border-right: 1px solid var(--ll-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.ll-chat-sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid var(--ll-border);
  font-size: 1.1rem;
  font-weight: 700;
}

.ll-conversation-list { overflow-y: auto; flex: 1; }

.ll-conversation-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--ll-border);
  transition: background .15s;
  text-decoration: none;
  color: var(--ll-text);
}
.ll-conversation-item:hover, .ll-conversation-item.active {
  background: var(--ll-surface);
  color: var(--ll-text);
}

.ll-conv-avatar {
  position: relative;
  flex-shrink: 0;
}
.ll-conv-avatar img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
}
.ll-online-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 11px; height: 11px;
  background: #4ade80;
  border-radius: 50%;
  border: 2px solid var(--ll-dark2);
}

.ll-conv-info { flex: 1; min-width: 0; }
.ll-conv-name { font-weight: 600; font-size: .88rem; margin: 0; }
.ll-conv-preview {
  font-size: .78rem;
  color: var(--ll-);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.ll-conv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  flex-shrink: 0;
}
.ll-conv-time { font-size: .7rem; color: var(--ll-); }
.ll-unread-dot {
  width: 18px; height: 18px;
  background: var(--ll-primary);
  border-radius: 50%;
  font-size: .7rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Chat area */
.ll-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ll-dark);
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;
}

.ll-chat-header {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--ll-border);
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--ll-dark2);
}

.ll-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overscroll-behavior-y: contain;
}

.ll-msg {
  max-width: 70%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ll-msg-me    { align-self: flex-end; align-items: flex-end; }
.ll-msg-other { align-self: flex-start; align-items: flex-start; }

.ll-msg-bubble {
  padding: .6rem .9rem;
  border-radius: 18px;
  font-size: .88rem;
  line-height: 1.5;
  word-break: break-word;
}

.ll-msg-me .ll-msg-bubble {
  background: linear-gradient(135deg, var(--ll-primary), var(--ll-coral));
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ll-msg-other .ll-msg-bubble {
  background: var(--ll-surface);
  color: var(--ll-text);
  border-bottom-left-radius: 4px;
}

.ll-msg-bubble img { max-width: 220px; border-radius: 12px; }

.ll-msg-meta {
  font-size: .68rem;
  color: var(--ll-);
  margin-top: .2rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.ll-chat-input-area {
  padding: .75rem 1rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ll-border);
  background: var(--ll-dark2);
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  flex-shrink: 0;
}

.ll-chat-input {
  flex: 1;
  background: var(--ll-dark3) !important;
  border: 1px solid var(--ll-border) !important;
  border-radius: 22px !important;
  color: var(--ll-text) !important;
  padding: .6rem 1rem !important;
  font-size: .9rem !important;
  resize: none;
  max-height: 140px;
  overflow-y: auto;
  line-height: 1.4;
}
.ll-chat-input:focus {
  border-color: var(--ll-primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

.ll-send-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ll-primary), var(--ll-coral));
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .15s;
}
.ll-send-btn:hover { transform: scale(1.08); }

.ll-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ll-);
  gap: 1rem;
}
.ll-chat-empty-icon { font-size: 4rem; opacity: .3; }

/* ─── Match cards ──────────────────────────────────────────── */
.ll-match-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--ll-dark2);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-radius);
  transition: all .2s;
  text-decoration: none;
  color: var(--ll-text);
}
.ll-match-card:hover {
  border-color: var(--ll-primary);
  background: var(--ll-dark3);
  transform: translateX(4px);
  color: var(--ll-text);
}
.ll-match-avatar {
  width: 58px; height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ll-primary);
  flex-shrink: 0;
}

/* ─── Auth pages ───────────────────────────────────────────── */
.ll-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ll-dark);
  position: relative;
  overflow: hidden;
}

.ll-auth-page--scroll {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.ll-auth-page--scroll .container {
  min-height: 100%;
}

.ll-auth-page--register .row {
  margin-left: 0;
  margin-right: 0;
}

.ll-auth-page::before {
  content: '';
  position: fixed;
  top: -50%; left: -20%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(255,75,110,.15) 0%, transparent 70%);
  pointer-events: none;
}
.ll-auth-page::after {
  content: '';
  position: fixed;
  bottom: -30%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,134,96,.1) 0%, transparent 70%);
  pointer-events: none;
}

.ll-auth-card {
  background: var(--ll-dark2);
  border: 1px solid var(--ll-border);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 1;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

.hero-content,
.container,
.container-fluid,
.row,
[class*="col-"] {
  min-width: 0;
}

/* ─── Premium ──────────────────────────────────────────────── */
.ll-premium-card {
  background: var(--ll-dark2);
  border: 1px solid var(--ll-border);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: all .25s;
}
.ll-premium-card.recommended {
  border-color: var(--ll-primary);
  box-shadow: 0 0 40px rgba(255,75,110,.2);
}
.ll-premium-card:hover { transform: translateY(-5px); }

.ll-plan-price {
  font-size: 2.5rem;
  font-weight: 800;
  font-family: 'Clash Display', sans-serif;
}

/* ─── Admin ────────────────────────────────────────────────── */
.ll-admin-stat {
  background: var(--ll-dark2);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-radius);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ll-stat-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* ─── Alerts ───────────────────────────────────────────────── */
.ll-alert {
  padding: .8rem 1rem;
  border-radius: var(--ll-radius-sm);
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.ll-alert-error   { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.2); color: #fca5a5; }
.ll-alert-success { background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.2); color: #86efac; }
.ll-alert-info    { background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.2); color: #a5b4fc; }

/* ─── Footer ───────────────────────────────────────────────── */
.ll-footer {
  background: var(--ll-dark2);
  border-top: 1px solid var(--ll-border);
  padding: 1rem 0;
  margin-top: auto;
}

/* ─── Spinner ──────────────────────────────────────────────── */
.ll-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--ll-border);
  border-top-color: var(--ll-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Tags / Badges ────────────────────────────────────────── */
.ll-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--ll-surface);
  color: var(--ll-);
  font-size: .75rem;
  padding: .25rem .65rem;
  border-radius: 20px;
  font-weight: 500;
}
.ll-tag-primary { background: rgba(255,75,110,.15); color: var(--ll-primary); }

/* ─── Misc utilities ───────────────────────────────────────── */
.ll-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--ll-);
  font-size: .8rem;
  margin: 1rem 0;
}
.ll-divider::before, .ll-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ll-border);
}

.ll-section-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: .25rem;
}
.ll-section-sub { color: var(--ll-); font-size: .88rem; margin-bottom: 1.5rem; }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .ll-navbar {
    height: auto;
    min-height: var(--navbar-h);
    padding: .5rem .75rem;
  }

  #navContent {
    margin-top: .75rem;
    padding: .75rem;
    border-radius: var(--ll-radius);
    background: rgba(21,21,42,.98) !important;
    border: 1px solid var(--ll-border);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    position: relative;
    z-index: 20;
  }

  #navContent .d-flex.align-items-center.gap-3 {
    flex-wrap: wrap;
    align-items: stretch !important;
    gap: .75rem !important;
    width: 100%;
  }

  #navContent .ll-upgrade-btn,
  #navContent .ll-premium-badge {
    justify-content: center;
  }

  .ll-nav-link {
    width: 100%;
    justify-content: space-between;
  }

  .ll-chat-sidebar { width: 100%; min-width: unset; }
  .ll-chat-area { display: none; }
  .ll-chat-area.active { display: flex; }
  .ll-chat-layout {
    display: block;
    height: auto;
    min-height: calc(100dvh - var(--navbar-h));
  }

  .ll-page-chat .ll-chat-layout {
    height: calc(var(--ll-app-height) - var(--navbar-h));
    min-height: calc(var(--ll-app-height) - var(--navbar-h));
  }

  .ll-chat-header,
  .ll-chat-input-area {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .ll-chat-messages { padding: .75rem; }

  .ll-msg { max-width: 88%; }

  .ll-profile-card { max-width: 100%; }
  .ll-swipe-container { height: min(72vh, 500px); }
  .ll-action-btn { width: 52px; height: 52px; font-size: 1.2rem; }

  .ll-auth-card {
    border-radius: 0;
    min-height: 100vh;
    min-height: 100dvh;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ll-auth-page--register .ll-auth-card {
    min-height: auto;
    justify-content: flex-start;
  }

  .ll-form-control,
  .ll-select,
  .ll-chat-input {
    font-size: 16px !important;
  }

  .hero-phones {
    height: auto;
    min-height: 360px;
  }

  .phone-mockup {
    width: min(68vw, 220px);
  }

  .phone-mockup-back {
    width: min(52vw, 180px);
    top: 32px;
    right: 8px;
  }
}

@media (max-width: 575.98px) {
  .ll-auth-card { padding: 2rem 1.25rem; }

  .ll-brand {
    min-width: 0;
  }

  .ll-logo-text {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ll-notif-dropdown,
  .ll-user-dropdown {
    width: min(100vw - 1rem, 320px);
  }

  .ll-swipe-container { height: min(68vh, 460px); }

  .ll-profile-card-overlay {
    padding: 1.4rem 1rem 1rem;
  }

  .ll-profile-card-name {
    font-size: 1.25rem;
  }

  .ll-action-btns {
    gap: 1rem;
  }
}