/* MySmartMail – mail page (folder pane | list | reader), compose, shortcuts. Colours only via tokens (theme.css). */
.mx, .cmp, .mx-pop, .mx-keys { --note-bg: #fff9e6; --note-line: #f1e2b3; --note-text: #6b4e00; --row-h-pad: 11px; --sel-bg: color-mix(in srgb, var(--primary) 7%, var(--surface)); --act-bg: color-mix(in srgb, var(--primary) 11%, var(--surface)); }
[data-mode="dark"] .mx, [data-mode="dark"] .cmp { --note-bg: color-mix(in srgb, #f59e0b 9%, var(--surface)); --note-line: color-mix(in srgb, #f59e0b 26%, var(--surface)); --note-text: #fcd34d; }
.icon.xs { width: 13px; height: 13px; }
.mx [hidden], .cmp [hidden], .mx-pop [hidden] { display: none !important; }

/* ---------- shell in mail mode: full height, sidebar becomes a slim icon rail ---------- */
.mail-mode .shell { height: 100vh; height: 100dvh; min-height: 0; }
.mail-mode .main { height: 100vh; height: 100dvh; overflow: hidden; }
.mail-mode .content.mx-page, .mail-mode #page.mx-page { padding: 0; max-width: none; flex: 1; min-height: 0; display: flex; }
@media (min-width: 961px) {
  .mail-mode .shell { grid-template-columns: 64px 1fr; }
  .mail-mode .sidebar { padding: 12px 8px; align-items: center; overflow: visible; gap: 4px; }
  .mail-mode .brand { padding: 2px 0 10px; } .mail-mode .brand > span { display: none; }
  .mail-mode .company-switch { width: 44px; height: 44px; padding: 5px; justify-content: center; border-color: transparent; background: transparent; position: relative; }
  .mail-mode .company-switch > span:not(.avatar), .mail-mode .company-switch > .icon { display: none; }
  .mail-mode .company-switch:hover { background: var(--surface-3); }
  .mail-mode .nav { align-items: center; width: 100%; }
  .mail-mode .nav .sec { font-size: 0; padding: 0; height: 1px; width: 28px; background: var(--border); margin: 8px auto; }
  .mail-mode .nav a { position: relative; width: 44px; height: 40px; padding: 0; justify-content: center; border-radius: 11px; }
  .mail-mode .nav a > span:not(.count) { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--text); color: var(--bg); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s .15s; z-index: 50; box-shadow: var(--shadow); }
  .mail-mode .nav a:hover > span:not(.count), .mail-mode .nav a:focus-visible > span:not(.count) { opacity: 1; }
  .mail-mode .nav a .count { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; }
  .mail-mode .side-foot { display: none; }
  .mail-mode .topbar .menu-btn { display: none; }
}

/* ---------- layout ---------- */
.mx { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: 236px minmax(320px, 400px) minmax(0, 1fr); grid-template-areas: 'side list reader'; background: var(--surface); position: relative; }
.mx-side { grid-area: side; background: var(--surface-2); border-right: 1px solid var(--border); overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; }
.mx-list { grid-area: list; display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--border); position: relative; background: var(--surface); }
.mx-reader { grid-area: reader; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); }
.mx-sidebd { display: none; }
.mx[data-pane="bottom"] { grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: minmax(200px, 42%) minmax(0, 1fr); grid-template-areas: 'side list' 'side reader'; }
.mx[data-pane="bottom"] .mx-list { border-right: 0; border-bottom: 1px solid var(--border); }
.mx[data-pane="off"] { grid-template-columns: 236px minmax(0, 1fr); grid-template-areas: 'side list'; }
.mx[data-pane="off"] .mx-reader { display: none; }
.mx[data-pane="off"][data-view="reader"] { grid-template-areas: 'side reader'; } .mx[data-pane="off"][data-view="reader"] .mx-reader { display: flex; } .mx[data-pane="off"][data-view="reader"] .mx-list { display: none; }
.rd-back, .mx-mcompose { display: none !important; }
.mx[data-pane="off"] .rd-back { display: inline-flex !important; }
@media (max-width: 1240px) { .mx { grid-template-columns: 216px minmax(300px, 360px) minmax(0, 1fr); } .mx[data-pane="bottom"], .mx[data-pane="off"] { grid-template-columns: 216px minmax(0, 1fr); } }
/* tablets: folder pane becomes an overlay */
@media (max-width: 1100px) {
  .mx, .mx[data-pane] { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); grid-template-areas: 'list reader'; }
  .mx[data-pane="bottom"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'list' 'reader'; }
  .mx[data-pane="off"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'list'; } .mx[data-pane="off"][data-view="reader"] { grid-template-areas: 'reader'; }
  .mx-side { position: absolute; inset: 0 auto 0 0; width: 280px; z-index: 40; transform: translateX(-102%); transition: transform .18s ease; box-shadow: var(--shadow-lg); }
  .mx.folders-open .mx-side { transform: none; } .mx.folders-open .mx-sidebd { display: block; position: absolute; inset: 0; background: var(--overlay); z-index: 39; }
  .mx-tbtn { cursor: pointer; } .mx-tbtn .icon { display: block; } .mx-tbtn:hover .icon { color: var(--text); }
}
/* phones: one pane at a time */
@media (max-width: 760px) {
  .mx, .mx[data-pane] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: 'list'; }
  .mx[data-view="reader"], .mx[data-pane][data-view="reader"] { grid-template-areas: 'reader'; }
  .mx[data-view="reader"] .mx-list, .mx[data-view="list"] .mx-reader { display: none; }
  .mx[data-view="reader"] .mx-reader { display: flex; }
  .mx-list { border-right: 0; }
  .rd-back, .mx-mcompose { display: inline-flex !important; }
  .mx-side { width: min(300px, 86vw); }
}

