/* ================================================================
   TWEEDR v2 — Frutiger Aero Premium Stylesheet
   ================================================================ */

/* Google Fonts loaded via <link> in index.html to avoid render-blocking @import */

:root {
  --aqua:           #00BFFF;
  --aqua-mid:       #00A8E8;
  --aqua-dark:      #005F99;
  --teal:           #00CED1;
  --sky-light:      #C8EEFF;
  --sky-mid:        #87CEEB;
  --glass-bg:       rgba(12, 60, 110, 0.72);
  --glass-border:   rgba(255, 255, 255, 0.44);
  --glass-shine:    rgba(255, 255, 255, 0.62);
  --glass-inner:    rgba(0, 120, 200, 0.12);
  --text-body:      #ffffff;
  --text-white:     #ffffff;
  --text-muted:     rgba(190, 230, 255, 0.72);
  --glow:           rgba(0, 180, 240, 0.45);
  --sidebar-w:      275px;
  --right-w:        310px;
  --card-radius:    20px;
  --panel-radius:   18px;
  --transition:     0.2s cubic-bezier(0.34, 1.12, 0.64, 1);
  --transition-fast:0.15s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 120% 80% at 80% -10%, #0ADDFF22 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at -10% 60%, #00AAFF18 0%, transparent 50%),
    linear-gradient(160deg,
      #083D6A 0%,
      #0C5C90 12%,
      #1478B0 26%,
      #1AA0D0 40%,
      #22B8E8 52%,
      #18A0CC 62%,
      #0E78AA 74%,
      #083860 88%,
      #052840 100%
    );
  background-attachment: fixed;
  color: var(--text-body);
  overflow-x: hidden;
}

/* ── Background Orbs ─────────────────────────────────────────── */
.bg-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0;
  animation: orb-float ease-in-out infinite;
  will-change: transform;
}
.orb1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #00E8FF 0%, #0099DD 60%, transparent 100%);
  top: -180px; right: -160px;
  animation-duration: 13s; animation-delay: 0s;
  opacity: 0.38;
}
.orb2 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, #00F5FF 0%, #00AABB 60%, transparent 100%);
  bottom: -100px; left: -100px;
  animation-duration: 10s; animation-delay: -4s;
  opacity: 0.35;
}
.orb3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #BBEFFB 0%, #55BBDD 60%, transparent 100%);
  top: 38%; left: 35%;
  animation-duration: 15s; animation-delay: -8s;
  opacity: 0.30;
}
.orb4 {
  width: 220px; height: 220px;
  background: radial-gradient(circle, #DDFAFF 0%, #88DDEE 60%, transparent 100%);
  top: 18%; left: 12%;
  animation-duration: 12s; animation-delay: -3s;
  opacity: 0.28;
}
.orb5 {
  width: 160px; height: 160px;
  background: radial-gradient(circle, #AAFFEE 0%, #22BBCC 60%, transparent 100%);
  bottom: 20%; right: 15%;
  animation-duration: 17s; animation-delay: -6s;
  opacity: 0.22;
}
.orb6 {
  width: 120px; height: 120px;
  background: radial-gradient(circle, #FFFFFF 0%, #AAEEFF 60%, transparent 100%);
  top: 55%; right: 32%;
  animation-duration: 9s; animation-delay: -11s;
  opacity: 0.18;
}
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%       { transform: translate(18px, -28px) scale(1.04); }
  50%       { transform: translate(-10px, 15px) scale(0.98); }
  75%       { transform: translate(12px, 22px) scale(1.02); }
}


/* ── Clouds ─────────────────────────────────────────────────── */
.cloud {
  position: fixed; pointer-events: none; z-index: 0;
  animation: cloud-drift linear infinite;
  border-radius: 50%;
  will-change: transform;
}
.cloud1 {
  width: 90px; height: 70px;
  top: 10%; left: -340px;
  animation-duration: 95s;
  background: rgba(255,255,255,0.75);
  box-shadow:
    50px 10px 0 10px rgba(255,255,255,0.72),
    100px 5px 0 18px rgba(255,255,255,0.70),
    145px 15px 0 8px rgba(255,255,255,0.66),
    180px 20px 0 12px rgba(255,255,255,0.62),
    85px -18px 0 16px rgba(255,255,255,0.68),
    135px -14px 0 12px rgba(255,255,255,0.64),
    30px 15px 0 14px rgba(255,255,255,0.67);
  filter: blur(5px);
}
.cloud2 {
  width: 70px; height: 55px;
  top: 28%; left: -280px;
  animation-duration: 125s; animation-delay: -42s;
  background: rgba(255,255,255,0.68);
  box-shadow:
    38px 8px 0 8px rgba(255,255,255,0.65),
    75px 4px 0 14px rgba(255,255,255,0.63),
    110px 12px 0 6px rgba(255,255,255,0.60),
    60px -14px 0 12px rgba(255,255,255,0.62),
    22px 12px 0 10px rgba(255,255,255,0.60);
  filter: blur(4px);
}
.cloud3 {
  width: 110px; height: 80px;
  top: 53%; left: -420px;
  animation-duration: 105s; animation-delay: -72s;
  background: rgba(255,255,255,0.70);
  box-shadow:
    60px 12px 0 14px rgba(255,255,255,0.68),
    120px 6px 0 22px rgba(255,255,255,0.66),
    175px 18px 0 10px rgba(255,255,255,0.62),
    220px 24px 0 14px rgba(255,255,255,0.58),
    100px -20px 0 18px rgba(255,255,255,0.66),
    158px -16px 0 14px rgba(255,255,255,0.62),
    40px 18px 0 16px rgba(255,255,255,0.64);
  filter: blur(6px);
}
.cloud4 {
  width: 60px; height: 45px;
  top: 72%; left: -200px;
  animation-duration: 80s; animation-delay: -20s;
  background: rgba(255,255,255,0.60);
  box-shadow:
    30px 6px 0 7px rgba(255,255,255,0.58),
    60px 3px 0 12px rgba(255,255,255,0.56),
    20px 10px 0 9px rgba(255,255,255,0.55);
  filter: blur(4px);
}
.cloud5 {
  width: 80px; height: 60px;
  top: 20%; left: -300px;
  animation-duration: 110s; animation-delay: -55s;
  background: rgba(255,255,255,0.66);
  border-radius: 50%;
  box-shadow:
    45px 8px 0 9px rgba(255,255,255,0.64),
    88px 4px 0 16px rgba(255,255,255,0.62),
    128px 14px 0 7px rgba(255,255,255,0.58),
    68px -16px 0 13px rgba(255,255,255,0.63),
    25px 13px 0 11px rgba(255,255,255,0.60);
  filter: blur(5px);
}
.cloud6 {
  width: 100px; height: 72px;
  top: 42%; left: -380px;
  animation-duration: 135s; animation-delay: -90s;
  background: rgba(255,255,255,0.64);
  border-radius: 50%;
  box-shadow:
    55px 10px 0 12px rgba(255,255,255,0.62),
    108px 5px 0 20px rgba(255,255,255,0.60),
    158px 16px 0 9px rgba(255,255,255,0.56),
    195px 22px 0 13px rgba(255,255,255,0.52),
    90px -18px 0 16px rgba(255,255,255,0.61),
    35px 16px 0 14px rgba(255,255,255,0.59);
  filter: blur(6px);
}
.cloud7 {
  width: 50px; height: 38px;
  top: 84%; left: -180px;
  animation-duration: 70s; animation-delay: -35s;
  background: rgba(255,255,255,0.58);
  border-radius: 50%;
  box-shadow:
    28px 5px 0 6px rgba(255,255,255,0.56),
    55px 3px 0 10px rgba(255,255,255,0.54),
    16px 9px 0 8px rgba(255,255,255,0.53);
  filter: blur(3px);
}
.cloud8 {
  width: 130px; height: 95px;
  top: 6%; left: -500px;
  animation-duration: 150s; animation-delay: -18s;
  background: rgba(255,255,255,0.72);
  box-shadow:
    70px 14px 0 18px rgba(255,255,255,0.70),
    140px 7px 0 26px rgba(255,255,255,0.68),
    205px 20px 0 12px rgba(255,255,255,0.64),
    255px 28px 0 16px rgba(255,255,255,0.60),
    115px -24px 0 20px rgba(255,255,255,0.69),
    175px -18px 0 15px rgba(255,255,255,0.65),
    50px 20px 0 18px rgba(255,255,255,0.66);
  filter: blur(7px);
}
.cloud9 {
  width: 55px; height: 42px;
  top: 37%; left: -220px;
  animation-duration: 88s; animation-delay: -60s;
  background: rgba(255,255,255,0.62);
  box-shadow:
    32px 7px 0 7px rgba(255,255,255,0.60),
    62px 4px 0 11px rgba(255,255,255,0.58),
    22px 11px 0 9px rgba(255,255,255,0.57),
    48px -12px 0 9px rgba(255,255,255,0.58);
  filter: blur(3px);
}
.cloud10 {
  width: 95px; height: 68px;
  top: 62%; left: -360px;
  animation-duration: 115s; animation-delay: -30s;
  background: rgba(255,255,255,0.67);
  box-shadow:
    52px 11px 0 13px rgba(255,255,255,0.65),
    102px 5px 0 19px rgba(255,255,255,0.63),
    148px 16px 0 9px rgba(255,255,255,0.59),
    78px -17px 0 15px rgba(255,255,255,0.64),
    30px 15px 0 12px rgba(255,255,255,0.61);
  filter: blur(5px);
}
.cloud11 {
  width: 40px; height: 30px;
  top: 78%; left: -150px;
  animation-duration: 65s; animation-delay: -10s;
  background: rgba(255,255,255,0.55);
  box-shadow:
    22px 4px 0 5px rgba(255,255,255,0.53),
    42px 2px 0 8px rgba(255,255,255,0.51),
    14px 8px 0 7px rgba(255,255,255,0.50);
  filter: blur(2px);
}
.cloud12 {
  width: 115px; height: 82px;
  top: 46%; left: -440px;
  animation-duration: 140s; animation-delay: -105s;
  background: rgba(255,255,255,0.69);
  box-shadow:
    62px 13px 0 16px rgba(255,255,255,0.67),
    124px 6px 0 23px rgba(255,255,255,0.65),
    182px 19px 0 11px rgba(255,255,255,0.61),
    226px 25px 0 15px rgba(255,255,255,0.57),
    104px -21px 0 19px rgba(255,255,255,0.66),
    162px -15px 0 13px rgba(255,255,255,0.62),
    42px 17px 0 15px rgba(255,255,255,0.63);
  filter: blur(6px);
}
@keyframes cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 600px)); }
}

/* ── Easter egg: love message scrolls behind clouds ─────────── */
.love-message {
  position: fixed;
  pointer-events: none;
  z-index: 0; /* same level as clouds — DOM order puts it under them */
  top: 14%;
  left: 0;
  transform: translateX(-110vw);
  font-size: clamp(52px, 9vw, 108px);
  font-weight: 800;
  font-style: italic;
  color: rgba(255, 255, 255, 0.36);
  white-space: nowrap;
  letter-spacing: 0.05em;
  text-shadow: 0 6px 40px rgba(180, 240, 255, 0.25);
  opacity: 0;
  will-change: transform, opacity;
}
.love-message.active {
  animation: love-scroll 130s linear forwards;
}
@keyframes love-scroll {
  0%   { transform: translateX(-110vw); opacity: 0; }
  3%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(115vw);  opacity: 0; }
}

