* {
    box-sizing: border-box
}

html {
    min-width: 320px;
    scroll-behavior: smooth
}

body {
    margin: 0;
    min-height: 100vh;
    font-size: var(--ui-font-size-base);
    line-height: var(--ui-line-height);
}

strong,
b {
    font-weight: var(--ui-font-weight-medium);
}

a {
    color: var(--brand);
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

button,
input,
select {
    font: inherit
}

button,
a,
input,
select {
    outline-offset: 3px
}

:focus-visible {
    outline: 3px solid rgba(49, 87, 213, .34)
}

.container {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto
}

.skip-link {
    position: fixed;
    top: -80px;
    left: 16px;
    z-index: 1000;
    background: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: var(--shadow)
}

.skip-link:focus {
    top: 16px
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    gap: 24px
}

.brand {
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em
}

.brand:hover {
    text-decoration: none
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 20px
}

.main-nav a,
.link-button {
    color: #3b475d;
    font-weight: 600
}

.link-button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer
}

.nav-toggle {
    display: none;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--ui-radius-md);
    padding: 6px 10px;
    font-size: var(--ui-font-size-sm);
}

.page-shell {
    padding-block: 32px 48px;
    min-height: calc(100vh - 122px)
}

.footer {
    padding: 14px 0;
    color: var(--muted);
    border-top: 1px solid var(--line);
    font-size: var(--ui-font-size-sm)
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-8);
    margin: 0 auto 12px !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-header h1, .page-header h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -.02em;
    font-weight: var(--ui-font-weight-medium);
    font-family: var(--ui-font-sans);
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-bold);
    color: var(--brand)
}

.muted {
    color: var(--muted)
}

.page-header p {
    margin: 0;
    max-width: 760px;
    color: var(--ui-text-muted) !important;
    font-size: var(--ui-font-size-sm);
    line-height: 1.5;
}

.page-header i {
    color: var(--ui-primary);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px
}

.stat-card {
    padding: var(--ui-card-padding-y) var(--ui-card-padding-x);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--shadow);
    min-width: 0
}

.stat-card span {
    display: block;
    color: var(--muted);
    font-size: var(--ui-font-size-xs);
    margin-bottom: 6px
}

.stat-card strong {
    display: block;
    font-size: var(--ui-font-size-lg);
    line-height: var(--ui-line-height-tight);
    overflow-wrap: anywhere
}

.stat-card .small-value {
    font-size: var(--ui-font-size-md)
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px
}

.status-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--ui-radius-lg)
}

.status-item small {
    display: block;
    color: var(--muted)
}

.status-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #9aa4b2;
    flex: none
}

.status-dot.ok {
    background: #12a66a
}

.status-dot.warn {
    background: #f2a900
}

.status-dot.bad {
    background: #d92d20
}

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.card {
    background: var(--ui-surface);
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: none;
    margin-bottom: 18px;
    min-width: 0;
}

.card.flush {
    overflow: hidden
}

.card.narrow {
    max-width: 680px
}

.card-header {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    background: #fbfcfe;
    border-bottom: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
}

.card-header h2, .card-header h3, .card-header h5 {
    margin: 0;
    font-size: var(--ui-font-size-md);
    font-weight: var(--ui-font-weight-medium);
}

.card-body {
    padding: 12px;
}

.card-footer {
    padding: 9px 12px;
    border-top: 1px solid var(--ui-border);
    background: #fbfcfe;
    border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
}

.list-stack {
    display: grid
}

.list-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    color: var(--text);
    min-width: 0
}

.list-row:first-child {
    border-top: 0
}

.list-row:hover {
    text-decoration: none;
    background: var(--surface-soft)
}

.list-row span {
    min-width: 0
}

.list-row small {
    display: block;
    color: var(--muted);
    margin-top: 2px
}

.list-row time {
    font-size: var(--ui-font-size-xs);
    color: var(--muted);
    white-space: nowrap
}

.empty-state {
    text-align: center;
    padding: 28px 16px;
    color: var(--muted);
    font-size: var(--ui-font-size-sm)
}

.filter-bar {
    display: flex;
    align-items: end;
    gap: 10px;
    margin-bottom: 18px
}

.filter-bar .grow {
    flex: 1
}

.filter-bar input,
.filter-bar select,
.form-control,
.form-group input,
select {
    width: 100%;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    padding: 4px 8px;
    min-height: var(--ui-control-height-md);
    font-size: var(--ui-font-size-sm);
    background: #fff;
    color: var(--text)
}

.filter-bar select {
    width: auto;
    min-width: 150px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: #fff;
    color: var(--ui-text);
    padding: 4px 8px;
    min-height: 28px;
    font-size: var(--ui-font-size-sm);
    cursor: pointer;
    font-weight: var(--ui-font-weight-medium);
    line-height: 1.2;
    white-space: nowrap
}

.btn:hover {
    text-decoration: none;
    background: #f6f8fb
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff
}

.btn-primary:hover {
    background: var(--brand-dark)
}

.btn-danger {
    color: var(--danger);
    border-color: #efb6b1
}

.btn-success {
    color: var(--success);
    border-color: #9ed3bc
}

.btn-small {
    padding: 3px 8px;
    min-height: 24px;
    font-size: var(--ui-font-size-xs)
}

.btn-block {
    width: 100%
}

.inline-form {
    display: inline
}

.table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #bdc7d4 #f5f7fa;
}

.table-wrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-wrap::-webkit-scrollbar-track {
    background: #f5f7fa;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: #bdc7d4;
    border: 1px solid #f5f7fa;
    border-radius: 999px;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px
}

th,
td {
    text-align: left;
    padding: 6px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

th {
    font-size: var(--ui-font-size-xs);
    line-height: 1.25;
    font-weight: var(--ui-font-weight-bold);
    color: var(--ui-text-muted);
    font-family: var(--ui-font-sans);
    text-transform: none;
    white-space: nowrap;
    background: #f7f9fc;
}

td {
    font-size: var(--ui-font-size-sm);
    line-height: var(--ui-line-height);
    font-weight: var(--ui-font-weight-regular);
    color: var(--ui-text);
    font-family: var(--ui-font-sans);
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr:hover {
    background: #f7faff;
}

.actions {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-top: 16px;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--ui-radius-pill);
    padding: 2px 6px;
    min-height: 20px;
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-regular);
    background: #e9edf5;
    color: #344054
}

.badge-active,
.badge-ok {
    background: #dff7eb;
    color: #05603a
}

.badge-disabled,
.badge-error,
.badge-oversized {
    background: #fee4e2;
    color: #912018
}

.badge-warning {
    background: #fff0c2;
    color: #774d00
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 24px;
}

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    margin-bottom: 4px;
    color: var(--ui-text);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
}

.help-text {
    font-size: var(--ui-font-size-xs);
    color: var(--ui-text-muted);
    margin-top: 4px;
    line-height: var(--ui-line-height);
}

.help-text ul {
    padding-left: 18px;
}

.form-errors,
.field-error {
    color: #8d1b13;
    background: #fff1f0;
    border: 1px solid #ffc7c2;
    border-radius: var(--ui-radius-sm);
    padding: 7px 10px;
    font-size: var(--ui-font-size-xs);
    margin: 6px 0;
}

