/* Whatsend's complete WhatsApp-inspired visual system. The conversation preview
   keeps its own faithful WhatsApp colors; every surrounding screen shares this. */
:root {
  color-scheme: light;
  font-family: "DM Sans", system-ui, sans-serif;
  color: #17352d;
  background: #f5f7f2;
  --green: #075e54;
  --mint: #e5f4eb;
  --lime: #25d366;
  --ink: #17352d;
  --muted: #526b62;
  --line: #dce7df;
  --white: #fff;
  --orange: #fff5df;
  --shadow: 0 16px 42px rgb(24 64 50 / 8%);
}

html { background: #f5f7f2; }
body {
  background: radial-gradient(ellipse at 80% 0, #e7f5eb 0, transparent 34%), #f5f7f2 !important;
  color: #17352d !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
}
button, input, textarea, select { font-family: inherit; }
::selection { background: #bceccc; color: #103d32; }
:focus-visible { outline: 3px solid #128c7e !important; outline-offset: 3px; }

/* App frame and navigation */
.topbar {
  background: rgb(255 255 255 / 96%) !important;
  color: #17352d !important;
  border-color: #dce7df !important;
  box-shadow: 0 5px 22px rgb(24 64 50 / 6%) !important;
}
.brand, .side-brand { color: #075e54 !important; }
.brand-mark {
  color: #fff !important;
  background: #075e54 !important;
  box-shadow: 0 6px 15px rgb(7 94 84 / 20%);
}
.brand-mark svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-nav {
  color: #17352d !important;
  background: #fff !important;
  border-color: #dce7df !important;
  box-shadow: 8px 0 28px rgb(24 64 50 / 4%);
}
.side-caption, .side-brand small, .side-account small { color: #648076 !important; }
.side-link { color: #405d52 !important; }
.side-link > .ui-icon { color: #128c7e !important; }
.side-link:hover { background: #f0f7f2 !important; color: #075e54 !important; }
.side-link.active {
  color: #075e54 !important;
  background: #e5f4eb !important;
  border-color: #b9dfc6 !important;
  box-shadow: inset 3px 0 #25d366 !important;
}
.side-link.active > .ui-icon { color: #075e54 !important; }
.account-dot { background: #25d366 !important; box-shadow: 0 0 0 5px rgb(37 211 102 / 13%) !important; }
.side-account { border-color: #dce7df !important; }
.side-account strong { color: #36574b !important; }
.credit-pill, .avatar {
  background: #e8f5ec !important;
  color: #075e54 !important;
  border-color: #c5e5cf !important;
}
.top-nav-pricing { color: #075e54 !important; }
.top-nav-pricing,
.top-right .btn-small {
  min-height: 42px;
  padding-right: 14px;
  padding-left: 14px;
  border-radius: 12px;
}
.top-nav-pricing:hover, .top-nav-pricing.active {
  color: #075e54 !important;
  background: #e5f4eb !important;
  border-color: #b9dfc6 !important;
}
.mobile-nav {
  background: rgb(255 255 255 / 97%) !important;
  border-color: #dce7df !important;
  box-shadow: 0 -8px 28px rgb(24 64 50 / 9%) !important;
}
.mobile-tab { color: #526b62 !important; }
.mobile-tab > .ui-icon { color: #648076 !important; }
.mobile-tab:hover, .mobile-tab.active {
  color: #075e54 !important;
  background: #e8f5ec !important;
  border-color: #c8e8d1 !important;
}
.mobile-tab.active > .ui-icon { color: #075e54 !important; }

/* Consistent typography and interactive controls */
.main h1, .main h2, .main h3, .section-head h2, .panel h2,
.pricing-heading h2, .calculator-intro h2, .guide-modal h2 { color: #17352d !important; }
.main p, .intro, .hint, .micro-copy, .metric-label, .metric-sub { color: #526b62 !important; }
.eyebrow { color: #128c7e !important; }
.btn-primary, .welcome-actions .btn-primary, .guide-actions .btn-primary {
  color: #fff !important;
  background: #075e54 !important;
  box-shadow: 0 8px 20px rgb(7 94 84 / 17%) !important;
}
.btn-primary:hover { background: #064c43 !important; }
.btn-primary:focus-visible { outline-color: #25d366 !important; }
.btn-soft, .btn-quiet {
  color: #075e54 !important;
  background: #e8f5ec !important;
  border: 1px solid #c5e5cf !important;
}
.btn-outline {
  color: #075e54 !important;
  background: #fff !important;
  border: 1px solid #c7ddd0 !important;
}
.btn-outline:hover, .btn-soft:hover, .btn-quiet:hover { background: #e5f4eb !important; }
.btn-danger { color: #a33a32 !important; background: #fff0ed !important; border-color: #efc5bd !important; }
.text-button { color: #075e54 !important; }
.input, .textarea, .select {
  color: #17352d !important;
  background: #fff !important;
  border-color: #cbdcd1 !important;
  box-shadow: inset 0 1px 2px rgb(24 64 50 / 3%);
}
.input::placeholder, .textarea::placeholder { color: #71877e !important; opacity: 1; }
.input:focus, .textarea:focus, .select:focus {
  border-color: #128c7e !important;
  box-shadow: 0 0 0 3px rgb(37 211 102 / 18%) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: #128c7e; }
.field label, .field { color: #29483c !important; }
.hint, .field-error { font-size: max(12px, 1em) !important; }
.field-error { color: #a3322c !important; }

/* Cards, empty states and the customer dashboard */
.hero-art, .welcome-banner {
  border-color: #b9ddc5 !important;
  background: radial-gradient(ellipse at 82% 42%, #d4f1dc 0, transparent 45%), linear-gradient(125deg, #fff, #edf7ef) !important;
  box-shadow: 0 18px 48px rgb(24 64 50 / 8%) !important;
}
.hero h1, .welcome-copy h1 { color: #17352d !important; }
.hero p, .welcome-copy > p { color: #526b62 !important; }
.art-message { box-shadow: 0 20px 55px rgb(24 64 50 / 17%) !important; }
.art-sticker { background: #fff !important; color: #36574b !important; border-color: #dce7df !important; box-shadow: var(--shadow) !important; }
.art-sticker strong { color: #075e54 !important; }
.card, .panel, .list-card, .campaign-list .card,
.admin-order, .review-box, .quick-message, .contact-method,
.template-chip, .tool, .file-chip, .upload-zone, .radio-card,
.optional-field, .admin-sql, .saved-list-card, .campaign-detail,
.campaign-preview, .pricing-offer, .pricing-calculator, .pricing-rates,
.pricing-simulator, .pricing-answers article, .simulator-total {
  color: #17352d !important;
  background-color: #fff !important;
  border-color: #dce7df !important;
  box-shadow: 0 8px 24px rgb(24 64 50 / 5%);
}
.card, .panel, .pricing-offer, .pricing-calculator, .campaign-preview { border-radius: 20px; }
.card:hover { box-shadow: 0 14px 32px rgb(24 64 50 / 10%) !important; }
.metric { color: #075e54 !important; }
.list-row { color: #29483c !important; border-color: #e6eee8 !important; }
.list-head { color: #648076 !important; }
.empty, .empty-contacts { color: #526b62 !important; }
.empty-contacts { background: #fff !important; border-color: #b9d8c4 !important; }
.empty-contacts-icon, .saved-list-icon, .journey-number, .public-benefit-icon {
  background: #e5f4eb !important; color: #075e54 !important; border-color: #c5e5cf !important;
}
.saved-list-card h3, .saved-list-count { color: #075e54 !important; }
.saved-list-card > p { color: #526b62 !important; }
.section-head h2 { color: #17352d !important; }
.section-head p { color: #526b62 !important; }
.status, .status.pending, .status.processing, .status.completed, .status.rejected {
  background: #e8f5ec !important; color: #075e54 !important; border-color: #c5e5cf !important;
}
.status.pending { background: #fff5df !important; color: #77561b !important; border-color: #ead7a7 !important; }
.status.processing { background: #eaf2ff !important; color: #315d91 !important; border-color: #c7d9f4 !important; }
.status.rejected { background: #fff0ed !important; color: #a33a32 !important; border-color: #efc5bd !important; }
.trust-note, .notice, .notice-delivery, .drop-card, .demo-explainer, .contact-help {
  color: #36574b !important;
  background: #eaf5ed !important;
  border-color: #c5e5cf !important;
}
.demo-explainer strong, .contact-help strong { color: #075e54 !important; }
.demo-explainer p, .contact-help p { color: #526b62 !important; }
.demo-label { color: #075e54 !important; background: #fff !important; border-color: #c5e5cf !important; }
.demo-indicator { background: #25d366 !important; }
.journey-card, .quick-message, .contact-method { color: #29483c !important; background: #fff !important; border-color: #dce7df !important; }
.journey-card strong, .quick-message-title { color: #17352d !important; }
.journey-card p, .quick-message span { color: #526b62 !important; }
.quick-message:hover, .quick-message.selected, .contact-method.selected,
.radio-card.selected { color: #075e54 !important; background: #e8f5ec !important; border-color: #83c99a !important; }
.contact-method > span { color: #075e54 !important; background: #e5f4eb !important; }
.contact-method small { color: #526b62 !important; }
.upload-zone { background: #f8fbf8 !important; border-color: #91c9a3 !important; }
.upload-zone p { color: #526b62 !important; }
.file-chip { background: #f3f8f4 !important; }
.template-chip { background: #f4faf5 !important; color: #075e54 !important; }
.toolbar .tool { color: #075e54 !important; background: #fff !important; }

/* Campaign assistant, review and success screens */
.steps { color: #648076 !important; }
.step, .step.active { color: #075e54 !important; }
.step b, .step.active b, .step.done b {
  color: #075e54 !important; background: #e5f4eb !important; border-color: #b9dfc6 !important;
}
.step.active b, .step.done b { color: #fff !important; background: #075e54 !important; border-color: #075e54 !important; }
.step-line { background: #cbdcd1 !important; }
.step-instruction { background: #eaf5ed !important; border-color: #c5e5cf !important; border-left-color: #25d366 !important; }
.step-instruction span { color: #075e54 !important; }
.step-instruction strong { color: #17352d !important; }
.step-instruction p { color: #526b62 !important; }
.wizard-actions {
  background: rgb(255 255 255 / 96%) !important;
  border-color: #dce7df !important;
  box-shadow: 0 10px 28px rgb(24 64 50 / 12%) !important;
}
.wizard-live-estimate { background: #eaf5ed !important; border-color: #b9dfc6 !important; color: #29483c !important; box-shadow: 0 8px 22px rgb(24 64 50 / 9%) !important; }
.estimate-price > span, .estimate-credits > span { color: #526b62 !important; }
.estimate-price > strong, .live-price, .simulator-result { color: #075e54 !important; }
.estimate-price > small, .estimate-credits > strong { color: #36574b !important; }
.estimate-credits { border-color: #c5e5cf !important; }
.review-box { background: #fff !important; }
.review-box span { color: #648076 !important; }
.review-box strong { color: #17352d !important; }
.preview, .message-preview-live { background: #ece5dd !important; color: #17352d !important; }
.campaign-preview { background: #fff !important; }
.campaign-preview-heading h3 { color: #17352d !important; }
.preview-device-label { color: #075e54 !important; background: #e8f5ec !important; border-color: #c5e5cf !important; }
.campaign-preview-note { color: #526b62 !important; }
.success-mark { color: #075e54 !important; background: #dff4e4 !important; }
.success-balance { color: #075e54 !important; background: #eaf5ed !important; }
.campaign-detail { background: #fff !important; }
.campaign-timeline .timeline-item { color: #36574b !important; background: #eaf5ed !important; }
.admin-banner { color: #77561b !important; background: #fff5df !important; border-color: #ead7a7 !important; }
.admin-order h3 { color: #17352d !important; }
.admin-order p, .admin-order .message-excerpt { color: #526b62 !important; }
.admin-tools .select, .admin-counts .input { color: #17352d !important; background: #fff !important; }

/* Pricing and public-facing marketing */
.pricing-hero, .pricing-calculator, .pricing-rates, .pricing-simulator {
  color: #17352d !important;
  background: linear-gradient(145deg, #fff, #f1f8f2) !important;
  border-color: #cce2d2 !important;
  box-shadow: 0 12px 32px rgb(24 64 50 / 6%) !important;
}
.pricing-hero h1, .pricing-heading h2, .calculator-intro h2 { color: #17352d !important; }
.pricing-hero p, .pricing-heading p, .calculator-intro p, .pricing-footnote, .simulator-help { color: #526b62 !important; }
.pricing-minimum-banner, .pricing-minimum, .pricing-tier:nth-child(4), .pricing-addons,
.simulator-check, .pricing-answers article > span {
  color: #075e54 !important; background: #e8f5ec !important; border-color: #c5e5cf !important;
}
.pricing-minimum-banner strong { color: #075e54 !important; }
.pricing-minimum-banner small { color: #526b62 !important; }
.pricing-minimum-banner small, .pricing-rates-heading span:not(.pricing-minimum),
.simulator-heading span:not(.simulator-icon), .pricing-addons p, .pricing-addons small,
.simulator-check small, .simulator-total > p { color: #526b62 !important; }
.pricing-rates-heading strong, .simulator-heading strong, .pricing-addons > strong,
.simulator-check, .simulator-check b { color: #17352d !important; }
.pricing-tier { color: #36574b !important; background: #f8fbf8 !important; border-color: #e1ebe3 !important; }
.pricing-tier strong, .pricing-addons b, .pricing-offer > strong, .pricing-example b,
.simulator-total > strong { color: #075e54 !important; }
.pricing-tier small, .pricing-offer > strong small { color: #526b62 !important; }
.pricing-offer-label { color: #128c7e !important; }
.pricing-offer-icon, .simulator-icon { color: #075e54 !important; background: #e5f4eb !important; border-color: #c5e5cf !important; }
.pricing-offer h3, .pricing-answers h3 { color: #17352d !important; }
.pricing-offer p, .pricing-answers p { color: #526b62 !important; }
.pricing-example { color: #526b62 !important; border-color: #e1ebe3 !important; }
.pricing-offer, .pricing-offer-featured {
  padding: 24px !important;
  color: #17352d !important;
  background: #fff !important;
  background-image: none !important;
  border-color: #dce7df !important;
  box-shadow: 0 10px 28px rgb(24 64 50 / 7%) !important;
}
.pricing-offer-featured { border-color: #83c99a !important; }
.pricing-volume { color: #17352d !important; border-color: #b9dfc6 !important; background: linear-gradient(145deg, #fff, #edf8f0) !important; box-shadow: 0 8px 24px rgb(24 64 50 / 5%) !important; }
.pricing-volume-heading h2 { color: #17352d !important; }
.pricing-volume-heading p { color: #526b62 !important; }
.pricing-volume-heading p b { color: #075e54 !important; }
.pricing-volume-card { color: #17352d !important; background: #fff !important; border-color: #dce7df !important; box-shadow: 0 7px 22px rgb(24 64 50 / 5%); }
.pricing-volume-card > header { background: #f4faf5 !important; border-color: #e1ebe3 !important; }
.pricing-volume-card > header span, .pricing-volume-option b { color: #17352d !important; }
.pricing-volume-card > header small, .pricing-volume-option > span small, .pricing-volume-option > strong small { color: #526b62 !important; }
.pricing-volume-option { border-color: #e9efea !important; }
.pricing-volume-option > strong { color: #075e54 !important; }
.pricing-volume-best { border-color: #25a968 !important; }
.pricing-volume-best > header { background: #eaf8ee !important; }
.pricing-volume-full, .pricing-volume-best .pricing-volume-full { background: #e3f5e8 !important; }
.pricing-volume-full b { color: #075e54 !important; }
.pricing-volume-example { color: #36574b !important; background: #eaf5ed !important; }
.pricing-volume-example b { color: #075e54 !important; }
.pricing-thresholds {
  color: #17352d !important;
  border-color: #b9dfc6 !important;
  background: linear-gradient(145deg, #fff, #edf8f0) !important;
  box-shadow: 0 8px 24px rgb(24 64 50 / 5%) !important;
}
.pricing-threshold-head h2 { color: #17352d !important; }
.pricing-threshold-head p { color: #526b62 !important; }
.pricing-threshold-head p b { color: #075e54 !important; }
.pricing-threshold-table { border-color: #dce7df !important; }
.pricing-threshold-row { border-color: #e1ebe3 !important; }
.pricing-threshold-row > * { color: #36574b !important; border-color: #e1ebe3 !important; }
.pricing-threshold-row strong { color: #17352d !important; }
.pricing-threshold-row strong small { color: #526b62 !important; }
.pricing-threshold-labels { background: #f4faf5 !important; }
.pricing-threshold-labels > * { color: #526b62 !important; }
.pricing-threshold-full { background: linear-gradient(90deg, #eaf8ee, #f9fdfa) !important; }
.pricing-threshold-full > :first-child { color: #075e54 !important; }
.threshold-save { color: #075e54 !important; background: #e4f6eb !important; }
.pricing-hero-art {
  background: radial-gradient(circle, #075e54 0 54%, #128c7e 55% 100%) !important;
  border-color: #25d366 !important;
  box-shadow: 0 0 0 18px #dff4e4, 0 0 0 36px #eaf5ed !important;
}
.pricing-hero-art > span { color: #d8f8e2 !important; }
.pricing-hero-art i { color: #b6f1c7 !important; }
.pricing-hero-art b { color: #075e54 !important; background: #fff !important; border-color: #b9dfc6 !important; }
.pricing-answers article { background: #fff !important; }
.pricing-provisional { color: #77561b !important; background: #fff5df !important; border-color: #ead7a7 !important; }
.simulator-total { background: #e8f5ec !important; border-color: #b9dfc6 !important; }
.simulator-total > div > span, .simulator-total > span { color: #36574b !important; }
.simulator-total > div > p, .simulator-total > p { color: #526b62 !important; }
.home-pricing-preview, .public-last-cta {
  color: #17352d !important;
  background: linear-gradient(120deg, #e5f4eb, #f3f8f3) !important;
  border-color: #b9dfc6 !important;
  box-shadow: 0 12px 32px rgb(24 64 50 / 7%) !important;
}
.home-pricing-copy h2, .public-last-cta h2 { color: #17352d !important; }
.home-pricing-copy p, .home-price-points, .public-last-cta p { color: #526b62 !important; }
.public-hero {
  color: #17352d !important;
  border-color: #c7e0ce !important;
  background: radial-gradient(ellipse at 82% 48%, #ccefd4 0, transparent 43%), linear-gradient(125deg, #fff, #eff8f0) !important;
  box-shadow: 0 18px 48px rgb(24 64 50 / 8%) !important;
}
.public-hero-copy h1, .public-section-heading h2 { color: #17352d !important; }
.public-hero-copy > p:not(.public-opening-note), .public-opening-note, .public-section-heading p { color: #526b62 !important; }
.public-feature-badge { color: #075e54 !important; background: #e5f4eb !important; border-color: #b9dfc6 !important; box-shadow: none !important; }
.public-feature-badge > span { color: #fff !important; background: #075e54 !important; }
.public-hero-art { border-radius: 22px; }
.public-protection-orbit, .public-art-sticker { color: #075e54 !important; background: #fff !important; border-color: #c5e5cf !important; box-shadow: var(--shadow) !important; }
.public-shield, .public-art-sticker span { color: #075e54 !important; background: #dff4e4 !important; }
.public-benefits article, .public-steps article, .public-faq-item {
  color: #17352d !important; background: #fff !important; border-color: #dce7df !important;
  box-shadow: 0 7px 22px rgb(24 64 50 / 5%);
}
.public-benefit-feature { background: #eaf5ed !important; border-color: #b9dfc6 !important; }
.public-benefit-kicker { color: #075e54 !important; }
.public-benefits h2, .public-steps h3, .public-faq-item summary { color: #17352d !important; }
.public-benefits p, .public-steps p, .public-faq-item p { color: #526b62 !important; }
.public-faq-item[open] { background: #f8fbf8 !important; border-color: #b9dfc6 !important; }
.public-faq-item summary::after { color: #075e54 !important; background: #e5f4eb !important; }
.public-faq-item summary:focus-visible, .public-home button:focus-visible, .public-home a:focus-visible { outline-color: #128c7e !important; }
.public-sender-disclosure, .public-risk-note { color: #526b62 !important; }
.public-sender-disclosure strong { color: #17352d !important; }
.public-delivery-note { color: #36574b !important; background: #eaf5ed !important; border-color: #c5e5cf !important; }
.notice-delivery strong { color: #075e54 !important; }

/* Guide, dialog, notifications and footer */
.guide-backdrop { background: rgb(13 39 31 / 46%) !important; }
.guide-modal {
  color: #17352d !important;
  background: #fff !important;
  border-color: #d3e4d8 !important;
  box-shadow: 0 28px 90px rgb(13 39 31 / 28%) !important;
}
.guide-kicker { color: #128c7e !important; }
.guide-modal h2 { color: #17352d !important; }
.guide-lead, .guide-steps p { color: #526b62 !important; }
.guide-steps article { background: #f8fbf8 !important; border-color: #dce7df !important; }
.guide-steps strong { color: #17352d !important; }
.guide-steps article > span { color: #075e54 !important; background: #e5f4eb !important; }
.guide-privacy { color: #36574b !important; background: #eaf5ed !important; }
.guide-close { color: #405d52 !important; background: #f3f8f4 !important; border-color: #dce7df !important; }
.guide-close:hover { color: #075e54 !important; background: #e5f4eb !important; }
.toast { color: #fff !important; background: #075e54 !important; box-shadow: var(--shadow) !important; }
.toast.toast-success { color: #fff !important; background: #075e54 !important; border-color: #128c7e !important; }
.toast.toast-error { color: #fff !important; background: #a3322c !important; border-color: #842722 !important; }
.footer { color: #526b62 !important; border-color: #dce7df !important; }
.footer a, .footer .text-button { color: #075e54 !important; }

/* The navigation labels and small helper copy remain comfortably readable. */
.side-caption, .side-brand small, .side-account small, .side-account strong,
.eyebrow, .metric-label, .metric-sub, .hint, .micro-copy, .counter,
.step, .step-instruction span, .pricing-offer-label, .pricing-minimum,
.pricing-provisional, .pricing-tier, .pricing-addons p, .pricing-addons small,
.pricing-footnote, .simulator-help, .simulator-check b, .simulator-check small,
.pricing-example, .pricing-answers p, .guide-kicker, .guide-steps p,
.campaign-preview-note, .preview-device-label, .public-opening-note,
.public-risk-note, .public-sender-disclosure, .public-benefits p,
.public-steps p, .public-faq-item p { font-size: max(12px, 1em) !important; }
small { font-size: max(12px, 1em) !important; }
.top-right .btn-small, .top-nav-pricing, .list-head, .footer { font-size: max(12px, 1em) !important; }
.pricing-offer > strong small { font-size: 13px !important; }
.pricing-threshold-row strong small { font-size: 12px !important; }
.upload-credit-note { display: block; margin-top: 9px; color: #526b62 !important; font-size: 12px !important; font-weight: 700; line-height: 1.45; }

@media (max-width: 980px) {
  .mobile-nav { border-top: 1px solid #dce7df !important; }
}
@media (max-width: 760px) {
  .public-hero { background: linear-gradient(145deg, #fff, #eff8f0) !important; }
  .guide-modal { max-height: min(92vh, 850px); }
  .wizard-actions { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .app-shell.is-wizard .wizard-actions { bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 900px) {
  .pricing-offer, .pricing-offer-featured { padding: 20px !important; }
}
@media (max-width: 600px) {
  .pricing-offer, .pricing-offer-featured { padding: 17px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Credits and imported campaign reports */
.credit-pill-button { cursor: pointer; color: #075e54; }
.credit-pill-button:hover { border-color: #83c99a; background: #eaf5ed; }
.credits-page, .report-page { max-width: 1120px; }
.credits-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 28px; padding: 34px 38px; border: 1px solid #b9dfc6; border-radius: 24px; background: radial-gradient(circle at 92% 0, #c8f2d6 0, transparent 34%), linear-gradient(135deg, #fff, #edf8f0); }
.credits-hero h1, .report-top h1 { margin: 9px 0 10px; color: #17352d; font: 800 clamp(30px, 4vw, 46px)/1.08 "Manrope", sans-serif; letter-spacing: -1.6px; }
.credits-hero p, .report-top p { max-width: 610px; margin: 0; color: #526b62; font-size: 15px; line-height: 1.6; }
.credits-balance { flex: 0 0 210px; padding: 23px; border: 1px solid #b9dfc6; border-radius: 19px; background: #fff; box-shadow: 0 12px 30px rgb(24 64 50 / 8%); }
.credits-balance span, .credits-balance small { display: block; color: #526b62; font-size: 12px; font-weight: 700; }
.credits-balance strong { display: block; margin: 6px 0 3px; color: #075e54; font: 800 35px/1 "Manrope", sans-serif; letter-spacing: -1.5px; }
.credits-section { padding: 4px 0 20px; }
.credit-pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; }
.credit-pack { min-height: 184px; padding: 20px; border: 1px solid #dce7df; border-radius: 18px; background: #fff; color: #17352d; text-align: left; transition: .16s border-color, .16s box-shadow, .16s transform; }
.credit-pack:hover, .credit-pack.selected { transform: translateY(-2px); border-color: #25a968; box-shadow: 0 13px 28px rgb(24 64 50 / 10%); }
.credit-pack.selected { background: linear-gradient(145deg, #f8fffa, #e8f6ec); box-shadow: inset 0 0 0 1px #83c99a, 0 13px 28px rgb(24 64 50 / 10%); }
.credit-pack span, .credit-pack small { display: block; color: #526b62; font-size: 12px; font-weight: 700; }
.credit-pack strong { display: block; margin: 18px 0 5px; color: #17352d; font: 800 25px/1.1 "Manrope", sans-serif; letter-spacing: -.8px; }
.credit-pack b { display: block; margin-bottom: 8px; color: #075e54; font: 800 20px "Manrope", sans-serif; }
.promo-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr); align-items: center; gap: 10px 24px; margin-top: 18px; padding: 21px 23px; border: 1px solid #b9dfc6; border-radius: 18px; background: linear-gradient(120deg, #effaf2, #fff); }
.promo-card h2 { margin: 4px 0; color: #17352d; font: 800 20px/1.25 "Manrope", sans-serif; }
.promo-card p { margin: 0; color: #526b62; font-size: 13px; }
.promo-entry { display: flex; align-items: end; gap: 10px; }
.promo-entry .field { display: grid; flex: 1; gap: 6px; color: #36574b; font-size: 13px; font-weight: 700; }
.promo-entry .input { min-height: 44px; text-transform: uppercase; }
.promo-feedback { grid-column: 1 / -1; font-weight: 700; }
.promo-feedback.is-valid { color: #087443; }
.promo-feedback.is-invalid { color: #a83232; }
.promo-disclaimer { margin: 10px 2px 0; color: #64776e; font-size: 12px; line-height: 1.5; }
.credit-checkout h2 s { margin-right: 6px; color: #64776e; font-size: 16px; font-weight: 600; }
.credit-checkout { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 18px; padding: 22px 24px; border: 1px solid #b9dfc6; border-radius: 18px; background: #eaf5ed; }
.credit-checkout h2 { margin: 4px 0; color: #17352d; font: 800 22px "Manrope", sans-serif; }
.credit-checkout p { margin: 0; color: #526b62; font-size: 13px; }
.credits-explained { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.credits-explained article { display: flex; gap: 13px; padding: 18px; border: 1px solid #dce7df; border-radius: 16px; background: #fff; }
.credits-explained b { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #e5f4eb; color: #075e54; font-size: 12px; }
.credits-explained h3 { margin: 0 0 5px; color: #17352d; font: 800 15px "Manrope",sans-serif; }
.credits-explained p { margin: 0; color: #526b62; font-size: 13px; line-height: 1.5; }
.report-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 0 0 22px; }
.report-top .text-button { display: block; padding-left: 0; margin-bottom: 14px; }
.report-top h1 { font-size: clamp(26px, 3.5vw, 40px); }
.report-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.report-overview article { padding: 18px; border: 1px solid #dce7df; border-radius: 16px; background: #fff; }
.report-overview span { display: block; color: #526b62; font-size: 12px; font-weight: 800; letter-spacing: .4px; }
.report-overview strong { display: block; margin-top: 9px; color: #17352d; font: 800 30px/1 "Manrope",sans-serif; }
.report-file-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 15px 0; padding: 14px 17px; border: 1px solid #c5e5cf; border-radius: 14px; background: #f4fbf6; }
.report-file-bar b, .report-file-bar small { display: block; }
.report-file-bar b { color: #17352d; font-size: 13px; }
.report-file-bar small { margin-top: 3px; color: #526b62; font-size: 12px; }
.report-file-bar > div { display: flex; gap: 8px; flex-wrap: wrap; }
.report-table-card { padding: 24px; border: 1px solid #dce7df; border-radius: 20px; background: #fff; }
.report-table-scroll { overflow: auto; border: 1px solid #e3ece5; border-radius: 12px; }
.report-table-card table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.report-table-card th { padding: 12px 15px; background: #f5faf6; color: #526b62; font-size: 11px; letter-spacing: .6px; }
.report-table-card td { padding: 12px 15px; border-top: 1px solid #e7eee9; color: #36574b; }
.report-status-sent { color: #26745a !important; background: #e4f6ed !important; }
.report-status-delivered { color: #1c638d !important; background: #e7f4fb !important; }
.report-status-read { color: #7856a2 !important; background: #f2ebff !important; }
.report-status-failed { color: #a3322c !important; background: #ffeded !important; }
.campaign-tracking-refresh { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:16px 0 22px; padding:14px 16px; border:1px solid #dce7df; border-radius:14px; background:#fff; min-width:0; }
.campaign-tracking-refresh > div { min-width:0; }.campaign-tracking-refresh .hint { margin:0; font-size:13px; line-height:1.6; }.campaign-tracking-refresh .btn { flex-shrink:0; min-height:44px; }
.report-result-progress { margin:0 0 16px; padding:14px 16px; background:#eaf7ee; color:#24543f; border-radius:12px; font-size:14px; line-height:1.6; }
.report-page .report-table-card th { font-size:12px; }.report-page .report-top h1 { overflow-wrap:anywhere; }.report-pagination { justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; }.report-pagination .btn { min-height:44px; }
@media(max-width:540px){.campaign-tracking-refresh{align-items:stretch;flex-direction:column;padding:14px}.campaign-tracking-refresh .btn{width:100%}.report-pagination>span{order:-1;flex-basis:100%;text-align:center}.report-pagination .btn{flex:1;padding:10px}.report-page .report-table-card{padding:16px}.report-page .report-table-card :is(th,td){padding:10px;white-space:normal}}
.report-import-empty { display: grid; grid-template-columns: minmax(0,1fr) 260px; align-items: center; gap: 30px; padding: 38px; border: 1px dashed #83c99a; border-radius: 23px; background: linear-gradient(135deg,#fff,#edf8f0); }
.report-import-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 15px; border-radius: 15px; background: #075e54; color: #fff; font: 800 32px/1 "Manrope",sans-serif; }
.report-import-empty h2 { margin: 8px 0; color: #17352d; font: 800 28px/1.2 "Manrope",sans-serif; letter-spacing: -.7px; }
.report-import-empty p { max-width: 630px; color: #526b62; line-height: 1.6; }
.report-import-empty ul { margin: 17px 0 22px; padding-left: 18px; color: #36574b; font-size: 13px; line-height: 1.75; }
.report-import-visual { display: grid; position: relative; width: 170px; height: 188px; margin: auto; place-items: center; border: 1px solid #83c99a; border-radius: 22px; background: #fff; color: #075e54; box-shadow: 0 17px 35px rgb(24 64 50 / 10%); font: 800 35px "Manrope",sans-serif; }
.report-import-visual b { position: absolute; right: -12px; bottom: 25px; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: #25d366; color: #fff; font-size: 23px; }
.report-import-visual small { position: absolute; bottom: 18px; color: #526b62; font: 700 12px "DM Sans",sans-serif; }
.report-hidden-input { display: none; }
@media (max-width: 800px) { .credits-hero, .report-import-empty { grid-template-columns: 1fr; display: grid; padding: 25px 21px; } .credits-balance { width: 100%; } .credit-pack-grid { grid-template-columns: repeat(2,1fr); } .promo-card { grid-template-columns: 1fr; } .report-overview { grid-template-columns: repeat(2,1fr); } .report-import-visual { display: none; } }
@media (max-width: 560px) { .credit-checkout, .report-top, .report-file-bar { align-items: stretch; flex-direction: column; } .credit-checkout .btn { width: 100%; } .promo-entry { align-items: stretch; flex-direction: column; } .credits-explained { grid-template-columns: 1fr; } .report-table-card { padding: 17px; } .report-table-card th, .report-table-card td { white-space: nowrap; } }
.crypto-checkout-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; box-sizing: border-box; border: 1px solid #c6ded4; border-radius: 20px; padding: 24px; background: #fff; color: #17352d; font-family: "DM Sans", sans-serif; }
.crypto-checkout-dialog::backdrop { background: rgb(11 35 29 / 65%); }
.crypto-checkout-dialog h2 { margin-top: 0; }
.crypto-checkout-dialog form { margin-top: 20px; text-align: right; }
.crypto-assets { display: grid; gap: 8px; }
.crypto-assets > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border: 1px solid #d9e8e0; border-radius: 10px; }
.crypto-assets small { margin-left: auto; color: #526b62; font-size: 12px; }
.crypto-assets span { font-size: 13px; color: #526b62; }