:root {
  --ml-ink: #12241f;
  --ml-muted: #5a6e67;
  --ml-bg0: #e7f0ec;
  --ml-bg1: #f3f7f5;
  --ml-surface: rgba(255, 255, 255, 0.78);
  --ml-surface-2: rgba(255, 255, 255, 0.92);
  --ml-line: rgba(18, 36, 31, 0.08);
  --ml-teal: #0f766e;
  --ml-teal-2: #14b8a6;
  --ml-deep: #0b4f4a;
  --ml-sand: #c4a574;
  --ml-coral: #d4564e;
  --ml-amber: #d97706;
  --ml-glow: rgba(15, 118, 110, 0.22);
  --ml-radius: 1.5rem;
}

html, body {
  background:
    radial-gradient(900px 520px at 110% -5%, rgba(196, 165, 116, 0.22), transparent 55%),
    radial-gradient(800px 480px at -15% 15%, rgba(20, 184, 166, 0.18), transparent 50%),
    linear-gradient(180deg, var(--ml-bg1) 0%, var(--ml-bg0) 100%) !important;
  min-height: 100%;
}

#root {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

.ml-home {
  font-family: "Vazirmatn", system-ui, sans-serif;
  color: var(--ml-ink);
}

/* ── Header ── */
.ml-dash__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding: 0.65rem 0.75rem;
  border-radius: 1.25rem;
  background: var(--ml-surface-2);
  border: 1px solid var(--ml-line);
  box-shadow: 0 8px 20px rgba(18, 36, 31, 0.05);
  min-height: 3.9rem;
}

/* Hide React greeting/avatar/bell until market scripts replace them */
.ml-dash__head > .ml-dash__avatar:not(.ml-market-currency-badge),
.ml-dash__head > .ml-dash__hello,
.ml-dash__head > .ml-dash__bell {
  display: none !important;
}

.ml-dash__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--ml-deep), var(--ml-teal-2));
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 10px 24px var(--ml-glow);
  flex-shrink: 0;
}

.ml-dash__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ml-dash__hello { flex: 1; min-width: 0; }

.ml-dash__eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ml-muted);
}

.ml-dash__name {
  margin: 0.1rem 0 0;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ml-dash__bell {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  border: 1px solid var(--ml-line);
  background: var(--ml-surface-2);
  color: var(--ml-deep);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(18, 36, 31, 0.06);
}

/* ── Hero ring (useful widget) ── */
.ml-hero-ring {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 1rem;
  border-radius: 1.75rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(232, 245, 241, 0.75));
  border: 1px solid var(--ml-line);
  box-shadow: 0 16px 36px rgba(11, 79, 74, 0.08);
  margin-bottom: 0.9rem;
}

.ml-hero-ring__orbit {
  --p: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 9.5rem;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.ml-hero-ring__track,
.ml-hero-ring__fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.ml-hero-ring__track {
  background:
    conic-gradient(from -90deg, rgba(15, 118, 110, 0.12) 0deg, rgba(15, 118, 110, 0.12) 360deg);
}

.ml-hero-ring__fill {
  background:
    conic-gradient(
      from -90deg,
      var(--ml-teal) 0deg,
      var(--ml-teal-2) calc(var(--p) * 3.6deg),
      transparent calc(var(--p) * 3.6deg)
    );
  filter: drop-shadow(0 0 12px rgba(20, 184, 166, 0.35));
  animation: ml-ring-in 0.8s ease-out;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
}

.ml-hero-ring__track {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
}

@keyframes ml-ring-in {
  from { filter: drop-shadow(0 0 0 transparent); opacity: 0.4; }
  to { filter: drop-shadow(0 0 12px rgba(20, 184, 166, 0.35)); opacity: 1; }
}

.ml-hero-ring__core {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-content: center;
  box-shadow: inset 0 0 0 1px var(--ml-line);
}

.ml-hero-ring__value {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ml-deep);
  line-height: 1;
}

.ml-hero-ring__label {
  margin: 0.35rem 0 0;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ml-muted);
}

