/* ─────────────────────────────────────────────────────────────────────────────
   F33D3R Design System v3 — 2026
   White default · Dark mode · 6 accent themes
   Jony Ive × Twitter/Meta × Web 2.0 nostalgia (2003–2010)
   Spring physics · Apple spatial UI · Cards with depth
   ───────────────────────────────────────────────────────────────────────────── */

/* ══ TOKENS — LIGHT (default) ════════════════════════════════════════════════ */
:root {
  --accent:         #7B68EE;
  --accent-muted:   rgba(123,104,238,.11);
  --accent-glow:    rgba(123,104,238,.22);

  /* Light surface stack */
  --surface:        #EEE9E1;
  --panel:          #FFFFFF;
  --panel-2:        #F7F5F1;
  --panel-hover:    rgba(0,0,0,.038);
  --glass:          rgba(255,255,255,.82);

  /* Light borders */
  --border:         rgba(0,0,0,.10);
  --border-soft:    rgba(0,0,0,.058);

  /* Light text */
  --text-primary:   #111010;
  --text-secondary: rgba(17,16,16,.52);
  --text-muted:     rgba(17,16,16,.30);

  /* Light shadows — Web 2.0 depth */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 14px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.12);
  --shadow-xl:  0 32px 80px rgba(0,0,0,.14);

  /* Radii */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* Blur */
  --blur:        saturate(180%) blur(20px);

  /* Spring easing */
  --spring:      cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:    cubic-bezier(0.22,1,0.36,1);
}

/* ══ DARK MODE ════════════════════════════════════════════════════════════════ */
[data-mode="dark"] {
  --surface:        #05050A;
  --panel:          #0D0D16;
  --panel-2:        #111120;
  --panel-hover:    rgba(255,255,255,.024);
  --glass:          rgba(13,13,22,.88);

  --border:         rgba(255,255,255,.07);
  --border-soft:    rgba(255,255,255,.04);

  --text-primary:   #EEECEA;
  --text-secondary: rgba(238,236,234,.45);
  --text-muted:     rgba(238,236,234,.20);

  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  0 20px 60px rgba(0,0,0,.70);
  --shadow-xl:  0 40px 100px rgba(0,0,0,.80);
}

