/* =======================================================================================
   Design tokens
   ======================================================================================= */
:root{
  color-scheme: dark;
  --bg:#0b0f14; --panel:#121821; --muted:#1b2430;
  --text:#f0f4f8;           /* ≥ AA on --bg */
  --text-dim:#b8c5d4;       /* ≥ AA on --bg */
  --accent:#2bd4ff; --good:#23d18b; --warn:#ffcc66; --bad:#ff6b6b;

  --shadow:0 8px 24px rgba(0,0,0,.35);
  --radius:18px;

  --gap:14px; --gap-cal:6px;
  --tile-w: clamp(140px, 15vw, 220px);

  --header-height: 70px; /* Fixed header height - updated dynamically by JavaScript */
  --headerH: var(--header-height); /* Alias for backward compatibility */
  --footerH: 56px;
  --overviewHeaderH: 56px; /* Overview header height - updated dynamically */
  
  /* Category controls border */
  --category-controls-border: #1d2733;
  
  /* Scrollbar colors - theme-aware */
  --scrollbar-thumb: rgba(43,212,255,.3);
  --scrollbar-thumb-hover: rgba(43,212,255,.5);
  --scrollbar-track: transparent;
  --scrollbar-track-bg: #0d141c;
}

/* Theme: Default (current theme - dark with blue accents) */
:root[data-theme="default"],
:root:not([data-theme]){
  color-scheme: dark;
  --bg:#0b0f14; --panel:#121821; --muted:#1b2430;
  --text:#f0f4f8;
  --text-dim:#b8c5d4;
  --accent:#2bd4ff; --good:#23d18b; --warn:#ffcc66; --bad:#ff6b6b;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --category-controls-border: #1d2733;
  --border: #17202a;
  --border-muted: #1d2733;
  --border-strong: #223045;
  --hover-bg: #1a2532;
  --input-bg: #0d141c;
  --input-border: #1d2733;
  --button-secondary-bg: #152232;
  --button-secondary-border: #223045;
  --button-text: #0b0f14;
  --scrollbar-thumb: rgba(43,212,255,.3);
  --scrollbar-thumb-hover: rgba(43,212,255,.5);
  --scrollbar-track: transparent;
  --scrollbar-track-bg: #0d141c;
  --seg-bg: #1a2532;
  --seg-bd: #223045;
  --seg-tx: #b8c5d4;
  --seg-on: #2bd4ff;
  --seg-on-tx: #0b0f14;
}

/* Theme: True Dark Mode (pure dark, minimal colors) */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#000000; --panel:#0a0a0a; --muted:#1a1a1a;
  --text:#e0e0e0;
  --text-dim:#888888;
  --accent:#ffffff; --good:#4ade80; --warn:#fbbf24; --bad:#ef4444;
  --shadow:0 8px 24px rgba(0,0,0,.8);
  --category-controls-border: #2a2a2a;
  --border: #1a1a1a;
  --border-muted: #2a2a2a;
  --border-strong: #3a3a3a;
  --hover-bg: #1a1a1a;
  --input-bg: #0a0a0a;
  --input-border: #2a2a2a;
  --button-secondary-bg: #1a1a1a;
  --button-secondary-border: #3a3a3a;
  --button-text: #000000;
  --scrollbar-thumb: rgba(255,255,255,.3);
  --scrollbar-thumb-hover: rgba(255,255,255,.5);
  --scrollbar-track: transparent;
  --scrollbar-track-bg: #0a0a0a;
  --seg-bg: #1a1a1a;
  --seg-bd: #3a3a3a;
  --seg-tx: #888888;
  --seg-on: #ffffff;
  --seg-on-tx: #000000;
}

/* Theme: Light Mode */
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f5f5f5; --panel:#ffffff; --muted:#f0f0f0;
  --text:#1a1a1a;
  --text-dim:#666666;
  --accent:#0066cc; --good:#10b981; --warn:#f59e0b; --bad:#ef4444;
  --shadow:0 8px 24px rgba(0,0,0,.1);
  --category-controls-border: #d0d0d0;
  --border: #e0e0e0;
  --border-muted: #d0d0d0;
  --border-strong: #b0b0b0;
  --hover-bg: #eeeeee;
  --input-bg: #ffffff;
  --input-border: #d0d0d0;
  --button-secondary-bg: #ffffff;
  --button-secondary-border: #b0b0b0;
  --button-text: #1a1a1a;
  --scrollbar-thumb: rgba(0,102,204,.3);
  --scrollbar-thumb-hover: rgba(0,102,204,.5);
  --scrollbar-track: transparent;
  --scrollbar-track-bg: #f5f5f5;
  --seg-bg: #e0e0e0;
  --seg-bd: #b0b0b0;
  --seg-tx: #666666;
  --seg-on: #0066cc;
  --seg-on-tx: #ffffff;
}

/* =======================================================================================
   Base
   ======================================================================================= */
html{ 
  background:var(--panel, #121821); 
  color-scheme: var(--color-scheme, dark); 
  padding-top: env(safe-area-inset-top, 0);
  transition:background-color 0.3s ease, color-scheme 0.3s ease;
}
html, body { overflow-x:hidden; }
body{
  margin:0;
  color:var(--text);
  font:16px system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background: var(--bg);
  background-image: linear-gradient(180deg, var(--bg) 0%, var(--panel) 100%);
  min-height:100dvh;
  display:flex; flex-direction:column;
  overscroll-behavior-y:none; overscroll-behavior-x:none;
  touch-action:manipulation; /* Prevent double-tap zoom */
  -ms-touch-action:manipulation;
  color-scheme: var(--color-scheme, dark);
  transition:background-color 0.3s ease, color 0.3s ease;
}

/* Hide body content initially when loading screen is visible */
body:has(#app-loading-screen:not(.hidden)) > *:not(#app-loading-screen){
  opacity:0;
  transition:opacity 0.3s ease;
}

body:has(#app-loading-screen.hidden) > *:not(#app-loading-screen){
  opacity:1;
}
/* Extend header color behind top notch - CRITICAL FIX */
html::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:env(safe-area-inset-top, 0);
  background:#121821;
  z-index:10000;
  pointer-events:none;
}
/* Theme-specific notch backgrounds - multiple selectors for maximum compatibility */
[data-theme="default"]::before,
html:not([data-theme])::before,
:root:not([data-theme])::before{
  background:#121821 !important;
}
[data-theme="dark"]::before,
html[data-theme="dark"]::before,
:root[data-theme="dark"]::before{
  background:#0a0e13 !important;
}
[data-theme="light"]::before,
html[data-theme="light"]::before,
:root[data-theme="light"]::before{
  background:#f5f5f5 !important;
}
/* Light mode header notch area - CRITICAL for PWA */
[data-theme="light"] header#appHeader::before,
html[data-theme="light"] header#appHeader::before,
:root[data-theme="light"] header#appHeader::before{
  background:#ffffff !important;
}
/* Body background for light mode notch area - PWA CRITICAL */
:root[data-theme="light"]::after,
html[data-theme="light"]::after{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:env(safe-area-inset-top, 0);
  background:#ffffff !important;
  z-index:99999;
  pointer-events:none;
}
/* Ensure light mode has proper background color everywhere */
:root[data-theme="light"],
html[data-theme="light"]{
  background-color:#f5f5f5 !important;
}
:root[data-theme="light"] body,
html[data-theme="light"] body{
  background-color:#f5f5f5 !important;
}
/* Prevent pull-to-refresh and overscroll on PWA */
@media (display-mode: standalone) {
  body {
    overscroll-behavior-y:none;
    overscroll-behavior-x:none;
    -webkit-overflow-scrolling:touch;
  }
  main, #app {
    overscroll-behavior-y:contain;
    overscroll-behavior-x:none;
  }
}
@media(min-width:1024px){ body{ font-size:18px; } }
@media(min-width:1440px){ body{ font-size:19px; } }
img,svg,canvas,video{ max-width:100%; height:auto; display:block; }

/* =======================================================================================
   Loading Screen
   ======================================================================================= */
#app-loading-screen{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(180deg, var(--bg) 0%, var(--panel) 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:99999;
  opacity:1;
  visibility:visible;
  transition:opacity 0.3s ease, visibility 0.3s ease;
  padding:env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

#app-loading-screen.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loading-screen-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  text-align:center;
}

.loading-screen-icon{
  width:64px;
  height:64px;
  max-width:64px;
  max-height:64px;
  object-fit:contain;
  border-radius:16px;
  animation:loadingPulse 2s ease-in-out infinite;
  flex-shrink:0;
}

@keyframes loadingPulse{
  0%, 100%{
    transform:scale(1);
    opacity:1;
  }
  50%{
    transform:scale(1.05);
    opacity:0.9;
  }
}

.loading-screen-text{
  font-size:18px;
  font-weight:600;
  color:var(--text-dim, #b8c5d4);
  display:flex;
  align-items:center;
  gap:8px;
}

.loading-dots{
  display:inline-flex;
  gap:4px;
  align-items:center;
}

.loading-dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent, #2bd4ff);
  animation:loadingDot 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1){
  animation-delay:0s;
}

.loading-dots span:nth-child(2){
  animation-delay:0.2s;
}

.loading-dots span:nth-child(3){
  animation-delay:0.4s;
}

@keyframes loadingDot{
  0%, 60%, 100%{
    transform:scale(1);
    opacity:0.5;
  }
  30%{
    transform:scale(1.2);
    opacity:1;
  }
}

@media(max-width:768px){
  .loading-screen-icon{
    width:56px;
    height:56px;
    max-width:56px;
    max-height:56px;
  }
  .loading-screen-content{
    gap:20px;
  }
  .loading-screen-text{
    font-size:16px;
  }
}

/* =======================================================================================
   App chrome: fixed header and footer, scrollable main
   ======================================================================================= */
header#appHeader{
  position:fixed; 
  top:0; 
  left:0; 
  right:0;
  padding-top: env(safe-area-inset-top,0);
  background:var(--panel, #121821);
  z-index:10000;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  transform:none;
  will-change:transform;
  transition:transform .2s ease-out;
  overflow:visible;
  /* Extend header behind notch */
  margin-top:calc(-1 * env(safe-area-inset-top, 0));
  margin-left:calc(-1 * env(safe-area-inset-left, 0));
  margin-right:calc(-1 * env(safe-area-inset-right, 0));
  width:calc(100% + env(safe-area-inset-left, 0) + env(safe-area-inset-right, 0));
}
/* Extend header background behind notch - ABSOLUTE FIX */
header#appHeader::before{
  content:'';
  position:fixed;
  top:0;
  left:calc(-1 * env(safe-area-inset-left, 0));
  right:calc(-1 * env(safe-area-inset-right, 0));
  width:calc(100% + env(safe-area-inset-left, 0) + env(safe-area-inset-right, 0));
  height:env(safe-area-inset-top, 0);
  background:var(--panel, #121821);
  z-index:10001;
  pointer-events:none;
}
header#appHeader.collapsed,
header#appHeader.minimized{
  transform: translateY(calc(-100% + env(safe-area-inset-top,0)));
}

/* Header tabs separator - stylized faint blue line */
.header-tabs-separator{
  height:1px;
  background:linear-gradient(90deg, 
    transparent 0%, 
    color-mix(in srgb, var(--accent) 15%, transparent) 20%, 
    color-mix(in srgb, var(--accent) 25%, transparent) 50%, 
    color-mix(in srgb, var(--accent) 15%, transparent) 80%, 
    transparent 100%);
  margin:4px 0 0 0; /* Add top margin to not sit on buttons */
  padding:0;
  width:100%;
  box-shadow:0 1px 2px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Overview tabs in header */
header#appHeader .overview-tabs-wrapper{
  width:100%;
  padding:8px 12px;
  background:var(--panel, #121821);
  box-sizing:border-box;
  pointer-events:auto;
  position:relative;
  z-index:10001;
}

header#appHeader .overview-tabs{
  display:flex !important;
  gap:3px;
  background:var(--input-bg);
  border-radius:10px;
  padding:3px;
  flex-wrap:wrap;
  justify-content:center;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  margin:0;
  pointer-events:auto;
  position:relative;
  z-index:10001;
}

header#appHeader .overview-tab{
  pointer-events:auto;
  position:relative;
  z-index:10002;
}

@media(max-width:480px){
  header#appHeader .overview-tabs-wrapper{
    padding:6px 8px;
  }
  header#appHeader .overview-tabs{
    gap:2px;
    padding:2px;
    border-radius:8px;
  }
}