/* ---------- folder pane ---------- */
.mx-side-in { padding: 14px 10px 24px; display: flex; flex-direction: column; gap: 2px; }
.mx-new { margin: 0 2px 12px; height: 40px; justify-content: flex-start; padding: 0 14px; gap: 10px; border-radius: 11px; box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.mx-kb-hint { margin-left: auto; font-size: 11px; font-weight: 600; opacity: .7; border: 1px solid color-mix(in srgb, var(--on-primary) 35%, transparent); border-radius: 5px; padding: 0 5px; line-height: 17px; }
.mx-vbox { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.mx-fi { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border-radius: 8px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none !important; position: relative; }
a.mx-fi:hover, .mx-mbrow:hover { background: var(--surface-3); color: var(--text); }
.mx-fi.active, .mx-fi.active:hover { background: var(--act-bg); color: var(--primary); font-weight: 600; }
.mx-fi .icon { color: var(--text-3); } .mx-fi.active .icon { color: var(--primary); }
.mx-fl { flex: 1; min-width: 0; }
.mx-cnt { margin-left: auto; font-size: 11.5px; font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }
.mx-fi.active .mx-cnt { color: var(--primary); }
.mx-sec { margin-top: 10px; }
.mx-sech { display: flex; align-items: center; gap: 7px; width: 100%; height: 28px; padding: 0 10px; border: 0; background: none; color: var(--text-3); font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 7px; text-align: left; }
.mx-sech:hover { color: var(--text-2); background: var(--surface-3); } .mx-sech > .icon:last-child { margin-left: auto; transition: transform .15s; } .mx-sec.closed .mx-sech > .icon:last-child { transform: rotate(-90deg); }
.mx-secb { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.mx-mbrow { padding: 0 6px 0 0; gap: 0; }
.mx-mbrow > a { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; min-height: 32px; color: inherit; text-decoration: none !important; padding-right: 4px; }
.mx-exp { width: 22px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: var(--text-3); cursor: pointer; border-radius: 6px; flex: none; }
.mx-exp:hover { color: var(--text); } .mx-exp .icon { transition: transform .15s; } .mx-mb.open .mx-exp .icon { transform: rotate(90deg); }
.mx-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--surface) 70%, transparent); }
.mx-ic { color: var(--text-3); display: inline-flex; } .mx-ic .icon { color: var(--text-3); }
.mx-folders { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px; }
.mx-sub { padding-left: 30px; min-height: 30px; font-weight: 450; }
.mx-sync { width: 18px; height: 18px; display: grid; place-items: center; flex: none; }
.mx-sync.err { color: var(--danger); } .mx-sync.err .icon { color: var(--danger); }
.mx-sync.run::after { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid var(--text-3); border-right-color: transparent; animation: spin .8s linear infinite; }
.mx-connect { margin-top: 12px; color: var(--text-3); border: 1px dashed var(--border-strong); justify-content: center; }
.mx-connect:hover { color: var(--primary); border-color: var(--primary); background: transparent !important; }
.mx-side-empty, .mx-side-err { padding: 10px 12px; }
.mx-side-err { color: var(--danger); }

/* ---------- avatars, chips ---------- */
.mx-av { --av: var(--brand); width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 13px; font-weight: 650; letter-spacing: .01em;
  background: color-mix(in srgb, var(--av) 15%, var(--surface)); color: color-mix(in srgb, var(--av) 72%, var(--text)); }
