@font-face{
	font-family:"Manrope";
	src:url("../fonts/manrope-var.woff2") format("woff2"),
		url("../fonts/manrope-var.woff") format("woff");
	font-weight:200 800;
	font-style:normal;
	font-display:swap;
}
:root{
	--ink:#0A2A1D;
	--ink-soft:#5A7A6B;
	--paper:rgba(255,255,255,0.74);
	--paper-solid:#FFFFFF;
	--edge:rgba(255,255,255,0.85);
	--line:rgba(11,90,58,0.10);
	--brand:#12A05C;
	--brand-deep:#0B6B41;
	--lime:#BFD93F;
	--shadow:0 30px 70px -40px rgba(6,58,38,0.55);
	--radius:26px;
}
*{box-sizing:border-box;}
html{
	color-scheme:light;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-text-size-adjust:100%;
}
html,body{
	border:0;padding:0;margin:0;
	min-height:100%;
}
body{
	font-family:"Manrope","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
	color:var(--ink);
	text-align:center;
	font-size:16px;
	line-height:1.45;
	-webkit-font-smoothing:antialiased;
	background:
		radial-gradient(60em 40em at 12% -10%, rgba(255,247,178,0.85) 0%, rgba(255,247,178,0) 60%),
		radial-gradient(55em 45em at 95% 15%, rgba(150,226,190,0.75) 0%, rgba(150,226,190,0) 62%),
		linear-gradient(135deg,#FBF7CE 0%,#E6F4C6 30%,#C6EDD5 65%,#ACE3D6 100%);
	background-attachment:fixed;
	padding:2.5em 1em 4em;
}

h1{
	font-size:2.2em;
	font-weight:800;
	letter-spacing:-0.025em;
	line-height:1.08;
	margin:0.4em 0 0.35em;
	color:var(--ink);
}
.lede{
	margin:0 auto 1.4em;
	max-width:32em;
	color:var(--ink-soft);
	font-size:1.02em;
}

.pageNav{margin:0 auto 2em;}
.pageNav a{
	display:inline-flex;align-items:center;gap:0.5em;
	padding:0.45em 1.1em;
	border-radius:999px;
	background:rgba(255,255,255,0.6);
	border:1px solid var(--edge);
	color:var(--brand-deep);
	font-size:0.85em;font-weight:700;letter-spacing:0.01em;
	text-decoration:none;
	transition:transform .18s ease,box-shadow .25s ease;
}
.pageNav a svg{width:0.95em;height:0.95em;display:block;}
@media (hover:hover){
	.pageNav a:hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(6,58,38,0.8);}
}
.pageNav a:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;}

.controls{
	display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
	gap:0.7em;
}
.field{
	display:inline-flex;align-items:center;gap:0.5em;
	color:var(--ink-soft);
	font-size:0.85em;font-weight:600;letter-spacing:0.01em;
}
#durationSelect{
	font:inherit;font-weight:600;
	padding:0.55em 0.9em;
	border-radius:999px;
	border:1px solid var(--line);
	background:rgba(255,255,255,0.85);
	color:var(--ink);
}
#durationSelect:disabled{opacity:.55;}

#startBtn{
	position:relative;
	display:inline-block;
	width:13em;height:3.4em;line-height:3.4em;
	border-radius:999px;
	font-weight:700;font-size:1.02em;letter-spacing:0.02em;
	color:#fff;
	background:linear-gradient(135deg,#2CC177 0%,#0E8A55 100%);
	box-shadow:0 16px 34px -18px rgba(11,107,65,0.9),inset 0 1px 0 rgba(255,255,255,0.25);
	cursor:pointer;
	user-select:none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-touch-callout:none;
	touch-action:manipulation;
	-webkit-appearance:none;
	appearance:none;
	transition:transform .18s ease,box-shadow .25s ease,background .3s ease;
}
@media (hover:hover){
	#startBtn:hover{transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(11,107,65,0.95),inset 0 1px 0 rgba(255,255,255,0.3);}
}
#startBtn:active{transform:scale(0.97);box-shadow:0 10px 22px -16px rgba(11,107,65,0.9),inset 0 1px 0 rgba(255,255,255,0.2);}
#startBtn:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;}
#startBtn:before{content:"Начать проверку";}
#startBtn.running{
	background:linear-gradient(135deg,#FF7A6B 0%,#E0453F 100%);
	box-shadow:0 16px 34px -18px rgba(190,50,40,0.9),inset 0 1px 0 rgba(255,255,255,0.25);
}
#startBtn.running:before{content:"Остановить";}
#startBtn.done:before{content:"Проверить ещё раз";}

