:root {
  --ink: #14201d;
  --ink-soft: #22322d;
  --sage: #3e5b4f;
  --sage-dark: #2c443a;
  --sage-tint: #eaf0ec;
  --paper: #f3f0e8;
  --surface: #ffffff;
  --line: #ded8c8;
  --line-soft: #eae5d7;
  --text-secondary: #5f5e57;
  --text-muted: #8c8a7c;
  --danger: #b5502c;
  --danger-tint: #f7e9e3;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(20, 32, 29, 0.05), 0 1px 1px rgba(20, 32, 29, 0.03);
  --shadow-raised: 0 4px 16px rgba(20, 32, 29, 0.08), 0 1px 3px rgba(20, 32, 29, 0.06);
  --app-font: 'Inter', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --app-heading-font: 'Inter', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
button, .product-tile, .category-header, .patient-list li, .timing-pill-toggle, .tabs button { touch-action: manipulation; }

body {
  margin: 0;
  font-family: var(--app-font);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- HEADER ---------- */
header.topbar {
  background: var(--ink);
  color: white;
  padding: 16px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header.topbar h1 {
  font-size: 17px;
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.1px;
  display: flex;
  align-items: center;
  gap: 10px;
}
header.topbar h1 i { font-size: 18px; color: #9db8a9; }
header.topbar button {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid rgba(255,255,255,0.22); color: white;
  padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px;
  font-family: inherit; font-weight: 500; transition: background 0.15s, border-color 0.15s;
}
header.topbar button:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.35); }

.wrap { max-width: 1400px; margin: 0 auto; padding: 36px 24px 60px; }

/* ---------- CARDS ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-card);
}

h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--sage-dark); margin: 0 0 18px; font-weight: 700; font-family: var(--app-heading-font);
  display: flex; align-items: center; gap: 8px;
}
h2 i { font-size: 15px; }

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; color: var(--ink-soft); }
label:first-child { margin-top: 0; }

input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; background: var(--paper); color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--sage); background: white;
  box-shadow: 0 0 0 3px var(--sage-tint);
}
textarea { resize: vertical; min-height: 64px; }

/* ---------- BUTTONS ---------- */
button { font-family: inherit; }
button.primary, button.secondary, button.link {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; font-weight: 600; transition: all 0.15s;
}
button.primary {
  background: var(--sage); color: white; border: none; padding: 11px 20px;
  border-radius: var(--radius-sm); font-size: 14px; margin-top: 16px;
  box-shadow: 0 1px 2px rgba(44, 68, 58, 0.25);
}
button.primary:hover { background: var(--sage-dark); box-shadow: 0 2px 6px rgba(44, 68, 58, 0.3); }
button.secondary {
  background: white; color: var(--sage-dark); border: 1px solid var(--line); padding: 9px 16px;
  border-radius: var(--radius-sm); font-size: 13px;
}
button.secondary:hover { border-color: var(--sage); background: var(--sage-tint); }
button.link {
  background: none; border: none; color: var(--sage-dark); font-size: 13px;
  text-decoration: none; padding: 4px 0; font-weight: 600;
}
button.link:hover { color: var(--sage); text-decoration: underline; }
button i { font-size: 15px; }

.error { color: var(--danger); font-size: 13px; margin-top: 8px; font-weight: 500; }
.hint { color: var(--text-muted); font-size: 12px; margin-top: 5px; }

/* ---------- LOGIN ---------- */
.login-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box {
  width: 360px; padding: 36px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
}
.login-box .login-mark {
  width: 44px; height: 44px; border-radius: 12px; background: var(--sage);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.login-box .login-mark i { color: white; font-size: 22px; }
.login-box h1 { font-size: 21px; margin-bottom: 4px; font-weight: 700; }
.login-box p { color: var(--text-secondary); font-size: 13px; margin-top: 0; margin-bottom: 22px; }

/* ---------- PATIENTS ---------- */
.patient-list { list-style: none; padding: 0; margin: 0; }
.patient-list li {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 7px;
  display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 14px;
  font-weight: 500; transition: border-color 0.15s, background 0.15s;
}
.patient-list li:hover { border-color: var(--sage); }
.patient-list li.active { border-color: var(--sage); background: var(--sage-tint); }
.patient-list li .hint { display: flex; align-items: center; gap: 4px; }
.patient-list li > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.last-visit { font-weight: 500; }
.last-visit.stale { color: var(--danger); }

/* ---------- TABS ---------- */
.tabs { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.tabs button {
  display: inline-flex; align-items: center; gap: 7px;
  background: white; border: 1px solid var(--line); padding: 10px 18px; border-radius: 999px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: all 0.15s;
}
.tabs button:hover { border-color: var(--sage); }
.tabs button.active { background: var(--sage); color: white; border-color: var(--sage); }

/* ---------- PRODUCT GRID ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.product-tile {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px; cursor: pointer;
  font-size: 13px; background: white; transition: border-color 0.15s, box-shadow 0.15s;
}
.product-tile:hover { border-color: var(--sage); box-shadow: 0 2px 8px rgba(20,32,29,0.06); }
.product-tile.selected { border-color: var(--sage); background: var(--sage-tint); }
.product-tile .name { font-weight: 600; }

/* ---------- CATEGORY SECTIONS ---------- */
.category-search { margin-bottom: 16px; position: relative; }
.category-search input { padding-left: 38px; font-size: 14px; }
.category-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 16px; pointer-events: none;
}

.category-section { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.category-header {
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  padding: 13px 16px; background: white; user-select: none; transition: background 0.15s;
}
.category-header:hover { background: var(--paper); }
.category-header .cat-title { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sage-dark); }
.category-header .cat-meta { display: flex; align-items: center; gap: 12px; }
.category-header .cat-count { font-size: 12px; color: var(--text-muted); }
.category-header .chevron { transition: transform 0.15s; font-size: 13px; color: var(--sage-dark); display: inline-flex; }
.category-section.open .chevron { transform: rotate(90deg); }
.category-body { padding: 14px 16px; display: none; background: var(--paper); }
.category-section.open .category-body { display: block; }
.category-actions { display: flex; gap: 10px; margin-bottom: 12px; }
.category-actions button { font-size: 11.5px; padding: 7px 12px; }
.badge-count { background: var(--sage); color: white; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }

/* ---------- SELECTED ITEMS ---------- */
.selected-item-row {
  display: grid; grid-template-columns: 36px 1fr 110px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.selected-item-row:last-child { border-bottom: none; }
.reorder-btns { display: flex; flex-direction: column; gap: 1px; }
.reorder-btns button {
  padding: 1px; line-height: 1; background: none; border: none; color: var(--sage-dark);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.reorder-btns button i { font-size: 15px; }
.reorder-btns button:disabled { opacity: 0.2; cursor: default; }

.protocol-item-row {
  display: grid; grid-template-columns: 1fr 110px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.protocol-item-row:last-child { border-bottom: none; }

/* ---------- NOTE TOGGLES ---------- */
.note-toggle-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; margin: 0 8px 8px 0;
  border-radius: 999px; border: 1px solid var(--line); background: white; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink-soft); transition: all 0.15s;
}
.note-toggle-btn:hover { border-color: var(--sage); }
.note-toggle-btn.active { background: var(--ink); border-color: var(--ink); color: white; }

.empty { color: var(--text-muted); font-size: 13px; padding: 24px 0; text-align: center; }

/* ---------- BUILDER TWO-COLUMN LAYOUT ---------- */
.builder-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 2.6fr); gap: 24px; align-items: start; }
.builder-left { min-width: 0; }
.builder-right {
  min-width: 0; position: sticky; top: 20px; align-self: start;
  max-height: calc(100vh - 40px); overflow-y: auto; overflow-x: hidden;
}
@media (max-width: 900px) {
  .builder-layout { grid-template-columns: 1fr; }
  .builder-right { position: static; max-height: none; overflow-y: visible; }
}

.builder-toolbar {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 18px; margin-bottom: 16px; box-shadow: var(--shadow-card);
}
.builder-toolbar-notes { display: flex; flex-wrap: wrap; gap: 6px; }
.builder-toolbar-actions { display: flex; flex-wrap: nowrap; gap: 8px; }
.builder-toolbar-actions button { margin: 0; white-space: nowrap; }
.edit-order-toggle-btn.active { background: var(--ink); color: white; border-color: var(--ink); }

/* product tile with inline AM/PM pills */
.product-tile { position: relative; }
.product-tile-pills { display: flex; gap: 6px; margin-top: 8px; }
.timing-pill-toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; color: var(--text-secondary);
}
.timing-pill-toggle.on.am { background: #faedd6; border-color: #e0b45a; color: #8a6416; }
.timing-pill-toggle.on.pm { background: #3f6b52; border-color: #2c4d3a; color: white; }
.reorder-tile { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 8px; background: white; }
.reorder-tile .reorder-btns { flex-direction: column; }
.reorder-tile-body { flex: 1; min-width: 0; }
.reorder-tile-name { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.reorder-tile-note { width: 100%; }

/* ---------- TOAST ---------- */
#toastContainer {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 9999;
}
.toast {
  background: var(--ink); color: white; padding: 12px 16px; border-radius: var(--radius);
  display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-raised); animation: toast-in 0.2s ease-out;
}
.toast-action {
  background: var(--sage); color: white; border: none; padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.toast-action:hover { background: var(--sage-dark); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- ANALYTICS ---------- */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.metric-card { background: var(--paper); border-radius: var(--radius); padding: 16px; }
.metric-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.metric-value { font-size: 26px; font-weight: 700; color: var(--ink); }
.analytics-subhead { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sage-dark); font-weight: 700; margin-bottom: 10px; }
.analytics-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.analytics-row {
  display: grid; grid-template-columns: 2fr 1fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr; gap: 8px;
  padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--line-soft); align-items: center;
}
.analytics-row-6col { grid-template-columns: 2fr 1fr 0.9fr 0.9fr 0.9fr 0.9fr; }
.analytics-row-7col { grid-template-columns: 2fr 1fr 0.8fr 0.8fr 0.8fr 0.8fr 1.4fr; }
.analytics-row:last-child { border-bottom: none; }
.analytics-row-2col { grid-template-columns: 1fr auto; }
.analytics-header-row { background: var(--paper); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.inactive-badge { color: var(--danger); font-weight: 600; }

/* ---------- PRINT / PDF SHEET ---------- */
.sheet {
  background: white; border: 1px solid var(--line); max-width: 800px; margin: 0 auto 20px;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
}
.sheet-header {
  display: grid; grid-template-columns: 160px 1fr 160px; align-items: stretch;
  padding: 22px 24px; background: var(--ink); color: white; gap: 16px;
}
.sheet-header-box {
  background: white; border: none; border-radius: var(--radius-sm); padding: 10px 14px;
  min-height: 54px; display: flex; flex-direction: column; gap: 4px; justify-content: center;
}
.sheet-header-box .lbl { font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.08em; font-weight: 700; }
.sheet-header-box .val { font-size: 14px; font-weight: 600; color: var(--ink); min-height: 18px; }
.sheet-title { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: white; font-family: var(--app-heading-font); align-self: center; }
.sheet-grid-header {
  display: grid; grid-template-columns: 48px 1fr 1fr; background: var(--sage-tint); color: var(--sage-dark);
  font-weight: 700; font-size: 12px; text-align: center; padding: 10px 0; letter-spacing: 0.06em;
  text-transform: uppercase; border-bottom: 1px solid var(--line);
}
.sheet-grid-header .gh-am, .sheet-grid-header .gh-pm { display: flex; align-items: center; justify-content: center; gap: 6px; }
.sheet-grid-header .gh-am i, .sheet-grid-header .gh-pm i { font-size: 14px; }
.sheet-row { display: grid; grid-template-columns: 48px 1fr 1fr; border-bottom: 1px solid var(--line-soft); min-height: 54px; }
.sheet-row:last-child { border-bottom: none; }
.sheet-row-num {
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12px;
}
.sheet-row-num span {
  width: 22px; height: 22px; border-radius: 50%; background: var(--sage-tint); color: var(--sage-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.sheet-cell { padding: 10px 14px; border-right: 1px solid var(--line-soft); }
.sheet-cell:last-child { border-right: none; }
.sheet-cell.empty-cell { background: #fbfaf6; }
.sheet-product-name { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; color: var(--ink); }
.sheet-instructions { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; }

.sheet-footer-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); }
.sheet-footer-notes { padding: 16px 20px; }
.sheet-footer-side { padding: 16px 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.sheet-footer-reorder { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet-treatments-block h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; color: var(--sage-dark); font-weight: 700; }
.sheet-treatments-block ul { margin: 0 0 0 16px; padding: 0; font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; }
.sheet-treatments-block + .sheet-footer-reorder { border-top: 1px solid var(--line-soft); padding-top: 14px; }
.sheet-footer h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; color: var(--sage-dark); font-weight: 700; }
.sheet-notes-block { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; white-space: pre-wrap; }
.sheet-notes-block strong { display: block; font-size: 12px; margin-bottom: 3px; color: var(--ink); }
.sheet-notes-block ul { margin-left: 16px; }
.sheet-reorder-left { display: flex; flex-direction: column; gap: 6px; }
.sheet-reorder-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); }
.sheet-reorder-subheading { font-size: 19px; font-weight: 800; text-transform: uppercase; line-height: 1.2; color: var(--ink); }
.sheet-qr-img { width: 130px; height: 130px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 5px; flex-shrink: 0; }
.sheet-logo-img { max-height: 40px; max-width: 160px; object-fit: contain; margin-top: 6px; }
.sheet-empty { text-align: center; padding: 24px; color: var(--text-muted); font-size: 13px; }

.sheet-single-column { padding: 4px 0; }
.sheet-row-single {
  display: grid; grid-template-columns: 48px 1fr; gap: 4px; padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.sheet-row-single:last-child { border-bottom: none; }
.sheet-row-single-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.sheet-timing-pill {
  display: inline-flex; align-items: center; gap: 5px; background: var(--sage-tint); color: var(--sage-dark);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.sheet-timing-pill i { font-size: 12px; }

/* ============================================================
   TABLET MODE — chairside/iPad use.
   Bigger tap targets, bigger type, more breathing room. Covers
   iPad portrait (~768px) through landscape (~1024px) and similar
   Android tablets. Same app, same data — just tuned for touch.
   ============================================================ */
@media (min-width: 600px) and (max-width: 1180px) {
  body { font-size: 16px; }

  .tabs button {
    padding: 14px 20px; font-size: 15px; min-height: 48px;
  }

  button.primary, button.secondary {
    padding: 14px 22px; font-size: 15px; min-height: 48px;
  }
  button.link { padding: 8px 4px; font-size: 14px; }

  .product-tile { padding: 16px; min-height: 56px; }
  .product-tile .name { font-size: 14px; }

  .timing-pill-toggle { padding: 8px 14px; font-size: 12.5px; }

  .category-header { padding: 16px 18px; min-height: 52px; }
  .category-header .cat-title { font-size: 14px; }

  .reorder-btns button { padding: 8px; }
  .reorder-btns button i { font-size: 19px; }
  .reorder-tile { padding: 16px; }

  input, select, textarea { padding: 13px 14px; font-size: 15px; }
  label { font-size: 14px; }

  .patient-list li { padding: 16px 18px; font-size: 15px; }

  .builder-toolbar-actions button { padding: 12px 18px; }

  .card { padding: 22px; }

  /* stack the builder into a single column earlier on tablets held
     in portrait, since a squeezed two-column layout is hard to use
     with a finger; landscape (iPad ~1024px wide) keeps two columns */
  .builder-layout { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) and (max-width: 1180px) and (orientation: landscape) {
  /* iPad-landscape-ish: two columns are fine again at this width,
     just with the same generous touch sizing as above */
  .builder-layout { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.8fr); }
}

/* ---------- NOTE TYPE TOGGLE (Editor > Note Templates) ---------- */
.note-type-toggle { display: flex; gap: 8px; margin-top: 6px; }
.note-type-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  border-radius: 999px; border: 1px solid var(--line); background: white; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft); transition: all 0.15s; font-family: inherit;
}
.note-type-btn:hover { border-color: var(--sage); }
.note-type-btn.active { background: var(--ink); border-color: var(--ink); color: white; }

/* ---------- TAPER SCHEDULE WEEK EDITOR ---------- */
.taper-week-row {
  display: grid; grid-template-columns: 70px 1fr 1fr 32px; gap: 10px; align-items: end;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.taper-week-row:last-child { border-bottom: none; }
.taper-week-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); padding-bottom: 10px; }
.taper-week-field span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.taper-week-field input { padding: 8px 10px; }
.taper-week-row > button.link { align-self: center; padding: 6px; }

/* ---------- TAPER-TYPE NOTE TOGGLE + TABLE ---------- */
.note-toggle-btn.taper-toggle { border-style: dashed; }
.note-toggle-btn.taper-toggle.active { border-style: solid; }
.note-toggle-btn.treatments-toggle { border-style: dashed; }
.note-toggle-btn.treatments-toggle.active { border-style: solid; }

.taper-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 11px; }
.taper-table th, .taper-table td { border: 1px solid var(--line); padding: 4px 8px; text-align: center; }
.taper-table th {
  background: var(--sage-tint); color: var(--sage-dark); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; font-size: 10px;
}
.taper-table th:first-child, .taper-table td:first-child { text-align: left; }
.sheet-taper-block { margin-top: 4px; }

