/* Navigation inspired by Uiverse.io / cf2-exe. */
body.has-account-dock {padding-bottom:112px;}
.account-dock {position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:5px;padding:7px;z-index:260;border:1px solid var(--border-bright);background:var(--surface);border-radius:20px;box-shadow:0 12px 40px #0004;max-width:calc(100vw - 24px);}
.account-dock a,.account-dock button {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:68px;min-height:58px;padding:8px 10px;background:transparent;border:1px solid transparent;border-radius:13px;color:var(--text-dim);font:inherit;font-size:10px;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;}
.account-dock svg {width:23px;height:23px;fill:currentColor;transition:transform .2s;}
.account-dock [aria-current="page"],.account-dock a:hover,.account-dock button:hover {color:var(--text);background:var(--surface3);border-color:var(--border-bright);box-shadow:0 3px 8px #0002;}
.account-dock a:hover svg,.account-dock button:hover svg {transform:scale(1.12);}
.account-dock :focus-visible,.custum-file-upload:focus-visible,.profile-text-button:focus-visible {outline:2px solid var(--accent2);outline-offset:3px;}
.account-avatar {width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.account-help {margin:auto;width:min(440px,calc(100vw - 32px));background:var(--surface);color:var(--text);border:1px solid var(--border-bright);border-radius:20px;padding:25px;line-height:1.9;}
.account-help::backdrop {background:#0009;backdrop-filter:blur(5px);}
.account-help h2,.account-help p {margin-bottom:15px;}
.profile-topbar {position:relative;max-width:1040px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:24px;gap:15px;}
.profile-topbar a {color:var(--text-dim);text-decoration:none;font-size:13px;}
.profile-main {position:relative;max-width:1040px;margin:16px auto 40px;padding:0 24px;}
.profile-heading {margin-bottom:25px;}
.profile-eyebrow {color:var(--accent2);font-size:12px;}
.profile-heading h1 {font-size:32px;margin:5px 0;}
.profile-heading p,.profile-section-description {color:var(--text-dim);font-size:13px;}
.profile-layout {display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;align-items:start;}
.profile-layout[hidden] {display:none;}
.profile-photo-card,.profile-details-card {background:var(--surface);border:1px solid var(--border-bright);border-radius:22px;padding:25px;}
.profile-photo-card {display:flex;flex-direction:column;align-items:center;text-align:center;gap:15px;}
.profile-photo-card h2 {font-size:17px;overflow-wrap:anywhere;max-width:100%;}
.profile-avatar-large {width:100px;height:100px;border-radius:50%;background:linear-gradient(145deg,#6f6f6f,#727272);display:grid;place-items:center;font-size:34px;font-weight:700;color:white;border:4px solid var(--surface3);overflow:hidden;}
.profile-verification {font-size:11px;color:var(--text-dim);}
/* Upload area inspired by Uiverse.io / csemszepp. */
.custum-file-upload {height:200px;width:100%;display:flex;flex-direction:column;gap:15px;cursor:pointer;align-items:center;justify-content:center;border:2px dashed #e8e8e8;background:#212121;padding:1.5rem;border-radius:10px;box-shadow:0 48px 35px -48px #e8e8e8;color:#e8e8e8;}
.custum-file-upload .icon {display:flex;justify-content:center;align-items:center;}
.custum-file-upload svg {height:60px;width:60px;fill:currentColor;}
.custum-file-upload .text {font-size:12px;}
.custum-file-upload small {font-size:10px;color:#bababa;}
.custum-file-upload input {display:none;}
.custum-file-upload.is-dragging {border-color:#919191;background:#2d2d2d;}
.profile-text-button {border:0;background:transparent;color:var(--text-dim);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;}
.profile-photo-note {font-size:11px;color:var(--text-dim);line-height:1.8;}
.profile-details-card h2 {font-size:20px;margin-bottom:6px;}
.profile-section-description {margin-bottom:24px;}
.profile-field-grid {display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.profile-details-card .form-group {margin-bottom:22px;}
.profile-account-info {display:grid;grid-template-columns:auto 1fr;gap:10px 15px;font-size:12px;padding:16px 0;border-top:1px solid var(--border-bright);margin-bottom:18px;}
.profile-account-info span {color:var(--text-dim);}.profile-account-info b {font-weight:500;overflow-wrap:anywhere;}
.profile-save-actions {display:flex;flex-wrap:wrap;gap:12px;}.profile-save-actions .btn {min-height:44px;}
#profileNotice:not(:empty) {padding:13px 16px;margin-bottom:20px;border-radius:12px;background:var(--surface3);font-size:13px;}
#profileNotice[data-error="true"] {color:#fb7185;}
html[data-theme="light"] .custum-file-upload {background:#f6f6f6;border-color:#797979;color:var(--text);box-shadow:0 48px 35px -48px #727272;}
html[data-theme="light"] .custum-file-upload small {color:var(--text);}
@media(max-width:900px) {body.has-account-dock .study-chat {bottom:calc(102px + env(safe-area-inset-bottom));}body.has-account-dock .study-chat-log {max-height:20dvh;}}
@media(max-width:700px) {.profile-layout {grid-template-columns:1fr;}.profile-main {padding:0 16px;margin-top:4px;}.profile-photo-card,.profile-details-card {padding:22px;}.custum-file-upload {max-width:300px;}.profile-topbar {padding:16px;}.account-dock {bottom:calc(10px + env(safe-area-inset-bottom));gap:1px;padding:5px;}.account-dock a,.account-dock button {min-width:58px;padding:8px 6px;}.profile-field-grid {grid-template-columns:1fr;gap:0;}}
/* Start cards only when the authenticated form and page fonts are ready. */
html:not(.fonts-pending) .profile-page .profile-heading {animation:profile-rise .5s cubic-bezier(.22,1,.36,1) both;}
html:not(.fonts-pending) .profile-page #profileForm:not([hidden]) .profile-photo-card {animation:profile-rise .5s .06s cubic-bezier(.22,1,.36,1) both;}
html:not(.fonts-pending) .profile-page #profileForm:not([hidden]) .profile-details-card {animation:profile-rise .5s .14s cubic-bezier(.22,1,.36,1) both;}
@keyframes profile-rise {from {opacity:0;transform:translateY(12px);} to {opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce) {
  .account-dock a,.account-dock button,.account-dock svg {transition:none;}
  html .profile-page :is(.profile-heading,#profileForm:not([hidden]) .profile-photo-card,#profileForm:not([hidden]) .profile-details-card) {animation:none!important;}
}

/* Vertical rail matches Uiverse.io / 3bdel3ziz-T; horizontal on phones. */
.account-dock {background:#fff;border-color:#404040;box-shadow:0 12px 30px #0003;}
.account-dock a,.account-dock button {color:var(--text);position:relative;}
.account-dock [aria-current="page"],.account-dock [data-active="true"],.account-dock a:hover,.account-dock button:hover {color:var(--text);background:#f5f5f5;border-color:#0000001a;box-shadow:0 4px 10px #0002;}
.account-dock [data-active="true"] svg {transform:scale(1.2);}
.account-dock:has([data-active="true"]:not([aria-current])) [aria-current="page"]:not([data-active="true"]) {color:var(--text);background:transparent;border-color:transparent;box-shadow:none;}
@media(min-width:901px) {
  body.has-account-dock {padding-left:96px;padding-bottom:32px;}
  .account-dock {left:20px;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;width:64px;max-width:none;gap:0;padding:0;border-radius:16px;}
  .account-dock a,.account-dock button {min-width:0;width:62px;height:64px;padding:16px;border-radius:12px;}
  .account-dock a span,.account-dock button span {position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);background:#181818;color:#fff;border-radius:8px;padding:6px 11px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;}
  .account-dock a:hover span,.account-dock button:hover span,.account-dock :focus-visible span {opacity:1;visibility:visible;}
  .account-dock svg {flex-shrink:0;width:24px;height:24px;}
}