/* =========================================================
   PEONY
   Abyssal Umber #461312
   Brass Moss    #CAC76A
   Peony Blush   #ED809D
========================================================= */

[data-theme="peony"] {
  --bg:#461312;
  --card:#551716;
  --card2:#611b1a;

  --text:#fff0f3;
  --muted:#ca929e;

  --accent:#ed809d;
  --accent-soft:rgba(237,128,157,.14);

  --border:rgba(255,215,224,.10);

  --peony-umber:#461312;
  --peony-deep:#330b0b;
  --peony-panel:#561716;

  --peony-moss:#cac76a;
  --peony-moss-hi:#d8d675;

  --peony-pink:#ed809d;
  --peony-pink-hi:#f194ad;

  --peony-dark:#34100f;
}


/* PAGE */

[data-theme="peony"] body {
  background:
    linear-gradient(
      180deg,
      #4a1413,
      #461312 55%,
      #3b100f
    ) !important;

  color:var(--text) !important;
}

[data-theme="peony"] .app {
  max-width:720px;
}


/* =========================================================
   SEPARATE OVERVIEW
========================================================= */

.peony-overview {
  display:none;
}

[data-theme="peony"]
#overviewView.active {
  display:block;
}

[data-theme="peony"]
#overviewView > :not(#peonyOverview) {
  display:none !important;
}

[data-theme="peony"]
#peonyOverview {
  display:block !important;
}


/* HEADER */

.peony-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  margin:
    4px
    4px
    22px;
}

.peony-hello {
  color:var(--peony-pink);

  font:
    800
    23px/1.08
    "Manrope",
    sans-serif;

  letter-spacing:-.04em;
}

.peony-month {
  padding-top:3px;

  color:var(--peony-moss);

  font-size:13px;
  font-weight:750;

  text-transform:lowercase;
}


/* =========================================================
   BALANCE CARD
========================================================= */

.peony-balance-card {
  position:relative;
  overflow:hidden;

  padding:
    20px
    18px
    14px;

  margin-bottom:20px;

  border-radius:25px;

  color:var(--peony-dark);

  background:
    linear-gradient(
      145deg,
      #d6d36e,
      var(--peony-moss)
    );

  box-shadow:
    0 17px 38px -26px
    rgba(0,0,0,.95);
}

.peony-balance-card::after {
  content:"";

  position:absolute;

  width:170px;
  height:170px;

  right:-65px;
  top:-80px;

  border-radius:50%;

  border:
    1px solid
    rgba(70,19,18,.055);

  box-shadow:
    0 0 0 24px
      rgba(70,19,18,.025),
    0 0 0 48px
      rgba(70,19,18,.018);
}

.peony-balance-label {
  position:relative;
  z-index:1;

  margin-bottom:5px;

  font-size:12px;
  font-weight:700;
}

.peony-balance-value {
  position:relative;
  z-index:1;

  color:var(--peony-dark);

  font:
    800
    clamp(38px,10vw,52px)/1
    "Manrope",
    sans-serif;

  letter-spacing:-.055em;

  font-variant-numeric:
    tabular-nums;
}

.peony-balance-delta {
  position:relative;
  z-index:1;

  margin-top:7px;

  font-size:11px;
  font-weight:650;

  opacity:.72;
}


/* INCOME / EXPENSE INSIDE BALANCE CARD */

.peony-balance-pair {
  position:relative;
  z-index:1;

  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:8px;

  margin-top:17px;
}

.peony-balance-mini {
  display:flex;
  align-items:center;

  min-width:0;

  gap:8px;

  padding:
    10px
    11px;

  border-radius:14px;

  background:
    rgba(255,255,255,.11);
}

.peony-balance-mini > span {
  font-size:20px;
  line-height:1;
}

.peony-balance-mini div {
  min-width:0;
}

.peony-balance-mini small {
  display:block;

  margin-bottom:2px;

  font-size:9px;
  font-weight:650;

  opacity:.66;
}

.peony-balance-mini strong {
  display:block;

  overflow:hidden;

  font-size:13px;
  font-weight:800;

  white-space:nowrap;
  text-overflow:ellipsis;

  font-variant-numeric:
    tabular-nums;
}

.peony-expense-mini {
  background:
    var(--peony-pink);
}


/* =========================================================
   QUICK
========================================================= */

.peony-section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:14px;
}

.peony-section-heading small {
  display:block;

  margin-bottom:3px;

  color:var(--muted);

  font-size:10px;
  font-weight:650;

  text-transform:uppercase;
  letter-spacing:.08em;
}

.peony-section-heading h2 {
  margin:0;

  color:var(--text);

  font:
    800
    20px/1.15
    "Manrope",
    sans-serif;

  letter-spacing:-.035em;
}

.peony-today {
  margin-bottom:20px;
}

.peony-today .peony-section-heading {
  display:none;
}

.peony-quick-row {
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:10px;
}

.peony-quick-card {
  padding:
    13px
    14px;

  border:
    1px solid
    rgba(255,208,217,.08);

  border-radius:18px;

  background:
    rgba(100,26,25,.37);
}

.peony-quick-card span {
  display:block;

  margin-bottom:5px;

  color:var(--muted);

  font-size:11px;
}

