:root{
  --mint:#C8E3D2; --lav:#D7CEF0; --peach:#FFD8B8;
  --card:#ffffff; --ink:#0f172a; --muted:#475569; --primary:#17B26A;
  --r:16px; --shadow:0 8px 22px rgba(2,6,23,.08);
  --bg:linear-gradient(145deg,#edf3f0,#ece9f6,#fff0e6);
  --border:rgba(2,6,23,.08);

  /* new */
  --chip-bg:rgba(255,255,255,.85);
  --chip-border:rgba(2,6,23,.10);
  --chip-shadow:0 6px 16px rgba(2,6,23,.08);
  --ok:#16a34a;
  --warn:#f59e0b;
  --err:#ef4444;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 12px 24px; }

/* ===== Header ===== */
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; margin-top:10px;
  background:var(--mint);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  gap:10px;
}
.header .left{ display:flex; align-items:center; gap:12px; }
.header .logo{
  width:40px; height:40px; border-radius:12px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:1000;
  box-shadow:0 8px 18px rgba(2,6,23,.10);
}
.header .title{ font-weight:1000; font-size:18px; line-height:1.05; }
.header .sub{ font-size:12px; color:var(--muted); font-weight:800; margin-top:2px; }

/* ===== Layout helpers ===== */
.row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.card{
  margin-top:12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:14px;
}
.card.peach{ background:var(--peach); }
.card.lav{ background:var(--lav); }
.card.mint{ background:var(--mint); }

/* ===== Buttons ===== */
.btn{
  background:rgba(255,255,255,.92);
  border:1px solid #cbd5e1;
  border-radius:999px;
  padding:7px 14px;
  font-weight:1000;
  cursor:pointer;
  transition:transform .08s ease, background .12s ease, box-shadow .12s ease;
  box-shadow:0 8px 18px rgba(2,6,23,.06);
  user-select:none;
}
.btn:hover{ background:#f1f5f9; }
.btn:active{ transform:scale(.98); }
.btn.primary{
  background:var(--primary);
  color:#fff;
  border:0;
  box-shadow:0 12px 22px rgba(23,178,106,.22);
}
.btn.danger{
  background:var(--err);
  color:#fff;
  border:0;
  box-shadow:0 12px 22px rgba(239,68,68,.20);
}
.btn.ghost{
  background:transparent;
  border:1px dashed rgba(2,6,23,.25);
  box-shadow:none;
}

/* ===== Badges / dots ===== */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.92);
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  font-weight:1000;
  box-shadow:0 8px 18px rgba(2,6,23,.06);
}
.dot{ width:9px; height:9px; border-radius:999px; background:#94a3b8; }
.dot.ok{ background:var(--ok); }
.dot.warn{ background:var(--warn); }
.dot.err{ background:var(--err); }

/* ===== Text ===== */
.small{ font-size:12px; color:var(--muted); font-weight:800; }
.h3{ font-weight:1000; font-size:16px; margin:0 0 8px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* ===== Inputs ===== */
.input, select, textarea{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.92);
  font-weight:900;
  outline:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.input:focus, select:focus, textarea:focus{
  border-color:rgba(23,178,106,.45);
  box-shadow:0 0 0 4px rgba(23,178,106,.12);
}
textarea{ resize:vertical; }

/* ===== Grids ===== */
.grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width:900px){
  .grid2,.grid3{ grid-template-columns:1fr; }
}

/* ===== Table (UPGRADED) ===== */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 26px rgba(2,6,23,.06);
}
.table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(255,255,255,.98);
  backdrop-filter:saturate(140%) blur(6px);
}
.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid rgba(2,6,23,.06);
  text-align:left;
  font-weight:900;
  font-size:13px;
  vertical-align:top;
}
.table th{
  font-size:12px;
  color:#334155;
  letter-spacing:.2px;
}
.table tr:last-child td{ border-bottom:0; }
.table tbody tr:hover td{
  background:rgba(2,6,23,.02);
}

/* ===== Chips (for status / pack / tags) ===== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  box-shadow:var(--chip-shadow);
  font-weight:1000;
  font-size:12px;
  white-space:nowrap;
}
.chip .dot{ width:8px; height:8px; }
.chip.ok{ border-color:rgba(22,163,74,.25); }
.chip.warn{ border-color:rgba(245,158,11,.28); }
.chip.err{ border-color:rgba(239,68,68,.28); }

/* Pack color hints */
.chip.pack-peds{ background:linear-gradient(180deg, rgba(200,227,210,.85), rgba(255,255,255,.92)); }
.chip.pack-gp{ background:linear-gradient(180deg, rgba(215,206,240,.85), rgba(255,255,255,.92)); }
.chip.pack-dental{ background:linear-gradient(180deg, rgba(255,216,184,.85), rgba(255,255,255,.92)); }

/* ===== Key-Value (kept) ===== */
.kv{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.kv .cell{
  background:rgba(255,255,255,.92);
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:10px;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
}
.kv .label{ font-size:12px; color:#64748b; font-weight:1000; margin-bottom:4px; }
.kv .val{ font-weight:1000; word-break:break-all; }
@media (max-width:900px){ .kv{ grid-template-columns:1fr; } }

/* ===== Alerts ===== */
.alert{
  display:none;
  margin-top:10px;
  border-radius:12px;
  padding:10px 12px;
  font-weight:1000;
  background:#dcfce7;
  color:#065f46;
  border:1px solid rgba(22,163,74,.25);
}
.alert.warn{
  background:#fef3c7;
  color:#92400e;
  border:1px solid rgba(245,158,11,.25);
}
.alert.err{
  background:#fee2e2;
  color:#991b1b;
  border:1px solid rgba(239,68,68,.25);
}

/* ===== Footer ===== */
.footer{
  text-align:center;
  padding:14px 6px;
  color:var(--muted);
  font-weight:900;
}

/* ===== Mobile: make tables usable ===== */
@media (max-width:760px){
  .header{ padding:10px 12px; }
  .btn{ padding:8px 14px; }
  .table th, .table td{ padding:10px 8px; }
  /* allow horizontal scroll for wide tables */
  .table{ min-width:860px; }
}