:root{--ink:#071522;--panel:#0c1d2d;--line:#244259;--text:#e9f8fb;--muted:#8eaebd;--aqua:#58e6ec;--cyan:#24aecd;--phone:414px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(900px 620px at 92% 0,#154d67 0,transparent 62%),linear-gradient(145deg,#06131e,#091b29 50%,#040c16);color:var(--text);font:14px Inter,ui-sans-serif,system-ui,"PingFang SC",sans-serif}button,input,select{font:inherit}.app-shell{max-width:1420px;margin:auto;padding:28px 24px 50px}.topbar{display:flex;align-items:center;gap:11px;margin:0 0 24px;color:#eaf9fd}.topbar strong,.topbar span{display:block}.topbar strong{letter-spacing:.02em;font-size:17px}.topbar span{font-size:11px;color:#78a7b9;margin-top:2px}.brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:conic-gradient(from 210deg,#2baec8,#79fff4,#216e99,#2baec8);color:#032c3c;font-size:18px;box-shadow:0 0 23px #29d6d550}.topbar em{margin-left:auto;border:1px solid #2e6c7f;color:#8ce7e7;border-radius:99px;padding:5px 9px;font-style:normal;font-size:10px;letter-spacing:.08em}.workspace{display:grid;grid-template-columns:minmax(430px,1.1fr) minmax(450px,.9fr);gap:28px;align-items:start}.panel{border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#102638e8,#07131fe8);box-shadow:0 22px 54px #0007}.controls{overflow:hidden}.panel-title{display:flex;padding:21px 22px;border-bottom:1px solid var(--line);align-items:center}.panel-title h1{font-size:17px;margin:0 0 4px}.panel-title p{font-size:12px;color:var(--muted);margin:0}.icon-button{margin-left:auto;width:32px;height:32px;border-radius:9px;border:1px solid #315a70;background:#123146;color:#bde6ee;font-size:15px}.control-body{padding:18px 22px 22px}.config-section{padding:17px 0;border-top:1px solid #203b4c}.config-section:first-child{border-top:0;padding-top:0}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.section-head h2{font-size:13px;margin:0;color:#dbf7fa}.section-head span{color:#68b9c4;font-size:10px}.small-btn,.sku-tools button{border:1px solid #2c5d70;border-radius:7px;background:#123044;color:#cef5f6;padding:6px 8px;font-weight:700;font-size:11px}.image-upload{display:grid;grid-template-columns:67px 1fr;align-items:center;gap:10px;background:#071722;border:1px dashed #37677a;border-radius:11px;padding:7px}.image-upload img{width:67px;height:55px;object-fit:contain;border-radius:7px;background:#0e2835}.image-upload span{font-size:12px;color:#bfe6e9}.image-upload input,.sku-tools input{display:none}.card-list{display:grid;gap:8px}.sku-card{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;padding:7px;background:#071722;border:1px solid #1e4052;border-radius:10px}.sku-thumb{width:52px;height:61px;border-radius:6px;object-fit:contain;background:#1f3b47}.sku-fields{display:grid;gap:5px}.sku-fields input,.field select{min-width:0;width:100%;border-radius:7px;border:1px solid #285167;background:#0b202e;color:#e8f8fb;padding:7px 8px;outline:0;font-size:12px}.sku-fields input:focus,.field select:focus{border-color:#57d9dc;box-shadow:0 0 0 3px #4bd9d51c}.sku-tools{display:grid;grid-template-columns:repeat(2,28px);gap:4px}.sku-tools label{display:grid;place-items:center;height:27px;border:1px solid #2c5d70;border-radius:7px;background:#123044;color:#cef5f6;cursor:pointer;font-size:14px}.sku-tools button{width:28px;height:27px;padding:0}.sku-tools .danger{color:#ff9d9d;border-color:#754649}.field{display:grid;gap:6px;color:#a9c7d0;font-size:11px}.hint{margin:8px 0 0;color:#668f9d;line-height:1.45;font-size:11px}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.action-row{display:flex;gap:9px}.action-row button{flex:1;border-radius:10px;padding:11px 9px;font-weight:800}.primary{border:0;background:linear-gradient(135deg,#48e1de,#2597c5);color:#02232e;box-shadow:0 9px 21px #24b9cd3d}.secondary{border:1px solid #3a6172;background:#10283a;color:#bfe4eb}.storage-note{font-size:10px;color:#678c99;line-height:1.5;margin:0}.preview-panel{position:sticky;top:14px;padding:17px;display:flex;flex-direction:column;align-items:center}.preview-label{width:100%;display:flex;justify-content:space-between;color:#a9c4cd;font-size:11px;margin-bottom:13px}.preview-label i{display:inline-block;width:7px;height:7px;background:#48e9d5;border-radius:50%;box-shadow:0 0 0 4px #48e9d526;margin-right:6px}.phone{width:var(--phone);height:calc(var(--phone)*2.16);padding:8px;border-radius:43px;background:#020609;box-shadow:0 25px 57px #000a,0 0 0 1px #517181;position:relative}.screen{height:100%;overflow:hidden;border-radius:35px;position:relative;background:#053c56}.stage{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#a4f6e8 0,#21b8c4 13%,#097d99 42%,#064a72 70%,#031d46 100%)}.underwater-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.water-surface{position:absolute;left:-15%;right:-15%;top:-14px;height:114px;background:repeating-radial-gradient(ellipse at 45% 0,#e9fff8 0 1px,transparent 2px 20px),linear-gradient(100deg,#d8fffab8,#66ddd694 39%,#d3ffedc7 52%,#54cadf80 75%,#c1fff1a6);filter:blur(1.3px);opacity:.9;transform:skewY(-4deg);animation:surface 7s ease-in-out infinite alternate}.water-surface:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff8,transparent);mix-blend-mode:soft-light;animation:glide 5s linear infinite}.ray{position:absolute;top:-3%;height:85%;width:22%;background:linear-gradient(180deg,#e7fffda0,#94f9f43f 34%,transparent 100%);filter:blur(13px);clip-path:polygon(38% 0,66% 0,100% 100%,0 100%);opacity:.48;transform-origin:top;animation:rays 9s ease-in-out infinite alternate}.ray.r1{left:8%;animation-delay:-3s}.ray.r2{left:38%;width:29%;opacity:.4;animation-delay:-6s}.ray.r3{right:4%;animation-delay:-1s}.caustics{position:absolute;inset:35px -30px 0;background:repeating-radial-gradient(ellipse at 35% 12%,transparent 0 13px,#ddfff78f 14px 16px,transparent 18px 35px),repeating-radial-gradient(ellipse at 75% 33%,transparent 0 17px,#8affef8c 19px 21px,transparent 23px 48px);background-size:150px 116px,220px 172px;mix-blend-mode:screen;opacity:.26;filter:blur(1px);animation:caustic 13s linear infinite}.depth-haze{position:absolute;inset:48% 0 0;background:linear-gradient(180deg,transparent,#02204aa6);z-index:-.5}.hud{position:absolute;z-index:5;left:0;right:0;top:0;height:73px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;color:#e8ffff;text-shadow:0 1px 5px #004c67}.hud .back{border:0;background:#07526e75;color:#e9ffff;border-radius:50%;width:29px;height:29px;font-size:21px}.hud .logo{font-size:11px;font-weight:900;letter-spacing:.14em}.hud .balance{font-size:11px;border:1px solid #d5fff877;border-radius:99px;background:#08708b70;padding:5px 8px}.headline{position:absolute;top:112px;left:16px;right:16px;text-align:center;z-index:4}.headline small{display:block;letter-spacing:.17em;color:#c9fff4;font-weight:700;font-size:9px}.headline h2{font-size:22px;margin:8px 0 5px;letter-spacing:-.04em;text-shadow:0 2px 10px #00516c}.headline p{font-size:10px;color:#b4ebea;margin:0}.chest-zone{position:absolute;z-index:3;left:50%;top:50%;width:345px;height:390px;transform:translate(-50%,-48%);filter:drop-shadow(0 27px 20px #001d36b8)}.chest-glow{position:absolute;inset:9% -18%;border-radius:50%;background:radial-gradient(ellipse,#b3ffff91 0 9%,#48d8e583 25%,#1c9abf3f 43%,transparent 70%);filter:blur(8px);animation:glow 3.3s ease-in-out infinite}.chest-shadow{position:absolute;width:80%;height:12%;left:10%;bottom:4%;background:#0016328e;border-radius:50%;filter:blur(11px)}.chest-piece{position:absolute;inset:0;transform-style:preserve-3d}.chest-piece img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:saturate(.93) contrast(1.04)}.chest-body{clip-path:polygon(0 38%,100% 38%,100% 100%,0 100%)}.chest-lid{clip-path:polygon(0 0,100% 0,100% 43%,0 43%);transform-origin:50% 39%}.chest-lid img{transform:translateY(1px)}.idle .chest-zone{animation:floatChest 4.2s ease-in-out infinite}.charge .chest-zone{animation:charge .86s cubic-bezier(.36,.07,.19,.97) both}.charge .chest-glow{animation:chargeGlow .86s ease-out both}.open .chest-zone{animation:openSpin 1.8s cubic-bezier(.17,.73,.21,1) both}.open .chest-lid{animation:lidOpen 1.35s .32s cubic-bezier(.17,.86,.23,1) both}.open .chest-body{animation:bodyDip 1.8s both}.burst{position:absolute;z-index:2;left:50%;top:49%;width:400px;height:400px;transform:translate(-50%,-50%) scale(.2);border-radius:50%;background:repeating-conic-gradient(from 0deg,transparent 0 7deg,#d7fff799 8deg 10deg,transparent 12deg 19deg,#63e9ee91 20deg 22deg,transparent 24deg 32deg);opacity:0}.open .burst{animation:burst 1.1s .62s ease-out both}.reveal-card{position:absolute;z-index:4;left:50%;top:50%;width:232px;height:330px;opacity:0;transform-style:preserve-3d;perspective:900px}.reveal-card .card-inner{position:absolute;inset:0;border-radius:15px;overflow:hidden;background:linear-gradient(135deg,#1d8b98,#a4ffff,#176f8d);border:3px solid #dffffd;box-shadow:0 0 31px #a1ffffaa,0 23px 35px #00213cc4}.reveal-card img{width:100%;height:100%;display:block;object-fit:contain;background:#e9f8f7}.reveal .reveal-card{animation:cardReveal 1.1s cubic-bezier(.12,.86,.2,1) both}.result .reveal-card{opacity:1;transform:translate(-50%,-50%);animation:cardFloat 3.6s ease-in-out infinite}.reveal .chest-zone,.result .chest-zone{opacity:0;transition:opacity .35s}.result-panel{position:absolute;z-index:6;left:0;right:0;bottom:47px;text-align:center;opacity:0}.result .result-panel{animation:resultIn .5s .5s both}.result-panel strong{display:block;font-size:18px;text-shadow:0 2px 9px #003d60}.result-panel span{display:block;margin-top:4px;color:#c6fbf2;font-size:10px;letter-spacing:.11em}.playbar{position:absolute;z-index:7;left:20px;right:20px;bottom:19px}.playbar button{width:100%;border:1px solid #bcfff577;border-radius:13px;background:linear-gradient(135deg,#bffff7,#40c8da);color:#003d50;font-weight:900;padding:13px;box-shadow:0 9px 25px #003a5d6b}.stage.running .playbar button{opacity:.55;pointer-events:none}.result .playbar{display:none}.replay{position:absolute;z-index:8;right:19px;top:85px;border:1px solid #bafcf6a6;color:#e9fffc;background:#026a8999;border-radius:50%;width:33px;height:33px;font-size:17px;display:none}.result .replay{display:block}.no-particles .underwater-canvas{display:none}@keyframes surface{to{transform:skewY(2deg) translateX(-4%) scaleY(1.05)}}@keyframes glide{to{transform:translateX(55%)}}@keyframes rays{to{transform:skewX(7deg) scaleX(1.22);opacity:.62}}@keyframes caustic{to{background-position:150px 89px,-220px 105px}}@keyframes floatChest{50%{transform:translate(-50%,-53%) rotate(-1.4deg)}}@keyframes glow{50%{transform:scale(1.13);opacity:.85}}@keyframes charge{10%,90%{transform:translate(-50%,-48%) rotate(-3deg) scale(1.02)}20%,40%,60%,80%{transform:translate(-51.7%,-48%) rotate(3deg) scale(1.04)}30%,50%,70%{transform:translate(-48.3%,-48%) rotate(-3deg) scale(1.04)}100%{transform:translate(-50%,-48%) scale(1.11)}}@keyframes chargeGlow{to{transform:scale(1.75);opacity:1}}@keyframes openSpin{0%{transform:translate(-50%,-48%) scale(1.12)}46%{transform:translate(-50%,-48%) rotateY(175deg) rotateZ(9deg) scale(1.22)}75%{transform:translate(-50%,-48%) rotateY(305deg) rotateZ(-3deg) scale(.97);opacity:1}100%{transform:translate(-50%,-48%) rotateY(380deg) scale(.5);opacity:0}}@keyframes lidOpen{to{transform:rotateX(-76deg) translateY(-69px) scaleY(.89);filter:brightness(1.45)}}@keyframes bodyDip{55%{transform:translateY(15px) scaleY(.9)}100%{transform:translateY(20px);opacity:0}}@keyframes burst{25%{opacity:1;transform:translate(-50%,-50%) scale(.8) rotate(19deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(42deg)}}@keyframes cardReveal{0%{opacity:0;transform:translate(-50%,38%) rotateY(100deg) scale(.44)}45%{opacity:1;transform:translate(-50%,-50%) rotateY(-11deg) scale(1.06)}100%{opacity:1;transform:translate(-50%,-50%) rotateY(0) scale(1)}}@keyframes cardFloat{50%{transform:translate(-50%,-53%) rotate(1deg)}}@keyframes resultIn{to{opacity:1;transform:translateY(-7px)}}@media(max-width:980px){.workspace{grid-template-columns:1fr}.preview-panel{position:relative;top:auto;order:-1}.controls{max-width:720px;margin:auto;width:100%}}@media(max-width:470px){.app-shell{padding:0}.topbar{padding:14px 16px;margin:0}.topbar em{display:none}.workspace{gap:14px}.preview-panel{border-radius:0;border-inline:0;padding:12px}.phone{width:min(var(--phone),calc(100vw - 22px));height:calc(min(var(--phone),calc(100vw - 22px))*2.16)}.controls{border-radius:0;border-inline:0}.control-body{padding:16px}.chest-zone{transform:translate(-50%,-48%) scale(.91)}.idle .chest-zone{animation-name:floatChestMobile}.charge .chest-zone{animation-name:chargeMobile}.open .chest-zone{animation-name:openSpinMobile}.two-fields{grid-template-columns:1fr}.app-shell{overflow:hidden}}@keyframes floatChestMobile{50%{transform:translate(-50%,-53%) scale(.91) rotate(-1.4deg)}}@keyframes chargeMobile{10%,90%{transform:translate(-50%,-48%) scale(.93) rotate(-3deg)}20%,40%,60%,80%{transform:translate(-51.7%,-48%) scale(.94) rotate(3deg)}30%,50%,70%{transform:translate(-48.3%,-48%) scale(.94) rotate(-3deg)}100%{transform:translate(-50%,-48%) scale(1)}}@keyframes openSpinMobile{0%{transform:translate(-50%,-48%) scale(1)}46%{transform:translate(-50%,-48%) rotateY(175deg) rotateZ(9deg) scale(1.1)}75%{transform:translate(-50%,-48%) rotateY(305deg) rotateZ(-3deg) scale(.88);opacity:1}100%{transform:translate(-50%,-48%) rotateY(380deg) scale(.4);opacity:0}}