* { font-family: 'DM Sans', sans-serif; box-sizing: border-box; }
:root {
  --mobile-ads-height: calc(env(safe-area-inset-bottom, 0px) + 204px);
}
.app-dark-theme {
  --app-bg-1: #0f172a;
  --app-bg-2: #111827;
  --app-surface: rgba(29, 36, 52, 0.72);
  --app-surface-2: rgba(38, 46, 66, 0.76);
  --app-panel: rgba(23, 30, 44, 0.76);
  --app-panel-soft: rgba(31, 39, 57, 0.62);
  --app-border: rgba(255,255,255,0.09);
  --app-border-soft: rgba(255,255,255,0.06);
  --app-text: #f8fafc;
  --app-text-soft: #cbd5e1;
  --app-text-muted: #94a3b8;
  --app-success: #fdba74;
  --app-danger: #ff6b6b;
  --app-info: #30d5ff;
  --app-cta: #19c38c;
  --app-modal-btn: #19c38c;
  --app-modal-btn-hover: #f97316;
  --app-modal-btn-text: #07140f;
  --app-modal-btn-soft: rgba(25, 195, 140, 0.16);
  --app-modal-btn-border: rgba(25, 195, 140, 0.42);
  background:
    radial-gradient(circle at 18% 22%, rgba(20, 184, 166, 0.18), transparent 26%),
    radial-gradient(circle at 82% 70%, rgba(34, 211, 238, 0.14), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(251, 146, 60, 0.09), transparent 30%),
    linear-gradient(135deg, var(--app-bg-1) 0%, #0b1220 52%, var(--app-bg-2) 100%);
  color: var(--app-text);
}
.app-dark-theme body {
  color: var(--app-text);
}

/* Refinamento visual do tema ccorridao: mantém a base ccorridaa existente e aplica o mesmo acabamento coeso do tema escuro. */
body:not(.app-dark-theme) {
  --app-light-bg-1: #f8fafc;
  --app-light-bg-2: #f5f3ff;
  --app-light-surface: rgba(255, 255, 255, 0.82);
  --app-light-surface-2: rgba(255, 255, 255, 0.92);
  --app-light-panel: rgba(250, 250, 249, 0.88);
  --app-light-border: rgba(120, 113, 108, 0.14);
  --app-light-border-soft: rgba(120, 113, 108, 0.10);
  --app-light-text: #1c1917;
  --app-light-text-soft: #57534e;
  --app-light-text-muted: #78716c;
  --app-light-accent: #f97316;
  --app-light-accent-soft: rgba(249, 115, 22, 0.10);
  --app-light-cta: #1c1917;
  background:
    radial-gradient(circle at 16% 18%, rgba(249, 115, 22, 0.14), transparent 26%),
    radial-gradient(circle at 84% 72%, rgba(251, 146, 60, 0.13), transparent 24%),
    radial-gradient(circle at 48% 102%, rgba(234, 88, 12, 0.08), transparent 30%),
    linear-gradient(135deg, var(--app-light-bg-1) 0%, #ffffff 48%, var(--app-light-bg-2) 100%) !important;
  color: var(--app-light-text);
}

body:not(.app-dark-theme) #loading-screen {
  background:
    radial-gradient(circle at 50% 28%, rgba(249, 115, 22, 0.12), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #fafaf9 100%) !important;
}

body:not(.app-dark-theme) #loading-screen .loading-screen-panel {
  padding: 22px 26px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(250,250,249,0.96)) !important;
  border: 1px solid var(--app-light-border-soft);
  box-shadow:
    0 24px 54px rgba(28, 25, 23, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.90);
  backdrop-filter: blur(22px) saturate(130%);
}

body:not(.app-dark-theme) #app-shell-header,
body:not(.app-dark-theme) #app-shell-nav {
  background: rgba(250, 250, 249, 0.78) !important;
  backdrop-filter: blur(22px) saturate(135%);
  border-color: var(--app-light-border-soft) !important;
}

body:not(.app-dark-theme) #mobile-menu-toggle {
  background: rgba(255,255,255,0.82) !important;
  border-color: var(--app-light-border) !important;
  color: var(--app-light-text) !important;
  box-shadow: 0 14px 32px rgba(28, 25, 23, 0.10) !important;
}

body:not(.app-dark-theme) #mobile-nav-overlay {
  background: rgba(28, 25, 23, 0.28) !important;
  backdrop-filter: blur(3px) !important;
}

body:not(.app-dark-theme) #app-shell-nav-list .nav-active {
  background: rgba(255,255,255,0.86) !important;
  border-color: rgba(249, 115, 22, 0.18) !important;
  border-left-color: var(--app-light-accent) !important;
  color: var(--app-light-text) !important;
  box-shadow: 0 12px 28px rgba(28, 25, 23, 0.08) !important;
}

body:not(.app-dark-theme) #app-shell-nav-list .nav-inactive,
body:not(.app-dark-theme) #app-shell-nav-list .nav-tab,
body:not(.app-dark-theme) #app-shell-nav-list a[href*="wa.me"] {
  color: var(--app-light-text-soft) !important;
}

body:not(.app-dark-theme) #app-shell-nav-list .nav-tab:hover {
  background: rgba(255,255,255,0.62) !important;
  color: var(--app-light-text) !important;
}

body:not(.app-dark-theme) .view-content > .max-w-\[980px\],
body:not(.app-dark-theme) .view-content .max-w-\[980px\] {
  color: var(--app-light-text);
}

body:not(.app-dark-theme) .view-content [class*="bg-white"],
body:not(.app-dark-theme) .view-content [class*="bg-stone-50"],
body:not(.app-dark-theme) .view-content [class*="bg-stone-100"] {
  background: linear-gradient(180deg, var(--app-light-surface-2) 0%, var(--app-light-surface) 100%) !important;
  backdrop-filter: blur(18px) saturate(120%);
}

body:not(.app-dark-theme) .view-content [class*="border-stone-100"],
body:not(.app-dark-theme) .view-content [class*="border-stone-200"],
body:not(.app-dark-theme) .view-content [class*="border-stone-300"] {
  border-color: var(--app-light-border-soft) !important;
}

body:not(.app-dark-theme) .view-content [class*="shadow-sm"],
body:not(.app-dark-theme) .view-content [class*="shadow-"] {
  box-shadow:
    0 18px 42px rgba(28, 25, 23, 0.075),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

body:not(.app-dark-theme) .dashboard-hero-card {
  background:
    radial-gradient(circle at 88% 12%, rgba(249, 115, 22, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(250,250,249,0.88) 100%) !important;
  border: 1px solid var(--app-light-border-soft) !important;
  box-shadow:
    0 24px 54px rgba(28, 25, 23, 0.085),
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(22px) saturate(130%);
}

body:not(.app-dark-theme) .dashboard-hero-card p,
body:not(.app-dark-theme) .dashboard-hero-card span {
  color: var(--app-light-text-soft) !important;
}

body:not(.app-dark-theme) .view-content input,
body:not(.app-dark-theme) .view-content select,
body:not(.app-dark-theme) .view-content textarea {
  background: rgba(255,255,255,0.82) !important;
  border-color: var(--app-light-border-soft) !important;
  color: var(--app-light-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70);
}

body:not(.app-dark-theme) .view-content input:focus,
body:not(.app-dark-theme) .view-content select:focus,
body:not(.app-dark-theme) .view-content textarea:focus {
  border-color: rgba(249, 115, 22, 0.42) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

body:not(.app-dark-theme) #app-shell-ads .ads-rail {
  background:
    radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.10), transparent 38%),
    rgba(255, 255, 255, 0.72) !important;
  border: 1px solid var(--app-light-border-soft);
  box-shadow:
    0 24px 54px rgba(28,25,23,.08),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
  backdrop-filter: blur(22px) saturate(130%);
}

body:not(.app-dark-theme) #app-shell-ads [data-desktop-banner-card],
body:not(.app-dark-theme) #app-shell-ads [data-desktop-banner-slot] {
  background: rgba(255,255,255,0.72) !important;
  border-color: var(--app-light-border-soft) !important;
}

body:not(.app-dark-theme) .mobile-banner-rotator {
  background: rgba(250, 250, 249, 0.92) !important;
  border-top-color: var(--app-light-border-soft) !important;
  box-shadow: 0 -16px 44px rgba(28,25,23,0.10) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
}

body:not(.app-dark-theme) .mobile-banner-slide,
body:not(.app-dark-theme) .mobile-banner-placeholder {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,250,249,0.88)) !important;
  border-color: var(--app-light-border-soft) !important;
}

body:not(.app-dark-theme) [id^="modal-"] .relative,
body:not(.app-dark-theme) #delete-confirm .relative {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,249,0.98)) !important;
  color: var(--app-light-text) !important;
  border: 1px solid var(--app-light-border-soft) !important;
  box-shadow: 0 28px 70px rgba(28, 25, 23, 0.16) !important;
  backdrop-filter: blur(22px) saturate(125%);
}

body:not(.app-dark-theme) #modal-settings-auth #modal-backdrop-settings-auth {
  background: rgba(28, 25, 23, 0.34) !important;
  backdrop-filter: blur(8px) !important;
}

body:not(.app-dark-theme) [id^="modal-"] input,
body:not(.app-dark-theme) [id^="modal-"] select,
body:not(.app-dark-theme) [id^="modal-"] textarea {
  background: rgba(255,255,255,0.86) !important;
  border-color: var(--app-light-border-soft) !important;
  color: var(--app-light-text) !important;
}

body:not(.app-dark-theme) .theme-toggle-btn {
  background: rgba(255,255,255,0.72);
  border-color: var(--app-light-border-soft);
  box-shadow: 0 18px 40px rgba(28,25,23,0.12);
}

body:not(.app-dark-theme) .theme-toggle-btn:hover {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 20px 48px rgba(28,25,23,0.16);
}
.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.tab-active { border-bottom: 2px solid #1a1a1a; color: #1a1a1a; }
.tab-inactive { border-bottom: 2px solid transparent; color: #9ca3af; }
.nav-active { border-bottom: 2px solid #1a1a1a; color: #1a1a1a; }
.nav-inactive { border-bottom: 2px solid transparent; color: #9ca3af; }
.card-gradient { background: linear-gradient(135deg, #1c1917 0%, #3c3735 100%); }
.progress-bar { background: linear-gradient(90deg, #f97316 0%, #ea580c 100%); }
#floating-settings-btn { position: fixed; right: 24px; bottom: 24px; z-index: 99999; width: 56px; height: 56px; border-radius: 9999px; background:#1c1917; color:#fff; border:0; box-shadow:0 18px 40px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.theme-toggle-btn {
  position: fixed;
  right: 20px;
  bottom: 13px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  border: 1px solid rgba(28, 25, 23, 0.08);
  background: rgba(255,255,255,0.20);
  color: #1c1917;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, opacity .2s ease;
}
.theme-toggle-btn:hover {
  background: rgba(255,255,255,1);
}
.theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle-icon-dark {
  display: none;
}
.app-dark-theme .theme-toggle-btn {
  background: rgba(15, 23, 42, 0.20);
  color: #f8fafc;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.app-dark-theme .theme-toggle-btn:hover {
  background: rgba(15, 23, 42, 1);
}
.app-dark-theme .theme-toggle-icon-light {
  display: inline-flex;
}
.app-dark-theme .theme-toggle-icon-dark {
  display: none;
}
body:not(.app-dark-theme) .theme-toggle-icon-light {
  display: none;
}
body:not(.app-dark-theme) .theme-toggle-icon-dark {
  display: inline-flex;
}
.brand-lockup { display:inline-flex; align-items:center; justify-content:center; gap:0; line-height:1; }
.brand-plus { display:inline-block; margin-left:.06em; font-size:1.34em; line-height:1; transform:translateY(.04em); }
.app-dark-theme #loading-screen {
  background:
    radial-gradient(circle at 50% 30%, rgba(16, 185, 129, 0.16), transparent 26%),
    linear-gradient(135deg, #0f172a 0%, #111827 100%) !important;
}
.app-dark-theme #loading-screen .loading-screen-panel {
  padding: 22px 26px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(31, 39, 57, 0.74), rgba(24, 31, 46, 0.82)) !important;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 24px 54px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(22px) saturate(130%);
}
.app-dark-theme #loading-screen h1 {
  color: var(--app-text) !important;
}
.app-dark-theme #app {
  color: var(--app-text);
}
.app-dark-theme #app-shell-header,
.app-dark-theme #app-shell-nav {
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(22px) saturate(135%);
  border-color: rgba(255,255,255,0.08) !important;
}
.app-dark-theme #app-title,
.app-dark-theme #app-shell-nav h1 {
  color: var(--app-text) !important;
}
.app-dark-theme #mobile-menu-toggle {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--app-text) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.28) !important;
}
.app-dark-theme #mobile-nav-overlay {
  background: rgba(2, 6, 23, 0.58) !important;
}
.app-dark-theme #app-shell-nav-list .nav-tab,
.app-dark-theme #app-shell-nav-list a[href*="wa.me"] {
  color: var(--app-text-soft) !important;
}
.app-dark-theme #app-shell-nav-list .nav-inactive {
  color: var(--app-text-soft) !important;
}
.app-dark-theme #app-shell-nav-list .nav-active {
  background: rgba(255,255,255,0.06) !important;
  color: var(--app-text) !important;
  border-left-color: var(--app-success) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
}
.app-dark-theme #app-shell-nav-list a[href*="wa.me"] {
  background: rgba(25, 195, 140, 0.12) !important;
  color: #9ef4d2 !important;
}
.app-dark-theme #app-shell-nav-list #mobile-menu-logout,
.app-dark-theme #app-floating-logout {
  background: rgba(255, 107, 107, 0.12) !important;
  color: #ff8f8f !important;
  border: 1px solid rgba(255, 107, 107, 0.14) !important;
  box-shadow: none !important;
}
.app-dark-theme .view-content,
.app-dark-theme .view-content * {
  border-color: var(--app-border-soft);
}
.app-dark-theme .view-content > .max-w-\[980px\],
.app-dark-theme .view-content .max-w-\[980px\] {
  color: var(--app-text);
}
.app-dark-theme .view-content [class*="bg-white"],
.app-dark-theme .view-content [class*="bg-stone-50"],
.app-dark-theme .view-content [class*="bg-stone-100"] {
  background: linear-gradient(180deg, rgba(31, 39, 57, 0.72) 0%, rgba(24, 31, 46, 0.76) 100%) !important;
  backdrop-filter: blur(22px) saturate(125%);
}
.app-dark-theme .view-content [class*="border-stone-100"],
.app-dark-theme .view-content [class*="border-stone-200"],
.app-dark-theme .view-content [class*="border-stone-300"] {
  border-color: var(--app-border) !important;
}
.app-dark-theme .view-content [class*="shadow-sm"],
.app-dark-theme .view-content [class*="shadow-"] {
  box-shadow:
    0 22px 48px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.app-dark-theme .view-content h1,
.app-dark-theme .view-content h2,
.app-dark-theme .view-content h3,
.app-dark-theme .view-content h4,
.app-dark-theme .view-content .font-semibold,
.app-dark-theme .view-content .font-bold {
  color: var(--app-text) !important;
}
.app-dark-theme .view-content p,
.app-dark-theme .view-content span,
.app-dark-theme .view-content div,
.app-dark-theme .view-content button {
  color: inherit;
}
.app-dark-theme .view-content [class*="text-stone-900"] { color: var(--app-text) !important; }
.app-dark-theme .view-content [class*="text-stone-500"],
.app-dark-theme .view-content [class*="text-stone-400"],
.app-dark-theme .view-content [class*="text-stone-300"] { color: var(--app-text-muted) !important; }
.app-dark-theme .view-content [class*="text-orange-600"],
.app-dark-theme .view-content [class*="text-orange-700"] { color: var(--app-success) !important; }
.app-dark-theme .view-content [class*="text-red-500"],
.app-dark-theme .view-content [class*="text-red-600"] { color: var(--app-danger) !important; }
.app-dark-theme .view-content [class*="text-blue-600"],
.app-dark-theme .view-content [class*="text-cyan-500"] { color: var(--app-info) !important; }
.app-dark-theme .view-content [class*="bg-orange-50"] {
  background: rgba(34, 227, 162, 0.08) !important;
}
.app-dark-theme .view-content [class*="bg-red-50"] {
  background: rgba(255, 107, 107, 0.08) !important;
}
.app-dark-theme .view-content [class*="bg-blue-50"],
.app-dark-theme .view-content [class*="bg-cyan-50"] {
  background: rgba(48, 213, 255, 0.08) !important;
}
.app-dark-theme .view-content [class*="bg-amber-50"] {
  background: rgba(250, 204, 21, 0.08) !important;
}
.app-dark-theme .dashboard-hero-card {
  background:
    linear-gradient(180deg, rgba(31, 39, 57, 0.74) 0%, rgba(24, 31, 46, 0.82) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(24px) saturate(130%);
}
.dashboard-view .dashboard-shell {
  width: 100%;
}
.dashboard-view .dashboard-hero-section {
  margin-bottom: 0 !important;
}
.app-dark-theme .dashboard-hero-card p,
.app-dark-theme .dashboard-hero-card span {
  color: var(--app-text-soft) !important;
}
.app-dark-theme #balance {
  color: var(--app-text) !important;
}
.app-dark-theme .view-content button[class*="bg-stone-900"],
.app-dark-theme .view-content a[class*="bg-stone-900"] {
  background: var(--app-cta) !important;
  color: #07140f !important;
}
.app-dark-theme .view-content input,
.app-dark-theme .view-content select,
.app-dark-theme .view-content textarea {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--app-text) !important;
}
.app-dark-theme .view-content input::placeholder,
.app-dark-theme .view-content textarea::placeholder {
  color: var(--app-text-muted) !important;
}
.app-dark-theme #app-shell-ads .ads-rail {
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 227, 162, 0.10), transparent 38%),
    rgba(28, 36, 52, 0.78) !important;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 24px 54px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(24px) saturate(135%);
}
.app-dark-theme #app-shell-ads [data-desktop-banner-card] {
  background: rgba(255,255,255,0.04) !important;
}
.app-dark-theme #app-shell-ads [data-desktop-banner-slot] {
  background: linear-gradient(180deg, rgba(52, 65, 85, 0.56), rgba(47, 59, 78, 0.48)) !important;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px) saturate(120%);
}
.app-dark-theme #app-shell-ads [data-desktop-banner-slot] p:first-child {
  color: #ff6b6b !important;
}
.app-dark-theme #app-shell-ads [data-desktop-banner-slot] p:last-child,
.app-dark-theme #app-shell-ads .pt-4 p {
  color: var(--app-text-muted) !important;
}
.app-dark-theme #app-shell-ads .pt-4 span {
  color: var(--app-text-soft) !important;
}
.app-dark-theme .mobile-banner-rotator {
  background: rgba(12, 18, 32, 0.90) !important;
  border-top-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 -16px 44px rgba(0,0,0,0.32) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
}
.app-dark-theme .mobile-banner-slide,
.app-dark-theme .mobile-banner-placeholder {
  background: linear-gradient(180deg, rgba(31, 39, 57, 0.76), rgba(24, 31, 46, 0.82)) !important;
  border-color: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(18px) saturate(120%);
}
.app-dark-theme .mobile-banner-placeholder-label {
  color: #ff6b6b !important;
}
.app-dark-theme .mobile-banner-placeholder-copy,
.app-dark-theme .mobile-banner-note {
  color: var(--app-text-muted) !important;
}
.app-dark-theme .mobile-banner-note span {
  color: var(--app-text-soft) !important;
}
.app-dark-theme .mobile-banner-support {
  background: var(--app-cta) !important;
  color: #07140f !important;
  box-shadow: 0 14px 30px rgba(25,195,140,0.22) !important;
}
.app-dark-theme [id^="modal-"] .relative,
.app-dark-theme #delete-confirm .relative {
  background: linear-gradient(180deg, rgba(24, 29, 43, 0.98), rgba(20, 24, 36, 0.98)) !important;
  color: var(--app-text) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(22px) saturate(125%);
}
.app-dark-theme #modal-settings-auth #modal-backdrop-settings-auth {
  background: rgba(2, 6, 23, 0.64) !important;
  backdrop-filter: blur(8px) !important;
}
.app-dark-theme #modal-settings-auth .settings-auth-panel .w-12.h-12 {
  background: rgba(25, 195, 140, 0.14) !important;
  color: #9ef4d2 !important;
  border: 1px solid rgba(34, 227, 162, 0.18);
}
.app-dark-theme #modal-settings-auth .settings-auth-submit {
  background: var(--app-modal-btn) !important;
  color: var(--app-modal-btn-text) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(25, 195, 140, 0.24) !important;
}
.app-dark-theme [id^="modal-"] input,
.app-dark-theme [id^="modal-"] select,
.app-dark-theme [id^="modal-"] textarea {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--app-text) !important;
}
.app-dark-theme [id^="modal-"] p,
.app-dark-theme [id^="modal-"] label,
.app-dark-theme [id^="modal-"] h2,
.app-dark-theme [id^="modal-"] h3,
.app-dark-theme #delete-confirm p,
.app-dark-theme #delete-confirm h2 {
  color: var(--app-text) !important;
}
.app-dark-theme [id^="modal-"] button[type="submit"]:not(#delete-ok),
.app-dark-theme [id^="modal-"] .settings-auth-submit,
.app-dark-theme #type-income,
.app-dark-theme #type-expense,
.app-dark-theme #delete-cancel {
  background: var(--app-modal-btn) !important;
  color: var(--app-modal-btn-text) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(25, 195, 140, 0.22) !important;
}
.app-dark-theme [id^="modal-"] button[type="submit"]:not(#delete-ok):hover,
.app-dark-theme [id^="modal-"] .settings-auth-submit:hover,
.app-dark-theme #type-income:hover,
.app-dark-theme #type-expense:hover,
.app-dark-theme #delete-cancel:hover {
  background: var(--app-modal-btn-hover) !important;
  color: var(--app-modal-btn-text) !important;
}
.app-dark-theme #type-income,
.app-dark-theme #type-expense {
  border-width: 1px !important;
}
.app-dark-theme #type-income:not(.active),
.app-dark-theme #type-expense:not(.active) {
  background: var(--app-modal-btn-soft) !important;
  color: #9ef4d2 !important;
  border-color: var(--app-modal-btn-border) !important;
  box-shadow: none !important;
}
.app-dark-theme #delete-cancel {
  background: rgba(25, 195, 140, 0.14) !important;
  color: #9ef4d2 !important;
  border: 1px solid var(--app-modal-btn-border) !important;
  box-shadow: none !important;
}
.app-dark-theme #delete-ok {
  box-shadow: 0 14px 30px rgba(255, 107, 107, 0.18) !important;
}
.mobile-banner-rotator {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--mobile-ads-height);
  z-index: 60;
  pointer-events: auto;
  background: rgba(250, 250, 249, 0.98);
  border-top: 1px solid rgba(231, 229, 228, 0.96);
  box-shadow: 0 -16px 40px rgba(28, 25, 23, 0.08);
  padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 8px);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.mobile-banner-track {
  position: relative;
  height: 88px;
}
.mobile-banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .45s ease, transform .45s ease;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(28, 25, 23, 0.12);
  border: 1px solid rgba(231, 229, 228, 0.9);
}
.mobile-banner-slide.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mobile-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mobile-banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 16px;
  background: #ffffff;
}
.mobile-banner-placeholder-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f87171;
}
.mobile-banner-placeholder-copy {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: #a8a29e;
}
.mobile-banner-note {
  margin: 8px 6px 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.35;
  color: #a8a29e;
}
.mobile-banner-note span {
  color: #78716c;
  font-weight: 700;
}
.mobile-banner-support {
  margin: 23px auto 0;
  min-width: 118px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 9999px;
  background: #f97316;
  color: #0c0a09;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.22);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
#app {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 236px);
}
#app-floating-logout {
  display: none;
}
#app-shell-nav-list .nav-tab {
  border-bottom: 0;
}
#app-shell-nav-list .nav-inactive {
  color: #78716c;
}


