:root{--bg:#0d0b10;--fg:#eee9f5;--mut:#9b92a8;--acc:#8b5cf6;--card:#17131d}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,sans-serif}
a{color:var(--acc)}main{max-width:1040px;margin:auto;padding:1rem}
.nav,footer{display:flex;gap:1rem;justify-content:space-between;align-items:center;padding:1rem;max-width:1040px;margin:auto;flex-wrap:wrap}
.nav nav a,footer a{color:var(--mut);text-decoration:none;margin-left:1rem}.logo{color:var(--fg);font-weight:700;text-decoration:none}.logo span{color:var(--acc)}
.hero,.pdp{display:grid;gap:2rem;align-items:center;padding:2rem 0}@media(min-width:760px){.hero,.pdp{grid-template-columns:1fr 1fr}}
.pdp img{width:100%;height:auto;border-radius:12px}
h1{font-size:clamp(1.8rem,5vw,3rem);margin:.2em 0}.lead,.muted{color:var(--mut)}.price{font-size:1.5rem;color:#c4b5fd}
.btn{display:inline-block;background:var(--acc);color:#fff;border:0;padding:.9rem 1.6rem;border-radius:999px;font-weight:600;text-decoration:none;cursor:pointer;font-size:1rem}
.btn.soft{background:#2a2235;color:var(--mut);cursor:default}.danger{background:#b91c1c;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}.card{background:var(--card);padding:1.2rem;border-radius:12px}
input{background:var(--card);color:var(--fg);border:1px solid #2e2638;padding:.6rem;border-radius:8px}.stack{display:grid;gap:.6rem;max-width:360px}.row{display:flex;gap:1rem;flex-wrap:wrap;align-items:end}
.err{color:#f87171}.draft{background:#3b2a05;color:#fcd34d;padding:.6rem;border-radius:8px}
table.admin{width:100%;border-collapse:collapse;font-size:.85rem}table.admin td,th{border-bottom:1px solid #2e2638;padding:.5rem;vertical-align:top;text-align:left}
.hero-anim .box{width:100%;max-width:420px}
.item{animation:inout 4.5s ease-in-out infinite;transform-box:fill-box}.i2{animation-delay:1.5s}.i3{animation-delay:3s}
.lid{animation:lid 1.5s ease-in-out infinite;transform-origin:60px 131px;transform-box:view-box}
@keyframes inout{0%{transform:translate(0,40px) scale(.6);opacity:0}25%{transform:translate(0,-70px) scale(1);opacity:1}50%{transform:translate(60px,-90px) rotate(15deg);opacity:1}70%{transform:translate(0,-60px);opacity:1}100%{transform:translate(0,40px) scale(.6);opacity:0}}
@keyframes lid{0%,100%{transform:rotate(0)}40%,60%{transform:rotate(-18deg)}}
@media (prefers-reduced-motion:reduce){.item,.lid{animation:none}.i1{opacity:1;transform:translateY(-70px)}}