.wrap.title{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
header#appHeader .wrap.title{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* =======================================================================================
   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;
}

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;
}

/* Header profile switcher */
.profile-switcher{
  position:relative;
  margin-left:auto;
}
.profile-switcher-btn{
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--border-muted);
  background:var(--input-bg);
  color:var(--text);
  border-radius:999px;
  padding:0 14px;
  height:36px;
  min-height:36px;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.profile-switcher-btn:hover{
  border-color:var(--accent);
}
.profile-switcher-caret{
  transition:transform .2s ease;
}
.profile-switcher-btn[aria-expanded="true"] .profile-switcher-caret,
.profile-switcher[aria-expanded="true"] .profile-switcher-caret{
  transform:rotate(180deg);
}
.profile-switcher-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  background:var(--panel);
  border:1px solid var(--border-muted);
  border-radius:12px;
  padding:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  min-width:200px;
  max-width:min(260px, 90vw);
  width:max-content;
  z-index:10002;
}
.profile-switcher-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:260px;
  overflow-y:auto;
}
.profile-switcher-option{
  width:100%;
  border:none;
  background:transparent;
  padding:8px 10px;
  border-radius:8px;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:background .15s ease;
}
.profile-switcher-option:hover{
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.profile-switcher-option.active{
  background:color-mix(in srgb, var(--accent) 20%, transparent);
  color:var(--accent);
  font-weight:600;
}


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

@media(max-width:640px){
  header#appHeader .actions{
    width:100%;
    justify-content:flex-end;
    row-gap:8px;
    flex-wrap:wrap;
  }
  header#appHeader .profile-switcher{
    order:-1;
    width:auto;
    margin-top:4px;
    margin-left:0;
    margin-right:auto;
    align-self:flex-start;
  }
  header#appHeader .profile-switcher-btn{
    width:auto;
    max-width:calc(100vw - 80px);
    justify-content:flex-start;
  }
}

/* main is the only scroll area and must never hide under header or footer */
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;
  /* Consistent top padding equal to header height - ensures content never hides under header */
  /* JavaScript will update --header-height dynamically, but we have a CSS fallback */
  padding-top: calc(var(--header-height, var(--headerH, 70px)) + env(safe-area-inset-top, 0)) !important;
  /* Padding bottom will be set dynamically by JavaScript based on calendar visibility */
  padding-bottom: calc(var(--footerH, 56px) + 24px + env(safe-area-inset-bottom,0));
  /* Ensure no negative margins can pull content upward */
  margin-top: 0 !important;
}
body.header-collapsed main,
body.header-collapsed #app{
  padding-top: env(safe-area-inset-top, 0);
}
/* Ensure main content never overlaps with fixed header */
main > *:first-child,
#app > *:first-child {
  position:relative;
  z-index:1;
}
/* CRITICAL: Ensure section-overview and overview-content never overlap with appHeader on any screen size */
.section-overview {
  position:relative !important;
  z-index:1 !important;
  /* CRITICAL: z-index must be lower than header (10000) to ensure it never appears behind */
  /* CRITICAL: No negative margins or absolute positioning that could pull content upward */
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  /* Prevent any transforms that could pull it above header */
  transform:none !important;
  -webkit-transform:none !important;
  /* Ensure it starts below header - main's padding-top handles this */
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  /* Ensure it never goes above the header */
  min-height:0 !important;
  overflow:visible !important;
  /* CRITICAL: Ensure stacking context is below header */
  isolation:auto !important;
}
/* 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 */
@supports (-webkit-touch-callout: none){
  main, #app{
    height:100dvh;
    max-height:100dvh;
    /* Use consistent header-height variable */
    padding-top: calc(var(--header-height, var(--headerH, 70px)) + env(safe-area-inset-top, 0)) !important;
    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);
  }
  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;
    /* Use consistent header-height variable */
    padding-top: calc(var(--header-height, var(--headerH, 70px)) + env(safe-area-inset-top, 0)) !important;
    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);} }
