:root {
  /* Brand — Aura blue → violet gradient; gold aura + violet vibes accents. */
  --brand: #3b82ff;
  --brand-2: #7c5cff;
  --brand-grad: linear-gradient(135deg, #3b82ff 0%, #7c5cff 100%);
  --blue: #3b6dff;          /* alias kept so existing rules pick up the new brand */
  --blue-dark: #2f5fe6;
  --green: #22c55e;
  --green-dark: #16a34a;
  --aura: #f0a03a;
  --vibe: #9b6bff;

  --bg: #eaeef6;
  --text: #0d1220;
  --text-2: #59606e;
  --border: rgba(20, 24, 40, 0.09);

  /* Frosted-glass surfaces */
  --card: rgba(255, 255, 255, 0.66);
  --sheet: #ffffff;           /* solid surface for slide-up sheets (readable, opaque) */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-blur: saturate(180%) blur(22px);
  --hover: rgba(20, 24, 40, 0.05);

  --radius: 20px;
  --radius-sm: 13px;
  --shadow: 0 8px 30px rgba(20, 24, 40, 0.08), 0 1px 2px rgba(20, 24, 40, 0.04);
  --shadow-lg: 0 24px 60px rgba(20, 24, 40, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1100px 620px at 8% -8%, rgba(124, 92, 255, 0.14), transparent 60%),
    radial-gradient(1000px 560px at 100% 2%, rgba(59, 130, 255, 0.13), transparent 55%),
    radial-gradient(900px 720px at 50% 118%, rgba(255, 168, 76, 0.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* safety net: never let a wide row cause sideways scroll */
}

/* Sleek inline icons inherit text colour + size crisply. */
.ic { display: inline-block; vertical-align: middle; flex: none; }
.svg-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 2px 20px rgba(20, 24, 40, 0.05);
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-mark { display: inline-flex; filter: drop-shadow(0 2px 6px rgba(124, 92, 255, 0.35)); }
.nav-links { display: flex; gap: 4px; }
.nav-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 22px;
  border-radius: 14px;
  color: var(--text-2);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-icon span { font-size: 11px; margin-top: 3px; font-weight: 600; }
.nav-icon:hover { background: var(--hover); color: var(--text); }
.nav-icon.active { color: var(--brand); }
.nav-icon.active .ic { filter: drop-shadow(0 2px 8px rgba(59, 109, 255, 0.35)); }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-me { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 20px; }
.nav-me:hover { background: var(--hover); }
.nav-me-name { font-weight: 600; font-size: 14px; }

/* ---------- Layout ---------- */
.app-main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.auth-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}
.container { max-width: 1100px; margin: 0 auto; }
.narrow { max-width: 680px; }

/* ---------- Sidebars ---------- */
.sidebar { position: sticky; top: 72px; }
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--text);
}
.side-link:hover { background: #e4e6e9; }
.side-title { font-size: 16px; color: var(--text-2); margin: 4px 0 12px; }
.sidebar-right { background: transparent; }

/* ---------- Cards ---------- */
.card {
  /* NOTE: intentionally no backdrop-filter here — a filtered ancestor becomes
     the containing block for position:fixed descendants, which would trap the
     post's slide-up comment sheet inside the card. Translucency + border +
     shadow over the tinted background already reads as frosted glass. */
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 16px;
}
.section-title { margin: 0 0 16px; font-size: 20px; }
.empty { text-align: center; padding: 32px 16px; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }

/* ---------- Composer ---------- */
.composer-top { display: flex; gap: 10px; align-items: flex-start; }
.composer textarea {
  flex: 1;
  border: 1px solid transparent;
  resize: none;
  background: rgba(20, 24, 40, 0.05);
  border-radius: 18px;
  padding: 11px 15px;
  font: inherit;
  outline: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.composer textarea:focus {
  background: var(--glass-strong);
  border-color: var(--glass-border);
  box-shadow: 0 0 0 3px rgba(59, 109, 255, 0.15);
}
.composer-photo .ic { color: var(--text-2); }
.composer-photo:hover .ic { color: var(--brand); }
.composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.composer-photo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-2);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
}
.composer-photo:hover { background: var(--hover); }
.composer-photo .fname { font-size: 12px; color: var(--blue); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Posts ---------- */
.post-head { display: flex; align-items: center; justify-content: space-between; }
.post-author { display: flex; align-items: center; gap: 10px; }
.post-author-name { display: block; font-weight: 600; }
.post-time { display: block; font-size: 12px; color: var(--text-2); }
.post-content { margin: 12px 0; white-space: pre-wrap; word-wrap: break-word; }
.post-image-link { display: block; margin: 12px -16px 0; }
.post-image { width: 100%; display: block; }
.post-stats {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  color: var(--text-2);
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.post-actions { display: flex; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.btn-action {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border: none;
  background: rgba(20, 24, 40, 0.045);
  color: var(--text-2);
  font-weight: 650;
  font-size: 13.5px;
  line-height: 1;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
}
.btn-action .ic { width: 20px; height: 20px; }
.btn-action .act-emoji { font-size: 18px; line-height: 1; }
.btn-action:hover { background: rgba(20, 24, 40, 0.08); color: var(--text); }
.btn-action:active { transform: scale(0.96); }
.btn-action.liked { color: var(--brand); background: rgba(59, 109, 255, 0.12); }

/* ---------- Comments ---------- */
.comments { padding-top: 10px; }
.comment { display: flex; gap: 8px; margin-bottom: 10px; }
.comment-main { flex: 1; min-width: 0; }
.comment-bubble { background: rgba(20, 24, 40, 0.055); border-radius: 16px; padding: 9px 13px; display: inline-block; max-width: 100%; }
.comment-author { font-weight: 600; font-size: 13px; display: block; }
.comment-text { font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
.comment-time { font-size: 11px; color: var(--text-2); margin-top: 2px; }

/* Comment action row (Like · Reply · time · count) */
.comment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 3px 0 0 12px; font-size: 12px; }
.cm-react, .cm-reply { position: relative; display: inline-flex; }
.cm-act { cursor: pointer; font-weight: 700; color: var(--text-2); list-style: none; }
.cm-act::-webkit-details-marker { display: none; }
.cm-act::marker { content: ''; }
.cm-act.active { color: var(--blue); }
.cm-time { color: var(--text-2); }
.cm-count { color: var(--text-2); background: var(--bg); border-radius: 10px; padding: 1px 7px; }
/* Open the reply composer as its own full-width row so the Reply button
   never gets pushed off the edge on nested/narrow replies. */
.cm-reply[open] { display: block; flex-basis: 100%; }
.cm-reply-form { margin-top: 6px; width: 100%; }
.comment-replies { margin-left: 40px; }
.mention { color: var(--blue); font-weight: 600; }
.mention:hover { text-decoration: underline; }

/* Flash a comment when arriving via a notification deep-link. */
.comment-flash > .comment-main > .comment-bubble {
  animation: comment-flash 2.4s ease;
}
@keyframes comment-flash {
  0%, 22% { background: rgba(59, 109, 255, 0.22); box-shadow: 0 0 0 3px rgba(59, 109, 255, 0.22); }
  100% { background: rgba(20, 24, 40, 0.055); box-shadow: none; }
}

/* @mention autocomplete dropdown */
.mention-menu {
  position: fixed;
  z-index: 3000;
  display: none;
  max-height: 264px;
  overflow-y: auto;
  background: var(--sheet, #fff);
  border: 1px solid var(--glass-border, var(--border));
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(15, 20, 40, 0.22);
  padding: 5px;
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 10px;
  cursor: pointer;
}
.mention-item.active, .mention-item:hover { background: rgba(59, 109, 255, 0.12); }
.mention-ava {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.mention-ava img { width: 100%; height: 100%; object-fit: cover; }
.mention-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mention-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-handle { color: var(--text-2); font-size: 12px; }

.comment-form { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.comment-form input {
  flex: 1;
  min-width: 0; /* let the input shrink so the Post button never gets pushed off */
  border: 1px solid transparent;
  background: rgba(20, 24, 40, 0.055);
  border-radius: 18px;
  padding: 9px 15px;
  font: inherit;
  outline: none;
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.comment-form input:focus { background: var(--glass-strong); box-shadow: 0 0 0 3px rgba(59, 109, 255, 0.14); }
.comment-form .btn { flex: none; white-space: nowrap; }

/* Attach-photo button + selected-image preview on a comment */
.comment-form { flex-wrap: wrap; }
.cm-attach { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  color: var(--text-2); background: rgba(20, 24, 40, 0.055); transition: background 0.15s, color 0.15s; }
.cm-attach:hover { background: rgba(20, 24, 40, 0.1); }
.cm-attach.has-file { color: #fff; background: var(--blue); }
.cm-preview { position: relative; flex-basis: 100%; margin-top: 6px; }
.cm-preview img { max-width: 120px; max-height: 120px; border-radius: 12px; display: block; border: 1px solid var(--border); }
.cm-preview-x { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 11px; line-height: 1; display: grid; place-items: center; }

/* Image displayed on a posted comment */
.comment-image-link { display: inline-block; margin-top: 6px; }
.comment-image { max-width: 220px; max-height: 260px; border-radius: 12px; display: block; }

/* ---------- Avatars ---------- */
.avatar { border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.avatar-fallback {
  background: linear-gradient(135deg, var(--blue), #00c6ff);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  background: var(--glass-strong);
  color: var(--text);
  transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}
.btn:hover { filter: brightness(1.03); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary {
  background: var(--brand-grad); color: #fff; border-color: transparent;
  box-shadow: 0 8px 22px rgba(59, 109, 255, 0.32);
}
.btn-primary:hover { box-shadow: 0 12px 28px rgba(124, 92, 255, 0.4); }
.btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(34, 197, 94, 0.28); }
.btn-success:hover { filter: brightness(1.03); }
.btn-ghost { background: var(--hover); color: var(--text); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.btn-lg { padding: 12px 16px; font-size: 17px; width: 100%; }
.inline { display: inline; }

/* ---------- Auth ---------- */
.auth-card {
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  padding: 28px;
  width: 100%;
  max-width: 396px;
  text-align: center;
}
.auth-brand { color: var(--blue); font-size: 40px; font-weight: 800; letter-spacing: -1px; }
.auth-tagline { color: var(--text-2); margin: 4px 0 20px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form input {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
  outline: none;
}
.auth-form input:focus { border-color: var(--blue); }
.auth-sep { height: 1px; background: var(--border); margin: 20px 0; }
.auth-link { color: var(--blue); font-weight: 600; }

/* ---------- Alerts ---------- */
.alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; text-align: left; }
.alert-error { background: #ffebe8; border: 1px solid #ffb3b3; color: #c0392b; }

/* ---------- Profile ---------- */
.cover {
  height: 200px;
  background: linear-gradient(135deg, #1877f2, #00c6ff);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius) var(--radius) 0 0;
  margin: -16px -16px 0;
}
.profile-header { padding-bottom: 16px; }
/* Centered, Facebook-style profile header. */
.profile-top { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
.profile-avatar { margin-top: -64px; }
.profile-avatar .avatar { border: 4px solid var(--card); }
.profile-name { margin: 12px 0 2px; font-size: 26px; line-height: 1.15; }
.profile-handle { margin: 0 0 8px; color: var(--text-2); }
.profile-sub { margin: 8px 0 0; color: var(--text-2); }
.profile-bio { margin: 10px 0 0; max-width: 520px; }
.profile-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 460px; margin-top: 14px; }
.profile-actions > .btn, .profile-actions > form { flex: 1 1 auto; min-width: 130px; }
.profile-actions > form { display: flex; }
.profile-actions > form > .btn { width: 100%; }

/* ---------- People grid ---------- */
.section { margin-bottom: 16px; }
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.person-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.person-name { font-weight: 600; }
.person-bio { font-size: 12px; color: var(--text-2); margin: 0; }
.person-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: auto; }

/* ---------- Suggestions (right rail) ---------- */
.suggestion { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; }
.suggestion-user { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }

/* ---------- Misc forms ---------- */
.stacked-form { display: flex; flex-direction: column; gap: 16px; }
.stacked-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.stacked-form input[type='text'],
.stacked-form textarea {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-weight: 400;
}
.form-actions { display: flex; gap: 10px; }
.back-link { display: inline-block; margin-bottom: 12px; color: var(--blue); font-weight: 600; }

/* @handle input with a leading "@" adornment */
.handle-input { position: relative; display: flex; align-items: center; }
.handle-input .handle-at {
  position: absolute;
  left: 12px;
  color: var(--text-2);
  font-weight: 600;
  pointer-events: none;
}
.stacked-form .handle-input input[type='text'] { flex: 1; padding-left: 26px; }

/* ---------- Search bar ---------- */
.nav-search { flex: 1; max-width: 300px; position: relative; display: flex; align-items: center; }
.nav-search-ic { position: absolute; left: 14px; color: var(--text-2); pointer-events: none; }
.nav-search input {
  width: 100%;
  border: 1px solid transparent;
  background: rgba(20, 24, 40, 0.055);
  border-radius: 22px;
  padding: 10px 14px 10px 40px;
  font: inherit;
  outline: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.nav-search input:focus {
  background: var(--glass-strong);
  border-color: var(--glass-border);
  box-shadow: 0 0 0 3px rgba(59, 109, 255, 0.18);
}

/* ---------- Nav badges ---------- */
.nav-badge-wrap { position: relative; }
.badge {
  position: absolute;
  top: 2px;
  right: 12px;
  background: #e41e3f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
}

/* ---------- Post menu (edit/delete) ---------- */
.post-menu { position: relative; }
.post-menu summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-2);
}
.post-menu summary::-webkit-details-marker { display: none; }
.post-menu summary:hover { background: var(--hover); }
.post-menu-items {
  position: absolute;
  right: 0;
  top: 32px;
  background: var(--sheet);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(20, 24, 40, 0.22);
  z-index: 10;
  min-width: 140px;
  overflow: hidden;
}
.post-menu-items a,
.post-menu-items button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  color: var(--text);
}
.post-menu-items a:hover,
.post-menu-items button:hover { background: var(--hover); }

/* ---------- Shared (reshared) post ---------- */
.shared-box {
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
  color: var(--text);
}
.shared-box:hover { background: #fafafa; }
.shared-head { display: flex; align-items: center; gap: 8px; }
.shared-author { font-weight: 600; }
.shared-content { margin-top: 8px; white-space: pre-wrap; word-wrap: break-word; }
.shared-box .post-image { margin-top: 8px; border-radius: 8px; }
.shared-missing { text-align: center; padding: 20px; }

/* ---------- Action row tweaks ---------- */
.action-cell { flex: 1; display: flex; }
.action-cell .btn-action { width: 100%; }
.share-disclosure { position: relative; }
.share-disclosure > summary { list-style: none; cursor: pointer; }
.share-disclosure > summary::-webkit-details-marker { display: none; }
.share-form {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  background: var(--sheet);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20, 24, 40, 0.22);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}
.share-form input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  font: inherit;
  outline: none;
}

/* ---------- Notifications ---------- */
.notif {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  color: var(--text);
}
.notif:hover { background: var(--hover); }
.notif-unread { background: #e7f3ff; }
.notif-unread:hover { background: #ddecfb; }
.notif-body { flex: 1; }
.notif-time { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* ---------- Messages list ---------- */
.convo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  color: var(--text);
}
.convo:hover { background: var(--hover); }
.convo-unread { background: #e7f3ff; }
.convo-body { flex: 1; min-width: 0; }
.convo-top { display: flex; justify-content: space-between; gap: 8px; }
.convo-name { font-weight: 600; }
.convo-time { font-size: 12px; color: var(--text-2); }
.convo-preview {
  color: var(--text-2);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.convo-unread .convo-preview { color: var(--text); font-weight: 600; }
.convo-badge { position: static; }

/* ---------- Chat thread ---------- */
/* Bound the card to the viewport and let the message list scroll inside it, so
   the composer is always in view (no page scroll needed). Mobile overrides
   below take over with full-height rules. */
.chat {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 148px);
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.chat-head .back-link { margin: 0; font-size: 22px; }
.chat-peer { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.chat-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f7f8fa;
}
.chat-empty { text-align: center; margin: auto; }
.bubble-row { display: flex; }
.bubble-row.mine { justify-content: flex-end; }
.bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.bubble-row.theirs .bubble { background: #e4e6eb; color: var(--text); border-bottom-left-radius: 4px; }
.bubble-row.mine .bubble { background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.bubble-time { display: block; font-size: 10px; opacity: 0.7; margin-top: 2px; }
.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.chat-form input {
  flex: 1;
  border: none;
  background: var(--bg);
  border-radius: 20px;
  padding: 10px 14px;
  font: inherit;
  outline: none;
}
/* Photo attach + preview on a message */
.chat-form { position: relative; }
.chat-attach { flex: none; }
.chat-form .cm-preview {
  position: absolute;
  left: 14px;
  bottom: calc(100% + 6px);
  margin: 0;
  flex-basis: auto;
  background: var(--card);
  padding: 5px;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(20, 24, 40, 0.18);
}
.bubble-has-image { padding: 4px; }
.bubble-image-link { display: block; }
.bubble-image { display: block; max-width: min(240px, 60vw); max-height: 300px; height: auto; border-radius: 12px; }
.bubble-has-image .bubble-text { display: block; padding: 5px 8px 2px; }

/* ---------- Desktop nav active states (Facebook-style) ---------- */
.nav-search-icon { display: none; }
.nav-links .nav-icon.active { color: var(--blue); box-shadow: inset 0 -3px 0 var(--blue); border-radius: 8px 8px 0 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar-left, .sidebar-right { display: none; }
}
.bottomnav { display: none; } /* hidden on desktop; shown in the query below */
@media (max-width: 680px) {
  .nav-links { display: none; }
  .nav-search { display: none; }          /* full search bar becomes a compact icon */
  .nav-search-icon { display: inline-flex; padding: 8px; border-radius: 12px; }
  .nav-inner { gap: 8px; padding: 8px 12px; flex-wrap: nowrap; }
  .nav-left { flex: 0 0 auto; min-width: 0; gap: 4px; }
  .brand { font-size: 21px; white-space: nowrap; }
  .nav-right { gap: 6px; flex: 0 0 auto; }
  .nav-chat { display: flex; }            /* Messages icon + unread counter in the corner */
  .nav-logout { display: none; }          /* Log out moves to the profile page on mobile */
  .nav-me .avatar-ring, .nav-badge-wrap { flex: none; }

  /* Sleek bottom tab bar */
  .bottomnav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    /* Mostly opaque so scrolling content doesn't bleed through and muddy the
       menu; the blur keeps a hint of glass at the edges. */
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--border);
    box-shadow: 0 -1px 3px rgba(20, 24, 40, 0.04);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottomnav-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 0 6px;
    color: var(--text-2);
    line-height: 1;
    transition: color 0.2s var(--ease);
  }
  .bottomnav-item .bn-ic { display: inline-flex; }
  .bottomnav-item .bn-l { font-size: 10.5px; font-weight: 650; letter-spacing: 0.1px; }
  .bottomnav-item.active { color: var(--brand); }
  .bottomnav-item.active .bn-ic { filter: drop-shadow(0 3px 8px rgba(59, 109, 255, 0.4)); }
  .bottomnav-item:active { transform: scale(0.94); }
  .bottomnav .badge { top: 2px; right: 24%; }

  /* Keep page content clear of the fixed bottom bar. */
  .app-main { padding-bottom: 76px; }
  .pwa-install { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

  /* Action buttons: icon-only pills so all five fit neatly across the footer. */
  .post-actions { gap: 5px; }
  .act-label { display: none; }
  .post-actions .btn-action { font-size: 17px; padding: 9px 4px; gap: 0; }

  /* Keep the reaction palette compact so it never runs off either edge. */
  .react-palette { gap: 0; padding: 5px 6px; }
  .react-emoji { width: 34px; height: 34px; font-size: 21px; }

  /* Facebook-style: comments slide up as a bottom sheet over the feed. The
     comments are already in the DOM (just off-screen); .open slides them in. */
  .post--compact .comments {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: 9%;
    z-index: 320;
    background: var(--sheet);
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    transform: translateY(102%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  /* Shadow only while open — otherwise the off-screen sheet's upward shadow
     bleeds into the bottom of the viewport and darkens the tab bar. */
  .post--compact .comments.open { transform: translateY(0); box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.28); }
  .post--compact .comments-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
  }
  .post--compact .comments-body { flex: 1; overflow-y: auto; padding: 12px 14px; -webkit-overflow-scrolling: touch; }
  .post--compact .comments .comment-form {
    position: sticky; bottom: 0; margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--sheet);
  }

  /* Messenger becomes full-height like a chat app (bottom nav is hidden here, so
     the composer sits right above the keyboard). 100dvh + interactive-widget=
     resizes-content means the layout shrinks when the keyboard opens, keeping the
     newest message and the input in view instead of scrolling them off-screen. */
  .app-main.is-thread { padding: 0; max-width: none; }
  .container.narrow { max-width: none; padding: 0; }
  .chat {
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: none;
    height: calc(100vh - 53px);
    height: calc(100dvh - 53px);
  }
  .chat-body { height: auto; flex: 1; min-height: 0; }
  .chat-form { position: sticky; bottom: 0; background: var(--card); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* In a thread the global top bar stays hidden (the chat header + back button
     serve as the thread's header), so the chat gets the full screen height. */
  .thread-page .navbar, .thread-page .cosmic-banner { display: none; }
  .thread-page .chat { height: 100vh; height: 100dvh; }

  /* When the keyboard opens, slide the Synchronicity number-game info off the
     top so the messages + composer aren't scrunched while typing. */
  .sync-bar, .sync-score {
    overflow: hidden; max-height: 90px;
    transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.22s ease, border-width 0.22s ease;
  }
  body.kb-open .sync-bar, body.kb-open .sync-score {
    max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0; pointer-events: none;
  }
}
@media (max-width: 520px) {
  .nav-icon { padding: 6px 7px; }
  .nav-icon span { display: none; }
  .nav-icon .badge { display: inline-flex; } /* keep the count badge; only hide text labels */
  .nav-me-name { display: none; }
  .nav-logout .btn { padding: 6px 10px; }  /* keep logout reachable, just compact */
  .brand { font-size: 22px; }
  .bubble { max-width: 78%; }
  .comment-replies { margin-left: 24px; }
}

/* ============================================================
   Vibes economy UI
   ============================================================ */

.brand-mark { margin-right: 2px; }

/* ---------- Wallet (nav) ---------- */
.wallet {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 6px 14px;
  font-weight: 750;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(20, 24, 40, 0.06);
}
.wallet-vibes, .wallet-aura { display: inline-flex; align-items: center; gap: 5px; }
.wallet-vibes { color: #7c4bd6; }
.wallet-aura { color: #d98a1f; }
.wallet .ic { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12)); }

/* ---------- Wallet card (sidebar) ---------- */
.wallet-card { text-align: left; }
.wallet-id { display: flex; align-items: center; gap: 10px; color: var(--text); }
.wallet-name { font-weight: 700; }
.wallet-level { font-size: 12px; color: var(--text-2); }
.wallet-stats { display: flex; gap: 12px; margin: 12px 0 8px; }
.wallet-stats > div { display: flex; flex-direction: column; }
.wallet-num { font-weight: 800; font-size: 17px; }
.side-cta { background: linear-gradient(90deg, #fff1cc, #ffe29a); font-weight: 700; }

/* ---------- Aura progress bar ---------- */
.aura-bar {
  height: 8px;
  background: #e9eaee;
  border-radius: 6px;
  overflow: hidden;
  margin: 8px 0 4px;
}
.aura-bar-wide { width: 100%; max-width: 360px; margin-top: 12px; }
.aura-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd36e, #ff8a00);
  border-radius: 6px;
}

/* ---------- Glowing Aura ring ---------- */
.ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.ring .avatar { border: 2px solid #fff; }
.ring-l1 { background: #c9ccd1; }
.ring-l2 { background: linear-gradient(135deg, #9bdcff, #1877f2); box-shadow: 0 0 6px rgba(24,119,242,.5); }
.ring-l3 { background: linear-gradient(135deg, #ffe29a, #ffb347); box-shadow: 0 0 8px rgba(255,179,71,.6); }
.ring-l4 { background: linear-gradient(135deg, #b5f5c0, #42b72a); box-shadow: 0 0 10px rgba(66,183,42,.6); }
.ring-l5 { background: linear-gradient(135deg, #ffd36e, #ff8a00); box-shadow: 0 0 14px rgba(255,138,0,.7); }
.ring-l6 { background: conic-gradient(#ff9a9e, #fa2a55, #ffd36e, #ff9a9e); box-shadow: 0 0 16px rgba(250,42,85,.7); }
.ring-l7 {
  background: conic-gradient(#ffd700, #ff8a00, #fa2a55, #7a3ff2, #1877f2, #ffd700);
  box-shadow: 0 0 22px rgba(255,200,0,.9);
  animation: spin 6s linear infinite;
}
.ring-l7 .avatar { animation: spin 6s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Level pill + econ chips ---------- */
.level-pill {
  display: inline-block;
  background: linear-gradient(90deg, #fff1cc, #ffe29a);
  color: #8a5a00;
  font-weight: 700;
  font-size: 13px;
  padding: 3px 12px;
  border-radius: 20px;
  margin: 4px 0;
}
.profile-econ { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 12px 0 0; }
.econ-chip {
  background: var(--bg);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
}
.handle { margin: 0; }

/* ---------- Gift button ---------- */
.btn-gift {
  background: linear-gradient(90deg, #ff8a00, #fa2a55);
  color: #fff;
}
.btn-gift:hover { filter: brightness(1.05); }
.post-head-right { display: flex; align-items: center; gap: 6px; }

/* ---------- Reaction palette ---------- */
.react-disclosure { position: relative; }
.react-disclosure > summary { list-style: none; cursor: pointer; }
.react-disclosure > summary::-webkit-details-marker { display: none; }
.react-palette {
  position: absolute;
  bottom: 44px;
  left: 0;              /* anchor to the button's left edge (React sits far-left) */
  display: flex;
  gap: 2px;
  background: var(--sheet);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(20, 24, 40, 0.22);
  padding: 6px 8px;
  z-index: 10;
}
.react-emoji {
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  transition: transform .1s;
}
.react-emoji:hover { transform: scale(1.3); }
.react-emoji.chosen { background: #e7f3ff; }

/* Reaction summary: swap the default "Like" for the chosen reaction (no reload). */
.react-summary .react-none, .react-summary .react-set { display: inline-flex; align-items: center; gap: 6px; }
.react-summary .react-set { display: none; }
.react-summary.liked .react-none { display: none; }
.react-summary.liked .react-set { display: inline-flex; }

/* Per-type reaction tallies in the stats row */
.react-tally-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.react-tally { display: inline-flex; align-items: center; gap: 3px; }
.rt-emoji { font-size: 15px; line-height: 1; }
.rt-count { font-size: 13px; color: var(--text-2); font-weight: 600; }
.rt-none { font-size: 13px; }

/* ---------- Hype badge ---------- */
.hype-badge {
  display: inline-block;
  background: linear-gradient(90deg, #e9d5ff, #c4b5fd);
  color: #5b21b6;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
}

/* ---------- Toasts ---------- */
.toast {
  max-width: 1100px;
  margin: 0 auto 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 600;
  box-shadow: var(--shadow);
}
.toast-good { border-left-color: var(--green); background: #f0fff4; }
.alert-info { background: #e7f3ff; border: 1px solid #b9dbff; color: #1a4f8a; }

/* ---------- Gift sheet ---------- */
.gift-sheet { overflow: hidden; }
.gift-hero { text-align: center; padding: 8px 0 16px; }
.gift-hero h2 { margin: 6px 0; }
.snake-loop { font-size: 48px; animation: bob 2.5s ease-in-out infinite; }
.snake-loop.big { font-size: 72px; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(6deg); } }
.gift-balance { margin-top: 8px; color: var(--text-2); }
.gift-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto; }
.gift-label { font-weight: 700; margin-top: 6px; }
.gift-select, .gift-amount {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
}
.amount-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 700;
}
.chip:hover { background: #ffe29a; }
.gift-send { margin-top: 8px; }
.center { text-align: center; }

/* ---------- Gift success ---------- */
.gift-success { text-align: center; position: relative; overflow: hidden; padding: 36px 16px; }
.gift-success h2 { margin: 10px 0; }
.gift-success-to { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; margin: 10px 0; }
.gift-success-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti span {
  position: absolute;
  top: -10px;
  left: calc(var(--i) * 4.16%);
  width: 8px; height: 14px;
  background: hsl(calc(var(--i) * 40), 90%, 60%);
  opacity: .9;
  animation: fall 1.8s linear infinite;
  animation-delay: calc(var(--i) * 0.07s);
}
@keyframes fall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(360px) rotate(360deg); opacity: 0; }
}

/* ---------- Leagues ---------- */
.league-head { text-align: center; margin-bottom: 12px; }
.league-tier { font-size: 22px; font-weight: 800; }
.league-list { list-style: none; padding: 0; margin: 0; }
.league-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  border-bottom: 1px solid #eee;
}
.league-row.me { background: #e7f3ff; }
.league-row.promote { border-left: 4px solid var(--green); }
.league-row.demote { border-left: 4px solid #e41e3f; }
.league-rank { width: 28px; text-align: center; font-weight: 800; color: var(--text-2); }
.league-name { flex: 1; font-weight: 600; }
.league-pulse { font-weight: 800; color: #7a3ff2; }
.you-tag { background: var(--blue); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 10px; margin-left: 6px; }
.zone-tag.up { color: var(--green); font-weight: 800; }
.zone-tag.down { color: #e41e3f; font-weight: 800; }

/* ---------- Pools ---------- */
.section-bar { display: flex; align-items: center; justify-content: space-between; }
.pool-row { display: flex; align-items: center; gap: 12px; color: var(--text); }
.pool-info { flex: 1; }
.pool-title { font-weight: 700; }
.pool-amount { text-align: right; }
.pool-total { font-weight: 800; display: block; }
.pool-status { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; }
.pool-status-open { background: #e7f7ec; color: #1a7a3a; }
.pool-status-paid { background: #eee; color: var(--text-2); }
.pool-header { display: flex; gap: 14px; align-items: center; }
.pool-big-total { font-size: 28px; font-weight: 800; margin: 16px 0; display: flex; align-items: center; gap: 10px; }
.pool-contribute { display: flex; gap: 8px; align-items: center; }
.pool-contribute input { width: 120px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.pool-contrib-amt { font-weight: 700; }

/* ---------- Invites ---------- */
.invite-row { display: flex; flex-direction: column; gap: 10px; }
.invite-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.invite-code { background: var(--bg); padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.activation-bars { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.activation-bars span { background: var(--bg); padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.activation-bars span.done { background: #e7f7ec; color: #1a7a3a; }

/* ---------- Settings (email notifications) ---------- */
.settings-form { display: flex; flex-direction: column; gap: 6px; }
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
}
.toggle-row:hover { background: var(--hover); }
.toggle-row input[type='checkbox'] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue); cursor: pointer; }
.toggle-row span { display: flex; flex-direction: column; }
.toggle-title { font-weight: 600; }
.toggle-sub { font-size: 13px; color: var(--text-2); }
.toggle-master { background: var(--bg); border: 1px solid var(--border); margin-bottom: 8px; }
.toggle-group { display: flex; flex-direction: column; gap: 4px; padding-left: 6px; border-left: 2px solid var(--border); margin-left: 6px; }
.settings-form .form-actions { margin-top: 14px; }

/* ============================================================
   PWA install banner + mobile bottom navigation
   ============================================================ */

/* Install-to-home-screen banner (shown only when the browser offers install) */
.pwa-install {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  max-width: 520px;
  margin: 0 auto;
}
.pwa-install[hidden] { display: none; }
.pwa-install-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.pwa-install-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.pwa-install-txt strong { font-size: 15px; }
.pwa-install-txt span { font-size: 12px; color: var(--text-2); }
.pwa-install-x {
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 15px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  flex: none;
}
.pwa-install-x:hover { background: var(--hover); }

/* Bottom tab bar base styles live here; visibility is controlled in the mobile
   media query (.bottomnav is hidden on desktop by the rule placed BEFORE that
   query so source order lets the media rule win). */

/* ============================================================
   Messenger refinements (Facebook-style)
   ============================================================ */
.chat-peer-name { font-weight: 600; }
.chat-head { position: sticky; top: 0; background: var(--card); z-index: 2; }

/* Incoming messages get a small avatar gutter (shown on the last of a run). */
.bubble-row { align-items: flex-end; gap: 6px; margin-bottom: 1px; }
.bubble-row.run-end { margin-bottom: 8px; }
.bubble-av { width: 28px; height: 28px; flex: none; }
.bubble-av img, .bubble-av .avatar { width: 28px; height: 28px; }
.bubble-row.mine { padding-left: 34px; }          /* balance the avatar gutter */

/* Grouped bubble radii, Messenger-style. */
.bubble-row.theirs .bubble { border-radius: 4px 18px 18px 4px; }
.bubble-row.theirs .bubble.bubble-first { border-top-left-radius: 18px; }
.bubble-row.theirs .bubble.bubble-last { border-bottom-left-radius: 18px; }
.bubble-row.mine .bubble { border-radius: 18px 4px 4px 18px; }
.bubble-row.mine .bubble.bubble-first { border-top-right-radius: 18px; }
.bubble-row.mine .bubble.bubble-last { border-bottom-right-radius: 18px; }

/* Rounded input + circular send button. */
.chat-form { align-items: center; gap: 10px; }
.chat-form input { background: var(--bg); border-radius: 20px; }
.chat-send {
  flex: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-send:hover { background: var(--blue-dark); }

/* Conversation list: bump avatar, add an unread dot. */
.convo { padding: 10px 12px; border-radius: 10px; }
.convo-unread { background: #e7f3ff; }
.convo-name { font-size: 15px; }
.convo-unread .convo-name { font-weight: 700; }
.convo-badge {
  min-width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background: var(--blue);
  font-size: 0;
  align-self: center;
}

/* Slimmer, sleeker install banner. */
.pwa-install { padding: 9px 12px; border-radius: 16px; }
.pwa-install-ic { width: 38px; height: 38px; }
.pwa-install-txt strong { font-size: 14px; }

/* Keep the top-bar chips on one line (sleeker). */
.nav-logout .btn { white-space: nowrap; }
.wallet, .wallet span { white-space: nowrap; }

/* Search page: a visible search bar (the top-bar search is hidden on mobile) */
.search-page-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 6px 6px 14px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.search-page-ic { color: var(--text-2); font-size: 16px; }
.search-page-form input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 16px;
  outline: none;
  padding: 8px 0;
}
.search-page-form .btn { flex: none; border-radius: 20px; }

/* ============================================================
   Comments sheet (mobile slide-up, Facebook-style)
   ============================================================ */
.comments-head { display: none; }               /* only shown in the mobile sheet */
.comments-title { font-weight: 700; font-size: 16px; }
.comments-close {
  border: none; background: none; color: var(--text-2);
  font-size: 18px; cursor: pointer; padding: 4px 10px; border-radius: 8px; line-height: 1;
}
.comments-close:hover { background: var(--hover); }
.comments-note { padding: 6px 2px; }
.comments-backdrop {
  position: fixed; inset: 0; z-index: 310;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.comments-backdrop.show { opacity: 1; pointer-events: auto; }
body.no-scroll { overflow: hidden; }

/* ============================================================
   Slide-out drawer menu + scroll-away bars (mobile)
   ============================================================ */
.nav-left { display: flex; align-items: center; gap: 4px; min-width: 0; }
.nav-menu-btn {
  display: none;                       /* shown on mobile/tablet via media query */
  border: none; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--text);
  padding: 4px 8px; border-radius: 8px;
}
.nav-menu-btn:hover { background: var(--hover); }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 84%; max-width: 330px;
  z-index: 400;
  background: rgba(248, 250, 253, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  border-right: 1px solid var(--glass-border);
  box-shadow: 24px 0 60px rgba(20, 24, 40, 0.18);
  transform: translateX(-100%);
  transition: transform 0.34s var(--ease);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 390;
  background: rgba(10, 14, 25, 0.4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }
.drawer-head { padding: 20px 16px 16px; border-bottom: 1px solid var(--border); }
.drawer-user { display: flex; align-items: center; gap: 13px; color: var(--text); }
.drawer-id { display: flex; flex-direction: column; min-width: 0; }
.drawer-name { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-handle { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.drawer-wallet { display: flex; gap: 10px; margin-top: 14px; }
.dw-stat {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 15px;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  color: var(--text); transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.dw-stat:active { transform: scale(0.97); }
.dw-ic { display: inline-flex; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12)); }
.dw-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.dw-num { font-weight: 800; font-size: 17px; }
.dw-lbl { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.drawer-links { display: flex; flex-direction: column; padding: 10px; gap: 2px; flex: 1; }
.drawer-links a {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 13px; border-radius: 13px;
  font-weight: 600; font-size: 15px; color: var(--text);
  transition: background 0.18s var(--ease);
}
.drawer-links a .ic { color: var(--text-2); }
.drawer-links a:hover, .drawer-links a:active { background: var(--hover); }
.drawer-links a:hover .ic { color: var(--brand); }
.drawer-logout { padding: 12px; border-top: 1px solid var(--border); }
.drawer-logout .btn { width: 100%; }

/* Bars slide away on scroll-down, back on scroll-up (set by footer script). */
.navbar { transition: transform 0.25s ease; }
.bottomnav { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0s; }

@media (max-width: 900px) {
  .nav-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  body.nav-hidden .navbar { transform: translateY(-100%); }
}
@media (min-width: 901px) {
  .drawer, .drawer-backdrop { display: none; }   /* desktop uses the sidebar */
}
@media (max-width: 680px) {
  body.nav-hidden .bottomnav { transform: translateY(100%); }
}

/* ============================================================
   Video posts + Reels
   ============================================================ */
/* Inline video in a normal post */
.post-video-wrap { margin: 12px -16px 0; background: #000; }
.post-video { width: 100%; max-height: 70vh; display: block; }
.post-video-short .post-video { max-height: 80vh; }

/* Composer media pickers */
.composer-pickers { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.composer-reel { color: var(--text-2); }

/* The `hidden` attribute must always win over the `display` values we set on
   classes below (a class selector otherwise overrides the UA [hidden] rule). */
[hidden] { display: none !important; }

/* ---- Create-reel: Snapchat-style camera ---- */
.cam {
  position: fixed; inset: 0; z-index: 300; background: #000; overflow: hidden;
  color: #fff;
}
.cam-view {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #000;
}
.cam-close {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 20px;
}
.cam-timer {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-weight: 700; font-size: 14px;
  padding: 5px 12px; border-radius: 999px;
}
.cam-timer::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; }
.cam-side {
  position: absolute; top: 96px; right: 12px; z-index: 4;
  display: flex; flex-direction: column; gap: 20px;
}
.cam-side-btn {
  background: none; border: none; cursor: pointer; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.cam-side-ic { font-size: 26px; }
.cam-side-lbl { font-size: 11px; font-weight: 600; opacity: 0.9; }
.cam-blocked {
  position: absolute; inset: 0; z-index: 3; padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; background: #111;
}
.cam-blocked-ic { font-size: 48px; }
.cam-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px calc(30px + env(safe-area-inset-bottom, 0px));
}
.cam-gallery, .cam-bar-spacer { width: 46px; height: 46px; }
.cam-gallery {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 12px; background: rgba(0, 0, 0, 0.35); font-size: 22px;
}
.cam-shutter {
  width: 82px; height: 82px; border-radius: 50%; padding: 0; cursor: pointer;
  background: transparent; border: 5px solid #fff;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s ease;
}
.cam-shutter-ring {
  width: 62px; height: 62px; border-radius: 50%; background: #fff;
  transition: all 0.18s ease;
}
.cam-shutter.recording { border-color: #ff3b30; }
.cam-shutter.recording .cam-shutter-ring { width: 30px; height: 30px; border-radius: 8px; background: #ff3b30; }
.cam-shutter.disabled { opacity: 0.55; }
.cam-review-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  display: flex; flex-direction: column; gap: 12px;
}
.cam-caption {
  width: 100%; border: none; border-radius: 12px; padding: 12px 14px;
  font: inherit; resize: none; outline: none;
  background: rgba(255, 255, 255, 0.14); color: #fff;
}
.cam-caption::placeholder { color: rgba(255, 255, 255, 0.7); }
.cam-review-actions { display: flex; gap: 10px; }
.cam-review-actions .btn { flex: 1; }
.cam-retake { background: rgba(255, 255, 255, 0.18); color: #fff; border: none; }

/* ---- Immersive vertical Reels feed (Facebook-style) ---- */
.reels-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 210;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px calc(12px + 8px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
  pointer-events: none;
}
.reels-topbar-left, .reels-topbar-right { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.reels-top-title { color: #fff; font-size: 22px; font-weight: 800; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.reels-top-btn {
  background: none; border: none; cursor: pointer; color: #fff; font-size: 21px; line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); padding: 2px;
}
.reels-viewport {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
  overflow-y: auto; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.reels-viewport::-webkit-scrollbar { width: 0; height: 0; display: none; }
.reel {
  position: relative;
  /* Exactly one viewport tall — 100% of the fixed container avoids the mobile
     address-bar (100vh vs visible height) mismatch that left the first reel
     slightly too tall. */
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  /* Force the fling to STOP on each reel — a hard flick advances one video at a
     time instead of coasting through several. */
  scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* Contain (not cover) so the whole clip is visible — a wide shot is letterboxed
   instead of zoomed/cropped, and portrait clips still fill the screen. */
.reel-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.reel-play-ind {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 3; font-size: 58px; color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.reel-play-ind.show { opacity: 1; }
.reel-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 42%);
}
.reel-info { pointer-events: auto; flex: 1; min-width: 0; padding: 0 12px calc(20px + env(safe-area-inset-bottom, 0px)); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.reel-author { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; margin-bottom: 8px; }
.reel-author .avatar { border: 2px solid rgba(255, 255, 255, 0.85); }
.reel-author-name { font-size: 15px; }
.reel-caption-text { margin: 0 0 8px; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 1.35; }
.reel-caption-text .mention { color: #9ad0ff; }
.reel-clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel-audio { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.92; }
.reel-actions { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0 10px calc(24px + env(safe-area-inset-bottom, 0px)); }
.reel-actions form { margin: 0; }
.reel-act {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.reel-act-ic { font-size: 30px; line-height: 1; }
.reel-act-n, .reel-act-lbl { font-size: 12px; font-weight: 700; }
.reel-act.liked { color: #4d9bff; }
.reel-progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  height: 3px; background: rgba(255, 255, 255, 0.25);
}
.reel-progress-bar { height: 100%; width: 0; background: #fff; }
.reels-empty {
  position: fixed; inset: 0; z-index: 205; background: #000; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center;
}
.reels-empty-ic { font-size: 46px; }

/* Reels comments — same slide-up bottom sheet as the feed. */
.reel-comments {
  position: fixed; left: 0; right: 0; bottom: 0; top: 12%;
  z-index: 320; background: var(--sheet);
  border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column; padding: 0; margin: 0;
  transform: translateY(102%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
/* Shadow only while open (see note on the feed sheet above). */
.reel-comments.open { transform: translateY(0); box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.28); }
.reel-comments .comments-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.reel-comments .comments-body { flex: 1; overflow-y: auto; padding: 12px 14px; -webkit-overflow-scrolling: touch; }
.reel-comments .comment-form {
  position: sticky; bottom: 0; margin: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border); background: var(--sheet);
}

/* Facebook-style translucent bottom nav over the reels feed. Uses :has() as a
   progressive enhancement — where unsupported the bar simply stays behind the
   feed as before. The overlay content is lifted so nothing hides behind it. */
@media (max-width: 680px) {
  body:has(.reels-viewport) .bottomnav {
    z-index: 220;
    background: rgba(18, 18, 20, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
  }
  body:has(.reels-viewport) .bottomnav-item { color: rgba(255, 255, 255, 0.9); }
  body:has(.reels-viewport) .bottomnav-item.active { color: #fff; }

  .reel-info { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .reel-actions { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .reel-progress { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }

  /* Composer pickers: icons only on mobile so they fit neatly (like post actions). */
  .composer-photo .pick-label, .composer-photo .fname { display: none; }
  .composer-pickers { gap: 14px; }
  .composer-photo { font-size: 22px; padding: 6px 8px; }
}

/* ============================ Cosmic Ritual ============================ */
.cosmic {
  position: relative; overflow: hidden; text-align: center;
  color: #eaf0ff;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(124, 92, 255, 0.45), transparent 60%),
    radial-gradient(90% 60% at 10% 110%, rgba(59, 130, 255, 0.35), transparent 60%),
    linear-gradient(160deg, #171a33 0%, #0d0f1f 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 28px 22px 26px;
}
.cosmic-stars {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.7;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 70% 20%, #cfe0ff, transparent),
    radial-gradient(1.6px 1.6px at 85% 60%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 35% 75%, #dbe6ff, transparent),
    radial-gradient(1.3px 1.3px at 55% 45%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 12% 80%, #fff, transparent);
}
.cosmic-head { position: relative; }
.cosmic-kicker {
  display: inline-block; text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 11px; font-weight: 700; color: #b9a7ff; margin-bottom: 10px;
}
.cosmic-title { margin: 6px 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.cosmic-sub { margin: 0 auto; max-width: 30ch; color: #b6c0e6; }
.cosmic-message { margin: 6px auto 0; max-width: 34ch; color: #d7ddf5; font-size: 16px; line-height: 1.5; font-style: italic; }

/* Sealed card */
.cosmic-sealed { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 20px; }
.cosmic-card {
  width: 150px; height: 210px; border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.cosmic-card-back {
  background:
    radial-gradient(80% 60% at 50% 20%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(160deg, #3b2a7a, #1c1740);
  animation: cosmic-float 4s var(--ease) infinite;
}
@keyframes cosmic-float { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }
.cosmic-back-glyph { font-size: 46px; color: #ffd36b; filter: drop-shadow(0 2px 10px rgba(255, 200, 90, 0.5)); }
.cosmic-back-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #c9bcff; text-transform: uppercase; }
.cosmic-reveal { max-width: 320px; }
.cosmic-streak-note { color: #a9b4dd; max-width: 34ch; margin: 0 auto; }

/* Revealed glyph */
.cosmic-glyph {
  font-size: 68px; line-height: 1; margin: 6px 0 2px;
  filter: drop-shadow(0 6px 20px rgba(124, 92, 255, 0.6));
  animation: cosmic-pop 0.5s var(--ease) both;
}
.cosmic-glyph.is-big { animation: cosmic-pop 0.5s var(--ease) both, cosmic-pulse 2.4s ease-in-out 0.5s infinite; }
@keyframes cosmic-pop { 0% { transform: scale(0.3) rotate(-20deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes cosmic-pulse { 0%,100% { filter: drop-shadow(0 6px 20px rgba(124, 92, 255, 0.6)); } 50% { filter: drop-shadow(0 6px 34px rgba(255, 210, 110, 0.9)); } }
.cosmic-align {
  position: relative; display: inline-block; margin: 4px auto 0;
  background: rgba(255, 210, 110, 0.16); color: #ffd98a;
  border: 1px solid rgba(255, 210, 110, 0.4); border-radius: 999px;
  padding: 6px 14px; font-weight: 700; font-size: 13px;
}
.cosmic-rewards {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0 16px;
}
.cosmic-reward {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px; padding: 12px 6px;
}
.cosmic-reward .ic { color: #fff; }
.cosmic-reward-glyph { font-size: 20px; }
.cosmic-reward-num { font-weight: 800; font-size: 18px; color: #fff; }
.cosmic-reward-lbl { font-size: 11px; color: #a9b4dd; }
.cosmic-return { position: relative; color: #97a2cc; }
.cosmic-actions { position: relative; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.cosmic-actions .btn-ghost { background: rgba(255, 255, 255, 0.12); color: #eaf0ff; }
@media (max-width: 520px) {
  .cosmic-rewards { grid-template-columns: repeat(2, 1fr); }
  .cosmic-title { font-size: 23px; }
}

/* Feed prompt card nudging the daily ritual */
.ritual-nudge {
  display: flex; align-items: center; gap: 14px;
  color: #eaf0ff; text-align: left;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(124, 92, 255, 0.5), transparent 55%),
    linear-gradient(150deg, #1d2040, #12142a);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ritual-nudge-glyph { font-size: 34px; filter: drop-shadow(0 3px 10px rgba(255, 200, 90, 0.5)); flex: none; }
.ritual-nudge-body { flex: 1; min-width: 0; }
.ritual-nudge-title { font-weight: 800; font-size: 16px; color: #fff; }
.ritual-nudge-sub { font-size: 13px; color: #b6c0e6; margin-top: 2px; }
.ritual-nudge .btn { flex: none; }

/* Karma meter (sidebar / profile) */
.karma-row { margin-top: 12px; }
.karma-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.karma-label { font-weight: 700; font-size: 13px; }
.karma-pct { font-weight: 800; font-size: 13px; color: var(--brand); }
.karma-tier { color: var(--text-2); font-weight: 600; }
.karma-bar { height: 8px; border-radius: 999px; background: rgba(20, 24, 40, 0.09); overflow: hidden; }
.karma-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #7c5cff, #3b82ff 55%, #22c55e);
  transition: width 0.5s var(--ease);
}

.karma-row-profile { max-width: 340px; margin: 14px auto 0; }

/* ===================== Cosmic Events (global boost banner) ===================== */
.cosmic-banner {
  position: relative; z-index: 49;
  display: flex; align-items: center; gap: 10px;
  max-width: 1100px; margin: 0 auto; padding: 9px 16px;
  color: #f2f5ff; font-size: 14px; overflow: hidden;
  background: linear-gradient(100deg, #241b52, #3b2a7a 55%, #1f2a63);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cosmic-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.7;
  background-image:
    radial-gradient(1.3px 1.3px at 20% 40%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 62% 30%, #cfe0ff, transparent),
    radial-gradient(1.4px 1.4px at 85% 60%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 40% 75%, #dbe6ff, transparent);
}
.cosmic-banner-full_moon { background: linear-gradient(100deg, #2b2340, #5b4a86 55%, #2b2340); }
.cosmic-banner-meteor { background: linear-gradient(100deg, #1b2450, #2a3f8a 55%, #201a45); }
.cosmic-banner-weekend { background: linear-gradient(100deg, #2a2158, #7c5cff 60%, #3b82ff); }
.cb-glyph { font-size: 20px; filter: drop-shadow(0 2px 8px rgba(255, 210, 110, 0.5)); position: relative; }
.cb-text { position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-text b { font-weight: 800; }
.cb-cta {
  position: relative; flex: none; font-weight: 800; font-size: 13px;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 12px; border-radius: 999px;
}

/* Event callout on the ritual page */
.cosmic-event-callout {
  position: relative; display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px; padding: 12px 14px; border-radius: 16px; text-align: left;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
}
.cosmic-event-callout .cec-glyph { font-size: 30px; flex: none; }
.cosmic-event-callout .cec-name { font-weight: 800; color: #fff; }
.cosmic-event-callout .cec-blurb { font-size: 13px; color: #c3ccec; }
.cosmic-event-callout .cec-boost {
  flex: none; margin-left: auto; font-weight: 800; font-size: 13px; color: #ffe08a;
  background: rgba(255, 210, 110, 0.14); border: 1px solid rgba(255, 210, 110, 0.35);
  padding: 5px 12px; border-radius: 999px;
}

/* Birthday nudge variants */
.birthday-nudge {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 140, 190, 0.5), transparent 55%),
    linear-gradient(150deg, #3a1d3f, #1a1230);
}
.profile-bday-nudge {
  display: inline-block; margin-top: 12px; padding: 10px 14px; border-radius: 14px;
  font-weight: 650; font-size: 13px; color: #7a3ff2;
  background: rgba(124, 92, 255, 0.1); border: 1px solid rgba(124, 92, 255, 0.25);
}
.profile-bday-nudge:hover { background: rgba(124, 92, 255, 0.16); }

/* ============================ Constellations ============================ */
.const-head { margin: 4px 4px 14px; }
.const-h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
.const-sub { color: var(--text-2); margin: 0; }
.const-card { position: relative; }
.const-aligned {
  border: 1px solid rgba(124, 92, 255, 0.5);
  box-shadow: 0 8px 30px rgba(124, 92, 255, 0.18);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(124, 92, 255, 0.14), transparent 55%),
    rgba(255, 255, 255, 0.72);
}
.const-claimed { opacity: 0.72; }
.const-top { display: flex; align-items: flex-start; gap: 13px; }
.const-glyph { font-size: 34px; line-height: 1; flex: none; }
.const-title { flex: 1; min-width: 0; }
.const-name { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.const-el { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.04em; }
.const-el-fire { background: rgba(255, 120, 80, 0.16); color: #c2470f; }
.const-el-earth { background: rgba(90, 170, 90, 0.16); color: #2f7d32; }
.const-el-air { background: rgba(90, 150, 255, 0.16); color: #2f63c9; }
.const-el-water { background: rgba(80, 190, 220, 0.18); color: #0f7a94; }
.const-blurb { color: var(--text-2); font-size: 13.5px; margin-top: 2px; }
.const-home-tag { flex: none; font-size: 12px; font-weight: 800; color: var(--brand); background: rgba(124, 92, 255, 0.12); border: 1px solid rgba(124, 92, 255, 0.3); padding: 4px 10px; border-radius: 999px; }
.const-stars { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.const-star { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.const-star-dot { font-size: 18px; color: var(--border); flex: none; width: 20px; text-align: center; }
.const-star.lit { color: var(--text); }
.const-star.lit .const-star-dot { color: #f0a83a; filter: drop-shadow(0 1px 4px rgba(240, 168, 58, 0.6)); }
.const-star-label { flex: 1; min-width: 0; font-weight: 600; }
.const-star-prog { flex: none; font-size: 12.5px; font-weight: 700; color: var(--text-2); background: rgba(20, 24, 40, 0.06); border-radius: 999px; padding: 2px 9px; }
.const-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.const-reward { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 14px; flex-wrap: wrap; }
.const-reward .ic { vertical-align: middle; }
.const-bonus { font-size: 11px; font-weight: 700; color: var(--brand); background: rgba(124, 92, 255, 0.1); border-radius: 999px; padding: 1px 8px; }
.const-done { color: var(--green); font-weight: 800; font-size: 14px; }
.const-progress-text { color: var(--text-2); font-size: 13px; font-weight: 600; }

/* ============================ Guide / Cosmic Codex ============================ */
.guide-hero {
  position: relative; overflow: hidden; text-align: center; color: #eaf0ff;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(124, 92, 255, 0.45), transparent 60%),
    linear-gradient(160deg, #191c36 0%, #0e1020 100%);
  border: 1px solid rgba(255, 255, 255, 0.12); padding: 26px 22px;
}
.guide-kicker { position: relative; display: inline-block; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; color: #b9a7ff; }
.guide-h1 { position: relative; margin: 8px 0 6px; font-size: 27px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.guide-lead { position: relative; margin: 0 auto; max-width: 44ch; color: #b6c0e6; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; }
.guide-toc a {
  font-size: 13px; font-weight: 650; color: var(--text); padding: 6px 12px; border-radius: 999px;
  background: rgba(20, 24, 40, 0.05); border: 1px solid var(--glass-border);
}
.guide-toc a:hover { background: rgba(59, 109, 255, 0.12); color: var(--brand); }
.guide-sec { scroll-margin-top: 74px; }
.guide-sec h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 10px; }
.guide-sec h3 { font-size: 15px; margin: 0 0 6px; }
.gs-ic { font-size: 22px; }
.guide-sec p { color: var(--text-2); margin: 0 0 10px; }
.guide-sec p a, .guide-foot a { color: var(--brand); font-weight: 650; }
.guide-list { margin: 0; padding-left: 20px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; }
.guide-list b { color: var(--text); }
.guide-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.guide-callout {
  margin-top: 12px; padding: 12px 14px; border-radius: 14px; color: var(--text);
  background: rgba(124, 92, 255, 0.08); border: 1px solid rgba(124, 92, 255, 0.22); font-size: 14px;
}
.guide-callout b { color: var(--brand); }
.guide-levels { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.guide-level {
  display: grid; grid-template-columns: 90px 110px 1fr; gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: 10px; background: rgba(20, 24, 40, 0.04); font-size: 13.5px;
}
.gl-name { font-weight: 800; }
.gl-need { color: var(--text-2); font-weight: 600; }
.gl-unlock { color: var(--text-2); }
.guide-foot { text-align: center; margin: 18px 4px 8px; }
@media (max-width: 560px) {
  .guide-cols { grid-template-columns: 1fr; }
  .guide-level { grid-template-columns: 84px 1fr; }
  .gl-unlock { grid-column: 1 / -1; }
}

/* ============================ Quantum Spin ============================ */
.quantum {
  position: relative; overflow: hidden; text-align: center; color: #eaf0ff;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(124, 92, 255, 0.4), transparent 60%),
    linear-gradient(160deg, #171a36 0%, #0d0f1f 100%);
  border: 1px solid rgba(255, 255, 255, 0.12); padding: 24px 18px 26px;
}
.q-head { position: relative; }
.q-kicker { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; color: #b9a7ff; }
.q-title { margin: 6px 0 6px; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.q-sub { margin: 0 auto 4px; max-width: 40ch; color: #b6c0e6; }
.q-left-wrap { display: inline-block; margin-top: 4px; color: #dfe5ff; }
.q-left-wrap b { color: #ffd36b; }

.q-wheel-wrap { position: relative; width: min(340px, 84vw); aspect-ratio: 1; margin: 18px auto 6px; }
.q-pointer {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-top: 24px solid #ffd36b; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.q-disc {
  position: absolute; inset: 0; border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(0, 0, 0, 0.35);
  transition: transform 4s cubic-bezier(0.15, 0.9, 0.2, 1);
  will-change: transform;
}
.q-seg {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); pointer-events: none;
}
.q-seg-jackpot { color: #3a2500; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4); }
.q-hub-form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; margin: 0; }
.q-hub {
  width: 84px; height: 84px; border-radius: 50%; cursor: pointer;
  border: 4px solid #fff; background: linear-gradient(135deg, #3b82ff, #7c5cff);
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 0.04em;
  box-shadow: 0 6px 20px rgba(59, 109, 255, 0.5), inset 0 2px 6px rgba(255, 255, 255, 0.3);
  transition: transform 0.12s var(--ease), box-shadow 0.2s var(--ease);
}
.q-hub:hover:not(:disabled) { transform: scale(1.05); }
.q-hub:active:not(:disabled) { transform: scale(0.95); }
.q-hub:disabled { opacity: 0.6; cursor: default; background: #454a68; border-color: rgba(255,255,255,0.5); }

.q-result {
  position: relative; margin: 14px auto 0; max-width: 320px; min-height: 0; height: 0; overflow: hidden;
  opacity: 0; transform: translateY(6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.q-result.show { height: auto; opacity: 1; transform: translateY(0); padding: 14px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); }
.qr-title { font-size: 20px; font-weight: 800; color: #fff; }
.qr-sub { color: #cdd5f2; font-weight: 600; margin-top: 2px; }
.q-result.jackpot { background: rgba(255, 210, 110, 0.16); border-color: rgba(255, 210, 110, 0.5); }
.q-result.jackpot .qr-title { color: #ffe08a; }
.q-note { position: relative; margin-top: 14px; }
.q-note a { color: #9ad0ff; }

.q-history { position: relative; margin: 16px auto 0; max-width: 320px; text-align: left; }
.q-history-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #97a2cc; margin-bottom: 8px; }
.q-history-row { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); margin-bottom: 6px; }
.q-history-row.jackpot { background: rgba(255, 210, 110, 0.14); }
.qh-label { color: #cdd5f2; font-weight: 600; }
.qh-won { color: #fff; font-weight: 700; }

/* Composer attachment preview */
.composer-preview {
  margin: 12px 0 4px; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; background: rgba(20, 24, 40, 0.04);
}
.composer-preview-media { display: block; width: 100%; max-height: 340px; object-fit: contain; background: #000; }
.composer-preview-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px;
}
.composer-preview-name {
  font-size: 13px; color: var(--text-2); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.composer-preview-remove {
  flex: none; border: none; cursor: pointer; font-weight: 700; font-size: 13px;
  color: #d02f4a; background: rgba(224, 30, 63, 0.1); border-radius: 999px; padding: 5px 12px;
}
.composer-preview-remove:hover { background: rgba(224, 30, 63, 0.18); }

/* ===================== Vibe Duel ===================== */
.duel-hero {
  position: relative; overflow: hidden; text-align: center;
  color: #fff; background: linear-gradient(150deg, #3a1c6e 0%, #7b2f5e 55%, #b8443f 100%);
}
.duel-kicker { position: relative; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #f4c9b0; }
.duel-title { position: relative; margin: 6px 0 8px; font-size: 30px; }
.duel-sub { position: relative; max-width: 460px; margin: 0 auto; color: rgba(255,255,255,0.85); font-size: 14px; }
.duel-record {
  position: relative; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 16px; font-size: 13px; color: rgba(255,255,255,0.9);
}
.duel-record b { color: #fff; }
.duel-record .dr-bal { margin-left: auto; }

.duel-sec { margin-top: 16px; }
.duel-h2 { margin: 0 0 14px; font-size: 18px; }
.duel-guide { background: rgba(120, 90, 200, 0.05); }

.duel-label { display: block; font-weight: 700; font-size: 13px; margin: 14px 0 6px; }
.duel-select, .duel-amount {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  font-size: 15px; background: var(--surface); color: var(--text);
}

/* Element picker */
.elem-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 4px 0; }
.elem-opt { position: relative; cursor: pointer; }
.elem-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.elem-face {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px;
  border: 1.5px solid var(--border); border-radius: 12px; transition: all 0.15s ease;
  background: var(--surface);
}
.elem-opt input:checked + .elem-face,
.elem-opt.chosen .elem-face {
  border-color: #7b2f9e; background: rgba(123, 47, 158, 0.12); box-shadow: 0 0 0 3px rgba(123,47,158,0.14);
}
.elem-glyph { font-size: 22px; line-height: 1; }
.elem-name { font-size: 12px; font-weight: 600; color: var(--text-2); }

.duel-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.duel-row:first-of-type { border-top: none; }
.duel-incoming { flex-direction: column; align-items: stretch; }
.duel-who { display: flex; align-items: center; gap: 10px; }
.duel-name { font-weight: 700; }
.duel-pick { margin: 4px 0; }
.duel-actions { margin-top: 10px; }
.duel-decline { align-self: flex-end; }

.elem-legend { display: grid; gap: 8px; }
.elem-legend-row { display: flex; align-items: center; gap: 8px; }
.elem-legend-row .elem-name { min-width: 56px; }

.duel-hist {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  margin-bottom: 6px; background: rgba(127, 127, 160, 0.08);
}
.dh-foe { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-els { font-size: 17px; letter-spacing: 2px; }
.dh-vs { font-size: 11px; color: var(--text-2); margin: 0 3px; }
.dh-outcome { font-weight: 700; font-size: 13px; }
.dh-won { color: #1f9d55; }
.dh-lost { color: #d02f4a; }
.dh-draw, .dh-declined, .dh-expired, .dh-cancelled { color: var(--text-2); }
.duel-hist-won { background: rgba(31, 157, 85, 0.1); }
.duel-hist-lost { background: rgba(208, 47, 74, 0.08); }

@media (max-width: 480px) {
  .elem-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .elem-glyph { font-size: 19px; }
  .elem-name { font-size: 10px; }
}

/* ===================== Synchronicity ===================== */
/* Clock bar in the messenger — quiet by default, glows on a sync time. */
.sync-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: rgba(120, 90, 200, 0.05); transition: background 0.3s ease;
}
.sync-clock {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em; color: var(--text-2); min-width: 96px;
}
.sync-hint { font-size: 12.5px; color: var(--text-2); flex: 1; min-width: 0; }
.sync-fill {
  border: none; cursor: pointer; font-weight: 700; font-size: 12.5px; color: #fff;
  background: linear-gradient(135deg, #7b5be0, #b44bd0); border-radius: 999px; padding: 5px 12px;
}
.sync-bar.is-live {
  background: linear-gradient(90deg, rgba(123,91,224,0.16), rgba(180,75,208,0.16));
  animation: syncPulse 1.6s ease-in-out infinite;
}
.sync-bar.is-live .sync-clock { color: #7b3fc0; }
.sync-bar.is-live .sync-hint { color: #7b3fc0; font-weight: 600; }
@keyframes syncPulse { 0%,100% { box-shadow: inset 0 0 0 0 rgba(123,91,224,0); } 50% { box-shadow: inset 0 -2px 0 0 rgba(123,91,224,0.5); } }
.sync-help { margin-left: auto; font-size: 16px; text-decoration: none; opacity: 0.7; }
.sync-help:hover { opacity: 1; }

/* Synced message bubble */
.bubble-sync {
  position: relative;
  background: linear-gradient(135deg, #7b5be0, #b44bd0) !important; color: #fff !important;
  box-shadow: 0 2px 14px rgba(123, 91, 224, 0.35);
}
.bubble-sync-personal { background: linear-gradient(135deg, #e0724b, #d04ba0) !important; }
.sync-badge {
  display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9;
}

/* Promo card on the messages inbox */
.sync-promo {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 14px;
  text-decoration: none; color: inherit;
  background: linear-gradient(120deg, rgba(123,91,224,0.1), rgba(180,75,208,0.1));
  border: 1px solid rgba(123, 91, 224, 0.25);
}
.sync-promo-glyph { font-size: 26px; flex: none; }
.sync-promo-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sync-promo-title { font-weight: 700; font-size: 14px; }
.sync-promo-sub { font-size: 12.5px; color: var(--text-2); }
.sync-promo-count { margin-left: auto; flex: none; font-size: 12px; color: #7b3fc0; text-align: center; }
.sync-promo-count b { display: block; font-size: 18px; }

/* Per-message send time (local hour:minute) inside the bubble */
.bubble-stamp {
  display: block; margin-top: 3px; font-size: 10px; line-height: 1;
  opacity: 0.55; font-variant-numeric: tabular-nums; text-align: right;
}
.bubble-sync .bubble-stamp { opacity: 0.85; color: rgba(255, 255, 255, 0.9); }

/* ===================== Confirm dialog (destructive actions) ===================== */
.confirm-modal {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(10, 12, 24, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.confirm-modal.show { display: flex; animation: confirmFade 0.15s ease; }
@keyframes confirmFade { from { opacity: 0; } to { opacity: 1; } }
.confirm-card {
  background: #fff; color: var(--text); border-radius: 18px;
  max-width: 360px; width: 100%; padding: 22px; text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}
.confirm-msg { font-size: 15.5px; font-weight: 600; line-height: 1.45; margin-bottom: 18px; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-actions .btn { min-width: 112px; }
.confirm-ok { background: #e01e3f; color: #fff; border: none; }
.confirm-ok:hover { background: #c81a37; }

/* ===================== Install app (PWA / Add to Home Screen) ===================== */
.install-banner {
  position: fixed; left: 50%; bottom: 20px; z-index: 900;
  transform: translateX(-50%) translateY(20px);
  display: none; align-items: center; gap: 12px;
  width: min(440px, calc(100% - 24px)); padding: 12px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
  opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
}
.install-banner.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.install-ic { font-size: 24px; flex: none; }
.install-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.install-txt b { font-size: 14px; }
.install-txt span { font-size: 12px; color: var(--text-2); }
.install-go { flex: none; }
.install-dismiss {
  flex: none; border: none; background: transparent; color: var(--text-2);
  font-size: 15px; cursor: pointer; padding: 4px 6px; line-height: 1;
}
.install-dismiss:hover { color: var(--text); }
/* Clear the mobile bottom tab bar. */
@media (max-width: 680px) { .install-banner { bottom: 78px; } }

/* Karma "trending" indicator (live target while the value eases toward it) */
.karma-bar { position: relative; overflow: visible; }
.karma-ghost {
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #fff; border: 2px solid #7c5cff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.karma-trend { margin-top: 5px; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.karma-trend-up { color: #16a34a; }
.karma-trend-down { color: #dc2626; }

/* ===================== Feed feature callouts ===================== */
.feed-promo { position: relative; overflow: hidden; }
.feed-promo::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #7c5cff, #b44bd0);
}
.fp-top { display: flex; align-items: center; gap: 12px; }
.fp-icon {
  width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center;
  font-size: 23px; color: #fff; background: linear-gradient(135deg, #7c5cff, #b44bd0);
  box-shadow: 0 6px 16px rgba(123, 91, 224, 0.32);
}
.fp-heads { min-width: 0; }
.fp-kicker { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #7b3fc0; }
.fp-tag { color: var(--text-2); font-weight: 600; letter-spacing: 0; text-transform: none; }
.fp-title { margin: 3px 0 0; font-size: 16px; line-height: 1.25; }
.fp-body { margin: 10px 0 12px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.fp-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fp-link { font-weight: 600; font-size: 13px; color: #7b3fc0; text-decoration: none; }
.fp-link:hover { text-decoration: underline; }
.fp-spin-result { margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--text); }
.fp-spin-result.jackpot { color: #b8860b; }

/* Per-feature accent */
.feed-promo-quantum::before { background: linear-gradient(180deg, #5b3fb0, #ffcf4d); }
.feed-promo-quantum .fp-icon { background: linear-gradient(135deg, #5b3fb0, #b44bd0); }
.feed-promo-ritual::before { background: linear-gradient(180deg, #3a1c6e, #7b2f5e); }
.feed-promo-ritual .fp-icon { background: linear-gradient(135deg, #3a1c6e, #7b2f5e); }
.feed-promo-ritual .fp-kicker, .feed-promo-ritual .fp-link { color: #7b2f5e; }
.feed-promo-duel::before { background: linear-gradient(180deg, #7b2f5e, #b8443f); }
.feed-promo-duel .fp-icon { background: linear-gradient(135deg, #7b2f5e, #b8443f); }
.feed-promo-duel .fp-kicker, .feed-promo-duel .fp-link { color: #b8443f; }
.feed-promo-constellations::before { background: linear-gradient(180deg, #2f2170, #3b82ff); }
.feed-promo-constellations .fp-icon { background: linear-gradient(135deg, #2f2170, #3b82ff); }
.feed-promo-constellations .fp-kicker, .feed-promo-constellations .fp-link { color: #2f5fd0; }
.feed-promo-gift::before { background: linear-gradient(180deg, #e0724b, #d04ba0); }
.feed-promo-gift .fp-icon { background: linear-gradient(135deg, #e0724b, #d04ba0); }
.feed-promo-gift .fp-kicker, .feed-promo-gift .fp-link { color: #d04ba0; }

/* Head-to-head sync scoreboard (under the messenger clock) */
.sync-score {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 14px; border-bottom: 1px solid var(--border);
  background: rgba(123, 91, 224, 0.04); font-size: 13px;
}
.ss-trophy { font-size: 15px; }
.ss-side { color: var(--text-2); font-weight: 600; }
.ss-side b { color: var(--text); font-size: 15px; }
.ss-lead { color: #7b3fc0; }
.ss-lead b { color: #7b3fc0; }
.ss-sep { color: var(--text-2); }
.ss-status { margin-left: auto; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #7b3fc0; }

/* "Processing…" overlay for a reel/video still transcoding on the host */
.post-video-wrap { position: relative; }
.video-processing {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(10, 12, 24, 0.55); color: #fff; font-size: 13px; font-weight: 600;
}
.vp-spin {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff;
  animation: vpspin 0.8s linear infinite;
}
@keyframes vpspin { to { transform: rotate(360deg); } }
.vp-txt { opacity: 0.9; }

/* ============================ Meditation ============================ */
/* Theme gradients (shared by cards, the daily, and the session stage) */
.med-theme-aurora { background: linear-gradient(150deg, #2b1b62, #4c3aa8 55%, #2f8f9d); }
.med-theme-dusk   { background: linear-gradient(150deg, #1a1740, #3a2a6e 55%, #6a3f7a); }
.med-theme-ocean  { background: linear-gradient(150deg, #10314f, #17607f 55%, #1f9aa8); }
.med-theme-rain   { background: linear-gradient(150deg, #24303f, #3a4f66 55%, #5b7793); }
.med-theme-forest { background: linear-gradient(150deg, #14301f, #1f5a3a 55%, #3f8f6a); }
.med-theme-earth  { background: linear-gradient(150deg, #3a2a1c, #6a4a2f 55%, #a9803f); }
.med-theme-cosmos { background: linear-gradient(150deg, #140f38, #2f2170 55%, #6a3fb0); }
[class*="med-theme-"] { color: #fff; }

/* Home */
.meditate { padding-bottom: 30px; }

/* Elegant circular nav control (back / close) — replaces raw ← ✕ glyphs. */
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--glass-strong); border: 1px solid var(--glass-border); color: var(--text); cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 24, 40, 0.08); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  -webkit-tap-highlight-color: transparent; transition: transform 0.14s var(--ease), background 0.14s ease; }
.icon-btn:hover { transform: translateY(-1px); background: #fff; }
.icon-btn:active { transform: scale(0.93); }
.icon-btn .ic { width: 20px; height: 20px; }
.icon-btn-on-dark { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); color: #fff; box-shadow: none; }
.icon-btn-on-dark:hover { background: rgba(255, 255, 255, 0.26); }
/* Absolute-positioned close/back for centered or full-bleed headers. */
.med-close-abs { position: absolute; top: -4px; right: -2px; }
.aff-close { position: absolute; top: 14px; right: 12px; z-index: 3; }
.med-back-abs { position: absolute; top: 16px; left: 16px; z-index: 4; }

/* Consistent top bar for meditation sub-pages: [back] title. */
.med-topbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.med-topbar-title { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.med-topbar .icon-btn { margin-left: -2px; }

.med-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0 18px; }
.med-greeting { margin: 0; color: var(--text-2); font-weight: 600; }
.med-h1 { margin: 2px 0 0; font-size: 26px; }
.med-stat { flex: none; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 8px 14px; }
.med-stat-num { display: block; font-size: 22px; font-weight: 800; color: #7b3fc0; }
.med-stat-lbl { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }

.med-daily { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px;
  padding: 20px; border-radius: 20px; text-decoration: none; margin-bottom: 22px;
  box-shadow: 0 14px 40px rgba(30, 20, 70, 0.28); min-height: 150px; justify-content: flex-end; }
.med-daily-kicker { position: relative; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; }
.med-daily-title { position: relative; font-size: 24px; font-weight: 800; }
.med-daily-desc { position: relative; opacity: 0.9; font-size: 14px; max-width: 46ch; }
.med-daily-cta { position: relative; margin-top: 10px; align-self: flex-start; background: rgba(255,255,255,0.9); color: #1a1740; font-weight: 800; font-size: 13px; padding: 7px 16px; border-radius: 999px; }

.med-row { margin-bottom: 22px; }
.med-row-title { font-size: 17px; margin: 0 0 12px; }
.med-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.med-row-head .med-row-title { margin-bottom: 12px; }
.med-row-more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--brand-2); flex: none; }
.med-row-more .ic { width: 15px; height: 15px; }

/* Lazy-load skeleton for the home media rows (shown until they fetch). */
.skeleton-card { flex: 0 0 200px; height: 150px; border-radius: 14px; border: 1px solid var(--glass-border);
  background: linear-gradient(100deg, rgba(255,255,255,0.35) 30%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.35) 70%);
  background-size: 220% 100%; animation: skelShimmer 1.3s ease-in-out infinite; }
@keyframes skelShimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }

/* Quick-listen audio card (home scroller) */
.aud-card { flex: 0 0 172px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; justify-content: flex-end;
  height: 128px; padding: 14px; border-radius: 18px; text-decoration: none; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #2f8f9d, #4c4fb0 60%, #6a3fb0); box-shadow: 0 8px 22px rgba(30, 20, 70, 0.2); }
.aud-card-orb { position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.18); }
.aud-card-orb .ic { width: 20px; height: 20px; color: #fff; }
.aud-card-title { font-size: 14px; font-weight: 800; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aud-card-meta { font-size: 11px; opacity: 0.85; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.med-scroller { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.med-scroller::-webkit-scrollbar { height: 0; }
.med-card { flex: 0 0 150px; scroll-snap-align: start; position: relative; overflow: hidden;
  height: 168px; border-radius: 18px; text-decoration: none; padding: 14px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  box-shadow: 0 8px 22px rgba(30, 20, 70, 0.22); }
.med-card-glyph { position: absolute; top: 12px; left: 14px; font-size: 26px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
.med-card-title { font-size: 15px; font-weight: 800; line-height: 1.2; }
.med-card-meta { font-size: 11.5px; opacity: 0.85; }
.med-foot { text-align: center; margin-top: 8px; }

/* Session player */
.med-session { position: relative; overflow: hidden; border-radius: 22px; min-height: 78vh;
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.med-back { position: absolute; top: 16px; left: 16px; z-index: 4; color: #fff; font-size: 22px; text-decoration: none; opacity: 0.85; }
.med-stage { position: relative; z-index: 2; width: 100%; max-width: 420px; text-align: center; color: #fff; }
.med-session-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.8; }
.med-session-title { font-size: 26px; margin: 4px 0 6px; }
.med-session-desc { opacity: 0.9; font-size: 14px; margin: 0 auto 6px; max-width: 42ch; }

.med-orb-wrap { position: relative; width: 240px; height: 240px; margin: 26px auto; display: grid; place-items: center; }
.med-orb { position: absolute; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.35) 45%, rgba(255,255,255,0.06) 70%);
  box-shadow: 0 0 60px rgba(255,255,255,0.45), inset 0 0 40px rgba(255,255,255,0.25);
  transform: scale(0.6); transition: transform 0.25s linear; }
.med-kind-soundscape.med-playing .med-orb,
.med-kind-timer.med-playing .med-orb { animation: medPulse 7s ease-in-out infinite; transition: none; }
@keyframes medPulse { 0%,100% { transform: scale(0.7); } 50% { transform: scale(1.05); } }
.med-orb-center { position: relative; z-index: 2; }
.med-phase { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.med-time { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }

.med-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.med-play { width: 68px; height: 68px; border-radius: 50%; border: none; cursor: pointer; flex: none;
  background: rgba(255,255,255,0.95); box-shadow: 0 8px 24px rgba(0,0,0,0.3); position: relative; }
.med-play-ic { position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #1a1740;
  left: 4px; }
.med-play.is-playing .med-play-ic { border: none; width: 18px; height: 18px; left: 0;
  background: linear-gradient(90deg, #1a1740 0 6px, transparent 6px 12px, #1a1740 12px 18px); }
.med-dur-wrap, .med-vol-wrap { font-size: 12px; color: rgba(255,255,255,0.9); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.med-dur-wrap select { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; padding: 5px 8px; }
.med-dur-wrap select option { color: #1a1740; }
.med-vol-wrap input[type="range"] { width: 84px; accent-color: #fff; }
.med-end { position: relative; z-index: 2; margin-top: 20px; color: #fff !important; border-color: rgba(255,255,255,0.4) !important; }

.med-done { position: relative; z-index: 3; text-align: center; color: #fff; max-width: 360px; }
.med-done-glyph { font-size: 44px; }
.med-done h2 { margin: 6px 0; }
.med-done-reward { margin: 12px 0; font-weight: 800; font-size: 18px; }
.med-done-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.med-done .btn-primary { background: rgba(255,255,255,0.95); color: #1a1740; }
.med-done .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.4); }

/* Meditate feed callout accent */
.feed-promo-meditate::before { background: linear-gradient(180deg, #2b1b62, #2f8f9d); }
.feed-promo-meditate .fp-icon { background: linear-gradient(135deg, #2b1b62, #2f8f9d); }
.feed-promo-meditate .fp-kicker, .feed-promo-meditate .fp-link { color: #2f6f8f; }

/* ===================== Mindfulness: entries / check-in / journal / affirmations ===================== */
.med-entries { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.med-entry { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; text-decoration: none;
  color: #fff; box-shadow: 0 8px 22px rgba(30, 20, 70, 0.18); }
.med-entry-mood { background: linear-gradient(135deg, #2f8f9d, #4c6ef5 70%, #7b5be0); }
.med-entry-aff  { background: linear-gradient(135deg, #6a3fb0, #b44bd0 70%, #e0724b); }
.med-entry-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.18); }
.med-entry-ic .ic { width: 23px; height: 23px; color: #fff; }
.med-entry-body { display: flex; flex-direction: column; min-width: 0; }
.med-entry-title { font-weight: 800; font-size: 14.5px; line-height: 1.2; }
.med-entry-sub { font-size: 11.5px; opacity: 0.9; }
@media (max-width: 460px) { .med-entries { grid-template-columns: 1fr; } }

/* Check-in */
.checkin { padding-bottom: 40px; }
.checkin-head { text-align: center; margin: 8px 0 20px; position: relative; }
.checkin-close { position: absolute; top: -2px; right: 0; text-decoration: none; color: var(--text-2); font-size: 20px; }
.checkin-h1 { font-size: 24px; margin: 0; }
.checkin-sub { color: var(--text-2); font-size: 17px; margin: 4px 0 0; }
.mood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mood-cell { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 6px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--card); transition: all 0.15s ease; }
.mood-cell input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mood-emoji { font-size: 30px; line-height: 1; }
.mood-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.mood-cell.picked { border-color: #7b3fc0; box-shadow: 0 0 0 3px rgba(123, 63, 192, 0.16); }
.mood-cell.picked .mood-label { color: var(--text); }
.mood-positive.picked { background: rgba(34, 197, 94, 0.08); }
.mood-tough.picked { background: rgba(224, 30, 63, 0.06); }

.checkin-reflect { margin-top: 22px; }
.checkin-tags-lbl { font-weight: 700; margin: 0 0 10px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tag-chip { position: relative; cursor: pointer; }
.tag-chip input { position: absolute; opacity: 0; }
.tag-chip span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--card); transition: all 0.12s ease; }
.tag-chip input:checked + span { border-color: #7b3fc0; color: #7b3fc0; background: rgba(123, 63, 192, 0.1); }
.checkin-note { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; font-size: 15px;
  background: var(--card); color: var(--text); resize: vertical; }
.checkin-save { width: 100%; margin-top: 14px; }

/* Journal */
.journal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
.journal-h1 { font-size: 22px; margin: 0; }
.journal-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; font-size: 22px; }
.js-dot { line-height: 1; }
.journal-entry { display: flex; gap: 14px; padding: 14px; margin-bottom: 10px; align-items: flex-start; }
.je-mood { flex: none; text-align: center; width: 62px; }
.je-emoji { font-size: 30px; display: block; }
.je-label { font-size: 12px; font-weight: 700; color: var(--text-2); }
.je-body { flex: 1; min-width: 0; }
.je-time { font-size: 12px; color: var(--text-2); }
.je-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.je-tag { font-size: 11.5px; font-weight: 600; color: #7b3fc0; background: rgba(123, 63, 192, 0.1); padding: 3px 10px; border-radius: 999px; }
.je-note { margin: 6px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

/* Affirmations */
.affirm { position: relative; padding-bottom: 40px; }
.affirm .checkin-close { position: absolute; top: 4px; right: 4px; color: var(--text-2); z-index: 3; }
.aff-daily { position: relative; overflow: hidden; border-radius: 22px; padding: 30px 22px; text-align: center; color: #fff;
  background: linear-gradient(150deg, #140f38, #2f2170 55%, #6a3fb0); box-shadow: 0 16px 44px rgba(30, 20, 70, 0.3); margin: 8px 0 22px; }
.aff-daily-kicker { position: relative; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.85; }
.aff-daily-text { position: relative; font-size: 24px; line-height: 1.4; font-weight: 700; margin: 14px auto; max-width: 24ch; }
.aff-daily-actions { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.aff-receive { background: rgba(255,255,255,0.95); color: #2f2170; }
.aff-receive-msg { position: relative; margin-top: 12px; font-weight: 700; opacity: 0.95; }
.aff-save { cursor: pointer; border: none; background: transparent; padding: 6px; line-height: 1; }
.aff-heart { font-size: 24px; color: rgba(255,255,255,0.85); }
.aff-daily .aff-save.saved .aff-heart { color: #ff5a7a; }
.aff-section { margin-bottom: 22px; }
.aff-h2 { font-size: 17px; margin: 0 0 12px; }
.aff-list { display: flex; flex-direction: column; gap: 10px; }
.aff-card { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--card); }
.aff-card-text { margin: 0; font-size: 15px; line-height: 1.45; }
.aff-card .aff-heart { color: var(--text-2); font-size: 22px; }
.aff-card .aff-save.saved .aff-heart { color: #ff5a7a; }

/* ===================== Mindfulness: stats / reflections / library / watch ===================== */

/* Stats dashboard */
.stats-card { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 20px; text-align: center; color: #fff;
  background: linear-gradient(150deg, #1a1740, #2f2170 55%, #6a3fb0); box-shadow: 0 16px 44px rgba(30, 20, 70, 0.3); }
.stats-badge { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 130px; height: 130px; border-radius: 50%; border: 3px solid rgba(180, 140, 255, 0.6); margin-bottom: 18px; }
.stats-badge-num { font-size: 44px; font-weight: 800; line-height: 1; }
.stats-badge-lbl { font-size: 12px; opacity: 0.9; margin-top: 4px; }
.stats-row { position: relative; display: flex; justify-content: space-around; gap: 8px; margin-top: 14px; }
.stats-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.stats-ic { font-size: 20px; }
.stats-val { font-size: 20px; font-weight: 800; }
.stats-k { font-size: 11px; opacity: 0.85; }
.stats-links { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

/* Reflections hub */
.reflect-list { display: flex; flex-direction: column; }
.reflect-item { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.reflect-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 14px rgba(30, 20, 70, 0.18); }
.reflect-ic .ic { width: 20px; height: 20px; }
.reflect-ic-mood { background: linear-gradient(135deg, #2f8f9d, #4c6ef5); }
.reflect-ic-grat { background: linear-gradient(135deg, #e0724b, #b44bd0); }
.reflect-ic-journal { background: linear-gradient(135deg, #4c6ef5, #7c5cff); }
.reflect-ic-aff { background: linear-gradient(135deg, #7c5cff, #b44bd0); }
.reflect-ic-stats { background: linear-gradient(135deg, #9b6bff, #f0a03a); }
.reflect-body { flex: 1; display: flex; flex-direction: column; }
.reflect-title { font-weight: 700; font-size: 16px; }
.reflect-sub { font-size: 12.5px; color: var(--text-2); }
.reflect-arrow { display: grid; place-items: center; color: var(--text-2); }
.reflect-arrow .ic { width: 18px; height: 18px; }

/* Gratitude */
.grat-form { display: flex; flex-direction: column; gap: 12px; }
.grat-line { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 14px; padding: 4px 12px; background: var(--card); }
.grat-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(123,63,192,0.12); color: #7b3fc0; font-weight: 800; display: grid; place-items: center; font-size: 13px; }
.grat-line input { flex: 1; border: none; background: transparent; padding: 12px 0; font-size: 15px; color: var(--text); }
.grat-line input:focus { outline: none; }

/* Library / Discover */
.lib-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); margin-bottom: 16px; }
.lib-search-ic { opacity: 0.6; }
.lib-search input { flex: 1; border: none; background: transparent; font-size: 15px; color: var(--text); }
.lib-search input:focus { outline: none; }
.lib-note { margin: -6px 0 16px; }
.vid-card { flex: 0 0 200px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text); scroll-snap-align: start; }
.vid-thumb { position: relative; display: block; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #0e0e1a; }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-play { position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; display: grid; place-items: center; font-size: 16px; }
.vid-title { font-size: 14px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vid-author { font-size: 12px; color: var(--text-2); }
.vid-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.vid-grid .vid-card { flex: none; }

/* Watch (YouTube embed) — minimal, chrome-free player */
.watch-frame { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #000; margin: 12px 0 14px;
  box-shadow: 0 14px 40px rgba(20, 24, 40, 0.22); }
.watch-frame iframe, .watch-frame #ytplayer { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Transparent tap layer captures play/pause; sits above the iframe. */
.watch-tap { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; margin: 0; cursor: pointer;
  background: transparent; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.watch-playbtn { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: #1a1740;
  background: rgba(255, 255, 255, 0.95); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35); transition: opacity 0.2s ease, transform 0.2s var(--ease); }
.watch-playbtn .ic { width: 26px; height: 26px; margin-left: 3px; }
/* Show the play button while paused; fade it out while playing. */
.watch-frame.is-playing .watch-playbtn { opacity: 0; transform: scale(0.8); }
.watch-frame:not(.is-playing) .watch-playbtn { opacity: 1; }
.watch-title { font-size: 18px; margin: 0 0 12px; }
.watch-actions { display: flex; align-items: center; gap: 14px; }
.watch-reward { font-weight: 700; color: #7b3fc0; }
.watch-note { margin-top: 10px; }
@media (max-width: 420px) { .vid-grid { grid-template-columns: 1fr; } }

/* Nicer Meditate quick-link tiles (Discover / Reflections / My Stats) */
.med-quicklinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.med-ql { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 108px; padding: 16px 8px; border-radius: 18px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); text-decoration: none; color: var(--text);
  box-shadow: var(--shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: transform 0.14s var(--ease), box-shadow 0.14s ease; }
.med-ql:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30, 20, 70, 0.12); }
.med-ql-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 16px rgba(30, 20, 70, 0.24); }
.med-ql-ic .ic { width: 22px; height: 22px; }
.med-ql-lbl { font-size: 13px; font-weight: 700; text-align: center; }
.med-ql-discover .med-ql-ic { background: linear-gradient(135deg, #3b82ff, #7c5cff); }
.med-ql-reflect .med-ql-ic { background: linear-gradient(135deg, #7c5cff, #b44bd0); }
.med-ql-stats .med-ql-ic { background: linear-gradient(135deg, #9b6bff, #f0a03a); }

/* Library warn note + audio link */
.lib-note-warn { color: #b04000; background: rgba(224, 120, 60, 0.1); border: 1px solid rgba(224, 120, 60, 0.3);
  padding: 10px 12px; border-radius: 12px; margin: -6px 0 16px; line-height: 1.5; }
.lib-audio-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-strong); text-decoration: none; color: var(--text); font-weight: 700;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.lib-audio-link > span:not(.lib-audio-ic) { flex: 1; }
.lib-audio-link .ic { color: var(--text-2); }
.lib-audio-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #2f8f9d, #6a3fb0); }
.lib-audio-ic .ic { width: 20px; height: 20px; color: #fff; }

/* Audio (podcast) list + player */
/* Category filter chips — sticky, horizontally scrollable pill row. */
.aud-filters { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 10px; margin: 0 0 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; position: sticky; top: 0; z-index: 5;
  background: linear-gradient(var(--bg) 60%, transparent); }
.aud-filters::-webkit-scrollbar { height: 0; }
.aud-chip { flex: none; cursor: pointer; white-space: nowrap; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--text-2); background: var(--glass-strong); border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  -webkit-tap-highlight-color: transparent; transition: color 0.14s ease, background 0.14s ease, transform 0.12s var(--ease); }
.aud-chip:active { transform: scale(0.95); }
.aud-chip.is-active { color: #fff; border-color: transparent; background: var(--brand-grad); box-shadow: 0 6px 16px rgba(60, 60, 180, 0.25); }
.aud-group[hidden] { display: none; }
.aud-cat-title { font-size: 20px; font-weight: 800; margin: 22px 0 10px; letter-spacing: -0.01em; }
.aud-cat-title:first-of-type, .aud-group:first-of-type .aud-cat-title { margin-top: 10px; }
.aud-feed-title { font-size: 15px; color: var(--text-2); margin: 0 0 10px; }
.aud-list { display: flex; flex-direction: column; gap: 8px; }
.aud-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--card); text-decoration: none; color: var(--text); }
.aud-play { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #2f8f9d, #6a3fb0); font-size: 14px; }
.aud-body { display: flex; flex-direction: column; min-width: 0; }
.aud-title { font-weight: 700; font-size: 14.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aud-meta { font-size: 12px; color: var(--text-2); }

.aud-player { position: relative; overflow: hidden; border-radius: 22px; padding: 30px 22px; text-align: center; color: #fff;
  background: linear-gradient(150deg, #10314f, #2f2170 55%, #6a3fb0); box-shadow: 0 16px 44px rgba(30, 20, 70, 0.3); margin: 8px 0 16px; }
.aud-orb { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  font-size: 44px; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.15) 70%);
  box-shadow: 0 0 50px rgba(255,255,255,0.35); }
.aud-player-title { position: relative; font-size: 20px; margin: 0 0 4px; }
.aud-player-feed { position: relative; opacity: 0.85; margin: 0 0 16px; font-size: 13px; }
.aud-audio { position: relative; width: 100%; }

/* Push notification settings row */
.push-ui { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.push-status { font-size: 13px; }

/* ===================== Daily Tarot ===================== */
.tarot { padding-bottom: 40px; }
.tarot-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 28px 22px; text-align: center; color: #fff;
  background: linear-gradient(150deg, #1a1140, #3b2170 55%, #6a3fb0); box-shadow: 0 16px 44px rgba(30, 20, 70, 0.32); margin: 6px 0 20px; }
.tarot-kicker { position: relative; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.9; }
.tarot-title { position: relative; font-size: 26px; margin: 8px 0 6px; }
.tarot-sub { position: relative; opacity: 0.9; margin: 0 auto; max-width: 46ch; font-size: 14.5px; }

.tarot-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
@media (max-width: 560px) { .tarot-choices { grid-template-columns: 1fr; } }
.tarot-choice { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 18px;
  border-radius: 20px; background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.tarot-choice-deep { background: linear-gradient(160deg, #241a52, #3c2775); color: #fff; border-color: transparent; }
.tarot-choice-locked { opacity: 0.75; }
.tarot-choice-fan { display: inline-flex; font-size: 34px; line-height: 1; margin-bottom: 4px; filter: drop-shadow(0 4px 8px rgba(30,20,70,.25)); }
.tarot-choice-fan span { display: inline-block; margin: 0 -6px; }
.tarot-choice-fan span:nth-child(odd) { transform: rotate(-8deg); }
.tarot-choice-fan span:nth-child(even) { transform: rotate(8deg) translateY(-3px); }
.tarot-choice-name { font-size: 18px; font-weight: 800; }
.tarot-choice-blurb { font-size: 13px; opacity: 0.85; max-width: 26ch; }
.tarot-choice-meta { font-size: 12px; font-weight: 700; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.04em; }
.tarot-draw-btn { margin-top: 8px; width: 100%; }
.tarot-choice-deep .btn-primary { background: rgba(255,255,255,0.95); color: #2f2170; }
.tarot-foot { text-align: center; margin-top: 12px; }

/* The spread */
.tarot-spread { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
/* Card face = full-bleed Rider–Waite illustration with overlaid labels. */
.tarot-card { position: relative; overflow: hidden; border-radius: 14px; color: #fff; text-align: center;
  box-shadow: 0 10px 26px rgba(30, 20, 70, 0.28); border: 1px solid rgba(255,255,255,0.16); }
.tarot-major { background: linear-gradient(160deg, #3a2170, #6a3fb0 60%, #b48adf); }
.tarot-suit-wands { background: linear-gradient(160deg, #7a2d16, #c2571f 60%, #e08a3a); }
.tarot-suit-cups { background: linear-gradient(160deg, #123a5a, #2f7f9d 60%, #57b0c8); }
.tarot-suit-swords { background: linear-gradient(160deg, #232a52, #4c4fb0 60%, #7b7be0); }
.tarot-suit-pentacles { background: linear-gradient(160deg, #1c4a2e, #2f8f57 60%, #7bcf8a); }
.tc-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35)); }
.tc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.tarot-card.is-rev .tc-img { transform: rotate(180deg); }
.tc-pos { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 7px 9px 14px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; background: linear-gradient(rgba(0,0,0,0.6), transparent); }
.tc-cap { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 18px 8px 9px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8)); }
.tc-name { display: block; font-size: 13px; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.tc-rev { display: inline-block; margin-top: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(224, 120, 60, 0.92); padding: 2px 8px; border-radius: 999px; }

.tarot-analysis { padding: 18px 18px; margin-bottom: 22px; border-left: 4px solid #7c5cff; }
.tarot-h2 { font-size: 17px; margin: 0 0 10px; }
.tarot-analysis-text { margin: 0; font-size: 15px; line-height: 1.6; }

.tarot-breakdown { display: flex; flex-direction: column; gap: 10px; }
.tarot-read-item { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.tri-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px;
  color: #fff; background: linear-gradient(135deg, #6a3fb0, #b44bd0); }
.tri-body { min-width: 0; }
.tri-pos { font-weight: 700; font-size: 14.5px; }
.tri-hint { font-weight: 400; font-size: 13px; }
.tri-card { font-size: 14px; margin: 4px 0 2px; display: flex; align-items: center; gap: 8px; }
.tri-thumb { width: 34px; height: 52px; object-fit: cover; border-radius: 6px; flex: none; box-shadow: 0 2px 6px rgba(30,20,70,0.25); }
.tri-thumb.is-rev { transform: rotate(180deg); }
.tri-revtag { font-size: 11px; font-weight: 700; color: #b04000; background: rgba(224,120,60,0.14); padding: 1px 7px; border-radius: 999px; }
.tri-meaning { margin: 4px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }

/* ---------- Daily Tarot: card-flip reveal ---------- */
.tarot-flip { perspective: 1000px; aspect-ratio: 300 / 512; }
.tarot-flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); }
.tarot-flip-back, .tarot-flip-front { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tarot-flip-front { transform: rotateY(180deg); }
.tarot-flip-back { border-radius: 16px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.18);
  background: radial-gradient(circle at 50% 32%, #55429c, #241a52 72%); box-shadow: 0 10px 26px rgba(30, 20, 70, 0.24); }
.tarot-flip-back::after { content: ''; position: absolute; inset: 7px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.16); }
.tfb-mark { font-size: 40px; color: rgba(255,255,255,0.9); text-shadow: 0 0 20px rgba(180,140,255,0.75); }
/* Only animate right after drawing (?drawn=1); staggered flip per card. */
.tarot-reveal .tarot-flip-inner { animation: tarotFlip 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes tarotFlip { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
@media (prefers-reduced-motion: reduce) { .tarot-reveal .tarot-flip-inner { animation: none; } }

/* ---------- Daily Tarot: "Mystic Noir" deck skin (dark, gothic re-tone of the RWS art) ---------- */
.tarot-mystic .tc-img { filter: brightness(0.7) contrast(1.28) saturate(0.55) sepia(0.4) hue-rotate(205deg); }
.tarot-mystic .tarot-card { border-color: rgba(150, 110, 235, 0.45); box-shadow: 0 10px 26px rgba(20, 8, 45, 0.5), 0 0 0 1px rgba(120,90,220,0.25); }
.tarot-mystic .tarot-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 32%, rgba(150,110,240,0.18), transparent 45%),
    radial-gradient(circle at 50% 55%, transparent 30%, rgba(12,6,30,0.62) 100%),
    linear-gradient(rgba(45,20,85,0.28), rgba(8,4,20,0.5));
  mix-blend-mode: multiply;
}
.tarot-mystic .tc-pos { background: linear-gradient(rgba(10,5,25,0.75), transparent); }
.tarot-mystic .tc-cap { background: linear-gradient(transparent, rgba(8,4,20,0.9)); }
.tarot-mystic .tri-thumb { filter: brightness(0.72) contrast(1.25) saturate(0.55) sepia(0.4) hue-rotate(205deg); }

/* Tarot deck-skin switcher (segmented pill) */
.tarot-deck-switch { display: flex; gap: 6px; justify-content: center; margin: 4px 0 14px; }
.tarot-deck-switch .inline { display: inline-flex; }
.tds-btn { cursor: pointer; border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--text-2);
  font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; -webkit-tap-highlight-color: transparent;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: color 0.14s, background 0.14s, transform 0.12s var(--ease); }
.tds-btn:active { transform: scale(0.96); }
.tds-btn.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #3b2170, #6a3fb0); box-shadow: 0 6px 16px rgba(60, 40, 140, 0.3); }