*{padding:0;margin:0;box-sizing:border-box}body{background-color:#3b36cc;color:#fff;display:flex;flex-direction:row;justify-content:center;font-family:sans-serif;min-height:100vh;margin:0;padding:10px}.wrapper{width:100%;max-width:450px;padding:30px;background-color:#1a1a40;border-radius:5px;margin-top:20px;text-align:center;box-shadow:0 4px 6px #0000001a}.create-form{height:40px;width:100%;margin:25px 0;border:1px solid #3b36cc;display:flex}.create-form>input{outline:none;border:none;background-color:#fff;color:#000;width:100%;height:100%;padding-left:20px;font-size:16px}.create-form>input::placeholder{color:#666}.create-form>button{border:none;background-color:#3b36cc;color:#fff;min-width:50px;width:50px;height:100%;cursor:pointer;font-size:14px;transition:background-color .2s}.create-form>button:hover{background-color:#2d28a3}.todo{background-color:#3b36cc;min-height:40px;padding:0 10px;margin-top:10px;border-radius:5px;display:flex;justify-content:space-between;align-items:center;word-break:break-word;flex-wrap:wrap;gap:10px}.todo:hover{background-color:#4a44e6}.todo p{font-size:16px;line-height:1.4;margin:0;cursor:pointer;flex:1;text-align:left;color:#fff}.todo p:hover{opacity:.8}.completed{opacity:.4;text-decoration:line-through 3px black}.todo>div{display:flex;gap:10px;flex-shrink:0}.todo svg{width:20px;height:20px;cursor:pointer;transition:all .2s ease;color:#fff;opacity:.8}.todo svg:hover{opacity:1;transform:scale(1.1)}.stats{margin:15px 0;padding:10px;background-color:#3b36cc4d;border-radius:5px;text-align:center}.stats p{margin:0;font-size:14px;color:#e0e0e0}.clear-all-container{margin-top:20px;text-align:center}.clear-all-btn{border:none;background-color:#ff4757;color:#fff;width:80px;height:40px;cursor:pointer;border-radius:3px;font-size:14px;transition:background-color .2s}.clear-all-btn:hover{background-color:#ff3838}.empty-message{margin:20px 0;color:#888;font-style:italic;font-size:14px}.wrapper.device-desktop{transition:all .3s ease}.wrapper.device-tablet{border-radius:8px}.wrapper.device-mobile{border-radius:12px;margin-top:5px}body.touch-device .create-form>button,body.touch-device .clear-all-btn{min-height:44px}body.touch-device .todo{min-height:48px}body:not(.touch-device) .create-form>button:hover,body:not(.touch-device) .clear-all-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0003}@media (min-width: 1440px){.wrapper{max-width:700px;padding:50px}.wrapper h1{font-size:36px}.create-form{height:55px}.create-form>input{font-size:20px;padding-left:30px}.create-form>button{min-width:90px;width:90px;font-size:18px}.todo{min-height:55px;padding:18px}.todo p{font-size:20px}.todo svg{width:24px;height:24px}.clear-all-btn{width:140px;height:55px;font-size:18px}}@media (min-width: 1024px) and (max-width: 1439px){.wrapper{max-width:650px;padding:45px}.wrapper h1{font-size:34px}}@media (min-width: 768px) and (max-width: 1023px){.wrapper{max-width:550px;padding:35px}.wrapper h1{font-size:28px}.create-form{height:48px}.create-form>input{font-size:17px;padding-left:20px}.create-form>button{min-width:75px;width:75px;font-size:15px}.todo{min-height:48px;padding:13px}.todo p{font-size:17px}.todo svg{width:20px;height:20px}.clear-all-btn{width:110px;height:48px;font-size:15px}}@media (max-width: 767px){body{padding:5px}.wrapper{max-width:100%;padding:20px 15px;margin-top:10px;border-radius:8px}.wrapper h1{font-size:24px;margin-bottom:15px}.create-form{height:48px;margin:20px 0}.create-form>input{padding-left:15px;font-size:16px}.create-form>button{min-width:70px;width:70px;font-size:12px}.todo{min-height:48px;padding:12px;margin-top:12px}.todo p{font-size:16px;line-height:1.4;flex:1;text-align:left;margin-right:10px}.todo>div{display:flex;gap:15px;flex-shrink:0}.todo svg{width:20px;height:20px}.stats{padding:12px;margin:20px 0}.stats p{font-size:16px}.clear-all-container{margin-top:25px}.clear-all-btn{width:100px;height:48px;font-size:16px}.empty-message{font-size:16px;margin:30px 0}}@media (max-width: 479px){.wrapper{padding:15px 10px}.wrapper h1{font-size:20px}.create-form{height:44px}.create-form>input{padding-left:12px;font-size:16px}.create-form>button{min-width:60px;width:60px;font-size:11px}.todo{padding:10px}.todo p{font-size:14px}.todo svg{width:18px;height:18px}.clear-all-btn{width:90px;height:44px;font-size:14px}}@media (hover: none) and (pointer: coarse){.create-form>button,.clear-all-btn,.todo svg{min-height:44px;min-width:44px}.todo{min-height:52px}}