:root {
  --amahle-lime: #9DDF14;
  --amahle-green: #82C91E;
  --amahle-green-dark: #63A414;
  --amahle-grey: #74838B;
  --amahle-dark-grey: #4F575B;
  --amahle-charcoal: #353B3E;
  --amahle-light-grey: #F3F5F4;
  --amahle-white: #FFFFFF;
  --ink: var(--amahle-charcoal);
  --muted: var(--amahle-grey);
  --line: #dce2df;
  --surface: var(--amahle-white);
  --canvas: var(--amahle-light-grey);
  --teal: var(--amahle-green);
  --teal-deep: var(--amahle-charcoal);
  --teal-soft: #edf8dc;
  --amber: var(--amahle-lime);
  --coral: #b85c52;
  --shadow: 0 18px 45px rgba(53, 59, 62, .11);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #82C91E55; outline-offset: 2px; }
input, select, textarea { width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; transition: border .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--amahle-green); box-shadow: 0 0 0 3px rgba(130, 201, 30, .15); outline: none; }
textarea { min-height: 92px; resize: vertical; }
label { display: block; color: #42514d; font-size: 12px; font-weight: 750; letter-spacing: .01em; }
label small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 500; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; letter-spacing: -.045em; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; }
h2 { margin-bottom: 8px; font-size: 20px; letter-spacing: -.025em; }
h3 { margin-bottom: 5px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin-bottom: 7px; color: var(--teal); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 9px 14px; border: 1px solid transparent; border-radius: 9px; font-weight: 780; line-height: 1; transition: transform .15s, background .15s, border .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: white; background: var(--teal); box-shadow: 0 7px 14px #0e5c5025; }
.btn-primary:hover { background: var(--teal-deep); }
.btn-quiet { color: var(--teal); border-color: #cce0d9; background: #fff; }
.btn-quiet:hover { background: var(--teal-soft); }
.btn-block { width: 100%; min-height: 44px; }
.link-button { padding: 0; border: 0; color: var(--teal); background: transparent; font-weight: 780; }
.icon-button { border: 0; color: var(--teal); background: transparent; font-size: 22px; }

/* Authentication */
.auth-screen { min-height: 100vh; padding: 24px; display: grid; place-items: center; background: linear-gradient(125deg, #eef7e1 0%, #f3f5f4 52%, #e7eaeb 100%); }
.auth-panel { width: min(1180px, 100%); min-height: 700px; display: grid; grid-template-columns: 1.18fr .82fr; overflow: hidden; border-radius: 25px; background: #fff; box-shadow: 0 28px 70px rgba(53, 59, 62, .17); }
.auth-art { position: relative; display: flex; flex-direction: column; padding: 38px 42px 30px; overflow: hidden; color: #eef7e1; background: var(--amahle-charcoal); }
.auth-art::after { position: absolute; right: -115px; bottom: -130px; width: 390px; height: 390px; border: 58px solid var(--amahle-green); border-radius: 50%; content: ""; opacity: .9; }
.auth-art::before { position: absolute; right: 60px; top: 95px; width: 70px; height: 170px; border: 1px solid #ffffff4f; border-radius: 70px; content: ""; transform: rotate(34deg); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--teal-deep); font-size: 20px; font-weight: 850; letter-spacing: -.035em; }
.brand small { display: block; margin-top: -1px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.brand-light { position: relative; z-index: 1; color: white; }
.brand-light small { color: #d6e4d9; }
.brand-logo { display: block; width: 220px; height: 82px; object-fit: contain; }
.topbar-logo { width: 58px; height: 46px; margin-right: 10px; object-fit: contain; }
.auth-marketing-logo { position: relative; z-index: 1; display: block; width: 210px; height: auto; max-height: 90px; margin-bottom: 24px; object-fit: contain; }
.promo-copy { position: relative; z-index: 1; }
.promo-copy h1 { max-width: 560px; margin-bottom: 12px; font-size: clamp(32px, 3.5vw, 50px); }
.promo-copy p:last-child { max-width: 480px; margin-bottom: 18px; color: #c4ddd4; font-size: 15px; line-height: 1.5; }
.promo-carousel { position: relative; z-index: 1; flex: 1; min-height: 430px; overflow: hidden; border: 1px solid #ffffff30; border-radius: 14px; background: #f3f5f4; }
.promo-track, .promo-slide { width: 100%; height: 100%; }
.promo-slide { position: absolute; inset: 0; display: block; object-fit: contain; opacity: 0; transition: opacity .55s ease; }
.promo-slide.active { opacity: 1; }
.promo-arrow { position: absolute; z-index: 2; top: 50%; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #ffffff99; border-radius: 50%; color: var(--amahle-charcoal); background: #ffffffdd; font-size: 30px; line-height: 1; transform: translateY(-50%); }
.promo-arrow:hover { color: #fff; background: var(--amahle-green); }
.promo-prev { left: 14px; }
.promo-next { right: 14px; }
.promo-dots { position: absolute; z-index: 2; right: 0; bottom: 15px; left: 0; display: flex; justify-content: center; gap: 7px; }
.promo-dot { width: 8px; height: 8px; padding: 0; border: 1px solid var(--amahle-charcoal); border-radius: 50%; background: #fff; }
.promo-dot.active { border-color: var(--amahle-green); background: var(--amahle-green); }
.auth-card { align-self: center; padding: clamp(35px, 6vw, 70px); }
.auth-logo { display: block; width: 190px; max-width: 100%; height: auto; object-fit: contain; margin: 0 auto 24px auto; }
.auth-card h2 { margin-bottom: 28px; font-size: 30px; }
.auth-card label { margin: 16px 0; }
.auth-intro { margin: -14px 0 25px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.password-field { position: relative; }
.password-field input { padding-right: 60px; }
.password-toggle { position: absolute; right: 11px; bottom: 11px; padding: 2px; border: 0; color: var(--amahle-green-dark); background: transparent; font-size: 11px; font-weight: 800; }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -3px 0 22px; }
.remember-option { display: flex; align-items: center; gap: 7px; margin: 0 !important; color: var(--muted); font-size: 11px; font-weight: 600; }
.remember-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--amahle-green); }
.auth-options .link-button { font-size: 11px; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 23px 0 16px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.auth-divider::before, .auth-divider::after { flex: 1; height: 1px; background: var(--line); content: ""; }
.btn-outline { color: var(--amahle-green-dark); border-color: #cbe7a0; background: #fff; }
.btn-outline:hover { background: #f3fbe9; }
.auth-submit { text-transform: uppercase; letter-spacing: .04em; }
.auth-trust { display: grid; gap: 4px; margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.auth-trust strong { color: var(--amahle-dark-grey); font-size: 11px; }
.form-switch { margin-top: 22px; color: var(--muted); text-align: center; }
.two-factor-code { letter-spacing: .38em; font-size: 21px; font-weight: 800; text-align: center; }
.two-factor-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 17px; }
.two-factor-actions .cancel-login { color: #9a5848; }
.two-factor-message { min-height: 18px; margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }

/* Application shell */
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 20; top: 0; bottom: 0; width: 248px; padding: 26px 15px 18px; display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid #dce5df; background: #fff; }
.sidebar .brand { justify-content: center; padding: 0; }
.sidebar .brand-logo { width: 120px; height: auto; max-height: 90px; object-fit: contain; }
.workspace-label { margin: 42px 10px 10px; color: #9aaba5; font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.sidebar nav { display: grid; gap: 4px; }
.nav { display: flex; align-items: center; width: 100%; gap: 10px; padding: 11px 12px; border: 0; border-radius: 9px; color: #556560; background: transparent; font-size: 13px; font-weight: 720; text-align: left; }
.nav:hover { color: var(--amahle-green-dark); background: #f3fbe9; }
.nav.active { color: var(--teal); background: var(--teal-soft); }
.nav-icon { width: 18px; color: #80a296; font-size: 17px; text-align: center; }
.nav.active .nav-icon { color: var(--teal); }
.sidebar-footer { margin-top: auto; padding-top: 20px; }
.logout { width: calc(100% - 20px); margin: 12px 10px 0; padding: 10px; border: 1px solid #f0deda; border-radius: 8px; color: #965647; background: #fffaf8; font-size: 12px; font-weight: 750; text-align: left; }
.main { min-height: 100vh; margin-left: 248px; }
.topbar { position: sticky; z-index: 10; top: 0; height: 70px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #ffffffeb; backdrop-filter: blur(12px); }
.topbar-title { display: grid; font-size: 13px; font-weight: 800; }
.topbar-title small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 500; }
.topbar-actions { display: flex; gap: 8px; }
.mobile-menu { display: none; }
.page { display: none; max-width: 1500px; margin: auto; padding: 37px 34px 54px; }
.page.active-page { display: block; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.page-heading > div > .muted { margin-bottom: 0; }
.dashboard-heading { align-items: center; }
.today-chip { padding: 9px 12px; border: 1px solid #d9e8e1; border-radius: 999px; color: var(--teal); background: #fbfffc; font-size: 12px; font-weight: 700; }

/* Dashboard */
.quick-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 27px; }
.quick-actions button { display: grid; grid-template-columns: 30px 1fr; align-items: center; column-gap: 9px; padding: 15px; border: 1px solid #d8e7e0; border-radius: 13px; color: var(--ink); background: #fff; text-align: left; transition: border .15s, box-shadow .15s, transform .15s; }
.quick-actions button:hover { border-color: #9dcabb; box-shadow: 0 10px 22px #0e5c5010; transform: translateY(-2px); }
.quick-actions span { grid-row: span 2; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px 9px 9px 2px; color: var(--teal); background: var(--teal-soft); font-size: 19px; }
.quick-actions b { font-size: 12px; }
.quick-actions small { color: var(--muted); font-size: 11px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.stat-card { min-height: 142px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.stat-card > span, .stat-card small { display: block; color: var(--muted); font-size: 12px; }
.stat-card strong { display: block; margin: 10px 0 12px; font-size: clamp(20px, 2.2vw, 29px); letter-spacing: -.05em; }
.stat-card.revenue { border-color: #cbe7a0; background: linear-gradient(142deg, #ffffff 38%, #eef8df); }
.stat-card.revenue strong { color: var(--teal); }
.stat-card.overdue { border-color: #efd9d1; background: linear-gradient(142deg, #fff 38%, #fff1ed); }
.stat-card.overdue strong { color: #ad5848; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); gap: 16px; }
.panel { padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 5px 17px rgba(22, 60, 48, .025); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.panel-head h2 { margin-bottom: 0; font-size: 18px; }
.panel-head .eyebrow { margin-bottom: 4px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 670px; }
th, td { padding: 12px 9px; border-bottom: 1px solid #edf1ee; text-align: left; vertical-align: middle; white-space: nowrap; }
th { color: #82918c; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
td { font-size: 12px; }
td small { display: block; margin-top: 2px; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
.table-action { margin: 1px 3px 1px 0; padding: 6px 8px; border: 0; border-radius: 6px; color: var(--teal); background: var(--teal-soft); font-size: 11px; font-weight: 780; }
.table-action:hover { background: #d4e8df; }
.danger-action { color: #a85545; background: #fff0ec; }
.empty-row { padding: 30px; color: var(--muted); text-align: center; }
.status { display: inline-flex; padding: 5px 7px; border-radius: 99px; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.status-issued, .status-delivered { color: #226a57; background: #dff1e9; }
.status-paid, .status-accepted, .status-confirmed, .status-processing, .status-fulfilled { color: #527d18; background: #eef8df; }
.status-partial, .status-partially-paid, .status-draft, .status-trial { color: #527d18; background: #eef8df; }
.status-active { color: #226a57; background: #dff1e9; }
.status-past-due { color: #925d11; background: #fff2d8; }
.status-overdue, .status-declined, .status-cancelled { color: #a74d42; background: #ffebe7; }
.status-expired { color: #a74d42; background: #ffebe7; }
.mini-list { display: grid; gap: 7px; }
.mini-document { display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 9px; padding: 10px 0; border: 0; border-bottom: 1px solid #edf1ee; color: var(--ink); background: transparent; text-align: left; }
.mini-document:last-child { border-bottom: 0; }
.mini-document b, .mini-document small { display: block; }
.mini-document small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.mini-document strong { color: var(--teal); font-size: 12px; }
.doc-mark { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: var(--amahle-green-dark); background: var(--teal-soft); }
.empty-state { padding: 22px 0; color: var(--muted); text-align: center; }

/* Get paid and payment reminders */
.collection-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.collection-stat { min-height: 132px; padding: 19px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.collection-stat > span, .collection-stat small { display: block; color: var(--muted); font-size: 11px; }
.collection-stat strong { display: block; margin: 10px 0 11px; font-size: clamp(21px, 2.1vw, 28px); letter-spacing: -.045em; }
.collection-stat-primary { border-color: #cbe7a0; background: linear-gradient(142deg, #fff 42%, #eef8df); }
.collection-stat-primary strong { color: var(--amahle-green-dark); }
.collection-stat-overdue { border-color: #efd9d1; background: linear-gradient(142deg, #fff 42%, #fff1ed); }
.collection-stat-overdue strong { color: #ad5848; }
.collection-assist { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; margin-bottom: 16px; padding: 18px 21px; overflow: hidden; border: 1px solid #cce3a9; border-radius: 16px; background: linear-gradient(115deg, #f6fce9, #fff 72%); }
.collection-assist-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px 14px 14px 3px; color: #fff; background: var(--amahle-green); font-size: 25px; font-weight: 850; box-shadow: 0 9px 20px rgba(99, 164, 20, .18); }
.collection-assist h2 { margin-bottom: 4px; font-size: 17px; }
.collection-assist p:last-child { max-width: 850px; margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.collection-panel { padding-top: 17px; }
.collection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.collection-toolbar > input { width: min(390px, 100%); margin-top: 0; }
.collection-filters { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.filter-chip { padding: 7px 10px; border: 1px solid #dce6e1; border-radius: 999px; color: #61706b; background: #fff; font-size: 10px; font-weight: 800; }
.filter-chip:hover { border-color: #a8c983; color: var(--amahle-green-dark); }
.filter-chip.active { border-color: #c8e59d; color: #527d18; background: #eef8df; }
.collection-list-head { display: flex; justify-content: space-between; gap: 12px; margin: 13px 1px 6px; padding-bottom: 10px; border-bottom: 1px solid #edf1ee; font-size: 10px; }
.collection-table { min-width: 980px; }
.collection-row.is-overdue td:first-child { border-left: 3px solid #d37969; }
.collection-row.is-focused { animation: collection-focus 2.6s ease-out; }
.collection-timing { display: inline-flex; padding: 6px 8px; border-radius: 99px; color: #61706b; background: #f1f4f2; font-size: 9px; font-weight: 850; letter-spacing: .035em; }
.collection-timing.overdue { color: #a74d42; background: #ffebe7; }
.collection-timing.today, .collection-timing.soon { color: #7e5a15; background: #fff2d8; }
.collection-actions { display: flex; align-items: center; gap: 5px; }
.channel-action { padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; font-size: 10px; font-weight: 800; }
.channel-action.whatsapp { color: #fff; background: #248a52; }
.channel-action.whatsapp:hover { background: #1d7043; }
.channel-action.email { color: #355c7d; border-color: #d7e3ee; background: #eef5fb; }
.channel-action.email:hover { background: #dfeefa; }
.channel-action.copy { color: #5d6965; border-color: #dfe6e2; background: #f6f8f7; }
.channel-action.copy:hover { background: #eaf0ed; }
.channel-action:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .42; }
.reminder-action { color: #527d18; background: #eef8df; }
@keyframes collection-focus { 0%, 45% { background: #f2fbe7; } 100% { background: transparent; } }

/* Lists and customers */
.list-toolbar, .customer-tools { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.list-toolbar input, .customer-tools input { width: min(430px, 100%); margin-top: 0; }
.customer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.customer-card { position: relative; display: grid; grid-template-columns: 42px 1fr auto; align-items: start; gap: 12px; min-height: 176px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.customer-avatar { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px 12px 12px 2px; color: var(--teal); background: var(--teal-soft); font-size: 18px; font-weight: 850; }
.customer-main h3 { margin: 1px 0 3px; font-size: 15px; }
.customer-main p, .customer-main a { margin: 0; color: var(--muted); font-size: 11px; text-decoration: none; }
.customer-main a { display: block; margin-top: 5px; color: var(--teal); }
.customer-balance { text-align: right; }
.customer-balance span { display: block; color: var(--muted); font-size: 10px; }
.customer-balance strong { display: block; margin-top: 3px; color: var(--teal); font-size: 13px; }
.customer-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 11px; border-top: 1px solid #edf1ee; color: var(--muted); font-size: 11px; }
.customer-actions { position: absolute; right: 12px; bottom: 10px; }
.empty-card { padding: 35px; border: 1px dashed #bcd1c8; border-radius: 15px; color: var(--muted); background: #fbfefc; }

/* Settings */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); align-items: start; gap: 16px; }
.settings-form { display: grid; gap: 17px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.full-span { grid-column: 1 / -1; }
.form-section { padding-top: 17px; border-top: 1px solid #edf1ee; }
.logo-thumb { display: grid; width: 78px; height: 78px; place-items: center; overflow: hidden; align-self: end; border: 1px dashed #9bbab0; border-radius: 17px 17px 17px 3px; color: var(--teal); background: #f4f9f6; font-family: Georgia, serif; font-size: 34px; }
.logo-thumb img { width: 100%; height: 100%; object-fit: contain; }
.template-side { position: sticky; top: 87px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-gutter: stable; }
.template-side > .muted { margin-bottom: 17px; font-size: 12px; line-height: 1.55; }
.template-choices { display: grid; gap: 8px; }
.template-choice { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 9px; width: 100%; padding: 8px; border: 1px solid #e0e9e4; border-radius: 10px; color: var(--ink); background: #fff; text-align: left; }
.template-choice:hover { border-color: #9bc7b8; }
.template-choice.selected { border-color: var(--teal); background: #f2f8f5; box-shadow: 0 0 0 2px #0e5c5010; }
.template-choice b, .template-choice small { display: block; }
.template-choice b { font-size: 12px; }
.template-choice small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.template-choice em { color: var(--teal); font-size: 10px; font-style: normal; font-weight: 800; }
.template-swatch { display: grid; grid-template-rows: 13px 4px 1fr; gap: 3px; height: 46px; padding: 4px; overflow: hidden; border-radius: 4px; background: #f8f8f6; }
.template-swatch i { display: block; background: #d4ded9; }
.template-swatch i:nth-child(2) { width: 70%; }
.template-swatch.amahle-classic i:first-child { background: var(--teal); }
.template-swatch.amahle-edge { background: var(--teal-deep); }.template-swatch.amahle-edge i:first-child { background: var(--amber); }
.template-swatch.amahle-executive { background: #f1eee8; }.template-swatch.amahle-executive i:first-child { background: #253934; }
.template-swatch.amahle-south { background: #eef8df; }.template-swatch.amahle-south i:first-child { background: var(--amahle-green); }
.template-swatch.amahle-minimal { background: #fff; }.template-swatch.amahle-minimal i:first-child { background: #222; height: 2px; }
.template-swatch.amahle-corporate { background: #eaf0f7; }.template-swatch.amahle-corporate i:first-child { background: #17365d; }
.template-swatch.amahle-luxe { background: #171717; }.template-swatch.amahle-luxe i { background: #d6b55b; }
.template-swatch.amahle-ocean { background: #e7f7f8; }.template-swatch.amahle-ocean i:first-child { background: #087f8c; }
.template-swatch.amahle-sunset { background: #fff0e9; }.template-swatch.amahle-sunset i:first-child { background: #c9634a; }
.template-swatch.amahle-ledger { background: #f5f6f7; }.template-swatch.amahle-ledger i { border: 1px solid #9ba4aa; background: transparent; }
.template-swatch.amahle-heritage { background: #f7eee7; }.template-swatch.amahle-heritage i:first-child { background: #6f263d; }
.template-swatch.amahle-studio { background: #f2edff; }.template-swatch.amahle-studio i:first-child { background: #6741d9; }
.template-swatch.amahle-mono { background: #fff; border: 1px solid #202020; }.template-swatch.amahle-mono i:first-child { background: #202020; }
.template-swatch.amahle-horizon { background: #eaf7ff; }.template-swatch.amahle-horizon i:first-child { background: #1677b8; }
.template-swatch.amahle-botanical { background: #eaf1e8; }.template-swatch.amahle-botanical i:first-child { background: #285943; }

/* Subscription */
.trial-warning { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -8px 0 22px; padding: 12px 14px; border: 1px solid #cae6a3; border-radius: 9px; color: #426b16; background: #f4fae9; font-size: 12px; font-weight: 700; }
.subscription-overview { margin-bottom: 24px; }
.subscription-plan { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 15px; border-color: #cce6aa; background: linear-gradient(135deg, #fff 48%, #eff9df); }
.subscription-plan h2 { margin-bottom: 7px; font-size: 24px; }
.subscription-price { margin: 0; color: var(--teal); font-size: 30px; font-weight: 850; letter-spacing: -.04em; }
.subscription-price span { color: var(--muted); font-size: 13px; font-weight: 650; letter-spacing: 0; }
.subscription-plan > .muted { grid-column: 1 / -1; margin: -5px 0 0; }
.subscription-plan > .btn { grid-column: 1 / -1; justify-self: start; }
.subscription-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 1 / -1; gap: 9px; }
.subscription-dates > div { padding: 11px; border: 1px solid #d9e8d0; border-radius: 8px; background: #ffffffb8; }
.subscription-dates span, .subscription-dates b { display: block; }
.subscription-dates span { margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.subscription-dates b { color: var(--ink); font-size: 12px; }
.plan-selection { margin-bottom: 16px; }
.plan-selection-heading { max-width: 570px; margin: 0 0 16px; }
.plan-selection-heading h2 { margin-bottom: 0; font-size: 21px; }
.plan-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan-choice { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px; }
.plan-choice.current-plan { border: 2px solid var(--amahle-green); background: linear-gradient(150deg, #fff 58%, #eff9df); box-shadow: 0 9px 24px rgba(99, 164, 20, .12); }
.plan-choice h3 { margin-bottom: 7px; font-size: 20px; }
.plan-price { margin: 0 0 10px; color: var(--teal); font-size: 25px; font-weight: 850; letter-spacing: -.04em; }
.plan-price span { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0; }
.plan-audience { min-height: 38px; margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.plan-feature-list { display: grid; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; }
.plan-feature-list li { color: #43564f; font-size: 12px; line-height: 1.35; }
.plan-feature-list li::before { margin-right: 7px; color: var(--amahle-green-dark); content: "✓"; font-weight: 900; }
.plan-feature-list .coming-soon { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); }
.plan-feature-list .coming-soon::before { content: "○"; }
.plan-feature-list em { flex: none; padding: 3px 5px; border-radius: 4px; color: #6d7472; background: #edf0ef; font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.plan-choice .btn { margin-top: auto; }
.popular-plan { position: absolute; top: -10px; right: 15px; padding: 5px 8px; border-radius: 5px; color: #fff; background: var(--amahle-green-dark); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.billing-history { margin-top: 16px; }
.settings-subscription { display: grid; grid-template-columns: minmax(190px, .9fr) minmax(0, 1.6fr) auto; align-items: center; gap: 20px; margin-bottom: 16px; border-color: #d7e8d3; background: #fbfefb; }
.settings-subscription h2 { margin-bottom: 4px; }
.settings-subscription .muted { margin: 0; font-size: 12px; }
.settings-subscription-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.settings-subscription-details span { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 750; }
.settings-subscription-details b { color: var(--ink); font-size: 11px; }
.settings-subscription-details .status { justify-self: start; }
.subscription-required { max-width: 660px; margin: 70px auto; padding: 48px; border-color: #d4e7d1; text-align: center; }
.subscription-required img { width: 180px; max-width: 100%; margin-bottom: 26px; object-fit: contain; }
.subscription-required h1 { font-size: 31px; }
.subscription-required > p:not(.eyebrow) { max-width: 450px; margin: 0 auto 24px; color: var(--muted); line-height: 1.6; }
.checkout-modal { width: min(460px, 100%); }
.checkout-price { margin: -2px 0 22px; color: var(--teal); font-size: 22px; font-weight: 850; }
.checkout-frequency { margin: -15px 0 18px; color: var(--muted); font-size: 12px; }
.test-mode { margin: -4px 0 15px; padding: 8px 10px; border: 1px solid #cde6a6; border-radius: 6px; color: #4f791a; background: #f1f9e3; font-size: 10px; font-weight: 850; letter-spacing: .05em; }
.checkout-summary { margin-bottom: 20px; padding: 13px 16px; border: 1px solid #dce8df; border-radius: 9px; background: #f8fbf9; }
.checkout-summary p { display: flex; justify-content: space-between; gap: 18px; margin: 0; padding: 8px 0; color: #566761; font-size: 12px; }
.checkout-summary .grand-total { padding-top: 12px; border-top: 1px solid #d6e3da; color: var(--ink); font-size: 14px; }
.form-message { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
body.subscription-locked .requires-subscription, body.subscription-locked .nav[data-page]:not([data-page="subscription"]):not([data-page="settings"]) { display: none; }

/* Modal and editor */
.modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: rgba(7, 31, 25, .58); backdrop-filter: blur(4px); }
.modal-card { position: relative; width: min(1030px, 100%); max-height: calc(100vh - 40px); padding: 28px; overflow-y: auto; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.small-modal { width: min(500px, 100%); }
.small-modal > label { margin: 14px 0; }
.close { position: absolute; z-index: 2; top: 15px; right: 15px; display: grid; width: 31px; height: 31px; place-items: center; border: 0; border-radius: 50%; color: #4e625b; background: #eef3f0; font-size: 21px; }
.close:hover { background: #dceae4; }
.editor-modal { padding: 14px; }
.editor-shell { width: min(1500px, 100%); min-height: min(790px, calc(100vh - 28px)); overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.editor-toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 16px 54px 14px 25px; border-bottom: 1px solid var(--line); }
.editor-toolbar h2 { margin: 0; }
.editor-toolbar .eyebrow { margin: 0 0 3px; }
.editor-toolbar .close { top: 20px; right: 20px; }
.editor-layout { display: grid; grid-template-columns: minmax(450px, .91fr) minmax(460px, 1.09fr); min-height: 715px; }
.editor-form { padding: 23px; overflow-y: auto; background: #fff; }
.check-row { display: flex; align-items: center; gap: 8px; margin: 15px 0; font-size: 12px; }
.check-row input { width: auto; margin: 0; }
.line-items-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 25px 0 9px; }
.line-items-head h3 { margin: 0; font-size: 16px; }
.line-items-head .eyebrow { margin: 0 0 4px; }
.item-row { display: grid; grid-template-columns: minmax(140px, 1.75fr) .6fr 1fr .8fr 29px; align-items: end; gap: 7px; margin-bottom: 8px; }
.item-row label { font-size: 10px; }
.item-row input { padding: 9px 8px; }
.receipt-form-fields { display: grid; gap: 14px; margin-top: 16px; }
.receipt-readonly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.receipt-form-fields input[readonly] { color: #52635d; background: #f2f7f4; }
.form-message { min-height: 17px; margin: -5px 0 0; color: var(--teal); font-size: 11px; font-weight: 700; }
.form-message:empty { display: none; }
.editor-form button:disabled { cursor: not-allowed; opacity: .48; }
.remove-line { height: 38px; border: 0; border-radius: 8px; color: #a35547; background: #fff0ec; font-size: 19px; }
.editor-form > label:not(.check-row) { margin-top: 16px; }
.editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 21px; padding-top: 17px; border-top: 1px solid #edf1ee; }
.preview-column { padding: 20px; overflow: auto; background: #edf3ef; }
.preview-bar { display: flex; justify-content: space-between; margin-bottom: 10px; color: #527268; font-size: 11px; font-weight: 780; }
.preview-bar span:last-child { padding: 2px 7px; border: 1px solid #c6dbd2; border-radius: 99px; font-size: 9px; }
.preview-frame { min-width: 620px; transform-origin: top left; }
.document-view-card { width: min(1100px, 100%); padding: 24px; background: #eef3ef; }
.view-actions { display: flex; justify-content: flex-end; gap: 8px; margin: -1px 38px 17px 0; }

/* Original Amahle document system */
.document-paper { width: min(100%, 794px); min-height: 1055px; margin: 0 auto; padding: 54px 57px 42px; color: #21302b; background: #fff; box-shadow: 0 12px 28px rgba(10, 40, 31, .12); font-size: 11px; line-height: 1.48; }
.is-preview { width: 100%; min-height: 0; padding: 39px 40px 29px; box-shadow: 0 7px 22px rgba(10, 40, 31, .1); transform: scale(.92); transform-origin: top center; margin-bottom: -7%; }
.document-header { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 3px solid var(--teal); }
.document-brand { display: flex; align-items: center; gap: 12px; max-width: 56%; }
.document-logo, .document-monogram { display: grid; flex: 0 0 auto; width: 220px; height: 82px; place-items: center; object-fit: contain; overflow: hidden; border-radius: 0; color: white; background: transparent; font-family: Georgia, serif; font-size: 28px; }
.document-brand h1 { margin: 0; color: var(--teal-deep); font-size: 22px; line-height: 1.1; letter-spacing: -.04em; }
.document-brand p { margin: 3px 0 0; color: #6c7d77; }
.document-type { text-align: right; }
.document-type p { margin: 0 0 3px; color: #82918c; font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.document-type h2 { margin: 0 0 7px; color: var(--teal); font-size: 17px; }
.document-meta { display: flex; justify-content: space-between; gap: 22px; padding: 27px 0 24px; }
.document-meta > div:first-child { max-width: 58%; }
.document-meta span, .date-box span { display: block; margin-bottom: 4px; color: #82918c; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.document-meta h3 { margin: 0 0 4px; font-size: 14px; }
.document-meta p { margin: 0; color: #4c5e57; white-space: pre-line; }
.date-box { min-width: 170px; }
.date-box p { display: grid; grid-template-columns: 1fr auto; gap: 15px; padding: 5px 0; border-bottom: 1px solid #ebefec; }
.date-box span { margin: 0; }
.date-box b { color: #263831; font-size: 10px; text-align: right; }
.document-lines { min-width: 0; border-collapse: separate; border-spacing: 0; }
.document-lines th { padding: 9px 11px; color: #fff; background: var(--teal); font-size: 9px; }
.document-lines th:first-child { border-radius: 6px 0 0 6px; }
.document-lines th:last-child { border-radius: 0 6px 6px 0; }
.document-lines td { padding: 11px; color: #405049; white-space: normal; }
.document-lines td b { color: #263831; }
.document-lines .amount { text-align: right; }
.document-lower { display: grid; grid-template-columns: 1fr 230px; gap: 31px; padding-top: 22px; }
.document-copy { display: grid; align-content: start; gap: 17px; }
.document-copy b, .document-terms b, .payment-block b { display: block; margin-bottom: 4px; color: var(--teal); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.document-copy p { margin: 0; color: #53645e; white-space: pre-line; }
.payment-block { padding: 12px; border-radius: 6px; background: #f2f7f4; }
.payment-block span { display: block; color: #52635d; }
.document-totals { align-self: start; padding: 13px 15px; background: #f0f6f2; }
.document-totals p { display: flex; justify-content: space-between; gap: 15px; margin: 0; padding: 5px 0; color: #52635d; }
.document-totals b { color: #24352f; }
.document-totals .grand-total { margin: 5px -15px 0; padding: 12px 15px; color: #fff; background: var(--teal); font-size: 15px; }
.document-totals .grand-total b { color: #fff; }
.document-totals .balance-line { color: var(--teal); font-weight: 800; }
.document-terms { margin-top: 28px; padding-top: 14px; border-top: 1px solid #dce5df; }
.document-terms p { margin: 4px 0 0; color: #65756f; white-space: pre-line; }
.document-paper footer { margin-top: 30px; padding-top: 13px; border-top: 1px solid #dce5df; color: #768680; font-size: 9px; text-align: center; }

/* Fifteen distinct Amahle templates */
.template-amahle-edge { padding: 0 57px 42px; }
.template-amahle-edge .document-header { margin: 0 -57px; padding: 48px 57px 29px; border-bottom: 0; color: #eaf4ef; background: var(--teal-deep); }
.template-amahle-edge .document-brand h1 { color: #fff; }
.template-amahle-edge .document-brand p { color: #b3d1c6; }
.template-amahle-edge .document-monogram, .template-amahle-edge .document-logo { border-radius: 0; color: var(--teal-deep); background: transparent; }
.template-amahle-edge .document-type p { color: #b8d5ca; }
.template-amahle-edge .document-type h2 { color: #fff; }
.template-amahle-edge .document-lines th { color: #fff; background: var(--amahle-green); }
.template-amahle-edge .document-totals .grand-total { color: #fff; background: var(--amahle-green); }
.template-amahle-edge .document-totals .grand-total b { color: var(--teal-deep); }
.template-amahle-edge .document-copy b, .template-amahle-edge .document-terms b { color: var(--amahle-green-dark); }
.template-amahle-edge.is-preview { padding: 0 40px 29px; }
.template-amahle-edge.is-preview .document-header { margin: 0 -40px; padding: 35px 40px 23px; }
.template-amahle-executive { color: #29302d; font-family: Georgia, "Times New Roman", serif; }
.template-amahle-executive .document-header { align-items: end; border-bottom: 1px solid #29302d; }
.template-amahle-executive .document-brand { display: block; }
.template-amahle-executive .document-logo, .template-amahle-executive .document-monogram { width: 38px; height: 38px; margin-bottom: 13px; border-radius: 0; color: #fff; background: #29302d; }
.template-amahle-executive .document-brand h1 { color: #29302d; font-size: 25px; font-weight: 500; letter-spacing: .01em; }
.template-amahle-executive .document-type h2 { color: #29302d; font-family: Inter, sans-serif; }
.template-amahle-executive .document-lines th { color: #29302d; border-top: 1px solid #29302d; border-bottom: 1px solid #29302d; border-radius: 0; background: #f3f0ea; }
.template-amahle-executive .document-totals { background: #f3f0ea; }
.template-amahle-executive .document-totals .grand-total { background: #29302d; }
.template-amahle-executive .document-copy b, .template-amahle-executive .document-terms b { color: #29302d; }
.template-amahle-south { border-top: 12px solid var(--amahle-green); }
.template-amahle-south .document-header { border-bottom-color: var(--amahle-lime); }
.template-amahle-south .document-logo, .template-amahle-south .document-monogram { border-radius: 0; background: transparent; }
.template-amahle-south .document-brand h1 { color: var(--amahle-charcoal); }
.template-amahle-south .document-type h2 { color: var(--amahle-green-dark); }
.template-amahle-south .document-lines th { background: var(--amahle-green); }
.template-amahle-south .document-totals { background: #eef8df; }
.template-amahle-south .document-totals .grand-total { background: var(--amahle-green); }
.template-amahle-south .document-copy b, .template-amahle-south .document-terms b { color: var(--amahle-green-dark); }
.template-amahle-south .payment-block { background: #eef8df; }
.template-amahle-minimal { padding-top: 42px; }
.template-amahle-minimal .document-header { padding-bottom: 16px; border-bottom: 1px solid #18221f; }
.template-amahle-minimal .document-brand { gap: 8px; }
.template-amahle-minimal .document-logo, .template-amahle-minimal .document-monogram { width: 30px; height: 30px; border-radius: 0; background: #18221f; font-size: 18px; }
.template-amahle-minimal .document-brand h1 { color: #18221f; font-size: 18px; letter-spacing: -.02em; }
.template-amahle-minimal .document-type h2 { color: #18221f; font-size: 14px; }
.template-amahle-minimal .document-lines th { padding: 8px 4px; color: #68736e; border-bottom: 1px solid #18221f; border-radius: 0; background: transparent; }
.template-amahle-minimal .document-lines td { padding: 10px 4px; }
.template-amahle-minimal .document-totals { padding: 0; background: transparent; }
.template-amahle-minimal .document-totals .grand-total { margin: 5px 0 0; color: #18221f; border-top: 1px solid #18221f; background: transparent; }
.template-amahle-minimal .document-totals .grand-total b { color: #18221f; }
.template-amahle-minimal .document-copy b, .template-amahle-minimal .document-terms b { color: #18221f; }
.template-amahle-minimal .payment-block { padding: 0; background: transparent; }

.template-amahle-corporate { border-top: 7px solid #17365d; color: #26374a; }
.template-amahle-corporate .document-header { border-bottom: 1px solid #9eb1c7; }
.template-amahle-corporate .document-brand h1, .template-amahle-corporate .document-type h2, .template-amahle-corporate .document-copy b, .template-amahle-corporate .document-terms b { color: #17365d; }
.template-amahle-corporate .document-lines th { border-radius: 0; background: #17365d; text-transform: uppercase; letter-spacing: .05em; }
.template-amahle-corporate .document-lines tbody tr:nth-child(even) { background: #f2f6fa; }
.template-amahle-corporate .document-totals, .template-amahle-corporate .payment-block { border-left: 3px solid #4c78a8; background: #edf3f9; }
.template-amahle-corporate .document-totals .grand-total { background: #17365d; }

.template-amahle-luxe { border: 1px solid #d8c181; color: #292722; }
.template-amahle-luxe .document-header { margin: -54px -57px 26px; padding: 44px 57px 27px; border-bottom: 5px solid #d6b55b; color: #f7f1df; background: #171717; }
.template-amahle-luxe .document-brand h1, .template-amahle-luxe .document-type h2 { color: #f5df9c; }
.template-amahle-luxe .document-brand p, .template-amahle-luxe .document-type p { color: #d4ccb6; }
.template-amahle-luxe .document-lines th { color: #171717; border-radius: 0; background: #d6b55b; }
.template-amahle-luxe .document-totals, .template-amahle-luxe .payment-block { background: #f7f2e6; }
.template-amahle-luxe .document-totals .grand-total, .template-amahle-luxe .receipt-status { background: #171717; }
.template-amahle-luxe .document-copy b, .template-amahle-luxe .document-terms b { color: #8a6a1d; }
.template-amahle-luxe.is-preview .document-header { margin: -39px -40px 21px; padding: 32px 40px 21px; }

.template-amahle-ocean { border-top: 9px solid #18a4b5; }
.template-amahle-ocean .document-header { border-bottom: 0; }
.template-amahle-ocean .document-type { min-width: 190px; padding: 14px 16px; border-radius: 14px 2px 14px 14px; background: #e3f7f9; }
.template-amahle-ocean .document-brand h1, .template-amahle-ocean .document-type h2, .template-amahle-ocean .document-copy b, .template-amahle-ocean .document-terms b { color: #087f8c; }
.template-amahle-ocean .document-meta { margin: 0 -20px 22px; padding: 22px 20px; background: #f0fafb; }
.template-amahle-ocean .document-lines th { background: #087f8c; }
.template-amahle-ocean .document-totals, .template-amahle-ocean .payment-block { border-radius: 12px 2px 12px 12px; background: #e7f7f8; }
.template-amahle-ocean .document-totals .grand-total, .template-amahle-ocean .receipt-status { border-radius: 7px 2px 7px 7px; background: #087f8c; }

.template-amahle-sunset { border-top: 10px solid #c9634a; }
.template-amahle-sunset .document-header { border-bottom-color: #f0b08e; }
.template-amahle-sunset .document-brand h1, .template-amahle-sunset .document-type h2, .template-amahle-sunset .document-copy b, .template-amahle-sunset .document-terms b { color: #9b432f; }
.template-amahle-sunset .document-type h2 { padding: 6px 10px; color: #fff; background: #c9634a; }
.template-amahle-sunset .document-lines th { background: #c9634a; }
.template-amahle-sunset .document-lines tbody tr:nth-child(odd) { background: #fff8f4; }
.template-amahle-sunset .document-totals, .template-amahle-sunset .payment-block { background: #fff0e9; }
.template-amahle-sunset .document-totals .grand-total, .template-amahle-sunset .receipt-status { background: #9b432f; }

.template-amahle-ledger { padding: 46px 50px 38px; font-size: 10px; }
.template-amahle-ledger .document-header { padding-bottom: 15px; border-bottom: 2px solid #46545b; }
.template-amahle-ledger .document-brand h1, .template-amahle-ledger .document-type h2, .template-amahle-ledger .document-copy b, .template-amahle-ledger .document-terms b { color: #344047; }
.template-amahle-ledger .document-meta { padding: 18px 0; }
.template-amahle-ledger .document-lines { border: 1px solid #aeb7bc; border-collapse: collapse; }
.template-amahle-ledger .document-lines th, .template-amahle-ledger .document-lines td { padding: 7px 8px; border: 1px solid #cbd1d4; border-radius: 0; }
.template-amahle-ledger .document-lines th { color: #263238; background: #e8ecee; }
.template-amahle-ledger .document-lower { gap: 20px; padding-top: 14px; }
.template-amahle-ledger .document-totals { padding: 8px 10px; border: 1px solid #aeb7bc; background: #fff; }
.template-amahle-ledger .document-totals .grand-total { margin-inline: -10px; background: #46545b; }
.template-amahle-ledger .payment-block { border: 1px solid #cbd1d4; border-radius: 0; background: #f7f8f8; }

.template-amahle-heritage { color: #47352f; font-family: Georgia, "Times New Roman", serif; }
.template-amahle-heritage .document-header { border-bottom: 4px double #6f263d; }
.template-amahle-heritage .document-brand h1 { color: #6f263d; font-size: 25px; font-weight: 500; letter-spacing: 0; }
.template-amahle-heritage .document-type h2, .template-amahle-heritage .document-copy b, .template-amahle-heritage .document-terms b { color: #6f263d; }
.template-amahle-heritage .document-lines th { border-radius: 0; background: #6f263d; font-family: Inter, sans-serif; }
.template-amahle-heritage .document-totals, .template-amahle-heritage .payment-block { border: 1px solid #e0c9bc; background: #f8eee8; }
.template-amahle-heritage .document-totals .grand-total, .template-amahle-heritage .receipt-status { background: #6f263d; }
.template-amahle-heritage footer { border-top: 3px double #cdb1a2; }

.template-amahle-studio { border-left: 12px solid #6741d9; }
.template-amahle-studio .document-header { border-bottom: 0; }
.template-amahle-studio .document-type { padding-left: 18px; border-left: 3px solid #e4529b; }
.template-amahle-studio .document-brand h1, .template-amahle-studio .document-type h2, .template-amahle-studio .document-copy b, .template-amahle-studio .document-terms b { color: #5632c5; }
.template-amahle-studio .document-lines th { background: linear-gradient(90deg, #6741d9, #965adf); }
.template-amahle-studio .document-totals, .template-amahle-studio .payment-block { background: #f2edff; }
.template-amahle-studio .document-totals .grand-total, .template-amahle-studio .receipt-status { background: #6741d9; }
.template-amahle-studio .balance-line { color: #e4529b; }

.template-amahle-mono { border: 1px solid #222; color: #111; }
.template-amahle-mono .document-header { border-bottom: 5px solid #111; }
.template-amahle-mono .document-brand h1, .template-amahle-mono .document-type h2, .template-amahle-mono .document-copy b, .template-amahle-mono .document-terms b { color: #111; }
.template-amahle-mono .document-type p, .template-amahle-mono .document-meta span, .template-amahle-mono .date-box span { color: #555; }
.template-amahle-mono .document-lines th { color: #fff; border-radius: 0; background: #111; }
.template-amahle-mono .document-lines tbody tr { border-bottom: 1px solid #bbb; }
.template-amahle-mono .document-totals, .template-amahle-mono .payment-block { border: 1px solid #222; background: #fff; }
.template-amahle-mono .document-totals .grand-total, .template-amahle-mono .receipt-status { background: #111; }

.template-amahle-horizon { padding-top: 38px; background: linear-gradient(180deg, #eaf7ff 0 124px, #fff 124px); }
.template-amahle-horizon .document-header { padding-bottom: 22px; border-bottom: 0; }
.template-amahle-horizon .document-brand h1, .template-amahle-horizon .document-type h2, .template-amahle-horizon .document-copy b, .template-amahle-horizon .document-terms b { color: #126aa2; }
.template-amahle-horizon .document-type h2 { font-size: 20px; }
.template-amahle-horizon .document-lines th { background: #1677b8; }
.template-amahle-horizon .document-totals, .template-amahle-horizon .payment-block { border-radius: 10px; background: #eaf7ff; }
.template-amahle-horizon .document-totals .grand-total, .template-amahle-horizon .receipt-status { border-radius: 6px; background: #1677b8; }

.template-amahle-botanical { border-top: 10px solid #285943; color: #283b31; background: linear-gradient(135deg, #fff 0 82%, #edf3ea 82%); }
.template-amahle-botanical .document-header { border-bottom: 1px solid #9db5a7; }
.template-amahle-botanical .document-brand h1, .template-amahle-botanical .document-type h2, .template-amahle-botanical .document-copy b, .template-amahle-botanical .document-terms b { color: #285943; }
.template-amahle-botanical .document-lines th { color: #fff; background: #285943; }
.template-amahle-botanical .document-lines tbody tr:nth-child(even) { background: #f2f6f0; }
.template-amahle-botanical .document-totals, .template-amahle-botanical .payment-block { border-left: 4px solid #82a879; background: #eaf1e8; }
.template-amahle-botanical .document-totals .grand-total, .template-amahle-botanical .receipt-status { background: #285943; }

/* Messages and responsive behavior */
#toast { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: grid; gap: 8px; pointer-events: none; }
.toast { max-width: 340px; padding: 12px 15px; border-radius: 10px; color: #fff; background: #1f312b; box-shadow: var(--shadow); font-size: 12px; font-weight: 650; }
@media (max-width: 1200px) {
  .quick-actions { grid-template-columns: repeat(3, 1fr); }
  .collection-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-layout { grid-template-columns: minmax(400px, .9fr) minmax(400px, 1.1fr); }
  .preview-frame { min-width: 560px; }
}
@media (max-width: 900px) {
  .auth-panel { grid-template-columns: 1fr; min-height: 0; }
  .auth-art { min-height: 0; padding: 30px 28px 24px; }
  .auth-marketing-logo { width: 190px; margin-bottom: 17px; }
  .promo-copy h1 { font-size: 38px; }
  .promo-copy p:last-child { margin-bottom: 14px; }
  .promo-carousel { min-height: min(470px, 78vw); }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 13px 0 30px #173e321e; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .mobile-menu { display: block; }
  .topbar { padding: 0 18px; }
  .dashboard-grid, .settings-layout { grid-template-columns: 1fr; }
  .collection-toolbar { align-items: flex-start; flex-direction: column; }
  .collection-filters { justify-content: flex-start; }
  .plan-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-subscription { grid-template-columns: 1fr; }
  .template-side { position: static; max-height: none; overflow: visible; }
  .editor-layout { grid-template-columns: 1fr; }
  .editor-form { overflow: visible; }
  .preview-column { overflow: hidden; padding: 16px; }
  .preview-frame { min-width: 0; }
  .is-preview { transform: none; margin-bottom: 0; }
}
@media (max-width: 620px) {
  .auth-screen { padding: 0; }
  .auth-panel { border-radius: 0; }
  .auth-art { min-height: 270px; padding: 28px; }
  .auth-art { padding: 24px 18px 18px; }
  .auth-marketing-logo { width: min(190px, 78vw); margin: 0 auto 14px; }
  .promo-copy h1 { font-size: 28px; }
  .promo-copy p:last-child { font-size: 13px; }
  .promo-carousel { min-height: 350px; }
  .promo-arrow { width: 34px; height: 34px; font-size: 26px; }
  .auth-logo { width: min(190px, 70vw); margin-bottom: 24px; }
  .auth-card { padding: 30px 25px; }
  .auth-options { align-items: flex-start; flex-direction: column; gap: 10px; }
  .topbar-title { display: none; }
  .topbar { gap: 5px; }
  .topbar-actions { margin-left: auto; }
  .topbar-actions .btn-quiet { display: none; }
  .page { padding: 25px 16px 38px; }
  .page-heading { flex-direction: column; gap: 13px; margin-bottom: 20px; }
  .page-heading .btn { width: 100%; }
  .dashboard-heading { align-items: flex-start; }
  .today-chip { display: none; }
  .quick-actions, .stats, .customer-grid, .collection-summary { grid-template-columns: 1fr; }
  .quick-actions { gap: 8px; }
  .stat-card { min-height: 115px; }
  .panel { padding: 15px; }
  .collection-assist { align-items: start; grid-template-columns: 1fr; }
  .collection-list-head { align-items: flex-start; flex-direction: column; }
  .collection-toolbar > input { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .trial-warning { align-items: flex-start; flex-direction: column; }
  .subscription-plan { grid-template-columns: 1fr; }
  .subscription-plan > .status { justify-self: start; }
  .subscription-dates, .settings-subscription-details, .plan-choices { grid-template-columns: 1fr; }
  .subscription-required { margin: 18px auto; padding: 30px 20px; }
  .full-span { grid-column: auto; }
  .item-row { grid-template-columns: 1fr 1fr; }
  .item-row .item-description { grid-column: 1 / -1; }
  .item-row .remove-line { grid-column: 2; }
  .editor-modal { padding: 0; }
  .editor-shell { min-height: 100vh; border-radius: 0; }
  .editor-toolbar { padding-left: 17px; }
  .editor-form { padding: 17px; }
  .document-view-card { padding: 8px; border-radius: 0; }
  .view-actions { margin: 2px 38px 12px 0; }
  .document-paper, .is-preview { padding: 27px 21px 24px; font-size: 10px; }
  .document-header, .document-meta { gap: 12px; }
  .document-brand h1 { font-size: 17px; }
  .brand-logo { width: min(220px, 72vw); height: 72px; }
  .topbar-logo { width: 48px; height: 38px; }
  .document-logo, .document-monogram { width: 165px; height: 64px; font-size: 20px; }
  .document-type h2 { font-size: 12px; }
  .document-meta { padding: 18px 0; }
  .document-lower { grid-template-columns: 1fr; gap: 15px; }
  .template-amahle-edge { padding: 0 21px 24px; }
  .template-amahle-edge .document-header, .template-amahle-edge.is-preview .document-header { margin: 0 -21px; padding: 26px 21px 19px; }
  .template-amahle-edge.is-preview { padding: 0 21px 24px; }
  .template-amahle-luxe .document-header, .template-amahle-luxe.is-preview .document-header { margin: -27px -21px 20px; padding: 27px 21px 20px; }
}
@media print {
  html, body {
    width: 210mm !important;
    min-width: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  body > *:not(#viewModal) { display: none !important; }
  #viewModal {
    position: static !important;
    display: block !important;
    width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }
  #viewModal .modal-card, #documentPreview {
    display: block !important;
    width: 210mm !important;
    min-width: 210mm !important;
    max-width: 210mm !important;
    min-height: 297mm !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  #viewModal .close, #viewModal .view-actions { display: none !important; }
  #viewModal .document-paper {
    display: flex !important;
    flex-direction: column !important;
    width: 210mm !important;
    min-width: 210mm !important;
    max-width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #viewModal .document-paper.is-preview { transform: none !important; }
  #viewModal .document-paper footer { margin-top: auto !important; }
  #viewModal .document-lines { width: 100% !important; table-layout: fixed; }
  #viewModal .document-header,
  #viewModal .document-meta,
  #viewModal .document-lower,
  #viewModal .document-terms,
  #viewModal .document-paper footer,
  #viewModal .document-lines tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  @page { size: A4 portrait; margin: 0; }
}

/* Customer history, lifecycle controls and payment detail additions */
.btn-danger { color: #fff; background: #a95447; box-shadow: 0 7px 14px rgba(169,84,71,.18); }
.btn-danger:hover { background: #8f4439; }
.activity-modal { width: min(760px, 100%); }
.activity-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 18px 0 20px; }
.activity-summary > div { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #f9fcfa; }
.activity-summary span, .activity-summary b { display: block; }
.activity-summary span { margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.activity-summary b { font-size: 13px; }
.activity-list { display: grid; gap: 8px; }
.activity-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; text-align: left; }
.activity-row:hover { border-color: #a8cbbf; background: #fbfefc; }
.activity-row b, .activity-row small, .activity-row strong { display: block; }
.activity-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.activity-row > span:last-child { display: grid; justify-items: end; gap: 4px; }
.activity-row strong { color: var(--teal); font-size: 11px; }
.payment-history { display: grid; gap: 5px; margin-top: 12px; padding: 11px 12px; border-radius: 8px; background: #f3f7f5; }
.payment-history > b { color: var(--teal-deep); }
.payment-history span { display: grid; grid-template-columns: 1fr auto; gap: 10px; color: #62736d; font-size: 9px; }
.payment-history strong { color: var(--ink); }
.receipt-paper { border-top: 8px solid var(--teal); }
.receipt-paper .document-header { padding-bottom: 27px; }
.receipt-recipient { padding: 30px 0 25px; }
.receipt-recipient > span, .receipt-details span, .receipt-note > span { display: block; margin-bottom: 6px; color: #82918c; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.receipt-recipient h3 { margin: 0 0 5px; color: var(--teal-deep); font-size: 18px; }
.receipt-recipient p { margin: 0; color: #4c5e57; white-space: pre-line; }
.receipt-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px 0; border-top: 1px solid #dce5df; border-bottom: 1px solid #dce5df; }
.receipt-details b { display: block; color: #263831; font-size: 11px; }
.receipt-amounts { max-width: 390px; margin: 28px 0 0 auto; padding: 12px 16px; background: #f0f6f2; }
.receipt-amounts p { display: flex; justify-content: space-between; gap: 18px; margin: 0; padding: 8px 0; color: #52635d; }
.receipt-amounts b { color: #24352f; }
.receipt-amounts p:nth-child(2) { color: var(--teal); font-weight: 800; }
.receipt-amounts p:last-child { padding-top: 12px; border-top: 1px solid #cfe0d7; font-weight: 800; }
.receipt-status { display: inline-block; margin-top: 24px; padding: 8px 12px; color: #fff; background: var(--teal); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.receipt-note { max-width: 510px; margin-top: 38px; padding-top: 17px; border-top: 1px solid #dce5df; }
.receipt-note p { margin: 0; color: #53645e; white-space: pre-line; }
.receipt-paper footer { margin-top: 46px; }

/* Receipt variants inherit the selected document signature. */
.receipt-paper.template-amahle-edge { border-top-color: var(--amahle-green); }
.template-amahle-edge .receipt-amounts { color: #fff; background: var(--teal-deep); }
.template-amahle-edge .receipt-amounts p, .template-amahle-edge .receipt-amounts b { color: #eaf4ef; }
.template-amahle-edge .receipt-amounts p:nth-child(2) { color: var(--amahle-lime); }
.template-amahle-edge .receipt-status { background: var(--amahle-green); }
.receipt-paper.template-amahle-executive { border-top-color: #29302d; }
.template-amahle-executive .receipt-recipient h3, .template-amahle-executive .receipt-amounts p:nth-child(2) { color: #29302d; }
.template-amahle-executive .receipt-amounts { background: #f3f0ea; }
.template-amahle-executive .receipt-status { background: #29302d; }
.receipt-paper.template-amahle-south { border-top-color: var(--amahle-green); }
.template-amahle-south .receipt-recipient h3, .template-amahle-south .receipt-amounts p:nth-child(2) { color: var(--amahle-green-dark); }
.template-amahle-south .receipt-amounts { background: #eef8df; }
.template-amahle-south .receipt-status { background: var(--amahle-green); }
.receipt-paper.template-amahle-minimal { border-top: 2px solid #18221f; }
.template-amahle-minimal .receipt-recipient h3, .template-amahle-minimal .receipt-amounts p:nth-child(2) { color: #18221f; }
.template-amahle-minimal .receipt-amounts { padding-inline: 0; border-top: 1px solid #18221f; border-bottom: 1px solid #18221f; background: transparent; }
.template-amahle-minimal .receipt-status { color: #18221f; border: 1px solid #18221f; background: transparent; }
.receipt-paper.template-amahle-corporate { border-top-color: #17365d; }
.template-amahle-corporate .receipt-recipient h3, .template-amahle-corporate .receipt-amounts p:nth-child(2) { color: #17365d; }
.template-amahle-corporate .receipt-amounts { border-left: 3px solid #4c78a8; background: #edf3f9; }
.template-amahle-corporate .receipt-status { background: #17365d; }
.receipt-paper.template-amahle-luxe { border-top-color: #d6b55b; }
.template-amahle-luxe .receipt-recipient h3, .template-amahle-luxe .receipt-amounts p:nth-child(2) { color: #8a6a1d; }
.template-amahle-luxe .receipt-amounts { border: 1px solid #d8c181; background: #f7f2e6; }
.template-amahle-luxe .receipt-status { color: #f5df9c; background: #171717; }
.receipt-paper.template-amahle-ocean { border-top-color: #18a4b5; }
.template-amahle-ocean .receipt-recipient h3, .template-amahle-ocean .receipt-amounts p:nth-child(2) { color: #087f8c; }
.template-amahle-ocean .receipt-amounts { border-radius: 12px 2px 12px 12px; background: #e7f7f8; }
.template-amahle-ocean .receipt-status { background: #087f8c; }
.receipt-paper.template-amahle-sunset { border-top-color: #c9634a; }
.template-amahle-sunset .receipt-recipient h3, .template-amahle-sunset .receipt-amounts p:nth-child(2) { color: #9b432f; }
.template-amahle-sunset .receipt-amounts { background: #fff0e9; }
.template-amahle-sunset .receipt-status { background: #9b432f; }
.receipt-paper.template-amahle-ledger { border-top: 2px solid #46545b; }
.template-amahle-ledger .receipt-recipient h3, .template-amahle-ledger .receipt-amounts p:nth-child(2) { color: #344047; }
.template-amahle-ledger .receipt-details { border-color: #aeb7bc; }
.template-amahle-ledger .receipt-amounts { border: 1px solid #aeb7bc; background: #fff; }
.template-amahle-ledger .receipt-status { background: #46545b; }
.receipt-paper.template-amahle-heritage { border-top-color: #6f263d; }
.template-amahle-heritage .receipt-recipient h3, .template-amahle-heritage .receipt-amounts p:nth-child(2) { color: #6f263d; }
.template-amahle-heritage .receipt-amounts { border: 1px solid #e0c9bc; background: #f8eee8; }
.template-amahle-heritage .receipt-status { background: #6f263d; }
.receipt-paper.template-amahle-studio { border-top-color: #6741d9; }
.template-amahle-studio .receipt-recipient h3, .template-amahle-studio .receipt-amounts p:nth-child(2) { color: #5632c5; }
.template-amahle-studio .receipt-amounts { background: #f2edff; }
.template-amahle-studio .receipt-status { background: #6741d9; }
.receipt-paper.template-amahle-mono { border-top-color: #111; }
.template-amahle-mono .receipt-recipient h3, .template-amahle-mono .receipt-amounts p:nth-child(2) { color: #111; }
.template-amahle-mono .receipt-amounts { border: 1px solid #222; background: #fff; }
.template-amahle-mono .receipt-status { background: #111; }
.receipt-paper.template-amahle-horizon { border-top-color: #1677b8; }
.template-amahle-horizon .receipt-recipient h3, .template-amahle-horizon .receipt-amounts p:nth-child(2) { color: #126aa2; }
.template-amahle-horizon .receipt-amounts { border-radius: 10px; background: #eaf7ff; }
.template-amahle-horizon .receipt-status { background: #1677b8; }
.receipt-paper.template-amahle-botanical { border-top-color: #285943; }
.template-amahle-botanical .receipt-recipient h3, .template-amahle-botanical .receipt-amounts p:nth-child(2) { color: #285943; }
.template-amahle-botanical .receipt-amounts { border-left: 4px solid #82a879; background: #eaf1e8; }
.template-amahle-botanical .receipt-status { background: #285943; }
@media (max-width: 620px) {
  .activity-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .activity-row { align-items: flex-start; }
  .receipt-details { grid-template-columns: repeat(2, 1fr); }
  .receipt-amounts { margin-left: 0; }
}

/* Secure public invoice payment */
.payment-connection-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr); gap: 28px; margin-bottom: 18px; }
.payment-connection-copy h2 { margin: 5px 0 8px; }
.payment-connection-status { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #f8fbf9; }
.payment-connection-status b { color: #53645e; font-size: 11px; }
.payment-connection-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.payment-connection-form > label:first-child, .payment-connection-form > label:nth-child(4), .payment-connection-actions, .payment-connection-form .form-message { grid-column: 1 / -1; }
.payment-connection-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 3px; }
.channel-action.pay-link { color: #3f6708; background: #eff8e3; }
.channel-action.pay-link:hover { background: #dff0c7; }
.public-payment-page { min-height: 100vh; background: radial-gradient(circle at 10% 0%, rgba(130,201,30,.14), transparent 30%), #f4f7f5; color: var(--ink); }
.public-payment-shell { width: min(880px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 40px; }
.public-payment-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; color: #53645e; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.public-payment-header img { width: 126px; height: 58px; object-fit: contain; object-position: left center; }
.public-payment-header span { display: inline-flex; align-items: center; gap: 7px; }
.public-payment-header span::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--teal); }
.public-payment-card { padding: clamp(24px, 5vw, 48px); border: 1px solid #dce6df; border-radius: 22px; background: #fff; box-shadow: 0 25px 60px rgba(35,59,50,.1); }
.public-payment-loading { display: grid; justify-items: center; gap: 9px; padding-block: 90px; text-align: center; }
.public-payment-loading h1, .public-payment-loading p { margin: 0; }
.payment-spinner { width: 34px; height: 34px; margin-bottom: 8px; border: 3px solid #dce8e1; border-top-color: var(--lime); border-radius: 50%; animation: payment-spin .8s linear infinite; }
@keyframes payment-spin { to { transform: rotate(360deg); } }
.public-payment-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 27px; border-bottom: 1px solid var(--line); }
.public-payment-title h1 { margin: 5px 0 7px; font-size: clamp(25px, 4vw, 38px); }
.public-payment-number { min-width: 150px; padding: 15px 17px; border-radius: 13px; background: #f2f7f4; text-align: right; }
.public-payment-number span, .public-payment-number strong { display: block; }
.public-payment-number span { margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.public-payment-number strong { color: var(--teal-deep); font-size: 17px; }
.public-payment-summary { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 12px; margin: 25px 0; }
.public-payment-summary > div { padding: 15px; border: 1px solid var(--line); border-radius: 12px; }
.public-payment-summary span, .public-payment-summary strong { display: block; }
.public-payment-summary span { margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.public-payment-summary strong { font-size: 14px; }
.public-payment-summary .public-payment-balance { border-color: rgba(130,201,30,.45); background: rgba(130,201,30,.08); }
.public-payment-summary .public-payment-balance strong { color: #4f7e0d; font-size: 22px; }
.public-payment-lines { margin: 0 0 24px; overflow-x: auto; }
.public-payment-lines table { min-width: 480px; }
.public-payment-lines th { color: var(--muted); font-size: 10px; }
.public-payment-lines td { font-size: 13px; }
.public-payment-sandbox { margin: 0 0 13px; padding: 10px 12px; border: 1px solid #d5b95e; border-radius: 9px; color: #725b10; background: #fff8dc; font-size: 12px; font-weight: 750; text-align: center; }
.public-pay-button { min-height: 52px; font-size: 14px; }
.public-payment-message { min-height: 20px; margin: 10px 0 0; color: #a95447; font-size: 12px; text-align: center; }
.public-payment-trust { display: grid; gap: 3px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.public-payment-trust strong { color: var(--teal-deep); font-size: 12px; }
.public-payment-trust span { color: var(--muted); font-size: 11px; }
.public-payment-notice { margin: -15px -15px 25px; padding: 13px 15px; border-radius: 10px; font-size: 12px; font-weight: 750; }
.public-payment-notice.is-success { color: #245f42; background: #e8f6ed; }
.public-payment-notice.is-cancelled { color: #765b19; background: #fff7dc; }
.public-payment-footer { margin-top: 18px; color: #728079; font-size: 11px; text-align: center; }
@media (max-width: 620px) {
  .payment-connection-panel { grid-template-columns: 1fr; }
  .payment-connection-form { grid-template-columns: 1fr; }
  .payment-connection-form > * { grid-column: 1 !important; }
  .public-payment-shell { width: min(100% - 18px, 880px); padding-top: 12px; }
  .public-payment-header { margin-inline: 5px; }
  .public-payment-header img { width: 105px; }
  .public-payment-card { padding: 22px 17px; border-radius: 16px; }
  .public-payment-title { display: grid; }
  .public-payment-number { width: 100%; text-align: left; }
  .public-payment-summary { grid-template-columns: 1fr; }
}

/* Amahle Business Pulse — original mobile-first operating view */
:root {
  --pulse-forest: #173d32;
  --pulse-forest-deep: #0f2c25;
  --pulse-leaf: #b7ef45;
  --pulse-mint: #eaf7d3;
  --pulse-ice: #eef4f1;
}
.mobile-dock { display: none; }
.pulse-panel { position: relative; margin-bottom: 16px; padding: 26px 28px 20px; overflow: hidden; border-radius: 22px 22px 7px 22px; color: #fff; background: linear-gradient(140deg, var(--pulse-forest-deep), var(--pulse-forest)); box-shadow: 0 22px 44px rgba(15,44,37,.17); }
.pulse-panel::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px; content: ""; pointer-events: none; }
.pulse-panel::after { position: absolute; right: -85px; top: -120px; width: 320px; height: 320px; border: 60px solid rgba(183,239,69,.08); border-radius: 48% 52% 42% 58%; content: ""; transform: rotate(25deg); pointer-events: none; }
.pulse-head, .pulse-metrics, .pulse-chart, .pulse-chart-range { position: relative; z-index: 1; }
.pulse-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pulse-head h2 { margin-bottom: 3px; color: #fff; font-size: 22px; }
.pulse-head > div:first-child > p:last-child { margin: 0; color: #a9beb7; font-size: 11px; }
.pulse-head .eyebrow { color: var(--pulse-leaf); }
.pulse-periods { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.06); }
.pulse-periods button { padding: 7px 11px; border: 0; border-radius: 7px; color: #bdd0c9; background: transparent; font-size: 10px; font-weight: 800; }
.pulse-periods button:hover, .pulse-periods button.active { color: var(--pulse-forest-deep); background: var(--pulse-leaf); }
.pulse-metrics { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(160px, .7fr); gap: 22px; margin-top: 28px; }
.pulse-metrics > div { min-width: 0; }
.pulse-metrics span, .pulse-metrics small { display: block; color: #adc1ba; }
.pulse-metrics span { font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.pulse-metrics strong { display: block; margin: 4px 0 5px; color: #fff; font-size: clamp(30px, 5vw, 53px); letter-spacing: -.055em; line-height: 1; overflow-wrap: anywhere; }
.pulse-metrics > div:last-child strong { color: var(--pulse-leaf); }
.pulse-metrics small { font-size: 10px; }
.pulse-chart { height: 250px; margin-top: 16px; }
.pulse-chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-guides line { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.chart-area { fill: url(#pulseArea); }
.chart-line { fill: none; stroke: var(--pulse-leaf); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-labels text { fill: #a9beb7; font-family: inherit; font-size: 11px; }
.pulse-chart-range { margin-top: -5px; color: #93aba3; font-size: 10px; text-align: right; }
.cash-snapshot, .payment-snapshot, .stock-snapshot { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.cash-snapshot article, .payment-snapshot article, .stock-snapshot article { position: relative; min-width: 0; padding: 17px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px 14px 4px 14px; background: #fff; }
.cash-snapshot article::after, .payment-snapshot article::after, .stock-snapshot article::after { position: absolute; right: 0; bottom: 0; width: 34px; height: 4px; background: var(--pulse-leaf); content: ""; }
.cash-snapshot article.attention::after, .stock-snapshot article.danger::after { background: #c85d50; }
.stock-snapshot article.warning::after { background: #e1a936; }
.cash-snapshot span, .cash-snapshot small, .payment-snapshot span, .payment-snapshot small, .stock-snapshot span, .stock-snapshot small { display: block; color: var(--muted); font-size: 10px; }
.cash-snapshot span, .payment-snapshot span, .stock-snapshot span { font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.cash-snapshot strong, .payment-snapshot strong, .stock-snapshot strong { display: block; margin: 8px 0 6px; color: var(--pulse-forest-deep); font-size: clamp(19px, 2.2vw, 27px); letter-spacing: -.04em; }
.quick-actions-pulse { grid-template-columns: repeat(6, 1fr); margin-bottom: 16px; }
.quick-actions-pulse button { border-radius: 12px 12px 3px 12px; }
.pulse-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr); gap: 16px; }
.focus-stack { display: grid; align-content: start; gap: 16px; }
.live-chip { padding: 5px 8px; border-radius: 99px; color: #45720d; background: var(--pulse-mint); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.pulse-activity { display: grid; }
.pulse-activity-row { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 11px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #edf1ee; color: var(--ink); background: transparent; text-align: left; }
.pulse-activity-row:last-child { border-bottom: 0; }
.pulse-activity-row:hover .activity-copy b { color: var(--amahle-green-dark); }
.activity-kind { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px 10px 2px 10px; color: var(--pulse-forest); background: var(--pulse-ice); font-size: 16px; }
.activity-kind-payment { color: #fff; background: var(--pulse-forest); }
.activity-kind-stock { color: #4b750f; background: var(--pulse-mint); }
.activity-copy b, .activity-copy small, .activity-tail time, .activity-tail strong { display: block; }
.activity-copy b { font-size: 12px; text-transform: capitalize; }
.activity-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.activity-tail { min-width: 92px; text-align: right; }
.activity-tail time { color: var(--muted); font-size: 9px; }
.activity-tail strong { margin-top: 4px; color: var(--pulse-forest); font-size: 11px; }
.stock-glance { overflow: hidden; border-radius: 17px 17px 4px 17px; background: linear-gradient(145deg, #fff 60%, #f0f8e4); }
.stock-glance-value span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.stock-glance-value strong { display: block; margin: 5px 0 18px; color: var(--pulse-forest); font-size: 29px; letter-spacing: -.045em; }
.stock-glance-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.stock-glance-grid span { padding: 9px; border: 1px solid #dfe9dc; border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.72); font-size: 9px; text-align: center; }
.stock-glance-grid b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 17px; }
.stock-message { margin: 13px 0 0; color: #62716c; font-size: 10px; line-height: 1.45; }
.recent-documents-panel .mini-document { grid-template-columns: 27px minmax(0,1fr) auto; }
.recent-documents-panel .mini-document strong { font-size: 10px; }

/* Payments and inventory */
.payment-snapshot { grid-template-columns: repeat(3, minmax(0,1fr)); }
.stock-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.stock-toolbar input, .stock-toolbar select { margin-top: 0; }
.stock-toolbar input { max-width: 460px; }
.stock-toolbar select { width: 210px; }
.product-list { display: grid; gap: 9px; }
.product-row { display: grid; grid-template-columns: 42px minmax(190px,1fr) minmax(105px,.35fr) minmax(150px,.5fr) auto; align-items: center; gap: 15px; padding: 15px; border: 1px solid #e1e8e4; border-radius: 13px 13px 3px 13px; background: #fff; transition: border .15s, transform .15s; }
.product-row:hover { border-color: #b4d28a; transform: translateY(-1px); }
.product-symbol { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px 12px 3px 12px; color: var(--pulse-forest); background: var(--pulse-mint); font-size: 17px; font-weight: 900; }
.product-identity h3 { margin: 5px 0 3px; font-size: 14px; }
.product-identity p { margin: 0; color: var(--muted); font-size: 10px; }
.stock-status { display: inline-flex; padding: 4px 7px; border-radius: 3px; color: #35600b; background: #edf8df; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.stock-status-low-stock { color: #765710; background: #fff3ce; }
.stock-status-out-of-stock { color: #8a3e34; background: #fce9e5; }
.product-number span, .product-number small, .product-number strong { display: block; }
.product-number span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.product-number strong { margin: 4px 0; color: var(--pulse-forest); font-size: 16px; }
.product-number small { color: var(--muted); font-size: 9px; }
.product-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 230px; }
.stock-empty { display: grid; justify-items: center; gap: 6px; text-align: center; }
.stock-empty > span { color: var(--amahle-green); font-size: 28px; }
.stock-empty h3, .stock-empty p { margin: 0; }
.compact-form-grid { gap: 10px; }

/* Subscription confirmation */
.checkout-modal { width: min(570px, 100%); }
.checkout-modal > .eyebrow { color: var(--amahle-green-dark); }
.checkout-price { margin-bottom: 17px; color: var(--pulse-forest); font-size: 19px; }
.checkout-business { display: grid; grid-template-columns: 47px minmax(0,1fr); gap: 12px; margin-bottom: 14px; padding: 15px; border-radius: 14px 14px 4px 14px; background: var(--pulse-ice); }
.checkout-business-mark { display: grid; width: 47px; height: 47px; place-items: center; border-radius: 50%; color: #fff; background: var(--pulse-forest); font-size: 16px; font-weight: 900; }
.checkout-business small, .checkout-business b { display: block; }
.checkout-business small { color: var(--muted); font-size: 10px; }
.checkout-business b { margin: 2px 0 4px; font-size: 15px; }
.checkout-business p { margin: 0; color: var(--muted); font-size: 10px; }
.checkout-summary { padding: 8px 15px; border-radius: 12px; background: #fbfcfb; }
.checkout-summary p + p { border-top: 1px solid #edf1ee; }
.checkout-summary p b { color: var(--ink); text-align: right; }
.recurring-note { margin: 0 0 14px; padding: 16px; border: 1px solid #cfe1c0; border-radius: 14px 14px 4px 14px; }
.recurring-note .eyebrow { margin-bottom: 8px; color: var(--pulse-forest); }
.recurring-note strong { display: block; margin-bottom: 6px; color: var(--pulse-forest); }
.recurring-note > p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.checkout-consent { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 9px; margin: 17px 2px; color: var(--ink); font-size: 11px; line-height: 1.45; }
.checkout-consent input { width: 18px; height: 18px; margin: 0; accent-color: var(--amahle-green-dark); }
.checkout-modal .btn:disabled { cursor: not-allowed; opacity: .45; transform: none; }

@media (max-width: 1200px) {
  .quick-actions-pulse { grid-template-columns: repeat(3, 1fr); }
  .product-row { grid-template-columns: 42px minmax(170px,1fr) 100px 145px; }
  .product-actions { grid-column: 2 / -1; justify-content: flex-start; max-width: none; }
}
@media (max-width: 900px) {
  .pulse-grid { grid-template-columns: 1fr; }
  .cash-snapshot, .stock-snapshot { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-row { grid-template-columns: 42px minmax(150px,1fr) 100px 140px; }
  .product-actions { grid-column: 2 / -1; }
}
@media (max-width: 620px) {
  .app-shell { padding-bottom: 76px; }
  .sidebar { width: min(300px, 86vw); }
  .topbar { height: 62px; padding: 0 13px; }
  .topbar-title { display: flex; align-items: center; min-width: 0; margin-right: auto; }
  .topbar-title .topbar-logo { width: 42px; height: 35px; margin-right: 6px; }
  .topbar-title > span, .topbar-title > small { display: none; }
  .topbar-actions .btn-primary { min-height: 36px; padding-inline: 11px; font-size: 11px; }
  .page { padding: 21px 13px 28px; }
  .page-heading h1 { font-size: 29px; }
  .pulse-panel { margin-inline: -3px; padding: 19px 16px 15px; border-radius: 18px 18px 5px 18px; }
  .pulse-head { display: grid; gap: 13px; }
  .pulse-periods { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
  .pulse-periods button { padding: 8px 4px; font-size: 9px; }
  .pulse-metrics { grid-template-columns: 1.45fr .55fr; gap: 10px; margin-top: 22px; }
  .pulse-metrics strong { font-size: clamp(25px, 10vw, 38px); }
  .pulse-metrics > div:last-child strong { font-size: 34px; }
  .pulse-chart { height: 180px; margin-top: 10px; overflow: hidden; }
  .chart-labels text { font-size: 13px; }
  .cash-snapshot, .payment-snapshot, .stock-snapshot { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .cash-snapshot article, .payment-snapshot article, .stock-snapshot article { min-height: 104px; padding: 14px; }
  .cash-snapshot strong, .payment-snapshot strong, .stock-snapshot strong { font-size: 19px; overflow-wrap: anywhere; }
  .quick-actions-pulse { display: flex; gap: 8px; margin-right: -13px; padding-right: 13px; overflow-x: auto; scrollbar-width: none; }
  .quick-actions-pulse::-webkit-scrollbar { display: none; }
  .quick-actions-pulse button { min-width: 144px; }
  .pulse-activity-row { grid-template-columns: 34px minmax(0,1fr); }
  .activity-tail { grid-column: 2; display: flex; justify-content: space-between; min-width: 0; text-align: left; }
  .stock-toolbar { align-items: stretch; flex-direction: column; }
  .stock-toolbar input, .stock-toolbar select { width: 100%; max-width: none; }
  .stock-panel { padding: 10px; }
  .product-row { grid-template-columns: 38px minmax(0,1fr); gap: 10px; padding: 13px; }
  .product-symbol { width: 38px; height: 38px; }
  .product-number { grid-column: 2; }
  .product-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .product-actions .table-action { flex: 1; min-height: 34px; }
  .mobile-dock { position: fixed; z-index: 45; right: 8px; bottom: 8px; left: 8px; display: grid; grid-template-columns: repeat(5,1fr); padding: 7px 5px calc(7px + env(safe-area-inset-bottom)); border: 1px solid rgba(211,224,217,.9); border-radius: 17px; background: rgba(255,255,255,.95); box-shadow: 0 14px 38px rgba(15,44,37,.2); backdrop-filter: blur(18px); }
  .mobile-dock-button { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 5px 1px; border: 0; border-radius: 10px; color: #73817c; background: transparent; }
  .mobile-dock-button span { font-size: 17px; line-height: 1; }
  .mobile-dock-button b { max-width: 100%; overflow: hidden; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-dock-button.active { color: var(--pulse-forest); background: var(--pulse-mint); }
  body.subscription-locked .mobile-dock { display: none; }
  .checkout-modal { padding: 22px 18px; }
  .checkout-summary p { align-items: flex-start; }
  .checkout-summary p b { max-width: 57%; }
}