/* ====================================================================== */
/* OrderDee — Manual CSS                                                  */
/* Styles used by manual.html (index) and manual-*.html (category pages)  */
/* ====================================================================== */

/* === Breadcrumb === */
.manual-crumb {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.manual-crumb .container {
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--ink-500);
}
.manual-crumb a { color: var(--ink-700); font-weight: 600; }
.manual-crumb a:hover { color: var(--green-700); }
.manual-crumb .crumb-sep { color: var(--ink-400); }
.manual-crumb span:not(.crumb-sep) { color: var(--ink-900); font-weight: 700; }

/* === Article block === */
.manual-article {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.manual-article h3 {
  font-size: 22px; margin: 0 0 8px;
  display: flex; align-items: flex-start; gap: 12px;
}
.article-num {
  display: inline-flex; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--green-500), var(--accent-emerald));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800; font-size: 13px;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(22,163,74,.28);
}
.article-lead { color: var(--ink-600); font-size: 15px; margin: 0 0 14px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.role-chip {
  padding: 3px 10px; border-radius: 999px;
  background: var(--green-50); color: var(--green-800);
  border: 1px solid var(--green-200);
  font-size: 12px; font-weight: 600;
}
.role-chip.cust { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.role-chip.kit  { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.role-chip.cash { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.role-chip.wait { background: #f3e8ff; color: #6d28d9; border-color: #ddd6fe; }
.role-chip.mgr  { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }

.sub-head {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; color: var(--ink-900);
  margin: 18px 0 10px;
  display: flex; align-items: center; gap: 10px;
}
.sub-head::before {
  content: ''; width: 4px; height: 16px;
  background: var(--green-500); border-radius: 2px;
}

/* === Step list — DEFAULT is quiet (light, white circle with thin green border)
   Use .featured for important flows (full green circle, see below).
   Use .compact for long step lists (native ordered list, no decoration).      */
.step-list { list-style: none; counter-reset: step; padding: 0; margin: 0 0 6px; }
.step-list > li {
  counter-increment: step;
  position: relative;
  padding: 8px 0 8px 34px;
  color: var(--ink-700); font-size: 15px; line-height: 1.62;
  border-bottom: 1px solid var(--border);
}
.step-list > li:last-child { border-bottom: 0; }
.step-list > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  color: var(--green-700);
  border: 1px solid var(--green-200);
  box-shadow: none;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.step-list strong { color: var(--ink-900); font-weight: 700; }
.step-list code {
  background: var(--ink-100); color: var(--green-800);
  padding: 1px 6px; border-radius: 4px; font-size: 13px;
}

/* Featured variant — reserved for the most important flows (onboarding, QR order, close-bill).
   Restores the full green gradient circle with shadow for emphasis. */
.step-list.featured > li { padding-left: 40px; padding-top: 9px; padding-bottom: 9px; }
.step-list.featured > li::before {
  width: 28px; height: 28px;
  top: 10px;
  background: linear-gradient(135deg, var(--green-500), var(--accent-emerald));
  color: #fff;
  border: 0;
  box-shadow: 0 3px 8px rgba(22,163,74,.25);
  font-size: 13px;
}

/* Compact variant — for long lists (3.5 Refund, 4.5 AI Setup, 5.5 Troubleshooting).
   Uses the browser's native decimal numbering, no chip, no row divider. */
.step-list.compact {
  list-style: decimal;
  counter-reset: none;
  padding: 0 0 0 22px;
}
.step-list.compact > li {
  counter-increment: none;
  padding: 5px 0 5px 4px;
  border-bottom: 0;
}
.step-list.compact > li::before { content: none; }
.step-list.compact > li::marker {
  color: var(--green-700);
  font-weight: 700;
}

/* Bullet list — quieter check icon (light grey background) so it doesn't compete
   with step numbers or callouts when both appear in the same article. */
.bullet-list { list-style: none; padding: 0; margin: 6px 0; }
.bullet-list > li {
  position: relative; padding: 4px 0 4px 22px;
  color: var(--ink-700); font-size: 14.5px;
}
.bullet-list > li::before {
  content: '✓'; position: absolute; left: 0; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-50);
  color: var(--green-700);
  border: 1px solid var(--ink-200);
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* === Receipt mockup — paper-style preview rendered in HTML ===
   Used in bt 1.4 (VAT) and 3.6 (breakdown) to show how the printed receipt
   looks under different tax/rounding modes without needing a real bill. */
.receipt-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 14px 0 18px;
}
@media (max-width: 760px) { .receipt-pair { grid-template-columns: 1fr; } }
.receipt-paper {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 16px 18px;
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 12.5px;
  color: var(--ink-800);
  line-height: 1.55;
  position: relative;
  box-shadow: 0 6px 14px rgba(15,23,42,.06);
}
.receipt-paper::before, .receipt-paper::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 8px;
  background-image: linear-gradient(135deg, transparent 33%, #fff 33%, #fff 66%, transparent 66%);
  background-size: 16px 16px;
}
.receipt-paper::before { top: -1px; transform: translateY(-100%); }
.receipt-paper::after  { bottom: -1px; transform: translateY(100%) rotate(180deg); }
.r-mode-tag {
  display: inline-block;
  font-family: var(--font);
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: var(--green-100); color: var(--green-800);
  margin-bottom: 6px;
}
.r-mode-tag.alt { background: #fef3c7; color: #92400e; }
.receipt-paper h5 {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 800; color: var(--ink-900);
  text-align: center;
}
.receipt-paper .r-sub { text-align: center; color: var(--ink-500); font-size: 11px; margin-bottom: 8px; }
.receipt-paper .r-line {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px dashed var(--border);
  padding: 3px 0;
}
.receipt-paper .r-line.total {
  border-bottom: 0;
  border-top: 2px solid var(--ink-700);
  margin-top: 6px; padding-top: 6px;
  font-weight: 800; color: var(--ink-900);
  font-size: 14px;
}
.receipt-paper .r-line .num {
  font-variant-numeric: tabular-nums;
}
.receipt-paper .r-line.indent { padding-left: 14px; color: var(--ink-500); }

/* === Tax invoice — paper-style mockup with company details === */
.tax-invoice {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 22px 26px;
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 12.5px;
  color: var(--ink-800);
  max-width: 460px;
  margin: 14px auto;
  box-shadow: 0 6px 14px rgba(15,23,42,.08);
}
.tax-invoice .ti-head {
  text-align: center;
  border-bottom: 2px solid var(--ink-900);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.tax-invoice .ti-head h5 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 800;
  margin: 0 0 2px;
}
.tax-invoice .ti-head small { color: var(--ink-500); font-size: 11px; }
.tax-invoice .ti-title {
  text-align: center; font-weight: 800;
  font-family: var(--font-display);
  font-size: 14px; padding: 6px 0;
  background: var(--ink-50); margin: 0 -26px 12px;
}
.tax-invoice .ti-meta {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  margin-bottom: 12px; font-size: 12px;
}
.tax-invoice .ti-meta dt { color: var(--ink-500); }
.tax-invoice .ti-meta dd { margin: 0; color: var(--ink-900); font-weight: 600; }
.tax-invoice .ti-line {
  display: flex; justify-content: space-between;
  border-bottom: 1px dashed var(--border);
  padding: 3px 0; font-variant-numeric: tabular-nums;
}
.tax-invoice .ti-line.total {
  border: 0; border-top: 2px solid var(--ink-700);
  margin-top: 6px; padding-top: 6px;
  font-weight: 800; font-size: 14px; color: var(--ink-900);
}
.tax-invoice .ti-vat-block {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px; color: var(--ink-600);
}

/* === Thermal 80mm receipt === */
.thermal-paper {
  background: #fff;
  border: 1px dashed var(--border-strong);
  padding: 14px 12px;
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 11px;
  color: var(--ink-800);
  width: 280px;
  margin: 14px auto;
  line-height: 1.45;
  box-shadow: 0 4px 10px rgba(15,23,42,.08);
}
.thermal-paper h5 {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800;
  text-align: center; margin: 0 0 2px;
}
.thermal-paper .center { text-align: center; }
.thermal-paper hr {
  border: 0; border-top: 1px dashed var(--ink-400);
  margin: 6px 0;
}
.thermal-paper .row {
  display: flex; justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.thermal-paper .row.bold { font-weight: 800; color: var(--ink-900); font-size: 13px; }

/* === QR sticker mockup (single + grid of 3 for "QR per person") === */
.qr-sticker {
  background: #fff;
  border: 2px solid var(--ink-900);
  border-radius: 8px;
  padding: 16px 18px;
  text-align: center;
  width: 220px;
  margin: 14px auto;
  font-family: var(--font);
  box-shadow: 0 6px 14px rgba(15,23,42,.1);
}
.qr-sticker .qs-brand {
  font-family: var(--font-display); font-weight: 800;
  font-size: 16px; color: var(--ink-900);
  margin-bottom: 2px;
}
.qr-sticker .qs-table {
  background: var(--green-600); color: #fff;
  font-weight: 800; font-size: 14px;
  padding: 4px 12px; border-radius: 6px;
  display: inline-block; margin-bottom: 12px;
}
.qr-sticker .qs-grid {
  width: 140px; height: 140px; margin: 0 auto 10px;
  background:
    repeating-conic-gradient(var(--ink-900) 0% 25%, #fff 0% 50%) 0 0/14px 14px;
  border: 4px solid #fff;
  outline: 1px solid var(--ink-900);
}
.qr-sticker .qs-hint {
  font-size: 11px; color: var(--ink-500);
}
.qr-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 14px 0;
}
.qr-grid-3 .qr-sticker { width: auto; }
.qr-grid-3 .qr-sticker .qs-grid { width: 110px; height: 110px; }
.qr-grid-3 .qs-amount {
  font-family: var(--font-display); font-weight: 800;
  font-size: 16px; color: var(--green-700);
  margin-top: 6px;
}
@media (max-width: 700px) {
  .qr-grid-3 { grid-template-columns: 1fr; }
}

/* === 2-button receipt-type choice mockup === */
.choice-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 14px 0;
}
.choice-pair > a, .choice-pair > div {
  background: #fff; border: 2px solid var(--border-strong);
  border-radius: 14px; padding: 24px 20px;
  text-align: center; cursor: default;
  transition: border-color .15s;
}
.choice-pair > div:first-child { border-color: var(--green-500); background: var(--green-50); }
.choice-pair .ch-ico { font-size: 36px; margin-bottom: 8px; display: block; }
.choice-pair h5 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 16px; margin: 0 0 4px;
}
.choice-pair p { font-size: 12.5px; color: var(--ink-600); margin: 0; }
@media (max-width: 600px) { .choice-pair { grid-template-columns: 1fr; } }

/* === Support contact cards mockup === */
.support-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 14px 0;
}
.support-cards > div {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.support-cards .sc-ico {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--green-100); color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 4px;
}
.support-cards h5 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; margin: 0;
}
.support-cards small { font-size: 12px; color: var(--ink-500); }
.support-checklist {
  margin-top: 14px;
  background: var(--ink-50); border: 1px dashed var(--border-strong);
  border-radius: 10px; padding: 14px 18px;
  font-size: 13px; color: var(--ink-700);
}
.support-checklist h6 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--ink-900); margin: 0 0 6px;
}
.support-checklist ol { margin: 0; padding-left: 18px; }
@media (max-width: 700px) {
  .support-cards { grid-template-columns: 1fr; }
}

