/* ==========================================================
   Profilseite (/user/<db_id>)
   Im selben Karten-Look wie Community, Online User, Home-Dashboard etc.
   (siehe style/community.css, style/online.css, style/dashboard.css) -
   eigenstaendiges, auf #profilePage skopiertes Stylesheet (prof-*
   Klassenpraefix). Leerzustand/Karten/Buttons sind eigene Kopien der
   gleichnamigen Bausteine der anderen Module, nicht geteilt - gleiches
   Prinzip wie in allen bisherigen Modulen (siehe deren Kopf-Kommentare).

   Vorgabe: Border-Radius in diesem Modul ist ueberall maximal 3px
   (Ausnahme: runde Avatare, 50% ist kein "Karten"-Radius), siehe
   Abschnitt "Radius-Cap" am Ende.
   ========================================================== */

#profilePage { display: flex; flex-direction: column; gap: 18px; }

/* ---------- Karte (Basis) ----------
   Hintergrund/Rahmen/Radius/Schatten kommen vom globalen .card
   (boxen.css) - hier bleiben nur volle Breite und Innenabstand. */
#profilePage .prof-card { width: 100%; box-sizing: border-box; padding: 20px 24px; }
#profilePage .prof-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-shrink: 0; }
#profilePage .prof-cardhead h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: .4px; }

/* ---------- Header ----------
   .card (boxen.css) setzt flex-direction:column als Basis fuer alle
   Karten - hier explizit auf row zurueckstellen, da Avatar/Info/Button
   nebeneinander stehen sollen (ohne dieses Override wuerden alle drei
   Blöcke untereinander/zentriert landen). */
#profilePage .prof-header { display: flex; flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; }

#profilePage .prof-avatar-wrap { position: relative; flex-shrink: 0; }
#profilePage .prof-avatar {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  background: var(--bg-raised); border: 3px solid var(--border-strong);
}
#profilePage .prof-live {
  position: absolute; bottom: -2px; right: -4px;
  background: var(--live-color); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; gap: 4px;
}
#profilePage .prof-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: profLiveDotFade 1.8s ease-in-out infinite; }
@keyframes profLiveDotFade { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { #profilePage .prof-live-dot { animation: none; } }

#profilePage .prof-header-info { flex: 1; min-width: 180px; }
#profilePage .prof-name-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#profilePage .prof-name { margin: 0; font-size: 22px; font-weight: 800; color: var(--text-primary); }
#profilePage .prof-login { font-family: var(--font-mono); font-size: 18px; color: var(--text-faint); }
#profilePage .prof-meta { margin-top: 6px; font-size: 18px; color: var(--text-secondary); display: flex; gap: 16px; flex-wrap: wrap; }

#profilePage .prof-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

#profilePage .prof-twitch-btn {
  appearance: none; border: 1px solid transparent; border-radius: 3px; text-decoration: none;
  background: var(--accent); color: #fff; font-family: var(--font-family); font-size: 18px; font-weight: 700;
  padding: 10px 18px; white-space: nowrap; transition: background .15s ease;
}
#profilePage .prof-twitch-btn:hover { background: var(--accent-hover); }

/* ---------- Tabs (Infos / Letzte Streams / Erfolge) ----------
   Basis-Optik (Hintergrund/Rahmen/aktiv-Zustand) kommt aus dem globalen
   tabs.css - hier nur Abstand zum Header drueber und die kleine
   Fortschritts-Pille im "Erfolge"-Tab-Button. */
#profilePage .prof-tabs { margin-top: -4px; }
#profilePage .prof-tab-count {
  margin-left: 6px; font-size: 18px; font-weight: 700; opacity: .75;
  font-family: var(--font-mono);
}