/* ── Stars (dark mode only) ─────────────────────────────────── */
.stars-layer {
  display: none;
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
}
/* Tiny stars */
.stars-layer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
  box-shadow:
    2vw   45px 0 1px rgba(255,255,255,0.70),
    8vw   90px 0 1px rgba(255,255,255,0.55),
    14vw  30px 0 1px rgba(255,255,255,0.80),
    21vw 140px 0 1px rgba(255,255,255,0.60),
    28vw  60px 0 1px rgba(255,255,255,0.75),
    35vw 110px 0 1px rgba(255,255,255,0.50),
    42vw  25px 0 1px rgba(255,255,255,0.85),
    49vw  75px 0 1px rgba(255,255,255,0.65),
    56vw 135px 0 1px rgba(255,255,255,0.55),
    63vw  50px 0 1px rgba(255,255,255,0.78),
    70vw  95px 0 1px rgba(255,255,255,0.62),
    77vw  35px 0 1px rgba(255,255,255,0.72),
    84vw 120px 0 1px rgba(255,255,255,0.58),
    91vw  55px 0 1px rgba(255,255,255,0.80),
    97vw 100px 0 1px rgba(255,255,255,0.65),
    4vw  200px 0 1px rgba(255,255,255,0.60),
    11vw 260px 0 1px rgba(255,255,255,0.70),
    18vw 185px 0 1px rgba(255,255,255,0.50),
    25vw 310px 0 1px rgba(255,255,255,0.80),
    32vw 240px 0 1px rgba(255,255,255,0.65),
    39vw 180px 0 1px rgba(255,255,255,0.55),
    46vw 290px 0 1px rgba(255,255,255,0.75),
    53vw 220px 0 1px rgba(255,255,255,0.60),
    60vw 330px 0 1px rgba(255,255,255,0.85),
    67vw 195px 0 1px rgba(255,255,255,0.50),
    74vw 265px 0 1px rgba(255,255,255,0.70),
    81vw 310px 0 1px rgba(255,255,255,0.62),
    88vw 210px 0 1px rgba(255,255,255,0.78),
    95vw 270px 0 1px rgba(255,255,255,0.55),
    1vw  380px 0 1px rgba(255,255,255,0.68),
    7vw  420px 0 1px rgba(255,255,255,0.80),
    15vw 460px 0 1px rgba(255,255,255,0.60),
    22vw 390px 0 1px rgba(255,255,255,0.72),
    30vw 430px 0 1px rgba(255,255,255,0.50),
    37vw 445px 0 1px rgba(255,255,255,0.85),
    44vw 400px 0 1px rgba(255,255,255,0.65),
    51vw 470px 0 1px rgba(255,255,255,0.55),
    58vw 410px 0 1px rgba(255,255,255,0.78),
    65vw 460px 0 1px rgba(255,255,255,0.62),
    72vw 385px 0 1px rgba(255,255,255,0.70),
    79vw 440px 0 1px rgba(255,255,255,0.58),
    86vw 405px 0 1px rgba(255,255,255,0.75),
    93vw 455px 0 1px rgba(255,255,255,0.65),
    5vw  540px 0 1px rgba(255,255,255,0.65),
    12vw 580px 0 1px rgba(255,255,255,0.50),
    19vw 520px 0 1px rgba(255,255,255,0.78),
    26vw 600px 0 1px rgba(255,255,255,0.60),
    33vw 555px 0 1px rgba(255,255,255,0.72),
    40vw 610px 0 1px rgba(255,255,255,0.55),
    47vw 530px 0 1px rgba(255,255,255,0.85),
    54vw 590px 0 1px rgba(255,255,255,0.65),
    61vw 545px 0 1px rgba(255,255,255,0.50),
    68vw 615px 0 1px rgba(255,255,255,0.75),
    75vw 560px 0 1px rgba(255,255,255,0.62),
    82vw 600px 0 1px rgba(255,255,255,0.70),
    89vw 525px 0 1px rgba(255,255,255,0.58),
    96vw 580px 0 1px rgba(255,255,255,0.80),
    3vw  700px 0 1px rgba(255,255,255,0.72),
    10vw 740px 0 1px rgba(255,255,255,0.55),
    17vw 680px 0 1px rgba(255,255,255,0.80),
    24vw 760px 0 1px rgba(255,255,255,0.62),
    31vw 720px 0 1px rgba(255,255,255,0.50),
    38vw 690px 0 1px rgba(255,255,255,0.78),
    45vw 770px 0 1px rgba(255,255,255,0.65),
    52vw 710px 0 1px rgba(255,255,255,0.55),
    59vw 760px 0 1px rgba(255,255,255,0.85),
    66vw 695px 0 1px rgba(255,255,255,0.60),
    73vw 750px 0 1px rgba(255,255,255,0.72),
    80vw 715px 0 1px rgba(255,255,255,0.50),
    87vw 770px 0 1px rgba(255,255,255,0.68),
    94vw 730px 0 1px rgba(255,255,255,0.75),
    6vw  860px 0 1px rgba(255,255,255,0.60),
    13vw 900px 0 1px rgba(255,255,255,0.75),
    20vw 845px 0 1px rgba(255,255,255,0.50),
    27vw 910px 0 1px rgba(255,255,255,0.80),
    34vw 870px 0 1px rgba(255,255,255,0.62),
    41vw 920px 0 1px rgba(255,255,255,0.55),
    48vw 855px 0 1px rgba(255,255,255,0.78),
    55vw 905px 0 1px rgba(255,255,255,0.65),
    62vw 875px 0 1px rgba(255,255,255,0.50),
    69vw 930px 0 1px rgba(255,255,255,0.72),
    76vw 860px 0 1px rgba(255,255,255,0.62),
    83vw 915px 0 1px rgba(255,255,255,0.58),
    90vw 880px 0 1px rgba(255,255,255,0.70),
    98vw 940px 0 1px rgba(255,255,255,0.65);
  animation: stars-twinkle-a 5s ease-in-out infinite alternate;
}
/* Larger brighter stars */
.stars-layer::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  background: transparent;
  border-radius: 50%;
  box-shadow:
    5vw   70px 0 1px rgba(255,255,255,0.92),
    12vw 155px 0 1px rgba(220,240,255,0.88),
    20vw  85px 0 1px rgba(255,255,255,0.96),
    28vw 160px 0 1px rgba(220,235,255,0.90),
    36vw  75px 0 1px rgba(255,255,255,0.94),
    44vw 145px 0 1px rgba(220,240,255,0.88),
    52vw  90px 0 1px rgba(255,255,255,0.96),
    60vw 155px 0 1px rgba(220,235,255,0.90),
    68vw  70px 0 1px rgba(255,255,255,0.92),
    76vw 140px 0 1px rgba(220,240,255,0.88),
    84vw  80px 0 1px rgba(255,255,255,0.96),
    92vw 150px 0 1px rgba(220,235,255,0.90),
    9vw  320px 0 1px rgba(255,255,255,0.92),
    17vw 280px 0 1px rgba(220,235,255,0.88),
    25vw 355px 0 1px rgba(255,255,255,0.96),
    33vw 295px 0 1px rgba(220,240,255,0.90),
    41vw 340px 0 1px rgba(255,255,255,0.92),
    49vw 285px 0 1px rgba(220,235,255,0.88),
    57vw 330px 0 1px rgba(255,255,255,0.96),
    65vw 295px 0 1px rgba(220,240,255,0.90),
    73vw 350px 0 1px rgba(255,255,255,0.92),
    81vw 310px 0 1px rgba(220,235,255,0.88),
    89vw 345px 0 1px rgba(255,255,255,0.96),
    97vw 290px 0 1px rgba(220,240,255,0.90),
    3vw  490px 0 1px rgba(255,255,255,0.94),
    11vw 510px 0 1px rgba(220,240,255,0.88),
    19vw 480px 0 1px rgba(255,255,255,0.92),
    27vw 520px 0 1px rgba(220,235,255,0.90),
    35vw 495px 0 1px rgba(255,255,255,0.96),
    43vw 510px 0 1px rgba(220,240,255,0.88),
    51vw 485px 0 1px rgba(255,255,255,0.92),
    59vw 515px 0 1px rgba(220,235,255,0.90),
    67vw 495px 0 1px rgba(255,255,255,0.96),
    75vw 510px 0 1px rgba(220,240,255,0.88),
    83vw 490px 0 1px rgba(255,255,255,0.92),
    91vw 505px 0 1px rgba(220,235,255,0.90),
    6vw  660px 0 1px rgba(255,255,255,0.92),
    14vw 680px 0 1px rgba(220,235,255,0.88),
    22vw 650px 0 1px rgba(255,255,255,0.96),
    30vw 675px 0 1px rgba(220,240,255,0.90),
    38vw 660px 0 1px rgba(255,255,255,0.92),
    46vw 680px 0 1px rgba(220,235,255,0.88),
    54vw 655px 0 1px rgba(255,255,255,0.96),
    62vw 675px 0 1px rgba(220,240,255,0.90),
    70vw 660px 0 1px rgba(255,255,255,0.92),
    78vw 680px 0 1px rgba(220,235,255,0.88),
    86vw 650px 0 1px rgba(255,255,255,0.96),
    94vw 670px 0 1px rgba(220,240,255,0.90),
    8vw  820px 0 1px rgba(255,255,255,0.94),
    16vw 840px 0 1px rgba(220,240,255,0.90),
    24vw 815px 0 1px rgba(255,255,255,0.96),
    32vw 845px 0 1px rgba(220,235,255,0.88),
    40vw 825px 0 1px rgba(255,255,255,0.92),
    48vw 840px 0 1px rgba(220,240,255,0.90),
    56vw 820px 0 1px rgba(255,255,255,0.96),
    64vw 845px 0 1px rgba(220,235,255,0.88),
    72vw 825px 0 1px rgba(255,255,255,0.92),
    80vw 840px 0 1px rgba(220,240,255,0.90),
    88vw 815px 0 1px rgba(255,255,255,0.96),
    96vw 830px 0 1px rgba(220,235,255,0.88);
  animation: stars-twinkle-b 7s ease-in-out infinite alternate-reverse;
}
@keyframes stars-twinkle-a {
  0%   { opacity: 0.55; }
  50%  { opacity: 1.0;  }
  100% { opacity: 0.70; }
}
@keyframes stars-twinkle-b {
  0%   { opacity: 0.80; }
  40%  { opacity: 0.40; }
  100% { opacity: 1.0;  }
}
body.theme-dark .stars-layer { display: block; }
body.theme-dark .cloud { display: none; }

/* ── Shooting Stars (dark mode only) ────────────────────────── */
.shooting-stars {
  display: none;
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
}
body.theme-dark .shooting-stars { display: block; }

/*
  Each .shooting-star is a 0x0 invisible mover.
  The ::before is the visual streak, trailing behind the head.
  The ::after is the glowing head dot.
  Movement is plain translate(right, down) in screen space — no rotation in keyframes.
  The streak is rotated to match the travel angle visually.
*/
.shooting-star {
  position: absolute;
  width: 0; height: 0;
  opacity: 0;
  will-change: transform, opacity;
}

/* Fading tail — trails behind the head */
.shooting-star::before {
  content: '';
  position: absolute;
  top: -1px; right: 0;
  width: var(--ss-w, 130px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(180,220,255,0.12) 25%,
    rgba(210,232,255,0.55) 60%,
    rgba(255,255,255,0.88) 100%);
  transform: rotate(32deg);
  transform-origin: right center;
}

/* Bright glowing head */
.shooting-star::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 4px 2px rgba(210,232,255,0.85),
    0 0 9px 4px rgba(180,215,255,0.38);
}

/* Single keyframe — all stars share one diagonal travel path.
   opacity: 0 at 100% prevents CSS from interpolating back to the start. */
@keyframes ss-fly {
  0%   { opacity: 0;  transform: translate(0, 0); }
  4%   { opacity: 1; }
  14%  { opacity: 0;  transform: translate(320px, 220px); }
  100% { opacity: 0; }
}

.ss1 { top:  7%; left: 22%; --ss-w: 130px; animation: ss-fly 15s ease-in infinite  2s; }
.ss2 { top:  4%; left: 58%; --ss-w: 160px; animation: ss-fly 23s ease-in infinite  8s; }
.ss3 { top: 12%; left: 40%; --ss-w: 110px; animation: ss-fly 18s ease-in infinite 14s; }
.ss4 { top:  2%; left: 75%; --ss-w: 175px; animation: ss-fly 27s ease-in infinite  4s; }
.ss5 { top: 18%; left:  8%; --ss-w: 105px; animation: ss-fly 20s ease-in infinite 19s; }
.ss6 { top:  6%; left: 88%; --ss-w: 145px; animation: ss-fly 26s ease-in infinite 11s; }

/* ── Scanlines (subtle texture) ─────────────────────────────── */
.scanlines {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.018) 3px,
    rgba(0, 0, 0, 0.018) 4px
  );
}

/* ── Glass Panel ─────────────────────────────────────────────── */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(32px) saturate(1.6) brightness(1.06);
  -webkit-backdrop-filter: blur(32px) saturate(1.6) brightness(1.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--panel-radius);
  box-shadow:
    0 12px 48px rgba(0, 20, 60, 0.40),
    0 2px 8px rgba(0, 80, 160, 0.20),
    inset 0 1px 0 var(--glass-shine),
    inset 0 -1px 0 rgba(0, 60, 120, 0.22),
    inset 1px 0 0 rgba(255,255,255,0.10),
    inset -1px 0 0 rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
/* Top shine streak */
.glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 10px; right: 10px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.55) 20%,
    rgba(255,255,255,0.90) 50%,
    rgba(255,255,255,0.55) 80%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}
/* Inner bottom rim glow */
.glass-panel::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8px; right: 8px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,191,255,0.30) 50%,
    transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── Screens ─────────────────────────────────────────────────── */
.screen { display: none; position: relative; z-index: 1; }
.screen.active { display: block; }

/* ================================================================
   AUTH SCREEN
   ================================================================ */
.auth-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.logo-area { text-align: center; margin-bottom: 32px; }

.logo-orb {
  width: 104px; height: 104px;
  background: radial-gradient(circle at 30% 28%,
    rgba(255,255,255,0.98) 0%,
    #88EEFF 22%,
    #00C8FF 45%,
    #0068AA 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.55),
    0 0 0 6px rgba(0,191,255,0.22),
    0 0 40px rgba(0,200,255,0.80),
    0 0 80px rgba(0,200,255,0.40),
    0 0 140px rgba(0,200,255,0.15),
    inset 0 -6px 12px rgba(0,70,130,0.28),
    inset 0 4px 8px rgba(255,255,255,0.55);
  animation: logo-pulse 3.5s ease-in-out infinite;
}
@keyframes logo-pulse {
  0%,100% {
    box-shadow:
      0 0 0 3px rgba(255,255,255,0.55),
      0 0 0 6px rgba(0,191,255,0.22),
      0 0 40px rgba(0,200,255,0.80),
      0 0 80px rgba(0,200,255,0.40),
      0 0 140px rgba(0,200,255,0.15),
      inset 0 -6px 12px rgba(0,70,130,0.28),
      inset 0 4px 8px rgba(255,255,255,0.55);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(255,255,255,0.65),
      0 0 0 10px rgba(0,191,255,0.15),
      0 0 65px rgba(0,210,255,1.0),
      0 0 120px rgba(0,210,255,0.60),
      0 0 200px rgba(0,210,255,0.25),
      inset 0 -6px 12px rgba(0,70,130,0.28),
      inset 0 4px 8px rgba(255,255,255,0.55);
  }
}

.logo-text {
  font-size: 56px;
  font-weight: 800;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0,80,140,0.40),
    0 0 35px rgba(0,210,255,0.65),
    0 0 70px rgba(0,210,255,0.28);
  letter-spacing: -2px;
  line-height: 1;
}
.logo-tagline {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(210, 245, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0,30,80,0.55);
  letter-spacing: 0.5px;
}

.auth-panel { width: 100%; max-width: 400px; padding: 32px; }

