/* ============================================================================
   SHATTA MOVEMENT FANBASE — PREMIUM DESIGN SYSTEM (Sky Luxe 2.0)
   Glassmorphism · floating sidebar · mobile bottom-nav · dashboard cards.
   Layered ON TOP of theme.css (sky palette). Scoped to body.sky so admin /
   functional pages are never touched. Loaded after theme.css so it wins.
   ============================================================================ */

body.sky {
  /* Deep Emerald + Gold — the single platform-wide accent system. */
  --royal: #0b6e4f;
  --sky: #0e8a5f;
  --violet: #0b6e4f;
  --violet2: #0e8a5f;
  --gold-a: #e8c84b;
  --gold-b: #caa028;
  --ink: #13302a;
  --ink2: #3f6157;
  --ink3: #6a8a7e;
  --em: #0b6e4f; --em-deep: #075e43; --em-line: rgba(11,110,79,.20);

  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 28px;

  --glass-bg: rgba(255,255,255,0.62);
  --glass-brd: rgba(255,255,255,0.78);
  --glass-shadow: 0 18px 48px rgba(8,66,50,0.16);
  --soft-shadow: 0 10px 30px rgba(8,66,50,0.12);

  --grad-royal: linear-gradient(135deg, #0e8a5f 0%, #0b6e4f 50%, #08423f 100%);
  --grad-violet: linear-gradient(135deg, #0e8a5f, #0a5b58);
  --grad-gold: linear-gradient(135deg, #f5e07a, #e8c84b 45%, #caa028);
  --grad-ink: linear-gradient(120deg, #13302a, #0b6e4f 55%, #a9851d);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Slightly richer animated background blobs over theme.css base */
body.sky::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 600px at 12% 22%, rgba(11,110,79,0.14), transparent 60%),
    radial-gradient(620px 620px at 90% 12%, rgba(10,143,99,0.13), transparent 60%),
    radial-gradient(560px 560px at 78% 92%, rgba(232,200,75,0.11), transparent 60%);
  animation: skyDrift 22s ease-in-out infinite alternate;
}
@keyframes skyDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-18px,0); } }

/* ===== GLASS UTILITIES ===== */
body.sky .glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* ===== FLOATING DESKTOP SIDEBAR (the "headquarters" rail) ===== */
.app-rail { display: none; }
.app-bottomnav { display: none; }

body.sky .app-rail {
  position: fixed; top: 14px; left: 14px; bottom: 14px; width: 214px;
  z-index: 60; flex-direction: column; padding: 18px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(238,245,255,0.62));
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(8,66,50,0.18);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  overflow-y: auto; overscroll-behavior: contain;
}
body.sky .app-rail::-webkit-scrollbar { width: 0; }
.rail-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
.rail-brand .brand-logo { width: 40px; height: 40px; border-radius: 12px; }
.rail-brand-txt { font: 800 13px/1.1 'Inter',sans-serif; letter-spacing: 1.5px;
  background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rail-nav { display: flex; flex-direction: column; gap: 3px; }
.rail-link {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: 13px; color: var(--ink2); font-weight: 600; font-size: 14px;
  text-decoration: none; transition: all .18s ease; position: relative;
}
.rail-link .ri { font-size: 17px; width: 22px; text-align: center; flex: none; }
.rail-link:hover { background: rgba(11,110,79,0.10); color: var(--ink); transform: translateX(2px); }
.rail-link.active {
  background: var(--grad-violet); color: #fff;
  box-shadow: 0 8px 20px rgba(8,90,64,0.4);
}
.rail-link.active .ri { filter: drop-shadow(0 1px 4px rgba(0,0,0,.2)); }
.rail-foot { margin-top: auto; padding-top: 14px; }
.rail-join {
  display: block; text-align: center; padding: 12px; border-radius: 14px;
  background: var(--grad-gold); color: #1a1200; font-weight: 800; font-size: 13px;
  text-decoration: none; box-shadow: 0 8px 22px rgba(200,160,40,0.42);
  transition: transform .18s ease, box-shadow .18s ease;
}
.rail-join:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200,160,40,0.55); }

