/* CSS extracted from the original single-file version */
/* (Full CSS retained exactly, same visuals and interactions) */

:root {
  --bg-1: #2a0e44;
  --bg-2: #5b1e8f;
  --card: #130c1f;
  --card-2: #1b1130;
  --text: #f1e9ff;
  --muted: #bda9ff;
  --accent: #9c5cff;
  --accent-2: #6c29e6;
  --good: #37e8a3;
  --bad: #ff6b8b;
  --cyan: #38e1ff;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --radius: 20px;
}

/* ============================
   PROGRESS BAR COLOUR STATES
   ============================ */

/* base (kept) */
.item .progress { transition: width .25s ease, background .2s ease; }

/* >=70% = amber, >=95% = green (wins over amber) */
.item .progress.warn  { background: linear-gradient(90deg, #ffc958, #ff9d1a) !important; }
.item .progress.good  { background: linear-gradient(90deg, #37e8a3, #59ffbe) !important; }

/* zero progress looks subtle */
.item .progress.zero  { background: rgba(255,255,255,.14) !important; }

/* nudge money and menu apart so the dots menu isn't tight to £ */
.item .amount { margin-right: 6px; }
.more-btn     { margin-left: 2px; }


* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin:0; color:var(--text);
  font-family:"Inter", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #7a2cff33 10%, transparent 60%),
              linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 60%, #0c0715 100%);
  background-attachment: fixed;
}

.viewport-scroll { overflow-x:auto; overflow-y:hidden; min-height:100dvh; }
.page { min-width:1100px; padding:26px 26px 80px; }

/* HEADER */
header { display:flex; align-items:center; gap:14px; margin-bottom:20px; filter:drop-shadow(0 12px 40px rgba(156,92,255,.25)); }
.app-icon { width:38px; height:38px; border-radius:14px; display:grid; place-items:center; font-size:22px; background: radial-gradient(60% 80% at 30% 10%, #ffd559, #ff9f2b 35%, #c96a00); position:relative; isolation:isolate; }
.app-icon::after { content:""; position:absolute; inset:-2px; border-radius:16px; padding:2px; background:linear-gradient(135deg,#fff7, #fff0 30%, #fff0 70%, #fff7); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
h1 { font-size:28px; margin:0; }
.subtitle { color:#d9c8ffcc; font-weight:500; }
.spacer { flex:1; }
.user-pill { display:flex; align-items:center; gap:10px; background-color: transparent; padding:8px 12px; }
.link { cursor:pointer; text-decoration:underline; color:#cebaff; }

/* KPI GRID */
.kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:22px; }

.card { position:relative; border-radius:var(--radius); background:linear-gradient(180deg,var(--card-2),#0f0a16); box-shadow:var(--shadow); padding:20px; opacity:0; animation:fadeUp .65s ease forwards; }
.card::before { content:""; position:absolute; inset:-1px; border-radius:calc(var(--radius) + 1px); background:radial-gradient(60% 120% at 30% 0%, #9c5cff22, transparent 60%); z-index:-1; }
.card:hover { transform:translateY(-2px); box-shadow:0 20px 50px rgba(0,0,0,.55); transition:.3s ease; }

.k-title { display:flex; align-items:center; gap:10px; color:#d8caff; font-weight:700; text-transform:uppercase; font-size:12px; }
.k-icon { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:#2b1a45; }

.k-value { font-size:44px; font-weight:800; margin:14px 0 6px; }
.k-sub { color:#cdbbff; font-weight:600; }

.k-trend { font-size:12px; padding:7px 10px; border-radius:999px; font-weight:800; }
.k-trend.good { color:var(--good); background:#05261a; }
.k-trend.bad { color:var(--bad); background:#2a0a14; }

/* PANELS */
.sections { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:26px; }
.panel { background:linear-gradient(180deg,#1a1030,#120a21 40%,#10091b); border-radius:calc(var(--radius)+6px); padding:22px; box-shadow:var(--shadow); animation:fadeUp .75s ease both; }

.panel .header { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.badge { font-size:12px; background:#2b1d47; padding:6px 10px; border-radius:999px; color:#cdbbff; margin-left:auto; }

.btn { border:0; padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.btn.secondary { background:#2b1a45; color:#eddfff; }

.empty { border:2px dashed #ffffff1a; padding:36px; text-align:center; border-radius:16px; }
.example-list { margin-top:26px; }
.item { background:#100a19; border:1px solid #ffffff0f; padding:14px; border-radius:14px; display:flex; justify-content:space-between; margin:10px 0; }

.dot { width:28px; height:28px; border-radius:10px; background:#241238; display:grid; place-items:center; }

.divider-sheen { height:1px; margin:18px 0; background:#ffffff14; position:relative; overflow:hidden; border-radius:999px; }
.divider-sheen::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,#ffffff66,transparent); animation:sheen 3.5s ease infinite; }

/* AUTH */
.auth-wrap { position:fixed; inset:0; display:grid; place-items:center; background:linear-gradient(180deg,#150823e6,#090512e6); backdrop-filter:blur(4px); }
.auth-card { width:440px; max-width:calc(100vw - 40px); background:#1a1030; border-radius:16px; padding:22px; box-shadow:0 30px 80px rgba(0,0,0,.55); }
.field { display:grid; gap:6px; margin:10px 0 14px; }
.field input { background:#0f0a18; border:1px solid #ffffff1f; color:white; padding:12px; border-radius:12px; }
.field input:focus { border-color:#8e67ff; box-shadow:0 0 0 4px #8e67ff22; }

.auth-footer { display:flex; justify-content:space-between; margin-top:12px; color:#cebaff; }

.toast { position:fixed; right:22px; bottom:22px; background:#0c0b13; color:white; padding:14px; border-radius:12px; opacity:0; transform:translateY(12px); }
.toast.show { animation:toastIn .6s ease forwards; }

/* ANIMATIONS */
@keyframes fadeUp { from {opacity:0; transform:translateY(10px);} to {opacity:1; transform:translateY(0);} }
@keyframes sheen { 0% {transform:translateX(-100%);} 60% {transform:translateX(100%);} 100% {transform:translateX(100%);} }
@keyframes toastIn { to {opacity:1; transform:translateY(0);} }

@media(max-width:760px){ .page{min-width:920px;} }

.auth-wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg,#150823e6,#090512e6);
  backdrop-filter: blur(4px);
  z-index: 10000; /* <- keep login above dashboard */
}

[hidden] {
  display: none !important;
}

.btn.danger {
  background: linear-gradient(135deg, #ff6b8b, #d4415f);
  color: white;
}

.btn.danger:hover {
  filter: brightness(1.1);
}

/* Ensure hidden overlays don't block clicks */
[hidden] {
  display: none !important;
}

/* Danger button for delete */
.btn.danger {
  background: linear-gradient(135deg, #ff6b8b, #d13b59);
  box-shadow: 0 10px 25px rgba(209, 59, 89, .35);
}

/* --- Item row upgrades: edit button + progress bar --- */
.item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;  /* name | amount | edit */
  align-items: center;
  gap: 12px;
  padding: 14px 14px 12px;
}

.item .left { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  min-width: 0; 
}

.item .name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Make the edit button obvious */
.edit-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #38e1ff, #6c29e6);
  color: #fff;
  box-shadow: 0 8px 18px rgba(56, 225, 255, .25);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.edit-btn:hover { 
  transform: translateY(-1px); 
  filter: brightness(1.05);
}
.edit-btn:active { transform: translateY(0); }

/* Progress bar spans full width under the row */
.progress-bar {
  grid-column: 1 / -1;      /* full width */
  height: 8px;
  border-radius: 999px;
  background: #ffffff14;
  overflow: hidden;
  margin-top: 10px;
  position: relative;
}
.progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #37e8a3, #38e1ff);
  box-shadow: inset 0 0 0 1px #ffffff10;
  transition: width .35s ease;   /* smooth progress updates */
  will-change: width;
}

/* Optional: subtle highlight when hovering an item */
.item:hover {
  border-color: #ffffff22;
  box-shadow: inset 0 0 0 1px #ffffff0e, 0 4px 14px rgba(0,0,0,.25);
}

/* ===== BUTTONS (extras) ===== */
.btn.danger {
  background: linear-gradient(135deg, #ff6b8b, #b33952);
  box-shadow: 0 10px 25px rgba(255,107,139,.25);
}
.btn.danger:hover { filter: brightness(1.04); transform: translateY(-1px); }

/* ===== LIST ROW LAYOUT (edit + progress) ===== */
.item {
  display: grid;
  grid-template-columns: 1fr auto auto; /* left | amount | edit */
  align-items: center;
  gap: 12px;
  background:#100a19;
  border:1px solid #ffffff0f;
  padding:14px;
  border-radius:14px;
  margin:10px 0;
}
.item .left { display:flex; align-items:center; gap:12px; }
.item .amount { font-weight:800; opacity:.9; }

/* obvious edit button */
.edit-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 800;
  background: #2b1a45;
  color: #eddfff;
  box-shadow: inset 0 0 0 1px #6f54a255, 0 8px 18px rgba(0,0,0,.35);
  transition: transform .15s ease, filter .15s ease;
}
.edit-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* progress bar spans full row under content */
.progress-bar {
  grid-column: 1 / -1; /* take the whole row width */
  height: 8px;
  border-radius: 999px;
  background: #ffffff14;
  overflow: hidden;
  margin-top: 8px;
}
.progress-bar .progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--good));
  box-shadow: 0 0 12px rgba(156,92,255,.35);
  transition: width .35s ease;
}

/* ======= MODAL (single, definitive version) ======= */
[hidden] { display: none !important; }

.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(10,6,18,0.62);
  backdrop-filter: blur(3px);
  z-index: 9998; /* below modal, above app */
}

.modal{
  position: fixed;
  inset: 0;                /* fill viewport */
  display: grid;           /* easy centering */
  place-items: center;     /* center content */
  z-index: 9999;           /* above overlay */
}

.modal-content{
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;        /* keep on-screen */
  overflow: auto;          /* scroll if tall */
  border-radius: 16px;
  background: linear-gradient(180deg, #1a1030, #120a21 55%, #0d0817);
  border: 1px solid #ffffff22;
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px #0006 inset;
  padding: 22px 22px 18px;
  animation: fadeUp .25s ease both;
}

.modal-content h2{
  margin: 0 0 10px;
}

/* form fields inside modal */
.modal .field{
  display: grid;
  gap: 6px;
  margin: 10px 0 14px;
}
.modal .field label{
  color: var(--muted);
  font-size: 14px;
}
.modal .field input{
  background: #0f0a18;
  border: 1px solid #ffffff25;
  color: #fff;
  padding: 12px;
  border-radius: 12px;
  font-size: 16px;
}
.modal .field input:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #9c5cff33;
}

.modal-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

.btn.danger{
  background: linear-gradient(135deg, #ff6b8b, #b33952);
  box-shadow: 0 10px 25px rgba(255,107,139,.25);
}

/* prevent background scroll when modal open */
body.modal-open{ overflow: hidden; }

/* ======= LIST ROW: edit button + progress ======= */
.item{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto; /* left | amount | edit */
  align-items: center;
  gap: 12px;
  background:#100a19;
  border:1px solid #ffffff0f;
  padding:14px;
  border-radius:14px;
  margin:10px 0;
}

.item .left{
  display:flex; align-items:center; gap:12px; min-width:0;
}
.item .name{
  font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.item .amount{ font-weight:800; opacity:.9; }

/* obvious edit button */
.edit-btn{
  appearance:none; border:0; cursor:pointer;
  padding:8px 10px; border-radius:10px; font-weight:800;
  background: linear-gradient(135deg, #38e1ff, #6c29e6);
  color:#fff;
  box-shadow: 0 8px 18px rgba(56,225,255,.25);
  transition: transform .12s ease, filter .12s ease;
}
.edit-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }

/* full-width progress under each row */
.progress-bar{
  grid-column: 1 / -1;
  height: 8px; border-radius: 999px;
  background: #ffffff14; overflow: hidden; margin-top: 8px;
}
.progress{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #37e8a3, #38e1ff);
  box-shadow: inset 0 0 0 1px #ffffff10;
  transition: width .35s ease;
}

/* keep auth overlay above the app, below modal */
.auth-wrap{ z-index: 9000; }

@media (max-width: 560px){
  .modal-content{ width: 100%; max-width: calc(100vw - 16px); }
}

/* under the row: shows "amount / goal · X to go" */
.meta{
  grid-column: 1 / -1;
  font-size: 12px;
  color: #cdbbff;
  opacity: .95;
  margin-top: -2px;
}

.item-img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  object-fit: cover;
}

/* ============================================
   INLINE EDITING
   ============================================ */

.item .name[contenteditable="true"],
.item .amount[contenteditable="true"] {
  border-bottom: 1px dashed transparent;
  transition: border-color .15s, background .15s;
  cursor: text;
}

.item .name[contenteditable="true"]:focus,
.item .amount[contenteditable="true"]:focus {
  outline: none;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.3);
  border-radius: 4px;
  padding: 2px 4px;
}

/* Prevent line breaks and weird resizing */
.item .amount {
  white-space: nowrap;
}

/* Fix for emoji centering in .dot boxes */
.item .dot span.emoji {
  display: grid;
  place-items: center;
  font-size: 18px;
  width: 22px;
  height: 22px;
  line-height: 1;
}

/* ============================================
   SPARKLINE CANVAS
   ============================================ */

.item canvas.spark {
  width: 100%;
  height: 26px;
  display: block;
  opacity: 0.9;
}

/* Gives crisp pixel edges */
canvas {
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

/* ============================================
   NET WORTH CHART CANVAS
   ============================================ */

#nwChart {
  width: 100%!important;
  height: 64px!important;
  display: block;
  margin-top: 8px;
  opacity: 0.9;
  image-rendering: crisp-edges;
}

/* ============================================
   QUICK-ACTION "⋯" MENU
   ============================================ */

.more-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.6;
  padding: 0 6px;
  transition: opacity .15s;
}

.more-btn:hover {
  opacity: 1;
}

/* Dropdown menu container */
.row-menu {
  position: absolute;
  right: 12px;
  top: 40px;
  background: #1b1730;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 6px 0;
  width: 160px;
  z-index: 20;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

/* Each menu item */
.menu-act {
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 14px;
  color: #eee;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.menu-act:hover {
  background: rgba(255,255,255,0.08);
}

/* Danger item */
.menu-act.danger {
  color: #ff6b81;
}

.menu-act.danger:hover {
  background: rgba(255,80,80,0.15);
}

/* Ensure .item is positioned for dropdown */
.item {
  position: relative;
}

/* ============================================
   CURRENCY & LOCALE DROPDOWNS
   ============================================ */

#currencySelect,
#localeSelect {
  background: #151226;
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  transition: border-color .2s, background .2s;
}

#currencySelect:hover,
#localeSelect:hover {
  border-color: rgba(255,255,255,0.4);
}

#currencySelect:focus,
#localeSelect:focus {
  background: #1d1a33;
  border-color: rgba(255,255,255,0.4);
}

/* Keep dropdown area aligned with layout */
header .btn.secondary {
  height: auto;
}

/* ============================================
   PROGRESS BAR TWEAKS
   ============================================ */

.item .progress-bar {
  width: 100%;
  background: rgba(255,255,255,0.08);
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}

.item .progress {
  height: 100%;
  background: linear-gradient(90deg, #38e1ff, #7ee8fa);
  border-radius: 4px;
  transition: width .25s ease;
}

/* ============================================
   MENU OVERFLOW FIX
   ============================================ */
.sections {
  overflow: visible;
}

/* Ensure rows can show dropdown outside their box */
.item { position: relative; overflow: visible; }

/* The ⋯ button — high contrast + always visible at top-right */
.more-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  appearance: none;
  border: 0;
  background: #2b1a45;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  opacity: 0.95;
  box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 0 0 1px #ffffff22;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
  z-index: 3; /* above progress/meta */
}
.more-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.more-btn:active { transform: translateY(0); }

/* The dropdown menu — anchored to the same top-right corner */
.row-menu {
  position: absolute;
  top: 46px;          /* just below button */
  right: 10px;
  background: #1b1730;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 6px 0;
  width: 180px;
  z-index: 10050;     /* above everything in the panel */
  box-shadow: 0 10px 26px rgba(0,0,0,0.55);
}

/* Menu items */
.menu-act {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  color: #eee;
  padding: 10px 14px;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
}
.menu-act:hover { background: rgba(255,255,255,0.08); }
.menu-act.danger { color: #ff768b; }
.menu-act.danger:hover { background: rgba(255,80,80,0.17); }

/* Make sure section/panel doesn’t clip the menu */
.sections, .panel, .example-list { overflow: visible; }

.item {
  display: grid;
  grid-template-columns: 1fr auto auto auto; /* left | amount | edit | ⋯ */
  align-items: center;
  gap: 12px;
}

.more-btn{
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px;
  color: #e9e2ff;
  opacity: .8;
  transition: opacity .15s;
}
.more-btn:hover{ opacity: 1; }

.item { position: relative; }
.row-menu { position:absolute; right:12px; top:42px; z-index:20; }

.item {
  grid-template-columns: 1fr auto auto; /* name | amount | menu */
  column-gap: 12px;
}

.item .amount {
  margin-right: 4px; /* space before the ⋯ button */
}

.more-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  padding: 2px 6px;
}
.more-btn:hover { opacity: 1; }

/* Give more breathing room between amount and edit button */
.item { gap: 16px; }        /* was 12px */
.edit-btn { margin-left: 8px; }

/* Grid now: left | amount | spacer | edit | more */
.item {
  display: grid;
  grid-template-columns: 1fr auto 12px auto auto;
  align-items: center;
  gap: 10px;
}

.actions-spacer { width: 12px; } /* explicit spacer */

.item .dot {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #241238;
  display: grid;
  place-items: center;
}
.item .dot .emoji {
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.progress.green { background: linear-gradient(90deg, #37e8a3, #5df2c7); }
.progress.amber { background: linear-gradient(90deg, #ffcc66, #ffb347); }

/* ============================
   WHAT-IF SLIDER SKIN
   ============================ */
.whatif {
  background: linear-gradient(180deg,#1a1030,#120a21 55%,#0d0817);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

input[type="range"].nice {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,#6c29e6,#38e1ff) 0/var(--fill,0%) 100% no-repeat,
    rgba(255,255,255,.12);
  outline: none;
}
input[type="range"].nice:focus { box-shadow: 0 0 0 3px #9c5cff33; }

/* WebKit thumb */
input[type="range"].nice::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(65% 65% at 30% 30%, #ffffff, #d7d1ff);
  border: 2px solid #6c29e6;
  box-shadow: 0 6px 18px rgba(108,41,230,.45);
  margin-top: -5px; /* center on 12px track */
  cursor: pointer;
}

/* Firefox track + thumb */
input[type="range"].nice::-moz-range-track {
  height: 12px; border-radius: 999px;
  background: rgba(255,255,255,.12);
}
input[type="range"].nice::-moz-range-progress {
  height: 12px; border-radius: 999px;
  background: linear-gradient(90deg,#6c29e6,#38e1ff);
}
input[type="range"].nice::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(65% 65% at 30% 30%, #ffffff, #d7d1ff);
  border: 2px solid #6c29e6;
  box-shadow: 0 6px 18px rgba(108,41,230,.45);
  cursor: pointer;
}

/* tiny caption row under slider (optional) */
.whatif-row {
  display:flex; justify-content:space-between; gap:12px; margin-top:8px;
  font-size:12px; color:#cdbbff;
}

/* ==== Progress color tiers (override base gradient) ==== */
.item .progress { transition: width .25s ease, background .2s ease; }

/* 0 exactly → subtle track color */
.item .progress.p0 { background: rgba(255,255,255,.14) !important; }

/* < 35%  = red */
.item .progress.p1 { 
  background: linear-gradient(90deg, #ff5d6c, #ff7a8a) !important;
}

/* 35–70% = yellow */
.item .progress.p2 { 
  background: linear-gradient(90deg, #ffd45e, #ffbe3a) !important;
}

/* 70–95% = amber */
.item .progress.p3 { 
  background: linear-gradient(90deg, #ffb347, #ff9632) !important;
}

/* ≥ 95%  = green */
.item .progress.p4 { 
  background: linear-gradient(90deg, #37e8a3, #59ffbe) !important;
}

/* ======================================================
   CLEAN + FINAL "NO ACCOUNT FOUND" POPUP (FIXED)
   ====================================================== */

#noAccountPopup[hidden] {
  display: none !important;
}

/* Fullscreen dark backdrop */
#noAccountPopup {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 6, 18, 0.75); /* matches your modal blur tone */
  backdrop-filter: blur(4px);
}

/* Inner box */
#noAccountPopup .popup-inner {
  background: linear-gradient(180deg,#1a1030,#120a21 55%,#0d0817);
  border: 1px solid rgba(255,255,255,0.15);
  color: #f1e9ff;
  width: 90%;
  max-width: 380px;
  padding: 26px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  animation: fadeUp .28s ease both;
}

#noAccountPopup h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #fff;
}

#noAccountPopup p {
  color: #cdbbff;
  margin: 0 0 18px;
  line-height: 1.5;
}

/* Close button */
#closeNoAccount {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 800;
  background: linear-gradient(135deg, #ff6b8b, #d4415f);
  color: white;
  box-shadow: 0 8px 20px rgba(255,107,139,.25);
  transition: filter .15s, transform .15s;
}

#closeNoAccount:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

#closeNoAccount:active {
  transform: translateY(0);
}

/* ================================
   SETTINGS PANEL (420px drawer)
   ================================ */

#settingsPanel {
  position: fixed;
  inset: 0;
  z-index: 12000; /* above app, below modal */
}

#settingsPanel[hidden] {
  display: none !important;
}

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity .35s ease;
}

.settings-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 420px;                     /* ✅ width: B */
  height: 100%;
  background: #1a1030;
  border-left: 1px solid #ffffff15;
  box-shadow: -6px 0 26px rgba(0,0,0,.45);
  padding: 22px;
  transform: translateX(100%);      /* hidden off screen */
  opacity: 0;                       /* fade effect */
  transition: transform .45s cubic-bezier(.25,.46,.45,.94), 
              opacity .45s ease;   /* ✅ Slide + Fade */
}

#settingsPanel.open .settings-backdrop {
  opacity: 1;
}

#settingsPanel.open .settings-drawer {
  transform: translateX(0);   /* slide in */
  opacity: 1;                 /* fade in */
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.close-settings {
  background: #241238;
  color: white;
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px #ffffff22;
}

.close-settings:hover {
  filter: brightness(1.15);
}

.settings-body h3 {
  margin: 14px 0 10px;
  color: #cebaff;
  font-size: 15px;
  letter-spacing: .5px;
}

.settings-item {
  width: 100%;
  padding: 12px 14px;
  background: #2b1a45;
  border: 1px solid #ffffff11;
  border-radius: 10px;
  color: #eddfff;
  text-align: left;
  font-weight: 600;
  margin: 8px 0;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.settings-item:hover {
  background: #332055;
  transform: translateY(-1px);
}

.settings-item.danger {
  background: #3b1520;
  color: #ff8fa1;
  border: 1px solid rgba(255,0,0,0.18);
}

.settings-item.danger:hover {
  background: #4a1b28;
}

.fade-out { opacity:0; transition:opacity .28s ease; }
.fade-in { opacity:1; animation:fadeUp .45s ease both; }

/* ================================
   SLIDE-IN MINI DRAWERS (Style C)
   ================================ */

.drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 14000;
}

.drawer-wrap[hidden] {
  display: none !important;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity .35s ease;
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 90%;
  height: 100%;
  background: #1a1030;
  border-left: 1px solid #ffffff15;
  padding: 28px 24px;
  box-shadow: -6px 0 30px rgba(0,0,0,.45);
  transform: translateX(100%);
  opacity: 0;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94),
              opacity .45s ease;
}

.drawer-wrap.open .drawer-backdrop {
  opacity: 1;
}

.drawer-wrap.open .drawer-panel {
  transform: translateX(0);
  opacity: 1;
}

.drawer-sub {
  color: #cdbbff;
  margin-top: -6px;
  margin-bottom: 18px;
  font-size: 14px;
}

.drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.item {
  transition: background .15s ease, transform .15s ease;
}

.item:hover {
  background: rgba(255,255,255,0.04);
  transform: translateX(3px);
}

/* ================================
   UNIVERSAL CUSTOM SELECT BASE
   ================================ */
.custom-select {
  position: relative;
  width: 100%;
}

.custom-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 500;

  background: #1c1b22;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff;

  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.custom-select select:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139,92,246,0.45);
}

/* Arrow */
.custom-select::after {
  content: "▾";
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 14px;
  color: #aaa;
  pointer-events: none;
  transition: color .2s ease;
}

.custom-select:hover::after {
  color: #fff;
}


/* ================================
   ICON DROPDOWN (Emoji)
   ================================ */
.icon-select select {
  padding-left: 8px; /* space for emoji preview */
}

/* Option styling (browser-dependent fallback) */
.icon-select option {
  font-size: 16px !important;
  padding: 8px;
}


/* ================================
   CATEGORY SELECT
   ================================ */

.category-select select {
  background: #23222b;
  border-color: rgba(255, 255, 255, 0.15);
}

.category-select select:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.category-select option {
  padding: 8px 10px;
  background: #1f1e26;
  color: white;
}

/* Add color tags to categories visually */
.category-select option[value="savings"] { color: #4ade80; }     /* green */
.category-select option[value="travel"] { color: #38bdf8; }      /* blue */
.category-select option[value="home"] { color: #facc15; }        /* yellow */
.category-select option[value="emergency"] { color: #f87171; }   /* red */
.category-select option[value="education"] { color: #c084fc; }   /* purple */
.category-select option[value="business"] { color: #fb923c; }    /* orange */


/* =================================
   OPENING ANIMATION (for UI polish)
   ================================= */
.custom-select select {
  animation: fadeInSelect .25s ease;
}

@keyframes fadeInSelect {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Popup */
.popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px); z-index: 90;
}
.popup-card {
  position: fixed; z-index: 91; inset: 0;
  margin: auto; width: min(420px, 92vw);
  background: #181825; color: #fff; border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  padding: 18px 18px 14px; max-height: 80vh; overflow: auto;
  transform: translateY(12px); opacity: 0; transition: .2s ease;
}
.popup-card.open { transform: translateY(0); opacity: 1; }
.popup-card h3 { margin: 4px 2px 12px; font-weight: 700; }
.popup-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.popup-card .field { margin: 10px 0; }
.popup-card input { width: 100%; }

:root { 
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
header { padding-top: calc(16px + var(--safe-top)); }
.viewport-scroll { padding-bottom: calc(16px + var(--safe-bottom)); }

/* ============================
   MOBILE OPTIMIZATIONS
   ============================ */
@media (max-width: 600px) {

  /* GENERAL */
  body {
    padding: 0;
    margin: 0;
    font-size: 15px;
    overflow-x: hidden;
  }

  .page {
    padding: 12px;
  }

  header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
  }

  header h1 {
    font-size: 22px;
  }

  .user-pill {
    width: 100%;
    justify-content: space-between;
    padding: 6px 0;
  }

  /* BUTTONS */
  .btn,
  .btn.secondary,
  .btn.danger {
    padding: 10px 14px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* KPI GRID → 1-column on phones */
  .kpis {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .k-value {
    font-size: 28px;
  }

  /* PANELS */
  .sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .panel {
    padding: 14px;
  }

  /* LIST ITEMS */
  .item {
    grid-template-columns: 1fr auto 30px !important;
    padding: 10px 6px;
    gap: 6px;
  }

  .item .name {
    font-size: 15px;
  }

  .item .amount {
    font-size: 15px;
  }

  .progress-bar {
    height: 6px;
  }

  .spark {
    height: 20px !important;
  }

  /* MODAL */
  .modal {
    width: 92%;
    max-width: none;
    left: 4%;
    top: 10%;
    transform: none;
  }

  .modal-content {
    padding: 16px !important;
  }

  .modal-actions {
    flex-direction: column;
    gap: 10px;
  }

  .modal-actions .btn {
    width: 100%;
  }

  /* DRAWERS (settings + custom drawers) */
  .drawer-panel,
  .settings-drawer {
    width: 92%;
    border-radius: 16px 16px 0 0;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
  }

  .drawer-panel.open,
  .settings-drawer.open {
    transform: translateY(0);
  }

  .drawer-panel h2,
  .settings-drawer h2 {
    font-size: 20px;
  }

  /* SETTINGS BUTTON LIST */
  .settings-item {
    padding: 12px 10px;
    font-size: 15px;
  }

  /* TRANSACTION POPUP */
  #txnPopup {
    width: 94%;
    left: 3%;
  }

  #txnPopup.open {
    bottom: 0;
    transform: translateY(0);
  }

  /* AUTH SCREEN */
  .auth-card {
    width: 92%;
    padding: 20px;
  }

  #authTitle {
    font-size: 24px;
  }

  .field label {
    font-size: 14px;
  }

  /* “...” MENU */
  .row-menu {
    right: 8px !important;
    width: 130px !important;
    padding: 6px;
  }

  .menu-act {
    font-size: 14px;
    padding: 8px;
  }
}

/* ==== MOBILE ONLY ==== */
@media (max-width: 768px) {

  /* kill horizontal scrolling everywhere */
  html, body {
    width: 100%;
    overflow-x: hidden;
  }
  .page {
    padding: 12px 12px 28px;
  }

  /* header stacks neatly */
  header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
  }
  header .app-icon { font-size: 24px; }
  header h1 { font-size: 18px; margin: 0; }
  header .subtitle { font-size: 12px; opacity: .8; }
  header .user-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  header .user-pill .btn {
    padding: 8px 10px;
    font-size: 12px;
  }

  /* KPI cards: 2-up, then 1-up on tiny phones */
  .kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .kpis .card {
    min-width: 0;
    padding: 14px;
  }
  .k-value { font-size: 22px; }
  .k-title { font-size: 11px; letter-spacing: .3px; }
  .k-sub   { font-size: 11px; }

  @media (max-width: 380px) {
    .kpis { grid-template-columns: 1fr; }
  }

  /* Main sections: stack to a single column */
  .sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .panel {
    padding: 14px;
  }
  .panel .header h2 { font-size: 16px; }
  .panel .badge { font-size: 11px; padding: 4px 8px; }
  .panel .cta .btn { padding: 8px 10px; font-size: 12px; }

  /* List rows: tighter & wrap properly */
  .example-list, #sList, #dList { display: grid; gap: 10px; }
  .item {
    grid-template-columns: 1fr auto auto;
    display: grid;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
  }
  .item .left { gap: 8px; min-width: 0; }
  .item .name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .item .amount { font-size: 14px; }
  .item .meta {
    grid-column: 1 / -1;
    font-size: 12px;
    opacity: .8;
    margin-top: -4px;
  }
  .item .progress-bar { grid-column: 1 / -1; height: 8px; }
  .item canvas.spark { display: none; } /* hide tiny spark on phones */

  /* "…" row menu: position over row with big touch targets */
  .row-menu {
    position: absolute;
    right: 10px;
    top: 40px;
    background: #1c1333;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    padding: 6px;
    z-index: 50;
  }
  .row-menu .menu-act {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 10px;
  }
  .row-menu .menu-act:active {
    background: rgba(255,255,255,.08);
  }

  /* Auth card: full width on phones */
  .auth-card {
    width: calc(100vw - 24px);
    max-width: 460px;
    padding: 18px;
  }

  /* Modal: turn into full-screen sheet */
  .modal {
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    height: 70vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform .22s ease;
  }
  .modal[hidden] { transform: translateY(100%); }
  .modal:not([hidden]) { transform: translateY(0); }
  .modal-content { padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-actions .btn { width: 100%; }

  /* Drawers: behave like native bottom sheets */
  .drawer-wrap .drawer-panel {
    width: 100%;
    max-width: none;
    height: 80vh;
    border-radius: 16px 16px 0 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  /* Buttons & inputs: bigger tap areas */
  .btn { padding: 12px 14px; font-size: 14px; border-radius: 12px; }
  .field input, .field select {
    padding: 12px;
    font-size: 16px; /* avoids iOS zoom */
    border-radius: 12px;
  }

  /* Prevent any stray element from causing sideways scroll */
  img, canvas, table, .card, .panel, .item, .kpis, .sections {
    max-width: 100%;
  }
}

/* ===== Mobile fixes (<= 768px) ===== */

/* 1) Kill horizontal overflow culprits */
html, body { overflow-x: hidden; }
*,
*::before,
*::after { box-sizing: border-box; }
img, canvas, video { max-width: 100%; height: auto; display: block; }
.page, .viewport-scroll, .sections, .panel, header { min-width: 0; }

/* 2) Base spacing so content breathes on phones */
@media (max-width: 768px) {
  body { padding: 0; margin: 0; }
  .page { padding: 12px; }
}

/* 3) Header stacks neatly */
@media (max-width: 768px) {
  header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "pill pill";
    gap: 10px;
    align-items: center;
  }
  header .app-icon { grid-area: icon; font-size: 24px; }
  header h1, header .subtitle { margin: 0; line-height: 1.2; }
  header > div:first-of-type { grid-area: title; }
  header .user-pill {
    grid-area: pill;
    justify-self: stretch;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  header .user-pill .btn { flex: 1 1 auto; min-width: 44%; }
}

/* 4) KPI cards: one per row */
@media (max-width: 768px) {
  .kpis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .kpis .card { width: 100%; }
}

/* 5) Two columns -> one column */
@media (max-width: 768px) {
  .sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .panel { width: 100%; }
}

/* 6) List items must not push width */
@media (max-width: 768px) {
  .example-list .item {
    display: grid;
    grid-template-columns: 1fr auto; /* name grows, amount hugs right */
    grid-template-areas:
      "left amount"
      "meta meta"
      "bar bar";
    align-items: center;
    gap: 8px 10px;
    min-width: 0; /* allow text to shrink */
  }
  .example-list .item .left   { grid-area: left; display: flex; gap: 8px; min-width: 0; }
  .example-list .item .name   { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .example-list .item .amount { grid-area: amount; justify-self: end; }
  .example-list .item .meta   { grid-area: meta; font-size: 12px; opacity: .8; }
  .example-list .item .progress-bar { grid-area: bar; }
  .example-list .item .spark  { display: none; } /* optional: hide sparkline on phones */
  .example-list .item .more-btn { justify-self: end; }
}

/* 7) Buttons, badges, pills don’t force width */
@media (max-width: 768px) {
  .btn, .badge { white-space: normal; }
}

/* 8) Drawers & modals behave like sheets (no overflow) */
@media (max-width: 768px) {
  .drawer-wrap,
  .modal-overlay {
    position: fixed; inset: 0; width: 100vw; max-width: 100vw;
  }
  .drawer-panel,
  .modal .modal-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
  }
  .modal { align-items: flex-end; }
}

/* 9) Prevent common 100vw scrollbar bug (if any element used 100vw) */
.full-bleed, [style*="100vw"] { max-width: 100%; }

/* 10) Tiny tap targets & typography tweaks */
@media (max-width: 768px) {
  .k-value { font-size: 28px; }
  .header .subtitle { font-size: 13px; }
  .field input, .field select { font-size: 16px; } /* avoid iOS zoom */
}

/* ===================== HEADER LAYOUT ===================== */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 14px 18px;
  gap: 12px;
}

.app-icon {
  font-size: 32px;
  margin-right: 8px;
}

header h1 {
  margin: 0;
  font-size: 20px;
}

.subtitle {
  font-size: 13px;
  opacity: 0.8;
}

/* Desktop buttons to the right */
.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-pill .btn {
  font-size: 14px;
  padding: 6px 10px;
}

/* ===================== MOBILE FIX ===================== */
@media (max-width: 700px) {
  header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px 12px;
    gap: 8px;
  }

  .app-icon {
    font-size: 42px;
    margin-bottom: 6px;
  }

  header h1 {
    font-size: 22px;
  }

  .subtitle {
    font-size: 14px;
    margin-bottom: 10px;
  }

  /* Center all user info + actions vertically */
  .user-pill {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
    margin-top: 10px;
  }

  .user-pill span {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
  }

  /* ✅ Force buttons to show text and be centered */
  .user-pill button.btn {
    display: inline-block;
    width: 70%;
    max-width: 260px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0;
    border-radius: 10px;
  }

  /* Remove icons-only styles if any existed */
  .user-pill .btn.secondary::after,
  .user-pill .btn.secondary::before {
    display: none;
  }
}

/* Optional for smaller phones */
@media (max-width: 400px) {
  .user-pill button.btn {
    width: 85%;
    font-size: 15px;
  }
}

/* User pill button */
.user-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.user-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.user-btn .avatar { font-size: 18px; }
.user-btn .user-label { font-weight: 600; font-size: 14px; }
.user-btn .chev { opacity: .8; font-size: 12px; }

/* Dropdown */
.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #12121a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 8px;
  z-index: 1000;
}

.user-menu-email {
  font-size: 12px;
  color: #cfcfe6;
  opacity: .85;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 6px;
  word-break: break-all;
}

.user-menu-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
}

.user-menu-item:hover { background: rgba(255,255,255,0.08); }
.user-menu-item.danger { color: #ff8080; }

/* Mobile: center the user button under the title */
@media (max-width: 700px) {
  header { gap: 8px; }
  .user-pill {
    width: 100%;
    justify-content: center;
  }
  .user-menu {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* --- User menu base --- */
.user-pill { position: relative; overflow: visible; }
#userMenuBtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); backdrop-filter: blur(6px);
}
#userMenuBtn .avatar { font-size: 18px; line-height: 1; }
#userMenuBtn .chev { opacity: .8; }

/* Dropdown */
.user-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 92vw;
  border-radius: 12px;
  padding: 10px;
  background: #1d112f; /* fits purple theme */
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
  z-index: 9999; /* sit above cards */
}

.user-menu::before { /* little arrow */
  content: "";
  position: absolute;
  top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: #1d112f; border-left: 1px solid rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14);
}

.user-menu-email {
  font-size: .9rem; opacity: .85; margin: 6px 8px 10px; word-break: break-all;
}

.user-menu-item {
  width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px;
  background: transparent; border: 0; color: inherit; cursor: pointer;
}
.user-menu-item:hover, .user-menu-item:focus {
  background: rgba(255,255,255,.08); outline: none;
}
.user-menu-item.danger { color: #ff8080; }
.user-menu-item.danger:hover { background: rgba(255,64,64,.12); }

/* Make sure header doesn't clip the menu */
header { position: relative; overflow: visible; z-index: 10; }

/* --- Mobile-only tweaks (<= 640px) --- */
@media (max-width: 640px) {
  header {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    row-gap: 10px;
  }

  header .spacer { display: none; }
  header .app-icon { order: 1; }
  header > div:nth-child(2) { order: 2; } /* title/subtitle block */
  .user-pill { order: 3; width: 100%; display: flex; justify-content: center; }

  /* keep dropdown centered; ensure it can overflow header */
  .user-menu { left: 50%; transform: translateX(-50%); }
}

/* ===== FINAL OVERRIDES (place at end of styles.css) ===== */

/* 1) Kill sideways scrolling on smaller screens caused by min-widths */
@media (max-width: 1100px) {
  .page { min-width: 0 !important; width: 100% !important; }
}
html, body, .viewport-scroll { overflow-x: hidden !important; }

/* 2) Header: keep desktop as-is, but center on mobile */
@media (max-width: 700px) {
  header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 16px 12px !important;
  }
  header .spacer { display: none !important; }
  .user-pill {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }
  #userMenuBtn { margin: 0 auto !important; }
}

/* 3) Make sure the header never clips the dropdown */
header { position: relative !important; overflow: visible !important; z-index: 20 !important; }

/* 4) User menu: single, definitive positioning (centered under button) */
.user-menu {
  position: absolute !important;       /* JS sets top each click; we keep absolute */
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  min-width: 220px;
  max-width: 92vw;
  z-index: 100000 !important;          /* stay above cards, drawers, etc. */
  pointer-events: auto;
  will-change: transform;
}

/* Little arrow stays centered too */
.user-menu::before {
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
}

/* 5) Make sure surrounding containers don’t clip menus */
.sections, .panel, .example-list, .item { overflow: visible !important; }

/* 6) Touch targets remain usable on small screens */
@media (max-width: 700px) {
  .user-menu-item { padding: 12px 14px !important; }
}

/* --- Global safety: kill sideways scroll on small screens --- */
@media (max-width: 560px) {
  html, body { overflow-x: hidden; }
}

/* --- Header base (keep desktop as-is) --- */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: visible; /* so dropdown isn't clipped */
}

/* --- Brand bits --- */
.app-icon {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- User pill container should be the positioning context on desktop --- */
.user-pill { position: relative; }

/* --- Dropdown menu appearance (works for both desktop + mobile) --- */
.user-menu {
  min-width: 220px;
  background: #fff;
  color: #111;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.06);
  padding: 10px;
  z-index: 9999;
}

/* keep menu centered under button by default (desktop) */
.user-pill .user-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

/* menu items */
.user-menu-email {
  font-weight: 600;
  font-size: 14px;
  padding: 6px 10px 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 6px;
  text-align: center;
  word-break: break-word;
}

.user-menu-item {
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.user-menu-item:hover { background: rgba(0,0,0,.06); }
.user-menu-item.danger:hover { background: #ffe9ea; color: #b00020; }

/* --- MOBILE LAYOUT FIXES (≤ 560px) --- */
@media (max-width: 560px) {
  /* Center the top bar like an app header */
  header {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    justify-items: center;
    text-align: center;
    row-gap: 6px;
    padding: 10px 12px;
  }

  /* Make the brand sit together and centered */
  .app-icon {
    font-size: 28px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6b4bff 0%, #a784ff 100%);
    color: #fff;
    margin-bottom: 4px;
  }

  header h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
  }

  header .subtitle {
    font-size: 13px;
    opacity: .85;
    margin-top: 2px;
  }

  /* hide spacer, center everything */
  .spacer { display: none !important; }

  /* Put the user button on its own centered row */
  .user-pill {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .user-btn {
    max-width: 100%;
  }

  /* IMPORTANT: menu should use viewport coords set by JS (getBoundingClientRect)
     so force it to be fixed to match those values and prevent “far down” gap. */
  .user-menu {
    position: fixed !important;   /* override inline absolute from JS */
    left: 50% !important;         /* centered horizontally */
    transform: translateX(-50%) !important;
    /* top is set by JS; we just respect it */
  }

  /* Make sure nothing clips it */
  header, .user-pill, body { overflow: visible; }
}

/* Ensure each list row can anchor its own menu */
.item {
  position: relative; /* anchor for its .row-menu if you want per-row absolute */
}

/* The 3-dots button */
.more-btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 20px;
  cursor: pointer;
  color: inherit;
  transition: background .12s ease, transform .04s ease;
}
.more-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.more-btn:active { transform: translateY(1px); }
.more-btn:focus-visible { outline: 2px solid #7c5cfd; outline-offset: 2px; }

/* Global/context dropdown that your JS shows as #rowContextMenu */
#rowContextMenu[hidden] { display: none !important; }
#rowContextMenu {
  position: fixed;                    /* your JS sets left/top from getBoundingClientRect() */
  z-index: 10000;
  min-width: 200px;
  max-width: min(280px, 92vw);
  background: rgba(26, 26, 34, .96);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow:
    0 12px 34px rgba(0,0,0,.35),
    0 2px 10px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px;
  transform-origin: 50% 0%;
  animation: menu-pop .14s ease-out;
}

/* Items inside the row menu */
#rowContextMenu .rcm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  white-space: nowrap;
}
#rowContextMenu .rcm-item:hover { background: rgba(255,255,255,.08); }
#rowContextMenu .rcm-item:active { background: rgba(255,255,255,.12); }

/* Optional icons */
#rowContextMenu .rcm-item .mi {
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  opacity: .9;
}

/* Danger action */
#rowContextMenu .rcm-item.danger { color: #ff6b6b; }
#rowContextMenu .rcm-item.danger:hover { background: rgba(255,107,107,.12); }

/* Divider (if you render one) */
#rowContextMenu .rcm-sep {
  height: 1px;
  margin: 6px 4px;
  background: rgba(255,255,255,.08);
  border: 0;
}

/* Light theme fallback */
@media (prefers-color-scheme: light) {
  #rowContextMenu {
    background: rgba(255,255,255,.98);
    color: #222;
    border-color: rgba(0,0,0,.08);
    box-shadow:
      0 12px 34px rgba(0,0,0,.18),
      0 2px 10px rgba(0,0,0,.10);
  }
  #rowContextMenu .rcm-item:hover { background: rgba(0,0,0,.05); }
  #rowContextMenu .rcm-item:active { background: rgba(0,0,0,.08); }
}

/* Make the header the positioning context for the user menu */
header {
  position: relative; /* important so the menu can anchor to the button */
}

/* The button that opens the menu */
#userMenuBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, #ffffff 10%, transparent);
  color: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .04s ease;
}
#userMenuBtn:hover { background: color-mix(in srgb, #ffffff 18%, transparent); }
#userMenuBtn:active { transform: translateY(1px); }
#userMenuBtn:focus-visible { outline: 2px solid #7c5cfd; outline-offset: 2px; }

/* The dropdown itself */
#userMenu[hidden] { display: none !important; } /* make [hidden] actually hide */
#userMenu {
  position: absolute;                 /* anchor inside header */
  top: 52px;                          /* default: just below button; JS can override */
  left: 0;                            /* JS sets exact coords */
  z-index: 9999;
  min-width: 220px;
  max-width: min(320px, 90vw);
  background: rgba(26, 26, 34, .92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 2px 8px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: clip;
  transform-origin: 50% 0%;
  animation: menu-pop .14s ease-out;
}

/* Little caret/arrow pointing up */
#userMenu::before {
  content: "";
  position: absolute;
  top: -6px;                          /* sits above the menu box */
  left: 24px;                         /* JS can tweak if you want it to track the button */
  width: 12px; height: 12px;
  background: inherit;
  border-left: 1px solid rgba(255,255,255,.08);
  border-top: 1px solid rgba(255,255,255,.08);
  transform: rotate(45deg);
}

/* Menu header (email / name) */
#userMenu .menu-header {
  padding: 12px 14px 8px;
  font-size: .92rem;
  line-height: 1.35;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
}
#userMenu .menu-header .sub {
  font-size: .8rem;
  opacity: .75;
}

/* Items */
#userMenu .menu-list {
  display: grid;
  gap: 2px;                           /* tiny separators via gap + bg on container */
  padding: 6px;
  background: transparent;
}
#userMenu .menu-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
#userMenu .menu-item:hover { background: rgba(255,255,255,.06); }
#userMenu .menu-item:active { background: rgba(255,255,255,.10); }

/* Icon bubble (optional) */
#userMenu .menu-item .mi {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  opacity: .9;
}

/* “Danger” action like Delete/Sign out */
#userMenu .menu-item.danger { color: #ff6b6b; }
#userMenu .menu-item.danger:hover { background: rgba(255,107,107,.12); }

/* Pop animation & reduced motion */
@keyframes menu-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #userMenu { animation: none; }
}

/* Light theme fallback */
@media (prefers-color-scheme: light) {
  #userMenu {
    background: rgba(255,255,255,.98);
    color: #222;
    border-color: rgba(0,0,0,.08);
    box-shadow:
      0 10px 30px rgba(0,0,0,.15),
      0 2px 8px rgba(0,0,0,.10);
  }
}

/* The header user menu popup */
.user-menu {
  position: fixed;                 /* keep tied to the viewport */
  background: #11141a;
  color: #e9eef6;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  padding: 8px;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 16px));
  z-index: 10000;
  margin: 0;                       /* undo any global centering */
  transform: none;                 /* important: JS positions it */
}

/* Make it sit closer under the button visually */
.user-menu--tight {
  /* just a hook; JS will position with a smaller offset */
}

/* Context menu container (the popup for ⋯) */
#rowContextMenu,
.row-menu {
  position: fixed;                 /* or absolute if you anchor to a row; fixed is safer */
  inset: auto;                     /* clear any rogue insets */
  background: #11141a;
  color: #e9eef6;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  padding: 8px;
  min-width: 200px;
  z-index: 9999;
}

/* Buttons inside the ⋯ menu */
#rowContextMenu .menu-act,
.row-menu .menu-act {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin: 0;                       /* kill inherited margins */
  background: transparent;         /* remove pill backgrounds */
  border: 0;                       /* remove default button borders */
  border-radius: 8px;              /* subtle, not pill */
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}

/* Hover/active states */
#rowContextMenu .menu-act:hover,
.row-menu .menu-act:hover {
  background: rgba(255,255,255,.06);
}

#rowContextMenu .menu-act:active,
.row-menu .menu-act:active {
  background: rgba(255,255,255,.10);
}

/* Danger item */
#rowContextMenu .menu-act.danger,
.row-menu .menu-act.danger {
  color: #ff6b6b;
}
#rowContextMenu .menu-act.danger:hover,
.row-menu .menu-act.danger:hover {
  background: rgba(255, 107, 107, .12);
}

/* Optional: thin divider if you add <hr class="menu-sep"> */
#rowContextMenu .menu-sep,
.row-menu .menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: rgba(255,255,255,.08);
  border: 0;
}

/* USER MENU PANEL */
#userMenu {
  position: fixed;                /* JS sets this at runtime; keep here as default */
  inset: auto;                    /* avoid accidental centering/insets */
  background: #15161b;
  color: #eaeef7;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  padding: 8px;
  min-width: 200px;
}

/* items inside user menu */
#userMenu .item,
#userMenu button,
#userMenu a {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  outline: none;
}

#userMenu .item:hover,
#userMenu button:hover,
#userMenu a:hover {
  background: rgba(255,255,255,.06);
}

#userMenu .sep {
  margin: 6px 8px;
  height: 1px;
  background: rgba(255,255,255,.08);
  border: 0;
}

/* danger style */
#userMenu .danger { color: #ff6e6e; }
#userMenu .danger:hover { background: rgba(255,110,110,.12); }

/* Ensure no global button styles leak in */
#userMenu button {
  box-shadow: none !important;
}

/* “⋯” ROW CONTEXT MENU (id from your JS: #rowContextMenu) */
#rowContextMenu {
  position: fixed;                /* you already compute viewport coords for this too */
  background: #14151a;
  color: #eaeef7;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  min-width: 190px;
  backdrop-filter: saturate(1.2) blur(4px);
}

#rowContextMenu .rcm-item,
#rowContextMenu .menu-act {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  outline: none;
  margin: 0;                      /* remove inherited margins that made them look like pills */
  box-shadow: none !important;    /* kill white pill look */
}

#rowContextMenu .rcm-item:hover,
#rowContextMenu .menu-act:hover {
  background: rgba(255,255,255,.06);
}

#rowContextMenu .menu-act.danger { color: #ff6e6e; }
#rowContextMenu .menu-act.danger:hover { background: rgba(255,110,110,.12); }

/* tighten vertical rhythm */
#rowContextMenu .rcm-item + .rcm-item,
#rowContextMenu .menu-act + .menu-act {
  margin-top: 2px;
}

.user-menu {
  position: fixed;
  background: #1b1b24;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 8px 0;
  z-index: 9999;
  min-width: 180px;
  text-align: left;
  animation: fadeSlideIn .18s ease-out;
}

.user-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #1b1b24;
}

.user-menu-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: inherit;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.user-menu-item:hover {
  background: rgba(255,255,255,0.1);
}

.user-menu-item.danger {
  color: #ff4d4d;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* user dropdown base */
#userMenu.user-menu {
  position: fixed;            /* JS sets exact coords */
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  transform: none;
  margin: 0;
  background: #1b1b24;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 8px 0;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 16px));
}

.k-trend { 
  font-weight: 600; 
  padding: 2px 8px; 
  border-radius: 999px; 
  background: rgba(255,255,255,.08);
  line-height: 1.3;
  white-space: nowrap;
}

.k-trend.good { background: rgba(34,197,94,.12); }   /* green-ish */
.k-trend.bad  { background: rgba(239,68,68,.12); }   /* red-ish */
.k-trend.neutral { background: rgba(255,255,255,.08); }

/* Small screens: show just the arrows (trim after first token) */
@media (max-width: 480px) {
  #savingsTrend, #debtTrend, #netTrend {
    max-width: 2.25em;            /* enough for arrow */
    overflow: hidden;
    text-overflow: clip;
  }
}

/* HEADER: modern dark gradient bar */
header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 18px;
  margin-bottom: 18px;

  background: transparent !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* logo icon */
header .app-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;

  background: transparent !important;
}

/* title + subtitle */
header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

header .subtitle {
  font-size: 12px;
  opacity: 0.8;
}

/* spacer */
header .spacer {
  flex: 1 1 auto;
}

/* USER PILL (right side) */
.user-pill {
  display: flex;
  align-items: center;
}

/* button that opens menu */
.user-pill .user-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(18, 18, 24, 0.85));
  color: inherit;

  font-size: 13px;
  cursor: pointer;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.user-pill .user-btn:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(22, 22, 30, 0.9));
}

.user-pill .avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: radial-gradient(circle at 20% 0, #6b46ff 0%, #3b2a87 65%, #181024 100%);
}

.user-pill .user-label {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-pill .chev {
  font-size: 10px;
  opacity: 0.8;
  transform: translateY(1px);
}

/* tweak on very small screens */
@media (max-width: 480px) {
  header {
    padding: 10px 12px;
    border-radius: 0; /* flush with screen on tiny phones, if you prefer */
  }

  header h1 {
    font-size: 18px;
  }

  .user-pill .user-label {
    max-width: 90px;
  }
}

/* HEADER WRAPPER */
header {
  width: 100%;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: linear-gradient(
    90deg,
    rgba(90, 180, 255, 0.42) 0%,
    rgba(140, 200, 255, 0.22) 45%,
    rgba(255, 255, 255, 0) 100%
  );

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* LOGO TEXT (if used) */
.header-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.card:hover,
.card:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.75);
}

/* Hero CTAs: first goal / first debt / add goal / add debt */
#btn-first-goal,
#btn-first-debt,
#btn-add-goal,
#btn-add-debt {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-position 0.25s ease;
  background-size: 180% 180%;
}

