@import"https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400..800&family=Cairo:wght@300..900&display=swap";:root{--pink: #FF5FA2;--pink-d: #E0407E;--pink-l: #FFC1DC;--pink-xl: #FFF0F7;--purple: #A78BFA;--sky: #7DD3FC;--mint: #6EE7B7;--gold: #FCD34D;--text: #45203C;--muted: #9C7C93;--card: #FFFFFF;--border: #FFD6EA;--radius: 26px;--radius-sm: 18px;--clay: 0 10px 24px rgba(224, 64, 126, .13), inset 0 -5px 0 rgba(224, 64, 126, .07), inset 0 5px 0 rgba(255, 255, 255, .95);--clay-hi: 0 18px 40px rgba(224, 64, 126, .22), inset 0 -5px 0 rgba(224, 64, 126, .08), inset 0 5px 0 #fff;font-family:Cairo,ui-sans-serif,system-ui,sans-serif;color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{min-height:100dvh;background:radial-gradient(900px 500px at 100% -5%,#FFD9EC 0%,transparent 60%),radial-gradient(800px 500px at 0% 10%,#E6DBFF 0%,transparent 55%),linear-gradient(180deg,#fff5fb,#f7eeff);background-attachment:fixed}h1,h2,h3{font-family:"Baloo Bhaijaan 2",Cairo,sans-serif;line-height:1.25}button{font-family:inherit;cursor:pointer}ul{list-style:none}.app{max-width:1560px;margin:0 auto;padding:1.1rem 1.1rem 3rem}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:#ffffffb8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:3px solid #fff;border-radius:var(--radius);box-shadow:var(--clay);padding:.85rem 1.15rem;position:sticky;top:.6rem;z-index:30}.brand{display:flex;align-items:center;gap:.75rem}.brand-mark{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--pink),var(--purple));box-shadow:0 8px 18px #e0407e59,inset 0 -4px #00000014}.brand h1{font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:800;letter-spacing:-.01em}.brand p{font-size:.78rem;color:var(--muted);font-weight:600}.actions{display:flex;gap:.5rem;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.05rem;border-radius:999px;font-size:.85rem;font-weight:700;color:var(--text);border:2px solid #fff;background:#fff;box-shadow:var(--clay);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.btn:hover{transform:translateY(-2px);box-shadow:var(--clay-hi)}.btn:active{transform:translateY(1px) scale(.98)}.btn-soft{background:linear-gradient(160deg,#fff0f7,#f1e7ff);color:var(--pink-d)}.btn-ghost{background:#fff;color:var(--muted)}.btn:focus-visible,.cat-tab:focus-visible,.item-card:focus-visible,.scene-chip:focus-visible,.swatch:focus-visible,.row-x:focus-visible{outline:3px solid var(--purple);outline-offset:2px}.layout{display:grid;grid-template-columns:300px minmax(0,1fr) 342px;gap:1.1rem;margin-top:1.1rem;align-items:start}.col-left,.col-right,.stage-col{display:flex;flex-direction:column;gap:1.1rem;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.7rem}.panel-head h2{font-size:1.02rem;font-weight:700}.hint{display:inline-flex;align-items:center;gap:.28rem;font-size:.7rem;font-weight:700;color:var(--pink-d);background:var(--pink-xl);border-radius:999px;padding:.22rem .6rem}.scene-panel,.worn-bar,.wardrobe{background:var(--card);border:3px solid #fff;border-radius:var(--radius);box-shadow:var(--clay);padding:1rem}.stage-col{position:relative}.stage{position:relative;overflow:hidden;border-radius:32px;border:4px solid #fff;box-shadow:0 22px 48px #e0407e33,inset 0 -8px #0000000a;min-height:min(72vh,660px);display:flex;align-items:flex-end;justify-content:center;touch-action:none}.stage-deco{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.deco-room{background-image:radial-gradient(circle,rgba(255,255,255,.75) 2.4px,transparent 2.6px);background-size:38px 38px;opacity:.55}.deco-garden{background:radial-gradient(circle at 50% 116%,#9BE3C2 0%,#9BE3C2 34%,transparent 34.5%),radial-gradient(circle at 12% 112%,#7BD3AC 0%,#7BD3AC 26%,transparent 26.5%),radial-gradient(circle at 88% 114%,#7BD3AC 0%,#7BD3AC 30%,transparent 30.5%);opacity:.8}.deco-stage{background:conic-gradient(from 200deg at 50% 6%,rgba(255,255,255,.22) 0deg 24deg,transparent 24deg 60deg,rgba(255,255,255,.18) 60deg 82deg,transparent 82deg 140deg,rgba(255,255,255,.16) 140deg 162deg,transparent 162deg 360deg)}.deco-beach{background:radial-gradient(circle at 78% 12%,rgba(255,236,160,.95) 0%,rgba(255,236,160,.55) 5%,transparent 8%),radial-gradient(ellipse at 50% 118%,#FFE3AE 0%,#FFE3AE 26%,transparent 26.5%),radial-gradient(ellipse at 50% 128%,#8FD9F2 0%,#8FD9F2 40%,transparent 40.5%)}.doll-holder{position:relative;z-index:2;width:100%;height:min(70vh,640px);display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem;transition:transform .3s ease}.doll-svg{width:100%;height:100%;display:block}.stage-note{text-align:center;font-size:.78rem;color:var(--muted);font-weight:600}.drop-hint{position:absolute;top:14px;right:14px;bottom:14px;left:14px;border-radius:26px;border:3px dashed rgba(255,95,162,.55);background:#ffffff38;z-index:3;pointer-events:none;animation:pulseRing 1.1s ease-in-out infinite}.scene-chips{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.scene-chip{height:54px;border-radius:var(--radius-sm);border:3px solid #fff;box-shadow:var(--clay);font-size:.8rem;font-weight:800;color:var(--text);text-shadow:0 1px 3px rgba(255,255,255,.9);transition:transform .18s ease,box-shadow .18s ease}.scene-chip:hover{transform:translateY(-2px)}.scene-chip.on{box-shadow:0 0 0 3px var(--pink),var(--clay-hi)}.cat-tabs{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:.6rem;scrollbar-width:thin}.cat-tabs::-webkit-scrollbar{height:5px}.cat-tabs::-webkit-scrollbar-thumb{background:var(--pink-l);border-radius:99px}.cat-tab{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .7rem;border-radius:999px;border:2px solid var(--border);background:#fff;font-size:.76rem;font-weight:700;color:var(--muted);transition:all .18s ease}.cat-tab:hover{color:var(--pink-d);border-color:var(--pink-l)}.cat-tab.active{background:linear-gradient(140deg,var(--pink),#FF8FBF);border-color:#fff;color:#fff;box-shadow:0 8px 18px #ff5fa259}.cat-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 2px #fff}.cat-tab.active .cat-dot{background:#fff}.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:.6rem;max-height:min(62vh,560px);overflow-y:auto;padding:.2rem .25rem .4rem}.item-grid::-webkit-scrollbar{width:7px}.item-grid::-webkit-scrollbar-thumb{background:var(--pink-l);border-radius:99px}.item-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.45rem .3rem .4rem;border-radius:var(--radius-sm);border:2.5px solid var(--border);background:linear-gradient(180deg,#fff,#fff7fb);box-shadow:0 6px 14px #e0407e14;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;touch-action:none;user-select:none;-webkit-user-select:none}.item-card:hover{transform:translateY(-3px);border-color:var(--pink-l);box-shadow:0 12px 22px #e0407e2e}.item-card.is-worn{border-color:var(--pink);background:linear-gradient(180deg,#fff0f7,#ffe3f1)}.item-name{font-size:.64rem;font-weight:700;color:var(--muted);text-align:center}.item-card.is-worn .item-name{color:var(--pink-d)}.thumb{width:100%;height:62px;display:block}.thumb-sm{width:42px;height:46px;flex:0 0 42px}.worn-badge{position:absolute;top:-7px;left:-7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--pink);box-shadow:0 3px 8px #e0407e66}.worn-list{display:flex;flex-direction:column;gap:.55rem;max-height:340px;overflow-y:auto}.worn-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:var(--radius-sm);background:linear-gradient(180deg,#fff7fb,#ffeff8);border:2px solid #fff;box-shadow:0 5px 14px #e0407e17;animation:fadeUp .32s ease both}.worn-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.12rem}.worn-cat{font-size:.62rem;font-weight:800;color:var(--pink-d);letter-spacing:.02em}.worn-name{font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.swatches{display:flex;gap:.26rem;margin-top:.18rem;flex-wrap:wrap}.swatch{width:17px;height:17px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 5px #00000024;transition:transform .15s ease}.swatch:hover{transform:scale(1.18)}.swatch.on{box-shadow:0 0 0 2.5px var(--pink)}.row-x{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:#fff;border:2px solid var(--border);transition:all .16s ease}.row-x:hover{color:#fff;background:var(--pink-d);border-color:var(--pink-d)}.empty-note{font-size:.8rem;color:var(--muted);font-weight:600}.drag-ghost{position:fixed;z-index:80;pointer-events:none;opacity:.88;filter:drop-shadow(0 14px 22px rgba(155,40,100,.35));transition:opacity .15s ease}.drag-ghost.over{opacity:1;filter:drop-shadow(0 14px 26px rgba(255,95,162,.5))}.sparkle-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none}.sparkle{position:absolute;display:block;background:linear-gradient(140deg,#fff,#ffe9a8);clip-path:polygon(50% 0%,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0% 50%,38% 38%);animation:twinkle 1.4s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,255,255,.95))}.toast-wrap{position:fixed;bottom:1.2rem;inset-inline-start:1.2rem;z-index:90;display:flex;flex-direction:column;gap:.5rem}.toast{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:999px;font-size:.82rem;font-weight:700;background:#fff;border:3px solid #fff;box-shadow:var(--clay-hi);animation:fadeUp .3s ease both;color:var(--pink-d)}.toast.error{color:#b91c1c}.toast-x{border:0;background:transparent;color:inherit;opacity:.55;display:grid;place-items:center}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes pulseRing{0%,to{border-color:#ff5fa259;background:#ffffff1f}50%{border-color:#ff5fa2d9;background:#ffffff4d}}@keyframes twinkle{0%,to{opacity:0;transform:scale(.35) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}}@keyframes strut{0%{transform:translateY(0) rotate(0) scale(1)}25%{transform:translateY(-12px) rotate(1.6deg) scale(1.01)}50%{transform:translateY(2px) rotate(0) scale(1)}75%{transform:translateY(-12px) rotate(-1.6deg) scale(1.01)}to{transform:translateY(0) rotate(0) scale(1)}}.doll-holder.strutting{animation:strut 1.05s ease-in-out infinite}.scene-panel,.worn-bar,.wardrobe,.stage{animation:fadeUp .45s ease both}@media (max-width: 1180px){.layout{grid-template-columns:minmax(0,1fr) 330px}.col-left{grid-column:1 / -1;flex-direction:row}.col-left>section{flex:1}.scene-chips{grid-template-columns:repeat(4,1fr)}}@media (max-width: 900px){.layout{grid-template-columns:1fr}.col-left{flex-direction:column}.scene-chips{grid-template-columns:1fr 1fr}.col-right{order:3}.stage{min-height:58vh;border-radius:26px}.doll-holder{height:56vh}.item-grid{max-height:none;grid-template-columns:repeat(auto-fill,minmax(86px,1fr))}.worn-list{max-height:none}.topbar{position:static}.actions{width:100%}.btn{flex:1 1 auto;justify-content:center}}@media (max-width: 420px){.app{padding:.7rem .7rem 2.5rem}.brand p{display:none}.thumb{height:54px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}