/* main is the only scroll area - header height managed by JavaScript (ui-utilities.js) */
/* See components.css for main styling - app.css provides base fallbacks */
main, #app{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto; 
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scroll-behavior:smooth;
  z-index: 1;
  /* Fallback padding - JavaScript sets this inline */
  padding-top: var(--header-height, 70px);
  padding-bottom: calc(var(--footerH, 56px) + 100px + env(safe-area-inset-bottom,0));
  margin-top: 0;
}
body.header-collapsed main,
body.header-collapsed #app{
  padding-top: var(--header-collapsed-height, 48px);
}
/* Ensure main content children are below header in stacking context */
main > *:first-child,
#app > *:first-child {
  position:relative;
  z-index:1;
}
/* Section overview - positioned below header via main's padding-top */
.section-overview {
  position:relative;
  z-index:1;
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
}
/* Overview-header removed - tabs now in header */

/* Footer pinned absolute bottom with safe-area padding */
footer, #app-footer{
  position:fixed; left:0; right:0; bottom:0;
  z-index:10000;
  padding:6px 12px;
  padding-bottom:max(6px, env(safe-area-inset-bottom,0));
  border-top:1px solid var(--border-muted, rgba(0,0,0,.12));
  background:var(--panel);
  color:var(--text);
  box-shadow:var(--shadow);
}
footer > div, #app-footer > div{ padding-bottom:6px; }
footer *, #app-footer *{ margin-bottom:0; }

/* iOS and Standalone PWA hardening */
/* --header-height is set by JavaScript and already includes safe-area */
@supports (-webkit-touch-callout: none){
  main, #app{
    height:100dvh;
    max-height:100dvh;
    padding-bottom: calc(var(--footerH, 56px) + 100px + env(safe-area-inset-bottom,0));
  }
  body.header-collapsed main,
  body.header-collapsed #app{
    padding-top: var(--header-collapsed-height, 48px);
  }
  header#appHeader{ transform: translate3d(0,0,0); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
  footer, #app-footer{ transform: translate3d(0,0,0); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
}
@media (display-mode: standalone){
  main, #app{
    height:100dvh; 
    max-height:100dvh;
    padding-bottom: calc(var(--footerH, 56px) + 100px + env(safe-area-inset-bottom,0));
    margin-top: 0 !important;
  }
  body.header-collapsed main,
  body.header-collapsed #app{
    padding-top: env(safe-area-inset-top, 0);
  }
  footer, #app-footer{
    bottom:0; padding-bottom:max(6px, env(safe-area-inset-bottom,0));
  }
}

/* Floating header helpers */
.header-toggle-float,
.header-sync-float{
  position:fixed;
  top: calc(env(safe-area-inset-top,0) + 8px);
  z-index:10001;
  width:36px; height:36px; border-radius:12px;
  border:1px solid var(--button-secondary-border); background:var(--button-secondary-bg); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  opacity:.9; cursor:pointer; transition:all .3s ease;
}
.header-toggle-float{ left:50%; transform:translateX(-50%); }
.header-sync-float{ right:12px; }
.header-toggle-float[hidden], .header-sync-float[hidden]{ display:none !important; }
.header-toggle-float:hover, .header-sync-float:hover{ opacity:1; background:var(--hover-bg); }
.header-sync-float.syncing{ background:var(--accent); border-color:var(--accent); }
.header-sync-float.success{ background:var(--good); border-color:var(--good); }
.header-sync-float.error{ background:var(--bad); border-color:var(--bad); }
.header-sync-float.success svg, .header-sync-float.error svg{ fill:var(--text); }

/* Toasts under header - ensure they appear above dialogs */
/* Note: .toastarea styles are defined in separate style block below for better organization */
.toast{
  z-index:2147483647 !important;
  position:relative !important;
}
@keyframes spin{ from{transform:rotate(0);} to{transform:rotate(360deg);} }
/* Receipt processing glow animation */
.receipt-processing-glow {
  animation: receipt-processing-glow 2s ease-in-out infinite;
}

@keyframes receipt-processing-glow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(43, 212, 255, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(43, 212, 255, 0.6), 0 0 40px rgba(43, 212, 255, 0.4), 0 0 60px rgba(43, 212, 255, 0.2);
  }
}

@keyframes pulse{ 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

/* Negative helpers */
.negative,.bad,.v.negative{ color:var(--bad) !important; }
.v .negative{ color:var(--bad) !important; }

/* Reduce repeated chips on period calendar */
#days-info, #daily-pill{ display:none; }

/* =======================================================================================
   Layout helpers and wrappers
   ======================================================================================= */
.wrap{ max-width:100%; width:100%; margin:0 auto; padding:0 12px; box-sizing:border-box; }
@media(max-width:480px){ .wrap{ padding:0 8px; } }
@media(min-width:768px){
  .wrap{ padding:0 24px; }
  main.wrap, #app.wrap{ padding:0 24px !important; }
}
@media(min-width:1024px){
  .wrap{ max-width:1400px; }
  main.wrap, #app.wrap{ 
    max-width:1400px !important; 
    margin:0 auto !important; 
    padding:0 48px !important;
    /* padding-top handled by JavaScript */
  }
}
@media(min-width:1440px){
  .wrap{ max-width:1600px; }
  main.wrap, #app.wrap{ 
    max-width:1600px !important; 
    padding:0 64px !important;
    /* padding-top handled by JavaScript */
  }
}
main.grid, #app.grid{ width:100% !important; max-width:100% !important; }

/* Header visual - REMOVED: conflicts with header#appHeader */
header .title{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
header .title .brand{ display:flex; align-items:center; gap:8px; min-width:0; }
header .title .name{
  font-size:17px; font-weight:700; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45vw;
}
@media(min-width:480px){ header .title .name{ max-width:none; } }
.badge{ padding:3px 8px; border-radius:999px; background:var(--muted); color:var(--text-dim); font-size:12px; white-space:nowrap; max-width:46vw; overflow:hidden; text-overflow:ellipsis; }
#period-label{ cursor:pointer; transition:opacity 0.2s ease; }
#period-label:hover{ opacity:0.8; }
/* Period Card Action Bookmark Animations */
@keyframes bookmarkSlideIn {
  from {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center;
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes bookmarkSlideOut {
  from {
    opacity: 1;
    transform: scaleY(1);
  }
  to {
    opacity: 0;
    transform: scaleY(0);
  }
}

.period-action-bookmark {
  pointer-events: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* Period Picker - Redesigned with Table-like Grid */
#period-picker {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 10003; /* Above header tabs (10001-10002) but below dialogs backdrop */
  min-width: 320px;
  max-width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  padding: 0;
}

#period-picker .period-picker-header {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: var(--panel);
}

#period-picker #period-picker-manage {
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
  min-height: 32px;
  background: var(--button-secondary-bg);
  border: 1px solid var(--button-secondary-border);
  color: var(--text);
  border-radius: 8px;
  transition: all 0.2s ease;
}

#period-picker #period-picker-manage:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
  color: var(--accent);
}

#period-picker-list {
  padding: 8px;
  overflow-y: auto;
  max-height: calc(80vh - 60px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}

/* Period Option - Table-like Grid Layout */
#period-picker .period-option {
  padding: 0;
  cursor: pointer;
  border-radius: 10px;
  margin: 0;
  transition: all 0.2s ease;
  display: block;
  text-align: left;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  position: relative;
  background: var(--input-bg);
  border: 1px solid var(--border-muted);
}

/* WCAG: Focus indicators */
#period-picker .period-option:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

#period-picker .period-option:hover {
  background: var(--hover-bg);
  border-color: var(--border);
}

#period-picker .period-option.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--input-bg));
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* Grid Layout for Period Option Content */
#period-picker .period-option-grid {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
}

/* Date Range Column - Allow wrapping, no truncation */
#period-picker .period-dates-col {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
  min-width: 200px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
}

#period-picker .period-option.active .period-dates-col {
  color: var(--accent);
  font-weight: 600;
}

/* Status Column */
#period-picker .period-status-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 70px;
}

/* Status Badge - Using app badge styling */
#period-picker .period-status-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--text-dim);
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--border-muted);
}

/* Status-specific badge colors */
#period-picker .period-option.status-current .period-status-badge {
  background: color-mix(in srgb, var(--accent) 20%, var(--muted));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-muted));
}

#period-picker .period-option.status-open .period-status-badge {
  background: color-mix(in srgb, var(--good) 15%, var(--muted));
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 30%, var(--border-muted));
}

#period-picker .period-option.status-closed .period-status-badge {
  background: var(--muted);
  color: var(--text-dim);
  border-color: var(--border-muted);
  opacity: 0.8;
}

#period-picker .period-option.status-unassigned .period-status-badge {
  background: color-mix(in srgb, var(--warn) 20%, var(--muted));
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, var(--border-muted));
}

#period-picker .period-option.active .period-status-badge {
  background: color-mix(in srgb, var(--accent) 25%, var(--muted));
  color: var(--accent);
  border-color: var(--accent);
}

/* Closed periods - dimmed appearance */
#period-picker .period-option.status-closed {
  opacity: 0.7;
}

#period-picker .period-option.status-closed .period-dates-col {
  color: var(--text-dim);
}

/* Transaction Count Column */
#period-picker .period-count-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 50px;
}

/* Count Badge */
#period-picker .period-count-badge {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--input-bg);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--border);
  min-width: 36px;
  text-align: center;
}

#period-picker .period-option.active .period-count-badge {
  background: color-mix(in srgb, var(--accent) 15%, var(--input-bg));
  color: var(--accent);
  border-color: var(--accent);
}

/* Tablet: Wider columns */
@media (min-width: 480px) {
  #period-picker {
    min-width: 420px;
  }
  
  #period-picker .period-option-grid {
    gap: 16px;
    padding: 14px 16px;
  }
  
  #period-picker .period-dates-col {
    font-size: 15px;
  }
  
  #period-picker .period-status-col {
    min-width: 80px;
  }
  
  #period-picker .period-count-col {
    min-width: 60px;
  }
}

/* Desktop: Even wider */
@media (min-width: 768px) {
  #period-picker {
    min-width: 520px;
    max-width: 600px;
  }
  
  #period-picker .period-option-grid {
    gap: 20px;
    padding: 16px 18px;
  }
  
  #period-picker .period-dates-col {
    font-size: 15px;
  }
  
  #period-picker .period-option {
    min-height: 52px;
  }
}

/* Mobile positioning adjustment */
@media (max-width: 480px) {
  #period-picker {
    left: auto !important;
    right: 0 !important;
    max-width: calc(100vw - 20px);
    min-width: 280px;
  }
  
  #period-picker .period-option-grid {
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    padding: 10px 12px;
  }
  
  #period-picker .period-dates-col {
    min-width: 0;
    font-size: 13px;
  }
  
  #period-picker .period-status-col {
    min-width: 60px;
  }
  
  #period-picker .period-count-col {
    min-width: 40px;
  }
  
  #period-picker .period-count-badge {
    font-size: 11px;
    padding: 3px 8px;
    min-width: 32px;
  }
}

/* WCAG: High contrast mode support */
@media (prefers-contrast: high) {
  #period-picker .period-option {
    border-width: 2px;
  }
  
  #period-picker .period-option:focus {
    outline-width: 3px;
  }
  
  #period-picker .period-status-badge,
  #period-picker .period-count-badge {
    border-width: 2px;
  }
}

/* WCAG: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  #period-picker .period-option {
    transition: none;
  }
  
  #period-picker-list {
    scroll-behavior: auto;
  }
}
@media(min-width:1024px){ .badge{ font-size:14px; padding:4px 10px; } }
@media(min-width:1440px){ .badge{ font-size:15px; padding:5px 12px; } }

.period-section{ display:flex; align-items:center; gap:8px; }
.month-nav{ display:none; gap:2px; align-items:center; }
.month-nav.visible{ display:flex; }
.month-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px;
  border:1px solid var(--button-secondary-border); background:var(--button-secondary-bg); color:var(--text); cursor:pointer;
  transition:all .2s ease;
}
.month-btn:hover{ background:var(--hover-bg); border-color:var(--accent); }
.month-btn:disabled{ opacity:.4; cursor:not-allowed; }
.actions{ display:flex; gap:6px; align-items:center; margin-left:auto; }
.iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:12px; border:1px solid var(--button-secondary-border); background:var(--button-secondary-bg); color:var(--text); cursor:pointer; transition:all 0.2s ease; }
.iconbtn:hover{ background:var(--hover-bg); border-color:var(--accent); opacity:1; }
.iconbtn svg{ width:18px; height:18px; stroke-width:2; pointer-events:none; }

header.collapsed{ display:none; transition:all .3s ease; }
main{ transition: padding-top .3s ease; }

/* Grid */
.grid{ display:grid; gap:var(--gap); }
.two{ grid-template-columns:1fr; }
@media(max-width:480px){ .grid{ gap:10px; } }
@media(min-width:900px){ .two{ grid-template-columns:1fr 1fr; } .grid{ gap:18px; } }
@media(min-width:1024px){ .grid{ gap:24px; } }
@media(min-width:1440px){ .grid{ gap:32px; } }