/* === Phone frame mockup — for customer/mobile flow visuals === */
.phone-frame {
  width: 340px;
  margin: 14px auto;
  background: #1f2937;
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 20px 40px rgba(15,23,42,.25);
  position: relative;
}
.phone-frame::before {
  content: ''; position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 16px;
  background: #0f172a; border-radius: 999px;
  z-index: 2;
}
.phone-frame .phone-screen {
  background: #fff;
  border-radius: 28px;
  padding: 46px 14px 14px;
  min-height: 540px;
  position: relative;
  overflow: hidden;
}
.phone-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin: 14px 0;
}
@media (max-width: 760px) { .phone-pair { grid-template-columns: 1fr; } .phone-pair .phone-frame { margin: 8px auto; } }
.phone-pair .phone-frame { margin: 0 auto; }

/* Customer menu mobile content */
.cm-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font); font-size: 13px;
  padding: 0 4px 8px; border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.cm-head .table-tag {
  background: var(--green-600); color: #fff; font-weight: 800;
  padding: 2px 8px; border-radius: 6px; font-size: 12px;
}
.cm-head .ico-row { display: flex; gap: 6px; }
.cm-head .ico-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--green-50); display: flex; align-items: center; justify-content: center;
  font-size: 14px; position: relative;
}
.cm-head .ico-btn .badge {
  position: absolute; top: -3px; right: -3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.cm-cats { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; font-family: var(--font); }
.cm-cats span {
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: var(--ink-50); color: var(--ink-600); white-space: nowrap;
}
.cm-cats span.active { background: var(--green-600); color: #fff; }
.cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cm-item {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; font-family: var(--font);
}
.cm-item .ph {
  height: 78px; border-radius: 8px;
  background: linear-gradient(135deg, var(--ink-100), var(--ink-200));
  margin-bottom: 6px;
}
.cm-item .name { font-size: 12px; font-weight: 600; color: var(--ink-900); }
.cm-item .price { font-size: 13px; font-weight: 800; color: var(--green-700); margin-top: 2px; }
.cm-bottom {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: var(--green-600); color: #fff;
  border-radius: 14px; padding: 10px 14px;
  font-family: var(--font); font-weight: 700; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
}

/* Add-to-cart / Call-staff sheets sit at the bottom of the phone */
.cm-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 18px 18px 0 0;
  padding: 18px 16px 14px;
  box-shadow: 0 -8px 22px rgba(15,23,42,.18);
  font-family: var(--font);
}
.cm-sheet .grab {
  width: 40px; height: 4px; background: var(--ink-300);
  border-radius: 999px; margin: 0 auto 10px;
}
.cm-sheet h6 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; margin: 0 0 6px;
}
.cm-sheet .row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin: 6px 0; }
.cm-sheet .qty {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 4px; font-weight: 700;
}
.cm-sheet .qty button {
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: var(--green-50); color: var(--green-700);
  font-weight: 800; font-size: 13px;
}
.cm-sheet .add-btn {
  width: 100%; margin-top: 8px;
  background: var(--green-600); color: #fff;
  border: 0; border-radius: 12px;
  padding: 10px; font-weight: 800;
  font-family: var(--font); font-size: 13px;
}
.cm-sheet .reasons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.cm-sheet .reasons > div {
  background: var(--ink-50); border-radius: 12px;
  padding: 12px 10px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--ink-800);
}
.cm-sheet .reasons > div .ic { font-size: 18px; display: block; margin-bottom: 4px; }

