/* Flat Pixel-inspired PattaLink account theme. Loaded after legacy styles. */
:root {
  --flat-bg: #151515;
  --flat-surface: #20201f;
  --flat-surface-soft: #272624;
  --flat-orange-soft: #38251d;
  --flat-yellow: #40311c;
  --flat-text: #faf8f6;
  --flat-muted: #b9b1ab;
  --flat-line: #3d3936;
  --flat-orange: #ff6b35;
  --flat-orange-dark: #ff9565;
  --flat-green: #68dfa0;
  --flat-red: #ff8d85;
  --flat-shell: #191918;
  --flat-shadow: rgba(0, 0, 0, .24);
  --flat-focus: #573224;
  --flat-placeholder: #918984;
  --flat-success-surface: #173528;
  --flat-danger-surface: #42221f;
  --flat-code: #e8dfda;
  --flat-help-surface: #173428;
  --flat-help-muted: #a6cfb6;
  --flat-modal-overlay: rgba(0, 0, 0, .62);
}

html[data-theme="light"] {
  --flat-bg: #fff8ef;
  --flat-surface: #ffffff;
  --flat-surface-soft: #fffdf9;
  --flat-orange-soft: #fff0df;
  --flat-yellow: #fff4c7;
  --flat-text: #261a16;
  --flat-muted: #746862;
  --flat-line: #eadfd7;
  --flat-orange: #ef5b2a;
  --flat-orange-dark: #b93616;
  --flat-green: #187a49;
  --flat-red: #b3261e;
  --flat-shell: #fffdf9;
  --flat-shadow: rgba(77, 45, 27, .08);
  --flat-focus: #ffe1cf;
  --flat-placeholder: #a89c95;
  --flat-success-surface: #e2f4e8;
  --flat-danger-surface: #ffdad6;
  --flat-code: #4f443e;
  --flat-help-surface: #e2f4e8;
  --flat-help-muted: #4d7560;
  --flat-modal-overlay: rgba(38, 26, 22, .32);
}

