body { font-family: 'Inter', sans-serif; }
  #noticeTrack::-webkit-scrollbar { display: none; }

  /* ====== Efek Aksesoris (lebih mencolok + premium) ====== */
  .card-inner { position: relative; z-index: 2; } /* konten selalu di atas efek */
  .badge-acc { font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; }

  /* elemen kartu yang punya aksesoris wajib relatif */
  .acc-glow, .acc-rainbow, .acc-sparkle,
  .acc-aurora, .acc-cyber, .acc-glass, .acc-firefly { position: relative; overflow: hidden; border-radius: 16px; }

  /* =========================
     1) GLOW BIRU: NEON JELAS
     ========================= */
  .acc-glow{
    border: 2px solid rgba(59,130,246,.60); /* garis tegas */
    box-shadow:
      0 0 0 2px rgba(59,130,246,.22) inset,
      0 0 24px rgba(59,130,246,.62),
      0 0 52px rgba(59,130,246,.38),
      0 18px 80px rgba(59,130,246,.28);
    transform: translateZ(0);
  }

  /* neon tube sweep di pinggir */
  .acc-glow::before{
    content:"";
    position:absolute; inset:-6px;
    border-radius: 22px;
    background:
      linear-gradient(90deg,
        rgba(147,197,253,0) 0%,
        rgba(147,197,253,.95) 25%,
        rgba(59,130,246,.98) 50%,
        rgba(147,197,253,.95) 75%,
        rgba(147,197,253,0) 100%
      );
    filter: blur(12px);
    opacity: .95;
    animation: neonSweep 1.8s ease-in-out infinite;
    pointer-events:none;
    z-index: 1;
  }

  /* inti glow di dalam */
  .acc-glow::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 30% 18%, rgba(147,197,253,.52), transparent 46%),
      radial-gradient(circle at 70% 85%, rgba(59,130,246,.50), transparent 55%);
    mix-blend-mode: screen;
    opacity: .90;
    pointer-events:none;
    z-index: 1;
  }

  @keyframes neonSweep{
    0%,100%{ transform: translateX(-14%); }
    50%{ transform: translateX(14%); }
  }

  /* =========================================
     2) RAINBOW: ELEGAN (TIDAK MUTER)
     border gradient + shimmer halus
     ========================================= */
  .acc-rainbow{
    border: 2px solid transparent;
    background:
      linear-gradient(#fff,#fff) padding-box,
      linear-gradient(90deg,
        #ff4d4d, #ffcc00, #4dff88, #4dd2ff, #b84dff, #ff4da6
      ) border-box;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.55) inset,
      0 12px 44px rgba(0,0,0,.07);
  }

  /* shimmer: jalan lembut, bukan muter */
  .acc-rainbow::before{
    content:"";
    position:absolute; inset:-10%;
    background: linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.70) 35%,
      rgba(255,255,255,0) 70%
    );
    transform: translateX(-130%);
    animation: rbShimmer 2.7s ease-in-out infinite;
    mix-blend-mode: overlay;
    pointer-events:none;
    z-index: 1;
  }

  /* glow tipis biar premium */
  .acc-rainbow::after{
    content:"";
    position:absolute; inset:-6px;
    background: linear-gradient(90deg,
      rgba(255,77,77,.32),
      rgba(255,204,0,.28),
      rgba(77,255,136,.25),
      rgba(77,210,255,.28),
      rgba(184,77,255,.28),
      rgba(255,77,166,.30)
    );
    filter: blur(16px);
    opacity: .45;
    pointer-events:none;
    z-index: 1;
  }

  /* ======================================
   ✅ DARK MODE OVERRIDE: RAINBOW PREMIUM
   ====================================== */
  .dark .acc-rainbow{
    border: 2px solid transparent !important;
    background:
      linear-gradient(rgba(15,23,42,.92), rgba(15,23,42,.92)) padding-box,
      linear-gradient(90deg,
        rgba(255, 85, 85, .95),
        rgba(255, 205, 80, .95),
        rgba(110, 255, 170, .95),
        rgba(120, 220, 255, .95),
        rgba(190, 140, 255, .95),
        rgba(255, 120, 210, .95)
      ) border-box !important;

    box-shadow:
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 10px 38px rgba(0,0,0,.45) !important;
  }
  .dark .acc-rainbow::before{ opacity: .22 !important; filter: blur(0.5px); }
  .dark .acc-rainbow::after{ opacity: .28 !important; filter: blur(18px) saturate(1.2); }
  .dark .acc-rainbow.bg-white{ background-color: transparent !important; }

  /* ======================================
     ✅ DARK MODE OVERRIDE: BLUE GLOW PREMIUM
     ====================================== */
  .dark .acc-glow{
    border: 2px solid rgba(59,130,246,.72) !important;
    background-color: rgba(15,23,42,.92) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 0 26px rgba(59,130,246,.72),
      0 0 64px rgba(59,130,246,.40),
      0 18px 90px rgba(0,0,0,.45) !important;
  }
  .dark .acc-glow::before{ opacity: .95 !important; filter: blur(10px) saturate(1.35); }
  .dark .acc-glow::after{
    opacity: .65 !important;
    background:
      radial-gradient(circle at 30% 18%, rgba(147,197,253,.35), transparent 52%),
      radial-gradient(circle at 70% 85%, rgba(59,130,246,.32), transparent 58%) !important;
  }
  .dark .acc-glow.bg-white{ background-color: rgba(15,23,42,.92) !important; }

  @keyframes rbShimmer{
    0%{ transform: translateX(-130%); opacity:0; }
    25%{ opacity:.35; }
    50%{ transform: translateX(130%); opacity:.22; }
    100%{ transform: translateX(130%); opacity:0; }
  }

  /* =========================
     3) SPARKLE: rame + twinkle
     ========================= */
  .acc-sparkle{
    border: 1px solid rgba(250,204,21,.42);
    box-shadow:
      0 0 0 1px rgba(250,204,21,.18) inset,
      0 10px 36px rgba(250,204,21,.18);
  }

  .acc-sparkle::before{
    content:"✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧";
    position:absolute;
    left:-12%; top:10%;
    font-size: 18px;
    letter-spacing: 18px;
    color: rgba(250,204,21,.98);
    text-shadow:
      0 0 10px rgba(250,204,21,.90),
      0 0 18px rgba(59,130,246,.40),
      0 0 28px rgba(236,72,153,.30);
    opacity:.95;
    transform: rotate(-8deg);
    animation: drift 3.4s ease-in-out infinite;
    pointer-events:none;
    white-space: nowrap;
    z-index: 1;
  }

  .acc-sparkle::after{
    content:"✨";
    position:absolute; right:14px; top:12px;
    font-size: 18px;
    filter: drop-shadow(0 0 12px rgba(250,204,21,.90));
    animation: twinkle 1.05s ease-in-out infinite;
    pointer-events:none;
    z-index: 1;
  }

  @keyframes twinkle{
    0%,100%{ transform: scale(1) rotate(0deg); opacity:.85; }
    50%{ transform: scale(1.38) rotate(10deg); opacity:1; }
  }
  @keyframes drift{
    0%,100%{ transform: translateX(0) translateY(0) rotate(-8deg); opacity:.78; }
    50%{ transform: translateX(14%) translateY(6px) rotate(-4deg); opacity:1; }
  }

  /* =======================================================
     ✅ ADDED: GLOBAL THEME (Light/Dark) - tanpa ubah code lain
     ======================================================= */
  :root{
    --bg: #f9fafb;
    --panel: #ffffff;
    --panel2: #f3f4f6;
    --border: #e5e7eb;
    --text: #111827;
    --muted: #6b7280;
    --muted2:#9ca3af;
  }
  .dark{
    --bg: #0b1220;
    --panel: #0f172a;
    --panel2: #111c33;
    --border: rgba(148,163,184,.22);
    --text: #e5e7eb;
    --muted: #a1a1aa;
    --muted2:#94a3b8;
  }

  body{
    background: var(--bg) !important;
    color: var(--text) !important;
  }

  /* Override kelas Tailwind umum yang kamu pakai */
  .dark .bg-white{ background-color: var(--panel) !important; }
  .dark .bg-gray-50{ background-color: var(--bg) !important; }
  .dark .bg-gray-100{ background-color: var(--panel2) !important; }
  .dark .border-gray-200{ border-color: var(--border) !important; }
  .dark .border-gray-100{ border-color: rgba(148,163,184,.18) !important; }
  .dark .border-blue-200{ border-color: rgba(59,130,246,.35) !important; }
  .dark .border-yellow-200{ border-color: rgba(250,204,21,.35) !important; }
  .dark .border-green-200{ border-color: rgba(34,197,94,.30) !important; }

  .dark .text-gray-900{ color: var(--text) !important; }
  .dark .text-gray-800{ color: rgba(229,231,235,.92) !important; }
  .dark .text-gray-700{ color: rgba(229,231,235,.84) !important; }
  .dark .text-gray-600{ color: rgba(229,231,235,.70) !important; }
  .dark .text-gray-500{ color: var(--muted) !important; }
  .dark .text-gray-400{ color: var(--muted2) !important; }
  .dark .text-gray-300{ color: rgba(148,163,184,.75) !important; }

  .dark input,
  .dark textarea,
  .dark select{
    background-color: rgba(15,23,42,.72) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }
  .dark input::placeholder,
  .dark textarea::placeholder{
    color: rgba(148,163,184,.75) !important;
  }

  .dark .bg-blue-50{ background-color: rgba(59,130,246,.12) !important; }
  .dark .bg-yellow-50{ background-color: rgba(250,204,21,.12) !important; }
  .dark .bg-green-50{ background-color: rgba(34,197,94,.12) !important; }

  .dark nav.bg-white\/80{ background-color: rgba(15,23,42,.72) !important; }
  .dark #loadingOverlay{ background: rgba(2,6,23,.60) !important; }

  .dark #themeToggle{
    background: rgba(15,23,42,.75) !important;
    border-color: rgba(148,163,184,.22) !important;
    color: var(--text) !important;
  }

  /* Aksesoris tetap terlihat di dark */
  .dark .acc-rainbow{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.10) inset,
      0 12px 44px rgba(0,0,0,.35) !important;
  }
  .dark .acc-glow{
    box-shadow:
      0 0 0 2px rgba(59,130,246,.18) inset,
      0 0 28px rgba(59,130,246,.65),
      0 0 70px rgba(59,130,246,.35),
      0 18px 90px rgba(0,0,0,.35) !important;
  }

  /* ==========================
     ✅ NAV POPUP MENU (HEMAT TEMPAT)
     ========================== */
  .nav-pop-wrap{ position: relative; display:flex; align-items:center; gap:8px; }
  .nav-menu-btn{
    font-size: 12px;
    font-weight: 900;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.25);
    background: rgba(15,23,42,.25);
    line-height:1;
    white-space:nowrap;
  }
  .nav-menu{
    position:absolute;
    right:0;
    top: 44px;
    width: 220px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.22);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 60px rgba(0,0,0,.18);
    overflow:hidden;
    z-index: 999;
  }
  .dark .nav-menu{
    background: rgba(15,23,42,.92);
    box-shadow: 0 18px 70px rgba(0,0,0,.40);
  }
  .nav-menu .nm-head{
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(148,163,184,.18);
  }
  .nav-menu .nm-user{
    font-weight: 900;
    font-size: 13px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .nav-menu .nm-sub{
    font-size: 11px;
    opacity: .75;
    margin-top: 2px;
  }
  .nav-menu .nm-item{
    width: 100%;
    text-align:left;
    padding: 11px 12px;
    font-size: 12px;
    font-weight: 800;
    display:flex;
    align-items:center;
    gap:10px;
    border:0;
    background: transparent;
    color: inherit;
  }
  .nav-menu .nm-item:hover{ background: rgba(148,163,184,.12); }
  .nav-menu .nm-danger{ color:#ef4444; }
  .nav-menu .nm-danger:hover{ background: rgba(239,68,68,.10); }

  /* ==========================
     ✅ POST ACTION (di bawah search)
     ========================== */
  .dark #openPostBtn{
    background-color: rgba(15,23,42,.72) !important;
    border-color: rgba(148,163,184,.22) !important;
    color: var(--text) !important;
  }
  .dark #openPostBtn:hover{
    background-color: rgba(17,28,51,.85) !important;
  }

  /* ==========================
     ✅ MODAL POSTING (POPUP) + ANDROID KEYBOARD FRIENDLY
     ========================== */
  #postModalBackdrop{
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9998;
  }
 #postModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end; /* selalu bottom sheet */
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}

