:root {
  --bg: #f6f7f9; --panel: #ffffff; --ink: #1c1f24; --muted: #667085;
  --line: #e3e6ea; --accent: #2f6feb; --accent-soft: #eaf0fe;
  --ok: #17803d; --warn: #a15c07; --err: #b42318;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c; --panel: #1c2027; --ink: #e8eaed; --muted: #9aa3af;
    --line: #2b313a; --accent: #6f9bff; --accent-soft: #23304a;
    --ok: #46c07b; --warn: #e0a33a; --err: #f2837a;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--panel);
}
h1 { font-size: 17px; margin: 0; }
h2 { font-size: 12px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.header-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 11px; color: var(--muted); }
.badge.ok { color: var(--ok); border-color: currentColor; }
.badge.warn { color: var(--warn); border-color: currentColor; }
.badge.err { color: var(--err); border-color: currentColor; }
/* Centré : le compte rendu de synchro s'adresse à toute la fenêtre, pas à la
   colonne de gauche au-dessus de laquelle il se trouvait. `min-height` est
   conservé pour que l'apparition du texte ne fasse pas sauter la mise en page. */
.summary {
  margin: 10px 20px 0; color: var(--muted); font-size: 13px;
  min-height: 18px; text-align: center;
}
.summary.err { color: var(--err); }
.muted { color: var(--muted); }
main {
  /* Largeurs pilotées par variables : la poignée #splitter n'a qu'à écrire
     --list-w, et le mode « lecture large » qu'à basculer une classe. */
  --nav-w: 220px;
  --list-w: 400px;
  display: grid; gap: 14px; padding: 14px 20px 20px;
  grid-template-columns:
    var(--nav-w) minmax(220px, var(--list-w)) 8px minmax(320px, 1fr);
  align-items: start;
}
#splitter {
  align-self: stretch; min-height: 120px; cursor: col-resize;
  border-radius: 4px; background: transparent; transition: background .12s;
}
#splitter:hover, #splitter.dragging { background: var(--accent); opacity: .55; }
/* Sans cela, glisser la poignée sélectionne le texte des panneaux traversés. */
body.resizing { user-select: none; cursor: col-resize; }
body.reading-wide #sidebar,
body.reading-wide .list-panel,
body.reading-wide #splitter { display: none; }
body.reading-wide main { grid-template-columns: 1fr; }
body.reading-wide #wide { background: var(--accent-soft); }

@media (max-width: 1100px) {
  main { grid-template-columns: 1fr; }
  #splitter { display: none; }
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.list-panel, .detail-panel { max-height: calc(100vh - 150px); display: flex; flex-direction: column; }
.list-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
/* À la largeur minimale, le titre doit s'élider et le champ de recherche
   se réduire — sans cela l'en-tête part sur trois lignes. */
.list-head h2 {
  margin: 0; flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
ul { list-style: none; margin: 0; padding: 0; }
#categories li { margin-bottom: 2px; }
#categories button {
  width: 100%; display: flex; justify-content: space-between; gap: 8px;
  background: transparent; color: var(--ink); border: none; border-radius: 6px;
  padding: 7px 9px; font-weight: 500; text-align: left;
}
#categories button:hover { background: var(--bg); }
#categories button.active { background: var(--accent-soft); color: var(--accent); }
#categories .count { color: var(--muted); font-variant-numeric: tabular-nums; }
#categories button.active .count { color: var(--accent); }
#mail-list { overflow-y: auto; flex: 1; margin: 0 -6px; }
/* Une case à cocher à côté du bouton, pas dedans : un élément cliquable
   imbriqué dans un bouton est invalide et vole le clic d'ouverture. */
#mail-list li { border-radius: 8px; display: flex; align-items: flex-start; gap: 2px; }
#mail-list li > label.pick { padding: 11px 2px 0 6px; cursor: pointer; }
#mail-list li > button { flex: 1; min-width: 0; }
#mail-list li.picked { background: var(--accent-soft); }
#mail-list button {
  width: 100%; text-align: left; background: transparent; border: none;
  color: var(--ink); padding: 9px 10px; border-radius: 8px; font: inherit;
  display: grid; gap: 2px; border-bottom: 1px solid var(--line);
}
#mail-list button:hover { background: var(--bg); }
#mail-list button.active { background: var(--accent-soft); }
#mail-list .row {
  display: flex; gap: 8px; align-items: baseline;
  /* Élément de grille : sans min-width:0, sa largeur minimale reste
     celle de son contenu et les pastilles débordent du panneau au
     lieu que le sujet s'élide. */
  min-width: 0;
}
/* Le macaron appartient au nom : il vit dans le même bloc, et c'est le nom
   seul qui s'élide. Laissé frère de `.from`, il était repoussé au bout de la
   ligne par `flex: 1` et se lisait comme une décoration de la date. */
