:root{
  --color-primary:#1e40af; /* indigo-800 */
  --color-primary-600:#1d4ed8; /* hover */
  --color-surface:#ffffff;
  --color-muted:#6b7280;
  --radius-card:12px;
  --radius-pill:9999px;
  --btn-sm-h:32px;
  --shadow-1:0 2px 4px rgba(0,0,0,.06);
}

.btn--primary{background:var(--color-primary)!important;border-color:var(--color-primary)!important;color:#fff!important}
.btn--primary:hover{background:var(--color-primary-600)!important;border-color:var(--color-primary-600)!important}

.btn--outline{border-color:var(--color-primary)!important;color:var(--color-primary)!important}
.btn--outline:hover{background:#eef2ff!important}

.section-card{background:var(--color-surface);border:1px solid #e5e7eb;border-radius:var(--radius-card);box-shadow:var(--shadow-1)}

.token-toggle{display:inline-flex;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:var(--radius-pill);overflow:hidden}
.token-toggle .token{background:transparent;border:0;padding:6px 14px;font-size:12px;color:#374151;cursor:pointer}
.token-toggle .token.active{background:var(--color-primary);color:#fff}

/* status pill */
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:9999px;border:1px solid #e5e7eb;background:#f8fafc;font-size:12px}
.dot{width:8px;height:8px;border-radius:9999px}
.dot.running{background:#16a34a}
.dot.starting{background:#2563eb}
.dot.stopping{background:#f59e0b}
.dot.stopped,.dot.idle{background:#9ca3af}

.btn.btn-sm{height:var(--btn-sm-h);display:inline-flex;align-items:center}

