/* MARK OS Mobile UI V1 Fix03 — My Income visual shell only. */
html[data-markos-page="income"] {
  --income-shell-line: rgba(174, 202, 235, .88);
  --income-shell-shadow: 0 7px 22px rgba(14, 61, 116, .09);
}

@media (max-width: 900px), (pointer: coarse) {
  html[data-markos-page="income"] body {
    min-width: 320px;
    background:
      radial-gradient(circle at 15% 7%, rgba(0, 178, 255, .10), transparent 24rem),
      linear-gradient(180deg, #edf8ff 0%, #f8fcff 68%, #edf7ff 100%);
  }

  html[data-markos-page="income"] body.dark {
    --income-shell-line: rgba(197, 218, 241, .82);
    --income-shell-shadow: 0 7px 22px rgba(0, 0, 0, .18);
    background: #081426;
  }

  html[data-markos-page="income"] .app {
    width: min(100%, 760px);
    max-width: 760px;
    background: transparent;
  }

  html[data-markos-page="income"] #incomeScreen > .content {
    display: grid;
    gap: 10px;
    padding: 10px 10px calc(82px + env(safe-area-inset-bottom, 0px));
  }

  html[data-markos-page="income"] #incomeScreen .calendar-card,
  html[data-markos-page="income"] #incomeScreen .section {
    width: 100%;
    margin: 0;
    border: 1px solid var(--income-shell-line);
    border-left: 1px solid var(--income-shell-line) !important;
    border-radius: 18px;
    background: var(--card);
    box-shadow: var(--income-shell-shadow);
    overflow: hidden;
  }

  html[data-markos-page="income"] #incomeScreen .calendar-card {
    padding: 10px 12px 7px;
    border-radius: 0 0 18px 18px;
  }

  html[data-markos-page="income"] #incomeScreen .section {
    padding: 12px;
  }

  html[data-markos-page="income"] #incomeScreen .section-title,
  html[data-markos-page="income"] #incomeScreen .records-title {
    color: var(--text);
    font-weight: 850;
  }

  html[data-markos-page="income"] #incomeScreen .store,
  html[data-markos-page="income"] #incomeScreen .money-box,
  html[data-markos-page="income"] #incomeScreen .note-btn {
    border-color: var(--line);
    box-shadow: none;
  }

  html[data-markos-page="income"] #incomeScreen .bottom-nav {
    width: min(100%, 760px);
    height: calc(68px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -5px 20px rgba(7, 34, 73, .08);
  }

  html[data-markos-page="income"] #incomeScreen .nav-btn {
    color: var(--muted);
  }

  html[data-markos-page="income"] #incomeScreen .nav-btn.active {
    color: #0878ef;
  }
}