/* Match the preview website director-profile material and sizing.
   A dedicated scroll region keeps scrollbar wholly inside the rounded glass. */
html body#daailokStudio .profile-glass-modal{
  background:rgba(8,10,11,.34)!important;
  backdrop-filter:blur(8px) saturate(.82);
  -webkit-backdrop-filter:blur(8px) saturate(.82);
  padding:clamp(12px,3vh,26px);
  box-sizing:border-box;
}
html body#daailokStudio .profile-glass-modal .preview-simple-card.website-account-dialog{
  isolation:isolate;position:relative;
  display:flex!important;flex-direction:column!important;
  width:min(584px,calc(100vw - 32px))!important;
  max-width:min(584px,calc(100vw - 32px))!important;
  max-height:min(86dvh,900px)!important;
  padding:0!important;overflow:hidden!important;
  scrollbar-gutter:auto!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),inset 0 -1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(10px) saturate(.88)!important;
  -webkit-backdrop-filter:blur(10px) saturate(.88)!important;
}
html body#daailokStudio .profile-glass-modal .preview-simple-card.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));
}
html body#daailokStudio .profile-glass-modal .preview-simple-card.website-account-dialog::after{
  content:"";position:absolute;z-index:0;left:24px;right:24px;top:0;height:1px;
  pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,233,185,.58),rgba(255,255,255,.24),transparent);
}
html body#daailokStudio .profile-glass-modal .website-account-dialog-head,
html body#daailokStudio .profile-glass-modal .website-account-dialog-body{
  position:relative;z-index:1;box-sizing:border-box;min-width:0;
}
html body#daailokStudio .profile-glass-modal .website-account-dialog-head{
  height:64px!important;min-height:64px!important;flex:0 0 64px;
  padding:0 22px!important;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:16px!important;font-weight:480!important;letter-spacing:-.018em;
}
html body#daailokStudio .profile-glass-modal .website-account-dialog-head [data-account-dialog-title] b{
  color:var(--ds-optical-accent,#dbb766)!important;
  font-weight:580;text-shadow:0 0 12px rgba(235,198,106,.16);
}
html body#daailokStudio .profile-glass-modal .website-account-dialog-head .preview-simple-close{
  position:static!important;flex:none!important;
  display:grid!important;place-items:center!important;
  width:32px!important;height:32px!important;min-width:32px!important;
  padding:0!important;margin:0!important;font:400 22px/1 sans-serif!important;
  border-radius:9px!important;background:transparent!important;
  color:inherit!important;border:0!important;box-shadow:none!important;
}
html body#daailokStudio .profile-glass-modal .website-account-dialog-body{
  display:block!important;flex:1 1 auto!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  max-height:none!important;min-height:0!important;
  padding:22px 26px 26px!important;
  overscroll-behavior:contain;scrollbar-gutter:stable!important;
  scrollbar-width:thin;scrollbar-color:rgba(152,165,164,.52) transparent;
}
html body#daailokStudio .profile-glass-modal .website-account-dialog-body::-webkit-scrollbar{width:6px}
html body#daailokStudio .profile-glass-modal .website-account-dialog-body::-webkit-scrollbar-track{background:transparent;margin:12px 0}
html body#daailokStudio .profile-glass-modal .website-account-dialog-body::-webkit-scrollbar-thumb{
  border-radius:8px;background:rgba(152,165,164,.45);
}
html body#daailokStudio .profile-glass-modal .website-account-dialog-body>.website-account-form,
html body#daailokStudio .profile-glass-modal .website-account-dialog-body>form{min-width:0;width:100%}
html body#daailokStudio .profile-glass-modal .website-profile-form h2{
  font-size:26px!important;font-weight:450!important;letter-spacing:-.035em!important;
}
html body#daailokStudio .profile-glass-modal .website-profile-avatar-button{
  width:84px!important;height:84px!important;
  border:1px solid rgba(235,240,235,.26)!important;
  background:rgba(255,255,255,.025)!important;
  box-shadow:0 15px 34px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
