:root {
  color-scheme: light;
  --canvas: #f6f7f9;
  --surface: #fff;
  --text: #17202b;
  --muted: #536171;
  --subtle: #687789;
  --border: #dce1e7;
  --border-strong: #c6cfd9;
  --accent: #2d54b4;
  --accent-hover: #23458f;
  --danger: #a52f31;
  --focus: #5d83e7;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 10; padding: 9px 14px; background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.header-main { max-width: 1232px; margin: 0 auto; padding: 0 32px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-symbol { display: grid; place-items: center; width: 29px; height: 29px; background: #253e78; color: #fff; font-size: 16px; line-height: 1; font-weight: 800; border-radius: 5px; }
.brand-name { font-size: 15px; font-weight: 750; letter-spacing: -.02em; }
.brand-name span { color: #677384; font-weight: 500; }
.user-menu { position: relative; z-index: 5; }
.user-menu > summary { display: flex; align-items: center; gap: 9px; padding: 6px 4px 6px 8px; border-radius: 5px; list-style: none; font-weight: 600; font-size: 13px; cursor: pointer; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: #f3f5f8; }
.user-avatar { display: grid; place-items: center; width: 29px; height: 29px; color: #394c70; background: #e8edf7; border-radius: 50%; font-size: 12px; }
.user-chevron { width: 7px; height: 7px; border-bottom: 1.5px solid #697687; border-right: 1.5px solid #697687; transform: rotate(45deg) translateY(-2px); margin: 0 3px; }
.user-menu-panel { position: absolute; top: calc(100% + 4px); right: 0; min-width: 190px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 5px; box-shadow: 0 6px 20px #18202e1a; }
.user-menu-panel a, .user-menu-panel button { display: block; width: 100%; padding: 9px 10px; text-align: left; color: var(--text); background: none; border: 0; border-radius: 3px; font-size: 13px; text-decoration: none; }
.user-menu-panel a:hover, .user-menu-panel button:hover { background: #f1f3f6; }
.user-menu-panel form { margin: 0; }
.main-nav { border-top: 1px solid #edf0f3; }
.nav-inner { max-width: 1232px; margin: auto; padding: 0 32px; display: flex; flex-wrap: wrap; column-gap: 28px; }
.nav-inner a { display: block; padding: 13px 0 11px; border-bottom: 2px solid transparent; color: #566476; font-size: 13px; font-weight: 600; text-decoration: none; }
.nav-inner a:hover { color: var(--text); }
.nav-inner a[aria-current="page"] { color: #243b70; border-bottom-color: #345cbd; }
main { max-width: 1232px; min-height: calc(100vh - 190px); margin: 0 auto; padding: 40px 32px 80px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 27px; line-height: 1.2; letter-spacing: -.025em; font-weight: 700; margin: 0 0 12px; }
h2 { font-size: 17px; line-height: 1.3; letter-spacing: -.015em; margin: 0 0 12px; }
h3 { font-size: 15px; line-height: 1.35; margin: 0; }
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 650; margin: 0 0 8px; }
.muted, .page-description { color: var(--muted); }
.button, button:not(.link):not(.user-menu-panel button) { display: inline-flex; justify-content: center; align-items: center; min-height: 38px; padding: 8px 14px; background: #243c72; border: 1px solid #243c72; border-radius: 5px; color: #fff; font-size: 13px; line-height: 1.3; font-weight: 650; text-decoration: none; }
.button:hover, button:not(.link):not(.user-menu-panel button):hover { background: #192d59; border-color: #192d59; text-decoration: none; }
.secondary, .button.secondary, button.secondary { background: #fff !important; border-color: var(--border-strong) !important; color: #273849 !important; }
.secondary:hover, .button.secondary:hover, button.secondary:hover { background: #f1f4f8 !important; }
.grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,350px),1fr)); gap: 16px; margin-top: 24px; }
.card { padding: 22px; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.card h2, .card p { overflow-wrap: anywhere; }
.card .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.badge { display: inline-block; margin-bottom: 14px; padding: 4px 9px; background: #eef1f5; border-radius: 4px; color: #415266; font-size: 12px; font-weight: 600; }
.hint { padding: 14px 16px; background: #eff3f8; border-left: 3px solid #93a9ce; color: #3b4f68; font-size: 13px; margin: 20px 0; }
.auth { max-width: 470px; margin: 24px auto; }
.auth.wide { max-width: 600px; }
.auth form { margin-top: 26px; }
.auth form p { margin: 0 0 20px; }
.auth form button:not(.link) { width: 100%; }
label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 650; }
input:not([type=checkbox]):not([type=hidden]), textarea { display: block; width: 100%; padding: 10px 11px; background: #fff; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text); }
textarea { resize: vertical; }
.helptext { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; }
ul { padding-left: 20px; color: var(--muted); font-size: 13px; }
.errorlist { color: var(--danger); list-style: none; padding: 0; margin: 8px 0; font-size: 13px; }
.notice { background: #fff7e9; border: 1px solid #e5cda3; border-radius: 5px; padding: 12px 14px; font-size: 13px; margin: 0 0 20px; color: #6d4c1b; }
.small { font-size: 12px; }
.invite { margin-top: 28px; background: #edf6ee; border: 1px solid #c2ddc5; padding: 18px; border-radius: 5px; }
.dns-record { margin: 20px 0; }
.dns-record strong, code { overflow-wrap: anywhere; }
code, .mono { font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ssh-guide { margin: 10px 0; border: 1px solid var(--border); border-radius: 5px; padding: 11px 14px; background: #fff; }
.ssh-guide summary { cursor: pointer; color: var(--text); font-weight: 650; font-size: 13px; }
.ssh-guide ol { padding-left: 20px; color: #445264; font-size: 13px; }
.ssh-guide li { margin: 16px 0; }
.ssh-guide pre, .dns-record pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f4f6f9; border: 1px solid var(--border); border-radius: 4px; padding: 12px; line-height: 1.6; }
.ssh-guide kbd { font: inherit; }
.confirm-check { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0; }
.confirm-check input[type=checkbox] { width: 17px; height: 17px; flex: 0 0 17px; margin: 2px 0; }
.danger-button, button.danger-button { background: #a03535 !important; border-color: #a03535 !important; color: #fff; }
.danger-button:hover, button.danger-button:hover { background: #842828 !important; border-color: #842828 !important; }
footer { max-width: 1168px; margin: 0 auto; padding: 20px 0 28px; border-top: 1px solid var(--border); color: var(--subtle); font-size: 12px; display: flex; justify-content: space-between; }
.guest main { min-height: calc(100vh - 155px); display: flex; align-items: center; }
.guest .auth { width: 100%; }

/* Machine overview */
.dash-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.dash-heading h1 { margin: 0; }
.dash-create { min-width: 106px; }
.dash-quota { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 0 25px; color: var(--muted); font-size: 13px; }
.dash-quota-main { display: flex; align-items: baseline; gap: 7px; }
.dash-quota-label { font-weight: 650; color: #354354; }
.dash-quota-count { color: var(--text); font-variant-numeric: tabular-nums; }
.dash-quota-count strong { font-weight: 650; }
.dash-quota-count span { color: var(--muted); }
.dash-quota-action { margin-left: auto; font-weight: 600; }
.dash-quota-history { margin: -12px 0 16px; color: var(--muted); font-size: 12px; }
.dash-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.dash-section-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.dash-section-count { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; background: #e9edf2; color: #4c5b6c; border-radius: 4px; font-size: 11px; font-weight: 650; }
.dash-section-head a { color: var(--muted); font-size: 12px; font-weight: 600; }
.dash-list { display: grid; gap: 14px; }
.dash-machine { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.dash-machine-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 20px 22px 17px; }
.dash-machine-heading { min-width: 0; }
.dash-machine-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dash-machine-title-row h3 { font-size: 16px; letter-spacing: -.015em; overflow-wrap: anywhere; }
.dash-machine-id { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.dash-hostname { margin: 5px 0 0; color: #536477; font: 12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap: anywhere; }
.dash-status { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 4px 9px; border: 1px solid #dbe1e7; border-radius: 4px; color: #526171; background: #f5f7f9; font-size: 12px; font-weight: 650; white-space: nowrap; }
.dash-status-dot { width: 7px; height: 7px; background: #8190a0; border-radius: 50%; }
.dash-status-running { color: #21673e; border-color: #cde3d4; background: #eff8f1; }
.dash-status-running .dash-status-dot { background: #338656; }
.dash-status-error, .dash-status-delete_error { color: #9c302e; border-color: #ebc8c3; background: #fff2f0; }
.dash-status-error .dash-status-dot, .dash-status-delete_error .dash-status-dot { background: #c0564b; }
.dash-status-pending, .dash-status-provisioning, .dash-status-queued, .dash-status-deleting { color: #78551d; border-color: #ead7b4; background: #fff8ea; }
.dash-status-pending .dash-status-dot, .dash-status-provisioning .dash-status-dot, .dash-status-queued .dash-status-dot, .dash-status-deleting .dash-status-dot { background: #ad7a2b; }
.dash-specs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) repeat(2,minmax(0,1.15fr)); gap: 15px; margin: 0; padding: 16px 22px; border-top: 1px solid #edf0f3; border-bottom: 1px solid #edf0f3; background: #fafbfc; }
.dash-specs > div { min-width: 0; }
.dash-specs dt { margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.dash-specs dd { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-specs dd span { color: var(--muted); font-size: 12px; font-weight: 500; }
.dash-specs dd.dash-spec-address { font: 12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
.dash-machine-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; }
.dash-control-primary, .dash-control-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.dash-control-primary { gap: 8px; }
.dash-control-primary form { margin: 0; }
.dash-control-links a { font-size: 13px; font-weight: 600; }
.dash-control-links .dash-delete { color: var(--danger); }
.dash-web-pending { color: var(--muted); font-size: 12px; }
.dash-machine-error { margin: 16px 22px 0; }
.dash-resource-history { margin: 0; padding: 0 22px 12px; color: var(--muted); font-size: 12px; }
.dash-request-pending, .dash-request-queued, .dash-request-applying, .dash-request-error { color: #734f1a; font-weight: 600; }
.dash-access { border-top: 1px solid #edf0f3; }
.dash-access > summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 22px; cursor: pointer; list-style: none; }
.dash-access > summary:hover { background: #fafbfc; }
.dash-access > summary::-webkit-details-marker { display: none; }
.dash-access-heading { color: #26394f; font-size: 13px; font-weight: 650; }
.dash-access-caption { margin-left: 10px; color: var(--muted); font-weight: 400; }
.dash-access-toggle { width: 8px; height: 8px; border-bottom: 1.5px solid #667789; border-right: 1.5px solid #667789; transform: rotate(45deg) translateY(-2px); }
.dash-access[open] .dash-access-toggle { transform: rotate(225deg) translate(-2px,-2px); }
.dash-access-body { padding: 0 22px 20px; color: #405064; font-size: 13px; }
.dash-downloads { display: flex; flex-wrap: wrap; gap: 9px 22px; margin: 14px 0; }
.dash-downloads a { font-weight: 600; }
.dash-retry { margin: 16px 22px; }
.dash-empty { padding: 48px 24px; background: #fff; border: 1px dashed var(--border-strong); border-radius: 6px; text-align: center; }
.dash-empty h3 { margin-bottom: 8px; }
.dash-empty p { color: var(--muted); }

@media (max-width: 800px) {
  .dash-specs { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dash-machine-controls { align-items: flex-start; flex-direction: column; }
  footer { margin: 0 24px; }
}
@media (max-width: 600px) {
  .header-main { min-height: 58px; padding: 0 18px; }
  .nav-inner { padding: 0 18px; column-gap: 22px; }
  .nav-inner a { padding: 11px 0 9px; font-size: 12px; }
  main { padding: 30px 18px 60px; }
  h1 { font-size: 24px; }
  .dash-heading { margin-bottom: 18px; }
  .dash-quota { gap: 8px 14px; padding-bottom: 22px; }
  .dash-quota-action { margin-left: 0; }
  .dash-machine-top { padding: 17px 16px 15px; }
  .dash-machine-title-row { gap: 5px 9px; }
  .dash-specs { padding: 15px 16px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
  .dash-machine-controls { padding: 14px 16px; }
  .dash-control-links { gap: 11px 16px; }
  .dash-resource-history { padding: 0 16px 12px; }
  .dash-access > summary { padding: 14px 16px; }
  .dash-access-caption { display: block; margin: 3px 0 0; font-size: 12px; }
  .dash-access-body { padding: 0 16px 18px; }
  footer { margin: 0 18px; }
}

/* Administration: account ownership and allocation */
.admin-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}.admin-heading h1{margin-bottom:7px}.admin-heading p:last-child{margin-bottom:0}.admin-summary{display:flex;gap:24px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);color:var(--muted);font-size:13px}.admin-summary strong{color:var(--text);font-size:16px;margin-right:4px}.admin-search{margin:25px 0 18px}.admin-search label{margin-bottom:7px}.admin-search>div{display:flex;align-items:center;gap:10px}.admin-search input{max-width:340px}.admin-search a{font-size:13px}.admin-table-wrap{background:#fff;border:1px solid var(--border);border-radius:6px;overflow-x:auto}.admin-table{border-collapse:collapse;width:100%;font-size:13px;text-align:left}.admin-table th{padding:12px 16px;background:#f7f8fa;color:var(--muted);font-weight:650;white-space:nowrap}.admin-table td{padding:15px 16px;border-top:1px solid #edf0f3;vertical-align:middle}.admin-table td:first-child{min-width:170px;overflow-wrap:anywhere}.admin-user-name{font-weight:650}.admin-subtext{display:block;color:var(--muted);font-size:12px;margin-top:3px;overflow-wrap:anywhere}.admin-row-action{white-space:nowrap;text-align:right}.admin-pagination{display:flex;gap:18px;align-items:center;margin-top:20px;font-size:13px}.admin-footnote{margin:22px 0;color:var(--muted);font-size:12px;max-width:75ch}.admin-back{font-size:13px;margin-bottom:24px}.admin-account-status{background:#eef1f5;border:1px solid var(--border);border-radius:4px;padding:4px 9px;color:#445366;font-size:12px;font-weight:600}.admin-account-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0 0 32px;padding:20px;background:#fff;border:1px solid var(--border);border-radius:6px}.admin-account-facts dt,.admin-vm-facts dt{color:var(--muted);font-size:12px;margin-bottom:4px}.admin-account-facts dd,.admin-vm-facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}.admin-section-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:30px 0 12px}.admin-section-title h2{margin:0;font-size:15px}.admin-section-title h2 span{color:var(--muted);font-size:12px;margin-left:4px}.admin-section-title>a{font-size:13px}.admin-machine-list{display:grid;gap:12px}.admin-machine{padding:20px;background:#fff;border:1px solid var(--border);border-radius:6px}.admin-machine-header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.admin-machine-header h3{overflow-wrap:anywhere}.admin-vm-host{margin:4px 0 0;color:var(--muted);font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}.admin-vm-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:17px 0 0;margin:16px 0 0;border-top:1px solid #edf0f3}.admin-machine-note{margin:15px 0 0;color:#734f1a;font-size:12px}.admin-domain-list{display:flex;flex-wrap:wrap;gap:8px 14px;padding-top:16px;margin-top:16px;border-top:1px solid #edf0f3;font-size:12px}.admin-domain-list strong{width:100%}.admin-domain-list small{color:var(--muted);font-size:12px}.admin-empty{padding:24px;background:#fff;border:1px dashed var(--border-strong);border-radius:6px;color:var(--muted)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:800px){.admin-heading{align-items:flex-start;flex-direction:column}.admin-account-facts,.admin-vm-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-section-title{align-items:flex-start;flex-direction:column}.admin-table-wrap{overflow:visible;background:transparent;border:0}.admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}.admin-table thead{position:absolute;clip:rect(0,0,0,0)}.admin-table tr{margin-bottom:10px;padding:14px 16px;background:#fff;border:1px solid var(--border);border-radius:6px}.admin-table td{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border:0;text-align:right}.admin-table td:first-child{display:block;text-align:left;padding-bottom:10px}.admin-table td:not(:first-child):not(.admin-row-action):before{content:attr(data-label);color:var(--muted);text-align:left}.admin-table .admin-subtext{text-align:left}.admin-row-action{padding-top:10px!important;border-top:1px solid #edf0f3!important}.admin-search>div{flex-wrap:wrap}.admin-search input{max-width:none;flex:1;min-width:160px}}

select{display:block;width:100%;padding:10px 11px;background:#fff;border:1px solid var(--border-strong);border-radius:5px;color:var(--text);font:inherit}select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Per-VM Proxmox usage */
.usage-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}.usage-heading h1{overflow-wrap:anywhere}.usage-heading p:last-child{margin:0}.usage-state{font-size:13px;margin:0 0 18px;color:var(--muted)}.usage-state strong{color:var(--text)}.usage-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.usage-cards article,.usage-traffic,.usage-history{background:#fff;border:1px solid var(--border);border-radius:6px;padding:20px}.usage-cards h2,.usage-traffic h2,.usage-history h2{font-size:14px;margin-bottom:14px}.usage-cards p{font-size:12px;color:var(--muted);margin:0}.usage-cards .usage-number{color:var(--text);font-size:24px;font-weight:700;letter-spacing:-.025em;margin:0 0 6px;overflow-wrap:anywhere}.usage-number span{font-size:14px;font-weight:500;color:var(--muted)}.usage-note{color:var(--muted);font-size:12px;margin:14px 0 20px;max-width:90ch}.usage-traffic,.usage-history{margin-top:16px}.usage-traffic dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0}.usage-traffic dt{font-size:12px;color:var(--muted);margin-bottom:5px}.usage-traffic dd{margin:0;font-size:14px;font-weight:650}.usage-history .usage-note{margin:0 0 15px}.usage-chart{position:relative;padding-left:48px;height:145px}.usage-chart svg{display:block;width:100%;height:100%;overflow:visible}.usage-chart line{stroke:#e5e9ef;stroke-width:1;vector-effect:non-scaling-stroke}.usage-chart path{fill:none;stroke:#315bb3;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}.usage-chart-top,.usage-chart-bottom{position:absolute;left:0;color:var(--muted);font-size:11px}.usage-chart-top{top:-7px}.usage-chart-bottom{bottom:-7px}.usage-chart-times{display:flex;justify-content:space-between;padding:10px 0 0 48px;color:var(--muted);font-size:11px}.admin-machine-usage{margin:16px 0 0;font-size:13px}.admin-machine-usage a{font-weight:600}
@media(max-width:600px){.usage-heading{flex-direction:column}.usage-cards{grid-template-columns:1fr}.usage-traffic dl{grid-template-columns:repeat(2,minmax(0,1fr))}.usage-chart{height:120px}}