style.css

/* =============================
   Futuristic Minimalist Theme
   (Powdery white / black / grey)
============================= */
:root{
  --bg-light:#f9f9f9;
  --text-light:#111;
  --muted-light:#555;
  --border-light:#e5e5e5;
  --card-light:#fff;
  --shadow-light:0 8px 20px rgba(0,0,0,.05);

  --bg-dark:#0d0d0d;
  --text-dark:#f1f1f1;
  --muted-dark:#a8a8a8;
  --border-dark:#2a2a2a;
  --card-dark:#171717;
  --shadow-dark:0 10px 28px rgba(0,0,0,.35);

  --btn-primary-light:#111;
  --btn-primary-light-hover:#2c2c2c;
  --btn-primary-dark:#f1f1f1;
  --btn-primary-dark-hover:#d9d9d9;

  --focus-ring: rgba(90, 120, 255, .22);
}

/* Global */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  margin:0; padding:20px;
  transition: background .35s ease, color .25s ease;
  overflow-x:hidden;
}
body.light-mode{ background:var(--bg-light); color:var(--text-light); }
body.dark-mode { background:var(--bg-dark);  color:var(--text-dark);  }

/* Ambient animated grid */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:2; pointer-events:none;
  background:
    linear-gradient(transparent 0 0),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg,  currentColor 0 1px, transparent 1px 48px);
  opacity:.035;
  animation:gridPan 40s linear infinite;
}
@keyframes gridPan{
  0%{background-position:0 0, 0 0, 0 0}
  100%{background-position:0 0, 480px 0, 0 480px}
}

/* Particles layer */
#particles-js{ position:fixed; inset:0; z-index:1 }

