/*
 * Dextroverse Community v1.0 — Full CSS
 * Scoped: .dxtvc-* classes only. Zero site bleed.
 * Imports theme vars (--neon-primary etc) if available, falls back gracefully.
 */

/* ═══════════════════════════════════════════════════════════
   LOCAL VARS (fallback if theme vars not present)
   ═══════════════════════════════════════════════════════════ */
:root {
  --dxtvc-cyan:    var(--neon-primary,    #00ffff);
  --dxtvc-magenta: var(--neon-secondary,  #ff00ff);
  --dxtvc-green:   var(--neon-accent,     #00ff88);
  --dxtvc-bg:      var(--bg-primary,      #050510);
  --dxtvc-card:    var(--bg-card,         #0a0a1f);
  --dxtvc-border:  var(--border-color,    rgba(0,255,255,0.12));
  --dxtvc-text:    var(--text-primary,    #e0e0ff);
  --dxtvc-muted:   var(--text-secondary,  #8888aa);
  --dxtvc-dark:    var(--text-muted,      #555577);
  --dxtvc-font:    var(--font-primary,    'Rajdhani', sans-serif);
  --dxtvc-mono:    var(--font-body,       'Share Tech Mono', monospace);
  --dxtvc-display: var(--font-display,    'Orbitron', monospace);
  --dxtvc-radius:  var(--radius,          8px);
  --dxtvc-glow-c:  0 0 12px rgba(0,255,255,0.35), 0 0 28px rgba(0,255,255,0.1);
  --dxtvc-glow-m:  0 0 12px rgba(255,0,255,0.35), 0 0 28px rgba(255,0,255,0.1);
  --dxtvc-glow-g:  0 0 10px rgba(0,255,136,0.35), 0 0 22px rgba(0,255,136,0.1);
  --dxtvc-scan:    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,255,0.012) 2px, rgba(0,255,255,0.012) 4px);

  /* Glass tokens — inherit from theme if available, otherwise own fallbacks */
  --glass-1:           var(--glass-1,        rgba(13,13,31,0.55));
  --glass-2:           var(--glass-2,        rgba(13,13,31,0.72));
  --glass-3:           var(--glass-3,        rgba(13,13,31,0.90));
  --glass-blur-sm:     var(--glass-blur-sm,  blur(8px) saturate(140%));
  --glass-blur-md:     var(--glass-blur-md,  blur(16px) saturate(160%));
  --glass-blur-lg:     var(--glass-blur-lg,  blur(28px) saturate(180%));
  --glass-border:      var(--glass-border,   rgba(0,255,255,0.12));
  --glass-shadow:      var(--glass-shadow,   0 4px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04));
  --glass-shadow-lg:   var(--glass-shadow-lg,0 8px 48px rgba(0,0,0,0.7),  inset 0 1px 0 rgba(255,255,255,0.06));
}

/* ═══════════════════════════════════════════════════════════
   SHARED COMPONENTS
   ═══════════════════════════════════════════════════════════ */
.dxtvc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  background: rgba(0,255,255,0.08);
  border: 1px solid rgba(0,255,255,0.4);
  color: var(--dxtvc-cyan);
  border-radius: var(--dxtvc-radius);
  font-family: var(--dxtvc-font); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: all 0.2s ease;
}
.dxtvc-btn:hover { background: rgba(0,255,255,0.15); box-shadow: var(--dxtvc-glow-c); color: var(--dxtvc-cyan); }
.dxtvc-btn--outline { background: transparent; border-color: rgba(0,255,255,0.25); color: var(--dxtvc-muted); }
.dxtvc-btn--outline:hover { border-color: rgba(0,255,255,0.5); color: var(--dxtvc-cyan); }
.dxtvc-btn--follow  { background: rgba(0,255,136,0.08); border-color: rgba(0,255,136,0.4); color: var(--dxtvc-green); }
.dxtvc-btn--follow:hover { background: rgba(0,255,136,0.16); box-shadow: var(--dxtvc-glow-g); }
.dxtvc-btn--following { background: transparent; border-color: rgba(0,255,255,0.15); color: var(--dxtvc-dark); }
.dxtvc-btn--following:hover { border-color: rgba(255,51,85,0.4); color: #ff3355; }
.dxtvc-btn--full { width: 100%; }

.dxtvc-input {
  width: 100%;
  background: rgba(5,5,16,0.8);
  border: 1px solid rgba(0,255,255,0.15);
  border-radius: 6px;
  color: var(--dxtvc-text);
  font-family: var(--dxtvc-mono);
  font-size: 0.88rem;
  padding: 0.6rem 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  caret-color: var(--dxtvc-cyan);
  resize: vertical;
}
.dxtvc-input:focus {
  border-color: rgba(0,255,255,0.45);
  box-shadow: 0 0 0 3px rgba(0,255,255,0.07);
}
.dxtvc-input::placeholder { color: var(--dxtvc-dark); }

.dxtvc-field { margin-bottom: 1rem; }
.dxtvc-label {
  display: block; margin-bottom: 0.35rem;
  font-family: var(--dxtvc-mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dxtvc-cyan);
}
.dxtvc-form-error {
  padding: 0.5rem 0.75rem;
  background: rgba(255,51,85,0.08);
  border: 1px solid rgba(255,51,85,0.3);
  border-radius: 5px;
  color: #ff3355;
  font-family: var(--dxtvc-mono);
  font-size: 0.78rem;
  margin-bottom: 0.75rem;
}
.dxtvc-notice {
  padding: 1rem; background: rgba(0,255,255,0.04);
  border: 1px solid var(--dxtvc-border); border-radius: var(--dxtvc-radius);
  color: var(--dxtvc-muted); font-family: var(--dxtvc-mono); font-size: 0.85rem;
}
.dxtvc-dot-pulse {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--dxtvc-cyan); margin: 0 2px;
  animation: dxtvc-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes dxtvc-dot-pulse {
  0%,80%,100% { transform: scale(0.6); opacity: 0.4; }
  40%         { transform: scale(1);   opacity: 1; }
}
.dxtvc-activity-loading { text-align: center; padding: 2rem; }
.dxtvc-empty-state {
  text-align: center; padding: 3rem 1.5rem;
  color: var(--dxtvc-muted); font-family: var(--dxtvc-mono);
}
.dxtvc-empty-state__icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════
   AVATAR
   ═══════════════════════════════════════════════════════════ */
.dxtvc-avatar {
  border-radius: 50%; border: 2px solid rgba(0,255,255,0.3);
  object-fit: cover; display: block;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dxtvc-avatar--lg {
  width: 120px; height: 120px;
  border: 3px solid var(--dxtvc-cyan);
  box-shadow: var(--dxtvc-glow-c);
  animation: dxtvc-ring-pulse 3s ease-in-out infinite;
}
@keyframes dxtvc-ring-pulse {
  0%,100% { box-shadow: 0 0 8px rgba(0,255,255,0.3); }
  50%     { box-shadow: 0 0 20px rgba(0,255,255,0.6), 0 0 40px rgba(0,255,255,0.15); }
}
.dxtvc-avatar-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.dxtvc-avatar__upload-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,0.55); opacity: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; cursor: pointer;
  transition: opacity 0.2s;
  filter: drop-shadow(0 0 6px var(--dxtvc-cyan));
}
.dxtvc-avatar-wrap:hover .dxtvc-avatar__upload-overlay { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   PROFILE PAGE
   ═══════════════════════════════════════════════════════════ */
.dxtvc-profile { background: var(--dxtvc-bg); min-height: 80vh; }

/* Cover */
.dxtvc-cover {
  position: relative; height: 220px; overflow: hidden;
  background: linear-gradient(135deg, #050510 0%, #0f0a20 50%, #050510 100%);
  background-size: cover; background-position: center;
}
.dxtvc-cover__scanlines {
  position: absolute; inset: 0;
  background: var(--dxtvc-scan); pointer-events: none; z-index: 1;
}
.dxtvc-cover__strip {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--dxtvc-cyan), var(--dxtvc-magenta), var(--dxtvc-green), transparent);
  animation: dxtvc-strip 4s linear infinite;
}
@keyframes dxtvc-strip {
  0%   { opacity: 0.4; }
  50%  { opacity: 0.9; }
  100% { opacity: 0.4; }
}
.dxtvc-cover__change-btn {
  position: absolute; bottom: 14px; right: 14px; z-index: 10;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  background: rgba(5,5,16,0.85);
  border: 1px solid rgba(0,255,255,0.4);
  color: var(--dxtvc-cyan); border-radius: 6px;
  font-family: var(--dxtvc-font); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  backdrop-filter: blur(8px); transition: all 0.2s;
}
.dxtvc-cover__change-btn:hover { background: rgba(0,255,255,0.12); box-shadow: var(--dxtvc-glow-c); }

/* Header */
.dxtvc-profile__header { padding: 0 0 1rem; }
.dxtvc-profile__header-inner {
  display: flex; align-items: flex-start; gap: 1.5rem;
  padding: 1.5rem 0 1rem;
  flex-wrap: wrap;
}
.dxtvc-profile__identity { flex: 1; min-width: 200px; }
.dxtvc-profile__name {
  font-family: var(--dxtvc-display); font-size: 1.6rem; font-weight: 900;
  color: var(--dxtvc-cyan); letter-spacing: 0.04em; margin: 0 0 0.2rem;
  text-shadow: 0 0 16px rgba(0,255,255,0.3);
}
.dxtvc-profile__username {
  font-family: var(--dxtvc-mono); font-size: 0.78rem;
  color: var(--dxtvc-muted); margin-bottom: 0.6rem;
}
.dxtvc-profile__bio {
  color: var(--dxtvc-text); font-size: 0.9rem; line-height: 1.6;
  max-width: 520px; margin-bottom: 0.5rem;
}
.dxtvc-profile__joined {
  font-family: var(--dxtvc-mono); font-size: 0.7rem;
  color: var(--dxtvc-dark); letter-spacing: 0.05em;
}
.dxtvc-profile__actions { display: flex; gap: 0.5rem; flex-shrink: 0; align-self: center; flex-wrap: wrap; }

/* Stats row */
.dxtvc-profile__stats {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  border-top: 1px solid var(--dxtvc-border);
  border-bottom: 1px solid var(--dxtvc-border);
  padding: 0.75rem 0;
}
.dxtvc-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.5rem 1.25rem;
  border-right: 1px solid var(--dxtvc-border);
  min-width: 80px;
}
.dxtvc-stat:last-child { border-right: none; }
.dxtvc-stat--clickable { cursor: pointer; border-radius: 6px; transition: background 0.15s; }
.dxtvc-stat--clickable:hover { background: rgba(0,255,255,0.05); }
.dxtvc-stat__val {
  font-family: var(--dxtvc-display); font-size: 1.2rem; font-weight: 900;
  color: var(--dxtvc-cyan); line-height: 1;
}
.dxtvc-stat__label {
  font-family: var(--dxtvc-mono); font-size: 0.65rem;
  color: var(--dxtvc-muted); letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 0.25rem; white-space: nowrap;
}

/* Tabs */
.dxtvc-tabs-wrap { padding-top: 1rem; }
.dxtvc-tabs {
  display: flex; gap: 0; list-style: none;
  border-bottom: 1px solid var(--dxtvc-border);
}
.dxtvc-tab {
  padding: 0.65rem 1.2rem;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--dxtvc-muted); font-family: var(--dxtvc-font); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s;
}
.dxtvc-tab:hover { color: var(--dxtvc-text); }
.dxtvc-tab--active {
  color: var(--dxtvc-cyan) !important;
  border-bottom-color: var(--dxtvc-cyan) !important;
  text-shadow: 0 0 8px rgba(0,255,255,0.3);
}

/* Tab panels */
.dxtvc-tab-content { padding: 1.5rem 0; }
.dxtvc-tab-panel { display: none; }
.dxtvc-tab-panel--active { display: block; animation: dxtvc-fade-in 0.25s ease; }
@keyframes dxtvc-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Activity feed */
.dxtvc-activity-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 0.9rem 1rem;
  background: var(--dxtvc-card); border: 1px solid var(--dxtvc-border);
  border-radius: var(--dxtvc-radius); margin-bottom: 0.6rem;
  transition: border-color 0.2s;
  animation: dxtvc-fade-in 0.3s ease;
}
.dxtvc-activity-item:hover { border-color: rgba(0,255,255,0.22); }
.dxtvc-activity-item__icon {
  font-size: 1.2rem; flex-shrink: 0; width: 32px; text-align: center;
  filter: drop-shadow(0 0 4px currentColor);
}
.dxtvc-activity-item__body { flex: 1; min-width: 0; }
.dxtvc-activity-item__label { font-size: 0.78rem; color: var(--dxtvc-muted); margin-bottom: 0.2rem; }
.dxtvc-activity-item__title {
  font-weight: 600; color: var(--dxtvc-text);
  font-size: 0.92rem; text-decoration: none;
}
a.dxtvc-activity-item__title:hover { color: var(--dxtvc-cyan); }
.dxtvc-activity-item__excerpt { font-size: 0.78rem; color: var(--dxtvc-dark); margin-top: 0.2rem; }
.dxtvc-activity-item__time {
  font-family: var(--dxtvc-mono); font-size: 0.64rem;
  color: var(--dxtvc-dark); flex-shrink: 0;
}

/* About tab */
.dxtvc-about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.dxtvc-about-card {
  background: var(--dxtvc-card); border: 1px solid var(--dxtvc-border);
  border-radius: var(--dxtvc-radius); padding: 1.25rem;
}
.dxtvc-about-card__title {
  font-family: var(--dxtvc-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--dxtvc-cyan); margin-bottom: 1rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--dxtvc-border);
}
.dxtvc-about-list { display: grid; gap: 0.6rem; }
.dxtvc-about-list dt {
  font-family: var(--dxtvc-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dxtvc-muted);
}
.dxtvc-about-list dd { color: var(--dxtvc-text); font-size: 0.88rem; padding-left: 0.75rem; }
.dxtvc-about-card__text { color: var(--dxtvc-text); font-size: 0.88rem; line-height: 1.6; }

