/* Server-Detailseiten */

.srv { display: flex; flex-direction: column; gap: 16px; }
.srv-body { display: flex; flex-direction: column; gap: 16px; }
.srv-head { padding: 18px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; overflow: hidden; }
.srv-head .glow { position: absolute; inset: -60% auto auto -8%; width: 340px; aspect-ratio: 1; border-radius: 50%; background: hsl(var(--h, 30) 80% 55% / .26); filter: blur(46px); pointer-events: none; }
.srv-head > * { position: relative; }
.srv-head h1 { font-size: 1.55rem; line-height: 1.15; }
.srv-head .sub { color: var(--ink-2); font-size: .92rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.srv-head .sicon { width: 64px; height: 64px; font-size: 1.7rem; }
.power { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.addr { cursor: pointer; font-family: var(--font-mono); font-size: .8rem; }
.addr:hover { color: var(--ink); }

.install { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.install .console { height: 250px; }
.install h3 { display: flex; align-items: center; gap: 10px; }
.install .fun { font-family: var(--font-serif); font-style: italic; color: var(--amber); }

.head { display: inline-grid; place-items: center; background: var(--field); border-radius: 8px; overflow: hidden; font-weight: 700; flex: none; color: var(--ink-2); }
.head img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }

/* Übersicht */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.ov-grid .card b.big { font-size: 1.6rem; display: block; margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.ov-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.splash { font-family: var(--font-serif); font-style: italic; color: var(--amber); cursor: pointer; display: inline-block; transform: rotate(-1.5deg); user-select: none; }
.plist { display: flex; flex-wrap: wrap; gap: 8px; }
.pchip { display: flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 99px; background: var(--field); box-shadow: inset 0 0 0 1px var(--rim); }
.addr-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 13px; background: var(--field); cursor: pointer; }
.addr-row:hover { box-shadow: inset 0 0 0 1px var(--amber); }
.addr-row + .addr-row { margin-top: 8px; }
.addr-row svg { width: 17px; height: 17px; color: var(--ink-3); margin-left: auto; }

/* Konsole */
.console-wrap { position: relative; }
.jump { position: absolute; right: 16px; bottom: 14px; }
.jump svg { transform: rotate(90deg); }
.cmd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar .search { position: relative; flex: 1; min-width: 160px; max-width: 340px; }
.toolbar .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-3); }
.toolbar .search input { padding-left: 38px; }

/* Dateien */
.fm { position: relative; }
.fm.over::after { content: "Hier loslassen zum Hochladen"; position: absolute; inset: 8px; border-radius: var(--r-lg); border: 2px dashed var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); display: grid; place-items: center; font-weight: 700; color: var(--amber); z-index: 3; backdrop-filter: blur(4px); }
.fm .flist td.chk { width: 32px; }
.fm .flist td.sz, .fm .flist td.dt { color: var(--ink-3); font-size: .86rem; white-space: nowrap; }
.fm .sel-bar { display: flex; gap: 10px; align-items: center; padding: 8px 12px; margin: 10px 0; border-radius: 13px; background: color-mix(in srgb, var(--amber) 16%, transparent); }
.prog { height: 10px; border-radius: 9px; background: var(--field); overflow: hidden; margin: 12px 0; }
.prog > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--moss), var(--amber)); transition: width .25s; }
.ed-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.ed-head .path { font-family: var(--font-mono); font-size: .9rem; }
.dirty { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }

/* Mods & Plugins */
.sub-chips { display: flex; gap: 8px; }
.drop.big { padding: 38px 20px; }
.drop.big b { display: block; font-size: 1.1rem; color: var(--ink); }
.drop .target { display: inline-block; margin-top: 8px; }
.res-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.res { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; background: var(--field); }
.res svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.res.ok svg { color: var(--ok); } .res.warn svg { color: var(--warn); } .res.bad svg { color: var(--bad); }
.addon-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md); background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim); flex-wrap: wrap; }
.addon-row + .addon-row { margin-top: 8px; }
.addon-row.off { opacity: .55; }
.addon-row .nm { min-width: 0; flex: 1 1 220px; }
.addon-row .nm b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.mcard { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-md); background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim); }
.mcard .t { display: flex; gap: 12px; align-items: center; }
.mcard p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; color: var(--ink-2); margin: 0; min-height: 2.6em; }
.restart-hint { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Einstellungen */
.prop-group { margin-bottom: 8px; }
.prop-group > h4 { margin: 16px 0 10px; color: var(--ink-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; }
.savebar { position: sticky; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-top: 16px; z-index: 5; flex-wrap: wrap; border-radius: 22px; }
.motd-pal { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.motd-pal button { width: 26px; height: 26px; border: 0; border-radius: 7px; cursor: pointer; font: 700 .72rem var(--font-mono); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); transition: transform .25s var(--spring); }
.motd-pal button:hover { transform: scale(1.2); }
.motd-pal button.fmt { background: var(--field); color: var(--ink); width: auto; padding: 0 8px; }
.icon-editor { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.icon-prev { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 10px; background: var(--field); box-shadow: inset 0 0 0 1px var(--rim); }
.dns-box { font-family: var(--font-mono); font-size: .84rem; padding: 12px 14px; border-radius: var(--r-md); background: var(--field); line-height: 1.7; overflow-x: auto; }
.dns-box .k { color: var(--amber); }
.range-row { display: flex; align-items: center; gap: 14px; }
.range-row output { min-width: 5.5em; text-align: right; font-variant-numeric: tabular-nums; }
.danger-zone { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 60%, transparent), 0 18px 40px -18px var(--shade); }

/* Spieler, Zugriff, Zeitplan */
.cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; align-items: start; }
.mini-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mini-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; border-radius: 13px; background: var(--field); }
.mini-row .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-row { display: flex; gap: 8px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; margin-top: 12px; }
.perm-grid label { display: flex; gap: 9px; align-items: center; font-size: .9rem; cursor: pointer; }
.perm-grid input { accent-color: var(--amber); width: 17px; height: 17px; }
.member { padding: 16px 18px; }
.member + .member { margin-top: 12px; }
.sched-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.kv { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.link-box { word-break: break-all; font-family: var(--font-mono); font-size: .86rem; padding: 12px; border-radius: 13px; background: var(--field); user-select: all; }

@media (max-width: 900px) {
  .ov-cols { grid-template-columns: 1fr; }
  .power { margin-left: 0; width: 100%; }
  .srv-head .sicon { width: 52px; height: 52px; }
}