/* ═══════════════════════════════════════════════════════════════════
   SPARK — main.css  (Premium Edition v2)
   Deep-space glassmorphism · Iridescent accents · Micro-animations
   ═══════════════════════════════════════════════════════════════════ */

/* ════ DESIGN TOKENS ════ */
:root {
  /* Surfaces */
  --bg:   #05060F;
  --sf:   #080C1C;
  --sf2:  #0C1128;
  --sf3:  #101633;

  /* Borders */
  --bd:   rgba(255,255,255,0.07);
  --bd2:  rgba(255,255,255,0.13);

  /* Gold accent (SPK) */
  --ac:      #E8C55A;
  --ac2:     #5AE8C5;
  --ac-glow: rgba(232,197,90,0.42);

  /* Violet — primary CTA */
  --vl:      #7B5CFA;
  --vl2:     #9B7CFF;
  --vl-dk:   #5A3FD0;
  --vl-glow: rgba(123,92,250,0.45);

  /* Semantic */
  --red:  #E85A7A;
  --pink: #E85AA0;

  /* Text */
  --tx:   #EEF0FF;
  --tx-d: rgba(238,240,255,0.62);
  --mu:   #4C4E72;
  --mu2:  #6E7099;

  /* Gradient shorthands */
  --g-main: linear-gradient(135deg, #9B5FFF 0%, #E85AA0 50%, #E8C55A 100%);
  --g-vl:   linear-gradient(135deg, #7B5CFA, #5A3FD0);

  /* Shadows */
  --sh-card:   0 4px 28px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.3);
  --sh-glow-v: 0 0 30px rgba(123,92,250,0.32), 0 0 64px rgba(123,92,250,0.12);
  --sh-btn-vl: 0 4px 20px rgba(123,92,250,0.45);
  --sh-btn-gd: 0 4px 16px rgba(232,197,90,0.35);

  /* Typography */
  --fh: 'Syne', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --ff: 'DM Sans', sans-serif;
  --base-font-size: 14px;
}

/* ════ SHARED KEYFRAMES ════ */
@keyframes iridescentShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes obsFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes obsSpin  { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes pb { 0%{transform:translate(0,0)} 25%{transform:translate(100vw,0)} 50%{transform:translate(100vw,100vh)} 75%{transform:translate(0,100vh)} 100%{transform:translate(0,0)} }
@keyframes pg { 0%{transform:translate(0,0)} 25%{transform:translate(0,100vh)} 50%{transform:translate(-100vw,100vh)} 75%{transform:translate(-100vw,0)} 100%{transform:translate(0,0)} }
@keyframes pv { 0%{transform:translate(0,0)} 20%{transform:translate(40vw,-55vh)} 40%{transform:translate(50vw,0)} 60%{transform:translate(10vw,-75vh)} 80%{transform:translate(-28vw,-38vh)} 100%{transform:translate(0,0)} }
@keyframes slideRightIn { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes bounceIn { 0%{transform:scale(0.3);opacity:0} 60%{transform:scale(1.1);opacity:1} 80%{transform:scale(0.96)} 100%{transform:scale(1)} }
@keyframes cardReveal { from{opacity:0;transform:translateY(30px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes timerPulse { 0%,100%{opacity:1;filter:drop-shadow(0 0 1px currentColor)} 50%{opacity:0.4;filter:drop-shadow(0 0 5px currentColor)} }

/* ════ RESET ════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--fb);
  font-size: var(--base-font-size);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ════ BACKGROUND MESH ════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 15% 20%, rgba(123,92,250,0.1) 0%, transparent 62%),
    radial-gradient(ellipse 70% 45% at 85% 75%, rgba(232,90,160,0.07) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(90,232,197,0.04) 0%, transparent 70%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(123,92,250,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,92,250,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 100%);
}

/* ════ DECORATIVE ORBS ════ */
.orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  contain: layout style paint;
}
.orb-b {
  width: 700px; height: 700px;
  top: -350px; left: -350px;
  background: radial-gradient(circle, rgba(100,72,255,0.38) 0%, rgba(123,92,250,0.15) 40%, transparent 70%);
  filter: blur(80px);
  animation: pb 34s linear infinite;
}
.orb-g {
  width: 600px; height: 600px;
  top: -300px; right: -300px;
  background: radial-gradient(circle, rgba(232,90,160,0.28) 0%, rgba(232,197,90,0.12) 50%, transparent 70%);
  filter: blur(88px);
  animation: pg 42s linear infinite;
}
.orb-v {
  width: 520px; height: 520px;
  bottom: -260px; left: calc(50% - 260px);
  background: radial-gradient(circle, rgba(90,232,197,0.18) 0%, rgba(123,92,250,0.12) 50%, transparent 70%);
  filter: blur(96px);
  animation: pv 52s linear infinite;
}

/* ════════════════════════════════════════════════
   AUTH SCREEN
   ════════════════════════════════════════════════ */
#authScreen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,6,15,0.7);
  backdrop-filter: blur(24px) saturate(140%);
  padding: 16px;
}
#authScreen.gone { display: none; }

.auth-box {
  background:
    linear-gradient(160deg, rgba(10,14,35,0.97), rgba(8,12,28,0.99)) padding-box,
    linear-gradient(135deg, rgba(123,92,250,0.55), rgba(232,90,160,0.15), rgba(232,197,90,0.32)) border-box;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 38px 30px 34px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8), 0 0 60px rgba(123,92,250,0.12);
}

.auth-logo {
  text-align: center;
  font-family: var(--fh);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  background: linear-gradient(90deg, #9B5FFF 0%, #E85AA0 40%, #E8C55A 80%, #9B5FFF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: iridescentShift 7s linear infinite;
  margin-bottom: 4px;
}
.auth-slug {
  text-align: center;
  font-size: 0.79rem;
  color: rgba(238,240,255,0.3);
  letter-spacing: 0.1em;
  margin-bottom: 28px;
}
.auth-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 22px;
}
.auth-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--mu2);
  font-family: var(--fh);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.auth-tab.on { color: var(--vl2); border-bottom-color: var(--vl); }

.auth-err {
  color: var(--red);
  font-size: 0.86rem;
  min-height: 18px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 500;
}

.af { margin-bottom: 14px; }
.af label {
  display: block;
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--mu2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.af input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--tx);
  font-family: var(--fb);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.af input:focus {
  border-color: rgba(123,92,250,0.5);
  background: rgba(123,92,250,0.05);
  box-shadow: 0 0 0 3px rgba(123,92,250,0.1);
}

.auth-rem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--mu2);
  margin-bottom: 20px;
  cursor: pointer;
}
.auth-rem input { width: 14px; height: 14px; cursor: pointer; accent-color: var(--vl); }

.auth-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--g-vl);
  color: #fff;
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease, opacity 0.15s ease;
  box-shadow: var(--sh-btn-vl);
}
.auth-btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(123,92,250,0.55); }
.auth-btn:active { transform: translateY(0) scale(0.97); }
.auth-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Reg step elements */
.reg-step-hint  { font-size:0.86rem; color:var(--mu2); text-align:center; margin-bottom:8px; line-height:1.5; }
.reg-step-email { font-size:0.93rem; font-weight:600; text-align:center; color:var(--ac2); margin-bottom:16px; word-break:break-all; }
.reg-link-btn   { display:block; width:100%; margin-top:10px; padding:8px; border:none; background:transparent; color:var(--mu2); font-size:0.86rem; cursor:pointer; font-family:var(--fb); transition:color 0.15s; }
.reg-link-btn:hover { color:var(--tx); }

/* ════════════════════════════════════════════════
   EMAIL VERIFY MODAL
   ════════════════════════════════════════════════ */
#verify-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px) saturate(120%);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#verify-modal.show, #verify-modal.open { display: flex; }

.vm-box {
  background:
    linear-gradient(160deg, rgba(10,14,35,0.98), rgba(8,12,28,1)) padding-box,
    linear-gradient(135deg, rgba(90,232,197,0.45), rgba(123,92,250,0.2)) border-box;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 40px 30px 34px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,0.85);
}
.vm-icon  { font-size:3.43rem; margin-bottom: 16px; }
.vm-title { font-family:var(--fh); font-size:1.43rem; font-weight:800; color:var(--ac2); margin-bottom:14px; letter-spacing:-0.01em; }
.vm-text  { font-size:0.93rem; color:rgba(238,240,255,0.55); line-height:1.75; margin-bottom:26px; }
.vm-email { display:inline-block; font-weight:600; color:var(--tx); background:rgba(90,232,197,0.1); border:1px solid rgba(90,232,197,0.25); border-radius:6px; padding:2px 10px; font-size:0.93rem; }

.vm-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ac2), #3AC8A8);
  color: #05060F;
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease;
  margin-bottom: 10px;
  box-shadow: 0 4px 16px rgba(90,232,197,0.3);
  position: relative;
  overflow: hidden;
}
.vm-btn:hover    { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(90,232,197,0.45); }
.vm-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.vm-resend { font-size:0.86rem; color:var(--mu2); cursor:pointer; transition:color 0.15s; text-decoration:underline; text-underline-offset:3px; }
.vm-resend:hover { color: var(--tx); }
.vm-err { color:var(--red); font-size:0.86rem; min-height:16px; margin-top:10px; }

/* ════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════ */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  height: 62px;
  border-bottom: 1px solid rgba(123,92,250,0.1);
  background: rgba(5,6,15,0.9);
  backdrop-filter: blur(20px) saturate(150%);
}

.logo-block {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

/* Inline SVG logo icon */
.logo-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(123,92,250,0.4));
  transition: filter 0.3s ease;
}
.logo-icon:hover { filter: drop-shadow(0 0 16px rgba(123,92,250,0.7)); }

.logo {
  font-family: var(--fh);
  font-size: 1.43rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: linear-gradient(90deg, #9B5FFF 0%, #E85AA0 35%, #E8C55A 70%, #9B5FFF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: iridescentShift 7s linear infinite;
  line-height: 1;
}
.slogan {
  font-size: 0.71rem;
  color: rgba(238,240,255,0.22);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.wallet-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: none;
  border-radius: 10px;
  background: rgba(232,197,90,0.06);
  font-size: 0.93rem;
  transition: background 0.2s ease;
  cursor: default;
}
.wallet-badge:hover { background: rgba(232,197,90,0.1); }
.wallet-badge .spk   { font-weight:700; color:var(--ac); font-family:var(--fh); }
.wallet-badge .wlabel{ color:var(--mu2); font-size:0.71rem; }

.user-block {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.93rem;
}
.uavatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vl), var(--ac));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.93rem; font-weight: 700; color: #fff; flex-shrink: 0;
  box-shadow: 0 0 14px rgba(123,92,250,0.38);
}
.uname  { font-weight: 600; }
.ubadge { font-size:0.71rem; color:var(--ac2); border:1px solid rgba(90,232,197,0.3); border-radius:4px; padding:1px 6px; text-transform:uppercase; letter-spacing:0.05em; }

.btn-prof {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--mu2);
  font-family: var(--fb);
  font-size: 0.93rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-prof:hover, .btn-prof.active {
  border-color: rgba(123,92,250,0.4);
  color: var(--vl2);
  background: rgba(123,92,250,0.08);
}

.btn-post {
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  background: var(--g-vl);
  color: #fff;
  font-family: var(--fh);
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease;
  box-shadow: var(--sh-btn-vl);
  white-space: nowrap;
}
.btn-post:hover  { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(123,92,250,0.55); }
.btn-post:active { transform: translateY(0) scale(0.97); }

/* Desktop profile side-panel overlay */
.dp-overlay {
  display: none;
  position: fixed;
  inset: 62px 0 0 0;
  z-index: 450;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(4px);
  justify-content: flex-end;
}
.dp-overlay.open { display: flex; }

.dp-panel {
  width: 300px;
  height: 100%;
  background: linear-gradient(180deg, var(--sf) 0%, var(--sf2) 100%);
  border-left: 1px solid rgba(255,255,255,0.07);
  overflow-y: auto;
  padding: 24px 18px;
  animation: slideRightIn 0.22s var(--ease-enter) both;
  will-change: transform;
}

/* ════════════════════════════════════════════════
   MAIN LAYOUT
   ════════════════════════════════════════════════ */
.layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 72px 1fr 258px; /* 72px nav, no left gap */
  height: calc(100vh - 62px);
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.sidebar {
  padding: 22px 18px;
  border-right: 1px solid rgba(255,255,255,0.05);
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar:last-child { border-right: none; border-left: 1px solid rgba(255,255,255,0.05); }
.sidebar::-webkit-scrollbar { display: none; }

/* ════════════════════════════════════════════════
   SIDE NAVIGATION COLUMN
   ════════════════════════════════════════════════ */
.sidebar-nav {
  width: 72px;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--sf2);
  border-right: 1px solid rgba(255,255,255,0.05);
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-tabs-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  flex: 1;
}

