@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap");

:root {
  --sidebar-width: 256px;
  --bg: #0b1326;
  --surface-lowest: #060e20;
  --surface-low: #131b2e;
  --surface: #171f33;
  --surface-high: #222a3d;
  --surface-highest: #2d3449;
  --surface-bright: #31394d;
  --text: #dae2fd;
  --muted: #d8d3e6;
  --outline: #958ea0;
  --outline-soft: #494454;
  --primary: #d0bcff;
  --primary-container: #a078ff;
  --inverse-primary: #6d3bd7;
  --secondary: #d2bbff;
  --secondary-container: #6001d1;
  --tertiary: #adc6ff;
  --tertiary-container: #4d8eff;
  --error: #ffb4ab;
  --glass-bg: rgba(13, 20, 39, 0.45);
  --glass-bg-strong: rgba(23, 31, 51, 0.62);
  --glass-border: rgba(255, 255, 255, 0.115);
  --glass-border-strong: rgba(208, 188, 255, 0.28);
  --glass-highlight: rgba(255, 255, 255, 0.18);
  --glow-purple: rgba(208, 188, 255, 0.24);
  --glow-blue: rgba(77, 142, 255, 0.2);
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 26px 58px rgba(0, 0, 0, 0.48), 0 0 34px rgba(96, 1, 209, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 21% 28%, rgba(208, 188, 255, 0.16), transparent 8%),
    radial-gradient(circle at 68% 20%, rgba(77, 142, 255, 0.14), transparent 6.5%),
    radial-gradient(circle at 88% 58%, rgba(210, 187, 255, 0.13), transparent 7.5%),
    radial-gradient(circle at 40% 80%, rgba(160, 120, 255, 0.12), transparent 6.5%),
    radial-gradient(circle at 8% 8%, rgba(96, 1, 209, 0.4), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(77, 142, 255, 0.2), transparent 30%),
    radial-gradient(circle at 52% 48%, rgba(208, 188, 255, 0.09), transparent 38%),
    radial-gradient(circle at 82% 84%, rgba(210, 187, 255, 0.13), transparent 30%),
    linear-gradient(145deg, rgba(6, 14, 32, 0.96), rgba(11, 19, 38, 0.94) 42%, rgba(19, 27, 46, 0.92)),
    var(--bg);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 9999px;
  filter: blur(140px);
  opacity: 0.2;
}

body::before {
  width: 720px;
  height: 720px;
  top: -220px;
  right: -120px;
  left: auto;
  background: var(--primary-container);
  animation: drift-one 22s ease-in-out infinite alternate, glow-pulse 15s ease-in-out infinite;
}

body::after {
  width: 760px;
  height: 760px;
  left: -200px;
  right: auto;
  bottom: -240px;
  background: var(--tertiary-container);
  animation: drift-two 24s ease-in-out infinite alternate, glow-pulse 19s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.34;
  }
}

@keyframes drift-one {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(80px, 42px, 0) scale(1.12);
  }
}

@keyframes drift-two {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-70px, -54px, 0) scale(1.08);
  }
}

/* Extra bokeh orbs for a deeper, softer blurred background field. */
html::before,
html::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 9999px;
  filter: blur(125px);
  opacity: 0.16;
}

html::before {
  width: 540px;
  height: 540px;
  top: 36%;
  left: 40%;
  background: var(--tertiary-container);
  animation: drift-three 36s ease-in-out infinite alternate;
}

html::after {
  width: 480px;
  height: 480px;
  top: 6%;
  right: 22%;
  background: var(--secondary-container);
  animation: drift-four 30s ease-in-out infinite alternate;
}

@keyframes drift-three {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-64px, 72px, 0) scale(1.16);
  }
}

@keyframes drift-four {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(54px, -42px, 0) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  html::before,
  html::after,
  header h1::before,
  section:has(img) img {
    animation: none;
  }
}

header {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--sidebar-width);
  height: 100vh;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 34px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.026)),
    linear-gradient(135deg, rgba(96, 1, 209, 0.16), rgba(77, 142, 255, 0.055) 48%, rgba(6, 14, 32, 0.78));
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 24px 0 70px rgba(0, 0, 0, 0.42), inset 1px 0 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
}

header::before,
header::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

header::before {
  inset: 0 0 auto;
  height: 220px;
  background: radial-gradient(circle at 46px 44px, rgba(208, 188, 255, 0.22), transparent 58%);
}

header::after {
  right: -92px;
  bottom: -88px;
  width: 190px;
  height: 190px;
  border-radius: 9999px;
  background: rgba(77, 142, 255, 0.14);
  filter: blur(46px);
}

header h1 {
  position: relative;
  z-index: 1;
  min-height: 48px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-family: Sora, Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

header h1::before {
  content: "";
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 17.5l5-5 3.5 3.5L20 8.5' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M15.5 8.5H20V13' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='8.5' cy='12.5' r='1.6' fill='%23ffffff'/%3E%3C/svg%3E")
      center / 27px 27px no-repeat,
    linear-gradient(135deg, #e9ddff 0%, #d0bcff 22%, #a078ff 48%, #6d3bd7 74%, #4d8eff 100%);
  background-size: 27px 27px, 230% 230%;
  background-position: center, 0% 50%;
  box-shadow:
    0 8px 22px rgba(109, 59, 215, 0.45),
    0 0 22px rgba(77, 142, 255, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  animation: logo-flow 7s ease-in-out infinite alternate, logo-glow 4.6s ease-in-out infinite;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 320ms ease;
}

header h1:hover::before {
  transform: translateY(-2px) rotate(-3deg) scale(1.05);
  filter: brightness(1.08) saturate(1.12);
}

@keyframes logo-flow {
  from {
    background-position: center, 0% 50%;
  }
  to {
    background-position: center, 100% 50%;
  }
}

@keyframes logo-glow {
  0%,
  100% {
    box-shadow: 0 8px 22px rgba(109, 59, 215, 0.42), 0 0 20px rgba(77, 142, 255, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  50% {
    box-shadow: 0 12px 32px rgba(109, 59, 215, 0.62), 0 0 32px rgba(77, 142, 255, 0.48), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }
}

header h1::after {
  content: "Expense Manager";
  position: absolute;
  top: 70px;
  left: 68px;
  color: var(--muted);
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

nav {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}

nav a {
  position: relative;
  min-height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  transition: transform 220ms ease, color 220ms ease, background 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

nav a::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 22px 22px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 22px 22px;
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

nav a:hover::before {
  transform: scale(1.18) rotate(-4deg);
}

nav a[aria-current="page"]::before {
  filter: drop-shadow(0 0 6px rgba(208, 188, 255, 0.7));
}

nav a[href*="index"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6h-4v6H5a1 1 0 0 1-1-1v-9.5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6h-4v6H5a1 1 0 0 1-1-1v-9.5Z'/%3E%3C/svg%3E");
}

nav a[href*="filters"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7a2 2 0 1 1 3.73 1H20v2H7.73A2 2 0 0 1 4 7Zm0 10a2 2 0 0 1 3.73-1H20v2H7.73A2 2 0 0 1 4 17Zm6-5a2 2 0 0 1 3.73-1H20v2h-6.27A2 2 0 0 1 10 12ZM4 11h4v2H4v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7a2 2 0 1 1 3.73 1H20v2H7.73A2 2 0 0 1 4 7Zm0 10a2 2 0 0 1 3.73-1H20v2H7.73A2 2 0 0 1 4 17Zm6-5a2 2 0 0 1 3.73-1H20v2h-6.27A2 2 0 0 1 10 12ZM4 11h4v2H4v-2Z'/%3E%3C/svg%3E");
}

nav a[href*="reports"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20V9h4v11H5Zm5 0V4h4v16h-4Zm5 0v-7h4v7h-4Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20V9h4v11H5Zm5 0V4h4v16h-4Zm5 0v-7h4v7h-4Z'/%3E%3C/svg%3E");
}

nav a[href*="about"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4.2 4.2 0 1 0 0-8.4 4.2 4.2 0 0 0 0 8.4Zm0 2c-4.15 0-7.5 2.28-7.5 5.1 0 .72.58 1.3 1.3 1.3h12.4c.72 0 1.3-.58 1.3-1.3 0-2.82-3.35-5.1-7.5-5.1Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4.2 4.2 0 1 0 0-8.4 4.2 4.2 0 0 0 0 8.4Zm0 2c-4.15 0-7.5 2.28-7.5 5.1 0 .72.58 1.3 1.3 1.3h12.4c.72 0 1.3-.58 1.3-1.3 0-2.82-3.35-5.1-7.5-5.1Z'/%3E%3C/svg%3E");
}

nav a:hover {
  transform: translateX(4px);
  color: var(--text);
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 0 18px rgba(208, 188, 255, 0.12);
}

nav a[aria-current="page"] {
  color: var(--primary);
  background:
    linear-gradient(135deg, rgba(208, 188, 255, 0.18), rgba(77, 142, 255, 0.08)),
    rgba(255, 255, 255, 0.08);
  border-color: rgba(208, 188, 255, 0.24);
  box-shadow: 0 0 20px rgba(208, 188, 255, 0.27), 0 10px 30px rgba(0, 0, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.13), inset 3px 0 0 var(--primary);
}

nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 11px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--primary);
  box-shadow: 0 0 12px rgba(208, 188, 255, 0.72);
}

main {
  width: min(1600px, calc(100vw - var(--sidebar-width)));
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  padding: 28px 48px 48px;
  display: grid;
  gap: 22px;
  align-content: start;
}

main > * {
  min-width: 0;
}

h2,
h3,
p,
ul {
  margin-top: 0;
}

h2 {
  margin-bottom: 0;
  color: var(--text);
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0;
  text-shadow: 0 0 28px rgba(208, 188, 255, 0.16);
}

h2::after {
  content: "";
  width: 88px;
  height: 3px;
  margin-top: 16px;
  display: block;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--primary), var(--tertiary-container), transparent);
  box-shadow: 0 0 18px rgba(208, 188, 255, 0.28);
}

h3 {
  margin-bottom: 18px;
  color: var(--text);
  font-family: Sora, Inter, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

p {
  color: var(--muted);
  line-height: 1.65;
}

form,
section,
table,
#countExpenses,
#totalExpenses,
#filterCount,
#filterTotal,
#reportMessage {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    var(--glass-bg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37), inset 0 1px 1px rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}

form,
section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 24px;
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}

form::before,
section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 30%),
    radial-gradient(circle at 16% 0%, rgba(208, 188, 255, 0.1), transparent 38%),
    radial-gradient(circle at 94% 94%, rgba(77, 142, 255, 0.08), transparent 36%);
  opacity: 0.45;
}

form:hover,
section:hover,
#countExpenses:hover,
#totalExpenses:hover,
#filterCount:hover,
#filterTotal:hover {
  transform: translateY(-2px);
  border-color: var(--glass-border-strong);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.04) 42%, rgba(77, 142, 255, 0.05)),
    var(--glass-bg-strong);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(208, 188, 255, 0.45), 0 0 42px rgba(160, 120, 255, 0.42), inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

form {
  display: grid;
  gap: 14px;
}

label {
  align-self: end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

input,
select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028)), rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-lg);
  outline: none;
  color-scheme: dark;
  font: inherit;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.055);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

input::placeholder {
  color: rgba(203, 195, 215, 0.62);
}

select option {
  color: var(--text);
  background: var(--surface-low);
}

input:focus,
select:focus {
  border-color: var(--primary);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.04)), rgba(0, 0, 0, 0.22);
  box-shadow: 0 0 0 1px rgba(208, 188, 255, 0.7), 0 0 12px rgba(147, 51, 234, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

input:hover,
select:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

button {
  min-height: 48px;
  padding: 0 20px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, var(--primary), var(--primary-container) 48%, var(--inverse-primary)),
    rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(139, 92, 246, 0.26), 0 0 18px rgba(208, 188, 255, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.38);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

button::after {
  content: "";
  position: absolute;
  inset: -50% auto -50% -45%;
  z-index: -1;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: skewX(-18deg);
  transition: left 420ms ease;
}

button:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08) saturate(1.1);
  box-shadow: 0 18px 38px rgba(139, 92, 246, 0.32), 0 0 30px rgba(208, 188, 255, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.44);
}

button:hover::after {
  left: 116%;
}

button:active {
  transform: scale(0.98);
}

/* Initial hidden state for the Cancel button (toggled by JS via inline style). */
#cancelBtn {
  display: none;
}

