/* Control Center 0.4 — quiet surfaces, distinct fleets, factual telemetry. */
: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;
}
body { background:var(--bg); font-size:14px; -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:9px; 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:12px; }
.nav-item { min-height:44px; font-size:13px; 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:10px; 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:12px; }.live-pill { text-transform:none; font-size:11px; 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:12px; 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:12px; font-weight:600; }.eyebrow { font-size:10px; 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:13px; 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:12px; color:var(--green); background:#78d8a018; }
.status-banner strong { font-size:12px; font-weight:600; }.status-banner small { margin-top:3px; font-size:11px; }.status-banner time { font-size:11px; }
.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:11px; 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:12px; 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:11px; 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:10px; 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; }
.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:11px; color:var(--muted); }.fleet-summary strong { color:var(--text); font-size:13px; font-weight:600; margin-left:6px; font-variant-numeric:tabular-nums; }
.fleet-summary>small { font-size:10px; 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:10px; font-weight:650; letter-spacing:.06em; }
.service-card .service-state { margin:0; font-size:9px; 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:10px; 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:10px; 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:10px; color:var(--muted); }.server-memory-detail strong { color:var(--text); font-size:11px; font-weight:500; }.server-memory-detail b { color:var(--game-color,var(--cyan)); font-weight:500; }
.memory-note { font-size:10px; 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:11px; text-align:left; }
.server-address code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#d1dce9; font-size:11px; }.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:11px; border-color:var(--line); background:#1d2736; color:#cfdae8; font-weight:500; }
.card-actions button:hover { background:#283549; }.card-actions .primary-action { background:var(--game-color,var(--cyan))!important; color:#11201a!important; }
.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:11px; 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:10px; 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:10px; 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:10px; 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:13px; }.service-identity strong { font-size:11px; font-weight:550; }.service-identity small { font-size:9px; }.service-cell { text-align:right; }.service-cell strong { font-size:11px; font-weight:500; }.service-cell small { font-size:9px; }.service-row .service-state { font-size:8px; }
.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:10px; color:var(--muted-2); }.chart-legend { display:flex; gap:13px; font-size:10px; 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:12px; font-weight:600; }.storage-shortcuts b { font-size:22px; font-weight:600; }.storage-shortcuts small,.storage-shortcuts em { grid-column:1/-1; font-size:10px; 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:11px; font-weight:550; }.activity-item small { font-size:10px; margin-top:4px; overflow-wrap:anywhere; }.activity-item time { grid-column:2; font-size:9px; }.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:12px; font-weight:600; }.capacity-details>summary>span,.templates-panel>summary>span { float:right; color:var(--muted-2); font-size:10px; font-weight:400; }
.stat-rows { padding:8px 20px 18px; }.stat-rows>div { font-size:11px; padding:12px 0; gap:12px; }.stat-rows strong { font-weight:550; }.notice { font-size:11px; 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:12px; font-weight:550; }.resource-policy small { font-size:11px; 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; }
.badge { font-size:9px; 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:11px; }.backup-overview-grid strong { font-size:26px; font-weight:600; }.backup-overview-grid small { font-size:10px; 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:12px; font-weight:600; }.backup-select small { grid-column:2; font-size:10px; color:var(--muted); }.backup-select>span { grid-row:1/3; display:grid; place-items:center; font-size:11px; 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:11px; }.backup-detail-header select { max-width:145px; background:#192230; color:var(--text); border:1px solid var(--line); padding:8px; border-radius:7px; font-size:11px; }
.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:12px; font-weight:550; }.backup-copy small { font-size:11px; }.backup-copy p { font-size:10px; 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; }.backup-actions .button { font-size:10px; min-height:33px; padding:0 10px; }
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:16px 0 2px; color:var(--muted); font-size:11px; }.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:13px; }.operation-card small { font-size:11px; 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:12px; 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:12px; 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:12px; }.log-line { font-size:12px; line-height:1.7; }.log-level { font-size:9px; }.terminal-service select,.terminal-search { background:#111823; color:var(--text); border-color:var(--line); }.terminal-service select { font-size:12px; }.terminal-filters button { font-size:11px; }.terminal-search input { font-size:12px; }.command-bar input { font-size:12px; }.console-actions button { font-size:11px; min-height:35px; }.console-status { font-size:10px; }
.diagnostic-service-row { background:var(--panel); font-size:12px; }.diagnostic-alert { background:#171f2b; border-color:var(--line); }.diagnostic-alert p { font-size:12px; }.period-select { background:#192230; color:var(--text); border-color:var(--line); font-size:12px; }
.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:11px; }.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:12px; }.table-panel>.pagination { padding:16px 20px; }
.data-table th { font-size:10px; background:#192230; padding:14px; }.data-table td { font-size:11px; 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:12px; }.modal-close { color:var(--muted); }.form-grid { gap:18px; }.form-grid label { font-size:12px; font-weight:500; color:#bcc8d8; }.form-grid label>small,.field-help { font-size:11px; line-height:1.5; color:var(--muted); }.form-grid input,.form-grid select,.form-grid textarea { background:#0f1621; border-color:var(--line); font-size:13px; min-height:42px; }.form-grid label.check { background:#17202e; border-color:var(--line); }.category-tabs button { font-size:11px; background:#1b2635; }.settings-toolbar>label { background:#0f1621; }.settings-toolbar input { font-size:12px; }.wizard-summary { font-size:11px; line-height:1.6; }.config-intro strong { font-size:12px; }.config-intro small { font-size:11px; line-height:1.6; }.config-category-title { font-size:13px; }.config-category-title small { font-size:10px; }.restart-hint { font-size:8px; }.confirm-content p { font-size:13px; }.confirm-content ul { font-size:12px; }.confirm-phrase { font-size:11px; }
.toast { background:#202b3a; border-color:var(--line); padding:15px; }.toast strong { font-size:12px; }.toast small { font-size:11px; line-height:1.55; }.empty-state { font-size:12px; 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:10px; }.operation-copy strong { font-size:12px; }
.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:12px; }.login-card>p,.login-help { font-size:12px!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:9px; }.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:10px; }.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:10px; }.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:12px; }.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:10px; }.metric-card header i { display:none; }.metric-card>small { font-size:10px; }.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:12px; min-height:40px; }.server-topline { flex-wrap:nowrap!important; }.game-label { font-size:11px; }.section-heading { align-items:start; }.section-heading>span { max-width:165px; font-size:10px; }.section-heading h2 { font-size:16px; }.fleet-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.fleet-summary>span { font-size:10px; }.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:11px; }.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:8px; }.panel-header { padding:16px; }.panel-header .eyebrow { font-size:9px; }.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:11px; }.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:12px; }.status-banner small { line-height:1.5; }.terminal-filters { gap:2px; }.terminal-filters button { padding:7px; font-size:10px; }.log-line { font-size:11px; }.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:11px; 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'); }
.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:12px; 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:10px; }
.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:9px; margin-top:3px; color:var(--muted-2); }
.ring-copy { min-width:0; }.ring-copy>span { display:block; font-size:11px; color:var(--muted); }.ring-copy>strong { display:block; font-size:13px; font-weight:550; margin:8px 0; }.ring-copy>small { font-size:10px; 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:11px; }
.detail-backup-list>div>span:last-child { margin-left:auto; color:var(--muted); white-space:nowrap; }.detail-backup-list strong { font-size:12px; font-weight:550; }.detail-backup-list small,.detail-activity small { display:block; margin-top:5px; font-size:10px; 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:11px; }.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:9px; 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; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }