/* Personal-center navigation only; the workspace and account actions stay intact. */
.profile-page { --profile-anchor-offset: 96px; }
.profile-page .profile-sidebar {
  top: var(--profile-anchor-offset);
  max-height: calc(100dvh - var(--profile-anchor-offset) - 16px);
  overflow: auto;
  scrollbar-width: thin;
  border-color: #e5e3db;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(25, 28, 36, .045);
}
.profile-page .account-card { padding: 22px 18px 18px; color: #20242b; background: linear-gradient(160deg, #fffdf1, #fff 75%); border-bottom: 1px solid #eeede7; }
.profile-page .account-card::after { content: none; }
.profile-page .account-identity { display: flex; align-items: center; gap: 12px; }
.profile-page .account-details { min-width: 0; }
.profile-page .profile-sidebar .profile-avatar { flex: 0 0 54px; width: 54px; height: 54px; border: 2px solid #fff; border-radius: 17px; background: #ffdf36; font-size: 19px; box-shadow: 0 0 0 1px #ede8cf; }
.profile-page .account-card h1 { margin: 0 0 7px; font-size: 17px; font-weight: 850; line-height: 1.45; letter-spacing: 0; overflow-wrap: anywhere; }
.profile-page .account-card .public-id { padding: 3px 6px; border: 0; border-radius: 5px; color: #666c77; background: #f1f2f4; font-size: 10px; letter-spacing: .2px; }
.profile-page .account-card .online-dot { margin-top: 16px; gap: 7px; color: #647269; font-size: 11px; }
.profile-page .account-card .online-dot::before { width: 6px; height: 6px; box-shadow: none; }
.profile-page .account-card p { margin: 7px 0 0; color: #858992; font-size: 11px; }
.profile-page .account-edit { min-height: 40px; height: auto; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; border-color: #e7e3d5; border-radius: 10px; color: #333840; background: #fff; font-size: 12px; font-weight: 750; }
.profile-page .account-edit:hover { color: #17191e; border-color: #edcf38; background: #fff5bd; }
.profile-page .profile-sidebar svg { display: block; width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.profile-page .account-edit svg { width: 15px; height: 15px; }
.profile-page .profile-nav { padding: 14px 10px; gap: 5px; }
.profile-page .profile-nav a { position: relative; min-height: 47px; padding: 0 12px; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; border: 1px solid transparent; border-radius: 11px; color: #626974; font-size: 13px; text-decoration: none; transition: background .15s ease, color .15s ease; }
.profile-page .profile-nav a .profile-nav-icon { display: grid; place-items: center; color: inherit; }
.profile-page .profile-nav a b { font-weight: 650; }
.profile-page .profile-nav a:hover { color: #222834; background: #f5f6f8; }
.profile-page .profile-nav a.is-active { color: #25240d; border-color: #f8e48a; background: #fff3ad; }
.profile-page .profile-nav a.is-active b { font-weight: 850; }
.profile-page .profile-nav a.is-active .profile-nav-icon { color: #312b08; }
.profile-page .profile-nav a i { position: static; margin: 0; min-width: 20px; height: 20px; font-size: 10px; }
.profile-page .sidebar-links { padding: 12px 14px; gap: 2px; border-color: #eeede7; }
.profile-page .sidebar-links a, .profile-page .sidebar-links button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 0 9px; border: 0; border-radius: 8px; color: #727985; background: transparent; font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.profile-page .sidebar-links svg { width: 16px; height: 16px; }
.profile-page .sidebar-links a:hover { color: #1e57bd; background: #f0f5ff; }
.profile-page .sidebar-links button:hover { color: #bd432e; background: #fff2ed; }
.profile-page .profile-sidebar :is(a, button):focus-visible { outline: 2px solid #165cff; outline-offset: 2px; }
.profile-page .profile-workspace > [id] { scroll-margin-top: var(--profile-anchor-offset); }
@media (max-width: 820px) {
  .profile-page .profile-sidebar { position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: 230px minmax(0, 1fr); }
  .profile-page .account-card { grid-row: 1 / 3; border-bottom: 0; border-right: 1px solid #eeede7; border-radius: 20px 0 0 20px; }
  .profile-page .profile-nav { padding: 12px; gap: 3px; }
  .profile-page .profile-nav a { min-height: 40px; }
  .profile-page .sidebar-links { display: flex; flex-wrap: wrap; padding: 8px 12px; }
  .profile-page .sidebar-links a, .profile-page .sidebar-links button { width: auto; }
}
@media (max-width: 760px) { .profile-page { --profile-anchor-offset: 106px; } }
@media (max-width: 620px) {
  .profile-page .profile-sidebar { display: block; }
  .profile-page .account-card { padding: 18px; border-right: 0; border-bottom: 1px solid #eeede7; border-radius: 20px 20px 0 0; }
  .profile-page .account-edit { margin-top: 13px; }
  .profile-page .profile-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 10px 8px; overflow: visible; }
  .profile-page .profile-nav a { min-width: 0; min-height: 68px; padding: 8px 2px; display: flex; flex-direction: column; justify-content: center; gap: 6px; font-size: 10px; }
  .profile-page .profile-nav a .profile-nav-icon { height: 20px; }
  .profile-page .profile-nav a i { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; }
  .profile-page .sidebar-links { display: flex; justify-content: space-between; padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) { .profile-page .profile-nav a { transition: none; } }