.check-in-btn{width:200px;height:200px;border-radius:50%;font-size:1.5rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);border:none;box-shadow:0 10px 40px rgba(245,158,11,.4);transition:all .3s ease;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:0 auto}.check-in-btn:hover:not(.checked){transform:scale(1.05);box-shadow:0 15px 50px rgba(245,158,11,.5)}.check-in-btn:active:not(.checked){transform:scale(.98)}.check-in-btn.checked{background:linear-gradient(135deg,#48bb78 0%,#38a169 100%);box-shadow:0 10px 40px rgba(72,187,120,.4);cursor:default}.check-in-btn .btn-icon{font-size:3rem}.check-in-btn .btn-text{font-size:1.2rem}.check-in-btn:not(.checked){animation:pulse 2s infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes checkInSuccess{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}.check-in-btn.animate-success{animation:checkInSuccess .5s ease-out}.check-in-status{text-align:center;margin-top:20px;font-size:.95rem;color:#64748b}.check-in-status .status-time{font-weight:600;color:#48bb78}.check-in-status .break-warning{color:#f59e0b;font-weight:600}.streak-result-container{text-align:center;padding:20px 0}.streak-main{margin-bottom:30px}.streak-label{font-size:1rem;color:#64748b;margin-bottom:8px}.streak-value{font-size:4rem;font-weight:700;background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.streak-unit{font-size:1.5rem;color:#f59e0b;margin-left:5px}.streak-stats{display:flex;justify-content:space-around;gap:15px}.stat-item{flex:1;text-align:center;padding:15px 10px;background:rgba(102,126,234,.05);border-radius:12px}.stat-icon{font-size:1.5rem;margin-bottom:5px}.stat-value{font-size:1.8rem;font-weight:700;color:#667eea}.stat-label{font-size:.85rem;color:#64748b;margin-top:5px}.heatmap-wrapper{overflow-x:auto;padding:10px 0}.heatmap-container{display:grid;grid-template-columns:repeat(53,12px);grid-template-rows:repeat(7,12px);grid-auto-flow:column;gap:3px;width:max-content;margin:0 auto}.heatmap-cell{width:12px;height:12px;border-radius:2px;background-color:#ebedf0;cursor:pointer;transition:all .15s ease}.heatmap-cell.checked{background-color:#40c463}.heatmap-cell:hover{outline:2px solid #1b1f23;outline-offset:-1px}.heatmap-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.heatmap-title{font-size:1rem;font-weight:600;color:#334155}.heatmap-legend{display:flex;align-items:center;gap:6px;font-size:.75rem;color:#64748b}.heatmap-legend-box{width:12px;height:12px;border-radius:2px}.heatmap-legend-box.empty{background-color:#ebedf0}.heatmap-legend-box.filled{background-color:#40c463}.heatmap-legend-label{margin-right:8px}.heatmap-day-labels{display:grid;grid-template-rows:repeat(7,12px);gap:3px;margin-right:8px;font-size:.7rem;color:#64748b}.heatmap-day-labels span{line-height:12px;text-align:right}.heatmap-with-labels{display:flex;align-items:flex-start}.heatmap-month-labels{display:flex;gap:3px;margin-top:8px;font-size:.7rem;color:#64748b}.heatmap-tooltip{position:fixed;background:rgba(0,0,0,.85);color:#fff;padding:8px 12px;border-radius:6px;font-size:.8rem;pointer-events:none;z-index:1000;white-space:nowrap;opacity:0;transition:opacity .2s ease}.heatmap-tooltip.visible{opacity:1}.habit-name-input{text-align:center;font-size:1.1rem;font-weight:600;border:2px dashed #e2e8f0;background:transparent;padding:10px 15px;border-radius:8px;width:100%;max-width:300px;margin:0 auto 20px;display:block;transition:all .3s ease}.habit-name-input:focus{border-color:#667eea;outline:none;background:#fff}.habit-name-input::placeholder{color:#94a3b8;font-weight:400}.habit-tabs{display:flex;flex-wrap:wrap;gap:8px}.habit-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px;background:rgba(102,126,234,.08);border:2px solid transparent;border-radius:12px;cursor:pointer;transition:all .2s ease;min-width:100px;position:relative}.habit-tab:hover{background:rgba(102,126,234,.15)}.habit-tab.active{background:linear-gradient(135deg,rgba(102,126,234,.2) 0%,rgba(118,75,162,.2) 100%);border-color:#667eea}.habit-tab-name{font-size:.9rem;font-weight:600;color:#334155;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.habit-tab.active .habit-tab-name{color:#667eea}.habit-tab-streak{font-size:.75rem;color:#64748b;background:rgba(102,126,234,.1);padding:2px 8px;border-radius:10px}.habit-tab.active .habit-tab-streak{background:rgba(102,126,234,.2);color:#667eea}.habit-tab-delete{position:absolute;top:4px;right:4px;width:18px;height:18px;font-size:14px;line-height:16px;text-align:center;color:#94a3b8;border-radius:50%;opacity:0;transition:all .2s ease}.habit-tab:hover .habit-tab-delete{opacity:1}.habit-tab-delete:hover{background:#f56565;color:#fff}.habit-tab-add{flex-direction:row;gap:8px;background:rgba(72,187,120,.1);border:2px dashed #48bb78;color:#48bb78}.habit-tab-add:hover{background:rgba(72,187,120,.2)}.habit-tab-add i{font-size:1rem}.habit-tab-add span{font-size:.9rem;font-weight:600}@media(max-width:768px){.check-in-btn{width:160px;height:160px;font-size:1.2rem}.check-in-btn .btn-icon{font-size:2.5rem}.check-in-btn .btn-text{font-size:1rem}.streak-value{font-size:3rem}.streak-stats{flex-direction:column;gap:10px}.stat-item{padding:12px}.heatmap-container{grid-template-columns:repeat(53,10px);grid-template-rows:repeat(7,10px)}.heatmap-cell{width:10px;height:10px}.heatmap-day-labels{grid-template-rows:repeat(7,10px);font-size:.6rem}.habit-tabs{gap:6px}.habit-tab{padding:10px 12px;min-width:80px}.habit-tab-name{font-size:.8rem;max-width:70px}.habit-tab-streak{font-size:.7rem}.habit-tab-add span{display:none}.habit-tab-add{min-width:auto;padding:10px 14px}}@media(max-width:480px){.check-in-btn{width:140px;height:140px}.check-in-btn .btn-icon{font-size:2rem}.streak-value{font-size:2.5rem}.stat-value{font-size:1.5rem}.heatmap-container{grid-template-columns:repeat(53,8px);grid-template-rows:repeat(7,8px);gap:2px}.heatmap-cell{width:8px;height:8px}.heatmap-day-labels{grid-template-rows:repeat(7,8px);gap:2px}}