.sheet-title-sub {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #b9ceba; margin-top: 3px;
}

/* ---------- BRIDGE MODE (Old/New taper regimen editing) ---------- */
.bridge-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--ink); color: white; border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 16px;
}
.bridge-banner-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.bridge-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25); background: transparent; color: white; cursor: pointer;
  font-size: 12.5px; font-weight: 600; font-family: inherit; transition: all 0.15s;
}
.bridge-tab:hover { border-color: rgba(255,255,255,0.5); }
.bridge-tab.active { background: var(--sage); border-color: var(--sage); }
.bridge-banner button.link { color: #f2c9b3; }
.bridge-banner button.link:hover { color: #f7ddca; }

/* ---------- MODAL (taper product-removal checklist) ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 32, 29, 0.55); z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-box {
  background: var(--surface); border-radius: var(--radius-lg); padding: 26px; width: 100%;
  max-width: 480px; max-height: 82vh; overflow-y: auto; box-shadow: var(--shadow-raised);
}
.modal-checklist { display: flex; flex-direction: column; gap: 2px; margin: 14px 0; }
.modal-check-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13.5px; transition: background 0.15s;
}
.modal-check-row:hover { background: var(--paper); }
.modal-check-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--sage); flex-shrink: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

@media print {
  header.topbar, .no-print, .tabs, #panePatients, #productSearch,
  #productGrid, #selectedItems, label, textarea, #savedProtocols { display: none !important; }
  .card { border: none; padding: 0; box-shadow: none; }
  .card h2 { display: none; }
  body { background: white; }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

/* ---------- QUICK ADD REGIMENS ---------- */
.note-toggle-btn.quick-add-toggle { position: relative; overflow: hidden; }
.quick-add-caret { font-size: 13px; margin-left: -2px; }
.quick-add-select {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; border: none; font-size: 16px;
}

.quick-add-form { border-top: 1px solid var(--line-soft); padding-top: 16px; }
.quick-add-form-title { font-size: 14px; margin: 0 0 4px; color: var(--sage-dark); }
.quick-add-form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.quick-add-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 4px; }
.quick-add-picker, .quick-add-selected {
  max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: white; padding: 6px 8px;
}
.quick-add-picker-cat {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--sage-dark); padding: 10px 8px 4px; position: sticky; top: -6px; background: white;
}
.quick-add-pick { padding: 7px 8px; font-size: 13px; margin: 0; font-weight: 500; }
.quick-add-selected-row {
  display: grid; grid-template-columns: 1fr 92px 28px; gap: 8px; align-items: center;
  padding: 7px 4px; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.quick-add-selected-row:last-child { border-bottom: none; }
.quick-add-timing-select { padding: 5px 8px; font-size: 12px; }
.quick-add-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
}
.quick-add-row-body { flex: 1; min-width: 0; font-size: 13px; }
.quick-add-row-items { margin-top: 4px; line-height: 1.5; }
.quick-add-timing { font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
@media (max-width: 760px) {
  .quick-add-columns { grid-template-columns: 1fr; }
}

/* ---------- ADMIN: OFFICE FEATURE SWITCHES ---------- */
.feature-switch-list { display: flex; flex-direction: column; gap: 8px; }
.feature-switch-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: white;
}
.feature-switch-row.on { border-color: var(--sage); background: var(--sage-tint); }
.feature-switch-icon { font-size: 20px; color: var(--sage-dark); flex-shrink: 0; }
.feature-switch-body { flex: 1; min-width: 0; font-size: 13.5px; }
.feature-switch-body .hint { margin: 3px 0 0; }
.feature-switch {
  position: relative; width: 46px; height: 26px; flex-shrink: 0; padding: 0; margin: 0;
  border-radius: 999px; border: none; background: #cfcabd; cursor: pointer; transition: background 0.15s;
}
.feature-switch.on { background: var(--sage); }
.feature-switch:disabled { opacity: 0.45; cursor: not-allowed; }
.feature-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left 0.15s;
}
.feature-switch.on .feature-switch-knob { left: 23px; }
.feature-switch-state { width: 26px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.feature-switch-row.on .feature-switch-state { color: var(--sage-dark); }

/* ---------- ADMIN: BILLING ---------- */
.billing-status { margin: 12px 0 4px; }
.billing-status-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: white; font-size: 13.5px;
}
.billing-status-row.ok { border-color: var(--sage); background: var(--sage-tint); }
.billing-status-row.bad { border-color: var(--danger); background: var(--danger-tint); }
.billing-status-row.warn { display: flex; gap: 10px; align-items: flex-start; border-color: #d9a441; background: #fbf3e2; }
.billing-status-row.warn i { font-size: 18px; color: #a87512; }
.billing-status-row .hint { margin: 0 0 2px; }
.billing-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 8px; }
.billing-subhead { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sage-dark); margin: 18px 0 8px; }
.billing-interval { display: flex; gap: 8px; flex-wrap: wrap; }
.billing-interval-opt {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; background: white; cursor: pointer; font-size: 13px;
}
.billing-interval-opt:has(input:checked) { border-color: var(--sage); background: var(--sage-tint); color: var(--sage-dark); }
.billing-interval-opt input, .billing-option input[type="radio"], .billing-option input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--sage); flex-shrink: 0; }
.billing-option {
  display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 11px 14px; font-weight: 500;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: white; cursor: pointer; font-size: 13.5px;
}
.billing-option:has(input:checked) { border-color: var(--sage); background: var(--sage-tint); }
.billing-option-name { flex: 1; min-width: 0; }
.billing-option-price { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; font-weight: 600; }
.billing-qty-input { width: 64px !important; padding: 6px 8px !important; flex-shrink: 0; }
.billing-total-box {
  position: sticky; top: 16px; padding: 18px; border-radius: var(--radius); background: var(--ink); color: white; margin-top: 18px;
}
.billing-total-box .hint { color: rgba(255,255,255,0.7); }
.billing-total-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.billing-total-amount { font-size: 30px; font-weight: 800; margin: 4px 0; }
.billing-lines { margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 10px; }
.billing-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; }
.billing-line.one-time { opacity: 0.8; font-style: italic; }
.billing-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.billing-link-out { margin-top: 12px; padding: 12px; border: 1px dashed var(--sage); border-radius: var(--radius-sm); background: var(--sage-tint); }
.billing-link-row { display: flex; gap: 8px; align-items: center; }
.billing-link-row input { font-size: 12px; }
.billing-link-row .secondary-link { font-size: 13px; font-weight: 600; color: var(--sage-dark); white-space: nowrap; }
.billing-charge { margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.billing-charge-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.billing-invoice-row {
  display: grid; grid-template-columns: 90px 1fr 80px 70px 44px; gap: 10px; align-items: center;
  padding: 8px 4px; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.billing-invoice-desc { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billing-invoice-status { font-size: 11.5px; font-weight: 700; }
.billing-invoice-status.paid { color: var(--sage-dark); }
.billing-invoice-status.open { color: var(--danger); }
@media (max-width: 860px) {
  .billing-grid, .billing-charge-row { grid-template-columns: 1fr; }
  .billing-status-row { grid-template-columns: 1fr; }
}

/* ---------- PLAN USAGE METER (office dashboard) ---------- */
.usage-meter { padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.usage-meter-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.usage-meter-head .hint { margin: 0; }
.usage-meter-bar { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-bottom: 6px; }
.usage-meter-bar span { display: block; height: 100%; background: var(--sage); border-radius: 999px; }
.usage-meter-bar.near span { background: #d9a441; }
.usage-meter-bar.over span { background: var(--danger); }

/* ---------- ADMIN: BILLING USAGE + LOCATIONS ---------- */
.billing-parent-note, .billing-seat-warn {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin: 10px 0;
  border: 1px solid #d9a441; border-radius: var(--radius); background: #fbf3e2; font-size: 13.5px;
}
.billing-parent-note i, .billing-seat-warn i { font-size: 18px; color: #a87512; flex-shrink: 0; }
.billing-ul-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0 4px; }
.billing-ul-box { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.billing-location-row { display: grid; grid-template-columns: 1fr auto 60px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.billing-location-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.billing-location-add select { font-size: 13px; padding: 8px 10px; }
.billing-overage-row { grid-template-columns: 110px 1fr 70px 90px 0; }
@media (max-width: 860px) { .billing-ul-grid { grid-template-columns: 1fr; } }

/* ---------- ADMIN: DISCOUNTS + ONE-TIME CHARGES ---------- */
.billing-discount-row { display: grid; grid-template-columns: 130px 110px 1fr 80px; gap: 8px; }
.billing-discount-row select, .billing-discount-row input { padding: 8px 10px; font-size: 13px; }
.billing-onetime-row { display: grid; grid-template-columns: 110px 1fr 28px; gap: 8px; align-items: center; margin-bottom: 6px; }
.billing-onetime-row input { padding: 8px 10px; font-size: 13px; }
.billing-line.discount { color: #9fd3b4; }
.billing-current-discount { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--sage); border-radius: var(--radius-sm); background: var(--sage-tint); font-size: 13px; }
@media (max-width: 860px) { .billing-discount-row { grid-template-columns: 1fr 1fr; } }
.billing-option.disabled { opacity: 0.5; cursor: not-allowed; }
.billing-charge.locked .billing-charge-row, .billing-charge.locked > label, .billing-charge.locked > input, .billing-charge.locked .billing-actions { opacity: 0.45; }
.btn-email-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 9px 14px; border-radius: var(--radius-sm); background: var(--sage); color: white; font-size: 13px; font-weight: 600; text-decoration: none; }
.btn-email-link:hover { background: var(--sage-dark); }

/* Add-ons included free with the Advanced plan */
.billing-included-tag { display: none; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #e7f5ec; color: #1f7a45; vertical-align: middle; }
.billing-option.included .billing-included-tag { display: inline-block; }
.billing-option.included .billing-option-price { text-decoration: line-through; opacity: .5; }
.billing-option.included input { cursor: not-allowed; }

/* Additional charges (amount, how often, months, remove) + note underneath */
.billing-addl-row { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--line-soft); }
.billing-addl-row .billing-discount-row { grid-template-columns: 110px 1fr 80px 28px; align-items: center; }
.billing-addl-row > input { padding: 8px 10px; font-size: 13px; width: 100%; }
.billing-addl-current { margin-bottom: 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.billing-addl-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; }
.billing-addl-item + .billing-addl-item { border-top: 1px solid var(--line-soft); }
.billing-addl-item.removing strong, .billing-addl-item.removing .hint { text-decoration: line-through; opacity: .55; }

/* Enterprise dropdown */
.billing-enterprise { margin-top: 18px; border: 1px dashed var(--sage); border-radius: var(--radius); background: var(--surface); }
.billing-enterprise.open { border-style: solid; }
.billing-ent-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.billing-ent-toggle > span:first-of-type { font-weight: 600; font-size: 14px; }
.billing-ent-toggle .hint { margin-left: auto; }
.billing-ent-toggle i { transition: transform .15s ease; color: var(--sage); }
.billing-ent-toggle.open i { transform: rotate(90deg); }
#billingEntBody { padding: 0 14px 14px; }
.ent-grid { display: grid; gap: 6px; }
.ent-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) 1fr 1fr 80px; gap: 8px; align-items: center; font-size: 13px; }
.ent-row input { padding: 8px 10px; font-size: 13px; width: 100%; }
.ent-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.ent-rate { display: flex; align-items: center; gap: 4px; }
.ent-rate span { color: var(--text-muted); }
.ent-line { text-align: right; font-weight: 600; }
.ent-check { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.ent-check input { width: auto; }
#billingEntMount #billingAdditionalBlock, #billingEntMount #billingDiscountBlock { border-top: 1px solid var(--line-soft); margin-top: 14px; }
@media (max-width: 860px) {
  .ent-row { grid-template-columns: 1fr 1fr; }
  .ent-head { display: none; }
  .billing-addl-row .billing-discount-row { grid-template-columns: 1fr 1fr; }
}

/* "Total regimens" line in the billing total box */
.billing-regimen-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.08); }
.billing-regimen-total span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.billing-regimen-total strong { font-size: 18px; }
.billing-regimen-total .hint { flex-basis: 100%; color: inherit; opacity: .7; }

/* Regimen Checkout: Shopify setup steps */
.shopify-step{border:1px solid #e5e2dc;border-radius:12px;padding:14px;margin-top:12px}
.shopify-step code{font-size:12px;background:#f1eee8;padding:1px 4px;border-radius:4px}

/* Regimen Checkout: matched products editor + unpair */
.match-table{width:100%;border-collapse:collapse;font-size:14px}
.match-table th{text-align:left;font-weight:600;padding:8px;border-bottom:1px solid #e5e2dc;white-space:nowrap}
.match-table td{padding:8px;border-bottom:1px solid #f0ede7;vertical-align:middle}
.match-table select{width:100%;min-width:220px}
.match-tag{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:#f1eee8;color:#555}
.match-tag.manual{background:#e6efe9;color:#2f6b45}
.match-tag.none{background:#f7e9e6;color:#a33}
.checkout-danger{margin-top:24px;padding:14px;border:1px solid #e8c9c3;border-radius:12px;background:#fdf7f6}
.danger-btn{background:#fff;color:#a33;border:1px solid #d9a69c;border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer}
.danger-btn:hover{background:#a33;color:#fff}
@media (max-width:640px){.match-table thead{display:none}.match-table tr{display:block;padding:8px 0;border-bottom:1px solid #e5e2dc}.match-table td{display:block;border:0;padding:4px 0}}

/* ---------- OFFICE LOGIN (index.html, split screen) ---------- */
.rb-login {
  --rb-green: #2f5d57; --rb-green-dk: #23463f; --rb-ivory: #f6f2ea; --rb-line: #e2dccf;
  --rb-muted: #66706d; --rb-sheet: #41594f;
  display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; background: var(--rb-ivory);
}
.rb-login-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.rb-login-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--rb-green); }
.rb-login-mark i { color: #fff; font-size: 19px; }

.rb-login-brand {
  background: var(--rb-green); color: #fff; padding: 40px 48px; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.rb-login-brand .rb-login-mark { background: rgba(255,255,255,.14); }
.rb-login-brand::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 260px; z-index: 1;
  background: linear-gradient(to top, var(--rb-green) 55%, transparent);
}
.rb-login-brand h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 40px; line-height: 1.12;
  text-transform: none; letter-spacing: 0; color: #fff; display: block;
  margin: auto 0 0; max-width: 400px; position: relative; z-index: 2;
}
.rb-login-brand p { opacity: .8; margin: 14px 0 0; max-width: 360px; line-height: 1.5; font-size: 15px; position: relative; z-index: 2; }

/* sample sheet: built at full size, scaled and tilted */
.rb-sheet-wrap { position: absolute; left: calc(100% - 330px); top: 92px; transform: rotate(6deg) scale(.6); transform-origin: top left; z-index: 0; pointer-events: none; }
.rb-sheet { width: 640px; background: #fff; border-radius: 16px; padding: 26px 28px; box-shadow: 0 30px 70px rgba(0,0,0,.35); color: #1f2a26; font-size: 12.5px; font-family: 'Inter', sans-serif; }
.rb-s-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid #e7e3d8; }
.rb-s-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; padding-top: 10px; }
.rb-s-title span { color: var(--rb-sheet); }
.rb-s-boxes { display: flex; gap: 10px; }
.rb-s-box { width: 122px; height: 38px; border: 1px solid #e1ddd2; border-radius: 8px; padding: 5px 10px; }
.rb-s-box small { display: block; font-size: 8px; letter-spacing: .08em; color: #8a918d; font-weight: 600; }
.rb-s-box b { font-size: 13px; font-weight: 500; }
.rb-s-cols { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #e7e3d8; }
.rb-s-col { padding: 16px 0 14px; }
.rb-s-col:first-child { padding-right: 20px; border-right: 1px solid #e7e3d8; }
.rb-s-col:last-child { padding-left: 20px; }
.rb-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--rb-sheet); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; padding: 5px 12px; border-radius: 20px; margin-bottom: 10px; }
.rb-pill i { font-size: 11px; }
.rb-step { display: flex; gap: 9px; margin-bottom: 10px; position: relative; }
.rb-num { flex: 0 0 17px; height: 17px; border: 1.5px solid #2b3632; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 600; background: #fff; position: relative; z-index: 1; }
.rb-step:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 17px; bottom: -10px; width: 1px; background: #d9d5ca; }
.rb-step b { display: block; font-size: 12px; font-weight: 600; }
.rb-step span { color: #5d6662; font-size: 10.5px; line-height: 1.35; display: block; }
.rb-s-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 14px; }
.rb-s-foot h4 { font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.rb-s-foot h5 { font-size: 10.5px; font-weight: 700; margin: 6px 0 3px; }
.rb-s-foot ul { margin: 0; padding: 0; }
.rb-s-foot li { font-size: 10px; color: #5d6662; margin-left: 12px; line-height: 1.4; }
.rb-s-tag { font-size: 9px; letter-spacing: .08em; font-weight: 700; color: #3b4541; margin-bottom: 5px; }
.rb-shop { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e7e3d8; margin-top: 10px; padding-top: 12px; }
.rb-shop small { font-size: 9px; font-weight: 700; display: block; }
.rb-shop strong { font-size: 15px; font-weight: 800; line-height: 1.1; display: block; margin-top: 4px; }
.rb-qr { width: 78px; height: 78px; border: 1px solid #e1ddd2; border-radius: 8px; padding: 6px; }

/* form side */
.rb-login-main { padding: 40px 64px; display: flex; flex-direction: column; }
.rb-login-top { display: flex; justify-content: flex-end; align-items: center; }
.rb-login-logo--mobile { display: none; }
.rb-login-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
.rb-login-back:hover { color: var(--rb-green); }
.rb-login-back i { font-size: 16px; }
.rb-login-form { margin: auto 0; max-width: 380px; width: 100%; align-self: center; padding: 32px 0; }
.rb-login-form h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 32px; margin: 0; color: var(--ink); }
.rb-login-sub { color: var(--rb-muted); margin: 6px 0 28px; font-size: 15px; }
.rb-login-form label { margin: 0 0 6px; font-size: 13px; }
.rb-login-form input { height: 46px; border-radius: 10px; background: #fff; font-size: 15px; padding: 0 14px; border-color: var(--rb-line); margin-bottom: 16px; }
.rb-login-form input:focus { border-color: var(--rb-green); box-shadow: 0 0 0 3px rgba(47,93,87,.15); }
.rb-pw { position: relative; }
.rb-pw input { padding-right: 70px; }
.rb-pw-toggle { position: absolute; right: 6px; top: 6px; height: 34px; padding: 0 10px; border: 0; background: none; color: var(--rb-green); font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 6px; }
.rb-pw-toggle:hover { background: rgba(47,93,87,.08); }
.rb-login-btn { width: 100%; height: 48px; margin-top: 6px; border: 0; border-radius: 10px; background: var(--rb-green); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; }
.rb-login-btn:hover { background: var(--rb-green-dk); }
.rb-login-fine { font-size: 13px; color: var(--rb-muted); margin: 14px 0 0; text-align: center; line-height: 1.45; }
.rb-login-fine + .rb-login-fine { margin-top: 6px; }
.rb-login-fine a { color: var(--rb-green); font-weight: 500; text-decoration: none; }
.rb-login-fine a:hover { text-decoration: underline; }

@media (max-width: 1100px) { .rb-sheet-wrap { left: calc(100% - 280px); transform: rotate(6deg) scale(.5); } .rb-login-main { padding: 40px; } }
@media (max-width: 860px) {
  .rb-login { grid-template-columns: 1fr; }
  .rb-login-brand { display: none; }
  .rb-login-main { padding: 20px 16px; min-height: 100vh; }
  .rb-login-top { justify-content: space-between; }
  .rb-login-logo--mobile { display: flex; }
  .rb-login-form h1 { font-size: 28px; }
}

/* ---------- PROTOCOL BUILDER LOGO (login) ---------- */
.rb-login-logo .rb-mark-svg { width: 38px; height: 38px; flex: none; display: block; }
.rb-word { display: inline-flex; flex-direction: column; line-height: 1; }
.rb-wm { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 22px; letter-spacing: -.01em; color: #1d2421; }
.rb-wm b { font-weight: 600; color: var(--rb-green, #2f5d57); }
.rb-word small { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: #5b6461; margin-top: 5px; padding-left: 1px; white-space: nowrap; }
.rb-login-brand .rb-wm, .rb-login-brand .rb-wm b { color: #fff; }
.rb-login-brand .rb-word small { color: rgba(255,255,255,.72); }

/* ---------- ADMIN: SOFTWARE VERSION ---------- */
.ui-version-toggle { display: flex; flex: none; padding: 3px; border-radius: 10px; background: #e6e3da; }
.ui-version-btn { height: 34px; padding: 0 14px; margin: 0; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.ui-version-btn.on { background: white; color: var(--sage-dark); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

.analytics-row-checks { grid-template-columns: 1.8fr 0.7fr 0.7fr 0.7fr 0.9fr 1fr 0.9fr 1fr 0.7fr 0.7fr; }