/* Badges tab */
.dxtvc-badges-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.dxtvc-badge-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 1rem 1.5rem;
  background: rgba(255,215,0,0.04); border: 1px solid rgba(255,215,0,0.2);
  border-radius: var(--dxtvc-radius); text-align: center;
  transition: all 0.2s;
}
.dxtvc-badge-card:hover { border-color: rgba(255,215,0,0.4); box-shadow: 0 0 16px rgba(255,215,0,0.1); }
.dxtvc-badge-card__icon { font-size: 2rem; }
.dxtvc-badge-card__name {
  font-family: var(--dxtvc-mono); font-size: 0.68rem; color: var(--dxtvc-muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Settings tab */
.dxtvc-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 1rem; }
.dxtvc-settings-card {
  background: var(--dxtvc-card); border: 1px solid var(--dxtvc-border);
  border-radius: var(--dxtvc-radius); padding: 1.25rem;
}
.dxtvc-settings-card--full { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; }
.dxtvc-settings-card__title {
  font-family: var(--dxtvc-display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--dxtvc-cyan);
  margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--dxtvc-border);
}
.dxtvc-save-msg {
  flex: 1; padding: 0.5rem 0.75rem; border-radius: 5px;
  font-family: var(--dxtvc-mono); font-size: 0.78rem;
}
.dxtvc-save-msg--ok  { background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.3); color: var(--dxtvc-green); }
.dxtvc-save-msg--err { background: rgba(255,51,85,0.08);  border: 1px solid rgba(255,51,85,0.3);  color: #ff3355; }

/* Molecular placeholder for login image */
.dxtvc-home-login__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: radial-gradient(ellipse at center, rgba(0,255,255,0.04), transparent 70%);
}
.dxtvc-mol-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(0,255,255,0.15);
  animation: dxtvc-mol-spin 8s linear infinite;
}
.dxtvc-mol-ring--1 { width: 160px; height: 160px; }
.dxtvc-mol-ring--2 { width: 240px; height: 240px; border-color: rgba(255,0,255,0.1); animation-duration: 12s; animation-direction: reverse; }
.dxtvc-mol-ring--3 { width: 320px; height: 320px; border-color: rgba(0,255,136,0.07); animation-duration: 18s; }
@keyframes dxtvc-mol-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.dxtvc-mol-center {
  font-family: var(--dxtvc-display); font-size: 1.8rem; font-weight: 900;
  color: var(--dxtvc-cyan); text-shadow: var(--dxtvc-glow-c); z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   FOLLOWERS MODAL
   ═══════════════════════════════════════════════════════════ */
.dxtvc-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(2,2,10,0.88); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: dxtvc-fade-in 0.2s ease;
}
.dxtvc-modal {
  background: rgba(10,10,31,0.98); border: 1px solid rgba(0,255,255,0.2);
  border-radius: 12px; width: 90%; max-width: 420px; max-height: 70vh;
  display: flex; flex-direction: column;
  box-shadow: 0 0 60px rgba(0,0,0,0.9);
  animation: dxtvc-modal-in 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes dxtvc-modal-in { from { transform: scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.dxtvc-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0,255,255,0.1);
  font-family: var(--dxtvc-display); font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dxtvc-cyan);
}
.dxtvc-modal__close {
  background: none; border: none; color: var(--dxtvc-muted); font-size: 1rem; cursor: pointer;
  transition: color 0.15s;
}
.dxtvc-modal__close:hover { color: var(--dxtvc-cyan); }
.dxtvc-modal__body { overflow-y: auto; padding: 0.75rem; flex: 1; }

.dxtvc-user-list-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.5rem; border-radius: 6px; text-decoration: none;
  transition: background 0.15s;
}
.dxtvc-user-list-item:hover { background: rgba(0,255,255,0.05); }
.dxtvc-user-list-item img { border-radius: 50%; border: 1px solid rgba(0,255,255,0.2); }
.dxtvc-user-list-item__name { color: var(--dxtvc-cyan); font-family: var(--dxtvc-font); font-weight: 600; font-size: 0.88rem; }

/* ═══════════════════════════════════════════════════════════
   MEMBERS GRID
   ═══════════════════════════════════════════════════════════ */
.dxtvc-members-page { padding: 1.5rem 0; }
.dxtvc-members-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.dxtvc-members-title {
  font-family: var(--dxtvc-display); font-size: 1.2rem;
  font-weight: 900; color: var(--dxtvc-cyan); margin: 0;
}
.dxtvc-members-search-wrap { max-width: 280px; flex: 1; }
.dxtvc-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
.dxtvc-member-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1.25rem 0.75rem;
  background: var(--dxtvc-card); border: 1px solid var(--dxtvc-border);
  border-radius: var(--dxtvc-radius); text-decoration: none;
  text-align: center; transition: all 0.2s;
}
.dxtvc-member-card:hover {
  border-color: rgba(0,255,255,0.28);
  box-shadow: 0 0 18px rgba(0,255,255,0.06);
  transform: translateY(-2px);
}
.dxtvc-member-card__avatar { border-radius: 50%; border: 2px solid rgba(0,255,255,0.25); object-fit: cover; }
.dxtvc-member-card:hover .dxtvc-member-card__avatar { border-color: var(--dxtvc-cyan); box-shadow: var(--dxtvc-glow-c); }
.dxtvc-member-card__name { font-family: var(--dxtvc-display); font-size: 0.72rem; font-weight: 700; color: var(--dxtvc-cyan); word-break: break-word; }
.dxtvc-member-card__meta { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.dxtvc-member-card__bucks,
.dxtvc-member-card__badges { font-family: var(--dxtvc-mono); font-size: 0.65rem; color: var(--dxtvc-muted); }
.dxtvc-member-card__joined { font-family: var(--dxtvc-mono); font-size: 0.62rem; color: var(--dxtvc-dark); }

/* ═══════════════════════════════════════════════════════════
   MESSAGES
   ═══════════════════════════════════════════════════════════ */
.dxtvc-messages {
  display: grid; grid-template-columns: 280px 1fr;
  height: calc(100vh - 200px); min-height: 400px; max-height: 720px;
  border: 1px solid var(--dxtvc-border); border-radius: var(--dxtvc-radius);
  overflow: hidden; margin: 1rem 0;
}
.dxtvc-messages__sidebar {
  background: var(--dxtvc-card); border-right: 1px solid var(--dxtvc-border);
  display: flex; flex-direction: column;
}
.dxtvc-messages__sidebar-header {
  padding: 0.9rem 1rem; border-bottom: 1px solid var(--dxtvc-border);
}
.dxtvc-messages__sidebar-title {
  font-family: var(--dxtvc-display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--dxtvc-cyan);
}
.dxtvc-messages__threads { overflow-y: auto; flex: 1; }
.dxtvc-thread-item {
  display: flex; gap: 0.75rem; padding: 0.75rem 1rem;
  cursor: pointer; border-bottom: 1px solid var(--dxtvc-border);
  transition: background 0.15s;
}
.dxtvc-thread-item:hover, .dxtvc-thread-item--active { background: rgba(0,255,255,0.05); }
.dxtvc-thread-item img { border-radius: 50%; border: 1px solid rgba(0,255,255,0.2); flex-shrink: 0; }
.dxtvc-thread-item__name { font-weight: 600; color: var(--dxtvc-text); font-size: 0.85rem; }
.dxtvc-thread-item__preview { font-size: 0.72rem; color: var(--dxtvc-muted); font-family: var(--dxtvc-mono); margin-top: 0.15rem; }
.dxtvc-thread-item__unread {
  background: var(--dxtvc-magenta); color: #000; font-size: 0.6rem; font-weight: 900;
  border-radius: 50px; padding: 1px 5px; font-family: var(--dxtvc-mono); flex-shrink: 0;
  box-shadow: var(--dxtvc-glow-m);
}
.dxtvc-messages__main {
  display: flex; flex-direction: column; background: var(--dxtvc-bg);
}
.dxtvc-conversation { display: flex; flex-direction: column; height: 100%; }
.dxtvc-conversation__header {
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--dxtvc-border);
  display: flex; align-items: center; gap: 0.75rem;
  font-weight: 700; color: var(--dxtvc-cyan); font-family: var(--dxtvc-display); font-size: 0.8rem;
}
.dxtvc-conversation__body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.dxtvc-msg {
  display: flex; gap: 0.6rem; align-items: flex-end; max-width: 75%;
  animation: dxtvc-fade-in 0.2s ease;
}
.dxtvc-msg--mine { align-self: flex-end; flex-direction: row-reverse; }
.dxtvc-msg img { border-radius: 50%; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid rgba(0,255,255,0.2); }
.dxtvc-msg__bubble {
  padding: 0.5rem 0.9rem; border-radius: 10px; font-size: 0.88rem;
  background: rgba(10,10,31,0.9); border: 1px solid var(--dxtvc-border);
  color: var(--dxtvc-text); line-height: 1.5;
}
.dxtvc-msg--mine .dxtvc-msg__bubble {
  background: rgba(0,255,255,0.07); border-color: rgba(0,255,255,0.2);
}
.dxtvc-msg__time { font-family: var(--dxtvc-mono); font-size: 0.58rem; color: var(--dxtvc-dark); white-space: nowrap; }
.dxtvc-conversation__compose {
  padding: 0.75rem 1rem; border-top: 1px solid var(--dxtvc-border);
  display: flex; gap: 0.5rem; align-items: flex-end;
}
.dxtvc-conversation__compose .dxtvc-input { resize: none; min-height: 38px; max-height: 120px; }
.dxtvc-conversation__compose .dxtvc-btn { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   SLIDE MENU — GLASSMORPHIC OVERRIDE
   All rules override the theme's opaque slide menu.
   ═══════════════════════════════════════════════════════════ */
.slide-menu {
  background: rgba(5,5,16,0.78) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border-right: 1px solid rgba(0,255,255,0.18) !important;
  box-shadow: 4px 0 40px rgba(0,0,0,0.6), inset -1px 0 0 rgba(0,255,255,0.06) !important;
}
/* Gradient stripe on right edge of menu */
.slide-menu::after {
  content: '';
  position: fixed;
  top: 0; right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0,255,255,0.3), rgba(255,0,255,0.2), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── Menu user panel ── */
.dxtvc-menu-user {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: rgba(0,255,255,0.03);
  border-bottom: 1px solid rgba(0,255,255,0.1);
}
.dxtvc-menu-user__avatar-wrap { flex-shrink: 0; }
.dxtvc-menu-user__avatar { border-radius: 50%; border: 2px solid var(--dxtvc-cyan); box-shadow: var(--dxtvc-glow-c); width: 64px; height: 64px; object-fit: cover; }
.dxtvc-menu-user__info { flex: 1; min-width: 0; }
.dxtvc-menu-user__name { font-family: var(--dxtvc-display); font-size: 0.88rem; font-weight: 900; color: var(--dxtvc-cyan); margin-bottom: 0.25rem; word-break: break-word; }
.dxtvc-menu-user__meta { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.6rem; }
.dxtvc-menu-user__bucks { font-family: var(--dxtvc-mono); font-size: 0.72rem; color: var(--dxtvc-green); }
.dxtvc-menu-user__badges { font-family: var(--dxtvc-mono); font-size: 0.68rem; color: var(--dxtvc-muted); }
.dxtvc-menu-user__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.dxtvc-menu-btn {
  display: inline-block; padding: 0.3rem 0.75rem;
  border: 1px solid rgba(0,255,255,0.3); border-radius: 5px;
  font-family: var(--dxtvc-font); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--dxtvc-cyan); transition: all 0.2s;
}
.dxtvc-menu-btn:hover { background: rgba(0,255,255,0.1); }
.dxtvc-menu-btn--msg { position: relative; }
.dxtvc-msg-count {
  position: absolute; top: -5px; right: -5px;
  background: var(--dxtvc-magenta); color: #000;
  font-size: 0.52rem; font-weight: 900; font-family: var(--dxtvc-mono);
  padding: 1px 4px; border-radius: 50px; min-width: 14px; text-align: center;
  box-shadow: var(--dxtvc-glow-m);
}
.dxtvc-menu-logout {
  width: calc(100% - 3rem); margin: 0.75rem 1.5rem;
  padding: 0.5rem; border: 1px solid rgba(255,51,85,0.25);
  background: transparent; color: rgba(255,51,85,0.7); border-radius: 6px;
  font-family: var(--dxtvc-font); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  transition: all 0.2s;
}
.dxtvc-menu-logout:hover { background: rgba(255,51,85,0.08); border-color: rgba(255,51,85,0.5); color: #ff3355; }

/* ── Registration panel in menu ── */
.dxtvc-menu-register {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(0,255,255,0.1);
  background: rgba(0,255,255,0.02);
}
.dxtvc-menu-register__eyebrow {
  font-family: var(--dxtvc-display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--dxtvc-cyan);
  margin-bottom: 1rem;
}
.dxtvc-menu-register__steps { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.dxtvc-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.dxtvc-step__num {
  font-family: var(--dxtvc-display); font-size: 0.65rem; font-weight: 900;
  color: var(--dxtvc-magenta); opacity: 0.7; flex-shrink: 0;
  border: 1px solid rgba(255,0,255,0.3); border-radius: 4px;
  padding: 2px 6px; line-height: 1.4; margin-top: 2px;
}
.dxtvc-step__content { flex: 1; }
.dxtvc-step__label {
  font-family: var(--dxtvc-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dxtvc-muted); margin-bottom: 0.3rem;
}
.dxtvc-step__demo {
  background: rgba(5,5,16,0.6); border: 1px solid rgba(0,255,255,0.12);
  border-radius: 5px; padding: 0.35rem 0.6rem;
  font-family: var(--dxtvc-mono); font-size: 0.75rem; color: var(--dxtvc-text);
  min-height: 28px; display: flex; align-items: center;
}
.dxtvc-step__field { display: flex; align-items: center; gap: 1px; }
.dxtvc-step__typing { color: var(--dxtvc-text); }
.dxtvc-step__cursor {
  color: var(--dxtvc-cyan); font-size: 0.65rem;
  animation: dxtvc-cursor-blink 0.8s step-end infinite;
}
@keyframes dxtvc-cursor-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.dxtvc-step__bucks-icon { color: var(--dxtvc-green); margin-right: 0.3rem; }
.dxtvc-step__bucks-count {
  font-family: var(--dxtvc-display); font-size: 1rem; font-weight: 900;
  color: var(--dxtvc-green); text-shadow: var(--dxtvc-glow-g); margin-right: 0.3rem;
}
.dxtvc-step__bucks-label { font-size: 0.65rem; color: var(--dxtvc-muted); }
.dxtvc-menu-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 0.65rem;
  background: linear-gradient(135deg, rgba(0,255,255,0.12), rgba(255,0,255,0.08));
  border: 1px solid rgba(0,255,255,0.4); border-radius: 7px;
  font-family: var(--dxtvc-font); font-weight: 900; font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--dxtvc-cyan); transition: all 0.2s; margin-bottom: 0.6rem;
}
.dxtvc-menu-cta:hover { background: rgba(0,255,255,0.18); box-shadow: var(--dxtvc-glow-c); }
.dxtvc-menu-register__login {
  text-align: center; font-family: var(--dxtvc-mono); font-size: 0.7rem; color: var(--dxtvc-dark);
}
.dxtvc-menu-register__login a { color: var(--dxtvc-cyan); text-decoration: none; }

