.profile-workspace { width: min(100%, 560px); margin: 64px auto 0; }
.account-header { flex-wrap: wrap; }
.nav-actions { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.nav-actions .home-link, #supportBtn, #logoutBtn { flex-shrink: 0; }
#logoutBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#logoutBtn img { filter: brightness(0) invert(0.8); }
#logoutLabel { min-width: 4em; text-align: center; }
#logoutBtn:disabled { opacity: 0.55; cursor: default; }
.nav-actions .link-text { color: var(--text); font-size: 13px; }
.profile-identity { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 24px; }
.avatar-wrap { width: 88px; }
#avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.avatar-wrap .link-text { width: 100%; font-size: 12px; }
.user-info { padding-top: 8px; min-width: 0; }
.name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
#nickname { margin: 0; font-size: 24px; line-height: 1.4; font-weight: 700; overflow-wrap: anywhere; }
.identity-email { margin: 8px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.badges-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { --role-light: 180 190 200; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border: 1px solid rgb(var(--role-light) / 35%); border-radius: 6px; background: rgb(var(--role-light) / 8%); box-shadow: 0 0 18px rgb(var(--role-light) / 14%), inset 0 1px 0 rgb(255 255 255 / 8%); color: var(--muted); font-size: 11px; font-weight: 600; }
.badge.role-admin { --role-light: 255 96 116; color: #ff9bab; background: rgb(146 33 52 / 22%); border-color: rgb(255 113 135 / 48%); box-shadow: 0 0 22px rgb(255 72 103 / 23%), inset 0 1px 0 rgb(255 173 185 / 10%); }
.role-friends { --role-light: 196 170 215; color: #dcc4ea; }
.role-creator { --role-light: 96 179 238; color: #a9d9ff; }
.badge::before { content: ''; position: absolute; z-index: -1; inset: -50% -70%; background: linear-gradient(110deg, transparent 35%, rgb(var(--role-light) / 25%) 50%, transparent 65%); transform: translateX(-60%); animation: badge-flow 14s linear infinite; animation-play-state: paused; pointer-events: none; }
.badges-wrap.motion-visible .badge::before { animation-play-state: running; }
[data-sky-visibility='hidden'] .badges-wrap .badge::before { animation-play-state: paused; }
@keyframes badge-flow { 0%, 20% { transform: translateX(-60%); } 65%, 100% { transform: translateX(60%); } }
.account-settings { margin-top: 44px; }
.account-settings h2 { margin: 0 0 16px; font-size: 18px; font-weight: 600; }
.setting-row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.setting-row:last-child { border-bottom: 1px solid var(--rule); }
.setting-action { display: inline-flex; align-items: center; justify-content: flex-end; gap: 14px; flex: none; min-height: 44px; border: 0; padding: 0 4px 0 0; background: transparent; color: var(--accent); font-size: 14px; }
.setting-action img { filter: brightness(0) invert(0.8); transition: transform 200ms ease-out; }
.setting-action:focus-visible img, .setting-action:active img { transform: translateX(4px); }
:is(.nav-actions .home-link, .nav-actions .link-text, .profile-workspace .link-text, .setting-action, .modal .link-text, .modal .btn-primary, .modal .btn-secondary) {
  position: relative; isolation: isolate; overflow: hidden; min-height: 44px; padding: 9px 16px; border: 1px solid rgb(181 203 214 / 15%); border-radius: 999px;
  background: rgb(166 189 200 / 5%);
  color: var(--text); font-weight: 600; box-shadow: none; text-decoration: none;
  transition: border-color 260ms ease-out, background-color 260ms ease-out, box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease-out;
}
:is(.nav-actions a, .nav-actions button, .profile-workspace button, .modal button)::before {
  content: ''; position: absolute; z-index: -1; inset: -80% -60%; background: linear-gradient(110deg, transparent 42%, rgb(219 238 245 / 5%) 50%, transparent 58%);
  transform: translateX(-60%); transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none;
}
:is(.nav-actions a, .nav-actions button, .profile-workspace button, .modal button):not(:disabled):is(:focus-visible, :active)::before { transform: translateX(60%); }
:is(.nav-actions a, .nav-actions button, .profile-workspace button, .modal button):not(:disabled):focus-visible { outline: 1px solid rgb(226 235 239 / 65%); outline-offset: 3px; border-color: rgb(226 235 239 / 40%); box-shadow: 0 0 16px rgb(226 235 239 / 12%), 0 0 30px rgb(226 235 239 / 6%); }
.setting-action { justify-content: center; color: #b9e0f1; }
.avatar-wrap .link-text { padding: 8px 4px; margin-top: 12px; }
.modal .btn-primary { background-color: rgb(119 163 184 / 10%); border-color: rgb(171 213 233 / 30%); }
.modal .btn-secondary { color: var(--muted); }
.modal button:disabled { opacity: 0.55; cursor: default; }
:is(.nav-actions button, .profile-workspace button, .modal button):disabled::before { display: none; }
.google-bound, .google-unlinked { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.google-bound { color: var(--success); }
.google-bound img { filter: brightness(0) saturate(100%) invert(85%) sepia(14%) saturate(700%) hue-rotate(93deg); }
.google-unlinked > span { color: var(--muted); }
.modal-back { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgb(4 7 9 / 82%); animation: modal-back-arrive 280ms ease-out; }
.modal { width: min(100%, 440px); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 28px; display: flex; flex-direction: column; gap: 20px; border: 1px solid var(--border); border-radius: 8px; background: #151a1d; box-shadow: 0 16px 48px rgb(0 0 0 / 30%), 0 0 32px rgb(183 214 226 / 5%); animation: modal-material 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.modal-back.is-closing { pointer-events: none; animation: modal-back-dismiss 180ms ease-in forwards; }
.modal-back.is-closing .modal { animation: modal-dismiss 160ms ease-in forwards; }
@keyframes modal-back-arrive { from { background: rgb(4 7 9 / 0%); } to { background: rgb(4 7 9 / 82%); } }
@keyframes modal-back-dismiss { from { background: rgb(4 7 9 / 82%); } to { background: rgb(4 7 9 / 0%); } }
@keyframes modal-material {
  from { opacity: 0; transform: scale(0.985); box-shadow: 0 8px 32px rgb(0 0 0 / 16%), 0 0 32px rgb(183 214 226 / 0%); }
  to { opacity: 1; transform: scale(1); box-shadow: 0 16px 48px rgb(0 0 0 / 30%), 0 0 32px rgb(183 214 226 / 5%); }
}
@keyframes modal-dismiss { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.992); } }
.modal h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.modal > .field-label, #forgotPwdPrompt { margin-bottom: -12px; }
.modal .link-text { text-align: left; align-self: flex-start; }
.password-auth-choice { display: flex; flex-direction: column; gap: 8px; }
.modal-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.form-message { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px; overflow-wrap: anywhere; }
.form-message.error { color: var(--danger); }
.form-message.success { color: var(--success); }
.profile-workspace > .form-message { margin: -12px 0 24px; }
.crop-modal { width: min(100%, 480px); }
.crop-container { position: relative; height: 300px; overflow: hidden; background: #090b0c; border-radius: 4px; touch-action: none; }
.crop-img { position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-width: none; max-height: none; transform: translate(-50%, -50%); transform-origin: center; pointer-events: none; }
.crop-overlay { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgb(0 0 0 / 70%); pointer-events: none; }
.crop-control { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.crop-control input { height: 32px; padding: 0; accent-color: var(--accent); background: transparent; box-shadow: none; }
.crop-control input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .setting-action:hover img { transform: translateX(4px); }
  :is(.nav-actions a, .nav-actions button, .profile-workspace button, .modal button):not(:disabled):hover::before { transform: translateX(60%); }
  :is(.nav-actions a, .nav-actions button, .profile-workspace button, .modal button):not(:disabled):hover { border-color: rgb(201 225 235 / 28%); background-color: rgb(166 189 200 / 9%); text-decoration: none; }
}
@media (max-width: 900px) {
  .account-header { padding-block: 20px 16px; gap: 16px; }
  .profile-workspace { margin: 48px auto 0; }
}
@media (max-width: 600px) {
  .account-header { flex-wrap: wrap; padding-block: 20px 16px; gap: 16px; }
  .nav-actions { width: 100%; gap: 8px; }
  .nav-actions #logoutBtn { margin-left: auto; }
  .nav-actions .home-link { width: 44px; padding: 12px; font-size: 0; gap: 0; justify-content: center; }
  .nav-actions .link-text { font-size: 12px; }
  .profile-identity { grid-template-columns: 72px minmax(0, 1fr); gap: 20px; }
  .avatar-wrap, #avatar { width: 72px; }
  #avatar { height: 72px; }
  #nickname { font-size: 22px; }
  .modal-back { padding: 16px; }
  .modal { padding: 24px; max-height: calc(100dvh - 32px); }
}
@media (max-width: 360px) {
  .nav-actions { gap: 10px; }
  .wordmark span { display: none; }
  .google-unlinked { flex-direction: column; align-items: flex-end; gap: 0; }
}