/* =====================================================
   YOOLAZ 2.0 — Design System
   /yoolaz.com/assets/css/global.css
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&display=swap');

/* ─── TOKENS ─── */
:root {
  /* Brand */
  --p:        #7C3AED;
  --p-h:      #6D28D9;
  --p-l:      #EDE9FE;
  --p-2:      #A78BFA;
  --p-3:      #DDD6FE;

  /* Semantic */
  --green:    #16A34A;
  --green-l:  #DCFCE7;
  --red:      #DC2626;
  --red-l:    #FEE2E2;
  --amber:    #D97706;
  --amber-l:  #FEF3C7;
  --blue:     #2563EB;
  --blue-l:   #DBEAFE;
  --cyan:     #0891B2;
  --cyan-l:   #E0F2FE;

  /* Neutrals */
  --bg:       #FFFFFF;
  --bg-1:     #F9FAFB;
  --bg-2:     #F3F4F6;
  --bg-3:     #E5E7EB;
  --surface:  #FFFFFF;

  /* Text */
  --t:        #0A0A0A;
  --t-2:      #374151;
  --t-3:      #6B7280;
  --t-4:      #9CA3AF;
  --t-5:      #D1D5DB;

  /* Border */
  --b:        #E5E7EB;
  --b-2:      #D1D5DB;

  /* Shadow */
  --s-xs:     0 1px 2px rgba(0,0,0,.06);
  --s-sm:     0 1px 4px rgba(0,0,0,.08);
  --s:        0 4px 12px rgba(0,0,0,.08);
  --s-md:     0 8px 24px rgba(0,0,0,.09);
  --s-lg:     0 16px 40px rgba(0,0,0,.10);
  --s-xl:     0 24px 60px rgba(0,0,0,.12);
  --s-p:      0 8px 24px rgba(124,58,237,.28);
  --s-p-lg:   0 16px 40px rgba(124,58,237,.34);

  /* Typography */
  --f-display: 'Geist', -apple-system, sans-serif;
  --f-body:    'Inter', -apple-system, sans-serif;

  /* Layout */
  --nav-h:      64px;
  --header-h:   60px;
  --st:         env(safe-area-inset-top,    0px);
  --sb:         env(safe-area-inset-bottom, 0px);
  --sl:         env(safe-area-inset-left,   0px);
  --sr:         env(safe-area-inset-right,  0px);

  /* Radius */
  --r-2:  2px;
  --r-4:  4px;
  --r-6:  6px;
  --r-8:  8px;
  --r:    10px;
  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --r-24: 24px;
  --r-f:  9999px;

  /* Motion */
  --ease:       cubic-bezier(.4,0,.2,1);
  --ease-out:   cubic-bezier(0,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur:        180ms;
}

/* ─── RESET ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--t);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg, canvas { display: block; max-width: 100%; }
a { color: var(--p); text-decoration: none; }
a:hover { color: var(--p-h); }
button, input, select, textarea { font: inherit; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--t);
  letter-spacing: -.02em;
}

/* ─── TYPOGRAPHY ─── */
.display-1 { font-family:var(--f-display); font-size:clamp(2.5rem,6vw,4rem);   font-weight:900; letter-spacing:-.04em; line-height:1.05; }
.display-2 { font-family:var(--f-display); font-size:clamp(2rem,4.5vw,3rem);   font-weight:800; letter-spacing:-.03em; line-height:1.1;  }
.display-3 { font-family:var(--f-display); font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700; letter-spacing:-.025em;line-height:1.15; }
.title-1   { font-family:var(--f-display); font-size:1.5rem;  font-weight:700; letter-spacing:-.02em; }
.title-2   { font-family:var(--f-display); font-size:1.25rem; font-weight:700; letter-spacing:-.02em; }
.title-3   { font-family:var(--f-display); font-size:1.1rem;  font-weight:600; letter-spacing:-.015em;}
.label     { font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--t-3); }
.body-sm   { font-size:.875rem;  line-height:1.6; }
.body-xs   { font-size:.8125rem; line-height:1.5; }
.mono      { font-family:'SF Mono','Fira Code',monospace; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 20px;
  height: 44px;
  border-radius: var(--r-f);
  font-family: var(--f-display);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  border: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.btn::after {
  content:'';
  position:absolute;
  inset:0;
  background:transparent;
  transition:background var(--dur) var(--ease);
}
.btn:hover::after  { background:rgba(0,0,0,.06); }
.btn:active        { transform:scale(.97); }
.btn:disabled      { opacity:.45; cursor:not-allowed; transform:none !important; }
.btn:disabled::after { display:none; }

.btn-primary {
  background: var(--p);
  color: #fff;
  box-shadow: var(--s-p);
}
.btn-primary:hover { background: var(--p-h); color:#fff; transform:translateY(-1px); box-shadow:var(--s-p-lg); }

.btn-secondary {
  background: var(--bg-2);
  color: var(--t);
  border: 1px solid var(--b);
}
.btn-secondary:hover { background:var(--bg-1); color:var(--t); border-color:var(--b-2); transform:translateY(-1px); box-shadow:var(--s-sm); }

.btn-outline {
  background: transparent;
  color: var(--p);
  border: 1.5px solid var(--p);
}
.btn-outline:hover { background:var(--p-l); color:var(--p); transform:translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--t-2);
  border: none;
}
.btn-ghost:hover { background:var(--bg-2); color:var(--t); }
.btn-ghost::after { display:none; }

.btn-danger  { background:var(--red);   color:#fff; box-shadow:0 6px 16px rgba(220,38,38,.25); }
.btn-danger:hover  { background:#B91C1C; color:#fff; transform:translateY(-1px); }
.btn-success { background:var(--green); color:#fff; box-shadow:0 6px 16px rgba(22,163,74,.25);  }
.btn-success:hover { background:#15803D; color:#fff; transform:translateY(-1px); }

/* sizes */
.btn-xs  { height:30px; padding:0 12px; font-size:.8125rem; border-radius:var(--r-f); }
.btn-sm  { height:36px; padding:0 14px; font-size:.875rem;  border-radius:var(--r-f); }
.btn-md  { height:44px; padding:0 20px; font-size:.9375rem; }
.btn-lg  { height:52px; padding:0 28px; font-size:1rem;     }
.btn-xl  { height:60px; padding:0 36px; font-size:1.0625rem;}
.btn-full{ width:100%; }
.btn-sq  { padding:0; width:44px; }
.btn-sq.btn-sm { width:36px; }
.btn-sq.btn-lg { width:52px; }

/* icon btn */
.btn-icon {
  width:40px; height:40px; padding:0;
  border-radius:var(--r-8);
  background:var(--bg-2);
  border:1px solid var(--b);
  color:var(--t-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all var(--dur) var(--ease);
  cursor:pointer;
  text-decoration:none;
}
.btn-icon:hover { background:var(--p-l); color:var(--p); border-color:var(--p); }
.btn-icon svg, .btn-icon i { width:18px; height:18px; flex-shrink:0; }

/* ─── FORMS ─── */
.field { margin-bottom: 18px; }

.field-label {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--t-2);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.field-label .req { color:var(--red); margin-left:2px; }

.field-input-wrap { position: relative; }

.field-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t-4);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.field-input-icon svg, .field-input-icon i { width:18px; height:18px; }

.field-input-right {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t-4);
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--r-4);
  transition: color var(--dur) var(--ease);
}
.field-input-right:hover { color: var(--t); }

input.field-ctrl,
select.field-ctrl,
textarea.field-ctrl {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--bg-1);
  border: 1.5px solid var(--b);
  border-radius: var(--r-8);
  color: var(--t);
  font-family: var(--f-body);
  font-size: .9375rem;
  transition: all var(--dur) var(--ease);
  outline: none;
  -webkit-appearance: none;
}
input.field-ctrl::placeholder,
textarea.field-ctrl::placeholder { color: var(--t-5); }
input.field-ctrl:hover,
select.field-ctrl:hover { border-color: var(--b-2); background: var(--bg); }
input.field-ctrl:focus,
select.field-ctrl:focus,
textarea.field-ctrl:focus {
  border-color: var(--p);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
input.field-ctrl.has-icon { padding-left: 44px; }
input.field-ctrl.is-error { border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.1); }
input.field-ctrl.is-ok    { border-color:var(--green); box-shadow:0 0 0 3px rgba(22,163,74,.1); }
input.field-ctrl:disabled  { opacity:.55; cursor:not-allowed; background:var(--bg-2); }

textarea.field-ctrl { height:auto; min-height:110px; padding:12px 14px; resize:vertical; line-height:1.6; }

select.field-ctrl {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.field-error {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8125rem;
  color: var(--red);
  margin-top: 5px;
}
.field-hint {
  font-size: .8125rem;
  color: var(--t-4);
  margin-top: 5px;
  line-height: 1.5;
}

/* checkbox / radio */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.check-input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--p);
  cursor: pointer;
  border-radius: 4px;
}
.check-label { font-size: .9rem; color: var(--t-2); line-height: 1.5; }

/* ─── CARDS ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--b);
  border-radius: var(--r-16);
  box-shadow: var(--s-xs);
  overflow: hidden;
}
.card-sm { border-radius: var(--r-12); }
.card-lg { border-radius: var(--r-20); }

.card-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--b);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-title {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.card-body   { padding: 20px; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--b); background: var(--bg-1); }

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all var(--dur) var(--ease);
}
.card-link:hover { transform: translateY(-2px); box-shadow: var(--s-md); }

/* stat card */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--b);
  border-radius: var(--r-12);
  padding: 18px;
  transition: all var(--dur) var(--ease);
}
.stat-card:hover { border-color: var(--p); box-shadow: var(--s); }
.stat-val {
  font-family: var(--f-display);
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 5px;
}
.stat-label { font-size: .875rem; color: var(--t-3); }
.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .8125rem;
  font-weight: 600;
  margin-top: 4px;
}
.stat-delta.up   { color: var(--green); }
.stat-delta.down { color: var(--red); }

