/* shared catppuccin-mocha theme for all giggles dashboard pages.
   Pages just <link> this and drop their own :root palette; the legacy variable
   names (--bg/--card/--good/…) are aliased to catppuccin below so existing
   component CSS restyles automatically. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root{
  /* catppuccin mocha */
  --base:#1e1e2e; --mantle:#181825; --crust:#11111b;
  --s0:#313244; --s1:#45475a; --s2:#585b70;
  --ov0:#6c7086; --ov1:#7f849c; --ov2:#9399b2;
  --sub0:#a6adc8; --sub1:#bac2de; --text:#cdd6f4;
  --lav:#b4befe; --blue:#89b4fa; --sapphire:#74c7ec; --sky:#89dceb;
  --teal:#94e2d5; --green:#a6e3a1; --yellow:#f9e2af; --peach:#fab387;
  --maroon:#eba0ac; --red:#f38ba8; --mauve:#cba6f7; --pink:#f5c2e7;
  --rad:10px;

  /* legacy aliases used by /aura, /collection, /collector, /explorer, /shadow2 */
  --bg:var(--base); --card:var(--mantle); --line:var(--s0);
  --fg:var(--text); --dim:var(--ov1);
  --good:var(--green); --ok:var(--green); --bad:var(--red);
  --warn:var(--yellow); --accent:var(--lav); --acc:var(--lav);
  --muted:var(--ov1); --border:var(--s0);
}

html,body{background:var(--base);color:var(--text);}
body{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace !important;
  text-transform:lowercase; font-size:13px; line-height:1.55;}
/* keep code/monospace-y bits legible; don't lowercase user data attributes set inline */
h1,h2,h3{font-weight:500;letter-spacing:-.01em}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--s2);color:var(--text)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--s1);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ---- universal nav (injected by nav.js) ---- */
#gnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:2px;
  flex-wrap:wrap;background:rgba(24,24,37,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--s0);padding:8px 14px;margin:-0px 0 4px}
#gnav .brand{font-weight:700;color:var(--lav);font-size:13px;margin-right:10px;
  text-transform:lowercase;letter-spacing:-.02em}
#gnav a{color:var(--ov1);font-size:12px;padding:5px 10px;border-radius:7px;
  text-transform:lowercase;white-space:nowrap}
#gnav a:hover{background:var(--s0);color:var(--text);text-decoration:none}
#gnav a.on{background:var(--lav);color:var(--crust);font-weight:500}
#gnav .sp{flex:1}
#gnav .tag{color:var(--ov0);font-size:11px}
/* logged-in account badge (pfp) */
.gme{display:flex;align-items:center;gap:7px;cursor:pointer;position:relative;
  padding:3px 8px 3px 3px;border:1px solid var(--s0);border-radius:20px;color:var(--sub0);font-size:11px}
.gme:hover{border-color:var(--lav);color:var(--text)}
.gme img,.gme-la{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none;background:var(--s1)}
.gme-la{display:flex;align-items:center;justify-content:center;color:var(--crust);
  background:var(--lav);font-weight:700;font-size:12px}
.gme-n{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.gme-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:220px;
  background:var(--mantle);border:1px solid var(--s0);border-radius:10px;padding:10px 12px;
  box-shadow:0 8px 30px rgba(0,0,0,.4);cursor:default;display:flex;flex-direction:column;gap:5px}
.gme-pop .gme-h{font-size:12px;color:var(--text)}
.gme-pop .gme-s{font-size:10px;color:var(--ov1)}
.gme-pop a{font-size:11px;color:var(--blue);padding:3px 0}
.gme-pop .gme-note{font-size:10px;color:var(--ov0);border-top:1px solid var(--s0);padding-top:6px;margin-top:2px}
.gme-pop .gme-btn{background:var(--lav);color:var(--crust);border:0;border-radius:7px;font:inherit;
  font-size:11px;font-weight:500;text-transform:lowercase;padding:6px 10px;cursor:pointer;margin-top:2px}
.gme-pop .gme-btn:hover{background:var(--mauve)}
.gme-pop .gme-msg{font-size:10px;color:var(--ov1)}
.gme-pop .gme-msg.ok{color:var(--green)} .gme-pop .gme-msg.bad{color:var(--red)}
@media(max-width:640px){.gme-n{display:none}}