/* Cards */
.card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.card h3{ margin:0 0 8px; font-size:16px; color:var(--text-dim); font-weight:600; }
.card .inner{ padding:14px; }
/* Override for section-overview inner - must come after general .card .inner */
.section-overview.card .inner{ 
  padding:0 !important; 
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
}
@media(min-width:1024px){
  .card h3{ font-size: clamp(22px,2vw,28px); margin-bottom:12px; }
  .card .inner{ padding:24px; }
  .card{ font-size: clamp(17px,1.5vw,20px); line-height:1.6; }
  .card *{ font-size: clamp(17px,1.5vw,20px); line-height:1.6; }
  .card .tiny{ font-size: clamp(14px,1.2vw,16px); }
  /* Override for section-overview inner at all breakpoints */
  .section-overview.card .inner{ 
    padding:0 !important; 
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
  }
}
@media(min-width:1440px){
  .card h3{ font-size: clamp(24px,2.2vw,32px); margin-bottom:16px; }
  .card .inner{ padding:32px; }
  .card{ font-size: clamp(18px,1.6vw,22px); line-height:1.7; }
  .card *{ font-size: clamp(18px,1.6vw,22px); line-height:1.7; }
  .card .tiny{ font-size: clamp(15px,1.3vw,18px); }
  /* Override for section-overview inner at all breakpoints */
  .section-overview.card .inner{ 
    padding:0 !important; 
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
  }
}
/* Overview section - starts at top of main (after header padding) */
.section-overview{ 
  grid-column:1/-1; 
  width:100%;
  padding:0 !important; 
  /* CRITICAL: No negative margins that could pull content upward */
  margin:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  position:relative !important; 
  z-index:1 !important;
  overflow:visible !important;
  /* Section starts immediately at top of main (main has padding-top for header) */
  /* Ensure it never hides behind header - proper stacking context */
  /* Allow natural height - no fixed constraints */
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
  /* Remove isolation to prevent stacking context issues */
  /* Ensure overview-header can stick properly */
  display:flex !important;
  flex-direction:column !important;
  /* Prevent any upward movement */
  top:auto !important;
  bottom:auto !important;
}
/* CRITICAL FIX: Handle 768px and below - use EXACT same rules as smaller screens */
/* At 768px and below - mobile/tablet breakout - MUST work identically to 767px */
@media(max-width:768px){
  .section-overview{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(-1 * 12px) !important;
    margin-right:calc(-1 * 12px) !important;
    margin-top:0 !important;
    padding-top:0 !important;
    position:relative !important;
    z-index:1 !important;
    /* CRITICAL: Prevent any upward movement */
    transform:none !important;
    -webkit-transform:none !important;
    /* CRITICAL: Ensure it never moves above header */
    top:auto !important;
    left:auto !important;
    right:auto !important;
  }
  /* CRITICAL: Ensure overview-content behaves exactly like 767px and below */
  .section-overview .overview-content,
  .section-overview .analytics-content,
  .section-overview .regular-payments-content,
  .section-overview .transactions-content {
    margin-top:0 !important;
    padding:16px !important;
    padding-top:0 !important;
    position:relative !important;
    z-index:1 !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    -webkit-transform:none !important;
    /* Ensure it never moves up behind header */
    margin-bottom:0 !important;
    clear:both !important;
  }
}
@media(max-width:480px){
  .section-overview{
    margin-left:calc(-1 * 8px) !important;
    margin-right:calc(-1 * 8px) !important;
    margin-top:0 !important;
  }
}
/* At 769px+ - desktop, use EXACT same rules as 768px and below */
/* The user wants consistent behavior across all screen sizes */
@media(min-width:769px){
  .section-overview{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    /* CRITICAL: No negative margins that could pull content upward on desktop */
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    position:relative !important;
    z-index:1 !important;
    /* CRITICAL: Prevent any upward movement */
    transform:none !important;
    -webkit-transform:none !important;
    /* CRITICAL: Ensure it never moves above header - must be in normal document flow */
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    /* Ensure it's visible and below header - keep flex display for proper layout */
    visibility:visible !important;
    opacity:1 !important;
    display:flex !important;
    flex-direction:column !important;
  }
}
.section-overview.card {
  padding:0 !important;
  overflow:visible;
  border-radius:0 !important;
  border-left:none !important;
  border-right:none !important;
}
section.card[style*="grid-column:1/-1"]{ 
  width:100%; 
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}
section.card[style*="grid-column:1/-1"] .inner{
  padding-bottom:calc(var(--footerH, 56px) + 40px + env(safe-area-inset-bottom,0)) !important;
}
.section-overview .inner{ 
  padding:0 !important; 
  margin:0 !important;
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  overflow:visible !important;
  align-items:stretch !important;
  width:100% !important;
  /* Allow natural vertical flow - no fixed height constraints */
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
  /* Force proper stacking order */
  flex-wrap:nowrap !important;
}
/* Base overview-header rules - will be overridden by media queries for specific breakpoints */
.overview-header{
  display:flex !important; 
  justify-content:center !important; 
  align-items:center !important;
  gap:8px !important; 
  flex-wrap:wrap !important; 
  position:-webkit-sticky !important;
  position:sticky !important;
  top:0 !important;
  z-index:10 !important;
  background:var(--panel) !important;
  padding:6px 12px 4px 12px !important;
  margin:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  border-radius:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 8%, transparent) !important;
  min-height:40px !important;
  height:auto !important;
  max-height:none !important;
  transform:translateZ(0) !important;
  -webkit-transform:translateZ(0) !important;
  will-change:transform !important;
  /* Header takes up space in flow, content flows below - no flex growth */
  flex:0 0 auto !important;
  flex-shrink:0 !important;
  flex-grow:0 !important;
  order:1 !important;
  /* CRITICAL: Stick directly at top of scroll container (which is below header due to main's padding-top) */
  /* This ensures NO GAP between appHeader and overview-header - same for all screen sizes */
  /* Force these values to override any inline styles that might be set */
  top:0 !important;
    position:sticky !important;
    margin-top:0 !important;
  padding-top:0 !important;
  /* CRITICAL: Ensure it never moves above its container */
  left:auto !important;
  right:auto !important;
  }
/* Ensure content sections start below the sticky header - same for all screen sizes */
  .section-overview .overview-content,
  .section-overview .analytics-content,
  .section-overview .regular-payments-content,
  .section-overview .transactions-content {
    margin-top:0 !important;
    padding-top:20px !important;
  /* Use static positioning to avoid creating containing block that breaks sticky children */
  position:static !important;
  z-index:1 !important;
  /* CRITICAL: Ensure content never appears behind header (z-index:10000) */
  /* Content must always be below header in stacking order */
}
/* REMOVED - Rules moved to section-overview media queries above for consistency */
@media(min-width:1024px){
  .overview-header{
    padding:8px 16px 6px 16px;
    gap:12px;
    /* CRITICAL: Ensure positioning rules are maintained */
    position:sticky !important;
    top:0 !important;
    margin-top:0 !important;
    padding-top:8px !important;
  }
}
@media(min-width:1440px){
  .overview-header{
    padding:9px 18px 7px 18px;
    /* CRITICAL: Ensure positioning rules are maintained */
    position:sticky !important;
    top:0 !important;
    margin-top:0 !important;
    padding-top:9px !important;
  }
}
.section-overview .overview-content,
.section-overview .analytics-content,
.section-overview .regular-payments-content,
.section-overview .transactions-content {
  padding:16px !important;
  padding-top:16px !important;
  /* Content flows naturally below header tabs in normal document flow */
  position:relative !important;
  z-index:1 !important;
  flex:0 1 auto !important;
  flex-grow:0 !important;
  flex-shrink:1 !important;
  flex-basis:auto !important;
  min-width:0 !important;
  order:2 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  /* Content visibility controlled by JavaScript */
  width:100% !important;
  box-sizing:border-box !important;
  /* Ensure content is visible when shown and allows natural flow */
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  /* Ensure content sections are properly separated */
  clear:both !important;
  /* CRITICAL: Ensure content never hides behind header - it's in normal flow below main's padding-top */
  top:auto !important;
  left:auto !important;
  right:auto !important;
  /* Ensure it's positioned correctly and visible */
  transform:none !important;
  -webkit-transform:none !important;
}
/* Hidden state - will be overridden by JavaScript when showing */
.section-overview .overview-content[style*="display: none"],
.section-overview .analytics-content[style*="display: none"],
.section-overview .regular-payments-content[style*="display: none"],
.section-overview .transactions-content[style*="display: none"] {
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  height:0 !important;
  overflow:hidden !important;
}
@media(max-width:480px){
  .section-overview .overview-content,
  .section-overview .analytics-content,
  .section-overview .regular-payments-content,
  .section-overview .transactions-content {
    padding:12px;
    padding-top:12px;
  }
}
@media(min-width:1024px){
  .section-overview .overview-content,
  .section-overview .analytics-content,
  .section-overview .regular-payments-content,
  .section-overview .transactions-content {
    padding:20px;
    padding-top:20px;
  }
}
/* Stats spacing */
.section-overview .overview-content .stats{
  margin-top:0;
  margin-bottom:16px;
  min-height:60px;
}
@media(max-width:480px){
  .section-overview .overview-content .stats{
    margin-top:0;
    margin-bottom:12px;
    min-height:50px;
  }
}
/* Ensure stats cards are always visible and don't get cut off */
.stat{
  min-height:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  z-index:1; /* Ensure stats are above background elements */
}
@media(max-width:480px){
  .stat{
    min-height:50px;
    padding:10px;
  }
}
/* Empty state styling - ensure visibility even with no data */
.stats:empty::before,
.stats:has(.stat:empty)::before{
  content:'No data available';
  display:block;
  text-align:center;
  color:var(--text-dim);
  font-size:14px;
  padding:20px;
  grid-column:1/-1;
}
@media(max-width:480px){
  .stats:empty::before,
  .stats:has(.stat:empty)::before{
    font-size:12px;
    padding:16px;
  }
}
/* Old overview-header CSS removed - tabs now in header */
@media(max-width:480px){
  .overview-tabs{
    gap:2px;
    padding:2px;
    border-radius:8px;
  }
}
.overview-tab{
  display:inline-block; background:transparent; border:none; color:var(--text-dim);
  padding:6px 10px; border-radius:6px; font-size:12px; font-weight:600;
  cursor:pointer; transition:all .2s ease; white-space:nowrap;
  min-height:28px; /* Compact but still touch-friendly */
  flex:0 1 auto;
  box-sizing:border-box;
}
@media(max-width:480px){
  .overview-tab{
    padding:5px 8px;
    font-size:11px;
    min-height:26px;
    border-radius:5px;
  }
}
@media(min-width:768px){
  .overview-tab{
    padding:7px 12px;
    font-size:12px;
    min-height:30px;
  }
}
@media(min-width:1024px){ 
  .overview-tab{ 
    padding:8px 14px; 
    font-size:13px; 
    min-height:32px;
  } 
}
.overview-tab.active{ background:var(--accent); color:var(--bg); }
.overview-tab:hover:not(.active){ color:var(--text); background:var(--hover-bg); }
@media (hover: none) and (pointer: coarse){
  .overview-tab:active:not(.active){ background:var(--hover-bg); }
}

/* =======================================================================================
   Calendar views
   ======================================================================================= */
.daywrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scroll-padding:12px;
  padding-bottom:calc(var(--footerH, 56px) + 20px + env(safe-area-inset-bottom,0)) !important;
  overscroll-behavior-x:contain;
  scrollbar-width:thin; scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
.daywrap::-webkit-scrollbar{ height:6px; }
.daywrap::-webkit-scrollbar-track{ background:var(--scrollbar-track); }
.daywrap::-webkit-scrollbar-thumb{ background:var(--scrollbar-thumb); border-radius:3px; }
.daywrap::-webkit-scrollbar-thumb:hover{ background:var(--scrollbar-thumb-hover); }
.daystrip{ display:flex; gap:10px; }
.daystrip .day{ min-width:100%; scroll-snap-align:center; }
@media(min-width:640px){
  .daystrip .day{ min-width:520px; max-width:640px; margin:0 auto; }
  .daywrap{ scrollbar-width:none; }
  .daywrap::-webkit-scrollbar{ display:none; }
  .daywrap:hover{ scrollbar-width:thin; }
  .daywrap:hover::-webkit-scrollbar{ display:block; }
}
.day{ position:relative; background:var(--muted); border:1px solid var(--border-muted); border-radius:12px; padding:10px; min-height:170px; display:flex; flex-direction:column; gap:6px; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.day .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.day .date{ font-weight:800; font-size:clamp(13px,1.2vw,16px); color:var(--text); }
.day .right{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.day .dow{ font-size:11px; color:var(--text-dim); }
.day .daily{ font-size:clamp(12px,1.1vw,14px); color:var(--text-dim); background:var(--input-bg); border:1px solid var(--input-border); border-radius:999px; padding:2px 8px; white-space:nowrap; }
.line{ display:flex; justify-content:space-between; gap:6px; font-size:clamp(11px,1.05vw,13px); }
.line .lbl{ color:var(--text-dim); font-weight:700; }
.line .val{ font-variant-numeric:tabular-nums; font-weight:800; text-align:right; white-space:nowrap; }
.line.s .val{ color:var(--text); } .line.r .val{ color:var(--good); }
.line.r .val.negative{ color:var(--bad); }
.day.today{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset, 0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent); }
.day.disabled{ opacity:.55; filter:saturate(.85); }
.day .over-budget-warning{ display:block !important; opacity:1 !important; z-index:100 !important; }

/* Week */
.weekwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(var(--footerH, 56px) + 20px + env(safe-area-inset-bottom,0)); overscroll-behavior-x:contain; max-width:100%; }
.weekgrid{ display:grid; grid-template-columns:repeat(7, var(--tile-w)); gap:var(--gap-cal); }
.dow-row{ display:grid; grid-template-columns:repeat(7, var(--tile-w)); gap:var(--gap-cal); padding:0 2px 6px; color:var(--text-dim); font-size:11px; text-align:center; }