@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;
    /* CRITICAL: Ensure padding-top is maintained on desktop - don't override header spacing */
    padding-top: calc(var(--header-height, var(--headerH, 70px)) + env(safe-area-inset-top, 0)) !important;
  }
}
@media(min-width:1440px){
  .wrap{ max-width:1600px; }
  main.wrap, #app.wrap{ 
    max-width:1600px !important; 
    padding:0 64px !important;
    /* CRITICAL: Ensure padding-top is maintained on desktop - don't override header spacing */
    padding-top: calc(var(--header-height, var(--headerH, 70px)) + env(safe-area-inset-top, 0)) !important;
  }
}
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; }
@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 !important; 
  align-items:center; 
  gap:8px; 
  visibility:visible !important;
  opacity:1 !important;
}
.month-nav{ 
  display:flex !important; 
  gap:2px; 
  align-items:center;
  visibility:visible !important;
  opacity:1 !important;
}
.month-btn{
  display:inline-flex !important;
  align-items:center; 
  justify-content:center;
  width:28px; 
  height:28px; 
  border-radius:6px;
  border:1px solid var(--button-secondary-border); 
  background:var(--button-secondary-bg); 
  color:var(--text); 
  cursor:pointer;
  transition:all .2s ease;
  visibility:visible !important;
  opacity:1 !important;
}
.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; flex-wrap:wrap; justify-content:flex-end; }
.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);
  transition:box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Enhanced card shadow in light mode for better depth perception */
:root[data-theme="light"] .card{
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.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 {
    margin-top:0 !important;
    padding:16px !important;
    padding-top:0 !important;
    padding-bottom:80px !important; /* Ensure content is never hidden by footer */
    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 {
    margin-top:0 !important;
    padding-top:20px !important;
  position:relative !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 {
  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"] {
  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 {
    padding:12px;
    padding-top:12px;
  }
}
@media(min-width:1024px){
  .section-overview .overview-content,
  .section-overview .analytics-content,
  .section-overview .regular-payments-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;
}
#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); }

/* 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;
  cursor:pointer;
  -webkit-appearance:none;
  -moz-appearance:textfield;
  appearance:none;
}

/* Flatpickr styling overrides for theme consistency */
.flatpickr-calendar {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
  z-index: 9999 !important; /* Below header (10000) but above most content */
  position: absolute !important;
}

.flatpickr-months {
  background: var(--panel) !important;
  color: var(--text) !important;
}

.flatpickr-month {
  color: var(--text) !important;
}

.flatpickr-weekdays {
  background: var(--muted) !important;
}

.flatpickr-weekday {
  color: var(--text-dim) !important;
}

.flatpickr-day {
  color: var(--text) !important;
  border-color: var(--border-muted) !important;
}
/* Ensure Flatpickr calendar never floats above header on scroll */
.flatpickr-calendar.open {
  position: fixed !important;
  z-index: 9999 !important; /* Below header (10000) */
}

.flatpickr-day:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--button-text) !important;
}

.flatpickr-day.today {
  border-color: var(--accent) !important;
}

.flatpickr-day.today:hover {
  background: var(--hover-bg) !important;
}

.flatpickr-input {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text) !important;
}

.flatpickr-alt-input {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text) !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); }

/* Light mode: Ensure text is visible on buttons and controls */
:root[data-theme="light"] .btn.secondary {
  color: var(--text) !important;
  border-color: var(--button-secondary-border) !important;
}

:root[data-theme="light"] .btn.ghost {
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}

:root[data-theme="light"] .category-collapse-btn,
:root[data-theme="light"] #groupsCollapseText {
  color: var(--text) !important;
}

:root[data-theme="light"] .dlg-h strong,
:root[data-theme="light"] #prefDialogTitle,
:root[data-theme="light"] .pref-section-title {
  color: var(--text) !important;
}

/* Light mode: Ensure text is visible on buttons and controls */
:root[data-theme="light"] .btn.secondary {
  color: var(--text) !important;
  border-color: var(--button-secondary-border) !important;
}

:root[data-theme="light"] .btn.ghost {
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}

:root[data-theme="light"] .category-collapse-btn,
:root[data-theme="light"] #groupsCollapseText {
  color: var(--text) !important;
}

:root[data-theme="light"] .dlg-h strong,
:root[data-theme="light"] #prefDialogTitle,
:root[data-theme="light"] .pref-section-title {
  color: var(--text) !important;
}
.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,
.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-amt.income{ color:#23d18b; }
.entry-amt.expense{ color:#ff6b6b; }
.entry-amt-sign{ margin-right:4px; font-size:14px; opacity:.8; }
.entry-card-income{ border-color:rgba(35,209,139,0.3); background:color-mix(in srgb, var(--input-bg) 80%, #06251b); }
.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; }
@media (prefers-color-scheme: light) {
  .entry-note{ color:var(--text); opacity:0.8; }
}
.entry-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.entry-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text-dim);
}
.entry-badge.income{ background:rgba(35,209,139,0.15); border-color:rgba(35,209,139,0.4); color:#23d18b; }
.entry-badge.receipt{ background:rgba(43,212,255,0.12); border-color:rgba(43,212,255,0.4); color:var(--accent); }
.entry-receipt-btn{ font-size:12px !important; padding:6px 10px !important; }
.entry-actions{ display:flex; gap:8px; justify-content:flex-end; }
.entry-actions .btn{ padding:8px 10px; border-radius:10px; }
.entry-edit{ display:block !important; gap:8px; }
.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);
}
@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;
}
@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;
  }
}
.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);
  z-index:10;
  border-color:color-mix(in srgb, var(--accent) 80%, transparent);
}
.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;
}
.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;
  -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:10px;
  background:rgba(0,0,0,0.2);
}
/* 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; 
  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;
}
.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;
}
.group-heatmap-item.flip-card .flip-back .sub-heatmap-day{
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:6px 4px;
  min-height:60px;
  position:relative;
}
.group-heatmap-item.flip-card .flip-back .sub-heatmap-day-label{
  font-size:10px;
  font-weight:600;
  margin-bottom:4px;
  text-align:center;
  line-height:1.2;
  flex-shrink:0;
}
.group-heatmap-item.flip-card .flip-back .sub-heatmap-day-value{
  font-size:11px;
  font-weight:700;
  writing-mode:vertical-rl;
  text-orientation:upright;
  transform:rotate(180deg);
  margin-top:auto;
  flex:1;
  display:flex;
  align-items:center;
  justify-content: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; 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:3px; }
  .group-heatmap-item.flip-card .flip-back .sub-heatmap-day{ padding:3px; font-size:9px; }
  .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; 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:4px; }
  .group-heatmap-item.flip-card .flip-back .sub-heatmap-day{ padding:4px; font-size:10px; }
  .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; }
}

/* =======================================================================================
   Primary Add Action
   ======================================================================================= */
.primary-add-card{
  margin-top:20px;
  padding:18px;
  border:1px solid rgba(43,212,255,0.15);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(43,212,255,0.1), rgba(35,209,139,0.08));
  display:flex;
  flex-direction:column;
  gap:8px;
}
.primary-add-btn{
  border:none;
  border-radius:12px;
  padding:18px;
  background:linear-gradient(135deg,#2b9fff,#23d18b);
  color:#0b111a;
  font-size:18px;
  font-weight:700;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 20px rgba(35,209,139,0.25);
}
.primary-add-btn:active{ transform:translateY(1px); box-shadow:0 4px 12px rgba(35,209,139,0.2); }
.primary-add-label{ font-size:20px; letter-spacing:.5px; }
.primary-add-sub{ font-size:13px; text-transform:uppercase; letter-spacing:1px; opacity:.8; }
.primary-add-hint{
  margin:0;
  font-size:12px;
  color:var(--text-dim);
}
@media(min-width:768px){
  .primary-add-card{ flex-direction:row; align-items:center; justify-content:space-between; }
  .primary-add-btn{ flex:1; }
  .primary-add-hint{ margin-left:16px; font-size:13px; }
}

/* =======================================================================================
   Mode selection cards
   ======================================================================================= */
.mode-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
}
.mode-card{
  border:1px solid var(--border-muted);
  border-radius:14px;
  background:var(--input-bg);
  padding:16px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  transition:all .2s ease;
}
.mode-card:hover{
  border-color:var(--accent);
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.mode-card-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:700;
  background:rgba(255,255,255,0.1);
  color:var(--text);
}
.mode-card.income .mode-card-icon{ background:rgba(35,209,139,0.15); color:#23d18b; }
.mode-card.expense .mode-card-icon{ background:rgba(255,107,107,0.18); color:#ff6b6b; }
.mode-card-title{ font-size:16px; font-weight:600; color:var(--text); }
.mode-card-desc{ font-size:12px; color:var(--text-dim); }

/* =======================================================================================
   Entry mode indicators
   ======================================================================================= */
.entry-mode-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
  background:rgba(255,107,107,0.15);
  color:#ff8a8a;
}
.entry-mode-pill.income{
  background:rgba(35,209,139,0.15);
  color:#23d18b;
}
.entry-mode-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px;
  border:1px solid var(--border-muted);
  border-radius:999px;
  background:var(--input-bg);
}
.mode-toggle-btn{
  flex:1;
  border:none;
  border-radius:999px;
  padding:8px 12px;
  font-size:14px;
  font-weight:600;
  color:var(--text-dim);
  background:transparent;
  cursor:pointer;
  transition:all .15s ease;
}
.mode-toggle-btn.active{
  background:var(--panel);
  color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
#receiptModeNotice,
#receiptHelperMessage,
#receiptActionHint{
  font-size:12px;
  color:var(--text-dim);
}
.pwa-camera-notice{
  font-size:12px;
  text-align:center;
  color:var(--text-dim);
}

.active-model-banner{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid rgba(43,212,255,0.2);
  border-radius:12px;
  background:rgba(43,212,255,0.08);
  display:flex;
  align-items:center;
  gap:12px;
  transition:all 0.3s ease;
}
.active-model-banner-connected{
  border-color:rgba(35,209,139,0.3);
  background:rgba(35,209,139,0.1);
}
.active-model-banner-disconnected{
  border-color:rgba(255,107,107,0.3);
  background:rgba(255,107,107,0.1);
}
.active-model-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(43,212,255,0.6);
  flex-shrink:0;
  transition:all 0.3s ease;
}
.active-model-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--text-dim);
  margin-bottom:4px;
}
.active-model-name{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.active-model-sep{ opacity:.6; }

/* =======================================================================================
   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 */
/* Landscape mobile handling - iPhone XR and similar (896x414, 812x375, etc.) */
@media(max-width:896px) and (orientation: landscape){
  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;
  }
  /* Override for preferences dialog - use mobile layout in landscape */
  #prefDialog{
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
  }
  #prefDialog .pref-container{
    flex-direction: column !important;
  }
  #prefDialog .pref-nav{
    flex-direction: row !important;
    width: 100% !important;
    min-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-muted) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  #prefDialog .pref-content{
    flex: 1 !important;
    overflow-y: auto !important;
  }
}

@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;
  }
  /* Override for preferences dialog that needs full screen on mobile */
  #prefDialog{
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
  }
}
@media(max-width:480px){
  dialog{ width:95vw; max-height:80vh; border-radius:12px; top:50%; transform:translate(-50%,-50%); }
  #prefDialog{
    width:100vw !important;
    max-width:100vw !important;
    height:100vh !important;
    max-height:100vh !important;
    top:0 !important;
    left:0 !important;
    transform:none !important;
    border-radius:0 !important;
  }
  #prefDialog .pref-container{
    height:calc(100vh - env(safe-area-inset-top,0) - env(safe-area-inset-bottom,0) - 70px) !important;
  }
}
@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; }
  #prefDialog{
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px) !important;
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px) !important;
  }
  #prefDialog .pref-container{
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px - 70px) !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; max-height: calc(85vh - 60px); }
@media(min-width:1024px){ .dlg-b{ padding:20px; } }
/* CRITICAL: Override for preferences dialog - must not have padding or overflow */
#prefDialog .dlg-b{ padding:0 !important; overflow:hidden !important; max-height:none !important; }

/* 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; } }

/* =======================================================================================
   Preferences Dialog - COMPLETE REBUILD WITH NEW CLASS NAMES (pref-*)
   ======================================================================================= */

/* Preferences Dialog Container */
#prefDialog{
  width:100vw;
  max-width:100vw;
  height:100vh;
  max-height:100vh;
  display:flex; 
  flex-direction:column;
  background:var(--panel);
  border:none;
  border-radius:0;
  padding:0; 
  margin:0;
  position:fixed;
  top:0;
  left:0;
  box-sizing:border-box;
}
@media(min-width:769px){
  #prefDialog{
    width:min(2200px,95vw);
    max-width:95vw;
    height:85vh;
    max-height:85vh;
    min-height:600px;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    border:1px solid var(--input-border);
    border-radius:var(--radius);
  }
}
body:has(#prefDialog[open]) {
  overflow:hidden;
}

