:root{--line:rgba(169,198,224,.2);--blue:#76b8ff;--text:#edf6ff;--muted:#8c9baa;--font:"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}html,body{width:100%;height:100%;overflow:hidden;background:#050a10;color:var(--text);font-family:var(--font)}button{font:inherit}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center;overflow:hidden;background:radial-gradient(ellipse at 52% 45%,rgba(126,157,181,.28),transparent 33%),linear-gradient(90deg,rgba(4,9,14,.98),rgba(12,21,29,.78) 26%,rgba(17,28,37,.69) 52%,rgba(7,13,19,.96)),url("assets/bg/room-poster.webp") center/cover}
#stage:before{content:"";position:absolute;inset:72px 0 0;background:linear-gradient(90deg,rgba(3,8,12,.66),transparent 28% 70%,rgba(3,8,12,.68));pointer-events:none}#stage:after{content:"";position:absolute;left:520px;right:510px;bottom:32px;height:300px;border-radius:50%;border:1px solid rgba(138,177,210,.22);background:radial-gradient(ellipse,rgba(132,164,190,.18),transparent 64%);box-shadow:0 -12px 60px rgba(134,176,209,.12);transform:perspective(500px) rotateX(67deg)}
header{height:72px;position:absolute;z-index:30;inset:0 0 auto;display:flex;align-items:center;padding:0 30px;border-bottom:1px solid rgba(164,194,219,.14);background:rgba(3,8,13,.68);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:15px}.mark{width:43px;height:43px;display:grid;place-items:center;border:1px solid #60778b;clip-path:polygon(50% 0,92% 23%,86% 77%,50% 100%,14% 77%,8% 23%);color:#b9d4eb;font-weight:700;font-size:20px;background:rgba(119,160,193,.12)}.brand strong{display:block;font-size:20px;letter-spacing:2px}.brand small{display:block;margin-top:3px;font-size:10px;letter-spacing:2px;color:#9aaaba}.head-actions{margin-left:auto;display:flex;gap:14px}.head-actions button,.home{height:40px;padding:0 18px;border-radius:8px;border:1px solid var(--line);background:rgba(15,25,34,.58);color:#b7c5d1;cursor:pointer}.home{text-decoration:none;display:flex;align-items:center}.head-actions button:hover,.home:hover{border-color:rgba(118,184,255,.6);color:#fff}
.panel{position:absolute;top:88px;bottom:72px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(23,34,44,.83),rgba(7,14,21,.79));box-shadow:inset 0 1px rgba(255,255,255,.04),0 20px 60px rgba(0,0,0,.24);backdrop-filter:blur(14px);z-index:8}.panel h2{font-weight:500;font-size:20px;letter-spacing:1px}.panel h2 small{display:block;margin-top:5px;font-size:11px;font-weight:400;letter-spacing:1px;color:#758391}
#collections{left:18px;width:475px;padding:26px 32px;display:flex;flex-direction:column}.collection-list{margin-top:28px;display:flex;flex:1;flex-direction:column;gap:10px}.collection{position:relative;flex:1;min-height:95px;display:grid;grid-template-columns:125px 1fr 30px;align-items:center;overflow:hidden;border:1px solid rgba(152,180,204,.18);border-radius:12px;background:linear-gradient(105deg,rgba(52,68,81,.48),rgba(18,28,37,.58));color:#cbd5de;cursor:pointer;transition:.25s}.collection:hover,.collection.on{transform:translateX(3px);border-color:rgba(118,184,255,.85);box-shadow:0 0 0 1px rgba(92,153,235,.55),0 0 24px rgba(64,135,222,.24)}.collection img{max-width:110px;max-height:90px;margin:auto;filter:drop-shadow(0 8px 12px #0008)}.collection span{font-size:17px;text-align:left}.collection span small{display:block;margin-top:7px;color:#82909c;font-size:10px;letter-spacing:1px}.collection b{font-weight:300;font-size:28px;color:#697b8a}
#outfits{right:18px;width:470px;padding:26px 18px 20px}.outfit-title{padding:0 12px}.outfit-list{height:780px;margin-top:23px;display:flex;flex-direction:column;gap:10px;overflow:auto;padding:0 4px}.outfit-list::-webkit-scrollbar{width:4px}.outfit-list::-webkit-scrollbar-thumb{background:#33485b;border-radius:9px}.outfit{position:relative;width:100%;min-height:132px;display:grid;grid-template-columns:132px 1fr;overflow:hidden;border:1px solid rgba(155,183,205,.18);border-radius:12px;background:linear-gradient(110deg,rgba(65,81,94,.45),rgba(13,22,30,.74));color:inherit;text-align:left;cursor:pointer;transition:.25s}.outfit:hover,.outfit:focus-visible{transform:translateX(-3px);border-color:rgba(111,174,245,.72);outline:0}.outfit.on{border-color:#6faef5;box-shadow:0 0 0 1px rgba(101,163,235,.8),0 0 25px rgba(60,130,215,.25)}.outfit img{width:132px;height:132px;object-fit:contain;padding:10px;background:radial-gradient(circle,rgba(110,143,171,.24),transparent 66%)}.outfit-copy{padding:18px 14px}.outfit-copy strong{display:block;font-size:18px;font-weight:500}.outfit-copy small{display:block;margin-top:8px;color:#91a0ad;font-size:12px}
#viewer{position:absolute;z-index:5;left:510px;right:505px;top:78px;bottom:72px}#person{position:absolute;left:50%;bottom:70px;width:500px;height:850px;transform:translateX(-50%);display:flex;align-items:flex-end;justify-content:center;z-index:3;cursor:grab;touch-action:none}#person:active{cursor:grabbing}#person img{max-height:820px;max-width:500px;pointer-events:none;filter:drop-shadow(0 14px 18px #0006)}#person.scanning img{animation:scanperson .75s steps(2) 2}@keyframes scanperson{50%{filter:brightness(1.6) drop-shadow(0 0 25px #71b9ff)}}.scan{position:absolute;left:50%;top:125px;width:500px;height:2px;transform:translateX(-50%);z-index:5;opacity:0;background:linear-gradient(90deg,transparent,#9ed1ff,transparent);box-shadow:0 0 18px #55aaff}#person.scanning+.scan{opacity:1;animation:scan 1.35s ease-in-out}@keyframes scan{from{top:150px}to{top:855px}}
.analysis{position:absolute;right:18px;top:155px;width:185px;padding:22px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(25,37,47,.54);backdrop-filter:blur(14px)}.analysis h3{font-size:16px;font-weight:500}.analysis h3 small{display:block;margin-top:4px;font-size:10px;color:#82909c}.metric{display:grid;grid-template-columns:40px 1fr;align-items:center;margin-top:28px}.metric i{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(169,198,224,.22);border-radius:50%;font-style:normal;color:#b9cee0}.metric small{display:block;color:#8c9ba8;font-size:10px}.metric strong{display:block;margin-top:4px;color:#cce3f6;font-size:18px;font-weight:400}
.identity{position:absolute;z-index:5;left:50%;bottom:18px;transform:translateX(-50%);text-align:center}.identity strong{font-size:20px;font-weight:400}.identity small{display:block;margin-top:8px;color:#a9bdcc}
#continue{position:absolute;z-index:35;left:50%;bottom:14px;transform:translateX(-50%);height:48px;padding:0 32px;border:1px solid rgba(113,180,255,.65);border-radius:8px;background:linear-gradient(135deg,rgba(67,135,218,.72),rgba(32,84,149,.72));box-shadow:0 0 28px rgba(62,135,222,.25);color:#fff;letter-spacing:2px;cursor:pointer}#continue:hover{box-shadow:0 0 38px rgba(75,155,248,.45)}#steps{position:absolute;right:30px;bottom:24px;z-index:35;display:flex;align-items:center;gap:8px;color:#748491;font-size:11px}#steps b{width:22px;height:22px;border:1px solid #506477;border-radius:50%;display:inline-grid;place-items:center;font-weight:400}#steps .on{color:#9fcfff}#steps .on b{border-color:#71b4ff;background:rgba(76,146,225,.22)}#steps i{width:34px;height:1px;background:#354553}#toast{position:absolute;z-index:60;left:50%;bottom:80px;transform:translate(-50%,20px);opacity:0;padding:14px 28px;border:1px solid rgba(112,181,255,.55);border-radius:8px;background:rgba(7,19,31,.92);color:#dcefff;transition:.25s}#toast.show{opacity:1;transform:translate(-50%,0)}