.dgui { container-type:inline-size; }
.dgui h1 { overflow-wrap:anywhere; }
.dgui strong { color:inherit; }
.dgui input,.dgui select { margin:0; color:inherit; }
.dgui .dgui-original pre { border:0; color:inherit; }
.dgui-nav { display:flex; gap:8px; margin-bottom:24px; font-size:12px; }
.dgui-nav a,.dgui-nav>span { border:1px solid #dce4d7; border-radius:9px; padding:7px 13px; color:#426144; text-decoration:none; }
.dgui-nav a:hover { background:#e7efdf; }
.dgui-nav>span { background:#e4eddb; border-color:#cdddc0; font-weight:600; }
.dgui .bgui-header>div,.dgui .bgui-stat>div { min-width:0; }
.dgui .bgui-header { margin-bottom:25px; }
.dgui-controls { padding:20px 25px; margin-bottom:28px; }
.dgui-control-row { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.dgui-field { display:flex; flex-direction:column; gap:5px; min-width:0; font-size:12px; }
.dgui-field>span { color:var(--bgui-muted); font-size:11px; }
.dgui-field select,.dgui-field input { width:100%; min-width:0; max-width:100%; border:1px solid #dce4d7; border-radius:9px; background:#fff; padding:8px 10px; min-height:39px; font-size:12px; }
.dgui-control-row .dgui-field { flex:0 1 270px; }
.dgui-period { font-size:11px; color:var(--bgui-muted); margin-left:auto; padding-bottom:9px; }
.dgui .bgui-ranges { align-self:flex-end; }
.dgui .bgui-ranges button { padding:6px 13px; }
.dgui .bgui-section-heading { align-items:baseline; flex-wrap:wrap; gap:6px 15px; margin-bottom:7px; }
.dgui .dgui-explanation { color:var(--bgui-muted); font-size:12px; max-width:900px; margin-bottom:17px; }
.dgui-gateways { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:16px; margin-bottom:30px; }
.dgui-gateway { padding:23px; min-width:0; }
.dgui-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.dgui-card-heading h3 { font-size:15px; font-weight:650; overflow-wrap:anywhere; }
.dgui-version { font-size:11px; color:var(--bgui-muted); margin-top:3px!important; }
.dgui-badge { display:inline-block; border-radius:6px; padding:4px 8px; background:#eff1ed; color:#667360; font-size:10px; font-weight:650; flex-shrink:0; }
.dgui-badge--good { background:#e9f2df; color:#426731; }
.dgui-badge--warning { background:#faf1d8; color:#866520; }
.dgui-badge--error { background:#fff0e9; color:#9c5140; }
.dgui-check-label { font-size:11px; color:var(--bgui-muted); }
.dgui-check-time { display:block; font-size:21px; line-height:1.35; letter-spacing:-.35px; margin:5px 0; font-variant-numeric:tabular-nums; }
.dgui-check-age { display:block; color:#6b796e; font-size:11px; margin-bottom:13px; }
.dgui-check-result { font-size:13px; font-weight:550; }
.dgui .dgui-check-note { color:var(--bgui-muted); font-size:11px; margin-top:5px; }
.dgui-original { margin:13px 0 0; font-size:11px; }
.dgui-original summary { cursor:pointer; color:var(--bgui-muted); }
.dgui-original pre { white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; background:#f7f9f3; border-radius:8px; padding:10px; margin:8px 0 0; }
.dgui-health { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 18px; margin:18px 0 0; border-top:1px solid var(--bgui-line); padding-top:15px; }
.dgui-health>div { min-width:0; }
.dgui-health dt { font-size:10px; color:var(--bgui-muted); }
.dgui-health dd { margin:2px 0 0; font-size:12px; font-weight:550; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.dgui .dgui-health-time { font-size:10px; margin-top:11px; color:var(--bgui-muted); }
.dgui .dgui-gateway-log { font-size:10px; margin-top:15px; padding-top:12px; border-top:1px solid var(--bgui-line); color:var(--bgui-muted); }
.dgui-log-panel { padding:25px; }
.dgui-button { border:1px solid #dce4d7; border-radius:9px; background:#fff; padding:8px 12px; font-size:11px!important; white-space:nowrap; min-height:38px; }
.dgui-button:hover { background:#f0f5e9; }
.dgui-filters { display:grid; grid-template-columns:minmax(130px,.65fr) minmax(150px,.8fr) minmax(220px,1.7fr); gap:12px; margin:21px 0 12px; }
.dgui .dgui-field input { cursor:text; }
.dgui .dgui-log-count { color:var(--bgui-muted); font-size:11px; margin-bottom:12px; }
.dgui-events { list-style:none; padding:0; margin:0; }
.dgui-event { border-top:1px solid #eaf0e3; padding:12px 0; display:grid; grid-template-columns:172px minmax(0,1fr); gap:8px 18px; }
.dgui-event-meta { display:flex; flex-wrap:wrap; align-content:flex-start; align-items:center; gap:5px; min-width:0; font-size:10px; }
.dgui-event-time { display:block; width:100%; font-variant-numeric:tabular-nums; color:#546b50; margin-bottom:2px; }
.dgui-event-gateway { display:block; width:100%; color:var(--bgui-muted); overflow-wrap:anywhere; }
.dgui-level { border-radius:4px; background:#edf1e8; color:#6b796e; padding:2px 5px; font-size:9px; font-weight:650; }
.dgui-level--error { background:#fff0e9; color:#9c5140; }
.dgui-level--warning { background:#faf1d8; color:#866520; }
.dgui-level--info { background:#e6f0e5; color:#4d7546; }
.dgui-event-tag { color:var(--bgui-muted); overflow-wrap:anywhere; }
.dgui .dgui-event-message { font:11px/1.65 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; color:#31472e; }
.dgui-log-empty,.dgui-placeholder { padding:32px 18px; text-align:center; color:var(--bgui-muted); font-size:12px; background:#f8faf5; border-radius:12px; }
.dgui-placeholder { grid-column:1/-1; }
.dgui-untimed { border-top:1px solid var(--bgui-line); margin-top:14px; padding-top:16px; font-size:12px; }
.dgui-untimed>summary { cursor:pointer; font-weight:550; }
.dgui-untimed>p { font-size:11px; color:var(--bgui-muted); margin:10px 0 15px; }
.dgui .dgui-scan { font-size:10px; color:var(--bgui-muted); border-top:1px solid var(--bgui-line); padding-top:13px; margin-top:12px; }
.dgui .bgui-footer { flex-wrap:wrap; }
.dgui .bgui-footer>span:last-child { white-space:normal; }
@container(max-width:760px) {
  .dgui .bgui-header { display:flex; flex-direction:column; align-items:flex-start; gap:15px; }
  .dgui .bgui-sync { position:static; align-self:flex-start; white-space:normal; }
  .dgui .bgui-updated { display:flex; }
  .dgui .bgui-summary { grid-template-columns:1fr; gap:10px; }
  .dgui .bgui-stat { display:flex; padding:16px 18px; }
  .dgui .bgui-stat strong { font-size:25px; }
  .dgui .bgui-stat strong.bgui-stat-time { font-size:25px; line-height:1.3; white-space:normal; }
  .dgui-filters { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .dgui-search { grid-column:1/-1; }
  .dgui-period { flex-basis:100%; margin-left:0; padding:0; }
}
@container(max-width:460px) {
  .dgui-controls,.dgui-log-panel,.dgui-gateway { padding:17px; }
  .dgui .bgui-panel-heading { flex-wrap:wrap; }
  .dgui-card-heading { flex-wrap:wrap; gap:8px; }
  .dgui-event { grid-template-columns:minmax(0,1fr); gap:8px; }
  .dgui-event-meta { gap:5px 8px; }
  .dgui-event-time,.dgui-event-gateway { width:auto; margin:0; }
  .dgui .bgui-history-end { width:100%; }
  .dgui .bgui-history-end input { width:100%; }
  .dgui .bgui-brand { letter-spacing:.9px; font-size:9px; }
  .dgui .bgui-brand-divider { padding:0 3px; }
  .dgui-check-time { font-size:19px; }
}
@media(max-width:520px) {
  .dgui { padding:24px 15px 20px; }
  .dgui .bgui-header { align-items:flex-start; }
}