:root{
  --bg0:#05020c;
  --bg1:#09051a;

  --panel: rgba(10, 9, 28, 0.72);
  --panel2: rgba(6, 6, 18, 0.55);

  --text:#f5f3ff;
  --muted:#b7b2e6;

  --border: rgba(255,255,255,.14);
  --shadow: 0 18px 55px rgba(0,0,0,.55);

  --radius: 18px;

  /* Arcade palette */
  --hotpink:#ff2bd6;
  --purple:#7c3aed;
  --cyan:#22d3ee;
  --green:#34d399;
  --yellow:#fbbf24;
  --danger:#fb7185;

  --focus: 0 0 0 3px rgba(34,211,238,.22), 0 0 0 6px rgba(255,43,214,.10);

  color-scheme: dark;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  overflow-x:hidden;

  background:
    radial-gradient(1200px 800px at 20% 20%, rgba(255,43,214,.16), transparent 60%),
    radial-gradient(1000px 700px at 85% 25%, rgba(34,211,238,.14), transparent 55%),
    radial-gradient(900px 700px at 60% 92%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(1200px 900px at 50% 60%, rgba(0,0,0,.45), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Arcade grid overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .05;
  pointer-events:none;
  z-index:-1;
}

/* Scanlines overlay */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.20) 0px,
    rgba(0,0,0,.20) 2px,
    rgba(0,0,0,0) 4px
  );
  opacity: .07;
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index:-1;
}

/* Floating neon blobs */
.blob{
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(52px);
  opacity: .40;
  z-index: -2;
  mix-blend-mode: screen;
  animation: floaty 12s ease-in-out infinite;
  pointer-events:none;
}
.blob.b1{ left:-180px; top:140px; background: radial-gradient(circle at 30% 30%, rgba(255,43,214,.95), transparent 62%); animation-duration: 13s; }
.blob.b2{ right:-220px; top:70px; background: radial-gradient(circle at 60% 35%, rgba(34,211,238,.90), transparent 62%); animation-duration: 15s; }
.blob.b3{ left:18%; bottom:-260px; background: radial-gradient(circle at 40% 40%, rgba(124,58,237,.85), transparent 62%); animation-duration: 17s; }

@keyframes floaty{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(18px,-26px,0) scale(1.04); }
}

.container{
  width:min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.muted{ color: var(--muted); }
h1,h2,h3{ margin:0; }
p{ margin:6px 0 0; }

/* Top bar */
.topbar{
  position: sticky;
  top:0;
  z-index: 20;
  background: linear-gradient(180deg, rgba(5,2,12,.78), rgba(5,2,12,.38));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.topbar .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
}

.brand.no-logo h1{
  font-size: 18px;
  letter-spacing: .35px;
  text-shadow:
    0 0 10px rgba(255,43,214,.16),
    0 0 18px rgba(34,211,238,.10);
}

.topbar p{ font-size: 13px; }

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

.sync-pill{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.80);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync-pill.ok{
  border-color: rgba(52,211,153,.35);
  background: rgba(52,211,153,.10);
}
.sync-pill.warn{
  border-color: rgba(251,191,36,.35);
  background: rgba(251,191,36,.08);
}
.sync-pill.bad{
  border-color: rgba(251,113,133,.35);
  background: rgba(251,113,133,.08);
}

.main{ padding: 18px 0 26px; }

/* Cards + layout */
.grid{
  display:grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 22px;
}
@media (max-width: 920px){ .grid{ grid-template-columns: 1fr; } }

.card{
  position: relative;
  background: linear-gradient(180deg, rgba(10, 9, 28, 0.74), rgba(6, 6, 18, 0.52));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(0,0,0,.50);
  padding: 22px;
  overflow: visible; /* critical: menus can extend outside */
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(90deg,
    rgba(255,43,214,.18),
    rgba(124,58,237,.14),
    rgba(34,211,238,.14),
    rgba(52,211,153,.10)
  );
  filter: blur(22px);
  opacity: .28;
  z-index: 0;
  pointer-events: none;
}
.card > *{ position: relative; z-index: 1; }

.list-card{ margin-top: 16px; overflow: hidden; }
.list-header{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }

.divider{
  height:1px;
  background: rgba(255,255,255,.08);
  margin: 16px 0;
}

/* Forms */
.form .row, .controls .row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.form .row.actions{ grid-template-columns: 1fr 1fr; }
.form .row.fineprint{ grid-template-columns: 1fr; margin-top: 8px; }

@media (max-width: 520px){
  .form .row, .controls .row, .form .row.actions{ grid-template-columns: 1fr; }
}

.field label{
  display:block;
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: .35px;
  text-transform: uppercase;
  opacity: .78;
  font-weight: 800;
}

.field input, .field textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline:none;
  transition: box-shadow .12s ease, border-color .12s ease;
}