.mx-av.sm { width: 28px; height: 28px; font-size: 11px; } .mx-av.xs { width: 20px; height: 20px; font-size: 9px; }
.mx-status { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 650; background: var(--neutral-bg); color: var(--text-2); }
.mx-status.info { background: var(--info-bg); color: var(--info); } .mx-status.warn { background: var(--warning-bg); color: var(--warning); } .mx-status.ok { background: var(--success-bg); color: var(--success); } .mx-status.err { background: var(--danger-bg); color: var(--danger); }
.mx-tag { --tg: var(--text-3); display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface-3); white-space: nowrap; }
.mx-tag::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--tg); }
.mx-chipmini { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface-3); white-space: nowrap; }
.mx-chipmini.warn { color: var(--warning); background: var(--warning-bg); }
.mx-mbadge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; background: var(--surface-3); font-size: 12px; font-weight: 600; color: var(--text-2); max-width: 100%; }
.mx-mbadge > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mx-mbadge .icon { color: var(--text-3); }
.mx-flagged { color: #e5a00d; display: inline-flex; } .mx-flagged .icon { fill: currentColor; stroke: currentColor; }
.mx-kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); font: 600 11.5px/18px var(--font); text-align: center; color: var(--text-2); }

/* ---------- list ---------- */
.mx-lwrap { flex: none; border-bottom: 1px solid var(--border); background: var(--surface); }
.mx-lhead { display: flex; align-items: center; gap: 4px; padding: 12px 10px 4px 16px; min-height: 52px; }
.mx-ltitle { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mx-ltitle h1 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; min-width: 0; display: flex; }
.mx-tbtn { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 0; background: none; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; cursor: default; text-align: left; border-radius: 6px; }
.mx-tbtn .icon { display: none; color: var(--text-3); }
.mx-bulk { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; min-height: 52px; background: var(--sel-bg); }
.mx-allcb { display: grid; place-items: center; width: 28px; } .mx-allcb input, .mx-cb { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; margin: 0; }
.mx-bn { font-size: var(--fs-sm); white-space: nowrap; margin-right: 4px; }
.mx-bacts { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.mx-bacts .btn { padding: 0 8px; } @media (max-width: 1500px) { .mx-bacts .btn span { display: none; } .mx-bacts .btn { width: 32px; padding: 0; } }
.mx-search { position: relative; margin: 6px 12px 10px; }
.mx-sicon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; display: flex; }
.mx-sin { width: 100%; height: 36px; border: 1px solid transparent; border-radius: 10px; background: var(--surface-3); padding: 0 36px 0 34px; font-size: var(--fs-sm); color: var(--text); outline: none; transition: background .12s, border-color .12s; }
.mx-sin::placeholder { color: var(--text-3); } .mx-sin:focus { background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.mx-sin::-webkit-search-cancel-button { display: none; }
.mx-shelp { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; color: var(--text-3); border-radius: 6px; cursor: pointer; }
.mx-shelp:hover { color: var(--text); background: var(--surface-2); }
.mx-ops { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px 14px; }
.mx-ops dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0; align-items: center; } .mx-ops dd { margin: 0; font-size: var(--fs-xs); color: var(--text-2); }
.mx-op { border: 1px solid var(--border); background: var(--surface-2); border-radius: 6px; padding: 1px 7px; font: 500 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--primary); cursor: pointer; }
.mx-op:hover { border-color: var(--primary); }
.mx-chips { display: flex; align-items: center; gap: 4px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; }
.mx-fchip { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mx-fchip:hover { border-color: var(--border-strong); color: var(--text); } .mx-fchip.on { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.mx-csep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; flex: none; }
.mx-lbody { flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0; outline: none; scrollbar-width: thin; }
.mx-rows { display: flex; flex-direction: column; }
.mx-row { position: relative; display: flex; gap: 12px; padding: var(--row-h-pad) 14px var(--row-h-pad) 16px; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); outline: none; content-visibility: auto; contain-intrinsic-size: auto 92px; transition: background .08s, opacity .15s, transform .15s; }
.mx-row:hover { background: var(--surface-2); }
.mx-row.focus { box-shadow: inset 2px 0 0 var(--text-3); } .mx-row:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.mx-row.sel { background: var(--sel-bg); }
.mx-row.active { background: var(--act-bg); } .mx-row.active.focus { box-shadow: none; }
.mx-row.leaving { opacity: 0; transform: translateX(16px); }
.mx-stripe { position: absolute; left: 5px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; opacity: .85; }
.mx-pick { position: relative; width: 36px; height: 36px; flex: none; margin-top: 1px; }
.mx-pick .mx-cb { position: absolute; inset: 0; margin: auto; opacity: 0; pointer-events: none; }
.mx-row:hover .mx-pick .mx-av, .mx-list.selecting .mx-pick .mx-av, .mx-row.sel .mx-pick .mx-av { opacity: 0; }
.mx-row:hover .mx-pick .mx-cb, .mx-list.selecting .mx-pick .mx-cb, .mx-row.sel .mx-pick .mx-cb { opacity: 1; pointer-events: auto; }
.mx-pick .mx-av { transition: opacity .1s; }
.mx-rmain { flex: 1; min-width: 0; }
.mx-r1 { display: flex; align-items: center; gap: 6px; min-width: 0; height: 20px; }
.mx-from { font-size: var(--fs); color: var(--text-2); font-weight: 500; min-width: 0; }
.mx-n { font-size: 11px; color: var(--text-3); font-weight: 600; flex: none; }
.mx-ics { display: inline-flex; gap: 4px; color: var(--text-3); margin-left: 2px; flex: none; }
.mx-time { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.mx-subj { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; display: flex; align-items: center; gap: 6px; min-width: 0; } .mx-subj > .ellipsis { min-width: 0; }
.mx-snip { font-size: var(--fs-sm); color: var(--text-3); margin-top: 1px; }
.mx-row.unread .mx-from { color: var(--text); font-weight: 700; } .mx-row.unread .mx-subj { color: var(--text); font-weight: 600; } .mx-row.unread .mx-time { color: var(--primary); font-weight: 600; }
.mx-udot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; }
.mx-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
.mx-mbl { font-size: 11px; color: var(--text-3); font-weight: 500; margin-left: auto; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.mx-hover { position: absolute; right: 10px; top: 7px; display: none; gap: 2px; padding: 2px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.mx-row:hover .mx-hover, .mx-row:focus-within .mx-hover { display: flex; }
.mx-ib { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: var(--text-2); border-radius: 7px; cursor: pointer; }
.mx-ib:hover { background: var(--surface-3); color: var(--text); }
@media (hover: none) { .mx-row:hover .mx-hover { display: none; } .mx-row:hover .mx-pick .mx-av { opacity: 1; } .mx-row:hover .mx-pick .mx-cb { opacity: 0; } }
.mx[data-density="compact"] { --row-h-pad: 7px; }
.mx[data-density="compact"] .mx-snip { display: none; } .mx[data-density="compact"] .mx-pick, .mx[data-density="compact"] .mx-pick .mx-av { width: 28px; height: 28px; font-size: 11px; }
.mx[data-density="compact"] .mx-meta { margin-top: 4px; } .mx[data-density="compact"] .mx-fi { min-height: 29px; }
.mx-skrow { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
.mx-skav { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.mx-end { text-align: center; padding: 18px; }
.mx-sentinel { height: 1px; }
.mx-newpill { position: absolute; top: 112px; left: 50%; transform: translate(-50%, -10px); opacity: 0; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 650; box-shadow: var(--shadow); cursor: pointer; transition: opacity .15s, transform .15s; z-index: 5; }
.mx-newpill.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* empty states */
.mx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 28px; color: var(--text-3); gap: 6px; flex: 1; }
.mx-empty > .icon { width: 34px; height: 34px; stroke-width: 1.5; color: var(--text-3); margin-bottom: 6px; }
.mx-empty h3 { color: var(--text); font-size: var(--fs-md); font-weight: 650; } .mx-empty p { max-width: 340px; font-size: var(--fs-sm); margin: 0 0 8px; }
.mx-zen { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 10px; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--success) 22%, var(--surface)), color-mix(in srgb, var(--success) 8%, var(--surface))); color: var(--success); }
.mx-zen .icon { width: 28px; height: 28px; stroke-width: 2.2; }
.mx-empty.rd-none > .icon { width: 44px; height: 44px; opacity: .55; }

