/* ═══════════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════════ */
:root {
  --bg:       #050f08;
  --bg-panel: #0a1a0f;
  --bg-card:  #0f2419;
  --g1: #1a5c30; --g2: #27ae60; --g3: #2ecc71; --gl: #a8e6cf;
  --glow: rgba(46,204,113,.28);
  --txt:  #e8f5e9; --txt2: #81c784; --muted: #4a7a5a;
  --gold: #f0c040; --purple: #9b59b6; --blue: #3498db; --red: #e74c3c;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(26,92,48,.15) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(46,204,113,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%,rgba(26,92,48,.18) 0%, transparent 55%);
}

/* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
nav {
  position:sticky; top:0; z-index:200;
  background:rgba(5,15,8,.9); backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(46,204,113,.18);
  padding:.75rem 1.5rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:.75rem;
}
.logo {
  display:flex; align-items:center; gap:.5rem;
  font-size:1.3rem; font-weight:900; letter-spacing:1px;
  background:linear-gradient(135deg,#2ecc71,#a8e6cf);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  white-space:nowrap;
}
.nav-logo-img {
  width:32px; height:32px; object-fit:contain;
  filter:drop-shadow(0 1px 4px rgba(46,204,113,.5));
}
.nav-links { display:flex; gap:.9rem; list-style:none; justify-content:center; }
.nav-links a {
  color:var(--txt2); text-decoration:none; font-size:.88rem;
  cursor:pointer; transition:color .25s; padding:.25rem 0;
}
.nav-links a:hover, .nav-links a.active { color:var(--g3); }
.badge {
  background:var(--g2); color:#fff; border-radius:20px;
  padding:.1rem .45rem; font-size:.72rem; margin-left:.2rem;
}
.nav-user { display:flex; align-items:center; gap:.75rem; }
.nav-user span { font-size:.85rem; color:var(--txt2); font-weight:600; }
.logout-btn {
  background:rgba(46,204,113,.1); border:1px solid rgba(46,204,113,.25);
  color:var(--txt2); padding:.35rem .9rem; border-radius:8px;
  font-size:.8rem; cursor:pointer; transition:all .25s;
}
.logout-btn:hover { background:rgba(46,204,113,.2); color:var(--g3); }

/* ═══════════════════════════════════════════
   PAGES
═══════════════════════════════════════════ */
.page { display:none; position:relative; z-index:1; }
.page.active { display:block; }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero { text-align:center; padding:5rem 1.5rem 2.5rem; }
.hero h1 {
  font-size:clamp(2.2rem,6vw,4rem); font-weight:900; line-height:1.1;
  background:linear-gradient(135deg,#2ecc71 0%,#a8e6cf 50%,#2ecc71 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:1rem;
}
.hero p { color:var(--txt2); font-size:1.05rem; max-width:480px; margin:0 auto 2.5rem; }

/* ═══════════════════════════════════════════
   CODE INPUT
═══════════════════════════════════════════ */
.code-box { max-width:480px; margin:0 auto; }
.code-row {
  display:flex; border-radius:16px; overflow:hidden;
  box-shadow:0 0 40px rgba(46,204,113,.16);
}
.code-input {
  flex:1;
  background:rgba(15,36,25,.9);
  border:2px solid rgba(46,204,113,.3); border-right:none;
  border-radius:16px 0 0 16px;
  padding:.95rem 1.5rem;
  color:var(--txt); font-size:1.2rem; font-family:'Courier New',monospace;
  font-weight:700; letter-spacing:3px; outline:none;
  transition:border-color .3s, box-shadow .3s;
}
.code-input:focus { border-color:var(--g3); box-shadow:0 0 20px var(--glow); }
.code-input::placeholder { color:var(--muted); letter-spacing:1px; }
.unlock-btn {
  background:linear-gradient(135deg,#27ae60,#2ecc71);
  border:none; padding:.95rem 1.8rem;
  color:#fff; font-size:1rem; font-weight:800;
  cursor:pointer; border-radius:0 16px 16px 0;
  transition:all .25s; white-space:nowrap;
}
.unlock-btn:hover { background:linear-gradient(135deg,#2ecc71,#a8e6cf); }
.unlock-btn:active { transform:scale(.97); }
.input-hint { text-align:center; color:var(--muted); font-size:.78rem; margin-top:.65rem; }

/* ═══════════════════════════════════════════
   DEMO CHIPS
═══════════════════════════════════════════ */
.demo-box {
  margin:2rem auto 0; max-width:480px;
  background:rgba(15,36,25,.5); border:1px solid rgba(46,204,113,.15);
  border-radius:16px; padding:1.3rem; text-align:center;
}
.demo-box h4 { color:var(--txt2); font-size:.78rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:.9rem; }
.demo-chips { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.chip {
  background:rgba(46,204,113,.1); border:1px solid rgba(46,204,113,.3);
  border-radius:8px; padding:.28rem .75rem;
  font-family:'Courier New',monospace; font-size:.82rem; color:var(--g3);
  cursor:pointer; transition:all .25s; user-select:none;
}
.chip:hover { background:rgba(46,204,113,.22); transform:translateY(-1px); }
.chip.used  { opacity:.32; text-decoration:line-through; pointer-events:none; }

/* ═══════════════════════════════════════════
   SECTION LAYOUT
═══════════════════════════════════════════ */
.section { padding:2rem; max-width:1440px; margin:0 auto; }
.sec-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.8rem; flex-wrap:wrap; gap:1rem;
}
.sec-title { font-size:1.75rem; font-weight:800; }
.sec-title span { color:var(--g3); }

/* ═══════════════════════════════════════════
   STATS BAR
═══════════════════════════════════════════ */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1rem; margin-bottom:2rem; }
.stat {
  background:rgba(15,36,25,.7); border:1px solid rgba(46,204,113,.15);
  border-radius:14px; padding:1rem; text-align:center;
}
.stat-v { font-size:2rem; font-weight:900; color:var(--g3); }
.stat-l { font-size:.75rem; color:var(--muted); margin-top:.2rem; }

/* ═══════════════════════════════════════════
   FILTER BUTTONS
═══════════════════════════════════════════ */
.filters { display:flex; flex-direction:column; gap:.5rem; }
.filter-row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.filter-label { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; min-width:40px; }
.fbtn {
  padding:.35rem .9rem; border-radius:20px;
  border:1px solid rgba(46,204,113,.28); background:transparent;
  color:var(--txt2); font-size:.82rem; cursor:pointer; transition:all .25s;
}
.fbtn:hover, .fbtn.active { background:rgba(46,204,113,.18); border-color:var(--g3); color:var(--g3); }

/* ═══════════════════════════════════════════
   DROP HEADER
═══════════════════════════════════════════ */
.drop-header {
  grid-column:1/-1;
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1rem;
  border-left:3px solid var(--g2);
  background:rgba(46,204,113,.06);
  border-radius:0 10px 10px 0;
  margin-top:.5rem;
}
.drop-header-title {
  font-size:1rem; font-weight:800; color:var(--g3);
}
.drop-header-title span { color:var(--txt2); font-weight:500; font-size:.88rem; }
.drop-header-count { font-size:.8rem; color:var(--muted); }

/* ═══════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════ */
.prog-bar { height:8px; background:rgba(46,204,113,.15); border-radius:10px; margin-bottom:1.8rem; overflow:hidden; }
.prog-fill { height:100%; background:linear-gradient(90deg,#27ae60,#2ecc71); border-radius:10px; transition:width .8s ease; }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn { padding:.75rem 1.8rem; border-radius:12px; border:none; font-size:.95rem; font-weight:800; cursor:pointer; transition:all .25s; }
.btn-p { background:linear-gradient(135deg,#27ae60,#2ecc71); color:#fff; }
.btn-p:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(46,204,113,.4); }
.btn-s { background:rgba(46,204,113,.1); color:var(--g3); border:1px solid rgba(46,204,113,.3); }
.btn-s:hover { background:rgba(46,204,113,.2); }

/* ═══════════════════════════════════════════
   NOTIFICATION
═══════════════════════════════════════════ */
.notif {
  position:fixed; top:76px; right:1.5rem; z-index:1000;
  padding:.9rem 1.4rem; border-radius:12px; font-weight:700; font-size:.9rem;
  transform:translateX(120%); transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  max-width:340px; line-height:1.4; pointer-events:none;
}
.notif.show { transform:translateX(0); }
.notif.ok  { background:linear-gradient(135deg,#1a5c30,#27ae60); border:1px solid #2ecc71; }
.notif.err { background:linear-gradient(135deg,#5c1a1a,#c0392b); border:1px solid #e74c3c; }
.notif.inf { background:linear-gradient(135deg,#1a3a5c,#2980b9); border:1px solid #3498db; }

/* ═══════════════════════════════════════════
   PARTICLES
═══════════════════════════════════════════ */
.particle {
  position:fixed; pointer-events:none; z-index:700; font-size:1.1rem;
  animation:pfly 1.6s ease-out forwards;
}
@keyframes pfly {
  0%   { opacity:1; transform:translateY(0) scale(1) rotate(0); }
  100% { opacity:0; transform:translateY(-180px) scale(.5) rotate(360deg); }
}

/* ═══════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════ */
.empty { grid-column:1/-1; text-align:center; padding:4rem 1rem; }
.empty-ico { font-size:4.5rem; margin-bottom:1.2rem; opacity:.4; }
.empty h3  { font-size:1.4rem; color:var(--txt2); margin-bottom:.6rem; }
.empty p   { color:var(--muted); }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:600px) {
  nav { padding:.7rem 1rem; grid-template-columns:auto 1fr auto; }
  .nav-links { gap:.5rem; }
  .nav-links a { font-size:.78rem; }
  .hero { padding:3rem 1rem 2rem; }
  .section { padding:1rem; }
  .nav-user span { display:none; }
  .logout-btn { padding:.3rem .65rem; font-size:.75rem; }
}