#cancelBtn,
#resetBtn {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 10px 24px rgba(0, 0, 0, 0.18);
}

#cancelBtn:hover,
#resetBtn:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.09);
}

/* Color-coded export buttons on Reports. */
#pdfBtn {
  color: #ffb4ab;
  background: linear-gradient(180deg, rgba(255, 180, 171, 0.16), rgba(255, 180, 171, 0.06));
  border-color: rgba(255, 180, 171, 0.32);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 10px 24px rgba(0, 0, 0, 0.18);
}

#csvBtn {
  color: #7ee0a8;
  background: linear-gradient(180deg, rgba(126, 224, 168, 0.16), rgba(126, 224, 168, 0.06));
  border-color: rgba(126, 224, 168, 0.32);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 10px 24px rgba(0, 0, 0, 0.18);
}

#pdfBtn:hover {
  border-color: rgba(255, 180, 171, 0.5);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), 0 0 26px rgba(255, 180, 171, 0.32);
}

#csvBtn:hover {
  border-color: rgba(126, 224, 168, 0.5);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), 0 0 26px rgba(126, 224, 168, 0.32);
}

#addBtn::before,
#cancelBtn::before,
#filterBtn::before,
#resetBtn::before,
#pdfBtn::before,
#csvBtn::before,
td button::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 17px 17px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 17px 17px;
}

#addBtn::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5Z'/%3E%3C/svg%3E");
}

#cancelBtn::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.4 5 12.6 12.6-1.4 1.4L5 6.4 6.4 5Zm11.2 0L19 6.4 6.4 19 5 17.6 17.6 5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.4 5 12.6 12.6-1.4 1.4L5 6.4 6.4 5Zm11.2 0L19 6.4 6.4 19 5 17.6 17.6 5Z'/%3E%3C/svg%3E");
}

#filterBtn::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h16v2H4V6Zm3 5h10v2H7v-2Zm3 5h4v2h-4v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h16v2H4V6Zm3 5h10v2H7v-2Zm3 5h4v2h-4v-2Z'/%3E%3C/svg%3E");
}

#resetBtn::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a7 7 0 1 1-6.32 10H8a5 5 0 1 0 1.2-5.2L12 12H5V5l2.35 2.35A6.97 6.97 0 0 1 12 5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a7 7 0 1 1-6.32 10H8a5 5 0 1 0 1.2-5.2L12 12H5V5l2.35 2.35A6.97 6.97 0 0 1 12 5Z'/%3E%3C/svg%3E");
}

#pdfBtn::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2h8l4 4v16H6V2Zm8 1.5V7h3.5L14 3.5ZM8 12h8v2H8v-2Zm0 4h8v2H8v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2h8l4 4v16H6V2Zm8 1.5V7h3.5L14 3.5ZM8 12h8v2H8v-2Zm0 4h8v2H8v-2Z'/%3E%3C/svg%3E");
}

#csvBtn::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16v16H4V4Zm2 2v3h5V6H6Zm7 0v3h5V6h-5Zm-7 5v3h5v-3H6Zm7 0v3h5v-3h-5Zm-7 5v2h5v-2H6Zm7 0v2h5v-2h-5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16v16H4V4Zm2 2v3h5V6H6Zm7 0v3h5V6h-5Zm-7 5v3h5v-3H6Zm7 0v3h5v-3h-5Zm-7 5v2h5v-2H6Zm7 0v2h5v-2h-5Z'/%3E%3C/svg%3E");
}

table {
  width: 100%;
  position: relative;
  border-spacing: 0;
  overflow: hidden;
  table-layout: auto;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}

table:hover {
  border-color: var(--glass-border-strong);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(208, 188, 255, 0.45), 0 0 42px rgba(160, 120, 255, 0.42), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

th,
td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

th {
  color: var(--muted);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035)),
    rgba(13, 20, 39, 0.5);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

td {
  color: var(--text);
  font-size: 14px;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr {
  transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03);
  box-shadow: inset 2px 0 0 rgba(208, 188, 255, 0.45);
}

