/* KUI2 light-mode shared styles for all demos */
:root{
  --c-bg:#fff; --c-bg-hover:#f2f2f2; --c-text-default:#061116; --c-border-default:#BCC0C3;
  --c-text-muted:#828f96; --c-icon-muted:#919aa1; --c-border-muted:#dfe0e1;
  --c-bg-primary:#006aa5; --c-bg-primary-hover:#0079b5; --c-text-primary:#fff; --c-border-primary:#005b95;
  --c-bg-info:#66c8ff1f; --c-text-info:#1f6a96; --c-border-info:#004d8a3a;
  --c-bg-success:#a0d06b24; --c-text-success:#266402; --c-border-success:#3352003a;
  --c-bg-danger:#FFD0CC66; --c-text-danger:#d24e3e; --c-border-danger:#af2c1f44;
  --c-bg-accent:#ff660021; --c-text-accent:#ca5b0f; --c-border-accent:#e77122;
  --c-bg-secondary:#9e9ea517;
  --c-bg-badge-info:#287aa3; --c-bg-badge-success:#318174; --c-bg-badge-accent:#ca5b0f; --c-bg-badge-muted:#666; --c-bg-badge-danger:#bc4947;
  --c-text-badge-info:#287aa3; --c-text-badge-success:#318174; --c-text-badge-accent:#ca5b0f;
  --shadow-card: inset 0 1px 0 #fff, 0px 1px 4px 0px #9d979228, 0px 1px 1px 0px #9d979228;
  --shadow-input: inset 0 3px 0 #00000005;
  /* status dots use badge solids */
  --dot-attention:#bc4947; --dot-progress:#287aa3; --dot-failed:#ca5b0f; --dot-active:#318174; --dot-paused:#666;
}
*{box-sizing:border-box}
body{font:14px/1.5 -apple-system,system-ui,sans-serif;background:var(--c-bg);color:var(--c-text-default);margin:0}
header{padding:16px 22px 12px;border-bottom:1px solid var(--c-border-muted)}
header h1{font-size:16px;margin:0 0 4px;font-weight:600}
.note{color:var(--c-text-muted);font-size:13px;max-width:980px}
.note b{color:var(--c-text-default)}
kbd{font-family:ui-monospace,monospace;font-size:11px;background:var(--c-bg-secondary);border:1px solid var(--c-border-muted);border-radius:4px;padding:1px 5px}

.row{display:flex;align-items:center;gap:14px;width:100%;padding:11px 14px;border:1px solid var(--c-border-muted);border-radius:10px;background:var(--c-bg);box-shadow:var(--shadow-card);margin:7px 0;cursor:pointer;text-align:left}
.row:hover{background:var(--c-bg-hover);border-color:var(--c-border-default)}
.row .name{font-weight:600;font-size:14px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta{color:var(--c-text-muted);font-size:12.5px;margin-top:2px}

.badge{font-size:11.5px;font-weight:600;border-radius:6px;padding:3px 8px;white-space:nowrap;border:1px solid}
.badge.info{background:var(--c-bg-info);color:var(--c-text-info);border-color:var(--c-border-info)}
.badge.success{background:var(--c-bg-success);color:var(--c-text-success);border-color:var(--c-border-success)}
.badge.danger{background:var(--c-bg-danger);color:var(--c-text-danger);border-color:var(--c-border-danger)}
.badge.accent{background:var(--c-bg-accent);color:var(--c-text-accent);border-color:var(--c-border-accent)}
.badge.muted{background:var(--c-bg-secondary);color:var(--c-text-muted);border-color:var(--c-border-muted)}

.grouphead{position:sticky;top:0;background:var(--c-bg);padding:10px 0 8px;display:flex;align-items:center;gap:9px;z-index:2;border-bottom:1px solid var(--c-border-muted);font-weight:600;font-size:14px}
.grouphead .dot{width:9px;height:9px;border-radius:50%}
.grouphead .c{color:var(--c-text-muted);font-weight:400;font-size:12.5px;margin-left:4px}

.chip{font-size:12.5px;border:1px solid var(--c-border-muted);background:var(--c-bg);color:var(--c-text-muted);border-radius:999px;padding:5px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip .dot{width:7px;height:7px;border-radius:50%}
.chip .c{font-size:11px;opacity:.7}
.chip.active{border-color:var(--c-bg-primary);color:var(--c-text-default);background:#006aa50f;font-weight:600}

.morebar{display:flex;justify-content:center;padding:10px 0;gap:8px}
.morebtn{font-size:13px;border:1px solid var(--c-border-default);background:var(--c-bg);color:var(--c-text-default);border-radius:8px;padding:8px 18px;cursor:pointer;box-shadow:var(--shadow-card)}
.morebtn:hover{background:var(--c-bg-hover)}
.morebtn.primary{background:var(--c-bg-primary);color:var(--c-text-primary);border-color:var(--c-border-primary)}
.morebtn.primary:hover{background:var(--c-bg-primary-hover)}
.endbar,.end,.loader{text-align:center;color:var(--c-text-muted);font-size:12px;padding:12px 0}
.empty{text-align:center;color:var(--c-text-muted);font-size:13px;padding:40px 0}