@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--bg-color: #0c4a6e;--surface-color: rgba(255, 255, 255, .12);--surface-border: rgba(255, 255, 255, .2);--text-primary: #f8fafc;--text-secondary: #bae6fd;--color-office: #0ea5e9;--color-office-glow: rgba(14, 165, 233, .4);--color-home: #10b981;--color-home-glow: rgba(16, 185, 129, .4);--color-remote: #06b6d4;--color-remote-glow: rgba(6, 182, 212, .4);--color-leave: #f59e0b;--color-holiday: #f43f5e;--color-empty: rgba(255, 255, 255, .1);--glass-blur: blur(16px)}body{margin:0;font-family:Outfit,sans-serif;color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;background-color:var(--bg-color);background-image:linear-gradient(to bottom,transparent 60%,rgba(253,224,71,.15) 100%),radial-gradient(circle at 20% 40%,rgba(14,165,233,.2),transparent 40%),radial-gradient(circle at 80% 60%,rgba(16,185,129,.15),transparent 40%);background-attachment:fixed;overflow-x:hidden}.app-wrapper{min-height:100vh;position:relative;overflow:hidden;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.app-wrapper:before{content:"";position:absolute;inset:0;z-index:-2;transition:background-color 2s ease;pointer-events:none}.bg-state-cloudy:before{background-color:#02061799}.bg-state-mixed:before{background-color:#0284c733}.bg-state-sunny:before{background-color:#38bdf81a}.dynamic-background{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.moon{position:absolute;top:50px;right:15%;width:100px;height:100px;border-radius:50%;background:transparent;box-shadow:-20px 20px #f1f5f9;transition:all 2s ease;opacity:0;transform:translateY(-50px)}.bg-state-cloudy .moon{opacity:.8;transform:translateY(0)}.sun{position:absolute;top:-50px;right:-50px;width:300px;height:300px;background:radial-gradient(circle,rgba(253,224,71,.8) 0%,rgba(253,224,71,.2) 40%,transparent 70%);border-radius:50%;filter:blur(10px);transition:all 2s cubic-bezier(.4,0,.2,1);transform:scale(.5) translate(100px,-100px);opacity:0}.bg-state-mixed .sun{transform:scale(.8) translate(0);opacity:.5}.bg-state-sunny .sun{transform:scale(1) translate(-50px,50px);opacity:1}.cloud{position:absolute;background:#ffffff1a;border-radius:100px;transition:all 3s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud-1{width:150px;height:50px;top:20%;left:10%;animation:float 20s infinite ease-in-out}.cloud-1:before{width:70px;height:70px;top:-30px;left:20px}.cloud-1:after{width:50px;height:50px;top:-20px;right:20px}.cloud-2{width:120px;height:40px;top:40%;right:20%;animation:float 15s infinite ease-in-out 2s}.cloud-2:before{width:60px;height:60px;top:-25px;left:15px}.cloud-2:after{width:40px;height:40px;top:-15px;right:15px}.cloud-3{width:200px;height:70px;bottom:25%;left:15%;animation:float 18s infinite ease-in-out 5s}.cloud-3:before{width:90px;height:90px;top:-40px;left:20px}.cloud-3:after{width:70px;height:70px;top:-30px;right:20px}.bg-state-cloudy .cloud{background:#47556999;transform:scale(1) translate(0);opacity:1}.bg-state-mixed .cloud{background:#94a3b84d;transform:scale(.8) translate(-10vw);opacity:.5}.bg-state-sunny .cloud{background:#ffffff1a;transform:scale(.5) translate(-30vw);opacity:0}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}*{box-sizing:border-box}.glass-panel{background:var(--surface-color);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--surface-border);border-radius:20px;box-shadow:0 8px 32px #0003}.app-container{max-width:1200px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:1fr 350px;gap:2rem;align-items:start}@media(max-width:900px){.app-container{grid-template-columns:1fr;padding:1rem}}.header{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}@media(max-width:600px){.header{flex-direction:column;gap:1rem;text-align:center}}.header h1{font-size:2.5rem;font-weight:700;margin:0;background:linear-gradient(135deg,#fff,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media(max-width:600px){.header h1{font-size:2rem}}.month-selector{display:flex;align-items:center;gap:1rem}.icon-btn{background:var(--surface-color);border:1px solid var(--surface-border);color:var(--text-primary);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.icon-btn:hover{background:#ffffff1a;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.icon-btn:active{transform:translateY(0)}.month-display{font-size:1.25rem;font-weight:500;min-width:160px;text-align:center}.calendar{padding:2rem}@media(max-width:600px){.calendar{padding:1.25rem}}@media(max-width:400px){.calendar{padding:.75rem}}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1rem}@media(max-width:600px){.calendar-grid{gap:.5rem}}@media(max-width:400px){.calendar-grid{gap:.25rem}}.day-header{text-align:center;font-weight:600;color:var(--text-secondary);font-size:.875rem;padding-bottom:1rem;text-transform:uppercase;letter-spacing:1px}@media(max-width:600px){.day-header{font-size:.75rem;padding-bottom:.5rem;letter-spacing:0}}.day-cell{aspect-ratio:1;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;background:var(--color-empty);border:2px solid transparent;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}@media(max-width:600px){.day-cell{border-radius:12px}}.day-cell:not(.empty):hover{transform:scale(1.05);background:#ffffff1f}.day-cell:not(.empty):active{transform:scale(.95)}.day-cell.empty{opacity:.2;cursor:default}.day-cell .date-num{font-size:1.25rem;font-weight:600;z-index:2}@media(max-width:600px){.day-cell .date-num{font-size:1rem}}@media(max-width:400px){.day-cell .date-num{font-size:.8rem}}.day-cell .status-icon{margin-top:4px;opacity:.9;z-index:2}@media(max-width:600px){.day-cell .status-icon{transform:scale(.85);margin-top:2px}}@media(max-width:400px){.day-cell .status-icon{transform:scale(.7);margin-top:0}}.day-cell.status-office{background:#3b82f626;border-color:var(--color-office);color:var(--color-office);box-shadow:0 0 20px var(--color-office-glow)}.day-cell.status-office:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(59,130,246,.1))}.day-cell.status-home{background:#10b98126;border-color:var(--color-home);color:var(--color-home);box-shadow:0 0 20px var(--color-home-glow)}.day-cell.status-home:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(16,185,129,.1))}.day-cell.status-remote{background:#06b6d426;border-color:var(--color-remote);color:var(--color-remote);box-shadow:0 0 20px var(--color-remote-glow)}.day-cell.status-remote:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(6,182,212,.1))}.day-cell.status-leave{background:#f59e0b26;border-color:var(--color-leave);color:var(--color-leave)}.day-cell.status-holiday{background:#f43f5e26;border-color:var(--color-holiday);color:var(--color-holiday)}.day-cell.is-weekend{opacity:.6}.tracker-sidebar{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}@media(max-width:600px){.tracker-sidebar{padding:1.25rem;gap:1rem}}.tracker-sidebar h2{font-size:1.5rem;margin:0;display:flex;align-items:center;gap:.5rem}@media(max-width:600px){.tracker-sidebar h2{font-size:1.25rem}}.week-card{background:#00000040;border-radius:12px;padding:1.25rem;border:1px solid var(--surface-border)}@media(max-width:600px){.week-card{padding:1rem}}.week-header{display:flex;justify-content:space-between;margin-bottom:.5rem;font-weight:500}.progress-container{height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.progress-bar{height:100%;background:var(--color-office);transition:width .5s cubic-bezier(.4,0,.2,1)}.progress-bar.success{background:var(--color-home)}.progress-bar.danger{background:var(--color-holiday)}.week-stats{font-size:.95rem;color:var(--text-secondary)}.legend{display:flex;justify-content:center;gap:1rem;margin-top:2rem;grid-column:1 / -1;flex-wrap:wrap}@media(max-width:600px){.legend{gap:.5rem;margin-top:1.5rem}}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-secondary);background:var(--surface-color);padding:.5rem 1rem;border-radius:20px;border:1px solid var(--surface-border);cursor:pointer;transition:all .2s ease}@media(max-width:600px){.legend-item{font-size:.75rem;padding:.375rem .75rem}}.monthly-summary{padding:1.5rem;margin-bottom:1.5rem;background:linear-gradient(135deg,#ffffff14,#ffffff05)}.monthly-summary h2{font-size:1.5rem;margin:0 0 1.5rem}.summary-grid{display:flex;flex-direction:column;gap:1rem}.summary-item{display:flex;align-items:center;gap:1rem;background:#00000040;padding:1rem;border-radius:12px;border:1px solid var(--surface-border)}.icon-blue{color:var(--color-office)}.icon-green{color:var(--color-home)}.icon-teal{color:var(--color-remote)}.icon-amber{color:var(--color-leave)}.icon-red{color:var(--color-holiday)}.summary-details{display:flex;flex-direction:column;flex:1}.summary-label{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.summary-value{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.summary-value.highlight{color:var(--color-office)}.summary-progress-wrapper{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--surface-border)}.summary-progress-header{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.875rem;color:var(--text-secondary)}@keyframes popIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.animate-pop{animation:popIn .5s cubic-bezier(.16,1,.3,1) forwards}.illustration-face{width:48px;height:48px;border-radius:50%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 12px #0003;transition:all .5s cubic-bezier(.4,0,.2,1);overflow:hidden}.face-eyes{display:flex;gap:12px;margin-bottom:6px;margin-top:-4px}.eye{width:6px;height:8px;background-color:var(--bg-color);border-radius:4px;transition:all .4s ease}.face-mouth{width:20px;height:4px;background-color:var(--bg-color);border-radius:4px;transition:all .4s cubic-bezier(.4,0,.2,1);transform-origin:center top}.illustration-face.is-happy{transform:scale(1.1) rotate(5deg)}.illustration-face.is-happy .eye{height:6px;transform:translateY(2px) scaleY(.8)}.illustration-face.is-happy .face-mouth{height:12px;border-radius:2px 2px 12px 12px;transform:translateY(2px)}.illustration-face.is-meh{transform:scale(1)}.illustration-face.is-meh .face-mouth{width:16px;height:4px;border-radius:4px}.illustration-face.is-sad{transform:scale(.9) rotate(-5deg)}.illustration-face.is-sad .eye{height:6px;transform:translateY(2px)}.illustration-face.is-sad .face-mouth{height:10px;width:16px;border-radius:12px 12px 2px 2px;transform:translateY(4px)}.footer{grid-column:1 / -1;text-align:center;padding:1.5rem 0;margin-top:1rem;font-size:.875rem;color:var(--text-secondary);opacity:.7;letter-spacing:.5px}.feedback-panel{padding:2rem;background:linear-gradient(135deg,#ffffff14,#ffffff05);display:flex;flex-direction:column;align-items:center;text-align:center}.feedback-panel.success-state{justify-content:center;min-height:250px}.feedback-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.feedback-header h2{font-size:1.5rem;margin:0}.feedback-desc{color:var(--text-secondary);font-size:.95rem;margin-bottom:1.5rem;max-width:600px}.feedback-form{display:flex;flex-direction:column;width:100%;max-width:500px;gap:1.5rem;align-items:center}.star-rating{display:flex;gap:.5rem}.star-icon{color:var(--surface-border);cursor:pointer;transition:all .2s ease}.star-icon:hover{transform:scale(1.1)}.star-icon.active{color:#fbbf24;filter:drop-shadow(0 0 8px rgba(251,191,36,.4))}.feedback-textarea{width:100%;background:#0003;border:1px solid var(--surface-border);border-radius:12px;padding:1rem;color:var(--text-primary);font-family:inherit;font-size:1rem;resize:vertical;min-height:100px;transition:border-color .3s ease}.feedback-textarea:focus{outline:none;border-color:var(--color-office)}.submit-btn{background:var(--color-office);color:#fff;border:none;padding:.75rem 2rem;border-radius:20px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%;max-width:200px}.submit-btn:hover:not(:disabled){background:#0284c7;transform:translateY(-2px);box-shadow:0 4px 12px var(--color-office-glow)}.submit-btn:disabled{opacity:.5;cursor:not-allowed}