/* qPokoy appearance/background styles.
   Static presentation moved from js/accent.js; background selection and custom-image data stay in JS. */
body.qp-bg-standard{
  background:
    radial-gradient(78% 58% at -8% 76%,rgba(47,70,99,.30) 0 24%,transparent 55%),
    radial-gradient(84% 60% at 108% 24%,rgba(46,69,98,.28) 0 22%,transparent 54%),
    radial-gradient(118% 84% at 50% -22%,rgba(72,99,135,.30) 0 18%,rgba(32,48,70,.14) 35%,transparent 54%),
    linear-gradient(145deg,#05080e 0%,#09111c 42%,#070c14 72%,#04070c 100%) fixed !important;
}
body.qp-bg-off{background:var(--bg) !important;}
body.qp-bg-standard>.app,body.qp-bg-off>.app{background:transparent !important;}
#qpCustomBackgroundLayer{position:fixed;inset:0;z-index:0;display:none;pointer-events:none;background-color:#070b12;background-position:center center;background-size:cover;background-repeat:no-repeat;}
body.qp-bg-custom{background:#070b12 !important;}
body.qp-bg-custom #qpCustomBackgroundLayer{display:block;}
body.qp-bg-custom>.app{position:relative;z-index:1;background:transparent !important;}

.qp-background-settings{display:block !important;margin-top:16px;}
.qp-background-settings>.settings-title{display:block !important;position:static !important;width:auto !important;margin:0 0 12px !important;order:-999 !important;text-align:left !important;}
.qp-background-help{position:relative;display:inline-flex;align-items:center;}
.qp-background-custom-wrap>.qp-background-help{position:absolute;z-index:6;left:calc(100% + 8px);top:0;transform:none;}
.qp-background-help-btn{width:28px !important;min-width:28px !important;max-width:28px !important;height:28px !important;min-height:28px !important;max-height:28px !important;padding:0 !important;display:grid !important;place-items:center;border:1px solid color-mix(in srgb,var(--text-muted) 55%,transparent);border-radius:8px;background:transparent;color:var(--text-muted);font:inherit;font-size:12px;font-weight:700;line-height:1;cursor:pointer;box-sizing:border-box;}
.qp-background-help-btn:hover,.qp-background-help-btn:focus-visible{color:var(--text);border-color:color-mix(in srgb,var(--text) 65%,transparent);outline:none;}
.qp-background-help-tip{position:absolute;z-index:20;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:min(280px,72vw);padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--panel);color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.28);font-size:12px;font-weight:400;line-height:1.35;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility .12s ease;}
.qp-background-help:hover .qp-background-help-tip,
.qp-background-help:focus-within .qp-background-help-tip,
.qp-background-help.open .qp-background-help-tip{opacity:1;visibility:visible;}
.qp-background-options{display:grid;grid-template-columns:repeat(3,170px);gap:12px;justify-content:start;align-items:start;max-width:100%;margin-top:0;}
.qp-background-option{display:flex !important;flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important;width:170px !important;min-width:0 !important;height:auto !important;padding:7px !important;border:1px solid var(--border);border-radius:12px;background:var(--panel-muted);color:var(--text);cursor:pointer;text-align:center !important;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;}
.qp-background-option:hover{border-color:color-mix(in srgb,var(--primary) 55%,var(--border));}
.qp-background-option.active{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 22%,transparent);}
.qp-background-custom-wrap{position:relative;width:170px;min-width:0;}
.qp-background-custom-wrap>.qp-background-option{width:100% !important;}
.qp-background-custom-caption{position:absolute;z-index:4;left:7px;right:7px;bottom:7px;text-align:center;pointer-events:none;font-size:12px;font-weight:600;line-height:1.3;color:var(--text);}
.qp-background-remove{position:absolute !important;left:calc(50% + 30px);top:50%;transform:translateY(-50%) !important;width:22px !important;min-width:22px !important;height:22px !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;outline:none !important;color:rgba(239,68,68,.72) !important;font-family:inherit !important;font-size:19px !important;font-weight:500 !important;line-height:1 !important;cursor:pointer !important;pointer-events:auto !important;-webkit-tap-highlight-color:transparent !important;}
.qp-background-remove:hover,
.qp-background-remove:active,
.qp-background-remove:focus,
.qp-background-remove:focus-visible{left:calc(50% + 30px) !important;top:50% !important;transform:translateY(-50%) !important;width:22px !important;min-width:22px !important;height:22px !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;outline:none !important;color:rgba(239,68,68,.95) !important;}
.qp-background-preview{display:block;position:relative;width:100%;height:88px;margin:0 0 7px;overflow:hidden;border-radius:8px;border:1px solid rgba(148,163,184,.18);background:#0b1018;}
.qp-background-preview-standard{background:radial-gradient(90% 85% at -5% 95%,rgba(67,95,132,.75) 0 20%,transparent 70%),radial-gradient(85% 85% at 105% 0%,rgba(72,99,135,.70) 0 18%,transparent 70%),linear-gradient(145deg,#05080e 0%,#132238 52%,#05080e 100%);}
.qp-background-preview-off{background:#0b1018;}
.qp-background-preview-custom{display:grid;place-items:center;background-position:center;background-size:cover;background-repeat:no-repeat;}
.qp-background-preview-custom b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(15,23,42,.74);border:1px solid rgba(203,213,225,.36);font-size:19px;font-weight:400;line-height:1;}
.qp-background-option.has-image .qp-background-preview-custom b{opacity:0;}
.qp-background-option>span:last-child{display:block !important;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;line-height:1.3;text-align:center !important;}
.qp-background-status{min-height:0;margin-top:5px;color:var(--text-muted);font-size:12px;}
.qp-background-status:empty{display:none;}
.qp-background-status.error{color:var(--danger);}
@media (max-width:900px) and (hover:hover) and (pointer:fine){
  .qp-background-custom-wrap>.qp-background-help{left:auto;right:4px;}
  .qp-background-help-tip{left:auto;right:0;transform:none;width:min(230px,72vw);}
}
@media (max-width:700px){
  .qp-background-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .qp-background-option{width:auto !important;padding:5px !important;border-radius:10px;}
  .qp-background-custom-wrap{width:auto;}
  .qp-background-custom-wrap>.qp-background-help{left:auto;right:4px;top:0;}
  .qp-background-help-btn{width:26px !important;min-width:26px !important;max-width:26px !important;height:26px !important;min-height:26px !important;max-height:26px !important;}
  .qp-background-custom-caption{left:5px;right:5px;bottom:5px;font-size:10px;}
  .qp-background-remove{left:calc(50% + 25px) !important;width:22px !important;min-width:22px !important;height:22px !important;font-size:19px !important;}
  .qp-background-remove:hover,
  .qp-background-remove:active,
  .qp-background-remove:focus,
  .qp-background-remove:focus-visible{left:calc(50% + 25px) !important;}
  .qp-background-preview{height:64px;margin-bottom:6px;border-radius:7px;}
  .qp-background-option>span:last-child{font-size:10px;}
}

/* Keep the settings card surface neutral when the interface accent changes. */
#incomeAnalytics .analytics-settings-host #settings.analytics-inline-settings > .settings-card{
  background:var(--panel) !important;
}

/* Mobile category add button: keep exactly one explicit SVG plus. */
@media (max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #incomeForm .category-popup-create-btn{
    overflow:hidden !important;
    font-size:0 !important;
    line-height:0 !important;
    text-shadow:none !important;
    background-image:none !important;
  }
  #incomeForm .category-popup-create-btn::before,
  #incomeForm .category-popup-create-btn::after{
    content:none !important;
    display:none !important;
  }
  #incomeForm .category-popup-create-btn > svg{
    display:block !important;
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 0 18px !important;
  }
}

