:root{--navy:#0d2440;--navy-2:#15324f;--blue:#1f6feb;--blue-soft:#e8f0fe;--teal:#0a9396;--bg:#f4f6f9;--card:#fff;--line:#e2e8f0;--text:#1b2733;--muted:#64748b;--green:#2e9e5b;--amber:#e0a106;--red:#d64545;--shadow:0 1px 3px #10223814, 0 4px 16px #1022380f;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text)}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{background:linear-gradient(100deg, var(--navy), var(--navy-2));color:#fff;align-items:center;gap:16px;padding:14px 28px;display:flex}.topbar .brand{letter-spacing:.3px;font-size:18px;font-weight:700}.topbar .brand small{opacity:.7;letter-spacing:.5px;text-transform:uppercase;font-size:11px;font-weight:400;display:block}.topbar .spacer{flex:1}.topbar .as-of{opacity:.8;font-size:12px}.layout{flex:1;min-height:0;display:flex}.sidebar{background:var(--card);border-right:1px solid var(--line);width:300px;padding:16px;overflow-y:auto}.sidebar h3{text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:6px 4px 10px;font-size:11px}.site-card{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;margin-bottom:10px;padding:12px;transition:all .15s}.site-card:hover{border-color:var(--blue);box-shadow:var(--shadow)}.site-card.active{border-color:var(--blue);background:var(--blue-soft)}.site-card .name{font-size:14px;font-weight:600}.site-card .loc{color:var(--muted);margin-top:2px;font-size:12px}.site-card .row{justify-content:space-between;align-items:center;margin-top:10px;display:flex}.progress{background:#eef1f5;border-radius:6px;height:7px;margin-top:8px;overflow:hidden}.progress>span{background:var(--blue);border-radius:6px;height:100%;display:block}.main{flex:1;padding:22px 28px;overflow-y:auto}.page-head{align-items:baseline;gap:14px;margin-bottom:4px;display:flex}.page-head h1{margin:0;font-size:22px}.page-head .loc{color:var(--muted);font-size:14px}.sub{color:var(--muted);margin:0 0 18px;font-size:13px}.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:22px;display:grid}.kpi{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;padding:16px}.kpi .label{color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-size:12px}.kpi .value{margin-top:6px;font-size:26px;font-weight:700}.kpi .value small{color:var(--muted);font-size:14px;font-weight:500}.tabs{border-bottom:1px solid var(--line);gap:4px;margin-bottom:20px;display:flex}.tab{cursor:pointer;color:var(--muted);border-bottom:2px solid #0000;padding:10px 16px;font-size:14px}.tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}.badge{border-radius:20px;align-items:center;gap:5px;padding:3px 9px;font-size:12px;font-weight:600;display:inline-flex}.badge.green{color:var(--green);background:#e6f4ec}.badge.amber{color:#9a6b00;background:#fdf3da}.badge.red{color:var(--red);background:#fbe6e6}.badge.blue{background:var(--blue-soft);color:var(--blue)}.badge.gray{color:var(--muted);background:#eef1f5}.dot{border-radius:50%;width:8px;height:8px;display:inline-block}.panel{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;margin-bottom:20px;padding:18px}.panel h2{margin:0 0 14px;font-size:15px}.grid-2{grid-template-columns:1.4fr 1fr;align-items:start;gap:20px;display:grid}@media (width<=980px){.grid-2{grid-template-columns:1fr}}.compare{aspect-ratio:1;border:1px solid var(--line);-webkit-user-select:none;user-select:none;background:#000;border-radius:12px;width:100%;max-width:640px;position:relative;overflow:hidden}.compare img{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.compare .clip{position:absolute;inset:0;overflow:hidden}.compare .handle{cursor:ew-resize;background:#fff;width:3px;position:absolute;top:0;bottom:0;box-shadow:0 0 0 1px #0003}.compare .handle:after{content:"⇔";color:var(--navy);width:30px;height:30px;box-shadow:var(--shadow);background:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:14px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.compare .tag{color:#fff;background:#0d2440d1;border-radius:6px;padding:4px 10px;font-size:12px;position:absolute;bottom:10px}.compare .tag.l{left:10px}.compare .tag.r{right:10px}.overlay-wrap{aspect-ratio:1;border:1px solid var(--line);border-radius:12px;width:100%;max-width:640px;position:relative;overflow:hidden}.overlay-wrap img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.legend{color:var(--muted);flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;display:flex}.legend span{align-items:center;gap:6px;display:inline-flex}.sw{border-radius:3px;width:12px;height:12px}.controls{flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:14px;display:flex}.controls label{color:var(--muted);font-size:13px}input[type=range]{accent-color:var(--blue)}select,button{font-family:inherit}.btn{cursor:pointer;border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600}.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:#1a5fd0}.btn.ghost{border:1px solid var(--line);color:var(--text);background:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.statlist{grid-template-columns:1fr auto;gap:8px 16px;font-size:14px;display:grid}.statlist .k{color:var(--muted)}.statlist .v{text-align:right;font-weight:600}.mtable{border-collapse:collapse;width:100%}.mtable th{text-align:left;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-bottom:1px solid var(--line);padding:8px 10px;font-size:11px}.mtable td{border-bottom:1px solid var(--line);vertical-align:middle;padding:12px 10px;font-size:14px}.mtable tr:last-child td{border-bottom:none}.mtable .mname{font-weight:600}.mtable .mmeta{color:var(--muted);font-size:12px}.cat-bar{border:1px solid var(--line);border-radius:6px;height:22px;display:flex;overflow:hidden}.cat-bar>div{height:100%}