.field textarea{ resize: vertical; min-height: 96px; }

.field input:focus, .field textarea:focus{
  box-shadow: 0 0 0 3px rgba(34,211,238,.14);
  border-color: rgba(34,211,238,.22);
}

.money{ display:flex; align-items:center; gap: 10px; }
.money .prefix{
  min-width: 44px;
  text-align:center;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.78);
}

/* Buttons */
.btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 14px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
  text-transform: uppercase;
  letter-spacing: .35px;
  font-weight: 800;
  font-size: 12px;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn:focus{ outline:none; box-shadow: var(--focus); }

.btn-primary{
  border-color: rgba(255,43,214,.22);
  background: linear-gradient(135deg, rgba(255,43,214,.22), rgba(34,211,238,.10));
}
.btn-secondary{
  background: rgba(255,255,255,.06);
}
.btn-danger{
  border-color: rgba(251,113,133,.30);
  background: rgba(251,113,133,.10);
}

/* Stats */
.stats{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.stat{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.14);
  position: relative;
  overflow: hidden;
}
.stat::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.12), transparent 55%);
  transform: rotate(14deg);
  opacity:.45;
  pointer-events: none;
}
.stat .label{ font-size:11px; position:relative; z-index:1; text-transform: uppercase; letter-spacing: .35px; opacity:.8; }
.stat .value{
  font-size: 18px;
  margin-top: 6px;
  font-weight: 900;
  position:relative;
  z-index:1;
}

/* Goals list */
.goals{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-top: 10px;
}

@keyframes popIn{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.goal{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 16px;
  background: rgba(0,0,0,.14);
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  animation: popIn .20s ease-out both;
  position: relative;
  overflow: hidden;
}
.goal::before{
  content:"";
  position:absolute;
  inset:-2px;
  opacity: .10;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,43,214,.22), transparent 62%),
    radial-gradient(circle at 85% 15%, rgba(34,211,238,.18), transparent 58%);
  transition: opacity .18s ease;
  pointer-events: none;
  z-index: 0;
}
.goal:hover::before{ opacity:.22; }

.goal > *{ position: relative; z-index: 1; }

.goal .title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap: wrap;
}
.goal .title h3{ font-size: 16px; letter-spacing: .2px; font-weight: 900; }

.badge{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  background: rgba(10, 9, 28, .22);
}

.badge.priority-high{ border-color: rgba(251,113,133,.40); color: #ffd2da; }
.badge.priority-medium{ border-color: rgba(251,191,36,.40); color: #fff2c1; }
.badge.priority-low{ border-color: rgba(52,211,153,.36); color: #c9ffe6; }

.goal .meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.goal .actions{
  display:flex;
  gap: 8px;
  align-items: start;
  justify-content:flex-end;
}

.icon-btn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 12px;
}
.icon-btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }
.icon-btn:active{ transform: translateY(1px) scale(.99); }
.icon-btn:focus{ outline:none; box-shadow: var(--focus); }

/* Progress */
.progress-wrap{ margin-top: 10px; }
.progress-top{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.progress{
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10, 9, 28, .40);
  overflow:hidden;
}
.progress > div{
  height:100%;
  width:0%;
  background: linear-gradient(90deg,
    rgba(255,43,214,.80),
    rgba(124,58,237,.72),
    rgba(34,211,238,.70),
    rgba(52,211,153,.62)
  );
  border-radius: 999px;
  position: relative;
  transition: width .45s cubic-bezier(.2,.9,.2,1);
}
.progress > div::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 15%, transparent 30%);
  transform: translateX(-60%);
  animation: shimmer 1.05s linear infinite;
  opacity: .50;
}
@keyframes shimmer{ to{ transform: translateX(160%); } }

.goal.completed{
  border-color: rgba(52,211,153,.35);
}
.goal.completed .title h3{ text-decoration: line-through; opacity: .92; }

/* Empty */
.empty{
  padding: 22px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 20px;
  margin-top: 10px;
  background: rgba(0,0,0,.12);
}

/* Dialog */
.dialog{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding:0;
  background: rgba(10, 9, 28, .92);
  color: var(--text);
  box-shadow: var(--shadow);
  width: min(760px, calc(100% - 24px));
}
.dialog::backdrop{ background: rgba(0,0,0,.70); }
.dialog-inner{ padding: 22px; }
.dialog-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.dialog .row{ gap: 16px; margin-bottom: 18px; }
.dialog textarea{ min-height: 120px; }
.dialog .row.actions{ margin-top: 26px; gap: 14px; }

/* Footer */
.footer{ padding: 22px 0 30px; font-size: 12px; }

/* Remove number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input[type="number"]{ -moz-appearance: textfield; appearance: textfield; }

/* Screen-reader-only */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border:0 !important;
}

