*{box-sizing:border-box}
body{margin:0;font-family:system-ui;background:#f4f6fa}
.header{text-align:center;background:#0b5ed7;color:#fff;padding:16px}
.container{max-width:520px;margin:auto;padding:15px}
.card{background:#fff;padding:15px;border-radius:12px;margin-bottom:15px;box-shadow: 0 2px 4px rgba(0,0,0,0.05)}
label{font-weight:600; display: block; margin-top: 10px;}
input,button{width:100%;padding:12px;margin-top:8px}
button{background:#198754;color:#fff;border:0;border-radius:8px;cursor:pointer;font-weight:600}

/* Result Table */
.result-table{width:100%;border-collapse:collapse;margin-top:15px;background:#fff}
.result-table th,.result-table td{border:1px solid #ddd;padding:10px;font-size:14px;text-align:left}
.result-table th{background:#f8f9fa}
.btn-sm{width:auto;padding:6px 12px;font-size:12px;margin-top:0}

/* Professional Pagination */
.pagination-container { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 25px; padding-bottom: 20px; }
.page-btn { padding: 8px 14px; background: #fff; color: #0b5ed7; border: 1px solid #dee2e6; border-radius: 5px; cursor: pointer; font-size: 14px; transition: all 0.2s; width: auto; }
.page-btn.active { background: #0b5ed7; color: #fff; border-color: #0b5ed7; }
.page-btn:hover:not(:disabled) { background: #e9ecef; }
.page-btn:disabled { color: #ccc; cursor: not-allowed; }
.nav-btn { font-weight: bold; min-width: 80px; }
.dots { color: #aaa; padding: 0 5px; }

/* Popup & Marksheet */
.footer { text-align: center; padding: 25px 15px; background: #fff; border-top: 1px solid #e0e0e0; margin-top: 30px; font-size: 14px; }
.popup-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.6); display:flex;align-items:center;justify-content:center;z-index: 1000; }
.popup{ background:#fff;padding:20px;border-radius:10px; width:95%;max-width:520px;max-height: 90vh;overflow-y: auto; }
.ms-table{width:100%;border-collapse:collapse;margin-top:10px}
.ms-table td,.ms-table th{border:1px solid #000;padding:6px;font-size:14px}
.popup-actions{display:flex;justify-content:space-between;margin-top:15px;gap:10px}
.danger{background:#c00;color:#fff}

@media print{
  body *{visibility:hidden}
  .popup, .popup *{visibility:visible}
  .no-print{display:none}
}