/* ─── Live visitor count in menu footer ── */
.slide-menu-footer .visitor-count { color: var(--dxtvc-green); font-family: var(--dxtvc-mono); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE LOGIN SECTION
   ═══════════════════════════════════════════════════════════ */
.dxtvc-home-login {
  padding: 4rem 0;
  position: relative;
}
.dxtvc-home-login::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--dxtvc-scan);
  pointer-events: none;
}
.dxtvc-home-login__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.dxtvc-home-login__image {
  position: relative; height: 380px; border-radius: var(--dxtvc-radius);
  overflow: hidden; border: 1px solid var(--dxtvc-border);
  background: linear-gradient(160deg, rgba(0,20,50,1) 0%, rgba(0,5,20,1) 60%, rgba(10,0,30,1) 100%);
}
.dxtvc-home-login__img { width: 100%; height: 100%; object-fit: cover; }
/* Login form glass card */
.dxtvc-home-login__form-wrap {
  background: rgba(5,5,20,0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0,255,255,0.10);
  border-radius: var(--dxtvc-radius);
  padding: 2rem 2rem 1.75rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(0,255,255,0.06);
}
.dxtvc-home-login__form-wrap .dxtvc-input:focus {
  border-color: rgba(0,255,255,0.55);
  box-shadow: 0 0 0 3px rgba(0,255,255,0.10), 0 0 12px rgba(0,255,255,0.08);
}
.dxtvc-home-login__form-wrap .dxtvc-btn--full {
  font-family: var(--dxtvc-display);
  font-size: 0.78rem; letter-spacing: 0.15em;
  padding: 0.75rem 1.4rem;
  background: rgba(0,255,255,0.10);
  border-color: rgba(0,255,255,0.55);
  box-shadow: 0 0 18px rgba(0,255,255,0.08);
  margin-top: 0.25rem;
}
.dxtvc-home-login__form-wrap .dxtvc-btn--full:hover {
  background: rgba(0,255,255,0.18);
  box-shadow: 0 0 28px rgba(0,255,255,0.20);
}
.dxtvc-home-login__eyebrow {
  font-family: var(--dxtvc-display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--dxtvc-cyan);
  margin-bottom: 0.5rem;
}
.dxtvc-home-login__title {
  font-family: var(--dxtvc-display); font-size: 1.6rem; font-weight: 900;
  color: var(--dxtvc-text); margin: 0 0 1.5rem;
  text-shadow: 0 0 20px rgba(0,255,255,0.15);
}
.dxtvc-home-login__links {
  margin-top: 0.75rem; display: flex; gap: 0.5rem; align-items: center;
  font-family: var(--dxtvc-mono); font-size: 0.72rem; color: var(--dxtvc-dark);
}
.dxtvc-home-login__links a { color: var(--dxtvc-cyan); text-decoration: none; }
.dxtvc-home-login__links a:hover { color: var(--dxtvc-magenta); }
.dxtvc-login-success {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem; background: rgba(0,255,136,0.06);
  border: 1px solid rgba(0,255,136,0.25); border-radius: var(--dxtvc-radius);
}
.dxtvc-login-success__icon { font-size: 2rem; filter: drop-shadow(0 0 8px var(--dxtvc-green)); }
.dxtvc-login-success__text strong { display: block; color: var(--dxtvc-green); font-family: var(--dxtvc-display); font-size: 0.88rem; }
.dxtvc-login-success__sub { font-family: var(--dxtvc-mono); font-size: 0.72rem; color: var(--dxtvc-muted); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .dxtvc-home-login__inner { grid-template-columns: 1fr; gap: 0; }
  .dxtvc-home-login__image {
    height: 200px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
  }
  .dxtvc-home-login__form-wrap {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    background: rgba(5,5,20,0.88);
  }
  .dxtvc-messages { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
  .dxtvc-messages__sidebar { border-right: none; border-bottom: 1px solid var(--dxtvc-border); }
  .dxtvc-profile__header-inner { flex-direction: column; }
  .dxtvc-profile__stats { flex-direction: row; overflow-x: auto; }
  .dxtvc-stat { min-width: 70px; }
  .dxtvc-members-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .dxtvc-settings-grid { grid-template-columns: 1fr; }
  .dxtvc-settings-card--full { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════
   STATUS / TIMELINE POSTS
   ═══════════════════════════════════════════════════════════ */

/* Compose box */
.dxtvc-compose {
  background: var(--dxtvc-card);
  border: 1px solid var(--dxtvc-border);
  border-radius: var(--dxtvc-radius);
  padding: 1rem;
  margin-bottom: 1rem;
}
.dxtvc-compose__inner { display: flex; gap: 0.75rem; align-items: flex-start; }
.dxtvc-compose__avatar { flex-shrink: 0; margin-top: 2px; }
.dxtvc-compose__body { flex: 1; }
.dxtvc-compose__textarea {
  resize: none; min-height: 42px; max-height: 200px;
  overflow-y: hidden; transition: min-height 0.2s;
}
.dxtvc-compose__textarea:focus { min-height: 80px; }
.dxtvc-compose__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.5rem;
}
.dxtvc-compose__count {
  font-family: var(--dxtvc-mono); font-size: 0.65rem; color: var(--dxtvc-dark);
  transition: color 0.2s;
}
.dxtvc-compose__count--warn { color: #ff8800; }
.dxtvc-compose__count--over { color: #ff3355; }
.dxtvc-compose__submit { padding: 0.4rem 1rem; font-size: 0.78rem; }

/* Activity section label */
.dxtvc-activity-section-label {
  font-family: var(--dxtvc-mono); font-size: 0.65rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--dxtvc-dark);
  padding: 0.6rem 0 0.4rem; border-top: 1px solid var(--dxtvc-border);
  margin-top: 0.75rem;
}

/* Status card */
.dxtvc-status-card {
  background: var(--dxtvc-card);
  border: 1px solid var(--dxtvc-border);
  border-radius: var(--dxtvc-radius);
  padding: 1rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.2s;
  animation: dxtvc-fade-in 0.3s ease;
  position: relative;
}
.dxtvc-status-card:hover { border-color: rgba(0,255,255,0.2); }
.dxtvc-status-card--pending { border-color: rgba(255,136,0,0.25); background: rgba(255,136,0,0.02); }

.dxtvc-status-card__header {
  display: flex; align-items: center; gap: 0.65rem;
  margin-bottom: 0.65rem;
}
.dxtvc-status-card__meta { flex: 1; min-width: 0; }
.dxtvc-status-card__author {
  font-family: var(--dxtvc-display); font-size: 0.78rem; font-weight: 700;
  color: var(--dxtvc-cyan); text-decoration: none;
}
.dxtvc-status-card__author:hover { color: var(--dxtvc-magenta); }
.dxtvc-status-card__time {
  font-family: var(--dxtvc-mono); font-size: 0.62rem; color: var(--dxtvc-dark);
}
.dxtvc-status-card__delete {
  background: none; border: none; color: var(--dxtvc-dark); font-size: 0.75rem;
  cursor: pointer; padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.dxtvc-status-card__delete:hover { color: #ff3355; background: rgba(255,51,85,0.08); }

.dxtvc-status-card__content {
  color: var(--dxtvc-text); font-size: 0.95rem; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  margin-bottom: 0.75rem;
}
.dxtvc-status-card__pending-label {
  font-family: var(--dxtvc-mono); font-size: 0.65rem; color: #ff8800;
  background: rgba(255,136,0,0.1); border: 1px solid rgba(255,136,0,0.2);
  border-radius: 3px; padding: 1px 6px; display: inline-block; margin-bottom: 0.5rem;
}

/* Reactions bar */
.dxtvc-reactions {
  display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center;
  padding-top: 0.6rem; border-top: 1px solid var(--dxtvc-border);
}
.dxtvc-reaction-btn {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem 0.55rem; border-radius: 50px;
  border: 1px solid var(--dxtvc-border);
  background: transparent; cursor: pointer;
  font-size: 0.82rem; color: var(--dxtvc-muted);
  transition: all 0.15s; font-family: inherit;
}
.dxtvc-reaction-btn:hover {
  border-color: rgba(0,255,255,0.3);
  background: rgba(0,255,255,0.05);
  color: var(--dxtvc-text);
  transform: scale(1.08);
}
.dxtvc-reaction-btn--active {
  border-color: rgba(0,255,255,0.4);
  background: rgba(0,255,255,0.08);
  color: var(--dxtvc-cyan);
}
.dxtvc-reaction-btn__count {
  font-family: var(--dxtvc-mono); font-size: 0.7rem;
  color: var(--dxtvc-muted);
}
.dxtvc-reaction-btn--active .dxtvc-reaction-btn__count { color: var(--dxtvc-cyan); }

/* Load more */
.dxtvc-load-more {
  display: block; width: 100%; padding: 0.6rem;
  background: transparent; border: 1px dashed var(--dxtvc-border);
  color: var(--dxtvc-muted); border-radius: var(--dxtvc-radius);
  font-family: var(--dxtvc-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer; margin-top: 0.5rem;
  transition: all 0.2s;
}
.dxtvc-load-more:hover { border-color: rgba(0,255,255,0.3); color: var(--dxtvc-cyan); }

/* ═══════════════════════════════════════════════════════════
   COVER IMAGE CROPPER MODAL
   ═══════════════════════════════════════════════════════════ */
.dxtvc-cover-cropper {
  background: rgba(5,5,16,0.99);
  border: 1px solid rgba(0,255,255,0.2);
  border-radius: 12px;
  width: 92vw; max-width: 680px;
  display: flex; flex-direction: column; gap: 0;
  box-shadow: 0 0 80px rgba(0,0,0,0.95), 0 0 40px rgba(0,255,255,0.04);
  overflow: hidden;
}
.dxtvc-cover-cropper__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid rgba(0,255,255,0.1);
}
.dxtvc-cover-cropper__title {
  font-family: var(--dxtvc-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--dxtvc-cyan);
}
.dxtvc-cover-cropper__hint {
  padding: 0.45rem 1.25rem;
  font-family: var(--dxtvc-mono); font-size: 0.65rem;
  color: var(--dxtvc-dark); letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(0,255,255,0.06);
  background: rgba(0,255,255,0.02);
}

/* Stage — the interactive canvas area */
.dxtvc-cover-cropper__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  cursor: grab;
  background: #000;
  touch-action: none;
  user-select: none;
}
.dxtvc-cover-cropper__stage:active { cursor: grabbing; }
#dxtvc-cropper-canvas {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}

/* Frame overlay — corner brackets + grid rules */
.dxtvc-cover-cropper__frame {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
}
.dxtvc-cover-cropper__corner {
  position: absolute; width: 18px; height: 18px;
  border-color: var(--dxtvc-cyan); border-style: solid; border-width: 0;
  opacity: 0.9;
}
.dxtvc-cover-cropper__corner--tl { top: 8px;    left: 8px;   border-top-width: 2px;    border-left-width: 2px; }
.dxtvc-cover-cropper__corner--tr { top: 8px;    right: 8px;  border-top-width: 2px;    border-right-width: 2px; }
.dxtvc-cover-cropper__corner--bl { bottom: 8px; left: 8px;   border-bottom-width: 2px; border-left-width: 2px; }
.dxtvc-cover-cropper__corner--br { bottom: 8px; right: 8px;  border-bottom-width: 2px; border-right-width: 2px; }

/* Controls */
.dxtvc-cover-cropper__controls {
  padding: 0.75rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem;
  border-top: 1px solid rgba(0,255,255,0.08);
}
.dxtvc-cover-cropper__zoom-row,
.dxtvc-cover-cropper__nudge-row {
  display: flex; align-items: center; gap: 0.5rem;
}
.dxtvc-cropper-btn {
  background: rgba(0,255,255,0.06); border: 1px solid rgba(0,255,255,0.2);
  color: var(--dxtvc-cyan); border-radius: 5px;
  width: 32px; height: 32px; font-size: 0.85rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.15s; padding: 0;
}
.dxtvc-cropper-btn:hover { background: rgba(0,255,255,0.14); box-shadow: 0 0 8px rgba(0,255,255,0.2); }
.dxtvc-cropper-btn:active { transform: scale(0.92); }

.dxtvc-zoom-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--dxtvc-cyan) 0%, rgba(0,255,255,0.15) 0%);
  outline: none; cursor: pointer;
}
.dxtvc-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--dxtvc-cyan); cursor: grab;
  box-shadow: 0 0 6px rgba(0,255,255,0.5);
}
.dxtvc-zoom-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: none;
  background: var(--dxtvc-cyan); cursor: grab;
}