/* Slightly more dramatic hover for these */
#btn-first-goal:hover,
#btn-first-debt:hover,
#btn-add-goal:hover,
#btn-add-debt:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
}

/* Pressed state */
#btn-first-goal:active,
#btn-first-debt:active,
#btn-add-goal:active,
#btn-add-debt:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30);
}

/* ----- Shared button base ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: 
    transform .18s ease,
    opacity .18s ease,
    background .18s ease,
    box-shadow .18s ease;
  user-select: none;
}

/* Hover lift */
.btn:hover {
  transform: translateY(-2px);
}

/* Tap/active press */
.btn:active {
  transform: scale(0.94);
  opacity: 0.85;
}

/* ---------- SAVE BUTTON ---------- */
.btn-save {
  background: linear-gradient(135deg, #4CD964, #2ECC71);
  color: white;
  border: none;
}

.btn-save:hover {
  background: linear-gradient(135deg, #57e270, #39d67d);
}

.btn-save:active {
  background: linear-gradient(135deg, #35c866, #26b95a);
}

/* ---------- CANCEL BUTTON ---------- */
.btn-cancel {
  background: rgba(255,255,255,0.14);
  color: #fff;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
}

.btn-cancel:hover {
  background: rgba(255,255,255,0.22);
}

.btn-cancel:active {
  background: rgba(255,255,255,0.30);
}

/* === MODAL OVERLAY FADE === */
#modalOverlay {
  opacity: 0;
  transition: opacity .28s ease;
}

#modalOverlay.open {
  opacity: 1;
}


/* === MODAL CARD SLIDE + FADE === */
#modal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22,.61,.36,1);
}

