/* ===========================================================================
   Private profile — premium glass redesign. Content sits in frosted dark-glass
   cards so it stays legible over ANY user background (image or gradient) while
   still letting that background show through. Matches the wallet's polish.
   CSP-safe (style-src 'self'). Honors prefers-reduced-motion.
   =========================================================================== */
.pf-wrap {
  position: relative; z-index: 1; max-width: 640px; margin: 0 auto;
  padding: calc(1.2rem + env(safe-area-inset-top)) 0.9rem calc(124px + env(safe-area-inset-bottom));
}
/* faint vignette: keeps text crisp over busy wallpapers without hiding them */
.pf-wrap::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(8,8,12,0.30), rgba(8,8,12,0.55) 100%);
}

.pf-card {
  position: relative; border-radius: 18px; padding: 1.1rem 1.15rem; margin-bottom: 1rem;
  background: rgba(20,20,26,0.52);
  border: 1px solid var(--glass-rim, rgba(255,255,255,0.22));
  /* Liquid Glass: soft float + specular top edge */
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 1.2px 0.5px rgba(255,255,255,0.55), inset 0 -1px 1px rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
}
/* Blurred-avatar ambient backdrop (content-tint), Apple-Music style. */
.pf-amb { position: fixed; inset: -60px; z-index: -2; background-size: cover; background-position: center;
  filter: blur(70px) saturate(1.5) brightness(0.5); transform: scale(1.1); }

.rise { opacity: 0; transform: translateY(15px); animation: pfRise .6s cubic-bezier(.22,.7,.2,1) forwards; }
@keyframes pfRise { to { opacity: 1; transform: none; } }

