:root {
  color-scheme: light;
  --canvas: #eef2f1;
  --surface: #ffffff;
  --ink: #172631;
  --muted: #63737e;
  --line: #d4dedc;
  --line-strong: #b5c4c1;
  --navy: #183c4d;
  --navy-deep: #102d3b;
  --oracle: #cb493b;
  --oracle-dark: #a9382d;
  --mint: #3f806f;
  --mint-soft: #e0f0eb;
  --amber: #b87a26;
  font-family: Manrope, "Microsoft YaHei", sans-serif;
  background: var(--canvas);
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .46; }
code, pre, .status-data dd { font-family: "DM Mono", Consolas, monospace; }
.eyebrow, .meta-label { color: var(--muted); display: block; font: 700 10px/1.2 "Space Grotesk", sans-serif; letter-spacing: .08em; margin: 0 0 8px; text-transform: uppercase; }
.product-lockup { align-items: center; color: var(--ink); display: flex; font: 700 11px/.98 "Space Grotesk", sans-serif; gap: 9px; letter-spacing: .06em; text-decoration: none; }
.product-mark { align-items: center; background: var(--oracle); color: #fff; display: inline-flex; font: 700 13px/1 "Space Grotesk", sans-serif; height: 34px; justify-content: center; letter-spacing: 0; width: 34px; }
.button { align-items: center; border: 1px solid transparent; border-radius: 4px; display: inline-flex; font-size: 13px; font-weight: 700; justify-content: center; min-height: 38px; padding: 8px 14px; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(24, 60, 77, .2); outline-offset: 2px; }
.primary { background: var(--oracle); box-shadow: 0 5px 12px rgba(203, 73, 59, .18); color: #fff; }
.primary:hover { background: var(--oracle-dark); }
.secondary { background: var(--navy); color: #fff; width: 100%; }
.secondary:hover { background: var(--navy-deep); }
.ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.ghost:hover { background: #f4f7f6; border-color: var(--navy); }
.danger { background: #fffafa; border-color: #e1aaa4; color: #aa3d33; width: 100%; }
.danger:hover { background: #fff0ee; }
.topbar { align-items: center; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); display: flex; gap: 20px; height: 66px; justify-content: space-between; padding: 0 max(20px, calc((100% - 1320px) / 2)); }
.topbar-context { align-items: center; color: var(--muted); display: flex; flex: 1; font: 500 11px/1 "DM Mono", monospace; gap: 8px; margin-left: 8px; text-transform: uppercase; }
.topbar-actions { align-items: center; display: flex; gap: 8px; }
.topbar-actions form { margin: 0; }
.context-dot { background: var(--mint); border-radius: 50%; height: 7px; width: 7px; }
.page-shell { height: calc(100dvh - 66px); margin: 0 auto; max-width: 1440px; min-height: 620px; padding: 22px 20px 24px; }
.mission-bar { align-items: center; background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: 230px minmax(340px, 1fr) auto; min-height: 88px; padding: 16px 22px; }
.mission-status { align-items: center; display: flex; gap: 12px; }
.mission-status strong { display: block; font: 700 15px/1.1 "Space Grotesk", sans-serif; }
.status-dot { background: #95a4aa; border-radius: 50%; box-shadow: 0 0 0 5px #edf1f0; height: 10px; width: 10px; }
.status-dot.running { animation: pulse 1.8s infinite; background: var(--mint); box-shadow: 0 0 0 5px var(--mint-soft); }
.task-track { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0 28px; }
.task-track li { align-items: center; color: #9aa7ad; display: flex; font-size: 11px; font-weight: 600; gap: 8px; position: relative; white-space: nowrap; }
.task-track li:not(:last-child)::after { background: var(--line); content: ""; height: 1px; left: 28px; position: absolute; right: 7px; top: 10px; z-index: 0; }
.task-track li span { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); display: inline-flex; font: 500 8px/1 "DM Mono", monospace; height: 21px; justify-content: center; position: relative; width: 21px; z-index: 1; }
.task-track .is-ready { color: var(--navy); }
.task-track .is-ready span { background: var(--navy); border-color: var(--navy); color: #fff; }
.task-running .task-track li:nth-child(2) { color: var(--mint); }
.task-running .task-track li:nth-child(2) span { background: var(--mint); border-color: var(--mint); color: #fff; }
.status-data { display: flex; gap: 34px; margin: 0; }
.status-data div { min-width: 102px; }
.status-data dt { color: var(--muted); font-size: 10px; margin-bottom: 6px; }
.status-data dd { color: var(--ink); font-size: 11px; margin: 0; }
.workbench { background: var(--surface); border: 1px solid var(--line); border-top: 0; display: grid; grid-template-columns: minmax(470px, 520px) minmax(0, 1fr); height: calc(100% - 88px); min-height: 0; }
.command-pane { border-right: 1px solid var(--line); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
.command-header { border-bottom: 1px solid var(--line); padding: 22px 28px 0; }
.pane-heading { align-items: end; display: flex; flex-wrap: wrap; justify-content: space-between; }
.pane-heading .eyebrow { flex-basis: 100%; margin-bottom: 6px; }
.pane-heading h1 { font: 700 24px/1.1 "Space Grotesk", "Microsoft YaHei", sans-serif; letter-spacing: 0; margin: 0; }
.pane-heading > p:last-child { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0 0 1px; }
.config-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.config-tab { align-items: center; background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--muted); display: flex; font-size: 12px; font-weight: 700; gap: 8px; justify-content: center; min-height: 44px; padding: 0 10px; }
.config-tab span { color: #94a2a8; font: 500 9px/1 "DM Mono", monospace; }
.config-tab:hover { color: var(--navy); }
.config-tab.is-active { border-bottom-color: var(--oracle); color: var(--ink); }
.config-tab.is-active span { color: var(--oracle); }
.config-tab:focus-visible { outline: 3px solid rgba(24, 60, 77, .2); outline-offset: -3px; }
.task-form { min-height: 0; }
.config-viewport { height: 100%; min-height: 0; overflow: hidden; }
.config-panel { height: 100%; overflow: auto; overscroll-behavior: contain; padding: 24px 28px 30px; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.config-panel[hidden] { display: none; }
fieldset { border: 0; display: grid; gap: 14px; margin: 0; padding: 0; }
fieldset:disabled { opacity: .58; }
legend { color: var(--navy); float: left; font: 700 14px/1 "Space Grotesk", sans-serif; margin-bottom: 4px; padding: 0; width: 100%; }
.panel-intro { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 0 0 4px; }
fieldset label:not(.switch-row) { color: #4b5d66; display: grid; font-size: 11px; font-weight: 600; gap: 7px; position: relative; }
input[type="password"], input[type="number"], label > input:not([type]), select, textarea { background: #fbfcfc; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--ink); min-width: 0; padding: 0 10px; transition: border-color .16s ease, box-shadow .16s ease; width: 100%; }
input[type="password"], input[type="number"], label > input:not([type]), select { height: 40px; }
textarea { line-height: 1.5; padding-bottom: 9px; padding-top: 9px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #8ca09b; }
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
  background: #edf1f0;
  border-color: #d2dcda;
  color: #75858c;
  cursor: not-allowed;
}
input:disabled:hover, select:disabled:hover, textarea:disabled:hover,
input[readonly]:hover, textarea[readonly]:hover { border-color: #d2dcda; }
label > small { color: var(--muted); font-size: 10px; font-weight: 500; }
/* Keep the unit clear of native number-field steppers and typed values. */
label:has(> .input-unit) > input[type="number"] { padding-right: 48px; }
.input-unit { bottom: 13px; color: var(--muted); font-size: 11px; pointer-events: none; position: absolute; right: 31px; }
.resource-status { color: var(--muted); font: 500 10px/1.55 "DM Mono", monospace; margin: -3px 0 0; }
.resource-status.loading { color: var(--amber); }
.resource-status.ready { color: var(--mint); }
.resource-status.error { color: var(--oracle-dark); }
.connection-actions { display: grid; gap: 8px; grid-template-columns: 1fr 1.35fr; }
.connection-actions .button { width: 100%; }
.field-pair { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec-grid { display: grid; gap: 9px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.storage-meter { background: #f7faf9; border: 1px solid #e0e9e6; border-radius: 4px; display: grid; gap: 8px; padding: 11px 12px; }
.storage-meter > div { align-items: center; display: flex; justify-content: space-between; }
.storage-meter b { font-size: 11px; }
.storage-meter strong { color: var(--mint); font: 600 10px/1 "DM Mono", monospace; }
.storage-meter > span { background: #dfe8e5; display: block; height: 5px; overflow: hidden; }
.storage-meter i { background: var(--amber); display: block; height: 100%; transition: width .25s ease; width: 0; }
.storage-meter small { color: var(--muted); font: 500 9px/1.4 "DM Mono", monospace; }
.ssh-key-panel { align-items: center; background: #f7faf9; border: 1px solid #e0e9e6; border-radius: 4px; display: grid; gap: 11px; grid-template-columns: minmax(0, 1fr) auto; padding: 11px 12px; }
.ssh-key-panel > div:first-child { display: grid; gap: 4px; min-width: 0; }
.ssh-key-panel b { font-size: 11px; }
.ssh-key-panel small { color: var(--muted); font: 500 9px/1.5 "DM Mono", monospace; overflow-wrap: anywhere; }
.ssh-key-actions { display: flex; gap: 7px; }
.ssh-key-actions .button { min-height: 34px; padding: 6px 9px; text-decoration: none; white-space: nowrap; }
.segmented-control { background: #edf2f1; border-radius: 4px; display: grid; gap: 3px; grid-template-columns: 1fr 1fr; padding: 3px; }
.segmented-control label { cursor: pointer; }
.segmented-control input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.segmented-control span { align-items: center; border: 1px solid transparent; border-radius: 3px; color: var(--muted); display: flex; font-size: 11px; font-weight: 700; height: 35px; justify-content: center; }
.segmented-control input:checked + span { background: var(--surface); border-color: var(--line-strong); color: var(--navy); box-shadow: 0 2px 5px rgba(23,38,49,.07); }
.segmented-control input:focus-visible + span { outline: 3px solid rgba(24,60,77,.2); outline-offset: 2px; }
.public-key-picker { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 3px; color: var(--navy); cursor: pointer; display: inline-flex; font-size: 10px; font-weight: 700; height: 34px; justify-content: center; padding: 0 10px; white-space: nowrap; }
.public-key-picker input { height: 1px; opacity: 0; position: absolute; width: 1px; }
[hidden] { display: none !important; }
.section-divider { align-items: center; color: var(--muted); display: flex; font-size: 10px; font-weight: 700; gap: 10px; margin-top: 4px; text-transform: uppercase; }
.section-divider::after { background: var(--line); content: ""; flex: 1; height: 1px; }
.ssh-public-key-field textarea { max-height: 74px; resize: none; }
.notification-heading { align-items: start; display: flex; gap: 16px; justify-content: space-between; }
.notification-heading legend { margin-bottom: 4px; }
.notification-heading .button { flex: 0 0 auto; min-height: 34px; padding: 6px 11px; }
.notification-list { display: grid; gap: 9px; }
.notification-channel { align-items: center; background: #f7faf9; border: 1px solid #e0e9e6; border-radius: 6px; display: grid; gap: 11px; grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 72px; padding: 11px 12px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.notification-channel:hover { border-color: #aac5bd; transform: translateY(-1px); }
.notification-channel.is-configured { border-color: #bdd5ce; }
.notification-channel.is-enabled { box-shadow: inset 3px 0 0 var(--mint); }
.channel-glyph { align-items: center; background: var(--navy); border-radius: 50%; color: #fff; display: inline-flex; font: 700 9px/1 "DM Mono", monospace; height: 30px; justify-content: center; letter-spacing: -.04em; width: 30px; }
.channel-copy { display: grid; gap: 5px; min-width: 0; }
.channel-copy b { font-size: 12px; }
.channel-copy small { color: var(--muted); font-size: 10px; font-weight: 500; }
.notification-channel.is-enabled .channel-copy small { color: var(--mint); }
.channel-controls { align-items: center; display: flex; flex: 0 0 auto; gap: 9px; }
.channel-controls .button { min-height: 32px; padding: 5px 9px; }
.channel-toggle { align-items: center; color: var(--muted); display: flex; font-size: 10px; font-weight: 700; gap: 6px; }
.channel-toggle input { accent-color: var(--mint); height: 18px; margin: 0; width: 18px; }
.notification-fields { border-top: 1px solid #e0e9e6; display: grid; gap: 13px; padding: 14px 13px 13px; }
.notification-actions { display: flex; justify-content: flex-end; }
.notification-actions .button { min-height: 34px; min-width: 90px; padding: 6px 10px; }
.field-note { color: var(--muted); font-size: 10px; line-height: 1.55; }
.field-note code { color: var(--navy); font: 500 9px/1 "DM Mono", monospace; }
.notification-empty { align-items: center; border: 1px dashed var(--line-strong); border-radius: 6px; color: var(--muted); display: flex; flex-direction: column; gap: 7px; padding: 30px 18px; text-align: center; }
.notification-empty b { color: var(--ink); font-size: 12px; }
.notification-empty small { font-size: 10px; line-height: 1.5; }
.empty-icon { align-items: center; background: var(--mint-soft); border-radius: 50%; color: var(--mint); display: inline-flex; font-size: 22px; height: 40px; justify-content: center; width: 40px; }
.notification-editor-dialog { background: var(--surface); border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: -18px 0 55px rgba(16,45,59,.18); color: var(--ink); height: 100dvh; margin: 0 0 0 auto; max-height: none; max-width: none; padding: 0; width: min(430px, 100vw); }
.notification-editor-dialog::backdrop { background: rgba(16,45,59,.28); }
.notification-editor-form { display: grid; grid-template-rows: auto 1fr auto; height: 100%; margin: 0; }
.editor-header { align-items: start; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 28px 28px 23px; }
.editor-header h2 { font: 700 22px/1.15 "Space Grotesk", "Microsoft YaHei", sans-serif; margin: 0; }
.editor-header p:last-child { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 8px 0 0; }
.editor-body { display: grid; align-content: start; gap: 17px; overflow: auto; padding: 24px 28px; }
.editor-body label { color: #4b5d66; display: grid; font-size: 11px; font-weight: 600; gap: 7px; }
.editor-channel-picker { background: #f3f7f5; border: 1px solid #e0e9e6; border-radius: 6px; padding: 12px; }
.editor-channel-fields { display: grid; gap: 14px; }
.editor-channel-fields[hidden] { display: none; }
.editor-enabled { align-items: center; background: var(--mint-soft); border: 1px solid #c6e1d8; border-radius: 6px; display: flex !important; gap: 10px !important; padding: 13px 14px; }
.editor-enabled input { accent-color: var(--mint); height: 18px; margin: 0; width: 18px; }
.editor-enabled span { display: grid; gap: 4px; }
.editor-enabled small { color: var(--muted); font-size: 10px; font-weight: 500; }
.notification-editor-dialog footer { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; padding: 16px 28px; }
.notification-editor-dialog footer .button { min-width: 112px; }
.stop-form { display: none; }
.task-actions { background: var(--surface); border-top: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: 92px minmax(0, 1fr); padding: 14px 28px; }
.task-actions .button { min-height: 42px; width: 100%; }
.log-pane { background: #f8fbfa; display: grid; grid-template-rows: 72px minmax(0, 1fr); min-height: 0; min-width: 0; }
.log-pane header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 0 28px; }
.log-pane h2 { color: var(--navy-deep); font: 700 20px/1 "Space Grotesk", "Microsoft YaHei", sans-serif; margin: 0; }
.log-pane .eyebrow { color: var(--mint); }
.log-pane .ghost { background: var(--surface); }
pre { color: #40545d; font-size: 12px; line-height: 1.85; margin: 0; min-height: 0; overflow: auto; padding: 26px 28px; white-space: pre-wrap; word-break: break-word; }
pre span { color: #91a09f; }
.toast { background: var(--navy-deep); border-left: 3px solid var(--mint); bottom: 24px; box-shadow: 0 12px 30px rgba(23,38,49,.2); color: #fff; font-size: 12px; opacity: 0; padding: 12px 16px; pointer-events: none; position: fixed; right: 24px; transform: translateY(8px); transition: opacity .18s, transform .18s; }
.toast.visible { opacity: 1; transform: translateY(0); }
.settings-dialog { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: 0 24px 70px rgba(16,45,59,.24); color: var(--ink); margin: auto; max-width: calc(100vw - 28px); padding: 0; width: 430px; }
.settings-dialog::backdrop { background: rgba(16,45,59,.42); }
.settings-dialog form { margin: 0; }
.settings-dialog header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 23px 24px 19px; }
.settings-dialog h2 { font: 700 20px/1.15 "Space Grotesk", "Microsoft YaHei", sans-serif; margin: 0; }
.dialog-close { align-items: center; background: transparent; border: 0; color: var(--muted); display: inline-flex; font-size: 25px; height: 34px; justify-content: center; padding: 0; width: 34px; }
.dialog-close:hover { color: var(--ink); }
.dialog-body { display: grid; gap: 15px; padding: 22px 24px; }
.dialog-body label { color: #4b5d66; display: grid; font-size: 11px; font-weight: 600; gap: 7px; }
.form-error { color: var(--oracle-dark); font-size: 11px; margin: 0; min-height: 16px; }
.settings-dialog footer { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; padding: 16px 24px; }
.credential-dialog { width: 560px; }
.pem-picker { background: #f7faf9; border: 1px dashed var(--line-strong); border-radius: 3px; display: grid; gap: 7px; padding: 12px; }
.pem-picker input { font-size: 11px; width: 100%; }
.credential-warning { background: #fff8ea; border-left: 3px solid var(--amber); color: #76511d; font-size: 11px; line-height: 1.55; margin: 0; padding: 9px 11px; }
.alert { background: #fff3f1; border-left: 3px solid var(--oracle); color: #9e342b; font-size: 12px; margin-top: 22px; padding: 11px 13px; }
.login-shell { background: var(--canvas); display: grid; grid-template-columns: minmax(320px, 490px) 300px; min-height: 100vh; place-content: center; }
.login-panel { background: var(--surface); border: 1px solid var(--line); padding: 44px; }
.login-copy { margin-top: 72px; }
.login-copy h1 { font: 700 31px/1.12 "Space Grotesk", "Microsoft YaHei", sans-serif; margin: 0; }
.login-copy > p:last-child { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 13px 0 0; }
.login-form { display: grid; gap: 9px; margin-top: 32px; }
.login-form label { color: #4b5d66; font-size: 11px; font-weight: 600; }
.login-form .button { margin-top: 7px; min-height: 44px; }
.login-signal { background: var(--navy-deep); color: #fff; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 34px 30px; position: relative; }
.login-signal::after { border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; height: 240px; position: absolute; right: -114px; top: 72px; width: 240px; }
.login-index { color: #9ec4bb; font: 500 10px/1 "DM Mono", monospace; letter-spacing: .12em; }
.capacity-grid { display: grid; gap: 7px; grid-template-columns: repeat(3, 1fr); margin: auto 0; transform: rotate(-8deg); }
.capacity-grid i { background: rgba(99, 178, 156, .25); display: block; height: 37px; }
.capacity-grid i:nth-child(2), .capacity-grid i:nth-child(4), .capacity-grid i:nth-child(8) { background: var(--mint); }
.login-signal strong { font: 700 29px/1.05 "Space Grotesk", sans-serif; letter-spacing: .02em; position: relative; z-index: 1; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(63,128,111,.14); } }
@media (prefers-reduced-motion: reduce) { .status-dot.running { animation: none; } .button, .toast { transition: none; } }
@media (max-width: 980px) {
  .mission-bar { grid-template-columns: 200px minmax(300px, 1fr); }
  .status-data { border-top: 1px solid var(--line); grid-column: 1 / -1; margin-top: 14px; padding-top: 14px; }
  .page-shell { min-height: 700px; }
  .workbench { grid-template-columns: minmax(390px, 44%) minmax(0, 1fr); height: calc(100% - 123px); }
  .command-header { padding-left: 22px; padding-right: 22px; }
  .config-panel { padding-left: 22px; padding-right: 22px; }
  .task-actions { padding-left: 22px; padding-right: 22px; }
  .pane-heading > p:last-child { display: none; }
}
@media (max-width: 760px) {
  .page-shell { height: auto; min-height: 0; }
  .topbar-context { display: none; }
  .mission-bar { align-items: start; grid-template-columns: 1fr; gap: 18px; }
  .task-track { padding: 0; }
  .task-track li { font-size: 10px; }
  .task-track li span { height: 19px; width: 19px; }
  .workbench { grid-template-columns: 1fr; height: auto; }
  .command-pane { border-bottom: 1px solid var(--line); border-right: 0; }
  .task-form { height: min(620px, 70dvh); }
  .log-pane { min-height: 480px; }
}
@media (max-width: 560px) {
  .topbar { height: 60px; padding: 0 14px; }
  .topbar .ghost { min-height: 34px; padding: 7px 10px; }
  .page-shell { padding: 14px 12px 28px; }
  .mission-bar { padding: 17px 16px; }
  .task-track { gap: 6px; }
  .task-track li { align-items: flex-start; flex-direction: column; gap: 5px; white-space: normal; }
  .task-track li:not(:last-child)::after { left: 25px; right: 2px; top: 9px; }
  .status-data { gap: 18px; }
  .command-header { padding: 20px 18px 0; }
  .config-panel { padding: 22px 18px 26px; }
  .task-actions { grid-template-columns: 78px minmax(0, 1fr); padding: 12px 18px; }
  .log-pane header { padding: 0 18px; }
  pre { padding: 20px 18px; }
  .login-shell { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .login-panel { padding: 30px 23px; }
  .login-signal { display: none; }
  .login-copy { margin-top: 54px; }
  .ssh-key-panel { grid-template-columns: 1fr; }
  .ssh-key-actions .button { flex: 1; }
  .field-pair { grid-template-columns: 1fr; }
}