:root{--primary:#3f5e7d;--secondary:#7f88a1;--light:#e8eef5;--dark:#3a424d;--success:#2e7d32;--danger:#c62828;--warning:#f9a825}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#f5f5f5;scroll-padding-top:80px;line-height:1.6;overflow-x:hidden}.container{max-width:900px;margin:0 auto;padding:20px}header{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#fff;text-align:center;z-index:10;border-radius:0 0 16px 16px;margin-bottom:1rem;padding:1rem 0;position:relative;box-shadow:0 4px 10px #00000014}header h1{font-family:Manrope,sans-serif;font-size:2.5rem;font-weight:700}header .subtitle{opacity:.85;font-family:Manrope,sans-serif;font-size:1rem;font-weight:400}.card-wrapper{background:#fff;border-radius:12px;width:100%;max-width:800px;margin:0 auto 20px;padding:2rem;box-shadow:0 4px 20px #0000001a}.tabs{justify-content:center;gap:.5rem;max-width:800px;margin:0 auto 1rem;display:flex}.tab{color:var(--dark);cursor:pointer;background:#fff;border:2px solid #0000;border-radius:8px;padding:.6rem 1.2rem;font-size:1rem;box-shadow:0 2px 6px #0000000f}.tab:hover{background:var(--light);transform:none;box-shadow:0 2px 6px #0000001a}.tab.active{background:var(--primary);color:#fff}.quiz-container{width:100%;padding:0 0 2rem}.question-number,.score-value{color:var(--primary);font-weight:700}.day-banner{text-align:center;color:var(--secondary);margin-bottom:1rem;font-size:.95rem}.question{margin-bottom:1.5rem;font-size:1.3rem}.question-prompt{margin-bottom:.75rem}.program-box{border:1px solid #d0d7de;border-left:4px solid var(--primary);white-space:pre;background:#f4f6f8;border-radius:8px;margin:0;padding:1rem;font-family:Menlo,Consolas,monospace;font-size:.9rem;line-height:1.5;overflow-x:auto}.question code,.question-text code{background:#f0f2f5;border-radius:4px;padding:.1em .35em;font-family:Menlo,Consolas,monospace;font-size:.92em}.options{margin-bottom:1.5rem}.option{background-color:var(--light);cursor:pointer;border:2px solid #c5d3e0;border-radius:8px;align-items:center;gap:8px;margin-bottom:.8rem;padding:1rem;transition:all .3s;display:flex}.option-label{flex-shrink:0;min-width:24px;font-weight:700}.option-text{flex:1}.option:hover{border-color:var(--primary);background-color:#d3e0ee}.option.selected{background-color:var(--primary);color:#fff;border-color:var(--primary)}.option.correct{background-color:var(--success);color:#fff;border-color:var(--success)}.option.incorrect{background-color:var(--danger);color:#fff;border-color:var(--danger)}.option.disabled{cursor:default}.controls{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem;display:flex}button{background-color:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:.8rem 1.5rem;font-size:1rem;transition:all .3s}button:hover{background-color:var(--secondary);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}button:disabled{color:#888;cursor:not-allowed;box-shadow:none;opacity:.6;background-color:#ddd;transform:none}.explanation{border-left:4px solid var(--success);background-color:#e8f5e9;border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1rem}.explanation.wrong{border-left-color:var(--danger);background-color:#fdecea}.explanation h3{margin-bottom:.5rem;font-size:1.1rem}.explanation h3.right-title{color:var(--success)}.explanation h3.wrong-title{color:var(--danger)}.final-screen{text-align:center;padding:0 0 2rem}.final-screen h2{color:var(--primary);margin-bottom:.25rem}.final-score{color:var(--primary);margin:1rem 0;font-size:2rem}.final-hint{margin-top:.5rem}.wordle-grid{justify-content:center;gap:.5rem;margin:1.25rem auto;display:flex}.wordle-cell{border:2px solid #00000014;border-radius:8px;width:48px;height:48px}.wordle-cell.correct{background:#6aaa64}.wordle-cell.wrong{background:#c92a2a}.milestone-box{text-align:center;background:#fafbfc;border:2px solid #d0d7de;border-radius:10px;max-width:380px;margin:1.5rem auto;padding:1.2rem}.milestone-title{margin-bottom:.8rem;font-size:1.2rem;font-weight:700}.milestone-progress{margin-top:.5rem}.progress-label{color:#555;margin-bottom:.3rem;font-size:.9rem}.progress-bar{background:#e8eef5;border-radius:8px;width:100%;height:12px;overflow:hidden}.progress-fill{background:linear-gradient(to right, var(--primary), var(--secondary));width:0%;height:100%;transition:width .4s}.review-toggle{text-align:left;background:#f9fafb;border:1px solid #d0d7de;border-radius:8px;margin-top:2rem;overflow:hidden;box-shadow:0 2px 5px #0000000d}.review-toggle summary{cursor:pointer;background-color:var(--light);border-bottom:1px solid #d0d7de;align-items:center;gap:.5rem;padding:1rem;font-size:1.1rem;font-weight:700;list-style:none}.review-toggle summary::-webkit-details-marker{display:none}.review-toggle summary .arrow-icon{justify-content:center;align-items:center;width:1.2em;margin-right:.5rem;display:inline-flex}.review-toggle summary .arrow-icon i{transition:transform .3s}.review-toggle[open] summary{background-color:#d3e0ee}.review-toggle[open] summary .arrow-icon i{transform:rotate(90deg)}.review-container{border-top:1px solid #d0d7de;padding:1rem}.review-question{border-bottom:1px dashed #ccc;margin-bottom:1.5rem;padding-bottom:1rem}.review-question:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.review-question .question-text{margin-bottom:.5rem;font-weight:600}.review-question-label{margin-bottom:.35rem}.review-question .program-box{margin-top:.5rem;font-size:.85rem}.answer-info{margin-left:.5rem;font-size:.95rem}.answer-info strong{color:var(--primary)}.explanation-text{margin-top:.5rem;font-style:italic}.share-box{text-align:center;background:#f5f7fa;border-radius:10px;margin-top:2rem;padding:1rem;box-shadow:0 3px 8px #00000014}.share-box h3{color:var(--primary);margin-bottom:.5rem;font-size:1.2rem}.share-preview{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;text-align:left;background-color:#fff;border:1px solid #d0d7de;border-radius:12px;max-width:100%;margin:1rem auto;padding:.8rem 1rem;font-family:Menlo,Consolas,monospace;font-size:.9rem;line-height:1.4;box-shadow:0 2px 5px #0000000d}.share-buttons{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-top:.5rem;display:flex}.share-buttons button{align-items:center;gap:.35rem;padding:.5rem .8rem;font-size:1rem;display:inline-flex}.copy-status{color:var(--success);font-size:.9rem;font-weight:600}.auth-form{flex-direction:column;gap:.9rem;max-width:420px;margin:0 auto;display:flex}.auth-form h2{text-align:center;color:var(--primary)}.auth-form label{font-size:.95rem;font-weight:600}.auth-form input{border:2px solid #c5d3e0;border-radius:8px;width:100%;padding:.7rem .9rem;font-size:1rem}.auth-form input:focus{border-color:var(--primary);outline:none}.auth-error{color:var(--danger);background:#fdecea;border-radius:8px;padding:.6rem .9rem;font-size:.95rem}.auth-info{color:var(--success);background:#e8f5e9;border-radius:8px;padding:.6rem .9rem;font-size:.95rem}.auth-switch{text-align:center;font-size:.95rem}.auth-switch a{color:var(--primary);cursor:pointer;font-weight:700;text-decoration:underline}.user-bar{max-width:800px;color:var(--dark);justify-content:space-between;align-items:center;margin:0 auto .8rem;padding:0 4px;font-size:.95rem;display:flex}.user-bar button{color:var(--primary);border:1px solid var(--primary);background:0 0;padding:.35rem .8rem;font-size:.85rem}.user-bar button:hover{background:var(--light);box-shadow:none;transform:none}.leaderboard-scroll{-webkit-overflow-scrolling:touch;width:100%;overflow-x:auto}.leaderboard-table{border-collapse:collapse;width:100%;margin-top:1rem}.leaderboard-table th,.leaderboard-table td{text-align:left;border-bottom:1px solid #e5e5e5;padding:.7rem .9rem}.leaderboard-table th{color:var(--primary);text-transform:uppercase;letter-spacing:.03em;font-size:.9rem}.leaderboard-table tr.me{background:var(--light);font-weight:700}.rank-medal{font-size:1.2rem}.countdown-box{text-align:center;padding:2rem 1rem}.countdown-box h2{color:var(--primary);margin-bottom:.6rem}.muted{color:#777;font-size:.95rem}@media (width<=600px){.container{padding:10px}header h1{font-size:1.8rem}.card-wrapper{padding:1rem}.quiz-container{padding:0 0 1rem}.leaderboard-scroll{margin:1rem -.4rem 0;padding:0 .4rem .35rem}.leaderboard-table{min-width:520px;margin-top:0}.leaderboard-table th,.leaderboard-table td{white-space:nowrap;padding:.55rem .6rem;font-size:.85rem}.leaderboard-table th{font-size:.75rem}.rank-medal{font-size:1rem}}
