/* ═══ /profile polish ═══ */

#page-profile{
  /* подцепляем глобальные токены */
}

/* ── Hero профиля ───────────────────────── */
#page-profile .profile-hero{
  padding:56px 36px !important;
  background:linear-gradient(180deg,
    rgba(18,12,28,1) 0%,
    rgba(10,8,18,1) 100%) !important;
  border-bottom:1px solid var(--p-line) !important;
  gap:32px !important;
}
#page-profile .profile-avatar-big,
#page-profile .profile-avatar-big-ph{
  width:108px !important;
  height:108px !important;
  border:2px solid var(--p-accent) !important;
  box-shadow:0 0 0 4px rgba(212,182,86,.08), 0 12px 32px rgba(0,0,0,.5) !important;
}
#page-profile .profile-name{
  font-size:clamp(28px, 4vw, 38px) !important;
  letter-spacing:.02em !important;
  line-height:1.05 !important;
  color:var(--p-ink) !important;
}
#page-profile .profile-email{
  color:var(--p-ink-mute) !important;
  font-size:13px !important;
  letter-spacing:.5px !important;
  margin-top:6px !important;
}

/* ── Stats-row: тонкие разделители вместо коробок ─── */
#page-profile .profile-stats{
  display:flex !important;
  gap:36px !important;
  margin-top:20px !important;
}
#page-profile .profile-stats > div{
  position:relative;
  padding-right:36px;
}
#page-profile .profile-stats > div + div::before{
  content:"";
  position:absolute;
  left:-18px; top:6px; bottom:6px;
  width:1px;
  background:var(--p-line);
}
#page-profile .ps-val{
  font-family:'Bebas Neue',sans-serif;
  font-size:28px !important;
  color:var(--p-accent) !important;
  letter-spacing:-.01em !important;
  line-height:1 !important;
}
#page-profile .ps-lbl{
  font-size:10px !important;
  letter-spacing:2px !important;
  color:var(--p-ink-dim) !important;
  margin-top:6px !important;
  text-transform:uppercase;
}

/* ── Level-bar ────────────────────────────── */
#page-profile .level-bar-track{
  height:6px !important;
  background:var(--p-surface-hi) !important;
  border-radius:9999px !important;
  overflow:hidden;
}
#page-profile .level-bar-fill{
  background:linear-gradient(90deg, var(--p-accent), #e5c462) !important;
  box-shadow:0 0 12px rgba(212,182,86,.4);
  border-radius:9999px !important;
  transition:width 600ms var(--p-ease);
}

/* ── Action-кнопки профиля (выйти, как видят, …) ── */
#page-profile .logout-btn,
#page-profile .view-as-btn{
  padding:10px 18px !important;
  font-size:11px !important;
  letter-spacing:1.5px !important;
  border-radius:var(--p-r) !important;
  transition:
    background var(--p-base) var(--p-ease),
    border-color var(--p-base) var(--p-ease),
    color var(--p-base) var(--p-ease),
    transform var(--p-base) var(--p-ease),
    box-shadow var(--p-base) var(--p-ease) !important;
}
#page-profile .view-as-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(212,182,86,.18);
}
#page-profile .view-as-btn:active,
#page-profile .logout-btn:active{transform:translateY(0);}

/* ── Достижения: timeline-stripe вместо «коробок» ── */
#page-profile .ach-card{
  transition:
    background var(--p-base) var(--p-ease),
    transform var(--p-base) var(--p-ease),
    box-shadow var(--p-base) var(--p-ease),
    border-color var(--p-base) var(--p-ease) !important;
  border-radius:14px !important;
}
#page-profile .ach-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,.4), 0 0 0 1px var(--p-line-strong) inset;
}

/* ── Любимые жанры — пилюли вместо карточек ── */
#page-profile .fg-card{
  border-radius:9999px !important;
  padding:8px 14px !important;
  background:var(--p-surface-acc) !important;
  border:1px solid rgba(212,182,86,.25) !important;
  transition:
    background var(--p-base) var(--p-ease),
    transform var(--p-base) var(--p-ease) !important;
}
#page-profile .fg-card:hover{
  transform:translateY(-1px);
  background:rgba(212,182,86,.12) !important;
}

/* ── Tabs внизу (история / избранное / …) ─── */
#page-profile #profile-tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--p-line);
}
#page-profile #profile-tabs .sf{
  padding:9px 16px !important;
  font-size:11px !important;
  letter-spacing:1.5px !important;
  border-radius:9999px !important;
  background:transparent !important;
  border:1px solid var(--p-line) !important;
  color:var(--p-ink-mute) !important;
  transition:
    color var(--p-base) var(--p-ease),
    border-color var(--p-base) var(--p-ease),
    background var(--p-base) var(--p-ease) !important;
}
#page-profile #profile-tabs .sf:hover{
  color:var(--p-ink);
  border-color:var(--p-line-strong);
}
#page-profile #profile-tabs .sf.on{
  background:var(--p-accent) !important;
  color:#0a0810 !important;
  border-color:var(--p-accent) !important;
}

/* ── History/Watchlist items: timeline-row ─── */
#page-profile .history-item{
  border-radius:var(--p-r) !important;
  transition:
    background var(--p-base) var(--p-ease),
    transform var(--p-base) var(--p-ease) !important;
}
#page-profile .history-item:hover{
  background:var(--p-surface-acc) !important;
  transform:translateX(2px);
}
#page-profile .hi-poster,
#page-profile .hi-poster-ph{
  border-radius:6px !important;
  transition:transform var(--p-base) var(--p-ease);
}
#page-profile .history-item:hover .hi-poster,
#page-profile .history-item:hover .hi-poster-ph{
  transform:scale(1.03);
}

/* ── Linked accounts box ──────────────────── */
#page-profile #linked-accounts-wrap{
  padding:14px 16px !important;
  background:var(--p-surface) !important;
  border:1px solid var(--p-line) !important;
  border-radius:var(--p-r-md) !important;
}