/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 * genre: modern-minimal · theme: Signal Glass · motion: restrained
 */
:root {
  --color-canvas: #f7f8fa;
  --color-surface: #ffffff;
  --color-surface-soft: #f0f3f6;
  --color-surface-hover: #e9eef2;
  --color-ink: #172026;
  --color-ink-2: #43515a;
  --color-muted: #73808a;
  --color-rule: #dce2e6;
  --color-rule-strong: #bac5cc;
  --color-accent: #007f78;
  --color-accent-hover: #006a64;
  --color-accent-soft: #dff3ef;
  --color-blue: #1769aa;
  --color-blue-soft: #e2eff8;
  --color-warning: #a76500;
  --color-warning-soft: #fff0d2;
  --color-error: #b62d32;
  --color-error-soft: #fce7e8;
  --color-success: #287a4b;
  --color-success-soft: #e2f3e8;
  --color-overlay: rgba(23, 32, 38, 0.35);
  --color-glass: rgba(255, 255, 255, 0.72);
  --color-glass-heavy: rgba(255, 255, 255, 0.88);
  --color-glass-edge: rgba(255, 255, 255, 0.68);
  --shadow-sheet: 0 1.25rem 4rem rgba(23, 32, 38, 0.18);
  --shadow-control: 0 0.12rem 0.6rem rgba(23, 32, 38, 0.09);
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --control-height: 2.75rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --header-height: 4rem;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; overflow-x: clip; }
html { color-scheme: light; font: 100%/1.5 var(--font-sans); background: var(--color-canvas); color: var(--color-ink); letter-spacing: 0; font-optical-sizing: auto; }
body { margin: 0; background: var(--color-canvas); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, select { touch-action: manipulation; }
button { color: inherit; }
[hidden] { display: none !important; }

input, select, textarea {
  width: 100%; min-width: 0; min-height: var(--control-height);
  border: 1px solid var(--color-rule-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-ink); padding: 0.65rem 0.75rem;
  outline: none;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 0.2rem var(--color-accent-soft); }
button { min-height: var(--control-height); border: 0; border-radius: var(--radius-sm); cursor: pointer; transition: transform 100ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out, opacity 160ms ease-out; }
button:focus-visible, a:focus-visible { outline: 0.18rem solid var(--color-blue); outline-offset: 0.15rem; }
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.primary-button, .secondary-button, .danger-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.6rem 0.9rem; font-size: 0.8125rem; font-weight: 700; white-space: nowrap;
}
.primary-button { background: var(--color-accent); color: var(--color-surface); }
.primary-button:hover { background: var(--color-accent-hover); }
.secondary-button { border: 1px solid var(--color-rule-strong); background: var(--color-surface); color: var(--color-ink); }
.secondary-button:hover { background: var(--color-surface-hover); }
.danger-button { background: var(--color-error); color: var(--color-surface); }
.compact-button { min-height: 2.25rem; padding: 0.4rem 0.7rem; }
.icon-button {
  width: var(--control-height); min-width: var(--control-height); height: var(--control-height); padding: 0;
  display: inline-grid; place-items: center; border: 1px solid transparent; background: transparent;
}
.icon-button:hover { border-color: var(--color-rule); background: var(--color-surface-hover); }
svg { width: 1.125rem; height: 1.125rem; stroke-width: 1.8; }