.dxtvc-cover-cropper__actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(0,255,255,0.08);
}

@media (max-width: 500px) {
  .dxtvc-cover-cropper { width: 100vw; max-width: 100vw; border-radius: 12px 12px 0 0; }
  .dxtvc-cover-cropper__stage { aspect-ratio: 2.5 / 1; }
}

/* ═══════════════════════════════════════════════════════════
   NOTIFICATION BELL
   ═══════════════════════════════════════════════════════════ */
.dxtvc-bell-wrap {
  position: fixed;
  /* Desktop: top right, clear of hamburger and header */
  top: 12px; right: 118px;
  z-index: 10001; /* above Aiomatic (9999), below profiles panel (99999) */
}

/* On mobile: keep top right but account for hamburger button */
@media (max-width: 768px) {
  .dxtvc-bell-wrap {
    top: 12px;
    right: 70px; /* left of hamburger button */
    bottom: auto;
  }
}

.dxtvc-bell-btn {
  position: relative;
  width: 40px; height: 40px;
  background: rgba(5,5,16,0.92);
  border: 1px solid rgba(0,255,255,0.25);
  border-radius: 50%;
  color: var(--dxtvc-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.dxtvc-bell-btn:hover {
  border-color: var(--dxtvc-cyan);
  color: var(--dxtvc-cyan);
  box-shadow: 0 0 14px rgba(0,255,255,0.2);
}
.dxtvc-bell-btn--has-notifs {
  border-color: rgba(255,0,255,0.4);
  color: var(--dxtvc-magenta);
  animation: dxtvc-bell-shake 4s ease-in-out infinite;
}
@keyframes dxtvc-bell-shake {
  0%,90%,100% { transform: rotate(0deg); }
  92%  { transform: rotate(-10deg); }
  94%  { transform: rotate(10deg); }
  96%  { transform: rotate(-8deg); }
  98%  { transform: rotate(8deg); }
}

.dxtvc-bell-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--dxtvc-magenta); color: #000;
  font-family: var(--dxtvc-display); font-size: 0.5rem; font-weight: 900;
  min-width: 16px; height: 16px; border-radius: 50px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  box-shadow: var(--dxtvc-glow-m);
  animation: dxtvc-pulse-magenta 2s ease-in-out infinite;
}
@keyframes dxtvc-pulse-magenta {
  0%,100% { box-shadow: 0 0 4px rgba(255,0,255,0.4); }
  50%     { box-shadow: 0 0 12px rgba(255,0,255,0.8), 0 0 24px rgba(255,0,255,0.3); }
}

/* Notification panel */
.dxtvc-notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 300px; max-height: 420px;
  background: rgba(8,8,22,0.98);
  border: 1px solid rgba(0,255,255,0.18);
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.9);
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: dxtvc-fade-in 0.18s ease;
}
@media (max-width: 480px) {
  .dxtvc-notif-panel {
    width: calc(100vw - 24px);
    right: auto;
    left: -240px; /* shift left so it doesn't go off right edge */
  }
}
.dxtvc-notif-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0,255,255,0.08);
  flex-shrink: 0;
}
.dxtvc-notif-panel__title {
  font-family: var(--dxtvc-display); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--dxtvc-cyan);
}
.dxtvc-notif-mark-all {
  background: none; border: none; color: var(--dxtvc-dark);
  font-family: var(--dxtvc-mono); font-size: 0.65rem; cursor: pointer;
  transition: color 0.15s; padding: 0;
}
.dxtvc-notif-mark-all:hover { color: var(--dxtvc-cyan); }

.dxtvc-notif-list { overflow-y: auto; flex: 1; }
.dxtvc-notif-item {
  display: flex; gap: 0.65rem; padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(0,255,255,0.05);
  cursor: pointer; transition: background 0.15s;
  text-decoration: none;
}
.dxtvc-notif-item:hover { background: rgba(0,255,255,0.04); }
.dxtvc-notif-item--unread { background: rgba(0,255,255,0.03); }
.dxtvc-notif-item--unread::before {
  content: ''; display: block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dxtvc-cyan);
  box-shadow: 0 0 6px var(--dxtvc-cyan);
  flex-shrink: 0; align-self: center;
  margin-left: -2px;
}
.dxtvc-notif-item img { border-radius: 50%; border: 1px solid rgba(0,255,255,0.2); flex-shrink: 0; align-self: flex-start; }
.dxtvc-notif-item__body { flex: 1; min-width: 0; }
.dxtvc-notif-item__msg { font-size: 0.82rem; color: var(--dxtvc-text); line-height: 1.4; }
.dxtvc-notif-item__time { font-family: var(--dxtvc-mono); font-size: 0.62rem; color: var(--dxtvc-dark); margin-top: 0.15rem; }
.dxtvc-notif-empty { padding: 2rem; text-align: center; font-family: var(--dxtvc-mono); font-size: 0.75rem; color: var(--dxtvc-dark); }

/* ═══════════════════════════════════════════════════════════
   @MENTIONS
   ═══════════════════════════════════════════════════════════ */
.dxtvc-mention {
  color: var(--dxtvc-cyan);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s;
}
.dxtvc-mention:hover { color: var(--dxtvc-magenta); }

/* Autocomplete dropdown */
.dxtvc-mention-dropdown {
  position: absolute;
  background: rgba(8,8,22,0.98);
  border: 1px solid rgba(0,255,255,0.2);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.8);
  max-height: 220px; overflow-y: auto;
  z-index: 10000;
  min-width: 200px;
  animation: dxtvc-fade-in 0.15s ease;
}
.dxtvc-mention-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.75rem; cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid rgba(0,255,255,0.04);
}
.dxtvc-mention-item:last-child { border-bottom: none; }
.dxtvc-mention-item:hover,
.dxtvc-mention-item--active { background: rgba(0,255,255,0.07); }
.dxtvc-mention-item img { border-radius: 50%; border: 1px solid rgba(0,255,255,0.2); flex-shrink: 0; }
.dxtvc-mention-item__login { font-family: var(--dxtvc-display); font-size: 0.72rem; color: var(--dxtvc-cyan); }
.dxtvc-mention-item__name  { font-family: var(--dxtvc-mono);    font-size: 0.65rem; color: var(--dxtvc-muted); }

/* Hint text in compose */
.dxtvc-compose-hint {
  font-family: var(--dxtvc-mono); font-size: 0.62rem;
  color: var(--dxtvc-dark); padding: 0.2rem 0;
}

/* ═══════════════════════════════════════════════════════════
   AVATAR CROPPER STAGE (square, with circle preview mask)
   ═══════════════════════════════════════════════════════════ */
.dxtvc-avatar-cropper-stage {
  position: relative;
  width: 300px; height: 300px;
  margin: 0 auto;
  overflow: hidden;
  cursor: grab;
  background: #000;
  touch-action: none;
  user-select: none;
  border-radius: 50%; /* stage itself is circular */
}
.dxtvc-avatar-cropper-stage:active { cursor: grabbing; }
#dxtvc-avatar-cropper-canvas {
  position: absolute; top: 0; left: 0;
  width: 300px; height: 300px; display: block;
}
/* Dark overlay outside circle - uses radial-gradient */
.dxtvc-avatar-cropper__circle-mask {
  position: absolute; inset: -20px; pointer-events: none; z-index: 2;
  background: radial-gradient(
    circle 150px at center,
    transparent 148px,
    rgba(5,5,16,0.82) 150px
  );
}
.dxtvc-avatar-cropper__frame {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: 50%; border: 2px solid var(--dxtvc-cyan);
  box-shadow: 0 0 0 1px rgba(0,255,255,0.15), 0 0 14px rgba(0,255,255,0.35);
}

/* ═══════════════════════════════════════════════════════════
   TRIP REPORT STRUCTURED META CARD
   ═══════════════════════════════════════════════════════════ */
.dxtvc-tr-card {
  background: linear-gradient(135deg, rgba(5,5,16,0.95), rgba(10,10,31,0.95));
  border: 1px solid var(--inter-border, var(--dxtvc-border));
  border-left: 4px solid var(--tr-color, var(--dxtvc-cyan));
  border-radius: var(--dxtvc-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.dxtvc-tr-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--tr-color, var(--dxtvc-cyan)), transparent);
}
.dxtvc-tr-card__header { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.dxtvc-tr-card__plateau { text-align: center; flex-shrink: 0; }
.dxtvc-tr-card__plateau-badge {
  display: block;
  font-family: var(--dxtvc-display); font-size: 1.4rem; font-weight: 900;
  color: var(--tr-color, var(--dxtvc-cyan));
  text-shadow: 0 0 16px currentColor;
  line-height: 1;
}
.dxtvc-tr-card__plateau-label {
  font-family: var(--dxtvc-mono); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dxtvc-muted); margin-top: 3px;
}
.dxtvc-tr-card__fields { display: flex; gap: 1rem; flex-wrap: wrap; flex: 1; }
.dxtvc-tr-field { display: flex; flex-direction: column; min-width: 70px; }
.dxtvc-tr-field__label {
  font-family: var(--dxtvc-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dxtvc-dark);
}
.dxtvc-tr-field__val {
  font-family: var(--dxtvc-display); font-size: 0.88rem; font-weight: 700;
  color: var(--dxtvc-text); margin-top: 2px;
}
.dxtvc-tr-field__sub {
  font-family: var(--dxtvc-mono); font-size: 0.65rem; color: var(--dxtvc-muted);
}

/* Reaction bar on trip reports */
.dxtvc-tr-reactions {
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--dxtvc-border);
}
.dxtvc-tr-reactions__label {
  font-family: var(--dxtvc-mono); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dxtvc-dark); margin-right: 0.5rem;
}
.dxtvc-tr-reaction-btn {
  font-size: 1rem;
  padding: 0.25rem 0.7rem;
}

/* ═══════════════════════════════════════════════════════════
   INTERACTION DATABASE FRONTEND
   ═══════════════════════════════════════════════════════════ */
