.app{background:#f8f8ff;flex-direction:column;min-height:100vh;transition:all .3s;display:flex}.darkMode{color:#f0f0f0;background:#121212}.darkMode footer{background:#0f2c2f}.darkMode button{background:#aa4e7c}.darkMode button:hover{background:#c95f8f}.darkMode input{color:#fff;background:#2a2a2a;border-color:#aa4e7c}.container{flex:1;display:flex}.content{flex:1;padding:40px 35px;overflow-y:auto}footer{color:#2c3e2f;text-align:center;letter-spacing:1px;background:#add8e6;padding:22px;font-weight:500}.darkMode footer{color:#fcd5e6;background:#1c4347}@media (width<=768px){.container{flex-direction:column}.content{padding:20px 15px}footer{padding:15px;font-size:12px}}@media (width<=480px){.content{padding:15px 12px}}.sidebar{color:#2d1b2e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:linear-gradient(145deg,#ffb6c1,#ff9eb0);width:250px;padding:30px 20px;transition:all .3s;box-shadow:4px 0 20px #00000014}.darkMode .sidebar{background:#2c1a2a;box-shadow:2px 0 12px #ffffff0d}.sidebar h2{text-align:center;letter-spacing:2px;border-bottom:2px dashed #2d1b2e4d;width:100%;margin-bottom:35px;padding-bottom:10px;font-size:1.7rem;font-weight:600;display:inline-block}.sidebar ul{list-style:none}.sidebar ul li{cursor:pointer;text-align:center;letter-spacing:.5px;background:#fffaf04d;border-radius:40px;margin-bottom:12px;padding:12px 18px;font-weight:500;transition:all .25s}.sidebar ul li:hover{color:#a13e63;background:#fff9;padding-left:24px;transform:translate(5px)}.sidebar ul li.active{color:#a13e63;background:#ffffffb3}@media (width<=768px){.sidebar{width:100%;padding:20px;box-shadow:0 2px 10px #0000001a}.sidebar ul{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.sidebar ul li{margin-bottom:0;padding:8px 16px;font-size:14px;display:inline-block}.sidebar ul li:hover{padding-left:16px;transform:translate(0)}}.hero-section{background:linear-gradient(120deg,#fff0f599,#ffdce64d);border-radius:48px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:40px;margin-bottom:20px;padding:30px 35px;transition:all .2s;display:flex;box-shadow:0 15px 30px #0000000d}.darkMode .hero-section{background:#281e28b3}.hero-text{flex:2;min-width:220px}.hero-text h1{color:#0000;background:linear-gradient(135deg,#d64b7a,#b13e6b);-webkit-background-clip:text;background-clip:text;margin-bottom:12px;font-size:3rem}.darkMode .hero-text h1{background:linear-gradient(135deg,#ffadc9,#ff84ae);-webkit-background-clip:text;background-clip:text}.hero-text .tagline{border-left:4px solid #ff6fa5;margin-bottom:20px;padding-left:18px;font-size:1.2rem;font-weight:500}.hero-text p{margin-top:12px;line-height:1.5}.hero-image{text-align:center;flex:1;min-width:180px}.hero-image img{object-fit:cover;border:3px solid #fff;border-radius:38% 62% 48% 52%/45% 44% 56% 55%;width:100%;max-width:260px;height:auto;transition:all .4s;box-shadow:0 25px 35px #0003}.darkMode .hero-image img{border-color:#4a2e3e;box-shadow:0 10px 25px #ff78a033}.hero-image img:hover{transform:scale(1.02)rotate(1deg)}.about-portfolio{background:#ffc8d74d;border-radius:35px;margin-top:30px;padding:20px}.darkMode .about-portfolio{background:#281e2880}@media (width<=768px){.hero-section{text-align:center;flex-direction:column-reverse;gap:20px;padding:20px}.hero-text .tagline{text-align:center;border-left:none;padding-left:0}.hero-text h1{font-size:2rem}.hero-image img{max-width:200px}}@media (width<=480px){.hero-text h1{font-size:1.5rem}.hero-text .tagline{font-size:1rem}.hero-text p{font-size:14px}}.about-container{max-width:700px;margin:0 auto}.about-container h1{margin-bottom:20px}.about-card{background:#ffc8d74d;border-radius:32px;margin-top:20px;padding:30px}.darkMode .about-card{background:#281e2880}.about-card h3{margin-bottom:15px}.about-card p{margin:10px 0}.about-card hr{opacity:.3;margin:18px 0}@media (width<=768px){.about-card{padding:20px}}.activity-grid{flex-wrap:wrap;justify-content:center;gap:20px;margin-top:30px;display:flex}.activity-card{background:#fff0f3;border-radius:28px;width:220px;padding:20px;transition:all .2s}.darkMode .activity-card{background:#2c1e28}.activity-card h3{margin-bottom:15px}.activity-card button{width:100%}.console-note{text-align:center;margin-top:25px}@media (width<=768px){.activity-card{width:100%;max-width:280px}}.exercise3-grid{gap:25px;margin-top:20px;display:grid}.exercise3-grid>div{background:#ffc8d733;border-radius:28px;padding:20px}.darkMode .exercise3-grid>div{background:#281e2880}.small-note{opacity:.8;margin-top:5px;font-size:.8rem}.dynamic-list,.todo-list{margin:10px 0;padding-left:0}.dynamic-list li,.todo-list li{background:#ffdce680;border-radius:30px;justify-content:space-between;align-items:center;margin:6px 0;padding:8px 14px;display:flex}.darkMode .dynamic-list li,.darkMode .todo-list li{background:#2a1f28}.remove-paragraph{background:#ffe0e7;border-radius:30px;margin-bottom:10px;padding:8px}.delete-todo{background:#ff8aac;width:auto;margin:0;padding:2px 12px}.exercise3-grid input{margin-right:10px}@media (width<=768px){.exercise3-grid input{width:100%;margin-bottom:10px;margin-right:0}.exercise3-grid button{width:auto}}.grade-calc-container{background:#fff0f5b3;border-radius:32px;margin:20px 0;padding:24px;transition:all .2s}.darkMode .grade-calc-container{background:#2a1f2a}.quiz-header{flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}.quiz-count-badge{background:#ffb6c1;border-radius:40px;padding:6px 14px;font-weight:700}.darkMode .quiz-count-badge{background:#aa4e7c}.quiz-count-input{margin:18px 0}.quiz-fields{flex-direction:column;gap:12px;max-height:320px;margin:20px 0;padding-right:8px;display:flex;overflow-y:auto}.quiz-item{background:#fffff080;border-radius:60px;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 15px;display:flex}.darkMode .quiz-item{background:#3a2c38}.quiz-item label{min-width:90px;font-weight:600}.quiz-item input{flex:1;min-width:140px;margin:0}.mco-exam-section{background:#ffc8d74d;border-radius:28px;flex-wrap:wrap;gap:20px;margin:20px 0 10px;padding:16px;display:flex}.darkMode .mco-exam-section{background:#3c283780}.score-field{flex:1}.score-field label{margin-bottom:5px;display:block}.score-input{width:100%}.result-stats{background:#ffeef4;border-radius:28px;flex-direction:column;gap:12px;margin-top:20px;padding:18px 22px;display:flex}.darkMode .result-stats{background:#1f1620}.stat-row{border-bottom:1px dashed #0000001a;flex-wrap:wrap;justify-content:space-between;align-items:baseline;padding:8px 0;display:flex}.darkMode .stat-row{border-bottom-color:#ffffff1a}.grade-badge{color:#fff;text-align:center;border-radius:48px;padding:10px 20px;font-size:1.6rem;font-weight:700;display:inline-block}.btn-reset-only{background:#957dad;width:100%;margin-top:20px}.btn-reset-only:hover{background:#7b5f8c}.small-note{opacity:.8;margin:10px 0;font-size:.8rem}@media (width<=768px){.grade-calc-container{padding:15px}.quiz-item{flex-direction:column;align-items:stretch}.quiz-item label{min-width:auto}.quiz-item input{width:100%}.result-stats{padding:15px}.grade-badge{padding:6px 12px;font-size:1.2rem}.stat-row{flex-direction:column;gap:5px}.mco-exam-section{flex-direction:column}}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Poppins,sans-serif}