#mail-list .from { font-weight: 600; flex: 1; min-width: 0; display: flex;
  align-items: center; gap: 5px; }
#mail-list .from .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mail-list .subj { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mail-list .unread .from::before { content: "● "; color: var(--accent); }
.cat {
  border-radius: 999px; padding: 1px 8px; font-size: 11px;
  border: 1px solid var(--line); white-space: nowrap; color: var(--muted);
  /* En tête de ligne, la pastille ne doit pas être comprimée par un
     sujet long : c'est elle qu'on doit voir en premier. */
  flex: none;
}
.cat.fallback { color: var(--warn); border-color: currentColor; }
.cat.alerte { color: var(--warn); border-color: currentColor; font-weight: 700; }
.cat.tracker { color: var(--warn); border-color: currentColor; font-variant-numeric: tabular-nums; }
/* Répondu / transféré. Discret : c'est un repère de navigation, pas un
   verdict — il ne doit pas concurrencer la pastille d'alerte, qui est la
   seule chose de cette ligne qui demande une décision. `flex: none` pour
   qu'un objet long ne l'écrase pas, comme pour la pastille de catégorie. */
/* « À traiter » : plus visible que le marqueur « répondu », parce qu'il
   appelle un geste au lieu d'en constater un — mais moins que l'alerte, qui
   reste la seule chose de cette ligne pouvant demander une décision urgente. */
.a-traiter { color: var(--accent); flex: none; font-size: 13px; line-height: 1; font-weight: 700; }
#toggle-todo[aria-pressed="true"] { color: var(--accent); border-color: currentColor; }
.traite { color: var(--muted); flex: none; font-size: 13px; line-height: 1; }
/* Aperçu du transfert. Replié par défaut : ce qui compte est de pouvoir
   regarder avant d'envoyer, pas d'imposer la lecture d'un message qu'on vient
   de lire. Hauteur bornée — un mail long ne doit pas repousser le bouton
   « Transférer » hors de l'écran. */