tbody td:nth-child(2)::before {
  content: "";
  width: 24px;
  height: 24px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  border-radius: var(--radius);
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23d0bcff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12 12 4h7v7l-8 8a2 2 0 0 1-2.83 0L4 14.83A2 2 0 0 1 4 12Zm12.5-3A1.5 1.5 0 1 0 16.5 6a1.5 1.5 0 0 0 0 3Z'/%3E%3C/svg%3E")
      center / 15px 15px no-repeat,
    rgba(208, 188, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 260ms ease;
}

/* Per-category icon + tint */
tbody td[data-category]::before {
  background-size: 16px 16px;
}

tbody td[data-category="Food"]::before {
  background-color: rgba(255, 180, 171, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ffb4ab' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z'/%3E%3C/svg%3E");
}

tbody td[data-category="Transport"]::before {
  background-color: rgba(173, 198, 255, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23adc6ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E");
}

tbody td[data-category="Fuel"]::before {
  background-color: rgba(210, 187, 255, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23d2bbff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.77 7.23l.01-.01-3.72-3.72L15 4.56l2.11 2.11c-.94.36-1.61 1.26-1.61 2.33 0 1.38 1.12 2.5 2.5 2.5.36 0 .69-.08 1-.21v7.21c0 .55-.45 1-1 1s-1-.45-1-1V14c0-1.1-.9-2-2-2h-1V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v16h10v-7.5h1.5v5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V9c0-.69-.28-1.32-.73-1.77zM12 10H6V5h6v5zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E");
}

tbody td[data-category="Utilities"]::before {
  background-color: rgba(255, 212, 121, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ffd479' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E");
}

tbody td[data-category="Entertainment"]::before {
  background-color: rgba(192, 132, 252, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23c084fc' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z'/%3E%3C/svg%3E");
}

tbody td[data-category="Leisure"]::before {
  background-color: rgba(34, 211, 238, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%2322d3ee' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z'/%3E%3C/svg%3E");
}

tbody td[data-category="Authorities"]::before {
  background-color: rgba(106, 141, 255, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%236a8dff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z'/%3E%3C/svg%3E");
}

tbody td[data-category="Other"]::before {
  background-color: rgba(203, 195, 215, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23cbc3d7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l-5.5 9h11L12 2zm0 3.84L13.93 9h-3.87L12 5.84zM17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM3 21.5h8v-8H3v8zm2-6h4v4H5v-4z'/%3E%3C/svg%3E");
}

/* Live icon: pop on row hover */
tbody tr:hover td[data-category]::before {
  transform: scale(1.16) rotate(-4deg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 14px rgba(208, 188, 255, 0.28);
}

td button {
  min-height: 34px;
  padding: 0 12px;
  margin: 3px 8px 3px 0;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  font-size: 12px;
}

td button:first-child {
  color: var(--error);
  border-color: rgba(255, 180, 171, 0.24);
  background: rgba(255, 180, 171, 0.08);
}

td button:first-child::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 12H7.7L7 9Zm3 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 12H7.7L7 9Zm3 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E");
}

td button:last-child {
  color: var(--tertiary);
  border-color: rgba(173, 198, 255, 0.24);
  background: rgba(77, 142, 255, 0.1);
}

td button:last-child::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17.25V21h3.75L18.8 9.95 15.05 6.2 4 17.25ZM17.7 4.05l2.25 2.25a1 1 0 0 1 0 1.4l-1.05 1.05-3.75-3.75 1.05-1.05a1 1 0 0 1 1.5.1Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17.25V21h3.75L18.8 9.95 15.05 6.2 4 17.25ZM17.7 4.05l2.25 2.25a1 1 0 0 1 0 1.4l-1.05 1.05-3.75-3.75 1.05-1.05a1 1 0 0 1 1.5.1Z'/%3E%3C/svg%3E");
}

#countExpenses,
#totalExpenses,
#filterCount,
#filterTotal,
#reportMessage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 88px;
  margin: 0;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  font-family: Sora, Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}

#countExpenses::after,
#totalExpenses::after,
#filterCount::after,
#filterTotal::after,
#reportMessage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.11), transparent 32%),
    linear-gradient(135deg, rgba(208, 188, 255, 0.095), transparent 52%);
}

#countExpenses::before,
#totalExpenses::before,
#filterCount::before,
#filterTotal::before,
#reportMessage::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: var(--radius-lg);
  background-color: rgba(208, 188, 255, 0.1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

#countExpenses::before,
#filterCount::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23d0bcff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm3 5h6V6H9v2Zm0 5h6v-2H9v2Zm0 5h6v-2H9v2Z'/%3E%3C/svg%3E");
}

#totalExpenses::before,
#filterTotal::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23adc6ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7.5A3.5 3.5 0 0 1 7.5 4H20v4H7.5a1.5 1.5 0 0 0 0 3H20v9H7.5A3.5 3.5 0 0 1 4 16.5v-9ZM17 15a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3C/svg%3E");
}

#reportMessage::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23d0bcff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 7h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3Cpath d='M12 2 1.5 21h21L12 2Z' fill-opacity='.42'/%3E%3C/svg%3E");
}

#reportMessage:empty {
  display: none;
}

main:has(#expensesTable) {
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto 76px auto;
  align-items: start;
  gap: 16px 24px;
}

main:has(#expensesTable) > h2 {
  grid-column: 1 / -1;
  grid-row: 1;
}

main:has(#expensesTable) > p:not(#countExpenses):not(#totalExpenses) {
  grid-column: 1 / -1;
  grid-row: 2;
}

form:has(#category) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1;
  grid-row: 3 / span 2;
  align-self: start;
  padding: 28px;
  gap: 16px;
}

form:has(#category) select,
form:has(#category) input {
  grid-column: 1 / -1;
}

form:has(#category) #addBtn {
  grid-column: 1 / -1;
}

form:has(#category):has(#cancelBtn[style*="inline"]) #addBtn,
form:has(#category):has(#cancelBtn[style*="inline"]) #cancelBtn {
  grid-column: auto;
}

main:has(#expensesTable) table {
  grid-column: 2 / -1;
  grid-row: 4;
  align-self: stretch;
  min-height: 430px;
}

main:has(#expensesTable) #countExpenses {
  grid-column: 2;
  grid-row: 3;
}

main:has(#expensesTable) #totalExpenses {
  grid-column: 3;
  grid-row: 3;
}

/* Home summary cards render as compact, equal-height stat cards beside the title. */
main:has(#expensesTable) #countExpenses,
main:has(#expensesTable) #totalExpenses {
  align-self: stretch;
  min-height: 76px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
}

main:has(#expensesTable) #countExpenses::before,
main:has(#expensesTable) #totalExpenses::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  background-size: 20px 20px;
}

main:has(#filteredExpensesTable) {
  grid-template-columns: minmax(290px, 360px) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto 76px auto;
  align-items: start;
  gap: 16px 24px;
}

main:has(#filteredExpensesTable) > h2 {
  grid-column: 1 / -1;
  grid-row: 1;
}

main:has(#filteredExpensesTable) > p:not(#filterCount):not(#filterTotal) {
  grid-column: 1 / -1;
  grid-row: 2;
}

main:has(#filteredExpensesTable) > form {
  grid-column: 1;
  grid-row: 3 / span 2;
  align-self: start;
}

main:has(#filteredExpensesTable) #filterCount {
  grid-column: 2;
  grid-row: 3;
}

main:has(#filteredExpensesTable) #filterTotal {
  grid-column: 3;
  grid-row: 3;
}

main:has(#filteredExpensesTable) > table {
  grid-column: 2 / -1;
  grid-row: 4;
}

/* Page intro callout — emphasized, eye-catching banner under each title. */
main:has(#expensesTable) > p:not(#countExpenses):not(#totalExpenses),
main:has(#filteredExpensesTable) > p:not(#filterCount):not(#filterTotal),
main:has(#pieChart) > p:not(#reportMessage) {
  max-width: 680px;
  margin: 0;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-family: Sora, Inter, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(208, 188, 255, 0.16), rgba(77, 142, 255, 0.07) 58%, rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), inset 3px 0 0 var(--primary), 0 10px 26px rgba(0, 0, 0, 0.2), 0 0 22px rgba(208, 188, 255, 0.12);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

main:has(#expensesTable) > p:not(#countExpenses):not(#totalExpenses)::before,
main:has(#filteredExpensesTable) > p:not(#filterCount):not(#filterTotal)::before,
main:has(#pieChart) > p:not(#reportMessage)::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-color: var(--primary);
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v2h-2V7zm0 4h2v6h-2v-6z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v2h-2V7zm0 4h2v6h-2v-6z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  filter: drop-shadow(0 0 6px rgba(208, 188, 255, 0.6));
}

form:has(#filterYear) {
  grid-template-columns: 1fr;
  padding: 24px;
  gap: 13px;
}

/* Narrow left filter panel: stack every field in source order. */
form:has(#filterYear) > * {
  grid-column: 1 !important;
  grid-row: auto !important;
}

main:has(#filteredExpensesTable) #filterCount,
main:has(#filteredExpensesTable) #filterTotal {
  align-self: stretch;
  min-height: 76px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
}

main:has(#filteredExpensesTable) #filterCount::before,
main:has(#filteredExpensesTable) #filterTotal::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  background-size: 20px 20px;
}

/* Stat card label (small caps) + value (big gradient number). */
#countExpenses span,
#totalExpenses span,
#filterCount span,
#filterTotal span {
  grid-column: 2;
  grid-row: 1;
  color: var(--muted);
  font-family: Inter, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.2;
}

#countExpenses strong,
#totalExpenses strong,
#filterCount strong,
#filterTotal strong {
  grid-column: 2;
  grid-row: 2;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #ffffff, #d0bcff 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

label[for="filterYear"],
label[for="filterMonth"],
label[for="filterDay"],
label[for="filterCategory"] {
  grid-row: 1;
}

#filterYear,
#filterMonth,
#filterDay,
#filterCategory {
  grid-row: 2;
}

label[for="fromDate"],
label[for="toDate"],
label[for="maxAmount"] {
  grid-row: 3;
}

#fromDate,
#toDate,
#maxAmount,
#filterBtn {
  grid-row: 4;
}

label[for="filterYear"],
#filterYear,
label[for="fromDate"],
#fromDate {
  grid-column: 1;
}

label[for="filterMonth"],
#filterMonth,
label[for="toDate"],
#toDate {
  grid-column: 2;
}

label[for="filterDay"],
#filterDay,
label[for="maxAmount"],
#maxAmount {
  grid-column: 3;
}

label[for="filterCategory"],
#filterCategory,
#filterBtn,
#resetBtn {
  grid-column: 4;
}

#resetBtn {
  grid-row: 5;
}

main:has(#pieChart) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

main:has(#pieChart) > h2,
main:has(#pieChart) > p:not(#reportMessage),
main:has(#pieChart) > form,
main:has(#pieChart) > #reportMessage {
  grid-column: 1 / -1;
}

form:has(#reportYear) {
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: end;
  padding: 22px;
}

label[for="reportYear"] {
  grid-column: 1;
  grid-row: 1;
}

#reportYear {
  grid-column: 1;
  grid-row: 2;
}

#pdfBtn {
  grid-column: 2;
  grid-row: 2;
}

#csvBtn {
  grid-column: 3;
  grid-row: 2;
}

main:has(#pieChart) section {
  min-height: 470px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

main:has(#pieChart) section h3 {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 11px;
}

main:has(#pieChart) section h3::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background-color: rgba(208, 188, 255, 0.13);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

section:has(#pieChart) h3::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23d0bcff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2.05v2.02c3.39.49 6 3.39 6 6.93 0 .89-.18 1.73-.49 2.5l1.74 1.01A8.99 8.99 0 0 0 21 11c0-4.63-3.5-8.45-8-8.95zM11 4.07V2.05A9 9 0 0 0 11 19.93v-2.02A7 7 0 0 1 11 4.07zm6.92 10.69l-1.73-1A7.06 7.06 0 0 1 13 16.93v2.02a9 9 0 0 0 4.92-4.19z'/%3E%3C/svg%3E");
}

section:has(#barChart) h3::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23adc6ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20V9h4v11H5Zm5 0V4h4v16h-4Zm5 0v-7h4v7h-4Z'/%3E%3C/svg%3E");
}

section:has(#pieChart) > div {
  position: relative;
  width: min(100%, 430px);
  min-height: 360px;
  margin: auto;
  display: grid;
  place-items: center;
}

section:has(#pieChart) > div > div {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 154px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
}

#reportTotal {
  margin: 0;
  font-family: Sora, Inter, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #ffffff, #d0bcff 65%, #adc6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(208, 188, 255, 0.4));
}

canvas {
  width: 100% !important;
  max-width: 100% !important;
}

#pieChart,
#barChart {
  min-height: 360px;
}

/* Bar chart: give the canvas a definite-height flex container so Chart.js
   (maintainAspectRatio:false) resolves a stable size and stops growing. */
main:has(#pieChart) section:has(#barChart) {
  height: 470px;
}

main:has(#pieChart) section:has(#barChart) #barChart {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto !important;
}

#pieChart {
  filter: drop-shadow(0 10px 30px rgba(124, 92, 246, 0.34));
}

main:has(img) {
  grid-template-columns: 1fr;
  max-width: 1360px;
}

main:has(img) section {
  grid-column: 1 / -1;
}

section:has(img) {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1.2fr);
  gap: 14px 40px;
  align-items: start;
  min-height: 470px;
  padding: 34px;
}

section:has(img) > :not(img) {
  grid-column: 2;
  align-self: start;
}

section:has(img) h2 {
  grid-row: 1;
  font-size: clamp(20px, 2.2vw, 26px);
}

section:has(img) h3 {
  margin: 6px 0 2px;
  color: var(--text);
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-shadow: 0 0 28px rgba(208, 188, 255, 0.18);
}

section:has(img) img {
  grid-column: 1;
  grid-row: 1 / span 9;
  width: 100%;
  max-width: 340px;
  height: 100%;
  min-height: 410px;
  max-height: 480px;
  object-fit: cover;
  justify-self: start;
  align-self: stretch;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
  padding: 5px;
  box-shadow: 0 0 0 1px rgba(208, 188, 255, 0.35), 0 32px 72px rgba(0, 0, 0, 0.5), 0 0 70px rgba(160, 120, 255, 0.45), 0 0 120px rgba(124, 92, 246, 0.32);
  animation: photo-glow 5s ease-in-out infinite;
}

@keyframes photo-glow {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(208, 188, 255, 0.35), 0 32px 72px rgba(0, 0, 0, 0.5), 0 0 70px rgba(160, 120, 255, 0.45), 0 0 120px rgba(124, 92, 246, 0.32);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(208, 188, 255, 0.55), 0 32px 72px rgba(0, 0, 0, 0.5), 0 0 95px rgba(160, 120, 255, 0.62), 0 0 150px rgba(124, 92, 246, 0.45);
  }
}

section:has(img) p:has(a) {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
}

section a[href*="github.com"],
section a[href*="linkedin.com"] {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  font-size: 0;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

section a[href*="github.com"]::before,
section a[href*="linkedin.com"]::before {
  content: "";
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

section a[href*="github.com"] {
  background: linear-gradient(180deg, #171b22, #05070a);
}

section a[href*="github.com"]::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.39.6.11.82-.26.82-.58v-2.02c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.33-1.76-1.33-1.76-1.09-.74.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.49 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.12-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23.96-.27 1.98-.4 3-.4s2.04.13 3 .4c2.29-1.55 3.3-1.23 3.3-1.23.66 1.66.24 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.62-5.48 5.92.43.37.82 1.1.82 2.22v3.29c0 .32.22.69.83.58A12.01 12.01 0 0 0 24 12c0-6.63-5.37-12-12-12Z'/%3E%3C/svg%3E");
}

section a[href*="linkedin.com"] {
  background: linear-gradient(180deg, #0a8bd2, #006097);
}

section a[href*="linkedin.com"]::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.45 20.45h-3.56v-5.58c0-1.33-.03-3.04-1.86-3.04-1.85 0-2.13 1.44-2.13 2.94v5.68H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.62 0 4.29 2.38 4.29 5.47v6.27h-.03ZM5.32 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM7.1 20.45H3.54V9H7.1v11.45ZM22.23 0H1.77C.8 0 0 .78 0 1.74v20.52C0 23.22.8 24 1.77 24h20.46c.98 0 1.77-.78 1.77-1.74V1.74C24 .78 23.2 0 22.23 0Z'/%3E%3C/svg%3E");
}

section a[href*="github.com"]:hover,
section a[href*="linkedin.com"]:hover {
  transform: translateY(-3px) scale(1.02);
}

section a[href*="github.com"]:hover {
  background: #000000;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36);
}

section a[href*="linkedin.com"]:hover {
  background: #006097;
  box-shadow: 0 18px 36px rgba(0, 119, 181, 0.32);
}

section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

section li {
  min-height: 68px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
    rgba(255, 255, 255, 0.032);
  font-weight: 700;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.055);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

section li:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 24px rgba(168, 85, 247, 0.18), 0 0 0 1px rgba(208, 188, 255, 0.3);
}

section li::before {
  content: "";
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--radius-lg);
  background-color: rgba(208, 188, 255, 0.1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.09);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 260ms ease;
}

section li:hover::before {
  transform: scale(1.14) rotate(-4deg);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16), 0 0 16px rgba(208, 188, 255, 0.32);
}

/* Technology cards: name + usage description stacked beside the icon. */
section li > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

section li strong {
  color: var(--text);
  font-family: Sora, Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

section li small {
  color: #e3e6f3;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

main:has(img) section:nth-of-type(4) ul {
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}

main:has(img) section:nth-of-type(4) li {
  align-items: flex-start;
  min-height: 84px;
  font-weight: 400;
}

main:has(img) section:nth-of-type(4) li::before {
  margin-top: 1px;
}

/* About hero: identity tag chips (location + school). */
main:has(img) section:nth-of-type(1) ul {
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
  gap: 10px;
}

main:has(img) section:nth-of-type(1) li {
  min-height: 46px;
  padding: 9px 16px;
  font-size: 13px;
}

main:has(img) section:nth-of-type(1) li::before {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background-size: 17px 17px;
}

main:has(img) section:nth-of-type(1) li:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23adc6ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}

main:has(img) section:nth-of-type(1) li:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23d0bcff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 1 9l11 6 9-4.9V17h2V9L12 3ZM5 13.2V17l7 3.8 7-3.8v-3.8l-7 3.8-7-3.8Z'/%3E%3C/svg%3E");
}

/* About features: one distinct icon per feature row. */
main:has(img) section:nth-of-type(3) li:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23d0bcff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 9h4v2h-4v4h-2v-4H7v-2h4V7h2v4Z'/%3E%3C/svg%3E");
}

main:has(img) section:nth-of-type(3) li:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23adc6ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17.25V21h3.75L18.8 9.95 15.05 6.2 4 17.25ZM17.7 4.05l2.25 2.25a1 1 0 0 1 0 1.4l-1.05 1.05-3.75-3.75 1.05-1.05a1 1 0 0 1 1.5.1Z'/%3E%3C/svg%3E");
}

main:has(img) section:nth-of-type(3) li:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ffb4ab' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 12H7.7L7 9Zm3 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E");
}

main:has(img) section:nth-of-type(3) li:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23adc6ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.66 3.13 3 7 3s7-1.34 7-3V6'/%3E%3Cpath d='M5 12v6c0 1.66 3.13 3 7 3s7-1.34 7-3v-6'/%3E%3C/svg%3E");
}

main:has(img) section:nth-of-type(3) li:nth-child(5)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23d0bcff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h16v2H4V6Zm3 5h10v2H7v-2Zm3 5h4v2h-4v-2Z'/%3E%3C/svg%3E");
}

main:has(img) section:nth-of-type(3) li:nth-child(6)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23d2bbff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20V9h4v11H5Zm5 0V4h4v16h-4Zm5 0v-7h4v7h-4Z'/%3E%3C/svg%3E");
}

main:has(img) section:nth-of-type(3) li:nth-child(7)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23adc6ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h3l-4 4-4-4h3V4ZM5 18h14v2H5v-2Z'/%3E%3C/svg%3E");
}