.input-group {
    display: flex;
    align-items: stretch;
}

.input-group input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.input-group span {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--ui-border);
    border-left: 0;
    border-top-right-radius: var(--ui-radius-sm);
    border-bottom-right-radius: var(--ui-radius-sm);
    background: var(--ui-surface-soft);
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-sm);
    white-space: nowrap;
}

.auth-card {
    width: min(460px, 100%);
    margin: 7vh auto;
    padding: 22px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: none;
}

.auth-card h1 {
    margin: .2rem 0 .25rem;
    font-size: var(--ui-font-size-xl);
    font-weight: var(--ui-font-weight-bold);
}

.alerts {
    margin-bottom: 12px;
}

.alert {
    padding: 9px 11px;
    border: 1px solid #bfd1ec;
    background: #edf5ff;
    border-radius: var(--ui-radius-md);
    margin-bottom: 8px;
    font-size: var(--ui-font-size-xs);
    line-height: var(--ui-line-height);
}

.alert-success {
    background: #e5f8ee;
    border-color: #a5dfc2;
}

.alert-error,
.alert-danger {
    background: #fff0ef;
    border-color: #f6b7b1;
}

.alert-warning {
    background: #fff7dc;
    border-color: #edd48b;
}

.mailbox-view {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden
}

.mailbox-view-header {
    padding: var(--ui-card-padding-y) var(--ui-card-padding-x)
}

.mailbox-heading {
    min-width: 0
}

.mailbox-back-link,
.message-back-link {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-medium);
    margin-bottom: 4px
}

.mailbox-back-link:hover,
.message-back-link:hover {
    color: var(--brand);
    text-decoration: none
}

.mailbox-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0
}

.mailbox-title-line h1 {
    font-size: var(--ui-font-size-lg);
    line-height: var(--ui-line-height-tight);
    letter-spacing: -.02em;
    margin: 0;
    min-width: 0
}

.mailbox-counts {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: var(--ui-font-size-xs)
}

.mailbox-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fbfcfe
}

.mailbox-filter-bar .grow {
    flex: 1;
    min-width: 220px
}

.mailbox-filter-bar input,
.mailbox-filter-bar select {
    min-height: var(--ui-control-height-md);
    border: 1px solid #c6d0df;
    border-radius: var(--ui-radius-md);
    padding: 6px 10px;
    font-size: var(--ui-font-size-sm);
    background: #fff;
    color: var(--text)
}

.mailbox-filter-bar input {
    width: 100%
}

.mailbox-filter-bar select {
    width: auto;
    min-width: 132px
}

.mailbox-filter-button {
    min-height: var(--ui-control-height-md);
    padding: 6px 12px;
    font-size: var(--ui-font-size-sm);
}

.message-list {
    display: grid
}

.message-row {
    display: grid;
    grid-template-columns: 8px minmax(150px, .55fr) minmax(0, 1.55fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 8px 16px;
    color: var(--text);
    border-bottom: 1px solid #e7ebf1;
    min-width: 0;
    background: #fff
}

.message-row:last-child {
    border-bottom: 0
}

.message-row:hover {
    text-decoration: none;
    background: #f7f9fc
}

.message-row.unread {
    background: #f2f6ff
}

.message-row.unread:hover {
    background: #edf3ff
}

.message-row.unread .message-sender strong,
.message-row.unread .message-subject-text {
    font-weight: 800
}

.message-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c8d0dc
}

.unread .message-status {
    background: var(--brand)
}

.message-sender,
.message-content {
    min-width: 0
}

.message-sender strong {
    display: block;
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium)
}

.message-sender small {
    display: block;
    color: var(--muted);
    font-size: var(--ui-font-size-xs);
    margin-top: 1px
}

.message-subject-line {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ui-font-size-sm)
}

.message-subject-text {
    font-weight: var(--ui-font-weight-medium)
}

.message-preview {
    color: #667085;
    font-weight: 400
}

.message-secondary {
    display: block;
    color: #8a94a6;
    font-size: .72rem;
    margin-top: 2px
}

.message-attachment {
    color: #596579;
    font-weight: 500
}

.message-time {
    font-size: var(--ui-font-size-xs);
    color: var(--muted);
    white-space: nowrap;
    text-align: right
}

.mailbox-empty {
    min-height: 120px;
    display: grid;
    place-items: center
}

.message-reader {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden
}

.message-reader-header {
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--line)
}

.message-reader-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.message-reader-toolbar .message-back-link {
    margin: 0
}

.message-actions {
    display: flex;
    align-items: center;
    gap: 7px
}

.message-actions form {
    margin: 0
}

.message-reader-subject {
    margin: 14px 0 14px;
    font-size: var(--ui-font-size-xl);
    line-height: var(--ui-line-height-tight);
    letter-spacing: -.025em
}

.message-sender-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #0b4ff5;
    font-weight: 800
}

.message-sender-identity {
    min-width: 0
}

.message-sender-primary {
    font-size: var(--ui-font-size-md);
    line-height: var(--ui-line-height-compact)
}

.message-sender-primary strong {
    font-size: var(--ui-font-size-sm)
}

.message-sender-primary span {
    color: var(--muted)
}

.message-routing-details {
    margin-top: 2px;
    color: var(--muted);
    font-size: .78rem
}

.message-routing-details summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style: none
}

.message-routing-details summary::-webkit-details-marker {
    display: none
}

.message-routing-details summary::after {
    content: "⌄";
    font-size: .8rem
}

.message-routing-details[open] summary::after {
    content: "⌃"
}

.message-routing-details dl {
    display: grid;
    gap: 5px;
    margin: 8px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--ui-radius-md);
    background: #f8fafc;
    color: var(--text);
    max-width: 760px
}

.message-routing-details dl>div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px
}

.message-routing-details dt {
    color: var(--muted);
    font-weight: 500
}

.message-routing-details dd {
    margin: 0
}

.message-reader-time {
    font-size: var(--ui-font-size-xs);
    color: var(--muted);
    white-space: nowrap;
    padding-top: 2px
}

.message-inline-warning {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: var(--ui-radius-md);
    background: #fff7dc;
    color: #774d00;
    font-size: var(--ui-font-size-sm)
}

.message-body {
    background: #fff;
    min-height: 260px
}

.message-security-note {
    padding: 6px 16px;
    border-bottom: 1px solid #edf0f4;
    background: #fbfcfe;
    color: #7b8495;
    font-size: var(--ui-font-size-xs)
}

.email-frame {
    width: 100%;
    border: 0;
    background: #fff
}

.unified-email-frame {
    display: block;
    height: clamp(460px, 65vh, 800px)
}

.email-plain-body {
    padding: 24px 26px 30px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--ui-font-sans);
    font-size: var(--ui-font-size-base);
    line-height: var(--ui-line-height-relaxed);
    color: #172033
}

.message-empty-body {
    min-height: 260px;
    display: grid;
    place-items: center
}