.login-view { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-4); background: var(--color-canvas); }
.login-panel { width: min(23rem, 100%); display: grid; gap: var(--space-4); padding: 2rem; background: var(--color-glass-heavy); backdrop-filter: blur(2rem) saturate(180%); border: 1px solid var(--color-glass-edge); border-radius: var(--radius-md); box-shadow: var(--shadow-sheet); }
.login-panel > img { width: 3rem; height: 3rem; border-radius: var(--radius-md); }
.login-panel h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.login-panel p { margin: 0.25rem 0 0; color: var(--color-muted); font-size: 0.75rem; }
.login-panel label, .form-stack label, .confirm-dialog label { display: grid; gap: var(--space-2); color: var(--color-ink-2); font-size: 0.75rem; font-weight: 700; }
.password-field { position: relative; }
.password-field input { padding-inline-end: 3.25rem; }
.password-field button { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
.form-error { min-height: 1.25rem; margin: 0; color: var(--color-error); font-size: 0.75rem; }
.download-link { min-height: var(--control-height); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.6rem 0.8rem; border: 1px solid var(--color-rule); border-radius: var(--radius-sm); color: var(--color-ink-2); background: var(--color-glass); font-size: 0.75rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.download-link:hover { background: var(--color-surface-hover); }

.app-shell { min-height: 100dvh; }
.app-header {
  position: sticky; inset-block-start: 0; z-index: 30; height: var(--header-height); padding: 0 var(--space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--color-glass); backdrop-filter: blur(1.5rem) saturate(180%);
  border-block-end: 1px solid var(--color-glass-edge); box-shadow: var(--shadow-control);
}
.brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.brand img { width: 2rem; height: 2rem; border-radius: var(--radius-sm); }
.brand > div { min-width: 0; display: grid; }
.brand strong { font-size: 0.875rem; }
.brand span { color: var(--color-muted); font-size: 0.625rem; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: var(--space-1); }

.workspace-shell { min-height: calc(100dvh - var(--header-height)); display: grid; grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); }
.thread-pane { min-width: 0; border-inline-end: 1px solid var(--color-rule); background: var(--color-surface); display: grid; grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - var(--header-height)); }
.thread-toolbar { padding: var(--space-4); display: grid; gap: var(--space-3); border-block-end: 1px solid var(--color-rule); }
.device-select-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--color-rule); }
.summary-strip div { padding: var(--space-3) var(--space-2); display: grid; gap: 0.125rem; border-inline-end: 1px solid var(--color-rule); }
.summary-strip div:last-child { border-inline-end: 0; }
.summary-strip strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.summary-strip span { color: var(--color-muted); font-size: 0.625rem; }
.search-row { position: relative; }
.search-row svg { position: absolute; inset-inline-start: 0.75rem; inset-block-start: 0.82rem; color: var(--color-muted); }
.search-row input { padding-inline-start: 2.35rem; }
.filter-tabs { padding: 0.2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--color-surface-soft); border-radius: var(--radius-sm); }
.filter-tabs button { min-height: 2.1rem; background: transparent; color: var(--color-muted); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.filter-tabs button.active { background: var(--color-surface); color: var(--color-ink); box-shadow: 0 0.05rem 0.2rem rgba(23, 32, 38, 0.12); }

.thread-list { min-height: 0; overflow-y: auto; }
.thread-item { width: 100%; min-height: 7rem; padding: var(--space-4); display: grid; gap: var(--space-2); text-align: start; background: var(--color-surface); border-radius: 0; border-block-end: 1px solid var(--color-rule); }
.thread-item:hover, .thread-item.active { background: var(--color-surface-soft); }
.thread-item.active { box-shadow: inset 0.2rem 0 var(--color-accent); }
.thread-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.thread-item h3 { min-width: 0; margin: 0; font-size: 0.875rem; line-height: 1.35; overflow-wrap: anywhere; }
.thread-item time { flex: 0 0 auto; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.5625rem; }
.thread-item p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--color-muted); font-size: 0.6875rem; line-height: 1.45; }
.thread-item-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: var(--color-muted); font-size: 0.625rem; }
.thread-item-foot span { display: inline-flex; align-items: center; gap: 0.2rem; }
.line-add { color: var(--color-success) !important; }
.line-delete { color: var(--color-error) !important; }

.status-badge { display: inline-flex; align-items: center; width: fit-content; min-height: 1.4rem; padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); font-size: 0.625rem; font-weight: 700; white-space: nowrap; }
.status-running, .status-active { color: var(--color-blue); background: var(--color-blue-soft); }
.status-completed { color: var(--color-success); background: var(--color-success-soft); }
.status-aborted, .status-blocked { color: var(--color-error); background: var(--color-error-soft); }
.status-paused { color: var(--color-warning); background: var(--color-warning-soft); }
.status-idle { color: var(--color-muted); background: var(--color-surface-soft); }

