.ta-head { display: flex; align-items: center; gap: 10px; }
.ta-head h1 { margin-right: auto; }
.ta-panel { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.ta-panel h3.sub { margin: 0; color: var(--main-color); opacity: 1; }
.ta-muted { opacity: .6; font-size: 13px; margin: 0; }
.ta-err { color: #ff6b76; margin: 0; }
.ta-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ta-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: rgba(255, 255, 255, .04); }
.ta-tile span { font-size: 12px; opacity: .6; }
.ta-tile b { font-size: 24px; font-weight: 600; }
.ta-tile small { opacity: .55; font-size: 11px; }
.ta-tile b.is-up { color: #4ade80; } .ta-tile b.is-slow { color: #fb923c; } .ta-tile b.is-down { color: #f87171; }
.ta-pages { display: flex; flex-direction: column; gap: 6px; }
.ta-page { display: grid; grid-template-columns: 12px 1fr auto 90px 80px; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; font-size: 13px; }
.ta-page-name small { margin-left: 8px; opacity: .45; }
.ta-page-state { opacity: .7; font-variant-numeric: tabular-nums; }
.ta-page-tag { font-size: 11px; text-align: center; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.ta-dot { width: 10px; height: 10px; border-radius: 50%; background: #888; }
.ta-page.is-up .ta-dot { background: #4ade80; } .ta-page.is-slow .ta-dot { background: #fb923c; } .ta-page.is-down .ta-dot { background: #f87171; }
.ta-page.is-down .ta-page-tag { background: rgba(248, 113, 113, .2); }
.ta-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.ta-cols h3.sub { margin: 0 0 8px; }
.ta-bars { display: flex; flex-direction: column; gap: 6px; }
.ta-bar { display: grid; grid-template-columns: minmax(80px, 160px) 1fr 60px; align-items: center; gap: 10px; font-size: 13px; }
.ta-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-bar-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ta-bar-track i { display: block; height: 100%; background: var(--main-color); border-radius: 4px; }
.ta-bar b { text-align: right; font-variant-numeric: tabular-nums; }