*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #f8f9fa;--bg-secondary: #ffffff;--bg-tertiary: #f8f9fa;--text-primary: #1a1a1a;--text-secondary: #495057;--text-muted: #6b7280;--border-color: var(--border-color);--border-hover: #2563eb;--shadow-sm: rgba(0, 0, 0, .05);--shadow-md: rgba(0, 0, 0, .08);--shadow-lg: rgba(0, 0, 0, .12);--accent-blue: #2563eb;--accent-blue-light: #dbeafe;--accent-blue-dark: #1d4ed8;--accent-green: #10b981;--accent-green-dark: #059669;--accent-red: #dc2626;--accent-red-dark: #b91c1c;--accent-gray: #6b7280;--accent-gray-dark: #4b5563}html.dark-mode{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--border-color: #334155;--border-hover: #3b82f6;--shadow-sm: rgba(0, 0, 0, .3);--shadow-md: rgba(0, 0, 0, .4);--shadow-lg: rgba(0, 0, 0, .5);--accent-blue: #3b82f6;--accent-blue-light: #1e3a8a;--accent-blue-dark: #2563eb;--accent-green: #10b981;--accent-green-dark: #059669;--accent-red: #ef4444;--accent-red-dark: #dc2626;--accent-gray: #94a3b8;--accent-gray-dark: #cbd5e1}html{overflow-x:hidden;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,video,iframe{max-width:100%;height:auto;display:block}p,h1,h2,h3,h4,h5,h6,span,div{word-wrap:break-word;overflow-wrap:break-word}body{font-family:Apple SD Gothic Neo,Noto Sans KR,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);background-attachment:fixed;color:var(--text-primary);line-height:1.6;overflow-x:hidden;width:100%;-webkit-tap-highlight-color:rgba(37,99,235,.1);transition:background-color .3s ease,color .3s ease}.app{min-height:100vh;display:flex;flex-direction:column}.nav{background:var(--bg-secondary);border-bottom:2px solid var(--border-color);display:flex;padding:0;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px var(--shadow-sm);transition:background-color .3s ease,border-color .3s ease}.nav a{flex:1;text-align:center;padding:1.2rem .5rem;text-decoration:none;color:var(--text-secondary);font-weight:700;font-size:1.1rem;border-bottom:3px solid transparent;transition:all .2s ease}.nav a:hover{background:var(--bg-tertiary);color:var(--accent-blue);border-bottom-color:var(--accent-blue)}.nav a:active{background:var(--border-color)}.user-switch-btn{padding:.75rem 1rem;background:var(--bg-secondary);border:none;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;border-left:2px solid #e9ecef}.user-switch-btn:hover{background:var(--bg-tertiary)}.user-switch-btn:active{background:#e9ecef}.user-switch-emoji{font-size:1.8rem;line-height:1}.main{flex:1;padding:1.5rem 0 3rem}.container{max-width:600px;margin:0 auto;padding:1rem;width:100%;box-sizing:border-box;overflow-x:hidden}h1{font-size:2rem;margin-bottom:1rem;color:var(--text-primary);text-align:center;font-weight:800}h2{font-size:1.4rem;margin-bottom:1rem;color:var(--text-primary);font-weight:700}.progress-summary{background:var(--bg-secondary);padding:1rem;border-radius:12px;margin-bottom:1rem;box-shadow:0 2px 8px var(--shadow-md);border:2px solid var(--border-color)}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.progress-text{font-size:1rem;font-weight:700;color:var(--text-primary)}.progress-percentage{font-size:1.5rem;font-weight:800;color:#2563eb}.progress-bar-container{width:100%;height:12px;background:#e9ecef;border-radius:10px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--accent-blue);border-radius:10px;transition:width .5s ease}.progress-bar-fill[style*="100%"]{background:linear-gradient(90deg,gold,tomato,#ff1493);animation:glowPulse 2s ease-in-out infinite}@keyframes glowPulse{0%,to{box-shadow:0 0 10px #ffd70080,0 0 20px #ff63474d}50%{box-shadow:0 0 20px #ffd700cc,0 0 40px #ff634799,0 0 60px #ff149366}}.celebration-message{margin-top:.75rem;padding:1rem;background:linear-gradient(135deg,gold,tomato,#ff1493);border-radius:10px;text-align:center;font-size:1.3rem;font-weight:800;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3);animation:celebrateExplosion .8s ease-out;box-shadow:0 0 20px #ffd70099,0 0 40px #ff634766}@keyframes celebrateExplosion{0%{transform:scale(.3) rotate(-10deg);opacity:0}50%{transform:scale(1.15) rotate(5deg);opacity:1}70%{transform:scale(.95) rotate(-3deg)}85%{transform:scale(1.05) rotate(2deg)}to{transform:scale(1) rotate(0)}}.routine-list{display:flex;flex-direction:column;gap:.75rem}.routine-item{background:var(--bg-secondary);padding:1rem;border-radius:12px;box-shadow:0 2px 8px var(--shadow-md);transition:all .2s ease;border:2px solid var(--border-color);position:relative}.routine-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-lg);border-color:#2563eb}.routine-content{display:flex;flex-direction:column;gap:.5rem;flex:1}.checkbox-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:10px;transition:background .2s}.checkbox-label:hover{background:var(--bg-tertiary)}.checkbox-label input[type=checkbox]{width:28px;height:28px;cursor:pointer;flex-shrink:0;accent-color:#2563eb;transition:transform .2s ease;min-width:28px;min-height:28px}.checkbox-label input[type=checkbox]:checked{animation:checkPop .4s ease-out}@keyframes checkPop{0%{transform:scale(1)}50%{transform:scale(1.3) rotate(10deg)}to{transform:scale(1) rotate(0)}}.checkbox-label span{font-size:1.1rem;font-weight:600;flex:1;color:var(--text-primary)}.checkbox-label span.done{text-decoration:line-through;color:#b2bec3;opacity:.6}.time-routine{display:flex;flex-direction:column;gap:.75rem}.time-info{display:flex;flex-direction:column;gap:.5rem;padding:0}.time-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem}.time-header span:first-child{font-size:1.1rem;font-weight:700;color:var(--text-primary);flex:1}.time-header span:first-child.done{text-decoration:line-through;color:#b2bec3;opacity:.6}.time-header .time-progress-text{font-size:.9rem;font-weight:600;color:#2563eb;flex-shrink:0;white-space:nowrap}.time-progress-bar-container{width:100%;height:8px;background:#e9ecef;border-radius:6px;overflow:hidden}.time-progress-bar-fill{height:100%;background:#10b981;border-radius:6px;transition:width .4s ease}.time-completed-badge{margin-top:.5rem;padding:.65rem;background:linear-gradient(135deg,#10b981,#059669);border-radius:10px;text-align:center;font-size:1rem;font-weight:800;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.2);animation:fadeInScaleBounce .6s ease-out;box-shadow:0 4px 12px #10b98166}@keyframes fadeInScaleBounce{0%{opacity:0;transform:scale(.3) translateY(-20px)}50%{opacity:1;transform:scale(1.2) translateY(0)}65%{transform:scale(.9)}80%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.time-buttons{display:flex;gap:.5rem}.time-buttons button{flex:1;padding:.75rem;font-size:1.1rem;font-weight:700;background:var(--accent-blue);color:#fff;border:none;border-radius:10px;cursor:pointer;box-shadow:0 2px 6px #0000001a;transition:all .2s ease}.time-buttons button:hover{background:var(--accent-blue-dark);transform:translateY(-2px);box-shadow:0 4px 10px #00000026}.time-buttons button:active{transform:translateY(0);background:#1e40af}.add-routine{background:var(--bg-secondary);padding:1rem;border-radius:12px;box-shadow:0 2px 8px var(--shadow-md);margin-bottom:1rem;display:flex;flex-direction:column;gap:.75rem;border:2px solid var(--border-color)}.add-routine input[type=text],.add-routine input[type=number]{width:100%;padding:.75rem 1rem;font-size:1.05rem;border:2px solid #dee2e6;border-radius:10px;font-weight:600;transition:all .2s ease}.add-routine input[type=text]:focus,.add-routine input[type=number]:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.routine-type-selector{display:flex;gap:.75rem;background:var(--bg-tertiary);padding:.75rem;border-radius:10px}.routine-type-selector label{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;padding:.6rem;border-radius:8px;font-weight:600;font-size:1rem;background:#fff;color:#334155;border:2px solid #dee2e6;transition:all .2s ease;white-space:nowrap;min-width:0}.routine-type-selector label:hover{border-color:#2563eb}.routine-type-selector label:has(input[type=radio]:checked){background:#2563eb;color:#fff;border-color:#2563eb}.routine-type-selector input[type=radio]{width:20px;height:20px;accent-color:#2563eb}.target-minutes{display:flex;flex-direction:column;gap:.5rem}.target-minutes label{display:flex;flex-direction:column;gap:.5rem;font-size:1rem;font-weight:700;color:var(--text-primary)}.add-routine button,button{padding:1rem 2rem;font-size:1.2rem;font-weight:700;background:var(--accent-blue);color:#fff;border:none;border-radius:10px;cursor:pointer;box-shadow:0 2px 6px #0000001a;transition:all .2s ease}.add-routine button:hover,button:hover{background:var(--accent-blue-dark);transform:translateY(-2px);box-shadow:0 4px 10px #00000026}.add-routine button:active,button:active{transform:translateY(0);background:#1e40af}.routine-info{display:flex;flex-direction:column;gap:.35rem;flex:1}.routine-info span:first-child{font-size:1.1rem;font-weight:700;color:var(--text-primary)}.routine-info span.inactive{color:#b2bec3;opacity:.6}.routine-meta{font-size:.95rem;font-weight:600;color:#2563eb;background:#dbeafe;padding:.4rem .65rem;border-radius:6px;display:inline-block;width:fit-content}.routine-actions{display:flex;gap:.5rem}.routine-actions button{flex:1;padding:.65rem;font-size:.95rem;background:var(--accent-blue);box-shadow:0 2px 6px #0000001a;white-space:nowrap;min-width:fit-content}.routine-actions button:last-child{background:var(--accent-red);box-shadow:0 2px 6px #0000001a}.routine-actions button:last-child:hover{background:var(--accent-red-dark)}.streak-display{background:var(--bg-secondary);color:var(--text-primary);padding:2rem;border-radius:12px;text-align:center;margin-bottom:1.5rem;box-shadow:0 2px 8px var(--shadow-md);border:2px solid #2563eb}.streak-display h2{color:var(--text-primary);font-size:2rem;margin:0}.history-list{display:flex;flex-direction:column;gap:.75rem}.history-item{background:var(--bg-secondary);padding:1.25rem 1.5rem;border-radius:12px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 8px var(--shadow-md);border:2px solid var(--border-color);transition:all .2s ease}.history-item:hover{transform:translate(5px);border-color:#2563eb;box-shadow:0 4px 12px var(--shadow-lg)}.history-date{font-weight:700;font-size:1.1rem;color:var(--text-primary)}.history-stats{font-size:1.1rem;font-weight:700;color:#2563eb;background:#dbeafe;padding:.5rem 1rem;border-radius:10px}.user-section{background:var(--bg-secondary);padding:1.5rem;border-radius:12px;box-shadow:0 2px 8px var(--shadow-md);border:2px solid var(--border-color);margin-bottom:1.5rem}.user-section-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:2px solid #e9ecef}.user-section-emoji{font-size:1.75rem;line-height:1}.user-section-name{flex:1;font-size:1.3rem;font-weight:700;color:var(--text-primary)}.btn-share{background:var(--accent-blue);color:#fff;border:none;border-radius:8px;padding:.5rem .75rem;font-size:1.2rem;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px var(--shadow-sm)}.btn-share:hover{background:var(--accent-blue-dark);transform:translateY(-1px);box-shadow:0 4px 8px var(--shadow-md)}.btn-share:active{transform:translateY(0);box-shadow:0 2px 4px var(--shadow-sm)}.user-section-progress,.user-section-count{font-size:1rem;font-weight:700;color:#2563eb;background:#dbeafe;padding:.4rem .8rem;border-radius:6px}.user-section .routine-list{margin-top:0}.no-routines-message{text-align:center;color:var(--text-muted);font-size:1rem;padding:1rem;font-style:italic}.user-selector{margin-bottom:1rem}.user-selector label{display:block;font-weight:700;color:var(--text-primary);margin-bottom:.5rem;font-size:1rem}.user-selector select{width:100%;padding:.85rem;font-size:1.05rem;border:2px solid var(--border-color);border-radius:10px;background:var(--bg-secondary);color:var(--text-primary);font-weight:600;cursor:pointer;transition:all .2s ease}.user-selector select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 4px #2563eb1a}.settings-section{background:var(--bg-secondary);padding:2rem;border-radius:12px;box-shadow:0 2px 8px var(--shadow-md);border:2px solid var(--border-color);max-width:100%;box-sizing:border-box;overflow-x:hidden}.current-users-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.user-info-card{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:10px}.user-info-emoji{font-size:2rem;line-height:1}.user-info-name{flex:1;font-size:1.1rem;font-weight:700;color:var(--text-primary)}.current-user-badge{font-size:.9rem;font-weight:700;color:#2563eb;background:#dbeafe;padding:.4rem .8rem;border-radius:6px}.user-card-actions{display:flex;gap:.5rem}.btn-edit,.btn-delete{padding:.5rem .75rem;font-size:.9rem;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:all .2s ease}.btn-edit{background:var(--accent-blue);color:#fff}.btn-edit:hover{background:var(--accent-blue-dark)}.btn-delete{background:var(--accent-red);color:#fff}.btn-delete:hover{background:var(--accent-red-dark)}.user-edit-card{background:var(--bg-secondary);border:2px solid #2563eb;border-radius:10px;padding:1.5rem}.user-edit-form .form-group{margin-bottom:1rem}.user-edit-form .form-group label{display:block;font-weight:700;color:var(--text-primary);margin-bottom:.5rem;font-size:.95rem}.user-edit-form input[type=text]{width:100%;padding:.75rem;font-size:1rem;border:2px solid var(--border-color);border-radius:8px;font-weight:600}.user-edit-form input[type=text]:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.emoji-selector-small{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;max-width:100%;width:100%;box-sizing:border-box}.emoji-option-small{font-size:1.5rem;padding:0;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s ease;line-height:1;display:flex;align-items:center;justify-content:center;min-width:0;width:100%;box-sizing:border-box;aspect-ratio:1 / 1;height:auto}.emoji-option-small:hover{background:var(--bg-hover);transform:scale(1.05)}.emoji-option-small.selected{background:var(--bg-selected);border-color:var(--accent-blue);transform:scale(1.1)}.user-edit-actions{display:flex;gap:.75rem;margin-top:1.5rem}.user-edit-actions button{flex:1;padding:.85rem;font-size:1rem}.settings-buttons{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.settings-buttons button{width:100%;padding:1.25rem;font-size:1.2rem}.btn-primary{background:var(--accent-blue);box-shadow:0 2px 6px #0000001a}.btn-primary:hover{background:var(--accent-blue-dark)}.btn-secondary{background:var(--accent-gray);color:#fff;box-shadow:0 2px 6px #0000001a}.btn-secondary:hover{background:var(--accent-gray-dark)}.btn-danger{background:var(--accent-red);box-shadow:0 2px 6px #0000001a}.btn-danger:hover{background:var(--accent-red-dark)}.settings-info{border-top:2px solid #e9ecef;padding-top:1.5rem;background:var(--bg-tertiary);padding:1.5rem;border-radius:10px}.settings-info p{font-size:1rem;color:var(--text-secondary);margin-bottom:.75rem;font-weight:500;line-height:1.6}.settings-info strong{color:var(--text-primary);font-weight:700}.notification-settings{display:flex;flex-direction:column;gap:1rem}.notification-time-setting{background:var(--bg-tertiary);padding:1.25rem;border-radius:12px;border:2px solid var(--border-color)}.notification-time-label{display:block;font-weight:700;color:var(--text-primary);margin-bottom:.75rem;font-size:1rem}.notification-time-input{width:100%;max-width:200px;padding:.75rem;font-size:1.1rem;font-weight:600;border:2px solid var(--border-color);border-radius:10px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:all .2s ease}.notification-time-input:hover{border-color:var(--accent-blue)}.notification-time-input:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 4px #2563eb1a}.notification-time-description{margin-top:.75rem;font-size:.95rem;color:var(--text-secondary);font-weight:500}.notification-warning{background:#fff3cd;border:2px solid #ffc107;border-radius:10px;padding:1rem;color:#856404;font-weight:600;font-size:.95rem;margin-top:1rem}html.dark-mode .notification-warning{background:#ffc10726;border-color:#ffc107;color:#ffd54f}html.dark-mode .routine-type-selector label{background:var(--bg-secondary);color:var(--text-secondary);border-color:var(--border-color)}html.dark-mode .routine-type-selector label:hover{border-color:var(--accent-blue)}html.dark-mode .routine-type-selector label:has(input[type=radio]:checked){background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.toggle-button:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 1024px){.container{max-width:100%;padding:1rem}}@media (max-width: 768px){.nav a{font-size:1rem;padding:1.1rem .4rem}h1{font-size:1.75rem}h2{font-size:1.3rem}.container{padding:.9rem}.user-section{padding:1.25rem}.settings-section{padding:1.5rem}.emoji-selector,.emoji-selector-small{grid-template-columns:repeat(5,1fr);gap:.65rem}.emoji-option{font-size:1.9rem;padding:0;border-width:2px}.emoji-option-small{font-size:1.5rem;padding:0}}@media (max-width: 640px){.nav a{font-size:.95rem;padding:1rem .25rem}h1{font-size:1.6rem}h2{font-size:1.25rem}.container{padding:.75rem}.main{padding:1rem 0 2.5rem}.routine-item{padding:.85rem}.checkbox-label span,.time-header span:first-child{font-size:1.05rem}.time-buttons button{font-size:.95rem;padding:.6rem .4rem}.routine-actions button{font-size:.9rem;padding:.6rem;white-space:nowrap}.user-section{padding:1rem}.user-section-header{flex-wrap:wrap;gap:.5rem}.settings-section{padding:1.25rem}.settings-buttons button{padding:1rem;font-size:1.1rem}.progress-summary{padding:.9rem}.celebration-message{font-size:1.15rem;padding:.85rem}.btn-order{font-size:.9rem;padding:.2rem .4rem}.emoji-selector,.emoji-selector-small{grid-template-columns:repeat(4,1fr);gap:.6rem}.emoji-option{font-size:1.9rem;padding:0;border-width:2px}.emoji-option-small{font-size:1.45rem;padding:0}.routine-type-selector{gap:.5rem;padding:.6rem}.routine-type-selector label{padding:.5rem .3rem;font-size:.9rem;gap:.3rem}.routine-type-selector input[type=radio]{width:16px;height:16px}.user-info-card{gap:.75rem}.user-card-actions{gap:.4rem}.btn-edit,.btn-delete{padding:.45rem .6rem;font-size:.85rem}}@media (max-width: 480px){.nav a{font-size:.85rem;padding:.9rem .2rem}h1{font-size:1.4rem}h2{font-size:1.15rem}.container{padding:.6rem}.main{padding:.75rem 0 2rem}.routine-item{padding:.75rem}.checkbox-label{gap:.5rem}.checkbox-label input[type=checkbox]{width:24px;height:24px}.checkbox-label span,.time-header span:first-child{font-size:1rem}.time-header .time-progress-text{font-size:.85rem}.time-buttons button{font-size:.9rem;padding:.55rem .3rem}.routine-actions{flex-direction:column}.routine-actions button{font-size:.85rem;padding:.55rem;white-space:nowrap}.user-section{padding:.85rem}.user-section-emoji{font-size:1.5rem}.user-section-name{font-size:1.15rem}.settings-section{padding:1rem}.settings-buttons button{padding:.9rem;font-size:1rem}.progress-percentage{font-size:1.3rem}.celebration-message{font-size:1rem;padding:.75rem}.user-info-emoji{font-size:1.75rem}.user-info-name{font-size:1rem}.add-routine{padding:.85rem}.add-routine input[type=text],.add-routine input[type=number]{padding:.65rem .85rem;font-size:1rem}.add-routine button,button{padding:.85rem 1.5rem;font-size:1.1rem}.form-group input[type=text]{padding:.85rem;font-size:1rem}.emoji-selector,.emoji-selector-small{grid-template-columns:repeat(4,1fr);gap:.5rem}.emoji-option{font-size:1.8rem;padding:0;border-width:2px}.emoji-option-small{font-size:1.4rem;padding:0}.create-user-form,.settings-section{padding:1.25rem}.btn-order{font-size:.85rem;padding:.15rem .35rem}.routine-order-buttons,.user-order-buttons{margin-right:.5rem;gap:.2rem}.routine-type-selector{gap:.4rem;padding:.5rem}.routine-type-selector label{padding:.45rem .25rem;font-size:.85rem;gap:.25rem}.routine-type-selector input[type=radio]{width:14px;height:14px}.user-info-card{gap:.6rem;padding:.85rem 1rem}.user-card-actions{gap:.35rem}.btn-edit,.btn-delete{padding:.4rem .5rem;font-size:.8rem}}@media (max-width: 360px){.nav a{font-size:.8rem;padding:.85rem .15rem}h1{font-size:1.3rem}.container{padding:.5rem}.emoji-selector,.emoji-selector-small{grid-template-columns:repeat(4,1fr);gap:.4rem}.emoji-option{font-size:1.6rem;padding:0}.emoji-option-small{font-size:1.3rem;padding:0}.routine-type-selector{flex-direction:column}.user-card-actions{flex-direction:column;width:100%}.user-card-actions button{width:100%}.create-user-form,.settings-section{padding:1rem}.form-group input[type=text]{padding:.75rem}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.routine-item:active{animation:bounce .3s ease}.user-celebration-message{background:linear-gradient(135deg,gold,tomato,#ff1493);color:#fff;padding:1rem;border-radius:12px;text-align:center;font-size:1.3rem;font-weight:700;margin:1rem 0;box-shadow:0 0 20px #ffd70099,0 0 40px #ff634766,0 4px 12px #00000026;animation:userCelebrationBounce .8s ease-out}@keyframes userCelebrationBounce{0%{transform:scale(.3) rotate(-5deg);opacity:0}50%{transform:scale(1.1) rotate(2deg);opacity:1}70%{transform:scale(.95) rotate(-1deg)}to{transform:scale(1) rotate(0);opacity:1}}.container>p{color:var(--text-primary);font-size:1.2rem;font-weight:600;text-align:center;padding:2rem}.create-user-form{background:var(--bg-secondary);padding:2rem;border-radius:16px;box-shadow:0 2px 8px var(--shadow-md);border:2px solid var(--border-color);max-width:100%;box-sizing:border-box;overflow-x:hidden}.create-user-form h2{text-align:center;color:#2563eb;margin-bottom:1.5rem}.form-group{margin-bottom:1.5rem;max-width:100%;box-sizing:border-box}.form-group label{display:block;font-weight:700;color:var(--text-primary);margin-bottom:.75rem;font-size:1.1rem}.form-group input[type=text]{width:100%;padding:1rem;font-size:1.1rem;border:2px solid var(--border-color);border-radius:10px;transition:all .2s ease;font-weight:600}.form-group input[type=text]:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 4px #2563eb1a}.emoji-selector{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;max-width:100%;width:100%;box-sizing:border-box}.emoji-option{font-size:2rem;padding:0;background:var(--bg-tertiary);border:3px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s ease;line-height:1;display:flex;align-items:center;justify-content:center;min-width:0;width:100%;box-sizing:border-box;aspect-ratio:1 / 1;height:auto}.emoji-option:hover{background:var(--bg-hover);transform:scale(1.1)}.emoji-option.selected{background:var(--bg-selected);border-color:var(--accent-blue);transform:scale(1.15)}.form-buttons{display:flex;gap:1rem;margin-top:2rem}.form-buttons button{flex:1;padding:1.25rem;font-size:1.2rem}.routine-order-buttons,.user-order-buttons{display:flex;flex-direction:column;gap:.25rem;margin-right:.75rem}.btn-order{background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:6px;font-size:1rem;padding:.25rem .5rem;cursor:pointer;transition:all .2s ease;line-height:1}.btn-order:hover:not(:disabled){background:#e9ecef;border-color:#2563eb;transform:scale(1.05)}.btn-order:active:not(:disabled){transform:scale(.95)}.btn-order:disabled{opacity:.3;cursor:not-allowed}.routine-item{display:flex;align-items:center;background:var(--bg-tertiary);padding:1rem;border-radius:8px;margin-bottom:.75rem;border:2px solid var(--border-color);transition:all .2s ease}.user-info-card{display:flex;align-items:center;background:var(--bg-secondary);padding:1rem;border-radius:10px;border:2px solid var(--border-color);margin-bottom:.75rem;gap:.75rem}.btn-expand{width:100%;padding:.75rem;margin-top:1rem;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;font-size:1rem;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.btn-expand:hover{background:#e9ecef;border-color:#2563eb;color:#2563eb;transform:translateY(-1px);box-shadow:0 2px 8px #2563eb26}.btn-expand:active{transform:translateY(0)}.dark-mode-toggle{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;background:var(--bg-tertiary);border-radius:12px;border:2px solid var(--border-color);transition:all .3s ease}.dark-mode-info{flex:1}.dark-mode-label{display:block;font-size:1.2rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.dark-mode-description{font-size:.95rem;color:var(--text-muted);margin:0}.toggle-button{position:relative;width:60px;height:32px;background:var(--border-color)!important;border:none;border-radius:20px;cursor:pointer;transition:background .3s ease;flex-shrink:0}.toggle-button.active{background:var(--accent-blue)!important}.toggle-slider{position:absolute;top:4px;left:4px;width:24px;height:24px;background:#fff;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.toggle-button.active .toggle-slider{transform:translate(28px)}.toggle-button:hover{opacity:.9}.routine-stats{margin-top:1.5rem;padding:1.5rem;background:var(--bg-secondary);border-radius:12px;border:2px solid var(--border-color)}.routine-stats h3{margin:0 0 1rem;font-size:1.1rem;font-weight:700;color:var(--text-primary)}.routine-stats-list{display:flex;flex-direction:column;gap:.75rem}.routine-stat-item{padding:1rem;background:var(--bg-tertiary);border-radius:10px;border:2px solid var(--border-color)}.routine-stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.routine-stat-title{font-size:1rem;font-weight:700;color:var(--text-primary)}.routine-stat-percentage{font-size:1.1rem;font-weight:700;color:var(--accent-blue)}.routine-stat-progress{width:100%;height:8px;background:var(--bg-secondary);border-radius:10px;overflow:hidden;margin-bottom:.5rem}.routine-stat-progress-fill{height:100%;background:linear-gradient(to right,#2563eb,#60a5fa);transition:width .3s ease;border-radius:10px}.routine-stat-count{font-size:.9rem;font-weight:600;color:var(--text-muted);text-align:right}