/* MUTA v200.281 - 37-finance-premium-v281.css - PREMIUM FINANCE MANAGEMENT
   Inspired by best Iranian + Foreign:
   Iranian: هوشمند (minimal bento 24px, pastel), هوشمند Pay (wallet hero), هوشمند (portfolio badges), Digipay (transaction icons)
   Foreign: هوشمند (budget progress), Monarch Money (net worth + cash flow), Copilot (glassmorphism AI), Revolut (vaults), هوشمند (KPI sparkline), هوشمند (fast micro), Apple (spring)
*/

:root{
  --finance-gold-soft: rgba(212,175,55,.10);
  --finance-gold-border: rgba(212,175,55,.18);
  --finance-gold: #D4AF37;
  --finance-purple-soft: rgba(124,58,237,.10);
  --finance-purple-border: rgba(124,58,237,.18);
  --finance-green-soft: rgba(16,185,129,.10);
  --finance-green-border: rgba(16,185,129,.22);
  --finance-red-soft: rgba(239,68,68,.10);
  --finance-red-border: rgba(239,68,68,.18);
  --finance-blue-soft: rgba(59,130,246,.10);
  --finance-blue-border: rgba(59,130,246,.18);
  --finance-surface: var(--surface);
  --finance-surface-2: var(--surface-2);
  --finance-line: var(--line);
}

/* ===== HERO - Revolut + Monarch + هوشمند ===== */
.fm-hero-v281{
  background:linear-gradient(135deg, rgba(212,175,55,.12) 0%, rgba(124,58,237,.10) 35%, rgba(16,185,129,.08) 100%), var(--surface);
  border:1px solid var(--finance-gold-border);
  border-radius:24px;
  padding:24px;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(212,175,55,.06);
}
.fm-hero-v281::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(800px circle at 20% 0%, rgba(212,175,55,.15), transparent 60%), radial-gradient(600px circle at 80% 100%, rgba(124,58,237,.12), transparent 60%);
  pointer-events:none;
}
.fm-hero-v281-inner{
  position:relative;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center;
}
@media (max-width:900px){ .fm-hero-v281-inner{ grid-template-columns:1fr; } }

.fm-hero-main{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.fm-hero-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--finance-gold);
}
.fm-hero-eyebrow .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--finance-gold);
  box-shadow:0 0 12px rgba(212,175,55,.6);
  animation:pulseGold 2s infinite;
}
@keyframes pulseGold{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.2); opacity:.8; } }

