/* Existing CSS preserved exactly as in your file */












.status-image {border-radius: 50%;border: 5px solid transparent;transition: border-color 0.3s ease;}
.dropdown-menu {max-height: 0;overflow: hidden;opacity: 0;transform: translateY(-10px);pointer-events: none;transition: max-height 0.3s ease,opacity 0.3s ease,transform 0.3s ease;}
.dropdown-menu.show {max-height: 500px; opacity: 1;transform: translateY(0);pointer-events: auto;}
.skeleton-container {padding: 16px;width: 300px;}
.skeleton-line {background-color: #eee;height: 16px;margin-bottom: 10px;border-radius: 4px;position: relative;overflow: hidden;}
.skeleton-line::after {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);animation: shimmer 1.2s infinite;}
@keyframes shimmer {100% {left: 100%;}}
.edu-theme { background-color: #F0F8FF; }
.edu-theme-black { background-color: #0a0a0a; }
.box { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
.box.visible { opacity: 1; transform: translateY(0); }
.spinner {display: inline-block;width: 20px;height: 20px;border: 4px solid #ccc;border-top: 4px solid #3498db;border-radius: 50%;animation: spin 10s linear infinite;vertical-align: middle;}
.spin-container {position: relative;width: 150px;height: 150px;margin: 20px auto;}
.spin-border {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 4px solid #2196F3;border-top: 4px solid transparent;border-radius: 50%;animation: spin 1s linear infinite;}
.image-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes glow {0%   { color: #fff; text-shadow: 0 0 5px #00f, 0 0 10px #0ff; }50%  { color: #0ff; text-shadow: 0 0 20px #00f, 0 0 30px #0ff; }100% { color: #fff; text-shadow: 0 0 5px #00f, 0 0 10px #0ff; }}
.glow-text { animation: glow 1.5s infinite; font-weight: bold; }
@keyframes glowPulse { 0% { box-shadow: 0 0 1px #5c6bc0, 0 0 10px #5c6bc0, 0 0 20px #5c6bc0; } 50% { box-shadow: 0 0 5px #7986cb, 0 0 30px #7986cb, 0 0 45px #7986cb; } 100% { box-shadow: 0 0 2px #5c6bc0, 0 0 10px #5c6bc0, 0 0 20px #5c6bc0; } }
.btnglow { animation: glowPulse 1.5s infinite; transition: transform 0.2s ease-in-out; }
.hscrollbar::-webkit-scrollbar { display: none; }
.page { width: 21cm; min-height: 29.7cm; padding: 0.5cm; margin: 1cm auto; border: 0px #D3D3D3 solid; border-radius: 5px; background-color: white; box-shadow: 1 1 1px rgba(0, 0, 0, 0.1); }
.page1 { width: 31cm; min-height: 20.7cm; padding: 0.5cm; margin: 1cm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 1 1 1px rgba(0, 0, 0, 0.1); }
@page { size: A4; margin: 0; }
@media print {
.page, .page1 {
margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial;
box-shadow: initial; background: initial; page-break-after: always;
}
}

div.sticky { position: -webkit-sticky; position: sticky; top: 500; background-color: yellow; padding: 50px; font-size: 20px; }

.welcome-container {
max-width: 900px;
margin: auto;
padding: 5px 10px;
text-align: center;
}
.welcome-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
margin-top: 40px;
}
.welcome-card {
background: #1b263b;
border-radius: 12px;
padding: 10px;
transition: 0.3s;
}
.welcome-card:hover {
transform: scale(1.05);
background: #243b55;
}
.welcome-card img {
width: 100%;
border-radius: 8px;
}


/* Excel-like Table */
    .edu-table-excel {
      border-collapse: collapse;
      width: 100%;
      font-family: "Verdana", Tahoma, sans-serif;
      font-size: 14px;
    }
    .edu-table-excel th, .edu-table-excel td {
      border: 1px solid #d4d4d4;
      padding: 8px 12px;
      text-align: left;
    }
    .edu-table-excel th { background-color: #f3f6f9; font-weight: bold; }
    .edu-table-excel tr:nth-child(even) { background-color: #f9f9f9; }
    .edu-table-excel tr:hover { background-color: #dbeef4; }

    /* Modern Carded Table */
    .edu-table-modern {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 8px;
      font-family: "Poppins", sans-serif;
    }
    .edu-table-modern th {
      background: #4f46e5; color: white; padding: 12px; text-align: left; border-radius: 6px 6px 0 0;
    }
    .edu-table-modern td {
      background: #fff; padding: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .edu-table-modern tr:hover td { background: #f0f4ff; }

    /* Clean Minimalist */
    .edu-table-clean {
      border-collapse: collapse; width: 100%; font-family: "Helvetica Neue", sans-serif; font-size: 15px;
    }
    .edu-table-clean th, .edu-table-clean td {
      border-bottom: 1px solid #e0e0e0; padding: 10px 15px; text-align: left;
    }
    .edu-table-clean th { background: #fafafa; font-weight: 600; color: #555; }
    .edu-table-clean tr:hover { background: #f5f5f5; }

    /* Dark Mode Table */
    .edu-table-dark {
      width: 100%; border-collapse: collapse; font-family: "Roboto Mono", monospace; background: #1e1e2f; color: #dcdcdc;
    }
    .edu-table-dark th, .edu-table-dark td { padding: 12px; border: 1px solid #333; }
    .edu-table-dark th { background: #2a2a40; color: #00ffcc; }
    .edu-table-dark tr:nth-child(even) { background: #252539; }
    .edu-table-dark tr:hover { background: #33334d; }

    /* Elegant Bordered */
    .edu-table-elegant {
      width: 100%; border: 2px solid #3b82f6; border-collapse: collapse; font-family: "Georgia", serif; font-size: 15px;
    }
    .edu-table-elegant th, .edu-table-elegant td {
      border: 1px solid #3b82f6; padding: 10px 14px; text-align: left;
    }
    .edu-table-elegant th { background: #3b82f6; color: white; font-weight: bold; }
    .edu-table-elegant tr:nth-child(even) { background: #eef5ff; }
    .edu-table-elegant tr:hover { background: #dceeff; }

    /* ========== SEARCH + PAGINATION + EXPORT ========== */
    .edu-search { display: flex; justify-content: flex-end; margin: 10px 0; }
    .edu-search input {
      padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; width: 220px;
    }
    .edu-search input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 6px rgba(79,70,229,0.3); }

    .edu-pagination { display: flex; justify-content: center; gap: 6px; margin: 15px 0; }
    .edu-pagination button {
      padding: 6px 12px; border: 1px solid #ddd; background: #fff; cursor: pointer; border-radius: 6px;
    }
    .edu-pagination button.active, .edu-pagination button:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }

    .edu-export { display: flex; justify-content: flex-end; gap: 8px; margin: 10px 0; }
    .edu-export button {
      padding: 6px 12px; border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer;
    }
    .edu-export button:hover { background: #4f46e5; color: white; border-color: #4f46e5; }

.letter {
font-family: "Segoe UI", serif;
font-size:1rem;
width: 794px;   /* A4 width at 96dpi */
height: 1123px; /* A4 height at 96dpi */
margin: 20px auto;
padding: 40px;
border: 1px solid #ccc;
background: white;
}


.otp input {
  width: 40px;
  height: 40px;
  margin: 5px;
  font-size: 20px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 8px;
  outline: none;
}

.otp input:focus {
  border-color: #2563eb; /* blue glow */
}


.workstation-card {
  background: #f7f9fc;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.search-box input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

.menu-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  text-align: left;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
}

.menu-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

.menu-btn span {
  flex: 1;
}

.menu-btn .arrow {
  color: #999;
}

/* Icon colors */
.text-blue { color:#2196F3; }
.text-light-blue { color:#03A9F4; }
.text-indigo { color:#3F51B5; }
.text-orange { color:#FF5722; }
.text-deep-orange { color:#FF7043; }
.text-purple { color:#673AB7; }
.gedp-bg { background-color:#f7f9fc;}