/* AI Chat bubble mockup (mobile) */
.ai-chat-body {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font); padding-bottom: 60px;
}
.ai-chat-body .bubble {
  max-width: 80%; padding: 8px 12px; border-radius: 14px;
  font-size: 12.5px; line-height: 1.45;
}
.ai-chat-body .bubble.user {
  align-self: flex-end; background: var(--green-600); color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-chat-body .bubble.bot {
  align-self: flex-start; background: var(--ink-50); color: var(--ink-800);
  border-bottom-left-radius: 4px;
}
.ai-chat-body .menu-card {
  align-self: flex-start;
  background: #fff; border: 1px solid var(--green-300); border-radius: 12px;
  padding: 8px; max-width: 80%;
  display: flex; gap: 8px; align-items: center;
}
.ai-chat-body .menu-card .thumb {
  width: 40px; height: 40px; border-radius: 8px;
  background: linear-gradient(135deg, var(--ink-100), var(--ink-200));
}
.ai-chat-body .menu-card strong { font-size: 12.5px; }
.ai-chat-body .menu-card .add { font-size: 11px; color: var(--green-700); font-weight: 800; }

/* Kitchen Card mockup */
.kitchen-card {
  background: #fff; border: 1px solid var(--border-strong);
  border-left: 4px solid #ef4444;
  border-radius: 12px; padding: 14px 16px;
  max-width: 380px; margin: 14px auto;
  font-family: var(--font);
  box-shadow: 0 4px 10px rgba(15,23,42,.08);
}
.kitchen-card .urgent-badge {
  display: inline-block; background: #ef4444; color: #fff;
  font-size: 10.5px; font-weight: 800; padding: 2px 8px;
  border-radius: 999px; margin-bottom: 6px;
}
.kitchen-card h5 {
  font-family: var(--font-display); font-size: 17px;
  font-weight: 800; color: var(--ink-900); margin: 0 0 4px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.kitchen-card .timer {
  font-size: 12px; color: #dc2626; font-weight: 800;
}
.kitchen-card .meta {
  font-size: 12px; color: var(--ink-500); margin-bottom: 8px;
}
.kitchen-card .mods {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
}
.kitchen-card .mods span {
  background: var(--ink-50); color: var(--ink-700);
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
}
.kitchen-card .note {
  background: #fef3c7; color: #92400e;
  font-size: 11.5px; padding: 6px 10px; border-radius: 6px;
  border-left: 3px solid #f59e0b; margin-bottom: 8px;
}
.kitchen-card .actions { display: flex; justify-content: space-between; align-items: center; }
.kitchen-card .action-btn {
  background: var(--green-600); color: #fff;
  border: 0; border-radius: 10px;
  padding: 8px 14px; font-weight: 800; font-size: 12px;
}
.kitchen-card .more { color: var(--ink-500); font-size: 18px; padding: 0 6px; }

/* Cancel modal (KDS) mockup */
.cancel-modal {
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: 14px; padding: 18px 20px;
  max-width: 380px; margin: 14px auto;
  font-family: var(--font);
  box-shadow: 0 12px 28px rgba(15,23,42,.18);
}
.cancel-modal h5 { font-family: var(--font-display); font-weight: 800; margin: 0 0 12px; font-size: 15px; }
.cancel-modal .reason {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 6px; font-size: 13px;
}
.cancel-modal .reason.active {
  border-color: #ef4444; background: #fee2e2; color: #991b1b; font-weight: 700;
}
.cancel-modal .reason .dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border-strong);
}
.cancel-modal .reason.active .dot {
  border-color: #dc2626; background: #fff;
  box-shadow: inset 0 0 0 3px #dc2626;
}
.cancel-modal label.check {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0; font-size: 12.5px; color: var(--ink-700);
}
.cancel-modal label.check input { accent-color: var(--green-600); }
.cancel-modal .modal-foot {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;
}
.cancel-modal .modal-foot button {
  border: 0; border-radius: 10px; padding: 8px 16px;
  font-weight: 800; font-size: 12px;
}
.cancel-modal .modal-foot .ghost { background: var(--ink-50); color: var(--ink-700); }
.cancel-modal .modal-foot .danger { background: #ef4444; color: #fff; }

/* "ใช้แต้ม" slider mockup (cashier) */
.points-card {
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: 14px; padding: 16px 20px;
  max-width: 460px; margin: 14px auto;
  font-family: var(--font);
  box-shadow: 0 4px 10px rgba(15,23,42,.08);
}
.points-card h5 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px; margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.points-card .balance {
  font-size: 12px; color: var(--ink-500); margin-bottom: 12px;
}
.points-card .balance strong { color: var(--green-700); font-size: 14px; }
.points-card .slider {
  height: 6px; background: var(--ink-100); border-radius: 999px;
  position: relative; margin: 16px 0 10px;
}
.points-card .slider .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 60%; background: var(--green-600);
  border-radius: 999px;
}
.points-card .slider .thumb {
  position: absolute; top: 50%; left: 60%;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--green-600);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(22,163,74,.3);
}
.points-card .slider-meta {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--ink-500);
}
.points-card .summary {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 13px; display: flex; justify-content: space-between;
}
.points-card .summary .discount { color: var(--green-700); font-weight: 800; font-size: 16px; }