main:has(img) section:nth-of-type(4) li:nth-child(1)::before {
  background-color: rgba(227, 79, 38, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E34F26' d='M19.04 113.85 9 1.66h110l-10.05 112.17L63.93 126.34z'/%3E%3Cpath fill='%23EF652A' d='M64 116.8l36.38-10.08 8.59-96.04H64z'/%3E%3Cpath fill='%23EBEBEB' d='M64 52.36H45.79l-1.26-14.1H64V24.48H29.49l.33 3.69 3.39 37.97H64zm0 35.78-.06.02-15.32-4.14-.98-10.98H33.82l1.93 21.63 28.18 7.82.07-.02z'/%3E%3Cpath fill='%23FFF' d='M63.95 52.36v13.78h16.95l-1.6 17.87-15.35 4.14v14.33l28.2-7.81.2-2.33 3.25-36.29.34-3.69h-31.99zm0-27.88v13.78h33.25l.28-3.1.63-6.99.33-3.69z'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

main:has(img) section:nth-of-type(4) li:nth-child(2)::before {
  background-color: rgba(21, 114, 182, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%231572B6' d='M18.81 113.99 8.76 1.67h110.48l-10.06 112.3-45.25 12.56z'/%3E%3Cpath fill='%2333A9DC' d='m64 116.98 36.58-10.14 8.6-96H64z'/%3E%3Cpath fill='%23fff' d='M64 51.46h18.31l1.26-14.17H64V23.45h34.7l-.33 3.71-3.4 38.14H64zm0 36.03.06.02 15.41-4.16.99-11.1H94.3l-1.95 21.84-28.28 7.84-.07-.02z'/%3E%3Cpath fill='%23EBEBEB' d='M64.08 51.46V65.3H47.46l1.51 16.95 15.1 4.08v14.42l-28.06-7.79-.2-2.29-3.07-34.46-.32-3.66h31.66zm0-28.01v13.84H31.16l-.28-3.11-.63-7.02-.33-3.71z'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

main:has(img) section:nth-of-type(4) li:nth-child(3)::before {
  background-color: rgba(247, 223, 30, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F7DF1E' d='M1.41 1.41h125.17v125.17H1.41z'/%3E%3Cpath d='M86.91 99.2c2.52 4.11 5.8 7.14 11.6 7.14 4.87 0 7.98-2.43 7.98-5.8 0-4.03-3.19-5.46-8.55-7.8l-2.94-1.26c-8.48-3.61-14.11-8.14-14.11-17.71 0-8.82 6.72-15.53 17.22-15.53 7.48 0 12.85 2.6 16.72 9.42l-9.15 5.88c-2.02-3.61-4.2-5.04-7.56-5.04-3.44 0-5.63 2.18-5.63 5.04 0 3.53 2.18 4.96 7.22 7.14l2.94 1.26c9.99 4.28 15.62 8.65 15.62 18.48 0 10.58-8.31 16.38-19.48 16.38-10.91 0-17.97-5.21-21.42-12.01zm-41.54 1c1.85 3.28 3.53 6.05 7.56 6.05 3.86 0 6.3-1.51 6.3-7.39V59.12h11.76v39.9c0 12.18-7.14 17.72-17.55 17.72-9.4 0-14.86-4.87-17.64-10.73z' fill='%23000'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

main:has(img) section:nth-of-type(4) li:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23d0bcff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 3.5 7.5 12 12l8.5-4.5L12 3Z'/%3E%3Cpath d='m3.5 12 8.5 4.5 8.5-4.5'/%3E%3Cpath d='m3.5 16.5 8.5 4.5 8.5-4.5'/%3E%3C/svg%3E");
}

main:has(img) section:nth-of-type(4) li:nth-child(5)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23adc6ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.66 3.13 3 7 3s7-1.34 7-3V6'/%3E%3Cpath d='M5 12v6c0 1.66 3.13 3 7 3s7-1.34 7-3v-6'/%3E%3C/svg%3E");
}

main:has(img) section:nth-of-type(4) li:nth-child(6)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23d2bbff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='m7 15 3-4 4 2 5-7'/%3E%3Ccircle cx='7' cy='15' r='1.2' fill='%23d2bbff'/%3E%3Ccircle cx='10' cy='11' r='1.2' fill='%23d2bbff'/%3E%3Ccircle cx='14' cy='13' r='1.2' fill='%23d2bbff'/%3E%3Ccircle cx='19' cy='6' r='1.2' fill='%23d2bbff'/%3E%3C/svg%3E");
}

main:has(img) section:nth-of-type(4) li:nth-child(7)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2h8l4 4v16H6V2Z' fill='%23ffb4ab'/%3E%3Cpath d='M14 2v5h5' fill='%23060e20' fill-opacity='.34'/%3E%3Cpath d='M8 15h8M8 18h8M8 9h4' stroke='%23060e20' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

main:has(img) section:nth-of-type(4) li:nth-child(8)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23adc6ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6v20h12V6l-4-4Z'/%3E%3Cpath d='M14 2v5h4'/%3E%3Cpath d='M8 14h8M8 17h8M8 11h3'/%3E%3Cpath d='m13.5 11 2 2-2 2'/%3E%3C/svg%3E");
}

@media (max-width: 1060px) {
  main:has(#expensesTable),
  main:has(#filteredExpensesTable),
  main:has(#pieChart),
  main:has(img) {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  main:has(#expensesTable) > *,
  main:has(#filteredExpensesTable) > *,
  main:has(#pieChart) > *,
  main:has(img) > *,
  main:has(#expensesTable) form,
  main:has(#expensesTable) table,
  main:has(#expensesTable) #countExpenses,
  main:has(#expensesTable) #totalExpenses,
  main:has(#filteredExpensesTable) > form,
  main:has(#filteredExpensesTable) > table,
  main:has(#filteredExpensesTable) #filterCount,
  main:has(#filteredExpensesTable) #filterTotal {
    grid-column: 1 / -1;
  }

  main:has(#filteredExpensesTable) > h2,
  main:has(#filteredExpensesTable) > p,
  main:has(#filteredExpensesTable) > form,
  main:has(#filteredExpensesTable) > table,
  main:has(#filteredExpensesTable) #filterCount,
  main:has(#filteredExpensesTable) #filterTotal {
    grid-row: auto;
  }

  main:has(#expensesTable) > h2,
  main:has(#expensesTable) > p,
  main:has(#expensesTable) form,
  main:has(#expensesTable) table,
  main:has(#expensesTable) #countExpenses,
  main:has(#expensesTable) #totalExpenses {
    grid-row: auto;
  }

  form:has(#filterYear) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  label[for="filterYear"],
  #filterYear,
  label[for="filterDay"],
  #filterDay,
  label[for="fromDate"],
  #fromDate,
  #filterBtn {
    grid-column: 1;
  }

  label[for="filterMonth"],
  #filterMonth,
  label[for="filterCategory"],
  #filterCategory,
  label[for="toDate"],
  #toDate,
  label[for="maxAmount"],
  #maxAmount,
  #resetBtn {
    grid-column: 2;
  }

  label[for="filterYear"],
  label[for="filterMonth"] {
    grid-row: 1;
  }

  #filterYear,
  #filterMonth {
    grid-row: 2;
  }

  label[for="filterDay"],
  label[for="filterCategory"] {
    grid-row: 3;
  }

  #filterDay,
  #filterCategory {
    grid-row: 4;
  }

  label[for="fromDate"],
  label[for="toDate"] {
    grid-row: 5;
  }

  #fromDate,
  #toDate {
    grid-row: 6;
  }

  label[for="maxAmount"] {
    grid-row: 7;
  }

  #maxAmount {
    grid-row: 8;
  }

  #filterBtn,
  #resetBtn {
    grid-row: 9;
  }
}

@media (max-width: 780px) {
  :root {
    --sidebar-width: 64px;
  }

  header {
    padding: 18px 8px;
    align-items: center;
  }

  header h1 {
    width: 48px;
    justify-content: center;
    font-size: 0;
  }

  header h1::after {
    display: none;
  }

  nav a {
    width: 48px;
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  nav a:hover {
    transform: translateY(-2px);
  }

  main {
    width: calc(100vw - var(--sidebar-width));
    padding: 24px 16px 34px;
  }

  h2 {
    font-size: 28px;
  }

  form:has(#category),
  form:has(#filterYear),
  form:has(#reportYear) {
    grid-template-columns: 1fr;
  }

  form:has(#category) #addBtn,
  form:has(#category):has(#cancelBtn[style*="inline"]) #addBtn,
  form:has(#category):has(#cancelBtn[style*="inline"]) #cancelBtn,
  label[for],
  input,
  select,
  button,
  #filterBtn,
  #resetBtn,
  #pdfBtn,
  #csvBtn {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  table {
    display: block;
    overflow-x: auto;
  }

  thead,
  tbody {
    display: table;
    width: 100%;
    min-width: 580px;
  }

  section:has(img) {
    grid-template-columns: 1fr;
  }

  section:has(img) > :not(img),
  section:has(img) img {
    grid-column: 1;
  }

  section:has(img) img {
    grid-row: auto;
    width: 100%;
    max-width: 300px;
    height: 380px;
    min-height: 0;
    justify-self: start;
  }

  section ul {
    grid-template-columns: 1fr;
  }

  main:has(#pieChart) section {
    min-height: 380px;
  }
}

/* =========================================================
   SENIOR UI POLISH V6 — living Liquid Glass + clear buttons
   Added on top of the existing CSS without touching HTML/JS/classes.
   Focus: stronger visible controls, premium motion, animated title line,
   richer bokeh background, live logo arrow, refined purple glow.
========================================================= */

:root {
  --senior-glow-purple: rgba(168, 85, 247, 0.46);
  --senior-glow-purple-soft: rgba(208, 188, 255, 0.28);
  --senior-glow-blue: rgba(59, 130, 246, 0.28);
  --senior-glow-cyan: rgba(34, 211, 238, 0.18);
  --senior-button-text: #ffffff;
  --senior-button-shadow: 0 18px 44px rgba(112, 63, 255, 0.42), 0 0 34px rgba(208, 188, 255, 0.22);
  --senior-glass-stroke: rgba(255, 255, 255, 0.18);
  --senior-glass-stroke-hot: rgba(208, 188, 255, 0.42);
}

/* A more dramatic but still premium animated background. */
body {
  position: relative;
  background:
    radial-gradient(circle at 15% 18%, rgba(168, 85, 247, 0.34), transparent 18%),
    radial-gradient(circle at 82% 14%, rgba(59, 130, 246, 0.26), transparent 20%),
    radial-gradient(circle at 72% 76%, rgba(208, 188, 255, 0.18), transparent 22%),
    radial-gradient(circle at 25% 86%, rgba(34, 211, 238, 0.12), transparent 18%),
    linear-gradient(120deg, rgba(6, 10, 24, 0.98), rgba(17, 20, 45, 0.96) 42%, rgba(8, 18, 42, 0.98)),
    var(--bg) !important;
  background-attachment: fixed;
}

/* Animated aurora film — visible but behind the content. */
body::before {
  width: 980px !important;
  height: 980px !important;
  top: -280px !important;
  right: -210px !important;
  background:
    conic-gradient(from 180deg,
      rgba(168, 85, 247, 0.52),
      rgba(59, 130, 246, 0.34),
      rgba(34, 211, 238, 0.20),
      rgba(208, 188, 255, 0.42),
      rgba(168, 85, 247, 0.52)) !important;
  opacity: 0.42 !important;
  filter: blur(145px) saturate(155%) !important;
  animation: seniorAuroraOne 18s ease-in-out infinite alternate, seniorGlowBreath 7s ease-in-out infinite !important;
}

body::after {
  width: 920px !important;
  height: 920px !important;
  left: -260px !important;
  bottom: -320px !important;
  background:
    radial-gradient(circle, rgba(124, 58, 237, 0.52), transparent 55%),
    radial-gradient(circle at 70% 35%, rgba(59, 130, 246, 0.34), transparent 48%) !important;
  opacity: 0.44 !important;
  filter: blur(135px) saturate(160%) !important;
  animation: seniorAuroraTwo 20s ease-in-out infinite alternate, seniorGlowBreath 9s ease-in-out infinite !important;
}

html::before {
  width: 620px !important;
  height: 620px !important;
  top: 28% !important;
  left: 48% !important;
  background: rgba(168, 85, 247, 0.34) !important;
  opacity: 0.22 !important;
  filter: blur(115px) !important;
  animation: seniorBokehDrift 26s ease-in-out infinite alternate !important;
}

html::after {
  width: 520px !important;
  height: 520px !important;
  top: 62% !important;
  right: 7% !important;
  background: rgba(59, 130, 246, 0.30) !important;
  opacity: 0.20 !important;
  filter: blur(120px) !important;
  animation: seniorBokehDriftTwo 28s ease-in-out infinite alternate !important;
}

@keyframes seniorAuroraOne {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-48px, 55px, 0) rotate(16deg) scale(1.08); }
  100% { transform: translate3d(-96px, 26px, 0) rotate(32deg) scale(1.14); }
}

@keyframes seniorAuroraTwo {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(92px, -64px, 0) rotate(-22deg) scale(1.16); }
}

@keyframes seniorBokehDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(80px, -45px, 0) scale(1.22); }
}

@keyframes seniorBokehDriftTwo {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-62px, 72px, 0) scale(1.18); }
}

@keyframes seniorGlowBreath {
  0%, 100% { opacity: 0.34; }
  50% { opacity: 0.54; }
}

/* Extra premium background texture, using main so we don't need new HTML. */
main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.30;
  background:
    linear-gradient(115deg, transparent 0 43%, rgba(255, 255, 255, 0.055) 49%, transparent 55% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 68px);
  mask-image: radial-gradient(circle at 55% 42%, #000 0 46%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 55% 42%, #000 0 46%, transparent 78%);
  animation: seniorGridFloat 18s linear infinite;
}

@keyframes seniorGridFloat {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-34px, -34px, 0); }
}

/* Page entrance that feels refined, not jumpy. */
main {
  animation: seniorPageIn 720ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes seniorPageIn {
  0% { opacity: 0; transform: translateY(20px) scale(0.992); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Stronger pure-glass object treatment. */
form,
section,
table,
#countExpenses,
#totalExpenses,
#filterCount,
#filterTotal,
#reportMessage {
  border-color: var(--senior-glass-stroke) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035) 40%, rgba(77, 142, 255, 0.045)),
    rgba(13, 20, 39, 0.50) !important;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(255, 255, 255, 0.045),
    0 0 28px rgba(168, 85, 247, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(34px) saturate(190%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.05) !important;
}

form::after,
section::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.20), transparent 22%, transparent 70%, rgba(208, 188, 255, 0.07)),
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.16), transparent 34%);
  opacity: 0.42;
  transition: opacity 260ms ease, transform 260ms ease;
}

form:hover,
section:hover,
table:hover,
#countExpenses:hover,
#totalExpenses:hover,
#filterCount:hover,
#filterTotal:hover {
  transform: translateY(-4px) !important;
  border-color: var(--senior-glass-stroke-hot) !important;
  box-shadow:
    0 30px 88px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(208, 188, 255, 0.42),
    0 0 44px var(--senior-glow-purple),
    0 0 90px rgba(59, 130, 246, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07) !important;
}

form:hover::after,
section:hover::after {
  opacity: 0.66;
  transform: translateY(-1px);
}

/* Fix and strengthen all buttons so they are always readable. */
button,
td button,
#addBtn,
#cancelBtn,
#filterBtn,
#resetBtn,
#pdfBtn,
#csvBtn,
a[href*="github.com"],
a[href*="linkedin.com"] {
  min-height: 44px;
  color: var(--senior-button-text) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.38) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.075) 24%, rgba(124, 58, 237, 0.50) 62%, rgba(59, 130, 246, 0.28)),
    linear-gradient(135deg, #c4b5fd, #8b5cf6 54%, #6d3bd7) !important;
  box-shadow:
    var(--senior-button-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;
  filter: saturate(1.08) contrast(1.02);
  transform-style: preserve-3d;
}

button::after,
td button::after,
a[href*="github.com"]::after,
a[href*="linkedin.com"]::after {
  content: "";
  position: absolute;
  top: -70%;
  bottom: -70%;
  left: -55%;
  z-index: -1;
  width: 44%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  transform: skewX(-18deg);
  transition: left 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

button:hover,
td button:hover,
a[href*="github.com"]:hover,
a[href*="linkedin.com"]:hover {
  transform: translateY(-3px) scale(1.025) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  filter: brightness(1.08) saturate(1.18) !important;
  box-shadow:
    0 22px 54px rgba(112, 63, 255, 0.48),
    0 0 44px rgba(208, 188, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}

button:hover::after,
td button:hover::after,
a[href*="github.com"]:hover::after,
a[href*="linkedin.com"]:hover::after {
  left: 120%;
}

button:active,
td button:active,
a[href*="github.com"]:active,
a[href*="linkedin.com"]:active {
  transform: translateY(0) scale(0.975) !important;
}

/* Secondary buttons become visible glass, not washed out. */
#cancelBtn,
#resetBtn {
  color: #f4efff !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.06)),
    rgba(23, 31, 51, 0.82) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(208, 188, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* Export buttons keep readable brand contrast. */
#pdfBtn {
  color: #ffe6e2 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 180, 171, 0.18)),
    linear-gradient(135deg, #9f3d4a, #5c2432) !important;
  border-color: rgba(255, 180, 171, 0.42) !important;
  box-shadow: 0 18px 42px rgba(255, 92, 92, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

#csvBtn {
  color: #e8fff0 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(126, 224, 168, 0.18)),
    linear-gradient(135deg, #14794d, #0f3b33) !important;
  border-color: rgba(126, 224, 168, 0.42) !important;
  box-shadow: 0 18px 42px rgba(40, 220, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

/* Table action buttons need extra contrast because they are small. */
td button {
  min-height: 36px !important;
  padding-inline: 13px !important;
  font-weight: 800 !important;
}

td button:first-child {
  color: #ffd7d2 !important;
  background: linear-gradient(135deg, rgba(255, 180, 171, 0.28), rgba(117, 37, 47, 0.78)) !important;
  border-color: rgba(255, 180, 171, 0.44) !important;
  box-shadow: 0 10px 22px rgba(255, 68, 68, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

td button:last-child {
  color: #eaf2ff !important;
  background: linear-gradient(135deg, rgba(173, 198, 255, 0.28), rgba(49, 91, 190, 0.76)) !important;
  border-color: rgba(173, 198, 255, 0.46) !important;
  box-shadow: 0 10px 22px rgba(77, 142, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

/* GitHub and LinkedIn hover with their own brand glow. */
a[href*="github.com"] {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
    linear-gradient(135deg, #1f2328, #070707) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), 0 0 20px rgba(255, 255, 255, 0.07) !important;
}

a[href*="github.com"]:hover {
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.48), 0 0 38px rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

a[href*="linkedin.com"] {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
    linear-gradient(135deg, #0a66c2, #004182) !important;
  border-color: rgba(10, 102, 194, 0.58) !important;
  box-shadow: 0 14px 34px rgba(10, 102, 194, 0.24), 0 0 18px rgba(10, 102, 194, 0.16) !important;
}

a[href*="linkedin.com"]:hover {
  box-shadow: 0 22px 48px rgba(10, 102, 194, 0.34), 0 0 42px rgba(10, 102, 194, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

/* Sidebar and logo: high-end live interactions. */
header {
  box-shadow:
    28px 0 90px rgba(0, 0, 0, 0.52),
    0 0 70px rgba(124, 58, 237, 0.22),
    inset 1px 0 0 rgba(255, 255, 255, 0.13) !important;
}

header h1::before {
  animation: logo-flow 7s ease-in-out infinite alternate, logo-glow 4.6s ease-in-out infinite, seniorArrowPulse 2.7s ease-in-out infinite !important;
  transform-origin: center;
}

@keyframes seniorArrowPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  45% { transform: scale(1.12) rotate(-2deg); }
  70% { transform: scale(0.98) rotate(1deg); }
}

nav a {
  overflow: hidden;
}

nav a::after {
  transition: transform 260ms ease, opacity 260ms ease, box-shadow 260ms ease;
}

nav a:hover {
  transform: translateX(7px) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
    rgba(208, 188, 255, 0.08) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), 0 0 28px rgba(208, 188, 255, 0.26) !important;
}

nav a:hover::before {
  transform: scale(1.22) rotate(-6deg) !important;
  filter: drop-shadow(0 0 10px rgba(208, 188, 255, 0.82));
}

nav a[aria-current="page"] {
  animation: seniorActiveNav 2.8s ease-in-out infinite;
}

@keyframes seniorActiveNav {
  0%, 100% { box-shadow: 0 0 20px rgba(208, 188, 255, 0.23), 0 10px 30px rgba(0, 0, 0, 0.22), inset 3px 0 0 var(--primary); }
  50% { box-shadow: 0 0 34px rgba(208, 188, 255, 0.46), 0 12px 36px rgba(0, 0, 0, 0.28), inset 3px 0 0 var(--primary); }
}

/* Animated title underline — unique scanning neon line under each page title. */
h2::after {
  position: relative;
  width: 118px !important;
  height: 4px !important;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(208, 188, 255, 0.95), rgba(77, 142, 255, 0.95), rgba(34, 211, 238, 0.60), transparent) !important;
  box-shadow: 0 0 22px rgba(208, 188, 255, 0.48), 0 0 34px rgba(77, 142, 255, 0.30) !important;
  transform-origin: left center;
  animation: seniorTitleLine 2.8s ease-in-out infinite alternate;
}

h2::before {
  content: "";
  position: absolute;
}

@keyframes seniorTitleLine {
  0% { width: 78px; filter: hue-rotate(0deg) brightness(1); opacity: 0.78; }
  55% { width: 132px; filter: hue-rotate(12deg) brightness(1.22); opacity: 1; }
  100% { width: 104px; filter: hue-rotate(-10deg) brightness(1.05); opacity: 0.86; }
}

/* Inputs: premium alive focus/hover. */
input,
select {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.028)),
    rgba(3, 7, 18, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 0 0 rgba(168, 85, 247, 0) !important;
}

input:hover,
select:hover {
  border-color: rgba(208, 188, 255, 0.38) !important;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

input:focus,
select:focus {
  border-color: rgba(208, 188, 255, 0.76) !important;
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.18),
    0 0 34px rgba(168, 85, 247, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Tables: richer rows, clearer hover and readable actions. */
tbody tr:hover {
  background:
    linear-gradient(90deg, rgba(168, 85, 247, 0.16), rgba(59, 130, 246, 0.08), rgba(255, 255, 255, 0.025)) !important;
  box-shadow:
    inset 4px 0 0 rgba(208, 188, 255, 0.88),
    0 0 24px rgba(168, 85, 247, 0.12) !important;
}

tbody tr:hover td[data-category]::before,
tbody tr:hover td:nth-child(2)::before {
  transform: scale(1.20) rotate(-6deg) !important;
  filter: drop-shadow(0 0 10px rgba(208, 188, 255, 0.62));
}

/* About image: premium visible purple halo. */
section:has(img) img {
  border-color: rgba(208, 188, 255, 0.50) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 44px rgba(168, 85, 247, 0.52),
    0 0 90px rgba(59, 130, 246, 0.24) !important;
  animation: seniorProfileAura 4.2s ease-in-out infinite;
}

section:has(img) img:hover {
  transform: translateY(-5px) scale(1.018) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.54),
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 62px rgba(168, 85, 247, 0.72),
    0 0 120px rgba(59, 130, 246, 0.34) !important;
}

@keyframes seniorProfileAura {
  0%, 100% { box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 36px rgba(168, 85, 247, 0.42), 0 0 80px rgba(59, 130, 246, 0.20); }
  50% { box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 60px rgba(168, 85, 247, 0.70), 0 0 110px rgba(59, 130, 246, 0.30); }
}

/* Features and technology chips/cards: alive icons and glass lift. */
section ul li {
  position: relative;
  overflow: hidden;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background 260ms ease, filter 260ms ease !important;
}

section ul li::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: translateX(-120%);
  transition: transform 620ms ease;
}

section ul li:hover {
  transform: translateY(-5px) scale(1.015) !important;
  border-color: rgba(208, 188, 255, 0.42) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
    rgba(23, 31, 51, 0.64) !important;
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.34),
    0 0 38px rgba(168, 85, 247, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  filter: saturate(1.1);
}

section ul li:hover::after {
  transform: translateX(120%);
}

section ul li:hover::before {
  transform: scale(1.15) rotate(-5deg) !important;
  filter: drop-shadow(0 0 10px rgba(208, 188, 255, 0.7));
}

/* Charts/canvas containers: clean glow without harming Chart.js. */
canvas {
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.24)) drop-shadow(0 0 24px rgba(168, 85, 247, 0.12));
}

/* Make chart cards feel less flat. */
main:has(#pieChart) section:hover canvas {
  filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 34px rgba(168, 85, 247, 0.22));
}

/* Better keyboard focus for real UI quality. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(208, 188, 255, 0.55);
  outline-offset: 3px;
}

/* Button visibility on small screens too. */
@media (max-width: 760px) {
  button,
  td button,
  #addBtn,
  #cancelBtn,
  #filterBtn,
  #resetBtn,
  #pdfBtn,
  #csvBtn {
    min-height: 46px !important;
    font-size: 13px !important;
  }

  td button {
    min-height: 34px !important;
    padding-inline: 10px !important;
  }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}


/* =========================================================
   EXPENSEFLOW — FINAL SENIOR UI/UX POLISH v7
   No HTML changes. No JS changes. No classes.
   Focus: living background, pure glass, premium buttons,
   fixed social buttons, animated title underline, logo motion,
   stronger chart glow, upgraded icons.
========================================================= */

:root {
  --efx-purple: rgba(168, 85, 247, 0.56);
  --efx-purple-soft: rgba(208, 188, 255, 0.34);
  --efx-blue: rgba(59, 130, 246, 0.34);
  --efx-cyan: rgba(34, 211, 238, 0.26);
  --efx-green: rgba(34, 197, 94, 0.34);
  --efx-red: rgba(239, 68, 68, 0.36);
  --efx-github: rgba(255, 255, 255, 0.36);
  --efx-linkedin: rgba(10, 102, 194, 0.68);
  --efx-glass-deep: rgba(10, 17, 35, 0.58);
  --efx-glass-mid: rgba(38, 45, 74, 0.42);
  --efx-glass-stroke: rgba(255, 255, 255, 0.18);
  --efx-glass-hot: rgba(208, 188, 255, 0.46);
  --efx-shadow-big:
    0 34px 88px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 46px rgba(168, 85, 247, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.055);
}

/* ---------- richer animated aurora / bokeh background ---------- */
body {
  background:
    radial-gradient(circle at 12% 18%, rgba(168, 85, 247, 0.34), transparent 26%),
    radial-gradient(circle at 78% 10%, rgba(77, 142, 255, 0.24), transparent 29%),
    radial-gradient(circle at 92% 76%, rgba(34, 211, 238, 0.12), transparent 30%),
    radial-gradient(circle at 42% 42%, rgba(208, 188, 255, 0.10), transparent 38%),
    linear-gradient(135deg, rgba(5, 10, 24, 0.98), rgba(12, 17, 38, 0.96) 40%, rgba(23, 28, 58, 0.94) 100%),
    var(--bg) !important;
  isolation: isolate;
}

body::before,
body::after,
html::before,
html::after {
  will-change: transform, opacity, filter;
}

body::before {
  width: 880px !important;
  height: 880px !important;
  top: -310px !important;
  right: -180px !important;
  left: auto !important;
  opacity: 0.42 !important;
  filter: blur(150px) saturate(140%) !important;
  background:
    radial-gradient(circle at 40% 42%, rgba(168, 85, 247, 0.92), transparent 54%),
    radial-gradient(circle at 64% 38%, rgba(59, 130, 246, 0.42), transparent 58%) !important;
  animation: efxAuroraOne 16s ease-in-out infinite alternate, efxGlowBreath 8s ease-in-out infinite !important;
}

body::after {
  width: 900px !important;
  height: 900px !important;
  left: -280px !important;
  bottom: -330px !important;
  right: auto !important;
  opacity: 0.36 !important;
  filter: blur(160px) saturate(150%) !important;
  background:
    radial-gradient(circle at 36% 48%, rgba(77, 142, 255, 0.76), transparent 52%),
    radial-gradient(circle at 58% 56%, rgba(208, 188, 255, 0.40), transparent 62%) !important;
  animation: efxAuroraTwo 18s ease-in-out infinite alternate, efxGlowBreath 10s ease-in-out infinite !important;
}

html::before {
  width: 620px !important;
  height: 620px !important;
  top: 30% !important;
  left: 46% !important;
  opacity: 0.20 !important;
  filter: blur(110px) saturate(160%) !important;
  background:
    radial-gradient(circle, rgba(34, 211, 238, 0.44), transparent 58%),
    radial-gradient(circle at 70% 20%, rgba(168, 85, 247, 0.38), transparent 64%) !important;
  animation: efxAuroraThree 24s ease-in-out infinite alternate !important;
}

html::after {
  width: 460px !important;
  height: 460px !important;
  top: 15% !important;
  right: 30% !important;
  opacity: 0.19 !important;
  filter: blur(92px) saturate(180%) !important;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.28), transparent 62%) !important;
  animation: efxAuroraFour 20s ease-in-out infinite alternate !important;
}

@keyframes efxAuroraOne {
  from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  to { transform: translate3d(64px, 44px, 0) scale(1.12) rotate(8deg); }
}

@keyframes efxAuroraTwo {
  from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  to { transform: translate3d(-56px, -34px, 0) scale(1.10) rotate(-6deg); }
}

@keyframes efxAuroraThree {
  from { transform: translate3d(-30px, 18px, 0) scale(0.96); }
  to { transform: translate3d(48px, -40px, 0) scale(1.18); }
}

@keyframes efxAuroraFour {
  from { transform: translate3d(18px, -12px, 0) scale(1); }
  to { transform: translate3d(-42px, 52px, 0) scale(1.22); }
}

@keyframes efxGlowBreath {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.48; }
}

/* Fine premium noise/grid overlay, very subtle. */
body {
  background-blend-mode: screen, screen, screen, screen, normal, normal !important;
}

/* ---------- purer liquid glass on every major object ---------- */
form,
section,
table,
#countExpenses,
#totalExpenses,
#filterCount,
#filterTotal,
#reportMessage {
  border-color: var(--efx-glass-stroke) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.125), rgba(255, 255, 255, 0.036) 34%, rgba(77, 142, 255, 0.045) 100%),
    linear-gradient(135deg, rgba(168, 85, 247, 0.085), rgba(34, 211, 238, 0.026)),
    var(--efx-glass-deep) !important;
  box-shadow: var(--efx-shadow-big) !important;
  backdrop-filter: blur(34px) saturate(186%) contrast(1.04) !important;
  -webkit-backdrop-filter: blur(34px) saturate(186%) contrast(1.04) !important;
}

form::before,
section::before {
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.18), transparent 30%, rgba(255, 255, 255, 0.035) 62%, transparent 100%),
    radial-gradient(circle at 12% 8%, rgba(208, 188, 255, 0.18), transparent 34%),
    radial-gradient(circle at 88% 95%, rgba(77, 142, 255, 0.12), transparent 42%) !important;
  opacity: 0.42 !important;
}

form:hover,
section:hover,
table:hover,
#countExpenses:hover,
#totalExpenses:hover,
#filterCount:hover,
#filterTotal:hover {
  border-color: var(--efx-glass-hot) !important;
  box-shadow:
    0 38px 96px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(208, 188, 255, 0.34),
    0 0 58px rgba(168, 85, 247, 0.32),
    0 0 120px rgba(59, 130, 246, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ---------- animated title underline: living neon scanner ---------- */
h2 {
  position: relative !important;
}

h2::after {
  position: relative !important;
  width: 116px !important;
  height: 5px !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.92) 0%,
      rgba(208,188,255,0.96) 18%,
      rgba(168,85,247,0.95) 42%,
      rgba(59,130,246,0.95) 66%,
      rgba(34,211,238,0.62) 82%,
      transparent 100%) !important;
  background-size: 260% 100% !important;
  box-shadow:
    0 0 16px rgba(208, 188, 255, 0.58),
    0 0 30px rgba(168, 85, 247, 0.38),
    0 0 42px rgba(59, 130, 246, 0.22) !important;
  transform-origin: left center !important;
  animation: efxTitleLineWidth 2.9s ease-in-out infinite alternate, efxTitleLineFlow 3.4s linear infinite !important;
}

h2::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 14px) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.95),
    0 0 24px rgba(168, 85, 247, 0.78),
    0 0 40px rgba(59, 130, 246, 0.42) !important;
  opacity: 0.78 !important;
  animation: efxTitleSpark 2.2s ease-in-out infinite alternate !important;
}

@keyframes efxTitleLineWidth {
  0% { width: 72px; opacity: 0.78; transform: scaleX(0.92); }
  55% { width: 138px; opacity: 1; transform: scaleX(1); }
  100% { width: 104px; opacity: 0.9; transform: scaleX(0.97); }
}

@keyframes efxTitleLineFlow {
  from { background-position: 0% 50%; filter: hue-rotate(0deg); }
  to { background-position: 260% 50%; filter: hue-rotate(14deg); }
}

@keyframes efxTitleSpark {
  0% { transform: translateX(0) scale(0.72); opacity: 0.36; }
  45% { transform: translateX(74px) scale(1.05); opacity: 1; }
  100% { transform: translateX(128px) scale(0.84); opacity: 0.62; }
}

/* ---------- logo: keep same logo, animate arrow/icon more elegantly ---------- */
header h1::before {
  background-size: 26px 26px, 240% 240% !important;
  animation:
    efxLogoArrowGrow 2.65s ease-in-out infinite,
    logo-flow 7s ease-in-out infinite alternate,
    logo-glow 4.6s ease-in-out infinite !important;
  transform-origin: center center !important;
}

@keyframes efxLogoArrowGrow {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    background-size: 25px 25px, 240% 240%;
  }
  45% {
    transform: scale(1.08) rotate(-2deg);
    background-size: 31px 31px, 240% 240%;
  }
  70% {
    transform: scale(0.99) rotate(1deg);
    background-size: 27px 27px, 240% 240%;
  }
}

/* ---------- sidebar icons: alive but controlled ---------- */
nav a::before {
  filter: drop-shadow(0 0 0 rgba(208, 188, 255, 0));
}

nav a:hover::before {
  transform: scale(1.24) rotate(-6deg) !important;
  filter: drop-shadow(0 0 10px rgba(208, 188, 255, 0.78)) drop-shadow(0 0 18px rgba(77, 142, 255, 0.35)) !important;
}

nav a[aria-current="page"]::before {
  animation: efxNavIconPulse 2.4s ease-in-out infinite !important;
}

@keyframes efxNavIconPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 7px rgba(208,188,255,0.58)); }
  50% { transform: scale(1.14); filter: drop-shadow(0 0 15px rgba(208,188,255,0.86)); }
}

/* ---------- button system: stronger visibility, better animation ---------- */
button,
td button,
#addBtn,
#cancelBtn,
#filterBtn,
#resetBtn,
#pdfBtn,
#csvBtn {
  min-height: 46px !important;
  color: #ffffff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.30),
    0 0 26px rgba(168, 85, 247, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20) !important;
  letter-spacing: 0.01em !important;
}