/* Arcade Select */
.arcade-select{ position: relative; user-select: none; z-index: 5; }
.arcade-select.open{ z-index: 999; }

.arcade-select .as-trigger{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor: pointer;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.arcade-select .as-trigger:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,211,238,.14);
  border-color: rgba(34,211,238,.22);
}

.arcade-select .as-caret{
  width: 10px;
  height: 10px;
  border-right: 3px solid rgba(255,255,255,.80);
  border-bottom: 3px solid rgba(255,255,255,.80);
  transform: rotate(45deg);
  opacity: .80;
  flex: 0 0 auto;
}
.arcade-select.open .as-caret{ transform: rotate(-135deg); }

.arcade-select .as-menu{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1000;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8, 7, 22, .92);
  box-shadow: 0 20px 48px rgba(0,0,0,.55);

  padding: 8px;
  display: none;
  overflow: hidden;
}
.arcade-select .as-menu::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg,
    rgba(255,43,214,.14),
    rgba(124,58,237,.12),
    rgba(34,211,238,.12)
  );
  filter: blur(16px);
  opacity: .22;
  pointer-events: none;
}
.arcade-select.open .as-menu{
  display: block;
  animation: asPop .16s ease-out both;
}
@keyframes asPop{
  from{ opacity:0; transform: translateY(-6px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.arcade-select .as-option{
  position: relative;
  z-index: 1;
  padding: 12px 12px;
  border-radius: 14px;
  color: var(--text);
  font-weight: 750;
  letter-spacing: .2px;
  font-size: 12px;

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

  cursor: pointer;
  border: 1px solid transparent;
}
.arcade-select .as-option:hover{
  border-color: rgba(34,211,238,.20);
  background: rgba(34,211,238,.08);
}
.arcade-select .as-option[aria-selected="true"]{
  border-color: rgba(255,43,214,.20);
  background: rgba(255,43,214,.10);
}
.arcade-select .as-option .as-check{
  opacity: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(255,43,214,.85), rgba(34,211,238,.70));
}
.arcade-select .as-option[aria-selected="true"] .as-check{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .blob, .progress > div::after { animation: none !important; }
  .goal, .btn, .icon-btn, .field input, .field textarea { transition: none !important; }
}

/* --- Mobile friendliness --- */
@media (max-width: 920px){
  .topbar .container{
    align-items: flex-start;
    flex-direction: column;
  }

  .header-actions{
    width: 100%;
    gap: 8px;
  }

  .header-actions .btn{
    flex: 1 1 auto;
    min-width: 140px;
  }

  .sync-pill{
    width: 100%;
    max-width: none;
  }

  .grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 600px){
  .container{
    width: calc(100% - 20px);
  }

  .card{
    padding: 16px;
    border-radius: 18px;
  }

  /* Make all form rows single column */
  .form .row,
  .controls .row,
  .dialog .row{
    grid-template-columns: 1fr !important;
  }

  /* Bigger touch targets */
  .btn, .icon-btn{
    padding: 12px 14px;
  }

  .field input,
  .field textarea,
  .arcade-select .as-trigger{
    padding: 13px 14px;
  }

  /* Goals list actions stack nicely */
  .goal{
    grid-template-columns: 1fr;
  }
  .goal .actions{
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* Dialog sizing + spacing */
  .dialog{
    width: calc(100% - 18px);
    border-radius: 20px;
  }
  .dialog-inner{
    padding: 16px;
  }
  .dialog .row.actions{
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   FIX: Put all background FX in a dedicated fixed layer
   (prevents scroll-bottom artifacts on some browsers/GPUs)
   ============================================================ */

.bgfx{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* Key: isolate blending/filters from the rest of the page */
  isolation: isolate;

  /* Helps avoid compositor banding */
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}

/* Put your actual UI above it */
.topbar, main, footer{
  position: relative;
  z-index: 1;
}

/* Grid overlay */
.bgfx::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .05;
}

/* Scanlines overlay */
.bgfx::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.18) 0px,
    rgba(0,0,0,.18) 2px,
    rgba(0,0,0,0) 4px
  );
  opacity: .07;
}

/* Blobs (fixed inside bgfx) */
.bgfx .blob{
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(52px);
  opacity: .38;
  animation: floaty 12s ease-in-out infinite;

  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.bgfx .blob.b1{ left:-180px; top:140px; background: radial-gradient(circle at 30% 30%, rgba(255,43,214,.90), transparent 62%); animation-duration: 13s; }
.bgfx .blob.b2{ right:-220px; top:70px; background: radial-gradient(circle at 60% 35%, rgba(34,211,238,.86), transparent 62%); animation-duration: 15s; }
.bgfx .blob.b3{ left:18%; bottom:-260px; background: radial-gradient(circle at 40% 40%, rgba(124,58,237,.82), transparent 62%); animation-duration: 17s; }