.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 10px 4px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--mu);
  font-family: var(--fb);
  font-size: 0.79rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-tab:hover {
  background: rgba(255,255,255,0.03);
  color: var(--mu2);
}

.nav-tab.active {
  background: rgba(123,92,250,0.12);
  color: var(--vl2);
}

.nav-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
}

.nav-label {
  display: block;
  white-space: nowrap;
  font-size: 0.71rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vl), var(--pink));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fb);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-top: auto;
  flex-shrink: 0;
}

/* Page panels for desktop navigation */
.page-panel {
  display: none;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 24px;
}
.page-panel.active {
  display: block;
}
.page-panel .stitle {
  font-family: var(--fh);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 16px;
}

/* Expand Leaders, Chats, Profile panels to full width when right sidebar is hidden */
#page-leaders, #page-chats, #page-profile {
  max-width: 100%;
  padding-right: 24px;
}

/* Leaders page styles */
.leaders-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}

.filter-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--mu);
  font-family: var(--fb);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--mu2);
}

.filter-btn.active {
  background: rgba(123,92,250,0.15);
  color: var(--vl2);
}

.leaders-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.leader-cat-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 16px;
}

.cat-title {
  font-family: var(--fh);
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 12px;
}

.cat-content {
  min-height: 60px;
}

.progress-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
}

.progress-title {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 16px;
}

.progress-chart-placeholder {
  height: 120px;
  background: rgba(123,92,250,0.05);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(123,92,250,0.2);
}

.progress-placeholder-text {
  font-family: var(--fb);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--mu2);
  margin-bottom: 4px;
}

.progress-placeholder-sub {
  font-size: 0.79rem;
  color: var(--mu);
}

.rising-stars-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
}

.rising-title {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 16px;
}

.rising-list {
  min-height: 60px;
}

.stitle {
  font-family: var(--fh);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 14px;
}

/* ════════════════════════════════════════════════
   TRENDS & LEADERBOARD SIDEBAR
   ════════════════════════════════════════════════ */
.trend-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
  margin-bottom: 3px;
}
.trend-item:hover { background: rgba(123,92,250,0.08); transform: translateX(3px); }
.t-rank { font-family:var(--fh); font-size:11px; color:var(--mu); width:14px; flex-shrink:0; }
.t-tag  { font-size:13px; font-weight:500; flex:1; line-height:1.4; }
.t-cnt  { font-size:0.79rem; color:var(--mu2); }
.t-hot  { font-size:0.71rem; color:var(--ac); background:rgba(232,197,90,0.1); border-radius:4px; padding:1px 5px; }

.li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 7px;
  border-radius: 10px;
  transition: background 0.18s ease, transform 0.18s ease;
  cursor: pointer;
  margin-bottom: 3px;
}
.li:hover { background: rgba(123,92,250,0.08); transform: translateX(3px); }
.li-self { background: rgba(123,92,250,0.07); border: 1px solid rgba(123,92,250,0.22); cursor: default; }
.li-self:hover { background: rgba(123,92,250,0.12); transform: none; }
.lrank { font-family:var(--fh); font-size:0.93rem; font-weight:800; width:19px; text-align:center; flex-shrink:0; }
.lrank.gold   { color:#FFD700; text-shadow:0 0 8px rgba(255,215,0,0.5); }
.lrank.silver { color:#C0C0C0; text-shadow:0 0 8px rgba(192,192,192,0.4); }
.lrank.bronze { color:#CD7F32; text-shadow:0 0 8px rgba(205,127,50,0.4); }
.lav    { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.93rem; font-weight:700; flex-shrink:0; }
.linf   { flex:1; min-width:0; }
.lname  { font-size:0.93rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; }
.lsub   { font-size:0.79rem; color:var(--mu2); line-height:1.4; }
.lprofit{ font-family:var(--fh); font-size:1rem; font-weight:700; color:var(--ac2); flex-shrink:0; }

.divider { height:1px; background:rgba(255,255,255,0.05); margin:14px 0; }

/* Stats row */
.srow { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sbox {
  background:
    linear-gradient(160deg, rgba(10,14,35,0.8), rgba(8,12,28,0.9)) padding-box,
    linear-gradient(135deg, rgba(123,92,250,0.25), rgba(232,197,90,0.15)) border-box;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px;
}
.sval { font-family:var(--fh); font-size:18px; font-weight:800; color:var(--ac); display:block; line-height:1.2; }
.skey { font-size:10px; color:var(--mu2); text-transform:uppercase; letter-spacing:0.08em; line-height:1.4; }

/* ════════════════════════════════════════════════
   MARKET OBSERVATORY
   ════════════════════════════════════════════════ */
.obs-coming-soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,6,15,0.82);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  z-index: 10;
  border: 1px solid rgba(123,92,250,0.15);
}
.obs-stub-inner { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:14px 20px; }
.obs-stub-icon  { font-size:2.29rem; line-height:1; animation: obsFloat 3s ease-in-out infinite; }
.obs-stub-title { font-size:1rem; font-weight:600; color:var(--tx); letter-spacing:0.02em; }
.obs-stub-sub   { font-size:0.71rem; color:var(--ac2); letter-spacing:0.1em; text-transform:uppercase; background:rgba(90,232,197,0.1); border:1px solid rgba(90,232,197,0.2); border-radius:20px; padding:2px 10px; }

.obs-shell {
  position: relative;
  height: 260px;
  border-radius: 14px;
  border: 1px solid rgba(123,92,250,0.12);
  background: radial-gradient(circle at center, rgba(123,92,250,0.08) 0%, rgba(8,12,28,0.9) 50%, rgba(5,6,15,0.95) 100%);
  overflow: hidden;
  margin-top: 4px;
}
.obs-dimmer {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.82); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden;
  transition:opacity 0.35s ease, visibility 0.35s ease;
  z-index:2;
}
.obs-shell.has-focus .obs-dimmer { opacity:1; visibility:visible; }
.obs-core {
  position:absolute; top:50%; left:50%;
  width:56px; height:56px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(123,92,250,0.5) 0%, rgba(60,20,160,0.6) 45%, transparent 75%);
  box-shadow:0 0 40px rgba(123,92,250,0.4);
  pointer-events:none; z-index:1;
}
.obs-system {
  position:absolute; width:170px; height:170px;
  border:none; background:transparent;
  cursor:pointer; z-index:3;
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
}
.obs-system:focus-visible { outline:1px solid rgba(123,92,250,0.5); border-radius:50%; }
.obs-system.pos-tech   { left:-10px; top:-6px; }
.obs-system.pos-eco    { right:-12px; top:42px; }
.obs-system.pos-social { left:24px; bottom:-20px; }
.obs-shell.has-focus .obs-system:not(.focused) { opacity:0.36; }
.obs-system.focused { left:50%; top:50%; bottom:auto; right:auto; transform:translate(-50%,-50%) scale(1.15); z-index:4; opacity:1 !important; }
.obs-sun { position:absolute; top:50%; left:50%; width:22px; height:22px; transform:translate(-50%,-50%); border-radius:50%; background:linear-gradient(135deg,#E8C55A,#C8A030); box-shadow:0 0 22px rgba(232,197,90,0.5); }
.obs-system-label { position:absolute; bottom:10px; left:0; right:0; text-align:center; font-size:0.64rem; color:var(--ac); letter-spacing:0.16em; text-transform:uppercase; opacity:0.65; }
.obs-system.focused .obs-system-label { opacity:0.15; }
.obs-orbit { position:absolute; top:50%; left:50%; border:1px solid rgba(255,255,255,0.07); border-radius:50%; transform:translate(-50%,-50%); animation:obsSpin var(--obs-dur,22s) linear infinite; }
.obs-orbit.orbit-1 { width:56px; height:56px; --obs-dur:14s; }
.obs-orbit.orbit-2 { width:94px; height:94px; --obs-dur:21s; animation-direction:reverse; }
.obs-orbit.orbit-3 { width:132px; height:132px; --obs-dur:29s; }
.obs-planet { position:absolute; width:8px; height:8px; top:50%; left:50%; border-radius:50%; }
.obs-planet .obs-info { position:absolute; top:-8px; left:12px; background:rgba(5,6,15,0.97); border:1px solid rgba(123,92,250,0.3); border-radius:6px; padding:4px 7px; white-space:nowrap; opacity:0; transform:translateX(8px); transition:opacity 0.25s ease, transform 0.25s ease; }
.obs-system.focused .obs-info { opacity:1; transform:translateX(0); }
.obs-n { display:block; font-size:0.57rem; color:var(--mu2); line-height:1.1; text-transform:uppercase; }
.obs-v { display:block; font-size:0.71rem; color:var(--ac); font-weight:700; line-height:1.2; }
.obs-orbit.orbit-1 .p-45  { transform:rotate(45deg)  translate(28px) rotate(-45deg); }
.obs-orbit.orbit-1 .p-90  { transform:rotate(90deg)  translate(28px) rotate(-90deg); }
.obs-orbit.orbit-1 .p-220 { transform:rotate(220deg) translate(28px) rotate(-220deg); }
.obs-orbit.orbit-2 .p-180 { transform:rotate(180deg) translate(47px) rotate(-180deg); }
.obs-orbit.orbit-2 .p-45  { transform:rotate(45deg)  translate(47px) rotate(-45deg); }
.obs-orbit.orbit-2 .p-270 { transform:rotate(270deg) translate(47px) rotate(-270deg); }
.obs-orbit.orbit-3 .p-300 { transform:rotate(300deg) translate(66px) rotate(-300deg); }
.obs-orbit.orbit-3 .p-10  { transform:rotate(10deg)  translate(66px) rotate(-10deg); }
.obs-planet.mint  { background:var(--ac2); box-shadow:0 0 6px rgba(90,232,197,0.5); }
.obs-planet.azure { background:var(--vl2); box-shadow:0 0 6px rgba(123,92,250,0.5); }

/* ════════════════════════════════════════════════
   FEED AREA
   ════════════════════════════════════════════════ */
.feed {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(123,92,250,0.2) transparent;
}
.feed::-webkit-scrollbar { width: 4px; }
.feed::-webkit-scrollbar-thumb { background: rgba(123,92,250,0.25); border-radius: 4px; }

.fbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(5,6,15,0.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 13px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  contain: layout paint;
}

/* Search */
.srch { position: relative; }
.srch svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--mu); pointer-events:none; }
.srch-in {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 9px 12px 9px 34px;
  color: var(--tx);
  font-family: var(--fb);
  font-size: 0.93rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  line-height: 1.4;
}
.srch-in::placeholder { color: var(--mu); }
.srch-in:focus {
  border-color: rgba(123,92,250,0.4);
  background: rgba(123,92,250,0.05);
  box-shadow: 0 0 0 3px rgba(123,92,250,0.08);
}

.frow, .trow {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}
.flabel { font-size:10px; color:var(--mu); text-transform:uppercase; letter-spacing:0.12em; margin-right:3px; flex-shrink:0; }

