*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d0d;--surface: #1a1a1a;--border: #2e2e2e;--text: #f0f0f0;--muted: #888;--accent: #c9a96e;--accent2: #8b5e3c;--danger: #e05252;--radius: 8px;--font: "Inter", system-ui, sans-serif}body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;line-height:1.6}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:inherit;font-size:.95rem;border:none;border-radius:var(--radius);padding:.6rem 1.4rem;transition:opacity .15s}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#000;font-weight:600}.btn-primary:hover:not(:disabled){opacity:.85}.btn-secondary{background:transparent;color:var(--accent);border:1px solid var(--accent)}.btn-secondary:hover:not(:disabled){background:#c9a96e1a}.btn-ghost{background:transparent;color:var(--muted)}.page{max-width:480px;margin:0 auto;padding:2rem 1rem}.page-wide{max-width:900px;margin:0 auto;padding:2rem 1rem}.form-group{margin-bottom:1.1rem}.form-group label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.35rem}.form-group input{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:.65rem .9rem;font-size:1rem;outline:none}.form-group input:focus{border-color:var(--accent)}.error-msg{color:var(--danger);font-size:.87rem;margin:.5rem 0}.success-msg{color:#6bba84;font-size:.87rem;margin:.5rem 0}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem}nav.top-nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-bottom:1px solid var(--border)}nav.top-nav .logo{font-size:1.1rem;font-weight:700;color:var(--accent)}.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px}.badge-free{background:#8883;color:var(--muted)}.badge-pro{background:#c9a96e2e;color:var(--accent)}.loading-screen{display:flex;justify-content:center;align-items:center;height:100vh;color:var(--muted);font-size:1.1rem}.haircut-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin-top:1rem}.haircut-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;text-align:center;transition:border-color .15s,transform .1s;padding-bottom:.75rem}.haircut-card:hover{border-color:var(--accent);transform:translateY(-2px)}.viz-compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.viz-compare img{width:100%;border-radius:10px;border:1px solid var(--border)}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:2rem auto}@keyframes spin{to{transform:rotate(360deg)}}.upload-zone{border:2px dashed var(--border);border-radius:12px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:border-color .2s}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent)}.upload-zone img{max-height:220px;border-radius:8px;margin-top:1rem}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@keyframes hair-sway{0%{transform:rotate(-1.5deg);transform-origin:50% 100%}50%{transform:rotate(1.5deg);transform-origin:50% 100%}to{transform:rotate(-1.5deg);transform-origin:50% 100%}}@keyframes hair-bounce{0%,to{transform:scaleY(1);transform-origin:50% 100%}50%{transform:scaleY(1.03);transform-origin:50% 100%}}@keyframes hair-rise{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes hair-shimmer{0%,to{opacity:.8}50%{opacity:1}}.hair-sway{animation:hair-sway 3s ease-in-out infinite}.hair-bounce{animation:hair-bounce 2.2s ease-in-out infinite}.hair-rise{animation:hair-rise 2.5s ease-in-out infinite}.hair-shimmer{animation:hair-shimmer 2.8s ease-in-out infinite}.haircut-card:hover .hair-sway,.haircut-card:hover .hair-bounce,.haircut-card:hover .hair-rise,.haircut-card:hover .hair-shimmer{animation-play-state:paused;filter:brightness(1.3)}.dashboard-grid{grid-template-columns:1fr 1.4fr}.preview-row{grid-template-columns:1fr 1fr}.preview-row-reverse .preview-first{order:-1}.pricing-grid{grid-template-columns:1fr 1fr}.plans-grid{grid-template-columns:repeat(4,1fr)}@media (max-width: 600px){nav.top-nav{padding:.85rem 1rem;flex-wrap:wrap;gap:.5rem}nav.top-nav .logo{font-size:1rem}.grid-3,.grid-2,.viz-compare,.dashboard-grid{grid-template-columns:1fr}.haircut-grid{grid-template-columns:repeat(2,1fr)}.preview-row{grid-template-columns:1fr!important}.preview-row-reverse .preview-first{order:0!important}.pricing-grid{grid-template-columns:1fr!important}.plans-grid{grid-template-columns:repeat(2,1fr)!important}.hero-heading{font-size:2rem!important}.page,.page-wide{padding:1.25rem .85rem}.face-shape-card{flex-direction:column!important}.face-shape-card img{width:100%!important;height:auto!important;max-height:180px;object-fit:cover}.upload-zone{padding:2rem 1rem}.btn-stack-mobile{width:100%}}@media (min-width: 601px) and (max-width: 768px){.grid-3{grid-template-columns:repeat(2,1fr)}.haircut-grid{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr}.preview-row{grid-template-columns:1fr!important}.preview-row-reverse .preview-first{order:0!important}.pricing-grid{grid-template-columns:1fr!important}.plans-grid{grid-template-columns:repeat(2,1fr)!important}}