/* Final runtime layer: stable locally hosted icons and one green brand theme. */
:root,
:root[data-theme='dark'],
:root[data-theme='light'] {
  --gd-brand-primary: #00f076;
  --gd-brand-primary-hover: #00d968;
  --gd-brand-accent: #00f076;
  --nav-active: #00f076;
  --nav-inactive: #849584;
}

.gd-local-icon,
.material-symbols-outlined {
  width: 1.15em;
  height: 1.15em;
  min-width: 1.15em;
  min-height: 1.15em;
  display: inline-block;
  vertical-align: -0.18em;
  stroke-width: 1.9;
}

/* The application uses a fixed five-item control bar. It must stay readable
   and familiar in the Telegram WebView, without a competing violet skin. */
.bottom-nav,
#bottom-nav,
:root .bottom-nav,
:root[data-theme] .bottom-nav,
body .bottom-nav {
  position: fixed !important;
  z-index: 10000 !important;
  inset: auto 0 0 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 82px !important;
  margin: 0 !important;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  background: #101415 !important;
  background-image: none !important;
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.bottom-nav::before,
.bottom-nav::after {
  display: none !important;
  content: none !important;
}

.bottom-nav .nav-item,
.bottom-nav .nav-item:hover {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 5px 2px 4px !important;
  gap: 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #849584 !important;
  opacity: 1 !important;
  font-family: Inter, Manrope, Arial, sans-serif !important;
}

.bottom-nav .nav-item.active,
.bottom-nav .nav-item[aria-current='page'] {
  color: #00f076 !important;
}

.bottom-nav .nav-item::before,
.bottom-nav .nav-item.active::before,
.bottom-nav .nav-item[aria-current='page']::before {
  display: none !important;
  content: none !important;
}

.bottom-nav .nav-icon {
  width: 21px !important;
  height: 21px !important;
  color: currentColor !important;
}

.bottom-nav .nav-icon svg {
  width: 100% !important;
  height: 100% !important;
  stroke: currentColor !important;
  fill: none !important;
}

.bottom-nav .nav-item.active[data-screen='more'] .nav-icon svg,
.bottom-nav .nav-item.active[data-bottom-nav-item='more'] .nav-icon svg {
  fill: currentColor !important;
  stroke: none !important;
}

.bottom-nav .nav-label {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
}

/* The onboarding is the first product impression, so it follows the same
   green accent rather than the legacy violet mockup palette. */
#screen-onboarding,
.onboarding-screen {
  background: #0b0f10 !important;
  color: #ffffff !important;
}

.onboarding-progress-bar {
  background: #00f076 !important;
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.38) !important;
}

.welcome-icon-glow {
  background: radial-gradient(circle, rgba(0, 240, 118, 0.30) 0%, rgba(0, 240, 118, 0.10) 42%, transparent 72%) !important;
}

.welcome-icon,
.onboarding-icon {
  filter: drop-shadow(0 5px 16px rgba(0, 240, 118, 0.32)) !important;
}

.welcome-card-icon {
  background: rgba(0, 240, 118, 0.10) !important;
  border-color: rgba(0, 240, 118, 0.25) !important;
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.12) !important;
}

/* Main dashboard does not rely on the remote Tailwind CDN. These focused
   utility fallbacks keep its static markup usable in Telegram WebView. */
#screen-main > .header {
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #101415 !important;
}

#screen-main > .main-content {
  padding: 16px 16px 106px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#screen-main .flex { display: flex !important; }