#modal.open {
  opacity: 1;
  transform: translateY(0);
}

/* Center modals on mobile screens */
@media (max-width: 768px) {
  #modal {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    max-width: 92vw !important;
    width: 92vw !important;

    border-radius: 20px !important;
  }

  /* Ensure overlay covers whole screen on mobile */
  #modalOverlay {
    position: fixed !important;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
  }
}

.k-value.bump {
  animation: kpiBump 260ms ease-out;
}

@keyframes kpiBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

button:focus-visible,
.user-btn:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 3px;
}

.row-context-menu {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 140ms ease, transform 140ms ease;
}
.row-context-menu.open {
  opacity: 1;
  transform: scale(1);
}

.history-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.history-item > div:first-child {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 500;
}
.history-item .small {
  opacity: 0.7;
  font-size: 0.8rem;
}

.item .quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.quick-act {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  color: #fdfbff;
  backdrop-filter: blur(8px);
  transition: background 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
}

.quick-act.secondary {
  background: rgba(255, 99, 132, 0.15);
}

.quick-act.ghost {
  background: transparent;
  opacity: 0.8;
}

.quick-act:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.quick-act:active {
  transform: translateY(0);
  box-shadow: none;
  opacity: 0.9;
}

/* Card layout */
.item {
  position: relative;
  padding-top: 18px;          /* make room for amount + dots on first row */
}

/* Big total amount inside each goal/debt card */
.item .amount {
  position: absolute;
  top: 14px;
  right: 56px;                /* space before the ⋯ button */
  font-weight: 600;
}

/* ⋯ button in the top-right corner */
.item .more-btn {
  position: absolute;
  top: 10px;
  right: 14px;
}

#tabBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 16px;
  backdrop-filter: blur(18px);
  background: rgba(20, 20, 26, 0.55);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 9998;
}

