:root { --hsc-gpa-calc-accent:#4361ee;--hsc-gpa-calc-accent-deep:#3a56d4;--hsc-gpa-calc-accent-light:#e6f0ff;--hsc-gpa-calc-body-text:#2b2d42;--hsc-gpa-calc-header-text:#1e293b;--hsc-gpa-calc-bg-clc:#f8f9fa;--hsc-gpa-calc-white:#ffffff;--hsc-gpa-calc-border-color:#e0e3e7;--hsc-gpa-calc-danger:#e74c3c;--hsc-gpa-calc-success:#2ecc71;--hsc-gpa-calc-success-deep:#27ae60;--hsc-gpa-calc-border-radius:5px;--hsc-gpa-calc-box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15);--hsc-gpa-calc-transition:all 0.3s ease;--hsc-gpa-calc-width:900px;} .hsc-gpa-calc-main-interface { width:100%;margin:0 auto;background-color:var(--hsc-gpa-calc-white);padding:25px;border:1px solid var(--hsc-gpa-calc-border-color);border-radius:var(--hsc-gpa-calc-border-radius);box-shadow:var(--hsc-gpa-calc-box-shadow);box-sizing:border-box;transition:opacity 0.5s ease-out, transform 0.5s ease-out;} .hsc-gpa-calc-container { background-color:var(--hsc-gpa-calc-bg-clc);border:1px solid var(--hsc-gpa-calc-border-color);border-radius:var(--hsc-gpa-calc-border-radius);padding:35px;margin:0 auto;max-width:var(--hsc-gpa-calc-width) !important;box-sizing:border-box;display:flex;flex-direction:column;gap:25px;} .hsc-gpa-calc-header-container { text-align:center;} .hsc-gpa-calc-title { text-transform:capitalize;font-size:clamp(1.2rem, 1.8vw, 1.8rem);color:var(--hsc-gpa-calc-header-text);font-weight:600;margin:5px 0;} .hsc-gpa-calc-subtitle { font-size:clamp(0.85rem, 1vw, 1rem);color:var(--hsc-gpa-calc-body-text);margin-top:5px;} .hsc-gpa-calc-group-selection { display:flex;justify-content:start;align-items:center;gap:15px;flex-wrap:wrap;} .hsc-gpa-calc-group-btn { background-color:var(--hsc-gpa-calc-accent-light) !important;border:1px solid var(--hsc-gpa-calc-border-color);color:var(--hsc-gpa-calc-body-text) !important;padding:0 25px;border-radius:var(--hsc-gpa-calc-border-radius);cursor:pointer;font-size:1em;font-weight:500;transition:var(--hsc-gpa-calc-transition);flex-grow:1;text-align:center;max-width:200px;height:50px !important;display:flex;align-items:center;justify-content:center;gap:10px;} .hsc-gpa-calc-group-btn:hover { background-color:var(--hsc-gpa-calc-accent-light) !important;border-color:var(--hsc-gpa-calc-accent) !important;color:var(--hsc-gpa-calc-accent) !important;} .hsc-gpa-calc-group-btn.hsc-gpa-calc-active { background-color:var(--hsc-gpa-calc-accent) !important;color:var(--hsc-gpa-calc-white) !important;border-color:var(--hsc-gpa-calc-accent) !important;box-shadow:0 4px 8px rgba(67, 97, 238, 0.2);} .hsc-gpa-calc-group-content { display:none;flex-direction:column;gap:20px;} .hsc-gpa-calc-group-content.hsc-gpa-calc-active { display:flex;} .hsc-gpa-calc-section { padding:20px;border:1px solid var(--hsc-gpa-calc-border-color);border-radius:var(--hsc-gpa-calc-border-radius);background-color:var(--hsc-gpa-calc-white);display:flex;flex-direction:column;gap:15px;} .hsc-gpa-calc-section-title { font-size:1.2em;color:var(--hsc-gpa-calc-header-text);margin-bottom:10px;border-bottom:2px solid var(--hsc-gpa-calc-accent-light);padding-bottom:10px;} .hsc-gpa-calc-subject-input { display:flex;align-items:center;gap:15px;flex-wrap:wrap;} .hsc-gpa-calc-subject-input label { flex:1;min-width:120px;font-weight:500;color:var(--hsc-gpa-calc-body-text);font-size:0.95em;text-transform:capitalize;} .hsc-gpa-calc-input-wrapper { flex:2;display:flex;gap:10px;} .hsc-gpa-calc-subject-input input[type="number"], .hsc-gpa-calc-subject-input select { flex:1;width:100%;min-height:50px !important;box-sizing:border-box;padding:0 12px;border:1px solid var(--hsc-gpa-calc-border-color);border-radius:var(--hsc-gpa-calc-border-radius);font-size:1em;color:var(--hsc-gpa-calc-body-text);transition:border-color 0.2s ease;-moz-appearance:textfield;} .hsc-gpa-calc-subject-input select { appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;text-overflow:ellipsis;} .hsc-gpa-calc-subject-input input[type="number"]::-webkit-outer-spin-button, .hsc-gpa-calc-subject-input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none;margin:0;} .hsc-gpa-calc-subject-input input[type="number"]:focus, .hsc-gpa-calc-subject-input select:focus { outline:none;border-color:var(--hsc-gpa-calc-accent) !important;box-shadow:0 0 0 3px var(--hsc-gpa-calc-accent-light);} .hsc-gpa-calc-subject-input input[type="number"].hsc-gpa-calc-error { border-color:var(--hsc-gpa-calc-danger) !important;} #hsc-gpa-calc-optional-subject-selection { width:100%;margin-top:10px;} .hsc-gpa-calc-actions-buttons-container { display:flex;justify-content:start;align-items:center;flex-wrap:wrap;gap:15px;margin-top:20px;} .hsc-gpa-calc-action-buttons { display:none;flex-wrap:wrap;gap:15px;justify-content:center;align-items:center;} .hsc-gpa-calc-btn { color:var(--hsc-gpa-calc-white) !important;padding:12px 25px;border:none;border-radius:var(--hsc-gpa-calc-border-radius);cursor:pointer;font-size:1em;font-weight:500;transition:var(--hsc-gpa-calc-transition);display:flex;align-items:center;gap:10px;} .hsc-gpa-calc-btn:hover { transform:translateY(-2px);} .hsc-gpa-calc-btn-calculate { background-color:var(--hsc-gpa-calc-accent-deep) !important;} .hsc-gpa-calc-btn-reset { background-color:var(--hsc-gpa-calc-danger) !important;} .hsc-gpa-calc-btn-reset:hover { background-color:var(--hsc-gpa-calc-danger) !important;} .hsc-gpa-calc-btn-print { background-color:var(--hsc-gpa-calc-success) !important;} .hsc-gpa-calc-btn-print:hover { background-color:var(--hsc-gpa-calc-success-deep) !important;} #hsc-gpa-calc-result-display { display:none;margin-top:30px;background-color:var(--hsc-gpa-calc-white) !important;border:1px solid var(--hsc-gpa-calc-border-color);border-radius:var(--hsc-gpa-calc-border-radius);box-shadow:var(--hsc-gpa-calc-box-shadow);padding:25px;} .hsc-gpa-calc-result-title { font-size:clamp(1.2em, 1.5vw, 1.5em);color:var(--hsc-gpa-calc-header-text);margin-bottom:20px;text-align:center;} #hsc-gpa-calc-subject-results-table { width:100%;border-collapse:collapse;margin-bottom:25px;font-size:0.95em;color:var(--hsc-gpa-calc-body-text);} #hsc-gpa-calc-subject-results-table th, #hsc-gpa-calc-subject-results-table td { border:1px solid var(--hsc-gpa-calc-border-color) !important;padding:12px;text-align:left;} #hsc-gpa-calc-subject-results-table th { background-color:var(--hsc-gpa-calc-accent-light) !important;color:var(--hsc-gpa-calc-accent-deep) !important;font-weight:500;} #hsc-gpa-calc-subject-results-table tr:nth-child(even) { background-color:var(--hsc-gpa-calc-bg-clc) !important;} .hsc-gpa-calc-final-results { box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px;margin-bottom:25px;text-align:center;font-weight:500;color:var(--hsc-gpa-calc-body-text);} .hsc-gpa-calc-gpa-container, .hsc-gpa-calc-letter-grade-container, .hsc-gpa-calc-overall-status-container { flex-grow:1;box-sizing:border-box;padding:20px;border:1px solid var(--hsc-gpa-calc-border-color);border-radius:var(--hsc-gpa-calc-border-radius);margin:0;font-size:1.2em;font-weight:600;} .hsc-gpa-calc-final-gpa { color:var(--hsc-gpa-calc-accent) !important;} .hsc-gpa-calc-status-pass { color:var(--hsc-gpa-calc-success-deep) !important;} .hsc-gpa-calc-status-fail { color:var(--hsc-gpa-calc-danger) !important;} .hsc-gpa-calc-status-golden-a-plus { color:goldenrod;} .hsc-gpa-calc-optional-contribution { font-style:italic;color:var(--hsc-gpa-calc-accent-deep) !important;margin-top:15px;text-align:center;font-size:0.9rem !important;} .hsc-gpa-calc-disclaimer { font-size:0.85em !important;color:var(--hsc-gpa-calc-body-text);margin-top:25px;padding-top:15px;border-top:1px dashed var(--hsc-gpa-calc-border-color);text-align:center;} .hsc-gpa-calc-message-box { display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);backdrop-filter:blur(3px);justify-content:center;align-items:center;z-index:1000;} .hsc-gpa-calc-message-content { background-color:var(--hsc-gpa-calc-white);padding:20px;border-radius:var(--hsc-gpa-calc-border-radius);box-shadow:var(--hsc-gpa-calc-box-shadow);max-width:400px;text-align:center;position:relative;} .hsc-gpa-calc-message-content h3 { color:var(--hsc-gpa-calc-header-text);margin-bottom:10px;font-size:1.2em;} .hsc-gpa-calc-message-content p { margin-bottom:15px;font-size:0.9em !important;line-height:1.5;} .hsc-gpa-calc-message-actions { display:flex;justify-content:center;gap:15px;} .hsc-gpa-calc-message-actions button { padding:10px 20px;border-radius:var(--hsc-gpa-calc-border-radius);font-size:1em;font-weight:500;cursor:pointer;transition:var(--hsc-gpa-calc-transition);} .hsc-gpa-calc-message-actions .hsc-gpa-calc-confirm-btn { background-color:var(--hsc-gpa-calc-accent) !important;color:var(--hsc-gpa-calc-white) !important;border:none;} .hsc-gpa-calc-message-actions .hsc-gpa-calc-confirm-btn:hover { background-color:var(--hsc-gpa-calc-accent-deep) !important;} .hsc-gpa-calc-message-actions .hsc-gpa-calc-cancel-btn { background-color:var(--hsc-gpa-calc-danger) !important;color:var(--hsc-gpa-calc-white) !important;border:1px solid var(--hsc-gpa-calc-border-color);} @media (max-width:768px) { .hsc-gpa-calc-main-interface { padding:15px;} .hsc-gpa-calc-container { padding:15px;} .hsc-gpa-calc-group-btn { padding:10px 20px;font-size:0.9em !important;max-width:none;} .hsc-gpa-calc-subject-input { flex-direction:column;align-items:stretch;gap:10px;} .hsc-gpa-calc-subject-input label { min-width:unset;text-align:left;} .hsc-gpa-calc-input-wrapper { min-width:unset;width:100%;} #hsc-gpa-calc-subject-results-table th, #hsc-gpa-calc-subject-results-table td { padding:10px;font-size:0.9em;} } @media (max-width:500px) { .hsc-gpa-calc-actions-buttons-container { flex-direction:column;} .hsc-gpa-calc-btn-calculate { width:100%;} .hsc-gpa-calc-action-buttons { width:100%;} .hsc-gpa-calc-btn { flex-grow:1;justify-content:center;padding:12px 15px;} .hsc-gpa-calc-input-wrapper { flex-direction:column;gap:10px;} #hsc-gpa-calc-subject-results-table { display:block;overflow-x:auto;white-space:nowrap;} } @media (max-width:400px) { .hsc-gpa-calc-main-interface { padding:10px;} .hsc-gpa-calc-container { padding:10px;} }