/* Profile editor uses the dashboard's native sidebar, header and panel surfaces. */
.profile-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:2px 0 18px}.profile-heading h2{font-size:24px;letter-spacing:-.02em;font-weight:600;margin:6px 0}.profile-heading p,.panel-heading p,.avatar-control p{font-size:12px;color:#999;line-height:1.5;margin:0}.profile-view{font-size:12px;color:#ccc;white-space:nowrap}.profile-view:hover{color:white}.profile-demo-note{font-size:11px;line-height:1.6;color:#aaa;background:#1b1b1b;border:1px solid #303030;border-radius:8px;padding:10px 13px;margin-bottom:14px}.profile-form{display:grid;gap:10px;max-width:820px}.profile-panel{display:block!important;padding:20px!important}.panel-heading{margin-bottom:19px}.panel-heading h3{font-size:13px;font-weight:600;color:#eee;margin:0 0 5px}.profile-panel label:not(.profile-button){display:block;font-size:12px;color:#ccc;font-weight:500}.profile-panel input:not([type=color]):not([type=file]),.profile-panel textarea{display:block;width:100%;box-sizing:border-box;background:#101010;border:1px solid #383838;border-radius:7px;color:#eee;font:inherit;font-size:13px;padding:10px 11px;margin-top:7px;min-height:40px}.profile-panel textarea{resize:vertical}.profile-panel input:focus,.profile-panel textarea:focus{outline:2px solid #999;outline-offset:2px}.profile-panel small{display:block;color:#888;font-size:11px;font-weight:400;margin-top:7px;line-height:1.5}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}.avatar-control{display:flex;align-items:center;gap:16px;margin-bottom:22px}.avatar-control strong,.image-control strong{font-size:12px;color:#ddd;font-weight:600}.avatar-control p{margin:4px 0 10px}.editor-avatar{width:66px;height:66px;border-radius:50%;background:#252525 center/cover;display:grid;place-items:center;flex-shrink:0;color:#888}.editor-avatar svg{width:30px;height:30px}.editor-avatar.has-image svg,.image-preview.has-image span{display:none}.profile-button{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;padding:8px 12px;min-height:34px;border:1px solid #424242;background:#242424;color:#ddd;font:inherit;font-size:11px;font-weight:600;cursor:pointer}.profile-button:hover{background:#303030}.profile-button.primary{background:#ededed;border-color:#ededed;color:#111}.profile-button.primary:hover{background:#ccc}.profile-text-button{background:none;border:0;color:#aaa;font:inherit;font-size:11px;padding:8px;cursor:pointer}.profile-text-button:hover{color:#fff}.paint-grid{display:flex;gap:35px;margin-bottom:20px}.paint-grid input{display:block;width:52px;height:34px;background:#181818;border:1px solid #3b3b3b;border-radius:6px;margin-top:8px;padding:3px;cursor:pointer}.image-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}.image-preview{height:85px;background:#101010 center/cover;border:1px dashed #3a3a3a;border-radius:8px;display:grid;place-items:center;color:#777;font-size:11px;margin:9px 0}.image-preview.has-image{border-style:solid}.profile-link-row{display:grid;grid-template-columns:1fr 2fr auto;align-items:center;gap:8px;margin-bottom:9px}.profile-link-row input{margin:0!important}.profile-save{display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:8px 0 24px}.profile-save span{font-size:11px;color:#aaa}.profile-form :focus-visible,.profile-view:focus-visible{outline:2px solid #ccc;outline-offset:3px}@media(max-width:650px){.profile-heading{align-items:flex-start}.field-grid{grid-template-columns:1fr}.profile-link-row{grid-template-columns:1fr 1.5fr auto}.profile-panel{padding:16px!important}}@media(max-width:420px){.profile-link-row{grid-template-columns:1fr}.image-grid{grid-template-columns:1fr}.profile-heading h2{font-size:21px}.mobile-segmented-nav{overflow-x:auto}.mobile-nav-btn{flex-shrink:0}}
/* Two comfortable columns on desktop; keep the editor readable on smaller screens. */
.profile-form{max-width:1100px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.profile-form>.profile-panel:nth-of-type(3),.profile-save{grid-column:1/-1}.profile-panel{min-width:0}.profile-link-row select{width:100%;min-width:0;min-height:40px;box-sizing:border-box;background:#101010;border:1px solid #383838;border-radius:7px;color:#eee;font:inherit;font-size:12px;padding:9px}.profile-link-row select:focus-visible{outline:2px solid #999;outline-offset:2px}.profile-link-row{grid-template-columns:minmax(115px,1fr) minmax(0,2fr) auto}@media(max-width:1050px){.profile-form{grid-template-columns:1fr}.profile-form>.profile-panel:nth-of-type(3),.profile-save{grid-column:auto}}@media(max-width:420px){.profile-link-row{grid-template-columns:1fr}}
/* The editor and its live profile share the workspace on wide screens. */
body:has(#paneProfile.active) .dash-content{max-width:1600px;margin-left:0;margin-right:0}.profile-heading{margin:0 0 4px}.profile-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,410px);align-items:start;gap:20px}.profile-form{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}.profile-preview{position:sticky;top:72px;min-width:0}.profile-preview-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}.profile-preview-heading h3{margin:0;font-size:13px;color:#ddd;font-weight:600}.profile-preview-heading span{font-size:11px;color:#888}.profile-preview iframe{display:block;width:100%;height:660px;border:1px solid #282828;border-radius:10px;background:#0b0b0b}.profile-workspace .field-grid{grid-template-columns:1fr}.profile-workspace .image-grid{grid-template-columns:1fr}.profile-workspace .profile-link-row{grid-template-columns:minmax(105px,1fr) minmax(0,2fr) auto}@media(max-width:1150px){.profile-workspace{grid-template-columns:minmax(0,1fr) minmax(280px,360px)}.profile-workspace .profile-form{grid-template-columns:1fr}.profile-workspace .profile-form>.profile-panel:nth-of-type(3),.profile-workspace .profile-save{grid-column:auto}.profile-workspace .field-grid,.profile-workspace .image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:900px){.profile-workspace{grid-template-columns:minmax(0,1fr)}.profile-preview{position:static}.profile-preview iframe{height:600px}.profile-workspace .profile-form{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-workspace .profile-form>.profile-panel:nth-of-type(3),.profile-workspace .profile-save{grid-column:1/-1}.profile-workspace .field-grid,.profile-workspace .image-grid{grid-template-columns:1fr}}@media(max-width:650px){.profile-workspace .profile-form{grid-template-columns:1fr}.profile-workspace .profile-form>.profile-panel:nth-of-type(3),.profile-workspace .profile-save{grid-column:auto}.profile-workspace .field-grid,.profile-workspace .image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.profile-workspace .field-grid,.profile-workspace .image-grid,.profile-workspace .profile-link-row{grid-template-columns:1fr}}
/* Compact profile workspace. */
.profile-symbols{position:absolute;width:0;height:0;overflow:hidden}.profile-form{grid-template-areas:'details links' 'appearance appearance' 'save save';grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}.profile-details-panel{grid-area:details}.profile-links-panel{grid-area:links}.profile-appearance-panel{grid-area:appearance}.profile-form .profile-save{grid-area:save;grid-column:auto;padding:2px 0 12px}.profile-panel{padding:16px!important}.profile-panel .panel-heading{margin-bottom:14px}.profile-panel .field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.profile-panel .avatar-control{margin-bottom:14px}.profile-panel .editor-avatar{width:54px;height:54px}.profile-panel textarea{min-height:64px;max-height:100px}.profile-panel input:not([type=color]):not([type=file]),.profile-panel textarea{min-height:37px;padding:8px 10px}.profile-panel .image-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:6px}.profile-panel .image-preview{height:55px;margin:7px 0}.profile-panel small{margin-top:5px}.profile-links-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.profile-links-heading .add-link{flex-shrink:0}.profile-link-list{display:flex;flex-wrap:wrap;gap:7px}.profile-link-chip,.badge-choice{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:7px 9px;background:#1d1d1d;border:1px solid #363636;border-radius:7px;color:#c9c9c9;font:inherit;font-size:11px;cursor:pointer}.profile-link-chip:hover,.badge-choice:hover{border-color:#777;color:#fff}.profile-link-chip svg,.badge-choice svg,.service-choice svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.profile-empty{color:#777;font-size:11px;margin:4px 0 0}.profile-empty[hidden]{display:none}.badge-picker{border-top:1px solid #303030;margin-top:16px;padding-top:14px}.badge-picker h3{color:#eee;font-size:13px;font-weight:600;margin:0 0 5px}.badge-picker p{font-size:12px;color:#999;margin:0 0 12px;line-height:1.5}.badge-options{display:flex;flex-wrap:wrap;gap:7px}.badge-choice[aria-pressed=true]{color:#eee;background:#303030;border-color:#888}.profile-preview iframe{height:clamp(520px,calc(100dvh - 200px),600px)}.link-dialog{width:min(410px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:20px;background:#181818;color:#eee;border:1px solid #3c3c3c;border-radius:12px;box-sizing:border-box}.link-dialog::backdrop{background:#000b}.link-dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.link-dialog h2{margin:0;font-size:17px;font-weight:600}.link-dialog-heading p{margin:6px 0 0;font-size:12px;color:#999;line-height:1.5}.link-dialog-close{background:none;border:0;color:#aaa;font-size:23px;line-height:1;cursor:pointer;padding:0 4px}.link-dialog-close:hover{color:#fff}.link-services{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0}.service-choice{display:grid;place-items:center;width:40px;height:40px;background:#202020;border:1px solid #3a3a3a;border-radius:8px;color:#aaa;cursor:pointer}.service-choice:hover,.service-choice[aria-pressed=true]{border-color:#aaa;background:#333;color:#fff}.link-dialog label{display:block;font-size:12px;color:#ccc}.link-dialog input{width:100%;box-sizing:border-box;margin-top:8px;min-height:40px;padding:9px 10px;background:#101010;border:1px solid #555;border-radius:7px;color:#eee;font:inherit;font-size:13px}.link-error{min-height:16px;margin:6px 0;color:#f0a8a8;font-size:11px}.link-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}.link-dialog-actions #removeLink{margin-right:auto}.link-dialog-actions [hidden]{display:none}.link-dialog :focus-visible,.badge-choice:focus-visible,.profile-link-chip:focus-visible{outline:2px solid #ddd;outline-offset:3px}@media(max-width:1150px){.profile-workspace .profile-form{grid-template-columns:1fr;grid-template-areas:'details' 'links' 'appearance' 'save'}.profile-workspace .profile-form>.profile-panel,.profile-workspace .profile-form>.profile-save{grid-column:auto}}@media(max-width:900px){.profile-workspace .profile-form{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'details links' 'appearance appearance' 'save save'}.profile-workspace .profile-preview{position:static}}@media(max-width:650px){.profile-workspace .profile-form{grid-template-columns:1fr;grid-template-areas:'details' 'links' 'appearance' 'save'}.profile-panel .field-grid,.profile-panel .image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-preview iframe{height:570px}}@media(max-width:420px){.profile-panel .field-grid,.profile-panel .image-grid{grid-template-columns:1fr}.link-dialog-actions{flex-wrap:wrap}}
#paneProfile .profile-workspace .profile-form>.profile-details-panel{grid-area:details}#paneProfile .profile-workspace .profile-form>.profile-links-panel{grid-area:links}#paneProfile .profile-workspace .profile-form>.profile-appearance-panel{grid-area:appearance}#paneProfile .profile-workspace .profile-form>.profile-save{grid-area:save}
/* Balanced image previews, with compact links across the bottom. */
.profile-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px}.profile-heading-actions #message{color:#aaa;font-size:11px}.profile-heading-actions .profile-button{white-space:nowrap}.profile-workspace .profile-form{grid-template-areas:'details appearance' 'links links';grid-template-columns:repeat(2,minmax(0,1fr))}.profile-panel .image-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}.profile-panel .image-preview{height:clamp(130px,17vh,175px)}.link-dialog{width:min(480px,calc(100% - 32px))}.link-services{flex-wrap:wrap}@media(max-width:1150px){.profile-workspace .profile-form{grid-template-columns:1fr;grid-template-areas:'details' 'appearance' 'links'}}@media(max-width:900px){.profile-workspace .profile-form{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'details appearance' 'links links'}}@media(max-width:650px){.profile-workspace .profile-form{grid-template-columns:1fr;grid-template-areas:'details' 'appearance' 'links'}.profile-heading{flex-wrap:wrap}.profile-heading-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}}@media(max-width:420px){.profile-panel .image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-panel .image-preview{height:115px}}
.profile-preview-card{display:block;width:100%;border:1px solid #282828;border-radius:10px;background:#0b0b0b;overflow:hidden}
@media(min-width:1151px){.profile-workspace{grid-template-columns:minmax(0,1fr) minmax(360px,480px)}}@media(min-width:901px) and (max-width:1150px){.profile-workspace{grid-template-columns:minmax(0,1fr) minmax(300px,400px)}}
/* Profile settings and appearance stack beside the preview. */
.profile-toolbar{display:flex;justify-content:flex-end;max-width:1220px}.profile-workspace{grid-template-columns:minmax(0,720px) minmax(360px,480px)}#paneProfile .profile-workspace .profile-form{grid-template-columns:1fr;grid-template-areas:'details' 'appearance';gap:10px}#paneProfile .profile-workspace .profile-form>.profile-details-panel{grid-area:details}#paneProfile .profile-workspace .profile-form>.profile-appearance-panel{grid-area:appearance}.profile-details-panel .panel-heading{align-items:flex-start}.profile-details-panel .panel-heading button{white-space:nowrap}.link-dialog{width:min(480px,calc(100% - 32px))}.manage-section{margin-top:18px}.manage-section h3{font-size:12px;font-weight:600;color:#e3e3e3;margin:0 0 9px}.manage-section>p{font-size:11px;line-height:1.5;color:#999;margin:0 0 10px}.manage-section .profile-link-list{margin-bottom:8px}.link-entry{padding-top:15px;margin-top:14px;border-top:1px solid #303030}.link-entry .link-services{margin:10px 0 14px}.link-entry-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.link-entry-actions #removeLink{margin-right:auto}.link-entry-actions [hidden]{display:none}.manage-badges{border-top:1px solid #303030;padding-top:15px}.link-dialog-actions{padding-top:15px;border-top:1px solid #303030}.profile-form .image-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}@media(max-width:1150px){.profile-workspace{grid-template-columns:minmax(0,1fr) minmax(300px,400px)}}@media(max-width:900px){.profile-workspace{grid-template-columns:minmax(0,1fr)}.profile-preview{position:static}}@media(max-width:420px){.profile-details-panel .panel-heading{flex-wrap:wrap}.profile-form .image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.profile-appearance-panel .image-grid{grid-template-columns:minmax(0,1fr) minmax(145px,185px)}@media(max-width:420px){.profile-appearance-panel .image-grid{grid-template-columns:minmax(0,1fr) minmax(110px,135px)}}
/* Use the full remaining workspace to show the selected background. */
.profile-toolbar{max-width:none}@media(min-width:1151px){.profile-workspace{grid-template-columns:minmax(0,720px) minmax(0,1fr)}}
@media(min-width:1151px){.profile-workspace{grid-template-columns:minmax(0,min(720px,55%)) minmax(360px,1fr)}}
/* Match the preview height to the stacked editor panels. */
@media(min-width:901px){.profile-workspace{align-items:stretch}.profile-preview{display:flex;flex-direction:column;position:relative;top:auto}.profile-preview-card{flex:1;min-height:0}}@media(max-width:900px){.profile-preview-card{min-height:570px}}
/* Keep the picture beside the stacked name fields. */
#paneProfile .profile-identity{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:20px;margin-bottom:14px}#paneProfile .profile-identity .avatar-control{margin:0}#paneProfile .profile-identity .field-grid{grid-template-columns:1fr;gap:12px;margin:0}@media(max-width:600px){#paneProfile .profile-identity{grid-template-columns:1fr;gap:16px}}
/* Keep the username guidance alongside its label without crowding the input. */
#paneProfile .profile-identity .field-heading{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}#paneProfile .profile-identity .field-heading small{display:inline;margin:0 0 0 auto;color:#999;font-size:10px;line-height:1.4;text-align:right}#paneProfile .profile-identity .field-grid{gap:10px}
.profile-notice{display:flex;align-items:center;gap:16px;max-width:720px;padding:22px!important}.profile-notice-icon{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid #343434;border-radius:14px;background:#1b1b1b;color:#b7b7b7}.profile-notice-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.profile-notice h2{margin:0 0 5px;font-size:15px;font-weight:600;color:#e3e3e3}.profile-notice p{margin:0;font-size:12px;line-height:1.6;color:#999}.profile-notice-icon .profile-loading-outline{display:none;position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#aaa;stroke-width:1;pointer-events:none}.profile-notice[data-state="loading"] .profile-loading-outline{display:block}.profile-loading-outline rect{stroke-dasharray:22 78;stroke-linecap:round;animation:notice-outline-trace 1.4s linear infinite}@keyframes notice-outline-trace{to{stroke-dashoffset:-100}}@media(prefers-reduced-motion:reduce){.profile-loading-outline rect{animation:none}}
/* Give the bio and image previews consistent, comfortable dimensions. */
#paneProfile .profile-details-panel textarea{height:112px;min-height:112px;max-height:112px;resize:none;overflow-y:auto}#paneProfile .profile-appearance-panel .panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}#paneProfile .profile-appearance-panel .appearance-help{margin:0;color:#999;font-size:11px;line-height:1.5;text-align:right}#paneProfile .profile-appearance-panel .image-preview{height:clamp(165px,20vh,205px)}

#paneProfile .profile-workspace .profile-form{grid-template-areas:'details'}

/* Center the loading and disabled states in the profile workspace. */
#paneProfile.active:has(> .profile-notice:not([hidden])){min-height:max(280px,calc(100dvh - 120px));align-items:center;justify-content:center}
#paneProfile .profile-notice{width:min(100%,460px);max-width:460px;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:36px 28px!important}
#paneProfile .profile-notice p{max-width:350px}