* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: #f0f2f5; color: #1a1a2e; min-height: 100vh; }
header { background: #16213e; color: #fff; padding: 18px 32px;
         display: flex; align-items: center; gap: 16px; }
header h1 { font-size: 20px; font-weight: 600; }
.badge { background: #0f3460; padding: 4px 10px; border-radius: 12px;
         font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.container { max-width: 900px; margin: 32px auto; padding: 0 16px; }
.toolbar { display: flex; justify-content: space-between; align-items: center;
           margin-bottom: 16px; }
.toolbar h2 { font-size: 16px; color: #555; }
.btn { padding: 8px 20px; border: none; border-radius: 6px; cursor: pointer;
       font-size: 14px; font-weight: 500; transition: opacity .15s; }
.btn:hover { opacity: .85; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: #0f3460; color: #fff; }
.btn-task   { background: #e94560; color: #fff; font-size: 13px; padding: 6px 14px; }
.card { background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08);
        overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th { background: #f7f8fa; text-align: left; padding: 12px 16px;
     font-size: 13px; color: #888; font-weight: 600; text-transform: uppercase;
     letter-spacing: .4px; border-bottom: 1px solid #eee; }
td { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafbfc; }
.status { font-size: 13px; font-weight: 500; }
.status.pending   { color: #aaa; }
.status.updating  { color: #f59e0b; }
.status.updated   { color: #10b981; }
.status.already   { color: #6366f1; }
.status.notfound  { color: #ef4444; }
.status.error     { color: #ef4444; }
.info-bar { background: #fff; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;
            font-size: 13px; color: #555; box-shadow: 0 1px 4px rgba(0,0,0,.06);
            display: flex; gap: 24px; }
.info-bar span { font-weight: 600; color: #16213e; }
.section-title { font-size: 15px; font-weight: 600; color: #16213e; margin: 28px 0 12px; display: flex; align-items: center; gap: 10px; }
.section-title small { font-size: 12px; font-weight: 400; color: #888; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #e0f2fe; color: #0369a1; }
.tag-default { background: #dcfce7; color: #15803d; }
.tag-custom  { background: #fef3c7; color: #b45309; }
.status.idle { color: #aaa; }
.all-tasks-controls { display: flex; justify-content: space-between; align-items: center;
                      margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.at-counters { display: flex; gap: 16px; font-size: 13px; color: #555; }
.at-counter strong { font-weight: 700; }
.at-counter-default strong { color: #15803d; }
.at-counter-custom  strong { color: #b45309; }
.at-toolbar { display: flex; align-items: center; gap: 10px; }
.at-filter { padding: 7px 12px; border: 1px solid #ddd; border-radius: 6px;
             font-size: 14px; background: #fff; cursor: pointer; }
/* Navigation */
.nav-bar { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-link { color: rgba(255,255,255,.8); font-size: 14px; text-decoration: none;
            padding: 7px 14px; border-radius: 6px; border: 1px solid transparent;
            transition: background .15s, color .15s; white-space: nowrap; }
.nav-link:hover { background: rgba(255,255,255,.15); color: #fff; }
.nav-link.active { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.3); }
/* Page visibility */
.page { display: none; }
.page.active { display: block; }
/* Find Task page */
.search-card { padding: 16px; }
.search-row { display: flex; gap: 10px; align-items: center; }
.search-input { flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px;
                font-size: 14px; outline: none; }
.search-input:focus { border-color: #0f3460; }
.search-filter-row { margin-bottom: 10px; }
.task-link { color: #0f3460; text-decoration: none; font-family: monospace; font-size: 12px; }
.task-link:hover { text-decoration: underline; }
.json-pre { white-space: pre-wrap; word-break: break-all; font-family: monospace;
            font-size: 12px; padding: 16px; max-height: 420px; overflow-y: auto; margin: 0;
            color: #1a1a2e; background: #fafbfc; }
.detail-label { font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase;
                letter-spacing: .4px; margin: 18px 0 6px; }
/* Pagination */
.pagination-row { display: flex; align-items: center; gap: 12px;
                  position: fixed; bottom: 0; left: 0; right: 0;
                  background: #f0f2f5; padding: 8px 32px; z-index: 10;
                  box-shadow: 0 -2px 8px rgba(0,0,0,.07); }
.page-info { font-size: 13px; color: #555; flex: 1; text-align: center; }
/* Prevent last rows from being hidden behind the fixed pagination bar */
/* Wider container for 5-column table; id/path/type show in full, description may truncate */
#page-find-task .container { padding-bottom: 60px; max-width: 1400px; }
#page-find-task .card { overflow-x: auto; }
#page-find-task table { min-width: 800px; }
#page-find-task table th:nth-child(3),
#page-find-task table td:nth-child(3) { max-width: 420px; word-break: break-word; }
#page-find-task table th:nth-child(4),
#page-find-task table td:nth-child(4) { min-width: 90px; white-space: nowrap; }
#page-find-task table th:nth-child(5),
#page-find-task table td:nth-child(5) { min-width: 120px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sortable column header */
.sortable-th { cursor: pointer; user-select: none; }
.sortable-th:hover { background: #eef0f4; }
/* ── Informatica Monitoring page ────────────────────────────────────────── */
#page-informatica-monitoring .container { max-width: 1400px; padding-bottom: 70px; }
.mon-toolbar { display: flex; align-items: center; justify-content: space-between;
               margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.mon-toolbar h2 { font-size: 15px; color: #555; margin: 0; }
.mon-refresh-info { font-size: 12px; color: #aaa; }
/* Counter cards row */
.mon-cards { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.mon-card { flex: 1; min-width: 150px; background: #fff; border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,.08); padding: 20px 24px;
            cursor: pointer; transition: box-shadow .15s, transform .1s;
            border-top: 4px solid transparent; }
.mon-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.13); transform: translateY(-2px); }
.mon-card.active { box-shadow: 0 4px 16px rgba(0,0,0,.15); transform: translateY(-2px); }
.mon-card-label { font-size: 12px; font-weight: 600; text-transform: uppercase;
                  letter-spacing: .5px; color: #888; margin-bottom: 8px; }
.mon-card-count { font-size: 32px; font-weight: 700; line-height: 1; }
.mon-card-sub   { font-size: 11px; color: #aaa; margin-top: 6px; }
.mon-card-success { border-top-color: #10b981; }
.mon-card-success .mon-card-count { color: #10b981; }
.mon-card-warning { border-top-color: #f59e0b; }
.mon-card-warning .mon-card-count { color: #f59e0b; }
.mon-card-failed  { border-top-color: #ef4444; }
.mon-card-failed  .mon-card-count { color: #ef4444; }
.mon-card-running { border-top-color: #6366f1; }
.mon-card-running .mon-card-count { color: #6366f1; }
.mon-card-scheduled { border-top-color: #0ea5e9; }
.mon-card-scheduled .mon-card-count { color: #0ea5e9; }
/* Jobs section */
.mon-jobs-section { margin-bottom: 24px; }
.mon-jobs-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.mon-jobs-title { font-size: 15px; font-weight: 600; color: #16213e; }
.mon-jobs-count { font-size: 12px; color: #888; }
.mon-jobs-filter { padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px;
                   font-size: 13px; background: #fff; flex: 1; min-width: 180px; max-width: 320px; }
/* Fixed pagination always visible at bottom of viewport */
.mon-pager { display: flex; align-items: center; gap: 8px; padding: 10px 16px;
             position: fixed; bottom: 0; left: 0; right: 0; background: #f8fafc;
             border-top: 1px solid #e2e8f0; z-index: 50; }
.mon-pager-info { font-size: 12px; color: #555; flex: 1; text-align: center; }

/* Jobs table — truncated cells with hover tooltip */
/* 8 columns: # | JOB | ASSET | START TIME | ROWS | PARENT ASSET | STATUS | LATESTST. */
#mon-jobs-table { min-width: 600px; table-layout: fixed; width: 100%; }
#mon-jobs-table th, #mon-jobs-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 8px; }
/* # */
#mon-jobs-table th:nth-child(1), #mon-jobs-table td:nth-child(1) { width: 36px; color: #aaa; font-size: 12px; text-align: right; }
/* Job: takes remaining space */
#mon-jobs-table th.mon-th-job,   #mon-jobs-table td.mon-col-job  { width: auto; min-width: 180px; white-space: normal; overflow: hidden; text-overflow: clip; word-break: break-word; }
/* Asset */
#mon-jobs-table td.mon-col-asset { width: 160px; }
/* Start Time */
#mon-jobs-table td.mon-col-starttime { width: 130px; }
/* Rows (col 5) */
#mon-jobs-table th:nth-child(5), #mon-jobs-table td:nth-child(5) { width: 60px; text-align: right; }
/* Parent Asset */
#mon-jobs-table td.mon-col-parentasset { width: 150px; }
/* Status (col 7) */
#mon-jobs-table th:nth-child(7), #mon-jobs-table td:nth-child(7) { width: 75px; }
/* LatestSt. (col 8) */
#mon-jobs-table th:nth-child(8), #mon-jobs-table td:nth-child(8) { width: 80px; font-weight: 600; }
/* Latest End (col 9) */
#mon-jobs-table th:nth-child(9), #mon-jobs-table td.mon-col-latestend { width: 120px; }
/* Error Msg (col 10) */
#mon-jobs-table th:nth-child(10), #mon-jobs-table td.mon-col-errmsg { width: 90px; color: #ef4444; font-size: 12px; }

/* Floating popup for extra job details (replaces broken hidden-column approach) */
#mon-hover-popup { position: fixed; z-index: 1000; background: #fff; border-radius: 8px;
                   box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 10px 14px;
                   font-size: 12px; min-width: 180px; max-width: 320px; pointer-events: none; }
#mon-hover-popup div { display: flex; gap: 8px; margin-bottom: 4px; }
#mon-hover-popup div:last-child { margin-bottom: 0; }
.mon-popup-label { font-weight: 600; color: #888; min-width: 72px; text-transform: uppercase;
                   letter-spacing: .3px; font-size: 11px; flex-shrink: 0; }
.mon-popup-val   { color: #1a1a2e; flex: 1; word-break: break-word; }

/* Double-click expanded column */
#mon-jobs-table .mon-col-expanded { width: auto !important; min-width: 240px !important;
  white-space: normal !important; word-break: break-word !important; background: #f0f9ff; }

/* Hyperlinks in jobs table */
#mon-jobs-table a.mon-link { color: inherit; text-decoration: underline dotted; cursor: pointer; }
#mon-jobs-table a.mon-link:hover { color: #0ea5e9; }
.mon-status-success { color: #10b981; }
.mon-status-failed  { color: #ef4444; }
.mon-status-warning { color: #f59e0b; }
.mon-status-running { color: #6366f1; }
/* Pie charts row */
.mon-charts { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.mon-chart-card { flex: 1; min-width: 280px; background: #fff; border-radius: 10px;
                  box-shadow: 0 2px 8px rgba(0,0,0,.08); padding: 20px; }
.mon-chart-title { font-size: 14px; font-weight: 600; color: #16213e; margin-bottom: 16px; }
.mon-chart-inner { display: flex; gap: 20px; align-items: center; }
.mon-chart-legend { font-size: 12px; flex: 1; }
.mon-chart-legend-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mon-chart-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mon-chart-legend-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; }
.mon-chart-legend-val   { font-weight: 600; color: #16213e; }
/* Animated loading dots inside counter cards */
.mon-dot-anim { display: inline-flex; gap: 5px; align-items: center; height: 36px; }
.mon-dot-anim i { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
                  background: currentColor; animation: monDotPulse .9s ease-in-out infinite; }
.mon-dot-anim i:nth-child(2) { animation-delay: .15s; }
.mon-dot-anim i:nth-child(3) { animation-delay: .30s; }
@keyframes monDotPulse {
  0%, 80%, 100% { transform: scale(.55); opacity: .35; }
  40%            { transform: scale(1);   opacity: 1;   }
}
/* Clickable error message cell */
#mon-jobs-table td.mon-errmsg-click { cursor: pointer; text-decoration: underline dotted; }
#mon-jobs-table td.mon-errmsg-click:hover { color: #b91c1c; }
/* Sticky notes panel — fixed on right side */
#mon-sticky-panel { position: fixed; right: 12px; top: 80px; bottom: 70px;
                    width: 320px; display: flex; flex-direction: column; gap: 10px;
                    overflow-y: auto; z-index: 200; pointer-events: none; }
.mon-sticky-note { background: #fffbeb; border: 1px solid #f59e0b; border-radius: 8px;
                   box-shadow: 0 4px 12px rgba(0,0,0,.15); pointer-events: all;
                   display: flex; flex-direction: column; max-height: 220px; }
.mon-sticky-note.mon-sticky-solo { max-height: none; flex: 1; }
.mon-sticky-header { display: flex; align-items: center; gap: 6px; padding: 8px 10px;
                     border-bottom: 1px solid #fde68a; background: #fef3c7;
                     border-radius: 8px 8px 0 0; }
.mon-sticky-title { padding: 5px 10px 4px; font-size: 11px; font-weight: 700; color: #1a1a2e;
                    background: #fef9e7; border-bottom: 1px solid #fde68a;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-sticky-label { font-size: 11px; font-weight: 700; color: #92400e;
                    text-transform: uppercase; letter-spacing: .4px; flex: 1; }
.mon-sticky-copy, .mon-sticky-close { border: none; border-radius: 4px; cursor: pointer;
  font-size: 11px; padding: 2px 8px; font-weight: 600; }
.mon-sticky-copy  { background: #0f3460; color: #fff; }
.mon-sticky-close { background: #ef4444; color: #fff; }
.mon-sticky-copy:hover  { opacity: .85; }
.mon-sticky-close:hover { opacity: .85; }
.mon-sticky-body { margin: 0; padding: 10px; font-size: 11px; font-family: monospace;
                   white-space: pre-wrap; word-break: break-word; overflow-y: auto;
                   flex: 1; color: #1a1a2e; }

/* ── Version badge ────────────────────────────────────────────────────────── */
.version-badge { background: #1a3a5c; color: #7eb8f7; padding: 3px 10px;
                 border-radius: 10px; font-size: 12px; font-weight: 600;
                 letter-spacing: .3px; vertical-align: middle; }

/* ── Gear icon button ─────────────────────────────────────────────────────── */
.gear-btn { background: none; border: none; cursor: pointer; font-size: 16px;
            color: #999; padding: 0 4px; vertical-align: middle; line-height: 1;
            transition: color .15s, transform .3s; }
.gear-btn:hover { color: #4a90e2; transform: rotate(60deg); }
.header-gear-btn { color: #7eb8f7; font-size: 15px; }
.header-gear-btn:hover { color: #fff; }

/* ── Page Settings modal ──────────────────────────────────────────────────── */
.ps-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45);
              display: flex; align-items: center; justify-content: center; z-index: 1000; }
.ps-modal  { background: #fff; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.22);
             min-width: 320px; max-width: 480px; width: 90%; overflow: hidden; }
.ps-header { display: flex; align-items: center; justify-content: space-between;
             padding: 14px 18px 10px; border-bottom: 1px solid #eee;
             font-weight: 700; font-size: 14px; color: #1a1a2e; }
.ps-close  { background: none; border: none; cursor: pointer; font-size: 16px; color: #aaa; }
.ps-close:hover { color: #c00; }
.ps-body   { padding: 16px 18px; }
.ps-table  { width: 100%; border-collapse: collapse; font-size: 13px; }
.ps-table td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }
.ps-key    { color: #555; font-family: monospace; width: 55%; }
.ps-val    { font-family: monospace; font-weight: 600; }
.ps-true   { color: #2e7d32; }
.ps-false  { color: #c00; }
.ps-none          { color: #888; font-size: 13px; }
.ps-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .06em; color: #888; padding: 10px 8px 4px; }
.dump-err-btn     { background: none; border: none; padding: 0; cursor: pointer;
                    color: #dc3545; font-weight: 600; font-size: inherit; text-decoration: underline; }

/* ── Task History page ────────────────────────────────────────────────────── */
.hist-input-card { padding: 16px; }
.hist-input-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.hist-jobs-wrap { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.hist-options-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 140px; padding-top: 2px; }
.hist-label { font-size: 12px; font-weight: 600; color: #555; }
.hist-textarea { width: 100%; font-family: monospace; font-size: 12px; padding: 8px;
                 border: 1px solid #ddd; border-radius: 6px; resize: vertical;
                 color: #1a1a2e; background: #fafafa; }
.hist-date-range { font-size: 12px; color: #444; padding: 6px 8px; line-height: 1.8;
                   border-left: 3px solid #4a90e2; background: #f0f5ff;
                   border-radius: 0 4px 4px 0; }
.hist-range-row { display: flex; align-items: center; gap: 4px; }
.hist-range-lbl { font-weight: 600; color: #555; min-width: 34px; }
.hist-range-val { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hist-time-input { font-size: 12px; border: 1px solid #cce0ff; border-radius: 4px;
                   padding: 1px 4px; background: #fff; color: #1a1a2e; cursor: pointer; outline: none; }
.hist-time-input:focus { border-color: #4a90e2; box-shadow: 0 0 0 2px rgba(74,144,226,.15); }
.hist-now-btn { font-size: 11px; padding: 1px 7px; border: 1px solid #4a90e2; border-radius: 4px;
                background: #fff; color: #4a90e2; cursor: pointer; line-height: 1.6; }
.hist-now-btn:hover { background: #4a90e2; color: #fff; }
.hist-adv-btn { font-size:11px; padding:2px 9px; border:1px solid #4a90e2; border-radius:4px;
                background:#fff; color:#4a90e2; cursor:pointer; line-height:1.6; }
.hist-adv-btn:hover { background:#edf3fc; }
.hist-adv-badge { font-size:11px; background:#fff3cd; color:#856404; border:1px solid #ffc107;
                  border-radius:4px; padding:2px 8px; }
.hist-adv-modal { width:500px; max-width:96vw; }
.hist-adv-body  { padding:20px; }
.hist-adv-row   { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.hist-adv-lbl   { width:36px; font-size:13px; color:#555; font-weight:600; }
.hist-adv-date  { border:1px solid #ccc; border-radius:4px; padding:4px 8px; font-size:13px; flex:1; }
.hist-adv-time  { border:1px solid #ccc; border-radius:4px; padding:4px 8px; font-size:13px; width:110px; }
.hist-adv-bar-wrap  { margin:8px 0 4px; }
.hist-adv-bar-track { position:relative; height:24px; background:#e8edf3; border-radius:6px; margin:22px 0 26px; }
.hist-adv-bar-fill  { position:absolute; top:0; bottom:0; background:#4a90e2; border-radius:6px; opacity:.75; min-width:4px; }
.hist-adv-bar-lbl   { position:absolute; top:-20px; font-size:11px; color:#4a90e2; font-weight:600; white-space:nowrap; }
.hist-adv-bar-lbl-l { transform:translateX(-50%); }
.hist-adv-bar-lbl-r { transform:translateX(50%); }
.hist-adv-bar-markers { position:relative; height:22px; }
.hist-adv-marker    { position:absolute; transform:translateX(-50%); text-align:center; }
.hist-adv-marker-tick { width:1px; height:7px; background:#bbb; margin:0 auto; }
.hist-adv-marker-lbl  { font-size:10px; color:#999; white-space:nowrap; margin-top:1px; }
.hist-adv-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px;
                    padding-top:16px; border-top:1px solid #eee; }
.hist-status { padding: 6px 2px; font-size: 13px; color: #666; min-height: 24px; }
.hist-status-link { cursor: pointer; text-decoration: underline dotted; }
.hist-status-link:hover { filter: brightness(1.2); }
#hist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#hist-table th, #hist-table td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hist-table th { background: #f8f9fa; font-size: 11px; text-transform: uppercase;
                 letter-spacing: .4px; color: #777; font-weight: 600; }
.hist-col-job { min-width: 200px; white-space: normal; word-break: break-word; font-weight: 500; }
.hist-col-runid { color: #aaa; font-size: 12px; white-space: nowrap; }
.hist-col-time { font-size: 12px; white-space: nowrap; }
.hist-col-rows { text-align: right; font-size: 12px; white-space: nowrap; }
.hist-col-startedby { min-width: 120px; max-width: 180px; }
.hist-col-status { white-space: nowrap; }
.hist-num { width: 36px; text-align: right; color: #aaa; font-size: 12px; }
.hist-separator td { padding: 0; height: 6px; background: #f4f6f9; border: none; }
.hist-pager { display: flex; align-items: center; gap: 8px; padding: 10px 4px; margin-top: 4px; }
.hist-pager-info { font-size: 12px; color: #555; flex: 1; text-align: center; }

/* ── Quick Search bar ─────────────────────────────────────────────────────── */
.hist-quick-search-bar { display: flex; align-items: center; gap: 10px; padding: 6px 2px 4px; flex-wrap: wrap; }
.hist-quick-search-label { font-size: 12px; font-weight: 600; color: #888; white-space: nowrap; }
.hist-quick-search-input { flex: 1; min-width: 200px; max-width: 340px; padding: 6px 12px;
  border: 1px solid #d0d7e2; border-radius: 6px; font-size: 13px;
  outline: none; background: #fff; }
.hist-quick-search-input:focus { border-color: #4a90e2; box-shadow: 0 0 0 2px rgba(74,144,226,.15); }
.hist-quick-search-input:disabled { background: #f5f5f5; color: #aaa; cursor: not-allowed; }

/* ── Counter summary pills ────────────────────────────────────────────────── */
.hist-counters { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 2px 10px; }
.hist-counter-pill { display: flex; flex-direction: column; align-items: center;
                     padding: 8px 16px; border-radius: 10px; min-width: 90px;
                     border: 1px solid transparent; }
.hist-cnt-sys { font-size: 12px; font-weight: 600; color: inherit; opacity: .8; }
.hist-cnt-val { font-size: 13px; font-weight: 700; margin-top: 2px; }
.hist-cnt-ok   { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.hist-cnt-warn { background: #fff8e1; border-color: #ffe082; color: #f57f17; }
.hist-cnt-fail { background: #ffebee; border-color: #ef9a9a; color: #c62828; }