button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
.touch-manipulation { touch-action: manipulation; }
@media (max-width: 480px) {
  body { min-height: 100dvh; }
  :root { --mobile-ads-height: calc(env(safe-area-inset-bottom, 0px) + 190px); }
  .mobile-banner-track { height: 86px; }
  .mobile-banner-note { font-size: 10px; margin-top: 8px; }
  .mobile-banner-support { margin-top: 23px; padding: 9px 14px; font-size: 12px; }
  .theme-toggle-btn { left: auto; right: 14px; transform: none; bottom: calc(env(safe-area-inset-bottom, 0px) + 3px); width: 42px; height: 42px; }
  #app { padding-bottom: 0; }
}
@media (max-width: 899px) {
  html, body {
    height: 100dvh;
    overflow: hidden;
  }
  .theme-toggle-btn {
    left: auto;
    right: 16px;
    transform: none;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3px);
    z-index: 85;
  }
  .app-dark-theme #app-shell-header {
    background: rgba(12, 18, 32, 0.86) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .app-dark-theme #app-shell-nav {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.98)) !important;
  }
  #app {
    height: calc(100dvh - var(--mobile-ads-height));
    overflow: auto;
    padding-bottom: 0;
  }
}
@media (min-width: 900px) {
  #app {
    padding-bottom: 0;
  }
  .theme-toggle-btn {
    right: 28px;
    bottom: 21px;
    z-index: 70;
  }
  #app-floating-logout {
    display: inline-flex;
  }
}
  @media (min-width: 900px) {
    :root {
      --desktop-side-width: clamp(296px, 24vw, 360px);
      --desktop-side-gap: 10px;
      --desktop-column-gap: 24px;
      --desktop-side-header-height: 108px;
      --desktop-card-gap: 14px;
      --desktop-hero-height: 232px;
      --desktop-mid-height: 194px;
      --desktop-bottom-height: 248px;
      --desktop-ads-footer-height: 44px;
      --desktop-ads-card-height: 1fr;
    }
  #app {
    padding-left: calc(var(--desktop-side-width) + var(--desktop-side-gap) + var(--desktop-column-gap)) !important;
    padding-right: calc(var(--desktop-side-width) + var(--desktop-side-gap) + var(--desktop-column-gap)) !important;
    padding-bottom: 0 !important;
    overflow-x: hidden !important;
  }

  .view-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #app-shell-header {
    position: fixed !important;
    top: var(--desktop-side-gap) !important;
    left: var(--desktop-side-gap) !important;
    width: var(--desktop-side-width) !important;
    height: var(--desktop-side-header-height) !important;
    padding: 26px 24px 14px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(34, 227, 162, 0.10), transparent 38%),
      rgba(28, 36, 52, 0.78) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom: 0 !important;
    border-radius: 30px 30px 0 0 !important;
    box-shadow:
      0 24px 54px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    z-index: 30 !important;
  }
  #app-shell-nav {
    position: fixed !important;
    top: calc(var(--desktop-side-gap) + var(--desktop-side-header-height)) !important;
    left: var(--desktop-side-gap) !important;
    width: var(--desktop-side-width) !important;
    height: calc(100vh - (var(--desktop-side-gap) * 2) - var(--desktop-side-header-height)) !important;
    max-width: none !important;
    padding: 10px 18px 18px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(34, 227, 162, 0.10), transparent 38%),
      rgba(28, 36, 52, 0.78) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-top: 0 !important;
    border-radius: 0 0 30px 30px !important;
    box-shadow:
      0 24px 54px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,0.05) !important;
    z-index: 29 !important;
  }
  #app-title-desktop {
    display: inline-flex !important;
    align-items: center !important;
  }
  #app-shell-ads {
    position: fixed !important;
    top: var(--desktop-side-gap) !important;
    right: var(--desktop-side-gap) !important;
    bottom: var(--desktop-side-gap) !important;
    width: var(--desktop-side-width) !important;
    z-index: 25 !important;
    overflow: visible !important;
  }
  #app-shell-ads .ads-rail {
    height: 100% !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) var(--desktop-ads-footer-height) !important;
    gap: var(--desktop-card-gap) !important;
  }
  #app-shell-ads .desktop-ads-stack {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--desktop-card-gap) !important;
  }
  #app-shell-ads .desktop-ads-stack > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  #app-shell-ads [data-desktop-banner-card] {
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
  }
  #app-shell-ads [data-desktop-banner-slot] {
    height: 100% !important;
    min-height: 0 !important;
  }
  #app-shell-ads .desktop-ads-footer {
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: var(--desktop-ads-footer-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-right: 56px !important;
  }
  #app-shell-ads .desktop-ads-footer p {
    margin: 0 !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
  }
  #app-shell-nav-list {
    max-width: none !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 10px !important;
  }
  #app-shell-nav-list .nav-tab,
  #app-shell-nav-list a[href*="wa.me"] {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 20px !important;
  }
  #app-shell-nav-list .nav-tab {
    padding: 14px 18px !important;
  }
  #app-shell-nav-list .nav-active {
    box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
  }
  #app-floating-logout {
    position: fixed !important;
    left: calc(var(--desktop-side-gap) + 18px) !important;
    bottom: calc(var(--desktop-side-gap) + 18px) !important;
    width: calc(var(--desktop-side-width) - 36px) !important;
    justify-content: flex-start !important;
    padding: 14px 18px !important;
    border-radius: 20px !important;
    margin-top: 0 !important;
    z-index: 31 !important;
  }
  body:not(.app-dark-theme) {
    background:
      radial-gradient(circle at 22% 16%, rgba(251, 146, 60, 0.09), transparent 22%),
      radial-gradient(circle at 84% 18%, rgba(59, 130, 246, 0.06), transparent 20%),
      linear-gradient(180deg, #f8fafc 0%, #f5f7fb 100%) !important;
  }
  body:not(.app-dark-theme) #app-shell-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,252,0.98)) !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    border: 1px solid rgba(226,232,240,0.95) !important;
    border-bottom: 0 !important;
    box-shadow:
      0 22px 48px rgba(15, 23, 42, 0.08),
      inset 0 1px 0 rgba(255,255,255,0.72) !important;
  }
  body:not(.app-dark-theme) #app-shell-nav {
    background:
      linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.98)) !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    border: 1px solid rgba(226,232,240,0.95) !important;
    border-top: 0 !important;
    box-shadow:
      0 22px 48px rgba(15, 23, 42, 0.08),
      inset 0 1px 0 rgba(255,255,255,0.72) !important;
  }
  body:not(.app-dark-theme) #app-title-desktop {
    color: #111827 !important;
  }
  body:not(.app-dark-theme) #app-shell-nav-list .nav-tab,
  body:not(.app-dark-theme) #app-shell-nav-list a[href*="wa.me"] {
    box-shadow: none !important;
  }
  body:not(.app-dark-theme) #app-shell-nav-list .nav-inactive {
    color: #475569 !important;
  }
  body:not(.app-dark-theme) #app-shell-nav-list .nav-active {
    background: #ffffff !important;
    color: #0f172a !important;
    border-left-color: #19c38c !important;
    box-shadow:
      0 12px 28px rgba(15, 23, 42, 0.10),
      inset 0 1px 0 rgba(255,255,255,0.92) !important;
  }
  body:not(.app-dark-theme) #app-shell-nav-list a[href*="wa.me"] {
    background: linear-gradient(180deg, rgba(220, 252, 231, 0.92), rgba(209, 250, 229, 0.92)) !important;
    color: #c2410c !important;
    box-shadow: 0 10px 24px rgba(251, 146, 60, 0.13) !important;
  }
  body:not(.app-dark-theme) #app-floating-logout {
    background: linear-gradient(180deg, rgba(254,242,242,0.98), rgba(255,255,255,0.98)) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(252, 165, 165, 0.42) !important;
    box-shadow: 0 12px 28px rgba(248, 113, 113, 0.10) !important;
  }
  body:not(.app-dark-theme) #app-shell-ads .ads-rail {
    background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.98)) !important;
    border: 1px solid rgba(226,232,240,0.95) !important;
    box-shadow:
      0 22px 48px rgba(15, 23, 42, 0.08),
      inset 0 1px 0 rgba(255,255,255,0.72) !important;
  }
  body:not(.app-dark-theme) #app-shell-ads [data-desktop-banner-card] {
    background: rgba(255,255,255,0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.88) !important;
  }
  body:not(.app-dark-theme) #app-shell-ads [data-desktop-banner-slot] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(226,232,240,0.88) !important;
  }
  body:not(.app-dark-theme) #app-shell-ads .desktop-ads-footer p {
    color: #94a3b8 !important;
  }
  body:not(.app-dark-theme) #app-shell-ads .desktop-ads-footer span {
    color: #64748b !important;
  }
  body:not(.app-dark-theme) .theme-toggle-btn {
    background: rgba(255,255,255,0.20) !important;
    color: #0f172a !important;
    border-color: rgba(226,232,240,0.92) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10) !important;
  }
  body:not(.app-dark-theme) .theme-toggle-btn:hover {
    background: rgba(255,255,255,1) !important;
  }
}
@media (min-width: 900px) and (max-height: 860px) {
  :root {
    --desktop-side-gap: 10px;
    --desktop-column-gap: 24px;
    --desktop-side-width: clamp(276px, 22vw, 332px);
  }
  #app {
    padding-left: calc(var(--desktop-side-width) + var(--desktop-side-gap) + var(--desktop-column-gap)) !important;
    padding-right: calc(var(--desktop-side-width) + var(--desktop-side-gap) + var(--desktop-column-gap)) !important;
  }
  #app-shell-header {
    top: var(--desktop-side-gap) !important;
    left: var(--desktop-side-gap) !important;
    width: var(--desktop-side-width) !important;
  }
  #app-shell-ads {
    width: var(--desktop-side-width) !important;
    top: var(--desktop-side-gap) !important;
    bottom: var(--desktop-side-gap) !important;
    right: var(--desktop-side-gap) !important;
  }
  #app-floating-logout {
    left: calc(var(--desktop-side-gap) + 18px) !important;
    bottom: calc(var(--desktop-side-gap) + 18px) !important;
    width: calc(var(--desktop-side-width) - 36px) !important;
  }
  #app-shell-nav {
    top: calc(var(--desktop-side-gap) + var(--desktop-side-header-height)) !important;
    left: var(--desktop-side-gap) !important;
    width: var(--desktop-side-width) !important;
    height: calc(100vh - (var(--desktop-side-gap) * 2) - var(--desktop-side-header-height)) !important;
  }
  #app-shell-ads .ads-rail {
    gap: 12px !important;
    padding: 12px !important;
  }
  #app-shell-ads .desktop-ads-stack {
    gap: 12px !important;
  }
  #app-shell-ads [data-desktop-banner-slot] {
    min-height: 132px !important;
  }
  #app-shell-ads .desktop-ads-footer p {
    font-size: 10px !important;
    line-height: 1.45 !important;
  }
  #app-shell-nav-list {
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    border-bottom: 0 !important;
    padding-top: 8px !important;
  }
  #app-shell-nav-list .nav-tab {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 14px !important;
    border-bottom: 0 !important;
    border-left: 3px solid transparent !important;
    border-radius: 14px !important;
    background: transparent !important;
    text-align: left !important;
  }
  #app-shell-nav-list .nav-active {
    border-left-color: #1a1a1a !important;
    color: #1a1a1a !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(28, 25, 23, 0.06);
  }
  #app-shell-nav-list .nav-inactive {
    color: #78716c !important;
  }
  #app-shell-nav-list .nav-tab i {
    margin-right: 10px !important;
  }
  .view-content {
    padding: 12px 4px 20px !important;
  }
  .dashboard-view .dashboard-shell {
    max-width: 1240px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  .dashboard-view .space-y-6 {
    gap: var(--desktop-card-gap) !important;
  }
  .dashboard-view .dashboard-hero-card {
    min-height: var(--desktop-hero-height);
  }
  .dashboard-view .dashboard-stats-grid > div {
    min-height: var(--desktop-mid-height);
  }
  .dashboard-view .dashboard-bottom-grid {
    grid-template-columns: minmax(0, 1.58fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
  }
  .dashboard-view .dashboard-bottom-grid > div {
    min-height: var(--desktop-bottom-height);
  }
  .app-dark-theme #app-shell-header {
    background: rgba(15, 23, 42, 0.88) !important;
    border-right-color: rgba(255,255,255,0.08) !important;
  }
  .app-dark-theme #app-shell-nav {
    background: rgba(15, 23, 42, 0.88) !important;
    border-right-color: rgba(255,255,255,0.08) !important;
  }
  .app-dark-theme .view-content {
    background: transparent !important;
  }
}
@media (min-width: 1200px) {
  .dashboard-view .dashboard-shell {
    max-width: 1320px !important;
  }
  .dashboard-view .dashboard-bottom-grid {
    grid-template-columns: minmax(0, 1.64fr) minmax(0, 1fr) !important;
  }
}
  @media (min-width: 900px) and (max-height: 860px) {
    :root {
      --desktop-card-gap: 12px;
      --desktop-hero-height: 214px;
      --desktop-mid-height: 176px;
      --desktop-bottom-height: 224px;
      --desktop-ads-footer-height: 38px;
    }
  }