.forward-original { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.forward-original input { margin-top: 2px; flex: none; }
#forward-original-note { font-size: 12px; line-height: 1.5; margin: 2px 0 0 24px; }
.forward-preview > summary { cursor: pointer; font-size: 13px; color: var(--ink); }
.forward-preview pre {
  margin: 8px 0 0; padding: 10px; max-height: 220px; overflow: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.detail-meta .traite { font-size: inherit; }
#threat-filters button {
  width: 100%; display: flex; justify-content: space-between; gap: 8px;
  background: transparent; color: var(--ink); border: none; border-radius: 6px;
  padding: 7px 9px; font-weight: 500; text-align: left;
}
#threat-filters button:hover { background: var(--bg); }
#threat-filters button.active { background: var(--accent-soft); color: var(--accent); }
#threat-filters .count { color: var(--muted); font-variant-numeric: tabular-nums; }
#trackers-dialog { max-width: 760px; }
#trackers-content h3 { font-size: 13px; margin: 16px 0 6px; }
#trackers-content table { width: 100%; }
.host-list { columns: 2; font-size: 12px; }
.host-list li { break-inside: avoid; margin-bottom: 4px; }
.safety code { font-size: 11px; color: var(--muted); }
.pager {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  padding-top: 10px; font-size: 12px;
}
.pager button { padding: 6px 9px; }
#range { white-space: nowrap; }
.detail-panel { overflow-y: auto; overflow-x: auto; }
.detail-head {
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px;
  /* L'icône flotte à droite du titre, qui garde sa place. */
  position: relative;
}
/* Les icônes flottent à droite du titre, qui garde sa place. */
.detail-tools { position: absolute; top: -2px; right: 0; display: flex; gap: 6px; }
.icon-action, .icon-danger {
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 9px; font-size: 15px; line-height: 1;
}
.icon-action:hover { color: var(--ink); border-color: var(--ink); }
.icon-danger:hover { color: var(--err); border-color: var(--err); }
body:not(.gmail-writable) .icon-danger { opacity: .4; }
.detail-head h3 { padding-right: 132px; }
/* Un titre de dialogue est un vrai titre : le style d'en-tête de panneau
   (petites capitales grises) le rendait illisible comme question. */
dialog h2 {
  font-size: 16px; text-transform: none; letter-spacing: 0;
  color: var(--ink); margin-bottom: 10px;
}
#delete-dialog { max-width: 460px; }
#delete-dialog h2 { color: var(--err); }
.delete-effects { margin: 10px 0 16px; padding-left: 20px; font-size: 13px; }
.delete-effects li { margin-bottom: 6px; }
button.danger-filled { background: var(--err); color: #fff; border-color: transparent; }
.detail-head h3 { margin: 0 0 6px; font-size: 16px; }
.detail-meta { color: var(--muted); font-size: 12px; display: grid; gap: 2px; }
.verdict { margin: 10px 0; padding: 9px 11px; background: var(--bg); border-radius: 8px; font-size: 12px; }
.safety { margin: 10px 0; padding: 9px 11px; border-radius: 8px; font-size: 12px; }
/* Même orange que la pastille d'alerte de la liste : un lecteur doit
   reconnaître le même niveau de gravité des deux côtés de l'écran. Le rouge
   reste réservé aux erreurs de l'application (réseau, HTTP), qui sont autre
   chose qu'un avertissement de sûreté. */
.safety.warn {
  background: color-mix(in srgb, var(--warn) 14%, var(--panel));
  border: 1px solid var(--warn);
}
.safety.warn strong { color: var(--warn); }
.safety.warn code { color: var(--warn); opacity: .85; }
/* Les remarques portent le même orange : ce sont des avertissements, pas de
   l'information neutre. La hiérarchie tient au cadre et au fond, réservés au
   niveau « alerte », plutôt qu'à la couleur du texte. */
.safety.info .notices { color: var(--warn); }
.safety.info .notices code { color: var(--warn); opacity: .8; }
.safety.info { background: var(--bg); }
.safety ul { margin: 6px 0 0; padding-left: 18px; }
.safety li { margin-bottom: 3px; }
.auth-row { display: flex; gap: 6px; flex-wrap: wrap; }
.auth { border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 11px; color: var(--muted); }
.auth.ok { color: var(--ok); border-color: currentColor; }
.auth.err { color: var(--err); border-color: currentColor; }
.err { color: var(--err); }
#mail-list .domain { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.links { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.links summary { cursor: pointer; color: var(--muted); }
.links ul { margin: 8px 0 0; padding-left: 16px; }
.links li { margin-bottom: 8px; }
.links li.deceptive { color: var(--warn); }
.links .alerte { color: var(--warn); }
.links .url { word-break: break-all; }
.detail-body { white-space: pre-wrap; word-break: break-word; font-size: 13px; }
/* La vue HTML n'est pas du texte préformaté : le mail gère sa propre mise en page. */
.detail-body.html-view { white-space: normal; }
.mail-html {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; display: block; min-height: 120px;
}
.view-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; }
.attachments { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.attachments a { color: var(--accent); }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 14px; }
select, input, textarea {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px;
}
#search { flex: 0 1 150px; min-width: 70px; }
button {
  font: inherit; font-weight: 600; cursor: pointer; color: #fff;
  background: var(--accent); border: 1px solid transparent; border-radius: 6px; padding: 7px 13px;
}
button.secondary { background: transparent; color: var(--accent); border-color: var(--line); }
button.danger { background: transparent; color: var(--err); border-color: var(--line); }
button[disabled] { opacity: .5; cursor: not-allowed; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); max-width: 620px; width: 92vw; }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
#send-form { display: grid; gap: 9px; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Réponse préparée : même grille que la fenêtre d'écriture, plus la consigne
   de rédaction et le rappel de sûreté. */
#reply-dialog { max-width: 720px; }
#reply-form { display: grid; gap: 9px; }
/* `label.check` (deux sélecteurs) l'emporterait sur une classe seule : le
   champ restait large de 190 px au lieu de tenir la ligne. */
label.reply-instruction { display: grid; gap: 4px; }
#reply-cautions { margin: 0; }

/* Correction et Rétablir à gauche, Annuler/Envoyer à droite : le geste de
   relecture n'est pas du même ordre que celui d'envoi. */
.dialog-actions .spacer { flex: 1; }

/* Liste des brouillons : une ligne par message, l'objet en premier parce que
   c'est ce qui permet de le reconnaître. */
#drafts-dialog { max-width: 620px; }
.draft-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.draft-row:last-child { border-bottom: none; }
.draft-row .subj { font-weight: 600; }
.draft-row .meta { color: var(--muted); font-size: 12px; }
.draft-row button { padding: 4px 9px; font-size: 12px; }

