/* ============================================================
   AI Money — shared design system (tokens mirror useaimoney.co.uk)
   ============================================================ */
:root{
  --bg:#020617;
  --bg-alt:#0f172a;
  --panel:#1e293b;
  --panel-line:rgba(255,255,255,0.08);
  --cyan:#38bdf8;
  --cyan-2:#4fd8e8;
  --blue:#2563eb;
  --deep-blue:#1e3a8a;
  --green:#34d399;
  --red:#f87171;
  --amber:#fbbf24;
  --text:#f8fafc;
  --muted:#94a3b8;
  --muted-dim:#64748b;
  --mono:'IBM Plex Mono', monospace;
  --sans:'Inter', sans-serif;
  --display:'Space Grotesk', sans-serif;
  --radius:14px;
  --radius-lg:24px;
  --nav-h:76px;
  --tab-h:64px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
/* lock horizontal overflow at BOTH levels — body-only does not stop html scroll on mobile.
   NB: `clip` would kill vertical scrolling entirely; `hidden` clips while staying scrollable. */
html, body{overflow-x:hidden;}
canvas, svg, img, video{max-width:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
img{max-width:100%;}
::selection{background:var(--cyan); color:#04121c;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:4px;}

/* ---------- scrollbars: slim, dark, on-brand (Chromium + Firefox) ---------- */
*{scrollbar-width:thin; scrollbar-color:rgba(148,163,184,0.32) transparent;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,0.28); border-radius:99px;
  border:2px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background-color:rgba(56,189,248,0.55);}
::-webkit-scrollbar-corner{background:transparent;}

/* ---------- ambient backdrop ---------- */
.grid-field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(120,180,220,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,180,220,0.05) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}
.glow-a{position:fixed; top:-200px; right:-120px; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,214,0.28), transparent 65%); filter:blur(10px); z-index:0; pointer-events:none;
  animation:float-glow-a 15s ease-in-out infinite alternate;}
.glow-b{position:fixed; bottom:-260px; left:-200px; width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(79,216,232,0.10), transparent 65%); filter:blur(10px); z-index:0; pointer-events:none;
  animation:float-glow-b 18s ease-in-out infinite alternate;}
@keyframes float-glow-a{0%{transform:translate(0,0);}100%{transform:translate(-40px,60px);}}
@keyframes float-glow-b{0%{transform:translate(0,0);}100%{transform:translate(60px,-40px);}}

.wrap{width:100%; max-width:1220px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }
.table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* ---------- buttons ---------- */
.btn-primary{
  background:var(--blue); color:#fff; font-weight:600; font-size:0.98rem;
  padding:14px 28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 15px rgba(37,99,235,0.3);
  transition:all .2s;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 25px rgba(37,99,235,0.4); background:#1d4ed8;}
.btn-primary:active{transform:translateY(0);}
.btn-primary:disabled{opacity:.55; cursor:not-allowed; transform:none;}
.btn-ghost{
  background:none; border:none; color:var(--text); font-size:0.98rem; font-weight:500;
  display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid var(--panel-line); padding:0 0 3px;
  transition:border-color .2s, color .2s;
}
.btn-ghost:hover{border-color:var(--cyan); color:var(--cyan);}
.btn-cyan{
  background:rgba(79,216,232,0.1); border:1px solid rgba(79,216,232,0.4); color:var(--cyan);
  font-weight:600; font-size:0.9rem; padding:12px 20px; border-radius:10px; transition:background .2s, border-color .2s;
}
.btn-cyan:hover{background:rgba(79,216,232,0.18); border-color:var(--cyan);}
.btn-danger{
  background:rgba(248,113,113,0.08); border:1px solid rgba(248,113,113,0.35); color:var(--red);
  font-weight:600; font-size:0.9rem; padding:12px 20px; border-radius:10px; transition:background .2s;
}
.btn-danger:hover{background:rgba(248,113,113,0.16);}

/* ---------- forms ---------- */
.field{margin-bottom:18px; text-align:left;}
.field label{display:block; margin-bottom:8px; font-size:0.88rem; color:var(--muted); font-weight:500;}
.field .hint{margin-top:6px; font-size:0.78rem; color:var(--muted-dim);}
.form-control{
  width:100%; background:rgba(2,6,23,0.6); border:1px solid rgba(255,255,255,0.1);
  border-radius:12px; padding:13px 16px; color:var(--text); font-size:1rem; transition:all .2s;
}
.form-control:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,0.25); background:rgba(2,6,23,0.9);}
.form-control::placeholder{color:var(--muted-dim);}
textarea.form-control{resize:vertical; min-height:110px;}
.field-error{font-size:0.8rem; color:var(--red); margin-top:6px;}
select.form-control{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat;}