/* ─── BADGE ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-f);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.badge-p       { background:var(--p-l);     color:var(--p);   border:1px solid var(--p-3); }
.badge-green   { background:var(--green-l); color:#15803D;    border:1px solid #BBF7D0; }
.badge-red     { background:var(--red-l);   color:#B91C1C;    border:1px solid #FECACA; }
.badge-amber   { background:var(--amber-l); color:#92400E;    border:1px solid #FDE68A; }
.badge-blue    { background:var(--blue-l);  color:#1D4ED8;    border:1px solid #BFDBFE; }
.badge-cyan    { background:var(--cyan-l);  color:#0E7490;    border:1px solid #A5F3FC; }
.badge-gray    { background:var(--bg-2);    color:var(--t-2); border:1px solid var(--b); }
.badge-dot::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* order status badges */
.s-pending     { background:#FFFBEB; color:#92400E; border:1px solid #FDE68A; }
.s-offered     { background:var(--cyan-l);  color:#0E7490;   border:1px solid #A5F3FC; }
.s-accepted    { background:var(--blue-l);  color:#1D4ED8;   border:1px solid #BFDBFE; }
.s-going       { background:#FFF7ED; color:#9A3412;          border:1px solid #FED7AA; }
.s-arrived     { background:#F0FDFA; color:#0F766E;          border:1px solid #99F6E4; }
.s-inprogress  { background:var(--p-l);    color:var(--p);   border:1px solid var(--p-3); }
.s-completed   { background:var(--green-l);color:#15803D;    border:1px solid #BBF7D0; }
.s-cancelled   { background:var(--red-l);  color:#B91C1C;    border:1px solid #FECACA; }

/* ─── ALERTS ─── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-8);
  font-size: .9rem;
  line-height: 1.5;
  border: 1px solid;
}
.alert svg, .alert i { flex-shrink:0; margin-top:1px; width:18px; height:18px; }
.alert-success { background:var(--green-l); border-color:#BBF7D0; color:#14532D; }
.alert-error   { background:var(--red-l);   border-color:#FECACA; color:#7F1D1D; }
.alert-warning { background:var(--amber-l); border-color:#FDE68A; color:#78350F; }
.alert-info    { background:var(--blue-l);  border-color:#BFDBFE; color:#1E3A8A; }
.alert-p       { background:var(--p-l);     border-color:var(--p-3); color:#4C1D95; }

/* ─── MODAL ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 900;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width:640px) {
  .modal-overlay { align-items: center; }
  .modal-sheet { border-radius: var(--r-20) !important; max-height: 88vh; overflow-y: auto; }
}
.modal-overlay.open { display:flex; animation: fade-in 200ms var(--ease) both; }
.modal-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--b);
  border-radius: var(--r-24) var(--r-24) 0 0;
  border-bottom: none;
  padding-bottom: calc(var(--nav-h) + var(--sb) + 16px);
  box-shadow: var(--s-xl);
  animation: slide-up 300ms var(--ease-spring) both;
}
.modal-drag {
  width: 36px; height: 4px;
  background: var(--bg-3);
  border-radius: var(--r-f);
  margin: 12px auto 2px;
}
.modal-head {
  padding: 12px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--b);
}
.modal-title {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-2);
  color: var(--t-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.modal-close:hover { background:var(--bg-3); color:var(--t); }
.modal-body { padding: 16px 20px; }

/* ─── TOAST ─── */
.toast-wrap {
  position: fixed;
  top: calc(var(--header-h) + var(--st) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: calc(100% - 32px);
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--t);
  color: #fff;
  border-radius: var(--r-8);
  font-size: .9rem;
  font-weight: 500;
  box-shadow: var(--s-lg);
  pointer-events: all;
  animation: toast-in 300ms var(--ease-spring) both;
}
.toast.out { animation: toast-out 200ms var(--ease) both; }
.toast svg, .toast i { flex-shrink:0; width:18px; height:18px; }
.toast-success { background: #14532D; }
.toast-error   { background: #7F1D1D; }
.toast-warning { background: #78350F; }
.toast-info    { background: #1E3A8A; }
.toast-p       { background: var(--p-h); }
.toast-close   { margin-left:auto; opacity:.7; cursor:pointer; flex-shrink:0; }

/* ─── HEADER (app) ─── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: calc(var(--header-h) + var(--st));
  padding-top: var(--st);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--b);
}
.app-header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
}
.app-logo {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--p);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-logo:hover { color: var(--p-h); }

.app-back {
  width: 38px; height: 38px;
  border-radius: var(--r-8);
  background: var(--bg-2);
  border: 1px solid var(--b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-2);
  text-decoration: none;
  flex-shrink: 0;
  transition: all var(--dur) var(--ease);
}
.app-back:hover { background: var(--p-l); color: var(--p); border-color: var(--p); }

.app-header-title {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-notif-btn {
  position: relative;
}
.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--bg);
}
.notif-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  border-radius: var(--r-f);
  background: var(--red);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--bg);
}

/* ─── BOTTOM NAV ─── */
.page,
.panel,
.panel-wrap,
.page-content,
.content,
main {
  padding-bottom: calc(var(--nav-h) + var(--sb) + 24px) !important;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-h) + var(--sb));
  padding-bottom: var(--sb);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--b);
  display: flex;
  align-items: flex-start;
  z-index: 400;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--nav-h);
  color: var(--t-4);
  text-decoration: none;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: color var(--dur) var(--ease);
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.nav-item svg, .nav-item i { width:22px; height:22px; transition: transform var(--dur) var(--ease-spring); }
.nav-item:hover   { color: var(--p); }
.nav-item:hover svg, .nav-item:hover i { transform: scale(1.08); }
.nav-item.active  { color: var(--p); }
.nav-item.active::before {
  content: '';
  position: absolute;
  top: 7px;
  width: 24px;
  height: 3px;
  background: var(--p);
  border-radius: var(--r-f);
}

/* ─── TABLE ─── */
.tbl-wrap { overflow-x:auto; border-radius:var(--r-12); border:1px solid var(--b); }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
thead { background:var(--bg-1); border-bottom:1px solid var(--b); }
thead th { padding:11px 16px; text-align:left; font-size:.75rem; font-weight:600; color:var(--t-3); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--b); transition:background var(--dur) var(--ease); }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--bg-1); }
tbody td { padding:13px 16px; color:var(--t-2); vertical-align:middle; }

/* ─── PROGRESS ─── */
.progress { height:6px; background:var(--bg-2); border-radius:var(--r-f); overflow:hidden; }
.progress-bar { height:100%; background:var(--p); border-radius:var(--r-f); transition:width .5s var(--ease); }
.progress-bar.green  { background:var(--green); }
.progress-bar.red    { background:var(--red);   }
.progress-bar.amber  { background:var(--amber); }

/* ─── TOGGLE ─── */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.toggle-track {
  width: 44px; height: 24px;
  border-radius: var(--r-f);
  background: var(--bg-3);
  border: 1.5px solid var(--b-2);
  position: relative;
  transition: all 250ms var(--ease);
  flex-shrink: 0;
}
.toggle-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 1px; left: 1px;
  transition: transform 250ms var(--ease-spring);
  box-shadow: var(--s-xs);
}
.toggle.on .toggle-track { background: var(--p); border-color: var(--p); }
.toggle.on .toggle-thumb { transform: translateX(20px); }
.toggle-label { font-size: .9375rem; font-weight: 500; color: var(--t-2); }
.toggle.on .toggle-label { color: var(--p); font-weight: 600; }

/* ─── AVATAR ─── */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--p-l);
  color: var(--p);
  font-family: var(--f-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-sm  { width:32px;  height:32px;  font-size:.875rem; }
.avatar-md  { width:40px;  height:40px;  font-size:1rem;    }
.avatar-lg  { width:52px;  height:52px;  font-size:1.125rem;}
.avatar-xl  { width:72px;  height:72px;  font-size:1.5rem;  }
.avatar-2xl { width:96px;  height:96px;  font-size:2rem;    }
.avatar-p   { background:linear-gradient(135deg,var(--p),var(--p-2)); color:#fff; }

/* ─── DIVIDER ─── */
.divider { height:1px; background:var(--b); margin:16px 0; }
.divider-or {
  display:flex; align-items:center; gap:12px;
  color:var(--t-4); font-size:.875rem; margin:20px 0;
}
.divider-or::before, .divider-or::after { content:''; flex:1; height:1px; background:var(--b); }

/* ─── SKELETON ─── */
.skel {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-1) 50%, var(--bg-2) 75%);
  background-size: 200% auto;
  border-radius: var(--r-8);
  animation: shimmer 1.4s linear infinite;
}

/* ─── SPINNER ─── */
.spinner {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid var(--bg-2);
  border-top-color: var(--p);
  animation: spin .7s linear infinite;
}
.spinner-sm  { width:20px; height:20px; border-width:2px; }
.spinner-lg  { width:60px; height:60px; border-width:4px; }

/* ─── LOADER OVERLAY ─── */
.loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 800;
}
.loader-overlay.open { display:flex; }

/* ─── EMPTY STATE ─── */
.empty {
  text-align: center;
  padding: 56px 24px;
}
.empty-icon {
  width: 64px; height: 64px;
  border-radius: var(--r-16);
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--t-4);
}
.empty-icon svg, .empty-icon i { width:28px; height:28px; }
.empty-title { font-family:var(--f-display); font-size:1.0625rem; font-weight:700; letter-spacing:-.02em; margin-bottom:6px; }
.empty-desc  { font-size:.9rem; color:var(--t-3); line-height:1.6; margin-bottom:20px; max-width:300px; margin-left:auto; margin-right:auto; }

/* ─── UTILITY ─── */
.container    { max-width:1200px; margin:0 auto; padding:0 16px; }
.container-sm { max-width:640px;  margin:0 auto; padding:0 16px; }
.container-md { max-width:768px;  margin:0 auto; padding:0 16px; }

/* flex */
.flex    { display:flex; }
.flex-c  { display:flex; flex-direction:column; }
.items-c { align-items:center; }
.items-s { align-items:flex-start; }
.items-e { align-items:flex-end; }
.justify-c  { justify-content:center; }
.justify-sb { justify-content:space-between; }
.justify-e  { justify-content:flex-end; }
.flex-wrap  { flex-wrap:wrap; }
.flex-1     { flex:1; min-width:0; }
.flex-s0    { flex-shrink:0; }

/* grid */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:480px){ .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }

/* spacing */
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}
.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}
.px-4{padding-left:16px;padding-right:16px}
.py-3{padding-top:12px;padding-bottom:12px}
.py-4{padding-top:16px;padding-bottom:16px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}

/* text */
.text-c{text-align:center}.text-r{text-align:right}
.fw-5{font-weight:500}.fw-6{font-weight:600}.fw-7{font-weight:700}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* color */
.c-p{color:var(--p)}.c-green{color:var(--green)}.c-red{color:var(--red)}
.c-amber{color:var(--amber)}.c-3{color:var(--t-3)}.c-4{color:var(--t-4)}

/* misc */
.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100dvh}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.inset-0{inset:0}
.overflow-h{overflow:hidden}.overflow-a{overflow:auto}
.overflow-x{overflow-x:auto;scrollbar-width:none}
.overflow-x::-webkit-scrollbar{display:none}
.rounded{border-radius:var(--r)}.rounded-f{border-radius:var(--r-f)}
.border{border:1px solid var(--b)}.border-2{border:1px solid var(--b-2)}
.shadow{box-shadow:var(--s)}.shadow-md{box-shadow:var(--s-md)}
.bg-1{background:var(--bg-1)}.bg-2{background:var(--bg-2)}
.cursor-p{cursor:pointer}.select-n{user-select:none}.pe-n{pointer-events:none}
.z-10{z-index:10}.z-50{z-index:50}.z-100{z-index:100}