/* Tema dark laranja - padrão principal */
.app-dark-theme {
  --app-bg-1: #070612;
  --app-bg-2: #130a24;
  --app-surface: rgba(25, 18, 45, 0.78);
  --app-surface-2: rgba(38, 26, 68, 0.78);
  --app-panel: rgba(18, 14, 35, 0.82);
  --app-panel-soft: rgba(32, 24, 58, 0.68);
  --app-border: rgba(196, 181, 253, 0.16);
  --app-border-soft: rgba(196, 181, 253, 0.10);
  --app-success: #fdba74;
  --app-info: #c084fc;
  --app-cta: #f97316;
  --app-modal-btn: #f97316;
  --app-modal-btn-hover: #ea580c;
  --app-modal-btn-text: #ffffff;
  --app-modal-btn-soft: rgba(249, 115, 22, 0.16);
  --app-modal-btn-border: rgba(253, 186, 116, 0.42);
  background:
    radial-gradient(circle at 18% 16%, rgba(249, 115, 22, 0.28), transparent 28%),
    radial-gradient(circle at 78% 6%, rgba(251, 146, 60, 0.18), transparent 24%),
    radial-gradient(circle at 70% 82%, rgba(91, 33, 182, 0.24), transparent 30%),
    linear-gradient(135deg, #06050f 0%, #10071f 48%, #1b0b31 100%) !important;
  color: var(--app-text);
}
.app-dark-theme #loading-screen {
  background:
    radial-gradient(circle at 50% 30%, rgba(249, 115, 22, 0.22), transparent 28%),
    linear-gradient(135deg, #06050f 0%, #1b0b31 100%) !important;
}
.app-dark-theme #app-shell-header,
.app-dark-theme #app-shell-nav,
.app-dark-theme .dashboard-hero-card,
.app-dark-theme .view-content [class*="bg-white"],
.app-dark-theme .view-content [class*="bg-stone-50"],
.app-dark-theme .view-content [class*="bg-stone-100"] {
  background: linear-gradient(180deg, rgba(31, 24, 58, 0.84), rgba(17, 13, 34, 0.90)) !important;
  border-color: rgba(196, 181, 253, 0.16) !important;
}
.app-dark-theme #app-shell-nav-list .nav-active {
  background: rgba(249, 115, 22, 0.16) !important;
  border-left-color: #fdba74 !important;
  box-shadow: 0 14px 34px rgba(249, 115, 22, 0.16) !important;
}
.app-dark-theme #app-shell-nav-list a[href*="wa.me"] {
  background: rgba(249, 115, 22, 0.18) !important;
  color: #ddd6fe !important;
}
.app-dark-theme .view-content [class*="bg-orange-50"],
.app-dark-theme .view-content [class*="bg-cyan-50"],
.app-dark-theme .view-content [class*="bg-blue-50"] {
  background: rgba(249, 115, 22, 0.12) !important;
}
.app-dark-theme .view-content [class*="text-cyan-500"],
.app-dark-theme .view-content [class*="text-blue-600"] {
  color: #c084fc !important;
}
.app-dark-theme #app-shell-ads .ads-rail {
  background:
    radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(31, 24, 58, 0.82), rgba(17, 13, 34, 0.90)) !important;
  border-color: rgba(196, 181, 253, 0.16) !important;
}
.app-dark-theme #app-shell-ads [data-desktop-banner-card],
.app-dark-theme #app-shell-ads [data-desktop-banner-slot],
.app-dark-theme .mobile-banner-slide,
.app-dark-theme .mobile-banner-placeholder {
  background: linear-gradient(180deg, rgba(48, 37, 78, 0.76), rgba(25, 18, 45, 0.82)) !important;
  border-color: rgba(196, 181, 253, 0.14) !important;
}
.app-dark-theme .mobile-banner-rotator {
  background: rgba(10, 7, 22, 0.94) !important;
}
.app-dark-theme .mobile-banner-support,
.app-dark-theme .view-content button[class*="bg-stone-900"],
.app-dark-theme .view-content a[class*="bg-stone-900"],
.app-dark-theme [id^="modal-"] button[type="submit"]:not(#delete-ok),
.app-dark-theme [id^="modal-"] .settings-auth-submit,
.app-dark-theme #type-income,
.app-dark-theme #delete-cancel {
  background: #f97316 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(249, 115, 22, 0.24) !important;
}
.app-dark-theme #type-income:not(.active),
.app-dark-theme #type-expense:not(.active) {
  background: rgba(249, 115, 22, 0.16) !important;
  color: #ddd6fe !important;
  border-color: rgba(253, 186, 116, 0.42) !important;
}
body:not(.app-dark-theme) #app-shell-nav-list .nav-active {
  border-left-color: #f97316 !important;
}
body:not(.app-dark-theme) #app-shell-nav-list a[href*="wa.me"] {
  background: linear-gradient(180deg, rgba(237, 233, 254, 0.96), rgba(221, 214, 254, 0.92)) !important;
  color: #c2410c !important;
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.10) !important;
}

/* Correção final: padronização simétrica dos espaços entre colunas no desktop */
@media (min-width: 900px) {
  :root {
    --desktop-side-gap: 8px;
    --desktop-column-gap: 22px;
  }

  #app-shell-header,
  #app-shell-nav,
  #app-shell-ads,
  #app,
  .view-content,
  .dashboard-shell {
    box-sizing: border-box !important;
  }

  #app-shell-header,
  #app-shell-nav {
    left: var(--desktop-side-gap) !important;
    width: var(--desktop-side-width) !important;
  }

  #app-shell-ads {
    right: var(--desktop-side-gap) !important;
    width: var(--desktop-side-width) !important;
  }

  #app {
    padding-left: calc(var(--desktop-side-gap) + var(--desktop-side-width) + var(--desktop-column-gap)) !important;
    padding-right: calc(var(--desktop-side-gap) + var(--desktop-side-width) + var(--desktop-column-gap)) !important;
  }

  #view-dashboard.view-content,
  .view-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dashboard-view .dashboard-shell,
  .view-content > .dashboard-shell,
  .view-content > .max-w-2xl {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 900px) and (max-height: 860px) {
  :root {
    --desktop-side-gap: 8px;
    --desktop-column-gap: 22px;
    --desktop-side-width: clamp(276px, 22vw, 332px);
  }

  #app {
    padding-left: calc(var(--desktop-side-gap) + var(--desktop-side-width) + var(--desktop-column-gap)) !important;
    padding-right: calc(var(--desktop-side-gap) + var(--desktop-side-width) + var(--desktop-column-gap)) !important;
  }
}

/* Ajuste fino solicitado: após mover 10px para a esquerda, retorna 3px para a direita. */
@media (min-width: 900px) {
  .view-content {
    transform: translateX(-7px) !important;
  }
}


/* Ajuste definitivo posição botão tema */
.theme-toggle,
.theme-switch,
.darkmode-toggle{
    position: relative !important;
    top: 5px !important;
}


/* Ajuste solicitado: mover botão de tema 7px para baixo */
.theme-toggle-btn { bottom: 13px !important; }
@media (max-width: 899px) {
  .theme-toggle-btn { bottom: calc(env(safe-area-inset-bottom, 0px) + 3px) !important; }
}
@media (min-width: 900px) {
  .theme-toggle-btn { bottom: 21px !important; }
}

/* Ajuste final solicitado: mover o botão de tema 7px para baixo de forma efetiva */
#theme-toggle-btn.theme-toggle-btn,
button#theme-toggle-btn.theme-toggle-btn {
  bottom: 6px !important;
  top: auto !important;
  transform: none !important;
}

@media (min-width: 900px) {
  #theme-toggle-btn.theme-toggle-btn,
  button#theme-toggle-btn.theme-toggle-btn {
    bottom: 14px !important;
    top: auto !important;
    transform: none !important;
  }
}

@media (max-width: 899px) {
  #theme-toggle-btn.theme-toggle-btn,
  button#theme-toggle-btn.theme-toggle-btn {
    bottom: max(env(safe-area-inset-bottom, 0px), 0px) !important;
    top: auto !important;
    transform: none !important;
  }
}

/* Ajuste solicitado: move o botão Suporte 15px para baixo sem alterar a coluna de publicidade. */
#app-shell-nav-list > a[href*="wa.me"] {
  position: relative !important;
  top: 15px !important;
}
.mobile-banner-support {
  top: 15px !important;
}

/* Experiência de comunidade: publicações, imagens, curtidas e comentários */
.community-post-card {
  position: relative;
  display: block;
  padding: 16px;
  border-radius: 28px;
  border: 1px solid rgba(249, 115, 22, 0.18);
  background: linear-gradient(145deg, rgba(25, 18, 43, 0.96), rgba(43, 28, 75, 0.94));
  color: #fff;
  box-shadow: 0 22px 48px rgba(20, 12, 38, 0.22);
}
.community-post-card + .community-post-card { margin-top: 14px; }
.community-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.community-author p {
  margin: 0;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 800;
  color: #fff;
}
.community-author small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}
.community-avatar {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #f97316, #7c2d12);
  border: 1px solid rgba(255,255,255,.18);
}
.community-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.community-post-image {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 22px;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.12);
}
.community-post-body h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
  color: #fff;
}
.community-post-body p {
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.70);
}
.community-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid currentColor;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.community-impact {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 14px;
  background: rgba(249, 115, 22, .18);
  border: 1px solid rgba(249, 115, 22, .22);
  color: #ddd6fe;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
}
.community-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.community-like-btn,
.community-comment-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 8px 11px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.74);
  font-size: 12px;
  font-weight: 800;
  transition: .18s ease;
}
.community-like-btn:hover,
.community-comment-toggle:hover,
.community-like-btn.is-liked {
  background: rgba(249, 115, 22, .24);
  color: #fff;
  border-color: rgba(196, 181, 253, .36);
}
.community-comments {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.community-comment {
  display: grid;
  gap: 2px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  padding: 9px 10px;
}
.community-comment strong {
  color: #fff;
  font-size: 11px;
}
.community-comment span {
  color: rgba(255,255,255,.72);
  font-size: 12px;
}
.community-comment-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.community-comment-form input {
  min-width: 0;
  flex: 1;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: #fff;
  padding: 10px 12px;
  font-size: 12px;
  outline: none;
}
.community-comment-form input::placeholder { color: rgba(255,255,255,.38); }
.community-comment-form button {
  border-radius: 15px;
  background: #f97316;
  color: #fff;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
}
.community-delete {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: rgba(255,255,255,.36);
  background: rgba(255,255,255,.06);
}
.community-delete:hover { color: #fecaca; background: rgba(239, 68, 68, .18); }

/* Mantém cards e formulários coerentes no tema dark laranja */
.dark input[type="file"]::file-selector-button {
  border: 0;
  border-radius: 12px;
  background: #f97316;
  color: #fff;
  padding: 8px 10px;
  margin-right: 10px;
  font-weight: 800;
}

/* Ícones SVG monocromáticos e dropdowns sem emojis */
[data-lucide] { stroke: currentColor; }
select, .dark-select-fix { color-scheme: dark; }
.nav-tab [data-lucide], .community-post-card [data-lucide], .goal-card [data-lucide] { color: currentColor; }

/* Ajuste mobile solicitado: mantém o tema 15px para cima e move o Suporte 5px para baixo no mobile. */
@media (max-width: 899px) {
  .mobile-banner-support {
    top: auto !important;
    margin-top: 8px !important;
    transform: translate(-50%, -10px) !important;
  }

  #theme-toggle-btn.theme-toggle-btn,
  button#theme-toggle-btn.theme-toggle-btn,
  .theme-toggle-btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 15px) !important;
    top: auto !important;
  }
}

@media (max-width: 480px) {
  .mobile-banner-support {
    margin-top: 8px !important;
    transform: translate(-50%, -10px) !important;
  }

  #theme-toggle-btn.theme-toggle-btn,
  button#theme-toggle-btn.theme-toggle-btn,
  .theme-toggle-btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 15px) !important;
  }
}

/* Ajuste solicitado: no mobile, move somente o botão Suporte 10px para baixo. */
@media (max-width: 899px) {
  .mobile-banner-support {
    top: auto !important;
    margin-top: 8px !important;
    transform: translate(-50%, -5px) !important;
  }
}

@media (max-width: 480px) {
  .mobile-banner-support {
    transform: translate(-50%, -5px) !important;
  }
}

/* Ajuste final solicitado: no mobile, move o botão Suporte 10px para baixo. */
@media (max-width: 899px) {
  .mobile-banner-support,
  a.mobile-banner-support {
    position: relative !important;
    top: auto !important;
    margin-top: 8px !important;
    transform: translate(-50%, 5px) !important;
  }
}

@media (max-width: 480px) {
  .mobile-banner-support,
  a.mobile-banner-support {
    transform: translate(-50%, 5px) !important;
  }
}

/* Campo fixo de usuário no mobile */
.mobile-user-strip {
  display: none;
}

@media (max-width: 899px) {
  .mobile-user-strip {
    position: relative;
    top: auto;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(24, 18, 43, 0.94) 0%, rgba(55, 27, 92, 0.92) 48%, rgba(88, 28, 135, 0.88) 100%);
    box-shadow: 0 18px 45px rgba(8, 7, 20, 0.28);
    backdrop-filter: blur(18px);
  }

  .mobile-user-photo {
    position: relative;
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
  }

  .mobile-user-photo:focus-visible {
    outline: 2px solid rgba(196, 181, 253, 0.95);
    outline-offset: 3px;
  }

  .mobile-user-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mobile-user-photo-img.hidden {
    display: none;
  }

  .mobile-user-initials {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .mobile-user-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-user-info span {
    font-size: 11px;
    line-height: 1;
    color: rgba(255,255,255,0.62);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
  }

  .mobile-user-info strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100vw - 132px);
    color: #fff;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .mobile-user-info #mobile-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .verified-badge {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #fed7aa;
    filter: drop-shadow(0 0 8px rgba(253, 186, 116, 0.48));
  }
}

/* Ajuste solicitado: espaço padrão entre o cabeçalho mobile e o card de perfil */
@media (max-width: 899px) {
  #mobile-user-strip.mobile-user-strip {
    margin-top: 14px !important;
    margin-bottom: 16px !important;
  }

  .view-content {
    padding-top: 8px !important;
  }
}


/* Modal da foto de perfil mobile */
.mobile-profile-modal {
  display: none;
}