button::after,
td button::after {
  z-index: 0 !important;
  opacity: 0.74 !important;
}

button > *,
td button > * {
  position: relative;
  z-index: 2;
}

button:hover,
td button:hover,
#addBtn:hover,
#cancelBtn:hover,
#filterBtn:hover,
#resetBtn:hover,
#pdfBtn:hover,
#csvBtn:hover {
  transform: translateY(-3px) scale(1.026) !important;
  border-color: rgba(255, 255, 255, 0.52) !important;
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.38),
    0 0 46px rgba(168, 85, 247, 0.40),
    0 0 76px rgba(59, 130, 246, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16) !important;
}

/* PDF = real PDF-feeling red document icon. */
#pdfBtn {
  color: #fff2f0 !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.07) 28%, rgba(239,68,68,0.38)),
    linear-gradient(135deg, #d3545f 0%, #a23b4b 48%, #642234 100%) !important;
  border-color: rgba(255, 177, 171, 0.56) !important;
  box-shadow:
    0 16px 36px rgba(127, 29, 29, 0.34),
    0 0 30px rgba(255, 100, 100, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.56) !important;
}

#pdfBtn::before {
  background-color: transparent !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2h10l6 6v18H6V2z' fill='%23fff2f0'/%3E%3Cpath d='M16 2v6h6' fill='%23ffd6d1'/%3E%3Cpath d='M8 17.2h12v5.2H8z' rx='1' fill='%23e53935'/%3E%3Ctext x='14' y='21.1' text-anchor='middle' font-family='Arial, sans-serif' font-size='4.1' font-weight='800' fill='white'%3EPDF%3C/text%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 21px 21px !important;
  background-position: center !important;
}

