/* Page-specific layout: login, overview, hosts, VMs, VM detail, projects, usage, events, plans. */

.small { font-size: 12.5px; }
.section-title { font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }

/* ---- login ---- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--canvas);
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px;
  background-position: center; -webkit-mask-image: none;
}
.login-card { width: min(380px, 100%); display: grid; gap: 18px; padding: 28px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); animation: enter 260ms var(--ease) both; }
.login-card h1 { font-size: 20px; font-weight: 650; letter-spacing: -0.025em; }
.login-card .muted { margin-top: 4px; font-size: 13.5px; }
.brand-mark.big { width: 40px; height: 40px; border-radius: 11px; }

/* ---- overview ---- */
.alert .issues { display: grid; margin: 8px 0 0 32px; gap: 2px; }
.issue { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; color: var(--fg); transition: background-color 120ms var(--ease); }
.issue:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.issue .dot { width: 7px; height: 7px; }
.issue b { display: block; font-weight: 550; font-size: 13.5px; }
.issue span { display: block; font-size: 12.5px; color: var(--fg-2); opacity: 0.85; }
.issue svg { color: var(--muted-fg); }
.issues-more > summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0 2px; font-size: 12.5px; font-weight: 500; color: var(--fg-2); list-style: none; }
.issues-more > summary::-webkit-details-marker { display: none; }
.issues-more > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.issues-more[open] > summary { display: none; }

