:root {
  color-scheme: light dark;
  --ios-blue: #007aff;
  --ios-green: #34c759;
  --ios-orange: #ff9500;
  --ios-red: #ff3b30;
  --bg-grouped: #f2f2f7;
  --bg-grouped-secondary: #ffffff;
  --label: #000000;
  --label-secondary: rgb(60 60 67 / 60%);
  --label-tertiary: rgb(60 60 67 / 30%);
  --fill: rgb(120 120 128 / 20%);
  --fill-tertiary: rgb(118 118 128 / 12%);
  --fill-quaternary: rgb(116 116 128 / 8%);
  --separator: rgb(60 60 67 / 29%);
  --tint: var(--ios-blue);
  --on-tint: #ffffff;
  --danger: var(--ios-red);
  --success: var(--ios-green);
  --warning: var(--ios-orange);
  --material-bar: rgb(249 249 249 / 82%);
  --radius-card: 10px;
  --radius-control: 10px;
  --radius-field: 10px;
  --nav-bar-height: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --gutter: 16px;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ios-blue: #0a84ff;
    --ios-green: #30d158;
    --ios-orange: #ff9f0a;
    --ios-red: #ff453a;
    --bg-grouped: #000000;
    --bg-grouped-secondary: #1c1c1e;
    --label: #ffffff;
    --label-secondary: rgb(235 235 245 / 60%);
    --label-tertiary: rgb(235 235 245 / 30%);
    --fill: rgb(120 120 128 / 36%);
    --fill-tertiary: rgb(118 118 128 / 24%);
    --fill-quaternary: rgb(118 118 128 / 18%);
    --separator: rgb(84 84 88 / 60%);
    --material-bar: rgb(30 30 30 / 80%);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg-grouped); color: var(--label); font-family: var(--font); font-size: 17px; line-height: 1.29412; letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