.dxtvc-inter-wrap { padding: 1.5rem 0; }
.dxtvc-inter-header { margin-bottom: 1.5rem; }
.dxtvc-inter-title {
  font-family: var(--dxtvc-display); font-size: 1.3rem; font-weight: 900;
  color: var(--dxtvc-cyan); margin: 0 0 0.5rem;
}
.dxtvc-inter-sub {
  font-family: var(--dxtvc-mono); font-size: 0.75rem; color: var(--dxtvc-muted);
  line-height: 1.5; max-width: 640px; margin: 0 0 1rem;
}
.dxtvc-inter-legend {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.dxtvc-inter-legend-item {
  font-family: var(--dxtvc-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.05em;
}
.dxtvc-inter-search-wrap { max-width: 360px; }

.dxtvc-inter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.75rem;
}
.dxtvc-inter-card {
  background: var(--inter-bg, rgba(10,10,31,0.8));
  border: 1px solid var(--inter-border, rgba(0,255,255,0.12));
  border-left: 3px solid var(--inter-color, var(--dxtvc-cyan));
  border-radius: var(--dxtvc-radius);
  padding: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dxtvc-inter-card:hover {
  box-shadow: 0 0 16px rgba(0,0,0,0.3);
  border-color: var(--inter-color, var(--dxtvc-cyan));
}
.dxtvc-inter-card--hidden { display: none; }
.dxtvc-inter-card__header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 0.75rem; margin-bottom: 0.5rem;
}
.dxtvc-inter-card__substance {
  font-family: var(--dxtvc-font); font-weight: 700; font-size: 0.9rem;
  color: var(--dxtvc-text); flex: 1;
}
.dxtvc-inter-card__risk {
  font-family: var(--dxtvc-mono); font-size: 0.65rem; font-weight: 700;
  padding: 2px 7px; border-radius: 50px; border: 1px solid;
  white-space: nowrap; flex-shrink: 0;
}
.dxtvc-inter-card__mechanism {
  font-family: var(--dxtvc-mono); font-size: 0.72rem; color: var(--dxtvc-muted);
  line-height: 1.5; margin-bottom: 0.5rem;
}
.dxtvc-inter-card__details summary {
  font-family: var(--dxtvc-mono); font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--inter-color, var(--dxtvc-cyan)); cursor: pointer;
  text-transform: uppercase;
}
.dxtvc-inter-card__notes {
  font-size: 0.82rem; color: var(--dxtvc-text); line-height: 1.6;
  margin-top: 0.5rem; padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.dxtvc-inter-card__sources {
  font-family: var(--dxtvc-mono); font-size: 0.65rem; color: var(--dxtvc-dark);
  margin-top: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════
   OWNER / ADMIN BADGES ON PROFILE
   ═══════════════════════════════════════════════════════════ */
.dxtvc-profile__owner-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-family: var(--dxtvc-display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #ffd700; background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.35);
  padding: 2px 8px; border-radius: 50px; vertical-align: middle;
  margin-left: 0.5rem;
  box-shadow: 0 0 10px rgba(255,215,0,0.2);
  animation: dxtvc-owner-glow 3s ease-in-out infinite;
}
@keyframes dxtvc-owner-glow {
  0%,100% { box-shadow: 0 0 8px rgba(255,215,0,0.2); }
  50%     { box-shadow: 0 0 18px rgba(255,215,0,0.5), 0 0 36px rgba(255,215,0,0.15); }
}
.dxtvc-profile__admin-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-family: var(--dxtvc-display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dxtvc-cyan); background: rgba(0,255,255,0.08);
  border: 1px solid rgba(0,255,255,0.3);
  padding: 2px 8px; border-radius: 50px; vertical-align: middle;
  margin-left: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN ACTIONS DROPDOWN ON OTHER PROFILES
   ═══════════════════════════════════════════════════════════ */
.dxtvc-admin-actions { position: relative; }

.dxtvc-btn--admin-toggle {
  background: rgba(255,215,0,0.08) !important;
  border-color: rgba(255,215,0,0.35) !important;
  color: #ffd700 !important;
  font-size: 0.75rem !important;
}
.dxtvc-btn--admin-toggle:hover {
  background: rgba(255,215,0,0.15) !important;
  box-shadow: 0 0 12px rgba(255,215,0,0.2) !important;
}

.dxtvc-admin-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: rgba(8,8,22,0.98);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 10px; padding: 0.75rem;
  min-width: 260px; z-index: 1000;
  box-shadow: 0 8px 30px rgba(0,0,0,0.8);
  backdrop-filter: blur(12px);
}
.dxtvc-admin-dropdown__title {
  font-family: var(--dxtvc-display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: #ffd700;
  margin-bottom: 0.75rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,215,0,0.15);
}
.dxtvc-admin-row {
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem;
}
.dxtvc-admin-label {
  font-family: var(--dxtvc-mono); font-size: 0.65rem; color: var(--dxtvc-muted);
  width: 60px; flex-shrink: 0;
}
.dxtvc-admin-input {
  flex: 1; background: rgba(5,5,16,0.8);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
  color: var(--dxtvc-text); font-family: var(--dxtvc-mono); font-size: 0.78rem;
  padding: 0.3rem 0.5rem; outline: none;
}
.dxtvc-admin-input:focus { border-color: rgba(255,215,0,0.4); }
.dxtvc-btn--admin-sm {
  padding: 0.3rem 0.65rem !important; font-size: 0.7rem !important;
  background: rgba(255,215,0,0.1) !important;
  border-color: rgba(255,215,0,0.3) !important;
  color: #ffd700 !important;
}
.dxtvc-admin-link {
  display: block; margin-top: 0.6rem;
  font-family: var(--dxtvc-mono); font-size: 0.68rem;
  color: rgba(255,215,0,0.6); text-decoration: none;
  padding-top: 0.5rem; border-top: 1px solid rgba(255,215,0,0.1);
  transition: color 0.15s;
}
.dxtvc-admin-link:hover { color: #ffd700; }
.dxtvc-admin-result {
  font-family: var(--dxtvc-mono); font-size: 0.68rem;
  color: var(--dxtvc-green); margin-top: 0.4rem; display: none;
}

/* ═══════════════════════════════════════════════════════════
   ONLINE PRESENCE DOT (applied by JS to avatars sitewide)
   ═══════════════════════════════════════════════════════════ */
.dxtvc-online-ring {
  position: relative;
  display: inline-block;
}
.dxtvc-online-ring::after {
  content: '';
  position: absolute;
  bottom: 2px; right: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #00ff88;
  border: 2px solid var(--dxtvc-bg, #050510);
  box-shadow: 0 0 6px rgba(0,255,136,0.8);
  animation: dxtvc-online-pulse 2.5s ease-in-out infinite;
}
@keyframes dxtvc-online-pulse {
  0%,100% { box-shadow: 0 0 4px rgba(0,255,136,0.6); }
  50%     { box-shadow: 0 0 10px rgba(0,255,136,0.9), 0 0 20px rgba(0,255,136,0.3); }
}

/* ═══════════════════════════════════════════════════════════
   PROFILE HOVER CARD
   ═══════════════════════════════════════════════════════════ */
.dxtvc-hovercard {
  position: fixed;
  z-index: 99999;
  background: rgba(8,8,22,0.98);
  border: 1px solid rgba(0,255,255,0.2);
  border-radius: 12px;
  padding: 1.1rem;
  width: 240px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.9), 0 0 1px rgba(0,255,255,0.1);
  backdrop-filter: blur(16px);
  pointer-events: auto;
  animation: dxtvc-hovercard-in 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes dxtvc-hovercard-in {
  from { opacity:0; transform:scale(0.9) translateY(4px); }
  to   { opacity:1; transform:none; }
}
.dxtvc-hovercard__top {
  display: flex; gap: 0.75rem; align-items: flex-start;
  margin-bottom: 0.75rem;
}
.dxtvc-hovercard__avatar-wrap { position: relative; flex-shrink: 0; }
.dxtvc-hovercard__avatar {
  border-radius: 50%; border: 2px solid rgba(0,255,255,0.3);
  width: 52px; height: 52px; object-fit: cover; display: block;
}
.dxtvc-hovercard__info { flex: 1; min-width: 0; }
.dxtvc-hovercard__name {
  font-family: var(--dxtvc-display); font-size: 0.78rem; font-weight: 900;
  color: var(--dxtvc-cyan); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-decoration: none; display: block;
}
.dxtvc-hovercard__name:hover { color: var(--dxtvc-magenta); }
.dxtvc-hovercard__login {
  font-family: var(--dxtvc-mono); font-size: 0.65rem; color: var(--dxtvc-muted);
}
.dxtvc-hovercard__badges-row {
  display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.25rem;
}
.dxtvc-hovercard__badge-pill {
  font-size: 0.62rem; background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.2); color: #ffd700;
  padding: 1px 5px; border-radius: 50px;
  font-family: var(--dxtvc-mono);
}
.dxtvc-hovercard__owner { color: #ffd700; font-size: 0.62rem; font-family: var(--dxtvc-mono); }
.dxtvc-hovercard__admin { color: var(--dxtvc-cyan); font-size: 0.62rem; font-family: var(--dxtvc-mono); }
.dxtvc-hovercard__stats {
  display: flex; gap: 0.5rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(0,255,255,0.08);
  border-bottom: 1px solid rgba(0,255,255,0.08);
  margin-bottom: 0.75rem;
}
.dxtvc-hovercard__stat { flex: 1; text-align: center; }
.dxtvc-hovercard__stat strong {
  display: block; font-family: var(--dxtvc-display);
  font-size: 0.88rem; font-weight: 900; color: var(--dxtvc-cyan);
}
.dxtvc-hovercard__stat span {
  font-family: var(--dxtvc-mono); font-size: 0.55rem;
  color: var(--dxtvc-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
.dxtvc-hovercard__bio {
  font-family: var(--dxtvc-mono); font-size: 0.7rem; color: var(--dxtvc-muted);
  line-height: 1.5; margin-bottom: 0.6rem;
}
.dxtvc-hovercard__plateau {
  font-family: var(--dxtvc-mono); font-size: 0.65rem;
  color: var(--dxtvc-dark); margin-bottom: 0.6rem;
}
.dxtvc-hovercard__actions { display: flex; gap: 0.4rem; }
.dxtvc-hovercard__follow {
  flex: 1; padding: 0.35rem 0; text-align: center;
  background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.35);
  color: #00ff88; border-radius: 6px;
  font-family: var(--dxtvc-font); font-weight: 700; font-size: 0.72rem;
  cursor: pointer; transition: all 0.15s;
}
.dxtvc-hovercard__follow:hover { background: rgba(0,255,136,0.16); }
.dxtvc-hovercard__follow--following {
  background: transparent; border-color: rgba(0,255,255,0.2); color: var(--dxtvc-muted);
}
.dxtvc-hovercard__view {
  flex: 1; padding: 0.35rem 0; text-align: center;
  background: rgba(0,255,255,0.06); border: 1px solid rgba(0,255,255,0.25);
  color: var(--dxtvc-cyan); border-radius: 6px;
  font-family: var(--dxtvc-font); font-weight: 700; font-size: 0.72rem;
  text-decoration: none; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.dxtvc-hovercard__view:hover { background: rgba(0,255,255,0.12); }

/* ═══════════════════════════════════════════════════════════
   PROFILE COMPLETION BAR
   ═══════════════════════════════════════════════════════════ */
.dxtvc-completion {
  background: rgba(0,255,255,0.03);
  border: 1px solid rgba(0,255,255,0.1);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.dxtvc-completion__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.4rem;
}
.dxtvc-completion__label {
  font-family: var(--dxtvc-mono); font-size: 0.65rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dxtvc-muted);
}
.dxtvc-completion__pct {
  font-family: var(--dxtvc-display); font-size: 0.78rem;
  font-weight: 900; color: var(--dxtvc-cyan);
}
.dxtvc-completion__bar {
  height: 5px; background: rgba(0,255,255,0.1); border-radius: 3px; overflow: hidden;
}
.dxtvc-completion__fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #00ffff, #00ff88);
  box-shadow: 0 0 8px rgba(0,255,255,0.4);
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.dxtvc-completion__items {
  display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem;
}
.dxtvc-completion__item {
  font-family: var(--dxtvc-mono); font-size: 0.62rem;
  padding: 2px 7px; border-radius: 50px;
}
.dxtvc-completion__item--done {
  background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.25);
  color: var(--dxtvc-green);
}
.dxtvc-completion__item--todo {
  background: rgba(255,136,0,0.06); border: 1px solid rgba(255,136,0,0.2);
  color: #ff8800;
}

/* ═══════════════════════════════════════════════════════════
   LEADERBOARD
   ═══════════════════════════════════════════════════════════ */
.dxtvc-leaderboard { padding: 2rem 0; }
.dxtvc-leaderboard__header { margin-bottom: 2rem; text-align: center; }
.dxtvc-leaderboard__title {
  font-family: var(--dxtvc-display); font-size: 1.6rem; font-weight: 900;
  color: var(--dxtvc-cyan); margin: 0 0 0.4rem;
  text-shadow: 0 0 20px rgba(0,255,255,0.3);
}
.dxtvc-leaderboard__sub {
  font-family: var(--dxtvc-mono); font-size: 0.75rem; color: var(--dxtvc-muted);
  margin: 0 0 1.25rem;
}
.dxtvc-leaderboard__tabs {
  display: inline-flex; gap: 0; border: 1px solid rgba(0,255,255,0.15);
  border-radius: 8px; overflow: hidden;
}
.dxtvc-lb-tab {
  padding: 0.5rem 1.25rem;
  background: transparent; border: none; border-right: 1px solid rgba(0,255,255,0.1);
  color: var(--dxtvc-muted); font-family: var(--dxtvc-font); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.06em; cursor: pointer;
  transition: all 0.2s;
}
.dxtvc-lb-tab:last-child { border-right: none; }
.dxtvc-lb-tab:hover { background: rgba(0,255,255,0.05); color: var(--dxtvc-text); }
.dxtvc-lb-tab--active {
  background: rgba(0,255,255,0.1) !important;
  color: var(--dxtvc-cyan) !important;
}

.dxtvc-lb-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--dxtvc-card); border: 1px solid var(--dxtvc-border);
  border-radius: 8px; margin-bottom: 0.5rem;
  transition: all 0.2s;
  animation: dxtvc-fade-in 0.3s ease both;
}
.dxtvc-lb-row:hover { border-color: rgba(0,255,255,0.25); transform: translateX(4px); }
.dxtvc-lb-row--top3 { border-color: rgba(255,215,0,0.25); background: rgba(255,215,0,0.03); }

.dxtvc-lb-rank {
  font-family: var(--dxtvc-display); font-size: 1rem; font-weight: 900;
  min-width: 36px; text-align: center; flex-shrink: 0;
}
.dxtvc-lb-rank--1 { color: #ffd700; text-shadow: 0 0 12px rgba(255,215,0,0.5); }
.dxtvc-lb-rank--2 { color: #c0c0c0; }
.dxtvc-lb-rank--3 { color: #cd7f32; }
.dxtvc-lb-rank--other { color: var(--dxtvc-dark); font-size: 0.78rem; }

.dxtvc-lb-avatar-wrap { position: relative; flex-shrink: 0; }
.dxtvc-lb-row a { color: var(--dxtvc-cyan); font-family: var(--dxtvc-display); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.dxtvc-lb-row a:hover { color: var(--dxtvc-magenta); }
.dxtvc-lb-row__info { flex: 1; min-width: 0; }
.dxtvc-lb-row__meta { font-family: var(--dxtvc-mono); font-size: 0.62rem; color: var(--dxtvc-dark); }
.dxtvc-lb-score {
  font-family: var(--dxtvc-display); font-size: 1.1rem; font-weight: 900;
  color: var(--dxtvc-cyan); flex-shrink: 0;
  text-shadow: 0 0 8px rgba(0,255,255,0.3);
}

/* ═══════════════════════════════════════════════════════════
   PROFILE THEME VARIABLES
   Applied via style attr on #dxtvc-profile-page
   ═══════════════════════════════════════════════════════════ */
#dxtvc-profile-page {
  --dxtvc-cyan:    var(--profile-primary,   #00ffff);
  --dxtvc-magenta: var(--profile-secondary, #ff00ff);
}

/* ═══════════════════════════════════════════════════════════
   VERIFIED BADGE
   ═══════════════════════════════════════════════════════════ */
.dxtvc-profile__verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--profile-primary, #00ffff);
  color: #050510; font-size: 0.65rem; font-weight: 900;
  vertical-align: middle; margin-left: 0.35rem;
  box-shadow: 0 0 8px var(--profile-primary, #00ffff);
  flex-shrink: 0;
}
.dxtvc-profile__tagline {
  font-family: var(--dxtvc-mono); font-size: 0.75rem;
  color: var(--profile-secondary, #ff00ff);
  letter-spacing: 0.08em; margin-bottom: 0.4rem;
  text-shadow: 0 0 8px var(--profile-secondary, rgba(255,0,255,0.4));
}
.dxtvc-profile__stealth-badge {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-family: var(--dxtvc-mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #888; background: rgba(100,100,100,0.1);
  border: 1px solid rgba(100,100,100,0.2);
  padding: 2px 7px; border-radius: 50px; vertical-align: middle;
  margin-left: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════
   TOGGLE SWITCHES
   ═══════════════════════════════════════════════════════════ */
.dxtvc-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.65rem 0;
  border-bottom: 1px solid rgba(0,255,255,0.06);
}
.dxtvc-toggle-row:last-of-type { border-bottom: none; }
.dxtvc-toggle-info { flex: 1; min-width: 0; }
.dxtvc-toggle-label {
  font-family: var(--dxtvc-font); font-size: 0.85rem; font-weight: 600;
  color: var(--dxtvc-text); margin-bottom: 0.15rem;
}
.dxtvc-toggle-desc {
  font-family: var(--dxtvc-mono); font-size: 0.65rem; color: var(--dxtvc-dark);
  line-height: 1.4;
}
.dxtvc-toggle-btn {
  position: relative; flex-shrink: 0;
  width: 44px; height: 24px; border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer; transition: all 0.25s ease;
  padding: 0;
}
.dxtvc-toggle-btn--on {
  background: rgba(0,255,255,0.25);
  border-color: rgba(0,255,255,0.5);
  box-shadow: 0 0 10px rgba(0,255,255,0.2);
}
.dxtvc-toggle-btn--gold.dxtvc-toggle-btn--on {
  background: rgba(255,215,0,0.2);
  border-color: rgba(255,215,0,0.5);
  box-shadow: 0 0 10px rgba(255,215,0,0.2);
}
.dxtvc-toggle-btn__knob {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  display: block;
}
.dxtvc-toggle-btn--on .dxtvc-toggle-btn__knob {
  left: 23px; background: var(--dxtvc-cyan);
  box-shadow: 0 0 6px var(--dxtvc-cyan);
}
.dxtvc-toggle-btn--gold.dxtvc-toggle-btn--on .dxtvc-toggle-btn__knob {
  background: #ffd700; box-shadow: 0 0 6px #ffd700;
}

/* Admin settings card accent */
.dxtvc-settings-card--admin {
  border-color: rgba(255,215,0,0.2) !important;
  background: rgba(255,215,0,0.02) !important;
}
.dxtvc-settings-card--stats {
  border-color: rgba(255,215,0,0.15) !important;
  background: rgba(255,215,0,0.01) !important;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE THEME PICKER
   ═══════════════════════════════════════════════════════════ */
.dxtvc-theme-picker {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem;
}
.dxtvc-theme-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.75rem;
  background: rgba(5,5,16,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; cursor: pointer; transition: all 0.2s;
  min-width: 70px;
}
.dxtvc-theme-swatch:hover { border-color: var(--swatch-color); transform: translateY(-2px); }
.dxtvc-theme-swatch--active {
  border-color: var(--swatch-color) !important;
  background: rgba(255,255,255,0.04) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--swatch-color) 30%, transparent);
}
.dxtvc-theme-swatch__dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--swatch-color);
  box-shadow: 0 0 8px var(--swatch-color);
}
.dxtvc-theme-swatch__label {
  font-family: var(--dxtvc-mono); font-size: 0.6rem;
  color: var(--dxtvc-muted); letter-spacing: 0.05em;
}
.dxtvc-theme-swatch--active .dxtvc-theme-swatch__label { color: var(--swatch-color); }

/* ═══════════════════════════════════════════════════════════
   SITE STATS GRID (owner-only)
   ═══════════════════════════════════════════════════════════ */
.dxtvc-site-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
  gap: 0.5rem; margin-top: 0.5rem;
}
.dxtvc-site-stat-box {
  background: rgba(255,215,0,0.04); border: 1px solid rgba(255,215,0,0.12);
  border-radius: 6px; padding: 0.6rem 0.75rem; text-align: center;
}
.dxtvc-site-stat-box strong {
  display: block; font-family: var(--dxtvc-display); font-size: 1.1rem;
  font-weight: 900; color: #ffd700;
}
.dxtvc-site-stat-box span {
  font-family: var(--dxtvc-mono); font-size: 0.58rem;
  color: var(--dxtvc-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
.dxtvc-site-stat-box--online strong { color: #00ff88; }

/* ═══════════════════════════════════════════════════════════
   RICH ADMIN COMPOSER
   ═══════════════════════════════════════════════════════════ */
.dxtvc-compose-tabs {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.5rem 0.75rem 0;
  border-bottom: 1px solid rgba(0,255,255,0.08);
  margin-bottom: 0.75rem; flex-wrap: wrap;
}
.dxtvc-compose-tab {
  padding: 0.3rem 0.75rem; border: 1px solid rgba(0,255,255,0.12);
  background: transparent; border-radius: 5px 5px 0 0; border-bottom: none;
  color: var(--dxtvc-muted); font-family: var(--dxtvc-mono);
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: all 0.15s; margin-bottom: -1px;
}
.dxtvc-compose-tab:hover { color: var(--dxtvc-text); background: rgba(0,255,255,0.04); }
.dxtvc-compose-tab--active {
  background: rgba(0,255,255,0.08) !important;
  border-color: rgba(0,255,255,0.25) !important;
  color: var(--dxtvc-cyan) !important;
  border-bottom-color: var(--dxtvc-card) !important;
}
.dxtvc-compose-bg-wrap { margin-left: auto; }
.dxtvc-compose-bg-label {
  display: flex; align-items: center; gap: 0.25rem;
  cursor: pointer; font-size: 0.85rem;
  color: var(--dxtvc-muted); transition: color 0.15s;
}
.dxtvc-compose-bg-label:hover { color: var(--dxtvc-text); }
.dxtvc-compose-bg-input {
  width: 24px; height: 24px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);
  padding: 0; cursor: pointer; background: none;
}
.dxtvc-compose-lang-select {
  background: rgba(5,5,16,0.8); border: 1px solid rgba(0,255,255,0.15);
  color: var(--dxtvc-cyan); border-radius: 5px;
  font-family: var(--dxtvc-mono); font-size: 0.7rem; padding: 0.2rem 0.4rem;
  cursor: pointer; margin-left: 0.25rem;
}
.dxtvc-compose__textarea--code {
  font-family: var(--dxtvc-mono) !important;
  font-size: 0.82rem !important;
  min-height: 120px !important;
  tab-size: 2;
}
.dxtvc-compose__preview {
  background: rgba(5,5,16,0.8);
  border: 1px solid rgba(0,255,255,0.1);
  border-radius: 6px; padding: 0.75rem;
  margin-top: 0.5rem;
}
.dxtvc-compose__preview-label {
  font-family: var(--dxtvc-mono); font-size: 0.6rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--dxtvc-dark); margin-bottom: 0.5rem;
}
.dxtvc-compose__preview-content { color: var(--dxtvc-text); font-size: 0.88rem; line-height: 1.6; }
.dxtvc-compose__preview-btn { margin-right: auto; }

/* ═══════════════════════════════════════════════════════════
   RICH POST RENDERING
   ═══════════════════════════════════════════════════════════ */
.dxtvc-rich-post { color: var(--dxtvc-text); line-height: 1.6; }
.dxtvc-rich-post h1,.dxtvc-rich-post h2,.dxtvc-rich-post h3 {
  font-family: var(--dxtvc-display); color: var(--dxtvc-cyan);
}
.dxtvc-rich-post a { color: var(--dxtvc-cyan); }
.dxtvc-rich-post img { max-width: 100%; border-radius: 6px; }

.dxtvc-code-post {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0,255,255,0.15);
  border-radius: 8px; overflow: hidden;
  font-family: var(--dxtvc-mono);
}
.dxtvc-code-post__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.4rem 0.75rem;
  background: rgba(0,255,255,0.05);
  border-bottom: 1px solid rgba(0,255,255,0.1);
}
.dxtvc-code-post__lang {
  font-family: var(--dxtvc-display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--dxtvc-cyan);
}
.dxtvc-code-copy {
  background: rgba(0,255,255,0.08); border: 1px solid rgba(0,255,255,0.2);
  color: var(--dxtvc-cyan); border-radius: 4px; padding: 2px 10px;
  font-family: var(--dxtvc-mono); font-size: 0.62rem; cursor: pointer;
  transition: all 0.15s;
}
.dxtvc-code-copy:hover { background: rgba(0,255,255,0.15); }
.dxtvc-code-post__pre {
  margin: 0; padding: 0.9rem 0.75rem;
  font-size: 0.8rem; line-height: 1.6;
  color: #a8d8a8; overflow-x: auto;
  white-space: pre; tab-size: 2;
}

.dxtvc-embed-post { border-radius: 8px; overflow: hidden; }
.dxtvc-embed-post iframe { max-width: 100%; border: none; border-radius: 8px; }

/* ═══════════════════════════════════════════════════════════
   PINNED POST INDICATOR
   ═══════════════════════════════════════════════════════════ */
.dxtvc-status-card--pinned {
  border-left: 3px solid #ffd700 !important;
  order: -999;
}
.dxtvc-pinned-label {
  font-family: var(--dxtvc-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #ffd700;
  margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.3rem;
}

/* ═══════════════════════════════════════════════════════════
   STAFF PICK BANNER (on trip reports)
   ═══════════════════════════════════════════════════════════ */
.dxtvc-staff-pick-banner {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.3);
  color: #ffd700; border-radius: 6px; padding: 0.35rem 0.9rem;
  font-family: var(--dxtvc-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 1rem; display: block;
  box-shadow: 0 0 16px rgba(255,215,0,0.1);
}

/* ═══════════════════════════════════════════════════════════
   ADMIN LOUNGE
   ═══════════════════════════════════════════════════════════ */
.dxtvc-lounge { padding: 2rem 0; max-width: 800px; margin: 0 auto; }
.dxtvc-lounge__header { margin-bottom: 2rem; text-align: center; }
.dxtvc-lounge__title {
  font-family: var(--dxtvc-display); font-size: 1.8rem; font-weight: 900;
  color: #ffd700; margin: 0 0 0.4rem;
  text-shadow: 0 0 24px rgba(255,215,0,0.4);
}
.dxtvc-lounge__sub {
  font-family: var(--dxtvc-mono); font-size: 0.75rem; color: var(--dxtvc-muted);
}
.dxtvc-lounge-card {
  background: var(--dxtvc-card);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 10px; padding: 1.25rem;
  margin-bottom: 1rem;
}
.dxtvc-lounge-card__title {
  font-family: var(--dxtvc-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #ffd700; margin-bottom: 1rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255,215,0,0.12);
}
.dxtvc-lounge-msg {
  margin-top: 0.75rem; padding: 0.5rem 0.75rem;
  border-radius: 5px; font-family: var(--dxtvc-mono); font-size: 0.75rem;
}
.dxtvc-lounge-msg--ok  { background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.25); color: var(--dxtvc-green); }
.dxtvc-lounge-msg--err { background: rgba(255,51,85,0.08);  border: 1px solid rgba(255,51,85,0.25);  color: #ff3355; }

.dxtvc-lounge-reactions {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.dxtvc-lounge-emoji {
  display: flex; align-items: center; gap: 0.35rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; padding: 0.35rem 0.6rem;
  font-size: 1.1rem;
}
.dxtvc-lounge-emoji__remove {
  background: none; border: none; color: #ff3355; cursor: pointer;
  font-size: 0.7rem; padding: 0; line-height: 1;
}
.dxtvc-lounge-emoji__default {
  font-family: var(--dxtvc-mono); font-size: 0.55rem;
  color: var(--dxtvc-dark); letter-spacing: 0.05em;
}
.dxtvc-lounge-pinned-list { display: flex; flex-direction: column; gap: 0.4rem; }
.dxtvc-lounge-pinned-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; background: rgba(255,215,0,0.03);
  border: 1px solid rgba(255,215,0,0.1); border-radius: 6px;
}
.dxtvc-lounge-pinned-type {
  font-family: var(--dxtvc-mono); font-size: 0.62rem;
  color: var(--dxtvc-dark); flex-shrink: 0;
}
.dxtvc-lounge-pinned-title { flex: 1; font-size: 0.85rem; color: var(--dxtvc-text); }
.dxtvc-lounge-unpin-btn {
  background: rgba(255,51,85,0.08); border: 1px solid rgba(255,51,85,0.25);
  color: #ff3355; border-radius: 4px; padding: 2px 10px;
  font-family: var(--dxtvc-mono); font-size: 0.65rem; cursor: pointer;
}
.dxtvc-lounge-links {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 0.5rem;
}
.dxtvc-lounge-link {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: rgba(255,215,0,0.05); border: 1px solid rgba(255,215,0,0.12);
  border-radius: 7px; color: #ffd700; text-decoration: none;
  font-family: var(--dxtvc-font); font-weight: 600; font-size: 0.8rem;
  transition: all 0.2s;
}
.dxtvc-lounge-link:hover { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.3); }


/* ── HOMEPAGE LOGIN: Carousel replaces DXM ring ─────────── */
.dxtvc-home-login__carousel {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border-radius: 16px;
  overflow: hidden;
  background: #050510;
}
.dxtvc-login-carousel__slide {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  will-change: transform, opacity;
}
.dxtvc-login-carousel__slide.is-active {
  opacity: 1;
  animation: dxtvc-login-kb 16s ease-in-out forwards;
}
.dxtvc-login-carousel__slide.is-leaving { opacity: 0; }
@keyframes dxtvc-login-kb {
  0%   { transform: scale(1)    translate(0,0); }
  50%  { transform: scale(1.06) translate(-1%,0.5%); }
  100% { transform: scale(1.12) translate(-2%,1%); }
}
/* Overlay so text on right stays readable */
.dxtvc-home-login__carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(5,5,16,0.15) 0%,
    rgba(5,5,16,0.45) 80%,
    rgba(5,5,16,0.85) 100%
  );
  pointer-events: none;
}
/* Mobile: shorter, full width */
@media (max-width: 768px) {
  .dxtvc-home-login__carousel {
    min-height: 200px;
    border-radius: 12px;
  }
}


/* ═══ PROFILE PHOTO GALLERY ═══ */
/* ════════════════════════════════════════════════════════════
   DEXTROVERSE — Profile Photo Gallery
   6-slot animated card system
   Tailwind/Astro aesthetic · Glass · Neon · Motion
   ════════════════════════════════════════════════════════════ */

/* ── Section wrapper ───────────────────────────────────────── */
.dxtvc-gallery {
  --gal-accent: var(--profile-primary, var(--dxtvc-cyan, #00ffff));
  --gal-accent2: var(--profile-secondary, var(--dxtvc-magenta, #ff00ff));
  --gal-radius: 16px;
  --gal-card-bg: rgba(8,8,24,0.85);
  margin: 1.5rem 0 2rem;
  container-type: inline-size;
}

/* ── Header row ────────────────────────────────────────────── */
.dxtvc-gallery__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dxtvc-gallery__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--dxtvc-display, 'Orbitron', monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gal-accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--gal-accent) 40%, transparent);
}
.dxtvc-gallery__icon {
  opacity: 0.6;
  animation: gal-icon-pulse 3s ease-in-out infinite;
}
@keyframes gal-icon-pulse {
  0%,100% { opacity: 0.5; }
  50%     { opacity: 1; filter: drop-shadow(0 0 4px var(--gal-accent)); }
}
.dxtvc-gallery__count {
  font-size: 0.6rem;
  font-family: monospace;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 0.25rem;
}

/* Add photo button */
.dxtvc-gallery__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: rgba(var(--gal-accent), 0.06);
  background: color-mix(in srgb, var(--gal-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--gal-accent) 30%, transparent);
  border-radius: 8px;
  color: var(--gal-accent);
  font-family: var(--dxtvc-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.dxtvc-gallery__add-btn:hover {
  background: color-mix(in srgb, var(--gal-accent) 14%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gal-accent) 20%, transparent);
}

/* ── 6-slot grid ───────────────────────────────────────────── */
.dxtvc-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.6rem;
  /* First card (avatar) spans 2 rows */
  grid-template-areas:
    "a b c"
    "a d e"
    ". f g";
}

/* ── Individual card ───────────────────────────────────────── */
.dxtvc-gallery__card {
  position: relative;
  border-radius: var(--gal-radius);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--gal-card-bg);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.35s cubic-bezier(0.23,1,0.32,1);
  isolation: isolate;
}

/* Avatar card — bigger, spans 2 rows */
.dxtvc-gallery__card--avatar {
  grid-area: a;
  aspect-ratio: auto;
  grid-row: span 2;
  border: 1px solid color-mix(in srgb, var(--gal-accent) 25%, transparent);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 8px 32px rgba(0,0,0,0.5),
    0 0 24px color-mix(in srgb, var(--gal-accent) 8%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Filled cards */
.dxtvc-gallery__card--filled {
  border-color: rgba(255,255,255,0.1);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.dxtvc-gallery__card--filled:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: color-mix(in srgb, var(--gal-accent) 35%, transparent);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.55),
    0 0 20px color-mix(in srgb, var(--gal-accent) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.1);
  z-index: 2;
}

/* Empty slot */
.dxtvc-gallery__card--empty {
  border: 1px dashed rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.015);
}
.dxtvc-gallery__card--empty:hover {
  border-color: color-mix(in srgb, var(--gal-accent) 25%, transparent);
  background: color-mix(in srgb, var(--gal-accent) 3%, transparent);
}

/* Card inner */
.dxtvc-gallery__card-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dxtvc-gallery__card-inner--empty {
  flex-direction: column;
  gap: 0.4rem;
}
.dxtvc-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1);
}
.dxtvc-gallery__card--filled:hover .dxtvc-gallery__img {
  transform: scale(1.06);
}

