/* =====================================================================
   NAIJA HUSTLE — LIQUID GLASS THEME
   Translucent, refractive glass surfaces over a living colour field.
   Active when <body class="glass">. "Classic" theme removes the class.
===================================================================== */
:root {
  --g-fill: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 55%, rgba(255,255,255,.06));
  --g-fill-strong: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.06) 60%, rgba(255,255,255,.1));
  --g-edge: rgba(255,255,255,.16);
  --g-edge-hi: rgba(255,255,255,.34);
  --g-shadow: 0 10px 34px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.18);
  --g-inset: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.04);
  --g-blur: blur(18px) saturate(185%);
  --g-blur-soft: blur(11px) saturate(165%);
}

/* ---------- living background ---------- */
#bgfx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; display: none; background: #050B08; }
body.glass #bgfx { display: block; }
body.glass { background: #050B08; }
#bgfx i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
#bgfx i:nth-child(1) { width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle, #0E9F63, transparent 65%); animation: blobA 26s ease-in-out infinite; }
#bgfx i:nth-child(2) { width: 52vmax; height: 52vmax; right: -16vmax; top: 6vmax; background: radial-gradient(circle, #E09A12, transparent 65%); animation: blobB 31s ease-in-out infinite; opacity: .42; }
#bgfx i:nth-child(3) { width: 58vmax; height: 58vmax; left: 10vmax; bottom: -30vmax; background: radial-gradient(circle, #7C3AED, transparent 65%); animation: blobC 35s ease-in-out infinite; opacity: .38; }
#bgfx i:nth-child(4) { width: 40vmax; height: 40vmax; right: 8vmax; bottom: -10vmax; background: radial-gradient(circle, #0EA5E9, transparent 65%); animation: blobA 29s ease-in-out infinite reverse; opacity: .32; }
#bgfx b { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 3px 3px; opacity: .35; mix-blend-mode: overlay; }
@keyframes blobA { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(8vmax, 6vmax) scale(1.12); } 66% { transform: translate(-4vmax, 10vmax) scale(.92); } }
@keyframes blobB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10vmax, 12vmax) scale(1.15); } }
@keyframes blobC { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(12vmax, -8vmax) scale(1.1); } 75% { transform: translate(-6vmax, -4vmax) scale(.95); } }

/* ---------- glass surfaces ---------- */
body.glass #app { background: transparent; border: 0; }
body.glass .card, body.glass .stat, body.glass .li, body.glass .post, body.glass .lb-row, body.glass .city-li,
body.glass .quick button, body.glass .ticker, body.glass .seg, body.glass .ptypes button, body.glass .news, body.glass .sugg, body.glass .choice, body.glass .bg-card, body.glass .chat-log {
  background: var(--g-fill); border: 1px solid var(--g-edge); box-shadow: var(--g-inset), var(--g-shadow);
  -webkit-backdrop-filter: var(--g-blur-soft); backdrop-filter: var(--g-blur-soft);
  position: relative; isolation: isolate;
}
body.glass .card, body.glass .stat, body.glass .li, body.glass .post, body.glass .sugg, body.glass .choice, body.glass .quick button, body.glass .lb-row { overflow: hidden; }
/* specular highlight that follows the pointer (--mx/--my set by glass.js) */
body.glass .card::after, body.glass .stat::after, body.glass .li::after, body.glass .hero::after, body.glass .sugg::after, body.glass .choice::after, body.glass .quick button::after, body.glass .lb-row::after, body.glass .post::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 18%) var(--my, -10%), rgba(255,255,255,.16), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.07), transparent 38%);
  opacity: .9; transition: opacity .3s;
}
body.glass .card { border-radius: 20px; }
body.glass .li, body.glass .stat, body.glass .post, body.glass .lb-row { border-radius: 18px; }
body.glass .card.hl { border-color: rgba(25,195,125,.55); box-shadow: var(--g-inset), 0 0 0 1px rgba(25,195,125,.2), 0 10px 40px rgba(14,159,99,.25); }
body.glass .card.gold-hl { border-color: rgba(245,184,61,.5); box-shadow: var(--g-inset), 0 10px 40px rgba(224,154,18,.18); }
body.glass .sugg { background: linear-gradient(120deg, rgba(245,184,61,.2), rgba(255,255,255,.04)); border-color: rgba(245,184,61,.32); }
body.glass .news { background: linear-gradient(120deg, rgba(56,189,248,.18), rgba(255,255,255,.04)); border-color: rgba(56,189,248,.3); }