.message-attachments {
    border-top: 1px solid var(--line);
    padding: 14px 20px 16px;
    background: #fbfcfe
}

.message-attachments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px
}

.message-attachments-header h2 {
    margin: 0;
    font-size: var(--ui-font-size-sm)
}

.message-attachments-header .muted {
    font-size: var(--ui-font-size-xs)
}

.attachment-list {
    display: grid
}

.attachment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 9px 0;
    border-top: 1px solid #e7ebf1
}

.attachment-row:first-child {
    border-top: 0
}

.attachment-row>div {
    min-width: 0
}

.attachment-row strong {
    font-size: .84rem
}

.attachment-row small {
    display: block;
    color: var(--muted);
    font-size: .72rem
}

.message-no-attachments {
    color: var(--muted);
    font-size: var(--ui-font-size-xs);
    padding-top: 4px
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 22px 0
}

.truncate {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.wrap-anywhere,
.address {
    overflow-wrap: anywhere;
    word-break: break-word
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

@media(max-width:1000px) {
    .stat-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .two-column {
        grid-template-columns: 1fr
    }

    .message-row {
        grid-template-columns: 8px minmax(130px, .55fr) minmax(0, 1.35fr) auto
    }
}

@media(max-width:760px) {
    .container {
        width: min(100% - 22px, 1180px)
    }

    .nav-toggle {
        display: inline-flex
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 58px;
        left: 11px;
        right: 11px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--ui-radius-lg);
        box-shadow: var(--shadow)
    }

    .main-nav.open {
        display: flex
    }

    .main-nav a,
    .main-nav .inline-form,
    .main-nav .link-button {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px;
        border-radius: 7px
    }

    .page-shell {
        padding-top: 22px
    }

    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--ui-space-6) !important;
    }

    .page-header>.btn {
        align-self: flex-start
    }

    .stat-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .status-grid {
        grid-template-columns: 1fr
    }

    .filter-bar {
        align-items: stretch;
        flex-direction: column
    }

    .filter-bar select {
        width: 100%
    }

    .filter-bar .btn {
        width: 100%
    }

    .table-wrap {
        overflow: visible
    }

    table {
        min-width: 0
    }

    thead {
        display: none
    }

    tbody,
    tr,
    td {
        display: block;
        width: 100%
    }

    tr {
        padding: 12px 14px;
        border-bottom: 1px solid var(--line)
    }

    td {
        border: 0;
        padding: 5px 0;
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 10px
    }

    td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .75rem;
        text-transform: uppercase;
        font-weight: 800
    }

    .actions {
        display: flex;
        flex-wrap: wrap
    }

    .actions::before {
        width: 100%
    }

    .mailbox-view-header {
        padding: 14px
    }

    .mailbox-title-line {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .mailbox-title-line h1 {
        font-size: 1.12rem;
        max-width: 100%
    }

    .mailbox-filter-bar {
        align-items: stretch;
        flex-wrap: wrap
    }

    .mailbox-filter-bar .grow {
        flex-basis: 100%;
        min-width: 0
    }

    .mailbox-filter-bar select {
        flex: 1;
        min-width: 0
    }

    .message-row {
        grid-template-columns: 7px minmax(0, 1fr) auto;
        gap: 7px;
        padding: 9px 12px;
        min-height: 64px
    }

    .message-sender {
        grid-column: 2
    }

    .message-sender small {
        display: none
    }

    .message-content {
        grid-column: 2/4
    }

    .message-subject-line {
        font-size: .84rem
    }

    .message-secondary {
        font-size: .68rem
    }

    .message-time {
        grid-column: 3;
        grid-row: 1;
        font-size: .7rem
    }

    .message-reader-header {
        padding: 14px
    }

    .message-reader-toolbar {
        align-items: flex-start
    }

    .message-reader-subject {
        font-size: 1.22rem;
        margin: 12px 0
    }

    .message-sender-card {
        grid-template-columns: 34px minmax(0, 1fr)
    }

    .message-avatar {
        width: 32px;
        height: 32px
    }

    .message-reader-time {
        grid-column: 2;
        white-space: normal;
        padding: 0
    }

    .message-routing-details dl>div {
        grid-template-columns: 1fr;
        gap: 1px
    }

    .message-security-note {
        padding: 7px 14px
    }

    .unified-email-frame {
        height: 62vh;
        min-height: 420px
    }

    .email-plain-body {
        padding: 18px 16px 24px
    }

    .message-attachments {
        padding: 12px 14px
    }

    .input-group {
        flex-wrap: wrap
    }

    .input-group input {
        border-radius: var(--ui-radius-md)
    }

    .input-group span {
        width: 100%;
        border-left: 1px solid #bfc9d8;
        border-top: 0;
        border-radius: 0 0 var(--ui-radius-md) var(--ui-radius-md);
        margin-top: -8px;
        padding-top: 13px
    }

    .auth-card {
        margin: 3vh auto;
        padding: 22px
    }

    .card-body {
        padding: 12px
    }
}

@media(max-width:430px) {
    .stat-grid {
        grid-template-columns: 1fr
    }

    .message-row {
        padding: 9px 10px
    }


    .mailbox-filter-bar select {
        flex-basis: 100%
    }

    .mailbox-filter-button {
        width: 100%
    }

    .message-actions {
        flex-wrap: wrap;
        justify-content: flex-end
    }

    .attachment-row {
        align-items: flex-start;
        flex-direction: column
    }

    .attachment-row .btn {
        width: 100%
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
    }
}

.copy-address,
.copy-mini {
    border: 0;
    background: transparent;
    color: var(--ui-text);
    padding: 2px 6px;
    margin: -2px -6px; /* Offset padding so it aligns visually with surrounding text */
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
    font: inherit;
    font-weight: var(--ui-font-weight-medium);
    text-align: left;
    overflow-wrap: anywhere;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s ease;
}

.copy-address:hover,
.copy-mini:hover {
    text-decoration: none;
    background: var(--ui-canvas);
}

.copy-address::after,
.copy-mini::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    opacity: 0.4;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    transition: opacity 0.15s ease;
}

.copy-address:hover::after,
.copy-mini:hover::after {
    opacity: 0.8;
}

.heading-copy {
    font-size: inherit;
    line-height: inherit;
    color: var(--ui-text);
    font-weight: inherit;
}

.copy-mini {
    font-size: .78rem;
    margin-left: .15rem;
}

.mailbox-summary-row {
    align-items: center
}

.toast-region {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 100;
    display: grid;
    gap: 10px;
    width: min(380px, calc(100% - 36px));
    pointer-events: none
}

.toast {
    display: block;
    padding: 13px 15px;
    border: 1px solid #bfd1ec;
    border-radius: var(--ui-radius-lg);
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow);
    pointer-events: auto
}

.toast:hover {
    text-decoration: none
}

.toast-success {
    border-color: #9ed3bc;
    background: #effaf4
}

.toast-error {
    border-color: #efb6b1;
    background: #fff3f2
}

.notification-enable {
    white-space: nowrap
}

.form-group input[type="checkbox"] {
    width: auto;
    margin-right: .45rem
}