/* Dialog Header */
#prefDialog .dlg-h{
  flex-shrink:0;
  background:var(--panel); 
  border-bottom:1px solid var(--border-muted); 
  padding:16px 20px;
  padding-top:max(16px, calc(16px + env(safe-area-inset-top, 0)));
  padding-left:max(20px, calc(20px + env(safe-area-inset-left, 0)));
  padding-right:max(20px, calc(20px + env(safe-area-inset-right, 0)));
  display:flex; 
  justify-content:space-between; 
  align-items:center;
  box-sizing:border-box;
}

/* Dialog Body - MUST override general .dlg-b rules */
#prefDialog .dlg-b{ 
  flex:1 !important; 
  overflow:hidden !important; 
  padding:0 !important; 
  touch-action:pan-y; 
  overscroll-behavior:contain;
  /* CRITICAL: Must have constrained height for grid layout to work */
  height:100% !important;
  max-height:100% !important;
  display:flex !important;
  flex-direction:column !important; 
  box-sizing:border-box; 
  min-height:0 !important;
}

/* Preferences Container - Mobile: column, Desktop: row */
.pref-container{ 
  display:flex !important; 
  flex-direction:column !important;
  flex:1 !important;
  min-height:0 !important; 
  box-sizing:border-box !important; 
  overflow:hidden !important;
  /* CRITICAL: Ensure it takes full height */
  height:100% !important;
}
@media(min-width:769px){
  .pref-container{ 
    flex-direction:row !important; 
    align-items:stretch !important;
  }
}

/* Preferences Navigation - Mobile: horizontal scroll, Desktop: vertical sidebar */
.pref-nav{
  display:flex;
  flex-direction:row;
  gap:0;
  background:var(--input-bg);
  border-bottom:1px solid var(--border-muted);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  flex-shrink:0;
  padding:0;
  position:sticky;
  top:0;
  z-index:10;
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
  position:relative;
}
/* Visual indicators for more tabs on mobile */
@media(max-width:768px){
  .pref-nav::after{
    content:'';
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:30px;
    background:linear-gradient(to right, transparent, var(--input-bg));
    pointer-events:none;
    z-index:1;
  }
  .pref-nav::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:30px;
    background:linear-gradient(to left, transparent, var(--input-bg));
    pointer-events:none;
    z-index:1;
  }
  /* Show chevron indicators when scrollable */
  .pref-nav.scroll-left::before,
  .pref-nav.scroll-both::before{
    content:'‹';
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent);
    font-size:20px;
    font-weight:bold;
    background:var(--input-bg);
  }
  .pref-nav.scroll-right::after,
  .pref-nav.scroll-both::after{
    content:'›';
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent);
    font-size:22px;
    font-weight:900;
    background:var(--input-bg);
    position:fixed;
    right:calc(env(safe-area-inset-right, 0) + 8px);
    top:50%;
    transform:translateY(-50%);
    z-index:10001;
    transition:opacity 0.3s ease;
    width:40px;
    height:40px;
    box-shadow:-4px 0 12px rgba(0,0,0,0.15);
    border-radius:8px;
    pointer-events:none;
  }
  
  /* Pulsing animation - only affects the text/character, background stays solid */
  /* Use text-shadow and opacity to create pulsing effect on the arrow character only */
  .pref-nav.scroll-right::after,
  .pref-nav.scroll-both::after {
    animation:pulse-arrow-text 2s ease-in-out infinite;
  }
  
  @keyframes pulse-arrow-text {
    0%, 100% {
      opacity: 0.8;
      text-shadow: 0 0 0 var(--accent);
      transform: translateY(-50%) scale(1);
    }
    50% {
      opacity: 1;
      text-shadow: 0 0 8px var(--accent);
      transform: translateY(-50%) scale(1.15);
    }
  }
  
  /* Hide arrow when scrolling - ensure it fades out smoothly */
  .pref-nav.scrolling::after{
    opacity:0 !important;
    pointer-events:none;
    transition:opacity 0.3s ease !important;
  }
  
  /* Ensure arrow doesn't move with tab scroll - it's fixed to screen */
  .pref-nav.scroll-right::after,
  .pref-nav.scroll-both::after {
    position: fixed !important;
    right: calc(env(safe-area-inset-right, 0) + 8px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}
.pref-nav-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 16px;
  border:none;
  background:transparent;
  color:var(--text-dim);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:all .2s ease;
  border-bottom:2px solid transparent;
  flex-shrink:0;
}
.pref-nav-btn:hover{
  background:var(--hover-bg);
  color:var(--text);
}
.pref-nav-btn.active{
  color:var(--accent);
  border-bottom-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 5%, transparent);
}
.pref-nav-btn svg{
  width:16px;
  height:16px;
  flex-shrink:0;
}
.pref-nav::-webkit-scrollbar{
  height:4px;
  display:block;
}
.pref-nav::-webkit-scrollbar-track{
  background:transparent;
}
.pref-nav::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border-radius:2px;
}
.pref-nav::-webkit-scrollbar-thumb:hover{
  background:var(--scrollbar-thumb-hover);
}