.grid.auto.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.host-panel { display: grid; gap: 14px; padding: 16px; align-content: start; position: relative; }
.host-head { display: flex; align-items: center; gap: 12px; }
.host-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--muted); color: var(--fg-2); flex: none; }
.host-icon.sm { width: 24px; height: 24px; border-radius: 7px; }
.host-icon.good { background: var(--good-soft); color: var(--good-fg); }
.host-icon.warn { background: var(--warn-soft); color: var(--warn-fg); }
.host-icon.bad { background: var(--bad-soft); color: var(--bad-fg); }
.host-name { font-size: 15px; letter-spacing: -0.015em; }
.host-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .host-meters { grid-template-columns: 1fr; gap: 10px; } }
.host-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted-fg); }
.host-facts span { display: inline-flex; align-items: center; gap: 6px; }
.host-vms { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.host-vms-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-fg); font-weight: 500; }
.host-vms-label b { font-weight: 500; background: var(--muted); border-radius: 999px; padding: 0 7px; line-height: 18px; font-variant-numeric: tabular-nums; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.vm-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 28px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--bg); font-size: 12.5px; font-weight: 500; transition: border-color 120ms var(--ease), background-color 120ms var(--ease), transform 120ms var(--ease);
}
.vm-chip:hover { border-color: var(--fg-2); background: var(--muted); }
.vm-chip:active { transform: scale(0.97); }
.vm-chip.replica { border-style: dashed; background: transparent; color: var(--fg-2); }
.vm-chip .dot { width: 7px; height: 7px; }
.vm-chip-size { color: var(--muted-fg); font-size: 11.5px; font-variant-numeric: tabular-nums; font-weight: 400; }
.vm-chip .warn-ico { color: var(--warn); }
.host-foot { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted-fg); padding: 10px 12px; border-radius: 8px; background: var(--good-soft); color: var(--good-fg); }
.host-foot svg { margin-top: 2px; flex: none; }
.host-foot.short { background: var(--warn-soft); color: var(--warn-fg); }
.host-panel.bad { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
.host-panel.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.mini-project { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; transition: border-color 120ms var(--ease); }
.mini-project:hover { border-color: var(--border-strong); }

/* ---- feed ---- */
.feed { display: grid; margin: -4px -8px; }
.feed.padded { margin: 0; padding: 6px 8px; }
.feed-item { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 8px; min-width: 0; font-size: 13.5px; transition: background-color 100ms var(--ease); }
a.feed-item:hover, details.ev > summary.feed-item:hover { background: color-mix(in srgb, var(--muted) 70%, transparent); }
.feed-item time { color: var(--muted-fg); font-size: 12px; white-space: nowrap; }
.feed-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--muted); color: var(--fg-2); }
.feed-icon.good { background: var(--good-soft); color: var(--good-fg); }
.feed-icon.warn { background: var(--warn-soft); color: var(--warn-fg); }
.feed-icon.bad { background: var(--bad-soft); color: var(--bad-fg); }
.feed-icon.info { background: var(--info-soft); color: var(--info-fg); }
.feed-title { font-weight: 550; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-title .muted { font-weight: 400; }
.feed-sub { font-size: 12.5px; color: var(--muted-fg); line-height: 1.35; }
.feed-sub.bad { color: var(--bad-fg); }
.feed-day { padding: 12px 8px 4px; font-size: 12px; font-weight: 600; color: var(--muted-fg); position: sticky; top: 52px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(6px); z-index: 1; }
details.ev > summary { list-style: none; cursor: default; }
details.ev > summary::-webkit-details-marker { display: none; }
details.ev[open] > summary .chev svg, details.op-card[open] > summary .chev svg { transform: rotate(180deg); }
.chev svg { transition: transform 160ms var(--ease); color: var(--muted-fg); }
.ev-body { margin: 0 8px 8px 46px; padding: 10px 12px; border-radius: 8px; background: var(--muted); display: grid; gap: 6px; }
.ev-clock { display: none; }
@media (min-width: 900px) { .ev-clock { display: inline; } }

/* ---- VMs ---- */
.vm-link { font-weight: 600; }
.vm-link:hover { text-decoration: underline; text-underline-offset: 3px; }
th.actions-col, td.actions-col { width: 44px; padding-left: 0; text-align: right; }
.placement { display: flex; flex-wrap: wrap; gap: 4px; }
.place { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 12px; font-weight: 500; border: 1px solid var(--border-strong); background: var(--bg); white-space: nowrap; }
.place.owner { background: var(--muted); }
.place.replica { border-style: dashed; color: var(--muted-fg); background: transparent; }
.place.replica.sync { color: var(--info-fg); border-color: color-mix(in srgb, var(--info) 45%, transparent); background: var(--info-soft); }
.place.replica.bad { color: var(--warn-fg); border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: var(--warn-soft); }
.size-cell { white-space: nowrap; }

/* ---- VM detail ---- */
.vm-head .page-head { align-items: flex-start; }
.vm-meta { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin-top: 8px; color: var(--muted-fg); font-size: 13px; }
.vm-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.vm-meta code { font-size: 12px; }
.link-ext { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-fg); font-weight: 500; }
.link-ext:hover { text-decoration: underline; text-underline-offset: 3px; }
a.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.tabs { margin: 4px 0 0; }
.tab-body { margin-top: 16px; }
.op-panel-host:not(:empty) { margin-top: 16px; }
.op-panel { overflow: hidden; border-left: 3px solid var(--info); }
.op-panel.succeeded { border-left-color: var(--good); }
.op-panel.failed { border-left-color: var(--bad); }
.op-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
.indeterminate { height: 2px; background: color-mix(in srgb, var(--info) 18%, transparent); overflow: hidden; }
.indeterminate i { display: block; height: 100%; width: 40%; background: var(--info); animation: slide 1.3s ease-in-out infinite; }
.steps { margin: 0; padding: 4px 14px 12px 14px; list-style: none; max-height: 14rem; overflow: auto; font-size: 12.5px; display: grid; gap: 3px; }
.steps li { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.steps time { color: var(--muted-fg); font-variant-numeric: tabular-nums; font-size: 12px; flex: none; }
.steps code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.res { padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.zone-bar { position: relative; height: 8px; border-radius: 999px; overflow: hidden; background: var(--muted-2); margin: 4px 0 2px; }
.zone-bar > i { position: absolute; inset: 0 auto 0 0; display: block; border-radius: 999px; }
.zone-bar .z-ceiling { width: 100%; background: transparent; }
.zone-bar .z-burst { background: color-mix(in srgb, var(--accent) 38%, transparent); }
.zone-bar .z-guar { background: var(--accent); }
.zone-bar .z-now { background: var(--c2); opacity: 0.85; z-index: 0; }
.zone-bar .z-guar { z-index: 1; }
.zone-bar.slim { height: 6px; }
.zone-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted-fg); }
.zone-legend span { display: inline-flex; align-items: center; gap: 6px; }