/* panel: batasi tinggi + scroll di dalam, bukan modalnya naik */
#postModalPanel{
  width: 100%;
  max-width: 42rem;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 120px rgba(0,0,0,.28);

  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
}

/* area isi (yang membungkus postBoxMount) jadi scroll */
#postModalPanel .p-4{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
  #postModalPanel{
    width: 100%;
    max-width: 42rem; /* max-w-2xl */
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 120px rgba(0,0,0,.28);

    max-height: min(86vh, 720px);
    display: flex;
    flex-direction: column;
  }
  /* isi modal scroll di dalam */
  #postModalPanel .p-4{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dark #postModalBackdrop{ background: rgba(2, 6, 23, .68); }

  /* =========================
     ✅ AKSESORIS BARU (KECE)
     ========================= */

  /* 4) AURORA */
  .acc-aurora{
    border: 2px solid rgba(34,211,238,.35);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.45) inset,
      0 18px 70px rgba(34,211,238,.12);
  }
  .acc-aurora::before{
    content:"";
    position:absolute; inset:-20%;
    background:
      radial-gradient(circle at 20% 20%, rgba(34,211,238,.55), transparent 55%),
      radial-gradient(circle at 80% 30%, rgba(168,85,247,.45), transparent 55%),
      radial-gradient(circle at 55% 85%, rgba(16,185,129,.42), transparent 55%);
    filter: blur(18px);
    opacity:.75;
    animation: auroraFloat 6.5s ease-in-out infinite;
    pointer-events:none;
    z-index:1;
  }
  .acc-aurora::after{
    content:"";
    position:absolute; inset:-30%;
    background: linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 35%,
      rgba(255,255,255,0) 70%
    );
    transform: translateX(-140%);
    animation: auroraShine 3.2s ease-in-out infinite;
    mix-blend-mode: overlay;
    opacity:.35;
    pointer-events:none;
    z-index:1;
  }
  @keyframes auroraFloat{
    0%,100%{ transform: translate3d(0,0,0) scale(1); }
    50%{ transform: translate3d(3%, -2%, 0) scale(1.03); }
  }
  @keyframes auroraShine{
    0%{ transform: translateX(-140%); opacity:0; }
    30%{ opacity:.35; }
    60%{ transform: translateX(140%); opacity:.22; }
    100%{ transform: translateX(140%); opacity:0; }
  }
  .dark .acc-aurora{
    border-color: rgba(34,211,238,.45) !important;
    background-color: rgba(15,23,42,.92) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 18px 90px rgba(0,0,0,.42) !important;
  }
  .dark .acc-aurora::before{ opacity:.55; filter: blur(20px) saturate(1.15); }

  /* 5) CYBER GRID */
  .acc-cyber{
    border: 2px solid rgba(59,130,246,.45);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.35) inset,
      0 0 36px rgba(59,130,246,.18);
  }
  .acc-cyber::before{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(to right, rgba(59,130,246,.20) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(59,130,246,.16) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity:.45;
    pointer-events:none;
    z-index:1;
  }
  .acc-cyber::after{
    content:"";
    position:absolute; inset:-20%;
    background: linear-gradient(180deg,
      rgba(34,211,238,0) 0%,
      rgba(34,211,238,.35) 45%,
      rgba(34,211,238,0) 100%
    );
    filter: blur(10px);
    transform: translateY(-120%);
    animation: cyberScan 2.2s ease-in-out infinite;
    mix-blend-mode: screen;
    pointer-events:none;
    z-index:1;
  }
  @keyframes cyberScan{
    0%{ transform: translateY(-120%); opacity:0; }
    35%{ opacity:.55; }
    70%{ transform: translateY(120%); opacity:.25; }
    100%{ transform: translateY(120%); opacity:0; }
  }
  .dark .acc-cyber{
    border-color: rgba(59,130,246,.60) !important;
    background-color: rgba(15,23,42,.92) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 0 60px rgba(59,130,246,.22),
      0 18px 90px rgba(0,0,0,.45) !important;
  }
  .dark .acc-cyber::before{ opacity:.38; }

  /* 6) GLASS */
  .acc-glass{
    border: 1px solid rgba(148,163,184,.35);
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.55) inset,
      0 18px 70px rgba(0,0,0,.08);
  }
  .acc-glass::before{
    content:"";
    position:absolute; inset:-30%;
    background: linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.65) 30%,
      rgba(255,255,255,0) 60%
    );
    transform: translateX(-140%);
    animation: glassSweep 3.6s ease-in-out infinite;
    opacity:.55;
    pointer-events:none;
    z-index:1;
  }
  @keyframes glassSweep{
    0%{ transform: translateX(-140%); opacity:0; }
    35%{ opacity:.55; }
    70%{ transform: translateX(140%); opacity:.22; }
    100%{ transform: translateX(140%); opacity:0; }
  }
  .dark .acc-glass{
    background: rgba(15,23,42,.72) !important;
    border-color: rgba(148,163,184,.22) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 18px 90px rgba(0,0,0,.45) !important;
  }
  .dark .acc-glass::before{ opacity:.22; }

  /* 7) FIREFLY */
  .acc-firefly{
    border: 2px solid rgba(250,204,21,.38);
    box-shadow:
      0 0 0 1px rgba(250,204,21,.16) inset,
      0 18px 70px rgba(250,204,21,.10);
  }
  .acc-firefly::before{
    content:"";
    position:absolute; inset:-10%;
    background:
      radial-gradient(circle, rgba(250,204,21,.85) 0 2px, transparent 3px),
      radial-gradient(circle, rgba(34,211,238,.55) 0 2px, transparent 3px),
      radial-gradient(circle, rgba(236,72,153,.55) 0 2px, transparent 3px);
    background-size: 120px 120px, 160px 160px, 200px 200px;
    background-position: 10% 30%, 70% 60%, 40% 85%;
    filter: blur(0.2px);
    opacity:.55;
    animation: fireflyMove 5.5s ease-in-out infinite;
    pointer-events:none;
    z-index:1;
  }
  .acc-firefly::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 20% 25%, rgba(250,204,21,.22), transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(34,211,238,.16), transparent 50%);
    mix-blend-mode: screen;
    opacity:.65;
    pointer-events:none;
    z-index:1;
  }
  @keyframes fireflyMove{
    0%,100%{ transform: translate3d(0,0,0); }
    50%{ transform: translate3d(2%, -2%, 0); }
  }
  .dark .acc-firefly{
    background-color: rgba(15,23,42,.92) !important;
    border-color: rgba(250,204,21,.45) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 0 46px rgba(250,204,21,.10),
      0 18px 90px rgba(0,0,0,.45) !important;
  }
  .dark .acc-firefly::before{ opacity:.42; }