#pdfBtn:hover {
  box-shadow:
    0 22px 52px rgba(127, 29, 29, 0.42),
    0 0 48px rgba(255, 100, 100, 0.42),
    inset 0 1px 0 rgba(255,255,255,0.64) !important;
}

/* CSV = Excel-inspired icon. */
#csvBtn {
  color: #effff5 !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.07) 28%, rgba(16,185,129,0.35)),
    linear-gradient(135deg, #22c55e 0%, #15803d 48%, #064e3b 100%) !important;
  border-color: rgba(126, 224, 168, 0.58) !important;
  box-shadow:
    0 16px 36px rgba(6, 78, 59, 0.34),
    0 0 30px rgba(34, 197, 94, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.56) !important;
}

#csvBtn::before {
  background-color: transparent !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='22' height='20' rx='3' fill='%23217446'/%3E%3Cpath d='M10 7h12v14H10z' fill='%23ffffff' opacity='.95'/%3E%3Cpath d='M10 10h12M10 14h12M10 18h12M14 7v14M18 7v14' stroke='%23217446' stroke-width='1' opacity='.65'/%3E%3Cpath d='M3 8h10v12H3z' fill='%23107c41'/%3E%3Cpath d='M6.1 17.8l2-3.1-1.9-3h1.8l1 1.9 1.1-1.9h1.7l-1.9 3 2 3.1H10l-1.1-2-1.1 2H6.1z' fill='white'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 22px 22px !important;
  background-position: center !important;
}

