:root{--bg-color: #fdfbf7;--wood-dark: #3e2723;--wood-light: #5d4037;--wood-grain: #4e342e;--handle-color: #ffd700;--shadow: rgba(0, 0, 0, .6);--interior-bg: #fff3e0;--text-color: #333}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(-45deg,#fdfbf7,beige,#fffdd0,#faebd7);background-size:400% 400%;animation:gradientBG 15s ease infinite;color:var(--text-color);font-family:Inter,sans-serif;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;perspective:1200px}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.scene{position:relative;width:150px;height:250px;transform-style:preserve-3d}.wardrobe{width:100%;height:100%;position:relative;transform-style:preserve-3d;cursor:pointer;transition:transform .8s cubic-bezier(.25,.46,.45,.94)}.wardrobe:hover{transform:scale(1.02)}.wardrobe-shadow{position:absolute;bottom:-20px;left:5%;width:90%;height:20px;background:radial-gradient(ellipse at center,var(--shadow) 0%,transparent 70%);transform:rotateX(90deg);filter:blur(5px)}.door{position:absolute;top:0;width:50%;height:100%;background:linear-gradient(to right,var(--wood-dark),var(--wood-light));border:4px solid var(--wood-grain);transform-origin:top left;transition:transform 1.2s cubic-bezier(.4,0,.2,1);z-index:10;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 20px #00000080}.left-door{left:0;transform-origin:left;border-right:1px solid var(--wood-dark)}.right-door{right:0;transform-origin:right;background:linear-gradient(to left,var(--wood-dark),var(--wood-light));border-left:1px solid var(--wood-dark)}.panel{width:70%;height:80%;border:2px solid rgba(0,0,0,.2);box-shadow:inset 2px 2px 5px #0000004d}.handle{position:absolute;top:50%;width:10px;height:40px;background:linear-gradient(to bottom,var(--handle-color),#b8860b);border-radius:5px;box-shadow:2px 2px 5px #0006}.left-door .handle{right:15px}.right-door .handle{left:15px}.interior{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--interior-bg);z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#333;box-shadow:inset 0 0 50px #00000080;transform:translateZ(-1px)}.content{text-align:center;opacity:0;transform:translateY(20px);transition:opacity .5s ease .5s,transform .5s ease .5s}.wardrobe.is-open .content{opacity:1;transform:translateY(0)}.clothes-rack{margin-top:20px;width:80%;height:5px;background:#555;position:relative;border-radius:5px}.hanger{width:30px;height:20px;border-top:3px solid #333;border-left:3px solid #333;border-right:3px solid #333;border-radius:15px 15px 0 0;position:absolute;top:5px}.hanger:nth-child(1){left:20%;transform:rotate(-5deg)}.hanger:nth-child(2){left:50%;transform:translate(-50%)}.hanger:nth-child(3){right:20%;transform:rotate(5deg)}.roof{position:absolute;top:-20px;left:0;width:100%;height:20px;background:var(--wood-dark);transform-origin:bottom;transform:rotateX(90deg)}.floor{position:absolute;bottom:-20px;left:0;width:100%;height:20px;background:var(--wood-dark);transform-origin:top;transform:rotateX(-90deg)}.wardrobe.is-open .left-door{transform:rotateY(-110deg)}.wardrobe.is-open .right-door{transform:rotateY(110deg)}.wardrobe.is-open{transform:scale(1.1);cursor:default}.instruction{position:absolute;bottom:-50px;width:100%;text-align:center;font-size:1.2rem;opacity:.8;animation:pulse 2s infinite;pointer-events:none}.wardrobe.is-open+.instruction{opacity:0}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}#scene-container{transition:transform 1.5s ease-in,opacity 1.5s ease-in;width:100%;height:100%;display:flex;justify-content:center;align-items:center}#scene-container.zoom-out{transform:scale(5);opacity:0;pointer-events:none}.hidden{display:none!important}#interior-container{position:fixed;top:0;left:0;width:100%;height:100%;background:#fdfbf7;display:flex;padding:40px;gap:40px;opacity:0;animation:fadeIn 1s ease forwards}@keyframes fadeIn{to{opacity:1}}.column{flex:1;display:flex;flex-direction:column;gap:20px}.section{background:#fff;border:2px solid var(--wood-light);border-radius:10px;padding:20px;flex:1;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.section:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0000001a;border-color:var(--wood-dark)}.section h2{color:var(--wood-dark);margin-bottom:15px;font-size:1.5rem;border-bottom:2px solid var(--wood-light);padding-bottom:5px;width:100%;text-align:center}.item-list{width:100%;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.item-tag{background:var(--interior-bg);padding:5px 10px;border-radius:15px;font-size:.9rem;color:var(--text-color);border:1px solid var(--wood-light)}.section-hangers{flex:2}.section-shoes{flex:1}.section-shelves{flex:2}.section-drawers{flex:1;gap:10px;justify-content:center}.drawer{width:90%;height:40px;background:linear-gradient(to bottom,var(--wood-light),var(--wood-dark));color:#fff;display:flex;align-items:center;justify-content:center;border-radius:5px;box-shadow:0 2px 5px #0003}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal{background:#fff;padding:30px;border-radius:15px;width:300px;box-shadow:0 20px 50px #0000004d;text-align:center;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal h2{color:var(--wood-dark);margin-bottom:20px}.modal input{width:100%;padding:10px;margin-bottom:20px;border:2px solid var(--wood-light);border-radius:5px;font-size:1rem}.modal input:focus{outline:none;border-color:var(--wood-dark)}.modal-buttons{display:flex;gap:10px;justify-content:center}.modal button{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-weight:700;transition:background .2s}#cancel-btn{background:#eee;color:#333}#cancel-btn:hover{background:#ddd}#add-btn{background:var(--wood-dark);color:#fff}#add-btn:hover{background:var(--wood-grain)}#interior-container{padding:10px;gap:10px;width:90%;height:90%;max-width:400px;max-height:600px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:10px;box-shadow:0 0 20px #0003}.column{min-width:0}.section-img,.drawer-img{max-width:100%;height:auto;object-fit:contain}.scene{width:180px;height:300px}#interior-container{max-width:500px;max-height:700px}