.app-shell { max-width: 640px; min-height: 100dvh; margin-inline: auto; background: var(--bg-grouped); }
.app-header { position: sticky; top: 0; z-index: 20; padding-top: var(--safe-top); background: var(--material-bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 -0.5px 0 var(--separator); }
.app-header__bar { display: flex; align-items: center; gap: 8px; min-height: var(--nav-bar-height); padding-inline: max(var(--gutter), var(--safe-left)) max(var(--gutter), var(--safe-right)); }
.app-header__title { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; text-align: center; }
.app-header__leading, .app-header__actions { display: flex; align-items: center; min-width: 86px; }
.app-header__actions { justify-content: flex-end; }
.connection, .status-line { display: inline-flex; align-items: center; gap: 7px; color: var(--label-secondary); font-size: 13px; white-space: nowrap; }
.status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.connection[data-state='ok'] .status-dot, .status-dot--ok { background: var(--success); }
.connection[data-state='error'] .status-dot, .status-dot--error { background: var(--danger); }
.bar-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--tint); font: inherit; font-size: 17px; text-decoration: none; cursor: pointer; }
.bar-button--icon { font-size: 22px; }
.app-main { padding: 12px 0 24px; }
.page-message { min-height: 18px; margin: 0 0 7px; padding-inline: max(calc(var(--gutter) + 16px), var(--safe-left)); color: var(--label-secondary); font-size: 13px; }
.list-group { margin: 0 0 24px; padding: 0; }
.list-group__title { display: flex; justify-content: space-between; margin: 0 0 7px; padding-inline: max(calc(var(--gutter) + 16px), var(--safe-left)); color: var(--label-secondary); font-size: 13px; font-weight: 400; text-transform: uppercase; }
.list-group__footer { margin: 7px 0 0; padding-inline: max(calc(var(--gutter) + 16px), var(--safe-left)); color: var(--label-secondary); font-size: 13px; line-height: 1.35; }
.inset-list { margin-inline: max(var(--gutter), var(--safe-left)) max(var(--gutter), var(--safe-right)); border-radius: var(--radius-card); background: var(--bg-grouped-secondary); overflow: hidden; }
.row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 11px 16px; border: 0; background: none; color: inherit; font: inherit; font-size: 17px; text-align: left; text-decoration: none; }
.row + .row::before, .secret-row + .secret-row .row::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--separator); }
button.row { cursor: pointer; }
button.row:active { background: var(--fill-quaternary); }
.spinner { width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid var(--fill); border-top-color: var(--label-secondary); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.row__label { flex: 1; min-width: 0; }
.row__value { max-width: 60%; overflow: hidden; color: var(--label-secondary); font-variant-numeric: tabular-nums; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 11px 18px; border: 0; border-radius: var(--radius-control); background: var(--fill-tertiary); color: var(--tint); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.btn:active:not(:disabled), .bar-button:active { opacity: .45; }
.btn:disabled { color: var(--label-tertiary); cursor: not-allowed; }
.btn--primary { background: var(--tint); color: var(--on-tint); }
.btn--plain { background: none; padding-inline: 8px; font-weight: 400; }
.btn--danger-plain { background: none; color: var(--danger); }
.btn--sm { min-height: 34px; padding: 6px 8px; font-size: 15px; }
.btn--block { width: 100%; }
input[type='text'], input[type='password'], input[type='url'], input[type='number'], select { width: 100%; min-width: 0; min-height: 44px; padding: 11px 12px; border: 0; border-radius: var(--radius-field); background: var(--fill-tertiary); color: var(--label); font: inherit; font-size: 17px; appearance: none; }
.row input[type='text'], .row input[type='password'], .row input[type='url'], .row input[type='number'], .row select { max-width: 300px; min-height: 22px; padding: 0; border-radius: 0; background: none; text-align: right; }
.row select { color: var(--tint); text-align-last: right; }
.row--stacked { align-items: stretch; flex-direction: column; gap: 6px; }
textarea { width: 100%; min-height: 64px; resize: vertical; padding: 8px 10px; border: 0; border-radius: 8px; background: var(--fill-tertiary); color: var(--label); font: inherit; font-size: 15px; }
.toggle { position: relative; flex: none; width: 51px; height: 31px; margin: 0; border: 0; border-radius: 999px; background: var(--fill); appearance: none; cursor: pointer; transition: background .2s ease; }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgb(0 0 0 / 25%); transition: transform .2s ease; }
.toggle:checked { background: var(--success); }
.toggle:checked::after { transform: translateX(20px); }
.row input::placeholder { color: var(--label-tertiary); }
.row--actions { justify-content: flex-end; }
.form-message:empty, .action-message:empty { display: none; }
.form-message { color: var(--danger); }
.pairing-code { color: var(--label); font-family: var(--font-mono); font-size: 17px; letter-spacing: .08em; }
.pairing-qr { padding: 16px; border-top: .5px solid var(--separator); text-align: center; }
.pairing-qr img { display: block; width: min(100%, 320px); height: auto; margin: 0 auto; border-radius: 8px; background: #fff; }
.secret-field { flex-wrap: nowrap; }
.model-stats { justify-content: space-between; color: var(--label-secondary); font-size: 13px; }
.model-stats span { display: grid; gap: 3px; text-align: center; }
.model-stats strong { color: var(--label); font-size: 17px; font-weight: 500; }
.model-actions { justify-content: center; flex-wrap: wrap; }
.device-name { display: block; }
.device-meta { display: block; max-width: 250px; overflow: hidden; color: var(--label-secondary); font-family: var(--font-mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.device-status { display: inline-flex; align-items: center; gap: 6px; color: var(--label-secondary); font-size: 13px; }
.device-status .status-dot { background: var(--success); }
.device-status--revoked .status-dot { background: var(--danger); }
.identity { max-width: 100%; font-family: var(--font-mono); font-size: 11px; text-align: left; }
.destructive-row { justify-content: center; color: var(--danger); }
.inset-list + .inset-list { margin-top: 12px; }
.user-role { color: var(--label-secondary); font-size: 13px; }
#auth-screen .row input { max-width: 220px; }
.banner { margin: 0 max(var(--gutter), var(--safe-right)) 16px max(var(--gutter), var(--safe-left)); padding: 11px 16px; border-radius: var(--radius-card); background: var(--fill-tertiary); color: var(--label); font-size: 15px; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

.log-controls { flex-wrap: wrap; gap: 8px 16px; }
.log-filter { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.log-filter--follow { margin-left: auto; }
.log-filter__label { color: var(--label-secondary); font-size: 13px; }
.log-filter select { max-width: 180px; min-height: 30px; padding: 0 4px; background: none; color: var(--tint); font-size: 15px; text-align-last: left; }
.toggle--sm { width: 40px; height: 24px; }
.toggle--sm::after { width: 20px; height: 20px; }
.toggle--sm:checked::after { transform: translateX(16px); }
/* Tall enough to be readable, short enough that the page below stays reachable. */
#log-entries { max-height: 60vh; overflow-y: auto; border-top: .5px solid var(--separator); }
#log-entries:empty { display: none; }
.log-entry + .log-entry { border-top: .5px solid var(--separator); }
.log-row { gap: 8px; min-height: 38px; padding: 8px 16px; font-size: 14px; }
.log-row::before { content: none; }
.log-entry[data-open='1'] .log-row { background: var(--fill-quaternary); }
.log-time { flex: none; color: var(--label-secondary); font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.log-row .status-dot { background: var(--label-tertiary); }
.log-entry[data-level='warn'] .status-dot { background: var(--warning); }
.log-entry[data-level='error'] .status-dot { background: var(--danger); }
.log-category { flex: none; padding: 1px 6px; border-radius: 4px; background: var(--fill-tertiary); color: var(--label-secondary); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
.log-message { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-meta { flex: none; color: var(--label-secondary); font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.log-details { max-height: 40vh; margin: 0; padding: 10px 16px 14px; overflow: auto; background: var(--fill-quaternary); color: var(--label-secondary); font-family: var(--font-mono); font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.log-actions { gap: 4px; }

@media (max-width: 520px) {
  .log-filter--follow { margin-left: 0; }
  .log-meta { display: none; }
}

@media (max-width: 520px) {
  .app-header__leading, .app-header__actions { min-width: 76px; }
  .connection span { display: none; }
  .secret-field { align-items: stretch; flex-wrap: wrap; }
  .secret-field .row__label { flex-basis: 100%; }
  .secret-field input { flex: 1; max-width: none !important; text-align: left !important; }
  .row input[type='url'] { max-width: 220px; }
  .device-row { align-items: flex-start; flex-wrap: wrap; }
  .device-row .row__value { margin-left: auto; }
}