.domain-page { max-width: 860px; color: #0f172a; }
.domain-page-title { margin: 0 0 16px; }
.domain-page-title h1 { margin: 0; font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: -.02em; }
.domain-card { padding: 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.03); }
.domain-input-row { display: flex; align-items: flex-end; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid #f1f5f9; }
.domain-field { min-width: 0; }
.domain-field-name { flex: 1; }
.domain-field-status { width: 144px; flex: 0 0 144px; }
.domain-field label { display: block; margin-bottom: 6px; color: #334155; font-size: 12px; font-weight: 600; }
.domain-control { width: 100%; height: 38px; padding: 0 12px; color: #1e293b; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 12px; }
.domain-control:focus { border-color: #2563eb; outline: 0; box-shadow: 0 0 0 2px #eff6ff; }
.domain-mono, .domain-table td:nth-child(2), .domain-table td:nth-child(3) { font-family: var(--ui-font-mono); }
.domain-get-dns, .domain-save { height: 38px; padding: 0 13px; color: #fff; background: #2563eb; border: 0; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.domain-get-dns { width: 128px; flex: 0 0 128px; }
.domain-get-dns:hover, .domain-save:hover:not(:disabled) { background: #1d4ed8; }
.domain-get-dns:disabled { opacity: .7; cursor: wait; }
.domain-error { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; font-size: 12px; }
.domain-control.is-invalid { border-color: #f87171; }
.domain-records-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 8px; font-size: 12px; }
.domain-export, .domain-copy, .domain-cancel { color: #334155; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; }
.domain-export { padding: 5px 10px; }
.domain-export:disabled { color: #94a3b8; background: #f1f5f9; border-color: #e2e8f0; cursor: not-allowed; }
.domain-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.domain-table { width: 100%; min-width: 700px; border-collapse: collapse; text-align: left; font-size: 11px; }
.domain-table th { padding: 8px 14px; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 11px; font-weight: 600; }
.domain-table td { padding: 8px 14px; color: #475569; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.domain-table tbody tr:last-child td { border-bottom: 0; }
.domain-table tbody tr:hover { background: #f8fafc; }
.domain-table td:nth-child(1) { color: #1e293b; font-family: var(--ui-font-mono); font-weight: 600; }
.domain-table td:nth-child(2) { max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.domain-table td:nth-child(3) { max-width: 280px; overflow-wrap: anywhere; }
.domain-table td:nth-child(4) { text-align: center; color: #94a3b8; }
.domain-table td:nth-child(5) { text-align: right; }
.domain-table [data-empty-dns] td { padding: 32px 14px; color: #94a3b8; text-align: center; font-family: var(--ui-font-sans); }
.domain-copy { padding: 2px 8px; background: #fff; font-size: 11px; cursor: pointer; }
.domain-copy:hover:not(:disabled), .domain-cancel:hover { background: #f1f5f9; }
.domain-copy:disabled { color: #94a3b8; cursor: not-allowed; }
.domain-confirm { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #334155; font-size: 12px; font-weight: 500; cursor: pointer; }
.domain-confirm input { width: 14px; height: 14px; accent-color: #2563eb; }
.domain-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #f1f5f9; }
.domain-save { padding: 0 16px; height: 34px; border-radius: 6px; }
.domain-save:disabled { background: #93c5fd; cursor: not-allowed; }
.domain-cancel { padding: 8px 16px; text-decoration: none; background: #fff; }

.domains-page { max-width: 1100px; margin-inline: auto; }
.domains-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.domains-heading h1 { margin: 0; color: #111827; font-size: 16px; font-weight: 700; }
.domains-add { padding: 6px 14px; color: #fff; background: #2563eb; border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; }
.domains-add:hover { background: #1d4ed8; text-decoration: none; }
.domains-card { overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.03); }
.domains-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #f1f5f9; }
.domains-search { position: relative; display: flex; align-items: center; width: min(100%, 320px); }
.domains-search .ui-icon { position: absolute; left: 10px; width: 14px; height: 14px; color: #94a3b8; }
.domains-search input { width: 100%; padding: 6px 12px 6px 30px; color: #1e293b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 12px; }
.domains-count { color: #94a3b8; font-size: 11px; white-space: nowrap; }
.domains-table-wrap { overflow-x: auto; }
.domains-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.domains-table th { padding: 10px 16px; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.domains-table td { padding: 10px 16px; color: #475569; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.domains-table tbody tr:hover { background: #f8fafc; }
.domains-table tbody tr:last-child td { border-bottom: 0; }
.domain-name { color: #0f172a; font-family: var(--ui-font-mono); font-weight: 500; }
.domain-default { display: inline-block; margin-left: 8px; padding: 2px 6px; color: #2563eb; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 4px; font-size: 10px; }
.domain-status { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 10px; }
.domain-status-active, .domain-status-verified { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.domain-status-disabled, .domain-status-failed, .domain-status-pending { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; }
.domains-number { text-align: center; font-family: var(--ui-font-mono); }
.domain-last-checked { color: #64748b; font-size: 11px; }
.domain-row-actions { display: inline-flex; justify-content: flex-end; gap: 4px; width: 100%; }
.domain-icon-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: #94a3b8; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.domain-icon-action .ui-icon { width: 15px; height: 15px; }
.domain-icon-action:hover { color: #2563eb; background: #eff6ff; }
.domain-default-action { color: #d97706; background: #fffbeb; }
.domain-default-action:disabled { cursor: default; opacity: 1; }
.domain-icon-danger:hover { color: #dc2626; background: #fef2f2; }
.domains-empty { padding: 32px 16px !important; color: #94a3b8 !important; text-align: center; }
.domain-dns-modal { width: min(680px, calc(100% - 32px)); padding: 0; color: #0f172a; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 20px 45px rgba(15,23,42,.2); }
.domain-dns-modal::backdrop { background: rgba(15,23,42,.4); backdrop-filter: blur(2px); }
.domain-dns-dialog { overflow: hidden; }
.domain-dns-header, .domain-dns-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #f1f5f9; }
.domain-dns-header h2 { margin: 0; font-size: 14px; font-weight: 600; }
.domain-dns-header h2 span { color: #2563eb; font-family: var(--ui-font-mono); font-weight: 400; }
.domain-modal-close, .domain-modal-cancel { color: #64748b; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.domain-modal-close { display: inline-flex; padding: 4px; }
.domain-modal-close .ui-icon { width: 16px; height: 16px; }
.domain-dns-body { display: grid; gap: 16px; padding: 20px; }
.domain-dns-progress { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 12px; }
.domain-dns-tag { padding: 2px 6px; color: #64748b; background: #e2e8f0; border-radius: 4px; font-family: var(--ui-font-mono); font-size: 10px; }
.domain-dns-tag-success { color: #047857; background: #ecfdf5; }.domain-dns-tag-warning, .domain-dns-tag-error { color: #b45309; background: #fffbeb; }.domain-dns-tag-loading { color: #2563eb; background: #eff6ff; }
.domain-check-button { padding: 5px 10px; color: #fff; background: #2563eb; border: 0; border-radius: 5px; font-size: 11px; font-weight: 600; cursor: pointer; }
.domain-progress-track { grid-column: 1 / -1; height: 6px; overflow: hidden; background: #e2e8f0; border-radius: 999px; }.domain-progress-track span { display: block; width: 0; height: 100%; background: #2563eb; border-radius: inherit; transition: width .3s ease; }
.domain-dns-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; }.domain-dns-table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 11px; }.domain-dns-table th { padding: 8px 12px; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 10px; text-transform: uppercase; }.domain-dns-table td { max-width: 220px; padding: 8px 12px; overflow-wrap: anywhere; border-bottom: 1px solid #f1f5f9; font-family: var(--ui-font-mono); }.domain-dns-verified { color: #047857; }.domain-dns-missing { color: #b45309; }.domain-dns-footer { padding: 12px 20px 0; border-top: 1px solid #f1f5f9; border-bottom: 0; }
@media (max-width: 640px) { .domains-toolbar, .domains-heading { align-items: stretch; flex-direction: column; } .domains-search { width: 100%; } .domain-dns-progress { grid-template-columns: 1fr auto; } }

@media (max-width: 640px) {
    .domain-input-row { flex-direction: column; align-items: stretch; }
    .domain-field-status, .domain-get-dns { width: 100%; flex-basis: auto; }
    .domain-card { padding: 16px; }
}

.form-group select[multiple] {
    min-height: 180px
}

.badge-deleted {
    background: #e9e9ed;
    color: #555
}

.actions {
    flex-wrap: wrap
}

@media(max-width:760px) {
    .toast-region {
        right: 11px;
        bottom: 11px;
        width: calc(100% - 22px)
    }

    .copy-address {
        max-width: 100%
    }
}

.domain-reference-shell {
    --ui-canvas: #fafafa;
    --ui-surface-soft: #f8fafc;
    --ui-primary: #2563eb;
    --ui-primary-hover: #1d4ed8;
    --ui-text: #0f172a;
    --ui-text-muted: #64748b;
    --ui-border: #e2e8f0;
    --ui-border-strong: #cbd5e1;
    --ui-sidebar-width: 256px;
    --ui-topbar-height: 48px;
    --ui-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.domain-reference-shell .app-sidebar { padding: 16px; }
.domain-reference-shell .sidebar-header { min-height: 28px; padding: 0 0 0 4px; border-bottom: 0; }
.domain-reference-shell .sidebar-nav { padding: 16px 0; }
.domain-reference-shell .nav-item { min-height: 28px; margin: 2px 0; padding: 0 10px; border-left-width: 1px; gap: 10px; font-size: var(--ui-font-size-xs); }
.domain-reference-shell .nav-item.is-active { border-left-color: #d6e5ff; }
.domain-reference-shell .app-topbar { min-height: 48px; padding: 0 32px; }
.domain-reference-shell .topbar-context { flex-direction: row; align-items: center; gap: 8px; }
.domain-reference-shell .topbar-product::after { margin-left: 8px; color: #cbd5e1; content: '/'; }
.domain-reference-shell .topbar-domain { font-family: var(--ui-font-mono); font-size: var(--ui-font-size-xs); }
.domain-reference-shell .user-menu > summary { min-width: 0; min-height: 32px; padding: 2px 0; border: 0; border-radius: 0; }
.domain-reference-shell .user-avatar { width: 24px; height: 24px; border-radius: var(--ui-radius-sm); background: #f2f4f7; color: #344054; font-size: 10px; }
.domain-reference-shell .user-summary-copy { flex-direction: row; flex: 0 0 auto; gap: 4px; }
.domain-reference-shell .user-summary-copy strong { font-size: var(--ui-font-size-xs); font-weight: 500; }
.domain-reference-shell .user-summary-copy small { font-size: var(--ui-font-size-xs); }
.domain-reference-shell .user-summary-copy small::before { content: '('; }
.domain-reference-shell .user-summary-copy small::after { content: ')'; }
.domain-reference-shell .app-main.page-shell { padding: 24px 32px 36px; }
.domain-reference-shell .app-footer { padding: 8px 32px; }
.domain-reference-shell .app-footer-inner { min-height: 20px; }
.domain-reference-shell .domains-add,
.domain-reference-shell .domain-get-dns,
.domain-reference-shell .domain-export,
.domain-reference-shell .domain-check-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.domain-reference-shell .domains-add .ui-icon,
.domain-reference-shell .domain-get-dns .ui-icon,
.domain-reference-shell .domain-export .ui-icon,
.domain-reference-shell .domain-check-button .ui-icon { width: 14px; height: 14px; }
.domain-reference-shell .domain-dns-footer .domain-export { min-height: 28px; }

/* MailStack Updater styles moved directly to system_update.html for clean component scoping */
/* Add User page */
.user-reference-shell { --ui-sidebar-width: 256px; --ui-topbar-height: 48px; }
.user-reference-shell .app-sidebar { padding: 16px; }
.user-reference-shell .sidebar-header { min-height: 28px; padding: 0 0 0 4px; border-bottom: 0; }
.user-reference-shell .sidebar-nav { padding: 16px 0; }
.user-reference-shell .nav-item { min-height: 28px; margin: 2px 0; padding: 0 10px; border-left-width: 1px; gap: 10px; font-size: var(--ui-font-size-xs); }
.user-reference-shell .nav-item.is-active { border-left-color: #d6e5ff; }
.user-reference-shell .app-topbar { min-height: 48px; padding: 0 32px; }
.user-reference-shell .topbar-context { flex-direction: row; align-items: center; gap: 8px; }
.user-reference-shell .topbar-product::after { margin-left: 8px; color: #cbd5e1; content: '/'; }
.user-reference-shell .topbar-domain { font-family: var(--ui-font-mono); font-size: var(--ui-font-size-xs); }
.user-reference-shell .user-menu > summary { min-width: 0; min-height: 32px; padding: 2px 0; border: 0; border-radius: 0; }
.user-reference-shell .user-avatar { width: 24px; height: 24px; border-radius: var(--ui-radius-sm); background: #f2f4f7; color: #344054; font-size: 10px; }
.user-reference-shell .user-summary-copy { flex-direction: row; flex: 0 0 auto; gap: 4px; }
.user-reference-shell .user-summary-copy strong { font-size: var(--ui-font-size-xs); font-weight: 500; }
.user-reference-shell .user-summary-copy small { font-size: var(--ui-font-size-xs); }
.user-reference-shell .user-summary-copy small::before { content: '('; }
.user-reference-shell .user-summary-copy small::after { content: ')'; }
.user-reference-shell .app-main.page-shell { padding: 24px 32px 36px; }
.user-reference-shell .app-footer { padding: 8px 32px; }
.user-reference-shell .app-footer-inner { min-height: 20px; }
.user-form-page { max-width: 490px; }
.user-form-heading { margin: 0 0 16px; }
.user-form-heading h1 { margin: 2px 0 2px; color: #111827; font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -.02em; }
.user-form-heading p { margin: 0; color: var(--ui-text-muted); font-size: var(--ui-font-size-sm); }
.user-form-card { padding: 20px; border: 1px solid rgba(217,225,238,.9); border-radius: var(--ui-radius-lg); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.03); }
.user-form-card form { display: grid; gap: 16px; }
.user-field-block { min-width: 0; }
.user-field-block > label, .user-field-label-row > label { display: block; margin-bottom: 6px; color: #344054; font-size: var(--ui-font-size-sm); font-weight: 600; }
.user-field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.user-field-label-row > label { margin: 0; }
.user-status-control { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid rgba(217,225,238,.8); border-radius: var(--ui-radius-pill); background: #f8fafc; color: #667085; font-size: 10px; }
.user-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #12a66a; }
.user-status-control input { width: 28px !important; height: 16px; min-height: 16px !important; margin: 0; appearance: none; border: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer; }
.user-status-control input::after { display: block; width: 12px; height: 12px; margin: 2px; border-radius: 50%; background: #fff; content: ''; transition: transform 180ms ease; }
.user-status-control input:checked { background: var(--ui-primary); }
.user-status-control input:checked::after { transform: translateX(12px); }
.user-input-with-action { display: flex; align-items: center; min-width: 0; border: 1px solid #b8c4d6; border-radius: var(--ui-radius-md); background: #fff; transition: border-color var(--ui-transition), box-shadow var(--ui-transition); }
.user-input-with-action:focus-within { border-color: var(--ui-primary); box-shadow: 0 0 0 3px rgba(11,79,245,.08); }
.user-input-with-action input { min-width: 0; flex: 1; border: 0; background: transparent; box-shadow: none; }
.user-input-with-action input:focus { outline: 0; box-shadow: none; }
.user-input-with-action > .user-icon-action { flex: 0 0 auto; }
.user-icon-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 3px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: #98a2b3; cursor: pointer; }
.user-icon-action:hover { background: #f2f4f7; color: var(--ui-primary); }
.user-icon-action .ui-icon { width: 14px; height: 14px; }
.user-text-action { padding: 0; border: 0; background: transparent; color: var(--ui-primary); font-size: 10px; font-weight: 500; cursor: pointer; }
.user-text-action:hover { text-decoration: underline; }
.user-password-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.user-password-grid > .user-field-block > input, .user-password-grid .user-input-with-action input { font-family: var(--ui-font-mono); }
.user-selection-count { color: #98a2b3; font-size: 10px; font-weight: 500; }
.user-mailbox-picker { overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: rgba(248,250,252,.4); }
.user-mailbox-search { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--ui-border); background: #fff; color: #98a2b3; }
.user-mailbox-search .ui-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.user-mailbox-search input { min-width: 0; width: 100%; min-height: 20px; padding: 2px 0; border: 0; background: transparent; color: var(--ui-text); font-size: var(--ui-font-size-sm); }
.user-mailbox-search input:focus { outline: 0; }
.user-mailbox-list { max-height: 144px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 #f8fafc; }
.user-mailbox-list::-webkit-scrollbar { width: 4px; }
.user-mailbox-list::-webkit-scrollbar-track { background: #f8fafc; }
.user-mailbox-list::-webkit-scrollbar-thumb { border-radius: 4px; background: #cbd5e1; }
.user-mailbox-item { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid #f2f4f7; color: #344054; cursor: pointer; font-family: var(--ui-font-mono); font-size: var(--ui-font-size-sm); }
.user-mailbox-item:last-child { border-bottom: 0; }
.user-mailbox-item:hover { background: #f8fafc; }
.user-mailbox-item input { width: 14px; height: 14px; min-height: 14px; margin: 0; accent-color: var(--ui-primary); }
.user-permissions { padding: 12px; border: 1px solid rgba(217,225,238,.8); border-radius: var(--ui-radius-md); background: #f8fafc; }
.user-permissions-title { display: block; margin-bottom: 8px; color: #98a2b3; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.user-permissions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.user-permissions-grid label { display: flex; align-items: center; gap: 8px; color: #344054; cursor: pointer; font-size: var(--ui-font-size-sm); font-weight: 500; }
.user-permissions-grid input { width: 14px; height: 14px; min-height: 14px; margin: 0; accent-color: var(--ui-primary); }
.user-form-actions { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid #f2f4f7; }
.user-copy-submit { background: #f8fafc; }
.user-copy-submit.user-copy-complete { border-color: #9ed3bc; background: #effaf4; color: #087443; }
.user-cancel-action { margin-left: auto; border-color: transparent; color: #667085; }
.user-cancel-action:hover { background: #f2f4f7; color: var(--ui-text); }
@media (max-width: 620px) {
    .user-form-page { max-width: none; }
    .user-form-card { padding: 16px; }
    .user-password-grid, .user-permissions-grid { grid-template-columns: 1fr; }
    .user-form-actions { flex-wrap: wrap; }
}
/* Log modal */
.vib-modal-backdrop { position:fixed;inset:0;z-index:2080;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(15,23,42,.34);backdrop-filter:blur(3px); }
.vib-modal-backdrop[hidden] { display:none!important; }
.vib-modal-dialog { width:min(100%,940px);max-height:calc(100vh - 44px);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden;border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:#fff;color:var(--ui-text);box-shadow:none;font-family:var(--ui-font-sans); }
.vib-log-modal-header { display:grid;gap:6px;padding:10px 12px 8px;border-bottom:1px solid var(--ui-border); }
.vib-log-modal-title-row { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.vib-log-modal-title { margin:0;color:var(--ui-text);font-size:13px;line-height:1.3;font-weight:500; }
.vib-log-modal-subbar { display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap; }
.vib-log-modal-meta { display:flex;align-items:center;gap:7px;min-width:0;color:var(--ui-text-muted);font-size:10px;line-height:1.35; }
.vib-log-modal-controls { display:flex;align-items:center;gap:5px;flex:0 0 auto; }
.vib-log-close { width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);font-size:16px;line-height:1;cursor:pointer; }
.vib-log-close:hover { border-color:var(--ui-border);background:var(--ui-canvas);color:var(--ui-text); }
.vib-log-tools { display:flex;align-items:center;gap:7px;flex-wrap:nowrap;padding:7px 12px;border-bottom:1px solid var(--ui-border);background:#fbfcfe; }
.vib-log-search { position:relative;flex:1 1 220px;min-width:180px; }
.vib-log-search .vib-input { height:28px;min-height:28px;padding-left:27px; }
.vib-log-search svg { position:absolute;left:8px;top:8px;width:12px;height:12px;color:var(--ui-text-muted);pointer-events:none; }
.vib-log-filter { width:126px;height:28px;min-height:28px;flex:0 0 auto; }
.vib-log-pin { display:inline-flex;align-items:center;gap:5px;color:var(--ui-text-muted);font-size:10px;white-space:nowrap; }
.vib-log-pin input { width:13px;height:13px;margin:0;accent-color:var(--ui-primary); }
.vib-log-viewport { max-height:480px;min-height:340px;overflow:auto;padding:6px;background:var(--log-bg);border-top:1px solid var(--log-border);color:var(--ui-text);font-family:var(--ui-font-mono);font-size:10px;line-height:1.45; }
.vib-log-viewport::-webkit-scrollbar { width:6px;height:6px; }
.vib-log-viewport::-webkit-scrollbar-track { background:var(--log-bg); }
.vib-log-viewport::-webkit-scrollbar-thumb { background:#cfd8e3;border-radius:999px; }
.vib-log-row { display:grid;grid-template-columns:50px 145px minmax(0,1fr);gap:7px;align-items:baseline;min-height:20px;padding:2px 5px;border-radius:var(--ui-radius-sm);white-space:pre-wrap; }
.vib-log-row[data-level="debug"] { background:var(--log-debug-row-bg); }
.vib-log-row[data-level="warning"] { background:var(--log-warning-row-bg); }
.vib-log-badge { justify-self:start;min-width:38px;display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:999px;font-size:8.5px;line-height:1.35;font-weight:600;text-transform:lowercase;border:1px solid transparent; }
.vib-log-row[data-level="info"] .vib-log-badge { color:var(--log-info-text);background:var(--log-info-bg);border-color:#cfe1ff; }
.vib-log-row[data-level="debug"] .vib-log-badge { color:var(--log-debug-text);background:var(--log-debug-bg);border-color:#f4d6c3; }
.vib-log-row[data-level="warning"] .vib-log-badge { color:var(--log-warning-text);background:var(--log-warning-bg);border-color:#eed9a5; }
.vib-log-row[data-level="success"] .vib-log-badge { color:var(--log-success-text);background:var(--log-success-bg);border-color:#c4e8d0; }
.vib-log-row[data-level="error"] .vib-log-badge { color:var(--ui-danger);background:#fff1f2;border-color:#fecdd3; }
.vib-log-time { color:var(--ui-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap; }
.vib-log-message { min-width:0;color:var(--ui-text);overflow-wrap:anywhere; }
.vib-log-footer { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px 9px;border-top:1px solid var(--ui-border);color:var(--ui-text-muted);font-size:10px;background:#fbfcfe; }
.site-settings-page { max-width: 760px; margin: 0 auto; padding: 24px 0 40px; }
.site-settings-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.site-settings-heading h1 { margin:0; font-size:16px; line-height:1.25; font-weight:700; letter-spacing:-.01em; }
.site-settings-kicker { margin:0 0 4px; color:#64748b; font-family:var(--ui-font-mono); font-size:11px; }
.site-settings-form { display:grid; gap:16px; }
.settings-card { min-width:0; margin:0; padding:0 16px 16px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.03); }
.settings-card legend { width:calc(100% + 32px); margin:0 -16px 16px; padding:9px 16px; border-bottom:1px solid #f1f5f9; background:#f8fafc; color:#1e293b; font-size:12px; font-weight:700; }
.settings-grid { display:grid; gap:12px; }
.settings-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.settings-field { min-width:0; margin-top:12px; }
.settings-grid > .settings-field { margin-top:0; }
.settings-field label { display:block; margin-bottom:5px; color:#334155; font-size:12px; font-weight:600; }
.settings-field input, .settings-field textarea { width:100%; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#1e293b; font:inherit; font-size:12px; padding:8px 10px; transition:border-color .18s ease, box-shadow .18s ease; }
.settings-field input { min-height:32px; }
.settings-field textarea { resize:vertical; }
.settings-field input:focus, .settings-field textarea:focus { border-color:#2563eb; outline:0; box-shadow:0 0 0 3px #eff6ff; }
.settings-field input[type=file] { max-width:100%; padding:5px; }
.settings-assets { margin-top:16px; padding-top:16px; border-top:1px solid #f1f5f9; }
.settings-upload { display:flex; align-items:center; gap:12px; min-height:40px; }
.settings-preview, .settings-placeholder { width:38px; height:38px; flex:0 0 38px; border:1px solid #e2e8f0; border-radius:8px; background:#f8fafc; object-fit:contain; }
.settings-placeholder { display:grid; place-items:center; color:#94a3b8; font-family:var(--ui-font-mono); font-size:10px; font-weight:500; }
.settings-favicon-preview { width:24px; height:24px; flex-basis:24px; padding:7px; }
.site-settings-page .errorlist { margin:5px 0 0; padding:0; color:#b42318; font-size:11px; list-style:none; }
@media (max-width:700px) { .site-settings-page { padding:16px 0 28px; } .site-settings-heading { align-items:flex-start; flex-direction:column; } .settings-grid-two { grid-template-columns:1fr; } }
.vib-log-empty { padding:26px 12px;text-align:center;color:var(--ui-text-muted); }
@media(max-width:850px){.licora-updater-grid{grid-template-columns:1fr}.licora-updater-head{flex-direction:column}.licora-updater-actions{width:100%}.vib-modal-backdrop{align-items:stretch;padding:10px}.vib-modal-dialog{max-height:calc(100vh - 20px)}.vib-log-modal-subbar,.vib-log-tools{flex-wrap:wrap}.vib-log-row{grid-template-columns:46px 1fr}.vib-log-time{grid-column:2}.vib-log-message{grid-column:2}}
@media(max-width:520px){.licora-updater-metrics{grid-template-columns:1fr}.licora-card-heading{flex-direction:column}.vib-log-modal-controls{width:100%;flex-wrap:wrap}.vib-log-search{min-width:100%}.vib-log-filter{flex:1}.vib-log-footer{align-items:flex-start;flex-direction:column}}
/* Confirm dialog */
.mailbox-create-modal { width:min(100% - 28px, 500px);padding:0;border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-surface);color:var(--ui-text);box-shadow:0 18px 60px rgba(15,23,42,.2); }
.mailbox-create-modal::backdrop { background:rgba(15,23,42,.34);backdrop-filter:blur(3px); }
.mailbox-create-dialog { padding:18px; }
.mailbox-create-header { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px; }
.mailbox-create-header h2 { margin:2px 0 0;font-size:18px; }
.mailbox-create-actions { margin-top:18px; }
.mailbox-address-input { display:flex;align-items:center;min-width:0;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface);overflow:hidden; }
.mailbox-local-part { display:flex;align-items:center;min-width:0;flex:1; }
.mailbox-local-part .form-control { min-width:0;border:0;border-radius:0; }
.mailbox-local-part .form-control:focus { box-shadow:none; }
.mailbox-random-button,.mailbox-refresh-button { border:0;background:transparent;color:var(--ui-text-muted);cursor:pointer;line-height:1;padding:6px 8px; }
.mailbox-random-button:hover,.mailbox-refresh-button:hover { color:var(--ui-primary);background:var(--ui-surface-muted); }
.mailbox-at { color:var(--ui-text-muted);padding-right:4px; }
.mailbox-address-input select { width:auto;min-width:100px;border:0;border-left:1px solid var(--ui-border);border-radius:0;background:var(--ui-surface-muted); }
.mailbox-quick-row { display:flex;align-items:center;gap:6px;min-width:0;margin-top:-6px; }
.mailbox-quick-label { color:var(--ui-text-muted);font-size:11px; }
.mailbox-suggestions { display:flex;flex-wrap:wrap;gap:4px;min-width:0; }
.mailbox-suggestion { padding:3px 6px;border:1px solid var(--ui-border);border-radius:4px;background:var(--ui-surface-muted);color:var(--ui-text-muted);font-family:var(--ui-font-mono);font-size:10px;cursor:pointer; }
.mailbox-suggestion:hover { border-color:var(--ui-primary);background:var(--ui-primary-soft);color:var(--ui-primary); }
.mailbox-copy-submit { color:var(--ui-text);background:var(--ui-surface-muted); }
.mailbox-cancel-button { margin-left:auto; }
.nav-button { width:100%;border:0;text-align:left;cursor:pointer; }
@media(max-width:520px){.mailbox-create-modal{width:calc(100% - 20px)}.mailbox-create-dialog{padding:14px}.mailbox-create-actions{flex-direction:column}.mailbox-create-actions .btn{width:100%}}
.mailbox-create-modal { width:min(100% - 28px,530px);max-height:calc(100vh - 32px);border-radius:12px;box-shadow:0 24px 64px rgba(15,23,42,.2);overflow:hidden; }
.mailbox-create-modal::backdrop { background:rgba(15,23,42,.4);backdrop-filter:blur(2px); }
.mailbox-create-dialog { max-height:inherit;padding:0;overflow:auto; }
.mailbox-create-header { margin:0;padding:16px 20px 12px;border-bottom:1px solid var(--ui-border-soft); }
.mailbox-create-eyebrow { color:var(--ui-primary);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; }
.mailbox-create-header h2 { margin:2px 0 0;font-size:16px;line-height:1.25;font-weight:600; }
.mailbox-create-close { display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:5px;border:0;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer; }
.mailbox-create-close:hover { background:var(--ui-surface-muted);color:var(--ui-text); }
.mailbox-create-close svg,.mailbox-copy-submit svg,.mailbox-random-button svg,.mailbox-refresh-button svg,.mailbox-domain-select svg { width:14px;height:14px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2; }
.mailbox-create-body { display:grid;gap:16px;padding:20px; }
.mailbox-field-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px; }
.mailbox-field-heading label { color:var(--ui-text);font-size:12px;font-weight:600; }
.mailbox-quick-row { display:flex;align-items:center;gap:6px;min-width:0;margin:0; }
.mailbox-quick-label,.mailbox-selected-counter { color:var(--ui-text-muted);font-size:10px;font-weight:500; }
.mailbox-suggestions { display:flex;align-items:center;gap:4px;min-width:0; }
.mailbox-suggestion { padding:3px 6px;border:1px solid var(--ui-border);border-radius:4px;background:var(--ui-surface-muted);color:var(--ui-text-muted);font-family:var(--ui-font-mono);font-size:10px;cursor:pointer; }
.mailbox-refresh-button,.mailbox-random-button { display:inline-flex;align-items:center;justify-content:center;padding:4px;border:0;background:transparent;color:var(--ui-text-muted);cursor:pointer;line-height:1; }
.mailbox-refresh-button:hover,.mailbox-random-button:hover { color:var(--ui-primary);background:var(--ui-surface-muted); }
.mailbox-random-button { border-left:1px solid var(--ui-border-soft); }
.mailbox-address-input { border-radius:8px; }
.mailbox-address-input:focus-within { border-color:var(--ui-primary);box-shadow:0 0 0 2px var(--ui-primary-soft); }
.mailbox-local-part .form-control { font-family:var(--ui-font-mono);font-size:12px; }
.mailbox-domain-select { position:relative;display:flex;align-items:center;padding:0 10px;border-left:1px solid var(--ui-border);background:var(--ui-surface-muted); }
.mailbox-domain-select .mailbox-at { padding:0 4px 0 0; }
.mailbox-domain-select select { min-width:100px;padding:8px 14px 8px 0;border:0;border-radius:0;background:transparent;font-family:var(--ui-font-mono);font-size:12px;font-weight:500;appearance:none; }
.mailbox-domain-select svg { position:absolute;right:7px;width:11px;height:11px;color:var(--ui-text-muted);pointer-events:none; }
.mailbox-users-group { min-width:0; }
.mailbox-user-list { max-height:144px;overflow-y:auto;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface-muted);scrollbar-width:thin;scrollbar-color:#cbd5e1 #f8fafc; }
.mailbox-user-option { display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--ui-border-soft);cursor:pointer;user-select:none; }
.mailbox-user-option:last-child { border-bottom:0; }
.mailbox-user-option:hover { background:var(--ui-surface); }
.mailbox-user-checkbox input { width:14px;height:14px;margin:0;accent-color:var(--ui-primary); }
.mailbox-user-avatar { display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--ui-primary-soft);color:var(--ui-primary);font-size:10px;font-weight:700; }
.mailbox-user-name { color:var(--ui-text);font-size:12px;font-weight:500; }
.mailbox-user-you { margin-left:auto;color:var(--ui-text-muted);font-family:var(--ui-font-mono);font-size:10px; }
.mailbox-create-actions { margin:0;padding:12px 20px 16px;border-top:1px solid var(--ui-border-soft); }
.mailbox-copy-submit { display:inline-flex;align-items:center;gap:6px;color:var(--ui-text);background:var(--ui-surface-muted); }
.mailbox-cancel-button { margin-left:auto; }
@media(max-width:520px){.mailbox-create-header{padding:14px}.mailbox-create-body{padding:14px}.mailbox-create-actions{padding:12px 14px 14px}}
.licora-confirm-dialog { width:min(100%,520px);overflow:hidden;border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-surface);color:var(--ui-text);box-shadow:none;font-family:var(--ui-font-sans); }
.licora-confirm-header { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid var(--ui-border); }
.licora-confirm-title { margin:0;color:var(--ui-text);font-size:14px;line-height:1.35;font-weight:500; }
.licora-confirm-body { padding:12px; }
.licora-confirm-body p { margin:0;color:var(--ui-text);font-size:11px;line-height:1.6; }
.licora-confirm-actions { display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:9px 12px;border-top:1px solid var(--ui-border);background:var(--ui-surface-soft); }
@media(max-width:520px){.licora-confirm-actions{align-items:stretch;flex-direction:column-reverse}.licora-confirm-actions .btn{width:100%}}

/* v5.5.0 compact updater refinements */
.licora-updater-head { align-items:center; padding-bottom:8px; }
.licora-updater-title { font-size:18px; }
.licora-updater-subtitle,.licora-updater-card > p,.licora-updater-card .licora-card-heading p { display:none!important; }
.licora-updater-card { padding:10px; }
.licora-release-notes,.licora-history-scroll { scrollbar-width:thin; scrollbar-color:#bdc7d4 #f5f7fa; }
.licora-release-notes::-webkit-scrollbar,.licora-history-scroll::-webkit-scrollbar { width:6px; height:6px; }
.licora-release-notes::-webkit-scrollbar-track,.licora-history-scroll::-webkit-scrollbar-track { background:#f5f7fa; }
.licora-release-notes::-webkit-scrollbar-thumb,.licora-history-scroll::-webkit-scrollbar-thumb { background:#bdc7d4; border:1px solid #f5f7fa; border-radius:999px; }