/* =======================================================
   🌌 GLOBAL SYSTEM
======================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  width:100%;
  min-height:100%;
  font-family:'Poppins',sans-serif;
  overflow-x:hidden;
  transition:0.4s ease;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body.fullscreen-active {
  overflow: hidden;
}

/* Gradient background */

body{
  background:linear-gradient(135deg,#f0f4ff,#fdf2ff,#e0f7ff);
  color:#0f172a;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(circle at 20% 20%,rgba(99,102,241,0.1),transparent 60%),
             radial-gradient(circle at 80% 80%,rgba(236,72,153,0.1),transparent 60%);
  z-index:-1;
  animation:bgFloat 12s infinite alternate ease-in-out;
}

@keyframes bgFloat{
  from{transform:translateY(0);}
  to{transform:translateY(-20px);}
}

body.dark{
  background:linear-gradient(135deg,#0f172a,#1e1b4b,#111827);
  color:#f1f5f9;
}

.hidden{
  display:none !important;
}
.section{
opacity:0;
transform:translateY(10px);
transition:0.3s ease;
}

.section:not(.hidden){
opacity:1;
transform:translateY(0);
}

/* =======================================================
   🚀 ACTIVATION SCREEN
======================================================= */

.activation-screen{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:radial-gradient(circle at center,#6366f1,#8b5cf6,#ec4899);
  z-index:4000;
  animation:fadeIn 0.6s ease;
}

.activation-center{
  text-align:center;
  color:white;
}

.activation-logo{
  width:140px;
  cursor:pointer;
  animation:floatLogo 3s ease-in-out infinite;
  filter:drop-shadow(0 0 30px rgba(255,255,255,0.8));
  transition:0.3s ease;
}

.activation-logo:hover{
  transform:scale(1.12) rotate(-6deg);
}

@keyframes floatLogo{
  0%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
  100%{transform:translateY(0);}
}

.activation-screen h1{
  font-size:38px;
  font-weight:900;
  letter-spacing:-1px;
  margin-top:24px;
}

.activation-screen p{
  margin-top:10px;
  font-weight:500;
  opacity:0.9;
}

/* =======================================================
   🔐 LOGIN CARD
======================================================= */

.login-screen{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(135deg,#6366f1,#14b8a6);
  z-index:3500;
}

.login-card{
  width:100%;
  max-width:420px;
  padding:45px 35px;
  border-radius:28px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px);
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,0.35);
  animation:popUp 0.5s ease;
  position:relative;
}

body.dark .login-card{
  background:rgba(30,41,59,0.95);
}

@keyframes popUp{
  from{opacity:0; transform:scale(0.9);}
  to{opacity:1; transform:scale(1);}
}

.login-logo{
  width:85px;
  margin-bottom:20px;
  filter:drop-shadow(0 0 15px rgba(99,102,241,0.4));
}

.login-card h2{
  font-size:24px;
  font-weight:800;
}

.login-card p{
  margin:12px 0 28px;
  opacity:0.7;
}
.login-card .btn-outline{
  background:#f1f5f9;
  border:2px solid #cbd5e1;
  color:#475569;
}

.login-card .btn-outline:hover{
  background:#e2e8f0;
  color:#0f172a;
}
.login-options{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* =======================================================
   🎛 BUTTON SYSTEM
======================================================= */

.btn-primary{
  padding:14px;
  border:none;
  border-radius:20px;
  font-weight:700;
  cursor:pointer;
  background:linear-gradient(135deg,#6366f1,#ec4899);
  color:white;
  transition:0.3s ease;
  box-shadow:0 10px 30px rgba(99,102,241,0.4);
}

.btn-primary:hover{
  transform:translateY(-3px);
}

.btn-outline{
  padding:14px;
  border-radius:20px;
  border:2px solid #6366f1;
  background:transparent;
  font-weight:700;
  cursor:pointer;
  transition:0.3s ease;
  color:#6366f1;
}

body.dark .btn-outline{
  color:#f1f5f9;
  border-color:#f1f5f9;
}

.btn-outline:hover{
  background:#6366f1;
  color:white;
}

/* =======================================================
   🏠 HEADER
======================================================= */



.header{
  position:fixed;
  top:0;
  width:100%;
  height:75px;
  padding:0 24px;

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

  backdrop-filter:blur(25px);
  background:linear-gradient(
    135deg,
    rgba(15,23,42,0.85),
    rgba(30,41,59,0.85)
  );

  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 30px rgba(0,0,0,0.3);
  z-index:2000;
}

.header-left{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo{
  border-radius: 100%;
  width:44px;
  filter:drop-shadow(0 0 10px rgba(99,102,241,0.6));
}

.brand h1{
  font-size:20px;
  font-weight:900;
  color:white;
  letter-spacing:-0.5px;
}

.brand span{
  font-size:12px;
  color:rgba(255,255,255,0.6);
}

.header-right{
  display:flex;
  align-items:center;
  gap:14px;
}

#userGreeting{
  font-weight:600;
  font-size:14px;
  color:rgba(255,255,255,0.8);
}

/* Logout Button Upgrade */

#logoutBtn{
  padding:10px 18px;
  border-radius:20px;
  background:linear-gradient(135deg,#6366f1,#ec4899);
  border:none;
  color:white;
  font-weight:700;
  cursor:pointer;
  transition:0.3s ease;
  box-shadow:0 8px 20px rgba(99,102,241,0.4);
}

#logoutBtn:hover{
  transform:translateY(-2px);
}
body:not(.dark) .header{
  background:linear-gradient(
    135deg,
    rgba(165, 202, 223, 0.9),
    rgba(240,244,255,0.9)
  );
}

body:not(.dark) .brand h1{
  color:#0f172a;
}

body:not(.dark) #userGreeting{
  color:#334155;
}
@media(max-width:600px){
  .brand span{
    display:none;
  }
}
/* ===============================
   🔐 AUTH BUTTON VISIBILITY FIX
================================ */

.header #authBtn{
  background:linear-gradient(135deg,#6366f1,#ec4899);
  color:white;
  border:none;
  box-shadow:0 6px 18px rgba(99,102,241,0.35);
  padding:10px 18px;
  border-radius:18px;
  font-weight:700;
  transition:0.25s ease;
}

.header #authBtn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(99,102,241,0.55);
}
/* =======================================================
   📦 MAIN CONTAINER
======================================================= */

.main-container{
padding-top:95px;
padding-bottom:160px;
max-width:1100px;
margin:auto;
padding-left:18px;
padding-right:18px;
}
/* =======================================================
   🏠 DASHBOARD HERO
======================================================= */
/* =======================================================
   🚀 ELITE DASHBOARD HERO
======================================================= */

.dashboard-hero{
  position:relative;

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

  padding:32px;

  border-radius:30px;

  background:linear-gradient(
    135deg,
    #6366f1,
    #8b5cf6,
    #ec4899
  );

  color:white;

  margin-bottom:24px;

  box-shadow:
  0 25px 80px rgba(99,102,241,0.45);

  overflow:hidden;
}

/* subtle glow overlay */

.dashboard-hero::before{
  content:"";
  position:absolute;
  inset:0;

  background:
  radial-gradient(circle at 20% 20%,rgba(255,255,255,0.25),transparent 60%),
  radial-gradient(circle at 80% 80%,rgba(255,255,255,0.18),transparent 60%);

  opacity:0.7;
}

/* hero title */

.dashboard-hero h2{
  font-size:26px;
  font-weight:900;
  letter-spacing:-0.5px;
  position:relative;
}

/* =======================================================
   ⭐ LEVEL BADGE PRO
======================================================= */

.level-badge{

  width:92px;
  height:92px;

  border-radius:50%;

  background:rgba(255,255,255,0.18);

  backdrop-filter:blur(10px);

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

  font-weight:900;

  border:2px solid rgba(255,255,255,0.25);

  box-shadow:
  inset 0 2px 10px rgba(255,255,255,0.35),
  0 10px 30px rgba(0,0,0,0.35);

  position:relative;

  transition:0.3s ease;
}

/* hover lift */

.level-badge:hover{
  transform:scale(1.05);
}

/* level number */

.level-badge span{
  font-size:26px;
}

/* level label */

.level-badge small{
  font-size:11px;
  opacity:0.85;
  letter-spacing:1px;
}
.dashboard-hero{
animation:heroFloat 8s ease-in-out infinite alternate;
}

@keyframes heroFloat{
0%{transform:translateY(0);}
100%{transform:translateY(-6px);}
}
/* =======================================================
   🔥 DASHBOARD PENDING PREVIEW
======================================================= */

.dashboard-pending-card{
  background:rgba(255,255,255,0.95);
  padding:22px;
  border-radius:24px;
  margin-bottom:22px;
  box-shadow:0 15px 45px rgba(0,0,0,0.15);
}

body.dark .dashboard-pending-card{
  background:rgba(30,41,59,0.95);
}

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

.dashboard-pending-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Small pending item */

.pending-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(135deg,#e0e7ff,#fce7f3);
}

body.dark .pending-item{
  background:linear-gradient(135deg,#1e293b,#312e81);
  color:white;
}

.pending-actions{
  display:flex;
  gap:8px;
}

.small-btn{
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  font-weight:700;
}

/* =======================================================
   ⭐ XP CARD
======================================================= */


/* =======================================================
   📊 PREMIUM STATS GRID – RESPONSIVE & SAFE
======================================================= */

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px;
  width:100%;
}

/* =======================================================
   ⭐ STAT CARD
======================================================= */

.stat-card{
  position:relative;
  padding:22px 18px;
  border-radius:22px;
  text-align:center;
  color:white;
  font-weight:700;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;

  min-height:110px;

  box-shadow:0 12px 30px rgba(0,0,0,0.25);
  transition:all 0.3s cubic-bezier(.22,1,.36,1);
}

/* ✨ Glow Effect */
.stat-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  background:radial-gradient(circle at top left,rgba(255,255,255,0.3),transparent 60%);
  opacity:0.6;
  pointer-events:none;
}

