:root {
  --rx-bg: #f6f7fb;
  --rx-surface: #ffffff;
  --rx-text: #0f172a;
  --rx-muted: #64748b;
  --rx-border: #e5e7eb;

  --rx-primary: #2563eb;
  --rx-success: #16a34a;
  --rx-warning: #d97706;
  --rx-danger: #dc2626;
  --rx-info: #0284c7;

  --rx-font-sm: 13px;
  --rx-font-md: 14px;
  --rx-font-lg: 16px;
  --rx-font-xl: 20px;
  --rx-line-tight: 1.25;
  --rx-line-normal: 1.5;

  --rx-r-sm: 8px;
  --rx-r-md: 12px;
  --rx-r-lg: 16px;

  --rx-s-1: 4px;
  --rx-s-2: 8px;
  --rx-s-3: 12px;
  --rx-s-4: 16px;
  --rx-s-5: 20px;
  --rx-s-6: 24px;

  --rx-z-dropdown: 900;
  --rx-z-modal: 1200;
  --rx-z-toast: 1400;
  --rx-z-overlay: 1500;
}

.rx-page { display: flex; flex-direction: column; gap: var(--rx-s-4); }
.rx-pageHeader { display: flex; justify-content: space-between; gap: var(--rx-s-3); align-items: flex-start; }
.rx-actions { display: flex; flex-wrap: wrap; gap: var(--rx-s-2); }
.rx-card { background: var(--rx-surface); border: 1px solid var(--rx-border); border-radius: var(--rx-r-lg); padding: var(--rx-s-4); }

.rx-btn { border: 1px solid var(--rx-border); background: var(--rx-surface); color: var(--rx-text); border-radius: var(--rx-r-md); padding: 10px 12px; font-size: var(--rx-font-md); cursor: pointer; }
.rx-btn.primary { background: var(--rx-primary); color: #fff; border-color: var(--rx-primary); }
.rx-btn.secondary { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.rx-btn.ghost { background: transparent; border-color: transparent; }
.rx-btn.danger { background: #fff1f2; border-color: #fecdd3; color: #b91c1c; }

.rx-input,.rx-select,.rx-textarea { width: 100%; border: 1px solid var(--rx-border); border-radius: var(--rx-r-md); padding: 10px 12px; font-size: var(--rx-font-md); }

.rx-table { width: 100%; border-collapse: collapse; }
.rx-table th,.rx-table td { padding: var(--rx-s-2) var(--rx-s-3); border-bottom: 1px solid var(--rx-border); text-align: left; }
.rx-table tbody tr:hover { background: #f8fafc; }
.rx-tableEmpty { text-align: center; color: var(--rx-muted); padding: var(--rx-s-5); }

.rx-modalBackdrop,
.rx-modal,
.rx-toastHost {
  pointer-events: none;
}

.rx-modalBackdrop { position: fixed; inset: 0; background: rgba(2, 6, 23, .4); z-index: var(--rx-z-overlay); opacity: 0; transition: opacity .15s ease; }
.rx-modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: var(--rx-z-modal); opacity: 0; transition: opacity .15s ease; }
.rx-modalCard { background: #fff; border-radius: var(--rx-r-lg); border: 1px solid var(--rx-border); min-width: min(560px, 92vw); max-width: 92vw; padding: var(--rx-s-4); }

.rx-modal.is-open,
.rx-modalBackdrop.is-open,
.rx-toastHost.is-open { pointer-events: auto; }
.rx-modal.is-open,
.rx-modalBackdrop.is-open { opacity: 1; }

.rx-toastHost { position: fixed; right: var(--rx-s-4); bottom: var(--rx-s-4); z-index: var(--rx-z-toast); display: grid; gap: var(--rx-s-2); }
.rx-toast { background: #0f172a; color: #fff; border-radius: var(--rx-r-md); padding: 10px 12px; min-width: 240px; }
.rx-toast.success { background: var(--rx-success); }
.rx-toast.error { background: var(--rx-danger); }
.rx-toast.info { background: var(--rx-info); }

.rx-badge,.rx-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rx-border); font-size: var(--rx-font-sm); }

.rx-state { border: 1px dashed var(--rx-border); border-radius: var(--rx-r-lg); padding: var(--rx-s-5); text-align: center; color: var(--rx-muted); background: #fff; }
.rx-stateTitle { color: var(--rx-text); font-size: var(--rx-font-lg); font-weight: 700; }

.rx-auth-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rx-s-6);
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  z-index: calc(var(--rx-z-overlay) + 1);
}

.rx-auth-card {
  width: min(440px, 100%);
  background: #fff;
  border: 1px solid var(--rx-border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}

.rx-auth-logo {
  display: flex;
  justify-content: center;
  margin: 6px 0 10px;
}

.rx-auth-title {
  margin: 0;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--rx-text);
}

.rx-auth-subtitle {
  margin: 6px 0 14px;
  text-align: center;
  color: var(--rx-muted);
  font-size: var(--rx-font-md);
}

.rx-auth-input {
  width: 100%;
  border: 1px solid var(--rx-border);
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.35;
}

.rx-auth-btn {
  width: 100%;
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 700;
}