/* Top bar: brand, tabs, station select, UTC clock, account / logout buttons */
.top{flex:none;height:clamp(50px,6.4vh,62px);display:flex;align-items:center;gap:14px;padding:0 22px;background:#fff;border-bottom:1px solid #e1e8f2;box-shadow:0 2px 10px rgba(15,40,90,.06);position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:12px;font-size:28px;font-weight:800;color:var(--navy);text-transform:uppercase;white-space:nowrap}
.brand .ic{width:38px;height:38px}
.brand em{font-style:normal;color:var(--acc)}
.tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:#eef3fb;border:1px solid #e1e8f2}
.tabs a{display:flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:9px;color:#1c2b4a;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
.tabs a .ic{width:20px;height:20px}
.tabs a:hover:not(.on){background:#e2ebf8}
.tabs a.on{background:linear-gradient(180deg,#2f7bff,#1560ec);color:#fff;box-shadow:0 4px 10px rgba(29,107,243,.35)}
.top select{appearance:none;-webkit-appearance:none;height:44px;border:0;border-radius:8px;padding:0 46px 0 20px;font-family:var(--ff);font-weight:800;font-size:18px;color:#fff;cursor:pointer;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center/16px,linear-gradient(180deg,#1650b8,#0b3680);box-shadow:0 3px 8px rgba(11,54,128,.35)}
.top .sp{flex:1}
.clkc{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:5px 16px;background:#fff;box-shadow:0 1px 3px rgba(15,40,90,.08)}
.clkc .ic{width:34px;height:34px;color:var(--navy)}
.clkc .t{font-weight:800;font-size:20px;color:var(--navy);line-height:1.1;font-variant-numeric:tabular-nums}
.clkc .z{color:var(--acc)}
.clkc .d{font-size:12.5px;color:var(--mut);line-height:1.1}
.st{display:flex;align-items:center;gap:10px;padding:0 16px;border-left:1px solid var(--line);border-right:1px solid var(--line);height:44px}
.dot{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5be08a,#12a14b);box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.st b{display:block;font-size:17px;color:var(--navy);line-height:1.1}
.st small{color:var(--mut);font-size:13px}
.lo{display:flex;align-items:center;gap:10px;height:46px;padding:0 20px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font:700 16px var(--ff);cursor:pointer;box-shadow:0 1px 3px rgba(15,40,90,.08);text-decoration:none}
.lo:hover{background:#eef3fb}
@media(max-height:800px){.top{height:48px}}
@media(max-width:1280px){.tabs a span{display:none}.tabs a{padding:0 12px}}
@media(max-width:900px){.top{flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px}.st{display:none}}
.top select.lock{pointer-events:none;padding-right:20px;background:linear-gradient(180deg,#1650b8,#0b3680)}
@media(max-width:1700px){.st{display:none}.lo span{display:none}.lo{padding:0 14px}}
.brand .bn{display:flex;flex-direction:column;gap:2px;text-transform:none}
.brand .bn strong{font-size:28px;line-height:1;font-weight:800;letter-spacing:.14em;color:var(--navy)}
.brand .bn small{font-size:11px;line-height:1;font-weight:600;letter-spacing:.02em;color:var(--mut);white-space:nowrap}
@media(max-width:1700px){.brand .bn small{display:none}}
/* more tabs (History, Alerts, Analytics, Admin): on narrower screens only the open tab keeps its name */
@media(max-width:2000px){.tabs a:not(.on) span{display:none}.tabs a{padding:0 12px}}
@media(max-width:1280px){.tabs a.on span{display:none}}