.account-scene { --surface-bg:rgba(35,21,47,.66); --surface-line:rgba(245,232,255,.2); --surface-blur:calc(12 * var(--ui-px, 1px)); --account-nav-height:calc(72 * var(--ui-px, 1px)); --account-clip-overlap:calc(12 * var(--ui-px, 1px)); position:fixed; inset:0; z-index:120; isolation:isolate; color:#faf6ff; background:transparent; font-family:"Dongyuan Song One","Songti SC","Noto Serif CJK SC",serif; }
.account-scene *, .account-scene *::before,.account-scene *::after { box-sizing:border-box; }
.account-scene button { font-family:inherit; }
.account-scene__backdrop { position:absolute; z-index:-1; inset:0; pointer-events:none; background:rgba(3,2,7,.42); backdrop-filter:blur(calc(14 * var(--ui-px, 1px))) saturate(.9); -webkit-backdrop-filter:blur(calc(14 * var(--ui-px, 1px))) saturate(.9); }
.account-scene__header { position:absolute; inset:0 0 auto; height:calc(var(--account-nav-height) + env(safe-area-inset-top,0px)); padding:calc(calc(8 * var(--ui-px, 1px)) + env(safe-area-inset-top,0px)) calc(28 * var(--ui-px, 1px)) calc(8 * var(--ui-px, 1px)); display:flex; align-items:center; justify-content:space-between; gap:calc(16 * var(--ui-px, 1px)); }
.account-scene__back { display:inline-flex; gap:calc(11 * var(--ui-px, 1px)); align-items:center; padding:0; border:0; color:#faf6ff; background:transparent; cursor:pointer; text-align:left; }
.account-scene__back > img { width:calc(50 * var(--ui-px, 1px)); height:calc(50 * var(--ui-px, 1px)); object-fit:contain; }
.account-scene__back > span { display:grid; gap:calc(1 * var(--ui-px, 1px)); }
.account-scene__back small { color:#a994bd; font-size:calc(9 * var(--ui-px, 1px)); letter-spacing:.17em; }
.account-scene__back strong { font-size:calc(17 * var(--ui-px, 1px)); font-weight:400; letter-spacing:.09em; }
.account-scene__back:focus-visible { outline:calc(2 * var(--ui-px, 1px)) solid #b87cff; outline-offset:calc(5 * var(--ui-px, 1px)); border-radius:calc(6 * var(--ui-px, 1px)); }
.account-scene .profile-placeholder:disabled { cursor:default; opacity:1; }
.account-scene__viewport { position:absolute; inset:calc(var(--account-nav-height) - var(--account-clip-overlap) + env(safe-area-inset-top,0px)) 0 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.account-scene__content { width:calc(100% - calc(64 * var(--ui-px, 1px))); max-width:calc(1440 * var(--ui-px, 1px)); margin:0 auto; padding:calc(calc(16 * var(--ui-px, 1px)) + var(--account-clip-overlap)) 0 calc(52 * var(--ui-px, 1px)); }
.account-scene h1 { margin:0; text-align:center; color:#fff; font-size:clamp(calc(32 * var(--ui-px, 1px)),calc(4 * 1vw),calc(58 * var(--ui-px, 1px))); font-weight:400; line-height:normal; position:relative; outline:none; }
.account-scene h1 > span { position:absolute; bottom:100%; left:0; right:0; display:block; margin-bottom:calc(5 * var(--ui-px, 1px)); font-size:calc(16 * var(--ui-px, 1px)); line-height:1; letter-spacing:.08em; }
.account-scene__cards { display:grid; grid-template-columns:repeat(2,calc(320 * var(--ui-px, 1px))); justify-content:center; gap:calc(34 * var(--ui-px, 1px)); margin-top:calc(58 * var(--ui-px, 1px)); perspective:calc(1200 * var(--ui-px, 1px)); }
.account-scene__card { --card-rotate-x:0deg; --card-rotate-y:0deg; --card-light-x:50%; --card-light-y:35%; position:relative; width:calc(320 * var(--ui-px, 1px)); height:calc(470 * var(--ui-px, 1px)); min-width:0; border:calc(1 * var(--ui-px, 1px)) solid var(--surface-line); border-radius:calc(25 * var(--ui-px, 1px)); background:var(--surface-bg); backdrop-filter:blur(var(--surface-blur)); -webkit-backdrop-filter:blur(var(--surface-blur)); box-shadow:inset 0 calc(1 * var(--ui-px, 1px)) 0 rgba(245,232,255,.12),0 calc(24 * var(--ui-px, 1px)) calc(50 * var(--ui-px, 1px)) rgba(0,0,0,.24); animation:account-card-enter-left 760ms cubic-bezier(.22,1.17,.36,1) 110ms backwards; transition:border-color 260ms ease,box-shadow 320ms ease,transform 160ms ease-out; }
.account-scene__card:nth-child(2) { animation-name:account-card-enter-right; animation-delay:170ms; }
.account-scene__card-heading { position:absolute; top:calc(-30 * var(--ui-px, 1px)); left:calc(-22 * var(--ui-px, 1px)); color:#fff; }
.account-scene__card-heading h2 { margin:0; font-size:calc(32 * var(--ui-px, 1px)); line-height:1.1; font-weight:400; }
.account-scene__card-heading > span { display:block; font-size:calc(25 * var(--ui-px, 1px)); line-height:1.1; }
.account-scene__card-content { position:absolute; inset:calc(64 * var(--ui-px, 1px)) calc(18 * var(--ui-px, 1px)) calc(18 * var(--ui-px, 1px)); }
@keyframes account-card-enter-left { from { opacity:0; translate:calc(-150 * var(--ui-px, 1px)) 0; } to { opacity:1; translate:0 0; } }
@keyframes account-card-enter-right { from { opacity:0; translate:calc(150 * var(--ui-px, 1px)) 0; } to { opacity:1; translate:0 0; } }
@media(hover:hover) and (pointer:fine) { .account-scene__card:hover { transform:translateY(calc(-4 * var(--ui-px, 1px))) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)) scale(1.018); border-color:rgba(207,158,255,.32); box-shadow:0 0 0 calc(1 * var(--ui-px, 1px)) rgba(184,124,255,.05),0 0 calc(12 * var(--ui-px, 1px)) rgba(184,124,255,.07),0 calc(24 * var(--ui-px, 1px)) calc(50 * var(--ui-px, 1px)) rgba(0,0,0,.36); } }
@media(max-width:760px) { .account-scene__cards { grid-template-columns:repeat(2,minmax(0,calc(320 * var(--ui-px, 1px)))); gap:calc(24 * var(--ui-px, 1px)); } .account-scene__card { width:100%; } }
@media(max-width:600px) {
  .account-scene { --account-nav-height:calc(60 * var(--ui-px, 1px)); --account-clip-overlap:0px; }
  .account-scene__header { padding:calc(calc(6 * var(--ui-px, 1px)) + env(safe-area-inset-top,0px)) calc(12 * var(--ui-px, 1px)) calc(6 * var(--ui-px, 1px)); gap:calc(8 * var(--ui-px, 1px)); }
  .account-scene__back { gap:calc(6 * var(--ui-px, 1px)); } .account-scene__back > img { width:calc(36 * var(--ui-px, 1px)); height:calc(36 * var(--ui-px, 1px)); }
  .account-scene__back small { display:none; } .account-scene__back strong { font-size:calc(14 * var(--ui-px, 1px)); }
  .account-scene__content { width:calc(100% - calc(40 * var(--ui-px, 1px))); display:flex; flex-direction:column; height:calc(calc(100 * 1dvh) - var(--account-nav-height) - env(safe-area-inset-top,0px)); min-height:calc(590 * var(--ui-px, 1px)); padding:calc(20 * var(--ui-px, 1px)) 0 max(calc(12 * var(--ui-px, 1px)),env(safe-area-inset-bottom,0px)); }
  .account-scene h1 { flex-shrink:0; font-size:calc(30 * var(--ui-px, 1px)); line-height:1.2; } .account-scene h1 > span { font-size:calc(11 * var(--ui-px, 1px)); }
  .account-scene__cards { flex:1; min-height:0; grid-template-columns:1fr; grid-template-rows:minmax(calc(125 * var(--ui-px, 1px)),.8fr) minmax(calc(218 * var(--ui-px, 1px)),1.2fr) calc(44 * var(--ui-px, 1px)); gap:calc(25 * var(--ui-px, 1px)); margin-top:calc(26 * var(--ui-px, 1px)); perspective:none; }
  .account-scene__card { height:auto; border-radius:calc(18 * var(--ui-px, 1px)); }
  .account-scene__card-heading { top:calc(-17 * var(--ui-px, 1px)); left:calc(-8 * var(--ui-px, 1px)); }
  .account-scene__card-heading h2 { font-size:calc(23 * var(--ui-px, 1px)); } .account-scene__card-heading > span { font-size:calc(16 * var(--ui-px, 1px)); }
  .account-scene__card-content { inset:calc(44 * var(--ui-px, 1px)) calc(14 * var(--ui-px, 1px)) calc(14 * var(--ui-px, 1px)); }
}
@media(prefers-reduced-motion:reduce) { .account-scene__card { animation:none; transition:none; } .account-scene__card:hover { transform:none; } }

.account-scene__card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(circle at var(--card-light-x) var(--card-light-y),rgba(255,255,255,.025),transparent 85%); opacity:0; transition:opacity 320ms ease; }
@media(hover:hover) and (pointer:fine) { .account-scene__card:hover::after { opacity:1; } }
@media(min-width:1000px) and (max-height:740px) { .account-scene h1 { font-size:calc(34 * var(--ui-px, 1px)); } .account-scene__cards { margin-top:calc(44 * var(--ui-px, 1px)); } }
@media(min-width:601px) and (max-width:860px) { .account-scene { --account-nav-height:calc(64 * var(--ui-px, 1px)); } .account-scene__back > img { width:calc(43 * var(--ui-px, 1px)); height:calc(43 * var(--ui-px, 1px)); } .account-scene__back small { display:none; } .account-scene__back strong { font-size:calc(15 * var(--ui-px, 1px)); } }
@media(max-width:600px) and (max-height:700px) { .account-scene__cards { gap:calc(20 * var(--ui-px, 1px)); margin-top:calc(23 * var(--ui-px, 1px)); grid-template-rows:minmax(calc(118 * var(--ui-px, 1px)),.7fr) minmax(calc(216 * var(--ui-px, 1px)),1.3fr) calc(40 * var(--ui-px, 1px)); } }
@media(max-width:360px) { .account-scene__header { padding-left:calc(8 * var(--ui-px, 1px)); padding-right:calc(8 * var(--ui-px, 1px)); gap:calc(6 * var(--ui-px, 1px)); } .account-scene__back > img { width:calc(30 * var(--ui-px, 1px)); height:calc(30 * var(--ui-px, 1px)); } .account-scene__back strong { font-size:calc(12 * var(--ui-px, 1px)); } }

.account-scene__card-content[data-account-settings] { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:calc(10 * var(--ui-px, 1px)); }
.account-scene__logout { width:100%; max-width:calc(244 * var(--ui-px, 1px)); min-height:calc(44 * var(--ui-px, 1px)); padding:calc(10 * var(--ui-px, 1px)) calc(18 * var(--ui-px, 1px)); border:calc(1 * var(--ui-px, 1px)) solid rgba(255,159,174,.38); border-radius:calc(14 * var(--ui-px, 1px)); color:#fff0f2; background:linear-gradient(110deg,#813a55,#a6465c); font-size:calc(18 * var(--ui-px, 1px)); cursor:pointer; transition:filter 160ms ease; }
.account-scene__logout:hover { filter:brightness(1.1); }
.account-scene__logout:focus-visible { outline:calc(2 * var(--ui-px, 1px)) solid #ffadbd; outline-offset:calc(4 * var(--ui-px, 1px)); }
.account-scene__logout:disabled { opacity:.6; cursor:wait; }
.account-scene__status { margin:0; color:#ffbcc8; font-size:calc(14 * var(--ui-px, 1px)); text-align:center; }
.account-scene__status:empty { display:none; }
@media(max-width:600px) { .account-scene__logout { min-height:calc(40 * var(--ui-px, 1px)); font-size:calc(16 * var(--ui-px, 1px)); padding:calc(8 * var(--ui-px, 1px)) calc(16 * var(--ui-px, 1px)); } }
.account-scene__card-content[data-account-settings] { justify-content:flex-start; }
.account-scene__settings { display:flex; flex-direction:column; align-items:center; gap:calc(14 * var(--ui-px, 1px)); width:100%; flex:1; min-height:0; }
.account-scene__avatar { width:calc(82 * var(--ui-px, 1px)); height:calc(82 * var(--ui-px, 1px)); border-radius:50%; object-fit:cover; border:calc(1 * var(--ui-px, 1px)) solid var(--surface-line); }
.account-scene__action { width:100%; max-width:calc(244 * var(--ui-px, 1px)); min-height:calc(42 * var(--ui-px, 1px)); padding:calc(8 * var(--ui-px, 1px)) calc(16 * var(--ui-px, 1px)); color:#f5e8ff; border:calc(1 * var(--ui-px, 1px)) solid var(--surface-line); border-radius:calc(14 * var(--ui-px, 1px)); background:var(--surface-bg); font-size:calc(17 * var(--ui-px, 1px)); cursor:pointer; }
.account-scene__action:hover { border-color:rgba(184,124,255,.5); }
.account-scene__action:focus-visible { outline:calc(2 * var(--ui-px, 1px)) solid #b87cff; outline-offset:calc(3 * var(--ui-px, 1px)); }
.account-editor { --ease:cubic-bezier(.22,1,.36,1); --surface-bg:rgba(35,21,47,.66); --surface-line:rgba(245,232,255,.2); --surface-blur:calc(12 * var(--ui-px, 1px)); position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:calc(28 * var(--ui-px, 1px)) calc(20 * var(--ui-px, 1px)); overflow-y:auto; overscroll-behavior:contain; background:rgba(3,2,7,.24); backdrop-filter:blur(calc(12 * var(--ui-px, 1px))); -webkit-backdrop-filter:blur(calc(12 * var(--ui-px, 1px))); color:#faf6ff; font-family:"Dongyuan Song One","Songti SC","Noto Serif CJK SC",serif; }
.account-editor *, .account-editor *::before, .account-editor *::after { box-sizing:border-box; }
.account-editor__panel { position:relative; flex-shrink:0; display:flex; flex-direction:column; gap:calc(15 * var(--ui-px, 1px)); width:min(100%,calc(420 * var(--ui-px, 1px))); margin:auto; padding:calc(34 * var(--ui-px, 1px)) calc(28 * var(--ui-px, 1px)) calc(28 * var(--ui-px, 1px)); border:calc(1 * var(--ui-px, 1px)) solid var(--surface-line); border-radius:calc(24 * var(--ui-px, 1px)); background:var(--surface-bg); backdrop-filter:blur(var(--surface-blur)); -webkit-backdrop-filter:blur(var(--surface-blur)); box-shadow:0 calc(20 * var(--ui-px, 1px)) calc(60 * var(--ui-px, 1px)) rgba(0,0,0,.25); }
.account-editor button, .account-editor input { font:inherit; }
.account-editor__eyebrow { margin:0; color:#c9a1ff; font-size:calc(12 * var(--ui-px, 1px)); letter-spacing:.12em; }
.account-editor h2 { margin:0 0 calc(6 * var(--ui-px, 1px)); font-size:calc(30 * var(--ui-px, 1px)); font-weight:400; }
.account-editor__field { display:grid; gap:calc(7 * var(--ui-px, 1px)); font-size:calc(17 * var(--ui-px, 1px)); }
.account-editor__control { display:flex; width:100%; min-height:calc(46 * var(--ui-px, 1px)); overflow:hidden; border:calc(1 * var(--ui-px, 1px)) solid var(--surface-line); border-radius:calc(12 * var(--ui-px, 1px)); background:var(--surface-bg); }
.account-editor__control:focus-within { outline:calc(2 * var(--ui-px, 1px)) solid #b87cff; outline-offset:calc(2 * var(--ui-px, 1px)); }
.account-editor__control input { min-width:0; width:100%; padding:calc(10 * var(--ui-px, 1px)) calc(12 * var(--ui-px, 1px)); border:0; outline:0; background:transparent; color:#fff; font-family:system-ui,sans-serif; font-size:calc(16 * var(--ui-px, 1px)); user-select:text; -webkit-user-select:text; }
.account-editor__control input::selection { background:#8052ac; }
.account-editor__control button { flex-shrink:0; width:calc(44 * var(--ui-px, 1px)); padding:calc(10 * var(--ui-px, 1px)); color:#c9afd9; border:0; background:transparent; cursor:pointer; }
.account-editor__control svg { width:calc(22 * var(--ui-px, 1px)); height:calc(22 * var(--ui-px, 1px)); fill:none; stroke:currentColor; stroke-width:1.5; }
.account-editor__save, .account-editor__choose { display:block; min-height:calc(44 * var(--ui-px, 1px)); padding:calc(10 * var(--ui-px, 1px)) calc(16 * var(--ui-px, 1px)); color:#fff; text-align:center; border:calc(1 * var(--ui-px, 1px)) solid rgba(220,184,255,.4); border-radius:calc(14 * var(--ui-px, 1px)); background:linear-gradient(110deg,#7844b3,#ad5ce0); font-size:calc(18 * var(--ui-px, 1px)); cursor:pointer; }
.account-editor__choose { position:relative; align-self:center; background:var(--surface-bg); }
.account-editor__choose input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.account-editor button:focus-visible, .account-editor__choose:focus-within { outline:calc(2 * var(--ui-px, 1px)) solid #b87cff; outline-offset:calc(3 * var(--ui-px, 1px)); }
.account-editor__save:disabled { opacity:.55; cursor:wait; }
.account-editor__preview { display:block; align-self:center; width:calc(144 * var(--ui-px, 1px)); height:calc(144 * var(--ui-px, 1px)); object-fit:cover; border-radius:50%; border:calc(1 * var(--ui-px, 1px)) solid var(--surface-line); }
.account-editor__help { margin:0; text-align:center; font-size:calc(14 * var(--ui-px, 1px)); line-height:1.6; color:#c3b0d0; }
.account-editor__status { margin:0; color:#f3bdcd; font-size:calc(15 * var(--ui-px, 1px)); line-height:1.5; }
.account-editor__status:empty { display:none; }
@media(max-width:600px) {
  .account-scene__cards { grid-template-rows:minmax(calc(260 * var(--ui-px, 1px)),.9fr) minmax(calc(218 * var(--ui-px, 1px)),1.1fr) calc(44 * var(--ui-px, 1px)); }
  .account-scene__settings { display:grid; grid-template-columns:calc(56 * var(--ui-px, 1px)) 1fr; grid-template-rows:calc(40 * var(--ui-px, 1px)) calc(40 * var(--ui-px, 1px)); align-content:start; gap:calc(9 * var(--ui-px, 1px)) calc(14 * var(--ui-px, 1px)); }
  .account-scene__avatar { width:calc(56 * var(--ui-px, 1px)); height:calc(56 * var(--ui-px, 1px)); grid-row:1 / 3; align-self:center; }
  .account-scene__action { min-height:calc(40 * var(--ui-px, 1px)); font-size:calc(16 * var(--ui-px, 1px)); }
  .account-editor { padding:max(calc(20 * var(--ui-px, 1px)),env(safe-area-inset-top,0px)) calc(16 * var(--ui-px, 1px)) max(calc(20 * var(--ui-px, 1px)),env(safe-area-inset-bottom,0px)); }
  .account-editor__panel { padding:calc(30 * var(--ui-px, 1px)) calc(20 * var(--ui-px, 1px)) calc(22 * var(--ui-px, 1px)); gap:calc(13 * var(--ui-px, 1px)); border-radius:calc(20 * var(--ui-px, 1px)); }
  .account-editor h2 { font-size:calc(26 * var(--ui-px, 1px)); }
}

.account-scene__account-id { position:absolute; top:calc(40 * var(--ui-px, 1px)); left:calc(18 * var(--ui-px, 1px)); right:calc(18 * var(--ui-px, 1px)); margin:0; color:#d5c5df; font-size:calc(13 * var(--ui-px, 1px)); line-height:1.4; }
.account-scene__identity { display:contents; }
.account-scene__nickname { display:none; margin:0; width:100%; text-align:center; color:#faf6ff; font-size:calc(19 * var(--ui-px, 1px)); line-height:1.4; overflow-wrap:anywhere; }
@media(min-width:601px) {
  .account-scene__card-content[data-account-settings] { inset:calc(68 * var(--ui-px, 1px)) calc(18 * var(--ui-px, 1px)) calc(18 * var(--ui-px, 1px)); gap:calc(10 * var(--ui-px, 1px)); }
  .account-scene__settings { display:contents; }
  .account-scene__identity { display:grid; flex:1; min-height:0; width:100%; grid-template-rows:minmax(0,1fr) auto; justify-items:center; gap:calc(8 * var(--ui-px, 1px)); padding-bottom:calc(4 * var(--ui-px, 1px)); }
  .account-scene__avatar { width:auto; height:100%; max-height:calc(180 * var(--ui-px, 1px)); max-width:100%; aspect-ratio:1; align-self:center; }
  .account-scene__nickname { display:block; max-height:calc(54 * var(--ui-px, 1px)); overflow-y:auto; }
  .account-scene__action, .account-scene__logout { flex-shrink:0; width:100%; max-width:calc(244 * var(--ui-px, 1px)); height:calc(44 * var(--ui-px, 1px)); min-height:calc(44 * var(--ui-px, 1px)); padding:calc(8 * var(--ui-px, 1px)) calc(16 * var(--ui-px, 1px)); font-size:calc(18 * var(--ui-px, 1px)); line-height:1.4; }
}
@media(max-width:600px) {
  .account-scene__account-id { top:calc(34 * var(--ui-px, 1px)); left:calc(14 * var(--ui-px, 1px)); right:calc(14 * var(--ui-px, 1px)); font-size:calc(12 * var(--ui-px, 1px)); }
  .account-scene__card-content[data-account-settings] { top:calc(60 * var(--ui-px, 1px)); }
}