#screen-main .grid { display: grid !important; }
#screen-main .flex-col { flex-direction: column !important; }
#screen-main .items-center { align-items: center !important; }
#screen-main .items-end { align-items: flex-end !important; }
#screen-main .justify-between { justify-content: space-between !important; }
#screen-main .justify-center { justify-content: center !important; }
#screen-main .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#screen-main .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#screen-main .gap-1 { gap: 4px !important; }
#screen-main .gap-2 { gap: 8px !important; }
#screen-main .gap-3 { gap: 12px !important; }
#screen-main .gap-4 { gap: 16px !important; }
#screen-main .space-y-1 > * + * { margin-top: 4px !important; }
#screen-main .space-y-3 > * + * { margin-top: 12px !important; }
#screen-main .space-y-4 > * + * { margin-top: 16px !important; }
#screen-main .space-y-6 > * + * { margin-top: 24px !important; }
#screen-main .p-3 { padding: 12px !important; }
#screen-main .p-5 { padding: 20px !important; }
#screen-main .p-6 { padding: 24px !important; }
#screen-main .px-2 { padding-left: 8px !important; padding-right: 8px !important; }
#screen-main .py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
#screen-main .relative { position: relative !important; }
#screen-main .absolute { position: absolute !important; }
#screen-main .inset-0 { inset: 0 !important; }
#screen-main .w-full { width: 100% !important; }
#screen-main .h-full { height: 100% !important; }
#screen-main .w-32 { width: 128px !important; }
#screen-main .h-32 { height: 128px !important; }
#screen-main .h-1\.5 { height: 6px !important; }
#screen-main .h-2 { height: 8px !important; }
#screen-main .rounded-full { border-radius: 999px !important; }
#screen-main .rounded-xl { border-radius: 12px !important; }
#screen-main .overflow-hidden { overflow: hidden !important; }
#screen-main .text-left { text-align: left !important; }
#screen-main .text-center { text-align: center !important; }
#screen-main .font-bold { font-weight: 700 !important; }
#screen-main .font-extrabold { font-weight: 800 !important; }
#screen-main .text-xs { font-size: 12px !important; }
#screen-main .text-sm { font-size: 14px !important; }
#screen-main .text-base { font-size: 16px !important; }
#screen-main .text-lg { font-size: 18px !important; }
#screen-main .text-3xl { font-size: 30px !important; }
#screen-main .glass-card {
  background: #151a1b !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

#screen-main .progress-ring__circle { stroke: #00f076 !important; }
#screen-main .bg-white\/5 { background: rgba(255, 255, 255, 0.06) !important; }
#screen-main .bg-\[\#00f076\] { background: #00f076 !important; }
#screen-main .text-\[\#00f076\] { color: #00f076 !important; }
#screen-main .text-white { color: #ffffff !important; }
#screen-main .text-\[\#bacbb8\],
#screen-main .text-slate-300,
#screen-main .text-slate-400 { color: #bacbb8 !important; }
#screen-main .object-cover { object-fit: cover !important; }
#screen-main img[src*='googleusercontent.com'] { display: none !important; }
#screen-main .min-w-\[280px\] { min-width: 0 !important; }
#screen-main .h-\[160px\] { height: 160px !important; }
#screen-main .bottom-4 { bottom: 16px !important; }
#screen-main .left-4 { left: 16px !important; }
#screen-main .right-4 { right: 16px !important; }

@media (min-width: 481px) {
  .bottom-nav,
  #bottom-nav {
    left: 50% !important;
    right: auto !important;
    width: min(480px, 100%) !important;
    transform: translateX(-50%) !important;
  }
}

/* Locally hosted utility fallback for the Profile and Finance screens. */
:is(#screen-profile, #screen-finance) {
  background: #0b0f10 !important;
  color: #ffffff !important;
  padding-bottom: 106px !important;
}

:is(#screen-profile, #screen-finance) > .header {
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #101415 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#screen-profile > section {
  margin: 16px 16px 0;
}

#screen-finance .finance-main {
  padding: 16px 16px 106px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #0b0f10 !important;
}