.feed-tab-bar {
  display: flex;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  margin: 8px 0;
  position: relative;
  z-index: 2;
  background: rgba(8, 50, 100, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  padding: 3px;
  gap: 3px;
}
.feed-tab {
  flex: 1;
  padding: 9px 12px;
  background: none;
  border: none;
  border-radius: 11px;
  color: rgba(190,235,255,0.6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.feed-tab:hover { color: #fff; }
.feed-tab.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}

.tab-bar {
  display: flex;
  gap: 4px;
  background: rgba(0, 120, 180, 0.15);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 26px;
}
.tab-btn {
  flex: 1;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 11px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: rgba(190, 235, 255, 0.80);
  transition: all var(--transition-fast);
}
.tab-btn.active {
  background: rgba(255,255,255,0.92);
  color: var(--aqua-dark);
  box-shadow:
    0 2px 12px rgba(0,80,150,0.30),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: rgba(200, 240, 255, 0.88);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0,30,80,0.5);
}

.glass-input {
  width: 100%;
  padding: 11px 15px;
  background: rgba(0, 35, 70, 0.50);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: #ffffff;
  outline: none;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
}
.glass-input::placeholder { color: rgba(160, 215, 255, 0.42); }
.glass-input:focus {
  background: rgba(0, 50, 100, 0.65);
  border-color: var(--aqua);
  box-shadow:
    0 0 0 3px rgba(0,191,255,0.22),
    0 0 20px rgba(0,191,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.error-msg {
  min-height: 18px;
  font-size: 12px;
  color: #FF5555;
  margin-bottom: 10px;
  padding-left: 2px;
}

#guest-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  pointer-events: none;
}
.guest-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: rgba(8, 40, 90, 0.82);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  backdrop-filter: blur(16px);
  white-space: nowrap;
  pointer-events: all;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.action-btn.muted {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.browse-link {
  display: block;
  background: none;
  border: none;
  color: rgba(255,255,255,0.42);
  font-size: 13px;
  cursor: pointer;
  padding: 10px;
  margin: 4px auto 0;
  transition: color 0.2s;
}
.browse-link:hover { color: rgba(255,255,255,0.75); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 4px;
  color: rgba(255,255,255,0.3);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.12);
}

.auth-footer {
  margin-top: 14px;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  text-align: center;
}

.dev-bypass { margin-top: 18px; text-align: center; }
.dev-bypass-btn {
  background: rgba(0,0,0,0.32);
  border: 1px dashed rgba(255,200,0,0.50);
  border-radius: 8px;
  color: rgba(255,210,50,0.82);
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 7px 18px;
  cursor: pointer;
  transition: all 0.18s;
  backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; gap: 6px;
}
.dev-bypass-btn:hover {
  background: rgba(255,180,0,0.16);
  border-color: rgba(255,210,50,0.85);
  color: #FFD932;
  box-shadow: 0 0 16px rgba(255,200,0,0.22);
}

/* ── Glossy Button ─────────────────────────────────────────── */
.glossy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15px;
  transition: all var(--transition);
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
}
/* Top glass shine */
.glossy-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.50) 0%,
    rgba(255,255,255,0.10) 100%);
  border-radius: 999px 999px 0 0;
  pointer-events: none;
  z-index: 1;
}
/* Bottom rim */
.glossy-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: rgba(0,0,0,0.18);
  pointer-events: none;
}

.glossy-btn.primary {
  background: linear-gradient(180deg,
    #3AD5FF 0%,
    #08BBEE 40%,
    #0090CC 75%,
    #006FA8 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,60,110,0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 5px 20px rgba(0,160,220,0.45),
    0 2px 5px rgba(0,70,120,0.30),
    0 0 0 1px rgba(0,150,220,0.30);
}
.glossy-btn.primary:hover {
  background: linear-gradient(180deg,
    #66E2FF 0%,
    #28CCFF 40%,
    #00A8DD 75%,
    #0080BB 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 7px 28px rgba(0,170,230,0.60),
    0 3px 8px rgba(0,80,140,0.30),
    0 0 0 1px rgba(0,170,230,0.40);
  transform: translateY(-1px);
}
.glossy-btn.primary:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0,50,100,0.30),
    0 2px 8px rgba(0,120,180,0.25);
}

.glossy-btn.secondary {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.72) 0%,
    rgba(210,240,255,0.50) 100%);
  color: var(--aqua-dark);
  border: 1px solid rgba(0,191,255,0.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 2px 10px rgba(0,150,200,0.15);
}
.glossy-btn.secondary:hover {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.92) 0%,
    rgba(210,240,255,0.70) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 5px 16px rgba(0,150,200,0.25);
  transform: translateY(-1px);
}
.glossy-btn.secondary:active { transform: translateY(0); }

.glossy-btn.danger {
  background: linear-gradient(180deg, #FF8888 0%, #DD2222 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(100,0,0,0.35);
}

.glossy-btn.full  { width: 100%; }
.glossy-btn.small { padding: 8px 20px; font-size: 13px; }

/* ================================================================
   APP LAYOUT
   ================================================================ */
#app-screen {
  display: none;
  min-height: 100vh;
  max-width: 1520px;
  margin: 0 auto;
  padding: 22px 18px;
  gap: 22px;
}
#app-screen.active { display: flex; align-items: flex-start; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  overflow: hidden;
}

/* Sidebar inner ambient glow */
.sidebar-glow {
  position: absolute;
  top: -40px; left: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle,
    rgba(0,200,255,0.18) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: sidebar-glow-pulse 6s ease-in-out infinite;
}
@keyframes sidebar-glow-pulse {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

.sidebar-logo {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.28);
}
.sidebar-logo-text {
  font-size: 23px;
  font-weight: 800;
  color: #fff;
  text-shadow:
    0 2px 12px rgba(0,140,220,0.45),
    0 0 28px rgba(255,255,255,0.28);
  letter-spacing: -0.5px;
}

.nav-links { display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; }

.nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px 13px 20px;
  border: none;
  background: transparent;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  text-align: left;
  transition: all 0.2s;
  width: 100%;
  overflow: hidden;
}
/* Vista-style left accent bar */
.nav-active-bar {
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--aqua);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  transform: scaleY(0);
  box-shadow: 0 0 10px rgba(0,191,255,0.8);
}
.nav-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
  transform: translateX(2px);
}
.nav-btn.active {
  background: rgba(255,255,255,0.20);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 3px 14px rgba(0,150,220,0.22),
    inset 4px 0 0 rgba(0,191,255,0.0);
}
.nav-btn.active .nav-active-bar {
  opacity: 1;
  transform: scaleY(1);
}
.nav-btn:hover { transform: translateX(2px); }
.nav-btn.active { transform: translateX(3px); }

.nav-ico {
  width: 22px; height: 22px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
  transition: filter 0.2s;
}
.nav-btn.active .nav-ico,
.nav-btn:hover  .nav-ico {
  filter: drop-shadow(0 0 6px rgba(0,200,255,0.70)) drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.ico {
  display: inline-block;
  vertical-align: middle;
  image-rendering: auto;
  flex-shrink: 0;
}
.btn-ico {
  width: 16px; height: 16px;
  display: inline-block; vertical-align: middle;
  margin-right: 4px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.panel-ico {
  width: 18px; height: 18px;
  display: inline-block; vertical-align: middle;
  margin-right: 5px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.30));
}
.logo-orb-ico {
  width: 60%; height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
.sidebar-logo-ico {
  width: 30px; height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.30));
}

.notif-badge {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #FF5555, #CC1111);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 20px; height: 20px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  box-shadow: 0 0 10px rgba(255,50,50,0.55), 0 2px 4px rgba(0,0,0,0.3);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(255,50,50,0.55), 0 2px 4px rgba(0,0,0,0.3); }
  50%      { box-shadow: 0 0 18px rgba(255,50,50,0.80), 0 2px 4px rgba(0,0,0,0.3); }
}

.new-post-btn {
  margin: 14px 0 4px;
  padding: 13px 18px;
  font-size: 14px;
  width: 100%;
  position: relative; z-index: 1;
}

.sidebar-spacer { flex: 1; }

.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 6px;
  position: relative; z-index: 1;
}
.sidebar-user:hover { background: rgba(255,255,255,0.14); }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-display-name {
  font-size: 13px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-username { font-size: 11px; color: var(--text-muted); }

.sign-out-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.40);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 8px;
  transition: all 0.18s;
  text-align: left;
  display: inline-flex; align-items: center; gap: 5px;
  position: relative; z-index: 1;
}
.sign-out-btn:hover {
  background: rgba(255,60,60,0.14);
  color: rgba(255,130,130,0.95);
}

/* ── Main Content ────────────────────────────────────────────── */
.main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.view { display: none; }
.view.active { display: block; animation: view-in 0.25s ease; }
#view-messages.active {
  display: flex !important;
  flex-direction: column;
  height: calc(100vh - 44px);
  overflow: hidden;
}
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.view-header {
  padding: 18px 26px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.view-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,100,160,0.40);
  letter-spacing: -0.3px;
}

/* ── Right Panel ─────────────────────────────────────────────── */
.right-panel {
  width: var(--right-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}
.right-panel::-webkit-scrollbar { width: 0; }

.right-card { padding: 20px 22px; }
.right-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,100,160,0.35);
  margin-bottom: 14px;
  letter-spacing: 0.15px;
  display: flex; align-items: center;
}

.right-footer {
  font-size: 10px;
  color: rgba(255,255,255,0.32);
  padding: 0 4px 8px;
  line-height: 1.9;
}

/* ── Avatar Orb ─────────────────────────────────────────────── */
.avatar-orb {
  width: 48px; height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.12s ease-out, box-shadow var(--transition), filter var(--transition);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.50),
    0 0 0 4px rgba(0,191,255,0.20),
    0 0 18px rgba(0,160,220,0.45),
    inset 0 -3px 6px rgba(0,0,0,0.18),
    inset 0 2px 4px rgba(255,255,255,0.48);
}
.avatar-orb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-orb:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.65),
    0 0 0 6px rgba(0,191,255,0.25),
    0 0 28px rgba(0,190,255,0.70),
    inset 0 -3px 6px rgba(0,0,0,0.18),
    inset 0 2px 4px rgba(255,255,255,0.48);
}
.avatar-orb.small { width: 40px; height: 40px; font-size: 15px; }
.avatar-orb.large { width: 86px; height: 86px; font-size: 32px;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.55),
    0 0 0 6px rgba(0,191,255,0.22),
    0 0 30px rgba(0,160,220,0.55),
    inset 0 -4px 8px rgba(0,0,0,0.18),
    inset 0 3px 6px rgba(255,255,255,0.50);
}

/* ── Compose Area ────────────────────────────────────────────── */
.compose-area { padding: 22px 26px; margin-bottom: 16px; }
.compose-inner { display: flex; gap: 16px; align-items: flex-start; }
.compose-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.compose-textarea {
  width: 100%;
  min-height: 84px;
  background: rgba(0, 35, 72, 0.48);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 14px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: #ffffff;
  resize: none;
  outline: none;
  transition: all 0.2s;
  line-height: 1.6;
}
.compose-textarea.large { min-height: 128px; }
.compose-textarea:focus {
  background: rgba(0, 48, 100, 0.62);
  border-color: var(--aqua);
  box-shadow:
    0 0 0 3px rgba(0,191,255,0.20),
    0 0 20px rgba(0,191,255,0.10);
}
.compose-textarea::placeholder { color: rgba(160,215,255,0.42); }

.compose-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tag-input {
  flex: 1;
  min-width: 120px;
  padding: 7px 13px;
  font-size: 12px;
}
.photo-attach-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
}
.photo-attach-btn:hover {
  background: rgba(0,191,255,0.22);
  border-color: rgba(0,191,255,0.50);
  box-shadow: 0 0 12px rgba(0,191,255,0.25);
}

.char-count {
  font-size: 12px;
  font-weight: 700;
  color: rgba(160,220,255,0.88);
  min-width: 28px;
  text-align: right;
  transition: color 0.18s;
}
.char-count.warn { color: #E07800; }
.char-count.crit { color: #FF4444; animation: count-shake 0.3s ease; }
@keyframes count-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* ── Photo Preview ───────────────────────────────────────────── */
.photo-preview-area {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.photo-preview-area > img {
  width: 100%; height: auto;
  max-height: 340px; object-fit: contain; display: block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.25);
}
.photo-preview-thumb {
  position: relative;
  flex: 1 1 calc(50% - 4px);
  min-width: 120px;
  max-width: calc(50% - 4px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.25);
  aspect-ratio: 1 / 1;
}
.photo-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.add-more-thumb {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 2px dashed rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.85);
  font-size: 32px;
  font-weight: 300;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.add-more-thumb:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.55) !important;
}
.photo-count-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: linear-gradient(180deg, #3AD5FF, #0080BB);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,128,180,0.5);
}
.photo-attach-btn { position: relative; }
.remove-photo-btn {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  color: #fff; font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  z-index: 2;
}
.remove-photo-btn:hover { background: rgba(200,0,0,0.70); }

/* ── Post slideshow (multi-photo) ─────────────────────────── */
.post-slideshow {
  position: relative;
  margin-top: 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
}
.post-slideshow .slides-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.post-slideshow .slides-track::-webkit-scrollbar { display: none; }
.post-slideshow .slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  background: rgba(0,0,0,0.20);
}
.post-slideshow .slide img {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  display: block;
  cursor: pointer;
}
.post-slideshow .slide-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.40);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
.post-slideshow .slide-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.50);
  transition: background 0.15s, transform 0.15s;
}
.post-slideshow .slide-dot.active {
  background: #fff;
  transform: scale(1.2);
}
.post-slideshow .slide-counter {
  position: absolute;
  top: 10px; right: 10px;
  padding: 4px 9px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}
.post-slideshow .slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px 0;
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
}
.post-slideshow .slide-arrow:hover {
  background: rgba(0,0,0,0.78);
  transform: translateY(-50%) scale(1.07);
}
.post-slideshow .slide-arrow:active { transform: translateY(-50%) scale(0.94); }
.post-slideshow .slide-arrow-left  { left: 10px; }
.post-slideshow .slide-arrow-right { right: 10px; padding: 0 0 3px 2px; }

