:root {
  color-scheme: light dark;
  --topbar-h: 58px;
  --line: color-mix(in srgb, CanvasText 14%, transparent);
  --soft: color-mix(in srgb, CanvasText 5%, transparent);
}
* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; background: Canvas; color: CanvasText; }
.topbar { position: sticky; top: 0; z-index: 80; min-height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem clamp(1rem, 2vw, 2rem); border-bottom: 1px solid var(--line); background: color-mix(in srgb, Canvas 96%, transparent); backdrop-filter: blur(12px); }
.topbar-left, .session-info { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.brand { color: inherit; text-decoration: none; font-weight: 850; font-size: 1.08rem; }
.top-link { color: inherit; }
.badge, .scope-badge { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .48rem; font-size: .72rem; }
.action-badge { color: #176b45; border-color: #176b45; }
.danger-badge { color: #a11; border-color: #a11; }
.whitelist-badge { color: #245b8f; border-color: #245b8f; }
.container { width: min(98vw, 2400px); max-width: none; margin: 0 auto; padding: 1rem clamp(.65rem, 1.4vw, 1.5rem) 3rem; }
.hero { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding: .7rem 0 1rem; }
h1,h2 { margin: 0; } h1 { font-size: clamp(1.45rem, 2.4vw, 2.15rem); } h2 { font-size: 1.05rem; }
p { line-height: 1.45; }
.muted { opacity: .68; } .small { font-size: .78rem; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .nowrap { white-space: nowrap; }
.back { display: inline-block; margin-bottom: .45rem; color: inherit; }
.card { border: 1px solid var(--line); border-radius: 13px; margin: 1rem 0; background: Canvas; overflow: clip; }
.card-head, .actionbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.search-card, .access-card, .filter-card { padding: 1rem; overflow: visible; }
.domain-search, .filters, .toolbar, .quick-actions, .filter-actions, .form-actions, .actions-inline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.filters.compact { align-items: end; }
label { font-size: .82rem; }
.domain-search label, .filters label, .filter-grid label, .user-form > label { display: grid; gap: .35rem; }
input, select, button, .button { font: inherit; padding: .58rem .72rem; border-radius: 8px; border: 1px solid color-mix(in srgb, CanvasText 22%, transparent); background: Canvas; color: CanvasText; }
button, .button { cursor: pointer; text-decoration: none; font-weight: 650; }
button { background: CanvasText; color: Canvas; border-color: CanvasText; }
.button.secondary, .selection-button, .chip { background: transparent; color: CanvasText; }
button:disabled { opacity: .42; cursor: not-allowed; }
button.release { background: #176b45; color: white; border-color: #176b45; }
button.whitelist { background: #245b8f; color: white; border-color: #245b8f; }
button.danger { background: #a11; color: white; border-color: #a11; }
button.mini, .button.mini { padding: .34rem .52rem; font-size: .76rem; }
.alert, .notice { border: 1px solid currentColor; border-radius: 10px; padding: .85rem 1rem; margin: .75rem 0; }
.notice { border-color: color-mix(in srgb, CanvasText 25%, transparent); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.stat { border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; }
.stat span { display: block; opacity: .62; font-size: .8rem; margin-bottom: .25rem; } .stat strong { font-size: 1.55rem; }
.filter-grid { display: grid; grid-template-columns: minmax(180px,1fr) minmax(180px,1fr) minmax(260px,2fr) 110px 110px auto; align-items: end; gap: .7rem; }
.filter-grid input, .filter-grid select { width: 100%; min-width: 0; }
.quick-actions { margin-top: .75rem; }
.chip { border-radius: 999px; padding: .35rem .6rem; font-size: .76rem; }
.toggle, .checkline { display: inline-flex !important; align-items: center; gap: .4rem !important; }
.toggle input, .checkline input { width: 1rem; height: 1rem; }
.messages-card { overflow: visible; }
.actionbar { position: sticky; top: var(--topbar-h); z-index: 50; background: color-mix(in srgb, Canvas 96%, transparent); backdrop-filter: blur(10px); border-radius: 13px 13px 0 0; }
.message-table-wrap { max-height: calc(100vh - 190px); overflow: auto; }
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
th,td { padding: .68rem .72rem; text-align: left; border-bottom: 1px solid color-mix(in srgb, CanvasText 9%, transparent); vertical-align: top; }
thead th { position: sticky; top: 0; z-index: 20; background: Canvas; box-shadow: 0 1px 0 var(--line); font-size: .74rem; text-transform: uppercase; letter-spacing: .035em; }
.message-table-wrap thead th { top: 0; }
tr:last-child td { border-bottom: 0; } tr[hidden] { display: none; }
.actions { text-align: right; } .actions-inline { justify-content: flex-end; white-space: nowrap; }
.actions-inline form { margin: 0; }
th.check, td.check { width: 2.6rem; text-align: center; } .check input { width: 1.05rem; height: 1.05rem; }
.score { font-weight: 800; font-variant-numeric: tabular-nums; }
.empty { padding: 1rem; opacity: .7; }
th.sortable { padding: 0; }
.sort-button { width: 100%; display: inline-flex; align-items: center; gap: .3rem; justify-content: flex-start; padding: .68rem .72rem; border: 0; border-radius: 0; background: transparent; color: inherit; text-transform: uppercase; letter-spacing: .035em; font-size: .74rem; font-weight: 750; white-space: nowrap; }
.sort-button:hover { background: var(--soft); }
.sort-indicator { min-width: .75rem; text-align: center; }
.recipient-col { min-width: 210px; } .sender-col { min-width: 220px; max-width: 420px; overflow-wrap: anywhere; } .subject-col { min-width: 360px; width: 42%; }
.subject-cell { min-width: 360px; }
.preview-link { padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font-weight: 550; width: 100%; }
.preview-link:hover { text-decoration: underline; }
.group-row td { background: color-mix(in srgb, CanvasText 6%, Canvas); border-top: 2px solid var(--line); }
.group-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.group-head strong, .group-head span { display: block; }
.preview-drawer { position: fixed; z-index: 120; top: 0; right: 0; height: 100vh; width: min(680px, 48vw); transform: translateX(102%); transition: transform .18s ease; background: Canvas; border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(0,0,0,.18); padding: 1rem; overflow: auto; }
.preview-drawer[aria-hidden="false"] { transform: translateX(0); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.32); }
.preview-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; position: sticky; top: 0; background: Canvas; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.preview-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin: 1rem 0; }
.preview-fields div { min-width: 0; } .preview-fields dt { opacity: .62; font-size: .72rem; text-transform: uppercase; } .preview-fields dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.preview-body { white-space: pre-wrap; word-break: break-word; border: 1px solid var(--line); background: color-mix(in srgb, CanvasText 3%, Canvas); border-radius: 9px; padding: .9rem; max-width: 100%; font: .8rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.admin-grid { display: grid; grid-template-columns: minmax(320px, .75fr) minmax(600px, 1.8fr); gap: 1rem; align-items: start; }
.user-form { padding: 1rem; display: grid; gap: .85rem; }
.user-form fieldset { border: 1px solid var(--line); border-radius: 10px; display: grid; gap: .55rem; }
@media (max-width: 1100px) { .filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .filter-subject { grid-column: span 2; } .admin-grid { grid-template-columns: 1fr; } .preview-drawer { width: min(760px, 72vw); } }
@media (max-width: 760px) {
  .topbar, .hero, .actionbar { align-items: stretch; flex-direction: column; }
  .container { width: 100%; padding: .65rem .5rem 2rem; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .filter-grid { grid-template-columns: 1fr; } .filter-subject { grid-column: auto; }
  .actionbar { position: static; }
  .message-table-wrap { max-height: none; }
  .preview-drawer { width: 94vw; }
  .toolbar { justify-content: flex-start; }
  .subject-col, .subject-cell { min-width: 280px; }
}
.logout-form { margin: 0; display: inline-flex; }
.logout-button { white-space: nowrap; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb, CanvasText 3%, Canvas); }
.login-shell { width: min(94vw, 430px); }
.login-card { border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; background: Canvas; box-shadow: 0 18px 48px rgba(0,0,0,.12); }
.login-brand { font-weight: 850; margin-bottom: 1.2rem; }
.login-card h1 { margin-bottom: .35rem; }
.login-form { display: grid; gap: .9rem; margin-top: 1.2rem; }
.login-form label { display: grid; gap: .4rem; }
.login-form input { width: 100%; }
.login-form button { margin-top: .25rem; }

/* v0.9.3: domain-first admin overview */
.domain-card-head > div:first-child { display: grid; gap: .18rem; }
.domain-summary-row td { vertical-align: middle; }
.domain-detail-row td { padding: 0; background: color-mix(in srgb, CanvasText 2.5%, Canvas); }
.domain-detail { padding: .85rem 1rem 1rem; border-bottom: 1px solid var(--line); }
.domain-detail-title { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .7rem; }
.recipient-list { display: flex; flex-wrap: wrap; gap: .42rem; }
.recipient-pill { display: inline-flex; align-items: center; padding: .28rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: Canvas; font-size: .76rem; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .domain-card-head { align-items: stretch; flex-direction: column; }
  .domain-table .actions-inline { justify-content: flex-start; white-space: normal; }
}

/* v0.9.4: global quarantine totals */
.quarantine-overview { margin: .15rem 0 1rem; }
.quarantine-overview .stat { min-height: 94px; display: flex; flex-direction: column; justify-content: center; }
.quarantine-overview .stat small { display: block; margin-top: .25rem; opacity: .58; font-size: .72rem; }
.quarantine-total { border-width: 2px; }

/* v0.9.7: domain name opens quarantine */
.domain-name-link { color: inherit; text-decoration: none; }
.domain-name-link:hover, .domain-name-link:focus-visible { text-decoration: underline; }

/* v0.9.8: global quarantine and campaign spotting */
.global-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.patterns-card { overflow: visible; }
.pattern-table-wrap { max-height: 360px; }
.pattern-table td { vertical-align: middle; }
.pattern-table th:first-child, .pattern-table td:first-child { text-align: right; }
.global-filter-grid { grid-template-columns: minmax(140px,.8fr) minmax(190px,1fr) minmax(200px,1fr) minmax(280px,1.8fr) 105px 105px auto; }
.group-select-label { display: inline-flex !important; align-items: center; gap: .4rem !important; }
.group-select-label select { padding: .38rem .5rem; border: 1px solid color-mix(in srgb, CanvasText 22%, transparent); border-radius: 8px; background: Canvas; color: CanvasText; }
.domain-col { min-width: 160px; white-space: nowrap; }
.global-message-table-wrap { max-height: calc(100vh - 190px); }
@media (max-width: 1250px) { .global-filter-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .global-filter-grid .filter-subject { grid-column: span 2; } }
@media (max-width: 760px) { .global-stats { grid-template-columns: repeat(2,1fr); } .global-filter-grid { grid-template-columns: 1fr; } .global-filter-grid .filter-subject { grid-column: auto; } }

.preview-details { margin: .9rem 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.preview-details summary { cursor: pointer; padding: .7rem .9rem; font-weight: 650; background: color-mix(in srgb, CanvasText 3%, Canvas); }
.preview-details .preview-body { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; max-height: 34vh; overflow: auto; }
.preview-headers { white-space: pre-wrap; }