:root{--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--surface-base: #1e1e1e;--surface-raised: #2a2a2a;--surface-card: #2a2a2a;--surface-overlay: #333333;--surface-input: #1e1e1e;--accent: #d6f8e0;--accent-dim: #b5e8c3;--accent-glow: rgba(214, 248, 224, .1);--accent-hover: #c5e7cf;--text-primary: #ffffff;--text-secondary: #ccc;--text-muted: #888;--text-on-accent: #1e1e1e;--border: #3a3a3a;--border-accent: #d6f8e0;--border-hover: #c5e7cf;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);--shadow-md: 0 4px 16px rgba(0, 0, 0, .3);--shadow-lg: 0 4px 30px rgba(0, 0, 0, .1);--shadow-glow: 0 0 30px rgba(214, 248, 224, .06);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 16px;--radius-full: 9999px;--ease: cubic-bezier(.16, 1, .3, 1);--transition-fast: .15s var(--ease);--transition-base: .25s var(--ease)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background-color:var(--surface-base);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px;color:var(--text-primary);line-height:1.6;min-height:100vh;padding:20px}.body-centered{display:flex;align-items:center;justify-content:center}.main-card{width:100%;max-width:540px;background:var(--surface-raised);border:1px solid var(--border-accent);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-lg)}header{background:var(--surface-raised);padding:16px 20px;text-align:center;max-width:1200px;margin:0 auto 20px;border-radius:var(--radius-lg);border:1px solid var(--border-accent)}.main-card header{background:transparent;border:none;border-bottom:1px solid var(--border-accent);margin-bottom:0;border-radius:0;padding:0 0 16px}header h1{color:var(--accent);font-size:1.15rem;font-weight:700;margin:0 0 10px;letter-spacing:-.02em;line-height:1.3}.header-actions{display:flex;align-items:center;justify-content:center;gap:8px}.view-formula-button{background:var(--accent);color:var(--text-on-accent);border:none;padding:8px 16px;border-radius:var(--radius-full);cursor:pointer;font-weight:600;font-size:.8rem;font-family:var(--font-sans);transition:var(--transition-base);white-space:nowrap}.view-formula-button:hover{background:var(--accent-hover);transform:translateY(-1px)}.view-formula-button:active{transform:translateY(0)}main{width:100%;max-width:1200px;margin:0 auto}.selection-screen{display:flex;align-items:center;justify-content:center;margin-top:8px;margin-bottom:0}.selection-container{background:var(--surface-raised);padding:30px;border-radius:var(--radius-xl);border:1px solid var(--border-accent);max-width:600px;width:100%}.main-card .selection-container{background:transparent;border:none;padding:16px 4px}.selection-container h2{color:var(--accent);text-align:center;margin-bottom:24px;font-size:1.15rem;font-weight:600}.selection-form{display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:.82rem;font-weight:600;color:var(--accent);letter-spacing:0}.select-input{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface-input);color:var(--text-primary);font-size:.95rem;font-family:var(--font-sans);cursor:pointer;transition:var(--transition-base)}.select-input:focus{outline:none;border-color:var(--accent-dim);box-shadow:0 0 0 3px var(--accent-glow)}.select-input option{background:var(--surface-input);color:var(--text-primary)}.selection-actions{margin-top:4px;display:flex;flex-direction:row;gap:10px}.proceed-button{flex:1;background:var(--accent);color:var(--text-on-accent);border:none;padding:13px 8px;border-radius:var(--radius-xl);cursor:pointer;font-size:.9rem;font-weight:700;font-family:var(--font-sans);transition:var(--transition-base)}.proceed-button:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 20px #b8f0c826}.proceed-button:active{transform:translateY(0)}.cgpa-calculator-button{flex:1;background:transparent;color:var(--accent);border:2px solid var(--border-accent);padding:13px 8px;border-radius:var(--radius-xl);cursor:pointer;font-size:.9rem;font-weight:700;font-family:var(--font-sans);transition:var(--transition-base)}.cgpa-calculator-button:hover{background:var(--accent);color:var(--text-on-accent)}.cgpa-calculator-button-small{background:transparent;color:var(--accent);border:1px solid var(--border-accent);padding:8px 16px;border-radius:var(--radius-sm);cursor:pointer;font-size:.8rem;font-weight:600;font-family:var(--font-sans);white-space:nowrap;transition:var(--transition-base)}.cgpa-calculator-button-small:hover{background:var(--accent-glow);border-color:var(--border-hover)}.error-message{background:#ef444426;color:#ff8a8a;border:1px solid rgba(239,68,68,.25);padding:12px;border-radius:var(--radius-sm);text-align:center;margin-top:10px;font-size:.875rem}.calculator-screen{animation:screenFadeIn .35s var(--ease)}@keyframes screenFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.breadcrumb{background:var(--surface-card);padding:15px 20px;border-radius:var(--radius-lg);margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border-accent);gap:12px}.breadcrumb span{color:var(--accent);font-size:.85rem;font-weight:600}.breadcrumb-buttons{display:flex;gap:8px;align-items:center}.change-selection-button{background:transparent;color:var(--accent);border:1px solid var(--border-accent);padding:8px 14px;border-radius:var(--radius-sm);cursor:pointer;font-size:.8rem;font-weight:600;font-family:var(--font-sans);white-space:nowrap;transition:var(--transition-base)}.change-selection-button:hover{background:var(--accent-glow);border-color:var(--border-hover)}.info-box{background:var(--surface-card);padding:15px 20px;border-radius:var(--radius-lg);margin-bottom:20px;border:1px solid var(--border);font-size:.88rem;color:var(--text-secondary);line-height:1.7}.info-box p{margin-bottom:2px}.subjects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-bottom:24px;align-items:start}.subject-card{background:var(--surface-card);padding:22px;border-radius:var(--radius-lg);border:1px solid var(--border);display:flex;flex-direction:column;height:100%;transition:border-color .2s}.subject-card:hover{border-color:var(--accent)}.subject-card h3{color:var(--accent);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);min-height:44px;display:flex;align-items:center;font-size:.95rem;font-weight:600;letter-spacing:-.01em}.cgpa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:24px}.cgpa-card{background:var(--surface-card);padding:20px;border-radius:var(--radius-lg);border:1px solid var(--border);transition:border-color .2s}.cgpa-card:hover{border-color:var(--accent)}.cgpa-card h3{color:var(--accent);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);font-size:.95rem;font-weight:600}.input-group{margin-bottom:12px}.input-group label{display:block;margin-bottom:5px;font-size:.78rem;min-height:18px;color:var(--text-secondary);font-weight:500}.input-group input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-input);color:var(--text-primary);font-size:.95rem;font-family:var(--font-sans);transition:var(--transition-base)}.input-group input:focus{outline:none;border-color:var(--accent-dim);box-shadow:0 0 0 3px var(--accent-glow)}.elective-dropdown{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-input);color:var(--text-primary);font-size:.9rem;font-family:var(--font-sans);cursor:pointer;transition:var(--transition-base)}.elective-dropdown:focus{outline:none;border-color:var(--accent-dim);box-shadow:0 0 0 3px var(--accent-glow)}.elective-dropdown option{background:var(--surface-input);color:var(--text-primary)}.calculate-subject-button{background:var(--accent);color:var(--text-on-accent);border:none;padding:11px 18px;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-family:var(--font-sans);font-size:.85rem;width:100%;margin-top:auto;margin-bottom:0;transition:var(--transition-base)}.calculate-subject-button:hover{background:var(--accent-hover);transform:translateY(-1px)}.calculate-subject-button:active{transform:translateY(0)}.calculate-sgpa-container{text-align:center;margin:28px 0}.calculate-sgpa-button{background:var(--accent);color:var(--text-on-accent);border:none;padding:14px 36px;border-radius:var(--radius-md);cursor:pointer;font-size:1rem;font-weight:700;font-family:var(--font-sans);transition:var(--transition-base);letter-spacing:-.01em}.calculate-sgpa-button:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 24px #b8f0c826}.calculate-sgpa-button:active{transform:translateY(0)}.subject-result{background:var(--surface-input);margin-top:12px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-accent);display:none;min-height:70px;font-size:.85rem}.subject-result strong{color:var(--accent)}.output-section{background:var(--surface-card);padding:25px;border-radius:var(--radius-lg);margin:20px 0;min-height:50px;border:1px solid var(--border-accent)}.placeholder-text{padding-top:8px;text-align:center;color:var(--text-muted)}.placeholder-text h3{margin-bottom:8px;font-size:1.1rem;font-weight:500}.sgpa-display{text-align:center;margin:16px 0;padding:18px;border:1px solid var(--border-accent);border-radius:var(--radius-md);background:var(--accent-glow)}.sgpa-display .label{font-size:.8rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.sgpa-display .value{font-size:2.75rem;font-weight:800;color:var(--accent);margin:6px 0;letter-spacing:-.03em}.breakdown-title{margin-top:22px;margin-bottom:10px;font-size:1rem;font-weight:600;color:var(--accent)}.summary-box{background:var(--surface-overlay);padding:14px;margin-top:20px;text-align:center;border:1px solid var(--border-accent);border-radius:var(--radius-sm);font-size:.875rem;line-height:1.8}.prediction-text{font-size:.75rem;margin-top:5px;color:var(--accent-dim)}.predict-success{color:#6ee7a0;font-weight:600}.predict-fail{color:#f87171;font-weight:600}footer{background:transparent;padding:14px;text-align:center;max-width:1200px;margin:0 auto;border-radius:var(--radius-lg);font-size:.82rem;color:var(--text-muted)}.main-card footer{background:transparent;border:none;margin-top:0;border-radius:0;padding:10px 0 0}footer a{color:var(--accent);text-decoration:none;font-weight:500}footer a:hover{text-decoration:underline}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000bf;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000}.modal-overlay.show{display:flex;justify-content:center;align-items:center}.modal-content{background:var(--surface-raised);padding:28px;border-radius:var(--radius-xl);max-width:720px;max-height:90vh;overflow-y:auto;position:relative;margin:16px;border:1px solid var(--border);box-shadow:var(--shadow-lg)}.close-modal-button{position:absolute;top:14px;right:14px;background:var(--surface-overlay);color:var(--text-primary);border:1px solid var(--border);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:.85rem;font-weight:600;display:flex;align-items:center;justify-content:center;transition:var(--transition-base)}.close-modal-button:hover{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}.modal-content h2{color:var(--accent);margin-bottom:20px;font-size:1.25rem;font-weight:700;letter-spacing:-.02em}.modal-section{margin-bottom:24px}.modal-section h3{color:var(--accent);margin-bottom:14px;font-size:1rem;font-weight:600}table{width:100%;margin:14px 0;border:1px solid var(--border-accent);border-radius:var(--radius-md);border-collapse:separate;border-spacing:0;overflow:hidden;font-size:.85rem}.breakdown-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:.85rem}.breakdown-table th,.breakdown-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border)}.breakdown-table th{background:var(--accent);color:var(--text-on-accent);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}.breakdown-table tr:last-child td{border-bottom:none}.table-responsive{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:16px}th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border)}th{background:var(--accent);color:var(--text-on-accent);font-weight:600;font-size:.8rem}.calculation-step{background:var(--surface-input);padding:16px;border-radius:var(--radius-md);margin-bottom:12px;border:1px solid var(--border)}.calculation-step h4{color:var(--accent);margin-bottom:10px;font-size:.9rem;font-weight:600}.calculation-step code{display:block;background:var(--surface-overlay);padding:10px 14px;border-radius:var(--radius-sm);margin:10px 0;color:var(--text-primary);font-family:JetBrains Mono,Fira Code,monospace;font-size:.82rem}.calculation-step p{margin-top:8px;font-size:.85rem;color:var(--text-secondary)}.highlight-step{border:1.5px solid var(--border-accent)}.important-notes{list-style:none;padding:0}.important-notes li{background:var(--surface-input);padding:12px 14px;margin-bottom:8px;border-radius:var(--radius-sm);border:1px solid var(--border);font-size:.85rem;color:var(--text-secondary)}@media(max-width:768px){body{padding:10px}.main-card{padding:20px 16px;border-radius:var(--radius-lg)}header h1{font-size:1.25rem}.view-formula-button{padding:9px 18px;font-size:.82rem}.selection-form{padding:0}.selection-container h2{font-size:1.05rem;margin-bottom:22px}.subjects-grid,.cgpa-grid{grid-template-columns:1fr}.subject-card,.cgpa-card{padding:16px}.input-group input,.select-input{font-size:16px}.calculate-sgpa-button,.proceed-button,.cgpa-calculator-button{width:100%;padding:13px}.breadcrumb{flex-direction:column;gap:10px;align-items:stretch;padding:14px 16px}.breadcrumb span{text-align:center;font-size:.82rem}.breadcrumb-buttons{width:100%;display:flex;flex-direction:column;gap:8px}.change-selection-button,.cgpa-calculator-button-small{width:100%;text-align:center;padding:10px}.modal-content{padding:20px 16px;margin:10px;max-height:92vh}.selection-container{padding:20px}.main-card .selection-container{padding:16px 0}.output-section{padding:18px 14px}.sgpa-display .value{font-size:2.25rem}.info-box{padding:12px 14px;font-size:.82rem}}@media(max-width:380px){.main-card{padding:16px 12px}header h1{font-size:.95rem}.view-formula-button{padding:6px 10px;font-size:.72rem}.selection-container h2{font-size:.95rem}.sgpa-display .value{font-size:2rem}}