/* Handoff's look for the billing engine's pages (the engine's own markup uses the sb- classes). Cream cards on the night gradient,
   like the past-handoffs list and the admin. */
.sb-notice { margin: 18px 0; padding: 12px 16px; border-radius: 12px; background: rgba(207, 227, 214, .14); color: #d9eadf; font-size: 13px; }
.sb-notice.sb-alert { background: rgba(232, 125, 112, .16); color: #ffd6cf; }
.sb-notice ul { margin: 0; padding-left: 18px; }
.sb-empty { margin: 22px 0; color: #9dbaae; font-size: 13px; }
.sb-section { margin-top: 38px; }
.sb-section-title { margin: 0 0 12px; font: 400 22px 'Newsreader', Georgia, serif; color: #cfe0d6; letter-spacing: -.02em; }
.sb-eyebrow { margin: 0 0 8px; font: 10px 'DM Mono', monospace; letter-spacing: .17em; text-transform: uppercase; color: #9dbaae; }
.sb-link { color: #bdd4c6; font-size: 13px; }

.sb-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 28px 0 0; }
.sb-card { background: #f8f7f1; color: #202c32; border-radius: 14px; padding: 22px 24px; text-align: left; }
.sb-card-title { margin: 0; font: 400 26px/1.1 'Newsreader', Georgia, serif; letter-spacing: -.02em; }
.sb-price { margin: 10px 0 4px; font: 500 20px 'DM Sans', sans-serif; color: #2c4440; }
.sb-description { margin: 12px 0; font-size: 13px; line-height: 1.6; color: #5f6f6c; }
.sb-features { margin: 12px 0 18px; padding: 0; list-style: none; font-size: 13px; color: #35574a; }
.sb-features li { padding: 5px 0 5px 22px; position: relative; }
.sb-features li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: #72a99c; }
.sb-badge { display: inline-block; margin: 6px 0; padding: 4px 10px; border-radius: 999px; background: #dbe8dc; color: #3b6153; font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.sb-current { margin-top: 28px; }
.sb-status { margin: 8px 0 4px; font: 500 14px 'DM Sans', sans-serif; color: #2c4440; }

.sb-button, .sb-link-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid #cdd8cc; background: #e3e9e1; color: #35574a; font: 500 13px 'DM Sans', sans-serif; text-decoration: none; cursor: pointer; }
.sb-button:hover, .sb-link-button:hover { background: #d6e0d4; }
.sb-button.sb-primary { background: #253e3c; border-color: #253e3c; color: #eaf2eb; }
.sb-button.sb-primary:hover { background: #365852; }
.sb-link-button { min-height: 38px; padding: 0 12px; }
.sb-button:focus-visible, .sb-link-button:focus-visible, .sb-link:focus-visible { outline: 2px solid #72a99c; outline-offset: 2px; }
.sb-form { display: contents; }

.sb-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; }
.sb-stat { flex: 1 1 150px; background: #f8f7f1; color: #202c32; border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.sb-stat-label { font: 9px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #7f8a8b; }
.sb-stat-value { font: 400 30px/1 'Newsreader', Georgia, serif; letter-spacing: -.02em; }
.sb-inline { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 0; color: #cfe0d6; font-size: 13px; }

.sb-table-wrap { background: #f8f7f1; color: #202c32; border-radius: 14px; padding: 6px 12px; overflow-x: auto; }
.sb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sb-table th, .sb-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid #e9e8e1; vertical-align: top; font-weight: 400; }
.sb-table thead th { font: 9px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #7f8a8b; }
.sb-table tbody tr:last-child th, .sb-table tbody tr:last-child td { border-bottom: 0; }
.sb-table tbody th { font-weight: 500; }
.sb-table small { color: #7f8a8b; }
.sb-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.sb-archived { opacity: .55; }
.sb-links { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.sb-nowrap { white-space: nowrap; }
.sb-button-form { display: contents; }
.sb-links form { display: contents; }
.sb-links a { color: #35574a; padding: 10px 6px; }

.sb-form.sb-form { display: block; background: #f8f7f1; color: #202c32; border-radius: 14px; padding: 22px 24px; margin-top: 22px; }
.sb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; border: 0; padding: 0; min-width: 0; }
.sb-field label, .sb-field legend { font: 500 12px 'DM Sans', sans-serif; color: #35574a; }
.sb-field small { color: #7f8a8b; font-size: 12px; }
.sb-field input[type=text], .sb-field input[type=number], .sb-field input[type=date], .sb-field select, .sb-field textarea { min-height: 44px; padding: 8px 12px; border: 1px solid #cdd8cc; border-radius: 10px; background: #fff; font: 14px 'DM Sans', sans-serif; color: #202c32; }
.sb-field input:focus-visible, .sb-field select:focus-visible, .sb-field textarea:focus-visible { outline: 2px solid #72a99c; outline-offset: 1px; }
.sb-row { display: flex; flex-wrap: wrap; gap: 14px; }
.sb-row > .sb-field { flex: 1 1 150px; }
.sb-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; }
.sb-note { font-size: 12px; color: #5f6f6c; }
.sb-checkout { margin-top: 18px; min-height: 420px; border-radius: 14px; overflow: hidden; }
.sb-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { .sb-card, .sb-form.sb-form { padding: 18px; } }

/* Sandbox / live */
.admin-mode { margin-left: 6px; padding: 2px 8px; border-radius: 999px; font: 9px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 209, 102, .2); color: #ffd166; }
.admin-mode-live { background: rgba(232, 125, 112, .22); color: #ffb4a8; }
.admin-tab.active .admin-mode { background: rgba(37, 62, 60, .15); color: #5a4300; }
.sb-test { background: rgba(255, 209, 102, .14); color: #ffe7a8; }
.sb-mode.sb-mode-live { border: 2px solid #e87d70; }
.sb-switch { margin-top: 18px; display: block; }
.sb-switch .sb-field { max-width: 360px; }
.sb-option { border: 1px solid #dfe5dc; border-radius: 12px; padding: 14px 16px; background: #fcfbf7; }
.sb-seats { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 16px 0; }
.sb-seats input[type=number] { min-height: 44px; width: 110px; padding: 8px 12px; border: 1px solid #cdd8cc; border-radius: 10px; background: #fff; font: 14px 'DM Sans', sans-serif; }
.sb-seats label { font: 500 12px 'DM Sans', sans-serif; color: #35574a; width: 100%; }
.sb-card-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0; font-size: 14px; }
.sb-card-line .sb-eyebrow { margin: 0; color: #7f8a8b; }
.sb-audit { list-style: none; margin: 0; padding: 0; background: #f8f7f1; color: #202c32; border-radius: 14px; }
.sb-audit li { padding: 14px 20px; border-bottom: 1px solid #e9e8e1; }
.sb-audit li:last-child { border-bottom: 0; }
.sb-audit-line { margin: 0; font-size: 13px; }
.sb-audit-line time { color: #7f8a8b; margin-left: 8px; font-size: 12px; }
.sb-audit-line a { color: #35574a; }
.sb-audit-change { margin: 4px 0 0; font-size: 12px; color: #5f6f6c; }
.sb-eyebrow + .sb-card-title { margin-top: 0; }

.sb-button[disabled], input.sb-button:disabled { opacity: .45; cursor: not-allowed; }
.sb-blocked { margin-top: 10px; }

.sb-form.sb-form .sb-link, .sb-card .sb-link { color: #35574a; text-decoration: underline; padding: 10px 6px; }

.sb-facts { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sb-fact { margin: 0; font-size: 14px; line-height: 1.5; }
.sb-fact small { display: block; color: #7f8a8b; font-size: 12px; }
.sb-fact-trial { padding: 8px 12px; border-radius: 10px; background: #e3eef2; color: #1f4a5c; }
.sb-fact-coupon { padding: 8px 12px; border-radius: 10px; background: #dbe8dc; color: #2f5a49; }
.sb-fact-warning { padding: 8px 12px; border-radius: 10px; background: #fbe4df; color: #7a2e22; }