/* Slot number on empty cards */
.dxtvc-gallery__slot-num {
  font-family: var(--dxtvc-display, 'Orbitron', monospace);
  font-size: 1.5rem;
  font-weight: 900;
  color: rgba(255,255,255,0.06);
  line-height: 1;
}
.dxtvc-gallery__slot-line {
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,0.06);
}

/* Overlay on hover */
.dxtvc-gallery__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.7) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.25s;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0.6rem;
  pointer-events: none;
}
.dxtvc-gallery__card--filled:hover .dxtvc-gallery__card-overlay,
.dxtvc-gallery__card--avatar .dxtvc-gallery__card-overlay {
  opacity: 1;
  pointer-events: auto;
}
.dxtvc-gallery__card--avatar .dxtvc-gallery__card-overlay {
  opacity: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 40%);
}
.dxtvc-gallery__card-label {
  font-family: var(--dxtvc-mono, monospace);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.dxtvc-gallery__card-num {
  font-family: var(--dxtvc-display, 'Orbitron', monospace);
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--gal-accent);
  text-shadow: 0 0 8px var(--gal-accent);
}
.dxtvc-gallery__delete-btn {
  width: 22px; height: 22px;
  background: rgba(255,51,85,0.2);
  border: 1px solid rgba(255,51,85,0.4);
  border-radius: 50%;
  color: rgba(255,51,85,0.9);
  font-size: 0.6rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  pointer-events: auto;
}
.dxtvc-gallery__delete-btn:hover {
  background: rgba(255,51,85,0.4);
  color: #fff;
}