:is(#screen-profile, #screen-finance) .flex { display: flex !important; }
:is(#screen-profile, #screen-finance) .grid { display: grid !important; }
:is(#screen-profile, #screen-finance) .block { display: block !important; }
:is(#screen-profile, #screen-finance) .hidden { display: none !important; }
:is(#screen-profile, #screen-finance) .flex-1,
:is(#screen-profile, #screen-finance) .flex-grow { flex: 1 1 0% !important; }
:is(#screen-profile, #screen-finance) .flex-col { flex-direction: column !important; }
:is(#screen-profile, #screen-finance) .items-center { align-items: center !important; }
:is(#screen-profile, #screen-finance) .items-end { align-items: flex-end !important; }
:is(#screen-profile, #screen-finance) .justify-between { justify-content: space-between !important; }
:is(#screen-profile, #screen-finance) .justify-center { justify-content: center !important; }
:is(#screen-profile, #screen-finance) .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
:is(#screen-profile, #screen-finance) .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
:is(#screen-profile, #screen-finance) .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
:is(#screen-profile, #screen-finance) .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
:is(#screen-profile, #screen-finance) .gap-1 { gap: 4px !important; }
:is(#screen-profile, #screen-finance) .gap-2 { gap: 8px !important; }
:is(#screen-profile, #screen-finance) .gap-3 { gap: 12px !important; }
:is(#screen-profile, #screen-finance) .gap-4 { gap: 16px !important; }
:is(#screen-profile, #screen-finance) .gap-xs { gap: 4px !important; }
:is(#screen-profile, #screen-finance) .gap-sm { gap: 8px !important; }
:is(#screen-profile, #screen-finance) .gap-md { gap: 16px !important; }
:is(#screen-profile, #screen-finance) .space-y-1 > * + * { margin-top: 4px !important; }
:is(#screen-profile, #screen-finance) .space-y-3 > * + * { margin-top: 12px !important; }
:is(#screen-profile, #screen-finance) .space-y-4 > * + * { margin-top: 16px !important; }
:is(#screen-profile, #screen-finance) .space-y-md > * + * { margin-top: 16px !important; }
:is(#screen-profile, #screen-finance) .p-1 { padding: 4px !important; }
:is(#screen-profile, #screen-finance) .p-2 { padding: 8px !important; }
:is(#screen-profile, #screen-finance) .p-3 { padding: 12px !important; }
:is(#screen-profile, #screen-finance) .p-4 { padding: 16px !important; }
:is(#screen-profile, #screen-finance) .p-5 { padding: 20px !important; }
:is(#screen-profile, #screen-finance) .p-md { padding: 16px !important; }
:is(#screen-profile, #screen-finance) .p-sm { padding: 8px !important; }
:is(#screen-profile, #screen-finance) .px-2 { padding-left: 8px !important; padding-right: 8px !important; }
:is(#screen-profile, #screen-finance) .px-3 { padding-left: 12px !important; padding-right: 12px !important; }
:is(#screen-profile, #screen-finance) .py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
:is(#screen-profile, #screen-finance) .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
:is(#screen-profile, #screen-finance) .py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
:is(#screen-profile, #screen-finance) .relative { position: relative !important; }
:is(#screen-profile, #screen-finance) .absolute { position: absolute !important; }
:is(#screen-profile, #screen-finance) .inset-0 { inset: 0 !important; }
:is(#screen-profile, #screen-finance) .w-full { width: 100% !important; }
:is(#screen-profile, #screen-finance) .h-full { height: 100% !important; }
:is(#screen-profile, #screen-finance) .w-8 { width: 32px !important; }
:is(#screen-profile, #screen-finance) .h-8 { height: 32px !important; }
:is(#screen-profile, #screen-finance) .w-12 { width: 48px !important; }
:is(#screen-profile, #screen-finance) .h-12 { height: 48px !important; }
:is(#screen-profile, #screen-finance) .w-20 { width: 80px !important; }
:is(#screen-profile, #screen-finance) .h-20 { height: 80px !important; }
:is(#screen-profile, #screen-finance) .w-32 { width: 128px !important; }
:is(#screen-profile, #screen-finance) .h-32 { height: 128px !important; }
:is(#screen-profile, #screen-finance) .h-2 { height: 8px !important; }
:is(#screen-profile, #screen-finance) .rounded { border-radius: 6px !important; }
:is(#screen-profile, #screen-finance) .rounded-lg { border-radius: 8px !important; }
:is(#screen-profile, #screen-finance) .rounded-xl { border-radius: 12px !important; }
:is(#screen-profile, #screen-finance) .rounded-full { border-radius: 999px !important; }
:is(#screen-profile, #screen-finance) .overflow-hidden { overflow: hidden !important; }
:is(#screen-profile, #screen-finance) .object-cover { object-fit: cover !important; }
:is(#screen-profile, #screen-finance) .text-left { text-align: left !important; }
:is(#screen-profile, #screen-finance) .text-center { text-align: center !important; }
:is(#screen-profile, #screen-finance) .font-bold { font-weight: 700 !important; }
:is(#screen-profile, #screen-finance) .font-extrabold { font-weight: 800 !important; }
:is(#screen-profile, #screen-finance) .text-xs { font-size: 12px !important; }
:is(#screen-profile, #screen-finance) .text-sm { font-size: 14px !important; }
:is(#screen-profile, #screen-finance) .text-base { font-size: 16px !important; }
:is(#screen-profile, #screen-finance) .text-lg { font-size: 18px !important; }
:is(#screen-profile, #screen-finance) .text-xl { font-size: 20px !important; }
:is(#screen-profile, #screen-finance) .text-3xl { font-size: 30px !important; }
:is(#screen-profile, #screen-finance) .font-headline-lg-mobile { font-size: 20px !important; font-weight: 700 !important; }
:is(#screen-profile, #screen-finance) .font-title-md { font-size: 16px !important; font-weight: 700 !important; }
:is(#screen-profile, #screen-finance) .font-body-sm { font-size: 13px !important; }
:is(#screen-profile, #screen-finance) .font-label-caps { font-size: 11px !important; font-weight: 700 !important; }
:is(#screen-profile, #screen-finance) .glass-card {
  background: #151a1b !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

:is(#screen-profile, #screen-finance) .bg-white\/5 { background: rgba(255, 255, 255, 0.06) !important; }
:is(#screen-profile, #screen-finance) .bg-\[\#00f076\] { background: #00f076 !important; }
:is(#screen-profile, #screen-finance) .bg-\[\#00f076\]\/10 { background: rgba(0, 240, 118, 0.10) !important; }
:is(#screen-profile, #screen-finance) .text-white,
:is(#screen-profile, #screen-finance) .text-on-surface { color: #ffffff !important; }
:is(#screen-profile, #screen-finance) .text-\[\#00f076\],
:is(#screen-profile, #screen-finance) .text-primary,
:is(#screen-profile, #screen-finance) .text-primary-container { color: #00f076 !important; }
:is(#screen-profile, #screen-finance) .text-slate-300,
:is(#screen-profile, #screen-finance) .text-slate-400,
:is(#screen-profile, #screen-finance) .text-slate-500,
:is(#screen-profile, #screen-finance) .text-on-surface-variant { color: #bacbb8 !important; }
:is(#screen-profile, #screen-finance) img[src*='googleusercontent.com'] { display: none !important; }

#screen-profile [onclick='triggerAvatarUpload()'] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
}

#screen-profile [onclick='triggerAvatarUpload()']::before {
  content: none;
}

#screen-profile [onclick='triggerAvatarUpload()'] > .absolute {
  display: none !important;
}

.bottom-nav .nav-item.active .nav-icon,
.bottom-nav .nav-item[aria-current='page'] .nav-icon {
  color: #00f076 !important;
}

.bottom-nav .nav-item.active[data-screen='more'] .nav-icon svg,
.bottom-nav .nav-item[aria-current='page'][data-screen='more'] .nav-icon svg {
  fill: #00f076 !important;
  stroke: none !important;
}

/* Finance has an older violet visual skin. The release palette is green. */
#screen-finance.finance-screen,
#screen-finance.finance-screen::before {
  background: #0b0f10 !important;
}

#screen-finance .finance-main input,
#screen-finance .finance-main select,
#screen-finance .finance-main textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

#screen-finance .finance-main button {
  min-height: 34px;
}

#screen-finance .finance-main .btn-fin-category,
#screen-finance .finance-main .finance-sub-panel > button,
#screen-finance .finance-main button.bg-\[\#00f076\] {
  border: 1px solid rgba(0, 240, 118, 0.30) !important;
}