.servers-panel { margin-top: 24px; padding: 24px; border: 1px solid #25425c; border-radius: 16px; background: #0a1724; }
.servers-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.servers-heading h1 { margin: 5px 0 8px; }
.servers-heading p, #server-message, .server-time, .server-card small, .inwx-card small { color: #a9bdd0; }
#server-refresh { padding: 10px 16px; border: 1px solid #326ca5; border-radius: 9px; color: #eef5fc; background: #123d6b; font: inherit; cursor: pointer; }
#server-refresh:disabled { opacity: .6; cursor: wait; }
.server-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.server-card, .inwx-card { padding: 20px; border: 1px solid #25425c; border-radius: 12px; background: #07111c; }
.server-card h2 { margin: 8px 0; font-size: 21px; }
.server-metric { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 20px 0; }
.server-metric strong { text-align: right; }
.server-metric small, .server-metric meter { grid-column: 1 / -1; width: 100%; }
.server-metric meter { height: 10px; accent-color: #65c4ad; }
.server-warning { color: #f0c878; }
.server-ok { color: #85d1b7; }
.server-time { margin-bottom: 5px; font-size: 13px; }
.inwx-card { margin-top: 16px; }
.inwx-card strong { font-size: 32px; }
@media (max-width: 600px) { .servers-panel { padding: 16px; } .server-metric { grid-template-columns: 1fr; } .server-metric strong { text-align: left; } }
.server-card a { color: #8ed8ff; overflow-wrap: anywhere; }
.server-address { color: #a9bdd0; font-size: 14px; }
.server-details { margin-top: 18px; border-top: 1px solid #25425c; padding-top: 12px; overflow-wrap: anywhere; }
.server-details summary { cursor: pointer; color: #8ed8ff; font-weight: 600; }
.server-details p { font-size: 14px; }
.server-details ul { padding-left: 18px; }
.server-details li { margin-bottom: 16px; }
.server-details > a { display: block; margin-top: 12px; }