/* strength meter */
.strength{display:flex; gap:4px; margin-top:8px;}
.strength i{height:4px; flex:1; border-radius:2px; background:rgba(255,255,255,0.08); transition:background .3s;}
.strength.s1 i:nth-child(-n+1){background:var(--red);}
.strength.s2 i:nth-child(-n+2){background:var(--amber);}
.strength.s3 i:nth-child(-n+3){background:var(--cyan);}
.strength.s4 i{background:var(--green);}

/* ---------- alerts ---------- */
.alert{padding:12px 14px; border-radius:12px; font-size:0.9rem; display:flex; gap:10px; align-items:flex-start; margin-bottom:18px;}
.alert.error{background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3); color:#fca5a5;}
.alert.success{background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.25); color:#86efac;}
.alert.info{background:rgba(56,189,248,0.08); border:1px solid rgba(56,189,248,0.25); color:#7dd3fc;}

/* ---------- misc ---------- */
.divider{height:1px; background:linear-gradient(90deg, var(--panel-line), transparent 80%);}
.kicker{font-family:var(--mono); font-size:0.78rem; color:var(--cyan); letter-spacing:0.05em; display:block;}
.mono{font-family:var(--mono);}
.muted{color:var(--muted);}
.text-dim{color:var(--muted-dim);}
.hidden{display:none !important;}

/* reveal-on-scroll utility (site behaviour) */
.reveal-up{opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.16,1,0.3,1);}
.reveal-up.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001s !important; transition-duration:0.001s !important;}
  .reveal-up{opacity:1; transform:none;}
}

/* ============================================================
   APP SHELL (mobile-first)
   ============================================================ */
.app-shell{min-height:100dvh; display:flex; flex-direction:column; position:relative; z-index:1;}

/* top bar (fixed) */
.app-top{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px; height:var(--nav-h);
  background:rgba(6,13,24,0.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--panel-line);
}
.app-brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:1.1rem;}
.brand-mark{
  width:26px; height:26px; flex-shrink:0; position:relative;
  background:linear-gradient(135deg, var(--cyan), var(--blue));
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.ai-live-dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:pulse-dot 2.4s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:0.25;}}

.user-chip{display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px; border-radius:99px;
  border:1px solid var(--panel-line); background:rgba(30,41,59,0.6); transition:border-color .2s;}