@media (max-width: 899px) {
  .mobile-profile-modal:not(.hidden) {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .mobile-profile-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 5, 18, 0.72);
    backdrop-filter: blur(10px);
  }

  .mobile-profile-modal-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    padding: 22px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(24, 18, 43, 0.98) 0%, rgba(55, 27, 92, 0.96) 48%, rgba(88, 28, 135, 0.94) 100%);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
    border: 1px solid rgba(255,255,255,0.10);
    color: #fff;
    text-align: center;
  }

  .mobile-profile-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.10);
  }

  .mobile-profile-modal-title {
    margin: 4px 44px 18px;
    color: rgba(255,255,255,0.86);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }

  .mobile-profile-modal-image-wrap {
    width: 178px;
    height: 178px;
    margin: 0 auto 20px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
  }

  .mobile-profile-modal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mobile-profile-modal-image.hidden,
  .mobile-profile-modal-initials.hidden {
    display: none;
  }

  .mobile-profile-modal-initials {
    color: #fff;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: -0.05em;
  }

  .mobile-profile-upload-trigger {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    background: #f97316;
    color: #fff;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 14px 36px rgba(88, 28, 135, 0.38);
  }

  .mobile-profile-modal-open {
    overflow: hidden;
  }
}


/* Correção solicitada: o card de perfil mobile não acompanha nem muda de posição ao rocorrida a página. */
@media (max-width: 899px) {
  #mobile-user-strip.mobile-user-strip,
  .mobile-user-strip {
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }
}

@media (min-width: 900px) {
  .mobile-user-strip {
    position: relative;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(420px, calc(100% - 40px));
    margin: 18px 20px 18px;
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(24, 18, 43, 0.94) 0%, rgba(55, 27, 92, 0.92) 48%, rgba(88, 28, 135, 0.88) 100%);
    box-shadow: 0 18px 45px rgba(8, 7, 20, 0.28);
    backdrop-filter: blur(18px);
  }
}


/* Correção: exibir o card de perfil também no desktop */
#mobile-user-strip.mobile-user-strip {
  display: flex !important;
}

@media (min-width: 900px) {
  #mobile-user-strip.mobile-user-strip {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    z-index: 9;
    display: flex !important;
    align-items: center;
    gap: 14px;
    width: min(420px, calc(100% - 40px));
    margin: 108px 20px 20px 330px;
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(24, 18, 43, 0.94) 0%, rgba(55, 27, 92, 0.92) 48%, rgba(88, 28, 135, 0.88) 100%);
    box-shadow: 0 18px 45px rgba(8, 7, 20, 0.28);
    backdrop-filter: blur(18px);
  }

  #mobile-user-strip .mobile-user-photo {
    position: relative;
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
  }

  #mobile-user-strip .mobile-user-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #mobile-user-strip .mobile-user-photo-img.hidden {
    display: none;
  }

  #mobile-user-strip .mobile-user-initials {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  #mobile-user-strip .mobile-user-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  #mobile-user-strip .mobile-user-info span {
    font-size: 11px;
    line-height: 1;
    color: rgba(255,255,255,0.62);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
  }

  #mobile-user-strip .mobile-user-info strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 300px;
    color: #fff;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  #mobile-user-strip .mobile-user-info #mobile-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mobile-user-strip .verified-badge {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #fed7aa;
    filter: drop-shadow(0 0 8px rgba(253, 186, 116, 0.48));
  }

  .mobile-profile-modal:not(.hidden) {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
}

/* Correção desktop: card de perfil no fluxo correto da coluna esquerda, sem quebrar layout */
@media (min-width: 900px) {
  :root {
    --desktop-profile-card-height: 92px;
    --desktop-profile-card-gap: 10px;
  }

  #mobile-user-strip.mobile-user-strip {
    position: fixed !important;
    top: calc(var(--desktop-side-gap) + var(--desktop-side-header-height) + var(--desktop-profile-card-gap)) !important;
    left: var(--desktop-side-gap) !important;
    right: auto !important;
    transform: none !important;
    z-index: 31 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: var(--desktop-side-width) !important;
    max-width: var(--desktop-side-width) !important;
    min-height: var(--desktop-profile-card-height) !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: linear-gradient(135deg, rgba(24, 18, 43, 0.94) 0%, rgba(55, 27, 92, 0.92) 48%, rgba(88, 28, 135, 0.88) 100%) !important;
    box-shadow: 0 18px 45px rgba(8, 7, 20, 0.28) !important;
    backdrop-filter: blur(18px) !important;
  }

  #app-shell-nav {
    top: calc(var(--desktop-side-gap) + var(--desktop-side-header-height) + var(--desktop-profile-card-height) + (var(--desktop-profile-card-gap) * 2)) !important;
    height: calc(100vh - (var(--desktop-side-gap) * 2) - var(--desktop-side-header-height) - var(--desktop-profile-card-height) - (var(--desktop-profile-card-gap) * 2)) !important;
  }

  #mobile-user-strip .mobile-user-info strong {
    max-width: calc(var(--desktop-side-width) - 120px) !important;
  }
}


/* Correção final: card de perfil exibido na coluna central/feed, não na coluna do menu */
#view-dashboard #mobile-user-strip.mobile-user-strip {
  display: flex !important;
}

@media (min-width: 900px) {
  #view-dashboard #mobile-user-strip.mobile-user-strip {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 92px !important;
    margin: 0 0 18px 0 !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
  }

  #app-shell-nav {
    top: calc(var(--desktop-side-gap) + var(--desktop-side-header-height)) !important;
    height: calc(100vh - (var(--desktop-side-gap) * 2) - var(--desktop-side-header-height)) !important;
  }

  #view-dashboard #mobile-user-strip .mobile-user-info strong {
    max-width: calc(100vw - (var(--desktop-side-width) * 2) - 260px) !important;
  }
}

@media (max-width: 899px) {
  #view-dashboard #mobile-user-strip.mobile-user-strip {
    width: calc(100% - 0px) !important;
    margin: 14px 0 16px 0 !important;
  }
}

/* Dashboard aprimorado - comunidade de corrida de rua */
.dashboard-community-overview {
  overflow: hidden;
  position: relative;
}
.dashboard-community-overview::before {
  content: "";
  position: absolute;
  inset: -45% -20% auto auto;
  width: 340px;
  height: 340px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.28), transparent 68%);
  pointer-events: none;
}
.dashboard-hero-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 22px;
  align-items: stretch;
}
.dashboard-hero-subtitle {
  margin-top: 12px;
  max-width: 720px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.62) !important;
}
.dashboard-health-card {
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(145deg, rgba(234, 88, 12, 0.26), rgba(22, 12, 45, 0.58));
  border-radius: 24px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 42px rgba(19, 6, 38, 0.22);
}
.dashboard-health-card span,
.dashboard-summary-item span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.56) !important;
}
.dashboard-health-card strong {
  margin-top: 6px;
  font-size: 2.35rem;
  line-height: 1;
  color: #fff !important;
}
.dashboard-health-card small,
.dashboard-summary-item small {
  margin-top: 8px;
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.58) !important;
}
.dashboard-summary-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.dashboard-summary-item {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
  border-radius: 20px;
  padding: 15px;
  backdrop-filter: blur(14px);
}
.dashboard-summary-item strong {
  display: block;
  margin-top: 6px;
  font-size: 1.45rem;
  line-height: 1;
  color: #fff !important;
}
.dashboard-stat-card,
.dashboard-insights-card,
.dashboard-bottom-grid > div {
  background: linear-gradient(180deg, rgba(31, 39, 57, 0.74) 0%, rgba(24, 31, 46, 0.82) 100%) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.dashboard-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d8b4fe;
  background: rgba(251, 146, 60, 0.14);
  border: 1px solid rgba(216, 180, 254, 0.14);
}
.dashboard-feed-item,
.dashboard-insight-item {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.045);
  border-radius: 18px;
  padding: 14px;
}
.dashboard-feed-main,
.dashboard-insight-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.dashboard-feed-title-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 5px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}
.dashboard-feed-tag {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dashboard-tag-tip { color: #fed7aa; background: rgba(251, 146, 60, 0.18); }
.dashboard-tag-alert { color: #fecaca; background: rgba(248, 113, 113, 0.14); }
.dashboard-feed-title {
  color: var(--app-text) !important;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}
.dashboard-feed-meta,
.dashboard-insight-item span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,0.52) !important;
  font-size: 0.78rem;
  line-height: 1.45;
}
.dashboard-insight-item p {
  color: var(--app-text) !important;
  font-size: 0.88rem;
  font-weight: 700;
}
@media (max-width: 899px) {
  .dashboard-hero-top,
  .dashboard-summary-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-community-overview {
    padding: 20px !important;
  }
  .dashboard-health-card {
    min-height: 128px;
  }
  .dashboard-summary-grid {
    gap: 10px;
    margin-top: 16px;
  }
  .dashboard-summary-item,
  .dashboard-feed-item,
  .dashboard-insight-item {
    border-radius: 16px;
  }
  .dashboard-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .dashboard-stat-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }
  .dashboard-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }
}
@media (max-width: 480px) {
  .dashboard-stats-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-health-card strong {
    font-size: 2rem;
  }
}

/* Selo verificado laranja 3D - estilo rede social */
.verified-badge,
#mobile-user-strip .verified-badge,
.mobile-user-info .verified-badge {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex: 0 0 20px !important;
  display: inline-block !important;
  vertical-align: -3px !important;
  color: #f97316 !important;
  filter: drop-shadow(0 5px 7px rgba(46, 16, 101, .48)) drop-shadow(0 0 8px rgba(251, 146, 60, .42)) !important;
  transform: translateY(1px);
}
.verified-badge-3d {
  overflow: visible !important;
}
.mobile-user-name-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}


/* Loading screen: sempre visível ao recarregar por 2s, sem depender do carregamento das imagens */
#loading-screen {
  display: flex !important;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.35s ease;
}
#loading-screen[data-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}
.app-dark-theme #loading-screen {
  background:
    radial-gradient(circle at 18% 14%, rgba(249, 115, 22, 0.30), transparent 30%),
    radial-gradient(circle at 78% 10%, rgba(251, 146, 60, 0.20), transparent 28%),
    radial-gradient(circle at 58% 88%, rgba(91, 33, 182, 0.24), transparent 34%),
    linear-gradient(135deg, #06050f 0%, #10071f 48%, #1b0b31 100%) !important;
}

/* Correção definitiva: modal de foto de perfil alinhado também no desktop */
.mobile-profile-modal {
  display: none !important;
}
.mobile-profile-modal:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}
.mobile-profile-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(6, 5, 18, 0.76) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.mobile-profile-modal-panel {
  position: relative !important;
  z-index: 1 !important;
  width: min(420px, calc(100vw - 48px)) !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 26px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(192, 132, 252, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(20, 15, 38, 0.98) 0%, rgba(48, 24, 82, 0.97) 52%, rgba(88, 28, 135, 0.95) 100%) !important;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.56) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.mobile-profile-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  cursor: pointer !important;
}
.mobile-profile-modal-title {
  margin: 4px 48px 20px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}
.mobile-profile-modal-image-wrap {
  width: 190px !important;
  height: 190px !important;
  margin: 0 auto 22px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 18px 50px rgba(0,0,0,0.28) !important;
}
.mobile-profile-modal-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.mobile-profile-modal-image.hidden,
.mobile-profile-modal-initials.hidden {
  display: none !important;
}
.mobile-profile-modal-initials {
  color: #fff !important;
  font-size: 54px !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
}
.mobile-profile-upload-trigger {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 58%, #9a3412 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 16px 40px rgba(88, 28, 135, 0.42) !important;
  cursor: pointer !important;
}
.mobile-profile-modal-open {
  overflow: hidden !important;
}
@media (max-width: 520px) {
  .mobile-profile-modal:not(.hidden) {
    padding: 18px !important;
  }
  .mobile-profile-modal-panel {
    width: min(100%, 360px) !important;
    padding: 22px !important;
    border-radius: 28px !important;
  }
  .mobile-profile-modal-image-wrap {
    width: 172px !important;
    height: 172px !important;
  }
}

/* Loading: logo limpo, sem moldura/fundo atrás da marca */
#loading-screen .loading-screen-panel,
.app-dark-theme #loading-screen .loading-screen-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Ajuste solicitado: card "Feed recente" ocupando toda a corridagura horizontal disponível */
.dashboard-view .dashboard-bottom-grid {
  grid-template-columns: 1fr !important;
  width: 100% !important;
}
.dashboard-view .dashboard-bottom-grid > div:first-child {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (min-width: 900px) {
  .dashboard-view .dashboard-bottom-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Refinamento premium do tema escuro
   Escopo isolado: não altera o tema ccorridao.
   Objetivo: mais harmonia, contraste elegante e coesão visual.
   ========================================================= */
body.app-dark-theme,
.app-dark-theme {
  --app-bg-1: #080613;
  --app-bg-2: #12091f;
  --app-bg-3: #1d0f33;
  --app-surface: rgba(28, 22, 49, 0.88);
  --app-surface-2: rgba(42, 31, 72, 0.82);
  --app-panel: rgba(18, 14, 34, 0.88);
  --app-panel-soft: rgba(34, 25, 58, 0.72);
  --app-border: rgba(196, 181, 253, 0.18);
  --app-border-soft: rgba(196, 181, 253, 0.11);
  --app-text: #fffaf5;
  --app-text-soft: #ddd6fe;
  --app-text-muted: #a9a0c5;
  --app-success: #fdba74;
  --app-info: #c084fc;
  --app-danger: #fb7185;
  --app-cta: #f97316;
  --app-cta-2: #f97316;
  --app-glow: rgba(249, 115, 22, 0.26);
  --app-shadow: 0 24px 70px rgba(2, 1, 10, 0.44);
  background:
    radial-gradient(circle at 16% 10%, rgba(249, 115, 22, 0.32), transparent 29%),
    radial-gradient(circle at 86% 4%, rgba(192, 132, 252, 0.20), transparent 26%),
    radial-gradient(circle at 70% 82%, rgba(76, 29, 149, 0.28), transparent 34%),
    linear-gradient(135deg, var(--app-bg-1) 0%, var(--app-bg-2) 48%, var(--app-bg-3) 100%) !important;
  color: var(--app-text) !important;
  color-scheme: dark;
}

body.app-dark-theme::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.72), transparent 78%);
}

.app-dark-theme #app,
.app-dark-theme .view-content {
  position: relative;
  z-index: 1;
  color: var(--app-text) !important;
}

.app-dark-theme #app-shell-header,
.app-dark-theme #app-shell-nav,
.app-dark-theme #app-shell-ads .ads-rail,
.app-dark-theme .dashboard-hero-card,
.app-dark-theme .view-content [class*="bg-white"],
.app-dark-theme .view-content [class*="bg-stone-50"],
.app-dark-theme .view-content [class*="bg-stone-100"],
.app-dark-theme [id^="modal-"] .relative,
.app-dark-theme #delete-confirm .relative {
  background:
    radial-gradient(circle at 12% 0%, rgba(251, 146, 60, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(34, 25, 58, 0.90), rgba(18, 14, 34, 0.94)) !important;
  border-color: var(--app-border) !important;
  box-shadow:
    var(--app-shadow),
    inset 0 1px 0 rgba(255,255,255,0.075) !important;
  backdrop-filter: blur(24px) saturate(132%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(132%) !important;
}

.app-dark-theme .dashboard-hero-card,
.app-dark-theme .view-content [class*="rounded-3xl"],
.app-dark-theme .view-content [class*="rounded-2xl"] {
  border-color: var(--app-border-soft) !important;
}

.app-dark-theme .view-content [class*="shadow"],
.app-dark-theme .view-content [class*="shadow-sm"],
.app-dark-theme .view-content [class*="shadow-lg"],
.app-dark-theme .view-content [class*="shadow-xl"] {
  box-shadow:
    0 22px 54px rgba(2, 1, 10, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.055) !important;
}

.app-dark-theme #app-title,
.app-dark-theme #app-title-desktop,
.app-dark-theme #app-shell-nav h1,
.app-dark-theme .view-content h1,
.app-dark-theme .view-content h2,
.app-dark-theme .view-content h3,
.app-dark-theme .view-content h4,
.app-dark-theme .view-content .font-bold,
.app-dark-theme .view-content .font-semibold {
  color: var(--app-text) !important;
  letter-spacing: -0.015em;
}

.app-dark-theme .view-content p,
.app-dark-theme .view-content small,
.app-dark-theme .view-content label,
.app-dark-theme .view-content [class*="text-stone-400"],
.app-dark-theme .view-content [class*="text-stone-500"],
.app-dark-theme .view-content [class*="text-stone-600"] {
  color: var(--app-text-muted) !important;
}

.app-dark-theme .view-content [class*="text-stone-800"],
.app-dark-theme .view-content [class*="text-stone-900"] {
  color: var(--app-text) !important;
}

.app-dark-theme .view-content [class*="text-orange-500"],
.app-dark-theme .view-content [class*="text-orange-600"],
.app-dark-theme .view-content [class*="text-orange-700"],
.app-dark-theme .brand-plus {
  color: #fed7aa !important;
  text-shadow: 0 0 22px rgba(249, 115, 22, 0.42);
}

.app-dark-theme #app-shell-nav-list .nav-tab,
.app-dark-theme #app-shell-nav-list a[href*="wa.me"] {
  color: var(--app-text-soft) !important;
  border: 1px solid transparent !important;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.app-dark-theme #app-shell-nav-list .nav-tab:hover,
.app-dark-theme #app-shell-nav-list a[href*="wa.me"]:hover {
  transform: translateY(-1px);
  background: rgba(249, 115, 22, 0.12) !important;
  border-color: rgba(196, 181, 253, 0.16) !important;
  color: #ffffff !important;
}