.fbtn {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  background: transparent;
  color: var(--mu2);
  font-family: var(--fb);
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.fbtn:hover { border-color:rgba(123,92,250,0.3); color:var(--tx); background:rgba(123,92,250,0.06); }
.fbtn.active { border-color:var(--vl); background:rgba(123,92,250,0.14); color:var(--vl2); text-shadow: 0 0 .5px var(--vl2); }

.tchip {
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.07);
  background: transparent;
  color: var(--mu2);
  font-size: 0.79rem;
  cursor: pointer;
  transition: all 0.18s ease;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.tchip:hover  { border-color:rgba(90,232,197,0.3); color:var(--tx); }
.tchip.active { border-color:var(--ac2); background:rgba(90,232,197,0.1); color:var(--ac2); text-shadow: 0 0 .5px var(--ac2); }

/* Cards container */
.cards { padding:18px 22px; display:flex; flex-direction:column; gap:14px; flex:1; }

/* Pagination */
.pgn { padding:14px 22px 24px; display:flex; justify-content:center; align-items:center; gap:5px; }
.pbtn {
  min-width:32px; height:32px; padding:0 7px;
  border-radius:8px; border:1px solid rgba(255,255,255,0.07);
  background:transparent; color:var(--mu2);
  font-family:var(--fh); font-size:12px; font-weight:600;
  cursor:pointer; transition:all 0.18s ease;
  display:flex; align-items:center; justify-content:center;
}
.pbtn:hover:not(:disabled) { border-color:rgba(123,92,250,0.35); color:var(--vl2); background:rgba(123,92,250,0.08); }
.pbtn.active   { border-color:var(--vl); background:rgba(123,92,250,0.18); color:var(--vl2); }
.pbtn:disabled { opacity:0.25; cursor:default; }
.psep { color:var(--mu); font-size:12px; padding:0 2px; }

/* ════════════════════════════════════════════════
   IDEA CARDS  ← gradient border trick
   ════════════════════════════════════════════════ */
.card {
  background:
    linear-gradient(160deg, rgba(10,14,36,0.93), rgba(8,12,28,0.96)) padding-box,
    linear-gradient(135deg, rgba(123,92,250,0.3), rgba(232,90,160,0.07), rgba(232,197,90,0.22)) border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 19px;
  position: relative;
  contain: layout style;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s ease;
  animation: cardReveal 0.44s var(--ease-enter) both;
}
.card:hover {
  transform: translateY(-3px) translateZ(0);
  box-shadow: 0 14px 42px rgba(0,0,0,0.62), 0 0 26px rgba(123,92,250,0.14);
  background:
    linear-gradient(160deg, rgba(10,14,36,0.93), rgba(8,12,28,0.96)) padding-box,
    linear-gradient(135deg, rgba(123,92,250,0.52), rgba(232,90,160,0.14), rgba(232,197,90,0.38)) border-box;
}
.card.fire {
  background:
    linear-gradient(160deg, rgba(14,8,8,0.96), rgba(22,8,10,0.98)) padding-box,
    linear-gradient(135deg, rgba(232,80,20,0.7), rgba(232,50,50,0.35)) border-box !important;
  box-shadow: 0 0 30px rgba(232,80,20,0.22) !important;
}

/* Staggered entrance delays */
.card:nth-child(1){animation-delay:0.04s}
.card:nth-child(2){animation-delay:0.10s}
.card:nth-child(3){animation-delay:0.16s}
.card:nth-child(4){animation-delay:0.22s}
.card:nth-child(5){animation-delay:0.28s}
.card:nth-child(6){animation-delay:0.34s}

/* Card header */
.ch { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.cav { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.93rem; font-weight:700; flex-shrink:0; box-shadow:0 0 10px rgba(123,92,250,0.2); }
.cm  { flex:1; }
.cu  { font-size:0.93rem; font-weight:600; line-height:1.4; }
.ct  { font-size:0.79rem; color:var(--mu2); line-height:1.4; }
.cmen{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:7px; color:var(--mu); cursor:pointer; transition:background 0.15s, color 0.15s; }
.cmen:hover { background:rgba(255,255,255,0.07); color:var(--tx); }
.cmen.cmen--reported { color: var(--red) !important; opacity: 0.8; }
.cmen.cmen--reported:hover { background: rgba(232,90,122,0.1) !important; color: var(--red) !important; }

.ctitle { font-family:var(--fh); font-size:1.21rem; font-weight:700; line-height:1.3; margin-bottom:7px; letter-spacing:-0.01em; word-wrap:break-word; overflow-wrap:break-word; word-break:break-word; }
.cbody  { font-size:0.93rem; color:rgba(155,160,195,0.85); line-height:1.7; margin-bottom:15px; }

/* Action buttons row */
.cact { display:flex; gap:8px; }

/* INVEST — violet primary */
.binv {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  border: none;
  background: var(--g-vl);
  color: #fff;
  font-family: var(--fh);
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
  line-height: 1;
  box-shadow: 0 3px 14px rgba(123,92,250,0.35);
  position: relative;
  overflow: hidden;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease;
}
.binv:hover  { transform:translateY(-2px); box-shadow:0 6px 24px rgba(123,92,250,0.52); }
.binv:active { transform:translateY(0) scale(0.97); }

/* CONTACT AUTHOR button */
.bcontact {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid rgba(232,197,90,0.35);
  background: rgba(232,197,90,0.07);
  color: var(--ac);
  font-family: var(--fh);
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
  line-height: 1;
  position: relative;
  overflow: hidden;
  transition: background 0.18s ease, transform 0.22s var(--ease-spring), box-shadow 0.18s ease;
}
.bcontact:hover { background:rgba(232,197,90,0.15); transform:translateY(-1px); box-shadow:0 4px 16px rgba(232,197,90,0.2); }
.bcontact:active { transform:translateY(0) scale(0.97); }
.bcontact--open { border-color:rgba(90,232,160,0.35); background:rgba(90,232,160,0.07); color:var(--se); }
.bcontact--open:hover { background:rgba(90,232,160,0.15); box-shadow:0 4px 16px rgba(90,232,160,0.2); }

/* REPORT button */
.brep {
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(232,160,40,0.3);
  background: transparent;
  color: rgba(232,160,40,0.75);
  font-size: 0.93rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease, transform 0.22s var(--ease-spring);
}
.brep:hover  { background:rgba(232,160,40,0.1); transform:translateY(-1px); }
.brep:active { transform:translateY(0) scale(0.97); }
.brep:disabled, .brep--immune { opacity:0.35; cursor:not-allowed; transform:none !important; }
.brep--done  { color:rgba(90,200,90,0.7); border-color:rgba(90,200,90,0.3); cursor:default; }

/* Card 3-dot dropdown */
.cmen-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  background: rgba(16, 18, 38, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(155, 95, 255, 0.22);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(155,95,255,0.08);
  z-index: 200;
  overflow: hidden;
  animation: ddFadeIn 0.15s ease;
}
@keyframes ddFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cmen-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  color: var(--tx);
  font-size: 0.93rem;
  font-family: var(--ff);
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease;
}
.cmen-dropdown-item:hover { background: rgba(155, 95, 255, 0.12); }
.cmen-dropdown-item:active { background: rgba(155, 95, 255, 0.2); }
.cmen-dropdown-item--disabled { color: var(--mu); cursor: not-allowed; opacity: 0.6; }
.cmen-dropdown-item--disabled:hover { background: none; }

/* Share button on card */
.bshare {
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(155, 95, 255, 0.25);
  background: transparent;
  color: var(--mu);
  font-size: 0.93rem;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.22s var(--ease-spring);
}
.bshare:hover  { background: rgba(155, 95, 255, 0.12); color: var(--pr); transform: translateY(-1px); }
.bshare:active { transform: translateY(0) scale(0.97); }

/* Bookmark button on card */
.bsave {
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(155, 95, 255, 0.25);
  background: transparent;
  color: var(--mu);
  font-size: 0.93rem;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.22s var(--ease-spring);
}
.bsave:hover  { background: rgba(155, 95, 255, 0.12); color: var(--pr); transform: translateY(-1px); }
.bsave:active { transform: translateY(0) scale(0.97); }
.bsave.active {
  background: rgba(232, 197, 90, 0.15);
  border-color: rgba(232, 197, 90, 0.4);
  color: #e8c55a;
}

/* Share modal */
.share-modal-title {
  font-family: var(--fh);
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--tx);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.share-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(12,14,32,0.98) 0%, rgba(20,16,48,0.98) 100%);
  border: 1px solid rgba(155, 95, 255, 0.3);
}
.share-card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(155,95,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.share-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  position: relative;
  z-index: 1;
}
.share-card-logo {
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pr);
  position: absolute;
  top: 10px;
  right: 14px;
  opacity: 0.7;
}
.share-card-content { flex: 1; min-width: 0; }
.share-card-title {
  font-family: var(--fh);
  font-size: 1.07rem;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.3;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-card-body {
  font-size: 0.86rem;
  color: rgba(155,160,195,0.8);
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.share-card-author {
  font-size: 0.79rem;
  color: var(--pr);
  opacity: 0.85;
}
.share-card-qr {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  background: #080c1c;
}
.share-card-qr img { display: block; width: 100%; height: 100%; }

.share-url-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.share-url-input {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--mu);
  font-size: 0.86rem;
  font-family: var(--ff);
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-copy-btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  background: var(--pr);
  color: #fff;
  font-size: 0.93rem;
  font-weight: 600;
  font-family: var(--ff);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.share-copy-btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.share-copy-btn:active { opacity: 1; transform: scale(0.97); }

/* Report confirm modal */
.rcm-text {
  font-size: 0.93rem;
  color: rgba(155,160,195,0.85);
  line-height: 1.65;
  margin-bottom: 22px;
}
.rcm-actions { display:flex; gap:10px; }
.rcm-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.rcm-btn:active { transform: scale(0.97); }
.rcm-btn--cancel  { background:rgba(255,255,255,0.07); color:var(--tx); }
.rcm-btn--cancel:hover  { background:rgba(255,255,255,0.11); }
.rcm-btn--confirm { background:rgba(232,90,122,0.15); border:1px solid rgba(232,90,122,0.38); color:rgba(232,90,122,0.95); }
.rcm-btn--confirm:hover { background:rgba(232,90,122,0.24); }

/* ════════════════════════════════════════════════
   INVESTMENT GRAPH
   ════════════════════════════════════════════════ */
.igraph-wrap {
  background: rgba(5,6,15,0.7);
  border-radius: 10px;
  padding: 10px 13px 7px;
  margin-bottom: 13px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  contain: layout style;
}
.igraph-header { display:flex; justify-content:space-between; font-size:10px; color:var(--mu2); margin-bottom:6px; line-height:1.4; }
.igraph-label-right { color:var(--ac); font-weight:600; }
svg.igsvg { width:100%; height:68px; display:block; overflow:visible; }
.ig-fill { opacity:1; }
.ig-line {
  fill:none; stroke:var(--graph-line, var(--ac)); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 3px 8px rgba(var(--ac-rgb),0.55)) drop-shadow(0 1px 3px rgba(var(--ac-rgb),0.35));
}
.ig-line.animated { animation:ig-draw var(--ig-dur,1.6s) cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes ig-draw { from{stroke-dashoffset:var(--ig-len,1000)} to{stroke-dashoffset:0} }
.ig-dot {
  fill:var(--ac);
  filter:drop-shadow(0 0 5px rgba(var(--ac-rgb),0.8));
  opacity:0;
  transform:scale(0);
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ig-dot.show { opacity:1; transform:scale(1); }
.igraph-footer { display:flex; justify-content:space-between; align-items:center; margin-top:5px; font-size:11px; color:var(--mu2); line-height:1.4; }
.ig-investors { display:flex; align-items:center; gap:4px; }
.ig-investors span { color:var(--tx); font-weight:500; }
.ig-pool { color:var(--ac); font-weight:600; }
.ig-cd   { font-family:var(--fh); font-size:12px; color:var(--ac2); letter-spacing:0.04em; }

/* ════════════════════════════════════════════════
   REACTION BUBBLES
   ════════════════════════════════════════════════ */
.creact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.rbbl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.04);
  font-size: 0.93rem;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  touch-action: manipulation;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.32s var(--ease-spring);
  position: relative;
  overflow: hidden;
}
.rbbl:hover { background:rgba(255,255,255,0.08); }
.rbbl.on    { background:rgba(123,92,250,0.15); border-color:rgba(123,92,250,0.5); }
.rbbl .rem  { display:inline-block; transition:transform 0.2s var(--ease-spring); }
.rbbl.pop .rem { transform: scale(1.55); }
.rbbl .rct  { font-size:12px; color:var(--mu2); font-family:var(--fh); font-weight:600; min-width:14px; text-align:center; }
.rbbl.on .rct{ color:var(--vl2); }

.c-chat { display:inline-flex; align-items:center; margin-left:6px; color:var(--mu); cursor:pointer; padding:3px; border-radius:5px; transition:color 0.15s, background 0.15s; }
.c-chat:hover { color:var(--vl2); background:rgba(123,92,250,0.12); }

/* ════════════════════════════════════════════════
   PROFILE PANEL
   ════════════════════════════════════════════════ */
.phero { display:flex; flex-direction:column; align-items:center; padding:22px 0 18px; }
.pav-lg {
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg,var(--vl),var(--ac));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fh); font-size:2rem; font-weight:800; color:#fff;
  margin-bottom:12px;
  box-shadow:0 0 28px rgba(123,92,250,0.42);
}
.pname  { font-family:var(--fh); font-size:1.21rem; font-weight:700; margin-bottom:4px; line-height:1.3; overflow-wrap:anywhere; word-break:break-word; max-width:260px; }
.pbadge { font-size:0.71rem; color:var(--ac2); border:1px solid rgba(90,232,197,0.3); border-radius:4px; padding:2px 7px; text-transform:uppercase; letter-spacing:0.05em; }

