﻿/* Personalisation is restricted to the customer's identity, never system surfaces. */
.profile-name-form{display:grid;gap:10px;margin:22px 0;padding-top:20px;border-top:1px solid var(--line)}
.profile-name-form label{font-size:13px;color:var(--muted)}.profile-name-form input{width:100%;padding:12px}.profile-name-form button{justify-self:start}.profile-name-form p{font-size:12px;line-height:1.8}
.appearance-card{margin-top:26px}.appearance-card>.card-heading>i{color:var(--muted)}
.profile-style-layout{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:26px 24px}
.profile-style-controls{min-width:0}.profile-color-field,.profile-style-toggles{border:0;padding:0;margin:0;min-width:0}
.profile-color-field legend,.profile-style-toggles legend{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:14px}
.profile-color-options{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.profile-color-dot{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;background:var(--swatch-color);border:3px solid #1b212e;border-radius:50%;font-size:0;outline:1px solid transparent;transition:outline-color .18s,transform .18s}
.profile-color-dot:hover{transform:translateY(-2px)}.profile-color-dot[aria-pressed=true]{outline-color:var(--swatch-color);box-shadow:inset 0 0 0 2px #1b212e}
.profile-color-dot:focus-visible{outline:2px solid #f1f5fc;outline-offset:3px}
.profile-custom-color{display:flex;align-items:center;gap:10px;width:fit-content;cursor:pointer;margin-bottom:26px}
.profile-custom-color>span{font-size:11px;color:var(--muted)}.profile-custom-color small{display:block;font:10px ui-monospace,Consolas,monospace;margin-top:3px;color:#8b9bb1}
body[data-page] .profile-custom-color input[type=color]{width:30px;height:32px;min-height:32px;padding:0;background:transparent;border:1px solid #4a566a;border-radius:7px;cursor:pointer;overflow:hidden}
.profile-custom-color input[type=color]::-webkit-color-swatch-wrapper{padding:3px}.profile-custom-color input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.profile-style-toggles{display:grid;gap:0}.profile-style-toggles label{display:flex;justify-content:space-between;gap:18px;align-items:center;border-top:1px solid var(--line);padding:14px 0;cursor:pointer}.profile-style-toggles label>span{font-size:12px;font-weight:500;color:var(--ink)}.profile-style-toggles small{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:4px}.profile-style-toggles input{width:17px;height:17px;flex-shrink:0;accent-color:#ff863f;cursor:pointer}
.profile-style-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border-left:1px solid var(--line);padding-left:32px;min-width:0}.profile-preview-caption{font-size:9px;letter-spacing:.14em;color:var(--muted);font-weight:600}
.profile-preview-card{position:relative;overflow:hidden;width:100%;max-width:350px;padding:28px 22px 22px;background:#151b27;border:1px solid #354155;border-radius:14px}.profile-preview-line{position:absolute;inset:0 0 auto;height:4px;background:#354155}
.profile-preview-identity{display:flex;align-items:center;gap:13px}.profile-preview-avatar{width:48px;height:48px;display:grid;place-items:center;flex-shrink:0;border-radius:14px;background:#293448;color:#b0bfd6;border:2px solid #3b495f}.profile-preview-identity strong{display:block;font-size:18px;color:#eef1f7;overflow-wrap:anywhere;line-height:1.4}.profile-preview-identity small{display:block;margin-top:5px;color:#9fadc2;font-size:10px}.profile-preview-card>p{font-size:11px;color:#9fadc2;line-height:1.8;margin:22px 0}.profile-preview-status{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;font-size:9px;color:#aebbd0;background:#202a3a;border-radius:5px}.profile-preview-status i{width:4px;height:4px;border-radius:50%;background:#90a0b6}.profile-style-preview>p{font-size:10px;color:var(--muted);line-height:1.8;text-align:center}
.profile-style-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 24px;border-top:1px solid var(--line)}.profile-style-footer>p{font-size:10px;color:var(--muted)}.profile-style-footer>div{display:flex;gap:12px}.profile-style-footer button{font-size:12px;min-height:40px}
#appearance-status{margin:0;padding:0 24px 18px;font-size:11px;color:var(--muted);line-height:1.8}#appearance-status:empty{display:none}
/* The only selectors that apply the chosen colour. */
html[data-profile-line] body[data-page=client] .profile-details{position:relative}
html[data-profile-line] body[data-page=client] .profile-details:before{content:'';position:absolute;inset:0 0 auto;height:4px;background:var(--profile-accent);pointer-events:none}
html[data-profile-line] .profile-preview-line{background:var(--profile-accent)}
html[data-profile-avatar] body[data-page] :is(#user-avatar,#sidebar-initial,#profile-initial,.profile-preview-avatar){outline:2px solid var(--profile-accent);outline-offset:3px}
html[data-profile-name] body[data-page] :is(.profile-identity [data-account-name],#sidebar-name,#user-display-name,.profile-preview-identity [data-account-name]){color:var(--profile-name-color)}
@media(max-width:1000px){.profile-style-layout{grid-template-columns:1fr;gap:22px}.profile-style-preview{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}.profile-style-preview>p br{display:none}}
@media(max-width:767px){.profile-style-layout{padding:22px 18px}.profile-color-options{gap:10px}.profile-color-dot{width:32px;height:32px}.profile-style-footer{padding:18px;flex-wrap:wrap}.profile-style-footer>p{width:100%}.profile-style-footer>div{width:100%;gap:10px}.profile-style-footer button{flex:1;padding:10px;font-size:11px}#appearance-status{padding:0 18px 18px}.profile-preview-card{padding:26px 18px 20px}}
@media(prefers-reduced-motion:reduce){.profile-color-dot{transition:none}}