/* Month */
.monthwrap{ display:grid; gap:2px; row-gap:2px; max-width:100%; padding-bottom: calc(var(--footerH, 56px) + 40px + env(safe-area-inset-bottom,0)); }
.mweek{ display:grid; gap:0px; row-gap:0px; margin-bottom:0px !important; margin-top:0px !important; padding-bottom:0px !important; padding-top:0px !important; }
.mweek + .mweek{ margin-top:2px !important; }
/* Mobile: Minimal spacing between week rows */
@media(max-width:1023px){
  .mweek{ gap:0 !important; row-gap:0 !important; margin:0 !important; padding:0 !important; }
  .mweek + .mweek{ margin-top:2px !important; padding-top:0 !important; }
  .mweek .weekrow{ margin:0 !important; padding-top:0 !important; padding-bottom:0 !important; }
  .monthwrap{ gap:2px !important; row-gap:2px !important; }
}
.mweek .dow-row{ display:grid; grid-template-columns:repeat(7, var(--tile-w)); gap:var(--gap-cal); padding:0 2px; color:var(--text-dim); font-size:11px; text-align:center; }
@media(max-width:640px){ .mweek .dow-row{ display:none; } }
.mweek .weekrow{
  overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--footerH, 56px) + 20px + env(safe-area-inset-bottom,0)) !important; overscroll-behavior-x:contain; max-width:100%; touch-action:auto; will-change:scroll-position;
  margin-bottom:0px !important; margin-top:0px !important;
  /* CRITICAL FIX: Ensure short weeks (starting mid-week) show start/end days on screen */
  scroll-padding-left: 0;
  scroll-padding-right: 0;
  /* On small devices, ensure at least one day from previous/next week is visible for context */
  scroll-snap-type: x proximity;
}
#calMonthWrap, .monthwrap, .mweek{ touch-action:auto; pointer-events:auto; position:relative; }
.mweek .weekgrid{ 
  display:grid; 
  grid-template-columns:repeat(7, var(--tile-w)); 
  gap:var(--gap-cal);
  /* CRITICAL FIX: Ensure partial weeks show at least one day from adjacent weeks on small devices */
  min-width: 100%;
}

/* Desktop auto-fit */
@media(min-width:1024px){
  :root{ --tile-w: calc((min(1400px, 100vw - 96px) - 6*var(--gap-cal)) / 7); }
  .weekwrap{ overflow-x:visible; width:100%; max-width:100%; }
  .weekgrid{ width:100%; max-width:100%; grid-template-columns:repeat(7,1fr); }
  .mweek .weekrow{ overflow-x:visible; width:100%; max-width:100%; }
  .mweek .weekgrid{ width:100%; max-width:100%; grid-template-columns:repeat(7,1fr); }
  .mweek .dow-row{ width:100%; max-width:100%; grid-template-columns:repeat(7,1fr); }
  .monthwrap{ width:100%; max-width:100%; }
}
@media(min-width:1440px){
  :root{ --tile-w: calc((min(1600px, 100vw - 128px) - 6*var(--gap-cal)) / 7); }
}

/* =======================================================================================
   Forms and buttons
   ======================================================================================= */
*{ box-sizing:border-box; min-width:0; }
input,textarea,select{ -webkit-user-select:text; user-select:text; color-scheme: dark; }
input,textarea,select{
  background:var(--input-bg) !important; border:1px solid var(--input-border) !important; color:var(--text) !important;
  border-radius:8px; padding:12px; font-size:14px; transition:all .2s ease;
  color-scheme: dark !important;
}
input[type="date"]{
  max-width:100% !important;
  width:100% !important;
  box-sizing:border-box !important;
  min-width:0 !important;
  overflow:hidden !important;
}
input:focus,textarea:focus,select:focus{
  outline:none !important; border-color:var(--accent) !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}
select{
  cursor:pointer; -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239aa8b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:16px !important; padding-right:36px !important;
}
select option{ background:var(--input-bg) !important; color:var(--text) !important; padding:8px !important; }

.field input,.field select,.field textarea,
.entry-edit input,.entry-edit select,.entry-edit textarea,
.quick-grid input,.quick-grid select,.quick-grid textarea{
  background:var(--input-bg) !important; border:1px solid var(--input-border) !important; color:var(--text) !important;
  color-scheme: dark !important;
}
.field input:focus,.field select:focus,.field textarea:focus,
.entry-edit input:focus,.entry-edit select:focus,.entry-edit textarea:focus,
.quick-grid input:focus,.quick-grid select:focus,.quick-grid textarea:focus{
  border-color:var(--accent) !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

.field label{ display:block; font-size:12px; color:var(--text-dim); margin:0 0 6px; }

/* Buttons */
.btn{
  cursor:pointer;
  background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 80%, var(--bg)));
  border:0; 
  color:var(--button-text, var(--bg)); 
  font-weight:700; 
  letter-spacing:.2px;
  min-height:44px; min-width:44px; -webkit-tap-highlight-color:transparent;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:12px; transition:all .2s ease;
}
/* Light mode: Ensure button text is readable on blue background */
:root[data-theme="light"] .btn,
:root[data-theme="light"] .btn:not(.secondary):not(.ghost) {
  color: #ffffff !important;
}
.btn.secondary{ background:var(--button-secondary-bg); border:1px solid var(--button-secondary-border); color:var(--text); }
.btn.ghost{ background:transparent; border:1px dashed var(--border-strong); color:var(--text-dim); }
.btn:hover{ opacity:.9; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); opacity:.8; }