/* Desktop: Navigation becomes vertical sidebar */
@media(min-width:769px){
  .pref-nav{
    flex-direction:column;
    width:140px;
    min-width:140px;
    flex-shrink:0;
    border-right:1px solid var(--border-muted);
    border-bottom:none;
    overflow-y:auto;
    overflow-x:hidden;
    position:relative;
    top:auto;
  }
  .pref-nav-btn{
    width:100%;
    justify-content:flex-start;
    padding:14px 20px;
    border-bottom:none;
    border-left:3px solid transparent;
  }
  .pref-nav-btn.active{
    border-left-color:var(--accent);
    border-bottom-color:transparent;
  }
}

/* Preferences Main Content Area - scrollable content + fixed footer */
.pref-main{
  flex:1 1 auto !important;
  min-height:0 !important;
  background:var(--panel) !important;
  position:relative !important;
  display:grid !important;
  grid-template-rows:1fr auto !important;
  row-gap:0 !important;
  overflow:hidden !important;
  height:100% !important;
  max-height:100% !important;
}

/* Scrollable Content Area - ONLY this scrolls */
.pref-scroll{
  grid-row:1 / span 1 !important;
  flex:1 1 auto !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  min-height:0 !important;
  max-height:100% !important;
  -webkit-overflow-scrolling:touch;
  position:relative !important;
  padding-bottom:32px !important;
  margin-bottom:0 !important;
  z-index:1 !important;
}
@media(max-width:768px){
  .pref-scroll{
    padding-bottom:calc(120px + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* Preferences Footer - separate grid row */
.pref-footer{
  grid-row:2 / span 1 !important;
  flex-shrink:0 !important;
  background:var(--panel) !important;
  border-top:1px solid var(--border-muted) !important;
  padding:16px 20px !important;
  padding-bottom:max(16px, calc(16px + env(safe-area-inset-bottom, 0))) !important;
  padding-left:max(20px, calc(20px + env(safe-area-inset-left, 0))) !important;
  padding-right:max(20px, calc(20px + env(safe-area-inset-right, 0))) !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  box-sizing:border-box !important;
  width:100% !important;
  z-index:10 !important;
  pointer-events:auto !important;
  position:relative !important;
}
@media(max-width:768px){
  /* Mobile: Fixed to viewport */
  .pref-footer{
    position:fixed !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    z-index:10000 !important;
    box-shadow:0 -2px 8px rgba(0,0,0,.3) !important;
    margin:0 !important;
  }
}
.pref-footer .btn{
  width:100%;
  max-width:400px;
  min-height:48px;
  background:var(--accent) !important;
  color:var(--button-text) !important;
  border:1px solid var(--accent) !important;
}
.pref-footer .btn:hover{
  background:color-mix(in srgb, var(--accent) 90%, black) !important;
  border-color:color-mix(in srgb, var(--accent) 90%, black) !important;
}

/* Preferences Panels - Tab Content */
.pref-panel{
  display:none !important;
  padding:20px !important;
  min-height:0 !important;
  background:var(--panel) !important;
  width:100% !important;
  box-sizing:border-box !important;
  position:relative !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* CRITICAL: Active panels must override all hidden states - highest specificity */
.pref-panel.active{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
.pref-panel.active[hidden],
.pref-panel[hidden].active{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
@media(min-width:769px){
  .pref-panel{
    padding:32px 40px;
  }
}

/* Preferences Section Groups - Bordered Sections */
.pref-section-group{
  padding:20px;
  background:var(--input-bg);
  border:1px solid var(--border-muted);
  border-radius:12px;
  margin-bottom:24px;
  width:auto;
  max-width:100%;
  box-sizing:border-box;
}
.pref-section-title{
  font-size:16px;
  font-weight:600;
  color:var(--text);
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:2px solid var(--border-muted);
}

/* Preferences Panel Content */
.pref-panel .row{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-bottom:20px;
}
@media(min-width:480px){
  .pref-panel .row{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(min-width:769px){
  .pref-panel .row{
    gap:24px;
  }
}
.pref-panel .field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pref-panel .field label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  margin:0;
}
@media(min-width:769px){
  .pref-panel .field label{
    font-size:14px;
  }
}
.pref-panel input,
.pref-panel select{
  width:100%;
  padding:12px 14px;
  font-size:14px;
  border:1px solid var(--input-border);
  border-radius:8px;
  background:var(--input-bg);
  color:var(--text);
  transition:all .2s ease;
}
@media(min-width:769px){
  .pref-panel input,
  .pref-panel select{
    padding:14px 16px;
    font-size:15px;
  }
}
.pref-panel input:focus,
.pref-panel select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
.pref-panel .tiny{
  font-size:12px;
  color:var(--text-dim);
  line-height:1.5;
  margin-top:4px;
}
@media(min-width:769px){
  .pref-panel .tiny{
    font-size:13px;
  }
}

/* Preferences Groups */
.pref-group{
  margin-bottom:32px;
  padding:20px;
  background:var(--input-bg);
  border:1px solid var(--border-muted);
  border-radius:12px;
  box-sizing:border-box;
  width:100%;
  overflow:hidden;
}
.pref-group:last-child{
  margin-bottom:0;
}
.pref-group-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:600;
  color:var(--text);
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-muted);
}
.pref-group-title .pref-info-btn{
  margin-left:auto;
}
.pref-group .row{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-bottom:0;
}
@media(min-width:480px){
  .pref-group .row{
    grid-template-columns:repeat(2,1fr);
  }
}
.pref-group .field{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  box-sizing:border-box;
  min-width:0;
}
.pref-group .field[style*="width:100%"]{
  grid-column:1 / -1;
}

/* Preferences Labels and Inputs */
.pref-label{
  text-align:left;
  display:block;
  margin-bottom:6px;
  font-weight:600;
  color:var(--text);
}
.pref-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}
.pref-input-wrap input,
.pref-input-wrap select{
  flex:1;
  min-width:0;
}
.pref-info-btn{
  flex-shrink:0;
  background:transparent;
  border:none;
  padding:4px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  opacity:.7;
  transition:opacity .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.pref-info-btn:hover,
.pref-info-btn:active{
  opacity:1;
}

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

/* =======================================================================================
   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-reverse;
}
.lobe-message.assistant{
  flex-direction:row;
}
.lobe-message-avatar{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:600;
}
.lobe-message.user .lobe-message-avatar{
  background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, black) 100%);
  color:transparent;
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
  border:2px solid rgba(255,255,255,0.2);
}
.lobe-message.assistant .lobe-message-avatar{
  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);
  padding:8px;
  box-sizing:border-box;
}
.lobe-message.assistant .lobe-message-avatar img{
  width:16px !important;
  height:16px !important;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.lobe-message-content-wrapper{
  flex:1;
  max-width:calc(100% - 44px);
  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:16px;
  line-height:1.65;
  font-size:14.5px;
  word-wrap:break-word;
  overflow-wrap:break-word;
  max-width:100%;
  box-shadow:0 2px 8px 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-bottom-right-radius:6px;
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 15%, transparent);
}
.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-bottom-left-radius:6px;
}

/* 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:none;
  border-radius:24px;
  padding:6px 6px 6px 16px;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
}
.lobe-input-wrapper:focus-within{
  background:rgba(29,39,51,0.7);
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
}
/* Remove focus highlight on mobile iOS PWA */
@media(max-width:768px){
  .lobe-input-wrapper:focus-within{
    background:rgba(29,39,51,0.6);
    box-shadow:0 4px 16px rgba(0,0,0,0.2);
  }
}
.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:100vh;
    max-width:100vw;
    max-height:100vh;
    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 12px;
    padding-bottom:calc(120px + env(safe-area-inset-bottom, 0)); /* Extra padding for mobile keyboard */
    gap:16px;
  }
  .lobe-message-content{
    font-size:14px;
    padding:12px 16px;
  }
  .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;
  }
  .lobe-input-wrapper{
    padding:8px 12px;
  }
  .lobe-input-field{
    font-size:16px; /* Prevents zoom on iOS */
  }
}

/* =======================================================================================
   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; }
.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 */
  .cal-controls{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap; /* will wrap neatly on very small screens */
    margin-bottom: 10px;
  }
  .cal-controls .left{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
  }

  /* 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); }
  
  /* Floating D|W|M toggle on month view when scrolling */
  .cal-controls.floating .cal-toggle {
    position: fixed;
    bottom: calc(var(--footerH, 56px) + env(safe-area-inset-bottom, 0) + 16px);
    right: calc(env(safe-area-inset-right, 0) + 16px);
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    background: var(--panel);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
  }

  /* 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;              /* avoid iOS dialog centering quirks */
  inset: env(safe-area-inset-top) 0 calc(var(--footerH,56px) + env(safe-area-inset-bottom)) 0;
  margin: 0;
  width: 100vw;
  max-width: none;
  height: auto;                 /* use inset bottom to define height */
  max-height: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: var(--bg);
}

/* 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] .chat-content {
  /* whichever container is the scrolling body - include them all safely */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100dvh - var(--footerH,56px) - env(safe-area-inset-bottom) - 56px); /* header approx */
}
/* DO NOT apply overflow to pref-main - it has its own scroll container */
dialog[data-fullheight] .pref-main {
  overflow: hidden !important;
}

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