/* Hover Lift */
.stat-card:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
}

/* Title Text */
.stat-card h3{
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  word-break:break-word;
  overflow-wrap:break-word;
  text-align:center;
}

/* Value Text */
.stat-card p{
  font-size:22px;
  font-weight:800;
  line-height:1.2;
  word-break:break-word;
  overflow-wrap:break-word;
}

/* =======================================================
   🎨 GRADIENT VARIANTS
======================================================= */

.stat-card:nth-child(1){
  background:linear-gradient(135deg,#14b8a6,#22d3ee);
  box-shadow:0 12px 35px rgba(20,184,166,0.4);
}

.stat-card:nth-child(2){
  background:linear-gradient(135deg,#f97316,#ec4899);
  box-shadow:0 12px 35px rgba(249,115,22,0.4);
}

.stat-card:nth-child(3){
  background:linear-gradient(135deg,#8b5cf6,#6366f1);
  box-shadow:0 12px 35px rgba(139,92,246,0.4);
}

.stat-card:nth-child(4){
  background:linear-gradient(135deg,#10b981,#14b8a6);
  box-shadow:0 12px 35px rgba(16,185,129,0.4);
}

/* =======================================================
   📱 MOBILE OPTIMIZATION
======================================================= */

@media(max-width:600px){

  .stats-grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .stat-card{
    padding:18px 12px;
    min-height:100px;
  }

  .stat-card h3{
    font-size:12px;
  }

  .stat-card p{
    font-size:18px;
  }

}
/* =======================================================
   📝 TASK SECTION
======================================================= */

.section{
  animation:fadeUp 0.4s ease;
}

.card{
  background:white;
  padding:26px;
  border-radius:26px;
  margin-bottom:22px;
  box-shadow:0 15px 45px rgba(0,0,0,0.12);
}

body.dark .card{
  background:#1e293b;
}

input,select{
  width:100%;
  padding:14px;
  border-radius:18px;
  border:1px solid #e2e8f0;
  margin-bottom:14px;
  font-family:'Poppins',sans-serif;
}

body.dark input,
body.dark select{
  background:#334155;
  border-color:#475569;
  color:white;
}

.tasks-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* =======================================================
   🧠 PRIORITY SYSTEM – VISUAL POWER
======================================================= */

.task-item{
  background:white;
  padding:18px 20px;
  border-radius:20px;
  transition:all 0.3s cubic-bezier(.22,1,.36,1);
  border-left:6px solid transparent;
  position:relative;
  overflow:hidden;
}

body.dark .task-item{
  background:#1e293b;
}

/* Glow overlay */
.task-item::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  opacity:0.08;
  pointer-events:none;
}

/* =======================================================
   🔴 HIGH PRIORITY
======================================================= */

.task-item.high{
  border-left:6px solid #ef4444;
  box-shadow:0 8px 25px rgba(239,68,68,0.25);
}

.task-item.high::before{
  background:linear-gradient(135deg,#ef4444,#f97316);
}

/* =======================================================
   🟡 MEDIUM PRIORITY
======================================================= */

.task-item.medium{
  border-left:6px solid #facc15;
  box-shadow:0 8px 25px rgba(250,204,21,0.25);
}

.task-item.medium::before{
  background:linear-gradient(135deg,#facc15,#f59e0b);
}

/* =======================================================
   🟢 LOW PRIORITY
======================================================= */

.task-item.low{
  border-left:6px solid #10b981;
  box-shadow:0 8px 25px rgba(16,185,129,0.25);
}

.task-item.low::before{
  background:linear-gradient(135deg,#10b981,#22c55e);
}

/* =======================================================
   ✨ HOVER EFFECT
======================================================= */

.task-item:hover{
  transform:translateY(-6px) scale(1.02);
}

.task-actions{
  display:flex;
  gap:10px;
}

/* ==============================
   🎯 TASK ACTION BUTTONS
============================== */

.task-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.task-actions button{
  padding:8px 16px;
  border-radius:18px;
  border:none;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  transition:0.25s ease;
  display:flex;
  align-items:center;
  gap:6px;
}

/* ✅ DONE BUTTON */

.done-btn{
  background:linear-gradient(135deg,#10b981,#22c55e);
  color:white;
  box-shadow:0 6px 16px rgba(16,185,129,0.35);
}

.done-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(16,185,129,0.55);
}

/* ❌ DELETE BUTTON */

.delete-btn{
  background:linear-gradient(135deg,#ef4444,#f97316);
  color:white;
  box-shadow:0 6px 16px rgba(239,68,68,0.35);
}

.delete-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(239,68,68,0.55);
}

/* ✨ Press effect */

.task-actions button:active{
  transform:scale(0.95);
}

/* =======================================================
   📱 MOBILE SAFETY
======================================================= */

@media(max-width:600px){

  .stats-grid{
    grid-template-columns:1fr 1fr;
  }

  .dashboard-hero{
    flex-direction:column;
    gap:16px;
    text-align:center;
  }

  #userGreeting{
    display:none;
  }

}
/* =====================================================
   ⏱ FOCUS SECTION – ELITE PARALLEL LAYOUT
===================================================== */

#focusSection{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:35px;
  margin-top:40px;
  align-items:stretch;
}


/* =====================================================
   🎴 BASE CARD
===================================================== */

.focus-card{
  position:relative;
  border-radius:30px;
  padding:40px 32px;
  color:white;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;

  background:linear-gradient(135deg,#6366f1,#4f46e5,#ec4899);
  box-shadow:0 25px 60px rgba(0,0,0,0.25);

  transition:all 0.35s cubic-bezier(.22,1,.36,1);
}

.focus-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 35px 80px rgba(0,0,0,0.35);
}

/* Soft glow overlay */
.focus-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top left,rgba(255,255,255,0.25),transparent 60%);
  opacity:0.6;
  pointer-events:none;
}
.focus-card{
  overflow:hidden;
}
.time-display{
  width:100%;
  font-size:clamp(45px,4vw,95px);
  font-weight:900;
  letter-spacing:1px;
  text-align:center;
  white-space:nowrap;
}


.focus-card:hover{
  transform:translateY(-6px);
}

/* Variants */
.stopwatch-card{
  background:linear-gradient(135deg,#14b8a6,#22d3ee);
}

.worldclock-card{
  background:linear-gradient(135deg,#f97316,#ec4899);
}

/* =====================================================
   📦 INNER WRAPPER
===================================================== */

.focus-inner{
  width:100%;
  max-width:1000px;

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

  gap:35px;
}

/* =====================================================
   🔝 HEADER
===================================================== */

.focus-header{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.focus-header h2{
  font-size:22px;
  font-weight:800;
}

.fullscreen-btn{
  background:rgba(255,255,255,0.25);
  border:none;
  padding:10px 16px;
  border-radius:16px;
  cursor:pointer;
  color:white;
  font-size:16px;
  transition:0.3s ease;
}

.fullscreen-btn:hover{
  background:rgba(255,255,255,0.4);
}

/* =====================================================
   🕒 TIME
===================================================== */

.focus-display{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.time-display{
  width:100%;
  font-size:clamp(40px,3.5vw,85px);
  font-weight:900;
  letter-spacing:0;
  text-align:center;
  overflow:hidden;
}


.clock-date{
  font-size:16px;
  opacity:0.85;
}

/* =====================================================
   🎛 BUTTONS
===================================================== */

.focus-controls{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:center;
}

.focus-controls button{
  padding:14px 26px;
  border-radius:28px;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:0.3s ease;
}



.btn-primary:hover{
  transform:translateY(-3px);
}

.btn-outline{
  background:rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.4);
  color:white;
}

.btn-outline:hover{
  background:rgba(255,255,255,0.35);
}

/* =====================================================
   🎛 CUSTOMIZE CARD
===================================================== */

.customize-card{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  animation:fadeIn 0.3s ease;
}


body.dark .customize-card{
  background:#1e293b;
  color:white;
}

.customize-inner{
  background:white;
  padding:35px;
  border-radius:28px;
  text-align:center;
  box-shadow:0 25px 70px rgba(0,0,0,0.3);
  width:90%;
  max-width:400px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

body.dark .customize-inner{
  background:#1e293b;
  color:white;
}


/* =====================================================
   🖥 DESKTOP FULLSCREEN
===================================================== */

.focus-card.fullscreen{
  position:fixed;
  inset:0;
  border-radius:0;
  z-index:9999;

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

  background:radial-gradient(circle at center,#0f172a,#020617);
}

.focus-card.fullscreen .focus-inner{
  max-width:none;
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  justify-content:flex-start;   /* 🔥 move everything to top */
  align-items:center;

  padding-top:60px;             /* space from top */
  gap:40px;
}

.focus-card.fullscreen .time-display{
  font-size:clamp(130px,15vw,230px);
}



/* =====================================================
   📱 MOBILE ROTATED FULLSCREEN – FINAL BALANCED VERSION
===================================================== */

/* =====================================================
   📱 CLEAN MOBILE FULLSCREEN – STABLE VERSION
===================================================== */

@media (max-width:900px){

  /* FULLSCREEN CARD BASE */
  

  /* TIMER DISPLAY BIG + CENTERED */
  .focus-card.mobile-fullscreen .time-display{
    font-size:clamp(70px,18vw,150px);
    line-height:1;
    text-align:center;
  }

  /* CONTROLS WRAP PROPERLY */
  .focus-card.mobile-fullscreen .focus-controls{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:14px;
    width:100%;
  }

  .focus-card.mobile-fullscreen .focus-controls button{
    padding:12px 20px;
    font-size:14px;
    border-radius:22px;
  }

body.fullscreen-active .bottom-nav,
body.fullscreen-active .premium-footer,
body.fullscreen-active .header{
  display:none;
}


}

/* ================================
   📱 MOBILE OPTIMIZATION
================================ */

@media (max-width:900px){

  #focusSection{
    display:flex;
    flex-direction:column;
    gap:30px;
  }

  .focus-card{
    padding:25px 20px;
    border-radius:24px;
  }

  .focus-header h2{
    font-size:18px;
  }

  .time-display{
    font-size:clamp(40px,10vw,70px);
    letter-spacing:2px;
  }

  .focus-controls button{
    padding:10px 18px;
    font-size:12px;
    border-radius:20px;
  }

}

/* =======================================================
   💰 VAULT SECTION
======================================================= */

#vaultSection{
  display:flex;
  flex-direction:column;
  gap:26px;
}

.vault-hero{
  padding:36px;
  border-radius:32px;
  background:linear-gradient(135deg,#10b981,#14b8a6);
  color:white;
  text-align:center;
  box-shadow:0 25px 70px rgba(16,185,129,0.4);
}

.networth-big{
  font-size:30px;
  font-weight:900;
  margin:16px 0;
}

/* Ledger */

#ledgerList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ledger-item{
  padding:14px;
  border-radius:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(135deg,#e0f2fe,#fce7f3);
}

body.dark .ledger-item{
  background:linear-gradient(135deg,#1e293b,#334155);
  color:white;
}

.ledger-item.gain{
  box-shadow:0 0 15px rgba(16,185,129,0.4);
}

.ledger-item.loss{
  box-shadow:0 0 15px rgba(239,68,68,0.4);
}

/* =======================================================
   🎉 SUCCESS OVERLAY
======================================================= */

.success-overlay{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at center,#111827,#020617);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:10000;
}

.success-card{
  background:white;
  padding:50px;
  border-radius:32px;
  text-align:center;
  box-shadow:0 30px 90px rgba(0,0,0,0.6);
  animation:popUp 0.5s ease;
}

body.dark .success-card{
  background:#1e293b;
  color:white;
}

.success-icon{
  font-size:60px;
  margin-bottom:20px;
}

.success-xp{
  font-size:28px;
  font-weight:900;
  margin:16px 0;
  color:#6366f1;
}

/* =======================================================
   📱 NAVIGATION BAR
======================================================= */

/* =====================================================
   🚀 PREMIUM FLOATING NAVBAR
===================================================== */

.bottom-nav{
  position:fixed;

  bottom:20px;
  left:50%;
  transform:translateX(-50%);

  width:90%;
  max-width:520px;
  height:70px;

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

  border-radius:40px;

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

  background:rgba(255,255,255,0.65);

  border:1px solid rgba(255,255,255,0.4);

  box-shadow:
  0 20px 60px rgba(0,0,0,0.2),
  inset 0 1px 0 rgba(255,255,255,0.6);

  z-index:3000;

  transition:0.35s ease;
}

/* DARK MODE */

body.dark .bottom-nav{
  background:rgba(15,23,42,0.8);
  border:1px solid rgba(255,255,255,0.08);
}

/* =====================================================
   NAV BUTTON
===================================================== */

.nav-item{
  flex:1;

  height:100%;

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

  border:none;
  background:none;

  cursor:pointer;

  transition:0.3s ease;
}

/* ICON */

.nav-item img{
  width:26px;
  opacity:0.65;

  transition:
  transform 0.25s ease,
  opacity 0.25s ease,
  filter 0.25s ease;
}

/* HOVER EFFECT */

.nav-item:hover img{
  transform:translateY(-3px) scale(1.08);
  opacity:0.9;
}

/* ACTIVE TAB */

.nav-item.active img{

  opacity:1;

  transform:translateY(-5px) scale(1.25);

  filter:
  drop-shadow(0 6px 18px rgba(99,102,241,0.8))
  drop-shadow(0 0 10px rgba(236,72,153,0.6));

}

/* =====================================================
   MOBILE OPTIMIZATION
===================================================== */

@media (max-width:900px){

  .bottom-nav{
    height:65px;
    width:92%;
  }

  .nav-item img{
    width:20px;
  }

  .nav-item.active img{
    transform:translateY(-4px) scale(1.18);
  }

}

/* =======================================================
   🏆 FOOTER
======================================================= */

.premium-footer{
  font-size:11px;
  position:fixed;
  bottom:90px;
  left:50%;
  transform:translateX(-50%);
  padding:10px 20px;
  border-radius:40px;
  background:linear-gradient(135deg,#6366f1,#ec4899);
  color:white;
  font-weight:600;
  box-shadow:0 20px 50px rgba(0,0,0,0.4);

  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  white-space:nowrap;   /* 🔥 THIS FORCES ONE LINE */
}


.footer-link{
  color:rgb(8, 0, 255);
  font-weight:600;
  text-decoration:none;
}

.footer-link:hover{
  text-decoration:underline;
}
@media (max-width:900px){

  .premium-footer{
    font-size:9px;
    padding:8px 16px;
    max-width:90%;
  }

}


/* =======================================================
   🔥 ANIMATIONS
======================================================= */

@keyframes zoomIn{
  from{opacity:0; transform:scale(.95);}
  to{opacity:1; transform:scale(1);}
}
.section {
  opacity:0;
  transform:translateY(10px);
  transition:0.3s ease;
}

.section:not(.hidden){
  opacity:1;
  transform:translateY(0);
}
/* ==============================
   🧠 DASHBOARD SMALL ACTIONS
============================== */

.pending-actions{
  display:flex;
  gap:8px;
}

.small-done,
.small-delete{
  width:30px;
  height:30px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.25s ease;
}

.small-done{
  background:linear-gradient(135deg,#10b981,#22c55e);
  color:white;
}

.small-done:hover{
  transform:scale(1.1);
  box-shadow:0 0 12px rgba(16,185,129,0.6);
}

.small-delete{
  background:linear-gradient(135deg,#ef4444,#f97316);
  color:white;
}

.small-delete:hover{
  transform:scale(1.1);
  box-shadow:0 0 12px rgba(239,68,68,0.6);
}
/* ==============================
   🍎 OS STYLE NOTIFICATION
============================== */

.os-notify{
  position:fixed;
  top:30px;
  left:50%;
  transform:translateX(-50%) translateY(-40px);
  opacity:0;
  z-index:25000;
  transition:0.4s cubic-bezier(.22,1,.36,1);
}

.os-notify.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

.os-card{
  min-width:280px;
  max-width:380px;
  padding:16px 22px;
  border-radius:18px;
  backdrop-filter:blur(20px);
  background:rgba(255,255,255,0.75);
  box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

body.dark .os-card{
  background:rgba(30,41,59,0.8);
  color:white;
}

.os-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.os-text strong{
  font-weight:600;
  font-size:15px;
}

.os-text span{
  font-size:13px;
  opacity:0.8;
}
.task-item.high { border-left:4px solid #ef4444; }
.task-item.medium { border-left:4px solid #facc15; }
.task-item.low { border-left:4px solid #10b981; }
.section {
  opacity:0;
  transform:translateY(15px);
  transition:0.3s ease;
}

.section.active {
  opacity:1;
  transform:translateY(0);
}

/* ============================
   🏆 PREMIUM XP PROGRESS SYSTEM
============================ */

.xp-bar-wrapper{
  margin-top:22px;
  padding-bottom:18px;
  border-radius:22px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(14px);
  box-shadow:0 12px 35px rgba(0,0,0,0.15);
}

body.dark .xp-bar-wrapper{
  background:rgba(30,41,59,0.6);
}

.xp-bar-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-size:13px;
  font-weight:600;
  opacity:0.85;
}

.xp-bar{
  width:100%;
  height:16px;
  border-radius:30px;
  background:rgba(255,255,255,0.25);
  overflow:hidden;
  position:relative;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.25),
    0 4px 15px rgba(0,0,0,0.15);
}

#xpFill{
  height:100%;
  width:0%;
  border-radius:30px;
  background:linear-gradient(
    90deg,
    #10b981,
    #22d3ee,
    #6366f1,
    #ec4899
  );
  background-size:200% 200%;
  animation:xpGlow 4s ease infinite;
  transition:width 0.5s cubic-bezier(.22,1,.36,1);
  box-shadow:
    0 0 15px rgba(99,102,241,0.7),
    0 0 25px rgba(236,72,153,0.5);
}

/* Animated gradient movement */
@keyframes xpGlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Subtle pulse when gaining XP */
#xpFill.level-up{
  animation:xpPulse 0.6s ease;
}

@keyframes xpPulse{
  0%{transform:scaleY(1);}
  50%{transform:scaleY(1.3);}
  100%{transform:scaleY(1);}
}
.undo-btn{
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:white;
  box-shadow:0 6px 16px rgba(99,102,241,0.35);
}

.undo-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(99,102,241,0.55);
}
/* ==============================
   🚨 DEADLINE SYSTEM
============================== */

.task-item.warning{
  animation:softPulse 2s infinite;
  box-shadow:0 0 15px rgba(250,204,21,0.6);
}

.task-item.urgent{
  animation:urgentPulse 1s infinite;
  box-shadow:0 0 25px rgba(239,68,68,0.8);
  border-left:6px solid #ef4444 !important;
}

.task-item.overdue{
  animation:overdueShake 1.5s infinite;
  background:linear-gradient(135deg,#7f1d1d,#991b1b);
  color:white;
  border-left:6px solid #dc2626 !important;
}

/* 🟡 Warning */
@keyframes softPulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.02);}
  100%{transform:scale(1);}
}

/* 🔥 Urgent */
@keyframes urgentPulse{
  0%{box-shadow:0 0 15px rgba(239,68,68,0.4);}
  50%{box-shadow:0 0 35px rgba(239,68,68,1);}
  100%{box-shadow:0 0 15px rgba(239,68,68,0.4);}
}

/* 💀 Overdue */
@keyframes overdueShake{
  0%{transform:translateX(0);}
  25%{transform:translateX(-2px);}
  50%{transform:translateX(2px);}
  75%{transform:translateX(-2px);}
  100%{transform:translateX(0);}
}
.delete-ledger{
  margin-left:12px;
  border:none;
  background:linear-gradient(135deg,#ef4444,#f97316);
  color:white;
  padding:6px 10px;
  border-radius:12px;
  cursor:pointer;
  font-size:12px;
  transition:0.25s ease;
}

.delete-ledger:hover{
  transform:scale(1.08);
  box-shadow:0 0 10px rgba(239,68,68,0.6);
}
.stock-item{
  padding:18px;
  border-radius:20px;
  margin-bottom:12px;
  background:white;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.stock-item.profit{
  border-left:6px solid #10b981;
}

.stock-item.loss{
  border-left:6px solid #ef4444;
}

.stock-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
#skipLogin{
  color:#1e293b;
  border:2px solid #1e293b;
  background:rgba(255,255,255,0.9);
}

#skipLogin:hover{
  background:#1e293b;
  color:white;
}
body.dark #skipLogin{
  color:white;
  border:2px solid white;
  background:rgba(30,41,59,0.9);
}

body.dark #skipLogin:hover{
  background:white;
  color:#1e293b;
}
/* =================================
   🔔 REMINDER SYSTEM – FIXED UI
================================= */

.reminder-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:28px;
margin-top:25px;
}

/* CARD */

.reminder-card{
position:relative;
background:white;
border-radius:26px;
padding:28px 22px;
text-align:center;

box-shadow:0 18px 40px rgba(0,0,0,0.15);

display:flex;
flex-direction:column;
align-items:center;
gap:14px;

transition:0.35s cubic-bezier(.22,1,.36,1);
}

/* Hover lift */

.reminder-card:hover{
transform:translateY(-6px);
}

/* EMOJI */

.reminder-emoji{
font-size:42px;
margin-bottom:4px;
}

/* TITLE */

.reminder-card h3{
color:#1e293b;
font-weight:700;
font-size:18px;
}

/* SELECT */

.reminder-card select{

margin-top:6px;
margin-bottom:6px;

padding:12px 16px;

border-radius:16px;

border:none;

background:#374151;
color:white;

font-weight:600;

cursor:pointer;
}

/* ENABLE BUTTON */

.toggle-reminder{

margin-top:10px;

padding:12px 22px;

border:none;
border-radius:18px;

font-weight:700;
font-size:14px;

cursor:pointer;

background:linear-gradient(135deg,#10b981,#22c55e);
color:white;

box-shadow:0 10px 25px rgba(16,185,129,0.4);

transition:0.25s ease;
}

.toggle-reminder:hover{
transform:translateY(-2px);
}

/* ===============================
   ✅ ACTIVE REMINDER STATE
================================ */

.reminder-card.active{

background:linear-gradient(135deg,#6366f1,#ec4899);

color:white;

box-shadow:0 20px 45px rgba(99,102,241,0.45);

transform:translateY(-3px);
}

/* Title white */

.reminder-card.active h3{
color:white;
}

/* Dropdown fix */

.reminder-card.active select{
background:white;
color:#1e293b;
}

/* Disable button */

.reminder-card.active .toggle-reminder{
background:linear-gradient(135deg,#ef4444,#f97316);
}

/* ACTIVE INDICATOR DOT */

.reminder-card.active::after{

content:"";

position:absolute;

top:14px;
right:14px;

width:12px;
height:12px;

border-radius:50%;

background:#22c55e;

box-shadow:0 0 10px #22c55e;
}
body.dark .reminder-card{
background:#1e293b;
color:white;
}

body.dark .reminder-card h3{
color:white;
}

body.dark .reminder-card select{
background:#475569;
color:white;
}
.vault-summary{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:18px;
}

.vault-card{

background:linear-gradient(135deg,#6366f1,#ec4899);

color:white;

padding:22px;

border-radius:22px;

text-align:center;

box-shadow:0 12px 35px rgba(0,0,0,0.2);

transition:0.3s;
}

.vault-card:hover{
transform:translateY(-4px);
}

.vault-card h3{
font-size:14px;
opacity:0.8;
}

.vault-card p{
font-size:22px;
font-weight:800;
margin-top:6px;
}
.goal-bar{

width:100%;

height:10px;

background:#e5e7eb;

border-radius:20px;

margin-top:8px;

overflow:hidden;

}

.goal-bar div{

height:100%;

background:linear-gradient(90deg,#10b981,#22c55e);

}
/* =====================================
   🤖 AI COACH
===================================== */

.ai-coach{
position:fixed;

right:20px;
bottom:160px;

display:flex;
align-items:center;
gap:12px;

padding:14px 18px;

border-radius:20px;

background:linear-gradient(135deg,#6366f1,#ec4899);

color:white;

box-shadow:0 15px 40px rgba(0,0,0,0.35);

z-index:4000;

animation:coachSlide 0.5s ease;
}

.coach-avatar{
font-size:28px;
}

.coach-message{
font-size:13px;
max-width:200px;
}

@keyframes coachSlide{
from{
transform:translateX(50px);
opacity:0;
}
to{
transform:translateX(0);
opacity:1;
}
}
/* =========================
   🏆 BADGES
========================= */

.badge-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:14px;
margin-top:10px;
}

.badge{
padding:14px;
border-radius:16px;
text-align:center;

background:linear-gradient(135deg,#6366f1,#ec4899);
color:white;

font-weight:700;

box-shadow:0 10px 25px rgba(0,0,0,0.25);

animation:zoomIn 0.4s ease;
}
/* ===================================
   🎯 DAILY QUEST SYSTEM
=================================== */

.quest-card{
background:linear-gradient(135deg,#1e293b,#020617);
color:white;
border-radius:26px;

/* FIX SPACING */
margin-bottom:120px;
padding-bottom:20px;
padding-top: 20px;
}

.quest-list{
display:flex;
flex-direction:column;
gap:14px;
margin-top:12px;
}

.quest-item{

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

padding:14px 18px;

border-radius:16px;

background:linear-gradient(135deg,#6366f1,#ec4899);

font-weight:600;

box-shadow:0 10px 25px rgba(0,0,0,0.3);

transition:0.25s ease;

}

.quest-item:hover{
transform:translateY(-3px);
}

.quest-left{
display:flex;
flex-direction:column;
}

.quest-xp{
font-weight:800;
font-size:14px;
}

.quest-done{
background:linear-gradient(135deg,#10b981,#22c55e);
}