.wcrd {
  display:flex; align-items:center; justify-content:space-between;
  background:
    linear-gradient(160deg,rgba(10,14,35,0.8),rgba(8,12,28,0.9)) padding-box,
    linear-gradient(135deg,rgba(232,197,90,0.3),rgba(123,92,250,0.15)) border-box;
  border:1px solid transparent;
  border-radius:14px; padding:16px; margin-bottom:12px;
}
.wamt { font-family:var(--fh); font-size:1.57rem; font-weight:800; color:var(--ac); line-height:1.2; }
.wamt small { font-size:0.93rem; }
.wsub { font-size:0.79rem; color:var(--mu2); margin-top:2px; line-height:1.4; }

/* Daily Streak */
.streak-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-top: 8px;
  background: rgba(123,92,250,0.05);
  border: 1px solid rgba(123,92,250,0.15);
  border-radius: 10px;
}
.streak-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--vl2);
}
.streak-days {
  display: flex;
  gap: 6px;
}
.streak-day {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  color: var(--mu);
  transition: all 0.2s ease;
}
.streak-day.active {
  background: rgba(232,197,90,0.2);
  color: #e8c55a;
  box-shadow: 0 0 8px rgba(232,197,90,0.3);
}

.sset { display:flex; align-items:center; gap:8px; padding:11px 7px; border-radius:8px; cursor:pointer; transition:background 0.15s; }
.sset:hover { background:rgba(255,255,255,0.04); }
.sset span  { font-size:13px; line-height:1.4; }
.sset svg:first-child { flex-shrink: 0; }
.sset > span:not(.sset-status) { flex: 0 0 auto; }
.sset-status {
  font-size: 0.79rem;
  color: var(--ac);
  font-weight: 500;
  margin-left: auto;
  margin-right: 4px;
}
.sset > svg:last-child { flex-shrink: 0; margin-left: auto; }

.lang-row { position:relative; display:flex; align-items:center; gap:8px; padding:11px 7px; border-radius:8px; cursor:pointer; transition:background 0.15s; user-select:none; }
.lang-row:hover { background:rgba(255,255,255,0.04); }
.lang-row svg:first-child { flex-shrink: 0; }
.lang-row > span:not(.lang-cur) { flex: 0 0 auto; }
.lang-cur { font-size:13px; font-weight:600; color:var(--ac); line-height:1; margin-left: auto; }

/* ════════════════════════════════════════════════
   DESKTOP SIDE NAV
   ════════════════════════════════════════════════ */
.desk-nav {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  bottom: 24px;
  width: 72px;
  z-index: 500;
  background: rgba(10, 11, 20, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(123,92,250,0.15);
  border-radius: 24px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.05);
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 8px;
}
.desk-nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 16px;
  background: transparent;
  color: var(--mu);
  font-family: var(--fb);
  font-size: 0.79rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.desk-nav-tab.active {
  color: var(--vl2);
  background: color-mix(in srgb, var(--vl2) 15%, transparent);
}
.d-ic { width: 24px; height: 24px; flex-shrink: 0; display: block; }
.desk-nav-tab svg { transition: transform 0.3s cubic-bezier(0.34, 1.15, 0.64, 1); }
.desk-nav-tab.active svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vl2) 60%, transparent)); transform: scale(1.1); }
.desk-nav-label {
  display: block;
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-size: 0.71rem;
  transform: translateY(4px);
}
.desk-nav-tab.active .desk-nav-label {
  max-width: 60px;
  opacity: 1;
  transform: translateY(0);
}

/* Chats tab special */
.desk-nav-tab.tab-chats { color: var(--ac); }
.desk-nav-tab.tab-chats.active {
  color: var(--ac);
  background: color-mix(in srgb, var(--ac) 15%, transparent);
}
.desk-nav-tab.tab-chats.active svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ac) 60%, transparent)); transform: scale(1.1); }

/* ════════════════════════════════════════════════
   MOBILE NAV BAR
   ════════════════════════════════════════════════ */
.mob-bar {
  display: none;
  position: fixed;
  bottom: 24px; left: 16px; right: 16px;
  z-index: 500;
  height: 60px;
  background: rgba(10, 11, 20, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(123,92,250,0.15);
  border-radius: 30px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.05);
  align-items: stretch;
  padding: 6px;
  gap: 4px;
}
.mob-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  border: none;
  border-radius: 24px;
  background: transparent;
  color: var(--mu);
  font-family: var(--fb);
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.mob-tab.active {
  color: var(--vl2);
  background: color-mix(in srgb, var(--vl2) 15%, transparent);
  flex: 2.2; /* expand */
}
.m-ic { width: 22px; height: 22px; flex-shrink: 0; display: block; }
.mob-tab svg { transition: transform 0.4s cubic-bezier(0.34, 1.15, 0.64, 1); }
.mob-tab.active svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vl2) 60%, transparent)); transform: scale(1.1); }
.mob-tab span:not(.mob-tab-pill):not(.unread-dot) {
  display: block;
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateX(-8px);
  font-size: 13.5px;
  margin-left: 6px;
}
.mob-tab.active span:not(.mob-tab-pill):not(.unread-dot) {
  max-width: 80px;
  opacity: 1;
  transform: translateX(0);
}

/* Chats tab special */
.mob-tab.tab-chats { color: var(--ac); flex: 0.8; }
.mob-tab.tab-chats.active {
  color: var(--ac);
  background: color-mix(in srgb, var(--ac) 15%, transparent);
  flex: 2.2;
}
.mob-tab.tab-chats.active svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ac) 60%, transparent)); transform: scale(1.1); }

.unread-dot { position:absolute; top:8px; right:calc(50% - 14px); width:7px; height:7px; border-radius:50%; background:var(--red); border:1.5px solid var(--bg); display:none; }
.unread-dot.show { display:block; }

/* Desktop page panels */
.page-panel {
  display: none;
  width: 100%;
  height: 100%;
}
.page-panel.active {
  display: block;
}
.full-page-content {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.page-title {
  font-family: var(--fh);
  font-size: 2.29rem;
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  color: var(--tx);
}

/* Mobile panels */
.mpanel {
  display: none;
  position: fixed;
  inset: 62px 0 85px 0; /* Adjusted bottom inset for new taskbar */
  z-index: 400;
  background: var(--bg);
  overflow-y: auto;
  padding: 18px 15px;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s var(--ease-enter), opacity 0.3s ease, visibility 0.3s ease;
}
.mpanel.right { transform: translateX(100%); }
.mpanel.open  { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; }
.mpanel.up    { transform: translateY(100%); }
.mpanel.up.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }

/* ════════════════════════════════════════════════
   CHAT HUB
   ════════════════════════════════════════════════ */
.chat-hub { display:flex; flex-direction:column; height:100%; padding:0; }
.chat-tabs { display:flex; border-bottom:1px solid rgba(255,255,255,0.06); padding:0 16px; flex-shrink:0; background:rgba(5,6,15,0.7); backdrop-filter:blur(8px); position:sticky; top:0; z-index:2; }
.chat-tab-btn { flex:1; padding:13px 8px; border:none; background:transparent; color:var(--mu2); font-family:var(--fh); font-size:0.79rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; transition:color 0.2s; border-bottom:2px solid transparent; margin-bottom:-1px; }
.chat-tab-btn.active { color:var(--ac); border-bottom-color:var(--ac); }
.chat-section { display:none; flex-direction:column; gap:1px; padding:8px 0; }
.chat-section.active { display:flex; }
.chat-row { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; transition:background 0.15s; border-radius:10px; }
.chat-row:hover { background:rgba(123,92,250,0.07); }
.chat-av { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; flex-shrink:0; position:relative; }
.chat-av::after { content:''; position:absolute; bottom:1px; right:1px; width:9px; height:9px; border-radius:50%; background:var(--ac2); border:2px solid var(--bg); }
.chat-av.offline::after { background:var(--mu); }
.chat-info { flex:1; min-width:0; }
.chat-name    { font-size:0.93rem; font-weight:600; line-height:1.3; }
.chat-preview { font-size:0.79rem; color:var(--mu2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; margin-top:1px; }
.chat-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.chat-time   { font-size:0.71rem; color:var(--mu); }
.chat-unread { min-width:18px; height:18px; border-radius:9px; background:var(--vl); color:#fff; font-size:0.71rem; font-weight:700; font-family:var(--fh); display:flex; align-items:center; justify-content:center; padding:0 5px; }
.chat-topic-tag { font-size:0.71rem; color:var(--ac2); background:rgba(90,232,197,0.1); border-radius:4px; padding:1px 6px; font-family:var(--fh); font-weight:600; letter-spacing:0.04em; display:inline-block; margin-top:2px; }

/* ════════════════════════════════════════════════
   MODALS (bottom sheets on mobile, centred on desktop)
   ════════════════════════════════════════════════ */
.mo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  padding: 0;
}
.mo.open { opacity:1; pointer-events:auto; }
@media (min-width:520px) { .mo { align-items:center; padding:16px; } }

.mo-box {
  background:
    linear-gradient(160deg, var(--sf), var(--sf2)) padding-box,
    linear-gradient(135deg, rgba(123,92,250,0.32), rgba(232,90,160,0.09), rgba(232,197,90,0.22)) border-box;
  border: 1px solid transparent;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 26px 22px 40px;
  transform: translateY(40px);
  transition: transform 0.28s var(--ease-enter);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 -8px 44px rgba(0,0,0,0.62);
}
@media (min-width:520px) { .mo-box { border-radius:24px; transform:scale(0.95); } }
.mo.open .mo-box { transform: translateY(0); }
@media (min-width:520px) { .mo.open .mo-box { transform:scale(1); } }

.mo-handle { width:38px; height:4px; border-radius:2px; background:rgba(255,255,255,0.15); margin:0 auto 20px; }
.mo-title  { font-family:var(--fh); font-size:1.29rem; font-weight:800; margin-bottom:18px; letter-spacing:-0.01em; }

.mf { margin-bottom:14px; }
.mf label { display:block; font-size:10px; font-weight:700; color:var(--mu2); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:5px; }
.mf input, .mf textarea {
  width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; padding:11px 13px; color:var(--tx); font-family:var(--fb); font-size:13px;
  outline:none; transition:border-color 0.2s, box-shadow 0.2s; resize:none; line-height:1.5;
}
.mf input:focus, .mf textarea:focus { border-color:rgba(123,92,250,0.45); box-shadow:0 0 0 3px rgba(123,92,250,0.1); }

.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dur-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }

.dur-btn { padding:9px 4px; border-radius:9px; border:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.03); color:var(--mu2); font-family:var(--fh); font-size:12px; cursor:pointer; transition:all 0.18s; text-align:center; line-height:1.3; }
.dur-btn:hover:not(.locked) { border-color:rgba(123,92,250,0.3); color:var(--tx); }
.dur-btn.sel    { border-color:var(--vl); background:rgba(123,92,250,0.15); color:var(--vl2); font-weight:700; }
.dur-btn.locked { opacity:0.4; cursor:not-allowed; }
.dur-crown { font-size:10px; display:block; margin-top:2px; }

/* Hold-to-confirm button */
.hbtn {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  margin-top: 6px;
}
.hbtn::before { content:''; position:absolute; inset:0; width:0%; background:rgba(0,0,0,0.25); transition:width 0.25s ease; pointer-events:none; border-radius:inherit; }
.hbtn.holding::before { width:100%; transition:width var(--hms,2s) linear; }

.hbtn-gold {
  background: var(--g-vl);
  color: #fff;
  box-shadow: var(--sh-btn-vl);
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease;
}
.hbtn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(123,92,250,0.55); }
.hbtn:disabled { opacity:0.4; cursor:not-allowed; }
.hbtn-hint { font-size:11px; color:var(--mu2); text-align:center; margin-top:8px; }

/* Invest modal */
.inv-bal { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:12px 14px; margin-bottom:16px; font-size:13px; }
.inv-bal span   { color:var(--mu2); }
.inv-bal strong { color:var(--ac); font-family:var(--fh); font-size:15px; }
.inv-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.inv-row input[type=number] { flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:10px 13px; color:var(--tx); font-family:var(--fh); font-size:18px; font-weight:700; outline:none; transition:border-color 0.2s; }
.inv-row input[type=number]:focus { border-color:rgba(123,92,250,0.4); }
.inv-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; }
.inv-unit { font-size:12px; color:var(--mu2); }

input[type=range].inv-sl { width:100%; -webkit-appearance:none; appearance:none; height:4px; border-radius:2px; background:rgba(123,92,250,0.2); outline:none; margin:12px 0; }
input[type=range].inv-sl::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--g-vl); cursor:pointer; border:2px solid var(--bg); box-shadow:0 0 10px rgba(123,92,250,0.5); }