#csvBtn:hover {
  box-shadow:
    0 22px 52px rgba(6, 78, 59, 0.42),
    0 0 48px rgba(34, 197, 94, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.64) !important;
}

/* Keep Delete / Update nice, only improve clarity without changing their style. */
td button:first-child {
  color: #ffd9d5 !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035)),
    rgba(127, 29, 29, 0.42) !important;
  border-color: rgba(255, 180, 171, 0.36) !important;
  box-shadow: 0 12px 26px rgba(127, 29, 29, 0.20), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

td button:last-child {
  color: #eaf2ff !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035)),
    rgba(37, 99, 235, 0.44) !important;
  border-color: rgba(173, 198, 255, 0.36) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* ---------- Fix GitHub / LinkedIn bug + brand glow ---------- */
section a[href*="github.com"],
section a[href*="linkedin.com"] {
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  transform: translateZ(0);
}

/* This removes the broken giant diagonal shine lines around the social buttons. */
section a[href*="github.com"]::after,
section a[href*="linkedin.com"]::after,
a[href*="github.com"]::after,
a[href*="linkedin.com"]::after {
  content: none !important;
  display: none !important;
}

section a[href*="github.com"]::before,
section a[href*="linkedin.com"]::before {
  z-index: 3 !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 260ms ease !important;
}

section a[href*="github.com"] {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)),
    linear-gradient(135deg, #2a2f37, #06070a) !important;
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 22px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
}

section a[href*="github.com"]:hover {
  transform: translateY(-4px) scale(1.06) !important;
  border-color: rgba(255,255,255,0.52) !important;
  box-shadow:
    0 24px 56px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.18),
    0 0 44px rgba(255,255,255,.38),
    inset 0 1px 0 rgba(255,255,255,.52) !important;
}

section a[href*="github.com"]:hover::before {
  transform: scale(1.15) rotate(-4deg) !important;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.75));
}

section a[href*="linkedin.com"] {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.055)),
    linear-gradient(135deg, #0a66c2, #004182) !important;
  border-color: rgba(10,102,194,.68) !important;
  box-shadow:
    0 14px 36px rgba(10,102,194,.26),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 24px rgba(10,102,194,.26),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

section a[href*="linkedin.com"]:hover {
  transform: translateY(-4px) scale(1.06) !important;
  border-color: rgba(96,165,250,.76) !important;
  box-shadow:
    0 24px 56px rgba(10,102,194,.36),
    0 0 0 1px rgba(255,255,255,.16),
    0 0 50px rgba(10,102,194,.72),
    inset 0 1px 0 rgba(255,255,255,.56) !important;
}

section a[href*="linkedin.com"]:hover::before {
  transform: scale(1.15) rotate(3deg) !important;
  filter: drop-shadow(0 0 12px rgba(96,165,250,.86));
}

/* Remove strong diagonal beams from the About hero card, keep a clean glass reflection. */
section:has(img)::before {
  background:
    radial-gradient(circle at 12% 12%, rgba(208,188,255,0.18), transparent 32%),
    radial-gradient(circle at 92% 88%, rgba(77,142,255,0.12), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,0.09), transparent 30%, rgba(255,255,255,0.035) 70%) !important;
  opacity: 0.50 !important;
}

section:has(img)::after {
  opacity: 0.34 !important;
  background:
    radial-gradient(circle at 28% 38%, rgba(168,85,247,0.22), transparent 36%),
    radial-gradient(circle at 72% 70%, rgba(59,130,246,0.12), transparent 44%) !important;
}

/* ---------- profile image: clear senior purple halo ---------- */
section:has(img) img {
  border-color: rgba(208,188,255,.58) !important;
  box-shadow:
    0 28px 74px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.20),
    0 0 42px rgba(168,85,247,.62),
    0 0 105px rgba(168,85,247,.32),
    0 0 120px rgba(59,130,246,.22) !important;
  animation: efxProfileHalo 4.4s ease-in-out infinite !important;
}

@keyframes efxProfileHalo {
  0%,100% {
    filter: saturate(1.02) contrast(1.02);
    box-shadow: 0 28px 74px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.20), 0 0 40px rgba(168,85,247,.54), 0 0 92px rgba(168,85,247,.25), 0 0 110px rgba(59,130,246,.18);
  }
  50% {
    filter: saturate(1.08) contrast(1.04);
    box-shadow: 0 28px 74px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.24), 0 0 60px rgba(168,85,247,.78), 0 0 128px rgba(168,85,247,.38), 0 0 140px rgba(59,130,246,.28);
  }
}

/* ---------- pie chart premium halo ---------- */
section:has(#pieChart) {
  position: relative !important;
  overflow: visible !important;
}

section:has(#pieChart)::after {
  content: "" !important;
  position: absolute !important;
  inset: 46px 50px 34px 50px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, rgba(168,85,247,0.34), transparent 58%),
    radial-gradient(circle, rgba(59,130,246,0.20), transparent 66%) !important;
  filter: blur(34px) saturate(150%) !important;
  opacity: 0.74 !important;
  animation: efxPieHalo 3.6s ease-in-out infinite !important;
}

#pieChart {
  filter:
    drop-shadow(0 18px 40px rgba(0,0,0,.34))
    drop-shadow(0 0 26px rgba(168,85,247,.6))
    drop-shadow(0 0 55px rgba(147,51,234,.4))
    drop-shadow(0 0 90px rgba(124,92,246,.22)) !important;
  animation: efxChartBreath 4s ease-in-out infinite !important;
}

@keyframes efxPieHalo {
  0%,100% { opacity: .48; transform: scale(.96); }
  50% { opacity: .86; transform: scale(1.05); }
}

@keyframes efxChartBreath {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

/* ---------- summary icons: clearer and more professional ---------- */
#countExpenses::before,
#filterCount::before {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='4' width='14' height='20' rx='3' fill='%23d0bcff'/%3E%3Cpath d='M10 9h8M10 14h8M10 19h5' stroke='%230b1326' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 23px 23px no-repeat,
    linear-gradient(135deg, rgba(208,188,255,.28), rgba(124,58,237,.18)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 24px rgba(168,85,247,.24) !important;
}

#totalExpenses::before,
#filterTotal::before {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8.5A3.5 3.5 0 0 1 8.5 5H23v5H8.5a1.5 1.5 0 0 0 0 3H23v10H8.5A3.5 3.5 0 0 1 5 19.5v-11Z' fill='%23adc6ff'/%3E%3Ccircle cx='20' cy='18' r='2' fill='%230b1326'/%3E%3C/svg%3E") center / 24px 24px no-repeat,
    linear-gradient(135deg, rgba(173,198,255,.28), rgba(77,142,255,.18)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 24px rgba(77,142,255,.24) !important;
}

#countExpenses:hover::before,
#totalExpenses:hover::before,
#filterCount:hover::before,
#filterTotal:hover::before {
  animation: efxStatIconPop 640ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes efxStatIconPop {
  0% { transform: scale(1) rotate(0); }
  45% { transform: scale(1.18) rotate(-5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- category/icons in Home and Filters: cleaner, more alive ---------- */
tbody td[data-category]::before,
tbody td:nth-child(2)::before {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 14px rgba(208,188,255,.12) !important;
}

tbody tr:hover td[data-category]::before,
tbody tr:hover td:nth-child(2)::before {
  transform: scale(1.22) rotate(-5deg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 0 18px rgba(208,188,255,.42),
    0 0 28px rgba(59,130,246,.16) !important;
}

/* ---------- technologies/features icons: richer hover ---------- */
section ul li::before {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 16px rgba(168,85,247,.14) !important;
}

section ul li:hover::before {
  transform: scale(1.18) rotate(-5deg) !important;
  filter: drop-shadow(0 0 12px rgba(208,188,255,.72)) drop-shadow(0 0 22px rgba(59,130,246,.24)) !important;
}

/* ---------- page entrance: more premium but not distracting ---------- */
main {
  animation: efxPageRise 720ms cubic-bezier(0.2, 0.82, 0.18, 1) both !important;
}

@keyframes efxPageRise {
  from { opacity: 0; transform: translateY(18px); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   SENIOR UI/UX REFINEMENT V8
   Focus: stronger premium background, clean animated title line
   without running dot, sharper Liquid Glass, About image glow.
   No HTML / JS changes, no classes required.
========================================================== */

:root {
  --v8-purple: rgba(168, 85, 247, 0.44);
  --v8-purple-strong: rgba(192, 132, 252, 0.62);
  --v8-lilac: rgba(208, 188, 255, 0.44);
  --v8-blue: rgba(77, 142, 255, 0.38);
  --v8-cyan: rgba(34, 211, 238, 0.24);
  --v8-glass: rgba(14, 22, 44, 0.48);
  --v8-glass-strong: rgba(22, 32, 60, 0.66);
  --v8-border: rgba(224, 214, 255, 0.18);
  --v8-border-hot: rgba(208, 188, 255, 0.42);
  --v8-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 0 42px rgba(168, 85, 247, 0.16);
  --v8-shadow-hot: 0 30px 90px rgba(0, 0, 0, 0.56), 0 0 70px rgba(168, 85, 247, 0.32), 0 0 120px rgba(77, 142, 255, 0.12);
}

/* Stronger, more visible premium aurora background. */
body {
  background:
    radial-gradient(circle at 18% 12%, rgba(168, 85, 247, 0.34), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(77, 142, 255, 0.28), transparent 32%),
    radial-gradient(circle at 70% 76%, rgba(34, 211, 238, 0.12), transparent 26%),
    radial-gradient(circle at 22% 86%, rgba(96, 1, 209, 0.28), transparent 34%),
    linear-gradient(115deg, rgba(5, 10, 24, 0.99), rgba(16, 18, 50, 0.97) 45%, rgba(8, 23, 48, 0.98)),
    var(--bg) !important;
  background-attachment: fixed !important;
}

/* Replace older weak orbs with clearer animated glass aurora. */
body::before,
body::after,
html::before,
html::after {
  content: "" !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: -1 !important;
  border-radius: 9999px !important;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
}

body::before {
  width: 920px !important;
  height: 920px !important;
  top: -360px !important;
  right: -260px !important;
  left: auto !important;
  bottom: auto !important;
  opacity: 0.34 !important;
  filter: blur(86px) saturate(145%) !important;
  background:
    conic-gradient(from 140deg,
      rgba(208, 188, 255, 0.0),
      rgba(168, 85, 247, 0.72),
      rgba(77, 142, 255, 0.48),
      rgba(34, 211, 238, 0.22),
      rgba(208, 188, 255, 0.0));
  animation: v8AuroraOne 18s ease-in-out infinite alternate !important;
}

body::after {
  width: 760px !important;
  height: 760px !important;
  left: -260px !important;
  bottom: -280px !important;
  right: auto !important;
  top: auto !important;
  opacity: 0.30 !important;
  filter: blur(95px) saturate(150%) !important;
  background:
    radial-gradient(circle at 45% 45%, rgba(77, 142, 255, 0.72), transparent 52%),
    radial-gradient(circle at 60% 30%, rgba(168, 85, 247, 0.62), transparent 56%);
  animation: v8AuroraTwo 22s ease-in-out infinite alternate !important;
}

html::before {
  width: 520px !important;
  height: 520px !important;
  left: 44% !important;
  top: 34% !important;
  opacity: 0.18 !important;
  filter: blur(74px) saturate(155%) !important;
  background: radial-gradient(circle, rgba(208, 188, 255, 0.82), rgba(168, 85, 247, 0.22) 48%, transparent 72%) !important;
  animation: v8BokehFloat 16s ease-in-out infinite alternate !important;
}

html::after {
  width: 360px !important;
  height: 360px !important;
  right: 18% !important;
  top: 12% !important;
  opacity: 0.16 !important;
  filter: blur(62px) saturate(160%) !important;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.52), rgba(77, 142, 255, 0.22) 50%, transparent 74%) !important;
  animation: v8BokehFloatSmall 13s ease-in-out infinite alternate !important;
}

@keyframes v8AuroraOne {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.26; }
  50% { transform: translate3d(-70px, 80px, 0) rotate(22deg) scale(1.08); opacity: 0.38; }
  100% { transform: translate3d(-120px, 35px, 0) rotate(42deg) scale(1.14); opacity: 0.32; }
}

@keyframes v8AuroraTwo {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.22; }
  100% { transform: translate3d(95px, -85px, 0) scale(1.18); opacity: 0.36; }
}

@keyframes v8BokehFloat {
  0% { transform: translate3d(-20px, 16px, 0) scale(0.94); opacity: 0.10; }
  100% { transform: translate3d(70px, -52px, 0) scale(1.12); opacity: 0.22; }
}

@keyframes v8BokehFloatSmall {
  0% { transform: translate3d(0, 0, 0) scale(0.96); opacity: 0.09; }
  100% { transform: translate3d(-58px, 46px, 0) scale(1.18); opacity: 0.20; }
}

/* More refined liquid glass surfaces. */
form,
section,
table,
#countExpenses,
#totalExpenses,
#filterCount,
#filterTotal,
#reportMessage {
  border-color: var(--v8-border) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.026) 42%, rgba(77, 142, 255, 0.045)),
    radial-gradient(circle at 0% 0%, rgba(208, 188, 255, 0.14), transparent 42%),
    var(--v8-glass) !important;
  box-shadow:
    var(--v8-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(34px) saturate(185%) contrast(1.035) !important;
  -webkit-backdrop-filter: blur(34px) saturate(185%) contrast(1.035) !important;
}

form::before,
section::before {
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.22), transparent 28%, rgba(255, 255, 255, 0.045) 64%, transparent 100%),
    radial-gradient(circle at 14% 8%, rgba(208, 188, 255, 0.20), transparent 32%),
    radial-gradient(circle at 94% 92%, rgba(77, 142, 255, 0.15), transparent 40%) !important;
  opacity: 0.45 !important;
}