.peony-quick-card strong {
  display:block;

  color:var(--text);

  font-size:18px;
  font-weight:750;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   PANELS
========================================================= */

.peony-panel {
  margin-top:18px;

  padding:
    18px
    16px;

  border:
    1px solid
    rgba(255,210,219,.075);

  border-radius:23px;

  background:
    rgba(87,22,21,.72);
}


/* =========================================================
   SEGMENTED CONTROLS
========================================================= */

.peony-segmented,
.peony-category-switch {
  display:flex;

  padding:3px;

  border-radius:14px;

  background:
    rgba(47,7,7,.34);
}

.peony-segmented {
  width:max-content;

  max-width:100%;

  margin-bottom:14px;
}

.peony-segmented button,
.peony-category-switch button {
  border:0;

  padding:
    8px
    12px;

  border-radius:11px;

  background:transparent;

  color:var(--muted);

  font:inherit;
  font-size:11px;
  font-weight:650;

  transition:
    transform .12s ease,
    background .18s ease,
    color .18s ease;
}

.peony-segmented button.active,
.peony-category-switch button.active {
  color:var(--peony-dark);

  background:
    var(--peony-pink);
}

.peony-segmented button:active,
.peony-category-switch button:active {
  transform:scale(.96);
}


/* =========================================================
   CHART
========================================================= */

.peony-chart {
  min-height:145px;

  overflow:visible;

  color:
    var(--peony-pink);
}

.peony-chart .theme-bars {
  height:118px;
}

.peony-chart .theme-bar-stick {
  border-radius:
    8px
    8px
    3px
    3px;

  background:
    rgba(237,128,157,.34);
}

.peony-chart
.theme-bar-item:nth-child(3n+2)
.theme-bar-stick {
  background:
    rgba(202,199,106,.66);
}

.peony-chart
.theme-bar-item.selected
.theme-bar-stick,
.peony-chart
.theme-bar-item.peak
.theme-bar-stick {
  background:
    var(--peony-pink);
}

.peony-chart-hint {
  margin:
    6px
    0
    13px;

  color:rgba(221,158,171,.64);

  font-size:10px;
  text-align:center;
}


/* USER LINE / AREA CHART */

[data-theme="peony"]
.user-line-chart {
  color:
    var(--peony-pink);
}

[data-theme="peony"]
.user-chart-line {
  stroke:
    var(--peony-pink) !important;
}

[data-theme="peony"]
.user-chart-selected {
  color:
    var(--peony-moss) !important;
}


/* =========================================================
   ANALYTICS STATS
========================================================= */

.peony-analytics-stats {
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:7px;
}

.peony-analytics-stats > div {
  padding:
    11px
    12px;

  border-radius:15px;

  background:
    rgba(45,8,8,.22);
}

.peony-analytics-stats span {
  display:block;

  margin-bottom:5px;

  color:var(--muted);

  font-size:9px;
}

.peony-analytics-stats strong {
  display:block;

  color:
    var(--peony-moss);

  font-size:15px;
  font-weight:750;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   CATEGORY DONUT
========================================================= */

.peony-category-head {
  align-items:flex-end;
}

.peony-category-switch button {
  padding:
    7px
    9px;

  font-size:9px;
}

.peony-category-layout {
  margin-top:9px;
}

.peony-donut-wrap {
  display:flex;
  justify-content:center;

  margin:
    6px
    0
    20px;
}

.peony-donut {
  display:grid;
  place-items:center;

  width:188px;
  height:188px;

  padding:30px;

  border-radius:50%;

  background:
    rgba(255,255,255,.06);
}

.peony-donut-hole {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  width:100%;
  height:100%;

  border-radius:50%;

  background:
    var(--peony-panel);

  text-align:center;

  box-shadow:
    0 0 0 1px
    rgba(255,255,255,.025);
}

.peony-donut-hole strong {
  color:var(--text);

  font-size:18px;
  font-weight:800;

  font-variant-numeric:
    tabular-nums;
}

.peony-donut-hole span {
  margin-top:3px;

  color:var(--muted);

  font-size:9px;
}


/* =========================================================
   CATEGORY LIST
========================================================= */

.peony-category-list {
  display:flex;
  flex-direction:column;
}

.peony-category-row {
  display:flex;

  gap:11px;

  padding:
    11px
    0;

  border-bottom:
    1px solid
    rgba(255,220,226,.06);
}

.peony-category-row:last-child {
  border-bottom:0;
}

.peony-category-icon {
  display:grid;
  place-items:center;

  flex:
    0 0
    39px;

  width:39px;
  height:39px;

  border-radius:50%;

  background:
    color-mix(
      in srgb,
      var(--peony-cat) 28%,
      transparent
    );

  box-shadow:
    inset 0 0 0 1px
    color-mix(
      in srgb,
      var(--peony-cat) 35%,
      transparent
    );

  font-size:17px;
}

.peony-category-copy {
  flex:1;

  min-width:0;
}

.peony-category-main {
  display:flex;
  justify-content:space-between;

  gap:10px;
}

.peony-category-main strong {
  overflow:hidden;

  color:var(--text);

  font-size:12px;
  font-weight:650;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.peony-category-main span {
  flex:none;

  color:var(--text);

  font-size:11px;
  font-weight:700;

  font-variant-numeric:
    tabular-nums;
}

.peony-category-bottom {
  display:flex;
  align-items:center;

  gap:8px;

  margin-top:7px;
}

.peony-category-meter {
  flex:1;

  height:5px;

  overflow:hidden;

  border-radius:999px;

  background:
    rgba(255,255,255,.05);
}

.peony-category-meter i {
  display:block;

  height:100%;

  border-radius:inherit;
}

.peony-category-bottom small {
  width:28px;

  color:var(--muted);

  font-size:9px;
  text-align:right;
}


/* =========================================================
   OPERATIONS — CLOSER TO REFERENCE
========================================================= */

[data-theme="peony"]
.operations-filters {
  border-color:
    rgba(255,210,220,.08);

  background:transparent;
}

[data-theme="peony"]
.operations-segment {
  border:
    1px solid
    rgba(255,210,220,.085);

  background:
    rgba(54,8,8,.25);
}

[data-theme="peony"]
.operations-filter-btn {
  color:var(--muted);
}

[data-theme="peony"]
.operations-filter-btn.active,
[data-theme="peony"]
.operations-filter-btn[data-type="income"].active {
  color:var(--peony-dark) !important;

  background:
    var(--peony-pink) !important;
}


/* =========================================================
   FINANCE
========================================================= */

[data-theme="peony"]
.finance-tabs,
[data-theme="peony"]
.debt-list-tabs {
  border:
    1px solid
    rgba(255,210,220,.085);

  background:
    rgba(54,8,8,.25);
}

[data-theme="peony"]
.finance-tab,
[data-theme="peony"]
.debt-list-tab {
  color:var(--muted);
}

[data-theme="peony"]
.finance-tab.active,
[data-theme="peony"]
.debt-list-tab.active {
  color:var(--peony-dark) !important;

  background:
    var(--peony-pink) !important;
}

[data-theme="peony"]
.recurring-summary-next,
[data-theme="peony"]
.recurring-payment-next,
[data-theme="peony"]
.recurring-next-line,
[data-theme="peony"]
.recurring-next-line b {
  color:
    var(--peony-moss) !important;
}


/* =========================================================
   GENERIC CARDS
========================================================= */

[data-theme="peony"]
.settings-block,
[data-theme="peony"]
.recurring-payment,
[data-theme="peony"]
.operations-summary-item,
[data-theme="peony"]
.debt-summary-card {
  border-color:
    rgba(255,210,220,.08);

  background:
    rgba(92,24,23,.42);
}


/* =========================================================
   NAV
========================================================= */

[data-theme="peony"]
.nav {
  background:transparent;
  border:0;
}

[data-theme="peony"]
.nav-inner {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(255,210,220,.075);

  border-radius:25px;

  background:
    rgba(55,6,6,.94);

  box-shadow:
    0 14px 34px -20px
    rgba(0,0,0,.95);
}

[data-theme="peony"]
.nav-item {
  border-radius:16px;

  color:#be7b89;

  background:transparent !important;

  transition:
    transform .12s ease,
    color .18s ease;
}

[data-theme="peony"]
.nav-item.active {
  color:
    var(--peony-moss) !important;

  background:
    transparent !important;

  box-shadow:none !important;
}

[data-theme="peony"]
.nav-item.active::after {
  content:"";

  display:block;

  width:4px;
  height:4px;

  margin:
    3px auto
    0;

  border-radius:50%;

  background:
    var(--peony-moss);
}

[data-theme="peony"]
.nav-item:active {
  transform:
    translateY(1px)
    scale(.96);
}


/* =========================================================
   SHEETS
   COLORS ONLY — GLOBAL SCROLL FIX STAYS IN APP.CSS
========================================================= */

[data-theme="peony"]
.sheet {
  color:var(--text);

  border-color:
    rgba(255,210,220,.08);

  background:
    #511514;
}

[data-theme="peony"]
.sheet-handle {
  background:
    rgba(255,220,228,.18);
}

[data-theme="peony"]
.sheet-close {
  color:
    var(--peony-pink);
}


/* =========================================================
   THEME PICKER
========================================================= */

.theme-preview-peony {
  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #461312 0 45%,
      #cac76a 45% 72%,
      #ed809d 72%
    );
}

.theme-preview-peony::before {
  content:"";

  position:absolute;

  left:14%;
  top:15%;

  width:34%;
  height:34%;

  border-radius:50%;

  background:
    #ed809d;
}

.theme-preview-peony::after {
  content:"";

  position:absolute;

  right:13%;
  bottom:13%;

  width:32%;
  height:8%;

  border-radius:999px;

  background:
    #461312;
}


/* =========================================================
   MOTION
========================================================= */

[data-theme="peony"]
.peony-balance-card,
[data-theme="peony"]
.peony-quick-row,
[data-theme="peony"]
.peony-panel {
  animation:
    peony-enter
    .48s
    cubic-bezier(.2,.78,.25,1)
    both;
}

[data-theme="peony"]
.peony-quick-row {
  animation-delay:.05s;
}

[data-theme="peony"]
.peony-panel:nth-of-type(1) {
  animation-delay:.10s;
}

[data-theme="peony"]
.peony-panel:nth-of-type(2) {
  animation-delay:.15s;
}

@keyframes peony-enter {
  from {
    opacity:0;

    transform:
      translateY(10px);
  }

  to {
    opacity:1;

    transform:
      translateY(0);
  }
}


@media (
  prefers-reduced-motion:
  reduce
) {
  [data-theme="peony"]
  .peony-balance-card,

  [data-theme="peony"]
  .peony-quick-row,

  [data-theme="peony"]
  .peony-panel {
    animation:none;
  }
}


/* =========================================================
   PEONY V3 — REFERENCE POLISH
========================================================= */


/* ---------------------------------------------------------
   HEADER — closer to reference
--------------------------------------------------------- */

[data-theme="peony"] .peony-header {
  margin-bottom: 16px;
}

[data-theme="peony"] .peony-hello {
  font-size: 20px;
  line-height: 1.05;
}

[data-theme="peony"] .peony-month {
  font-size: 12px;
}


/* ---------------------------------------------------------
   HERO — more compact
--------------------------------------------------------- */

[data-theme="peony"] .peony-balance-card {
  padding: 17px 17px 12px;
  margin-bottom: 14px;

  border-radius: 23px;
}

[data-theme="peony"] .peony-balance-label {
  font-size: 11px;
}

[data-theme="peony"] .peony-balance-value {
  font-size: clamp(34px, 9vw, 46px);
}

[data-theme="peony"] .peony-balance-delta {
  margin-top: 5px;
  font-size: 10px;
}

[data-theme="peony"] .peony-balance-pair {
  margin-top: 12px;
  gap: 7px;
}

[data-theme="peony"] .peony-balance-mini {
  padding: 8px 10px;
  border-radius: 13px;
}

[data-theme="peony"] .peony-balance-mini > span {
  font-size: 17px;
}

[data-theme="peony"] .peony-balance-mini strong {
  font-size: 12px;
}


/* ---------------------------------------------------------
   QUICK CARDS — much lighter
--------------------------------------------------------- */

[data-theme="peony"] .peony-quick-row {
  gap: 8px;
}

[data-theme="peony"] .peony-quick-card {
  padding: 10px 12px;

  border-radius: 15px;

  background:
    rgba(91, 24, 23, .30);
}

[data-theme="peony"] .peony-quick-card span {
  font-size: 10px;
}

[data-theme="peony"] .peony-quick-card strong {
  font-size: 16px;
}


/* ---------------------------------------------------------
   PANELS — flatter like reference
--------------------------------------------------------- */

[data-theme="peony"] .peony-panel {
  padding: 16px 14px;

  border-radius: 21px;

  background:
    rgba(89, 22, 21, .46);

  box-shadow: none;
}


/* ---------------------------------------------------------
   ANALYTICS — blush chart card
--------------------------------------------------------- */

[data-theme="peony"] .peony-analytics {
  overflow: hidden;
}

[data-theme="peony"] .peony-chart {
  min-height: 145px;

  margin-top: 4px;
  padding: 12px 10px 7px;

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #f2b7c6,
      #efafc0
    );

  color: #461312;
}

[data-theme="peony"] .peony-chart .theme-bar-label {
  color: rgba(70,19,18,.68);
}

[data-theme="peony"] .peony-chart .theme-bar-stick {
  background:
    rgba(184,63,97,.50);
}

[data-theme="peony"]
.peony-chart
.theme-bar-item:nth-child(3n+2)
.theme-bar-stick {
  background:
    #cac76a;
}

[data-theme="peony"]
.peony-chart
.theme-bar-item.selected
.theme-bar-stick,

[data-theme="peony"]
.peony-chart
.theme-bar-item.peak
.theme-bar-stick {
  background:
    #b83f61;
}

[data-theme="peony"] .peony-chart-hint {
  margin-top: 9px;
}


/* ---------------------------------------------------------
   ANALYTICS STATS — less card-heavy
--------------------------------------------------------- */

[data-theme="peony"] .peony-analytics-stats {
  margin-top: 8px;
}

[data-theme="peony"] .peony-analytics-stats > div {
  padding: 10px 11px;

  background:
    rgba(57, 9, 9, .17);

  border:
    1px solid
    rgba(255,255,255,.025);
}


/* ---------------------------------------------------------
   SEGMENTS — reference proportions
--------------------------------------------------------- */

[data-theme="peony"] .peony-segmented {
  width: 100%;
}

[data-theme="peony"] .peony-segmented button {
  flex: 1;
  padding: 8px 7px;
}

[data-theme="peony"] .peony-category-switch {
  flex: none;
}


/* ---------------------------------------------------------
   DONUT — slightly smaller
--------------------------------------------------------- */

[data-theme="peony"] .peony-donut {
  width: 174px;
  height: 174px;

  padding: 27px;
}

[data-theme="peony"] .peony-donut-hole strong {
  font-size: 17px;
}


/* ---------------------------------------------------------
   CATEGORY LIST — tighter like reference
--------------------------------------------------------- */

[data-theme="peony"] .peony-category-row {
  padding: 9px 0;
}

[data-theme="peony"] .peony-category-icon {
  flex-basis: 36px;

  width: 36px;
  height: 36px;

  font-size: 15px;
}

[data-theme="peony"] .peony-category-main strong {
  font-size: 11px;
}

[data-theme="peony"] .peony-category-main span {
  font-size: 10px;
}


/* ---------------------------------------------------------
   OPERATIONS — remove foreign green/blue language
--------------------------------------------------------- */

[data-theme="peony"] .income-value,
[data-theme="peony"] .positive,
[data-theme="peony"] .operations-income,
[data-theme="peony"] .operations-balance {
  color:
    var(--peony-moss) !important;
}

[data-theme="peony"] .expense-value,
[data-theme="peony"] .negative {
  color:
    var(--peony-pink) !important;
}


/* Operations summary blocks flatter */

[data-theme="peony"] .operations-summary-item {
  background:
    rgba(82, 18, 17, .34);

  box-shadow: none;
}


/* ---------------------------------------------------------
   FINANCE CARDS — flatter
--------------------------------------------------------- */

[data-theme="peony"] .recurring-payment,
[data-theme="peony"] .debt-summary-card {
  background:
    rgba(82, 18, 17, .34);

  box-shadow: none;
}


/* ---------------------------------------------------------
   NAV — slimmer / closer to reference
--------------------------------------------------------- */

[data-theme="peony"] .nav-inner {
  padding: 3px 7px;

  border-radius: 22px;
}

[data-theme="peony"] .nav-item {
  min-height: 55px;
}

[data-theme="peony"] .nav-item.active::after {
  width: 3px;
  height: 3px;

  margin-top: 2px;
}


/* ---------------------------------------------------------
   REMOVE CYAN FROM COMMON PEONY CONTROLS
--------------------------------------------------------- */

[data-theme="peony"] a,
[data-theme="peony"] .section-link {
  color:
    var(--peony-pink);
}

[data-theme="peony"] input:focus,
[data-theme="peony"] select:focus,
[data-theme="peony"] textarea:focus {
  border-color:
    rgba(237,128,157,.55);
}


/* ---------------------------------------------------------
   MOBILE DENSITY
--------------------------------------------------------- */

@media (max-width: 430px) {

  [data-theme="peony"] .app {
    padding-left: 14px;
    padding-right: 14px;
  }

  [data-theme="peony"] .peony-panel {
    margin-top: 14px;
  }

}


/* =========================================================
   PEONY — RECENT OPERATIONS
   Reference-style list
========================================================= */

[data-theme="peony"] .peony-recent-section {
  margin: 2px 0 20px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}


/* HEADER */

[data-theme="peony"] .peony-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin: 0 3px 6px;
}

