1.vms-list th:not(:first-child), .vms-list tr.top > td:not(.title) { width: 1%; white-space: nowrap; }
2.vm-setup { flex: 1; display: grid; align-content: center; justify-items: center; gap: 12px; }
3.vms-list .row-skeleton { height: 36px; margin: 14px var(--gutter); }
4
5.vms-list tbody.vm tr { cursor: pointer; }
6.vms-list tbody.vm tr > td { transition: background-color 150ms; }
7.vms-list tbody.vm:has(tr:hover) tr > td { background: var(--hover); }
8.vms-list tr.top > td { padding-top: 8px; padding-bottom: 0; }
9.vms-list tr.bottom > td { padding-top: 2px; padding-bottom: 8px; font-size: 12px; color: var(--muted); }
10.vms-list tbody.off tr.bottom > td.num { color: var(--text-2); }
11.vms .vms-list table.data tbody.vm tr.bottom > td:last-child { padding-right: 8px; }
12/* A row-spanning cell loses its collapsed bottom border to the next row, so each VM's rule is drawn as a shadow. */
13.vms-list tbody.vm td { border-bottom: 0; }
14.vms-list tbody.vm :is(tr.bottom > td, td.actions) { box-shadow: inset 0 -1px var(--grid); }
15.vms-list td:focus-visible { outline-offset: -2px; }
16
17.vms-list td.title { max-width: 0; }
18.vms-list td.title button {
19 display: flex;
20 align-items: baseline;
21 gap: 8px;
22 width: 100%;
23 padding: 0;
24 border: 0;
25 background: none;
26 color: inherit;
27 font: inherit;
28 text-align: left;
29 white-space: nowrap;
30 cursor: pointer;
31}
32.vms-list td.title button:focus-visible { outline-offset: 2px; }
33.vm-name { font-weight: 600; }
34.vms-list tbody.off .vm-name { color: var(--text-2); }
35.vms-list .for { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
36.vms-list td.specs { max-width: 0; }
37.vms-list td.specs > div { display: flex; flex-wrap: wrap; gap: 2px 12px; cursor: default; }
38.vms-list td.specs span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
39.vms-list td.specs svg { flex: none; }
40.vms-list td.specs .mono { color: var(--text-2); }
41
42
43.vm-detail { display: grid; align-content: start; gap: 16px; }
44.vm-detail .off-hour { margin: 0; color: var(--muted); font-size: 12px; }
45.vm-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
46.vm-charts .skeleton { height: 104px; }
47.vm-detail .facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 28px; }
48.vm-detail .kv { align-content: start; }
49.vm-detail .settings { display: grid; gap: 12px; align-content: start; }
50.vm-detail .describe {
51 margin: 0 -4px;
52 padding: 0 4px;
53 border: 0;
54 border-radius: 4px;
55 background: none;
56 color: inherit;
57 font: inherit;
58 text-align: left;
59 cursor: text;
60 transition: background-color 150ms;
61}
62.vm-detail .describe:hover { background: var(--hover); }
63.vm-detail .describe.empty { color: var(--accent); cursor: pointer; }
64.vm-detail .lines { display: grid; gap: 4px 10px; align-items: center; }
65.vm-detail .lines > div { display: contents; }
66.vm-detail .lines.disks { grid-template-columns: auto minmax(0, 1fr) 72px auto; }
67.vm-detail .lines.disks .meter { min-width: 0; height: 5px; }
68.vm-detail .lines.nics { grid-template-columns: auto auto minmax(0, 1fr); }
69.vm-detail .lines.devices { grid-template-columns: auto minmax(0, 1fr); }
70.vm-detail .lines .source { overflow-wrap: anywhere; }
71
72.vms-empty { display: grid; justify-items: center; gap: 8px; }
73.vms-empty p { margin: 0; }
74
75.dialog:has(.vm-create) { width: min(580px, calc(100vw - 32px)); }
76.vm-create { display: grid; gap: 18px; }
77.vm-create .hint { margin: 0; }
78.vm-custom-iso { display: flex; align-items: end; gap: 10px; }
79.vm-custom-iso .field { flex: 1; min-width: 0; }
80.vm-resources { display: grid; gap: 18px; }
81.vm-resource { display: grid; gap: 7px; font-size: 13px; }
82.vm-resource > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
83.vm-resource output { color: var(--text); font-variant-numeric: tabular-nums; }
84.vm-resource input { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
85.vm-resource-scale { color: var(--muted); font-size: 11px; }
86.vm-hardware summary { cursor: pointer; font-size: 13px; color: var(--text-2); }
87.vm-hardware .row { margin-top: 12px; }
88.vm-media { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--grid); border-radius: 6px; font-size: 12px; }
89.vm-media .source { overflow-wrap: anywhere; min-width: 0; }
90.vm-upload-progress { display: grid; gap: 8px; }
91.vm-upload-progress progress { width: 100%; accent-color: var(--accent); }
92.vm-console { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; background: var(--panel); }
93.vm-console-toolbar { display: flex; flex: none; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--grid); }
94.vm-console-status { color: var(--text-2); font-size: 12px; }
95.vm-password { display: grid; gap: 6px; padding: 8px 10px; color: var(--muted); font-size: 11px; }
96.vm-password input { width: 26ch; min-width: 0; padding: 5px 6px; color: var(--text); font: 12px monospace; }
97.vm-console-screen { flex: 1; background: #101014; min-height: 0; position: relative; }
98.vm-console-screen video { display: block; width: 100%; height: 100%; object-fit: contain; outline: none; touch-action: none; }
99.vm-console-screen video.vm-video-composed { opacity: 0; }
100.vm-window-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
101.vm-stream-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 6px 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
102.vm-cursor { display: none; position: fixed; left: 0; top: 0; pointer-events: none; }
103.vm-cursor-invert { mix-blend-mode: difference; }
104.vm-console-error { padding: 8px 12px; margin: 0; font-size: 12px; }
105.vm-clipboard { display: grid; gap: 8px; padding: 12px; }
106@media (max-width: 640px) {
107 .vm-detail .facts, .vm-charts { grid-template-columns: 1fr; }
108 .vm-media { flex-wrap: wrap; }
109}
110
111.vm-workspace { min-width: 0; }
112.vms .page-head { flex-wrap: wrap; }
113
114.vms .vms-list { overflow-x: auto; }
115.vms .vms-list table { min-width: 540px; }
116@media (max-width: 900px) {
117 .shell:has(.vms) { --sidebar: 220px; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
118 .vms { --gutter: 16px; }
119 .vm-detail .facts { grid-template-columns: 1fr; }
120}
121
122.vm-library { margin-top: 28px; }
123.vm-library h2 { font-size: 15px; display: flex; align-items: baseline; gap: 14px; }
124.vm-library h2 span { font-size: 12px; font-weight: normal; }
125.vm-library details { margin-top: 18px; }
126.vm-library summary { cursor: pointer; color: var(--text-2); font-size: 13px; margin-bottom: 8px; }
127.vm-library-item { display: flex; gap: 12px; padding-block: 7px; font-size: 12px; }
128.vm-clipboard .field { display: grid; gap: 6px; font-size: 12px; }
129.vm-count { font-size: 12px; }
130
131.vms.vm-active { padding: 0; max-width: none; width: 100%; }
132.vm-active .list-body.flush { margin: 0; padding: 0; overflow: hidden; }
133.vm-active .list-body.flush > .vm-workspace { margin: 0; flex: 1; min-height: 0; }
134.vm-workspace { display: flex; flex-direction: column; }
135.vm-console-screen[hidden] { display: none; }
136.vm-workspace .vm-detail { padding: 20px var(--gutter); overflow: auto; flex: 1; min-height: 0; }
137.vm-menu { position: relative; font-size: 12px; }
138.vm-menu summary { display: flex; align-items: center; gap: 5px; list-style: none; cursor: pointer; padding: 6px 8px; border-radius: 4px; user-select: none; }
139.vm-menu summary svg { color: var(--muted); }
140.vm-menu summary::-webkit-details-marker { display: none; }
141.vm-menu summary:hover, .vm-menu[open] summary { background: var(--hover); }
142.vm-menu > div { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; max-width: 300px; z-index: 5; display: flex; flex-direction: column; padding: 4px; border: 1px solid var(--grid); border-radius: 7px; background: var(--panel); box-shadow: 0 6px 24px #0005; }
143.vm-menu > div > button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; border: 0; border-radius: 4px; background: transparent; color: var(--text); padding: 7px 10px; font: inherit; text-align: left; cursor: pointer; }
144.vm-menu > div > button svg { flex: none; }
145.vm-menu > div > button:hover:not(:disabled) { background: var(--hover); }
146.vm-menu > div > button:disabled { color: var(--muted); cursor: default; }
147.vm-menu > div > button.danger { color: var(--danger); }
148.vm-menu-info { display: block; font-size: 11px; padding: 8px 10px; overflow-wrap: anywhere; }
149
150.vm-serial { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 12px 16px; gap: 8px; }
151.vm-serial[hidden] { display: none; }
152.vm-serial-tools { display: contents; }
153.vm-serial p { margin: 0; font-size: 12px; }
154.vm-serial-surface { position: relative; display: flex; flex: 1; min-height: 0; }
155.vm-serial-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 13px; pointer-events: none; }
156.vm-serial-empty button { pointer-events: auto; }
157.vm-serial-terminal { flex: 1; min-height: 0; --clo-term-bg: var(--page); --clo-term-fg: var(--text); --clo-term-cursor: var(--accent); }