@font-face {
  font-family: Manrope;
  src: url("/assets/manrope.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --foedrium-ink: #10212b;
  --foedrium-teal: #1b9cb8;
  --foedrium-white: #fff;
  --foedrium-interface-light: #f4f7f8;
  --bg: #161616;
  --surface: #202020;
  --surface-soft: #292929;
  --line: rgba(255, 255, 255, .1);
  --text: #e6e6e6;
  --muted: #adadad;
  --accent: #80beff;
  --accent-text: #80beff;
  --danger: #ff9999;
  --danger-surface: #392526;
  --control: #e6e6e6;
  --control-text: #161616;
  --input: #2b2b2b;
  --radius: 12px;
  --radius-small: 8px;
  --ui-font-size: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Manrope, sans-serif;
  font-synthesis: none;
  font-size: var(--ui-font-size);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

:root[data-font-size="16"] { --ui-font-size: 16px; }
:root[data-theme="light"], :root[data-theme="system"] {
  color-scheme: light;
  --bg: #f8f8f8; --surface: #fff; --surface-soft: #f0f0f0;
  --line: rgba(13, 13, 13, .1); --text: #0d0d0d; --muted: #5c5c5c;
  --accent: #0066dd; --accent-text: #0066dd;
  --danger: #9d3540; --danger-surface: #fff3f3;
  --control: #0d0d0d; --control-text: #fff; --input: #fff;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #161616; --surface: #202020; --surface-soft: #292929;
    --line: rgba(255, 255, 255, .1); --text: #e6e6e6; --muted: #adadad;
    --accent: #80beff; --accent-text: #80beff;
    --danger: #ff9999; --danger-surface: #392526;
    --control: #e6e6e6; --control-text: #161616; --input: #2b2b2b;
  }
}

.operation-toast {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(440px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 18px;
  box-shadow: 0 4px 20px #10212b14;
  backdrop-filter: blur(12px);
  animation: toast-appear 180ms ease-out;
  box-sizing: border-box;
}
.operation-toast[hidden] { display: none; }
.operation-toast p { margin: 0; flex: 1; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.operation-toast button { flex: 0 0 36px; min-height: 36px; padding: 4px; background: transparent; color: var(--muted); border: 0; }
.operation-toast button:hover, .operation-toast button:focus-visible { background: var(--line); color: var(--text); }
@keyframes toast-appear { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
.action-dialog, .action-dialog.model-confirmation {
  position: fixed; inset: 0; margin: auto; width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px - env(safe-area-inset-bottom, 0px));
  overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 24px;
  background: var(--surface); color: var(--text); box-shadow: 0 16px 64px #10212b26;
}
.action-dialog:not([open]), .action-dialog[hidden] { display: none; }
.action-dialog[open] { display: grid; gap: 12px; }
.action-dialog::backdrop { background: #10212b66; backdrop-filter: blur(3px); }
.action-dialog h2 { margin: 0; font-size: 21px; line-height: 1.3; }
.action-dialog p { margin: 0 0 8px; color: var(--muted); line-height: 1.55; }
.action-dialog button { width: 100%; min-height: 48px; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .operation-toast { animation: none; } }

* { box-sizing: border-box; }

.enrollment-wizard { margin-top: var(--space-5); }
.enrollment-wizard h3 { margin-top: var(--space-5); }
.enrollment-notice, .enrollment-message {
  padding: var(--space-4);
  border-radius: var(--radius-small);
  background: var(--surface-soft);
  border-left: 3px solid var(--accent);
  overflow-wrap: anywhere;
}
.enrollment-message { border-color: var(--accent-text); }
.enrollment-wizard label { display: block; margin-top: var(--space-4); }
.enrollment-help { margin: var(--space-5) 0; }
.enrollment-help summary { min-height: 44px; cursor: pointer; font-weight: 650; color: var(--accent-text); }
.enrollment-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.enrollment-file-name { overflow-wrap: anywhere; }
.enrollment-digest { display: block; overflow-wrap: anywhere; word-break: break-word; font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.65; }
.enrollment-evidence { margin: var(--space-5) 0; }
.enrollment-evidence > div { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.enrollment-evidence dt { color: var(--muted); font-size: 13px; margin-bottom: var(--space-1); }
.enrollment-evidence dd { margin: 0; overflow-wrap: anywhere; }
.enrollment-bottom { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
#enrollment-start { margin-top: var(--space-4); }

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
}
body:has(.organization-sheet[open]) { overflow: hidden; }

button, input, select { font: inherit; }
button, select, input { min-height: 48px; border-radius: var(--radius-small); }

button {
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 1px solid var(--control);
  padding: 11px 18px;
  background: var(--control);
  color: var(--control-text);
  font-size: var(--ui-font-size);
  font-weight: 650;
  line-height: 1.45;
  cursor: pointer;
  min-width: 0;
  overflow-wrap: anywhere;
  touch-action: manipulation;
  transition: background-color 160ms ease, border-color 160ms ease;
}

button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: wait; }

button.secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

input, select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  padding: 10px 13px;
  background: var(--input);
  color: var(--text);
  font-size: max(16px, var(--ui-font-size));
  line-height: 1.5;
}

input::placeholder { color: var(--muted); opacity: .7; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.shell {
  width: min(800px, 100%);
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.product-header { padding: var(--space-2) 0 var(--space-4); }

.product-brand {
  /* The approved 2800px canvas has artwork at x=108..1922. A 2030px
     viewport keeps equal 108px clear space without changing the original. */
  width: min(308px, 70%);
  aspect-ratio: 2030 / 760;
  margin: 0 auto var(--space-3);
  overflow: hidden;
}

.product-logo {
  display: block;
  width: calc(100% * 2800 / 2030);
  max-width: none;
  height: auto;
}

.product-heading { border-top: 1px solid var(--line); padding-top: var(--space-4); }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; line-height: 1.3; overflow-wrap: anywhere; }

h1 {
  margin-bottom: var(--space-2);
  font-size: clamp(28px, 5.5vw, 32px);
  font-weight: 750;
  letter-spacing: -0.045em;
}

h2 {
  margin-bottom: var(--space-3);
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.03em;
}

h3 {
  margin-bottom: var(--space-2);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

p { margin-bottom: var(--space-4); }
.subtitle, .muted, .field-hint { color: var(--muted); }
.subtitle { margin-bottom: 0; font-size: 15px; }

.eyebrow {
  margin-bottom: var(--space-2);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card {
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}

.card > :last-child { margin-bottom: 0; }

.status-card, .workspace-heading, .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.status-card > div, .section-heading > * { min-width: 0; }
.section-heading { flex-wrap: wrap; }

.status-card {
  justify-content: flex-start;
  padding: 17px 22px;
  background: var(--surface-soft);
  box-shadow: none;
}

.status-card h2, .status-card p, .workspace-heading h2 { margin-bottom: 0; }
.status-card h2 { font-size: 15px; letter-spacing: 0; }

.status-card p {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin-right: var(--space-1);
  border-radius: 50%;
  background: var(--accent-text);
  box-shadow: 0 0 0 5px rgba(27, 156, 184, 0.10);
}

.status-dot.pending { animation: pulse 1.35s ease-in-out infinite; }
.hidden, [hidden] { display: none !important; }
form { display: grid; gap: var(--space-3); }
label { font-size: 14px; font-weight: 650; }
.field-hint { margin: -4px 0 0; font-size: 14px; }

.enrollment-grid {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);
  margin: var(--space-5) 0 var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.qr-card {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: #fff;
  text-align: center;
}

#provisioning-qr {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  image-rendering: pixelated;
}

.qr-card figcaption {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.step-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.step-label span {
  display: grid;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--surface-soft);
  place-items: center;
  letter-spacing: 0;
}

.enrollment-instructions .muted { font-size: 15px; }
.manual-setup { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.manual-title { margin-bottom: var(--space-1); font-size: 15px; font-weight: 700; }

.setup-secret {
  display: block;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  user-select: all;
}

.copy-button { width: 100%; margin-top: var(--space-2); }
.copy-status { margin-top: var(--space-2); }
.copy-status:empty { display: none; }
.verification-form { max-width: 380px; }

#totp-code {
  min-height: 58px;
  font-family: Manrope, sans-serif;
  font-size: 26px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.32em;
  text-align: center;
}

.inline-error {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--danger);
  border-radius: 4px;
  background: var(--danger-surface);
  color: var(--danger);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.code-block, .recovery-codes {
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: var(--space-4);
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: var(--space-5) 0;
  list-style: none;
}

.workspace-heading { display: block; }
.organization-current { min-width: 0; }
.organization-name, #organization-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  text-wrap: wrap;
  overflow-wrap: anywhere;
  white-space: normal;
}
.organization-role {
  display: block;
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.organization-picker-trigger {
  width: 100%;
  justify-content: space-between;
  border: 1px solid var(--line);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
}
.organization-picker-copy, .organization-option-copy { min-width: 0; flex: 1; }
.select-picker-trigger { display: flex; align-items: center; gap: 12px; }
.select-picker-trigger .organization-picker-copy, .select-picker .organization-option-copy { overflow-wrap: anywhere; }
.select-picker-empty { padding: 16px 20px; color: var(--muted); }
.organization-chevron { flex: 0 0 auto; color: var(--accent-text); font-size: 22px; }
.organization-sheet {
  width: min(480px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
}
.organization-sheet:not([open]) { display: none; }
.organization-sheet[open] { display: flex; flex-direction: column; }
.organization-sheet::backdrop { background: rgba(16, 33, 43, 0.42); }
.sheet-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5);
}
.sheet-heading h2 { margin: 0; min-width: 0; font-size: 20px; }
.sheet-close { flex: 0 0 auto; padding: 8px 12px; font-size: 14px; }
#organization-search-field { padding: 0 var(--space-5) var(--space-4); }
#organization-search-field label { display: block; margin-bottom: var(--space-2); }
.organization-options {
  min-height: 0;
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.organization-options li + li { border-top: 1px solid var(--line); }
.organization-option {
  width: 100%;
  min-height: 72px;
  justify-content: space-between;
  padding: var(--space-3);
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text);
  text-align: left;
}
.organization-option[aria-pressed="true"] {
  background: var(--surface-soft);
  border-color: var(--line);
}
.organization-check { width: 24px; flex: 0 0 24px; color: var(--accent-text); text-align: center; font-size: 20px; }
#organization-search-empty { margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); color: var(--muted); }
.workspace-error { margin-bottom: var(--space-4); }
.workspace-error p { margin-bottom: var(--space-3); }
.stacked-form { max-width: 460px; }
.stacked-form label:not(:first-child) { margin-top: var(--space-2); }

.dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.metric-card { margin-bottom: 0; }

.metric {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 40px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.metric-card .muted { font-size: 14px; }
.span-full { grid-column: 1 / -1; margin-bottom: 0; }
.section-heading { margin-bottom: var(--space-4); }
.section-heading h2 { margin-bottom: 0; }
.item-list { display: grid; gap: var(--space-2); overflow-wrap: anywhere; }
.item { padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item strong, .item small { display: block; }
.item strong { font-size: 16px; font-weight: 650; }
.item small { margin-top: var(--space-1); color: var(--muted); font-size: 14px; line-height: 1.5; }

.empty-state {
  padding: var(--space-5) 0;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

.danger { border-color: #edbdc5; background: var(--danger-surface); }
.danger h2, .danger .eyebrow { color: var(--danger); }
#fatal-message { overflow-wrap: anywhere; }

.product-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-4) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.agency-logo { display: block; width: 196px; max-width: 70%; height: auto; }
.product-footer p {
  max-width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.product-footer .product-signature { font-size: 14px; font-weight: 600; }

@keyframes pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@media (hover: hover) {
  button:hover:not(:disabled) { border-color: #23414f; background: #23414f; color: var(--foedrium-white); }
  button.secondary:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-soft); color: var(--text); }
  .organization-picker-trigger:hover:not(:disabled), .organization-option:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--surface-soft);
    color: var(--text);
  }
}

@media (max-width: 640px) {
  .shell {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }
  .product-header { padding-top: 0; padding-bottom: var(--space-4); }
  .card { padding: var(--space-4); }
  .status-card { padding: var(--space-4); }
  .enrollment-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .qr-card { width: 256px; max-width: 100%; justify-self: center; }
  .verification-form { max-width: none; }
  .recovery-codes { grid-template-columns: 1fr; }
  .section-heading h2 { font-size: 19px; }
  .metric { font-size: 32px; }
  .organization-sheet {
    width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .sheet-heading { padding-left: var(--space-4); }
  #organization-search-field { padding-left: var(--space-4); padding-right: var(--space-4); }
}

@media (max-width: 359px) {
  .dashboard { grid-template-columns: 1fr; }
  .span-full { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot.pending { animation: none; }
  button { transition: none; }
}

.connection-card h2 { margin-top: .25rem; }
.connection-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; padding: 0; list-style: none; counter-reset: connection; }
.connection-steps li { counter-increment: connection; padding: .875rem; border: 1px solid var(--line); border-radius: .875rem; }
.connection-steps li::before { content: counter(connection, decimal-leading-zero); display: block; opacity: .65; font-size: .875rem; margin-bottom: .5rem; }
.connection-steps strong, .connection-steps span { display: block; }
.connection-steps span { font-size: .875rem; margin-top: .35rem; opacity: .8; }
.connection-card details, .activation-panel details { margin-top: 1rem; }
.connection-card summary, .activation-panel summary { cursor: pointer; padding: .5rem 0; font-weight: 600; }
.activation-panel { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1.5rem; }
.activation-panel h4 { font-size: 1rem; margin-bottom: .5rem; }
.activation-panel code, .activation-hashes dd { overflow-wrap: anywhere; }
.activation-hashes { font-size: .875rem; }
.activation-hashes dt { margin-top: .75rem; opacity: .75; }
.activation-hashes dd { margin: .25rem 0 0; font-family: ui-monospace, monospace; line-height: 1.5; }
#activation-upload { margin: 1rem 0; }
#activation-upload label { display: block; margin-bottom: .5rem; }
#activation-reset { margin-top: 1rem; }
@media (max-width: 600px) { .connection-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.device-key-item { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-small); min-width: 0; }
.device-key-item > strong { display: block; font-size: 18px; overflow-wrap: anywhere; margin-bottom: 8px; }
.device-key-item p { margin-bottom: 12px; }
.key-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.key-actions > button { flex: 1 1 180px; }
.key-details { margin-top: 16px; }
.key-details summary, .key-add > summary { cursor: pointer; min-height: 48px; padding: 12px 0; font-weight: 650; }
.key-details > p, .key-details > input { margin-top: 8px; }
.key-details .key-actions { margin-top: 12px; }
.key-add { margin-top: 20px; border-top: 1px solid var(--line); }
.key-add-body { padding: 8px 0; }
.key-add-body > button { width: 100%; margin-bottom: 12px; }
.key-operation { background: var(--surface-soft); padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-small); margin: 20px 0; scroll-margin-top: 16px; }
.key-operation h3 { font-size: 18px; margin-bottom: 12px; }
.key-step { border-top: 1px solid var(--line); padding: 16px 0; }
.key-step h4 { margin: 0 0 12px; font-size: 16px; }
.key-step label { display: block; margin-bottom: 8px; }
.key-step .field-hint, #device-keys-panel > .field-hint { margin-bottom: 16px; }
.key-step > button { width: 100%; }
#device-handoff-code { max-width: 320px; font-variant-numeric: tabular-nums; letter-spacing: .2em; font-size: 20px; margin-bottom: 12px; }
#device-keys-message { overflow-wrap: anywhere; }
.key-actions > .key-revoke { color: var(--danger); border-color: var(--line); }
@media (max-width: 480px) {
  #workspace > .workspace-nav svg { display: none; }
  #workspace > .workspace-nav button { white-space: nowrap; }
  .device-key-item, .key-operation { padding: 16px; }
  .key-actions { flex-direction: column; }
  .key-actions > button { flex: auto; width: 100%; }
  #device-keys-panel > .section-heading { align-items: flex-start; flex-direction: column; }
}
#device-key-name { width: 100%; margin: 8px 0 12px; }
.workspace-nav { display: flex; gap: 8px; margin-bottom: 16px; }
.workspace-nav button { flex: 1; }
.workspace-nav button[aria-pressed="true"] { color: var(--surface); background: var(--foedrium-ink); border-color: var(--foedrium-ink); }
.workspace-nav button[aria-pressed="true"]:is(:hover, :focus, :active) {
  color: var(--foedrium-white); background: var(--foedrium-ink); border-color: var(--foedrium-ink);
}
button.secondary:active:not(:disabled) { color: var(--text); background: var(--surface-soft); }
.workspace-nav button.secondary[aria-pressed="true"]:active:not(:disabled) {
  color: var(--foedrium-white); background: var(--foedrium-ink);
}
#provisioning-panel details { margin-top: 12px; }
#provisioning-panel summary { padding: 10px 0; cursor: pointer; }
#provisioning-panel .item p { white-space: pre-line; overflow-wrap: anywhere; }
#provisioning-panel .item button { margin: 4px 6px 4px 0; }
.certificate-choices { margin: 0; padding: 12px; border: 1px solid var(--line, #d5dde0); border-radius: 12px; min-width: 0; }
.certificate-choices legend { padding: 0 6px; font-weight: 600; }
.certificate-choice { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.certificate-choice input[type=checkbox] { flex: 0 0 22px; width: 22px; height: 22px; min-height: 22px; margin: 0; accent-color: #10212b; }
.certificate-choice span { overflow-wrap: anywhere; min-width: 0; }
#workspace[data-view="account"] > #dashboard,
#workspace[data-view="account"] > #organization-heading,
#workspace[data-view="account"] > #empty-organization,
#workspace[data-view="account"] > #enrollment-wizard { display: none !important; }
.settings-group > summary { min-height: 48px; padding: 12px 0; font-weight: 650; cursor: pointer; }
.settings-value { float: right; font-size: 14px; color: var(--muted); margin-left: 12px; }
.settings-group > .field-hint { margin: 12px 0; }
/* Permission lists remain readable in narrow Telegram WebViews. */
.access-list { display: grid; gap: 8px; margin: 12px 0; }
.access-row { width: 100%; text-align: left; overflow-wrap: anywhere; }
#platform-access-panel > summary { font-weight: 650; cursor: pointer; }
#platform-access-form { display: grid; gap: 10px; margin: 16px 0; }
.instance-access { margin-top: 12px; border-top: 1px solid var(--line); min-width: 0; }
.instance-access summary { cursor: pointer; padding: 12px 0; min-height: 44px; font-weight: 650; }
.instance-access-warning { margin: 4px 0 12px; }
.instance-access-form, .instance-access-preview { display: grid; gap: 10px; margin: 12px 0; }
.instance-access-preview[hidden] { display: none; }
.instance-access label { display: grid; gap: 6px; font-size: 14px; }
.instance-access input, .instance-access select { width: 100%; min-width: 0; min-height: 44px; font: inherit; font-size: 16px; }
.instance-access select { padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface); }
.instance-access-actions { display: grid; gap: 8px; }
.instance-access button { white-space: normal; overflow-wrap: anywhere; min-height: 44px; }
.instance-access-preview p { overflow-wrap: anywhere; margin: 0; }
.instance-model { margin-top: 12px; border-top: 1px solid var(--line); min-width: 0; }
.instance-model summary { cursor: pointer; padding: 12px 0; min-height: 44px; font-weight: 650; }
.instance-model p { overflow-wrap: anywhere; font-size: 14px; }
.instance-model > button { margin: 4px 6px 4px 0; }
.model-choices, .model-confirmation { display: grid; gap: 8px; margin: 12px 0; }
.model-choices[hidden], .model-confirmation[hidden] { display: none; }
.instance-model button { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.model-choice { text-align: left; width: 100%; }
.model-choice[aria-pressed="true"] { border-color: var(--foedrium-ink); font-weight: 700; }

/* Mobile application shell: independent screens, thumb navigation, grouped rows. */
#requests-unavailable { display: none; }
#workspace[data-view="instances"] #provisioning-panel,
#workspace[data-view="instances"] .connection-card,
#workspace[data-view="requests"] #dashboard > :not(#provisioning-panel):not(.connection-card),
#workspace[data-view="requests"] > #enrollment-wizard { display: none !important; }
#workspace[data-view="requests"] #dashboard:has(#provisioning-panel.hidden) > #requests-unavailable { display: block !important; }
.shell:has(#workspace:not(.hidden)) {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Manrope, sans-serif;
}
.shell:has(#workspace:not(.hidden)) .product-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: sticky; top: 0; z-index: 10; background: var(--bg);
  padding: 10px 0; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.shell:has(#workspace:not(.hidden)) .product-brand { width: 100px; flex: 0 0 100px; margin: 0; }
.shell:has(#workspace:not(.hidden)) .product-heading { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 1; border: 0; padding: 0; min-width: 0; }
.shell:has(#workspace:not(.hidden)) .product-heading h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; margin: 0; letter-spacing: -.02em; }
#workbench-return-button { flex: none; width: auto; min-height: 44px; margin: 0; padding: 8px 10px; font-size: 13px; }
.workspace-nav {
  position: static; width: 100%; margin: 0 0 12px; gap: 4px; padding: 4px;
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px;
}
.workspace-nav button { flex-direction: row; gap: 6px; min-height: 44px; padding: 8px 4px; font-size: 13px; border: 0; border-radius: 8px; transition: none; }
.workspace-nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#workspace .workspace-heading { padding: 12px 16px; margin-bottom: 16px; }
.organization-current { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; }
.organization-current .eyebrow { grid-column: 1 / -1; margin: 0; font-size: 11px; }
.organization-current h2 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.organization-current .organization-role { margin: 0; font-size: 12px; }
.dashboard { gap: 12px; }
#workspace[data-view="instance"] #dashboard > :not(#instance-panel),
#workspace[data-view="instance"] > .workspace-nav,
#workspace[data-view="instance"] > #organization-heading,
#workspace[data-view="instance"] > #enrollment-wizard { display: none !important; }
#instance-panel { min-width: 0; }
#instance-title { margin: 20px 0 6px; overflow-wrap: anywhere; }
#instance-subtitle { overflow-wrap: anywhere; }
#instance-content .instance-section > details { border-top: 1px solid var(--line); padding: 12px 0; }
.instance-nav button { min-width: 0; overflow-wrap: anywhere; }
.instance-section { min-width: 0; }
.settings-values { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px 12px; font-size: 14px; }
.settings-values dt { color: var(--muted); }
.settings-values dd { margin: 0; overflow-wrap: anywhere; }
.settings-metadata { margin-top: 12px; }
.settings-preview { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#instance-content summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 600; }
#instance-content p { overflow-wrap: anywhere; }
.instance-open { width: 100%; margin-top: 8px; }
.workbench-open { width: 100%; min-height: 48px; margin: 8px 0 4px; text-align: center; }
.workbench-open[hidden] { display: none; }
.instance-nav { margin: 12px 0; }
.instance-nav button { font-size: 12px; }
.instance-brief { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.dashboard .metric-card { padding: 12px 16px; }
.dashboard .metric { font-size: 24px; }
.dashboard .metric-card .eyebrow { font-size: 11px; margin-bottom: 4px; }
.dashboard .metric-card .muted { font-size: 12px; margin-bottom: 0; }
.dashboard .card { margin-bottom: 0; }
.connect-action { width: 100%; margin-top: 12px; color: var(--accent-text); }
#node-list .empty-state { padding: 24px 8px; }
.section-heading { gap: 10px; }
.section-heading > button { flex: 0 0 auto; min-height: 44px; font-size: 13px; padding: 8px 12px; }
.compose-sheet { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); overflow: hidden; }
#provisioning-panel .compose-sheet > summary { min-height: 48px; padding: 14px 16px; font-weight: 600; color: var(--accent-text); }
.compose-sheet .stacked-form { max-width: none; padding: 0 16px 16px; background: var(--surface); }
.compose-sheet[open] > summary { margin-bottom: 12px; }
.compose-sheet .stacked-form > button[type="submit"] { width: 100%; margin-top: 12px; }
#provisioning-message:empty { display: none; }
#provisioning-message:not(:empty) { padding: 10px 12px; border-radius: 10px; background: var(--surface-soft); font-size: 14px; }
#provisioning-panel .request-card { margin: 0; padding: 0; border-top: 1px solid var(--line); }
#provisioning-panel .request-card:first-child { border-top: 0; }
#provisioning-panel .request-preview { display: flex; align-items: center; gap: 12px; min-height: 80px; padding: 12px 0; list-style: none; }
.request-preview::-webkit-details-marker { display: none; }
.instance-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 15px; background: var(--surface-soft); color: var(--accent-text); font-size: 20px; font-weight: 650; }
.request-preview-copy { flex: 1; min-width: 0; }
.request-preview-copy strong { font-size: 16px; overflow-wrap: anywhere; }
.request-status { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.request-chevron { font-size: 24px; color: var(--muted); }
.request-card[open] .request-chevron { transform: rotate(90deg); }
.request-metadata { font-size: 13px; line-height: 1.6; padding: 12px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); }
#provisioning-panel .request-help, #provisioning-directory { border-top: 1px solid var(--line); padding-top: 8px; font-size: 14px; }
.request-inbox { margin-top: 12px; }
.node-facts > summary { min-height: 44px; padding: 10px 0; font-size: 14px; cursor: pointer; color: var(--muted); }
#account-settings .card { margin-bottom: 12px; }
#account-settings details > summary { min-height: 48px; }
#account-settings h2 { font-size: 18px; }
#account-settings .field-hint { font-size: 13px; }
.device-key-item { padding: 0 14px; }
.device-key-heading { padding: 12px 0; cursor: pointer; }
.device-key-heading strong { font-size: 16px; overflow-wrap: anywhere; }
.device-key-heading .field-hint { margin: 2px 0 0; }
.device-key-item[open] { padding-bottom: 14px; }
.shell:has(#workspace:not(.hidden)) .product-footer { margin-top: 24px; gap: 4px; padding: 12px 0; }
.shell:has(#workspace:not(.hidden)) .agency-logo { width: 120px; }
.shell:has(#workspace:not(.hidden)) .product-footer p { font-size: 11px; }
:is(input, button, select, summary, [tabindex]) { scroll-margin-top: 90px; scroll-margin-bottom: 100px; }
@media (max-width: 480px) {
  .shell { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-top: max(8px, env(safe-area-inset-top)); }
  #workspace .card { border-radius: 14px; }
  .organization-current { grid-template-columns: 1fr; }
  .organization-current .organization-role { font-size: 11px; }
  #device-keys-panel > .section-heading { flex-direction: row; align-items: center; }
}
.trust-option { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; }
.trust-option input[type="checkbox"] { width:20px; height:20px; flex:0 0 20px; margin-top:2px; padding:0; }
.totp-settings-qr { display:block; max-width:100%; height:auto; margin:12px auto; }
.totp-settings-dialog .setup-secret { display:block; overflow-wrap:anywhere; margin:12px 0; }
.totp-settings-dialog [hidden] { display:none; }
.login-policy-dialog .setup-secret, .login-policy-dialog pre { display:block; white-space:pre-wrap; overflow-wrap:anywhere; margin:12px 0; }
.login-policy-dialog [hidden] { display:none; }
.login-policy-dialog .trust-option { margin:16px 0; }
.login-policy-dialog .key-actions { margin-top:16px; }
#login-policy-options:not(.hidden) { display:grid; gap:10px; margin:16px 0; }

/* Compact service shell shares Workbench appearance, not its permissions. */
.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; }
.product-wordmark { font-size: 13px; font-weight: 750; letter-spacing: .07em; color: var(--text); }
.product-brand { width: auto; aspect-ratio: auto; margin: 0 0 12px; }
.product-heading { padding-top: 12px; }
.product-header h1 { font-size: 20px; }
.account-menu { display: none; width: 44px; flex: 0 0 44px; padding: 10px; }
.instance-back { display: none; width: 44px; flex: 0 0 44px; min-height: 44px; padding: 8px; border: 0 !important; background: transparent !important; color: var(--text); font-size: 20px; }
.shell:has(#workspace[data-view="instance"]:not(.hidden)) .instance-back { display: inline-flex; }
#workbench-return-button { width: 44px; min-height: 44px; padding: 8px; font-size: 20px; margin-left: auto; border: 0; background: transparent; color: var(--text); }
.account-menu svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.navigation-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 10px 22px; }
.navigation-heading button { display: none; min-height: 44px; width: 44px; font-size: 24px; padding: 0; border: 0; background: transparent; }
.navigation-heading #account-menu-close { flex: 0 0 44px; }
#workspace > .account-navigation,
#workspace[data-view="instance"] > .account-navigation {
  position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex !important;
  flex-direction: column; width: 212px; height: 100dvh; gap: 4px; margin: 0;
  padding: max(24px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom));
  border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--bg);
}
#workspace > .account-navigation button:not(#account-menu-close) {
  flex: 0 0 auto; min-height: 44px; padding: 10px 12px; justify-content: flex-start;
  gap: 10px; font-size: var(--ui-font-size); background: transparent; color: var(--muted); white-space: normal;
}
#workspace > .account-navigation svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
#workspace > .account-navigation #workspace-account { margin-top: auto; }
#workspace > .account-navigation button:not(#account-menu-close)[aria-pressed="true"],
.instance-nav button[aria-pressed="true"]:is(:hover, :focus, :active),
.instance-nav button[aria-pressed="true"] { background: var(--surface-soft); color: var(--text); border-color: var(--line); }
#workspace > .account-navigation button:not(#account-menu-close):hover:not(:disabled) { background: var(--surface-soft); color: var(--text); }
.navigation-note { margin: 0; padding: 0 12px; color: var(--muted); font-size: 11px; }
.account-menu-backdrop { display: none; }
.shell:has(#workspace:not(.hidden)) {
  width: min(980px, calc(100% - 212px)); margin: 0 auto 0 212px;
  padding: max(12px, env(safe-area-inset-top)) 28px max(24px, env(safe-area-inset-bottom));
}
.shell:has(#workspace:not(.hidden)) .product-header { min-height: 52px; padding: 4px 0 12px; margin-bottom: 20px; }
.shell:has(#workspace:not(.hidden)) .product-brand { display: none; }
.shell:has(#workspace:not(.hidden)) .product-heading { justify-content: flex-start; }
.shell:has(#workspace:not(.hidden)) .product-heading h1 { font-size: 18px; font-weight: 650; }
.card { padding: 20px; box-shadow: none; }
h2 { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
h3 { font-size: 16px; font-weight: 650; }
p { line-height: 1.6; }
button, input, select { min-height: 44px; }
.section-heading { margin-bottom: 12px; }
.section-heading > button { background: transparent; border-color: transparent; color: var(--muted); }
.qr-card figcaption { color: #5c5c5c; }
.manual-setup > summary { min-height: 44px; padding: 8px 0; cursor: pointer; font-weight: 600; }
.danger { border-color: var(--line); }
.dashboard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fleet-panel { padding: 16px 20px; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 1px 6px; margin-left: 5px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 500; vertical-align: middle; }
.fleet-status { margin: 0 0 8px; font-size: 12px; }
#node-list { gap: 0; }
#node-list .instance-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 0 12px; align-items: center; padding: 16px 0; }
.instance-row > .instance-avatar { grid-column: 1; grid-row: 1 / 3; border-radius: 12px; }
.instance-row > strong { grid-column: 2; grid-row: 1; font-size: var(--ui-font-size); font-weight: 600; }
.instance-row > .instance-brief { grid-column: 2; grid-row: 2; margin: 3px 0 0; font-size: 12px; line-height: 1.5; }
.instance-row > .node-facts { grid-column: 2 / -1; grid-row: 3; }
.instance-row .node-facts > summary { min-height: 32px; padding: 7px 0 0; font-size: 11px; }
.instance-row .node-facts[open] { margin-top: 4px; }
.instance-row .node-facts[open] > :not(summary) { margin: 8px 0; font-size: 12px; }
.instance-row > .workbench-open { grid-column: 3; grid-row: 1 / 3; width: auto; min-height: 44px; padding: 8px 14px; margin: 0; }
.instance-row > .instance-open { grid-column: 4; grid-row: 1 / 3; width: auto; min-height: 44px; padding: 8px 10px; margin: 0; color: var(--muted); background: transparent; border: 0; font-size: 12px; }
.connect-action { background: transparent !important; border-color: var(--line); font-size: var(--ui-font-size); color: var(--text); }
.request-preview-copy strong, .device-key-heading strong { font-size: var(--ui-font-size); font-weight: 600; }
#provisioning-panel .request-preview { min-height: 68px; padding: 10px 0; }
.request-status { font-size: 12px; }
.instance-avatar { color: var(--text); font-size: 17px; }
#workspace .workspace-heading { padding: 12px 16px; background: transparent; }
.organization-current .eyebrow { display: none; }
.organization-current h2 { font-size: 14px; font-weight: 600; }
.organization-current .organization-role { font-size: 11px; }
.organization-picker-trigger { padding: 0; border: 0; background: transparent; }
.organization-picker-trigger .eyebrow { display: none; }
.organization-picker-trigger .organization-name { font-size: 14px; }
#instance-title { margin: 16px 0 4px; font-size: 22px; }
#instance-subtitle { font-size: 12px; margin-bottom: 12px; }
#instance-content { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; align-items: start; }
.instance-nav { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; width: 100%; margin: 0; background: transparent; border: 0; padding: 0; gap: 4px; }
.instance-nav button { font-size: var(--ui-font-size); flex: 0 0 auto; justify-content: flex-start; min-height: 44px; padding: 10px 12px; background: transparent; border-color: transparent; text-align: left; }
.instance-section { grid-column: 2; grid-row: 1; }
#instance-content .instance-section > details:first-child { margin-top: 0; }
.instance-section .button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.instance-section .button-row button { flex: 1 1 120px; }
.instance-nav button[aria-pressed="false"] { color: var(--muted); }
.instance-section > .workbench-open { width: auto; min-width: 160px; }
.appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; border-top: 1px solid var(--line); }
.appearance-row label { font-size: var(--ui-font-size); font-weight: 500; }
.appearance-row select { width: auto; max-width: 62%; font-size: var(--ui-font-size); background: transparent; }
.appearance-settings > .field-hint { margin: 8px 0 0; font-size: 12px; }
.inline-help { margin: 8px 0; }
.inline-help > summary { min-height: 44px; padding: 10px 0; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 500; }
#account-settings .inline-help > summary { min-height: 44px; }
.inline-help p { margin: 8px 0; }
summary { overflow-wrap: anywhere; }
.compose-sheet .stacked-form { gap: 8px; }
.compose-sheet .stacked-form label { margin-top: 0; font-size: 13px; font-weight: 500; }
.compose-sheet .certificate-choice { min-height: 44px; }
.compose-sheet .certificate-choices legend { font-size: 13px; font-weight: 500; }
#provisioning-keys-hint { font-size: 12px; line-height: 1.5; }
#account-settings .settings-group { border-top: 1px solid var(--line); }
.shell:has(#workspace:not(.hidden)) .product-footer { margin-top: 20px; padding: 8px 0; border: 0; }
.shell:has(#workspace:not(.hidden)) .product-footer .agency-logo { display: none; }
.product-footer p:not(.product-signature) { display: none; }
.operation-toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 12px; }
@media (hover: hover) {
  button:hover:not(:disabled) { border-color: var(--control); background: var(--control); color: var(--control-text); filter: brightness(.92); }
  button.secondary:hover:not(:disabled) { border-color: var(--line); background: var(--surface-soft); color: var(--text); filter: none; }
}
@media (max-width: 759px) {
  .shell:has(#workspace:not(.hidden)) { width: 100%; margin: 0; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .shell:has(#workspace:not(.hidden)) .product-header { gap: 10px; margin-bottom: 12px; padding-bottom: 8px; }
  .shell:has(#workspace:not(.hidden)) .account-menu { display: inline-flex; border: 0; background: transparent; }
  #workspace > .account-navigation, #workspace[data-view="instance"] > .account-navigation { width: min(240px, calc(100vw - 40px)); z-index: 70; transform: translateX(-100%); visibility: hidden; padding-top: max(12px, env(safe-area-inset-top)); }
  body.account-menu-open #workspace > .account-navigation { transform: none; visibility: visible; }
  .navigation-heading { padding: 0 4px 18px 12px; }
  .navigation-heading button { display: inline-flex; }
  body.account-menu-open { overflow: hidden; }
  .account-menu-backdrop:not(.hidden) { display: block; position: fixed; inset: 0; z-index: 60; width: 100%; height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; background: #0008; }
  #workspace .card { padding: 16px; border-radius: 10px; }
  #workspace .workspace-heading { padding: 10px 12px; margin-bottom: 12px; }
  .organization-current { grid-template-columns: minmax(0, 1fr) auto; }
  .section-heading h2 { font-size: 16px; }
  #node-list .instance-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 10px; }
  .instance-row > .instance-avatar { width: 40px; height: 40px; }
  .instance-row > .workbench-open { grid-column: 3; grid-row: 1; padding: 7px 12px; }
  .instance-row > .instance-open { grid-column: 3; grid-row: 2; min-height: 44px; padding: 5px 0; font-size: 11px; }
  .instance-row > .node-facts { grid-column: 2 / -1; }
  .instance-row > .instance-brief { align-self: start; margin-top: 4px; }
  .instance-row > .instance-avatar { grid-row: 1 / 3; align-self: start; margin-top: 3px; }
  .appearance-row { gap: 12px; }
  .appearance-row select { max-width: 62%; font-size: max(14px, var(--ui-font-size)); }
  #instance-content { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .instance-nav button { font-size: 12px; min-height: 44px; padding: 8px; }
  #instance-content .instance-section > .workbench-open { width: 100%; min-width: 0; }
}