/* Shared product surfaces. Keep public pages on their existing stylesheet. */
.app-body { --control-border: #46515e; font-size: 14px; }
.app-body [hidden] { display: none !important; }
.app-body .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.app-body .wrap, .app-body .dashboard-main, .app-body .login-main { max-width: 1168px; padding-right: 32px; padding-left: 32px; }
.app-body .app-header { min-height: 80px; padding-top: 12px; padding-bottom: 12px; }
.app-body .brand { gap: 8px; }
.app-body .brand img { width: 36px; height: 36px; }
.app-body .brand span { font-size: 20px; }
.app-body .app-header nav { gap: 20px; }
.app-body .app-header nav > a { display: inline-flex; color: var(--muted); }
.app-body .app-header nav > a:hover { color: var(--ink); }
.app-body .account-toggle { font-size: 13px; }
.app-navigation { display: flex; gap: 28px; border-bottom: 1px solid var(--line); }
.app-navigation a { position: relative; display: flex; align-items: center; min-height: 48px; color: var(--muted); font-weight: 500; }
.app-navigation a:hover, .app-navigation a[aria-current="page"] { color: var(--ink); }
.app-navigation a[aria-current="page"]::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--blue); content: ""; }
.app-body .dashboard-main, .app-body .login-main { padding-top: 32px; padding-bottom: 48px; }
.app-body .dashboard-main h1, .app-body .login-main h1 { font-size: 28px; letter-spacing: -.02em; line-height: 1.3; }
.app-body .dashboard-main h2 { font-size: 16px; font-weight: 600; letter-spacing: normal; }
.app-body .dashboard-main h3 { font-size: 14px; font-weight: 600; }
.app-body .dashboard-status { font-size: 13px; line-height: 1.6; }
.app-body .dashboard-error { padding: 12px 16px; border-left: 2px solid #ffb4ab; background: #ffb4ab08; font-size: 13px; }
.app-body .dashboard-error a { text-decoration: underline; text-underline-offset: 3px; }
.app-body button, .app-body input, .app-body select, .app-body textarea { font: inherit; }
.app-body button, .app-body a, .machine-option { -webkit-tap-highlight-color: transparent; }
.app-body button { transition: background 160ms ease, border-color 160ms ease, color 160ms ease; }
.app-body button:disabled { opacity: .5; cursor: not-allowed; }
.app-body .dashboard-retry { margin-top: 0; padding: 8px 12px; border-color: var(--line); font-size: 13px; font-weight: 500; line-height: 1.4; }
.app-body .dashboard-retry:hover:not(:disabled) { border-color: var(--control-border); background: var(--surface); }
.app-body .button { min-height: 44px; font-size: 13px; }
.app-body .button:disabled { opacity: 1; background: #282e36; color: #a4adb8; }
.app-body :is(input, textarea, select):disabled { opacity: .6; cursor: not-allowed; }
.app-body :is(input, textarea, select):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Plan and usage stay compact so the working controls are easy to reach. */
.dashboard-body #dashboard-content { margin-top: 8px; }
.dashboard-body .dashboard-subscription { margin-top: 0; }
.dashboard-body .dashboard-plan-row { justify-content: flex-start; gap: 16px; margin-top: 0; }
.dashboard-body #subscription-level { font-size: 13px; font-weight: 500; }
.dashboard-body .dashboard-plan-row .text-link { min-height: 32px; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.dashboard-body .dashboard-plan-row .text-link:hover { color: var(--ink); }
.dashboard-body #subscription-note { max-width: 76ch; margin-top: 4px; }
.container-usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 20px 0 24px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.container-usage dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.container-usage dd { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.container-usage .usage-detail { margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: normal; }

/* One grouped launch interaction, with directly comparable machine choices. */
.app-body .container-launch { width: min(880px, calc(100% - 40px)); max-height: calc(100dvh - 40px); margin: auto; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.container-launch::backdrop { background: rgb(0 0 0 / .72); }
.container-launch .launch-heading h2 { font-size: 18px; }
#container-launch-status:empty { display: none; }
#container-launch-status { margin-top: 12px; }
.launch-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 20px; }
.dashboard-body .container-image-picker { display: flex; flex-wrap: nowrap; gap: 12px; width: 100%; margin: 0 0 20px; }
.dashboard-body .container-image-picker label { color: var(--muted); font-size: 13px; }
.dashboard-body .container-image-picker :is(select, input) { min-height: 44px; padding: 8px 32px 8px 12px; border-color: var(--control-border); background-color: var(--paper); font-size: 13px; cursor: pointer; }
.machine-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.machine-picker legend { margin-bottom: 8px; padding: 0; color: var(--muted); font-size: 12px; }
.machine-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.machine-options > p { grid-column: 1 / -1; min-height: 120px; align-content: center; }
.machine-option { position: relative; display: grid; grid-template-columns: 1fr 16px; align-items: center; gap: 4px 8px; min-width: 0; padding: 12px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--paper); cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.machine-option:hover { border-color: var(--muted); }
.machine-option:has(input:checked) { border-color: var(--blue); background: #ffad7008; }
.machine-option:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.machine-picker:disabled .machine-option { opacity: .6; cursor: not-allowed; }
.machine-option input { grid-column: 2; grid-row: 1; width: 16px; height: 16px; margin: 0; accent-color: var(--blue); cursor: inherit; }
.machine-option input:focus-visible { outline: none; }
.machine-name { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 600; }
.machine-memory { grid-column: 1 / -1; margin-top: 4px; font-size: 16px; font-weight: 500; }
.machine-specs, .machine-rate { grid-column: 1 / -1; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.machine-rate { margin-top: 4px; }
.launch-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.launch-notes { min-width: 0; }
.dashboard-body #container-size-rate { color: var(--ink); font-size: 12px; }
.dashboard-body #container-limits { margin: 2px 0 0; font-size: 12px; }
.launch-footer .button { flex-shrink: 0; }

/* Resource rows share alignment, metadata, and action hierarchy. */
.dashboard-body .dashboard-containers { margin-top: 20px; }
.app-body .dashboard-section-heading { margin-bottom: 8px; gap: 8px 16px; }
.dashboard-body .dashboard-section-heading h2 { display: flex; align-items: center; gap: 8px; }
.section-count { min-width: 24px; padding: 1px 6px; border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.dashboard-body #containers-status:empty { display: none; }
.containers-empty { padding: 24px 0; border-top: 1px solid var(--line); }
.app-body .container-list { margin-top: 8px; }
.app-body .container-row { gap: 12px 24px; padding: 16px 0; }
.app-body .container-row strong { font-size: 14px; font-weight: 500; }
.project-table { width: 100%; margin-top: 8px; border-spacing: 0; table-layout: fixed; text-align: left; font-size: 13px; }
.project-table th { padding: 10px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 500; }
.project-table th:first-child { border-radius: 4px 0 0 0; }
.project-table th:last-child { border-radius: 0 4px 0 0; }
.project-table th:nth-child(1) { width: 25%; }
.project-table th:nth-child(2) { width: 28%; }
.project-table th:nth-child(3) { width: 32%; }
.project-table th:nth-child(4) { width: 15%; }
.project-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }
.project-table .project-name { font-weight: 500; }
.project-table .project-domain { color: var(--muted); }
.project-table .project-preview { overflow-wrap: anywhere; }
.project-table .project-preview a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
.project-table .project-preview .dashboard-retry { min-height: 44px; margin-left: 8px; }
.project-preview-note { display: block; color: var(--muted); font-size: 11px; }
.project-table .container-actions { justify-content: flex-end; }
@media (max-width: 700px) {
  .project-table, .project-table tbody, .project-table tr, .project-table td { display: block; width: auto; }
  .project-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .project-table .project-table-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
  .project-table td { min-width: 0; padding: 0; border: 0; }
  .project-table .project-name { grid-column: 1; grid-row: 1; }
  .project-table .project-domain { grid-column: 1 / -1; grid-row: 2; font-size: 12px; }
  .project-table .project-domain::before { color: var(--muted); content: "Domain: "; }
  .project-table .project-preview { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 4px 8px; }
  .project-table .project-preview .dashboard-retry { margin-left: 0; }
  .project-table .project-preview::before { color: var(--muted); content: "Preview: "; }
  .project-table .project-actions { grid-column: 2; grid-row: 1; }
  .project-table .container-actions { justify-content: flex-end; }
}
.container-details { flex: 1 1 260px; }
.container-row-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.container-state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.container-state::before { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--muted); content: ""; }
.container-state[data-state="running"] { color: #8fd7aa; }
.container-state[data-state="running"]::before { background: #8fd7aa; }
.container-state[data-state="starting"] { color: #edc27f; }
.container-state[data-state="starting"]::before { background: #edc27f; }
.container-details > p { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; }
.container-details code { font: 11px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.container-details > p > span { white-space: nowrap; }
.app-body .container-actions { gap: 6px; align-items: center; }
.app-body .container-row > .container-actions .dashboard-retry { border-color: transparent; }
.app-body .container-row > .container-actions .container-terminal-action { border-color: var(--control-border); background: var(--surface); }
.app-body .container-row > .container-actions .container-terminal-action:hover:not(:disabled) { background: #202730; }
.app-body .container-row > .container-actions .button-danger { margin-left: 6px; border-color: var(--line); color: #ffb4ab; }
.app-body .button-danger:hover:not(:disabled), .app-body .key-revoke:hover:not(:disabled) { border-color: #925a58; background: #ffb4ab0a; }

/* Image sources share the launch dialog's field and tab treatment. */
.launch-image-tabs { margin: 8px 0 16px; }
.container-launch .custom-images-content { padding-bottom: 0; }
.container-launch .image-form { max-width: none; }
.container-launch .container-row { flex-wrap: wrap; overflow-wrap: anywhere; }
.container-launch .image-form input[type="file"] { min-width: 0; }
.image-form-heading { margin-top: 20px; }
.app-body .image-form { max-width: 720px; }
.app-body .image-form label { font-size: 13px; font-weight: 500; }
.app-body .image-form :is(input, textarea), .app-body .key-form input, .app-body .key-secret textarea { background: var(--paper); border-color: var(--control-border); }
.app-body .image-form textarea { font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }
.app-body .image-form .dashboard-status { font-size: 12px; }
.app-body input::file-selector-button { min-height: 28px; margin-right: 12px; padding: 4px 10px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.app-body .container-terminal, .app-body .container-observations, .app-body .image-logs { padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.app-body .terminal-heading, .app-body .history-heading { flex-wrap: wrap; margin-bottom: 8px; }
.app-body .terminal-output { border-radius: 4px; margin-top: 12px; }
.app-body .container-ssh { padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.app-body .container-ssh label { font-size: 13px; font-weight: 500; }
.app-body .container-ssh textarea { margin-bottom: 12px; background: var(--paper); }
.app-body .container-ssh .dashboard-status { margin-top: 8px; }
.app-body .container-ssh a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.app-body .container-previews { padding-top: 12px; border-top: 1px solid var(--line); }
.app-body .workspace-save-dialog { border-radius: 8px; }
.app-body .workspace-save-dialog h3 { font-size: 18px; }
.app-body .workspace-save-dialog input[type="text"] { border-color: var(--control-border); }

/* Group machines by their explicit Private Services membership. */
.container-usage:has(#usage-networks-group:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.container-usage > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.machine-groups { display: grid; gap: 16px; margin: 16px 0 20px; }
.machine-group { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff02; }
.machine-group > summary { position: relative; padding-left: 24px; list-style: none; cursor: pointer; }
.machine-group > summary::-webkit-details-marker { display: none; }
.machine-group > summary::before { position: absolute; top: 1px; left: 0; content: "›"; color: var(--muted); font-size: 20px; line-height: 1; }
.machine-group[open] > summary::before { transform: rotate(90deg); }
.machine-group > summary strong { font-size: 16px; font-weight: 600; }
.machine-group > summary .section-count { display: inline-block; margin-left: 8px; vertical-align: middle; }
.private-service-badge { display: inline-block; margin-left: 12px; padding: 2px 8px; border: 1px solid #315981; border-radius: 16px; color: #9ccafa; background: #14355750; font-size: 11px; vertical-align: middle; }
.group-note { display: block; margin-top: 4px; }
.app-body .group-tools { justify-content: flex-end; flex-wrap: wrap; margin: 8px 0; }
.group-tools .dashboard-retry { min-height: 36px; font-size: 12px; }
.machine-table { width: 100%; margin-top: 16px; border-spacing: 0; table-layout: fixed; text-align: left; font-size: 13px; }
.machine-table th { padding: 10px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 500; }
.machine-table th:first-child { border-radius: 4px 0 0 0; }
.machine-table th:last-child { border-radius: 0 4px 0 0; }
.machine-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }
.machine-column-0 { width: 19%; }
.machine-column-1 { width: 12%; }
.machine-column-2 { width: 17%; }
.machine-column-3 { width: 21%; }
.machine-column-4 { width: 13%; }
.machine-column-5 { width: 18%; }
.machine-table .container-details strong { font-size: 13px; font-weight: 600; }
.machine-table .container-details > p { font-size: 11px; }
.machine-table .container-details > p > span { white-space: normal; }
.machine-table .container-state { padding: 3px 8px; border-radius: 12px; background: var(--surface); font-size: 11px; }
.machine-table .container-state[data-state="running"] { background: #21593850; }
.machine-table .container-actions { justify-content: flex-end; flex-wrap: nowrap; }
.app-body .machine-table .container-terminal-action { min-height: 36px; padding: 6px 8px; white-space: nowrap; font-size: 11px; }
.machine-identity, .private-port { display: block; margin-top: 4px; color: var(--muted); font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.stale-member { color: var(--muted); }
.machine-preview-row:has(.container-previews[hidden]) { display: none; }
.app-body .machine-table .container-previews { border-top: 0; padding-top: 0; }
.machine-table .group-empty { padding: 16px 12px; }
.container-action-menu { position: relative; flex-shrink: 0; }
.container-action-menu > summary { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; border-radius: 4px; color: var(--muted); list-style: none; cursor: pointer; letter-spacing: 2px; }
.container-action-menu > summary::-webkit-details-marker { display: none; }
.container-action-menu > summary:hover, .container-action-menu[open] > summary { color: var(--ink); background: var(--surface); }
.container-menu-items { position: absolute; z-index: 5; top: calc(100% + 4px); right: 0; display: grid; min-width: 184px; padding: 4px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); box-shadow: 0 8px 24px #0006; }
.app-body .container-menu-items .dashboard-retry { width: 100%; min-height: 44px; border-color: transparent; border-radius: 4px; text-align: left; }
.app-body .container-menu-items .button-danger { color: #ffb4ab; }
#private-services-feedback:has([role="alert"][hidden]):has([role="status"]:empty) { display: none; }
#private-services-feedback { margin-bottom: 12px; }
#private-services-feedback button { margin-top: 8px; }
.app-body .private-services-dialog { width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; margin: auto; padding: 24px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); color: var(--ink); }
.private-services-dialog::backdrop { background: rgb(0 0 0 / .72); }
.private-services-dialog h2 { margin-bottom: 16px; }
.private-services-dialog label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 500; }
.private-services-dialog :is(input, select) { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--paper); color: var(--ink); }
.private-services-dialog .dashboard-status { margin-top: 6px; font-size: 12px; }
.private-services-dialog .container-actions { flex-wrap: wrap; margin-top: 20px; }
.endpoint-dialog { width: min(620px, calc(100% - 32px)); }
.endpoint-dialog h3 { margin: 22px 0 8px; font-size: 15px; }
.endpoint-dialog [hidden] { display: none !important; }
.endpoint-dialog .endpoint-actions { margin-top: 14px; }
.endpoint-dialog #endpoint-domains { margin-top: 22px; }
.endpoint-domain-list { display: grid; gap: 8px; margin-top: 10px; }
.endpoint-domain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.endpoint-domain-row strong { overflow-wrap: anywhere; }
.endpoint-domain-row .dashboard-status { margin: 0 auto 0 0; }
.endpoint-domain-row .dashboard-error { flex-basis: 100%; margin: 0; }
.endpoint-table-scroll { max-width: 100%; margin-top: 12px; overflow-x: auto; }
.endpoint-dns-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.endpoint-dns-table th, .endpoint-dns-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.endpoint-dns-table thead th { color: var(--muted); font-size: 11px; font-weight: 500; }
.endpoint-dns-table tr > :first-child { width: 64px; }
.endpoint-dns-table tr > :last-child { width: 64px; }
.endpoint-dns-table tbody tr > th { padding-top: 14px; font-weight: 600; }
.endpoint-dns-table code { overflow-wrap: anywhere; font-size: 11px; }
.endpoint-dns-table button { min-height: 36px; }
@media (max-width: 560px) {
  .endpoint-dns-table { min-width: 420px; }
}
@media (max-width: 1100px) {
  .machine-table .machine-column-4 { display: none; }
  .machine-table .machine-column-0 { width: 22%; }
  .machine-table .machine-column-1 { width: 15%; }
  .machine-table .machine-column-2 { width: 17%; }
  .machine-table .machine-column-3 { width: 24%; }
  .machine-table .machine-column-5 { width: 22%; }
}
@media (max-width: 700px) {
  .container-usage:has(#usage-networks-group:not([hidden])) { grid-template-columns: 1fr; }
  .container-usage > div + div { border-left: 0; padding-left: 0; }
  .machine-group { padding: 12px; }
  .machine-group > summary strong { font-size: 14px; }
  .private-service-badge { margin-left: 8px; font-size: 10px; }
  .machine-table, .machine-table tbody, .machine-table tr, .machine-table td { display: block; width: auto; }
  .machine-table thead { display: none; }
  .machine-table .machine-table-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
  .machine-table td { min-width: 0; padding: 0; border: 0; }
  .machine-table .machine-column-0, .machine-table .machine-column-1, .machine-table .machine-column-3, .machine-table .machine-column-5 { display: block; width: auto; }
  .machine-table .machine-column-2 { display: none; }
  .machine-table .machine-column-1 { text-align: right; }
  .machine-table .machine-column-3 { grid-column: 1 / -1; font-size: 12px; }
  .machine-table .machine-column-3::before { color: var(--muted); content: "Private service: "; }
  .machine-table .machine-column-5 { grid-column: 1 / -1; }
  .machine-table .container-actions { justify-content: flex-start; }
  .private-port { display: inline; margin-left: 8px; }
  .machine-preview-row td { padding: 0 0 12px; }
  .machine-table .group-empty { padding: 12px 0; }
  .container-menu-items { right: auto; left: 0; }
  .app-body .private-services-dialog { padding: 20px; }
}

/* Keep account settings aligned with the product workspace. */
.app-body .api-keys-main #keys-content { max-width: 800px; margin-top: 16px; }
.app-body .api-keys-main > .dashboard-section-heading { max-width: 800px; }
.app-body .key-form { padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.app-body .key-secret { padding: 20px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); }
.app-body .login-content { max-width: 640px; }
.app-body .login-status { font-size: 13px; }
.app-body .profile-details { margin-bottom: 8px; }
.app-body .profile-details dt { font-size: 12px; }
.app-body .profile-details dd { margin-top: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.app-body .login-sign-out { font-size: 13px; }

@media (max-width: 900px) {
  .machine-options { grid-template-columns: 1fr; gap: 6px; }
  .machine-option { grid-template-columns: 16px minmax(48px, .7fr) 1fr auto; gap: 0 8px; min-height: 60px; padding: 8px 12px; }
  .machine-option input { grid-column: 1; grid-row: 1 / 3; }
  .machine-name { grid-column: 2; grid-row: 1 / 3; }
  .machine-memory { grid-column: 3; grid-row: 1; margin-top: 0; font-size: 13px; }
  .machine-specs { grid-column: 3 / 5; grid-row: 2; font-size: 11px; }
  .machine-rate { grid-column: 4; grid-row: 1; margin-top: 0; font-size: 11px; }
  .app-body .container-row > .container-actions { flex-basis: 100%; }
}
@media (max-width: 700px) {
  .app-body .wrap, .app-body .dashboard-main, .app-body .login-main { padding-right: 20px; padding-left: 20px; }
  .app-body .dashboard-main, .app-body .login-main { padding-top: 24px; }
  .app-body .app-header { min-height: 72px; }
  .app-navigation { flex-wrap: wrap; gap: 0 20px; }
  .app-body .dashboard-main h1, .app-body .login-main h1 { font-size: 24px; }
  .container-usage { grid-template-columns: 1fr; gap: 12px; padding: 12px 0; }
  .container-usage > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
  .container-usage dt { margin-bottom: 0; }
  .container-usage dd { font-size: 18px; }
  .container-usage .usage-detail { grid-column: 1 / -1; margin-top: 0; font-size: 11px; }
  .app-body .container-launch { width: calc(100% - 32px); max-height: calc(100dvh - 32px); padding: 16px; }
  .launch-heading { align-items: center; gap: 12px; margin-bottom: 16px; }
  .dashboard-body .container-image-picker { margin-bottom: 16px; }
  .launch-footer { align-items: stretch; flex-direction: column; gap: 12px; }
  .launch-footer .button { width: 100%; }
  .app-body .container-row { gap: 12px; }
  .app-body .container-row > .container-actions { gap: 4px; }
  .app-body .container-row > .container-actions .dashboard-retry { padding-right: 10px; padding-left: 10px; font-size: 12px; }
  .app-body .container-row > .container-actions .button-danger { margin-left: 0; }
  .app-body .container-terminal, .app-body .container-observations, .app-body .image-logs { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-body button, .machine-option { transition: none; }
}

.app-body .network-filters { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.app-body .network-filters[hidden] { display: none; }
.app-body .network-filters label { font-size: 14px; }
.app-body .network-filters input { box-sizing: border-box; width: 280px; max-width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
@media (max-width: 480px) {
  .app-body .network-filters { align-items: stretch; flex-direction: column; gap: 4px; }
  .app-body .network-filters input { width: 100%; }
}

/* Resource tabs keep each dashboard list and its search together. */
.dashboard-body .resource-tabs { display: flex; gap: 16px; min-width: 0; }
.resource-tabs [role="tab"] { min-height: 44px; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.resource-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--orange, #c65b13); color: var(--ink); }
.resource-tabs [role="tab"]:hover { color: var(--ink); }
.resource-tabs [role="tab"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.dashboard-body #saved-workspaces { padding-top: 4px; }
@media (max-width: 600px) {
  .dashboard-body .resource-tabs { gap: 12px; width: 100%; }
  .dashboard-body .dashboard-containers > .dashboard-section-heading { align-items: flex-start; flex-direction: column; }
}

.search-picker { position: relative; }
.search-picker-popup { position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; overflow-y: auto; padding: 4px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--surface); box-shadow: 0 8px 24px #0006; }
.search-picker-popup[hidden] { display: none; }
.search-picker-option { min-height: 44px; box-sizing: border-box; padding: 12px 8px; overflow-wrap: anywhere; cursor: pointer; border-radius: 2px; }
.search-picker-option:hover, .search-picker-option[aria-selected="true"] { background: var(--paper); outline: 1px solid var(--control-border); outline-offset: -1px; }
.search-picker-status { padding: 8px; font-size: 12px; color: var(--muted); }

.overview-workloads { max-width: 720px; margin-top: 24px; }
.overview-workloads > a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.overview-workloads > a span { color: var(--muted); font-size: 13px; text-align: right; }
.overview-workloads > p { margin-top: 12px; }
.production-launch-settings { margin-bottom: 20px; }
.production-launch-settings label { display: block; margin-bottom: 8px; font-size: 13px; }
.production-launch-settings input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; }
.production-launch-settings p { margin-top: 6px; max-width: 76ch; }