/* ── CARD ENTRANCE ANIMATIONS ──────────────────────────────── */
/* Cards animate in when first appearing (photo 2+ trigger) */
.dxtvc-gallery__card--animate-in {
  animation: gal-card-enter 0.7s cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes gal-card-enter {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(12px);
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  80% {
    transform: scale(1.03) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* INITIATION — when 2nd photo is added, ALL existing cards re-animate */
.dxtvc-gallery--initiation .dxtvc-gallery__card--filled {
  animation: gal-initiation 1.2s cubic-bezier(0.23,1,0.32,1) both;
}
.dxtvc-gallery--initiation .dxtvc-gallery__card--filled:nth-child(1) { animation-delay: 0s; }
.dxtvc-gallery--initiation .dxtvc-gallery__card--filled:nth-child(2) { animation-delay: 0.1s; }
.dxtvc-gallery--initiation .dxtvc-gallery__card--filled:nth-child(3) { animation-delay: 0.2s; }
.dxtvc-gallery--initiation .dxtvc-gallery__card--filled:nth-child(4) { animation-delay: 0.3s; }
.dxtvc-gallery--initiation .dxtvc-gallery__card--filled:nth-child(5) { animation-delay: 0.4s; }
.dxtvc-gallery--initiation .dxtvc-gallery__card--filled:nth-child(6) { animation-delay: 0.5s; }

@keyframes gal-initiation {
  0%   { transform: scale(1); box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
  15%  { transform: scale(0.92); }
  35%  {
    transform: scale(1.05);
    box-shadow:
      0 8px 40px rgba(0,0,0,0.6),
      0 0 30px color-mix(in srgb, var(--gal-accent) 30%, transparent);
    border-color: color-mix(in srgb, var(--gal-accent) 60%, transparent);
  }
  65%  { transform: scale(1.02); }
  100% { transform: scale(1); box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
}

/* Glow pulse on avatar card after initiation */
.dxtvc-gallery--initiated .dxtvc-gallery__card--avatar {
  animation: gal-avatar-aura 4s ease-in-out infinite;
}
@keyframes gal-avatar-aura {
  0%,100% {
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.5),
      0 8px 32px rgba(0,0,0,0.5),
      0 0 20px color-mix(in srgb, var(--gal-accent) 8%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.5),
      0 8px 40px rgba(0,0,0,0.6),
      0 0 40px color-mix(in srgb, var(--gal-accent) 20%, transparent),
      0 0 60px color-mix(in srgb, var(--gal-accent2) 8%, transparent);
  }
}

/* Shimmer on filled cards after initiation */
.dxtvc-gallery--initiated .dxtvc-gallery__card--filled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.04) 50%,
    transparent 60%
  );
  background-size: 200% 200%;
  animation: gal-shimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}
.dxtvc-gallery--initiated .dxtvc-gallery__card--filled:nth-child(2n)::after {
  animation-delay: -2s;
}
.dxtvc-gallery--initiated .dxtvc-gallery__card--filled:nth-child(3n)::after {
  animation-delay: -4s;
}
@keyframes gal-shimmer {
  0%   { background-position: 200% 0; }
  50%  { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── CROPPER MODAL ─────────────────────────────────────────── */
.dxtvc-gallery-cropper {
  background: rgba(5,5,18,0.98);
  border: 1px solid rgba(0,255,255,0.15);
  border-radius: 18px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.85);
  overflow: hidden;
}
.dxtvc-gallery-cropper__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,255,255,0.02);
}
.dxtvc-gallery-cropper__title {
  font-family: var(--dxtvc-display, 'Orbitron', monospace);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--dxtvc-cyan, #00ffff);
  text-transform: uppercase;
}
.dxtvc-gallery-cropper__hint {
  font-family: monospace;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.3);
  text-align: center;
  padding: 0.6rem 1.4rem 0;
}
.dxtvc-gallery-cropper__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 50vh;
  overflow: hidden;
  background: #050510;
}
.dxtvc-gallery-cropper__stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: grab;
}
.dxtvc-gallery-cropper__stage canvas:active { cursor: grabbing; }
.dxtvc-gallery-cropper__zoom-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.dxtvc-gallery-cropper__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  padding: 0.85rem 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@container (max-width: 400px) {
  .dxtvc-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas: none;
  }
  .dxtvc-gallery__card--avatar {
    grid-row: span 1;
    grid-area: auto;
  }
}
@media (max-width: 480px) {
  .dxtvc-gallery__slot-num { font-size: 1rem; }
  .dxtvc-gallery__card { border-radius: 10px; }
}


/* ═══ SWIM MEMORIES ═══ */
/* ════════════════════════════════════════════════════════════
   SWIM MEMORIES — Profile Photo Memory System
   Glass cards · Film date stamp · Initiation animation
   Limit modal with live SwimBucks counter
   ════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
.dxtvc-memories {
  --mem-accent:  var(--profile-primary,  var(--dxtvc-cyan,    #00ffff));
  --mem-accent2: var(--profile-secondary, var(--dxtvc-magenta, #ff00ff));
  --mem-gold:    #ffd600;
  --mem-radius:  14px;
  margin: 2rem 0;
  container-type: inline-size;
}

/* ── Header ────────────────────────────────────────────────── */
.dxtvc-memories__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dxtvc-memories__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--dxtvc-display, 'Orbitron', monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mem-accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--mem-accent) 40%, transparent);
}
.dxtvc-memories__mark {
  animation: mem-mark 4s ease-in-out infinite;
}
@keyframes mem-mark {
  0%,100% { opacity: 0.5; }
  50%     { opacity: 1; filter: drop-shadow(0 0 5px var(--mem-accent)); }
}
.dxtvc-memories__counter {
  font-size: 0.58rem;
  font-family: monospace;
  color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Add Memory button */
.dxtvc-memories__add {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.8rem;
  background: color-mix(in srgb, var(--mem-accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--mem-accent) 28%, transparent);
  border-radius: 8px;
  color: var(--mem-accent);
  font-family: var(--dxtvc-mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.dxtvc-memories__add:hover {
  background: color-mix(in srgb, var(--mem-accent) 14%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--mem-accent) 18%, transparent);
}

/* Reset trigger */
.dxtvc-memories__reset-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.8rem;
  background: rgba(255,214,0,0.06);
  border: 1px solid rgba(255,214,0,0.28);
  border-radius: 8px;
  color: var(--mem-gold);
  font-family: var(--dxtvc-mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  animation: mem-reset-pulse 3s ease-in-out infinite;
}
@keyframes mem-reset-pulse {
  0%,100% { box-shadow: none; }
  50%     { box-shadow: 0 0 14px rgba(255,214,0,0.2); }
}
.dxtvc-memories__reset-trigger:hover {
  background: rgba(255,214,0,0.12);
  border-color: rgba(255,214,0,0.5);
}

/* ── Grid ──────────────────────────────────────────────────── */
.dxtvc-memories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

/* ── Cards ─────────────────────────────────────────────────── */
.dxtvc-memories__card {
  position: relative;
  border-radius: var(--mem-radius);
  overflow: hidden;
  aspect-ratio: 1;
  isolation: isolate;
  transition: all 0.35s cubic-bezier(0.23,1,0.32,1);
  animation: mem-card-in 0.6s cubic-bezier(0.23,1,0.32,1) calc(var(--card-delay,0s)) both;
}
@keyframes mem-card-in {
  from { opacity:0; transform: scale(0.88) translateY(10px); filter: blur(3px); }
  to   { opacity:1; transform: none; filter: none; }
}

/* Filled card */
.dxtvc-memories__card--filled {
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  cursor: pointer;
}
.dxtvc-memories__card--filled:hover {
  transform: translateY(-3px) scale(1.025);
  border-color: color-mix(in srgb, var(--mem-accent) 35%, transparent);
  box-shadow:
    0 10px 36px rgba(0,0,0,0.55),
    0 0 20px color-mix(in srgb, var(--mem-accent) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.1);
  z-index: 2;
}

/* Image wrap */
.dxtvc-memories__card-img-wrap {
  position: absolute;
  inset: 0;
}
.dxtvc-memories__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1);
}
.dxtvc-memories__card--filled:hover .dxtvc-memories__img {
  transform: scale(1.07);
}

