/* Design tokens, fonts, base elements + layout (topbar/profilebar/wrap). */
/* Creators by tripaulx — design tokens ported from tripaulx_os (dark theme). No build step. */
@font-face {
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/static/fonts/InterVariable.woff2') format('woff2-variations');
}
@font-face {
  font-family:'Inter'; font-style:italic; font-weight:100 900; font-display:swap;
  src:url('/static/fonts/InterVariable-Italic.woff2') format('woff2-variations');
}
:root {
  /* tripaulx brand ramp (OKLCH, theme-independent) */
  --tx-cyan:oklch(85.5% 0.130 215);      /* blue-400 (anchor #2FE9FF) */
  --tx-cyan-soft:oklch(88.5% 0.110 215); /* blue-300 */
  --tx-violet:oklch(63% 0.185 280);      /* violet-400 (#655AD4) */
  --tx-red:oklch(70% 0.205 27);          /* red-400 (#F53C3B) */

  /* DARK theme (default) — gradients reference --blue/--purple so they follow the theme */
  --bg:oklch(0% 0 0); --surface:oklch(13% 0 0); --elevated:oklch(17% 0 0); --elevated2:oklch(19% 0 0);
  --border:oklch(22% 0 0); --border2:oklch(28% 0 0);
  --text:oklch(97% 0 0); --muted:oklch(68% 0 0); --faint:oklch(50% 0 0);
  --blue:var(--tx-cyan); --purple:var(--tx-violet); --pink:var(--tx-violet); --grad3:var(--tx-cyan-soft);
  --ok:oklch(88% 0.240 145); --warn:oklch(93.5% 0.160 102); --danger:var(--tx-red);
  --grad:linear-gradient(90deg,var(--blue),var(--purple),var(--grad3));
  --grad-btn:linear-gradient(90deg,var(--blue),var(--purple));
  --radius:20px; --radius-sm:14px;
}
[data-theme="light"] {
  /* tripaulx light theme: warm cream canvas, white surfaces, darker brand for contrast */
  --bg:hsl(33 69% 97%); --surface:#ffffff; --elevated:#ffffff; --elevated2:oklch(93.9% 0.011 77);
  --border:oklch(91.5% 0.011 77); --border2:oklch(86.6% 0.010 73);
  --text:oklch(17.7% 0.004 264); --muted:oklch(52% 0.008 68); --faint:oklch(72% 0.010 78);
  --blue:oklch(50% 0.13 212); --purple:oklch(48% 0.20 280); --pink:oklch(48% 0.20 280); --grad3:oklch(63% 0.14 213);
  --ok:oklch(62% 0.18 150); --warn:oklch(68% 0.14 90); --danger:oklch(51% 0.20 27);
}
* { box-sizing:border-box; }
html,body { margin:0; }
body {
  background:
    radial-gradient(900px 500px at 80% -10%, color-mix(in oklch, var(--tx-violet) 16%, transparent), transparent 60%),
    radial-gradient(700px 400px at 0% 0%, color-mix(in oklch, var(--tx-cyan) 12%, transparent), transparent 55%),
    var(--bg);
  color:var(--text); min-height:100vh;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px; line-height:1.45;
  font-feature-settings:'cv11','ss01','ss03';
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { color:var(--blue); text-decoration:none; }
.hidden { display:none !important; }
.muted { color:var(--muted); }

/* layout */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; padding:14px 24px;
  background:color-mix(in oklch, var(--bg) 72%, transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); transition:opacity .2s ease; }
/* On the dashboard, once the floating profilebar is up (scrolled past the profile
   card), hide the main topbar — the profilebar takes its place at the top. */
