.account-profile-button{display:flex;align-items:center;gap:9px;min-width:0;border:0;padding:0;background:transparent;color:inherit;text-align:left}
.account-profile-button img{width:28px;height:28px;object-fit:cover;border-radius:50%;flex-shrink:0}
.account-profile-button:hover .account-name{color:var(--blue)}
.profile-layout{display:grid;grid-template-columns:194px minmax(0,738px);gap:28px;max-width:var(--site-shell-width);margin:0 auto;padding:34px 32px 60px;align-items:start;min-height:calc(100dvh - 160px)}
.profile-content{min-width:0}
.profile-heading{margin-bottom:36px}
.profile-heading>p:last-child{font-size:13px;line-height:1.7;color:var(--muted);margin:12px 0 0}
.profile-loading{font-size:13px;color:var(--muted);padding:30px 0}
#profile-guest h2{font-size:22px;margin:0 0 12px}
#profile-guest p{font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 24px}
.profile-eyebrow{margin:0 0 8px;font-size:9px;letter-spacing:1.5px;color:var(--accent-text);font-weight:600}
#profile-title{margin:0;font-size:34px;letter-spacing:-.8px}
.profile-layout>.left-sidebar>.profile-section-nav{margin-top:0;padding-top:0;border-top:0}
.profile-section-nav{display:flex;flex-direction:column;align-items:stretch;gap:7px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.profile-section-nav a,.profile-section-nav .logout-button{display:block;text-align:left;padding:10px 0 10px 13px;border:0;border-left:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-size:12px;line-height:1.5}
.profile-section-nav a:hover,.profile-section-nav .logout-button:hover{color:var(--ink)}
.profile-section-nav a[aria-current=page]{color:var(--accent-text);border-left-color:var(--orange);font-weight:600}
.profile-section-nav .logout-button{margin-top:7px;padding-top:16px;border-top:1px solid var(--line)}
.profile-section-nav .logout-button:disabled{opacity:.5;cursor:wait}
.profile-section{display:grid;grid-template-columns:162px minmax(0,1fr);gap:32px;padding:30px 0;border-top:1px solid var(--line);scroll-margin-top:110px}
.profile-section:first-child{padding-top:0;border-top:0}
.profile-section-intro h2{font-size:14px;font-weight:650;margin:0 0 8px;line-height:1.5}
.profile-section-intro p{font-size:11px;color:var(--subtle);line-height:1.7;margin:0}
.profile-section-body{min-width:0}
.profile-photo{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.profile-photo>img{width:72px;height:72px;object-fit:cover;border-radius:50%;flex-shrink:0}
.profile-photo h3{font-size:13px;font-weight:600;margin:0}
.profile-avatar-heading{display:flex;align-items:center;flex-wrap:wrap;gap:5px 9px;min-height:19px;margin-bottom:8px}
.avatar-save-status{display:inline-flex;align-items:center;gap:4px;font-size:10px;line-height:1.5;color:var(--subtle);opacity:1;transform:translateY(0);transition:opacity .22s ease,transform .22s ease}
.avatar-save-status:is([data-state=saved],[data-state=hiding]){color:var(--blue)}
.avatar-save-status[data-state=hiding]{opacity:0;transform:translateY(-3px)}
.avatar-save-status[data-state=error]{color:var(--accent-text)}
.avatar-status-check{font-size:13px;font-weight:700;line-height:1}
.profile-photo p{font-size:11px;color:var(--subtle);margin:0;line-height:1.6}
.avatar-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));justify-items:start;gap:8px;max-width:390px}
.avatar-options button{width:100%;max-width:54px;padding:3px;border:2px solid transparent;border-radius:50%;background:transparent;transition:border-color .15s}
.avatar-options button img{width:100%;height:auto;aspect-ratio:1;display:block;border-radius:50%}
.avatar-options button:hover{border-color:var(--line)}
.avatar-options button[aria-pressed=true]{border-color:var(--orange)}
#profile-settings form{display:flex;flex-direction:column;gap:16px}
#profile-name-form{margin-top:24px}
.profile-inline-controls{display:flex;align-items:flex-end;gap:12px}
.profile-inline-controls>label{flex:1;min-width:0}
.profile-inline-controls .profile-primary{align-self:flex-end;min-height:46px}
#profile-settings label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted)}
#profile-settings input{width:100%;min-height:46px;padding:13px 14px;font-size:14px;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:12px}
#profile-settings input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.profile-hint{margin:-6px 0 0;font-size:11px;line-height:1.7;color:var(--subtle)}
.profile-primary{align-self:flex-start;border:0;border-radius:12px;padding:13px 18px;background:var(--orange);color:#24170e;font-size:12px;font-weight:650;white-space:nowrap}
#profile-settings button:disabled{opacity:.5;cursor:wait}
.profile-feedback{font-size:12px;line-height:1.7;color:var(--accent-text);margin:0;overflow-wrap:anywhere}
.profile-feedback:empty{display:none}
.profile-current-email{margin:0 0 12px;font-size:14px;overflow-wrap:anywhere;line-height:1.5}
.profile-pending{padding:0 0 16px}
.profile-pending p{font-size:12px;line-height:1.7;margin:0 0 8px;overflow-wrap:anywhere;color:var(--accent-text)}
.profile-cancel-email{padding:0;border:0;background:transparent;color:var(--blue);font-size:12px;text-align:left}
.profile-password-note{font-size:12px;color:var(--muted);line-height:1.7;margin:0 0 12px}
.profile-edit{scroll-margin-top:110px}
.profile-edit summary{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--blue);list-style:none;cursor:pointer;user-select:none}
.profile-edit summary::-webkit-details-marker{display:none}
.profile-edit summary svg{width:14px;height:14px;transform:rotate(90deg)}
.profile-edit[open] summary svg{transform:rotate(-90deg)}
.profile-edit[open] summary{margin-bottom:22px}
.profile-theme-section h2{font-size:19px;margin:0 0 10px;letter-spacing:-.3px}
.profile-theme-section>p:not(.profile-feedback){font-size:12px;color:var(--muted);line-height:1.8;margin:0 0 26px;max-width:460px}
.profile-theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
.theme-choice-card{position:relative;min-width:0;padding:12px;border:1px solid var(--line);border-radius:18px;background:transparent;color:var(--ink);text-align:left}
.theme-choice-card[aria-pressed=true]{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.theme-choice-card:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.theme-choice-copy{display:block;padding:16px 0 3px}
.theme-choice-copy strong{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600}
.theme-choice-copy svg{width:15px;height:15px;color:var(--muted)}
.theme-choice-copy>span{display:block;min-height:36px;font-size:10px;color:var(--subtle);line-height:1.7;margin-top:9px;padding-right:17px}
.theme-choice-check{position:absolute;right:12px;bottom:14px;display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--line);border-radius:50%;font-size:11px;color:transparent}
.theme-choice-card[aria-pressed=true] .theme-choice-check{color:#24170e;background:var(--orange);border-color:var(--orange)}
.theme-preview{--preview-bg:#f4f6fa;--preview-paper:#fff;--preview-line:#d9dfeb;display:block;position:relative;aspect-ratio:1.5;border:1px solid #50627a33;border-radius:9px;overflow:hidden;background:var(--preview-bg)}
.preview-dark{--preview-bg:#0c1321;--preview-paper:#1b2940;--preview-line:#33445e}
.preview-system{--preview-bg:linear-gradient(90deg,#f4f6fa 50%,#0c1321 50%);--preview-paper:linear-gradient(90deg,#fff 50%,#1b2940 50%);--preview-line:#778ba5}
.preview-top{display:block;height:17px;background:#101b2e;position:relative}
.preview-top::before{content:"";position:absolute;left:8px;top:7px;width:24px;height:4px;border-radius:2px;background:#ff7c27}
.preview-sidebar{position:absolute;left:8px;top:26px;bottom:10px;width:21%;border-radius:4px;background:var(--preview-paper)}
.preview-content{position:absolute;left:31%;right:8px;top:26px;bottom:10px;padding:11px 8px;border-radius:4px;background:var(--preview-paper)}
.preview-content i{display:block;height:4px;border-radius:2px;margin-bottom:7px;background:var(--preview-line)}
.preview-content i:first-child{width:75%}.preview-content i:last-child{width:52%}
img.comment-avatar{object-fit:cover;border-radius:50%}
@media(max-width:1200px){.profile-layout{grid-template-columns:165px minmax(0,1fr);gap:20px;padding-inline:24px}}
@media(min-width:701px) and (max-width:1020px){.profile-layout{max-width:922px;grid-template-columns:160px minmax(0,1fr);gap:24px}.profile-section{grid-template-columns:140px minmax(0,1fr);gap:24px}}
@media(max-width:860px){.profile-section{grid-template-columns:1fr;gap:20px}.profile-section-intro p{max-width:none}}
@media(max-width:700px){
  .mobile-nav .mobile-account-menu{display:block;padding:10px 0 0}
  .mobile-account-row{display:flex;align-items:center;gap:14px;justify-content:space-between}
  .mobile-nav .mobile-account-row .account-profile-button{display:flex;flex:1;min-width:0;gap:11px;padding:0;color:var(--ink)}
  .mobile-account-row .account-profile-button img{width:32px;height:32px}
  .mobile-account-row .account-name{display:block;max-width:none;min-width:0;font-size:14px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
  .profile-layout{display:block;padding:26px 18px 40px}
  .profile-heading{margin-bottom:28px}
  .mobile-nav .profile-section-nav{gap:0;margin:0;padding:0;border:0}
  .mobile-nav .profile-section-nav a,.mobile-nav .profile-section-nav .logout-button{font-size:13px;padding-block:12px}
  #profile-title{font-size:29px}
  .profile-section{padding-block:26px}
  .avatar-options{gap:6px}
  #profile-settings input{font-size:16px}
  .profile-theme-options{grid-template-columns:1fr;gap:12px}
  .theme-choice-card{display:grid;grid-template-columns:90px minmax(0,1fr) 20px;align-items:center;gap:16px;padding:14px}
  .theme-choice-copy{padding:0}
  .theme-choice-copy>span{min-height:0;margin-top:7px;padding:0}
  .theme-choice-check{position:static}
}
@media(max-width:420px){.profile-inline-controls{flex-direction:column;align-items:stretch}.profile-inline-controls .profile-primary{align-self:stretch}.theme-choice-card{grid-template-columns:76px minmax(0,1fr) 18px;gap:12px}}
@media(prefers-reduced-motion:reduce){.avatar-options button{transition:none}}

.profile-inline-controls:has(.name-save-button){flex-direction:row;align-items:flex-end}
#profile-settings .name-save-button{--name-action-width:114px;position:relative;flex:0 0 auto;align-self:flex-end;width:var(--name-action-width);height:46px;min-width:0;padding:0;overflow:hidden;transition:width .25s cubic-bezier(.2,.8,.2,1),border-radius .25s,background .2s,opacity .2s,transform .2s;animation:name-button-appear .2s ease-out}
#profile-settings .name-save-button:disabled{opacity:1;background:var(--soft);color:var(--subtle);box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed}
#profile-settings .name-save-button[data-state=checking]{cursor:progress}
.name-save-label{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .15s,transform .2s}
.name-save-spinner{position:absolute;inset:0;margin:auto;width:17px;height:17px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;opacity:0}
.name-save-check{position:absolute;inset:0;margin:auto;width:23px;height:23px;opacity:0;transform:scale(.65);transition:opacity .15s,transform .25s cubic-bezier(.2,1.5,.5,1)}
.name-save-check path{stroke-dasharray:28;stroke-dashoffset:28}
#profile-settings .name-save-button:is([data-state=saving],[data-state=saved],[data-state=hiding]){box-shadow:none;cursor:default}
#profile-settings .name-save-button[data-state=saving]{background:var(--orange);color:#24170e;cursor:wait}
.name-save-button:is([data-state=saving],[data-state=saved],[data-state=hiding]) .name-save-label{opacity:0;transform:translateY(-8px) scale(.8)}
.name-save-button[data-state=saving] .name-save-spinner{opacity:1;animation:name-spinner .7s linear infinite}
#profile-settings .name-save-button:is([data-state=saved],[data-state=hiding]){width:46px;border-radius:50%;background:var(--blue);color:#fff}
#profile-settings .name-save-button[data-state=saved]{animation:name-button-complete .3s ease-out}
.name-save-button:is([data-state=saved],[data-state=hiding]) .name-save-check{opacity:1;transform:scale(1)}
.name-save-button[data-state=saved] .name-save-check path{stroke-dashoffset:0;animation:name-check-draw .24s .08s both}
.name-save-button[data-state=hiding] .name-save-check path{stroke-dashoffset:0}
#profile-settings .name-save-button[data-state=hiding]{width:0;margin-left:-12px;opacity:0;transform:scale(.65);animation:none}
#profile-name-form .name-feedback{font-size:11px;line-height:1.6}
#profile-name-form[data-name-state=available] .name-feedback{color:var(--blue)}
#profile-name-form:is([data-name-state=checking],[data-name-state=saving]) .name-feedback{color:var(--subtle)}
@keyframes name-button-appear{from{width:0;opacity:0;transform:scale(.8)}to{width:var(--name-action-width);opacity:1;transform:scale(1)}}
@keyframes name-button-complete{0%{transform:scale(.9)}65%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes name-spinner{to{transform:rotate(360deg)}}
@keyframes name-check-draw{from{stroke-dashoffset:28}to{stroke-dashoffset:0}}
@media(max-width:420px){#profile-settings .name-save-button{--name-action-width:104px}}
@media(prefers-reduced-motion:reduce){#profile-settings .name-save-button,.name-save-label,.name-save-check,.avatar-save-status{animation:none!important;transition:none!important}.name-save-button[data-state=saving] .name-save-spinner,.name-save-button[data-state=saved] .name-save-check path{animation:none}}