.user-chip:hover{border-color:rgba(56,189,248,0.4);}
.user-chip .avatar{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; font-weight:600; color:#04121c; background:linear-gradient(135deg,var(--cyan),var(--blue)); flex-shrink:0;}
.user-chip .who{display:flex; flex-direction:column; line-height:1.15; text-align:left;}
.user-chip .who b{font-size:0.82rem; font-weight:600;}
.user-chip .who span{font-size:0.68rem; color:var(--muted-dim); font-family:var(--mono);}
@media (max-width:520px){ .user-chip .who{display:none;} .user-chip{padding:6px;} }

.app-main{flex:1; width:100%; max-width:1100px; margin:0 auto; padding:calc(var(--nav-h) + 24px) 20px calc(var(--tab-h) + 40px);}
@media (min-width:900px){ .app-main{padding:calc(var(--nav-h) + 36px) 32px 60px;} }

.page{display:none;}
.page.is-active{display:block; animation:page-in .45s cubic-bezier(0.16,1,0.3,1);}
@keyframes page-in{from{opacity:0; transform:translateY(14px);}to{opacity:1; transform:translateY(0);}}

.page-title{font-family:var(--display); font-size:clamp(1.5rem,4vw,2rem); font-weight:600; margin-bottom:4px;}
.page-sub{color:var(--muted); font-size:0.94rem; margin-bottom:26px;}

/* bottom tab bar */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-around;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(6,13,24,0.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--panel-line);
}
.tabbar button{
  flex:1; max-width:130px; background:none; border:none; color:var(--muted-dim);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:0.66rem; font-weight:500; letter-spacing:0.03em; position:relative;
  transition:color .2s; -webkit-tap-highlight-color:transparent;
}
.tabbar button svg{width:21px; height:21px;}
.tabbar button.on{color:var(--cyan);}
.tabbar button.on::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:2px; border-radius:2px; background:var(--cyan); box-shadow:0 0 12px var(--cyan);
}

/* desktop sidebar */
.sidebar{display:none;}
@media (min-width:900px){
  .sidebar{
    display:flex; flex-direction:column; gap:6px;
    position:fixed; top:var(--nav-h); left:0; bottom:0; width:230px; padding:26px 14px;
    border-right:1px solid var(--panel-line); background:rgba(6,13,24,0.6);
  }
  .sidebar button{
    display:flex; align-items:center; gap:12px; background:none; border:none;
    color:var(--muted); font-size:0.92rem; font-weight:500; padding:11px 14px; border-radius:10px;
    transition:color .2s, background .2s; text-align:left;
  }
  .sidebar button svg{width:19px; height:19px;}
  .sidebar button:hover{color:var(--text); background:rgba(56,189,248,0.05);}
  .sidebar button.on{color:var(--cyan); background:rgba(56,189,248,0.08);}
  .app-main{margin-left:230px; max-width:calc(1100px + 230px);}
  .tabbar{display:none;}
  .app-main{padding-bottom:48px;}
}

/* ---------- cards & panels ---------- */
.card{
  background:var(--panel); border:1px solid rgba(255,255,255,0.05); border-radius:var(--radius-lg);
  padding:22px; box-shadow:0 10px 30px -10px rgba(0,0,0,0.5);
}
.card-title{font-family:var(--display); font-size:1.02rem; font-weight:600; margin-bottom:4px;}
.card-sub{font-size:0.8rem; color:var(--muted-dim); margin-bottom:14px;}

/* stat tiles */
.stat-tile{
  background:linear-gradient(160deg, rgba(59,130,214,0.16), rgba(79,216,232,0.05));
  border:1px solid rgba(79,216,232,0.28); border-radius:var(--radius-lg); padding:18px;
}
.stat-tile .label{font-size:0.72rem; color:var(--muted); letter-spacing:0.03em; text-transform:uppercase; font-family:var(--mono);}
.stat-tile .amount{font-family:var(--display); font-size:1.75rem; font-weight:600; margin-top:4px; line-height:1.2;}
.stat-tile .amount .cur{color:var(--cyan); font-size:0.8em; margin-right:2px;}
.stat-tile .delta{font-size:0.78rem; font-family:var(--mono); margin-top:6px; display:inline-flex; align-items:center; gap:5px;}
.delta.up{color:var(--green);} .delta.down{color:var(--red);}
.stat-tile.neutral{background:var(--panel); border-color:rgba(255,255,255,0.06);}
.stat-tile.neutral .label{color:var(--muted-dim);}

.grid-2{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:640px){ .grid-2{grid-template-columns:1fr 1fr;} }
.grid-3{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:700px){ .grid-3{grid-template-columns:repeat(3,1fr);} }