#tabBar .tab {
  flex: 1;
  color: #aaa;
  background: none;
  border: none;
  text-align: center;
  font-size: 13px;
  padding: 6px;
  border-radius: 10px;
  transition: color .15s, background .15s, transform .15s;
}

#tabBar .tab .icon {
  display: block;
  font-size: 20px;
  margin-bottom: 2px;
}

#tabBar .tab.active {
  color: #fff;
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

.hidden {
  display: none !important;
}

#tabBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(20, 14, 40, 0.65);
  backdrop-filter: blur(16px);
  padding-bottom: env(safe-area-inset-bottom);
  display: none;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 9999;
}

#tabBar .tab {
  background: none;
  border: none;
  flex-direction: column;
  display: flex;
  align-items: center;
  gap: 2px;
  color: #dcd3ff;
  font-size: 12px;
  opacity: 0.7;
}

#tabBar .tab.active {
  opacity: 1;
  color: white;
}

#tabBar .tab .icon {
  font-size: 20px;
}

#tabBar {
  display: none;
}

/* Show on mobile (you can adjust breakpoint if needed) */
@media (max-width: 768px) {
  #tabBar {
    display: flex;
  }
}

/* Hide tab bar until user is inside app */
#tabBar {
  display: none;
}

/* Hide quick actions on mobile */
@media (max-width: 768px) {
  .quick-actions {
    display: none !important;
  }
}

/* Mobile only */
@media (max-width: 768px) {
  /* Show the tab bar only on mobile */
  #tabBar {
    display: flex;
  }

  /* Avoid content being hidden behind the bar */
  .viewport-scroll {
    padding-bottom: 80px;  /* adjust to taste */
  }

  /* Hide quick actions on mobile (whatever class you used for them) */
  .quick-actions,
  .item-quick-actions {
    display: none !important;
  }
}

/* ---------------------------
   BOTTOM TAB BAR (MOBILE ONLY)
---------------------------- */

#tabBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: none; /* JS will turn this on for mobile when app is visible */

  /* frosted glass look */
  background: rgba(12, 10, 24, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  /* safe area + spacing */
  padding: 6px max(14px, env(safe-area-inset-left))
           calc(6px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));

  border-top: 1px solid rgba(255,255,255,0.10);

  display: none; /* default hidden; see media query below */
}

/* Layout of the tabs inside the bar */
#tabBar {
  display: none;
}

#tabBar .tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;

  border: none;
  outline: none;
  background: transparent;
  color: #f6f3ff;
  font-size: 11px;
  padding: 6px 0;
  border-radius: 999px;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#tabBar .tab .icon {
  font-size: 18px;
  line-height: 1;
}

#tabBar .tab .label {
  line-height: 1.2;
}

/* Active tab style */
#tabBar .tab.active {
  background: rgba(255, 255, 255, 0.10);
}

/* Subtle press feeling */
#tabBar .tab:active {
  transform: translateY(1px) scale(0.98);
}

/* Mobile only: show bar and add padding so content doesn't go under it */
@media (max-width: 768px) {
  #tabBar {
    display: flex;
    justify-content: space-between;
  }

  .viewport-scroll {
    padding-bottom: 80px; /* space for the tab bar */
  }
}

/* Hide quick actions on mobile (if you added a .quick-actions container) */
@media (max-width: 768px) {
  .quick-actions {
    display: none !important;
  }
}

/* --- Base: hide by default (desktop & when app is hidden) --- */
#tabBar {
  display: none;              /* default: hidden */
}

/* --- Mobile-only bottom tab bar --- */
@media (max-width: 768px) {
  /* Only show the tab bar when the app is visible (i.e. not on login) */
  #app:not([hidden]) ~ #tabBar {
    display: flex;
  }

  #tabBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(12, 10, 28, 0.92);
    backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    z-index: 9999;
  }

  #tabBar .tab {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #f5f0ff;
    font: 500 11px/1 "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  /* centers icon + text vertically */
    gap: 2px;
    height: 100%;
    padding: 0;               /* prevent tall buttons */
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #tabBar .tab .icon {
    font-size: 20px;
    line-height: 1;
    display: block;
  }

  #tabBar .tab .label {
    line-height: 1.1;
  }

  #tabBar .tab.active {
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent);
  }

  #tabBar .tab:active {
    transform: translateY(1px) scale(0.98);
  }

  /* Give the page some bottom space so content isn't hidden behind the bar */
  .viewport-scroll,
  .page {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* Make the user email pill wider */
.user-pill {
  display: flex;
  align-items: center;
}

/* This is the pill button */
.user-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  min-width: 300px;          /* ⬅️ make the pill longer */
  border-radius: 999px;
  justify-content: space-between;
}

/* Ensure the email text can take up the space nicely */
.user-btn .user-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-label {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* Make the user chip wider */
.user-btn {
  min-width: 260px;           /* wider pill */
  padding: 0.45rem 1.4rem;
  gap: 0.5rem;
}

/* Let the email text use more space before ellipsis */
.user-btn .user-label {
  flex: 1 1 auto;
  max-width: 30ch;            /* was smaller – increase this */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────────────────────── */
/* PIN LOCK OVERLAY */
/* ─────────────────────────────── */
.pinlock-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────── */
/* CARD */
/* ─────────────────────────────── */
.pinlock-card {
  width: 88%;
  max-width: 360px;
  padding: 32px 26px 40px;
  border-radius: 24px;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);

  text-align: center;
  animation: pinCardIn .3s cubic-bezier(.22,.61,.36,1);
}

/* Slide + fade animation */
@keyframes pinCardIn {
  from { opacity: 0; transform: translateY(12px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Title */
.pin-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 18px;
  color: #fff;
  letter-spacing: .3px;
}

/* Subtitle / description */
.pin-sub {
  font-size: 14px;
  opacity: .7;
  color: #fff;
  margin-bottom: 22px;
}

/* ─────────────────────────────── */
/* PIN INPUT (Custom) */
/* ─────────────────────────────── */
.pin-input-wrap {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* Individual PIN boxes */
.pin-box {
  width: 42px;
  height: 52px;
  background: rgba(255,255,255,0.12);
  border-radius: 12px;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
  outline: none;
  caret-color: transparent;
  backdrop-filter: blur(8px);

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

  transition: 
    transform .15s ease,
    background .2s ease,
    border .2s ease;
}

.pin-box:focus {
  transform: scale(1.08);
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.25);
}

/* Error shake */
@keyframes pinShake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.pin-error-animate .pin-box {
  animation: pinShake .3s ease;
}

/* Error message */
.pin-error {
  margin-top: 4px;
  font-size: 14px;
  color: #ff6b6b;
}

/* ─────────────────────────────── */
/* PIN BUTTON */
/* ─────────────────────────────── */
.pin-btn {
  margin-top: 18px;
  width: 100%;
  padding: 14px 0;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #7a4cff, #a07bff);
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;

  box-shadow: 0 4px 14px rgba(123, 76, 255, 0.35);
  transition: transform .15s ease, box-shadow .2s ease;
}

.pin-btn:active {
  transform: scale(.96);
  box-shadow: 0 2px 8px rgba(123, 76, 255, 0.25);
}

/* Main PIN input (Set PIN modal) */
.pin-input-main {
  width: 100%;
  padding: 14px 18px;
  font-size: 18px;
  border-radius: 14px;
  border: none;
  outline: none;
  color: #fff;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  margin-top: 16px;
  margin-bottom: 18px;
  text-align: center;

  /* Smooth UI */
  transition: all .25s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

.pin-input-main::placeholder {
  color: rgba(255,255,255,0.6);
  font-weight: 300;
}

/* Focus effect */
.pin-input-main:focus {
  background: rgba(255,255,255,0.18);
  box-shadow:
    inset 0 0 0 2px #9b6bff,
    0 0 12px rgba(155,107,255,0.45);
  transform: translateY(-1px);
}

/* PIN lock card improvements (optional) */
.pinlock-card {
  background: rgba(255,255,255,0.07);
  padding: 32px 26px;
  border-radius: 20px;
  width: 88%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  animation: popIn .28s ease;
  backdrop-filter: blur(16px);
}

/* Title */
.pin-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

/* Modern single PIN input box */
.pin-single-wrap {
  display: flex;
  justify-content: center;
  margin: 14px 0 8px;
}

.pin-single-box {
  width: 140px;
  padding: 14px 18px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  border-radius: 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  outline: none;
  color: white;
  letter-spacing: 8px;
  transition: 0.25s ease;
}

.pin-single-box:focus {
  background: rgba(255,255,255,0.16);
  border-color: #9e5bff;
  box-shadow: 0 0 12px rgba(158, 91, 255, .4);
}

/* Rules text */
.pin-rules {
  font-size: 13px;
  color: #ccc;
  margin-bottom: 12px;
}

/* Save button (disabled state) */
.pin-btn.disabled {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.45);
  cursor: not-allowed;
}

/* Make biometric toggle row look exactly like other settings items */
.settings-item.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 48px;              /* same as buttons */
  padding: 0 14px;           /* same spacing */
  border-radius: 12px;       /* same rounded edges */
  background: rgba(255,255,255,0.06);
  margin: 6px 0;
  cursor: pointer;

  font-size: 15px;           /* match text size */
  font-weight: 500;
}

/* Match the toggle itself */
.settings-item.toggle-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #7d5fff;     /* purple accent */
}

/* Fix label text alignment */
.settings-item.toggle-row span {
  display: flex;
  align-items: center;
}

/* Make normal settings items and the toggle row share the same base style */
.settings-item,
.settings-item.toggle-row {
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.95rem;
}

/* Keep the checkbox compact so it doesn't make the row look taller */
.settings-item.toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

.pin-input-wrap {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px 0;
}

.pin-box {
  width: 46px;
  height: 54px;
  font-size: 24px;
  text-align: center;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 700;
  outline: none;
  transition: border-color .2s, background .2s;
}

.pin-box:focus {
  border-color: #6fdd88;
  background: rgba(111,221,136,0.15);
}

.pin-btn.flat-btn {
  background: transparent;
  color: #ddd;
  margin-top: 10px;
  font-weight: 500;
}

.pin-btn.flat-btn:hover {
  opacity: 0.7;
}

/* ---------------------------
   PIN Confirm Overlay Fancy
----------------------------*/

/* Backdrop fade-in when confirm overlay opens */
#confirmPinOverlay {
  animation: pinBackFade 0.35s ease-out;
}

@keyframes pinBackFade {
  from { background: rgba(0,0,0,0); }
  to   { background: rgba(0,0,0,0.55); }
}

/* Card: slide up + soft bounce */
#confirmPinOverlay .pinlock-card {
  animation: pinSlideBounce 0.38s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes pinSlideBounce {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.95);
  }
  55% {
    opacity: 1;
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* PIN input styling inside confirm overlay */
#confirmPinOverlay .pin-single-wrap {
  margin: 18px 0 10px;
  display: flex;
  justify-content: center;
}

#confirmPinOverlay .pin-single-box {
  width: 110px;
  padding: 10px 0;
  text-align: center;
  font-size: 26px;
  letter-spacing: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: radial-gradient(circle at 0 0, rgba(99,102,241,0.25), transparent),
              rgba(15,15,30,0.85);
  color: #fff;
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease;
}

/* Focus + “bounce” feel on focus/typing */
#confirmPinOverlay .pin-single-box:focus {
  border-color: #4be37b;
  box-shadow: 0 0 0 1px rgba(75, 227, 123, 0.4),
              0 10px 30px rgba(0,0,0,0.55);
  transform: translateY(-1px) scale(1.03);
}

/* Rule / helper text */
#confirmPinOverlay .pin-rules {
  font-size: 13px;
  margin-bottom: 16px;
  color: #ccc;
}

/* When your JS sets it to success (green), it looks nice */
#confirmPinOverlay .pin-rules.success {
  color: #4be37b;
}

/* Primary confirm button */
#confirmPinOverlay .pin-btn {
  width: 100%;
  margin-top: 4px;
  border-radius: 999px;
  padding: 10px 0;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #4F46E5, #06B6D4);
  color: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,0.65);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    opacity 0.12s ease,
    background 0.2s ease;
}

#confirmPinOverlay .pin-btn.disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

/* tap feedback */
#confirmPinOverlay .pin-btn:not(.disabled):active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 6px 18px rgba(15,23,42,0.8);
}

/* Flat secondary button (Cancel) */
#confirmPinOverlay .flat-btn {
  margin-top: 10px;
  background: transparent;
  box-shadow: none;
  color: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.20);
}

#confirmPinOverlay .flat-btn:hover {
  background: rgba(255,255,255,0.04);
}

/* Confirm PIN card: slide + slight overshoot */
#confirmPinOverlay .pinlock-card {
  animation: pinConfirmIn 0.32s cubic-bezier(.2,.8,.2,1);
}

@keyframes pinConfirmIn {
  0% {
    transform: translateY(24px) scale(0.94);
    opacity: 0;
  }
  60% {
    transform: translateY(-4px) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Make sure the box can animate */
.pin-single-box {
  outline: none;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(15,15,30,0.9);
  padding: 10px 16px;
  font-size: 28px;
  text-align: center;
  letter-spacing: 6px;
  color: #fff;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

/* Bounce when you type */
.pin-single-box.pin-bounce {
  animation: pinBounce 0.2s ease-out;
}

@keyframes pinBounce {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(71, 232, 163, 0);
  }
  40% {
    transform: scale(1.08);
    box-shadow: 0 0 10px rgba(71, 232, 163, 0.65);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(71, 232, 163, 0);
  }
}

/* PIN bounce animation */
@keyframes pinBounce {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(72, 255, 164, 0.0);
  }
  40% {
    transform: scale(1.08) translateY(-1px);
    box-shadow: 0 0 14px rgba(72, 255, 164, 0.55);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(72, 255, 164, 0.0);
  }
}

/* class that actually plays the animation */
.pin-bounce {
  animation: pinBounce 0.22s ease-out;
}

/* make sure both styles can animate */
.pin-box,
.pin-single-box {
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Base style for ALL items in the user dropdown */
.user-menu-item {
  all: unset;                /* reset browser button styles */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;

  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  color: #f5f5f5;

  transition: background 0.18s ease, transform 0.12s ease;
}

.user-menu-item + .user-menu-item {
  margin-top: 4px;
}

/* Hover / active effects (applies equally to Settings & Logout) */
.user-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.user-menu-item:active {
  transform: translateY(0);
}

/* Only colour difference for Logout */
.user-menu-item.danger {
  color: #ff6b6b;
}

/* ================================
   SAVINGS / DEBTS SEARCH + FILTER
   ================================ */

/* Wrap both search + filter at top of each panel */
.list-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: nowrap;
}

/* Search pill */
.list-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  backdrop-filter: blur(16px);
}

.list-search-icon {
  font-size: 14px;
  opacity: 0.7;
}

.list-search input[type="text"],
.list-search input[type="search"] {
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  outline: none;
}

.list-search input::placeholder {
  color: rgba(255,255,255,0.45);
}

/* Category dropdown */
.list-filter {
  min-width: 120px;
  position: relative;
}

.list-filter select {
  width: 100%;
  padding: 8px 30px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    linear-gradient(135deg, rgba(107,70,193,0.4), rgba(159,122,234,0.5));
  color: #fff;
  font-size: 13px;
  appearance: none;
  outline: none;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,0.28);
}

/* Fake caret */
.list-filter::after {
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-52%);
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  pointer-events: none;
}

/* Hover / focus states */
.list-filter select:hover {
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.list-filter select:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 1px rgba(124,58,237,0.7);
}

/* Make sure mobile doesn’t squash them */
@media (max-width: 600px) {
  .list-toolbar {
    flex-wrap: wrap;
  }

  .list-search {
    min-width: 100%;
  }

  .list-filter {
    width: 100%;
  }
}


/* ================================
   MONTHLY BUDGET SECTION
   ================================ */

/* Wrap the whole budget area in a panel like others */
#budgetSection {
  margin-top: 20px;
}

/* Card look similar to your other .panel/.card */
.budget-card {
  margin-top: 10px;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: radial-gradient(circle at top left, rgba(139,92,246,0.35), rgba(17,24,39,0.95));
  border: 1px solid rgba(156,163,175,0.3);
  box-shadow: 0 18px 45px rgba(15,23,42,0.9);
  backdrop-filter: blur(18px);
}

/* Title row (e.g. “Monthly Budget”) */
.budget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.budget-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.budget-tagline {
  font-size: 12px;
  opacity: 0.65;
}

/* Grid of inputs */
.budget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  .budget-grid {
    grid-template-columns: minmax(0,1fr);
  }
}

.budget-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.budget-field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(209,213,219,0.85);
}

/* Inputs */
.budget-field input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: radial-gradient(circle at top left, rgba(31,41,55,0.9), rgba(17,24,39,0.95));
  color: #fff;
  font-size: 14px;
  outline: none;
  box-shadow: 0 8px 20px rgba(15,23,42,0.7);
}

.budget-field input[type="number"]::placeholder {
  color: rgba(156,163,175,0.6);
}

.budget-field input[type="number"]:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 1px rgba(139,92,246,0.6), 0 10px 25px rgba(15,23,42,0.9);
}

/* Summary strip (Planned savings / Left to spend) */
.budget-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.budget-chip {
  flex: 1;
  min-width: 150px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(16,185,129,0.24), rgba(5,150,105,0.05));
  border: 1px solid rgba(16,185,129,0.65);
  box-shadow: 0 12px 30px rgba(5,150,105,0.45);
}

.budget-chip.badge-warn {
  background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(234,179,8,0.06));
  border-color: rgba(234,179,8,0.85);
  box-shadow: 0 12px 30px rgba(161,98,7,0.55);
}

.budget-chip-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 4px;
}

.budget-chip-value {
  font-size: 16px;
  font-weight: 600;
}

/* Optional tiny indicator text */
.budget-chip-note {
  font-size: 11px;
  margin-top: 2px;
  opacity: 0.6;
}

/* Make the numbers “pop” when they change using your existing .bump class */
.budget-chip-value.bump {
  animation: bump 260ms ease-out;
}

/* If you don’t already have this keyframe: */
@keyframes bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06) translateY(-1px); }
  100% { transform: scale(1); }
}

/* --- SEARCH + FILTER WRAPPER --- */
.search-row {
  display: flex;
  gap: 10px;
  margin: 16px 0 14px;
  width: 100%;
}

@media (max-width: 540px) {
  .search-row {
    flex-direction: column;
    gap: 12px;
  }
}

/* --- BASE INPUT STYLE (Shared Search + Filter) --- */
.search-row input,
.search-row select {
  appearance: none;
  -webkit-appearance: none;

  width: 100%;
  padding: 12px 14px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);

  font-size: 15px;
  color: #fff;

  outline: none;
  transition: border .2s ease, background .2s ease, transform .12s ease;
}

/* --- Placeholder --- */
.search-row input::placeholder {
  color: rgba(255,255,255,0.55);
}

/* --- Focus Glow --- */
.search-row input:focus,
.search-row select:focus {
  border: 1px solid rgba(80,200,255,0.45);
  background: rgba(255,255,255,0.12);
  transform: scale(1.02);
}

/* --- CATEGORY DROPDOWN --- */
.search-row select {
  padding-right: 36px;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23ccc" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: right 12px center;
  cursor: pointer;
}

/* Dark option styling */
.search-row select option {
  background: #1b1d24;
  color: #fff;
}


