@import "https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap";*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif}body{color:#fff;background:#111827}.app{min-height:100vh;display:flex}.sidebar{background:#1f2937;width:250px;padding:25px}.sidebar h2{margin-bottom:30px}.sidebar ul{list-style:none}.sidebar li{cursor:pointer;border-radius:10px;margin-bottom:10px;padding:12px;transition:all .3s}.sidebar li:hover{background:#374151}.content{flex:1;padding:40px}.cards{gap:20px;margin-top:30px;display:flex}.card{background:#1f2937;border-radius:15px;flex:1;padding:25px}.sidebar a{color:#fff;width:100%;text-decoration:none;display:block}.sidebar a.active{color:#60a5fa;font-weight:700}.greeting{margin-bottom:30px}.greeting h1{font-size:2.2rem}.greeting p{color:#9ca3af;margin-top:8px}.quick-actions{gap:15px;margin-bottom:35px;display:flex}.quick-actions button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:12px;padding:12px 18px;font-size:15px;transition:all .25s}.quick-actions button:hover{background:#1d4ed8;transform:translateY(-3px)}.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;display:grid}.stat-card{background:#1f2937;border-radius:18px;padding:25px;transition:all .3s}.stat-card:hover{transform:translateY(-8px)}.stat-card .icon{margin-bottom:15px;font-size:35px}.stat-card h3{color:#9ca3af}.stat-card h2{margin-top:12px;font-size:2rem}.dashboard-grid{grid-template-columns:1fr 1fr;gap:25px;margin-top:30px;display:grid}@media (width<=900px){.dashboard-grid{grid-template-columns:1fr}}.today-tasks{background:#fff;border-radius:20px;padding:25px;box-shadow:0 10px 30px #00000014}.card-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.card-header h2{margin:0;font-size:22px}.card-header span{color:#777;font-size:14px}.task-list{flex-direction:column;gap:14px;display:flex}.task-item{border-radius:12px;align-items:center;gap:12px;padding:12px;transition:all .2s;display:flex}.task-item:hover{background:#f5f7fa}.task-name{font-size:16px}.completed .task-name{color:#999;text-decoration:line-through}.view-all{cursor:pointer;color:#fff;background:#3b82f6;border:none;border-radius:12px;width:100%;margin-top:20px;padding:12px;font-size:15px;transition:all .2s}.view-all:hover{background:#2563eb}.recent-notes{background:#fff;border-radius:20px;padding:25px;box-shadow:0 10px 30px #00000014}.notes-list{flex-direction:column;gap:15px;display:flex}.note-item{cursor:pointer;background:#f7f9fc;border-radius:15px;padding:15px;transition:all .25s}.note-item:hover{background:#edf4ff;transform:translateY(-3px)}.note-item h4{margin:0 0 8px}.note-item p{color:#666;margin:0}.empty{text-align:center;color:#888;padding:35px 0}.habit-progress{background:#fff;border-radius:20px;padding:25px;box-shadow:0 10px 30px #00000014}.habit-row{margin:20px 0}.habit-top{justify-content:space-between;margin-bottom:8px;display:flex}.progress{background:#ececec;border-radius:50px;height:10px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:50px;height:100%;transition:all .5s}.calendar-preview{background:#fff;border-radius:20px;padding:25px;box-shadow:0 10px 30px #00000014}.calendar-box{flex-direction:column;justify-content:center;align-items:center;padding:30px 0;display:flex}.calendar-box h3{margin-bottom:20px}.today-circle{color:#fff;background:#3b82f6;border-radius:50%;justify-content:center;align-items:center;width:90px;height:90px;margin-bottom:15px;font-size:36px;font-weight:700;display:flex}.open-calendar{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:12px;width:100%;padding:12px;transition:all .25s}.open-calendar:hover{background:#2563eb}.focus-widget{background:#fff;border-radius:20px;padding:25px;box-shadow:0 10px 30px #00000014}.focus-time{text-align:center;padding:35px 0}.focus-time h1{color:#3b82f6;margin:0;font-size:50px}.focus-time p{color:#777}.focus-btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:12px;width:100%;padding:14px}.task-item{background:#1f2937;border-radius:15px;justify-content:space-between;align-items:center;margin:15px 0;padding:18px;transition:all .3s;display:flex}.task-item:hover{transform:translateY(-4px)}.done{opacity:.5;text-decoration:line-through}.priority{border-radius:20px;padding:6px 12px;font-size:14px;font-weight:700}.high{background:#dc2626}.medium{background:#f59e0b}.low{background:#10b981}.critical{background:#7c3aed}.add-task{gap:12px;margin:25px 0;display:flex}.add-task input{border:none;border-radius:12px;flex:1;padding:14px;font-size:16px}.add-task button{cursor:pointer;color:#fff;background:#2563eb;border:none;border-radius:12px;padding:14px 22px;font-weight:700;transition:all .3s}.add-task button:hover{background:#1d4ed8}.delete-btn{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:10px;padding:8px 12px;transition:all .3s}.delete-btn:hover{background:#dc2626;transform:scale(1.05)}.priority{color:#fff;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:700}select{border:none;border-radius:8px;margin:0 10px;padding:10px}.task-item{background:#1f2937;border-radius:12px;align-items:center;gap:12px;margin-top:12px;padding:15px;display:flex}.task-info{flex-direction:column;flex:1;display:flex}.done{color:gray;text-decoration:line-through}.priority{color:#fff;border-radius:20px;width:fit-content;margin-top:6px;padding:4px 10px;font-size:12px;font-weight:700}.priority.high{background:#ef4444}.priority.medium{background:#f59e0b}.priority.low{background:#22c55e}.due-date{color:#9ca3af;margin-top:6px;font-size:13px}.notebook{width:1200px;max-width:95%;margin:40px auto}.notebook-header{justify-content:center;margin-bottom:25px;display:flex}.title-input{text-align:center;color:#5a3718;background:0 0;border:none;outline:none;width:450px;font-size:32px;font-weight:700}.book{perspective:2500px;background:linear-gradient(135deg,#7b4c23,#5c3415);border-radius:18px;justify-content:center;align-items:stretch;padding:35px;display:flex;box-shadow:0 20px 50px #00000059}.spine{background:linear-gradient(90deg,#2d1608,#6b4726,#c49b66,#6b4726,#2d1608);border-radius:6px;width:30px;box-shadow:inset 0 0 15px #00000073}.notebook-page{background:#fff;width:500px;height:720px;position:relative;overflow:hidden;box-shadow:0 8px 25px #0000002e}.left{transform:rotate(-1deg)}.right{transform:rotate(1deg)}.page-number{color:#777;z-index:20;font-family:Georgia,serif;font-size:18px;position:absolute;top:18px}.left .page-number{left:22px}.right .page-number{right:22px}.paper{resize:none;box-sizing:border-box;color:#17408b;background:linear-gradient(90deg,#0000 58px,#ff6161 58px 61px,#0000 61px),repeating-linear-gradient(#fff 0 50px,#b8d8ff 51px);border:none;outline:none;width:100%;height:100%;padding:55px 65px;font-family:Caveat,cursive;font-size:28px;line-height:52px}.page-controls{justify-content:center;align-items:center;gap:40px;margin-top:30px;display:flex}.page-controls button{color:#fff;cursor:pointer;background:#6b4726;border:none;border-radius:10px;padding:12px 26px;font-size:17px;transition:all .25s}.page-controls button:hover{background:#4b2f18}.page-controls button:disabled{opacity:.5;cursor:not-allowed}.book{perspective:2200px}.notebook-page{transform-style:preserve-3d;transition:transform .5s,box-shadow .5s}.book.flipping .right{transform-origin:0;animation:.5s flipRight}.book.flipping .left{opacity:.95}@keyframes flipRight{0%{transform:rotateY(0)}50%{transform:rotateY(-95deg)}to{transform:rotateY(0)}}.flip-page{pointer-events:none;z-index:20;width:500px;height:720px;transform-style:preserve-3d;backface-visibility:hidden;background:#fff;position:absolute;top:35px;overflow:hidden;box-shadow:0 15px 35px #0000004d}.flip-page.right{transform-origin:0;right:35px}.flip-page.left{transform-origin:100%;left:35px}.flip-page.active.right{animation:.6s forwards flipNext}.flip-page.active.left{animation:.6s forwards flipPrevious}@keyframes flipNext{0%{transform:rotateY(0)}to{opacity:0;transform:rotateY(-180deg)}}@keyframes flipPrevious{0%{opacity:0;transform:rotateY(180deg)}to{opacity:1;transform:rotateY(0)}}.spine{z-index:5;background:linear-gradient(90deg,#2a1305,#5d3316,#a07145,#5d3316,#2a1305);width:26px;height:720px;position:relative}.spine-shadow{position:absolute;inset:0;box-shadow:inset 0 0 25px #00000080}.habit-input{gap:10px;margin:25px 0;display:flex}.habit-input input{border-radius:10px;flex:1;padding:12px}.habit-input button{cursor:pointer;border:none;border-radius:10px;padding:12px 20px}.habit-card{background:#1f2937;border-radius:12px;margin-top:15px;padding:20px}.habit-card h3{margin-bottom:8px}.habit-header{align-items:center;gap:12px;display:flex}.delete-habit{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:8px;margin-top:12px;padding:8px 14px}.delete-habit:hover{background:#dc2626}.content{padding:40px}.focus-page{flex-direction:column;gap:30px;display:flex}.focus-heading{margin:0;font-size:38px}.focus-layout{grid-template-columns:2fr 1fr;gap:25px;display:grid}.focus-main,.focus-side,.focus-bottom{flex-direction:column;gap:25px;display:flex}.focus-bottom{grid-template-columns:1fr 1fr;display:grid}.focus-timer,.goal-progress,.focus-stats,.ambient-sounds,.focus-quote,.session-history{background:#fff;border-radius:20px;padding:25px;box-shadow:0 8px 24px #00000014}.timer-display{text-align:center;margin:30px 0;font-size:72px;font-weight:700;color:#2563eb!important}.timer-controls,.preset-buttons{flex-wrap:wrap;justify-content:center;gap:15px;display:flex}.timer-controls button,.preset-buttons button{cursor:pointer;border:none;border-radius:12px;padding:12px 22px}.progress-bar{background:#e5e7eb;border-radius:50px;width:100%;height:18px;margin:15px 0;overflow:hidden}.progress-fill{background:#2563eb;width:0%;height:100%;transition:all .3s}.stats-grid{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.stat-box{text-align:center;background:#f5f7fb;border-radius:14px;padding:18px}.sound-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.sound-grid button{cursor:pointer;border:none;border-radius:12px;padding:15px}.focus-quote p{font-size:18px;font-style:italic}.session-history{min-height:180px}.focus-timer h2,.goal-progress h2,.focus-stats h2,.ambient-sounds h2,.focus-quote h2,.session-history h2{color:#1f2937;margin-bottom:18px}.focus-timer p,.goal-progress p,.focus-stats p,.ambient-sounds p,.focus-quote p,.session-history p{color:#4b5563}.stat-box h3{color:#374151;margin-bottom:8px}.stat-box p{color:#2563eb;font-size:22px;font-weight:700}.sound-grid button{color:#1f2937;background:#f5f7fb;font-weight:600;transition:all .25s}.sound-grid button:hover{color:#fff;background:#2563eb}.timer-controls button,.preset-buttons button{color:#fff;background:#2563eb;font-weight:600}.timer-controls button:hover,.preset-buttons button:hover{background:#1d4ed8}.progress-bar{background:#dbeafe}.progress-fill{background:linear-gradient(90deg,#2563eb,#60a5fa)}.focus-toast{z-index:9999;background:#fff;border:1px solid #dbeafe;border-radius:18px;align-items:center;gap:16px;width:320px;padding:18px;animation:.45s toastSlide;display:flex;position:fixed;top:30px;right:30px;box-shadow:0 18px 45px #2563eb2e}.toast-icon{color:#fff;background:#2563eb;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:26px;display:flex}.focus-toast h3{color:#111827;margin:0}.focus-toast p{color:#6b7280;margin-top:6px}@keyframes toastSlide{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}.calendar-header{justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.calendar-title{flex-direction:column;align-items:center;display:flex}.calendar-title h1{margin:0;font-size:34px}.calendar-title span{color:#777;font-size:17px}.calendar-nav-btn{cursor:pointer;background:#f5f7fb;border:none;border-radius:14px;width:50px;height:50px;font-size:22px;transition:all .2s}.calendar-nav-btn:hover{background:#e8eefc}.calendar-grid{background:#fff;border-radius:20px;padding:20px}.weekdays{text-align:center;grid-template-columns:repeat(7,1fr);margin-bottom:18px;display:grid}.weekday{color:#2563eb;text-transform:uppercase;letter-spacing:1px;padding:14px 0;font-size:15px;font-weight:700}.days{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;display:grid}.calendar-empty{min-height:110px}.calendar-day{color:#1f2937;box-sizing:border-box;cursor:pointer;background:#f5f7fb;border:1px solid #d1d5db;border-radius:15px;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;min-height:110px;padding:10px;transition:all .25s;display:flex}.calendar-day:hover{transform:translateY(-2px);box-shadow:0 6px 18px #00000014}.day-number{margin-bottom:8px;font-size:18px;font-weight:700}.today{color:#fff;background:#2563eb}.other-month{color:#9ca3af;opacity:.7;background:#eef2f7}.other-month:hover{opacity:1}.event-list{flex-direction:column;gap:5px;width:100%;display:flex}.event-item{align-items:center;gap:6px;font-size:12px;display:flex;overflow:hidden}.event-dot{background:#3b82f6;border-radius:50%;flex-shrink:0;width:8px;height:8px}.event-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.modal-overlay{z-index:1000;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.event-modal{background:#fff;border-radius:20px;flex-direction:column;gap:15px;width:420px;padding:25px;display:flex}.event-modal input,.event-modal textarea{border:1px solid #ccc;border-radius:10px;padding:12px}.modal-buttons{justify-content:flex-end;gap:12px;margin-top:20px;display:flex}.event-modal button{cursor:pointer;border:none;border-radius:10px;padding:12px 18px}.delete-btn{color:#fff;background:#ef4444}.delete-btn:hover{background:#dc2626}.weekdays{grid-template-columns:repeat(7,1fr);margin-bottom:18px;display:grid}.weekday{letter-spacing:1px;text-transform:uppercase;justify-content:center;align-items:center;height:40px;font-size:15px;font-weight:700;display:flex;color:#2563eb!important}.calendar-day{color:#1f2937!important}.calendar-day .day-number{font-size:18px;font-weight:700;color:#1f2937!important}.today{background:#2563eb;color:#fff!important}.today .day-number{color:#fff!important}.other-month{opacity:.7;background:#eef2f7;color:#9ca3af!important}.other-month .day-number{color:#9ca3af!important}.event-title{color:inherit}.event-dot{background:#3b82f6}
