:root {
  --ink: #697789;
  --muted: #98a9b8;
  --blue: #cfe8f7;
  --blue-strong: #a7d2eb;
  --pink: #f6cddd;
  --ivory: #fffdfb;
  --shadow: 0 16px 45px rgba(98, 126, 151, .18);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #eef4f8; color: var(--ink); font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
.app { width: min(100vw, 480px); height: var(--visual-viewport-height, 100dvh); min-height: 650px; margin: 0 auto; position: relative; overflow: hidden; background: var(--ivory); box-shadow: 0 0 70px rgba(47, 79, 106, .22); }
.app.keyboard-open { min-height:0; }
.site-menu-toggle { position:absolute; z-index:18; top:calc(15px + env(safe-area-inset-top)); left:15px; width:40px; height:40px; display:grid; place-content:center; gap:4px; border-radius:50%; border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.67); box-shadow:0 8px 24px rgba(91,123,147,.15),inset 0 1px #fff; backdrop-filter:blur(18px); cursor:pointer; }
.site-menu-toggle span { display:block; width:16px; height:1.5px; border-radius:2px; background:#778fa3; transition:.25s; }
.site-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}.site-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.site-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.site-menu-backdrop { position:absolute; z-index:40; inset:0; opacity:0; visibility:hidden; background:rgba(221,234,243,.34); backdrop-filter:blur(9px); transition:.3s; }
.site-menu-backdrop.open { opacity:1; visibility:visible; }
.site-menu { position:absolute; z-index:41; left:12px; top:calc(12px + env(safe-area-inset-top)); bottom:calc(12px + env(safe-area-inset-bottom)); width:min(82%,350px); padding:24px 18px 18px; border-radius:31px; transform:translateX(calc(-100% - 24px)); opacity:0; visibility:hidden; transition:transform .42s cubic-bezier(.2,.78,.2,1),opacity .3s,visibility .3s; overflow:auto; }
.site-menu.open { transform:none; opacity:1; visibility:visible; }
.site-menu-heading { display:flex; justify-content:space-between; align-items:center; padding:3px 4px 17px; }
.site-menu-heading h2 { margin:0; font:italic 500 27px/1 Georgia,serif; color:#748da2; }
.site-menu-heading button { width:37px; height:37px; border-radius:50%; border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.43); color:#8196a8; font-size:22px; cursor:pointer; }
.site-menu nav { display:grid; gap:9px; }
.site-menu nav button { display:grid; grid-template-columns:27px 1fr; text-align:left; padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.72); background:rgba(255,255,255,.29); cursor:pointer; }
.site-menu nav button>span { grid-row:1/3; font-size:9px; letter-spacing:.12em; color:#a3b2be; padding-top:3px; }.site-menu nav button strong{font-size:13px;color:#72899d}.site-menu nav button small{margin-top:3px;color:#a0aeba;font-size:9px}
.workspace-link { display:grid; margin-top:15px; padding:17px; border-radius:21px; text-decoration:none; background:linear-gradient(120deg,rgba(214,239,252,.62),rgba(253,222,237,.57)); border:1px solid rgba(255,255,255,.82); box-shadow:inset 0 1px #fff; }
.workspace-link span{font-size:8px;letter-spacing:.2em;color:#9aabba}.workspace-link strong{margin-top:7px;color:#70889d;font-size:13px}.workspace-link small{margin-top:4px;color:#9cabb7;font-size:9px}
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.025); transition: opacity .55s ease, transform .7s ease, visibility .55s; overflow: hidden; }
.screen.active { opacity: 1; visibility: visible; transform: scale(1); z-index: 2; }
.scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entrance .scene-img { object-position: 50% 50%; filter: saturate(.91) brightness(1.015); }
.room .scene-img { object-position: center; }
.cabinet .scene-img { object-position: center; filter: brightness(1.03); }
.eyebrow { margin: 0 0 4px; letter-spacing: .2em; font-size: 10px; color: #96acc0; }
h1,h2,p { margin-top: 0; }
.glass-card { background:linear-gradient(145deg,rgba(255,255,255,.67),rgba(239,248,253,.51) 55%,rgba(255,232,242,.45)); border:1px solid rgba(255,255,255,.92); box-shadow:0 18px 48px rgba(95,126,150,.16),inset 0 1px 0 rgba(255,255,255,.96),inset 0 0 0 1px rgba(175,213,235,.34); backdrop-filter:blur(24px) saturate(1.06); -webkit-backdrop-filter:blur(24px) saturate(1.06); }
.entrance-vignette { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom,rgba(230,240,248,.05) 45%,rgba(225,237,246,.13) 100%); }
.entrance-intro { position:absolute; z-index:4; left:0; right:0; bottom:calc(4.8% + env(safe-area-inset-bottom)); text-align:center; color:#8498a9; text-shadow:0 1px 9px rgba(255,255,255,.95); transition:opacity .45s ease,transform .55s ease; pointer-events:none; }
.entrance-intro p:last-child { margin:3px 0 0; font-size:11px; letter-spacing:.08em; }
.entrance.login-revealed .entrance-intro { opacity:0; transform:translateY(10px); }
.sound-charm { position:absolute; z-index:12; top:calc(15px + env(safe-area-inset-top)); right:15px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.84); color:#8498aa; background:rgba(255,255,255,.36); box-shadow:0 8px 22px rgba(94,124,148,.10),inset 0 1px rgba(255,255,255,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); cursor:pointer; }
.sound-charm::after { content:""; position:absolute; inset:5px; border:1px solid rgba(190,220,238,.46); border-radius:50%; }
.sound-charm span { position:relative; z-index:1; font-family:Georgia,serif; font-size:16px; }
.sound-off { display:none; }.sound-charm.muted .sound-on{display:none}.sound-charm.muted .sound-off{display:block}
.app[data-current-screen="cabinet"]>.sound-charm,.app[data-current-screen="panel"]>.sound-charm{opacity:0;visibility:hidden;pointer-events:none}
.login-card { position:absolute; z-index:6; left:8%; right:8%; bottom:calc(3.8% + env(safe-area-inset-bottom)); border-radius:26px; padding:17px 17px 12px; opacity:0; visibility:hidden; transform:translateY(28px) scale(.97); transition:opacity .5s ease,transform .65s cubic-bezier(.2,.8,.2,1),visibility .5s; }
.entrance.login-revealed .login-card { opacity:1; visibility:visible; transform:none; }
.login-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 2px 10px; }
.login-heading>p { max-width:46%; text-align:right; margin:0 0 3px; font-size:9px; line-height:1.5; color:#8599a9; }
.login-card h1 { font-family:Georgia,serif; font-weight:500; font-style:italic; color:#768da2; font-size:25px; line-height:1; margin:0; }
.login-fields { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.login-card label { display:block; text-align:left; }
.login-card label span { display:block; font-size:9px; margin:0 0 4px 6px; color:#8095a5; }
.login-card input { width:100%; height:39px; border-radius:13px; border:1px solid rgba(187,219,237,.64); background:rgba(255,255,255,.52); padding:0 11px; outline:none; color:#60788c; font-size:11px; box-shadow:inset 0 1px 5px rgba(113,151,178,.08),0 1px rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-user-select:text; user-select:text; }
.login-card input:focus { border-color:rgba(167,211,235,.88); background:rgba(255,255,255,.58); box-shadow:0 0 0 3px rgba(184,220,239,.18),inset 0 1px 5px rgba(113,151,178,.06); }
.login-actions { display:flex; align-items:center; justify-content:space-between; margin-top:7px; padding:0 65px 0 2px; }
.login-actions p { margin:0; font-size:9px; letter-spacing:.06em; color:#7892a5; }
.primary-btn { border: 0; min-height: 45px; border-radius: 15px; padding: 0 20px; background: linear-gradient(135deg, #d9eef9, #f8dce7); color: #71879a; box-shadow: 0 8px 20px rgba(143,180,203,.22), inset 0 1px rgba(255,255,255,.9); font-weight: 650; cursor: pointer; }
.text-btn { border: 0; background: transparent; padding: 9px 15px 4px; font-size: 11px; color: #9aafbd; cursor: pointer; }
.login-actions .text-btn { padding:6px 7px; font-size:9px; }
.entrance-glow { position:absolute; z-index:5; left:50%; top:54.5%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%; opacity:0; background:radial-gradient(circle,#fff 0 18%,#f9cfe1 38%,rgba(210,235,249,.55) 58%,transparent 72%); filter:blur(7px); pointer-events:none; }
.key-stage { position:absolute; z-index:9; left:40.25%; bottom:calc(15.2% + env(safe-area-inset-bottom)); width:19.5%; aspect-ratio:932/1688; border:0; padding:0; background:transparent; cursor:pointer; transform-origin:50% 50%; transition:left .72s cubic-bezier(.2,.8,.2,1),bottom .72s cubic-bezier(.2,.8,.2,1),width .72s cubic-bezier(.2,.8,.2,1),filter .3s; filter:drop-shadow(0 10px 18px rgba(111,139,162,.17)); }
.flying-key { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; animation:keyIdle 3.4s ease-in-out infinite; filter:brightness(1.14) contrast(.91) saturate(.86); }
.key-aura { position:absolute; z-index:-1; left:50%; top:40%; width:115%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(255,255,255,.76),rgba(247,210,227,.20) 45%,transparent 70%); filter:blur(7px); animation:auraBreathe 2.8s ease-in-out infinite; }
.entrance.login-revealed .key-stage { left:75.3%; bottom:calc(4.6% + env(safe-area-inset-bottom)); width:16.2%; filter:drop-shadow(0 8px 17px rgba(108,142,167,.22)); }
.app.keyboard-open .login-card { bottom:12px; }
.app.keyboard-open .key-stage { opacity:0; pointer-events:none; }
.key-stage:focus-visible { outline:2px solid rgba(171,214,236,.75); outline-offset:5px; border-radius:45%; }
.key-stage:active { filter:drop-shadow(0 0 19px rgba(248,190,217,.82)); }
.key-spark { position:absolute; width:5px; height:5px; border-radius:50%; background:white; box-shadow:0 0 8px 2px rgba(248,198,220,.8); opacity:0; }
.spark-one{left:5%;top:28%;animation:spark 2.9s .2s infinite}.spark-two{right:4%;top:19%;animation:spark 3.2s 1.1s infinite}.spark-three{right:13%;top:55%;animation:spark 2.7s 1.8s infinite}
.entrance.unlocking .key-stage { pointer-events:none; }
.entrance.unlocking .login-card { opacity:0; transform:translateY(15px) scale(.98); }
.entrance.unlocking .entrance-glow { animation:lockGlow 1.35s .58s ease forwards; }
.white-flash { position:absolute; inset:0; z-index:9; background:#fff; opacity:0; pointer-events:none; }
.entrance.unlocking .white-flash { animation:flash .72s 1.32s ease forwards; }
@keyframes keyIdle { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-9px) rotate(2.5deg)} }
@keyframes auraBreathe { 0%,100%{opacity:.42;transform:translate(-50%,-50%) scale(.86)} 50%{opacity:.82;transform:translate(-50%,-50%) scale(1.12)} }
@keyframes spark { 0%,52%,100%{opacity:0;transform:scale(.4)} 67%{opacity:1;transform:scale(1)} 82%{opacity:0;transform:translateY(-10px) scale(.4)} }
@keyframes lockGlow { 0%{opacity:0;transform:scale(.25)} 45%{opacity:.95} 100%{opacity:0;transform:scale(5.5)} }
@keyframes flash { 0%{opacity:0} 48%{opacity:.98} 100%{opacity:0} }

.room::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom,rgba(241,248,252,.08),transparent 30%,transparent 75%,rgba(238,246,251,.11)); }
.room-header { position:absolute; z-index:6; left:21px; right:62px; top:calc(21px + env(safe-area-inset-top)); display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; }
.room-header .eyebrow { margin-bottom:5px; color:#8199ab; text-shadow:0 1px 8px rgba(255,255,255,.95); }
.room-header h2 { margin:0; font-size:17px; font-weight:620; color:#61788c; letter-spacing:.02em; text-shadow:0 1px 10px rgba(255,255,255,1),0 2px 18px rgba(255,255,255,.9); }
.key-pill { pointer-events:auto; min-height:34px; border:1px solid rgba(255,255,255,.86); background:linear-gradient(135deg,rgba(255,255,255,.53),rgba(246,225,235,.43)); border-radius:999px; padding:6px 10px; display:flex; align-items:center; gap:4px; box-shadow:0 8px 22px rgba(113,151,179,.12),inset 0 1px rgba(255,255,255,.9); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); font-size:10px; }
.key-pill span { color:#e6a9c7; text-shadow:0 0 8px rgba(247,184,214,.7); animation:keyPillGlow 2.8s ease-in-out infinite; }
.key-pill b{font-size:14px;line-height:1}.key-pill small{font-size:8px;font-weight:500;color:#8398a8}
.room-guide { position:absolute; z-index:5; left:0; right:0; bottom:calc(3.5% + env(safe-area-inset-bottom)); margin:0; text-align:center; font-size:9px; letter-spacing:.16em; color:#8299aa; text-shadow:0 1px 10px white; animation:guideFade 5.8s .7s both; pointer-events:none; }
.hotspot { position:absolute; z-index:4; border:0; background:transparent; cursor:pointer; padding:0; transition:transform .25s ease,filter .25s ease; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.hotspot::before { content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px; border-radius:50%; background:rgba(255,255,255,.8); box-shadow:0 0 10px 3px rgba(248,200,220,.48),0 0 22px 8px rgba(197,226,242,.28); opacity:0; animation:objectSignal 9.6s var(--signal-delay,0s) infinite; pointer-events:none; }
.hotspot::after { content:""; position:absolute; inset:8%; border:0; border-radius:50%; opacity:0; background:radial-gradient(ellipse,rgba(255,255,255,.64),rgba(247,207,226,.18) 42%,rgba(201,228,243,.10) 58%,transparent 72%); filter:blur(5px); transition:opacity .25s,transform .3s; pointer-events:none; }
.hotspot:active,.hotspot.activated { transform:translateY(-3px) scale(1.025); filter:drop-shadow(0 0 12px rgba(255,255,255,.7)); }
.hotspot:active::after,.hotspot:hover::after,.hotspot:focus-visible::after,.hotspot.activated::after { opacity:1; transform:scale(1.12); }
.hotspot span { position:absolute; left:50%; transform:translateX(-50%) translateY(4px); bottom:-25px; white-space:nowrap; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.48); border:1px solid rgba(255,255,255,.82); box-shadow:0 6px 16px rgba(99,127,149,.10),inset 0 1px white; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:9px; opacity:0; transition:.22s; pointer-events:none; }
.hotspot:hover span,.hotspot:focus-visible span,.hotspot.activated span { opacity:1; transform:translateX(-50%) translateY(0); }
.cabinet-hotspot { left:0; top:29%; width:33%; height:30%; }
.carousel-hotspot { right:7%; top:38%; width:31%; height:21%; }
.envelope-hotspot { left:12%; top:63%; width:25%; height:17%; }
.album-hotspot { left:37%; top:63%; width:16%; height:17%; }
.folder-hotspot { left:53%; top:62%; width:20%; height:18%; }
.frame-hotspot { right:4%; top:62%; width:23%; height:18%; }
.guide-spark { position:absolute; z-index:2; left:50%; top:50%; width:4px; height:4px; margin:-2px; border-radius:1px; background:rgba(255,255,255,.96); box-shadow:0 0 7px 2px rgba(246,189,219,.65),0 0 12px 4px rgba(190,225,244,.38); opacity:0; transform:translate(var(--spark-x),var(--spark-y)) rotate(45deg) scale(.15); animation:guideSpark 9.6s calc(var(--signal-delay,0s) + var(--spark-delay,0s)) infinite; pointer-events:none; }
.tap-ripple { position:absolute; z-index:8; width:16px; height:16px; margin:-8px; border-radius:50%; border:1px solid rgba(255,255,255,.95); box-shadow:0 0 14px rgba(246,196,220,.7),inset 0 0 8px rgba(198,228,244,.65); pointer-events:none; animation:tapRipple .65s ease-out forwards; }
.burst-spark { position:absolute; z-index:9; width:5px; height:5px; margin:-2.5px; border-radius:1px; background:#fff; box-shadow:0 0 8px 2px rgba(248,187,218,.72),0 0 14px 4px rgba(190,226,246,.44); pointer-events:none; transform:rotate(45deg); animation:burstSpark .78s var(--burst-delay,0s) cubic-bezier(.18,.72,.26,1) forwards; }
@keyframes objectSignal{0%,7%,100%{opacity:0;transform:scale(.35)}2.5%{opacity:.9;transform:scale(1)}5%{opacity:0;transform:scale(2.6)}}
@keyframes guideSpark{0%,1%,8%,100%{opacity:0}2.2%{opacity:.95;transform:translate(var(--spark-x),var(--spark-y)) rotate(45deg) scale(.5)}4.2%{opacity:.9;transform:translate(var(--spark-x2),var(--spark-y2)) rotate(135deg) scale(1.15)}6.7%{opacity:0;transform:translate(var(--spark-x3),var(--spark-y3)) rotate(225deg) scale(.2)}}
@keyframes tapRipple{to{opacity:0;transform:scale(5)}}
@keyframes burstSpark{0%{opacity:0;transform:translate(0,0) rotate(45deg) scale(.1)}20%{opacity:1;transform:translate(var(--burst-x1),var(--burst-y1)) rotate(90deg) scale(1)}100%{opacity:0;transform:translate(var(--burst-x),var(--burst-y)) rotate(180deg) scale(.2)}}
@keyframes guideFade{0%{opacity:0;transform:translateY(5px)}15%,68%{opacity:.82;transform:none}100%{opacity:0}}
@keyframes keyPillGlow{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
.bottom-nav { position:absolute; z-index:5; left:13px; right:13px; bottom:calc(12px + env(safe-area-inset-bottom)); height:67px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; padding:6px; border-radius:23px; background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.95); box-shadow:0 13px 35px rgba(92,122,145,.18); backdrop-filter:blur(16px); }
.bottom-nav button { border:0; background:transparent; display:flex; flex-direction:column; gap:2px; align-items:center; font-size:9px; opacity:.65; cursor:pointer; }
.bottom-nav button.active, .bottom-nav button:hover { opacity:1; }
.mini-icon { width:25px; height:25px; display:block; background-image:url('./assets/icons.png'); background-size:200% 400%; border-radius:9px; mix-blend-mode:multiply; }
.icon-home{background-position:100% 100%}.icon-gift{background-position:0 33.333%}.icon-book{background-position:0 100%}.icon-profile{background-position:100% 0}

.loading-stage { position:absolute; inset:0; z-index:20; visibility:hidden; opacity:0; transition:.35s; display:grid; place-items:center; }
.loading-stage.show { visibility:visible; opacity:1; }
.loading-stage::before { content:""; position:absolute; z-index:1; left:50%; top:47%; width:68%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(255,255,255,.66),rgba(247,210,228,.16) 42%,rgba(202,229,244,.12) 58%,transparent 72%); filter:blur(8px); opacity:0; }
.loading-stage.show::before{animation:loadingAura 2.15s .35s ease forwards}
.loading-haze,.modal-haze { position:absolute; inset:0; background:rgba(233,242,247,.42); backdrop-filter:blur(11px) brightness(1.04); -webkit-backdrop-filter:blur(11px) brightness(1.04); }
.loading-carousel { position:relative; z-index:2; width:47%; transform:translate(29vw,-12vh) scale(.42); opacity:0; filter:drop-shadow(0 20px 35px rgba(108,142,166,.22)); }
.loading-stage.show .loading-carousel { animation:carouselFly 2.15s cubic-bezier(.2,.8,.24,1) forwards; }
.loading-copy { position:absolute; z-index:3; top:67%; text-align:center; opacity:0; }
.loading-stage.show .loading-copy { animation:fadeUp .8s .7s forwards; }
.loading-copy p { margin:0 0 5px; letter-spacing:.12em; font-size:13px; }
.loading-copy span { font-size:10px; color:#9aacb9; }
@keyframes carouselFly { 0%{transform:translate(29vw,-12vh) scale(.45);opacity:0} 26%{opacity:1} 70%{transform:translate(0,-3vh) scale(1) rotate(0)} 100%{transform:translate(0,-3vh) scale(1) rotate(360deg);opacity:1} }
@keyframes fadeUp { to{opacity:1;transform:translateY(-8px)} }
@keyframes loadingAura{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}55%{opacity:.9}100%{opacity:.45;transform:translate(-50%,-50%) scale(1.12)}}

.screen-shade { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(245,250,253,.45), transparent 25%, transparent 65%, rgba(238,246,250,.62)); }
.cabinet-header,.panel-header { position:absolute; z-index:4; top:calc(17px + env(safe-area-inset-top)); left:15px; right:15px; display:flex; align-items:center; gap:12px; }
.cabinet-header>div:nth-child(2),.panel-header>div { flex:1; }
.cabinet-header p { margin:0; font-size:9px; letter-spacing:.16em; color:#9bafbd; }
.cabinet-header h2,.panel-header h2 { margin:2px 0 0; font-size:18px; }
.round-btn { width:43px; height:43px; border-radius:50%; border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.78); box-shadow:0 8px 22px rgba(100,131,153,.15); font-size:31px; line-height:1; cursor:pointer; }
.round-counter { width:49px; height:49px; border-radius:50%; background:rgba(255,255,255,.8); border:1px solid white; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(101,132,154,.15); }
.round-counter b { font-size:16px; line-height:1; }.round-counter span{font-size:8px;margin-top:3px}
.drawer-grid { position:absolute; z-index:4; left:18.6%; right:18.2%; top:25.2%; bottom:24.4%; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,1fr); column-gap:5.8%; row-gap:3.8%; perspective:700px; }
.drawer { border:0; border-radius:9px; background:transparent; position:relative; cursor:default; transition:filter .32s ease,transform .32s ease; isolation:isolate; }
.drawer::before { content:""; position:absolute; inset:4px 5px 3px; border-radius:8px; opacity:0; background:transparent; border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 0 9px rgba(255,255,255,.18); transition:opacity .28s ease,transform .38s ease,box-shadow .35s ease,border-color .35s ease; z-index:-1; }
.drawer::after { content:""; position:absolute; right:11%; top:43%; width:17px; height:17px; border-radius:50%; opacity:0; background:radial-gradient(circle,rgba(255,255,255,.95),rgba(247,196,221,.36) 33%,rgba(194,227,245,.24) 52%,transparent 72%); filter:blur(1px); transition:opacity .3s ease,transform .38s ease; }
.drawer-number { position:absolute; left:50%; bottom:5px; min-width:24px; transform:translateX(-50%); text-align:center; font:500 8px/1.35 "Avenir Next",Arial,sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.08em; color:rgba(101,127,146,.48); text-shadow:0 1px rgba(255,255,255,.92); }
.drawer-mark { position:absolute; left:50%; top:12%; transform:translateX(-50%) scale(.3); color:rgba(255,255,255,.95); font-size:11px; opacity:0; text-shadow:0 0 7px #efb7d1,0 0 12px #b7ddf1; transition:.35s ease; }
.drawer.flash { transform:translateY(-1px) scale(1.012); filter:drop-shadow(0 0 7px rgba(255,255,255,.72)); }
.drawer.flash::before { opacity:1; border-color:rgba(255,255,255,.72); box-shadow:0 0 13px 3px rgba(246,190,218,.40),0 0 22px 6px rgba(188,224,244,.27),inset 0 0 13px rgba(255,255,255,.48); }
.drawer.flash::after,.drawer.chosen::after { opacity:1; transform:scale(1.2); }
.drawer.chosen { transform:translateY(-2px) scale(1.025); filter:drop-shadow(0 0 11px rgba(246,191,218,.58)); }
.drawer.chosen::before { opacity:1; animation:chosenDoorGlow 1s ease-in-out infinite alternate; }
.drawer.opened::before { opacity:.55; border-color:rgba(207,233,246,.62); box-shadow:inset 0 0 10px rgba(219,239,249,.40); }
.drawer.opened .drawer-mark { opacity:.74; transform:translateX(-50%) scale(1); }
.cabinet-key-stage { position:absolute; z-index:6; left:1.8%; top:22.8%; width:15.5%; aspect-ratio:932/1688; pointer-events:none; filter:drop-shadow(0 8px 14px rgba(108,139,161,.20)); transform-origin:center; animation:cabinetKeyIdle 3s ease-in-out infinite; }
.cabinet-key-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:brightness(1.14) contrast(.91) saturate(.86); }
.cabinet-key-aura { position:absolute; left:50%; top:31%; width:145%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.84),rgba(247,201,223,.29) 38%,rgba(196,227,244,.16) 55%,transparent 72%); filter:blur(5px); animation:auraBreathe 2.4s ease-in-out infinite; }
.cabinet-key-stage i { position:absolute; width:4px; height:4px; border-radius:1px; background:#fff; box-shadow:0 0 8px 2px rgba(246,191,218,.74),0 0 13px 4px rgba(194,226,244,.40); transform:rotate(45deg); animation:cabinetKeySpark 2.6s infinite; }
.cabinet-key-stage i:nth-of-type(1){left:4%;top:16%}.cabinet-key-stage i:nth-of-type(2){right:-2%;top:31%;animation-delay:.8s}.cabinet-key-stage i:nth-of-type(3){left:22%;top:55%;animation-delay:1.6s}
.cabinet-key-stage.searching { animation:none; filter:drop-shadow(0 0 16px rgba(247,190,218,.65)); }
.cabinet-controls { position:absolute; z-index:7; left:7%; right:7%; bottom:calc(17px + env(safe-area-inset-bottom)); border-radius:23px; padding:13px 15px 14px; text-align:center; background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(235,247,252,.35) 55%,rgba(255,225,238,.34)); }
.cabinet-controls p { margin:0 0 10px; font-size:11px; color:#8ea0ad; }
.cabinet-controls .primary-btn { width:100%; }
@keyframes cabinetKeyIdle{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes cabinetKeySpark{0%,58%,100%{opacity:0;transform:rotate(45deg) scale(.2)}70%{opacity:1;transform:rotate(135deg) scale(1)}84%{opacity:0;transform:translateY(-9px) rotate(225deg) scale(.35)}}
@keyframes chosenDoorGlow{from{box-shadow:0 0 17px 5px rgba(249,198,222,.55),0 0 26px 8px rgba(196,228,245,.28),inset 0 0 15px rgba(255,255,255,.7)}to{box-shadow:0 0 27px 9px rgba(249,198,222,.70),0 0 38px 12px rgba(196,228,245,.42),inset 0 0 23px rgba(255,255,255,.94)}}

.panel-screen { background:#edf4f8; }
.panel-screen::before { content:""; position:absolute; inset:-18px; background:url('./assets/room.png') center/cover no-repeat; filter:blur(11px) saturate(.82) brightness(1.04); transform:scale(1.06); opacity:.72; }
.soft-bg { position:absolute; inset:0; background:radial-gradient(circle at 80% 8%,rgba(251,211,228,.30),transparent 34%),radial-gradient(circle at 8% 52%,rgba(203,231,246,.34),transparent 42%),linear-gradient(rgba(246,250,252,.30),rgba(237,246,250,.50)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.panel-header { padding:10px; border-radius:20px; background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(241,248,252,.20)); border:1px solid rgba(255,255,255,.62); box-shadow:0 13px 32px rgba(88,121,145,.11),inset 0 1px rgba(255,255,255,.78),inset 0 -1px rgba(188,218,235,.18); backdrop-filter:blur(24px) saturate(1.12); -webkit-backdrop-filter:blur(24px) saturate(1.12); }
.panel-content { position:absolute; z-index:3; top:105px; left:15px; right:15px; bottom:92px; overflow:auto; padding:3px; }
.content-card { position:relative; background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(238,247,252,.17)); border:1px solid rgba(255,255,255,.60); border-radius:23px; padding:17px; margin-bottom:12px; box-shadow:0 15px 34px rgba(86,119,143,.12),inset 0 1px rgba(255,255,255,.84),inset 0 -1px rgba(178,211,231,.16); backdrop-filter:blur(25px) saturate(1.15); -webkit-backdrop-filter:blur(25px) saturate(1.15); }
.content-card h3 { margin:0 0 4px; font-size:15px; }.content-card p{margin:0;font-size:11px;color:#98a7b2;line-height:1.7}
.reward-row { display:grid; grid-template-columns:45px 1fr auto; gap:12px; align-items:center; }
.sprite-icon { width:45px;height:45px;border-radius:15px;background-image:url('./assets/icons.png');background-size:200% 400%;background-position:0 33.333%;box-shadow:inset 0 0 0 1px rgba(205,226,239,.6); }
.status { font-size:9px;padding:5px 8px;border-radius:999px;background:rgba(241,249,252,.34);border:1px solid rgba(255,255,255,.55);color:#7898aa;box-shadow:inset 0 1px rgba(255,255,255,.75);backdrop-filter:blur(12px); }
.profile-hero { min-height:270px; overflow:hidden; text-align:center; padding-top:50px; }
.profile-hero::before { content:""; position:absolute; width:230px; height:230px; left:50%; top:-80px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.70),rgba(246,210,228,.20) 37%,rgba(200,229,245,.12) 57%,transparent 72%); filter:blur(4px); }
.profile-hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.24) 42%,transparent 56%); transform:translateX(-110%); animation:glassSheen 6s 1.2s ease-in-out infinite; }
.profile-hero>*{position:relative;z-index:1}.profile-avatar{width:78px;height:78px;margin:0 auto 11px;border-radius:50%;background:linear-gradient(135deg,rgba(215,237,249,.90),rgba(250,211,228,.86));border:1px solid rgba(255,255,255,.92);box-shadow:0 12px 28px rgba(98,133,158,.16),inset 0 1px rgba(255,255,255,.98),inset 0 -7px 18px rgba(195,221,238,.18);outline:5px solid rgba(255,255,255,.28);backdrop-filter:blur(18px)}
.profile-avatar{background-size:cover;background-position:center}.profile-editor label{display:block;font-size:10px;color:#8ba0af;margin-top:10px}.profile-editor input{width:100%;height:38px;margin-top:5px;padding:0 12px;border:1px solid rgba(255,255,255,.68);border-radius:13px;background:rgba(255,255,255,.35);color:#74899a;outline:none}.profile-save,.admin-entry{display:block;width:100%;margin-top:10px;padding:11px;border-radius:14px;border:1px solid rgba(255,255,255,.72);background:linear-gradient(135deg,rgba(216,240,251,.64),rgba(251,220,235,.60));color:#70889a;text-align:center;text-decoration:none;font-size:11px}.admin-entry{background:rgba(255,255,255,.34)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:17px}.stat-grid div{padding:11px 4px;border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(222,241,250,.15));border:1px solid rgba(255,255,255,.52);box-shadow:inset 0 1px rgba(255,255,255,.78);backdrop-filter:blur(14px)}.stat-grid b{display:block;font-size:16px}.stat-grid span{font-size:9px;color:#829dab}
.panel-nav { background:linear-gradient(145deg,rgba(255,255,255,.32),rgba(232,244,250,.18));border-color:rgba(255,255,255,.62);box-shadow:0 16px 35px rgba(89,121,145,.14),inset 0 1px rgba(255,255,255,.82);backdrop-filter:blur(25px) saturate(1.12);-webkit-backdrop-filter:blur(25px) saturate(1.12); }
@keyframes glassSheen{0%,62%,100%{transform:translateX(-110%);opacity:0}72%{opacity:.75}86%{transform:translateX(110%);opacity:0}}

.reward-modal { position:absolute; inset:0; z-index:30; opacity:0; visibility:hidden; transition:.38s; display:grid; place-items:center; }
.reward-modal.show { opacity:1; visibility:visible; }
.reward-card { width:82%; min-height:53%; max-height:68%; position:relative; border-radius:34px; padding:96px 28px 26px; overflow:visible; background:linear-gradient(145deg,rgba(255,255,255,.47),rgba(231,246,253,.29) 54%,rgba(255,219,237,.27)); border:1px solid rgba(255,255,255,.78); box-shadow:0 28px 60px rgba(86,118,142,.18),inset 0 1px rgba(255,255,255,.96),inset 0 -1px rgba(179,214,233,.18); backdrop-filter:blur(30px) saturate(1.12); -webkit-backdrop-filter:blur(30px) saturate(1.12); animation:glassCondense .72s cubic-bezier(.2,.82,.24,1.08); }
.reward-card::before { content:""; position:absolute; inset:10px; border-radius:26px; border:1px solid rgba(255,255,255,.42); box-shadow:inset 0 0 20px rgba(255,255,255,.20); pointer-events:none; }
.reward-card::after { content:""; position:absolute; inset:0; border-radius:34px; background:linear-gradient(112deg,transparent 24%,rgba(255,255,255,.34) 41%,transparent 58%); transform:translateX(-120%); animation:rewardSheen 4.8s 1s ease-in-out infinite; pointer-events:none; overflow:hidden; }
.reward-ornament { position:absolute; z-index:3; width:82%; left:9%; top:-49px; filter:drop-shadow(0 12px 19px rgba(115,143,164,.13)); animation:ornamentSettle .85s .12s cubic-bezier(.2,.85,.26,1.1) both; }
.reward-glow { position:absolute; left:50%; top:22px; width:72%; aspect-ratio:1.7; transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(255,255,255,.82),rgba(247,202,224,.20) 43%,rgba(193,225,244,.12) 62%,transparent 75%); filter:blur(9px); }
.reward-copy { position:relative; z-index:2; text-align:center; }
.reward-copy .eyebrow { letter-spacing:.24em; }
.reward-symbol { width:70px;height:70px;border-radius:50%;margin:17px auto 14px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,220,236,.68),rgba(220,241,251,.58));border:1px solid rgba(255,255,255,.76);font-size:34px;color:#fff;text-shadow:0 2px 7px rgba(118,152,176,.15);box-shadow:0 12px 28px rgba(129,164,188,.14),inset 0 1px white;backdrop-filter:blur(12px)}
.reward-copy h2 { margin:0 0 9px;font-size:23px;color:#71889b}.reward-copy p{font-size:11px;margin:0 0 6px}.reward-copy small{font-size:9px;color:#9fadb7}
.reward-confirm { position:absolute; z-index:4; left:10%; right:10%; bottom:20px; width:80%; min-height:47px; border:1px solid rgba(255,255,255,.72); background:linear-gradient(135deg,rgba(215,239,251,.68),rgba(251,217,233,.64)); backdrop-filter:blur(15px); }
.reward-spark { position:absolute; z-index:4; width:6px; height:6px; border-radius:1px; background:#fff; box-shadow:0 0 9px 2px rgba(245,186,216,.68),0 0 15px 4px rgba(186,222,243,.38); transform:rotate(45deg); animation:rewardSpark 3.2s infinite; }
.rs-one{left:11%;top:31%;animation-delay:.2s}.rs-two{right:10%;top:46%;animation-delay:1.2s}.rs-three{left:18%;bottom:18%;animation-delay:2.1s}
@keyframes glassCondense{from{transform:translateY(34px) scale(.88);opacity:0;filter:blur(9px)}to{transform:none;opacity:1;filter:none}}
@keyframes ornamentSettle{from{transform:translateY(-22px) scale(.84);opacity:0}to{transform:none;opacity:1}}
@keyframes rewardSheen{0%,58%,100%{transform:translateX(-120%);opacity:0}69%{opacity:.65}84%{transform:translateX(120%);opacity:0}}
@keyframes rewardSpark{0%,62%,100%{opacity:0;transform:rotate(45deg) scale(.2)}72%{opacity:1;transform:rotate(135deg) scale(1)}86%{opacity:0;transform:translateY(-10px) rotate(225deg) scale(.25)}}
@media (min-width:481px){body{padding:20px 0}.app{height:calc(100dvh - 40px);border-radius:30px}}
@media (max-height:720px){.login-card{bottom:calc(2% + env(safe-area-inset-bottom));padding:13px 15px 9px}.login-card h1{font-size:22px}.login-card input{height:35px}.entrance.login-revealed .key-stage{bottom:calc(3% + env(safe-area-inset-bottom))}.login-heading{margin-bottom:7px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}