/* ── Feed & Post Cards ───────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 12px; }
.feed-loading {
  opacity: 0;
  animation: fadeInLoading 0s 400ms forwards;
  padding: 20px;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
}
@keyframes fadeInLoading { to { opacity: 1; } }

.post-card {
  background: rgba(8, 48, 90, 0.78);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.26);
  border-radius: var(--card-radius);
  padding: 20px 24px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.22s cubic-bezier(0.34,1.12,0.64,1);
  box-shadow:
    0 4px 24px rgba(0,15,50,0.32),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(0,60,120,0.18);
  position: relative;
  overflow: hidden;
}
/* Card top shine */
.post-card::before {
  content: '';
  position: absolute;
  top: 0; left: 8px; right: 8px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.55) 30%,
    rgba(255,255,255,0.80) 50%,
    rgba(255,255,255,0.55) 70%,
    transparent);
  z-index: 1;
}
/* Left accent glow (appears on hover) */
.post-card::after {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, transparent, var(--aqua), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.post-card {
  --parallax-y: 0px;
  transform: translateY(var(--parallax-y));
}
.post-card:hover {
  background: rgba(12, 62, 120, 0.68);
  box-shadow:
    0 8px 36px rgba(0,15,50,0.45),
    0 0 0 1px rgba(0,191,255,0.30),
    inset 0 1px 0 rgba(255,255,255,0.52),
    inset 0 -1px 0 rgba(0,80,160,0.20);
  transform: translateY(calc(var(--parallax-y) - 2px));
  border-color: rgba(0,191,255,0.40);
}
.post-card:hover::after { opacity: 1; }
.post-card:active { transform: translateY(var(--parallax-y)); }

.repost-banner {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding-left: 2px;
}

.post-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.post-author-info { flex: 1; min-width: 0; }
.post-display-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,70,120,0.30);
  line-height: 1.2;
}
.post-username { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.post-time { font-size: 11px; color: rgba(255,255,255,0.42); white-space: nowrap; padding-top: 3px; }

.post-body {
  font-size: 15px;
  line-height: 1.70;
  color: #e8f6ff;
  margin-bottom: 12px;
  word-break: break-word;
  padding-left: 54px;
}

.post-image {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  border-radius: 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,0.20);
  cursor: zoom-in;
  transition: transform 0.2s;
}
.post-image:hover { transform: scale(1.01); }

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-left: 54px;
}

.tag-pill {
  padding: 3px 11px;
  background: rgba(0,191,255,0.16);
  border: 1px solid rgba(0,191,255,0.35);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #55CCFF;
  cursor: pointer;
  transition: all 0.18s;
  text-shadow: none;
}
.tag-pill:hover {
  background: rgba(0,191,255,0.30);
  border-color: rgba(0,191,255,0.60);
  box-shadow: 0 0 10px rgba(0,191,255,0.20);
  color: #88DDFF;
}

.post-actions {
  display: flex;
  gap: 5px;
  padding-left: 54px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: rgba(255,255,255,0.52);
  transition: all 0.15s;
  white-space: nowrap;
}
.action-btn:hover {
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.30);
  transform: translateY(-1px);
}
.action-btn:active { transform: translateY(0); }

.action-btn.liked {
  background: rgba(255,70,70,0.18);
  border-color: rgba(255,100,100,0.45);
  color: #FF7070;
  box-shadow: 0 0 12px rgba(255,60,60,0.20);
}
.action-btn.reposted {
  background: rgba(0,210,100,0.16);
  border-color: rgba(0,210,100,0.40);
  color: #44EE88;
  box-shadow: 0 0 12px rgba(0,200,80,0.18);
}
.action-btn.reported {
  background: rgba(255,150,0,0.16);
  border-color: rgba(255,150,0,0.40);
  color: #FFAA44;
}

/* ── Post Detail ─────────────────────────────────────────────── */
.detail-main {
  background: rgba(8, 48, 90, 0.62);
  border: 1px solid rgba(255,255,255,0.26);
  border-radius: var(--card-radius);
  padding: 22px;
  margin-bottom: 12px;
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
}
.detail-body {
  font-size: 24px;
  line-height: 1.55;
  color: var(--text-body);
  margin: 16px 0;
  word-break: break-word;
}
.detail-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.detail-stats {
  display: flex; gap: 24px;
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,0.20);
  border-bottom: 1px solid rgba(255,255,255,0.20);
  margin-bottom: 14px;
}
.detail-stat { font-size: 14px; color: rgba(255,255,255,0.72); }
.detail-stat strong { color: #fff; font-weight: 700; }

/* ── Profile ─────────────────────────────────────────────────── */
.profile-header {
  padding: 0 30px 30px;
  margin-bottom: 16px;
  background: linear-gradient(135deg,
    rgba(0,170,230,0.30),
    rgba(0,90,150,0.20),
    rgba(0,50,100,0.10));
  border-radius: var(--card-radius);
}
.profile-top { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 28px; }
.profile-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.profile-info { flex: 1; min-width: 0; padding-top: 6px; }
.profile-display-name {
  font-size: 26px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 10px rgba(0,80,140,0.38);
  margin-bottom: 6px; letter-spacing: -0.3px;
}
.profile-username { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.profile-bio { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.75; }
.profile-join { font-size: 12px; color: var(--text-muted); margin-top: 12px;
  display: flex; align-items: center; gap: 5px; }

.profile-stats { display: flex; gap: 40px; margin-top: 6px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); }

/* ── Profile tabs ──────────────────────────────────────────────── */
.profile-tab-bar {
  display: flex;
  gap: 4px;
  margin: 12px 0 4px;
  background: rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 4px;
}
.profile-tab {
  flex: 1;
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.profile-tab.active {
  background: rgba(0,180,255,0.18);
  color: #fff;
}
.profile-tab:hover:not(.active) {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.8);
}

/* ── Answer cards ──────────────────────────────────────────────── */
.answer-card {
  padding: 16px 20px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.18s;
}
.answer-card:hover { background: rgba(12,70,130,0.82); }
.answer-question-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--aqua);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.85;
}
.answer-question-text {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 10px;
  line-height: 1.4;
}
.answer-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin-bottom: 10px;
}
.answer-body {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 6px;
}
.answer-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.stat-item { cursor: pointer; transition: transform 0.18s; }
.stat-item:hover { transform: translateY(-1px); }
.stat-item:hover .stat-number { color: var(--aqua); }
.stat-number {
  font-size: 24px; font-weight: 800; color: #fff;
  transition: color 0.18s;
}
.stat-label {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.7px;
}

/* ── Search ──────────────────────────────────────────────────── */
.search-input { flex: 1; font-size: 14px; }

.search-section {
  background: rgba(8, 48, 90, 0.54);
  border: 1px solid rgba(255,255,255,0.26);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
  backdrop-filter: blur(16px);
}
.search-section-title {
  font-size: 13px; font-weight: 700; color: #fff;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}

/* ── Trending Tags ───────────────────────────────────────────── */
.trend-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: all 0.18s;
}
.trend-item:last-child { border-bottom: none; }
.trend-item:hover { transform: translateX(3px); }
.trend-item:hover .trend-name { color: var(--aqua); }
.trend-name {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.88);
  transition: color 0.18s;
}
.trend-count { font-size: 11px; color: var(--text-muted); }

/* ── Suggested Users ─────────────────────────────────────────── */
.suggest-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.suggest-item:last-child { border-bottom: none; }
.suggest-info { flex: 1; min-width: 0; cursor: pointer; }
.suggest-name {
  font-size: 13px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggest-handle { font-size: 11px; color: var(--text-muted); }

/* ── Notifications ───────────────────────────────────────────── */
.notif-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: rgba(8, 48, 90, 0.54);
  border: 1px solid rgba(255,255,255,0.26);
  border-left: 3px solid rgba(0,191,255,0.55);
  border-radius: 14px;
  margin-bottom: 9px;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(16px);
  overflow: hidden;
  position: relative;
}
.notif-item::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.40) 50%, transparent);
}
.notif-item:hover {
  background: rgba(12,60,120,0.68);
  transform: translateX(4px);
  border-left-color: var(--aqua);
  box-shadow: 0 4px 18px rgba(0,15,50,0.30), -2px 0 12px rgba(0,191,255,0.18);
}
.notif-icon { font-size: 20px; flex-shrink: 0; }
.notif-text { flex: 1; font-size: 13px; color: rgba(255,255,255,0.90); line-height: 1.45; }
.notif-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }


/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,30,70,0.52);
  backdrop-filter: blur(14px);
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.active {
  display: flex;
  animation: modal-bg-in 0.22s ease;
  overscroll-behavior: contain;
}
body.modal-open {
  overflow: hidden;
}
@keyframes modal-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-overlay.active .modal-panel {
  animation: modal-panel-in 0.28s cubic-bezier(0.34,1.12,0.64,1);
}
@keyframes modal-panel-in {
  from { opacity: 0; transform: scale(0.93) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-panel { width: 100%; max-width: 560px; padding: 26px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.modal-header h3 {
  font-size: 18px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 6px rgba(0,100,160,0.35);
  letter-spacing: -0.2px;
}

.close-btn {
  width: 32px; height: 32px;
  border: none;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  cursor: pointer;
  color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
.close-btn:hover {
  background: rgba(255,70,70,0.35);
  border-color: rgba(255,100,100,0.50);
  box-shadow: 0 0 12px rgba(255,50,50,0.25);
}

.reply-banner {
  background: rgba(0,191,255,0.12);
  border: 1px solid rgba(0,191,255,0.28);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 6px;
}

/* ── Users Modal List ────────────────────────────────────────── */
.new-dm-panel {
  max-width: 420px;
  width: 100%;
}
.dm-search-results {
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 12px;
}
.users-modal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.users-modal-item:hover { background: rgba(255,255,255,0.08); }
.users-modal-name { font-size: 14px; font-weight: 700; color: #fff; }
.users-modal-handle { font-size: 12px; color: var(--text-muted); }

/* ── Reply compose in detail ─────────────────────────────────── */
.reply-compose {
  padding: 16px 18px;
  margin-bottom: 12px;
}

/* ── Avatar Upload ───────────────────────────────────────────── */
.avatar-upload-wrap {
  display: flex; align-items: center; gap: 16px;
}
.avatar-upload-preview {
  position: relative; cursor: pointer;
  width: 86px; height: 86px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-upload-overlay {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.48);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 0.18s;
}
.avatar-upload-preview:hover .avatar-upload-overlay { opacity: 1; }

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 52px 20px;
  color: var(--text-muted);
}
.empty-icon { margin-bottom: 16px; opacity: 0.65; }
.empty-state p { font-size: 15px; font-weight: 500; }

/* ── Filter Banner ───────────────────────────────────────────── */
.filter-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.80);
  backdrop-filter: blur(14px);
}

/* ── Toast ───────────────────────────────────────────────────── */
.toast-msg {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(8, 48, 90, 0.90);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0,191,255,0.40);
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  box-shadow:
    0 8px 28px rgba(0,20,60,0.40),
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 0 0 1px rgba(0,191,255,0.20);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s cubic-bezier(0.34,1.12,0.64,1);
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
}
.toast-msg.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,200,255,0.45), rgba(0,130,200,0.35));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(0,220,255,0.65), rgba(0,150,220,0.55));
}

