body { font-size: 14px; }
.navbar-brand { font-weight: 600; }
.card { border: 1px solid rgba(255,255,255,.08); }
.card .card-body h2.h6 { color: #9aa4b2; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; margin-bottom: .75rem; }
.stat .fs-3 { font-weight: 600; }
.log {
  background:#0b0d10; color:#cfd6e0; padding:.75rem; border-radius:.375rem;
  max-height:480px; overflow:auto; font-size:.78rem; line-height:1.45;
  border:1px solid rgba(255,255,255,.06); white-space:pre-wrap; word-break:break-all;
}
table.table { font-size: .88rem; }

/* Server tabs (VPS Hostinger / VPS Contabo) */
.srvtab {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: .6rem .95rem; border-radius: .5rem; text-decoration: none; color: inherit;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
}
.srvtab:hover { background: rgba(255,255,255,.07); color: inherit; }
.srvtab.active { border-color: #4c8dff; background: rgba(76,141,255,.14); }
.srvtab .meta { color: #9aa4b2; font-size: .78rem; }
.srvtab .dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.srvtab .dot.ok { background: #2ecc71; }
.srvtab .dot.bad { background: #e5484d; }

/* Usage charts */
.usage-chart { width: 100%; height: auto; display: block; }
.usage-chart .grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.usage-chart .lbl { fill: #9aa4b2; font-size: 10px; }
.usage-chart .line { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.usage-chart .line.a { stroke: #4c8dff; }
.usage-chart .line.b { stroke: #f5a524; }

/* Server page (hPanel-style overview) */
.metric .label, .tile .label { color: #9aa4b2; font-size: .8rem; margin-bottom: .25rem; }
.metric .value, .tile .value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.spark { width: 150px; height: 44px; flex: none; }
.spark .stroke { fill: none; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark .fill { stroke: none; opacity: .18; }
.spark.a .stroke { stroke: #7c6bff; } .spark.a .fill { fill: #7c6bff; }
.spark.b .stroke { stroke: #e5484d; } .spark.b .fill { fill: #e5484d; }
.ring { width: 56px; height: 56px; flex: none; }
.ring .bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 6; }
.ring .fg { fill: none; stroke: #7c6bff; stroke-width: 6; stroke-linecap: round; }