:root{--bg-color: #020617;--card-bg: rgba(15, 23, 42, .6);--accent-primary: #00f2fe;--accent-secondary: #4facfe;--accent-success: #10b981;--text-main: #f8fafc;--text-muted: #94a3b8;--glass-border: rgba(255, 255, 255, .1);--font-family: "Outfit", sans-serif;--gold: #fbbf24}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-family);min-height:100vh;background-image:radial-gradient(circle at top right,rgba(0,242,254,.05),transparent),radial-gradient(circle at bottom left,rgba(79,172,254,.05),transparent),url(/assets/speedx_bg_premium-p4uJq_aD.png);background-size:cover;background-position:center;background-attachment:fixed}#app{max-width:1000px;margin:0 auto;padding:1.5rem;display:flex;flex-direction:column;min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:1.5rem}.test-tabs{display:flex;background:#ffffff0d;padding:4px;border-radius:30px;border:1px solid var(--glass-border)}.tab-btn{background:transparent;border:none;color:var(--text-muted);padding:.8rem 2rem;border-radius:25px;font-size:.85rem;font-weight:800;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);letter-spacing:1.5px;text-transform:uppercase}.tab-btn.active{background:var(--accent-primary);color:#020617;box-shadow:0 0 25px #00f2fe80}.logo{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0}.logo-img{height:80px;max-width:220px;width:auto;object-fit:contain;display:block;filter:drop-shadow(0 0 0px transparent);transition:filter .35s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1)}.logo:hover .logo-img{filter:drop-shadow(0 0 10px rgba(0,242,254,.6)) drop-shadow(0 0 22px rgba(0,242,254,.3));transform:scale(1.05)}#result-meta{font-size:.8rem;color:var(--accent-primary)}.hidden{display:none!important}.test-container,.result-container{width:100%;animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.gauge-wrapper{position:relative;width:450px;height:375px;margin:0 auto 3rem}#speed-gauge{opacity:0;transform:scale(.9);transition:all .5s cubic-bezier(.4,0,.2,1)}.gauge-wrapper.test-active #speed-gauge{opacity:1;transform:scale(1)}.gauge{width:100%;height:100%;transform:none}.gauge-bg{stroke:#e2e8f0;stroke-width:24;stroke-linecap:butt}.gauge-progress{stroke:#5bbaba;stroke-width:24;stroke-linecap:butt;stroke-dasharray:377;stroke-dashoffset:377;transition:stroke-dashoffset .1s linear}.gauge-inner{stroke:#fff;stroke-width:3;stroke-linecap:round}.gauge-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:100%;z-index:10;transition:top .5s cubic-bezier(.4,0,.2,1)}.gauge-wrapper.test-active .gauge-content{top:72%}.go-button{width:200px;height:200px;border-radius:50%;border:1px solid var(--accent-primary);background:radial-gradient(circle at center,rgba(0,242,254,.1),transparent);display:flex;justify-content:center;align-items:center;cursor:pointer;margin:0 auto;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;z-index:10}.go-button span{font-size:3rem;font-weight:800;letter-spacing:2px;color:var(--accent-primary)}.go-button:hover{background:radial-gradient(circle at center,rgba(0,242,254,.2),transparent);box-shadow:0 0 50px #00f2fe33,inset 0 0 20px #00f2fe33;transform:scale(1.05)}.go-button:before{content:"";position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;border:1px solid rgba(0,242,254,.2);border-radius:50%;animation:pulse-ring 2s infinite}@keyframes pulse-ring{0%{transform:scale(.9);opacity:.8}to{transform:scale(1.2);opacity:0}}#test-stage.error-state{color:#ff4b2b;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.go-button.small{width:80px;height:80px}.go-button.small span{font-size:1.25rem}#speed-value{font-size:3.5rem;font-weight:800;line-height:1;letter-spacing:-1px;color:#fff;margin-bottom:.5rem}#speed-unit{font-size:1.1rem;color:#fff;font-weight:700;text-transform:none;margin-top:0;letter-spacing:1px;opacity:1}#test-stage{font-size:.8rem;letter-spacing:5px;color:var(--accent-primary);margin-top:1.5rem;opacity:.8}.graph-container{width:100%;height:120px;margin-top:2rem;position:relative;background:#0003;border-radius:12px;overflow:hidden;border:1px solid var(--glass-border)}#live-graph{width:100%;height:100%}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;width:100%;margin-top:2rem}.metric-card{background:var(--card-bg);padding:1.5rem;border-radius:16px;text-align:center;border:1px solid var(--glass-border);transition:all .3s ease}.metric-card:hover{border-color:var(--accent-primary);background:#00f2fe0d}.metric-card .label{font-size:.75rem;color:var(--text-muted);display:block;margin-bottom:.75rem;font-weight:700;letter-spacing:1px}.metric-card .value{font-size:1.75rem;font-weight:800;color:var(--text-main)}.metric-card .unit{font-size:.8rem;color:var(--text-muted);margin-left:4px}.result-container{display:flex;flex-direction:column;gap:2rem}.result-header{text-align:center;margin-bottom:0rem}.result-header h2{font-size:2.25rem;font-weight:800;color:var(--text-main);letter-spacing:-1px;margin-bottom:.5rem}.result-meta-info{display:flex;justify-content:center;gap:2rem;font-size:.9rem;color:var(--text-muted)}.result-meta-info strong{color:var(--accent-primary);font-weight:600;margin-left:.25rem}.result-top{display:flex;justify-content:space-around;padding:3rem;background:var(--card-bg);border-radius:24px;border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.res-stat-big{text-align:center}.res-label{font-size:.9rem;color:var(--text-muted);display:block;margin-bottom:1rem;font-weight:700;letter-spacing:1px}.res-label span{font-size:.75rem;color:var(--accent-primary);margin-left:4px}.res-value{font-size:5rem;font-weight:800;background:linear-gradient(to bottom,#fff,var(--accent-primary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.result-main{display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;margin-top:2rem}.result-sidebar{display:flex;align-items:center;gap:1.5rem}.res-info-block{display:flex;flex-direction:column;gap:1rem}.res-info-item{display:flex;flex-direction:column}.res-info-label{font-size:.7rem;color:var(--text-muted);font-weight:700;margin-bottom:.25rem}#res-isp,#res-server{font-size:.95rem;font-weight:600}.result-details{background:var(--card-bg);border-radius:16px;padding:2rem}.res-details-grid{display:flex;gap:3rem;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #1f2937}.detail-item span{font-size:.8rem;color:var(--text-muted);display:block}.detail-item span span{font-size:.7rem}.detail-item strong{font-size:1.75rem;font-weight:600}.mini-gauge{position:relative;width:150px;height:150px;margin:0 auto 1rem}.mini-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}.mini-gauge .bg{fill:none;stroke:#1f2937;stroke-width:6}.mini-gauge .progress{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset 1s ease-out}.mini-gauge .progress.dl{stroke:var(--accent-primary)}.mini-gauge .progress.ul{stroke:var(--accent-secondary)}.mini-gauge .res-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2.5rem;font-weight:700}.share-block{text-align:center}.share-block span{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:1rem}.share-icons{display:flex;justify-content:center;gap:1rem}.share-icons .icon{width:32px;height:32px;border-radius:50%;background:#1f2937;display:flex;justify-content:center;align-items:center;font-size:.8rem;cursor:pointer;transition:background .3s ease}.share-icons .icon:hover{background:var(--accent-primary);color:#000}.info-footer{display:flex;justify-content:space-between;margin-top:auto;padding:2rem;background:#0a0f1de6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px 16px 0 0;position:relative;overflow:hidden}.info-footer:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;background:linear-gradient(to right,var(--india-saffron) 33.33%,var(--india-white) 33.33% 66.66%,var(--india-green) 66.66%)}.info-item{display:flex;align-items:center;gap:1rem}.info-text{display:flex;flex-direction:column}#isp-name,#server-location{font-weight:600}#ip-address,#server-provider{font-size:.8rem;color:var(--text-muted)}.change-link{background:none;border:none;color:var(--accent-primary);font-size:.75rem;cursor:pointer;text-decoration:underline;text-align:left;margin-top:2px}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:var(--card-bg);width:90%;max-width:500px;border-radius:16px;padding:2rem;border:1px solid #1f2937}.modal-header{display:flex;justify-content:space-between;margin-bottom:1.5rem}#close-modal{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}.server-list{display:flex;flex-direction:column;gap:1rem}.server-item{background:#1f2937;padding:1rem;border-radius:8px;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.server-item:hover{border-color:var(--accent-primary)}.server-item.active{border-color:var(--accent-primary);background:#00e5ff1a}.video-tester,.browser-tester{width:100%;display:flex;flex-direction:column;align-items:center;gap:2rem;animation:fadeIn .4s ease}.video-preview-box{width:100%;max-width:600px;aspect-ratio:16/9;background:#000;border-radius:12px;border:2px solid var(--glass-border);position:relative;overflow:hidden}.video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;background:#00000080;z-index:2;transition:all .3s ease}#test-video{width:100%;height:100%;object-fit:cover;z-index:1;position:absolute;top:0;left:0;filter:brightness(.8)}.video-preview-box svg{color:var(--accent-primary);filter:drop-shadow(0 0 10px var(--accent-primary))}#video-status{font-size:.9rem;color:#fff;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.8)}.loader-ring{width:50px;height:50px;border:3px solid rgba(255,204,0,.1);border-top:3px solid var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite;position:absolute}@keyframes spin{to{transform:rotate(360deg)}}.primary-btn{background:var(--accent-primary);color:#000;border:none;padding:1rem 2.5rem;border-radius:30px;font-weight:800;letter-spacing:1px;cursor:pointer;transition:all .3s ease}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 5px 20px #ffcc004d}.video-metrics-grid,.browser-metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;width:100%;max-width:600px}.browser-hero{width:100%;max-width:600px;background:#1e293b;border-radius:12px;padding:2rem;display:flex;flex-direction:column;gap:1rem;border:1px solid var(--glass-border)}.browser-search-bar{background:#0f172a;padding:1rem;border-radius:6px;color:var(--text-main);font-size:.9rem;font-family:monospace;border:1px solid var(--glass-border);width:100%;outline:none;transition:border-color .3s ease}.browser-search-bar:focus{border-color:var(--accent-primary)}#browser-loading-bar{height:4px;background:var(--accent-primary);width:0%;border-radius:2px;transition:width .3s ease}.brand-modal-content{max-width:850px;width:95%;max-height:90vh;overflow-y:auto}#close-brand-modal{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;transition:color .2s ease}#close-brand-modal:hover{color:var(--accent-primary)}.brand-preview-settings{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding:.75rem 1rem;background:#ffffff05;border-radius:8px;border:1px solid var(--glass-border)}.brand-preview-settings span{font-size:.85rem;color:var(--text-muted);font-weight:600}.preview-toggles{display:flex;gap:8px}.bg-toggle-btn{background:#ffffff0d;border:1px solid var(--glass-border);color:var(--text-muted);padding:4px 12px;border-radius:4px;font-size:.75rem;font-weight:700;cursor:pointer;transition:all .3s ease}.bg-toggle-btn:hover{color:#fff;border-color:#fff3}.bg-toggle-btn.active{background:var(--accent-primary);color:#020617;border-color:var(--accent-primary);box-shadow:0 0 10px #00f2fe4d}.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.25rem;margin-top:1rem}.brand-card{background:#0f172a66;border-radius:12px;border:1px solid var(--glass-border);overflow:hidden;transition:all .3s ease;display:flex;flex-direction:column}.brand-card:hover{transform:translateY(-2px);border-color:var(--accent-primary);box-shadow:0 4px 20px #00f2fe0d}.brand-card-preview{height:120px;display:flex;align-items:center;justify-content:center;padding:1rem;transition:background .3s ease}.brand-card-preview.bg-dark{background:#0b0f19}.brand-card-preview.bg-light{background:#f8fafc}.brand-card-preview.bg-accent{background:radial-gradient(circle at center,#020617,#0b1528,#1e1b4b)}.brand-card-preview img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}.brand-card-meta{padding:1rem;display:flex;flex-direction:column;gap:.75rem;background:#0f172acc;flex-grow:1;justify-content:space-between}.brand-card-meta h4{font-size:.85rem;font-weight:600;color:var(--text-main)}.brand-card-actions{display:flex;gap:8px}.action-btn{flex:1;background:#ffffff0d;border:1px solid var(--glass-border);color:var(--text-main);padding:6px 0;border-radius:6px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-align:center}.action-btn:hover{background:#00f2fe1a;border-color:var(--accent-primary);color:var(--accent-primary)}.action-btn.copy-btn:hover{background:#4facfe1a;border-color:var(--accent-secondary);color:var(--accent-secondary)}