/* ---------- Zwei-Spalten-Reihen (Info-Tab) ----------
   Gilt fuer BEIDE Reihen (Über mich/Auf einen Blick UND Letzte Streams/
   Angeheftete Erfolge). Standardmaessig (unter 1500px Seitenbreite,
   genau wie im Mobile-Modus weiter unten) nur EINE Box pro Zeile
   untereinander - bei schmaler Breite reicht der Platz nicht fuer zwei
   Spalten nebeneinander.

   Ab 1500px Seitenbreite (siehe @media weiter unten) stattdessen zwei
   Boxen pro Reihe, linke Spalte bewusst exakt 2/3, rechte exakt 1/3 der
   Breite (2fr/1fr), damit beide Reihen vertikal sauber fluchten. KEIN
   fester Mindestwert mehr auf der rechten Spalte - sie folgt frei der
   2/3-1/3-Ratio und darf dabei auch schmaler werden (die Erfolge-Kaestchen
   in .prof-pins-grid schrumpfen dann einfach mit, siehe dort). Das
   Zwei-Spalten-Layout existiert also nur ab 1500px (und immer nur
   oberhalb von 760px, siehe Mobile-Modus weiter unten). */
#profilePage .prof-row { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
#profilePage .prof-row + .prof-row { margin-top: 18px; }

@media (min-width: 1500px) {
  #profilePage .prof-row { grid-template-columns: 2fr 1fr; }
}

/* ---------- Über mich ----------
   Wird per JS (siehe module/user/index.php) auf die Höhe der "Auf einen
   Blick"-Box fixiert (>760px) - als Flex-Spalte, damit ein zu langer Text
   (max. 1000 Zeichen) innerhalb der Box scrollt (.prof-about-text) statt
   die fixierte Höhe zu sprengen. Der Zeilenumbruch-Bug, der frueher dafuer
   sorgte, dass das die letzten Zeilen unsichtbar abgeschnitten hat, lag an
   nl2br() in Kombination mit white-space:pre-line (doppelte Umbrueche) -
   nicht an diesem Hoehen-Abgleich selbst, siehe module/user/index.php. */
#profilePage .prof-about { display: flex; flex-direction: column; }

#profilePage .prof-editbtn {
  appearance: none; background: var(--button-secondary-bg); color: var(--button-secondary-text);
  border: 1px solid var(--border-strong); border-radius: 3px; padding: 5px 12px;
  font-family: var(--font-family); font-size: 18px; font-weight: 600; cursor: pointer;
}
#profilePage .prof-editbtn:hover { background: var(--button-secondary-bg-hover); }

#profilePage .prof-about-text {
  margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-secondary); white-space: pre-line;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
#profilePage .prof-about-empty { color: var(--text-faint); font-style: italic; }

#profilePage .prof-about-edit { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
#profilePage .prof-textarea {
  width: 100%; box-sizing: border-box; min-height: 90px; resize: vertical; flex: 1 1 auto;
  background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 3px;
  color: var(--text-primary); font-family: var(--font-family); font-size: 18px; padding: 10px 12px; outline: none;
}
#profilePage .prof-textarea:focus { border-color: var(--accent); }
#profilePage .prof-about-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
#profilePage .prof-about-counter { margin-right: auto; font-size: 18px; color: var(--text-faint); font-family: var(--font-mono); }

#profilePage .prof-btn {
  appearance: none; border: 1px solid transparent; border-radius: 3px;
  font-family: var(--font-family); font-size: 18px; font-weight: 700; padding: 8px 14px; cursor: pointer;
}
#profilePage .prof-btn-primary { background: var(--accent); color: #fff; }
#profilePage .prof-btn-primary:hover { background: var(--accent-hover); }
#profilePage .prof-btn-primary:disabled { opacity: .6; cursor: default; }
#profilePage .prof-btn-secondary { background: var(--button-secondary-bg); color: var(--button-secondary-text); border-color: var(--border-strong); }
#profilePage .prof-btn-secondary:hover { background: var(--button-secondary-bg-hover); }

/* ---------- Auf einen Blick (Info-Tab) ---------- */
#profilePage .prof-stats-grid { display: flex; flex-direction: column; gap: 10px; }
#profilePage .prof-stat-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 3px;
  padding: 10px 12px;
}
#profilePage .prof-stat-ic { font-size: 20px; flex-shrink: 0; }
#profilePage .prof-stat-label { flex: 1; font-size: 18px; color: var(--text-muted); font-weight: 600; }
#profilePage .prof-stat-value { font-size: 18px; color: var(--text-primary); font-weight: 700; font-family: var(--font-mono); }

