/* ============================================================
   AI Money demo — app styles (auth, dashboard, insights, profile)
   ============================================================ */

/* ---------- reduce-motion preference ---------- */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after{
  animation-duration:0.001s !important;
  animation-iteration-count:1 !important;
  transition-duration:0.001s !important;
}

/* ================= AUTH ================= */
.auth-wrap{min-height:100dvh; display:flex; flex-direction:column; position:relative; z-index:1;}
.auth-top{display:flex; justify-content:space-between; align-items:center; padding:20px 24px;}
.auth-main{flex:1; display:flex; align-items:center; justify-content:center; padding:12px 20px 60px;}
.auth-card{width:100%; max-width:440px;}
.auth-card .card{padding:30px 26px;}
@media (min-width:640px){ .auth-card .card{padding:40px;} }
.auth-title{font-family:var(--display); font-size:1.55rem; font-weight:600; margin-bottom:6px;}
.auth-sub{color:var(--muted); font-size:0.92rem; margin-bottom:24px;}
.auth-alt{margin-top:20px; text-align:center; font-size:0.9rem; color:var(--muted);}
.forgot-row{margin-top:12px; text-align:center;}
.forgot-row button{background:none; border:none; color:var(--muted-dim); font-size:0.82rem; padding:2px 4px;}
.forgot-row button:hover{color:var(--cyan); text-decoration:underline; text-underline-offset:2px;}
.auth-alt button{background:none; border:none; color:var(--cyan); font-weight:600; font-size:0.9rem; padding:2px 4px;}
.auth-alt button:hover{text-decoration:underline;}
.type-cards{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.type-card{
  background:rgba(2,6,23,0.5); border:1px solid var(--panel-line); border-radius:14px;
  padding:14px 12px; text-align:left; color:var(--muted); transition:all .2s;
}
.type-card b{display:block; color:var(--text); font-size:0.92rem; margin-bottom:2px; font-weight:600;}
.type-card span{font-size:0.74rem; line-height:1.4; display:block;}
.type-card.on{border-color:var(--cyan); background:rgba(56,189,248,0.08); box-shadow:0 0 0 1px var(--cyan) inset;}
.demo-creds{
  margin-top:18px; font-size:0.8rem; color:var(--muted-dim); border:1px dashed var(--panel-line);
  border-radius:12px; padding:12px 14px; line-height:1.6;
}

/* ---------- email verification (6-char PIN) ---------- */
.pin-row{display:flex; gap:10px; justify-content:center; margin:20px 0 18px;}
.pin-cell{
  width:48px; height:58px; text-align:center; font-family:var(--mono); font-size:1.4rem; font-weight:500;
  text-transform:uppercase; color:var(--text); background:rgba(2,6,23,0.6);
  border:1px solid rgba(255,255,255,0.12); border-radius:12px; transition:all .2s;
}
.pin-cell:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(56,189,248,0.2);}
.pin-cell:disabled{opacity:.55;}
@media (max-width:360px){ .pin-row{gap:6px;} .pin-cell{width:38px; height:50px; font-size:1.15rem;} }
.demo-creds b{color:var(--muted);}
.demo-creds button{background:none; border:none; color:var(--cyan); font-size:0.8rem; padding:0; text-decoration:underline; text-underline-offset:2px;}

/* ================= DASHBOARD ================= */
.dash-hello{font-family:var(--display); font-size:clamp(1.5rem,4vw,2rem); font-weight:600;}
.dash-date{color:var(--muted); font-size:0.9rem; margin-bottom:22px;}
.hero-cash{display:grid; gap:16px;}
@media (min-width:800px){ .hero-cash{grid-template-columns:1.2fr 1fr;} }
.cash-main{display:flex; flex-direction:column;}
.cash-main .amount{font-family:var(--display); font-size:clamp(2rem,7vw,2.6rem); font-weight:600; margin-top:6px; line-height:1.1;}
.cash-main .flow{display:flex; gap:18px; margin-top:12px; font-family:var(--mono); font-size:0.8rem;}
.cash-main .flow .in{color:var(--green);} .cash-main .flow .out{color:var(--red);}
.range-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; flex-wrap:wrap;}
.chart-note{font-size:0.72rem; color:var(--muted-dim); margin-top:10px; font-family:var(--mono);}

