.grade-calculator{--grade-primary: #dc2626;--grade-secondary: #ef4444;--grade-accent: #f87171;--grade-dark: #991b1b;--grade-light: #fef2f2;--grade-text: #1f2937;--grade-text-muted: #6b7280;--grade-border: #d1d5db;--grade-card-bg: #ffffff;--grade-section-bg: #f8fafc;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;max-width:900px;margin:0 auto;color:var(--grade-text)}.grade-header{text-align:center;margin-bottom:2rem;padding:2rem;background:linear-gradient(135deg,var(--grade-dark) 0%,var(--grade-primary) 100%);border-radius:16px;color:#fff}.grade-title{font-size:2rem;font-weight:800;margin:0 0 .75rem}.grade-title:before{content:"📊";margin-right:.5rem}.grade-description{font-size:1.1rem;margin:0;opacity:.9}.grade-formula-section{background:var(--grade-light);border-radius:12px;padding:1.5rem;margin-bottom:2rem;border:2px solid var(--grade-accent)}.grade-formula-title{font-size:1.1rem;font-weight:700;color:var(--grade-primary);margin:0 0 1rem;text-align:center}.grade-formula-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.grade-formula-card{background:#fff;border-radius:10px;padding:1rem;border:1px solid var(--grade-border)}.grade-formula-label{font-size:.85rem;font-weight:600;color:var(--grade-primary);margin:0 0 .5rem;text-align:center}.grade-formula-display{text-align:center;overflow-x:auto;padding:.5rem 0}.grade-form-section{background:var(--grade-card-bg);border-radius:16px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 4px 20px #00000014;border:1px solid var(--grade-border)}.grade-mode-selector{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.grade-mode-btn{flex:1;min-width:120px;padding:.75rem;border:2px solid var(--grade-border);background:#fff;border-radius:8px;font-size:.9rem;font-weight:600;color:var(--grade-text-muted);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.grade-mode-btn:hover{border-color:var(--grade-primary);color:var(--grade-primary)}.grade-mode-btn.active{background:var(--grade-primary);border-color:var(--grade-primary);color:#fff}.grade-mode-icon{font-size:1.1rem}.grade-mode-form{display:none;margin-bottom:1rem}.grade-mode-form.active{display:block}.grade-convert-layout{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;padding:1.5rem;background:var(--grade-section-bg);border-radius:12px}.grade-score-input{display:flex;align-items:center;background:#fff;border:2px solid var(--grade-border);border-radius:8px;overflow:hidden}.grade-score-input input{width:100px;padding:.75rem;border:none;font-size:1.25rem;font-weight:600;text-align:center}.grade-score-input input:focus{outline:none}.grade-percent{padding:.75rem;background:var(--grade-light);color:var(--grade-primary);font-weight:600}.grade-assignments-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.grade-assignment-entry{display:flex;gap:.5rem;align-items:center;padding:.75rem;background:var(--grade-section-bg);border-radius:10px;flex-wrap:wrap}.grade-assignment-name{flex:2;min-width:120px;padding:.625rem;border:2px solid var(--grade-border);border-radius:6px;font-size:.95rem}.grade-assignment-score,.grade-assignment-weight{display:flex;align-items:center;background:#fff;border:2px solid var(--grade-border);border-radius:6px;overflow:hidden}.grade-assignment-score input,.grade-assignment-weight input{width:60px;padding:.625rem;border:none;font-size:.95rem;text-align:center}.grade-assignment-score span,.grade-assignment-weight span{padding:.625rem;background:var(--grade-section-bg);color:var(--grade-text-muted);font-size:.9rem}.grade-remove-btn{width:28px;height:28px;border:none;background:#fee2e2;color:#dc2626;border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.grade-remove-btn:hover{background:#fca5a5}.grade-add-btn{width:100%;padding:.75rem;border:2px dashed var(--grade-border);background:transparent;border-radius:10px;color:var(--grade-primary);font-weight:600;cursor:pointer;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.grade-add-btn:hover{background:var(--grade-light);border-color:var(--grade-primary)}.grade-needed-layout{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}@media (max-width: 640px){.grade-needed-layout{grid-template-columns:1fr}}.grade-needed-group{display:flex;flex-direction:column;gap:.5rem}.grade-needed-group label{font-size:.9rem;font-weight:600;color:var(--grade-text)}.grade-input-with-unit{display:flex;align-items:center;background:#fff;border:2px solid var(--grade-border);border-radius:8px;overflow:hidden}.grade-input-with-unit input{flex:1;padding:.75rem;border:none;font-size:1rem}.grade-input-with-unit input:focus{outline:none}.grade-input-with-unit:focus-within{border-color:var(--grade-primary);box-shadow:0 0 0 3px #dc262626}.grade-input-with-unit span{padding:.75rem;background:var(--grade-section-bg);color:var(--grade-text-muted)}.grade-btn{padding:1rem;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;width:100%;margin-top:.5rem}.grade-btn-primary{background:linear-gradient(135deg,var(--grade-primary),var(--grade-secondary));color:#fff;box-shadow:0 4px 15px #dc26264d}.grade-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #dc262666}.grade-btn-secondary{background:var(--grade-section-bg);color:var(--grade-text-muted);border:1px solid var(--grade-border)}.grade-btn-secondary:hover{background:#fff;color:var(--grade-text)}.grade-results{background:linear-gradient(135deg,var(--grade-dark) 0%,var(--grade-primary) 100%);border-radius:16px;padding:2rem;margin-bottom:2rem;color:#fff;text-align:center}.grade-results-title{font-size:1.1rem;font-weight:600;margin:0 0 1rem;opacity:.9}.grade-result-main{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.5rem}.grade-result-letter{font-size:4rem;font-weight:800;line-height:1;padding:.5rem 1rem;border-radius:12px}.grade-result-letter.grade-a{background:#22c55e4d}.grade-result-letter.grade-b{background:#3b82f64d}.grade-result-letter.grade-c{background:#eab3084d}.grade-result-letter.grade-d{background:#f973164d}.grade-result-letter.grade-f{background:#ef44444d}.grade-result-percent{font-size:2.5rem;font-weight:700;opacity:.9}.grade-result-status{font-size:1.1rem;margin-bottom:1.5rem;opacity:.9}.grade-result-status.impossible{color:#fca5a5}.grade-result-status.achieved{color:#86efac}.grade-results-grid{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.grade-result-card{background:#ffffff1a;border-radius:10px;padding:1rem 1.5rem}.grade-result-card-label{display:block;font-size:.8rem;opacity:.8;margin-bottom:.25rem}.grade-result-card-value{display:block;font-size:1.25rem;font-weight:700}.grade-scale-section{margin-bottom:2rem}.grade-scale-title{font-size:1.1rem;font-weight:700;color:var(--grade-primary);margin:0 0 1rem}.grade-scale-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem}.grade-scale-row{display:flex;justify-content:space-between;padding:.625rem 1rem;border-radius:8px;font-size:.9rem}.grade-scale-row.header{background:var(--grade-primary);color:#fff;font-weight:600}.grade-scale-row.a{background:#dcfce7}.grade-scale-row.b{background:#dbeafe}.grade-scale-row.c{background:#fef3c7}.grade-scale-row.d{background:#ffedd5}.grade-scale-row.f{background:#fee2e2}.grade-scale-letter{font-weight:700}.grade-scale-range{font-size:.85rem;opacity:.8}.grade-content{margin-top:2rem}.grade-content-section{margin-bottom:2.5rem}.grade-content-title{font-size:1.5rem;font-weight:700;color:var(--grade-primary);margin:0 0 1rem;padding-bottom:.5rem;border-bottom:3px solid var(--grade-accent)}.grade-content-paragraph{font-size:1rem;line-height:1.7;color:var(--grade-text);margin:0 0 1rem}.grade-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.5rem}.grade-feature-card{background:var(--grade-light);border-radius:12px;padding:1.25rem;text-align:center;border:1px solid var(--grade-accent)}.grade-feature-icon{font-size:2rem;display:block;margin-bottom:.75rem}.grade-feature-title{font-size:1rem;font-weight:700;color:var(--grade-primary);margin:0 0 .5rem}.grade-feature-description{font-size:.9rem;color:var(--grade-text-muted);margin:0;line-height:1.5}.grade-tips-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.5rem}@media (min-width: 640px){.grade-tips-grid{grid-template-columns:repeat(2,1fr)}}.grade-tip-card{background:var(--grade-card-bg);border-radius:12px;padding:1.25rem;border:1px solid var(--grade-border);box-shadow:0 2px 8px #0000000d}.grade-tip-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.grade-tip-icon{font-size:1.5rem}.grade-tip-title{font-size:1rem;font-weight:700;color:var(--grade-primary);margin:0}.grade-tip-text{font-size:.9rem;line-height:1.6;color:var(--grade-text);margin:0}.grade-table-wrapper{overflow-x:auto;margin:1.5rem 0}.grade-table{width:100%;border-collapse:collapse;font-size:.9rem}.grade-table th,.grade-table td{padding:.75rem 1rem;text-align:left;border:1px solid var(--grade-border)}.grade-table th{background:var(--grade-primary);color:#fff;font-weight:600}.grade-table tbody tr:nth-child(2n){background:var(--grade-section-bg)}.grade-faq-list{display:flex;flex-direction:column;gap:.75rem}.grade-faq-item{background:var(--grade-card-bg);border-radius:10px;border:1px solid var(--grade-border);overflow:hidden}.grade-faq-question{padding:1rem 1.25rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;color:var(--grade-text);transition:background-color .2s}.grade-faq-question:hover{background:var(--grade-section-bg)}.grade-faq-question:after{content:"+";font-size:1.25rem;font-weight:400;color:var(--grade-primary);transition:transform .2s}.grade-faq-item[open] .grade-faq-question:after{transform:rotate(45deg)}.grade-faq-answer{padding:0 1.25rem 1.25rem;font-size:.95rem;line-height:1.7;color:var(--grade-text);margin:0}@media (max-width: 640px){.grade-header{padding:1.5rem}.grade-title{font-size:1.5rem}.grade-convert-layout{flex-direction:column}.grade-result-main{flex-direction:column;gap:.5rem}.grade-result-letter{font-size:3rem}.grade-result-percent{font-size:2rem}.grade-assignment-entry{flex-wrap:wrap}.grade-assignment-name{flex-basis:100%;margin-bottom:.5rem}}