.names-page{max-width:1400px;margin:0 auto;padding:2rem}.names-page-header{text-align:center;margin-bottom:3rem;padding:2rem 1rem;background:transparent;border-radius:16px;color:#111827}.names-page-title{font-size:2.75rem;font-weight:700;margin-bottom:1rem}.names-page-subtitle{font-size:1.125rem;opacity:.95}.gender-toggle{margin-bottom:2rem}.gender-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:white;border:2px solid #e5e7eb;border-radius:50px;font-weight:600;font-size:.9375rem;cursor:pointer;transition:all .2s;color:#374151}.gender-btn:hover{border-color:#3b82f6;color:#3b82f6}.gender-btn.active{background:#3b82f6;border-color:#3b82f6;color:white}.gender-btn svg{flex-shrink:0}.filter-section{display:flex;gap:.75rem;margin-bottom:2rem;flex-wrap:wrap;justify-content:center}.search-section{max-width:700px;margin:0 auto 3rem}.search-input{width:100%;padding:1.125rem 1.5rem;font-size:1rem;border:2px solid #e5e7eb;border-radius:50px;background:white;transition:all .2s;color:#111827}.search-input,.search-input:focus{outline:none;box-shadow:0 2px 8px rgba(0,0,0,.06)}.search-input:focus{border-color:#e5e7eb}.search-input::-moz-placeholder{color:#9ca3af}.search-input::placeholder{color:#9ca3af}.search-copy-btn{padding:.625rem 1.75rem;background:#667eea;color:white;border:none;border-radius:50px;font-weight:600;font-size:.9375rem;cursor:pointer;transition:all .2s;white-space:nowrap}.search-copy-btn:hover{background:#5568d3}.names-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-bottom:3rem}.name-card{background:white;padding:1.5rem;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .2s;cursor:pointer;border:2px solid transparent}.name-card:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(102,126,234,.15);border-color:transparent}.name-text{font-size:1.25rem;font-weight:600;color:#111827;margin-bottom:.5rem;text-align:center}.name-category{font-size:.75rem;color:#6b7280;text-align:center;text-transform:uppercase;letter-spacing:.5px}.copy-indicator{font-size:.875rem;color:#3b82f6;text-align:center;margin-top:.5rem;opacity:0;transition:opacity .2s}.name-card.copied .copy-indicator,.name-card:hover .copy-indicator{opacity:1}.category-filter{display:flex;gap:.75rem;margin-bottom:2rem;flex-wrap:wrap;justify-content:center}.filter-btn{padding:.625rem 1.25rem;border:2px solid #e5e7eb;background:white;border-radius:50px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .2s;color:#374151}.filter-btn:hover{border-color:#3b82f6;color:#3b82f6}.filter-btn.active{background:#3b82f6;color:white;border-color:#3b82f6}.back-button{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#f3f4f6;color:#374151;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;margin-bottom:2rem}.back-button:hover{background:#e5e7eb}@media (max-width:768px){.names-page{padding:1rem}.names-page-title{font-size:2rem}.names-page-subtitle{font-size:1rem}.gender-toggle{gap:.75rem}.gender-btn{padding:.625rem 1.25rem;font-size:.875rem}.names-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}.name-card{padding:1rem}.name-text{font-size:1.1rem}}@media (max-width:479px){.names-page{padding:.75rem}.names-page-header{margin-bottom:2rem;padding:1.5rem .75rem}.names-page-title{font-size:1.75rem;line-height:1.2}.names-page-subtitle{font-size:.95rem}.search-section{margin-bottom:2rem}.search-input{padding:1rem 1.25rem;font-size:.95rem}.names-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.625rem}.name-card{padding:.875rem}.name-text{font-size:1rem}.category-filter{gap:.5rem}.filter-btn{padding:.5rem 1rem;font-size:.8125rem;min-height:40px}.back-button{padding:.625rem 1.25rem;font-size:.9375rem;min-height:44px}}@media (min-width:480px) and (max-width:639px){.names-page-title{font-size:2.25rem}.names-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}@media (hover:none) and (pointer:coarse){.back-button,.filter-btn,.search-copy-btn{min-height:44px;min-width:44px}.name-card:hover{transform:none}.name-card:active{transform:scale(.98)}.copy-indicator{opacity:.7}}@media (max-width:896px) and (orientation:landscape){.names-page-header{padding:1rem;margin-bottom:1.5rem}.names-page-title{font-size:1.75rem;margin-bottom:.5rem}}.dark-mode .names-page-header,.dark-mode .names-page-title{color:#e5e7eb}.dark-mode .names-page-subtitle{color:#9ca3af}.dark-mode .search-input{background:#1f2937;color:#e5e7eb;border-color:white}.dark-mode .search-input::-moz-placeholder{color:#6b7280}.dark-mode .search-input::placeholder{color:#6b7280}.dark-mode .search-input:focus{border-color:#3b82f6;box-shadow:0 2px 8px rgba(59,130,246,.2)}.dark-mode .gender-btn{background:#1f2937;border-color:#374151;color:#9ca3af}.dark-mode .gender-btn:hover{border-color:#3b82f6;color:#3b82f6}.dark-mode .gender-btn.active{background:#3b82f6!important;border-color:#3b82f6!important;color:white!important}.dark-mode .filter-btn{background:#1f2937;border-color:#374151;color:#9ca3af}.dark-mode .filter-btn:hover{border-color:#3b82f6;color:#3b82f6}.dark-mode .filter-btn.active{background:#3b82f6!important;border-color:#3b82f6!important;color:white!important}.dark-mode .name-card{background:#1f2937;box-shadow:0 2px 8px rgba(0,0,0,.3)}.dark-mode .name-card:hover{box-shadow:0 6px 20px rgba(59,130,246,.2);border-color:#3b82f6}.dark-mode .name-text{color:#e5e7eb}.dark-mode .name-category{color:#9ca3af}.dark-mode .copy-indicator{color:#60a5fa}.dark-mode .name-card.copied .copy-indicator{color:#3b82f6}.dark-mode .back-button{background:#374151;color:#e5e7eb}.dark-mode .back-button:hover{background:#4b5563}.font-card{background:white;padding:1.5rem;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .2s;cursor:pointer;border:2px solid transparent}.font-card:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(102,126,234,.15);border-color:transparent}.font-card.copied{background-color:#f0fdf4!important;border-color:#10b981!important}.font-preview{font-size:1.25rem;font-weight:600;color:#111827;margin-bottom:.5rem;text-align:center}.font-card:hover .copy-indicator{opacity:1}.font-card .copy-indicator{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;color:#3b82f6;text-align:center;margin-top:.5rem;opacity:0;transition:opacity .2s}.font-card.copied .copy-indicator{opacity:1}.dark-mode .font-card{background:#1f2937;box-shadow:0 2px 8px rgba(0,0,0,.3)}.dark-mode .font-card:hover{box-shadow:0 6px 20px rgba(59,130,246,.2);border-color:#3b82f6}.dark-mode .font-preview{color:#e5e7eb}.dark-mode .font-card .copy-indicator{color:#60a5fa}.dark-mode .font-card.copied .copy-indicator{color:#10b981}.male-names-wrapper{max-width:1400px;margin:0 auto;padding:2rem}.hero-section{text-align:center;margin-bottom:3rem;padding:2rem 1rem}.hero-title{font-size:2.75rem;font-weight:700;margin-bottom:1rem;color:#111827}.hero-subtitle{font-size:1.125rem;opacity:.95;color:#374151}.gender-toggle{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.gender-toggle .toggle-btn{padding:.75rem 1.5rem;background:white;border:2px solid #e5e7eb;border-radius:50px;font-weight:600;font-size:.9375rem;cursor:pointer;transition:all .2s;color:#374151;text-decoration:none;display:inline-block}.gender-toggle .toggle-btn:hover{border-color:#3b82f6;color:#3b82f6}.gender-toggle .toggle-btn.active{background:#3b82f6;border-color:#3b82f6;color:white}.gender-toggle a{text-decoration:none}.search-wrapper{position:relative;max-width:700px;margin:0 auto}.search-icon{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);color:#9ca3af}.search-section .search-input{padding-left:3.5rem}.filter-buttons{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}.empty-state{padding:3rem 1rem;font-size:1.125rem}.empty-state,.footer{text-align:center;color:#6b7280}.footer{padding:2rem 1rem;border-top:1px solid #e5e7eb;margin-top:4rem}.dark-mode .hero-title{color:#e5e7eb}.dark-mode .hero-subtitle{color:#9ca3af}.dark-mode .gender-toggle .toggle-btn{background:#1f2937;border-color:#374151;color:#9ca3af}.dark-mode .gender-toggle .toggle-btn:hover{border-color:#3b82f6;color:#3b82f6}.dark-mode .gender-toggle .toggle-btn.active{background:#3b82f6!important;border-color:#3b82f6!important;color:white!important}.dark-mode .footer{border-top-color:#374151;color:#9ca3af}.dark-mode .empty-state{color:#9ca3af}@media (max-width:768px){.male-names-wrapper{padding:1rem}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.gender-toggle{gap:.75rem}.gender-toggle .toggle-btn{padding:.625rem 1.25rem;font-size:.875rem}.names-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}.font-card{padding:1rem}.font-preview{font-size:1.1rem}}@media (max-width:479px){.male-names-wrapper{padding:.75rem}.hero-section{margin-bottom:2rem;padding:1.5rem .75rem}.hero-title{font-size:1.75rem}.names-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.625rem}}.font-card:hover .copy-indicator,.name-card:hover .copy-indicator{opacity:0!important}.font-card.copied .copy-indicator,.name-card.copied .copy-indicator{opacity:1!important;color:#10b981;font-weight:600}@media (hover:none) and (pointer:coarse){.copy-indicator{opacity:0!important}.font-card.copied .copy-indicator,.name-card.copied .copy-indicator{opacity:1!important}}.dark-mode .font-card.copied .copy-indicator,.dark-mode .name-card.copied .copy-indicator{color:#10b981!important;opacity:1!important}