@import url('./base.css');
/* v3 design tokens and layout are copied from the approved reference. */
body{font-family:"Noto Serif CJK SC","Songti SC",serif;background:var(--ivory);color:var(--ink);overflow-x:hidden}
body .grain{display:none}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.55}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
header.top{height:auto;min-height:64px;max-width:none;margin:0;display:flex;flex-wrap:nowrap;border-bottom:1px solid var(--line);background:var(--ivory)}
header.top .logo{display:block;white-space:nowrap;font-size:17px;font-family:inherit;letter-spacing:0;color:var(--ink)}header.top .nav{display:flex;gap:12px;margin:0;padding:0;border:0;overflow:visible;font-size:12px}header.top .nav a{padding:0;color:var(--muted);white-space:nowrap;font-size:12px}header.top .nav .orders-nav{display:none}header.top .avatar{padding:0;background:transparent;flex:none;width:36px;height:36px;font-size:11px;overflow:hidden;white-space:nowrap;max-width:36px;border:1px solid var(--gold);color:var(--ink)}
.v3 #app{min-height:70vh;max-width:1440px}.v3 .small-title{font-size:24px}.v3 h1{font-family:inherit;letter-spacing:0;color:var(--ink);margin:6px 0 14px}.v3 h2{margin:20px 0 10px;font-family:inherit}.v3 p{line-height:1.6}.v3 .btn{width:100%;font-family:inherit;letter-spacing:0;padding:0 16px;text-align:center;white-space:normal;margin-top:8px;min-height:52px}.v3 .btn.ghost{height:44px;min-height:44px}.v3 .panel{box-shadow:none;color:var(--ink);background:var(--card);padding:16px;border:1px solid var(--line)}.v3 .panel h2{margin-top:0}.v3 .row{margin-top:8px}.v3 .price{color:var(--gold)}.v3 .strip{overflow-x:auto;margin:12px 0 24px}.v3 .cards-fan{overflow:visible;max-width:100%;height:250px;margin-top:30px}.v3 .cards-fan img{left:50%;top:12px;transform:translateX(calc(-50% + var(--i)*44px)) rotate(calc(var(--i)*7deg));width:118px;height:166px}.v3 .cols>img{border-radius:14px;max-height:340px}.v3 .center{text-align:center}.v3 .thumb{padding-bottom:calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--ivory) 20%)}.v3 .thumb .muted{font-size:11px;text-align:center}.v3 .consent-row{display:block;margin:14px 0;color:var(--muted);font-size:12px}.v3 input[type=checkbox]{width:18px;height:18px;accent-color:var(--navy);vertical-align:middle}.v3 .input{width:100%;background:white;border:1px solid var(--line);color:var(--ink)}.v3 .drop{display:block;width:100%;color:var(--ink)}.v3 .drop .big{display:block}.v3 .drop.armed{background:#e8dfcf}.v3 .cloud{margin-top:14px}.v3 .cloud-tabs{margin:12px 0}.v3 .file .f{min-width:0;overflow-wrap:anywhere}.v3 .file img{width:40px;height:52px}.v3 .file .prog{margin:6px 0}.v3 .prog i{width:var(--fill);animation:fill .7s ease both;transition:width .6s ease}.v3 .prog{width:100%}.v3 .ph{border:none;padding:0;animation:fly .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--delay,0ms);width:100%;height:auto;min-height:0}.v3 .grid{margin:10px 0 16px}.v3 .ph img{width:100%;height:100%;max-width:none}.v3 .toolbar{margin-bottom:8px}.v3 .toolbar button{padding:6px 0;border:0;background:transparent;color:var(--ivory);font-size:11px;min-height:44px}.v3 .toolbar .ic{display:block;color:var(--gold);font-size:20px}.v3 .chip{cursor:pointer;min-height:36px}.v3 .styles{margin-top:12px}.v3 .styles button{background:transparent;border:0;padding:0;font-size:11px}.v3 .styles img{aspect-ratio:3/4;border:2px solid transparent;border-radius:8px}.v3 .styles .on img{border-color:var(--gold)}.v3 .jobs{grid-template-columns:repeat(3,minmax(0,1fr))}.v3 .ph.skel{animation:sh 1.4s infinite}.v3 .album a{display:block;min-width:0}.v3 .album img{width:100%;aspect-ratio:62/87}.v3 .album .empty{display:grid}.v3 .options{margin:12px 0}.v3 .empty-bench{text-align:center}.v3 .empty-bench .panel{text-align:left}.v3 .empty-bench h1{margin-top:20px}
.vcompare{position:relative;aspect-ratio:3/4;max-height:600px;border:1px solid var(--gold);border-radius:12px;overflow:hidden;isolation:isolate;margin-top:10px}.vcompare>img,.vcompare .after,.vcompare .after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.vcompare .after{clip-path:inset(0 0 0 var(--split))}.vcompare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0;touch-action:pan-y}.vcompare:focus-within{outline:3px solid var(--gold)}.compare-line{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:var(--gold)}.compare-knob{position:absolute;left:var(--split);top:50%;transform:translate(-50%,-50%);border-radius:50%;width:34px;height:34px;background:var(--ivory);border:2px solid var(--gold);display:grid;place-items:center}.vcompare .label{position:absolute;top:8px;color:var(--ivory);background:#1e2434cc;border-radius:9px;padding:2px 9px;font-size:11px}.vcompare .left{left:8px}.vcompare .right{right:8px}.shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,#ffffff55 50%,transparent 60%);animation:sweep 3s ease-in-out infinite;pointer-events:none}
.stage{perspective:900px;min-height:400px;display:grid;place-items:center}.card3d{display:block;position:relative;width:180px;height:252px;border:none;background:transparent;padding:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--flip,0deg) + var(--ry,0deg)));transition:transform .45s}.card3d.flipped{--flip:180deg}.card3d .face{position:absolute;inset:0;overflow:hidden;border:2px solid var(--gold);border-radius:10px;backface-visibility:hidden;box-shadow:0 16px 35px #0003}.card3d img{height:100%;width:100%}.card3d .back{transform:rotateY(180deg)}.holo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.5;background:linear-gradient(125deg,transparent 30%,#ff50c866 42%,#50c8ff66 50%,#ffdc5066 58%,transparent 70%);background-size:200% 200%;background-position:var(--hx,50%) var(--hy,50%)}.pack-stage{height:310px;position:relative;display:grid;place-items:center;perspective:900px}.demo-pack{width:150px;height:210px;background:var(--navy);color:var(--gold);border:2px solid var(--gold);border-radius:12px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 14px 30px #0004;transition:transform .35s,opacity .35s}.demo-pack .en{font-size:26px}.demo-pack span{font-size:12px}.demo-pack.opening{transform:scale(1.08) rotate(-6deg);opacity:0}.reveal{display:grid;place-items:center;gap:12px;animation:reveal .55s ease-out both}.reveal:before{content:'';position:absolute;inset:0;pointer-events:none;animation:burst .8s ease-out;background:radial-gradient(circle,#c2a27199,transparent 60%)}[hidden]{display:none!important}.v3 .prob .row{border-bottom:1px solid var(--line);padding:10px 0}.v3 .prob dd{color:var(--gold)}
body>footer{position:static;background:var(--ivory);color:var(--muted);border-color:var(--line);padding:28px 18px 150px;display:flex;flex-wrap:wrap;gap:12px;font-size:11px}body>footer a{color:var(--muted)}dialog{background:var(--card);color:var(--ink);border:1px solid var(--gold);max-width:calc(100vw - 28px)}#toast{z-index:100;background:var(--navy);color:var(--ivory);max-width:calc(100vw - 32px)}

.v3 .file{opacity:0;transform:translateY(12px)}
.v3 .file.in{opacity:1;transform:none;animation:fly .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--delay,0ms)}
.v3 .album .teaser{grid-column:1/-1;margin-bottom:8px}
.v3 .album .teaser .strip{margin:0}
@keyframes fill{from{width:0}to{width:var(--fill)}}@keyframes fly{from{opacity:0;transform:translateY(40px) scale(.85)}to{opacity:1;transform:none}}@keyframes sweep{0%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}@keyframes reveal{from{opacity:0;transform:scale(.4) rotateY(90deg)}to{opacity:1;transform:none}}@keyframes burst{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.4)}}
@media(min-width:1000px){header.top .nav{gap:28px}header.top .nav a{font-size:14px}header.top .nav .orders-nav{display:block}.v3 .cards-fan{height:400px}.v3 .cards-fan img{width:200px;height:280px;transform:translateX(calc(-50% + var(--i)*68px)) rotate(calc(var(--i)*7deg))}.v3 .thumb{background:transparent;padding:0;margin-top:16px}.v3 .cols3{grid-template-columns:220px minmax(0,1fr) 340px;gap:24px}.v3 .cols3 .grid{grid-template-columns:repeat(3,minmax(0,1fr))}.v3 .cols2{grid-template-columns:minmax(0,1fr) 380px}.v3 .empty-bench{min-height:550px}.v3 .stage .card3d{width:240px;height:336px}.v3 .vcompare{max-width:700px}.v3 .cols>div,.v3 section,.v3 aside{min-width:0}body>footer{padding:36px 56px}}
@media(max-width:999px){.top .logo .en{font-size:12px;margin-left:3px}.top{gap:8px;padding:12px}.v3 .cols2>aside{margin-top:14px}.v3 .thumb .row .btn{flex:1;min-width:0}.v3 .grid+.m-only{margin-top:18px}.v3 .cols3 .m-only .vcompare{max-height:320px}.v3 #app{padding-bottom:40px}.v3 .styles img{width:100%}.v3 .pad-thumb{height:160px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.shine,.reveal:before{display:none!important}.v3 .ph,.v3 .file,.reveal{opacity:1;transform:none}.card3d{transform:none!important}.card3d .back{display:none;transform:none}.card3d.flipped .front{display:none}.card3d.flipped .back{display:block}.holo{display:none}.v3 .prog i{width:var(--fill)}}
:root{color-scheme:light}
header.top .nav{order:0;width:auto;max-width:none;flex-wrap:nowrap;justify-content:initial}
#auth-dialog{background:var(--card);color:var(--ink);border-color:var(--gold)}
#auth-dialog input{background:white;color:var(--ink);border-color:var(--line)}
#auth-dialog .auth-tabs button{color:var(--muted)}
#auth-dialog .auth-tabs button.active{color:var(--ink)}
.v3 .btn,.v3 .toolbar button{touch-action:manipulation}
body:not(.v3) #app .panel{color:var(--ink);background:var(--card)}
body:not(.v3) #app .secondary{color:var(--ink);border-color:var(--gold)}
.v3 .prog{background:#E8DFCF}
:root{--text:var(--ink);--bg:var(--ivory)}
body:not(.v3) #app .page-head p,body:not(.v3) #app .legal-copy{color:var(--muted)}
/* Local v3 gap completion: filters, mock order controls and failure layout. */
.v3 .filters{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0}
.v3 .qty{align-items:center;flex:none}
.v3 .qty button{border:0;background:transparent;min-width:36px;min-height:36px;color:var(--ink)}
.v3 .qty button:disabled{cursor:default;opacity:.4}
.v3 .total{border-top:1px solid var(--line);padding-top:10px;margin-top:12px}
.v3 .err{flex-wrap:wrap;gap:10px;overflow-wrap:anywhere}
.v3 .jobs .tag{max-width:calc(100% - 12px)}