/* (Aapka pehle wala CSS yahin hai) */
    * { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    body { background: linear-gradient(135deg,#6a11cb 0%,#2575fc 100%); color:#333; min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:20px; }
    .container { width:100%; max-width:1200px; background:white; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,0.2); overflow:hidden; margin:20px 0; }
    header{ background:#4a6fc7; color:white; padding:20px; text-align:center; position:relative; }
    .logo{ font-size:2.5rem; margin-bottom:10px; }
    h1{ font-size:2rem; margin-bottom:10px; }
    .date-display{ font-size:1.2rem; margin:10px 0; }
    .nav-tabs{ display:flex; background:#3a5bb8; overflow-x:auto; }
    .tab{ padding:15px 25px; cursor:pointer; color:white; font-weight:500; text-align:center; flex:1; min-width:120px; transition:background .3s; }
    .tab:hover{ background:#2c4a93; }
    .tab.active{ background:#1c3a80; border-bottom:3px solid #ffcc00; }
    .content{ padding:25px; }
    .tab-content{ display:none; }
    .tab-content.active{ display:block; animation:fadeIn .5s; }
    @keyframes fadeIn{ from{opacity:0} to{opacity:1} }
    .form-container{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
    @media (max-width:900px){ .form-container{ grid-template-columns:1fr; } }
    .form-section{ background:#f9f9f9; padding:25px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.05); }
    .form-group{ margin-bottom:20px; }
    label{ display:block; margin-bottom:8px; font-weight:500; color:#444; }
    input, select, textarea{ width:100%; padding:12px 15px; border:1px solid #ddd; border-radius:8px; font-size:16px; transition:border .3s; }
    input:focus, select:focus, textarea:focus{ border-color:#4a6fc7; outline:none; box-shadow:0 0 0 2px rgba(74,111,199,.2); }
    .btn{ padding:12px 20px; background:#4a6fc7; color:white; border:none; border-radius:8px; cursor:pointer; font-size:16px; font-weight:500; transition:background .3s; display:inline-flex; align-items:center; justify-content:center; }
    .btn i{ margin-right:8px; } .btn:hover{ background:#3a5bb8; }
    .btn-primary{ background:#4a6fc7; } .btn-success{ background:#2ecc71; } .btn-danger{ background:#e74c3c; }
    .image-upload{ border:2px dashed #ccc; border-radius:8px; padding:20px; text-align:center; cursor:pointer; transition:border .3s; margin-top:10px; }
    .image-upload:hover{ border-color:#4a6fc7; }
    .image-upload i{ font-size:40px; color:#4a6fc7; margin-bottom:10px; }
    .image-upload img{ max-width:100%; max-height:200px; border-radius:8px; margin-top:15px; display:none; }
    .search-box{ display:flex; margin-bottom:25px; }
    .search-box input{ flex:1; border-top-right-radius:0; border-bottom-right-radius:0; }
    .search-box button{ border-top-left-radius:0; border-bottom-left-radius:0; }
    .attendance-result{ background:#f9f9f9; padding:20px; border-radius:8px; margin-top:20px; display:none; }
    .student-info{ display:flex; align-items:center; margin-bottom:15px; }
    .student-info img{ width:80px; height:80px; border-radius:50%; object-fit:cover; margin-right:15px; border:3px solid #4a6fc7; }
    .attendance-status{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:15px; }
    .status-btn{ padding:12px; border-radius:8px; cursor:pointer; border:none; font-weight:500; text-align:center; transition:all .3s; }
    .status-btn:hover{ transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,.1); }
    .present{ background:#e8f5e9; color:#2ecc71; } .absent{ background:#ffebee; color:#e74c3c; } .late{ background:#fff8e1; color:#f39c12; } .leave{ background:#e3f2fd; color:#2196f3; }
    .status-btn.active{ border:3px solid #333; font-weight:bold; }
    .stats-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-bottom:30px; }
    .stat-card{ background:white; border-radius:10px; padding:20px; box-shadow:0 5px 15px rgba(0,0,0,.1); text-align:center; }
    .stat-card i{ font-size:2.5rem; margin-bottom:15px; color:#4a6fc7; }
    .stat-card h3{ font-size:2rem; margin:10px 0; color:#4a6fc7; }
    .recent-activity{ background:white; border-radius:10px; padding:20px; box-shadow:0 5px 15px rgba(0,0,0,.1); margin-top:20px; }
    .activity-list{ list-style:none; margin-top:15px; }
    .activity-item{ padding:15px; border-bottom:1px solid #eee; display:flex; align-items:center; }
    .activity-item:last-child{ border-bottom:none; }
    .activity-item i{ font-size:20px; margin-right:15px; width:24px; text-align:center; }
    .present-activity i{ color:#2ecc71; } .absent-activity i{ color:#e74c3c; } .late-activity i{ color:#f39c12; } .leave-activity i{ color:#2196f3; }
    footer{ text-align:center; padding:20px; color:white; margin-top:auto; }
    .notification{ position:fixed; top:20px; right:20px; padding:15px 20px; border-radius:8px; color:white; background:#2ecc71; box-shadow:0 5px 15px rgba(0,0,0,.2); display:none; z-index:1000; }
    .notification.error{ background:#e74c3c; }
    @media (max-width:768px){ .nav-tabs{ flex-direction:column; } .tab{ min-width:100%; } .attendance-status{ grid-template-columns:1fr 1fr; } }
    /* small report table */
    .report-table { width:100%; border-collapse:collapse; margin-top:15px; }
    .report-table th, .report-table td { padding:8px 10px; border:1px solid #ddd; text-align:left; font-size:14px; }
    .report-controls { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
    .activity-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.actions button {
  background-color: #4a6fc7;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  color: white;
}

.actions button:hover {
  background: #ddd;
}