/* Unified Category Controls Group */
.category-controls-group{
  display:inline-flex;
  align-items:center;
  gap:0;
  padding:4px;
  background:transparent;
  border:1px solid var(--category-controls-border, #1d2733);
  border-radius:8px;
  transition:all 0.2s ease;
}
.category-controls-group:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* View Toggle Slider - matches btn ghost style */
.view-toggle-container{
  padding:4px 8px;
  font-size:12px;
  min-height:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  border-radius:0;
  color:var(--text-dim);
  transition:all 0.2s ease;
  box-sizing:border-box;
}
.view-toggle-container:hover{
  opacity:.9;
}
.category-collapse-btn{
  border-left:1px solid var(--category-controls-border, #1d2733) !important;
  border-radius:0 !important;
  min-height:28px !important;
  height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}
.view-toggle-slider{
  position:relative;
  display:flex;
  align-items:center;
  gap:0;
  width:56px;
  height:20px;
  background:var(--input-bg);
  border-radius:10px;
  padding:2px;
  border:1px solid var(--input-border);
}
.view-toggle-option{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:16px;
  color:var(--text-dim);
  transition:color 0.2s ease;
  cursor:pointer;
}
.view-toggle-slider-thumb{
  position:absolute;
  left:2px;
  top:2px;
  width:26px;
  height:16px;
  background:var(--button-secondary-bg);
  border:1px solid var(--button-secondary-border);
  border-radius:8px;
  transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index:1;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.view-toggle-container[data-view="heatmap"] .view-toggle-slider-thumb{
  transform:translateX(26px);
}
.view-toggle-container[data-view="heatmap"] .view-toggle-option[data-view="heatmap"]{
  color:var(--accent);
}
.view-toggle-container[data-view="grid"] .view-toggle-option[data-view="grid"]{
  color:var(--accent);
}

/* PWA circular buttons */
.pwa-bottom-btn{
  width:44px; height:44px; border-radius:22px;
  background:color-mix(in srgb, var(--panel) 90%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s ease;
  backdrop-filter:blur(10px); box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.pwa-bottom-btn:hover{ background:color-mix(in srgb, var(--accent) 15%, transparent); border-color:var(--accent); transform:scale(1.05); }
.pwa-bottom-btn:active{ transform:scale(.95); }
.pwa-bottom-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.pwa-bottom-btn[hidden]{ display:none !important; }
.pwa-chat-btn{ background:color-mix(in srgb, var(--accent) 10%, transparent); border-color:var(--accent); }

/* Rows and compact field grid */
.row{ display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.field{ flex:1 1 160px; min-width:140px; }
@media(max-width:480px){ .row{ gap:8px; } .field{ min-width:120px; } }

/* =======================================================================================
   Quick add and entry list
   ======================================================================================= */
.quick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.quick-grid .field:last-child{ grid-column:1/-1; }
.quick-add-actions{ display:flex; gap:8px; align-items:center; }
@media(max-width:480px){
  .quick-grid{ grid-template-columns:1fr; gap:10px; }
  .quick-grid .field:last-child{ grid-column:1; }
  .quick-add-actions{ flex-direction:column; }
  .quick-add-actions button{ width:100%; margin-left:0 !important; }
}
.entry-list{ display:grid; gap:8px; margin-top:10px; }
.entry-card{
  background:var(--input-bg); border:1px solid var(--input-border); border-radius:12px; padding:10px;
  display:grid; gap:6px; position:relative; overflow:hidden; touch-action:pan-y; transition:all .3s ease;
}
.entry-card.editing{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset, 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent); background:var(--muted); }
.entry-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.entry-amt{ font-variant-numeric:tabular-nums; font-weight:900; font-size:16px; }
.entry-group{ display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; background:var(--input-bg); border:1px solid var(--input-border); color:var(--text-dim); font-size:12px; }
.entry-note{ font-size:12px; color:var(--text-dim); word-break:break-word; }
.entry-actions{ display:flex; gap:8px; justify-content:flex-end; }
.entry-actions .btn{ padding:8px 10px; border-radius:10px; }
.entry-edit{
  display:flex !important;
  flex-direction:column;
  gap:12px;
  padding:12px;
  width:100%;
  box-sizing:border-box;
  overflow:visible;
  background:transparent;
}
.entry-edit .field label{ margin-bottom:4px; }
/* Amount/category row - always keep on same row */
.amt-cat-row,
.entry-edit > div[style*="grid-template-columns:30% 70%"],
.entry-edit > div[style*="grid-template-columns: 30% 70%"],
div[style*="display:grid"][style*="grid-template-columns:30% 70%"],
div[style*="display:grid !important"][style*="grid-template-columns:30% 70% !important"]{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 2.33fr) !important;
  width:100% !important;
  gap:8px !important;
  box-sizing:border-box;
}
.amt-cat-row .field,
.entry-edit .amt-cat-row .field {
  margin:0 !important;
  padding:0 !important;
  min-width:0;
  box-sizing:border-box;
}
.amt-cat-row .field:first-child {
  max-width:100%;
  overflow:hidden;
}
.amt-cat-row .field:last-child {
  max-width:100%;
  overflow:hidden;
}
@media(max-width:520px){ 
  /* Keep amount/category on same row even on mobile */
  .amt-cat-row,
  .entry-edit > div[style*="grid-template-columns:30% 70%"],
  .entry-edit > div[style*="grid-template-columns: 30% 70%"],
  div[style*="display:grid"][style*="grid-template-columns:30% 70%"],
  div[style*="display:grid !important"][style*="grid-template-columns:30% 70% !important"]{
    grid-template-columns:30% 70% !important;
    display:grid !important;
    width:100% !important;
  }
}
@media(max-width:480px){ .entry-list{ gap:6px; } .entry-card{ padding:8px; } }

/* Swipe backgrounds */
.entry-swipe-bg{
  position:absolute; inset:0; display:flex; align-items:center; font-weight:800;
  pointer-events:none; opacity:0; transition:opacity .2s ease;
}
.entry-swipe-bg.delete-bg{
  background:linear-gradient(90deg,var(--bad),color-mix(in srgb, var(--bad) 80%, black)); color:#fff; justify-content:flex-end; padding-right:16px;
  box-shadow:inset -2px 0 8px rgba(0,0,0,.3);
}
.entry-swipe-bg.edit-bg{
  background:linear-gradient(270deg,var(--good),color-mix(in srgb, var(--good) 80%, black)); color:#fff; justify-content:flex-start; padding-left:16px;
  box-shadow:inset 2px 0 8px rgba(0,0,0,.3);
}

/* Group list */
.group-list{ display:grid; gap:6px; margin-top:8px; transition:max-height 0.3s ease, opacity 0.3s ease; overflow:hidden; }
.group-list.collapsed{ max-height:0; opacity:0; margin-top:0; }
.group-list.heatmap-view{ 
  display:grid; 
  grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); 
  gap:0; 
  margin-top:8px;
  border-radius:12px;
  overflow:hidden;
  background:var(--input-bg);
  border:1px solid var(--input-border);
}
.group-list.treemap-view {
  display: block;
  position: relative;
  min-height: 600px;
  margin-top: 8px;
  border-radius: 12px;
  padding: 0;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  overflow: visible;
  margin-bottom: 60px; /* Ensure space at bottom so nothing is cut off */
}
@media(min-width: 480px) {
  .group-list.treemap-view {
    padding: 8px;
    min-height: 550px;
    margin-bottom: 32px;
  }
}
@media(min-width: 768px) {
  .group-list.treemap-view {
    padding: 8px;
    min-height: 600px;
    margin-bottom: 40px;
  }
}
@media(min-width: 1024px) {
  .group-list.treemap-view {
    padding: 8px;
    min-height: 650px;
    margin-bottom: 48px;
  }
}
@media(min-width:480px){
  .group-list.heatmap-view{ 
    grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); 
  }
}
@media(min-width:768px){
  .group-list.heatmap-view{ 
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); 
  }
}
@media(min-width:1024px){
  .group-list.heatmap-view{ 
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); 
  }
}
.group-heatmap-item{ 
  position:relative; 
  cursor:pointer; 
  border-radius:0;
  padding:12px 8px; 
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center;
  aspect-ratio:1;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);
  border:1px solid rgba(255,255,255,0.05);
  overflow:hidden;
  min-height:100px;
  background: var(--heatmap-neutral);
}
.treemap-item {
  aspect-ratio: unset !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 10px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 100px !important;
  min-height: 100px !important;
  position: absolute !important;
  z-index: 1;
  margin: 0 !important;
  gap: 0 !important;
}
.treemap-item:hover {
  transform: scale(1.01);
  z-index: 20;
  box-shadow: 0 0 0 2px var(--accent), 0 4px 16px rgba(43, 212, 255, 0.3) !important;
}
.treemap-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(43, 212, 255, 0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 1;
}
.treemap-item:hover::before {
  opacity: 1;
}
/* Modern vibrant colors aligned with Budjeezie accent (#2bd4ff) - 2026 trend */
/* Dark mode - vibrant Budjeezie-inspired palette */
:root:not([data-theme="light"]) .treemap-item[data-tier="red"],
:root:not([data-theme="light"]) .treemap-item[data-state="bad"] {
  background: linear-gradient(135deg, rgba(240, 82, 82, 0.45) 0%, rgba(220, 38, 38, 0.35) 100%) !important;
  border-left: 4px solid rgba(255, 107, 107, 0.9) !important;
  color: #FFD1D1 !important;
  box-shadow: inset 0 0 20px rgba(240, 82, 82, 0.2) !important;
}
:root:not([data-theme="light"]) .treemap-item[data-tier="amber"],
:root:not([data-theme="light"]) .treemap-item[data-state="warn"] {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.45) 0%, rgba(245, 158, 11, 0.35) 100%) !important;
  border-left: 4px solid rgba(255, 193, 7, 0.9) !important;
  color: #FFE8A3 !important;
  box-shadow: inset 0 0 20px rgba(251, 191, 36, 0.2) !important;
}
:root:not([data-theme="light"]) .treemap-item[data-tier="green"],
:root:not([data-theme="light"]) .treemap-item[data-state="good"] {
  background: linear-gradient(135deg, rgba(35, 209, 139, 0.45) 0%, rgba(22, 163, 74, 0.35) 100%) !important;
  border-left: 4px solid rgba(74, 222, 128, 0.9) !important;
  color: #A7F3D0 !important;
  box-shadow: inset 0 0 20px rgba(35, 209, 139, 0.2) !important;
}
:root:not([data-theme="light"]) .treemap-item[data-tier="neutral"] {
  background: linear-gradient(135deg, rgba(43, 212, 255, 0.3) 0%, rgba(43, 212, 255, 0.2) 100%) !important;
  border-left: 4px solid rgba(43, 212, 255, 0.8) !important;
  color: #B3E8FF !important;
  box-shadow: inset 0 0 20px rgba(43, 212, 255, 0.15) !important;
}
/* Light mode - vibrant, modern, professional */
:root[data-theme="light"] .treemap-item[data-tier="red"] {
  background: linear-gradient(135deg, #FFE8EA 0%, #FFD1D6 100%) !important;
  border-left: 4px solid #FF6B7A !important;
  color: #8B1A1A !important;
  box-shadow: inset 0 0 20px rgba(255, 107, 122, 0.1) !important;
}
:root[data-theme="light"] .treemap-item[data-tier="amber"] {
  background: linear-gradient(135deg, #FFF5E8 0%, #FFE8CC 100%) !important;
  border-left: 4px solid #FFA94D !important;
  color: #7A3A0A !important;
  box-shadow: inset 0 0 20px rgba(255, 169, 77, 0.1) !important;
}
:root[data-theme="light"] .treemap-item[data-tier="green"] {
  background: linear-gradient(135deg, #E8F7ED 0%, #D4F2E0 100%) !important;
  border-left: 4px solid #4ADE80 !important;
  color: #0F4C2A !important;
  box-shadow: inset 0 0 20px rgba(74, 222, 128, 0.1) !important;
}
:root[data-theme="light"] .treemap-item[data-tier="neutral"] {
  background: linear-gradient(135deg, #E6F7FA 0%, #D1F0F5 100%) !important;
  border-left: 4px solid #25A9C0 !important;
  color: #0A4A5A !important;
  box-shadow: inset 0 0 20px rgba(37, 169, 192, 0.1) !important;
}
/* Ensure text is always readable and properly positioned */
.treemap-item .heatmap-name,
.treemap-item .heatmap-amount,
.treemap-item .heatmap-percent {
  position: relative;
  z-index: 2;
}
.treemap-item .heatmap-insight-btn {
  z-index: 15 !important;
}
.treemap-item .heatmap-cog-icon {
  z-index: 10 !important;
}
@media(min-width:480px){
  .group-heatmap-item{ 
    padding:16px 12px; 
    min-height:120px;
  }
}
@media(min-width:768px){
  .group-heatmap-item{ 
    padding:18px 14px; 
    min-height:140px;
  }
}
@media(min-width:1024px){
  .group-heatmap-item{ 
    padding:20px 16px; 
    min-height:160px;
  }
}
/* Calm, token based heatmap backgrounds */
.group-heatmap-item[data-state="good"] {
  background: var(--heatmap-good);
}
.group-heatmap-item[data-state="warn"] {
  background: var(--heatmap-warn);
}
.group-heatmap-item[data-state="bad"] {
  background: var(--heatmap-bad);
}

/* Apply tier-based colors using data-tier attribute - higher specificity to override data-state */
.group-heatmap-item[data-tier="1"] {
  background: var(--heatmap-tier-1) !important;
}
.group-heatmap-item[data-tier="1"] .heatmap-name,
.group-heatmap-item[data-tier="1"] .heatmap-amount {
  color: var(--heatmap-tier-1-text) !important;
}
.group-heatmap-item[data-tier="2"] {
  background: var(--heatmap-tier-2) !important;
}
.group-heatmap-item[data-tier="2"] .heatmap-name,
.group-heatmap-item[data-tier="2"] .heatmap-amount {
  color: var(--heatmap-tier-2-text) !important;
}
.group-heatmap-item[data-tier="3"] {
  background: var(--heatmap-tier-3) !important;
}
.group-heatmap-item[data-tier="3"] .heatmap-name,
.group-heatmap-item[data-tier="3"] .heatmap-amount {
  color: var(--heatmap-tier-3-text) !important;
}
.group-heatmap-item[data-tier="4"] {
  background: var(--heatmap-tier-4) !important;
}
.group-heatmap-item[data-tier="4"] .heatmap-name,
.group-heatmap-item[data-tier="4"] .heatmap-amount {
  color: var(--heatmap-tier-4-text) !important;
}
.group-heatmap-item[data-tier="5"] {
  background: var(--heatmap-tier-5) !important;
}
.group-heatmap-item[data-tier="5"] .heatmap-name,
.group-heatmap-item[data-tier="5"] .heatmap-amount {
  color: var(--heatmap-tier-5-text) !important;
}
.group-heatmap-item[data-tier="6"] {
  background: var(--heatmap-tier-6) !important;
}
.group-heatmap-item[data-tier="6"] .heatmap-name,
.group-heatmap-item[data-tier="6"] .heatmap-amount {
  color: var(--heatmap-tier-6-text) !important;
}
.group-heatmap-item[data-tier="7"] {
  background: var(--heatmap-tier-7) !important;
}
.group-heatmap-item[data-tier="7"] .heatmap-name,
.group-heatmap-item[data-tier="7"] .heatmap-amount {
  color: var(--heatmap-tier-7-text) !important;
}
.group-heatmap-item[data-tier="8"] {
  background: var(--heatmap-tier-8) !important;
}
.group-heatmap-item[data-tier="8"] .heatmap-name,
.group-heatmap-item[data-tier="8"] .heatmap-amount {
  color: var(--heatmap-tier-8-text) !important;
}
.group-heatmap-item[data-tier="9"] {
  background: var(--heatmap-tier-9) !important;
}
.group-heatmap-item[data-tier="9"] .heatmap-name,
.group-heatmap-item[data-tier="9"] .heatmap-amount {
  color: var(--heatmap-tier-9-text) !important;
}
.group-heatmap-item[data-tier="10"] {
  background: var(--heatmap-tier-10) !important;
}
.group-heatmap-item[data-tier="10"] .heatmap-name,
.group-heatmap-item[data-tier="10"] .heatmap-amount {
  color: var(--heatmap-tier-10-text) !important;
}

.group-heatmap-item:hover{ 
  transform:scale(1.08);
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 8px 24px rgba(0,0,0,0.4);
  border-color:color-mix(in srgb, var(--accent) 80%, transparent);
  z-index:10;
}
.group-heatmap-item::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
  opacity:0;
  transition:opacity 0.3s ease;
  pointer-events:none;
}
.group-heatmap-item:hover::before{
  opacity:1;
}
.group-heatmap-item .heatmap-name{ 
  font-size:11px; 
  font-weight:700; 
  text-align:center; 
  margin-bottom:6px;
  line-height:1.3;
  max-width:100%;
  padding:0 4px;
  word-wrap:break-word;
  overflow-wrap:break-word;
  hyphens:auto;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  position:relative;
  z-index:2;
}
@media(min-width:480px){
  .group-heatmap-item .heatmap-name{ 
    font-size:12px; 
    margin-bottom:8px;
  }
}
.group-heatmap-item .heatmap-amount{ 
  font-size:13px; 
  font-weight:800; 
  text-align:center;
  margin-bottom:5px;
  line-height:1.2;
  padding:0 4px;
  position:relative;
  z-index:2;
  letter-spacing:-0.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
@media(min-width:480px){
  .group-heatmap-item .heatmap-amount{ 
    font-size:15px; 
    margin-bottom:6px;
  }
}
.group-heatmap-item .heatmap-percent{ 
  font-size:10px; 
  text-align:center;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(0,0,0,0.28);
  color:var(--text);
}
/* Heatmap flip card functionality */
.group-heatmap-item.flip-card{ 
  position:relative; 
  overflow:hidden;
  transform-style:preserve-3d;
}
.group-heatmap-item.flip-card .flip-content{ 
  transition:opacity .3s ease; 
  position:relative;
  z-index:2;
}
.group-heatmap-item.flip-card .flip-back{ 
  transition:opacity .3s ease; 
  opacity:0; 
  position:absolute; 
  inset:0; 
  padding:8px 8px 24px 8px; 
  display:flex; 
  flex-direction:column; 
  gap:4px; 
  align-items:stretch;
  justify-content:flex-start;
  height:100%;
  width:100%;
  box-sizing:border-box;
  background:var(--muted); 
  border:1px solid #1f2a37; 
  border-radius:0;
  overflow-y:auto;
  z-index:1;
  /* Lock to vertical scrolling only - prevent horizontal drag and accidental flips */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.group-heatmap-item.flip-card.flipped .flip-content{ 
  opacity:0; 
  pointer-events:none;
}
.group-heatmap-item.flip-card.flipped .flip-back{ 
  opacity:1; 
  pointer-events:auto;
}
.group-heatmap-item.flip-card .flip-back .sub-heatmap-title{
  font-size:10px;
  font-weight:700;
  text-align:center;
  color:var(--text-dim);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.group-heatmap-item.flip-card .flip-back .sub-heatmap-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
  width:100%;
  height:100%;
  flex:1;
  min-height:0;
  /* Prevent horizontal scrolling/dragging of day cards */
  touch-action: pan-y;
  overflow-x: hidden;
}
.group-heatmap-item.flip-card .flip-back .sub-heatmap-day{
  /* Removed aspect-ratio:1 - let height fit content naturally */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6px 4px;
  border-radius:4px;
  font-size:8px;
  font-weight:600;
  text-align:center;
  position:relative;
  overflow:visible;
  cursor:pointer;
  transition:transform 0.15s ease, opacity 0.15s ease;
  width:100%;
  height:auto;
  min-height:32px;
  transform-origin:center center;
}
.group-heatmap-item.flip-card .flip-back .sub-heatmap-day:hover{
  opacity:0.9;
  z-index:10;
}
.group-heatmap-item.flip-card .flip-back .sub-heatmap-day:active{
  opacity:0.8;
}
.group-heatmap-item.flip-card .flip-back .sub-heatmap-day-label{
  font-size:7px;
  opacity:0.7;
  margin-bottom:1px;
}
.group-heatmap-item.flip-card .flip-back .sub-heatmap-day-value{
  font-size:9px;
  font-weight:700;
  line-height:1;
}
@media(min-width:480px){
  .group-heatmap-item.flip-card .flip-back{ padding:10px 10px 28px 10px; gap:6px; }
  .group-heatmap-item.flip-card .flip-back .sub-heatmap-title{ font-size:11px; margin-bottom:6px; }
  .group-heatmap-item.flip-card .flip-back .sub-heatmap-grid{ gap:4px; }
  .group-heatmap-item.flip-card .flip-back .sub-heatmap-day{ padding:8px 6px; font-size:9px; min-height:36px; }
  .group-heatmap-item.flip-card .flip-back .sub-heatmap-day-label{ font-size:8px; }
  .group-heatmap-item.flip-card .flip-back .sub-heatmap-day-value{ font-size:10px; }
}
@media(min-width:768px){
  .group-heatmap-item.flip-card .flip-back{ padding:12px 12px 32px 12px; gap:8px; }
  .group-heatmap-item.flip-card .flip-back .sub-heatmap-title{ font-size:12px; margin-bottom:8px; }
  .group-heatmap-item.flip-card .flip-back .sub-heatmap-grid{ gap:5px; }
  .group-heatmap-item.flip-card .flip-back .sub-heatmap-day{ padding:8px 6px; font-size:10px; min-height:40px; }
  .group-heatmap-item.flip-card .flip-back .sub-heatmap-day-label{ font-size:9px; }
  .group-heatmap-item.flip-card .flip-back .sub-heatmap-day-value{ font-size:11px; }
}
@media(min-width:480px){
  .group-heatmap-item .heatmap-percent{ 
    font-size:11px; 
    padding:4px 8px;
    border-radius:12px;
  }
}
.group-row{
  display:grid; grid-template-columns:1fr auto auto auto; align-items:center;
  gap:12px; padding:8px 0; border-bottom:1px solid var(--border-muted); cursor:pointer; transition:background .2s ease;
  position:relative; touch-action:pan-y; -webkit-user-select:none; user-select:none;
}
.group-row:hover{ background:var(--input-bg); border-radius:8px; padding:8px 12px; margin:0 -12px; }
.group-row .gname{ font-size:14px; font-weight:600; color:var(--text); text-align:left; min-width:0; }
.group-row .gname-daily{ font-size:11px; color:var(--text-dim); text-align:right; white-space:nowrap; min-width:60px; }
.group-row .gval{ font-size:16px; font-weight:700; color:var(--text); text-align:right; white-space:nowrap; min-width:80px; }
.group-row .gperc{ font-size:12px; color:var(--text-dim); text-align:right; white-space:nowrap; min-width:40px; }

/* =======================================================================================
   Stats and analytics
   ======================================================================================= */
.stats{ 
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:10px; 
  overflow:visible; 
  width:100%;
  margin:0;
  padding:0;
}
@media(min-width:1024px){ 
  .stats{ 
    grid-template-columns:repeat(3,1fr); 
  } 
}
@media(max-width:480px){ 
  .stats{ 
    gap:8px; 
    grid-template-columns:1fr 1fr;
  } 
}
@media(max-width:360px){
  .stats{
    grid-template-columns:1fr;
  }
}
.stat{ background:var(--muted); border:1px solid var(--border); padding:12px; border-radius:14px; position:relative; overflow:hidden; }
.stat .k{ font-size:12px; color:var(--text-dim); }
.stat .v{ font-variant-numeric:tabular-nums; font-size:18px; font-weight:800; }
.stat .subtext{ font-size:10px; color:var(--text-dim); margin-top:2px; opacity:.8; }
.stat.good .v{ color:var(--good); } .stat.warn .v{ color:var(--warn); } .stat.bad .v{ color:var(--bad); }
.stat.clickable{ cursor:pointer; transition:all .2s ease; }
.stat.clickable:hover{ background:var(--hover-bg); border-color:var(--accent); }
.stat.flip-card{ transition:all .3s ease; position:relative; overflow:visible; }
.stat.flip-card .flip-content{ transition:opacity .3s ease; }
.stat.flip-card .flip-back{
  transition:opacity .3s ease; opacity:0; position:absolute; inset:0; padding:12px;
  display:flex; flex-direction:column; gap:0; background:var(--muted); border:1px solid var(--border); border-radius:14px;
  overflow:visible; justify-content:center; align-items:stretch;
}
.stat.flip-card.flipped .flip-content{ opacity:0; }
.stat.flip-card.flipped .flip-back{ opacity:1; }
.stat.flip-card .flip-back .flip-indicator{
  position:absolute; top:8px; right:8px; width:16px; height:16px; background:var(--accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--bg); font-weight:bold;
}

/* Analytics charts and tiles */
.analytics-charts{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:20px; width:100%; max-width:100%; }
@media(min-width:768px){ .analytics-charts{ grid-template-columns:repeat(2,1fr); gap:20px; } }
@media(min-width:1024px){ .analytics-charts{ grid-template-columns:repeat(3,1fr); gap:24px; max-width:none; } }
#analyticsStats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:20px; width:100%; }
@media(min-width:1024px){ #analyticsStats{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; } }
.chart-container{
  background:var(--input-bg); border:1px solid var(--input-border); border-radius:12px; padding:14px; width:100%; box-sizing:border-box; max-width:100%;
  display:flex; flex-direction:column; align-items:center;
}
@media(min-width:1024px){ .chart-container{ padding:20px; } }
.chart-container h4{ margin:0 0 12px; font-size:14px; color:var(--text-dim); font-weight:600; width:100%; text-align:center; }
@media(min-width:1024px){ .chart-container h4{ font-size:clamp(16px,1.5vw,18px); margin-bottom:16px; } }
.chart{
  min-height:200px; display:flex; align-items:flex-start; justify-content:center;
  color:var(--text-dim); font-size:14px; background:var(--panel); border-radius:8px; border:1px dashed var(--border-muted);
  width:100%; max-width:100%; padding:12px; box-sizing:border-box; overflow-x:auto; overflow-y:visible;
  position:relative;
  visibility:visible !important;
  opacity:1 !important;
}
@media(min-width:1024px){ .chart{ min-height:clamp(250px,30vh,400px); font-size:16px; padding:16px; } }

.analytics-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.analytics-stat{ 
  background:var(--input-bg); border:1px solid var(--input-border); border-radius:8px; padding:12px; text-align:center; 
  position:relative; overflow:visible; cursor:pointer; transition:all .2s ease;
}
.analytics-stat:hover{ background:#1a2530; border-color:var(--accent); }
.analytics-stat.flip-card{ transition:all .3s ease; }
.analytics-stat.flip-card .flip-content{ transition:opacity .3s ease; }
.analytics-stat.flip-card .flip-back{
  transition:opacity .3s ease; opacity:0; position:absolute; inset:0; padding:12px;
  display:flex; flex-direction:column; gap:0; background:var(--input-bg); border:1px solid var(--border-muted); border-radius:8px;
  overflow:visible; justify-content:center; align-items:center; text-align:center;
}
.analytics-stat.flip-card.flipped .flip-content{ opacity:0; }
.analytics-stat.flip-card.flipped .flip-back{ opacity:1; }
.analytics-stat.flip-card .flip-back .flip-indicator{
  position:absolute; top:8px; right:8px; width:16px; height:16px; background:var(--accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--bg); font-weight:bold;
}
.analytics-stat .stat-label{ font-size:12px; color:var(--text-dim); margin-bottom:4px; }
.analytics-stat .stat-value{ font-size:16px; font-weight:700; color:var(--accent); }
@media(min-width:1024px){
  .analytics-stat .stat-label{ font-size:14px; margin-bottom:8px; }
  .analytics-stat .stat-value{ font-size:20px; }
  .analytics-stat{ padding:16px; }
}
@media(min-width:1440px){
  .analytics-stat .stat-label{ font-size:15px; margin-bottom:10px; }
  .analytics-stat .stat-value{ font-size:24px; }
  .analytics-stat{ padding:20px; }
}

/* =======================================================================================
   Dialogs
   ======================================================================================= */
dialog{
  border:1px solid var(--border-muted); border-radius:18px; background:var(--panel); color:var(--text); padding:0;
  box-shadow:var(--shadow); width:min(560px,96vw); max-height:85vh; overflow:auto;
  margin:auto; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:1000; -webkit-user-select:none; user-select:none; touch-action:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
@media(min-width:768px){
  dialog{
    width:min(600px, calc(100vw - 2rem)) !important;
    max-width:600px !important; min-width:400px !important;
    position:fixed !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; margin:0 !important;
  }
}
@media(min-width:1024px){
  dialog{ width:min(600px, calc(100vw - 4rem)) !important; max-width:600px !important; }
}
dialog::backdrop{ background:rgba(0,0,0,.6); }
/* Fix for 481px - 768px range - ensure dialogs are properly sized and visible */
@media(min-width:481px) and (max-width:768px){
  dialog{
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 40px) !important;
    border-radius: 16px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
  }
}
@media(max-width:480px){
  dialog{ width:95vw; max-height:80vh; border-radius:12px; top:50%; transform:translate(-50%,-50%); }
}
@media(max-width:480px) and (display-mode: standalone){
  dialog{
    position:fixed !important;
    top: calc(env(safe-area-inset-top,0) + 20px) !important;
    left:50% !important; transform:translateX(-50%) !important;
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px) !important;
    width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 20px) !important;
    margin:0 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; z-index:1000 !important;
  }
  dialog[open]{ display:block !important; }
}
.dlg-h{
  padding:14px; border-bottom:1px solid var(--border-muted); display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; background:var(--panel); z-index:1;
}
.dlg-b{ 
  padding:16px; 
  overflow-y:auto; 
  -webkit-overflow-scrolling:touch; 
  overscroll-behavior:contain; 
  /* CRITICAL: Remove max-height constraint - let flex handle sizing */
  /* Dialog should use flexbox: display:flex; flex-direction:column; */
  /* Content area should use: flex:1; min-height:0; max-height:none; overflow-y:auto; */
}
@media(min-width:1024px){ .dlg-b{ padding:20px; } }

/* Ensure category info dialog content uses flexbox properly */
.category-info-dialog .dlg-b {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

/* Regular Payment dialog specifics */
#regularPaymentDialog .dlg-b{ padding:20px; }
@media(min-width:1024px){ #regularPaymentDialog .dlg-b{ padding:24px; } }
#regularPaymentDialog .field{ display:flex; flex-direction:column; gap:8px; }
#regularPaymentDialog .field label{ display:block; margin:0 0 8px; line-height:1.4; font-size:13px; font-weight:600; color:var(--text); }
@media(min-width:1024px){ #regularPaymentDialog .field label{ font-size:14px; margin-bottom:10px; } }
#regularPaymentDialog input,#regularPaymentDialog select{
  width:100%; padding:12px; font-size:14px; border:1px solid var(--input-border); border-radius:8px; background:var(--input-bg); color:var(--text); box-sizing:border-box; min-width:0;
}
#regularPaymentDialog input:focus,#regularPaymentDialog select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent); }
@media(min-width:1024px){ #regularPaymentDialog input,#regularPaymentDialog select{ padding:14px; font-size:15px; } }
#regularPaymentDialog .row{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:480px){ #regularPaymentDialog .row{ grid-template-columns:2fr 1fr; } }

/* Regular payment indicator styling */
.regular-payment-indicator:hover{
  background:rgba(255,149,0,0.2) !important;
}
.regular-payment-indicator:active{
  background:rgba(255,149,0,0.3) !important;
}

/* Chip selectors - used by preferences dialog */
.chip-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.chip-selector-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--panel);
  border: 2px solid var(--border-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: var(--text);
  user-select: none;
}
.chip-selector-option:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}
.chip-selector-option input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
}
.chip-selector-option.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--accent);
  font-weight: 600;
}
.chip-selector-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =======================================================================================
   Lobe Chat - Modern AI Chat Interface
   ======================================================================================= */
#chatDialog{
  background:linear-gradient(135deg, var(--bg) 0%, var(--panel) 100%);
  border:none;
  border-radius:0;
  padding:0;
  margin:0;
  width:100vw;
  height:100dvh;
  max-width:100vw;
  max-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:fixed;
  inset:0;
  opacity:0;
  visibility:hidden;
  transform:scale(0.95);
  transition:opacity .3s cubic-bezier(0.4, 0, 0.2, 1), 
             transform .3s cubic-bezier(0.4, 0, 0.2, 1),
             visibility .3s;
}
#chatDialog[open]{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}
#chatDialog::backdrop{
  background:rgba(0,0,0,.90);
  backdrop-filter:blur(16px) saturate(150%);
  opacity:0;
  transition:opacity .3s ease;
}
#chatDialog[open]::backdrop{
  opacity:1;
}

