/* Page-specific styles on top of tokens.css + components.css. */

/* ---------- Dashboard / onboarding ---------- */
/* Dashboard: one full-width row per branch (summary | its widgets) — 1–2 branches use the width instead of leaving it empty. */
.product-locations { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.location-card { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.location-summary { min-width: 0; }
.location-widgets { min-width: 0; border-left: 1px solid var(--color-border); padding-left: var(--space-6); }
.location-widgets-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.location-widgets-head h3 { margin: 0; font-size: 1.05rem; }
.location-widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); }
.location-widget-grid .product-widget { margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted, #f7faf8); }
@media (max-width: 900px) { .location-card { grid-template-columns: minmax(0, 1fr); } .location-widgets { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-4); } }
.product-locations > .card { margin: 0; }
.product-stats { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-4) 0; }
.product-stats dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.product-stats dd { margin: 4px 0 0; font-size: 1.6rem; font-weight: 750; }
.product-widget { border-top: 1px solid var(--color-border); margin-top: var(--space-5); padding-top: var(--space-4); overflow-wrap: anywhere; }
.product-widget > strong { margin-right: var(--space-2); }
.product-widget details { margin-top: var(--space-3); }
.product-widget details .code { margin-top: var(--space-2); }
.product-progress { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.product-progress li { padding: 8px 12px; background: #eef3f0; border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--text-sm); }
.product-spinner { padding-left: var(--space-4); border-left: 3px solid var(--color-primary); color: var(--color-text-muted); }
.product-auth { margin: var(--space-6) auto 0; }
.product-auth h1 { margin-top: var(--space-2); }
.shop-list { list-style: none; padding: 0; margin: var(--space-5) 0; display: grid; gap: var(--space-3); }
.shop-list li { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); display: grid; gap: var(--space-3); }
.shop-list strong { font-size: var(--text-lg); overflow-wrap: anywhere; }
.shop-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.product-signout { margin-top: var(--space-6); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }

/* ---------- Google connection flow ---------- */
.google-page-heading { margin-bottom: var(--space-6); }
.google-page-heading h1 { margin-bottom: var(--space-2); }
.google-page-heading > p:last-child, .google-muted { color: var(--color-text-muted); font-size: var(--text-sm); }
.google-page-heading + .card h2 { margin-bottom: var(--space-3); }
.google-benefits { padding-left: 22px; margin: var(--space-4) 0; display: grid; gap: var(--space-2); }
.google-details { border-top: 1px solid var(--color-border); margin-top: var(--space-5); padding-top: var(--space-4); }
.google-details p, .google-danger p { font-size: var(--text-sm); color: var(--color-text-muted); }
.google-danger { box-shadow: none; border-color: var(--color-danger-border); }
.google-danger summary { color: var(--color-danger); }
.google-actions { justify-content: flex-end; margin-top: var(--space-6); }
.google-list-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.google-list-heading h2 { margin: 0; }
.google-location-list { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
.google-location-card { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.google-location-card:hover { background: var(--color-surface-muted); border-color: var(--color-border-strong); }
.google-location-card:has(input:checked) { background: var(--color-success-bg); border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.google-location-card:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.google-location-card input { flex: 0 0 20px; margin-top: 3px; }
.google-location-card.is-disabled { background: #f5f6f5; cursor: default; }
.google-location-content, .google-location-meta { display: grid; gap: 4px; min-width: 0; }
.google-location-name { overflow-wrap: anywhere; }
.google-location-address { color: var(--color-text-muted); font-size: var(--text-sm); }
.google-location-account { color: var(--color-text-subtle); font-size: var(--text-xs); }
.google-location-unavailable { color: var(--color-warning-text); font-size: var(--text-xs); }
.google-selection-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.google-selection-footer .google-muted { margin: 0; max-width: 360px; }
.google-confirm-name { font-size: var(--text-xl) !important; margin: var(--space-3) 0 !important; overflow-wrap: anywhere; }
.google-sync-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-5) 0; }
.google-sync-grid > div { background: var(--color-surface-muted); border-radius: var(--radius-sm); padding: var(--space-4); }
.google-sync-grid dt { color: var(--color-text-muted); font-size: var(--text-xs); }
.google-sync-grid dd { margin: 4px 0 0; font-size: var(--text-lg); font-weight: 700; }
.google-helper { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-5) 0; }
@media (max-width: 600px) {
  .google-selection-footer { flex-direction: column; align-items: stretch; }
  .google-selection-footer .google-muted { max-width: none; }
  .google-actions { flex-direction: column-reverse; align-items: stretch; }
  .google-actions .btn, .google-actions form, .google-actions form .btn, .google-selection-footer .btn, .empty > .btn { width: 100%; }
}

/* ---------- Widget templates / editor ---------- */
.widget-template-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-4); }
.widget-template-list .card { margin: 0; }
.widget-new-location { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--color-success-bg); border: 1px solid var(--color-success-border); border-radius: var(--radius-md); text-decoration: none; overflow-wrap: anywhere; }
/* Editor: full-width page, settings 4 : preview 8; the preview stays in view while settings scroll. */
.ui-main.is-full { width: 100%; }
.widget-editor-grid { display: grid; grid-template-columns: minmax(320px, 4fr) minmax(0, 8fr); gap: var(--space-5); align-items: start; }
.widget-editor-grid > .card { margin: 0; }
.widget-editor-form { display: grid; gap: var(--space-4); }
.widget-editor-form label { display: grid; gap: 6px; font-weight: 600; font-size: var(--text-sm); min-width: 0; }
.widget-editor-form small { font-weight: 400; color: var(--color-text-muted); }
.widget-editor-form fieldset { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.widget-editor-form .widget-checkbox { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; }
.widget-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.preset-grid legend { font-weight: 600; margin-bottom: var(--space-2); padding: 0; }
.preset-grid legend small { display: block; font-weight: 400; color: var(--color-text-muted); }
.widget-editor-form .preset-option { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-weight: 400; cursor: pointer; }
.preset-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.preset-option svg { flex: 0 0 auto; }
.preset-option span { font-size: .875rem; line-height: 1.3; }
.preset-option:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.preset-option:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.preset-grid .btn { grid-column: 1 / -1; justify-self: start; }
.widget-editor-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.widget-sample-notice { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); color: var(--color-warning-text); padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.widget-preview { position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow: auto; }
.widget-editor-form { display: grid; gap: var(--space-4); }
/* The floating badge stays inside the preview card instead of covering the editor. */
.widget-preview .pdstudio-review-widget.pdstudio-floating { position: relative; inset: auto; min-height: 520px; justify-content: flex-end; max-width: 100%; }
.widget-preview .pdstudio-review-widget.pdstudio-floating-left { align-items: flex-start; }
.widget-preview .pdstudio-review-widget.pdstudio-popup { position: relative; inset: auto; width: auto; max-width: 340px; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; }
.widget-preview .pdstudio-review-widget.pdstudio-popup.pdstudio-floating-right { margin-left: auto; }
.widget-unpublish { margin-top: var(--space-6); border-top: 1px solid var(--color-danger-border); padding-top: var(--space-4); }
.widget-unpublish summary { color: var(--color-danger); }
@media (max-width: 850px) { .widget-editor-grid { grid-template-columns: minmax(0, 1fr); } .widget-preview { position: static; max-height: none; overflow: visible; } }
@media (max-width: 600px) { .widget-editor-actions .btn { width: 100%; } }

/* ---------- Places and reviews (legacy page, merged into dashboard in phase 3) ---------- */
.review-setup, .review-location, .review-manual { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); margin: 0 0 var(--space-5); box-shadow: var(--shadow-md); min-width: 0; }
.review-setup { background: var(--color-surface-muted); border-color: var(--color-success-border); }
@media (max-width: 600px) { .review-setup, .review-location, .review-manual { padding: var(--space-5) var(--space-4); } }
.review-setup ol { padding-left: 1.4rem; }
.review-connected { border-left: 4px solid var(--color-primary); padding-left: var(--space-3); }
.review-help { color: var(--color-text-muted); font-size: var(--text-sm); }
.review-location-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.review-location-head h3 { margin: 0; }
.review-location-head span { font-size: var(--text-xs); font-weight: 700; color: var(--color-primary-ink); background: var(--color-primary-soft); border-radius: var(--radius-pill); padding: 3px 9px; white-space: nowrap; }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: var(--space-4) 0; }
.review-actions form, .review-form { margin: 0; }
.review-form { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.review-form label { display: grid; gap: 6px; font-weight: 600; font-size: var(--text-sm); }
.review-form button, .review-actions button { width: max-content; min-height: var(--tap); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); padding: 8px 16px; font: inherit; font-weight: 650; cursor: pointer; }
.review-form button { color: #fff; background: var(--color-primary); }
.review-actions button { color: var(--color-primary-ink); background: var(--color-surface); }
.review-primary { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff !important; font-weight: 700; text-decoration: none; }
.review-primary:hover { background: var(--color-primary-hover); }
.review-edit, .review-widget-guide { border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: var(--space-5); }
.review-widget-steps { padding-left: 24px; margin: var(--space-4) 0 var(--space-5); display: grid; gap: var(--space-3); }
.review-widget-steps li > strong { display: block; }
.review-widget-steps li > span { display: block; color: var(--color-text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.review-widget-label { display: block; font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-2); }
.review-widget-troubleshooting { margin-top: var(--space-4); font-size: var(--text-sm); }
.review-widget-troubleshooting ul { color: var(--color-text-muted); padding-left: 22px; }

/* ---------- Widget editor (phase 3) ---------- */
.page-head .badge { margin-top: var(--space-2); }
.editor-section { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.editor-section > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); padding: var(--space-2) var(--space-4); font-weight: 700; }
.editor-section > summary::-webkit-details-marker { display: none; }
.editor-section > summary::after { content: "▾"; color: var(--color-text-muted); transition: transform .15s; }
.editor-section:not([open]) > summary::after { transform: rotate(-90deg); }
.editor-section-body { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.editor-section fieldset { border: 0; padding: 0; }
.origin-preview { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.origin-preview:empty { display: none; }
.dirty-indicator { margin: 0; font-size: var(--text-sm); font-weight: 650; color: var(--color-warning-text); }
.editor-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); padding: var(--space-1); margin-bottom: var(--space-4); background: #e6eeea; border-radius: var(--radius-md); position: sticky; top: 0; z-index: 2; }
.editor-tabs button { min-height: var(--tap); border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-weight: 700; color: var(--color-text-muted); cursor: pointer; }
.editor-tabs button[aria-selected="true"] { background: var(--color-surface); color: var(--color-primary-ink); box-shadow: var(--shadow-sm); }
.widget-editor-grid.has-tabs[data-editor-view="settings"] .editor-preview,
.widget-editor-grid.has-tabs[data-editor-view="preview"] .editor-settings { display: none; }
.install-guides { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.install-guides details { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); }
.install-guides details[open] { background: var(--color-surface-muted); }
.install-guides p { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
@media (max-width: 850px) {
  .widget-editor-actions { position: sticky; bottom: 0; z-index: 2; margin: 0 calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4); background: var(--color-surface); box-shadow: 0 -6px 16px #1847370f; }
}

/* ---------- Dashboard to-do (phase 3) ---------- */
.todo { margin: 0 0 var(--space-6); }
.todo h2 { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.todo-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-info-border); background: var(--color-info-bg); color: var(--color-info-text); border-radius: var(--radius-md); }
.todo-list li span { min-width: 0; overflow-wrap: anywhere; }
.todo-list a { font-weight: 700; }
.card-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); font-size: var(--text-sm); }
.install-status { font-size: var(--text-xs); color: var(--color-text-muted); }
.install-status.is-live { color: var(--color-success-text); }
.card .btn-row + h3 { margin-top: var(--space-6); }
/* B2: public nav, pricing and plan pages */
.public-nav { display: flex; gap: var(--space-4); margin-left: auto; }
.public-nav a { color: inherit; font-weight: 600; text-decoration: none; padding: 10px 4px; }
.public-nav a:hover, .public-nav a:focus-visible { text-decoration: underline; }
.ui-public .ui-main.is-wide, .ui-public .ui-header-inner.is-wide { width: min(var(--content), 100%); }
.pricing-head { text-align: center; max-width: 720px; margin-inline: auto; } .pricing-head .eyebrow { text-align: center; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.price-card { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.price-card.is-featured { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.price-card .btn { margin-top: auto; }
.price { margin: 0; } .price strong { font-size: 2rem; line-height: 1.2; } .price span { color: var(--color-text-muted); margin-left: 2px; }
.compare-table th[scope=row] { font-weight: 500; text-align: left; } .compare-table th[scope=row] small { display: block; color: var(--color-text-muted); font-weight: 400; }
.compare-table td { text-align: center; }
.faq details { border-top: 1px solid var(--color-border); padding: var(--space-3) 0; } .faq summary { cursor: pointer; font-weight: 600; } .faq p { margin: var(--space-2) 0 0; }
.plan-usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.plan-usage div { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .plan-usage dt { color: var(--color-text-muted); font-size: .875rem; } .plan-usage dd { margin: 4px 0 0; font-weight: 700; }
.plan-features { margin: 0; padding-left: 1.2em; line-height: 1.9; }
@media (max-width: 760px) { .pricing-grid, .plan-usage { grid-template-columns: 1fr; } }
/* P1-R: review inbox */
.star-bars { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 6px; max-width: 480px; }
.star-bars li { display: grid; grid-template-columns: 52px 1fr 36px; align-items: center; gap: var(--space-2); }
.star-bars a { min-height: 32px; display: inline-flex; align-items: center; }
.star-bars progress { width: 100%; height: 10px; accent-color: var(--color-primary); }
.star-bars span { text-align: right; color: var(--color-text-muted); }
.inbox-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); align-items: end; margin: var(--space-4) 0; }
.inbox-filters .inbox-search { grid-column: span 2; } .inbox-filters .btn-row { grid-column: 1 / -1; }
.inbox-count { font-size: 1.05rem; margin: var(--space-4) 0 var(--space-3); }
.inbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.inbox-item.is-low { border-left: 4px solid var(--color-warning, #b45309); }
.inbox-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.inbox-stars { color: #b8860b; letter-spacing: 1px; } .inbox-stars-off { color: var(--color-border-strong); }
.inbox-meta time { color: var(--color-text-muted); font-size: .875rem; }
.inbox-text { margin: var(--space-2) 0; white-space: normal; overflow-wrap: anywhere; }
.pager { display: flex; align-items: center; gap: var(--space-3); justify-content: center; margin: var(--space-4) 0; }
@media (max-width: 600px) { .inbox-filters .inbox-search { grid-column: auto; } }
/* B3: invoice payment and printable receipt */
.pay-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; }
.qr-box { text-align: center; } .qr-svg { display: inline-block; } .qr-box svg { display: block; width: 240px; height: 240px; max-width: 100%; margin: 0 auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.pay-details { display: grid; gap: var(--space-2); margin: 0; } .pay-details div { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-2); } .pay-details dt { color: var(--color-text-muted); } .pay-details dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pay-steps { line-height: 1.9; }
.receipt-actions { margin-bottom: var(--space-4); }
.receipt { background: #fff; color: #111; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 32px; max-width: 800px; margin: 0 auto; }
.receipt-head { display: flex; justify-content: space-between; gap: var(--space-5); border-bottom: 2px solid #111; padding-bottom: var(--space-4); }
.receipt-head p { margin: 4px 0 0; } .receipt-issuer { font-size: 1.15rem; } .receipt-title { text-align: right; } .receipt-title h1 { margin: 0; font-size: 1.5rem; }
.receipt-party { display: flex; justify-content: space-between; gap: var(--space-5); margin: var(--space-4) 0; }
.receipt-table { width: 100%; border-collapse: collapse; } .receipt-table th, .receipt-table td { border-bottom: 1px solid #ccc; padding: 10px 8px; text-align: left; } .receipt-table td:last-child, .receipt-table th:last-child { text-align: right; white-space: nowrap; }
.receipt-table tfoot th, .receipt-table tfoot td { font-weight: 700; border-bottom: 2px solid #111; }
.receipt-meta { font-size: .85rem; color: #444; margin: var(--space-3) 0 0; }
@media (max-width: 640px) { .pay-grid { grid-template-columns: 1fr; } .pay-details div { grid-template-columns: 1fr; } .receipt { padding: 18px; } .receipt-head, .receipt-party { flex-direction: column; } .receipt-title { text-align: left; } }
@media print { .ui-header, .ui-footer, .skip-link, .no-print { display: none !important; } body.ui { background: #fff; } .ui-main { padding: 0; width: 100%; } .receipt { border: 0; padding: 0; max-width: none; } }
/* Wide-screen layouts that use the width for 1–2 branches */
.page-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: var(--space-5); align-items: start; }
.page-split-main, .page-split-side { display: grid; gap: var(--space-5); min-width: 0; }
.page-split .card { margin: 0; }
.page-split-main .plan-features { columns: 2 280px; column-gap: var(--space-6); }
.page-split-main .plan-features li { break-inside: avoid; }
.inbox-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.inbox-side { position: sticky; top: var(--space-4); display: grid; gap: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow: auto; }
.inbox-side .card, .inbox-side .inbox-filters { margin: 0; }
.inbox-side .plan-usage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inbox-side .plan-usage div { padding: var(--space-2); }
.inbox-side .inbox-filters { grid-template-columns: 1fr 1fr; }
.inbox-side .inbox-filters .inbox-search { grid-column: 1 / -1; }
.inbox-main .inbox-count { margin-top: 0; }
.inbox-main .inbox-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.inbox-reply { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-primary); background: var(--color-surface-muted, var(--color-primary-soft)); border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0; }
.inbox-reply p { margin: 0; overflow-wrap: anywhere; } .inbox-reply .inbox-reply-head { font-size: .875rem; color: var(--color-text-muted); margin-bottom: 4px; }
.inbox-reply-form { margin-top: var(--space-3); } .inbox-reply-form summary { cursor: pointer; color: var(--color-primary); font-weight: 600; }
.inbox-reply-form form { display: grid; gap: var(--space-2); margin-top: var(--space-2); } .inbox-reply-form textarea { width: 100%; resize: vertical; }
.inbox-reply-form .btn-row { margin: 0; }
.widget-new-tile { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; min-height: 160px; border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-5); text-decoration: none; color: inherit; background: transparent; }
.widget-new-tile:hover, .widget-new-tile:focus-visible { border-color: var(--color-primary); background: var(--color-primary-soft); }
.widget-new-plus { font-size: 1.6rem; line-height: 1; color: var(--color-primary); font-weight: 700; }
@media (max-width: 1000px) { .page-split, .inbox-layout { grid-template-columns: minmax(0, 1fr); } .inbox-side { position: static; max-height: none; overflow: visible; } }
.widget-delete { margin-top: var(--space-4); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.widget-delete summary { cursor: pointer; color: var(--color-danger, #b3402f); font-weight: 600; }
.widget-delete form { margin-top: var(--space-2); }
/* Invoice (ใบเรียกเก็บเงิน): centred payment page; QR and details sit together in the middle. */
.invoice-page { max-width: 880px; margin: 0 auto; }
.invoice-page .page-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.invoice-page .page-head .badge { margin-top: var(--space-2); }
.invoice-page .pay-card h2, .invoice-page .pay-card > .note { text-align: center; }
.invoice-page .pay-grid { grid-template-columns: auto minmax(0, 360px); justify-content: center; align-items: center; gap: var(--space-6); margin: var(--space-4) 0; }
.invoice-page .pay-steps { max-width: 620px; margin: var(--space-4) auto; }
.invoice-page > .note { text-align: center; }
@media (max-width: 640px) { .invoice-page .pay-grid { grid-template-columns: minmax(0, 1fr); } }
.card-plans { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
.card-plans form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.card-plans .btn { min-width: 220px; }
[data-widget-preview].is-translucent { background-color: #8a94a3; background-image: linear-gradient(45deg, #6b7585 25%, transparent 25%), linear-gradient(-45deg, #6b7585 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #6b7585 75%), linear-gradient(-45deg, transparent 75%, #6b7585 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; border-radius: var(--radius-md); padding: var(--space-2); }
[data-opacity-output] { font-weight: 600; color: var(--color-primary); }
.google-consent-note { margin: var(--space-4) 0; padding: var(--space-4); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-surface-muted, #f6faf7); }
.google-consent-note h3 { font-size: 1rem; margin: 0 0 var(--space-2); }
.google-consent-note p { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.google-consent-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); }
.google-consent-lists h4 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.google-do, .google-dont { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--text-sm); }
.google-do li, .google-dont li { padding-left: 1.5em; position: relative; }
.google-do li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }
.google-dont li::before { content: "✕"; position: absolute; left: 0; color: var(--color-danger); font-weight: 700; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-4); align-items: start; }
.settings-grid .card { margin: 0; }
.settings-facts { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.settings-facts div { display: grid; gap: 2px; } .settings-facts dt { font-size: var(--text-sm); color: var(--color-text-muted); } .settings-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.settings-members { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: grid; gap: var(--space-2); }
.settings-members li { display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; overflow-wrap: anywhere; }
.settings-notify .check { display: flex; gap: var(--space-2); align-items: flex-start; }
.settings-notify .check span { display: grid; gap: 2px; } .settings-notify .check small { color: var(--color-text-muted); font-weight: 400; }
.settings-grid .card > form + *, .settings-grid .card > form + .note { margin-top: var(--space-4); }
.settings-grid .card h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-md, 1rem); }
.rules-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .rules-layout { grid-template-columns: minmax(0, 1fr); } }
.rules-main, .rules-side { display: grid; gap: var(--space-4); min-width: 0; }
.rules-side .card, .rules-main .card { margin: 0; }
.rule-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-3); }
.rule-card.is-off { opacity: .7; }
.rule-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); align-items: baseline; }
.rule-head h3 { margin: 0; font-size: var(--text-md, 1rem); }
.rule-num { color: var(--color-text-muted); }
.rule-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
.rule-keywords { margin: var(--space-2) 0; overflow-wrap: anywhere; }
.rule-templates { margin: 0 0 var(--space-3); padding-left: var(--space-4); display: grid; gap: var(--space-2); color: var(--color-text-muted); overflow-wrap: anywhere; }
.rule-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.rule-actions form { margin: 0; }
.rule-edit { flex: 1 1 100%; order: 9; } .rule-edit[open] summary { margin-bottom: var(--space-3); }
.rule-edit:not([open]) { flex: 0 0 auto; order: 0; }
.rule-edit summary { list-style: none; display: inline-flex; } .rule-edit summary::-webkit-details-marker { display: none; }
.rule-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.rule-form .check, .rules-side .check { display: flex; gap: var(--space-2); align-items: flex-start; }
.rule-test { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.rule-test blockquote { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-primary); background: var(--color-surface-muted); overflow-wrap: anywhere; }
.rules-safety { margin: 0 0 var(--space-3); padding-left: var(--space-4); display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.inbox-bulk { margin: 0 0 var(--space-3); } .inbox-bulk p { margin: 0 0 var(--space-2); }
.inbox-draft { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-2) 0; }
.inbox-draft .check { display: inline-flex; gap: var(--space-1); align-items: center; font-weight: 600; }
.inbox-auto { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-border); border-radius: var(--radius-md, 8px); }
.inbox-auto p { margin: 0 0 var(--space-1); overflow-wrap: anywhere; } .inbox-auto form { margin: 0; }
.inbox-photos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: var(--space-2) 0; }
.inbox-photos img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-md, 8px); border: 1px solid var(--color-border); }
.inbox-photos a:focus-visible img { outline: 3px solid var(--color-primary); outline-offset: 2px; }