/* ---------- reader ---------- */
.rd-bar { flex: none; display: flex; align-items: center; gap: 2px; height: 52px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.rd-bar .btn-icon { width: 36px; height: 36px; color: var(--text-2); } .rd-bar .btn-icon:hover { color: var(--text); }
.rd-bar .btn-icon.on { color: #e5a00d; } .rd-bar .btn-icon.on .icon { fill: currentColor; }
.rd-sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; }
.rd-nav { display: flex; gap: 2px; }
.rd-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0; outline: none; padding: 0 0 40px; scrollbar-width: thin; }
.rd-in { max-width: 900px; margin: 0 auto; padding: 0 32px; }
.rd-head { padding: 22px 0 12px; }
.rd-subj { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; outline: none; overflow-wrap: anywhere; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.rd-private { color: var(--text-3); }
.rd-deleg { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--info-bg); color: var(--text); font-size: var(--fs-sm); font-weight: 550; }
.rd-deleg .icon { color: var(--info); }
.rd-team { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 4px 0 6px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.rd-tf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rd-tl { font-size: 12px; color: var(--text-3); font-weight: 550; }
.rd-pick { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px 0 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; max-width: 200px; }
.rd-pick:hover:not(:disabled) { border-color: var(--border-strong); } .rd-pick:disabled { cursor: default; opacity: .85; }
.rd-none { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-weight: 500; padding-left: 3px; }
.rd-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--surface-3); gap: 2px; }
.rd-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.rd-seg button:hover:not(:disabled) { color: var(--text); } .rd-seg button:disabled { cursor: default; }
.rd-seg button.on { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); }
.rd-seg button.on.open { color: var(--info); } .rd-seg button.on.pending { color: var(--warning); } .rd-seg button.on.done { color: var(--success); }
.rd-tags { flex-wrap: wrap; }
.cmp-link { border: 0; background: none; padding: 0 2px; color: var(--primary); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cmp-link:hover { text-decoration: underline; }
.rd-presence { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 7px 12px; border-radius: 9px; background: var(--warning-bg); color: var(--text); font-size: var(--fs-sm); font-weight: 550; }
.rd-presence .mx-av { box-shadow: 0 0 0 2px var(--surface); } .rd-presence .mx-av + .mx-av { margin-left: -10px; } .rd-presence > span { margin-left: 4px; }
.rd-presence:not(.typing) { background: var(--surface-3); color: var(--text-2); }
.rd-dots { display: inline-flex; gap: 3px; margin-left: 2px; } .rd-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--warning); animation: rdblink 1.2s infinite; } .rd-dots i:nth-child(2) { animation-delay: .2s; } .rd-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes rdblink { 50% { opacity: .2; } }
.rd-ai { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 8px 0 0; padding: 4px 6px 4px 12px; border-radius: 10px; border: 1px solid var(--border); }
.rd-ail { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--text-3); margin-right: 6px; } .rd-ail .icon { color: var(--accent-600); }
.rd-ai .btn { color: var(--text-2); }
.rd-aibox { margin: 8px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-50); font-size: var(--fs-sm); }
.rd-aibox.err { display: flex; gap: 8px; align-items: center; background: var(--danger-bg); }
.rd-aih { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .rd-aih .icon { color: var(--accent-600); }
.rd-aibox ul { margin: 0 0 6px; padding-left: 18px; } .rd-aibox p { margin: 0 0 6px; }
.rd-msgs { padding: 8px 0 0; }
.rd-msg { border-bottom: 1px solid var(--border); }
.rd-msg:last-child { border-bottom: 0; }
.rd-mhead { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0 10px; width: 100%; }
.rd-collapsed { align-items: center; padding: 12px 8px; margin: 0 -8px; width: calc(100% + 16px); border: 0; background: none; text-align: left; cursor: pointer; border-radius: 10px; color: inherit; font: inherit; }
.rd-collapsed:hover { background: var(--surface-2); }
.rd-collapsed .mx-av { width: 30px; height: 30px; font-size: 11px; }
.rd-cn { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: baseline; }
.rd-cn b { font-size: var(--fs-sm); flex: none; max-width: 40%; } .rd-csnip { font-size: var(--fs-sm); color: var(--text-3); flex: 1; min-width: 0; }
.rd-mhb { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.rd-who { flex: 1; min-width: 0; }
.rd-from { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-size: var(--fs); line-height: 1.35; } .rd-from b { font-weight: 650; }
.rd-addr { color: var(--text-3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.rd-to { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 1px 0; margin-top: 1px; color: var(--text-3); font-size: 12.5px; cursor: pointer; text-align: left; border-radius: 5px; max-width: 100%; }
.rd-to:hover { color: var(--text-2); }
.rd-time { font-size: 12px; color: var(--text-3); white-space: nowrap; padding-top: 2px; }
.rd-macts { display: flex; align-items: center; gap: 0; margin: -4px -6px 0 0; } .rd-macts .btn { color: var(--text-3); } .rd-macts .btn:hover { color: var(--text); }
.rd-details { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 12px 48px; padding: 10px 14px; background: var(--surface-2); border-radius: 10px; font-size: 12.5px; }
.rd-details dt { color: var(--text-3); } .rd-details dd { margin: 0; overflow-wrap: anywhere; color: var(--text-2); }
.rd-imgban { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 12px 48px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--surface-3); font-size: 12.5px; color: var(--text-2); }
.rd-imgban > span { margin-right: auto; } .rd-imgban .btn { color: var(--primary); height: 28px; }
.rd-sentby { margin: -4px 0 8px 48px; display: flex; align-items: center; gap: 5px; }
.rd-body { margin: 0 0 14px 48px; }
.rd-body.html { min-height: 40px; }
.rd-frame { display: block; width: 100%; border: 0; height: 120px; background: #fff; border-radius: 4px; }
[data-mode="dark"] .rd-body.html { background: #fff; padding: 14px 16px; border-radius: 12px; }
.rd-text { font-size: var(--fs); line-height: 1.6; color: var(--text); overflow-wrap: anywhere; white-space: normal; }
.rd-tq { color: var(--text-3); border-left: 2px solid var(--border-strong); padding-left: 12px; margin-top: 8px; }
.rd-atts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px 48px; }
.rd-att { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; max-width: 280px; }
.rd-att:hover { border-color: var(--border-strong); }
.rd-attm { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; border: 0; background: none; cursor: pointer; text-align: left; min-width: 0; color: var(--text); font: inherit; }
.rd-atti { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex: none; }
.rd-atti.pdf { background: var(--danger-bg); color: var(--danger); } .rd-atti.image { background: var(--info-bg); color: var(--info); } .rd-atti.csv { background: var(--success-bg); color: var(--success); }
.rd-attn { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.rd-attd { display: grid; place-items: center; width: 36px; border-left: 1px solid var(--border); color: var(--text-3); }
.rd-attd:hover { background: var(--surface-2); color: var(--text); }
.rd-unsub { margin: -6px 0 14px 48px; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.rd-older { display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; border: 0; border-bottom: 1px solid var(--border); background: none; cursor: pointer; position: relative; }
.rd-older span { font-size: 12px; font-weight: 600; color: var(--primary); background: var(--surface); padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; }
.rd-older:hover span { border-color: var(--primary); }
.cmp-dots { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; margin: 4px 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-3); color: var(--text-2); font-size: 10px; letter-spacing: 1px; cursor: pointer; }
.cmp-dots:hover { background: var(--border); }

/* internal notes */
.rd-notes { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--note-bg); border: 1px solid var(--note-line); }
.rd-notesh { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--note-text); margin-bottom: 8px; } .rd-notesh .icon { color: var(--note-text); } .rd-notesh .muted { color: color-mix(in srgb, var(--note-text) 70%, var(--text-3)); }
.rd-tline { display: flex; flex-direction: column; gap: 10px; }
.rd-tline:empty { display: none; }
.rd-note { display: flex; gap: 10px; }
.rd-notein { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--note-line); border-radius: 4px 12px 12px 12px; padding: 8px 12px; }
.rd-nh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .rd-nb { font-size: var(--fs-sm); margin-top: 2px; overflow-wrap: anywhere; }
.rd-ndel { margin-left: auto; border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 2px; border-radius: 5px; opacity: 0; } .rd-note:hover .rd-ndel, .rd-ndel:focus-visible { opacity: 1; } .rd-ndel:hover { color: var(--danger); }
.rd-mention { color: var(--primary); font-weight: 650; background: var(--primary-soft); border-radius: 4px; padding: 0 3px; } .rd-mention.me { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--text); }
.rd-ev { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); padding-left: 9px; }
.rd-ev time { margin-left: auto; } .rd-evdot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--note-text) 55%, transparent); flex: none; margin-right: 10px; }
.rd-cbox { position: relative; display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.rd-cin { flex: 1; min-height: 38px; max-height: 200px; resize: none; padding: 9px 12px; border: 1px solid var(--note-line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); line-height: 1.45; outline: none; }
.rd-cin:focus { border-color: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 18%, transparent); }
.rd-csend { flex: none; height: 38px; }
.rd-mlist { position: absolute; left: 0; bottom: calc(100% + 4px); min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 4px; z-index: 20; }
.rd-mlist > div { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: var(--fs-sm); }
.rd-mlist > div.sel, .rd-mlist > div:hover { background: var(--surface-3); } .rd-mlist .xs { margin-left: auto; }

