*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;min-height:100vh;transition:background .3s ease,color .3s ease}body{background:linear-gradient(135deg,#fde2e4,#e2f0cb,#cde7f0)}body.dark{background:linear-gradient(135deg,#0d1b2a,#1b263b,#415a77);background-size:400% 400%;animation:darkGradientMove 20s ease infinite;color:#f8fafc}@keyframes darkGradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.welcome-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;transition:background .3s ease}.welcome-title{font-size:2.5rem;margin-bottom:10px}body.dark .welcome-title{color:#f8fafc}.welcome-subtitle{font-size:1.2rem;margin-bottom:40px;color:#555}body.dark .welcome-subtitle{color:#cbd5f5}.theme-toggle{position:fixed;top:20px;right:20px;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;font-size:20px;background:#ffffffe6;box-shadow:0 4px 12px #0003;transition:all .3s ease;z-index:1000}.theme-toggle:hover{transform:scale(1.1)}body.dark .theme-toggle{background:#0d1b2a;color:#f8fafc;box-shadow:0 4px 12px #ffffff26}.characters-list{display:flex;flex-direction:column;gap:20px;width:100%;max-width:500px}.character-card{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:15px;border:2px solid #eee;padding:15px 20px;cursor:pointer;transition:all .3s ease}body.dark .character-card{background:#020617d9;border-color:#1e293b}.character-card:hover{box-shadow:0 10px 25px #0003;transform:translateY(-3px)}body.dark .character-card:hover{box-shadow:0 10px 25px #ffffff1a}.character-card.selected{border-color:#06d6a0;box-shadow:0 10px 25px #06d6a04d}.character-text h3{font-size:1.5rem;margin:0;color:#333}body.dark .character-text h3{color:#f8fafc}.character-image img{width:100px;height:100px;object-fit:contain;border-radius:50px;transition:transform .3s ease}.character-card:hover .character-image img{transform:scale(1.05)}@media(max-width:480px){.characters-list{max-width:90%}.character-card{flex-direction:column;align-items:center;gap:10px}.character-image img{width:80px;height:80px}}.promodoro-bg{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:20px;transition:background .3s ease}.card-scene{perspective:1200px;display:flex;justify-content:center;align-items:center;width:100%}.flip-card{width:400px;max-width:95%;height:520px;position:relative;transform-style:preserve-3d;transition:transform .8s ease-in-out;border-radius:25px}.flip-card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:25px;border:2px solid #eee;box-shadow:0 20px 40px #00000026;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;padding:25px;gap:15px}body.dark .card-face{background:#020617d9;border-color:#1e293b;box-shadow:0 20px 40px #ffffff14}.card-back{transform:rotateY(180deg)}.character-gif{width:200px;height:200px;object-fit:contain;margin-bottom:20px}.timer-row{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:25px}.timer-text{font-size:3rem;font-weight:700;color:#333}body.dark .timer-text{color:#f8fafc}.adjust-btn{background:transparent;border:none;font-size:3.2rem;font-weight:800;color:#333;cursor:pointer;padding:10px}body.dark .adjust-btn{color:#f8fafc}.action-buttons{display:flex;gap:15px}.timer-btn{padding:12px 26px;border-radius:30px;border:none;font-size:1rem;cursor:pointer}.timer-btn.start{background:#06d6a0;color:#fff}.timer-btn.stop{background:#ef476f;color:#fff}.timer-btn.start-again{background:#06d6a0;color:#fff;margin-top:15px}.card-back h2{font-size:1.8rem;font-weight:700}body.dark .card-back h2{color:#f8fafc}.card-back p{font-size:1.1rem;color:#555}body.dark .card-back p{color:#cbd5f5}@media(max-width:480px){.flip-card{width:90%;height:480px}.timer-text{font-size:2.4rem}.adjust-btn{font-size:2.6rem}.action-buttons{flex-direction:column;width:100%}.timer-btn{width:100%}.character-gif{width:150px;height:150px}}