.ml-hero-ring__side {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ml-metric {
  padding: 0.55rem 0.65rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ml-line);
}

.ml-metric__k {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ml-muted);
  margin-bottom: 0.15rem;
}

.ml-metric__v {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--ml-ink);
}

.ml-metric__v small {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--ml-muted);
  margin-right: 0.15rem;
}

.ml-metric-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  background: transparent;
  color: var(--ml-teal);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  padding: 0.15rem 0;
}

/* ── Quick actions (Android chip row) ── */
.ml-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem 0.35rem;
  padding: 0.7rem 0.5rem;
  border-radius: 1.35rem;
  background: var(--ml-surface);
  border: 1px solid var(--ml-line);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(18, 36, 31, 0.05);
  margin-bottom: 1rem;
}

.ml-actions__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--ml-muted);
  padding: 0.25rem 0;
}

.ml-actions__ico {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform 0.15s ease;
}

.ml-actions__btn:active .ml-actions__ico { transform: scale(0.94); }

.ml-actions__ico.is-a { background: linear-gradient(145deg, #0f766e, #2dd4bf); }
.ml-actions__ico.is-b { background: linear-gradient(145deg, #0e7490, #22d3ee); }
.ml-actions__ico.is-c { background: linear-gradient(145deg, #b45309, #f59e0b); }
.ml-actions__ico.is-d { background: linear-gradient(145deg, #065f46, #34d399); }
.ml-actions__ico.is-e { background: linear-gradient(145deg, #9a3412, #fb923c); }
.ml-actions__ico.is-f { background: linear-gradient(145deg, #1e3a5f, #38bdf8); }
.ml-actions__ico.is-g { background: linear-gradient(145deg, #3f6212, #a3e635); }
.ml-actions__ico.is-h { background: linear-gradient(145deg, #334155, #94a3b8); }
.ml-actions__ico.is-i { background: linear-gradient(145deg, #9f1239, #fb7185); }

/* ── Shared section cards ── */
.ml-section-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ml-ink);
  margin: 0;
}

.ml-muted {
  font-size: 0.65rem;
  color: var(--ml-muted);
  font-weight: 600;
  margin-top: 0.15rem;
}

.ml-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--ml-teal);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.ml-week { margin-bottom: 0.9rem; }

.ml-week__strip {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.45rem;
  border-radius: 1.35rem;
  background: var(--ml-surface);
  border: 1px solid var(--ml-line);
  backdrop-filter: blur(10px);
}

.ml-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.1rem;
  border-radius: 1rem;
  border: 0;
  background: transparent;
  color: var(--ml-muted);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ml-day.is-active {
  background: var(--ml-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px var(--ml-glow);
}

.ml-day__w { font-size: 0.55rem; font-weight: 700; opacity: 0.7; }
.ml-day__n { font-size: 0.85rem; font-weight: 800; }
.ml-day__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.ml-day__dot.is-empty { opacity: 0; }

.ml-budget,
.ml-journal,
.ml-focus__card {
  border: 1px solid var(--ml-line);
  border-radius: 1.35rem;
  padding: 1rem;
  background: var(--ml-surface);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(18, 36, 31, 0.04);
}

.ml-budget { margin-bottom: 0.9rem; }
.ml-focus { margin-bottom: 0.9rem; }

.ml-budget__input {
  width: 5.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.7rem;
  border: 1px solid var(--ml-line);
  font-size: 0.7rem;
  text-align: center;
  background: #fff;
}
.ml-budget__save {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.7rem;
  border: 0;
  background: var(--ml-teal);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ml-budget__cap {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ml-muted);
  margin: 0 0 0.2rem;
}
.ml-budget__spent {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
}
.ml-budget__spent span {
  font-weight: 600;
  color: var(--ml-muted);
  font-size: 0.7rem;
}
.ml-budget__pct {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ml-teal);
  line-height: 1;
}
.ml-budget__pct.is-over { color: var(--ml-coral); }
.ml-budget__track {
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(18, 36, 31, 0.08);
  overflow: hidden;
}
.ml-budget__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ml-deep), var(--ml-teal-2));
}
.ml-budget__fill.is-over {
  background: linear-gradient(90deg, var(--ml-coral), var(--ml-amber));
}
.ml-budget__warn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ml-coral);
}
.ml-budget__empty {
  text-align: center;
  padding: 0.75rem 0 0.25rem;
  color: var(--ml-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.ml-cats {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.ml-cat {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
}
.ml-cat__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
}
.ml-cat__name { color: var(--ml-muted); }
.ml-cat__val { color: var(--ml-ink); }

.ml-focus__label {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--ml-muted);
}
.ml-focus__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}
.ml-focus__meta,
.ml-focus__empty {
  margin: 0.25rem 0 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ml-muted);
}
.ml-focus__amount {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--ml-coral);
  white-space: nowrap;
}
.ml-focus__card {
  width: 100%;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.ml-focus__card:active { transform: scale(0.99); }

.ml-journal__input {
  width: 100%;
  border: 1px solid var(--ml-line);
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.7;
  background: #fff;
  resize: none;
  outline: none;
  font-family: inherit;
}
.ml-journal__input:focus {
  border-color: rgba(15, 118, 110, 0.45);
  box-shadow: 0 0 0 3px var(--ml-glow);
}

.ml-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.15rem;
  background: linear-gradient(135deg, var(--ml-deep), var(--ml-teal));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 22px var(--ml-glow);
  transition: transform 0.15s ease;
}
.ml-btn:active { transform: scale(0.98); }
.ml-btn--block { width: 100%; margin-top: 0.75rem; }

/* Toast notification */
.ml-toast {
  position: fixed;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 99999;
  max-width: min(22rem, calc(100vw - 1.5rem));
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  font-family: "Vazirmatn", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #0b4f4a, #0f766e);
  box-shadow: 0 14px 34px rgba(15, 118, 110, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.ml-toast.is-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.ml-toast--error {
  background: linear-gradient(145deg, #9f1239, #e11d48);
  box-shadow: 0 14px 34px rgba(225, 29, 72, 0.25);
}
.ml-toast--info {
  background: linear-gradient(145deg, #0c4a6e, #0284c7);
}

/* Bottom nav — floating pill (iOS-safe: no transform on fixed) */
.fixed.bottom-0 {
  position: fixed !important;
  z-index: 40 !important;
  left: 0.75rem !important;
  right: 0.75rem !important;
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  max-width: 28rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  border-radius: 1.35rem !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  box-shadow: 0 12px 32px rgba(18, 36, 31, 0.12) !important;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)) !important;
}

/* iOS / WebKit fallbacks when Tailwind CDN utilities lag or fail */
.grid {
  display: -ms-grid !important;
  display: grid !important;
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.flex {
  display: -webkit-flex !important;
  display: flex !important;
}
.flex-col {
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
}
.items-center {
  -webkit-align-items: center !important;
  align-items: center !important;
}
.justify-between {
  -webkit-justify-content: space-between !important;
  justify-content: space-between !important;
}
.justify-center {
  -webkit-justify-content: center !important;
  justify-content: center !important;
}
.min-h-screen {
  min-height: 100vh !important;
  min-height: -webkit-fill-available !important;
}
.fixed {
  position: fixed !important;
}
.sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}
.hidden {
  display: none !important;
}
.w-full {
  width: 100% !important;
}
.max-w-md {
  max-width: 28rem !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Help button slot — keep header flex intact */
.ml-help-slot {
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  gap: 0.1rem;
  flex-shrink: 0;
}

@media (max-width: 430px) {
  .fixed.bottom-0 .text-\[9px\],
  .fixed.bottom-0 .text-\[10px\] {
    font-size: 8px !important;
    letter-spacing: -0.02em;
  }
  .ml-actions { gap: 0.25rem; }
  .ml-actions__ico { width: 2.35rem; height: 2.35rem; border-radius: 0.9rem; }
}