.app-dark-theme #app-shell-nav-list .nav-active {
  background:
    linear-gradient(135deg, rgba(249, 115, 22, 0.28), rgba(76, 29, 149, 0.18)) !important;
  border-color: rgba(196, 181, 253, 0.24) !important;
  border-left-color: #fed7aa !important;
  color: #ffffff !important;
  box-shadow: 0 16px 38px rgba(76, 29, 149, 0.30) !important;
}

.app-dark-theme #app-shell-nav-list a[href*="wa.me"],
.app-dark-theme .mobile-banner-support,
.app-dark-theme .view-content button[class*="bg-stone-900"],
.app-dark-theme .view-content a[class*="bg-stone-900"],
.app-dark-theme [id^="modal-"] button[type="submit"]:not(#delete-ok),
.app-dark-theme [id^="modal-"] .settings-auth-submit,
.app-dark-theme #type-income,
.app-dark-theme #delete-cancel {
  background: linear-gradient(135deg, var(--app-cta-2), var(--app-cta) 58%, #c2410c) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 38px rgba(249, 115, 22, 0.30) !important;
}

.app-dark-theme #app-shell-nav-list a[href*="wa.me"]:hover,
.app-dark-theme .mobile-banner-support:hover,
.app-dark-theme .view-content button[class*="bg-stone-900"]:hover,
.app-dark-theme .view-content a[class*="bg-stone-900"]:hover,
.app-dark-theme [id^="modal-"] button[type="submit"]:not(#delete-ok):hover,
.app-dark-theme [id^="modal-"] .settings-auth-submit:hover {
  filter: brightness(1.07) saturate(1.06);
  box-shadow: 0 20px 48px rgba(249, 115, 22, 0.38) !important;
}

.app-dark-theme .view-content input,
.app-dark-theme .view-content select,
.app-dark-theme .view-content textarea,
.app-dark-theme [id^="modal-"] input,
.app-dark-theme [id^="modal-"] select,
.app-dark-theme [id^="modal-"] textarea,
body.app-dark-theme select {
  background: rgba(11, 8, 24, 0.62) !important;
  border-color: rgba(196, 181, 253, 0.17) !important;
  color: var(--app-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

.app-dark-theme .view-content input:focus,
.app-dark-theme .view-content select:focus,
.app-dark-theme .view-content textarea:focus,
.app-dark-theme [id^="modal-"] input:focus,
.app-dark-theme [id^="modal-"] select:focus,
.app-dark-theme [id^="modal-"] textarea:focus {
  border-color: rgba(196, 181, 253, 0.54) !important;
  box-shadow:
    0 0 0 3px rgba(249, 115, 22, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  outline: none !important;
}

.app-dark-theme .view-content input::placeholder,
.app-dark-theme .view-content textarea::placeholder,
.app-dark-theme [id^="modal-"] input::placeholder,
.app-dark-theme [id^="modal-"] textarea::placeholder {
  color: rgba(221, 214, 254, 0.46) !important;
}

body.app-dark-theme select option {
  background-color: #171126 !important;
  color: #fffaf5 !important;
}

.app-dark-theme .view-content [class*="bg-orange-50"],
.app-dark-theme .view-content [class*="bg-blue-50"],
.app-dark-theme .view-content [class*="bg-cyan-50"],
.app-dark-theme .view-content [class*="bg-amber-50"] {
  background: rgba(249, 115, 22, 0.105) !important;
  border-color: rgba(196, 181, 253, 0.15) !important;
}

.app-dark-theme .view-content [class*="bg-red-50"] {
  background: rgba(251, 113, 133, 0.105) !important;
  border-color: rgba(251, 113, 133, 0.18) !important;
}

.app-dark-theme .view-content [class*="text-red-500"],
.app-dark-theme .view-content [class*="text-red-600"] {
  color: #fb7185 !important;
}

.app-dark-theme .view-content [class*="text-blue-600"],
.app-dark-theme .view-content [class*="text-cyan-500"] {
  color: #c084fc !important;
}

.app-dark-theme table,
.app-dark-theme thead,
.app-dark-theme tbody,
.app-dark-theme tr,
.app-dark-theme td,
.app-dark-theme th {
  border-color: rgba(196, 181, 253, 0.12) !important;
}

.app-dark-theme thead,
.app-dark-theme .view-content [class*="bg-stone-200"] {
  background: rgba(249, 115, 22, 0.11) !important;
}

.app-dark-theme #app-shell-ads [data-desktop-banner-card],
.app-dark-theme #app-shell-ads [data-desktop-banner-slot],
.app-dark-theme .mobile-banner-slide,
.app-dark-theme .mobile-banner-placeholder,
.app-dark-theme .community-post-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(196, 181, 253, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(43, 31, 72, 0.84), rgba(23, 16, 42, 0.90)) !important;
  border-color: rgba(196, 181, 253, 0.14) !important;
}

.app-dark-theme .mobile-banner-rotator {
  background: rgba(8, 6, 19, 0.92) !important;
  border-top-color: rgba(196, 181, 253, 0.12) !important;
}

.app-dark-theme #loading-screen {
  background:
    radial-gradient(circle at 18% 14%, rgba(249, 115, 22, 0.34), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(192, 132, 252, 0.23), transparent 28%),
    radial-gradient(circle at 58% 88%, rgba(76, 29, 149, 0.28), transparent 34%),
    linear-gradient(135deg, #05040d 0%, #10071f 48%, #1d0f33 100%) !important;
}

.app-dark-theme .theme-toggle-btn {
  background: rgba(24, 18, 43, 0.74) !important;
  border-color: rgba(196, 181, 253, 0.20) !important;
  color: #f5f3ff !important;
  box-shadow: 0 16px 40px rgba(2, 1, 10, 0.38), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.app-dark-theme .theme-toggle-btn:hover {
  background: rgba(44, 32, 74, 0.94) !important;
  color: #ffffff !important;
}

.app-dark-theme ::selection {
  background: rgba(253, 186, 116, 0.38);
  color: #ffffff;
}

.app-dark-theme ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.app-dark-theme ::-webkit-scrollbar-track {
  background: rgba(8, 6, 19, 0.72);
}
.app-dark-theme ::-webkit-scrollbar-thumb {
  background: rgba(249, 115, 22, 0.48);
  border-radius: 999px;
  border: 2px solid rgba(8, 6, 19, 0.72);
}
.app-dark-theme ::-webkit-scrollbar-thumb:hover {
  background: rgba(253, 186, 116, 0.62);
}

@media (max-width: 899px) {
  .app-dark-theme #app-shell-header {
    background: rgba(12, 8, 27, 0.90) !important;
    border-bottom-color: rgba(196, 181, 253, 0.13) !important;
  }
  .app-dark-theme #app-shell-nav {
    background:
      radial-gradient(circle at 12% 0%, rgba(249, 115, 22, 0.18), transparent 34%),
      linear-gradient(180deg, rgba(18, 12, 35, 0.99), rgba(9, 7, 22, 0.99)) !important;
  }
}


/* Correção definitiva: remover qualquer moldura/fundo atrás da logo do preloader em ambos os temas */
body:not(.app-dark-theme) #loading-screen .loading-screen-panel,
.app-dark-theme #loading-screen .loading-screen-panel,
#loading-screen .loading-screen-panel{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}



/* Ajustes harmônicos tema ccorridao */
body:not(.app-dark-theme)::before,
body:not(.app-dark-theme)::after{
    background: radial-gradient(circle, rgba(249,115,22,.22) 0%, rgba(249,115,22,0) 70%) !important;
}

/* Card Perfil */
body:not(.app-dark-theme) .profile-card,
body:not(.app-dark-theme) .perfil-card{
    background: linear-gradient(135deg,#ffffff 0%,#faf5ff 100%) !important;
    border: 1px solid rgba(249,115,22,.12) !important;
    box-shadow: 0 10px 30px rgba(249,115,22,.08) !important;
}

/* Card Engajamento */
body:not(.app-dark-theme) .engagement-card,
body:not(.app-dark-theme) .card-engajamento{
    background: linear-gradient(135deg,#ffffff 0%,#f5f3ff 100%) !important;
    border: 1px solid rgba(249,115,22,.10) !important;
    box-shadow: 0 10px 30px rgba(249,115,22,.08) !important;
}


/* Refinamento adicional tema ccorridao */

/* Glow de fundo laranja substituindo tons esverdeados */
body:not(.app-dark-theme){
  --accent-glow: rgba(249,115,22,.20);
}
body:not(.app-dark-theme)::before{
  background: radial-gradient(circle at 20% 20%, var(--accent-glow), transparent 65%) !important;
}
body:not(.app-dark-theme)::after{
  background: radial-gradient(circle at 80% 80%, rgba(168,85,247,.16), transparent 65%) !important;
}

/* Perfil */
body:not(.app-dark-theme) .profile-card,
body:not(.app-dark-theme) .perfil-card{
  border-radius: 20px !important;
  background: linear-gradient(180deg,#ffffff,#faf7ff) !important;
  border-color: rgba(249,115,22,.15) !important;
}

/* Engajamento */
body:not(.app-dark-theme) .engagement-card,
body:not(.app-dark-theme) .card-engajamento{
  border-radius: 20px !important;
  background: linear-gradient(180deg,#ffffff,#f7f4ff) !important;
  border-color: rgba(249,115,22,.15) !important;
}



/* =========================================================
   Correção real do tema ccorridao: glow laranja + cards harmonizados
   Seletores reais encontrados:
   - fundo: body:not(.app-dark-theme)
   - card de perfil: #mobile-user-strip.mobile-user-strip
   - card de engajamento: .dashboard-health-card
   ========================================================= */

body:not(.app-dark-theme) {
  --app-light-bg-1: #fffaf5;
  --app-light-bg-2: #f4efff;
  --app-light-accent: #f97316;
  --app-light-accent-2: #f97316;
  background:
    radial-gradient(circle at 16% 18%, rgba(249, 115, 22, 0.15), transparent 28%),
    radial-gradient(circle at 86% 72%, rgba(251, 146, 60, 0.14), transparent 26%),
    radial-gradient(circle at 48% 104%, rgba(234, 88, 12, 0.08), transparent 32%),
    linear-gradient(135deg, #fffaf5 0%, #ffffff 48%, #f4efff 100%) !important;
}

/* Card de perfil real */
body:not(.app-dark-theme) #mobile-user-strip.mobile-user-strip {
  background:
    radial-gradient(circle at 94% 12%, rgba(251, 146, 60, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(250,247,255,0.94) 100%) !important;
  border: 1px solid rgba(249, 115, 22, 0.16) !important;
  box-shadow:
    0 18px 44px rgba(234, 88, 12, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.86) !important;
  color: #2e2547 !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
}

body:not(.app-dark-theme) #mobile-user-strip .mobile-user-info strong,
body:not(.app-dark-theme) #mobile-user-strip .mobile-user-info span,
body:not(.app-dark-theme) #mobile-user-strip .mobile-user-info p {
  color: #2e2547 !important;
}

body:not(.app-dark-theme) #mobile-user-strip .mobile-user-photo,
body:not(.app-dark-theme) #mobile-user-strip [class*="photo"],
body:not(.app-dark-theme) #mobile-user-strip [class*="avatar"] {
  background: linear-gradient(135deg, rgba(249,115,22,0.18), rgba(168,85,247,0.10)) !important;
  border-color: rgba(249, 115, 22, 0.20) !important;
}

/* Card de engajamento real */
body:not(.app-dark-theme) .dashboard-health-card {
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,0.72), transparent 24%),
    linear-gradient(145deg, #f97316 0%, #ea580c 48%, #f97316 100%) !important;
  border: 1px solid rgba(249, 115, 22, 0.22) !important;
  box-shadow:
    0 20px 46px rgba(234, 88, 12, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

body:not(.app-dark-theme) .dashboard-health-card span,
body:not(.app-dark-theme) .dashboard-health-card small {
  color: rgba(255,255,255,0.78) !important;
}

body:not(.app-dark-theme) .dashboard-health-card strong {
  color: #ffffff !important;
}

/* Harmonização do card principal que envolve o engajamento */
body:not(.app-dark-theme) .dashboard-community-overview {
  background:
    radial-gradient(circle at 92% 10%, rgba(251, 146, 60, 0.13), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(250,247,255,0.92) 100%) !important;
  border-color: rgba(249, 115, 22, 0.14) !important;
}

body:not(.app-dark-theme) .dashboard-community-overview::before {
  background: radial-gradient(circle, rgba(251, 146, 60, 0.22), transparent 68%) !important;
}




/* =========================================================
   Correção visual: remove risco/linha estranha nos cards do dashboard
   Causa comum: pseudo-elementos, blur/sombra e overflow do grid/card.
   Mantém aparência, apenas limpa artefatos visuais.
   ========================================================= */

.dashboard-stat-card,
.dashboard-stat-card *,
.dashboard-health-card,
.dashboard-community-overview {
  box-sizing: border-box !important;
}

.dashboard-stat-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-clip: padding-box !important;
  transform: translateZ(0);
}

/* Impede pseudo-elementos herdados ou efeitos de brilho de vazarem dentro dos cards */
.dashboard-stat-card::before,
.dashboard-stat-card::after {
  content: none !important;
  display: none !important;
}

/* Garante que o último card não gere borda/sombra duplicada na lateral */
.dashboard-stats-grid .dashboard-stat-card:last-child,
.dashboard-stat-card:last-child {
  border-right-color: rgba(249, 115, 22, 0.18) !important;
  box-shadow:
    0 16px 36px rgba(31, 18, 57, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Tema ccorridao: harmoniza o card sem gerar linha vertical/artefato */
body:not(.app-dark-theme) .dashboard-stat-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,245,255,0.92) 100%) !important;
  border: 1px solid rgba(249, 115, 22, 0.16) !important;
  box-shadow:
    0 14px 34px rgba(234, 88, 12, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

/* Tema escuro: preserva o visual laranja, removendo artefatos de borda */
body.app-dark-theme .dashboard-stat-card {
  background:
    linear-gradient(180deg, rgba(44, 35, 64, 0.96) 0%, rgba(34, 28, 50, 0.96) 100%) !important;
  border: 1px solid rgba(253, 186, 116, 0.14) !important;
  box-shadow:
    0 16px 38px rgba(6, 3, 14, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.055) !important;
}

/* Evita que o container do resumo corte/duplique sombras nos cards internos */
.dashboard-community-overview {
  overflow: hidden !important;
}

.dashboard-stats-grid {
  overflow: visible !important;
  align-items: stretch !important;
}



/* Card ENGAJAMENTO mais discreto no tema ccorridao */
body:not(.app-dark-theme) .dashboard-health-card{
    background:
      linear-gradient(135deg,#f3ecff 0%, #ede4ff 100%) !important;
    border:1px solid rgba(249,115,22,.14) !important;
    box-shadow:0 8px 24px rgba(249,115,22,.08) !important;
}

body:not(.app-dark-theme) .dashboard-health-card::before,
body:not(.app-dark-theme) .dashboard-health-card::after{
    opacity:.18 !important;
    filter: blur(20px) !important;
}

body:not(.app-dark-theme) .dashboard-health-card,
body:not(.app-dark-theme) .dashboard-health-card *{
    color:#c2410c !important;
}

body:not(.app-dark-theme) .dashboard-health-card p,
body:not(.app-dark-theme) .dashboard-health-card span,
body:not(.app-dark-theme) .dashboard-health-card small{
    color:#5b5568 !important;
}

/* Evita flash escuro no carregamento do tema ccorridao */
html:not(.app-dark-theme),
body:not(.app-dark-theme){
    background:#fffaf5 !important;
}

body:not(.app-dark-theme) #loading-screen,
body:not(.app-dark-theme) .loading-screen,
body:not(.app-dark-theme) .preloader{
    background:#fffaf5 !important;
    color:#2e2547 !important;
}

body:not(.app-dark-theme) #loading-screen *{
    transition:none !important;
}


/* =========================================================
   Ajuste final tema ccorridao: porcentagem roxa no card Engajamento
   ========================================================= */
body:not(.app-dark-theme) .dashboard-health-card strong,
body:not(.app-dark-theme) .dashboard-health-card .dashboard-health-value,
body:not(.app-dark-theme) .dashboard-health-card [class*="value"],
body:not(.app-dark-theme) .dashboard-health-card [class*="percent"],
body:not(.app-dark-theme) .dashboard-health-card .stat-value,
body:not(.app-dark-theme) .dashboard-health-card h2,
body:not(.app-dark-theme) .dashboard-health-card h3 {
  color: #ea580c !important;
  text-shadow: none !important;
}

/* Mantém textos secundários discretos no tema ccorridao */
body:not(.app-dark-theme) .dashboard-health-card span,
body:not(.app-dark-theme) .dashboard-health-card small,
body:not(.app-dark-theme) .dashboard-health-card p {
  color: #645b75 !important;
}

/* Fundo inicial ccorridao: evita flash escuro antes do JS finalizar */
html.theme-light-boot,
html.theme-light-boot body,
html.theme-light-boot #loading-screen,
html.theme-light-boot .loading-screen,
html.theme-light-boot .preloader {
  background: #fffaf5 !important;
  color: #2e2547 !important;
}

html.theme-light-boot #loading-screen::before,
html.theme-light-boot #loading-screen::after,
html.theme-light-boot .loading-screen::before,
html.theme-light-boot .loading-screen::after {
  background: transparent !important;
  box-shadow: none !important;
}

html.theme-light-boot #loading-screen .loading-screen-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Avatar sempre redondo */
.profile-avatar,
.mobile-user-photo,
.user-avatar,
.profile-photo,
#mobile-user-strip .mobile-user-photo,
#mobile-user-strip img,
img.avatar{
    border-radius:50% !important;
    overflow:hidden !important;
    aspect-ratio:1/1 !important;
}

.profile-avatar img,
.mobile-user-photo img,
.user-avatar img,
.profile-photo img,
#mobile-user-strip .mobile-user-photo img,
#mobile-user-strip img,
img.avatar{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:50% !important;
    display:block !important;
}

/* Modal de perfil completo: avatar, dados cadastrais e senha */
.mobile-profile-modal-panel {
  width: min(620px, calc(100vw - 40px)) !important;
  max-width: 620px !important;
  max-height: calc(100vh - 42px) !important;
  overflow-y: auto !important;
  padding: 28px !important;
  text-align: left !important;
}
.mobile-profile-modal-kicker {
  margin: 0 48px 6px 0 !important;
  color: rgba(216, 180, 254, 0.92) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
.mobile-profile-modal-title {
  margin: 0 48px 8px 0 !important;
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
}
.mobile-profile-modal-subtitle {
  margin: 0 48px 20px 0 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.mobile-profile-modal-image-wrap {
  width: 150px !important;
  height: 150px !important;
  margin: 0 auto 14px !important;
  border: 4px solid rgba(255,255,255,.12) !important;
}
.mobile-profile-photo-actions,
.mobile-profile-footer-actions {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}
.mobile-profile-photo-actions {
  justify-content: center !important;
  margin-bottom: 22px !important;
}
.mobile-profile-upload-trigger,
.mobile-profile-save-btn,
.mobile-profile-secondary-btn {
  min-height: 46px !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  transition: transform .18s ease, opacity .18s ease, background .18s ease !important;
}
.mobile-profile-upload-trigger:hover,
.mobile-profile-save-btn:hover,
.mobile-profile-secondary-btn:hover { transform: translateY(-1px) !important; }
.mobile-profile-upload-trigger { width: auto !important; min-width: 150px !important; }
.mobile-profile-save-btn {
  flex: 1 !important;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 58%, #9a3412 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 16px 40px rgba(88, 28, 135, 0.34) !important;
}
.mobile-profile-save-btn:disabled { opacity: .68 !important; cursor: wait !important; transform: none !important; }
.mobile-profile-secondary-btn {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.mobile-profile-fields-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
.mobile-profile-fields-grid.two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.mobile-profile-field { display: block !important; }
.mobile-profile-field span {
  display: block !important;
  margin: 0 0 6px !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.mobile-profile-field input {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: #fff !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.mobile-profile-field input::placeholder { color: rgba(255,255,255,.36) !important; }
.mobile-profile-field input:focus {
  border-color: rgba(216,180,254,.72) !important;
  box-shadow: 0 0 0 3px rgba(168,85,247,.18) !important;
}
.mobile-profile-password-box {
  margin: 16px 0 !important;
  padding: 16px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.mobile-profile-password-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.mobile-profile-password-head strong { color: #fff !important; font-size: 14px !important; }
.mobile-profile-password-head small { color: rgba(255,255,255,.48) !important; font-size: 11px !important; }
.mobile-profile-status {
  margin: 0 0 14px !important;
  padding: 11px 13px !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}
.mobile-profile-status.is-success {
  background: rgba(34,197,94,.12) !important;
  border: 1px solid rgba(74,222,128,.22) !important;
  color: #bbf7d0 !important;
}
.mobile-profile-status.is-error {
  background: rgba(239,68,68,.12) !important;
  border: 1px solid rgba(248,113,113,.22) !important;
  color: #fecaca !important;
}
.app-light-theme .mobile-profile-modal-panel {
  background: radial-gradient(circle at 16% 10%, rgba(196, 181, 253, .34), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,242,255,.98)) !important;
  color: #1f1235 !important;
  border-color: rgba(234,88,12,.14) !important;
  box-shadow: 0 34px 100px rgba(194,65,12,.18) !important;
}
.app-light-theme .mobile-profile-modal-title { color: #271141 !important; }
.app-light-theme .mobile-profile-modal-kicker { color: #ea580c !important; }
.app-light-theme .mobile-profile-modal-subtitle,
.app-light-theme .mobile-profile-password-head small { color: rgba(39,17,65,.58) !important; }
.app-light-theme .mobile-profile-field span { color: rgba(39,17,65,.58) !important; }
.app-light-theme .mobile-profile-field input {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(234,88,12,.16) !important;
  color: #271141 !important;
}
.app-light-theme .mobile-profile-field input::placeholder { color: rgba(39,17,65,.34) !important; }
.app-light-theme .mobile-profile-secondary-btn {
  background: rgba(234,88,12,.08) !important;
  color: #9a3412 !important;
  border-color: rgba(234,88,12,.16) !important;
}
.app-light-theme .mobile-profile-password-box {
  background: rgba(234,88,12,.055) !important;
  border-color: rgba(234,88,12,.12) !important;
}
.app-light-theme .mobile-profile-password-head strong { color: #271141 !important; }
@media (max-width: 560px) {
  .mobile-profile-modal-panel {
    width: min(100%, 390px) !important;
    padding: 22px !important;
    border-radius: 28px !important;
  }
  .mobile-profile-fields-grid.two-cols { grid-template-columns: 1fr !important; }
  .mobile-profile-footer-actions { flex-direction: column-reverse !important; }
  .mobile-profile-footer-actions > * { width: 100% !important; }
  .mobile-profile-modal-image-wrap { width: 132px !important; height: 132px !important; }
}


/* =========================================================
   Refinamento de contraste - tema ccorridao
   Garante títulos, ícones e marca visíveis sem pesar o layout.
   ========================================================= */
html.theme-light-boot #loading-screen h1,
html.theme-light-boot #loading-screen .brand-lockup,
body:not(.app-dark-theme) #loading-screen h1,
body:not(.app-dark-theme) #loading-screen .brand-lockup {
  color: #1f1633 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html.theme-light-boot #loading-screen .brand-plus,
body:not(.app-dark-theme) #loading-screen .brand-plus,
body:not(.app-dark-theme) .brand-plus {
  color: #ea580c !important;
  opacity: 1 !important;
}

body:not(.app-dark-theme) #app-title,
body:not(.app-dark-theme) #app-title-desktop,
body:not(.app-dark-theme) #app-shell-nav h1,
body:not(.app-dark-theme) .view-content h1,
body:not(.app-dark-theme) .view-content h2,
body:not(.app-dark-theme) .view-content h3,
body:not(.app-dark-theme) .view-content h4,
body:not(.app-dark-theme) .view-content .font-bold,
body:not(.app-dark-theme) .view-content .font-semibold {
  color: #21172f !important;
}

body:not(.app-dark-theme) .view-content p,
body:not(.app-dark-theme) .view-content span,
body:not(.app-dark-theme) .view-content small,
body:not(.app-dark-theme) .view-content label,
body:not(.app-dark-theme) .view-content [class*="text-stone-400"],
body:not(.app-dark-theme) .view-content [class*="text-stone-500"],
body:not(.app-dark-theme) .view-content [class*="text-stone-600"] {
  color: #5a5268 !important;
}

body:not(.app-dark-theme) .view-content [class*="text-stone-700"],
body:not(.app-dark-theme) .view-content [class*="text-stone-800"],
body:not(.app-dark-theme) .view-content [class*="text-stone-900"] {
  color: #241832 !important;
}

body:not(.app-dark-theme) .view-content [data-lucide],
body:not(.app-dark-theme) #app-shell-header [data-lucide],
body:not(.app-dark-theme) #app-shell-nav [data-lucide] {
  color: currentColor !important;
  stroke-width: 2.25 !important;
}

body:not(.app-dark-theme) #app-shell-nav-list .nav-tab {
  color: #463a5c !important;
}

body:not(.app-dark-theme) #app-shell-nav-list .nav-active {
  color: #21172f !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,255,.92)) !important;
  border-color: rgba(234,88,12,.22) !important;
  border-left-color: #ea580c !important;
}

body:not(.app-dark-theme) .view-content .text-orange-500,
body:not(.app-dark-theme) .view-content .text-orange-600,
body:not(.app-dark-theme) .view-content .text-orange-700,
body:not(.app-dark-theme) #app-shell-nav-list a[href*="wa.me"] {
  color: #c2410c !important;
}

body:not(.app-dark-theme) .view-content .bg-orange-50,
body:not(.app-dark-theme) #app-shell-nav-list a[href*="wa.me"] {
  background: rgba(234, 88, 12, 0.10) !important;
  border: 1px solid rgba(234, 88, 12, 0.14) !important;
}

body:not(.app-dark-theme) .dashboard-hero-card p,
body:not(.app-dark-theme) .dashboard-hero-card span {
  color: #51465f !important;
}

body:not(.app-dark-theme) button:not(.mobile-profile-save-btn):not(.theme-toggle-btn),
body:not(.app-dark-theme) .view-content a {
  text-shadow: none !important;
}

/* =========================================================
   Modal Minha Conta - layout premium responsivo
   Aplicado ao código: centralização, contraste, botões e temas.
   ========================================================= */
.mobile-profile-modal:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: grid !important;
  place-items: center !important;
  padding: 22px !important;
  box-sizing: border-box !important;
}
.mobile-profile-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(7, 6, 18, .78) !important;
  backdrop-filter: blur(16px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
}
.mobile-profile-modal-panel {
  position: relative !important;
  z-index: 1 !important;
  width: min(840px, calc(100vw - 44px)) !important;
  max-width: 840px !important;
  max-height: calc(100vh - 44px) !important;
  overflow-y: auto !important;
  padding: 28px 30px 0 !important;
  border-radius: 28px !important;
  text-align: left !important;
  color: #f8f5ff !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(251, 146, 60, .28), transparent 34%),
    linear-gradient(145deg, rgba(18, 14, 33, .98), rgba(37, 18, 67, .98) 56%, rgba(51, 20, 83, .98)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08) !important;
  box-sizing: border-box !important;
}
.mobile-profile-header { text-align: center !important; padding: 10px 52px 0 !important; }
.mobile-profile-modal-kicker {
  margin: 0 0 6px !important;
  color: #d8b4fe !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  font-weight: 750 !important;
  text-transform: none !important;
}
.mobile-profile-modal-title {
  margin: 0 0 12px !important;
  color: #fff !important;
  font-size: clamp(28px, 4vw, 38px) !important;
  line-height: 1.04 !important;
  font-weight: 950 !important;
  letter-spacing: -.045em !important;
  text-transform: none !important;
}
.mobile-profile-modal-subtitle {
  margin: 0 auto 26px !important;
  max-width: 620px !important;
  color: rgba(248,245,255,.72) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}
.mobile-profile-modal-close {
  top: 18px !important;
  right: 18px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
}
.mobile-profile-modal-close svg,
.mobile-profile-modal-panel svg { width: 19px !important; height: 19px !important; stroke-width: 2.25 !important; }
.mobile-profile-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 0 !important;
  margin: 0 42px 22px !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
.mobile-profile-tab {
  min-height: 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: rgba(248,245,255,.68) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  position: relative !important;
}
.mobile-profile-tab.is-active { color: #c084fc !important; }
.mobile-profile-tab.is-active::after {
  content: '' !important;
  position: absolute !important;
  left: 18% !important;
  right: 18% !important;
  bottom: -1px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #f97316, #c2410c) !important;
}
.mobile-profile-section { margin: 0 0 18px !important; }
.mobile-profile-photo-section { text-align: center !important; }
.mobile-profile-modal-image-wrap {
  position: relative !important;
  width: 164px !important;
  height: 164px !important;
  margin: 0 auto 14px !important;
  border-radius: 999px !important;
  overflow: visible !important;
  background: rgba(255,255,255,.08) !important;
  border: 7px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.30), 0 0 0 1px rgba(216,180,254,.14) !important;
}
.mobile-profile-modal-image,
.mobile-profile-modal-initials {
  width: 100% !important;
  height: 100% !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  overflow: hidden !important;
}
.mobile-profile-modal-initials {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 52px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #ea580c, #7c2d12) !important;
}
.mobile-profile-modal-image.hidden,
.mobile-profile-modal-initials.hidden { display: none !important; }
.mobile-profile-photo-fab {
  position: absolute !important;
  right: -6px !important;
  bottom: 12px !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: linear-gradient(135deg, #f97316, #c2410c) !important;
  border: 4px solid rgba(20,14,33,.96) !important;
  box-shadow: 0 16px 30px rgba(88,28,135,.38) !important;
  cursor: pointer !important;
}
.mobile-profile-photo-copy strong {
  display: block !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  letter-spacing: -.03em !important;
}
.mobile-profile-photo-copy span {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(248,245,255,.64) !important;
  font-size: 14px !important;
}
.mobile-profile-photo-actions {
  justify-content: center !important;
  gap: 12px !important;
  margin: 22px 0 24px !important;
}
.mobile-profile-upload-trigger,
.mobile-profile-save-btn,
.mobile-profile-secondary-btn {
  min-height: 54px !important;
  border-radius: 15px !important;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease !important;
}
.mobile-profile-upload-trigger,
.mobile-profile-save-btn {
  color: #fff !important;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 55%, #9a3412 100%) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 16px 36px rgba(88,28,135,.38) !important;
}
.mobile-profile-secondary-btn {
  color: #f8f5ff !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}
.mobile-profile-upload-trigger:hover,
.mobile-profile-save-btn:hover,
.mobile-profile-secondary-btn:hover,
.mobile-profile-photo-fab:hover { transform: translateY(-1px) !important; }
.mobile-profile-fields-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; }
.mobile-profile-fields-grid.two-cols { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.mobile-profile-field { display: block !important; }
.mobile-profile-field span {
  display: block !important;
  margin: 0 0 8px !important;
  color: rgba(248,245,255,.90) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}
.mobile-profile-field small {
  display: block !important;
  margin: 8px 0 0 !important;
  color: rgba(248,245,255,.54) !important;
  font-size: 13px !important;
}
.mobile-profile-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
.mobile-profile-input-wrap > svg {
  position: absolute !important;
  left: 16px !important;
  color: rgba(248,245,255,.64) !important;
  pointer-events: none !important;
}
.mobile-profile-field input {
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 16px 0 48px !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.mobile-profile-field input::placeholder { color: rgba(248,245,255,.40) !important; }
.mobile-profile-field input:focus {
  border-color: rgba(192,132,252,.72) !important;
  box-shadow: 0 0 0 4px rgba(168,85,247,.16), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.mobile-profile-password-box {
  margin: 22px 0 18px !important;
  padding: 20px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.mobile-profile-password-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}
.mobile-profile-password-head strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}
.mobile-profile-password-head small { color: rgba(248,245,255,.56) !important; font-size: 13px !important; }
.mobile-profile-status { margin: 0 0 18px !important; }
.mobile-profile-footer-actions {
  position: sticky !important;
  bottom: 0 !important;
  display: grid !important;
  grid-template-columns: .88fr 1.12fr !important;
  gap: 16px !important;
  margin: 20px -30px 0 !important;
  padding: 22px 30px 28px !important;
  background: linear-gradient(180deg, rgba(25,14,46,0), rgba(25,14,46,.98) 22%) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
.mobile-profile-save-btn { width: 100% !important; }
.mobile-profile-cancel-btn { width: 100% !important; }
.mobile-profile-save-btn:disabled { opacity: .70 !important; cursor: wait !important; transform: none !important; }

.app-light-theme .mobile-profile-modal-backdrop,
body:not(.app-dark-theme) .mobile-profile-modal-backdrop {
  background: rgba(19, 15, 36, .54) !important;
}
.app-light-theme .mobile-profile-modal-panel,
body:not(.app-dark-theme) .mobile-profile-modal-panel {
  color: #151126 !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(253,186,116,.18), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #fffaf5 56%, #f4f0ff 100%) !important;
  border-color: rgba(109,40,217,.16) !important;
  box-shadow: 0 34px 110px rgba(49,24,101,.22), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.app-light-theme .mobile-profile-modal-kicker,
body:not(.app-dark-theme) .mobile-profile-modal-kicker { color: #5f5870 !important; }
.app-light-theme .mobile-profile-modal-title,
body:not(.app-dark-theme) .mobile-profile-modal-title,
.app-light-theme .mobile-profile-photo-copy strong,
body:not(.app-dark-theme) .mobile-profile-photo-copy strong,
.app-light-theme .mobile-profile-field span,
body:not(.app-dark-theme) .mobile-profile-field span,
.app-light-theme .mobile-profile-password-head strong,
body:not(.app-dark-theme) .mobile-profile-password-head strong { color: #171326 !important; }
.app-light-theme .mobile-profile-modal-subtitle,
body:not(.app-dark-theme) .mobile-profile-modal-subtitle,
.app-light-theme .mobile-profile-photo-copy span,
body:not(.app-dark-theme) .mobile-profile-photo-copy span,
.app-light-theme .mobile-profile-field small,
body:not(.app-dark-theme) .mobile-profile-field small,
.app-light-theme .mobile-profile-password-head small,
body:not(.app-dark-theme) .mobile-profile-password-head small { color: #635d72 !important; }
.app-light-theme .mobile-profile-modal-close,
body:not(.app-dark-theme) .mobile-profile-modal-close {
  color: #171326 !important;
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(23,19,38,.10) !important;
  box-shadow: 0 12px 26px rgba(49,24,101,.14) !important;
}
.app-light-theme .mobile-profile-tabs,
body:not(.app-dark-theme) .mobile-profile-tabs { border-bottom-color: rgba(23,19,38,.12) !important; }
.app-light-theme .mobile-profile-tab,
body:not(.app-dark-theme) .mobile-profile-tab { color: #4b465d !important; }
.app-light-theme .mobile-profile-tab.is-active,
body:not(.app-dark-theme) .mobile-profile-tab.is-active { color: #c2410c !important; }
.app-light-theme .mobile-profile-modal-image-wrap,
body:not(.app-dark-theme) .mobile-profile-modal-image-wrap {
  background: #fff !important;
  border-color: rgba(234,88,12,.10) !important;
  box-shadow: 0 22px 54px rgba(109,40,217,.16), 0 0 0 1px rgba(234,88,12,.14) !important;
}
.app-light-theme .mobile-profile-photo-fab,
body:not(.app-dark-theme) .mobile-profile-photo-fab { border-color: #fff !important; }
.app-light-theme .mobile-profile-secondary-btn,
body:not(.app-dark-theme) .mobile-profile-secondary-btn {
  color: #171326 !important;
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(23,19,38,.13) !important;
  box-shadow: 0 12px 26px rgba(49,24,101,.10) !important;
}
.app-light-theme .mobile-profile-password-box,
body:not(.app-dark-theme) .mobile-profile-password-box {
  background: rgba(234,88,12,.045) !important;
  border-color: rgba(234,88,12,.12) !important;
}
.app-light-theme .mobile-profile-field input,
body:not(.app-dark-theme) .mobile-profile-field input {
  color: #171326 !important;
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(23,19,38,.14) !important;
  box-shadow: 0 10px 24px rgba(49,24,101,.06) !important;
}
.app-light-theme .mobile-profile-field input::placeholder,
body:not(.app-dark-theme) .mobile-profile-field input::placeholder { color: #8c849d !important; }
.app-light-theme .mobile-profile-input-wrap > svg,
body:not(.app-dark-theme) .mobile-profile-input-wrap > svg { color: #5f5870 !important; }
.app-light-theme .mobile-profile-footer-actions,
body:not(.app-dark-theme) .mobile-profile-footer-actions {
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.98) 22%) !important;
  border-top-color: rgba(23,19,38,.10) !important;
}

@media (max-width: 720px) {
  .mobile-profile-modal:not(.hidden) { padding: 14px !important; align-items: center !important; }
  .mobile-profile-modal-panel {
    width: min(100%, 430px) !important;
    max-height: calc(100vh - 28px) !important;
    padding: 22px 18px 0 !important;
    border-radius: 26px !important;
  }
  .mobile-profile-header { padding: 8px 46px 0 !important; }
  .mobile-profile-modal-title { font-size: 28px !important; }
  .mobile-profile-modal-subtitle { font-size: 14px !important; margin-bottom: 18px !important; }
  .mobile-profile-tabs { margin: 0 0 18px !important; overflow-x: auto !important; grid-template-columns: repeat(3, max-content) !important; justify-content: start !important; }
  .mobile-profile-tab { min-width: 132px !important; min-height: 50px !important; font-size: 13px !important; }
  .mobile-profile-modal-image-wrap { width: 136px !important; height: 136px !important; }
  .mobile-profile-photo-actions { flex-direction: column !important; align-items: stretch !important; }
  .mobile-profile-upload-trigger,
  .mobile-profile-photo-actions .mobile-profile-secondary-btn { width: 100% !important; }
  .mobile-profile-fields-grid.two-cols { grid-template-columns: 1fr !important; }
  .mobile-profile-password-head { align-items: flex-start !important; flex-direction: column !important; }
  .mobile-profile-footer-actions {
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding: 18px !important;
    grid-template-columns: 1fr !important;
  }
  .mobile-profile-cancel-btn { order: 2 !important; }
  .mobile-profile-save-btn { order: 1 !important; }
}

/* =========================================================
   Ajuste fino - Minha Conta no tema ccorridao
   Melhor espaçamento do card, hierarquia visual e contraste.
   ========================================================= */
.app-light-theme .mobile-profile-modal-panel,
body:not(.app-dark-theme) .mobile-profile-modal-panel {
  width: min(860px, calc(100vw - 48px)) !important;
  padding: 32px 36px 0 !important;
  background: linear-gradient(145deg, #ffffff 0%, #fcfbff 58%, #f7f4ff 100%) !important;
  color: #111827 !important;
  border: 1px solid rgba(79, 70, 229, .18) !important;
  box-shadow: 0 38px 120px rgba(17, 24, 39, .20), 0 10px 32px rgba(109, 40, 217, .12) !important;
}

.app-light-theme .mobile-profile-header,
body:not(.app-dark-theme) .mobile-profile-header {
  padding: 12px 58px 0 !important;
}

.app-light-theme .mobile-profile-modal-kicker,
body:not(.app-dark-theme) .mobile-profile-modal-kicker {
  color: #9a3412 !important;
  font-weight: 850 !important;
}

.app-light-theme .mobile-profile-modal-title,
body:not(.app-dark-theme) .mobile-profile-modal-title {
  color: #0f172a !important;
  text-shadow: none !important;
}

.app-light-theme .mobile-profile-modal-subtitle,
body:not(.app-dark-theme) .mobile-profile-modal-subtitle {
  color: #475569 !important;
  margin-bottom: 28px !important;
}

.app-light-theme .mobile-profile-tabs,
body:not(.app-dark-theme) .mobile-profile-tabs {
  margin: 0 6px 28px !important;
  border-bottom: 1px solid #dbe2ee !important;
}

.app-light-theme .mobile-profile-tab,
body:not(.app-dark-theme) .mobile-profile-tab {
  min-height: 62px !important;
  color: #334155 !important;
  border-radius: 14px 14px 0 0 !important;
}

.app-light-theme .mobile-profile-tab svg,
body:not(.app-dark-theme) .mobile-profile-tab svg {
  color: #475569 !important;
}

.app-light-theme .mobile-profile-tab.is-active,
body:not(.app-dark-theme) .mobile-profile-tab.is-active {
  color: #c2410c !important;
  background: rgba(234, 88, 12, .06) !important;
  box-shadow: inset 0 0 0 1px rgba(234, 88, 12, .08) !important;
}

.app-light-theme .mobile-profile-tab.is-active svg,
body:not(.app-dark-theme) .mobile-profile-tab.is-active svg {
  color: #c2410c !important;
}

.app-light-theme .mobile-profile-photo-section,
body:not(.app-dark-theme) .mobile-profile-photo-section {
  margin-bottom: 26px !important;
}

.app-light-theme .mobile-profile-photo-copy strong,
body:not(.app-dark-theme) .mobile-profile-photo-copy strong {
  color: #0f172a !important;
}

.app-light-theme .mobile-profile-photo-copy span,
body:not(.app-dark-theme) .mobile-profile-photo-copy span {
  color: #64748b !important;
}

.app-light-theme .mobile-profile-photo-actions,
body:not(.app-dark-theme) .mobile-profile-photo-actions {
  margin: 22px 0 30px !important;
}

.app-light-theme #mobile-profile-data-section,
body:not(.app-dark-theme) #mobile-profile-data-section {
  padding-top: 26px !important;
  border-top: 1px solid #e2e8f0 !important;
}

.app-light-theme .mobile-profile-fields-grid,
body:not(.app-dark-theme) .mobile-profile-fields-grid {
  gap: 20px 24px !important;
}

.app-light-theme .mobile-profile-field,
body:not(.app-dark-theme) .mobile-profile-field {
  margin: 0 !important;
  min-width: 0 !important;
}

.app-light-theme .mobile-profile-field span,
body:not(.app-dark-theme) .mobile-profile-field span {
  display: block !important;
  margin: 0 0 10px !important;
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.app-light-theme .mobile-profile-field small,
body:not(.app-dark-theme) .mobile-profile-field small {
  color: #64748b !important;
  margin-top: 10px !important;
  line-height: 1.45 !important;
}

.app-light-theme .mobile-profile-input-wrap,
body:not(.app-dark-theme) .mobile-profile-input-wrap {
  width: 100% !important;
}

.app-light-theme .mobile-profile-field input,
body:not(.app-dark-theme) .mobile-profile-field input {
  min-height: 60px !important;
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
  font-weight: 700 !important;
}

.app-light-theme .mobile-profile-field input:focus,
body:not(.app-dark-theme) .mobile-profile-field input:focus {
  border-color: #ea580c !important;
  box-shadow: 0 0 0 4px rgba(234, 88, 12, .14), 0 10px 22px rgba(15, 23, 42, .08) !important;
}

.app-light-theme .mobile-profile-input-wrap > svg,
body:not(.app-dark-theme) .mobile-profile-input-wrap > svg {
  color: #334155 !important;
}

.app-light-theme .mobile-profile-password-box,
body:not(.app-dark-theme) .mobile-profile-password-box {
  margin-top: 26px !important;
  padding: 22px !important;
  background: #f8fafc !important;
  border: 1px solid #dbe2ee !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.app-light-theme .mobile-profile-password-head strong,
body:not(.app-dark-theme) .mobile-profile-password-head strong {
  color: #0f172a !important;
}

.app-light-theme .mobile-profile-password-head small,
body:not(.app-dark-theme) .mobile-profile-password-head small {
  color: #64748b !important;
}

.app-light-theme .mobile-profile-upload-trigger,
body:not(.app-dark-theme) .mobile-profile-upload-trigger,
.app-light-theme .mobile-profile-save-btn,
body:not(.app-dark-theme) .mobile-profile-save-btn {
  color: #ffffff !important;
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 52%, #9a3412 100%) !important;
  border: 1px solid rgba(91, 33, 182, .24) !important;
  box-shadow: 0 14px 30px rgba(109, 40, 217, .28) !important;
}

.app-light-theme .mobile-profile-secondary-btn,
body:not(.app-dark-theme) .mobile-profile-secondary-btn {
  color: #111827 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08) !important;
}

.app-light-theme .mobile-profile-secondary-btn svg,
body:not(.app-dark-theme) .mobile-profile-secondary-btn svg {
  color: #334155 !important;
}

.app-light-theme .mobile-profile-footer-actions,
body:not(.app-dark-theme) .mobile-profile-footer-actions {
  margin: 26px -36px 0 !important;
  padding: 24px 36px 30px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0), #ffffff 24%) !important;
  border-top: 1px solid #e2e8f0 !important;
}

@media (max-width: 720px) {
  .app-light-theme .mobile-profile-modal-panel,
  body:not(.app-dark-theme) .mobile-profile-modal-panel {
    width: min(100%, 440px) !important;
    padding: 24px 20px 0 !important;
  }
  .app-light-theme .mobile-profile-header,
  body:not(.app-dark-theme) .mobile-profile-header {
    padding: 8px 48px 0 !important;
  }
  .app-light-theme .mobile-profile-tabs,
  body:not(.app-dark-theme) .mobile-profile-tabs {
    margin: 0 0 22px !important;
  }
  .app-light-theme #mobile-profile-data-section,
  body:not(.app-dark-theme) #mobile-profile-data-section {
    padding-top: 22px !important;
  }
  .app-light-theme .mobile-profile-footer-actions,
  body:not(.app-dark-theme) .mobile-profile-footer-actions {
    margin: 24px -20px 0 !important;
    padding: 18px 20px 22px !important;
  }
}

/* UX definitivo do modal Minha Conta: exibe somente o modal, bloqueia o fundo e aumenta o desfoque. */
html.mobile-profile-modal-open,
body.mobile-profile-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.mobile-profile-modal-open {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  min-width: 100% !important;
  touch-action: none !important;
}

html.mobile-profile-modal-open .app-container,
html.mobile-profile-modal-open .app-shell,
html.mobile-profile-modal-open main,
html.mobile-profile-modal-open aside,
html.mobile-profile-modal-open header,
html.mobile-profile-modal-open .main-content,
html.mobile-profile-modal-open .dashboard-layout,
html.mobile-profile-modal-open .community-layout,
html.mobile-profile-modal-open .right-sidebar,
html.mobile-profile-modal-open .sidebar {
  filter: blur(10px) saturate(.65) brightness(.46) !important;
  transform: scale(.992) !important;
  pointer-events: none !important;
  user-select: none !important;
}

.mobile-profile-modal:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(14px, 2.2vw, 28px) !important;
  isolation: isolate !important;
}

.mobile-profile-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(234,88,12,.22), transparent 34%),
    rgba(6, 4, 16, .90) !important;
  backdrop-filter: blur(26px) saturate(.78) brightness(.52) !important;
  -webkit-backdrop-filter: blur(26px) saturate(.78) brightness(.52) !important;
}

.mobile-profile-modal-panel {
  z-index: 1 !important;
  width: min(760px, calc(100vw - 32px)) !important;
  max-height: min(880px, calc(100dvh - 32px)) !important;
  margin: 0 auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(168,85,247,.85) rgba(255,255,255,.08) !important;
}

.mobile-profile-modal-panel::-webkit-scrollbar { width: 9px !important; }
.mobile-profile-modal-panel::-webkit-scrollbar-track { background: rgba(255,255,255,.08) !important; border-radius: 999px !important; }
.mobile-profile-modal-panel::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#f97316,#ea580c) !important; border-radius: 999px !important; }

.mobile-profile-header { padding-top: 4px !important; }
.mobile-profile-modal-title { font-size: clamp(30px, 3.2vw, 40px) !important; }
.mobile-profile-modal-subtitle { margin-bottom: 22px !important; }
.mobile-profile-tabs { margin-inline: 24px !important; }
.mobile-profile-modal-image-wrap { width: 152px !important; height: 152px !important; }
.mobile-profile-photo-actions { margin-bottom: 18px !important; }
.mobile-profile-field input { font-size: 16px !important; }

@media (max-height: 760px) and (min-width: 721px) {
  .mobile-profile-modal-panel { width: min(720px, calc(100vw - 32px)) !important; padding-top: 20px !important; }
  .mobile-profile-modal-image-wrap { width: 126px !important; height: 126px !important; }
  .mobile-profile-modal-title { font-size: 30px !important; }
  .mobile-profile-modal-subtitle { margin-bottom: 14px !important; }
  .mobile-profile-tabs { margin-bottom: 14px !important; }
  .mobile-profile-photo-actions { margin: 14px 0 16px !important; }
}

@media (max-width: 720px) {
  .mobile-profile-modal:not(.hidden) { padding: 10px !important; }
  .mobile-profile-modal-panel { width: min(100%, 460px) !important; max-height: calc(100dvh - 20px) !important; }
}

/* =========================================================
   UX refinado do modal Editar Perfil: fundo totalmente travado/desfocado
   e navegação simplificada por abas reais.
   ========================================================= */
html.mobile-profile-modal-open,
body.mobile-profile-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}
body.mobile-profile-modal-open > *:not(.mobile-profile-modal) {
  filter: blur(14px) brightness(.48) saturate(.72) !important;
  transform: translateZ(0) !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: filter .22s ease !important;
}
body.mobile-profile-modal-open #app-shell-header,
body.mobile-profile-modal-open #app-shell-nav,
body.mobile-profile-modal-open #app-shell-ads,
body.mobile-profile-modal-open .view-content,
body.mobile-profile-modal-open main {
  filter: blur(16px) brightness(.44) saturate(.7) !important;
  pointer-events: none !important;
}
.mobile-profile-modal:not(.hidden) {
  isolation: isolate !important;
}
.mobile-profile-modal-backdrop {
  z-index: 0 !important;
  background: rgba(7, 4, 18, .78) !important;
  backdrop-filter: blur(22px) brightness(.62) saturate(.72) !important;
  -webkit-backdrop-filter: blur(22px) brightness(.62) saturate(.72) !important;
}
.mobile-profile-modal-panel {
  z-index: 2 !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(168,85,247,.65) transparent !important;
}
.mobile-profile-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 18px 0 22px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.mobile-profile-tab {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  background: transparent !important;
  color: rgba(255,255,255,.64) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.mobile-profile-tab svg,
.mobile-profile-tab i {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 auto !important;
}
.mobile-profile-tab:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}
.mobile-profile-tab.is-active {
  color: #fff !important;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 60%, #9a3412 100%) !important;
  box-shadow: 0 12px 28px rgba(234,88,12,.34) !important;
  transform: translateY(-1px) !important;
}
.mobile-profile-section,
.mobile-profile-password-box.mobile-profile-section {
  display: none !important;
}
.mobile-profile-section.is-active,
.mobile-profile-password-box.mobile-profile-section.is-active {
  display: block !important;
  animation: mobileProfilePanelIn .22s ease both !important;
}
@keyframes mobileProfilePanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.mobile-profile-photo-section.is-active {
  text-align: center !important;
}
.mobile-profile-footer-actions {
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
.app-light-theme.mobile-profile-modal-open body,
body:not(.app-dark-theme).mobile-profile-modal-open {
  background: #f8f5ff !important;
}
.app-light-theme .mobile-profile-modal-backdrop,
body:not(.app-dark-theme) .mobile-profile-modal-backdrop {
  background: rgba(31, 21, 54, .36) !important;
  backdrop-filter: blur(24px) brightness(.92) saturate(.84) !important;
  -webkit-backdrop-filter: blur(24px) brightness(.92) saturate(.84) !important;
}
body:not(.app-dark-theme).mobile-profile-modal-open > *:not(.mobile-profile-modal) {
  filter: blur(16px) brightness(.76) saturate(.7) !important;
}
.app-light-theme .mobile-profile-tabs,
body:not(.app-dark-theme) .mobile-profile-tabs {
  background: rgba(234,88,12,.07) !important;
  border-color: rgba(234,88,12,.12) !important;
}
.app-light-theme .mobile-profile-tab,
body:not(.app-dark-theme) .mobile-profile-tab {
  color: #5f5475 !important;
}
.app-light-theme .mobile-profile-tab:hover,
body:not(.app-dark-theme) .mobile-profile-tab:hover {
  color: #9a3412 !important;
  background: rgba(234,88,12,.08) !important;
}
.app-light-theme .mobile-profile-tab.is-active,
body:not(.app-dark-theme) .mobile-profile-tab.is-active {
  color: #fff !important;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 58%, #c2410c 100%) !important;
  box-shadow: 0 14px 30px rgba(234,88,12,.24) !important;
}
.app-light-theme .mobile-profile-footer-actions,
body:not(.app-dark-theme) .mobile-profile-footer-actions {
  border-top-color: rgba(234,88,12,.12) !important;
}
@media (max-width: 560px) {
  .mobile-profile-tabs {
    gap: 5px !important;
    padding: 5px !important;
  }
  .mobile-profile-tab {
    min-height: 40px !important;
    gap: 5px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
  .mobile-profile-tab svg,
  .mobile-profile-tab i {
    width: 15px !important;
    height: 15px !important;
  }
}

/* Correção v3: modal de perfil fora da área desfocada + navegação mais simples/dinâmica. */
html.mobile-profile-modal-open body > :not(#mobile-profile-modal) {
  filter: blur(13px) saturate(.62) brightness(.42) !important;
  transform: scale(.992) !important;
  pointer-events: none !important;
  user-select: none !important;
}

html.mobile-profile-modal-open #mobile-profile-modal,
body.mobile-profile-modal-open #mobile-profile-modal {
  filter: none !important;
  transform: none !important;
  pointer-events: auto !important;
  user-select: auto !important;
}

.mobile-profile-modal:not(.hidden) {
  background: rgba(7, 4, 18, .18) !important;
}

.mobile-profile-modal-backdrop {
  background:
    radial-gradient(circle at 50% 12%, rgba(147, 51, 234, .28), transparent 34%),
    rgba(8, 5, 20, .78) !important;
  backdrop-filter: blur(28px) saturate(.72) brightness(.50) !important;
  -webkit-backdrop-filter: blur(28px) saturate(.72) brightness(.50) !important;
}

.mobile-profile-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 12px 0 24px !important;
  padding: 6px !important;
  border: 1px solid rgba(196, 181, 253, .24) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.mobile-profile-tab {
  min-height: 46px !important;
  padding: 0 12px !important;
  border-radius: 15px !important;
  border: 1px solid transparent !important;
  justify-content: center !important;
  gap: 8px !important;
  color: rgba(237, 233, 254, .72) !important;
  background: transparent !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.mobile-profile-tab::after { display: none !important; }

.mobile-profile-tab:hover {
  color: #ffffff !important;
  background: rgba(168,85,247,.14) !important;
  border-color: rgba(254,215,170,.18) !important;
}

.mobile-profile-tab.is-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #f97316, #c2410c) !important;
  border-color: rgba(216,180,254,.60) !important;
  box-shadow: 0 12px 28px rgba(109,40,217,.32) !important;
  transform: translateY(-1px) !important;
}

.mobile-profile-tab i,
.mobile-profile-tab svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
}

.mobile-profile-section {
  animation: mobileProfilePanelIn .18s ease both !important;
}

@keyframes mobileProfilePanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-light-theme .mobile-profile-tabs,
body:not(.app-dark-theme) .mobile-profile-tabs {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 10px 24px rgba(194,65,12,.06) !important;
}

.app-light-theme .mobile-profile-tab,
body:not(.app-dark-theme) .mobile-profile-tab {
  color: #5b5470 !important;
}

.app-light-theme .mobile-profile-tab:hover,
body:not(.app-dark-theme) .mobile-profile-tab:hover {
  color: #9a3412 !important;
  background: #ffffff !important;
  border-color: #fed7aa !important;
}

.app-light-theme .mobile-profile-tab.is-active,
body:not(.app-dark-theme) .mobile-profile-tab.is-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #f97316, #c2410c) !important;
  border-color: #fdba74 !important;
  box-shadow: 0 14px 30px rgba(109,40,217,.24) !important;
}

@media (max-width: 520px) {
  .mobile-profile-tabs { gap: 6px !important; padding: 5px !important; border-radius: 17px !important; }
  .mobile-profile-tab { min-height: 42px !important; padding: 0 8px !important; border-radius: 13px !important; font-size: 13px !important; }
  .mobile-profile-tab i,
  .mobile-profile-tab svg { width: 16px !important; height: 16px !important; }
}

/* =========================================================
   Perfil: salvar dados/foto + ajuste manual de imagem
   ========================================================= */
.mobile-profile-crop-editor {
  margin: 18px auto 0 !important;
  padding: 16px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(196, 181, 253, 0.20) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  text-align: left !important;
}
.mobile-profile-crop-editor.hidden { display: none !important; }
.mobile-profile-crop-head strong {
  display: block !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
.mobile-profile-crop-head small {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(237, 233, 254, 0.76) !important;
  line-height: 1.35 !important;
}
.mobile-profile-crop-frame {
  width: 164px !important;
  height: 164px !important;
  margin: 14px auto !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.24) !important;
  box-shadow: 0 0 0 4px rgba(168,85,247,.16), 0 16px 40px rgba(0,0,0,.26) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mobile-profile-crop-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform-origin: center center !important;
  transition: transform .12s ease !important;
  user-select: none !important;
  pointer-events: none !important;
}
.mobile-profile-crop-controls {
  display: grid !important;
  gap: 10px !important;
}
.mobile-profile-crop-controls label {
  display: grid !important;
  gap: 6px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.mobile-profile-crop-controls input[type="range"] {
  width: 100% !important;
  accent-color: #f97316 !important;
}
.mobile-profile-crop-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
.mobile-profile-save-btn.compact,
.mobile-profile-secondary-btn.compact {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
}
.mobile-profile-status {
  margin: 14px 0 0 !important;
  padding: 11px 13px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}
.mobile-profile-status.is-success {
  color: #ecfdf5 !important;
  background: rgba(16, 185, 129, .18) !important;
  border: 1px solid rgba(52, 211, 153, .28) !important;
}
.mobile-profile-status.is-error {
  color: #fff1f2 !important;
  background: rgba(244, 63, 94, .20) !important;
  border: 1px solid rgba(251, 113, 133, .32) !important;
}
body:not(.app-dark-theme) .mobile-profile-crop-editor,
.app-light-theme .mobile-profile-crop-editor {
  background: #ffffff !important;
  border-color: #fed7aa !important;
  box-shadow: 0 18px 44px rgba(88, 28, 135, .10) !important;
}
body:not(.app-dark-theme) .mobile-profile-crop-head strong,
.app-light-theme .mobile-profile-crop-head strong,
body:not(.app-dark-theme) .mobile-profile-crop-controls label,
.app-light-theme .mobile-profile-crop-controls label {
  color: #1f1633 !important;
}
body:not(.app-dark-theme) .mobile-profile-crop-head small,
.app-light-theme .mobile-profile-crop-head small {
  color: #665a78 !important;
}
body:not(.app-dark-theme) .mobile-profile-crop-frame,
.app-light-theme .mobile-profile-crop-frame {
  background: #f7f2ff !important;
  box-shadow: 0 0 0 4px rgba(168,85,247,.12), 0 18px 44px rgba(88, 28, 135, .12) !important;
}
body:not(.app-dark-theme) .mobile-profile-status.is-success,
.app-light-theme .mobile-profile-status.is-success {
  color: #065f46 !important;
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}
body:not(.app-dark-theme) .mobile-profile-status.is-error,
.app-light-theme .mobile-profile-status.is-error {
  color: #9f1239 !important;
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
}
@media (max-width: 520px) {
  .mobile-profile-crop-actions { grid-template-columns: 1fr !important; }
  .mobile-profile-crop-frame { width: 148px !important; height: 148px !important; }
}

/* =========================================================
   UX do ajuste manual da foto de perfil
   - ao escolher uma imagem, exibe somente o editor de recorte;
   - fundo permanece travado/desfocado;
   - imagem pode ser reposicionada com mouse ou toque;
   - evita corte inicial agressivo usando imagem inteira como base.
   ========================================================= */
.mobile-profile-modal.is-cropping-photo:not(.hidden) {
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.mobile-profile-modal-panel.is-cropping-photo {
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: 560px !important;
  max-height: calc(100vh - 32px) !important;
  overflow: hidden !important;
  padding: 24px !important;
}
.mobile-profile-modal-panel.is-cropping-photo .mobile-profile-header,
.mobile-profile-modal-panel.is-cropping-photo .mobile-profile-tabs,
.mobile-profile-modal-panel.is-cropping-photo .mobile-profile-photo-section > .mobile-profile-modal-image-wrap,
.mobile-profile-modal-panel.is-cropping-photo .mobile-profile-photo-copy,
.mobile-profile-modal-panel.is-cropping-photo .mobile-profile-photo-actions,
.mobile-profile-modal-panel.is-cropping-photo [data-profile-panel]:not([data-profile-panel="photo"]),
.mobile-profile-modal-panel.is-cropping-photo .mobile-profile-footer-actions,
.mobile-profile-modal-panel.is-cropping-photo #mobile-profile-status {
  display: none !important;
}
.mobile-profile-modal-panel.is-cropping-photo .mobile-profile-photo-section {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mobile-profile-modal-panel.is-cropping-photo .mobile-profile-crop-editor {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mobile-profile-crop-head {
  text-align: center !important;
  margin: 8px 48px 0 !important;
}
.mobile-profile-crop-head strong {
  display: block !important;
  color: #ffffff !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}
.mobile-profile-crop-head small {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(255,255,255,0.76) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.mobile-profile-crop-frame {
  position: relative !important;
  width: min(330px, calc(100vw - 88px)) !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 6px solid rgba(251, 146, 60, 0.38) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.5) !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
}
.mobile-profile-crop-frame::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), inset 0 0 0 999px rgba(255,255,255,0.00) !important;
}
.mobile-profile-crop-frame img {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform-origin: center center !important;
  will-change: transform !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
.mobile-profile-crop-frame:active,
.mobile-profile-crop-frame img.is-dragging {
  cursor: grabbing !important;
}
.mobile-profile-crop-controls {
  display: grid !important;
  gap: 12px !important;
  width: min(420px, 100%) !important;
  margin: 0 auto !important;
}
.mobile-profile-crop-controls label {
  display: grid !important;
  gap: 8px !important;
  color: rgba(255,255,255,0.86) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: left !important;
}
.mobile-profile-crop-controls input[type="range"] {
  width: 100% !important;
  accent-color: #f97316 !important;
}
.mobile-profile-crop-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: min(420px, 100%) !important;
  margin: 0 auto !important;
}
.mobile-profile-crop-actions .compact {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 16px !important;
}
@media (max-width: 520px) {
  .mobile-profile-modal-panel.is-cropping-photo {
    width: calc(100vw - 22px) !important;
    max-height: calc(100vh - 22px) !important;
    padding: 18px !important;
    border-radius: 24px !important;
  }
  .mobile-profile-crop-head {
    margin: 8px 42px 0 !important;
  }
  .mobile-profile-crop-frame {
    width: min(280px, calc(100vw - 68px)) !important;
    border-width: 5px !important;
  }
  .mobile-profile-crop-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Ajuste final: feedback de salvamento do perfil */
.mobile-profile-save-btn.is-saving {
  pointer-events: none !important;
  opacity: .92 !important;
  box-shadow: 0 18px 42px rgba(234, 88, 12, .34) !important;
}
.mobile-profile-save-spinner {
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,.42) !important;
  border-top-color: #fff !important;
  display: inline-block !important;
  animation: mobileProfileSavingSpin .75s linear infinite !important;
}
@keyframes mobileProfileSavingSpin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   Correção UX: enquadramento manual de foto + console limpo
   ========================================================= */
.mobile-profile-modal-panel.is-cropping-photo {
  width: min(620px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-y: auto !important;
}
.mobile-profile-modal-panel.is-cropping-photo .mobile-profile-crop-editor {
  min-height: 0 !important;
}
.mobile-profile-crop-frame {
  width: min(360px, calc(100vw - 92px)) !important;
  max-width: 360px !important;
  cursor: grab !important;
  background:
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    rgba(255,255,255,.08) !important;
  background-size: 18px 18px !important;
  background-position: 0 0, 0 9px !important;
}
.mobile-profile-crop-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 15% !important;
  z-index: 2 !important;
  border-radius: 999px !important;
  border: 1px dashed rgba(255,255,255,.50) !important;
  pointer-events: none !important;
}
.mobile-profile-crop-frame img {
  z-index: 1 !important;
  transform-origin: center center !important;
}
.mobile-profile-crop-hint {
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  z-index: 3 !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: rgba(15, 10, 32, .70) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}
.mobile-profile-crop-hint svg { width: 15px !important; height: 15px !important; }
.mobile-profile-crop-frame:active .mobile-profile-crop-hint,
.mobile-profile-crop-frame:focus-within .mobile-profile-crop-hint {
  opacity: .22 !important;
}
.mobile-profile-crop-controls input#mobile-profile-crop-x,
.mobile-profile-crop-controls input#mobile-profile-crop-y {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.mobile-profile-crop-actions {
  grid-template-columns: .95fr 1.15fr .9fr !important;
}
.mobile-profile-crop-actions .mobile-profile-secondary-btn.compact,
.mobile-profile-crop-actions .mobile-profile-save-btn.compact {
  white-space: nowrap !important;
}
.mobile-profile-modal-panel.is-cropping-photo .mobile-profile-modal-close {
  z-index: 5 !important;
}
body:not(.app-dark-theme) .mobile-profile-crop-frame,
.app-light-theme .mobile-profile-crop-frame {
  background:
    linear-gradient(45deg, rgba(234,88,12,.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(234,88,12,.06) 25%, transparent 25%),
    #ffffff !important;
  background-size: 18px 18px !important;
  background-position: 0 0, 0 9px !important;
  border-color: rgba(234,88,12,.28) !important;
}
body:not(.app-dark-theme) .mobile-profile-crop-frame::before,
.app-light-theme .mobile-profile-crop-frame::before {
  border-color: rgba(91,33,182,.34) !important;
}
body:not(.app-dark-theme) .mobile-profile-crop-hint,
.app-light-theme .mobile-profile-crop-hint {
  color: #7c2d12 !important;
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(234,88,12,.16) !important;
  box-shadow: 0 10px 24px rgba(194,65,12,.12) !important;
}
@media (max-width: 560px) {
  .mobile-profile-modal-panel.is-cropping-photo { width: calc(100vw - 20px) !important; padding: 18px !important; }
  .mobile-profile-crop-frame { width: min(310px, calc(100vw - 66px)) !important; }
  .mobile-profile-crop-actions { grid-template-columns: 1fr !important; }
}


/* Correção: enquadramento da foto deve ser redondo */
#mobile-profile-crop-frame,
.mobile-profile-crop-frame{
    width:260px !important;
    height:260px !important;
    border-radius:50% !important;
    overflow:hidden !important;
    margin:0 auto !important;
}
#mobile-profile-crop-image,


/* Animação do botão Entrar / autenticação */
.auth-submit-button,
#login-form button[type="submit"],
#register-form button[type="submit"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  will-change: transform, box-shadow, opacity;
}
.auth-submit-button:not(:disabled):active,
#login-form button[type="submit"]:not(:disabled):active,
#register-form button[type="submit"]:not(:disabled):active {
  transform: translateY(1px) scale(.99);
}
.auth-button-loading {
  cursor: wait !important;
  opacity: .95;
  pointer-events: none;
  box-shadow: 0 16px 34px rgba(234,88,12,.28) !important;
}
.auth-button-spinner {
  width: 17px;
  height: 17px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.42);
  border-top-color: #fff;
  animation: authButtonSpin .72s linear infinite;
  flex: 0 0 auto;
}
@keyframes authButtonSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-button-spinner { animation-duration: 1.4s; }
  .auth-submit-button,
  #login-form button[type="submit"],
  #register-form button[type="submit"] { transition: none !important; }
}