/* ==========================================================================
   Lumina Academy — Glassmorphism Design System
   ========================================================================== */

:root{
  --bg-grad-1:#6b73ff;
  --bg-grad-2:#9b5de5;
  --bg-grad-3:#f15bb5;
  --bg-grad-4:#00bbf9;
  --glass-bg: rgba(255,255,255,0.12);
  --glass-bg-strong: rgba(255,255,255,0.20);
  --glass-border: rgba(255,255,255,0.35);
  --glass-shadow: 0 8px 32px 0 rgba(31,38,135,0.25);
  --text-main:#ffffff;
  --text-muted: rgba(255,255,255,0.72);
  --text-dark:#1f1b3a;
  --accent-1:#00f5d4;
  --accent-2:#f15bb5;
  --accent-3:#ffd166;
  --accent-4:#00bbf9;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --font-main:'Poppins','Segoe UI',sans-serif;
  --font-display:'Clash Display','Poppins',sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-main);
  color:var(--text-main);
  min-height:100vh;
  background: linear-gradient(-45deg, var(--bg-grad-1), var(--bg-grad-2), var(--bg-grad-3), var(--bg-grad-4));
  background-size: 400% 400%;
  animation: gradientFlow 18s ease infinite;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

@keyframes gradientFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* floating orbs behind content for extra depth */
.bg-orbs{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;}
.bg-orbs span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.45), rgba(255,255,255,0));
  filter:blur(2px);
  animation:floatOrb 14s ease-in-out infinite;
}
.bg-orbs span:nth-child(1){width:220px;height:220px; top:8%; left:10%; animation-duration:16s;}
.bg-orbs span:nth-child(2){width:160px;height:160px; top:60%; left:80%; animation-duration:20s; animation-delay:2s;}
.bg-orbs span:nth-child(3){width:120px;height:120px; top:75%; left:15%; animation-duration:13s; animation-delay:1s;}
.bg-orbs span:nth-child(4){width:90px;height:90px; top:20%; left:75%; animation-duration:11s;}
@keyframes floatOrb{
  0%,100%{transform:translateY(0) translateX(0) scale(1);}
  50%{transform:translateY(-40px) translateX(20px) scale(1.1);}
}

::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.35); border-radius:10px;}

a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input, select, textarea{font-family:inherit;}

h1,h2,h3,h4{font-family:var(--font-display); margin:0 0 .4em; letter-spacing:.3px;}

