@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cinzel+Decorative:wght@700&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg-primary: #0f0f1e;--bg-secondary: #1a1a2e;--card-bg: rgba(255, 255, 255, .05);--card-border: rgba(255, 255, 255, .1);--text-primary: #ffffff;--text-secondary: #a0a0b8;--accent: #6366f1;--accent-hover: #4f46e5;--success: #10b981;--danger: #ef4444;--gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%)}.btn-xp{position:relative;overflow:hidden}@keyframes fillBar{0%{opacity:.6;transform:scaleX(.98)}to{opacity:1;transform:scaleX(1)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 12px #f0a500,0 0 24px #f0a50055}50%{box-shadow:0 0 20px #f0a500,#f0a50088,0 0 60px #f0a50033}}@keyframes level-up{0%{transform:scale(1)}30%{transform:scale(1.08)}60%{transform:scale(.97)}to{transform:scale(1)}}@keyframes float-up{0% {opacity: 1; transform: translateY(0),scale(1)} ; 100% {opacity: 0; transform: translateY(-20px),scale(.9)}}@keyframes particle{0%{transform:translateY(0),scale(1);opacity:1}to{transform:translateY(-80px),scale(0);opacity:0}}@keyframes levelBadgePop{0%{transform:scale(.5),rotate(-10deg);opacity:0}60%{transform:scale(1.15),rotate(3deg);opacity:1}to{transform:scale(1),rotate(0);opacity:1}}.xp-subtitle{font-family:Cinzel,serif}.habit-app-root{min-height:100vh;background:var(--bg-primary);background-attachment:fixed}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(180deg,#0a0a15,#1a1a2e);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}.app-container{min-height:100vh;padding:1rem;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(102,126,234,.1) 0%,transparent 40%);padding-top:max(1rem,env(safe-area-inset-top));padding-bottom:max(1rem,env(safe-area-inset-bottom));padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}.inner-container{max-width:800px;margin:0 auto;width:100%;flex:1}.bottom-nav{position:fixed;bottom:24px;left:50%;transform:translate(-50%);width:calc(100% - 32px);max-width:600px;background:#1a1a2ee6;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-radius:32px;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 40px #0006;z-index:2000;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.bottom-nav:hover{transform:translate(-50%) translateY(-5px);box-shadow:0 15px 50px #00000080}.bottom-nav button .nav-icon{width:24px;height:24px;object-fit:contain;margin-bottom:2px;transition:all .3s cubic-bezier(.4,0,.2,1)}.bottom-nav button.active .nav-icon{transform:scale(1.1);filter:drop-shadow(0 0 8px rgba(99,102,241,.6))}.bottom-nav button{position:relative;background:none;border:none;color:var(--text-secondary);font-size:.65rem;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:.25rem;cursor:pointer;padding:.4rem .2rem;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);flex:1;min-width:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}@media(hover:hover){.bottom-nav button:hover{color:var(--accent);transform:translateY(-2px)}}.bottom-nav button.active{color:var(--text-primary);background:#6366f126}.page-title{font-size:1.5rem;font-weight:800;margin-bottom:1.5rem;color:var(--text-primary);text-align:center}.add-habit-page{animation:slideUp .4s ease-out}.cancel-btn{width:100%;background:transparent;border:1px solid var(--card-border);color:var(--text-secondary);padding:1rem;border-radius:20px;font-weight:600;cursor:pointer;margin-top:1rem;transition:all .3s ease}.cancel-btn:hover{background:#ffffff0d;color:var(--text-primary)}.bottom-nav button.active:after{content:"";position:absolute;top:.25rem;width:4px;height:4px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px #6366f1cc;animation:pulseIndicator 2s ease-in-out infinite}@keyframes pulseIndicator{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.bottom-nav button:active{transform:scale(.95)}.bottom-nav button:after{content:"";position:absolute;inset:0;border-radius:12px;background:radial-gradient(circle,rgba(99,102,241,.3) 0%,transparent 70%);opacity:0;transform:scale(0);transition:all .4s ease-out}.bottom-nav button:active:after{opacity:1;transform:scale(1.5)}body{padding-bottom:80px}@media(max-width:375px){.bottom-nav{width:calc(100% - 16px);padding:.6rem .5rem}.bottom-nav button{font-size:.6rem}.bottom-nav button:before{font-size:1.25rem}.nav-add-btn{width:54px!important;height:54px!important;min-width:54px!important}}@media(min-width:768px){.bottom-nav{max-width:600px;padding:.75rem 2rem}.bottom-nav button{font-size:.75rem;padding:.6rem 1rem}}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;margin-top:1rem}.app-header{margin-bottom:2rem;text-align:center}.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.user-greeting{text-align:left}.greeting-text{font-size:1.1rem;color:var(--text-secondary);font-weight:500;margin-bottom:2px}.app-title-container{margin-bottom:2rem}.app-title{font-family:Inter,sans-serif;font-size:clamp(2rem,8vw,3rem);font-weight:800;text-align:center;margin-bottom:.5rem;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.04em;text-transform:uppercase}.app-subtitle{font-size:clamp(.9rem,2.5vw,1.1rem);color:var(--text-secondary);text-align:center;font-weight:500;margin-bottom:1.5rem;font-style:italic}.logout-pill{background:#ef44441a;color:#fb7185;border:1px solid rgba(239,68,68,.2);padding:8px 16px;border-radius:20px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s ease}.progress-summary-card{background:var(--gradient);border-radius:28px;padding:1.5rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 15px 35px #667eea4d;color:#fff}.progress-info h3{font-size:1.1rem;font-weight:700;margin-bottom:.75rem}.progress-stats{display:flex;flex-direction:column}.stats-main{font-size:1.75rem;font-weight:800}.stats-sub{font-size:.8rem;opacity:.8}.progress-circle-container{width:80px;height:80px}.progress-circle{width:100%;height:100%}.circle-bg{fill:none;stroke:#fff3;stroke-width:3.8}.circle{fill:none;stroke:#fff;stroke-width:3.8;stroke-linecap:round;transition:stroke-dasharray .6s ease}.percentage{fill:#fff;font-size:.5rem;font-weight:700;text-anchor:middle}.progress-card{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:28px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 12px 40px #00000040}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:.5rem}.progress-text{font-size:clamp(.75rem,3vw,.875rem);color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.progress-percentage{font-size:clamp(1.25rem,5vw,1.5rem);font-weight:700;color:var(--accent)}.progress-bar-container{height:8px;background:#ffffff0d;border-radius:10px;overflow:hidden;margin-bottom:.5rem}.progress-bar{height:100%;background:var(--gradient);border-radius:10px;transition:width .6s cubic-bezier(.4,0,.2,1);box-shadow:0 0 20px #667eea80}.progress-count{font-size:clamp(.7rem,2.5vw,.75rem);color:var(--text-secondary);text-align:right}.celebration{background:linear-gradient(135deg,#10b9811a,#667eea1a);border:1px solid rgba(16,185,129,.2);padding:1rem;border-radius:16px;text-align:center;margin-bottom:1.25rem;font-weight:600;font-size:clamp(.875rem,3vw,1rem);color:var(--success);animation:celebrate .5s ease-out}@keyframes celebrate{0%{transform:scale(.95);opacity:0}50%{transform:scale(1.02)}to{transform:scale(1);opacity:1}}.habit-form{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem;background:var(--card-bg);padding:1.5rem;border-radius:28px;border:1px solid var(--card-border);box-shadow:0 10px 30px #0003}.habit-textbox{width:100%;background:#0003;border:1px solid var(--card-border);padding:1.25rem;border-radius:20px;font-size:1rem;color:#fff;transition:all .3s ease;outline:none}.habit-textbox:focus{border-color:var(--accent);background:#0000004d;box-shadow:0 0 0 4px #6366f11a}.habit-textbox::placeholder{color:var(--text-secondary)}.habit-submit{background:var(--gradient);border:none;padding:1rem;border-radius:20px;color:#fff;font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 15px #667eea4d}.habit-submit:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.habit-submit:active{transform:translateY(0)}.frequency-selector{background:#ffffff08;border-radius:20px;padding:1.25rem;border:1px solid var(--card-border)}.frequency-selector label{display:block;font-size:.85rem;color:var(--text-secondary);text-transform:uppercase;font-weight:700;margin-bottom:.75rem;letter-spacing:.05em}.frequency-dropdown,.category-dropdown{width:100%;background:#0003;border:1px solid var(--card-border);color:#fff;padding:.85rem;border-radius:12px;font-size:.95rem;outline:none;cursor:pointer;margin-bottom:1rem}.days-row-new{display:flex;justify-content:space-between;gap:8px}.day-pill{width:36px;height:36px;border-radius:50%;border:1px solid var(--card-border);background:none;color:var(--text-secondary);font-weight:700;cursor:pointer;transition:all .3s ease}.day-pill.selected{background:var(--gradient);border-color:transparent;color:#fff;transform:scale(1.1)}.custom-interval-new{display:flex;align-items:center;gap:1rem}.interval-input-new{width:60px;background:#0003;border:1px solid var(--card-border);border-radius:12px;padding:8px;color:#fff;text-align:center;font-weight:800;outline:none}.habit-list-wrapper{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:28px;padding:1rem;height:400px;overflow-y:auto;overflow-x:hidden;box-shadow:0 8px 32px #0003;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}.habit-list-wrapper::-webkit-scrollbar{width:6px}.habit-list-wrapper::-webkit-scrollbar-track{background:#ffffff05;border-radius:10px}.habit-list-wrapper::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.habit-list-wrapper::-webkit-scrollbar-thumb:hover{background:#ffffff26}.habit-card{list-style:none;background:var(--card-bg)!important;border:1px solid var(--card-border)!important;border-radius:24px!important;margin-bottom:1rem;padding:1rem!important;min-height:auto!important;box-shadow:0 4px 15px #0000001a!important;transition:all .4s cubic-bezier(.175,.885,.32,1.275)!important;position:relative;overflow:hidden}.habit-card.completed{background:#ffffff14!important;box-shadow:inset 0 2px 10px #0003}.habit-card-content{display:flex;align-items:center;gap:1rem;width:100%}.habit-card-left{flex-shrink:0}.habit-icon-circle{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.25rem;color:#fff;box-shadow:0 5px 15px #0003}.habit-card-middle{flex:1;min-width:0}.habit-title-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}.habit-name-text{font-size:1.05rem;font-weight:600;color:var(--text-primary);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.habit-name-text.checked{text-decoration:line-through;opacity:.6}.fire-streak-mini{display:flex;gap:2px}.fire-icon-small{width:14px;height:14px;object-fit:contain}.habit-card-info{font-size:.8rem;color:var(--text-secondary)}.streak-label{display:block;font-weight:500}.habit-card-right{display:flex;align-items:center;gap:.75rem}.checkbox-wrapper{position:relative;width:32px;height:32px}.habit-checkbox-custom{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;z-index:2}.checkbox-ui{position:absolute;inset:0;border:2px solid;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:1}.check-mark{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;opacity:0;transform:scale(.5);transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.habit-checkbox-custom:checked+.checkbox-ui .check-mark{opacity:1;transform:scale(1)}.delete-btn-mini{background:none;border:none;color:var(--text-secondary);font-size:.9rem;padding:4px;cursor:pointer;opacity:.3;transition:all .3s ease}.delete-btn-mini:hover{opacity:1;color:var(--danger)}.editing-input{background:#0003!important;border:1px solid var(--accent)!important;border-radius:8px!important;padding:4px 8px!important;font-size:.9rem!important;color:#fff!important;outline:none}.habit-item-container{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.habit-checkbox{appearance:none;-webkit-appearance:none;width:24px;height:24px;min-width:24px;border:2px solid var(--card-border);border-radius:8px;cursor:pointer;position:relative;transition:all .3s ease;flex-shrink:0;background:#ffffff08;touch-action:manipulation;-webkit-tap-highlight-color:transparent}@media(hover:hover){.habit-checkbox:hover{border-color:var(--accent)}}.habit-checkbox:checked{background:var(--gradient);border-color:transparent}.habit-checkbox:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}.habit-text{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0;overflow:hidden}.habit-name{font-size:clamp(.875rem,3vw,1rem);color:var(--text-primary);font-weight:500;cursor:pointer;transition:color .3s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent}@media(hover:hover){.habit-name:hover{color:var(--accent)}}.habit-name.completed{text-decoration:line-through;color:var(--text-secondary);opacity:.7}.fire-streak{display:flex;align-items:center;gap:2px;flex-shrink:0}.fire-icon{width:18px;height:18px;filter:drop-shadow(0 0 8px rgba(251,146,60,.6));animation:flicker 2s ease-in-out infinite}@keyframes flicker{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.streak{font-size:clamp(.7rem,2.5vw,.75rem);color:var(--text-secondary);font-weight:500;display:flex;align-items:center;gap:.25rem;white-space:nowrap}.deleteHabit{display:flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;border:none;background:#ef44441a;color:var(--danger);border-radius:10px;cursor:pointer;transition:all .3s ease;font-size:1.125rem;flex-shrink:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}@media(hover:hover){.deleteHabit:hover{background:#ef444433;transform:scale(1.1)}}.deleteHabit:active{transform:scale(.95)}.contribution-container{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:5px solid var(--card-border);border-radius:16px;padding:1.25rem;margin-bottom:1.25rem;box-shadow:0 8px 32px #0003}.stats-title{font-size:.875rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.year-dropdown{background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-secondary);font-size:.75rem;padding:4px 8px;border-radius:6px;cursor:pointer;outline:none;transition:all .3s ease}.year-dropdown:hover{border-color:var(--accent);color:var(--text-primary)}.year-dropdown option{background:var(--bg-secondary);color:var(--text-primary)}.calendar-scroll{overflow-x:hidden;padding-bottom:.25rem}.calendar-scroll::-webkit-scrollbar{height:4px}.calendar-scroll::-webkit-scrollbar-track{background:transparent}.calendar-scroll::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.calendar-grid{display:grid;grid-template-rows:repeat(7,7px);grid-auto-flow:column;grid-auto-columns:7px;gap:2px;width:100%;justify-content:space-between}.app-subtitle{font-size:.875rem;color:var(--text-secondary);text-align:center;margin-bottom:1.5rem;font-weight:500;letter-spacing:.02em}.calendar-layout-wrapper{display:flex;gap:8px;position:relative}.day-labels{display:grid;grid-template-rows:repeat(7,7px);gap:2px;padding-top:20px;font-size:8px;color:var(--text-secondary)}.day-labels span{grid-row-start:var(--row);line-height:7px}.day-labels span:nth-child(1){grid-row:2}.day-labels span:nth-child(2){grid-row:4}.day-labels span:nth-child(3){grid-row:6}.calendar-main{flex:1;min-width:0}.month-labels{display:grid;grid-template-columns:repeat(53,7px);grid-auto-columns:7px;gap:2px;height:12px;margin-bottom:8px;font-size:9px;color:var(--text-secondary);justify-content:space-between}.month-label{grid-row:1;white-space:nowrap}.calendar-square{width:7px;height:7px;border-radius:1px;background:#ffffff0d;transition:transform .2s ease,filter .2s ease}.calendar-square:hover{transform:scale(1.3);filter:brightness(1.2);z-index:10}.level-0{background:#ffffff0d}.level-1{background:#0e4429;box-shadow:0 0 5px #0e442980}.level-2{background:#006d32;box-shadow:0 0 5px #006d3280}.level-3{background:#26a641;box-shadow:0 0 5px #26a64180}.level-4{background:#39d353;box-shadow:0 0 10px #39d353cc}.calendar-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-top:.75rem;font-size:.7rem;color:var(--text-secondary)}.calendar-legend{display:flex;gap:3px}.calendar-legend .calendar-square{cursor:default}.calendar-legend .calendar-square:hover{transform:none}.text-center{text-align:center;color:var(--text-secondary);padding:2rem 1rem;font-size:clamp(.875rem,3vw,.9rem)}input[type=text]{background:#ffffff0d;border:1px solid var(--card-border);padding:.5rem;border-radius:8px;color:var(--text-primary);font-size:clamp(.875rem,3vw,1rem);font-family:Inter,sans-serif;outline:none;transition:border-color .3s ease;-webkit-appearance:none;appearance:none;touch-action:manipulation;width:100%}input[type=text]:focus{border-color:var(--accent)}@media(min-width:768px){.app-container,.progress-card{padding:1.5rem}.habit-list-wrapper{max-height:500px}.habit-form{flex-wrap:nowrap}.habit-textbox{min-width:auto}}@media(min-width:1024px){.app-container{padding:2rem}.habit-list-wrapper{max-height:600px}}@media(max-width:375px){.habit-form{flex-direction:column}.habit-textbox,.habit-submit{width:100%}.fire-streak{display:none}}.not-due{opacity:.7}.not-due-label{font-size:.75rem;color:#ff9f43;font-style:italic;display:block;margin-top:2px}.habit-checkbox:disabled{border-color:#444!important;background-color:#222!important}@keyframes fillBar{0%{opacity:.6}to{opacity:1}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(300%)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 12px #f0a500,0 0 24px #f0a50055}50%{box-shadow:0 0 20px #f0c040,0 0 40px #f0a50088,0 0 60px #f0a50033}}@keyframes levelUp{0%{transform:scale(1)}30%{transform:scale(1.08)}60%{transform:scale(.97)}to{transform:scale(1)}}@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-60px) scale(1.3)}}@keyframes particle{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-80px) scale(0);opacity:0}}@keyframes levelBadgePop{0%{transform:scale(.5) rotate(-10deg);opacity:0}60%{transform:scale(1.15) rotate(3deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.xp-fill{transition:width .8s cubic-bezier(.22,1,.36,1)}.btn-xp{cursor:pointer;background:#1a1025;border:1px solid #4a3060;color:#c8a0e8;padding:10px 22px;font-size:12px;letter-spacing:1px;transition:all .2s;position:relative;overflow:hidden}.btn-xp:hover{background:#2a1840;border-color:#8060a8;color:#e8c8ff;box-shadow:0 0 16px #8060a844}.btn-xp:active{transform:scale(.96)}@keyframes badgePulse{0%{transform:scale(1);box-shadow:0 0 10px #ef444480}50%{transform:scale(1.1);box-shadow:0 0 20px #ef4444cc}to{transform:scale(1);box-shadow:0 0 10px #ef444480}}