html body#daailokStudio .profile-glass-modal [data-account-settings-status]:empty{display:none!important}
html[data-studio-theme=light] body#daailokStudio .profile-glass-modal .preview-simple-card.website-account-dialog{
  color:#29302b!important;border-color:rgba(255,255,255,.58)!important;
  background:rgba(228,231,228,.05)!important;
  box-shadow:0 34px 92px rgba(48,54,49,.20),inset 0 1px 0 rgba(255,255,255,.60)!important;
}
html[data-studio-theme=light] body#daailokStudio .profile-glass-modal .preview-simple-card.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));
}
html[data-studio-theme=light] body#daailokStudio .profile-glass-modal .website-account-dialog-body :is(label,p,small,h2,h3){
  color:#29302b!important;
}
html[data-studio-theme=light] body#daailokStudio .profile-glass-modal .website-account-dialog-head .preview-simple-close{
  color:#29302b!important;background:transparent!important;
}
/* Toolbar: light mode icons are all the same dark tone. Appearance is an icon, not a capsule. */
html[data-studio-theme=light] body#daailokStudio .topbar .top-actions :is(#createWorldBtn,#createCharacterBtn,#createCameraBtn,#topCanvasBtn){
  color:#222a2d!important;background:rgba(255,255,255,.38)!important;
  border-color:rgba(90,98,101,.23)!important;
}
html[data-studio-theme=light] body#daailokStudio .topbar .top-actions :is(#createWorldBtn,#createCharacterBtn,#createCameraBtn,#topCanvasBtn) svg{
  stroke:#222a2d!important;
}
html[data-studio-theme=light] body#daailokStudio .topbar .top-actions .top-canvas-glyph{color:#222a2d!important}
html body#daailokStudio .topbar .top-actions #studioAppearanceToggle{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:34px!important;min-width:34px!important;height:34px!important;
  padding:0!important;margin:0!important;
  border:0!important;border-radius:50%!important;
  background:transparent!important;box-shadow:none!important;
  font-size:19px!important;line-height:1!important;white-space:nowrap!important;
}
html[data-studio-theme=light] body#daailokStudio .topbar .top-actions #studioAppearanceToggle{
  color:#222a2d!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
html body#daailokStudio .topbar .top-actions #studioAppearanceToggle:hover{
  background:rgba(140,147,144,.09)!important;
}
@media(max-width:600px){
 html body#daailokStudio .profile-glass-modal .website-account-dialog-body{padding:16px 18px 20px!important}
 html body#daailokStudio .profile-glass-modal .website-account-dialog-head{padding:0 18px!important}
}
/* Preserve corrected dark toolbar from PR #185; profile glass below is PR #184 unchanged. */
/* Regression fix: keep the established dark navigation controls in light mode.
   Do not recolor the whole toolbar or theme toggle. */
html[data-studio-theme=light] body#daailokStudio .topbar .top-actions :is(#createWorldBtn,#createCharacterBtn,#createCameraBtn,#topCanvasBtn){
  background:#2c2c2ce8!important;
  border:1px solid rgba(244,244,244,.20)!important;
  color:#f2f2f2!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}
html[data-studio-theme=light] body#daailokStudio .topbar .top-actions :is(#createWorldBtn,#createCharacterBtn,#createCameraBtn,#topCanvasBtn) svg{
  stroke:#f2f2f2!important;color:#f2f2f2!important;
}
html[data-studio-theme=light] body#daailokStudio .topbar .top-actions #topCanvasBtn .top-canvas-glyph{
  color:#f2f2f2!important;
}
html[data-studio-theme=light] body#daailokStudio .topbar .top-actions :is(#createWorldBtn,#createCharacterBtn,#createCameraBtn,#topCanvasBtn):hover{
  background:#363636!important;border-color:rgba(240,203,125,.43)!important;
}

/* Account close aligns with the website X; hovering/pressing never moves it. */
html body#daailokStudio #profileModal .website-account-dialog-head>.preview-simple-close{
  position:static!important;inset:auto!important;transform:none!important;
  translate:none!important;scale:1!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 34px!important;box-sizing:border-box!important;
  width:34px!important;height:34px!important;min-width:34px!important;
  padding:0!important;margin:0!important;
  line-height:1!important;font-size:22px!important;font-weight:400!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:9px!important;background:rgba(255,255,255,.045)!important;
  box-shadow:none!important;transition:background .14s,border-color .14s!important;
}
html body#daailokStudio #profileModal .website-account-dialog-head>.preview-simple-close:is(:hover,:focus,:active){
  position:static!important;inset:auto!important;transform:none!important;
  translate:none!important;scale:1!important;margin:0!important;
  background:rgba(255,255,255,.10)!important;
}
html body#daailokStudio #profileModal .website-account-dialog-head>.preview-simple-close>canvas.button-glass-surface{
  display:none!important;
}
html[data-studio-theme=light] body#daailokStudio #profileModal .website-account-dialog-head>.preview-simple-close{
  color:#29302b!important;background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.38)!important;
}