form:hover,
section:hover,
table:hover,
#countExpenses:hover,
#totalExpenses:hover,
#filterCount:hover,
#filterTotal:hover {
  transform: translateY(-3px) !important;
  border-color: var(--v8-border-hot) !important;
  box-shadow:
    var(--v8-shadow-hot),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Remove the running dot under titles completely. */
h2::before {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* Replace it with a premium animated light-bar only. */
h2::after {
  content: "" !important;
  position: relative !important;
  display: block !important;
  width: 126px !important;
  height: 4px !important;
  margin-top: 16px !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(208, 188, 255, 0.98) 18%,
      rgba(168, 85, 247, 0.96) 42%,
      rgba(77, 142, 255, 0.94) 68%,
      rgba(34, 211, 238, 0.42) 84%,
      transparent 100%) !important;
  background-size: 240% 100% !important;
  box-shadow:
    0 0 16px rgba(208, 188, 255, 0.60),
    0 0 32px rgba(168, 85, 247, 0.42),
    0 0 48px rgba(77, 142, 255, 0.22) !important;
  transform-origin: left center !important;
  animation: v8TitleLineBreath 3.4s ease-in-out infinite alternate, v8TitleLineFlow 4.6s linear infinite !important;
}

@keyframes v8TitleLineBreath {
  0% { width: 78px; opacity: 0.76; transform: scaleX(0.92); }
  50% { width: 156px; opacity: 1; transform: scaleX(1); }
  100% { width: 112px; opacity: 0.9; transform: scaleX(0.98); }
}

@keyframes v8TitleLineFlow {
  0% { background-position: 0% 50%; filter: saturate(1) brightness(1); }
  100% { background-position: 240% 50%; filter: saturate(1.22) brightness(1.14); }
}

/* About image: stronger premium purple halo. */
section:has(img) img {
  border-color: rgba(208, 188, 255, 0.46) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 34px rgba(208, 188, 255, 0.42),
    0 0 78px rgba(168, 85, 247, 0.35),
    0 0 130px rgba(77, 142, 255, 0.14),
    0 28px 70px rgba(0, 0, 0, 0.46) !important;
  animation: v8PortraitGlow 4.8s ease-in-out infinite alternate !important;
}

section:has(img) img:hover {
  transform: translateY(-4px) scale(1.015) !important;
  filter: saturate(1.09) contrast(1.04) brightness(1.02) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 46px rgba(208, 188, 255, 0.58),
    0 0 100px rgba(168, 85, 247, 0.48),
    0 0 150px rgba(77, 142, 255, 0.20),
    0 34px 82px rgba(0, 0, 0, 0.52) !important;
}

@keyframes v8PortraitGlow {
  0% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 26px rgba(208, 188, 255, 0.34), 0 0 60px rgba(168, 85, 247, 0.28), 0 0 110px rgba(77, 142, 255, 0.10), 0 28px 70px rgba(0, 0, 0, 0.46); }
  100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 38px rgba(208, 188, 255, 0.48), 0 0 86px rgba(168, 85, 247, 0.39), 0 0 140px rgba(77, 142, 255, 0.16), 0 30px 76px rgba(0, 0, 0, 0.50); }
}

/* Better living icons without becoming noisy. */
nav a::before,
tbody td[data-category]::before,
#countExpenses::before,
#totalExpenses::before,
#filterCount::before,
#filterTotal::before,
button::before {
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 240ms ease, box-shadow 240ms ease !important;
}

nav a:hover::before,
tbody tr:hover td[data-category]::before,
button:hover::before {
  transform: scale(1.17) rotate(-4deg) !important;
  filter: drop-shadow(0 0 9px rgba(208, 188, 255, 0.78)) !important;
}

#countExpenses:hover::before,
#totalExpenses:hover::before,
#filterCount:hover::before,
#filterTotal:hover::before {
  transform: scale(1.08) rotate(-3deg) !important;
  box-shadow: 0 0 24px rgba(208, 188, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Sharper buttons, still readable. */
button {
  border-color: rgba(255, 255, 255, 0.22) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22) !important;
  box-shadow:
    0 14px 34px rgba(139, 92, 246, 0.28),
    0 0 28px rgba(208, 188, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.44) !important;
}

button:hover {
  border-color: rgba(255, 255, 255, 0.36) !important;
  box-shadow:
    0 20px 44px rgba(139, 92, 246, 0.36),
    0 0 46px rgba(208, 188, 255, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.50) !important;
}

/* GitHub / LinkedIn hover polish if they exist as href buttons. */
a[href*="github.com"]:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 34px rgba(255, 255, 255, 0.24),
    0 18px 36px rgba(0, 0, 0, 0.38) !important;
  transform: translateY(-3px) scale(1.04) !important;
}

a[href*="linkedin.com"]:hover {
  box-shadow:
    0 0 0 1px rgba(10, 102, 194, 0.65),
    0 0 34px rgba(10, 102, 194, 0.46),
    0 18px 36px rgba(0, 0, 0, 0.34) !important;
  transform: translateY(-3px) scale(1.04) !important;
}

/* More impressive, but restrained, page entrance. */
main > * {
  animation: v8ContentEnter 0.72s ease both;
}

main > *:nth-child(2) { animation-delay: 0.04s; }
main > *:nth-child(3) { animation-delay: 0.08s; }
main > *:nth-child(4) { animation-delay: 0.12s; }
main > *:nth-child(5) { animation-delay: 0.16s; }
main > *:nth-child(6) { animation-delay: 0.20s; }

@keyframes v8ContentEnter {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   FINAL SAFE PATCH — Personal Finance Tracker + Premium BG
   Keeps layout in the previous state. No mobile redesign.
   Fixes the issue where content felt pushed downward.
========================================================== */

/* Keep the original layout position stable. */
main {
  transform: none;
}

/* Do not increase sidebar spacing. */
header {
  gap: 34px !important;
}

/* Professional subtitle under the logo text, without pushing content down. */
header h1::after {
  content: "Personal Finance Tracker" !important;
  position: absolute;
  top: 52px !important;
  left: 56px !important;
  width: auto;
  max-width: 176px;
  min-height: 16px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(236, 231, 255, 0.92) !important;
  font-family: Inter, sans-serif !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(208, 188, 255, 0.20);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(208, 188, 255, 0.055), rgba(77, 142, 255, 0.045)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    0 0 14px rgba(208, 188, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(145%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  animation: trackerBadgeBreath 5.5s ease-in-out infinite;
}

@keyframes trackerBadgeBreath {
  0%, 100% {
    opacity: 0.82;
    box-shadow:
      0 0 12px rgba(208, 188, 255, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 0 20px rgba(208, 188, 255, 0.24),
      0 0 28px rgba(77, 142, 255, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }
}

/* Premium background, stronger than before, but it does not change layout. */
body {
  background:
    radial-gradient(circle at 14% 16%, rgba(168, 85, 247, 0.30), transparent 22%),
    radial-gradient(circle at 78% 12%, rgba(77, 142, 255, 0.24), transparent 24%),
    radial-gradient(circle at 90% 72%, rgba(34, 211, 238, 0.10), transparent 28%),
    radial-gradient(circle at 38% 84%, rgba(208, 188, 255, 0.12), transparent 24%),
    linear-gradient(135deg, rgba(5, 10, 24, 0.98), rgba(11, 18, 40, 0.97) 42%, rgba(21, 25, 55, 0.95) 100%),
    var(--bg) !important;
  background-attachment: fixed;
}

body::before {
  width: 760px !important;
  height: 760px !important;
  top: -260px !important;
  right: -190px !important;
  left: auto !important;
  opacity: 0.34 !important;
  filter: blur(138px) saturate(150%) !important;
  background:
    conic-gradient(from 140deg,
      rgba(168, 85, 247, 0.70),
      rgba(77, 142, 255, 0.44),
      rgba(34, 211, 238, 0.20),
      rgba(208, 188, 255, 0.48),
      rgba(168, 85, 247, 0.70)) !important;
  animation: safeAuroraOne 24s ease-in-out infinite alternate !important;
}

body::after {
  width: 700px !important;
  height: 700px !important;
  left: -240px !important;
  bottom: -260px !important;
  right: auto !important;
  opacity: 0.30 !important;
  filter: blur(128px) saturate(150%) !important;
  background:
    radial-gradient(circle, rgba(124, 58, 237, 0.62), transparent 58%),
    radial-gradient(circle at 70% 34%, rgba(59, 130, 246, 0.36), transparent 50%) !important;
  animation: safeAuroraTwo 28s ease-in-out infinite alternate !important;
}

html::before {
  width: 520px !important;
  height: 520px !important;
  top: 32% !important;
  left: 54% !important;
  opacity: 0.16 !important;
  filter: blur(115px) saturate(145%) !important;
  background: rgba(168, 85, 247, 0.42) !important;
  animation: safeBokehOne 34s ease-in-out infinite alternate !important;
}

html::after {
  width: 470px !important;
  height: 470px !important;
  top: 68% !important;
  right: 8% !important;
  opacity: 0.15 !important;
  filter: blur(112px) saturate(145%) !important;
  background: rgba(77, 142, 255, 0.38) !important;
  animation: safeBokehTwo 36s ease-in-out infinite alternate !important;
}

@keyframes safeAuroraOne {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(-70px, 62px, 0) rotate(18deg) scale(1.12); }
}

@keyframes safeAuroraTwo {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(70px, -44px, 0) rotate(-12deg) scale(1.10); }
}

@keyframes safeBokehOne {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(56px, -36px, 0) scale(1.14); }
}

@keyframes safeBokehTwo {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-46px, 58px, 0) scale(1.12); }
}

/* Keep reduced motion accessible. */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  html::before,
  html::after,
  header h1::after {
    animation: none !important;
  }
}