.cmp-picker { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:14px 16px; background:var(--bg-2); border:1px solid var(--border); border-radius:8px; margin-bottom:16px; }
.cmp-picker label { font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.cmp-picker select { background:var(--bg-1); border:1px solid var(--border); color:var(--text-1); padding:6px 10px; border-radius:6px; font-size:12px; }
.cmp-picker button { background:var(--accent); color:#fff; border:none; padding:7px 18px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; transition:background .15s; }
.cmp-picker button:hover { background:var(--accent-hover, #1a6fe6); }

.cmp-levels { display:flex; gap:16px; margin-bottom:16px; }
.cmp-lvl { flex:1; background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:16px; text-align:center; }
.cmp-lvl-date { font-size:11px; color:var(--text-3); }
.cmp-lvl-val { font-size:28px; font-weight:800; margin:6px 0 2px; }
.cmp-lvl-cti { font-size:12px; color:var(--text-2); }
.cmp-arrow { display:flex; align-items:center; font-size:22px; color:var(--text-3); padding:0 4px; }

.cmp-summary { background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:16px; }
.cmp-summary p { font-size:13px; line-height:1.5; color:var(--text-1); margin:2px 0; }

.cmp-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:700; margin-right:4px; }
.cmp-badge-new { background:rgba(239,68,68,.15); color:var(--red); }
.cmp-badge-resolved { background:rgba(34,197,94,.15); color:var(--green); }
.cmp-badge-escalated { background:rgba(249,115,22,.15); color:var(--orange); }
.cmp-badge-deescalated { background:rgba(59,130,246,.15); color:var(--accent); }

.cmp-section { background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:12px 16px; margin-bottom:10px; }
.cmp-section.s-new { border-left:3px solid var(--red); }
.cmp-section.s-resolved { border-left:3px solid var(--green); }
.cmp-section.s-escalated { border-left:3px solid var(--orange); }
.cmp-section.s-deescalated { border-left:3px solid var(--accent); }
.cmp-section.s-unchanged { border-left:3px solid var(--border); }
.cmp-section h2 { font-size:13px; font-weight:700; margin:0 0 8px; color:var(--text-0); }

.cmp-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.cmp-tbl th { text-align:left; padding:5px 8px; font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.3px; border-bottom:1px solid var(--border); }
.cmp-tbl td { padding:6px 8px; border-top:1px solid var(--border-subtle); color:var(--text-1); }
.cmp-tbl tr:first-child td { border-top:none; }

.cmp-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; vertical-align:middle; }
.cmp-dot.d-GREEN { background:var(--green); }
.cmp-dot.d-YELLOW { background:var(--yellow, #eab308); }
.cmp-dot.d-ORANGE { background:var(--orange); }
.cmp-dot.d-RED { background:var(--red); }

.lvl-GREEN { color:var(--green); }
.lvl-YELLOW { color:var(--yellow, #eab308); }
.lvl-ORANGE { color:var(--orange); }
.lvl-RED { color:var(--red); }

.cmp-nav-links { font-size:12px; color:var(--text-2); margin-bottom:10px; }
.cmp-nav-links a { color:var(--accent); text-decoration:none; }
.cmp-nav-links a:hover { text-decoration:underline; }
.cmp-empty { color:var(--text-3); font-size:13px; font-style:italic; padding:8px 0; }

@media (max-width:600px) {
  .cmp-levels { flex-direction:column; }
  .cmp-arrow { transform:rotate(90deg); justify-content:center; }
  .cmp-picker { flex-direction:column; align-items:stretch; }
  .cmp-tbl { font-size:11px; }
  .cmp-tbl th, .cmp-tbl td { padding:4px 4px; }
}