/* Subtle depth for the dashboard without changing layout, icons or typography. */
#income .income-top,
#income .income-analytics,
#income .income-form{
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--panel) 97%,white 3%),
      color-mix(in srgb,var(--panel) 98%,black 2%)) !important;
  border-color:color-mix(in srgb,var(--border) 88%,white 12%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 24px rgba(0,0,0,.14) !important;
}

#income .analytics-card,
#income .analytics-panel,
#income .monthly-summary-card,
#income .monthly-total-card{
  border-color:color-mix(in srgb,var(--border) 92%,white 8%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 4px 12px rgba(0,0,0,.09);
}

/* Settings polish after dashboard depth: avoid a dark strip between tabs and content. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-settings-open .analytics-settings-host{
    background:transparent !important;
  }
}

/* The data-card accent bubble is decorative and must not overlap destructive actions. */
#settings #qpDataCard::before{
  content:none !important;
  display:none !important;
}

/* Desktop month cards: match the year-card decorative bubble exactly. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly .monthly-summary-card::after{
    right:-54px !important;
    bottom:-76px !important;
    width:150px !important;
    height:150px !important;
    opacity:1 !important;
  }
}

/* Add-income text fields follow the selected interface accent while focused. */
#income #incomeForm .form-grid input:focus,
#income #incomeForm .form-grid input:focus-visible{
  border-color:var(--primary) !important;
  outline:none !important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 34%,transparent) !important;
}