/* --- Label (Optional) --- */
.filter-label {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: -6px;
}

/* Wrapper so search + dropdown sit nicely together */
.panel-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

/* Search box */
.filter-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 5, 25, 0.9);
  color: #f9f5ff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.filter-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.filter-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.6);
  background: rgba(15, 8, 40, 1);
}

/* CATEGORY SELECT (the “All categories” dropdown) */
.filter-select {
  min-width: 150px;
  padding: 8px 32px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(24, 16, 56, 0.96), rgba(16, 10, 40, 0.98));
  color: #f9f5ff;
  font-size: 13px;
  outline: none;
  cursor: pointer;

  /* remove native look */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  position: relative;
  line-height: 1.2;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.12s ease;
}

/* custom little arrow on the right using a gradient “chevron” */
.filter-select {
  background-image:
    linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(244, 114, 182, 0.9)), /* accent */
    linear-gradient(135deg, rgba(24, 16, 56, 0.96), rgba(16, 10, 40, 0.98));    /* base bg */;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* you can also add an SVG chevron if you prefer: 
   background-image: url("data:image/svg+xml,..."), linear-gradient(...);
*/

/* hover/focus states */
.filter-select:hover {
  border-color: rgba(148, 119, 255, 0.8);
  transform: translateY(-1px);
}

.filter-select:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.7);
}

/* make text not truncated on small screens */
@media (max-width: 480px) {
  .filter-select {
    min-width: 120px;
    font-size: 12px;
    padding-right: 28px;
  }
}

/* Wrapper so search + dropdown sit nicely together */
.panel-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

/* Search box */
.filter-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 5, 25, 0.9);
  color: #f9f5ff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.filter-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.filter-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.6);
  background: rgba(15, 8, 40, 1);
}

/* CATEGORY SELECT (the “All categories” dropdown) */
.filter-select {
  min-width: 150px;
  padding: 8px 32px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(24, 16, 56, 0.96), rgba(16, 10, 40, 0.98));
  color: #f9f5ff;
  font-size: 13px;
  outline: none;
  cursor: pointer;

  /* remove native look */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  position: relative;
  line-height: 1.2;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.12s ease;
}

/* custom little arrow on the right using a gradient “chevron” */
.filter-select {
  background-image:
    linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(244, 114, 182, 0.9)), /* accent */
    linear-gradient(135deg, rgba(24, 16, 56, 0.96), rgba(16, 10, 40, 0.98));    /* base bg */;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* you can also add an SVG chevron if you prefer: 
   background-image: url("data:image/svg+xml,..."), linear-gradient(...);
*/

/* hover/focus states */
.filter-select:hover {
  border-color: rgba(148, 119, 255, 0.8);
  transform: translateY(-1px);
}

.filter-select:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.7);
}

/* make text not truncated on small screens */
@media (max-width: 480px) {
  .filter-select {
    min-width: 120px;
    font-size: 12px;
    padding-right: 28px;
  }
}

/* Give the select itself your pill look */
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  border-radius: 999px;
  padding: 8px 32px 8px 14px;
  background: linear-gradient(135deg, #ff6bcb, #8b5cf6);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  position: relative;
}

/* Dark dropdown panel + white text (where supported) */
.filter-select option {
  background: #120824;
  color: #ffffff;
}

/* Row layout for settings toggles */
.settings-item.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

/* Label text */
.settings-item.toggle-row > span {
  font-size: 0.95rem;
  font-weight: 500;
  color: #e5e5f5;
}

/* Base toggle styling */
.settings-item.toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  cursor: pointer;
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    background 0.18s ease-out,
    border-color 0.18s ease-out,
    box-shadow 0.18s ease-out;
  flex-shrink: 0;
}

/* Knob */
.settings-item.toggle-row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

/* Checked state */
.settings-item.toggle-row input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #6b46c1, #9f7aea);
  border-color: rgba(185, 145, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(185, 145, 255, 0.55);
}

.settings-item.toggle-row input[type="checkbox"]:checked::before {
  transform: translateX(18px);
  box-shadow: 0 2px 8px rgba(108, 255, 197, 0.45);
}

/* Focus ring */
.settings-item.toggle-row input[type="checkbox"]:focus-visible {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 0 3px rgba(129, 230, 217, 0.6);
}

/* Optional: hover nudge */
.settings-item.toggle-row input[type="checkbox"]:hover::before {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Optional: disabled look (in case you ever disable them) */
.settings-item.toggle-row input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  box-shadow: none;
}

/* ===== Header tweaks + tour button ===== */
.subtitle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pill-link {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e3ddff;
}

.pill-link:hover {
  background: rgba(255,255,255,0.12);
}

@media (max-width: 700px) {
  .subtitle-row {
    justify-content: center;
    text-align: center;
  }
}

/* ===== Demo mode bits ===== */
.auth-demo-note {
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
  color: #cbc3ff;
}

.link-btn {
  background: none;
  border: none;
  padding: 0 2px;
  font: inherit;
  color: #a78bfa;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.link-btn:hover {
  opacity: 0.85;
}

.demo-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===== Budget help text ===== */
.budget-help {
  margin-top: 12px;
  font-size: 13px;
  color: #cec6ff;
  max-width: 480px;
}

/* ===== Guided tour overlay ===== */
.tour-overlay[hidden] {
  display: none !important;
}

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 10, 0.7);
  backdrop-filter: blur(6px);
}

.tour-card {
  position: relative;
  z-index: 1;
  width: min(480px, 92vw);
  padding: 22px 20px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background: radial-gradient(circle at top left, #3c2d7a 0, #150c26 50%, #0b0717 100%);
  box-shadow: 0 22px 60px rgba(0,0,0,0.7);
}

.tour-step-indicator {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #c0b0ff;
  margin-bottom: 6px;
}

.tour-card h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.tour-card p {
  margin: 0 0 14px;
  font-size: 14px;
  color: #ece7ff;
  line-height: 1.5;
}

.tour-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body.modal-open {
  overflow: hidden;
}

/* ================================
   Monthly budget – refreshed design
   ================================ */

#budgetSection {
  margin-top: 24px;
}

.budget-card {
  margin-top: 8px;
  padding: 18px 18px 16px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(139,92,246,0.45), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(56,189,248,0.25), transparent 55%),
    rgba(15,23,42,0.96);
  border: 1px solid rgba(148,163,184,0.45);
  box-shadow:
    0 20px 50px rgba(15,23,42,0.9),
    0 0 0 1px rgba(15,23,42,0.8) inset;
}

/* Header */

.budget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.budget-title-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.budget-icon {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 0 0, #a855f7, #4f46e5);
  font-size: 18px;
}

.budget-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.budget-tagline {
  font-size: 12px;
  opacity: 0.7;
}

/* Status pill */

.budget-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.5);
  background: rgba(15,23,42,0.7);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e5e7eb;
  cursor: default;
}

.budget-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,0.9);
}

.budget-status-pill.good {
  border-color: rgba(34,197,94,0.7);
  background: radial-gradient(circle at 0 0, rgba(34,197,94,0.35), rgba(15,23,42,0.9));
}
.budget-status-pill.good .budget-status-dot {
  background: #22c55e;
}

.budget-status-pill.warn {
  border-color: rgba(234,179,8,0.75);
  background: radial-gradient(circle at 0 0, rgba(234,179,8,0.3), rgba(15,23,42,0.9));
}
.budget-status-pill.warn .budget-status-dot {
  background: #eab308;
}

.budget-status-pill.bad {
  border-color: rgba(248,113,113,0.8);
  background: radial-gradient(circle at 0 0, rgba(248,113,113,0.3), rgba(15,23,42,0.9));
}
.budget-status-pill.bad .budget-status-dot {
  background: #f97373;
}

/* Layout */

.budget-body {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.budget-grid {
  flex: 2 1 220px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  .budget-body {
    flex-direction: column;
  }
  .budget-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fields */

.budget-field {
  position: relative;
  padding-top: 2px;
}

.budget-field::before {
  content: attr(data-icon);
  position: absolute;
  top: 1.2rem;
  right: 10px;
  font-size: 16px;
  opacity: 0.85;
}

.budget-field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(226,232,240,0.9);
}

.budget-hint {
  font-size: 11px;
  opacity: 0.6;
  margin: 0 0 4px;
}

.budget-field input[type="number"] {
  width: 100%;
  padding: 9px 30px 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.55);
  background: linear-gradient(135deg, rgba(15,23,42,0.9), rgba(30,64,175,0.9));
  color: #f9fafb;
  font-size: 14px;
  outline: none;
  box-shadow: 0 10px 30px rgba(15,23,42,0.9);
}

.budget-field input[type="number"]::placeholder {
  color: rgba(156,163,175,0.7);
}

.budget-field input[type="number"]:focus {
  border-color: #a855f7;
  box-shadow:
    0 0 0 1px rgba(168,85,247,0.7),
    0 12px 30px rgba(15,23,42,0.95);
}

/* Summary chips */

.budget-summary {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.budget-chip {
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(16,185,129,0.24), rgba(5,150,105,0.06));
  border: 1px solid rgba(16,185,129,0.7);
  box-shadow: 0 16px 40px rgba(5,150,105,0.55);
}

.budget-chip--spend {
  background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(37,99,235,0.06));
  border-color: rgba(59,130,246,0.85);
  box-shadow: 0 16px 40px rgba(17,24,39,0.8);
}

.budget-chip-title {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 4px;
}

.budget-chip-value {
  font-size: 18px;
  font-weight: 600;
}

.budget-chip-note {
  font-size: 11px;
  margin-top: 2px;
  opacity: 0.7;
}

/* Help text */

.budget-help {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(226,232,240,0.85);
}

.budget-help strong {
  font-weight: 600;
}

@media (max-width: 768px) {
  .budget-card {
    padding: 14px 12px 16px;
  }

  .budget-title {
    font-size: 14px;
  }

  .budget-tagline {
    font-size: 11px;
  }

  .budget-field input[type="number"] {
    padding: 10px 12px;
    font-size: 16px; /* avoids iOS zoom on tap */
  }

  .budget-chip-value {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .budget-card {
    padding: 18px 14px;
    border-radius: 18px;
  }

  .budget-field {
    margin-bottom: 14px;
  }

  .budget-summary .budget-chip {
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  .budget-help {
    font-size: 13px;
    line-height: 1.45;
    margin-top: 14px;
  }
}

.budget-field input {
  padding-right: 42px; /* make room for icons */
}

@media (max-width: 430px) {
  .budget-status-badge {
    font-size: 11px;
    padding: 6px 10px;
  }
}

#budgetSection .budget-card {
  max-width: 1200px;
  margin: 0 auto;
}

.budget-header-btn {
  position: absolute;
  top: 20px;
  right: 20px;
}

.budget-result-box {
  padding: 18px 20px;
}

.budget-field input {
  padding-right: 46px;
}

.budget-card:hover {
  transform: translateY(-2px);
  transition: 0.2s ease;
}

.card::before, 
.budget-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 60%);
  border-radius: inherit;
}

.card {
  box-shadow: 0 6px 16px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);
}

.animate-change {
  animation: pulseUp 0.4s ease;
}

@keyframes pulseUp {
  0% { transform: translateY(4px); opacity: 0.3; }
  100% { transform: translateY(0); opacity: 1; }
}

.app-header {
  backdrop-filter: blur(10px);
  background: rgba(30, 20, 60, 0.35);
}

/* --- Budget card container tweaks --- */
#budgetSection {
  margin-top: 20px;
}

.budget-card {
  margin-top: 10px;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: radial-gradient(circle at top left, rgba(139,92,246,0.35), rgba(17,24,39,0.95));
  border: 1px solid rgba(156,163,175,0.3);
  box-shadow: 0 18px 45px rgba(15,23,42,0.9);
  backdrop-filter: blur(18px);
  position: relative;
}

.budget-body {
  margin-top: 8px;
}

/* Mobile collapse toggle */
.budget-toggle {
  display: none; /* hidden on desktop */
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(15,23,42,0.75);
  color: #e5e7eb;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* Show the toggle + allow collapsing on mobile */
@media (max-width: 768px) {
  .budget-toggle {
    display: inline-flex;
  }

  .budget-card.budget-collapsed #budgetBody {
    display: none;
  }

  .budget-card.budget-collapsed {
    padding-bottom: 12px;
  }
}

/* --- "What changed this month?" card --- */
.month-summary-card {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(56,189,248,0.18),
    rgba(59,130,246,0.12)
  );
  border: 1px solid rgba(59,130,246,0.6);
  box-shadow: 0 14px 35px rgba(15,23,42,0.75);
}

.month-summary-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.85;
  margin-bottom: 6px;
}

.month-summary-empty {
  font-size: 13px;
  opacity: 0.8;
  margin: 0;
}

.month-summary-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 13px;
}

.month-summary-list li + li {
  margin-top: 2px;
}

/* ================================
   MONTHLY BUDGET SECTION – COMPLETE
   For the <section id="budgetSection"> you pasted
   ================================ */

#budgetSection {
  margin-top: 24px;
}

/* Card shell */
.budget-card {
  position: relative;
  margin-top: 8px;
  padding: 18px 18px 16px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(139,92,246,0.45), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(56,189,248,0.25), transparent 55%),
    rgba(15,23,42,0.96);
  border: 1px solid rgba(148,163,184,0.45);
  box-shadow:
    0 20px 50px rgba(15,23,42,0.9),
    0 0 0 1px rgba(15,23,42,0.8) inset;
  color: #e5e7eb;
}

/* Header row */
.budget-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.budget-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.budget-tagline {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 2px;
}

/* Status badge (desktop & mobile) */
.budget-status-badge {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(16,185,129,0.18);
  border: 1px solid rgba(16,185,129,0.5);
  font-size: 12px;
  color: #bbf7d0;
  white-space: nowrap;
}

/* Mobile collapse toggle */
.budget-toggle {
  display: none; /* shown on mobile only */
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.9);
  color: #e5e7eb;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* Body layout */
.budget-body {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* Left side: three inputs */
.budget-grid {
  flex: 2 1 260px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Column wrapper */
.budget-field {
  display: flex;
  flex-direction: column;
}

/* Label + helper text */
.budget-field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(226,232,240,0.9);
  margin-bottom: 4px;
}

.field-help {
  display: block;
  font-size: 12px;
  opacity: 0.75;
  margin-top: 4px;
  min-height: 16px; /* keep helper heights consistent */
}

/* 🔒 Three main inputs – identical height */
#budgetIncome,
#budgetBills,
#budgetExtraDebt {
  box-sizing: border-box;
  display: block;
  width: 100%;

  height: 44px;
  padding: 0 14px;

  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.7);
  background: radial-gradient(circle at top left,
              rgba(31,41,55,0.95),
              rgba(15,23,42,1));
  color: #f9fafb;
  font-size: 14px;

  outline: none;
  box-shadow: 0 8px 24px rgba(15,23,42,0.9);

  -webkit-appearance: none;
  -moz-appearance: textfield;
}

/* Remove number spinners */
#budgetIncome::-webkit-outer-spin-button,
#budgetIncome::-webkit-inner-spin-button,
#budgetBills::-webkit-outer-spin-button,
#budgetBills::-webkit-inner-spin-button,
#budgetExtraDebt::-webkit-outer-spin-button,
#budgetExtraDebt::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Focus state */
#budgetIncome:focus,
#budgetBills:focus,
#budgetExtraDebt:focus {
  border-color: #a855f7;
  box-shadow:
    0 0 0 1px rgba(168,85,247,0.8),
    0 12px 30px rgba(15,23,42,1);
}

/* Right side: summary chips */
.budget-summary {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.budget-chip {
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg,
              rgba(16,185,129,0.24),
              rgba(5,150,105,0.06));
  border: 1px solid rgba(16,185,129,0.7);
  box-shadow: 0 16px 40px rgba(5,150,105,0.55);
}

.budget-chip.badge-warn {
  background: linear-gradient(135deg,
              rgba(59,130,246,0.22),
              rgba(37,99,235,0.06));
  border-color: rgba(59,130,246,0.85);
  box-shadow: 0 16px 40px rgba(17,24,39,0.8);
}

.budget-chip-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.8;
  margin-bottom: 3px;
}

.budget-chip-value {
  font-size: 18px;
  font-weight: 600;
}

.budget-chip small {
  display: block;
  font-size: 11px;
  opacity: 0.75;
  margin-top: 3px;
}

/* "What changed this month?" card */
.month-summary-card {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(15,23,42,0.8);
  border: 1px solid rgba(148,163,184,0.5);
  box-shadow: none;
}

.month-summary-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.75;
  margin-bottom: 2px;
}

.month-summary-list {
  list-style: none;
  padding: 0;
  margin-top: 2px;
}

.month-summary-list li + li {
  margin-top: 1px;
}

/* Help text at bottom */
.budget-help {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(226,232,240,0.9);
}

/* ================================
   Responsive tweaks (mobile)
   ================================ */

@media (max-width: 900px) {
  .budget-body {
    flex-direction: column;
  }

  .budget-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .budget-summary {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .budget-summary .budget-chip {
    flex: 1 1 180px;
  }
}

@media (max-width: 768px) {
  .budget-card {
    padding: 16px 14px 14px;
  }

  .budget-header {
    align-items: flex-start;
  }

  .budget-status-badge {
    order: 2;
    margin-top: 4px;
  }

  .budget-toggle {
    display: inline-flex;
    order: 3;
    margin-left: auto;
    margin-top: 6px;
  }

  /* Collapsed state */
  .budget-card.budget-collapsed #budgetBody {
    display: none;
  }

  .budget-card.budget-collapsed {
    padding-bottom: 10px;
  }
}

/* Shake animation */
@keyframes pinShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.pin-error-shake {
  animation: pinShake 0.28s ease;
}

/* Red glow on each pin box */
.pin-box.wrong,
.pin-single-box.wrong {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.9) !important;
}

/* --- KPI strip redesign --- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.kpis .card {
  padding: 1.1rem 1.35rem;
  border-radius: 16px;
  background: radial-gradient(circle at top left, rgba(255,255,255,0.12), rgba(91,46,204,0.25));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
}

.kpis .card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 120% -10%, rgba(106,255,193,0.28), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
}

.kpis .k-title {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.kpis .k-icon {
  font-size: 1.1rem;
}

.kpis .k-value {
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 800;
  margin-top: 0.4rem;
}

.kpis .k-value.k-small {
  font-size: 1.9rem;
}

.kpis .k-sub {
  font-size: 0.9rem;
  margin-top: 0.25rem;
  opacity: 0.85;
}

.kpis .k-trend {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.kpis .k-trend.good {
  color: #5bdea2;
}

.kpis .k-trend.bad {
  color: #ff8686;
}

.kpis .k-trend.neutral {
  opacity: 0.7;
}

.kpi-compact {
  background: linear-gradient(135deg, rgba(46,26,120,0.9), rgba(91,46,204,0.95));
}

.kpi-compact .k-value {
  font-size: 1.9rem;
}

/* --- Deadline & time vs progress --- */
.deadline-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  margin-top: 0.35rem;
  gap: 0.5rem;
  opacity: 0.9;
}

.deadline-label {
  font-weight: 600;
}

.deadline-left {
  opacity: 0.8;
  font-size: 0.78rem;
}

.timeline {
  margin-top: 0.4rem;
}

.timeline-label {
  font-size: 0.78rem;
  opacity: 0.75;
  margin-bottom: 0.18rem;
}

