*, *::before, *::after { box-sizing: border-box; }
:root {
  --navy: #0f0f1a; --navy2: #1a1a2e; --navy3: #16213e;
  --indigo: #312e81; --violet: #7c3aed; --accent: #818cf8; --accent2: #a78bfa;
}
body { font-family: 'Plus Jakarta Sans', sans-serif; margin:0; padding:0; }

/* ── LANDING ── */
#landing {
  background: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 40%, #251d4a 70%, #1e0f3a 100%);
  min-height: 100vh; position: relative; overflow: hidden;
}
.mesh-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(99,102,241,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(139,92,246,0.15) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(167,139,250,0.08) 0%, transparent 60%);
}
.grid-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(99,102,241,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
}
.gradient-text {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 40%, #c084fc 80%, #e879f9 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.glow-btn {
  background: #fff; color: #1a1a2e;
  box-shadow: 0 0 30px rgba(167,139,250,0.4), 0 4px 20px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}
.glow-btn:hover {
  box-shadow: 0 0 50px rgba(167,139,250,0.6), 0 6px 30px rgba(0,0,0,0.4);
  transform: translateY(-2px) scale(1.02);
}

/* ── ANIMATIONS ── */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes bounce-down { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

.float-anim  { animation: float 3s ease-in-out infinite; }
.bounce-down { animation: bounce-down 1.4s ease-in-out infinite; }
.fade-up     { animation: fadeInUp 0.8s ease forwards; }
.fade-up-2   { animation: fadeInUp 0.8s 0.2s ease forwards; opacity:0; }
.fade-up-3   { animation: fadeInUp 0.8s 0.4s ease forwards; opacity:0; }
.fade-up-4   { animation: fadeInUp 0.8s 0.6s ease forwards; opacity:0; }

/* ── DASHBOARD ── */
#dashboard { display:none; }

/* ── SIDEBAR ── */
.sidebar {
  width: 260px; position: fixed; top:0; left:0; bottom:0;
  z-index: 40; transition: transform 0.3s ease; overflow-y: auto;
}
.dark .sidebar  { background:#13131f; border-right:1px solid rgba(129,140,248,0.1); }
.light .sidebar { background:#fff;    border-right:1px solid #e0e4f0; }

/* ── MAIN CONTENT ── */
.main-content {
  margin-left: 260px; min-height: 100vh;
  display: flex; flex-direction: column;
  transition: margin-left 0.3s ease;
  position: relative; z-index: 1;
}
.dark .main-content  { background:#0f0f1a; color:#f0f0ff; }
.light .main-content { background:#f4f5fb; color:#1a1a2e; }

/* ── TOPBAR ── */
.topbar {
  position: sticky; top:0; z-index:20;
  padding:14px 24px; display:flex; align-items:center;
  justify-content:space-between; gap:12px;
}
.dark .topbar  { background:rgba(19,19,31,0.95); border-bottom:1px solid rgba(129,140,248,0.1); backdrop-filter:blur(12px); }
.light .topbar { background:rgba(255,255,255,0.95); border-bottom:1px solid #e0e4f0; backdrop-filter:blur(12px); }

/* ── CARDS ── */
.dark .kpi-card    { background:linear-gradient(135deg,#1e1e35,#252540); border:1px solid rgba(129,140,248,0.12); }
.light .kpi-card   { background:#fff; border:1px solid #e0e4f0; box-shadow:0 2px 12px rgba(99,102,241,0.06); }
.dark .chart-card  { background:#1e1e35; border:1px solid rgba(129,140,248,0.1); }
.light .chart-card { background:#fff; border:1px solid #e0e4f0; box-shadow:0 2px 12px rgba(99,102,241,0.06); }
.dark .wallet-card  { background:linear-gradient(135deg,#1e1e35,#252540); border:1px solid rgba(129,140,248,0.12); }
.light .wallet-card { background:#fff; border:1px solid #e0e4f0; box-shadow:0 2px 12px rgba(99,102,241,0.06); }
.dark .goal-card  { background:#1e1e35; border:1px solid rgba(129,140,248,0.1); }
.light .goal-card { background:#fff; border:1px solid #e0e4f0; box-shadow:0 2px 12px rgba(99,102,241,0.06); }

/* ── NAV ── */
.dark .nav-item  { color:#94a3b8; }
.light .nav-item { color:#64748b; }
.dark .nav-item:hover,  .dark .nav-item.active  { background:rgba(129,140,248,0.1); color:#a78bfa; }
.light .nav-item:hover, .light .nav-item.active { background:rgba(99,102,241,0.08); color:#7c3aed; }
.dark .nav-item.active  { border-left:3px solid #7c3aed; }
.light .nav-item.active { border-left:3px solid #7c3aed; }

/* ── MODAL ── */
.dark .modal-bg  { background:rgba(0,0,0,0.7); }
.light .modal-bg { background:rgba(0,0,0,0.4); }
.dark .modal-box  { background:#1e1e35; border:1px solid rgba(129,140,248,0.2); }
.light .modal-box { background:#fff; border:1px solid #e0e4f0; box-shadow:0 20px 60px rgba(0,0,0,0.15); }

/* ── INPUTS ── */
.dark .input-field  { background:#13131f; border:1px solid rgba(129,140,248,0.2); color:#f0f0ff; }
.light .input-field { background:#f8f9ff; border:1px solid #d1d5e8; color:#1a1a2e; }
.dark .input-field:focus  { border-color:#7c3aed; outline:none; box-shadow:0 0 0 2px rgba(124,58,237,0.2); }
.light .input-field:focus { border-color:#7c3aed; outline:none; box-shadow:0 0 0 2px rgba(124,58,237,0.15); }
.dark .select-role   { background:#1e1e35; border:1px solid rgba(129,140,248,0.2); color:#f0f0ff; }
.light .select-role  { background:#f8f9ff; border:1px solid #d1d5e8; color:#1a1a2e; }
.dark .filter-select  { background:#1e1e35; border:1px solid rgba(129,140,248,0.2); color:#f0f0ff; }
.light .filter-select { background:#f8f9ff; border:1px solid #d1d5e8; color:#1a1a2e; }
.dark .search-input  { background:#1e1e35; border:1px solid rgba(129,140,248,0.2); color:#f0f0ff; }
.light .search-input { background:#f8f9ff; border:1px solid #d1d5e8; color:#1a1a2e; }

/* ── TABLE ── */
.dark .table-row:hover  { background:rgba(129,140,248,0.06); }
.light .table-row:hover { background:rgba(99,102,241,0.04); }

/* ── TEXT / BG ── */
.dark .logo-text  { color:#f0f0ff; }
.light .logo-text { color:#1a1a2e; }
.dark .page-bg    { background:#0f0f1a; }
.light .page-bg   { background:#f4f5fb; }

/* ── MOBILE ── */
@media(max-width:768px){
  .sidebar { transform:translateX(-260px); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0 !important; }
}

/* ── MISC ── */
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:30; }
.nav-item {
  display:flex; align-items:center; gap:12px; padding:10px 20px;
  border-radius:8px; cursor:pointer; transition:all 0.2s;
  font-weight:500; font-size:14px; margin:2px 12px; border-left:3px solid transparent;
}
.tab-content { display:none; }
.tab-content.active { display:block; animation:slideIn 0.3s ease; }
.progress-bar  { height:8px; border-radius:4px; background:rgba(129,140,248,0.2); overflow:hidden; }
.progress-fill { height:100%; border-radius:4px; transition:width 1s ease; }
.badge-income  { background:rgba(16,185,129,0.15); color:#10b981; }
.badge-expense { background:rgba(239,68,68,0.15);  color:#ef4444; }
.scrollbar-hide::-webkit-scrollbar { display:none; }

/* ── COMPONENT SHAPES ── */
.kpi-card    { border-radius:16px; padding:20px 24px; transition:transform 0.2s,box-shadow 0.2s; }
.kpi-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(124,58,237,0.15); }
.chart-card  { border-radius:16px; padding:20px 24px; }
.wallet-card { border-radius:16px; padding:20px 24px; transition:transform 0.2s; }
.wallet-card:hover { transform:translateY(-3px); }
.goal-card   { border-radius:16px; padding:24px; }

/* ── BUTTONS ── */
.add-btn { background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; transition:all 0.2s; }
.add-btn:hover { box-shadow:0 4px 20px rgba(124,58,237,0.4); transform:translateY(-1px); }
.export-btn {
  background:linear-gradient(135deg,#059669,#047857); color:#fff;
  padding:8px 16px; border-radius:10px; font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:7px; cursor:pointer; border:none;
  transition:all 0.2s; font-family:'Plus Jakarta Sans',sans-serif;
}
.export-btn:hover { box-shadow:0 4px 16px rgba(5,150,105,0.4); transform:translateY(-1px); }

/* ── SKELETON LOADER ── */
.skeleton {
  border-radius:8px; overflow:hidden; position:relative;
  background: rgba(129,140,248,0.08);
}
.skeleton::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(129,140,248,0.12) 50%, transparent 100%);
  animation: shimmer 1.4s infinite;
}

/* ── FOOTER ── */
#zorvyn-footer {
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin-top: auto; position: relative; z-index: 2; width: 100%;
}
.dark  #zorvyn-footer { background:linear-gradient(180deg,#0d0d1a 0%,#13131f 100%); border-top:1px solid rgba(129,140,248,0.12); color:#f0f0ff; }
.light #zorvyn-footer { background:linear-gradient(180deg,#f4f5fb 0%,#eef0fb 100%); border-top:1px solid #e0e4f0; color:#1a1a2e; }
.footer-inner  { max-width:1200px; margin:0 auto; padding:56px 32px 0; }
.footer-grid   { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
@media(max-width:900px){ .footer-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .footer-grid { grid-template-columns:1fr; } .footer-inner { padding:40px 20px 0; } }
.footer-col-title { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:18px; color:#7c3aed; }
.dark  .footer-link { color:#94a3b8; text-decoration:none; font-size:14px; font-weight:500; display:block; margin-bottom:11px; transition:color 0.2s,padding-left 0.2s; }
.light .footer-link { color:#64748b; text-decoration:none; font-size:14px; font-weight:500; display:block; margin-bottom:11px; transition:color 0.2s,padding-left 0.2s; }
.footer-link:hover { color:#a78bfa !important; padding-left:4px; }
.footer-logo-icon  { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,#7c3aed,#a78bfa); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; color:#fff; margin-bottom:14px; box-shadow:0 4px 16px rgba(124,58,237,0.3); }
.footer-brand-name { font-size:18px; font-weight:800; letter-spacing:-0.01em; margin-bottom:2px; }
.dark  .footer-brand-name { color:#f0f0ff; }
.light .footer-brand-name { color:#1a1a2e; }
.footer-desc { font-size:13px; line-height:1.6; margin-top:10px; max-width:200px; }
.dark  .footer-desc { color:#64748b; }
.light .footer-desc { color:#94a3b8; }
.footer-social-row { display:flex; gap:12px; margin-top:4px; }
.footer-social-btn { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; transition:background 0.2s,transform 0.2s,box-shadow 0.2s; cursor:pointer; text-decoration:none; }
.dark  .footer-social-btn { background:rgba(129,140,248,0.08); border:1px solid rgba(129,140,248,0.15); color:#94a3b8; }
.light .footer-social-btn { background:#f0f2ff; border:1px solid #dde0f5; color:#64748b; }
.footer-social-btn:hover { background:rgba(124,58,237,0.18)!important; border-color:rgba(124,58,237,0.35)!important; color:#a78bfa!important; transform:translateY(-2px); box-shadow:0 6px 18px rgba(124,58,237,0.18); }
.footer-divider { max-width:1200px; margin:48px auto 0; padding:0 32px; }
.dark  .footer-divider-line { border:none; border-top:1px solid rgba(129,140,248,0.1); }
.light .footer-divider-line { border:none; border-top:1px solid #e0e4f0; }
.footer-bottom { max-width:1200px; margin:0 auto; padding:18px 32px 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-copy { font-size:12px; font-weight:500; }
.dark  .footer-copy { color:#475569; }
.light .footer-copy { color:#94a3b8; }
.footer-badge { font-size:11px; font-weight:600; padding:4px 12px; border-radius:20px; letter-spacing:0.04em; }
.dark  .footer-badge { background:rgba(124,58,237,0.12); color:#a78bfa; border:1px solid rgba(124,58,237,0.2); }
.light .footer-badge { background:rgba(124,58,237,0.08); color:#7c3aed; border:1px solid rgba(124,58,237,0.15); }