/* Canvas local profile dialog. Uses same account markup and functional handlers as preview Studio. */
.canvas-profile-dialog{
  width:min(520px,calc(100vw - 28px));max-height:min(88dvh,900px);
  box-sizing:border-box;overflow:auto;padding:22px 24px;
  border:1px solid rgba(165,173,166,.32);border-radius:16px;
  background:#191d1e;color:#e5e5e1;box-shadow:0 25px 90px rgba(0,0,0,.60);
  font:12px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
.canvas-profile-dialog::backdrop{background:rgba(0,0,0,.62)}
.canvas-profile-dialog[open]{display:block}
.canvas-profile-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.canvas-profile-head h2{font-size:18px;line-height:1.3;margin:0}
.canvas-profile-head button{width:30px;height:30px;min-width:30px;border:0;background:transparent;color:inherit;border-radius:8px;font-size:20px;cursor:pointer}
.canvas-profile-dialog .website-profile-form{display:grid;gap:12px}
.canvas-profile-dialog .website-profile-form>label,.canvas-profile-dialog [data-account-subform] label{display:grid;gap:5px;font-size:12px}
.canvas-profile-dialog input:not([type=checkbox]):not([type=range]){
  width:100%;min-height:35px;padding:8px 11px;box-sizing:border-box;
  border:1px solid rgba(172,179,174,.30);border-radius:9px;
  background:rgba(10,14,16,.3);color:inherit;font:inherit
}
.canvas-profile-dialog button{font:inherit;cursor:pointer;color:inherit}
.canvas-profile-dialog :is(.pill,.ui-code-send){padding:7px 11px;border:1px solid rgba(169,178,174,.27);border-radius:9px;background:rgba(255,255,255,.045)}
.canvas-profile-dialog .website-account-kicker{font-size:10px;opacity:.6;letter-spacing:.09em;margin:0}
.canvas-profile-dialog .website-profile-form h2{font-size:18px;margin:0}
.canvas-profile-dialog .website-profile-avatar-zone{display:grid;justify-items:center;gap:7px}
.canvas-profile-dialog .website-profile-avatar-button{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
.canvas-profile-dialog .website-profile-avatar-button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.canvas-profile-dialog .website-profile-avatar-camera{position:relative;z-index:1}
.canvas-profile-dialog .website-avatar-cropper{display:grid;justify-items:center;gap:8px;width:100%;max-width:290px}
.canvas-profile-dialog .website-avatar-cropper[hidden]{display:none!important}
.canvas-profile-dialog .website-avatar-cropper canvas{width:250px;max-width:100%;aspect-ratio:1;touch-action:none}
.canvas-profile-dialog .website-avatar-zoom{display:grid;gap:4px}
.canvas-profile-dialog .website-avatar-crop-actions{display:flex;gap:8px}
.canvas-profile-dialog .ui-verification-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.canvas-profile-dialog .ui-verification-row[hidden]{display:none!important}
.canvas-profile-dialog .website-account-message{display:block;min-height:14px;color:inherit}
.canvas-profile-dialog .account-management-section{display:grid;gap:11px}
.canvas-profile-dialog .account-analytics-control{display:flex;align-items:center;gap:8px}
.canvas-profile-dialog .account-analytics-control>input{flex:none;accent-color:#dbc074}
.canvas-profile-dialog .account-management-section .ui-auth-help{font-size:11px;line-height:1.65;opacity:.7}
.canvas-profile-dialog .profile-action-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.canvas-profile-dialog .profile-action-row>button{
  height:36px!important;min-height:36px!important;width:100%!important;
  background:rgba(249,249,249,.055)!important;border:1px solid rgba(176,185,183,.23)!important;
  border-radius:10px!important;color:inherit!important;box-shadow:none!important;font-size:12px!important;
}
.canvas-profile-dialog .profile-action-row>button:hover{background:rgba(249,249,249,.12)!important}
.canvas-profile-dialog .account-delete-inline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.canvas-profile-dialog .account-delete-inline>.account-delete-link{
  padding:0!important;border:0!important;min-height:0!important;height:auto!important;
  background:none!important;color:inherit!important;opacity:.72;font-weight:600!important;
  box-shadow:none!important;text-align:left;white-space:nowrap;
}
.canvas-profile-dialog .account-delete-inline>.account-delete-link:hover{opacity:1;text-decoration:underline}
.canvas-profile-dialog .account-delete-inline .ui-auth-help{flex:1 1 235px}
.canvas-profile-dialog .account-policy-links a{color:#d4b477}
.canvas-profile-dialog [data-account-subform] form{display:grid;gap:10px}
body[data-theme=light] .canvas-profile-dialog{background:#e9ece9;color:#242a27;border-color:rgba(38,49,42,.18)}
body[data-theme=light] .canvas-profile-dialog input:not([type=checkbox]):not([type=range]){background:rgba(255,255,255,.4);border-color:rgba(45,60,45,.2)}
@media(max-width:520px){.canvas-profile-dialog{padding:16px}.canvas-profile-dialog .ui-verification-row{grid-template-columns:1fr}}

/* Website liquid-profile material reused by the canvas account dialog. */
.canvas-profile-dialog.website-account-dialog{
 position:relative;isolation:isolate;flex-direction:column!important;
}
/* Never render the account dialog until showModal(). This also prevents its
   transparent glass footer from appearing below Free Creation. */
.canvas-profile-dialog.website-account-dialog:not([open]){display:none!important}
.canvas-profile-dialog.website-account-dialog[open]{display:flex!important}
.canvas-profile-dialog.website-account-dialog{

 box-sizing:border-box;width:min(584px,calc(100vw - 30px))!important;
 max-height:min(86dvh,900px)!important;padding:0!important;
 overflow:hidden!important;border:1px solid rgba(235,240,235,.34)!important;
 border-radius:26px!important;background:transparent!important;
 color:#e9ece7!important;
 box-shadow:0 34px 98px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.20)!important;
 backdrop-filter:blur(10px) saturate(.88)!important;-webkit-backdrop-filter:blur(10px) saturate(.88)!important;
}
.canvas-profile-dialog.website-account-dialog::before{
 content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
 background:radial-gradient(ellipse at 50% 4%,rgba(255,255,255,.13),transparent 33%),
 linear-gradient(145deg,rgba(225,231,226,.105),rgba(49,55,54,.15) 44%,rgba(17,21,22,.25));
}
.canvas-profile-dialog.website-account-dialog::after{
 content:"";position:absolute;z-index:0;top:0;left:24px;right:24px;height:1px;pointer-events:none;
 background:linear-gradient(90deg,transparent,rgba(255,233,185,.58),rgba(255,255,255,.24),transparent);
}
.canvas-profile-dialog.website-account-dialog::backdrop{
 background:rgba(8,10,11,.34);backdrop-filter:blur(8px) saturate(.82);
 -webkit-backdrop-filter:blur(8px) saturate(.82);
}
.canvas-profile-dialog.website-account-dialog>.website-account-dialog-head,
.canvas-profile-dialog.website-account-dialog>.website-account-dialog-body{
 position:relative;z-index:1;box-sizing:border-box;
}
.canvas-profile-dialog.website-account-dialog>.website-account-dialog-head{
 height:64px;min-height:64px;flex:0 0 64px;display:flex;align-items:center;
 justify-content:space-between;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.08);
 font-size:16px;font-weight:480;letter-spacing:-.018em;margin:0;
}
.canvas-profile-dialog.website-account-dialog>.website-account-dialog-head [data-account-dialog-title] b{
 color:#ddbc77;font-weight:580;text-shadow:0 0 12px rgba(235,198,106,.16);
}
.canvas-profile-dialog.website-account-dialog>.website-account-dialog-head>button{
 display:grid;place-items:center;width:32px;height:32px;min-width:32px;
 padding:0;margin:0;border:0;background:transparent;box-shadow:none;
 color:inherit;font-size:22px;border-radius:9px;
}
.canvas-profile-dialog.website-account-dialog>.website-account-dialog-body{
 display:block;flex:1 1 auto;overflow-y:auto!important;overflow-x:hidden!important;
 min-height:0;max-height:none!important;padding:22px 26px 26px!important;
 scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(152,165,164,.52) transparent;
 overscroll-behavior:contain;
}
.canvas-profile-dialog.website-account-dialog>.website-account-dialog-body::-webkit-scrollbar{width:6px}
.canvas-profile-dialog.website-account-dialog>.website-account-dialog-body::-webkit-scrollbar-track{background:transparent;margin:12px 0}
.canvas-profile-dialog.website-account-dialog>.website-account-dialog-body::-webkit-scrollbar-thumb{
 background:rgba(152,165,164,.45);border-radius:8px;
}
.canvas-profile-dialog.website-account-dialog .website-profile-form h2{
 font-size:26px!important;font-weight:450!important;letter-spacing:-.035em!important;
}
.canvas-profile-dialog.website-account-dialog .website-profile-avatar-button{
 width:84px;height:84px;background:rgba(255,255,255,.025);
}
.canvas-profile-dialog.website-account-dialog [data-account-settings-status]:empty{display:none!important}
body[data-theme=light] .canvas-profile-dialog.website-account-dialog{
 color:#29302b!important;background:rgba(228,231,228,.05)!important;
 border-color:rgba(255,255,255,.58)!important;
 box-shadow:0 34px 92px rgba(48,54,49,.20),inset 0 1px 0 rgba(255,255,255,.60)!important;
}
body[data-theme=light] .canvas-profile-dialog.website-account-dialog::before{
 background:radial-gradient(ellipse at 50% 4%,rgba(255,255,255,.44),transparent 34%),
 linear-gradient(145deg,rgba(255,255,255,.22),rgba(232,235,231,.16) 52%,rgba(132,139,133,.16));
}
@media(max-width:520px){
 .canvas-profile-dialog.website-account-dialog>.website-account-dialog-head{padding:0 18px}
 .canvas-profile-dialog.website-account-dialog>.website-account-dialog-body{padding:16px 18px 22px!important}
}

/* Account center: immutable system ID + separately editable login username. */
.daailok-account-id{
 display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
 padding:9px 12px;border:1px solid rgba(var(--ds-optical-accent-rgb),.21);border-radius:12px;
 background:rgba(var(--ds-optical-accent-rgb),.065);font-size:12px;color:inherit;
}
.daailok-account-id strong{font-size:13px;letter-spacing:.025em;color:var(--ds-optical-accent);font-weight:700;user-select:text}
.daailok-account-id small{font-size:10px;opacity:.64;margin-left:auto}
@media(max-width:420px){.daailok-account-id small{margin-left:0}}