/* ===== CATEGORIZED NAV DROPDOWNS ===== */
.nav-group { position: relative; width: 100%; }
.nav-trigger { font: inherit; cursor: pointer; background: none; border: none;
  display: flex; align-items: center; gap: 6px; width: 100%; justify-content: space-between;
  padding: 12px 14px; color: var(--ink2, #cbd5e1); font-weight: 600; }
.nav-trigger:hover { color: var(--ink, #16335c); }
.caret { font-size: 10px; transition: transform .2s ease; opacity: .65; }
.ndi { width: 20px; text-align: center; flex: none; }
.nav-dropdown { display: none; flex-direction: column; gap: 2px; padding: 2px 0 8px 12px; }
.nav-group.open .nav-dropdown { display: flex; }
.nav-group.open .caret { transform: rotate(180deg); }
.nav-dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
  text-decoration: none; color: var(--ink2, #cbd5e1); font-weight: 600; font-size: 14px; }
.nav-dropdown a:hover { background: rgba(11,110,79,.12); color: var(--ink, #16335c); }

@media (min-width: 1024px) {
  /* Clean single categorized TOP NAV (Apple/Spotify/Discord style — no competing
     sidebar). The .app-rail markup stays in the DOM; flip these two lines to
     display:flex / padding-left to bring the icon rail back. */
  body.sky { padding-left: 0; }
  body.sky .app-rail { display: none; }

  /* brand left · categorized dropdowns right */
  body.sky .navbar .nav-brand { display: flex; }
  body.sky .navbar .nav-container { justify-content: space-between; }
  body.sky .navbar .nav-links { margin-left: auto; align-items: center; gap: 2px; }
  body.sky .nav-toggle { display: none; }
  body.sky .nav-home { display: none; }              /* the brand logo IS Home */
  body.sky .nav-group { width: auto; }
  body.sky .nav-trigger { width: auto; padding: 9px 13px; border-radius: 11px; font-size: 14px; }
  body.sky .nav-trigger:hover, body.sky .nav-group.open .nav-trigger { background: rgba(11,110,79,.09); }
  body.sky .nav-dropdown {
    position: absolute; top: calc(100% + 12px); right: 0; left: auto; min-width: 224px;
    display: flex; padding: 8px; z-index: 220;
    background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: 16px;
    box-shadow: var(--glass-shadow); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  body.sky .nav-group:hover .nav-dropdown, body.sky .nav-group.open .nav-dropdown { opacity: 1; visibility: visible; transform: none; }
  body.sky .nav-group:hover .caret { transform: rotate(180deg); }
  body.sky .nav-group::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }  /* hover bridge */
}

/* ===== MOBILE BOTTOM NAV ===== */
body.sky .app-bottomnav {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 70;
  justify-content: space-around; align-items: center; padding: 8px 6px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(8,66,50,0.24);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}
.bn-link {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--ink3); font-size: 10px; font-weight: 700;
  padding: 4px 10px; border-radius: 14px; transition: all .16s ease; min-width: 52px;
}
.bn-link .bi { font-size: 19px; display:flex; align-items:center; justify-content:center; line-height:0; }
.bn-link .bi .ic { display:block; width:22px; height:22px; }
.bn-link.active { color: var(--violet); background: rgba(11,110,79,0.12); }
.bn-link.active .bi { transform: translateY(-1px); filter: drop-shadow(0 3px 6px rgba(11,110,79,.4)); }

/* Top-nav SVG icon links (bell / mail) + badge */
.nav-ic { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.nav-ic .ic { display:block; }
.nav-badge { position:absolute; top:1px; right:-2px; min-width:15px; height:15px; padding:0 4px; border-radius:8px;
  background:#ef4444; color:#fff; font:800 9px/15px 'Inter',sans-serif; text-align:center;
  box-shadow:0 0 0 2px #fff; }

@media (max-width: 1023px) {
  body.sky .app-bottomnav { display: flex; }
  body.sky main.main-content { padding-bottom: 96px; }
  body.sky .lounge-fab, body.sky #lounge-fab { bottom: 86px !important; }
}

/* ===== PREMIUM BUTTONS (micro-interactions) ===== */
body.sky .btn {
  border-radius: 999px; font-weight: 700; letter-spacing: .2px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, filter .18s ease;
  position: relative; overflow: hidden;
}
body.sky .btn-gold {
  background: var(--grad-gold) !important; color: #1a1200 !important;
  box-shadow: 0 10px 26px rgba(200,160,40,0.36);
}
body.sky .btn-gold::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
body.sky .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(200,160,40,0.52); }
body.sky .btn-gold:hover::after { left: 130%; }
body.sky .btn-outline {
  border: 1.5px solid rgba(11,110,79,0.55); color:var(--em-link); background: rgba(255,255,255,0.5);
  backdrop-filter: blur(6px);
}
body.sky .btn-outline:hover { background: rgba(11,110,79,0.12); transform: translateY(-2px); border-color: var(--violet); }
body.sky .btn-primary {
  background: var(--grad-royal) !important; color: #fff !important; border: none;
  box-shadow: 0 10px 26px rgba(90,120,240,0.4);
}
body.sky .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(90,120,240,0.55); }

/* ===== PREMIUM FORMS (kill browser defaults globally on sky pages) ===== */
body.sky input:not([type=checkbox]):not([type=radio]):not([type=range]),
body.sky select, body.sky textarea {
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: rgba(255,255,255,0.85);
  border: 1.5px solid #cfe7dd; border-radius: 13px; padding: 12px 14px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-appearance: none; appearance: none;
}
body.sky input:focus, body.sky select:focus, body.sky textarea:focus {
  outline: none; border-color: var(--violet); background: #fff;
  box-shadow: 0 0 0 4px rgba(11,110,79,0.16);
}
body.sky input::placeholder, body.sky textarea::placeholder { color: #9fb2cc; }
body.sky select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237a90b0' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}

/* ===== DASHBOARD HERO ===== */
.dash-hero {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 26px; align-items: center;
  padding: 30px; margin: 14px 0 8px;
  background: linear-gradient(120deg, rgba(255,255,255,0.72), rgba(238,245,255,0.5));
  border: 1px solid rgba(255,255,255,0.8); border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  position: relative; overflow: hidden;
}
.dash-hero::before {
  content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(11,110,79,0.22), transparent 70%); pointer-events: none;
}
.dash-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800;
  letter-spacing: 1px; color:var(--em-link); background: rgba(11,110,79,0.12);
  border: 1px solid rgba(11,110,79,0.3); border-radius: 999px; padding: 6px 14px; margin-bottom: 16px;
}
.dash-h1 {
  font: 900 clamp(30px, 4.6vw, 52px)/1.02 'Inter',sans-serif; letter-spacing: -1.5px; margin: 0 0 8px;
  color: var(--ink);
}
.dash-h1 .grad { background: linear-gradient(100deg,#0e8a5f,#0b6e4f 55%,#075e43);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.dash-sub { font-size: 17px; color: #4a648e; font-weight: 600; margin: 0 0 22px; }
.dash-sub b { color: var(--ink); }
.dash-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== 3D GOLD CARD ===== */
.goldcard-stage { perspective: 1400px; display: flex; justify-content: center; }
.goldcard {
  width: min(320px, 80vw); aspect-ratio: 1.585; border-radius: 20px; position: relative;
  background: linear-gradient(135deg, #1b2440 0%, #20305c 40%, #16213f 100%);
  border: 1px solid rgba(232,200,75,0.5);
  box-shadow: 0 30px 60px rgba(6,40,30,0.45), inset 0 0 40px rgba(11,110,79,0.18);
  transform: rotateY(-16deg) rotateX(6deg); transform-style: preserve-3d;
  animation: cardFloat 6s ease-in-out infinite; padding: 22px; color: #fff; overflow: hidden;
}
.goldcard::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(232,200,75,0.18) 48%, transparent 60%);
  animation: cardSheen 5s ease-in-out infinite;
}
@keyframes cardFloat {
  0%,100% { transform: rotateY(-16deg) rotateX(6deg) translateY(0); }
  50% { transform: rotateY(-10deg) rotateX(3deg) translateY(-12px); }
}
@keyframes cardSheen { 0%,100% { transform: translateX(-30%); opacity:.6; } 50% { transform: translateX(30%); opacity:1; } }
.goldcard-top { display: flex; justify-content: space-between; align-items: flex-start; }
.goldcard-chip { width: 44px; height: 32px; border-radius: 7px;
  background: linear-gradient(135deg,#f5e07a,#caa028); box-shadow: inset 0 0 6px rgba(0,0,0,.3); }
.goldcard-emblem { font-size: 26px; }
.goldcard-mid { position: absolute; left: 22px; bottom: 58px; }
.goldcard-label { font-size: 10px; letter-spacing: 2px; color: #e8c84b; font-weight: 800; }
.goldcard-name { font: 800 19px 'Inter',sans-serif; letter-spacing: 1px; }
.goldcard-no { position: absolute; left: 22px; bottom: 22px; right: 22px;
  font: 600 14px 'Inter',monospace; letter-spacing: 2px; color: #cfe0ff;
  display: flex; justify-content: space-between; }
.goldcard-tier { color: #e8c84b; font-weight: 800; }

/* ===== DASHBOARD STAT GRID ===== */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 16px 0; }
.dash-stat {
  background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: var(--radius);
  box-shadow: var(--soft-shadow); padding: 20px; position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.dash-stat:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(8,66,50,0.2); }
.dash-stat .ds-ico {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; margin-bottom: 12px; background: rgba(11,110,79,0.12);
}
.dash-stat.gold .ds-ico { background: rgba(232,200,75,0.18); }
.dash-stat .ds-num { font: 900 30px 'Inter',sans-serif; color: var(--ink); letter-spacing: -.5px; line-height: 1; }
.dash-stat .ds-label { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--ink3); margin-top: 6px; text-transform: uppercase; }
.dash-stat .ds-bar { height: 7px; border-radius: 6px; background: rgba(11,110,79,0.14); margin-top: 12px; overflow: hidden; }
.dash-stat .ds-bar > span { display: block; height: 100%; border-radius: 6px; background: var(--grad-violet);
  box-shadow: 0 0 12px rgba(11,110,79,0.6); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }

/* ===== FEATURE CARDS (Gold Card / Donate / Rewards) ===== */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 18px 0; }
.feat-card {
  border-radius: var(--radius); padding: 24px; color: #fff; position: relative; overflow: hidden;
  min-height: 200px; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 16px 40px rgba(40,55,110,0.28); transition: transform .22s ease, box-shadow .22s ease;
}
.feat-card:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(40,55,110,0.4); }
.feat-card.f-gold { background: linear-gradient(150deg,#2a2207,#0c2a20); border: 1px solid rgba(232,200,75,0.4); }
.feat-card.f-violet { background: linear-gradient(150deg,#0c3b2e,#08231b); border: 1px solid rgba(11,110,79,0.5); }
.feat-card.f-sky { background: linear-gradient(150deg,#0a4f3c,#08231b); border: 1px solid rgba(10,143,99,0.5); }
.feat-emoji { font-size: 34px; }
.feat-card h3 { font: 800 19px 'Inter',sans-serif; margin: 14px 0 6px; }
.feat-card p { font-size: 13.5px; color: rgba(255,255,255,0.78); line-height: 1.55; margin: 0 0 14px; flex: 1; }
.feat-link { align-self: flex-start; font-weight: 800; font-size: 13px; text-decoration: none;
  padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25); color: #fff; transition: all .18s ease; }
.feat-card.f-gold .feat-link:hover { background: var(--grad-gold); color: #1a1200; }
.feat-card.f-violet .feat-link:hover, .feat-card.f-sky .feat-link:hover { background: rgba(255,255,255,0.22); }

/* ===== HOW-TO STEPS ===== */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step-card {
  background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: var(--radius-sm);
  padding: 20px 16px; box-shadow: var(--soft-shadow); position: relative;
}
.step-num { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff; background: var(--grad-violet); margin-bottom: 12px;
  box-shadow: 0 8px 18px rgba(11,110,79,0.4); }
.step-card.s2 .step-num { background: linear-gradient(135deg,#075e43,#0b6e4f); }
.step-card.s3 .step-num { background: linear-gradient(135deg,#0e8a5f,#0e8a5f); }
.step-card.s4 .step-num { background: var(--grad-gold); color: #1a1200; }
.step-card h4 { font: 800 14px 'Inter',sans-serif; color: var(--ink); margin: 0 0 5px; }
.step-card p { font-size: 12.5px; color: var(--ink3); line-height: 1.5; margin: 0; }

/* ===== LEADERBOARD PREVIEW ===== */
.lb-card { background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: var(--radius);
  box-shadow: var(--soft-shadow); padding: 18px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 13px; transition: background .15s ease; }
.lb-row:hover { background: rgba(11,110,79,0.07); }
.lb-rank { width: 26px; font: 900 16px 'Inter',sans-serif; color: var(--ink3); text-align: center; }
.lb-row.top1 .lb-rank { color: #caa028; } .lb-row.top2 .lb-rank { color: #8aa0c0; } .lb-row.top3 .lb-rank { color: #c08457; }
.lb-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px; color: #fff; background: var(--grad-violet); }
.lb-name { flex: 1; font-weight: 700; color: var(--ink); font-size: 14px; }
.lb-score { font-weight: 800; color:var(--em-link); font-size: 14px; }

/* ===== SECTION POLISH ===== */
body.sky .ann-card, body.sky .country-card, body.sky .dir-card, body.sky .fb-card,
body.sky .rpg-card, body.sky .gs-card, body.sky .perk-item {
  border-radius: var(--radius-sm) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.sky .ann-card:hover, body.sky .country-card:hover, body.sky .dir-card:hover, body.sky .fb-card:hover {
  transform: translateY(-4px); box-shadow: 0 16px 36px rgba(8,66,50,0.18);
}
body.sky .section-title { font-family: 'Inter',sans-serif; font-weight: 900; letter-spacing: -.5px; }

/* ===== GLASS MODALS / POPUPS ===== */
body.sky .modal, body.sky .popup, body.sky .alert {
  border-radius: var(--radius-sm);
}
body.sky .flash-container .alert {
  background: var(--glass-bg); border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--ink); border-radius: 14px;
}
body.sky .alert-success { border-left: 4px solid #34d399; }
body.sky .alert-error { border-left: 4px solid #f87171; }

/* ===== SKELETON + SCROLLBAR ===== */
body.sky .skeleton { background: linear-gradient(100deg, #e9f4ef 30%, #f3f9f4 50%, #e9f4ef 70%);
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }
body.sky ::-webkit-scrollbar { width: 10px; height: 10px; }
body.sky ::-webkit-scrollbar-thumb { background: rgba(11,110,79,0.3); border-radius: 8px; }
body.sky ::-webkit-scrollbar-thumb:hover { background: rgba(11,110,79,0.5); }

/* ===== REVEAL ON LOAD ===== */
.reveal { opacity: 0; transform: translateY(16px); animation: revealUp .7s cubic-bezier(.2,.8,.2,1) forwards; }
.reveal.d1 { animation-delay: .08s; } .reveal.d2 { animation-delay: .16s; }
.reveal.d3 { animation-delay: .24s; } .reveal.d4 { animation-delay: .32s; }
@keyframes revealUp { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.sky *, body.sky *::before { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===== SM BUZZ (social feed) ===== */
.bz-av{ width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font:900 18px 'Inter',sans-serif;color:#fff;background:var(--grad-violet);box-shadow:0 6px 16px rgba(11,110,79,.35) }
.bz-av-sm{ width:30px;height:30px;font-size:13px }
.bz-av-king{ background:linear-gradient(135deg,#f5e07a,#caa028) !important; color:#1a1200 !important; box-shadow:0 6px 18px rgba(200,160,40,.55) !important; border:2px solid #fff }
.bz-king-name{ background:linear-gradient(135deg,#d8b339,#a9851d); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900 }
.bz-body{ padding:0 16px 12px;color:#1f3a5f;font-size:15px;line-height:1.55;white-space:pre-wrap;word-break:break-word }
.bz-media{ width:100%;display:block;max-height:560px;object-fit:cover;background:#e9f4ef }
.bz-video{ width:100%;display:block;max-height:560px;background:#000 }
.bz-actions{ display:flex;align-items:center;gap:6px;padding:10px 14px;border-top:1px solid #e9f4ef }
.bz-comments{ background:#f3f9f4;border-top:1px solid #e9f4ef;padding:10px 14px }
/* threaded comments */
.bz-comment{ margin-bottom:9px }
.bz-crow{ display:flex; gap:8px }
.bz-cav{ flex:none }
.bz-cbub{ background:#fff; border:1px solid #dfeee7; border-radius:12px; padding:8px 11px; flex:1; min-width:0 }
.bz-cbub.king{ border-color:#e8c84b }
.bz-cmeta{ font-size:13px }
.bz-cname{ font-weight:800; color:var(--ink) }
.bz-cago{ font-size:11px; color:var(--ink3) }
.bz-cbody{ color:var(--ink2); font-size:14px; line-height:1.45; white-space:pre-wrap; word-break:break-word }
.bz-cactions{ padding-left:38px; margin-top:1px }
.bz-reply-btn{ background:none; border:none; cursor:pointer; font:800 12px 'Inter',sans-serif; color:var(--em-deep); padding:3px 4px; border-radius:6px }
.bz-reply-btn:hover{ background:rgba(11,110,79,.08) }
.bz-replies{ margin:7px 0 0 17px; padding-left:13px; border-left:2px solid var(--em-line) }
.bz-replies .bz-comment{ margin-bottom:7px }
.bz-replies .bz-comment:last-child{ margin-bottom:0 }
.bz-reply-form{ display:flex; gap:6px; margin:6px 0 2px 38px }
.bz-reply-form input[name=body]{ flex:1; border:1px solid #cfe7dd; border-radius:18px; padding:7px 13px; font-size:14px; color:var(--ink); background:#fff }
details > summary::-webkit-details-marker{ display:none }

/* ============================================================= *
 *  SM CHAT — Deep Emerald + Gold luxury theme (body.sky.chat)
 *  Re-skins the social surface to premium green+gold by
 *  overriding the accent variables + adding glass buttons.
 * ============================================================= */
body.sky.chat{
  --violet:#0b6e4f; --violet2:#0e8a5f;
  --grad-violet:linear-gradient(135deg,#0e8a5f,#0a5b58);
  --grad-royal:linear-gradient(135deg,#0e8a5f 0%,#0b6e4f 50%,#08423f 100%);
  --em:#0b6e4f; --em-deep:#075e43; --em-line:rgba(11,110,79,.20);
}
body.sky.chat::before{ background:
  radial-gradient(900px 480px at 8% -6%, rgba(11,110,79,.11), transparent 60%),
  radial-gradient(820px 460px at 100% 0%, rgba(202,160,40,.10), transparent 60%) !important; }
body.sky.chat .bz-body{ color:var(--ink) }
body.sky.chat .bz-comments{ background:#f1f8f3 !important; border-top:1px solid var(--em-line) !important }
body.sky.chat .bz-media,body.sky.chat .bz-avi{ background:#e8f3ec }
body.sky.chat .bn-link.active{ color:var(--em) !important; background:rgba(11,110,79,.12) !important }

/* uploaded profile pictures (image avatars) */
.bz-avi{ width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;background:#0b6e4f;
  box-shadow:0 6px 16px rgba(8,66,50,.30);display:block }
.bz-avi-sm{ width:30px;height:30px }
.bz-avi-king{ border:2px solid #e8c84b;box-shadow:0 6px 18px rgba(202,160,40,.5) }
/* composer avatar = tap to set your profile picture */
.bz-avwrap{ position:relative; flex:none; display:block; text-decoration:none }
.bz-cam{ position:absolute; right:-3px; bottom:-3px; width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg,#0e8a5f,#0a5b58); color:#fff; font-size:10px; line-height:20px;
  text-align:center; border:2px solid #fff; box-shadow:0 3px 8px rgba(8,66,50,.4) }
.bz-avwrap:hover .bz-cam{ transform:scale(1.12) }

/* glassmorphism buttons (Follow / Message / Save / etc.) */
.gx-btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  font:800 14px 'Inter',sans-serif;border-radius:14px;padding:10px 18px;border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;text-decoration:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px) }
.gx-btn:active{ transform:scale(.96) }
.gx-btn-em{ background:linear-gradient(135deg,#0e8a5f,#0a5b58);color:#fff;box-shadow:0 10px 24px rgba(8,90,64,.35) }
.gx-btn-em:hover{ transform:translateY(-2px);box-shadow:0 14px 30px rgba(8,90,64,.45) }
.gx-btn-gold{ background:linear-gradient(135deg,#e8c84b,#caa028);color:#1a1200;box-shadow:0 10px 24px rgba(202,160,40,.4) }
.gx-btn-gold:hover{ transform:translateY(-2px) }
.gx-btn-ghost{ background:rgba(11,110,79,.07);color:var(--em-link);border-color:rgba(11,110,79,.22) }
.gx-btn-ghost:hover{ background:rgba(11,110,79,.13);transform:translateY(-2px) }
/* icons inside premium buttons + follow/check swap */
.gx-btn .ic{ display:block }
.bz-follow .bz-follow-ic,.bz-follow .bz-check-ic{ display:inline-flex;align-items:center }
.bz-follow .bz-check-ic{ display:none }
.bz-follow.is-following .bz-follow-ic{ display:none }
.bz-follow.is-following .bz-check-ic{ display:inline-flex }

/* SM Chat post action pills (Like / Comment / Share) */
body.sky.chat .bz-actions{ border-top:1px solid var(--em-line) !important; gap:8px !important }
.bz-act{ display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:1px solid transparent;
  background:rgba(11,110,79,.06);border-radius:12px;padding:8px 14px;font:800 14px 'Inter',sans-serif;
  color:var(--ink2);transition:transform .15s ease, background .2s ease, color .2s ease }
.bz-act:hover{ background:rgba(11,110,79,.12);transform:translateY(-1px) }
.bz-act:active{ transform:scale(.93) }
.bz-act.liked{ background:rgba(239,68,68,.12);color:#ef4444 }
.bz-act.share:hover{ background:rgba(16,160,110,.14);color:var(--em) }
/* SVG icons inside the action pills */
.bz-act .ic{ display:block }
.bz-heart{ display:inline-flex;align-items:center }
.bz-act.like.liked .ic-heart{ fill:#ef4444;stroke:#ef4444 }
.bz-myreact{ font-size:18px;line-height:1;display:inline-flex }
@keyframes bzpop{ 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
.bz-act:hover .bz-heart{ animation:bzpop .4s ease }

/* Emoji reactions — hover (desktop) / long-press (mobile) picker */
.bz-react-wrap{ position:relative; display:inline-flex }
.bz-react-pop{ position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) scale(.78) translateY(6px);
  display:flex; gap:3px; padding:6px 9px; background:#fff; border:1px solid var(--em-line,#dbeee5); border-radius:26px;
  box-shadow:0 14px 36px rgba(8,40,30,.24); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, transform .16s cubic-bezier(.2,.9,.3,1.3); z-index:30; white-space:nowrap }
.bz-react-wrap:hover .bz-react-pop, .bz-react-wrap.open .bz-react-pop{ opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) scale(1) translateY(0) }
.bz-react-opt{ border:none; background:none; cursor:pointer; font-size:23px; line-height:1; padding:3px 4px; border-radius:50%;
  transition:transform .12s ease; transform-origin:bottom center }
.bz-react-opt:hover{ transform:scale(1.4) translateY(-3px) }
.bz-react-opt.sel{ background:rgba(11,110,79,.14) }
.bz-react-sum{ display:inline-flex; align-items:center; margin:0 2px }
.bz-react-sum i{ font-size:13px; font-style:normal; margin-left:-3px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.12)) }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .dash-hero { grid-template-columns: 1fr; text-align: center; padding: 24px 18px; }
  .dash-cta-row { justify-content: center; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .feat-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dash-stat { padding: 15px; }
  .dash-stat .ds-num { font-size: 24px; }
  .steps-grid { grid-template-columns: 1fr; }
}

/* ============================================================= *
 *  GLOBAL POLISH — accessibility, touch targets, mobile shell
 *  (applies platform-wide; safe under the emerald theme)
 * ============================================================= */
/* Visible keyboard focus on every interactive element */
body.sky a:focus-visible, body.sky button:focus-visible, body.sky input:focus-visible,
body.sky textarea:focus-visible, body.sky select:focus-visible, body.sky summary:focus-visible,
body.sky [tabindex]:focus-visible, body.sky .bz-act:focus-visible, body.sky .gx-btn:focus-visible {
  outline: 3px solid rgba(11,110,79,.55); outline-offset: 2px; border-radius: 8px;
}
body.sky :focus:not(:focus-visible) { outline: none; }

/* Smooth color transitions (not just transform) for a more polished feel */
body.sky a, body.sky .btn, body.sky .gx-btn, body.sky .bz-act, body.sky .nav-link, body.sky .rail-link {
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

/* Readability: action-pill labels were too light */
.bz-act { color: var(--ink2); }
.bz-act .ic { stroke-width: 2.1; }

/* Mobile: safe-area + thumb-friendly targets */
@media (max-width: 1023px) {
  body.sky .app-bottomnav { bottom: calc(10px + env(safe-area-inset-bottom)); }
  body.sky main.main-content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .bn-link { min-height: 46px; justify-content: center; }
  .bz-react-opt { min-width: 40px; min-height: 40px; }   /* easier to tap */
  .bz-act { padding: 9px 13px; }                          /* taller pill */
}

/* Long names never overflow a small card */
.bz-king-name, .hc-name, .pf-name, .cas-name { overflow-wrap: anywhere; }

/* Broaden reduced-motion coverage */
@media (prefers-reduced-motion: reduce) {
  body.sky *, body.sky *::before, body.sky *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================= *
 *  POST ⋯ MENU — dropdown on desktop, bottom-sheet on mobile
 * ============================================================= */
.pc-menu-wrap { position: relative; }
.pc-menu-btn { list-style: none; cursor: pointer; color: var(--ink3); padding: 3px 6px;
  display: inline-flex; align-items: center; border-radius: 8px; }
.pc-menu-btn::-webkit-details-marker { display: none; }
.pc-menu-btn:hover { background: rgba(11,110,79,.08); color: var(--ink); }
.pc-menu { position: absolute; right: 0; top: 28px; z-index: 25; }
.pc-sheet { background: #fff; border: 1px solid var(--em-line); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(8,66,50,.2); padding: 6px; min-width: 172px; }
.pc-grip { display: none; }
.pc-item { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left;
  background: none; border: none; cursor: pointer; padding: 11px 12px; border-radius: 10px;
  font: 700 14px 'Inter', sans-serif; transition: background .15s ease; }
.pc-item:hover { background: rgba(11,110,79,.07); }
.pc-item .ic { flex: none; }
@media (max-width: 680px) {
  .pc-menu { position: fixed; inset: 0; right: auto; z-index: 1000; display: flex; align-items: flex-end;
    background: rgba(8,30,24,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: pcFade .18s ease; }
  .pc-sheet { width: 100%; min-width: 0; border-radius: 22px 22px 0 0;
    padding: 8px 10px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.25);
    animation: pcUp .24s cubic-bezier(.2,.9,.3,1.1); }
  .pc-grip { display: block; width: 42px; height: 4px; border-radius: 3px; background: #cfe7dd; margin: 4px auto 10px; }
  .pc-item { padding: 15px 14px; font-size: 16px; }
}
@keyframes pcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ============================================================= *
 *  SIDEBAR NAVIGATION — desktop fixed · mobile drawer  + TOPBAR
 * ============================================================= */
.sbar { position: fixed; top: 0; left: 0; bottom: 0; width: 272px; z-index: 120;
  display: flex; flex-direction: column; color: #dff3ea;
  background: linear-gradient(185deg, #0c3b2e, #0a2a22 60%, #08231b);
  border-right: 1px solid rgba(202,160,40,.18); box-shadow: 0 0 50px rgba(0,0,0,.32);
  transform: translateX(-100%); transition: transform .26s cubic-bezier(.3,.8,.3,1); }
.sbar.open { transform: none; }
.sbar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 12px; }
.sbar-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.sbar-brand .brand-logo { width: 38px; height: 38px; border-radius: 11px; }
.sbar-brand-txt { font: 900 15px 'Inter', sans-serif; letter-spacing: 2px; color: #fff; }
.sbar-brand-txt b { color: #e8c84b; }
.sbar-close { background: rgba(255,255,255,.08); border: none; color: #cfe9df; width: 36px; height: 36px;
  border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sbar-nav { flex: 1; overflow-y: auto; padding: 6px 12px 12px; overscroll-behavior: contain; }
.sbar-nav::-webkit-scrollbar { width: 0; }
.sbar-link, .sbar-gbtn { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px;
  border-radius: 12px; color: #cfe9df; font: 700 14.5px 'Inter', sans-serif; text-decoration: none;
  background: none; border: none; cursor: pointer; text-align: left; }
.sbar-link .ic, .sbar-gbtn .ic { flex: none; width: 19px; height: 19px; color: #7fd3b3; }
.sbar-me-av-guest .ic { width: 18px; height: 18px; }
.sbar-link:hover, .sbar-gbtn:hover { background: rgba(255,255,255,.07); color: #fff; }
.sbar-link.active { background: linear-gradient(135deg, rgba(14,138,95,.55), rgba(10,91,88,.4)); color: #fff; }
.sbar-link.active .ic { color: #7af0c8; }
.sbar-link span, .sbar-gbtn > span:first-of-type { flex: 1; }
.sbar-caret { flex: none; font-size: 11px; color: #7fae9d; transition: transform .2s ease; }
.sbar-grp.open .sbar-caret { transform: rotate(180deg); }
.sbar-gitems { display: none; flex-direction: column; gap: 1px; margin: 1px 0 4px; }
.sbar-grp.open .sbar-gitems { display: flex; }
.sbar-sub { display: flex; align-items: center; gap: 7px; padding: 9px 12px 9px 24px; border-radius: 10px;
  color: #a9cdc0; font: 600 13.5px 'Inter', sans-serif; text-decoration: none; position: relative; }
.sbar-sub::before { content: ''; position: absolute; left: 11px; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(127,211,179,.4); transform: translateY(-50%); }
.sbar-sub:hover { background: rgba(255,255,255,.06); color: #fff; }
.sbar-sub.active { color: #fff; background: rgba(14,138,95,.3); }
.sbar-sub.active::before { background: #e8c84b; }
.sbar-tag { font-size: 9px; font-weight: 800; color: #fff; background: #ef4444; border-radius: 9px; padding: 1px 6px; margin-left: 4px; }
.sbar-badge { font-size: 10px; font-weight: 800; color: #0a2a22; background: #e8c84b; border-radius: 9px; padding: 0 6px; margin-left: auto; }
.sbar-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 9px; }
.sbar-join { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; border-radius: 13px;
  background: var(--grad-gold); color: #1a1200; font: 800 14px 'Inter', sans-serif; text-decoration: none;
  box-shadow: 0 8px 22px rgba(200,160,40,.4); }
.sbar-join:hover { transform: translateY(-1px); }
.sbar-foot .lang-picker { position: relative; }
.sbar-foot .lang-btn { width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #dff3ea; }
.sbar-foot .lang-menu { background: #0c3b2e; border-color: rgba(202,160,40,.3); bottom: calc(100% + 8px); top: auto; }
.sbar-foot .lang-menu button { color: #cfe9df; }
.sbar-foot .lang-menu button:hover { background: rgba(255,255,255,.08); color: #e8c84b; }
.sbar-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(6,24,18,.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.sbar-backdrop.show { opacity: 1; visibility: visible; }

/* slim topbar (mobile only) */
.tbar { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--em-line); }
.tbar-burger { background: none; border: none; cursor: pointer; color: var(--ink); width: 40px; height: 40px;
  border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; }
.tbar-burger:hover { background: rgba(11,110,79,.08); }
.tbar-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: 1; min-width: 0; }
.tbar-brand .brand-logo { width: 34px; height: 34px; border-radius: 10px; }
.tbar-brand .brand-fans { font: 900 14px 'Inter', sans-serif; letter-spacing: 1.5px; color: var(--ink); }
.tbar-act { display: flex; align-items: center; gap: 2px; }
.tbar-act .nav-ic { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; color: var(--ink2); }
.tbar-act .nav-ic:hover { background: rgba(11,110,79,.08); color: var(--ink); }

/* user panel */
.sbar-me { display: flex; align-items: center; gap: 10px; margin: 0 12px 8px; padding: 9px 11px; border-radius: 14px;
  text-decoration: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); transition: background .18s ease; }
.sbar-me:hover { background: rgba(255,255,255,.12); }
.sbar-me-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; background: #0b6e4f; }
.sbar-me-av-guest { display: inline-flex; align-items: center; justify-content: center; color: #7fd3b3; background: rgba(255,255,255,.08); }
.sbar-me-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.sbar-me-name { font: 800 14px 'Inter', sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbar-me-sub { font-size: 11.5px; color: #9fc7ba; }
.sbar-me-gold { color: #e8c84b; font-weight: 800; }
.sbar-collapse { display: none; background: rgba(255,255,255,.08); border: none; color: #cfe9df; width: 30px; height: 30px;
  border-radius: 9px; cursor: pointer; font: 900 18px/1 'Inter', sans-serif; align-items: center; justify-content: center; transition: transform .2s ease; flex: none; }
body.sb-collapsed .sbar-collapse { transform: rotate(180deg); }

/* DESKTOP: sidebar persistent, content offset, topbar hidden */
@media (min-width: 1024px) {
  .sbar { transform: none; box-shadow: 0 0 40px rgba(8,40,30,.18); }
  body.sky { padding-left: 272px; }
  .tbar { display: none; }
  .sbar-close, .sbar-backdrop { display: none !important; }
  .sbar-collapse { display: inline-flex; }

  /* collapsed-to-icons state */
  body.sb-collapsed.sky { padding-left: 80px; }
  body.sb-collapsed .sbar { width: 80px; }
  body.sb-collapsed .sbar-head { flex-direction: column; gap: 8px; padding: 14px 8px 8px; }
  body.sb-collapsed .sbar-brand-txt, body.sb-collapsed .sbar-me-txt,
  body.sb-collapsed .sbar-link span, body.sb-collapsed .sbar-gbtn > span:first-of-type,
  body.sb-collapsed .sbar-caret, body.sb-collapsed .sbar-tag, body.sb-collapsed .sbar-badge,
  body.sb-collapsed .sbar-join span, body.sb-collapsed .sbar-foot .lang-picker { display: none; }
  body.sb-collapsed .sbar-me { justify-content: center; padding: 8px; }
  body.sb-collapsed .sbar-link, body.sb-collapsed .sbar-gbtn { justify-content: center; padding: 12px 0; gap: 0; }
  body.sb-collapsed .sbar-join { padding: 12px 0; }
  /* group sub-items become a hover flyout */
  body.sb-collapsed .sbar-grp { position: relative; }
  body.sb-collapsed .sbar-gitems { display: none !important; position: absolute; left: calc(100% + 8px); top: 0;
    min-width: 206px; background: #0c3b2e; border: 1px solid rgba(202,160,40,.28); border-radius: 14px; padding: 8px;
    box-shadow: 0 16px 44px rgba(0,0,0,.45); z-index: 140; }
  body.sb-collapsed .sbar-grp:hover .sbar-gitems { display: flex !important; }
}

/* ============================================================ *
 *  HERO · 2026 — flagship of the design-system rebuild
 *  Uses --sp / --fs / brand tokens from tokens.css
 * ============================================================ */
.hero2-sec{ padding-top: var(--sp-5); padding-bottom: var(--sp-6); }
.hero2{ display:grid; grid-template-columns: 1.12fr .88fr; gap: var(--sp-7); align-items:center; }
.hero2-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size: var(--fs-sm);
  color: var(--em-500); background: var(--em-50); border:1px solid var(--em-100);
  padding:6px 13px; border-radius: var(--r-pill); }
.hero2-eyebrow .ic{ color: var(--em-400); }
.hero2-title{ font: var(--fw-black) clamp(30px, 4.4vw, 46px)/1.08 var(--font);
  letter-spacing: var(--ls-tight); color: var(--text-1); margin: var(--sp-4) 0 var(--sp-3);
  text-wrap: balance; }
.hero2-title .grad{ background: var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero2-sub{ font-size: var(--fs-body-lg); line-height: var(--lh-normal); color: var(--text-2);
  max-width: 46ch; margin:0 0 var(--sp-5); }
.hero2-cta{ display:flex; flex-wrap:wrap; gap: var(--sp-3); }

/* ---- Button system (design-system primitive) ---- */
.btnx{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font: var(--fw-bold) var(--fs-body)/1 var(--font); text-decoration:none; cursor:pointer;
  padding: 13px 20px; border-radius: var(--r-sm); border:1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btnx:active{ transform: translateY(1px); }
.btnx:focus-visible{ outline:3px solid var(--em-200); outline-offset:2px; }
.btnx .ic{ flex:none; }
.btnx-lg{ padding: 15px 24px; font-size: var(--fs-body-lg); }
.btnx-gold{ background: var(--grad-gold); color:#1a1200; box-shadow: 0 10px 26px rgba(202,160,40,.36); }
.btnx-gold:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(202,160,40,.5); }
.btnx-ghost{ background: var(--surface-0); color: var(--em-700); border-color: var(--hairline); box-shadow: var(--shadow-1); }
.btnx-ghost:hover{ border-color: var(--em-200); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btnx-ghost .ic{ color: var(--em-400); }

/* ---- Social proof + trust ---- */
.hero2-proof{ display:flex; align-items:center; gap: var(--sp-4); margin-top: var(--sp-6); }
.hp-stat{ display:flex; flex-direction:column; line-height:1.12; }
.hp-stat b{ font: var(--fw-black) 26px var(--font); color: var(--text-1); letter-spacing:-.01em; }
.hp-stat span{ font-size: var(--fs-caption); font-weight:600; letter-spacing: var(--ls-wide);
  text-transform:uppercase; color: var(--text-3); margin-top:2px; }
.hp-div{ width:1px; height:30px; background: var(--hairline); flex:none; }
.hero2-trust{ display:flex; flex-wrap:wrap; gap: var(--sp-4); margin-top: var(--sp-4); }
.ht-item{ display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-sm); font-weight:600; color: var(--text-2); }
.ht-item .ic{ color: var(--c-success); }

/* ---- Card stage ---- */
.hero2-stage{ flex-direction:column; align-items:center; gap: var(--sp-3); }
.hero2-cap{ display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-sm); font-weight:600; color: var(--text-3); }
.hero2-cap .ic{ color: var(--c-success); }

@media (max-width: 860px){
  .hero2{ grid-template-columns: 1fr; gap: var(--sp-6); text-align:center; }
  .hero2-copy{ display:flex; flex-direction:column; align-items:center; }
  .hero2-stage{ order:-1; }
  .hero2-sub{ max-width: 52ch; }
  .hero2-cta, .hero2-proof, .hero2-trust{ justify-content:center; }
}
@media (max-width: 420px){
  .hero2-proof{ gap: var(--sp-3); }
  .hp-stat b{ font-size: 22px; }
  .btnx-lg{ padding: 14px 18px; }
}
/* ---- SM Chat composer / shared-tag inline-icon polish ---- */
.bz-shared-tag{ display:flex; align-items:center; gap:5px; }
.bz-shared-tag .ic{ color: var(--em-400); }
.bz-cam .ic{ display:block; }
.hero2-eyebrow .ic{ flex:none; }
/* ============================================================ *
 *  HOMEPAGE · clean single-purpose layout (one page = one job)
 * ============================================================ */
.home-h2{ font: var(--fw-black) var(--fs-h2)/1.12 var(--font); letter-spacing:var(--ls-tight); color:var(--text-1); margin:0 0 var(--sp-1); }
.home-h2 .grad{ background:var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent; }
.home-sub{ color:var(--text-2); font-size:var(--fs-body); margin:0 0 var(--sp-4); }

/* road-to-1M key-stat strip */
.home-road{ padding:18px 22px; }
.hrd-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.hrd-label{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:var(--fs-sm); color:var(--text-1); }
.hrd-label .ic{ color:var(--gold-600); flex:none; }
.hrd-pct{ font:var(--fw-black) 16px var(--font); color:var(--em-500); }
.hrd-track{ height:12px; border-radius:var(--r-pill); background:var(--em-50); overflow:hidden; border:1px solid var(--em-100); }
.hrd-track > span{ display:block; height:100%; border-radius:var(--r-pill); min-width:6px;
  background:linear-gradient(90deg, var(--em-500), var(--em-400), var(--gold-300)); transition:width 1s ease; }
.hrd-sub{ font-size:var(--fs-sm); color:var(--text-2); margin-top:9px; text-align:center; }
.hrd-sub strong{ color:var(--text-1); }
.hrd-sub a{ color:var(--em-500); font-weight:700; text-decoration:none; }

/* community preview card */
.home-card{ padding:8px; }
.home-card-head{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px 8px; }
.home-card-head h3{ display:inline-flex; align-items:center; gap:8px; margin:0; font:var(--fw-black) var(--fs-h4) var(--font); color:var(--text-1); }
.home-card-head h3 .ic{ color:var(--gold-600); flex:none; }
.home-link{ font-size:var(--fs-sm); font-weight:700; color:var(--em-500); text-decoration:none; white-space:nowrap; }
.home-rank{ display:flex; align-items:center; gap:12px; padding:11px 12px; }
.home-rank + .home-rank{ border-top:1px solid var(--hairline); }
.hrk-pos{ width:22px; text-align:center; font:var(--fw-black) 15px var(--font); color:var(--text-3); flex:none; }
.hrk-pos1{ color:var(--gold-600) } .hrk-pos2{ color:#8a9bb0 } .hrk-pos3{ color:#c08457 }
.hrk-av{ width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font:var(--fw-black) 16px var(--font); color:#fff; background:var(--grad-royal); }
.hrk-name{ flex:1; min-width:0; font-weight:700; color:var(--text-1); font-size:var(--fs-body); display:flex; flex-direction:column; line-height:1.2; overflow:hidden; }
.hrk-name span{ font-size:var(--fs-caption); font-weight:600; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hrk-score{ font:var(--fw-black) 15px var(--font); color:var(--em-500); text-align:right; line-height:1.1; flex:none; }
.hrk-score span{ display:block; font-size:9px; font-weight:700; color:var(--text-3); letter-spacing:.05em; }

/* final CTA */
.home-cta{ text-align:center; padding:32px 24px; border-radius:var(--r-xl); color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--em-500), var(--em-700)); box-shadow:var(--shadow-3); }
.home-cta::before{ content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,200,75,.28), transparent 70%); pointer-events:none; }
.home-cta h2{ font:var(--fw-black) var(--fs-h2) var(--font); margin:0 0 var(--sp-1); position:relative; }
.home-cta p{ color:rgba(255,255,255,.82); margin:0 0 var(--sp-4); position:relative; }
.home-cta-row{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; position:relative; }
.home-cta .btnx-ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.28); }
.home-cta .btnx-ghost:hover{ background:rgba(255,255,255,.2); }
.home-cta .btnx-ghost .ic{ color:#fff; }
@media (max-width:520px){ .home-cta{ padding:24px 16px; } }
/* ============================================================ *
 *  SM CHAT · messaging-app header (no marketing banner)
 * ============================================================ */
.chat-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.chat-title{ font:var(--fw-black) clamp(24px,4vw,30px) var(--font); letter-spacing:var(--ls-tight); color:var(--text-1); margin:0; }
.chat-live{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:700; color:var(--em-500);
  background:var(--em-50); border:1px solid var(--em-100); padding:4px 11px; border-radius:var(--r-pill); }
.chat-live-dot{ width:8px; height:8px; border-radius:50%; background:#1db954; box-shadow:0 0 0 0 rgba(29,185,84,.5); animation:chatPulse 1.6s ease-out infinite; }
@keyframes chatPulse{ 0%{box-shadow:0 0 0 0 rgba(29,185,84,.5)} 100%{box-shadow:0 0 0 7px rgba(29,185,84,0)} }
.chat-tabs{ display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.chat-seg{ display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:var(--r-md); border:1px solid var(--hairline); }
.chat-seg-btn{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; padding:8px 15px; border-radius:10px;
  font-weight:700; font-size:var(--fs-sm); color:var(--text-2); transition:background .16s ease, color .16s ease; }
.chat-seg-btn .ic{ flex:none; }
.chat-seg-btn.on{ background:var(--grad-royal); color:#fff; box-shadow:var(--shadow-2); }
.chat-circles{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-weight:700; font-size:var(--fs-sm);
  color:var(--em-600); background:var(--em-50); border:1px solid var(--em-100); border-radius:var(--r-md); padding:9px 14px; }
.chat-circles .ic{ flex:none; }
.chat-empty{ padding:34px; text-align:center; color:var(--text-2); }
.chat-empty-ic{ display:inline-flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:50%;
  background:var(--em-50); color:var(--em-400); margin-bottom:10px; }
.chat-empty-t{ margin:0 0 4px; font-weight:800; color:var(--text-1); }
.chat-empty-s{ margin:0; font-size:var(--fs-sm); }
/* ---- Online presence dots (SM Chat / DMs / profile) ---- */
.bz-av-link, .bz-cav{ position:relative; display:inline-block; }
.online-dot{ position:absolute; right:0; bottom:0; width:13px; height:13px; border-radius:50%;
  background:#1db954; border:2.5px solid var(--surface-0); box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.online-dot-sm{ width:10px; height:10px; border-width:2px; }
.presence-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink2); }
.presence-pill .pd{ width:9px; height:9px; border-radius:50%; background:#9fb0aa; }
.presence-pill.is-online{ color:var(--c-success); }
.presence-pill.is-online .pd{ background:#1db954; box-shadow:0 0 0 0 rgba(29,185,84,.5); animation:presencePulse 1.8s ease-out infinite; }
@keyframes presencePulse{ 0%{box-shadow:0 0 0 0 rgba(29,185,84,.5)} 100%{box-shadow:0 0 0 7px rgba(29,185,84,0)} }

/* ---- Global button loading state (form submit feedback) ---- */
button.is-loading, .btn.is-loading, .btnx.is-loading,
body.sky .btn.is-loading, body.sky .btnx.is-loading{ color:transparent !important; pointer-events:none; position:relative; }
button.is-loading::after, .btn.is-loading::after, .btnx.is-loading::after{
  content:''; position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border:2px solid var(--em-500); border-top-color:transparent; border-radius:50%;
  animation:btnspin .6s linear infinite; }
.btn-gold.is-loading::after, .btnx-gold.is-loading::after, .sbar-join.is-loading::after,
.footer-cta-primary.is-loading::after{ border-color:#1a1200; border-top-color:transparent; }
@keyframes btnspin{ to{ transform:rotate(360deg) } }

/* ---- Loading skeletons for lazy-loaded search grids ---- */
.skel-card{ height:120px; border-radius:16px; border:1px solid var(--hairline);
  background:linear-gradient(100deg, var(--surface-2) 28%, var(--surface-0) 48%, var(--surface-2) 68%);
  background-size:220% 100%; animation:skelShimmer 1.25s ease-in-out infinite; }
@keyframes skelShimmer{ to{ background-position:-220% 0 } }
@media (prefers-reduced-motion: reduce){ .skel-card{ animation:none } }