/* ---------------- Glass Card ---------------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);
}
.glass-strong{
  background:var(--glass-bg-strong);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);
}

.card{padding:22px; margin-bottom:18px;}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px;
  border-radius:50px;
  border:1px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.18);
  color:var(--text-main);
  font-weight:600; font-size:14px;
  backdrop-filter:blur(10px);
  transition:all .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.3); box-shadow:0 10px 24px rgba(0,0,0,0.18);}
.btn:active{transform:translateY(0) scale(.97);}
.btn-primary{
  background:linear-gradient(135deg, var(--accent-1), var(--accent-4));
  border:none; color:#06243a; font-weight:700;
}
.btn-accent{
  background:linear-gradient(135deg, var(--accent-2), var(--accent-3));
  border:none; color:#3a0620; font-weight:700;
}
.btn-danger{background:linear-gradient(135deg,#ff5e62,#ff9966); border:none; color:#3a0606; font-weight:700;}
.btn-sm{padding:8px 16px; font-size:13px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none !important;}
.btn-icon{padding:10px; border-radius:50%; width:40px; height:40px;}

/* ---------------- Inputs ---------------- */
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; margin-bottom:6px; color:var(--text-muted); font-weight:500;}
.input, select.input, textarea.input{
  width:100%;
  padding:13px 16px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.14);
  color:var(--text-main);
  outline:none;
  font-size:15px;
  transition:all .2s ease;
}
.input::placeholder{color:rgba(255,255,255,0.55);}
.input:focus{ border-color:var(--accent-1); background:rgba(255,255,255,0.22); box-shadow:0 0 0 3px rgba(0,245,212,0.25);}
select.input option{color:#1f1b3a;}
textarea.input{resize:vertical; min-height:90px;}

/* ---------------- Layout helpers ---------------- */
.container{max-width:1200px; margin:0 auto; padding:0 20px;}
.flex{display:flex;}
.flex-col{display:flex; flex-direction:column;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-20{gap:20px;}
.grid{display:grid; gap:18px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.text-center{text-align:center;}
.text-muted{color:var(--text-muted);}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.badge{
  display:inline-block; padding:4px 12px; border-radius:50px; font-size:12px; font-weight:700;
  background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.3);
}
.badge-success{background:rgba(0,245,160,0.25); color:#00ffa6; border-color:rgba(0,245,160,.4);}
.badge-warn{background:rgba(255,209,102,0.25); color:#ffd166; border-color:rgba(255,209,102,.4);}
.badge-danger{background:rgba(255,94,98,0.25); color:#ff9b9d; border-color:rgba(255,94,98,.4);}

/* ================= LOADER ================= */
#loader-screen{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  background:linear-gradient(-45deg, var(--bg-grad-1), var(--bg-grad-2), var(--bg-grad-3), var(--bg-grad-4));
  background-size:400% 400%; animation:gradientFlow 10s ease infinite;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader-screen.hide{opacity:0; visibility:hidden; pointer-events:none;}
.loader-logo-default{
  width:110px; height:110px; position:relative;
}
.loader-logo-default .ring{
  position:absolute; inset:0; border-radius:50%;
  border:4px solid transparent;
  border-top-color:var(--accent-1);
  border-right-color:var(--accent-2);
  animation:spin 1.3s linear infinite;
}
.loader-logo-default .ring:nth-child(2){ inset:14px; border-top-color:var(--accent-3); border-right-color:transparent; border-bottom-color:var(--accent-4); animation-duration:1.8s; animation-direction:reverse;}
.loader-logo-default .core{
  position:absolute; inset:38px; border-radius:50%;
  background:radial-gradient(circle,#fff,var(--accent-1));
  box-shadow:0 0 30px var(--accent-1);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse{0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.15); opacity:.7;}}
.loader-img{width:110px; height:110px; object-fit:contain; animation:pulse 1.6s ease-in-out infinite; filter:drop-shadow(0 0 20px rgba(255,255,255,0.5));}
.loader-text{font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:2px; text-transform:uppercase;}
.loader-dots span{display:inline-block; width:8px; height:8px; margin:0 3px; border-radius:50%; background:#fff; animation:dotBounce 1.2s infinite ease-in-out;}
.loader-dots span:nth-child(2){animation-delay:.15s;} .loader-dots span:nth-child(3){animation-delay:.3s;}
@keyframes dotBounce{0%,80%,100%{transform:translateY(0); opacity:.4;} 40%{transform:translateY(-10px); opacity:1;}}

/* ================= NAVBAR ================= */
.navbar{
  position:sticky; top:0; z-index:500;
  padding:14px 0;
}
.navbar-inner{
  margin:12px auto 0; max-width:1200px; width:calc(100% - 24px);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-radius:50px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; font-family:var(--font-display);}
.brand img{width:34px; height:34px; border-radius:50%; object-fit:cover;}
.brand .brand-dot{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-weight:900;}
.nav-links{display:flex; gap:6px; align-items:center;}
.nav-links a, .nav-links button{
  padding:9px 16px; border-radius:50px; font-size:14px; font-weight:600; color:var(--text-main); background:transparent; border:none;
  transition:background .2s;
}
.nav-links a.active, .nav-links a:hover, .nav-links button:hover{background:rgba(255,255,255,0.2);}
.hamburger{display:none; width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3);}

/* ================= TOAST ================= */
#toast-wrap{position:fixed; top:20px; right:20px; z-index:9000; display:flex; flex-direction:column; gap:10px;}
.toast{
  padding:14px 20px; border-radius:16px; min-width:240px; max-width:320px;
  background:rgba(20,20,40,0.65); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  animation:toastIn .35s ease;
  font-size:14px; font-weight:500;
}
.toast.success{border-left:4px solid #00f5a0;}
.toast.error{border-left:4px solid #ff5e62;}
.toast.info{border-left:4px solid #00bbf9;}
@keyframes toastIn{from{transform:translateX(120%); opacity:0;} to{transform:translateX(0); opacity:1;}}

/* ================= MODAL ================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,8,30,0.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:2000; padding:16px;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.modal-box{
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:28px;
  animation:modalPop .3s cubic-bezier(.2,1.4,.4,1);
}
@keyframes modalPop{from{transform:scale(.9) translateY(20px); opacity:0;} to{transform:scale(1) translateY(0); opacity:1;}}
.modal-close{position:absolute; top:14px; right:14px;}

/* ================= QUOTE BANNER ================= */
.quote-banner{
  padding:20px 26px; margin:18px 0; border-radius:var(--radius-lg);
  display:flex; align-items:center; gap:16px;
}
.quote-banner .quote-icon{font-size:30px;}
.quote-banner p{margin:0; font-style:italic; font-size:15px; line-height:1.5;}
.quote-banner span.author{display:block; margin-top:4px; font-size:12px; opacity:.75; font-style:normal;}

/* ================= HERO (landing) ================= */
.hero{min-height:calc(100vh - 100px); display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; padding:40px 20px;}
.hero h1{font-size:clamp(2rem, 6vw, 3.6rem); margin-bottom:10px; text-shadow:0 4px 30px rgba(0,0,0,0.25);}
.hero p{font-size:clamp(1rem,2.5vw,1.2rem); color:var(--text-muted); max-width:560px; margin-bottom:28px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.floating-icons{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:-1;}

/* ================= CARDS / GRID ITEMS ================= */
.stat-card{padding:20px; text-align:center;}
.stat-card .num{font-size:30px; font-weight:800; font-family:var(--font-display);}
.stat-card .lbl{font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-top:4px;}

.paper-card, .rec-card{padding:18px; display:flex; flex-direction:column; gap:10px; transition:transform .25s ease;}
.paper-card:hover, .rec-card:hover{transform:translateY(-4px);}
.tag-row{display:flex; gap:6px; flex-wrap:wrap;}

/* progress bar */
.progress-track{width:100%; height:12px; border-radius:20px; background:rgba(255,255,255,0.18); overflow:hidden; border:1px solid rgba(255,255,255,0.25);}
.progress-fill{height:100%; border-radius:20px; background:linear-gradient(90deg,var(--accent-1),var(--accent-4)); transition:width 1s cubic-bezier(.2,1,.3,1); position:relative;}
.progress-fill.gold{background:linear-gradient(90deg,var(--accent-3),var(--accent-2));}

/* reward points pill */
.reward-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:50px;
  background:linear-gradient(135deg, rgba(255,209,102,0.3), rgba(241,91,181,0.3));
  border:1px solid rgba(255,255,255,0.35); font-weight:700;
}

/* avatar */
.avatar{width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.5); background:rgba(255,255,255,0.2);}
.avatar-lg{width:90px; height:90px;}

/* photo feed grid */
.photo-card{overflow:hidden; padding:0;}
.photo-card img{width:100%; display:block; aspect-ratio:1/1; object-fit:cover;}
.photo-card .pc-body{padding:14px;}
.photo-actions{display:flex; align-items:center; gap:14px; margin-top:8px;}
.like-btn{display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--text-main); font-weight:600;}
.like-btn.liked{color:#ff5e94;}
.countdown-chip{position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.5); padding:4px 10px; border-radius:20px; font-size:11px;}

/* confetti canvas */
#confetti-canvas{position:fixed; inset:0; pointer-events:none; z-index:8000;}

/* reward popup */
.reward-pop{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:8500;
  padding:36px 44px; text-align:center; animation:rewardPop .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes rewardPop{from{transform:translate(-50%,-50%) scale(.5); opacity:0;} to{transform:translate(-50%,-50%) scale(1); opacity:1;}}
.reward-pop .emoji{font-size:64px; animation:bounce 1s infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}

/* bottom mobile nav */
.mobile-tabbar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:600;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(20,15,45,0.55); backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.2);
  justify-content:space-around;
}
.mobile-tabbar a{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; color:var(--text-muted); font-weight:600; padding:4px 8px; border-radius:12px;}
.mobile-tabbar a.active{color:#fff; background:rgba(255,255,255,0.15);}
.mobile-tabbar a i{font-size:18px;}

/* table */
table.data-table{width:100%; border-collapse:collapse; font-size:14px;}
.data-table th, .data-table td{padding:10px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.15);}
.data-table th{color:var(--text-muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.5px;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* tabs */
.tab-bar{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.tab-btn{padding:10px 18px; border-radius:50px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); color:var(--text-main); font-weight:600; font-size:13px;}
.tab-btn.active{background:linear-gradient(135deg,var(--accent-1),var(--accent-4)); color:#06243a;}

.empty-state{text-align:center; padding:50px 20px; color:var(--text-muted);}
.empty-state i{font-size:46px; margin-bottom:14px; opacity:.6;}

.section-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px;}

.footer{text-align:center; padding:40px 20px 100px; color:var(--text-muted); font-size:13px;}

/* skeleton loading */
.skeleton{background:linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.25) 37%, rgba(255,255,255,0.1) 63%); background-size:400% 100%; animation:skeleton 1.4s ease infinite; border-radius:var(--radius-sm);}
@keyframes skeleton{0%{background-position:100% 50%;} 100%{background-position:0 50%;}}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 720px){
  .nav-links{position:fixed; top:80px; right:16px; left:16px; flex-direction:column; align-items:stretch; padding:14px; border-radius:22px; background:rgba(20,15,45,0.75); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.25); display:none; gap:4px;}
  .nav-links.open{display:flex;}
  .nav-links a, .nav-links button{text-align:left; width:100%;}
  .hamburger{display:flex;}
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
  body{padding-bottom:70px;}
  .mobile-tabbar{display:flex;}
  .container{padding:0 14px;}
  .card{padding:16px;}
  .hero h1{font-size:2rem;}
  .navbar-inner{border-radius:24px; flex-wrap:wrap;}
}
@media (max-width:480px){
  .modal-box{padding:20px;}
  .reward-pop{padding:26px 24px; width:90%;}
}