/* 路 · shared components. Class names are prefixed lu- so modules and the shell never collide. */
.lu-card{background:var(--lu-surface);border:1px solid rgba(255,255,255,.65);border-radius:var(--lu-radius);box-shadow:var(--lu-shadow);padding:20px 22px}
.lu-card+.lu-card{margin-top:16px}
.lu-k{font-size:11px;font-weight:650;color:var(--lu-muted);letter-spacing:.02em}
.lu-title{font-size:15px;font-weight:650;color:var(--lu-ink);margin:0}
.lu-muted{color:var(--lu-muted);font-size:12px;line-height:1.6}
.lu-error{color:var(--lu-red);font-size:13px;margin:8px 0 0}
.lu-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lu-spacer{flex:1}

.lu-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 16px;border-radius:var(--lu-radius-sm);
  font:550 13px/1 var(--lu-font);cursor:pointer;border:1px solid var(--lu-line);background:var(--lu-field);color:var(--lu-ink);text-decoration:none;white-space:nowrap}
.lu-btn:hover{background:var(--lu-surface-solid)}
.lu-btn-primary{background:var(--lu-dark-2);border-color:var(--lu-dark-2);color:#fff}
.lu-btn-primary:hover{background:#252e36}
.lu-btn-quiet{border-color:transparent;background:transparent;color:var(--lu-ink-2)}
.lu-btn-danger{color:var(--lu-red)}
.lu-btn:disabled{opacity:.45;cursor:not-allowed}

.lu-input{width:100%;height:36px;border:1px solid var(--lu-line);border-radius:var(--lu-radius-sm);background:var(--lu-field);padding:0 12px;
  font:13px var(--lu-font);color:var(--lu-ink);outline:none}
.lu-input:focus{border-color:var(--lu-dark-2);box-shadow:0 0 0 3px rgba(23,30,36,.08)}

.lu-seg{display:inline-flex;border:1px solid var(--lu-line);border-radius:var(--lu-radius-sm);overflow:hidden;background:var(--lu-field)}
.lu-seg button{height:32px;padding:0 12px;border:0;background:none;font:550 12px var(--lu-font);color:var(--lu-muted);cursor:pointer}
.lu-seg button+button{border-left:1px solid var(--lu-line)}
.lu-seg button.on{background:var(--lu-dark-2);color:#fff}

.lu-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:600;background:var(--lu-hover);color:var(--lu-ink-2)}
.lu-pill.ok{background:var(--lu-green-soft);color:var(--lu-green)}
.lu-pill.warn{background:var(--lu-amber-soft);color:var(--lu-amber)}
.lu-pill.bad{background:var(--lu-red-soft);color:var(--lu-red)}

.lu-table{width:100%;border-collapse:collapse;font-size:13px}
.lu-table th{text-align:left;font-size:11px;font-weight:650;color:var(--lu-muted);padding:10px 12px;border-bottom:1px solid var(--lu-line)}
.lu-table td{padding:11px 12px;border-bottom:1px solid var(--lu-line-soft);vertical-align:middle}
.lu-table tr.lu-click{cursor:pointer}
.lu-table tr.lu-click:hover td{background:var(--lu-hover)}
.lu-table tr.on td{background:rgba(23,30,36,.06)}
.lu-num{font-variant-numeric:tabular-nums;text-align:right}

.lu-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));border-radius:var(--lu-radius-sm);background:var(--lu-field);border:1px solid var(--lu-line)}
.lu-kpis>div{padding:14px 16px}
.lu-kpis>div+div{border-left:1px solid var(--lu-line)}
.lu-kpis b{display:block;margin-top:6px;font-size:20px;font-weight:550;font-variant-numeric:tabular-nums}
.lu-empty{padding:36px 0;text-align:center;color:var(--lu-muted);font-size:13px}

/* Status light: dot + text label (never color alone). ok = green, busy = amber (pulsing), bad = red. */
.lu-light{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--lu-ink-2);white-space:nowrap}
.lu-light i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--lu-faint)}
.lu-light.ok i{background:var(--lu-green)}
.lu-light.busy i{background:var(--lu-amber);animation:lu-pulse 1.2s ease-in-out infinite}
.lu-light.bad i{background:var(--lu-red)}
.lu-light.on-dark{color:var(--lu-on-dark-muted)}
@keyframes lu-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.lu-light.busy i{animation:none}}