:root{--bg-primary: #f8fafc;--bg-secondary: #ffffff;--bg-card: #f1f5f9;--text-primary: #1e293b;--text-secondary: #475569;--text-muted: #64748b;--accent-blue: #3b82f6;--accent-green: #10b981;--accent-yellow: #eab308;--accent-orange: #f97316;--accent-purple: #7c3aed;--border-color: #e2e8f0;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .1)}[data-theme=dark]{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-card: #334155;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--border-color: #475569;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .3)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-card: #334155;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--border-color: #475569;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .3)}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6;transition:background-color .3s,color .3s}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:var(--bg-secondary);padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);transition:background-color .3s,border-color .3s}.header-content h1{font-size:1.75rem;font-weight:700;margin-bottom:.25rem}.subtitle{color:var(--text-secondary);font-size:.9rem}.header-controls{display:flex;align-items:center;gap:1rem}.theme-toggle-btn{background:var(--bg-card);border:1px solid var(--border-color);padding:.5rem .75rem;border-radius:8px;cursor:pointer;font-size:1.2rem;transition:background-color .2s,border-color .2s;display:flex;align-items:center;justify-content:center}.theme-toggle-btn:hover{background:var(--bg-secondary);border-color:var(--accent-blue)}.language-selector{position:relative}.language-select{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color);padding:.5rem 1rem;border-radius:6px;font-size:.9rem;cursor:pointer;outline:none;transition:border-color .2s,background-color .3s}.language-select:hover,.language-select:focus{border-color:var(--accent-blue)}.app-main{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.nat-detector{text-align:center;margin-bottom:2rem}.detector-status{margin-bottom:1.5rem}.status-message{color:var(--text-secondary);font-size:1rem}.progress-container{display:flex;align-items:center;gap:1rem;max-width:400px;margin:0 auto 1rem}.progress-bar{flex:1;height:8px;background:var(--bg-card);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-blue),var(--accent-purple));border-radius:4px;transition:width .3s ease}.progress-text{color:var(--text-secondary);font-size:.85rem;min-width:40px}.detect-button{background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));color:#fff;border:none;padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:transform .2s,box-shadow .2s;display:inline-flex;align-items:center;gap:.5rem}.detect-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #3b82f666}.detect-button:disabled{opacity:.7;cursor:not-allowed}.detect-button.detecting{background:var(--bg-card);color:var(--text-primary)}.spinner{width:20px;height:20px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-message{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#dc2626;padding:.75rem 1rem;border-radius:6px;margin-bottom:1rem;display:inline-flex;align-items:center;gap:.5rem}[data-theme=dark] .error-message{color:#fca5a5}.result-display{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.result-card{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color);box-shadow:var(--shadow);transition:background-color .3s,border-color .3s}.card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.card-icon{font-size:1.5rem}.card-header h3{font-size:1.1rem;font-weight:600}.nat-type-result{background:var(--bg-card);border-radius:8px;padding:1rem;border-left:4px solid;margin-bottom:1rem;transition:background-color .3s}.nat-type-name{font-size:1.25rem;font-weight:700;display:block;margin-bottom:.5rem}.nat-type-description{color:var(--text-secondary);font-size:.9rem}.nat-details{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}.nat-details h4{font-size:.9rem;color:var(--text-secondary);margin-bottom:.5rem}.nat-details p{font-size:.85rem;color:var(--text-muted)}.details-card .details-content{background:var(--bg-card);border-radius:8px;padding:1rem;border-left:4px solid var(--accent-blue)}.details-card .details-content p{font-size:.9rem;color:var(--text-secondary);line-height:1.6;margin:0 0 .5rem}.details-card .details-content p:last-child{margin-bottom:0}.ip-label.clickable{cursor:pointer;transition:opacity .2s}.ip-label.clickable:hover{opacity:.8}.ip-info{display:flex;flex-direction:column;gap:.75rem}.ip-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:var(--bg-card);border-radius:6px;transition:background-color .3s}.ip-label{color:var(--text-secondary);font-size:.9rem}.ip-value{font-family:Monaco,Menlo,monospace;color:var(--accent-green);font-size:.9rem;word-break:break-all}.ip-value.ipv6{color:var(--accent-blue);font-size:.8rem}.ip-value.not-available{color:var(--text-muted);font-style:italic}.ip-value.local{color:var(--text-secondary)}.ip-value.badge{font-family:inherit;padding:.25rem .5rem;border-radius:4px;font-size:.8rem;font-weight:500}.ip-value.badge.dual-stack{background:#10b98133;color:var(--accent-green)}.ip-value.badge.ipv4-only{background:#eab30833;color:var(--accent-yellow)}.ip-row.connection-type{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border-color)}.compatibility-list{display:flex;flex-direction:column;gap:1rem}.compatibility-item{display:flex;flex-direction:column;gap:.5rem}.compatibility-header{display:flex;justify-content:space-between;align-items:center}.compatibility-label{font-size:.9rem;color:var(--text-secondary)}.compatibility-score{font-size:.85rem;font-weight:600}.compatibility-bar{height:6px;background:var(--bg-card);border-radius:3px;overflow:hidden}.compatibility-fill{height:100%;border-radius:3px;transition:width .5s ease}.bottom-section{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem}@media (max-width: 768px){.bottom-section{grid-template-columns:1fr}}.result-row{display:grid;grid-template-columns:1fr 300px;gap:1.5rem;margin-bottom:2rem}@media (max-width: 768px){.result-row{grid-template-columns:1fr}}.network-diagram{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color);transition:background-color .3s,border-color .3s;margin-bottom:2rem}.network-diagram.multi-diagram{padding-bottom:1rem}.diagram-subtitle{color:var(--text-secondary);font-size:.9rem;margin-bottom:1rem}.diagrams-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem}.single-diagram{background:var(--bg-card);border-radius:8px;padding:1rem;border:1px solid var(--border-color)}.diagram-label{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.ip-type-badge{padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600}.ip-type-badge.ipv4{background:#eab30833;color:var(--accent-yellow)}.ip-type-badge.ipv6{background:#3b82f633;color:var(--accent-blue)}.ip-address-label{font-family:Monaco,Menlo,monospace;font-size:.8rem;color:var(--text-secondary);word-break:break-all}@media (max-width: 768px){.diagrams-container{grid-template-columns:1fr}}.diagram-title{font-size:1.1rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.diagram-svg{width:100%;height:auto;max-height:250px}.ipv6-status{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color);transition:background-color .3s,border-color .3s}.ipv6-status.checking{display:flex;align-items:center;gap:.75rem;color:var(--text-secondary)}.ipv6-status.checking .ipv6-icon{animation:spin 1s linear infinite}.ipv6-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.ipv6-icon{font-size:1.5rem}.ipv6-header h3{font-size:1.1rem;font-weight:600}.ipv6-content{display:flex;flex-direction:column;gap:.75rem}.ipv6-badge{display:inline-block;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600;text-align:center}.ipv6-status.supported .ipv6-badge{background:#10b98133;color:var(--accent-green)}.ipv6-status.not-supported .ipv6-badge{background:#ef444433;color:#dc2626}[data-theme=dark] .ipv6-status.not-supported .ipv6-badge{color:#fca5a5}.ipv6-address{display:flex;flex-direction:column;gap:.25rem;padding:.75rem;background:var(--bg-card);border-radius:6px;transition:background-color .3s}.ipv6-address .label{font-size:.8rem;color:var(--text-secondary)}.ipv6-address .value{font-family:Monaco,Menlo,monospace;font-size:.85rem;color:var(--accent-green);word-break:break-all}.app-footer{background:var(--bg-secondary);padding:1rem 2rem;text-align:center;border-top:1px solid var(--border-color);transition:background-color .3s,border-color .3s}.app-footer p{color:var(--text-muted);font-size:.85rem}.app-footer a{color:var(--text-secondary);text-decoration:none;transition:color .2s}.app-footer a:hover{color:var(--accent-blue);text-decoration:underline}@media (max-width: 640px){.app-header{flex-direction:column;gap:1rem;text-align:center}.header-controls{flex-wrap:wrap;justify-content:center}.header-content h1{font-size:1.5rem}.app-main{padding:1rem}.result-display{grid-template-columns:1fr}.detect-button{width:100%;justify-content:center}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.result-card{animation:fadeIn .3s ease}.network-diagram,.ipv6-status{animation:fadeIn .4s ease}.stun-results-table{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color);margin-bottom:2rem;transition:background-color .3s,border-color .3s;animation:fadeIn .3s ease}.stun-results-header{margin-bottom:1.5rem}.stun-results-header h3{font-size:1.25rem;font-weight:600;margin-bottom:.25rem}.stun-results-subtitle{color:var(--text-secondary);font-size:.9rem}.api-fallback-warning{margin-top:.75rem;padding:.75rem 1rem;background:#eab30826;border:1px solid rgba(234,179,8,.3);border-radius:8px;color:var(--accent-yellow);font-size:.9rem}[data-theme=dark] .api-fallback-warning{background:#eab3081a;color:#fcd34d}.webrtc-blocked-card{background:var(--bg-secondary);border-radius:12px;padding:2rem;border:1px solid var(--border-color);margin-bottom:2rem;text-align:center;animation:fadeIn .3s ease}.webrtc-blocked-card .blocked-icon{font-size:3rem;margin-bottom:1rem}.webrtc-blocked-card h3{font-size:1.5rem;font-weight:600;color:var(--accent-yellow);margin-bottom:.75rem}.webrtc-blocked-card p{color:var(--text-secondary);font-size:1rem;line-height:1.6;max-width:600px;margin:0 auto}.stun-table-wrapper{overflow-x:auto;margin-bottom:1rem}.stun-table{width:100%;border-collapse:collapse;font-size:.9rem}.stun-table th,.stun-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border-color)}.stun-table th{background:var(--bg-card);font-weight:600;color:var(--text-secondary);white-space:nowrap}.stun-table tbody tr:hover{background:var(--bg-card)}.stun-table .server-cell{display:flex;align-items:center;gap:.5rem}.stun-table .server-name{font-family:Monaco,Menlo,monospace;font-size:.85rem}.stun-table .provider-cell{vertical-align:middle}.stun-table .provider-name{font-weight:500}.stun-table .status-icon{font-size:.9rem}.stun-table .ip-cell .ip-info{display:flex;align-items:baseline}.stun-table .ip-address{font-family:Monaco,Menlo,monospace;color:var(--accent-green)}.stun-table .ip-port{font-family:Monaco,Menlo,monospace;color:var(--text-secondary);font-size:.85em}.stun-table .error-text{color:#ef4444;font-size:.85rem}[data-theme=dark] .stun-table .error-text{color:#fca5a5}.stun-table .location-cell{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.stun-table .location-flag{font-size:1.1rem}.stun-table .location-text{font-weight:500;color:var(--text-primary)}.stun-table .location-isp{font-size:.8rem;color:var(--text-muted)}.stun-table .nat-type-badge{display:inline-block;padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:500;color:#fff}.stun-table .error-row{opacity:.7}.stun-results-summary{display:flex;gap:2rem;padding-top:1rem;border-top:1px solid var(--border-color)}.stun-results-summary .summary-item{display:flex;align-items:center;gap:.5rem}.stun-results-summary .summary-label{color:var(--text-secondary);font-size:.9rem}.stun-results-summary .summary-value{font-weight:600}.stun-results-summary .summary-value.success{color:var(--accent-green)}.stun-results-summary .summary-value.error{color:#ef4444}[data-theme=dark] .stun-results-summary .summary-value.error{color:#fca5a5}.nat-comparison{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color);margin-bottom:2rem;transition:background-color .3s,border-color .3s;animation:fadeIn .3s ease}.comparison-header{margin-bottom:1.5rem}.comparison-header h3{font-size:1.25rem;font-weight:600;margin-bottom:.25rem}.comparison-subtitle{color:var(--text-secondary);font-size:.9rem}.comparison-table-wrapper{overflow-x:auto;margin-bottom:1rem}.comparison-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem}.comparison-table th,.comparison-table td{padding:.75rem 1rem;text-align:center;border-bottom:1px solid var(--border-color)}.comparison-table thead th{background:var(--bg-card);font-weight:600;color:var(--text-secondary);white-space:nowrap;border-top:1px solid var(--border-color)}.comparison-table thead th:first-child{border-left:1px solid var(--border-color);border-top-left-radius:8px}.comparison-table thead th:last-child{border-right:1px solid var(--border-color);border-top-right-radius:8px}.comparison-table tbody td{border-left:1px solid var(--border-color)}.comparison-table tbody td:last-child{border-right:1px solid var(--border-color)}.comparison-table tbody tr:last-child td:first-child{border-bottom-left-radius:8px}.comparison-table tbody tr:last-child td:last-child{border-bottom-right-radius:8px}.comparison-table th:first-child,.comparison-table td:first-child{text-align:left}.comparison-table tbody tr:hover{background:var(--bg-card)}.comparison-table .current-row{background:#3b82f61a}.comparison-table .current-row td:first-child{border-left:3px solid var(--accent-blue)}.comparison-table .current-row:hover{background:#3b82f626}.comparison-table .nat-type-cell{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.comparison-table .nat-icon{font-size:1.1rem}.comparison-table .nat-name{font-weight:600}.comparison-table .current-badge{background:var(--accent-blue);color:#fff;font-size:.7rem;padding:.15rem .5rem;border-radius:10px;font-weight:500;margin-left:.5rem}.comparison-table .current-badge.ipv4{background:var(--accent-yellow);color:#1e293b}.comparison-table .current-badge.ipv6{background:var(--accent-blue);color:#fff}.comparison-table .current-badge.dual{background:linear-gradient(90deg,var(--accent-yellow),var(--accent-blue));color:#fff}.comparison-table .console-type{display:inline-block;padding:.25rem .5rem;border-radius:4px;font-size:.8rem;font-weight:500}.comparison-table .console-type.ps5{background:#0070f326;color:#0070f3}.comparison-table .console-type.xbox{background:#10b98126;color:#10b981}.comparison-table .console-type.switch{background:#ef444426;color:#ef4444}[data-theme=dark] .comparison-table .console-type.ps5{background:#3b82f633;color:#60a5fa}[data-theme=dark] .comparison-table .console-type.xbox{background:#10b98133;color:#34d399}[data-theme=dark] .comparison-table .console-type.switch{background:#ef444433;color:#f87171}.comparison-table .feature-yes,.comparison-table .feature-no,.comparison-table .feature-partial{font-size:1.1rem}.comparison-legend{display:flex;gap:2rem;padding-top:1rem;border-top:1px solid var(--border-color);flex-wrap:wrap}.comparison-legend .legend-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-secondary)}.result-card.full-width{grid-column:1 / -1}.compatibility-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.compatibility-item{background:var(--bg-card);padding:1rem;border-radius:8px;transition:background-color .3s}.compatibility-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.compatibility-icon{font-size:1.25rem}.compatibility-label{font-weight:500;font-size:.9rem}.compatibility-bar{height:8px;background:var(--bg-secondary);border-radius:4px;overflow:hidden;margin-bottom:.5rem}.compatibility-fill{height:100%;border-radius:4px;transition:width .5s ease}.compatibility-footer{display:flex;justify-content:space-between;align-items:center}.compatibility-score{font-size:.8rem;color:var(--text-secondary)}.console-nat-type{font-size:.75rem;font-weight:600;padding:.15rem .4rem;border-radius:4px;background:var(--bg-secondary);color:var(--text-muted)}@media (max-width: 640px){.stun-results-summary,.comparison-legend{flex-direction:column;gap:.75rem}.comparison-table .nat-type-cell{flex-wrap:wrap}.compatibility-grid{grid-template-columns:repeat(2,1fr)}}