:root {
  --wm-fast: 140ms;
  --wm-smooth: 220ms;
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary) 45%, transparent); outline-offset: 2px; }

.wm-command-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: start center;
  padding: min(16vh, 140px) 16px 24px;
  background: rgba(2, 6, 23, .64);
  backdrop-filter: blur(10px);
  animation: wmBackdropIn var(--wm-fast) ease-out both;
}
.wm-command-backdrop[hidden] { display: none; }
.wm-command {
  width: min(620px, 100%);
  max-height: min(680px, 78vh);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42);
  animation: wmCommandIn var(--wm-smooth) cubic-bezier(.2,.8,.2,1) both;
}
.wm-command__search { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.wm-command__search svg { color: var(--text-muted); }
.wm-command__search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 16px; }
.wm-command kbd { border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; padding: 2px 6px; background: var(--bg-elevated); color: var(--text-muted); font: 600 10px/1.5 system-ui, sans-serif; }
.wm-command h2 { margin: 0; padding: 15px 20px 8px; color: var(--text-muted); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.wm-command__list { padding: 4px 10px 12px; overflow: auto; max-height: 480px; }
.wm-command__list a, .wm-command__list button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; min-height: 48px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; transition: background var(--wm-fast), transform var(--wm-fast); }
.wm-command__list a:hover, .wm-command__list button:hover, .wm-command__list .is-active { background: var(--bg-hover); transform: translateX(2px); }
.wm-command__list a > span, .wm-command__list button > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary); font-size: 17px; }
.wm-command__list strong { font-size: 13px; }
.wm-command__list em { color: var(--text-muted); font-size: 11px; font-style: normal; }
.wm-command__empty { margin: 6px 20px 20px; color: var(--text-muted); text-align: center; }
.wm-command footer { display: flex; flex-wrap: wrap; gap: 14px; padding: 11px 20px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 10px; }
.wm-command footer span { display: inline-flex; align-items: center; gap: 4px; }

.wm-network-status { position: fixed; left: 50%; bottom: 20px; z-index: 2100; transform: translateX(-50%); padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-lg); font-size: 12px; font-weight: 700; }
.wm-network-status.is-offline { border-color: rgba(239,68,68,.4); color: var(--color-danger); }
.wm-network-status.is-online { border-color: rgba(34,197,94,.4); color: var(--color-success); }
.wm-version-note { position: fixed; right: 14px; bottom: 14px; z-index: 84; color: var(--text-muted); font-size: 10px; }
.wm-version-note summary { list-style: none; width: max-content; margin-left: auto; border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; background: color-mix(in srgb, var(--bg-surface) 92%, transparent); box-shadow: var(--shadow-sm); cursor: pointer; font-weight: 700; }
.wm-version-note summary::-webkit-details-marker { display: none; }
.wm-version-note p { width: min(270px, calc(100vw - 28px)); margin: 7px 0 0; border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; background: var(--bg-surface); color: var(--text-secondary); box-shadow: var(--shadow-lg); line-height: 1.45; }

html[data-density="compact"] .wm-mail-item { min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
html[data-density="compact"] .wm-nav-item { min-height: 35px; }
html[data-density="compact"] .wm-mail-item__snippet { display: none; }

.wm-mail-item, .wm-nav-item, .btn, .wm-compose-btn { transition-duration: var(--wm-fast) !important; }
.wm-mail-list__body { overscroll-behavior: contain; }
.wm-mail-item { content-visibility: auto; contain-intrinsic-size: 82px; }
.wm-star-glyph { color: #f5b82e; font-size: 16px; line-height: 1; }
.wm-mail-check { width: 16px; height: 16px; flex: 0 0 auto; margin: 0 2px 0 0; accent-color: var(--color-primary); opacity: .18; transition: opacity var(--wm-fast), transform var(--wm-fast); }
.wm-mail-item:hover .wm-mail-check, .wm-mail-check:checked, .wm-mail-item.is-checked .wm-mail-check { opacity: 1; }
.wm-mail-item.is-checked { background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-surface)); box-shadow: inset 3px 0 var(--color-primary); }
.wm-mail-star { flex: 0 0 auto; border: 0; padding: 5px; background: transparent; color: var(--text-dim); font-size: 17px; line-height: 1; cursor: pointer; opacity: .38; transform: scale(.92); transition: color var(--wm-fast), opacity var(--wm-fast), transform var(--wm-fast); }
.wm-mail-star:hover, .wm-mail-star.active { color: #f5b82e; opacity: 1; transform: scale(1.08); }
.wm-mail-item.is-starred .wm-mail-item__subject { color: var(--text-primary); }
.wm-bulk-bar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--border)); background: color-mix(in srgb, var(--color-primary) 9%, var(--bg-surface)); animation: wmBulkIn var(--wm-fast) ease-out both; }
.wm-bulk-bar[hidden] { display: none; }
.wm-bulk-bar > label { display: inline-flex; align-items: center; gap: 7px; color: var(--text-primary); font-size: 12px; font-weight: 800; white-space: nowrap; }
.wm-bulk-bar__actions { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.wm-bulk-bar__actions button, .wm-bulk-close { min-height: 31px; border: 1px solid var(--border); border-radius: 9px; padding: 5px 9px; background: var(--bg-surface); color: var(--text-secondary); font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.wm-bulk-bar__actions button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.wm-bulk-bar__actions .is-danger:hover { border-color: var(--color-danger); color: var(--color-danger); }
.wm-bulk-close { margin-left: auto; border: 0; background: transparent; font-size: 18px; }
@keyframes wmBulkIn { from { opacity: 0; transform: translateY(-5px); } }
.wm-autosave-status { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: 10px; font-weight: 700; white-space: nowrap; }
.wm-autosave-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }
.wm-autosave-status.is-active { color: var(--color-success); }
.wm-autosave-status.is-active::before { background: var(--color-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 12%, transparent); }
.wm-attachment-hint { color: var(--text-dim); font-size: 11px; }
.wm-compose-attachments { transition: border-color var(--wm-fast), background var(--wm-fast), box-shadow var(--wm-fast); }
.wm-compose-attachments.is-dragging { border-color: var(--color-primary) !important; background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 22%, transparent); }

@keyframes wmBackdropIn { from { opacity: 0; } }
@keyframes wmCommandIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } }

@media (max-width: 640px) {
  .wm-command-backdrop { padding: 8vh 10px 16px; }
  .wm-command { border-radius: 17px; }
  .wm-command footer { display: none; }
  .wm-mail-check { opacity: .55; }
  .wm-bulk-bar { position: sticky; top: 0; z-index: 8; }
  .wm-bulk-bar__actions { flex: 1; }
  .wm-version-note { bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .wm-dual-arc { animation: none !important; transform: rotate(24deg); }
}