.fm-hero-title{
  font-size:1.6rem;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.2;
}
.fm-hero-title span{
  background:linear-gradient(135deg, var(--finance-gold), #7C3AED);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.fm-hero-desc{
  font-size:.85rem;
  color:var(--text-dim);
  line-height:1.8;
  max-width:520px;
}
.fm-hero-stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.fm-hero-stat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:99px;
  font-size:.75rem;
  font-weight:700;
  background:var(--surface-2);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.fm-hero-stat.live{ background:#10b98122; color:#10b981; border-color:#10b98133; }
.fm-hero-stat.gold{ background:var(--finance-gold-soft); color:var(--finance-gold); border-color:var(--finance-gold-border); }
.fm-hero-stat.purple{ background:var(--finance-purple-soft); color:#a78bfa; border-color:var(--finance-purple-border); }

.fm-hero-visual{
  background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.4)), var(--surface-2);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  position:relative;
  overflow:hidden;
}
.fm-hero-visual::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.4), transparent);
}
.fm-networth-label{
  font-size:.7rem;
  color:var(--text-faint);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
}
.fm-networth-value{
  font-family:var(--font-mono);
  font-size:2rem;
  font-weight:900;
  letter-spacing:-.03em;
  margin-top:6px;
  line-height:1;
}
.fm-networth-change{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:10px;
  padding:4px 10px;
  border-radius:99px;
  font-size:.75rem;
  font-weight:700;
  font-family:var(--font-mono);
}
.fm-networth-change.up{ background:var(--finance-green-soft); color:#10b981; border:1px solid var(--finance-green-border); }
.fm-networth-change.down{ background:var(--finance-red-soft); color:#ef4444; border:1px solid var(--finance-red-border); }

/* ===== KPI GRID - هوشمند + هوشمند ===== */
.fm-kpi-grid-v281{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  margin-bottom:22px;
}
@media (max-width:1100px){ .fm-kpi-grid-v281{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .fm-kpi-grid-v281{ grid-template-columns:1fr; } }

.fm-kpi-v281{
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  position:relative;
  overflow:hidden;
  transition:all .22s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.fm-kpi-v281::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(400px circle at 0% 0%, rgba(212,175,55,.06), transparent 60%);
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}
.fm-kpi-v281:hover{
  transform:translateY(-3px) scale(1.01);
  border-color:var(--finance-gold-border);
  box-shadow:0 10px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(212,175,55,.06);
}
.fm-kpi-v281:hover::before{ opacity:1; }
.fm-kpi-v281-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.fm-kpi-v281-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.fm-kpi-v281-icon.gold{ background:var(--finance-gold-soft); border-color:var(--finance-gold-border); color:var(--finance-gold); }
.fm-kpi-v281-icon.green{ background:var(--finance-green-soft); border-color:var(--finance-green-border); color:#10b981; }
.fm-kpi-v281-icon.red{ background:var(--finance-red-soft); border-color:var(--finance-red-border); color:#ef4444; }
.fm-kpi-v281-icon.purple{ background:var(--finance-purple-soft); border-color:var(--finance-purple-border); color:#a78bfa; }
.fm-kpi-v281-icon.blue{ background:var(--finance-blue-soft); border-color:var(--finance-blue-border); color:#60A5FA; }

.fm-kpi-v281-label{
  font-size:.68rem;
  color:var(--text-faint);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:12px;
}
.fm-kpi-v281-value{
  font-family:var(--font-mono);
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-.02em;
  margin-top:6px;
  line-height:1.1;
}
.fm-kpi-v281-trend{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-size:.72rem;
  color:var(--text-faint);
}
.fm-kpi-v281-spark{
  margin-top:12px;
  height:32px;
  opacity:.7;
}

/* ===== BENTO GRID - هوشمند + موتا مارکت ===== */
.fm-bento-v281{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  margin-bottom:18px;
}
@media (max-width:900px){ .fm-bento-v281{ grid-template-columns:1fr; } }

.fm-bento-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  position:relative;
  overflow:hidden;
  transition:all .22s cubic-bezier(.16,1,.3,1);
}
.fm-bento-card:hover{
  border-color:var(--finance-gold-border);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.fm-bento-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.fm-bento-title{
  font-weight:800;
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:8px;
}
.fm-bento-title .icon{
  width:28px;
  height:28px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface-2);
  border:1px solid var(--line);
}

/* ===== HEALTH SCORE - Revolut + Apple ===== */
.fm-health-ring{
  width:120px;
  height:120px;
  border-radius:50%;
  background:conic-gradient(var(--finance-gold) var(--score-deg, 0deg), var(--surface-2) 0deg);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  margin:0 auto;
}
.fm-health-ring::before{
  content:'';
  position:absolute;
  width:92px;
  height:92px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
}
.fm-health-score{
  position:relative;
  font-family:var(--font-mono);
  font-size:1.8rem;
  font-weight:900;
  z-index:1;
}

/* ===== TRANSACTIONS - هوشمند + هوشمند + هوشمند ===== */
.fm-tx-list-v281{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.fm-tx-row-v281{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  transition:all .18s cubic-bezier(.16,1,.3,1);
}
.fm-tx-row-v281:hover{
  background:var(--surface-2);
  border-color:var(--finance-gold-border);
  transform:translateX(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.fm-tx-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.fm-tx-icon.housing{ background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.22); }
.fm-tx-icon.food{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.22); }
.fm-tx-icon.transport{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.22); }
.fm-tx-icon.bills{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.22); }
.fm-tx-icon.health{ background:rgba(236,72,153,.12); border-color:rgba(236,72,153,.22); }
.fm-tx-icon.entertainment{ background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.22); }
.fm-tx-icon.income{ background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.28); }

.fm-tx-main{
  flex:1;
  min-width:0;
}
.fm-tx-title{
  font-weight:700;
  font-size:.88rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fm-tx-meta{
  font-size:.72rem;
  color:var(--text-faint);
  margin-top:2px;
  display:flex;
  gap:6px;
  align-items:center;
}
.fm-tx-amount{
  font-family:var(--font-mono);
  font-weight:800;
  font-size:.95rem;
  letter-spacing:-.01em;
}
.fm-tx-amount.expense{ color:#ef4444; }
.fm-tx-amount.income{ color:#10b981; }

/* ===== BUDGETS - هوشمند progress ===== */
.fm-budget-card-v281{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  transition:all .20s ease;
}
.fm-budget-card-v281:hover{
  border-color:var(--finance-gold-border);
  transform:translateY(-2px);
}
.fm-budget-progress{
  height:8px;
  background:var(--surface-2);
  border-radius:99px;
  overflow:hidden;
  margin-top:10px;
  position:relative;
}
.fm-budget-progress-fill{
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg, var(--finance-gold), #f59e0b);
  transition:width .6s cubic-bezier(.16,1,.3,1);
}
.fm-budget-progress-fill.over{
  background:linear-gradient(90deg, #ef4444, #dc2626);
}
.fm-budget-progress-fill.good{
  background:linear-gradient(90deg, #10b981, #059669);
}

/* ===== GOALS - Revolut Vaults ===== */
.fm-goal-card-v281{
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  position:relative;
  overflow:hidden;
  transition:all .22s cubic-bezier(.16,1,.3,1);
}
.fm-goal-card-v281::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--finance-gold), #7C3AED, #10b981);
}
.fm-goal-card-v281:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.15);
  border-color:var(--finance-gold-border);
}
.fm-goal-image{
  width:48px;
  height:48px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--finance-gold-soft), var(--finance-purple-soft));
  border:1px solid var(--finance-gold-border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
}

/* ===== AI REGISTER - ChatGPT + پیام‌رسان + هوشمند ===== */
.fm-ai-register-v281{
  background:linear-gradient(135deg, rgba(124,58,237,.10) 0%, rgba(212,175,55,.08) 50%, var(--surface) 100%);
  border:1px solid rgba(124,58,237,.22);
  border-radius:20px;
  padding:20px;
  position:relative;
  overflow:hidden;
}
.fm-ai-register-v281::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(600px circle at 0% 0%, rgba(124,58,237,.12), transparent 70%);
  pointer-events:none;
}
.fm-ai-log-v281{
  max-height:320px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:12px;
  backdrop-filter:blur(8px);
}
.fm-msg-v281{
  max-width:85%;
  padding:10px 14px;
  border-radius:16px;
  font-size:.85rem;
  line-height:1.7;
  word-break:break-word;
  animation:msgIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
.fm-msg-v281.user{
  align-self:flex-end;
  background:linear-gradient(135deg, var(--finance-gold), #B8941F);
  color:#1A1400;
  border-bottom-right-radius:4px;
  box-shadow:0 4px 12px rgba(212,175,55,.25);
}
.fm-msg-v281.ai{
  align-self:flex-start;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-bottom-left-radius:4px;
}
.fm-input-v281{
  flex:1;
  height:44px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 14px;
  font-size:.88rem;
  transition:all .18s ease;
}
.fm-input-v281:focus{
  outline:none;
  border-color:rgba(124,58,237,.35);
  box-shadow:0 0 0 3px rgba(124,58,237,.12);
  background:var(--surface);
}
.fm-chip-v281{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:99px;
  font-size:.78rem;
  font-weight:600;
  background:var(--surface-2);
  border:1px solid var(--line);
  cursor:pointer;
  transition:all .18s cubic-bezier(.16,1,.3,1);
}
.fm-chip-v281:hover{
  background:var(--finance-gold-soft);
  border-color:var(--finance-gold-border);
  color:var(--finance-gold);
  transform:translateY(-1px);
}

/* ===== INSIGHTS - Copilot AI ===== */
.fm-insight-v281{
  background:linear-gradient(135deg, var(--finance-purple-soft), rgba(0,0,0,0));
  border:1px solid var(--finance-purple-border);
  border-radius:14px;
  padding:14px;
  font-size:.85rem;
  line-height:1.8;
  position:relative;
  overflow:hidden;
}
.fm-insight-v281::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:3px;
  height:100%;
  background:linear-gradient(180deg, #a78bfa, #7C3AED);
}
.fm-insight-v281 .icon{
  width:28px;
  height:28px;
  border-radius:8px;
  background:var(--finance-purple-soft);
  border:1px solid var(--finance-purple-border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
}

/* ===== CAKE - Copilot donut ===== */
.fm-cake-v281{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:700px){ .fm-cake-v281{ grid-template-columns:1fr; } }
.fm-cake-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  text-align:center;
}
.fm-cake-donut{
  width:140px;
  height:140px;
  border-radius:50%;
  margin:0 auto 14px;
  position:relative;
  background:conic-gradient(var(--finance-gold) 0% 30%, #10b981 30% 55%, #60A5FA 55% 75%, #a78bfa 75% 100%);
}
.fm-cake-donut::before{
  content:'';
  position:absolute;
  inset:14px;
  background:var(--surface);
  border-radius:50%;
  border:1px solid var(--line);
}

/* ===== TABS - هوشمند + هوشمند ===== */
.fm-tabs-v281{
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:6px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:20px;
}
.fm-tabs-v281::-webkit-scrollbar{ display:none; }
.fm-tab-v281{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 14px;
  border-radius:10px;
  font-size:.82rem;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:all .18s cubic-bezier(.16,1,.3,1);
  background:transparent;
  border:1px solid transparent;
  color:var(--text-dim);
}
.fm-tab-v281:hover{
  background:var(--surface);
  color:var(--text);
}
.fm-tab-v281.active{
  background:var(--surface);
  border-color:var(--line);
  color:var(--text);
  font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ===== EMPTY STATE - هوشمند + Apple ===== */
.fm-empty-v281{
  text-align:center;
  padding:32px 20px;
  background:var(--surface);
  border:1px dashed var(--line);
  border-radius:18px;
  color:var(--text-dim);
}
.fm-empty-v281 .icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:var(--finance-gold-soft);
  border:1px solid var(--finance-gold-border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  margin:0 auto 12px;
}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .fm-hero-v281{ border-radius:0; margin:0 -14px 18px; border-left:0; border-right:0; padding:20px 16px; }
  .fm-kpi-v281{ border-radius:16px; }
  .fm-bento-v281{ gap:12px; }
  .fm-hero-title{ font-size:1.35rem; }
  .fm-networth-value{ font-size:1.6rem; }
}