/* scrollbar */
@media(min-width:768px){
  ::-webkit-scrollbar{width:5px;height:5px}
  ::-webkit-scrollbar-track{background:var(--bg-1)}
  ::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:3px}
  ::-webkit-scrollbar-thumb:hover{background:var(--b-2)}
}

/* ─── KEYFRAMES ─── */
@keyframes spin          { to{transform:rotate(360deg)} }
@keyframes fade-in       { from{opacity:0} to{opacity:1} }
@keyframes slide-up      { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes scale-in      { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} }
@keyframes fade-up       { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-down     { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes toast-in      { from{opacity:0;transform:translateY(-10px) scale(.95)} to{opacity:1;transform:none} }
@keyframes toast-out     { to{opacity:0;transform:scale(.9)} }
@keyframes shimmer       { to{background-position:-200% center} }
@keyframes pulse-ring    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.88)} }
@keyframes bounce-in     { 0%{opacity:0;transform:scale(.7)} 60%{transform:scale(1.05)} 100%{opacity:1;transform:scale(1)} }

/* animation helpers */
.anim-fade-up    { animation:fade-up   350ms var(--ease) both; }
.anim-scale-in   { animation:scale-in  250ms var(--ease) both; }
.anim-fade-in    { animation:fade-in   200ms var(--ease) both; }
.anim-pulse      { animation:pulse-ring 2s ease infinite; }
.anim-spin       { animation:spin .7s linear infinite; }
.d-1{animation-delay:.05s}.d-2{animation-delay:.1s}.d-3{animation-delay:.15s}
.d-4{animation-delay:.2s}.d-5{animation-delay:.25s}.d-6{animation-delay:.3s}

/* ─── RESPONSIVE HELPERS ─── */
@media(max-width:639px) { .hide-xs{display:none!important} }
@media(min-width:640px) { .show-xs-only{display:none!important} }
@media(max-width:767px) { .hide-sm{display:none!important} }
@media(min-width:768px) { .show-sm-only{display:none!important} }