/* Exact website account dialog: .website-account-dialog is 470px, not 584px. */
html body#daailokStudio #profileModal .preview-simple-card.website-account-dialog{
  box-sizing:border-box!important;
  width:min(470px,calc(100vw - 30px))!important;
  min-width:0!important;
  max-width:min(470px,calc(100vw - 30px))!important;
  margin:0 auto!important;
}
/* Official website uses an unobtrusive × with no visible rectangle.
   Keep the original header click target, no position changes on interaction. */
html body#daailokStudio #profileModal .website-account-dialog-head>button.preview-simple-close{
  position:static!important;
  inset:auto!important;translate:none!important;transform:none!important;scale:1!important;
  flex:0 0 34px!important;
  box-sizing:border-box!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:34px!important;min-width:34px!important;max-width:34px!important;
  height:30px!important;min-height:30px!important;
  padding:5px 9px!important;margin:0!important;
  font:400 12px/1 sans-serif!important;
  color:inherit!important;opacity:.94!important;
  background:transparent!important;border:1px solid transparent!important;
  border-radius:var(--ds-radius-pill,999px)!important;
  box-shadow:none!important;filter:none!important;
  transition:color .14s ease!important;
}
html body#daailokStudio #profileModal .website-account-dialog-head>button.preview-simple-close:is(:hover,:focus,:active){
  position:static!important;inset:auto!important;
  translate:none!important;transform:none!important;scale:1!important;
  width:34px!important;height:30px!important;padding:5px 9px!important;margin:0!important;
  background:transparent!important;border-color:transparent!important;
  box-shadow:none!important;filter:none!important;opacity:1!important;
}
html[data-studio-theme=light] body#daailokStudio #profileModal .website-account-dialog-head>button.preview-simple-close{
  background:transparent!important;border-color:transparent!important;color:#29302b!important;
}
/* Same interactive size as the canvas .quiet Appearance control (icon only retained). */
html body#daailokStudio .topbar .top-actions #studioAppearanceToggle{
  box-sizing:border-box!important;min-width:70px!important;width:70px!important;
  min-height:37px!important;height:37px!important;
  padding:9px 12px!important;font-size:13px!important;
}
html body#daailokStudio .topbar .top-actions #studioAppearanceToggle::after{
  content:"外观";visibility:hidden;display:inline-block;
  width:0;height:0;overflow:hidden;pointer-events:none;
}

/* Restore the ORIGINAL compact circular appearance control. No 70×37 capsule. */
html body#daailokStudio .topbar .top-actions #studioAppearanceToggle{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 flex:0 0 34px!important;box-sizing:border-box!important;
 width:34px!important;min-width:34px!important;max-width:34px!important;
 height:34px!important;min-height:34px!important;max-height:34px!important;
 padding:0!important;margin:0!important;
 border-radius:50%!important;
 border:1px solid rgba(173,182,180,.26)!important;
 background:rgba(27,29,31,.55)!important;
 color:#f2f2f2!important;box-shadow:none!important;
 font-size:18px!important;line-height:1!important;
}
html[data-studio-theme="light"] body#daailokStudio .topbar .top-actions #studioAppearanceToggle{
 border-color:rgba(244,244,244,.2)!important;
 background:#2c2c2ce8!important;color:#f2f2f2!important;
}
html body#daailokStudio .topbar .top-actions #studioAppearanceToggle:is(:hover,:focus-visible){
 border-color:rgba(240,203,125,.55)!important;
 border-radius:50%!important;
}
/* Same actual liquid-glass hover renderer as other Studio buttons.
   The close icon's hit rectangle and scale are locked, so it cannot drift. */
html body#daailokStudio #profileModal .website-account-dialog-head>button.preview-simple-close[data-glass-button][data-glass-live]{
 isolation:isolate!important;
 /* Relative without offset keeps the X in flow but anchors the optical canvas to the X, not its header. */
 position:relative!important;inset:auto!important;transform:none!important;translate:none!important;scale:1!important;
 border:1px solid transparent!important;
 background:transparent!important;
}
html body#daailokStudio #profileModal .website-account-dialog-head>button.preview-simple-close[data-glass-button][data-glass-live]>canvas.button-glass-surface{
 display:block!important;
 position:absolute!important;
 z-index:-1!important;
 pointer-events:none!important;
}