/* Service-page inspired shell for the main statistics window only. */
#income #incomeAnalytics:not(.is-settings-open){
  background:
    radial-gradient(90% 130% at 100% 0,
      color-mix(in srgb,var(--primary) 10%,transparent),
      transparent 58%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--panel) 88%,#173253 12%),
      color-mix(in srgb,var(--panel) 94%,#07111e 6%)) !important;
  border-color:color-mix(in srgb,var(--primary) 22%,var(--border)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 18px 44px rgba(0,0,0,.22) !important;
}

/* Quiet inner statistics surfaces: depth comes from tone; semantic color stays in icons, badges and bubbles. */
#income #incomeAnalytics:not(.is-settings-open) .analytics-card,
#income #incomeAnalytics:not(.is-settings-open) .annual-total-card,
#income #incomeAnalytics:not(.is-settings-open) .analytics-category-panel,
#income #incomeAnalytics:not(.is-settings-open) .monthly-summary-card,
#income #incomeAnalytics:not(.is-settings-open) .monthly-total-card,
#income #incomeAnalytics:not(.is-settings-open) .monthly-category-card{
  background:
    linear-gradient(150deg,
      color-mix(in srgb,var(--panel) 78%,#0b1727 22%),
      color-mix(in srgb,var(--panel) 88%,#070e18 12%)) !important;
  border-color:color-mix(in srgb,var(--border) 84%,#7da9df 16%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 5px 14px rgba(0,0,0,.10) !important;
}

#income #incomeAnalytics:not(.is-settings-open) .analytics-category-panel:hover,
#income #incomeAnalytics:not(.is-settings-open) .monthly-category-card:hover{
  background:
    linear-gradient(150deg,
      color-mix(in srgb,var(--panel) 80%,#0d1b2d 20%),
      color-mix(in srgb,var(--panel) 89%,#08111d 11%)) !important;
  border-color:color-mix(in srgb,var(--border) 70%,#86b4ec 30%) !important;
}

/* Service-style top controls: one calm glass system for Month/Year and Settings. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income #incomeAnalytics .analytics-mode-tabs{
    padding:3px !important;
    border:1px solid color-mix(in srgb,var(--border) 78%,#7da9df 22%) !important;
    border-radius:12px !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb,var(--panel) 76%,#10233b 24%),
        color-mix(in srgb,var(--panel) 88%,#08111d 12%)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 5px 14px rgba(0,0,0,.10) !important;
  }

  #income #incomeAnalytics .analytics-mode-tab{
    border:1px solid transparent !important;
    border-radius:9px !important;
    background:transparent !important;
    color:color-mix(in srgb,var(--text-muted) 92%,white 8%) !important;
    box-shadow:none !important;
    transition:color .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease !important;
  }

  #income #incomeAnalytics .analytics-mode-tab:hover:not(.active){
    color:var(--text) !important;
    background:color-mix(in srgb,var(--primary) 6%,transparent) !important;
  }

  #income #incomeAnalytics .analytics-mode-tab.active{
    color:var(--text) !important;
    border-color:color-mix(in srgb,var(--primary) 48%,var(--border)) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb,var(--primary) 14%,var(--panel-muted)),
        color-mix(in srgb,var(--primary) 8%,var(--panel))) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 4px 12px color-mix(in srgb,var(--primary) 10%,transparent) !important;
  }

  #income #incomeAnalytics .analytics-settings-toggle{
    border-color:color-mix(in srgb,var(--border) 78%,#7da9df 22%) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb,var(--panel) 76%,#10233b 24%),
        color-mix(in srgb,var(--panel) 88%,#08111d 12%)) !important;
    color:color-mix(in srgb,var(--text-muted) 92%,white 8%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 5px 14px rgba(0,0,0,.10) !important;
    transition:color .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease !important;
  }

  #income #incomeAnalytics .analytics-settings-toggle:hover,
  #income #incomeAnalytics .analytics-settings-toggle.is-active{
    color:var(--text) !important;
    border-color:color-mix(in srgb,var(--primary) 48%,var(--border)) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb,var(--primary) 13%,var(--panel-muted)),
        color-mix(in srgb,var(--primary) 7%,var(--panel))) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 4px 12px color-mix(in srgb,var(--primary) 10%,transparent) !important;
    transform:none !important;
  }
}

/* Service-page glass depth: let the site background subtly show through analytics layers. */
#income #incomeAnalytics:not(.is-settings-open){
  background:
    radial-gradient(90% 130% at 100% 0,
      color-mix(in srgb,var(--primary) 10%,transparent),
      transparent 58%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--panel) 92%,transparent),
      color-mix(in srgb,#07111e 94%,transparent)) !important;
}

#income #incomeAnalytics:not(.is-settings-open) .analytics-card,
#income #incomeAnalytics:not(.is-settings-open) .annual-total-card,
#income #incomeAnalytics:not(.is-settings-open) .analytics-category-panel,
#income #incomeAnalytics:not(.is-settings-open) .monthly-summary-card,
#income #incomeAnalytics:not(.is-settings-open) .monthly-total-card,
#income #incomeAnalytics:not(.is-settings-open) .monthly-category-card{
  background:
    linear-gradient(150deg,
      color-mix(in srgb,#0b1727 82%,transparent),
      color-mix(in srgb,#070e18 88%,transparent)) !important;
}

#income #incomeAnalytics:not(.is-settings-open) .analytics-category-panel:hover,
#income #incomeAnalytics:not(.is-settings-open) .monthly-category-card:hover{
  background:
    linear-gradient(150deg,
      color-mix(in srgb,#0d1b2d 84%,transparent),
      color-mix(in srgb,#08111d 90%,transparent)) !important;
}

/* Service-style glass polish for the top income shell and its primary controls. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-top{
    background:
      radial-gradient(92% 135% at 100% 0,
        color-mix(in srgb,var(--primary) 8%,transparent),
        transparent 60%),
      linear-gradient(145deg,
        color-mix(in srgb,var(--panel) 91%,transparent),
        color-mix(in srgb,#07111e 94%,transparent)) !important;
    border-color:color-mix(in srgb,var(--primary) 20%,var(--border)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.028),
      0 18px 44px rgba(0,0,0,.20) !important;
    backdrop-filter:blur(10px) saturate(1.04);
    -webkit-backdrop-filter:blur(10px) saturate(1.04);
  }

  #income .income-top .month-switcher,
  #income .income-top .income-chart-year-switcher{
    border-color:color-mix(in srgb,var(--border) 76%,#7da9df 24%) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb,#10233b 72%,transparent),
        color-mix(in srgb,#08111d 80%,transparent)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 5px 14px rgba(0,0,0,.10) !important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  #income .income-top .month-switcher > span,
  #income .income-top .income-chart-year-switcher > span{
    color:var(--text) !important;
  }

  #income .income-top .month-switcher > button,
  #income .income-top .income-chart-year-switcher > button{
    color:color-mix(in srgb,var(--text-muted) 92%,white 8%) !important;
  }

  #income .income-top .month-switcher > button:hover,
  #income .income-top .income-chart-year-switcher > button:hover{
    color:var(--text) !important;
    background:color-mix(in srgb,var(--primary) 8%,transparent) !important;
  }

  #income .income-top .add-income-btn{
    border:1px solid color-mix(in srgb,var(--primary) 72%,white 8%) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb,var(--primary) 88%,transparent),
        color-mix(in srgb,var(--primary) 72%,#0b1727 28%)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 7px 18px color-mix(in srgb,var(--primary) 18%,transparent) !important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  #income .income-top .add-income-btn:hover{
    filter:brightness(1.06);
  }
}

/* Service-style glass polish for the add-income window. */
#income #incomeForm{
  background:
    radial-gradient(92% 135% at 100% 0,
      color-mix(in srgb,var(--primary) 7%,transparent),
      transparent 62%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--panel) 91%,transparent),
      color-mix(in srgb,#07111e 94%,transparent)) !important;
  border-color:color-mix(in srgb,var(--primary) 18%,var(--border)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    0 18px 44px rgba(0,0,0,.20) !important;
  backdrop-filter:blur(10px) saturate(1.04);
  -webkit-backdrop-filter:blur(10px) saturate(1.04);
}

#income #incomeForm .form-grid input,
#income #incomeForm .category-select,
#income #incomeForm .calendar-btn{
  border-color:color-mix(in srgb,var(--border) 78%,#7da9df 22%) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,#10233b 68%,transparent),
      color-mix(in srgb,#08111d 78%,transparent)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022) !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

#income #incomeForm .form-grid input:hover,
#income #incomeForm .category-select:hover,
#income #incomeForm .calendar-btn:hover{
  border-color:color-mix(in srgb,var(--primary) 28%,var(--border)) !important;
}

#income #incomeForm .save-btn{
  border:1px solid color-mix(in srgb,var(--primary) 72%,white 8%) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--primary) 88%,transparent),
      color-mix(in srgb,var(--primary) 72%,#0b1727 28%)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 7px 18px color-mix(in srgb,var(--primary) 18%,transparent) !important;
}

#income #incomeForm .cancel-btn{
  border-color:color-mix(in srgb,var(--danger) 34%,var(--border)) !important;
  background:color-mix(in srgb,var(--danger) 7%,transparent) !important;
  box-shadow:none !important;
}

/* Keep add-income popovers in the page coordinate system and calm the input surfaces. */
#income #incomeForm{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#income #incomeForm .form-grid input,
#income #incomeForm .category-select,
#income #incomeForm .calendar-btn{
  border-color:color-mix(in srgb,var(--border) 90%,#7da9df 10%) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--panel) 72%,transparent),
      color-mix(in srgb,#07111e 82%,transparent)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.016),
    0 2px 8px rgba(0,0,0,.06) !important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

#income #incomeForm .category-select.open{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 24%,transparent) !important;
}

#income #incomeForm .calendar-popup,
#income #incomeForm .category-popup{
  z-index:4000 !important;
  border-color:color-mix(in srgb,var(--border) 82%,#7da9df 18%) !important;
  background:
    linear-gradient(150deg,
      color-mix(in srgb,#0b1727 94%,transparent),
      color-mix(in srgb,#070e18 96%,transparent)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 16px 34px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(12px) saturate(1.04);
  -webkit-backdrop-filter:blur(12px) saturate(1.04);
}

/* Service-style polish for recent incomes and full history. */
#income .income-recent-card{
  border-color:color-mix(in srgb,var(--border) 84%,#7da9df 16%) !important;
  background:
    linear-gradient(150deg,
      color-mix(in srgb,#0b1727 80%,transparent),
      color-mix(in srgb,#070e18 88%,transparent)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 5px 14px rgba(0,0,0,.10) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-recent-card:hover{
    border-color:color-mix(in srgb,var(--primary) 28%,var(--border)) !important;
    background:
      linear-gradient(150deg,
        color-mix(in srgb,#0d1b2d 84%,transparent),
        color-mix(in srgb,#08111d 90%,transparent)) !important;
  }
}

#income .income-recent-toggle,
#income .income-recent-history,
#income .income-recent-page-btn,
#income .income-history-report-btn{
  border-color:color-mix(in srgb,var(--border) 80%,#7da9df 20%) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,#10233b 66%,transparent),
      color-mix(in srgb,#08111d 78%,transparent)) !important;
  color:color-mix(in srgb,var(--text-muted) 92%,white 8%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.022),
    0 4px 12px rgba(0,0,0,.08) !important;
}

#income .income-recent-toggle:hover,
#income .income-recent-history:hover,
#income .income-recent-page-btn:hover:not(:disabled),
#income .income-history-report-btn:hover{
  color:var(--text) !important;
  border-color:color-mix(in srgb,var(--primary) 34%,var(--border)) !important;
  background:color-mix(in srgb,var(--primary) 8%,#0b1727) !important;
}

#income .income-recent-history-panel #incomeList{
  border-color:color-mix(in srgb,var(--border) 84%,#7da9df 16%) !important;
  background:
    linear-gradient(150deg,
      color-mix(in srgb,#0b1727 84%,transparent),
      color-mix(in srgb,#070e18 90%,transparent)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 8px 20px rgba(0,0,0,.12) !important;
}

#income .income-recent-history-panel #incomeList > .income-row{
  background:transparent !important;
  border-bottom-color:color-mix(in srgb,var(--border) 78%,transparent) !important;
}

#income .income-recent-history-panel #historySearch{
  border-color:color-mix(in srgb,var(--border) 86%,#7da9df 14%) !important;
  background:color-mix(in srgb,#0b1727 76%,transparent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.016) !important;
}