/* Control Center — quiet surfaces, distinct fleets, factual telemetry. */
.operation-progress .operation-copy small,.console-operation-card .operation-copy small { white-space:normal; overflow-wrap:anywhere; line-height:1.5; color:#bed0e4; }
.operation-metrics-note { color:#bed0e4; font-size:13px; line-height:1.6; margin:0 0 14px; }
.operation-result { display:grid; gap:5px; padding:12px; margin:0 0 14px; border:1px solid #33885e; border-radius:10px; color:#b6edd0; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.operation-result.is-error { border-color:#bc5469; color:#ffd0da; background:rgba(152,45,64,.12); }
.fleet-rings { display:grid; gap:10px; margin:8px 0 16px; }
.ui-icon { display:inline-block; width:20px; height:20px; flex:0 0 20px; vertical-align:middle; overflow:visible; pointer-events:none; }
.ui-icon * { vector-effect:non-scaling-stroke; }
.button,.card-actions button,.console-actions button,.text-button,.pagination button,.command-bar button,.template-card footer button { display:inline-flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:8px; white-space:nowrap; line-height:1.3; }
.button>.ui-icon,.button>[data-icon],.card-actions button>.ui-icon,.console-actions button>.ui-icon,.text-button>.ui-icon,.text-button>[data-icon],.command-bar button>[data-icon] { flex-shrink:0; }
button[hidden],.button[hidden] { display:none!important; }
.icon-button,.modal-close { display:inline-flex; align-items:center; justify-content:center; }
.mobile-menu { align-items:center; justify-content:center; }
.nav-item>span:first-child,[data-icon] { display:inline-flex; align-items:center; justify-content:center; }
.nav-item .ui-icon { width:21px; height:21px; flex-basis:21px; }
.shortcut-symbol .ui-icon,.operation-card>span .ui-icon { width:25px; height:25px; }
.server-cover h3 button .ui-icon { margin-left:auto; opacity:.65; }
.server-address .ui-icon { width:18px; height:18px; flex-basis:18px; }
.service-card[data-kind="game"] .server-cover h3 { font-size:19px; }
.metric-card>small,.backup-overview-grid>article>small { display:none!important; }
.metric-card.measurement-stale>small,.metric-card.measurement-pending>small { display:block!important; color:var(--orange); }
.service-card[data-kind="game"] .card-action-slot>.card-actions:not(:has(>button[data-action="restart"]:not([hidden])))>button[data-action="start"] { grid-column:1/-1; }
.game-rings .game-ring-card,.service-card .fleet-rings .game-ring-card { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(84px,1fr); gap:12px; text-align:left; align-items:center; }
.ring-current { display:flex; align-items:center; gap:10px; min-width:0; }
.game-rings .ring-current .game-ring,.service-card .fleet-rings .ring-current .game-ring { width:62px; min-width:62px; height:62px; }
.game-rings .ring-current .game-ring strong,.service-card .fleet-rings .ring-current .game-ring strong { font-size:15px; }
.game-rings .ring-copy>span,.service-card .fleet-rings .ring-copy>span { font-size:12px; line-height:1.4; }
.game-rings .ring-copy>strong,.service-card .fleet-rings .ring-copy>strong { font-size:14px; line-height:1.4; margin:6px 0 0; }
.ring-peaks { border-left:1px solid var(--line); padding-left:12px; min-width:0; }
.ring-peaks .peaks-heading { display:block; color:var(--muted); font-size:11px; margin-bottom:9px; }
.ring-peaks strong { color:var(--text); font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.service-card[data-kind="game"] { container-type:inline-size; }
@container (min-width:450px) { .service-card .fleet-rings .ring-current .game-ring { width:82px; min-width:82px; height:82px; }.service-card .fleet-rings .ring-current .game-ring strong { font-size:18px; } }
.service-card[data-kind="game"] .server-cover { height:auto; min-height:215px; }
.service-card[data-kind="game"] .server-topline { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.service-card[data-kind="game"] .server-topline .service-state { grid-row:1; justify-self:end; }
.service-card[data-kind="game"] .game-label { grid-row:2; display:flex; flex-direction:column; align-items:flex-start; min-height:64px; gap:6px; text-align:left; font-size:24px; line-height:1.2; letter-spacing:0; font-weight:700; }
.service-card[data-kind="game"] .game-version { color:var(--muted); font-size:14px; font-weight:500; }
.service-card .fleet-rings .game-ring-card { flex-direction:row; text-align:left; padding:12px; gap:14px; background:rgba(255,255,255,.015); }
.service-card .fleet-rings .game-ring { width:82px; min-width:82px; height:82px; }
.service-card .fleet-rings .game-ring strong { font-size:18px; }
.service-card .fleet-rings .game-ring small { font-size:10px; }
.service-card .fleet-rings .ring-copy { min-width:0; }
.service-card .fleet-rings .ring-copy>strong { font-size:15px; }
.service-card .fleet-rings .ring-copy>span { font-size:13px; }
.service-card .fleet-rings .ring-copy>small { font-size:12px; line-height:1.4; }
.history-period { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; }
.history-period select { padding:10px 12px; min-width:170px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); color:var(--text); font:inherit; cursor:pointer; }
.history-period select:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.history-note,.history-source { color:var(--muted); font-size:13px; line-height:1.5; }
.history-note { margin:-8px 0 18px; }
.history-source { margin-top:8px; }
@media (max-width:600px) { .history-period { flex-direction:column; align-items:flex-start; } }
.status-banner.checking { background:rgba(93,171,235,.06); border-color:rgba(93,171,235,.3); }
.status-banner.checking .status-orb { background:#83b8e6; color:#102133; }
:root {
  --bg:#0c1018; --bg-soft:#111722; --sidebar:#10151f;
  --panel:#141b27; --panel-2:#1a2331; --panel-3:#202b3a;
  --line:#2a3546; --line-soft:#232d3d; --text:#ecf1f8;
  --muted:#a0adc0; --muted-2:#8290a5; --cyan:#67d9c3;
  --cyan-soft:#67d9c314; --green:#78d8a0; --green-soft:#78d8a012;
  --violet:#b7a3f5; --violet-soft:#b7a3f514; --pink:#e5b892;
  --red:#ff8b9c; --red-soft:#ff8b9c14; --orange:#efbd7e;
  --shadow:0 4px 24px #0000000c; --radius:16px; --sidebar-width:236px;
  font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif;
}

.metric-inline-label { display:inline-flex; align-items:center; gap:8px; }
.metric-inline-label .ui-icon { width:18px; height:18px; flex:0 0 18px; color:var(--cyan); }
.vm-metrics .metric-inline-label { display:flex; }
.backup-metric-label { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.backup-metric-label i { color:var(--cyan); display:inline-flex; }
.backup-metric-label .ui-icon { width:23px; height:23px; }

body { background:var(--bg); font-size:15px; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; } button { touch-action:manipulation; }
button:disabled { cursor:not-allowed!important; opacity:.48; transform:none!important; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
::selection { background:#67d9c344; } ::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-thumb { background:#364257; border-radius:8px; } ::-webkit-scrollbar-track { background:transparent; }
.skip-link { position:fixed; z-index:200; top:8px; left:8px; padding:12px; background:var(--cyan); color:#10241f; transform:translateY(-160%); border-radius:8px; }
.skip-link:focus { transform:translateY(0); }
.sidebar { padding:28px 14px 16px; background:var(--sidebar); border-color:var(--line-soft); }
.brand { gap:10px; padding-inline:12px; }.brand-mark { width:36px; height:36px; border-radius:11px; background:var(--cyan); box-shadow:none; border:0; font-size:21px; }
.brand strong { font-size:18px; }.brand small { font-size:11px; letter-spacing:.14em; margin-top:2px; }
.side-search { background:#181f2c; border-color:var(--line); margin:26px 6px 20px; height:40px; }.side-search input { font-size:14px; }
.nav-item { min-height:44px; font-size:15px; font-weight:500; border-radius:9px; color:var(--muted); }
.nav-item:hover { background:#ffffff05; }.nav-item.active { color:var(--cyan); background:#67d9c310; border-color:transparent; box-shadow:inset 3px 0 var(--cyan); }
.nav-item>b { background:#ffffff08; color:var(--muted); }.nav-item>span { font-size:17px; font-weight:500; color:inherit; }
.nav-caption { color:var(--muted-2); margin-top:24px; }.main-nav { gap:3px; }
.mini-health { margin-top:36px; background:#171f2b; border-color:var(--line); }.mini-health small { font-size:12px; color:var(--muted); }
.mini-meter { background:#2a3547; }.mini-meter span { background:var(--cyan); }
.account-chip { margin-top:auto; }.avatar { background:#283b3e; color:var(--cyan); border-radius:50%; }
.topbar { height:70px; background:#0c1018ed; backdrop-filter:blur(16px); padding-inline:32px; }
.breadcrumb { font-size:14px; }.live-pill { text-transform:none; font-size:13px; font-weight:500; background:#171f2b; padding:8px 12px; }
.live-pill.is-stale { color:var(--orange); border-color:#efbd7e55; }
.live-pill.is-stale .status-dot { background:var(--orange); box-shadow:none; }
.status-dot { width:6px; height:6px; box-shadow:none!important; }.status-dot.healthy { box-shadow:0 0 0 3px #78d8a012!important; }
.button { min-height:40px; font-size:14px; font-weight:600; border-radius:9px; }
.button.primary { background:var(--cyan); color:#102923; box-shadow:0 2px 8px #67d9c310; }
.button.secondary,.icon-button { background:#1a2331; color:#c5d0df; border:1px solid var(--line); }.icon-button { font-size:20px; }
.button:hover,.icon-button:hover { filter:brightness(1.1); transform:translateY(-1px); }.button:active,.icon-button:active { transform:translateY(0) scale(.98); }
.text-button { font-size:14px; font-weight:600; }.eyebrow { font-size:12px; letter-spacing:.12em; font-weight:600; color:var(--muted-2); }
.view { max-width:1880px; margin:auto; padding:30px 32px 54px; animation:page-reveal .35s cubic-bezier(.16,1,.3,1); }
.page-heading { margin:4px 0 26px; align-items:center; gap:20px; }.page-heading h1 { font-size:30px; font-weight:650; letter-spacing:-1px; line-height:1.2; margin:8px 0; }
.page-heading p { font-size:15px; line-height:1.6; }.heading-dot { color:var(--cyan)!important; }.page-heading h1 span { color:inherit; }
.status-banner { min-height:62px; background:#78d8a008; border-color:#78d8a028; border-radius:12px; padding:12px 16px; margin-bottom:28px; grid-template-columns:30px 1fr auto; }
.status-orb { width:26px; height:26px; font-size:14px; color:var(--green); background:#78d8a018; }
.status-banner strong { font-size:14px; font-weight:600; }.status-banner small { margin-top:3px; font-size:13px; }.status-banner time { font-size:13px; }
.status-banner.warning,.status-banner.error { background:#efbd7e08; }.status-banner.error { background:#ff8b9c08; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:25px 0 14px; }
.section-heading h2 { margin:4px 0; font-size:17px; font-weight:600; letter-spacing:-.3px; }.section-heading>span { color:var(--muted-2); font-size:13px; text-align:right; }
.metric-grid { gap:14px; margin-bottom:22px; }.metric-card { min-height:156px; padding:19px 20px; border:1px solid var(--line-soft); background:var(--panel); box-shadow:none; border-radius:14px; }
.metric-card::before { display:none; }.metric-card header { font-size:14px; font-weight:500; color:var(--muted); }.metric-card header i { background:transparent; color:var(--muted-2); font-size:19px; }
.metric-card>strong { font-size:28px; font-weight:650; letter-spacing:-.9px; margin-top:18px; font-variant-numeric:tabular-nums; }
.metric-card>small { display:block; margin-top:5px; font-size:13px; line-height:1.5; }
.progress { height:4px; background:#283345; margin-top:17px; }.progress>span { background:var(--cyan); transition:width .85s cubic-bezier(.22,1,.36,1); }.accent-violet .progress>span { background:var(--violet); }.accent-green .progress>span { background:var(--green); }
.metric-card[data-unavailable="true"] .progress { opacity:.25; }
.fleet-presence { display:flex; gap:8px; margin-top:13px; }.fleet-presence span { font-size:12px; color:var(--game-color); background:color-mix(in srgb,var(--game-color) 10%,transparent); padding:3px 7px; border-radius:5px; }
[data-game="minecraft_java"] { --game-color:#80d69a; --game-art:url("/assets/games/minecraft-java.png"); --game-rgb:128,214,154; }
[data-game="project_zomboid"] { --game-color:#edb47c; --game-art:url("/assets/games/project-zomboid.png"); --game-rgb:237,180,124; }
[data-game="space_engineers"] { --game-color:#8abafa; --game-art:url("/assets/games/space-engineers.png"); --game-rgb:138,186,250; }
[data-game="valheim"] { --game-color:#e9c786; --game-art:url("/assets/games/valheim-v1.png"); --game-rgb:233,199,134; }
[data-game="terraria"] { --game-color:#8bdd74; --game-art:url("/assets/games/terraria.jpg"); --game-rgb:139,221,116; }
.template-card[data-game="terraria"],.game-choice[data-game="terraria"] { background-image:linear-gradient(145deg,#121d21aa,#101824f5 85%),var(--game-art); background-size:cover; background-position:center; }
.game-choice[data-game="terraria"].active { border-color:var(--game-color); box-shadow:inset 0 0 0 1px #8bdd7440,0 8px 24px #8bdd7412; }
[data-game="terraria"]>.game-detail-hero { background-image:linear-gradient(90deg,#151e22e8,#151e2278),var(--game-art); }
.fleet-summary { display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:13px 17px; margin-bottom:15px; border:1px solid var(--line-soft); border-radius:11px; background:#ffffff02; }
.fleet-summary>span { font-size:13px; color:var(--muted); }.fleet-summary strong { color:var(--text); font-size:15px; font-weight:600; margin-left:6px; font-variant-numeric:tabular-nums; }
.fleet-summary>small { font-size:12px; color:var(--muted-2); margin-left:auto; }
.service-card-grid,.game-card-grid { gap:16px; align-items:start; grid-template-columns:repeat(3,minmax(0,1fr)); }
.service-card,.service-card[data-kind="game"] { padding:0; min-height:0; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:15px; box-shadow:none; transition:border-color .2s,box-shadow .2s; }
.service-card:hover { border-color:#47556a; box-shadow:0 10px 30px #00000020; }.service-card[data-kind="game"]::before { display:none; }
.server-cover { position:relative; height:133px; padding:16px 18px; background:linear-gradient(90deg,#111925e8,#1119254d),linear-gradient(0deg,var(--panel),transparent 90%),var(--game-art); background-size:cover; background-position:center 42%; border-top:2px solid var(--game-color,var(--cyan)); }
.service-card:not([data-kind="game"]) .server-cover { height:112px; background:linear-gradient(120deg,#203332,#141b27); }
.server-topline { display:flex; justify-content:space-between; gap:8px; align-items:center; }.game-label { color:var(--game-color,var(--cyan)); font-size:12px; font-weight:650; letter-spacing:.06em; }
.service-card .service-state { margin:0; font-size:11px; padding:5px 8px; border-radius:20px; background:#0c1018bf; backdrop-filter:blur(8px); white-space:nowrap; }
.server-cover h3,.service-card[data-kind="game"] h3 { font-size:21px; margin:20px 0 4px; font-weight:650; text-shadow:none; letter-spacing:-.45px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.server-cover>small { font-size:12px; color:#bbc8d9; }.server-body { padding:0 18px 16px; }
.card-stats { gap:0; margin:6px 0 15px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.card-stat { border:0; border-bottom:1px solid var(--line-soft); border-radius:0; background:transparent!important; padding:11px 0; backdrop-filter:none!important; }
.card-stat:nth-child(even) { padding-left:14px; border-left:1px solid var(--line-soft); }.card-stat span { font-size:12px; text-transform:none; color:var(--muted); }
.card-stat strong { font-size:17px; font-weight:600; margin-top:5px; font-variant-numeric:tabular-nums; letter-spacing:-.3px; }
.server-memory-detail { display:flex; justify-content:space-between; align-items:center; gap:9px; margin:6px 0; font-size:12px; color:var(--muted); }.server-memory-detail strong { color:var(--text); font-size:13px; font-weight:500; }.server-memory-detail b { color:var(--game-color,var(--cyan)); font-weight:500; }
.memory-note { font-size:12px; line-height:1.55; color:var(--muted-2); margin:9px 0; }
.server-address { display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px; background:#0c101880; border:1px solid var(--line-soft); color:var(--muted); border-radius:8px; padding:10px; margin-top:14px; cursor:pointer; font-size:13px; text-align:left; }
.server-address code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#d1dce9; font-size:13px; }.server-address:hover { border-color:var(--game-color,var(--cyan)); }
.card-actions { border:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 0 0; }.card-actions button { min-height:36px; font-size:13px; border-color:var(--line); background:#1d2736; color:#cfdae8; font-weight:500; }
.card-actions button:hover { background:#283549; }.card-actions .primary-action { font-weight:600; }
.server-more { border-top:1px solid var(--line-soft); margin-top:14px; }.server-more summary { list-style:none; padding:12px 0 0; color:var(--muted); font-size:13px; cursor:pointer; display:flex; justify-content:space-between; }
.server-more summary::after { content:"⌄"; }.server-more[open] summary::after { content:"⌃"; }.server-more .card-actions { grid-template-columns:1fr 1fr; padding-bottom:1px; }
.service-facts { margin:10px 0; }.service-facts>div { font-size:12px; padding:9px 0; }.service-facts strong { font-weight:500; max-width:66%; }
.panel { background:var(--panel); border-color:var(--line-soft); box-shadow:none; }.panel-header { min-height:72px; padding:18px 20px; }.panel-header h2 { font-size:15px; font-weight:600; margin-top:5px; }.panel-header.compact { min-height:64px; }
.overview-detail-grid { margin-top:20px; }.content-grid.equal { gap:20px; }
.vm-metrics { display:grid; grid-template-columns:1fr 1fr; padding:17px 20px 9px; gap:18px; }.vm-metrics>div { min-width:0; }.vm-metrics span,.vm-metrics small { color:var(--muted); font-size:12px; display:block; }.vm-metrics strong { display:block; font-size:19px; margin:6px 0 3px; font-weight:600; }.vm-metrics .progress { margin-top:10px; }.vm-metrics .vm-network { grid-column:1/-1; font-size:12px; padding-top:7px; border-top:1px solid var(--line-soft); color:var(--muted); line-height:1.7; }
.service-table { padding:0 12px 8px; }.service-row { width:100%; color:var(--text); background:transparent; border:0; border-bottom:1px solid var(--line-soft); grid-template-columns:minmax(125px,1fr) 95px 65px 75px; gap:7px; min-height:53px; padding:10px 8px; text-align:left; }
.service-identity { gap:8px; }.service-icon { width:28px; height:28px; flex-basis:28px; border-radius:8px; font-size:15px; }.service-identity strong { font-size:13px; font-weight:550; }.service-identity small { font-size:11px; }.service-cell { text-align:right; }.service-cell strong { font-size:13px; font-weight:500; }.service-cell small { font-size:11px; }.service-row .service-state { font-size:10px; }
.resource-chart { height:189px; padding:22px 20px 0; }.resource-chart svg { width:100%; height:100%; overflow:visible; }.resource-chart .chart-grid { stroke:#ffffff09; stroke-width:1; }.resource-chart .chart-cpu { stroke:var(--cyan); }.resource-chart .chart-ram { stroke:var(--violet); }.resource-chart polyline { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.resource-chart text { font:9px "Segoe UI",sans-serif; fill:var(--muted-2); }.resource-chart .chart-area { fill:url(#cpu-fill); stroke:none; }.chart-scale { display:flex; justify-content:space-between; padding:12px 20px 17px; font-size:12px; color:var(--muted-2); }.chart-legend { display:flex; gap:13px; font-size:12px; color:var(--muted); }.chart-legend span::before { content:""; display:inline-block; height:6px; width:6px; margin-right:5px; border-radius:50%; background:var(--cyan); }.chart-legend span+span::before { background:var(--violet); }
.storage-shortcuts { display:grid; grid-template-columns:1fr 1fr; gap:13px; padding:17px 20px 20px; }.storage-shortcuts button { display:grid; grid-template-columns:32px 1fr; gap:7px 10px; text-align:left; padding:17px 14px; border:1px solid var(--line); border-radius:12px; background:#192230; color:var(--text); cursor:pointer; transition:transform .2s,border-color .2s; }
.storage-shortcuts button:hover { transform:translateY(-3px); border-color:#67d9c355; }.shortcut-symbol { grid-row:1/3; width:30px; height:30px; display:grid; place-items:center; color:var(--cyan); background:var(--cyan-soft); border-radius:8px; font-size:19px; }.shortcut-symbol.violet { color:var(--violet); background:var(--violet-soft); }
.storage-shortcuts strong { font-size:14px; font-weight:600; }.storage-shortcuts b { font-size:22px; font-weight:600; }.storage-shortcuts small,.storage-shortcuts em { grid-column:1/-1; font-size:12px; color:var(--muted); font-style:normal; margin-top:4px; }.storage-shortcuts em { color:var(--cyan); margin-top:10px; }
.activity-list { padding:8px 20px 16px; }.activity-item { grid-template-columns:8px 1fr; gap:6px 10px; }.activity-item strong { font-size:13px; font-weight:550; }.activity-item small { font-size:12px; margin-top:4px; overflow-wrap:anywhere; }.activity-item time { grid-column:2; font-size:11px; }.activity-item:nth-child(n+4) { display:none; }
.capacity-details { margin-top:20px; overflow:hidden; }.capacity-details>summary,.templates-panel>summary { padding:18px 20px; cursor:pointer; font-size:14px; font-weight:600; }.capacity-details>summary>span,.templates-panel>summary>span { float:right; color:var(--muted-2); font-size:12px; font-weight:400; }
.stat-rows { padding:8px 20px 18px; }.stat-rows>div { font-size:13px; padding:12px 0; gap:12px; }.stat-rows strong { font-weight:550; }.notice { font-size:13px; line-height:1.65; color:var(--muted); background:#ffffff03; border-color:var(--line-soft); border-radius:9px; }
.resource-policy { background:#19262a; border-color:#67d9c322; }.resource-policy strong { font-size:14px; font-weight:550; }.resource-policy small { font-size:13px; line-height:1.6; color:var(--muted); }
.templates-panel { margin-top:22px; }.templates-panel>section { border-top:1px solid var(--line-soft); }.template-card { border-radius:11px; }.template-card h3 { font-size:17px; }
/* Five game families, with a readable two-column picker on small screens. */
.template-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr)); }
.game-picker { grid-template-columns:repeat(5,minmax(0,1fr)); }
.template-card { min-height:206px; padding-bottom:60px; }
.template-card header { min-height:44px; gap:8px; align-items:center; }
.template-logo.has-wordmark { width:112px; max-width:50%; height:44px; background:transparent; border-radius:0; }
.template-logo.has-wordmark img { display:block; width:100%; height:44px; object-fit:contain; filter:drop-shadow(0 2px 4px #0008); }
.game-choice .template-logo.has-wordmark { width:142px; max-width:100%; }
.game-choice strong { font-size:14px; }
.game-choice small,.template-card p,.template-card footer { font-size:12px; line-height:1.5; }
.template-card footer { gap:8px; align-items:center; }
.template-card footer>span { max-width:62%; }
.template-card footer button { font-size:13px; }
.template-card[data-game="valheim"],.game-choice[data-game="valheim"] { background-image:linear-gradient(145deg,#121d21aa,#101824f5 85%),var(--game-art); background-size:cover; background-position:center; }
.game-choice[data-game="valheim"].active { border-color:var(--game-color); box-shadow:inset 0 0 0 1px #e9c78640,0 8px 24px #e9c78612; }
.server-join-code { margin-top:8px; }
.server-join-code code { margin-left:auto; letter-spacing:.08em; }
.valheim-connection-note { display:flex; align-items:flex-start; gap:9px; max-width:760px; margin:12px auto 0; color:#c4d0dc; font-size:14px; line-height:1.6; }
.valheim-connection-note>.ui-icon { flex:0 0 18px; margin-top:3px; color:#e9c786; }
@media(max-width:760px) { .game-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }.game-choice { padding:10px; }.game-choice small { font-size:11px; } }
@media(max-width:600px) { .topbar .top-actions { min-width:0; flex:1; justify-content:flex-end; }.topbar .live-pill { min-width:0; overflow:hidden; }.topbar .live-pill>span { overflow:hidden; text-overflow:ellipsis; }.topbar .icon-button { flex-shrink:0; } }
@media(max-width:420px) { #server-wizard .modal-shell>footer { flex-wrap:wrap; } #server-wizard .modal-shell>footer .button { flex:1 0 auto; min-width:0; white-space:nowrap; font-size:13px; padding-inline:10px; min-height:46px; } }
.badge { font-size:11px; letter-spacing:.025em; font-weight:550; padding:5px 8px; background:#ffffff08; border-radius:6px; }.badge.success { color:var(--green); background:var(--green-soft); }.badge.warning { color:var(--orange); }.badge.muted { color:var(--muted); }
.backup-overview-grid { gap:14px; }.backup-overview-grid>article { padding:18px 20px; background:var(--panel); border-color:var(--line-soft); border-radius:14px; }.backup-overview-grid span { font-size:13px; }.backup-overview-grid strong { font-size:26px; font-weight:600; }.backup-overview-grid small { font-size:12px; color:var(--muted); }
.backup-list { padding:0!important; display:block!important; }.backup-workbench { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:320px; }.backup-selector { padding:14px; display:grid; align-content:start; gap:9px; border-right:1px solid var(--line-soft); }
.backup-select { display:grid; grid-template-columns:34px 1fr; gap:4px 9px; border:1px solid var(--line-soft); background:#101722; color:var(--text); border-radius:10px; text-align:left; padding:14px 10px; cursor:pointer; transition:border-color .2s,background .2s; }.backup-select.active { border-color:var(--game-color,var(--cyan)); background:#ffffff05; }.backup-select strong { font-size:14px; font-weight:600; }.backup-select small { grid-column:2; font-size:12px; color:var(--muted); }.backup-select>span { grid-row:1/3; display:grid; place-items:center; font-size:13px; font-weight:650; color:var(--game-color,var(--cyan)); background:color-mix(in srgb,var(--game-color,var(--cyan)) 10%,transparent); border-radius:8px; }
.backup-detail { min-width:0; padding:18px 20px; }.backup-detail-header { display:flex; gap:12px; align-items:center; justify-content:space-between; padding-bottom:16px; }.backup-detail-header h3 { margin:0 0 6px; font-size:16px; }.backup-detail-header small { color:var(--muted); font-size:13px; }.backup-detail-header select { max-width:145px; background:#192230; color:var(--text); border:1px solid var(--line); padding:8px; border-radius:7px; font-size:13px; }
.backup-item { padding:13px 0; border:0; border-bottom:1px solid var(--line-soft); background:transparent!important; grid-template-columns:25px minmax(0,1fr) auto; gap:10px; border-radius:0; }.backup-copy strong { font-size:14px; font-weight:550; }.backup-copy small { font-size:13px; }.backup-copy p { font-size:12px; color:var(--muted-2); margin-bottom:0; }.backup-point-icon { font-size:17px; color:var(--muted); background:none; width:24px; height:30px; }.backup-item.locked .backup-point-icon { color:var(--orange); }.backup-actions { gap:7px; flex-wrap:wrap; justify-content:flex-end; }.backup-actions .button { font-size:12px; min-height:33px; padding:0 10px; }.backup-actions .danger-action { color:#ffc7d0; background:var(--red-soft); border-color:rgba(255,94,116,.3); }
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:16px 0 2px; color:var(--muted); font-size:13px; }.pagination button { padding:6px 12px; background:#1d2736; border:1px solid var(--line); border-radius:7px; color:var(--text); cursor:pointer; }
.big-progress { padding:24px; }.big-progress strong { font-size:34px; }.operation-card { background:#192230; border-color:var(--line); border-radius:12px; }.operation-card strong { font-size:15px; }.operation-card small { font-size:13px; line-height:1.6; }.operation-card[disabled] { display:none; }
.cloud-coverage .stat-rows>div { padding-block:16px; }.settings-grid { gap:18px; }.settings-grid .panel>p { padding:0 20px 18px; font-size:14px; line-height:1.65; color:var(--muted); }
.schedule-card { padding:20px; background:var(--panel); border:1px solid var(--line); border-top:2px solid var(--game-color,var(--cyan)); border-radius:14px; }.schedule-card h3 { margin:18px 0 6px; font-size:19px; font-weight:600; }.schedule-card>p { font-size:14px; color:var(--muted); line-height:1.7; min-height:40px; }.schedule-card .button { width:100%; }.schedule-card .stat-rows { padding-inline:0; }
.terminal-panel { background:#10151f; border-color:var(--line); box-shadow:none; border-radius:14px; }.terminal-toolbar,.terminal-meta,.command-bar,.console-actions { background:#171f2b; border-color:var(--line); }.terminal-output { background:#0c111a; font-family:"Cascadia Code",Consolas,monospace; min-height:400px; max-height:65vh; font-size:14px; }.log-line { font-size:14px; line-height:1.7; }.log-level { font-size:11px; }.terminal-service select,.terminal-search { background:#111823; color:var(--text); border-color:var(--line); }.terminal-service select { font-size:14px; }.terminal-filters button { font-size:13px; }.terminal-search input { font-size:14px; }.command-bar input { font-size:14px; }.console-actions button { font-size:13px; min-height:35px; }.console-status { font-size:12px; }
.diagnostic-service-row { background:var(--panel); font-size:14px; }.diagnostic-alert { background:#171f2b; border-color:var(--line); }.diagnostic-alert p { font-size:14px; }.period-select { background:#192230; color:var(--text); border-color:var(--line); font-size:14px; }
.audit-controls { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; gap:12px; border-bottom:1px solid var(--line-soft); color:var(--muted); font-size:13px; }.audit-controls label { display:flex; align-items:center; gap:12px; }.audit-controls input { min-width:240px; padding:10px 12px; background:#101722; color:var(--text); border:1px solid var(--line); border-radius:8px; font-size:14px; }.table-panel>.pagination { padding:16px 20px; }
.data-table th { font-size:12px; background:#192230; padding:14px; }.data-table td { font-size:13px; padding:13px 14px; border-color:var(--line-soft); max-width:340px; overflow-wrap:anywhere; }.data-table tr:hover { background:#ffffff03; }
.modal { background:var(--panel); border-color:var(--line); border-radius:18px; box-shadow:0 30px 100px #0008; }.modal[open] { animation:dialog-reveal .25s cubic-bezier(.16,1,.3,1); }.modal::backdrop { background:#04080eb3; backdrop-filter:blur(5px); }
.modal-shell>header,.modal-shell>footer { background:var(--panel); border-color:var(--line); }.modal-shell h2 { font-size:22px; font-weight:600; }.modal-shell>header p { font-size:14px; }.modal-close { color:var(--muted); }.form-grid { gap:18px; }.form-grid label { font-size:14px; font-weight:500; color:#bcc8d8; }.form-grid label>small,.field-help { font-size:13px; line-height:1.5; color:var(--muted); }.form-grid input,.form-grid select,.form-grid textarea { background:#0f1621; border-color:var(--line); font-size:15px; min-height:42px; }.form-grid label.check { background:#17202e; border-color:var(--line); }.category-tabs button { font-size:13px; background:#1b2635; }.settings-toolbar>label { background:#0f1621; }.settings-toolbar input { font-size:14px; }.wizard-summary { font-size:13px; line-height:1.6; }.config-intro strong { font-size:14px; }.config-intro small { font-size:13px; line-height:1.6; }.config-category-title { font-size:15px; }.config-category-title small { font-size:12px; }.restart-hint { font-size:10px; }.confirm-content p { font-size:15px; }.confirm-content ul { font-size:14px; }.confirm-phrase { font-size:13px; }
.toast { background:#202b3a; border-color:var(--line); padding:15px; }.toast strong { font-size:14px; }.toast small { font-size:13px; line-height:1.55; }.empty-state { font-size:14px; padding:20px; line-height:1.6; }.skeleton { background:linear-gradient(90deg,#18212f 25%,#243044 50%,#18212f 75%); background-size:200% 100%; }.operation-copy small { font-size:12px; }.operation-copy strong { font-size:14px; }
.config-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.config-body>.config-fields { max-height:none; overflow:visible; }
.config-intro.config-restart-warning { align-items:flex-start; background:#342619; border:1px solid #d89545; border-left:5px solid #efa94d; }
.config-restart-warning>span { flex:0 0 32px; width:32px; height:32px; background:#efa94d; color:#201509; font-size:21px; font-weight:800; }
.config-restart-warning strong { color:#ffd396; font-size:17px; line-height:1.4; }
.config-restart-warning p { margin:7px 0; color:#fff1df; font-size:14px; line-height:1.55; }
.config-restart-warning small { color:#e1c6a3; font-size:13px; line-height:1.5; }
.config-save-footer { align-items:center; flex-wrap:wrap; }
.config-save-warning { flex:1 1 230px; margin-right:auto; color:#ffd396; font-size:14px; line-height:1.5; }
@media (max-width:600px) { .config-save-warning { flex-basis:100%; }.config-save-footer>.button { flex:1 1 auto; }.config-restart-warning strong { font-size:16px; }.config-toolbar>label { flex:0 0 auto; min-height:42px; } }
.value-changed { animation:value-settle .65s ease-out; }
.login-body { background:radial-gradient(ellipse at 15% 20%,#67d9c310,transparent 50%),var(--bg); }
.login-story { border-color:var(--line-soft); }.login-card { background:var(--panel); border-color:var(--line); box-shadow:0 25px 90px #0004; }
.login-copy h1 { font-weight:650; }.login-copy h1 em { background-image:linear-gradient(100deg,var(--cyan),#a9d1ba); }
.login-card>label { font-size:14px; }.login-card>p,.login-help { font-size:14px!important; }.input-shell { background:#101722; height:46px; }
.view.active>.metric-grid { animation:page-reveal .45s ease-out; }.view.active>.content-grid { animation:page-reveal .55s ease-out; }
@keyframes value-settle { from { color:var(--cyan); } to { color:var(--text); } }
@keyframes page-reveal { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes dialog-reveal { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (min-width:1600px) { .view { padding:36px 42px 60px; }.server-cover { height:154px; }.server-cover h3 { margin-top:30px; }.metric-card { min-height:166px; } }
@media (max-width:1250px) { :root { --sidebar-width:210px; }.view { padding-inline:22px; }.topbar { padding-inline:22px; }.metric-grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); }.content-grid.equal { grid-template-columns:1fr; }.server-cover { padding:14px; }.server-body { padding-inline:14px; }.game-label { font-size:11px; }.game-card-grid,.service-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.overview-fleet { grid-template-columns:repeat(3,minmax(0,1fr)); }.overview-fleet .card-stat strong { font-size:15px; }.overview-fleet .server-topline { flex-wrap:wrap; }.overview-fleet .server-cover h3 { font-size:18px; margin-top:13px; }.overview-fleet .server-memory-detail { flex-wrap:wrap; }.overview-fleet .card-actions button { font-size:12px; }.fleet-summary { gap:12px 20px; }.fleet-summary>small { margin-left:0; width:100%; } }
@media (max-width:820px) { .sidebar { width:236px; }.topbar { padding:0 18px; height:62px; }.live-pill { display:flex; font-size:12px; }.view { padding:24px 18px 40px; }.page-heading h1 { font-size:27px; }.overview-fleet { grid-template-columns:repeat(2,minmax(0,1fr)); }.section-heading>span { max-width:220px; line-height:1.5; }.mini-health { margin-top:24px; } }
@media (max-width:600px) { .page-heading { gap:14px; align-items:start; }.page-heading p { font-size:14px; }.metric-grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.metric-card { padding:14px; min-height:153px; }.metric-card>strong { font-size:23px; }.metric-card header { font-size:12px; }.metric-card header i { display:none; }.metric-card>small { font-size:12px; }.service-card-grid,.game-card-grid,.overview-fleet { grid-template-columns:1fr; }.server-cover { height:137px; padding:18px; }.server-cover h3,.overview-fleet .server-cover h3 { font-size:22px; margin-top:21px; }.server-body { padding-inline:18px; }.card-stat strong,.overview-fleet .card-stat strong { font-size:18px; }.card-actions button,.overview-fleet .card-actions button { font-size:14px; min-height:40px; }.server-topline { flex-wrap:nowrap!important; }.game-label { font-size:13px; }.section-heading { align-items:start; }.section-heading>span { max-width:165px; font-size:12px; }.section-heading h2 { font-size:16px; }.fleet-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.fleet-summary>span { font-size:12px; }.fleet-summary>small { grid-column:1/-1; }.fleet-summary strong { display:block; margin:4px 0 0; }.storage-shortcuts { gap:10px; padding:15px; }.storage-shortcuts button { padding:12px; grid-template-columns:1fr; }.storage-shortcuts .shortcut-symbol { grid-row:auto; }.storage-shortcuts strong { font-size:13px; }.storage-shortcuts b { font-size:21px; }.storage-shortcuts em { line-height:1.5; }.service-row { grid-template-columns:1fr 75px 65px; }.service-row .service-cell { display:flex!important; }.service-row .cpu-cell { display:none!important; }.service-row .service-state { font-size:10px; }.panel-header { padding:16px; }.panel-header .eyebrow { font-size:11px; }.panel-header h2 { font-size:14px; }.capacity-details>summary>span,.templates-panel>summary>span { display:block; float:none; padding-top:5px; }.backup-overview-grid { grid-template-columns:1fr 1fr; gap:10px; }.backup-overview-grid>article { padding:14px; }.backup-overview-grid strong { font-size:23px; }.backup-workbench { grid-template-columns:1fr; }.backup-selector { display:flex; overflow:auto; border-right:0; border-bottom:1px solid var(--line-soft); }.backup-select { min-width:180px; }.backup-detail { padding:16px; }.backup-item { grid-template-columns:22px 1fr; }.backup-actions { grid-column:2; }.backup-detail-header { flex-wrap:wrap; }.backup-copy strong { font-size:13px; }.audit-controls { align-items:stretch; flex-direction:column; }.audit-controls label { align-items:stretch; flex-direction:column; }.audit-controls input { min-width:0; }.topbar .breadcrumb>span,.topbar .breadcrumb>b { display:none; }.top-actions { gap:8px; }.live-pill { max-width:190px; white-space:nowrap; }.status-banner { grid-template-columns:26px 1fr; gap:10px; }.status-banner strong { font-size:14px; }.status-banner small { line-height:1.5; }.terminal-filters { gap:2px; }.terminal-filters button { padding:7px; font-size:12px; }.log-line { font-size:13px; }.config-intro { margin-inline:16px; }.form-grid { gap:14px; }.modal-shell>header { padding-top:18px; }.modal-shell h2 { font-size:20px; }.settings-grid .stat-rows>div { flex-wrap:wrap; }.vm-metrics { gap:16px; } }
/* Per-game workspace: the same hierarchy, scoped to one live process. */
.service-card[data-kind="game"] { cursor:pointer; }
.server-cover h3 button { display:flex; align-items:center; gap:12px; width:100%; padding:0; background:none; border:0; color:inherit; text-align:left; font:inherit; cursor:pointer; }
.server-cover h3 button span { margin-left:auto; font-size:18px; color:var(--game-color,var(--cyan)); opacity:.75; transition:transform .2s; }
.service-card:hover .server-cover h3 button span { transform:translate(2px,-2px); }
.button[data-action="stop"],.card-actions button[data-action="stop"],.console-actions button[data-console-action="stop"] { background:#982d40; border:1px solid #cc5365; color:#fff; }
.button[data-action="stop"]:hover:not(:disabled),.card-actions button[data-action="stop"]:hover:not(:disabled),.console-actions button[data-console-action="stop"]:hover:not(:disabled) { background:#b1374c; border-color:#ff8b9c; color:#fff; }
.detail-navigation { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:24px; }
#game-switcher { display:flex; flex-wrap:wrap; gap:6px; }
#game-switcher button { display:flex; align-items:center; gap:7px; padding:9px 12px; color:var(--muted); background:var(--panel); border:1px solid var(--line-soft); border-radius:8px; font-size:13px; cursor:pointer; }
#game-switcher button.active { color:var(--text); border-color:var(--game-color); background:var(--panel-2); }
#game-switcher i { width:6px; height:6px; border-radius:50%; background:var(--game-color); }
.game-detail-hero { display:flex; justify-content:space-between; align-items:center; min-height:210px; padding:32px; border:1px solid var(--line); border-top:2px solid var(--game-color); border-radius:18px; overflow:hidden; background-color:var(--panel); background-size:cover; background-position:50% 40%; }
[data-game="space_engineers"]>.game-detail-hero { background-image:linear-gradient(90deg,#111b2bf2,#111b2b80),url('/assets/games/space-engineers.png'); }
[data-game="minecraft_java"]>.game-detail-hero { background-image:linear-gradient(90deg,#10201bf2,#10201b80),url('/assets/games/minecraft-java.png'); }
[data-game="project_zomboid"]>.game-detail-hero { background-image:linear-gradient(90deg,#251913f2,#25191380),url('/assets/games/project-zomboid.png'); }
[data-game="valheim"]>.game-detail-hero { background-image:linear-gradient(90deg,#151e22e8,#151e2278),url('/assets/games/valheim-v1.png'); }
.game-detail-hero>div:first-child { min-width:0; }
.game-detail-hero .server-topline { justify-content:flex-start; gap:15px; }
.game-detail-hero h1 { font-size:36px; letter-spacing:-1px; margin:20px 0 8px; overflow-wrap:anywhere; }
.game-detail-hero p { color:#c3cddd; font-size:14px; line-height:1.6; margin:0 0 18px; }
.game-detail-hero .server-address { width:fit-content; max-width:100%; margin:0; background:#0b121ccc; border:1px solid #ffffff22; padding:10px 12px; gap:24px; }
.hero-monogram { color:#ffffff20; font-size:90px; font-weight:750; letter-spacing:-5px; padding-left:24px; user-select:none; }
.detail-toolbar { display:flex; flex-wrap:wrap; gap:9px; padding:18px 0 10px; }
.detail-measured { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 0 23px; color:var(--muted); font-size:12px; }
.detail-measured time { margin-left:auto; }.detail-measured.is-stale { color:var(--orange); }
.game-detail-shell>.metric-grid { margin-bottom:28px; }
.game-detail-shell .metric-card { min-height:140px; }.game-detail-shell .metric-card>strong { font-size:28px; }
.detail-charts { margin-top:16px; gap:18px; }.game-line-chart { padding:5px 18px 0; min-height:230px; }
.game-line-chart svg { width:100%; display:block; overflow:visible; }.game-line-chart .chart-grid { stroke:var(--line-soft); stroke-width:1; }
.game-line-chart text { fill:var(--muted-2); font:9px "Segoe UI",sans-serif; }
.game-line-chart polyline { fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.game-line-chart .series-0 { stroke:var(--cyan); }.game-line-chart .series-1 { stroke:var(--violet); }
.game-line-chart .sample-point.series-0 { fill:var(--cyan); }.game-line-chart .sample-point.series-1 { fill:var(--violet); }
.game-line-chart .chart-scale { padding:0 0 16px; }.chart-empty { display:grid; place-items:center; min-height:210px; }
.game-rings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }
.game-ring-card { display:flex; align-items:center; gap:12px; padding:18px 14px; border:1px solid var(--line-soft); border-radius:14px; background:var(--panel); --ring-color:var(--cyan); }
.ring-violet { --ring-color:var(--violet); }.ring-peach { --ring-color:var(--pink); }
.game-ring { position:relative; width:108px; min-width:108px; height:108px; }
.game-ring circle { fill:none; stroke-width:7; }.ring-track { stroke:var(--line); }.ring-value { stroke:var(--ring-color); stroke-linecap:round; transition:stroke-dasharray .6s ease; }
.game-ring>div { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.game-ring strong { font-size:20px; font-weight:650; }.game-ring small { font-size:11px; margin-top:3px; color:var(--muted-2); }
.ring-copy { min-width:0; }.ring-copy>span { display:block; font-size:13px; color:var(--muted); }.ring-copy>strong { display:block; font-size:15px; font-weight:550; margin:8px 0; }.ring-copy>small { font-size:12px; line-height:1.6; color:var(--muted-2); display:block; }
.detail-accounting { margin-bottom:20px; }.detail-information { gap:18px; margin-bottom:18px; }.detail-information .stat-rows strong { overflow-wrap:anywhere; text-align:right; max-width:65%; }
.detail-panel-footer { padding:0 20px 20px; }.detail-backup-list { padding:0 20px 16px; }.detail-backup-list>div { display:flex; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid var(--line-soft); font-size:13px; }
.detail-backup-list>div>span:last-child { margin-left:auto; color:var(--muted); white-space:nowrap; }.detail-backup-list strong { font-size:14px; font-weight:550; }.detail-backup-list small,.detail-activity small { display:block; margin-top:5px; font-size:12px; color:var(--muted); }.detail-backup-icon { color:var(--game-color); font-size:20px; }
@media (max-width:1400px) { .game-ring-card { flex-direction:column; text-align:center; gap:8px; }.game-rings { gap:12px; } }
@media (max-width:820px) { .detail-navigation { align-items:flex-start; flex-direction:column; }.game-detail-hero { padding:24px; }.hero-monogram { display:none; } }
@media (max-width:600px) { .game-detail-hero { padding:22px 18px; min-height:230px; }.game-detail-hero h1 { font-size:30px; }.detail-toolbar { display:grid; grid-template-columns:1fr 1fr; }.detail-toolbar .button { padding-inline:9px; font-size:13px; }.detail-measured time { margin-left:0; }.game-rings { grid-template-columns:1fr; }.game-ring-card { flex-direction:row; text-align:left; padding:12px 16px; gap:18px; }.game-detail-shell .metric-card>strong { font-size:23px; }.game-detail-shell .metric-card { min-height:145px; }.detail-charts .panel-header { flex-wrap:wrap; gap:10px; }.game-line-chart { min-height:160px; padding-inline:12px; }.game-line-chart .chart-scale { font-size:11px; gap:12px; }.detail-information .stat-rows>div { align-items:flex-start; }.detail-information .stat-rows strong { max-width:58%; }.game-detail-shell>.section-heading { align-items:flex-start; gap:15px; } }
/* 0.6: readable type and consistent action semantics, including confirmations. */
[hidden] { display:none!important; }
.button[data-action="start"],.card-actions button[data-action="start"],.console-actions button[data-console-action="start"],#confirm-submit[data-intent="start"] { background:#237846; border:1px solid #49aa71; color:#fff; }
.button[data-action="restart"],.card-actions button[data-action="restart"],.console-actions button[data-console-action="restart"],.button[data-intent="restart"] { background:#8e511d; border:1px solid #c7893e; color:#fff2e1; }
#confirm-submit[data-intent="stop"] { background:#982d40; border:1px solid #cc5365; color:#fff; }
.button[data-action="backup"],.card-actions button[data-action="backup"],.console-actions button[data-console-action="backup"] { background:#213654; border:1px solid #3d5b88; color:#c2d9ff; }
.card-actions button[data-action="update"],#confirm-submit[data-intent="update"] { background:#263c48; border:1px solid #486c7b; color:#c5e5ee; }
button[data-action="start"]:hover:not(:disabled),button[data-action="restart"]:hover:not(:disabled),button[data-console-action="start"]:hover:not(:disabled),button[data-console-action="restart"]:hover:not(:disabled) { filter:brightness(1.15); }
.button.danger,.button[data-intent="delete"] { color:#fff; background:#982d40; border-color:#cc5365; }
.resource-policy-details { margin-bottom:22px; background:var(--panel); border:1px solid var(--line-soft); border-radius:12px; }
.resource-policy-details>summary,.detail-technical>summary { padding:16px 20px; cursor:pointer; color:var(--muted); font-size:14px; font-weight:550; }
.resource-policy-details .resource-policy { margin:0 14px 14px; }
#games-summary { display:none; }
.detail-technical { margin:20px 0; }
.detail-technical>summary>span { float:right; color:var(--muted-2); font-size:12px; font-weight:400; }
.detail-technical>.detail-information { margin:0 16px 16px; }
.detail-technical>.detail-information>.panel { background:#111925; }
.detail-technical>.notice { margin:0 16px 16px; }
.detail-technical:not([open])>summary { border-radius:12px; }
.game-ring strong { font-size:23px; }.game-ring { width:116px; min-width:116px; height:116px; }
.game-line-chart text,.resource-chart text { font-size:12px; }
.game-detail-shell .metric-card>strong { font-size:30px; }
.metric-card { min-height:168px; }.metric-card>strong { font-size:30px; }
.server-cover { height:150px; }.server-cover h3,.service-card[data-kind="game"] h3 { font-size:24px; }
.card-stat>span { line-height:1.5; }.card-stat strong { font-size:21px; }
.card-actions button { min-height:42px; }.game-label { line-height:1.5; }
.memory-note { line-height:1.6; min-height:0; }.server-more summary { padding-block:16px; }
.game-detail-hero p { font-size:14px; }.detail-toolbar .button { font-size:14px; min-height:44px; }
.terminal-output,.log-line { font-size:14px; }.log-level { font-size:11px; }
.log-line { grid-template-columns:13ch 8ch minmax(0,1fr); column-gap:10px; }
.log-time { white-space:nowrap; }
.log-text { min-width:0; }
@media (max-width:600px) {
  .log-line { grid-template-columns:13ch minmax(0,1fr); gap:3px 8px; padding-block:6px; }
  .log-text { grid-column:1/-1; }
}
.password-layout { max-width:580px; margin:0 auto; padding:42px 24px; }.password-layout>.brand { margin-bottom:32px; }
.password-layout .login-card { width:100%; padding:32px; }.password-layout h1 { font-size:28px; margin:12px 0; letter-spacing:-.7px; }
.password-layout .login-card>p { font-size:15px; line-height:1.7; }.password-layout input { width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--text); font-size:16px; }
.password-layout label { margin:20px 0 9px; display:block; font-size:15px; }.password-layout small { display:block; font-size:13px; color:var(--muted); line-height:1.6; margin-top:9px; }
.password-layout .wide { margin-top:24px; min-height:46px; }.password-layout .text-button { margin-top:20px; width:100%; }.password-scope { font-size:13px; color:var(--muted); text-align:center; line-height:1.7; }
#password-button { margin:22px 12px 0; font-size:13px; text-decoration:none; }
.role-games .nav-caption { margin-top:16px; }.role-games .mini-meter { display:none; }
.role-games .mini-health { margin-bottom:16px; }.role-games .nav-item[hidden] { display:none!important; }
.role-games #view-backups>details.capacity-details { display:none; }
.role-games .nav-item[data-view="services"],.role-games .nav-item[data-view="plantpals"],.role-games .nav-item[data-view="cloud"],.role-games .nav-item[data-view="diagnostics"],.role-games .nav-item[data-view="audit"],.role-games .nav-item[data-view="settings"] { display:none; }
@media (min-width:1251px) { .nav-item { font-size:15px; min-height:47px; }.button { font-size:14px; }.eyebrow { font-size:12px; }.stat-rows>div { font-size:14px; }.chart-legend { font-size:12px; }.page-heading p { font-size:15px; } }
@media (max-width:1250px) and (min-width:821px) { .overview-fleet { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .server-topline { flex-wrap:wrap!important; }.game-label { font-size:12px; }.service-state { font-size:11px; }.game-detail-shell .metric-card>strong { font-size:25px; }.metric-card>strong { font-size:25px; }.game-detail-shell .metric-card { min-height:164px; }.metric-card { min-height:165px; }.detail-technical>summary>span { float:none; display:block; margin-top:8px; }.detail-technical>.detail-information { margin-inline:8px; }.card-stat strong { font-size:21px; }.detail-toolbar .button { font-size:13px; }.game-line-chart text { font-size:19px; }.resource-chart text { font-size:16px; }.password-layout { padding:28px 16px; }.password-layout .login-card { padding:24px 20px; }.password-layout h1 { font-size:26px; }.topbar .breadcrumb { max-width:130px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.live-pill { font-size:10px; padding:8px; }.detail-measured { font-size:12px; } }

.account-owner-notice { display:flex; align-items:center; gap:16px; padding:20px 22px; background:#152c2d; border:1px solid #315d58; border-radius:14px; margin-bottom:22px; }
.account-owner-notice>span { color:var(--cyan); font-size:25px; }.account-owner-notice strong { font-size:17px; }.account-owner-notice p { margin:7px 0 0; color:var(--muted); line-height:1.6; font-size:14px; }
.account-list-toolbar { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:20px; }.account-list-toolbar label { display:grid; gap:8px; font-size:14px; min-width:280px; }
.account-list-toolbar input,.account-password-label input { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--text); font:inherit; font-size:15px; }
.account-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; }
.account-card { padding:22px; border:1px solid var(--line); border-radius:15px; background:var(--panel); min-width:0; }.account-card>header { display:flex; align-items:center; gap:14px; }.account-avatar { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:#9ee8d2; background:#254b46; font-size:23px; }.account-card h2 { margin:0 0 9px; font-size:21px; overflow-wrap:anywhere; }.account-server-scope { line-height:1.6; color:var(--muted); font-size:14px; }
.account-grant-tags { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0; }.account-grant-tags>span { padding:6px 9px; font-size:12px; line-height:1.5; background:#23303e; border-radius:6px; }.account-card footer { display:flex; flex-wrap:wrap; gap:9px; border-top:1px solid var(--line-soft); padding-top:18px; }.account-card footer .text-button { margin-left:auto; }.account-disable { color:#ff9ba9; }.account-enable { color:#94dfb2; }
.account-event-panel { margin-top:24px; }.account-event-panel>summary { padding:20px; cursor:pointer; font-size:15px; }.account-event { display:flex; justify-content:space-between; gap:14px; padding:15px 20px; border-top:1px solid var(--line-soft); font-size:14px; }.account-event small { display:block; color:var(--muted); margin-top:6px; }.account-event time { font-size:13px; color:var(--muted); }
.account-editor { width:min(960px,calc(100vw - 30px)); }.account-scroll { min-height:0; overflow-y:auto; padding:18px 24px; overscroll-behavior:contain; }.account-scroll>p { line-height:1.65; font-size:15px; }.account-scroll>.form-grid { padding:8px 0; }.account-scroll>.notice { margin:12px 0; }.account-scope,.account-grants { border:1px solid var(--line); border-radius:12px; padding:18px; margin:22px 0; min-width:0; }.account-scope legend,.account-grants legend { color:var(--text); font-size:16px; font-weight:600; padding:0 7px; }.account-scope>label { display:flex; align-items:center; gap:10px; margin:10px 0; font-size:14px; }.account-scope>small { display:block; margin-top:14px; color:var(--muted); font-size:13px; line-height:1.5; }.account-game-selection { display:flex; gap:9px; flex-wrap:wrap; padding-top:10px; }.account-game-selection label { display:flex; gap:8px; align-items:center; border:1px solid var(--line); border-radius:8px; padding:10px; font-size:14px; overflow-wrap:anywhere; }
.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.permission-item { display:flex; align-items:flex-start; gap:11px; padding:13px; background:#101b27; border:1px solid var(--line-soft); border-radius:10px; cursor:pointer; }.permission-item:has(input:checked) { border-color:#3e8f7c; background:#142c2b; }.permission-item input,.account-scope input { accent-color:var(--cyan); width:18px; height:18px; flex:0 0 18px; }.permission-item strong { font-size:14px; line-height:1.5; }.permission-item small { display:block; color:var(--muted); font-size:13px; line-height:1.55; margin-top:5px; }
.account-editor footer,.account-secret-dialog footer { align-items:center; flex-wrap:wrap; }.account-footer-note { flex:1 1 250px; font-size:13px; color:var(--muted); line-height:1.55; }.account-action-dialog,.account-secret-dialog { width:min(600px,calc(100vw - 30px)); }.account-password-label { display:grid; gap:10px; font-size:14px; margin:18px 0; }.account-secret-dialog #account-secret-password { color:#a2efca; font-size:23px; font-family:ui-monospace,Consolas,monospace; letter-spacing:1px; }
.account-game-selection[hidden],.service-card [hidden],.game-detail-shell [hidden],.top-actions [hidden],.page-heading [hidden],.backup-actions [hidden],.config-intro[hidden],.templates-panel[hidden] { display:none!important; }
@media (max-width:600px) { .account-grid { grid-template-columns:minmax(0,1fr); }.account-list-toolbar { align-items:stretch; flex-direction:column; }.account-list-toolbar label { min-width:0; }.account-scroll { padding:14px 16px; }.permission-grid { grid-template-columns:1fr; }.account-scope,.account-grants { padding:12px; }.account-editor footer>.button,.account-secret-dialog footer>.button { flex:1; }.account-footer-note { flex-basis:100%; }.account-event { flex-direction:column; }.account-owner-notice { align-items:flex-start; padding:17px; }.account-card { padding:18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.downloads-list{display:grid;gap:20px}.download-card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:24px;align-items:center;padding:28px}.download-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:#123d44;color:#70e2d8;font-size:34px}.download-info h2{margin:8px 0;font-size:24px}.download-info p{color:var(--muted);line-height:1.6;margin:8px 0}.download-meta{display:flex;gap:20px;flex-wrap:wrap;margin:16px 0;color:var(--muted)}.download-info summary{cursor:pointer;font-size:15px}.download-info code{display:block;overflow-wrap:anywhere;margin-top:10px;font-size:14px}.download-button{text-decoration:none;white-space:nowrap;min-height:48px;display:flex;align-items:center;justify-content:center}.download-card:hover{border-color:#356976}@media(max-width:700px){.download-card{grid-template-columns:1fr;padding:22px;gap:16px}.download-button{width:100%}.download-icon{width:52px;height:52px}.download-info h2{font-size:22px}}

/* 0.7.12: publisher identities, complete capacities and vector state motion. */
.metric-card>strong:has(.metric-maximum) { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 7px; line-height:1.25; font-size:clamp(24px,1.75vw,28px); }
.metric-maximum { color:#a8b6cb; font-size:.66em; font-weight:500; letter-spacing:-.2px; white-space:nowrap; }
.metric-card header i { display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color:var(--cyan); background:#67d9c30c; width:36px; height:36px; }
.metric-card.accent-violet header i { color:var(--violet); background:#b29afa0d; }
.metric-card.accent-green header i { color:var(--green); background:#78d8a00d; }
.metric-card.accent-pink header i { color:var(--pink); background:#d28bd10d; }
.metric-card header .ui-icon { width:23px; height:23px; }
.status-orb .ui-icon { width:19px; height:19px; }
.status-orb:has([data-ui-icon="loader"]) .ui-icon { animation:state-spin 2.4s linear infinite; }
.service-icon .ui-icon,.detail-backup-icon .ui-icon,.backup-point-icon .ui-icon { width:23px; height:23px; }
.empty-state.large>span .ui-icon { width:46px; height:46px; }
.resource-policy>span .ui-icon,.account-owner-notice>span .ui-icon,.config-intro>span .ui-icon { width:27px; height:27px; }
.wizard-summary>span,.toast>span,.confirm-symbol { display:inline-flex; align-items:center; justify-content:center; }
.confirm-content li { display:flex; gap:9px; align-items:flex-start; padding-left:0; }
.confirm-content li::before { content:none; }
.confirm-content li .ui-icon { width:16px; height:16px; flex:0 0 16px; color:var(--cyan); }
.confirm-content li.detail-error,.confirm-content li.detail-error .ui-icon { color:var(--red); }
.confirm-content li.detail-info .ui-icon { color:var(--muted); }
.config-save-warning { display:inline-flex; align-items:center; gap:8px; }
.server-more summary::after,.server-more[open] summary::after { content:none; }
.server-more summary>.ui-icon { margin-left:auto; transition:transform .25s ease; width:18px; height:18px; }
.server-more[open] summary>.ui-icon { transform:rotate(180deg); }
.nav-item { grid-template-columns:32px 1fr auto; }

/* Identity occupies its own centered row, below the right-aligned state. */
.service-card[data-kind="game"] .server-cover { min-height:258px; padding:16px 18px 20px; background-position:center 38%; }
.service-card[data-kind="game"] .server-topline,.game-detail-hero .server-topline { display:grid; grid-template-columns:minmax(0,1fr); gap:13px; width:100%; }
.service-card[data-kind="game"] .server-topline .service-state,.game-detail-hero .server-topline .service-state { grid-row:1; justify-self:end; max-width:100%; }
.service-card[data-kind="game"] .game-label,.game-detail-hero .game-label { grid-row:2; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:9px; min-height:152px; text-align:center; font-size:36px; line-height:1.15; letter-spacing:0; width:100%; }
.game-label .game-name { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; font-size:36px; font-weight:750; }
.game-wordmark { display:block; width:100%; max-width:340px; height:118px; object-fit:contain; filter:drop-shadow(0 3px 8px #000a); }
[data-game="project_zomboid"] .game-wordmark { width:178px; max-width:100%; }
.service-card[data-kind="game"] .game-version,.game-detail-hero .game-version { color:#d0dbea; font-size:14px; font-weight:500; line-height:1.4; letter-spacing:.03em; }
.service-card[data-kind="game"] .server-cover h3 { margin:15px 0 0; font-size:19px; text-align:center; }
.service-card[data-kind="game"] .server-cover h3 button { position:relative; display:block; text-align:center; padding:0 26px; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.service-card[data-kind="game"] .server-cover h3 button .ui-icon { position:absolute; right:0; top:50%; transform:translateY(-50%); margin:0; width:18px; height:18px; }
.game-detail-shell .game-detail-hero { display:block; padding:22px 28px 28px; text-align:center; }
.game-detail-hero>div:first-child { width:100%; }
.game-detail-hero h1 { font-size:24px; letter-spacing:-.4px; margin:16px 0 20px; }
.game-detail-hero .server-address { margin:0 auto; }
.game-detail-hero .game-wordmark { max-width:420px; }
.game-detail-hero [data-game="project_zomboid"] .game-wordmark { max-width:178px; }

/* State remains readable without animation, colour perception or tooltips. */
.service-state[data-server-state] { display:inline-flex; gap:8px; align-items:center; font-size:12px; font-weight:650; padding:5px 10px 5px 5px; border:1px solid currentColor; border-color:color-mix(in srgb,currentColor 20%,transparent); border-radius:22px; background:#0c111bda; max-width:100%; }
.service-state .state-caption { white-space:normal; line-height:1.35; }
.state-emblem { position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 34px; isolation:isolate; }
.state-emblem>.ui-icon { width:16px; height:16px; flex-basis:16px; }
.state-orbit { position:absolute; inset:0; width:34px; height:34px; fill:none; overflow:visible; }
.state-orbit circle { stroke:currentColor; stroke-width:2; vector-effect:non-scaling-stroke; }
.orbit-track { opacity:.16; }
.orbit-trace { stroke-dasharray:22 79; stroke-linecap:round; transform-origin:center; opacity:0; }
.service-state[data-server-state="online"] { color:#84e3b0; }
.service-state[data-server-state="online"] .state-emblem { background:#79db9c14; border-radius:50%; }
.service-state[data-server-state="online"] .orbit-trace { stroke-dasharray:28 73; opacity:1; animation:state-spin 2.8s linear infinite; }
.service-state[data-server-state="online"] .state-emblem::after { content:""; position:absolute; inset:2px; border:1px solid currentColor; border-radius:50%; animation:state-signal 2.4s ease-out infinite; pointer-events:none; }
.service-state[data-server-state="offline"] { color:#9aa7bb; }
.service-state[data-server-state="offline"] .state-emblem>.ui-icon { opacity:.85; animation:state-idle 4s ease-in-out infinite; }
.service-state[data-server-state="offline"] .orbit-track { stroke-dasharray:2 4; opacity:.3; }
.service-state[data-server-state="unknown"] { color:#e9c18b; }
.service-state[data-server-state="unknown"] .orbit-trace { opacity:.65; animation:state-spin 6s linear infinite; stroke-dasharray:4 46; }
.service-state[data-server-state="error"] { color:#ff98a8; }
.service-state[data-server-state="error"] .state-emblem { background:#ff718d18; border-radius:50%; }
.service-state[data-server-state="error"] .orbit-trace { stroke-dasharray:100 0; animation:state-breathe 2.8s ease-in-out infinite; }
.service-state[data-server-state].busy { color:#ffc381; }
.service-state[data-server-state].busy .orbit-trace { opacity:1; animation:state-spin 1.6s linear infinite; }
.service-state[data-server-state="stopping"] .orbit-trace,.service-state[data-server-state="deleting"] .orbit-trace { animation-direction:reverse; }
.service-state[data-server-state="stopping"],.service-state[data-server-state="deleting"] { color:#ff9ba7; }
.service-state[data-server-state="restarting"] .state-emblem>.ui-icon { animation:state-spin 3.2s linear infinite; }
.service-state[data-server-state="backing_up"],.service-state[data-server-state="updating"] { color:#94c4ff; }
@keyframes state-spin { to { transform:rotate(360deg); } }
@keyframes state-signal { 0% { transform:scale(.85); opacity:0; } 18% { opacity:.6; } 80%,100% { transform:scale(1.55); opacity:0; } }
@keyframes state-idle { 0%,100% { opacity:.45; transform:scale(.94); } 50% { opacity:1; transform:scale(1.04); } }
@keyframes state-breathe { 0%,100% { opacity:.25; } 50% { opacity:.9; } }
@media (max-width:600px) {
  .service-card[data-kind="game"] .server-cover { min-height:254px; }
  .game-detail-shell .game-detail-hero { padding:18px 18px 24px; }
  .game-detail-hero h1 { font-size:22px; }
  .trend-panel .panel-header { align-items:flex-start; gap:12px; flex-wrap:wrap; }
  .trend-panel .chart-legend { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .service-state[data-server-state="online"] .orbit-trace,.service-state[data-server-state="error"] .orbit-trace { opacity:.7; }
}
/* History belongs to the current server run, not the browser's poll window. */
.card-action-slot { padding-top:12px; min-height:104px; display:grid; align-items:stretch; }
.card-action-slot>.card-actions { padding-top:0; align-content:start; }
.card-action-slot>.operation-progress { margin:0; min-height:92px; grid-template-columns:41px minmax(0,1fr); }
.card-action-slot .operation-copy strong { font-size:14px; line-height:1.35; }
.card-action-slot .operation-copy small { font-size:12px; line-height:1.4; }
.card-action-slot .operation-dots { display:none; }
.detail-action-slot { margin:18px 0; }
.detail-action-slot>.detail-toolbar { margin:0; }
.detail-action-slot>.operation-progress { margin:0; min-height:88px; }
.detail-action-slot .operation-copy strong { font-size:15px; }
.detail-action-slot .operation-copy small { font-size:13px; }
.card-action-slot:focus-visible,.detail-action-slot:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:12px; }
.console-history-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; border-bottom:1px solid #263342; color:#a8b8cb; font-size:12px; }
.console-history-bar [hidden] { display:none!important; }
.console-history-bar .text-button { flex-shrink:0; }
@media (max-width:760px) { .console-history-bar { align-items:flex-start; flex-direction:column; } }

/* Stable card geometry: optional status, copy and progress never move telemetry. */
.view { width:100%; max-width:2240px; }
#all-services { display:grid; grid-template-columns:minmax(0,1fr); gap:26px; }
.service-group { min-width:0; }
.service-group>.section-heading { margin:0 0 14px; }
.service-card-grid,.game-card-grid { align-items:stretch; }
.service-card { position:relative; min-width:0; }
.service-card .server-body { min-width:0; }
.service-card[data-kind="game"] .server-cover { height:292px; min-height:292px; padding:16px 18px; }
.service-card[data-kind="game"] .server-topline { grid-template-rows:48px 150px; gap:12px; }
.service-card[data-kind="game"] .game-label { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:118px 24px; align-content:start; justify-content:stretch; justify-items:center; gap:8px; min-height:0; height:150px; }
.service-card .game-name { height:118px; }
.service-card .game-wordmark,.service-card[data-game="project_zomboid"] .game-wordmark { width:100%; max-width:340px; height:118px; margin:auto; object-fit:contain; object-position:center; }
.service-card[data-kind="game"] .game-version { min-width:0; max-height:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.service-card[data-kind="game"] .server-cover h3 { height:28px; margin:12px 0 0; line-height:28px; }
.service-card .service-state { max-height:48px; }
.service-card .state-caption { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.service-card .fleet-rings { grid-auto-rows:112px; margin:8px 0 16px; }
.service-card .fleet-rings .game-ring-card { min-height:0; height:100%; }
.service-card .fleet-rings .ring-copy { overflow-wrap:anywhere; }
.server-connections { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; height:44px; }
.server-connections:has(.server-join-code) { grid-template-columns:minmax(0,1fr) minmax(112px,.55fr); }
.server-connections .server-address { height:44px; min-width:0; margin:0; }
.server-connections .server-join-code>span { display:none; }
.service-card .card-action-slot { height:144px; min-height:144px; padding-top:12px; grid-template-rows:minmax(0,1fr); }
.service-card .card-action-slot>.card-actions { align-content:center; grid-auto-rows:52px; }
.service-card .card-action-slot>.operation-progress { min-height:0; height:100%; }
.service-card .card-action-slot .operation-copy { max-height:108px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:3px; }
.service-card .card-action-slot .operation-copy small { overflow:visible; }
.service-card .server-more { height:54px; margin-top:12px; }
.service-card .server-more summary { height:54px; padding:12px 0; align-items:center; gap:8px; }
.server-more-label { display:flex; align-items:center; gap:8px; min-width:0; }
.server-more-label>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.server-more.has-result summary { color:var(--green); }
.server-more.has-error summary { color:var(--red); }
.server-more.has-error { border-color:#bc5469; }
.service-card .server-more-content { position:absolute; z-index:4; left:18px; right:18px; bottom:82px; max-height:calc(100% - 154px); padding:16px; overflow:auto; overscroll-behavior:contain; background:#192330; border:1px solid #46556b; border-radius:12px; box-shadow:0 -10px 40px #0007; }
.server-more-content .service-facts strong { white-space:normal; overflow:visible; overflow-wrap:anywhere; }
.service-card:not([data-kind="game"]) .server-cover { height:160px; padding:16px 18px; }
.service-card:not([data-kind="game"]) .server-topline { height:48px; flex-wrap:nowrap!important; }
.service-card:not([data-kind="game"]) .server-cover h3 { height:30px; line-height:30px; margin:14px 0 4px; }
.service-card:not([data-kind="game"]) .card-stats { grid-template-rows:84px 84px; margin:8px 0 14px; }
.service-card:not([data-kind="game"]) .card-stat .metric-inline-label { display:flex; align-items:center; gap:6px; min-height:34px; line-height:1.3; }
.service-card:not([data-kind="game"]) .card-stat .ui-icon { flex-shrink:0; width:17px; height:17px; }
.service-card:not([data-kind="game"]) .server-memory-detail { height:26px; margin:6px 0; }
.service-card:not([data-kind="game"]) .memory-note { height:40px; margin:8px 0; }
.service-card:not([data-kind="game"]) .card-stat strong { font-size:18px; }

/* Every original wordmark has the same centred canvas, without stretching it. */
.game-picker { align-items:stretch; }
.game-choice { display:grid; grid-template-rows:minmax(0,1fr); place-items:center; aspect-ratio:4/3; gap:0; min-width:0; padding:14px; vertical-align:top; }
.game-choice .template-logo.has-wordmark { display:flex; align-items:center; justify-content:center; width:100%; max-width:none; height:84px; margin:0; }
.game-choice .template-logo.has-wordmark img { width:100%; max-width:224px; height:84px; object-fit:contain; object-position:center; }
.game-choice strong { min-width:0; margin:0; font-size:15px; line-height:1.4; }
.game-choice small { margin:0; line-height:1.4; overflow-wrap:anywhere; }
.template-card { display:grid; grid-template-rows:142px 52px 60px auto; min-width:0; }
.template-card>header { display:grid; grid-template-rows:26px 100px; gap:10px; justify-items:center; }
.template-card>header>.badge { grid-row:1; justify-self:end; }
.template-card>header>.template-logo.has-wordmark { grid-row:2; width:100%; max-width:none; height:100px; }
.template-card .template-logo.has-wordmark img { max-width:260px; width:100%; height:100px; margin:auto; object-fit:contain; }
.template-card h3,.template-card p { margin:0; }
.template-card footer { align-self:end; }

/* Summary tiles reserve both value lines and a footer, including empty states. */
.metric-grid { align-items:stretch; }
.metric-grid .metric-card { height:208px; min-height:208px; display:flex; flex-direction:column; min-width:0; }
.metric-grid .metric-card header { min-height:44px; flex-shrink:0; gap:8px; }
.metric-grid .metric-card>strong { margin-top:12px; min-height:70px; max-height:70px; flex-shrink:0; overflow:auto; align-content:start; }
.metric-grid .metric-card>.progress { margin-top:auto; flex-shrink:0; }
.metric-grid .metric-card>.fleet-presence { margin-top:auto; flex-shrink:0; min-width:0; overflow:auto; white-space:nowrap; }
.metric-grid .metric-card>.fleet-presence span { flex-shrink:0; }
@container (max-width:360px) {
  .service-card .fleet-rings { grid-auto-rows:124px; }
  .service-card .fleet-rings .game-ring-card { gap:8px; padding:10px; }
  .service-card .fleet-rings .ring-current { gap:8px; }
  .service-card .fleet-rings .ring-current .game-ring { width:54px; min-width:54px; height:54px; }
  .service-card .fleet-rings .ring-peaks { padding-left:8px; }
}
@media (min-width:1900px) { .service-group[data-service-group="application"]>.service-card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:761px) and (max-width:980px) { .game-picker { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) {
  .game-choice { grid-template-rows:minmax(0,1fr); padding:10px; gap:0; }
  .game-choice .template-logo.has-wordmark,.game-choice .template-logo.has-wordmark img { height:66px; }
  .game-choice strong { font-size:14px; }
}
@media (max-width:600px) {
  .metric-grid .metric-card { height:220px; min-height:220px; }
  .metric-grid .metric-card>strong { max-height:86px; min-height:86px; }
  .service-card .server-more-content { left:12px; right:12px; padding:12px; }
}

/* Text-control alignment: labels may wrap, but icons and copy remain centred. */
.button,
.card-actions button,
.console-actions button,
.text-button,
.pagination button,
.command-bar button,
.template-card footer button,
.segmented button,
.terminal-filters button,
.category-tabs button,
#game-switcher button,
.download-button {
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
  height:auto;
  align-items:center;
  justify-content:center;
  align-content:center;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
  line-height:1.25;
  vertical-align:middle;
}
.button,
.card-actions button,
.console-actions button,
.text-button,
.pagination button,
.command-bar button,
.template-card footer button,
.segmented button,
.terminal-filters button,
.category-tabs button,
#game-switcher button,
.download-button { display:inline-flex; }
.button>.ui-icon,
.card-actions button>.ui-icon,
.console-actions button>.ui-icon,
.text-button>.ui-icon,
.pagination button>.ui-icon,
.command-bar button>.ui-icon,
.template-card footer button>.ui-icon,
#game-switcher button>.ui-icon,
.download-button>.ui-icon {
  flex:0 0 auto;
  align-self:center;
}
.card-actions { grid-auto-rows:minmax(52px,auto); align-items:stretch; }
.card-actions button { min-height:52px; padding:8px 10px; }
.detail-toolbar { grid-auto-rows:minmax(52px,auto); align-items:stretch; }
.detail-toolbar .button { min-height:52px; padding:9px 11px; }
.console-actions>div { flex-wrap:wrap; align-items:stretch; }
.console-actions button { min-height:40px; padding:8px 11px; }
.modal-shell>footer { align-items:stretch; flex-wrap:wrap; }
.modal-shell>footer .button { flex:1 1 145px; min-height:48px; padding:9px 12px; }
.backup-actions { align-items:stretch; }
.backup-actions .button { flex:1 1 122px; min-height:42px; padding:8px 10px; }
.account-card footer .button,.account-card footer .text-button { min-height:44px; padding:8px 10px; }
.section-heading .text-button,.panel-header .text-button,.detail-panel-footer .text-button { min-height:40px; padding-block:7px; }
@media (max-width:600px) {
  .heading-actions .button,.page-heading>.button { min-height:48px; }
  .console-actions>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .backup-actions .button { flex-basis:100%; width:100%; }
  .modal-shell>footer .button { flex-basis:calc(50% - 5px); }
}
.operation-result.is-warning {border-color:var(--warning,#d9a957);color:var(--warning,#d9a957)}
.backup-warning {display:grid;gap:.5rem;margin:.75rem 0}
.backup-warning p {margin:0}
.backup-warning small {overflow-wrap:anywhere}
.mod-guide {display:grid;gap:.8rem;padding:1rem;border:1px solid var(--border,#263344);border-radius:.75rem}
.mod-guide p,.mod-guide h3,.mod-guide h4 {margin:0}
.mod-examples {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}
.mod-examples>div {display:grid;gap:.4rem;min-width:0}
.mod-examples code {white-space:pre-wrap;overflow-wrap:anywhere;font-size:.85em}