*{font-family:Arial}
body{margin:0;background:#f4f6f9}
.center{display:flex;justify-content:center;align-items:center;height:100vh}
header{background:#4f46e5;color:white;padding:15px 25px;display:flex;justify-content:space-between}
.grid{display:flex;flex-wrap:wrap;gap:20px;padding:20px}
.card{background:white;padding:20px;border-radius:10px;width:200px;box-shadow:0 8px 20px rgba(0,0,0,0.1)}
input,select{width:100%;padding:8px;margin:6px 0}
button,.btn{background:#4f46e5;color:white;padding:10px;border:none;border-radius:6px;text-decoration:none}
.btn.danger{background:#ef4444}
.avatar{width:100%;height:140px;object-fit:cover;border-radius:8px}
.badge{background:#22c55e;color:white;padding:4px 8px;border-radius:5px;font-size:12px}
.links a{margin-right:8px;color:#4f46e5;text-decoration:none}

* {
  font-family: 'Lato', sans-serif;
}
body {
  font-weight: 400;
}

h5 {
  font-weight: 700;
}
  .dash-bg {
      min-height: 100vh;

      background-image: url("/static/images/stud-bg10.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

.flip-card {
  perspective: 1000px;
   height: 300px; 
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 0.8s;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}
.flip-front{
  background-color: white;
}
.flip-front, .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.flip-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flip-back {
  /* background: #ffffff; */
  transform: rotateY(180deg);
  padding: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
}

.flip-back h5 {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.flip-back p {
  font-weight: 500;
  opacity: 0.85;     /* soft but readable */
  margin-bottom: 4px;
   color: white;
}
.compose-mail a {
  color: white !important;
}

.flip-back .badge {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 5px;
}

.social a {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10%;
  font-size: 20px;
  color: white !important;
  transition: transform 0.3s, box-shadow 0.3s;
}

/* LinkedIn */
.social a:first-child {
  background: #0a66c2;
}

/* Instagram */
.social a:nth-child(2)  {
  background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af);
}

.social a:nth-child(3) {
  background: #ea4335;   /* Gmail red */
}


.social a:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* tag picker */
.tag-input-box {
  min-height: 40px;
  border: 1px solid #ced4da;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-pill {
  background: #4f46e5;
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tag-pill i {
  cursor: pointer;
  font-size: 10px;
}

.tag-options span {
  background: #e5e7eb;
  padding: 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 12px;
}

.tag-options span:hover {
  background: #c7d2fe;
}

.card-menu{
  position: absolute;
  top: 10px;
  left: 10px;
  /* color: #ef4444; */
  font-size: 15px;
}

.icon-circle-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);

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

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: 0.2s;
}

.icon-circle-btn i {
  font-size: 14px;
  color: #333;
}

.icon-circle-btn:hover {
  background: white;
  transform: scale(1.05);
}