@media(min-width:769px){
  #chatDialog{
    width:min(900px, 90vw);
    height:min(720px, 85vh);
    border-radius:24px;
    top:50%;
    left:50%;
    inset:auto;
    transform:translate(-50%,-50%) scale(0.95);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
      0 24px 48px rgba(0,0,0,.4),
      0 48px 96px rgba(0,0,0,.3);
  }
  #chatDialog[open]{
    transform:translate(-50%,-50%) scale(1);
  }
}

/* Lobe Chat Container */
.lobe-chat-container{
  display:flex;
  flex-direction:column;
  height:100%;
  width:100%;
  background:transparent;
  overflow:hidden;
  position:relative;
}

/* Lobe Chat Header */
.lobe-chat-header{
  flex-shrink:0;
  background:var(--panel, #121821);
  backdrop-filter:blur(20px);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 8%, transparent);
  padding:16px 20px;
  padding-top:calc(16px + env(safe-area-inset-top,0));
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 1px 0 0 color-mix(in srgb, var(--accent) 3%, transparent);
}
.lobe-chat-header-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
}
.lobe-chat-header-right{
  display:flex;
  align-items:center;
  gap:8px;
}
.lobe-avatar{
  width:40px;
  height:40px;
  border-radius:12px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent) 0%, color-mix(in srgb, #7c3aed 15%, transparent) 100%);
  border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 10%, transparent);
  overflow:hidden;
}
.lobe-avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:4px;
}
.lobe-avatar-small{
  width:32px;
  height:32px;
  border-radius:10px;
}
.lobe-avatar-small img{
  padding:2px;
}
.lobe-chat-title-group{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.lobe-chat-title{
  font-size:16px;
  font-weight:600;
  color:var(--text);
  margin:0;
  line-height:1.2;
  letter-spacing:-0.01em;
}
.lobe-chat-status{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--text-dim);
}
.lobe-status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--good);
  box-shadow:0 0 8px rgba(35,209,139,0.5);
  animation:lobePulse 2s ease-in-out infinite;
}
@keyframes lobePulse{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.7; transform:scale(0.9); }
}
.lobe-status-text{
  font-weight:500;
}
.lobe-icon-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  background:transparent;
  border:1px solid transparent;
  color:var(--text-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color:transparent;
}
.lobe-icon-btn:hover{
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  border-color:color-mix(in srgb, var(--accent) 15%, transparent);
  color:var(--accent);
  transform:translateY(-1px);
}
.lobe-icon-btn:active{
  transform:translateY(0);
}