.inv-presets { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:14px; }
.prs-btn { padding:7px 4px; border-radius:9px; border:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.03); color:var(--mu2); font-family:var(--fh); font-size:12px; cursor:pointer; transition:all 0.18s; text-align:center; }
.prs-btn:hover:not(:disabled) { border-color:rgba(123,92,250,0.3); color:var(--tx); }
.prs-btn.on     { border-color:var(--vl); background:rgba(123,92,250,0.15); color:var(--vl2); }
.prs-btn:disabled { opacity:0.3; cursor:not-allowed; }
.inv-warn { font-size:11px; color:var(--red); margin-bottom:8px; min-height:16px; }

/* ════════════════════════════════════════════════
   TOAST NOTIFICATION
   ════════════════════════════════════════════════ */
#toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  padding: 10px 22px;
  border-radius: 28px;
  font-size: 0.93rem;
  font-family: var(--fh);
  font-weight: 700;
  color: #fff;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s var(--ease-spring);
  white-space: nowrap;
  backdrop-filter: blur(16px);
}

/* ════════════════════════════════════════════════
   SETTINGS & PRIVACY PAGES
   ════════════════════════════════════════════════ */
.spark-settings-page {}
.settings-header  { margin-bottom:24px; }
.settings-title   { color:var(--ac); font-size:1.1rem; letter-spacing:2px; text-transform:uppercase; margin:0 0 6px 0; font-weight:700; font-family:var(--fh); }
.settings-subtitle{ color:var(--mu2); font-size:0.85rem; line-height:1.4; margin:0; }
.settings-list    { display:flex; flex-direction:column; }
.settings-item    { display:flex; justify-content:space-between; align-items:center; padding:20px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.settings-item:last-child { border-bottom:none; }
.privacy-item-vertical { flex-direction:column; align-items:flex-start; }
.item-info    { padding-right:15px; }
.item-label   { color:var(--tx); font-size:1rem; font-weight:500; margin:0 0 4px 0; }
.item-description { color:var(--mu2); font-size:0.85rem; line-height:1.3; margin:0; }
.danger-title { color:var(--red) !important; }
.gold-title   { color:var(--ac) !important; }

/* Toggle switch */
.spark-toggle { position:relative; display:inline-block; width:48px; height:26px; flex-shrink:0; }
.spark-toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background-color:rgba(255,255,255,0.1); transition:all 0.3s var(--ease-smooth); border-radius:20px; border:1px solid rgba(255,255,255,0.1); }
.toggle-slider:before { position:absolute; content:''; height:18px; width:18px; left:3px; bottom:3px; background-color:rgba(255,255,255,0.4); transition:all 0.3s var(--ease-smooth); border-radius:50%; }
.spark-toggle input:checked + .toggle-slider { background-color:var(--vl); border-color:var(--vl); box-shadow:0 0 12px rgba(123,92,250,0.4); }
.spark-toggle input:checked + .toggle-slider:before { transform:translateX(22px); background-color:#fff; }

/* Inputs */
.privacy-password-form { width:100%; margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.input-group { display:flex; gap:10px; width:100%; }
.spark-input { width:100%; background-color:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:12px 14px; color:var(--tx); font-size:0.95rem; outline:none; box-sizing:border-box; transition:all 0.2s; }
.spark-input:focus { border-color:rgba(123,92,250,0.4); box-shadow:0 0 0 3px rgba(123,92,250,0.1); }
.modal-input   { text-align:center; }
.code-input    { font-size:1.4rem; letter-spacing:6px; font-weight:bold; color:var(--ac2) !important; }

/* Action buttons */
.spark-btn-submit { align-self:flex-start; background:rgba(90,232,197,0.1); border:1px solid rgba(90,232,197,0.25); color:var(--ac2); padding:12px 20px; border-radius:12px; cursor:pointer; font-size:14px; font-weight:600; box-shadow:0 4px 14px rgba(90,232,197,0.15); transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position:relative; overflow:hidden; }
.spark-btn-submit:hover { background-color:var(--ac2); color:#05060F; box-shadow:0 0 20px rgba(90,232,197,0.5); transform:translateY(-1px); }
.spark-btn-danger { background:rgba(232,90,122,0.1); border:1px solid rgba(232,90,122,0.25); color:var(--red); padding:12px 20px; border-radius:12px; cursor:pointer; font-size:14px; font-weight:600; flex-shrink:0; box-shadow:0 4px 14px rgba(232,90,122,0.15); transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position:relative; overflow:hidden; }
.spark-btn-danger:hover { background-color:var(--red); color:#05060F; box-shadow:0 0 20px rgba(232,90,122,0.5); transform:translateY(-1px); }
.modal-btn { width:100%; padding:12px; margin-top:10px; }
.final-delete-btn:hover { background-color:var(--red) !important; color:#05060F !important; }

/* Delete confirm modal */
.spark-modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,8,0.88); backdrop-filter:blur(8px); display:flex; justify-content:center; align-items:center; z-index:9999; opacity:0; pointer-events:none; transition:all 0.3s; }
.spark-modal-overlay.active { opacity:1; pointer-events:auto; }
.spark-modal-box {
  background:
    linear-gradient(160deg,var(--sf),var(--sf2)) padding-box,
    linear-gradient(135deg,rgba(232,90,122,0.3),rgba(123,92,250,0.15)) border-box;
  border:1px solid transparent;
  border-radius:16px; padding:30px 24px; max-width:400px; width:90%;
  position:relative; box-shadow:0 20px 60px rgba(0,0,0,0.85);
  transform:translateY(-20px); transition:transform 0.3s var(--ease-enter); box-sizing:border-box;
}
.spark-modal-overlay.active .spark-modal-box { transform:translateY(0); }
.modal-close-btn { position:absolute; top:12px; right:16px; background:none; border:none; color:var(--mu); font-size:1.8rem; cursor:pointer; line-height:1; padding:0; transition:color 0.2s; }
.modal-close-btn:hover { color:var(--tx); }
.modal-title { font-size:1.1rem; letter-spacing:1px; margin:0 0 12px 0; text-transform:uppercase; font-weight:700; text-align:center; font-family:var(--fh); }
.modal-text  { color:var(--mu2); font-size:0.85rem; line-height:1.5; margin:0 0 20px 0; text-align:center; }
.modal-form  { display:flex; flex-direction:column; gap:12px; }
.modal-step-hidden { display:none !important; }

/* ════════════════════════════════════════════════
   BUTTON LOADING STATE
   ════════════════════════════════════════════════ */
.btn-loading { position:relative !important; color:transparent !important; pointer-events:none !important; }
.btn-loading::after { content:''; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px; border:2px solid rgba(255,255,255,0.2); border-top-color:#fff; border-radius:50%; animation:spin 0.65s linear infinite; box-sizing:border-box; }
.spark-btn-danger.btn-loading::after  { border:2px solid rgba(232,90,122,0.2); border-top-color:var(--red); }
.spark-btn-submit.btn-loading::after  { border:2px solid rgba(90,232,197,0.2); border-top-color:var(--ac2); }

/* Circular timer progress */
.btn-timer-loading { position:relative !important; pointer-events:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
.btn-timer-progress { transform-origin:center; transition:stroke-dashoffset 0.1s linear; }
.btn-timer-progress.pulse-glow { animation:timerPulse 1.5s ease-in-out infinite; stroke-dashoffset:0 !important; }

/* ════════════════════════════════════════════════
   RESPONSIVE — DESKTOP
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .desk-nav { display: flex; }
  .layout { margin-left: 0; }
  header { padding-left: 88px; }
}

/* ════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ════════════════════════════════════════════════ */
@media (max-width:768px) {
  html, body { height:auto; }
  .orb-b, .orb-g, .orb-v { opacity:0.07; }

  .sidebar-nav { display: none; }

  header { padding:0 14px; gap:9px; }
  .logo-block { flex-direction:column; gap:1px; align-items:flex-start; }
  .slogan   { font-size:9px; }
  .logo-icon{ width:22px; height:22px; }
  .logo     { font-size:17px; }
  .wallet-badge .wlabel { display:none; }
  .wallet-badge { padding:6px 10px; }
  .user-block  { display:none; }
  .btn-prof    { display:none; }
  .btn-post    { padding:8px 10px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:115px; flex-shrink:1; }

  .layout  { display:block; height:auto; overflow:visible; }
  .sidebar { display:none; }
  .dp-overlay { display:none !important; }
  .feed    { overflow-y:visible; padding-bottom:80px; }

  .fbar { padding:11px 14px; gap:8px; }
  .frow { overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; scrollbar-width:none; }
  .frow::-webkit-scrollbar { display:none; }
  .trow { overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; scrollbar-width:none; }
  .trow::-webkit-scrollbar { display:none; }
  .flabel { display:none; }

  .cards { padding:14px; gap:13px; }
  .card  { padding:16px; border-radius:14px; }
  .ctitle{ font-size:15px; }
  .igraph-footer { flex-direction:column; align-items:flex-start; gap:3px; }

  .pgn  { padding:10px 14px 18px; gap:3px; }
  .pbtn { min-width:29px; height:29px; font-size:11px; }

  .mob-bar { display:flex; }
  .mpanel  { display:block; }

  .obs-shell  { height:300px; }
  .obs-system { width:180px; height:180px; }
  .obs-system.pos-tech   { left:-2px; top:4px; }
  .obs-system.pos-eco    { right:-4px; top:58px; }
  .obs-system.pos-social { left:38px; bottom:-14px; }
}

@media (max-width:400px) {
  .ctitle { font-size:14px; }
  .cact   { flex-direction:column; }
  .binv, .bcontact { width:100%; }
}

@media (max-width:480px) {
  .input-group  { flex-direction:column; gap:10px; }
  .spark-btn-submit { width:100%; text-align:center; }
  .settings-item    { flex-direction:column; align-items:flex-start; gap:15px; }
  .spark-btn-danger { width:100%; text-align:center; }
}

/* ════════════════════════════════════════════════
   GPU HINTS
   ════════════════════════════════════════════════ */
.orb      { contain: layout style paint; }
.card     { contain: layout style; }
.igraph-wrap { contain: layout style; }
.fbar     { contain: layout paint; }
.dp-panel { will-change: transform; }

/* ════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .orb-b, .orb-g, .orb-v { display:none; }
  body::before, body::after { display:none; }
  .obs-stub-icon { animation:none !important; }
  .obs-orbit     { animation:none !important; }
  .card          { animation:none !important; transform:none !important; opacity:1 !important; }
  .ig-line.animated { animation:none !important; stroke-dashoffset:0 !important; }
  .ig-dot        { opacity:1 !important; }
  .mo-box        { transition:none !important; }
  .dp-panel      { animation:none !important; }
  .logo, .auth-logo { animation:none !important; }
}

/* ════════════════════════════════════════════════
   WEAK DEVICE DEGRADATION
   ════════════════════════════════════════════════ */
@media (max-resolution:1.5dppx) and (pointer:coarse) {
  body::after { display:none; }
  .obs-orbit      { animation-duration:44s; }
  .ig-line.animated { animation-duration:0.8s; }
}

@media (pointer: coarse) {
  .orb, .orb-b, .orb-g, .orb-v { display:none !important; }
  .fbar           { backdrop-filter:none !important; background:rgba(5,6,15,0.98) !important; }
  .mob-bar        { backdrop-filter:none !important; background:rgba(5,6,15,0.98) !important; }
  .chat-tabs      { backdrop-filter:none !important; background:rgba(5,6,15,0.95) !important; }
  .mo             { backdrop-filter:none !important; background:rgba(0,0,0,0.95) !important; }
  .obs-coming-soon{ backdrop-filter:none !important; background:rgba(5,6,15,0.98) !important; }
  .obs-dimmer     { backdrop-filter:none !important; background:rgba(0,0,0,0.9) !important; }
  .dp-overlay     { backdrop-filter:none !important; background:rgba(5,6,15,0.95) !important; }
}

/* ════════════════════════════════════════════════
   V3 — PROFILE BIO
   ════════════════════════════════════════════════ */
.pbio {
  font-size: 0.86rem;
  color: var(--mu2);
  text-align: center;
  line-height: 1.6;
  margin: 6px 8px 0;
  max-width: 220px;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.myideas-section {
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 12px;
  padding-top: 10px;
}
.myideas-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 7px;
  border: none;
  background: transparent;
  color: var(--mu2);
  font-family: var(--fb);
  font-size: 0.93rem;
  cursor: pointer;
  border-radius: 9px;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.myideas-toggle:hover, .myideas-toggle.open {
  background: rgba(123,92,250,0.07);
  color: var(--vl2);
}
.myideas-chevron {
  margin-left: auto;
  transition: transform 0.22s var(--ease-smooth);
}
.myideas-toggle.open .myideas-chevron { transform: rotate(180deg); }

.myideas-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease-enter), opacity 0.28s ease;
  opacity: 0;
}
.myideas-body.open {
  max-height: 4000px;
  opacity: 1;
}

.savedideas-section {
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 12px;
  padding-top: 10px;
}
.savedideas-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 7px;
  border: none;
  background: transparent;
  color: var(--mu2);
  font-family: var(--fb);
  font-size: 0.93rem;
  cursor: pointer;
  border-radius: 9px;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.savedideas-toggle:hover, .savedideas-toggle.open {
  background: rgba(123,92,250,0.07);
  color: var(--vl2);
}
.savedideas-chevron {
  margin-left: auto;
  transition: transform 0.22s var(--ease-smooth);
}
.savedideas-toggle.open .savedideas-chevron { transform: rotate(180deg); }

.savedideas-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease-enter), opacity 0.28s ease;
  opacity: 0;
}
.savedideas-body.open {
  max-height: 4000px;
  opacity: 1;
}

/* ── My Ideas — single-card swipe carousel ── */
.mi-carousel {
  position: relative;
  width: 100%;
}
.mi-viewport {
  overflow: hidden;
  border-radius: 16px;
  touch-action: pan-y;          /* allow vertical scroll, we handle horizontal */
}
.mi-track {
  display: flex;
  will-change: transform;
}
.mi-slide {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  /* breathing room so the active card's shadow isn't clipped by the viewport */
  padding: 4px 3px;
}
/* When there are multiple ideas, hint the swipe affordance with a faint cursor */
.mi-multi .mi-viewport { cursor: grab; }
.mi-multi .mi-viewport:active { cursor: grabbing; }

/* Dots */
.mi-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
}
.mi-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  cursor: pointer;
  transition: width 0.32s var(--ease-spring),
              background 0.25s ease,
              box-shadow 0.25s ease;
}
.mi-dot:hover { background: rgba(255,255,255,0.32); }
.mi-dot.active {
  width: 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ac2), var(--ac));
  box-shadow: 0 0 8px rgba(90,232,197,0.45);
}