/* reply zone */
.rd-replyzone { margin: 18px 0 0; }
[data-presence2] .rd-presence { margin-top: 18px; }
.rd-quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rd-qr { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text-3); font: inherit; font-size: var(--fs-sm); cursor: text; text-align: left; }
.rd-qr:hover { border-color: var(--primary); color: var(--text-2); } .rd-qr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-quick .btn { color: var(--text-2); }
.rd-ro { display: flex; align-items: center; gap: 6px; padding: 10px 0; }
.rd-skmsg { display: flex; gap: 12px; padding: 18px 0; }
.rd-prev { display: grid; place-items: center; background: var(--surface-3); border-radius: 10px; min-height: 200px; } .rd-prev img { max-height: 70vh; object-fit: contain; }
.rd-pdf { width: 100%; height: 72vh; border: 0; border-radius: 8px; background: var(--surface-3); }
@media (max-width: 760px) {
  .rd-in { padding: 0 16px; } .rd-addr { display: none; } .rd-head { padding: 16px 0 10px; } .rd-subj { font-size: 19px; }
  .rd-team { gap: 8px 14px; padding: 10px 12px; }
  .rd-body, .rd-details, .rd-imgban, .rd-atts, .rd-sentby, .rd-unsub { margin-left: 0; }
  [data-mode="dark"] .rd-body.html { padding: 10px; }
  .rd-bar { padding: 0 4px; } .rd-nav { display: none; }
  .rd-quick .btn span { display: none; } .rd-qr { min-width: 0; }
}