#resetBtn{
	display:inline-block;
	padding:0 1.4em;height:3.4em;line-height:3.4em;
	border-radius:999px;
	font-weight:700;font-size:0.9em;
	color:var(--brand-deep);
	background:rgba(255,255,255,0.6);
	border:1px solid var(--edge);
	cursor:pointer;
	user-select:none;
	-webkit-user-select:none;
	touch-action:manipulation;
	transition:transform .18s ease,box-shadow .25s ease,opacity .25s ease;
}
@media (hover:hover){
	#resetBtn:not(.disabled):hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(6,58,38,0.8);}
}
#resetBtn:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;}
#resetBtn.disabled{opacity:.45;cursor:default;}

.phase{
	display:inline-flex;align-items:center;gap:0.55em;
	margin-top:1.15em;
	padding:0.4em 1em;
	border-radius:999px;
	background:rgba(255,255,255,0.6);
	border:1px solid var(--edge);
	color:var(--ink-soft);
	font-size:0.85em;font-weight:600;letter-spacing:0.01em;
}
.phase .dot{
	width:0.5em;height:0.5em;border-radius:50%;
	background:var(--ink-soft);opacity:.45;
}
.phase--live{color:var(--brand-deep);}
.phase--live .dot{background:var(--brand);opacity:1;animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{
	0%,100%{box-shadow:0 0 0 0 rgba(18,160,92,0.45);}
	50%{box-shadow:0 0 0 0.45em rgba(18,160,92,0);}
}
.phase .check{display:none;width:0.9em;height:0.9em;}
.phase--done{
	color:var(--brand-deep);
	background:rgba(18,164,115,0.12);
	border-color:rgba(18,164,115,0.28);
	box-shadow:none;
	animation:doneIn .45s cubic-bezier(.2,.9,.3,1.2);
}
.phase--done .dot{display:none;}
.phase--done .check{display:block;}
@keyframes doneIn{
	0%{opacity:0;transform:scale(0.85);}
	100%{opacity:1;transform:scale(1);}
}

#test{
	margin:2.2em auto 0;
	max-width:52em;
	padding:2em 1.6em 1.6em;
	background:var(--paper);
	border:1px solid var(--edge);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
}
#test.done{
	border-color:rgba(18,164,115,0.35);
	box-shadow:var(--shadow),0 0 0 3px rgba(18,164,115,0.12);
}
#test.done .tile--main .meterText{animation:resultIn .5s cubic-bezier(.2,.9,.3,1.2);}
@keyframes resultIn{
	0%{opacity:0;transform:scale(0.9);}
	100%{opacity:1;transform:scale(1);}
}

