#zdr-oc-bar{ position:fixed; left:12px; bottom:12px; z-index:9999; display:inline-flex; align-items:center; gap:6px; font-size:14px; color:#fff; background:rgba(20,22,27,.65); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:8px 10px; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.25); } #zdr-oc-bar .zdr-oc-icon{ opacity:.9; }
.zdr-filters{ display:flex; gap:8px; align-items:center; margin:10px 0 16px; }
.zdr-quick .button{ margin-left:6px; }
.zdr-kpis{ display:flex; gap:16px; flex-wrap:wrap; margin:10px 0 16px; }
.zdr-card{ background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:12px 16px; min-width:180px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.zdr-kpi{ font-size:24px; font-weight:700; }
.zdr-kpi-label{ color:#6b7280; font-size:12px; }
.zdr-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap:24px; }
.zdr-panel{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; }
#chart-line, #chart-pages, #chart-refs{ width:100%; height:260px; }
@media (prefers-color-scheme: dark){ .zdr-card, .zdr-panel{ background:#111827; border-color:#1f2937; } .zdr-kpi-label{ color:#9ca3af; } }