/* ── DATE STAMP — film negative corner ────────────────────── */
.dxtvc-memories__datestamp {
  position: absolute;
  bottom: 7px;
  left: 8px;
  z-index: 5;
  font-family: 'Courier New', 'Lucida Console', monospace;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,214,0,0.75);
  text-shadow:
    0 0 6px rgba(255,214,0,0.5),
    0 1px 2px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.35);
  padding: 1px 5px;
  border-radius: 3px;
  backdrop-filter: blur(2px);
  pointer-events: none;
  /* Like old Kodak photo timestamps */
  border: 1px solid rgba(255,214,0,0.15);
  transition: opacity 0.2s;
}
.dxtvc-memories__card--filled:hover .dxtvc-memories__datestamp {
  opacity: 0.4; /* fade slightly on hover so content shows */
}

/* Card overlay */
.dxtvc-memories__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.25s;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.6rem;
  pointer-events: none;
}
.dxtvc-memories__card--filled:hover .dxtvc-memories__card-overlay { opacity: 1; }
.dxtvc-memories__card-num {
  font-family: var(--dxtvc-display, 'Orbitron', monospace);
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--mem-accent);
  text-shadow: 0 0 8px var(--mem-accent);
}

/* Empty slot */
.dxtvc-memories__card--empty {
  border: 1px dashed rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.012);
}
.dxtvc-memories__card--empty:hover {
  border-color: color-mix(in srgb, var(--mem-accent) 22%, transparent);
  background: color-mix(in srgb, var(--mem-accent) 3%, transparent);
}
.dxtvc-memories__slot-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dxtvc-memories__slot-num {
  font-family: var(--dxtvc-display, 'Orbitron', monospace);
  font-size: 1.6rem;
  font-weight: 900;
  color: rgba(255,255,255,0.05);
  line-height: 1;
  user-select: none;
}

/* ── INITIATION — card burst when 2nd memory added ─────────── */
.dxtvc-memories--initiation .dxtvc-memories__card--filled {
  animation: mem-initiation 1.2s cubic-bezier(0.23,1,0.32,1) calc(var(--card-delay,0s)) both;
}
@keyframes mem-initiation {
  0%   { transform: scale(1); }
  20%  { transform: scale(0.9); filter: brightness(0.7); }
  50%  {
    transform: scale(1.06);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--mem-accent) 70%, transparent),
      0 0 30px color-mix(in srgb, var(--mem-accent) 35%, transparent);
    filter: brightness(1.2) saturate(1.3);
  }
  80%  { transform: scale(1.01); }
  100% { transform: scale(1); filter: none; }
}

/* Persistent glow after initiation */
.dxtvc-memories--initiated .dxtvc-memories__card--filled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(255,255,255,0.045) 50%,
    transparent 65%
  );
  background-size: 250% 250%;
  animation: mem-shimmer 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 6;
  border-radius: inherit;
}
.dxtvc-memories--initiated .dxtvc-memories__card--filled:nth-child(2n)::after  { animation-delay: -2.5s; }
.dxtvc-memories--initiated .dxtvc-memories__card--filled:nth-child(3n)::after  { animation-delay: -5s; }
@keyframes mem-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* New card pop-in */
.dxtvc-memories__card--new {
  animation: mem-new-pop 0.8s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes mem-new-pop {
  0%   { opacity:0; transform:scale(0.7); filter:blur(6px); }
  60%  { opacity:1; transform:scale(1.08); filter:blur(0); }
  80%  { transform:scale(0.97); }
  100% { transform:scale(1); }
}

/* ── WIPE ANIMATION on reset ───────────────────────────────── */
.dxtvc-memories__card--wipe {
  animation: mem-wipe 0.5s cubic-bezier(0.4,0,1,1) calc(var(--card-delay,0s)) forwards;
}
@keyframes mem-wipe {
  0%   { opacity:1; transform:scale(1); }
  40%  { transform:scale(1.04); filter:brightness(1.3); }
  100% { opacity:0; transform:scale(0.7); filter:blur(4px); }
}

/* ── DATE PICKER MODAL ─────────────────────────────────────── */
.dxtvc-mem-date-panel {
  background: rgba(5,5,18,0.98);
  border: 1px solid rgba(0,255,255,0.15);
  border-top: 2px solid var(--mem-accent);
  border-radius: 18px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.85);
  overflow: hidden;
  animation: mem-modal-in 0.3s cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes mem-modal-in {
  from { opacity:0; transform:translateY(20px) scale(0.97); }
  to   { opacity:1; transform:none; }
}
.dxtvc-mem-date-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dxtvc-mem-date-panel__title {
  font-family: var(--dxtvc-display, 'Orbitron', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--mem-accent);
  text-transform: uppercase;
}
.dxtvc-mem-date-panel__body { padding: 1.25rem 1.4rem; }
.dxtvc-mem-date-panel__hint {
  font-family: monospace;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.dxtvc-mem-date-field { margin-bottom: 0.75rem; }
.dxtvc-mem-date-label {
  display: block;
  font-family: monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mem-accent);
  margin-bottom: 0.35rem;
}
.dxtvc-mem-date-input {
  width: 100%;
  background: rgba(0,0,10,0.85);
  border: 1px solid rgba(0,255,255,0.18);
  border-radius: 8px;
  color: rgba(255,255,255,0.88);
  font-family: monospace;
  font-size: 0.88rem;
  padding: 0.6rem 0.85rem;
  outline: none;
  caret-color: var(--mem-accent);
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.dxtvc-mem-date-input:focus { border-color: color-mix(in srgb, var(--mem-accent) 55%, transparent); }
/* Style the native date picker */
.dxtvc-mem-date-input::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.4);
  cursor: pointer;
}
.dxtvc-mem-date-preview-label {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: rgba(255,214,0,0.7);
  text-align: center;
  padding: 0.5rem;
  border: 1px solid rgba(255,214,0,0.1);
  border-radius: 6px;
  background: rgba(255,214,0,0.04);
  letter-spacing: 0.06em;
}
.dxtvc-mem-date-panel__foot {
  display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end;
  padding: 0.85rem 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── CROPPER MODAL ─────────────────────────────────────────── */
.dxtvc-mem-cropper {
  background: rgba(5,5,18,0.98);
  border: 1px solid rgba(0,255,255,0.15);
  border-top: 2px solid var(--mem-accent);
  border-radius: 18px;
  width: 100%; max-width: 460px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.85);
  overflow: hidden;
  animation: mem-modal-in 0.25s cubic-bezier(0.23,1,0.32,1) both;
}
.dxtvc-mem-cropper__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dxtvc-mem-cropper__title {
  font-family: var(--dxtvc-display, 'Orbitron', monospace);
  font-size: 0.7rem; letter-spacing: 0.22em; color: var(--mem-accent);
}
.dxtvc-mem-cropper__hint {
  font-family: monospace; font-size: 0.62rem; color: rgba(255,255,255,0.3);
  text-align: center; padding: 0.55rem 1.4rem 0;
}
.dxtvc-mem-cropper__stage {
  position: relative; width: 100%; aspect-ratio: 1; max-height: 50vh;
  overflow: hidden; background: #050510; cursor: grab;
}
.dxtvc-mem-cropper__stage:active { cursor: grabbing; }
#dxtvc-mem-canvas { width:100%!important; height:100%!important; display:block; }
.dxtvc-mem-cropper__zoom {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.4rem; border-top: 1px solid rgba(255,255,255,0.04);
}
.dxtvc-mem-cropper__actions {
  display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end;
  padding: 0.85rem 1.4rem; border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── LIMIT MODAL — 25 SwimBucks ────────────────────────────── */
.dxtvc-mem-limit-panel {
  position: relative;
  background: rgba(5,5,18,0.99);
  border: 1px solid rgba(255,214,0,0.2);
  border-radius: 20px;
  width: 100%; max-width: 380px;
  padding: 2rem 1.75rem;
  text-align: center;
  overflow: hidden;
  animation: mem-modal-in 0.35s cubic-bezier(0.23,1,0.32,1) both;
  box-shadow: 0 0 60px rgba(255,214,0,0.08), 0 24px 80px rgba(0,0,0,0.9);
}
/* Glow behind */
.dxtvc-mem-limit-panel__glow {
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,214,0,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.dxtvc-mem-limit-panel__icon {
  font-size: 2rem;
  color: var(--mem-gold);
  filter: drop-shadow(0 0 10px rgba(255,214,0,0.6));
  margin-bottom: 0.75rem;
  display: block;
  animation: mem-icon-glow 2.5s ease-in-out infinite;
}
@keyframes mem-icon-glow {
  0%,100% { filter: drop-shadow(0 0 8px rgba(255,214,0,0.5)); }
  50%     { filter: drop-shadow(0 0 20px rgba(255,214,0,0.9)); }
}
.dxtvc-mem-limit-panel__title {
  font-family: var(--dxtvc-display, 'Orbitron', monospace);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--mem-gold);
  text-shadow: 0 0 12px rgba(255,214,0,0.4);
  margin: 0 0 0.5rem;
}
.dxtvc-mem-limit-panel__sub {
  font-family: monospace;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin: 0 0 1.25rem;
}
/* Live bucks display */
.dxtvc-mem-limit-panel__cost {
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  background: rgba(255,214,0,0.05);
  border: 1px solid rgba(255,214,0,0.15);
  border-radius: 10px;
}
.dxtvc-mem-limit-panel__cost-val {
  display: block;
  font-family: var(--dxtvc-display, 'Orbitron', monospace);
  font-size: 2rem;
  font-weight: 900;
  color: var(--mem-gold);
  text-shadow: 0 0 14px rgba(255,214,0,0.5);
  line-height: 1;
  margin-bottom: 0.25rem;
  transition: all 0.1s;
}
.dxtvc-mem-limit-panel__cost-label {
  font-family: monospace;
  font-size: 0.65rem;
  color: rgba(255,214,0,0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Warning rows */
.dxtvc-mem-limit-panel__warning {
  margin-bottom: 1.25rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}
.dxtvc-mem-limit-panel__warning-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02);
  text-align: left;
}
.dxtvc-mem-limit-panel__warning-row:last-child { border-bottom: none; }
.dxtvc-mem-limit-panel__warning-cost {
  font-family: var(--dxtvc-display, 'Orbitron', monospace);
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,214,0,0.75);
}
.dxtvc-mem-limit-panel__warning-text {
  font-family: monospace;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.35);
}
.dxtvc-mem-limit-panel__confirm-text {
  font-family: monospace;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}
.dxtvc-mem-limit-panel__confirm-text strong { color: var(--mem-gold); }
.dxtvc-mem-limit-panel__broke {
  padding: 0.6rem;
  background: rgba(255,51,85,0.06);
  border: 1px solid rgba(255,51,85,0.2);
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.72rem;
  color: rgba(255,100,100,0.8);
  margin-bottom: 1rem;
}
.dxtvc-mem-limit-panel__btns {
  display: flex; gap: 0.75rem;
}
.dxtvc-mem-limit-panel__spend-btn {
  flex: 1;
  background: linear-gradient(135deg, rgba(255,214,0,0.15), rgba(255,180,0,0.1)) !important;
  border: 1px solid rgba(255,214,0,0.45) !important;
  color: var(--mem-gold) !important;
  font-weight: 900 !important;
  box-shadow: 0 0 20px rgba(255,214,0,0.12) !important;
  transition: all 0.2s !important;
}
.dxtvc-mem-limit-panel__spend-btn:hover:not(:disabled) {
  background: rgba(255,214,0,0.22) !important;
  box-shadow: 0 0 30px rgba(255,214,0,0.22) !important;
}
.dxtvc-mem-limit-panel__spend-btn:disabled {
  opacity: 0.35 !important; pointer-events: none !important;
}

/* Bucks leaving animation — number ticks down */
.dxtvc-mem-limit-panel__cost-val.is-spending {
  animation: bucks-tick 0.08s steps(1) infinite;
}
@keyframes bucks-tick {
  0%  { color: var(--mem-gold); }
  50% { color: rgba(255,51,85,0.8); }
}
.dxtvc-mem-limit-panel__cost-val.is-done {
  color: rgba(255,100,100,0.7) !important;
  text-shadow: 0 0 10px rgba(255,51,85,0.4) !important;
}

/* ── MOBILE ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .dxtvc-memories__grid { gap: 0.4rem; }
  .dxtvc-memories__card { border-radius: 10px; }
  .dxtvc-memories__datestamp { font-size: 0.44rem; padding: 1px 4px; }
  .dxtvc-memories__slot-num { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dxtvc-memories__card,
  .dxtvc-memories--initiation .dxtvc-memories__card--filled,
  .dxtvc-memories--initiated .dxtvc-memories__card--filled::after { animation: none !important; }
}