.ratingRow{margin-bottom:1.2em;}
.ratingLabel{
	font-size:0.72em;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
	color:var(--ink-soft);
	margin-bottom:0.5em;
}
.rating{
	display:inline-block;
	padding:0.5em 1.3em;
	border-radius:999px;
	font-size:1em;font-weight:700;letter-spacing:0.01em;
	background:rgba(18,164,115,0.12);
	color:var(--brand-deep);
	transition:background .3s ease,color .3s ease;
}
.rating.none{background:rgba(90,122,107,0.10);color:var(--ink-soft);}
.rating.good{background:rgba(15,148,160,0.14);color:#0B7F8A;}
.rating.poor{background:rgba(200,150,40,0.16);color:#96701A;}
.rating.bad{background:rgba(214,90,70,0.14);color:#B4442F;}

.tiles{display:flex;justify-content:center;flex-wrap:wrap;gap:0.7em;}
.tiles+.tiles{margin-top:0.7em;}
.tile{
	flex:1 1 9em;max-width:14em;
	padding:0.9em 0.8em;
	border-radius:18px;
	background:var(--paper-solid);
	border:1px solid var(--edge);
	box-shadow:0 14px 30px -26px rgba(6,58,38,0.65);
}
.tile--main{flex:1 1 11em;}
.tile__name{
	font-size:0.72em;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
	color:var(--ink-soft);
}
.tile__row{display:flex;align-items:baseline;justify-content:center;gap:0.3em;margin-top:0.2em;}
.meterText{
	font-weight:800;letter-spacing:-0.03em;
	line-height:1;
	font-variant-numeric:tabular-nums;
	font-feature-settings:"tnum" 1;
	font-size:1.75em;
}
.tile--main .meterText{font-size:2.4em;}
.meterText:empty:before{content:"--";opacity:.28;}
.unit{
	font-size:0.72em;font-weight:600;letter-spacing:0.1em;
	text-transform:uppercase;
	color:var(--ink-soft);
}

.progress{
	margin:1.3em auto 0;
	max-width:26em;
	height:5px;
	border-radius:999px;
	background:rgba(16,80,64,0.075);
	overflow:hidden;
}
.progress__bar{
	height:100%;width:0;
	border-radius:999px;
	background:linear-gradient(90deg,#6FE3B4 0%,#12A473 100%);
	transition:width .25s linear;
}

.chartCard{
	margin-top:1.4em;
	padding:0.9em 0.6em 0.4em;
	border-radius:18px;
	background:var(--paper-solid);
	border:1px solid var(--edge);
	box-shadow:0 14px 30px -26px rgba(6,58,38,0.65);
}
.chartCard__head{
	display:flex;align-items:baseline;justify-content:space-between;
	padding:0 0.5em 0.5em;
}
.chartCard__name{
	font-size:0.72em;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
	color:var(--ink-soft);
}
.chartCard__hint{font-size:0.75em;color:var(--ink-soft);}
#pingChart{display:block;width:100%;height:15em;}

.options{
	margin-top:1.4em;padding-top:1.2em;
	border-top:1px solid var(--line);
	display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
	gap:1em;
}
.options .field{gap:0.7em;}
#alertThreshold{
	width:11em;
	accent-color:var(--brand);
	vertical-align:middle;
}
#thresholdValue{
	min-width:4.5em;
	display:inline-block;
	text-align:left;
	color:var(--ink);
	font-variant-numeric:tabular-nums;
}
#downloadCsvBtn{
	font:inherit;font-weight:700;font-size:0.82em;
	padding:0.6em 1.2em;
	border-radius:999px;
	border:1px solid var(--edge);
	background:rgba(255,255,255,0.6);
	color:var(--brand-deep);
	cursor:pointer;
	transition:transform .18s ease,box-shadow .25s ease,opacity .25s ease;
}
@media (hover:hover){
	#downloadCsvBtn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(6,58,38,0.8);}
}
#downloadCsvBtn:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;}
#downloadCsvBtn:disabled{opacity:.45;cursor:default;}

@media all and (max-width:44em){
	body{font-size:15px;padding-top:1.8em;}
	h1{font-size:1.8em;}
	#test{padding:1.4em 1em 1.2em;}
	.tile{flex:1 1 42%;max-width:none;}
	.tile--main{flex:1 1 100%;}
	#pingChart{height:13em;}
	#startBtn,#resetBtn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
	*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}