/* Container with floating orbs behind */
.container{
  position:relative; z-index:10;
  max-width:850px; margin:40px auto; padding:35px;
  border-radius:16px; backdrop-filter: blur(12px);
  transition: background .3s, box-shadow .3s, border-color .3s;
}
body.light-mode .container{
  background: rgba(255,255,255,.82);
  border:1px solid var(--border-light);
  box-shadow: var(--shadow-light);
}
body.dark-mode .container{
  background: rgba(20,20,20,.85);
  border:1px solid var(--border-dark);
  box-shadow: var(--shadow-dark);
}
.container::before,.container::after{
  content:""; position:absolute; inset:auto;
  width:220px; height:220px; border-radius:50%;
  filter: blur(40px); opacity:.25; z-index:-1;
  animation: floatOrb 18s ease-in-out infinite;
}
.container::before{
  left:-80px; top:-60px;
  background: radial-gradient(closest-side, #7f8cff, transparent 70%);
  animation-delay: -6s;
}
.container::after{
  right:-90px; bottom:-70px;
  background: radial-gradient(closest-side, #9bffd4, transparent 70%);
}
@keyframes floatOrb{
  0%{ transform: translate3d(0,0,0) }
  50%{ transform: translate3d(12px, -10px, 0) }
  100%{ transform: translate3d(0,0,0) }
}

/* Navbar */
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:30px; padding-bottom:22px;
  border-bottom:1px solid transparent;
}
body.light-mode .navbar{ border-color: var(--border-light); }
body.dark-mode  .navbar{ border-color: var(--border-dark); }

/* SHIMMER EFFECT */
/* Default (dark mode): neon-like blue/mint */
.navbar h2{ 
  margin:0; font-size:2rem; letter-spacing:-.4px; font-weight:700;
  background: linear-gradient(90deg,#7f8cff,#9bffd4,#7f8cff);
  background-size:300%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: shimmer 2.5s ease-in-out 1 forwards;
}

/* Light mode override: bold graphite gradient for contrast */
body.light-mode .navbar h2{
  background: linear-gradient(90deg,#111,#555,#111);
  background-size:300%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  /* subtle lift to improve legibility on white */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.08));
}

@keyframes shimmer{
  0%{background-position:-100% 0;}
  100%{background-position:200% 0;}
}

/* Theme switch */
.switch{ position:relative; width:52px; height:28px; display:inline-block }
.switch input{ display:none }
.slider{
  position:absolute; inset:0; border-radius:999px;
  background:#cfcfcf; transition:.35s;
}
.slider::before{
  content:""; position:absolute; left:3px; top:3px;
  width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:.35s;
}
input:checked + .slider{ background:#555 }
input:checked + .slider::before{ transform: translateX(24px) }

/* Form */
form{
  display:grid; grid-template-columns: 2fr 1fr 1fr auto;
  gap:15px; margin-bottom:28px;
}
input, select{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid; background:transparent; color:inherit;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
body.light-mode input, body.light-mode select{ border-color: var(--border-light) }
body.dark-mode  input, body.dark-mode  select{ border-color: var(--border-dark) }
input:focus, select:focus{
  outline:none; box-shadow:0 0 0 3px var(--focus-ring);
}

/* Placeholder colors */
body.light-mode ::placeholder{ color:#9aa0a6 }
body.dark-mode  ::placeholder{ color:#8a8a8a }

/* Buttons (base) */
button{
  border:none; border-radius:10px; padding:12px 18px;
  font-weight:600; cursor:pointer;
  transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
  position:relative; overflow:hidden;
}

/* Primary: form submit */
form button[type="submit"]{ white-space:nowrap; }
body.light-mode form button[type="submit"]{ background:var(--btn-primary-light); color:#fff }
body.light-mode form button[type="submit"]:hover{ background:var(--btn-primary-light-hover); transform:translateY(-2px) }
body.dark-mode  form button[type="submit"]{ background:var(--btn-primary-dark); color:#111 }
body.dark-mode  form button[type="submit"]:hover{ background:var(--btn-primary-dark-hover); transform:translateY(-2px) }

/* Secondary buttons */
.filters .filter-buttons button{
  background:transparent; border:1px solid; color:inherit;
}
body.light-mode .filters .filter-buttons button{ border-color:var(--border-light) }
body.dark-mode  .filters .filter-buttons button{ border-color:var(--border-dark) }
.filters .filter-buttons button:hover{ transform: translateY(-2px); }

/* Expense list */
#expense-list{ display:grid; gap:14px }
.expense-item{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:12px; border:1px solid; background:transparent;
  animation: fadeInUp .35s ease both;
}
body.light-mode .expense-item{ border-color:var(--border-light); background:var(--card-light) }
body.dark-mode  .expense-item{ border-color:var(--border-dark);  background:var(--card-dark) }

.details{ display:flex; flex-direction:column }
.details strong{ font-size:1.05rem; color:inherit }
.details span{ font-size:.92rem; color: currentColor; opacity:.7 }

.amount{ margin-left:auto; font-weight:700 }
.actions{ display:flex; gap:8px }
.actions button{
  padding:8px 10px; border-radius:8px; background:transparent; color:inherit;
  border:1px solid; line-height:1;
}
body.light-mode .actions button{ border-color:var(--border-light) }
body.dark-mode  .actions button{ border-color:var(--border-dark) }
.actions button:hover{ transform: translateY(-2px) }

/* Summary */
#summary{
  margin-top:24px; padding:16px 18px; border-radius:12px;
  border:1px solid; background:transparent; color:inherit; text-align:center;
  transition:opacity .25s ease, transform .25s ease;
}
body.light-mode #summary{ border-color:var(--border-light); background:var(--card-light) }
body.dark-mode  #summary{ border-color:var(--border-dark);  background:var(--card-dark) }
#summary.is-empty{ opacity:0; transform: translateY(6px); height:0; padding:0; margin:0; border-width:0; overflow:hidden }

/* Filters layout */
.filters{
  display:flex; gap:15px; align-items:center; margin-bottom:26px; flex-wrap:wrap;
}
.filters input{ flex:1 }

/* Animations */
@keyframes fadeInUp{
  from{opacity:0; transform: translateY(18px)}
  to{opacity:1; transform: translateY(0)}
}

/* Ripple */
.ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background: currentColor; opacity:.18; pointer-events:none;
  animation:ripple .6s ease-out forwards;
  mix-blend-mode: multiply;
}
@keyframes ripple{
  to{ transform:scale(8); opacity:0 }
}

/* Responsive */
@media (max-width:768px){
  body{ padding:12px }
  .container{ margin:18px auto; padding:20px }
  form{ grid-template-columns:1fr }
  form button[type="submit"]{ width:100% }
  .amount{ margin:0 }
}
@media (max-width:480px){
  .navbar{ flex-direction:column; gap:12px }
  .expense-item{ flex-direction:column; align-items:flex-start }
  .actions{ align-self:flex-end }
  .amount{ align-self:flex-start }
}