/* ---------- Erfolge (Tab) ---------- */
#profilePage .prof-achv-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#profilePage .prof-achv-summary-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text-primary); }
#profilePage .prof-achv-summary-pct { font-size: 20px; font-weight: 800; color: var(--accent); font-family: var(--font-mono); flex-shrink: 0; }
#profilePage .prof-achv-summary-bar {
  margin-top: 12px; height: 8px; border-radius: 3px; background: var(--bg-raised);
  border: 1px solid var(--border-strong); overflow: hidden;
}
#profilePage .prof-achv-summary-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; }
#profilePage .prof-achv-recalc { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

#profilePage .prof-achv-summary { margin-bottom: 12px; }
#profilePage .prof-achv-category + .prof-achv-category { margin-top: 12px; }
#profilePage .prof-achv-cathead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
#profilePage .prof-achv-cathead h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text-primary); }
#profilePage .prof-achv-catprogress-text { font-size: 18px; color: var(--text-faint); font-family: var(--font-mono); flex-shrink: 0; }
#profilePage .prof-achv-catbar {
  height: 6px; border-radius: 3px; background: var(--bg-raised); border: 1px solid var(--border-strong);
  overflow: hidden; margin-bottom: 12px;
}
#profilePage .prof-achv-catbar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; }

/* --- ACHIEVEMENT GRID (Kompakte Boxen nebeneinander im Original-Layout) --- */
#profilePage .prof-achv-list { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
  gap: 10px; 
}

#profilePage .prof-achv-row {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 14px 10px; cursor: pointer; position: relative;
  transition: border-color .15s ease, transform .1s ease;
}
#profilePage .prof-achv-row:hover { border-color: var(--accent); }
#profilePage .prof-achv-row:active { transform: scale(0.98); }
#profilePage .prof-achv-row.locked { opacity: .7; }
#profilePage .prof-achv-row.unlocked { border-color: #7ee787; }

#profilePage .prof-achv-row-ic {
  flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; border-radius: var(--radius-sm);
  background: var(--bg-card); border: 1px solid var(--border-strong);
}
#profilePage .prof-achv-row.unlocked .prof-achv-row-ic { border-color: #7ee787; background: rgba(126, 231, 135, .12); }
#profilePage .prof-achv-row.locked .prof-achv-row-ic { filter: grayscale(1); }

#profilePage .prof-achv-row-main { flex: 1; width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#profilePage .prof-achv-row-title { display: flex; align-items: center; justify-content: center; width: 100%; }
#profilePage .prof-achv-row-name { 
  font-size: 15px; font-weight: 700; color: var(--text-primary); 
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; 
}
#profilePage .prof-achv-row.locked .prof-achv-row-name { color: var(--text-muted); }

/* Nicht mehr benötigte Listenelemente ausblenden */
#profilePage .prof-achv-row-check,
#profilePage .prof-achv-row-desc,
#profilePage .prof-achv-row-side { display: none; }

#profilePage .prof-achv-row-progress { display: flex; align-items: center; gap: 10px; margin-top: 3px; width: 100%; }
#profilePage .prof-achv-row-progress-bar {
  flex: 1; height: 6px; border-radius: 3px; background: var(--bg-card);
  border: 1px solid var(--border-strong); overflow: hidden;
}
#profilePage .prof-achv-row-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; }
#profilePage .prof-achv-row-progress-text { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); flex-shrink: 0; }

#profilePage .prof-achv-row-admin { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
#profilePage .prof-achv-adminbtn {
  appearance: none; border: 1px solid var(--border-strong); border-radius: 3px;
  background: var(--button-secondary-bg); color: var(--button-secondary-text);
  font-family: var(--font-family); font-size: 15px; font-weight: 700; padding: 5px 12px; cursor: pointer;
}
#profilePage .prof-achv-adminbtn:hover { background: var(--button-secondary-bg-hover); }
#profilePage .prof-achv-admin-hint { font-size: 14px; color: var(--text-faint); font-style: italic; }

