*{box-sizing:border-box}
:root{
 --navy:#263b53;--navy2:#1c3047;--yellow:#ffc400;--yellow2:#ffb800;
 --bg:#eef2f5;--row:#f7f9fa;--row2:#dfe7ec;--text:#161b20;
 --green:#078b16;--red:#e00000;--blue:#0097d8;--line:#c9d3da;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:12px}
.page{width:100%;min-height:100vh}
.topbar{height:54px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;position:relative;padding:0 14px}
.title-wrap{text-align:center}
.title-wrap h1{margin:0;color:var(--yellow);font-size:23px;letter-spacing:.5px;font-weight:800}
.title-wrap p{margin:2px 0 0;font-size:9px;letter-spacing:1px;color:#dce5ed}
.top-badges{position:absolute;right:12px;top:13px;display:flex;gap:5px;align-items:center}
.top-badges span{font-size:8px;background:#344b63;border:1px solid #5c7184;padding:4px 7px;border-radius:2px;white-space:nowrap}
.top-badges .online-badge{background:#203b2a;border-color:#406b4b}
.online-badge i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#2ad447;margin-right:4px}
.yellow-line{height:20px;background:var(--yellow)}
.clock{text-align:center;height:20px;line-height:20px;font-size:9px;font-weight:700;background:#fff;border-bottom:1px solid #d5dde3}

main{width:100%}
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#dce5ea;border-bottom:1px solid #bfcbd3}
.stats article{text-align:center;height:48px;padding-top:6px;border-right:1px solid #fff}
.stats article:last-child{border-right:0}
.stats span{display:block;font-size:8px;font-weight:700;margin-bottom:1px}
.stats strong{font-size:19px;color:#0097d8}
.stats article:last-child strong{color:#d49c00}

.section-card{background:#fff;margin-top:6px;border-top:1px solid var(--yellow);border-bottom:1px solid var(--line)}
.section-title{height:31px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:#f8fafb;font-size:9px;font-weight:700}
.section-title small{font-size:8px;font-weight:400;color:#777}
.table-wrap{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;table-layout:auto;min-width:1050px}
th{height:22px;background:var(--yellow);color:#111;font-size:8px;font-weight:800;padding:4px 7px;white-space:nowrap}
td{height:24px;padding:4px 7px;border-right:1px solid #fff;border-bottom:1px solid #fff;font-size:9px;white-space:nowrap}
tbody tr:nth-child(odd){background:#f7f9fa}
tbody tr:nth-child(even){background:#dce5ea}
tbody tr:hover{background:#fff1b8}
.strong{font-weight:700}
.mono{font-family:Consolas,"Courier New",monospace;font-size:8px}
.status{font-size:9px;font-weight:800}
.status.on{color:var(--green)}
.status.off{color:var(--red)}
.loading{text-align:center!important;color:#777;height:35px!important}
.error{color:var(--red)!important}
.sub{display:block;color:#667783;font-size:7px;margin-top:1px}
.event{display:inline-block;padding:3px 8px;color:#fff;font-weight:800;font-size:8px;line-height:1;border-radius:2px;background:#777}
.event.start{background:#079a18}
.event.end{background:#e00000}

.traffic-card{margin-top:7px}
.active-box{margin:7px 0 0;background:#17352a;border-top:2px solid #12c63a;color:#fff;padding:9px 12px}
.active-title{color:#49ef72;font-size:9px;font-weight:800;margin-bottom:6px}
.active-qso{display:flex;gap:18px;flex-wrap:wrap;font-size:10px}
.active-qso span{color:#d7e9df}

footer{height:24px;background:var(--navy);color:var(--yellow);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:8px;font-weight:700;margin-top:5px}

@media(max-width:900px){
 .topbar{height:auto;min-height:54px;padding:9px 10px}
 .top-badges{position:static;margin-left:auto}
 .title-wrap h1{font-size:18px}
}
@media(max-width:650px){
 .topbar{flex-wrap:wrap;gap:7px;justify-content:center}
 .top-badges{width:100%;justify-content:center}
 .yellow-line{height:16px}
 .stats{grid-template-columns:repeat(2,1fr)}
 .stats article{border-bottom:1px solid #fff}
 .title-wrap p{font-size:8px}
 footer{font-size:7px}
}