@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
        @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: #F4FFFF;
        }
        .header {
            background: linear-gradient(90deg, #056B66, #0AD1C8);
            color: white;
            padding: 15px;
            display: flex;
            align-items: center;
            height: 107px;
            width: 100%;  
            box-sizing: border-box;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
        }
        .header img {
            position: absolute;
            top: 13px;
            left: 49px;
            width: 80px;
            height: 80px;
        }
        .header-title {
            position: absolute;
            top: 34px;
            left: 169px;
            width: auto;
            height: 48px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            color: #FFFFFF;
            display: flex;
            align-items: center;
        }

        .header-title .main-text {
            font-size: 32px;
            line-height: 100%;
            letter-spacing: 0;
        }

        .header-title .sub-text {
            font-size: 30px;
            line-height: 100%;
            letter-spacing: 0;
            font-style: italic;
            margin-left: 8px;
        }

        .profile-icon {
            margin-left: auto;
            margin-right: 20px;
            background-color: white;
            color: #056B66;
            border-radius: 50%;
            width: 66px;
            height: 66px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 24px;  
        }
        .date-container {
            display: flex;
            align-items: center;
            background-color: #2D6A76;
            color: white;
            border-radius: 6px;
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            font-weight: 400;
            line-height: 140%;
            width: 261px;
            height: 39px;
            box-sizing: border-box;
            text-align: center;
            letter-spacing: 0.5%;
            margin-left: auto;
        }
        .date-section, .time-section {
            display: flex;
            align-items: center;
            height: 100%;
            padding: 0 12px;
            gap: 8px;
        }
        .main-content {
            margin: 0 auto;
            max-width: 1280px;
            padding: 32px 0 0 0; 
        }
        .breadcrumb {
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            color: #7A7A7A;
            margin-bottom: 8px;
            margin-top: 16px;
        }
        .breadcrumb a {
            color: #7A7A7A;
            text-decoration: none;
        }
        .breadcrumb span {
            margin: 0 4px;
        }
        .page-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 32px;
            font-weight: 700;
            margin: 0 0 16px 0;
            color: #222;
        }
        .btn-primary {
            background: #056B66;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px 32px;
            font-size: 18px;
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
            cursor: pointer;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .btn-primary i {
            font-size: 18px;
        }
        .search-box {
            float: right;
            margin-bottom: 16px;
        }
        .search-box input {
            padding: 10px 16px;
            border-radius: 8px;
            border: 1px solid #ccc;
            font-size: 16px;
            width: 260px;
        }
        .table-container {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.03);
            padding: 0 0 24px 0;
            margin-top: 24px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-family: 'Poppins', sans-serif;
            font-size: 16px;
        }
        thead {
            background: #F4FFFF;
        }
        th, td {
            padding: 16px 8px;
            text-align: left;
        }
        th {
            font-weight: 600;
            color: #222;
            font-size: 15px;
        }
        td {
            font-size: 15px;
        }
        .status-tolak { color: #E74C3C; font-weight: 700; }
        .status-lulus { color: #00B96B; font-weight: 700; }
        .status-proses { color: #F5A623; font-weight: 700; font-style: italic; }
        .kategori-badge {
            background: #E6FFF2;
            color: #00B96B;
            border-radius: 8px;
            padding: 4px 12px;
            font-size: 14px;
            font-weight: 500;
            display: inline-block;
        }
        .countdown-red { color: #E74C3C; font-weight: 700; }
        .action-menu {
            cursor: pointer;
            font-size: 22px;
            color: #222;
            text-align: center;
        }
        @media (max-width: 1200px) {
            .main-content { padding: 120px 0 0 0; }
        }
        @media (max-width: 768px) {
            .main-content { padding: 100px 0 0 0; }
            .header-title { left: 140px; font-size: 22px; width: 300px; }
            .date-container { width: 100%; justify-content: flex-end; }
        }
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.18);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.13);
            max-width: 1080px;
            width: 1046px;
            padding: 0 0 32px 0;
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
        }
        .modal-header {
            background: linear-gradient(90deg, #337984 0%, #6ED0EA 100%);
            color: #fff;
            padding: 0 32px;
            font-family: 'Montserrat', sans-serif;
            font-size: 28px;
            font-weight: 700;
            border-radius: 5px 5px 0 0;
            display: flex;
            align-items: center;
            height: 81px;
            width: 100%;
            box-sizing: border-box;
            margin-top: 26px;
        }
        .modal-header .modal-title {
            font-size: 28px;
            font-weight: 700;
        }
        .modal-header #modal-nombor-fail {
            font-size: 28px;
            font-weight: 700;
            margin-left: 24px;
        }
        .modal-body {
            padding: 40px 48px 0 48px;
            font-family: 'Poppins', sans-serif;
            color: #222;
            flex: 1;
        }
        .modal-row {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
            gap: 24px;
        }
        .modal-label {
            min-width: 220px;
            font-weight: 400;
            color: #222;
        }
        .modal-value {
            min-width: 180px;
            font-weight: 500;
            color: #222;
        }
        #modal-status-fail {
            color: #E74C3C;
            font-weight: 700;
        }
        #modal-status-pembinaan {
            color: #7A7A7A;
            font-style: italic;
            font-weight: 400;
        }
        .modal-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 32px 48px 0 48px;
        }
        .modal-btn {
            font-family: 'Poppins', sans-serif;
            font-size: 18px;
            font-weight: 600;
            border-radius: 8px;
            border: 1.5px solid #056B66;
            background: #fff;
            color: #056B66;
            padding: 12px 36px;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
        }
        .modal-btn.modal-proses {
            background: #056B66;
            color: #fff;
            border: none;
        }
        .modal-btn:active {
            opacity: 0.8;
        }
        @media (max-width: 1200px) {
            .modal-content { width: 98vw; min-width: unset; max-width: 100vw; }
        }
        @media (max-width: 900px) {
            .modal-content { width: 100vw; height: auto; padding: 0 0 24px 0; }
            .modal-body, .modal-footer { padding-left: 16px; padding-right: 16px; }
        }
        @media (max-width: 600px) {
            .modal-content { width: 100vw; border-radius: 0; }
            .modal-header { font-size: 20px; padding: 18px 12px; }
            .modal-body, .modal-footer { padding: 8px; }
            .modal-row { flex-direction: column; align-items: flex-start; gap: 4px; }
            .modal-label, .modal-value { min-width: unset; }
        }