.detail-pane { min-width: 0; height: calc(100dvh - var(--header-height)); background: var(--color-canvas); }
.detail-empty { height: 100%; display: grid; place-content: center; justify-items: center; gap: var(--space-3); color: var(--color-muted); }
.detail-empty svg { width: 2rem; height: 2rem; }
.detail-empty strong { font-size: 0.8125rem; }
.detail-content { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.detail-header { padding: var(--space-4) var(--space-5); display: flex; align-items: flex-start; gap: var(--space-3); background: var(--color-glass); backdrop-filter: blur(1rem); border-block-end: 1px solid var(--color-rule); }
.detail-title { flex: 1; min-width: 0; }
.detail-title > div { display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: 0.625rem; }
.detail-title h2 { margin: var(--space-2) 0 0; font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; }
.detail-title p { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: 0.6875rem; overflow-wrap: anywhere; }
.timeline { min-height: 0; overflow-y: auto; padding: var(--space-5) max(var(--space-4), calc((100% - 52rem) / 2)); }
.timeline-event { padding: var(--space-4) 0; border-block-end: 1px solid var(--color-rule); display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); }
.event-avatar { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-surface-soft); color: var(--color-ink-2); }
.event-avatar.assistant { background: var(--color-accent-soft); color: var(--color-accent); }
.event-avatar.change { background: var(--color-warning-soft); color: var(--color-warning); }
.event-body { min-width: 0; }
.event-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-2); }
.event-meta strong { font-size: 0.75rem; }
.event-meta time { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.5625rem; }
.event-text { margin: 0; color: var(--color-ink-2); font-size: 0.8125rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.change-summary { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-2); font-family: var(--font-mono); font-size: 0.6875rem; }
.file-list { display: grid; gap: var(--space-1); }
.file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: 0.5rem 0.65rem; background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.625rem; }
.file-row span:first-child { min-width: 0; overflow-wrap: anywhere; }

.composer { padding: var(--space-3) max(var(--space-4), calc((100% - 52rem) / 2)) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--color-glass); backdrop-filter: blur(1.5rem) saturate(180%); border-block-start: 1px solid var(--color-glass-edge); display: grid; gap: var(--space-2); }
.composer textarea { min-height: 4.75rem; max-height: 14rem; }
.composer-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.75fr) auto; gap: var(--space-2); }
.send-button { width: var(--control-height); padding: 0; }

.empty-state { min-height: 12rem; display: grid; place-content: center; justify-items: center; color: var(--color-muted); }
.empty-state p { margin: var(--space-2) 0 0; font-size: 0.75rem; }
.mobile-only { display: none; }

