/* Portal theme: every selector is gated; shared Register/Homepage stay unchanged. */
body.portal-native {
  --flat-bg: #f8f5f1;
  --flat-surface: #ffffff;
  --flat-surface-soft: #ffffff;
  --flat-shell: #ffffff;
  --flat-orange-soft: #fff2e3;
  --flat-text: #2c2622;
  --flat-muted: #71665e;
  --flat-line: #e8e0d8;
  --flat-orange: #b44818;
  --flat-orange-dark: #b44818;
  --flat-green: #226846;
  --flat-red: #a1372b;
  --flat-success-surface: #eaf4ed;
  --flat-danger-surface: #fff0ec;
  --flat-yellow: #fff4db;
  --flat-shadow: transparent;
  --pn-bg: var(--flat-bg);
  --pn-surface: var(--flat-surface);
  --pn-text: var(--flat-text);
  --pn-muted: var(--flat-muted);
  --pn-line: var(--flat-line);
  --pn-orange: var(--flat-orange);
  --pn-warning: #7e541e;
  --usage-action: #ff8a32;
  --usage-action-hover: #ff9d4d;
  --usage-action-ink: #44220d;
  --usage-gradient: #ff6b24;
  --usage-amber: #ffbd3f;
  --usage-progress: #d5571c;
  --usage-track: #f2e6da;
  background: var(--flat-bg);
  color: var(--flat-text);
  font-family: var(--pn-font-text);
}
html[data-theme="dark"] body.portal-native {
  --flat-bg: #181614;
  --flat-surface: #25211e;
  --flat-surface-soft: #25211e;
  --flat-shell: #25211e;
  --flat-orange-soft: #38291e;
  --flat-text: #fff8f2;
  --flat-muted: #c2b5aa;
  --flat-line: #453b34;
  --flat-orange: #ffb07b;
  --flat-orange-dark: #ffb07b;
  --flat-green: #a2dfb8;
  --flat-red: #ffb1a3;
  --flat-success-surface: #203b2c;
  --flat-danger-surface: #482a25;
  --flat-yellow: #413421;
  --pn-warning: #f1cb8c;
  --usage-action: #ffad70;
  --usage-action-hover: #ffc18e;
  --usage-action-ink: #31170b;
  --usage-gradient: #ff8a32;
  --usage-amber: #ffbd3f;
  --usage-progress: #ffad70;
  --usage-track: #47372a;
}
body.portal-native .portal-theme-view button { font-family: inherit; }
body.portal-native .portal-theme-view :is(button,a):focus-visible { outline: 3px solid #8a50c4; outline-offset: 3px; }
body.portal-native .portal-theme-view .portal-native-main { padding: 32px; }
body.portal-native .portal-theme-view .portal-native-main > * { max-width: 1100px; }
body.portal-native .portal-theme-view :is(.portal-native-sidebar,.portal-native-mobile-header,.portal-native-bottom-nav) { backdrop-filter: none; }
body.portal-native .portal-theme-view .portal-native-brand { min-height: 44px; }
body.portal-native .portal-theme-view .portal-native-brand-mark { border-radius: 10px; }
body.portal-native .portal-theme-view .portal-native-more-toggle { width: 44px; height: 44px; }
body.portal-native .portal-theme-view :is(.portal-native-side-item,.portal-native-bottom-item) { font-size: .875rem; font-weight: 600; min-height: 48px; }
body.portal-native .portal-theme-view :is(.portal-native-side-item,.portal-native-bottom-item).active { color: var(--flat-orange-dark) !important; }
body.portal-native .portal-theme-view .portal-native-more-item { min-height: 44px; font-size: .875rem; }
body.portal-native .portal-theme-view .portal-native-whatsapp-help { background: var(--flat-success-surface) !important; color: var(--flat-green) !important; border-color: var(--flat-line) !important; }
body.portal-native .portal-theme-view .portal-native-whatsapp-help small { color: var(--flat-green) !important; }
body.portal-native .portal-theme-view .portal-native-account-mini > span { background: var(--flat-orange-soft); color: var(--flat-orange-dark); }
body.portal-native .portal-theme-view .portal-native-account-mini small { white-space: normal; overflow-wrap: anywhere; }
body.portal-native .portal-theme-view :is(.portal-native-signout,.customer-language-toggle button) { min-height: 44px; }
body.portal-native .portal-theme-view .portal-native-attention { margin-bottom: 16px; padding: 16px; border-radius: 12px; align-items: center; flex-wrap: wrap; gap: 12px; }
body.portal-native .portal-theme-view .portal-native-attention :is(strong,b) { font-size: .875rem; }
body.portal-native .portal-theme-view .portal-native-attention small { font-size: .8125rem; }
body.portal-native .portal-theme-view .portal-native-alert { font-size: .875rem; line-height: 1.6; border-radius: 12px; }
body.portal-native .portal-theme-view .portal-native-alert button { min-height: 44px; }
body.portal-native .portal-theme-view .portal-native-alert.warning,
body.portal-native .portal-theme-view .portal-native-attention.payment { color: var(--pn-warning) !important; }
body.portal-native .portal-theme-view .portal-usage-page-head { margin-bottom: 16px; }
body.portal-native .portal-theme-view .portal-usage-page-head h1 { font-size: 1.5625rem; letter-spacing: -.04em; line-height: 1.3; margin: 0; color: var(--flat-text); }
body.portal-native .portal-theme-view .portal-native-server-list { gap: 24px; grid-template-columns: minmax(0,1fr); }
body.portal-native .portal-theme-view .portal-usage-service { padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; overflow: visible; }
body.portal-native .portal-theme-view .portal-usage-service::after { display: none; }
body.portal-native .portal-theme-view .portal-usage-selector { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0; border: 0; background: transparent !important; margin: 0 0 16px; max-width: 440px; }
body.portal-native .portal-theme-view .portal-usage-selector button { display: grid; gap: 4px; min-height: 64px; padding: 11px 8px; border: 1px solid var(--flat-line); background: var(--flat-surface) !important; color: var(--flat-text) !important; box-shadow: none; white-space: normal; overflow: visible; border-radius: 12px; text-align: center; }
body.portal-native .portal-theme-view .portal-usage-selector button.selected { background: var(--flat-orange-soft) !important; border-color: var(--flat-orange); }
body.portal-native .portal-theme-view .portal-usage-selector button[data-usage-region$="|singapore-flex"] { grid-column: 1/-1; }
body.portal-native .portal-theme-view .portal-native-usage-region-name { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 4px; line-height: 1.3; }
body.portal-native .portal-theme-view .portal-native-usage-region-title { font-size: .875rem; display: flex; align-items: center; gap: 5px; }
body.portal-native .portal-theme-view .portal-native-usage-region-title b { font-size: .9375rem; }
body.portal-native .portal-theme-view .portal-native-usage-region-name em { font-size: .6875rem; order: 0; letter-spacing: 0; text-transform: none; text-shadow: none; color: var(--flat-muted); font-weight: 500; }
body.portal-native .portal-theme-view .portal-native-trial-tag { font-size: .6875rem; color: var(--flat-muted) !important; letter-spacing: 0; font-weight: 500; white-space: normal; overflow: visible; }
body.portal-native .portal-theme-view .portal-usage-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
body.portal-native .portal-theme-view .portal-usage-grid > * { min-width: 0; }
body.portal-native .portal-theme-view :is(.portal-usage-summary,.portal-usage-connections) { position: relative; padding: 20px; border: 1px solid var(--flat-line); border-radius: 16px; background: var(--flat-surface); overflow-wrap: anywhere; }
/* Owner-approved accent exception to the shared flat-theme image reset. */
body.portal-native #root .portal-theme-view .portal-usage-summary::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 16px 16px 0 0; background-image: linear-gradient(100deg,var(--usage-gradient),var(--usage-amber)) !important; }
body.portal-native .portal-theme-view .portal-native-card-heading { align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 0; }
body.portal-native .portal-theme-view .portal-native-card-heading h2 { margin: 0; font-size: .9375rem; font-weight: 700; line-height: 1.5; }
body.portal-native .portal-theme-view .portal-native-pill { font-size: .6875rem; min-height: 26px; padding: 4px 8px; text-transform: none; letter-spacing: 0; border: 0; border-radius: 6px; font-weight: 600; }
body.portal-native .portal-theme-view .portal-usage-balance { margin: 24px 0 18px; }
body.portal-native .portal-theme-view .portal-usage-balance > p { font-size: .8125rem; color: var(--flat-muted); margin: 0 0 6px; }
body.portal-native .portal-theme-view .portal-usage-balance > strong { display: block; font-size: 2.875rem; font-weight: 750; letter-spacing: -.05em; line-height: 1.15; color: var(--flat-text); font-variant-numeric: tabular-nums; }
body.portal-native .portal-theme-view .portal-usage-balance > strong.is-unlimited { font-size: 2.25rem; }
body.portal-native .portal-theme-view .portal-usage-balance > strong small { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: var(--flat-muted); }
body.portal-native .portal-theme-view .portal-usage-progress { height: 7px; border-radius: 8px; background: var(--usage-track); overflow: hidden; margin-top: 16px; }
body.portal-native .portal-theme-view .portal-usage-progress span { display: block; height: 100%; background: var(--usage-progress); border-radius: inherit; }
body.portal-native .portal-theme-view .portal-native-compact-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin: 9px 0 0; font-size: .75rem; line-height: 1.6; color: var(--flat-muted); }
body.portal-native .portal-theme-view .portal-usage-expiry { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 14px; border-top: 1px solid var(--flat-line); }
body.portal-native .portal-theme-view .portal-usage-expiry span { display: block; color: var(--flat-muted); font-size: .75rem; margin-bottom: 4px; }
body.portal-native .portal-theme-view .portal-usage-expiry strong { color: var(--flat-text); font-size: .875rem; font-weight: 600; }
body.portal-native .portal-theme-view .portal-usage-freshness { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 10px; font-size: .6875rem; color: var(--flat-muted); padding: 3px 0; }
body.portal-native .portal-theme-view .portal-usage-freshness button { display: flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--flat-orange-dark); min-height: 44px; padding: 4px 0; font-size: .75rem; cursor: pointer; }
body.portal-native .portal-theme-view .portal-usage-freshness svg { width: 16px; height: 16px; }
body.portal-native .portal-theme-view .portal-native-connection-label { margin: 0 0 12px; color: var(--flat-text) !important; font-size: .9375rem; letter-spacing: 0; text-transform: none; font-weight: 650; }
body.portal-native .portal-theme-view .portal-native-connection-box { padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; overflow: visible; }
body.portal-native .portal-theme-view .portal-native-connection-box + .portal-native-connection-box { padding-top: 16px; border-top: 1px solid var(--flat-line) !important; }
body.portal-native .portal-theme-view .portal-native-link-head { align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 0; }
body.portal-native .portal-theme-view .portal-native-link-head > strong { color: var(--flat-text); font-size: .8125rem; line-height: 1.6; font-weight: 500; }
body.portal-native .portal-theme-view .portal-native-default-badge { color: var(--flat-green) !important; background: transparent !important; border: 0; border-radius: 0; padding: 0; min-height: 0; font-size: .6875rem; letter-spacing: 0; text-transform: none; font-weight: 500; }
body.portal-native .portal-theme-view .portal-native-link-actions { min-width: 0; }
body.portal-native .portal-theme-view :is(.portal-native-default-link,.portal-native-danger-link) { min-height: 44px; min-width: 44px; font-size: .8125rem; white-space: normal; }
body.portal-native .portal-theme-view .portal-native-button-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 16px; }
body.portal-native .portal-theme-view .portal-native-button-row button { min-height: 48px; min-width: 0; font-size: .8125rem; font-weight: 600; padding: 10px 5px; border-radius: 10px; white-space: normal; }
body.portal-native .portal-theme-view .portal-native-button-row .portal-native-copy-link { grid-column: 1/-1; color: var(--usage-action-ink) !important; background: var(--usage-action) !important; border-color: var(--usage-action) !important; box-shadow: none !important; }
body.portal-native .portal-theme-view .portal-native-button-row .portal-native-copy-link:hover { background: var(--usage-action-hover) !important; border-color: var(--usage-action-hover) !important; }
body.portal-native .portal-theme-view .portal-native-inline-action { margin-top: 6px; }
body.portal-native .portal-theme-view #add-server-btn { width: 100%; min-height: 48px; padding: 10px; border: 0; background: transparent !important; font-size: .875rem; font-weight: 500; box-shadow: none !important; }
body.portal-native .portal-theme-view .product-retirement-note { font-size: .8125rem; line-height: 1.6; color: var(--flat-muted); }
@media (min-width: 1100px) {
  body.portal-native .portal-theme-view .portal-usage-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 22px; align-items: start; }
}
@media (max-width: 760px) {
  body.portal-native .portal-theme-view .portal-native-main { padding: 92px max(16px,env(safe-area-inset-right)) calc(104px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  body.portal-native .portal-theme-view .portal-native-mobile-header { height: 72px; padding: 0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left)); }
  body.portal-native .portal-theme-view .portal-native-brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  body.portal-native .portal-theme-view .portal-native-bottom-nav { gap: 10px; padding: 8px 16px max(9px,env(safe-area-inset-bottom)); }
  body.portal-native .portal-theme-view .portal-native-bottom-item { padding: 10px 5px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
  body.portal-native .portal-theme-view .portal-native-bottom-item .portal-native-icon { width: 20px; height: 20px; }
  body.portal-native .portal-theme-view :is(.portal-usage-summary,.portal-usage-connections) { padding: 18px; }
  body.portal-native .portal-theme-view .portal-native-more-menu { min-width: min(260px,calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  body.portal-native .portal-theme-view *,body.portal-native .portal-theme-view *::before { animation: none !important; transition: none !important; }
}

html.portal-native-root:has(.portal-theme-view),body.portal-native:has(.portal-theme-view) { min-width: 0; }

body.portal-native .portal-theme-view .portal-native-attention small { color: inherit; }
body.portal-native .portal-theme-view .portal-native-cache-status strong { color: var(--flat-text); }
body.portal-native .portal-theme-view .portal-native-cache-status small { color: var(--flat-muted); }

body.portal-native .portal-theme-view .portal-native-usage-region-title { flex-wrap: wrap; justify-content: center; min-width: 0; max-width: 100%; }
body.portal-native .portal-theme-view .portal-native-usage-region-title strong { overflow-wrap: anywhere; min-width: 0; }
body.portal-native .portal-theme-view .portal-native-link-actions:has(button) { flex: 1 1 100%; justify-content: flex-start; }
body.portal-native .portal-theme-view .portal-native-link-actions button { max-width: 100%; }
@media (max-width: 400px) {
  body.portal-native .portal-theme-view .portal-usage-selector { grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); }
}

/* Existing Renew, history, utilities and forms share calm surfaces and readable type. */
body.portal-native .portal-theme-view .portal-native-page-head { margin-bottom: 20px; }
body.portal-native .portal-theme-view .portal-native-page-head h1 { font-size: 1.5625rem; line-height: 1.3; margin: 0 0 8px; }
body.portal-native .portal-theme-view .portal-native-page-head p:not(.portal-native-eyebrow) { font-size: .875rem; line-height: 1.6; }
body.portal-native .portal-theme-view .portal-native-eyebrow { font-size: .75rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
body.portal-native .portal-theme-view :is(.portal-native-card,.portal-native-guide-card,.portal-native-update-card,.portal-native-ticket,.portal-native-settings-section,.portal-native-form-frame) { border-radius: 16px; padding: 20px; box-shadow: none !important; }
body.portal-native .portal-theme-view .portal-usage-service { padding: 0; border-radius: 0; }
body.portal-native .portal-theme-view .portal-native-card::after { display: none; }
body.portal-native .portal-theme-view .portal-native-card-heading { align-items: flex-start; margin-bottom: 16px; }
body.portal-native .portal-theme-view .portal-usage-summary .portal-native-card-heading { align-items: center; margin-bottom: 0; }
body.portal-native .portal-theme-view .portal-native-card-heading :is(h1,h2) { font-size: 1.125rem; line-height: 1.4; margin: 0 0 6px; }
body.portal-native .portal-theme-view .portal-native-card-heading p:not(.portal-native-eyebrow) { font-size: .8125rem; line-height: 1.6; }
body.portal-native .portal-theme-view .portal-native-renew-region-toggle { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; border: 0; gap: 10px; background: transparent !important; }
body.portal-native .portal-theme-view .portal-native-renew-region-toggle button { padding: 12px; border: 1px solid var(--flat-line); border-radius: 12px; background: var(--flat-surface) !important; box-shadow: none; white-space: normal; min-height: 70px; }
body.portal-native .portal-theme-view .portal-native-renew-region-toggle button.selected { background: var(--flat-orange-soft) !important; border-color: var(--flat-orange); }
body.portal-native .portal-theme-view .portal-native-renew-region-copy strong { font-size: .875rem; }
body.portal-native .portal-theme-view .portal-native-renew-region-copy em { font-size: .6875rem; letter-spacing: 0; text-transform: none; text-shadow: none; color: var(--flat-muted); }
body.portal-native .portal-theme-view .portal-native-renew-region-copy small { font-size: .6875rem; color: var(--flat-muted) !important; line-height: 1.5; }
body.portal-native .portal-theme-view .portal-native-region-speed-note { color: var(--flat-muted); font-size: .75rem; margin: 10px 0 18px; }
body.portal-native .portal-theme-view .portal-native-package-choices.monthly { grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); gap: 10px; }
body.portal-native .portal-theme-view .portal-native-package-choice { min-width: 0; min-height: 82px; padding: 14px; border-radius: 12px; text-align: left; }
body.portal-native .portal-theme-view .portal-native-package-choice :is(strong,span) { font-size: .875rem; line-height: 1.5; }
body.portal-native .portal-theme-view .portal-native-package-choice small { color: var(--flat-muted); font-size: .75rem; }
body.portal-native .portal-theme-view .portal-native-period-picker { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 14px 0; border: 0; gap: 14px; }
body.portal-native .portal-theme-view .portal-native-period-heading { margin: 0; min-width: 0; }
body.portal-native .portal-theme-view .portal-native-period-heading :is(strong,b) { font-size: .875rem; color: var(--flat-text); }
body.portal-native .portal-theme-view .portal-native-period-stepper { gap: 12px; min-width: 0; }
body.portal-native .portal-theme-view .portal-native-period-stepper button { min-width: 44px; min-height: 44px; background: var(--flat-surface); color: var(--flat-text); border-color: var(--flat-line); }
body.portal-native .portal-theme-view .portal-native-period-stepper :is(strong,small) { color: var(--flat-text); font-size: .8125rem; }
body.portal-native .portal-theme-view .portal-native-renew-summary { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 16px; border-top: 1px solid var(--flat-line); }
body.portal-native .portal-theme-view .portal-native-renew-summary > span { min-width: 0; text-transform: none; letter-spacing: 0; font-size: .75rem; }
body.portal-native .portal-theme-view .portal-native-renew-summary :is(strong,small) { font-size: .8125rem; }
body.portal-native .portal-theme-view .portal-native-renew-summary strong { color: var(--flat-text); margin-top: 4px; }
body.portal-native .portal-theme-view :is(.portal-native-pending-payment-actions,.portal-native-update-actions,.portal-native-ticket-foot,.portal-native-section-heading,.portal-native-update-head) { flex-wrap: wrap; gap: 12px; }
body.portal-native .portal-theme-view .portal-native-section-heading h2 { font-size: 1.125rem; }
body.portal-native .portal-theme-view :is(.portal-native-ticket-summary-copy,.portal-native-ticket-details,.portal-native-setting-row,.portal-native-setting-edit,.portal-native-settings-actions) { min-width: 0; overflow-wrap: anywhere; }
body.portal-native .portal-theme-view .portal-native-ticket-details > div { padding: 12px; font-size: .8125rem; }
body.portal-native .portal-theme-view .portal-native-ticket-summary-copy :is(strong,small) { font-size: .8125rem; line-height: 1.6; }
body.portal-native .portal-theme-view .portal-native-settings-section { border: 1px solid var(--flat-line); background: var(--flat-surface); margin-bottom: 16px; }
body.portal-native .portal-theme-view .portal-native-settings-section h2 { font-size: .9375rem; letter-spacing: 0; text-transform: none; color: var(--flat-text); }
body.portal-native .portal-theme-view .portal-native-setting-row { flex-wrap: wrap; gap: 12px; }
body.portal-native .portal-theme-view .portal-native-setting-row :is(strong,small) { font-size: .8125rem; line-height: 1.6; color: var(--flat-text); white-space: normal; }
body.portal-native .portal-theme-view .portal-native-setting-row small { color: var(--flat-muted); }
body.portal-native .portal-theme-view .portal-native-setting-edit > div { display: flex; flex-wrap: wrap; gap: 8px; }
body.portal-native .portal-theme-view .portal-native-setting-edit input { min-width: 0; max-width: 100%; flex: 1 1 180px; }
body.portal-native .portal-theme-view .portal-native-setting-edit button { min-height: 44px; }
body.portal-native .portal-theme-view .portal-native-guide-toggle { flex-wrap: wrap; min-height: 64px; }
body.portal-native .portal-theme-view .portal-native-guide-toggle :is(strong,small,em) { font-size: .8125rem; line-height: 1.6; }
body.portal-native .portal-theme-view :is(.portal-native-update-card,.portal-native-guide-card) p { font-size: .875rem; color: var(--flat-muted); line-height: 1.7; }
body.portal-native .portal-theme-view :is(.portal-native-subpage-back,.portal-native-edit-button,.portal-native-update-actions button,.portal-native-download-row a,.portal-native-settings-actions button,.portal-native-setting-row button,.portal-native-ticket-foot button) { min-height: 44px; min-width: 44px; font-size: .8125rem; }
/* Modals remain independent scrolling surfaces, with background content made inert. */
body.portal-native :is(.portal-native-modal,.account-payment-modal,.guide-prompt,.migration-success-modal,.account-recovery-modal) { color: var(--flat-text) !important; background: var(--flat-surface) !important; border: 1px solid var(--flat-line); border-radius: 16px; box-shadow: none !important; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px; overflow-wrap: anywhere; }
body.portal-native :is(.portal-native-modal-backdrop,.account-payment-backdrop,.guide-prompt-backdrop,.migration-success-backdrop) { padding: 16px; background: var(--flat-modal-overlay) !important; backdrop-filter: none; }
body.portal-native :is(.portal-native-modal,.account-payment-modal,.guide-prompt,.migration-success-modal) :is(h2,h3) { font-size: 1.25rem; line-height: 1.4; color: var(--flat-text); }
body.portal-native :is(.portal-native-modal,.account-payment-modal,.guide-prompt,.migration-success-modal) p { font-size: .875rem; line-height: 1.65; color: var(--flat-muted); }
body.portal-native :is(.portal-native-modal-close,.account-modal-close) { width: 44px; height: 44px; font-size: 1.5rem; color: var(--flat-text); }
body.portal-native :is(.portal-native-modal-actions,.renewal-dialog-actions) { display: flex; flex-wrap: wrap; gap: 10px; }
body.portal-native :is(.portal-native-modal-actions,.renewal-dialog-actions) button { flex: 1 1 150px; min-height: 48px; font-size: .8125rem; white-space: normal; }
body.portal-native :is(.portal-native-modal-copy,.account-payment-compact-meta,.account-bank-line,.account-payment-process,.account-payment-total span) { color: var(--flat-muted) !important; font-size: .8125rem; line-height: 1.6; }
body.portal-native .account-bank-line strong { color: var(--flat-text); font-size: .875rem; line-height: 1.7; }
body.portal-native .account-payment-total { border: 1px solid var(--flat-line); border-radius: 12px; background: var(--flat-orange-soft); padding: 16px; }
body.portal-native .account-payment-total strong { color: var(--flat-text); font-size: 1.75rem; }
body.portal-native .account-copy-bank { min-height: 44px; font-size: .8125rem; color: var(--flat-orange-dark); background: var(--flat-orange-soft); border: 1px solid var(--flat-line); }
body.portal-native .portal-native-qr-image { max-width: min(100%,260px); height: auto; background: white; padding: 8px; }
body.portal-native :is(.btn-primary,.account-copy-bank,.portal-native-modal-actions button,.portal-native-setting-row button) { box-shadow: none !important; }
body.portal-native .btn-primary { background: var(--usage-action) !important; color: var(--usage-action-ink) !important; border-color: var(--usage-action) !important; min-height: 48px; font-size: .875rem; white-space: normal; }
body.portal-native .btn-primary:hover:not(:disabled) { background: var(--usage-action-hover) !important; }
body.portal-native .portal-theme-view button { scroll-margin-block: 100px; }
@media (max-width:760px) {
 body.portal-native .portal-theme-view :is(.portal-native-card,.portal-native-guide-card,.portal-native-update-card,.portal-native-ticket,.portal-native-settings-section,.portal-native-form-frame) { padding: 18px; }
 body.portal-native .portal-theme-view .portal-usage-service { padding: 0; }
 body.portal-native .portal-theme-view .portal-native-package-choices.monthly { grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); }
}

body.portal-native .portal-theme-view .portal-native-package-choice strong { color: var(--flat-text); }
body.portal-native .portal-theme-view .portal-native-package-choice.selected strong { color: var(--flat-orange-dark); }
body.portal-native .portal-theme-view .portal-native-empty :is(span,h2) { color: var(--flat-text); }
body.portal-native .portal-theme-view :is(.portal-native-section-heading > span,.portal-native-ticket-chevron,.portal-native-guide-toggle small) { color: var(--flat-muted); }
body.portal-native :is(.renewal-modal-kicker,.portal-native-modal .portal-native-eyebrow) { color: var(--flat-orange-dark); letter-spacing: 0; text-transform: none; font-size: .8125rem; }
body.portal-native :is(.account-payment-compact-meta strong,.account-payment-compact-meta span,.account-bank-line span,.account-payment-process span) { color: var(--flat-text) !important; font-size: .8125rem; }
body.portal-native :is(.portal-native-modal,.account-payment-modal) :is(button,a):focus-visible { outline: 3px solid #8a50c4; outline-offset: 3px; }

body.portal-native .portal-theme-view .portal-native-renew-region-toggle { grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); }
body.portal-native .portal-theme-view .portal-native-renew-region-copy { min-width: 0; overflow-wrap: anywhere; }
body.portal-native .portal-theme-view .portal-native-period-stepper { display: flex; width: auto; max-width: 100%; flex-wrap: wrap; }
body.portal-native .portal-theme-view .portal-native-period-stepper > span { min-width: 0; }

body.portal-native .portal-native-tier-status { border-color: var(--flat-line); background: var(--flat-orange-soft); }
body.portal-native .portal-native-tier-status :is(h2,.portal-native-tier-meter strong) { color: var(--flat-text); font-size: .9375rem; }
body.portal-native .portal-native-tier-actions .portal-native-copy-link { color: var(--usage-action-ink); background: var(--usage-action); min-height: 48px; font-size: .8125rem; padding: 10px 12px; }
body.portal-native .portal-native-tier-actions small { color: var(--flat-muted); font-size: .8125rem; }
body.portal-native .portal-native-tier-progress { background: var(--usage-track); }
body.portal-native .portal-native-tier-progress span { background: var(--usage-progress); }

body.portal-native .portal-native-modal-actions button:not(.btn-primary) { color: var(--flat-text) !important; background: var(--flat-surface) !important; border-color: var(--flat-line); }

body.portal-native .btn-primary.portal-whatsapp-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #187448 !important; border-color: #187448 !important; color: #ffffff !important; }
body.portal-native .btn-primary.portal-whatsapp-action:hover:not(:disabled) { background: #125d39 !important; }
html[data-theme="dark"] body.portal-native .btn-primary.portal-whatsapp-action { background: #a2dfb8 !important; border-color: #a2dfb8 !important; color: #12301e !important; }
html[data-theme="dark"] body.portal-native .btn-primary.portal-whatsapp-action:hover:not(:disabled) { background: #b8ebca !important; }

/* Legacy form and asynchronous states must use the same readable theme tokens. */
body.portal-native .portal-theme-view .portal-native-brand { text-decoration: none; color: var(--flat-text); }
body.portal-native .portal-theme-view .usage-title { color: var(--flat-text); -webkit-text-fill-color: var(--flat-text); font-size: 1.5rem; line-height: 1.35; }
body.portal-native .portal-theme-view .usage-hero .eyebrow { color: var(--flat-orange); }
body.portal-native .portal-theme-view .portal-native-annual-status { grid-template-columns: repeat(auto-fit,minmax(min(100%,12rem),1fr)); }
body.portal-native .portal-theme-view :is(.portal-native-annual-status,.portal-native-renew-summary) > div { background: var(--flat-bg) !important; color: var(--flat-text); border-color: var(--flat-line); }
body.portal-native .portal-theme-view .portal-native-annual-status span { color: var(--flat-muted); font-size: .75rem; letter-spacing: 0; }
body.portal-native .portal-theme-view .portal-native-annual-status strong { color: var(--flat-text); font-size: 1rem; }
body.portal-native .portal-theme-view .portal-native-annual-rule { background: var(--flat-orange-soft) !important; color: var(--flat-text); font-size: .8125rem; border-color: var(--flat-line); }
body.portal-native .portal-theme-view .portal-native-annual-rule strong { color: var(--flat-text); font-size: .875rem; }
body.portal-native .portal-theme-view .portal-native-annual-action-copy { color: var(--flat-muted); font-size: .8125rem; }
body.portal-native .setup-progress { background: var(--flat-bg) !important; border-color: var(--flat-line); box-shadow: none; }
body.portal-native .setup-progress :is(.setup-progress-kicker,.setup-progress-message) { color: var(--flat-text); }
body.portal-native .setup-progress .setup-progress-percent { color: var(--flat-orange); }
body.portal-native .setup-progress .setup-progress-track { background: var(--usage-track) !important; border: 0; }
body.portal-native .setup-progress .setup-progress-dots span { background: var(--flat-muted); box-shadow: none; }
body.portal-native .setup-progress .setup-progress-dots span.done { background: var(--usage-progress); }
body.portal-native .portal-theme-view .btn-primary:disabled { opacity: 1; color: var(--flat-muted) !important; background: var(--flat-bg) !important; border-color: var(--flat-line); box-shadow: none; cursor: not-allowed; }
body.portal-native .portal-usage-renew { margin: 16px 0 0; }

body.portal-native .portal-theme-view .portal-region-picker strong em { color: var(--flat-orange); }

body.portal-native .portal-theme-view .portal-native-renew-summary { background: var(--flat-bg) !important; color: var(--flat-text); }
body.portal-native .portal-theme-view .portal-native-section-heading > span { color: var(--flat-text); background: var(--flat-bg) !important; }