:root{--bg: #0f0f14;--bg-card: #1a1a24;--bg-card-hover: #22222e;--border: rgba(255, 255, 255, .08);--border-active: rgba(255, 120, 200, .5);--text: #f0f0f5;--text-dim: rgba(255, 255, 255, .55);--text-muted: rgba(255, 255, 255, .35);--pink: #ff6b9d;--purple: #c084fc;--blue: #60a5fa;--gold: #fbbf24;--green: #34d399;--red: #f87171;--radius: 12px;--radius-sm: 8px;--shadow: 0 4px 24px rgba(0, 0, 0, .4);font-family:Segoe UI,system-ui,-apple-system,sans-serif;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}body{background-image:radial-gradient(ellipse at 20% 50%,rgba(255,107,157,.04) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(192,132,252,.04) 0%,transparent 50%)}.app{min-height:100vh;display:flex;flex-direction:column}.main{flex:1;max-width:1200px;margin:0 auto;padding:2rem 1.5rem;width:100%}.nav{display:flex;align-items:center;gap:1.5rem;padding:.75rem 1.5rem;background:#0f0f14e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.nav-brand{display:flex;align-items:center;gap:.5rem}.brand-icon{font-size:1.4rem}.brand-text{font-weight:700;font-size:1.15rem;background:linear-gradient(135deg,var(--pink),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.nav-links{display:flex;gap:.25rem;flex:1;justify-content:center}.nav-links button{background:none;border:none;color:var(--text-dim);font-size:.85rem;padding:.5rem 1rem;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.35rem}.nav-links button:hover{color:var(--text);background:#ffffff0d}.nav-links button.active{color:var(--pink);background:#ff6b9d1a;font-weight:600}.nav-icon{font-size:1rem}.nav-player{display:flex;gap:.75rem;font-size:.85rem;font-weight:600}.player-coins{color:var(--gold)}.player-level{color:var(--purple)}.footer{padding:1rem 1.5rem;text-align:center;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--text-muted)}.reset-btn{background:none;border:1px solid var(--border);color:var(--text-muted);font-size:.75rem;padding:.3rem .75rem;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.reset-btn:hover{color:var(--red);border-color:var(--red)}.designer{max-width:100%}.designer-header{text-align:center;margin-bottom:2rem}.designer-header h2{font-size:1.8rem;font-weight:700;background:linear-gradient(135deg,var(--pink),var(--purple),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-dim);margin-top:.25rem;font-size:.9rem}.designer-layout{display:grid;grid-template-columns:300px 1fr;gap:2rem;align-items:start}@media(max-width:768px){.designer-layout{grid-template-columns:1fr}}.designer-preview{display:flex;flex-direction:column;align-items:center;gap:1rem;position:sticky;top:80px}.preview-frame{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}.design-name-input{width:100%;text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:1rem;font-weight:600;padding:.6rem 1rem;outline:none;transition:border-color .2s}.design-name-input:focus{border-color:var(--border-active)}.btn-shuffle{background:none;border:1px solid var(--border);color:var(--text-dim);font-size:.8rem;padding:.4rem 1rem;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.btn-shuffle:hover{color:var(--pink);border-color:var(--pink)}.designer-controls{display:flex;flex-direction:column;gap:1.5rem}.control-group label{display:block;font-size:.85rem;font-weight:600;color:var(--text-dim);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.garment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.garment-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:.75rem .5rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25rem;font-size:.8rem;transition:all .2s}.garment-btn:hover{border-color:var(--border-active);background:var(--bg-card-hover)}.garment-btn.active{border-color:var(--pink);background:#ff6b9d1a;color:var(--pink)}.garment-icon{font-size:1.4rem}.pattern-grid{display:flex;flex-wrap:wrap;gap:.4rem}.pattern-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:.4rem .75rem;font-size:.8rem;cursor:pointer;transition:all .2s}.pattern-btn:hover{border-color:var(--border-active)}.pattern-btn.active{border-color:var(--purple);background:#c084fc1a;color:var(--purple)}.color-grid{display:flex;flex-wrap:wrap;gap:.35rem}.color-btn{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s}.color-btn:hover{transform:scale(1.2)}.color-btn.active{border-color:#fff;box-shadow:0 0 8px #ffffff4d;transform:scale(1.15)}.price-slider{width:100%;accent-color:var(--gold);height:6px}.price-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted)}.btn-save{background:linear-gradient(135deg,var(--pink),var(--purple));border:none;color:#fff;font-size:1rem;font-weight:700;padding:.85rem 2rem;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;letter-spacing:.02em;margin-top:.5rem}.btn-save:hover{transform:translateY(-1px);box-shadow:0 6px 20px #ff6b9d4d}.marketplace-header{text-align:center;margin-bottom:1.5rem}.marketplace-header h2{font-size:1.8rem;font-weight:700;background:linear-gradient(135deg,var(--gold),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.marketplace-filters{margin-bottom:1.5rem}.filter-row{display:flex;gap:1.5rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1rem}.filter-group label{display:block;font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}.filter-chips{display:flex;flex-wrap:wrap;gap:.35rem}.chip{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;color:var(--text-dim);font-size:.8rem;padding:.35rem .85rem;cursor:pointer;transition:all .2s}.chip:hover{border-color:var(--border-active);color:var(--text)}.chip.active{border-color:var(--gold);color:var(--gold);background:#fbbf241a}.sort-select{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:.45rem .75rem;font-size:.85rem;outline:none;cursor:pointer}.search-row{margin-bottom:.5rem}.search-input{width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:.6rem 1rem;font-size:.9rem;outline:none;transition:border-color .2s}.search-input:focus{border-color:var(--border-active)}.search-input::placeholder{color:var(--text-muted)}.marketplace-stats{display:flex;justify-content:space-between;font-size:.85rem;color:var(--text-dim);margin-bottom:1.5rem;padding:0 .25rem}.design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.design-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .25s}.design-card:hover{border-color:var(--border-active);transform:translateY(-2px);box-shadow:var(--shadow)}.design-card-preview{padding:1.5rem;display:flex;align-items:center;justify-content:center;min-height:140px}.design-card-info{padding:0 1rem 1rem}.design-card-info h3{font-size:.95rem;font-weight:600;margin-bottom:.35rem}.design-card-meta{display:flex;gap:.4rem;margin-bottom:.35rem}.designer-tag{font-size:.7rem;background:#c084fc26;color:var(--purple);padding:.15rem .5rem;border-radius:10px}.garment-tag{font-size:.7rem;background:#60a5fa26;color:var(--blue);padding:.15rem .5rem;border-radius:10px}.design-card-details{margin-bottom:.5rem}.pattern-label{font-size:.75rem;color:var(--text-muted)}.design-card-bottom{display:flex;justify-content:space-between;align-items:center}.design-card-price{font-weight:700;color:var(--gold);font-size:.95rem}.design-card-actions{display:flex;gap:.35rem;align-items:center}.btn-icon{background:none;border:none;color:var(--text-dim);font-size:.75rem;cursor:pointer;padding:.25rem .4rem;border-radius:4px;transition:all .2s}.btn-icon:hover{background:#ffffff0d;color:var(--pink)}.btn-buy{background:linear-gradient(135deg,var(--green),#10b981);border:none;color:#fff;font-size:.8rem;font-weight:600;padding:.35rem .85rem;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.btn-buy:hover{transform:scale(1.05)}.btn-buy.disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-list{background:#fbbf2426;border:1px solid var(--gold);color:var(--gold);font-size:.75rem;font-weight:600;padding:.3rem .65rem;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.btn-list:hover{background:#fbbf2440}.btn-remove{background:#f871711a;border:1px solid var(--red);color:var(--red);font-size:.75rem;padding:.3rem .65rem;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.btn-remove:hover{background:#f8717133}.profile{max-width:700px;margin:0 auto}.profile-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem}.profile-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--purple));display:flex;align-items:center;justify-content:center;font-size:2rem}.profile-info h2{font-size:1.6rem;font-weight:700}.level-badge{font-size:.85rem;color:var(--purple);font-weight:600}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:2rem}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-align:center}.stat-value{font-size:1.3rem;font-weight:700;margin-bottom:.25rem}.stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.xp-bar-section{margin-bottom:2rem}.xp-label{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.5rem;color:var(--text-dim)}.xp-bar{height:10px;background:var(--bg-card);border-radius:5px;overflow:hidden;border:1px solid var(--border)}.xp-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--pink));border-radius:5px;transition:width .5s ease}.xp-hint{font-size:.8rem;color:var(--text-muted);margin-top:.5rem}.profile-tips{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.profile-tips h3{font-size:1rem;margin-bottom:.75rem;color:var(--gold)}.profile-tips ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}.profile-tips li{font-size:.85rem;color:var(--text-dim);padding-left:1.25rem;position:relative}.profile-tips li:before{content:">";position:absolute;left:0;color:var(--pink);font-weight:700}.collection-header{text-align:center;margin-bottom:2rem}.collection-header h2{font-size:1.8rem;font-weight:700;background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.collection-section{margin-bottom:2.5rem}.collection-section h3{font-size:1.1rem;font-weight:600;margin-bottom:1rem;color:var(--text-dim);padding-bottom:.5rem;border-bottom:1px solid var(--border)}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-muted)}.notif-container{position:fixed;top:70px;right:1.5rem;z-index:200;display:flex;flex-direction:column;gap:.5rem;max-width:350px}.notif{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:.85rem;color:var(--text);box-shadow:var(--shadow);animation:slideIn .3s ease}.notif-sale{border-left:3px solid var(--green)}.notif-purchase{border-left:3px solid var(--blue)}.notif-info{border-left:3px solid var(--purple)}.notif-like{border-left:3px solid var(--pink)}@keyframes slideIn{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@media(max-width:640px){.nav{flex-wrap:wrap;gap:.5rem;padding:.5rem 1rem}.nav-links{order:3;width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:.25rem}.nav-links button{font-size:.75rem;padding:.4rem .65rem;white-space:nowrap}.profile-stats{grid-template-columns:repeat(2,1fr)}.design-grid{grid-template-columns:1fr}.garment-grid{grid-template-columns:repeat(2,1fr)}.filter-row{flex-direction:column;align-items:stretch}.notif-container{right:.5rem;left:.5rem;max-width:none}}