@media (max-width: 640px) {
  #profilePage .prof-achv-row { flex-wrap: wrap; }
}

/* ---------- Letzte Streams ---------- */
#profilePage .prof-history-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 1100px) { #profilePage .prof-history-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { #profilePage .prof-history-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { #profilePage .prof-history-grid { grid-template-columns: 1fr; } }
#profilePage .prof-stream {
  position: relative; display: flex; align-items: stretch; gap: 12px;
  background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 10px; transition: border-color .15s ease;
}
#profilePage .prof-stream.has-vod:hover { border-color: var(--accent); }
#profilePage .prof-stream-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
#profilePage .prof-stream-art-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 22px; opacity: .3;
}
#profilePage .prof-stream-del {
  position: absolute; top: 4px; right: 4px; z-index: 2; width: 18px; height: 18px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65); color: #fff; border: none; border-radius: 3px;
  font-size: 10px; cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease;
}
#profilePage .prof-stream:hover .prof-stream-del { opacity: 1; }
#profilePage .prof-stream-del:hover { background: var(--danger); }

#profilePage .prof-stream-info { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
#profilePage .prof-stream-top { min-width: 0; }
#profilePage .prof-stream-title {
  font-size: 16px; font-weight: 700; color: var(--text-primary); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#profilePage .prof-stream-cat {
  margin-top: 3px; font-size: 14px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#profilePage .prof-stream-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
#profilePage .prof-stream-ago { font-size: 13px; color: var(--text-faint); white-space: nowrap; }
#profilePage .prof-stream-dur {
  margin-left: auto; font-size: 13px; font-weight: 700; color: var(--text-primary);
  font-family: var(--font-mono); text-align: right; white-space: nowrap;
}

/* ---------- Angeheftete Erfolge ---------- */
#profilePage .prof-pins { display: flex; flex-direction: column; }
#profilePage .prof-pins-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

@media (min-width: 900px) {
  #profilePage .prof-pins-grid { grid-template-columns: repeat(4, 1fr); }
}

#profilePage .prof-pin-slot {
  appearance: none; box-sizing: border-box; width: 100%; min-width: 0; border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--bg-raised); border: 2px dashed var(--border-strong);
  padding: 6px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
#profilePage .prof-pin-slot:hover { border-color: var(--accent); }
#profilePage .prof-pin-slot:active { transform: scale(.97); }
#profilePage .prof-pin-slot.filled {
  border-style: solid;
}

#profilePage .prof-pin-icon-box {
  width: 100%; aspect-ratio: 1/1; container-type: inline-size;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#profilePage .prof-pin-icon { font-size: 60cqw; line-height: 1; }
#profilePage .prof-pin-plus { font-size: 40cqw; line-height: 1; color: var(--text-faint); font-weight: 700; }

#profilePage .prof-pin-name {
  min-height: 1.25em; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: center;
  line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

#profilePage .prof-pin-slot.disabled,
#profilePage .prof-pin-slot:disabled { cursor: default; }
#profilePage .prof-pin-slot.empty.disabled,
#profilePage .prof-pin-slot.empty:disabled { border-style: solid; opacity: .35; }

/* ---------- Privat/gesperrt ---------- */
#profilePage .prof-locked {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 60px 24px; max-width: 480px; margin: 0 auto;
}
#profilePage .prof-locked-ic { font-size: 34px; }
#profilePage .prof-locked-title { margin: 0; font-size: 18px; color: var(--text-primary); }
#profilePage .prof-locked-text { margin: 0; font-size: 18px; color: var(--text-muted); line-height: 1.5; }

/* ---------- Radius-Cap: max. 3px ---------- */
#profilePage button { border-radius: 3px; }

@media (max-width: 760px) {
  #profilePage .prof-row { grid-template-columns: 1fr; }
  #profilePage .prof-card { padding: 16px 18px; }
  #profilePage .prof-header { gap: 14px; }
}