/* ---------- compose ---------- */
.cmp-bd { position: fixed; inset: 0; z-index: 75; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fade .12s ease; }
.cmp-inline-host { min-width: 0; }
.cmp { min-width: 0; max-width: 100%; width: min(780px, 100%); height: min(760px, calc(100vh - 48px)); display: flex; flex-direction: column; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); position: relative; animation: pop .15s ease; }
.cmp.inline { width: 100%; height: auto; min-height: 300px; border: 1px solid var(--border-strong); box-shadow: var(--shadow); animation: none; border-radius: 14px; }
.cmp-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--border); flex: none; }
.cmp-head h2 { font-size: var(--fs-md); font-weight: 650; } .cmp-saved { margin-left: auto; margin-right: 4px; } .cmp.inline .cmp-head { padding: 6px 8px 6px 16px; } .cmp.inline .cmp-head h2 { font-size: var(--fs-sm); }
.cmp-fields { flex: none; padding: 0 18px; }
.cmp-row { display: flex; align-items: center; gap: 10px; min-height: 42px; border-bottom: 1px solid var(--border); }
.cmp-l { width: 52px; flex: none; color: var(--text-3); font-size: var(--fs-sm); }
.cmp-from { flex: 1; min-width: 0; width: 100%; text-overflow: ellipsis; height: 36px; border: 0; background: transparent; color: var(--text); font-size: var(--fs-sm); font-weight: 550; outline: none; cursor: pointer; padding: 0; }
.cmp-from:focus-visible { box-shadow: 0 0 0 2px var(--focus); border-radius: 6px; }
.cmp-from option, .cmp-from optgroup { background: var(--surface); color: var(--text); }
.cmp-subj { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: var(--text); font-size: var(--fs); font-weight: 600; outline: none; }
.cmp-rcpt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 0; position: relative; cursor: text; }
.cmp-rin { flex: 1; min-width: 90px; height: 28px; border: 0; background: transparent; color: var(--text); font-size: var(--fs-sm); outline: none; }
.cmp-chip { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 3px 0 9px; border-radius: 999px; background: var(--primary-soft); color: var(--text); font-size: 12.5px; font-weight: 550; max-width: 260px; }
.cmp-chip > .ellipsis { min-width: 0; } .cmp-chip button { flex: none; }
.cmp-chip.bad { background: var(--danger-bg); color: var(--danger); }
.cmp-chip button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; background: none; color: var(--text-3); border-radius: 50%; cursor: pointer; } .cmp-chip button:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.cmp-ccbtns { display: flex; gap: 2px; flex: none; } .cmp-ccbtns .cmp-link { color: var(--text-3); font-weight: 550; padding: 2px 6px; } .cmp-ccbtns .cmp-link:hover { color: var(--primary); text-decoration: none; }
.cmp-sug { position: absolute; top: calc(100% + 2px); left: 0; width: min(380px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 4px; z-index: 30; }
.cmp-sopt { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: var(--fs-sm); line-height: 1.35; } .cmp-sopt.sel, .cmp-sopt:hover { background: var(--surface-3); }
.cmp-tools { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.cmp-tb { min-width: 30px; height: 30px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font-size: 13px; cursor: pointer; }
.cmp-tb:hover { background: var(--surface-3); color: var(--text); }
.cmp-bold { font-weight: 800; } .cmp-italic { font-style: italic; font-family: Georgia, serif; font-size: 14px; } .cmp-underline { text-decoration: underline; }
.cmp-ol { font-weight: 700; font-size: 12px; } .cmp-q { font: 700 18px/1 Georgia, serif; margin-top: 6px; } .cmp-clr { font-weight: 700; } .cmp-clr sub { font-size: 9px; }
.cmp-tbw span { font-size: 12.5px; font-weight: 550; }
.cmp-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.cmp-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 14px 18px 10px; }
.cmp-editor img, .cmp-quote img { max-width: 100%; height: auto; } .cmp-quote table { max-width: 100%; }
.cmp.inline .cmp-scroll { max-height: 60vh; }
.cmp-editor { min-height: 180px; outline: none; font-size: var(--fs); line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.cmp.inline .cmp-editor { min-height: 120px; }
.cmp-editor p { margin: 0; } .cmp-editor blockquote { margin: 6px 0; padding-left: 12px; border-left: 2px solid var(--border-strong); color: var(--text-2); }
.cmp-editor ul, .cmp-editor ol { margin: 4px 0; padding-left: 24px; } .cmp-editor a { color: var(--primary); text-decoration: underline; }
.cmp-editor .msm-sig, .cmp-editor [data-msm-signature] { color: var(--text-2); font-size: 13px; margin-top: 10px; }
.cmp-editor [data-msm-signature][contenteditable="false"] { position: relative; border-radius: 8px; padding: 6px 8px; margin-left: -8px; background: var(--surface-2); }
.cmp-sighint { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 8px 0 0; } .cmp-legal { color: var(--warning); display: inline-flex; gap: 4px; align-items: center; }
.cmp-quote { margin-top: 6px; color: var(--text-2); font-size: 13px; outline: none; overflow-wrap: anywhere; }
.cmp-quote blockquote { border-left-color: var(--border-strong) !important; }
.cmp-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .cmp-atts:empty { display: none; }
.cmp-att { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 4px 0 10px; border: 1px solid var(--border); border-radius: 9px; font-size: 12.5px; font-weight: 550; max-width: 280px; overflow: hidden; background: var(--surface); }
.cmp-att.fwd { padding-right: 10px; background: var(--surface-2); } .cmp-att.bad { border-color: var(--danger); color: var(--danger); }
.cmp-att button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: none; color: var(--text-3); border-radius: 6px; cursor: pointer; } .cmp-att button:hover { background: var(--surface-3); color: var(--text); }
.cmp-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--surface-3); } .cmp-prog span { display: block; height: 100%; background: var(--primary); transition: width .2s; }
.cmp-drop { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--primary); border-radius: inherit; background: color-mix(in srgb, var(--surface) 88%, var(--primary)); color: var(--primary); font-weight: 650; z-index: 10; pointer-events: none; }
.cmp.dragging .cmp-drop { display: flex; } .cmp-drop .icon { width: 28px; height: 28px; }
.cmp-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); }
.cmp-send { display: inline-flex; } .cmp-send > .btn { border-radius: 10px 0 0 10px; padding: 0 16px; } .cmp-send .dropdown .btn { border-radius: 0 10px 10px 0; width: 32px; padding: 0; border-left: 1px solid color-mix(in srgb, var(--on-primary) 25%, transparent); }
.cmp-kb { white-space: nowrap; } @media (max-width: 760px) { .cmp-kb { display: none; } }
.cmp-snipdd { position: absolute; z-index: 40; width: 340px; max-width: calc(100vw - 32px); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cmp-sniplist { max-height: 260px; overflow-y: auto; } .cmp-sniplist button { display: block !important; } .cmp-sniplist button > span { display: flex; flex-direction: column; min-width: 0; }
.cmp-snipprev { display: block; margin-top: 1px; font-weight: 400; } .cmp-snipdd > a { padding: 2px 6px; }
@media (max-width: 760px) {
  .cmp-bd { padding: 0; }
  .cmp:not(.inline) { width: 100%; height: 100%; height: 100dvh; border-radius: 0; animation: slideup .18s ease; }
  .cmp-fields, .cmp-scroll { padding-left: 14px; padding-right: 14px; } .cmp-tools { padding: 4px 8px; } .cmp-tbw span { display: none; }
}
@keyframes slideup { from { transform: translateY(24px); opacity: 0; } }

/* ---------- menus, undo toast, shortcuts overlay ---------- */
.mx-pop { position: fixed; z-index: 95; max-height: calc(100vh - 16px); overflow-y: auto; }
.mx-pop .mx-av { margin: -2px 0; } .mx-pop .head { font-size: var(--fs-sm); }
.mx-dd-row { display: flex; align-items: center; gap: 12px; width: 100%; } .mx-dd-row > span:last-child { margin-left: auto; }
.mx-undo { position: relative; overflow: hidden; padding-right: 10px; }
.mx-undo-btn { margin-left: 10px; border: 0; background: none; color: var(--brand-400); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
[data-mode="dark"] .mx-undo-btn { color: var(--brand-600); } .mx-undo-btn:hover { background: color-mix(in srgb, var(--bg) 15%, transparent); }
.mx-undo-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; } .mx-undo-bar span { display: block; height: 100%; width: 100%; background: var(--accent); }
.mx-keygrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.mx-keygrid h3 { font-size: var(--fs-sm); margin-bottom: 10px; color: var(--text-2); }
.mx-keygrid dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; align-items: center; font-size: var(--fs-sm); }
.mx-keygrid dt { white-space: nowrap; } .mx-keygrid dd { margin: 0; color: var(--text-2); }
@media (max-width: 760px) { .mx-keygrid { grid-template-columns: 1fr; } }
.mx-tagbox { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; } .mx-tagx { display: inline-flex; align-items: center; }
.mx-dd-scroll { max-height: 360px; overflow-y: auto; }
@media (prefers-reduced-motion: reduce) { .mx *, .cmp, .cmp-bd { animation: none !important; transition: none !important; } }