:root{--bg-color:#fcfcfc;--text-color:#1a1a1a;--marker-color:#e11d48;--border-color:#e5e5e5;--gray-light:#f3f4f6;--modal-bg:#fffffff2;--modal-content-bg:#fff;--stats-text:#666;--font-family:"Outfit", sans-serif;--transition:all .3s cubic-bezier(.4, 0, .2, 1)}body.dark-mode{--bg-color:#0f172a;--text-color:#f1f5f9;--border-color:#1e293b;--gray-light:#1e293b;--modal-bg:#0f172afa;--modal-content-bg:#1e293b;--stats-text:#94a3b8}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);justify-content:center;align-items:center;min-height:100vh;padding:2rem;transition:background-color .5s,color .5s;display:flex}#app{flex-direction:column;gap:3rem;width:100%;max-width:800px;display:flex}.theme-toggle{z-index:1000;position:fixed;top:2rem;right:2rem}.theme-toggle button{background:var(--gray-light);color:var(--text-color);border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;font-size:1.2rem;display:flex}.app-header{text-align:center}h1{letter-spacing:-.02em;margin-bottom:1rem;font-size:2.5rem;font-weight:600}.stats{flex-direction:column;align-items:center;gap:.5rem;display:flex}#progress-text{color:var(--stats-text);font-size:1.1rem;font-weight:300}.progress-bar-container{background-color:var(--gray-light);border-radius:2px;width:200px;height:4px;overflow:hidden}.progress-bar{background-color:var(--marker-color);width:0%;height:100%;transition:width .6s}.calendar-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));justify-items:center;gap:1.5rem;padding:1rem;display:grid}.day-circle{border:2px solid var(--border-color);cursor:pointer;width:44px;height:44px;transition:var(--transition);background-color:#0000;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.day-circle:hover{border-color:var(--marker-color);transform:scale(1.05)}.day-circle.today{border-color:var(--text-color);background-color:var(--gray-light)}.day-circle.completed{border-color:#0000}.day-number{color:var(--stats-text);z-index:1;pointer-events:none;font-size:.75rem;font-weight:400}.day-circle.completed .day-number{opacity:.3}.month-header{text-align:left;width:100%;color:var(--stats-text);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--border-color);grid-column:1/-1;margin-top:1.5rem;padding-bottom:.5rem;font-size:.9rem;font-weight:600}.calendar-grid>.month-header:first-child{margin-top:0}.marker-svg{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.marker-path{fill:none;stroke:var(--marker-color);stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100px;animation:.4s forwards drawMarker}@keyframes drawMarker{to{stroke-dashoffset:0}}.app-footer{justify-content:center;display:flex}button{cursor:pointer;transition:var(--transition);border:none;border-radius:99px;padding:.75rem 1.5rem;font-family:inherit;font-weight:500}.btn-primary{background-color:var(--text-color);color:var(--bg-color)}.btn-primary:hover{opacity:.9;transform:translateY(-2px)}.btn-secondary{color:var(--stats-text);background-color:#0000;font-size:.9rem}.btn-secondary:hover{color:var(--text-color)}.modal{background-color:var(--modal-bg);z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal.hidden{display:none}.modal-content{background:var(--modal-content-bg);border:1px solid var(--border-color);border-radius:24px;flex-direction:column;gap:1.5rem;width:100%;max-width:400px;padding:3rem;display:flex;box-shadow:0 20px 40px #0000001a}.modal-content h2{letter-spacing:-.02em;font-size:1.75rem}.form-group{flex-direction:column;gap:.5rem;display:flex}.form-group label{color:var(--stats-text);font-size:.9rem}input{border:1px solid var(--border-color);background-color:var(--bg-color);color:var(--text-color);border-radius:12px;outline:none;padding:1rem;font-family:inherit;font-size:1rem}input:focus{border-color:var(--marker-color)}@media (width<=600px){body{padding:1rem}.theme-toggle{top:1rem;right:1rem}h1{font-size:2rem}.calendar-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:1rem}.day-circle{width:40px;height:40px}}