/* ══ ACCENT THEMES ════════════════════════════════════════════════════════════ */
[data-theme="void"]     { --accent:#7B68EE; --accent-muted:rgba(123,104,238,.11); --accent-glow:rgba(123,104,238,.22); }
[data-theme="aurora"]   { --accent:#2DD4C0; --accent-muted:rgba(45,212,192,.11);  --accent-glow:rgba(45,212,192,.22); }
[data-theme="sakura"]   { --accent:#E896B4; --accent-muted:rgba(232,150,180,.11); --accent-glow:rgba(232,150,180,.22); }
[data-theme="obsidian"] { --accent:#8B9BE8; --accent-muted:rgba(139,155,232,.11); --accent-glow:rgba(139,155,232,.22); }
[data-theme="moss"]     { --accent:#6DC47C; --accent-muted:rgba(109,196,124,.11); --accent-glow:rgba(109,196,124,.22); }
[data-theme="dusk"]     { --accent:#C8A05A; --accent-muted:rgba(200,160,90,.11);  --accent-glow:rgba(200,160,90,.22); }

/* Dark surface shading per accent */
[data-mode="dark"][data-theme="void"]     { --surface:#05050A; --panel:#0D0D18; }
[data-mode="dark"][data-theme="aurora"]   { --surface:#030F14; --panel:#071520; }
[data-mode="dark"][data-theme="sakura"]   { --surface:#0E060E; --panel:#160C14; }
[data-mode="dark"][data-theme="obsidian"] { --surface:#07071A; --panel:#0E0E24; }
[data-mode="dark"][data-theme="moss"]     { --surface:#040C05; --panel:#091409; }
[data-mode="dark"][data-theme="dusk"]     { --surface:#0E0A04; --panel:#18130A; }

/* ══ RESET ════════════════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
}
body {
  background:var(--surface);
  color:var(--text-primary);
  font-family:'DM Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  font-size:16px;
  line-height:1.55;
  overscroll-behavior:none;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
img { display:block; }
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }

/* Ambient depth glow — light is subtle tint, dark is radial accent */
body::before {
  content:'';
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse 60% 40% at 50% -10%,
    color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%);
  pointer-events:none;
  z-index:0;
}
[data-mode="dark"] body::before {
  background:
    radial-gradient(ellipse 65% 45% at 50% -8%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),
    radial-gradient(ellipse 40% 30% at 88% 88%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 60%);
}
#f33d3r-app { position:relative; z-index:1; }

/* ══ SPRING ANIMATIONS ════════════════════════════════════════════════════════ */
@keyframes spring-in {
  0%   { opacity:0; transform:scale(.92) translateY(-6px); }
  55%  { opacity:1; transform:scale(1.02) translateY(1px); }
  75%  { transform:scale(.99); }
  100% { transform:scale(1) translateY(0); }
}
@keyframes spring-up {
  0%   { opacity:0; transform:translateY(28px) scale(.96); }
  55%  { opacity:1; transform:translateY(-5px) scale(1.01); }
  75%  { transform:translateY(2px); }
  100% { transform:translateY(0) scale(1); }
}
@keyframes post-in {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fade-in {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes subtle-glow { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 14px var(--accent-glow)} }
@keyframes slide-up-drawer {
  from { transform:translateY(100%); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
@keyframes menu-in {
  from { opacity:0; transform:translateY(-6px) scale(.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

/* ══ SHELL LAYOUT ═════════════════════════════════════════════════════════════ */
.f33d3r-shell {
  display:flex;
  min-height:100vh;
  max-width:1340px;
  margin:0 auto;
}

/* ══ SIDEBAR ══════════════════════════════════════════════════════════════════ */
.f33d3r-sidebar {
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:72px;
  height:100vh;
  position:sticky;
  top:0;
  padding:20px 10px;
  flex-shrink:0;
  overflow:hidden;
  transition:width 220ms var(--ease-out);
  border-right:1px solid var(--border-soft);
  background:var(--panel);
}
@media (min-width:1024px) { .f33d3r-sidebar { display:flex; } }
@media (min-width:1220px) { .f33d3r-sidebar { width:224px; padding:24px 14px; } }
[data-mode="dark"] .f33d3r-sidebar { background:transparent; }
.sidebar-onboard-hidden { display:none !important; }

/* Logo */
.sidebar-logo {
  display:flex; align-items:center; gap:10px;
  margin-bottom:26px; flex-shrink:0; padding:2px 4px;
  text-decoration:none;
}
.logo-mark {
  width:36px; height:36px;
  background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Serif Display',serif; font-size:16px; font-weight:700;
  color:#fff; flex-shrink:0; letter-spacing:-.01em;
  box-shadow:0 2px 12px var(--accent-muted);
  transition:box-shadow 200ms;
}
.sidebar-logo:hover .logo-mark { box-shadow:0 4px 20px var(--accent-glow); }
.logo-text {
  display:none; font-family:'DM Serif Display',serif; font-size:20px;
  letter-spacing:-.04em; color:var(--text-primary); font-weight:400;
}
@media (min-width:1220px) { .logo-text { display:block; } }

/* Nav */
.sidebar-nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-item {
  display:flex; align-items:center; gap:13px;
  padding:10px 10px; border-radius:var(--radius-md);
  color:var(--text-secondary); text-decoration:none;
  font-size:14.5px; font-weight:400; letter-spacing:-.01em;
  transition:color 140ms, background 140ms, box-shadow 140ms;
  white-space:nowrap; position:relative;
}
.nav-item:hover { color:var(--text-primary); background:var(--panel-hover); }
.nav-item.active {
  color:var(--text-primary); font-weight:600;
  background:var(--accent-muted);
}
.nav-item.active .nav-icon { color:var(--accent); }
.nav-item span { display:none; }
@media (min-width:1220px) { .nav-item span { display:block; } }
.nav-icon { width:20px; height:20px; flex-shrink:0; transition:color 140ms; }

/* Notification badge */
.notif-count {
  min-width:15px; height:15px; padding:0 3px;
  background:var(--accent); color:#fff;
  font-size:9px; font-weight:700; border-radius:8px;
  position:absolute; top:-4px; right:-5px;
  border:1.5px solid var(--surface);
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; pointer-events:none; z-index:1;
}
.notif-badge-dot {
  min-width:16px; height:16px; padding:0 3px;
  background:var(--accent); color:#fff;
  font-size:9px; font-weight:700; border-radius:8px;
  position:absolute; top:-3px; right:-4px;
  border:2px solid var(--surface);
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; pointer-events:none;
}

/* Post FAB */
.post-fab {
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:44px; height:44px; margin-top:16px;
  background:var(--accent); color:#fff;
  border-radius:var(--radius-md); border:none;
  font-weight:600; font-size:14px; flex-shrink:0;
  transition:opacity 140ms, transform 80ms, box-shadow 200ms;
  box-shadow:0 3px 18px var(--accent-glow);
}
.post-fab:hover { opacity:.9; box-shadow:0 5px 24px var(--accent-glow); }
.post-fab:active { transform:scale(.93); }
@media (min-width:1220px) {
  .post-fab { width:100%; height:46px; border-radius:var(--radius-full); }
  .post-fab span { display:block; }
}
.post-fab span { display:none; }

/* Sidebar user */
.sidebar-user-wrap { position:relative; margin-top:12px; }
.sidebar-user {
  display:flex; align-items:center; gap:9px;
  padding:8px; border-radius:var(--radius-md);
  border:none; background:none; width:100%; text-align:left;
  transition:background 140ms;
}
.sidebar-user:hover { background:var(--panel-hover); }
.sidebar-user-info { display:none; overflow:hidden; flex:1; }
@media (min-width:1220px) { .sidebar-user-info { display:block; } }
.avatar-sm {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#000));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:700;
  flex-shrink:0; overflow:hidden;
}
.user-name  { font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-handle { font-size:11px; color:var(--text-secondary); line-height:1.3; }

.user-menu-popup {
  position:absolute; bottom:calc(100% + 8px); left:0; width:248px;
  background:var(--glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-lg);
  z-index:200; animation:spring-in 220ms var(--spring) both;
}
.user-menu-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; font-size:13.5px; color:var(--text-primary);
  text-decoration:none; border:none; background:none;
  width:100%; font-family:inherit; transition:background 110ms;
  letter-spacing:-.01em;
}
.user-menu-item svg { width:15px; height:15px; color:var(--text-secondary); flex-shrink:0; }
.user-menu-item:hover { background:var(--panel-hover); }
.user-menu-item-danger { color:#e53e3e; }
.user-menu-item-danger svg { color:#e53e3e; }
.user-menu-sep { height:1px; background:var(--border-soft); }

/* ══ MAIN COLUMN ══════════════════════════════════════════════════════════════ */
.f33d3r-main {
  flex:1; min-width:0;
  border-right:1px solid var(--border-soft);
  max-width:640px;
}
@media (max-width:1023px) {
  .f33d3r-main { padding-bottom:68px; border-right:none; max-width:100%; }
}

/* ══ RIGHT PANEL ══════════════════════════════════════════════════════════════ */
.f33d3r-right {
  display:none; width:300px; flex-shrink:0;
  padding:20px 16px; position:sticky; top:0;
  height:100vh; overflow-y:auto;
}
@media (min-width:1220px) { .f33d3r-right { display:block; } }

/* ══ TOP BAR ══════════════════════════════════════════════════════════════════ */
.top-bar {
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--border-soft);
  padding:0 18px; height:54px;
  display:flex; align-items:center; gap:10px;
}
.top-bar h1 {
  font-family:'DM Serif Display',serif; font-size:18px;
  letter-spacing:-.03em; flex:1; color:var(--text-primary);
}

/* Navigation progress bar */
#nav-progress {
  position:fixed; top:0; left:0; right:0; height:2px; z-index:9999;
  background:var(--accent); width:0%; opacity:0;
  transition:width 200ms var(--ease-out), opacity 200ms;
  border-radius:0 2px 2px 0;
  box-shadow:0 0 8px var(--accent-glow);
}

/* Surface tabs */
.surface-tabs {
  display:flex; background:var(--panel-hover);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-full); padding:3px; gap:2px;
}
.surface-tab {
  padding:5px 15px; border-radius:var(--radius-full);
  font-size:13px; color:var(--text-secondary);
  background:transparent; border:none; cursor:pointer;
  font-family:inherit; white-space:nowrap;
  transition:all 150ms; letter-spacing:-.01em;
}
.surface-tab:hover { color:var(--text-primary); }
.surface-tab.active {
  background:var(--panel); color:var(--text-primary); font-weight:600;
  box-shadow:var(--shadow-sm);
}

/* Engine dot */
.engine-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); animation:pulse-dot 3s ease-in-out infinite; flex-shrink:0;
}
.engine-dot.offline { background:#e53e3e; animation:none; }

.back-btn {
  display:flex; align-items:center; gap:6px;
  color:var(--text-secondary); background:none; border:none;
  font-size:14px; font-family:inherit; padding:6px 8px;
  border-radius:var(--radius-sm); transition:color 140ms, background 140ms;
}
.back-btn:hover { color:var(--text-primary); background:var(--panel-hover); }

/* ══ MOBILE NAV ═══════════════════════════════════════════════════════════════ */
.mobile-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-around;
  padding:4px 0 max(6px,env(safe-area-inset-bottom));
}
@media (min-width:1024px) { .mobile-nav { display:none; } }
.mobile-nav-onboard-hidden { display:none !important; }
.mobile-nav-item {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 12px; color:var(--text-secondary); text-decoration:none;
  font-size:9px; letter-spacing:.03em;
  transition:color 140ms; min-width:44px;
  background:none; border:none; font-family:inherit;
}
.mobile-nav-item.active { color:var(--accent); }
.mobile-nav-item svg { width:22px; height:22px; }
.mobile-post-btn {
  width:46px; height:46px;
  background:var(--accent); color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:none; box-shadow:0 4px 20px var(--accent-glow);
  transition:opacity 120ms, transform 90ms;
}
.mobile-post-btn:active { opacity:.85; transform:scale(.92); }

/* Mobile more drawer */
.mob-drawer-item {
  display:flex; align-items:center; gap:14px;
  padding:14px 20px; font-size:15px; color:var(--text-primary);
  text-decoration:none; background:none; border:none;
  width:100%; font-family:inherit; transition:background 110ms;
  letter-spacing:-.01em;
}
.mob-drawer-item svg { width:20px; height:20px; color:var(--text-secondary); flex-shrink:0; }
.mob-drawer-item:hover,.mob-drawer-item:active { background:var(--panel-hover); }

/* ══ POST CARDS ═══════════════════════════════════════════════════════════════ */

/* Light mode: cards with shadow & rounded corners — Web 2.0 feel */
.post-card {
  padding:16px 18px 12px;
  border-bottom:1px solid var(--border-soft);
  cursor:pointer;
  transition:background 100ms;
  animation:post-in 200ms var(--ease-out) both;
}
.post-card:hover { background:var(--panel-hover); }

/* Light mode: posts feel like distinct cards */
:not([data-mode="dark"]) .post-card {
  border-bottom:none;
  margin:0 8px 6px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-sm);
  background:var(--panel);
}
:not([data-mode="dark"]) .post-card:hover {
  box-shadow:var(--shadow-md);
  background:var(--panel);
  border-color:color-mix(in srgb,var(--accent) 18%,transparent);
}

.post-card:nth-child(1){animation-delay:0ms}
.post-card:nth-child(2){animation-delay:20ms}
.post-card:nth-child(3){animation-delay:40ms}
.post-card:nth-child(4){animation-delay:60ms}
.post-card:nth-child(n+5){animation-delay:80ms}

.post-inner { display:flex; gap:12px; }
.post-col-left { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:44px; }
.post-col-left a { display:block; flex-shrink:0; }
.pcd > div > a { display:block; flex-shrink:0; }

.post-avatar {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; flex-shrink:0; color:#fff;
  overflow:hidden;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));
  box-shadow:0 2px 8px var(--accent-muted);
}
.post-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.post-col-right { flex:1; min-width:0; padding-bottom:4px; }

/* Author row */
.post-meta {
  display:flex; align-items:center; gap:4px;
  margin-bottom:4px; flex-wrap:nowrap; overflow:hidden; min-height:20px;
}
.post-author-name {
  font-size:14px; font-weight:700; color:var(--text-primary);
  text-decoration:none; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex-shrink:0; max-width:160px;
}
.post-author-name:hover { text-decoration:underline; }
.post-handle { font-size:12.5px; color:var(--text-secondary); text-decoration:none; white-space:nowrap; flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.post-time { font-size:11.5px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
.post-meta-sep { font-size:12px; color:var(--text-muted); }

/* Realm pip */
.realm-pip { font-size:9px; font-weight:700; letter-spacing:.04em; padding:1px 6px; border-radius:var(--radius-full); flex-shrink:0; }
.realm-pip-1 { background:rgba(120,120,120,.10); color:#999; }
.realm-pip-2 { background:rgba(68,170,255,.09);  color:#4af; }
.realm-pip-3 { background:rgba(100,220,68,.09);  color:#4c4; }
.realm-pip-4 { background:rgba(255,136,68,.09);  color:#e74; }
.realm-pip-5 { background:var(--accent-muted); color:var(--accent); }

/* Badges */
.verified-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px;
  background:var(--accent); border-radius:50%; flex-shrink:0;
}
.verified-badge svg { width:9px; height:9px; color:#fff; }
.role-badge {
  display:inline-flex; align-items:center;
  font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 6px; border-radius:4px; flex-shrink:0; line-height:1.4;
}
.role-admin    { background:rgba(229,62,62,.12);   color:#e53e3e; border:1px solid rgba(229,62,62,.25); }
.role-founder  { background:var(--accent-muted);   color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 28%,transparent); }
.role-verified { background:rgba(34,197,94,.11);   color:#22c55e; border:1px solid rgba(34,197,94,.25); }

/* Post body */
.post-body {
  font-size:15.5px; line-height:1.70; color:var(--text-primary);
  word-break:break-word; margin-bottom:10px; letter-spacing:-.01em;
}
.post-body p { margin:0 0 7px; }
.post-body p:last-child { margin-bottom:0; }
.post-body strong { font-weight:700; }
.post-body em { font-style:italic; }
.post-body del { text-decoration:line-through; opacity:.5; }
.post-body a { color:var(--accent); }
.post-body a:hover { text-decoration:underline; }
.post-body code { font-family:monospace; font-size:13px; background:rgba(0,0,0,.06); padding:1px 5px; border-radius:5px; }
[data-mode="dark"] .post-body code { background:rgba(255,255,255,.07); }
.post-body pre { background:rgba(0,0,0,.05); border:1px solid var(--border); border-radius:10px; padding:14px; overflow-x:auto; margin:10px 0; }
[data-mode="dark"] .post-body pre { background:rgba(0,0,0,.30); }
.post-body pre code { background:none; padding:0; }
.post-body ul,.post-body ol { padding-left:20px; margin:5px 0; }
.post-body li { margin:2px 0; }
.post-body blockquote { border-left:2px solid var(--accent); margin:10px 0; padding:4px 14px; color:var(--text-secondary); }

/* Tags */
.post-tag { font-size:13px; color:var(--accent); font-weight:600; opacity:.75; transition:opacity 140ms; }
.post-tag:hover { opacity:1; }

/* Media */
.post-media-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:3px; border-radius:12px; overflow:hidden; margin-bottom:10px; }
.post-media-img { width:100%; height:180px; object-fit:cover; cursor:pointer; }
.post-media-img:only-child { height:280px; }

/* Explore badge */
.explore-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:var(--radius-sm);
  background:var(--accent-muted); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  font-size:9px; color:var(--accent); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px;
}
.explore-badge.glow { animation:subtle-glow 3s ease 1s infinite; }

/* ══ ACTION BAR ═══════════════════════════════════════════════════════════════ */
.post-actions { display:flex; align-items:center; gap:0; margin:4px -8px 0; padding-bottom:2px; }
.action-btn {
  display:flex; align-items:center; gap:5px;
  padding:7px 8px; border-radius:var(--radius-sm);
  font-size:12px; color:var(--text-muted);
  transition:color 140ms, background 140ms;
  background:transparent; border:none; font-family:inherit;
  text-decoration:none; font-weight:400;
}
.action-btn:hover { color:var(--accent); background:var(--accent-muted); }
.action-btn.liked { color:#e05080; }
.action-btn.liked:hover { color:#e05080; background:rgba(224,80,128,.09); }
.action-btn.saved { color:var(--accent); }
.action-btn.reposted { color:#22c55e; }
.action-btn svg { width:15px; height:15px; }
.action-btn span { font-size:12px; }
.action-lg { padding:10px 14px; font-size:13px; }
.action-lg svg { width:17px; height:17px; }
.post-actions-lg {
  display:flex; align-items:center; justify-content:space-around;
  padding:8px 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); margin-top:4px;
}
.score-chip { font-size:10px; color:var(--text-muted); background:var(--panel-hover); border:1px solid var(--border); padding:1px 6px; border-radius:5px; font-family:monospace; }

/* Post menu */
.post-menu-wrap { position:relative; margin-left:auto; }
.post-menu-trigger {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  border:none; background:none; color:var(--text-muted);
  transition:background 110ms, color 110ms;
}
.post-menu-trigger:hover { background:var(--accent-muted); color:var(--accent); }
.post-menu-dropdown {
  position:absolute; right:0; top:calc(100% + 4px);
  background:var(--glass); backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-lg);
  z-index:300; min-width:192px; display:none;
}
.post-menu-dropdown.open { display:block; animation:menu-in 150ms var(--spring); }
.post-menu-item {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; font-size:13px; color:var(--text-primary);
  cursor:pointer; border:none; background:none;
  width:100%; font-family:inherit; transition:background 110ms; text-align:left;
  letter-spacing:-.01em;
}
.post-menu-item svg { width:14px; height:14px; color:var(--text-secondary); flex-shrink:0; }
.post-menu-item:hover { background:var(--panel-hover); }
.post-menu-item-danger { color:#e53e3e; }
.post-menu-item-danger svg { color:#e53e3e; }
.post-menu-sep { height:1px; background:var(--border-soft); }
.post-translate-wrap { margin-top:8px; padding:10px 12px; background:var(--panel-hover); border-radius:10px; border:1px solid var(--border); font-size:13px; color:var(--text-secondary); line-height:1.6; }
.mock-feed-banner { display:flex; align-items:center; gap:8px; padding:10px 20px; background:var(--accent-muted); border-bottom:1px solid color-mix(in srgb,var(--accent) 16%,transparent); font-size:12px; color:var(--text-secondary); }
.mock-feed-banner svg { color:var(--accent); flex-shrink:0; }

/* ══ HTMX LOADING ═════════════════════════════════════════════════════════════ */
.htmx-indicator { display:none; }
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator { display:flex; }
.spinner { width:22px; height:22px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 600ms linear infinite; }

/* ══ PANEL CARDS ══════════════════════════════════════════════════════════════ */
.panel-card {
  background:var(--panel); border-radius:var(--radius-lg);
  padding:18px; border:1px solid var(--border-soft);
  box-shadow:var(--shadow-sm); margin-bottom:12px;
}
.panel-title { font-family:'DM Serif Display',serif; font-size:16px; margin-bottom:14px; color:var(--text-primary); letter-spacing:-.02em; }
.mb-4 { margin-bottom:16px; }

/* ══ BUTTONS ══════════════════════════════════════════════════════════════════ */
.btn-primary {
  padding:9px 22px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 90%,#fff),var(--accent) 50%,color-mix(in srgb,var(--accent) 85%,#000));
  color:#fff; font-size:14px; font-weight:600;
  border-radius:var(--radius-full); border:none; font-family:inherit;
  transition:opacity 140ms, transform 80ms, box-shadow 200ms;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  letter-spacing:-.01em; box-shadow:0 2px 12px var(--accent-glow);
}
.btn-primary:hover { opacity:.9; box-shadow:0 4px 20px var(--accent-glow); }
.btn-primary:active { transform:scale(.96); }
.btn-secondary {
  padding:8px 20px; background:transparent; color:var(--text-primary);
  font-size:14px; border:1.5px solid var(--border);
  border-radius:var(--radius-full); font-family:inherit;
  transition:border-color 140ms, color 140ms, background 140ms;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-muted); }
.follow-btn { font-size:13px; padding:6px 18px; white-space:nowrap; }

/* ══ COMPOSE MODAL ════════════════════════════════════════════════════════════ */
.compose-overlay {
  position:fixed; inset:0; z-index:60;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:52px 16px 16px;
}
[data-mode="dark"] .compose-overlay { background:rgba(0,0,0,.65); }
@media (max-width:600px) { .compose-overlay { padding:0; align-items:flex-end; } }
.compose-card {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg); width:100%; max-width:560px;
  box-shadow:var(--shadow-xl);
  animation:spring-in 280ms var(--spring) both;
}
[data-mode="dark"] .compose-card { background:var(--glass); backdrop-filter:var(--blur); }
@media (max-width:600px) {
  .compose-card { border-radius:24px 24px 0 0; max-height:92vh; display:flex; flex-direction:column; animation:spring-up 280ms var(--spring) both; }
}
.compose-header { display:flex; align-items:center; gap:8px; padding:14px 16px 12px; border-bottom:1px solid var(--border-soft); }
.close-btn { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--radius-sm); border:none; background:transparent; color:var(--text-secondary); transition:background 110ms, color 110ms; flex-shrink:0; }
.close-btn:hover { background:var(--panel-hover); color:var(--text-primary); }
.compose-form { padding:16px; overflow-y:auto; }
.compose-textarea { width:100%; background:transparent; border:none; outline:none; resize:none; color:var(--text-primary); font-size:16px; font-family:inherit; line-height:1.65; min-height:80px; letter-spacing:-.01em; }
.compose-textarea::placeholder { color:var(--text-muted); }
.compose-action-bar { display:flex; align-items:center; gap:2px; padding-top:12px; margin-top:8px; border-top:1px solid var(--border-soft); }
.compose-action-btn { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-sm); border:none; background:none; color:var(--accent); transition:background 110ms; flex-shrink:0; }
.compose-action-btn svg { width:17px; height:17px; }
.compose-action-btn:hover { background:var(--accent-muted); }

/* ══ PROFILE ══════════════════════════════════════════════════════════════════ */
.profile-header { border-bottom:1px solid var(--border-soft); }
.profile-banner-wrap { position:relative; }
.profile-banner { height:210px; overflow:hidden; position:relative; }
.banner-upload-hint { position:absolute; inset:0; background:rgba(0,0,0,.38); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; font-size:13px; font-weight:500; opacity:0; transition:opacity 150ms; }
.profile-banner:hover .banner-upload-hint { opacity:1; }
.profile-avatar-wrap { position:absolute; bottom:-48px; left:20px; }
.profile-avatar {
  width:96px; height:96px; border-radius:50%;
  border:4px solid var(--panel);
  display:flex; align-items:center; justify-content:center;
  font-size:36px; font-weight:700; color:#fff; overflow:hidden;
  position:relative; background:var(--panel);
  box-shadow:var(--shadow-md);
}
.realm-ring-1 { box-shadow:0 0 0 3px #6b7280; }
.realm-ring-2 { box-shadow:0 0 0 3px #a97c50; }
.realm-ring-3 { box-shadow:0 0 0 3px #aab8c2,0 0 0 3px #aab8c2; }
.realm-ring-4 { box-shadow:0 0 0 3px #f59e0b,0 0 10px rgba(245,158,11,.35); }
.realm-ring-5 { box-shadow:0 0 0 3px var(--accent),0 0 16px var(--accent-glow); }
.avatar-upload-hint { position:absolute; inset:0; background:rgba(0,0,0,.5); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transition:opacity 150ms; }
.profile-avatar:hover .avatar-upload-hint { opacity:1; }
.profile-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.achievement-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:99px; font-size:11px; font-weight:600; letter-spacing:.03em; border:1px solid; }
.achievement-badge-realm    { background:var(--accent-muted); border-color:color-mix(in srgb,var(--accent) 25%,transparent); color:var(--accent); }
.achievement-badge-verified { background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.28); color:#3b82f6; }
.achievement-badge-creator  { background:rgba(168,85,247,.10); border-color:rgba(168,85,247,.28); color:#a855f7; }
.achievement-badge-founder  { background:rgba(234,179,8,.10);  border-color:rgba(234,179,8,.28);  color:#d97706; }
.profile-info { padding:60px 20px 20px; }
.profile-name { font-family:'DM Serif Display',serif; font-size:24px; line-height:1.2; letter-spacing:-.03em; }
.profile-handle { font-size:14px; color:var(--text-secondary); margin-top:4px; }
.profile-bio { font-size:14px; line-height:1.7; margin-top:12px; color:var(--text-primary); opacity:.9; white-space:pre-wrap; word-break:break-word; }
.profile-meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; font-size:13px; color:var(--text-secondary); }
.profile-meta a { color:var(--accent); }
.profile-meta a:hover { text-decoration:underline; }
.profile-stats { display:flex; gap:20px; margin-top:14px; flex-wrap:wrap; }
.stat-val { font-weight:700; color:var(--text-primary); font-size:15px; }
.stat-label { font-size:13px; color:var(--text-secondary); margin-left:3px; }
.archetype-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; background:var(--accent-muted); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius:var(--radius-full); font-size:11px; color:var(--accent); margin-top:10px; }
.creator-badge { padding:2px 8px; border-radius:var(--radius-sm); background:var(--accent-muted); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); font-size:11px; color:var(--accent); font-weight:600; }
.profile-tabs { display:flex; border-bottom:1px solid var(--border-soft); overflow-x:auto; }
.profile-tab { flex:1; min-width:80px; padding:14px 8px; font-size:13px; font-weight:500; border:none; background:none; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; transition:color 120ms,border-color 120ms; font-family:inherit; white-space:nowrap; }
.profile-tab:hover { color:var(--text-primary); }
.profile-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

/* ══ POST DETAIL ══════════════════════════════════════════════════════════════ */
.post-detail-wrap { padding:22px 20px; border-bottom:1px solid var(--border-soft); }
.post-detail-avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.post-detail-body { font-size:20px; line-height:1.65; margin-top:4px; word-break:break-word; color:var(--text-primary); letter-spacing:-.02em; }
.reply-card { padding-left:16px; }

/* ══ SETTINGS ═════════════════════════════════════════════════════════════════ */
.settings-section { padding:20px 16px; border-bottom:1px solid var(--border-soft); }
.settings-label { font-size:11px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; display:block; }
.settings-input { width:100%; background:var(--panel-hover); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px; color:var(--text-primary); font-size:14px; font-family:inherit; outline:none; transition:border-color 150ms, box-shadow 150ms; }
.settings-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-muted); background:var(--panel); }
.settings-textarea { min-height:90px; resize:vertical; }
.settings-banner-preview { height:100px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); position:relative; margin-top:8px; cursor:pointer; }

/* ══ THEME GRID ═══════════════════════════════════════════════════════════════ */
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.theme-option { border-radius:var(--radius-md); overflow:hidden; border:2px solid transparent; cursor:pointer; transition:border-color 150ms, box-shadow 150ms; }
.theme-option.selected { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-muted); }
.theme-option:hover:not(.selected) { border-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.theme-swatch { height:48px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; }
.theme-name { padding:5px 8px; font-size:11px; text-align:center; }

/* ══ SEARCH / TRENDING ════════════════════════════════════════════════════════ */
.search-bar { position:relative; margin-bottom:14px; }
.search-bar svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--text-secondary); }
.search-input { width:100%; background:var(--panel-hover); border:1.5px solid var(--border); border-radius:var(--radius-full); padding:9px 14px 9px 36px; font-size:13px; color:var(--text-primary); outline:none; font-family:inherit; transition:border-color 150ms, box-shadow 150ms; }
.search-input:focus { border-color:var(--accent); background:var(--panel); box-shadow:0 0 0 3px var(--accent-muted); }
.trending-item { padding:10px 0; border-bottom:1px solid var(--border-soft); cursor:pointer; }
.trending-item:last-child { border-bottom:none; }
.trending-item:hover .trending-tag { color:var(--accent); }
.trending-cat { font-size:11px; color:var(--text-muted); }
.trending-tag { font-size:13px; font-weight:600; color:var(--text-primary); margin-top:2px; transition:color 140ms; letter-spacing:-.01em; }
.trending-count { font-size:11px; color:var(--text-secondary); margin-top:2px; }

/* Engine status */
.engine-status-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; padding:5px 0; border-bottom:1px solid var(--border-soft); }
.engine-status-row:last-child { border-bottom:none; }
.engine-status-label { color:var(--text-secondary); }
.engine-status-val { font-weight:600; }
.status-online   { color:#22c55e; }
.status-fallback { color:#f59e0b; }

/* Topic chips */
.explore-category-chip {
  padding:5px 14px; border-radius:var(--radius-full);
  background:var(--panel); border:1.5px solid var(--border);
  font-size:12px; cursor:pointer; color:var(--text-secondary);
  text-decoration:none; white-space:nowrap; box-shadow:var(--shadow-sm);
  transition:border-color 120ms,color 120ms,box-shadow 120ms; flex-shrink:0; display:inline-block;
}
.explore-category-chip:hover { color:var(--accent); border-color:var(--accent); box-shadow:var(--shadow-md); }

/* ══ NOTIFICATIONS ════════════════════════════════════════════════════════════ */
.notif-tab { flex:1; padding:14px 8px; font-size:13px; font-weight:500; border:none; background:none; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; transition:color 120ms,border-color 120ms; font-family:inherit; }
.notif-tab:hover { color:var(--text-primary); }
.notif-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.notif-item { display:flex; gap:14px; padding:16px 20px; border-bottom:1px solid var(--border-soft); cursor:pointer; transition:background 120ms; align-items:flex-start; }
.notif-item:hover { background:var(--panel-hover); }
.notif-unread { background:color-mix(in srgb,var(--accent) 4%,transparent); }
.notif-icon { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-icon svg { width:16px; height:16px; }
.notif-like    { background:rgba(224,80,128,.11); color:#e05080; }
.notif-follow  { background:var(--accent-muted); color:var(--accent); }
.notif-reply   { background:rgba(59,130,246,.11); color:#3b82f6; }
.notif-mention { background:rgba(59,130,246,.11); color:#3b82f6; }
.notif-message { background:rgba(139,92,246,.11); color:#8b5cf6; }
.notif-tip     { background:rgba(34,197,94,.11);  color:#22c55e; }
.notif-body { flex:1; min-width:0; }
.notif-avatars { display:flex; gap:4px; margin-bottom:5px; }
.notif-avatar { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; object-fit:cover; }
.notif-text { font-size:13px; color:var(--text-primary); line-height:1.5; }
.notif-time { font-size:11px; color:var(--text-muted); margin-top:3px; display:block; }
.notif-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:3px 0; }
.toggle { width:42px; height:24px; border-radius:12px; background:var(--border); position:relative; transition:background 200ms; flex-shrink:0; cursor:pointer; border:none; }
.toggle::after { content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:var(--text-muted); top:3px; left:3px; transition:transform 220ms var(--spring),background 200ms; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.toggle.active { background:var(--accent); }
.toggle.active::after { transform:translateX(18px); background:#fff; }

/* ══ TOAST ════════════════════════════════════════════════════════════════════ */
.toast {
  background:var(--panel);
  backdrop-filter:var(--blur);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px 16px; font-size:13px; color:var(--text-primary);
  box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(8px) scale(.97);
  transition:opacity 220ms var(--spring),transform 220ms var(--spring);
  pointer-events:none;
}
.toast.toast-show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.toast.toast-error { border-color:rgba(229,62,62,.3); color:#e53e3e; }
.toast.toast-info  { border-color:color-mix(in srgb,var(--accent) 30%,transparent); color:var(--accent); }

/* ══ REALM / XP ═══════════════════════════════════════════════════════════════ */
.realm-block { margin:8px 0 12px; }
.realm-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.realm-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:var(--radius-full); font-size:11px; font-weight:700; }
.realm-1 { background:rgba(120,120,120,.09); border:1px solid #888; color:#888; }
.realm-2 { background:rgba(68,170,255,.09);  border:1px solid #4af; color:#4af; }
.realm-3 { background:rgba(100,220,68,.09);  border:1px solid #4c4; color:#4c4; }
.realm-4 { background:rgba(255,136,68,.09);  border:1px solid #e74; color:#e74; }
.realm-5 { background:var(--accent-muted); border:1px solid var(--accent); color:var(--accent); }
.realm-xp { font-size:11px; color:var(--text-muted); }
.realm-bar-track { height:3px; background:var(--border); border-radius:3px; overflow:hidden; }
.realm-bar-fill { height:100%; border-radius:3px; background:var(--accent); transition:width 700ms var(--ease-out); }

/* ══ MUSIC ════════════════════════════════════════════════════════════════════ */
.music-mode-toggle { display:flex; background:var(--panel-hover); border:1px solid var(--border-soft); border-radius:var(--radius-full); padding:3px; gap:2px; }
.mode-btn { display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--radius-full); font-size:13px; color:var(--text-secondary); background:transparent; border:none; cursor:pointer; font-family:inherit; transition:all 120ms; }
.mode-btn svg { width:14px; height:14px; }
.mode-btn:hover { color:var(--text-primary); }
.mode-btn.active { background:var(--panel); color:var(--text-primary); font-weight:600; box-shadow:var(--shadow-sm); }
.music-mode-panel { padding-bottom:100px; }
.genre-strip { display:flex; gap:8px; padding:12px 16px; overflow-x:auto; border-bottom:1px solid var(--border-soft); scrollbar-width:none; }
.genre-strip::-webkit-scrollbar { display:none; }
.genre-chip { padding:5px 14px; border-radius:var(--radius-full); border:1.5px solid var(--border); background:var(--panel); font-size:12px; color:var(--text-secondary); cursor:pointer; font-family:inherit; white-space:nowrap; transition:all 120ms; box-shadow:var(--shadow-sm); }
.genre-chip:hover { color:var(--text-primary); border-color:color-mix(in srgb,var(--accent) 50%,transparent); }
.genre-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.track-card { display:flex; gap:14px; padding:14px 16px; border-bottom:1px solid var(--border-soft); transition:background 120ms; }
.track-card:hover { background:var(--panel-hover); }
.track-cover-wrap { position:relative; flex-shrink:0; width:76px; height:76px; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
.track-cover-img { width:100%; height:100%; object-fit:cover; }
.track-cover-placeholder { width:100%; height:100%; background:var(--panel-hover); }
.track-play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0); transition:background 150ms; border:none; cursor:pointer; }
.track-card:hover .track-play-overlay { background:rgba(0,0,0,.42); }
.track-play-overlay svg { width:26px; height:26px; color:#fff; opacity:0; transition:opacity 150ms; }
.track-card:hover .track-play-overlay svg { opacity:1; }
.track-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.track-title { font-size:14px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-artist-link { display:flex; align-items:center; gap:6px; text-decoration:none; }
.track-artist-name { font-size:12px; color:var(--text-secondary); transition:color 120ms; }
.track-artist-link:hover .track-artist-name { color:var(--accent); }
.track-genre { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.track-like-btn { display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:var(--radius-sm); border:none; background:transparent; cursor:pointer; font-size:11px; color:var(--text-secondary); font-family:inherit; transition:color 120ms,background 120ms; }
.track-like-btn svg { width:13px; height:13px; }
.track-like-btn:hover { color:#e05080; background:rgba(224,80,128,.08); }
.track-like-btn.liked { color:#e05080; }
.track-meta-row { display:flex; align-items:center; gap:8px; margin-top:auto; }
.track-plays,.track-duration { font-size:11px; color:var(--text-muted); }
.track-duration { font-family:monospace; }
.track-empty { padding:64px 20px; text-align:center; color:var(--text-secondary); }
.studio-upload-section { padding:16px; border-bottom:1px solid var(--border-soft); }
.studio-upload-card { border:2px dashed var(--border); border-radius:var(--radius-lg); padding:40px 24px; text-align:center; cursor:pointer; transition:border-color 150ms,background 150ms; }
.studio-upload-card:hover,.studio-upload-card.drag-over { border-color:var(--accent); background:var(--accent-muted); }
.studio-upload-icon { width:60px; height:60px; border-radius:50%; background:var(--accent-muted); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--accent); }
.studio-form-card { background:var(--panel-hover); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-top:12px; }
.studio-label { display:block; font-size:11px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.studio-input { width:100%; background:var(--panel); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:9px 12px; color:var(--text-primary); font-size:14px; font-family:inherit; outline:none; transition:border-color 150ms,box-shadow 150ms; }
.studio-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-muted); }
.cover-upload-zone { display:block; width:96px; height:96px; border-radius:var(--radius-md); overflow:hidden; border:2px dashed var(--border); transition:border-color 150ms; }
.cover-upload-zone:hover { border-color:var(--accent); }
.cover-upload-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--text-muted); font-size:10px; }
.upload-file-icon { width:38px; height:38px; border-radius:var(--radius-sm); background:var(--accent-muted); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; }
.price-option { display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--border); cursor:pointer; font-size:13px; color:var(--text-secondary); transition:all 120ms; flex:1; justify-content:center; }
.price-option input { display:none; }
.price-option.active { border-color:var(--accent); color:var(--accent); background:var(--accent-muted); font-weight:600; }
.bmi-notice { display:flex; align-items:flex-start; gap:10px; padding:12px; background:var(--accent-muted); border:1px solid color-mix(in srgb,var(--accent) 14%,transparent); border-radius:var(--radius-sm); }
.upload-progress-bar-wrap { height:3px; background:var(--border); border-radius:3px; overflow:hidden; }
.upload-progress-bar { height:100%; width:0%; background:var(--accent); border-radius:3px; transition:width 200ms; }
.studio-tracks-section { padding:16px 0; }
.studio-track-row { display:flex; align-items:center; gap:12px; padding:10px 16px; transition:background 120ms; }
.studio-track-row:hover { background:var(--panel-hover); }
.studio-track-cover { width:40px; height:40px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; background:var(--panel-hover); }
.studio-play-btn { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:none; background:var(--panel-hover); cursor:pointer; color:var(--text-secondary); transition:background 120ms,color 120ms; flex-shrink:0; }
.studio-play-btn svg { width:14px; height:14px; }
.studio-play-btn:hover { background:var(--accent); color:#fff; }
.player-bar { position:sticky; bottom:0; z-index:50; display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--glass); backdrop-filter:var(--blur); border-top:1px solid var(--border-soft); animation:spring-up 250ms var(--spring); box-shadow:0 -8px 32px rgba(0,0,0,.1); }
.player-cover-wrap { flex-shrink:0; }
.player-cover { width:36px; height:36px; border-radius:var(--radius-sm); background:var(--border); overflow:hidden; background-size:cover; background-position:center; box-shadow:var(--shadow-sm); }
.player-track-info { min-width:0; flex:1; max-width:160px; }
.player-title { display:block; font-size:13px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-artist { display:block; font-size:11px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-controls { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.player-btn { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:none; background:transparent; color:var(--text-secondary); cursor:pointer; transition:background 120ms,color 120ms; }
.player-btn svg { width:16px; height:16px; }
.player-btn:hover { background:var(--panel-hover); color:var(--text-primary); }
.player-play-btn { width:36px; height:36px; background:var(--accent); color:#fff; box-shadow:0 2px 10px var(--accent-glow); }
.player-play-btn:hover { opacity:.9; }
.player-progress-wrap { flex:1; min-width:60px; cursor:pointer; padding:8px 0; }
.player-progress-bg { height:3px; background:var(--border); border-radius:3px; overflow:hidden; }
.player-progress-fill { height:100%; width:0%; background:var(--accent); border-radius:3px; }
.player-time { font-size:10px; color:var(--text-muted); font-family:monospace; display:flex; gap:4px; flex-shrink:0; }
.player-volume-wrap { display:none; align-items:center; gap:6px; flex-shrink:0; }
@media (min-width:768px) { .player-volume-wrap { display:flex; } }
.player-volume-slider { width:60px; height:2px; accent-color:var(--accent); cursor:pointer; }
.player-close-btn { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--radius-sm); border:none; background:transparent; color:var(--text-muted); cursor:pointer; transition:color 120ms; flex-shrink:0; }
.player-close-btn svg { width:13px; height:13px; }
.player-close-btn:hover { color:var(--text-primary); }
.axis-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; font-size:11px; color:var(--text-secondary); }
.axis-row span { min-width:70px; }
.axis-bar { flex:1; height:2px; background:var(--border); border-radius:2px; overflow:hidden; }
.axis-bar div { height:100%; background:var(--accent); border-radius:2px; opacity:.5; }

/* ══ ONBOARDING ═══════════════════════════════════════════════════════════════ */
.onboard-wrap { display:flex; min-height:100vh; width:100%; }
.onboard-left { display:none; flex-direction:column; justify-content:center; padding:60px; background:var(--panel); border-right:1px solid var(--border-soft); flex:1; }
@media (min-width:900px) { .onboard-left { display:flex; } }
.onboard-right { display:flex; align-items:center; justify-content:center; padding:40px 24px; flex:1; }
.onboard-card { width:100%; max-width:400px; }
.onboard-card-title { font-family:'DM Serif Display',serif; font-size:28px; margin-bottom:8px; letter-spacing:-.03em; }
.onboard-card-sub { font-size:14px; color:var(--text-secondary); margin-bottom:28px; line-height:1.6; }
.onboard-error { padding:12px 14px; background:rgba(229,62,62,.09); border:1px solid rgba(229,62,62,.22); border-radius:var(--radius-sm); font-size:13px; color:#e53e3e; margin-bottom:20px; }
.onboard-form { display:flex; flex-direction:column; gap:20px; }
.onboard-field { display:flex; flex-direction:column; gap:6px; }
.onboard-label { font-size:11px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.08em; }
.onboard-input { width:100%; background:var(--panel-hover); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; color:var(--text-primary); font-size:15px; font-family:inherit; outline:none; transition:border-color 150ms,box-shadow 150ms; }
.onboard-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-muted); background:var(--panel); }
.onboard-hint { font-size:11px; color:var(--text-muted); }
.onboard-features { display:flex; flex-direction:column; gap:24px; }
.onboard-feat { display:flex; align-items:flex-start; gap:16px; }
.onboard-feat-icon { font-size:18px; color:var(--accent); flex-shrink:0; width:26px; }
.onboard-feat-title { font-size:14px; font-weight:600; margin-bottom:3px; }
.onboard-feat-desc { font-size:13px; color:var(--text-secondary); line-height:1.45; }
.role-card { display:flex; align-items:center; gap:14px; padding:14px; border:2px solid var(--border); border-radius:14px; cursor:pointer; transition:border-color 120ms,background 120ms,box-shadow 120ms; }
.role-card.selected { border-color:var(--accent); background:var(--accent-muted); box-shadow:0 0 0 3px var(--accent-muted); }

/* ══ WALLET ═══════════════════════════════════════════════════════════════════ */
.pixel-frame { border:1.5px solid var(--accent); box-shadow:2px 2px 0 var(--accent-muted); border-radius:0; }
.pixel-balance { font-family:'Press Start 2P',monospace; font-size:22px; line-height:1.4; color:var(--text-primary); }
.pixel-balance-unit { font-family:'Press Start 2P',monospace; font-size:9px; color:var(--accent); vertical-align:super; margin-left:6px; }
.pixel-corner { width:6px; height:6px; background:var(--accent); flex-shrink:0; }
.pixel-divider { height:1px; background:repeating-linear-gradient(90deg,var(--accent) 0,var(--accent) 4px,transparent 4px,transparent 8px); opacity:.25; }

/* ══ EXPLORE SURF TABS ════════════════════════════════════════════════════════ */
.explore-surf-tab { flex:1; padding:14px 8px; font-size:13px; font-weight:500; border:none; background:none; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; transition:color 120ms,border-color 120ms; font-family:inherit; }
.explore-surf-tab:hover { color:var(--text-primary); }
.explore-surf-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

/* ══ PROFILE SOCIAL LINKS ═════════════════════════════════════════════════════ */
.profile-social-links { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.social-link-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:20px; font-size:12px; color:var(--text-secondary); border:1.5px solid var(--border); text-decoration:none; transition:color 120ms,border-color 120ms,box-shadow 120ms; box-shadow:var(--shadow-sm); }
.social-link-btn:hover { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); box-shadow:var(--shadow-md); }

/* ══ FOCUS FIELD ══════════════════════════════════════════════════════════════ */
.pcd { display:block; }
.pcf { display:none; }

@media (max-width:1023px) {
  .focus-feed .pcd { display:none; }
  .focus-feed .pcf { display:flex; }
  .f33d3r-main.focus-feed {
    overflow-y:scroll; scroll-snap-type:y mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:0!important; height:100dvh;
    scrollbar-width:none; -ms-overflow-style:none;
    border-right:none; max-width:100%;
    overscroll-behavior-y:contain;
  }
  .f33d3r-main.focus-feed::-webkit-scrollbar { display:none; }
  .focus-feed .post-card { scroll-snap-align:start; scroll-snap-stop:always; height:100dvh; min-height:100dvh; padding:0; border:none; border-radius:0; box-shadow:none; margin:0; position:relative; overflow:hidden; animation:none; cursor:default; }
  .focus-feed .h-4 { scroll-snap-align:none!important; height:1px!important; }
}
.pcf { flex-direction:column; position:absolute; inset:0; z-index:0; }
.focus-bg { position:absolute; inset:0; z-index:0; background:var(--surface); }
.focus-bg img { width:100%; height:100%; object-fit:cover; }
.focus-bg-text { position:absolute; inset:0; background:radial-gradient(ellipse 90% 55% at 50% 15%,color-mix(in srgb,var(--accent) 22%,transparent),transparent),linear-gradient(160deg,color-mix(in srgb,var(--accent) 8%,var(--surface)) 0%,var(--surface) 60%); }
.focus-feed .post-card.no-media .pcf::before { display:none; }
.focus-feed .post-card.no-media .focus-bg-text { background:var(--surface); }
.focus-feed .post-card.no-media .focus-content { position:absolute; inset:0; bottom:auto; top:0; height:100%; align-items:center; justify-content:center; padding:0 24px calc(80px + env(safe-area-inset-bottom)) 24px; flex-direction:column; text-align:center; }
.focus-feed .post-card.no-media .focus-left { padding:0; flex:none; width:100%; max-width:520px; }
.focus-feed .post-card.no-media .focus-right { width:56px; position:absolute; right:0; bottom:calc(80px + env(safe-area-inset-bottom)); }
.focus-feed .post-card.no-media .focus-author-row { justify-content:center; margin-bottom:20px; }
.focus-feed .post-card.no-media .focus-body { font-size:clamp(16px,3.5vw,22px); line-height:1.6; -webkit-line-clamp:10; font-weight:500; color:var(--text-primary); text-shadow:none; }
.focus-feed .post-card.no-media .focus-name { color:var(--text-primary); text-shadow:none; }
.focus-feed .post-card.no-media .focus-handle { color:var(--text-secondary); }
.focus-feed .post-card.no-media .f-act { color:var(--text-secondary); text-shadow:none; }
.focus-feed .post-card.no-media .f-act svg { filter:none; }
.pcf::before { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 32%,rgba(0,0,0,.1) 62%,transparent 100%); z-index:1; pointer-events:none; }
.focus-content { position:absolute; bottom:0; left:0; right:0; z-index:2; display:flex; align-items:flex-end; padding-bottom:calc(52px + env(safe-area-inset-bottom)); }
.focus-left { flex:1; min-width:0; padding:0 8px 16px 16px; }
.focus-right { width:64px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; padding:0 0 10px; }
.focus-author-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.focus-av { width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,.7); overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none; }
.focus-av img,.focus-av-ring img { width:100%; height:100%; object-fit:cover; }
.focus-av-init { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.focus-name { font-size:13px; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5); text-decoration:none; display:block; line-height:1.2; }
.focus-handle { font-size:11px; color:rgba(255,255,255,.5); }
.focus-body { font-size:15px; line-height:1.55; color:rgba(255,255,255,.93); text-shadow:0 1px 3px rgba(0,0,0,.45); margin-bottom:6px; word-break:break-word; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.focus-body.expanded { -webkit-line-clamp:unset; overflow:visible; }
.focus-body p { margin:0 0 3px; }
.focus-body a { color:rgba(255,255,255,.8); }
.focus-more { font-size:12px; color:rgba(255,255,255,.4); background:none; border:none; padding:0; cursor:pointer; font-family:inherit; display:block; margin-bottom:6px; }
.focus-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.focus-tag { font-size:12px; color:rgba(255,255,255,.55); text-decoration:none; }
.focus-av-wrap { display:flex; flex-direction:column; align-items:center; padding:10px 10px 18px; position:relative; }
.focus-av-ring { width:44px; height:44px; border-radius:50%; border:2px solid #fff; overflow:hidden; display:flex; align-items:center; justify-content:center; text-decoration:none; flex-shrink:0; }
.focus-follow-dot { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:20px; height:20px; background:var(--accent); border-radius:50%; border:2px solid var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; font-size:14px; line-height:1; font-weight:700; }
.f-act { display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 10px; background:none; border:none; cursor:pointer; color:#fff; font-size:11px; font-weight:600; font-family:inherit; text-decoration:none; text-shadow:0 1px 3px rgba(0,0,0,.5); transition:transform 70ms; -webkit-tap-highlight-color:transparent; position:relative; z-index:2; min-width:44px; }
.f-act:active { transform:scale(.82); }
.f-act svg { width:25px; height:25px; filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.f-act.liked { color:#e05080; }
.f-act.liked svg { fill:#e05080; color:#e05080; }
.f-act.reposted svg { color:#22c55e; }
.f-act.saved svg { fill:var(--accent); color:var(--accent); }
.focus-menu-drop { position:absolute; bottom:calc(100% + 4px); right:0; top:auto!important; min-width:180px; }

/* ══ EXPLORE GRID ═════════════════════════════════════════════════════════════ */
#explore-results.explore-grid-view { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:2px; }
#explore-results.explore-grid-view .post-card { padding:0; border:none; border-radius:0; box-shadow:none; margin:0; aspect-ratio:1/1; overflow:hidden; position:relative; background:var(--panel); cursor:pointer; min-height:0; animation:none; }
#explore-results.explore-grid-view .post-card:hover::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.28); }
#explore-results.explore-grid-view .pcd { display:flex; position:absolute; inset:0; }
#explore-results.explore-grid-view .pcd > div { width:100%; height:100%; position:relative; overflow:hidden; }
#explore-results.explore-grid-view .pcd .post-media-grid { position:absolute; inset:0; margin:0; border-radius:0; }
#explore-results.explore-grid-view .pcd .post-media-img { height:100%; border-radius:0; object-fit:cover; }
#explore-results.explore-grid-view .pcd .post-meta,
#explore-results.explore-grid-view .pcd .post-actions { display:none!important; }
#explore-results.explore-grid-view .pcd .post-body { position:absolute; inset:0; display:-webkit-box; font-size:13px; font-weight:500; color:var(--text-primary); padding:12px; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; background:var(--panel); }
#explore-results.explore-grid-view .pcf { display:none!important; }
#explore-results.explore-grid-view .h-4 { grid-column:1/-1; height:1px; }

/* ══ POLLS ════════════════════════════════════════════════════════════════════ */
.poll-wrap { margin:10px 0 4px; }
.poll-options { display:flex; flex-direction:column; gap:8px; }
.poll-option-btn { width:100%; padding:10px 16px; background:transparent; border:1.5px solid var(--accent); border-radius:var(--radius-full); color:var(--accent); font-size:14px; font-family:inherit; cursor:pointer; text-align:center; transition:background 140ms,transform 80ms; font-weight:600; }
.poll-option-btn:hover { background:var(--accent-muted); }
.poll-option-btn:active { transform:scale(.97); }
.poll-results { display:flex; flex-direction:column; gap:8px; }
.poll-bar { position:relative; height:40px; border-radius:var(--radius-full); background:var(--panel-hover); overflow:hidden; display:flex; align-items:center; padding:0 14px; }
.poll-bar-fill { position:absolute; top:0; left:0; bottom:0; background:var(--accent-muted); border-radius:var(--radius-full); transition:width 500ms var(--ease-out); z-index:0; }
.poll-bar.poll-voted .poll-bar-fill { background:color-mix(in srgb,var(--accent) 22%,transparent); }
.poll-bar-label { position:relative; z-index:1; font-size:14px; color:var(--text-primary); flex:1; font-weight:600; letter-spacing:-.01em; }
.poll-bar.poll-voted .poll-bar-label::after { content:' ✓'; color:var(--accent); font-size:12px; }
.poll-bar-pct { position:relative; z-index:1; font-size:13px; font-weight:700; color:var(--text-secondary); flex-shrink:0; }
.poll-bar.poll-voted .poll-bar-pct { color:var(--accent); }
.poll-total { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* ══ PIAL WIDGET ══════════════════════════════════════════════════════════════ */
.pial-widget { display:none; margin-bottom:16px; }
@media (min-width:1280px) { .pial-widget { display:block!important; } }

/* ══ MISC UTILITIES ═══════════════════════════════════════════════════════════ */
.hidden { display:none!important; }
.explore-search-wrap { padding:12px 16px; border-bottom:1px solid var(--border-soft); }

/* Feed container light padding — Web 2.0 card separation */
:not([data-mode="dark"]) #feed-container,
:not([data-mode="dark"]) #explore-results:not(.explore-grid-view),
:not([data-mode="dark"]) .feed-wrap {
  padding:8px 0;
}

/* Light mode sidebar: panel bg, subtle right border */
:not([data-mode="dark"]) .f33d3r-shell {
  background:var(--surface);
}

/* Dark mode ambient glow on body */
[data-mode="dark"] body::after {
  content:'';
  position:fixed; bottom:-10%; left:-10%; width:320px; height:320px;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 5%,transparent),transparent 70%);
  pointer-events:none; z-index:0;
}

/* ══ DARK MODE TOGGLE BUTTON ══════════════════════════════════════════════════ */
.theme-mode-toggle {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:none; border:1.5px solid var(--border);
  color:var(--text-secondary); cursor:pointer;
  transition:background 140ms, color 140ms, border-color 140ms;
  flex-shrink:0;
}
.theme-mode-toggle:hover { background:var(--panel-hover); color:var(--text-primary); border-color:var(--accent); }