:root{
  --ink:#e7dbff;
  --neon:#c77dff;
  --neon-2:#7b2fff;
  --card:#140022cc;
  --border:#3b1a61;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; color:var(--ink); font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; background:#090012;}
a{color:var(--ink)} a:hover{opacity:.85}
time{opacity:.85; font-size:.9rem}

.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 18px;position:relative;z-index:2}
.container{max-width:1100px;margin:0 auto;padding:18px;position:relative;z-index:2}
.grid.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.grid.two-col{grid-template-columns:1fr}}

.logo{font-size:clamp(28px,5vw,42px);margin:0}
.neon{color:#fff;text-shadow:0 0 8px var(--neon),0 0 18px var(--neon),0 0 32px var(--neon-2)}
.neon-sub{margin:.2rem 0 .8rem;font-weight:600}

.pill{display:inline-block;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:#1a0536aa;backdrop-filter:blur(3px);text-decoration:none;font-weight:600;font-size:.95rem}
.btn-enter{display:inline-block;margin-top:12px;padding:8px 12px;font-weight:600;border-radius:10px;border:1px solid var(--border);text-decoration:none;font-size:1rem;background:linear-gradient(90deg,#2a0b4c,#3b0b71);box-shadow:0 0 8px #6e34ff55,inset 0 0 6px #ffffff10}

.card{border:1px solid var(--border);background:var(--card);border-radius:16px;padding:14px;box-shadow:0 6px 30px #0006,0 0 30px #6e34ff22;backdrop-filter:blur(6px)}
.card.glass{background:#1b0032bb}
.card-title{margin:0 0 10px;font-size:1.1rem;letter-spacing:.3px}

.hero{text-align:center;margin:6vh 0 18px}
.post{padding:10px 0;border-top:1px dashed var(--border)}
.post:first-of-type{border-top:none}
.post-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-weight:700}
.post-meta{opacity:.85;font-size:.9rem;margin-top:4px}
.mood{font-style:italic}

.comments{display:grid;gap:10px;padding-left:0}
.comments li{list-style:none;border:1px solid var(--border);border-radius:10px;padding:10px;background:#22004488;backdrop-filter:blur(4px)}
.comments time{display:block;margin-top:4px}

.profile-row{display:flex;gap:14px;align-items:center}
.avatar{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;font-size:28px;font-weight:900;background:radial-gradient(circle at 30% 30%,#ff89ff,#6f00ff 60%,#1b0032 100%);box-shadow:0 0 20px #c77dff88}

/* Optional: make sr-only available globally too */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.mixtape-card{margin-top:18px}
.mixtape{margin:8px 0 0 18px;display:grid;gap:6px}
.mix-note{opacity:.8;font-size:.9rem;margin-top:10px}

/* Softer neon for profile title */
.neon-lite{
  color:#fff;
  text-shadow:
    0 0 6px var(--neon),
    0 0 12px var(--neon-2);
}

/* Compact profile header */
.profile-compact{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;          /* smaller than default card */
  border-radius:14px;
}

/* Smaller avatar variant */
.avatar--sm{
  width:48px; height:48px;
  font-size:22px; font-weight:900;
  border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, #ff89ff, #6f00ff 60%, #1b0032 100%);
  box-shadow: 0 0 14px #c77dff66;
}

/* Tiny layout helpers */
.stack{ display:flex; flex-direction:column; gap:4px; }
.row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.handle{ font-weight:700; letter-spacing:.2px; }

/* Chips to replace long text lines */
.chip{
  font-size:.85rem; line-height:1;
  padding:2px 8px;
  border-radius:999px;
  background:#1a0536aa;
  border:1px solid var(--border);
  backdrop-filter: blur(3px);
}
.subtle{ opacity:.85; font-size:.9rem; }
.chip--ghost{ background:transparent; border-color:#51307a; }

/* --- Declutter @Craze00 top area --- */

/* 1) Make the header card narrower + add breathing room */
.profile-compact{
  max-width: 880px;       /* narrower than content width */
  margin: 6px auto 24px;  /* space below so it doesn't kiss the next cards */
  padding: 8px 12px;
  border-color: rgba(199,125,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 24px rgba(110,52,255,.18);
}

/* 2) Lighten the glow on the title */
.neon-lite{
  text-shadow:
    0 0 4px var(--neon),
    0 0 10px var(--neon-2);
}

/* 3) Tighter chips + smaller avatar */
.profile-compact .row{ gap: 6px; }
.chip{ font-size:.8rem; padding:2px 8px; }
.avatar--sm{ width:40px; height:40px; font-size:18px; box-shadow:0 0 10px #c77dff55; }

/* 4) Extra separation before the two-column grid (belt & suspenders) */
.profile-compact + .two-col{ margin-top: 6px; }

/* 5) Softer borders on the big cards so stacked radii don't shout */
.card.glass{
  border-color: rgba(199,125,255,.18);
  box-shadow: 0 6px 26px rgba(0,0,0,.4), 0 0 20px rgba(110,52,255,.12);
}

/* ========= CLEAN & ORGANIZE (append to end) ========= */

/* Layout: slightly tighter grid + consistent page width */
:root{ --gutter:18px; --cardpad:14px; }
.container{ max-width: 980px; }                 /* a touch narrower = cleaner */
.grid.two-col{ gap: var(--gutter); align-items:start; }

/* Card polish: softer borders/glow, clearer titles */
.card{
  padding: var(--cardpad) calc(var(--cardpad) + 4px);
  border-color: rgba(199,125,255,.22);
  box-shadow: 0 6px 22px rgba(0,0,0,.38), 0 0 20px rgba(110,52,255,.12);
}
.card.glass{
  border-color: rgba(199,125,255,.18);
  box-shadow: 0 6px 22px rgba(0,0,0,.40), 0 0 18px rgba(110,52,255,.10);
}
.card-title{
  margin: 2px 0 12px;
  font-size: 1.12rem;
  letter-spacing: .25px;
}

/* Profile header: compact + breathing room */
.profile-compact{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  max-width: 880px;
  margin: 6px auto 20px;   /* pull it off the grid below */
  padding: 10px 12px;
}
.avatar--sm{ width:40px; height:40px; font-size:18px; box-shadow:0 0 10px #c77dff55; }
.neon-lite{ text-shadow: 0 0 4px var(--neon), 0 0 10px var(--neon-2); }
.profile-compact .row{ gap: 8px; }
.chip{ font-size:.82rem; padding:2px 8px; }
.chip--ghost{ border-color:#51307a; }
.handle{ font-weight: 800; letter-spacing:.3px; }

/* Posts: cleaner rhythm + right-aligned timestamp */
.post{ padding: 12px 0; }
.post + .post{ border-top: 1px dashed rgba(199,125,255,.20); }
.post-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
}
.post-head .user{ font-weight: 700; }
.post-head time{ opacity:.78; font-size:.9rem; }
.post p{ margin: 6px 0 6px; line-height: 1.35; }
.post-meta{
  margin-top: 6px;
  font-size: .92rem;
  opacity: .92;
  border-left: 2px solid rgba(199,125,255,.35);
  padding-left: 8px;
}

/* Comments: uniform “bubble” with date tucked bottom-right */
.comments{ gap: 12px; }
.comments li{
  position: relative;
  padding: 10px 12px 22px;
  border-radius: 12px;
  background: rgba(34,0,68,.55);
  border: 1px solid rgba(199,125,255,.22);
}
.comments li b{ font-weight: 700; }
.comments li time{
  position: absolute; right: 10px; bottom: 6px;
  font-size: .85rem; opacity: .8;
}

/* Mixtape: two neat columns on desktop, balanced lines */
.mixtape-card{ margin-top: var(--gutter); }
.mixtape{
  margin: 8px 0 0 1.2em;
  column-gap: 32px;
  column-fill: balance;
}
.mixtape li{ padding: 2px 0; break-inside: avoid; }
@media (min-width: 900px){ .mixtape{ columns: 2; } }

/* Tiny spacing guard so the grid doesn't kiss the header card */
.profile-compact + .two-col{ margin-top: 6px; }