.ops-dashboard { --ops-ink: var(--ink, #13263a); --ops-muted: var(--muted, #64778a); --ops-border: var(--line, #dce6ed); color: var(--ops-ink); max-width: 1500px; margin: 0 auto; padding: 8px 8px 28px; font-family: inherit; }
.ops-dashboard * { box-sizing: border-box; }
.ops-dashboard button, .ops-dashboard select { font: inherit; }
.ops-dashboard button, .ops-dashboard a, .ops-dashboard select, .ops-dashboard summary { -webkit-tap-highlight-color: transparent; }
.ops-dashboard button:focus-visible, .ops-dashboard a:focus-visible, .ops-dashboard select:focus-visible, .ops-dashboard summary:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.ops-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 20px 0 34px; }
.ops-eyebrow { display: block; color: var(--muted); font-size: 11px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }
.ops-header h1 { margin: 16px 0; font-size: clamp(28px, 2.5vw, 38px); font-weight: 650; line-height: 1.2; letter-spacing: -.04em; }
.ops-header h1 > span { color: var(--navy); font-weight: 400; }
.ops-header p { max-width: 570px; color: var(--ops-muted); font-size: 14px; line-height: 1.6; margin: 0; }
.ops-header-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 13px; flex-shrink: 0; }
.ops-header-meta > span:nth-child(2) { font-size: 12px; color: var(--ops-muted); }
.ops-secondary-button { display: inline-flex; justify-content: center; align-items: center; min-height: 39px; padding: 8px 15px; border: 1px solid #d2dde3; border-radius: 9px; background: #fff; color: var(--navy); font-size: 13px !important; font-weight: 600 !important; cursor: pointer; }
.ops-secondary-button:hover { background: #f2f7f8; border-color: #9bbdc5; }
.ops-secondary-button:disabled { opacity: .55; cursor: wait; }
.ops-pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 10px; border-radius: 7px; font-size: 11px; font-weight: 600; line-height: 1.4; }
.ops-pill.success { background: #e6f3ee; color: var(--success); }
.ops-pill.warning { background: #fff0d8; color: #835913; }
.ops-pill.danger { background: #fbe9e8; color: var(--danger); }
.ops-pill.neutral { background: #edf1f4; color: #526b7b; }
.ops-tabs { display: flex; gap: 26px; border-bottom: 1px solid #dbe4e9; }
.ops-tabs button { display: flex; align-items: center; gap: 9px; padding: 15px 1px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: #627785; font-size: 14px; cursor: pointer; }
.ops-tabs button[aria-current='page'] { color: var(--navy); border-bottom-color: var(--pink); font-weight: 650; }
.ops-tabs button > span { background: #e8eef1; padding: 2px 7px; font-size: 11px; border-radius: 5px; }
.ops-panel { padding: 28px 0 16px; }
.ops-section-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.ops-dashboard h2 { font-size: 19px; font-weight: 600; letter-spacing: -.025em; margin: 7px 0 0; }
.ops-period { display: flex; align-items: center; gap: 7px; color: var(--ops-muted); font-size: 12px; }
.ops-period svg { width: 15px; }
.ops-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ops-stat { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 21px; border-radius: 13px; border: 1px solid var(--ops-border); text-align: left; color: var(--ops-ink); background: #fff; cursor: pointer; box-shadow: 0 2px 3px #16334803; transition: border-color .16s, transform .16s; }
.ops-stat:hover:not(:disabled) { border-color: var(--pink); transform: translateY(-2px); }
.ops-stat:disabled { cursor: default; color: var(--ops-ink); }
.ops-stat:first-child { background: #fff3f8; border-color: #ffd3e5; }
.ops-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; font-size: 13px; line-height: 1.5; }
.ops-stat-top > svg { color: var(--pink); flex-shrink: 0; width: 18px; }
.ops-stat > strong { font-size: 38px; line-height: 1; letter-spacing: -.05em; font-weight: 600; }
.ops-stat-bottom { display: flex; align-items: center; justify-content: space-between; color: var(--muted); gap: 8px; font-size: 11px; line-height: 1.6; }
.ops-stat-bottom > svg { width: 16px; flex-shrink: 0; }
.ops-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 30px; margin-top: 38px; }
.ops-count { min-width: 25px; padding: 3px 8px; background: #e7edf1; border-radius: 6px; text-align: center; font-size: 12px; }
.ops-incidents { display: grid; gap: 12px; }
.ops-incident { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 13px; background: #fff; padding: 19px; border: 1px solid #ead9c0; border-radius: 12px; }
.ops-incident.danger { border-color: #eed7d4; }
.ops-incident-icon { display: grid; align-items: start; padding-top: 3px; color: var(--warning); }
.ops-incident.danger .ops-incident-icon { color: var(--danger); }
.ops-incident-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.ops-incident h3 { margin: 2px 0 8px; font-size: 14px; line-height: 1.5; font-weight: 600; }
.ops-incident-heading .ops-pill { flex-shrink: 0; }
.ops-incident p { margin: 0 0 8px; color: #6f7f89; font-size: 12px; line-height: 1.65; }
.ops-incident p.ops-next-step { color: #395366; }
.ops-text-button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 0; border: 0; background: transparent; color: var(--navy); font-size: 12px !important; font-weight: 600 !important; text-align: left; cursor: pointer; }
.ops-text-button svg { width: 15px; }
.ops-text-button:hover { color: var(--navy-deep); text-decoration: underline; }
.ops-side-card { align-self: start; padding: 23px; border: 1px solid var(--ops-border); background: #fff; border-radius: 13px; }
.ops-side-card h2 { margin-top: 20px; font-size: 34px; letter-spacing: -.05em; }
.ops-side-card h2 > span { color: #91a1aa; font-size: 23px; font-weight: 400; }
.ops-side-card p { color: var(--ops-muted); font-size: 12px; line-height: 1.65; margin: 6px 0 14px; }
.ops-progress { height: 5px; border-radius: 5px; background: #eaf0f2; overflow: hidden; margin: 18px 0 14px; }
.ops-progress > span { display: block; height: 100%; background: var(--success); border-radius: 5px; }
.ops-side-note { border-top: 1px solid var(--ops-border); padding-top: 18px; margin-top: 18px; }
.ops-side-note strong { font-size: 12px; font-weight: 600; }
.ops-side-note p { margin-bottom: 0; font-size: 11px; }
.ops-calm { display: flex; align-items: flex-start; gap: 14px; padding: 24px; background: #f2f8f6; border: 1px solid #d5e8df; border-radius: 13px; }
.ops-calm svg { flex-shrink: 0; color: #458c72; }
.ops-calm strong { display: block; font-size: 14px; line-height: 1.5; }
.ops-calm p { color: var(--ops-muted); font-size: 12px; line-height: 1.6; }
.ops-deliveries { margin: 32px 0 14px; }
.ops-owner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--ops-border); border-radius: 12px; overflow: hidden; background: #fff; }
.ops-owner-grid article { display: flex; gap: 12px; padding: 20px; align-items: center; }
.ops-owner-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--ops-border); }
.ops-owner-grid article:nth-child(odd) { border-right: 1px solid var(--ops-border); }
.ops-avatar { display: grid; place-items: center; width: 35px; height: 35px; flex-shrink: 0; border-radius: 50%; color: var(--navy); background: #eef3f5; font-size: 13px; }
.ops-owner-grid strong { font-size: 13px; font-weight: 600; }
.ops-owner-grid p { margin: 5px 0 0; color: var(--ops-muted); font-size: 11px; }
.ops-help { color: var(--ops-muted); font-size: 11px; line-height: 1.7; }
.ops-workflow-group { margin-top: 28px; }
.ops-workflow-group > h3 { font-size: 12px; color: #657b86; font-weight: 600; margin: 0 0 12px; }
.ops-workflow-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) 120px 90px; align-items: center; gap: 20px; border: 1px solid var(--ops-border); background: #fff; padding: 19px 21px; }
.ops-workflow-row + .ops-workflow-row { border-top: 0; }
.ops-workflow-row:nth-child(2) { border-radius: 12px 12px 0 0; }
.ops-workflow-row:last-child { border-radius: 0 0 12px 12px; }
.ops-workflow-row:only-of-type { border-radius: 12px; }
.ops-workflow-row > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ops-workflow-row strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ops-workflow-row div > span { font-size: 11px; color: var(--ops-muted); line-height: 1.5; }
.ops-workflow-row .ops-pill { justify-self: start; }
.ops-filters { display: grid; grid-template-columns: 1fr 1.5fr 1fr auto; align-items: end; gap: 14px; margin-bottom: 16px; }
.ops-filters label { display: flex; flex-direction: column; gap: 8px; font-size: 11px; color: #526c7a; }
.ops-filters select { min-width: 0; width: 100%; height: 40px; padding: 8px 10px; background: #fff; color: #254358; border: 1px solid #d6e1e7; border-radius: 8px; font-size: 12px; }
.ops-result-list { margin-top: 20px; border: 1px solid var(--ops-border); border-radius: 13px; background: #fff; overflow: hidden; }
.ops-result-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(160px, auto); gap: 16px; padding: 23px; border-bottom: 1px solid #eaf0f3; }
.ops-result-row:last-child { border-bottom: 0; }
.ops-result-icon { display: grid; place-items: center; width: 39px; height: 39px; background: #eaf3f5; border-radius: 10px; color: #648e9d; }
.ops-result-icon.emails { background: #eaf5ef; color: #539983; }
.ops-result-icon.offers { background: #f7f0e7; color: #ae8856; }
.ops-result-main { min-width: 0; overflow-wrap: anywhere; }
.ops-result-main h3 { font-size: 14px; line-height: 1.5; font-weight: 600; margin: 0 0 5px; }
.ops-result-main > p { color: var(--ops-muted); font-size: 12px; line-height: 1.6; margin: 0 0 10px; }
.ops-email { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 9px 0 12px; font-size: 13px; color: var(--navy); }
.ops-copy { background: #f4f7f8; border: 1px solid #e2e9ec; border-radius: 5px; padding: 4px 7px; color: #607886; font-size: 10px !important; cursor: pointer; }
.ops-result-origin { display: block; color: #728590; font-size: 10px; line-height: 1.5; }
.ops-result-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; }
.ops-result-actions > a { font-size: 11px; color: var(--navy); text-decoration: none; }
.ops-result-actions > a:hover { text-decoration: underline; }
.ops-results-footer { display: flex; justify-content: space-between; align-items: center; color: var(--ops-muted); font-size: 12px; padding: 16px 0; }
.ops-empty { display: flex; flex-direction: column; align-items: center; padding: 54px 25px; color: #718893; text-align: center; font-size: 13px; }
.ops-empty svg { width: 30px; height: 30px; margin-bottom: 10px; }
.ops-empty h3 { color: #405f70; font-size: 15px; font-weight: 600; }
.ops-empty p { max-width: 420px; font-size: 12px; line-height: 1.7; }
.ops-fetch-error { margin: 12px 0; background: #fff1e1; color: #805c2f; padding: 15px 20px; border-radius: 10px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.ops-diagnostics { border-top: 1px solid #dbe5ea; margin-top: 25px; padding-top: 5px; }
.ops-diagnostics > summary { color: #587281; cursor: pointer; padding: 16px 0; font-size: 12px; }
.ops-diagnostic-content { padding: 10px 0 25px; }
.ops-footnote { color: #738691; font-size: 10px; text-align: center; margin: 18px 0 0; line-height: 1.7; }
.ops-copy-status { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 0; font-size: 12px; background: var(--navy); color: #fff; border-radius: 8px; z-index: 10; }
.ops-copy-status:not(:empty) { padding: 10px 16px; }
@media (max-width: 1150px) { .ops-stats { gap: 10px; } .ops-stat { padding: 17px; } .ops-main-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; } .ops-workflow-row { gap: 12px; grid-template-columns: minmax(150px, 1.4fr) minmax(125px, 1fr) 95px 80px; } }
@media (max-width: 850px) { .ops-header { align-items: flex-start; } .ops-header h1 { font-size: 29px; } .ops-header-meta { flex-shrink: 1; text-align: right; } .ops-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } .ops-main-grid { grid-template-columns: minmax(0, 1fr); } .ops-side-card { width: 100%; } .ops-workflow-row { grid-template-columns: minmax(0, 1fr) auto; } .ops-workflow-output { grid-row: 2; } .ops-workflow-row > .ops-pill { grid-column: 2; grid-row: 1; justify-self: end; } .ops-workflow-row > button { grid-column: 2; grid-row: 2; justify-self: end; } .ops-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ops-dashboard { padding: 0 0 20px; } .ops-header { display: block; padding-top: 8px; padding-bottom: 22px; } .ops-header h1 { font-size: 29px; } .ops-header p { font-size: 12px; } .ops-header-meta { margin-top: 22px; display: grid; grid-template-columns: 1fr auto; align-items: center; justify-items: start; gap: 10px; text-align: left; } .ops-header-meta > button { grid-column: 2; grid-row: 1 / 3; } .ops-header-meta > span:nth-child(2) { font-size: 10px; } .ops-tabs { gap: 20px; } .ops-tabs button { font-size: 12px; } .ops-tabs button > span { display: none; } .ops-panel { padding-top: 24px; } .ops-section-title { align-items: start; } .ops-section-title h2 { font-size: 17px; line-height: 1.4; } .ops-period { display: none; } .ops-stat { padding: 15px; gap: 20px; } .ops-stat-top { font-size: 11px; } .ops-stat > strong { font-size: 32px; } .ops-stat-bottom { font-size: 10px; } .ops-owner-grid { grid-template-columns: minmax(0, 1fr); } .ops-owner-grid article { border: 0 !important; border-bottom: 1px solid var(--ops-border) !important; padding: 16px; } .ops-owner-grid article:last-child { border-bottom: 0 !important; } .ops-incident { padding: 15px; grid-template-columns: 21px minmax(0, 1fr); gap: 10px; } .ops-incident-heading { display: block; } .ops-incident-heading > .ops-pill { margin-bottom: 10px; } .ops-workflow-row { padding: 16px; } .ops-result-row { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 18px 15px; } .ops-result-icon { width: 28px; height: 28px; border-radius: 7px; } .ops-result-icon svg { width: 16px; } .ops-result-actions { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; } .ops-filters { gap: 10px; } .ops-result-main h3 { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .ops-stat { transition: none; } }

.ops-primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--pink); color: #fff; font-size: 12px !important; font-weight: 600 !important; cursor: pointer; box-shadow: 0 8px 20px #ff37851a; }
.ops-primary-button:disabled { opacity: .55; cursor: wait; }
.ops-push-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ops-push-actions .ops-text-button { min-height: 44px; }