* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f5f7fb; color: #1f2937; }
a { color: #0f5ec7; text-decoration: none; }
a:hover { text-decoration: underline; }
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: #111827; color: #fff; padding: 24px; }
.brand { font-size: 20px; font-weight: 700; margin-bottom: 24px; }
.nav { display: flex; flex-direction: column; gap: 10px; }
.nav a { color: #e5e7eb; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.05); transition: background .2s ease, transform .2s ease; }
.nav a:hover { background: rgba(255,255,255,0.1); text-decoration: none; transform: translateX(2px); }
.nav a.is-active { background: rgba(255,255,255,0.16); color: #fff; }
.sidebar-meta { margin-top: 24px; font-size: 13px; color: #cbd5e1; }
.content { flex: 1; padding: 28px; }
.card { background: #fff; border-radius: 14px; padding: 20px; margin-bottom: 20px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06); }
.card.narrow { max-width: 420px; }
h1, h2 { margin-top: 0; }
.muted { color: #6b7280; }
.notice { padding: 14px 16px; border-radius: 10px; margin-bottom: 18px; }
.notice-warning { background: #fff4db; color: #8a5b00; }
.notice-info { background: #eaf2ff; color: #1849a9; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06); }
.stat-link { color: inherit; }
.stat-link:hover { text-decoration: none; transform: translateY(-1px); }
.stat-label { font-size: 13px; color: #6b7280; margin-bottom: 8px; }
.stat-value { font-size: 30px; font-weight: 700; }
.filters, .stack, .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.filters-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
.filters-grid label { display: block; margin-bottom: 6px; font-size: 13px; color: #4b5563; }
.filters-actions { display: flex; gap: 10px; align-items: center; }
.filter-checkbox-wrap { display: flex; align-items: end; }
.quick-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.stack { flex-direction: column; align-items: stretch; }
input[type="text"], input[type="password"], select { width: 100%; max-width: 520px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; }
button, .button { display: inline-block; background: #0f5ec7; color: #fff; border: 0; padding: 10px 14px; border-radius: 8px; cursor: pointer; text-decoration: none; }
button:hover, .button:hover { text-decoration: none; }
.button.secondary { background: #6b7280; }
.checkbox { display: flex; align-items: center; gap: 8px; }
.checkbox-inline { padding-bottom: 10px; }
.flash { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; }
.flash-success { background: #e7f8ee; color: #146c43; }
.flash-error { background: #fdeaea; color: #9f1d1d; }
.flash-warning { background: #fff4db; color: #8a5b00; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.sort-link { color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.sort-link:hover { text-decoration: none; }
.sort-indicator { color: #6b7280; font-size: 12px; }
.table-subtext { margin-top: 4px; font-size: 12px; color: #6b7280; }
.badge { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-online { background: #e7f8ee; color: #146c43; }
.badge-offline { background: #fdeaea; color: #9f1d1d; }
.badge-warning { background: #fff4db; color: #8a5b00; }
.badge-muted { background: #eef2f7; color: #475569; }
.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.page-head, .section-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag { display: inline-block; background: #eef2ff; color: #3730a3; padding: 6px 10px; border-radius: 999px; font-size: 12px; }
.tag-neutral { background: #eef2f7; color: #475569; }
.tag-platform-wordpress { background: #e7f0ff; color: #0f5ec7; }
.tag-platform-prestashop { background: #fef3f2; color: #b42318; }
.tag-platform-joomla { background: #fff7e6; color: #ad6800; }
.tag-platform-drupal { background: #e7f8ee; color: #146c43; }
.top-space { margin-top: 16px; }

.select2-container { width: 100% !important; max-width: 520px; }
.select2-container--default .select2-selection--single { height: 42px; border: 1px solid #d1d5db; border-radius: 8px; display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; padding-left: 12px; padding-right: 28px; color: #111827; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 8px; }
.select2-dropdown { border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; }
.select2-search--dropdown { padding: 8px; }
.select2-search--dropdown .select2-search__field { border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 10px; }
.select2-results__option { padding: 8px 12px; }

@media (max-width: 1100px) { .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .layout { display: block; } .sidebar { width: 100%; } .stats, .details-grid, .filters-grid { grid-template-columns: 1fr; } .content { padding: 18px; } .page-head, .section-head { display: block; } }


.stats-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.narrow-form { max-width: 520px; }
.smtp-filters-grid { grid-template-columns: 2fr 1fr 1fr; }
.smtp-log-list { display: flex; flex-direction: column; gap: 14px; }
.smtp-log-item { border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; background: #fff; }
.smtp-log-item.is-ok { border-left: 4px solid #16a34a; }
.smtp-log-item.is-failed { border-left: 4px solid #dc2626; }
.smtp-log-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.smtp-log-title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.smtp-log-meta { display: flex; flex-wrap: wrap; gap: 8px; color: #6b7280; font-size: 12px; }
.smtp-log-meta span { background: #f3f4f6; padding: 4px 8px; border-radius: 999px; }
.smtp-log-recipient { font-size: 13px; color: #374151; min-width: 240px; }
.smtp-log-error { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fef2f2; color: #991b1b; }
.smtp-log-details { margin-top: 12px; }
.smtp-log-details summary { cursor: pointer; color: #0f5ec7; font-weight: 600; }
.smtp-log-details pre { margin: 10px 0 0; padding: 14px; background: #0f172a; color: #e5e7eb; border-radius: 12px; overflow: auto; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.compact-list .smtp-log-item { padding: 14px; }
.empty-state { padding: 18px; border: 1px dashed #cbd5e1; border-radius: 12px; color: #64748b; background: #f8fafc; }
code { background: #f3f4f6; padding: 2px 6px; border-radius: 6px; }
@media (max-width: 1100px) { .smtp-filters-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) { .smtp-log-head { display: block; } .smtp-log-recipient { min-width: 0; margin-top: 10px; } .stats-compact, .smtp-filters-grid { grid-template-columns: 1fr; } }


body { line-height: 1.45; }
.card, .stat-card, .smtp-log-item { backdrop-filter: saturate(140%) blur(2px); }
.filters-grid > div { min-width: 0; }
.filters-actions { justify-content: flex-start; }
.auto-submit-note { display: inline-flex; align-items: center; min-height: 42px; padding: 0 2px; }
.is-hidden-by-js { display: none !important; }
.button.button-ghost { background: #eef2ff; color: #3730a3; }
.button.button-ghost:hover { background: #e0e7ff; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], select {
    height: 44px;
    border: 1px solid #d7deea;
    border-radius: 12px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="number"]:focus, select:focus {
    outline: 0;
    border-color: #a5b4fc;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}
.select2-container { width: 100% !important; max-width: 520px; }
.select2-container--default .select2-selection--single {
    height: 44px;
    border: 1px solid #d7deea;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: 14px;
    padding-right: 40px;
    color: #0f172a;
    font-size: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: #94a3b8;
    margin-right: 6px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
    right: 10px;
    width: 18px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #64748b transparent transparent transparent;
    border-width: 5px 5px 0 5px;
    margin-left: -5px;
    margin-top: -2px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #64748b transparent;
    border-width: 0 5px 5px 5px;
}
.select2-dropdown {
    border: 1px solid #d7deea;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
    margin-top: 6px;
}
.select2-search--dropdown {
    padding: 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}
.select2-search--dropdown .select2-search__field {
    min-height: 40px;
    border: 1px solid #d7deea !important;
    border-radius: 10px;
    padding: 8px 12px;
    background: #fff;
}
.select2-results__options {
    padding: 8px;
}
.select2-results__option {
    padding: 10px 12px;
    border-radius: 10px;
    margin: 2px 0;
    font-size: 14px;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #eef2ff;
    color: #3730a3;
}
.select2-container--default .select2-results__option--selected {
    background: #f8fafc;
    color: #0f172a;
}


.table-metric {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.select2-container--default .select2-selection--single {
    position: relative;
    min-height: 46px;
    border: 1px solid #cfd8ea;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.select2-container--default .select2-selection--single:hover {
    border-color: #b7c4ea;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-weight: 500;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 12px;
}
.select2-dropdown {
    border-radius: 16px;
    border: 1px solid #d7deea;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}
.select2-search--dropdown {
    padding: 12px;
    background: #f5f8ff;
}
.select2-search--dropdown .select2-search__field {
    min-height: 42px;
    border-radius: 12px;
    border-color: #cfd8ea !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.select2-results__option {
    min-height: 42px;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: linear-gradient(180deg, #eef2ff 0%, #e7ecff 100%);
    color: #3730a3;
}
.select2-container--default .select2-results__option--selected {
    background: #eef4ff;
    color: #0f172a;
}

.card,
.stat-card,
.smtp-log-item,
.select2-container--default .select2-selection--single,
.select2-dropdown {
    backdrop-filter: none !important;
}

.card-table {
    overflow: hidden;
}

.section-head-tight {
    margin-bottom: 14px;
}

.list-performance-note {
    font-size: 13px;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 8px 12px;
}

.table-wrap-dashboard {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.table-dashboard thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 #e5e7eb;
}

.table-dashboard tbody tr:nth-child(even) {
    background: #fbfdff;
}

.table-dashboard tbody tr:hover {
    background: #f8fbff;
}

.pager {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 14px;
}

.pager-link,
.pager-gap {
    min-width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 14px;
}

.pager-link {
    border: 1px solid #d7deea;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.pager-link:hover {
    text-decoration: none;
    border-color: #b7c4ea;
    background: #f8fbff;
}

.pager-link.is-current {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.pager-link.is-disabled {
    pointer-events: none;
    opacity: .45;
}

.pager-gap {
    color: #94a3b8;
}

@media (max-width: 960px) {
    .list-performance-note {
        display: none;
    }

    .table-dashboard thead th {
        position: static;
    }
}

.table-dashboard td .badge { white-space: nowrap; }
.table-dashboard .table-subtext { margin-top: 4px; }

.notice { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; }
.notice-warning { background: #fff4db; color: #8a5b00; }
.stats-mail-top { margin-bottom: 16px; }
.mail-report-filters-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; }
.mail-event-list { display: flex; flex-direction: column; gap: 14px; }
.mail-event-item { border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; background: #fff; }
.mail-event-item.status-success { border-left: 4px solid #16a34a; }
.mail-event-item.status-failure { border-left: 4px solid #dc2626; }
.mail-event-item.status-defer { border-left: 4px solid #d97706; }
.mail-event-item.status-inprogress { border-left: 4px solid #64748b; }
.mail-event-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.mail-event-title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.mail-event-addresses { min-width: 280px; font-size: 13px; color: #374151; }
.mail-event-message { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; color: #0f172a; }
@media (max-width: 1100px) { .mail-report-filters-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 960px) { .mail-event-head { display: block; } .mail-event-addresses { min-width: 0; margin-top: 12px; } .mail-report-filters-grid { grid-template-columns: 1fr; } }


.stat-card-link {
    display: block;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    border: 1px solid transparent;
}
.stat-card-link:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
}
.stat-card-link.is-active {
    border-color: #9db5f5;
    background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
}
.mail-auth-details summary {
    cursor: pointer;
    color: #0f5ec7;
    font-weight: 600;
}
.mail-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.mail-auth-grid > div {
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}
.mail-auth-grid ul {
    margin: 10px 0 0;
    padding-left: 18px;
}
.mail-auth-grid li {
    margin: 4px 0;
    color: #475569;
}
.mail-auth-error {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef2f2;
    color: #991b1b;
}
@media (max-width: 960px) {
    .mail-auth-grid {
        grid-template-columns: 1fr;
    }
}

.stats-mail-events {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stats-mail-auth {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.stat-card-link {
    cursor: pointer;
}

.stat-card-link.is-active {
    border-color: #84a3f3;
    background: linear-gradient(180deg, #f8fbff 0%, #e8f0ff 100%);
    box-shadow: 0 16px 30px rgba(73, 98, 184, 0.14);
}

.stat-card-link.is-active .stat-label,
.stat-card-link.is-active .stat-value {
    color: #12233f;
}

.mail-filter-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef2f7;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.filter-chip.is-active {
    background: #e8f0ff;
    color: #1d4ed8;
}

.filter-chip-info {
    background: #f8fafc;
    color: #475569;
}

.mail-report-filters-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.mail-auth-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.mail-auth-detail-list {
    display: grid;
    grid-template-columns: minmax(110px, 160px) 1fr;
    gap: 8px 12px;
    margin: 0;
}

.mail-auth-detail-list dt {
    margin: 0;
    font-weight: 700;
    color: #334155;
}

.mail-auth-detail-list dd {
    margin: 0;
    color: #475569;
    min-width: 0;
}

.mail-record-code {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    background: #eef2f7;
    color: #0f172a;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.45;
}

.mail-event-item.status-other,
.mail-event-item.status-unknown {
    border-left: 4px solid #64748b;
}

@media (max-width: 1280px) {
    .stats-mail-events {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stats-mail-auth {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mail-report-filters-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .stats-mail-events,
    .stats-mail-auth,
    .mail-report-filters-grid,
    .mail-auth-detail-list {
        grid-template-columns: 1fr;
    }

    .mail-auth-detail-list {
        display: block;
    }

    .mail-auth-detail-list dt {
        margin-bottom: 4px;
    }

    .mail-auth-detail-list dd {
        margin-bottom: 10px;
    }
}

.mail-manual-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 14px 0 18px;
}
.mail-inline-form {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin: 0;
}
.mail-inline-form-tight {
    margin-bottom: 12px;
}
.stat-card-link {
    cursor: pointer;
}

.mail-page-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}
.mail-page-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 600;
}
.mail-page-nav-link:hover { text-decoration: none; background: #e0e7ff; }
.section-anchor { scroll-margin-top: 20px; }
.mail-section-form { margin-top: 18px; }
.mail-batch-toolbar-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.mail-batch-progress {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #f8fbff;
}
.mail-batch-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}
.mail-batch-progress-bar {
    height: 12px;
    border-radius: 999px;
    background: #e5edf8;
    overflow: hidden;
}
.mail-batch-progress-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
    transition: width .18s ease;
}
.mail-batch-progress-meta { margin-top: 10px; }
.mail-event-message { margin-top: 12px; }
@media (max-width: 960px) {
    .mail-batch-progress-head { display: block; }
}

.sidebar {
    display: flex;
    flex-direction: column;
    width: 272px;
    padding: 28px 18px 18px;
    background: linear-gradient(180deg, #0b1220 0%, #111827 55%, #0f172a 100%);
    border-right: 1px solid rgba(148, 163, 184, 0.14);
}
.brand {
    margin-bottom: 6px;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.brand-subtitle {
    margin-bottom: 24px;
    color: #94a3b8;
    font-size: 13px;
}
.nav {
    gap: 10px;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.nav-link:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(148, 163, 184, 0.18);
    transform: translateX(2px);
}
.nav-link.is-active {
    background: linear-gradient(180deg, rgba(59,130,246,0.22) 0%, rgba(37,99,235,0.18) 100%);
    border-color: rgba(96, 165, 250, 0.28);
}
.nav-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    flex: 0 0 18px;
}
.nav-dashboard .nav-icon::before { content: '⌂'; }
.nav-mail .nav-icon::before { content: '✉'; }
.nav-debug .nav-icon::before { content: '⌁'; }
.nav-smtp .nav-icon::before { content: '☰'; }
.nav-settings .nav-icon::before { content: '⚙'; }
.nav-logout .nav-icon::before { content: '↪'; }
.sidebar-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sidebar-meta {
    margin-top: 0;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148, 163, 184, 0.08);
}
.sidebar-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.sidebar-meta-row:last-child { margin-bottom: 0; }
.sidebar-meta-label {
    color: #94a3b8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nav-footer .nav-link {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.16);
}
.nav-footer .nav-link:hover {
    background: rgba(239, 68, 68, 0.14);
}
.stat-card-link {
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
    border: 1px solid transparent;
}
.stat-card-link:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.stat-card-link.is-active {
    background: linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
    border-color: #bfd0ff;
    box-shadow: 0 12px 28px rgba(59, 130, 246, 0.10);
}
.mail-page-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 22px;
}
.mail-page-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe4f2;
    color: #334155;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.mail-page-nav-link:hover { text-decoration: none; background: #f8fbff; }
.mail-event-side {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    justify-content: flex-end;
}
.js-inline-toggle.is-open {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #312e81;
}
.inline-detail-panel {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid #dbe4f2;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.inline-detail-panel-table {
    margin-top: 0;
}
.inline-detail-row > td {
    padding: 0 14px 18px;
    background: #f8fbff;
    border-top: 0;
}
.inline-detail-row .inline-detail-panel {
    margin-top: 0;
}
.mail-event-inline-detail {
    margin-top: 14px;
}
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.detail-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    background: #fff;
}
.mail-auth-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.mail-record-code-block {
    margin: 12px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 14px;
    border-radius: 12px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 12px;
    overflow: auto;
}
@media (max-width: 960px) {
    .sidebar { width: 100%; }
    .mail-event-side, .mail-auth-detail-head { display: block; }
    .mail-event-side .button, .mail-auth-detail-head .button { margin-top: 12px; }
    .detail-grid { grid-template-columns: 1fr; }
}

.mail-event-inline-hint {
    color: #6b7280;
    margin-top: 10px;
}
.mail-event-inline-hint strong {
    color: #1f2937;
}

:root {
    --bg: #f3f6fb;
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --text: #0f172a;
    --muted: #64748b;
    --brand: #4f46e5;
    --brand-dark: #312e81;
    --danger: #b42318;
    --danger-soft: #fef3f2;
    --success-soft: #e7f8ee;
    --warning-soft: #fff7db;
    --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
    --sidebar-width: 320px;
}

html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(circle at top right, rgba(79, 70, 229, 0.08), transparent 24%),
        linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
    color: var(--text);
}
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 10px 14px;
    background: #111827;
    color: #fff;
    border-radius: 10px;
}
.skip-link:focus {
    left: 14px;
    top: 14px;
}
.notice-success {
    background: #e8fff0;
    color: #166534;
}
.notice-error {
    background: #fef2f2;
    color: #991b1b;
}
.layout {
    align-items: stretch;
}
.sidebar {
    width: var(--sidebar-width);
    padding: 16px;
    background: linear-gradient(180deg, #0f172a 0%, #111827 46%, #172033 100%);
}
.sidebar-shell {
    position: sticky;
    top: 0;
    height: calc(100vh - 32px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    box-shadow: 0 30px 70px rgba(2, 6, 23, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar-brand-block {
    padding: 22px 22px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.16) 0%, rgba(79, 70, 229, 0) 100%);
}
.brand {
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.brand-subtitle {
    font-size: 13px;
    line-height: 1.55;
    color: #cbd5e1;
}
.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.22) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 8px; }
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.16);
    border-radius: 999px;
}
.nav {
    gap: 8px;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent !important;
}
.nav-link:hover {
    transform: translateX(0);
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.08) !important;
}
.nav-link.is-active {
    border-color: rgba(165, 180, 252, 0.18);
    background: linear-gradient(180deg, rgba(79,70,229,0.32) 0%, rgba(79,70,229,0.18) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.nav-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c7d2fe;
}
.nav-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}
.nav-icon::before { content: none !important; }
.sidebar-bottom {
    margin-top: auto;
    padding: 16px 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.48);
}
.sidebar-meta {
    margin-top: 0;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
}
.sidebar-meta-row {
    gap: 10px;
}
.sidebar-meta-label {
    color: #94a3b8;
}
.content {
    padding: 26px 28px 34px;
}
.page-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 24px;
    margin-bottom: 20px;
    border: 1px solid rgba(79, 70, 229, 0.10);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,249,255,0.98) 100%);
    box-shadow: var(--shadow-soft);
}
.page-hero-tight { margin-bottom: 18px; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.08);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.hero-copy {
    max-width: 860px;
    margin: 0;
}
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.hero-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: rgba(255,255,255,0.8);
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}
.card,
.stat-card,
.smtp-log-item {
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
}
.card {
    padding: 22px;
}
.stats {
    gap: 14px;
}
.stat-card {
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(79,70,229,0.75) 0%, rgba(59,130,246,0.72) 100%);
    opacity: 0;
    transition: opacity .18s ease;
}
.stat-card:hover::after,
.stat-card.is-active::after {
    opacity: 1;
}
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 20px;
}
.kpi-strip-mail {
    margin-top: 18px;
}
.kpi-card {
    padding: 18px 18px 16px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,250,255,0.95) 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}
.kpi-label {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}
.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}
.kpi-meta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
}
.quick-filters {
    gap: 10px;
}
.tag,
.filter-chip {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
}
.filters-grid {
    gap: 16px 18px;
}
.filters-actions {
    gap: 8px;
}
.table-wrap {
    border-radius: 18px;
}
.table-wrap table {
    border-collapse: separate;
    border-spacing: 0;
}
.table-wrap thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
}
.table-wrap tbody tr:last-child td {
    border-bottom: 0;
}
.table-dashboard tbody tr.row-attention,
.table-wrap tbody tr.row-attention {
    background: linear-gradient(90deg, rgba(254, 242, 242, 0.72) 0%, rgba(255,255,255,0) 70%);
}
.row-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.table-action-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #d7deea;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.table-action-link:hover {
    text-decoration: none;
    background: #f8fbff;
    border-color: #b7c4ea;
}
button.table-action-link {
    cursor: pointer;
}
.table-action-link-inline {
    padding: 0;
    min-height: 0;
    border: 0;
    background: transparent;
    color: var(--brand);
    font-weight: 600;
}
.table-summary-text {
    display: inline-block;
    min-width: 180px;
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
}
.text-danger {
    color: var(--danger);
}
.mail-page-nav {
    margin-bottom: 18px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(226, 232, 240, 0.92);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.mail-page-nav-link {
    padding: 10px 14px;
    border-radius: 999px;
    color: #334155;
    font-weight: 600;
}
.mail-page-nav-link:hover {
    background: #eef2ff;
}
.mail-filter-summary {
    gap: 10px;
}
.mail-manual-actions {
    border-radius: 20px;
}
.detail-card,
.mail-manual-actions {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
@media (max-width: 1280px) {
    .kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 960px) {
    .layout {
        display: block;
    }
    .sidebar {
        width: 100%;
        padding: 14px 14px 0;
    }
    .sidebar-shell {
        position: static;
        height: auto;
    }
    .sidebar-scroll {
        overflow: visible;
    }
    .content {
        padding: 18px 14px 28px;
    }
    .page-hero,
    .page-head,
    .section-head,
    .mail-event-head,
    .mail-auth-detail-head {
        display: block;
    }
    .page-hero .actions,
    .page-head .actions,
    .section-head .actions {
        margin-top: 14px;
    }
    .kpi-strip,
    .stats,
    .filters-grid,
    .details-grid,
    .detail-grid {
        grid-template-columns: 1fr !important;
    }
    .mail-page-nav {
        display: flex;
    }
    .table-summary-text {
        min-width: 0;
    }
}

/* 2026-04-21 follow-up refinements */
.nav-main {
    display: flex;
    flex-direction: column;
}
.nav-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nav-group-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    align-items: stretch;
}
.nav-group .nav-link {
    margin-bottom: 0;
}
.nav-group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.nav-group-toggle:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.08);
}
.nav-caret {
    width: 16px;
    height: 16px;
    color: #94a3b8;
    transition: transform .18s ease, color .18s ease;
}
.nav-group.is-open .nav-caret,
.nav-group-toggle[aria-expanded="true"] .nav-caret {
    transform: rotate(90deg);
    color: #c7d2fe;
}
.nav-submenu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: -2px 0 4px;
    padding: 0 0 0 18px;
}
.nav-submenu[hidden] {
    display: none !important;
}
.nav-sublink {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 14px;
    color: #cbd5e1;
    border: 1px solid transparent;
    background: rgba(15, 23, 42, 0.18);
    font-size: 14px;
}
.nav-sublink .nav-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
}
.nav-sublink .nav-icon svg {
    width: 18px;
    height: 18px;
}
.nav-sublink:hover {
    text-decoration: none;
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
}
.nav-sublink.is-active {
    color: #ffffff;
    background: rgba(79,70,229,0.22);
    border-color: rgba(165,180,252,0.16);
}
.nav-link.is-active,
.nav-sublink.is-active {
    font-weight: 600;
}
.general-grid {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 20px;
}
.general-stack {
    display: grid;
    gap: 20px;
}
.metric-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.metric-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.metric-card {
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}
.metric-label {
    display: block;
    margin-bottom: 10px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.metric-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: #0f172a;
}
.metric-meta {
    margin-top: 8px;
    color: #64748b;
    font-size: 13px;
}
.mini-list {
    display: grid;
    gap: 12px;
}
.mini-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
}
.mini-item-title {
    font-weight: 700;
    color: #0f172a;
}
.mini-item-meta {
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
}
.inline-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
@media (max-width: 1200px) {
    .general-grid,
    .metric-grid-4,
    .metric-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 960px) {
    .nav-submenu {
        padding-left: 12px;
    }
    .general-grid,
    .metric-grid-4,
    .metric-grid-3 {
        grid-template-columns: 1fr;
    }
}


.sidebar {
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    flex: 0 0 var(--sidebar-width) !important;
}
.content {
    min-width: 0;
}
.button-inline-detail[aria-expanded="true"] {
    background: #dbe4ff;
    color: #2d3a8c;
}
.inline-detail-panel[hidden],
.inline-detail-row[hidden] {
    display: none !important;
}
@media (max-width: 960px) {
    .sidebar {
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }
}


/* Native disclosure patterns: sidebar + inline details */
:root {
    --sidebar-width: 336px;
}

.mail-event-item > summary,
.mail-auth-row-disclosure > summary,
.nav-group > summary {
    list-style: none;
}
.mail-event-item > summary::-webkit-details-marker,
.mail-auth-row-disclosure > summary::-webkit-details-marker,
.nav-group > summary::-webkit-details-marker {
    display: none;
}

.mail-event-item {
    overflow: hidden;
}
.mail-event-summary {
    cursor: pointer;
}
.mail-event-item[open] .button-inline-detail-label .when-closed,
.mail-auth-row-disclosure[open] .button-inline-detail-label .when-closed {
    display: none;
}
.button-inline-detail-label .when-open {
    display: none;
}
.mail-event-item[open] .button-inline-detail-label .when-open,
.mail-auth-row-disclosure[open] .button-inline-detail-label .when-open {
    display: inline;
}
.mail-event-item[open] .button-inline-detail-label,
.mail-auth-row-disclosure[open] .button-inline-detail-label {
    background: #dbe4ff;
    color: #2d3a8c;
}
.mail-event-item .mail-event-inline-detail {
    margin-top: 14px;
}

.mail-auth-row-wrapper > td {
    padding: 0;
    border-top: 0;
    background: transparent;
}
.mail-auth-row-cell {
    padding: 0 !important;
}
.mail-auth-row-disclosure {
    display: block;
    border-bottom: 1px solid #eef2ff;
}
.mail-auth-row-summary {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) minmax(130px, 1fr) repeat(5, minmax(84px, .68fr)) minmax(160px, .9fr) minmax(200px, 1.5fr) 120px;
    gap: 12px;
    align-items: start;
    padding: 14px;
    cursor: pointer;
    background: #fff;
}
.mail-auth-row-disclosure[open] .mail-auth-row-summary {
    background: #f8fbff;
}
.mail-auth-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mail-auth-cell-actions {
    align-items: flex-end;
    justify-content: center;
}
.mail-auth-cell .table-subtext {
    margin-top: 0;
}
.mail-auth-row-disclosure .inline-detail-panel {
    margin: 0 14px 18px;
}
.mail-auth-row-disclosure .inline-detail-panel-table {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
@media (max-width: 1280px) {
    .mail-auth-row-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mail-auth-cell-actions {
        align-items: flex-start;
    }
}
@media (max-width: 960px) {
    .mail-auth-row-summary {
        grid-template-columns: 1fr;
    }
    .mail-auth-row-disclosure .inline-detail-panel {
        margin: 0 10px 14px;
    }
}

/* Sidebar details submenu */
.nav-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nav-group-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    align-items: stretch;
    cursor: pointer;
}
.nav-group-summary .nav-link {
    pointer-events: none;
}
.nav-group[open] .nav-caret {
    transform: rotate(90deg);
    color: #c7d2fe;
}
.nav-group[open] .nav-group-toggle {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.08);
}
.nav-group .nav-submenu {
    display: none;
}
.nav-group[open] .nav-submenu {
    display: flex;
}
.nav-group.is-active-group .nav-link {
    border-color: rgba(165, 180, 252, 0.18);
}
.sidebar {
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    flex: 0 0 var(--sidebar-width) !important;
}


/* Notifications center */
.notification-section {
    border: 1px solid #e6ebf5;
}
.notification-section-critical {
    border-color: #f3d1d1;
}
.notification-section-attention {
    border-color: #f3e3bf;
}
.notification-list {
    display: grid;
    gap: 16px;
}
.notification-card {
    border: 1px solid #e6ebf5;
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.notification-card-critical {
    border-left: 5px solid #dc2626;
}
.notification-card-attention {
    border-left: 5px solid #d97706;
}
.notification-card-info {
    border-left: 5px solid #64748b;
}
.notification-card-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}
.notification-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.notification-card h3 {
    margin: 0;
    font-size: 22px;
    color: #0f172a;
}
.notification-summary {
    margin: 10px 0 0;
    max-width: 90ch;
}
.notification-timestamps {
    min-width: 220px;
    display: grid;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}
.notification-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 16px;
}
.notification-panel {
    border: 1px solid #e8edf7;
    border-radius: 16px;
    padding: 16px;
    background: #fff;
}
.notification-panel h4 {
    margin: 0 0 12px;
    color: #0f172a;
}
.notification-steps {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 10px;
}
.notification-facts {
    margin: 0;
    display: grid;
    gap: 12px;
}
.notification-facts div {
    display: grid;
    gap: 4px;
}
.notification-facts dt {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
}
.notification-facts dd {
    margin: 0;
    color: #0f172a;
    word-break: break-word;
}
.notification-links {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
@media (max-width: 1100px) {
    .notification-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 960px) {
    .notification-card-head {
        display: block;
    }
    .notification-timestamps {
        min-width: 0;
        margin-top: 14px;
    }
}


/* Notification muting controls */
.tag-muted {
    background: #ede9fe;
    color: #5b21b6;
}
.notification-card.is-muted {
    background: linear-gradient(180deg, #fcfcff 0%, #f8fafc 100%);
    border-style: dashed;
}
.notification-actions-bar {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e8edf7;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.notification-inline-form {
    display: inline-flex;
}
.notification-inline-form button {
    white-space: nowrap;
}
.notification-muted-note {
    font-size: 13px;
    color: #475569;
    margin-right: 8px;
}
.button.button-success {
    background: #15803d;
    color: #fff;
}
.button.button-success:hover {
    background: #166534;
}