@media (max-width: 480px) {
  #profilePage .prof-history-grid { grid-template-columns: 1fr; gap: 10px; }
  #profilePage .prof-header { flex-direction: column; align-items: flex-start; }
  #profilePage .prof-header-actions { width: 100%; }
  #profilePage .prof-twitch-btn,
  #profilePage .prof-header-actions .back-btn { flex: 1 1 0; box-sizing: border-box; text-align: center; justify-content: center; }
}

/* ==========================================================
   Erfolg-Auswahl-Dialog ("Angeheftete Erfolge", SweetAlert2-Inhalt)
   ========================================================== */
.profPinPickerEmpty { margin: 0; text-align: center; color: var(--text-muted, var(--text-muted)); font-size: 14px; }
.profPinPickerGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-height: 360px; overflow-y: auto; padding: 2px; }
.profPinPickerItem { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; text-align: center; cursor: pointer; transition: all .15s ease; }
.profPinPickerItem:hover { border-color: var(--accent, var(--accent)); background: var(--bg-raised, var(--bg-raised)); }
.profPinPickerIcon { font-size: 26px; line-height: 1; }
.profPinPickerName { font-weight: 600; font-size: 13px; color: var(--text-primary); line-height: 1.3; }
.profPinPickerClear .profPinPickerIcon { color: var(--danger, var(--danger)); }
.profPinPickerClear .profPinPickerName { color: var(--danger, var(--danger)); }

/* ==========================================================
   Aus module/user/index.php hierher verschoben (war dort als inline
   <style> im Markup) - gehoert wie alle anderen prof-*-Klassen in dieses
   Stylesheet, damit css-Cachebusting (cssUrl()-Versionsparameter in
   style.php) auch fuer diese Regeln greift und nichts doppelt/verstreut
   gepflegt werden muss.
   ========================================================== */

/* Kleiner Icon-Button fuer Sync & Recalc im Fortschritts-Header */
#profilePage .prof-achv-iconbtn {
  appearance: none; background: var(--button-secondary-bg); color: var(--button-secondary-text);
  border: 1px solid var(--border-strong); border-radius: 3px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
  cursor: pointer; padding: 0; transition: background .15s ease, transform .15s ease;
  vertical-align: middle;
}
#profilePage .prof-achv-iconbtn:hover { background: var(--button-secondary-bg-hover); transform: scale(1.05); }
#profilePage .prof-achv-iconbtn:active { transform: scale(0.95); }
#profilePage .prof-achv-iconbtn:disabled { opacity: .5; cursor: default; transform: none; }

/* Letzte Streams: Feste Cover-Groesse 136x190, gesamte Card ist Link */
#profilePage .prof-history-grid {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start;
}

#profilePage .prof-stream-card {
  position: relative; width: 136px; height: 190px; border-radius: 3px; overflow: hidden;
  background: var(--bg-raised); border: 1px solid var(--border-strong);
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .1s ease;
}
#profilePage .prof-stream-card.has-vod:hover { border-color: var(--accent); transform: translateY(-2px); }

#profilePage .prof-stream-art {
  position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
#profilePage .prof-stream-art-ph { font-size: 32px; opacity: .3; }

#profilePage .prof-stream-del {
  position: absolute; top: 6px; right: 6px; z-index: 3; width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); color: #fff; border: none; border-radius: 3px;
  font-size: 11px; cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease;
}
#profilePage .prof-stream-card:hover .prof-stream-del { opacity: 1; }
#profilePage .prof-stream-del:hover { background: var(--danger); }

#profilePage .prof-stream-meta-box {
  position: relative; z-index: 2; background: var(--bg-raised);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 0; width: 100%; border-top: 1px solid var(--border-strong);
  font-family: var(--font-mono); text-align: center;
}
#profilePage .prof-stream-date,
#profilePage .prof-stream-dur {
  font-size: 11px; color: var(--text-primary); line-height: 1.3;
  text-align: center; width: 100%; display: block;
}