/* Pixel-conscious KamaVLama mockup alignment layer.
   Styling is scoped to the neon home. It never affects Supabase data. */
#dashboard.neon-home-dashboard{
  --kvl-edge:#8744f0;
  --kvl-glass:#141344;
  color:#f8f6ff;
  width:min(980px,100%);
}
body:has(#dashboard.neon-home-dashboard:not(.hidden)){
  background:
    radial-gradient(ellipse 80% 28% at 49% 0%,#4113827f,transparent 85%),
    radial-gradient(ellipse 55% 26% at 4% 45%,#3a13925c,transparent),
    linear-gradient(180deg,#060416 0%,#090727 55%,#080c2c 100%);
}
:is(#dashboard,#kf-view) .neon-brand .brand-wordmark{
  letter-spacing:-.052em;font-weight:850;
  text-shadow:0 0 16px #b572ff63;
}
:is(#dashboard,#kf-view) .neon-brand .brand-wordmark .brand-v{
  filter:drop-shadow(0 0 8px #a83efc) drop-shadow(0 0 3px #bc85ff);
}
:is(#dashboard,#kf-view) .neon-tagline{color:#d9cbef;letter-spacing:.005em}
:is(#dashboard,#kf-view) .neon-topbar{margin-bottom:20px}
:is(#dashboard,#kf-view) .neon-head-button{
  border-radius:50%;
  color:#f0e6ff;
  background:radial-gradient(circle at 45% 25%,#342071 0%,#14123f 70%);
  box-shadow:inset 0 0 15px #6847d233,0 0 17px #872aff66;
}
:is(#dashboard,#kf-view) .neon-head-button .neon-icon,
:is(#dashboard,#kf-view) .neon-head-button .neon-icon svg{
  display:block;width:23px;height:23px;line-height:1;
}
:is(#dashboard,#kf-view) .neon-icon svg,
:is(#dashboard,#kf-view) .neon-quick-pict svg,
:is(#dashboard,#kf-view) .neon-stat-pict svg,
:is(#dashboard,#kf-view) .neon-inline-icon svg{
  display:block;max-width:100%;max-height:100%;width:100%;height:100%;
  overflow:visible;
}
:is(#dashboard,#kf-view) .neon-greeting-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  justify-items:stretch;align-items:end;
  min-width:0;gap:14px;
  padding:6px 0 0;margin-bottom:16px;
  background:transparent;
}
:is(#dashboard,#kf-view) .neon-greeting-copy{
  overflow:hidden;min-width:0;
  background:transparent;line-height:1.3;
}
:is(#dashboard,#kf-view) .neon-greeting{
  overflow-wrap:anywhere;
  font-size:clamp(18px,2.55vw,23px);
  font-weight:850;
}
:is(#dashboard,#kf-view) .neon-greeting-copy>span{
  font-size:13px;line-height:1.6;color:#beafdb;
}
#dashboard .period-controls{
  justify-self:end;align-self:end;
  grid-column:2;grid-row:1;
  min-width:0;max-width:100%;
}
#dashboard .period-controls .month-control{
  display:flex;align-items:center;
  border-radius:26px;min-height:43px;padding:7px 12px;
  border:1px solid #9954ffcc;
  background:linear-gradient(105deg,#321461,#1d1856);
  box-shadow:0 0 11px #762ae452,inset 0 0 13px #9a50ff22;
}
#dashboard #monthPickerLabel{font-size:clamp(12px,1.6vw,15px)}
#dashboard .neon-home-overview{gap:13px}
#dashboard .neon-hero{
  min-height:190px;
  overflow:hidden;position:relative;
  border:1.5px solid #ab54ff;
  border-radius:24px;
  background:
    radial-gradient(ellipse 70% 95% at 9% 96%,#5727ec75,transparent 81%),
    radial-gradient(ellipse 50% 100% at 83% -25%,#301c8c55,transparent),
    linear-gradient(120deg,#17114d,#0a1543 67%,#141056);
  box-shadow:inset 0 0 18px #6725ff59,0 0 20px #713bff6c;
  padding:26px clamp(17px,4vw,34px);
}
#dashboard .neon-hero-copy{
  align-self:stretch;justify-content:center;
  gap:12px;z-index:1;
}
#dashboard .neon-hero-label{
  display:inline-flex;align-items:center;gap:10px;
  color:#ebe5fa;
  font-size:clamp(14px,2vw,19px);
}
#dashboard .neon-inline-icon{
  flex:none;display:inline-grid;place-items:center;
  width:25px;height:25px;color:#c6a4ff;
  filter:drop-shadow(0 0 8px #c45bff);
}
#dashboard .neon-hero-amount{
  font-size:clamp(35px,6vw,68px);
  letter-spacing:-.045em;
  font-weight:850;text-shadow:0 0 18px #b493ff6a;
}
#dashboard .neon-hero-graph{width:39%;max-width:275px;height:120px;gap:11px}
#dashboard .neon-hero-graph i{
  flex:1;max-width:26px;min-width:0;
  background:linear-gradient(180deg,#64cbff,#7650ff 56%,#7230db 100%);
  box-shadow:0 0 15px #7c50f9a8;
  transition:none;
}
#dashboard .neon-stat{
  min-height:164px;padding:15px 7px 13px;
  gap:6px;border:1.5px solid #7250d0;
  border-radius:21px;
  background:
    radial-gradient(ellipse at 47% 0%,#3b267350,transparent 77%),
    linear-gradient(155deg,#1a164e,#11133d 70%,#0b1740);
  box-shadow:inset 0 0 18px #703cff40,0 0 8px #4e2eff3d;
}
#dashboard .neon-stat-pict{
  display:grid;place-items:center;width:31px;height:31px;
  color:var(--tile);filter:drop-shadow(0 0 8px var(--tile));
  font-size:inherit;
}
#dashboard .neon-stat-pict svg{stroke-width:1.7}
#dashboard .neon-stat-title{
  font-size:clamp(11px,1.8vw,16px);font-weight:750;
}
#dashboard .neon-stat-value{
  font-size:clamp(14px,2.4vw,23px);
  font-weight:850;line-height:1.25;overflow-wrap:anywhere;
}
#dashboard .neon-stat-detail{min-height:1.1em;color:#ac9cd6}
#dashboard .neon-stat-rail{
  align-self:end;height:7px;
  border-radius:999px;background:#262159;overflow:hidden;
}
#dashboard .neon-stat-rail i{
  box-shadow:0 0 11px var(--tile);border-radius:999px;
}
#dashboard .neon-quick-btn{
  min-height:112px;padding:13px 6px 12px;
  gap:11px;border:1px solid #7656e8;
  border-radius:19px;
  background:linear-gradient(140deg,#1c1550,#101945);
  box-shadow:inset 0 0 18px #7839f73a,0 0 9px #6332cf3d;
  font-weight:800;
}
#dashboard .neon-quick-pict{
  display:grid;place-items:center;
  width:49px;height:49px;padding:9px;
  border:1.5px solid #9a56ff;
  background:linear-gradient(150deg,#8646f5,#471ea5);
  color:#f8ebff;
  box-shadow:0 0 15px #8d4cf972,inset 0 0 10px #d19bff33;
}
#dashboard .neon-quick-income .neon-quick-pict{
  border-color:#54f3c8;background:linear-gradient(145deg,#32d9ae,#16886e);
  box-shadow:0 0 14px #27dca466;
}
#dashboard .neon-quick-analytics .neon-quick-pict,
#dashboard .neon-quick-budget .neon-quick-pict{
  background:linear-gradient(140deg,#6440d6,#301477);
}
#dashboard .neon-quick-btn>span:last-child{line-height:1.25}
#dashboard .tracker-grid{gap:10px!important}
#dashboard .tracker-grid .finance-card{
  --item-accent:#a26fff;
  border:1.3px solid #8844f0;
  border-radius:22px;
  background:linear-gradient(118deg,#1b1351,#11163f 58%,#13103e);
  box-shadow:inset 0 0 18px #4d24b63d,0 0 12px #5131e342;
  overflow:hidden;
}
/* Expanded editors, suggestions and inline controls must never be clipped. */
#dashboard .tracker-grid .finance-card.is-mobile-open{overflow:visible}
#dashboard .tracker-grid .income-card{--item-accent:#47f5b9}
#dashboard .tracker-grid .fixed-card,
#dashboard .tracker-grid .variable-card{--item-accent:#fc73a7}
#dashboard .tracker-grid .credit-card{--item-accent:#4dd9ff}
#dashboard .tracker-grid .checking-card{--item-accent:#b880ff}
#dashboard .tracker-grid .savings-card{--item-accent:#c06dff}
#dashboard .tracker-grid .loans-card{--item-accent:#43e7af}
#dashboard .tracker-grid .finance-card .card-heading{
  display:grid!important;
  grid-template-columns:50px minmax(0,1fr) minmax(90px,auto) 22px!important;
  align-items:center!important;
  column-gap:13px!important;
  min-height:91px!important;
  padding:15px 20px!important;
  position:relative;
  cursor:pointer;
}
:is(#dashboard,#kf-view) .tracker-grid .finance-card .card-heading .neon-icon{
  grid-column:1;grid-row:1;
  display:grid;place-items:center;
  width:50px;height:50px;padding:10px;
  border:1.5px solid var(--item-accent);
  border-radius:16px;color:var(--item-accent);
  font-size:inherit;
  background:radial-gradient(circle at 35% 20%,#31306a,#191441);
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--item-accent),transparent 50%));
  box-shadow:inset 0 0 16px #4a278766,0 0 13px #3d20ae69;
}
:is(#dashboard,#kf-view) .tracker-grid .finance-card .card-heading .neon-icon svg{
  stroke-width:1.8;filter:drop-shadow(0 0 4px currentColor);
}
#dashboard .tracker-grid .finance-card .card-heading>div:first-of-type{
  grid-column:2;grid-row:1;
  min-width:0;display:grid;gap:4px;align-content:center;
  padding:0;flex:none;
}
#dashboard .tracker-grid .finance-card .card-heading h2{
  font-size:clamp(17px,2.5vw,23px);font-weight:850;
  color:#fff;line-height:1.35;overflow-wrap:anywhere;
}
#dashboard .tracker-grid .finance-card .neon-card-summary{
  grid-column:3;grid-row:1;min-width:0;
  display:grid;justify-items:start;align-content:center;gap:5px;
  text-align:left;direction:ltr;
}
#dashboard .tracker-grid .finance-card .neon-card-summary .total-badge{
  width:auto;max-width:100%;min-width:0;
  padding:0!important;margin:0!important;
  color:var(--item-accent)!important;
  font-size:clamp(18px,2.65vw,26px)!important;
  line-height:1.2;font-weight:850!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:left;letter-spacing:-.03em;
}
#dashboard .tracker-grid .finance-card .neon-card-summary .card-kicker{
  color:#b8a8d9;
  font-size:clamp(10px,1.65vw,13px);
  text-align:left;direction:rtl;
  overflow-wrap:anywhere;max-width:100%;
  line-height:1.25;
}
#dashboard .tracker-grid .finance-card .card-heading::after{
  grid-column:4;grid-row:1;
  position:static!important;
  display:grid!important;place-items:center!important;
  content:"⌄"!important;
  top:auto!important;inset:auto!important;
  width:21px!important;height:27px!important;
  padding:0!important;margin:0!important;
  transform:translateY(-3px)!important;
  color:#fff!important;font-size:31px!important;
  text-shadow:0 0 8px #b087ff;
  font-weight:400!important;
}
#dashboard .tracker-grid .finance-card.is-mobile-open .card-heading::after{
  transform:translateY(1px) rotate(180deg)!important;
}
#dashboard .tracker-grid .extra-credit-card .card-heading{
  display:flex!important;flex-wrap:nowrap!important;
}
#dashboard .tracker-grid .extra-credit-card .card-heading .neon-card-summary{
  display:none!important;
}
#dashboard .neon-settings-panel{
  padding:21px;
  border:1px solid #9659fc;
  border-radius:20px;
  background:linear-gradient(125deg,#1d144e,#0c163c);
  box-shadow:0 15px 55px #05041cab,0 0 19px #6b2cdd33;
}
#dashboard .neon-name-form{display:grid;gap:9px;padding:14px;border:1px solid #7451d766;border-radius:15px;background:#100f31}
#dashboard .neon-name-label{font-size:14px;font-weight:700;color:#efe6ff}
#dashboard .neon-name-input{
  width:100%;min-width:0;min-height:46px;
  padding:10px 13px;border:1px solid #8562dc;
  border-radius:12px;background:#080e2b;
  color:#fff;text-align:right;font:inherit;font-size:16px;
}
#dashboard .neon-name-input:focus-visible{
  outline:2px solid #bb8aff;outline-offset:2px;
}
#dashboard .neon-name-help{color:#bdacd7;line-height:1.4;font-size:12px}
#dashboard .neon-name-actions{display:flex;justify-content:flex-start}
#dashboard .neon-name-save{
  min-height:40px;padding:9px 15px;
  border:1px solid #b58dff;border-radius:11px;
  background:linear-gradient(120deg,#9253ed,#5532b8);color:#fff;
  font-weight:750;cursor:pointer;
}
#dashboard .neon-name-save:disabled{opacity:.5;cursor:wait}
#dashboard .neon-name-status{margin:0;min-height:1.3em;color:#64efbd;font-size:12px}
#dashboard .neon-name-status.is-error{color:#ff91ae}
#dashboard .neon-settings-panel .account-bar{gap:12px;direction:rtl}
#dashboard .neon-settings-panel .account-actions{
  direction:rtl;display:flex!important;flex-wrap:wrap;
}
#dashboard .neon-value-negative{color:#ff899e!important}
@media(max-width:640px){
 :is(#dashboard,#kf-view) .neon-topbar{margin-bottom:17px}
 :is(#dashboard,#kf-view) .neon-head-button .neon-icon,
 :is(#dashboard,#kf-view) .neon-head-button .neon-icon svg{width:20px;height:20px}
 :is(#dashboard,#kf-view) .neon-greeting-row{
   grid-template-columns:minmax(0,1fr) auto!important;
   gap:6px;padding:0;margin-bottom:13px;
 }
 :is(#dashboard,#kf-view) .neon-greeting{font-size:clamp(15px,4.2vw,19px)}
 :is(#dashboard,#kf-view) .neon-greeting-copy>span{font-size:11px}
 #dashboard .period-controls .month-control{min-height:35px;padding:5px 7px;border-radius:18px}
 #dashboard #monthPickerLabel{font-size:clamp(11px,3vw,13px)}
 #dashboard .neon-hero{min-height:148px;padding:18px 15px;border-radius:20px}
 #dashboard .neon-hero-label{font-size:14px}
 #dashboard .neon-inline-icon{width:21px;height:21px}
 #dashboard .neon-hero-amount{font-size:clamp(30px,8vw,47px)}
 #dashboard .neon-hero-graph{height:95px;width:37%;gap:4px}
 #dashboard .neon-stat{min-height:132px;padding:12px 4px 9px;border-radius:16px;gap:6px}
 #dashboard .neon-stat-pict{width:25px;height:25px}
 #dashboard .neon-stat-title{font-size:clamp(10px,2.9vw,13px)}
 #dashboard .neon-stat-value{font-size:clamp(11px,3.1vw,16px)}
 #dashboard .neon-stat-detail{font-size:9px}
 #dashboard .neon-quick-btn{min-height:95px;padding:9px 3px;gap:8px;border-radius:15px;font-size:clamp(10px,2.7vw,12px)}
 #dashboard .neon-quick-pict{width:39px;height:39px;padding:7px}
 #dashboard .tracker-grid{gap:9px!important}
 #dashboard .tracker-grid .finance-card{border-radius:17px}
 #dashboard .tracker-grid .finance-card .card-heading{
   grid-template-columns:40px minmax(0,1fr) minmax(81px,auto) 21px!important;
   min-height:83px!important;padding:12px 11px!important;column-gap:8px!important;
 }
 :is(#dashboard,#kf-view) .tracker-grid .finance-card .card-heading .neon-icon{
   width:40px;height:40px;padding:8px;border-radius:12px;
 }
 #dashboard .tracker-grid .finance-card .card-heading h2{font-size:clamp(15px,4vw,18px)}
 #dashboard .tracker-grid .finance-card .neon-card-summary .total-badge{
   font-size:clamp(14px,4.25vw,18px)!important;
 }
 #dashboard .tracker-grid .finance-card .neon-card-summary .card-kicker{
   font-size:clamp(9px,2.45vw,11px);
 }
 #dashboard .tracker-grid .finance-card .card-heading::after{
   width:20px!important;font-size:27px!important;
 }
}
@media(max-width:390px){
 #dashboard .tracker-grid .finance-card .card-heading{
   grid-template-columns:36px minmax(0,1fr) minmax(69px,auto) 16px!important;
   padding:11px 8px!important;column-gap:6px!important;
 }
 :is(#dashboard,#kf-view) .tracker-grid .finance-card .card-heading .neon-icon{
   width:36px;height:36px;padding:7px;
 }
 #dashboard .tracker-grid .finance-card .neon-card-summary .total-badge{
   font-size:clamp(12px,4vw,16px)!important;
 }
 #dashboard .tracker-grid .finance-card .card-heading h2{font-size:15px}
 #dashboard .tracker-grid .finance-card .card-heading::after{width:16px!important;font-size:24px!important}
}
@media(max-width:330px){
 :is(#dashboard,#kf-view) .neon-greeting-row{grid-template-columns:1fr!important}
 #dashboard .period-controls{grid-column:1;grid-row:2;justify-self:start}
 #dashboard .neon-hero-graph{width:24%;gap:2px}
}