: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; }

/* v1.0.9: low-fatigue palette and persistent workspace controls */
:root {
  --app-bg: #f5f6f8;
  --app-surface: #ffffff;
  --app-surface-alt: #fafbfc;
  --app-text: #27313d;
  --app-muted: #66717d;
  --app-border: #e2e5e9;
  --app-primary: #476a8a;
  --app-primary-soft: #eaf2f8;
  --app-success: #557a63;
  --app-warning: #9a7638;
  --app-danger: #9a5555;
}
html { color-scheme: light; }
body { background: var(--app-bg); color: var(--app-text); }
.card, .preview-drawer, .login-card { background: var(--app-surface); }
input, select, button, .button { background: var(--app-surface); color: var(--app-text); border-color: var(--app-border); }
button { background: var(--app-primary); color: #fff; border-color: var(--app-primary); }
.button.secondary, .selection-button, .chip { background: transparent; color: var(--app-text); }
.topbar, .actionbar { background: color-mix(in srgb, var(--app-surface) 94%, transparent); }
th, td { border-bottom-color: color-mix(in srgb, var(--app-text) 8%, transparent); }
thead th { background: var(--app-surface); }
.preview-drawer { width: min(680px, 48vw); }
.preview-resize-handle { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 5; }
.preview-resize-handle::after { content: ""; position: absolute; left: 4px; top: 45%; width: 2px; height: 10%; min-height: 48px; border-radius: 2px; background: var(--app-border); }
.resizing-preview, .resizing-preview * { cursor: col-resize !important; user-select: none !important; }
.message-table-wrap, .global-message-table-wrap { resize: vertical; min-height: 260px; }
.preview-tabs { display: flex; gap: .35rem; border-bottom: 1px solid var(--app-border); margin: .7rem 0; overflow-x: auto; }
.preview-tab { background: transparent !important; color: var(--app-muted) !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: .55rem .7rem !important; }
.preview-tab.active { color: var(--app-primary) !important; border-bottom-color: var(--app-primary) !important; }
.preview-html { width: 100%; min-height: 420px; border: 1px solid var(--app-border); border-radius: 9px; background: #fff; }
.preview-warning { margin: .55rem 0; padding: .55rem .7rem; border: 1px solid color-mix(in srgb, var(--app-warning) 45%, transparent); border-radius: 8px; color: var(--app-warning); background: color-mix(in srgb, var(--app-warning) 7%, var(--app-surface)); font-size: .78rem; }
.preview-pane[hidden], .preview-details[hidden] { display: none !important; }
.security-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: .7rem 0; }
.security-grid > div { border: 1px solid var(--app-border); border-radius: 9px; padding: .75rem; display: grid; gap: .2rem; }
.url-list, .attachment-list { display: grid; gap: .5rem; }
.url-item, .attachment-item { border: 1px solid var(--app-border); border-radius: 8px; padding: .65rem .75rem; display: grid; gap: .2rem; overflow-wrap: anywhere; }
.url-item code { word-break: break-all; }
.session-tools { display: flex; align-items: center; gap: .45rem; }
.ui-control { display: inline-flex; align-items: center; gap: .25rem; margin: 0; }
.ui-control select { padding: .32rem .45rem; font-size: .75rem; }
.version-badge { display: inline-flex; align-items: center; padding: .2rem .45rem; border: 1px solid var(--app-border); border-radius: 999px; font-size: .7rem; color: var(--app-muted); }
.login-topline { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.login-brand .version-badge { margin-left: .35rem; }
.login-controls { display: flex; gap: .35rem; align-items: center; }
.login-controls select { padding: .32rem .45rem; }
[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: #181b20;
  --app-surface: #20242a;
  --app-surface-alt: #242930;
  --app-text: #d7dce2;
  --app-muted: #9aa3ae;
  --app-border: #343a42;
  --app-primary: #6f8fab;
  --app-primary-soft: #263441;
  --app-success: #6f957c;
  --app-warning: #c2a061;
  --app-danger: #c47b7b;
}
[data-theme="dark"] body { background: var(--app-bg); color: var(--app-text); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] button, [data-theme="dark"] .button { background: var(--app-surface); color: var(--app-text); border-color: var(--app-border); }
[data-theme="dark"] button { background: var(--app-primary); color: #111820; }
[data-theme="dark"] .preview-html { background: #fff; }
@media (max-width: 760px) {
  .preview-drawer { width: 94vw; }
  .preview-resize-handle { display: none; }
  .security-grid { grid-template-columns: 1fr; }
}

/* v1.0.9 UX/theme corrections */
html[data-theme="dark"] body,
html[data-theme="dark"] .container { background: #181b20 !important; color: #d7dce2 !important; }
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .preview-drawer,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .messages-card,
html[data-theme="dark"] .patterns-card,
html[data-theme="dark"] .login-card { background: #20242a !important; color: #d7dce2 !important; border-color: #343a42 !important; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .selection-button,
html[data-theme="dark"] .chip { background: #242930 !important; color: #d7dce2 !important; border-color: #343a42 !important; }
html[data-theme="dark"] .message-row:hover,
html[data-theme="dark"] tr:hover { background: #2a3038 !important; }
html[data-theme="dark"] th,
html[data-theme="dark"] thead th { background: #20242a !important; color: #d7dce2 !important; }
html[data-theme="dark"] td { color: #d7dce2 !important; border-color: #343a42 !important; }
html[data-theme="dark"] .muted,
html[data-theme="dark"] .small { color: #9aa3ae !important; }
html[data-theme="dark"] a { color: #9bb7d1; }
html[data-theme="dark"] .brand { color: #d7dce2 !important; }
html[data-theme="dark"] .top-link { color: #aebdca !important; }
html[data-theme="dark"] .badge,
html[data-theme="dark"] .scope-badge,
html[data-theme="dark"] .version-badge { background: #242930 !important; color: #c8d0d8 !important; border-color: #343a42 !important; }
html[data-theme="dark"] .preview-html-warning { background: #2a2923 !important; }
html[data-theme="dark"] .preview-html { background: #fff !important; color: #111 !important; }
.pattern-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.4rem; margin-left:auto; }
.pattern-check-col { width: 38px; text-align:center; }
.pattern-row.selected-pattern { background: var(--app-primary-soft) !important; }
html[data-theme="dark"] .pattern-row.selected-pattern { background:#263441 !important; }

/* v1.0.9 traceability */
.trace-summary { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.7rem; margin:.8rem 0; }
.trace-summary .card { padding:.8rem; display:grid; gap:.2rem; }
.trace-summary strong { font-size:1.35rem; }
.filters-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; align-items:end; }
.filters-grid label { display:grid; gap:.3rem; }
.filter-actions { display:flex; gap:.4rem; align-items:center; }
@media(max-width:900px){ .filters-grid{grid-template-columns:1fr 1fr}.trace-summary{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .filters-grid,.trace-summary{grid-template-columns:1fr} }