.timeline-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.timeline-bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  overflow: hidden;
}

.timeline-bar span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
}

.timeline-bar.time span {
  background: linear-gradient(90deg, #ffb347, #ff7e67);
}

.timeline-bar.money span {
  background: linear-gradient(90deg, #5bdea2, #3ddcff);
}

.timeline-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  gap: 0.35rem;
  opacity: 0.88;
  flex-wrap: wrap;
}

.timeline-legend .timeline-status {
  font-weight: 600;
}

.timeline-legend.ontrack .timeline-status {
  color: #5bdea2;
}

.timeline-legend.behind .timeline-status {
  color: #ff8686;
}

/* Make deadline + timeline take the full width of the card */
.item .deadline-row,
.item .timeline {
  grid-column: 1 / -1;      /* full row in a CSS grid layout */
  margin-top: 4px;
}

/* Sparkline should also be on its own row */
.item canvas.spark {
  grid-column: 1 / -1;
  margin-top: 4px;
}

/* Keep quick actions in a nice row at the bottom */
.item .quick-actions {
  grid-column: 1 / -1;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.item .deadline-row {
  font-size: 0.85rem;
  opacity: 0.9;
  display: flex;
  justify-content: space-between;
}

.item .timeline {
  margin-top: 6px;
}

.item .timeline-bars {
  margin-top: 4px;
}

.item .timeline-legend {
  margin-top: 4px;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.app-icon {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}

.app-icon {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important; /* prevent shrinking */
}

.app-logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* always show the toggle, desktop + mobile */
.budget-toggle {
  display: inline-flex; /* show on desktop too */
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(15,23,42,0.75);
  color: #e5e7eb;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.budget-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Collapse the budget section whenever the card has .budget-collapsed */
.budget-card.budget-collapsed #budgetBody {
  display: none;
}

/* Base custom select styles already used by other dropdowns */
.custom-select {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.custom-select label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
}

.custom-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(15, 15, 30, 0.85);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 12px;
  font-size: 14px;
  color: #fff;
  outline: none;
  position: relative;
}

/* Optional: specific tweaks for the subscription frequency dropdown */
.subfreq-select select {
  /* you can tweak padding, font-size, etc. if you want it different */
}

/* Base modal layer (edit/add) */
#modalOverlay {
  z-index: 1000;
}
#modal {
  z-index: 1001;
}

/* Delete confirmation should float above the edit modal */
#deleteConfirmOverlay {
  position: fixed;        /* ensure it's on its own layer */
  inset: 0;               /* full screen */
  z-index: 2000 !important;
}

#deleteConfirmModal {
  z-index: 2001 !important;
}

/* Make sure all modal overlays have a baseline */
.modal-overlay {
  position: fixed;
  inset: 0;
}

/* Subscriptions edit modal – sit above normal edit modal */
#subModalOverlay {
  z-index: 1300;
}
#subModal {
  z-index: 1301;
}

/* Delete confirmation – must sit above EVERYTHING else */
#deleteConfirmOverlay {
  z-index: 2000 !important;  /* higher than subModalOverlay */
}

#deleteConfirmModal,
#deleteConfirmOverlay .modal {
  z-index: 2001 !important;  /* above its own overlay + all other modals */
}

/* ================================
   CREDIT SCORE DEMO PANEL
   ================================ */

/* Panel container */
#panel-credit {
  position: relative;
}

/* Header badge: demo score chip */
#panel-credit .badge#creditScoreBadge {
  background: linear-gradient(135deg, #35e38a, #15c772);
  color: #041017;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25);
}

/* Header icon tweak */
#panel-credit .header .k-icon {
  background: radial-gradient(circle at 0 0, #3b82f6 0, #6b21ff 38%, #111827 100%);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* Empty/demo state block */
#creditEmpty {
  text-align: center;
  padding: 18px 14px 20px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.09);
  background: radial-gradient(circle at top left,
    rgba(147, 197, 253, 0.08),
    rgba(30, 64, 175, 0.25),
    transparent 65%
  );
  margin-top: 10px;
}

#creditEmpty h3 {
  margin: 8px 0 4px;
  font-size: 1.05rem;
}

#creditEmpty p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

/* "How to improve" button inside empty state */
#creditEmpty .btn.secondary#btn-credit-tips {
  margin-top: 4px;
}

/* Tips list (when shown inline instead of drawer) */
#creditTipsList {
  margin: 14px 0 0;
  padding: 10px 14px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.3);
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
}

#creditTipsList li::before {
  content: "•";
  display: inline-block;
  margin-right: 6px;
  color: #22c55e;
}

/* ================================
   CREDIT BOOST DRAWER
   ================================ */

/* Reuse your .drawer-wrap / .drawer-panel base styles
   and just tweak the contents of this drawer
*/

#drawerCreditBoost .drawer-panel {
  max-width: 420px;
}

#drawerCreditBoost h2 {
  margin-bottom: 4px;
}

#drawerCreditBoost .drawer-sub {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: rgba(226, 232, 240, 0.9);
}

/* List of boost tips */
#drawerCreditBoost .boost-list {
  margin: 10px 0 16px;
  padding-left: 18px;
  list-style: disc;
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: rgba(226, 232, 240, 0.95);
}

#drawerCreditBoost .boost-list li {
  line-height: 1.4;
}

/* Drawer actions area (button row) */
#drawerCreditBoost .drawer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

/* ================================
   Small responsive touch
   ================================ */

@media (max-width: 768px) {
  #panel-credit .header {
    flex-wrap: wrap;
    gap: 8px;
  }

  #panel-credit .header .cta {
    margin-left: auto;
  }
}

/* ----- CREDIT DEMO CARD WRAPPER (unchanged-ish) ----- */
.credit-demo-card {
  margin-top: 24px;
  padding: 18px 20px 22px;
  border-radius: 20px;
  background: radial-gradient(circle at 0 0, #111827 0, #020617 45%, #020617 100%);
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.85),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
}

.credit-demo-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.credit-demo-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.credit-demo-subtitle {
  font-size: 12px;
  color: #9ca3af;
}

/* ----- GAUGE AREA ----- */
.credit-gauge {
  margin: 10px auto 0;
  max-width: 420px;
}

/* CONTAINER that shows the top half of the circle */

/* ----- NEEDLE ----- */
.credit-gauge-needle {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 145px;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(28deg); /* angle for a "Good" score */
  background: linear-gradient(to top, #e5e7eb, #f9fafb);
  box-shadow: 0 0 8px rgba(248, 250, 252, 0.7);
  z-index: 2;
}

/* LITTLE CIRCLE AT THE BOTTOM OF THE NEEDLE */

/* ----- TICKS / LABELS under gauge ----- */
.credit-gauge-scale {
  position: relative;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #9ca3af;
}

.credit-gauge-scale span {
  flex: 1;
  text-align: center;
}

/* SCORE TEXT + "BOOST" BUTTON ROW (keep whatever you already had) */
.credit-score-main {
  text-align: center;
  margin-top: 8px;
}

.credit-score-range {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.credit-score-label {
  font-size: 14px;
  margin-top: 2px;
  color: #4ade80;
  font-weight: 600;
}

.credit-boost-row {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.credit-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7));
}

.credit-badge--very-bad { background: rgba(127, 29, 29, 0.85); }
.credit-badge--bad      { background: rgba(180, 83, 9, 0.85); }
.credit-badge--fair     { background: rgba(161, 98, 7, 0.85); }
.credit-badge--good     { background: rgba(21, 128, 61, 0.85); }
.credit-badge--excellent{ background: rgba(22, 101, 52, 0.85); }

.credit-demo-footer {
  margin-top: 10px;
  font-size: 11px;
  color: #9ca3af;
  text-align: left;
}

/* Small tweak for narrow screens */
@media (max-width: 640px) {
  .credit-gauge {
    max-width: 100%;
  }
  .credit-gauge-arc {
    height: 170px;
  }
}

/* --- CREDIT PANEL CONTAINER ---------------------------------- */

#panel-credit {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#panel-credit .header {
  align-items: center;
}

/* small "Demo only" pill */
.credit-demo-pill {
  background: rgba(255, 255, 255, 0.06);
  color: #facc15;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- CARD ----------------------------------------------------- */

.credit-gauge-card {
  margin-top: 8px;
  padding: 18px 22px 20px;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #0f1f3a 0, #020617 55%, #020617 100%);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.65);
}

.credit-gauge-header {
  margin-bottom: 10px;
}

.credit-gauge-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e5e7eb;
}

.credit-gauge-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: #9ca3af;
}

/* --- CREDIT GAUGE CORE ---------------------------------------- */
/* --- CREDIT GAUGE CORE ---------------------------------------- */

.credit-gauge {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 420px;
  margin-inline: auto;
}

/* coloured semi-circle with 5 bands */
.credit-gauge-arc {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;                 /* width : height */
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background:
    linear-gradient(
      to right,
      /* Very Bad -> Excellent */
      #f97316 0%,
      #f97316 20%,
      #fbbf24 20%,
      #fbbf24 40%,
      #a3e635 40%,
      #a3e635 60%,
      #22c55e 60%,
      #22c55e 80%,
      #16a34a 80%,
      #16a34a 100%
    );
}

/* inner dark dome – makes it look like a gauge dial */
.credit-gauge-arc::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -32%;                 /* how “thick” the coloured band looks */
  transform: translateX(-50%);
  width: 140%;
  height: 140%;
  background: #020617;          /* match your app background */
  border-radius: 50%;
  box-shadow:
    0 -18px 40px rgba(0, 0, 0, 0.7),
    inset 0 10px 25px rgba(15, 23, 42, 0.8);
  z-index: 1;
}

/* Needle anchored at the bottom centre */
.credit-gauge-needle {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 75%;
  background: #f9fafb;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(35deg); /* ≈ “Good” band */
  z-index: 2;
  box-shadow: 0 0 4px rgba(15, 23, 42, 0.8);
}

/* round hub at the base of the needle */
.credit-gauge-needle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #ffffff 0, #d1d5db 50%, #4b5563 100%);
  box-shadow:
    0 0 0 3px rgba(15, 23, 42, 0.9),
    0 4px 10px rgba(0, 0, 0, 0.7);
}

/* scale labels under the gauge */
.credit-gauge-scale {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 6px;
  color: #9ca3af;
}

.credit-gauge-scale span {
  flex: 1;
  text-align: center;
}

.credit-gauge-score {
  margin-top: 8px;
  text-align: center;
}

.credit-gauge-range {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f9fafb;
}

.credit-gauge-rating {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: #22c55e;
}

/* --- TAGS & FOOTNOTE ------------------------------------------ */

.credit-gauge-tags {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.credit-gauge-tags .tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}

.credit-gauge-tags .tag.bad {
  background: rgba(248, 113, 113, 0.12);
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.35);
}

.credit-gauge-tags .tag.poor {
  background: rgba(251, 146, 60, 0.12);
  color: #fed7aa;
  border-color: rgba(251, 146, 60, 0.35);
}

.credit-gauge-tags .tag.fair {
  background: rgba(234, 179, 8, 0.12);
  color: #fef3c7;
  border-color: rgba(234, 179, 8, 0.35);
}

.credit-gauge-tags .tag.good {
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.35);
}

.credit-gauge-tags .tag.excellent {
  background: rgba(16, 185, 129, 0.12);
  color: #a7f3d0;
  border-color: rgba(16, 185, 129, 0.35);
}

.credit-gauge-note {
  margin-top: 12px;
  font-size: 12px;
  color: #9ca3af;
}

/* --- SMALL SCREEN TWEAKS -------------------------------------- */

@media (max-width: 640px) {
  .credit-gauge-card {
    padding-inline: 14px;
  }

  .credit-gauge-arc,
  .credit-gauge-scale {
    width: 100%;
  }

  .credit-gauge-range {
    font-size: 22px;
  }
}

/* Override: remove inner dome so colour bands are visible */
.credit-gauge-arc::after {
  content: none;
}

/* Inner dark dome – leave a coloured crescent around the edge */
.credit-gauge-arc::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60%;               /* how far the circle sits below the arc */
  transform: translateX(-50%);
  width: 120%;
  height: 120%;
  background: #020617;        /* match your app background */
  border-radius: 50%;
  box-shadow:
    0 -18px 40px rgba(0, 0, 0, 0.7),
    inset 0 10px 25px rgba(15, 23, 42, 0.8);
  z-index: 1;
}

/* Proper crescent color band */
.credit-gauge-arc {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background:
    linear-gradient(
      to right,
      #f97316 0%,
      #f97316 20%,
      #fbbf24 20%,
      #fbbf24 40%,
      #a3e635 40%,
      #a3e635 60%,
      #22c55e 60%,
      #22c55e 80%,
      #16a34a 80%,
      #16a34a 100%
    );
}

/* Dark dome cutting out inner area but covering side corners */
.credit-gauge-arc::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -110%;   /* Lower it more = smaller visible color arc */
  transform: translateX(-50%);
  width: 150%;    /* Wider so side corners are fully hidden */
  height: 150%;
  background: #020617;
  border-radius: 50%;
  box-shadow:
    0 -25px 45px rgba(0, 0, 0, 0.75),
    inset 0 12px 25px rgba(15, 23, 42, 0.9);
  z-index: 1;
}

/* --- CREDIT GAUGE CORE (animated demo) ------------------------ */

.credit-gauge {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 420px;
  margin-inline: auto;
}

/* coloured semi-circle with 5 vertical bands */
.credit-gauge-arc {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;                 /* width : height */
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background:
    linear-gradient(
      to right,
      /* Very Bad -> Excellent */
      #f97316 0%,
      #f97316 20%,
      #fbbf24 20%,
      #fbbf24 40%,
      #a3e635 40%,
      #a3e635 60%,
      #22c55e 60%,
      #22c55e 80%,
      #16a34a 80%,
      #16a34a 100%
    );
}

/* inner dark “dome” – makes the coloured band a crescent */
.credit-gauge-arc::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -110%;                 /* how “thick” the coloured band looks */
  transform: translateX(-50%);
  width: 140%;
  height: 140%;
  background: #020617;          /* match your dashboard background */
  border-radius: 50%;
  box-shadow:
    0 -18px 40px rgba(0, 0, 0, 0.7),
    inset 0 10px 25px rgba(15, 23, 42, 0.8);
  z-index: 1;
}

/* Needle anchored at the bottom centre */
.credit-gauge-needle {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 75%;
  background: #f9fafb;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(35deg); /* default ≈ “Good” band */
  z-index: 2;
  box-shadow: 0 0 4px rgba(15, 23, 42, 0.8);

  /* animation */
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* round hub at the base of the needle */
.credit-gauge-needle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #ffffff 0, #d1d5db 50%, #4b5563 100%);
  box-shadow:
    0 0 0 3px rgba(15, 23, 42, 0.9),
    0 4px 10px rgba(0, 0, 0, 0.7);
}

/* scale labels under the gauge */
.credit-gauge-scale {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 6px;
  color: #9ca3af;
}

.credit-gauge-scale span {
  flex: 1;
  text-align: center;
}

/* range + rating text */
.credit-gauge-score {
  margin-top: 8px;
  text-align: center;
}

.credit-gauge-range {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f9fafb;
}

.credit-gauge-rating {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: #22c55e;
  transition: color 0.25s ease;
}

/* rating colour variants (JS toggles these) */
.credit-gauge-rating--verybad   { color: #f97316; }
.credit-gauge-rating--bad       { color: #fbbf24; }
.credit-gauge-rating--fair      { color: #eab308; }
.credit-gauge-rating--good      { color: #22c55e; }
.credit-gauge-rating--excellent { color: #10b981; }

/* small-screen tweak */
@media (max-width: 640px) {
  .credit-gauge-range {
    font-size: 22px;
  }
}

/* --- SIMULATE CREDIT SCORE UI ------------------------------ */

.credit-sim-btn {
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: radial-gradient(circle at 0 0,
              rgba(15, 23, 42, 0.95),
              rgba(15, 23, 42, 0.8));
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.18s ease, transform 0.12s ease,
              box-shadow 0.18s ease, border-color 0.18s ease;
}

.credit-sim-btn::after {
  content: "▼";
  font-size: 9px;
  opacity: 0.7;
}

.credit-sim-btn.is-open::after {
  content: "▲";
}

.credit-sim-btn:hover {
  background: radial-gradient(circle at 0 0,
              rgba(30, 64, 175, 0.9),
              rgba(15, 23, 42, 0.9));
  border-color: rgba(96, 165, 250, 0.7);
  box-shadow: 0 0 0 1px rgba(30, 64, 175, 0.5);
  transform: translateY(-1px);
}

/* container with scenario chips */
.credit-sim-scenarios {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

/* each scenario chip */
.credit-sim-chip {
  width: 100%;
  text-align: left;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.1s ease, box-shadow 0.18s ease;
}

.credit-sim-chip:hover {
  background: rgba(30, 64, 175, 0.4);
  border-color: rgba(129, 140, 248, 0.7);
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.55);
  transform: translateY(-1px);
}

.credit-sim-chip.is-active {
  background: radial-gradient(circle at 0 0,
              rgba(16, 185, 129, 0.18),
              rgba(15, 23, 42, 0.95));
  border-color: rgba(34, 197, 94, 0.9);
  box-shadow:
    0 0 0 1px rgba(22, 163, 74, 0.65),
    0 5px 14px rgba(22, 163, 74, 0.35);
}

/* ================================
   CREDIT SCORE DEMO PANEL
   ================================ */

#panel-credit {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#panel-credit .header {
  align-items: center;
}

/* small "DEMO ONLY" pill */
.credit-demo-pill {
  background: rgba(255, 255, 255, 0.06);
  color: #facc15;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* header icon tweak */
#panel-credit .header .k-icon {
  background: radial-gradient(circle at 0 0, #3b82f6 0, #6b21ff 38%, #111827 100%);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* --- CARD ----------------------------------------------------- */

.credit-gauge-card {
  margin-top: 8px;
  padding: 18px 22px 22px;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #0f172a 0, #020617 55%, #020617 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.75);
  color: #e5e7eb;
}

.credit-gauge-header {
  margin-bottom: 10px;
}

.credit-gauge-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.credit-gauge-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: #9ca3af;
}

/* --- CREDIT GAUGE CORE ---------------------------------------- */

.credit-gauge {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 420px;
  margin-inline: auto;
}

/* coloured semi-circle bands */
.credit-gauge-arc {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background:
    linear-gradient(
      to right,
      #f97316 0%,   #f97316 20%,   /* very bad  */
      #fbbf24 20%,  #fbbf24 40%,   /* bad       */
      #a3e635 40%,  #a3e635 60%,   /* fair      */
      #22c55e 60%,  #22c55e 80%,   /* good      */
      #16a34a 80%,  #16a34a 100%   /* excellent */
    );
}

/* darker inner dome: creates crescent band */
.credit-gauge-arc::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -110%;
  transform: translateX(-50%);
  width: 140%;
  height: 140%;
  background: #020617;
  border-radius: 50%;
  box-shadow:
    0 -18px 40px rgba(0, 0, 0, 0.8),
    inset 0 10px 25px rgba(15, 23, 42, 0.9);
  z-index: 1;
}

/* highlight overlay for active band */
.credit-gauge-arc::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 0;
}

/* Very Bad band highlight (0–20%) */
.credit-gauge[data-band="verybad"] .credit-gauge-arc::before {
  opacity: 1;
  background:
    linear-gradient(to right,
      rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 20%,
      transparent 20%, transparent 100%);
}

/* Bad (20–40%) */
.credit-gauge[data-band="bad"] .credit-gauge-arc::before {
  opacity: 1;
  background:
    linear-gradient(to right,
      transparent 0%, transparent 20%,
      rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.2) 40%,
      transparent 40%, transparent 100%);
}

/* Fair (40–60%) */
.credit-gauge[data-band="fair"] .credit-gauge-arc::before {
  opacity: 1;
  background:
    linear-gradient(to right,
      transparent 0%, transparent 40%,
      rgba(255, 255, 255, 0.22) 40%, rgba(255, 255, 255, 0.22) 60%,
      transparent 60%, transparent 100%);
}

/* Good (60–80%) */
.credit-gauge[data-band="good"] .credit-gauge-arc::before {
  opacity: 1;
  background:
    linear-gradient(to right,
      transparent 0%, transparent 60%,
      rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0.2) 80%,
      transparent 80%, transparent 100%);
}

/* Excellent (80–100%) */
.credit-gauge[data-band="excellent"] .credit-gauge-arc::before {
  opacity: 1;
  background:
    linear-gradient(to right,
      transparent 0%, transparent 80%,
      rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.2) 100%);
}

