:root{--primary:#ff8c00;--primary-hover:#e07b00;--bg-color:#fff5eb;--bg-panel:#fff;--text-main:#333;--text-muted:#887a6e;--border-color:#f0e6da;--font-family:"Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;--ring-bg:#f5ede4}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;display:flex}#root{background-color:var(--bg-panel);flex-direction:column;width:100%;max-width:800px;height:100vh;display:flex;position:relative;overflow:hidden;box-shadow:0 0 20px #0000000d}@media (width>=800px){#root{border-radius:20px;height:90vh;margin:20px 0}}@keyframes slide-up{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes pop{0%{opacity:0;transform:scale(.8)}70%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6,p{margin:0}.timer-screen{justify-content:center;align-items:center}.progress-container{background-color:var(--ring-bg);border-radius:6px;width:100%;height:12px;margin-bottom:40px;overflow:hidden;box-shadow:inset 0 2px 4px #00000080}.progress-bar{background:linear-gradient(90deg,#ff8c00,#ffb347);height:100%;transition:width 1s linear;box-shadow:0 0 10px #ff8c00b3}.timer-display{letter-spacing:4px;text-shadow:0 0 20px #ffffff1a;font-size:4rem;font-weight:700;font-family:var(--font-family);margin-bottom:40px}.controls{gap:20px;margin-bottom:40px;display:flex}.control-btn{border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;display:flex;box-shadow:0 4px 15px #ff8c0066}.btn-secondary.control-btn{width:60px;height:60px;box-shadow:none}.reward-info{text-align:center;background-color:#ff8c001a;border:1px solid #ff8c004d;border-radius:12px;margin-top:20px;padding:15px 25px;font-size:1.1rem;animation:2s infinite pulse}.highlight-text{color:var(--primary);font-size:1.4rem;font-weight:700}.settings-screen{overflow-y:auto}.section-title{color:var(--primary);border-bottom:2px solid var(--border-color);margin-bottom:20px;padding-bottom:5px;font-size:1.2rem}.setting-group{margin-bottom:20px}.setting-group label{color:var(--text-muted);margin-bottom:8px;font-size:.9rem;display:block}.input-row{flex-direction:column;gap:10px;display:flex}.input-field{background-color:var(--ring-bg);border:1px solid var(--border-color);color:var(--text-main);border-radius:8px;flex:1;padding:10px;font-family:inherit;font-size:1rem}.input-field:focus{border-color:var(--primary);outline:none}.flex-2{flex:2}.flex-1{flex:1}.btn-small{border-radius:8px;padding:10px 15px;font-size:.9rem}.toggle-group{justify-content:space-between;align-items:center;display:flex}.toggle-group label{margin-bottom:0}.divider{background-color:var(--border-color);height:1px;margin:30px 0}.switch{width:50px;height:28px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:var(--border-color);transition:all .4s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;width:20px;height:20px;transition:all .4s;position:absolute;bottom:4px;left:4px}input:checked+.slider{background-color:var(--primary)}input:checked+.slider:before{transform:translate(22px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.reward-list{margin:0;padding:0;list-style:none}.reward-item{background-color:var(--ring-bg);border-radius:8px;align-items:center;margin-bottom:10px;padding:12px;display:flex}.reward-days{color:var(--primary);width:50px;font-weight:700}.reward-label{flex:1}.btn-delete{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.2rem}.btn-delete:hover{color:#f44}.calendar-screen{overflow-y:auto}.calendar-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.month-title{color:var(--primary);font-size:1.5rem}.btn-icon{color:var(--text-main);cursor:pointer;background:0 0;border:none;padding:10px;font-size:1.5rem}.btn-icon:hover{color:var(--primary)}.calendar-grid{grid-template-columns:repeat(7,1fr);gap:10px;display:grid}.weekday{text-align:center;color:var(--text-muted);margin-bottom:10px;font-size:.8rem}.calendar-day{aspect-ratio:1;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.day-number{z-index:2;margin-bottom:4px;font-size:.8rem}.ring-container{z-index:1;justify-content:center;align-items:center;width:30px;height:30px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ring-placeholder{border:2px solid var(--border-color);border-radius:50%;width:100%;height:100%}.ring.complete{background-color:var(--primary);border-radius:50%;width:100%;height:100%;box-shadow:0 0 10px #ff8c0066}.ring.partial{border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.ring-inner{background-color:var(--bg-panel);border-radius:50%;width:24px;height:24px}.timeline-screen{overflow-y:auto}.empty-state{text-align:center;color:var(--text-muted);margin-top:40px}.timeline-list{flex-direction:column;gap:15px;display:flex}.timeline-item{background-color:var(--ring-bg);border-left:4px solid var(--border-color);border-radius:10px;align-items:center;padding:15px;display:flex}.timeline-item.complete{border-left-color:var(--primary)}.timeline-item.partial{border-left-color:#ffb347}.timeline-date{flex:1;font-weight:700}.timeline-details{color:var(--text-muted);gap:5px;margin-right:15px;display:flex}.timeline-actual{color:var(--text-main);font-weight:700}.timeline-status-icon{font-size:1.5rem}.login-screen{background-color:var(--bg-color);justify-content:center;align-items:center;padding:0}.login-container{background-color:var(--bg-panel);text-align:center;border-radius:20px;width:90%;max-width:400px;padding:50px 30px;box-shadow:0 10px 30px #ff8c001a}.login-title{color:var(--primary);letter-spacing:2px;margin-bottom:10px;font-size:2.5rem}.login-subtitle{color:var(--text-muted);margin-bottom:40px}.google-btn-wrapper{justify-content:center;display:flex}.app-container{flex-direction:column;height:100%;display:flex}.header{text-align:center;border-bottom:1px solid var(--border-color);padding:20px}.header-title{color:var(--primary);letter-spacing:2px;font-size:1.5rem;font-weight:700}.main-content{flex-direction:column;flex:1;display:flex;position:relative;overflow-y:auto}.footer-nav{border-top:1px solid var(--border-color);background-color:var(--bg-panel);justify-content:space-around;padding:10px 0;display:flex}.nav-item{color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;padding:10px;font-family:inherit;font-size:.8rem;transition:color .2s;display:flex}.nav-item:hover,.nav-item.active{color:var(--primary)}.nav-icon{margin-bottom:5px}.btn{background-color:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:25px;padding:12px 24px;font-family:inherit;font-size:1rem;font-weight:700;transition:transform .2s,background-color .2s}.btn:active{transform:scale(.95)}.btn:hover{background-color:var(--primary-hover)}.btn-secondary{border:2px solid var(--primary);color:var(--primary);background-color:#0000}.btn-secondary:hover{background-color:#ff8c001a}.screen{flex-direction:column;height:100%;padding:20px;animation:.3s ease-out slide-up;display:flex}.celebration-popup{z-index:100;background-color:#000c;justify-content:center;align-items:center;animation:.5s ease-out pop;display:flex;position:absolute;inset:0}.celebration-content{background-color:var(--bg-panel);border:2px solid var(--primary);color:var(--text-main);text-align:center;border-radius:15px;padding:30px;font-size:1.5rem;font-weight:700;box-shadow:0 0 30px #ff8c0099}