/* Preview Diff (AI Setup) mockup */
.diff-view {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; max-width: 520px; margin: 14px auto;
  font-family: var(--font);
  overflow: hidden;
}
.diff-view .dv-head {
  background: var(--ink-50); padding: 10px 14px;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.diff-view .dv-head .dv-meta { font-weight: 500; color: var(--ink-500); font-size: 11.5px; }
.diff-view .dv-row {
  display: flex; gap: 10px; padding: 8px 14px;
  font-family: ui-monospace, monospace; font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.diff-view .dv-row.add { background: #f0fdf4; color: #065f46; }
.diff-view .dv-row.mod { background: #fffbeb; color: #78350f; }
.diff-view .dv-row.del { background: #fef2f2; color: #991b1b; }
.diff-view .dv-row .sign { font-weight: 800; flex-shrink: 0; }
.diff-view .dv-foot {
  padding: 10px 14px; display: flex; justify-content: flex-end; gap: 8px;
}
.diff-view .dv-foot button {
  border: 0; border-radius: 8px; padding: 7px 14px;
  font-family: var(--font); font-weight: 800; font-size: 12px;
}
.diff-view .dv-foot .confirm { background: var(--green-600); color: #fff; }
.diff-view .dv-foot .cancel  { background: var(--ink-50); color: var(--ink-700); }

/* AI Composer Processing mockup */
.ai-composer {
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: 14px; padding: 18px 20px;
  max-width: 460px; margin: 14px auto;
  font-family: var(--font);
  box-shadow: 0 4px 10px rgba(15,23,42,.08);
}
.ai-composer .ac-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.ai-composer .ac-head .spin {
  width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid var(--green-200);
  border-top-color: var(--green-600);
  animation: ac-spin 1s linear infinite;
}
@keyframes ac-spin { to { transform: rotate(360deg); } }
.ai-composer .ac-head h5 {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 14px;
}
.ai-composer .ac-said {
  background: var(--ink-50); padding: 8px 12px;
  border-radius: 10px; font-size: 12.5px; color: var(--ink-700);
  margin-bottom: 10px; font-style: italic;
}
.ai-composer .ac-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px dashed var(--border);
  font-size: 12.5px;
}
.ai-composer .ac-item .cf {
  font-size: 10.5px; padding: 1px 6px; border-radius: 999px;
  background: var(--green-100); color: var(--green-800); font-weight: 800;
}
.ai-composer .ac-item .cf.low { background: #fef3c7; color: #92400e; }
.ai-composer .ac-foot {
  margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end;
}
.ai-composer .ac-foot button {
  border: 0; border-radius: 10px; padding: 8px 14px;
  font-weight: 800; font-size: 12px;
}
.ai-composer .ac-foot .add-all { background: var(--green-600); color: #fff; }
.ai-composer .ac-foot .ghost   { background: var(--ink-50); color: var(--ink-700); }

/* === Manual shot — real or mockup image embedded in an article ===
   Three label flavours: actual UI, mockup/lifestyle, work-in-progress.
   .img-placeholder remains for "no image yet" sections. */
.manual-shot {
  margin: 16px 0 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.manual-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.manual-shot figcaption {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-700);
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.shot-label {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.shot-label.actual  { background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-200); }
.shot-label.mockup  { background: #fef3c7;        color: #92400e;         border: 1px solid #fde68a; }
.shot-label.todo    { background: #fee2e2;        color: #991b1b;         border: 1px solid #fecaca; }

/* Category cover image (hero) — sits below page-hero, above content */
.manual-cover {
  margin: 0 auto;
  max-width: var(--container);
  padding: 0 24px;
}
.manual-cover figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
  position: relative;
}
.manual-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
}
.manual-cover figcaption {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--ink-600);
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex; align-items: center; gap: 8px;
}

/* === Image placeholder === */
/* TODO/work-in-progress tone — amber, distinct from success-green callouts.
   Reasoning (guide5): placeholder is a TODO, not a success state, so it should
   feel different from tip-box/featured step and reduce overall green clutter. */
.img-placeholder {
  margin: 14px 0;
  border: 2px dashed #fcd34d;
  border-radius: 12px;
  padding: 22px;
  background: #fffbeb;
  display: flex; align-items: center; gap: 16px;
}
.img-ico {
  flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 12px;
  background: #fff; border: 1px solid #fde68a;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #b45309;
}
.img-cap {
  font-size: 13.5px; color: #78350f; font-weight: 700;
  line-height: 1.55;
}
.img-cap small {
  display: block; color: #92400e; font-weight: 400;
  margin-top: 3px; font-size: 12.5px;
}

/* === Callouts === */
.tip-box, .warn-box, .note-box {
  margin: 12px 0; padding: 12px 16px;
  border-radius: 10px; font-size: 14px;
  border-left: 4px solid;
}
.tip-box  { background: var(--green-50); border-color: var(--green-500); color: var(--green-900); }
.warn-box { background: #fff7ed;        border-color: #f97316;         color: #7c2d12; }
.note-box { background: var(--ink-50);  border-color: var(--ink-400);  color: var(--ink-700); }
.tip-box strong  { color: var(--green-800); }
.warn-box strong { color: #9a3412; }
.note-box strong { color: var(--ink-900); }

/* === Tables === */
.key-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.key-table th, .key-table td {
  padding: 8px 12px; border: 1px solid var(--border); text-align: left;
}
.key-table th {
  background: var(--green-50); color: var(--green-800);
  font-weight: 700; font-size: 13px;
}
.key-table tbody tr:nth-child(odd) td { background: #fafcfb; }

/* Calculation example table (used in VAT article) */
.calc-table {
  width: 100%; border-collapse: collapse; margin: 8px 0 14px;
  font-size: 14px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.calc-table th, .calc-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.calc-table th { background: var(--green-50); color: var(--green-800); font-weight: 700; font-size: 13px; }
.calc-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-900); }
.calc-table tfoot td { background: var(--green-50); font-weight: 800; color: var(--green-900); font-size: 15px; border-bottom: 0; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 12px; }
.calc-grid > .calc-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px;
}
.calc-grid > .calc-card h4 {
  font-size: 15px; margin: 0 0 6px; color: var(--green-800);
  display: flex; align-items: center; gap: 8px;
}
.calc-grid > .calc-card .calc-card-intro {
  font-size: 13px; color: var(--ink-600); margin: 0 0 8px;
}
.calc-grid > .calc-card .calc-card-foot {
  font-size: 12.5px; color: var(--ink-500); margin: 0;
}
.calc-intro {
  color: var(--ink-600); font-size: 14px; margin: 0 0 10px;
}
.u-mt-8 { margin-top: 8px; }
.calc-grid > .calc-card h4 .badge {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--green-100); color: var(--green-800); font-weight: 700;
}
@media (max-width: 760px) { .calc-grid { grid-template-columns: 1fr; } }

/* === FAQ === */
.manual-faq { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.manual-faq details {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.manual-faq details[open] { border-color: var(--green-300); box-shadow: var(--shadow-sm); }
.manual-faq summary {
  cursor: pointer; list-style: none;
  padding: 12px 44px 12px 16px;
  position: relative;
  font-weight: 600; color: var(--ink-900); font-size: 14.5px;
}
.manual-faq summary::-webkit-details-marker { display: none; }
.manual-faq summary::after {
  content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: var(--green-600); font-weight: 400;
  transition: transform .2s;
}
.manual-faq details[open] summary::after { content: '−'; }
.manual-faq .faq-body { padding: 0 16px 14px; color: var(--ink-700); font-size: 14px; }

/* === Previous / Next pager === */
.manual-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 28px;
}
.manual-pager a {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 4px;
  transition: all .15s;
}
.manual-pager a:hover { border-color: var(--green-400); transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.manual-pager .pg-label { font-size: 12px; color: var(--ink-500); font-weight: 600; letter-spacing: .03em; }
.manual-pager .pg-title { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.manual-pager .pg-next { text-align: right; }
@media (max-width: 700px) { .manual-pager { grid-template-columns: 1fr; } }

/* === TOC sticky (per-category page) === */
.manual-toc a.toc-sub {
  padding: 5px 10px 5px 22px;
  font-size: 13px; font-weight: 500; color: var(--ink-600);
}
.manual-toc a.toc-sub::before { content: '›'; margin-right: 6px; color: var(--ink-400); }
.manual-toc a.toc-grp {
  margin-top: 8px;
  background: var(--green-50); color: var(--green-800);
  font-size: 13.5px; font-weight: 700;
}
.manual-toc a.toc-grp:first-of-type { margin-top: 0; }
.manual-toc .toc-back {
  display: block; margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
  font-size: 13px; color: var(--green-700); font-weight: 700;
}
.manual-toc .toc-back:hover { color: var(--green-800); }
.manual-page .manual-group:first-of-type { border-top: 0; padding-top: 0; }

/* ====================================================================== */
/* INDEX PAGE (manual.html — landing)                                     */
/* ====================================================================== */

/* === Search bar (decorative — front-end filter only) === */
.manual-search {
  margin: 28px auto 0;
  max-width: 620px;
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: 999px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 18px;
}
.manual-search .s-ico { color: var(--ink-400); font-size: 18px; flex-shrink: 0; }
.manual-search input {
  flex: 1; padding: 10px 4px; border: 0; outline: none;
  font: inherit; font-size: 15px; color: var(--ink-800); background: transparent;
}
.manual-search input::placeholder { color: var(--ink-400); }
.manual-search .btn { padding: 9px 18px; }

/* Filter chips on index page */
.manual-filter-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 18px auto 0; max-width: 720px;
}
.manual-filter-chips .chip {
  padding: 5px 14px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border-strong);
  font-size: 13px; font-weight: 600; color: var(--ink-700);
  cursor: pointer;
}
.manual-filter-chips .chip:hover { background: var(--green-50); color: var(--green-700); border-color: var(--green-300); }
.manual-filter-chips .chip.active { background: var(--green-600); color: #fff; border-color: var(--green-700); }

/* === Quick-start category cards === */
.quickstart-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin: 0;
}
.qs-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px; transition: all .2s ease;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.qs-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, var(--green-50), transparent 60%);
  opacity: 0; transition: opacity .25s;
}
.qs-card:hover { border-color: var(--green-300); transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }
.qs-card:hover::before { opacity: 1; }
.qs-card > * { position: relative; }
.qs-num {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--green-500), var(--accent-emerald));
  color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 6px 14px rgba(22,163,74,.25);
}
.qs-card h3 { font-size: 19px; margin: 0 0 6px; }
.qs-card p { font-size: 14.5px; color: var(--ink-600); margin: 0 0 14px; }
.qs-card ul { list-style: none; padding: 0; margin: 0 0 16px; }
.qs-card ul li { padding: 4px 0 4px 18px; font-size: 13.5px; color: var(--ink-600); position: relative; }
.qs-card ul li::before {
  content: '›'; position: absolute; left: 0; top: 4px; color: var(--green-500); font-weight: 700;
}
.qs-card .qs-cta {
  margin-top: auto; padding-top: 10px;
  color: var(--green-700); font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.qs-card:hover .qs-cta { color: var(--green-800); }
@media (max-width: 980px) { .quickstart-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .quickstart-grid { grid-template-columns: 1fr; } }

/* === Utility classes (replace inline style) === */
.u-mt-6  { margin-top: 6px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-40 { margin-top: 40px; }
.u-muted { color: var(--ink-500); font-size: 12.5px; }
.u-sub   { color: var(--ink-600); font-size: 13px; margin: 0 0 8px; }

/* === Status-color legend (used in table state docs) === */
.st-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 2px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(15,23,42,.06);
}
.st-empty   { background: #94a3b8; }
.st-serving { background: #22c55e; }
.st-waiting { background: #f97316; }
.st-bill    { background: #a78bfa; }
.st-partial { background: #eab308; }
.st-clean   { background: #ef4444; }

/* === Empty state (when search/filter returns no result) === */
.manual-empty {
  display: none;
  text-align: center;
  padding: 36px 24px;
  background: #fff;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  margin-top: 12px;
}
.manual-empty .em-ico {
  font-size: 28px;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--ink-50);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.manual-empty h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--ink-900);
}
.manual-empty p {
  margin: 0;
  color: var(--ink-600);
  font-size: 14px;
}
.manual-empty button {
  margin-top: 14px;
}

/* === Note about screenshots === */
.manual-note {
  font-size: 13px;
  color: var(--ink-500);
  text-align: center;
  margin: 14px auto 0;
  max-width: 640px;
  padding: 8px 14px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.6);
}
.manual-note strong { color: var(--ink-700); }

/* === Last-updated badge on category pages === */
.manual-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--ink-50);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--ink-600);
}
.manual-updated::before {
  content: '🗓';
}
.manual-updated strong {
  color: var(--ink-800);
}

/* Auto-label every img-placeholder with a "PLACEHOLDER" tag */
.img-placeholder .img-cap::before {
  content: 'placeholder';
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  margin-right: 8px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* === "เริ่มจากตรงไหนดี" — role-based starter strip === */
.start-here-section {
  margin-top: 40px;
  padding: 26px;
  background: linear-gradient(135deg, #fff, var(--green-50));
  border: 1px solid var(--green-200);
  border-radius: var(--radius-lg);
}
.start-here-section h2 {
  font-size: 22px; margin: 0 0 6px;
  display: flex; align-items: center; gap: 10px;
}
.start-here-section h2::before {
  content: '🧭';
  font-size: 22px;
}
.start-here-section > p.lead {
  margin: 0 0 18px;
  color: var(--ink-600);
  font-size: 14.5px;
}
.start-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.start-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
}
.start-card .sc-role {
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  color: var(--green-800);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.start-card .sc-role .sc-ico {
  width: 24px; height: 24px; border-radius: 8px;
  background: var(--green-100); color: var(--green-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.start-card .sc-path {
  color: var(--ink-700); font-size: 14px; line-height: 1.6;
}
.start-card .sc-path a { color: var(--green-700); font-weight: 600; }
.start-card .sc-path a:hover { color: var(--green-800); }
.start-card .sc-path .sep { color: var(--ink-400); margin: 0 4px; }
@media (max-width: 700px) { .start-grid { grid-template-columns: 1fr; } }

/* === Disclaimer box (used in tax-related articles) === */
.disclaimer-box {
  margin: 14px 0 4px;
  padding: 12px 16px 12px 44px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 13px;
  color: #78350f;
  position: relative;
  line-height: 1.6;
}
.disclaimer-box::before {
  content: 'ℹ';
  position: absolute; left: 14px; top: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #f59e0b; color: #fff;
  font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.disclaimer-box strong { color: #92400e; }

/* ====================================================================== */
/* UI MOCKUP — rendered approximation of real OrderDee screens            */
/* Used inside articles in place of image placeholders                    */
/* ====================================================================== */
.ui-mockup {
  margin: 16px 0 4px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ui-mockup-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--ink-50);
  border-bottom: 1px solid var(--border);
}
.ui-dot {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block;
}
.ui-dot.red    { background: #ff5f57; }
.ui-dot.yellow { background: #febc2e; }
.ui-dot.green  { background: #28c840; }
.ui-mockup-url {
  margin-left: 12px;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-500);
  font-family: ui-monospace, "Consolas", monospace;
}
.ui-mockup-cap {
  font-size: 11.5px;
  color: var(--green-700);
  font-weight: 700;
  margin-left: auto;
  padding: 3px 10px;
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: 999px;
}

/* Modal frame inside mockup */
.ui-modal {
  background: #fff;
  display: flex;
  flex-direction: column;
}
.ui-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.ui-modal-head h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-900);
}
.ui-close {
  background: transparent; border: 0;
  width: 30px; height: 30px; border-radius: 8px;
  cursor: default;
  color: var(--ink-500);
  font-size: 14px;
}

/* Tabs */
.ui-tabs {
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  gap: 4px;
  overflow-x: auto;
}
.ui-tab {
  background: transparent; border: 0;
  padding: 12px 14px;
  font: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--ink-400);
  cursor: default;
  position: relative;
  white-space: nowrap;
}
.ui-tab.active {
  color: var(--green-700);
}
.ui-tab.active::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 3px;
  background: var(--green-600);
  border-radius: 3px 3px 0 0;
}

/* Body */
.ui-modal-body {
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.ui-label    { font-size: 13.5px; font-weight: 700; color: var(--ink-900); display: block; margin: 0 0 6px; }
.ui-label-sm { font-size: 12.5px; font-weight: 700; color: var(--ink-700); display: block; margin: 0 0 6px; }
.ui-helper   { font-size: 11.5px; color: var(--ink-500); display: block; margin: 4px 0 0; line-height: 1.4; }

/* Input with suffix */
.ui-input-row {
  display: flex; align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  max-width: 200px;
}
.ui-input-row input {
  border: 0; outline: 0;
  padding: 9px 12px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink-900);
  width: 100%;
  background: transparent;
}
.ui-input-suffix {
  padding: 9px 14px;
  font-size: 14px; font-weight: 700; color: var(--ink-500);
  background: var(--ink-50);
  border-left: 1px solid var(--border);
}
.ui-input-row.disabled {
  background: var(--bg-alt); opacity: .55;
}

/* Radio card */
.ui-radio-stack { display: flex; flex-direction: column; gap: 8px; }
.ui-radio-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  cursor: default;
}
.ui-radio-card.active {
  border-color: var(--green-500);
  background: var(--green-50);
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}
.ui-radio-card .ui-radio-dot {
  flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-strong);
  margin-top: 2px;
  position: relative;
  background: #fff;
}
.ui-radio-card.active .ui-radio-dot {
  border-color: var(--green-600);
}
.ui-radio-card.active .ui-radio-dot::after {
  content: ''; position: absolute;
  inset: 3px; border-radius: 50%;
  background: var(--green-600);
}
.ui-radio-card strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-900);
}

/* Toggle */
.ui-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.ui-toggle {
  width: 44px; height: 24px;
  border-radius: 999px;
  background: var(--ink-300);
  position: relative;
  flex-shrink: 0;
  transition: background .15s;
}
.ui-toggle::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: transform .15s;
}
.ui-toggle.on { background: var(--green-600); }
.ui-toggle.on::after { transform: translateX(20px); }

/* Divider inside modal body */
.ui-divider { border-top: 1px solid var(--border); margin: 6px 0; }

/* Rounding 2-col grid */
.ui-rounding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.ui-radio-card.sm { padding: 10px 12px; gap: 10px; }
.ui-radio-card.sm strong { font-size: 13px; }

/* Footer */
.ui-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.ui-btn {
  padding: 8px 18px; border-radius: 10px;
  font: inherit; font-size: 13.5px; font-weight: 700;
  border: 1px solid var(--border-strong);
  cursor: default;
}
.ui-btn-ghost   { background: #fff;          color: var(--ink-700); }
.ui-btn-primary {
  background: linear-gradient(180deg, var(--green-500), var(--green-600));
  color: #fff;
  border-color: var(--green-700);
  box-shadow: 0 2px 6px rgba(22,163,74,.25);
}

/* Callout number chip — placed near labeled UI element, matches step number in article */
.cb-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800; font-size: 12px;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(239,68,68,.18), 0 3px 8px rgba(220,38,38,.35);
  animation: cb-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes cb-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(239,68,68,.18), 0 3px 8px rgba(220,38,38,.35);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(239,68,68,.05), 0 4px 12px rgba(220,38,38,.4);
  }
}
/* Smaller chip variants for tight spaces */
.ui-tab .cb-num,
.ui-btn .cb-num {
  width: 20px; height: 20px;
  font-size: 11px;
  margin-right: 6px;
}
/* Arrow connector — for callout that points to an inline element next to it */
.cb-arrow {
  display: inline-block;
  color: #dc2626;
  font-weight: 800;
  margin-left: 4px;
  margin-right: 6px;
  font-size: 14px;
  vertical-align: middle;
  animation: cb-arrow-bounce 1.4s ease-in-out infinite;
}
@keyframes cb-arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* Legend hint above mockup — explains numbers */
.mockup-hint {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 -4px;
  padding: 8px 14px;
  background: #fef2f2;
  border: 1px dashed #fecaca;
  border-radius: 10px;
  font-size: 13px;
  color: #7f1d1d;
}
.mockup-hint strong { color: #991b1b; }
.mockup-hint .cb-num { animation: none; box-shadow: none; }

/* Mobile-friendly mockup */
@media (max-width: 700px) {
  .ui-rounding-grid { grid-template-columns: 1fr; }
  .ui-tabs { padding: 0 12px; }
  .ui-modal-body { padding: 14px; }
}

/* === Popular article cards === */
.popular-section { margin-top: 56px; padding-top: 40px; border-top: 1px dashed var(--border-strong); }
.popular-section h2 { font-size: 26px; margin-bottom: 22px; text-align: center; }
.popular-section .lead { text-align: center; color: var(--ink-600); margin: -12px auto 28px; max-width: 560px; }
.popular-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.pop-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 6px;
  transition: all .15s;
}
.pop-card:hover { border-color: var(--green-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: inherit; }
.pop-card .pop-cat {
  font-size: 11.5px; color: var(--green-700); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.pop-card h4 { font-size: 16px; margin: 0; color: var(--ink-900); }
.pop-card p { font-size: 13.5px; color: var(--ink-500); margin: 0; }
@media (max-width: 880px) { .popular-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .popular-grid { grid-template-columns: 1fr; } }