dialog { padding: 0; border: 0; color: var(--color-ink); opacity: 0; transform: translateY(0.65rem) scale(0.985); transition: opacity 180ms ease-out, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), overlay 180ms allow-discrete, display 180ms allow-discrete; }
dialog[open] { opacity: 1; transform: translateY(0) scale(1); }
@starting-style { dialog[open] { opacity: 0; transform: translateY(0.65rem) scale(0.985); } }
dialog::backdrop { background: var(--color-overlay); backdrop-filter: blur(0.35rem) saturate(120%); }
.sheet-dialog { position: fixed; inset: 0; margin: auto 0 0; width: 100%; max-height: 92dvh; border-radius: var(--radius-md) var(--radius-md) 0 0; box-shadow: var(--shadow-sheet); }
.sheet-content { max-height: 92dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--color-glass-heavy); backdrop-filter: blur(2rem) saturate(180%); }
.new-task-dialog { width: min(34rem, calc(100% - 2rem)); height: fit-content; max-height: calc(100dvh - 2rem); margin: auto; border-radius: var(--radius-md); }
.new-task-dialog .sheet-content { max-height: calc(100dvh - 2rem); }
.sheet-header { padding: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-block-end: 1px solid var(--color-rule); }
.sheet-header span { color: var(--color-accent); font-size: 0.625rem; font-weight: 700; }
.sheet-header h2 { margin: var(--space-1) 0 0; font-size: 1.15rem; }
.form-stack { min-height: 0; overflow-y: auto; padding: var(--space-4); display: grid; gap: var(--space-4); }
.sheet-actions { padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); display: flex; justify-content: flex-end; gap: var(--space-2); border-block-start: 1px solid var(--color-rule); }
.section-command { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.device-list, .command-list { min-height: 0; overflow-y: auto; }
.device-row, .command-row { padding: var(--space-4); display: grid; gap: var(--space-3); border-block-end: 1px solid var(--color-rule); }
.device-row-head, .command-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.device-row h3, .command-row h3 { margin: 0; font-size: 0.875rem; overflow-wrap: anywhere; }
.device-row p, .command-row p { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: 0.6875rem; overflow-wrap: anywhere; }
.device-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.online-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-muted); }
.online-dot.online { background: var(--color-success); box-shadow: 0 0 0 0.2rem var(--color-success-soft); }
.platform-label { display: inline-flex; align-items: center; gap: 0.25rem; }
.platform-label svg { width: 0.8rem; height: 0.8rem; }
.pairing-panel { display: grid; gap: var(--space-4); padding: var(--space-4); border-block: 1px solid var(--color-rule); background: var(--color-surface); }
.pairing-status { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.pairing-status-icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-accent); background: var(--color-accent-soft); }
.pairing-status-icon.waiting svg { animation: status-pulse 1.8s ease-in-out infinite; }
.pairing-status-icon.connected { color: var(--color-success); background: var(--color-success-soft); }
.pairing-status h3 { margin: 0; font-size: 0.9375rem; line-height: 1.3; }
.pairing-status p { margin: 0.2rem 0 0; color: var(--color-muted); font-size: 0.6875rem; overflow-wrap: anywhere; }
.platform-picker { padding: 0.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--radius-sm); background: var(--color-surface-soft); }
.platform-picker button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: transparent; color: var(--color-muted); font-size: 0.75rem; font-weight: 700; }
.platform-picker button.active { color: var(--color-ink); background: var(--color-surface); box-shadow: 0 0.05rem 0.25rem rgba(23, 32, 38, 0.14); }
.pairing-download { width: 100%; }
.pairing-details { border-block-start: 1px solid var(--color-rule); padding-block-start: var(--space-3); }
.pairing-details summary { min-height: 2.25rem; display: flex; align-items: center; color: var(--color-muted); font-size: 0.6875rem; font-weight: 700; cursor: pointer; }
.pairing-details[open] { display: grid; gap: var(--space-3); }
.pairing-details > div { display: grid; gap: var(--space-1); }
.pairing-details span { color: var(--color-muted); font-size: 0.625rem; }
.pairing-details code { font-family: var(--font-mono); font-size: 0.6875rem; overflow-wrap: anywhere; user-select: all; }
@keyframes status-pulse { 0%, 100% { transform: scale(0.88); opacity: 0.65; } 50% { transform: scale(1); opacity: 1; } }
.command-row-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-muted); font-size: 0.625rem; }

.confirm-dialog { position: fixed; inset: 0; margin: auto; width: min(25rem, calc(100% - 2rem)); height: fit-content; border-radius: var(--radius-md); box-shadow: var(--shadow-sheet); }
.confirm-dialog > div, .confirm-dialog > form { padding: var(--space-5); display: grid; gap: var(--space-4); }
.confirm-dialog h2 { margin: 0; font-size: 1.1rem; }
.confirm-dialog p { margin: 0; color: var(--color-ink-2); font-size: 0.8125rem; line-height: 1.6; }
.confirm-dialog footer { display: flex; justify-content: flex-end; gap: var(--space-2); }
.toast { position: fixed; z-index: 200; inset-inline-start: 50%; inset-block-end: calc(1.25rem + env(safe-area-inset-bottom)); transform: translate(-50%, 0.75rem); opacity: 0; pointer-events: none; max-width: calc(100% - 2rem); padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-surface); font-size: 0.75rem; box-shadow: var(--shadow-sheet); transition: opacity 160ms ease, transform 160ms ease; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 48rem) {
  .sheet-dialog { width: min(36rem, calc(100% - 2rem)); margin: auto; border-radius: var(--radius-md); }
  .wide-sheet { width: min(44rem, calc(100% - 2rem)); }
}