/* ── Theme Switcher ──────────────────────────────────────────── */
.theme-switcher {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 4px 6px;
  position: relative; z-index: 1;
}
.theme-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(255,255,255,0.42); flex-shrink: 0;
}
.theme-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.22);
  cursor: pointer;
  transition: all 0.2s;
  padding: 0; flex-shrink: 0;
}
.theme-dot:hover { transform: scale(1.25); border-color: rgba(255,255,255,0.65); }
.theme-dot.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25), 0 0 10px rgba(255,255,255,0.55);
  transform: scale(1.18);
}
.theme-dot-blue  { background: radial-gradient(circle at 35% 35%, #66EEFF, #0077BB); }
.theme-dot-green { background: radial-gradient(circle at 35% 35%, #66FFAA, #007733); }
.theme-dot-purple { background: radial-gradient(circle at 35% 35%, #DD88FF, #6600CC); }
.theme-dot-dark   { background: radial-gradient(circle at 35% 35%, #445566, #0A0F1A); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1060px) { .right-panel { display: none; } }
@media (max-width: 680px) {
  :root { --sidebar-w: 66px; }
  .sidebar-logo-text, .nav-label, .sidebar-user-info,
  .new-post-btn, .sign-out-btn, .theme-label { display: none; }
  .sidebar { padding: 16px 8px; align-items: center; }
  .sidebar-logo { justify-content: center; padding-bottom: 12px; margin-bottom: 6px; }
  .nav-btn { justify-content: center; padding: 12px 8px; }
  .sidebar-user { padding: 8px 4px; }
  .theme-switcher { justify-content: center; padding: 6px 0; }
  .fab {
    display: flex; position: fixed;
    bottom: 24px; right: 24px;
    width: 58px; height: 58px; border-radius: 50%;
    background: linear-gradient(180deg, #3AD5FF 0%, #0080BB 100%);
    align-items: center; justify-content: center; font-size: 26px;
    box-shadow: 0 8px 24px rgba(0,150,220,0.60);
    cursor: pointer; border: none; z-index: 500; color: white;
  }
}

/* ── Reduced Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.1ms !important; }
  .bg-orb, .cloud, .sidebar-glow { animation: none; }
  .logo-orb { animation: none; }
  .notif-badge { animation: none; }
  .shooting-star, .stars-layer, .scanlines { display: none; }
}

/* ================================================================
   THEME: GREEN (Forest Frutiger Aero)
   ================================================================ */
body.theme-green {
  --aqua:         #00FF88;
  --aqua-mid:     #00CC66;
  --aqua-dark:    #004422;
  --teal:         #00EE88;
  --sky-light:    #CCFFE8;
  --sky-mid:      #88DDAA;
  --glass-bg:     rgba(8, 50, 26, 0.48);
  --glass-border: rgba(150, 255, 190, 0.35);
  --glass-shine:  rgba(200, 255, 225, 0.55);
  --glass-inner:  rgba(0, 120, 60, 0.15);
  --text-muted:   rgba(180, 255, 210, 0.72);
  --glow:         rgba(0, 220, 100, 0.45);
  background:
    radial-gradient(ellipse 120% 80% at 80% -10%, #00FF8822 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at -10% 60%, #00AA5518 0%, transparent 50%),
    linear-gradient(160deg,
      #042A12 0%, #075520 12%,
      #0C7030 26%, #159050 40%,
      #18A858 52%, #109040 62%,
      #086A28 74%, #043815 88%,
      #022008 100%);
  background-attachment: fixed;
}
body.theme-green .orb1 { background: radial-gradient(circle, #00FF88 0%, #009944 60%, transparent 100%); }
body.theme-green .orb2 { background: radial-gradient(circle, #88FFD0 0%, #00BB66 60%, transparent 100%); }
body.theme-green .orb3 { background: radial-gradient(circle, #AAFFCC 0%, #44BB88 60%, transparent 100%); }
body.theme-green .orb4 { background: radial-gradient(circle, #DDFAEA 0%, #88DDAA 60%, transparent 100%); }
body.theme-green .orb5 { background: radial-gradient(circle, #BBFFDD 0%, #33BB77 60%, transparent 100%); }
body.theme-green .orb6 { background: radial-gradient(circle, #FFFFFF 0%, #AAFFCC 60%, transparent 100%); }

body.theme-green .sidebar-glow {
  background: radial-gradient(circle, rgba(0,200,100,0.20) 0%, transparent 70%);
}
body.theme-green .logo-orb {
  background: radial-gradient(circle at 30% 28%,
    rgba(255,255,255,0.98) 0%, #88FFCC 22%, #00EE88 45%, #006633 100%);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.55),
    0 0 0 6px rgba(0,255,136,0.22),
    0 0 40px rgba(0,255,136,0.80),
    0 0 80px rgba(0,255,136,0.40),
    inset 0 -6px 12px rgba(0,60,30,0.28),
    inset 0 4px 8px rgba(255,255,255,0.55);
  animation: logo-pulse-green 3.5s ease-in-out infinite;
}
@keyframes logo-pulse-green {
  0%,100% {
    box-shadow:
      0 0 0 3px rgba(255,255,255,0.55),
      0 0 0 6px rgba(0,255,136,0.22),
      0 0 40px rgba(0,255,136,0.80),
      0 0 80px rgba(0,255,136,0.40),
      inset 0 -6px 12px rgba(0,60,30,0.28),
      inset 0 4px 8px rgba(255,255,255,0.55);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(255,255,255,0.65),
      0 0 0 10px rgba(0,255,136,0.15),
      0 0 65px rgba(0,255,136,1.0),
      0 0 120px rgba(0,255,136,0.60),
      inset 0 -6px 12px rgba(0,60,30,0.28),
      inset 0 4px 8px rgba(255,255,255,0.55);
  }
}
body.theme-green .logo-text {
  text-shadow: 0 2px 0 rgba(0,60,30,0.40), 0 0 35px rgba(0,255,136,0.65), 0 0 70px rgba(0,255,136,0.28);
}
body.theme-green .logo-tagline { color: rgba(200, 255, 225, 0.92); }
body.theme-green .tab-bar { background: rgba(0, 120, 60, 0.18); }
body.theme-green .tab-btn { color: rgba(180,255,210,0.82); }
body.theme-green .tab-btn.active { color: var(--aqua-dark); }
body.theme-green .glass-input {
  background: rgba(0, 30, 15, 0.55);
  border-color: rgba(100,220,150,0.32);
}
body.theme-green .glass-input::placeholder { color: rgba(140, 255, 190, 0.40); }
body.theme-green .glass-input:focus {
  background: rgba(0, 45, 22, 0.68);
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(0,255,136,0.20), 0 0 20px rgba(0,255,136,0.10);
}
body.theme-green .glossy-btn.primary {
  background: linear-gradient(180deg, #55FFAA 0%, #00DD66 40%, #009944 75%, #007733 100%);
  text-shadow: 0 1px 2px rgba(0,50,25,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    0 5px 20px rgba(0,200,100,0.48),
    0 0 0 1px rgba(0,180,90,0.30);
}
body.theme-green .glossy-btn.primary:hover {
  background: linear-gradient(180deg, #88FFCC 0%, #22EE77 40%, #00BB55 75%, #009944 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 7px 28px rgba(0,210,100,0.62),
    0 0 0 1px rgba(0,210,100,0.42);
}
body.theme-green .glossy-btn.secondary {
  color: var(--aqua-dark);
  border-color: rgba(0,255,136,0.40);
}
body.theme-green .post-card { background: rgba(6, 45, 22, 0.58); border-color: rgba(80,200,130,0.26); }
body.theme-green .post-card:hover {
  background: rgba(10, 60, 30, 0.72);
  border-color: rgba(0,200,100,0.45);
  box-shadow:
    0 8px 36px rgba(0,10,5,0.45),
    0 0 0 1px rgba(0,200,100,0.35),
    inset 0 1px 0 rgba(255,255,255,0.45);
}
body.theme-green .post-card::after {
  background: linear-gradient(180deg, transparent, var(--aqua), transparent);
}
body.theme-green .action-btn { border-color: rgba(80,220,140,0.28); color: rgba(200,255,225,0.72); }
body.theme-green .action-btn:hover { background: rgba(0,200,100,0.20); color: #fff; border-color: rgba(80,220,140,0.55); }
body.theme-green .action-btn.liked  { background: rgba(0,200,100,0.26); color: #88FFCC; border-color: rgba(0,200,100,0.50); }
body.theme-green .action-btn.reposted { background: rgba(0,180,80,0.24); color: #88FFCC; border-color: rgba(0,180,80,0.48); }
body.theme-green .tag-pill { background: rgba(0,200,100,0.14); border-color: rgba(0,200,100,0.35); color: #44EE99; }
body.theme-green .tag-pill:hover { background: rgba(0,200,100,0.28); border-color: rgba(0,200,100,0.60); color: #88FFCC; }
body.theme-green .nav-btn:hover { background: rgba(0,255,136,0.14); }
body.theme-green .nav-btn.active {
  background: rgba(0,255,136,0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 3px 14px rgba(0,200,100,0.22);
}
body.theme-green .nav-active-bar { background: var(--aqua); box-shadow: 0 0 10px rgba(0,255,136,0.80); }
body.theme-green .nav-btn.active .nav-ico,
body.theme-green .nav-btn:hover  .nav-ico {
  filter: drop-shadow(0 0 6px rgba(0,255,136,0.75)) drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
body.theme-green .new-post-btn {
  background: linear-gradient(180deg, #55FFAA 0%, #00DD66 40%, #009944 75%, #007733 100%);
  box-shadow: 0 5px 20px rgba(0,200,100,0.45);
}
body.theme-green .new-post-btn:hover {
  background: linear-gradient(180deg, #88FFCC 0%, #22EE77 40%, #00BB55 75%, #009944 100%);
}
body.theme-green .notif-badge { background: linear-gradient(135deg, #00FF88, #00AA55); color: #003311; }
body.theme-green .notif-item { border-left-color: rgba(0,200,100,0.55); }
body.theme-green .notif-item:hover { border-left-color: var(--aqua); box-shadow: 0 4px 18px rgba(0,5,2,0.30), -2px 0 12px rgba(0,255,136,0.18); }
body.theme-green .glass-panel {
  box-shadow:
    0 12px 48px rgba(0, 15, 8, 0.42),
    0 2px 8px rgba(0, 80, 40, 0.22),
    inset 0 1px 0 var(--glass-shine),
    inset 0 -1px 0 rgba(0, 80, 40, 0.22),
    inset 1px 0 0 rgba(150,255,190,0.08),
    inset -1px 0 0 rgba(150,255,190,0.06);
}
body.theme-green .glass-panel::after {
  background: linear-gradient(90deg, transparent, rgba(0,200,100,0.30) 50%, transparent);
}
body.theme-green .sign-out-btn { color: rgba(180,255,210,0.68); }
body.theme-green .sign-out-btn:hover { color: #fff; background: rgba(0,255,136,0.12); }
body.theme-green .sidebar-logo { border-bottom-color: rgba(100,255,170,0.25); }
body.theme-green .sidebar-glow {
  background: radial-gradient(circle, rgba(0,255,136,0.20) 0%, transparent 70%);
}

/* ================================================================
   THEME: DARK (Midnight Frutiger)
   ================================================================ */
body.theme-dark {
  --aqua:         #55BBFF;
  --aqua-mid:     #3399DD;
  --aqua-dark:    #0D3A70;
  --teal:         #33AACC;
  --sky-light:    #AACCEE;
  --sky-mid:      #5588AA;
  --glass-bg:     rgba(6, 12, 26, 0.84);
  --glass-border: rgba(255, 255, 255, 0.11);
  --glass-shine:  rgba(255, 255, 255, 0.16);
  --glass-inner:  rgba(30, 60, 120, 0.12);
  --text-muted:   rgba(140, 180, 225, 0.68);
  --glow:         rgba(40, 100, 200, 0.38);
  background:
    radial-gradient(ellipse 120% 80% at 80% -10%, #1133AA12 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at -10% 60%, #0A226610 0%, transparent 50%),
    linear-gradient(160deg,
      #020305 0%, #04060C 20%,
      #06091A 40%, #040816 60%,
      #030610 80%, #020304 100%);
  background-attachment: fixed;
}
body.theme-dark .bg-orb { opacity: 0.18; }
body.theme-dark .orb1 { background: radial-gradient(circle, #1A3066 0%, #0A1535 60%, transparent 100%); }
body.theme-dark .orb2 { background: radial-gradient(circle, #1A3A50 0%, #0A1E2A 60%, transparent 100%); }
body.theme-dark .orb3 { background: radial-gradient(circle, #223566 0%, #111A3A 60%, transparent 100%); }
body.theme-dark .orb4 { background: radial-gradient(circle, #2A3A58 0%, #141E3A 60%, transparent 100%); }
body.theme-dark .orb5 { background: radial-gradient(circle, #183050 0%, #0C1A28 60%, transparent 100%); }
body.theme-dark .orb6 { background: radial-gradient(circle, #AACCEE 0%, #334466 60%, transparent 100%); opacity: 0.10; }
body.theme-dark .cloud { opacity: 0.06; }
body.theme-dark .lens-flare { opacity: 0.18; }
body.theme-dark .lf2 { opacity: 0.08; }
body.theme-dark .logo-orb {
  background: radial-gradient(circle at 30% 28%,
    rgba(100,140,220,0.90) 0%, #2244AA 38%, #080F28 100%);
  box-shadow:
    0 0 0 3px rgba(80,140,255,0.30),
    0 0 0 6px rgba(60,110,220,0.15),
    0 0 40px rgba(60,130,255,0.45),
    0 0 80px rgba(60,130,255,0.20),
    inset 0 -6px 12px rgba(0,0,30,0.55),
    inset 0 4px 8px rgba(100,150,255,0.32);
  animation: logo-pulse-dark 3.5s ease-in-out infinite;
}
@keyframes logo-pulse-dark {
  0%,100% {
    box-shadow:
      0 0 0 3px rgba(80,140,255,0.30),
      0 0 0 6px rgba(60,110,220,0.15),
      0 0 40px rgba(60,130,255,0.45),
      0 0 80px rgba(60,130,255,0.20),
      inset 0 -6px 12px rgba(0,0,30,0.55),
      inset 0 4px 8px rgba(100,150,255,0.32);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(80,140,255,0.40),
      0 0 0 10px rgba(60,110,220,0.10),
      0 0 65px rgba(60,130,255,0.65),
      0 0 120px rgba(60,130,255,0.30),
      inset 0 -6px 12px rgba(0,0,30,0.55),
      inset 0 4px 8px rgba(100,150,255,0.32);
  }
}
body.theme-dark .logo-text {
  text-shadow: 0 2px 0 rgba(0,0,50,0.55), 0 0 35px rgba(80,160,255,0.55), 0 0 70px rgba(80,160,255,0.22);
}
body.theme-dark .logo-tagline { color: rgba(160, 200, 255, 0.82); }
body.theme-dark .tab-bar { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body.theme-dark .tab-btn { color: rgba(160,200,255,0.72); }
body.theme-dark .tab-btn.active { background: rgba(255,255,255,0.10); color: #AACCFF; box-shadow: none; }
body.theme-dark .glass-panel {
  background: var(--glass-bg);
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 12px 48px rgba(0, 0, 30, 0.60),
    0 2px 8px rgba(0, 0, 50, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(50,100,200,0.12),
    inset 1px 0 0 rgba(255,255,255,0.04),
    inset -1px 0 0 rgba(255,255,255,0.03);
}
body.theme-dark .glass-panel::after {
  background: linear-gradient(90deg, transparent, rgba(80,160,255,0.20) 50%, transparent);
}
body.theme-dark .post-card { background: rgba(6,12,26,0.80); border-color: rgba(255,255,255,0.10); }
body.theme-dark .post-card:hover {
  background: rgba(10,20,44,0.88);
  border-color: rgba(60,140,255,0.35);
  box-shadow:
    0 8px 36px rgba(0,0,30,0.55),
    0 0 0 1px rgba(60,140,255,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
body.theme-dark .post-card::after { background: linear-gradient(180deg, transparent, var(--aqua), transparent); }
body.theme-dark .action-btn { border-color: rgba(100,160,255,0.22); color: rgba(180,210,255,0.65); }
body.theme-dark .action-btn:hover { background: rgba(60,140,255,0.18); color: #fff; border-color: rgba(100,160,255,0.48); }
body.theme-dark .action-btn.liked  { background: rgba(255,70,70,0.18); color: #FF7070; border-color: rgba(255,100,100,0.42); }
body.theme-dark .action-btn.reposted { background: rgba(0,200,100,0.14); color: #44EE88; border-color: rgba(0,200,100,0.38); }
body.theme-dark .tag-pill { background: rgba(60,140,255,0.14); border-color: rgba(60,140,255,0.32); color: #88AAFF; }
body.theme-dark .tag-pill:hover { background: rgba(60,140,255,0.26); border-color: rgba(60,140,255,0.55); color: #AACCFF; }
body.theme-dark .nav-btn:hover { background: rgba(255,255,255,0.07); }
body.theme-dark .nav-btn.active {
  background: rgba(60,130,255,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 3px 14px rgba(40,100,200,0.18);
}
body.theme-dark .nav-active-bar { background: var(--aqua); box-shadow: 0 0 10px rgba(80,180,255,0.80); }
body.theme-dark .nav-btn.active .nav-ico,
body.theme-dark .nav-btn:hover  .nav-ico {
  filter: drop-shadow(0 0 6px rgba(80,180,255,0.70)) drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
body.theme-dark .glass-input { background: rgba(4,8,20,0.65); border-color: rgba(255,255,255,0.12); }
body.theme-dark .glass-input::placeholder { color: rgba(120,160,220,0.40); }
body.theme-dark .glass-input:focus {
  background: rgba(8,16,38,0.80);
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(60,140,255,0.18), 0 0 20px rgba(60,140,255,0.10);
}
body.theme-dark .glossy-btn.primary {
  background: linear-gradient(180deg, #5599EE 0%, #2266CC 40%, #1144AA 75%, #0A2E7A 100%);
  box-shadow:
    inset 0 1px 0 rgba(200,220,255,0.30),
    0 5px 20px rgba(40,100,220,0.45),
    0 0 0 1px rgba(60,140,255,0.25);
}
body.theme-dark .glossy-btn.primary:hover {
  background: linear-gradient(180deg, #77AAFF 0%, #3377EE 40%, #1A55CC 75%, #0D3AAA 100%);
  box-shadow:
    inset 0 1px 0 rgba(200,220,255,0.35),
    0 7px 28px rgba(50,120,255,0.58),
    0 0 0 1px rgba(80,160,255,0.38);
}
body.theme-dark .glossy-btn.secondary {
  background: linear-gradient(180deg, rgba(80,120,200,0.35) 0%, rgba(50,80,160,0.22) 100%);
  border-color: rgba(100,160,255,0.28);
  color: #AACCFF;
}
body.theme-dark .new-post-btn {
  background: linear-gradient(180deg, #5599EE 0%, #2266CC 40%, #1144AA 75%, #0A2E7A 100%);
  box-shadow: 0 5px 20px rgba(40,100,220,0.45);
}
body.theme-dark .new-post-btn:hover {
  background: linear-gradient(180deg, #77AAFF 0%, #3377EE 40%, #1A55CC 75%, #0D3AAA 100%);
}
body.theme-dark .notif-badge { background: linear-gradient(135deg, #5577FF, #3344CC); }
body.theme-dark .notif-item { border-left-color: rgba(60,130,255,0.50); }
body.theme-dark .notif-item:hover { border-left-color: var(--aqua); box-shadow: 0 4px 18px rgba(0,0,30,0.40), -2px 0 12px rgba(60,140,255,0.20); }
body.theme-dark .sign-out-btn { color: rgba(140,180,255,0.55); }
body.theme-dark .sign-out-btn:hover { background: rgba(80,140,255,0.12); color: rgba(180,210,255,0.90); }
body.theme-dark .sidebar-logo { border-bottom-color: rgba(100,160,255,0.18); }
body.theme-dark .sidebar-glow {
  background: radial-gradient(circle, rgba(60,130,255,0.16) 0%, transparent 70%);
}
body.theme-dark .compose-textarea { background: rgba(4,8,20,0.60); border-color: rgba(255,255,255,0.12); }
body.theme-dark .compose-textarea:focus {
  background: rgba(8,16,38,0.78);
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(60,140,255,0.16), 0 0 20px rgba(60,140,255,0.08);
}
body.theme-dark .dev-bypass-btn { border-color: rgba(80,140,255,0.45); color: rgba(150,190,255,0.82); }
body.theme-dark .dev-bypass-btn:hover { background: rgba(80,140,255,0.14); color: #AACCFF; box-shadow: 0 0 16px rgba(80,140,255,0.20); }

/* ================================================================
   THEME: PURPLE (Cosmic Aero)
   ================================================================ */
body.theme-purple {
  --aqua:           #CC77FF;
  --aqua-mid:       #AA44EE;
  --aqua-dark:      #550099;
  --teal:           #DD88FF;
  --sky-light:      #EED8FF;
  --sky-mid:        #BB88DD;
  --glass-bg:       rgba(35, 8, 70, 0.48);
  --glass-border:   rgba(200, 130, 255, 0.38);
  --glass-shine:    rgba(230, 180, 255, 0.55);
  --glass-inner:    rgba(120, 0, 200, 0.14);
  --text-muted:     rgba(210, 170, 255, 0.72);
  --glow:           rgba(180, 60, 255, 0.50);
  background:
    radial-gradient(ellipse 120% 80% at 80% -10%, #CC44FF22 0%, transparent 50%),
    radial-gradient(ellipse 80%  60% at -10% 60%, #8800EE18 0%, transparent 50%),
    linear-gradient(160deg,
      #12003A 0%,  #220060 12%,
      #360090 26%, #4A00BB 40%,
      #5500CC 52%, #420099 62%,
      #2D0070 74%, #180040 88%,
      #0A0020 100%);
  background-attachment: fixed;
}

body.theme-purple .orb1 { background: radial-gradient(circle, #EE88FF 0%, #9900DD 60%, transparent 100%); }
body.theme-purple .orb2 { background: radial-gradient(circle, #CC66FF 0%, #7700BB 60%, transparent 100%); }
body.theme-purple .orb3 { background: radial-gradient(circle, #DDAAFF 0%, #9933CC 60%, transparent 100%); }
body.theme-purple .orb4 { background: radial-gradient(circle, #EECCFF 0%, #BB77EE 60%, transparent 100%); }
body.theme-purple .orb5 { background: radial-gradient(circle, #FFAAFF 0%, #CC44BB 60%, transparent 100%); }
body.theme-purple .orb6 { background: radial-gradient(circle, #FFFFFF 0%, #DDAAFF 60%, transparent 100%); }

body.theme-purple .sidebar-glow {
  background: radial-gradient(circle, rgba(180,60,255,0.22) 0%, transparent 70%);
}
body.theme-purple .logo-orb {
  background: radial-gradient(circle at 30% 28%,
    rgba(255,255,255,0.98) 0%, #DDAAFF 22%, #CC55FF 45%, #660099 100%);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.55),
    0 0 0 6px rgba(180,60,255,0.25),
    0 0 40px rgba(180,60,255,0.85),
    0 0 80px rgba(180,60,255,0.45),
    inset 0 -6px 12px rgba(60,0,100,0.30),
    inset 0 4px 8px rgba(255,255,255,0.55);
  animation: logo-pulse-purple 3.5s ease-in-out infinite;
}
@keyframes logo-pulse-purple {
  0%,100% {
    box-shadow:
      0 0 0 3px rgba(255,255,255,0.55),
      0 0 0 6px rgba(180,60,255,0.25),
      0 0 40px rgba(180,60,255,0.85),
      0 0 80px rgba(180,60,255,0.45),
      inset 0 -6px 12px rgba(60,0,100,0.30),
      inset 0 4px 8px rgba(255,255,255,0.55);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(255,255,255,0.65),
      0 0 0 10px rgba(180,60,255,0.18),
      0 0 65px rgba(200,80,255,1.0),
      0 0 120px rgba(180,60,255,0.65),
      inset 0 -6px 12px rgba(60,0,100,0.30),
      inset 0 4px 8px rgba(255,255,255,0.55);
  }
}
body.theme-purple .logo-text {
  text-shadow: 0 2px 0 rgba(50,0,80,0.40), 0 0 35px rgba(200,80,255,0.70), 0 0 70px rgba(180,60,255,0.30);
}
body.theme-purple .logo-tagline { color: rgba(220, 180, 255, 0.92); }
body.theme-purple .tab-bar  { background: rgba(80, 0, 160, 0.20); }
body.theme-purple .tab-btn  { color: rgba(210,170,255,0.82); }
body.theme-purple .tab-btn.active { color: #fff; }
body.theme-purple .glass-input {
  background: rgba(25, 0, 55, 0.55);
  border-color: rgba(160,80,255,0.32);
}
body.theme-purple .glass-input::placeholder { color: rgba(180,120,255,0.40); }
body.theme-purple .glass-input:focus {
  background: rgba(35, 0, 75, 0.70);
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(180,60,255,0.22), 0 0 20px rgba(180,60,255,0.12);
}
body.theme-purple .glossy-btn.primary {
  background: linear-gradient(180deg, #DD88FF 0%, #AA33EE 40%, #7700CC 75%, #550099 100%);
  text-shadow: 0 1px 2px rgba(30,0,60,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    0 5px 20px rgba(160,40,255,0.52),
    0 0 0 1px rgba(140,20,220,0.32);
}
body.theme-purple .glossy-btn.primary:hover {
  background: linear-gradient(180deg, #EEA8FF 0%, #CC55FF 40%, #9922EE 75%, #7700CC 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 7px 28px rgba(180,60,255,0.65),
    0 0 0 1px rgba(180,60,255,0.45);
}
body.theme-purple .glossy-btn.secondary {
  color: #DDAAFF;
  border-color: rgba(180,80,255,0.42);
}
body.theme-purple .post-card { background: rgba(28, 5, 58, 0.58); border-color: rgba(140,60,220,0.28); }
body.theme-purple .post-card:hover {
  background: rgba(42, 8, 85, 0.74);
  border-color: rgba(180,80,255,0.48);
  box-shadow:
    0 8px 36px rgba(10,0,25,0.50),
    0 0 0 1px rgba(180,80,255,0.38),
    inset 0 1px 0 rgba(255,255,255,0.42);
}
body.theme-purple .post-card::after {
  background: linear-gradient(180deg, transparent, var(--aqua), transparent);
}
body.theme-purple .action-btn { border-color: rgba(160,80,255,0.30); color: rgba(210,170,255,0.72); }
body.theme-purple .action-btn:hover { background: rgba(160,60,255,0.22); color: #fff; border-color: rgba(180,100,255,0.58); }
body.theme-purple .action-btn.liked   { color: #FF66BB; border-color: rgba(255,80,160,0.55); }
body.theme-purple .action-btn.reposted { color: #BB88FF; border-color: rgba(160,80,255,0.55); }
body.theme-purple .nav-btn { color: rgba(200,160,255,0.78); }
body.theme-purple .nav-btn:hover { background: rgba(160,60,255,0.16); color: #fff; }
body.theme-purple .nav-btn.active { background: rgba(160,60,255,0.24); color: #fff; }
body.theme-purple .nav-active-bar { background: var(--aqua); box-shadow: 0 0 10px rgba(200,100,255,0.80); }
body.theme-purple .new-post-btn {
  background: linear-gradient(180deg, #DD88FF 0%, #AA33EE 40%, #7700CC 75%, #550099 100%);
  box-shadow: 0 5px 20px rgba(160,40,255,0.48);
}
body.theme-purple .new-post-btn:hover {
  background: linear-gradient(180deg, #EEA8FF 0%, #CC55FF 40%, #9922EE 75%, #7700CC 100%);
}
body.theme-purple .notif-badge { background: linear-gradient(135deg, #FF55BB, #CC1188); }
body.theme-purple .notif-item { border-left-color: rgba(160,80,255,0.50); }
body.theme-purple .notif-item:hover { border-left-color: var(--aqua); box-shadow: 0 4px 18px rgba(20,0,40,0.45), -2px 0 12px rgba(160,80,255,0.25); }
body.theme-purple .sign-out-btn { color: rgba(180,120,255,0.55); }
body.theme-purple .sign-out-btn:hover { background: rgba(160,60,255,0.14); color: rgba(220,180,255,0.90); }
body.theme-purple .sidebar-logo { border-bottom-color: rgba(160,80,255,0.22); }
body.theme-purple .compose-textarea { background: rgba(20,0,45,0.60); border-color: rgba(160,80,255,0.20); }
body.theme-purple .compose-textarea:focus {
  background: rgba(30,0,65,0.78);
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(180,60,255,0.18), 0 0 20px rgba(180,60,255,0.10);
}
body.theme-purple .tag-pill { background: rgba(120,30,200,0.35); border-color: rgba(180,80,255,0.40); color: #DDB8FF; }
body.theme-purple .tag-pill:hover { background: rgba(160,50,255,0.45); border-color: rgba(200,100,255,0.65); }
body.theme-purple .trend-item:hover { background: rgba(140,40,220,0.22); }
body.theme-purple .notif-item { background: rgba(28,5,58,0.55); }
body.theme-purple .msg-bubble.mine   { background: linear-gradient(145deg, #CC77EE 0%, #AA44CC 50%, #881FAA 100%); color: #fff; }
body.theme-green  .msg-bubble.mine   { background: linear-gradient(145deg, #00FF99 0%, #00CC66 50%, #009944 100%); color: #fff; }

/* ================================================================
   CREATOR BADGE
   ================================================================ */
.creator-name {
  background: linear-gradient(90deg, #FFD700 0%, #FFA500 40%, #FFD700 70%, #FFFACD 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: creator-shine 3s linear infinite;
  font-weight: 700;
}

@keyframes creator-shine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.creator-badge {
  display: inline-block;
  margin-left: 4px;
  color: #FFD700;
  font-size: 11px;
  vertical-align: middle;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
  animation: creator-glow 2s ease-in-out infinite alternate;
}
.creator-badge-ico {
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
  object-fit: contain;
}

@keyframes creator-glow {
  from { text-shadow: 0 0 6px rgba(255, 215, 0, 0.6); }
  to   { text-shadow: 0 0 14px rgba(255, 215, 0, 1.0), 0 0 28px rgba(255, 165, 0, 0.5); }
}

/* ================================================================
   VERIFIED BADGE
   ================================================================ */
.verified-badge {
  display: inline-block;
  margin-left: 4px;
  color: #00BFFF;
  font-size: 15px;
  vertical-align: middle;
  text-shadow: 0 0 8px rgba(0, 191, 255, 0.9);
  font-weight: 700;
}

.verified-badge-ico {
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 0 4px rgba(0, 191, 255, 0.8));
}

/* ================================================================
   PROFILE BANNER
   ================================================================ */
.profile-banner {
  height: 148px;
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  background: linear-gradient(135deg, rgba(0,150,220,0.35) 0%, rgba(0,80,140,0.20) 100%);
  margin: 0 -30px 24px -30px;
  width: calc(100% + 60px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.banner-upload-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.banner-upload-preview {
  width: 100%;
  height: 100px;
  border-radius: 10px;
  border: 2px dashed rgba(255,255,255,0.25);
  background: rgba(0,60,120,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s;
  overflow: hidden;
}
.banner-upload-preview:hover { border-color: var(--aqua); }
.banner-upload-hint {
  color: rgba(255,255,255,0.45);
  font-size: 13px;
}

/* ================================================================
   POLL — COMPOSE
   ================================================================ */
.poll-compose-area {
  margin-top: 10px;
  background: rgba(0,60,120,0.22);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 12px;
}
.poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.poll-option-input {
  width: 100%;
  font-size: 13px !important;
  padding: 7px 12px !important;
}

.poll-toggle-btn {
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px !important;
  opacity: 0.75;
  transition: opacity 0.2s;
  box-shadow: none !important;
}
.poll-toggle-btn:hover { opacity: 1; }

/* ================================================================
   POLL — DISPLAY
   ================================================================ */
.poll-block {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.poll-option {
  position: relative;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  overflow: hidden;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,60,120,0.22);
  transition: border-color 0.2s, background 0.2s;
}
.poll-option.voteable {
  cursor: pointer;
}
.poll-option.voteable:hover {
  border-color: var(--aqua);
  background: rgba(0,100,160,0.35);
}
.poll-option.voted {
  cursor: pointer;
}
.poll-option.voted:hover {
  border-color: var(--aqua);
  opacity: 0.85;
}
.poll-option.selected-vote {
  border-color: var(--aqua) !important;
  background: rgba(0,120,200,0.25);
}
.poll-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(0,191,255,0.30) 0%, rgba(0,150,220,0.15) 100%);
  border-radius: 10px;
  transition: width 0.5s ease;
  pointer-events: none;
}
.poll-opt-label {
  position: relative;
  z-index: 1;
  font-size: 14px;
  flex: 1;
}
.poll-pct {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.80);
}
.poll-meta {
  font-size: 11px;
  color: var(--text-muted);
  padding-left: 4px;
}

/* ================================================================
   QUOTE EMBED
   ================================================================ */
.quote-embed {
  margin: 10px 0;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(0,60,120,0.28);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.quote-embed:hover {
  border-color: var(--aqua);
  background: rgba(0,80,140,0.40);
}
.quote-embed-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.quote-embed-name {
  font-size: 13px;
  font-weight: 600;
}
.quote-embed-handle {
  font-size: 12px;
  color: var(--text-muted);
}
.quote-embed-body {
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  white-space: pre-wrap;
  word-break: break-word;
}

/* In compose modal */
.quote-embed-preview {
  margin-top: 8px;
  border: 1px dashed rgba(0,191,255,0.45);
  border-radius: 10px;
  padding: 8px 12px;
  background: rgba(0,60,120,0.20);
  font-size: 13px;
  color: var(--text-muted);
}

/* Tiny avatar for quote embed header */
.avatar-orb.tiny {
  width: 18px; height: 18px;
  font-size: 9px;
  flex-shrink: 0;
}

/* ================================================================
   PIN
   ================================================================ */
.repost-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 16px 8px;
}
.repost-label-name {
  color: var(--text-secondary);
  cursor: pointer;
}
.repost-label-name:hover { text-decoration: underline; }

.reply-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 16px 12px;
}
.reply-label-name {
  color: var(--accent);
  cursor: pointer;
}
.reply-label-name:hover { text-decoration: underline; }
.post-card.is-reply { border-left: 2px solid rgba(58, 213, 255, 0.35); }
.pin-banner {
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin: -2px -2px 8px -2px;
}
.pin-indicator {
  font-size: 11px;
  color: var(--text-muted);
}

/* ================================================================
   REPOST MENU
   ================================================================ */
.repost-menu {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.40);
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.repost-menu button {
  background: transparent;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.repost-menu button:hover {
  background: rgba(255,255,255,0.14);
}

/* ================================================================
   MESSAGES VIEW
   ================================================================ */
.messages-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  padding: 16px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.conversations-panel {
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.thread-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.thread-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Conversation list item */
.convo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.convo-item:hover { background: rgba(255,255,255,0.10); }
.convo-item.active { background: rgba(255,255,255,0.15); }
.convo-info { flex: 1; min-width: 0; }
.convo-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.convo-preview {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.convo-unread {
  background: linear-gradient(135deg, #FF5555, #CC1111);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 8px rgba(255,50,50,0.45);
  flex-shrink: 0;
}

/* Thread */
.thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.thread-user-name { font-size: 15px; font-weight: 600; }
.thread-user-handle { font-size: 12px; color: var(--text-muted); }
.thread-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.thread-compose {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.thread-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ── Typing indicator ──────────────────────────────────────────── */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  height: 18px;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aqua);
  animation: typing-bounce 1.2s infinite ease-in-out;
  opacity: 0.7;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%            { transform: translateY(-5px); opacity: 1; }
}

/* ── Feed sentinel (infinite scroll) ──────────────────────────── */
.feed-sentinel { height: 40px; }
.dm-input {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  font-size: 14px !important;
}

/* Message bubbles — sticky note style */
.msg-bubble-wrap {
  display: flex;
}
.msg-bubble-wrap.mine  { justify-content: flex-end; }
.msg-bubble-wrap.theirs { justify-content: flex-start; }

.msg-bubble {
  max-width: 72%;
  border-radius: 18px;
  padding: 10px 14px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
.msg-bubble.mine {
  background: linear-gradient(145deg, #00DEFF 0%, #00A8E8 45%, #007ACC 100%);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  text-shadow: 0 1px 2px rgba(0,60,120,0.3);
}
.msg-bubble.theirs {
  background: rgba(255,255,255,0.13);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.93);
  border-radius: 18px 18px 18px 4px;
}
.msg-content {
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-time {
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
  text-align: right;
}

/* ── DM attach buttons ───────────────────────────────────────── */
.dm-attach-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 6px;
  opacity: 0.65;
  transition: opacity 0.15s;
  flex-shrink: 0;
  touch-action: manipulation;
}
.dm-attach-btn:hover { opacity: 1; }

/* ── Reply banner ────────────────────────────────────────────── */
.dm-reply-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0,191,255,0.10);
  border-left: 3px solid var(--aqua);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}
.dm-reply-label em { color: rgba(255,255,255,0.6); font-style: normal; }
.dm-reply-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.5); font-size: 14px; margin-left: auto;
  touch-action: manipulation;
}
.dm-reply-close:hover { color: #fff; }

/* ── Media preview in compose ────────────────────────────────── */
.dm-media-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.dm-media-thumb {
  max-height: 80px;
  max-width: 140px;
  border-radius: 8px;
  object-fit: cover;
}

/* ── Reply preview inside bubble ─────────────────────────────── */
.msg-reply-preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-left: 3px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  background: rgba(0,0,0,0.18);
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 11px;
  max-width: 100%;
  overflow: hidden;
}
.msg-reply-preview:hover { background: rgba(0,0,0,0.28); }
.msg-reply-author { color: rgba(255,255,255,0.9); font-weight: 700; }
.msg-reply-text { color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Message highlight (scroll-to) ──────────────────────────── */
.msg-highlight .msg-bubble {
  outline: 2px solid var(--aqua);
  transition: outline 0.1s;
}

/* ── Media inside bubble ─────────────────────────────────────── */
.dm-media-img {
  max-width: 260px;
  max-height: 220px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  margin-bottom: 4px;
  cursor: pointer;
}

/* ── Links inside DMs ────────────────────────────────────────── */
.dm-link { color: var(--aqua); text-decoration: underline; word-break: break-all; }
.dm-link:hover { opacity: 0.8; }

/* ── Link preview card ───────────────────────────────────────── */
.link-preview-card {
  margin-top: 6px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,30,60,0.6);
  max-width: 280px;
}
.lp-inner { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.lp-img { width: 100%; max-height: 140px; object-fit: cover; }
.lp-text { padding: 8px 10px; }
.lp-site { font-size: 10px; color: var(--aqua); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.lp-title { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 2px; line-height: 1.3; }
.lp-desc { font-size: 11px; color: rgba(255,255,255,0.55); line-height: 1.4; }
.lp-loading { padding: 10px; font-size: 11px; color: rgba(255,255,255,0.4); }

/* ── Reaction pills ──────────────────────────────────────────── */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  padding: 0 4px;
}
.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  touch-action: manipulation;
}
.reaction-pill:hover, .reaction-pill.mine { background: rgba(0,191,255,0.18); border-color: var(--aqua); }
.reaction-count { font-size: 11px; color: rgba(255,255,255,0.7); }

/* ── Reaction / reply action row ─────────────────────────────── */
.msg-action-row {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  margin-top: 2px;
  padding: 0 2px;
}
.msg-bubble-wrap:hover .msg-action-row { opacity: 1; }
.msg-react-btn, .msg-reply-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  transition: background 0.15s, color 0.15s;
  touch-action: manipulation;
}
.msg-react-btn:hover, .msg-reply-btn:hover { background: rgba(0,191,255,0.15); color: #fff; }

/* ── Reaction picker popup ───────────────────────────────────── */
.dm-reaction-picker {
  position: fixed;
  display: flex;
  gap: 4px;
  background: rgba(8,40,80,0.95);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  padding: 6px 10px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 9999;
}
.reaction-pick-btn {
  background: none; border: none; font-size: 22px; cursor: pointer;
  padding: 4px; border-radius: 50%; transition: background 0.1s;
  touch-action: manipulation;
}
.reaction-pick-btn:hover { background: rgba(255,255,255,0.12); }

/* ── Load more button ────────────────────────────────────────── */
.load-more-btn {
  display: block;
  margin: 0 auto 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 6px 18px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.15s;
  touch-action: manipulation;
}
.load-more-btn:hover { background: rgba(0,191,255,0.15); color: #fff; }

/* ================================================================
   ADMIN PANEL
   ================================================================ */
.admin-stats-bar {
  display: flex;
  gap: 0;
  margin: 12px 16px 0;
  padding: 14px 20px;
  border-radius: 12px;
}
.admin-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.admin-stat + .admin-stat {
  border-left: 1px solid var(--border);
}
.admin-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.admin-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-tab-bar {
  display: flex;
  gap: 4px;
}
.admin-report-card {
  margin: 16px;
  padding: 16px;
}
.admin-report-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.admin-report-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.admin-users-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.admin-user-info { flex: 1; cursor: pointer; }
.admin-user-name { font-size: 14px; font-weight: 600; }
.admin-user-handle { font-size: 12px; color: var(--text-muted); }
.admin-user-badges { display: flex; gap: 6px; align-items: center; }
.admin-user-actions { display: flex; gap: 8px; }

.admin-nav-btn { margin-top: 6px; }
.admin-act { font-size: 14px !important; }
.danger-act { font-size: 14px !important; opacity: 0.55; }
.danger-act:hover { opacity: 1; color: #ff4d4d !important; }

.banned-label {
  display: inline-block;
  background: rgba(200,30,30,0.35);
  color: #FF8888;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 7px;
  margin-left: 6px;
}

/* ================================================================
   DAILY PROMPT BANNER
   ================================================================ */
@keyframes prompt-pulse {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(0, 180, 255, 0.35); border-color: rgba(0, 180, 255, 0.75); }
  50%       { box-shadow: 0 0 22px 6px rgba(0, 200, 255, 0.65); border-color: rgba(0, 220, 255, 1.00); }
}
.prompt-banner {
  margin: 0 0 12px;
}
.prompt-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(0, 100, 210, 0.82);
  border: 1px solid rgba(0, 180, 255, 0.75);
  border-radius: 16px;
  padding: 14px 18px;
  backdrop-filter: blur(4px);
  animation: prompt-pulse 2.8s ease-in-out infinite;
  transition: background 0.18s;
}
.prompt-banner-inner:hover {
  background: rgba(0, 120, 230, 0.90);
  border-color: rgba(0, 210, 255, 0.90);
}
.prompt-detail-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--aqua);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  opacity: 0.85;
}
.prompt-reply-count {
  font-weight: 500;
  color: rgba(0,220,255,0.7);
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  margin-left: 6px;
}
.prompt-icon { flex-shrink: 0; opacity: 0.85; }
.prompt-body { flex: 1; }
.prompt-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.prompt-timer-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(0, 220, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.prompt-timer {
  font-size: 15px;
  font-weight: 700;
  color: var(--aqua);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(0, 200, 255, 0.5);
}
.prompt-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--aqua);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 3px;
}
.prompt-text {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

/* ── Prompt answer clusters ────────────────────────────────────── */
.prompt-clusters {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}
.prompt-cluster-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 5px 10px;
  overflow: hidden;
  min-height: 26px;
}
.prompt-cluster-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(0,191,255,0.25), rgba(0,130,200,0.12));
  border-radius: 8px;
  transition: width 0.6s ease;
  pointer-events: none;
}
.prompt-cluster-label {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: rgba(255,255,255,0.9);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prompt-cluster-pct {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--aqua);
  flex-shrink: 0;
}

/* ── Admin prompt controls ─────────────────────────────────────── */
.admin-prompt-wrap {
  margin: 16px 16px 0;
  padding: 16px 18px;
  border-radius: 14px;
}
.admin-prompt-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--aqua);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-prompt-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ── Bookmarks ─────────────────────────────────────────────────── */
.action-btn.bookmarked {
  background: rgba(255, 215, 0, 0.18);
  border-color: rgba(255, 215, 0, 0.4);
  color: #FFD700;
}

/* ── Streak ────────────────────────────────────────────────────── */
.profile-streak {
  font-size: 12px;
  color: #FF9944;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-weight: 600;
}

/* ── Read Receipts ─────────────────────────────────────────────── */
.msg-receipt {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  margin-left: 5px;
}
.msg-receipt.read { color: var(--aqua); }

/* ================================================================
   COMMUNITIES
   ================================================================ */
#communities-list {
  padding-top: 4px;
}

.communities-search-wrap {
  padding: 8px 0 4px;
}
.communities-search-wrap .glass-input {
  width: 100%;
  font-size: 14px;
}

.community-card {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 6px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}
.community-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.18); }

.community-color-strip {
  width: 5px;
  align-self: stretch;
  flex-shrink: 0;
  border-radius: 0;
}
.community-card-body {
  flex: 1;
  padding: 14px 16px;
  min-width: 0;
}
.community-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}
.community-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.community-card-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.community-join-btn { margin-right: 14px; flex-shrink: 0; }

.community-page-header {
  margin-bottom: 0;
  padding: 24px 28px 20px;
  border-radius: 16px 16px 0 0;
}
.community-page-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}
.community-page-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.community-page-meta {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.community-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.community-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(200,240,255,0.85);
  background: rgba(0,180,255,0.10);
  border: 1px solid #1AA0D0;
  border-radius: 20px;
  padding: 2px 9px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.community-tag:hover { background: rgba(0,180,255,0.20); }

.community-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 2px;
}

.community-select-btn {
  appearance: none;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 20px;
  color: rgba(200,240,255,0.85);
  font-size: 12px;
  font-family: inherit;
  padding: 4px 10px;
  cursor: pointer;
  max-width: 120px;
  outline: none;
  transition: background 0.15s;
}
.community-select-btn:focus { border-color: var(--accent); background: rgba(255,255,255,0.18); }
.community-select-btn option { background: #0a3a5c; color: #fff; }

.community-color-picker {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.color-pick-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  padding: 0;
}
.color-pick-btn:hover { transform: scale(1.15); }
.color-pick-btn.active { border-color: #fff; transform: scale(1.12); }

/* ================================================================
   MEGA ALERT BANNER
   ================================================================ */
.mega-alert-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: linear-gradient(90deg, #7a0000 0%, #cc1a00 50%, #7a0000 100%);
  border-bottom: 2px solid rgba(255,80,80,0.8);
  box-shadow: 0 4px 32px rgba(255,0,0,0.45);
  animation: mega-alert-pulse 1.2s ease-in-out infinite;
}
.mega-alert-banner.active { display: block; }

@keyframes mega-alert-pulse {
  0%,100% { box-shadow: 0 4px 32px rgba(255,0,0,0.45); }
  50%      { box-shadow: 0 4px 48px rgba(255,80,0,0.75); }
}

.mega-alert-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  max-width: 900px;
  margin: 0 auto;
}
.mega-alert-icon { flex-shrink: 0; opacity: 0.9; }
.mega-alert-text { flex: 1; }
.mega-alert-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}
.mega-alert-msg {
  font-size: 13px;
  color: rgba(255,220,220,0.9);
  margin-top: 2px;
}
.mega-alert-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.mega-alert-close {
  background: none;
  border: none;
  color: rgba(255,220,220,0.7);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.mega-alert-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* ================================================================
   REPORT MODAL
   ================================================================ */
.report-modal-panel {
  width: 100%;
  max-width: 360px;
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.report-modal-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}
.report-modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.report-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.report-reason-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.report-reason-btn:hover {
  background: rgba(255,100,100,0.14);
  border-color: rgba(255,100,100,0.35);
}
.report-cancel-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 0;
  align-self: center;
  margin-top: 4px;
}
.report-cancel-btn:hover { color: var(--text-primary); }

.report-reason-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.report-reason-tag {
  background: rgba(255,120,0,0.15);
  border: 1px solid rgba(255,120,0,0.3);
  border-radius: 8px;
  color: #FFB060;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
}

/* ── Avatar Crop Area (mirrors banner) ───────────────────────── */
.avatar-crop-area {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  border-radius: 10px;
  border: 1.5px dashed rgba(0, 191, 255, 0.45);
  background: rgba(0, 60, 120, 0.35) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.avatar-crop-area:active { cursor: grabbing; }
.avatar-crop-ring {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.65);
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.40);
}
.avatar-crop-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.58);
  color: rgba(255,255,255,0.90);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.avatar-crop-area:hover .avatar-crop-hint { opacity: 1; }

/* ================================================================
   DRAG-TO-REPOSITION CROP
   ================================================================ */

/* Avatar preview when showing an image for repositioning */
.avatar-orb.large[style*="backgroundImage"],
#edit-avatar-preview[style*="background-image"] {
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.crop-hint {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.58);
  color: rgba(255,255,255,0.90);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

#edit-avatar-preview:hover .crop-hint,
#edit-banner-preview:hover .banner-upload-hint {
  opacity: 1;
}

/* Make sure the avatar orb can display background images in drag mode */
#edit-avatar-preview {
  position: relative;
  overflow: hidden;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Banner upload hint doubles as drag hint */
.banner-upload-preview {
  position: relative;
}
.banner-upload-hint {
  pointer-events: none;
  transition: opacity 0.2s;
}

/* ================================================================
   NEW FEATURES — Reactions · Views · Badges · GIF · Follows You
   ================================================================ */

/* ── Reaction Picker ──────────────────────────────────────────── */
.reaction-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.action-btn.reacted {
  color: #6bdfff;
  background: rgba(0, 200, 255, 0.18);
  border-color: rgba(0, 200, 255, 0.35);
}

.action-btn.reacted-down {
  color: #ff7b7b;
  background: rgba(255, 80, 80, 0.15);
  border-color: rgba(255, 80, 80, 0.30);
}

.reaction-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  background: rgba(8, 40, 80, 0.92);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 40px;
  padding: 6px 10px;
  display: flex;
  gap: 4px;
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reaction-picker.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

.reaction-emoji {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px 3px;
  border-radius: 50%;
  transition: transform 0.12s ease, background 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reaction-emoji:hover {
  transform: scale(1.35) translateY(-4px);
  background: rgba(255,255,255,0.12);
}

.reaction-emoji.active {
  background: rgba(255, 107, 157, 0.25);
}

/* Reaction breakdown in detail view */
.reaction-breakdown {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 8px;
}

.reaction-tally {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ── View Count ────────────────────────────────────────────────── */
.view-count {
  font-size: 11px;
  color: rgba(255,255,255,0.32);
  margin-left: 5px;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  vertical-align: middle;
}

/* ── Profile Badges ────────────────────────────────────────────── */
.badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 3px 10px 3px 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  cursor: default;
  transition: background 0.15s ease, transform 0.12s ease;
}

.badge-chip:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.badge-ico { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.badge-label { letter-spacing: 0.02em; }

/* ── Follows You Tag ──────────────────────────────────────────── */
.follows-you-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(180, 220, 255, 0.75);
  background: rgba(0, 140, 200, 0.20);
  border: 1px solid rgba(0, 180, 255, 0.25);
  border-radius: 6px;
  padding: 1px 6px;
  vertical-align: middle;
  margin-left: 6px;
}

/* ── GIF in Posts ──────────────────────────────────────────────── */
.post-gif {
  display: block;
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
  border-radius: 12px;
  margin-top: 10px;
  object-fit: contain;
}

/* ── GIF Picker Modal ──────────────────────────────────────────── */
.gif-modal-panel {
  max-width: 520px;
  width: 95vw;
}

.gif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.gif-grid::-webkit-scrollbar { width: 5px; }
.gif-grid::-webkit-scrollbar-track { background: transparent; }
.gif-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }

.gif-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
  border: 2px solid transparent;
}

.gif-thumb:hover {
  transform: scale(1.04);
  border-color: rgba(0, 200, 255, 0.6);
}

.gif-preview-img {
  max-height: 160px;
  max-width: 100%;
  border-radius: 10px;
  object-fit: contain;
  display: block;
}

.gif-attribution {
  font-size: 10px;
  color: rgba(255,255,255,0.30);
  text-align: right;
  margin-top: 8px;
  font-style: italic;
}

/* GIF button in compose toolbar */
.photo-attach-btn.gif-btn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0, 180, 255, 0.15);
  border: 1px solid rgba(0, 200, 255, 0.30);
  color: rgba(0, 220, 255, 0.9);
}


/* ── Footer / Legal Links ─────────────────────────────────────── */
.auth-footer-link,
.footer-link {
  color: rgba(180, 220, 255, 0.6);
  text-decoration: none;
  transition: color 0.15s ease;
}
.auth-footer-link:hover,
.footer-link:hover {
  color: rgba(180, 220, 255, 1);
  text-decoration: underline;
}

/* ================================================================
   MOBILE / PHONE LAYOUT  (≤ 520px)
   ================================================================ */

/* Base: hide mobile-only chrome at all sizes */
.mobile-bottom-nav { display: none; }
.fab-mobile        { display: none; }
.mobile-back-btn   { display: none; }

@media (max-width: 520px) {

  /* ── Global spacing ─────────────────────────────────────────── */
  #app-screen {
    padding: 0 !important;
    gap: 0 !important;
  }

  /* ── Hide desktop sidebar and right panel ───────────────────── */
  .sidebar      { display: none !important; }
  .right-panel  { display: none !important; }

  /* ── Main content takes full width ─────────────────────────── */
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

  /* ── View headers ───────────────────────────────────────────── */
  .view-header {
    border-radius: 0 !important;
    padding: 12px 14px !important;
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .view-header h2 { font-size: 16px; }

  /* ── Post / feed cards ──────────────────────────────────────── */
  .post-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    padding: 12px 14px !important;
  }

  /* ── Compose row ────────────────────────────────────────────── */
  .home-compose-row {
    border-radius: 0 !important;
    padding: 10px 14px !important;
  }

  /* ── Messages layout: show one panel at a time ──────────────── */
  .messages-layout {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .conversations-panel {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  .thread-panel {
    display: none !important;
    position: static !important;
  }

  /* Thread covers full screen on mobile when open */
  .messages-layout.mobile-thread-open .thread-panel {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 300 !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    background: rgba(6, 35, 70, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    overflow: hidden;
  }

  .messages-layout.mobile-thread-open .thread-panel .thread-compose {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  /* Hide FAB when thread is open so it doesn't overlap send button */
  .messages-layout.mobile-thread-open ~ #fab-mobile,
  body:has(.messages-layout.mobile-thread-open) #fab-mobile {
    display: none !important;
  }

  .messages-layout.mobile-thread-open .conversations-panel {
    display: none !important;
  }

  /* Mobile back button inside thread header */
  .mobile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--aqua);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-right: 8px;
  }

  /* ── Modals: bottom sheet, absolutely positioned so iOS scrolls ─ */
  .modal-overlay {
    display: none !important;
    padding: 0 !important;
  }
  .modal-overlay.active {
    display: block !important;
  }
  .modal-panel {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 88svh !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom)) !important;
  }


  /* ── Glass panels inside views ──────────────────────────────── */
  .glass-panel.card-panel {
    border-radius: 0 !important;
  }

  /* ── Profile header ─────────────────────────────────────────── */
  .profile-header-card {
    border-radius: 0 !important;
  }

  .profile-header {
    padding: 0 16px 20px !important;
  }

  .profile-banner {
    margin: 0 -16px 16px -16px !important;
    width: calc(100% + 32px) !important;
    height: 120px !important;
  }

  .profile-top {
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    align-items: flex-start !important;
  }

  .profile-top .profile-info {
    order: 3;
    flex-basis: 100% !important;
    padding-top: 0 !important;
  }

  .profile-top .avatar-orb {
    order: 1;
  }

  .profile-actions {
    order: 2;
    margin-left: auto;
    align-items: flex-end !important;
  }

  .profile-actions .glossy-btn {
    min-width: 110px;
  }

  .profile-display-name {
    font-size: 20px !important;
  }

  .profile-stats {
    gap: 24px !important;
    flex-wrap: wrap !important;
  }

  .stat-number {
    font-size: 20px !important;
  }

  /* ── Bottom navigation bar ──────────────────────────────────── */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: rgba(8, 40, 80, 0.88);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-top: 1px solid rgba(255,255,255,0.14);
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(56px + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: stretch;
  }

  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    color: rgba(180,220,255,0.55);
    position: relative;
    transition: color 0.15s ease;
  }

  .mobile-nav-btn.active {
    color: #fff;
  }
  .mobile-nav-btn.active .mnav-ico {
    filter: drop-shadow(0 0 5px rgba(0,200,255,0.7));
  }

  .mnav-ico {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.75;
    transition: opacity 0.15s ease;
  }
  .mobile-nav-btn.active .mnav-ico { opacity: 1; }

  .mnav-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  .mnav-badge {
    position: absolute;
    top: 4px;
    right: 50%;
    transform: translateX(14px);
    min-width: 16px;
    height: 16px;
    font-size: 9px;
  }

  /* ── Floating action button ─────────────────────────────────── */
  .fab-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: calc(68px + env(safe-area-inset-bottom));
    right: 18px;
    z-index: 190;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00BFFF 0%, #0080CC 100%);
    border: 2px solid rgba(255,255,255,0.35);
    box-shadow:
      0 4px 20px rgba(0,180,255,0.55),
      0 2px 6px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(255,255,255,0.35);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .fab-mobile:active {
    transform: scale(0.93);
    box-shadow: 0 2px 10px rgba(0,180,255,0.4);
  }

  /* ── Reduce community card radius ───────────────────────────── */
  .community-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* ── View header with back button on narrow screens ─────────── */
  .community-page-header {
    border-radius: 0 !important;
    padding: 12px 14px !important;
  }

  /* ── Prevent iOS auto-zoom on input focus (needs 16px min) ──── */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* ── Remove 300ms tap delay on all interactive elements ─────── */
  a, button, [role="button"], label, select, input, textarea,
  .post-card, .action-btn, .glossy-btn, .nav-btn, .mobile-nav-btn,
  .glass-panel, .community-card, .avatar-orb {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Minimum 44px tap targets for post action buttons ───────── */
  .action-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── Compose row: larger textarea and submit on mobile ──────── */
  .compose-textarea {
    font-size: 16px !important;
  }

  /* ── Stop backdrop blur jank on scroll ──────────────────────── */
  .post-card, .glass-panel {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* ── Post images fill width on mobile ───────────────────────── */
  .post-image {
    width: 100% !important;
    max-height: 360px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* ── Explorer / search bar: full width ─────────────────────── */
  .search-bar, .glass-input {
    font-size: 16px !important;
  }

  /* ── Admin report cards on mobile ───────────────────────────── */
  .admin-report-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ================================================================
   @ Mentions
   ================================================================ */

.mention {
  color: var(--aqua);
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--transition-fast);
}
.mention:hover {
  background: rgba(0, 191, 255, 0.15);
}

.mention-dropdown {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.mention-item:hover {
  background: rgba(0, 191, 255, 0.12);
}
.mention-name {
  color: var(--text-white);
  font-weight: 600;
  font-size: 14px;
}
.mention-handle {
  color: var(--text-muted);
  font-size: 13px;
}