/* ---- Hero ---- */
.pf-hero { text-align: center; padding-top: 1.3rem; }
.pf-avatar-wrap { position: relative; width: 118px; height: 118px; margin: 0 auto 0.7rem; }
.pf-avatar {
  width: 118px; height: 118px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid rgba(255,255,255,0.5); background: #181818;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 0 5px rgba(255,255,255,0.06);
}
.pf-edit-btn {
  border-radius: 50%; width: 36px; height: 36px; padding: 0; cursor: pointer; border: 2px solid rgba(16,15,22,0.9);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  transition: transform .14s ease, filter .14s ease;
}
.pf-edit-btn:hover { filter: brightness(1.08); }
.pf-edit-btn:active { transform: scale(0.92); }
.pf-cam { position: absolute; bottom: 0; right: 0; background: var(--accent, #3be8b0); }
.pf-bg  { position: absolute; bottom: 0; left: 0; background: #7b6cff; }

.pf-nick { margin: 0.1rem 0 0.15rem; }
#nickname-display { font-size: 1.35rem; font-weight: 800; color: #fff; margin-bottom: 0.1em; letter-spacing: -0.02em; }
#edit-nickname-btn { background: none; color: var(--accent, #3be8b0); border: none; cursor: pointer; font-size: 0.85rem; text-decoration: none; font-weight: 600; }
#add-nickname-btn { background: var(--accent, #3be8b0); color: #0c1410; border: none; border-radius: var(--radius); padding: 0.45em 1.3em; font-size: 0.95rem; font-weight: 700; cursor: pointer; }
#nickname-form { display: none; margin-top: 0.6em; flex-direction: row; gap: 0.5em; align-items: center; justify-content: center; flex-wrap: wrap; }
#nickname-form input[name="nickname"] { border-radius: 10px; border: 1px solid var(--accent, #3be8b0); padding: 0.5em 0.8em; font-size: 1em; background: rgba(0,0,0,0.3); color: #fff; }
#nickname-form button[type="submit"] { background: var(--accent, #3be8b0); color: #0c1410; border: none; border-radius: 10px; padding: 0.5em 1.1em; font-weight: 700; cursor: pointer; }
#cancel-nickname-btn { background: none; color: var(--text-muted, #9aa); border: none; font-size: 0.95em; cursor: pointer; }

.pf-wallet { font-family: ui-monospace, Menlo, monospace; font-size: 0.76rem; color: var(--text-muted, #9aa); margin-top: 0.15rem; }

/* stats strip */
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1rem; border-top: 1px solid rgba(255,255,255,0.09); padding-top: 0.9rem; }
.pf-stat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pf-stat + .pf-stat::before { content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: rgba(255,255,255,0.09); }
.pf-stat b { font-size: 1.2rem; font-weight: 800; color: #fff; display: inline-flex; align-items: center; gap: 4px; }
.pf-stat span { font-size: 0.64rem; color: var(--text-muted, #9aa); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---- Action grid ---- */
.pf-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1rem; }
.pf-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 0.95rem 0.4rem; border-radius: 16px; text-decoration: none; color: #eceaf2; font-size: 0.78rem; font-weight: 600;
  background: rgba(16,15,22,0.6); border: 1px solid rgba(255,255,255,0.09);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.pf-action:hover { transform: translateY(-2px); border-color: rgba(59,232,176,0.4); background: rgba(22,21,30,0.7); }
.pf-action:active { transform: scale(0.96); }
.pf-action svg { width: 23px; height: 23px; fill: none; stroke: var(--accent, #3be8b0); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pf-action.danger svg { stroke: #ff7a90; }

/* ---- Recovery nudge (full add/change/remove lives in Settings) ---- */
.pf-rec-nudge { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.pf-rec-nudge svg { width: 26px; height: 26px; flex: 0 0 auto; fill: none; stroke: var(--accent, #3be8b0); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-rec-title { color: #fff; font-weight: 700; font-size: 0.95rem; }
.pf-rec-sub { color: var(--text-muted, #9aa); font-size: 0.8rem; line-height: 1.4; margin-top: 2px; }
.pf-rec-arrow { margin-left: auto; color: var(--accent, #3be8b0); font-size: 1.2rem; }

/* ---- Bio + social links editor (#11) ---- */
.pf-about-own { margin-top: 0.9rem; }
.pf-about-edit { background: none; border: none; box-shadow: none; color: var(--accent, #3be8b0); font-size: 0.84rem; font-weight: 600; cursor: pointer; }
#about-form { display: none; flex-direction: column; gap: 8px; margin-top: 0.7rem; text-align: left; }
#about-form textarea { width: 100%; box-sizing: border-box; min-height: 70px; resize: vertical; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: #fff; padding: 9px 11px; font-family: inherit; font-size: 0.92rem; }
#about-form input { width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: #fff; padding: 9px 11px; font-size: 0.9rem; }
#about-form input:focus, #about-form textarea:focus { outline: none; border-color: rgba(59,232,176,0.5); }
.pf-about-actions { display: flex; gap: 8px; }
.pf-about-actions button { flex: 1; border: none; border-radius: 10px; padding: 10px; font-weight: 700; cursor: pointer; background: var(--accent-grad); color: #06140f; }
.pf-about-actions button.ghost { background: rgba(255,255,255,0.08); color: #cfd; }
#about-msg { font-size: 0.82rem; color: #9af5d6; }

/* ---- Sign out ---- */
.pf-account { text-align: center; }
#sign-out-btn { background: transparent; color: var(--text-muted, #9aa); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius); padding: 0.6em 1.6em; font-size: 0.9em; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
#sign-out-btn:hover { border-color: #ff7a90; color: #ff7a90; }

/* ---- Tabs ---- */
.pf-tabs { display: flex; justify-content: center; margin: 0.4rem 0 1rem; }
.pf-tabs-inner { display: flex; background: rgba(16,15,22,0.6); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 4px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#videos-tab, #following-tab { border: none; padding: 9px 22px; border-radius: 10px; cursor: pointer; font-size: 0.9em; font-weight: 700; transition: all 0.2s; }

/* ---- Video grid ---- */
#profile-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 10px; margin: 0 auto calc(20px + env(safe-area-inset-bottom)); }
.profile-video-thumb { position: relative; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: #15131c; box-shadow: 0 8px 22px rgba(0,0,0,0.45); transition: transform .16s ease, box-shadow .16s ease; }
.profile-video-thumb:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.14); }
.profile-thumb-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-thumb-views { position: absolute; top: 7px; left: 7px; display: inline-flex; align-items: center; gap: 3px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.74rem; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-sm); z-index: 9; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.profile-thumb-views svg { width: 12px; height: 12px; }
/* #58: one calm ⋯ button per thumbnail; tapping it slides up a shared bottom
   sheet (TikTok/YouTube style) — clean line-icon rows, no chips, no emojis. */
.pf-pin-mark { position: absolute; bottom: 7px; left: 8px; z-index: 9; color: #fff; opacity: 0.92; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85)); pointer-events: none; display: inline-flex; }
.pf-thumb-menu-btn { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; padding: 0; box-sizing: border-box; border-radius: 999px; background: rgba(0,0,0,0.42); color: #fff; cursor: pointer; z-index: 11; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0.92; transition: opacity .15s, background .15s, transform .1s; }
.pf-thumb-menu-btn:hover { opacity: 1; background: rgba(0,0,0,0.7); }
.pf-thumb-menu-btn:active { transform: scale(0.9); }
.pf-sheet { position: fixed; inset: 0; z-index: 200; }
.pf-sheet[hidden] { display: none; }
.pf-sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity .28s ease; }
.pf-sheet.open .pf-sheet-scrim { opacity: 1; }
.pf-sheet-card {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 600px; margin: 0 auto;
  background: rgba(22,21,28,0.93); -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3);
  border-top: 1px solid rgba(255,255,255,0.10); border-radius: 22px 22px 0 0;
  padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 44px rgba(0,0,0,0.55);
  transform: translateY(101%); transition: transform .3s cubic-bezier(0.2,0.8,0.2,1);
}
.pf-sheet.open .pf-sheet-card { transform: translateY(0); }
.pf-sheet-grip { width: 38px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.22); margin: 6px auto 10px; }
.pf-sheet-row {
  display: flex; align-items: center; gap: 16px; width: 100%; box-sizing: border-box;
  background: none; border: none; border-radius: 13px; padding: 14px; margin: 0;
  color: #f2f2f7; font-size: 1rem; font-weight: 500; text-align: left; cursor: pointer; transition: background .12s;
}
.pf-sheet-row:hover, .pf-sheet-row:active { background: rgba(255,255,255,0.08); }
.pf-sheet-row svg { width: 23px; height: 23px; flex: 0 0 auto; opacity: 0.92; }
.pf-sheet-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 5px 14px; }
.pf-sheet-danger { color: #ff6b6b; }
.pf-sheet-danger svg { opacity: 1; }
.no-videos { grid-column: 1 / -1; text-align: center; color: var(--text-muted, #9aa); font-size: 1rem; padding: 2.5rem 1rem; }

@media (prefers-reduced-motion: reduce) { .rise { animation: none !important; opacity: 1 !important; transform: none !important; } }