:root{
  --bg:#F3F5FB;
  --surface:#FFFFFF;
  --surface-2:#F7F8FC;
  --border:#E6E9F2;
  --text:#131629;
  --text-dim:#6B7290;
  --text-faint:#9BA0BC;
  --primary:#4F46E5;
  --primary-2:#7C3AED;
  --primary-dim:#EEECFE;
  --green:#0EA35C;
  --green-dim:#E6F9EE;
  --red:#E1364A;
  --red-dim:#FCE9EB;
  --amber:#D98A0A;
  --amber-dim:#FDF3E1;
  --blue:#2563EB;
  --sidebar-from:#181B3A;
  --sidebar-to:#312566;
  --radius:16px;
  --shadow:0 1px 2px rgba(20,20,50,0.04), 0 8px 24px -12px rgba(20,20,50,0.10);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); }
body{ font-family:'Inter',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; }
html{ color-scheme:light; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'JetBrains Mono','SF Mono',monospace; font-variant-numeric:tabular-nums; }

button{ all:unset; box-sizing:border-box; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:inherit; }
input,select,textarea{
  font-family:inherit; -webkit-appearance:none; appearance:none;
  background:var(--surface-2); border:1.5px solid var(--border); border-radius:10px;
  padding:11px 13px; font-size:14px; color:var(--text); width:100%; outline:none;
}
input:focus,select:focus,textarea:focus{ border-color:var(--primary); background:var(--surface); }
input::placeholder{ color:var(--text-faint); }

.f-label{ display:block; font-size:12px; font-weight:700; color:var(--text-dim); margin-bottom:6px; letter-spacing:.2px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 18px; border-radius:11px; font-weight:700; font-size:13.5px;
  transition:filter .15s ease, transform .1s ease; white-space:nowrap;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-ghost{ background:var(--surface-2); color:var(--text); border:1.5px solid var(--border); }
.btn-ghost:hover{ background:var(--border); }
.btn-green{ background:var(--green); color:#fff; }
.btn-red{ background:var(--red); color:#fff; }
.small-btn{ padding:7px 13px; font-size:12.5px; border-radius:9px; }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }

.status-pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; text-transform:capitalize; }
.status-success{ background:var(--green-dim); color:var(--green); }
.status-pending{ background:var(--amber-dim); color:var(--amber); }
.status-failed{ background:var(--red-dim); color:var(--red); }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{ text-align:left; font-size:11.5px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; padding:0 12px 10px; border-bottom:1px solid var(--border); }
td{ padding:13px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; }

.modal-backdrop{
  position:fixed; inset:0; background:rgba(15,17,38,0.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  z-index:200; opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.modal-backdrop.show{ opacity:1; pointer-events:auto; }
.modal-sheet{
  width:100%; max-width:440px; background:var(--surface); border-radius:20px;
  padding:24px; max-height:88vh; overflow-y:auto;
  transform:translateY(14px) scale(.98); transition:transform .2s cubic-bezier(.32,.72,0,1);
  box-shadow:0 30px 60px -20px rgba(20,20,50,0.35);
}
.modal-backdrop.show .modal-sheet{ transform:translateY(0) scale(1); }
.modal-close{ width:30px;height:30px;border-radius:999px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--text-dim); }

.toast-wrap{
  position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-140%);
  z-index:400; max-width:min(420px, calc(100% - 32px)); width:100%;
  transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.toast-wrap.show{ transform:translateX(-50%) translateY(0); }

::selection{ background:rgba(79,70,229,0.18); }