[data-theme="peony"] .peony-recent-head > div {
  min-width: 0;
}

[data-theme="peony"] .peony-recent-head small {
  display: none;
}

[data-theme="peony"] .peony-recent-head h2 {
  margin: 0;

  color: var(--text);

  font:
    750
    14px/1.2
    "Manrope",
    sans-serif;

  letter-spacing: -.02em;
}


/* SEE ALL */

[data-theme="peony"] .peony-see-all {
  appearance: none;
  -webkit-appearance: none;

  flex: none;

  border: 0 !important;

  margin: 0;
  padding: 6px 0;

  background: transparent !important;

  color: var(--peony-pink) !important;

  font:
    650
    10px/1
    "Manrope",
    sans-serif;

  cursor: pointer;
}

[data-theme="peony"] .peony-see-all:active {
  opacity: .65;
}


/* LIST */

[data-theme="peony"] .peony-today-list {
  display: flex;
  flex-direction: column;

  width: 100%;
}


/* OPERATION ROW */

[data-theme="peony"] .peony-operation-row {
  appearance: none;
  -webkit-appearance: none;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto
    8px;

  align-items: center;

  gap: 10px;

  width: 100%;

  margin: 0;
  padding: 10px 2px;

  border: 0 !important;

  border-bottom:
    1px solid
    rgba(255, 220, 227, .055)
    !important;

  border-radius: 0;

  background: transparent !important;

  color: inherit;

  text-align: left;

  font: inherit;

  box-shadow: none !important;

  transition:
    transform .12s ease,
    opacity .12s ease;
}

[data-theme="peony"] .peony-operation-row:last-child {
  border-bottom: 0 !important;
}

[data-theme="peony"] .peony-operation-row:active {
  transform: scale(.985);
  opacity: .72;
}


/* ICON */

[data-theme="peony"] .peony-operation-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  font-size: 17px;
}

[data-theme="peony"] .peony-operation-icon.expense {
  color: var(--peony-dark);

  background:
    var(--peony-pink);
}

[data-theme="peony"] .peony-operation-icon.income {
  color: var(--peony-dark);

  background:
    var(--peony-moss);
}


/* TITLE + META */

[data-theme="peony"] .peony-operation-copy {
  display: block;
  min-width: 0;
}

[data-theme="peony"] .peony-operation-copy strong {
  display: block;

  overflow: hidden;

  margin-bottom: 2px;

  color: var(--text);

  font-size: 12px;
  font-weight: 650;

  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-theme="peony"] .peony-operation-copy small {
  display: block;

  overflow: hidden;

  color: var(--muted);

  font-size: 9px;

  white-space: nowrap;
  text-overflow: ellipsis;
}


/* MONEY */

[data-theme="peony"] .peony-operation-amount {
  color: var(--text);

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;

  font-variant-numeric: tabular-nums;
}

[data-theme="peony"] .peony-operation-amount.income {
  color: var(--peony-moss);
}

[data-theme="peony"] .peony-operation-amount.expense {
  color: var(--text);
}


/* ARROW */

[data-theme="peony"] .peony-operation-arrow {
  color:
    rgba(255, 214, 223, .36);

  font-size: 15px;
}


/* EMPTY */

[data-theme="peony"] .peony-today-empty {
  padding: 15px 2px;

  color: var(--muted);

  font-size: 11px;

  border-bottom:
    1px solid
    rgba(255, 220, 227, .055);
}


/* Peony operation buttons must stay visually clean */
[data-theme="peony"] .peony-operation-row::before,
[data-theme="peony"] .peony-operation-row::after,
[data-theme="peony"] .peony-see-all::before,
[data-theme="peony"] .peony-see-all::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   PEONY V4 — FINAL REFERENCE POLISH
========================================================= */

/* Header tighter */
[data-theme="peony"] .peony-header {
  margin:
    2px
    2px
    14px;
}

[data-theme="peony"] .peony-hello {
  font-size: 19px;
}

[data-theme="peony"] .peony-month {
  font-size: 11px;
}


/* Balance card closer to reference proportions */
[data-theme="peony"] .peony-balance-card {
  padding:
    15px
    16px
    11px;

  margin-bottom: 15px;

  border-radius: 22px;
}

[data-theme="peony"] .peony-balance-value {
  font-size:
    clamp(
      33px,
      9vw,
      44px
    );
}

[data-theme="peony"] .peony-balance-pair {
  margin-top: 11px;
}


/* Recent operations denser */
[data-theme="peony"] .peony-recent-section {
  margin-bottom: 15px;
}

[data-theme="peony"] .peony-operation-row {
  padding:
    8px
    1px;
}

[data-theme="peony"] .peony-operation-icon {
  width: 35px;
  height: 35px;

  font-size: 15px;
}

[data-theme="peony"] .peony-operation-row {
  grid-template-columns:
    35px
    minmax(0,1fr)
    auto
    8px;
}

[data-theme="peony"] .peony-operation-copy strong {
  font-size: 11px;
}

[data-theme="peony"] .peony-operation-copy small {
  font-size: 8px;
}

[data-theme="peony"] .peony-operation-amount {
  font-size: 10px;
}


/* Analytics feels more like part of the page */
[data-theme="peony"] .peony-analytics {
  padding:
    14px
    13px;

  border:
    1px solid
    rgba(255,210,220,.055);

  background:
    rgba(89,22,21,.30);
}

[data-theme="peony"]
.peony-analytics
.peony-section-heading h2 {
  font-size: 18px;
}

[data-theme="peony"]
.peony-analytics
.peony-section-heading small {
  font-size: 9px;
}


/* Categories same material language */
[data-theme="peony"]
.peony-category-panel {
  padding:
    14px
    13px;

  background:
    rgba(89,22,21,.30);

  border-color:
    rgba(255,210,220,.055);
}

[data-theme="peony"]
.peony-category-head h2 {
  font-size: 18px;
}


/* Nav lighter */
[data-theme="peony"] .nav-inner {
  padding:
    2px
    6px;

  border-radius: 21px;

  background:
    rgba(54,6,6,.92);
}

[data-theme="peony"] .nav-item {
  min-height: 51px;
}

[data-theme="peony"] .nav-item.active {
  text-shadow:
    0 0 12px
    rgba(202,199,106,.18);
}


/* Remove accidental decorative lines */
[data-theme="peony"]
.peony-operation-amount::before,
[data-theme="peony"]
.peony-operation-amount::after {
  content:none !important;
  display:none !important;
}


/* =========================================================
   PEONY — OPERATION ICONS FIX + SILHOUETTES
========================================================= */

[data-theme="peony"] .peony-operation-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 10px;
  align-items: center;
  column-gap: 12px;
}

[data-theme="peony"] .peony-operation-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(239, 131, 172, .96),
      rgba(226, 112, 156, .96)
    );

  box-shadow:
    inset 0 0 0 1px rgba(255, 212, 226, .16),
    0 6px 18px rgba(30, 0, 0, .10);

  color: #3d0c15;
  line-height: 0;
  overflow: hidden;
}

[data-theme="peony"] .peony-operation-icon svg {
  width: 21px;
  height: 21px;

  display: block;
}

[data-theme="peony"] .peony-operation-icon svg,
[data-theme="peony"] .peony-operation-icon svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-theme="peony"] .peony-operation-copy {
  min-width: 0;
}

[data-theme="peony"] .peony-operation-copy strong,
[data-theme="peony"] .peony-operation-copy small {
  display: block;
}

