/* Status-Seite im Stil eines Monitoring-Dashboards */
.st { padding-top: 34px; padding-bottom: 30px; --ok: #22c55e; --bad: #ef4444; --warn2: #f59e0b; --idle: #3b4456; }
.st-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.st-head h1 { font: 800 clamp(32px, 4vw, 46px)/1.1 var(--body); text-transform: none; letter-spacing: -.02em; margin: 0 0 8px; }
.st-head p { margin: 0; color: var(--muted); font-size: 17px; }
.st-head-actions { display: flex; align-items: center; gap: 12px; }
.st-overall { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; border: 1px solid var(--line-2); }
.st-overall i { width: 10px; height: 10px; border-radius: 50%; background: var(--idle); }
.st-overall.ok { color: #86efac; border-color: rgba(34, 197, 94, .35); background: rgba(34, 197, 94, .08); }
.st-overall.ok i { background: var(--ok); box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: stPing 2s infinite; }
.st-overall.partial, .st-overall.maintenance { color: #fcd34d; border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .08); }
.st-overall.partial i, .st-overall.maintenance i { background: var(--warn2); }
.st-overall.down { color: #fca5a5; border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .08); }
.st-overall.down i { background: var(--bad); }
@keyframes stPing { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.st-icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-2); background: none; color: #fff; cursor: pointer; }
.st-icon-btn:hover { background: rgba(255, 255, 255, .06); }
.st-icon-btn .ico { width: 22px; height: 22px; }
.st-icon-btn.spin .ico { animation: stSpin .6s linear infinite; }
@keyframes stSpin { to { transform: rotate(360deg); } }

/* Werkzeugleiste */
.st-tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 18px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .015); margin-bottom: 30px; }
.st-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 9px; background: rgba(0, 0, 0, .3); }
.st-search:focus-within { border-color: var(--accent); }
.st-search .ico { width: 18px; height: 18px; color: var(--muted); }
.st-search input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font: 15px var(--body); }
.st-select { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14.5px; }
.st-select select { height: 46px; min-width: 150px; padding: 0 36px 0 14px; border-radius: 9px; border: 1px solid var(--line-2); color: var(--text); font: 15px var(--body); appearance: none; cursor: pointer;
    background: rgba(0, 0, 0, .3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b95aa' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.st-select select option { background: var(--panel); }

/* Karten */
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.st-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 22px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); transition: border-color .2s; }
.st-card:hover { border-color: rgba(var(--accent-rgb), .35); }
.st-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.st-card-title { min-width: 0; }
.st-card-title h3 { margin: 0 0 4px; font: 700 21px var(--body); text-transform: none; letter-spacing: -.01em; color: #fff; }
.st-card-title p { margin: 0; color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-dot { margin: 0 9px; opacity: .7; }
.st-badge { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; font: 700 13.5px var(--body); color: #fff; background: var(--idle); }
.st-badge i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.st-badge.online { background: var(--ok); }
.st-badge.offline { background: #b91c1c; }
.st-badge.offline i { background: #fca5a5; }
.st-badge.maintenance { background: #b45309; }
.st-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.st-mid { margin-bottom: -4px; }
.st-players b { color: #fff; }
.st-ms { color: #c9d2e3; }
.st-bars { display: grid; grid-template-columns: repeat(50, 1fr); gap: 3px; height: 48px; }
.st-bar { display: block; height: 100%; border-radius: 3px; background: var(--idle); opacity: .45; transition: transform .12s; }
.st-bar.online { background: var(--ok); opacity: 1; }
.st-bar.offline { background: var(--bad); opacity: 1; }
.st-bar.maintenance { background: var(--warn2); opacity: 1; }
.st-bar.soon, .st-bar.unknown { background: #64748b; opacity: .8; }
.st-bar:not(.none):hover { transform: scaleY(1.08); filter: brightness(1.2); }
.st-times { font-size: 13.5px; }
.st-uptime { color: #c9d2e3; font-weight: 600; }
.st-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--line); }
.st-connect { font-weight: 700; font-size: 14px; }
.st-copy { margin-left: auto; background: none; border: 1px dashed var(--line-2); border-radius: 7px; color: var(--muted); font: 12.5px ui-monospace, monospace; padding: 4px 9px; cursor: pointer; }
.st-copy:hover { color: #fff; border-color: var(--accent); }
.st-empty { text-align: center; color: var(--muted); padding: 40px; }
.st-discord { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 16px 20px; border-radius: 12px; background: linear-gradient(120deg, rgba(88, 101, 242, .25), rgba(88, 101, 242, .06)); border: 1px solid rgba(88, 101, 242, .35); color: #fff; }
.st-discord:hover { color: #fff; border-color: #5865f2; }
.st-discord > .ico:first-child { width: 26px; height: 26px; color: #a5b0ff; }
.st-discord > .ico:last-child { margin-left: auto; }
.st-foot { text-align: center; color: var(--dim); font-size: 13px; margin-top: 22px; }

@media (max-width: 1200px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    .st-grid { grid-template-columns: 1fr; }
    .st-card { padding: 20px; }
    .st-bars { gap: 2px; height: 40px; }
    .st-select { flex: 1; }
    .st-select select { flex: 1; min-width: 0; }
}