:root{
	--bg:#0f1724;
	--card:#0b1220;
	--muted:#9aa6bf;
	--glass: rgba(255,255,255,0.03);
	--accent:#4f46e5;
	--good:#16a34a;
	--warn:#f59e0b;
	--bad:#ef4444;
	--glass-2: rgba(255,255,255,0.02);
}
*{box-sizing:border-box}
html{height:fit-content;}
body{height:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,'Helvetica Neue',Arial; margin:0; padding:32px; background:linear-gradient(180deg,#071028 0%, #071427 60%); color:#e6eef8;}
header{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:26px}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#06b6d4);display:flex;align-items:center;justify-content:center;font-weight:800;color:white;font-size:18px;box-shadow:0 6px 18px rgba(79,70,229,0.18)}
h1{margin:0;font-size:20px}
p.lead{margin:0;color:var(--muted);font-size:13px}

.controls{display:flex;gap:10px;align-items:center}
.btn{background:var(--glass);border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:8px;color:var(--muted);cursor:pointer;font-size:13px}
.btn.primary{background:linear-gradient(90deg,var(--accent),#06b6d4);color:white;border:0}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.card{background:linear-gradient(180deg,var(--card),rgba(10,15,25,0.6));padding:16px;border-radius:12px;border:1px solid var(--glass-2);box-shadow:0 4px 20px rgba(2,6,23,0.6)}

.res-title{display:flex;gap:12px;align-items:center}
.favicon{width:44px;height:44;border-radius:8px;background:rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);font-size:18px}
.meta{line-height:1}
.meta .name{font-weight:600}
.meta .url{font-size:12px;color:var(--muted)}

.avg{display: flex;justify-content: space-around;align-items: center;margin-top:10px;}
.avg .label{font-size:12px;color:var(--muted)}
.avg .value{font-weight:700;font-size:18px}

table{width:100%;border-collapse:collapse;margin-top:12px}
th,td{padding:8px 6px;text-align:left;font-size:13px}
th{color:var(--muted);font-weight:600;font-size:12px}
tr{border-top:1px solid rgba(255,255,255,0.02)}
.loc{display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%}
.stat-small{font-size:12px;color:var(--muted)}

.status-good{background:var(--good)}
.status-warn{background:var(--warn)}
.status-bad{background:var(--bad)}

.row {display: flex;flex-wrap: wrap;margin-right: -15px;margin-left: -15px;}
.col {flex: 1 0 0%;max-width: 100%;padding-right: 15px;padding-left: 15px;box-sizing: border-box;}
.visit-card {display: flex;justify-content: space-between;}
.visit-back {display: flex;justify-content: space-evenly;margin-bottom:10px;}
.visit-tile {width: 100%;padding: 12px 16px;background: white;border-radius: 8px;box-shadow: 0 2px 6px rgba(0,0,0,0.1);display: flex;flex-direction: row;justify-content: space-between;align-items: center;min-height: 60px;}
.visit-left {display: flex;flex-direction: column;gap: 4px;max-width: 70%;}
.visit-url {font-size: 14px;font-weight: bold;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.visit-meta {font-size: 13px;color: #666;}
.visit-right {text-align: right;font-size: 14px;}

.live-chart {margin-bottom:50px;}

footer{margin-top:58px;color:var(--muted);font-size:13px;position: relative;bottom: 10px;text-align: center;width: -webkit-fill-available;}

@media (max-width:720px){body{padding:18px} .logo{width:46px;height:46px}}