:root{--primary-color: #8B5A3C;--primary-dark: #6B4423;--secondary-color: #D4A574;--accent-color: #C19A6B;--background: #F5F1ED;--surface: #FFFFFF;--text-primary: #2D2D2D;--text-secondary: #6B7280;--border: #E5E7EB;--danger: #EF4444;--success: #10B981;--wood-dark: #5D4E37;--wood-light: #8B7355}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,var(--background) 0%,#E8DED3 100%);color:var(--text-primary);min-height:100vh}#root{min-height:100vh}.loading{display:flex;align-items:center;justify-content:center;min-height:100vh;font-size:1.2rem;color:var(--text-secondary)}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}.login-box{background:var(--surface);border-radius:12px;box-shadow:0 10px 40px #0000001a;padding:3rem;width:100%;max-width:420px}.login-header{text-align:center;margin-bottom:2rem}.login-header svg{color:var(--primary-color);margin-bottom:1rem}.login-header h1{font-size:2rem;color:var(--primary-color);margin-bottom:.5rem}.login-header p{color:var(--text-secondary);font-size:.95rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-primary);font-weight:500}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem;border:1px solid var(--border);border-radius:6px;font-size:1rem;transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-color)}.form-group textarea{resize:vertical;font-family:inherit}.error-message{background:#fee2e2;color:var(--danger);padding:.75rem;border-radius:6px;margin-bottom:1rem;font-size:.9rem}.btn-primary,.btn-secondary,.btn-danger{width:100%;padding:.75rem 1.5rem;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-primary:disabled{background:var(--text-secondary);cursor:not-allowed}.btn-secondary{background:var(--border);color:var(--text-primary)}.btn-secondary:hover{background:#d1d5db}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#dc2626}.btn-link{background:none;border:none;color:var(--primary-color);cursor:pointer;font-size:.9rem;text-decoration:underline;padding:0}.btn-link:hover{color:var(--primary-dark)}.login-divider{margin:1.5rem 0;text-align:center;position:relative}.login-divider:before,.login-divider:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:var(--border)}.login-divider:before{left:0}.login-divider:after{right:0}.login-divider span{color:var(--text-secondary);font-size:.9rem;padding:0 1rem;background:var(--surface)}.oauth-providers{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.btn-oauth{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:.875rem 1.25rem;border:1.5px solid var(--border);background:var(--surface);color:var(--text-primary);font-size:1rem;font-weight:500;border-radius:8px;cursor:pointer;transition:all .2s ease}.btn-oauth:hover:not(:disabled){background:var(--background);border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-1px);box-shadow:0 2px 8px #8b5a3c26}.btn-oauth:active:not(:disabled){transform:translateY(0)}.btn-oauth:disabled{opacity:.6;cursor:not-allowed}.btn-oauth svg{flex-shrink:0}.login-footer{margin-top:1.5rem;text-align:center}.btn-icon{background:none;border:1px solid var(--border);padding:.5rem;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;color:var(--text-primary);width:auto}.btn-icon:hover{background:var(--border);border-color:var(--primary-color)}.btn-icon.btn-primary{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.btn-icon.btn-primary:hover{background:var(--primary-dark)}.btn-danger-icon{color:var(--danger)}.btn-danger-icon:hover{background:#fee2e2;border-color:var(--danger)}.closet-container{min-height:100vh;display:flex;flex-direction:column}.closet-header{background:linear-gradient(135deg,var(--wood-dark) 0%,var(--wood-light) 100%);color:#fff;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 12px #00000026}.header-content h1{font-size:1.8rem;margin-bottom:.25rem}.user-greeting{font-size:.9rem;opacity:.9}.header-actions{display:flex;gap:.75rem;align-items:center}.header-actions .btn-icon{border-color:#ffffff4d;color:#fff}.header-actions .btn-icon:hover{background:#ffffff1a;border-color:#fff}.header-actions .btn-primary{width:auto}.search-bar{background:var(--surface);padding:1.5rem 2rem;display:flex;align-items:center;gap:1rem;box-shadow:0 2px 8px #0000000d}.search-bar svg{color:var(--text-secondary)}.search-bar input{flex:1;border:1px solid var(--border);padding:.75rem;border-radius:6px;font-size:1rem}.search-bar input:focus{outline:none;border-color:var(--primary-color)}.clear-filters-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--danger);color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.clear-filters-btn:hover{background:#dc2626;transform:translateY(-1px)}.tag-filters{background:var(--surface);box-shadow:0 2px 8px #0000000d;border-top:1px solid var(--border)}.tag-filters-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:transparent;border:none;cursor:pointer;transition:background-color .2s;gap:1rem}.tag-filters-toggle:hover{background:#00000005}.tag-filters-toggle:active{background:#0000000d}.tag-filters-toggle-content{display:flex;align-items:center;gap:.75rem;flex:1;font-size:.95rem;font-weight:500;color:var(--text-primary)}.tag-filters-toggle-content svg{color:var(--primary-color);flex-shrink:0}.selected-tag-count{background:var(--primary-color);color:#fff;padding:.2rem .6rem;border-radius:12px;font-size:.75rem;font-weight:600}.tag-filter-buttons{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 2rem 1rem;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tag-filter-btn{display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border:2px solid;border-radius:20px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;background:transparent}.tag-filter-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.tag-filter-btn:active{transform:translateY(0)}.tag-filter-btn.active{box-shadow:0 4px 12px #00000026}.tag-filter-btn svg{flex-shrink:0}@media(max-width:768px){.tag-filters-toggle{padding:.875rem 1rem}.tag-filters-toggle-content{font-size:.9rem}.tag-filter-buttons{padding:0 1rem 1rem;gap:.4rem}.tag-filter-btn{font-size:.8rem;padding:.4rem .8rem}}.closet-content{flex:1;padding:2rem}.wardrobe{max-width:1400px;margin:0 auto;position:relative}.wardrobe-rail{height:8px;background:linear-gradient(90deg,var(--wood-dark) 0%,var(--wood-light) 50%,var(--wood-dark) 100%);border-radius:4px;margin-bottom:1rem;box-shadow:0 2px 4px #0003}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2rem;padding:1rem 0}.clothing-item{background:var(--surface);border-radius:12px;padding:1rem;box-shadow:0 4px 12px #00000014;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative}.clothing-item:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0000001f}.item-hanger{width:60px;height:8px;background:var(--wood-light);border-radius:4px;margin:0 auto .5rem;position:relative}.item-hanger:before{content:"";position:absolute;width:12px;height:12px;background:var(--wood-dark);border-radius:50%;top:-6px;left:50%;transform:translate(-50%)}.item-image-container{width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:8px;margin-bottom:1rem;background:var(--background)}.item-image-container img{width:100%;height:100%;object-fit:cover}.item-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary);font-size:.9rem}.item-info h3{font-size:1.1rem;margin-bottom:.5rem;color:var(--text-primary)}.item-location{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.85rem;margin-bottom:.5rem}.item-tags{display:flex;flex-wrap:wrap;gap:.5rem}.tag-badge{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;color:#fff;font-weight:500}.empty-state{text-align:center;padding:4rem 2rem;color:var(--text-secondary)}.empty-state p{font-size:1.2rem;margin-bottom:1.5rem}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;padding:2rem;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:var(--surface);border-radius:12px;box-shadow:0 20px 60px #0000004d;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;position:relative}.modal-content.manager-modal{max-width:600px}.modal-content.item-detail-modal{max-width:900px;max-height:90vh;overflow:hidden}.modal-close{position:absolute;top:1rem;right:1rem;background:var(--border);border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;z-index:1}.modal-close:hover{background:#d1d5db}.modal-body{padding:2rem}.modal-body h2{margin-bottom:1.5rem;color:var(--primary-color);display:flex;align-items:center;gap:.75rem}.form-actions{display:flex;gap:1rem;margin-top:1.5rem}.form-actions button{flex:1}.photo-upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;border:2px dashed var(--border);border-radius:8px;cursor:pointer;transition:border-color .2s;color:var(--text-secondary)}.photo-upload-label:hover{border-color:var(--primary-color);color:var(--primary-color)}.photo-upload-label span{margin-top:.5rem}.photo-preview{text-align:center}.photo-preview img{max-width:100%;max-height:300px;border-radius:8px;margin-bottom:1rem}.tags-selection{display:flex;flex-wrap:wrap;gap:.75rem}.tag-option{padding:.5rem 1rem;border-radius:6px;border:2px solid;cursor:pointer;transition:all .2s;font-weight:500;color:#fff}.tag-option:not(.selected){color:var(--text-primary)}.tag-option:hover{transform:scale(1.05)}.item-detail-container{display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.item-detail-image-section{flex-shrink:0;width:100%;max-height:400px;overflow:hidden;background:var(--background);display:flex;align-items:center;justify-content:center}.item-detail-image-section img{width:100%;height:100%;object-fit:contain;max-height:400px}.item-placeholder-large{display:flex;align-items:center;justify-content:center;height:300px;width:100%;background:var(--background);color:var(--text-secondary);font-size:1.1rem}.item-detail-info-section{padding:2rem;overflow-y:auto;flex:1}.item-detail-info-section h2{margin-bottom:1.5rem;color:var(--text-primary);font-size:1.75rem}@media(min-width:768px){.item-detail-container{flex-direction:row}.item-detail-image-section{width:50%;max-height:none;min-height:500px}.item-detail-image-section img{max-height:none;height:100%}.item-detail-info-section{width:50%;max-height:90vh}}.detail-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;color:var(--text-secondary)}.detail-row svg{flex-shrink:0}.detail-notes{margin:1.5rem 0;padding:1rem;background:var(--background);border-radius:8px}.detail-notes strong{display:block;margin-bottom:.5rem;color:var(--text-primary)}.detail-notes p{color:var(--text-secondary);line-height:1.6}.manager-form{margin-bottom:2rem}.form-row{display:flex;gap:.75rem;align-items:start}.form-input{flex:1;padding:.75rem;border:1px solid var(--border);border-radius:6px;font-size:1rem}.form-input:focus{outline:none;border-color:var(--primary-color)}.color-picker{display:flex;align-items:center;gap:.5rem}.color-input{width:50px;height:42px;border:1px solid var(--border);border-radius:6px;cursor:pointer}.preset-colors{display:flex;gap:.25rem}.color-preset{width:28px;height:28px;border-radius:4px;border:2px solid white;box-shadow:0 2px 4px #0000001a;cursor:pointer;transition:transform .2s}.color-preset:hover{transform:scale(1.15)}.manager-list{max-height:400px;overflow-y:auto}.manager-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-radius:8px;background:var(--background);margin-bottom:.75rem}.manager-item-info{display:flex;flex-direction:column;gap:.25rem}.manager-item-desc{font-size:.85rem;color:var(--text-secondary)}.empty-message{text-align:center;color:var(--text-secondary);padding:2rem}.search-box{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--background);border:1px solid var(--border);border-radius:8px;margin-bottom:1rem}.search-input-small{flex:1;border:none;background:transparent;font-size:.95rem;outline:none;color:var(--text)}.search-input-small::placeholder{color:var(--text-secondary)}.no-results{text-align:center;color:var(--text-secondary);padding:2rem;grid-column:1 / -1}.detail-actions{display:flex;gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}@media(max-width:768px){.closet-header{flex-direction:column;gap:1rem;align-items:stretch}.header-actions{justify-content:space-between}.items-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}.modal-content{max-width:100%;margin:1rem}.form-row{flex-direction:column}.color-picker{flex-direction:column;align-items:stretch}}.tabs-container{background:var(--surface);border-bottom:2px solid var(--border)}.tabs{max-width:1400px;margin:0 auto;display:flex;gap:.5rem;padding:0 2rem}.tab{padding:1rem 1.5rem;border:none;background:none;color:var(--text-secondary);font-size:1rem;font-weight:500;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;display:flex;align-items:center;gap:.5rem}.tab:hover{color:var(--text-primary);background:var(--background)}.tab.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.outfits-container{padding:2rem;max-width:1400px;margin:0 auto}.outfits-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.outfits-header h2{display:flex;align-items:center;gap:.75rem;color:var(--primary-color);font-size:1.8rem;margin:0}.outfits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem}.outfit-card{background:var(--surface);border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #00000014;cursor:pointer;transition:transform .2s,box-shadow .2s}.outfit-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0000001f}.outfit-card-image{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--background);position:relative}.outfit-card-image img{width:100%;height:100%;object-fit:cover}.outfit-items-preview{display:grid;grid-template-columns:1fr 1fr;gap:2px;height:100%;background:var(--border)}.outfit-preview-item{background:var(--background);position:relative}.outfit-preview-item img{width:100%;height:100%;object-fit:cover}.outfit-preview-more{position:absolute;bottom:8px;right:8px;background:#000000b3;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.85rem;font-weight:600}.outfit-card-info{padding:1rem}.outfit-card-info h3{font-size:1.1rem;margin-bottom:.5rem;color:var(--text-primary)}.outfit-occasion{display:inline-block;background:var(--accent-color);color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:500;margin-bottom:.5rem}.outfit-items-count{color:var(--text-secondary);font-size:.85rem}.modal-large{max-width:800px}.outfit-detail{max-width:900px}.outfit-detail-content{display:flex;flex-direction:column}.outfit-detail-photo{width:100%;max-height:400px;overflow:hidden;border-radius:12px 12px 0 0}.outfit-detail-photo img{width:100%;height:100%;object-fit:cover}.outfit-detail-info{padding:2rem}.outfit-items-section{margin:2rem 0}.outfit-items-section h3{font-size:1.2rem;color:var(--text-primary);margin-bottom:1rem}.outfit-items-list{display:flex;flex-direction:column;gap:1rem}.outfit-item-detail{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--background);border-radius:8px;cursor:pointer;transition:background .2s}.outfit-item-detail:hover{background:var(--border)}.outfit-item-thumb{width:80px;height:80px;border-radius:6px;overflow:hidden;background:var(--surface);flex-shrink:0}.outfit-item-thumb img{width:100%;height:100%;object-fit:cover}.outfit-item-info{flex:1;display:flex;flex-direction:column;gap:.25rem}.outfit-item-info strong{color:var(--text-primary)}.outfit-item-location{color:var(--text-secondary);font-size:.85rem}.outfit-item-link-icon{color:var(--primary-color);flex-shrink:0}.outfit-items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;max-height:400px;overflow-y:auto;padding:1rem;background:var(--background);border-radius:8px}.outfit-item-card{position:relative;background:var(--surface);border:2px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s}.outfit-item-card:hover{border-color:var(--primary-color);transform:scale(1.02)}.outfit-item-card.selected{border-color:var(--primary-color);box-shadow:0 4px 12px #8b5a3c4d}.outfit-item-image{width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--background)}.outfit-item-image img{width:100%;height:100%;object-fit:cover}.outfit-item-name{padding:.5rem;font-size:.85rem;text-align:center;color:var(--text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outfit-item-checkmark{position:absolute;top:8px;right:8px;width:28px;height:28px;background:var(--primary-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;box-shadow:0 2px 8px #0003}.item-placeholder-small,.item-placeholder-tiny{display:flex;align-items:center;justify-content:center;height:100%;background:var(--background);color:var(--text-secondary);font-size:.85rem}.item-placeholder-tiny{font-size:1.5rem;font-weight:700}.help-text{margin-top:.5rem;font-size:.85rem;color:var(--text-secondary)}@media(max-width:768px){.outfits-header{flex-direction:column;gap:1rem;align-items:stretch}.outfits-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}.outfit-items-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.outfit-detail-content{flex-direction:column}.tabs{padding:0 1rem}.tab{padding:.75rem 1rem;font-size:.9rem}}