/* sparkline / cashflow card (hero of the dashboard) */
.cashflow-card{
  background:linear-gradient(160deg, rgba(59,130,214,0.16), rgba(79,216,232,0.05));
  border:1px solid rgba(79,216,232,0.28); border-radius:var(--radius-lg); padding:20px;
}
.cashflow-card .label{font-size:0.74rem; color:var(--muted); letter-spacing:0.04em; text-transform:uppercase; font-family:var(--mono);}

/* generic chart box */
.chart-box{position:relative; width:100%; min-width:0; overflow:hidden;}
.chart-box canvas{width:100% !important;}

/* grid children must be allowed to shrink below content size */
.hero-cash>*, .grid-2>*, .grid-3>*{min-width:0;}
.card, .stat-tile, .cashflow-card{max-width:100%;}
@media (max-width:380px){
  .card, .stat-tile, .cashflow-card{padding:16px;}
  .app-main{padding-left:14px; padding-right:14px;}
}

/* transactions */
.txn-list{list-style:none;}
.txn{
  display:flex; align-items:center; gap:14px; padding:13px 14px 13px 4px;
  border-bottom:1px solid rgba(255,255,255,0.05); transition:background .2s; border-radius:8px;
}
.txn:last-child{border-bottom:none;}
.txn:hover{background:rgba(56,189,248,0.03);}
.txn .ico{
  width:40px; height:40px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.08); background:rgba(56,189,248,0.05);
}
.txn .ico svg{width:19px; height:19px;}
.txn .meta{flex:1; min-width:0;}
.txn .meta b{display:block; font-size:0.92rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.txn .meta span{font-size:0.74rem; color:var(--muted-dim); font-family:var(--mono);}
.txn .amt{font-family:var(--mono); font-size:0.92rem; font-weight:500; white-space:nowrap;}
.txn .amt.pos{color:var(--green);}
.txn .amt.neg{color:var(--muted);}

/* pill tags */
.pill{
  font-family:var(--mono); font-size:0.68rem; padding:6px 10px; border-radius:20px;
  border:1px solid var(--panel-line); color:var(--muted-dim); display:inline-flex; align-items:center; gap:5px;
}
.pill.on{border-color:var(--cyan); color:var(--cyan); background:rgba(79,216,232,0.08);}
.pill.green{border-color:rgba(52,211,153,0.4); color:var(--green); background:rgba(52,211,153,0.07);}
.pill.amber{border-color:rgba(251,191,36,0.4); color:var(--amber); background:rgba(251,191,36,0.07);}
.pill.red{border-color:rgba(248,113,113,0.4); color:var(--red); background:rgba(248,113,113,0.07);}

/* segmented control */
.seg{display:inline-flex; background:rgba(2,6,23,0.6); border:1px solid var(--panel-line); border-radius:10px; padding:3px; gap:2px;}
.seg button{
  background:none; border:none; color:var(--muted); font-size:0.8rem; font-weight:500;
  padding:7px 14px; border-radius:8px; transition:all .2s;
}
.seg button.on{background:var(--blue); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);}