/* Swipe hint */
.mi-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mu2);
  user-select: none;
}
.mi-hint svg { color: var(--ac2); opacity: 0.65; }
.mi-hint svg:first-child { animation: miNudgeL 1.8s ease-in-out infinite; }
.mi-hint svg:last-child  { animation: miNudgeR 1.8s ease-in-out infinite; }
@keyframes miNudgeL { 0%,100%{transform:translateX(0);opacity:.4} 50%{transform:translateX(-2px);opacity:.85} }
@keyframes miNudgeR { 0%,100%{transform:translateX(0);opacity:.4} 50%{transform:translateX(2px);opacity:.85} }

@media (prefers-reduced-motion: reduce) {
  .mi-track { transition: none !important; }
  .mi-hint svg { animation: none !important; }
}

/* ════════════════════════════════════════════════
   V3 — PROFILE EDIT SECTION
   ════════════════════════════════════════════════ */
.pedit-section {
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 12px;
  padding-top: 10px;
}

.pedit-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 7px;
  border: none;
  background: transparent;
  color: var(--mu2);
  font-family: var(--fb);
  font-size: 0.93rem;
  cursor: pointer;
  border-radius: 9px;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.pedit-toggle:hover, .pedit-toggle.open {
  background: rgba(123,92,250,0.07);
  color: var(--vl2);
}
.pedit-chevron {
  margin-left: auto;
  transition: transform 0.22s var(--ease-smooth);
}
.pedit-toggle.open .pedit-chevron { transform: rotate(180deg); }

.pedit-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s var(--ease-enter), opacity 0.25s ease;
  opacity: 0;
}
.pedit-body.open {
  max-height: 2000px;
  opacity: 1;
}
.pedit-av-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 0 16px;
}
.pedit-av-preview {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 1.43rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 0 18px rgba(123,92,250,0.35);
  transition: background 0.25s ease;
}
.pedit-av-right { flex: 1; }
.pedit-sublabel {
  font-size: 0.71rem;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 7px;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.avatar-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring), border-color 0.15s;
  padding: 0;
}
.avatar-dot:hover    { transform: scale(1.18); }
.avatar-dot.selected { border-color: #fff; transform: scale(1.1); box-shadow: 0 0 10px rgba(255,255,255,0.4); }

.pedit-current-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.pedit-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.29rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 0 20px rgba(123,92,250,0.4);
  transition: background 0.25s ease;
  overflow: hidden;
}
.avatar-emoji-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.avatar-emoji {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 2px solid transparent;
  font-size: 1.43rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.avatar-emoji:hover {
  background: rgba(123,92,250,0.15);
  transform: scale(1.1);
}
.avatar-emoji.selected {
  border-color: var(--ac);
  background: rgba(123,92,250,0.2);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(123,92,250,0.4);
}
.pedit-upload-btn {
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 8px;
  color: var(--mu2);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 16px;
}
.pedit-upload-btn:hover {
  background: rgba(123,92,250,0.1);
  border-color: rgba(123,92,250,0.3);
  color: var(--vl2);
}
.pedit-color-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pedit-av-preview-small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 0 12px rgba(123,92,250,0.3);
  transition: background 0.25s ease;
  flex-shrink: 0;
}

/* Profile Edit Modal */
.profile-edit-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.profile-edit-modal.open {
  display: flex;
}
.profile-edit-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
.profile-edit-modal-content {
  position: relative;
  background: var(--sf2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.profile-edit-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: var(--mu2);
  font-size: 1.29rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.profile-edit-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--tx);
}
.profile-edit-modal-header {
  font-size: 1.29rem;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 20px;
  text-align: center;
}

.pedit-field { margin-bottom: 12px; }
.pedit-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--mu2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}
.pedit-char-count { font-size: 0.71rem; color: var(--mu); margin-left: auto; font-weight: 400; }

.pedit-input-wrap { position: relative; display: flex; align-items: center; }
.pedit-at {
  position: absolute;
  left: 11px;
  font-size: 1rem;
  color: var(--mu2);
  pointer-events: none;
}

.pedit-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  padding: 10px 12px 10px 24px;
  color: var(--tx);
  font-family: var(--fb);
  font-size: 0.93rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: none;
  line-height: 1.5;
}
.pedit-bio { padding-left: 12px; }
.pedit-input:focus {
  border-color: rgba(var(--vl-rgb, 123,92,250), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--vl-rgb, 123,92,250), 0.1);
}

.pedit-hint {
  font-size: 0.79rem;
  min-height: 14px;
  margin-top: 3px;
  line-height: 1.3;
}

.pedit-save-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: var(--g-vl, linear-gradient(135deg,#7B5CFA,#5A3FD0));
  color: #fff;
  font-family: var(--fh);
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease, opacity 0.15s;
  box-shadow: var(--sh-btn-vl, 0 4px 20px rgba(123,92,250,0.45));
  margin-top: 4px;
}
.pedit-save-btn:hover    { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(var(--vl-rgb, 123,92,250),0.55); }
.pedit-save-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.pedit-status {
  font-size: 0.79rem;
  min-height: 14px;
  text-align: center;
  margin-top: 6px;
}

/* ════════════════════════════════════════════════
   V3 — THEME STUDIO MODAL
   ════════════════════════════════════════════════ */
#themeStudioModal { z-index: 1100; }

#themeStudioModal .mo-box {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.ts-title {
  font-family: var(--fh);
  font-size: 1.21rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ts-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--mu2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background 0.15s, color 0.15s;
}
.ts-close:hover { background: rgba(255,255,255,0.1); color: var(--tx); }

#tsContent {
  flex: 1;
  overflow-y: auto;
  padding: 0 22px 28px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Preset grid */
.ts-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.ts-preset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  background:
    linear-gradient(160deg, rgba(10,14,36,0.9), rgba(8,12,28,0.95)) padding-box,
    linear-gradient(135deg, var(--p-vl, #7B5CFA), var(--p-ac, #E8C55A)) border-box;
  cursor: pointer;
  transition: transform 0.22s var(--ease-spring), border-width 0.15s;
}
.ts-preset-card:hover    { transform: translateY(-2px); }
.ts-preset-card.active   { border: 2px solid var(--p-vl, #7B5CFA); background:rgba(var(--vl-rgb,123,92,250),0.08); }
.ts-preset-icon { font-size: 1.43rem; line-height: 1; }
.ts-preset-name { font-size: 0.71rem; font-weight: 600; color: var(--mu2); text-transform: uppercase; letter-spacing: 0.06em; }

/* Colour pickers */
.ts-pickers { display: flex; flex-direction: column; gap: 10px; }
.ts-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  gap: 10px;
}
.ts-picker-info { flex: 1; }
.ts-picker-label { font-size: 0.93rem; font-weight: 500; line-height: 1.3; }
.ts-picker-tip   { font-size: 0.71rem; color: var(--mu2); line-height: 1.3; margin-top: 2px; }
.ts-picker-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ts-color-swatch {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  transition: background 0.15s;
}
.ts-color-input {
  width: 28px; height: 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  background: transparent;
}
.ts-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.ts-color-input::-webkit-color-swatch { border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; }
.ts-picker-right { position: relative; }

.ts-footer {
  display: flex;
  gap: 10px;
  padding: 16px 22px 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.ts-reset-btn {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: var(--mu2);
  font-family: var(--fh);
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.ts-reset-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--tx); background: rgba(255,255,255,0.04); }

/* ════════════════════════════════════════════════
   V3 — THEME STUDIO SETTINGS ROW
   ════════════════════════════════════════════════ */
.sset-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 7px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 3px;
}
.sset-theme:hover { background: rgba(255,255,255,0.04); }
.sset-theme-dots {
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.sset-theme-dot {
  width: 8px; height: 8px; border-radius: 50%;
}

/* ════════════════════════════════════════════════
   V3 — MOBILE FULL-BLEED IMPROVEMENTS
   ════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* SPK pill on mobile (inside wallet-badge) */
  .wallet-badge .spk {
    font-size: 1rem;
  }

  /* Bigger touch targets for action buttons */
  .binv, .bcontact {
    padding: 13px;
    font-size: 1rem;
  }

  /* Full-width theme studio preset grid → 2 cols */
  .ts-preset-grid { grid-template-columns: repeat(4, 1fr); }

  /* Profile edit on mobile */
  .pedit-toggle { font-size: 1rem; }

  /* Mobile leaderboard glow items */
  .li { border-radius: 12px; }

  /* Fbar search bigger on mobile */
  .srch-in { font-size: 1rem; padding-top: 11px; padding-bottom: 11px; }

  /* Hide header on sub-panels on mobile screen sizes */
  header.hide-on-mobile {
    display: none !important;
  }

  /* Force panels to perfect top alignment when header is hidden on mobile */
  header.hide-on-mobile ~ .mpanel {
    inset: 0 0 85px 0 !important;
  }
  header.hide-on-mobile ~ .mpanel.fullscreen-chat {
    inset: 0 0 0 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  /* Smooth taskbar transitions and slide out */
  .mob-bar {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, visibility 0.3s ease !important;
  }
  .mob-bar.hide-bar {
    transform: translateY(140%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Move all panels up to 0px from top on mobile to fill the empty header space */
  .mpanel {
    inset: 0 0 85px 0 !important;
  }

  /* Stretch active chat to cover whole screen */
  .mpanel.fullscreen-chat {
    inset: 0 0 0 0 !important;
    padding: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }
}

@media (max-width: 400px) {
  .ts-preset-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .ts-preset-card { padding: 9px 4px; }
  .ts-preset-icon { font-size: 1.14rem; }
  .ts-preset-name { font-size: 0.64rem; }
}

/* ═══════════════════════════════════════════════════════
   SPARK V3 Theme presets carousel & premium dynamic shimmers
   ═══════════════════════════════════════════════════════ */
.ts-preset-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 4px;
}

.ts-preset-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 200%; /* 2 pages */
}

.ts-preset-page {
  width: 50%; /* 100% of container */
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 4px;
}

.ts-preset-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 6px;
}

.ts-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.ts-dot:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: scale(1.2);
}

.ts-dot.active {
  background: var(--ac);
  box-shadow: 0 0 10px var(--ac);
  width: 18px; /* Elegant pill indicator for Page 1 / Page 2 */
  border-radius: 4px;
}