/* Indication d'action en cours. Une synchro dure une à deux minutes sur cette
   boîte : sans repère visible, on ne distingue pas « en cours » de « bloqué ».
   Le rond est dessiné en CSS — aucune image, aucune dépendance. */
.spinner {
  display: inline-block; width: 11px; height: 11px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
button[aria-busy="true"] { cursor: progress; opacity: .8; }
button[aria-busy="true"] .elapsed { font-variant-numeric: tabular-nums; opacity: .75; }
/* Réduire les animations est une demande d'accessibilité, pas un goût : on
   garde le repère, on retire le mouvement. */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-right-color: currentColor; opacity: .45; }
}

/* Barre de sélection : absente tant que rien n'est coché, pour que la liste
   reste ce qu'elle était en usage normal. */
.bulk {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
  padding: 6px 8px; background: var(--bg); border-radius: 8px; font-size: 12px;
}
.bulk #bulk-count { flex: 1; font-weight: 600; }
.bulk button { padding: 5px 10px; font-size: 12px; }
.list-head label.pick-all { display: flex; align-items: center; cursor: pointer; }
#bulk-dialog { max-width: 520px; }
#bulk-warn:empty { display: none; }

#forward-dialog { max-width: 620px; }
#forward-form { display: grid; gap: 9px; }
#forward-subject { font-size: 13px; }
#forward-parts:empty { display: none; }

/* Interface principale : une hiérarchie plus proche d'un outil de travail
   quotidien que d'une page de démonstration. */