body.pb-active .topbar { opacity:0; pointer-events:none; }
.logo { display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-weight:700; font-size:15px; color:var(--text); letter-spacing:.01em; }
.logo .logo-mark { width:22px; height:22px; flex:none; }
.logo .logo-text b { font-weight:700; color:var(--muted); }
.nav { display:flex; gap:8px; align-items:center; }
.nav a { color:var(--muted); padding:8px 12px; border-radius:999px; font-weight:600; cursor:pointer; }
.nav a:hover { color:var(--text); background:var(--surface); }
/* Right-side cluster: nav links (when logged in) + the always-visible theme and
   language controls, grouped together at the far right of the topbar. */
.topbar-right { display:flex; align-items:center; gap:8px; }
.icon-btn { color:var(--muted); padding:6px 10px; border-radius:999px; cursor:pointer; line-height:1; }
.icon-btn:hover { color:var(--text); background:var(--surface); }
/* Language switcher: a flag button that opens a dropdown of the supported locales. */
.lang-switch { position:relative; }
.lang-switch .lang-btn { display:inline-flex; align-items:center; gap:4px; background:none; border:0;
  cursor:pointer; padding:5px 8px; border-radius:999px; font-size:18px; line-height:1; }
.lang-switch .lang-btn:hover { background:var(--surface); }
.lang-switch .lang-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:30;
  display:flex; flex-direction:column; gap:2px; padding:6px; border-radius:14px;
  background:var(--surface); border:1px solid var(--border); box-shadow:0 8px 28px rgba(0,0,0,.28); }
.lang-switch .lang-menu[hidden] { display:none; }
.lang-switch .lang-menu button { background:none; border:0; cursor:pointer; font-size:20px; line-height:1;
  padding:6px 10px; border-radius:10px; }
.lang-switch .lang-menu button:hover { background:color-mix(in oklch, var(--text) 10%, transparent); }
.lang-switch .lang-menu button.active { background:color-mix(in oklch, var(--brand, var(--text)) 18%, transparent); }
.wrap { max-width:1240px; margin:0 auto; padding:28px 24px 80px; }

/* mini-header fixo (avatar + nome + seguidores + temas), aparece durante o scroll */
.profilebar { position:fixed; left:0; right:0; top:0; z-index:21;
  background:color-mix(in oklch, var(--bg) 90%, transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:transform .22s ease, opacity .22s ease; }
.profilebar.show { transform:translateY(0); opacity:1; pointer-events:auto; }
.pb-inner { max-width:1240px; margin:0 auto; padding:8px 24px; display:flex; align-items:center; gap:16px; }
.pb-id { display:flex; align-items:center; gap:11px; min-width:0; }
.pb-clickable { cursor:pointer; }
.pb-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid var(--border2); background:var(--elevated); }
.pb-idtext { min-width:0; }
.pb-name { display:flex; align-items:center; gap:6px; font-weight:700; font-size:14px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-name .verified svg { width:14px; height:14px; }
.pb-meta { color:var(--muted); font-size:12px; white-space:nowrap; }
.pb-meta span + span::before { content:" · "; }
/* Score ring in the floating bar — a compact version of the dashboard mini-ring,
   pushed right so the score + themes group at the far end. */
.pb-score { margin-left:auto; flex:none; display:flex; align-items:center; }
.pb-score .mini-ring { width:34px; height:34px; }
.pb-score .mini-ring .inner { width:26px; height:26px; }
.pb-score .mini-ring .v { font-size:12px; }
.pb-themes { display:flex; gap:6px; align-items:center; overflow:hidden; flex-wrap:nowrap; }
.pb-theme { display:inline-flex; align-items:center; gap:6px; flex:none;
  background:var(--elevated); border:1px solid var(--border2); border-radius:999px; padding:3px 11px 3px 3px; }
.pb-theme .pb-ic { width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:50%;
  color:var(--c); background:color-mix(in oklch, var(--c) 16%, transparent);
  border:1px solid color-mix(in oklch, var(--c) 30%, transparent); }
.pb-theme .pb-ic svg { width:13px; height:13px; }
.pb-theme .pb-tn { font-size:12px; font-weight:600; color:var(--text); }
@media (max-width:760px) { .pb-themes { display:none; } }