body {

            background: #f8fafc;

            color: #334155;

            font-family:
                'Segoe UI',
                system-ui,
                sans-serif;

            min-height: 100vh;

        }


        .header-card {

            background: #ffffff;

            border-bottom:
                1px solid #e2e8f0;

            padding: 20px 0;

            box-shadow:
                0 2px 4px
                rgba(0,0,0,0.02);

        }


        .search-card {

            background: #ffffff;

            border:
                1px solid #e2e8f0;

            border-radius: 20px;

            padding: 30px;

            max-width: 850px;

            margin: 30px auto;

            box-shadow:
                0 10px 25px
                rgba(0,0,0,0.03);

        }


        .form-control-custom,
        .form-select-custom {

            background: #f8fafc;

            border:
                1px solid #cbd5e1;

            color: #0f172a;

            border-radius: 30px;

            padding:
                10px 20px;

        }


        .form-control-custom:focus,
        .form-select-custom:focus {

            border-color: #0284c7;

            box-shadow:
                0 0 0 3px
                rgba(2,132,199,0.15);

        }


        .btn-theme {

            background:
                linear-gradient(
                    135deg,
                    #38bdf8,
                    #0284c7
                );

            border: none;

            color: #ffffff;

            font-weight: 600;

            border-radius: 30px;

            padding:
                10px 25px;

        }


        .btn-theme:hover {

            color: #ffffff;

            opacity: 0.95;

        }


        .grade-slip-container {

            max-width: 750px;

            margin: 40px auto;

            background: #ffffff;

            border:
                2px solid #000000;

            padding: 30px;

            box-shadow:
                0 0 20px
                rgba(0,0,0,0.05);

            color: #000000;

        }


        .slip-header {

            text-align: center;

            font-family:
                'Times New Roman',
                Times,
                serif;

            margin-bottom: 20px;

        }


        .slip-header h2 {

            font-weight: bold;

            font-size: 24px;

            margin-bottom: 2px;

            text-transform: uppercase;

        }


        .slip-header h3 {

            font-size: 18px;

            margin-bottom: 2px;

        }


        .slip-header h4 {

            font-size: 16px;

            margin-bottom: 0;

        }


        .table-meta {

            width: 100%;

            border-collapse: collapse;

            margin-bottom: 25px;

            font-family: Arial, sans-serif;

        }


        .table-meta td {

            border:
                1px solid #000000;

            padding:
                6px 10px;

            font-size: 13px;

        }


        .label-cell {

            font-weight: bold;

            width: 15%;

            font-size:
                11px !important;

        }


        .value-cell {

            font-weight: bold;

            text-transform: uppercase;

        }


        .table-grades {

            width: 100%;

            border-collapse: collapse;

            font-family: Arial, sans-serif;

        }


        .table-grades th {

            border:
                1px solid #000000;

            padding: 10px;

            font-weight: bold;

            font-size: 14px;

            text-transform: uppercase;

        }


        .table-grades th.col-subjects {

            background-color: #f2dddc;

            width: 55%;

        }


        .table-grades th.col-grades {

            background-color: #dbe5f1;

            width: 20%;

        }


        .table-grades th.col-remarks {

            background-color: #f2dddc;

            width: 25%;

        }


        .table-grades td {

            border:
                1px solid #000000;

            padding:
                8px 12px;

            font-size: 13px;

            font-weight: bold;

        }


        .subject-name {

            text-align: left;

            text-transform: uppercase;

        }


        .grade-value {

            text-align: center;

            color: #1e467a;

        }


        .remark-value {

            text-align: center;

            text-transform: uppercase;

        }


        .remark-passed {

            color: #1a4d2e;

        }


        .remark-failed {

            color: #8a0000;

        }


        .no-print {

            display: block;

        }


        @media print {

            .no-print,
            .header-card,
            .search-card {

                display: none !important;

            }


            body {

                background: #ffffff;

            }


            .grade-slip-container {

                margin:
                    0 auto;

                box-shadow: none;

                page-break-after: always;

            }

        }