/* Lobe Messages Area */
.lobe-chat-messages-area{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
  background:transparent;
  min-height:0;
}
.lobe-chat-messages{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:24px 20px 100px 20px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.lobe-message{
  display:flex;
  gap:12px;
  animation:lobeMessageSlideIn .4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity:1;
}
@keyframes lobeMessageSlideIn{
  from{ opacity:0; transform:translateY(16px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.lobe-message.user{
  flex-direction:row;
  justify-content:flex-end;
}
.lobe-message.assistant{
  flex-direction:row;
  justify-content:flex-start;
}
/* Avatar removed - no longer needed */
.lobe-message-avatar{
  display:none !important;
}
.lobe-message-content-wrapper{
  flex:1;
  max-width:85%; /* Increased from calc(100% - 44px) since no avatar */
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lobe-message.user .lobe-message-content-wrapper{
  align-items:flex-end;
}
.lobe-message.assistant .lobe-message-content-wrapper{
  align-items:flex-start;
}
.lobe-message-content{
  padding:14px 18px;
  border-radius:8px;
  line-height:1.65;
  font-size:14.5px;
  word-wrap:break-word;
  overflow-wrap:break-word;
  max-width:100%;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  transition:all .2s ease;
}
.lobe-message.user .lobe-message-content{
  background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, black) 100%);
  color:var(--bg);
  font-weight:500;
  border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
}
.lobe-message.assistant .lobe-message-content{
  background:color-mix(in srgb, var(--muted) 60%, transparent);
  backdrop-filter:blur(8px);
  color:var(--text);
  border:1px solid color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
}

/* Rich text formatting in Lobe messages */
.lobe-message.assistant .lobe-message-content p{
  margin:.8em 0;
}
.lobe-message.assistant .lobe-message-content p:first-child{ margin-top:0; }
.lobe-message.assistant .lobe-message-content p:last-child{ margin-bottom:0; }
.lobe-message.assistant .lobe-message-content pre{
  background:rgba(10,14,20,0.8);
  padding:16px;
  border-radius:12px;
  overflow-x:auto;
  margin:12px 0;
  border:1px solid rgba(43,212,255,0.12);
  font-size:13px;
  line-height:1.6;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.lobe-message.assistant .lobe-message-content code{
  background:rgba(43,212,255,0.08);
  padding:3px 8px;
  border-radius:6px;
  font-family:SF Mono,Monaco,"Courier New",monospace;
  font-size:.9em;
  border:1px solid rgba(43,212,255,0.12);
  color:var(--accent);
}
.lobe-message.assistant .lobe-message-content pre code{
  background:transparent;
  padding:0;
  border:none;
  font-size:inherit;
  color:var(--text);
}
.lobe-message.assistant .lobe-message-content a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition:all .2s ease;
}
.lobe-message.assistant .lobe-message-content a:hover{
  color:color-mix(in srgb, var(--accent) 120%, white);
  border-bottom-color:color-mix(in srgb, var(--accent) 120%, white);
}
.lobe-message.assistant .lobe-message-content ul,
.lobe-message.assistant .lobe-message-content ol{
  margin:12px 0;
  padding-left:24px;
}
.lobe-message.assistant .lobe-message-content li{
  margin:8px 0;
}
.lobe-message.assistant .lobe-message-content strong{
  font-weight:600;
  color:var(--text);
}
.lobe-message.assistant .lobe-message-content blockquote{
  border-left:3px solid rgba(43,212,255,0.5);
  padding-left:16px;
  margin:12px 0;
  color:var(--text-dim);
  font-style:italic;
  background:rgba(43,212,255,0.03);
  padding:12px 16px;
  border-radius:8px;
}
.lobe-message.assistant .lobe-message-content hr{
  border:none;
  border-top:1px solid rgba(43,212,255,0.12);
  margin:16px 0;
}
.lobe-message.assistant .lobe-message-content table{
  width:100%;
  border-collapse:collapse;
  margin:12px 0;
  border-radius:8px;
  overflow:hidden;
}
.lobe-message.assistant .lobe-message-content th,
.lobe-message.assistant .lobe-message-content td{
  border:1px solid rgba(43,212,255,0.12);
  padding:10px 14px;
  text-align:left;
}
.lobe-message.assistant .lobe-message-content th{
  background:rgba(43,212,255,0.08);
  font-weight:600;
  color:var(--accent);
}

/* Lobe Typing Indicator */
.lobe-typing-indicator{
  display:flex;
  gap:12px;
  padding:0 20px 20px 20px;
  align-items:center;
}
.lobe-typing-dots{
  display:flex;
  gap:6px;
  padding:12px 18px;
  background:rgba(29,39,51,0.6);
  backdrop-filter:blur(8px);
  border:1px solid rgba(43,212,255,0.08);
  border-radius:16px;
  border-bottom-left-radius:6px;
}
.lobe-typing-dots span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2bd4ff;
  animation:lobeTypingDot 1.4s infinite ease-in-out;
  box-shadow:0 0 6px rgba(43,212,255,0.3);
}
.lobe-typing-dots span:nth-child(1){ animation-delay:-.32s; }
.lobe-typing-dots span:nth-child(2){ animation-delay:-.16s; }
@keyframes lobeTypingDot{
  0%,80%,100%{ opacity:.3; transform:scale(.75); }
  40%{ opacity:1; transform:scale(1.1); }
}

/* Lobe Chat Input Area */
.lobe-chat-input-area{
  flex-shrink:0;
  background:transparent;
  padding:12px 20px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0));
  position:sticky;
  bottom:0;
  z-index:100;
}
.lobe-input-container{
  max-width:100%;
}
.lobe-input-wrapper{
  display:flex;
  align-items:flex-end;
  gap:10px;
  background:rgba(29,39,51,0.6);
  backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius:12px;
  padding:6px 6px 6px 16px;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
}
.lobe-input-wrapper:focus-within{
  background:rgba(29,39,51,0.7);
  border-color:color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow:0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
}
/* Remove focus highlight on mobile iOS PWA */
@media(max-width:768px){
  .lobe-input-wrapper:focus-within{
    background:rgba(29,39,51,0.6);
    border-color:color-mix(in srgb, var(--accent) 12%, transparent);
    box-shadow:0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
  }
}
.lobe-input-field{
  flex:1;
  background:transparent;
  border:none;
  color:var(--text);
  font-size:15px;
  font-family:inherit;
  line-height:1.5;
  min-height:32px;
  max-height:140px;
  resize:none;
  outline:none;
  padding:6px 0;
  overflow-y:auto;
  color-scheme:dark;
}
.lobe-input-field::placeholder{
  color:#6b7280;
}
.lobe-input-field::-webkit-scrollbar{
  width:6px;
}
.lobe-input-field::-webkit-scrollbar-thumb{
  background:rgba(43,212,255,0.2);
  border-radius:3px;
}
.lobe-send-btn{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:10px;
  background:linear-gradient(135deg, #2bd4ff 0%, #1e9fd6 100%);
  color:#0a0e14;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 12px rgba(43,212,255,0.2);
}
.lobe-send-btn:enabled:hover{
  background:linear-gradient(135deg, #5de0ff 0%, #2bd4ff 100%);
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 6px 16px rgba(43,212,255,0.3);
}
.lobe-send-btn:enabled:active{
  transform:translateY(0) scale(0.98);
}
.lobe-send-btn:disabled{
  background:rgba(43,212,255,0.1);
  color:#6b7280;
  cursor:not-allowed;
  opacity:.5;
  box-shadow:none;
}
.lobe-send-icon{
  transition:transform .2s ease;
}
.lobe-send-btn:enabled:hover .lobe-send-icon{
  transform:rotate(-10deg) translateX(1px);
}
.lobe-input-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  padding:0 4px;
  font-size:12px;
  color:#6b7280;
}
.lobe-input-hint{
  display:flex;
  align-items:center;
  gap:6px;
}
.lobe-input-hint svg{
  opacity:0.7;
}
/* Hide Shift+Enter hint on mobile/PWA */
@media(max-width:768px){
  .lobe-input-hint{
    display:none !important;
  }
}
.lobe-char-count{
  font-variant-numeric:tabular-nums;
}

/* Lobe Mobile Responsiveness */
@media(max-width:768px){
  #chatDialog{
    border-radius:0;
    width:100vw;
    height:100dvh;
    max-width:100vw;
    max-height:100dvh;
    top:0;
    left:0;
    transform:none;
    margin:0;
  }
  #chatDialog[open]{
    transform:none;
  }
  .lobe-chat-header{
    padding:12px 16px;
    padding-top:calc(12px + env(safe-area-inset-top,0));
  }
  .lobe-chat-messages{
    padding:16px 0;
    padding-bottom:calc(120px + env(safe-area-inset-bottom, 0)); /* Extra padding for mobile keyboard */
    gap:12px;
  }
  .lobe-message{
    width:100%;
    padding:0 16px;
  }
  .lobe-message-content-wrapper{
    max-width:100%;
    width:100%;
  }
  .lobe-message.user .lobe-message-content-wrapper{
    align-items:stretch;
  }
  .lobe-message.assistant .lobe-message-content-wrapper{
    align-items:stretch;
  }
  .lobe-message-content{
    font-size:14px;
    padding:14px 16px;
    width:100%;
    border-radius:6px;
  }
  .lobe-message.user .lobe-message-content{
    border-radius:6px;
  }
  .lobe-message.assistant .lobe-message-content{
    border-radius:6px;
  }
  .lobe-chat-input-area{
    padding:12px 16px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0));
    position:sticky;
    bottom:0;
    background:var(--panel, #0d141c);
    z-index:100;
    width:100%;
    box-sizing:border-box;
  }
  .lobe-input-container{
    width:100%;
    max-width:100%;
  }
  .lobe-input-wrapper{
    padding:8px 12px;
    width:100%;
    border-radius:10px;
  }
  .lobe-input-field{
    font-size:16px; /* Prevents zoom on iOS */
    width:100%;
  }
}