[data-theme="peony"] .peony-operation-copy strong {
  margin-bottom: 2px;
}

[data-theme="peony"] .peony-operation-amount {
  white-space: nowrap;
}

[data-theme="peony"] .peony-operation-arrow {
  align-self: center;
}

/* чуть разные подложки под разные типы иконок */
[data-theme="peony"] .peony-icon-shopping,
[data-theme="peony"] .peony-icon-gift {
  background:
    linear-gradient(
      180deg,
      rgba(247, 154, 188, .96),
      rgba(232, 121, 162, .96)
    );
}

[data-theme="peony"] .peony-icon-transport,
[data-theme="peony"] .peony-icon-home,
[data-theme="peony"] .peony-icon-briefcase {
  background:
    linear-gradient(
      180deg,
      rgba(221, 222, 135, .96),
      rgba(203, 205, 105, .96)
    );
}

[data-theme="peony"] .peony-icon-health,
[data-theme="peony"] .peony-icon-game,
[data-theme="peony"] .peony-icon-box,
[data-theme="peony"] .peony-icon-cigarette,
[data-theme="peony"] .peony-icon-card,
[data-theme="peony"] .peony-icon-return,
[data-theme="peony"] .peony-icon-food {
  background:
    linear-gradient(
      180deg,
      rgba(239, 131, 172, .96),
      rgba(226, 112, 156, .96)
    );
}



/* =========================================================
   PEONY LOCAL SOLID ICON SYSTEM
========================================================= */

[data-theme="peony"] .peony-local-icon {
  display: block;

  width: 21px;
  height: 21px;

  object-fit: contain;

  pointer-events: none;
  user-select: none;
}


/* Recent operations */

[data-theme="peony"] .peony-operation-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: none;

  width: 40px;
  height: 40px;

  padding: 9px;

  border-radius: 50%;

  line-height: 0;
}

[data-theme="peony"]
.peony-operation-icon
.peony-local-icon {
  width: 21px;
  height: 21px;
}


/* Peony category breakdown */

[data-theme="peony"]
.peony-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px;

  line-height: 0;
}

[data-theme="peony"]
.peony-category-icon
.peony-local-icon {
  width: 19px;
  height: 19px;
}


/*
 * Старые inline SVG правила больше не участвуют.
 * Оставляем их без удаления — harmless.
 */


/* Operation alignment */

[data-theme="peony"]
.peony-operation-row {
  grid-template-columns:
    40px
    minmax(0,1fr)
    auto
    8px;

  align-items: center;

  gap: 10px;
}



/* =========================================================
   PEONY SOLID FILE ICONS — FINAL
========================================================= */

[data-theme="peony"] .peony-local-icon {
  display: block !important;

  width: 20px !important;
  height: 20px !important;

  max-width: 20px !important;
  max-height: 20px !important;

  object-fit: contain;

  pointer-events: none;
  user-select: none;
}

[data-theme="peony"] .peony-operation-icon {
  box-sizing: border-box;

  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;

  padding: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: 50%;
}

[data-theme="peony"] .peony-operation-icon .peony-local-icon {
  width: 20px !important;
  height: 20px !important;
}

[data-theme="peony"] .peony-category-icon .peony-local-icon {
  width: 18px !important;
  height: 18px !important;
}


/* =========================================================
   PEONY — BRIGHTER CATEGORY ICON BACKGROUNDS
========================================================= */

[data-theme="peony"] .peony-category-icon {
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255, 170, 196, 0.42) 0%,
      rgba(233, 113, 156, 0.24) 38%,
      rgba(120, 18, 40, 0.38) 100%
    ) !important;

  border: 1px solid rgba(255, 174, 201, 0.28) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 215, 228, 0.18),
    0 8px 18px rgba(35, 0, 10, 0.18) !important;
}

/* чтобы сами иконки сидели чётко */
[data-theme="peony"] .peony-category-icon .peony-local-icon {
  width: 18px !important;
  height: 18px !important;
  opacity: 1 !important;
  filter: none !important;
}


/* =========================================================
   PEONY — CATEGORY COLORS
   EXACT REFERENCE DIRECTION
========================================================= */

/*
 * Reference principle:
 *
 * bright PINK / MOSS circle
 * dark silhouette inside
 * progress bar uses the same accent
 *
 * NO dark burgundy icon backgrounds.
 * NO gradients.
 * NO glow.
 */

[data-theme="peony"] .peony-category-icon {
  background: #ed809d !important;
  border: 0 !important;

  box-shadow: none !important;

  color: #3d0c15 !important;
}


/* alternating moss */

[data-theme="peony"]
.peony-category-row:nth-child(even)
.peony-category-icon {
  background: #cac76a !important;
}


/* icon itself */

[data-theme="peony"]
.peony-category-icon
.peony-local-icon {
  width: 18px !important;
  height: 18px !important;

  opacity: 1 !important;
  filter: none !important;
}


/* =========================================================
   CATEGORY METERS — SAME COLOR AS ICON
========================================================= */

[data-theme="peony"]
.peony-category-meter i {
  background: #ed809d !important;
}

[data-theme="peony"]
.peony-category-row:nth-child(even)
.peony-category-meter i {
  background: #cac76a !important;
}


/* =========================================================
   REMOVE OLD CATEGORY COLOR EFFECTS
========================================================= */

[data-theme="peony"]
.peony-category-icon::before,
[data-theme="peony"]
.peony-category-icon::after {
  content: none !important;
  display: none !important;
}


[data-theme="peony"] .peony-category-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;

  padding: 9px !important;

  border-radius: 50% !important;
}

[data-theme="peony"]
.peony-category-icon
.peony-local-icon {
  width: 20px !important;
  height: 20px !important;
}


/* =========================================================
   PEONY — ICON / CATEGORY COLOR SYSTEM V2
========================================================= */

/* ---------- TODAY / RECENT OPERATIONS ---------- */
/* Было: все кружки почти одинаковые.
   Нужно: чередование pink / moss как в референсе. */

[data-theme="peony"] .peony-operation-row .peony-operation-icon {
  background: #ED809D !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #3d0c15 !important;
}

[data-theme="peony"] .peony-operation-row:nth-child(even) .peony-operation-icon {
  background: #CAC76A !important;
}

/* ---------- OPERATIONS VIEW SVG ICONS ---------- */

[data-theme="peony"] .peony-expense-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

[data-theme="peony"] .peony-expense-copy {
  min-width: 0;
  flex: 1 1 auto;
}

[data-theme="peony"] .peony-expense-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 0;
  color: #3d0c15;
  border: 0;
  box-shadow: none;
}

[data-theme="peony"] .peony-expense-icon--pink {
  background: #ED809D;
}

[data-theme="peony"] .peony-expense-icon--moss {
  background: #CAC76A;
}

