*{box-sizing:border-box}

body {
  margin:0;
  font-family:'Michroma',sans-serif;
  background: radial-gradient(circle at top,#020202,#05040a,#0a0a11);
  color:#fff;
  display:flex;
  transition:0.4s;
  overflow-x:hidden;
}

/* Sidebar Neon */
#sidebar {
  position:fixed;
  left:0; top:0;
  width:260px; height:100%;
  padding:25px;
  background:rgba(10,10,20,0.65);
  backdrop-filter: blur(18px);
  border-right:2px solid rgba(0,200,255,0.4);
  box-shadow:0 0 25px rgba(0,200,255,0.2);
  border-radius:0 20px 20px 0;
}

#sidebar h2 { margin:0 0 15px; font-size:22px; color:#7af2ff; }

#boardList button {
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,255,255,0.3);
  margin-bottom:10px;
  background:rgba(0,20,40,0.6);
  color:#9dfcff;
  cursor:pointer;
  transition:0.2s;
}
#boardList button.active {
  background:linear-gradient(135deg,#00eaff,#0080ff);
  color:white;
}

/* Neon add board button */
#sidebar button {
  margin-top:10px;
  padding:13px;
  width:100%;
  border-radius:14px;
  border:none;
  background:linear-gradient(135deg,#8a2cff,#00eaff);
  color:white;
  cursor:pointer;
  transition:0.2s;
}
#sidebar button:hover { filter:brightness(1.15); }

/* Main container */
#board-container {
  margin-left:300px;
  padding:30px;
  display:flex;
  gap:30px;
  width:calc(100% - 300px);
  overflow-x:auto;
}

/* List w/ Neon glass and 3D tilt */
.list {
  width:320px;
  background:rgba(20,20,35,0.7);
  backdrop-filter:blur(20px);
  padding:20px;
  border-radius:20px;
  border:1px solid rgba(0,255,255,0.15);
  box-shadow:0 15px 40px rgba(0,0,0,0.4);
  transform-style:preserve-3d;
  transition:transform 0.25s;
}
.list:hover {
  transform: perspective(900px) rotateY(6deg);
}

.list-header {
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  font-size:18px;
  color:#93f4ff;
}

/* Neon 3D cards */
.card {
  padding:15px;
  border-radius:18px;
  margin-bottom:12px;
  cursor:grab;
  background:linear-gradient(135deg,#101020,#202040);
  border:1px solid rgba(0,200,255,0.3);
  box-shadow:0 10px 25px rgba(0,0,0,0.5),
             0 0 12px rgba(0,200,255,0.2);
  transition:0.25s;
  transform-style:preserve-3d;
}
.card:hover {
  transform: perspective(800px) rotateX(6deg) translateY(-3px);
  box-shadow:0 15px 35px rgba(0,0,0,0.6),
             0 0 18px rgba(0,200,255,0.4);
}

/* Neon user tag */
.user-tag {
  display:inline-block;
  background:linear-gradient(135deg,#00eaff,#0066ff);
  padding:4px 8px;
  border-radius:10px;
  margin-top:5px;
  font-size:11px;
}

/* Modal neon */
.modal {
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);
}

.modal-content {
  width:420px;
  background:rgba(15,15,25,0.85);
  padding:20px;
  border-radius:20px;
  color:white;
  border:1px solid rgba(0,200,255,0.25);
  box-shadow:0 0 30px rgba(0,200,255,0.2);
}