/* hero: thicker glass + 3D tilt (--rx/--ry set by glass.js) */
body.glass .hero {
  background: var(--g-fill-strong), radial-gradient(400px 200px at 90% 0%, rgba(245,184,61,.25), transparent 70%), radial-gradient(420px 240px at 0% 100%, rgba(25,195,125,.25), transparent 70%);
  border: 1px solid var(--g-edge-hi); border-radius: 26px; box-shadow: var(--g-inset), 0 20px 50px rgba(0,0,0,.4);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1); isolation: isolate;
}
body.glass .hero::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%); background-size: 250% 100%; animation: glassSheen 7s ease-in-out infinite; z-index: 1; }
@keyframes glassSheen { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }

/* header: floating glass bar */
body.glass .hdr {
  margin: 8px 8px 0; border-radius: 22px; border: 1px solid var(--g-edge);
  background: linear-gradient(160deg, rgba(20,40,30,.55), rgba(10,20,15,.4)); box-shadow: var(--g-inset), 0 10px 30px rgba(0,0,0,.35);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
}
body.glass .hdr-av { box-shadow: 0 0 0 2px rgba(245,184,61,.9), 0 4px 14px rgba(0,0,0,.4); }
body.glass .chip { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.glass .chip.loc { background: rgba(25,195,125,.18); border-color: rgba(25,195,125,.45); }
body.glass .bar { background: rgba(255,255,255,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
body.glass .bar > i { box-shadow: 0 0 10px currentColor, inset 0 1px 0 rgba(255,255,255,.4); position: relative; }

/* nav: floating pill on phones */
body.glass .nav {
  margin: 0 10px calc(8px + var(--safe-b)); padding: 7px 6px; border-radius: 30px; border: 1px solid var(--g-edge-hi);
  background: linear-gradient(160deg, rgba(30,50,40,.55), rgba(10,20,15,.45)); box-shadow: var(--g-inset), 0 16px 40px rgba(0,0,0,.45);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
}
body.glass .nav button.on::before { display: none; }
body.glass .nav button { z-index: 2; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
body.glass .nav button.on { transform: translateY(-1px) scale(1.04); }
body.glass .nav button.on .e { filter: drop-shadow(0 2px 6px rgba(25,195,125,.5)); }
#navLens { position: fixed; z-index: 6; pointer-events: none; border-radius: 22px; opacity: 0; display: none;
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -6px 14px rgba(25,195,125,.18), 0 6px 18px rgba(0,0,0,.3);
  transition: left .5s cubic-bezier(.3,1.45,.45,1), top .5s cubic-bezier(.3,1.45,.45,1), width .5s cubic-bezier(.3,1.45,.45,1), height .5s cubic-bezier(.3,1.45,.45,1), opacity .3s; }
body.glass #navLens { display: block; }
#navLens.moving { animation: lensWobble .5s ease-out; }
@keyframes lensWobble { 0% { transform: scale(1, 1); } 30% { transform: scale(1.18, .86); } 60% { transform: scale(.94, 1.06); } 100% { transform: scale(1, 1); } }
.sheet-open #navLens { opacity: 0 !important; }

/* segmented control */
body.glass .seg { border-radius: 18px; padding: 4px; }
body.glass .seg button { border-radius: 14px; transition: background .3s, color .3s, transform .35s cubic-bezier(.3,1.6,.5,1); }
body.glass .seg button.on { background: linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 12px rgba(0,0,0,.25); color: #fff; }

/* buttons: liquid pills */
body.glass .btn { border-radius: 16px; position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.3,1.6,.5,1), filter .2s, box-shadow .2s; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 6px rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.25); }
body.glass .btn::before { content: ''; position: absolute; left: 6%; right: 6%; top: 1px; height: 46%; border-radius: 14px 14px 40% 40%; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0)); pointer-events: none; }
body.glass .btn { background: linear-gradient(180deg, #2BE08F, #0E9F63); }
body.glass .btn.gold { background: linear-gradient(180deg, #FFD26B, #E09A12); }
body.glass .btn.pink { background: linear-gradient(180deg, #F9A8D4, #DB2777); color: #fff; }
body.glass .btn.violet { background: linear-gradient(180deg, #C4B5FD, #7C3AED); color: #fff; }
body.glass .btn.ghost { background: var(--g-fill); border: 1px solid var(--g-edge); color: var(--text); -webkit-backdrop-filter: var(--g-blur-soft); backdrop-filter: var(--g-blur-soft); box-shadow: var(--g-inset), 0 4px 14px rgba(0,0,0,.2); }
body.glass .btn.danger { background: linear-gradient(180deg, rgba(248,113,113,.28), rgba(248,113,113,.12)); border: 1px solid rgba(248,113,113,.45); color: #FECACA; }
body.glass .btn.xs { border-radius: 11px; } body.glass .btn.sm { border-radius: 13px; }
body.glass .opt { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
body.glass .opt.on { background: linear-gradient(160deg, rgba(25,195,125,.35), rgba(25,195,125,.12)); border-color: rgba(25,195,125,.7); }
body.glass .field { background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; box-shadow: inset 0 2px 6px rgba(0,0,0,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.glass .field:focus { border-color: rgba(25,195,125,.8); box-shadow: inset 0 2px 6px rgba(0,0,0,.3), 0 0 0 4px rgba(25,195,125,.18); }

/* liquid press */
.squish { animation: squish .42s cubic-bezier(.3,1.6,.5,1); }
@keyframes squish { 0% { transform: scale(1); } 30% { transform: scale(.93, .9); } 65% { transform: scale(1.03, 1.04); } 100% { transform: scale(1); } }
body.glass .card.tap:active, body.glass .li.tap:active { transform: scale(.98); }

/* sheets: floating thick glass */
body.glass .sheet-bg { background: rgba(2,8,5,.42); -webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%); }
body.glass .sheet {
  margin: 0 8px calc(8px + var(--safe-b)); width: calc(100% - 16px); border-radius: 30px; border: 1px solid var(--g-edge-hi);
  background: linear-gradient(165deg, rgba(34,58,46,.72), rgba(12,24,18,.62)); box-shadow: var(--g-inset), 0 30px 80px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
  animation: sheetUp .5s cubic-bezier(.25,1.35,.4,1);
}
@keyframes sheetUp { from { transform: translateY(105%) scale(.96); opacity: .4; } to { transform: none; opacity: 1; } }
body.glass .sheet::before { background: rgba(255,255,255,.35); }
body.glass .toast { background: linear-gradient(160deg, rgba(40,64,52,.75), rgba(14,26,20,.7)); border: 1px solid var(--g-edge-hi); border-radius: 18px; box-shadow: var(--g-inset), 0 12px 30px rgba(0,0,0,.4); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
body.glass .scene { border: 1px solid var(--g-edge-hi); border-radius: 26px; box-shadow: var(--g-inset), 0 20px 50px rgba(0,0,0,.45); }
body.glass .scene-cap .chip { background: rgba(8,17,13,.38); }
body.glass .vig-banner, body.glass .vig-thumb { border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px rgba(0,0,0,.25); }
body.glass .ic { background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.1); }
body.glass .bub { background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); border-radius: 18px; }
body.glass .bub.me { background: linear-gradient(160deg, rgba(43,224,143,.32), rgba(14,159,99,.18)); border-color: rgba(43,224,143,.4); }
body.glass .creator { background: transparent; }
body.glass .creator .cr-preview .av { box-shadow: 0 0 0 4px rgba(245,184,61,.85), 0 0 60px rgba(245,184,61,.35), 0 20px 50px rgba(0,0,0,.5); }

/* desktop */
@media (min-width: 900px) {
  body.glass #app { gap: 0; }
  body.glass .hdr { margin: 12px 12px 0; }
  body.glass .nav { margin: 12px 0 12px 12px; border-radius: 26px; padding: 14px 10px; }
  body.glass .sheet { margin: 0; width: 100%; }
  #navLens { border-radius: 14px; }
}
/* accessibility + performance escape hatches */
@media (prefers-reduced-transparency: reduce) { body.glass .card, body.glass .li, body.glass .stat, body.glass .post { -webkit-backdrop-filter: none; backdrop-filter: none; background: #142820; } }
@media (prefers-reduced-motion: reduce) { #bgfx i, body.glass .hero::before { animation: none !important; } }
body.glass .btn.ghost::before, body.glass .btn.danger::before { opacity: .45; height: 40%; }
body:has(#creator:not(.hidden)) #app, body:has(#creator:not(.hidden)) #navLens { visibility: hidden; }