:root{
  --bg:#0a0a0d; --panel:rgba(12,12,18,.65); --ink:#e9d5ff; --muted:#a1a1aa;
  --acc:#9b5de5; --acc-2:#22c55e; --danger:#ef4444;
  --border:rgba(147,51,234,.35);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  line-height:1.5;
}
/* spooky gradient glow backdrop */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1000px 600px at 10% 10%, #7e22ce55, transparent 70%),
    radial-gradient(800px 500px at 85% 20%, #16a34a55, transparent 70%),
    radial-gradient(700px 500px at 50% 85%, #f9731655, transparent 70%);
  filter: blur(40px); opacity:.28;
}
.container{ max-width:980px; margin:0 auto; padding:28px 20px; }
.title{ font-size:clamp(1.4rem, 2vw + 1rem, 2.2rem); font-weight:900; letter-spacing:.05em;
  text-shadow:0 0 18px rgba(147,51,234,.35); margin:0; }
.glow{ filter: drop-shadow(0 0 12px rgba(147,51,234,.35)); }
.topbar{ display:flex; align-items:center; justify-content:space-between; margin:0 0 18px; }
.h2{ margin:.2rem 0 1rem; font-size:1.1rem; color:#d6bcfa; letter-spacing:.03em; }

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:18px;
  padding:16px 16px; box-shadow:0 0 20px rgba(147,51,234,.18); margin-bottom:16px;
  backdrop-filter: blur(6px);
}
.card-compact{ max-width:420px; margin:22px auto 0; }

label{ display:block; font-size:.92rem; color:#d6bcfa; margin:.25rem 0 .35rem; }
input{
  width:100%; background:#0f0f14; color:var(--ink); border:1px solid var(--border);
  border-radius:12px; padding:.65rem .85rem; outline:none; transition:.15s border, .15s box-shadow;
}
input:focus{ border-color:#a78bfa; box-shadow:0 0 0 3px rgba(167,139,250,.15); }
input.num{ width:120px; }

.btn, button{
  appearance:none; background:#7c3aed; border:none; color:#fff; padding:.6rem .9rem;
  border-radius:12px; cursor:pointer; box-shadow:0 0 12px rgba(147,51,234,.35);
  transition:.15s transform, .2s filter, .15s box-shadow; font-weight:600;
  text-decoration:none; display:inline-flex; align-items:center; gap:.35rem;
}
.btn:hover, button:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn:active, button:active{ transform:translateY(0); }
.btn.ghost{ background:transparent; border:1px solid var(--border); color:var(--ink); }
.btn.danger{ background:#b91c1c; }

.muted{ color:var(--muted); font-size:.95rem; }
.alert{ background:#3b0b0b; border:1px solid #7f1d1d; padding:12px; border-radius:12px; margin:12px 0; color:#fecaca; }

.row{ display:flex; gap:.6rem; }
.gap{ gap:.6rem; }
.add-row{ margin-bottom:.6rem; }
.grid{ display:grid; grid-template-columns:140px 1fr auto; gap:.6rem 1rem; align-items:center; }

.share{ display:grid; grid-template-columns:1fr auto; gap:.6rem; margin-top:.8rem; }

.table{ width:100%; }
.t-head,.t-row{
  display:grid; grid-template-columns:1.5fr 1fr 2fr; gap:.6rem; align-items:center;
  padding:.45rem .1rem;
}
.t-head{ color:#c4b5fd; border-bottom:1px solid var(--border); margin-bottom:.35rem; }
.t-row + .t-row{ border-top:1px dashed rgba(147,51,234,.25); }

.inline{ display:inline-flex; align-items:center; gap:.5rem; }
.btn-group{ display:flex; flex-wrap:wrap; gap:.45rem; justify-content:flex-end; }

/* subtle flicker for the title candle vibe */
@keyframes flicker { 0%{opacity:.98} 50%{opacity:.9} 100%{opacity:1} }
.title.glow{ animation:flicker 3.5s infinite ease-in-out; }