:root{
  --bg:#F4F6FB;
  --surface:#FFFFFF;
  --surface-2:#F1F3F9;
  --surface-3:#E6E9F2;
  --border-soft:rgba(20,27,56,0.09);
  --text:#0F1535;
  --text-dim:#5F6B8A;
  --text-faint:#98A2B8;
  --gold:#E5A300;
  --green:#0FB57A;
  --green-dim:rgba(15,181,122,0.12);
  --red:#F0435C;
  --red-dim:rgba(240,67,92,0.11);
  --blue:#2F7BF6;
  --blue-dim:rgba(47,123,246,0.11);
  --brand:#4F46E5;
  --brand-2:#7C3AED;
  --brand-dim:rgba(79,70,229,0.10);
  --orange:#F97316;
  --orange-dim:rgba(249,115,22,0.12);
  --teal:#0EA5A4;
  --navy:#0F1535;
  --shadow-sm:0 1px 2px rgba(20,27,56,0.05), 0 2px 8px -2px rgba(20,27,56,0.06);
  --shadow-md:0 2px 4px rgba(20,27,56,0.04), 0 12px 28px -10px rgba(20,27,56,0.16);
  --grad-brand:linear-gradient(135deg,#4F46E5 0%,#7C3AED 100%);
  --grad-green:linear-gradient(135deg,#12C48B 0%,#059669 100%);
  --grad-red:linear-gradient(135deg,#FB6A7E 0%,#E11D48 100%);
  --grad-orange:linear-gradient(135deg,#FDBA4D 0%,#F97316 100%);
  --grad-blue:linear-gradient(135deg,#4AA3FF 0%,#2563EB 100%);
  --grad-navy:linear-gradient(135deg,#0F1535 0%,#252A6B 55%,#4338CA 100%);
}
*{ box-sizing:border-box; }
html{ color-scheme:light; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{
  all:unset;
  box-sizing:border-box;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  font-family:inherit;
}
input, select, textarea{
  font-family:inherit;
  color-scheme:light;
  -webkit-appearance:none;
  appearance:none;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }
a{ color:inherit; }
img{ max-width:100%; }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

.field{
  width:100%; background:var(--surface-2); border:1.5px solid var(--border-soft);
  border-radius:10px; padding:12px 13px; font-size:14.5px; font-weight:600;
  color:var(--text); outline:none;
}
.field:focus{ border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px var(--brand-dim); }
.field{ transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
label.f-label{ font-size:12.5px; font-weight:600; color:var(--text-dim); display:block; margin-bottom:6px; }

.glass{
  background:#FFFFFF;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-sm);
}

.chip{
  display:flex; align-items:center; gap:6px;
  background:#FFFFFF; border:1px solid var(--border-soft);
  border-radius:12px; padding:9px 13px; font-size:13px; font-weight:700;
  color:var(--text); white-space:nowrap; box-shadow:var(--shadow-sm);
  transition:border-color .15s ease, transform .1s ease;
}
.chip:active{ transform:scale(.97); }
.chip svg.ic{ width:15px; height:15px; }
.chip svg.ic-blue{ color:var(--blue); }
.chip svg.ic-violet{ color:var(--brand-2); }
.chip svg.ic-orange{ color:var(--orange); }
.chip svg{ width:14px; height:14px; color:var(--text-faint); flex-shrink:0; }

.pay-pill{
  font-size:11.5px; font-weight:600; padding:3px 9px 3px 8px;
  border-radius:7px; display:inline-flex; align-items:center; gap:5px;
  background:var(--surface-3); color:var(--text-dim);
  border:1px solid var(--border-soft);
}
.pay-dot{ width:6px; height:6px; border-radius:999px; flex-shrink:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 18px; border-radius:12px; font-weight:800; font-size:14px;
  letter-spacing:.1px;
  transition:filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn svg{ flex-shrink:0; }
.btn:active{ transform:scale(.97); }
.btn:hover{ filter:brightness(1.05); }
.btn-primary{ background:var(--grad-brand); color:#fff; box-shadow:0 8px 18px -8px rgba(79,70,229,0.65); }
.btn-green{ background:var(--grad-green); color:#fff; box-shadow:0 8px 18px -8px rgba(5,150,105,0.65); }
.btn-red{ background:var(--grad-red); color:#fff; box-shadow:0 8px 18px -8px rgba(225,29,72,0.6); }
.btn-orange{ background:var(--grad-orange); color:#fff; box-shadow:0 8px 18px -8px rgba(249,115,22,0.6); }
.btn-blue{ background:var(--grad-blue); color:#fff; box-shadow:0 8px 18px -8px rgba(37,99,235,0.6); }
.btn-ghost{ background:#fff; color:var(--text); border:1.5px solid var(--border-soft); box-shadow:var(--shadow-sm); }
.btn-soft-blue{ background:var(--blue-dim); color:var(--blue); border:1.5px solid rgba(47,123,246,0.2); }
.btn-soft-red{ background:var(--red-dim); color:var(--red); border:1.5px solid rgba(240,67,92,0.2); }
.btn-soft-violet{ background:var(--brand-dim); color:var(--brand); border:1.5px solid rgba(79,70,229,0.18); }

.verified-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; color:var(--brand);
  background:var(--brand-dim); border:1px solid rgba(79,70,229,0.2);
  padding:4px 9px; border-radius:7px;
}
.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-pending{ background:rgba(211,163,0,0.12); color:var(--gold); }
.status-completed{ background:var(--green-dim); color:var(--green); }
.status-cancelled{ background:var(--red-dim); color:var(--red); }

.modal-backdrop{
  position:fixed; inset:0; background:rgba(15,21,53,0.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:center;
  z-index:100; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.modal-backdrop.show{ opacity:1; pointer-events:auto; }
.modal-sheet{
  width:100%; max-width:480px;
  background:var(--surface); border:1px solid var(--border-soft);
  border-bottom:none; border-radius:26px 26px 0 0;
  box-shadow:0 -18px 50px -18px rgba(15,21,53,0.35);
  padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%); transition:transform .28s cubic-bezier(.32,.72,0,1);
  max-height:88vh; overflow-y:auto;
}
.modal-backdrop.show .modal-sheet{ transform:translateY(0); }
.sheet-grip{ width:36px;height:4px;background:var(--surface-3);border-radius:99px;margin:0 auto 16px; }
.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:calc(16px + env(safe-area-inset-top,0px)); left:50%;
  transform:translateX(-50%) translateY(-140%);
  z-index:200; 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.2); }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{ text-align:left; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); padding:8px 10px; border-bottom:1.5px solid var(--border-soft); }
td{ padding:9px 10px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:rgba(79,70,229,0.03); }