@media (max-width: 47.99rem) {
  :root { --header-height: 3.75rem; }
  .app-header { padding-inline: var(--space-3); }
  .brand img { width: 1.8rem; height: 1.8rem; }
  .header-actions { gap: 0; }
  .workspace-shell { display: block; }
  .thread-pane, .detail-pane { width: 100%; height: calc(100dvh - var(--header-height)); border: 0; }
  .app-shell.detail-open .thread-pane { display: none; }
  .detail-pane { display: none; }
  .app-shell.detail-open .detail-pane { display: block; }
  .mobile-only { display: inline-grid; }
  .thread-toolbar { padding: var(--space-3); gap: var(--space-2); }
  .thread-item { padding: var(--space-3); min-height: 6.5rem; }
  .detail-header { padding: var(--space-3); align-items: center; }
  .detail-title h2 { font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .timeline { padding: var(--space-3); }
  .timeline-event { grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-2); }
  .event-avatar { width: 1.75rem; height: 1.75rem; }
  .composer { padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom)); }
  .composer-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .composer-controls #messageReasoning { grid-column: 1 / span 2; }
  .composer-controls .send-button { grid-column: 3; grid-row: 1 / span 2; height: 100%; }
  .composer-controls select { font-size: 0.6875rem; padding-inline: 0.45rem; }
  .file-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
  .file-row span:last-child { grid-column: 2; }
}

@media (max-width: 22rem) {
  .brand span { display: none; }
  .app-header { padding-inline: var(--space-2); }
  .header-actions .icon-button { min-width: 2.5rem; width: 2.5rem; }
  .device-select-row { grid-template-columns: minmax(0, 1fr); }
  .device-select-row button { width: 100%; }
  .composer-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .composer-controls #messageMode { grid-column: 1; grid-row: 2; }
  .composer-controls #messageReasoning { grid-column: 1; grid-row: 3; }
  .composer-controls .send-button { grid-column: 2; grid-row: 1 / span 3; height: 100%; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas: #111618;
    --color-surface: #1b2225;
    --color-surface-soft: #232c30;
    --color-surface-hover: #2b363b;
    --color-ink: #f1f5f6;
    --color-ink-2: #c4cdd1;
    --color-muted: #95a3a9;
    --color-rule: #334044;
    --color-rule-strong: #4a595f;
    --color-accent: #45c7b9;
    --color-accent-hover: #66d5c9;
    --color-accent-soft: #173b39;
    --color-blue: #75b9ed;
    --color-blue-soft: #19344a;
    --color-warning: #efb95d;
    --color-warning-soft: #44351c;
    --color-error: #ff8d91;
    --color-error-soft: #472428;
    --color-success: #73d39a;
    --color-success-soft: #1e3d2c;
    --color-overlay: rgba(0, 0, 0, 0.58);
    --color-glass: rgba(24, 31, 34, 0.76);
    --color-glass-heavy: rgba(29, 37, 40, 0.9);
    --color-glass-edge: rgba(255, 255, 255, 0.12);
    --shadow-sheet: 0 1.25rem 4rem rgba(0, 0, 0, 0.42);
    --shadow-control: 0 0.12rem 0.6rem rgba(0, 0, 0, 0.24);
  }
  html { color-scheme: dark; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  button:active { transform: none; }
  .pairing-status-icon.waiting svg { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .app-header, .detail-header, .composer, .login-panel, .sheet-content { background: var(--color-surface); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --color-rule: #87949d; --color-rule-strong: #5f6d76; }
}