/* ============================================================
   PICKTAPE — Profile Page Styles
   ============================================================ */

.profile-body { background: var(--bg); min-height: 100vh; }

/* ── LOGO CONSISTENCY ────────────────────── */
/* Explicit white/red treatment — overrides any inherited color */
.profile-search-bar .footer-logo,
.profile-search-bar .footer-logo span,
.site-footer .footer-logo,
.site-footer .footer-logo span { }

.profile-search-bar .footer-logo { color: #e8e4dc !important; }
.profile-search-bar .footer-logo span { color: #e84040 !important; }
.site-footer .footer-logo { color: #e8e4dc !important; }
.site-footer .footer-logo span { color: #e84040 !important; }

/* ── SEARCH BAR ──────────────────────────── */
.profile-search-bar {
  background: var(--bg2); border-bottom: 1px solid var(--border);
  padding: 14px 28px; position: sticky; top: 0; z-index: 10;
}
.profile-search-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
}
.search-wrap { flex: 1; display: flex; gap: 8px; }
.search-input {
  flex: 1; background: var(--bg); border: 1px solid var(--border2);
  border-radius: var(--radius); color: var(--text);
  font-family: 'Barlow', sans-serif; font-size: 14px;
  padding: 9px 14px; outline: none; transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--accent); }

/* ── MAIN ────────────────────────────────── */
.profile-main {
  max-width: 900px; margin: 0 auto;
  padding: 28px 28px 60px;
}

/* ── PROFILE HEADER CARD ─────────────────── */
.profile-header-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 28px;
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 24px; flex-wrap: wrap;
}
.profile-avatar-wrap { flex-shrink: 0; }
.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--border2);
  background: var(--bg3);
}
.profile-identity { flex: 1; min-width: 160px; }
.profile-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 28px; letter-spacing: 0.02em;
  text-transform: uppercase; line-height: 1;
}
.profile-handle { font-size: 13px; color: var(--text3); margin-top: 4px; }
.profile-joined { font-size: 11px; color: var(--text3); margin-top: 2px; letter-spacing: 0.06em; }

.profile-headline-stats {
  display: flex; gap: 24px; flex-wrap: wrap;
}
.phs-item { text-align: center; }
.phs-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 28px; line-height: 1;
}
.phs-val.green { color: var(--green); }
.phs-val.amber { color: var(--amber); }
.phs-val.red   { color: var(--red); }
.phs-label {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text3); margin-top: 4px;
}

/* ── SECTION TITLE ───────────────────────── */
.profile-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text3);
  margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.profile-section-sub {
  font-weight: 400; font-size: 10px; letter-spacing: 0.1em;
  color: var(--text3); text-transform: uppercase;
}

/* ── SERIES BREAKDOWN ────────────────────── */
.series-breakdown {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 8px;
}
.sb-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  border-left: 3px solid var(--border2);
}
.sb-card.ml   { border-left-color: var(--text2); }
.sb-card.pp   { border-left-color: var(--green); }
.sb-card.sp   { border-left-color: #a855f7; }
.sb-card.mov  { border-left-color: var(--amber); }
.sb-card.prop { border-left-color: #38bdf8; }
.sb-series {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text2); margin-bottom: 8px;
}
.sb-stats { display: flex; gap: 16px; }
.sb-stat-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 20px; line-height: 1;
}
.sb-stat-val.green { color: var(--green); }
.sb-stat-val.red   { color: var(--red); }
.sb-stat-label {
  font-size: 10px; color: var(--text3); letter-spacing: 0.08em;
  text-transform: uppercase; margin-top: 2px;
}

/* ── COMMUNITY HERO ──────────────────────── */
.dir-hero {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 32px;
  margin-bottom: 24px; gap: 24px; flex-wrap: wrap;
  background-image: linear-gradient(135deg, rgba(232,64,64,0.04) 0%, transparent 60%);
}
.dir-hero-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 4px;
}
.dir-hero-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 48px; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--text); margin-bottom: 8px;
}
.dir-hero-sub {
  font-size: 13px; color: var(--text3); max-width: 320px;
  line-height: 1.5;
}
.dir-hero-right {
  display: flex; gap: 32px; align-items: center; flex-shrink: 0;
}
.dir-hero-stat { text-align: center; }
.dir-hero-stat-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 36px; line-height: 1;
  color: var(--text);
}
.dir-hero-stat-val.green { color: var(--green); }
.dir-hero-stat-label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text3); margin-top: 4px;
}

/* ── MY PROFILE DIR BUTTON ───────────────── */
.my-profile-dir-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; background: var(--bg3);
  border: 1px solid var(--border2); color: var(--text2);
  border-radius: var(--radius); padding: 6px 14px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.my-profile-dir-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── DIRECTORY ───────────────────────────── */
.dir-header { margin-bottom: 20px; }
.dir-subtitle { font-size: 12px; color: var(--text3); margin-top: 4px; letter-spacing: 0.06em; }

.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.dir-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  transition: border-color 0.15s;
  display: flex; flex-direction: column; gap: 14px;
}
.dir-card:hover { border-color: var(--border2); }

.dir-card-top { display: flex; align-items: center; gap: 12px; }
.dir-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--border2);
  background: var(--bg3); flex-shrink: 0;
}
.dir-identity { flex: 1; min-width: 0; }
.dir-username {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 17px;
  letter-spacing: 0.02em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dir-displayname { font-size: 11px; color: var(--text3); margin-top: 2px; }

.dir-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px; background: var(--bg3);
  border-radius: var(--radius); padding: 10px 8px;
}
.dir-stat { text-align: center; }
.dir-stat-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 18px; line-height: 1;
  color: var(--text);
}
.dir-stat-val.green { color: var(--green); }
.dir-stat-val.amber { color: var(--amber); }
.dir-stat-val.red   { color: var(--red); }
.dir-stat-label {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text3); margin-top: 3px;
}

.dir-view-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; width: 100%;
  background: transparent; border: 1px solid var(--border2);
  color: var(--text2); border-radius: var(--radius);
  padding: 8px; cursor: pointer; transition: all 0.15s;
}
.dir-view-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── BACK BUTTON ─────────────────────────── */
.back-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; background: transparent;
  border: 1px solid var(--border2); color: var(--text3);
  border-radius: var(--radius); padding: 6px 14px;
  cursor: pointer; transition: all 0.15s; margin-bottom: 20px;
  display: inline-block;
}
.back-btn:hover { color: var(--text); border-color: var(--text2); }

/* ── PROFILE TABS ────────────────────────── */
.profile-tabs {
  display: flex; gap: 0; margin: 20px 0 16px;
  border-bottom: 1px solid var(--border);
}
.profile-tab {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 10px 18px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text3); cursor: pointer; transition: all 0.15s;
}
.profile-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.profile-tab:hover:not(.active) { color: var(--text2); }
.profile-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; background: rgba(232,64,64,0.1);
  border: 1px solid var(--accent); color: var(--accent);
  border-radius: var(--radius); padding: 5px 12px;
  cursor: pointer; text-decoration: none; transition: all 0.15s;
  white-space: nowrap;
}
.profile-btn:hover { background: var(--accent); color: #fff; }

@media (max-width: 600px) {
  .profile-search-inner { flex-wrap: wrap; }
  .search-wrap { width: 100%; }
  .profile-header-card { flex-direction: column; align-items: flex-start; }
  .profile-headline-stats { width: 100%; justify-content: space-between; }
  .profile-main { padding: 16px; }
}