@layer page{:root{--media-pesata-accent: #e4c5ff;--media-pesata-bg: hsl(from var(--media-pesata-accent) h s 95%);--media-pesata-accent-2: #ffe4c5;--media-pesata-accent-3: #c5ffe4;--card-base: var(--media-pesata-accent)}main{justify-self:center;background:var(--media-pesata-bg);display:flex;flex-direction:column;align-items:center;padding:4.5rem 3rem;gap:4.5rem;@media screen and (max-width: 1024px){padding:3rem 1rem;gap:3rem;.card{width:100%}}}.media-pesata-container{max-width:72rem;margin:0 auto;padding:2rem;@media screen and (max-width: 768px){padding:0}}h1{text-align:center;margin-bottom:1rem;color:var(--color-primary)}p{text-align:center;margin-bottom:2rem;color:var(--color-text-secondary)}.card{align-content:start;gap:1rem}button{display:grid;grid-auto-flow:column;place-content:center;place-items:center;padding:.25rem 1rem;gap:.5rem;font-size:16px;border:2px solid #222;border-radius:4px;box-shadow:2px 2px #222;transition:all 64ms linear;text-decoration:none;color:#222;cursor:pointer;&:hover{transform:translate(-1px,-1px);box-shadow:3px 3px #222}&:active{transform:translate(1px,1px);box-shadow:1px 1px #222}}.media-pesata-app{max-width:1200px;margin:0 auto;padding:2rem;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(7,auto);align-items:start;gap:2rem;>.wide{grid-column:1 / -1}@media screen and (max-width: 1024px){padding:0;grid-template-columns:1fr;gap:1rem}}.media-pesata-title{text-align:center;color:var(--palette-black);margin-bottom:2rem;font-family:var(--font-display);font-weight:700;font-size:2.5rem}.student-type-selector{background:#fff;border:var(--border-large);border-radius:6px;box-shadow:4px 4px 0 0 var(--palette-black);padding:1.5rem;margin-bottom:2rem;display:grid;place-content:center;h2{margin-bottom:1rem;color:var(--palette-black);font-family:var(--font-display);font-weight:600;font-size:1.5rem;text-align:center}}.compound-button{display:flex;border:3px solid #222;border-radius:6px;box-shadow:4px 4px #222;overflow:hidden;width:fit-content;button{border:none;border-radius:0;box-shadow:none;margin:0;flex:1;min-width:120px;padding:.5rem;&:not(:last-child){border-right:3px solid #222}&:hover{transform:none;box-shadow:none;background:#f0f0f0}&:active{transform:none;box-shadow:none;background:#e0e0e0}&.active{background:hsl(from var(--media-pesata-accent) h s 75%);color:#f4fef7;&:hover{background:hsl(from var(--media-pesata-accent) h s 85%)}&:active{background:hsl(from var(--media-pesata-accent) h s 95%)}}}}.cfu-counter{background:hsl(from var(--media-pesata-accent-2) h s 75%);border:var(--border-large);border-radius:6px;box-shadow:4px 4px 0 0 var(--palette-black);padding:1rem;text-align:center;&.error{background:#ffd8d8;border-color:#dc3545}}.cfu-counter h3{margin:0;color:var(--palette-black);font-family:var(--font-display);font-weight:600;font-size:1.3rem}.error-message{color:#d63031;font-weight:700;margin:0;font-family:var(--font-secondary)}.error-message{background:#ff6b7a;border:2px solid var(--palette-black);border-radius:6px;padding:1rem;color:var(--palette-black);font-weight:600}.error-message p{margin:0;text-align:center}@media (max-width: 768px){.main-content{grid-template-columns:1fr}}.course-selection{background:#fff;border:var(--border-large);border-radius:6px;box-shadow:4px 4px 0 0 var(--palette-black);padding:1.5rem}.course-selection h2{margin-bottom:1.5rem;color:var(--palette-black);font-family:var(--font-display);font-weight:600;font-size:1.5rem}.course-category{display:grid;gap:.5rem;>button{padding:.25rem .75rem .25rem .5rem;font-size:20px;place-content:stretch;place-items:stretch}.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.5rem;padding:.25rem;border-radius:.25rem;overflow-y:auto;max-height:50vh;position:relative;&:after{content:"";position:sticky;bottom:-.25rem;left:0;right:0;height:1rem;margin-top:-1.25rem;background:linear-gradient(to top,#0004,transparent)}.course-button{display:grid;grid-template-rows:auto auto;padding:.5rem;gap:.25rem;justify-content:stretch;justify-items:start;border:2px solid var(--palette-black);border-radius:4px;background:#f8f9fa;cursor:pointer;transition:all 64ms linear;text-align:left;font-family:var(--font-secondary);box-shadow:2px 2px 0 0 var(--palette-black);&:hover:not(:disabled){background:var(--homepage-projects-bg);transform:translate(-1px,-1px);box-shadow:3px 3px 0 0 var(--palette-black)}&:active:not(:disabled){transform:translate(1px,1px);box-shadow:1px 1px 0 0 var(--palette-black)}&:disabled{opacity:.5;cursor:not-allowed;background:#e0e0e0}>.course-name{font-weight:600;font-size:.9rem;line-height:1.3;color:var(--palette-black)}>.course-cfu{font-size:.8rem;color:#666;font-weight:700}}@media screen and (590px <= width <= 1024px){&:after{display:none}}}}.custom-course{margin-top:1rem;padding-top:1.5rem;border-top:3px solid var(--palette-black)}.custom-course h3{margin-bottom:1rem;color:var(--palette-black);font-family:var(--font-display);font-weight:600;font-size:1.2rem}.add-custom-btn{background:#1e6733;color:#f4fef7;border:3px solid var(--palette-black);border-radius:6px;box-shadow:4px 4px 0 0 var(--palette-black);padding:.75rem 1.5rem;cursor:pointer;font-size:.9rem;font-weight:600;font-family:var(--font-secondary);transition:all 64ms linear}.add-custom-btn:hover{background:#2b8b47;transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--palette-black)}input{padding:.25rem .5rem;font-size:14px;border:2px solid #222;border-radius:4px;box-shadow:2px 2px #222;background:#fff;font-family:var(--font-primary)}.custom-form{display:flex;gap:.5rem;flex-wrap:wrap;input[type=text]{flex:2;min-width:200px}input[type=number]{flex:0 0 80px}}.confirm-btn,.cancel-btn{padding:.5rem 1rem;border:2px solid var(--palette-black);border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:600;font-family:var(--font-secondary);transition:all 64ms linear}.confirm-btn{background:#28a745;color:#fff;box-shadow:2px 2px 0 0 var(--palette-black)}.confirm-btn:hover{background:#218838;transform:translate(-1px,-1px);box-shadow:3px 3px 0 0 var(--palette-black)}.confirm-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 0 var(--palette-black)}.cancel-btn{background:#6c757d;color:#fff;box-shadow:2px 2px 0 0 var(--palette-black)}.cancel-btn:hover{background:#5a6268;transform:translate(-1px,-1px);box-shadow:3px 3px 0 0 var(--palette-black)}.cancel-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 0 var(--palette-black)}.selected-courses{background:#fff;border:var(--border-large);border-radius:6px;box-shadow:4px 4px 0 0 var(--palette-black);padding:1.5rem}.selected-courses h2{margin-bottom:1.5rem;color:var(--palette-black);font-family:var(--font-display);font-weight:600;font-size:1.5rem}.no-courses{text-align:center;color:#666;font-style:italic;padding:2rem;font-family:var(--font-secondary)}.courses-list{display:flex;flex-direction:column;gap:.5rem}.course-item{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr auto auto;align-items:center;gap:.5rem 1rem;padding:.5rem 1rem .5rem .5rem;background:#fff;border:2px solid var(--palette-black);border-radius:4px;transition:all 64ms linear;>.course-name{grid-column:1 / 2;grid-row:1 / 2;font-weight:600;font-size:.9rem;color:var(--palette-black);font-family:var(--font-secondary)}>.course-cfu{grid-column:1 / 2;grid-row:2 / 3;font-size:.8rem;font-weight:700;color:#666}>.tall{grid-row:1 / -1}.course-grade{display:grid;grid-auto-flow:column;place-content:center;gap:.5rem;input[type=number]{min-width:4.25rem}}>.actions{grid-column:-2 / -1}.lode-checkbox{display:flex;align-items:center;gap:.25rem;font-size:.8rem;cursor:pointer;font-weight:600;font-family:var(--font-secondary);&.disabled{opacity:.5;cursor:not-allowed}}.remove-btn{background:#d63031;color:#fff;width:1.75rem;height:1.75rem;font-size:20px;padding:0;margin-top:4px;&:hover{background:#b71c1c}}@media screen and (max-width: 1024px){justify-items:start;align-items:center;gap:.5rem;grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:.5rem;.course-name{display:grid;place-content:center;place-items:center;grid-column:1 / 2;grid-row:1 / 2}.course-cfu{display:grid;justify-self:center;align-self:start;grid-column:2 / 3;grid-row:1 / 2}.course-grade{grid-row:2 / 3}.actions{grid-column:2 / 3;grid-row:2 / 3;justify-self:end}}}.calculate-button{background:#1e6733;color:#f4fef7;border:3px solid var(--palette-black);border-radius:6px;box-shadow:4px 4px 0 0 var(--palette-black);padding:1rem 2rem;font-size:1.2rem;font-weight:600;font-family:var(--font-secondary);cursor:pointer;transition:all 64ms linear;margin-bottom:2rem;&:hover{background:#2b8b47;transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--palette-black)}&:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--palette-black)}}.results{background:#fff;border:3px solid var(--palette-black);border-radius:6px;box-shadow:4px 4px 0 0 var(--palette-black);padding:2rem;margin-top:1rem;>h2{margin-bottom:1.5rem;color:var(--palette-black);font-family:var(--font-display);font-weight:600;font-size:1.6rem;text-align:center}.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}@media screen and (max-width: 1024px){padding:1rem}}.result-item:nth-child(4){order:-1;grid-column:1 / -1;justify-self:center;max-width:500px;width:100%}.result-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:hsl(from var(--media-pesata-accent-3) h s 75%);border:2px solid var(--palette-black);border-radius:4px;font-family:var(--font-secondary);font-weight:600;font-size:1rem}.result-item.highlight{background:hsl(from var(--media-pesata-accent-2) h s 75%);font-weight:700;font-size:1.2rem}.result-item .label{font-weight:600;color:var(--palette-black);font-size:.9rem;line-height:1.2}.result-item .value{font-weight:700;font-size:1.1rem;font-family:var(--font-mono);color:var(--palette-black)}.pass-fail-badge{background:var(--color-accent);color:#fff;padding:2px 8px;border-radius:12px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.lode-badge{color:var(--palette-black);font-weight:700;margin-left:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.reset-btn{background:#d63031;color:#fff;border:2px solid var(--palette-black);padding:.5rem 1rem;border-radius:4px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all 64ms linear;box-shadow:2px 2px 0 0 var(--palette-black)}.reset-btn:hover{background:#b71c1c;transform:translate(-1px,-1px);box-shadow:3px 3px 0 0 var(--palette-black)}.reset-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 0 var(--palette-black)}.cfu-info{font-size:.9rem;color:#666;margin:.25rem 0 0;font-weight:400}.error-text{color:#d63031;font-weight:600;margin:.5rem 0 0}.category-header{width:100%;background:#e4c5ff;border:2px solid var(--palette-black);border-radius:4px;padding:.5rem 1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all 64ms linear;margin-bottom:.5rem;min-height:36px;box-shadow:1px 1px 0 0 var(--palette-black)}.category-header:hover{background:#d9b3ff;transform:translate(-1px,-1px);box-shadow:2px 2px 0 0 var(--palette-black)}.category-header:active{transform:translate(0);box-shadow:1px 1px 0 0 var(--palette-black)}.category-header h3{margin:0;font-family:var(--font-display);font-weight:600;color:var(--palette-black);font-size:1rem}.toggle-icon{font-size:1rem;color:var(--palette-black);transition:transform .15s ease;user-select:none}.toggle-icon.expanded{transform:rotate(90deg)}.calculate-section{display:grid;place-content:center;padding:2rem 0 1rem;button{font-size:20px;padding:1rem;border:3px solid var(--palette-black);border-radius:6px;box-shadow:4px 4px 0 0 var(--palette-black);&:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--palette-black)}&:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--palette-black)}background:hsl(from var(--media-pesata-accent-2) h s 75%)}}.calculate-btn{background:#1e6733;color:#f4fef7;border:var(--border-large);border-radius:6px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all 64ms linear;font-family:var(--font-primary);display:inline-block;box-shadow:4px 4px 0 0 var(--palette-black)}.calculate-btn:hover{background:#2b8b47;transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--palette-black)}.calculate-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--palette-black)}.info-section{background:var(--color-accent-light);border:var(--border-large);border-radius:8px;padding:1.5rem;margin:2rem 0}.info-section h3{margin-top:0;margin-bottom:1rem;color:var(--palette-black);font-family:var(--font-display);font-weight:600}.info-content h4{color:var(--palette-black);font-weight:600;margin-top:1rem;margin-bottom:.5rem}.info-content ul{margin-bottom:1rem;padding-left:1.5rem}.info-content li{margin-bottom:.5rem;line-height:1.4}@media (max-width: 480px){.result-item{flex-direction:column;align-items:flex-start;gap:.5rem}.result-item .label{font-size:.85rem}.result-item .value{align-self:flex-end;font-size:1.2rem}}}@layer utility{@media screen and (max-width: 1024px){.card{>.h-flex{flex-direction:column;align-items:start;>.spacer{display:none}}}}}