.topo { display: grid; }
.repl { display: flex; align-items: center; height: 38px; margin-left: 24px; padding-left: 18px; position: relative; }
.repl::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--good); border-radius: 2px; }
.repl.sync::before { background: repeating-linear-gradient(to bottom, var(--info) 0 5px, transparent 5px 9px); }
.repl.bad::before { background: repeating-linear-gradient(to bottom, var(--warn) 0 5px, transparent 5px 9px); }
.repl span { font-size: 11.5px; font-weight: 550; padding: 2px 9px; border-radius: 999px; background: var(--good-soft); color: var(--good-fg); border: 1px solid color-mix(in srgb, var(--good) 25%, transparent); white-space: nowrap; }
.repl.sync span { background: var(--info-soft); color: var(--info-fg); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.repl.bad span { background: var(--warn-soft); color: var(--warn-fg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.node { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); }
.node.replica { border-style: dashed; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.node.sync { border-color: color-mix(in srgb, var(--info) 55%, transparent); }
.node.bad { border-color: color-mix(in srgb, var(--warn) 65%, transparent); }
.node-sub { font-size: 12.5px; color: var(--muted-fg); }

.access-row { display: grid; gap: 6px; }
.access-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted-fg); }
.op-card > summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.op-card > summary::-webkit-details-marker { display: none; }
.op-card > summary:hover { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.op-detail { padding: 6px 14px 16px; display: grid; gap: 16px; border-top: 1px solid var(--border); }
.op-detail:empty { display: none; }
.op-kv { font-size: 13px; }
.op-kv code.wrap { white-space: pre-wrap; word-break: break-all; }
.op-kv .err { color: var(--bad-fg); }
.waterfall { display: grid; margin-top: 10px; }
.wf-row { display: grid; grid-template-columns: 56px minmax(120px, 1.1fr) minmax(120px, 2fr) 64px; gap: 12px; align-items: center; min-height: 28px; font-size: 12.5px; }
.wf-t, .wf-d { color: var(--muted-fg); }
.wf-d { text-align: right; }
.wf-name { display: flex; gap: 8px; align-items: baseline; min-width: 0; font-weight: 500; overflow: hidden; }
.wf-name code { font-weight: 400; font-size: 11.5px; }
.wf-track { position: relative; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 80%, transparent); }
.wf-track i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--c1); min-width: 3px; }
@media (max-width: 720px) { .wf-row { grid-template-columns: 48px 1fr 56px; } .wf-track { display: none; } }

.term-card { border-radius: var(--radius-lg); overflow: hidden; background: #0b0f14; border: 1px solid #1e2630; }
.term-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #11161d; border-bottom: 1px solid #1e2630; color: #9aa6b2; font-size: 12.5px; }
.term-bar code { color: #c8d1da; }
.term-bar .dot { width: 8px; height: 8px; background: #6b7683; }
.term-card[data-state="good"] .term-bar .dot { background: #3fb950; box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.2); }
.term-card[data-state="error"] .term-bar .dot { background: #f85149; }
.term-card[data-state="warn"] .term-bar .dot { background: #d29922; }
.term-bar .btn { background: transparent; border-color: #2a3441; color: #c8d1da; box-shadow: none; }
.term-bar .btn:hover:not(:disabled) { background: #1a222c; }
.term-status.good { color: #3fb950; }
.term-status.warn { color: #d29922; }
.term-status.error { color: #f85149; }
.term-box { padding: 8px; height: 62vh; min-height: 20rem; }
.term-box .xterm { height: 100%; }
pre.console { margin: 0; padding: 12px 14px; min-height: 22rem; max-height: 68vh; overflow: auto; background: #0b0f14; color: #d6dde6; font-size: 12px; line-height: 1.55; white-space: pre; }
.debug-card .card-body { overflow-x: auto; }

/* ---- projects ---- */
.project-card .card-head { padding-bottom: 0; }
.project-card .card-body { padding-top: 16px; }
.vm-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; transition: transform 120ms var(--ease); }
.vm-dot:hover { transform: scale(1.35); }

/* ---- plans ---- */
.plan { padding: 16px; display: grid; gap: 14px; align-content: start; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.plan-price { font-size: 30px; font-weight: 650; letter-spacing: -0.03em; line-height: 1; }
.plan-price small { font-size: 13px; font-weight: 500; color: var(--muted-fg); letter-spacing: 0; }
.plan-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; }
.plan-specs li { display: flex; gap: 10px; align-items: flex-start; }
.plan-specs svg { color: var(--muted-fg); margin-top: 3px; }

/* ---- new VM ---- */
.grid.new-vm { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 1000px) { .grid.new-vm { grid-template-columns: minmax(0, 1fr); } }
.sticky { position: sticky; top: 72px; }
.plan-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.plan-opt { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); cursor: pointer; transition: border-color 120ms var(--ease), background-color 120ms var(--ease), box-shadow 120ms var(--ease); }
.plan-opt:hover { background: var(--muted); }
.plan-opt[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); background: var(--accent-soft); }
.plan-opt-title { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.plan-opt-line { font-size: 12.5px; color: var(--fg-2); }
.plan-opt .radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-block; position: relative; }
.plan-opt[aria-checked="true"] .radio { border-color: var(--accent); }
.plan-opt[aria-checked="true"] .radio::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--accent); }
details.more > summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-weight: 500; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more .chev-r { transition: transform 140ms var(--ease); }
details.more[open] .chev-r { transform: rotate(90deg); }
details.more .card-body { border-top: 1px solid var(--border); }
.radios { display: flex; gap: 18px; }

/* ---- misc ---- */
.stat .meter { margin-top: 2px; }