html,body{
		border:none; padding:0; margin:0;
		background:#f8fafc;
		color:#1e40af;
		font-family: 'Poppins', sans-serif;
	}
	body{
		text-align:center;
	}
	.header-brand {
		background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
		color: white;
		padding: 2rem 0;
		margin-bottom: 2rem;
	}
	.header-brand .logo {
		height: 60px;
		margin-bottom: 1rem;
		filter: brightness(0) invert(1);
	}
	.header-brand h1{
		color: white;
		margin: 0.5rem 0;
		font-size: 2.5rem;
		font-weight: 600;
	}
	.header-brand .subtitle {
		color: rgba(255, 255, 255, 0.9);
		margin: 0;
		font-size: 1.1rem;
	}
	#loading{
		background-color:#f8fafc;
		color:#1e40af;
		text-align:center;
	}
	span.loadCircle{
		display:inline-block;
		width:2em;
		height:2em;
		vertical-align:middle;
		background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAP1BMVEUAAAB2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZyFzwnAAAAFHRSTlMAEvRFvX406baecwbf0casimhSHyiwmqgAAADpSURBVHja7dbJbQMxAENRahnN5lkc//5rDRAkDeRgHszXgACJoKiIiIiIiIiIiIiIiIiIiIj4HHspsrpAVhdVVguzrA4OWc10WcEqpwKbnBo0OU1Q5NSpsoJFTgOecrrdEag85DRgktNqfoEdTjnd7hrEHMEJvmRUYJbTYk5Agy6nau6Abp5Cm7mDBtRdPi9gyKdU7w4p1fsLvyqs8hl4z9/w3n/Hmr9WoQ65lAU4d7lMYOz//QboRR5jBZibLMZdAR6O/Vfa1PlxNr3XdS3HzK/HVPRu/KnLs8iAOh993VpRRERERMT/fAN60wwWaVyWwAAAAABJRU5ErkJggg==');
		background-size:2em 2em;
		margin-right:0.5em;
		animation: spin 0.6s linear infinite;
	}
	@keyframes spin{
		0%{transform:rotate(0deg);}
		100%{transform:rotate(359deg);}
	}
	#startStopBtn{
		display:inline-block;
		margin:0 auto;
		color:#2563eb;
		background-color:rgba(0,0,0,0);
		border:0.15em solid #2563eb;
		border-radius:0.5em;
		transition:all 0.3s;
		box-sizing:border-box;
		width:10em; height:3.5em;
		line-height:3.2em;
		cursor:pointer;
		box-shadow: 0 0 0 rgba(37, 99, 235, 0.1), inset 0 0 0 rgba(37, 99, 235, 0.1);
		font-weight: 600;
		font-size: 1.1rem;
	}
	#startStopBtn:hover{
		background-color:#2563eb;
		color: white;
		box-shadow: 0 0 2em rgba(37, 99, 235, 0.3), inset 0 0 1em rgba(37, 99, 235, 0.1);
	}
	#startStopBtn.running{
		background-color:#ef4444;
		border-color:#f87171;
		color:#FFFFFF;
	}
	#startStopBtn:before{
		content:"Iniciar";
	}
	#startStopBtn.running:before{
		content:"Parar";
	}
	#serverArea{
		margin-top:1em;
	}
	#server{
		font-size:1em;
		padding:0.2em;
	}
	#test{
		margin-top:2em;
		margin-bottom:12em;
	}
	div.testArea{
		display:inline-block;
		width:16em;
		height:12.5em;
		position:relative;
		box-sizing:border-box;
		background: white;
		border-radius: 1rem;
		margin: 1rem;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	}
	div.testArea2{
		display:inline-block;
		width:14em;
		height:7em;
		position:relative;
		box-sizing:border-box;
		text-align:center;
		background: white;
		border-radius: 1rem;
		margin: 1rem;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
		padding: 1rem;
	}
	div.testArea div.testName{
		position:absolute;
		width:100%;
		font-size:1.4em;
		z-index:9;
		color:#1e40af;
		font-weight:600;
	}
	div.testArea2 div.testName{
        display:block;
        text-align:center;
        font-size:1.4em;
		color:#1e40af;
		font-weight:600;
		margin-bottom: 0.5rem;
	}
	.footer {
		margin-top: 3rem;
		padding: 2rem 0;
		background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
		color: white;
		text-align: center;
	}
	.footer p {
		margin: 0.5rem 0;
		font-size: 0.9rem;
	}
	.footer p:first-child {
		font-weight: 600;
	}
	/* Botão Flutuante WhatsApp */
	#whatsapp-float {
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 1000;
	}
	#whatsapp-float a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		background: #25d366;
		border-radius: 50%;
		color: white;
		text-decoration: none;
		box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
		transition: all 0.3s ease;
		animation: pulse 2s infinite;
	}
	#whatsapp-float a:hover {
		background: #20ba5a;
		transform: scale(1.1);
		box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
	}
	#whatsapp-float svg {
		width: 28px;
		height: 28px;
	}
	@keyframes pulse {
		0% {
			box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
		}
		50% {
			box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0.1);
		}
		100% {
			box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
		}
	}

	/* Scroll to Top Button */
	.scroll-to-top {
		position: fixed;
		bottom: 90px;
		right: 30px;
		width: 50px;
		height: 50px;
		background: #2563eb;
		color: white;
		border: none;
		border-radius: 50%;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		z-index: 999;
		font-size: 1.2rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.scroll-to-top:hover {
		background: #1d4ed8;
		transform: translateY(-2px);
		box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
	}

	.scroll-to-top.show {
		opacity: 1;
		visibility: visible;
	}
	#ipArea{
		margin-top:2em;
		padding: 1rem;
		background: white;
		border-radius: 0.5rem;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		color: #1e40af;
		font-weight: 500;
		margin: 2rem auto;
		max-width: 300px;
	}
	div.testArea div.meterText{
		position:absolute;
		bottom:1.55em; left:0;
		width:100%;
		font-size:2.5em;
		z-index:9;
	}
	div.testArea2 div.meterText{
        display:inline-block;
        font-size:2.5em;
	}
	div.meterText:empty:before{
		content:"0.00";
	}
	div.testArea div.unit{
		position:absolute;
		bottom:2em; left:0;
		width:100%;
		z-index:9;
	}
	div.testArea2 div.unit{
		display:inline-block;
	}
	div.testArea canvas{
		position:absolute;
		top:0; left:0; width:100%; height:100%;
		z-index:1;
	}
	div.testGroup{
		display:block;
        margin: 0 auto;
	}
	#shareArea{
		width:95%;
		max-width:40em;
		margin:0 auto;
		margin-top:2em;
	}
	#shareArea > *{
		display:block;
		width:100%;
		height:auto;
		margin: 0.25em 0;
	}
	#privacyPolicy{
        position:fixed;
        top:2em;
        bottom:2em;
        left:2em;
        right:2em;
        overflow-y:auto;
        width:auto;
        height:auto;
        box-shadow:0 0 3em 1em #000000;
        z-index:999999;
        text-align:left;
        background-color:#FFFFFF;
        padding:1em;
	}
	a.privacy{
        text-align:center;
        font-size:0.8em;
        color:#808080;
        padding: 0 3em;
	}
    div.closePrivacyPolicy {
        width: 100%;
        text-align: center;
    }
    div.closePrivacyPolicy a.privacy {
        padding: 1em 3em;
    }
	@media all and (max-width:40em){
		body{
			font-size:0.8em;
		}
	}
	div.visible{
		animation: fadeIn 0.4s;
		display:block;
	}
	div.hidden{
		animation: fadeOut 0.4s;
		display:none;
	}
	@keyframes fadeIn{
		0%{
			opacity:0;
		}
		100%{
			opacity:1;
		}
	}
	@keyframes fadeOut{
		0%{
			display:block;
			opacity:1;
		}
		100%{
			display:block;
			opacity:0;
		}
	}
	@media all and (prefers-color-scheme: dark){
		html,body,#loading{
			background:#202020;
			color:#F4F4F4;
			color-scheme:dark;
		}
		h1{
			color:#E0E0E0;
		}
		a{
			color:#9090FF;
		}
		#privacyPolicy{
			background:#000000;
		}
		#resultsImg{
			filter: invert(1);
		}
		/* Correções para modo escuro */
		div.testArea, div.testArea2 {
			background: #2d3748;
			color: #F4F4F4;
			box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
		}
		div.testArea div.testName, div.testArea2 div.testName {
			color: #90cdf4;
		}
		#ipArea {
			background: #2d3748;
			color: #90cdf4;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
		}
		#startStopBtn {
			background-color: #4a5568;
			color: #F4F4F4;
			border-color: #718096;
		}
		#startStopBtn:hover {
			background-color: #2563eb;
			color: white;
		}
		#server {
			background: #2d3748;
			color: #F4F4F4;
			border: 1px solid #4a5568;
		}
		.header-brand {
			background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
		}
		.subtitle {
			color: #a0aec0;
		}
	}

	/* Footer Styles */
	.footer {
		background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
		color: white;
		padding: 3rem 0 1rem;
		margin-top: 3rem;
	}

	.footer .container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 1rem;
	}

	.footer-content {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 2rem;
		margin-bottom: 2rem;
		align-items: start;
	}

	.footer-brand {
		text-align: left;
	}

	.footer-brand img {
		height: 40px;
		margin-bottom: 1rem;
		filter: brightness(0) invert(1);
	}

	.footer-brand p {
		opacity: 0.8;
	}

	.footer h4 {
		color: white;
		margin-bottom: 1rem;
		font-weight: 600;
		text-align: left;
	}

	.footer-links {
		text-align: left;
	}

	.footer-links ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.footer-links li {
		margin-bottom: 0.5rem;
	}

	.footer-links a {
		color: rgba(255, 255, 255, 0.8);
		text-decoration: none;
		transition: color 0.3s ease;
	}

	.footer-links a:hover {
		color: white;
	}

	.footer-contact {
		text-align: left;
	}

	.footer-contact p {
		color: #cbd5e1;
		margin-bottom: 0.5rem;
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.footer-contact i {
		width: 16px;
		color: #3b82f6;
	}

	.footer-support {
		text-align: left;
	}

	.footer-social {
		text-align: left;
	}

	.social-links {
		display: flex;
		gap: 1rem;
		justify-content: flex-start;
	}

	.social-links a {
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		text-decoration: none;
		transition: all 0.3s ease;
	}

	.social-links a:hover {
		background: rgba(255, 255, 255, 0.2);
		transform: translateY(-2px);
	}

	.footer-bottom {
		text-align: center;
		padding-top: 2rem;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		opacity: 0.8;
	}

	@media (max-width: 768px) {
		.footer-content {
			grid-template-columns: 1fr;
		}

		.footer-brand,
		.footer-links,
		.footer-contact,
		.footer-social {
			text-align: left;
		}

		.social-links {
			justify-content: flex-start;
		}
	}