:root{
  --tt-card-gap: 12px;
}

/* Shared account-page layout (My uploads / Favorites / Profile) */
.accountShell{
  width: min(1180px, 100%);
  margin: 0 auto;
}

.accountGrid{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--tt-card-gap);
  align-items: start;
}

@media (max-width: 980px){
  .accountGrid{ grid-template-columns: 1fr; }
}

.stack{ display:flex; flex-direction:column; gap: var(--tt-card-gap); }

/* Stats */
.statRow{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 980px){
  .statRow{ grid-template-columns: repeat(2, 1fr); }
}

.statCard{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: 0 10px 30px rgba(15,23,42,.10);
}

.statNum{ font-family: var(--font-heading); letter-spacing:1px; font-size: 22px; line-height: 1; }
.statLabel{ font-size: 12px; color: var(--muted2); margin-top: 6px; }

/* Controls */
.controlBar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

.pillBar{ display:flex; gap:8px; flex-wrap: wrap; }

.pillBtn{
  appearance:none;
  border: 1px solid var(--border);
  background: #ffffff0a;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: transform .08s ease, filter .12s ease;
}
.pillBtn:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.pillBtn.active{
  border-color: rgba(225,29,46,.55);
  box-shadow: 0 0 0 3px rgba(225,29,46,.12);
}

/* Buttons compatibility (your code uses btnGhost) */
.btn.btnGhost{
  background:#ffffff0a;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn.btnGhost:hover{ filter: brightness(1.08); }

/* Empty states */
.emptyHero{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(225,29,46,.10), rgba(56,189,248,.10));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
}

.emptyHeroTitle{ font-family: var(--font-heading); letter-spacing:1px; text-transform:uppercase; font-size: 18px; }
.emptyHeroNote{ margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.emptyHeroActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }

/* Lists */
.listHeader{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.listHeader .miniNote{ margin:0; }

.uploadRow{
  display:grid;
  grid-template-columns: 1.2fr .7fr .9fr .7fr auto;
  gap: 10px;
  align-items:center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.uploadRow:last-child{ border-bottom:none; }

.uploadHead{
  display:grid;
  grid-template-columns: 1.2fr .7fr .9fr .7fr auto;
  gap: 10px;
  font-size: 12px;
  color: var(--muted2);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 860px){
  .uploadHead{ display:none; }
  .uploadRow{ grid-template-columns: 1fr; gap: 8px; padding: 12px 0; }
}

.packCell{ display:flex; gap:12px; align-items:center; min-width:0; }
.packTitle{ font-weight: 800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thumbSm{ width: 54px; height:54px; border-radius: 12px; object-fit:cover; border:1px solid var(--border); background:#0f172a14; }

.metaLine{ font-size: 12px; color: var(--muted2); }

/* Favorites grid */
.favGrid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.favCard{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(15,23,42,.10);
  display:flex;
  flex-direction:column;
}
.favThumb{ width:100%; aspect-ratio: 16 / 10; object-fit: cover; background:#0f172a14; display:block; }
.favBody{ padding: 10px 10px 12px; display:flex; flex-direction:column; gap:8px; }
.favTitle{ font-weight: 800; }
.favMeta{ font-size: 12px; color: var(--muted2); display:flex; justify-content:space-between; gap:8px; }
.favBtns{ display:flex; gap:8px; flex-wrap:wrap; }

/* Profile preview */
.profilePreviewBanner{
  height: 120px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: radial-gradient(900px 520px at 16% -10%, rgba(225,29,46,.10), transparent 55%),
              radial-gradient(800px 520px at 100% 0%, rgba(56,189,248,.10), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  background-size: cover;
  background-position: center;
  overflow:hidden;
}

.profilePreviewName{ margin-top: 10px; font-weight: 900; }
.profilePreviewBio{ margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.35; white-space: pre-wrap; }
.profilePreviewLinks{ display:flex; flex-direction:column; gap:6px; margin-top: 10px; }
.linkChip{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:#ffffff0a;
  font-size: 12px;
  text-decoration:none;
  color: var(--text);
}
.linkChip:hover{ filter: brightness(1.06); }