/* --- V3 PREMIUM GRADIENT BUTTONS SHIMMER --- */
.hbtn-gold, .auth-btn, .spark-btn-submit {
  background-size: 200% auto !important;
  background-image: var(--g-vl) !important;
  animation: premiumBtnGradient 6s ease infinite !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes premiumBtnGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ════════════════════════════════════════════════════════════
   ДОСТИЖЕНИЯ — achievements system
   ════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes achGoldPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(232,197,90,0.25), 0 0 24px rgba(232,197,90,0.10); }
  50%       { box-shadow: 0 0 18px rgba(232,197,90,0.55), 0 0 42px rgba(232,197,90,0.22); }
}
@keyframes achBtnPulse {
  0%, 100% { box-shadow: 0 3px 14px rgba(232,197,90,0.35); transform: scale(1); }
  50%       { box-shadow: 0 4px 22px rgba(232,197,90,0.65); transform: scale(1.025); }
}
@keyframes achSpin {
  to { transform: rotate(360deg); }
}
@keyframes achFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes achParticle {
  0%   { opacity: 1; transform: rotate(var(--angle)) translateY(0) scale(1); }
  80%  { opacity: 0.7; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateY(calc(-1 * var(--dist))) scale(0.3); }
}
@keyframes achBarFill {
  from { width: 0; }
}

/* ── Collapsible section (mirrors .myideas-section) ── */
.ach-section {
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 12px;
  padding-top: 10px;
}

.ach-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--tx);
  font-size: 0.93rem;
  font-weight: 600;
  font-family: var(--fb);
  padding: 7px 10px;
  border-radius: 9px;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.ach-toggle:hover,
.ach-toggle.open {
  background: rgba(232,197,90,0.07);
  color: var(--ac);
}

.ach-chevron {
  margin-left: auto;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.ach-toggle.open .ach-chevron { transform: rotate(180deg); }

.ach-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.42s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
}
.ach-body.open {
  max-height: 2400px;
  opacity: 1;
}

/* ── Card list ── */
.ach-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 2px 6px;
}

/* ── Base card (glassmorphism) ── */
.ach-card {
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(12,17,40,0.65);
  backdrop-filter: blur(10px);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
  animation: achFadeIn 0.32s cubic-bezier(0.4,0,0.2,1) both;
}
.ach-card:hover {
  transform: scale(1.012);
}

/* ── Locked state ── */
.ach-card-locked {
  opacity: 0.72;
  border-color: rgba(255,255,255,0.05);
}
.ach-card-locked .ach-icon { filter: grayscale(0.6); opacity: 0.7; }
.ach-card-locked .ach-title { color: var(--mu2); }
.ach-card-locked .ach-reward { color: var(--mu2); border-color: rgba(255,255,255,0.07); }

/* ── Ready state (gold glow) ── */
.ach-card-ready {
  border-color: rgba(232,197,90,0.35);
  background:
    linear-gradient(160deg, rgba(14,18,42,0.85), rgba(10,12,28,0.9)) padding-box,
    linear-gradient(135deg, rgba(232,197,90,0.45), rgba(123,92,250,0.2)) border-box;
  animation: achFadeIn 0.32s cubic-bezier(0.4,0,0.2,1) both,
             achGoldPulse 2.8s ease-in-out infinite;
}
.ach-card-ready .ach-title { color: var(--ac); }

/* ── Claimed state ── */
.ach-card-claimed {
  opacity: 0.52;
  border-color: rgba(90,232,197,0.12);
  background: rgba(8,12,24,0.55);
}
.ach-card-claimed .ach-icon { filter: saturate(0.4); }
.ach-card-claimed .ach-reward { color: var(--ac2); border-color: rgba(90,232,197,0.2); }

/* ── Card top row ── */
.ach-card-top {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.ach-icon {
  font-size: 1.57rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.ach-info {
  flex: 1;
  min-width: 0;
}

.ach-title {
  font-family: var(--fh);
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 2px;
  line-height: 1.3;
}

.ach-desc {
  font-size: 0.79rem;
  color: var(--mu2);
  line-height: 1.45;
}

.ach-reward {
  flex-shrink: 0;
  font-family: var(--fh);
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--ac);
  border: 1px solid rgba(232,197,90,0.28);
  border-radius: 7px;
  padding: 3px 8px;
  white-space: nowrap;
  background: rgba(232,197,90,0.07);
  letter-spacing: 0.01em;
}
.ach-spk-lbl {
  font-size: 0.71rem;
  font-weight: 600;
  opacity: 0.8;
  margin-left: 1px;
}

/* ── Progress bar ── */
.ach-progress {
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  margin: 10px 0 4px;
  overflow: hidden;
}
.ach-progress-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--vl), var(--ac));
  animation: achBarFill 0.7s cubic-bezier(0.4,0,0.2,1) both;
  min-width: 4px;
}
.ach-progress-label {
  font-size: 0.71rem;
  color: var(--mu2);
  text-align: right;
  margin-bottom: 8px;
}

/* ── Buttons ── */
.ach-btn-row {
  margin-top: 12px;
}

.ach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  border-radius: 10px;
  border: none;
  font-family: var(--fb);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease, opacity 0.15s;
  letter-spacing: 0.02em;
}

.ach-btn-locked {
  background: rgba(255,255,255,0.05);
  color: var(--mu);
  cursor: not-allowed;
}
.ach-btn-locked:disabled { opacity: 0.6; }

.ach-btn-ready {
  background: linear-gradient(135deg, #E8C55A 0%, #ff9a3c 55%, #E8C55A 100%);
  background-size: 200% auto;
  color: #0a0a14;
  animation: achBtnPulse 2s ease-in-out infinite,
             premiumBtnGradient 4s ease infinite;
  box-shadow: 0 3px 14px rgba(232,197,90,0.4);
}
.ach-btn-ready:hover:not(:disabled) {
  transform: scale(1.04);
  box-shadow: 0 5px 22px rgba(232,197,90,0.65);
}
.ach-btn-ready:active:not(:disabled) { transform: scale(0.97); }
.ach-btn-ready:disabled {
  animation: none;
  opacity: 0.65;
  cursor: not-allowed;
}

.ach-btn-claimed {
  background: rgba(90,232,197,0.09);
  color: var(--ac2);
  border: 1px solid rgba(90,232,197,0.22);
  cursor: default;
}
.ach-btn-claimed:disabled { opacity: 0.8; }

/* ── Инструкция-тогл ── */
.ach-how-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: var(--fb);
  color: var(--ac2);
  padding: 5px 0;
  margin-bottom: 4px;
  transition: opacity 0.15s;
  width: 100%;
  text-align: left;
}
.ach-how-toggle:hover { opacity: 0.8; }
.ach-how-chevron {
  margin-left: auto;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.ach-how-toggle.open .ach-how-chevron { transform: rotate(180deg); }

.ach-how-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
  margin-bottom: 0;
}
.ach-how-body.open {
  max-height: 700px;
  opacity: 1;
  margin-bottom: 10px;
}

.ach-how-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: rgba(90,232,197,0.04);
  border: 1px solid rgba(90,232,197,0.12);
  border-radius: 10px;
  margin-bottom: 8px;
}

.ach-how-step {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.ach-how-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(90,232,197,0.15);
  border: 1px solid rgba(90,232,197,0.3);
  color: var(--ac2);
  font-size: 0.79rem;
  font-weight: 700;
  font-family: var(--fh);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.ach-how-text {
  font-size: 11.5px;
  color: var(--tx-d);
  line-height: 1.55;
}
.ach-how-text strong { color: var(--tx); }
.ach-how-req {
  display: block;
  margin-top: 3px;
  font-size: 0.79rem;
  color: var(--mu2);
}
.ach-how-req strong { color: var(--ac); }
.ach-how-example {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--mu2);
  font-family: monospace;
}
.ach-how-example strong { color: var(--ac2); }

/* ── Repost form ── */
.ach-repost-instruction {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ach-repost-step {
  font-size: 11.5px;
  color: var(--mu2);
  line-height: 1.5;
}
.ach-repost-step strong { color: var(--ac2); }

.ach-code-label {
  font-size: 0.79rem;
  color: var(--mu2);
  margin-top: 2px;
  margin-bottom: 5px;
}

.ach-repost-code {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 0;
  margin-bottom: 10px;
  padding: 7px 12px;
  background: rgba(232,197,90,0.08);
  border: 1px solid rgba(232,197,90,0.35);
  border-radius: 8px;
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ac);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  align-self: flex-start;
}
.ach-repost-code:hover {
  background: rgba(232,197,90,0.15);
  border-color: var(--ac);
}
.ach-repost-code svg { opacity: 0.6; flex-shrink: 0; }

.ach-repost-form {
  margin-top: 11px;
}

.ach-repost-row {
  display: flex;
  gap: 7px;
  align-items: stretch;
}

.ach-repost-input {
  flex: 1;
  min-width: 0;
  background: rgba(8,12,28,0.7);
  border: 1px solid rgba(90,232,197,0.18);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 11.5px;
  font-family: var(--fb);
  color: var(--tx);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.ach-repost-input::placeholder { color: var(--mu); }
.ach-repost-input:focus {
  border-color: var(--ac2);
  box-shadow: 0 0 0 2px rgba(90,232,197,0.14);
}

.ach-repost-check-btn {
  flex-shrink: 0;
  padding: 8px 13px;
  border-radius: 9px;
  border: 1px solid rgba(90,232,197,0.35);
  background: rgba(90,232,197,0.1);
  color: var(--ac2);
  font-size: 0.86rem;
  font-weight: 700;
  font-family: var(--fb);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s, transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
  white-space: nowrap;
}
.ach-repost-check-btn:hover:not(:disabled) {
  background: rgba(90,232,197,0.18);
  border-color: var(--ac2);
  transform: scale(1.03);
}
.ach-repost-check-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.ach-repost-verdict {
  margin-top: 7px;
  min-height: 16px;
  font-size: 11.5px;
  line-height: 1.45;
  animation: achFadeIn 0.25s ease both;
}
.ach-repost-age-notice {
  margin-top: 7px;
  font-size: 0.79rem;
  color: var(--mu2);
}
.ach-age-timer {
  font-family: var(--fh);
  font-weight: 700;
  color: var(--ac);
  letter-spacing: 0.05em;
}

.ach-verdict-ok      { color: var(--ac2); }
.ach-verdict-fail    { color: var(--red); }
.ach-verdict-pending { color: var(--ac); }

/* ── Spinner ── */
.ach-spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(90,232,197,0.25);
  border-top-color: var(--ac2);
  border-radius: 50%;
  animation: achSpin 0.7s linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
}

.ach-skeleton-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  font-size: 0.86rem;
  color: var(--mu2);
}

.ach-empty {
  padding: 14px 10px;
  font-size: 0.86rem;
  color: var(--mu2);
  text-align: center;
}

/* ── Spark particle overlay (claim animation) ── */
.ach-spark-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ach-spark-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--ac);
  animation: achParticle 0.9s cubic-bezier(0.2,0.8,0.4,1) both;
  top: 50%;
  left: 50%;
  margin-top: -3px;
  margin-left: -3px;
  box-shadow: 0 0 6px var(--ac);
}
.ach-spark-particle:nth-child(odd)  { background: var(--vl2); box-shadow: 0 0 6px var(--vl2); }
.ach-spark-particle:nth-child(3n)   { background: var(--ac2); box-shadow: 0 0 6px var(--ac2); }

