/* ============================================================
   DESIGN TOKENS
   Shares the storefront's burgundy / terracotta / ivory palette so
   the two applications read as one brand.
   ============================================================ */
:root{
  --primary:#7A263A; --primary-dark:#5A1C2B; --primary-soft:#96334A;
  --primary-tint:#F3E3E6;
  --secondary:#B85C38; --secondary-ink:#A24E2E; --secondary-tint:#F8E9E0;
  --accent:#C49A4A; --accent-ink:#856427; --accent-tint:#F6ECD9;

  --background:#F7F1E7; --surface:#FFFDF8; --surface-2:#F3EBDD;
  --text:#25211D; --text-2:#4A423A; --muted-text:#6E655C;
  --border:#DED4C7; --border-soft:#ECE3D5;

  --ok:#286B46; --ok-tint:#E4F0E8;
  --warn:#8F5F1F; --warn-tint:#FAF0DC;
  --bad:#9B3B33; --bad-tint:#F8E5E3;
  --info:#3C5A78; --info-tint:#E6EDF4;

  --rail-w:250px; --rail-w-collapsed:70px; --top-h:60px;

  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(37,33,29,.05), 0 2px 8px rgba(37,33,29,.04);
  --sh-2:0 4px 14px rgba(37,33,29,.08), 0 12px 30px rgba(37,33,29,.06);
  --sh-3:0 16px 40px rgba(37,33,29,.16);

  --e:cubic-bezier(.22,.9,.28,1);
  --t-fast:.16s var(--e); --t:.26s var(--e);

  --font:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Fraunces",Georgia,serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font); font-size:14px; line-height:1.55;
  color:var(--text); background:var(--background);
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{ overflow:hidden; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.25; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
code{ font-size:.85em; background:var(--surface-2); padding:1px 5px; border-radius:5px; }
:focus-visible{ outline:2.5px solid var(--primary); outline-offset:2px; border-radius:5px; }

.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.muted{ color:var(--muted-text); }
.nowrap{ white-space:nowrap; }
.r{ text-align:right; }
.pos{ color:var(--ok); } .neg{ color:var(--bad); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 16px; border-radius:var(--r-sm); font-weight:600; font-size:.85rem;
  border:1px solid transparent; min-height:40px; white-space:nowrap;
  transition:background var(--t-fast), color var(--t-fast),
             border-color var(--t-fast), transform var(--t-fast);
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-soft); }
.btn-ghost{ background:var(--surface); border-color:var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }
.btn-danger{ background:var(--bad); color:#fff; }
.btn-danger:hover{ filter:brightness(1.08); }
.btn-sm{ padding:7px 12px; font-size:.8rem; min-height:34px; }
.btn[disabled]{ opacity:.55; pointer-events:none; }

.icon-btn{
  width:34px; height:34px; border-radius:var(--r-sm); display:inline-grid;
  place-items:center; color:var(--muted-text); transition:background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover{ background:var(--surface-2); color:var(--primary); }

/* ---------- forms ---------- */
.field{ margin-bottom:12px; }
.field label,.inline span{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted-text); margin-bottom:5px;
}
.req{ color:var(--bad); }
.inp{
  width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); min-height:40px; transition:border-color var(--t-fast);
}
.inp:focus{ outline:none; border-color:var(--primary); }
.inp:disabled{ background:var(--surface-2); color:var(--muted-text); }
textarea.inp{ resize:vertical; min-height:70px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:560px){ .grid-2{ grid-template-columns:1fr; } }
.check{ display:flex; align-items:center; gap:9px; font-size:.86rem; margin:8px 0; cursor:pointer; }
.check input{ width:17px; height:17px; accent-color:var(--primary); }
.inline{ display:flex; flex-direction:column; }

/* ---------- chips ---------- */
.chip{
  display:inline-block; padding:3px 9px; border-radius:var(--r-pill);
  font-size:.7rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}
.chip-ok{ background:var(--ok-tint); color:var(--ok); }
.chip-warn{ background:var(--warn-tint); color:var(--warn); }
.chip-bad{ background:var(--bad-tint); color:var(--bad); }
.chip-info{ background:var(--info-tint); color:var(--info); }
.chip-muted{ background:var(--surface-2); color:var(--muted-text); }

/* ---------- loading ---------- */
.skel{
  display:block; height:12px; border-radius:5px;
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--border-soft) 50%,var(--surface-2) 75%);
  background-size:200% 100%; animation:shim 1.3s infinite;
}
@keyframes shim{ to{ background-position:-200% 0 } }
.loading{ display:grid; place-items:center; padding:60px 0; }
.spin{
  width:26px; height:26px; border-radius:50%;
  border:2.5px solid var(--border); border-top-color:var(--primary);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}