/* =======================================================================================
   AI OCR and misc utilities
   ======================================================================================= */
.ai-prompt-section{ background:var(--input-bg); border:1px solid var(--border-muted); border-radius:8px; padding:12px; margin-top:8px; }
.ai-prompt{ 
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-prompt svg{
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.prompt-item{ margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border-muted); }
.prompt-item:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
.prompt-item strong{ color:var(--accent); font-size:14px; display:block; margin-bottom:4px; }

.invisible{ visibility:hidden; }
.tiny{ font-size:12px; color:var(--text-dim); white-space:pre-wrap; }

/* Note: .toastarea and .toast styles are defined in separate style block below */

/* Sync status button in header */
#syncStatusBtn, #syncStatusFloat{ transition:all .3s ease; }
#syncStatusBtn.syncing, #syncStatusFloat.syncing{ background:#2bd4ff; border-color:#2bd4ff; }
#syncStatusBtn.success, #syncStatusFloat.success{ background:#23d18b; border-color:#23d18b; }
#syncStatusBtn.error, #syncStatusFloat.error{ background:#ff6b6b; border-color:#ff6b6b; }
#syncStatusBtn.disabled, #syncStatusFloat.disabled{ opacity:0.4; cursor:help; }
#syncStatusBtn svg, #syncStatusFloat svg{ transition:all .3s ease; }
#syncStatusBtn.success svg, #syncStatusBtn.error svg, #syncStatusFloat.success svg, #syncStatusFloat.error svg{ fill:#fff; }

/* =======================================================================================
   Desktop scrollbars
   ======================================================================================= */
@media (pointer:fine){
  .daywrap, .weekwrap, .mweek .weekrow, body{ scrollbar-width:thin; scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track-bg); }
  .daywrap::-webkit-scrollbar, .weekwrap::-webkit-scrollbar, .mweek .weekrow::-webkit-scrollbar, body::-webkit-scrollbar{ height:8px; width:10px; }
  .daywrap::-webkit-scrollbar-track, .weekwrap::-webkit-scrollbar-track, .mweek .weekrow::-webkit-scrollbar-track, body::-webkit-scrollbar-track{ background:var(--scrollbar-track-bg); border-radius:8px; }
  .daywrap::-webkit-scrollbar-thumb, .weekwrap::-webkit-scrollbar-thumb, .mweek .weekrow::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb{
    background:var(--scrollbar-thumb); border-radius:8px; border:1px solid var(--muted);
  }
  .daywrap::-webkit-scrollbar-thumb:hover, .weekwrap::-webkit-scrollbar-thumb:hover, .mweek .weekrow::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover{
    background:var(--scrollbar-thumb-hover);
  }
}
  :root{
    --headerH: 72px;
    --footerH: 56px;
    --padGutter: 12px;
    --seg-bd: #1d2733;
    --seg-bg: #0b0f14;
    --seg-on: #122033;
    --seg-tx: #9aa8b6;
    --seg-on-tx: #e6f2ff;
  }

  /* Note: header#appHeader and main/#app rules are defined in main style block above */
  /* These rules removed to avoid conflicts - use main, #app selector instead of main#app */

  /* Period calendar control bar on one row - STICKY */
  .cal-controls{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap !important; /* CRITICAL: Keep D W M on same row */
    margin-bottom: 10px;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: var(--panel) !important;
    padding: 8px 0 !important;
    margin-top: 0 !important;
    padding-top: 8px !important;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: -14px !important;
    margin-right: -14px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  .cal-controls .left{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cal-controls .cal-toggle {
    flex: 0 0 auto !important; /* Never shrink the D W M toggle */
  }
  /* Mobile: Ensure pills can shrink but D W M stays fixed */
  @media(max-width: 480px) {
    .cal-controls {
      gap: 6px;
    }
    .cal-controls .left {
      gap: 4px;
    }
    .cal-controls .left .pill {
      font-size: 11px;
      padding: 4px 6px;
      white-space: nowrap;
    }
  }

  /* Segmented control for D/W/M */
  .cal-toggle{
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--seg-bd);
    background: var(--seg-bg);
    border-radius: 10px;
    padding: 2px;
    flex: 0 0 auto;
  }
  .cal-toggle > button{
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--seg-tx);
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .05s ease;
  }
  .cal-toggle > button[aria-selected="true"]{
    background: var(--seg-on);
    color: var(--seg-on-tx);
  }
  .cal-toggle > button:active{ transform: translateY(1px); }

  /* Hide the inactive calendar panes */
  #calDayWrap[hidden], #calWeekWrap[hidden], #calMonthWrap[hidden]{ display: none !important; }
  /* Full-height modals that stop above the fixed footer and respect safe areas */
dialog[data-fullheight] {
  position: fixed !important;              /* avoid iOS dialog centering quirks */
  inset: env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0) 0 !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: var(--panel) !important;
  display:flex !important;
  flex-direction:column;
  overflow:hidden;
}

/* Make the header stick and the body scroll within the dialog */
dialog[data-fullheight] .dlg-h {
  position: sticky;
  top: 0;
  z-index: 2;
}

dialog[data-fullheight] .dlg-b,
dialog[data-fullheight] .settings-dialog-content,
dialog[data-fullheight] .chat-content {
  /* whichever container is the scrolling body - include them all safely */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Use flex:1 instead of max-height to properly fill space without blank gaps */
  flex: 1;
  min-height: 0;
}

/* Special handling for dayDialog to ensure footer is always visible */
/* Content should fill available space - use flex:1 instead of max-height to avoid blank gaps */
dialog[data-fullheight]#dayDialog .dlg-b {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

/* Optional nicer backdrop */
dialog::backdrop {
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

.toastarea{
  position:fixed !important; 
  /* Position dynamically calculated in JavaScript to overlay overview tabs */
  /* Fallback position if JS hasn't calculated yet */
  top:calc(env(safe-area-inset-top,0) + 80px + 16px) !important; 
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) translateZ(0) !important; /* translateZ(0) creates a new compositing layer */
  z-index:2147483647 !important; /* Maximum z-index - ALWAYS on top */
  display:flex !important; 
  flex-direction:column !important; 
  gap:8px !important;
  width:calc(100vw - 32px) !important;
  max-width:100% !important;
  pointer-events:none !important;
  align-items:center !important;
  /* DO NOT use isolation:isolate - it creates a separate stacking context that prevents toasts from appearing above dialogs */
}
/* Force toastarea to always be on top, even when dialogs/overlays are open */
/* Use multiple selectors to ensure toasts are always visible */
body:has(dialog[open]) .toastarea,
body:has(#prefDialog[open]) .toastarea,
body:has(#receiptLoadingOverlay) .toastarea,
body:has(dialog) .toastarea,
dialog[open] ~ .toastarea,
#prefDialog[open] ~ .toastarea {
  z-index: 2147483647 !important;
  position: fixed !important;
  /* Force above all stacking contexts */
  transform: translateX(-50%) translateZ(0) !important;
}
@media(min-width:768px){
  .toastarea{
    width:calc(100vw - 32px) !important;
    max-width:100% !important;
  }
}
@media(max-width:767px){
  .toastarea{
    width:calc(100vw - 32px) !important;
    max-width:100% !important;
  }
}
.toast{
  pointer-events:auto !important;
  margin:0 !important;
  margin-bottom:0 !important;
  box-sizing:border-box !important;
  width:100% !important;
  flex-shrink:0 !important;
  order:0 !important;
  /* Solid background and border for visibility */
  background:var(--panel) !important;
  border:1px solid rgba(43,212,255,0.3) !important;
  border-radius:12px !important;
  padding:12px 16px !important;
  color:var(--text) !important;
  font-size:14px !important;
  line-height:1.5 !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.4) !important;
  backdrop-filter:blur(8px) !important;
  /* Ensure proper stacking */
  position:relative !important;
  z-index:2147483647 !important;
  opacity:1 !important;
  transform:none !important;
  animation:toastSlideIn 0.3s ease-out !important;
}
.toast.bad{
  background:#1a0f0f !important;
  border-color:#ff6b6b !important;
  color:#ff6b6b !important;
}
.toast.good{
  background:#0f1a14 !important;
  border-color:#23d18b !important;
  color:#23d18b !important;
}
@keyframes toastSlideIn{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Holiday Period Dialog - Prevent horizontal scrolling on mobile/PWA */
#holidayPeriodDialog{
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}
.holiday-dates-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:100%;
  box-sizing:border-box;
}
@media(max-width:480px){
  .holiday-dates-row{
    grid-template-columns:1fr !important;
  }
}
/* Fix for 481px - 768px range - ensure dialogs are properly sized and visible */
@media(min-width:481px) and (max-width:768px){
  #holidayPeriodDialog{
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 40px) !important;
    margin: 0 !important;
    border-radius: 16px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
  }
  #holidayPeriodDialog .dlg-b{
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 140px) !important;
  }
}
@media(max-width:768px){
  #holidayPeriodDialog{
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)) !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    top: env(safe-area-inset-top, 0) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: env(safe-area-inset-bottom, 0) !important;
    transform: none !important;
    position: fixed !important;
  }
  #holidayPeriodDialog .dlg-b{
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
}

  dialog:not([open]) { display: none !important; }
  dialog { 
    z-index: 10001 !important;
    /* CRITICAL: Do not create stacking context that would prevent toasts from appearing above */
    /* Avoid transform, will-change, filter, opacity < 1, etc. that create stacking contexts */
  }
  dialog::backdrop { 
    background: rgba(0,0,0,.45); 
    z-index: 10000 !important;
  }
  /* CRITICAL: Ensure toastarea is always above dialog backdrops and dialogs */
  /* Note: ::backdrop is a pseudo-element, so sibling selectors don't work on it */
  /* Instead, we rely on z-index and ensuring toastarea is last child of body */
  dialog[open] ~ .toastarea {
    z-index: 2147483647 !important;
  }
  /* Receipt loading overlay - above dialogs but below toasts */
  /* CRITICAL: Must be appended to body, not inside dialog */
  #receiptLoadingOverlay {
    z-index: 30000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  /* Ensure toasts appear above EVERYTHING - highest priority - always visible */
  .toastarea {
    z-index: 2147483647 !important;
    position: fixed !important;
    /* DO NOT use isolation:isolate - it creates a separate stacking context that prevents toasts from appearing above dialogs */
    pointer-events: none !important;
  }
  .toast {
    z-index: 2147483647 !important;
    position: relative !important;
    pointer-events: auto !important;
  }
  /* Force toasts above all dialogs, backdrops, overlays - use !important everywhere */
  body:has(dialog[open]) .toastarea,
  body:has(#prefDialog[open]) .toastarea,
  body:has(#receiptLoadingOverlay) .toastarea,
  body:has(#dayDialog[open]) .toastarea,
  body:has(#archivesModal[open]) .toastarea,
  body:has(#moveTransactionsModal[open]) .toastarea,
  #prefDialog[open] ~ .toastarea,
  dialog[open] ~ .toastarea,
  #dayDialog[open] ~ .toastarea,
  #receiptLoadingOverlay ~ .toastarea,
  #archivesModal[open] ~ .toastarea,
  #moveTransactionsModal[open] ~ .toastarea,
  body:has(#receiptLoadingOverlay) .toastarea {
    z-index: 2147483647 !important;
    position: fixed !important;
    /* Force above all stacking contexts using translateZ */
    transform: translateX(-50%) translateZ(0) !important;
  }
  /* Additional rule to ensure toasts are always visible - target toastarea directly when dialogs are open */
  dialog[open] + .toastarea,
  #dayDialog[open] + .toastarea,
  #prefDialog[open] + .toastarea {
    z-index: 2147483647 !important;
    position: fixed !important;
  }
  /* CRITICAL: Force toastarea to be absolutely on top - override any possible stacking context */
  .toastarea,
  body .toastarea,
  html body .toastarea,
  dialog ~ .toastarea,
  #dayDialog ~ .toastarea,
  #prefDialog ~ .toastarea,
  #receiptLoadingOverlay ~ .toastarea {
    z-index: 2147483647 !important;
    position: fixed !important;
    transform: translateX(-50%) translateZ(0) !important;
  }