.btn{
      border:1px solid var(--border);
      border-radius: 14px;
      padding:10px 12px;
      font-size:13px;
      cursor:pointer;
      box-shadow: var(--shadow-sm);
      display:inline-flex;
      align-items:center;
      gap:8px;
      transition: transform .12s ease, border-color .12s ease, background .12s ease;
      user-select:none;
      min-width: 95px;
    }
    .btn:hover{ transform: translateY(-1px); border-color: rgba(99,91,255,.35); }
    .btn.primary{
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      border-color: rgba(255,255,255,.0);
      color:white;
      box-shadow: 0 12px 24px rgba(99,91,255,.22);
    }
    .btn.primary:hover{ transform: translateY(-1px); }
    .btn:active{ transform: translateY(0px); }

    .btn .dot{
      width:8px; height:8px;
      background: rgba(255,255,255,.85);
      border-radius:50%;
      box-shadow: 0 0 0 3px rgba(255,255,255,.2);
    }

    .badge{
      font-size:11px;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid var(--border);
      background: rgba(99,91,255,.10);
      color: var(--brand);
      display: inline-block;
        }

    .badge a{
      color: var(--brand);
      text-decoration: none;
    }

    .status{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      color:var(--muted);
    }
    .status .s-dot{
      width:9px; height:9px; border-radius:50%;
      background: var(--muted-2);
      box-shadow: 0 0 0 3px rgba(123,133,158,.18);
    }
    .status.ok .s-dot{ background: var(--good); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
    .status.warn .s-dot{ background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,.20); }
    .status.bad .s-dot{ background: var(--bad); box-shadow: 0 0 0 3px rgba(239,68,68,.20); }