:root { font-family: Inter, "Segoe UI", Arial, sans-serif; color: #172033; background: #f5f7fa; font-synthesis: none; }
html, body, #app { min-height: 100%; margin: 0; }
body { background: #f5f7fa; }
*, *::before, *::after { box-sizing: border-box; }
button, input, select { font: inherit; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
.mud-typography, .mud-button-root, .mud-nav-link { letter-spacing: 0 !important; }
.backoffice-appbar { height: 68px !important; background: rgba(255,255,255,.96) !important; color: #172033 !important; border-bottom: 1px solid #e4e8ef; backdrop-filter: blur(12px); padding-inline: 20px !important; }
.backoffice-drawer { border-right: 1px solid #e4e8ef !important; background: #fff !important; }
.backoffice-main { background: #f5f7fa; min-height: 100vh; }
.content-shell { width: min(1480px, 100%); margin: 0 auto; padding: 38px 36px 64px; }
.brand-block { height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid #eef1f5; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: #0c203b; box-shadow: 0 7px 18px rgba(12,32,59,.16); overflow: hidden; }
.brand-block img { width: 44px; height: 44px; }
.brand-block div { display: grid; }
.brand-block strong { font-size: 18px; color: #111b2e; }
.brand-block div > span { color: #718096; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.nav-section-label { display: block; padding: 22px 20px 7px; color: #98a2b3; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.backoffice-nav { padding: 0 10px; }
.backoffice-nav .mud-nav-link { min-height: 46px; border-radius: 7px; margin-bottom: 5px; color: #526078; font-size: 13px; }
.backoffice-nav .mud-nav-link .mud-nav-link-icon { color: #7a869a; }
.backoffice-nav .mud-nav-link.active { color: #145fcf; background: #eaf2ff; font-weight: 750; box-shadow: inset 3px 0 #1463e6; }
.backoffice-nav .mud-nav-link.active .mud-nav-link-icon { color: #1463e6; }
.drawer-note { position: absolute; left: 14px; right: 14px; bottom: 18px; display: flex; gap: 10px; padding: 14px; border: 1px solid #dfe7f1; border-radius: 8px; color: #526078; background: #f8fafc; }
.drawer-note > .mud-icon-root { color: #00a99d; }
.drawer-note div { display: grid; gap: 2px; }
.drawer-note strong { color: #25334a; font-size: 13px; }
.drawer-note span { font-size: 11px; line-height: 1.4; }
.appbar-context { display: grid; gap: 1px; margin-left: 8px; }
.appbar-context strong { font-size: 14px; }
.appbar-context .appbar-kicker { color: #7b8799; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.appbar-user span { color: #738098; font-size: 11px; }
.environment-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; margin-right: 18px; border: 1px solid #dfe5ed; border-radius: 999px; color: #536176; background: #fafbfd; font-size: 11px; font-weight: 700; }
.environment-badge i { width: 7px; height: 7px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 3px #e5f8ed; }
.appbar-user { display: flex; align-items: center; gap: 10px; margin-right: 8px; padding-right: 14px; border-right: 1px solid #e5e9ef; }
.appbar-user > div { display: grid; max-width: 190px; }
.appbar-user strong, .appbar-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-menu { display: none !important; }
.page-header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 26px; }
.page-header > div > span, .panel-heading span, .login-heading > span, .auth-message > span { color: #1463e6; text-transform: uppercase; font-size: 10px; font-weight: 850; }
.page-header h1 { margin: 5px 0 5px; font-size: 30px; line-height: 1.15; letter-spacing: 0; }
.page-header p { margin: 0; color: #667085; font-size: 14px; }
.primary-button, .secondary-button, .error-state button { min-height: 46px; border: 0; border-radius: 6px; padding: 0 18px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.primary-button { width: 100%; background: #1463e6; color: #fff; box-shadow: 0 8px 20px rgba(20,99,230,.18); transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.primary-button:not(:disabled):hover { background: #0e54c8; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(20,99,230,.24); }
.primary-button.compact { width: auto; min-width: 140px; }
.secondary-button { background: #fff; color: #29405e; border: 1px solid #d8e0ea; transition: border-color .18s ease, background .18s ease; }
.secondary-button:not(:disabled):hover { background: #f8fafc; border-color: #bfcada; }
button:disabled { opacity: .58; cursor: default; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.metric-card { position: relative; min-height: 168px; padding: 20px; border: 1px solid #e0e5ec; border-radius: 8px; background: #fff; display: flex; flex-direction: column; box-shadow: 0 8px 28px rgba(24,39,65,.045); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(24,39,65,.075); border-color: #d5dce6; }
.metric-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: #1463e6; }
.metric-card.teal::before { background: #00a99d; }.metric-card.green::before { background: #12b76a; }.metric-card.amber::before { background: #e09a19; }
.metric-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric-card-top > span { color: #667085; font-size: 12px; font-weight: 700; }
.metric-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: #eaf2ff; color: #1463e6; }
.metric-card.teal .metric-icon { background: #e5f8f6; color: #058d86; }.metric-card.green .metric-icon { background: #e9f9f1; color: #079455; }.metric-card.amber .metric-icon { background: #fff5df; color: #b66d00; }
.metric-card > strong { margin-top: 20px; font-size: 35px; line-height: 1; color: #172033; }.metric-card small { margin-top: auto; padding-top: 12px; color: #7a8699; }.metric-card small b { color: #344054; }
.insight-grid, .detail-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 16px; margin-top: 16px; }
.panel { background: #fff; border: 1px solid #e0e5ec; border-radius: 8px; box-shadow: 0 8px 28px rgba(24,39,65,.035); }
.panel-heading { padding: 20px 22px; border-bottom: 1px solid #edf0f5; display: flex; justify-content: space-between; align-items: center; }
.panel-heading h2 { margin: 4px 0 0; font-size: 17px; }.panel-heading a { color: #1463e6; font-size: 12px; font-weight: 750; display: inline-flex; align-items: center; gap: 4px; }.panel-heading a .mud-icon-root { font-size: 17px; }
.activation-summary { display: grid; grid-template-columns: repeat(3,1fr); padding: 28px 22px; }
.activation-summary > div { display: grid; gap: 6px; padding: 4px 20px; border-right: 1px solid #e7ebf1; }.activation-summary > div:first-child { padding-left: 0; }.activation-summary > div:last-child { border: 0; }
.activation-summary strong { font-size: 27px; }.activation-summary span { color: #68758c; font-size: 12px; }
.status-list { padding: 14px 22px; }.status-list > div { min-height: 42px; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid #edf0f5; }.status-list > div:last-child { border: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #98a2b3; }.dot.green { background:#12b76a; }.dot.blue { background:#1768e5; }.dot.amber { background:#f0a20a; }.dot.red { background:#f04438; }
.filter-bar { display: grid; grid-template-columns: minmax(260px,1fr) 240px auto; gap: 10px; margin-bottom: 16px; padding: 12px; border: 1px solid #e0e5ec; border-radius: 8px; background: #fff; box-shadow: 0 6px 20px rgba(24,39,65,.03); }
.search-field { position: relative; }.search-field .mud-icon-root { position: absolute; left: 14px; top: 13px; color: #748198; }
.search-field input, .filter-bar select, .form-field input { width: 100%; min-height: 46px; border: 1px solid #d8e0ea; border-radius: 7px; background: #fff; color: #1e2b41; outline: none; }
.search-field input { padding: 0 14px 0 44px; }.filter-bar select { padding: 0 12px; }
.search-field input:focus, .filter-bar select:focus, .form-field input:focus { border-color: #1768e5; box-shadow: 0 0 0 3px rgba(23,104,229,.1); }
.list-panel { overflow: hidden; }.list-summary { min-height: 70px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:13px 20px; border-bottom:1px solid #e7ebf1; }.list-summary > div { display:flex; align-items:center; gap:11px; }.list-summary > div > div { display:grid; gap:2px; }.list-summary small { color:#8792a5; font-size:11px; }.list-summary > span { color:#748198; font-size:12px; }.summary-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:8px; background:#eaf2ff; color:#1463e6; }
.desktop-table-wrap { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; min-width: 1020px; }.data-table th { text-align:left; padding:12px 16px; color:#7a8699; background:#f8fafc; text-transform:uppercase; font-size:10px; font-weight:800; }.data-table td { padding:16px; border-top:1px solid #edf0f4; vertical-align:middle; font-size:13px; }.data-table tbody tr { transition:background .16s ease; }.data-table tbody tr:hover { background:#f8fbff; }
.company-cell { display:flex; align-items:center; gap:11px; }.company-cell > span, .company-avatar { flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; border-radius:8px; background:#eaf2ff; color:#1463e6; font-size:11px; font-weight:800; }.company-cell > div { display:grid; }.company-cell small, .cell-note { display:block; color:#748198; margin-top:3px; font-size:11px; }
.status-badge { display:inline-flex; align-items:center; width:max-content; margin-top:5px; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:800; background:#f0f2f5; color:#58657a; }.status-badge.success { background:#e8f8ef; color:#087a46; }.status-badge.info { background:#e9f2ff; color:#1768e5; }.status-badge.warning { background:#fff3d9; color:#9b6100; }.status-badge.danger { background:#feebea; color:#c0261c; }
.icon-link { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:#1768e5; }.icon-link:hover { background:#eaf2ff; }
.mobile-company-list { display:none; }.pagination { display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:15px 18px; border-top:1px solid #e7ebf1; }.pagination button { width:38px; height:38px; border:1px solid #dce3ed; border-radius:50%; background:#fff; color:#1768e5; display:grid; place-items:center; }.pagination span { color:#68758c; font-size:13px; }
.loading-state, .empty-state, .error-state { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; color:#6c7990; }.loading-state.compact { min-height:220px; }.page-spinner, .button-spinner { display:inline-block; border:3px solid #dbe7f8; border-top-color:#1768e5; border-radius:50%; animation:spin .7s linear infinite; }.page-spinner { width:34px; height:34px; }.button-spinner { width:17px; height:17px; border-color:rgba(255,255,255,.4); border-top-color:#fff; }.error-state strong { color:#25334a; }.error-state button { color:#fff; background:#1768e5; }.empty-state .mud-icon-root { font-size:42px; color:#9aabc1; }
.detail-header { align-items:center; }.back-link { color:#1463e6; display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; margin-bottom:10px; }.detail-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.detail-metrics article { min-height:92px; background:#fff; border:1px solid #e0e5ec; border-radius:8px; padding:18px; display:flex; align-items:center; gap:13px; }.detail-metrics article > .mud-icon-root { width:40px; height:40px; padding:9px; border-radius:8px; background:#eaf2ff; color:#1463e6; }.detail-metrics article > div { display:grid; gap:5px; }.detail-metrics span { color:#6b7890; font-size:11px; }.detail-metrics strong { font-size:19px; }.detail-panel dl { margin:0; padding:8px 22px 20px; }.detail-panel dl > div { display:grid; grid-template-columns:150px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid #edf0f5; }.detail-panel dl > div:last-child { border:0; }.detail-panel dt { color:#748198; font-size:12px; }.detail-panel dd { margin:0; font-size:13px; font-weight:600; overflow-wrap:anywhere; }.technical-value { font-family:Consolas, monospace; color:#41506a; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(380px, 43%) 1fr; background:#fff; }.auth-brand-panel { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:42px 52px 62px; color:#fff; background:#0c203b; overflow:hidden; }.auth-brand-panel::before { content:""; position:absolute; width:210px; height:210px; right:8%; top:18%; border:1px solid rgba(82,215,207,.14); transform:rotate(16deg); }.auth-brand-panel::after { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(59,195,213,.18); border-radius:50%; right:-210px; bottom:-230px; }.auth-brand { display:flex; align-items:center; gap:12px; z-index:1; }.auth-brand img { width:46px; height:46px; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.22); }.auth-brand strong { font-size:21px; }.auth-message { max-width:480px; z-index:1; }.auth-message > span { color:#52d7cf; }.auth-message h1 { font-size:42px; line-height:1.08; margin:12px 0 18px; }.auth-message p { color:#b8c8dc; font-size:16px; line-height:1.65; }.auth-content { display:grid; place-items:center; padding:36px; background:#fbfcfe; }.login-panel { width:min(420px,100%); padding:34px; border:1px solid #e3e7ed; border-radius:8px; background:#fff; box-shadow:0 18px 48px rgba(23,32,51,.08); }.login-mobile-brand { display:none; }.login-heading { margin-bottom:28px; }.login-heading h1 { margin:7px 0 7px; font-size:28px; }.login-heading p, .login-footnote { margin:0; color:#718098; }.form-field { display:grid; gap:7px; margin-bottom:17px; }.form-field label { font-size:12px; font-weight:750; }.input-shell { position:relative; }.input-shell > .mud-icon-root { position:absolute; left:13px; top:12px; color:#8591a4; font-size:21px; pointer-events:none; }.form-field .input-shell input { padding:0 13px 0 43px; }.validation-message { color:#d92d20; font-size:11px; }.form-error { background:#fef0ef; color:#b42318; border:1px solid #fecdca; border-radius:7px; padding:11px 13px; margin-bottom:14px; font-size:12px; }.login-footnote { text-align:center; margin-top:20px; font-size:11px; }
.operation-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.operation-status-card { min-height:180px; display:flex; flex-direction:column; gap:17px; padding:18px; border:1px solid #e0e5ec; border-top:3px solid #98a2b3; border-radius:8px; background:#fff; box-shadow:0 8px 28px rgba(24,39,65,.04); }
.operation-status-card.healthy { border-top-color:#12b76a; }.operation-status-card.warning { border-top-color:#e09a19; }.operation-status-card.critical { border-top-color:#f04438; }
.operation-status-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.operation-status-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:8px; background:#eef4ff; color:#1463e6; }
.operation-status-card.warning .operation-status-icon { background:#fff5df; color:#b66d00; }.operation-status-card.critical .operation-status-icon { background:#feebea; color:#d92d20; }
.live-indicator { display:inline-flex; align-items:center; gap:7px; color:#667085; font-size:10px; font-weight:800; text-transform:uppercase; }.live-indicator i { width:7px; height:7px; border-radius:50%; background:#12b76a; box-shadow:0 0 0 3px #e6f8ee; }
.operation-status-card.warning .live-indicator i { background:#e09a19; box-shadow:0 0 0 3px #fff3d9; }.operation-status-card.critical .live-indicator i { background:#f04438; box-shadow:0 0 0 3px #feeceb; }
.operation-status-card > div:nth-child(2) { display:grid; gap:5px; }.operation-status-card > div:nth-child(2) > span { color:#667085; font-size:11px; font-weight:700; }.operation-status-card > div:nth-child(2) > strong { font-size:16px; line-height:1.35; }
.operation-status-card > small { margin-top:auto; color:#7d899a; font-size:11px; }
.operation-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); gap:16px; margin-top:16px; }
.operation-panel { overflow:hidden; }.operation-panel-heading { min-height:73px; }.operation-inline-stats { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }.operation-inline-stats span { padding:6px 8px; border-radius:6px; background:#f5f7fa; color:#697588; font-size:10px; text-transform:none; }.operation-inline-stats b { color:#26354d; }
.panel-meta { color:#7a8699 !important; font-size:11px !important; font-weight:650 !important; text-transform:none !important; }
.operation-feed { display:grid; }.operation-feed-item { display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; padding:15px 20px; border-bottom:1px solid #edf0f4; }.operation-feed-item:last-child { border-bottom:0; }
.feed-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:8px; background:#eef4ff; color:#1463e6; }.feed-icon.suggestion { background:#fff5df; color:#b66d00; }.feed-icon.success { background:#e8f8ef; color:#087a46; }.feed-icon.danger { background:#feebea; color:#c0261c; }
.feed-icon .mud-icon-root { font-size:20px; }.feed-content { min-width:0; }.feed-content > div { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.feed-content > div > strong { font-size:13px; overflow-wrap:anywhere; }.feed-content .status-badge { flex:0 0 auto; margin:0; }.feed-content p { margin:4px 0 5px; color:#59677d; font-size:12px; line-height:1.45; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }.feed-content small { color:#8792a5; font-size:10px; line-height:1.4; }
.compact-feed .operation-feed-item { padding-block:13px; }.operation-empty { min-height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#7a8699; text-align:center; padding:24px; }.operation-empty .mud-icon-root { font-size:38px; color:#a3afbf; }
.webhook-panel { margin-top:16px; }.webhook-table { min-width:980px; }.webhook-table td:first-child { max-width:330px; }.error-note { color:#c0261c; max-width:330px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.webhook-table .status-badge { margin:0; }
.operation-updated { margin:14px 2px 0; color:#8792a5; font-size:10px; text-align:right; }
.app-loading { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#526078; }.app-loading img { width:62px; height:62px; border-radius:12px; box-shadow:0 12px 30px rgba(20,52,94,.18); }.app-loading-bar { width:96px; height:3px; background:#dce5f2; overflow:hidden; }.app-loading-bar span { display:block; width:40%; height:100%; background:#1768e5; animation:loading 1s ease-in-out infinite; }.app-loading strong { font-size:13px; }
#blazor-error-ui { display:none; position:fixed; inset:auto 16px 16px; padding:14px 18px; background:#fff2d9; border:1px solid #ffd588; z-index:9999; }.dismiss { cursor:pointer; float:right; margin-left:14px; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes loading { 0%{transform:translateX(-100%)} 100%{transform:translateX(250%)} }
@media (max-width: 1100px) { .metric-grid,.operation-status-grid { grid-template-columns:repeat(2,1fr); }.insight-grid,.detail-grid,.operation-grid { grid-template-columns:1fr; }.appbar-user > div { display:none; } }
@media (max-width: 960px) { .mobile-menu { display:inline-flex !important; }.content-shell { padding:28px 20px 50px; }.drawer-note { display:none; }.environment-badge { display:none; } }
@media (max-width: 760px) { .backoffice-appbar { height:62px !important; padding-inline:10px !important; }.appbar-context .appbar-kicker { display:none; }.page-header { align-items:flex-start; }.page-header h1 { font-size:25px; }.page-header p { font-size:13px; }.filter-bar { grid-template-columns:1fr; padding:10px; }.primary-button.compact { width:100%; }.desktop-table-wrap { display:none; }.mobile-company-list { display:grid; gap:10px; padding:12px; }.company-card { display:block; border:1px solid #e1e7f0; border-radius:8px; padding:14px; background:#fff; transition:border-color .16s ease, background .16s ease; }.company-card:active { background:#f8fbff; border-color:#c9d9ef; }.company-card-head { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; }.company-card-head > div { display:grid; }.company-card-head small { color:#748198; }.company-card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:12px; margin-top:12px; border-top:1px solid #edf0f5; color:#637088; font-size:11px; }.company-card-meta .status-badge { margin:0; }.detail-metrics { grid-template-columns:repeat(2,1fr); }.detail-panel dl > div { grid-template-columns:1fr; gap:5px; }.auth-shell { grid-template-columns:1fr; }.auth-brand-panel { display:none; }.auth-content { padding:24px; }.login-mobile-brand { display:flex; align-items:center; gap:10px; padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid #edf0f4; }.login-mobile-brand img { width:42px; height:42px; border-radius:8px; }.login-mobile-brand > div { display:grid; }.login-mobile-brand strong { font-size:17px; }.login-mobile-brand span { color:#7b8799; font-size:10px; font-weight:800; text-transform:uppercase; }.activation-summary { grid-template-columns:1fr; padding:14px 20px; }.activation-summary > div { border-right:0; border-bottom:1px solid #e7ebf1; padding:14px 0; }.activation-summary > div:last-child { border-bottom:0; }.list-summary > span { display:none; }.operation-inline-stats { justify-content:flex-start; width:100%; }.operation-panel-heading { align-items:flex-start; flex-wrap:wrap; }.webhook-table-wrap { overflow-x:auto; } }
@media (max-width: 480px) { .content-shell { padding:22px 14px 42px; }.metric-grid,.operation-status-grid { grid-template-columns:1fr; gap:12px; }.metric-card { min-height:150px; }.operation-status-card { min-height:164px; }.appbar-context { display:none; }.appbar-user { padding-right:8px; margin-right:3px; }.appbar-user .mud-avatar-root { width:36px; height:36px; }.detail-metrics { grid-template-columns:1fr; }.page-header .secondary-button { width:44px; min-width:44px; overflow:hidden; padding:0; }.page-header .secondary-button span { display:none; }.page-header .secondary-button .mud-icon-root { margin:0; }.login-panel { padding:24px 20px; }.auth-content { padding:16px; }.panel-heading { padding:18px; }.activation-summary { padding-inline:18px; }.operation-feed-item { grid-template-columns:34px minmax(0,1fr); padding:14px; gap:10px; }.feed-icon { width:34px; height:34px; }.feed-content > div { display:grid; gap:6px; }.operation-inline-stats span { flex:1 1 auto; text-align:center; }.operation-updated { text-align:left; line-height:1.5; } }