:root { --dw-background: #fcf8fa; --dw-surface: #ffffff; --dw-surface-low: #f6f3f5; --dw-surface-container: #f0edef; --dw-border: #c6c6cd; --dw-border-soft: #e4e2e4; --dw-text: #1b1b1d; --dw-muted: #45464d; --dw-secondary: #505f76; --dw-primary: #000000; --dw-navy: #131b2e; --dw-success: #047857; --dw-success-soft: #ecfdf5; --dw-info: #2563eb; --dw-info-soft: #eff6ff; --dw-warning: #b45309; --dw-warning-line: #f59e0b; --dw-warning-soft: #fef3c7; --dw-error: #ba1a1a; --dw-error-text: #93000a; --dw-error-soft: #ffdad6; --dw-shadow: 0 4px 12px rgba(15, 23, 42, 0.05); } * { box-sizing: border-box; } html { background: var(--dw-background); } body { background: var(--dw-background); color: var(--dw-text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-size: 14px; line-height: 20px; margin: 0; min-height: 100vh; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button { background: transparent; } .material-symbols-outlined { display: inline-block; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; line-height: 1; vertical-align: middle; } .dw-topbar { background: rgba(252, 248, 250, 0.96); border-bottom: 1px solid var(--dw-border); left: 0; position: fixed; right: 0; top: 0; z-index: 50; } .dw-topbar-inner { align-items: center; display: flex; height: 64px; justify-content: space-between; margin: 0 auto; max-width: 1440px; padding: 0 40px; width: 100%; } .dw-brand-row, .dw-nav, .dw-top-actions { align-items: center; display: flex; } .dw-brand-row { gap: 32px; } .dw-brand { color: var(--dw-text); font-size: 20px; font-weight: 700; line-height: 28px; } .dw-nav { gap: 24px; } .dw-nav-link { border-bottom: 2px solid transparent; color: var(--dw-muted); font-size: 14px; line-height: 20px; padding: 22px 0 19px; transition: color 150ms ease, border-color 150ms ease; } .dw-nav-link:hover, .dw-nav-link.is-active { color: var(--dw-primary); } .dw-nav-link.is-active { border-bottom-color: var(--dw-primary); font-weight: 700; } .dw-top-actions { gap: 16px; } .dw-mobile-actions { display: none; } .dw-icon-button { align-items: center; border-radius: 999px; color: var(--dw-muted); display: inline-flex; height: 36px; justify-content: center; transition: background-color 150ms ease; width: 36px; } .dw-icon-button:hover { background: var(--dw-surface-low); } .dw-main { margin: 0 auto; max-width: 1440px; padding: 96px 40px 32px; width: 100%; } .dw-page-header { margin-bottom: 32px; } .dw-page-header h1 { font-size: 30px; font-weight: 700; letter-spacing: 0; line-height: 38px; margin: 0; } .dw-page-header p { color: var(--dw-muted); font-size: 14px; line-height: 20px; margin: 4px 0 0; } .dw-metrics-grid { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 32px; } .dw-overview-filter { background: var(--dw-surface); border: 1px solid var(--dw-border); margin: -12px 0 24px; padding: 16px; } .dw-overview-filter .dw-chart-controls { justify-content: flex-start; } .dw-metric-card { background: var(--dw-surface); border: 1px solid var(--dw-border); border-radius: 0; display: flex; flex-direction: column; height: 128px; justify-content: space-between; padding: 16px; transition: box-shadow 150ms ease; } .dw-metric-card:hover { box-shadow: var(--dw-shadow); } .dw-metric-link { color: inherit; text-decoration: none; } .dw-metric-link:hover small { text-decoration: underline; } .dw-metric-card-critical { border-left: 4px solid var(--dw-error); } .dw-metric-card-warning { border-left: 4px solid var(--dw-warning-line); } .dw-kicker { color: var(--dw-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; line-height: 16px; text-transform: uppercase; } .dw-metric-card-critical .dw-kicker { color: var(--dw-error-text); } .dw-metric-card-warning .dw-kicker { color: var(--dw-warning); } .dw-metric-card strong { align-items: baseline; color: var(--dw-text); display: inline-flex; font-size: 30px; font-weight: 700; gap: 8px; line-height: 38px; } .dw-metric-card small { color: var(--dw-success); font-size: 12px; font-weight: 600; line-height: 18px; } .dw-metric-card code { color: var(--dw-text); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 450; line-height: 18px; } .dw-success-value { align-items: flex-end; color: var(--dw-success) !important; display: inline-flex; gap: 4px; } .dw-warning-value { color: var(--dw-warning) !important; } .dw-success-value .material-symbols-outlined { color: #4d9467; font-size: 24px; margin-bottom: 4px; } .dw-danger-value, .dw-danger-text { color: var(--dw-error-text) !important; } .dw-success-text { color: var(--dw-success) !important; } .dw-dashboard-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr); } .dw-primary-column { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .dw-sidebar { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .dw-section-heading, .dw-sidebar-head, .dw-card-head { align-items: center; display: flex; justify-content: space-between; } .dw-section-heading { gap: 8px; justify-content: flex-start; margin-bottom: 8px; } .dw-section-heading h2, .dw-sidebar-head h2 { font-size: 20px; font-weight: 600; line-height: 28px; margin: 0; } .dw-filled-icon { color: var(--dw-primary); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; } .dw-summary-card, .dw-chart-card, .dw-table-card, .dw-alert-item, .dw-alert-empty { background: var(--dw-surface); border: 1px solid var(--dw-border); } .dw-summary-card { min-height: 190px; overflow: hidden; padding: 24px; position: relative; } .dw-ai-label { color: rgba(69, 70, 77, 0.42); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; line-height: 16px; position: absolute; right: 24px; text-transform: uppercase; top: 24px; } .dw-summary-copy { color: var(--dw-text); font-size: 14px; line-height: 22px; max-width: 720px; padding-right: 120px; white-space: pre-line; } .dw-recommendations { border-top: 1px solid var(--dw-border-soft); margin-top: 18px; padding-top: 16px; white-space: normal; } .dw-recommendations > span { color: var(--dw-primary); display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; line-height: 16px; margin-bottom: 8px; text-transform: uppercase; } .dw-recommendations ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; } .dw-recommendations li { align-items: flex-start; display: flex; font-size: 12px; gap: 8px; line-height: 18px; } .dw-recommendations .material-symbols-outlined { font-size: 18px; } .dw-chart-card { display: flex; flex-direction: column; height: 256px; padding: 24px; } .dw-overview-chart { margin-bottom: 24px; } .dw-card-head { margin-bottom: 16px; } .dw-card-head h3, .dw-sidebar-kicker { color: var(--dw-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; line-height: 16px; margin: 0; text-transform: uppercase; } .dw-legend { display: flex; gap: 8px; } .dw-legend span { align-items: center; display: inline-flex; font-size: 10px; font-weight: 700; gap: 4px; line-height: 14px; text-transform: uppercase; } .dw-dot-valid, .dw-dot-failed, .dw-status-dot { border-radius: 999px; display: inline-block; height: 8px; width: 8px; } .dw-dot-valid, .dw-status-dot { background: var(--dw-success); } .dw-dot-failed { background: var(--dw-error); } .dw-bars { align-items: flex-end; display: flex; flex: 1; gap: 4px; padding: 0 8px; } .dw-bars > span, .dw-bars > a { border-radius: 2px 2px 0 0; flex: 1; min-height: 10px; overflow: hidden; } .dw-bars > span { background: var(--dw-surface-container); display: block; } .dw-bars > a { cursor: pointer; display: flex; flex-direction: column-reverse; transition: opacity 150ms ease, transform 150ms ease; } .dw-bars > a:hover { opacity: 0.78; transform: translateY(-2px); } .dw-bar-valid, .dw-bar-failed { display: block; min-height: 0; } .dw-bar-valid { background: var(--dw-success); } .dw-bar-failed { background: var(--dw-error); } .dw-sidebar-head { margin-bottom: 8px; } .dw-sidebar-head a { color: var(--dw-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; line-height: 16px; text-transform: uppercase; } .dw-table-card { overflow: hidden; } .dw-table { border-collapse: collapse; width: 100%; } .dw-table thead { background: var(--dw-surface-low); } .dw-table th, .dw-table td { border-bottom: 1px solid var(--dw-border); padding: 14px 16px; text-align: left; } .dw-table th { color: var(--dw-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; line-height: 16px; text-transform: uppercase; } .dw-table td { font-size: 14px; line-height: 20px; } .dw-table tbody tr:hover { background: var(--dw-surface-low); } .dw-table tfoot td { background: rgba(246, 243, 245, 0.5); border-bottom: 0; padding: 12px 16px; } .dw-chip { border-radius: 999px; display: inline-flex; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; line-height: 14px; padding: 4px 8px; text-transform: uppercase; } .dw-chip-pass { background: var(--dw-success-soft); border: 1px solid #d1fae5; color: var(--dw-success); } .dw-chip-warning { background: var(--dw-warning-soft); border: 1px solid #fde68a; color: var(--dw-warning); } .dw-chip-info { background: var(--dw-info-soft); border: 1px solid #bfdbfe; color: var(--dw-info); } .dw-chip-critical { background: var(--dw-error-soft); border: 1px solid #fecaca; color: var(--dw-error-text); } .dw-muted { color: var(--dw-muted); } .dw-table-footer { align-items: center; color: var(--dw-muted); display: flex; font-size: 12px; justify-content: space-between; line-height: 18px; } .dw-pager { display: inline-flex; gap: 4px; } .dw-pager button { align-items: center; background: var(--dw-surface); border: 1px solid var(--dw-border); color: var(--dw-muted); display: inline-flex; height: 28px; justify-content: center; opacity: 0.5; width: 28px; } .dw-pager .material-symbols-outlined { font-size: 18px; } .dw-sidebar-kicker { margin: 0 0 12px 4px; } .dw-alert-feed { display: flex; flex-direction: column; gap: 12px; } .dw-alert-item, .dw-alert-empty { display: block; padding: 16px; } .dw-alert-item { border-left: 4px solid var(--dw-error); transition: box-shadow 150ms ease; } .dw-alert-item:hover { box-shadow: var(--dw-shadow); } .dw-alert-item.is-warning { border-left-color: var(--dw-warning-line); } .dw-alert-item.is-info { border-left-color: var(--dw-info); } .dw-alert-row { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 4px; } .dw-alert-row span { color: var(--dw-error-text); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; line-height: 16px; text-transform: uppercase; } .dw-alert-item.is-warning .dw-alert-row span { color: var(--dw-warning); } .dw-alert-item.is-info .dw-alert-row span { color: var(--dw-info); } .dw-alert-row time { color: rgba(69, 70, 77, 0.68); font-size: 12px; line-height: 18px; } .dw-alert-item strong { color: var(--dw-text); display: block; font-size: 12px; font-weight: 700; line-height: 18px; } .dw-alert-item p { color: var(--dw-muted); font-size: 12px; line-height: 18px; margin: 4px 0 0; } .dw-alert-empty { color: var(--dw-muted); font-size: 12px; line-height: 18px; } .dw-fab { align-items: center; background: var(--dw-primary); border-radius: 12px; bottom: 40px; box-shadow: 0 12px 20px rgba(0, 0, 0, 0.16); color: #ffffff; display: inline-flex; height: 56px; justify-content: center; position: fixed; right: 40px; transition: transform 150ms ease; width: 56px; z-index: 40; } .dw-fab:hover { transform: scale(1.04); } .dw-footer { margin: 0 auto; max-width: 1440px; padding: 0 40px 32px; width: 100%; } .dw-footer-inner { align-items: center; border-top: 1px solid var(--dw-border); color: var(--dw-muted); display: flex; justify-content: space-between; padding-top: 16px; } .dw-system-status { align-items: center; display: inline-flex; gap: 8px; } .dw-footer-code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.05em; line-height: 16px; text-transform: uppercase; } .dw-domain-summary-section, .dw-domain-dns-section, .dw-domain-main-grid, .dw-domain-lower-grid, .dw-reports-section { margin-bottom: 32px; } .dw-settings-header { align-items: flex-start; display: flex; justify-content: space-between; gap: 24px; } .dw-settings-header code, .dw-info-row code, .dw-settings-card code, .dw-env-item code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 18px; } .dw-settings-header code { background: var(--dw-surface); border: 1px solid var(--dw-border); color: var(--dw-muted); margin-top: 4px; padding: 8px 10px; white-space: nowrap; } .dw-settings-metrics { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 32px; } .dw-settings-metrics .dw-metric-card strong { display: block; font-size: 20px; line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dw-card-note { color: var(--dw-muted); display: block; font-size: 12px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dw-settings-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); margin-bottom: 32px; } .dw-settings-board { align-items: start; display: grid; gap: 24px; grid-template-columns: 1fr; margin-bottom: 32px; } .dw-settings-panel { min-width: 0; } .dw-settings-panel-wide { grid-column: 1 / -1; } .dw-settings-main, .dw-settings-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .dw-info-card, .dw-settings-card, .dw-settings-env { background: var(--dw-surface); border: 1px solid var(--dw-border); } .dw-info-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .dw-info-row { border-bottom: 1px solid var(--dw-border); min-width: 0; padding: 16px; } .dw-info-row:nth-last-child(-n + 2) { border-bottom: 0; } .dw-info-row:nth-child(odd) { border-right: 1px solid var(--dw-border); } .dw-info-row span, .dw-info-list span, .dw-sender-domain-head span { color: var(--dw-muted); display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; line-height: 16px; margin-bottom: 4px; text-transform: uppercase; } .dw-info-row strong, .dw-info-row code { color: var(--dw-text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dw-inbox-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .dw-settings-card { display: flex; flex-direction: column; height: 100%; padding: 16px; } .dw-settings-card-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 16px; } .dw-settings-card h3, .dw-sender-domain h3 { font-size: 14px; font-weight: 700; line-height: 20px; margin: 0; } .dw-settings-card code { color: var(--dw-muted); } .dw-info-list { display: grid; gap: 12px; } .dw-settings-card .dw-info-list, .dw-settings-card .dw-sender-list { flex: 1; } .dw-info-list strong { display: block; font-size: 13px; font-weight: 600; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dw-sender-domain-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .dw-sender-domain-head { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 12px; } .dw-sender-domain-head span { margin: 0; } .dw-sender-list { display: grid; gap: 8px; } .dw-sender-row { align-items: stretch; background: var(--dw-surface-low); border: 1px solid var(--dw-border-soft); display: grid; gap: 14px; grid-template-columns: minmax(140px, 0.65fr) minmax(0, 1.35fr); padding: 12px; } .dw-sender-row strong, .dw-sender-row code { display: block; } .dw-sender-evidence { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .dw-sender-evidence span { background: var(--dw-surface); border: 1px solid var(--dw-border); color: var(--dw-muted); font-size: 11px; font-weight: 600; line-height: 16px; padding: 3px 6px; } .dw-sender-values { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; } .dw-sender-values span { color: var(--dw-muted); display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; line-height: 14px; margin-bottom: 4px; text-transform: uppercase; } .dw-sender-values ul { display: grid; gap: 3px; list-style: none; margin: 0; padding: 0; } .dw-sender-values li, .dw-sender-values code { color: var(--dw-text); font-size: 11px; line-height: 16px; min-width: 0; overflow-wrap: anywhere; } .dw-settings-side .dw-list-card code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .dw-settings-env { padding: 16px; } .dw-settings-env + .dw-settings-env { margin-top: 24px; } .dw-settings-env .dw-sidebar-head { margin-bottom: 16px; } .dw-env-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .dw-env-item { align-items: center; background: var(--dw-surface-low); border: 1px solid var(--dw-border-soft); display: flex; gap: 12px; justify-content: space-between; min-width: 0; padding: 10px 12px; } .dw-env-item.is-missing { background: var(--dw-error-soft); border-color: #fecaca; } .dw-env-item code { color: var(--dw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dw-domain-summary-section .dw-sidebar-kicker { margin-left: 0; } .dw-domain-summary-card { min-height: 0; padding-left: 32px; } .dw-summary-rail { background: var(--dw-navy); bottom: 0; left: 0; position: absolute; top: 0; width: 4px; } .dw-domain-main-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); } .dw-domain-lower-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .dw-section-heading { align-items: center; display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .dw-section-heading .dw-panel-title { margin-bottom: 0; } .dw-dns-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .dw-dns-panel { background: var(--dw-surface); border: 1px solid var(--dw-border); min-width: 0; padding: 16px; } .dw-policy-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .dw-dns-record, .dw-dns-record-list code { background: var(--dw-surface-low); border: 1px solid var(--dw-border-soft); color: var(--dw-text); display: block; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 18px; overflow-wrap: anywhere; padding: 10px; } .dw-dns-record-list { display: grid; gap: 8px; } .dw-dns-record-list strong { display: block; font-size: 12px; line-height: 18px; margin-bottom: 4px; } .dw-dns-errors { display: grid; gap: 6px; margin-top: 12px; } .dw-dns-errors span { background: var(--dw-warning-soft); border: 1px solid #fde68a; color: var(--dw-warning); font-size: 12px; line-height: 18px; padding: 8px 10px; } .dw-panel-title { color: var(--dw-text); font-size: 20px; font-weight: 600; line-height: 28px; margin: 0 0 16px; } .dw-table code, .dw-list-row code, .dw-report-copy code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 450; line-height: 20px; } .dw-chip-fail { background: var(--dw-error-soft); border: 1px solid #fecaca; color: var(--dw-error-text); } .dw-inline-link { color: var(--dw-text); font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .dw-compact-table th, .dw-compact-table td { padding: 10px 16px; } .dw-list-card, .dw-report-list { background: var(--dw-surface); border: 1px solid var(--dw-border); } .dw-list-card { padding: 16px; } .dw-list-row { align-items: center; border-bottom: 1px solid var(--dw-border); display: flex; justify-content: space-between; padding: 10px 0; } .dw-list-row:first-child { padding-top: 0; } .dw-list-row:last-child { border-bottom: 0; padding-bottom: 0; } .dw-list-empty { color: var(--dw-muted); font-size: 12px; line-height: 18px; padding: 16px; } .dw-list-card .dw-list-empty { padding: 0; } .dw-report-list { overflow: hidden; } .dw-report-row { align-items: center; border-bottom: 1px solid var(--dw-border); display: flex; gap: 16px; justify-content: space-between; padding: 16px; } .dw-report-row:last-child { border-bottom: 0; } .dw-report-row:hover { background: var(--dw-surface-low); } .dw-report-row > .material-symbols-outlined:first-child { color: var(--dw-secondary); } .dw-report-row > .material-symbols-outlined:last-child { color: var(--dw-muted); font-size: 18px; } .dw-report-copy { flex: 1; min-width: 0; } .dw-report-copy strong, .dw-report-copy code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dw-report-copy code { color: var(--dw-muted); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } @media (max-width: 1024px) { .dw-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dw-dashboard-grid { grid-template-columns: 1fr; } .dw-overview-filter .dw-chart-controls { align-items: stretch; flex-direction: column; } .dw-card-head { align-items: flex-start; flex-direction: column; gap: 12px; } .dw-card-head .dw-chart-controls { justify-content: flex-start; } .dw-domain-main-grid, .dw-domain-lower-grid, .dw-dns-grid, .dw-settings-layout, .dw-settings-board, .dw-inbox-row { grid-template-columns: 1fr; } .dw-settings-metrics, .dw-env-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dw-inbox-actions, .dw-inbox-job { justify-self: stretch; justify-content: flex-start; } } @media (max-width: 720px) { .dw-topbar-inner, .dw-main, .dw-footer { padding-left: 16px; padding-right: 16px; } .dw-nav { display: none; } .dw-mobile-actions { display: flex; } .dw-metrics-grid { grid-template-columns: 1fr; } .dw-summary-copy { padding-right: 0; } .dw-ai-label { position: static; display: block; margin-bottom: 12px; } .dw-fab { bottom: 16px; right: 16px; } .dw-settings-header, .dw-settings-card-head, .dw-sender-row { display: block; } .dw-sender-values { grid-template-columns: 1fr; margin-top: 12px; } .dw-settings-header code { display: block; margin-top: 12px; white-space: normal; } .dw-settings-metrics, .dw-settings-board, .dw-inbox-grid, .dw-inbox-meta, .dw-sender-domain-grid, .dw-info-card, .dw-env-grid { grid-template-columns: 1fr; } .dw-info-row, .dw-info-row:nth-child(odd) { border-right: 0; } .dw-info-row:nth-last-child(-n + 2) { border-bottom: 1px solid var(--dw-border); } .dw-info-row:last-child { border-bottom: 0; } .dw-settings-card-head .dw-chip, .dw-sender-evidence { margin-top: 12px; } .dw-sender-evidence { justify-content: flex-start; } } /* Compatibility for secondary templates that still use the first design pass classes. */ .text-headline-xl, .text-headline-xl-mobile { font-size: 30px; font-weight: 700; line-height: 38px; } .text-headline-md { font-size: 20px; font-weight: 600; line-height: 28px; } .text-body-base { font-size: 14px; line-height: 20px; } .text-body-sm { font-size: 12px; line-height: 18px; } .text-data-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 20px; } .text-label-caps { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; line-height: 16px; text-transform: uppercase; } .text-on-background, .text-on-surface, .text-primary { color: var(--dw-text); } .text-on-surface-variant { color: var(--dw-muted); } .text-secondary { color: var(--dw-secondary); } .text-error, .text-on-error-container { color: var(--dw-error-text); } .bg-surface-container-lowest { background: var(--dw-surface); } .bg-surface-container-low { background: var(--dw-surface-low); } .bg-surface-container { background: var(--dw-surface-container); } .bg-primary-container { background: var(--dw-navy); } .bg-error-container { background: var(--dw-error-soft); } .border-outline-variant { border-color: var(--dw-border); } .border-l-error { border-left-color: var(--dw-error); } .border-l-amber-500 { border-left-color: var(--dw-warning-line); } .mb-stack-sm { margin-bottom: 8px; } .mb-stack-md { margin-bottom: 16px; } .mb-stack-lg { margin-bottom: 32px; } .mt-stack-sm { margin-top: 8px; } .mt-stack-md { margin-top: 16px; } .p-stack-md { padding: 16px; } .p-stack-lg { padding: 32px; } .p-gutter { padding: 24px; } .px-stack-md { padding-left: 16px; padding-right: 16px; } .py-stack-sm { padding-bottom: 8px; padding-top: 8px; } .gap-stack-sm { gap: 8px; } .gap-stack-md { gap: 16px; } .gap-gutter { gap: 24px; } .space-y-stack-md > :not([hidden]) ~ :not([hidden]) { margin-top: 16px; } .space-y-gutter > :not([hidden]) ~ :not([hidden]) { margin-top: 24px; } .surface-card { background: var(--dw-surface); border: 1px solid var(--dw-border); } .label-caps { color: var(--dw-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; line-height: 16px; text-transform: uppercase; } .data-table { border-collapse: collapse; width: 100%; } .data-table thead { background: var(--dw-surface-low); } .data-table th, .data-table td { border-bottom: 1px solid var(--dw-border); padding: 12px 16px; text-align: left; } .data-table th { color: var(--dw-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .data-table td { font-size: 12px; line-height: 18px; } .status-chip { border-radius: 999px; display: inline-flex; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; line-height: 14px; padding: 4px 8px; text-transform: uppercase; } .chip-pass { background: var(--dw-success-soft); border: 1px solid #d1fae5; color: var(--dw-success); } .chip-info { background: var(--dw-info-soft); border: 1px solid #bfdbfe; color: var(--dw-info); } .chip-warning { background: var(--dw-warning-soft); border: 1px solid #fde68a; color: var(--dw-warning); } .chip-critical { background: var(--dw-error-soft); border: 1px solid #fecaca; color: var(--dw-error-text); } .chip-fail { background: var(--dw-error-soft); border: 1px solid #fecaca; color: var(--dw-error-text); } .button-secondary { align-items: center; background: var(--dw-surface); border: 1px solid var(--dw-border); display: inline-flex; font-weight: 600; gap: 6px; padding: 8px 16px; } .button-secondary:disabled { cursor: not-allowed; opacity: 0.48; } .dw-inbox-row { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(460px, 640px) minmax(360px, 760px); justify-content: space-between; } .dw-inbox-meta { display: grid; gap: 12px 18px; grid-template-columns: repeat(4, minmax(110px, 1fr)); } .dw-inbox-work { display: grid; gap: 12px; min-width: 0; } .dw-inbox-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .dw-inbox-job { display: grid; gap: 8px; justify-self: end; max-width: 760px; min-width: 320px; width: 100%; } .inbox-action-result { align-items: center; color: var(--dw-muted); display: inline-flex; font-size: 12px; line-height: 18px; min-height: 28px; width: 100%; } .inbox-action-result.is-running { color: var(--dw-muted); } .inbox-action-result.is-success { color: var(--dw-success); } .inbox-action-result.is-error { color: var(--dw-error-text); } .inbox-progress { background: var(--dw-surface-container); display: none; height: 4px; overflow: hidden; width: 100%; } .inbox-progress.is-active { display: block; } .inbox-progress span { background: var(--dw-success); display: block; height: 100%; transition: width 180ms ease; } .inbox-progress.is-indeterminate span { animation: dw-progress-slide 1.2s infinite ease-in-out; width: 35% !important; } .inbox-duplicate-list { border-top: 1px solid var(--dw-border); color: var(--dw-text); grid-column: 1 / -1; margin-top: 0; overflow-x: auto; padding-top: 12px; } .inbox-duplicate-list summary { align-items: center; cursor: pointer; display: flex; font-size: 12px; font-weight: 700; gap: 8px; justify-content: space-between; line-height: 18px; text-transform: uppercase; } .inbox-duplicate-list summary strong { color: var(--dw-muted); font-family: var(--dw-font-mono); font-size: 11px; } .inbox-duplicate-table { border-collapse: collapse; margin-top: 6px; min-width: 560px; width: 100%; } .inbox-duplicate-table th, .inbox-duplicate-table td { border-bottom: 1px solid var(--dw-border); font-size: 11px; line-height: 16px; padding: 6px 8px 6px 0; text-align: left; vertical-align: top; } .inbox-duplicate-table th { color: var(--dw-muted); font-weight: 700; text-transform: uppercase; } @keyframes dw-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } .dw-feed-link { color: var(--dw-text); display: inline-flex; font-size: 12px; font-weight: 700; margin-top: 12px; text-transform: uppercase; } .dw-feed-note { font-size: 12px; line-height: 18px; margin: -6px 0 12px; } .alerts-filter-bar, .alerts-bulk-bar { align-items: end; background: var(--dw-surface); border: 1px solid var(--dw-border); display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; padding: 16px; } .alerts-filter-bar label { display: grid; gap: 6px; min-width: 180px; } .alerts-filter-bar select, .alerts-filter-bar input { background: var(--dw-surface); border: 1px solid var(--dw-border); color: var(--dw-text); font-size: 14px; min-height: 36px; padding: 6px 32px 6px 10px; } .alerts-bulk-bar { justify-content: space-between; } .alert-row { border-left: 4px solid var(--dw-info); cursor: pointer; } .alert-row.is-critical { border-left-color: var(--dw-error); } .alert-row.is-warning { border-left-color: var(--dw-warning-line); } .alert-row.is-info { border-left-color: var(--dw-info); } .alert-select { cursor: pointer; display: inline-flex; } .alert-select input { position: absolute; opacity: 0; } .alert-select span { background: var(--dw-surface); border: 2px solid var(--dw-text); display: inline-block; height: 18px; position: relative; width: 18px; } .alert-select input:checked + span { background: var(--dw-text); } .alert-select input:checked + span::after { border: solid var(--dw-surface); border-width: 0 2px 2px 0; content: ""; height: 10px; left: 5px; position: absolute; top: 1px; transform: rotate(45deg); width: 5px; } .alerts-pager { margin-top: 16px; } .dw-pager a, .dw-pager button { align-items: center; background: var(--dw-surface); border: 1px solid var(--dw-border); color: var(--dw-text); display: inline-flex; height: 32px; justify-content: center; width: 32px; } .dw-pager a.is-disabled { opacity: 0.4; pointer-events: none; } .dw-chart-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .dw-chart-controls select, .dw-chart-controls input { background: var(--dw-surface); border: 1px solid var(--dw-border); color: var(--dw-text); font-size: 12px; min-height: 30px; padding: 4px 28px 4px 8px; } .dw-summary-run { margin-left: auto; } .dw-prompt-grid { display: grid; gap: 16px; } .dw-prompt-card { background: var(--dw-surface); border: 1px solid var(--dw-border); padding: 16px; } .dw-prompt-card pre { background: var(--dw-surface-low); color: var(--dw-text); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 18px; margin: 12px 0 0; max-height: 260px; overflow: auto; padding: 12px; white-space: pre-wrap; }