/* ================= Groups tab — glossy-3D redesign (2026-10-05) =================
   Elevates the Groups tab (js/groups.js surfaces) into the glossy-3D visual
   language: dark #0D100A, glossy gradient cards with top sheen, volt-green
   accents (follows the rose gender theme via --volt-rgb), rounded-3xl,
   gradient borders on featured banners. NO purple anywhere.
   Scoping: new .gr-* classes are groups-only; .gu-scoped overrides deepen
   shared classes (.card, .gcard, .seg, .gu-row) WITHOUT touching Home /
   market / sheets, which reuse some of these shells. Dark-first (the app
   defaults to dark); body:not(.dark) carries the light-glass adaptation.
   All motion is transform/opacity-only; frozen under prefers-reduced-motion. */

/* ---------- hero banner: glossy gradient + gradient border ---------- */
.gr-hero{position:relative;overflow:hidden;border-radius:24px;
  display:flex;gap:14px;align-items:center;
  padding:18px 16px;margin:0 0 14px;
  border:1px solid transparent;
  background:
    linear-gradient(165deg,#18200f 0%,#0e130a 55%,#0b0e07 100%) padding-box,
    linear-gradient(135deg,rgba(var(--volt-rgb),.75),rgba(var(--volt-rgb),.10) 38%,rgba(255,255,255,.22) 62%,rgba(var(--volt-rgb),.45)) border-box;
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 34px rgba(var(--volt-rgb),.10)}
.gr-hero::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,0) 46%)}
.gr-hero::after{content:'';position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,rgba(var(--volt-rgb),.30),rgba(var(--volt-rgb),0) 68%)}
.gr-hero .gu-motes{z-index:0}
.gr-hero-ico{position:relative;z-index:1;flex:none;width:58px;height:58px;border-radius:19px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#2a3416,#12170a);
  border:1px solid rgba(var(--volt-rgb),.45);
  box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.28)}
.gr-hero-ico .ico img{width:40px;height:40px}
.gr-hero-tx{position:relative;z-index:1;min-width:0}
.gr-hero-tx h1{margin:0;font-size:26px;font-weight:900;letter-spacing:-.02em;color:#fff}
.gr-hero-tx p{margin:4px 0 0;font-size:13px;line-height:1.45;color:#b9c2a8}

/* ---------- glossy card (households) ---------- */
.gu .gr-card{position:relative;overflow:hidden;border-radius:24px;
  border:1px solid rgba(var(--volt-rgb),.16);
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 32%),
    linear-gradient(165deg,#161d0e,#0b0e07);
  box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.gu .gr-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.10),rgba(255,255,255,0) 40%)}

/* ---------- deepen shared .card glass into glossy (detail pages) ---------- */
body.dark .gu .card:not(.frq-card){
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 30%),
    linear-gradient(165deg,#151b0d,#0b0e07);
  border-color:rgba(var(--volt-rgb),.14);
  box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12)}

/* ---------- mode switcher: glossy dark pill, volt-gradient active ---------- */
.gu .seg{display:flex;flex-wrap:nowrap;gap:4px;padding:5px;border-radius:18px;overflow-x:auto;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)),#10150a;
  border:1px solid rgba(var(--volt-rgb),.18);
  box-shadow:0 10px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.10);
  scrollbar-width:none}
.gu .seg::-webkit-scrollbar{display:none}
.gu .seg button{flex:0 0 auto;min-width:0;border:0;background:transparent;color:#aeb8a0;
  font-weight:700;font-size:12.5px;white-space:nowrap;padding:9px 10px;border-radius:13px}