/* Needle */
.credit-gauge-needle {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 75%;
  background: linear-gradient(to top, #e5e7eb, #f9fafb);
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(-90deg); /* start at far left */
  z-index: 2;
  box-shadow: 0 0 8px rgba(248, 250, 252, 0.7);
}

/* hub */
.credit-gauge-needle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #ffffff 0, #d1d5db 50%, #4b5563 100%);
  box-shadow:
    0 0 0 3px rgba(15, 23, 42, 0.9),
    0 4px 10px rgba(0, 0, 0, 0.7);
}

/* --- SCALE + SCORE TEXT --------------------------------------- */

.credit-gauge-scale {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 6px;
  color: #9ca3af;
}

/* subtle tick marks above numbers */
.credit-gauge-scale::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 4px;
  background:
    repeating-linear-gradient(
      to right,
      rgba(148, 163, 184, 0.45) 0 1px,
      transparent 1px calc(100% / 5)
    );
  opacity: 0.6;
  pointer-events: none;
}

.credit-gauge-scale span {
  flex: 1;
  text-align: center;
}

.credit-gauge-score {
  margin-top: 8px;
  text-align: center;
}

.credit-gauge-range {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f9fafb;
}

.credit-gauge-rating {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: #22c55e;
}

/* --- SIMULATION ROW & SCENARIOS ------------------------------- */

.credit-sim-row {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.credit-reset-link {
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 2px 4px;
}

.credit-reset-link:hover {
  color: #e5e7eb;
}

.credit-scenario-chip {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 5px 10px;
  font-size: 11px;
  background: radial-gradient(circle at 0 0, #020617, #020617);
  color: #e5e7eb;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.credit-scenario-chip .chip-title {
  font-weight: 500;
}

.credit-scenario-chip .chip-delta {
  opacity: 0.75;
}

.credit-scenario-chip:hover {
  border-color: rgba(52, 211, 153, 0.8);
  transform: translateY(-1px);
}

.credit-scenario-chip.is-active {
  background: radial-gradient(circle at 0 0, #10b981, #047857);
  color: #041017;
  border-color: rgba(16, 185, 129, 0.9);
}

/* --- TAGS & FOOTNOTE ------------------------------------------ */

.credit-gauge-tags {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.credit-gauge-tags .tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}

.credit-gauge-tags .tag.bad {
  background: rgba(248, 113, 113, 0.12);
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.35);
}

.credit-gauge-tags .tag.poor {
  background: rgba(251, 146, 60, 0.12);
  color: #fed7aa;
  border-color: rgba(251, 146, 60, 0.35);
}

.credit-gauge-tags .tag.fair {
  background: rgba(234, 179, 8, 0.12);
  color: #fef3c7;
  border-color: rgba(234, 179, 8, 0.35);
}

.credit-gauge-tags .tag.good {
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.35);
}

.credit-gauge-tags .tag.excellent {
  background: rgba(16, 185, 129, 0.12);
  color: #a7f3d0;
  border-color: rgba(16, 185, 129, 0.35);
}

.credit-gauge-note {
  margin-top: 12px;
  font-size: 12px;
  color: #9ca3af;
}

/* --- MOBILE POLISH -------------------------------------------- */

@media (max-width: 768px) {
  #panel-credit .header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .credit-gauge-card {
    padding-inline: 14px;
  }

  .credit-gauge {
    max-width: 100%;
  }

  .credit-gauge-range {
    font-size: 22px;
  }

  .credit-sim-row {
    flex-direction: column;
  }

  .credit-reset-link {
    font-size: 11px;
  }

  .credit-scenarios {
    justify-content: flex-start;
  }
}

/* smoothly fade/slide in */
.credit-scenarios.is-opening {
  opacity: 0;
  transform: translateY(-6px);
}

/* button "open" state */
#btnCreditSim.is-open {
  background: #7c3aed;
  color: white;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
}

/* when the browser sees `hidden` it should hide it */
[hidden] {
  display: none !important;
}

/* scenario container: hidden by default */
.credit-scenarios {
  margin-top: 10px;
  display: none;          /* start hidden */
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* visible state when JS adds the class */
.credit-scenarios.is-visible {
  display: flex;
}

/* Base layout (desktop/tablet) */
#panel-subs .sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Left text area (name + meta) */
#panel-subs .sub-main {
  min-width: 0;               /* allows wrapping instead of overflow */
}

#panel-subs .sub-meta {
  font-size: 12px;
  color: #9ca3af;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

#panel-subs .sub-next {
  white-space: nowrap;        /* stays as a phrase on larger screens */
}

/* Right-hand amount block */
#panel-subs .sub-amount-wrap {
  text-align: right;
}

/* Base subscription card layout (desktop/tablet) */
.sub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(8, 8, 20, 0.9);
}

.sub-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.sub-main {
  flex: 1;
  min-width: 0;           /* lets name/meta shrink instead of overlapping */
}

.sub-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub-meta {
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.75;
  white-space: normal;    /* allow wrapping */
}

.sub-amount {
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 8px;
}

.sub-menu {
  flex-shrink: 0;
  margin-left: 8px;
}

/* MOBILE: force the "next billing" line onto its own row */
@media (max-width: 768px) {
  .sub-card {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .sub-main {
    order: 1;
    min-width: 0;
  }

  .sub-amount {
    order: 2;
  }

  .sub-menu {
    order: 3;
  }

  .sub-meta {
    flex-basis: 100%;     /* full-width row under the title */
  }
}

/* === Subscriptions layout === */

.sub-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
}

/* Make sure the 3-dot menu is NOT absolutely positioned here */
.sub-card .more-btn,
.sub-card .sub-menu {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  margin-left: 8px;
}

/* Optional: keep amount + menu neatly aligned on the right */
.sub-amount {
  white-space: nowrap;
  font-weight: 600;
}

/* Round the large background panels */
.sections .panel {
  border-radius: 28px;
  overflow: hidden; /* ensures the top header area clips cleanly */
  background: rgba(10, 10, 20, 0.65); /* keeps the dark panel look */
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.sections .panel .header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.example-list .sub-row {
  background: rgba(30, 20, 50, 0.45);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.18s ease;
  backdrop-filter: blur(6px);
}

.example-list .sub-row:hover {
  background: rgba(40, 30, 70, 0.55);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.example-list .sub-row .more-btn {
  z-index: 3;
  position: relative;
}

/* =========================
   AUTH / LOGIN SCREEN
   ========================= */

.auth-wrap {
  position: fixed;
  inset: 0;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top left, rgba(148, 119, 255, 0.48), transparent 55%),
    radial-gradient(circle at bottom right, rgba(255, 102, 173, 0.35), transparent 55%),
    #050014;
  z-index: 40;
}

/* Subtle animated background “glow” */
.auth-wrap::before {
  content: "";
  position: absolute;
  inset: 10%;
  background:
    radial-gradient(circle at 0% 100%, rgba(91, 222, 162, 0.08), transparent 60%),
    radial-gradient(circle at 100% 0%, rgba(86, 105, 255, 0.10), transparent 55%);
  filter: blur(40px);
  opacity: 0.9;
  pointer-events: none;
}

/* Main card */
.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 26px 24px 22px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(185, 150, 255, 0.18), transparent 65%),
    radial-gradient(circle at bottom right, rgba(255, 140, 212, 0.16), transparent 55%),
    rgba(8, 5, 26, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(22px) saturate(130%);
  color: #fff;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  transform: translateY(4px);
  opacity: 0;
  animation: authCardIn 0.32s ease-out forwards;
}

/* Small “logo chip” at the top of card */
.auth-card::before {
  content: "Purple Horizon";
  position: absolute;
  top: 18px;
  right: 20px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff7ad9, #9f7bff);
  color: #0b031a;
  font-weight: 600;
}

/* Headings */
.auth-card h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 4px 0 4px;
}

.auth-card p#authHint {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(232, 225, 255, 0.75);
}

/* Fields */
.auth-card .field {
  margin-bottom: 14px;
}

.auth-card .field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
  color: rgba(239, 233, 255, 0.78);
}

.auth-card .field input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 12px;
  font-size: 14px;
  color: #f9f7ff;
  background: rgba(8, 5, 26, 0.85);
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    transform 0.09s ease;
}

.auth-card .field input::placeholder {
  color: rgba(206, 198, 255, 0.4);
}

.auth-card .field input:focus {
  border-color: rgba(142, 244, 186, 0.95);
  box-shadow: 0 0 0 1px rgba(142, 244, 186, 0.7),
              0 0 0 10px rgba(142, 244, 186, 0.18);
  background: rgba(5, 3, 20, 0.96);
  transform: translateY(-1px);
}

/* Buttons row */
.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

/* Primary/secondary buttons already exist; just enhance a bit */
.auth-card .btn {
  width: 100%;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.auth-card .btn.secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

.auth-card .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

/* “Demo mode” note */
.auth-demo-note {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(220, 214, 255, 0.7);
  text-align: center;
}

.auth-demo-note .link-btn {
  font-size: 12px;
}

/* Verify block styling (same card look) */
.verify-block {
  margin-top: 6px;
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  line-height: 1.5;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .auth-wrap {
    padding: 18px;
  }

  .auth-card {
    padding: 22px 18px 18px;
    border-radius: 20px;
  }
}

/* Entry animation */
@keyframes authCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== AUTH: MODERN + ANIMATED LOOK ===== */

.auth-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at top left, #7c4dff 0, #1b1036 38%, #050416 100%);
  overflow: hidden;
  z-index: 9999;
}

/* Animated gradient overlay */
.auth-wrap::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 220deg,
    rgba(124, 77, 255, 0.4),
    rgba(0, 230, 160, 0.35),
    rgba(120, 220, 255, 0.3),
    rgba(124, 77, 255, 0.4)
  );
  filter: blur(80px);
  opacity: 0.35;
  animation: authBgSpin 24s linear infinite;
}

/* Subtle noise overlay */
.auth-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='noStitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* Floating blobs (added in HTML below) */
.auth-orbit {
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.65;
  mix-blend-mode: screen;
  pointer-events: none;
}

.auth-orbit--purple {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, #a97cff, transparent 60%);
  top: 8%;
  left: 6%;
  animation: floatOrbit1 18s ease-in-out infinite;
}

.auth-orbit--teal {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, #3cf6c8, transparent 60%);
  bottom: 6%;
  right: 10%;
  animation: floatOrbit2 22s ease-in-out infinite;
}

/* AUTH CARD */
.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 26px 24px 22px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, rgba(120, 88, 255, 0.16), rgba(12, 8, 36, 0.9))
              border-box;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 24px 60px rgba(3, 2, 24, 0.85),
    0 0 0 1px rgba(160, 140, 255, 0.12);
  backdrop-filter: blur(26px) saturate(130%);
  color: #fff;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  animation: authCardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Glowy border highlight */
.auth-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(124, 77, 255, 0.6),
    rgba(0, 230, 160, 0.4),
    rgba(120, 220, 255, 0.4)
  );
  opacity: 0;
  z-index: -1;
  transition: opacity 0.26s ease;
}

.auth-card:hover::before {
  opacity: 0.6;
}

/* Header pill & title */
.auth-card h2 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.auth-card p#authHint {
  margin-bottom: 18px;
  font-size: 0.9rem;
  color: rgba(235, 235, 255, 0.78);
}

/* Optional chip above the title if you want:
   <div class="auth-pill">Purple Horizon</div> */
.auth-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(16, 10, 52, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(230, 230, 255, 0.82);
}

.auth-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle, #52ffa8, #00d68f);
  box-shadow: 0 0 10px rgba(82, 255, 168, 0.9);
}

/* Fields */
.auth-card .field {
  margin-bottom: 14px;
}

.auth-card .field label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(214, 209, 255, 0.68);
}

.auth-card .field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(5, 4, 18, 0.7);
  color: #fff;
  font-size: 0.92rem;
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    transform 0.12s ease;
}

.auth-card .field input::placeholder {
  color: rgba(210, 206, 255, 0.45);
}

.auth-card .field input:focus {
  border-color: rgba(120, 220, 255, 0.9);
  box-shadow:
    0 0 0 1px rgba(120, 220, 255, 0.8),
    0 0 18px rgba(80, 210, 255, 0.45);
  background: rgba(8, 5, 30, 0.95);
  transform: translateY(-1px);
}

/* Buttons on auth */
.auth-card .auth-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.auth-card .btn {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
}

.auth-card .btn:not(.secondary) {
  background-image: linear-gradient(135deg, #7c4dff, #00e0b8);
  border: none;
  color: #050414;
  font-weight: 600;
  box-shadow: 0 10px 28px rgba(22, 6, 70, 0.9);
  transform: translateY(0);
  transition:
    transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.15s ease,
    filter 0.2s ease;
}

.auth-card .btn:not(.secondary)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.36), transparent 55%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.auth-card .btn:not(.secondary):hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(22, 6, 70, 0.95);
  filter: brightness(1.03);
}

.auth-card .btn:not(.secondary):hover::after {
  opacity: 1;
}

.auth-card .btn:not(.secondary):active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 6px 16px rgba(12, 4, 40, 0.95);
}

/* Secondary button (mode toggle) */
.auth-card .btn.secondary {
  background: rgba(10, 7, 30, 0.9);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(235, 233, 255, 0.85);
  font-weight: 500;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.auth-card .btn.secondary:hover {
  background: rgba(20, 14, 55, 0.95);
  border-color: rgba(190, 180, 255, 0.55);
  box-shadow: 0 8px 22px rgba(4, 1, 20, 0.9);
  transform: translateY(-1px);
}

/* "Use demo data" row */
.auth-demo-note {
  margin-top: 16px;
  font-size: 0.82rem;
  text-align: center;
  color: rgba(225, 222, 255, 0.78);
}

.auth-demo-note .link-btn {
  border-radius: 999px;
  padding-inline: 4px;
}

.auth-demo-note .link-btn:hover {
  text-decoration: underline;
}

/* Make sure verification block feels consistent */
.verify-block {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(9, 232, 164, 0.07);
  border: 1px solid rgba(123, 255, 210, 0.3);
  color: rgba(213, 252, 235, 0.92);
  font-size: 0.86rem;
}

/* Small screens */
@media (max-width: 480px) {
  .auth-card {
    padding: 22px 18px 18px;
    border-radius: 20px;
  }
}

/* ===== Keyframes ===== */

@keyframes authBgSpin {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
  }
  50% {
    transform: translate3d(-3%, -2%, 0) rotate(180deg) scale(1.15);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1);
  }
}

@keyframes authCardIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    filter: blur(2px);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes floatOrbit1 {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(12px, 18px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes floatOrbit2 {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-16px, -10px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ========== MAIN APP REFRESH ========== */

/* Overall app background (behind everything) */
.viewport-scroll {
  background: radial-gradient(circle at top, #2b1c5c 0, #0b071c 40%, #040313 100%);
}

/* Page shell */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 16px 80px;
}

/* Header: tighten + add subtle glow */
.app-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 18px;
  background: linear-gradient(
      135deg,
      rgba(140, 111, 255, 0.16),
      rgba(17, 10, 52, 0.88)
    );
  border: 1px solid rgba(200, 182, 255, 0.22);
  box-shadow:
    0 18px 50px rgba(2, 0, 24, 0.9),
    0 0 0 1px rgba(80, 60, 160, 0.25);
  backdrop-filter: blur(22px) saturate(130%);
}

/* App logo */
.app-logo {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(144, 111, 255, 0.8);
}

/* Title + subtitle */
.app-header h1 {
  font-size: 1.25rem;
  margin: 0 0 2px;
}

.subtitle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.subtitle {
  font-size: 0.85rem;
  color: rgba(230, 227, 255, 0.78);
}

/* Guided tour pill */
.pill-link {
  border-radius: 999px;
  border: 1px solid rgba(214, 206, 255, 0.35);
  background: rgba(7, 4, 28, 0.9);
  padding: 4px 10px;
  font-size: 0.78rem;
  color: rgba(235, 233, 255, 0.92);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.14s ease,
    box-shadow 0.14s ease;
}

.pill-link:hover {
  background: rgba(22, 14, 62, 0.98);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7);
}

/* KPI row */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* KPI card base */
.kpis .card {
  position: relative;
  padding: 10px 12px 11px;
  border-radius: 18px;
  background: radial-gradient(circle at top left,
      rgba(124, 77, 255, 0.15),
      rgba(9, 6, 30, 0.96)
    );
  border: 1px solid rgba(210, 200, 255, 0.25);
  box-shadow:
    0 20px 52px rgba(0, 0, 30, 0.85),
    0 0 0 1px rgba(70, 50, 140, 0.45);
  backdrop-filter: blur(20px) saturate(130%);
  transition:
    transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
  overflow: hidden;
}

/* subtle edge glow */
.kpis .card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(144, 111, 255, 0.4),
    transparent,
    rgba(0, 224, 184, 0.4)
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.kpis .card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 24px 60px rgba(2, 0, 35, 0.95),
    0 0 0 1px rgba(130, 110, 255, 0.75);
  border-color: rgba(230, 225, 255, 0.6);
}

.kpis .card:hover::before {
  opacity: 0.7;
}