.toastarea{
  position:fixed !important; 
  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,
  #prefDialog[open] ~ .toastarea,
  dialog[open] ~ .toastarea,
  #dayDialog[open] ~ .toastarea,
  #receiptLoadingOverlay ~ .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;
  }
}

/* Settings Info Modal - Center vertically */
#settingsInfoModal {
  margin: auto !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Override positionDialogForMobile for info modal - always center on all devices */
#settingsInfoModal[open] {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  position: fixed !important;
}

/* Mobile-specific centering override */
@media (max-width: 768px) {
  #settingsInfoModal[open] {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    position: fixed !important;
    width: min(400px, 90vw) !important;
  }
}

#settingsInfoModal .dlg-b {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Chip Selector Options - Receipt Storage Location */
.chip-selector-option {
  position: relative;
}
.chip-selector-option:hover {
  background: color-mix(in srgb, var(--input-bg) 90%, var(--accent)) !important;
  border-color: color-mix(in srgb, var(--border-muted) 70%, var(--accent)) !important;
}
.chip-selector-option.selected,
.chip-selector-option:has(input[type="radio"]:checked) {
  background: color-mix(in srgb, var(--accent) 15%, var(--input-bg)) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}
.chip-selector-option.selected svg,
.chip-selector-option:has(input[type="radio"]:checked) svg {
  color: var(--accent) !important;
}
.chip-selector-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tab Order Chips */
#tabOrderChips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 50px;
  padding: 12px;
  background: var(--input-bg);
  border-radius: 8px;
  border: 1px solid var(--border-muted);
}

.tab-order-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border-muted);
  border-radius: 6px;
  cursor: move;
  user-select: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: all 0.2s;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  min-height: 40px;
  min-width: 100px;
}

.tab-order-chip:hover {
  border-color: var(--accent);
  background: var(--hover-bg);
}

.tab-order-chip:active {
  transform: scale(0.95);
}

.tab-order-chip.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

/* Mobile touch improvements */
@media (max-width: 768px) {
  .tab-order-chip {
    padding: 12px 16px;
    min-height: 44px;
    font-size: 14px;
  }
  
  #tabOrderChips {
    gap: 10px;
    padding: 16px;
  }
}

/* Footer Drop Zone Active State */
#footerDropZone.drag-active {
  border: 2px dashed var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
  box-shadow: 0 0 20px rgba(43, 212, 255, 0.3);
}

/* Entry Line Items - Always Visible */
.entry-line-items {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}