.gu .seg button.on{background:linear-gradient(180deg,#dcf76a,#b5dd2c);color:#131a00;
  box-shadow:0 6px 16px rgba(var(--volt-rgb),.35),inset 0 1px 0 rgba(255,255,255,.6)}
.gu .seg button:active{transform:scale(.95)}

/* ---------- carousel cards: glossy 3D surface (groups scope only) ---------- */
body.dark .gu .gcard{
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 34%),
    linear-gradient(170deg,#1b2210,#0c0f08);
  border:1px solid rgba(var(--volt-rgb),.20);
  box-shadow:0 30px 56px -22px rgba(0,0,0,.8),0 0 26px rgba(var(--volt-rgb),.10),
    inset 0 1px 0 rgba(255,255,255,.16)}
body.dark .gu .gcard .gcard-media{background:linear-gradient(160deg,#232c14,#0d1108)}
/* category pill: volt gradient chip under the meta row */
.gu .gcard-cat{display:inline-block;margin-top:9px;padding:4px 11px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.03em;color:#101503;
  background:linear-gradient(180deg,#dcf76a,#b0d82a);
  box-shadow:0 4px 12px rgba(var(--volt-rgb),.35),inset 0 1px 0 rgba(255,255,255,.6)}
/* LIVE badge: brighter volt gradient */
.gu .gcard-live{background:linear-gradient(180deg,#e2fa7e,#b8e02e);color:#101503;
  box-shadow:0 4px 14px rgba(0,0,0,.30),0 0 14px rgba(var(--volt-rgb),.55)}
.gu .livebadge{background:linear-gradient(180deg,#e2fa7e,#b8e02e);color:#101503;
  box-shadow:0 4px 14px rgba(0,0,0,.30),0 0 14px rgba(var(--volt-rgb),.55)}

/* ---------- "Your groups" + campus rows: glossy ---------- */
body.dark .gu .gu-row{
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 32%),
    linear-gradient(165deg,#151b0d,#0b0e07);
  border:1px solid rgba(var(--volt-rgb),.13);
  box-shadow:0 12px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}

/* ---------- group detail: photo hero gets a gradient border ---------- */
.gu .cghero{border:1px solid transparent;
  background:
    linear-gradient(rgba(10,13,7,.22),rgba(10,13,7,.22)) padding-box,
    linear-gradient(135deg,rgba(var(--volt-rgb),.60),rgba(var(--volt-rgb),.08) 45%,rgba(var(--volt-rgb),.40)) border-box}
.gu .cgchips .cgchip{border-color:rgba(var(--volt-rgb),.16)}

/* ---------- People "nearby" horizontal row (mockup-style) ---------- */
#grPplHost>h1.greet,#grPplHost>p.sub{display:none} /* hero above carries title+sub */
.gr-pplsec{margin:2px 0 14px}
.gr-sechd{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}
.gr-sechd h2{margin:0;font-size:17px;font-weight:900;letter-spacing:-.01em;color:#fff}
.gr-count{background:rgba(var(--volt-rgb),.14);border:1px solid rgba(var(--volt-rgb),.35);
  border-radius:999px;padding:3px 11px;font-weight:800;font-size:12px;color:var(--volt)}
.gr-pplrow{display:flex;gap:14px;overflow-x:auto;padding:8px 2px 12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gr-pplrow::-webkit-scrollbar{display:none}
.gr-pava{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:7px;
  min-width:66px;cursor:pointer}
.gr-pava:active{transform:scale(.94)}
.gr-pring{position:relative;width:64px;height:64px;border-radius:50%;padding:3px;
  background:conic-gradient(from 200deg,#c6f135,#4ade80,#d8f65e,#7ed321,#c6f135);
  box-shadow:0 8px 20px rgba(0,0,0,.45),0 0 16px rgba(var(--volt-rgb),.28)}
.gr-pini{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#1c2411,#0d1108);color:#fff;font-weight:800;font-size:19px;
  border:2px solid #0d100a}
.gr-pdot{position:absolute;right:1px;bottom:1px;width:15px;height:15px;border-radius:50%;
  background:var(--volt);border:3px solid #0d100a;box-shadow:0 0 10px rgba(var(--volt-rgb),.9)}
.gr-pname{font-size:11.5px;font-weight:700;color:#cfd8c2;max-width:72px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-psamp{font-size:9px;font-weight:800;letter-spacing:.06em;color:#9aa68c;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:1px 7px}

/* ---------- light mode: light-glass adaptation ---------- */
body:not(.dark) .gr-hero{
  background:
    linear-gradient(165deg,#ffffff 0%,#f0f4e4 60%,#e7edd8 100%) padding-box,
    linear-gradient(135deg,rgba(140,180,30,.75),rgba(140,180,30,.12) 38%,rgba(255,255,255,.7) 62%,rgba(140,180,30,.45)) border-box;
  box-shadow:0 16px 36px rgba(60,80,20,.16),inset 0 1px 0 rgba(255,255,255,.9)}
body:not(.dark) .gr-hero-tx h1{color:#131a00}
body:not(.dark) .gr-hero-tx p{color:#5c6650}
body:not(.dark) .gr-hero-ico{background:linear-gradient(160deg,#f4f8e8,#dde6c8);
  border-color:rgba(140,180,30,.5)}
body:not(.dark) .gu .seg{background:linear-gradient(180deg,#ffffff,#eef2e2);border-color:rgba(140,180,30,.3)}
body:not(.dark) .gu .seg button{color:#5c6650}
body:not(.dark) .gu .seg button.on{color:#131a00}
body:not(.dark) .gu .gcard{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(243,247,233,.92));
  border-color:rgba(140,180,30,.28)}
body:not(.dark) .gu .gcard-body h3{color:#131a00}
body:not(.dark) .gu .gcard-body p,body:not(.dark) .gu .gcard-meta{color:#5c6650}
body:not(.dark) .gu .gr-card{background:linear-gradient(180deg,#ffffff,#f2f5e8);
  border-color:rgba(140,180,30,.25);box-shadow:0 14px 30px rgba(60,80,20,.12),inset 0 1px 0 #fff}
body:not(.dark) .gu .gu-row{background:linear-gradient(180deg,#ffffff,#f4f7ea);
  border-color:rgba(140,180,30,.22)}
body:not(.dark) .gu .gu-row h3{color:#131a00}
body:not(.dark) .gr-sechd h2{color:#131a00}
body:not(.dark) .gr-pname{color:#4c5545}
body:not(.dark) .gr-pini{background:linear-gradient(160deg,#f2f6e6,#dde5c9);color:#131a00;border-color:#f4f7ea}
body:not(.dark) .gr-pring{box-shadow:0 8px 18px rgba(60,80,20,.25),0 0 12px rgba(140,180,30,.35)}
body:not(.dark) .gr-pdot{border-color:#f4f7ea}
body:not(.dark) .gu .cghero{border-color:rgba(140,180,30,.35)}

/* ---------- 320px safety ---------- */
@media (max-width:360px){
  .gr-hero{padding:14px 12px;gap:11px}
  .gr-hero-ico{width:48px;height:48px;border-radius:16px}
  .gr-hero-ico .ico img{width:33px;height:33px}
  .gr-hero-tx h1{font-size:22px}
  .gr-hero-tx p{font-size:12px}
  .gu .seg button{font-size:11.5px;padding:9px 4px}
  .gr-pring{width:58px;height:58px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .gr-hero,.gr-pring,.gr-pava,.gu .seg button{animation:none!important;transition:none!important}
}