:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0a;--surface: #141414;--surface-hover: #1a1a1a;--border: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .15);--text: #fafafa;--text-muted: rgba(255, 255, 255, .55);--accent: #e8b4b8;--accent-dim: rgba(232, 180, 184, .15);--gold: #f5c542;--radius: .75rem}*{box-sizing:border-box;margin:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{max-width:72rem;margin:0 auto;padding:2rem 1.5rem 3rem}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:2rem;font-weight:700;letter-spacing:-.03em;margin-bottom:.5rem}.header-icon{display:inline-block;transform:scaleX(-1)}.subtitle{color:var(--text-muted);font-size:.95rem}.controls{margin-bottom:1.5rem}.search-row{display:flex;gap:.75rem;margin-bottom:1rem}.search-input{flex:1;padding:.6rem 1rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.9rem;outline:none;transition:border-color .2s}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{border-color:var(--border-hover)}.fav-toggle{padding:.6rem 1rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:.85rem;cursor:pointer;white-space:nowrap;transition:all .2s}.fav-toggle:hover{border-color:var(--border-hover);color:var(--text)}.fav-toggle.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.filters{display:flex;gap:.75rem;flex-wrap:wrap}.filters label{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-muted)}.filters label span{font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem}.filters select{padding:.45rem .75rem;border-radius:.5rem;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.85rem;cursor:pointer;outline:none;transition:border-color .2s}.filters select:focus{border-color:var(--border-hover)}.results-info{color:var(--text-muted);font-size:.8rem;margin-bottom:1rem;padding-left:.25rem}.results-info strong{color:var(--text)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1rem}.haircut-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;cursor:pointer;transition:all .2s}.haircut-card:hover{border-color:var(--border-hover);background:var(--surface-hover);transform:translateY(-1px)}.haircut-card.expanded{border-color:var(--accent)}.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}.card-emoji{font-size:1.75rem}.fav-btn{background:none;border:none;font-size:1.25rem;cursor:pointer;color:var(--text-muted);padding:.25rem;transition:color .2s,transform .15s;line-height:1}.fav-btn:hover{transform:scale(1.2)}.fav-btn.active{color:var(--gold)}.haircut-card h3{font-size:1.1rem;font-weight:600;margin-bottom:.4rem;letter-spacing:-.01em}.card-desc{color:var(--text-muted);font-size:.85rem;margin-bottom:.75rem;line-height:1.5}.card-tags{display:flex;flex-wrap:wrap;gap:.4rem}.badge{display:inline-block;padding:.2rem .55rem;border-radius:.35rem;font-size:.7rem;font-weight:500;text-transform:capitalize;background:#ffffff0f;color:var(--text-muted);border:1px solid rgba(255,255,255,.06)}.badge-men{background:#64a0ff1a;color:#7ab3ff;border-color:#64a0ff26}.badge-women{background:#ff82b41a;color:#ff82b4;border-color:#ff82b426}.badge-unisex{background:#a082ff1a;color:#b08cff;border-color:#a082ff26}.badge-maint-low{background:#50c8781a;color:#50c878;border-color:#50c87826}.badge-maint-medium{background:#ffc83c1a;color:#f5c542;border-color:#ffc83c26}.badge-maint-high{background:#ff64641a;color:#ff7070;border-color:#ff646426}.card-tips{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border);font-size:.85rem;color:var(--text-muted);line-height:1.5}.card-tips strong{color:var(--accent)}.empty{text-align:center;padding:3rem 1rem;color:var(--text-muted)}.footer{text-align:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border);color:var(--text-muted);font-size:.8rem}@media(max-width:640px){.app{padding:1.25rem 1rem 2rem}.header h1{font-size:1.5rem}.search-row{flex-direction:column}.filters{gap:.5rem}.filters label{flex:1 1 calc(50% - .5rem);justify-content:space-between}.grid{grid-template-columns:1fr}}