:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-card:#1a1a24;--bg-input:#0d0d12;--text-primary:#f4f4f5;--text-secondary:#a1a1aa;--text-muted:#71717a;--accent:#22c55e;--accent-hover:#16a34a;--accent-glow:rgba(34,197,94,.15);--error:#ef4444;--error-bg:rgba(239,68,68,.1);--border:#27272a;--border-focus:#3f3f46;--success:#22c55e;--success-bg:rgba(34,197,94,.1);--danger:#ef4444;--danger-bg:rgba(239,68,68,.1);--radius:12px;--radius-sm:8px;--shadow:0 4px 6px -1px rgba(0,0,0,.3),0 2px 4px -2px rgba(0,0,0,.3);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.4),0 4px 6px -4px rgba(0,0,0,.4);--transition:150ms ease}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--bg-primary);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;min-height:100vh}a{color:inherit;text-decoration:none}.app-container{display:flex;flex-direction:column;margin:0 auto;max-width:800px;min-height:100vh;padding:0 1.5rem}.header{border-bottom:1px solid var(--border);justify-content:space-between;padding:1.5rem 0}.header,.logo{align-items:center;display:flex}.logo{font-size:1.125rem;font-weight:600;gap:.5rem;transition:opacity var(--transition)}.logo:hover{opacity:.8}.logo-icon{font-size:1.25rem}.nav{align-items:center;display:flex;gap:1.5rem}.nav-link{color:var(--text-secondary);font-size:.875rem;font-weight:500;transition:color var(--transition)}.nav-link:hover{color:var(--text-primary)}.github-link svg{display:block;height:1.25rem;width:1.25rem}.main{flex:1;padding:3rem 0}.hero{margin-bottom:2.5rem;text-align:center}.hero-title{font-size:2.25rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.5rem}.hero-subtitle{color:var(--text-secondary);font-size:1rem}.checker-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:2rem}.checker-form{gap:1.5rem}.checker-form,.form-group{display:flex;flex-direction:column}.form-group{gap:.5rem}.form-label{font-size:.875rem;font-weight:500}.form-input,.form-label{color:var(--text-primary)}.form-input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:1rem;padding:.875rem 1rem;transition:border-color var(--transition),box-shadow var(--transition)}.form-input::placeholder{color:var(--text-muted)}.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);outline:none}.form-input.invalid{border-color:var(--error)}.form-hint{color:var(--text-muted);font-size:.75rem}.form-error{color:var(--error);display:none;font-size:.75rem}.form-group.has-error .form-error{display:block}.form-group.has-error .form-hint{display:none}.form-group.has-error .form-input{border-color:var(--error)}.ports-input-wrapper{display:flex;flex-direction:column;gap:.75rem}.quick-ports{display:flex;flex-wrap:wrap;gap:.5rem}.quick-port-btn{background:var(--bg-secondary);border:1px solid var(--border);border-radius:9999px;color:var(--text-secondary);cursor:pointer;font-family:inherit;font-size:.75rem;font-weight:500;padding:.375rem .75rem;transition:all var(--transition)}.quick-port-btn:hover{background:var(--bg-input);border-color:var(--border-focus);color:var(--text-primary)}.quick-port-btn.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}.submit-btn{background:var(--accent);border:none;border-radius:var(--radius-sm);color:#000;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:600;margin-top:.5rem;padding:1rem 1.5rem;transition:background var(--transition),transform var(--transition)}.submit-btn:hover:not(:disabled){background:var(--accent-hover)}.submit-btn:active:not(:disabled){transform:scale(.98)}.submit-btn:disabled{cursor:not-allowed;opacity:.7}.submit-loading{align-items:center;display:none;gap:.5rem;justify-content:center}.submit-btn.loading .submit-text{display:none}.submit-btn.loading .submit-loading{display:flex}.spinner{animation:spin 1s linear infinite;height:1.25rem;width:1.25rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.results{border-top:1px solid var(--border);margin-top:2rem;padding-top:2rem}.results.hidden{display:none}.results-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.results-title{font-size:1rem;font-weight:600}.results-host{color:var(--text-secondary);font-family:SF Mono,Fira Code,monospace;font-size:.875rem}.results-list{display:flex;flex-direction:column;gap:.5rem}.result-item{align-items:center;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;justify-content:space-between;padding:.875rem 1rem}.result-port{font-family:SF Mono,Fira Code,monospace;font-weight:500}.result-status{align-items:center;display:flex;font-size:.875rem;font-weight:500;gap:.5rem}.result-status.open{color:var(--success)}.result-status.closed{color:var(--danger)}.status-dot{background:currentColor;border-radius:50%;height:8px;width:8px}.error-message{align-items:center;background:var(--error-bg);border:1px solid var(--error);border-radius:var(--radius-sm);color:var(--error);display:flex;font-size:.875rem;gap:.75rem;margin-top:1.5rem;padding:1rem}.error-message.hidden{display:none}.error-icon{flex-shrink:0;height:1.25rem;width:1.25rem}.footer{border-top:1px solid var(--border);margin-top:auto;padding:1.5rem 0}.footer-content{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}.copyright{color:var(--text-muted);font-size:.875rem}.copyright a{color:var(--text-secondary);transition:color var(--transition)}.copyright a:hover{color:var(--text-primary)}.footer-links{align-items:center;display:flex;gap:1rem}.footer-links img{display:block;opacity:.8;transition:opacity var(--transition)}.footer-links a:hover img{opacity:1}@media (max-width:640px){.app-container{padding:0 1rem}.hero-title{font-size:1.75rem}.checker-card{padding:1.5rem}.footer-content{flex-direction:column;text-align:center}}