/* KPI text tweaks */
.k-title {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214, 209, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.k-icon {
  font-size: 1rem;
}

.k-value {
  font-size: 1.3rem;
  font-weight: 700;
}

.k-sub {
  font-size: 0.8rem;
  color: rgba(220, 218, 255, 0.8);
}

.k-trend {
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Two-column section wrapper */
.sections {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 14px;
  margin-top: 14px;
}

/* Stack on small screens */
@media (max-width: 900px) {
  .sections {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Each panel container */
.panel {
  border-radius: 22px;
  background: linear-gradient(
      145deg,
      rgba(28, 18, 70, 0.92),
      rgba(9, 6, 30, 0.98)
    );
  border: 1px solid rgba(210, 200, 255, 0.18);
  box-shadow:
    0 18px 46px rgba(0, 0, 30, 0.9),
    0 0 0 1px rgba(70, 50, 140, 0.4);
  padding: 14px 13px 12px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(22px) saturate(130%);
  transition:
    transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.2s ease;
}

/* top glossy sheen */
.panel::before {
  content: "";
  position: absolute;
  inset: -40% -60% auto;
  background: radial-gradient(
    circle at top,
    rgba(180, 164, 255, 0.18),
    transparent 55%
  );
  opacity: 0.6;
  pointer-events: none;
}

/* hover lift */
.panel:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 60px rgba(1, 0, 30, 0.95),
    0 0 0 1px rgba(140, 120, 255, 0.8);
  border-color: rgba(230, 225, 255, 0.45);
}

/* panel header row */
.panel .header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.panel .header h2 {
  font-size: 1rem;
  margin: 0;
}

.panel .badge {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(10, 200, 155, 0.12);
  color: rgba(179, 255, 226, 0.95);
  border: 1px solid rgba(74, 240, 187, 0.5);
}

.credit-demo-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(210, 210, 255, 0.4);
}

/* list toolbar (search + filter) */
.list-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.list-search {
  flex: 1;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(200, 190, 255, 0.26);
  background: rgba(5, 3, 22, 0.9);
  color: #fff;
  font-size: 0.85rem;
}

.filter-select {
  min-width: 120px;
  border-radius: 999px;
  border: 1px solid rgba(200, 190, 255, 0.26);
  background: rgba(5, 3, 22, 0.9);
  color: #fff;
  font-size: 0.82rem;
  padding: 8px 9px;
}

/* Empty states */
.empty {
  border-radius: 18px;
  padding: 18px 14px;
  background: rgba(6, 4, 26, 0.92);
  border: 1px dashed rgba(200, 190, 255, 0.35);
  text-align: center;
  color: rgba(225, 222, 255, 0.86);
}

.example-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Goals / Debts rows */
.example-list .item {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "left amount"
    "meta meta";
  align-items: center;
  gap: 4px 10px;
  padding: 10px 11px;
  border-radius: 16px;
  background: rgba(19, 10, 50, 0.9);
  border: 1px solid rgba(215, 207, 255, 0.16);
  box-shadow: 0 10px 26px rgba(0, 0, 30, 0.8);
  backdrop-filter: blur(10px);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
  position: relative;
  overflow: hidden;
}

.example-list .item:hover {
  background: rgba(28, 18, 76, 0.98);
  border-color: rgba(240, 236, 255, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
}

/* subtle light streak on hover */
.example-list .item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 35%,
    transparent 70%
  );
  transform: translateX(-120%);
  pointer-events: none;
}

.example-list .item:hover::before {
  animation: cardSweep 0.8s ease-out;
}

@keyframes cardSweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(40%); }
}

.example-list .item .left {
  grid-area: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

.example-list .item .dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(150, 120, 255, 0.95), rgba(20, 12, 60, 1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(140, 110, 255, 0.9);
}

.example-list .item .name {
  font-size: 0.9rem;
  font-weight: 500;
}

.example-list .item .amount {
  grid-area: amount;
  font-size: 0.95rem;
  font-weight: 600;
}

.example-list .item .meta {
  grid-area: meta;
  font-size: 0.78rem;
  color: rgba(220, 215, 255, 0.82);
}

/* Progress bar: slimmer + rounded */
.progress-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(18, 10, 46, 0.9);
  overflow: hidden;
  margin-top: 4px;
}

.progress-bar .progress {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #52ffa8, #75f0ff);
  transition: width 0.25s ease;
}

/* Budget section hero */
.budget-card {
  margin-top: 4px;
  border-radius: 22px;
  background: radial-gradient(circle at top left,
      rgba(124, 77, 255, 0.22),
      rgba(7, 4, 24, 0.98)
    );
  border: 1px solid rgba(230, 220, 255, 0.32);
  padding: 14px 14px 12px;
  box-shadow:
    0 20px 56px rgba(1, 0, 25, 0.92),
    0 0 0 1px rgba(110, 90, 210, 0.7);
  backdrop-filter: blur(22px) saturate(130%);
}

/* Credit score card already looks good;
   give it a bit more radius + glow to match */
.credit-gauge-card {
  border-radius: 20px;
  border: 1px solid rgba(220, 210, 255, 0.28);
  background: radial-gradient(circle at top,
      rgba(15, 239, 185, 0.07),
      rgba(10, 6, 35, 0.98)
    );
  box-shadow:
    0 18px 48px rgba(1, 0, 24, 0.9),
    0 0 0 1px rgba(80, 120, 210, 0.5);
}

/* Bottom tab bar: floating dock */
#tabBar {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(6, 3, 26, 0.94);
  border: 1px solid rgba(185, 178, 255, 0.45);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(90, 70, 185, 0.7);
  backdrop-filter: blur(20px) saturate(140%);
  z-index: 999;
}

/* Tab buttons */
#tabBar .tab {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  border: none;
  background: transparent;
  color: rgba(220, 215, 255, 0.82);
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.14s ease;
}

#tabBar .tab .icon {
  font-size: 1rem;
}

/* Active tab */
#tabBar .tab.active {
  background: radial-gradient(circle, #7c4dff, #3cf6c8);
  color: #050414;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.7);
  transform: translateY(-1px);
}

#tabBar .tab:not(.active):hover {
  background: rgba(18, 10, 60, 0.95);
}

/* ========== SETTINGS DRAWER ========== */

#settingsPanel {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  pointer-events: none;
}

#settingsPanel[hidden] {
  display: none;
}

#settingsPanel .settings-backdrop {
  flex: 1;
  background: radial-gradient(circle at top, rgba(12, 8, 35, 0.1), rgba(0, 0, 0, 0.85));
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: auto;
}

#settingsPanel.open .settings-backdrop {
  opacity: 1;
}

#settingsPanel .settings-drawer {
  width: min(380px, 100%);
  background: linear-gradient(
      145deg,
      rgba(23, 14, 60, 0.97),
      rgba(5, 3, 20, 0.98)
    );
  border-left: 1px solid rgba(210, 202, 255, 0.35);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(26px) saturate(135%);
  padding: 16px 18px 18px;
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.24s ease;
  pointer-events: auto;
}

#settingsPanel.open .settings-drawer {
  transform: translateX(0);
  opacity: 1;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.settings-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.close-settings {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(210, 200, 255, 0.4);
  background: rgba(7, 4, 30, 0.9);
  color: #f7f4ff;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.18s ease,
    transform 0.14s ease,
    box-shadow 0.18s ease;
}

.close-settings:hover {
  background: rgba(24, 15, 70, 0.98);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.75);
}

.settings-body {
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  padding-right: 4px;
}

.settings-body h3 {
  margin: 12px 0 6px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(206, 199, 255, 0.8);
}

/* Settings rows */
.settings-item {
  width: 100%;
  text-align: left;
  border-radius: 14px;
  padding: 9px 11px;
  margin-top: 4px;
  font-size: 0.88rem;
  background: rgba(9, 5, 32, 0.95);
  border: 1px solid rgba(190, 180, 255, 0.25);
  color: rgba(237, 234, 255, 0.94);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.14s ease,
    box-shadow 0.18s ease;
}

.settings-item:hover {
  background: rgba(22, 14, 72, 0.98);
  border-color: rgba(230, 226, 255, 0.75);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.85);
}

.settings-item.danger {
  border-color: rgba(255, 115, 140, 0.6);
  color: #ffd8e0;
}

.settings-item.danger:hover {
  background: rgba(90, 12, 36, 0.95);
  border-color: rgba(255, 150, 170, 0.9);
}

/* Toggle style inside settings item */
.settings-item.toggle-row {
  justify-content: space-between;
}

.settings-item.toggle-row input[type="checkbox"] {
  width: 38px;
  height: 20px;
  border-radius: 999px;
  appearance: none;
  background: rgba(44, 32, 90, 0.9);
  border: 1px solid rgba(200, 190, 255, 0.6);
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.settings-item.toggle-row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: inherit;
  background: #f7f3ff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.58);
  transition: transform 0.18s ease;
}

.settings-item.toggle-row input[type="checkbox"]:checked {
  background: linear-gradient(90deg, #38f1a0, #6ff0ff);
  border-color: rgba(164, 255, 225, 0.9);
}

.settings-item.toggle-row input[type="checkbox"]:checked::before {
  transform: translateX(16px);
}

/* ========== SLIDE-UP DRAWERS (BOTTOM SHEETS) ========== */

.drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 998;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.drawer-wrap[hidden] {
  display: none;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(20, 14, 60, 0.25), rgba(0, 0, 0, 0.9));
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.24s ease;
  pointer-events: auto;
}

.drawer-panel {
  position: relative;
  width: min(520px, 100%);
  margin: 0 auto 8px;
  border-radius: 20px 20px 18px 18px;
  background: linear-gradient(
      145deg,
      rgba(22, 12, 66, 0.98),
      rgba(5, 3, 20, 0.99)
    );
  border: 1px solid rgba(215, 206, 255, 0.45);
  box-shadow:
    0 -10px 40px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(110, 90, 220, 0.7);
  padding: 14px 15px 13px;
  transform: translateY(110%);
  opacity: 0;
  backdrop-filter: blur(20px) saturate(135%);
  transition:
    transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28),
    opacity 0.24s ease;
  pointer-events: auto;
}

/* Open state toggled by JS adding .open */
.drawer-wrap.open .drawer-backdrop {
  opacity: 1;
}

.drawer-wrap.open .drawer-panel {
  transform: translateY(0);
  opacity: 1;
}

/* Drawer header */
.drawer-panel h2 {
  margin-top: 4px;
  margin-bottom: 6px;
  font-size: 1rem;
}

.drawer-sub {
  margin: 0 0 10px;
  font-size: 0.83rem;
  color: rgba(215, 210, 255, 0.75);
}

/* Drawer actions row */
.drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* ========== TRANSACTION POPUP (Add / Remove contribution/payment) ========== */

.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 997;
  background: radial-gradient(circle at top, rgba(18, 10, 54, 0.18), rgba(0, 0, 0, 0.92));
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.popup-overlay[hidden] {
  display: none;
}

.popup-card {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 110%);
  width: min(430px, 92vw);
  border-radius: 18px;
  background: linear-gradient(
      145deg,
      rgba(26, 16, 70, 0.98),
      rgba(5, 3, 22, 0.99)
    );
  border: 1px solid rgba(215, 208, 255, 0.45);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(110, 90, 220, 0.75);
  padding: 12px 13px 11px;
  z-index: 998;
  backdrop-filter: blur(18px) saturate(135%);
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.22, 0.9, 0.35, 1.3),
    opacity 0.22s ease;
}

.popup-card[hidden] {
  display: none;
}

.popup-card.open {
  transform: translate(-50%, 0);
  opacity: 1;
}

.popup-card h3 {
  margin-top: 2px;
  margin-bottom: 8px;
  font-size: 0.97rem;
}

.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* Show overlay when popup visible (JS already toggles hidden/open) */
#txnOverlay:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

/* ========== GUIDED TOUR OVERLAY ========== */

#tourOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#tourOverlay[hidden] {
  display: none;
}

#tourOverlay .tour-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(30, 20, 80, 0.26), rgba(0, 0, 0, 0.93));
  backdrop-filter: blur(14px);
}

/* Tour card: floating bottom sheet */
.tour-card {
  position: relative;
  width: min(480px, 94vw);
  margin-bottom: 10px;
  border-radius: 20px;
  background: linear-gradient(
      145deg,
      rgba(28, 18, 76, 0.98),
      rgba(7, 4, 26, 0.99)
    );
  border: 1px solid rgba(227, 220, 255, 0.55);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.96),
    0 0 0 1px rgba(120, 100, 240, 0.8);
  padding: 14px 15px 13px;
  backdrop-filter: blur(22px) saturate(140%);
  animation: tourCardIn 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.3);
}

@keyframes tourCardIn {
  from {
    transform: translateY(18px) scale(0.97);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.tour-step-indicator {
  font-size: 0.8rem;
  color: rgba(215, 209, 255, 0.8);
  margin-bottom: 4px;
}

#tourTitle {
  font-size: 1rem;
  margin: 0 0 6px;
}

#tourBody {
  font-size: 0.86rem;
  color: rgba(231, 228, 255, 0.9);
  margin: 0 0 12px;
}

.tour-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Optional: small pulse on the Next button */
#tourNext {
  position: relative;
}

#tourNext::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(180, 255, 230, 0.0);
  pointer-events: none;
  animation: tourNextGlow 1.4s ease-out infinite;
}

@keyframes tourNextGlow {
  0%   { border-color: rgba(180, 255, 230, 0.0); }
  25%  { border-color: rgba(180, 255, 230, 0.7); }
  100% { border-color: rgba(180, 255, 230, 0.0); }
}

/* ========== NO ACCOUNT POPUP ========== */

#noAccountPopup.popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  background: radial-gradient(circle at top, rgba(26, 16, 70, 0.22), rgba(0, 0, 0, 0.92));
  backdrop-filter: blur(14px);
}

#noAccountPopup[hidden] {
  display: none;
}

#noAccountPopup .popup-inner {
  width: min(360px, 90vw);
  border-radius: 18px;
  background: linear-gradient(
      145deg,
      rgba(24, 14, 64, 0.98),
      rgba(5, 3, 20, 0.99)
    );
  border: 1px solid rgba(220, 212, 255, 0.5);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.96),
    0 0 0 1px rgba(110, 86, 220, 0.7);
  padding: 14px 15px 12px;
  text-align: left;
}

#noAccountPopup h3 {
  margin: 0 0 6px;
  font-size: 0.96rem;
}

#noAccountPopup p {
  margin: 0 0 10px;
  font-size: 0.86rem;
  color: rgba(225, 220, 255, 0.9);
}

/* CENTER GUIDED TOUR */
#tourOverlay {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tour-card {
  max-width: 420px;
  width: 90%;
  margin: 0 auto;
  position: relative;
  transform: translateY(0);
}

/* Keep everything readable on small phones */
@media (max-height: 600px) {
  .tour-card {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* MOBILE FIX: TAB BAR ALWAYS ABOVE SAFE AREA */
#tabBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  padding-bottom: env(safe-area-inset-bottom, 8px);
}

/* Ensure main content doesn't hide under nav */
.viewport-scroll {
  padding-bottom: calc(70px + env(safe-area-inset-bottom, 8px));
}

/* HISTORY FIX: SCROLL WITHIN PANEL */
#drawerHistory .drawer-panel {
  max-height: 90vh;
  overflow-y: auto;
}

#historyList {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}

/* CENTER CONTRIBUTION/REMOVE POPUPS */
#txnOverlay,
#deleteConfirmOverlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

#txnPopup,
#deleteConfirmModal {
  margin: 0;
  top: auto;
  left: auto;
  transform: none;
  max-height: 90vh;
  overflow-y: auto;
  width: 90%;
  max-width: 360px;
}

@media (max-width: 780px) {
  .page {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* CENTER SUBSCRIPTIONS MODAL ON MOBILE */
@media (max-width: 768px) {

  #subModalOverlay {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  #subModal {
    margin: 0;
    top: auto;
    left: auto;
    transform: none;
    max-height: 90vh;
    width: 90%;
    max-width: 360px;
    overflow-y: auto;
    border-radius: 18px;
  }
}

/* --- Bottom tab bar visibility control --- */

/* Desktop/tablets — hide tab bar */
@media (min-width: 769px) {
  #tabBar {
    display: none !important;
  }
}

/* Mobile only — show tab bar and make sure it sticks at bottom */
@media (max-width: 768px) {
  #tabBar {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    align-items: center;
    justify-content: space-around;
    z-index: 9999;
    background: rgba(10, 7, 20, 0.95);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,.08);
  }

  body {
    padding-bottom: 70px; /* prevents content being hidden under tab bar */
  }
}

#tabBar .tab.active {
  backdrop-filter: brightness(1.2);
  border-radius: 14px;
  padding: 4px 10px;
}

/* Make history drawer content scroll safely */
#drawerHistory .drawer-panel {
  max-height: 80vh; /* never exceed screen height */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* History list specifically scrolls */
#historyList {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px; /* room for scrollbar */
}

/* Ensure nice scrollbars if supported */
#historyList::-webkit-scrollbar {
  width: 6px;
}

#historyList::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
}

/* Centered modal style for History */
#drawerHistory {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

#drawerHistory .drawer-backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(5, 0, 20, 0.75);
  backdrop-filter: blur(6px);
}

#drawerHistory .drawer-panel {
  position: relative;
  width: 90%;
  max-width: 420px;
  max-height: 80vh;
  background: #0c081a;
  border-radius: 18px;
  padding: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  animation: fadeInScale 0.22s ease-out;
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

/* Scroll area inside */
#historyList {
  flex: 1;
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 6px;
}

#historyList::-webkit-scrollbar {
  width: 6px;
}

#historyList::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 3px;
}

/* Make buttons always visible */
#drawerHistory .drawer-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(12, 8, 26, 0.85);
}

/* Center modal for Ways to Boost */
#drawerCreditBoost {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 0, 20, 0.7);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
}

/* Modal card */
#drawerCreditBoost .drawer-panel {
  position: relative;
  width: 90%;
  max-width: 420px;
  max-height: 80vh;
  background: #0c081a;
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeInCenter 0.25s ease-out;
}

@keyframes fadeInCenter {
  from { opacity: 0; transform: scale(0.93); }
  to { opacity: 1; transform: scale(1); }
}

/* Scrollable boost items */
#drawerCreditBoost .boost-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
  margin-top: 14px;
}

#drawerCreditBoost .boost-list::-webkit-scrollbar {
  width: 6px;
}

#drawerCreditBoost .boost-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 3px;
}

/* Buttons: fixed inside panel */
#drawerCreditBoost .drawer-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(12, 8, 26, 0.85);
}

#drawerCreditBoost .boost-list {
  margin: 0;
  padding-left: 1.1rem; /* keep bullets aligned nicely */
}

#drawerCreditBoost .boost-list li {
  margin: 4px 0 !important;  /* drastically reduce gap */
  padding: 0 !important;
  line-height: 1.25 !important;
}

/* Tighter spacing for Credit Boost tips */
#drawerCreditBoost ul.boost-list {
  margin: 12px 0 0 !important;
  padding-left: 1.2rem !important;
  list-style-position: outside;
  display: flex;
  flex-direction: column;
  gap: 6px;               /* controls the distance between bullets */
}

#drawerCreditBoost ul.boost-list li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}

/* In case the list items have paragraphs inside them */
#drawerCreditBoost ul.boost-list li > * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}

/* Center the contribution / payment popup */
#txnOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 900;
}

#txnPopup.popup-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 92vw);  /* nice on desktop & mobile */
  max-height: 80vh;
  overflow-y: auto;
  z-index: 901;
}

/* small-screen tweak if you want it a bit wider on phones */
@media (max-width: 600px) {
  #txnPopup.popup-card {
    width: 94vw;
  }
}

/* Remove old background glow stripes */
.bg-glow,
.bg-strip,
.bg-overlay {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

/* Polished continuous gradient glow */
body {
  background: radial-gradient(150% 150% at 50% -20%, rgba(162, 78, 255, 0.25), transparent),
              radial-gradient(120% 120% at -30% 80%, rgba(0, 255, 200, 0.12), transparent),
              #0d071b;
  background-attachment: fixed;
  background-size: cover;
}

/* Remove strip artifacts */
.bg-strip, .bg-overlay {
  display: none !important;
}