html,
html.portal-native-root { background: var(--flat-bg) !important; color-scheme: dark; }
html[data-theme="light"],
html[data-theme="light"].portal-native-root { color-scheme: light; }
html body,
html body *:not(#flat-no-gradient),
html body *:not(#flat-no-gradient)::before,
html body *:not(#flat-no-gradient)::after { background-image: none !important; }

body.usage-page,
body.portal-native {
  --pn-bg: var(--flat-bg);
  --pn-surface: var(--flat-surface);
  --pn-surface-2: var(--flat-surface-soft);
  --pn-surface-3: var(--flat-orange-soft);
  --pn-line: var(--flat-line);
  --pn-line-strong: var(--flat-orange);
  --pn-text: var(--flat-text);
  --pn-muted: var(--flat-muted);
  --pn-accent: var(--flat-orange);
  --pn-accent-2: var(--flat-orange-dark);
  --pn-orange: var(--flat-orange);
  --pn-success: var(--flat-green);
  --pn-warning: var(--flat-orange-dark);
  --pn-danger: var(--flat-red);
  --pn-info: var(--flat-orange-dark);
  background: var(--flat-bg) !important;
  color: var(--flat-text) !important;
}

#veil-bg-canvas,
#veil-scrim,
body.usage-page::before,
body.usage-page::after,
.usage-dashboard::before,
.usage-dashboard::after { display: none !important; }

/* Register and login */
.app-center { padding: 24px 16px !important; }
.glass-panel,
.auth-card,
.email-code-card,
.password-reset-card,
.account-recovery-modal,
.migration-success-modal,
.guide-prompt,
.renewal-modal,
.account-payment-modal,
.portal-native-modal {
  color: var(--flat-text) !important;
  border: 1px solid var(--flat-line) !important;
  background: var(--flat-surface) !important;
  box-shadow: 0 18px 48px var(--flat-shadow) !important;
  backdrop-filter: none !important;
}
.glass-panel h1,
.glass-panel h2,
.glass-panel h3,
.auth-modal-title,
.migration-success-modal h2,
.guide-prompt h2 { color: var(--flat-text) !important; text-shadow: none !important; }
.subtitle,
.auth-switch,
.hint,
.auth-modal-sub,
.auth-modal-fineprint,
.ticket-created-copy,
.guide-prompt > p { color: var(--flat-muted) !important; }
.eyebrow,
.field-label,
.section-label,
.guide-prompt-kicker { color: var(--flat-orange-dark) !important; }
.inp,
.auth-email-form input,
.homepage-selection-field,
.selected-plan-field,
.conn-opt,
.addon-chip,
.ticket-row {
  color: var(--flat-text) !important;
  border-color: var(--flat-line) !important;
  background: var(--flat-surface-soft) !important;
  box-shadow: none !important;
}
.inp::placeholder,
.auth-email-form input::placeholder { color: var(--flat-placeholder) !important; }
.inp:focus,
.auth-email-form input:focus {
  border-color: var(--flat-orange) !important;
  box-shadow: 0 0 0 3px var(--flat-focus) !important;
}
.conn-opt.sel,
.addon-chip.sel,
.selected-plan-field {
  color: var(--flat-orange-dark) !important;
  border-color: var(--flat-orange) !important;
  background: var(--flat-orange-soft) !important;
}
.btn-primary,
.auth-email-btn,
.btn-danger-solid {
  color: #fff !important;
  background: var(--flat-orange) !important;
  box-shadow: none !important;
}
.btn-primary:hover:not(:disabled),
.auth-email-btn:hover:not(:disabled) { background: var(--flat-orange-dark) !important; transform: none !important; }
.btn-ghost,
.auth-google-btn,
.settings-action-button,
.settings-action-wide {
  color: var(--flat-text) !important;
  border-color: var(--flat-line) !important;
  background: var(--flat-surface) !important;
  box-shadow: none !important;
}
.link-btn,
.auth-home-link { color: var(--flat-orange-dark) !important; }
.customer-language-toggle {
  border-color: var(--flat-line) !important;
  background: var(--flat-surface) !important;
  box-shadow: none !important;
}
.customer-language-toggle button { color: var(--flat-muted) !important; }
.customer-language-toggle button.active {
  color: var(--flat-orange-dark) !important;
  background: var(--flat-orange-soft) !important;
  box-shadow: none !important;
}

/* Legacy progress fills used gradients. Keep them visible under the flat theme. */
.setup-progress {
  border-color: var(--flat-line) !important;
  background: var(--flat-surface) !important;
  box-shadow: none !important;
}
.setup-progress-track,
.account-check-track,
.ticket-progress,
.ticket-created-progress { background: var(--flat-surface-soft) !important; }
.setup-progress-fill,
.account-check-fill,
.ticket-progress span,
.ticket-created-progress span {
  background: var(--flat-orange) !important;
  box-shadow: none !important;
}
.setup-progress-fill::after,
.account-check-fill::after { display: none !important; }

/* Portal shell */
body.portal-native .portal-native-sidebar,
body.portal-native .portal-native-mobile-header,
body.portal-native .portal-native-bottom-nav {
  border-color: var(--flat-line) !important;
  background: var(--flat-shell) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}
.portal-native-brand,
.portal-native-side-item,
.portal-native-signout,
.portal-native-bottom-nav button { color: var(--flat-muted) !important; }
.portal-native-brand strong,
.portal-native-side-item.active,
.portal-native-bottom-nav button.active { color: var(--flat-text) !important; }
.portal-native-side-item.active,
.portal-native-bottom-nav button.active {
  background: var(--flat-orange-soft) !important;
  box-shadow: none !important;
}
.portal-native-brand-mark { background: var(--flat-orange) !important; box-shadow: none !important; }
.portal-native-eyebrow { color: var(--flat-orange-dark) !important; }
.portal-native-page-head { margin-bottom: 20px !important; }
.portal-native-page-head h1 { color: var(--flat-text) !important; }
.portal-native-page-head p:not(.portal-native-eyebrow) { color: var(--flat-muted) !important; }
.portal-native-main { background: var(--flat-bg) !important; }

.portal-native-card,
.portal-native-server-card,
.portal-native-renew-card,
.portal-native-ticket,
.portal-native-guide-card,
.portal-native-update-card,
.portal-native-update-alert,
.portal-native-settings .settings-card,
.portal-native-connection-box,
.portal-native-form-frame,
.portal-native-empty,
.portal-native-account-mini,
.portal-native-identity {
  color: var(--flat-text) !important;
  border-color: var(--flat-line) !important;
  background: var(--flat-surface) !important;
  box-shadow: 0 8px 24px var(--flat-shadow) !important;
  backdrop-filter: none !important;
}
.portal-native-card::after { background: var(--flat-orange) !important; opacity: .35; }
.portal-native-card-heading h2,
.portal-native-update-head h2,
.portal-native-guide-toggle,
.portal-native-ticket-summary-copy strong,
.portal-native-stats strong,
.portal-native-renew-summary strong,
.settings-card h2,
.settings-card h3 { color: var(--flat-text) !important; }
.portal-native-card-heading p:not(.portal-native-eyebrow),
.portal-native-update-card > p,
.portal-native-guide-toggle span em,
.portal-native-ticket-summary-copy small,
.portal-native-stats span,
.portal-native-renew-summary span,
.portal-native-connection-label,
.portal-native-account-mini small,
.portal-native-identity small,
.settings-card p,
.settings-item-copy span { color: var(--flat-muted) !important; }
.portal-native-stats > div,
.portal-native-renew-summary > div,
.portal-native-ticket-details > div,
.portal-native-period-picker,
.portal-native-yearly-note,
.portal-native-package-choice,
.portal-native-billing-tabs,
.portal-native-period-choices button,
.portal-native-link-actions button,
.portal-native-button-row button,
.portal-native-update-actions button {
  color: var(--flat-text) !important;
  border-color: var(--flat-line) !important;
  background: var(--flat-surface-soft) !important;
  box-shadow: none !important;
}
.portal-native-button-row .portal-native-copy-link {
  color: #fff !important;
  border-color: #ff8258 !important;
  background: var(--flat-orange) !important;
  box-shadow: 0 6px 18px rgba(237, 80, 46, .26) !important;
}
.portal-native-button-row .portal-native-copy-link:hover {
  color: #fff !important;
  border-color: #ff9b78 !important;
  background: #ff603a !important;
}
.portal-native-update-alert-actions button,
.portal-native-update-actions a,
.portal-native-update-timing span {
  color: var(--flat-orange-dark) !important;
  border-color: var(--flat-line) !important;
  background: var(--flat-orange-soft) !important;
  box-shadow: none !important;
}
.portal-native-package-choice.selected,
.portal-native-package-choice.sel,
.portal-native-billing-tabs button.selected,
.portal-native-period-choices button.selected {
  color: var(--flat-orange-dark) !important;
  border-color: var(--flat-orange) !important;
  background: var(--flat-orange-soft) !important;
}
.portal-native-pill.info,
.portal-native-default-badge,
.portal-native-updating-pill {
  color: var(--flat-orange-dark) !important;
  border-color: #f3ad88 !important;
  background: var(--flat-orange-soft) !important;
}
.portal-native-pill.success { color: var(--flat-green) !important; background: var(--flat-success-surface) !important; }
.portal-native-pill.warning { color: var(--flat-orange-dark) !important; background: var(--flat-yellow) !important; }
.portal-native-pill.danger { color: var(--flat-red) !important; background: var(--flat-danger-surface) !important; }
.portal-native-alert { box-shadow: none !important; }
.portal-native-alert.danger { color: var(--flat-red) !important; background: var(--flat-danger-surface) !important; }
.portal-native-alert.warning { color: var(--flat-orange-dark) !important; background: var(--flat-yellow) !important; }
.portal-native-alert.success { color: var(--flat-green) !important; background: var(--flat-success-surface) !important; }
.portal-native-attention { box-shadow: none !important; }
.portal-native-attention,
.portal-native-attention.payment { color: var(--flat-orange-dark) !important; background: var(--flat-yellow) !important; }
.portal-native-attention.danger { color: var(--flat-red) !important; background: var(--flat-danger-surface) !important; }
.portal-native-connection-box code { color: var(--flat-code) !important; }
.portal-native-update-dot { background: var(--flat-orange) !important; box-shadow: none !important; }
.portal-native-whatsapp-help {
  color: var(--flat-green) !important;
  border-color: var(--flat-green) !important;
  background: var(--flat-help-surface) !important;
}
.portal-native-whatsapp-help strong { color: var(--flat-green) !important; }
.portal-native-whatsapp-help small { color: var(--flat-help-muted) !important; }
.portal-native-settings .settings-account-actions { background: var(--flat-danger-surface) !important; }
.portal-native-settings .settings-account-actions .btn-danger-solid {
  color: var(--flat-red) !important;
  border-color: var(--flat-red) !important;
  background: var(--flat-danger-surface) !important;
}

/* Keep the usage visualization flat: a solid fill instead of liquid gradients. */
.portal-native-liquid-wave,
.liquid-wave {
  background: var(--flat-orange) !important;
  animation: none !important;
  border-radius: 0 !important;
}
.portal-native-liquid-gauge,
.liquid-gauge {
  border-color: var(--flat-orange) !important;
  background: var(--flat-orange-soft) !important;
  box-shadow: none !important;
}
.portal-native-gauge-core,
.gauge-core { color: var(--flat-text) !important; background: transparent !important; }

.portal-native-modal-backdrop,
.renewal-modal-backdrop,
.account-payment-backdrop,
.account-recovery-backdrop,
.guide-prompt-backdrop,
.migration-success-backdrop { background: var(--flat-modal-overlay) !important; backdrop-filter: blur(6px); }

@media (max-width: 760px) {
  .portal-native-main { background: var(--flat-bg) !important; }
  .portal-native-card,
  .portal-native-server-card,
  .portal-native-renew-card { box-shadow: 0 5px 18px var(--flat-shadow) !important; }
}