/* budget rings */
.rings{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px;}
.ring{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;}
.ring svg{width:74px; height:74px; transform:rotate(-90deg);}
.ring .track{fill:none; stroke:rgba(255,255,255,0.07); stroke-width:3.4;}
.ring .bar{fill:none; stroke-width:3.4; stroke-linecap:round; transition:stroke-dashoffset 1.4s cubic-bezier(0.16,1,0.3,1);}
.ring .pct{font-family:var(--mono); font-size:0.72rem; fill:var(--text);}
.ring b{font-size:0.78rem; font-weight:600;}
.ring span{font-size:0.68rem; color:var(--muted-dim); font-family:var(--mono);}

/* ================= ACTIVITY ================= */
.txn-scroll{max-height:520px; overflow-y:auto; padding-right:2px;}
.filter-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:12px; scrollbar-width:none;}
.filter-row::-webkit-scrollbar{display:none;}
.sum-row{display:flex; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.sum-row .item{font-size:0.8rem; color:var(--muted); font-family:var(--mono);}
.sum-row .item b{color:var(--text); font-size:0.95rem; display:block; font-family:var(--display);}

/* ================= PROFILE ================= */
.profile-head{display:flex; align-items:center; gap:16px; margin-bottom:22px;}
.avatar-lg{
  width:60px; height:60px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:700; color:#04121c;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
}
.profile-head h3{font-family:var(--display); font-size:1.25rem;}
.profile-head p{font-size:0.84rem; color:var(--muted-dim); font-family:var(--mono);}
.settings-group{margin-bottom:16px;}
.settings-group h4{
  font-family:var(--mono); font-size:0.74rem; letter-spacing:0.06em; color:var(--muted-dim);
  text-transform:uppercase; margin-bottom:12px;
}
.switch{position:relative; width:46px; height:26px; flex-shrink:0;}
.switch input{opacity:0; width:100%; height:100%; position:absolute; cursor:pointer; z-index:2; margin:0;}
.switch .sl{
  position:absolute; inset:0; border-radius:99px; background:rgba(255,255,255,0.12); transition:background .25s;
}
.switch .sl::after{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition:transform .25s cubic-bezier(0.16,1,0.3,1);
}
.switch input:checked + .sl{background:var(--blue);}
.switch input:checked + .sl::after{transform:translateX(20px);}
.switch input:focus-visible + .sl{outline:2px solid var(--cyan); outline-offset:2px;}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.05);}
.set-row:last-child{border-bottom:none;}
.set-row .txt b{display:block; font-size:0.92rem; font-weight:600;}
.set-row .txt span{font-size:0.78rem; color:var(--muted-dim);}
.danger-zone{border:1px solid rgba(248,113,113,0.25); border-radius:16px; padding:18px; background:rgba(248,113,113,0.03);}
.ai-key-row{display:flex; gap:8px;}
.ai-key-row .form-control{flex:1;}
.fb-fields{display:grid; gap:8px; margin-bottom:10px;}
.fb-actions{display:flex; gap:8px;}
.badge{
  font-family:var(--mono); font-size:0.64rem; padding:3px 8px; border-radius:99px; letter-spacing:0.04em;
  border:1px solid rgba(52,211,153,0.4); color:var(--green); background:rgba(52,211,153,0.08);
}
.badge.off{border-color:rgba(148,163,184,0.3); color:var(--muted); background:rgba(148,163,184,0.08);}

/* ================= MISC ================= */
.skel{position:relative; overflow:hidden; background:rgba(255,255,255,0.05); border-radius:10px; min-height:12px;}
.skel::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{to{transform:translateX(100%);}}
.empty{color:var(--muted-dim); font-size:0.88rem; text-align:center; padding:28px 0;}
.fab-ai{
  position:fixed; right:18px; bottom:calc(var(--tab-h) + 18px + env(safe-area-inset-bottom)); z-index:45;
  width:54px; height:54px; border-radius:50%; border:none;
  background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#04121c;
  box-shadow:0 8px 26px rgba(37,99,235,0.5); display:flex; align-items:center; justify-content:center;
  transition:transform .2s;
}
.fab-ai:hover{transform:translateY(-2px) scale(1.03);}
.fab-ai svg{width:24px; height:24px;}
.fab-ai::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(56,189,248,0.4); animation:fab-pulse 2.6s ease-out infinite;
}
@keyframes fab-pulse{0%{transform:scale(0.9); opacity:1;}100%{transform:scale(1.35); opacity:0;}}
@media (min-width:900px){ .fab-ai{bottom:28px;} }

/* ---------- mobile chart fitting ---------- */
/* rings: keep 3-up but tighten on small phones */
@media (max-width:360px){
  .rings{gap:6px;}
  .ring b{font-size:0.7rem;}
  .ring span{font-size:0.62rem;}
}