/* ---------- chat (AI coach) ---------- */
.chat-page{display:flex; flex-direction:column; min-height:calc(100dvh - var(--nav-h) - var(--tab-h) - 64px);}
.chat-log{flex:1; display:flex; flex-direction:column; gap:14px; overflow-y:auto; padding:6px 2px 18px; scroll-behavior:smooth;}
.msg{display:flex; gap:10px; max-width:88%;}
.msg .avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; font-weight:600;
}
.msg.ai .avatar{background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#04121c;}
.msg.user{align-self:flex-end; flex-direction:row-reverse;}
.msg.user .avatar{background:rgba(255,255,255,0.1); border:1px solid var(--panel-line); color:var(--muted);}
.msg .bubble{
  padding:12px 16px; border-radius:18px; font-size:0.94rem; line-height:1.55;
  animation:msg-in .35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes msg-in{from{opacity:0; transform:translateY(10px) scale(0.98);}to{opacity:1; transform:translateY(0) scale(1);}}
.msg.ai .bubble{background:var(--panel); border:1px solid rgba(255,255,255,0.06); border-top-left-radius:6px; white-space:pre-wrap;}
.msg.user .bubble{background:var(--blue); color:#fff; border-top-right-radius:6px; box-shadow:0 4px 14px rgba(37,99,235,0.3);}
.msg .bubble .src{
  display:inline-block; margin-top:8px; font-family:var(--mono); font-size:0.66rem; color:var(--muted-dim);
  border:1px solid var(--panel-line); border-radius:99px; padding:3px 9px;
}
.typing{display:inline-flex; gap:5px; padding:4px 2px;}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:typing-b 1.2s ease-in-out infinite;}
.typing i:nth-child(2){animation-delay:0.15s;} .typing i:nth-child(3){animation-delay:0.3s;}
@keyframes typing-b{0%,60%,100%{transform:translateY(0); opacity:0.4;}30%{transform:translateY(-5px); opacity:1;}}
.chat-suggest{display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:none;}
.chat-suggest::-webkit-scrollbar{display:none;}
.chat-inputbar{
  position:sticky; bottom:0; display:flex; gap:10px; align-items:flex-end;
  background:rgba(6,13,24,0.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--panel-line); border-radius:18px; padding:10px;
}
.chat-inputbar textarea{
  flex:1; background:none; border:none; resize:none; color:var(--text); font-size:0.96rem;
  min-height:24px; max-height:120px; padding:6px 4px; line-height:1.5;
}
.chat-inputbar textarea:focus{outline:none;}
.chat-send{
  width:40px; height:40px; border-radius:12px; border:none; flex-shrink:0;
  background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#04121c; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(37,99,235,0.35); transition:transform .2s, opacity .2s;
}
.chat-send:hover{transform:translateY(-1px);}
.chat-send:disabled{opacity:0.4; transform:none;}
.chat-send svg{width:18px; height:18px;}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:80; background:rgba(2,6,23,0.7); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fade-in .25s ease;
}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
.modal{
  background:var(--bg-alt); border:1px solid var(--panel-line); border-radius:var(--radius-lg);
  width:100%; max-width:520px; padding:28px; max-height:90dvh; overflow-y:auto;
  animation:modal-in .35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes modal-in{from{opacity:0; transform:translateY(24px) scale(0.97);}to{opacity:1; transform:translateY(0) scale(1);}}
.modal h3{font-family:var(--display); font-size:1.25rem; margin-bottom:6px;}
.modal .modal-sub{color:var(--muted); font-size:0.88rem; margin-bottom:20px;}
.modal-actions{display:flex; gap:10px; margin-top:22px;}
.modal-actions .btn-primary{flex:1;}

/* ---------- toast ---------- */
.toasts{position:fixed; top:calc(var(--nav-h) + 12px); right:16px; left:16px; z-index:90; display:flex; flex-direction:column; gap:8px; pointer-events:none;}
@media (min-width:640px){ .toasts{left:auto; width:340px;} }
.toast{
  background:var(--bg-alt); border:1px solid rgba(56,189,248,0.3); border-radius:12px;
  padding:12px 16px; font-size:0.88rem; display:flex; gap:10px; align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.5); animation:toast-in .35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes toast-in{from{opacity:0; transform:translateX(30px);}to{opacity:1; transform:translateX(0);}}
.toast.success{border-color:rgba(52,211,153,0.4);}
.toast.error{border-color:rgba(248,113,113,0.4);}
.toast i.dot{width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--cyan); box-shadow:0 0 10px var(--cyan);}
.toast.success i.dot{background:var(--green); box-shadow:0 0 10px var(--green);}
.toast.error i.dot{background:var(--red); box-shadow:0 0 10px var(--red);}