/* ── Rank badges ──────────────────────────────────────────── */
.ach-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
}
.ach-rank-badge--I   { background: #CD7F32; color: #fff; box-shadow: 0 0 6px rgba(205,127,50,0.5); }
.ach-rank-badge--II  { background: #9BA4B5; color: #fff; box-shadow: 0 0 6px rgba(192,192,192,0.5); }
.ach-rank-badge--III { background: #FFD700; color: #333; box-shadow: 0 0 10px rgba(255,215,0,0.6); }
.ach-rank-badge--IV  { background: #00BFFF; color: #fff; box-shadow: 0 0 10px rgba(0,191,255,0.6); }
.ach-rank-badge--V   { background: linear-gradient(135deg,#9B59B6,#E91E63); color: #fff; box-shadow: 0 0 14px rgba(155,89,182,0.7); }

/* ── Rank track (5 pips + connectors) ─────────────────────── */
.ach-rank-track {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 6px;
}
.ach-rank-pip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.57rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--mu);
  transition: all 0.3s ease;
}
.ach-rank-pip.earned { color: #fff; }
.ach-rank-pip.pip-I   { background: #CD7F32; border-color: #CD7F32; box-shadow: 0 0 6px rgba(205,127,50,0.5); }
.ach-rank-pip.pip-II  { background: #9BA4B5; border-color: #9BA4B5; }
.ach-rank-pip.pip-III { background: #FFD700; border-color: #FFD700; color: #333; box-shadow: 0 0 8px rgba(255,215,0,0.5); }
.ach-rank-pip.pip-IV  { background: #00BFFF; border-color: #00BFFF; box-shadow: 0 0 8px rgba(0,191,255,0.5); }
.ach-rank-pip.pip-V   { background: linear-gradient(135deg,#9B59B6,#E91E63); border-color: #9B59B6; box-shadow: 0 0 12px rgba(155,89,182,0.7); }

.ach-rank-connector {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.ach-rank-connector.filled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ac), var(--ac2));
  animation: achRankFill 0.5s ease forwards;
}
@keyframes achRankFill {
  from { width: 0 }
  to   { width: 100% }
}

/* ── Claim button pulse when rank is ready ─────────────────── */
.ach-btn-ready.rank-ready {
  animation: achRankPulse 1.8s ease-in-out infinite;
}
@keyframes achRankPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,197,90,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(232,197,90,0); }
}


/* ════════════════════════════════════════════════
   SUPPORT FAB
   ════════════════════════════════════════════════ */
.support-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 800;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--g-vl);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(123,92,250,0.55), 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
}
.support-fab:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 32px rgba(123,92,250,0.7), 0 2px 8px rgba(0,0,0,0.4);
}
.support-fab:active { transform: scale(0.95); }
@media (max-width: 600px) {
  .support-fab { bottom: 80px; }
}

/* Support modal email button */
.support-mail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: var(--g-vl);
  color: #fff;
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: var(--sh-btn-vl);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
}
.support-mail-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(123,92,250,0.55);
}


/* ════════════════════════════════════════════════
   ADMIN BADGE — CORE TEAM
   ════════════════════════════════════════════════ */
.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 20px;
  background: linear-gradient(135deg, #7C3AED, #5B21B6);
  color: #fff;
  font-family: var(--fh);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 5px;
  box-shadow: 0 0 10px rgba(124,58,237,0.55), 0 0 3px rgba(124,58,237,0.3);
  line-height: 1;
  white-space: nowrap;
}


/* ════════════════════════════════════════════════
   ADMIN DELETE BUTTON (on cards)
   ════════════════════════════════════════════════ */
.admin-del-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(232,90,122,0.25);
  background: rgba(232,90,122,0.08);
  color: var(--red);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
  margin-left: 4px;
}
.admin-del-btn:hover {
  background: rgba(232,90,122,0.18);
  border-color: rgba(232,90,122,0.55);
  transform: scale(1.05);
}
.admin-del-btn:active { transform: scale(0.95); }


/* ════════════════════════════════════════════════
   SYSTEM ANNOUNCEMENT BANNER
   ════════════════════════════════════════════════ */
#announcementBanner {
  display: none;
  margin: 0 0 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(123,92,250,0.14), rgba(232,90,160,0.08));
  border: 1px solid rgba(123,92,250,0.3);
  animation: annSlideIn 0.35s cubic-bezier(0.22,1,0.36,1);
}
@keyframes annSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ann-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
}
.ann-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--vl2);
}
#announcementText {
  flex: 1;
  font-size: 0.93rem;
  color: var(--tx);
  line-height: 1.55;
}
.ann-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--mu2);
  font-size: 1.29rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.18s;
  align-self: flex-start;
}
.ann-close:hover { color: var(--tx); }


/* ── Специальные бейджи (ICC, BETA TESTER и т.д.) ── */
.special-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 5px;
  line-height: 1.4;
  white-space: nowrap;
}

.special-badge--beta {
  background: rgba(96, 165, 250, 0.12);
  color: #60A5FA;
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.special-badge--pro {
  background: rgba(167, 139, 250, 0.15);
  color: #A78BFA;
  border: 1px solid rgba(167, 139, 250, 0.4);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.2);
}


/* ================================================
   AUTHOR DELETE BUTTON (on cards)
   ================================================ */
.author-del-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1.5px solid var(--red);
  background: transparent;
  color: var(--red);
  cursor: pointer;
  transition: all 0.18s;
  margin-left: 4px;
  box-shadow: 0 0 8px rgba(232,90,122,0.3);
}
.author-del-btn:hover {
  background: rgba(232,90,122,0.1);
  box-shadow: 0 0 12px rgba(232,90,122,0.5);
  transform: scale(1.05);
}
.author-del-btn:active {
  transform: scale(0.95);
  box-shadow: 0 0 6px rgba(232,90,122,0.4);
}

/* ================================================
   RED HOLD BUTTON (for delete confirmation)
   ================================================ */
.hbtn-red {
  background: linear-gradient(135deg, #E85A7A 0%, #D64555 100%);
  box-shadow: 0 4px 15px rgba(232,90,122,0.3);
}
.hbtn-red:hover {
  background: linear-gradient(135deg, #F56A8A 0%, #E65565 100%);
  box-shadow: 0 6px 20px rgba(232,90,122,0.4);
}



/* ================================================
   AUTHOR RESTORE BUTTON (on cards in profile)
   ================================================ */
.author-restore-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1.5px solid #4ade80;
  background: transparent;
  color: #4ade80;
  cursor: pointer;
  transition: all 0.18s;
  margin-left: 4px;
  box-shadow: 0 0 8px rgba(74,222,128,0.3);
}
.author-restore-btn:hover {
  background: rgba(74,222,128,0.1);
  box-shadow: 0 0 12px rgba(74,222,128,0.5);
  transform: scale(1.05);
}
.author-restore-btn:active {
  transform: scale(0.95);
  box-shadow: 0 0 6px rgba(74,222,128,0.4);
}

/* ================================================
   IN FEED BADGE (for active ideas in profile)
   ================================================ */
.in-feed-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(232,197,90,0.4);
  background: transparent;
  color: rgba(232,197,90,0.8);
  font-size: 0.79rem;
  font-weight: 500;
  margin-left: 4px;
  pointer-events: none;
  user-select: none;
}

/* ================================================
   GREEN HOLD BUTTON (for restore confirmation)
   ================================================ */
.hbtn-green {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  box-shadow: 0 4px 15px rgba(74,222,128,0.3);
}
.hbtn-green:hover {
  background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
  box-shadow: 0 6px 20px rgba(74,222,128,0.4);
}



/* DEBUG: author-restore-btn */
.author-restore-btn {
  z-index: 9999 !important;
  pointer-events: auto !important;
  position: relative !important;
}



/* FIX: Improve click area for dropdown items */
.cmen-dropdown-item {
  pointer-events: auto !important;
  position: relative !important;
  min-height: 44px !important;
  height: auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 11px 16px !important;
  width: 100% !important;
}
.cmen-dropdown-item::before,
.cmen-dropdown-item::after {
  display: none !important;
}
/* Disable pointer events for elements that overlap the button */
.cmen-dropdown-item svg,
.cmen-dropdown-item .cmen,
.cmen-dropdown-item .ch {
  pointer-events: none !important;
}
.cmen-dropdown-item * {
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════
   DONATE MODAL
   ════════════════════════════════════════════════ */
.mo-box--donate {
  max-width: 520px;
  padding: 32px 28px;
}

.mo-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mu2);
  transition: all 0.2s ease;
}

.mo-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--tx);
}

.donate-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #E85AA0, #E8C55A, #7B5CFA);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white;
}

.donate-cloudtips-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-bottom: 24px;
}

.donate-cloudtips-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.donate-cloudtips-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #E85AA0, #E8C55A, #7B5CFA);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.donate-cloudtips-text {
  flex: 1;
}

.donate-cloudtips-title {
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 4px;
}

.donate-cloudtips-subtitle {
  font-size: 0.93rem;
  color: var(--mu2);
}

.donate-divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
  color: var(--mu2);
  font-size: 0.86rem;
}

.donate-divider::before,
.donate-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.donate-divider span {
  padding: 0 16px;
}

.donate-qr {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}

.donate-qr img {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 200px;
  height: auto;
}

.donate-bonus-card {
  padding: 18px 20px;
  background: rgba(232, 90, 122, 0.08);
  border: 1px solid rgba(232, 90, 122, 0.25);
  border-radius: 14px;
  margin-top: 24px;
}

.donate-bonus-title {
  font-size: 1.07rem;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 8px;
}

.donate-bonus-text {
  font-size: 0.93rem;
  color: var(--tx-d);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════
   PREMIUM MODAL
   ════════════════════════════════════════════════ */
.mo-box--premium {
  max-width: 480px;
  padding: 32px 28px;
}

.premium-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: white;
  position: relative;
}

.premium-icon::before {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
  z-index: -1;
  animation: premiumGlow 2s ease-in-out infinite;
}

@keyframes premiumGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.premium-title-inline {
  text-align: center;
  margin-bottom: 24px;
}

.premium-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  margin: 0 auto 24px;
  font-size: 0.93rem;
  color: var(--mu2);
}

.premium-status.active {
  background: rgba(90, 232, 197, 0.1);
  border-color: rgba(90, 232, 197, 0.25);
  color: var(--ac2);
}

.premium-price-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

.premium-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.premium-price-amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--red);
}

.premium-price-period {
  font-size: 1rem;
  color: var(--mu2);
}

.premium-balance {
  font-size: 0.93rem;
  color: var(--mu2);
}

.premium-balance span {
  color: var(--tx);
  font-weight: 600;
}

.premium-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.premium-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: var(--tx-d);
}

.premium-feature-icon {
  color: var(--red);
  font-size: 1.14rem;
  flex-shrink: 0;
}

.premium-activate-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #E85AA0, #E85AA0);
  border: none;
  border-radius: 14px;
  color: white;
  font-size: 1.07rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(232, 90, 160, 0.3);
}

.premium-activate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232, 90, 160, 0.4);
}

.premium-activate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ════════════════════════════════════════════════
   PREMIUM CONFIRM MODAL
   ════════════════════════════════════════════════ */
.mo-box--premium-confirm {
  max-width: 400px;
  padding: 28px 24px;
}

/* ════════════════════════════════════════════════
   LANGUAGE MODAL
   ════════════════════════════════════════════════ */
#moLang .mo-box {
  max-width: 360px;
  padding: 28px 24px;
}

.lang-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid rgba(255,255,255,0.06);
}

.lang-option:hover {
  background: rgba(123,92,250,0.08);
}

.lang-option.selected {
  background: rgba(123,92,250,0.12);
  border-color: rgba(123,92,250,0.3);
}

.lang-flag {
  font-size: 1.57rem;
}

.lang-name {
  font-size: 1.07rem;
  font-weight: 500;
  color: var(--tx);
  flex: 1;
}

.lang-check {
  font-size: 1.14rem;
  color: var(--vl2);
  opacity: 0;
  transition: opacity 0.15s;
}

.lang-option.selected .lang-check {
  opacity: 1;
}

/* ════════════════════════════════════════════════
   FONT SIZE MODAL
   ════════════════════════════════════════════════ */
#moFontSize .mo-box {
  max-width: 360px;
  padding: 28px 24px;
}

.font-size-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.font-size-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid rgba(255,255,255,0.06);
}

.font-size-option:hover {
  background: rgba(123,92,250,0.08);
}

.font-size-option.selected {
  background: rgba(123,92,250,0.12);
  border-color: rgba(123,92,250,0.3);
}

.font-size-preview {
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--ac);
  width: 24px;
  text-align: center;
}

.font-size-name {
  font-size: 1.07rem;
  font-weight: 500;
  color: var(--tx);
  flex: 1;
}

.font-size-check {
  font-size: 1.14rem;
  color: var(--vl2);
  opacity: 0;
  transition: opacity 0.15s;
}

.font-size-option.selected .font-size-check {
  opacity: 1;
}

.premium-expiry {
  font-size: 1rem;
  color: var(--mu2);
  margin-bottom: 24px;
}

.premium-expiry span {
  color: var(--tx);
  font-weight: 600;
}

.premium-confirm-actions {
  display: flex;
  gap: 12px;
}

.premium-confirm-cancel {
  flex: 1;
  padding: 14px;
  background: none;
  border: none;
  border-radius: 12px;
  color: var(--red);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.premium-confirm-cancel:hover {
  background: rgba(232, 90, 160, 0.1);
}

.premium-confirm-activate {
  flex: 1;
  padding: 14px;
  background: linear-gradient(135deg, #E85AA0, #E85AA0);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(232, 90, 160, 0.3);
}

.premium-confirm-activate:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232, 90, 160, 0.4);
}