body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0a;--bg-secondary: #151515;--bg-card: #1a1a1a;--text-primary: #ffffff;--text-secondary: #a0a0a0;--border-color: #2a2a2a;--accent-color: #3b82f6;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -1px rgba(0, 0, 0, .2)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:linear-gradient(135deg,#1a1a1a,#0f0f0f);border-bottom:1px solid var(--border-color);padding:3rem 2rem;text-align:center}.header-content{max-width:1200px;margin:0 auto}.logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:.5rem}.logo-svg{height:60px;width:auto;color:var(--text-primary);filter:drop-shadow(0 2px 8px rgba(59,130,246,.3));transition:all .3s ease}.logo-svg:hover{filter:drop-shadow(0 4px 12px rgba(59,130,246,.5));transform:translateY(-2px)}.logo-icon{animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.tagline{font-size:1.125rem;color:var(--text-secondary);font-weight:300}.search-section{max-width:1200px;margin:2rem auto;padding:0 2rem;display:flex;gap:1rem;width:100%}.search-container{flex:1;position:relative}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-secondary)}.search-input{width:100%;padding:.875rem 1rem .875rem 3rem;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;color:var(--text-primary);font-size:1rem;transition:all .2s ease}.search-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #3b82f61a}.search-input::placeholder{color:var(--text-secondary)}.filter-button{display:flex;align-items:center;gap:.5rem;padding:.875rem 1.5rem;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;color:var(--text-primary);font-size:1rem;cursor:pointer;transition:all .2s ease;white-space:nowrap}.filter-button:hover{background-color:var(--bg-secondary);border-color:var(--accent-color)}.screenshot-section{max-width:1200px;margin:1.5rem auto;padding:0 2rem}.screenshot-container{background:linear-gradient(135deg,#3b82f61a,#8b5cf61a);border:2px dashed var(--border-color);border-radius:16px;padding:2rem;text-align:center;transition:all .3s ease}.screenshot-container:hover{border-color:var(--accent-color);background:linear-gradient(135deg,#3b82f626,#8b5cf626)}.screenshot-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.screenshot-subtitle{font-size:.875rem;color:var(--text-secondary);margin-bottom:1.5rem}.upload-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.upload-button{display:flex;align-items:center;gap:.5rem;padding:.875rem 1.5rem;background-color:var(--accent-color);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-button:hover:not(:disabled){background-color:#2563eb;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f64d}.upload-button:disabled{opacity:.6;cursor:not-allowed}.upload-button.camera{background-color:transparent;border:2px solid var(--accent-color);color:var(--accent-color)}.upload-button.camera:hover:not(:disabled){background-color:var(--accent-color);color:#fff}.screenshot-help{margin-top:1rem;text-align:center}.help-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;background:none;border:none;color:var(--text-secondary);font-size:.8125rem;cursor:pointer;transition:all .2s ease;border-radius:6px}.help-button:hover{color:var(--accent-color);background-color:#3b82f61a}.help-section{margin-bottom:2rem}.help-section:last-of-type{margin-bottom:1.5rem}.help-section h3{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.help-content{color:var(--text-secondary);line-height:1.8}.help-content p{margin-bottom:.75rem}.help-content strong{color:var(--text-primary);font-weight:600}.help-content ul{margin:.5rem 0 1rem 1.5rem;list-style-type:disc}.help-content li{margin-bottom:.5rem;color:var(--text-secondary)}.help-tip{display:flex;gap:.75rem;padding:1rem;background:#3b82f61a;border:1px solid rgba(59,130,246,.2);border-radius:12px;color:var(--text-primary)}.help-tip p{margin:0;font-size:.875rem;line-height:1.6}.detected-apps-section{max-width:1200px;margin:2rem auto;padding:0 2rem;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem}.detected-apps-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.detected-apps-header h2{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.close-detected{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.close-detected:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.detected-apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}.detected-app-card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1.25rem;transition:all .3s ease}.detected-app-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background-color:var(--difficulty-color);opacity:0;transition:opacity .3s ease;border-radius:12px 12px 0 0}.detected-app-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--difficulty-color)}.detected-app-card:hover:before{opacity:1}.unknown-apps-section{max-width:1200px;margin:1.5rem auto;padding:1.5rem 2rem;background-color:#fbbf241a;border:1px solid rgba(251,191,36,.3);border-radius:16px}.unknown-apps-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;color:#fbbf24}.unknown-apps-header h3{font-size:1.125rem;font-weight:600;margin:0}.unknown-apps-subtitle{color:var(--text-secondary);font-size:.875rem;margin-bottom:1.25rem;line-height:1.5}.unknown-apps-list{display:flex;flex-direction:column;gap:.75rem}.unknown-app-item{display:flex;align-items:center;gap:1rem;padding:1rem;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:left;color:var(--text-primary);font-size:1rem;width:100%}.unknown-app-item:hover{background-color:var(--bg-secondary);border-color:#fbbf24;transform:translate(4px)}.unknown-app-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background-color:#fbbf2433;border-radius:8px;color:#fbbf24;flex-shrink:0}.unknown-app-name{flex:1;font-weight:500}.unknown-app-arrow{color:var(--text-secondary);flex-shrink:0}.alphabet-filter{max-width:1200px;margin:1.5rem auto 1rem;padding:0 2rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.letter-pill{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:0 .75rem;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.letter-pill:hover{background-color:var(--bg-secondary);border-color:var(--accent-color);color:var(--text-primary);transform:translateY(-2px)}.letter-pill.active{background-color:var(--accent-color);border-color:var(--accent-color);color:#fff;transform:scale(1.05)}.letter-pill.active-popular{background:linear-gradient(135deg,#fbbf24,#f59e0b);border-color:#fbbf24;color:#000;transform:scale(1.05)}.difficulty-filters{max-width:1200px;margin:0 auto 1rem;padding:0 2rem;display:flex;gap:.75rem;flex-wrap:wrap}.filter-pill{padding:.5rem 1.25rem;border-radius:9999px;border:2px solid;background-color:transparent;cursor:pointer;font-size:.875rem;font-weight:600;transition:all .2s ease}.filter-pill.active{transform:scale(1.05)}.filter-pill:hover{transform:translateY(-2px)}.results-info{max-width:1200px;margin:0 auto 1.5rem;padding:0 2rem}.results-info p{color:var(--text-secondary);font-size:.875rem}.services-grid{max-width:1200px;margin:0 auto;padding:0 2rem 3rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;flex:1}.service-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem;transition:all .3s ease;position:relative;overflow:hidden}.service-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background-color:var(--difficulty-color);opacity:0;transition:opacity .3s ease}.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--difficulty-color)}.service-card:hover:before{opacity:1}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}.service-icon{width:48px;height:48px;border-radius:12px;overflow:hidden;background-color:var(--bg-secondary);flex-shrink:0;position:relative}.service-icon img{width:100%;height:100%;object-fit:cover}.service-icon-fallback{width:100%;height:100%;display:none;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:var(--text-primary);background:linear-gradient(135deg,#3b82f6,#8b5cf6)}.service-info{flex:1;min-width:0}.service-name{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.difficulty-badge{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;color:#000}.service-actions{display:flex;gap:.75rem}.action-button{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border-radius:10px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:none;border:none}.action-button.primary{background-color:var(--accent-color);color:#fff}.action-button.primary:hover{background-color:#2563eb;transform:scale(1.02)}.action-button.secondary{background-color:transparent;color:var(--text-primary);border:1px solid var(--border-color)}.action-button.secondary:hover{background-color:var(--bg-secondary);border-color:var(--accent-color)}.action-button.full-width{width:100%}.modal-overlay{position:fixed;inset:0;background-color:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:20px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--border-color)}.modal-title-section{display:flex;align-items:center;gap:1rem}.modal-icon{width:40px;height:40px;border-radius:10px}.modal-header h2{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.close-button{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.close-button:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.modal-body{padding:1.5rem}.modal-difficulty{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding:1rem;background-color:var(--bg-secondary);border-radius:12px}.modal-section{margin-bottom:1.5rem}.modal-section h3{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.75rem}.modal-section p{color:var(--text-secondary);line-height:1.6}.modal-section a{color:var(--accent-color);text-decoration:none}.modal-section a:hover{text-decoration:underline}.email-template{margin-top:1rem;padding:1rem;background-color:var(--bg-secondary);border-radius:8px}.email-template pre{color:var(--text-secondary);white-space:pre-wrap;word-wrap:break-word;font-family:inherit;font-size:.875rem;line-height:1.6}.domain-list{display:flex;flex-wrap:wrap;gap:.5rem}.domain-tag{padding:.375rem .75rem;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;font-size:.75rem;color:var(--text-secondary);font-family:monospace}.footer{background-color:var(--bg-secondary);border-top:1px solid var(--border-color);padding:2rem;text-align:center;margin-top:auto}.footer p{color:var(--text-secondary);font-size:.875rem;margin-bottom:.5rem}.footer a{color:var(--accent-color);text-decoration:none}.footer a:hover{text-decoration:underline}@media(max-width:768px){.logo-svg{height:50px}.tagline{font-size:1rem}.search-section{flex-direction:column}.services-grid{grid-template-columns:1fr;padding:0 1rem 2rem}.difficulty-filters,.results-info,.search-section,.alphabet-filter,.screenshot-section,.detected-apps-section{padding:0 1rem}.header{padding:2rem 1rem}.letter-pill{min-width:36px;height:36px;font-size:.8125rem;padding:0 .5rem}.screenshot-container{padding:1.5rem 1rem}.screenshot-title{font-size:1.125rem}.upload-buttons{flex-direction:column}.upload-button{width:100%;justify-content:center}.detected-apps-grid{grid-template-columns:1fr}.help-button{font-size:.75rem;padding:.375rem .625rem}.service-card,.detected-app-card{padding:1rem}.alphabet-filter{gap:.375rem}.letter-pill{min-width:32px;height:32px;font-size:.75rem}.modal{max-width:95%;margin:1rem}.help-section h3{font-size:1rem}.help-content ul{margin-left:1rem}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#3a3a3a}.debug-section{max-width:1200px;margin:1.5rem auto;padding:0 2rem}.debug-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding:1rem;background:linear-gradient(135deg,#22d3ee1a,#3b82f61a);border:1px solid rgba(34,211,238,.3);border-radius:12px 12px 0 0}.debug-header h3{font-size:1rem;font-weight:600;color:#22d3ee;margin:0;display:flex;align-items:center;gap:.5rem}.debug-header h3:before{content:"🔍";font-size:1.25rem}.close-debug{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.close-debug:hover{background-color:#22d3ee33;color:#22d3ee}.debug-output{background-color:#0a0a0a;border:1px solid rgba(34,211,238,.3);border-top:none;border-radius:0 0 12px 12px;padding:1.5rem;overflow-x:auto;font-family:Courier New,Courier,monospace;font-size:.875rem;line-height:1.6;color:#22d3ee;white-space:pre-wrap;word-wrap:break-word;max-height:400px;overflow-y:auto}.debug-output::-webkit-scrollbar{width:8px;height:8px}.debug-output::-webkit-scrollbar-track{background:#151515;border-radius:4px}.debug-output::-webkit-scrollbar-thumb{background:#22d3ee4d;border-radius:4px}.debug-output::-webkit-scrollbar-thumb:hover{background:#22d3ee80}.search-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;gap:1.5rem}.loading-spinner{width:48px;height:48px;border:4px solid var(--bg-secondary);border-top:4px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.search-loading p{color:var(--text-secondary);font-size:1rem}.search-instructions{display:flex;flex-direction:column;gap:1.5rem}.instructions-content{line-height:1.8}.instructions-content p{color:var(--text-primary);margin-bottom:.75rem;white-space:pre-wrap}.instructions-content p:empty{margin-bottom:.25rem}.search-fallback{padding:1rem;background-color:var(--bg-secondary);border-radius:12px;border:1px solid var(--border-color);margin-top:1rem}.search-fallback p{color:var(--text-secondary);font-size:.875rem;margin:0}.search-fallback a{color:var(--accent-color);text-decoration:none;font-weight:600}.search-fallback a:hover{text-decoration:underline}