:root{
  --bg-dark:#030812;
  --cyan:#00ade1;
  --pink:#ff004f;
  --yellow:#fffd1c;
  --green:#00dc82;
  --purple:#dc00d4;
  --glass:rgba(10,25,47,.62);
  --glass2:rgba(10,25,47,.40);
  --white:rgba(255,255,255,.92);
}

*{box-sizing:border-box}
body{
  background:var(--bg-dark);
  color:#fff;
  font-family:'Rajdhani',sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
.mono{font-family:'Share Tech Mono', monospace;}
.small{letter-spacing:.2px}
.text-cyan{color:var(--cyan)}
.text-yellow{color:var(--yellow)}
.link-nexus{color:var(--cyan); text-decoration:none}
.link-nexus:hover{color:var(--yellow)}

.hidden{display:none!important}

/* ===== Background FX ===== */
.tron-bg{position:fixed; inset:0; z-index:-3;
  background:radial-gradient(circle at 50% 35%, #0a192f 0%, #030812 70%);
}
.tron-grid{
  position:absolute; inset:-50%;
  background-image:
    linear-gradient(rgba(0,173,225,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,173,225,.12) 1px, transparent 1px);
  background-size:52px 52px;
  transform:perspective(520px) rotateX(60deg);
  animation:moveGrid 14s linear infinite;
  opacity:.65;
}
@keyframes moveGrid{
  0%{transform:perspective(520px) rotateX(60deg) translateY(0)}
  100%{transform:perspective(520px) rotateX(60deg) translateY(52px)}
}
.scanlines{
  position:absolute; inset:0; z-index:-2;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.02),
    rgba(255,255,255,.02) 1px,
    transparent 2px,
    transparent 6px
  );
  mix-blend-mode:overlay;
  opacity:.35;
}
.glow-orb{
  position:absolute; inset:-10%;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,173,225,.18), transparent 42%),
    radial-gradient(circle at 80% 60%, rgba(220,0,212,.12), transparent 46%),
    radial-gradient(circle at 55% 75%, rgba(255,0,79,.10), transparent 48%);
  z-index:-2;
  filter: blur(0px);
}

/* ===== Auth ===== */
.auth-container{
  width:min(460px, 92vw);
  margin-top:10vh;
  padding:34px;
  border-radius:20px;
  background:var(--glass);
  border:1px solid rgba(0,173,225,.55);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 30px rgba(0,173,225,.12);
}
.brand-title{font-weight:800; letter-spacing:4px; color:var(--cyan)}
.brand-sub{color:rgba(255,255,255,.65); font-size:.85rem}

.form-control{
  background:rgba(0,0,0,.45)!important;
  border:1px solid rgba(0,173,225,.6)!important;
  color:#fff!important;
  font-family:'Share Tech Mono'!important;
}
.form-control:focus{
  border-color:var(--yellow)!important;
  box-shadow:0 0 0 .18rem rgba(255,253,28,.15)!important;
}

.btn-nexus{
  background:transparent;
  border:1px solid var(--cyan);
  color:var(--cyan);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  transition:.22s;
}
.btn-nexus:hover{
  background:var(--cyan);
  color:#000;
  box-shadow:0 0 18px rgba(0,173,225,.35);
}

/* ===== Topbar / Controls ===== */
.topbar{
  background:linear-gradient(to right, rgba(10,25,47,.62), rgba(10,25,47,.30));
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:14px;
  backdrop-filter: blur(12px);
}
.topbar-title{letter-spacing:2px}

.pill{
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.control{
  min-width: 180px;
  border-radius:12px;
}

/* ===== Month Tabs ===== */
.month-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.month-btn{
  position:relative;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-family:'Share Tech Mono';
  font-size:.78rem;
  cursor:pointer;
  transition:.18s;
}
.month-btn:hover{
  border-color:rgba(0,173,225,.45);
  box-shadow:0 0 14px rgba(0,173,225,.10);
}
.month-btn.active{
  border-color:rgba(0,173,225,.75);
  background:rgba(0,173,225,.10);
}
.month-badge{
  margin-left:8px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  font-size:.72rem;
}

/* ===== Year Overview ===== */
.glass-panel{
  border-radius:16px;
  background:var(--glass2);
  border:1px solid rgba(255,255,255,.06);
  padding:14px;
  backdrop-filter: blur(10px);
}
.year-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(90px, 1fr));
  gap:10px;
}
@media (max-width: 1200px){
  .year-grid{ grid-template-columns: repeat(6, minmax(90px, 1fr)); }
}
@media (max-width: 700px){
  .year-grid{ grid-template-columns: repeat(3, minmax(90px, 1fr)); }
}
.year-card{
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:.18s;
}
.year-card:hover{
  border-color:rgba(255,253,28,.40);
  box-shadow:0 0 14px rgba(255,253,28,.08);
}
.year-title{font-family:'Share Tech Mono'; font-size:.78rem}
.year-count{font-weight:900; font-size:1.2rem; color:var(--cyan)}
.year-split{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.dot{
  padding:2px 6px;
  border-radius:999px;
  font-family:'Share Tech Mono';
  font-size:.68rem;
  background:rgba(255,255,255,.08);
}

/* ===== Kanban ===== */
.kanban-column{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:14px;
  min-height:64vh;
  backdrop-filter: blur(10px);
}
.column-title{
  font-family:'Share Tech Mono';
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:900;
  padding-bottom:10px;
  border-bottom:2px solid;
  margin-bottom:12px;
}
.column-title.cyan{color:var(--cyan); border-color:var(--cyan)}
.column-title.yellow{color:var(--yellow); border-color:var(--yellow)}
.column-title.purple{color:var(--purple); border-color:var(--purple)}

.nexus-card{
  background:var(--white);
  color:#111;
  border-radius:12px;
  padding:12px 12px 10px;
  margin-bottom:12px;
  box-shadow:0 10px 16px rgba(0,0,0,.22);
  border-left:5px solid var(--cyan);
  transition:.18s;
}
.nexus-card:hover{transform:translateY(-2px)}
.badge-nexus{
  font-family:'Share Tech Mono';
  font-size:.68rem;
  padding:4px 8px;
  border-radius:8px;
  text-transform:uppercase;
  font-weight:900;
}
.meta{
  font-family:'Share Tech Mono';
  font-size:.74rem;
  color:rgba(0,0,0,.65);
}
.due{
  font-family:'Share Tech Mono';
  font-size:.72rem;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.05);
}

/* ===== Modal ===== */
.nexus-modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  z-index:9999;
}
.nexus-modal-card{
  width:min(760px, 96vw);
  border-radius:16px;
  background:var(--glass);
  border:1px solid rgba(0,173,225,.55);
  padding:16px;
  box-shadow:0 0 30px rgba(0,173,225,.12);
}