:root {
  --bg: #f3f5f8; --panel: #fff; --ink: #172033; --muted: #6b7688;
  --line: #dfe4ec; --accent: #356ee8; --accent-soft: #edf3ff;
  --ok: #15966a; --warn: #b87516; --err: #c43d4b;
  --shadow: 0 8px 24px rgba(25, 39, 68, .06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f141c; --panel: #171e28; --ink: #edf2f8; --muted: #96a2b4;
    --line: #293444; --accent: #79a5ff; --accent-soft: #1c3158;
    --ok: #55d49b; --warn: #edb75c; --err: #f27b88;
    --shadow: 0 10px 28px rgba(0, 0, 0, .18);
  }
}
body { font-size: 13px; letter-spacing: .005em; }
[hidden] { display: none !important; }
header {
  min-height: 68px; padding: 12px 24px; gap: 18px;
  background: color-mix(in srgb, var(--panel) 94%, var(--accent));
  box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 250px; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; color: #fff; background: linear-gradient(135deg, #356ee8, #6d55d9);
  font-size: 18px; font-weight: 800; box-shadow: 0 5px 12px rgba(53,110,232,.28);
}
h1 { font-size: 16px; letter-spacing: -.02em; line-height: 1.15; }
.brand-subtitle { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.header-actions { gap: 8px; }
button { border-radius: 7px; padding: 8px 13px; transition: background .15s, border-color .15s, transform .15s; }
button:not([disabled]):active { transform: translateY(1px); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 2px;
}
button.secondary { background: transparent; }
button.secondary:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.badges { gap: 5px; }
.badge { padding: 3px 9px; background: color-mix(in srgb, var(--panel) 75%, var(--bg)); }
.summary { margin-top: 9px; }
main { --nav-w: 200px; gap: 10px; padding: 16px 20px 20px; }
.panel { min-width: 0; border-radius: 10px; padding: 16px; }
#sidebar { background: transparent; border-color: transparent; }
#summary:empty { display: none; }
#summary:not(:empty) { padding: 8px 14px; border-radius: 8px; background: var(--panel); }
.list-panel, .detail-panel { max-height: calc(100vh - 145px); }
.list-panel { min-height: min(680px, calc(100vh - 145px)); }
.detail-panel { min-height: min(680px, calc(100vh - 145px)); padding: 24px; }
.list-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.list-head h2 { color: var(--ink); font-size: 13px; letter-spacing: .01em; text-transform: none; font-weight: 700; }
#search { width: 100%; background: var(--bg); border-radius: 8px; padding: 11px 12px; }
.search-area { margin-bottom: 12px; }
.quick-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.quick-filters button { padding: 5px 10px; border-radius: 16px; font-size: 12px; color: var(--muted); }
.quick-filters button[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.quick-filters button[aria-pressed="true"]::before { content: "✓ "; }
.filter-results { margin: 0 0 10px; color: var(--muted); font-size: 12px; min-height: 19px; }
.account-nav { display: grid; gap: 8px; margin-bottom: 24px; }
.account-nav label { font-size: 11px; color: var(--muted); }
.account-nav select { width: 100%; min-width: 0; }
#account-form { display: grid; gap: 10px; }
#account-form label { display: grid; gap: 4px; font-size: 12px; }
.account-columns { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.account-columns input { min-width: 0; width: 100%; }
.account-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.account-row span { flex: 1; overflow-wrap: anywhere; }
.gmail-password-help { margin-top: -4px; font-size: 12px; }
.gmail-password-help summary { color: var(--accent); cursor: pointer; padding: 4px 0; }
.gmail-password-help p { margin: 6px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--accent-soft); line-height: 1.7; }
.gmail-password-help a { display: block; margin-top: 8px; color: var(--accent); }
.auth-page { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.auth-card { display: block; width: min(100%, 460px); padding: 32px; }
.auth-card h2 { margin-top: 28px; font-size: 20px; text-transform: none; color: var(--ink); }
.auth-form { display: grid; gap: 14px; margin: 20px 0; }
.auth-form label { display: grid; gap: 6px; }
.auth-form input { min-width: 0; width: 100%; }
.auth-card a { color: var(--accent); }
.search-help { margin-top: 6px; color: var(--muted); font-size: 11px; }
.search-help summary { cursor: pointer; padding: 4px 0; }
.search-help kbd { float: right; font: inherit; }
.search-help p { padding: 10px; background: var(--bg); border-radius: 6px; line-height: 1.7; }
.search-help code { overflow-wrap: anywhere; }
#density { padding: 5px 8px; font-size: 11px; color: var(--muted); }
#density[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.reading-empty { margin: auto; max-width: 340px; text-align: center; padding: 40px 10px; }
.reading-empty h2 { font-size: 20px; color: var(--ink); text-transform: none; letter-spacing: -.02em; }
.reading-empty p { color: var(--muted); line-height: 1.8; }
.reading-empty > .muted { font-size: 11px; }
.empty-symbol { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 24px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); font-size: 30px; }
#sidebar h2 { font-size: 10px; font-weight: 800; letter-spacing: .1em; }
#categories button, #threat-filters button { padding: 8px 10px; border-radius: 7px; }
#categories button.active, #threat-filters button.active { box-shadow: inset 3px 0 var(--accent); font-weight: 700; }
#mail-list button { padding: 15px 12px; gap: 7px; border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
body.compact #mail-list button { padding: 8px 10px; gap: 2px; }
#mail-list li > label.pick { padding-top: 16px; }
body.compact #mail-list li > label.pick { padding-top: 10px; }
#mail-list { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#mail-list li { margin: 2px 0; }
#mail-list li.picked, #mail-list button.active { box-shadow: inset 3px 0 var(--accent); }
#mail-list .from { font-size: 13px; }
#mail-list .subj { color: var(--muted); }
#mail-list .unread .subj { color: var(--ink); }
.detail-head h3 { padding-right: 0; font-size: 22px; line-height: 1.35; letter-spacing: -.015em; }
.detail-tools { position: static; justify-content: flex-end; margin-bottom: 18px; flex-wrap: wrap; }
.detail-tools button { font-size: 12px; padding: 8px 10px; }
.detail-meta { font-size: 11px; }
.verdict, .safety { border: 1px solid var(--line); box-shadow: inset 0 1px rgba(255,255,255,.02); }
.detail-body { font-size: 13px; line-height: 1.65; }
select, input, textarea { border-radius: 8px; padding: 8px 10px; }
dialog { padding: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.25); }
dialog::backdrop { backdrop-filter: blur(3px); }
@media (max-width: 1100px) {
  #sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
  #sidebar .account-nav { grid-column: 1 / -1; margin-bottom: 8px; }
  #sidebar h2 { grid-row: 2; margin: 0 !important; }
  #sidebar ul { grid-row: 3; }
  .detail-panel, .list-panel { max-height: 70vh; }
  .dialog-actions { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  header { padding: 11px 14px; }
  .brand { min-width: 0; }
  .brand-subtitle { display: none; }
  #status { width: 100%; }
  .header-actions { width: 100%; overflow-x: auto; margin-left: 0; }
  .header-actions button { white-space: nowrap; }
  main { padding: 10px; gap: 10px; }
  .list-panel, .detail-panel { max-height: none; min-height: 380px; }
  #mail-list { max-height: 55vh; }
  .detail-panel { padding: 16px; }
  .detail-head h3 { font-size: 19px; }
}