[data-theme="peony"] .peony-local-icon {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* если SVG вдруг наследует fill/stroke не так */
[data-theme="peony"] .peony-local-icon,
[data-theme="peony"] .peony-local-icon * {
  color: #3d0c15 !important;
}

/* ---------- CATEGORY BREAKDOWN ----------
   Кружок должен совпадать с цветом категории/полоски. */

[data-theme="peony"] .peony-category-row {
  --peony-row-accent: #ED809D;
}

[data-theme="peony"] .peony-category-row:nth-child(1) { --peony-row-accent: #ED809D; }
[data-theme="peony"] .peony-category-row:nth-child(2) { --peony-row-accent: #CAC76A; }
[data-theme="peony"] .peony-category-row:nth-child(3) { --peony-row-accent: #C94B78; }
[data-theme="peony"] .peony-category-row:nth-child(4) { --peony-row-accent: #D9D77A; }
[data-theme="peony"] .peony-category-row:nth-child(5) { --peony-row-accent: #E7B2C2; }
[data-theme="peony"] .peony-category-row:nth-child(6) { --peony-row-accent: #8C9447; }
[data-theme="peony"] .peony-category-row:nth-child(7) { --peony-row-accent: #B24A73; }
[data-theme="peony"] .peony-category-row:nth-child(8) { --peony-row-accent: #F0C7D3; }

[data-theme="peony"] .peony-category-icon {
  background: var(--peony-row-accent) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #3d0c15 !important;
}

[data-theme="peony"] .peony-category-meter i {
  background: var(--peony-row-accent) !important;
}

/* На всякий случай убираем старые псевдо-эффекты */
[data-theme="peony"] .peony-category-icon::before,
[data-theme="peony"] .peony-category-icon::after,
[data-theme="peony"] .peony-operation-icon::before,
[data-theme="peony"] .peony-operation-icon::after {
  content: none !important;
  display: none !important;
}



/* =========================================================
   PEONY — FULL OPERATIONS SVG ICONS
========================================================= */

[data-theme="peony"]
#expensesHistory
.history-expense {
  align-items: center;
}

[data-theme="peony"]
#expensesHistory
.peony-expense-left {
  display: flex;

  align-items: center;

  gap: 11px;

  min-width: 0;
}

[data-theme="peony"]
#expensesHistory
.peony-expense-copy {
  min-width: 0;
}

[data-theme="peony"]
#expensesHistory
.peony-expense-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex:
    0 0
    38px;

  width: 38px;
  height: 38px;

  padding: 9px;

  border-radius: 50%;

  overflow: hidden;

  box-sizing: border-box;

  box-shadow: none;
}

[data-theme="peony"]
#expensesHistory
.peony-expense-icon--pink {
  background:
    #ED809D !important;
}

[data-theme="peony"]
#expensesHistory
.peony-expense-icon--moss {
  background:
    #CAC76A !important;
}

[data-theme="peony"]
#expensesHistory
.peony-expense-icon
.peony-local-icon {
  display: block;

  width: 20px !important;
  height: 20px !important;

  object-fit: contain;
}

[data-theme="peony"]
#expensesHistory
.peony-expense-copy
.expense-name {
  margin: 0;

  color:
    var(--text);

  font-weight: 700;
}

[data-theme="peony"]
#expensesHistory
.peony-expense-copy
.expense-info {
  margin-top: 3px;
}



/* =========================================================
   PEONY V5 — REFERENCE PASS
========================================================= */


/* =========================================================
   HERO — FLAT BRASS MOSS LIKE REFERENCE
========================================================= */

[data-theme="peony"] .peony-balance-card {
  background: #CAC76A !important;

  box-shadow:
    0 14px 30px -24px
    rgba(25, 0, 0, .70) !important;
}


/* В референсе нет гигантских декоративных колец */

[data-theme="peony"] .peony-balance-card::before,
[data-theme="peony"] .peony-balance-card::after {
  content: none !important;
  display: none !important;
}


/* Left income cell */

[data-theme="peony"] .peony-income-mini {
  background:
    rgba(255,255,255,.17) !important;
}


/* Expense cell stays Peony Blush */

[data-theme="peony"] .peony-expense-mini {
  background:
    #ED809D !important;
}


/* =========================================================
   TODAY OPERATIONS
   EXACT PINK / MOSS ALTERNATION
========================================================= */

[data-theme="peony"]
#peonyTodayOperations
.peony-operation-row:nth-child(odd)
.peony-operation-icon {
  background:
    #ED809D !important;

  border: 0 !important;
  box-shadow: none !important;
}

[data-theme="peony"]
#peonyTodayOperations
.peony-operation-row:nth-child(even)
.peony-operation-icon {
  background:
    #CAC76A !important;

  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   ANALYTICS
   REMOVE HEAVY BURGUNDY OUTER CARD
========================================================= */

[data-theme="peony"] .peony-analytics {
  margin-top: 17px !important;

  padding:
    4px
    0
    0 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  overflow:
    visible !important;
}


/* heading like reference */

[data-theme="peony"]
.peony-analytics
.peony-section-heading {
  padding:
    0
    4px;

  margin-bottom:
    11px;
}


/* segmented control is floating, not another card */

[data-theme="peony"]
.peony-analytics
.peony-segmented {
  margin:
    0
    4px
    11px;

  width:
    calc(100% - 8px);

  padding:
    3px;

  border:
    0;

  border-radius:
    14px;

  background:
    rgba(49, 5, 8, .37);
}


/* Main blush analytics surface */

[data-theme="peony"] .peony-chart {
  margin:
    0;

  padding:
    13px
    10px
    8px;

  min-height:
    145px;

  border:
    0;

  border-radius:
    19px;

  background:
    #EFB0C1 !important;

  box-shadow:
    none !important;
}


/* Chart tooltip should still be dark */

[data-theme="peony"]
.peony-chart
.theme-chart-tooltip,
[data-theme="peony"]
.peony-chart
.chart-tooltip {
  background:
    #241C27 !important;

  color:
    #FFF !important;
}


/* hint under graph */

[data-theme="peony"] .peony-chart-hint {
  margin:
    8px
    0
    10px;

  color:
    rgba(233, 171, 186, .62);
}


/* ---------------------------------------------------------
   Four metrics become ONE compact information surface
--------------------------------------------------------- */

[data-theme="peony"] .peony-analytics-stats {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    0 !important;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255, 210, 220, .055);

  border-radius:
    17px;

  background:
    rgba(61, 7, 9, .23);
}

[data-theme="peony"]
.peony-analytics-stats > div {
  min-height:
    58px;

  padding:
    11px
    12px !important;

  border-radius:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;
}

[data-theme="peony"]
.peony-analytics-stats > div:nth-child(odd) {
  border-right:
    1px solid
    rgba(255, 210, 220, .045)
    !important;
}

[data-theme="peony"]
.peony-analytics-stats > div:nth-child(-n+2) {
  border-bottom:
    1px solid
    rgba(255, 210, 220, .045)
    !important;
}


/* =========================================================
   CATEGORIES
   REMOVE HEAVY OUTER CARD
========================================================= */

[data-theme="peony"] .peony-category-panel {
  margin-top:
    20px !important;

  padding:
    4px
    0
    8px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}

[data-theme="peony"]
.peony-category-panel
.peony-section-heading {
  padding:
    0
    4px;
}


/* =========================================================
   DONUT / ICON / PROGRESS — SAME EXACT COLOR
========================================================= */

/*
 * --peony-cat is now created by peony.js on the whole row.
 * This overrides ALL old nth-child experiments.
 */

[data-theme="peony"]
#peonyCategories
.peony-category-row
.peony-category-icon,

[data-theme="peony"]
#peonyCategories
.peony-category-row:nth-child(even)
.peony-category-icon,

[data-theme="peony"]
#peonyCategories
.peony-category-row:nth-child(odd)
.peony-category-icon {
  background:
    var(--peony-cat)
    !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


/* meter = same exact color */

[data-theme="peony"]
#peonyCategories
.peony-category-row
.peony-category-meter i,

[data-theme="peony"]
#peonyCategories
.peony-category-row:nth-child(even)
.peony-category-meter i,

[data-theme="peony"]
#peonyCategories
.peony-category-row:nth-child(odd)
.peony-category-meter i {
  background:
    var(--peony-cat)
    !important;
}


/* clean flat icon circles */

[data-theme="peony"]
#peonyCategories
.peony-category-icon {
  width:
    38px !important;

  height:
    38px !important;

  min-width:
    38px !important;

  padding:
    9px !important;

  border-radius:
    50% !important;
}


/* =========================================================
   LISTS — LESS DIVIDER NOISE
========================================================= */

[data-theme="peony"]
.peony-category-row {
  border-bottom:
    1px solid
    rgba(255, 220, 226, .035)
    !important;
}

[data-theme="peony"]
.peony-operation-row {
  border-bottom:
    1px solid
    rgba(255, 220, 226, .035)
    !important;
}


/* =========================================================
   BOTTOM NAV — FIVE POSITION REFERENCE LAYOUT
========================================================= */

[data-theme="peony"] .nav-inner {
  display:
    grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr))
    !important;

  align-items:
    center;

  gap:
    1px;

  padding:
    4px
    5px !important;

  border-radius:
    22px;

  background:
    rgba(53, 4, 7, .96)
    !important;
}


[data-theme="peony"] .nav-item {
  min-width:
    0;

  min-height:
    48px !important;

  padding:
    4px
    1px !important;

  font-size:
    9px !important;
}


/* reference-style central + */

.peony-nav-add {
  display:
    none;
}

[data-theme="peony"] .peony-nav-add {
  appearance:
    none;

  -webkit-appearance:
    none;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  justify-self:
    center;

  width:
    42px;

  height:
    42px;

  margin:
    0 auto;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    #ED809D;

  color:
    #461312;

  font:
    500
    31px/1
    Arial,
    sans-serif;

  box-shadow:
    0 8px 18px
    rgba(19, 0, 3, .18);

  transition:
    transform .12s ease,
    filter .12s ease;
}

[data-theme="peony"]
.peony-nav-add:active {
  transform:
    scale(.90);

  filter:
    brightness(.96);
}


/* =========================================================
   SMALL SCREEN TUNING
========================================================= */

@media (max-width: 390px) {

  [data-theme="peony"]
  .nav-item {
    font-size:
      8.5px !important;
  }

  [data-theme="peony"]
  .peony-nav-add {
    width:
      40px;

    height:
      40px;
  }

}



/* =========================================================
   PEONY — NEW EXPENSE SCREEN
========================================================= */

html.peony-add-open body {
  overflow: hidden !important;
}


.peony-add-overlay {
  display: none;

  position: fixed;
  inset: 0;

  z-index: 9000;

  overflow-y: auto;
  overscroll-behavior: contain;

  background: #461312;

  -webkit-overflow-scrolling: touch;
}


.peony-add-overlay.open {
  display: block;
}


.peony-add-page {
  width: 100%;
  max-width: 520px;

  min-height: 100%;

  margin: 0 auto;

  padding:
    max(14px, env(safe-area-inset-top))
    16px
    calc(
      22px +
      env(safe-area-inset-bottom)
    );

  color: #FFF0F3;

  background:
    linear-gradient(
      180deg,
      #461312,
      #3d0f0f
    );
}


/* HEADER */

.peony-add-header {
  display: grid;

  grid-template-columns:
    42px
    1fr
    42px;

  align-items: center;

  min-height: 48px;

  margin-bottom: 14px;
}


.peony-add-header strong {
  text-align: center;

  font-size: 15px;
  font-weight: 750;
}


.peony-add-back {
  appearance: none;
  -webkit-appearance: none;

  width: 40px;
  height: 40px;

  padding: 0;

  border: 0;

  background: transparent;

  color: #ED809D;

  font-size: 34px;
  line-height: 1;
}


/* AMOUNT */

.peony-add-amount-wrap {
  padding:
    13px
    5px
    18px;

  border-bottom:
    1px solid
    rgba(255,220,227,.06);
}


.peony-add-amount {
  appearance: none;

  display: block;

  width: 100%;

  padding: 0;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  color: #ED809D !important;

  font:
    800
    clamp(42px,13vw,64px)/1
    "Manrope",
    sans-serif;

  letter-spacing: -.055em;

  box-shadow: none !important;

  caret-color: #ED809D;
}


.peony-add-amount::placeholder {
  color:
    rgba(237,128,157,.34);
}


/* FIELDS */

.peony-add-fields {
  display: flex;
  flex-direction: column;

  gap: 8px;

  margin-top: 12px;
}


.peony-add-field {
  display: grid;

  grid-template-columns:
    28px
    auto
    minmax(0,1fr);

  align-items: center;

  gap: 8px;

  min-height: 48px;

  padding:
    8px
    13px;

  border:
    1px solid
    rgba(255,220,227,.055);

  border-radius: 13px;

  background:
    rgba(60,7,8,.29);
}


.peony-add-field-icon {
  color: #ED809D;

  font-size: 17px;
}


.peony-add-field-name {
  color: #FFF0F3;

  font-size: 11px;
  font-weight: 650;
}


.peony-add-field input {
  min-width: 0;

  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  background:
    transparent !important;

  color: #CA929E !important;

  font: inherit;
  font-size: 11px;

  text-align: right;

  box-shadow:
    none !important;
}


/* CATEGORY GRID */

.peony-add-category-section {
  margin-top: 18px;
}


.peony-add-section-title {
  margin:
    0
    2px
    10px;

  color: #FFF0F3;

  font-size: 12px;
  font-weight: 650;
}


.peony-add-category-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 8px;
}


.peony-add-category {
  appearance: none;
  -webkit-appearance: none;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;

  min-width: 0;
  min-height: 78px;

  padding:
    10px
    5px;

  border:
    2px solid
    transparent;

  border-radius: 13px;

  color: #3D0C15;

  font: inherit;

  transition:
    transform .12s ease,
    border-color .15s ease,
    filter .15s ease;
}


.peony-add-category.pink {
  background: #ED809D;
}


.peony-add-category.moss {
  background: #CAC76A;
}


.peony-add-category img {
  width: 22px;
  height: 22px;

  object-fit: contain;
}


.peony-add-category span {
  display: block;

  width: 100%;

  overflow: hidden;

  font-size: 9px;
  font-weight: 700;

  white-space: nowrap;
  text-overflow: ellipsis;

  text-align: center;
}


.peony-add-category.selected {
  border-color: #3D0C15;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.2);
}


.peony-add-category:active {
  transform:
    scale(.96);
}


/* SAVE */

.peony-add-save-wrap {
  position: sticky;

  bottom:
    calc(
      8px +
      env(safe-area-inset-bottom)
    );

  z-index: 4;

  padding-top: 18px;

  background:
    linear-gradient(
      180deg,
      transparent,
      #3d0f0f 38%
    );
}


.peony-add-save {
  appearance: none;
  -webkit-appearance: none;

  width: 100%;

  min-height: 49px;

  border:
    1px solid
    rgba(237,128,157,.17);

  border-radius: 15px;

  background:
    rgba(87,16,25,.90);

  color: #ED809D;

  font: inherit;

  font-size: 12px;
  font-weight: 700;

  box-shadow:
    none;
}


.peony-add-save:active {
  transform: scale(.985);
}


.peony-add-save:disabled {
  opacity: .55;
}


.peony-add-empty {
  grid-column:
    1 / -1;

  padding:
    20px;

  color: #CA929E;

  text-align: center;

  font-size: 11px;
}



/* =========================================================
   PEONY — NEW EXPENSE V2
   Reference pass
========================================================= */


/* ---------------------------------------------------------
   SOLID ICON MASK SYSTEM
--------------------------------------------------------- */

.peony-add-ui-icon,
.peony-add-category-icon {
  display: block;

  width: 20px;
  height: 20px;

  flex: none;

  background-color: currentColor;

  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.peony-add-header {
  margin-bottom: 8px;
}

.peony-add-back {
  display: flex;
  align-items: center;
  justify-content: center;

  color: #ED809D !important;
}

.peony-add-back .peony-add-ui-icon {
  width: 24px;
  height: 24px;
}


/* ---------------------------------------------------------
   AMOUNT
--------------------------------------------------------- */

.peony-add-amount-wrap {
  position: relative;

  padding:
    14px
    5px
    17px;
}

.peony-add-amount {
  -moz-appearance: textfield !important;
}

.peony-add-amount::-webkit-outer-spin-button,
.peony-add-amount::-webkit-inner-spin-button {
  -webkit-appearance: none !important;

  margin: 0 !important;
}

/* Chrome/Android autofill cleanup */

.peony-add-amount:focus {
  outline: none !important;

  box-shadow: none !important;
}


/* ---------------------------------------------------------
   DATE / NOTE ROWS
--------------------------------------------------------- */

.peony-add-field {
  min-height: 46px;

  grid-template-columns:
    24px
    auto
    minmax(0,1fr);

  padding:
    7px
    12px;

  border-radius: 12px;

  background:
    rgba(55, 5, 8, .25);
}

.peony-add-field-icon {
  color: #ED809D !important;

  width: 17px;
  height: 17px;
}

.peony-add-field-name {
  font-size: 10px;
}

.peony-add-field input {
  font-size: 10px;
}


/* native date button less visible */

.peony-add-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .45;

  filter:
    invert(78%)
    sepia(27%)
    saturate(1215%)
    hue-rotate(294deg)
    brightness(97%);
}


/* ---------------------------------------------------------
   CATEGORY GRID — LIKE REFERENCE
--------------------------------------------------------- */

.peony-add-category-section {
  margin-top: 17px;

  /*
   * Sticky save must never cover last row.
   */
  padding-bottom: 92px;
}

.peony-add-category-grid {
  gap: 8px;
}

.peony-add-category {
  position: relative;

  min-height: 78px;

  padding:
    11px
    5px
    9px;

  border:
    2px solid transparent !important;

  border-radius: 12px;

  /*
   * Reference:
   * unselected categories are Brass Moss.
   */
  background:
    #CAC76A !important;

  color:
    #3D0C15 !important;

  box-shadow:
    none !important;
}


/*
 * Ignore old pink/moss alternation on this screen.
 */

.peony-add-category.pink,
.peony-add-category.moss {
  background:
    #CAC76A !important;
}


.peony-add-category-icon {
  width: 23px;
  height: 23px;

  margin-bottom: 1px;

  color:
    #3D0C15;
}


.peony-add-category span:not(.peony-add-category-icon) {
  color:
    #3D0C15;

  font-size:
    9px;

  font-weight:
    700;
}


/* ---------------------------------------------------------
   SELECTED CATEGORY
   Dark tile + Peony pink icon/text
--------------------------------------------------------- */

.peony-add-category.selected {
  background:
    #461312 !important;

  border-color:
    #ED809D !important;

  color:
    #ED809D !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(237,128,157,.12)
    !important;
}

.peony-add-category.selected
.peony-add-category-icon {
  color:
    #ED809D !important;
}

.peony-add-category.selected
span:not(.peony-add-category-icon) {
  color:
    #ED809D !important;
}


/* ---------------------------------------------------------
   SAVE BUTTON
--------------------------------------------------------- */

.peony-add-save-wrap {
  bottom:
    calc(
      8px +
      env(safe-area-inset-bottom)
    );

  margin-top:
    -74px;

  padding:
    34px
    0
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(61,15,15,0),
      #3D0F0F 40%
    );
}

.peony-add-save {
  pointer-events:
    auto;

  min-height:
    47px;

  border:
    1px solid
    rgba(237,128,157,.18);

  border-radius:
    14px;

  background:
    #651421;

  color:
    #F095AD;

  font-size:
    11px;

  font-weight:
    700;
}


/* ---------------------------------------------------------
   SCREEN DENSITY
--------------------------------------------------------- */

@media (max-width: 390px) {

  .peony-add-page {
    padding-left:
      8px;

    padding-right:
      8px;
  }

  .peony-add-category-grid {
    gap:
      7px;
  }

  .peony-add-category {
    min-height:
      76px;
  }

}



/* =========================================================
   PEONY — ADD OPERATION: EXPENSE / INCOME
========================================================= */

.peony-add-type-switch {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 3px;

  margin:
    3px
    0
    12px;

  padding: 3px;

  border:
    1px solid
    rgba(255,220,227,.055);

  border-radius:
    13px;

  background:
    rgba(53,5,8,.35);
}


.peony-add-type-btn {
  appearance: none;
  -webkit-appearance: none;

  min-height:
    38px;

  padding:
    7px
    12px;

  border:
    0;

  border-radius:
    10px;

  background:
    transparent;

  color:
    #CA929E;

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    700;

  transition:
    transform .12s ease,
    color .15s ease,
    background .15s ease;
}


.peony-add-type-btn[data-peony-add-mode="expense"].active {
  background:
    #ED809D;

  color:
    #3D0C15;
}


.peony-add-type-btn[data-peony-add-mode="income"].active {
  background:
    #CAC76A;

  color:
    #3D0C15;
}


.peony-add-type-btn:active {
  transform:
    scale(.97);
}


/* =========================================================
   INCOME MODE
========================================================= */

.peony-add-overlay[data-mode="income"]
.peony-add-amount {
  color:
    #CAC76A !important;

  caret-color:
    #CAC76A !important;
}

.peony-add-overlay[data-mode="income"]
.peony-add-amount::placeholder {
  color:
    rgba(202,199,106,.34);
}


/* date / note icons */

.peony-add-overlay[data-mode="income"]
.peony-add-field-icon {
  color:
    #CAC76A !important;
}


/*
 * Expense:
 * unselected = moss
 * selected   = dark + pink
 *
 * Income:
 * unselected = pink
 * selected   = dark + moss
 */

.peony-add-overlay[data-mode="income"]
.peony-add-category,

.peony-add-overlay[data-mode="income"]
.peony-add-category.pink,

.peony-add-overlay[data-mode="income"]
.peony-add-category.moss {
  background:
    #ED809D !important;
}


.peony-add-overlay[data-mode="income"]
.peony-add-category.selected {
  background:
    #461312 !important;

  border-color:
    #CAC76A !important;

  color:
    #CAC76A !important;
}


.peony-add-overlay[data-mode="income"]
.peony-add-category.selected
.peony-add-category-icon {
  color:
    #CAC76A !important;
}


.peony-add-overlay[data-mode="income"]
.peony-add-category.selected
span:not(.peony-add-category-icon) {
  color:
    #CAC76A !important;
}


/* Save button follows operation type */

.peony-add-overlay[data-mode="income"]
.peony-add-save {
  border-color:
    rgba(202,199,106,.22);

  color:
    #CAC76A;
}



/* =========================================================
   PEONY — CUTE MICRO MOTION
========================================================= */

[data-theme="peony"] {
  --peony-spring:
    cubic-bezier(.22, 1.25, .38, 1);

  --peony-soft:
    cubic-bezier(.22, .8, .3, 1);
}


/* =========================================================
   PAGE ENTER
========================================================= */

[data-theme="peony"] #peonyOverview {
  animation:
    peony-page-in
    .38s
    var(--peony-soft)
    both;
}

@keyframes peony-page-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   GREETING
========================================================= */

[data-theme="peony"] .peony-hello {
  transform-origin: left bottom;

  animation:
    peony-hello
    .52s
    var(--peony-spring)
    both;
}

[data-theme="peony"] .peony-month {
  animation:
    peony-month-in
    .42s
    .08s
    var(--peony-soft)
    both;
}

@keyframes peony-hello {
  from {
    opacity: 0;
    transform:
      translateY(7px)
      rotate(-1deg)
      scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes peony-month-in {
  from {
    opacity: 0;
    transform: translateX(7px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   BALANCE CARD
========================================================= */

[data-theme="peony"] .peony-balance-card {
  transform-origin: center top;

  animation:
    peony-card-pop
    .52s
    .04s
    var(--peony-spring)
    both;

  transition:
    transform .16s ease,
    filter .16s ease;
}

[data-theme="peony"] .peony-balance-card:active {
  transform:
    scale(.992);
}

@keyframes peony-card-pop {
  0% {
    opacity: 0;
    transform:
      translateY(10px)
      scale(.97);
  }

  70% {
    opacity: 1;
    transform:
      translateY(-1px)
      scale(1.006);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}


/* balance number */

[data-theme="peony"] .peony-balance-value {
  animation:
    peony-number-in
    .5s
    .14s
    var(--peony-spring)
    both;
}

@keyframes peony-number-in {
  from {
    opacity: 0;
    transform:
      translateY(5px)
      scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* income / expense inside hero */

[data-theme="peony"] .peony-balance-mini {
  transition:
    transform .15s var(--peony-spring),
    filter .15s ease;
}

[data-theme="peony"] .peony-balance-mini:nth-child(1) {
  animation:
    peony-mini-pop
    .42s
    .19s
    var(--peony-spring)
    both;
}

[data-theme="peony"] .peony-balance-mini:nth-child(2) {
  animation:
    peony-mini-pop
    .42s
    .25s
    var(--peony-spring)
    both;
}

[data-theme="peony"] .peony-balance-mini:active {
  transform:
    scale(.965);
}

@keyframes peony-mini-pop {
  from {
    opacity: 0;
    transform:
      translateY(6px)
      scale(.92);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   TODAY / RECENT OPERATIONS
========================================================= */

[data-theme="peony"] .peony-recent-head {
  animation:
    peony-fade-up
    .32s
    .25s
    var(--peony-soft)
    both;
}

[data-theme="peony"] .peony-operation-row {
  transform-origin: left center;

  animation:
    peony-row-in
    .38s
    var(--peony-spring)
    both;

  transition:
    transform .14s var(--peony-spring),
    opacity .14s ease;
}

[data-theme="peony"] .peony-operation-row:nth-child(1) {
  animation-delay: .28s;
}

[data-theme="peony"] .peony-operation-row:nth-child(2) {
  animation-delay: .33s;
}

[data-theme="peony"] .peony-operation-row:nth-child(3) {
  animation-delay: .38s;
}

[data-theme="peony"] .peony-operation-row:nth-child(4) {
  animation-delay: .43s;
}

[data-theme="peony"] .peony-operation-row:active {
  transform:
    translateX(2px)
    scale(.985);
}

[data-theme="peony"] .peony-operation-row:active .peony-operation-icon {
  transform:
    rotate(-5deg)
    scale(.92);
}


/* icon itself */

[data-theme="peony"] .peony-operation-icon {
  transition:
    transform .18s var(--peony-spring),
    background .18s ease;
}

@keyframes peony-row-in {
  from {
    opacity: 0;
    transform:
      translateX(-7px)
      scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   ANALYTICS
========================================================= */

[data-theme="peony"] .peony-analytics {
  animation:
    peony-fade-up
    .42s
    .18s
    var(--peony-soft)
    both;
}

[data-theme="peony"] .peony-segmented button,
[data-theme="peony"] .peony-category-switch button {
  transition:
    transform .16s var(--peony-spring),
    background .18s ease,
    color .18s ease;
}

[data-theme="peony"] .peony-segmented button.active,
[data-theme="peony"] .peony-category-switch button.active {
  animation:
    peony-tab-pop
    .24s
    var(--peony-spring);
}

@keyframes peony-tab-pop {
  0% {
    transform: scale(.92);
  }

  70% {
    transform: scale(1.035);
  }

  100% {
    transform: scale(1);
  }
}


/* blush chart card */

[data-theme="peony"] .peony-chart {
  transform-origin: center bottom;

  animation:
    peony-chart-in
    .52s
    .22s
    var(--peony-spring)
    both;
}

@keyframes peony-chart-in {
  from {
    opacity: 0;
    transform:
      translateY(8px)
      scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* Bars */

[data-theme="peony"] .peony-chart .theme-bar-stick {
  transform-origin:
    center bottom;

  animation:
    peony-bar-grow
    .55s
    var(--peony-spring)
    both;
}

[data-theme="peony"] .peony-chart .theme-bar-item:nth-child(3n+1) .theme-bar-stick {
  animation-delay: .02s;
}

[data-theme="peony"] .peony-chart .theme-bar-item:nth-child(3n+2) .theme-bar-stick {
  animation-delay: .06s;
}

[data-theme="peony"] .peony-chart .theme-bar-item:nth-child(3n) .theme-bar-stick {
  animation-delay: .10s;
}

@keyframes peony-bar-grow {
  from {
    opacity: .2;
    transform: scaleY(.08);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}


/* analytics stats */

[data-theme="peony"] .peony-analytics-stats {
  animation:
    peony-fade-up
    .4s
    .31s
    var(--peony-soft)
    both;
}


/* =========================================================
   DONUT
========================================================= */

[data-theme="peony"] .peony-donut {
  transform-origin: center;

  animation:
    peony-donut-pop
    .62s
    .12s
    var(--peony-spring)
    both;

  transition:
    transform .2s var(--peony-spring);
}

[data-theme="peony"] .peony-donut:active {
  transform:
    scale(.97)
    rotate(-2deg);
}

@keyframes peony-donut-pop {
  0% {
    opacity: 0;
    transform:
      rotate(-12deg)
      scale(.82);
  }

  72% {
    opacity: 1;
    transform:
      rotate(1.5deg)
      scale(1.025);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   CATEGORY LIST
========================================================= */

[data-theme="peony"] .peony-category-row {
  animation:
    peony-category-in
    .36s
    var(--peony-spring)
    both;

  transition:
    transform .14s var(--peony-spring);
}

[data-theme="peony"] .peony-category-row:nth-child(1) {
  animation-delay: .16s;
}

[data-theme="peony"] .peony-category-row:nth-child(2) {
  animation-delay: .20s;
}

[data-theme="peony"] .peony-category-row:nth-child(3) {
  animation-delay: .24s;
}

[data-theme="peony"] .peony-category-row:nth-child(4) {
  animation-delay: .28s;
}

[data-theme="peony"] .peony-category-row:nth-child(5) {
  animation-delay: .32s;
}

[data-theme="peony"] .peony-category-row:nth-child(6) {
  animation-delay: .36s;
}

[data-theme="peony"] .peony-category-row:nth-child(7) {
  animation-delay: .40s;
}

[data-theme="peony"] .peony-category-row:active {
  transform:
    translateX(2px);
}

@keyframes peony-category-in {
  from {
    opacity: 0;
    transform:
      translateY(6px)
      scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* category icon spring */

[data-theme="peony"] .peony-category-icon {
  transition:
    transform .18s var(--peony-spring);
}

[data-theme="peony"] .peony-category-row:active .peony-category-icon {
  transform:
    rotate(-4deg)
    scale(.90);
}


/* progress meters */

[data-theme="peony"] .peony-category-meter i {
  transform-origin:
    left center;

  animation:
    peony-meter-grow
    .58s
    .12s
    var(--peony-soft)
    both;
}

@keyframes peony-meter-grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}


/* =========================================================
   BOTTOM NAV
========================================================= */

[data-theme="peony"] .nav-item {
  transition:
    transform .16s var(--peony-spring),
    color .18s ease;
}

[data-theme="peony"] .nav-item:active {
  transform:
    translateY(2px)
    scale(.91);
}

[data-theme="peony"] .nav-item.active {
  animation:
    peony-nav-pop
    .26s
    var(--peony-spring);
}

@keyframes peony-nav-pop {
  0% {
    transform:
      translateY(2px)
      scale(.88);
  }

  70% {
    transform:
      translateY(-1px)
      scale(1.045);
  }

  100% {
    transform: none;
  }
}


/* =========================================================
   CENTRAL +
========================================================= */

[data-theme="peony"] .peony-nav-add {
  transform-origin: center;

  animation:
    peony-plus-breathe
    4.2s
    1.5s
    ease-in-out
    infinite;

  transition:
    transform .16s var(--peony-spring),
    box-shadow .18s ease;
}

[data-theme="peony"] .peony-nav-add:active {
  animation: none;

  transform:
    scale(.84)
    rotate(-4deg);
}

@keyframes peony-plus-breathe {
  0%,
  82%,
  100% {
    transform: scale(1);

    box-shadow:
      0 7px 18px
      rgba(20,0,4,.18);
  }

  88% {
    transform: scale(1.055);

    box-shadow:
      0 7px 22px
      rgba(237,128,157,.25);
  }

  94% {
    transform: scale(.99);

    box-shadow:
      0 7px 18px
      rgba(20,0,4,.18);
  }
}


/* =========================================================
   NEW OPERATION SCREEN
========================================================= */

.peony-add-overlay.open .peony-add-page {
  animation:
    peony-sheet-rise
    .38s
    var(--peony-soft)
    both;
}

@keyframes peony-sheet-rise {
  from {
    opacity: 0;
    transform:
      translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* amount */

.peony-add-overlay.open .peony-add-amount-wrap {
  animation:
    peony-fade-up
    .34s
    .05s
    var(--peony-soft)
    both;
}


/* operation type switch */

.peony-add-type-btn.active {
  animation:
    peony-tab-pop
    .25s
    var(--peony-spring);
}


/* category cards */

.peony-add-category {
  transition:
    transform .17s var(--peony-spring),
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.peony-add-category:active {
  transform:
    scale(.91)
    rotate(-1deg);
}

.peony-add-category.selected {
  animation:
    peony-category-select
    .3s
    var(--peony-spring);
}

@keyframes peony-category-select {
  0% {
    transform: scale(.92);
  }

  68% {
    transform:
      scale(1.045)
      rotate(.5deg);
  }

  100% {
    transform: none;
  }
}


/* category grid entrance */

.peony-add-category:nth-child(1) {
  animation-delay: .03s;
}

.peony-add-category:nth-child(2) {
  animation-delay: .06s;
}

.peony-add-category:nth-child(3) {
  animation-delay: .09s;
}

.peony-add-category:nth-child(4) {
  animation-delay: .12s;
}

.peony-add-category:nth-child(5) {
  animation-delay: .15s;
}

.peony-add-category:nth-child(6) {
  animation-delay: .18s;
}


/* save */

.peony-add-save {
  transition:
    transform .16s var(--peony-spring),
    filter .16s ease;
}

.peony-add-save:active {
  transform:
    scale(.965);
}


/* =========================================================
   GENERIC HELPER
========================================================= */

@keyframes peony-fade-up {
  from {
    opacity: 0;
    transform:
      translateY(7px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  [data-theme="peony"] *,
  [data-theme="peony"] *::before,
  [data-theme="peony"] *::after,
  .peony-add-overlay *,
  .peony-add-overlay *::before,
  .peony-add-overlay *::after {
    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;

    scroll-behavior:
      auto !important;
  }

}



/* =========================================================
   PEONY — CHART TOOLTIP FIX
========================================================= */

[data-theme="peony"] .peony-chart {
  position: relative;

  /*
   * Tooltip can extend above bars.
   */
  overflow: visible !important;
}


[data-theme="peony"]
.peony-chart
.themed-chart {
  position: relative;

  overflow: visible !important;
}


[data-theme="peony"]
.peony-chart
.line-chart-tooltip {
  display: block;

  z-index: 30 !important;

  background:
    #241C27 !important;

  border:
    1px solid
    rgba(255,255,255,.08)
    !important;

  color:
    #FFF !important;

  box-shadow:
    0 10px 28px
    rgba(36, 10, 20, .28)
    !important;

  visibility:
    visible;
}


[data-theme="peony"]
.peony-chart
.line-chart-tooltip.show {
  opacity:
    1 !important;

  visibility:
    visible !important;
}


[data-theme="peony"]
.peony-chart
.line-chart-tooltip
.tooltip-date {
  color:
    #D99AAA !important;
}


[data-theme="peony"]
.peony-chart
.line-chart-tooltip
.tooltip-amount {
  color:
    #FFF !important;
}


/* =========================================================
   PEONY — CHART TOOLTIP COLOR
========================================================= */

[data-theme="peony"]
.peony-chart
.line-chart-tooltip,

[data-theme="peony"]
.peony-chart
.theme-chart-tooltip,

[data-theme="peony"]
.peony-chart
.chart-tooltip {
  background:
    #3A0F12 !important;

  border:
    1px solid
    rgba(237,128,157,.22)
    !important;

  color:
    #FFF0F3 !important;

  box-shadow:
    0 12px 30px
    rgba(60, 8, 18, .34)
    !important;
}


[data-theme="peony"]
.peony-chart
.line-chart-tooltip
.tooltip-date,

[data-theme="peony"]
.peony-chart
.theme-chart-tooltip
.tooltip-date,

[data-theme="peony"]
.peony-chart
.chart-tooltip
.tooltip-date {
  color:
    #ED809D !important;
}


[data-theme="peony"]
.peony-chart
.line-chart-tooltip
.tooltip-amount,

[data-theme="peony"]
.peony-chart
.theme-chart-tooltip
.tooltip-amount,

[data-theme="peony"]
.peony-chart
.chart-tooltip
.tooltip-amount {
  color:
    #FFF0F3 !important;
}



/* =========================================================
   PEONY — THEME PICKER DASHBOARD PREVIEW
========================================================= */

.theme-preview-peony {
  position: relative !important;

  overflow: hidden !important;

  padding: 5px !important;

  border:
    1px solid
    rgba(237,128,157,.72)
    !important;

  border-radius:
    12px !important;

  background:
    #461312 !important;

  box-shadow:
    inset 0 0 0 2px #461312,
    inset 0 0 0 3px rgba(237,128,157,.28),
    0 5px 12px rgba(40,0,8,.14)
    !important;

  color:
    #fff0f3;

  isolation:
    isolate;
}


/* Kill old primitive Peony preview */

.theme-preview-peony::before,
.theme-preview-peony::after {
  content:
    none !important;

  display:
    none !important;
}


/* everything inside is decorative */

.theme-preview-peony * {
  box-sizing:
    border-box;

  pointer-events:
    none;
}


/* =========================================================
   FRAME
========================================================= */

.peony-preview-frame {
  display:
    grid;

  grid-template-rows:
    9px
    minmax(31px,1fr)
    minmax(19px,.72fr)
    11px;

  gap:
    3px;

  width:
    100%;

  height:
    100%;

  min-height:
    70px;

  padding:
    4px;

  border:
    1px solid
    rgba(237,128,157,.22);

  border-radius:
    8px;

  background:
    linear-gradient(
      150deg,
      #531516,
      #3f0e10
    );
}


/* =========================================================
   TOP
========================================================= */

.peony-preview-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0
    2px;
}


/* tiny Peony mark */

.peony-preview-flower {
  position:
    relative;

  width:
    9px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #ED809D;

  transform:
    rotate(-10deg);
}


.peony-preview-flower::before {
  content:
    "";

  position:
    absolute;

  width:
    5px;

  height:
    5px;

  right:
    -3px;

  top:
    -3px;

  border-radius:
    50%;

  background:
    #ED809D;
}


.peony-preview-flower::after {
  content:
    "";

  position:
    absolute;

  width:
    7px;

  height:
    3px;

  left:
    1px;

  bottom:
    -4px;

  border:
    2px solid
    #ED809D;

  border-radius:
    50%;

  background:
    transparent;
}


/* three tiny dots */

.peony-preview-dots {
  display:
    flex;

  gap:
    2px;
}


.peony-preview-dots i {
  display:
    block;

  width:
    3px;

  height:
    3px;

  border-radius:
    50%;

  background:
    #ED809D;
}


/* =========================================================
   BALANCE
========================================================= */

.peony-preview-balance {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

  padding:
    4px
    6px;

  border-radius:
    7px;

  background:
    #CAC76A;
}


.peony-preview-balance::after {
  content:
    "";

  position:
    absolute;

  width:
    28px;

  height:
    28px;

  right:
    -8px;

  top:
    -8px;

  border:
    3px solid
    rgba(70,19,18,.08);

  border-radius:
    50%;
}


.peony-preview-balance-copy {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  min-width:
    0;

  color:
    #461312;
}


.peony-preview-balance-copy small {
  font-size:
    4px;

  font-weight:
    700;

  line-height:
    1;
}


.peony-preview-balance-copy strong {
  margin-top:
    2px;

  font-size:
    8px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -.04em;

  white-space:
    nowrap;
}


.peony-preview-balance-copy em {
  margin-top:
    2px;

  font-size:
    3.5px;

  font-style:
    normal;

  font-weight:
    700;

  opacity:
    .68;
}


/* =========================================================
   MINI DASHBOARD
========================================================= */

.peony-preview-dashboard {
  display:
    grid;

  grid-template-columns:
    1fr
    27px;

  align-items:
    center;

  gap:
    4px;

  min-height:
    0;
}


/* tiny operation rows */

.peony-preview-rows {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.peony-preview-rows > span {
  display:
    grid;

  grid-template-columns:
    6px
    1fr;

  align-items:
    center;

  gap:
    3px;
}


.peony-preview-rows i {
  display:
    block;

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;
}


.peony-preview-rows i.pink {
  background:
    #ED809D;
}


.peony-preview-rows i.moss {
  background:
    #CAC76A;
}


.peony-preview-rows b {
  display:
    block;

  width:
    100%;

  height:
    2px;

  border-radius:
    999px;

  background:
    rgba(255,240,243,.32);
}


/* =========================================================
   MINI DONUT
========================================================= */

.peony-preview-donut {
  position:
    relative;

  display:
    grid;

  place-items:
    center;

  width:
    25px;

  height:
    25px;

  border-radius:
    50%;

  background:
    conic-gradient(
      #ED809D 0 34%,
      #CAC76A 34% 61%,
      #8F3049 61% 78%,
      #E9A8BA 78% 100%
    );
}


.peony-preview-donut > span {
  display:
    block;

  width:
    13px;

  height:
    13px;

  border-radius:
    50%;

  background:
    #461312;
}


/* =========================================================
   MINI NAV
========================================================= */

.peony-preview-nav {
  display:
    grid;

  grid-template-columns:
    repeat(5,1fr);

  align-items:
    center;

  justify-items:
    center;

  height:
    11px;

  padding:
    1px
    3px;

  border-radius:
    5px;

  background:
    rgba(44,4,7,.72);
}


.peony-preview-nav i {
  display:
    block;

  width:
    4px;

  height:
    4px;

  border:
    1px solid
    #ED809D;

  border-radius:
    2px;

  opacity:
    .82;
}


.peony-preview-nav i:first-child {
  border-color:
    #CAC76A;

  background:
    #CAC76A;
}


.peony-preview-nav b {
  display:
    grid;

  place-items:
    center;

  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

  background:
    #ED809D;

  color:
    #461312;

  font:
    900
    8px/1
    Arial,
    sans-serif;
}


/* =========================================================
   PICKER INTERACTION
========================================================= */

.theme-option[data-theme="peony"]
.theme-preview-peony {
  transition:
    transform .22s
    cubic-bezier(.22,1.25,.38,1),
    box-shadow .2s ease,
    filter .2s ease;
}


.theme-option[data-theme="peony"]:active
.theme-preview-peony {
  transform:
    scale(.96);
}


.theme-option[data-theme="peony"].active
.theme-preview-peony {
  box-shadow:
    inset 0 0 0 2px #461312,
    inset 0 0 0 3px rgba(237,128,157,.52),
    0 0 0 1px rgba(237,128,157,.18),
    0 7px 17px rgba(237,128,157,.16)
    !important;
}


.theme-option[data-theme="peony"].active
.peony-preview-balance {
  animation:
    peony-preview-pulse
    3.4s
    ease-in-out
    infinite;
}


@keyframes peony-preview-pulse {

  0%,
  86%,
  100% {
    filter:
      brightness(1);
  }

  92% {
    filter:
      brightness(1.06);
  }

}